:root{--bg:#0b0b12;--bg-elevated:#141420;--ink:#e4e4ea;--ink-soft:#e4e4ea85;--ink-muted:#e4e4ea52;--glass:#141422b8;--glass-strong:#141422e0;--glass-border:#ffffff14;--glass-border-hover:#ffffff29;--accent:#f59e0b;--accent-glow:#f59e0b2e;--danger:#ef4444;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-pill:999px;--shadow:0 24px 64px #00000080;--transition:.18s cubic-bezier(.4,0,.2,1)}*{box-sizing:border-box}html{background:var(--bg);min-height:100%}body{min-height:100vh;color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:-apple-system,SF Pro Display,Segoe UI,system-ui,sans-serif;font-size:14px;overflow-x:hidden}button,textarea,input{font:inherit}a{color:inherit;text-decoration:none}.studio-shell{min-height:100vh;position:relative}.ambient{filter:blur(100px);pointer-events:none;opacity:.35;border-radius:999px;position:fixed}.ambient-a{background:#f59e0b40;width:600px;height:600px;top:-10vh;left:-180px}.ambient-b{background:#6366f133;width:500px;height:500px;bottom:-5vh;right:-120px}.hero-stage{place-items:center;height:calc(100vh - 60px);padding:8px 12px 0;display:grid}.hero-canvas-shell{gap:12px;width:min(100vw - 24px,177.78vh - 142.224px);max-width:1600px;animation:.5s cubic-bezier(.16,1,.3,1) both rise;display:grid;position:relative}.immersive-canvas{cursor:pointer;border-radius:var(--radius-lg);border:1px solid var(--glass-border);width:100%;height:auto;box-shadow:0 0 0 1px #ffffff0a,0 32px 80px #0009,0 0 120px var(--accent-glow);background:#111;display:block}.footer-bar{z-index:5;border-radius:var(--radius-pill);background:var(--glass-strong);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px);border:1px solid #ffffff25;align-items:center;gap:8px;padding:6px 8px 6px 18px;transition:bottom .4s cubic-bezier(.16,1,.3,1),opacity .4s;animation:.6s cubic-bezier(.16,1,.3,1) .2s both riseFooter;display:flex;position:fixed;bottom:8px;left:50%;transform:translate(-50%)}.footer-bar.footer-hidden{opacity:0;pointer-events:none;bottom:-60px}.kbd-hint{opacity:.5;margin-left:2px;font-family:SF Mono,Menlo,monospace;font-size:.7rem}.kbd-key{color:#ffffff59;font-family:SF Mono,Menlo,monospace;font-size:.82rem;font-weight:400}.kbd-letter{color:#ffffffd9;font-weight:600}.footer-brand{white-space:nowrap;color:var(--ink);letter-spacing:-.01em;transition:color var(--transition);align-items:center;font-size:.82rem;font-weight:600;display:flex}.footer-brand:hover{color:var(--accent)}.footer-dot{background:var(--ink-muted);border-radius:999px;flex-shrink:0;width:3px;height:3px}.footer-status{color:var(--ink-soft);white-space:nowrap;text-overflow:ellipsis;max-width:180px;margin-right:4px;font-size:.78rem;overflow:hidden}.footer-status[data-error=true]{color:var(--danger)}.footer-selectors{white-space:nowrap;align-items:center;gap:4px;margin-right:4px;display:flex}.ss-arrows{color:#ffffffd9;gap:1px;margin-right:3px;font-size:.6rem;display:inline-flex}.footer-sep{color:var(--ink-muted);margin:0 2px;font-size:.75rem}.footer-actions{gap:4px;display:flex}.footer-button{appearance:none;border-radius:var(--radius-pill);color:var(--ink-soft);cursor:pointer;white-space:nowrap;transition:background var(--transition),color var(--transition),border-color var(--transition);background:0 0;border:1px solid #0000;align-items:center;padding:8px 14px;display:flex}.footer-button:hover{color:var(--ink);background:#ffffff0f}.footer-button.is-active{color:var(--accent);background:#f59e0b14;border-color:#f59e0b4d}.footer-button.is-active svg{opacity:1}.footer-button svg{opacity:.72;flex-shrink:0;width:16px;height:16px}.footer-button:hover svg{opacity:1}.footer-button-accent{background:var(--accent);color:#0b0b12;font-weight:600}.footer-button-accent svg{opacity:1}.footer-button-accent:hover{color:#0b0b12;background:#fbbf24}.panel-button,.mode-button,.drawer-close,.generate-button,.randomize-button{appearance:none;border:1px solid var(--glass-border);cursor:pointer;transition:background var(--transition),border-color var(--transition),color var(--transition)}.panel-button:hover,.mode-button:hover,.drawer-close:hover,.randomize-button:hover{border-color:var(--glass-border-hover);background:#ffffff0f}.drawer-layer{z-index:7;position:fixed;inset:0}.drawer-backdrop{-webkit-backdrop-filter:blur(4px);cursor:default;background:#00000080;border:0;animation:.2s both fadeIn;position:absolute;inset:0}.drawer{border-left:1px solid var(--glass-border);-webkit-backdrop-filter:blur(40px);background:#141422ee;grid-template-rows:auto 1fr;width:min(420px,100vw);height:100vh;animation:.28s cubic-bezier(.16,1,.3,1) both slideIn;display:grid;position:absolute;top:0;right:0;box-shadow:-20px 0 60px #0006}.drawer-header{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 20px 16px;display:flex}.drawer-header h2{letter-spacing:-.01em;margin:0 0 4px;font-size:1.05rem;font-weight:600}.drawer-header p{color:var(--ink-soft);margin:0;font-size:.82rem;line-height:1.5}.drawer-close{border-radius:var(--radius-sm);width:36px;height:36px;color:var(--ink-soft);background:0 0;flex-shrink:0;place-items:center;padding:0;display:grid}.drawer-close svg{width:18px;height:18px}.drawer-body{align-content:start;gap:12px;padding:16px 20px 24px;display:grid;overflow:auto}.mode-switch{border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:#ffffff0a;grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid}.mode-button{color:var(--ink-soft);background:0 0;border-color:#0000;border-radius:8px;padding:8px 12px;font-size:.85rem;font-weight:500}.mode-button.is-active{background:var(--accent);color:#0b0b12;border-color:#0000;font-weight:600}.mode-button.is-active:hover{background:var(--accent);border-color:#0000}.drawer-section{border:1px solid var(--glass-border);border-radius:var(--radius-md);background:#ffffff08;gap:10px;padding:14px;display:grid}.toolbar-inline{flex-wrap:wrap;gap:6px;display:flex}.panel-button{border-radius:var(--radius-pill);color:var(--ink-soft);background:0 0;padding:7px 14px;font-size:.82rem}.panel-button.is-active{color:var(--accent);background:#f59e0b14;border-color:#f59e0b4d}.paste-hint{color:var(--ink-muted);font-size:.8rem;line-height:1.4}.preset-list{gap:6px;display:grid}.preset-choice{appearance:none;border-radius:var(--radius-sm);border:1px solid var(--glass-border);text-align:left;cursor:pointer;width:100%;color:var(--ink);transition:background var(--transition),border-color var(--transition);background:0 0;align-items:flex-start;gap:12px;padding:12px;display:flex}.preset-choice:hover{border-color:var(--glass-border-hover);background:#ffffff0a}.preset-choice.is-active{background:#f59e0b0f;border-color:#f59e0b66}.preset-bullet{background:var(--ink-muted);width:10px;height:10px;transition:background var(--transition);border-radius:999px;flex:none;margin-top:4px}.preset-choice.is-active .preset-bullet{background:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.preset-copy{gap:2px;display:grid}.preset-copy strong{font-size:.88rem;font-weight:500;display:block}.preset-copy span{color:var(--ink-soft);font-size:.8rem;line-height:1.4}.drawer-textarea{resize:vertical;border-radius:var(--radius-sm);color:#c4ccd4;background:#0006;border:0;outline:0;width:100%;min-height:220px;padding:14px;font-family:SF Mono,Fira Code,Cascadia Code,Menlo,monospace;font-size:.8rem;line-height:1.6}.drawer-textarea:focus{box-shadow:0 0 0 1px var(--accent)}.drawer-textarea-compact{min-height:140px}.compact-controls{gap:14px}.control{gap:6px;display:grid}.control label{color:var(--ink-soft);justify-content:space-between;align-items:center;gap:16px;font-size:.82rem;font-weight:500;display:flex}.control label span:last-child{color:var(--ink-muted);font-family:SF Mono,Menlo,monospace;font-size:.78rem}.control input[type=range]{width:100%;accent-color:var(--accent)}.control input[type=range]:disabled{opacity:.3}.control-select{width:100%;color:var(--ink-soft);border:1px solid var(--glass-border);border-radius:var(--radius-sm);cursor:pointer;background:#00000059;outline:none;padding:8px 12px;font-family:inherit;font-size:.85rem}.control-select:focus{border-color:var(--accent)}.control-toggle{flex-direction:row;align-items:center}.control-toggle label{flex:1}.control-toggle input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}.toggle-hint{color:var(--ink-muted);font-family:SF Mono,Menlo,monospace;font-size:.78rem}.loading-overlay{pointer-events:none;border-radius:var(--radius);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.loading-spinner{border:2.5px solid #ffffff26;border-top-color:#fff9;border-radius:50%;width:32px;height:32px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.depth-preview-header{gap:2px;display:grid}.depth-preview-header strong{font-size:.85rem;font-weight:500}.depth-preview-header span{color:var(--ink-muted);font-size:.78rem}.drawer-depth-canvas{border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:#111;width:100%;height:auto;display:block}.drawer-footer{background:linear-gradient(180deg,transparent,var(--glass-strong)50%);padding-top:8px;position:sticky;bottom:0}.drawer-footer-row{gap:8px;display:flex}.randomize-button{border-radius:var(--radius-sm);width:44px;color:var(--ink-soft);background:0 0;flex-shrink:0;place-items:center;display:grid}.randomize-button svg{width:20px;height:20px}.randomize-button:hover{color:var(--accent)}.generate-button{border-radius:var(--radius-sm);background:var(--accent);color:#0b0b12;letter-spacing:-.01em;flex:1;padding:12px 18px;font-size:.9rem;font-weight:600}.generate-button:hover{background:#fbbf24}.generate-button-close{color:var(--ink-soft);border-color:var(--glass-border);background:0 0}.generate-button-close:hover{color:var(--ink);background:#ffffff0f}.guide-block{line-height:1.55}.guide-block strong,.guide-label{margin-bottom:4px;font-size:.85rem;font-weight:500;display:block}.guide-block p{color:var(--ink-soft);margin:0;font-size:.82rem}.hotkey-table{border-collapse:collapse;width:100%;font-size:.82rem}.hotkey-table td{color:var(--ink-soft);padding:3px 0}.hotkey-table td:first-child{width:90px;color:var(--ink-muted);font-family:SF Mono,Menlo,monospace;font-size:.78rem}.hotkey-table kbd{background:#ffffff0f;border-radius:3px;padding:1px 5px}.guide-label{color:var(--ink-soft);font-size:.82rem}@keyframes rise{0%{opacity:0;transform:translateY(16px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes riseFooter{0%{opacity:0;transform:translate(-50%)translateY(20px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes sheetIn{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-layer{z-index:20;place-items:center;display:grid;position:fixed;inset:0}.upload-modal{border:1px solid var(--glass-border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(24px);background:#141422ee;width:min(460px,100vw - 32px);animation:.3s cubic-bezier(.16,1,.3,1) both rise;position:relative;box-shadow:0 20px 60px #00000080}.upload-modal-header{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.upload-modal-header h3{font-size:1rem;font-weight:600}.upload-modal-body{color:var(--ink-soft);padding:20px;font-size:.85rem;line-height:1.6}.upload-modal-body ul{margin:8px 0 12px 18px}.upload-modal-body li{margin-bottom:4px}.upload-file-label{background:var(--accent);color:#000;border-radius:var(--radius-sm);cursor:pointer;align-items:center;gap:8px;margin-top:16px;padding:10px 20px;font-size:.85rem;font-weight:600;transition:opacity .15s;display:inline-flex}.upload-file-label:hover{opacity:.85}.upload-file-label input{display:none}.upload-radio-group{gap:8px;margin-bottom:16px;display:flex}.upload-radio{border:1px solid var(--glass-border);border-radius:var(--radius-sm);cursor:pointer;align-items:center;gap:6px;padding:8px 14px;font-size:.85rem;transition:border-color .15s,background .15s;display:flex}.upload-radio:hover{background:#ffffff0d}.upload-radio.is-active{border-color:var(--accent);background:#ffc83214}.upload-radio input{accent-color:var(--accent)}.ss-trigger{width:100%;color:var(--ink-soft);border:1px solid var(--glass-border);border-radius:var(--radius-sm);cursor:pointer;text-align:left;background:#00000059;justify-content:space-between;align-items:center;padding:8px 12px;font-family:inherit;font-size:.85rem;transition:border-color .15s;display:flex}.ss-trigger:hover,.ss-trigger:focus{border-color:var(--accent);outline:none}.ss-trigger.ss-mini{border-radius:var(--radius-sm);background:#ffffff0a;border:1px solid #ffffff26;gap:4px;padding:4px 10px;font-size:.8rem}.ss-trigger.ss-mini:hover{background:#ffffff14;border-color:#ffffff4d}.ss-trigger.ss-inline{border-radius:var(--radius-sm);white-space:nowrap;background:0 0;border:1px solid #0000;gap:4px;padding:4px 6px;font-size:.8rem}.ss-trigger.ss-inline:hover{background:#ffffff0f;border-color:#ffffff26}.ss-trigger.ss-inline .ss-trigger-label,.ss-trigger.ss-mini .ss-trigger-label{text-decoration:none}.ss-trigger-arrow{opacity:.5;margin-left:8px;font-size:.7rem}.ss-container{width:100%;position:relative}.ss-container.ss-mini,.ss-container.ss-inline{width:auto}.ss-container.ss-mini .ss-input,.ss-container.ss-inline .ss-input{min-width:180px;padding:5px 10px;font-size:.8rem}.ss-container.ss-mini .ss-dropdown,.ss-container.ss-inline .ss-dropdown{border-radius:var(--radius-sm)var(--radius-sm)0 0;border:1px solid var(--glass-border);border-bottom:none;min-width:220px;top:auto;bottom:100%}.ss-container.ss-mini .ss-input,.ss-container.ss-inline .ss-input{border-radius:0 0 var(--radius-sm)var(--radius-sm);border-top:1px solid var(--glass-border)}.ss-input{width:100%;color:var(--ink);border:1px solid var(--accent);border-radius:var(--radius-sm)var(--radius-sm)0 0;background:#00000080;outline:none;padding:8px 12px;font-family:inherit;font-size:.85rem}.ss-input::placeholder{color:var(--ink-muted)}.ss-dropdown{z-index:30;border:1px solid var(--glass-border);border-radius:0 0 var(--radius-sm)var(--radius-sm);-webkit-backdrop-filter:blur(20px);background:#141422f0;border-top:none;max-height:240px;position:absolute;top:100%;left:0;right:0;overflow-y:auto}.ss-option{color:var(--ink-soft);cursor:pointer;justify-content:space-between;align-items:center;padding:7px 12px;font-size:.83rem;transition:background 80ms;display:flex}.ss-option.ss-highlighted{color:var(--ink);background:#ffffff14}.ss-option.ss-selected{color:var(--accent)}.ss-option.ss-upload{color:var(--ink-muted);border-top:1px solid var(--glass-border);font-style:italic}.ss-option-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.ss-delete{appearance:none;color:#e5534b;cursor:pointer;opacity:.6;background:0 0;border:none;margin-left:8px;padding:0 2px;font-size:1.1rem;line-height:1;transition:opacity .1s}.ss-delete:hover{opacity:1}.ss-empty{color:var(--ink-muted);text-align:center;padding:12px;font-size:.83rem}.fullscreen-button{z-index:4;border-radius:var(--radius-sm);color:#fff6;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;place-items:center;width:36px;height:36px;transition:color .15s,background .15s,top .4s cubic-bezier(.16,1,.3,1),opacity .4s;display:grid;position:fixed;top:12px;right:12px}.fullscreen-button:hover{color:#fffc;background:#ffffff26}.fullscreen-button.fs-hidden{opacity:0;pointer-events:none;top:-48px}html.cursor-hidden,html.cursor-hidden *{cursor:none!important}.fullscreen-button svg{width:18px;height:18px}@media (max-width:920px){.hero-stage{padding:16px 16px 0}.hero-canvas-shell{width:min(100%,166.67vh - 200.004px)}}@media (max-width:760px){.drawer{border-left:0;border-top:1px solid var(--glass-border);border-radius:var(--radius-lg)var(--radius-lg)0 0;width:100%;height:min(80vh,720px);animation-name:sheetIn;inset:auto 0 0}.drawer-header{padding:16px 16px 14px}.drawer-body{padding:12px 16px 22px}.footer-bar{border-radius:var(--radius-md);padding:8px 12px;animation-name:rise;left:12px;right:12px;transform:none}.footer-brand{margin-right:4px}.footer-status{display:none}}@media (max-width:560px){.hero-stage{height:calc(100vh - 120px);padding:16px 12px 0}.hero-canvas-shell{width:100%}.footer-bar{flex-direction:column;align-items:stretch;gap:6px}.footer-brand{justify-content:center;font-size:.78rem}.footer-dot{display:none}.footer-actions{grid-template-columns:1fr 1fr 1fr;gap:4px;display:grid}.footer-button{justify-content:center;padding:10px 8px;font-size:.82rem}}
