:root{color-scheme:light;--ink:#183b34;--muted:#5d756c;--green:#167553;--dark:#123f35;--paper:#f5f8f3;--line:#d9e3da;--gold:#bc6e22;--panel:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #d49b3e}button{border:1px solid var(--line);border-radius:7px;background:white;color:var(--ink);padding:9px 12px;cursor:pointer;min-height:38px;font-weight:600}button:hover{background:#eaf2eb;border-color:#b0c9b7}button[aria-pressed=true]{color:#fff;background:var(--dark);border-color:var(--dark)}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--green);border-color:var(--green);color:white}.outline{background:transparent}.count{font-size:10px;background:#e8f0e7;color:var(--dark);border-radius:9px;padding:2px 5px;margin-left:4px}a{color:var(--green)}[hidden]{display:none!important}
#lab{height:100vh;height:100dvh;display:grid;grid-template-rows:auto auto minmax(150px,1fr) auto auto auto;overflow:hidden}.topbar{background:#fff;display:flex;align-items:center;gap:19px;padding:12px 22px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;padding-right:20px;border-right:1px solid var(--line)}.brand img{width:105px;height:auto}.title h1{font-size:17px;font-weight:650;letter-spacing:-.5px;margin:3px 0 0}.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:750;color:var(--muted)}.topbar nav{display:flex;gap:7px;margin-left:auto}.topbar nav button{font-size:12px}.experiment-bar{display:flex;align-items:center;gap:20px;padding:14px 24px 13px}.experiment-heading{flex:1}.experiment-heading h2{font-size:23px;letter-spacing:-.6px;font-weight:600;margin:3px 0 4px}.experiment-heading p{margin:0;color:var(--muted);font-size:13px}.mode-switch{padding:4px;background:#e5ece3;border:1px solid #d7e2d7;border-radius:10px;display:flex;gap:4px}.mode-switch button{border:0;background:transparent;min-width:95px}.mode-switch button[aria-pressed=true]{background:white;color:var(--dark);box-shadow:0 1px 5px #173d3520}
.bench{position:relative;min-height:0;margin:0 18px;border:1px solid #cedbd0;background:#fcfdf9;border-radius:12px;overflow:hidden;box-shadow:0 3px 12px #163c3505}#stage{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#stage.drawing{cursor:crosshair}.bench-tools{position:absolute;top:12px;left:13px;right:13px;display:flex;justify-content:space-between;gap:8px;pointer-events:none;z-index:2}.tool-group{display:flex;gap:3px;pointer-events:auto}.tool-group button{font-size:11px;padding:6px 10px;min-height:32px;background:#ffffffee}.tool-group button[aria-pressed=true]{background:var(--dark)}.screen-card{position:absolute;right:16px;top:62px;width:176px;padding:12px;border:1px solid #d7e2d9;border-radius:10px;background:#ffffffef;box-shadow:0 4px 15px #103e3210;pointer-events:none}.card-label{font-size:9px;letter-spacing:1px;font-weight:750;display:flex;justify-content:space-between;gap:4px}.card-label span{letter-spacing:0;color:var(--gold)}#screen-image{display:block;width:150px;height:90px;margin-top:7px;background:#1c3029;border-radius:5px}#screen-note{font-size:10px;line-height:1.4;margin:7px 0 0;color:var(--muted)}.bench-hint{position:absolute;left:16px;bottom:9px;font-size:10px;color:#658173;pointer-events:none}.legend{position:absolute;left:17px;top:54px;display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:10px;pointer-events:none;max-width:65%}.legend span:before{content:"";display:inline-block;width:16px;border-top:2px solid #8d9991;margin:0 5px 3px 0}.legend .parallel:before{border-color:#bd7036}.legend .centre:before{border-color:#277b91}.legend .focal:before{border-color:#8272ab}
.readings{display:flex;align-items:center;gap:0;padding:13px 24px 11px}.readings>div{flex:1;padding:0 16px;border-right:1px solid var(--line)}.readings>div:first-child{padding-left:0}.readings span{display:block;font-size:10px;color:var(--muted);margin-bottom:4px}.readings strong{font-size:19px;font-weight:600;letter-spacing:-.4px;font-variant-numeric:tabular-nums}.readings small{font-size:12px;font-weight:400}.readings .prediction strong{font-size:13px;letter-spacing:0}.readings>button{margin-left:20px}.statusbar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:6px 20px;gap:12px;background:#eef3ec;font-size:10px;color:var(--muted)}.selection{display:flex;align-items:center;gap:4px}.selection button{font-size:10px;min-height:28px;padding:5px 8px;border-color:transparent;background:transparent}.selection button[aria-pressed=true]{background:#d9e7da;color:var(--ink)}#status{max-width:42%;text-align:right}.drawing-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 22px 0}.drawing-bar button{font-size:11px;min-height:32px;padding:6px 9px}.drawing-bar label{font-size:10px;color:var(--muted);display:flex;gap:6px;align-items:center}.drawing-bar select{padding:7px;border:1px solid var(--line);border-radius:6px;font-size:11px;background:white}.drawing-bar p{width:100%;font-size:12px;margin:2px 0 0;color:var(--green)}
dialog{border:1px solid #c7d8cb;padding:0;border-radius:15px;box-shadow:0 22px 90px #082b3540;width:min(620px,calc(100vw - 28px));max-height:calc(100dvh - 36px);color:var(--ink);background:white;overflow:hidden}dialog::backdrop{background:#163b3445;backdrop-filter:blur(3px)}dialog[open]{display:flex;flex-direction:column}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:20px 24px;flex:none;background:#f6faf4}.panel-header h2{font-size:22px;letter-spacing:-.6px;margin:4px 0 0;font-weight:600}.panel-header button{font-size:12px;white-space:nowrap}.panel-content{padding:22px 24px;overflow:auto;overscroll-behavior:contain;line-height:1.6}.panel-content>p:first-child{margin-top:0}.panel-content h3{font-size:16px;margin:24px 0 5px}.panel-content h3:first-child{margin-top:0}.muted{font-size:12px;color:var(--muted)}.field{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;margin-bottom:13px}.field input,.field select,textarea{width:100%;background:#fff;border:1px solid #cbd9ce;border-radius:6px;padding:10px;color:var(--ink);font-weight:400}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.toggles{display:grid;gap:9px;border-top:1px solid var(--line);padding-top:15px}.toggles label{display:flex;align-items:center;gap:8px;font-size:13px}input[type=checkbox]{accent-color:var(--green);width:17px;height:17px}.feedback{color:#96541f;font-size:12px}.button-row{display:flex;gap:8px;flex-wrap:wrap}.experiment-card{display:block;text-align:left;width:100%;padding:16px 18px;margin-bottom:10px;border-radius:10px;background:#fcfdf9}.experiment-card strong{font-size:16px;display:block;margin:5px 0}.experiment-card p{font-size:12px;margin:0;color:var(--muted);font-weight:400}.experiment-card.current{border-color:var(--green);background:#f0f7ef}.steps{padding-left:24px;margin-top:0}.steps li{padding-left:6px;margin-bottom:15px}.question{padding:18px;background:#f3f7ef;border:1px solid var(--line);border-radius:10px}.question p{font-size:14px}.question textarea{resize:vertical;min-height:80px}summary{cursor:pointer;font-weight:650;padding:12px 0;color:var(--green)}.misconception{border-left:3px solid #c69045;padding:0 14px;margin:22px 0}.misconception p{font-size:13px;margin:4px 0}.equation{font-family:Georgia,serif;font-size:20px;padding:16px;background:#f3f7ef;border-radius:8px}#notebook{width:min(850px,calc(100vw - 28px))}.table-wrap{overflow:auto;max-height:45vh;border:1px solid var(--line);border-radius:8px;margin:14px 0}table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}th,td{padding:11px 12px;text-align:right;border-bottom:1px solid var(--line)}th{background:#eff4ed;color:var(--muted);font-weight:600}th:first-child,td:first-child{text-align:left}.empty{padding:28px;text-align:center;color:var(--muted)}.toast{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:#123f35;color:white;padding:12px 18px;border-radius:9px;box-shadow:0 8px 30px #123f3530;max-width:90vw;font-size:12px;z-index:20;pointer-events:none;opacity:0}.toast.visible{opacity:1}body.focus-view .title,body.focus-view .experiment-heading .eyebrow,body.focus-view #guide{display:none}body.focus-view .topbar{padding:6px 18px}body.focus-view .experiment-bar{padding:8px 24px}body.focus-view .screen-card{width:190px}body.focus-view #screen-image{width:164px;height:105px}
@media(min-width:1700px){:root{font-size:16px}.title h1{font-size:21px}.experiment-heading h2{font-size:28px}.topbar{padding:18px 28px}.experiment-bar{padding:18px 28px}.bench{margin:0 25px}.screen-card{width:210px}#screen-image{width:184px;height:110px}.readings{padding:18px 30px}.readings strong{font-size:24px}}
@media(max-width:950px){.topbar{gap:12px;padding:10px 14px}.brand{padding-right:12px}.brand img{width:85px}.title h1{font-size:14px}.title .eyebrow{font-size:8px}.topbar nav{gap:4px}.topbar nav button{padding:8px;font-size:11px}.topbar nav .count{display:none}.experiment-bar{padding:12px 16px;gap:12px}.experiment-heading h2{font-size:21px}#guide{font-size:11px;padding:8px}.mode-switch button{min-width:70px;font-size:12px}.readings{padding:12px 16px}.readings>div{padding:0 10px}.readings strong{font-size:17px}.readings>button{margin-left:10px;font-size:11px}.readings .prediction{display:none}.statusbar{padding:5px 12px}#status{font-size:9px}.bench{margin:0 12px}.screen-card{width:145px;padding:9px;top:58px;right:12px}#screen-image{width:125px;height:75px}.card-label{font-size:8px}.legend{gap:8px;font-size:9px;max-width:62%}}
@media(max-width:620px){#lab{grid-template-rows:auto auto minmax(180px,1fr) auto auto auto}.topbar{flex-wrap:wrap;padding:8px 12px;gap:8px}.brand{padding-right:12px}.brand img{width:76px}.title{flex:1}.title h1{font-size:14px}.topbar nav{width:100%;margin:0;justify-content:space-between}.topbar nav button{flex:1;padding:6px;min-height:32px;font-size:10px}.experiment-bar{flex-wrap:wrap;gap:7px;padding:9px 12px}.experiment-heading{flex-basis:100%}.experiment-heading .eyebrow{font-size:8px}.experiment-heading h2{font-size:20px;margin:2px 0}.experiment-heading p{font-size:11px}.mode-switch{padding:2px}.mode-switch button{padding:6px 13px;min-height:29px;font-size:11px}#guide{margin-left:auto;min-height:32px}.bench{margin:0 7px;border-radius:9px}.bench-tools{top:7px;left:7px;right:7px;gap:4px}.tool-group{gap:2px}.tool-group button{font-size:9px;padding:5px 6px;min-height:28px}#teacher{display:none}.screen-card{top:42px;right:7px;width:100px;padding:6px;border-radius:6px}#screen-image{width:86px;height:50px;margin-top:4px}.card-label{font-size:7px;letter-spacing:.5px}.card-label span{display:none}#screen-note{font-size:8px;margin-top:3px;line-height:1.25}.legend{top:45px;left:10px;max-width:65%;gap:5px;font-size:8px}.legend span:last-child{display:none}.legend span:before{width:8px;margin-right:3px}.bench-hint{left:9px;bottom:6px;font-size:8px;max-width:95%}.readings{padding:9px 12px;gap:7px;flex-wrap:wrap}.readings>div{padding:0 6px;flex:1}.readings span{font-size:8px}.readings strong{font-size:15px}.readings small{font-size:9px}.readings>button{margin-left:0;min-height:31px;padding:6px 9px;font-size:10px}.readings>div:nth-child(4){display:none}.statusbar{padding:3px 8px;display:block}.selection{justify-content:space-between}.selection>span{font-size:9px}.selection button{padding:5px;font-size:9px;min-height:29px}#status{display:none}.drawing-bar{padding:8px 10px 0;gap:4px}.drawing-bar button{font-size:9px;padding:5px 7px;min-height:29px}.drawing-bar label{font-size:9px}.drawing-bar select{font-size:10px;padding:5px;max-width:125px}.drawing-bar p{font-size:10px;line-height:1.35}.panel-header{padding:15px}.panel-header h2{font-size:19px}.panel-content{padding:17px}.field-grid{gap:0 10px}dialog{max-height:calc(100dvh - 18px);width:calc(100vw - 18px)}.toast{bottom:45px;max-width:95%;font-size:11px}.field{font-size:11px}}
@media(max-height:570px){#lab{overflow:auto;grid-template-rows:auto auto minmax(180px,1fr) auto auto auto}.topbar{padding:5px 12px}.title .eyebrow{display:none}.brand img{width:70px}.experiment-bar{padding:6px 14px}.experiment-heading .eyebrow{display:none}.experiment-heading h2{font-size:17px}.readings{padding:6px 14px}.screen-card{top:42px;width:110px;padding:6px}#screen-image{width:96px;height:50px}.legend{top:42px}.bench-tools{top:6px}.screen-card #screen-note{font-size:8px}.statusbar{padding:2px 12px}.drawing-bar{padding-top:5px}.drawing-bar p{margin:0}.panel-header{padding:10px 15px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media(max-width:620px) and (max-height:760px){#lab{overflow:auto;grid-template-rows:auto auto minmax(240px,1fr) auto auto auto}.title .eyebrow,.experiment-heading .eyebrow{display:none}.topbar{padding:5px 10px;gap:5px}.title h1{font-size:13px}.experiment-bar{padding:7px 10px;gap:5px}.experiment-heading h2{font-size:17px}.experiment-heading p{font-size:10px}.drawing-bar{padding-top:6px}.drawing-bar p{font-size:9px}.drawing-bar button{min-height:27px;padding:4px 6px}.readings{padding:7px 10px}.readings strong{font-size:13px}}
@media(max-height:570px){.legend{display:none}.screen-card{top:44px}#screen-note{display:none}.bench-hint{font-size:9px}}
@media(min-width:621px) and (max-height:570px){.topbar{padding:4px 12px}.topbar .brand img{width:60px}.topbar .title h1{font-size:13px}.topbar nav button{min-height:28px;font-size:10px;padding:5px 8px}.experiment-bar{padding:4px 14px}.experiment-heading h2{font-size:16px}.experiment-heading p{display:none}.mode-switch{padding:2px}.mode-switch button,#guide{min-height:28px;font-size:11px;padding:5px 9px}.readings{padding:4px 14px}.readings span{font-size:8px}.readings strong{font-size:15px}.readings button{min-height:29px;padding:5px 9px}.statusbar{padding:1px 12px}.selection button{min-height:24px;padding:4px 7px}}