:root{--ink:#14213d;--muted:#5b6475;--bg:#f5f6f8;--card:#fff;--red:#d7262e;--blue:#1d5fbf;--yellow:#ffc928;--line:#e1e4ea;--green:#1f8a4c}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Heebo,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px}
a{color:var(--blue)}
[hidden]{display:none!important}
kbd{background:#fff;border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;padding:0 .45em;font-family:inherit;font-weight:700}

/* Instructor pages */
.top{display:flex;align-items:center;gap:1rem;padding:.8rem 1.2rem;background:var(--ink);color:#fff}
.brand{color:#fff;text-decoration:none;font-weight:700;font-size:1.15rem;display:flex;align-items:center;gap:.6rem}
.logo{background:var(--red);color:#fff;font-weight:900;padding:.1rem .55rem;border-radius:6px;letter-spacing:.04em}
.crumb{color:#c9d2e3}
.crumb:before{content:"/";margin-inline-end:1rem;opacity:.5}
.wrap{max-width:1100px;margin:0 auto;padding:1.5rem 1.2rem 3rem}
.hero h1{font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.2;margin:.5rem 0}
.hero p{font-size:1.1rem;color:var(--muted);max-width:52rem}
.lessons{list-style:none;padding:0;margin:2rem 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.lessons li{background:var(--card);border-radius:14px;box-shadow:0 1px 3px rgba(20,33,61,.1);display:flex;flex-direction:column;overflow:hidden;border-top:5px solid var(--yellow)}
.lessons li:nth-child(4n+2){border-color:var(--red)}.lessons li:nth-child(4n+3){border-color:var(--blue)}.lessons li:nth-child(4n){border-color:var(--green)}
.card{display:flex;gap:1rem;padding:1.1rem;text-decoration:none;color:inherit;flex:1}
.card .num{font-size:2.4rem;font-weight:900;line-height:1;color:var(--ink);min-width:2.2rem}
.card strong{display:block;font-size:1.2rem}
.card small{color:var(--muted);font-size:.95rem}
.play{display:block;padding:.6rem 1.1rem;border-top:1px solid var(--line);text-decoration:none;font-weight:700}
.play:hover,.card:hover strong{color:var(--red)}
.how{background:var(--card);border-radius:14px;padding:1.2rem 1.5rem}
.how li{margin:.35rem 0}
.foot{text-align:center;color:var(--muted);font-size:.9rem;padding:1.5rem}
.foot p{margin:.2rem}
.lesson-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.lesson-head h1{margin:0;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15}
.kicker{color:var(--red);font-weight:700}
.sub{color:var(--muted);margin:.2rem 0 0;font-size:1.1rem}
.btn{display:inline-block;background:var(--blue);color:#fff;border:0;border-radius:10px;padding:.55rem 1.1rem;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn.big{background:var(--red);font-size:1.15rem;padding:.75rem 1.4rem}
.note{background:#fff7d6;border-inline-start:5px solid var(--yellow);padding:.8rem 1rem;border-radius:8px}
.box{background:var(--card);border-radius:14px;padding:1.1rem 1.4rem;margin:1rem 0;box-shadow:0 1px 3px rgba(20,33,61,.08)}
.box h2{margin:.1rem 0 .6rem;font-size:1.3rem}
.box h3{margin:1rem 0 .2rem;font-size:1.05rem}
.box p{margin:.3rem 0}
.vision{background:var(--ink);color:#fff}
.vision p{font-size:1.1rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.grid2 .box{margin:1rem 0 0}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:start;padding:.55rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:500}
td.t{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}
.check{list-style:none;padding:0;columns:2}
.check li{break-inside:avoid;margin:.2rem 0}
.res li{margin:.3rem 0}
.hint{color:var(--muted);font-size:.92rem}
details{border-top:1px solid var(--line);padding:.5rem 0}
summary{font-weight:700;cursor:pointer}
details ul{margin:.4rem 0}
textarea{width:100%;font:inherit;font-size:.95rem;border:1px solid var(--line);border-radius:8px;padding:.6rem;margin:.3rem 0 .6rem;resize:vertical}
.pager{display:flex;justify-content:space-between;margin-top:1.5rem;font-weight:700}
@media (max-width:760px){thead{display:none}table,tbody,tr,td{display:block}tr{border-bottom:1px solid var(--line);padding:.6rem 0}td{border:0;padding:.1rem 0}td.t,td.m{display:inline;margin-inline-end:.6rem}td[data-h]:not(:empty):before{content:attr(data-h) ": ";color:var(--muted)}td[data-h]:empty{display:none}.grid2{grid-template-columns:1fr}.check{columns:1}body{font-size:16px}}

/* Projector mode */
body.present{background:#fff;overflow:hidden;height:100vh}
.slide{display:none;position:fixed;inset:0 0 3.2rem 0;padding:4.5vh 6vw;overflow:hidden;font-size:min(1vw,1.75vh)}
.slide.on{display:flex;flex-direction:column;justify-content:center}
.slide .inner{display:flex;gap:4vw;align-items:center;width:100%}
.slide .main{flex:1;min-width:0}
.slide .kicker{font-size:2.2em;display:block;margin-bottom:.4em}
.slide h1{font-size:5.4em;line-height:1.1;margin:0 0 .5em;font-weight:900}
.slide .lines{font-size:3.1em;line-height:1.4;margin:0;padding-inline-start:1.2em}
.slide .lines li{margin:.25em 0}
.slide .lines li::marker{color:var(--red)}
.slide .question{margin:1.2em 0 0;font-size:3.1em;font-weight:700;background:var(--yellow);display:inline-block;padding:.4em .8em;border-radius:.4em}
.slide .question:before{content:"? ";font-weight:900}
.slide .deck{margin:1.5em 0 0;font-size:2.2em;color:var(--muted)}
.qr{display:flex;flex-direction:column;gap:1em;flex:0 0 auto}
.qr figure{margin:0;text-align:center;width:24em}
.qr svg{width:100%;height:auto;display:block;border:3px solid var(--ink);border-radius:12px}
.qr figcaption{font-size:1.6em;font-weight:700;margin-top:.6vh}
.qr figure+figure svg{width:70%;margin:auto}
.cover{background:var(--ink);color:#fff}
.cover .inner{flex-direction:column;align-items:flex-start}
.cover .kicker{color:var(--yellow)}
.cover .sub{color:#c9d2e3;font-size:3em;margin:0}
.cover .sub.small{font-size:2.2em;margin-top:1.2em}
.agenda{list-style:none;counter-reset:a;padding:0;margin:1.6em 0 0;font-size:2.3em;width:100%;columns:2;column-gap:5vw}
.agenda li{counter-increment:a;display:flex;gap:1em;justify-content:space-between;break-inside:avoid;padding:.3vh 0;border-bottom:1px solid rgba(255,255,255,.15)}
.agenda li:before{content:counter(a);color:var(--yellow);font-weight:900;min-width:1.2em}
.agenda span{flex:1}
.agenda b{color:#c9d2e3;font-weight:500}
.notes{display:none;position:absolute;inset:auto 0 0 0;max-height:45%;overflow:auto;background:#fff7d6;border-top:4px solid var(--yellow);padding:1rem 6vw;font-size:max(1rem,1.5vw)}
.notes h3{margin:0 0 .3rem}
.notes ul{margin:0}
.show-notes .notes{display:block}
.bar{position:fixed;inset:auto 0 0 0;height:3.2rem;display:flex;align-items:center;gap:1rem;padding:0 1rem;background:#eef0f4;color:var(--muted);font-size:.95rem}
.bar button{font:inherit;border:0;background:#fff;border-radius:8px;padding:.3rem .8rem;cursor:pointer;color:var(--ink);font-weight:700}
.bar .exit{text-decoration:none;color:var(--muted);font-size:1.2rem}
.bar .keys{margin-inline-start:auto}
#timer{font-size:1.5rem;font-variant-numeric:tabular-nums;padding:.1rem 1rem;min-width:7rem}
#timer.running{background:var(--green);color:#fff}
#timer.over{background:var(--red);color:#fff;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
@media (max-width:760px){.slide .inner{flex-direction:column;align-items:flex-start}.bar .keys{display:none}.agenda{columns:1}}

/* Additions: nav, tools, builds, season, pictures and video slides */
.topnav{margin-inline-start:auto;display:flex;gap:1.2rem}
.topnav a{color:#fff;text-decoration:none;font-weight:500}
.tools ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem}
.tools a{display:block;background:var(--card);border-radius:12px;padding:.8rem 1rem;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(20,33,61,.08);height:100%}
.tools strong{display:block;color:var(--blue)}
.tools small{color:var(--muted)}
.builds{border-inline-start:6px solid var(--yellow)}
.builds ul{font-size:1.1rem}
.check.one{columns:1}
.links{list-style:none;padding:0}
.links li{padding:.35rem 0;border-bottom:1px solid var(--line)}
.links small{display:block;color:var(--muted)}
.season .box{margin-top:1rem}
.extra{margin:0}
.extra img{width:100%;border-radius:10px;border:1px solid var(--line)}
.extra figcaption{color:var(--muted);font-size:.92rem}
.pager span{flex:1}
.slide.picture.on,.slide.video.on{padding:2vh 2vw;align-items:center}
.slide.picture img{max-width:100%;max-height:100%;object-fit:contain}
.slide.video iframe{width:100%;height:100%;border:0}
@media (max-width:760px){.topnav{display:none}}
