:root{--bg-pitch: #e8ebf0;--bg-surface: #ffffff;--bg-surface-subtle: #f5f6f9;--bg-hover: #e4e7ed;--bg-active: #09090b;--border-hairline: rgba(0, 0, 0, .08);--border-hover: rgba(0, 0, 0, .22);--border-focus: rgba(0, 0, 0, .45);--border-solid: #09090b;--text-primary: #0f1013;--text-secondary: #585c66;--text-tertiary: #8a8e98;--text-inverse: #ffffff;--cmyk-c: #00b5e2;--cmyk-m: #e4007c;--cmyk-y: #ffd100;--cmyk-k: #111111;--font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", monospace;--radius-xs: 3px;--radius-sm: 4px;--radius-md: 6px;--radius-pill: 9999px;--transition-fast: .12s ease;--transition-smooth: .22s cubic-bezier(.16, 1, .3, 1)}:root[data-theme=bright],body.bright-mode{--bg-pitch: #e8ebf0;--bg-surface: #ffffff;--bg-surface-subtle: #f5f6f9;--bg-hover: #e4e7ed;--bg-active: #09090b;--border-hairline: rgba(0, 0, 0, .08);--border-hover: rgba(0, 0, 0, .22);--border-focus: rgba(0, 0, 0, .45);--border-solid: #09090b;--text-primary: #0f1013;--text-secondary: #585c66;--text-tertiary: #8a8e98;--text-inverse: #ffffff}:root[data-theme=dark],body.dark-mode{--bg-pitch: #09090b;--bg-surface: #111114;--bg-surface-subtle: #16161a;--bg-hover: #1c1c22;--bg-active: #ffffff;--border-hairline: rgba(255, 255, 255, .08);--border-hover: rgba(255, 255, 255, .22);--border-focus: rgba(255, 255, 255, .45);--border-solid: #ffffff;--text-primary: #f4f4f6;--text-secondary: #a1a1aa;--text-tertiary: #71717a;--text-inverse: #09090b}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html{background-color:var(--bg-pitch);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100%;height:100dvh;overflow:hidden}body{background-color:var(--bg-pitch);color:var(--text-primary);line-height:1.35;height:100%;height:100dvh;overflow:hidden}.app-container{max-width:1400px;width:100%;height:100%;height:100dvh;margin:0 auto;padding:8px 16px;display:flex;flex-direction:column;gap:8px;overflow:hidden;box-sizing:border-box}.header{display:flex;justify-content:space-between;align-items:center;padding:2px 0 6px;border-bottom:1px solid var(--border-hairline);flex-shrink:0;height:36px}.brand{display:flex;align-items:center;gap:8px;text-decoration:none}.brand-glyph{font-size:1rem;color:var(--text-primary);line-height:1}.brand-name{font-family:var(--font-sans);font-size:.95rem;font-weight:600;letter-spacing:.04em;color:var(--text-primary)}.nav{display:flex;align-items:center;gap:12px}.tool-switcher{display:flex;background-color:#ffffff0a;padding:2px;border-radius:var(--radius-pill);border:1px solid var(--border-hairline)}.tool-tab{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-family:var(--font-mono);font-size:.72rem;font-weight:500;text-decoration:none;color:var(--text-secondary);border-radius:var(--radius-pill);transition:all var(--transition-fast)}.tool-tab:hover{color:var(--text-primary);background-color:#ffffff14}.tool-tab.active{background-color:var(--text-primary);color:var(--text-inverse);font-weight:600}.nav-explore-label{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.08em;color:var(--text-tertiary)}.nav-explore-links{display:flex;align-items:center;gap:8px}.nav-link-btn{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.72rem;color:var(--text-secondary);text-decoration:none;background:var(--bg-surface);border:1px solid var(--border-hairline);padding:4px 10px;border-radius:var(--radius-xs);transition:all var(--transition-fast)}.nav-link-btn:hover{color:#fff;border-color:var(--border-hover);background:var(--bg-hover)}.nav-theme-btn{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:.72rem;font-weight:500;color:var(--text-secondary);background:var(--bg-surface);border:1px solid var(--border-hairline);padding:4px 10px;border-radius:var(--radius-xs);cursor:pointer;transition:all var(--transition-fast)}.nav-theme-btn:hover{color:var(--text-primary);border-color:var(--border-hover);background:var(--bg-hover)}.nav-theme-btn .theme-icon{font-size:.8rem;line-height:1}.nav-theme-btn .theme-label{letter-spacing:.04em}.stage-container{display:grid;grid-template-columns:1fr 310px;gap:10px;align-items:stretch;flex:1;min-height:0;overflow:hidden}.canvas-panel{display:flex;flex-direction:column;gap:8px;background:var(--bg-surface);border:1px solid var(--border-hairline);border-radius:var(--radius-sm);padding:10px 12px;height:100%;min-height:0;overflow:hidden}.canvas-header{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;gap:8px}.badge-token{font-family:var(--font-mono);font-size:.74rem;font-weight:600;letter-spacing:.05em;color:var(--text-primary);background:var(--bg-surface-subtle);border:1px solid var(--border-hairline);padding:4px 8px;border-radius:var(--radius-xs)}.canvas-toggles{display:flex;align-items:center;gap:4px}.toggle-btn{background:transparent;border:1px solid var(--border-hairline);color:var(--text-secondary);font-family:var(--font-mono);font-size:.65rem;font-weight:500;letter-spacing:.03em;padding:4px 7px;border-radius:var(--radius-xs);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.toggle-btn:hover{color:#fff;border-color:var(--border-hover)}.toggle-btn.active{background:var(--bg-active);color:var(--text-inverse);border-color:var(--bg-active);font-weight:600}.canvas-frame{width:100%;flex:1;min-height:0;background:#000;border:1px solid var(--border-hairline);border-radius:var(--radius-xs);position:relative;overflow:hidden}#canvas-container{width:100%;height:100%}.original-svg-container{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000;z-index:5;opacity:0;pointer-events:none;transition:opacity var(--transition-fast)}.original-svg-container.active{opacity:1;pointer-events:auto}.original-svg-container svg{max-width:min(85%,440px);max-height:85%;width:auto;height:auto;box-shadow:0 10px 40px #000000e6;border-radius:var(--radius-xs);background:#fff}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#09090bd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:10;opacity:0;pointer-events:none;transition:opacity .2s ease}.loading-overlay.visible{opacity:1;pointer-events:auto}.spinner{width:28px;height:28px;border:2px solid rgba(255,255,255,.15);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-family:var(--font-mono);font-size:.75rem;color:var(--text-secondary);letter-spacing:.05em}.canvas-tooltip{position:absolute;pointer-events:none;background:#121216f0;border:1px solid var(--border-hover);padding:5px 10px;border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:.72rem;color:#fff;z-index:20;opacity:0;transition:opacity .15s ease;white-space:nowrap}.actions-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.token-input-control{display:flex;align-items:center;background:var(--bg-surface-subtle);border:1px solid var(--border-hairline);border-radius:var(--radius-xs);padding:3px 6px;transition:border-color var(--transition-fast)}.token-input-control:focus-within{border-color:var(--border-focus)}.token-prefix{font-family:var(--font-mono);font-size:.75rem;color:var(--text-tertiary);margin-right:4px;-webkit-user-select:none;user-select:none}.token-prefix.sub{font-size:.65rem;font-weight:600;color:var(--text-secondary)}.token-num-input{width:75px;background:transparent;border:none;outline:none;color:#fff;font-family:var(--font-mono);font-size:.82rem;font-weight:500;padding:2px 4px}.token-num-input::-webkit-inner-spin-button,.token-num-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.btn-token-go{background:transparent;border:1px solid var(--border-hairline);color:var(--text-primary);font-family:var(--font-mono);font-size:.8rem;padding:2px 8px;border-radius:var(--radius-xs);cursor:pointer;transition:all var(--transition-fast)}.btn-token-go:hover{background:#fff;color:#09090b}.action-btn{display:inline-flex;align-items:center;gap:6px;background:var(--bg-surface-subtle);border:1px solid var(--border-hairline);color:var(--text-primary);font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.04em;padding:7px 14px;border-radius:var(--radius-xs);cursor:pointer;transition:all var(--transition-fast)}.action-btn:hover{border-color:var(--border-hover);background:var(--bg-hover)}.curated-dropdown{background:var(--bg-surface-subtle);border:1px solid var(--border-hairline);color:var(--text-secondary);font-family:var(--font-mono);font-size:.72rem;padding:7px 10px;border-radius:var(--radius-xs);outline:none;cursor:pointer;transition:all var(--transition-fast)}.curated-dropdown:hover{border-color:var(--border-hover);color:#fff}.curated-dropdown option{background:var(--bg-surface);color:#fff}.download-dropdown-container{position:relative;margin-left:auto}.btn-download{background:#fff;color:#09090b;border-color:#fff;font-weight:600}.btn-download:hover{background:#e4e4e7;border-color:#e4e4e7}.dropdown-chevron{font-size:.7rem;transition:transform .2s ease}.download-dropdown-container.open .dropdown-chevron{transform:rotate(180deg)}.download-menu{position:absolute;bottom:calc(100% + 8px);right:0;width:240px;background:var(--bg-surface);border:1px solid var(--border-hover);border-radius:var(--radius-xs);box-shadow:0 12px 32px #000000b3;display:flex;flex-direction:column;padding:4px;gap:2px;opacity:0;pointer-events:none;transform:translateY(6px);transition:all var(--transition-fast);z-index:100}.download-dropdown-container.open .download-menu{opacity:1;pointer-events:auto;transform:translateY(0)}.download-option{display:flex;flex-direction:column;align-items:flex-start;padding:8px 10px;background:transparent;border:none;border-radius:var(--radius-xs);cursor:pointer;text-align:left;transition:background var(--transition-fast)}.download-option:hover{background:var(--bg-hover)}.opt-label{font-family:var(--font-mono);font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--text-primary)}.opt-sub{font-family:var(--font-body);font-size:.68rem;color:var(--text-tertiary);margin-top:1px}.specs-panel{background:var(--bg-surface);border:1px solid var(--border-hairline);border-radius:var(--radius-sm);padding:10px 12px;display:flex;flex-direction:column;gap:6px;height:100%;min-height:0;overflow:hidden}.specs-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:6px;border-bottom:1px solid var(--border-hairline);flex-shrink:0}.specs-title{font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;color:var(--text-secondary)}.layers-list{display:flex;flex-direction:column;gap:5px;flex:1;min-height:0;justify-content:space-between}.layer-item{display:flex;align-items:center;padding:4px 7px;background:var(--bg-surface-subtle);border:1px solid var(--border-hairline);border-radius:var(--radius-xs);gap:6px;min-height:26px}.layer-num{font-family:var(--font-mono);font-size:.62rem;font-weight:500;color:var(--text-tertiary);width:18px}.layer-name{font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.03em;color:var(--text-secondary);flex:1}.layer-val{font-family:var(--font-mono);font-size:.7rem;font-weight:600;color:var(--text-primary);text-align:right}.mono-val{font-size:.65rem;color:var(--text-tertiary)}.layer-pills-row{display:flex;gap:3px}.layer-chip{font-family:var(--font-mono);font-size:.62rem;font-weight:600;padding:1px 4px;border-radius:var(--radius-xs);border:1px solid transparent}.chip-c{color:var(--cmyk-c);background:#00b5e21f;border-color:#00b5e240}.chip-m{color:var(--cmyk-m);background:#e4007c1f;border-color:#e4007c40}.chip-y{color:var(--cmyk-y);background:#ffd1001f;border-color:#ffd10040}.chip-k{color:#aaa;background:#ffffff14;border-color:#fff3}.chip-inactive{opacity:.3;filter:grayscale(1)}.layer-slider-wrap{display:flex;align-items:center;gap:6px;width:130px}.spec-slider{-webkit-appearance:none;width:100%;height:3px;background:#ffffff29;border-radius:2px;outline:none;cursor:pointer}.spec-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:#fff;cursor:pointer}.spec-slider-val{font-family:var(--font-mono);font-size:.65rem;font-weight:500;color:var(--text-primary);width:48px;text-align:right}.spec-switch-label{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:.65rem;color:var(--text-primary);cursor:pointer}.spec-switch-label input{accent-color:#ffffff}.footer{margin-top:auto;padding:4px 0 2px;border-top:1px solid var(--border-hairline);display:flex;justify-content:center;align-items:center;flex-shrink:0;height:24px}.footer-author{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.65rem;color:var(--text-tertiary);letter-spacing:.05em}.footer-x-link{display:inline-flex;align-items:center;gap:4px;color:var(--text-secondary);text-decoration:none;transition:color var(--transition-fast)}.footer-x-link:hover{color:#fff}.toast{position:fixed;top:16px;left:50%;transform:translate(-50%) translateY(-10px);background:#18181f;border:1px solid var(--border-hover);color:#fff;font-family:var(--font-mono);font-size:.72rem;padding:6px 14px;border-radius:var(--radius-xs);box-shadow:0 8px 24px #0009;opacity:0;pointer-events:none;transition:all .2s ease;z-index:1000}.toast.visible{opacity:1;transform:translate(-50%) translateY(0)}body.bright-mode{background-color:var(--bg-pitch)}body.bright-mode .canvas-frame{background:#eaebef;border-color:#0000001a}body.bright-mode .original-svg-container{background:#eaebef}body.bright-mode .original-svg-container svg{box-shadow:0 10px 40px #0000001f}body.bright-mode .token-num-input{color:#0f1013}body.bright-mode .btn-token-go{color:#0f1013;border-color:var(--border-hairline)}body.bright-mode .btn-token-go:hover{background:#0f1013;color:#fff}body.bright-mode .toggle-btn:hover{color:#0f1013;border-color:var(--border-hover)}body.bright-mode .nav-link-btn:hover,body.bright-mode .action-btn:hover{color:#0f1013;border-color:var(--border-hover);background:var(--bg-hover)}body.bright-mode .spec-slider{background:#00000029}body.bright-mode .spec-slider::-webkit-slider-thumb{background:#0f1013}body.bright-mode .spec-switch-label input{accent-color:#0f1013}body.bright-mode .btn-download{background:#0f1013;color:#fff;border-color:#0f1013}body.bright-mode .btn-download:hover{background:#27272a;border-color:#27272a}body.bright-mode .download-menu{box-shadow:0 12px 32px #00000024}body.bright-mode .toast{background:#fff;color:#0f1013;border-color:#00000026;box-shadow:0 8px 24px #0000001f}body.bright-mode .canvas-tooltip{background:#fffffff5;border-color:#00000026;color:#0f1013;box-shadow:0 4px 16px #0000001a}body.bright-mode .loading-overlay{background:#e8ebf0e0}body.bright-mode .spinner{border-color:#0000001f;border-top-color:#0f1013}body.bright-mode .chip-k{color:#222;background:#0000000f;border-color:#0003}body.bright-mode .footer-x-link:hover{color:#0f1013}@media(max-width:860px){.app-container{padding:6px 8px 4px;gap:6px}.header{height:30px;padding:2px 0 4px}.brand-glyph{font-size:.85rem}.brand-name{font-size:.82rem}.nav-explore-label{display:none}.nav-link-btn{padding:2px 7px;font-size:.65rem}.stage-container{grid-template-columns:1fr;grid-template-rows:1fr auto;gap:6px}.canvas-panel{padding:6px 8px;gap:5px}.canvas-header{gap:4px}.badge-token{font-size:.65rem;padding:2px 5px}.canvas-toggles{gap:3px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}.canvas-toggles::-webkit-scrollbar{display:none}.toggle-btn{font-size:.58rem;padding:3px 5px;flex-shrink:0}.canvas-frame{min-height:180px;flex:1}.actions-bar{gap:4px}.token-input-control{padding:2px 4px}.token-prefix{font-size:.62rem}.token-num-input{width:44px;font-size:.68rem}.btn-token-go{padding:1px 4px;font-size:.66rem}.action-btn{padding:3px 6px;font-size:.64rem}.curated-dropdown{max-width:90px;font-size:.62rem;padding:2px 4px}.download-menu{width:175px;bottom:calc(100% + 4px)}.opt-label{font-size:.68rem}.opt-sub{font-size:.58rem}.specs-panel{padding:6px 8px;gap:4px;max-height:145px;flex-shrink:0}.specs-header{display:none}.layers-list{display:grid;grid-template-columns:1fr 1fr;gap:3px 6px;flex:none}.layer-item{padding:2px 5px;min-height:22px;gap:4px}.layer-num{display:none}.layer-name{font-size:.58rem}.layer-val{font-size:.62rem}.layer-chip{padding:1px 3px;font-size:.56rem}#item-spacing{grid-column:span 2}.layer-slider-wrap{width:100px;gap:4px}.spec-slider{height:3px}.spec-slider-val{font-size:.58rem;width:36px}.footer{height:18px;padding:1px 0}.footer-author{font-size:.58rem}}