:root{--cream:#fcf5e2;--ink:#151515;--red:#ff2d51;--muted:#817d73;--line:#d9d0bc;--mono:ui-monospace,'SFMono-Regular',Menlo,monospace;--sans:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}.topbar{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5.4vw;font-family:var(--mono);font-size:10px;letter-spacing:.08em}.wordmark{color:var(--ink);font-weight:500;text-decoration:none;font-size:13px;letter-spacing:.04em}.wordmark span{color:var(--muted)}.top-note,.back-link{color:#565249}.back-link{text-decoration:none}.back-link b,footer b{color:var(--red);font-size:16px;margin-left:7px}main{max-width:1320px;margin:auto;padding:60px 5.4vw 0}.intro{width:34%;position:absolute;top:163px;left:max(5.4vw,calc((100vw - 1320px)/2 + 5.4vw));z-index:1}.eyebrow{font:10px var(--mono);letter-spacing:.07em;color:#645e53;display:flex;align-items:center;gap:9px}.eyebrow i{height:7px;width:7px;border-radius:50%;background:var(--red);display:inline-block}.intro h1{font-size:clamp(48px,6.5vw,88px);line-height:.96;letter-spacing:-.075em;margin:27px 0 20px;font-weight:600}.intro h1 em{font-weight:400;color:var(--red);font-style:normal}.intro p{font-size:14px;line-height:1.75;color:#625e55;max-width:345px;margin:0}.intro-meta{display:flex;gap:19px;margin-top:31px;font:9px var(--mono);letter-spacing:.03em;color:#6e695f}.simulator{margin-left:35%;width:65%;max-width:740px}.stage-head{height:31px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);font:10px var(--mono);letter-spacing:.06em;color:#625e55}.stage-head span:last-child{color:var(--red)}.hand-stage{height:525px;position:relative;overflow:hidden;background:rgba(255,255,255,.23);border:1px solid var(--line);border-top:0}.stage-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(30,25,15,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(30,25,15,.035) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}#hand{height:100%;width:100%;position:relative;z-index:1;overflow:visible}.wrist path:first-child{fill:#211f1d;stroke:#111;stroke-width:2}.wrist-line{fill:none;stroke:#6b6459;stroke-width:2;opacity:.8}#palm-body path:first-child{fill:url(#palm);stroke:#181715;stroke-width:4}.palm-detail{fill:none;stroke:#c7bda7;stroke-width:2}.palm-mark{fill:#ff2d51;opacity:.13;stroke:#ff2d51;stroke-width:2}.mark-cross{stroke:#ff2d51;stroke-width:2}.finger-shell{fill:#fcf5e2;stroke:#1c1a18;stroke-width:3}.tendon{fill:none;stroke:#ff2d51;stroke-width:2;opacity:.85}.seam{fill:none;stroke:#b6aa93;stroke-width:1.5}.joint-pin{fill:#ff2d51;stroke:#fcf5e2;stroke-width:2}.wiring path{fill:none;stroke:#ff2d51;stroke-width:2;stroke-dasharray:3 4;opacity:.8}.wiring circle{fill:#ff2d51}.stage-caption{position:absolute;bottom:14px;left:16px;right:16px;display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.08em;color:#7d776b}.stage-caption b{color:var(--red);font-size:14px}.readout{height:76px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:18px}.readout-label{font:9px var(--mono);color:#7b7568;letter-spacing:.06em}.readout strong{font-size:14px;letter-spacing:-.03em}.readout-value{margin-left:auto;color:var(--red);font:10px var(--mono)}.controls{margin-top:67px;border-top:1px solid var(--ink);padding-top:25px}.controls-title{display:flex;align-items:flex-end;justify-content:space-between}.controls h2{margin:12px 0 0;font-size:33px;letter-spacing:-.06em;font-weight:600}.reset{border:1px solid var(--ink);background:none;border-radius:30px;padding:10px 14px;font:9px var(--mono);letter-spacing:.04em;cursor:pointer}.reset:hover{background:var(--ink);color:var(--cream)}.reset span{font-size:15px;margin-left:8px;color:var(--red)}.control-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:7%;margin-top:32px}.control-row{height:58px;border-top:1px solid var(--line);display:grid;grid-template-columns:32px 80px 1fr 44px;align-items:center;gap:10px}.digit-index{font:9px var(--mono);color:#aaa18f}.digit-name{font:10px var(--mono);letter-spacing:.06em}.control-row output{text-align:right;font:10px var(--mono);color:var(--red)}input[type=range]{appearance:none;width:100%;height:18px;background:transparent;cursor:pointer;margin:0}input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--red) 0%,var(--red) var(--fill,0%),#cfc6b3 var(--fill,0%),#cfc6b3 100%)}input[type=range]::-moz-range-track{height:2px;background:#cfc6b3}input[type=range]::-moz-range-progress{height:2px;background:var(--red)}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border:2px solid var(--red);border-radius:50%;background:var(--cream);margin-top:-5px}input[type=range]::-moz-range-thumb{width:9px;height:9px;border:2px solid var(--red);border-radius:50%;background:var(--cream)}input:focus-visible{outline:1px solid var(--red);outline-offset:5px}.control-foot{border-top:1px solid var(--line);padding:13px 0 0;display:flex;justify-content:space-between;color:#777165;font:9px var(--mono)}.legend-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red)}.legend-joint{display:inline-block;width:6px;height:6px;border:1px solid var(--red);border-radius:50%}.note{margin-top:62px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;display:grid;grid-template-columns:30px 1fr auto;align-items:start;gap:10px;color:#6d675c}.note-mark{font:20px var(--mono);color:var(--red)}.note p{font-size:11px;line-height:1.7;margin:0;max-width:700px}.note p b{color:var(--ink)}.note>span{font:9px var(--mono);color:#8d8678;padding-top:4px}footer{margin-top:50px;height:71px;border-top:1px solid var(--line);padding:0 5.4vw;display:flex;justify-content:space-between;align-items:center;font:9px var(--mono);letter-spacing:.06em;color:#777165}
@media(max-width:900px){main{padding-top:40px}.intro{position:relative;top:auto;left:auto;width:100%;margin-bottom:42px}.intro h1{font-size:64px;margin-top:19px}.intro p{max-width:490px}.simulator{margin:0;width:100%;max-width:none}.hand-stage{height:min(110vw,540px)}.controls{margin-top:52px}}
@media(max-width:560px){.topbar{padding:0 20px}.top-note{display:none}main{padding:35px 20px 0}.intro h1{font-size:57px}.intro-meta{font-size:8px;gap:12px}.hand-stage{height:420px}.readout{gap:10px}.readout-label{font-size:8px}.readout strong{font-size:12px}.readout-value{font-size:9px}.controls-title{align-items:center}.controls h2{font-size:28px}.control-grid{grid-template-columns:1fr;column-gap:0;margin-top:22px}.control-row{grid-template-columns:25px 68px 1fr 40px}.control-foot{font-size:8px}.note{grid-template-columns:23px 1fr}.note>span{grid-column:2}footer{padding:0 20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hand-stage{isolation:isolate}.stage-grid{z-index:0;pointer-events:none}#model-view{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:none}.model-status{position:absolute;z-index:2;top:14px;left:16px;padding:7px 9px;background:rgba(252,245,226,.88);border:1px solid var(--line);color:#696255;font:8px var(--mono);letter-spacing:.05em;pointer-events:none}.model-status.error{color:var(--red)}.stage-caption{z-index:2;pointer-events:none}

/* Portfolio theme override: keep the WUJI 3D model on the same dark surface as the other labs. */
:root{color-scheme:dark;--cream:#FCF5E2;--ink:#08080A;--red:#FF2D51;--muted:#AAA69C;--line:#34343A}
body{background:var(--ink);color:var(--cream)}
.topbar{border-color:var(--line)}.wordmark{color:var(--cream)}.wordmark span,.top-note,.back-link{color:var(--muted)}
.intro .eyebrow{color:#C7C1B5}.intro p{color:#C4BFB4}.intro-meta{color:#A7A196}
.stage-head{border-color:var(--line);color:#C7C1B5}.hand-stage{background:#101013;border-color:var(--line)}.stage-grid{background-image:linear-gradient(rgba(252,245,226,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(252,245,226,.055) 1px,transparent 1px)}
.stage-caption{color:#AAA69C}.readout{border-color:var(--line)}.readout-label{color:#AAA69C}.controls{border-color:var(--cream)}.control-row{border-color:var(--line)}.digit-index{color:#77736D}.control-row output{color:var(--red)}
input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--red) 0%,var(--red) var(--fill,0%),#514F4A var(--fill,0%),#514F4A 100%)}input[type=range]::-moz-range-track{background:#514F4A}input[type=range]::-moz-range-thumb{background:var(--ink)}input[type=range]::-webkit-slider-thumb{background:var(--ink)}
.control-foot,.note,footer{color:#AAA69C;border-color:var(--line)}.note p b{color:var(--cream)}.note>span{color:#77736D}.reset{border-color:#7B776E;color:var(--cream)}.reset:hover{background:var(--cream);color:var(--ink)}

/* Portfolio brand: dark canvas with the shared cream and red accents. */
:root{--cream:#08080A;--ink:#FCF5E2;--muted:#B6B0A4;--line:#343236;--panel:#101013}
body{background:var(--cream);color:var(--ink)}
.topbar{background:#08080A;border-color:var(--line)}
.wordmark{color:var(--ink)}
.wordmark span,.top-note,.back-link,.eyebrow,.intro p,.intro-meta,.stage-head,.stage-caption,.readout-label,.control-foot,.note,.note>span{color:#B6B0A4}
main,footer{background:#08080A}
.hand-stage{background:#0E0E11;border-color:var(--line)}
.stage-grid{background-image:linear-gradient(rgba(252,245,226,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(252,245,226,.045) 1px,transparent 1px)}
.finger-shell{fill:#FCF5E2;stroke:#08080A}
.palm-detail{stroke:#7A756E}.seam{stroke:#AAA396}.wrist-line{stroke:#AAA396}
.control-row,.controls,.note,footer,.readout{border-color:var(--line)}
input[type=range]::-webkit-slider-thumb{background:#08080A}
input[type=range]::-moz-range-thumb{background:#08080A}
.reset{border-color:var(--line);color:var(--ink)}
.reset:hover{background:#FCF5E2;color:#08080A}
.model-status{background:rgba(8,8,10,.9);border-color:var(--line);color:#FCF5E2}

/* Black, cream, and red portfolio theme. */
:root{--cream:#08080A;--ink:#FCF5E2;--muted:#B6B0A4;--line:#343236;--panel:#101013}
body{background:#08080A;color:#FCF5E2}
.topbar,main,footer{background:#08080A}
.wordmark{color:#FCF5E2}.wordmark span,.top-note,.back-link,.eyebrow,.intro p,.intro-meta,.stage-head,.stage-caption,.readout-label,.control-foot,.note,.note>span{color:#B6B0A4}
.hand-stage{background:#0E0E11;border-color:#343236}
.stage-grid{background-image:linear-gradient(rgba(252,245,226,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(252,245,226,.045) 1px,transparent 1px)}
.control-row,.controls,.note,footer,.readout{border-color:#343236}
.finger-shell{fill:#FCF5E2;stroke:#08080A}.palm-detail{stroke:#7A756E}.seam,.wrist-line{stroke:#AAA396}
.reset{border-color:#343236;color:#FCF5E2}.reset:hover{background:#FCF5E2;color:#08080A}
.model-status{background:rgba(8,8,10,.92);border-color:#343236;color:#FCF5E2}.model-status.error{color:#FF2D51}
input[type=range]::-webkit-slider-thumb{background:#08080A}input[type=range]::-moz-range-thumb{background:#08080A}
.camera-control{margin-top:72px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:42px;align-items:center}
.camera-copy h2{font-size:clamp(27px,3vw,42px);line-height:1.03;letter-spacing:-.055em;margin:18px 0 12px;max-width:540px}
.camera-copy p{max-width:580px;color:#B6B0A4;font-size:13px;line-height:1.75;margin:0}
.camera-actions{display:flex;align-items:center;gap:16px;margin-top:22px}
.camera-toggle{appearance:none;border:1px solid #FF2D51;border-radius:30px;padding:11px 16px;background:transparent;color:#FCF5E2;font:10px var(--mono);letter-spacing:.07em;cursor:pointer;transition:background .2s,color .2s}
.camera-toggle:hover,.camera-toggle:focus-visible{background:#FF2D51;color:#08080A;outline:none}
.camera-toggle span{color:#FF2D51;font-size:14px;margin-left:8px}.camera-toggle:hover span{color:#08080A}
#camera-status{font:9px var(--mono);letter-spacing:.06em;color:#B6B0A4}
#camera-status[data-state="active"]{color:#FF2D51}
.camera-preview{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#101013;border:1px solid #343236;border-radius:3px}
.camera-preview[hidden]{display:none!important}
.camera-preview video,.camera-preview canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.camera-preview video{transform:scaleX(-1);opacity:.7}
.camera-preview canvas{z-index:1}
.camera-tag{position:absolute;z-index:2;top:10px;left:11px;background:rgba(8,8,10,.82);padding:7px 9px;color:#FCF5E2;font:8px var(--mono);letter-spacing:.08em}
@media(max-width:700px){.camera-control{grid-template-columns:1fr;gap:24px;margin-top:52px}.camera-preview{max-width:480px}}