@font-face{font-family:Inter;src:url('assets/Inter.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;font-family:Inter,sans-serif;color:#eef0f3;background:#050608;font-size:14px}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{position:fixed;inset:0;width:100%;height:100%;display:block}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0}button:focus-visible,input:focus-visible{outline:2px solid #a8f0de;outline-offset:4px}[hidden]{display:none!important}#panel{position:fixed;top:32px;left:32px;width:296px;padding:20px;display:flex;flex-direction:column;gap:16px;border-radius:16px;background:rgb(14 16 20 / 78%);box-shadow:inset 0 0 0 1px #ffffff14;backdrop-filter:blur(24px);max-height:calc(100dvh - 64px);overflow:auto;transition:opacity 200ms}#panel.is-hidden{opacity:0;pointer-events:none}.sources{border:1px solid transparent;display:flex;align-self:flex-start;padding:4px;background:rgb(26 29 35 / 90%);border-radius:8px}.sources button{padding:4px 16px;line-height:20px;background:transparent;border-radius:4px}.sources button[aria-pressed=true]{background:#ffffff24}.sources button[aria-pressed=false]{color:#a3a9b2}.actions{display:flex;gap:8px}.actions button{background:rgb(26 29 35 / 90%);border-radius:8px;padding:8px 12px;font-size:12px;line-height:16px;white-space:nowrap}small,.secondary,output{color:#a3a9b2;font-size:12px;line-height:16px}small{margin-left:4px}.section-label{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.02em;color:#a3a9b2}.sliders{display:flex;flex-direction:column;gap:16px}.control{display:flex;flex-direction:column;gap:8px;height:32px}.label-row{display:flex;align-items:center;gap:8px;line-height:20px}.label-row output{margin-left:auto;font-variant-numeric:tabular-nums}.range-wrap{position:relative;height:4px;display:flex;align-items:center}input[type=range]{appearance:none;width:100%;height:4px;margin:0;border-radius:2px;background:linear-gradient(to right,#a8f0de var(--fill),#ffffff24 var(--fill));cursor:pointer;position:relative;z-index:1}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#eef0f3}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#eef0f3}.ticks{position:absolute;inset:-2px 0;display:flex;justify-content:space-between;pointer-events:none;z-index:2}.ticks i{height:8px;width:1px;background:#a3a9b266}.freeze-row{display:flex;align-items:center;gap:8px;height:20px;cursor:pointer}.freeze-row small{margin:0}.freeze-row input{position:absolute;opacity:0}.switch{width:28px;height:16px;border-radius:8px;background:#ffffff24;position:relative}.switch:before{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#a3a9b2}.freeze-row input:checked+.switch{background:#a8f0de}.freeze-row input:checked+.switch:before{left:14px;background:#0e1014}.freeze-row input:focus-visible+.switch{outline:2px solid #a8f0de;outline-offset:4px}.divider{height:1px;min-height:1px;background:#ffffff1a}#sound-toggle{display:flex;width:100%;height:16px;align-items:center;justify-content:space-between;padding:0;background:none;font-size:12px;line-height:16px;color:#a3a9b2}.sound-summary{display:flex;gap:8px;align-items:center}#sound-sliders{margin-top:16px}#sound:has([aria-expanded=true]) .sound-summary .meter{display:none}.meter{display:inline-flex;flex:none;width:14px;gap:2px;height:12px;align-items:flex-end}.meter i{display:block;flex:0 0 2px;width:2px;height:2px;background:#a8f0deb3}#presets{display:flex;flex-wrap:wrap;gap:8px}#presets button{padding:4px 12px;border-radius:12px;border:1px solid #ffffff33;background:transparent;color:#a3a9b2;font-size:12px;line-height:16px;height:26px}#presets button.active{border-color:#a8f0decc;color:#eef0f3}#pill{position:fixed;top:32px;right:32px;display:flex;align-items:center;gap:12px;padding:8px 16px;border-radius:20px;background:rgb(14 16 20 / 78%);box-shadow:inset 0 0 0 1px #ffffff14;backdrop-filter:blur(24px);font-size:12px;line-height:16px;animation:appear 200ms}#pill i{width:8px;height:8px;border-radius:50%;background:#a8f0de}#status{font-size:12px;color:#a3a9b2;overflow-wrap:anywhere}body.drag #panel{outline:1px solid #a8f0de}@keyframes appear{from{opacity:0}to{opacity:1}}

.colour-row{flex-direction:row;align-items:center;justify-content:space-between;line-height:20px;cursor:pointer}
.colour-value{position:relative;display:flex;align-items:center;gap:8px;height:32px;padding:4px 8px;border-radius:8px;background:rgb(26 29 35 / 90%)}
.colour-swatch{width:16px;height:16px;border-radius:4px;background:var(--base-colour);box-shadow:inset 0 0 0 1px #ffffff33}
.colour-value output{font-variant-numeric:tabular-nums}
.colour-value input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.colour-value:focus-within{outline:2px solid #a8f0de;outline-offset:4px}
@font-face{font-family:'JetBrains Mono';src:url('assets/JetBrainsMono.ttf') format('truetype');font-weight:100 800;font-display:swap}
#panel{inset:0;width:auto;padding:0;display:block;background:none;box-shadow:none;backdrop-filter:none;max-height:none;overflow:visible;pointer-events:none}#panel>*{pointer-events:auto}.glass{background:rgb(14 16 20 / 78%);border:1px solid #ffffff14;backdrop-filter:blur(24px);border-radius:16px}.card{padding:20px}.card header,.card-toggle{font-size:12px;line-height:16px;color:#a3a9b2;font-weight:400;display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:16px}.card header span,.card-toggle span{font-size:12px;text-transform:none}.topbar{position:absolute;top:24px;left:50%;transform:translateX(-50%);padding:8px;display:flex;gap:8px;border-radius:12px;align-items:center}.topbar button{padding:8px 12px;white-space:nowrap;background:#1a1de3;border-radius:8px;font-size:12px;line-height:16px}.topbar button{background:rgb(26 29 35 / 90%)}.topbar .sources{padding:4px}.topbar .sources button{padding:4px 10px}.topbar .accent{color:#a8f0de;border:1px solid #a8f0de80;background:#a8f0de14}.left-stack{position:absolute;top:24px;left:24px;width:280px;display:flex;flex-direction:column;gap:16px;max-height:calc(100dvh - 48px);overflow:auto;scrollbar-width:thin}.layer{display:flex;align-items:center;gap:12px;padding:10px 12px;min-height:36px;width:100%;background:none;border-radius:8px;text-align:left;line-height:16px}.layer.selected{background:#ffffff24}.layer i{width:8px;height:8px;flex:none;border-radius:50%}.layer span{margin-left:auto;color:#a3a9b2;font-size:12px}.add-menu summary{font-size:12px;line-height:16px;margin-top:8px;color:#a3a9b2;cursor:pointer;list-style:none}.add-menu summary span{margin-left:4px}#add-options{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}#add-options button,#mutation-actions button{background:#1a1d23;border-radius:8px;padding:6px 8px;font-size:12px}.performance summary{cursor:pointer;font-size:12px;line-height:16px;color:#a3a9b2}.performance[open]{display:flex;flex-direction:column;gap:16px}.performance[open] summary{margin-bottom:16px}.performance .section-label{margin-bottom:12px}.performance .freeze-row,.performance .divider,#presets{margin-top:16px}.performance .divider{margin-bottom:16px}.performance .sliders{gap:16px}#routing-card{position:absolute;right:24px;top:24px;width:372px}.card-toggle{padding:0;background:none;cursor:pointer}.card-toggle[aria-expanded=false]{margin:0}.card-toggle[aria-expanded=false] span:after{content:' +'}#routing-grid{display:grid;grid-template-columns:76px repeat(4,1fr);align-items:center;row-gap:4px;font-size:12px;line-height:16px}.route-heading{text-align:center;color:#a3a9b2;font-size:11px}.route{height:30px;background:none;display:grid;place-items:center;border-radius:8px}.route:hover{background:#ffffff0a}.route i{border-radius:50%;background:#a8f0de;border:1px solid #a8f0de}.route.off i{background:none;border-color:#a3a9b255;width:6px!important;height:6px!important;opacity:1!important}#code-card{position:absolute;width:720px;bottom:24px;left:50%;transform:translateX(-50%);padding:16px}#code-card .card-toggle{margin-bottom:8px}#code-card .card-toggle[aria-expanded=false]{margin:0}#code-change{color:#a8f0de}#code-lines{max-height:224px;overflow:auto;scrollbar-width:thin;font:12px/20px 'JetBrains Mono',monospace}.code-line{padding:4px 12px;border-left:2px solid transparent;border-radius:4px;white-space:pre;width:max-content;min-width:100%;height:28px}.code-line.changed{background:#a8f0de1a;border-left-color:#a8f0de}.code-line mark{color:#a8f0de;background:none}#mutation-actions{display:flex;gap:8px;margin-top:8px}#status{position:absolute;bottom:8px;left:24px;max-width:260px;font-size:11px;pointer-events:none}.is-hidden{visibility:hidden}#pill{top:24px;right:24px}
@media(max-width:1439px){.topbar{top:16px}.topbar>button span{display:none}.left-stack{top:16px;left:16px;max-height:calc(100dvh - 32px)}#routing-card{top:16px;right:16px}#code-card{bottom:16px;right:16px;left:auto;transform:none;width:min(720px,calc(100vw - 328px))}}
@media(max-width:1000px){.topbar{left:312px;transform:none}#routing-card{top:80px;width:320px}#code-card{width:calc(100vw - 328px)}}
/* Editable chain rows retain native textarea selection, IME and horizontal caret scrolling. */
#code-card{padding:16px}#code-toggle{justify-content:flex-start;gap:12px;padding-right:205px;min-height:20px}#code-change{color:#a3a9b2;background:#1a1d23e6;padding:2px 12px;border-radius:20px;white-space:nowrap;font-size:11px}#code-change:before{content:'';display:inline-block;width:6px;height:6px;background:#a8f0de;border-radius:50%;margin-right:8px}#code-meta{position:absolute;right:16px;top:20px;font-size:11px;line-height:16px;color:#a8f0de;pointer-events:none}#code-lines{max-height:224px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a3a9b260 transparent}#code-lines::-webkit-scrollbar{width:4px}.code-line{display:flex;align-items:center;width:100%;min-width:0;height:28px;padding:4px 12px;border:0;gap:4px}.code-row:focus-within .code-line{background:#a8f0de14}.code-gutter{position:relative;flex:0 0 24px;text-align:center;color:#a3a9b2;font:12px/20px 'JetBrains Mono',monospace}.code-row.dirty .code-gutter:before,.code-row.error .code-gutter:before{content:'';position:absolute;left:-4px;top:8px;border-radius:50%;width:4px;height:4px;background:#a8f0de}.code-input-wrap{position:relative;flex:1;min-width:0;height:20px;overflow:hidden;mask-image:linear-gradient(to right,#000 calc(100% - 12px),transparent)}.code-ink{position:absolute;left:0;top:0;margin:0;white-space:pre;pointer-events:none;font:inherit;line-height:20px}.code-ink mark{color:#a8f0de;background:none}.code-input-wrap textarea{position:absolute;inset:0;resize:none;display:block;box-sizing:border-box;width:100%;height:20px;margin:0;padding:0;border:0;border-radius:0;outline:none;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:#a8f0de;font:12px/20px 'JetBrains Mono',monospace;white-space:pre;overflow:auto;scrollbar-width:none}.code-input-wrap textarea::-webkit-scrollbar{display:none}.code-input-wrap textarea::selection{background:#a8f0de40}.code-row.error .code-line{background:#ff8a8014}.code-row.error .code-gutter:before,#code-change.error:before{background:#ff8a80}#code-change.error,.code-error-message{color:#ff8a80}.bad-token{text-decoration:underline wavy #ff8a80 2px;text-underline-offset:3px}.code-error-message{padding:4px 12px 4px 40px;font:12px/20px Inter,sans-serif}#code-fallback{position:absolute;top:88px;left:50%;transform:translateX(-50%);padding:6px 12px;font-size:11px;color:#a3a9b2;border-radius:24px}#code-fallback:before{content:'●';color:#ff8a80;margin-right:8px}#code-overflow{font-size:11px;color:#a3a9b2;margin-top:8px}#code-completions{position:fixed;z-index:20;width:272px;padding:4px;background:#1a1d23f5;border:1px solid #ffffff26;border-radius:8px;box-shadow:0 8px 24px #0008}#code-completions button{display:flex;width:100%;gap:8px;align-items:center;padding:6px 8px;background:none;font-size:12px;border-radius:4px}#code-completions button[aria-selected=true]{background:#ffffff24}#code-completions .name{font-family:'JetBrains Mono',monospace;color:#a8f0de}#code-completions .kind,#code-completions .hint{color:#a3a9b2}#code-completions .hint{margin-left:auto;font-size:11px}#code-completions footer{font-size:11px;color:#a3a9b2;padding:6px 8px}#code-card:has(#code-lines[hidden]) #code-meta{display:none}
.code-input-wrap textarea{caret-color:transparent}.code-caret{display:none;position:absolute;top:2px;width:2px;height:16px;background:#a8f0de;pointer-events:none}.code-input-wrap:focus-within .code-caret{display:block;animation:code-caret-blink 1.1s step-end infinite}@keyframes code-caret-blink{50%{opacity:0}}

/* Independent flowing columns: expanding cards never reserve a removed card's space. */
#panel{--panel-inset:24px;--panel-gap:16px}
.left-stack{top:var(--panel-inset);left:var(--panel-inset);max-height:calc(100dvh - 2 * var(--panel-inset))}
.left-stack>.card{flex-shrink:0}
.center-stack{position:absolute;top:var(--panel-inset);left:320px;right:412px;display:flex;flex-direction:column;align-items:center;gap:var(--panel-gap);max-height:calc(100dvh - 2 * var(--panel-inset));overflow:auto;scrollbar-width:thin;pointer-events:none!important}
.center-stack>*{pointer-events:auto;flex-shrink:0}
.center-stack .topbar{position:static;transform:none}
.center-stack #code-card{position:relative;inset:auto;transform:none;width:100%;max-width:720px}
#routing-card{max-height:calc(100dvh - 2 * var(--panel-inset));overflow:auto}
#code-toggle{padding-right:0;flex-wrap:wrap}
#code-meta{position:static;display:block;margin-bottom:8px}
@media(max-width:1439px){#panel{--panel-inset:16px}.center-stack{left:312px;right:404px}}
@media(max-width:1000px){#panel{display:flex;flex-direction:column;gap:16px;padding:16px;overflow:auto}.left-stack,.center-stack,#routing-card{position:static;width:100%;max-height:none;overflow:visible}.center-stack{order:-1}.center-stack .topbar{max-width:100%;flex-wrap:wrap}.center-stack #code-card{max-width:none}}

/* The code editor has its own viewport anchor; only side cards flow. */
#code-card{position:absolute;top:auto;bottom:var(--panel-inset);left:50%;right:auto;transform:translateX(-50%);width:min(720px,calc(100vw - 48px));max-height:calc(100dvh - 112px);overflow:auto}
#petal-sliders{margin-top:20px;margin-bottom:16px}
#routing-grid{grid-template-columns:64px repeat(7,minmax(0,1fr))}
.route-heading{font-size:10px}
@media(min-width:1001px) and (max-width:1559px){#code-card{width:calc(100vw - 748px)}}
@media(max-width:1000px){#panel{padding-bottom:240px}#code-card{position:fixed;width:calc(100vw - 32px);max-height:210px}}

@media(min-width:1001px){#routing-card{width:412px}.center-stack{right:452px}}
/* Camera v2.1: point outline only, with independent hand follow. */
#camera-card{display:flex;flex-direction:column;gap:16px;font-size:12px;line-height:16px}
#camera-card header{margin:0;gap:8px;justify-content:flex-start}
#camera-status{font-size:12px;white-space:nowrap;flex:1}
#camera-status:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#a3a9b2;margin-right:6px}
[data-state=tracking] #camera-status:before{background:#a8f0de}
[data-state=off] #camera-status{visibility:hidden}
#camera-card[data-state=blocked] #camera-status,#camera-card[data-state=blocked] #camera-explainer{color:#ff8a80}
[data-state=blocked] #camera-status:before{background:#ff8a80}
.camera-switch{position:relative;flex:none;width:28px;height:16px;padding:0;border-radius:8px;background:#ffffff24}
.camera-switch:before{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;background:#a3a9b2;border-radius:50%}
.camera-switch[aria-pressed=true]{background:#a8f0de}.camera-switch[aria-pressed=true]:before{left:14px;background:#0e1014}
#camera-card p{margin:0}#camera-explainer{line-height:18px}#camera-caption{color:#a3a9b2}
#hand-preview{height:152px;position:relative;border:1px solid #ffffff14;background:#ffffff03;border-radius:8px;overflow:hidden}
#hand-outline{display:block;width:100%;height:100%}#hand-outline polyline{stroke:#a8f0de80;fill:none;stroke-width:1}#hand-outline circle{fill:#a8f0de}
.hand-caption{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;font:10px/16px 'JetBrains Mono',monospace;color:#a3a9b2}#hand-gesture{color:#a8f0de}
#hand-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#a3a9b2;font-size:11px}
[data-state=missing] #hand-placeholder{align-items:flex-end;padding-bottom:12px}[data-state=missing] #hand-placeholder:before{content:'';position:absolute;top:28px;width:70px;height:84px;border:1px dashed #a3a9b266;border-radius:50%}
#openness-meter{display:flex;flex-direction:column;gap:8px}.open-track{height:4px;background:#ffffff24;border-radius:2px}.open-track i{display:block;height:4px;background:#a8f0de;border-radius:2px}
#follow-row{display:flex;flex-direction:column;gap:8px}#follow-value,#camera-open-value{color:#a8f0de}#hands-follow::-webkit-slider-thumb{background:#a8f0de}#hands-follow::-moz-range-thumb{background:#a8f0de}
.follow-ends{display:flex;justify-content:space-between;color:#a3a9b2;font-size:11px}
[data-state=off] #follow-row,[data-state=off] #gesture-hints,[data-state=missing] #gesture-hints{opacity:.4}
[data-state=missing] .open-track i{opacity:.4}[data-state=missing] #camera-open-value{color:#a3a9b2}
#gesture-hints{display:flex;flex-direction:column;gap:8px;color:#a3a9b2}#gesture-hints div{display:flex;gap:8px}#gesture-hints em{font-style:normal;color:#a3a9b2;margin-left:4px}
#camera-card footer{font-size:11px;color:#a3a9b2;display:flex;align-items:center}#camera-card kbd{margin-left:auto;font:10px Inter;color:#a3a9b2}
#camera-actions{display:flex;gap:8px}#camera-actions button{padding:8px 12px;background:#1a1d23;border-radius:8px;font-size:12px}#camera-card[data-state=allow] #camera-allow{border:1px solid #a8f0de80;color:#a8f0de;background:#a8f0de14}
#openness-card .control{height:auto}#openness-card .label-row{font-size:12px;color:#a3a9b2}#hand-lock{font-size:10px;color:#a8f0de;background:#a8f0de14;border-radius:4px;padding:0 4px}
#openness:disabled{opacity:.4;cursor:default}#openness:disabled::-webkit-slider-thumb{background:#0e1014;border:1px solid #eef0f3}#openness:disabled::-moz-range-thumb{background:#0e1014;border:1px solid #eef0f3}

.texture-ends{display:flex;justify-content:space-between;color:#a3a9b2;font-size:12px;margin-top:8px}#texture-control .control{margin:0;gap:8px}#openness-card>.divider{margin:20px 0 16px}