/* Shared colors and proportions from the Second World director desk. */
.surface-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}.surface-mode{display:flex;align-items:center;gap:12px;padding:14px 16px;text-align:left;border:1px solid #292d30;background:#121416;color:#90969a}.surface-mode:hover{border-color:#59624e}.surface-mode.active{background:#1b2116;border-color:#8ead43;color:#c7f64b}.surface-mode svg{width:32px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3}.surface-mode span{display:grid;gap:5px}.surface-mode strong{font-size:13px;font-weight:500}.surface-mode small{font-size:11px;color:#90969a;line-height:1.5}@media(max-width:500px){.surface-modes{gap:7px}.surface-mode{gap:8px;padding:12px 9px}.surface-mode svg{width:23px}.surface-mode strong{font-size:12px}.surface-mode small{font-size:10px}}
.range-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:14px}.range-actions .lock-range-button{width:auto;flex:1 1 280px;margin-top:0}.range-actions>.text-button{flex:0 0 auto}.range-actions button:disabled{opacity:.4;cursor:default}@media(max-width:500px){.range-actions .lock-range-button{flex-basis:100%}.lock-range-button small{font-size:10px}}
.lock-range-button{display:flex;align-items:center;gap:9px;margin-top:14px;background:#121416;border:1px solid #292d30;padding:11px 14px;width:100%;text-align:left;font-size:12px;color:#bec3c4}.lock-range-button .icon{width:16px;height:16px}.lock-range-button small{margin-left:auto;font-size:11px;color:#90969a}.lock-range-button[aria-pressed=true]{border-color:#8ead43;background:#1b2116;color:#c7f64b}.range-locked-badge{position:absolute;right:20px;top:60px;font-size:11px;padding:7px 10px;background:#20251a;color:#c7f64b;border:1px solid #434d32;border-radius:3px}.stage.range-locked{cursor:default}
:root{--page:#090a0b;--paper:#121416;--ink:#f1f1ed;--muted:#90969a;--line:#292d30;--blue:#c7f64b;--pale:#1b2116;--stage:#090a0b;--mono:Consolas,"SFMono-Regular",monospace;--display:Georgia,"Songti SC",SimSun,serif;color-scheme:dark;font-family:Inter,"SF Pro Text","PingFang SC","Microsoft YaHei",system-ui,sans-serif}
body{min-width:320px;background-color:var(--page);background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:42px 42px}::selection{color:#11150a;background:var(--blue)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--blue)}button{color:inherit;border-radius:3px}.app-header{height:76px;padding:0 3.5vw;background:#0c0e0f}.brand{font-size:21px;font-weight:600;letter-spacing:.08em}.brand-mark{position:relative;overflow:hidden;width:36px;height:36px;border:1px solid var(--ink);background:transparent;border-radius:0}.brand-mark:after{content:"";position:absolute;right:-8px;bottom:-8px;width:19px;height:19px;background:var(--blue);transform:rotate(45deg)}.brand-mark svg{width:25px;height:25px;stroke:var(--ink);stroke-width:1.6}.brand-english{font:italic 20px var(--display);color:var(--blue);letter-spacing:.01em;margin-left:12px}.header-note{font-size:12px;text-decoration:none}.header-note:hover{color:var(--blue)}.privacy{color:var(--muted);font-size:12px}.privacy-symbol{font-size:17px}
.workspace{max-width:1560px;padding:30px 3.5vw 24px;grid-template-columns:minmax(0,1fr) 310px;gap:24px}.playground{min-width:0}.section-heading{gap:16px;margin-bottom:24px}.eyebrow{font:10px var(--mono);letter-spacing:.16em;color:var(--blue)}h1{font:400 clamp(26px,2.7vw,40px)/1.5 var(--display);letter-spacing:.045em;margin-top:8px}.experiment-tag{font:10px var(--mono);padding:8px 0;border:0;border-radius:0;white-space:nowrap;color:var(--muted)}.stage-shell{border:1px solid #373d40;border-radius:3px;box-shadow:none;padding:8px}.stage-topbar{padding:0 4px 9px;background:var(--stage)}.source-tab{border:1px solid transparent;border-radius:3px;font-size:12px;color:var(--muted);padding:9px 13px}.source-tab.active{color:var(--blue);background:#1b2116;border-color:#434d32}.source-tab:not(.active):hover{background:#171a1c;color:var(--ink)}.source-status{font-size:11px;color:var(--muted)}.stage{border:1px solid var(--line)}.stage:before,.stage:after{content:"";position:absolute;z-index:2;width:16px;height:16px;pointer-events:none}.stage:before{top:11px;left:11px;border-left:1px solid var(--blue);border-top:1px solid var(--blue)}.stage:after{bottom:11px;right:11px;border-right:1px solid var(--blue);border-bottom:1px solid var(--blue)}.stage-label{top:23px;left:23px;font:10px var(--mono);color:var(--ink);background:#090a0baa;border-color:#ffffff30;border-radius:2px;backdrop-filter:none}.status-dot{background:var(--blue);border-radius:0}.status-dot.demo{background:#90969a}.stage-hint{color:var(--ink);background:#090a0bbf;border-color:#ffffff25;border-radius:3px;backdrop-filter:none}.stage-fullscreen{bottom:18px;right:18px;background:#090a0bbf;color:var(--ink)}.icon-button{width:34px;height:34px;border:1px solid #ffffff30;border-radius:3px}.icon-button:hover{background:#171a1c;color:var(--blue)}.stage-bottom{padding:12px 4px 3px;background:var(--stage);color:var(--muted);font-size:11px}.tracking-status .icon{color:var(--blue);width:15px;height:15px}.stage-metrics{font:10px var(--mono)}.stage-error{background:#090a0bf0;color:var(--ink)}.stage-error span{color:var(--muted)}.paused-badge{background:#20251a;color:var(--blue);border:1px solid #434d32;border-radius:3px}
.play-controls{margin-top:14px}.control-mode{background:#0e1011;padding:3px;border:1px solid var(--line);border-radius:3px}.control-mode button{border-radius:3px;padding:9px 10px;color:var(--muted);font-size:12px}.control-mode button.active{background:#171a1c;color:var(--blue);box-shadow:none}.action-buttons{gap:12px}.text-button{color:var(--muted);font-size:12px;padding:10px 4px}.capture-button{color:#11150a;background:var(--blue);border-radius:3px;padding:11px 14px;font-size:12px;font-weight:600;box-shadow:none}.capture-button:hover{background:#d5ff6a}.gesture-guide{margin-top:25px;padding:18px 0;border-top:1px solid var(--line)}.guide-icon{width:38px;height:38px;background:var(--paper);color:var(--blue);border:1px solid var(--line);border-radius:3px}.gesture-guide strong{font-weight:500}.guide-key{font:10px var(--mono);color:var(--muted)}
.settings{background:var(--paper);border-color:var(--line);border-radius:3px;padding:21px 19px;margin-top:0;box-shadow:none}.settings-heading h2{font-size:15px;font-weight:500}.settings-heading .icon{color:var(--blue)}.effect-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.effect-card{padding:10px 7px;border-color:var(--line);background:#0e1011;border-radius:3px;gap:10px}.effect-card:hover{background:#171a1c;border-color:#59624e}.effect-card.selected{background:var(--pale);border-color:#8ead43;box-shadow:none}.effect-preview{width:33px;height:33px;border-radius:2px}.effect-copy strong{font-size:11px;font-weight:500;white-space:nowrap}.effect-key{right:6px;top:10px;width:auto;height:auto;font:9px var(--mono);color:var(--muted);background:transparent}.selected .effect-key{background:transparent;color:var(--blue)}.settings-divider{background:var(--line)}.slider-group{margin-bottom:19px}.slider-group label{font-size:12px;color:#bec3c4;margin-bottom:10px}.slider-group output{font:11px var(--mono)}input[type=range]{height:3px;border-radius:0;background:linear-gradient(to right,var(--blue) 0%,var(--blue) var(--fill,70%),var(--line) var(--fill,70%),var(--line) 100%)}input[type=range]::-webkit-slider-thumb{width:12px;height:15px;border-radius:2px;border:2px solid var(--paper);box-shadow:0 0 0 1px #6c793d}input[type=range]::-moz-range-thumb{width:8px;height:11px;border-radius:2px;border:2px solid var(--paper);box-shadow:none}.range-captions{font:10px var(--mono);color:var(--muted)}.switch-row{margin:16px 0;font-size:12px;color:#bec3c4}.switch-row input,.switch-track{width:32px;height:18px}.switch-track{border:1px solid #41484c;border-radius:3px;background:#090a0b}.switch-track:after{width:10px;height:10px;border-radius:1px;background:#90969a;box-shadow:none}.switch-row input:checked+.switch-track{background:#222a19;border-color:#647e31}.switch-row input:checked+.switch-track:after{background:var(--blue)}.switch-row input:focus-visible+.switch-track{outline-color:var(--blue)}.effect-note{margin-top:20px;border-color:var(--line);color:var(--muted)}.note-mark{border-color:#687173}.stop-camera{background:#171a1c;border:1px solid var(--line);color:#ff987d;border-radius:3px}.stop-camera:hover{background:#171a1c;border-color:#815447}.face-tab{background:#0e1011;border-color:var(--line);color:var(--muted);border-radius:3px}.face-tab.active{background:var(--pale);border-color:#8ead43;box-shadow:none}.face-tab:hover{border-color:#59624e}.face-help{font-size:11px;color:var(--muted)}.face-edge{--face-color:#b1bcc1}.face-halftone{--face-color:#ff6c6c}.face-duotone{--face-color:#498cb8}.face-grain{--face-color:#d6be4d}.app-footer{max-width:1560px;padding:14px 3.5vw 22px;font:10px var(--mono);color:var(--muted)}.footer-dot{color:#526039}.toast{background:#171a1c;color:var(--ink);border:1px solid #495240;border-radius:3px;box-shadow:none}
@media(max-width:1120px){.workspace{gap:18px;grid-template-columns:minmax(0,1fr) 290px;padding-inline:24px}.experiment-tag{display:none}}
@media(max-width:780px){.app-header{height:68px;padding:0 20px;gap:16px}.privacy{font-size:10px}.brand{font-size:18px}.brand-english{font-size:18px}.workspace{padding:24px 20px;gap:24px}.section-heading{margin-bottom:18px}h1{font-size:28px}.settings{padding:22px}.effect-card{padding:12px;gap:10px}.effect-copy strong{font-size:13px}.effect-preview{width:42px;height:42px}.effect-key{right:11px;top:12px}.effect-note p,.face-help{font-size:12px}.app-footer{padding:0 20px 24px;flex-wrap:wrap;line-height:1.8}}
@media(max-width:400px){.workspace{padding:20px 12px}.app-header{padding:0 14px;gap:8px}.capture-button{padding:11px 12px}.stage-label{top:20px;left:20px;font-size:9px}.stage-hint{max-width:80%}.settings{padding:20px}.effect-card{padding:10px}.effect-copy strong{font-size:12px}.app-footer{padding:0 12px 20px}}