/* DT Classroom shared look for the standalone studio pages (Materials Arena, Design Funnel, Visual Tools): the same cream paper, navy ink,
   yellow accent and card style as the labs (labs/lab-kit.css). Loaded after each page's own <style>, so these rules win.
   Colours are the lab-kit tokens: paper #f3efe6, card #fffdf7, line #d8d0c2, navy #16344c, ink #17212b, muted #56636d, yellow #f3c84b, green #2c9b6c. */
:root{color-scheme:light;--bg:#f3efe6;--panel:#fffdf7;--border:#d8d0c2;--edge:#d8d0c2;--mint:#16344c;--gold:#8a5a00;--muted:#56636d;--white:#17212b;--lime:#16344c;--orange:#8a5a00;--ink:#17212b;--forest:#16344c;--cream:#fffdf7;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#17212b;background:#f3efe6}
body{background:#f3efe6;color:#17212b}
header{background:#f3efe6;border-bottom:1px solid #d8d0c2}
.brand{color:#16344c}
.brand b,.brand span{background:#16344c;color:#fff;border-radius:8px;box-shadow:4px 4px 0 #f3c84b}
.tag,.kicker{color:#16344c;font-family:"JetBrains Mono",ui-monospace,monospace}
header a[style]{color:#16344c!important}
h1,h2,h3{color:#16344c}
h1 span{color:#c47f00!important}
p,.intro p,.tiny,.small,footer,.meta,.muted,.readout small,.material small,.stat small,.pick small,.criteria{color:#56636d}
.card{background:#fffdf7;border:1px solid #d8d0c2;border-radius:12px;box-shadow:5px 5px 0 #d7cebf}
label,.field label{color:#17212b}
select,input[type=number],input[type=text],.field select,.field input[type=number],.field input[type=text]{background:#fff;border:1px solid #bfb6a6;color:#17212b;border-radius:8px}
input[type=range],.field input[type=range]{accent-color:#16344c}
.field output,.status{color:#2463eb}
button,.btn{background:#fff;border:1px solid #d8d0c2;color:#16344c;font-weight:700;border-radius:9px}
button:hover,.btn:hover{background:#fff;border-color:#16344c}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #16344c;outline-offset:2px}
.primary,.print-actions button{background:#16344c;border-color:#16344c;color:#fff;font-weight:800}
.primary:hover,.print-actions button:hover{background:#0f2638;border-color:#0f2638}
.material,.pick,.toolnav button{background:#fff;border:1px solid #d8d0c2;color:#17212b}
.material.active,.pick[aria-pressed=true],.toolnav button[aria-pressed=true]{border-color:#16344c;background:#e8f0f4;color:#16344c;box-shadow:inset 0 0 0 1px #16344c}
.slot{background:#fff;border:1px solid #d8d0c2;color:#17212b}.slot b,.notice b,.spec b{color:#16344c}
.arena{background:#f6f2e8;border:1px solid #d8d0c2}
.stage,.art{background:#ece5d6;border:1px solid #d8d0c2}
.readout,.stat{background:#fff;border:1px solid #d8d0c2}.readout b{color:#16344c}
.bar{background:#e4dccd}.bar i{background:#2c9b6c}
.log{color:#334155}.log div,.history div{border-color:#e4dccd;background:#fff;color:#17212b}
.note,.notice,.challenge{background:#fff7dd;border:1px solid #ead9a0;border-left:3px solid #f3c84b;color:#3b3320;border-radius:9px}
.badge{border-color:#16344c;color:#16344c}
.legend div,.swatch,.spec{color:#17212b}.swatch{background:#fff}
.spec{border-top-color:#d8d0c2}
.meta{color:#56636d}
@media (forced-colors:active){.card,.readout,.stat,.material,.pick,button{border-color:CanvasText}.brand b,.brand span{forced-color-adjust:none}}
button[aria-pressed=true]:not(.primary){background:#16344c;border-color:#16344c;color:#fff}
.pick[aria-pressed=true]{background:#e8f0f4;color:#16344c}
.stat b,.readout b{color:#16344c}
header a[href]:not(.brand){color:#16344c!important}