#student-camera{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#101919;pointer-events:none}
#student-camera[hidden]{display:none}
.preview.camera-preview #unity-canvas{position:absolute;inset:auto 14px 78px auto;width:30%;height:35%;border:1px solid #8aa99a;border-radius:10px;background:#071512}
.preview.camera-preview.ghost-active #unity-canvas{inset:0;width:100%;height:100%;opacity:var(--ghost-opacity,.35);border:0;border-radius:0;background:transparent;pointer-events:none}
.preview.camera-preview{height:clamp(420px,65vw,650px)}
/* Phone browser controls echo the ink, parchment and dark red of Roy's entry scroll. */
.assist-menu{position:absolute;top:max(64px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));bottom:12px;width:min(350px,calc(100% - 24px));z-index:12;pointer-events:none}
.assist-menu[hidden],.assist-panel[hidden]{display:none!important}
.assist-menu-toggle{display:block;margin-left:auto;width:46px;min-width:46px;height:46px;min-height:46px;padding:0;border:2px solid #603c20;border-radius:6px;color:#301f12;background:linear-gradient(#faeac1,#e3c58e);box-shadow:0 2px 5px #0006;font:600 24px/1 system-ui;pointer-events:auto;touch-action:manipulation}
.assist-menu-toggle:focus-visible,.assist-panel button:focus-visible,.assist-panel input:focus-visible{outline:3px solid #fff4c9;outline-offset:3px;box-shadow:0 0 0 5px #603c20}
.assist-panel{display:flex;flex-direction:column;box-sizing:border-box;width:100%;max-height:calc(100% - 56px);overflow:auto;overscroll-behavior:contain;margin:8px 0 0;padding:14px;border:2px solid #7c542d;border-radius:5px;color:#301f12;background:radial-gradient(ellipse at center,#f5e0ad,#e6c68f);box-shadow:0 5px 18px #0007;pointer-events:auto;touch-action:pan-y;text-align:left}
.assist-panel::before,.assist-panel::after{content:"";display:block;height:8px;margin:0 -10px 12px;border-radius:6px;border:1px solid #6e4927;background:linear-gradient(#d9b77b,#79512c 50%,#bf955d);box-shadow:0 1px 2px #301f1266}
.assist-panel::after{margin:12px -10px 0}
.assist-panel h3{color:#301f12;font-size:18px;margin:0 0 10px;line-height:1.3}
.assist-panel p{color:#493421;font-size:13px;line-height:1.45;margin:10px 0}
.assist-panel [role=status]{color:#493421}
.assist-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:start}
.assist-controls button{min-height:44px;white-space:normal;padding:9px 7px;border:1px solid #2b110b;border-radius:4px;background:#421a12;color:#f5e0ad;font-size:13px;line-height:1.25;touch-action:manipulation}
.assist-controls button[aria-pressed=true]{background:#9c702e;color:#fff4d7;border-color:#664016}
.assist-controls button:disabled{cursor:not-allowed;opacity:.5}
.assist-controls label{display:block;grid-column:1/-1;font-size:13px;color:#301f12}
.assist-controls input{display:block;width:100%;max-width:none;min-height:44px;accent-color:#754326;touch-action:auto}
.runtime-menu[hidden],.runtime-menu button[hidden]{display:none!important}
.assist-panel #assist-control-reason{order:0;border:1px solid #754326;border-left:4px solid #754326;border-radius:3px;background:#fff0cc;padding:9px;margin:0 0 12px;font-size:14px;font-weight:600}
@media(max-width:600px){.preview.camera-preview{height:125vw;max-height:650px}.assist-menu{right:max(8px,env(safe-area-inset-right));bottom:8px;width:min(330px,calc(100% - 16px))}.assist-panel{padding:12px}}
@media(max-height:430px) and (orientation:landscape){.assist-menu{top:max(54px,env(safe-area-inset-top));bottom:6px}.assist-panel{padding:10px}}
.assist-menu.native-row-replaced{top:max(12px,env(safe-area-inset-top))}
.preview.camera-preview #student-camera{left:0;right:auto;width:50%;height:100%;object-fit:contain}
.preview.camera-preview #unity-canvas{left:50%;top:0;right:auto;bottom:auto;width:50%;height:100%;border-radius:0;border:0;border-left:1px solid #8aa99a}
.preview.camera-preview.ghost-active #student-camera{width:100%}
.preview.camera-preview.ghost-active #unity-canvas{left:0;top:0;width:100%;height:100%;transform:translate(var(--ghost-x,0%),var(--ghost-y,0%)) scale(var(--ghost-scale,1));transform-origin:center center}

.assist-panel>*{flex-shrink:0}.assist-panel>h3{order:0}.assist-panel>.assist-controls{order:1}.assist-panel>p{order:2}.assist-panel::before{order:-1}.assist-panel::after{order:3}
@media(max-width:600px){.preview:not(.window-fill):not(:fullscreen){min-height:360px}}
.preview.window-fill.camera-preview,.preview:fullscreen.camera-preview{height:100vh;height:100dvh;max-height:none;min-height:0}
/* Choose which visual layer is translucent; camera pixels never leave the local video element. */
#student-camera{transform:scaleX(var(--camera-mirror,1))}
.preview.camera-preview.ghost-me #unity-canvas{left:0;top:0;width:100%;height:100%;border:0;opacity:1;transform:none}
.preview.camera-preview.ghost-me #student-camera{left:0;top:0;width:100%;height:100%;z-index:2;opacity:var(--ghost-opacity,.35);background:transparent;transform:translate(var(--ghost-x,0%),var(--ghost-y,0%)) scale(var(--ghost-scale,1)) scaleX(var(--camera-mirror,1));transform-origin:center center;pointer-events:none}

/* A local transparent cutout replaces only Ghost Me; never expose raw video while loading or failed. */
#student-body{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none;background:transparent}
#student-body[hidden]{display:none}
.preview.camera-preview.ghost-me.body-only #student-camera{opacity:0!important}
.preview.camera-preview.ghost-me.body-only #student-body{opacity:var(--ghost-opacity,.35);transform:translate(var(--ghost-x,0%),var(--ghost-y,0%)) scale(var(--ghost-scale,1)) scaleX(var(--camera-mirror,1));transform-origin:center center}
/* Compact, translucent studio settings; the practice remains visible behind the parchment. */
.assist-menu{width:min(300px,calc(100% - 24px))}
.assist-menu-toggle{width:44px;min-width:44px;height:44px;min-height:44px;border-width:1px;border-color:#94703e;background:rgba(235,211,167,.82);border-radius:8px;box-shadow:0 2px 9px #120b0570;font-size:22px}
.assist-panel{padding:11px;border:1px solid #a37b46;border-radius:9px;background:rgba(239,218,179,.76);box-shadow:0 8px 24px #11090466;gap:7px;scrollbar-width:thin;scrollbar-color:#8e693d transparent;transition:background .12s,border-color .12s,box-shadow .12s}
.assist-panel::before,.assist-panel::after{display:none}
.assist-panel h3{font-size:15px;letter-spacing:.04em;margin:0 0 2px}
.assist-panel>p{font-size:12px;line-height:1.4;margin:3px 0}
.assist-panel #assist-control-reason{font-size:12px;font-weight:500;line-height:1.4;padding:7px 8px;margin:0;background:rgba(255,240,205,.78);border-color:#a37b46;border-left-width:2px}
.assist-group{order:1;border:1px solid #98734480;border-radius:6px;background:rgba(250,234,203,.3);overflow:visible;flex-shrink:0}
.assist-group>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:0 10px;color:#302115;font:650 13px/1.25 system-ui;letter-spacing:.025em;touch-action:manipulation}
.assist-group>summary::-webkit-details-marker{display:none}
.assist-group>summary::after{content:'+';font-size:18px;color:#6f4822;font-weight:400}
.assist-group[open]>summary::after{content:'−'}
.assist-group>summary:focus-visible{outline:2px solid #68441e;outline-offset:-3px;border-radius:5px}
.assist-group>.assist-controls{padding:0 8px 8px;gap:6px}
.assist-controls button{border-color:#8d673a;border-radius:5px;min-height:42px;padding:8px 6px;background:rgba(59,33,21,.92);font-size:12px;box-shadow:inset 0 1px 0 #fff2}
.assist-controls button[aria-pressed=true]{background:#87602d;border-color:#4a3018;color:#fff7df}
.assist-controls label{font-size:12px;line-height:1.4;padding:2px 3px;border-radius:5px;transition:background .12s,opacity .12s}
.assist-controls input{min-height:38px;margin:0;accent-color:#80562c;touch-action:pan-y}
.assist-controls .runtime-menu{grid-column:1/-1;padding:0;margin:0}
/* While dragging a slider, fade only the settings chrome; never blur the moving instructor. */
.assist-panel.assist-adjusting{background:rgba(239,218,179,.12);border-color:transparent;box-shadow:none}
.assist-adjusting>h3,.assist-adjusting>p,.assist-adjusting>.assist-group:not(:has(.adjusting-control)){opacity:.12;pointer-events:none}
.assist-adjusting>.assist-group:has(.adjusting-control){background:transparent;border-color:transparent}
.assist-adjusting .assist-group:has(.adjusting-control)>summary,.assist-adjusting .assist-group:has(.adjusting-control) .assist-controls>*:not(.adjusting-control){opacity:.12}
.assist-adjusting .adjusting-control{opacity:1;background:rgba(255,238,200,.94);padding:5px 7px;box-shadow:0 2px 10px #180d0750}
@media(max-width:600px){.assist-menu{width:min(286px,calc(100% - 16px))}.assist-panel{padding:9px}}
@media(max-height:430px) and (orientation:landscape){.assist-menu{width:min(286px,42vw)}.assist-panel{padding:8px;gap:5px}.assist-group>summary{min-height:36px}}
@media(prefers-reduced-motion:reduce){.assist-panel,.assist-controls label{transition:none}}
.assist-panel{max-height:min(calc(100% - 52px),58dvh);background:rgba(239,218,179,.60);transition:background .2s,border-color .2s,box-shadow .2s}
.assist-group>summary{min-height:46px}
.assist-panel.assist-adjusting{background:rgba(239,218,179,.22);transition-duration:.12s}
.assist-controls input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;min-height:40px;cursor:ew-resize}
.assist-controls input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:3px;background:#8c693f80}
.assist-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-12px;border:2px solid #69451f;border-radius:50%;background:#f6e3ba;box-shadow:0 1px 4px #24130555}
.assist-controls input[type=range]::-moz-range-track{height:4px;border-radius:3px;background:#8c693f80}
.assist-controls input[type=range]::-moz-range-thumb{width:26px;height:26px;border:2px solid #69451f;border-radius:50%;background:#f6e3ba;box-shadow:0 1px 4px #24130555}
.assist-controls input:disabled{opacity:.45;cursor:not-allowed}
.assist-group>summary{background:rgba(255,239,205,.68);border-radius:5px}
.assist-controls label{background:rgba(255,239,205,.76);padding:4px 7px}
.assist-group>p{background:rgba(255,239,205,.74);padding:7px 8px;margin:0 8px 7px;border-radius:4px;font-size:12px;line-height:1.4}
.assist-adjusting .assist-group:has(.adjusting-control)>p{opacity:.12}

/* Reset the landing page's generic details spacing inside studio controls. */
.assist-panel .assist-group{margin:0;padding:0}
/* Follow-camera controls are independent of free navigation and never move the teacher. */
.follow-pads{position:absolute;inset:0;z-index:10;pointer-events:none}
.follow-pads[hidden]{display:none!important}
.follow-pad{position:absolute;bottom:max(66px,calc(env(safe-area-inset-bottom) + 56px));width:100px;height:100px;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:50%;color:#f6e4bd;background:transparent;--pad-x:0px;--pad-y:0px}
.follow-pad-orbit{left:max(8px,env(safe-area-inset-left))}.follow-pad-frame{right:max(8px,env(safe-area-inset-right))}
.follow-pad::before{content:'';position:absolute;inset:5px;border:1px solid #d2b78066;border-radius:50%;background:#23180c55;opacity:0;transition:opacity .2s}
.follow-pad-handle{position:absolute;left:28px;top:28px;width:44px;height:44px;display:grid;place-items:center;border:1px solid #c1a36d99;border-radius:50%;background:rgba(42,29,16,.32);color:#f7e6c4aa;font:24px/1 system-ui;transform:translate(var(--pad-x),var(--pad-y));transition:background .2s,color .2s;pointer-events:none}
.follow-pad-caption{position:absolute;left:0;right:0;bottom:3px;text-align:center;font:600 10px/1.2 system-ui;letter-spacing:.06em;text-shadow:0 1px 3px #000;opacity:.5;pointer-events:none}
.follow-pad.pad-active::before{opacity:1}.follow-pad.pad-active .follow-pad-handle{background:#5f452ac9;color:#fff0cc;border-color:#eed6a4;transition:none}.follow-pad.pad-active .follow-pad-caption{opacity:1}
.follow-view-nudges{grid-column:1/-1;gap:5px}.follow-view-hint{grid-column:1/-1;font-size:12px;margin:0;padding:5px;color:#352214;background:#f5e5c3bb;border-radius:4px}
@media(max-height:430px) and (orientation:landscape){.follow-pad{bottom:max(48px,env(safe-area-inset-bottom));width:94px;height:94px}.follow-pad-handle{left:25px;top:25px}}
.assist-panel .follow-fine{grid-column:1/-1;margin:0;padding:0;border:0;background:transparent}
.follow-fine>summary{min-height:42px;display:flex;align-items:center;cursor:pointer;color:#412c18;font-size:12px;font-weight:600;background:#f5e5c3bb;border-radius:4px;padding:0 8px}
.follow-fine .follow-view-nudges{padding:6px 0 0}