:root{--paper: #F7F5F0;--paper-edge: #EBE7DE;--surface: #FFFFFF;--surface-glass: rgba(255, 255, 255, .68);--ink: #1C1A17;--ink-soft: #4A4742;--ink-mute: #8A877F;--ink-hairline: rgba(28, 26, 23, .08);--indigo: #1F3D6E;--indigo-soft: #4A6A99;--vermilion: #C8463C;--focus-ring: #1F3D6E;--shadow-low: 0 1px 2px rgba(28, 26, 23, .04), 0 1px 3px rgba(28, 26, 23, .06);--shadow-mid: 0 4px 12px rgba(28, 26, 23, .06), 0 2px 4px rgba(28, 26, 23, .04);--font-display: "Zen Kaku Gothic Antique", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{position:relative;width:100vw;height:100vh;overflow:hidden}.topbar{position:fixed;top:0;left:0;right:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:10}.topbar-controls{display:flex;align-items:center;gap:16px}.status{font-family:var(--font-body);font-size:12px;line-height:1.4;letter-spacing:.01em;color:var(--ink-mute)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.select-field{position:relative;display:inline-flex;align-items:center}.select-field:after{content:"";position:absolute;right:10px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);transform:translateY(-70%) rotate(45deg);pointer-events:none}.select-quiet{appearance:none;-webkit-appearance:none;background:transparent;color:var(--ink-soft);border:1px solid var(--ink-hairline);height:32px;padding:0 26px 0 12px;border-radius:4px;font:500 13px/1 var(--font-body);letter-spacing:.01em;cursor:pointer}.select-quiet:hover{border-color:var(--indigo-soft);color:var(--indigo)}.select-quiet:focus-visible{border-color:var(--indigo);color:var(--indigo);outline:2px solid var(--focus-ring);outline-offset:2px}.glass{background:var(--surface-glass);backdrop-filter:blur(16px) saturate(1.05);-webkit-backdrop-filter:blur(16px) saturate(1.05);border-bottom:1px solid var(--ink-hairline);box-shadow:var(--shadow-low)}.wordmark{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--font-display);font-weight:500}.wordmark-text{font-size:20px;line-height:1;letter-spacing:-.01em;color:var(--ink)}.wordmark-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--vermilion);align-self:flex-end;margin-bottom:2px}#stage,#stage2{position:absolute;top:0;bottom:0;display:block;height:100%}#stage{left:0;right:0;width:100%}#stage2{display:none;left:50%;right:0;width:50%;border-left:1px solid var(--ink-hairline)}.mode-compare #stage{right:50%;width:50%}.mode-compare #stage2{display:block}.pane-label{position:absolute;top:72px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-mute);padding:4px 8px;background:var(--surface-glass);border:1px solid var(--ink-hairline);border-radius:4px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:8;pointer-events:none}#pane-label-left{left:296px}.pane-controls{position:absolute;top:72px;left:calc(50% + 16px);display:flex;align-items:center;gap:8px;z-index:8}#pane-label-right{position:static}.mode-compare #pane-label-left,.mode-compare #pane-controls-right{display:flex}#pane-label-left[hidden],#pane-controls-right[hidden]{display:none}.sync-toggle{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--font-body);letter-spacing:.01em;color:var(--ink-soft);cursor:pointer}.sync-toggle input{accent-color:var(--indigo)}.compare-controls[hidden]{display:none}.gallery-rail,.inspect-panel{transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .24s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity}.gallery-collapsed .gallery-rail{transform:translate(-100%);opacity:0;pointer-events:none}.inspect-collapsed .inspect-panel{transform:translate(100%);opacity:0;pointer-events:none}.rail-toggle{position:fixed;top:50%;transform:translateY(-50%);width:24px;height:56px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:var(--surface-glass);backdrop-filter:blur(16px) saturate(1.05);-webkit-backdrop-filter:blur(16px) saturate(1.05);border:1px solid var(--ink-hairline);color:var(--ink-soft);cursor:pointer;z-index:11;box-shadow:var(--shadow-low);transition:left .24s cubic-bezier(.2,.8,.2,1),right .24s cubic-bezier(.2,.8,.2,1),color .16s ease-out,border-color .16s ease-out}.rail-toggle:hover{color:var(--indigo);border-color:var(--indigo-soft)}.rail-toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.rail-toggle svg{transition:transform .24s cubic-bezier(.2,.8,.2,1)}.rail-toggle-left{left:280px;border-radius:0 4px 4px 0;border-left:none}.rail-toggle-right{right:320px;border-radius:4px 0 0 4px;border-right:none}.gallery-collapsed .rail-toggle-left{left:0}.gallery-collapsed .rail-toggle-left svg{transform:rotate(180deg)}.inspect-collapsed .rail-toggle-right{right:0}.inspect-collapsed .rail-toggle-right svg{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.gallery-rail,.inspect-panel,.rail-toggle,.rail-toggle svg{transition-duration:1ms!important}}.gallery-rail{position:fixed;top:56px;left:0;bottom:40px;width:280px;padding:24px 16px 16px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--ink-hairline);z-index:9;overflow:hidden}.gallery-rail .panel-heading,.gallery-rail .panel-divider{padding-left:8px}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,96px);gap:12px;padding:4px 8px 16px;overflow-y:auto;flex:1;align-content:start;justify-content:start}.gallery-card{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:96px;padding:0;background:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;transition:transform .16s ease-out,box-shadow .16s ease-out,border-color .16s ease-out}.gallery-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-low)}.gallery-card.is-active{border-color:var(--indigo)}.gallery-thumb{width:96px;height:96px;border-radius:4px;background:var(--paper-edge);object-fit:cover;display:block}.gallery-stem{font-family:var(--font-mono);font-size:11px;line-height:1.4;color:var(--ink-mute);text-align:left;word-break:break-all}.inspect-panel{position:fixed;top:56px;right:0;bottom:40px;width:320px;padding:24px;display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--ink-hairline);z-index:9}.panel-heading{font-family:var(--font-display);font-weight:500;font-size:14px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0}.panel-divider{height:1px;background:var(--ink-hairline);margin:4px 0 8px}.inspect-buttons{display:flex;flex-direction:column;gap:8px}.btn-quiet{background:transparent;color:var(--ink-soft);border:1px solid var(--ink-hairline);height:32px;padding:0 12px;border-radius:4px;font:500 13px/1 var(--font-body);letter-spacing:.01em;cursor:pointer;text-align:left;transition:border-color .16s ease-out,color .16s ease-out}.btn-quiet:hover:not(:disabled){border-color:var(--indigo-soft);color:var(--indigo)}.btn-quiet.is-active{border-color:var(--indigo);color:var(--indigo)}.btn-quiet:disabled{opacity:.5;cursor:not-allowed}.display-gui{margin-top:4px}.display-gui .lil-gui{--background-color: transparent;--text-color: var(--ink);--title-background-color: transparent;--title-text-color: var(--ink);--widget-color: var(--paper-edge);--hover-color: var(--indigo-soft);--focus-color: var(--indigo);--number-color: var(--indigo);--string-color: var(--ink-soft);--font-size: 12px;--font-family: var(--font-body);--font-family-mono: var(--font-mono);--padding: 8px;--spacing: 6px;--slider-knob-width: 2px;--slider-input-width: 25%;--color-input-width: 25%;--slider-input-min-width: 45px;--color-input-min-width: 45px;--folder-indent: 8px;--widget-padding: 0 4px;--widget-border-radius: 2px;--checkbox-size: 14px;--scrollbar-width: 4px;width:100%}.bottom-bar{position:fixed;left:0;right:0;bottom:0;height:40px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface-glass);backdrop-filter:blur(16px) saturate(1.05);-webkit-backdrop-filter:blur(16px) saturate(1.05);border-top:1px solid var(--ink-hairline);z-index:9}.metadata-pills{display:flex;align-items:center;gap:8px}.pill{display:inline-flex;align-items:baseline;gap:8px;padding:6px 10px;border:1px solid var(--ink-hairline);border-radius:4px;background:transparent}.pill[hidden]{display:none}.pill-label{font:400 12px/1.4 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}.pill-value{font:400 13px/1.4 var(--font-mono);color:var(--ink)}.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);border:none;height:32px;padding:0 14px;border-radius:4px;font:500 13px/1 var(--font-body);letter-spacing:.01em;cursor:pointer;transition:background-color .16s ease-out,transform 80ms ease-out}.btn-primary:hover:not(:disabled){background:#2a2723}.btn-primary:active:not(:disabled){background:var(--ink);transform:scale(.98)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 1023px){.gallery-rail{position:fixed;inset:56px 0 auto;width:auto;height:132px;padding:8px 12px;border-right:none;border-bottom:1px solid var(--ink-hairline)}.gallery-rail .panel-heading,.gallery-rail .panel-divider{display:none}.gallery-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:96px;overflow-x:auto;overflow-y:hidden;padding:4px}.inspect-panel{inset:auto 0 0;width:auto;height:auto;padding:12px 16px;border-left:none;border-top:1px solid var(--ink-hairline)}.inspect-panel .panel-heading,.inspect-panel .panel-divider{display:none}.inspect-buttons{flex-direction:row;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}.btn-quiet{flex:0 0 auto}}:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}@media (prefers-reduced-motion: reduce){*{animation-duration:1ms!important;transition-duration:1ms!important}}