:root{--app-bg:#08090a;--app-panel:#ffffff0a;--app-overlay:#18191b;--app-hover:#ffffff0f;--app-border:#ffffff1a;--app-border-strong:#ffffff29;--app-text:#f7f8f8;--app-label:#8a8f98;--app-label-dim:#62666d;--app-accent:#ff5a1f;--app-accent-text:#1a0d05;--app-danger:#e2867a}*{box-sizing:border-box}html,body{background:var(--app-bg);height:100%;color:var(--app-text);margin:0;font-family:Instrument Sans,ui-sans-serif,system-ui,sans-serif}a{color:inherit}.app-shell{flex-direction:column;height:100vh;display:flex}.app-header{border-bottom:1px solid var(--app-border);flex:none;justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.app-header .back{color:var(--app-label);align-items:center;gap:0;font-size:.85rem;text-decoration:none;transition:color .15s;display:flex}.app-header .back-label{white-space:nowrap;opacity:0;max-width:0;transition:max-width .2s,opacity .15s,margin-left .2s;display:inline-block;overflow:hidden}.app-header .back:hover .back-label{opacity:1;max-width:200px;margin-left:.5rem}.app-header .back:hover{color:var(--app-text)}.app-header .name{text-transform:lowercase;letter-spacing:.01em;color:var(--app-accent);font-family:Space Grotesk,ui-sans-serif,system-ui,sans-serif;font-size:1rem;font-weight:700}.app-body{flex:1;min-height:0;display:flex}@media (width<=860px){.app-body{flex-direction:column}.stage{order:-1}}.panel{border-right:1px solid var(--app-border);flex-direction:column;flex:none;width:300px;min-height:0;display:flex}.panel-scroll{flex:1;min-height:0;padding:.25rem 0;overflow-y:auto}.panel-scroll,#bgSwatches,.dropdown-menu{scrollbar-width:thin;scrollbar-color:var(--app-border-strong) transparent}.panel-scroll::-webkit-scrollbar,#bgSwatches::-webkit-scrollbar,.dropdown-menu::-webkit-scrollbar{width:6px}.panel-scroll::-webkit-scrollbar-track,#bgSwatches::-webkit-scrollbar-track,.dropdown-menu::-webkit-scrollbar-track{background:0 0}.panel-scroll::-webkit-scrollbar-thumb,#bgSwatches::-webkit-scrollbar-thumb,.dropdown-menu::-webkit-scrollbar-thumb{background:var(--app-border-strong);border-radius:3px}.panel-scroll::-webkit-scrollbar-thumb:hover,#bgSwatches::-webkit-scrollbar-thumb:hover,.dropdown-menu::-webkit-scrollbar-thumb:hover{background:var(--app-label)}.panel-footer{border-top:1px solid var(--app-border);flex:none;padding:1rem 1.25rem 1.25rem}@media (width<=860px){.panel{border-right:none;border-bottom:1px solid var(--app-border);width:100%;max-height:60vh}}.panel-section{padding:.9rem 1.25rem}.panel-section h2{text-transform:none;letter-spacing:0;color:var(--app-label-dim);margin:0 0 .85rem;font-size:.72rem;font-weight:500}.dropzone{border:1px dashed var(--app-border);text-align:center;cursor:pointer;border-radius:10px;padding:.75rem;transition:border-color .15s,background .15s}.dropzone:hover,.dropzone.is-dragover{border-color:var(--app-label);background:var(--app-hover)}.dropzone-icon{width:16px;height:16px;color:var(--app-label-dim);margin-bottom:.35rem}.dropzone p{color:var(--app-label);white-space:nowrap;margin:0;font-size:.8rem;line-height:1.4}.dropzone .filename{color:var(--app-text);word-break:break-all;white-space:normal;margin-top:.35rem;font-size:.76rem}.swatch-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:56px;gap:.5rem;display:grid}#bgSwatches{max-height:calc(168px + 1rem);overflow-y:auto}.swatch{border:1px solid var(--app-border);cursor:pointer;background:padding-box padding-box;border-radius:8px;width:100%;height:100%;padding:0;transition:border-color .15s,transform .1s;position:relative;overflow:hidden}.swatch:hover{border-color:var(--app-label)}.swatch.is-active{border-color:var(--app-accent);box-shadow:0 0 0 1px var(--app-accent)}.swatch-label{text-align:center;color:#fff;background:#00000073;padding:.2rem 0;font-size:.6rem;position:absolute;bottom:0;left:0;right:0}.bg-pane{margin-top:.75rem}.color-picker{flex-direction:column;gap:.6rem;display:flex}.color-sv{border:1px solid var(--app-border);cursor:crosshair;touch-action:none;border-radius:8px;width:100%;height:130px;position:relative;overflow:hidden}.color-sv canvas{width:100%;height:100%;display:block}.color-sv-thumb{pointer-events:none;border:2px solid #fff;border-radius:50%;width:13px;height:13px;position:absolute;top:0;left:0;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0006,0 1px 3px #00000080}.color-field{background:var(--app-hover);border:1px solid var(--app-border);border-radius:8px;align-items:center;gap:.65rem;padding:.5rem .65rem;display:flex}.color-field-label{width:3.4rem;color:var(--app-label);flex:none;font-size:.78rem}.color-field:has(.hex-input:focus){border-color:var(--app-accent)}.color-track{cursor:pointer;touch-action:none;border-radius:5px;flex:1;height:10px;position:relative}.color-track-thumb{pointer-events:none;background:#fff;border-radius:3px;width:6px;height:20px;position:absolute;top:50%;left:0;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0006,0 1px 3px #00000080}.hue-track{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.opacity-track{--opacity-track-color:#fff;background-image:linear-gradient(to right, transparent, var(--opacity-track-color)), repeating-conic-gradient(#3a3a3c 0% 25%, #232325 0% 50%);background-size:100% 100%,10px 10px}.hex-input{min-width:0;color:var(--app-text);text-transform:uppercase;background:0 0;border:none;outline:none;flex:1;padding:0;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.85rem}.upload-bg-btn,.remove-bg-btn{border:1px solid var(--app-border);width:100%;color:var(--app-label);cursor:pointer;background:0 0;border-radius:8px;justify-content:center;align-items:center;gap:.45rem;padding:.5rem;font-family:inherit;font-size:.78rem;transition:border-color .15s,color .15s;display:flex}.remove-bg-btn{margin-top:.6rem}.remove-bg-btn[hidden]{display:none}.upload-bg-btn:hover,.remove-bg-btn:hover:not(:disabled){border-color:var(--app-label);color:var(--app-text)}.remove-bg-btn:disabled{opacity:.55;cursor:default}.upload-bg-btn svg,.remove-bg-btn svg{flex:none;width:14px;height:14px}.segmented{border:1px solid var(--app-border);border-radius:9px;gap:2px;padding:2px;display:flex}.segmented button{color:var(--app-label);cursor:pointer;background:0 0;border:none;border-radius:7px;flex:1;padding:.45rem .4rem;font-family:inherit;font-size:.78rem;transition:background .15s,color .15s}.segmented button:hover{color:var(--app-text)}.segmented button.is-active{background:var(--app-hover);color:var(--app-text)}.dropdown{position:relative}.dropdown-trigger{background:var(--app-hover);border:1px solid var(--app-border);width:100%;color:var(--app-text);cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;gap:.5rem;padding:.6rem .75rem;font-family:inherit;font-size:.82rem;transition:border-color .15s;display:flex}.dropdown-trigger:hover,.dropdown.is-open .dropdown-trigger{border-color:var(--app-label)}.trigger-label{flex:1;justify-content:space-between;align-items:baseline;gap:.75rem;min-width:0;display:flex}.trigger-label .dims{color:var(--app-label-dim);font-variant-numeric:tabular-nums;flex:none;font-size:.72rem}.dropdown-caret{width:10px;height:6px;color:var(--app-label-dim);flex:none;transition:transform .15s}.dropdown.is-open .dropdown-caret{transform:rotate(180deg)}.dropdown-menu{z-index:20;background:var(--app-overlay);border:1px solid var(--app-border-strong);border-radius:10px;max-height:260px;padding:.3rem;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow-y:auto;box-shadow:0 16px 40px #00000073}.dropdown-menu[hidden]{display:none}.dropdown-option{cursor:pointer;color:var(--app-text);border-radius:8px;justify-content:space-between;align-items:center;gap:.75rem;padding:.55rem .6rem;font-size:.82rem;display:flex}.dropdown-option:hover{background:var(--app-hover)}.dropdown-option .dims{color:var(--app-label-dim);font-variant-numeric:tabular-nums;font-size:.72rem}.dropdown-option.is-selected{color:var(--app-accent)}.dropdown-option.is-selected .dims{color:var(--app-accent);opacity:.75}.scrub-group{flex-direction:column;gap:.5rem;display:flex}.scrub{background:var(--app-hover) repeating-linear-gradient(to right, var(--app-border) 0, var(--app-border) 1px, transparent 1px, transparent 12.5%);border:1px solid var(--app-border);cursor:ew-resize;user-select:none;touch-action:none;border-radius:9px;justify-content:space-between;align-items:center;padding:.55rem .75rem;display:flex;position:relative;overflow:hidden}.scrub:hover{border-color:var(--app-label)}.scrub.is-dragging{border-color:var(--app-accent)}.scrub-fill{pointer-events:none;background:#e05a1f;width:0%;position:absolute;top:0;bottom:0;left:0}.scrub-label{z-index:1;color:var(--app-text);font-size:.8rem;position:relative}.scrub-value{z-index:1;font-variant-numeric:tabular-nums;color:var(--app-text);font-size:.8rem;position:relative}.scrub-value input{width:3.2rem;color:var(--app-text);text-align:right;background:0 0;border:none;outline:none;font-family:inherit;font-size:.8rem}.scrub-unit{color:var(--app-label-dim);margin-left:.1rem}.export-control{display:flex;position:relative}.export-btn,.export-caret{background:var(--app-accent);color:var(--app-accent-text);cursor:pointer;border:none;font-family:inherit;transition:opacity .15s}.export-btn{border-radius:9px 0 0 9px;flex:1;padding:.7rem;font-size:.88rem;font-weight:500}.export-caret{border-left:1px solid #0000002e;border-radius:0 9px 9px 0;flex:none;justify-content:center;align-items:center;width:2.4rem;display:flex}.export-btn:hover,.export-caret:hover{opacity:.9}.export-btn:disabled,.export-caret:disabled{opacity:.4;cursor:default}.export-caret svg{width:10px;height:6px;transition:transform .15s}.export-control.is-open .export-caret svg{transform:rotate(180deg)}.export-menu{z-index:20;background:var(--app-overlay);border:1px solid var(--app-border-strong);border-radius:10px;padding:.4rem;position:absolute;bottom:calc(100% + 6px);left:0;right:0;box-shadow:0 16px 40px #00000073}.export-menu[hidden]{display:none}.export-menu-label{text-transform:uppercase;letter-spacing:.06em;color:var(--app-label-dim);padding:.4rem .6rem .3rem;font-size:.68rem}.export-menu-row{gap:.3rem;padding:0 .3rem .4rem;display:flex}.export-menu-option{border:1px solid var(--app-border);color:var(--app-label);cursor:pointer;background:0 0;border-radius:6px;flex:1;padding:.4rem .3rem;font-family:inherit;font-size:.78rem;transition:border-color .15s,color .15s,background .15s}.export-menu-option:hover{color:var(--app-text);border-color:var(--app-label)}.export-menu-option.is-selected{background:var(--app-hover);color:var(--app-text);border-color:var(--app-accent)}#scaleMenuRow .export-menu-option{padding:.5rem .3rem;font-size:.95rem;font-weight:500}.export-hint{color:var(--app-label-dim);text-align:center;margin:.6rem 0 0;font-size:.72rem}.stage{flex:1;justify-content:center;align-items:center;min-width:0;min-height:0;padding:2rem;display:flex;position:relative}.stage canvas{border-radius:6px;outline:none;max-width:100%;max-height:100%;box-shadow:0 30px 80px #00000080}.stage canvas:focus-visible{box-shadow:0 30px 80px #00000080, 0 0 0 2px var(--app-accent)}.stage[hidden]{display:none}.stage-info{background:var(--app-overlay);border:1px solid var(--app-border);color:var(--app-label);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;border-radius:7px;max-width:40vw;padding:.4rem .7rem;font-size:.75rem;overflow:hidden}.stage-info-rest{margin-left:.6rem}.stage-info[hidden]{display:none}.stage-info strong{color:var(--app-text);font-weight:500}.stage-empty{text-align:center;color:var(--app-label);max-width:22rem;font-size:.88rem}.stage-empty strong{color:var(--app-text);margin-bottom:.5rem;font-size:1.1rem;font-weight:500;display:block}