/* Cole's Study Guides: shared design system for every page.
   Variable names match GUIDE_CSS so guides inherit the same palette. */
:root{
  color-scheme:light dark;
  --bg:#fbfaf7;--bg2:#f3f1ea;--card:#fff;--ink:#0b1215;--mut:#555f64;--faint:#5f6c71;--on-ac:#fff;--warn:#92400e;--warnbg:#fdf3dc;--acline:#a9c9c2;--line:#e6e3da;--line2:#efede6;
  --ac:#0f766e;--ac2:#0b5e58;--acbg:#e7f3f0;--hi:#ffe27a;--glow1:#5eead4;--glow2:#fde68a;
  --bad:#b42318;--badbg:#fdecea;--ok:#0f766e;
  --shadow:0 1px 2px rgba(11,18,21,.04),0 10px 30px -14px rgba(11,18,21,.16);
  --shadow-lg:0 2px 4px rgba(11,18,21,.04),0 40px 80px -30px rgba(11,18,21,.35);
  --radius:16px;--max:1160px;
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --ease:cubic-bezier(.2,.7,.2,1);--ease-spring:cubic-bezier(.34,1.2,.4,1);
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0a0f11;--bg2:#0f1618;--card:#12191c;--ink:#edf2f1;--mut:#9aa7ab;--faint:#8a969b;--on-ac:#04211e;--warn:#f2c75a;--warnbg:#2b2211;--acline:#2a5956;--line:#212c30;--line2:#182125;
  --ac:#3fc1b0;--ac2:#6ad4c6;--acbg:#0f2a2a;--hi:#6b5a12;--glow1:#0d9488;--glow2:#854d0e;
  --bad:#f0877c;--badbg:#2b1917;--ok:#3fc1b0;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.3),0 40px 80px -30px rgba(0,0,0,.8);
}}
:root[data-theme=dark]{
  --bg:#0a0f11;--bg2:#0f1618;--card:#12191c;--ink:#edf2f1;--mut:#9aa7ab;--faint:#8a969b;--on-ac:#04211e;--warn:#f2c75a;--warnbg:#2b2211;--acline:#2a5956;--line:#212c30;--line2:#182125;
  --ac:#3fc1b0;--ac2:#6ad4c6;--acbg:#0f2a2a;--hi:#6b5a12;--glow1:#0d9488;--glow2:#854d0e;
  --bad:#f0877c;--badbg:#2b1917;--ok:#3fc1b0;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.3),0 40px 80px -30px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
@view-transition{navigation:auto}
::view-transition-old(root){animation:.16s ease-out both vt-out}
::view-transition-new(root){animation:.22s ease-out both vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
[id]{scroll-margin-top:84px}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";overflow-x:hidden}
a{color:var(--ac)}
img,svg{max-width:100%}
::selection{background:var(--hi);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.narrow{max-width:780px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
.site-head.scrolled{border-bottom-color:var(--line)}
.head-in{display:flex;align-items:center;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15.5px;letter-spacing:-.015em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand svg{width:30px;height:30px;flex:none;transition:transform .4s var(--ease)}
.brand:hover svg{transform:rotate(-8deg) scale(1.05)}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{font-size:14.5px;font-weight:500;color:var(--mut);text-decoration:none;padding:8px 13px;border-radius:99px;transition:color .15s,background .15s}
.nav a:hover{color:var(--ink);background:var(--line2)}
.nav a[aria-current=page]{color:var(--ink);background:var(--line2)}
.nav .btn{margin-left:10px}
.nav a.btn-primary{color:var(--bg);background:var(--ink)}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--card)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] .menu-panel{display:flex}
.menu-panel{display:none;position:absolute;left:0;right:0;top:66px;flex-direction:column;background:var(--card);border-bottom:1px solid var(--line);padding:8px 20px 18px;box-shadow:var(--shadow-lg)}
.menu-panel a{padding:14px 4px;border-bottom:1px solid var(--line2);color:var(--ink);text-decoration:none;font-weight:500;font-size:17px}
.menu-panel a.btn-primary{color:var(--bg)}
.menu-panel .btn{margin-top:14px;text-align:center;border-bottom:0}
@media(max-width:820px){.nav{display:none}.menu{display:block}}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:15px;font-weight:600;line-height:1;text-decoration:none;border-radius:99px;padding:13px 22px;min-height:44px;cursor:pointer;border:1px solid transparent;transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .2s,color .2s;white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.99);transition-duration:.1s}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(11,18,21,.35)}
.btn-primary:disabled,.btn-accent:disabled{background:var(--bg2);color:var(--faint);border-color:var(--line);box-shadow:none;cursor:default;transform:none}
.btn-accent{background:var(--ac);color:var(--on-ac)}
.btn-accent:hover{background:var(--ac2);transform:translateY(-1px);box-shadow:0 10px 24px -12px var(--ac)}
.btn-secondary{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{border-color:var(--faint);transform:translateY(-1px)}
.btn-sm{font-size:14px;padding:9px 16px}
.btn-lg{font-size:16px;padding:16px 26px}
.textlink{font:inherit;font-weight:600;color:var(--ac);background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.textlink:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- type + sections ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ac);margin:0 0 16px}
.eyebrow::before{content:"";width:18px;height:1.5px;background:currentColor;opacity:.7}
h1,h2,h3{letter-spacing:-.03em;line-height:1.08;margin:0;font-weight:700}
h1,h2,.lede{text-wrap:balance}
.serif{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.01em}
.display{font-size:clamp(40px,5.6vw,68px);font-weight:700;letter-spacing:-.045em;line-height:.98}
.display .serif{font-size:1.08em;letter-spacing:-.02em}
.h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.04em;line-height:1.04}
.h2 .serif{font-size:1.08em}
.h3{font-size:19px;font-weight:650;letter-spacing:-.02em;line-height:1.25}
.lede{font-size:clamp(17px,1.9vw,20px);color:var(--mut);line-height:1.55;max-width:58ch;margin:22px 0 0}
.muted{color:var(--mut)}
.section{padding:120px 0}
.section-sm{padding:64px 0}
.section-head{max-width:760px;margin-bottom:56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .lede{margin-left:auto;margin-right:auto}
.section-head .lede{font-size:18px}
.band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.page-hero{position:relative;padding:88px 0 48px;overflow:hidden}
.page-hero .display{font-size:clamp(36px,4.6vw,56px)}
.page-hero .lede{margin-top:18px}
@media(max-width:640px){.section{padding:80px 0}.page-hero{padding:56px 0 20px}}

/* ambient background used by heroes */
.aura{position:absolute;inset:-20% -10% auto;height:720px;pointer-events:none;z-index:-1;overflow:hidden}
.aura::before,.aura::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}
.aura::before{width:560px;height:560px;left:52%;top:40px;background:radial-gradient(circle,var(--glow1),transparent 65%);animation:drift 18s ease-in-out infinite alternate}
.aura::after{width:480px;height:480px;left:18%;top:-60px;background:radial-gradient(circle,var(--glow2),transparent 65%);opacity:.45;animation:drift 22s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,40px) scale(1.12)}}

/* scroll reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.06s}.rv[data-d="2"]{transition-delay:.12s}.rv[data-d="3"]{transition-delay:.18s}.rv[data-d="4"]{transition-delay:.24s}
.no-js .rv{opacity:1;transform:none}

/* ---------- cards + grids ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .2s,box-shadow .3s}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-3,.grid-2{grid-template-columns:1fr}}
.feature{padding:26px}
.feature .ic{width:42px;height:42px;border-radius:12px;background:var(--acbg);color:var(--ac);display:grid;place-items:center;margin-bottom:18px}
.feature .ic svg{width:21px;height:21px}
.feature p{color:var(--mut);margin:8px 0 0;font-size:15px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ac);background:var(--acbg);border-radius:99px;padding:4px 10px}

/* ---------- guide cards (library) ---------- */
.gcard{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 20px 18px;text-decoration:none;color:var(--ink);transition:transform .3s var(--ease),border-color .2s,box-shadow .3s;min-height:168px;overflow:hidden}
.gcard-add{align-items:center;justify-content:center;gap:10px;border:1.5px dashed var(--line);background:var(--bg2);text-align:center}
.gcard-add .plus{width:30px;height:30px;border-radius:50%;background:var(--acbg);color:var(--ac);display:grid;place-items:center;font-size:20px;font-weight:600;line-height:1}
.gcard-add strong{font-size:15px;font-weight:600}
.gcard-add:hover{border-color:var(--acline);box-shadow:none}
.gcard:hover{transform:translateY(-3px);border-color:var(--acline);box-shadow:var(--shadow)}
.gcard .tag{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.gcard .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sw,var(--faint))}
.gcard.cole .tag{color:var(--ac)}
.gcard.cole .tag::before{background:var(--ac)}
.gcard .t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-right:34px;font-size:18px;font-weight:650;letter-spacing:-.02em;line-height:1.28;margin-top:4px}
.gcard .c{font-size:14px;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard .m{margin-top:auto;padding-top:12px;font-size:12.5px;color:var(--faint);display:flex;gap:12px;flex-wrap:wrap}
.gcard .go{position:absolute;right:18px;top:18px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--mut);transition:all .3s var(--ease)}
.gcard:hover .go{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:rotate(-45deg)}
.gcard[hidden]{display:none}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:13.5px;font-weight:600}
.help{font-size:12.5px;color:var(--mut)}
.input,textarea.input,select.input{width:100%;font:inherit;font-size:15.5px;background:var(--bg2);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .15s,box-shadow .15s,background .15s}
.input:disabled{color:var(--faint);background:var(--bg2);border-color:var(--line2)}
.input:focus{outline:none;background:var(--card);border-color:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 16%,transparent)}
textarea.input{resize:vertical;min-height:220px;line-height:1.6}
@media(max-width:640px){textarea.input{min-height:160px}}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238b9498' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.search{position:relative}
.search svg{position:absolute;left:20px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.search .input{padding:19px 20px 19px 52px;font-size:17px;border-radius:99px;background:var(--card);box-shadow:var(--shadow-lg)}
.search kbd{position:absolute;right:16px;top:50%;transform:translateY(-50%);font:600 12px/1 "Inter",sans-serif;color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:5px 7px;background:var(--bg)}
@media(max-width:640px){.search kbd{display:none}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{font:inherit;font-size:13.5px;font-weight:500;color:var(--mut);background:var(--card);border:1px solid var(--line);border-radius:99px;padding:8px 15px;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .1s}
.chip:active{transform:scale(.97)}
.chip:disabled{color:var(--faint);border-color:var(--line2);cursor:default}
.chip:hover{color:var(--ink);border-color:var(--faint)}
.chip[aria-pressed=true]{color:var(--bg);background:var(--ink);border-color:var(--ink)}
.err{background:var(--badbg);color:var(--bad);border-radius:12px;padding:12px 14px;font-size:14.5px;margin:14px 0 0}
.note-box{background:var(--acbg);border:1px solid var(--acline);border-radius:14px;padding:14px 16px;font-size:14.5px}

/* ---------- footer ---------- */
.site-foot{position:relative;border-top:1px solid var(--line);background:var(--bg2);margin-top:0;overflow:hidden}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;padding:64px 20px 32px}
.foot-in p{color:var(--mut);font-size:14px;max-width:34ch;margin:14px 0 0}
.foot-col .foot-h{margin:0 0 14px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.foot-col a{display:block;color:var(--mut);text-decoration:none;font-size:14.5px;padding:5px 0}
.foot-col a:hover{color:var(--ink)}
.foot-base{border-top:1px solid var(--line);padding:20px 20px 30px;font-size:13px;color:var(--faint);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:720px){.foot-in{grid-template-columns:1fr 1fr}.foot-in>div:first-child{grid-column:1/-1}}

/* ---------- prose pages ---------- */
.prose{font-size:17.5px;line-height:1.75}
.prose h2{font-size:28px;font-weight:700;margin:56px 0 14px;letter-spacing:-.03em}
.prose h3{font-size:19px;margin:30px 0 8px}
.prose p,.prose li{color:color-mix(in srgb,var(--ink) 84%,var(--mut))}
.prose ul{padding-left:20px}
.prose li{margin:8px 0}
.prose .sig{font-family:var(--serif);font-style:italic;font-size:30px;margin-top:28px;color:var(--ink)}
.toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.toc a{color:var(--mut);text-decoration:none;padding:6px 12px;border-left:2px solid var(--line)}
.toc a:hover{color:var(--ink);border-left-color:var(--ac)}
.split-doc{display:grid;grid-template-columns:200px 1fr;gap:64px}
@media(max-width:820px){.split-doc{grid-template-columns:1fr}.toc{display:none}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}

/* =====================================================================
   HOME
   ===================================================================== */
.hero{position:relative;padding:64px 0 56px;isolation:isolate;overflow-x:clip}
@media(max-width:640px){.hero{padding:40px 0 48px}}
.hero-top{text-align:center;max-width:980px;margin:0 auto}
.hero-top .display{max-width:14ch;margin:0 auto}
.hero-top .lede{margin:16px auto 0;text-align:center}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;justify-content:center}
.trust{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;font-size:14px;color:var(--mut)}
.trust li{display:flex;align-items:center;gap:6px}
.trust svg{width:16px;height:16px;color:var(--ac)}

/* animated product demo */
.demo{position:relative;max-width:1040px;margin:64px auto 0;perspective:1600px}
.demo-glow{position:absolute;inset:8% 6% -4%;background:radial-gradient(60% 60% at 50% 40%,var(--glow1),transparent 70%);filter:blur(60px);opacity:.3;z-index:-1}
.win{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;transform:rotateX(6deg);transform-origin:50% 0;transition:transform .7s var(--ease)}
.demo.in .win{transform:none}
.win-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line2);background:var(--bg)}
.win-bar span{width:11px;height:11px;border-radius:50%;background:var(--line)}
.win-bar em{font-style:normal;font-size:12.5px;color:var(--faint);margin:0 auto;background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:4px 40px}
.win-body{display:grid;grid-template-columns:.9fr 1.1fr;min-height:430px}
.d-in{padding:26px;border-right:1px solid var(--line2);display:flex;flex-direction:column;gap:14px;background:var(--bg)}
.d-out{padding:26px;display:flex;flex-direction:column;gap:14px;position:relative}
.d-k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.d-file{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;font-weight:500}
.d-file i{width:30px;height:36px;border-radius:5px;background:#e5484d;color:#fff;font:700 9px/36px "Inter",sans-serif;text-align:center;font-style:normal;flex:none}
.d-file i.w{background:#2b6cd4}
.d-file small{display:block;color:var(--faint);font-weight:400}
.d-notes{font-size:12.5px;line-height:1.7;color:var(--mut);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;flex:1}
.d-notes p{margin:0 0 6px}
.d-notes u{text-decoration:none;background:linear-gradient(transparent 60%,var(--hi) 60%)}
.d-go{margin-top:auto;align-self:flex-end;font-size:13px;font-weight:600;background:var(--ink);color:var(--bg);border-radius:99px;padding:10px 16px;transition:transform .2s}
.demo.p1 .d-go{animation:press .5s .9s both}
@keyframes press{50%{transform:scale(.94)}}
.d-steps{display:flex;flex-wrap:wrap;gap:6px}
.d-steps b{font-size:11.5px;font-weight:500;color:var(--faint);border:1px solid var(--line);border-radius:99px;padding:4px 10px;transition:all .3s}
.d-steps b.on{color:var(--ac);border-color:var(--ac);background:var(--acbg)}
.d-title{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.d-sk{height:10px;border-radius:6px;background:var(--line2);position:relative;overflow:hidden}
.d-sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--card) 70%,transparent),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.d-view{display:none;flex-direction:column;gap:12px;animation:fadeUp .6s var(--ease) both}
.demo.p0 .v0,.demo.p1 .v1,.demo.p2 .v2,.demo.p3 .v3{display:flex}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.demo .fc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:170px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,var(--card),var(--bg));text-align:center;padding:18px}
.demo .fc strong{font-size:26px;letter-spacing:-.03em}
.demo .fc span{font-size:12.5px;color:var(--mut);max-width:34ch}
.d-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.d-btn{text-align:center;font-size:12.5px;font-weight:600;border:1px solid var(--line);color:var(--ink);border-radius:99px;padding:9px}
.d-btn.dark{background:var(--ac);color:var(--on-ac);border-color:var(--ac)}
.demo .q{font-size:14px;font-weight:600;line-height:1.4}
.demo .opt{font-size:13px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;display:flex;justify-content:space-between}
.demo .opt.ok{border-color:var(--ac);background:var(--acbg);color:var(--ac);font-weight:600}
.demo .ans{font-size:12.5px;line-height:1.6;color:var(--mut);border:1px solid var(--line);border-radius:12px;padding:12px}
.demo .mk{display:flex;align-items:center;gap:14px;border-radius:12px;background:var(--acbg);padding:12px 14px}
.demo .mk b{font-size:34px;letter-spacing:-.04em;color:var(--ac);line-height:1}
.demo .mk span{font-size:12px;line-height:1.5}
.demo .mk i{font-style:normal;color:var(--bad)}
.float{position:absolute;display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow-lg)}
.float .g{font-size:40px;font-weight:800;line-height:1;color:var(--ac);letter-spacing:-.04em}
.float small{font-size:12px;color:var(--mut)}
.fl1{left:-40px;bottom:-30px}
.fl2{right:-36px;top:-34px}
.fl2 .bar{width:150px;height:6px;border-radius:9px;background:var(--line2);overflow:hidden}
.fl2 .bar i{display:block;height:100%;width:78%;background:var(--ac);border-radius:9px}
@keyframes bob{50%{transform:translateY(-8px)}}
@media(max-width:900px){.win-body{grid-template-columns:1fr;min-height:0}.d-in{border-right:0;border-bottom:1px solid var(--line2);gap:10px}.d-notes{display:none}.float{display:none}.win{transform:none}}



/* before / after */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:stretch}
.ba-arrow{align-self:center;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;box-shadow:var(--shadow-lg)}
.ba-card{padding:28px;position:relative}
.ba-card h3{margin-bottom:14px}
.ba-before{font-size:15px;color:var(--mut)}
.ba-before p{margin:0;padding:8px 0;border-bottom:1px solid var(--line2);line-height:1.5}
.ba-before p:last-child{border-bottom:0}
.ba-before s{text-decoration-color:var(--bad)}
.ba-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ba-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.ba-list li b{flex:none;width:24px;height:24px;border-radius:50%;background:var(--acbg);color:var(--ac);display:grid;place-items:center;font-size:12px}
@media(max-width:820px){.ba{grid-template-columns:1fr}.ba-arrow{justify-self:center;transform:rotate(90deg)}}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(200px,auto);gap:16px}
.bx{position:relative;overflow:hidden;padding:28px;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:22px;transition:transform .4s var(--ease),box-shadow .4s}
.bx:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.bx p{color:var(--mut);margin:8px 0 0;font-size:15px;max-width:44ch}
.bx .viz{margin-top:auto;padding-top:22px}
.b-a{grid-column:span 4;grid-row:span 2;background:linear-gradient(160deg,var(--card) 40%,var(--acbg))}
.b-b{grid-column:span 2}
.b-c{grid-column:span 2}
.b-d{grid-column:span 2}.b-e{grid-column:span 2}.b-f{grid-column:span 2}
@media(max-width:940px){.bento{grid-template-columns:1fr 1fr}.b-a{grid-column:span 2;grid-row:auto}.b-b,.b-c,.b-d,.b-e,.b-f{grid-column:span 1}}
@media(max-width:620px){.bento{grid-template-columns:1fr}.b-a,.b-b,.b-c,.b-d,.b-e,.b-f{grid-column:auto}}
.mark-demo{display:grid;grid-template-columns:1fr;gap:14px}
.mark-demo{align-items:stretch;margin-top:22px;padding-top:0}
.md-box{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.md-ans{font-size:13.5px;line-height:1.6;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--bg);min-height:118px}
.md-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.md-btn{font-size:12.5px;font-weight:600;background:var(--ink);color:var(--bg);border-radius:99px;padding:8px 14px}
.md-score{font-size:14px;color:var(--mut)}
.md-score b{font-size:26px;letter-spacing:-.03em;color:var(--ac)}
.md-tip{font-size:12.5px;color:var(--mut);line-height:1.5;padding:2px 2px 0;font-style:italic}
.bx.b-a{justify-content:flex-start}
.bx.b-a .viz{margin-top:22px}
.md-ans{flex:none}
.mark-demo .crit{justify-content:flex-start}
.viz.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;position:relative;padding-top:14px}
.viz.tl::before{content:"";position:absolute;left:8px;right:8px;top:19px;height:2px;background:var(--line)}
.viz.tl span{display:flex;flex-direction:column;font-size:11.5px;font-weight:600;color:var(--mut);position:relative;padding-top:14px}
.viz.tl i{position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--ac);border:2px solid var(--card)}
.viz.tl em{font-style:normal;font-weight:400;color:var(--faint);font-size:11px}
.sheet{position:relative;height:120px}
.pg{position:absolute;left:0;top:0;width:60%;height:100%;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:7px;box-shadow:var(--shadow);z-index:1}
.pg b{height:9px;width:50%;background:var(--ink);border-radius:3px;opacity:.85}
.pg i{height:5px;width:100%;background:var(--line);border-radius:3px}
.pg.back{left:20%;top:8px;transform:rotate(6deg);z-index:0;opacity:.7}
.mark-demo .ans{background:var(--card);font-size:13.5px;line-height:1.6;color:var(--mut);border:1px solid var(--line);border-radius:12px;padding:14px;font-style:italic}
.bx .pill{align-self:flex-start}
.crit{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.crit div{display:flex;gap:8px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.crit .y{color:var(--ac);font-weight:700}.crit .n{color:var(--bad);font-weight:700}
/* steps */
.steps3{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
@media(max-width:820px){.steps3{grid-template-columns:1fr}}
.steps3 li{padding:28px;background:var(--card);border:1px solid var(--line);border-radius:22px;position:relative}
.steps3 .num{font-family:var(--serif);font-style:italic;font-size:56px;line-height:1;color:var(--ac);display:block;margin-bottom:18px}
.steps3 p{color:var(--mut);margin:8px 0 0;font-size:15px}

/* founder note */
.founder{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start;padding:48px;border-radius:28px}
.founder blockquote{margin:0;font-family:var(--serif);font-size:clamp(26px,3.2vw,38px);line-height:1.2;letter-spacing:-.01em}
.founder cite{display:block;margin-top:22px;font-style:normal;font-size:14.5px;color:var(--mut)}
.founder cite b{color:var(--ink)}
.monogram{width:72px;height:72px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:34px}
@media(max-width:720px){.founder{grid-template-columns:1fr;padding:30px;gap:20px}}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:18px;font-weight:600;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;font-size:28px;line-height:1;color:var(--mut);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:-6px 0 24px;color:var(--mut);max-width:70ch}

/* row head + cta */
.row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;max-width:none;flex-wrap:wrap}
.cta-dark{position:relative;overflow:hidden;background:var(--ink);color:var(--bg);border-radius:32px;padding:clamp(40px,7vw,96px) clamp(24px,6vw,80px);text-align:center;isolation:isolate}
.cta-dark::before{content:"";position:absolute;inset:-40% 10% auto;height:500px;background:radial-gradient(circle,var(--glow1),transparent 60%);opacity:.35;filter:blur(40px);z-index:-1}
.cta-dark .h2{color:var(--bg)}
.cta-dark .lede{color:color-mix(in srgb,var(--bg) 70%,transparent);margin-left:auto;margin-right:auto}
.cta-dark .btn-primary{background:var(--bg);color:var(--ink)}
.cta-dark .btn-primary:hover{background:color-mix(in srgb,var(--ac) 35%,var(--bg));color:var(--ink)}
.cta-dark .hero-cta{justify-content:center}

/* =====================================================================
   CREATE
   ===================================================================== */
.maker{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
@media(max-width:960px){.maker{grid-template-columns:1fr}}
.maker-main{padding:28px;border-radius:24px}
.drop{position:relative;border:1.5px dashed var(--acline);border-radius:18px;padding:34px 20px;text-align:center;background:linear-gradient(180deg,var(--acbg),transparent);transition:all .2s}
.drop.over{border-color:var(--ac);background:var(--acbg);transform:scale(1.01)}
.drop .ic{width:52px;height:52px;border-radius:16px;margin:0 auto 14px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ac);box-shadow:var(--shadow)}
.drop strong{display:block;font-size:17px;letter-spacing:-.01em}
.drop .help{display:block;margin-top:6px}
.drop-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
@media(max-width:640px){.drop{padding:14px 16px}.drop .ic,.drop .help{display:none}.drop strong{font-size:15px}.drop-btns{margin-top:10px}}
@media(max-width:560px){.go .btn{width:100%}.go{justify-content:center}}
@media(pointer:coarse){.go .hint{display:none}}
.only-touch{display:none}
@media(pointer:coarse){.only-touch{display:inline-flex}}
.files{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:8px;text-align:left}
.files:empty{display:none}
.files li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:14px}
.files li span:first-child{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fmeta{color:var(--mut);font-size:13px}
.fbad{color:var(--bad)}
.files button{font:inherit;font-size:13px;color:var(--mut);background:none;border:0;cursor:pointer}
.files button:hover{color:var(--bad)}
.or{display:flex;align-items:center;gap:14px;color:var(--faint);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:24px 0 14px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.count{display:flex;justify-content:flex-end;font-size:12.5px;color:var(--faint);margin-top:6px;font-variant-numeric:tabular-nums}
.count.over{color:var(--bad);font-weight:600}
.row2{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-top:20px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.go{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.go .hint{font-size:12.5px;color:var(--faint)}
.go kbd{font:600 11px/1 "Inter",sans-serif;border:1px solid var(--line);border-radius:5px;padding:3px 5px;background:var(--card)}
.drop-page .drop{border-color:var(--ac);background:var(--acbg);box-shadow:0 0 0 6px color-mix(in srgb,var(--ac) 14%,transparent)}
.side{display:flex;flex-direction:column;gap:16px;position:sticky;top:90px}
.side .card{padding:22px}
.side h2{font-size:15px;margin-bottom:12px;letter-spacing:-.01em}
.incl{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--mut)}
.incl li{display:flex;gap:10px;align-items:center}
.incl svg{width:16px;height:16px;color:var(--ac);flex:none}
.progress{margin-top:24px;padding:24px;border-radius:18px;border:1px solid var(--line);background:var(--bg)}
.p-top{display:flex;align-items:center;gap:12px}
.spinner{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--ac);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.p-head{font-weight:650;margin:0;letter-spacing:-.01em}
.pbar{height:6px;border-radius:9px;background:var(--line2);margin:16px 0;overflow:hidden}
.pbar i{display:block;height:100%;width:100%;transform:scaleX(var(--p,0));transform-origin:left;background:linear-gradient(90deg,var(--ac),var(--glow1));border-radius:9px;transition:transform .5s var(--ease)}
.progress.out{opacity:0;transition:opacity .2s ease-in}
.result{opacity:0;transform:translateY(16px)}
.result.in{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.result.in .ghead{animation:gcin .36s var(--ease) both}
.result.in .gnav{animation:gcin .36s var(--ease) both;animation-delay:60ms}
.result.in .panels{animation:gcin .4s var(--ease) both;animation-delay:120ms}
@keyframes gcin{from{opacity:0;transform:translateY(10px)}}
.steps{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.steps li{font-size:13px;color:var(--faint);border:1px solid var(--line);border-radius:99px;padding:5px 12px;background:var(--card);transition:all .3s}
.steps li.on{color:var(--ac);border-color:var(--ac);background:var(--acbg)}
.steps li.done{color:var(--ink);border-color:var(--line)}
.steps li.done::before{content:"\2713  ";color:var(--ac);font-weight:700}
.steps .cnt{font-weight:700;margin-left:4px}
.p-note{font-size:13px;color:var(--mut);margin:14px 0 0}
.result{margin-top:40px;scroll-margin-top:80px}
.strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:0 0 18px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.strip .strip-t{font-size:14px;color:var(--mut);margin-right:auto}
.strip .strip-t strong{color:var(--ink);font-weight:600}
.result-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:24px 0 0;margin-top:8px;border-top:1px solid var(--line)}
.result-bar .rb-t{font-size:14px;color:var(--mut);margin-right:auto}
@media(max-width:759px){.result-bar,.share{margin-bottom:12px}}
.share{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px 22px;border-radius:18px;margin-top:20px;background:linear-gradient(120deg,var(--acbg),var(--card) 70%);border:1px solid var(--acline)}
.share .ic{width:44px;height:44px;border-radius:14px;background:var(--ac);color:var(--on-ac);display:grid;place-items:center}
.share strong{display:block;letter-spacing:-.01em}
.share span{font-size:14px;color:var(--mut)}
.share-out{grid-column:1/-1;margin:0;font-size:14.5px}
.share-out.err{margin:0}
.linkbtn{font:inherit;color:var(--ac);background:none;border:0;padding:0;cursor:pointer;font-weight:600}
@media(max-width:640px){.share{grid-template-columns:1fr}.share .ic{display:none}}
.mine-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.mine-list li{display:flex;align-items:center;gap:8px;border-radius:10px}
.mine-list li:hover{background:var(--line2)}
.mine-list .open{flex:1;min-width:0;text-align:left;font:inherit;background:none;border:0;padding:8px 8px;cursor:pointer;color:var(--ink);display:flex;flex-direction:column}
.mine-list strong{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mine-list span{font-size:12.5px;color:var(--faint)}
.mine-list .del{font:inherit;font-size:12.5px;color:var(--faint);background:none;border:0;cursor:pointer;padding:6px 8px}
.mine-list .del:hover{color:var(--bad)}
.guide-wrap{max-width:960px}
.maker.away{display:none}

/* =====================================================================
   LIBRARY + GUIDE
   ===================================================================== */
.lib-hero{text-align:center}
.lib-hero .lede{margin-left:auto;margin-right:auto}
.lib-search{max-width:860px;margin:34px auto 0}
.lib-search .chips{justify-content:center}
@media(max-width:640px){.lib-search .chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:0 20px;margin:18px -20px 0;mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}.lib-search .chips::-webkit-scrollbar{display:none}.chip{flex:none}}
.lib-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 18px;font-size:14px;color:var(--mut);flex-wrap:wrap}
.empty{text-align:center;padding:64px 20px;border:1.5px dashed var(--line);border-radius:22px;color:var(--mut)}
.empty strong{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em;margin-bottom:6px}
.empty .btn{margin-top:18px}
.more-wrap{text-align:center;margin-top:28px}
.skel{min-height:168px;background:linear-gradient(90deg,var(--line2),var(--card),var(--line2));background-size:200% 100%;animation:sk 1.4s infinite;border-radius:var(--radius);border:1px solid var(--line)}
@keyframes sk{to{background-position:-200% 0}}
.crumbs{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--faint);margin:28px 0 20px}
.crumbs a{color:var(--mut);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.g-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 24px}
.g-actions .btn-accent{margin-left:auto}
.guide-page{padding-bottom:80px}
@media(max-width:759px){.guide-page{padding-bottom:100px}.result{padding-bottom:84px}}
.report{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--mut);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.report button{font:inherit;font-size:14px;color:var(--mut);background:none;border:1px solid var(--line);border-radius:99px;padding:7px 14px;cursor:pointer}
.report button:hover{color:var(--bad);border-color:var(--bad)}
.report button.armed{color:#fff;background:var(--bad);border-color:var(--bad)}

/* 404 */
.nf{text-align:center;padding:120px 0}
.nf .big{font-family:var(--serif);font-style:italic;font-size:clamp(120px,22vw,240px);line-height:.9;color:var(--ac);letter-spacing:-.04em}
.nf .hero-cta{justify-content:center}

@media print{.site-head,.site-foot,.result-bar,.share,.strip,.side,.maker,.maker-main,.no-print,.aura,.grid-bg,.page-hero,.quick,.crumbs,.g-actions,.report{display:none!important}body{background:#fff}.result{margin-top:0}}

.note.warn{background:var(--warnbg);border-left:3px solid var(--warn);color:var(--ink)}

/* =====================================================================
   PASS 3: quick start, theme switch, interactive demos, no list, teachers
   ===================================================================== */
.quick{max-width:720px;margin:24px auto 0;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:8px;position:relative;transition:border-color .2s}
.quick::after{content:"";position:absolute;inset:-5px;border-radius:27px;border:5px solid color-mix(in srgb,var(--ac) 14%,transparent);opacity:0;transform:scale(.995);transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:none}
.quick:focus-within{border-color:var(--acline)}
.quick:focus-within::after{opacity:1;transform:none}
.quick .btn{background:var(--ink);color:var(--bg);transition:background .2s,color .2s,transform .2s var(--ease)}
.quick.has-text .btn{background:var(--ac);color:var(--on-ac)}
.quick textarea{display:block;width:100%;min-height:88px;resize:none;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;line-height:1.55;padding:14px 16px 6px;outline:none}
.quick .ghost-label{position:absolute;left:24px;top:22px;color:var(--faint);font-size:16px;pointer-events:none;transition:opacity .12s}
.quick.has-text .ghost-label,.quick:focus-within .ghost-label{opacity:0}
.quick-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 6px 16px;flex-wrap:wrap}
.quick-bar .alt{font-size:13.5px;color:var(--mut);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.quick-bar .alt a{font-weight:600}
.quick-bar .btn{white-space:nowrap}
@media(max-width:560px){.quick-bar{padding:6px}.quick-bar .alt{display:none}.quick-bar .btn{width:100%}}

.theme{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--mut);display:grid;place-items:center;cursor:pointer;margin-left:6px;transition:color .2s,border-color .2s,transform .3s var(--ease)}
.theme:hover{color:var(--ink);border-color:var(--faint);transform:rotate(-20deg)}
.theme svg{width:17px;height:17px}
.theme .moon{display:none}
:root[data-theme=dark] .theme .sun{display:none}
:root[data-theme=dark] .theme .moon{display:block}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .theme .sun{display:none}:root:not([data-theme=light]) .theme .moon{display:block}}
.menu .theme{margin:14px 0 0}

/* interactive flashcard */
.ifc{perspective:1200px;height:150px;cursor:pointer;margin-top:14px}
.ifc:active .ifc-in{scale:.98}
.ifc.out .ifc-in{transform:translateX(28px) rotate(3deg);opacity:0;transition:transform .22s ease-in,opacity .22s ease-in}
.ifc.enter .ifc-in{transform:translateX(-16px);opacity:0;transition:none}
.ifc-in{scale:1;transition:scale .12s}
.ifc-in{position:relative;width:100%;height:100%;transition:transform .52s var(--ease-spring),opacity .26s var(--ease),scale .12s;transform-style:preserve-3d}
.ifc.flip .ifc-in{transform:rotateY(180deg)}
.ifc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.ifc-face strong{font-size:22px;letter-spacing:-.03em}
.ifc-face span{font-size:13px;color:var(--mut);line-height:1.45}
.ifc-face.back{transform:rotateY(180deg);background:var(--acbg);border-color:var(--acline)}
.ifc-face .k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ac)}
.ifc-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.ifc-bar button{font:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:99px;padding:8px;cursor:pointer}
.ifc-bar button.ok{background:var(--ac);color:var(--on-ac);border-color:var(--ac)}
.ifc:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:14px}
.ifc-count{font-size:12px;color:var(--faint);text-align:center;margin-top:8px}

/* interactive quiz */
.iq{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.iq button:active{transform:scale(.98);transition:transform .15s}
.iq .why.in{animation:whyin .2s var(--ease) both}
@keyframes whyin{from{opacity:0;transform:translateY(-4px)}}
.iq .qq{font-size:14px;font-weight:600;line-height:1.4}
.iq button{font:inherit;text-align:left;font-size:13px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:9px 12px;cursor:pointer;transition:all .2s;display:flex;justify-content:space-between;gap:8px}
.iq button:hover{border-color:var(--faint)}
.iq button.right{border-color:var(--ac);background:var(--acbg);color:var(--ac);font-weight:600}
.iq button.wrong{border-color:var(--bad);background:var(--badbg);color:var(--bad)}
.iq button:disabled{cursor:default}
.iq .why{font-size:12.5px;color:var(--mut);line-height:1.5;border-left:2px solid var(--ac);padding-left:10px;margin-top:4px}

/* the no list */
.nolist{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.nolist div{display:flex;flex-direction:column;gap:6px;padding:22px 20px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.nolist b{font-weight:700;font-size:26px;line-height:1;color:var(--ac);letter-spacing:-.02em}
.nolist span{font-size:14.5px;color:var(--mut)}
.nolist strong{font-size:16px;letter-spacing:-.01em}
@media(max-width:940px){.nolist{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.nolist{grid-template-columns:1fr 1fr}}

/* teachers band */
.teach{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:clamp(28px,5vw,56px);border-radius:28px;background:var(--bg2);border:1px solid var(--line)}
.teach>*{min-width:0}
.teach ol{margin:20px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.teach li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px}
.teach li b{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:13px}
.teach .link-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow-lg)}
.teach .link-card .url{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;font-weight:500;margin-top:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.teach .link-card .url i{font-style:normal;color:var(--faint)}
.teach .avatars{display:flex;margin-top:16px}
.teach .avatars span{width:34px;height:34px;border-radius:50%;border:2px solid var(--card);margin-left:-8px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff}
.teach .avatars span:first-child{margin-left:0}
@media(max-width:820px){.teach{grid-template-columns:1fr}}

/* stat count-up: keep tabular so digits do not jitter */