@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --bg:#0D1115;
  --panel:#151B21;
  --workbench:#192229;
  --border:#303B44;
  --border-soft:#253039;
  --text:#F0F2F3;
  --muted:#89959E;
  --blue:#8FAAFB;
  --blue-dim:#202D4E;
  --fault:#F07870;
  --fault-dim:#382326;
  --success:#79CDA8;
  --success-dim:#1B352D;
  color:var(--text);
  background:var(--bg);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:var(--bg);color:var(--text)}
button,input,select{font:inherit}
button,a,input,select{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.42}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
a{color:inherit}
[hidden]{display:none!important}
.topbar{
  position:relative;z-index:20;height:58px;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:0 18px;border-bottom:1px solid var(--border);background:#10161B
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{
  width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--blue);
  color:var(--blue);font:600 12px 'IBM Plex Mono',monospace
}
.brand strong{display:block;font:700 20px/1 'Barlow Condensed',sans-serif;letter-spacing:1.2px}
.brand small{display:block;margin-top:4px;color:var(--muted);font:500 8px 'IBM Plex Mono',monospace;letter-spacing:1.2px}
.top-context{display:flex;align-items:center;gap:22px;color:var(--muted);font:500 9px 'IBM Plex Mono',monospace;letter-spacing:.6px}
.system-status{color:var(--success)}
.system-status i,.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;background:var(--success)}
.team{text-align:right;font:600 10px 'IBM Plex Mono',monospace;letter-spacing:.5px}
.team small{display:block;margin-top:3px;color:var(--muted);font-weight:400;font-size:8px}
.kicker,.section-tag{margin:0;color:var(--blue);font:500 9px/1.5 'IBM Plex Mono',monospace;letter-spacing:1.15px}

/* Library home */
.home{max-width:1420px;min-height:calc(100vh - 99px);margin:auto;padding:clamp(34px,6vw,82px) clamp(20px,5vw,72px) 70px}
.home-intro{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);align-items:end;gap:70px;padding-bottom:48px}
.home-intro h1{margin:12px 0 0;font:600 clamp(55px,7.3vw,112px)/.82 'Barlow Condensed',sans-serif;letter-spacing:-1px;text-transform:uppercase}
.home-intro h1 span{color:var(--blue)}
.home-intro>p{max-width:420px;margin:0 0 5px;color:#AAB3B9;font-size:16px;line-height:1.65}
.library-header{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:15px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.library-header>div{display:flex;align-items:center;gap:13px;font:600 12px 'IBM Plex Mono',monospace}
.library-header small{padding:4px 7px;border:1px solid #315446;color:var(--success);font:500 8px 'IBM Plex Mono',monospace}
.library-header p{margin:0;color:var(--muted);font-size:12px}
.experiment-list{display:grid;grid-template-columns:1fr 1fr}
.home-lab{
  min-height:164px;display:grid;grid-template-columns:64px minmax(0,1fr) 26px;gap:19px;
  align-items:center;padding:25px 24px;border-bottom:1px solid var(--border);text-decoration:none
}
.home-lab:nth-child(odd){border-right:1px solid var(--border)}
.home-lab:hover{background:var(--panel)}
.home-lab .number{font:500 31px 'Barlow Condensed',sans-serif;color:#5D6A74}
.home-lab .subject{color:var(--blue);font:500 9px 'IBM Plex Mono',monospace;letter-spacing:1px;text-transform:uppercase}
.home-lab h2{margin:7px 0 7px;font:600 28px/1 'Barlow Condensed',sans-serif;letter-spacing:.2px;text-transform:uppercase}
.home-lab p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.home-lab .meta{display:flex;gap:12px;margin-top:13px;color:#A9B3BA;font:500 9px 'IBM Plex Mono',monospace}
.home-lab .arrow{font:28px 'Barlow Condensed',sans-serif;color:var(--blue)}
.roadmap{display:grid;grid-template-columns:280px 1fr;gap:32px;padding:46px 0 0}
.roadmap h2{margin:8px 0 0;font:600 28px 'Barlow Condensed',sans-serif;text-transform:uppercase}
.roadmap-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border)}
.roadmap-list span{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--border);color:#A9B3BA;font-size:12px}
.roadmap-list span:nth-child(odd){padding-right:20px}
.roadmap-list span:nth-child(even){padding-left:20px;border-left:1px solid var(--border)}
.roadmap-list b{color:#66737C;font:500 8px 'IBM Plex Mono',monospace}

/* Workspace frame */
.workspace-shell{
  min-height:calc(100vh - 99px);display:grid;
  grid-template-columns:286px minmax(520px,1fr) 306px;
  align-items:stretch
}
.home-mode .workspace-shell,.home-mode footer{display:none}
body:not(.home-mode) .home{display:none}
.guide,.inspector{min-width:0;background:var(--panel)}
.guide{border-right:1px solid var(--border);transition:width .15s}
.inspector{border-left:1px solid var(--border)}
.panel-bar{
  height:39px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;
  border-bottom:1px solid var(--border);color:#AAB3B9;font:500 9px 'IBM Plex Mono',monospace;letter-spacing:.8px
}
.panel-bar button{width:25px;height:25px;border:1px solid var(--border);background:transparent;color:var(--text);font:18px/1 sans-serif}
.panel-bar>span:last-child{color:var(--success)}
.guide-body{height:calc(100vh - 97px);display:flex;flex-direction:column;overflow:auto}
.back-home{display:block;padding:15px 15px 12px;border-bottom:1px solid var(--border);color:var(--muted);font:500 10px 'IBM Plex Mono',monospace;text-decoration:none}
.back-home:hover{color:var(--blue)}
#lab-nav{display:grid;padding:8px;border-bottom:1px solid var(--border)}
.lab-link{
  display:grid;grid-template-columns:27px 1fr 8px;gap:8px;align-items:center;
  padding:10px 8px;border:1px solid transparent;text-decoration:none
}
.lab-link:hover{background:#1B232A}
.lab-link.active{border-color:#46556A;background:var(--blue-dim)}
.lab-icon{color:#65727C;font:500 11px 'IBM Plex Mono',monospace}
.lab-link.active .lab-icon,.lab-link.active .arrow{color:var(--blue)}
.lab-link strong{display:block;font-size:11px;font-weight:600}
.lab-link small{display:block;margin-top:3px;color:var(--muted);font:400 8px/1.3 'IBM Plex Mono',monospace;text-transform:uppercase}
.lab-link .arrow{color:#62707A}
.notebook{display:flex;flex-direction:column;min-height:0;flex:1}
.notebook-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px 13px 10px}
.notebook-heading span{display:block;color:var(--muted);font:500 8px 'IBM Plex Mono',monospace;letter-spacing:1px}
.notebook-heading strong{display:block;margin-top:5px;font:600 17px 'Barlow Condensed',sans-serif;text-transform:uppercase}
.icon-button,.syllabus-button{border:1px solid var(--border);background:transparent;color:#AEB8BF;font:500 9px 'IBM Plex Mono',monospace}
.icon-button{padding:7px}
.tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:0;padding:0 12px}
.tabs button{
  padding:8px 7px;border:1px solid var(--border);margin:-1px 0 0 -1px;background:transparent;
  color:var(--muted);font-size:10px;text-align:left
}
.tabs button[aria-selected=true]{position:relative;z-index:1;border-color:var(--blue);background:var(--blue-dim);color:var(--text)}
.tabs span{font:500 8px 'IBM Plex Mono',monospace;color:var(--blue)}
#notebook-content{padding:14px 13px 22px;overflow:auto}
.objective,.theory{margin:0 0 15px;color:#B8C0C5;font-size:11px;line-height:1.62}
.procedure{display:grid;gap:13px}
.procedure article{display:grid;grid-template-columns:25px 1fr;gap:9px;padding-top:12px;border-top:1px solid var(--border-soft)}
.procedure b{color:var(--blue);font:500 9px 'IBM Plex Mono',monospace}
.procedure p{margin:0;color:#B8C0C5;font-size:11px;line-height:1.55}
.model-note{padding:10px;border:1px solid var(--border);background:#11171C;color:#AEB7BD;font-size:10px;line-height:1.6}
.graph{width:100%;height:180px;border:1px solid var(--border);background:#10161B}
.graph-note{margin:8px 0;color:var(--muted);font:9px/1.6 'IBM Plex Mono',monospace}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;white-space:nowrap;font:9px 'IBM Plex Mono',monospace}
th,td{padding:8px 6px;border-bottom:1px solid var(--border);text-align:left}
th{color:var(--muted);font-weight:500}
.empty{padding:22px 8px;text-align:center;color:var(--muted);font:10px/1.5 'IBM Plex Sans',sans-serif}
.table-actions{display:flex;justify-content:space-between;gap:8px;margin-top:8px}
.table-actions button{border:0;background:none;color:var(--blue);font-size:9px}
.quiz{padding:0 0 13px;margin:0 0 13px;border-bottom:1px solid var(--border)}
.quiz strong{font-size:11px;line-height:1.5}
.quiz .answers{display:grid;gap:5px;margin-top:8px}
.quiz button{padding:7px;border:1px solid var(--border);background:#11171C;color:var(--text);font-size:10px;text-align:left}
.quiz button.correct{border-color:var(--success);background:var(--success-dim)}
.quiz button.wrong{border-color:var(--fault);background:var(--fault-dim)}
.quiz p{color:var(--muted);font-size:10px;line-height:1.5}
.syllabus-button{margin:auto 12px 14px;padding:10px;text-align:left}
.syllabus-button:hover,.icon-button:hover{border-color:var(--blue);color:var(--blue)}
.guide-collapsed .workspace-shell{grid-template-columns:42px minmax(520px,1fr) 306px}
.guide-collapsed .guide-body{display:none}
.guide-collapsed .guide .panel-bar{padding:0;justify-content:center}
.guide-collapsed .guide .panel-bar>span{display:none}
.guide-collapsed #guide-toggle{transform:rotate(180deg)}

/* Main workbench */
.workspace{min-width:0;padding:18px;background:var(--bg)}
.workspace-title{min-height:68px;display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:14px}
.workspace-title h1{margin:3px 0 3px;font:600 clamp(27px,3vw,41px)/1 'Barlow Condensed',sans-serif;letter-spacing:.3px;text-transform:uppercase}
.workspace-title>div>p:last-child{margin:0;color:var(--muted);font-size:12px}
.workspace-meta{display:flex;align-items:center;gap:10px;padding-bottom:5px}
.workspace-meta span{font:600 23px 'Barlow Condensed',sans-serif;color:#6D7A83}
.workspace-meta span small{font:500 10px 'IBM Plex Mono',monospace}
.workspace-meta b{padding:5px 7px;border:1px solid #315446;color:var(--success);font:500 8px 'IBM Plex Mono',monospace}
.workbench{position:relative;overflow:hidden;border:1px solid var(--border);background:var(--workbench)}
.bench-toolbar{height:40px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;padding:0 10px;border-bottom:1px solid var(--border);background:#11171C}
.bench-toolbar>span:first-child{font:500 9px 'IBM Plex Mono',monospace;white-space:nowrap}
.bench-toolbar>span:nth-child(2){overflow:hidden;color:#7E8B94;font:400 9px 'IBM Plex Mono',monospace;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.bench-toolbar>div{display:flex;gap:5px}
.bench-toolbar button{padding:5px 7px;border:1px solid var(--border);background:transparent;color:#B6C0C6;font:500 9px 'IBM Plex Mono',monospace}
.bench-toolbar button:hover,.bench-toolbar button[aria-pressed=true]{border-color:var(--blue);color:var(--blue)}
#scene{height:clamp(490px,calc(100vh - 288px),720px);touch-action:none}
#scene canvas{display:block;width:100%;height:100%}
.bench-caption{height:27px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-top:1px solid var(--border);background:#11171C;color:#75838C;font:500 8px 'IBM Plex Mono',monospace}
#loading{position:absolute;inset:40px 0 27px;display:grid;place-items:center;background:var(--workbench);color:var(--blue);font:500 10px 'IBM Plex Mono',monospace}
.readings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:10px;border:1px solid var(--border);background:#11171C}
.readings>div{min-width:0;padding:10px 12px;border-right:1px solid var(--border)}
.readings>div:last-child{border:0}
.readings small{display:block;color:#74818A;font:500 8px 'IBM Plex Mono',monospace;letter-spacing:.6px}
.readings strong{display:block;margin-top:5px;color:var(--text);font:500 clamp(17px,2vw,24px) 'IBM Plex Mono',monospace;white-space:nowrap}
.readings i{font:400 10px 'IBM Plex Mono',monospace;color:var(--muted);font-style:normal}
.diagnostic{display:flex;gap:11px;align-items:flex-start;margin-top:9px;padding:10px 12px;border:1px solid #633537;background:var(--fault-dim)}
.diagnostic.good{border-color:#315446;background:var(--success-dim)}
.diagnostic-symbol{width:19px;height:19px;display:grid;place-items:center;flex-shrink:0;border:1px solid var(--fault);border-radius:50%;color:var(--fault);font:600 10px 'IBM Plex Mono',monospace}
.diagnostic.good .diagnostic-symbol{border-color:var(--success);color:var(--success)}
.diagnostic strong{color:var(--fault);font:600 9px 'IBM Plex Mono',monospace;letter-spacing:.5px}
.diagnostic.good strong{color:var(--success)}
.diagnostic p{margin:3px 0 0;color:#B8C0C5;font-size:11px;line-height:1.45}
#precision-view{overflow:auto;margin-top:10px;border:1px solid var(--border);background:#10161B}
.section-label{display:flex;justify-content:space-between;gap:10px;padding:9px 11px;border-bottom:1px solid var(--border);color:var(--muted);font:500 9px 'IBM Plex Mono',monospace}
#precision-canvas{display:block;width:100%;height:180px;touch-action:none;filter:brightness(.72) contrast(1.08)}
#precision-help{margin:0;padding:8px 11px 11px;color:var(--muted);font-size:10px;line-height:1.5}

/* Inspector */
.inspector-body{height:calc(100vh - 97px);overflow:auto;padding:14px}
.inspect-card{padding:12px;border:1px solid var(--border);background:#11171C}
.inspect-card h2{margin:8px 0 6px;font:600 19px/1.1 'Barlow Condensed',sans-serif;text-transform:uppercase}
.inspect-card p,.control-heading p{margin:0;color:var(--muted);font-size:10px;line-height:1.55}
.control-heading{padding:20px 0 10px}
.control-heading p{margin-top:6px}
.control{padding:12px 0;border-top:1px solid var(--border-soft)}
.control label,.control>strong{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#D8DDE0;font-size:11px;font-weight:500}
.control output{color:var(--blue);font:500 9px 'IBM Plex Mono',monospace;white-space:nowrap}
.control p,.control-note{margin:6px 0 0;color:var(--muted);font-size:10px;line-height:1.5}
.control input[type=range]{width:100%;height:4px;margin:13px 0 1px;accent-color:var(--blue)}
.control input[type=checkbox]{width:17px;height:17px;margin:0;accent-color:var(--blue)}
.control input[type=number],.control select{width:100%;margin-top:8px;padding:8px;border:1px solid var(--border);border-radius:0;background:#0F1419;color:var(--text);font:10px 'IBM Plex Mono',monospace}
.control button{padding:8px;border:1px solid var(--border);border-radius:0;background:#11171C;color:#CBD2D6;font-size:10px}
.control button:hover{border-color:var(--blue);color:var(--blue)}
.control button.wide{width:100%;margin-top:7px}
.control .row{display:flex;gap:6px;margin-top:8px}
.control .row>*{flex:1;min-width:0}
.control details{margin-top:8px}
.control summary{cursor:pointer}
.wire-guide{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:9px}
.wire-guide button{padding:6px 4px;text-align:left;white-space:nowrap;font:500 8px 'IBM Plex Mono',monospace}
.wire-guide button.connected{border-color:#39745C;background:var(--success-dim);color:var(--success)}
.primary{width:100%;display:flex;justify-content:space-between;padding:11px 12px;margin-top:14px;border:1px solid var(--blue);border-radius:0;background:var(--blue);color:#10151A;font:600 10px 'IBM Plex Mono',monospace}
.primary:not(:disabled):hover{background:#A6BAFC}
.reset-button{width:100%;padding:10px 0;margin-top:8px;border:0;border-bottom:1px solid var(--border);background:none;color:#7D8991;font:500 9px 'IBM Plex Mono',monospace;text-align:left}
.toast{color:var(--blue)!important}

footer{height:41px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;border-top:1px solid var(--border);background:#10161B;color:#68757E;font:500 8px 'IBM Plex Mono',monospace;letter-spacing:.7px}
dialog{width:calc(100% - 30px);max-width:690px;padding:25px;border:1px solid var(--border);background:var(--panel);color:var(--text);box-shadow:0 25px 80px #000b}
dialog::backdrop{background:#05080bdd}
dialog h2{margin:9px 0;font:600 32px 'Barlow Condensed',sans-serif;text-transform:uppercase}
dialog p{color:#AEB7BD;font-size:12px;line-height:1.6}
.dialog-close{float:right;border:1px solid var(--border);background:transparent;color:var(--text);font-size:20px}
#curriculum-list article{padding:12px 0;border-top:1px solid var(--border)}
#curriculum-list h3{margin:5px 0;font:600 17px 'Barlow Condensed',sans-serif;text-transform:uppercase}
#curriculum-list small{color:var(--blue);font:500 9px 'IBM Plex Mono',monospace}
dialog a{color:var(--blue);font:500 10px 'IBM Plex Mono',monospace}

@media(max-width:1180px){
  .workspace-shell{grid-template-columns:250px minmax(470px,1fr) 270px}
  .guide-collapsed .workspace-shell{grid-template-columns:42px minmax(470px,1fr) 270px}
  .workspace{padding:13px}
  #scene{height:clamp(440px,calc(100vh - 275px),650px)}
}
@media(max-width:930px){
  .top-context{display:none}
  .workspace-shell,.guide-collapsed .workspace-shell{grid-template-columns:1fr}
  .guide{border:0;border-bottom:1px solid var(--border)}
  .guide .panel-bar{display:flex}
  .guide-body{height:auto;max-height:460px}
  .guide-collapsed .guide-body{display:none}
  .guide-collapsed .guide .panel-bar{justify-content:space-between;padding:0 12px}
  .guide-collapsed .guide .panel-bar>span{display:block}
  .inspector{border-left:0;border-top:1px solid var(--border)}
  .inspector-body{height:auto}
  #lab-nav{grid-template-columns:1fr 1fr}
  .notebook{min-height:330px}
  .home-intro{grid-template-columns:1fr;gap:28px}
  .home-intro>p{max-width:650px}
}
@media(max-width:620px){
  .topbar{height:54px;padding:0 11px}
  .brand-mark{width:28px;height:28px}
  .brand strong{font-size:17px}
  .brand small{font-size:7px}
  .team{font-size:8px}.team small{display:none}
  .home{padding:34px 14px 45px}
  .home-intro{padding-bottom:31px}
  .home-intro h1{font-size:58px}
  .home-intro>p{font-size:14px}
  .library-header{align-items:start}
  .library-header p{display:none}
  .experiment-list{grid-template-columns:1fr}
  .home-lab,.home-lab:nth-child(odd){min-height:134px;padding:19px 10px;border-right:0}
  .home-lab{grid-template-columns:42px 1fr 20px}
  .home-lab h2{font-size:24px}
  .roadmap{grid-template-columns:1fr;gap:20px}
  .roadmap-list{grid-template-columns:1fr}
  .roadmap-list span:nth-child(even){padding-left:0;border-left:0}
  .workspace{padding:10px}
  .workspace-title{align-items:start}
  .workspace-title h1{font-size:29px}
  .workspace-title>div>p:last-child{font-size:10px}
  .workspace-meta b{display:none}
  .bench-toolbar{height:auto;min-height:63px;grid-template-columns:1fr auto;padding:7px}
  .bench-toolbar>span:nth-child(2){grid-column:1/-1;grid-row:2;text-align:left}
  #scene{height:390px}
  #loading{inset:63px 0 27px}
  .readings{grid-template-columns:1fr 1fr}
  .readings>div:nth-child(2){border-right:0}
  .readings>div:nth-child(-n+2){border-bottom:1px solid var(--border)}
  .readings strong{font-size:18px}
  #lab-nav{grid-template-columns:1fr}
  .wire-guide button{font-size:8px}
  footer{font-size:7px}
  footer span:last-child{display:none}
  #precision-view[data-kind=mechanical] #precision-canvas{min-width:700px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.guide{transition:none}}