@font-face{font-family:Bangla;src:url('./assets/bangla.ttf') format('truetype');font-display:swap;font-weight:100 900}
:root{color-scheme:dark;--mint:#92ebce;--warm:#eaca94;--ink:#eaf3ef;--muted:#9aafaa;--panel:rgba(12,27,30,.76)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Bangla,Inter,Arial,sans-serif;color:var(--ink);background:#0a171c}body{touch-action:none}
[hidden]{display:none!important}#camera,#shade,#lab,#hands{position:fixed;inset:0;width:100%;height:100%}#camera{object-fit:cover;transform:scaleX(-1)}#shade{pointer-events:none;background:linear-gradient(180deg,rgba(5,14,18,.58),transparent 32%,transparent 65%,rgba(5,14,18,.8));z-index:1}#lab{z-index:0}#lab>canvas{display:block;width:100%;height:100%}#hands{pointer-events:none;z-index:3}
header{position:fixed;z-index:5;top:max(24px,env(safe-area-inset-top));left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.identity{display:flex;align-items:center;gap:11px;color:var(--mint)}.brand{font-family:Arial,sans-serif;font-size:16px;letter-spacing:2.5px;font-weight:700;color:#e8f4ef}.brand span{font-weight:300;color:var(--mint)}.edition{font:8px Arial,sans-serif;letter-spacing:2px;color:#a0b1ac;margin-top:7px}.edition span{margin:0 6px;color:var(--mint)}#status{display:flex;align-items:center;gap:8px;background:rgba(9,22,26,.64);border:1px solid #ffffff18;border-radius:32px;padding:9px 14px;font-size:10px;backdrop-filter:blur(14px)}.led{width:6px;height:6px;border-radius:50%;background:var(--warm);box-shadow:0 0 12px #eaca9480}.tracking .led{background:var(--mint);box-shadow:0 0 12px #92ebce80}
.experiment-title{position:fixed;z-index:2;left:33px;top:103px;pointer-events:none}.eyebrow{font:9px Arial,sans-serif;letter-spacing:2.5px;color:var(--warm)}h1{font-size:26px;font-weight:500;margin:9px 0 0;line-height:1.5}.experiment-title p{font:11px Arial,sans-serif;letter-spacing:.4px;color:#b4c5c0;margin:5px 0}
.readout{position:fixed;z-index:4;right:33px;top:114px;min-width:206px;background:rgba(9,23,27,.68);border:1px solid #ffffff15;border-top:1px solid #a5e7d64d;border-radius:15px;padding:15px 18px;pointer-events:none;backdrop-filter:blur(18px)}.readout-label{font-size:11px;color:#d4e0dc}.readout-label span{display:block;font:8px Arial,sans-serif;letter-spacing:1.7px;color:var(--muted);margin-top:4px}.reading{font:300 45px Arial,sans-serif;letter-spacing:-1.5px;color:var(--mint);margin:12px 0}.reading small{font-size:12px;color:#b2c2bc;letter-spacing:0;margin-left:7px}#physics-line{font:11px Arial,sans-serif;color:#a3b9b1;display:flex;justify-content:space-between;gap:15px}#physics-line span{color:#e6ece7}.readout-meta{display:flex;justify-content:space-between;font:9px Arial,sans-serif;border-top:1px solid #ffffff15;margin-top:13px;padding-top:10px;color:var(--warm)}#ruler-value{font-size:10px;color:#abbeb8;margin-top:11px;max-width:195px}
#object-labels{visibility:hidden}#object-labels>span{position:fixed;z-index:2;text-align:center;transform:translate(-50%,0);font-size:11px;pointer-events:none;color:#d1e0da;text-shadow:0 2px 8px #000}#object-labels small{display:block;font:7px Arial,sans-serif;letter-spacing:1.5px;color:#94aca1;margin-top:5px}#vacuum-label{color:var(--warm)!important;border-left:1px solid #eaca9480;padding-left:12px;text-align:left!important}
#setup{position:fixed;left:50%;top:48%;transform:translate(-50%,-50%);z-index:6;text-align:center;width:min(90vw,460px);background:rgba(9,23,27,.88);border:1px solid #d1f8e525;border-radius:22px;padding:28px 26px;backdrop-filter:blur(22px);box-shadow:0 20px 80px #0005}#setup h2{font-size:20px;font-weight:500;margin:17px 0 8px}#setup p{font:12px/1.7 Arial,sans-serif;color:#bdcec7;margin:0 auto;max-width:330px}#setup small{display:block;color:var(--mint);font-size:10px;margin-top:20px}.setup-orbit{width:45px;height:45px;margin:0 auto;border:1px solid #92ebce35;border-radius:50%;display:grid;place-items:center}.setup-orbit span{width:25px;height:25px;border:1px solid #92ebce;border-left-color:transparent;border-radius:50%;animation:spin 1.5s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}button{font:12px Bangla,Arial,sans-serif;cursor:pointer;border:1px solid #92ebce60;border-radius:9px;background:#92ebce15;color:#c8f9e7;padding:10px 18px;margin-top:20px}
#help{position:fixed;z-index:7;left:50%;top:49%;transform:translate(-50%,-50%);width:min(460px,90vw);background:rgba(9,23,27,.94);border:1px solid #92ebce50;border-radius:20px;padding:25px 28px;pointer-events:none;box-shadow:0 20px 100px #0007}#help h2{font-size:22px;font-weight:500;margin:10px 0 20px}#help p{margin:15px 0;font-size:13px}#help b{font-weight:500;color:var(--mint)}#help p span{display:block;font:11px/1.65 Arial,sans-serif;color:#b2c5bc;margin-top:4px}#help small{font-size:10px;color:var(--warm)}
footer{position:fixed;z-index:5;left:32px;right:32px;bottom:max(16px,env(safe-area-inset-bottom));pointer-events:none}.footnotes{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:9px;color:#b2c9bd}.footnotes i{font-style:normal;margin:0 7px;color:#678677}#mode-label{font:8px Arial,sans-serif;letter-spacing:1.2px}.demo #mode-label{color:var(--warm)}
#qa-results{position:fixed;z-index:20;left:10px;top:10px;right:10px;max-height:90vh;overflow:auto;background:#06151df2;white-space:pre-wrap;font:12px monospace;color:#a2edca;padding:20px;pointer-events:auto}
@media(max-width:800px){header{left:18px;right:18px;top:16px}.brand{font-size:12px}.identity{gap:8px}.identity svg{width:27px}.edition{font-size:6px;letter-spacing:1.3px}#status{font-size:9px;padding:8px 10px}.experiment-title{left:18px;top:82px}h1{font-size:21px}.eyebrow{font-size:7px;letter-spacing:1.8px}.experiment-title p{font-size:9px}.readout{right:18px;top:86px;min-width:165px;padding:12px}.reading{font-size:33px;margin:9px 0}.readout-label{font-size:9px}.readout-label span{font-size:6px}.readout-meta{font-size:8px}#physics-line{font-size:9px}#ruler-value{max-width:150px;font-size:9px}footer{left:16px;right:16px;bottom:13px}#mode-label{display:none}.footnotes{justify-content:center;font-size:8px}#object-labels>span{font-size:9px}#object-labels small{font-size:6px;letter-spacing:.8px}}
@media(max-height:600px){header{top:12px;left:20px;right:20px}.identity svg{width:25px;height:27px}.brand{font-size:11px}.edition{font-size:6px;margin-top:4px}.experiment-title{top:62px;left:20px}h1{font-size:19px;margin-top:5px}.experiment-title p{font-size:9px}.eyebrow{font-size:7px}.readout{top:65px;right:20px;min-width:160px;padding:10px}.reading{font-size:29px;margin:7px 0}.readout-meta{margin-top:8px;padding-top:7px}#ruler-value{font-size:9px;margin-top:8px}footer{bottom:8px}.footnotes{font-size:7px}#help{padding:18px 23px;width:410px}#help h2{font-size:18px;margin-bottom:13px}#help p{margin:9px 0;font-size:11px}#help p span{font-size:10px}}
@media(max-width:520px) and (orientation:portrait){.experiment-title{top:90px}h1{font-size:18px}.readout{top:83px;min-width:135px;right:12px;padding:10px}.reading{font-size:29px}.readout-label span{font-size:5.7px}.readout-meta{gap:8px;display:block}#column-value{margin-left:9px}#ruler-value{max-width:130px;font-size:8px}#object-labels small{letter-spacing:0}.footnotes{font-size:7px}}
@media(prefers-reduced-motion:reduce){.setup-orbit span{animation:none}}

/* Guided and free laboratory share the same physical interaction model. */
#guide-overlay{position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.lab-controls{position:fixed;z-index:9;top:21px;left:50%;transform:translateX(-50%);display:flex;gap:7px;align-items:center}
.lab-controls button{margin:0;background:#0b222bdd;border-color:#9ddfc34d;padding:8px 13px;border-radius:11px;font-size:11px;line-height:1.35;box-shadow:0 5px 22px #0002}
.lab-controls button small{display:block;font:7px Arial,sans-serif;letter-spacing:1px;color:#a8c6b7;margin-top:3px}
.lab-controls #help-toggle{height:37px;width:33px;padding:0;font:18px Arial,sans-serif;color:#d3eddf}
.lab-controls button[aria-pressed=false]{border-color:#ffffff30;color:#c5d4cf}
#tutorial-card{position:fixed;z-index:5;left:25px;top:205px;width:274px;padding:16px 17px;background:#0b242ce8;border:1px solid #a1dec32e;border-radius:15px;backdrop-filter:blur(15px);pointer-events:none;box-shadow:0 18px 50px #0002}
@media(min-width:1151px) and (max-aspect-ratio:8/5){#tutorial-card{left:18px;width:215px;padding:12px}#tutorial-card #guide-title{font-size:14px}}
.guide-caption{display:flex;justify-content:space-between;font-size:10px;color:var(--warm);border-bottom:1px solid #ffffff15;padding-bottom:9px}.guide-caption span:last-child{color:#92b4a4;font-size:9px}
#guide-title{font-size:16px;line-height:1.7;font-weight:500;color:#def4e7;margin:12px 0 4px}
#guide-english{font:10px/1.6 Arial,sans-serif;color:#a8c3b5;margin:0 0 10px}
#guide-detail{font-size:11px;line-height:1.9;color:#c0d5c8;margin:8px 0}
.guide-next{border-top:1px solid #ffffff14;padding-top:10px;margin-top:10px}.guide-next small{display:block;font-size:8px;letter-spacing:.7px;color:var(--warm);margin-bottom:4px}.guide-next span{font-size:10px;line-height:1.8;color:#abc7b8}
#lesson-progress{display:flex;justify-content:space-between;list-style:none;margin:14px 0 10px;padding:0;gap:4px}
#lesson-progress li{border:1px solid #ffffff24;color:#71998a;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;font:9px Arial,sans-serif}
#lesson-progress li.current{background:#92ebce22;border-color:#92ebce;color:#c8f7e4}#lesson-progress li.done{color:#92ebce;border-color:#92ebce4a;background:#92ebce0b}
.mode-hint{font-size:8px;color:#91b3a4}.free-lab .footnotes{margin-top:0}
#ruler-lens{position:fixed;z-index:6;width:204px;background:#091f28ed;border:1px solid #eaca9466;border-radius:14px;padding:12px 13px;pointer-events:none;backdrop-filter:blur(16px);box-shadow:0 15px 50px #0003}
.lens-title{font-size:10px;color:#d5e7d9}.lens-title small{display:block;color:#8fb1a2;font:7px Arial,sans-serif;letter-spacing:1.3px;margin-top:4px}
.lens-value{font:30px Arial,sans-serif;color:#eaca94;margin:9px 0 1px}.lens-value small{font-size:11px;color:#bccfc2;margin-left:5px}
#scale-lens{display:block;width:100%;height:114px;margin:0}
#zero-alignment{font-size:9px;line-height:1.7;color:#eaca94;margin:6px 0 0}#ruler-lens.aligned{border-color:#92ebce70}#ruler-lens.aligned .lens-value,#ruler-lens.aligned #zero-alignment{color:#aaf2d1}
@media(max-width:1150px){#tutorial-card{top:auto;bottom:45px;left:18px;width:245px;padding:12px 14px}#guide-title{font-size:14px;margin:8px 0 3px}#guide-detail{font-size:10px;margin:6px 0}.guide-next span{font-size:9px}#lesson-progress{margin:10px 0 6px}#lesson-progress li{width:19px;height:19px}#guide-english{font-size:9px}.guide-caption{font-size:9px;padding-bottom:6px}.mode-hint{font-size:7px}}
@media(max-width:900px){.lab-controls{top:70px;left:auto;right:17px;transform:none}.lab-controls button{font-size:10px;padding:7px 10px}.lab-controls #help-toggle{height:34px;width:29px}#tutorial-card{left:16px;right:16px;bottom:40px;top:auto;width:auto;padding:10px 14px;max-width:660px;margin:auto}#tutorial-card .guide-caption,#guide-english,#tutorial-card .mode-hint,#lesson-progress{display:none}#guide-title{font-size:12px;margin:0 0 2px;line-height:1.5}#guide-detail{font-size:9px;line-height:1.6;margin:3px 0}.guide-next{padding-top:4px;margin-top:4px;display:flex;gap:8px;align-items:baseline}.guide-next small{display:inline;white-space:nowrap;font-size:7px;margin:0}.guide-next span{font-size:8px;line-height:1.5}#ruler-lens{width:164px;padding:10px}.lens-value{font-size:25px}#scale-lens{height:85px}.lens-title{font-size:9px}#zero-alignment{font-size:8px}}
@media(max-height:600px) and (min-width:901px){#tutorial-card{top:160px;bottom:auto;width:235px;left:18px}#guide-title{font-size:13px}#guide-detail{font-size:10px}#guide-english{font-size:9px}.guide-next span{font-size:9px}#lesson-progress{margin-top:9px}.lab-controls{top:12px}}
@media(max-width:520px) and (orientation:portrait){.lab-controls{top:69px;right:13px}#tutorial-card{bottom:40px;padding:11px 13px}#guide-title{font-size:12px}#guide-detail{font-size:10px}.guide-next span{font-size:9px}.readout{top:130px;right:13px;min-width:142px}#ruler-lens{width:164px}.experiment-title{top:89px}.footnotes{font-size:7px}#ruler-label small{display:none}}
@media(max-height:600px) and (min-width:601px){
  .lab-controls{top:11px;left:50%;right:auto;transform:translateX(-50%)}
  #tutorial-card{left:18px;right:auto;top:137px;bottom:auto;width:215px;margin:0;padding:10px 12px}
  #tutorial-card .guide-caption,#tutorial-card .mode-hint,#lesson-progress{display:none}
  #guide-title{font-size:12px;margin:0 0 3px;line-height:1.6}#guide-detail{font-size:9px;line-height:1.7}
  #guide-english{font-size:8px;line-height:1.5;margin:0 0 5px}.guide-next{display:block;padding-top:5px;margin-top:6px}.guide-next span{font-size:8px}
  .readout{padding:9px;min-width:150px}.reading{font-size:27px;margin:5px 0}.readout-meta{padding-top:5px;margin-top:6px;font-size:8px}#ruler-value{font-size:8px;margin-top:5px;max-width:145px}
  #ruler-lens{width:150px;padding:8px 10px}.lens-title{font-size:8px}.lens-title small{font-size:6px;margin-top:3px}.lens-value{font-size:23px;margin:5px 0 1px}#scale-lens{height:64px}#zero-alignment{font-size:7px;margin:4px 0 0}
}
