/* Mørk tavle i 3Blue1Brown-ånd: emnemeny til venstre, scene i 16:10 med kontrollpanel til høyre, forklaring og oppgaver under. Én bevisst mørk utgave. */
:root{
  color-scheme: dark;
  --bg:#12161B; --bg-2:#181D24; --bg-3:#202832; --stage:#0C0F13;
  --line:#2A323C; --line-2:#3B4652;
  --fg:#ECEFF1; --fg-2:#A9B4BF; --fg-3:#717E8B;
  --blue:#58C4DD; --yellow:#F4D345; --teal:#5CD0B3; --green:#83C167; --red:#FC6255;
  --gold:#F0AC5F; --purple:#B189C6; --pink:#E07AC8; --grey:#8C99A6;
  --ma:#58C4DD; --fy:#F4D345; --ki:#FC6255; --na:#83C167;
  --f-display:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-body:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r:6px;
  --side:280px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{background:var(--bg);color:var(--fg);font:16px/1.55 var(--f-body);margin:0}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
h1,h2,h3{text-wrap:balance}
.mono{font-family:var(--f-mono)}
.katex{font-size:1.12em}
.katex-display{margin:.2em 0!important;overflow-x:auto;overflow-y:hidden;padding-block:6px}
.live .katex-display{margin:0!important}
.rawtex{font-family:var(--f-mono);font-size:13px;color:var(--fg-2)}

/* ---------- toppfelt ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;
  padding:10px 16px;background:var(--bg);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:6px}
.brand svg{flex:none}
.brand b{font:italic 500 23px/1 var(--f-display);letter-spacing:.005em}
.subj-tabs{display:flex;gap:4px;flex-wrap:wrap}
.subj-tabs button{display:flex;align-items:center;gap:7px;border:1px solid transparent;background:transparent;padding:6px 11px;border-radius:999px;cursor:pointer;color:var(--fg-2);font-size:14.5px}
.subj-tabs button:hover{color:var(--fg);border-color:var(--line-2)}
.subj-tabs button[aria-pressed="true"]{color:var(--fg);background:var(--bg-3);border-color:var(--line-2)}
.sdot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--fg-3));flex:none}
.top-right{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{position:relative}
.search input{width:min(260px,62vw);background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);padding:7px 10px 7px 32px;font-size:14.5px}
.search input::placeholder{color:var(--fg-3)}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none}
.tbtn{border:1px solid var(--line-2);background:transparent;padding:6px 12px;border-radius:var(--r);cursor:pointer;font-size:14px;text-decoration:none;color:var(--fg-2);display:inline-flex;align-items:center;gap:7px}
.tbtn:hover{color:var(--fg);border-color:var(--fg-3)}
#navBtn{display:none}

/* ---------- skall ---------- */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);gap:32px;max-width:1560px;margin:0 auto;padding-inline:16px}
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 62px);align-self:start;max-height:calc(100vh - 70px);overflow:auto;padding-block:20px 40px;scrollbar-width:thin}
.side h4{font:700 11px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin:18px 0 8px}
.filters{display:flex;flex-wrap:wrap;gap:5px}
.chip{border:1px solid var(--line-2);background:transparent;padding:4px 9px;border-radius:999px;cursor:pointer;font:500 12.5px/1.2 var(--f-mono);color:var(--fg-2)}
.chip:hover{color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.mlist{display:flex;flex-direction:column;gap:2px;margin-top:16px}
.mlist summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding:7px 9px;border-radius:5px;user-select:none}
.mlist summary::-webkit-details-marker{display:none}
.mlist summary::after{content:"";width:6px;height:6px;border-right:1.6px solid var(--fg-3);border-bottom:1.6px solid var(--fg-3);transform:rotate(-45deg);margin-left:4px;transition:transform .15s;flex:none}
.mlist details[open]>summary::after{transform:rotate(45deg)}
.mlist summary:hover{background:var(--bg-2)}
.mlist summary .n{margin-left:auto;font:11px/1 var(--f-mono);color:var(--fg-3)}
.mgroup>summary{font:700 11px/1.2 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.tgroup>summary{font-size:14px;color:var(--fg);font-weight:700;line-height:1.3}
.mlist .gi{display:flex;flex-direction:column;gap:1px;padding:2px 0 10px}
.tgroup .gi{margin-left:10px;padding-left:6px;border-left:1px solid var(--line)}
.mlist h6{font:700 10.5px/1.3 var(--f-body);letter-spacing:.06em;color:var(--fg-3);margin:10px 9px 3px}
.tfilters,.tema-bar{gap:6px}
.chip.tchip{font:500 13px/1.25 var(--f-body);padding:5px 10px;text-align:left}
.chip.tchip .n{font:11px var(--f-mono);color:var(--fg-3);margin-left:3px}
.chip.tchip[aria-pressed="true"] .n{color:var(--bg-3)}
.tema-bar{margin:-4px 0 22px}
.gsec+.gsec{margin-top:30px}
.gsec h3{display:flex;align-items:baseline;gap:10px;font:500 1.3rem/1.2 var(--f-display);margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.gsec h3 .sdot{align-self:center}
.gsec h3 button{font:inherit;background:none;border:0;padding:0;cursor:pointer;color:var(--fg);text-align:left}
.gsec h3 button:hover{color:var(--yellow)}
.gsec h3>span:last-child{font:12px var(--f-mono);color:var(--fg-3)}
.mi{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:baseline;text-decoration:none;padding:6px 9px;border-radius:5px;font-size:14px;color:var(--fg-2)}
.mi:hover{background:var(--bg-2);color:var(--fg)}
.mi[aria-current="page"]{background:var(--bg-3);color:var(--fg)}
.mi .mc{font:11px/1 var(--f-mono);color:var(--fg-3);white-space:nowrap}
.empty{color:var(--fg-3);font-size:14px;padding:8px 0}
main{min-width:0;padding-block:24px 64px}

/* ---------- hjem ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:center;padding-block:18px 26px}
.hero h1{font:500 clamp(2.4rem,5vw,4.1rem)/1.02 var(--f-display);letter-spacing:-.01em;margin:0 0 18px}
.hero h1 em{color:var(--yellow);font-style:italic}
.hero p{color:var(--fg-2);font-size:1.12rem;max-width:46ch;margin:0 0 22px}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);padding:9px 16px;border-radius:var(--r);text-decoration:none;font-weight:700;font-size:15px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn:hover{filter:brightness(1.08)}
.hero-fig{display:flex;flex-direction:column;gap:10px;min-width:0}
.hero-canvas{position:relative;width:100%;aspect-ratio:16/9;background:var(--stage);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.hero-canvas canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-cap{display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:var(--fg-3);font-size:13.5px}
.hero-cap label{display:flex;align-items:center;gap:10px;color:var(--fg-2);font-family:var(--f-mono);font-size:12.5px}
.hero-cap input{width:140px}
.sec-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:44px 0 16px}
.sec-h h2{font:500 1.75rem/1.1 var(--f-display);margin:0}
.sec-h p{margin:0;color:var(--fg-3);font-size:14.5px}
.courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px}
.cgrp{border-top:2px solid var(--c);padding-top:12px;min-width:0}
.cgrp h3{display:flex;justify-content:space-between;align-items:baseline;font:500 1.25rem/1.1 var(--f-display);margin:0 0 10px}
.cgrp h3 span{font:12px var(--f-mono);color:var(--fg-3)}
.cbtn{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:8px 2px;cursor:pointer;color:var(--fg-2);font-size:14.5px}
.cbtn:hover{color:var(--fg)}
.cbtn .n{font:12px var(--f-mono);color:var(--fg-3)}
.cbtn[aria-pressed="true"]{color:var(--fg)}
.cbtn[aria-pressed="true"] .n{color:var(--c)}
.ctemas{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:10px;align-items:baseline}
.ctemas>span{font:700 10.5px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-right:2px}
.tlink{background:var(--bg-2);border:1px solid transparent;border-radius:4px;padding:3px 8px;font-size:12.5px;color:var(--fg-2);cursor:pointer;text-align:left}
.tlink:hover{color:var(--fg);border-color:var(--line-2)}
.tlink[aria-pressed="true"]{color:var(--fg);border-color:var(--c)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px 16px}
.card{display:flex;flex-direction:column;gap:9px;text-decoration:none;min-width:0}
.card .th{position:relative;aspect-ratio:16/10;max-width:100%;background:var(--stage);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:border-color .2s}
.card .th canvas{width:100%;height:100%;display:block}
.card:hover .th{border-color:var(--c)}
.card .ct{font:500 1.06rem/1.25 var(--f-display)}
.card .cm{display:flex;gap:8px;align-items:center;font:11.5px/1 var(--f-mono);color:var(--fg-3)}
.teach{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;margin-top:10px}
.teach div{min-width:0}
.teach h3{font:500 1.15rem/1.2 var(--f-display);margin:0 0 6px}
.teach p{margin:0;color:var(--fg-2);font-size:14.5px;max-width:48ch}
kbd{font:12px var(--f-mono);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:1px 5px;color:var(--fg)}

/* ---------- modul ---------- */
.crumbs{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font:500 11.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--fg)}
.mod-head h1{font:500 clamp(1.9rem,3.4vw,2.8rem)/1.06 var(--f-display);margin:12px 0 10px;letter-spacing:-.005em}
.lead{max-width:70ch;color:var(--fg-2);font-size:1.07rem;margin:0 0 20px}
.work{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
.stage{position:relative;width:100%;aspect-ratio:16/10;max-height:calc(100vh - 150px);background:var(--stage);border:1px solid var(--line);border-radius:4px;overflow:hidden;user-select:none;-webkit-user-select:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sbtns{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;opacity:.45;transition:opacity .2s}
.stage:hover .sbtns,.sbtns:focus-within,.stage:fullscreen .sbtns{opacity:1}
@media (hover:none){.sbtns{opacity:.8}}
.ibtn{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(12,15,19,.82);border-radius:var(--r);cursor:pointer;color:var(--fg-2)}
.ibtn:hover{color:var(--fg);border-color:var(--fg-3)}
.hint{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 180px);padding:6px 10px;border-radius:5px;background:rgba(12,15,19,.82);border:1px solid var(--line-2);color:var(--fg-2);font-size:13px;transition:opacity .5s;pointer-events:none}
.hint.gone{opacity:0}
.readouts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ro{display:flex;gap:8px;align-items:baseline;padding:5px 10px;background:var(--bg-2);border-radius:4px;font:13px/1.3 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ro .k{font:italic 15px/1 var(--f-display);color:var(--fg-2)}
.panel{background:var(--bg-2);border-radius:var(--r);padding:16px}
.panel h3,.notes h3{font:700 11px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin:0 0 12px}
.ctl{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;margin-bottom:12px}
.ctl>label,.ctl>.lab{font-size:14px;color:var(--fg-2)}
.ctl>label i,.ctl>.lab i{font-family:var(--f-display);font-size:16px;color:var(--fg)}
.ctl output{font:13px var(--f-mono);font-variant-numeric:tabular-nums;color:var(--fg)}
.ctl input[type=range]{grid-column:1/-1}
.ctl .num{width:9.5em;text-align:right;background:transparent;border:0;border-bottom:1px dashed var(--line-2);border-radius:0;padding:1px 2px;font:13px var(--f-mono);font-variant-numeric:tabular-nums;color:var(--fg);cursor:text}
.ctl .num:hover{border-bottom-color:var(--fg-3)}
.ctl .num:focus{outline:none;background:var(--bg);border:1px solid var(--yellow);border-radius:4px;padding:3px 6px}
.cmsg{grid-column:1/-1;display:block;color:var(--gold);font-size:12.5px;line-height:1.35;margin-top:2px}
.chelp{grid-column:1/-1;display:block;color:var(--fg-3);font-size:12px;line-height:1.4;margin-top:4px}
.ctl.data,.ctl.func{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.ctl.data textarea{width:100%;resize:vertical;min-height:52px;background:var(--bg);border:1px solid var(--line-2);border-radius:4px;padding:7px 8px;font:13px/1.45 var(--f-mono);color:var(--fg)}
.ctl.data textarea:focus,.fxrow input:focus{outline:none;border-color:var(--yellow)}
.ctl .apply{align-self:flex-start;border:1px solid var(--line-2);background:var(--bg-3);padding:6px 11px;border-radius:5px;cursor:pointer;font-size:13.5px}
.ctl .apply:hover{border-color:var(--fg-3)}
.fxrow{display:flex;align-items:center;gap:6px}
.fxrow span{font:italic 16px var(--f-display);color:var(--fg-2);white-space:nowrap}
.fxrow input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line-2);border-radius:4px;padding:6px 8px;font:13.5px var(--f-mono);color:var(--fg)}
.fxrow .apply{align-self:auto}
.ctl .seg,.ctl select{grid-column:1/-1}
.seg{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.seg button{padding:5px 9px;border:1px solid var(--line-2);background:transparent;border-radius:4px;font-size:13.5px;cursor:pointer;color:var(--fg-2);line-height:1.25}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ctl select{margin-top:4px;background:var(--bg);border:1px solid var(--line-2);border-radius:4px;padding:6px 8px;font-size:14px}
.ctl.chk{display:flex;gap:9px;align-items:center;cursor:pointer;font-size:14px;color:var(--fg-2)}
.ctl.chk input{width:17px;height:17px;accent-color:var(--yellow);margin:0}
.ctl.btns{display:flex;flex-wrap:wrap;gap:6px}
.ctl.btns button{border:1px solid var(--line-2);background:var(--bg-3);padding:6px 11px;border-radius:5px;cursor:pointer;font-size:13.5px}
.ctl.btns button:hover{border-color:var(--fg-3)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;margin:0;cursor:pointer;--fill:50%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(var(--blue),var(--blue)) 0/var(--fill) 100% no-repeat,var(--line-2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:var(--fg);border:3px solid var(--bg-2);box-shadow:0 0 0 1.5px var(--blue)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line-2)}
input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--blue)}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--fg);border:3px solid var(--bg-2);box-shadow:0 0 0 1.5px var(--blue)}
.live{margin-top:6px;padding-top:12px;border-top:1px solid var(--line);color:var(--fg);min-height:20px}
.live:empty{display:none}
.reset-p{background:none;border:0;padding:0;color:var(--fg-3);font-size:13px;text-decoration:underline;cursor:pointer}
.reset-p:hover{color:var(--fg)}
.notes{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:28px;margin-top:30px}
.notes>section{min-width:0}
.about p{margin:0 0 12px;max-width:64ch;color:var(--fg-2)}
.about p strong{color:var(--fg);font-weight:700}
.formulas .f{padding:8px 0;border-bottom:1px solid var(--line);overflow-x:auto}
.formulas .f:last-child{border-bottom:0}
.tasks ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:t}
.tasks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:14.5px;color:var(--fg-2)}
.tasks input{width:17px;height:17px;margin:3px 0 0;accent-color:var(--green)}
.tasks li.done label{color:var(--fg-3);text-decoration:line-through;text-decoration-color:var(--fg-3)}
.share{margin-top:18px;font-size:13px;color:var(--fg-3)}
.share code{font-family:var(--f-mono);color:var(--fg-2);background:var(--bg-2);padding:2px 6px;border-radius:4px;word-break:break-all}
.share button{margin-left:6px}
.prevnext{display:flex;justify-content:space-between;gap:16px;margin-top:40px;padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
.prevnext a{text-decoration:none;display:flex;flex-direction:column;gap:4px;max-width:48%}
.prevnext a span{font:11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.prevnext a b{font:500 1.1rem/1.2 var(--f-display)}
.prevnext a:last-child{text-align:right;margin-left:auto}
.prevnext a:hover b{color:var(--yellow)}

/* ---------- læreplankart ---------- */
.plan-intro{max-width:70ch;color:var(--fg-2)}
.plan{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:26px 30px;margin-top:22px}
.pcourse{border-top:2px solid var(--c);padding-top:12px;min-width:0}
.pcourse h3{font:500 1.35rem/1.1 var(--f-display);margin:0 0 4px}
.pcourse .meta{font:11.5px var(--f-mono);color:var(--fg-3);margin-bottom:10px;letter-spacing:.04em}
.ptopic{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;padding:8px 0;border-bottom:1px solid var(--line)}
.ptopic>span{font-size:14.5px;color:var(--fg)}
.ptopic .links{display:flex;flex-wrap:wrap;gap:5px}
.ptopic a{font-size:12.5px;text-decoration:none;padding:3px 8px;border-radius:4px;background:var(--bg-2);color:var(--fg-2)}
.ptopic a:hover{color:var(--fg);background:var(--bg-3)}
.ptopic .none{font-size:12.5px;color:var(--fg-3);font-style:italic}

/* ---------- bunntekst ---------- */
.foot{margin-top:72px;padding-top:20px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px 40px;color:var(--fg-3);font-size:13.5px}
.foot p{margin:0 0 8px;max-width:62ch}
.foot b{font:italic 500 17px/1.2 var(--f-display);color:var(--fg-2)}
.foot a{color:var(--fg-2)}
.foot a:hover{color:var(--fg)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
noscript p{max-width:60ch;margin:40px auto;padding-inline:16px;color:var(--fg-2)}

/* ---------- tavlemodus ---------- */
body.board .side,body.board .top .subj-tabs,body.board .top .search,body.board .lead,body.board .notes,body.board .prevnext,body.board .crumbs,body.board .foot{display:none}
body.board .shell{grid-template-columns:minmax(0,1fr);max-width:none}
body.board main{padding-block:10px 20px}
body.board .mod-head h1{font-size:1.6rem;margin:4px 0 10px}
body.board .work{grid-template-columns:minmax(0,1fr) 310px}
body.board .stage{aspect-ratio:auto;height:calc(100vh - 150px);max-height:none}

@media (max-width:1240px){
  .work{grid-template-columns:minmax(0,1fr) 290px}
  .notes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .teach{grid-template-columns:repeat(3,minmax(0,1fr))}
  .notes .about{grid-column:1/-1}
}
@media (max-width:1060px){
  .shell{grid-template-columns:minmax(0,1fr)}
  #navBtn{display:inline-flex}
  .side{position:fixed;inset:0 auto 0 0;width:min(340px,88vw);max-height:none;height:100%;z-index:40;background:var(--bg);border-right:1px solid var(--line);padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 40px;transform:translateX(-102%);transition:transform .25s}
  body.nav-open .side{transform:none}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:35}
  .work{grid-template-columns:minmax(0,1fr)}
  body.board .work{grid-template-columns:minmax(0,1fr)}
  .courses{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .hero{grid-template-columns:minmax(0,1fr);gap:20px}
  .notes{grid-template-columns:minmax(0,1fr)}
  .teach{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:minmax(0,1fr)}
  .subj-tabs{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .top-right{margin-left:auto}
  .search input{width:min(220px,48vw)}
}
@media (max-width:600px){
  .stage{aspect-ratio:1/1.12}
  .courses{grid-template-columns:minmax(0,1fr)}
  .hint{max-width:calc(100% - 140px)}
  body.board .stage{height:auto;aspect-ratio:1/1.12}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}