@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";:root{color:#19243a;font-synthesis:none;background:#f4f6fa;font-family:Manrope,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,select{font:inherit}.shell{max-width:1240px;margin:auto;padding:30px 24px 24px}.topbar{justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px;display:flex}.eyebrow{color:#6574e8;letter-spacing:.14em;margin:0 0 8px;font:500 11px DM Mono,monospace}h1{letter-spacing:-.06em;margin:0;font-size:clamp(28px,4vw,44px);line-height:1}h1 span{color:#5d6ee8}.status{color:#5364d6;white-space:nowrap;background:#e7eafe;border-radius:999px;padding:8px 12px;font:500 11px DM Mono,monospace}.app-layout{grid-template-columns:minmax(0,1.5fr) 330px;align-items:start;gap:18px;display:grid}.panel{background:#fff;border:1px solid #e2e6ef;border-radius:16px;box-shadow:0 12px 30px #1e2b4e0f}.preview-panel{padding:20px}.controls{padding:18px}.panel-head{justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px;display:flex}h2{margin:0 0 8px;font-size:15px}.panel-head p,.preview-footer,.hint{color:#8992a5;margin:0;font-size:12px;line-height:1.5}.canvas-card{background:#f6f7fa;border:1px solid #e6e9f0;border-radius:12px;place-items:center;min-height:440px;display:grid;position:relative;overflow:hidden}canvas{object-fit:contain;touch-action:none;width:100%;max-width:100%;height:auto;min-height:300px;display:block}canvas[hidden]{display:none}.selection-box{pointer-events:none;background:#5d6ee81f;border:2px dashed #5d6ee8;position:absolute}.preview-footer{justify-content:space-between;align-items:center;padding-top:12px;display:flex}.quiet-button,.small-button,.secondary,.primary,.batch,.upload{cursor:pointer;border-radius:9px;min-height:42px;font-size:12px;font-weight:700}.quiet-button{color:#5d6ee8;background:0 0;border:0;padding:0 10px}.small-button{color:#5d6ee8;background:#fff;border:1px solid #dfe3ed;padding:0 9px}.upload{color:#5364d6;background:#edf0ff;justify-content:center;align-items:center;display:flex}.upload input{display:none}.primary{color:#fff;background:#5d6ee8;border:0;flex:1}.secondary{color:#667087;background:#fff;border:1px solid #dfe3ed;padding:0 10px}.batch{color:#fff;background:#1d2b52;border:0;width:100%}button:disabled{opacity:.45;cursor:not-allowed}.control-section{border-bottom:1px solid #edf0f5;margin-bottom:18px;padding-bottom:18px}.section-title{align-items:baseline;gap:10px;display:flex}.section-title>span{color:#a0a8b9;font:500 11px DM Mono,monospace}.gallery{gap:7px;max-height:170px;margin-top:12px;display:flex;overflow:auto}.gallery-tile{cursor:pointer;background:#f3f5f9;border:2px solid #0000;border-radius:8px;flex:0 0 58px;padding:2px;position:relative}.gallery-tile.selected{border-color:#5d6ee8}.gallery-tile img{aspect-ratio:1;object-fit:cover;border-radius:5px;width:100%;display:block}.gallery-tile span{color:#fff;background:#19243abf;border-radius:999px;padding:1px 4px;font:10px DM Mono,monospace;position:absolute;bottom:4px;left:4px}.color-row{align-items:center;gap:8px;margin-bottom:10px;display:flex}input[type=color]{border:1px solid #dfe3ed;border-radius:8px;width:42px;height:40px;padding:3px}output{color:#5d6ee8;font:500 12px DM Mono,monospace}select{color:#41506b;background:#fff;border:1px solid #dfe3ed;border-radius:9px;width:100%;min-height:42px;margin-bottom:10px;padding:0 10px}.field-label,.range-label{color:#687287;margin:10px 0 7px;font-size:11px;display:block}.range-label{justify-content:space-between;display:flex}input[type=range]{accent-color:#6574e8;width:100%;min-height:32px}.explain{color:#8c95a8;margin:8px 0 12px;font-size:11px;line-height:1.5}.advanced summary,.batch-panel summary{cursor:pointer;color:#5364d6;font-size:12px;font-weight:700}.advanced-body{padding-top:12px}.color-suggestions{flex-wrap:wrap;gap:7px;margin:7px 0;display:flex}.suggested-color{cursor:pointer;border:2px solid #fff;border-radius:50%;outline:1px solid #dfe3ed;width:26px;height:26px}.actions{gap:8px;margin-top:18px;display:flex}.batch-panel{border-top:1px solid #edf0f5;margin-top:16px;padding-top:16px}.batch-panel .advanced-body{gap:8px;display:grid}footer{color:#9aa3b5;justify-content:space-between;padding:16px 2px 0;font:11px DM Mono,monospace;display:flex}.zoom-modal{z-index:10;background:#0d1321b8;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.zoom-modal[hidden]{display:none}.zoom-dialog{background:#fff;border-radius:14px;width:min(1080px,100%);max-height:94vh;overflow:hidden}.zoom-toolbar{border-bottom:1px solid #e5e8f0;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.zoom-view{text-align:center;background:#f3f5f9;max-height:80vh;padding:15px;overflow:auto}.zoom-view img{max-width:none;height:auto}.zoom-range{color:#667087;align-items:center;gap:10px;padding:10px 14px;font-size:12px;display:flex}.zoom-range input{flex:1}@media (width<=860px){.app-layout{grid-template-columns:1fr}.controls{order:2}.preview-panel{order:1}}@media (width<=560px){.shell{padding:max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom))}.topbar{align-items:flex-start}h1{font-size:29px}.status{font-size:10px}.preview-panel,.controls{padding:14px}.canvas-card{min-height:280px}canvas{min-height:220px}.actions{flex-wrap:wrap}.actions .primary{flex-basis:100%}.actions .secondary{flex:1}footer{line-height:2;display:block}}