/* ClassHub design language: paper on a desk.
   Warm ink neutrals, a highlighter yellow for "you are here", a red pencil for urgency.
   Subject colours (from the database) carry all other colour. */
:root {
  --desk: #e8e6e0; --paper: #fbfaf7; --card: #f2f0eb; --card-2: #e8e5de; --rule: #dedad1;
  --hover: rgba(29, 28, 26, .045);
  --ink: #1d1c1a; --ink-2: #5f5b54; --ink-3: #9b968d;
  --hl: #f2d16b; --hl-soft: #f8eab8; --hl-ink: #4a3a07;
  --red: #b5452b; --red-soft: #f6e2da; --amber: #8f630e; --amber-soft: #f4e9d0; --ok: #3e6b4f; --ok-soft: #e1eadf;
  --glass: rgba(251, 250, 247, .78);
  --sheet: #fdfcf9; --sheet-fold: #e2ded4;
  --sh-1: 0 1px 1px rgba(64, 50, 28, .05), 0 2px 6px -2px rgba(64, 50, 28, .08);
  --sh-2: 0 1px 1px rgba(64, 50, 28, .04), 0 12px 32px -14px rgba(64, 50, 28, .22);
  --sh-sheet: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 1px 2px rgba(64, 50, 28, .06), 0 24px 60px -30px rgba(64, 50, 28, .28);
  --r-xl: 26px; --r-lg: 18px; --r-md: 13px; --r-sm: 9px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  color-scheme: light;
}
html[data-theme="dark"] {
    /* space black: near-true black with a faint cool undertone; surfaces step up in lightness */
    --desk: #07080a; --paper: #0d0e11; --card: #15171b; --card-2: #1c1f24; --rule: #262a31;
    --hover: rgba(210, 222, 255, .05);
    --ink: #eceef2; --ink-2: #a2a7b1; --ink-3: #686d78;
    --hl: #e0bd55; --hl-soft: #2a2415; --hl-ink: #f3dc93;
    --red: #ec8a72; --red-soft: #2d1813; --amber: #e2b25e; --amber-soft: #271e11; --ok: #8fc6a4; --ok-soft: #12211a;
    --glass: rgba(13, 14, 17, .78);
    --sheet: #1a1d22; --sheet-fold: #2b2f37;
    --sh-1: 0 0 0 1px rgba(255, 255, 255, .025), 0 2px 6px -2px rgba(0, 0, 0, .6);
    --sh-2: 0 0 0 1px rgba(255, 255, 255, .03), 0 14px 36px -14px rgba(0, 0, 0, .85);
    --sh-sheet: 0 1px 0 rgba(255, 255, 255, .045) inset, 0 24px 60px -30px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { background: var(--desk); color: var(--ink); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; padding: 0; }
b, strong { font-weight: 600; }
::selection { background: var(--hl); color: #1d1c1a; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 10px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 12px; font-weight: 600; }
.skip:focus { top: 12px; }

/* icons: stroke layer + duotone layer */
svg.i { width: 20px; height: 20px; flex: none; }
svg.i .s { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
svg.i .d { fill: currentColor; opacity: .13; transition: opacity .25s, fill .25s; }
svg.mute { color: var(--ink-3); }
.muted { color: var(--ink-2); }
.fine { font-size: 13px; color: var(--ink-3); margin-top: 18px; }
form.inline { display: inline-flex; margin: 0; }

/* paper grain over everything */
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.18 0 0 0 1.2 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: .03; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100dvh; }
.side { position: sticky; top: 0; height: 100dvh; overflow-y: auto; scrollbar-width: none; padding: 18px 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 21px/1 var(--display); letter-spacing: -.03em; padding: 6px 12px 26px; }
.brand .mark { width: 30px; height: 30px; flex: none; transition: transform .5s var(--spring); }
.brand:hover .mark { transform: rotate(-8deg) scale(1.06); }
.navs { display: flex; flex-direction: column; gap: 2px; }
.nav { position: relative; display: flex; align-items: center; gap: 13px; height: 40px; padding: 0 12px; border-radius: 12px; color: var(--ink-2); font-weight: 500; transition: background .2s, color .2s, box-shadow .2s; }
.nav:hover { background: var(--hover); color: var(--ink); }
.nav.on { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: var(--sh-1); }
.nav.on svg.i .d { fill: var(--hl); opacity: 1; }
.nav:not(.navsub):active { transform: translateY(1px); }
.nav.navsub { min-height: 34px; height: auto; padding-top: 7px; padding-bottom: 7px; font-size: 14px; gap: 12px; }
.nav.navsub { flex: none; }  /* in the scrolling subject list: scroll, never squeeze links into each other */
.nav.navsub span { line-height: 1.25; overflow-wrap: anywhere; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.spine { width: 8px; height: 18px; flex: none; border-radius: 2px 4px 4px 2px; background: var(--c); margin: 0 6px 0 6px; box-shadow: inset 2px 0 0 rgba(0,0,0,.18); transition: transform .3s var(--spring); }
.nav.navsub:hover .spine, .nav.navsub.on .spine { transform: scaleY(1.25); }
.side-label { font: 500 11.5px var(--mono); color: var(--ink-3); padding: 22px 12px 8px; letter-spacing: .02em; }
.side .spacer { flex: 1; min-height: 16px; }
.me { display: flex; align-items: center; gap: 10px; padding: 12px 4px 2px 8px; margin-top: 8px; border-top: 1px solid var(--rule); }
.avatar { width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 600 12.5px var(--mono); }
.who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.who b { font-size: 13.5px; overflow-wrap: anywhere; }
.who small { font-size: 11.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.main { background: var(--paper); margin: 10px 10px 10px 0; border-radius: var(--r-xl); min-width: 0; display: flex; flex-direction: column; box-shadow: var(--sh-sheet); position: relative; }
.top { display: flex; align-items: center; gap: 12px; padding: 14px 20px 6px 36px; }
.top .grow { flex: 1; }
.brand.m { display: none; padding: 0; font-size: 19px; }
.synced { display: inline-flex; align-items: center; gap: 8px; font: 12.5px var(--mono); color: var(--ink-3); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: pulse 2.6s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.content { padding: 8px 36px 72px; max-width: 1220px; width: 100%; }
.icon-btn { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); flex: none; transition: background .2s, color .2s, transform .15s; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn:active { transform: scale(.94); }

/* ---------- type ---------- */
.eyebrow { font: 500 12.5px var(--mono); color: var(--ink-3); margin: 18px 0 0; letter-spacing: .01em; }
h1.page { font: 700 40px/1.04 var(--display); letter-spacing: -.035em; margin: 8px 0 8px; text-wrap: balance; font-variation-settings: "opsz" 96; }
.sub { color: var(--ink-2); margin: 0 0 26px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 68ch; text-wrap: pretty; }
h2.sec { font: 650 19px/1.25 var(--display); letter-spacing: -.02em; margin: 40px 0 14px; display: flex; align-items: baseline; gap: 10px; }
h2.sec .link { margin-left: auto; font: 500 13.5px var(--font); color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; transition: color .2s, gap .25s var(--ease); }
h2.sec .link::after { content: "→"; font-family: var(--mono); }
h2.sec .link:hover { color: var(--ink); gap: 8px; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 500; margin: 14px 0 0 -4px; transition: color .2s, gap .25s var(--ease); }
.back:hover { color: var(--ink); gap: 8px; }
.back svg { width: 18px; height: 18px; }
.hl { background: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%); padding: 0 .08em; }
html[data-theme="dark"] .hl { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--hl) 45%, transparent) 58%, color-mix(in srgb, var(--hl) 45%, transparent) 92%, transparent 92%); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn { height: 42px; padding: 0 18px; border-radius: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s, box-shadow .2s, transform .15s var(--ease), color .2s; white-space: nowrap; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.sm { height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 11px; gap: 6px; }
.btn.sm svg { width: 17px; height: 17px; }
.btn.primary { background: var(--ink); color: var(--paper); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, var(--sh-1); }
.btn.primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, var(--sh-2); transform: translateY(-1px); }
.btn.primary svg.i .d { fill: var(--hl); opacity: 1; }
.btn.tonal { background: var(--hl-soft); color: var(--hl-ink); }
.btn.tonal:hover { background: var(--hl); color: #1d1c1a; }
.btn.plain { background: var(--card); color: var(--ink); }
.btn.plain:hover { background: var(--card-2); }
.btn.block { width: 100%; height: 52px; border-radius: 15px; font-size: 15.5px; margin-top: 10px; }
.btn[disabled] { opacity: .75; pointer-events: none; }
.btn .lottie.btn-anim { width: 20px; height: 20px; flex: none; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- lottie + rings ---------- */
.lottie { width: 100%; }
.lottie svg { display: block; }
.ring { display: block; transform: rotate(-90deg); overflow: visible; }
.ring circle { fill: none; stroke-width: var(--sw, 4); }
.ring .track { stroke: var(--card-2); }
.ring .val { stroke: var(--ring, var(--ink)); stroke-linecap: round; stroke-dasharray: var(--p) 100; animation: ring 1.1s var(--ease) both; }
@keyframes ring { from { stroke-dasharray: 0 100; } }

/* ---------- dashboard ---------- */
.board { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(260px, 1fr); gap: 14px; align-items: start; }
.panel { background: var(--card); border-radius: var(--r-xl); padding: 20px 22px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.panel-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.panel-h b { font: 650 16px var(--display); letter-spacing: -.01em; }
.panel-h small { margin-left: auto; font: 12px var(--mono); color: var(--ink-3); }

.week { flex: 1; display: flex; flex-direction: column; }
.day { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--rule); align-items: start; }
.day:first-child { border-top: 0; padding-top: 0; }
.day .when { display: flex; align-items: baseline; gap: 6px; padding-top: 4px; }
.day .dd { font: 700 22px/1 var(--display); letter-spacing: -.04em; position: relative; isolation: isolate; font-variant-numeric: tabular-nums; }
.day .dn { font: 500 11.5px var(--mono); color: var(--ink-2); }
.day.today .dd::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: 0; height: 9px; background: var(--hl); z-index: -1; border-radius: 2px; }
.day .scribble { position: absolute; left: -12px; top: -12px; width: 50px; height: 46px; pointer-events: none; overflow: visible; }
.day .scribble path { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw .9s var(--ease) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.items { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; padding-top: 2px; }
.tag { position: relative; flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 11px 40px 12px 14px; border-radius: 12px; overflow: hidden; background: var(--sheet); color: var(--ink);
  box-shadow: 0 0 0 1px var(--rule), 0 1px 1px rgba(64, 50, 28, .05), 0 8px 16px -10px rgba(64, 50, 28, .3); transition: transform .3s var(--spring), box-shadow .25s; }
.tag .bm { right: 14px; top: 0; }
.day:nth-child(odd) .tag { transform: rotate(-.35deg); }
.day:nth-child(even) .tag { transform: rotate(.3deg); }
.tag .tt { font-size: 14px; font-weight: 550; line-height: 1.3; overflow-wrap: anywhere; }
.tag .tm { font: 11.5px var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.day .tag:hover { transform: translateY(-2px) rotate(0); box-shadow: 0 0 0 1px var(--rule), 0 14px 24px -12px rgba(64, 50, 28, .35); }
.tag:hover .bm { height: 27px; }
html[data-theme="dark"] .tag { box-shadow: 0 0 0 1px var(--rule), 0 8px 16px -10px rgba(0, 0, 0, .6); }
.day .free { font: 12px var(--mono); color: var(--ink-3); padding-top: 7px; }
html[data-theme="dark"] .day.today .dd::after { background: color-mix(in srgb, var(--hl) 60%, transparent); }

.countdown { display: flex; flex-direction: column; padding: 0; }
.countdown .cover { height: 92px; width: 100%; display: block; }
.countdown .cbody { padding: 18px 22px 20px; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; align-content: start; }
.countdown .ringwrap { position: relative; grid-row: span 2; --ring: var(--c); }
.countdown .ringwrap .n { position: absolute; inset: 0; display: grid; place-items: center; font: 700 28px/1 var(--display); letter-spacing: -.04em; }
.countdown .t { font: 650 17px/1.25 var(--display); letter-spacing: -.015em; align-self: end; }
.countdown .s { font: 12.5px var(--mono); color: var(--ink-2); align-self: start; }
.countdown .next { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 14px; border-top: 1px dashed var(--rule); }
.countdown .next a { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.countdown .next a:hover { color: var(--ink); }
.countdown .next i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: none; }
.countdown .next span:last-child { margin-left: auto; font: 12px var(--mono); color: var(--ink-3); }
.cover-code { position: absolute; left: 22px; top: 50px; font: 800 30px/1 var(--display); letter-spacing: -.04em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }

.figs { display: flex; gap: 0; margin: 18px 0 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.fig { flex: 1; display: flex; align-items: center; gap: 14px; padding: 16px 20px 16px 0; transition: background .2s; }
.fig + .fig { padding-left: 20px; border-left: 1px solid var(--rule); }
.fig .n { font: 500 30px/1 var(--mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.fig .l { font-size: 13.5px; color: var(--ink-2); line-height: 1.3; }
.fig .bars { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin-left: auto; }
.fig .bars i { width: 5px; border-radius: 2px; background: var(--c, var(--ink-3)); opacity: .85; transform-origin: bottom; animation: grow .8s var(--spring) both; animation-delay: calc(var(--k) * 40ms); }
@keyframes grow { from { transform: scaleY(0); } }
.fig:hover .n { color: var(--ink); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { background: var(--card); border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 2px; }
.stat .n { font: 500 32px/1.1 var(--mono); letter-spacing: -.04em; }
.stat .l { color: var(--ink-2); font-size: 14px; }

.banner { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: var(--r-md); margin-top: 12px; font-size: 14.5px; background: var(--red-soft); color: var(--red); }
.banner svg.i { width: 22px; height: 22px; }
.banner b { font-weight: 650; }
.banner span { color: color-mix(in srgb, var(--red) 70%, var(--ink)); }
.flash { position: fixed; left: 50%; top: 18px; z-index: 30; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 11px 18px 11px 14px; border-radius: 14px; font-weight: 500; font-size: 14px; box-shadow: var(--sh-2); animation: drop .6s var(--spring) both; transition: opacity .4s, transform .4s var(--ease); }
.flash div { display: flex; align-items: center; gap: 10px; }
.flash svg.i { width: 18px; height: 18px; color: var(--hl); }
.flash.gone { opacity: 0; transform: translate(-50%, -12px); pointer-events: none; }
@keyframes drop { from { opacity: 0; transform: translate(-50%, -20px) scale(.96); } }

.cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 36px; }
.cols > section, .content > * { min-width: 0; }

/* bookmark ribbon in the subject colour, hanging from a card's top edge */
.bm { position: absolute; top: -1px; width: 12px; height: 22px; background: var(--c); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); transition: height .3s var(--spring); pointer-events: none; }

/* ---------- lists ---------- */
.list { display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-lg); padding: 5px; }
.row { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-md); min-width: 0; transition: background .2s, box-shadow .2s, transform .2s var(--ease); }
.row + .row::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: var(--rule); transition: opacity .2s; }
a.row:hover, .row.file:hover { background: var(--paper); box-shadow: var(--sh-1); }
a.row:hover::before, .row.file:hover::before, a.row:hover + .row::before, .row.file:hover + .row::before { opacity: 0; }
a.row:active { transform: scale(.995); }
.row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row .t { font-weight: 550; line-height: 1.35; overflow-wrap: anywhere; }
.row .s { font-size: 13px; color: var(--ink-2); line-height: 1.4; overflow-wrap: anywhere; }
.row .s .dotc { vertical-align: 1px; }
.dotc { width: 7px; height: 7px; border-radius: 2px; background: var(--c); display: inline-block; margin-right: 7px; flex: none; }
.row.task .tab-mark { width: 4px; align-self: stretch; margin: 2px 0; border-radius: 3px; flex: none; background: var(--c); }
.row > svg.i.mute { transition: transform .25s var(--ease); }
a.row:hover > svg.i.mute { transform: translateX(3px); color: var(--ink-2); }
.due { font: 500 12.5px var(--mono); white-space: nowrap; padding: 5px 9px; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px; letter-spacing: -.01em; }
.due svg.i { width: 15px; height: 15px; }
.due.urgent { background: var(--red-soft); color: var(--red); }
.due.soon { background: var(--amber-soft); color: var(--amber); }
.due.later { color: var(--ink-2); }
.due.past { color: var(--red); }
.due.none { color: var(--ink-3); }
.chip { font-size: 12.5px; font-weight: 600; padding: 5px 10px 5px 8px; border-radius: 8px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.chip svg.i { width: 15px; height: 15px; }
.chip svg.i .s { stroke-width: 2.2; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.no { background: var(--card-2); color: var(--ink-2); }

/* file thumbnail: a small page in the subject's colour */
.sheet { width: 32px; height: 40px; flex: none; display: block; filter: drop-shadow(0 0 .6px rgba(64, 50, 28, .45)) drop-shadow(0 1px 1.5px rgba(64, 50, 28, .12)); transition: transform .35s var(--spring); }
.sheet .pg { position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; height: 100%; padding: 11px 6px 0; background: var(--sheet); border-radius: 4px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.sheet .pg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c); }
.sheet .pg::after { content: ""; position: absolute; right: 0; top: 0; width: 10px; height: 10px; background: linear-gradient(to bottom left, transparent 50%, var(--sheet-fold) 50%); border-bottom-left-radius: 2px; }
.sheet i { display: block; height: 2px; border-radius: 1px; background: var(--ink-3); opacity: .45; }
.sheet i:nth-child(2) { width: 70%; } .sheet i:nth-child(3) { width: 85%; }
.sheet b { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 600 7.5px var(--mono); color: var(--c); letter-spacing: .02em; }
.row.file:hover .sheet { transform: rotate(-4deg) translateY(-1px); }
html[data-theme="dark"] .sheet { filter: drop-shadow(0 0 .6px rgba(210, 222, 255, .2)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, .7)); }

/* ---------- subjects (notebook covers) ---------- */
.subjects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.subj { background: var(--card); border-radius: var(--r-lg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: transform .35s var(--spring), box-shadow .3s; position: relative; }
.subj:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--sh-2); }
.subj .cover { height: 66px; width: 100%; display: block; transition: transform .6s var(--ease); }
.subj:hover .cover { transform: scale(1.06); }
.subj .code { position: absolute; left: 14px; top: 16px; font: 800 24px/1 var(--display); letter-spacing: -.04em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.subj .sbody { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; }
.subj .t { font-weight: 620; line-height: 1.3; }
.subj .s { font-size: 12.5px; color: var(--ink-2); }
.subj .cnt { margin-top: 8px; font: 500 12px var(--mono); color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.subj .cnt i { display: inline-flex; gap: 2px; }
.subj .cnt i b { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.subj .cnt.clear { color: var(--ok); }

/* ---------- empty states ---------- */
.empty { text-align: center; padding: 36px 20px 48px; color: var(--ink-2); display: flex; flex-direction: column; align-items: center; }
.empty .lottie { width: 210px; max-width: 70%; }
.empty h3 { font: 650 21px var(--display); letter-spacing: -.02em; color: var(--ink); margin: 6px 0 4px; }
.empty.sm { padding: 18px 20px 24px; background: var(--card); border-radius: var(--r-lg); }
.empty.sm .lottie { width: 120px; }
.empty.sm h3 { font-size: 17px; }
.empty p { margin: 4px 0 16px; max-width: 42ch; text-wrap: pretty; }

/* ---------- segmented control ---------- */
.seg { display: inline-flex; background: var(--card); border-radius: 14px; padding: 4px; margin-bottom: 20px; flex-wrap: wrap; gap: 2px; }
.seg a { padding: 8px 15px; border-radius: 10px; font-weight: 550; color: var(--ink-2); font-size: 14.5px; display: inline-flex; gap: 8px; align-items: center; transition: background .2s, color .2s; }
.seg a:hover { color: var(--ink); }
.seg a b { font: 500 12px var(--mono); color: var(--ink-3); }
.seg a.on { background: var(--paper); color: var(--ink); box-shadow: var(--sh-1); }
.seg a.on b { color: var(--ink); background: var(--hl); padding: 1px 6px; border-radius: 5px; }
html[data-theme="dark"] .seg a.on b { color: #1d1c1a; }

.search { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 18px; background: var(--card); border-radius: 15px; color: var(--ink-2); max-width: 560px; transition: box-shadow .2s, background .2s; }
.search:focus-within { background: var(--paper); box-shadow: 0 0 0 2px var(--ink), var(--sh-2); }
.search input { flex: 1; border: 0; background: none; outline: none; font-size: 16px; color: var(--ink); min-width: 0; }
.search kbd { font: 11px var(--mono); color: var(--ink-3); border: 1px solid var(--rule); border-radius: 6px; padding: 2px 6px; }

/* ---------- subject page ---------- */
.subject-head { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.subject-head .sub { margin-bottom: 0; }
.subject-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; margin: 14px 0 24px; min-height: 150px; display: flex; align-items: flex-end; }
.subject-hero .cover { position: absolute; inset: 0; width: 100%; height: 100%; }
.subject-hero .inner { position: relative; padding: 22px 26px; color: #fff; width: 100%; background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.08)); }
.subject-hero h1.page { color: #fff; margin: 0 0 4px; }
.subject-hero .sub { color: rgba(255,255,255,.85); margin: 0; font-size: 14.5px; }
.subject-hero .code { position: absolute; right: 22px; top: 12px; font: 800 72px/1 var(--display); letter-spacing: -.05em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.units { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 28px; }
.units::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 2px; background: repeating-linear-gradient(var(--rule) 0 6px, transparent 6px 10px); }
.unit { position: relative; display: flex; gap: 16px; background: var(--card); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 8px; }
.unit::before { content: ""; position: absolute; left: -24px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--paper); }
.unit.gap::before { background: var(--paper); box-shadow: 0 0 0 4px var(--paper), inset 0 0 0 2px var(--amber); }
.unit .uno { font: 500 12.5px var(--mono); color: var(--ink-3); width: 54px; flex: none; padding-top: 2px; }
.unit .ubody { flex: 1; min-width: 0; }
.unit p { margin: 2px 0 10px; color: var(--ink-2); font-size: 14px; }
.uhits { display: flex; flex-wrap: wrap; gap: 6px; }
.uhits a { display: inline-flex; gap: 6px; align-items: center; background: var(--paper); padding: 6px 11px; border-radius: 9px; font-size: 13px; font-weight: 500; box-shadow: var(--sh-1); transition: transform .25s var(--spring); }
.uhits a:hover { transform: translateY(-1px); }
.uhits svg { width: 15px; height: 15px; color: var(--ok); }
.ugap { display: inline-flex; gap: 6px; align-items: center; color: var(--amber); font-size: 13.5px; font-weight: 600; }
.ugap svg { width: 16px; height: 16px; }

/* ---------- study notes (index cards) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.card { position: relative; background: var(--paper); border-radius: 6px 6px 14px 14px; padding: 18px 18px 16px 30px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 0 0 1px var(--rule), var(--sh-1);
  background-image: linear-gradient(90deg, transparent 20px, color-mix(in srgb, var(--red) 45%, transparent) 20px, color-mix(in srgb, var(--red) 45%, transparent) 21.5px, transparent 21.5px), repeating-linear-gradient(transparent 0 25px, var(--rule) 25px 26px);
  background-position: 0 0, 0 14px; transition: transform .4s var(--spring), box-shadow .3s; }
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--c); border-radius: 6px 6px 0 0; }
.card:hover { transform: translateY(-4px) rotate(-.8deg); box-shadow: 0 0 0 1px var(--rule), var(--sh-2); }
.card:nth-child(even):hover { transform: translateY(-4px) rotate(.8deg); }
.card .t { font: 650 16.5px/1.3 var(--display); letter-spacing: -.015em; }
.card .p { font-size: 14px; color: var(--ink-2); line-height: 26px; }
.card .s { font: 12px var(--mono); color: var(--ink-3); margin-top: auto; padding-top: 6px; }
.note-head { display: flex; align-items: flex-end; gap: 16px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 22px; }
.note-head .actions { display: flex; gap: 8px; margin-bottom: 26px; }
.note { max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.block { background: var(--card); border-radius: var(--r-lg); padding: 22px 26px; }
.block h2 { font: 500 12.5px var(--mono); color: var(--ink-3); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.block h2 svg.i { width: 18px; height: 18px; color: var(--ink-2); }
.block p { margin: 0; font-size: 16.5px; line-height: 1.7; max-width: 68ch; }
.lead-block { background: var(--paper); box-shadow: 0 0 0 1px var(--rule); }
.lead-block p { font-size: 18px; font-family: var(--font); }
.block ul, .block ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; line-height: 1.55; counter-reset: n; }
.block li { padding: 10px 0 10px 26px; position: relative; }
.block li + li { box-shadow: 0 -1px 0 var(--rule); }
.block ul li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 9px; height: 2px; background: var(--ink-2); border-radius: 2px; }
.block ol li { counter-increment: n; padding-left: 40px; }
.block ol li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 10px; font: 500 13px/1.7 var(--mono); color: var(--red); }
.terms { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.terms div { background: var(--paper); border-radius: var(--r-md); padding: 13px 15px; box-shadow: var(--sh-1); }
.terms dt { font-weight: 650; margin-bottom: 2px; display: inline; background: linear-gradient(transparent 60%, var(--hl-soft) 60%); }
.terms dd { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }

/* ---------- exams ---------- */
.exam-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.exam { background: var(--card); border-radius: var(--r-lg); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .35s var(--spring), box-shadow .3s; }
.exam:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.exam .cover { height: 54px; width: 100%; display: block; }
.exam .ebody { padding: 14px 16px 16px; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; }
.exam .ringwrap { grid-row: span 2; position: relative; --ring: var(--c); }
.exam .ringwrap b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 20px/1 var(--display); letter-spacing: -.04em; }
.exam .t { font-weight: 620; line-height: 1.25; align-self: end; }
.exam .s { font: 12px var(--mono); color: var(--ink-2); align-self: start; }
.exam .days { display: none; }
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.plan { background: var(--card); border-radius: var(--r-lg); padding: 18px 20px; }
.plan-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.plan-h i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.plan-h b { font: 650 16px var(--display); letter-spacing: -.01em; }
.plan-h .muted { margin-left: auto; font: 12px var(--mono); }
.plan ol { list-style: none; margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; position: relative; }
.plan ol::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 2px; background: var(--rule); border-radius: 1px; }
.plan li { display: flex; gap: 14px; padding: 7px 0; font-size: 14.5px; position: relative; }
.plan li::before { content: ""; position: absolute; left: -18px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--c); }
.plan li.now::before { background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }
.plan li:last-child::before { background: var(--red); box-shadow: none; border-radius: 3px; }
.plan .when { width: 96px; flex: none; color: var(--ink-3); font: 12.5px/1.9 var(--mono); }
.plan li.now .when { color: var(--ink); font-weight: 600; }

/* ---------- faculty ---------- */
.fcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.fcard { background: var(--card); border-radius: var(--r-xl); padding: 0; display: grid; grid-template-columns: 1fr auto; gap: 0; overflow: hidden; transition: transform .35s var(--spring), box-shadow .3s; position: relative; }
.fcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.fcard .cover { grid-column: 1 / -1; height: 58px; width: 100%; display: block; }
.fcard .code { position: absolute; left: 22px; top: 14px; font: 800 30px/1 var(--display); letter-spacing: -.04em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.fh { display: flex; gap: 12px; align-items: center; padding: 18px 22px 0; }
.fh b { display: block; font: 650 17px/1.25 var(--display); letter-spacing: -.015em; } .fh small { color: var(--ink-2); font: 12px var(--mono); }
.pct { padding: 14px 22px 0 0; position: relative; --ring: var(--c); }
.pct b { position: absolute; inset: 14px 22px 0 0; display: grid; place-items: center; font: 600 16px/1 var(--mono); letter-spacing: -.03em; }
.pct small { display: none; }
.fstats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 16px 22px 20px; border-top: 1px solid var(--rule); padding-top: 14px; }
.fstats div + div { padding-left: 14px; border-left: 1px solid var(--rule); }
.fstats b { display: block; font: 500 22px/1.2 var(--mono); letter-spacing: -.03em; } .fstats small { color: var(--ink-2); font-size: 12.5px; line-height: 1.25; display: block; }
.fstats .warn b { color: var(--red); }
.acards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.acard { background: var(--card); border-radius: var(--r-lg); padding: 16px 16px 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: start; --ring: var(--ok); }
.acard .at { font-weight: 620; line-height: 1.3; min-height: 2.6em; }
.acard .ringwrap { position: relative; }
.acard .ringwrap b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 11.5px var(--mono); }
.acard .as, .acard .an, .acard .miss, .acard .btn { grid-column: 1 / -1; }
.acard .as .due { padding: 0; background: none; }
.meter { height: 6px; background: var(--card-2); border-radius: 3px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--ok); border-radius: 3px; transform-origin: left; animation: fillx 1s var(--ease) both; }
@keyframes fillx { from { transform: scaleX(0); } }
.acard .an { font-size: 13.5px; color: var(--ink-2); }
.acard .an b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.acard .btn { margin-top: 4px; justify-self: start; }
.miss summary { font-size: 13px; color: var(--red); font-weight: 600; cursor: pointer; }
.miss p { font-size: 13px; color: var(--ink-2); margin: 6px 0 0; }
.gridwrap { overflow: auto; background: var(--card); border-radius: var(--r-lg); max-height: 70vh; }
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
.grid th, .grid td { padding: 9px 10px; text-align: center; white-space: nowrap; }
.grid tbody td { border-top: 1px solid var(--rule); }
.grid thead th { position: sticky; top: 0; background: var(--card); z-index: 1; box-shadow: inset 0 -1px 0 var(--rule); font: 500 12px var(--mono); color: var(--ink-2); }
.grid thead th { white-space: normal; vertical-align: bottom; }
.grid thead th span { display: block; min-width: 96px; max-width: 150px; margin: 0 auto; line-height: 1.3; }
.grid .stick { position: sticky; left: 0; background: var(--card); text-align: left; z-index: 2; }
.grid td.stick b { display: block; font-weight: 550; } .grid td.stick small { color: var(--ink-3); font: 11.5px var(--mono); }
.grid tbody tr:hover td { background: var(--paper); }
.cell { font-size: 12.5px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.cell::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cell.ok { color: var(--ink); font: 500 15px var(--mono); }
.cell.ok::before { display: none; }
.cell.in { color: var(--ok); }
.cell.late { color: var(--amber); }
.cell.miss { color: var(--red); }
.cell.wait { color: var(--ink-3); font-weight: 500; }
.cell.wait::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.legend { font-size: 13.5px; color: var(--ink-2); margin-top: 14px; }

/* ---------- cloud services ---------- */
.clouds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cloudcol { background: var(--card); border-radius: var(--r-xl); padding: 18px 16px 12px; }
.cloudcol h2 { font: 650 17px var(--display); letter-spacing: -.015em; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.cloudcol h2 small { margin-left: auto; font: 500 12px var(--mono); color: var(--ink-3); }
.meterline { display: flex; gap: 3px; margin: 10px 0 12px; }
.meterline i { flex: 1; height: 4px; border-radius: 2px; background: var(--card-2); }
.meterline i.on { background: var(--ok); }
.svc { display: flex; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--rule); align-items: flex-start; }
.lamp { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 6px; box-shadow: inset 0 0 0 2px var(--ink-3); }
.lamp.on { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 20%, transparent); }
.svc .t { font-weight: 600; display: block; }
.svc .s { font-size: 13px; color: var(--ink-2); display: block; }
.svc .detail { display: block; font: 11.5px var(--mono); color: var(--ink-3); margin-top: 4px; overflow-wrap: anywhere; }
.svc .detail.on { color: var(--ok); }

/* ---------- sign in ---------- */
.login { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--paper); }
.login-card { width: min(460px, 100%); }
.login .left { display: flex; flex-direction: column; justify-content: center; padding: 32px clamp(24px, 6vw, 88px); }
.login .brand { padding: 0 0 clamp(24px, 5vh, 52px); font-size: 22px; }
.login h1 { font: 700 clamp(34px, min(4.2vw, 6.4vh), 54px)/1.02 var(--display); letter-spacing: -.04em; margin: 0 0 16px; text-wrap: balance; }
.lead { color: var(--ink-2); font-size: 16px; margin: 0 0 24px; max-width: 46ch; text-wrap: pretty; }
.perks { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.perks > div { display: flex; gap: 14px; align-items: flex-start; }
.perks svg.i { width: 22px; height: 22px; margin-top: 1px; color: var(--ink); }
.perks svg.i .d { fill: var(--hl); opacity: 1; }
.perks b { display: block; font-weight: 620; color: var(--ink); font-size: 15px; }
.perks span > span { font-size: 14px; color: var(--ink-2); }
.login .right { position: relative; margin: 12px; border-radius: 30px; background: var(--desk); overflow: hidden; display: grid; place-items: center;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; }
.login .right .lottie { width: min(560px, 88%); position: relative; z-index: 1; }
.float { position: absolute; z-index: 2; background: var(--paper); border-radius: 14px; padding: 10px 14px; box-shadow: var(--sh-2); display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 550; animation: bob 6s ease-in-out infinite; }
.float small { display: block; font: 11.5px var(--mono); color: var(--ink-3); font-weight: 400; }
.float i { width: 10px; height: 26px; border-radius: 3px; background: var(--c); }
.float.f1 { top: 14%; left: 9%; animation-delay: -1s; }
.float.f2 { bottom: 16%; right: 8%; animation-delay: -3.5s; }
.float.f3 { top: 18%; right: 11%; animation-delay: -2s; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-1deg); } }
.login .quote { position: absolute; left: 32px; bottom: 26px; font: 12px var(--mono); color: var(--ink-3); z-index: 2; }
.error-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; text-align: center; background: var(--paper); }
.error-page .lottie { width: 220px; margin: 0 auto; }
.error-page h1 { font: 700 64px/1 var(--display); letter-spacing: -.05em; margin: 8px 0; }

/* ---------- motion: page entry + view transitions ---------- */
/* Moving between pages: the sidebar and tab bar stay put, only the page itself swaps in a quick crossfade.
   Content is fully visible from the first frame, so a page is readable the moment it arrives. */
@view-transition { navigation: auto; }
.side { view-transition-name: side; }
.tabbar { view-transition-name: tabbar; }
.content { view-transition-name: page; }
::view-transition-group(*) { animation-duration: .16s; animation-timing-function: var(--ease); }
::view-transition-old(page) { animation: .1s ease-out both vt-out; }
::view-transition-new(page) { animation: .16s var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
.login .left > * { animation: rise .42s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- mobile ---------- */
.tabbar { display: none; }
@media (max-width: 1100px) { .board { grid-template-columns: 1fr; } .clouds { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .cols { grid-template-columns: 1fr; gap: 0; } .stats { grid-template-columns: 1fr 1fr; } .login { grid-template-columns: 1fr; } .login .right { min-height: 380px; order: -1; } }
@media (max-width: 760px) {
  .fcards, .plans { grid-template-columns: 1fr; }
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .main { margin: 0; border-radius: 0; min-height: 100dvh; box-shadow: none; }
  .top { padding: calc(10px + env(safe-area-inset-top)) 16px 10px; border-radius: 0; }
  .brand.m { display: flex; }
  .hide-m { display: none; }
  .synced { display: none; }
  .content { padding: 4px 16px calc(120px + env(safe-area-inset-bottom)); }
  h1.page { font-size: 31px; }
  .day { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; }
  .tag { flex-basis: 100%; }
  .day .when { flex-direction: column; gap: 3px; }
  .figs { flex-direction: column; }
  .fig + .fig { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .fig { padding-right: 0; }
  .subjects { grid-template-columns: 1fr 1fr; }
  .terms { grid-template-columns: 1fr; }
  .row.file .btn span { display: none; }
  .row.file .btn { padding: 0 10px; }
  .row.file .icon-btn { display: none; }
  .row { padding: 12px; gap: 12px; }
  .row .due { font-size: 11.5px; padding: 4px 7px; }
  .seg { display: flex; }
  .seg a { flex: 1; justify-content: center; padding: 8px 8px; }
  .fstats { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .fstats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .plan .when { width: 84px; }
  .subject-hero .code { font-size: 48px; }
  .login .left { padding: 32px 20px 40px; }
  .login .brand { padding-bottom: 28px; }
  .float.f3 { display: none; }
  .tabbar {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 10;
    border-radius: 22px; padding: 6px 4px;
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--rule), 0 14px 36px -14px rgba(40, 30, 10, .35);
  }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 6px 0 4px; border-radius: 16px; }
  .tab svg.i { width: 22px; height: 22px; }
  .tab.on { color: var(--ink); }
  .tab.on svg.i .d { fill: var(--hl); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.subj .cnt svg.i { width: 14px; height: 14px; }
.subj .cnt svg.i .s { stroke-width: 2.2; }
@media (prefers-reduced-motion: reduce) { .day .scribble path { stroke-dashoffset: 0; } }
.side::-webkit-scrollbar { display: none; }

/* ================= teacher tools, doubts and feedback ================= */
.btn.paper { background: var(--paper); color: var(--ink); box-shadow: var(--sh-1); }
.btn.paper:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.subject-hero .inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.subject-hero .inner > div { min-width: 0; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px; }
.quick .btn { white-space: normal; text-align: left; height: auto; min-height: 34px; padding-top: 6px; padding-bottom: 6px; }

/* forms */
.sheetform { background: var(--card); border-radius: var(--r-xl); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 16px; }
.formh { font: 650 18px var(--display); letter-spacing: -.015em; margin: 0; display: flex; align-items: center; gap: 10px; }
.formh svg.i .d { fill: var(--hl); opacity: 1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.lbl { font-weight: 600; font-size: 13.5px; padding: 0; }
.lbl small { font: 400 11.5px var(--mono); color: var(--ink-3); margin-left: 6px; }
.field input:not([type=file]):not([type=radio]), .field textarea, .field select, .reply textarea {
  width: 100%; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 11px 13px; font: inherit; font-size: 15px; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field textarea, .reply textarea { resize: vertical; line-height: 1.5; min-height: 44px; }
.field select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5b54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E"); background-position: right 12px center; background-size: 18px 18px; background-repeat: no-repeat; }
html[data-theme="dark"] .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aba79e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E"); }
.field input:focus, .field textarea:focus, .field select:focus, .reply textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hl) 55%, transparent); }
.field input::placeholder, .field textarea::placeholder, .reply textarea::placeholder { color: var(--ink-3); }
.field.bad input, .field.bad .drop { border-color: var(--red); }
.err { color: var(--red); font-size: 13px; font-weight: 500; }
.fieldrow { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.drop { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; border: 1.5px dashed var(--rule); border-radius: 14px; background: var(--paper); cursor: pointer; transition: border-color .2s, background .2s; }
.drop:hover, .drop.over { border-color: var(--ink-2); background: color-mix(in srgb, var(--hl) 14%, var(--paper)); }
.drop svg.i { width: 24px; height: 24px; color: var(--ink-2); }
.drop span { display: flex; flex-direction: column; font-size: 14px; }
.drop small { color: var(--ink-3); font-size: 12.5px; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.picked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.picked li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; background: var(--paper); border-radius: 9px; padding: 7px 10px; overflow-wrap: anywhere; }
.picked li small { margin-left: auto; font: 11.5px var(--mono); color: var(--ink-3); flex: none; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-weight: 550; font-size: 14.5px; }
.check small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-2); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box { width: 22px; height: 22px; flex: none; border-radius: 7px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink-3); display: grid; place-items: center; color: transparent; transition: background .2s, box-shadow .2s, color .2s; }
.check .box svg.i { width: 16px; height: 16px; } .check .box svg.i .s { stroke-width: 2.4; }
.check input:checked + .box { background: var(--ink); box-shadow: none; color: var(--paper); }
.check input:focus-visible + .box { outline: 2px solid var(--ink); outline-offset: 2px; }
.privacy { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--paper); font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.privacy b { color: var(--ink); }
.privacy svg.i { width: 18px; height: 18px; color: var(--ink); margin-top: 1px; }
.privacy svg.i .d { fill: var(--hl); opacity: 1; }
.rating .scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rating label { cursor: pointer; }
.rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 9px; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule); transition: background .2s, border-color .2s, transform .25s var(--spring); text-align: center; }
.pip b { font: 600 18px var(--mono); }
.pip small { font-size: 11px; color: var(--ink-2); line-height: 1.2; }
.rating label:hover .pip { transform: translateY(-2px); }
.rating input:checked + .pip { background: var(--hl); border-color: var(--hl); color: #1d1c1a; }
.rating input:checked + .pip small { color: #3a320f; }
.rating input:focus-visible + .pip { outline: 2px solid var(--ink); outline-offset: 2px; }

/* new assignment */
.compose { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.preview { position: sticky; top: 16px; }
.preview .eyebrow { margin: 0 0 10px; }
.pv { position: relative; background: var(--card); border-radius: var(--r-xl); overflow: hidden; }
.pv .cover { display: block; width: 100%; height: 70px; }
.pv .code { position: absolute; left: 20px; top: 20px; font: 800 26px/1 var(--display); letter-spacing: -.04em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.pvbody { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.pv-title { font: 650 18px/1.3 var(--display); letter-spacing: -.015em; overflow-wrap: anywhere; }
.pv-meta { font: 12.5px var(--mono); color: var(--ink-2); }
.pv-desc { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }
.pv-files { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-files span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; background: var(--paper); padding: 5px 9px; border-radius: 8px; overflow-wrap: anywhere; }

/* student tracker */
.figs.tight { margin: 0 0 20px; }
.fig.warn .n { color: var(--red); }
.legend-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 10px; font-size: 12.5px; color: var(--ink-2); }
.legend-row span { display: inline-flex; align-items: center; gap: 6px; }
.k { display: inline-block; width: 10px; height: 14px; border-radius: 3px; flex: none; }
.k.graded { background: var(--ok); }
.k.in { background: color-mix(in srgb, var(--ok) 45%, var(--paper)); }
.k.late { background: var(--amber); }
.k.miss { background: var(--red); }
.k.wait { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.avatar.sq { width: 38px; height: 38px; border-radius: 12px; background: var(--card-2); color: var(--ink); font-size: 12.5px; }
.avatar.lg { width: 64px; height: 64px; border-radius: 18px; font-size: 20px; background: var(--ink); color: var(--paper); }
.students .row { gap: 16px; }
.students .body { flex: 1 1 160px; }
.trail { display: flex; gap: 3px; flex-wrap: wrap; max-width: 180px; }
.stat-col { display: flex; flex-direction: column; gap: 5px; width: 120px; flex: none; }
.stat-col .meter { background: var(--card-2); }
.stat-col small { font-size: 11.5px; color: var(--ink-2); }
.stat-col.n2 { width: 70px; gap: 0; }
.stat-col.n2 b { font: 500 17px var(--mono); }
.flag { width: 118px; flex: none; display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; font-size: 12.5px; font-weight: 600; }
.flag svg.i { width: 16px; height: 16px; }
.flag.risk { color: var(--red); } .flag.watch { color: var(--amber); } .flag.good { color: var(--ok); }
.srow.lvl-risk .avatar { background: var(--red-soft); color: var(--red); }
.person { display: flex; align-items: center; gap: 18px; margin: 14px 0 22px; }
.person h1.page { margin: 0 0 4px; }
.person .sub { margin: 0; overflow-wrap: anywhere; }
.pcourse { background: var(--card); border-radius: var(--r-xl); padding: 16px; margin-bottom: 14px; }
.pcourse .list { background: var(--paper); }
.pc-h { display: flex; align-items: center; gap: 14px; margin: 0 4px 14px; flex-wrap: wrap; }
.pc-h > div:nth-child(2) { flex: 1; min-width: 160px; }
.pc-h b { display: block; font: 650 17px var(--display); letter-spacing: -.015em; }
.pc-h small { color: var(--ink-2); font-size: 13px; }
.pc-h .bad { color: var(--red); font-weight: 600; }
.pc-h .ringwrap, .fb-h .ringwrap { position: relative; --ring: var(--c); flex: none; }
.pc-h .ringwrap b, .fb-h .ringwrap b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 15px var(--mono); }
.pcourse .row .k { height: 26px; width: 6px; }

/* doubts */
.askgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.threads { display: flex; flex-direction: column; gap: 10px; }
.threads.wide { max-width: 860px; }
.thread { background: var(--card); border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.thread header { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13.5px; }
.thread header .dotc { margin: 0; }
.thread header .asker, .thread header .anon { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.thread header svg.i { width: 15px; height: 15px; }
.thread .when { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.thread .q { margin: 0; font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.thread .a { background: var(--paper); border-radius: 12px; padding: 12px 14px; }
.thread .a .who { font-size: 12.5px; font-weight: 600; color: var(--ok); }
.thread .a p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.thread.open { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hl) 70%, transparent); }
.waiting { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--amber); font-weight: 550; }
.waiting svg.i { width: 16px; height: 16px; }
.reply { display: flex; gap: 8px; align-items: flex-end; }
.reply textarea { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 18px; }
.chips a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 10px; background: var(--card); font-size: 13.5px; color: var(--ink-2); font-weight: 500; transition: background .2s, color .2s; }
.chips a:hover { color: var(--ink); }
.chips a.on { background: var(--ink); color: var(--paper); }
.chips .dotc { margin: 0; }

/* feedback */
.fbgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.fbcard { background: var(--card); border-radius: var(--r-xl); padding: 20px; }
.fb-h { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.fb-h b { display: block; font: 650 17px var(--display); letter-spacing: -.015em; }
.fb-h small { color: var(--ink-2); font-size: 13px; }
.fb-h .ringwrap b { font-size: 18px; }
.dist { display: grid; grid-template-columns: 14px 1fr 24px; gap: 6px 10px; align-items: center; font-size: 12.5px; color: var(--ink-2); margin-bottom: 14px; }
.dist .bar { height: 8px; background: var(--card-2); border-radius: 4px; overflow: hidden; }
.dist .bar i { display: block; height: 100%; background: var(--c); border-radius: 4px; transform-origin: left; animation: fillx .9s var(--ease) both; }
.dist span:nth-child(3n) { text-align: right; }
.wk { font: 500 12px var(--mono); color: var(--ink-3); margin: 16px 0 8px; }
.fbnote { background: var(--paper); border-radius: 12px; padding: 11px 13px; margin-bottom: 6px; display: flex; flex-direction: column; gap: 6px; }
.fbnote p { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.tagw { display: inline-block; font: 600 11px var(--mono); padding: 2px 7px; border-radius: 6px; margin-right: 8px; vertical-align: 1px; }
.tagw.good { background: var(--ok-soft); color: var(--ok); }
.tagw.better { background: var(--amber-soft); color: var(--amber); }

/* sign in: everything above the fold */
.ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ctas .btn.block { margin-top: 0; height: 50px; }

@media (max-width: 1100px) { .compose, .askgrid { grid-template-columns: 1fr; } .preview { position: static; } }
@media (max-width: 760px) {
  .fieldrow { grid-template-columns: 1fr 1fr; }
  .fieldrow .field:first-child { grid-column: 1 / -1; }
  .students .row { flex-wrap: wrap; }
  .students .body { flex-basis: calc(100% - 60px); }
  .trail { order: 3; max-width: none; width: 100%; padding-left: 54px; }
  .stat-col { order: 4; margin-left: 54px; }
  .stat-col.n2 { margin-left: 0; }
  .flag { order: 5; width: auto; margin-left: auto; }
  .reply { flex-direction: column; align-items: stretch; }
  .fbgrid { grid-template-columns: 1fr; }
  .rating .scale { gap: 4px; }
  .pip small { font-size: 10px; }
  .ctas { grid-template-columns: 1fr; }
  .tab { font-size: 10.5px; }
  .tab svg.i { width: 21px; height: 21px; }
}
.login { height: 100dvh; min-height: 560px; }
.login .left { padding-top: clamp(16px, 4vh, 40px); padding-bottom: clamp(16px, 4vh, 40px); }
.login .brand { padding-bottom: clamp(14px, 4vh, 44px); }
.login h1 { font-size: clamp(30px, min(4vw, 6.2vh), 52px); margin-bottom: clamp(8px, 1.6vh, 16px); }
.login .lead { font-size: 15.5px; margin-bottom: clamp(12px, 2.6vh, 24px); }
.login .perks { gap: clamp(6px, 1.3vh, 12px); margin-bottom: clamp(14px, 2.6vh, 24px); }
.login .perks b { font-size: 14.5px; }
.login .perks span > span { font-size: 13.5px; }
.login .fine { margin-top: clamp(8px, 1.6vh, 16px); }
@media (max-width: 980px) { .login { height: auto; } }
[hidden] { display: none !important; }

/* ---------- live updates: no sync button, a prompt when something new lands ---------- */
.top { display: none; }
.content { padding-top: 26px; }
.live { position: fixed; left: 0; right: 0; top: 18px; z-index: 35; display: flex; justify-content: center; pointer-events: none; }
.newpill { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; max-width: min(620px, calc(100vw - 32px)); padding: 9px 9px 9px 16px; border-radius: 16px;
  background: var(--ink); color: var(--paper); box-shadow: var(--sh-2); font-size: 14px; font-weight: 550; text-align: left; animation: drop .6s var(--spring) both; transition: transform .2s var(--ease); }
.newpill:hover { transform: translateY(-1px); }
.newpill:active { transform: translateY(1px) scale(.99); }
.newpill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hl); flex: none; box-shadow: 0 0 0 0 var(--hl); animation: ping 1.8s var(--ease) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hl) 70%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
.newpill .txt { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.newpill .go { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--hl); color: #1d1c1a; padding: 6px 10px 6px 12px; border-radius: 10px; font-weight: 650; font-size: 13.5px; }
.newpill .go svg.i { width: 16px; height: 16px; }
.newpill[disabled] { opacity: .85; }
.flash { top: 18px; }
@media (max-width: 760px) {
  .top { display: flex; }
  .content { padding-top: 4px; }
  .live { top: calc(10px + env(safe-area-inset-top)); }
  .newpill { font-size: 13px; }
}

/* ---------- exam countdown: number and unit both inside the ring ---------- */
.countring { position: relative; flex: none; --ring: var(--c); }
.countring .ring { display: block; }
.countring .rc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.countring .rc b { font: 700 24px/1 var(--display); letter-spacing: -.04em; }
.countring .rc small { font: 500 10.5px var(--mono); color: var(--ink-2); margin-top: 3px; }
.countdown .countring { grid-row: span 2; }
.countdown .countring .rc b { font-size: 28px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 7px; border-radius: 9px; background: var(--paper); box-shadow: 0 0 0 1px var(--rule); font: 500 12.5px var(--mono); color: var(--ink); white-space: nowrap; }
.badge svg.i { width: 15px; height: 15px; color: var(--c, var(--ink-2)); }
.badge svg.i .d { opacity: .22; }
.countdown .badges { align-self: start; }
.exam .ebody { padding: 14px 16px 16px; display: flex; align-items: center; gap: 14px; }
.einfo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.einfo .t { font: 650 16px/1.25 var(--display); letter-spacing: -.015em; }
.exam-strip { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

/* ---------- revision plan ---------- */
.plan-top { display: flex; align-items: flex-start; gap: 16px 22px; flex-wrap: wrap; }
.plan-top .seg { margin-bottom: 0; flex: none; }
.plan-sum { margin: 4px 0 0; flex: 1 1 320px; font-size: 14px; max-width: 70ch; }
.plan-sum b { color: var(--ink); font-weight: 600; }
.kd { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.kd.learn { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.kd.practice { background: var(--amber-soft); box-shadow: inset 0 0 0 1.5px var(--amber); }
.kd.revise { background: var(--hl-soft); box-shadow: inset 0 0 0 1.5px var(--hl); }
.kd.exam { background: var(--ink); }
.kind { font: 500 11px var(--mono); color: var(--ink-2); }

/* tick box (saved in this browser only) */
.tick { flex: none; cursor: pointer; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; }
.tick:hover { background: var(--hover); }
.tick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tick .box { width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--ink-3); display: grid; place-items: center; color: transparent; background: var(--paper); transition: background .2s, color .2s, box-shadow .2s; }
.tick .box svg.i { width: 15px; height: 15px; } .tick .box svg.i .s { stroke-width: 2.6; }
.tick input:checked + .box { background: var(--ok); box-shadow: none; color: #fff; }
.tick input:focus-visible + .box { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.done-s .sbody b { text-decoration: line-through; text-decoration-color: var(--ink-3); color: var(--ink-2); }
.done-s { opacity: .72; }

/* by day */
.planweeks { display: flex; flex-direction: column; }
.wkh { font: 500 12.5px var(--mono); color: var(--ink-3); margin: 22px 0 6px; }
.wkh:first-child { margin-top: 12px; }
.pday { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--rule); }
.pdate { display: flex; flex-direction: column; padding-top: 6px; }
.pdate b { font: 700 24px/1 var(--display); letter-spacing: -.04em; align-self: flex-start; position: relative; isolation: isolate; }
.pdate span { font: 500 11.5px var(--mono); color: var(--ink-2); margin-top: 3px; }
.pday.today .pdate b::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: 0; height: 9px; background: var(--hl); z-index: -1; border-radius: 2px; }
.psessions { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.psession { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 8px 11px 14px; border-radius: 12px; background: var(--sheet); overflow: hidden;
  box-shadow: 0 0 0 1px var(--rule), 0 6px 14px -10px rgba(64, 50, 28, .3); }
.psession .bm { right: 12px; top: 0; }
.psession .sbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 20px; }
.psession .sbody b { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.psession.k-practice { background: color-mix(in srgb, var(--amber-soft) 70%, var(--sheet)); }
.psession.k-revise { background: color-mix(in srgb, var(--hl-soft) 80%, var(--sheet)); }
.psession.k-exam { background: var(--ink); color: var(--paper); box-shadow: none; }
.psession.k-exam .kind { color: color-mix(in srgb, var(--paper) 65%, transparent); }
.psession.k-exam .sbody { padding: 3px 20px 3px 0; }
.pday .free { font: 12px var(--mono); color: var(--ink-3); padding-top: 12px; }
.snotes { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.snotes a { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.snotes a:hover { color: var(--ink); text-decoration-color: var(--ink-3); }
.snotes svg.i { width: 14px; height: 14px; }

/* by subject */
.subplans { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; margin-top: 10px; align-items: start; }
.subplan { background: var(--card); border-radius: var(--r-xl); padding: 18px 16px 12px; }
.subplan header { display: flex; align-items: center; gap: 9px; margin: 0 4px 10px; }
.subplan header .dotc { margin: 0; width: 10px; height: 10px; border-radius: 3px; }
.subplan header b { font: 650 17px var(--display); letter-spacing: -.015em; }
.subplan .prog { margin-left: auto; font-size: 12px; color: var(--ink-2); flex: none; }
.progbar { height: 6px; border-radius: 3px; background: var(--card-2); margin: 0 4px 14px; overflow: hidden; }
.progbar i { display: block; height: 100%; width: 0; background: var(--c); border-radius: 3px; transition: width .5s var(--ease); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.step { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 8px 11px 12px; background: var(--paper); border-radius: 12px; }
.step .sdate { font-size: 12px; color: var(--ink-2); padding-top: 2px; }
.step .sbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.step .sbody b { font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.step .sbody small { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.step.k-practice { background: color-mix(in srgb, var(--amber-soft) 60%, var(--paper)); }
.step.k-revise { background: color-mix(in srgb, var(--hl-soft) 70%, var(--paper)); }
.step.k-exam { background: var(--ink); color: var(--paper); grid-template-columns: 84px minmax(0, 1fr); }
.step.k-exam .sdate, .step.k-exam .kind { color: color-mix(in srgb, var(--paper) 65%, transparent); }
html[data-theme="dark"] .psession.k-exam, html[data-theme="dark"] .step.k-exam { background: var(--card-2); color: var(--ink); box-shadow: 0 0 0 1px var(--hl); }
html[data-theme="dark"] .psession.k-exam .kind, html[data-theme="dark"] .step.k-exam .sdate, html[data-theme="dark"] .step.k-exam .kind { color: var(--ink-2); }
html[data-theme="dark"] .psession.k-practice, html[data-theme="dark"] .step.k-practice { background: color-mix(in srgb, var(--amber-soft) 80%, var(--sheet)); }
html[data-theme="dark"] .psession.k-revise, html[data-theme="dark"] .step.k-revise { background: color-mix(in srgb, var(--hl-soft) 85%, var(--sheet)); }
@media (max-width: 760px) {
  .pday { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .psessions { grid-template-columns: 1fr; }
  .subplans { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr auto; }
  .step .sdate { grid-column: 1 / -1; }
  .step.k-exam { grid-template-columns: 1fr; }
}
.einfo .t { align-self: flex-start; text-align: left; }
.exam .ebody { justify-content: flex-start; }
.psessions { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- university tag ---------- */
.uni { display: flex; align-items: center; gap: 10px; margin: -12px 4px 18px; padding: 9px 11px; border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 1px var(--rule); }
.uni b { display: block; font-size: 13px; line-height: 1.2; }
.uni small { display: block; font: 11px var(--mono); color: var(--ink-2); overflow-wrap: anywhere; line-height: 1.35; }
.crest { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.crest path:first-child { fill: var(--hl); }
.nav .count { margin-left: auto; font-style: normal; font: 600 11.5px var(--mono); color: var(--red); }
.icon-btn.has { position: relative; }
.icon-btn.has::after { content: ""; position: absolute; right: 9px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--paper); }
.inline-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hl); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- settings ---------- */
.settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.setcard { background: var(--card); border-radius: var(--r-xl); padding: 22px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 20px; }
.setcard.wide { grid-column: 1 / -1; }
.setcard .muted { margin: -4px 0 0; font-size: 14px; }
.acct { display: flex; align-items: center; gap: 14px; }
.acct b { display: block; font: 650 17px var(--display); }
.acct small { color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.unicard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--paper); }
.unicard .crest { width: 28px; height: 28px; }
.unicard b { display: block; font-size: 14.5px; }
.unicard small { font-size: 12.5px; color: var(--ink-2); }
.setcard > .btn { align-self: flex-start; }
.teachform { display: flex; flex-direction: column; gap: 10px; }
.teachform > .btn { align-self: flex-start; margin-top: 4px; }
.teachform .pz-pick span, .teachform .pz-subject { background: var(--paper); }
.teachform .pz-subject:has(input:checked) { background: color-mix(in srgb, var(--hl) 22%, var(--paper)); }
.teachform .pz-subjects { max-height: none; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.themeopt { cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.themeopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch { height: 74px; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 0 0 1px var(--rule); transition: box-shadow .2s, transform .25s var(--spring); }
.swatch i { display: block; height: 7px; border-radius: 4px; }
.swatch i:nth-child(1) { width: 55%; } .swatch i:nth-child(2) { width: 80%; } .swatch i:nth-child(3) { width: 40%; margin-top: auto; height: 14px; border-radius: 5px; }
.sw-light { background: #fbfaf7; } .sw-light i { background: #dedad1; } .sw-light i:nth-child(3) { background: #f2d16b; }
.sw-dark { background: #0d0e11; } .sw-dark i { background: #262a31; } .sw-dark i:nth-child(3) { background: #e0bd55; }
.sw-system { background: linear-gradient(135deg, #fbfaf7 50%, #0d0e11 50%); } .sw-system i { background: #9b968d; } .sw-system i:nth-child(3) { background: #f2d16b; }
.themeopt .tl { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 550; color: var(--ink-2); }
.themeopt .tl svg.i { width: 17px; height: 17px; }
.themeopt:hover .swatch { transform: translateY(-2px); }
.themeopt input:checked + .swatch { box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px color-mix(in srgb, var(--hl) 60%, transparent); }
.themeopt input:checked ~ .tl { color: var(--ink); }
.themeopt input:focus-visible + .swatch { outline: 2px solid var(--ink); outline-offset: 4px; }
.switch { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 46px; height: 28px; border-radius: 14px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rule); flex: none; position: relative; transition: background .25s; }
.switch .track i { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); box-shadow: var(--sh-1); transition: transform .3s var(--spring); }
.switch input:checked + .track { background: var(--ok); box-shadow: none; }
.switch input:checked + .track i { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--ink); outline-offset: 3px; }
.switch b { display: block; font-size: 14.5px; }
.switch small { font-size: 12.5px; color: var(--ink-2); }
.switch small.blocked { color: var(--red); }
.ticklist { margin: 0; padding: 0 0 0 2px; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.ticklist li { padding-left: 18px; position: relative; }
.ticklist li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--hl); }
.setcard .clouds { margin-top: 2px; }
.setcard .cloudcol { background: var(--paper); }
.cloudcol h3 { font: 650 16px var(--display); letter-spacing: -.015em; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.cloudcol h3 small { margin-left: auto; font: 500 12px var(--mono); color: var(--ink-3); }
.links { display: flex; flex-direction: column; background: var(--paper); border-radius: 14px; padding: 4px; }
.links a { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 10px; transition: background .2s; }
.links a + a { box-shadow: 0 -1px 0 var(--rule); }
.links a:hover { background: var(--hover); }
.links a > span { flex: 1; font-weight: 550; font-size: 14.5px; }
.links small { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-2); }
.setcard p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.credit b { background: linear-gradient(transparent 60%, var(--hl-soft) 60%); }

/* the big wordmark at the end of settings */
.bigfoot { margin: 56px -36px -72px; padding: 30px 36px 26px; border-top: 1px solid var(--rule); overflow: hidden; border-radius: 0 0 var(--r-xl) var(--r-xl);
  background: radial-gradient(120% 90% at 85% 120%, color-mix(in srgb, var(--hl) 22%, transparent), transparent 60%); }
.bigfoot .word { font: 800 clamp(96px, 22vw, 300px)/.8 var(--display); letter-spacing: -.07em; color: var(--ink); margin: 0 0 18px -.04em; font-variation-settings: "opsz" 96;
  background: linear-gradient(transparent 70%, var(--hl) 70%, var(--hl) 88%, transparent 88%); display: inline-block; padding-right: .06em; }
.bigfoot .footrow { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; font: 12.5px var(--mono); color: var(--ink-2); }

/* ---------- notifications ---------- */
.notes-list { display: flex; flex-direction: column; max-width: 860px; }
.notes-list .wkh:first-child { margin-top: 4px; }
.noti { display: flex; align-items: flex-start; gap: 14px; padding: 13px 14px; border-radius: 14px; transition: background .2s; position: relative; }
.noti + .noti { box-shadow: 0 -1px 0 var(--rule); }
.noti:hover { background: var(--card); }
.noti .ni { flex: none; color: var(--c); padding-top: 1px; }
.noti .ni svg.i { width: 22px; height: 22px; }
.noti .ni svg.i .d { opacity: .22; }
.noti .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.noti .t { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.noti .s { font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.noti .when { font-size: 12px; color: var(--ink-3); flex: none; padding-top: 2px; }
.noti.new { background: color-mix(in srgb, var(--hl-soft) 55%, transparent); }
.noti.new::before { content: ""; position: absolute; left: -2px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.noti.k-due .ni, .noti.k-missing .ni { color: var(--red); }

/* ---------- help and legal pages ---------- */
.docpage { min-height: 100dvh; background: var(--paper); padding: 28px clamp(16px, 5vw, 64px) 72px; }
.doc { max-width: 760px; }
.doc .eyebrow { margin-top: 10px; }
.doc .lede { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0 0 8px; max-width: 64ch; text-wrap: pretty; }
.doc h2 { font: 650 19px var(--display); letter-spacing: -.015em; margin: 34px 0 10px; }
.doc p, .doc li { font-size: 15.5px; line-height: 1.7; max-width: 68ch; }
.doc p { margin: 0 0 12px; }
.doc ul { margin: 0 0 12px; padding-left: 20px; }
.doc li { margin-bottom: 6px; }
.doc li::marker { color: var(--ink-3); }
.doc a { text-decoration: underline; text-decoration-color: var(--hl); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.doc-links { margin-top: 30px !important; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14px !important; color: var(--ink-3); }
.faqs { display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-lg); padding: 4px; }
.faqs details { border-radius: 12px; }
.faqs details + details { box-shadow: 0 -1px 0 var(--rule); }
.faqs summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 14px; font-weight: 600; font-size: 15px; border-radius: 12px; transition: background .2s; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary:hover { background: var(--hover); }
.faqs summary svg.i { margin-left: auto; width: 18px; height: 18px; color: var(--ink-3); transition: transform .3s var(--spring); flex: none; }
.faqs details[open] summary svg.i { transform: rotate(90deg); }
.faqs details p { margin: -4px 14px 14px; color: var(--ink-2); font-size: 15px; }
.login .legal { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.login .legal a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }

@media (max-width: 980px) { .settings { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .top .icon-btn { width: 38px; height: 38px; }
  .bigfoot { margin: 44px -16px calc(-120px - env(safe-area-inset-bottom)); padding: 24px 16px calc(120px + env(safe-area-inset-bottom)); border-radius: 0; }
  .themes { gap: 6px; }
  .swatch { height: 60px; }
  .themeopt .tl { font-size: 12px; }
  .noti .when { display: none; }
}

/* notifications live in a small bell, not the sidebar; the subject list scrolls on its own */
.side { overflow: hidden; }
.subjlist { flex: 1 1 auto; min-height: 60px; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 0 4px 8px;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); }
.side .me { margin-top: 4px; }
.deskbell { position: absolute; top: 18px; right: 20px; z-index: 25; display: inline-flex; align-items: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 9px; border-radius: 12px;
  color: var(--ink-2); background: var(--paper); box-shadow: 0 0 0 1px var(--rule); transition: background .2s, color .2s, box-shadow .2s, transform .15s; }
.deskbell:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--rule), var(--sh-1); }
.deskbell:active { transform: scale(.95); }
.deskbell.on { color: var(--ink); background: var(--card); }
.deskbell.has { color: var(--ink); }
.deskbell.has svg.i .d { fill: var(--hl); opacity: 1; }
.deskbell.has svg.i { animation: ring-bell 2.4s var(--ease) 1s 2; transform-origin: 50% 20%; }
@keyframes ring-bell { 0%, 20%, 100% { transform: rotate(0); } 4% { transform: rotate(14deg); } 8% { transform: rotate(-12deg); } 12% { transform: rotate(8deg); } 16% { transform: rotate(-4deg); } }
.deskbell em { font: 600 12px var(--mono); font-style: normal; color: var(--paper); background: var(--red); border-radius: 7px; padding: 1px 6px; }
.content > div:first-child h1.page { padding-right: 56px; }
@media (max-width: 760px) { .deskbell { display: none; } .side { overflow: visible; } }

/* ---------- logo lockup ---------- */
.brand .logo { height: 32px; width: auto; display: block; overflow: visible; transition: transform .5s var(--spring); }
.brand:hover .logo { transform: rotate(-2deg) translateY(-1px); }
.brand.m .logo { height: 28px; }
.login .brand .logo { height: 40px; }

/* ---------- subject list with a custom scrollbar ---------- */
.subjwrap { position: relative; flex: 1 1 auto; min-height: 60px; display: flex; margin: 0 -4px; }
.subjlist { flex: 1; min-height: 0; margin: 0; padding: 2px 12px 10px 4px; scrollbar-width: none; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }
.subjlist::-webkit-scrollbar { display: none; }
.subjwrap.at-top .subjlist { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%); }
.subjwrap.at-end .subjlist { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
.subjwrap.at-top.at-end .subjlist, .subjwrap:not(.scrolls) .subjlist { -webkit-mask-image: none; mask-image: none; }
.sbar { position: absolute; right: 1px; top: 8px; bottom: 12px; width: 12px; display: flex; justify-content: center; opacity: 0; transition: opacity .35s var(--ease); cursor: pointer; }
.sbar::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--rule); opacity: 0; transition: opacity .3s; }
.sbar i { position: relative; display: block; width: 4px; border-radius: 3px; background: var(--ink-3); transition: width .25s var(--spring), background .2s, transform .12s linear; will-change: transform; touch-action: none; }
.subjwrap.scrolls:hover .sbar, .subjwrap.active .sbar, .subjwrap.dragging .sbar { opacity: 1; }
.sbar:hover::before, .subjwrap.dragging .sbar::before { opacity: 1; }
.sbar:hover i, .subjwrap.dragging .sbar i { width: 7px; background: var(--ink-2); }
.subjwrap.dragging .sbar i { transition: width .25s var(--spring), background .2s; background: var(--ink); }
.subjwrap:not(.scrolls) .sbar { display: none; }
@media (prefers-reduced-motion: reduce) { .sbar i { transition: none; } }

/* ---------- materials by type: videos, links, announcements ---------- */
.kindtag { display: inline-block; font: 600 10.5px var(--mono); letter-spacing: .02em; padding: 1px 6px; border-radius: 5px; margin-right: 7px; vertical-align: 1px;
  background: var(--card-2); color: var(--ink-2); }
.kindtag.ins { background: var(--amber-soft); color: var(--amber); }
.row.res .body { gap: 2px; }
.thumb { position: relative; width: 78px; height: 46px; flex: none; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--c) 30%, var(--ink)); box-shadow: 0 0 0 1px var(--rule); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.thumb .play { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: rgba(0,0,0,.55); transition: transform .3s var(--spring), background .2s; }
.thumb .play::after { content: ""; position: absolute; left: 9px; top: 7px; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.row.video:hover .thumb img { transform: scale(1.08); }
.row.video:hover .thumb .play { transform: scale(1.15); background: #c4302b; }
.webcard { position: relative; width: 44px; height: 36px; flex: none; border-radius: 7px; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule), var(--sh-1); overflow: hidden; display: grid; place-items: center; transition: transform .35s var(--spring); }
.webcard .bar { position: absolute; left: 0; right: 0; top: 0; height: 9px; background: var(--c); display: flex; gap: 2px; padding: 3px 4px; }
.webcard .bar i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.75); }
.webcard b { font: 700 15px var(--display); color: var(--c); margin-top: 7px; }
.row.link:hover .webcard { transform: translateY(-2px) rotate(-3deg); }
.host { color: var(--ink-3); }
.row.post { align-items: flex-start; }
.row.post .pin { flex: none; width: 12px; height: 12px; margin: 4px 10px 0 4px; border-radius: 50%; background: var(--c); box-shadow: inset -2px -2px 0 rgba(0,0,0,.18), 0 3px 4px -2px rgba(0,0,0,.35); }
.posttext { font-size: 14.5px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; color: var(--ink); margin-top: 3px; }
h2.sec.small { font-size: 15px; margin: 22px 0 10px; }
h2.sec.small .muted { font-size: 12px; font-weight: 500; }
.chips.types { margin: 14px 0 6px; }
.chips.types b { font-weight: 500; font-size: 11.5px; opacity: .7; margin-left: 2px; }
@media (max-width: 760px) { .thumb { width: 64px; height: 38px; } }
/* page icons for videos, links, forms and announcements: same sheet as a PDF, with a glyph */
.sheet .glyph { width: 15px; height: 15px; margin: 1px auto 0; color: var(--c); display: block; }
.row.post { align-items: flex-start; }
.row.post .posttext { color: var(--ink-2); font-size: 14px; margin-top: 1px; }
.row.res .s .host { color: var(--ink-2); }
.content > .subject-hero:first-child { margin-top: 44px; }
.errcode { display: block; font-size: 12px; color: var(--ink-3); margin: -6px 0 16px; }
.missbar { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 6px; margin-bottom: 12px; border-radius: var(--r-lg); background: var(--red-soft); color: var(--red); }
.missbar .lottie.mini { width: 74px; flex: none; }
.missbar b { display: block; font-size: 15px; }
.missbar span { font-size: 13.5px; color: color-mix(in srgb, var(--red) 70%, var(--ink)); }

/* ================= micro-animations (transform/opacity only, off with reduced motion) ================= */
/* navigation: a highlighter bar at once, the note-shuffle loader if the page is slow */
.navbar { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 60; pointer-events: none; transform: scaleX(0); transform-origin: left; background: var(--hl); opacity: 0; }
.navbar.go { opacity: 1; animation: navgo 8s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes navgo { 0% { transform: scaleX(0); } 10% { transform: scaleX(.35); } 100% { transform: scaleX(.92); } }
.navload { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; align-content: center; gap: 4px; pointer-events: none; opacity: 0; transition: opacity .25s var(--ease);
  background: color-mix(in srgb, var(--paper) 55%, transparent); }
.navload.show { opacity: 1; }
.navload .lottie { width: 96px; }
.navload span { font: 500 12px var(--mono); color: var(--ink-2); }

/* segmented tabs: sliding pill */
.seg { position: relative; isolation: isolate; }
.seg-pill { position: absolute; left: 0; top: 0; z-index: -1; border-radius: 10px; background: var(--paper); box-shadow: var(--sh-1); transition: transform .4s var(--spring), width .4s var(--spring); }
.seg.has-pill a.on { background: transparent; box-shadow: none; }


/* icons move with intent */
.nav svg.i, .btn svg.i, .icon-btn svg.i, .row svg.i, .deskbell svg.i { transition: transform .3s var(--spring); }
.nav:hover svg.i { transform: translateY(-1px) rotate(-6deg); }
.btn:hover .i-arrow, .btn:hover .i-send { transform: translateX(3px); }
.btn:hover .i-plus { transform: rotate(90deg); }
.btn:hover .i-upload, .icon-btn:hover .i-upload { transform: translateY(-2px); }
.icon-btn:hover .i-download, .btn:hover .i-download { transform: translateY(2px); }
.row:hover .i-open { transform: translate(2px, -2px); }
.btn:hover .i-pencil { transform: rotate(-12deg); }
.btn:hover .i-logout, .icon-btn:hover .i-logout { transform: translateX(2px); }
.deskbell:hover .i-bell { transform: rotate(12deg); }
.icon-btn:hover .i-gear, .nav:hover .i-gear { transform: rotate(60deg); }
.back:hover svg { transform: translateX(-2px); }
.back svg { transition: transform .3s var(--spring); }

/* ticks draw in */
.tick .box svg .s path, .check .box svg .s path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s var(--ease) .05s; }
.tick input:checked + .box svg .s path, .check input:checked + .box svg .s path { stroke-dashoffset: 0; }
.tick .box, .check .box { transition: background .2s, box-shadow .2s, color .2s, transform .3s var(--spring); }
.tick input:checked + .box, .check input:checked + .box { transform: scale(1.08); }
.box.burst { position: relative; }
.box.burst::after { content: ""; position: absolute; inset: -6px; border-radius: 12px; border: 2px solid var(--ok); animation: burst .5s var(--ease) forwards; }
@keyframes burst { from { opacity: .9; transform: scale(.7); } to { opacity: 0; transform: scale(1.4); } }
.done-s { transition: opacity .3s; }

/* cards and pills respond to touch */
.subj:active, .exam:active, .fcard:active, .card:active, .tag:active { transform: scale(.985); transition-duration: .1s; }
.chips a { transition: background .2s, color .2s, transform .2s var(--spring); }
.chips a:active { transform: scale(.95); }
.pip, .swatch, .switch .track { will-change: transform; }

/* theme changes fade instead of snapping */
html.theming, html.theming *, html.theming *::before, html.theming *::after { transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), fill .45s, stroke .45s !important; }

@media (prefers-reduced-motion: reduce) {
  .navbar.go { animation: none; transform: scaleX(.6); }
  .list > .row, .threads > .thread, .cards > .card, .psessions > .psession, .steps > .step, .notes-list > .noti { animation: none; }
  .tick .box svg .s path, .check .box svg .s path { stroke-dashoffset: 0; }
}

/* ---------- sign in: role + university ---------- */
.perks-row { list-style: none; margin: 0 0 clamp(12px, 2.4vh, 22px); padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; font-weight: 550; color: var(--ink-2); }
.perks-row li { display: inline-flex; align-items: center; gap: 6px; }
.perks-row svg.i { width: 18px; height: 18px; color: var(--ink); }
.perks-row svg.i .d { fill: var(--hl); opacity: 1; }
.signin { display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 14px); }
.signin .btn.block { margin-top: 2px; }
.signin .or { display: flex; align-items: center; gap: 10px; font: 500 11.5px var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.signin .or::before, .signin .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.signin .demo-btn { white-space: normal; height: auto; min-height: 52px; padding: 9px 16px; flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
.signin .demo-btn small { flex-basis: 100%; text-align: center; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.roleseg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0; border: 0; border-radius: 14px; background: var(--card); }
.roleseg label { cursor: pointer; }
.roleseg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.roleseg span { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 10px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); transition: background .25s, color .2s, box-shadow .25s; }
.roleseg svg.i { width: 18px; height: 18px; }
.roleseg input:checked + span { background: var(--paper); color: var(--ink); box-shadow: var(--sh-1); }
.roleseg input:checked + span svg.i .d { fill: var(--hl); opacity: 1; }
.roleseg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.uniselect { position: relative; display: block; }
.uniselect .crest { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.unipick select { padding-left: 44px !important; height: 48px; font-weight: 550; }
.domhint { font-size: 12.5px; color: var(--ink-2); }
.domhint b { font: 500 12px var(--mono); color: var(--ink); }
.login-error { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; margin: 0 0 14px; border-radius: 12px; background: var(--red-soft); color: var(--red); font-size: 13.5px; font-weight: 500; }
.login-error svg.i { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* ---------- personalize card ---------- */
.personalize { background: var(--sheet); border-radius: var(--r-xl); padding: 20px 22px; margin: 4px 0 18px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 0 0 1px var(--rule), var(--sh-2); position: relative; overflow: hidden; animation: pzin .6s var(--spring) both; }
.personalize::before { content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--hl) 45%, transparent), transparent); pointer-events: none; }
@keyframes pzin { from { opacity: 0; transform: translateY(10px) scale(.99); } }
.personalize.inline { background: transparent; box-shadow: none; padding: 0; margin: 0; animation: none; }
.personalize.inline::before { display: none; }
.pz-head { display: flex; gap: 14px; align-items: flex-start; position: relative; }
.pz-mark { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--hl); color: #1d1c1a; }
.pz-mark svg.i { width: 22px; height: 22px; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: rotate(14deg) scale(1.1); } }
.pz-head h2 { font: 700 20px var(--display); letter-spacing: -.02em; margin: 0 0 2px; }
.pz-head p { margin: 0; font-size: 14px; color: var(--ink-2); max-width: 70ch; }
.pz-fields { display: grid; grid-template-columns: 1.6fr 1fr .8fr 1.2fr; gap: 10px; position: relative; }
.personalize.inline .pz-fields { grid-template-columns: 1fr 1fr; }
.upper { text-transform: uppercase; }
.personalize .actions { position: relative; }
@media (max-width: 900px) { .pz-fields { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .roleseg span { height: 38px; } }

/* ================= first-run personalize pop-up ================= */
html.pz-open { overflow: hidden; }
.pz-overlay { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; overflow-y: auto;
  background: color-mix(in srgb, #1d1c1a 58%, transparent); animation: pzfade .35s var(--ease) both; }
@keyframes pzfade { from { opacity: 0; } }
.pz-sheet { width: min(940px, 100%); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); background: var(--paper); border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); animation: pzrise .6s var(--spring) .05s both; }
@keyframes pzrise { from { opacity: 0; transform: translateY(26px) scale(.96); } }
.pz-art { position: relative; background: var(--desk); padding: 28px 26px 22px; display: flex; flex-direction: column; justify-content: center; gap: 14px;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 15%, transparent) 1px, transparent 1.4px); background-size: 20px 20px; }
.pz-art .pz-lottie { width: 100%; max-width: 300px; margin: 0 auto; }
.pz-idcard { background: var(--sheet); border-radius: 16px; padding: 12px 14px; box-shadow: 0 0 0 1px var(--rule), var(--sh-2); display: grid; gap: 7px; }
.pz-idrow { display: flex; gap: 12px; align-items: baseline; font-size: 13.5px; }
.pz-idrow i { font: 500 11px var(--mono); font-style: normal; color: var(--ink-3); width: 54px; flex: none; }
.pz-idrow b { font-weight: 600; overflow-wrap: anywhere; transition: color .2s; }
.pz-idrow b:empty::before { content: "—"; }
.pz-art > p { margin: 0; text-align: center; font: 500 12px var(--mono); color: var(--ink-2); }
.pz-form { padding: 24px 30px 26px; display: flex; flex-direction: column; min-height: 520px; position: relative; }
.pz-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pz-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.pz-steps li { width: 26px; height: 5px; border-radius: 3px; background: var(--card-2); transition: background .35s var(--ease), width .35s var(--spring); }
.pz-steps li.on { background: var(--ink); }
.pz-steps li.on:last-of-type, .pz-steps li.on:has(+ li:not(.on)) { width: 40px; background: var(--hl); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent); }
.pz-later { font-weight: 600; font-size: 13.5px; color: var(--ink-2); padding: 7px 10px; border-radius: 10px; transition: background .2s, color .2s; }
.pz-later:hover { background: var(--hover); color: var(--ink); }
.pz-step { display: none; flex-direction: column; gap: 14px; }
.pz-step.on { display: flex; }
.pz-step .eyebrow { margin: 0; }
.pz-step h2 { font: 700 clamp(24px, 3vw, 30px)/1.1 var(--display); letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.pz-lead { margin: -4px 0 4px; color: var(--ink-2); font-size: 15px; max-width: 46ch; }
.pz-step.in-right { animation: stepin-r .42s var(--ease) both; }
.pz-step.in-left { animation: stepin-l .42s var(--ease) both; }
@keyframes stepin-r { from { opacity: 0; transform: translateX(26px); } }
@keyframes stepin-l { from { opacity: 0; transform: translateX(-26px); } }
.pz-step.shake { animation: shake .4s var(--ease); }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.pz-big input { height: 58px; font-size: 18px !important; font-weight: 550; border-radius: 16px !important; }
.pz-big.sid input { font: 600 22px var(--mono) !important; letter-spacing: .06em; text-align: center; }
.pz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pz-chip { padding: 8px 13px; border-radius: 11px; background: var(--card); font-size: 13.5px; font-weight: 550; color: var(--ink-2); transition: background .2s, color .2s, transform .25s var(--spring), box-shadow .2s; }
.pz-chip:hover { color: var(--ink); transform: translateY(-1px); }
.pz-chip:active { transform: scale(.96); }
.pz-chip.on { background: var(--ink); color: var(--paper); }
.pz-chips.small .pz-chip { padding: 6px 11px; font-size: 13px; }
.pz-years { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.pz-years label { cursor: pointer; }
.pz-years input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pz-years span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px 12px; border-radius: 16px; background: var(--card); border: 1.5px solid transparent;
  transition: background .2s, border-color .2s, transform .3s var(--spring); }
.pz-years b { font: 700 28px/1 var(--display); letter-spacing: -.03em; }
.pz-years small { font-size: 12px; color: var(--ink-2); }
.pz-years label:hover span { transform: translateY(-2px); }
.pz-years input:checked + span { background: var(--hl); border-color: var(--hl); color: #1d1c1a; transform: translateY(-2px) scale(1.03); }
.pz-years input:checked + span small { color: #3a320f; }
.pz-years input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
/* faculty card: pick several courses, tick the subjects that are yours */
.pz-picks { display: flex; flex-wrap: wrap; gap: 7px; }
.pz-pick { cursor: pointer; }
.pz-pick input, .pz-subject input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pz-pick span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 12px; background: var(--card); font-size: 14px; font-weight: 550; color: var(--ink-2);
  transition: background .2s, color .2s, transform .25s var(--spring), padding .25s var(--spring); }
.pz-pick span svg.i { width: 0; height: 16px; opacity: 0; transition: width .25s var(--spring), opacity .2s; }
.pz-pick:hover span { color: var(--ink); transform: translateY(-1px); }
.pz-pick input:checked + span { background: var(--ink); color: var(--paper); padding-left: 11px; }
.pz-pick input:checked + span svg.i { width: 16px; opacity: 1; }
.pz-pick input:focus-visible + span, .pz-subject:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.pz-find { position: relative; }
.pz-find svg.i { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--ink-3); pointer-events: none; }
.pz-find input { padding-left: 38px !important; }
.pz-subjects { display: grid; gap: 6px; max-height: min(330px, 46vh); overflow-y: auto; margin: 0 -4px; padding: 2px 4px; }
.pz-subject { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; border-radius: 14px; background: var(--card); cursor: pointer;
  border: 1.5px solid transparent; transition: background .2s, border-color .2s, transform .25s var(--spring); }
.pz-subject[hidden] { display: none; }
.pz-subject:hover { transform: translateY(-1px); }
.pz-subject .spine { width: 4px; align-self: stretch; border-radius: 3px; background: var(--c, var(--ink-3)); flex: none; }
.ps-text { display: grid; min-width: 0; flex: 1; }
.ps-text b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-text small { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-tick { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--rule); color: transparent;
  transition: background .2s, color .2s, box-shadow .2s, transform .3s var(--spring); }
.ps-tick svg.i { width: 15px; height: 15px; }
.pz-subject:has(input:checked) { background: color-mix(in srgb, var(--hl) 22%, var(--card)); border-color: color-mix(in srgb, var(--hl) 70%, transparent); }
.pz-subject:has(input:checked) .ps-tick { background: var(--ink); color: var(--paper); box-shadow: none; transform: scale(1.06); }
.pz-privacy { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 13px; color: var(--ink-2); }
.pz-privacy svg.i { width: 17px; height: 17px; }
.pz-err { margin: 12px 0 0; color: var(--red); font-size: 13.5px; font-weight: 550; }
.pz-nav { margin-top: auto; padding-top: 20px; display: flex; gap: 8px; justify-content: flex-end; }
.pz-nav [data-back] { margin-right: auto; }
.pz-nav .btn { height: 46px; padding: 0 20px; }
@media (max-width: 820px) {
  .pz-sheet { grid-template-columns: 1fr; }
  .pz-art { padding: 16px 18px 12px; flex-direction: row; align-items: center; }
  .pz-art .pz-lottie { width: 120px; flex: none; margin: 0; }
  .pz-art > p { display: none; }
  .pz-idcard { flex: 1; }
  .pz-form { min-height: 0; padding: 20px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) { .pz-sheet, .pz-overlay, .pz-step.in-right, .pz-step.in-left, .pz-step.shake { animation: none; } }

/* ================= first sign-in: setting up (hands over to the personalize card) ================= */
.su-sheet { width: min(560px, 100%); background: var(--paper); border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); animation: pzrise .6s var(--spring) .05s both;
  transition: opacity .4s var(--ease), transform .45s var(--ease); }
.su-art { position: relative; background: var(--desk); padding: 22px 24px 8px; display: grid; place-items: center;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 15%, transparent) 1px, transparent 1.4px); background-size: 20px 20px; }
.su-lottie { width: 100%; max-width: 280px; aspect-ratio: 260 / 210; transition: opacity .35s var(--ease), transform .45s var(--spring); }
.su-done { position: absolute; width: 96px; aspect-ratio: 1; top: 50%; left: 50%; translate: -50% -50%; }
.su-body { padding: 22px 30px 24px; display: flex; flex-direction: column; gap: 12px; }
.su-body .eyebrow { margin: 0; display: flex; align-items: center; gap: 7px; }
.su-body .eyebrow svg.i { width: 15px; height: 15px; animation: suspin 1.6s linear infinite; }
@keyframes suspin { to { transform: rotate(360deg); } }
.su-body h2 { font: 700 clamp(22px, 3vw, 27px)/1.12 var(--display); letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.su-lead { margin: -4px 0 2px; color: var(--ink-2); font-size: 15px; }
.su-progress { display: grid; gap: 10px; --p: 2%; margin-top: 14px; }
/* A highlighter marking up a line of text: the track is a row of "words", the fill is flat highlighter ink,
   and a small highlighter pen rides the end of the stroke. */
.su-bar { position: relative; height: 16px; border-radius: 5px; background: var(--card); }
.su-bar::before { content: ""; position: absolute; inset: 0 8px; z-index: 1; background: var(--ink); opacity: .22;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16'%3E%3Crect x='0' y='6' width='22' height='4' rx='2'/%3E%3Crect x='27' y='6' width='12' height='4' rx='2'/%3E%3Crect x='44' y='6' width='30' height='4' rx='2'/%3E%3Crect x='79' y='6' width='9' height='4' rx='2'/%3E%3C/svg%3E") 0 0 / 96px 16px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16'%3E%3Crect x='0' y='6' width='22' height='4' rx='2'/%3E%3Crect x='27' y='6' width='12' height='4' rx='2'/%3E%3Crect x='44' y='6' width='30' height='4' rx='2'/%3E%3Crect x='79' y='6' width='9' height='4' rx='2'/%3E%3C/svg%3E") 0 0 / 96px 16px repeat-x; }
/* the highlighted stroke: translucent ink narrower than the line, wavy edges, faint streaks from a worn tip,
   a darker dab where the pen touched down and an angled wet edge under the chisel tip */
.su-bar i { position: absolute; left: 5px; top: 3px; height: 10px; width: max(0px, calc(var(--p) - 5px)); rotate: -.35deg;
  --ink-c: var(--hl); transition: width .8s var(--ease); }
.su-bar i::before { content: ""; position: absolute; inset: 0; background: var(--ink-c); opacity: .78; transition: background-color .3s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' preserveAspectRatio='none'%3E%3Cpath d='M0 1.3C8 .5 15 1.9 22 1.1S34 .6 40 1.3V4H0Z'/%3E%3Crect y='4' width='40' height='.7' fill-opacity='.5'/%3E%3Crect y='4.7' width='40' height='2.3'/%3E%3Crect y='7' width='40' height='.5' fill-opacity='.6'/%3E%3Cpath d='M0 7.5H40V8.8C33 9.5 26 8.2 18 9.2S5 9.3 0 8.8Z'/%3E%3C/svg%3E") 0 0 / 40px 100% repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' preserveAspectRatio='none'%3E%3Cpath d='M0 1.3C8 .5 15 1.9 22 1.1S34 .6 40 1.3V4H0Z'/%3E%3Crect y='4' width='40' height='.7' fill-opacity='.5'/%3E%3Crect y='4.7' width='40' height='2.3'/%3E%3Crect y='7' width='40' height='.5' fill-opacity='.6'/%3E%3Cpath d='M0 7.5H40V8.8C33 9.5 26 8.2 18 9.2S5 9.3 0 8.8Z'/%3E%3C/svg%3E") 0 0 / 40px 100% repeat-x; }
.su-bar i::after { content: ""; position: absolute; right: -6px; top: -.5px; bottom: -.5px; width: 9px; opacity: .8; transition: background-color .3s;
  background: color-mix(in srgb, var(--ink-c) 86%, var(--ink)); clip-path: polygon(0 4%, 45% 0, 100% 100%, 0 96%); }
.su-bar i b { position: absolute; left: -2px; top: -.5px; bottom: -.5px; width: 7px; border-radius: 45% 30% 40% 35%; opacity: .75;
  background: color-mix(in srgb, var(--ink-c) 86%, var(--ink)); }
/* the highlighter: chisel tip on the edge of the stroke, Desk label on the barrel, cap and pocket clip */
.su-pen { position: absolute; z-index: 2; top: 50%; left: min(var(--p), calc(100% - 28px)); width: 58px; height: 16px; margin-top: -8.2px; pointer-events: none;
  transform-origin: 0 8.2px; transition: left .8s var(--ease), opacity .3s, transform .45s var(--spring); }
.su-pen svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 0 51%; rotate: -24deg;
  animation: suscribble .5s ease-in-out infinite alternate; filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--ink) 14%, transparent)); }
.su-pen .tip { fill: color-mix(in srgb, var(--hl) 78%, var(--ink)); }
.su-pen .barrel { fill: var(--hl); stroke: var(--ink); stroke-width: 1.3; }
.su-pen .ink, .su-pen .ink-f { fill: var(--ink); }
.su-pen .label { fill: var(--paper); }
.su-pen .paper-f { fill: var(--paper); stroke: var(--ink); }
.su-pen .ink-s { stroke: var(--ink); fill: none; }
.su-pen .hl-s { stroke: color-mix(in srgb, var(--hl) 80%, var(--ink)); fill: none; }
@keyframes suscribble { from { translate: 0 0; rotate: -21deg; } to { translate: -1.5px -1px; rotate: -27deg; } }
.su-now { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--ink-2); }
.su-now span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-now b { font-weight: 600; color: var(--ink); }
.su-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 0; }
.su-stats div { background: var(--card); border-radius: 14px; padding: 10px 12px; }
.su-stats dt { font: 500 11px var(--mono); color: var(--ink-3); }
.su-stats dd { margin: 2px 0 0; font: 700 22px/1.1 var(--display); letter-spacing: -.02em; }
.su-stats dd.bump { animation: subump .35s var(--spring); }
@keyframes subump { 40% { transform: translateY(-3px); } }
.su-err { margin: 0; color: var(--red); font-size: 13.5px; font-weight: 550; }
.su-retry { align-self: flex-start; height: 42px; padding: 0 18px; }
.su-once { display: flex; align-items: center; gap: 7px; margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); }
.su-once svg.i { width: 15px; height: 15px; flex: none; }
/* finished: the bar goes green, the shelf steps back and a check stamps on */
.su-overlay.is-done .su-progress { --p: 100% !important; }
.su-overlay.is-done .su-bar i { --ink-c: color-mix(in srgb, var(--ok) 55%, var(--paper)); }
.su-overlay.is-done .su-pen { opacity: 0; transform: translate(10px, -14px) rotate(24deg); }
.su-overlay.is-done .eyebrow svg.i { animation: none; }
.su-overlay.is-done .su-lottie { opacity: .25; transform: scale(.94); }
.su-overlay.is-error .su-bar i { --ink-c: color-mix(in srgb, var(--red) 45%, var(--paper)); }
.su-overlay.is-error .su-pen svg { animation: none; }
.su-overlay.is-error .eyebrow svg.i { animation: none; }
/* hand-over: the setup card sinks away while the personalize card rises in over the same backdrop */
.su-overlay.leaving .su-sheet { opacity: 0; transform: translateY(-14px) scale(.97); }
.su-overlay.leaving { transition: opacity .4s var(--ease) .15s; }
.su-overlay.gone { opacity: 0; }
.pz-overlay.from-setup { animation: none; }
@media (max-width: 560px) {
  .su-body { padding: 18px 18px 20px; }
  .su-stats dd { font-size: 19px; }
  .su-stats div { padding: 9px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .su-sheet, .su-pen svg, .su-body .eyebrow svg.i, .su-stats dd.bump { animation: none; }
  .su-sheet, .su-lottie, .su-bar i, .su-pen { transition: none; }
}

/* ---------- sidebar: university ID card, role icon, settings beside sign out ---------- */
.uni { display: none; }
.idcard { position: relative; display: flex; flex-direction: column; gap: 3px; margin: -12px 2px 18px; padding: 12px 13px 11px; border-radius: 14px; overflow: hidden; isolation: isolate;
  color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--u) 88%, #fff), var(--u) 55%, color-mix(in srgb, var(--u) 82%, #000));
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 22px -12px color-mix(in srgb, var(--u) 80%, #000); transition: transform .35s var(--spring), box-shadow .3s; }
.idcard:hover { transform: translateY(-2px) rotate(-.6deg); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 16px 28px -14px color-mix(in srgb, var(--u) 80%, #000); }
.idcard:active { transform: scale(.98); }
.id-pattern { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.idcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--hl); opacity: .9; }
.id-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.idcard .crest { width: 20px; height: 20px; stroke: #fff; }
.idcard .crest path:first-child { fill: var(--hl); stroke: #fff; }
.id-uni { font: 700 12.5px/1.15 var(--display); letter-spacing: -.005em; }
.id-uni small { display: block; font: 500 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.id-name { font: 650 15px/1.2 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.id-line { font-size: 11.5px; line-height: 1.35; opacity: .82; overflow-wrap: anywhere; }
.id-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 7px; }
.id-sid { font: 600 12px var(--mono); letter-spacing: .08em; padding: 3px 7px; border-radius: 6px; background: rgba(255,255,255,.14); overflow-wrap: anywhere; }
.id-chip { width: 24px; height: 18px; flex: none; border-radius: 4px; margin-bottom: 1px;
  background: linear-gradient(90deg, transparent 45%, rgba(0,0,0,.18) 45% 55%, transparent 55%), linear-gradient(transparent 40%, rgba(0,0,0,.18) 40% 60%, transparent 60%), linear-gradient(135deg, #f3dc93, #c9a445);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.role-ic { flex: none; width: 34px; display: grid; place-items: center; color: var(--ink); }
.role-ic svg.i { width: 26px; height: 26px; }
.role-ic svg.i .d { fill: var(--hl); opacity: 1; }
.me { gap: 6px; padding-left: 2px; }
.me .icon-btn { width: 34px; height: 34px; border-radius: 10px; }
.me .icon-btn.on { background: var(--paper); color: var(--ink); box-shadow: var(--sh-1); }
.psession .sbody { padding-right: 4px; }
.psession .kind::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--c); margin-right: 6px; vertical-align: 1px; }

/* ---------- sidebar: university name only ---------- */
.uniname { display: flex; align-items: center; gap: 9px; margin: -14px 12px 18px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.uniname .crest { width: 18px; height: 18px; }

/* ---------- Settings: hanging ID badge ---------- */
.idsection { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 28px; align-items: center; overflow: hidden; }
.badge-stage { position: relative; padding-top: 96px; perspective: 900px; }
.badge-stage .lanyard { position: absolute; left: 50%; top: -18px; width: 240px; transform: translateX(-50%); z-index: 2; }
.idbadge { transform-origin: 50% -90px; animation: badgein .9s var(--spring) .35s both, sway 5s ease-in-out 1.3s infinite; }
@keyframes badgein { from { opacity: 0; transform: translateY(-40px) rotate(-6deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
.idbadge:hover { animation-play-state: running, paused; }
.badge-card { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; padding: 26px 20px 16px; color: #fff; aspect-ratio: 1.58; display: flex; flex-direction: column;
  background: linear-gradient(155deg, color-mix(in srgb, var(--u) 82%, #fff), var(--u) 45%, color-mix(in srgb, var(--u) 78%, #000));
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 28px 50px -24px color-mix(in srgb, var(--u) 70%, #000), 0 2px 6px rgba(0,0,0,.15); }
.badge-pattern { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.badge-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--hl); }
.badge-slot { position: absolute; left: 50%; top: 9px; width: 44px; height: 8px; margin-left: -22px; border-radius: 4px; background: color-mix(in srgb, var(--u) 50%, #000); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.badge-head { display: flex; align-items: center; gap: 10px; }
.badge-head .crest { width: 28px; height: 28px; stroke: #fff; flex: none; }
.badge-head .crest path:first-child { fill: var(--hl); stroke: #fff; }
.badge-head b { display: block; font: 700 15px/1.15 var(--display); letter-spacing: -.01em; }
.badge-head small { display: block; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-top: 2px; }
.badge-body { display: flex; gap: 14px; align-items: center; margin: auto 0; padding: 12px 0; }
.badge-photo { width: 62px; height: 72px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--u); box-shadow: inset 0 0 0 3px rgba(255,255,255,.4); }
.badge-photo svg.i { width: 38px; height: 38px; }
.badge-photo svg.i .d { fill: var(--hl); opacity: 1; }
.badge-photo svg.i .s { stroke-width: 1.5; }
.badge-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.badge-name { font: 700 20px/1.1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.badge-meta { font-size: 12.5px; opacity: .85; overflow-wrap: anywhere; }
.badge-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.badge-id small { display: block; font: 500 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.badge-id b { font: 600 15px var(--mono); letter-spacing: .08em; overflow-wrap: anywhere; }
.barcode { width: 96px; height: 28px; flex: none; fill: #fff; opacity: .9; padding: 3px 4px; background: rgba(0,0,0,.18); border-radius: 5px; box-sizing: content-box; }
.badge-sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 48%, transparent 60%); transform: translateX(-120%); pointer-events: none; }
.idbadge:hover .badge-sheen { animation: sheen 1.1s var(--ease); }
@keyframes sheen { to { transform: translateX(120%); } }
.idside { display: flex; flex-direction: column; gap: 12px; }
.idside .acct b { font-size: 18px; }
@media (max-width: 980px) { .idsection { grid-template-columns: 1fr; } .badge-stage { max-width: 380px; width: 100%; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .idbadge { animation: none; } }

/* rough-edge fixes */
.personalize.inline { overflow: visible; }
.pz-fields .field, .personalize .actions { min-width: 0; }
input[list]::-webkit-calendar-picker-indicator { display: none !important; opacity: 0; }
input[list] { padding-right: 13px; }
.bigfoot { margin: 64px 0 0; padding: 28px 0 4px; border-radius: 0; background: none; overflow: visible; }
@media (max-width: 760px) { .bigfoot { margin: 44px 0 0; padding: 22px 0 0; } }

/* ID badge: stays inside its column; the lanyard swings with the card and clips into its slot */
.idsection > * { min-width: 0; }
.badge-stage { padding-top: 112px; }
.idbadge { position: relative; width: 100%; max-width: 380px; margin: 0 auto; transform-origin: 50% -112px; }
.idbadge .lanyard { position: absolute; left: 50%; top: -106px; width: 240px; height: 130px; margin-left: -120px; transform: none; z-index: 2; pointer-events: none; }
.badge-stage > .lanyard { display: none; }
.badge-card { width: 100%; min-width: 0; aspect-ratio: auto; min-height: 230px; }
.badge-info, .badge-id { min-width: 0; }
.badge-id { flex: 1; }
.badge-id b { display: block; font-size: 14px; line-height: 1.3; }
.badge-name { font-size: clamp(16px, 4.4cqi, 20px); }
.badge-foot .barcode { align-self: flex-end; }

/* exam cards: date and time badges wrap instead of overflowing */
.exam-strip { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.einfo, .badges { min-width: 0; }
.badge { white-space: normal; max-width: 100%; }

/* lanyard drawn live in SVG, card moved by the physics simulation */
.idsection { position: relative; overflow: hidden; }
.straps { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.straps .seg { stroke: var(--hl); stroke-width: 13; stroke-linecap: round; }
.straps .seg.fold { stroke: color-mix(in srgb, var(--hl) 72%, #7a5a0a); }
.straps .stitch { fill: none; stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: 1.2; stroke-dasharray: 3 3; stroke-linejoin: round; }
.badge-stage { padding-top: 84px; position: relative; z-index: 2; }
.idbadge { animation: none !important; transform-origin: 50% 0; will-change: transform; }
.idbadge .lanyard { display: none; }
.badge-clip { position: absolute; left: 50%; top: -14px; width: 34px; height: 20px; margin-left: -17px; z-index: 3; border-radius: 6px; background: var(--ink);
  box-shadow: 0 2px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15); }
.badge-clip i { position: absolute; left: 50%; top: -9px; width: 14px; height: 12px; margin-left: -7px; border-radius: 4px; border: 2.5px solid var(--ink); background: transparent; }
.badge-slot { opacity: 0; }

/* Google's own four-colour G on a white badge, as their sign-in button guidelines show it on dark buttons */
.g-logo { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; margin-left: -4px; }
.g-logo svg { width: 15px; height: 15px; display: block; }

/* ================= study notes written in the background ================= */
/* pop-up card: 3 seconds, then it flies into the corner pill */
.nw-card { position: fixed; z-index: 80; left: 50%; top: 42%; width: min(460px, calc(100vw - 32px)); display: flex; gap: 16px; align-items: center;
  padding: 16px 18px 18px 14px; border-radius: 24px; background: var(--paper); overflow: hidden;
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .45), 0 0 0 1px var(--rule); --tx: 0px; --ty: 0px;
  transform: translate(-50%, -50%) translateY(18px) scale(.94); opacity: 0;
  transition: transform .55s var(--spring), opacity .3s var(--ease); }
.nw-card.in { transform: translate(-50%, -50%); opacity: 1; }
.nw-card.out { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.18); opacity: 0;
  transition: transform .5s cubic-bezier(.5, 0, .75, .3), opacity .45s ease-in .05s; }
.nw-art { width: 124px; flex: none; aspect-ratio: 1; border-radius: 18px; background: var(--desk);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.4px); background-size: 14px 14px; }
.nw-art .lottie { width: 100%; height: 100%; }
.nw-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nw-text b { font: 700 18px/1.2 var(--display); letter-spacing: -.02em; }
.nw-text span { font-weight: 600; font-size: 14px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-text small { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; margin-top: 3px; }
.nw-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--hl); transform-origin: left; }
.nw-card.in .nw-timer { animation: nwtime 3s linear forwards; }
@keyframes nwtime { to { transform: scaleX(0); } }

/* corner pill while notes are being written */
.nw-pill { position: fixed; z-index: 75; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 8px; max-width: min(340px, calc(100vw - 40px));
  padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); transform: translateY(20px) scale(.9); opacity: 0;
  transition: transform .45s var(--spring), opacity .3s; }
.nw-pill.in { transform: none; opacity: 1; }
.nw-pill.bump { animation: nwbump .5s var(--spring); }
@keyframes nwbump { 40% { transform: scale(1.08); } }
.nw-pill .lottie { width: 28px; height: 28px; flex: none; }
.nw-pill .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-pill b { font-weight: 650; margin-right: 4px; }

/* done / failed: the same dark card as Desk's flash messages; the subject shows as a dot, not a stripe */
.nw-toast { position: fixed; z-index: 76; right: 20px; bottom: 20px; width: min(400px, calc(100vw - 40px)); display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 10px; border-radius: 18px; background: var(--ink); color: var(--paper); box-shadow: var(--sh-2), 0 24px 50px -20px rgba(0, 0, 0, .5);
  transform: translateY(24px) scale(.97); opacity: 0; transition: transform .45s var(--spring), opacity .3s; }
body:has(.nw-pill.in) .nw-toast { bottom: 72px; }
.nw-toast.in { transform: none; opacity: 1; }
.nw-ico { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--paper) 10%, transparent); }
.nw-ico .lottie { width: 38px; height: 38px; }
.nw-toast > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nw-toast b { font-weight: 650; font-size: 14.5px; }
.nw-toast span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: color-mix(in srgb, var(--paper) 68%, transparent); min-width: 0; }
.nw-toast span i { width: 7px; height: 7px; flex: none; border-radius: 2px; background: var(--c); }
.nw-toast span em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-toast small { font-size: 12.5px; line-height: 1.35; color: color-mix(in srgb, var(--hl) 85%, var(--paper)); }
.nw-toast .btn { height: 34px; padding: 0 14px; background: var(--hl); color: #1d1c1a; box-shadow: none; }
.nw-toast .btn:hover { transform: translateY(-1px); }
.nw-x { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; color: color-mix(in srgb, var(--paper) 55%, transparent);
  transition: background .2s, color .2s; }
.nw-x:hover { background: color-mix(in srgb, var(--paper) 10%, transparent); color: var(--paper); }
.nw-x svg.i { width: 16px; height: 16px; }

/* notes page while writing / after a failure */
.note-wait { max-width: 560px; margin: 24px auto; text-align: center; display: grid; justify-items: center; gap: 10px; }
.note-wait-anim { width: 220px; aspect-ratio: 1; }
.note-wait .sub { color: var(--ink-2); }
.btn.is-writing { opacity: .75; }
.btn.is-writing svg.i { animation: nwwrite .6s ease-in-out infinite alternate; }
@keyframes nwwrite { to { transform: translate(2px, -1px) rotate(-8deg); } }

/* figures, diagrams and web images in a note */
.figs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.nfig { margin: 0; background: var(--card); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.nfig a { display: block; background: #fff; }
.nfig img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; transition: transform .4s var(--ease); }
.nfig a:hover img { transform: scale(1.02); }
.nfig figcaption { padding: 10px 12px 12px; font-size: 13.5px; line-height: 1.4; display: flex; flex-direction: column; gap: 3px; }
.nfig figcaption span { font: 500 11.5px var(--mono); color: var(--ink-3); }
.nfig figcaption span a { display: inline; background: none; color: inherit; text-decoration: underline; }
.ndiagram { margin: 0 0 12px; background: var(--card); border-radius: 16px; padding: 16px; overflow-x: auto; }
.ndiagram .mermaid-out { display: grid; place-items: center; min-height: 60px; }
.ndiagram .mermaid-out svg { max-width: 100%; height: auto; }
/* Mermaid sizes each label with its own styles; the note's paragraph rules (.block p) would make the text bigger
   than the box it measured and cut it off, so labels keep exactly the styles Mermaid measured with */
.ndiagram .mermaid-out foreignObject { overflow: visible; }
.ndiagram .mermaid-out p, .ndiagram .mermaid-out span, .ndiagram .mermaid-out div { margin: 0; max-width: none; font-size: inherit; line-height: 1.5; }
.ndiagram figcaption { margin-top: 8px; font-size: 13.5px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ndiagram figcaption span { font: 500 11.5px var(--mono); color: var(--ink-3); }
@media (max-width: 560px) {
  .nw-card { flex-direction: column; text-align: center; top: 40%; }
  .nw-text span { white-space: normal; }
  .nw-pill, .nw-toast { right: 16px; bottom: 16px; }
  .figs-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .nw-card, .nw-card.out, .nw-pill, .nw-toast { transition: opacity .2s; }
  .nw-card.in .nw-timer, .nw-pill.bump, .btn.is-writing svg.i { animation: none; }
}

/* ================= scrollbars: slim, rounded, theme-coloured ================= */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-button { display: none; }
  ::-webkit-scrollbar-thumb { border-radius: 999px; border: 3.5px solid transparent; background-clip: padding-box;
    background-color: color-mix(in srgb, var(--ink) 20%, transparent); }
  ::-webkit-scrollbar-thumb:hover { border-width: 2.5px; background-color: color-mix(in srgb, var(--ink) 38%, transparent); }
  ::-webkit-scrollbar-thumb:active { background-color: color-mix(in srgb, var(--ink) 55%, transparent); }
}
@supports not selector(::-webkit-scrollbar) {  /* Firefox */
  html, * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 25%, transparent) transparent; }
}

/* settings footer: the exact Desk logo (the same lockup as the sidebar), scaled up */
.bigfoot .word { font-size: inherit; line-height: 0; background: none !important; }
.bigfoot .footlogo { display: block; width: min(100%, 880px); height: auto; }

/* ================= notes: learn more (videos, articles, encyclopedia) ================= */
.learn .fine { margin: -4px 0 4px; }
.learn-h { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font: 600 12px var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); }
.learn-h svg.i { width: 16px; height: 16px; }
.vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.vid { margin: 0; background: var(--card); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.vid-play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; background: #000; cursor: pointer; }
.vid-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease), opacity .3s; }
.vid-play:hover img { transform: scale(1.04); opacity: .88; }
.vid-btn { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--hl);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6); transition: transform .35s var(--spring); }
.vid-btn::after { content: ""; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #1d1c1a; }
.vid-play:hover .vid-btn { transform: scale(1.1); }
.vid iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: #000; }
.vid figcaption { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; line-height: 1.35; }
.vid figcaption a { font-weight: 600; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.vid figcaption a:hover { text-decoration: underline; }
.vid figcaption span { font: 500 11.5px var(--mono); color: var(--ink-3); }
.learn-row .learn-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--card); color: var(--ink-2); }
.learn-row .learn-ic svg.i { width: 18px; height: 18px; }
.wikis { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.wiki { display: flex; gap: 12px; padding: 12px; border-radius: 16px; background: var(--card); color: var(--ink); transition: transform .3s var(--spring), background .2s; }
.wiki:hover { transform: translateY(-2px); background: var(--card-2); }
.wiki img { width: 64px; height: 64px; flex: none; border-radius: 10px; object-fit: cover; background: #fff; }
.wiki > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wiki b { font-weight: 650; font-size: 14.5px; }
.wiki > span > span { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.wiki small { font: 500 11px var(--mono); color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .vid-play img, .vid-btn, .wiki { transition: none; } }

/* ================= install Desk as an app ================= */
.install-card { display: flex; align-items: center; gap: 22px; padding: 16px 22px 16px 16px; border-radius: var(--r-lg, 20px); background: var(--card); }
.install-card[hidden] { display: none; }
.install-card.home { margin: 18px 0 4px; animation: pzrise .6s var(--spring) both; }
.install-slot { padding: 0; background: none; }
.install-slot .install-card { background: var(--card); }
.install-art { width: 168px; flex: none; aspect-ratio: 280 / 220; border-radius: 16px; background: var(--desk);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.4px); background-size: 16px 16px; }
.install-art .lottie { width: 100%; height: 100%; }
.install-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.install-body .eyebrow { margin: 0; display: flex; align-items: center; gap: 7px; }
.install-body .eyebrow svg.i { width: 15px; height: 15px; }
.install-body h2 { margin: 0; font: 700 clamp(19px, 2.2vw, 22px)/1.2 var(--display); letter-spacing: -.02em; }
.install-lead { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.install-lead svg.i { width: 15px; height: 15px; vertical-align: -2px; margin: 0 2px; }
.install-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.install-card [data-when] { display: none; }
.install-card[data-state="none"] [data-when~="none"], .install-card[data-state="ready"] [data-when~="ready"],
.install-card[data-state="ios"] [data-when~="ios"], .install-card[data-state="installed"] [data-when~="installed"],
.install-card[data-state="app"] [data-when~="app"], .install-card[data-state="unsupported"] [data-when~="unsupported"] { display: revert; }
.install-card .install-actions[data-when~="ready"] { display: none; }
.install-card[data-state="ready"] .install-actions { display: flex; }
.install-card.leaving { transition: opacity .35s, transform .4s var(--ease); opacity: 0; transform: translateY(-8px) scale(.98); }
@media (max-width: 640px) {
  .install-card { flex-direction: column; align-items: stretch; text-align: left; padding: 14px; }
  .install-art { width: 100%; max-width: 280px; margin: 0 auto; }
  .install-actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .install-card.home { animation: none; } }