:root{color-scheme:dark;--bg:#0b151e;--panel:#12232f;--stroke:#2b4456;--ink:#edf3f7;--muted:#9eb6c8;--accent:#f1bd7c;--teal:#76ddce;--stage:#0c1c29;font-family:Inter,'Segoe UI',sans-serif}
:root[data-theme=light]{color-scheme:light;--bg:#edf3f6;--panel:#fff;--stroke:#cad9e2;--ink:#193442;--muted:#536e7d;--accent:#955313;--teal:#087d73;--stage:#e4eef3}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;height:100vh;height:100dvh;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:14px;overflow:hidden;background:var(--bg);color:var(--ink);overscroll-behavior:none}button,input,select,summary,a{font:inherit;touch-action:manipulation}button,select{min-height:44px;border:1px solid var(--stroke);border-radius:9px;background:var(--panel);color:var(--ink);padding:9px 12px;font-size:12px;cursor:pointer}button:hover,summary:hover{border-color:var(--accent);color:var(--accent)}button:disabled{opacity:.4;cursor:default}button[aria-pressed=true]{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 10%,var(--panel))}button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}button:active{transform:translateY(1px)}a{color:var(--teal);text-decoration:none}h1,h2,p{margin:0}h1{font-size:24px;letter-spacing:-.02em;font-weight:650}h2{font-size:13px;font-weight:600}small{font-size:11px;line-height:1.5;color:var(--muted)}
#scene{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;touch-action:none;cursor:grab;z-index:0}.page-header{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:14px;flex:none;background:var(--bg)}.brand{display:flex;gap:12px;align-items:center}.back-library{display:grid;place-items:center;width:40px;min-height:44px;font-size:24px}.eyebrow{display:block;font-size:10px;letter-spacing:.15em;color:var(--accent);margin-bottom:5px}.header-actions{display:flex;align-items:center;gap:6px}#full{font-size:24px;padding:4px 12px}#tabs{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:5px;border:1px solid var(--stroke);border-radius:13px;background:var(--panel)}#tabs button{border-color:transparent;background:transparent;font-size:13px;font-weight:550;color:var(--muted)}#tabs button.active{color:var(--teal);background:color-mix(in srgb,var(--teal) 12%,var(--panel));border-color:color-mix(in srgb,var(--teal) 40%,var(--stroke))}
.lab{position:relative;z-index:1;flex:1;min-height:0;display:grid;grid-template-columns:238px minmax(0,1fr);gap:14px;pointer-events:none}.lab.controls-closed{grid-template-columns:minmax(0,1fr)}.panel{border:1px solid var(--stroke);border-radius:14px;background:var(--panel);pointer-events:auto;scrollbar-width:thin;scrollbar-color:var(--stroke) transparent}.source-panel{padding:18px;overflow:auto}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:18px}.panel-heading>button{min-width:36px;padding:0 8px;font-size:21px;background:transparent}label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;margin:10px 0}.number-control{padding:0 0 16px}.number-control label{margin:0 0 8px;display:flex;flex-wrap:wrap;row-gap:7px;justify-content:space-between;align-items:center;font-size:12px}.number-value{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:11px}.number-value span{min-width:12px}input[type=number]{width:74px;min-height:40px;border:1px solid var(--stroke);background:var(--bg);color:var(--accent);border-radius:7px;padding:7px;font:600 14px 'Segoe UI',sans-serif;font-variant-numeric:tabular-nums}input[type=range]{width:100%;height:28px;margin:0;accent-color:var(--teal);cursor:pointer}.range-labels{display:none}.wide{width:100%}.accent{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 60%,var(--stroke));background:color-mix(in srgb,var(--accent) 9%,var(--panel))}.control-details{border-top:1px solid var(--stroke);margin-top:18px}summary{list-style:none;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px;cursor:pointer;user-select:none}summary::-webkit-details-marker{display:none}summary:after{content:'+';font-size:18px;font-weight:400}details[open]>summary:after{content:'−'}.details-content{padding:0 0 10px}.details-content>button,#learning-slot>button{margin:5px 0;width:100%}.details-content select{max-width:124px;font-size:11px}#toggles label{justify-content:flex-start;min-height:36px;margin:0}#toggles input{accent-color:var(--teal);width:17px;height:17px;margin:0 5px 0 0}.rotate-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:6px 0}.rotate-tools button{padding:4px;font-size:17px}.source-footer{display:flex;justify-content:space-between;align-items:center;gap:5px;padding-top:17px;margin-top:7px;border-top:1px solid var(--stroke)}#reset{flex:1;white-space:nowrap;color:var(--muted)}#reset-all{color:var(--muted)}
.stage-area{position:relative;min-width:0;min-height:0;border:1px solid var(--stroke);border-radius:16px;overflow:hidden;pointer-events:none;box-shadow:0 12px 36px #00000012}.stage-top{position:absolute;top:16px;left:18px;right:18px;display:flex;justify-content:space-between;gap:12px;align-items:start;pointer-events:none}.stage-label{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);padding-top:7px}.stage-label i{width:6px;height:6px;background:var(--teal);border-radius:50%;box-shadow:0 0 12px #76ddce55}#view-label{font-size:9px;border:1px solid var(--stroke);border-radius:5px;padding:3px 5px;color:var(--teal)}.quick-meter{pointer-events:auto;display:grid;grid-template-columns:auto auto;gap:4px 12px;min-width:126px;text-align:left;background:color-mix(in srgb,var(--panel) 85%,transparent);backdrop-filter:blur(8px);padding:9px 12px;border-color:var(--stroke)}.quick-meter>span:first-child{font-size:10px;color:var(--muted)}.quick-meter strong{grid-row:2;white-space:nowrap;font-size:18px;font-weight:550;color:var(--teal);font-variant-numeric:tabular-nums}.meter-more{grid-column:2;grid-row:1/3;align-self:center;color:var(--muted)}.stage-bottom{position:absolute;bottom:14px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.gesture-hint{font-size:10px;color:var(--muted)}.scene-actions{display:flex;align-items:center;gap:6px;margin-left:auto;pointer-events:auto}.scene-actions>button{background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(8px)}.view-tools{display:flex;align-items:center;gap:2px;border:1px solid var(--stroke);border-radius:10px;background:var(--panel);padding:2px}.view-tools button{border:0;min-width:34px;min-height:38px;padding:4px 7px;font-size:20px}.view-tools output{font-size:10px;min-width:36px;text-align:center;color:var(--muted)}#status{position:absolute;bottom:69px;left:18px;font-size:11px;color:var(--accent);pointer-events:none;max-width:75%}.floating-panel{position:absolute;z-index:5;padding:16px;max-height:calc(100% - 154px);overflow:auto;background:color-mix(in srgb,var(--panel) 97%,transparent);box-shadow:0 16px 50px #0004;backdrop-filter:blur(12px)}#meter{top:89px;right:18px;width:238px}.floating-panel .panel-heading{margin-bottom:8px}.reading{font-size:25px;color:var(--teal);font-weight:600;text-align:center;font-variant-numeric:tabular-nums;margin:8px 0 12px}#compass{display:block;width:157px;height:105px;margin:auto}#components{font-size:12px;line-height:1.8;font-variant-numeric:tabular-nums}#distance{font-size:11px;margin:10px 0;color:var(--muted)}#right-hand-guide{position:absolute;bottom:75px;left:18px;right:18px;pointer-events:none;color:var(--accent);font-size:11px;text-align:center;line-height:1.5}#hand-controls{margin:18px 0;padding-top:16px;border-top:1px solid var(--stroke)}.hand-control{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}.hand-control input{grid-column:1/-1}.hand-control label{margin:0;color:var(--accent)}.hand-control output{font-size:11px;color:var(--muted)}#right-hand[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel))}
/* Sound occupies its own place in the controls, alongside reset. */
html[data-simulation=magnetic] #sound-slot .pylab-sound{position:relative;inset:auto;bottom:auto;top:auto;padding:0;gap:1px;z-index:9}#sound-slot .pylab-sound>#sound-toggle{width:40px;height:44px;min-width:40px;border-radius:9px;background:var(--panel);border-color:var(--stroke);box-shadow:none}#sound-slot summary{min-width:25px;padding:5px;min-height:44px}#sound-slot summary:after{display:none}#sound-slot .sound-settings{top:auto;bottom:52px;right:0;width:195px;background:var(--panel);border-color:var(--stroke);max-height:240px;overflow:auto}#sound-slot .sound-settings p{font-size:10px}#sound-slot #sound-status{font-size:10px}
/* Light mode follows the same restrained palette, including legacy shared selectors. */
html[data-simulation=magnetic][data-theme=light] :is(header,.panel,.view-tools){background:var(--panel);color:var(--ink);border-color:var(--stroke)}html[data-simulation=magnetic][data-theme=light] header{background:var(--bg)}html[data-simulation=magnetic][data-theme=light] :is(button,select,input[type=number]){background:var(--panel);border-color:var(--stroke);color:var(--ink)}html[data-simulation=magnetic][data-theme=light] :is(.reading,.number-value){background:transparent;color:var(--teal)}html[data-simulation=magnetic][data-theme=light] #tabs button.active{background:#e2f3ee;color:var(--teal);border-color:#a6d6ca}html[data-simulation=magnetic][data-theme=light] #reverse{color:var(--accent);background:#fff4e5;border-color:#dfbf95}html[data-simulation=magnetic][data-theme=light] #camera-preset{background:var(--panel);color:var(--ink);border-color:var(--stroke)}html[data-simulation=magnetic][data-theme=light] :is(small,p,h2){color:inherit}html[data-simulation=magnetic][data-theme=light] #right-hand[aria-pressed=true]{background:#fff0df;color:var(--accent)}html[data-simulation=magnetic][data-theme=light] #view[aria-pressed=true]{background:#e2f3ee;color:var(--teal)}
#ad-region{position:relative;z-index:2;flex:none;max-height:82px;overflow:auto;width:100%;margin:0}#ad-region:has(.ad-card--preview){display:none!important}
/* Optional lesson tools are kept in the existing dialog. */
.learning-open{position:static;transform:none;width:100%;font-size:12px}.learning-top{display:flex;justify-content:space-between;align-items:center;gap:10px;position:sticky;top:0;background:inherit;z-index:1}.learning-top h2{margin:0}.learning-table{max-width:100%;overflow:auto}.learning-table table{width:100%;border-collapse:collapse}.learning-table td,.learning-table th{padding:9px;border-bottom:1px solid var(--stroke);text-align:left;font-size:12px}#magnetic-learning{width:min(800px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:22px;background:var(--panel);color:var(--ink);border:1px solid var(--stroke);border-radius:16px;overflow:auto}#magnetic-learning::backdrop{background:#0009}#magnetic-learning canvas{width:100%;height:auto;max-height:230px}#magnetic-learning button{margin:4px}#magnetic-learning p{font-size:12px;margin:12px 0;line-height:1.6}#magnetic-learning textarea{width:100%;background:var(--bg);color:var(--ink);font:inherit;border:1px solid var(--stroke);border-radius:7px;padding:9px}#magnetic-learning label{display:block}#magnetic-learning .learning-parameters{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:1000px){.lab{grid-template-columns:210px minmax(0,1fr);gap:10px}.source-panel{padding:14px}.gesture-hint{display:none}h1{font-size:22px}.scene-actions{margin:auto}.stage-bottom{left:10px;right:10px}.scene-actions>button{font-size:11px;padding:8px}.view-tools output{display:none}}
@media(max-width:850px){body{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));gap:10px}.page-header{gap:10px}.brand{gap:5px}.back-library{width:28px}.eyebrow{font-size:8px}h1{font-size:19px}.header-actions{gap:4px}.header-actions button{font-size:11px;padding:7px}#controls-toggle span{display:none}#controls-toggle{font-size:22px;min-width:44px}#full{font-size:23px}#tabs{gap:3px;padding:3px}#tabs button{font-size:11px;padding:5px;min-height:44px}.lab,.lab.controls-closed{display:block}.stage-area{height:100%;width:100%}.source-panel{position:absolute;z-index:7;left:10px;right:10px;bottom:72px;max-height:60%;max-height:min(60dvh,calc(100% - 88px));width:auto;padding:18px;box-shadow:0 16px 50px #0006;backdrop-filter:blur(12px)}.source-panel .number-control label{flex-wrap:nowrap}.number-value input{width:100px}.stage-top{left:12px;right:12px;top:12px}.stage-label{font-size:10px;gap:5px}.quick-meter{min-width:110px;padding:7px 9px}.quick-meter strong{font-size:16px}.stage-bottom{bottom:12px}.scene-actions{width:100%;justify-content:center;gap:4px}.scene-actions>button{padding:7px 9px;font-size:11px}.view-tools button{min-width:36px;min-height:40px}.view-tools{gap:0}#meter{right:12px;top:78px;width:min(238px,calc(100% - 24px));max-height:calc(100% - 146px)}#right-hand-guide{bottom:68px;left:12px;right:12px;font-size:10px}#status{left:12px;bottom:72px;font-size:10px}.floating-panel{padding:13px}.source-footer{justify-content:flex-end}#reset{flex:initial;min-width:115px}#sound-slot .sound-settings{width:220px}}
@media(max-width:470px){h1{font-size:16px}.eyebrow{letter-spacing:.09em}.header-actions [data-theme-toggle]{width:44px;white-space:nowrap;overflow:hidden;font-size:0}.header-actions [data-theme-toggle]:first-letter{font-size:17px}.brand{min-width:0}.scene-actions>button{font-size:10px;padding:6px}.view-tools button{min-width:30px}.scene-actions{gap:3px}#tabs button{font-size:10px}#right-hand-guide{font-size:9px}}
@media(max-height:540px) and (max-width:850px){.page-header{gap:5px;grid-template-columns:1fr auto}h1{font-size:17px}.eyebrow{display:none}#tabs{grid-column:1;grid-row:2}.header-actions{grid-row:1/3;grid-column:2}.brand{min-height:36px}.source-panel{top:8px;bottom:66px;max-height:none;right:auto;width:220px}.stage-label{display:none}#meter{top:64px;max-height:calc(100% - 130px)}.quick-meter{padding:5px 8px}.quick-meter strong{font-size:14px}.stage-bottom{justify-content:flex-end}.scene-actions{width:auto;margin-left:auto;margin-right:0}#right-hand-guide{max-width:calc(100% - 260px);left:auto}#compass{width:120px;height:80px}}




.lab{z-index:2}.page-header{z-index:4}.assistant-open{margin-top:15px;border-color:var(--stroke);color:var(--teal)}