:root{--bg: #0b0f17;--bg2: #0f1520;--panel: #101725;--line: #1e2938;--fg: #e6edf6;--dim: #8b98ab;--accent: #22d3ee;--accent-dim: rgba(34, 211, 238, .14);--danger: #ff5470;--mono: "JetBrains Mono", ui-monospace, monospace}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--fg);font-family:Inter,system-ui,sans-serif;font-size:13px;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}.mono{font-family:var(--mono)}.theme-toggle{flex-shrink:0;width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--bg2);color:var(--fg);font-size:14px;line-height:1;cursor:pointer;transition:border-color .15s}.theme-toggle:hover{border-color:var(--accent)}body.light{--bg: #eef2f7;--bg2: #ffffff;--panel: #ffffff;--line: #d9e2ec;--fg: #182230;--dim: #5b6b80;--accent-dim: rgba(34, 211, 238, .16)}body.light .swatch-active{border-color:var(--fg)}body.light .long-hint{color:#9a6b00;border-color:#e6c978}body.light .file-status.ok{color:#157a3c;border-color:#2e9e5b}body.light .file-status.err{color:#b91c3a}.topbar{display:flex;align-items:center;gap:16px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:nowrap;flex-shrink:0}.brand{font-weight:700;letter-spacing:.14em;font-size:14px;display:flex;align-items:center;gap:8px;white-space:nowrap}.brand .thin{color:var(--dim);font-weight:400}.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);flex-shrink:0}.top-meta{flex:1;text-align:center;color:var(--dim);font-size:10px;letter-spacing:.22em;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.layout{flex:1;display:grid;grid-template-columns:330px 1fr;min-height:0}.panel{border-right:1px solid var(--line);background:var(--panel);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.panel-sec{padding:14px 16px 16px;border-bottom:1px solid var(--line)}.panel-sec h2{font-size:10px;letter-spacing:.24em;color:var(--dim);margin-bottom:12px;display:flex;gap:8px;align-items:baseline}.panel-sec h2 i{font-style:normal;color:var(--accent);font-family:var(--mono)}.btn{width:100%;border:1px solid var(--line);background:var(--bg2);color:var(--fg);border-radius:8px;padding:9px 12px;font:600 12px Inter,sans-serif;letter-spacing:.04em;cursor:pointer;transition:all .15s;text-align:center;display:inline-block}.btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#04121a}.btn-primary:hover:not(:disabled){filter:brightness(1.15);color:#04121a}.btn-export{background:linear-gradient(135deg,var(--accent),#6366f1);border:none;color:#04121a;padding:12px;font-size:13px;margin-top:4px}.btn-export:hover:not(:disabled){filter:brightness(1.15);color:#04121a}.btn-ghost{background:transparent;margin-top:8px;color:var(--dim)}.link-btn{background:none;border:none;color:var(--danger);cursor:pointer;font:inherit;padding:0}.hint{color:var(--dim);font-size:10.5px;line-height:1.55;margin-top:10px}.help-toggle{margin-top:10px;text-align:center}.help-guide{margin-top:10px;border:1px solid var(--line);border-radius:9px;background:var(--bg2);padding:12px 12px 10px}.help-steps{padding-left:18px;margin:0;display:flex;flex-direction:column;gap:8px}.help-steps li{color:var(--fg);font-size:11.5px;line-height:1.5}.help-steps strong{color:var(--accent);font-weight:600}.help-guide .hint{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}.file-status{margin-top:10px;font-family:var(--mono);font-size:10.5px;border-left:2px solid var(--line);padding:6px 10px;color:var(--dim);white-space:pre-line}.file-status.ok{border-color:#6ee7a0;color:#b7ecc9}.file-status.err{border-color:var(--danger);color:#ffc2ce}.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.chip{border:1px solid var(--line);background:transparent;color:var(--dim);font:600 10px var(--mono);letter-spacing:.08em;border-radius:6px;padding:5px 9px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px}.chip:hover{border-color:var(--dim);color:var(--fg)}.chip-active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.style-dot{width:10px;height:10px;border-radius:50%;background:var(--c);border:1px solid rgba(255,255,255,.3);flex-shrink:0}.field-cell{display:flex;flex-direction:column;gap:6px;min-width:0}.field-label{font-size:9.5px;letter-spacing:.14em;color:var(--dim);font-weight:600}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.field-row label,.panel-sec>label{display:flex;flex-direction:column;gap:4px;font-size:9.5px;letter-spacing:.14em;color:var(--dim);font-weight:600}input[type=date],input[type=number],input[type=text],select{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--fg);border-radius:7px;padding:7px 9px;font:500 11.5px var(--mono);outline:none}input:focus,select:focus{border-color:var(--accent)}input[type=color]{height:32px;padding:2px;cursor:pointer}.swatches{display:flex;gap:6px;flex-wrap:wrap}.swatch{width:26px;height:26px;border-radius:7px;background:var(--c);border:2px solid transparent;cursor:pointer;transition:transform .12s,border-color .12s}.swatch:hover{transform:scale(1.1)}.swatch-active{border-color:#fff}.swatch-custom{background:conic-gradient(from 0deg,#ff5470,#fbbf24,#4af626,#22d3ee,#6366f1,#e90064,#ff5470)}.long-hint{border:1px dashed var(--line);border-radius:7px;color:#ffd58a;font-size:10.5px;line-height:1.5;padding:8px 10px;margin-bottom:10px}.hidden{display:none!important}.progress-wrap{margin-top:12px}.progress-bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}.progress-bar>div{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#6366f1);transition:width .2s}.progress-meta{display:flex;justify-content:space-between;align-items:center;margin-top:7px;font-size:10.5px;color:var(--dim);font-family:var(--mono)}.result-actions{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-top:12px}.result-actions .btn-ghost{margin-top:0}.result-actions #btn-again{grid-column:1 / -1;background:var(--bg2);color:var(--fg)}.btn-share{background:var(--bg2);border-color:var(--accent);color:var(--accent)}.btn-share:hover:not(:disabled){background:var(--accent-dim);color:var(--accent)}.range-stats{font-family:var(--mono);font-size:10.5px;color:var(--dim);line-height:1.7;white-space:pre-line}.stage{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:radial-gradient(1000px 500px at 70% -10%,rgba(34,211,238,.05),transparent),var(--bg)}.canvas-frame{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;min-height:0;position:relative}#preview{max-width:100%;max-height:100%;border-radius:10px;border:1px solid var(--line);box-shadow:0 20px 60px #00000080,0 0 80px #22d3ee0f;background:#000}.stage-empty{position:absolute;top:20px;right:20px;bottom:20px;left:20px;display:flex;align-items:center;justify-content:center;pointer-events:none}.stage-empty-box{text-align:center;color:var(--dim);border:1px dashed var(--line);border-radius:12px;padding:28px 36px;display:flex;flex-direction:column;gap:10px;max-width:320px}.stage-empty-box strong{color:var(--fg);letter-spacing:.3em;font-family:var(--mono);font-size:12px}.stage-empty-box span{font-size:12px;line-height:1.6}.drop-overlay{position:absolute;top:12px;right:12px;bottom:12px;left:12px;z-index:20;border:2px dashed var(--accent);border-radius:14px;background:#0b0f17d9;display:flex;align-items:center;justify-content:center;color:var(--accent);font:700 16px var(--mono);letter-spacing:.2em;text-align:center;line-height:2}.drop-overlay small{font-size:10px;color:var(--dim);letter-spacing:.1em}.player{display:flex;align-items:center;gap:12px;padding:12px 20px 16px}.play-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--fg);font-size:13px;cursor:pointer;transition:all .15s}.play-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.play-btn:disabled{opacity:.4;cursor:not-allowed}#scrubber{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:5px;border-radius:999px;background:var(--line);cursor:pointer}#scrubber::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);cursor:grab}.time-readout{font-size:11px;color:var(--dim);min-width:110px;text-align:right}.statusbar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:7px 18px;border-top:1px solid var(--line);background:var(--panel);font-family:var(--mono);font-size:10px;color:var(--dim)}.attribution{opacity:.75}.toast-zone{position:fixed;bottom:46px;left:50%;transform:translate(-50%);z-index:99;display:flex;flex-direction:column;gap:8px;align-items:center}.toast{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 18px;font-size:12px;max-width:520px;text-align:center;animation:toast-in .25s ease-out;box-shadow:0 10px 40px #0000008c}.toast.err{border-color:var(--danger);color:#ffc2ce}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}@media (max-width: 1280px){.layout{grid-template-columns:300px 1fr}.top-meta{letter-spacing:.12em}}@media (max-width: 900px){body{overflow:auto;height:auto;min-height:100vh;min-height:100dvh}.topbar{padding:8px 12px;gap:10px}.top-meta{display:none}.brand{font-size:12px;gap:6px}.brand-dot{width:8px;height:8px}.layout{display:flex;flex-direction:column}.stage{order:-1;flex:none;position:sticky;top:0;z-index:30;height:min(100vw,44vh);min-height:240px;background:radial-gradient(1000px 500px at 70% -10%,rgba(34,211,238,.05),transparent),var(--bg);border-bottom:1px solid var(--line)}.panel{border-right:none;border-top:1px solid var(--line);max-height:none;overflow:visible}.canvas-frame{height:100%;min-height:0;padding:10px 12px;flex:none}.stage-empty{top:12px;right:12px;bottom:12px;left:12px}.stage-empty-box{padding:20px 22px}.player{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--panel);border-top:1px solid var(--line);padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));gap:10px}.play-btn{width:34px;height:34px}.time-readout{min-width:0;font-size:10px}.panel{padding-bottom:84px}.statusbar{flex-wrap:wrap;gap:2px 14px;padding:6px 12px;margin-bottom:70px}.toast-zone{bottom:82px;width:calc(100vw - 24px)}.toast{max-width:100%}}@media (max-width: 480px){.panel-sec{padding:12px 12px 14px}.field-row{gap:6px}.statusbar .attribution{display:none}.btn{min-height:44px;padding:11px 12px;font-size:12.5px}.chip{min-height:34px;padding:6px 12px;font-size:10.5px}.play-btn{width:44px;height:44px}.swatch{width:30px;height:30px}.field-row{gap:10px}.result-actions{grid-template-columns:1fr 1fr}input[type=date],input[type=number],input[type=text],select{font-size:16px;padding:10px 9px}.help-steps li{font-size:12.5px}}@media (max-height: 700px) and (min-width: 901px){.topbar{padding:6px 14px}.player{padding:8px 16px 10px}.canvas-frame{padding:12px}}