/* Scroll-driven classroom. Without WebGL the chapters stack as normal content. */
.classroom{position:relative;background:#dde2e9}
.cr-canvas,.cr-shade,.cr-loader,.cr-rail,.cr-chapter,.cr-scroll-cue{display:none}
.cr-panels{width:min(1280px,calc(100% - 112px));margin-inline:auto;padding-block:64px 96px;display:grid;gap:28px}
.cr-panel{background:#f6fafe;border:1px solid var(--line);border-radius:18px;padding:36px}
.cr-panel--hero{background:none;border:0;padding:24px 0 40px}
.cr-skip{display:none}

/* Pinned stage */
.cr-pending .classroom,.cr-live .classroom{height:820vh}
.cr-pending .cr-sticky,.cr-live .cr-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(120% 80% at 60% 40%,#e6ebf2,#e6dcc6)}
.cr-pending .cr-canvas,.cr-live .cr-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
.cr-live .cr-canvas{opacity:1}
.cr-pending .cr-shade,.cr-live .cr-shade{display:block;position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#fffffff2 0%,#ffffffbd 28%,#ffffff00 58%);opacity:0;transition:opacity .9s ease}
.classroom[data-chapter="0"] .cr-shade{opacity:1}
.cr-pending .cr-loader{display:flex;position:absolute;right:max(56px,calc((100% - 1280px) / 2));bottom:40px;align-items:center;gap:12px;color:var(--purple);font-size:22px}
.cr-loader i{width:44px;height:2px;background:var(--purple);transform-origin:left;animation:cr-load 1.1s ease-in-out infinite}
@keyframes cr-load{0%{transform:scaleX(0)}60%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

.cr-pending .cr-panels,.cr-live .cr-panels{position:absolute;inset:0;width:auto;margin:0;padding:0;display:block;pointer-events:none}
.cr-pending .cr-panel,.cr-live .cr-panel{position:absolute;top:50%;left:max(56px,calc((100% - 1280px) / 2));width:min(440px,calc(100% - 112px));padding:34px 36px;background:#f7fafef5;border:1px solid #14213d14;border-radius:18px;box-shadow:0 30px 70px -30px #3a2c1a59,0 2px 0 #fefefe inset;opacity:0;transform:translateY(calc(-50% + 36px)) scale(.98);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.75,.2,1);will-change:opacity,transform;pointer-events:none}
.cr-pending .cr-panel--right,.cr-live .cr-panel--right{left:auto;right:max(96px,calc((100% - 1280px) / 2 + 40px))}
.cr-pending .cr-panel.is-past,.cr-live .cr-panel.is-past{transform:translateY(calc(-50% - 36px)) scale(.98)}
.cr-pending .cr-panel.is-active,.cr-live .cr-panel.is-active{opacity:1;transform:translateY(-50%);pointer-events:auto;transition-delay:.12s}
.cr-pending .cr-panel--hero,.cr-live .cr-panel--hero{width:min(640px,calc(100% - 112px));background:none;border:0;box-shadow:none;padding:0}
.cr-pending .cr-panel--final,.cr-live .cr-panel--final{width:min(520px,calc(100% - 112px));background:#399affeb;border-color:#fefefe30;color:#fefefe}

/* Panel content */
.cr-panel h1{font-size:clamp(54px,6vw,90px);letter-spacing:-4.6px;line-height:1.04;margin:22px 0 28px}
.cr-panel h2{font-size:clamp(30px,2.7vw,42px);letter-spacing:-1.6px;margin:14px 0 16px}
.cr-panel p{font-size:15px;line-height:1.65;color:#55595f}
.cr-panel .hero-description{font-size:17px;color:#323b48}
.cr-period{display:inline-flex;align-items:center;gap:8px;font:700 10px var(--body);letter-spacing:1.6px;color:var(--purple)}
.cr-period:before{content:'';width:18px;height:2px;background:currentColor;border-radius:2px}
.cr-scroll-cue{gap:10px;align-items:center;margin-top:44px;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#666b71}
.cr-live .cr-scroll-cue,.cr-pending .cr-scroll-cue{display:flex}
.cr-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:24px;border-top:1px solid #14213d1a}
.cr-stats>div{padding:16px 0 0;display:grid}
.cr-stats>div+div{padding-left:16px;border-left:1px solid #14213d1a}
.cr-stats strong{font:600 30px/1.1 var(--heading);letter-spacing:-1.4px}
.cr-stats span:not([data-cr-count]){font-size:11px;color:#5b6b80}
.cr-note{display:block;margin-top:12px;font-size:10px;color:#82878d}
.cr-rounds{list-style:none;margin:6px 0 22px;padding:0;display:grid;gap:10px}
.cr-rounds li{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:#fefefe8c;border:1px solid #14213d12}
.cr-rounds b{font:600 13px var(--heading);background:var(--ink);color:var(--lime);border-radius:7px;padding:5px 8px;line-height:1}
.cr-rounds li:last-child b{background:var(--purple);color:#fefefe}
.cr-rounds span{font-size:13px;line-height:1.45;color:#55595f}
.cr-rounds strong{display:block;color:var(--ink);font:600 15px var(--heading)}
.cr-bands{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.cr-bands-label{margin-top:18px;font-size:11px!important;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#3a5878!important}
.cr-skills{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.cr-skills li{padding:7px 12px;border-radius:30px;background:#e4f1ff;font-size:12px;font-weight:600;color:#07305c}
.cr-bands span{padding:9px 13px;border-radius:30px;background:#e4f1ff;font-size:12px;color:#3a5878}
.cr-bands span:last-child{background:#e7f2fd;color:#07305c}
.cr-panel--final .cr-period{color:var(--lime)}
.cr-panel--final h2{color:#fefefe}
.cr-panel--final h2 span{color:var(--lime)}
.cr-panel--final p{color:#f1f6fc}
.cr-panel--final .text-link{border-color:#fefefe;color:#fefefe}

/* Chapter rail */
.cr-pending .cr-rail,.cr-live .cr-rail{display:flex;flex-direction:column;gap:6px;position:absolute;right:max(24px,calc((100% - 1280px) / 2 - 40px));top:50%;transform:translateY(-50%);z-index:4}
.cr-rail a{position:relative;display:flex;justify-content:flex-end;align-items:center;width:28px;height:22px}
.cr-rail a:after{content:'';width:8px;height:8px;border-radius:50%;background:#14213d33;transition:transform .3s,background .3s;box-shadow:0 0 0 3px #ffffff99}
.cr-rail a span{position:absolute;right:22px;white-space:nowrap;font-size:11px;font-weight:600;background:var(--ink);color:var(--paper);padding:4px 9px;border-radius:6px;opacity:0;transform:translateX(6px);transition:.25s;pointer-events:none}
.cr-rail a:hover span,.cr-rail a:focus-visible span{opacity:1;transform:none}
.cr-rail a[aria-current]:after{background:var(--purple);transform:scale(1.5)}
.cr-pending .cr-chapter,.cr-live .cr-chapter{display:flex;position:absolute;left:max(56px,calc((100% - 1280px) / 2));bottom:28px;font:700 10px var(--body);letter-spacing:1.5px;text-transform:uppercase;color:#14213db3;background:#fffffff0;padding:7px 12px;border-radius:30px;z-index:4}
.cr-pending .cr-skip,.cr-live .cr-skip{display:block;position:absolute;left:50%;bottom:24px;transform:translate(-50%,10px);opacity:0;font-size:12px;font-weight:600;background:var(--ink);color:var(--paper);padding:9px 14px;border-radius:30px;z-index:5;transition:.25s}
.cr-skip:focus-visible{opacity:1;transform:translate(-50%,0)}

@media (max-width:1100px){
  .cr-pending .cr-panel--right,.cr-live .cr-panel--right{right:72px}
}
/* Phones and narrow tablets: chapters become a bottom sheet over the scene */
@media (max-width:760px){
  .cr-panels{width:calc(100% - 40px)}
  .cr-pending .classroom,.cr-live .classroom{height:760vh}
  .cr-pending .cr-panel,.cr-live .cr-panel,.cr-pending .cr-panel--right,.cr-live .cr-panel--right,.cr-pending .cr-panel--final,.cr-live .cr-panel--final{top:auto;bottom:58px;left:16px;right:16px;width:auto;padding:22px 22px 20px;transform:translateY(30px) scale(.98)}
  .cr-pending .cr-panel.is-past,.cr-live .cr-panel.is-past{transform:translateY(-20px) scale(.98)}
  .cr-pending .cr-panel.is-active,.cr-live .cr-panel.is-active{transform:none}
  .cr-pending .cr-panel--hero,.cr-live .cr-panel--hero{top:96px;bottom:auto;padding:0}
  .classroom[data-chapter="0"] .cr-shade{background:linear-gradient(180deg,#fffffff7 0%,#ffffffe0 50%,#ffffff00 66%)}
  .cr-panel h1{font-size:clamp(46px,13vw,64px);letter-spacing:-3px;margin:18px 0 18px}
  .cr-panel .hero-description{font-size:14px}
  .cr-panel h2{font-size:26px;letter-spacing:-1px;margin:10px 0 10px}
  .cr-panel p{font-size:13.5px}
  .cr-rounds{gap:6px;margin-bottom:14px}.cr-rounds li{padding:8px 10px}.cr-rounds span{font-size:12px}
  .cr-stats strong{font-size:24px}
  .cr-scroll-cue{margin-top:26px}
  .cr-pending .cr-rail,.cr-live .cr-rail{display:none}
  .cr-pending .cr-chapter,.cr-live .cr-chapter{display:none}
  .cr-pending .cr-loader{left:20px;right:auto;bottom:24px}
}

/* Pencil as the real cursor (fine pointers only) */
html.pencil-on:not(:has(dialog[open])),html.pencil-on:not(:has(dialog[open])) *{cursor:none!important}
.pencil-cursor{display:block;width:40px;height:40px;will-change:transform}
html:has(dialog[open]) .pencil-cursor{opacity:0!important}
.pencil-cursor svg{transform-origin:3px 37px;transition:transform .18s cubic-bezier(.3,.7,.3,1.4)}
.pencil-cursor.is-hover svg{transform:rotate(-14deg) scale(1.1)}
.pencil-cursor.is-down svg{transform:rotate(-4deg) scale(.86)}
.pencil-dot{position:fixed;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid var(--purple);border-radius:50%;pointer-events:none;z-index:1999;animation:pencil-dot .5s ease-out forwards}
@keyframes pencil-dot{from{transform:var(--at) scale(.2);opacity:.9}to{transform:var(--at) scale(1.3);opacity:0}}
@media (max-width:700px),(pointer:coarse){.pencil-cursor{display:none}}