/* ============================================================
   DESTNY — Star Colour System
   Prototype stylesheet. Dark-first; light mode keeps colour meaning.
   ============================================================ */

:root{
  /* --- star palette (fixed meanings across themes) --- */
  --s-blue-1:#6E86E0;  --s-blue-2:#8195E4;  --s-blue-3:#8195E4;
  --s-blue-4:#94A5E8;  --s-blue-5:#B7C3E2;  --s-blue-6:#C9D2EA;
  --s-blue-7:#DBE1F0;
  --s-warm-1:#F4EDDF;  --s-warm-2:#EDE2C9;
  --s-yellow-1:#E3C97E; --s-yellow-2:#D3A94F;
  --s-orange-1:#C89050; --s-orange-2:#BC8146; --s-orange-3:#A9673C;
  --s-red-1:#B0564C;   --s-red-2:#8E3A35;

  /* semantic — three families carry everything:
     royal indigo (structure), champagne gold (value), muted plum/bronze (heat) */
  --royal:#4B5CC4;
  --royal-deep:#2E3A86;
  --plum:#6E4A86;
  --burgundy:#7E3B4E;
  --academic:var(--s-blue-1);
  --social:#B4628F;
  --club:#5FA894;
  --aura:var(--s-yellow-2);
  --aura-text:var(--s-yellow-2);   /* aura figures, legible on dark */
  --aura-deep:#B8873A;

  /* dark surfaces — a shade of indigo in the black, not neutral grey */
  --bg:#08090F;
  --bg-grad-a:#08090F;
  --bg-grad-b:#0C0E1A;
  --surface:#12131D;
  --surface-2:#171927;
  --surface-3:#1E2032;
  --surface-inset:#0E0F18;
  --line:rgba(148,165,232,.13);
  --line-2:rgba(148,165,232,.24);
  --line-hot:rgba(211,169,79,.32);

  --text:#DBE1F0;
  --text-2:#98A4C6;
  --text-3:#6A7291;
  --heading:#FFFFFF;

  --card-white:#FFFFFF;
  --card-white-text:#101019;
  --card-white-2:#5A6076;
  --card-white-line:#E6E9F2;

  --shadow-lg:0 24px 60px -24px rgba(0,0,0,.9);
  --glow-blue:0 0 26px -8px rgba(75,92,196,.55);
  --glow-warm:0 0 26px -8px rgba(211,169,79,.42);

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --maxw:1240px;

  --font:"Archivo Narrow","Roboto Condensed","Barlow Semi Condensed",
         "Helvetica Neue Condensed","Arial Narrow",system-ui,-apple-system,
         "Segoe UI",Roboto,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,Roboto,
              "Helvetica Neue",Arial,sans-serif;
}

[data-theme="light"]{
  --bg:#F2F0EA;
  --bg-grad-a:#F4F2EC;
  --bg-grad-b:#EAEBF3;
  --surface:#FFFFFF;
  --surface-2:#F9F7F2;
  --surface-3:#EFEFF7;
  --surface-inset:#F5F3ED;
  --line:rgba(30,38,78,.11);
  --line-2:rgba(30,38,78,.19);
  --line-hot:rgba(168,124,34,.36);

  --text:#1A1E2E;
  --text-2:#48527A;
  --text-3:#79809C;
  --heading:#0A0A0F;

  --card-white-line:#E7E4DC;

  --shadow-lg:0 20px 44px -26px rgba(28,32,58,.38);
  --glow-blue:0 0 22px -10px rgba(75,92,196,.45);
  --glow-warm:0 0 22px -10px rgba(168,124,34,.38);

  --royal:#3C4CA8;
  --royal-deep:#26307A;
  --plum:#5E3D74;
  --burgundy:#6E3244;
  --social:#9C4E7B;
  --club:#2E8468;
  --aura-text:#8A6420;             /* same meaning, legible on off-white */
  --aura-deep:#8A6420;
}

/* ------------------------------ base ------------------------------ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background .45s ease,color .45s ease;
  overflow-x:hidden;
}
body.noscroll{overflow:hidden}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}
::selection{background:var(--s-yellow-2);color:#100C04}

h1,h2,h3,h4,h5,.display,.mono-label,.nav-brand,.stat-num{
  font-family:var(--font);font-stretch:87.5%;
}
h1,h2,h3,h4{margin:0;letter-spacing:-.01em;font-weight:700;color:var(--heading)}
.display{text-transform:uppercase;font-weight:700;letter-spacing:-.015em;line-height:.94}

.mono-label{
  text-transform:uppercase;font-size:10.5px;letter-spacing:.16em;
  font-weight:700;color:var(--text-3);
}
.stat-num{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.01em}
.tabular{font-variant-numeric:tabular-nums}

#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.page-bg{
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(120% 85% at 14% -12%,rgba(75,92,196,.15),transparent 64%),
    radial-gradient(95% 70% at 90% 2%,rgba(184,135,58,.07),transparent 66%),
    linear-gradient(180deg,var(--bg-grad-a),var(--bg-grad-b));
  transition:background .45s ease;
}

/* ---------------------------- top nav ---------------------------- */
.topnav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  width:min(calc(100% - 24px),var(--maxw));z-index:60;
  display:flex;align-items:center;gap:14px;
  padding:9px 10px 9px 18px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.05);
}
/* Star, then wordmark. The two sit on one baseline: the SVG is inline
   and dropped by --star-drop so the glyph's foot lands on the D's foot
   (the artwork occupies y 8.2-20.5 of a 24 box, not the full height). */
.nav-brand{
  --star-size:38px;          /* mark and wordmark scale together */
  --brand-lift:calc(var(--star-size) * -0.191);  /* optical centring, measured */
  display:block;font-size:24px;font-weight:700;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;color:var(--heading);white-space:nowrap;
  position:relative;top:var(--brand-lift);
}
.nav-brand .wm{display:inline;vertical-align:baseline}
/* the DESTNY mark — an outlined five-point star, stroked in currentColor
   so it can be re-tinted per theme, with the glow done in CSS */
.brand-star{
  /* The artwork sits at y 8.18-20.49 inside a 24 box, so the element
     extends 14.6% of its height below the glyph. Dropping it by exactly
     that much lands the star's foot on the wordmark's baseline, at any size. */
  width:var(--star-size);height:var(--star-size);flex:none;overflow:visible;
  display:inline-block;vertical-align:baseline;
  position:relative;top:calc(var(--star-size) * 0.1462);
  margin-right:calc(var(--star-size) * 0.30);
  color:var(--s-yellow-1);
  filter:drop-shadow(0 0 4px rgba(227,201,126,.55)) drop-shadow(0 0 11px rgba(184,135,58,.28));
  transition:color .3s ease,filter .3s ease;
}
.nav-brand:hover .brand-star{
  filter:drop-shadow(0 0 6px rgba(227,201,126,.75)) drop-shadow(0 0 14px rgba(184,135,58,.4));
}
[data-theme="light"] .brand-star{
  color:#A87C22;
  filter:drop-shadow(0 0 4px rgba(217,138,0,.35));
}
.nav-spacer{flex:1}

/* the utility bar carries one more control than it used to (the bell took
   the avatar's slot), so below tablet everything in it steps down a size
   rather than the last item falling off the end */
@media(max-width:620px){
  .topnav{gap:8px;padding:8px 8px 8px 12px}
  .nav-brand{--star-size:28px;font-size:18px;letter-spacing:.08em}
  .nav-actions{gap:6px}
  .nav-actions .btn-sm{padding:6px 11px;font-size:10px;letter-spacing:.06em}
  .iconbtn{width:34px;height:34px}
  .bell-ic{width:17px;height:17px}
}
@media(max-width:400px){
  .nav-brand .wm{display:none}
  .nav-brand{margin-right:-6px}
}
.nav-actions{display:flex;align-items:center;gap:8px}

.iconbtn{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text-2);
  transition:.2s;font-size:15px;flex:none;
}
.iconbtn:hover{border-color:var(--line-2);color:var(--heading);transform:translateY(-1px)}
.iconbtn.hot{border-color:var(--line-hot);color:var(--aura-text)}

.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:10px 18px;border-radius:var(--r-pill);font-family:var(--font);
  text-transform:uppercase;letter-spacing:.09em;font-size:12px;font-weight:700;
  border:1px solid var(--line-2);color:var(--text);background:var(--surface-2);
  transition:.18s;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);border-color:var(--line-2);background:var(--surface-3)}
.btn-primary{
  background:linear-gradient(100deg,#E9D49A,#D3A94F 58%,#B8873A);
  color:#191106;border-color:transparent;box-shadow:0 8px 26px -12px rgba(184,135,58,.65);
}
.btn-primary:hover{box-shadow:0 12px 30px -12px rgba(184,135,58,.8)}
.btn-blue{
  background:linear-gradient(100deg,#7288DC,#4B5CC4);color:#F4F6FF;border-color:transparent;
  box-shadow:0 8px 26px -14px rgba(75,92,196,.85);
}
.btn-ghost{background:transparent}
.btn-sm{padding:7px 13px;font-size:11px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* glowing dot ticker */
.ticker{
  display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--surface-inset);border:1px solid var(--line);overflow:hidden;
}
.ticker .dot{width:7px;height:7px;border-radius:50%;flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.82)}50%{opacity:1;transform:scale(1.12)}}
.ticker-text{
  font-family:var(--font);text-transform:uppercase;font-size:10px;letter-spacing:.15em;
  color:var(--text-3);margin-left:6px;white-space:nowrap;
}
@media(max-width:820px){.ticker-text{display:none}}
@media(max-width:640px){.ticker{display:none}}

/* ------------------------ module nav (app) ------------------------ */
/* ---------------------- module rail ------------------------------
   The modules used to be a horizontal strip above the page. They read
   as an order rather than a toolbar, so they now run down the left
   edge. One element, three widths: wide when there is room, a 64px
   icon rail when there is not, and a drawer under 900px. The width
   lives in --rail-w so the main column can indent by exactly it. */
:root{--rail-w:212px;--rail-mini:64px}
body.rail-mini{--rail-w:var(--rail-mini)}
@media(max-width:1100px){body:not(.rail-wide){--rail-w:var(--rail-mini)}}

.sidenav-wrap{
  position:fixed;top:104px;left:50%;transform:translateX(-50%);
  width:min(calc(100% - 24px),var(--maxw));z-index:55;pointer-events:none;
}
.sidenav{
  container-type:inline-size;                 /* mini styling keys off real width */
  pointer-events:auto;width:var(--rail-w);max-height:calc(100vh - 132px);
  display:flex;flex-direction:column;gap:6px;padding:8px;
  border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
  transition:width .26s cubic-bezier(.4,0,.2,1);
}
.side-head{display:flex;align-items:center;gap:8px;padding:2px 2px 2px 10px;min-height:26px}
.side-cap{
  font-family:var(--font);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);font-weight:700;white-space:nowrap;overflow:hidden;
}
.side-toggle,.side-close{
  margin-left:auto;width:26px;height:26px;border-radius:8px;flex:none;
  display:grid;place-items:center;border:1px solid transparent;color:var(--text-3);transition:.18s;
}
.side-toggle:hover,.side-close:hover{background:var(--surface-2);color:var(--text);border-color:var(--line)}
.side-toggle:focus-visible,.side-close:focus-visible{outline:2px solid var(--s-blue-1);outline-offset:2px}
.side-toggle i{
  width:8px;height:8px;border-left:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:rotate(45deg);transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.side-toggle[aria-expanded="false"] i{transform:rotate(-135deg)}
.side-close{display:none;font-size:13px}

.side-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
}
.side-list::-webkit-scrollbar{width:5px}
.side-list::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.side-item{
  position:relative;width:100%;display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:10px;text-align:left;
  font-family:var(--font);text-transform:uppercase;letter-spacing:.07em;
  font-size:11px;font-weight:700;color:var(--text-3);
  border:1px solid transparent;transition:background .18s,color .18s,border-color .18s;
}
.side-item .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-item .md{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:currentColor;box-shadow:0 0 8px currentColor;
}
.side-item:hover{color:var(--text);background:var(--surface-2)}
.side-item:focus-visible{outline:2px solid var(--s-blue-1);outline-offset:2px;color:var(--text)}
.side-item.active{
  color:var(--heading);background:var(--surface-3);border-color:var(--line-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 0 18px -8px var(--s-blue-1);
}
/* the live module also gets an edge marker, so the rail is readable at
   a glance even when the background tint is washed out by the blur */
.side-item.active::after{
  content:"";position:absolute;left:-9px;top:50%;translate:0 -50%;
  width:3px;height:17px;border-radius:0 3px 3px 0;background:var(--s-yellow-2);
}
/* how far the tour for that module has got */
.side-tick{width:6px;height:6px;border-radius:50%;flex:none;border:1px solid var(--line-2);transition:.2s}
.side-tick.part{background:var(--s-orange-1);border-color:transparent;opacity:.8}
.side-tick.done{background:var(--club);border-color:transparent}

.side-foot{border-top:1px solid var(--line);padding-top:6px;margin-top:auto}
.side-tour .md{
  width:auto;height:auto;background:none;box-shadow:none;
  color:var(--s-yellow-2);font-size:11px;line-height:1;
}
.side-pct{font-size:10px;color:var(--text-3);font-variant-numeric:tabular-nums;flex:none}

/* the icon rail: labels off, everything centred, tick moved to a corner */
@container (max-width:120px){
  .side-cap,.side-item .lbl,.side-pct{display:none}
  .side-head{justify-content:center;padding:2px}
  .side-toggle{margin-left:0}
  .side-item{justify-content:center;padding:12px 0}
  .side-item .md{width:8px;height:8px}
  .side-tick{position:absolute;top:7px;right:9px;width:5px;height:5px}
}

.side-scrim{display:none}
.navburger{display:none}

/* under 900px the rail becomes a drawer, opened from the top bar */
@media(max-width:900px){
  .sidenav-wrap{position:fixed;inset:0;transform:none;width:auto;z-index:210}
  .side-scrim{
    display:block;position:absolute;inset:0;background:rgba(5,5,10,.62);
    opacity:0;transition:opacity .26s ease;pointer-events:none;
  }
  .sidenav{
    container-type:normal;
    position:absolute;top:0;left:0;height:100%;width:min(78vw,272px);max-height:none;
    border-radius:0 var(--r-xl) var(--r-xl) 0;border-left:0;
    padding:16px 10px 18px;visibility:hidden;transform:translateX(-104%);
    transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s;
  }
  body.rail-open .side-scrim{opacity:1;pointer-events:auto}
  body.rail-open .sidenav{transform:none;visibility:visible}
  .side-toggle{display:none}
  .side-close{display:grid}
  .side-cap,.side-item .lbl,.side-pct{display:revert}
  .navburger{display:grid}
}
@media(prefers-reduced-motion:reduce){
  .sidenav{transition:none}
  .side-scrim{transition:none}
}

/* ------------------ guided tour: step card ----------------------- */
.coach-bar{height:3px;border-radius:2px;background:rgba(160,186,255,.18);overflow:hidden;margin:10px 0 2px}
[data-theme="light"] .coach-bar{background:rgba(24,32,64,.12)}
.coach-bar i{
  display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--s-yellow-1),var(--s-orange-1));
  transition:width .3s ease;
}
/* the checkpoint: this step will not let go until the thing is done */
.coach-do{
  display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:9px 11px;border-radius:10px;
  border:1px dashed var(--line-hot);background:rgba(211,169,79,.08);
  font-size:12px;line-height:1.4;color:var(--s-yellow-1);transition:.25s ease;
}
[data-theme="light"] .coach-do{color:#8A6420}
.coach-do .tick{
  width:15px;height:15px;border-radius:50%;border:1.5px solid currentColor;flex:none;
  display:grid;place-items:center;transition:.25s ease;
}
.coach-do.ok{border-style:solid;border-color:var(--club);color:var(--club);background:rgba(95,168,148,.12)}
.coach-do.ok .tick{background:var(--club);border-color:var(--club)}
.coach-do.ok .tick::after{content:"✓";color:#04140E;font-size:10px;font-weight:700;line-height:1}
.coach [data-tip-next][disabled]{opacity:.45;cursor:not-allowed}
.coach-more{
  display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--line);
}
.coach-more button{
  font-family:var(--font);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);transition:color .16s;
}
.coach-more button:hover{color:var(--text)}
.coach-more button:focus-visible{outline:2px solid var(--s-blue-1);outline-offset:2px;border-radius:3px}
/* the hotspot sits on the thing the checkpoint is asking for */
.coach-hot{
  position:fixed;z-index:299;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;pointer-events:none;border:2px solid var(--s-yellow-1);
  animation:hot 1.7s ease-out infinite;
}
@keyframes hot{0%{transform:scale(.45);opacity:.9}100%{transform:scale(2.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.coach-hot{animation:none;opacity:.75}}

/* ------------------ guided tour: the hub ------------------------- */
.tour-list{display:flex;flex-direction:column;gap:6px}
.tour-row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:11px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface-2);transition:.16s;
}
.tour-row:hover{border-color:var(--line-2);background:var(--surface-3)}
/* the two stages the study cannot do without */
.tour-row.req{border-color:var(--line-hot);background:rgba(211,169,79,.07)}
.tour-row.req:hover{border-color:rgba(211,169,79,.55);background:rgba(211,169,79,.12)}
.tour-row.req .tr-name em{color:var(--aura-text)}
.tour-row.req.is-done{border-color:var(--line);background:var(--surface-2)}
.tour-row.req.is-done .tr-name em{color:var(--club)}
.tour-row.req.is-done .tr-go{color:var(--club)}
.tour-row:focus-visible{outline:2px solid var(--s-blue-1);outline-offset:2px}
.tour-row .md{width:8px;height:8px;border-radius:50%;flex:none;background:currentColor;box-shadow:0 0 8px currentColor}
.tr-name{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;
  font-family:var(--font);text-transform:uppercase;letter-spacing:.06em;
  font-size:12px;font-weight:700;color:var(--text);
}
.tr-name em{
  font-style:normal;font-family:var(--font-body);text-transform:none;letter-spacing:0;
  font-size:11.5px;font-weight:400;color:var(--text-3);
}
.tr-bar{width:72px;height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden;flex:none}
.tr-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--s-yellow-1),var(--s-orange-1))}
.tr-go{
  font-family:var(--font);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--s-yellow-2);flex:none;
}
@media(max-width:520px){.tr-bar{display:none}}

/* ------------------------- app layout ---------------------------- */
/* no z-index here on purpose: the coachmark spotlight lifts elements
   above the veil, which only works if this is not a stacking context */
.app-main{
  position:relative;
  width:min(calc(100% - 24px),var(--maxw));margin:0 auto;
  padding:104px 0 140px;
  padding-left:calc(var(--rail-w) + 22px);
  transition:padding-left .26s cubic-bezier(.4,0,.2,1);
}
@media(max-width:900px){.app-main{padding-left:0}}
@media(prefers-reduced-motion:reduce){.app-main{transition:none}}
.screen-head{margin-bottom:20px;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.screen-head h1{font-size:clamp(28px,4.4vw,46px);text-transform:uppercase;line-height:.95;letter-spacing:-.02em}
.screen-head p{margin:6px 0 0;color:var(--text-3);max-width:62ch;font-size:13.5px}
.screen-head .head-right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;position:relative;
}
.panel.glow-blue{box-shadow:var(--glow-blue);border-color:rgba(112,144,255,.30)}
.panel.glow-warm{box-shadow:var(--glow-warm);border-color:var(--line-hot)}
.panel-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.panel-head h3{font-size:15px;text-transform:uppercase;letter-spacing:.06em}
.panel-head .mono-label{margin-left:auto}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* --------------------------- chips ------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--r-pill);
  font-family:var(--font);text-transform:uppercase;letter-spacing:.1em;
  font-size:9.5px;font-weight:700;line-height:1.6;
  border:1px solid currentColor;white-space:nowrap;
}
.chip .ck{font-size:8.5px;line-height:1;opacity:.85}
.chip-year{color:var(--s-blue-1)}
.chip-major{color:var(--s-blue-3)}
.chip-officer{color:var(--s-orange-1)}
.chip-alumni{color:var(--s-yellow-2)}
.chip-tutor{color:var(--club)}
.chip-ta{color:var(--social)}
.chip-mentor{color:var(--s-red-1)}
.chip-course{color:var(--text-3)}
.on-white .chip-course{color:#8790A8}
.on-white .chip-year{color:#4A6BE0}
.on-white .chip-alumni{color:#B07C00}
.on-white .chip{background:#fff}

.tag{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;
  font-family:var(--font);text-transform:uppercase;letter-spacing:.09em;font-size:10px;
  font-weight:700;background:var(--surface-3);border:1px solid var(--line);color:var(--text-2);
}

/* --------------------------- avatars ----------------------------- */
.av{
  position:relative;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font);font-weight:700;color:#0A0A0F;letter-spacing:.02em;
}
.av-ring{position:relative;flex:none;border-radius:50%;padding:2.5px;display:grid;place-items:center}
.av-ring::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from -90deg,var(--s-yellow-2) calc(var(--p) * 1%),rgba(255,255,255,.10) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 0);
  filter:drop-shadow(0 0 5px rgba(255,217,102,.55));
}
.av-ring .av{border:2px solid var(--surface)}
.on-white .av-ring .av{border-color:#fff}
.on-white .av-ring::after{background:conic-gradient(from -90deg,var(--s-orange-1) calc(var(--p) * 1%),#E9E6DE 0)}

/* --------------------------- feed -------------------------------- */
.feed-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
@media(max-width:1000px){.feed-wrap{grid-template-columns:1fr}.feed-side{display:none}}
.feed-col{display:flex;flex-direction:column;gap:16px}
.feed-side{position:sticky;top:150px;z-index:1;display:flex;flex-direction:column;gap:14px}
.feed-side:has(.spot){z-index:299}

.wcard{
  background:var(--card-white);color:var(--card-white-text);
  border:1px solid var(--card-white-line);border-radius:var(--r-lg);
  box-shadow:0 18px 44px -28px rgba(0,0,0,.85);overflow:hidden;
}
[data-theme="light"] .wcard{box-shadow:0 14px 34px -26px rgba(30,34,60,.55)}
.wcard .muted{color:var(--card-white-2)}
.post-head{display:flex;gap:11px;align-items:flex-start;padding:15px 16px 10px}
.post-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.post-name b{font-family:var(--font);font-size:15.5px;letter-spacing:-.005em}
.verified{color:var(--s-blue-1);font-size:12px;line-height:1}
.post-meta{font-size:12px;color:var(--card-white-2);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.post-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.post-body{padding:2px 16px 12px;font-size:14.5px;line-height:1.55}
.post-body .hl{color:#3F63E0;font-weight:600}

.carousel{position:relative;background:#EFEFF4;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none}
.carousel:active{cursor:grabbing}
.carousel-track{display:flex;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.cslide{
  min-width:100%;aspect-ratio:16/10;display:grid;place-items:center;
  font-family:var(--font);text-transform:uppercase;letter-spacing:.18em;font-size:11px;
  color:rgba(255,255,255,.92);text-align:center;padding:20px;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.cnav{
  position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;
  border-radius:50%;background:rgba(10,10,15,.55);color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(6px);font-size:14px;
}
.cnav.l{left:10px}.cnav.r{right:10px}
.cdots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px}
.cdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);transition:.2s}
.cdots i.on{background:#fff;width:16px;border-radius:3px}
.cbadge{
  position:absolute;top:10px;right:10px;padding:3px 9px;border-radius:var(--r-pill);
  background:rgba(10,10,15,.6);color:#fff;font-size:10px;font-family:var(--font);
  letter-spacing:.1em;backdrop-filter:blur(6px);
}

.poll{margin:0 16px 12px;border:1px solid var(--card-white-line);border-radius:var(--r-md);padding:12px}
.poll h4{font-size:13.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;color:#101019}
.poll-opt{
  position:relative;border:1px solid var(--card-white-line);border-radius:10px;
  padding:9px 12px;margin-bottom:7px;overflow:hidden;cursor:pointer;transition:.18s;
  display:flex;justify-content:space-between;gap:10px;font-size:13.5px;width:100%;text-align:left;
}
.poll-opt:hover{border-color:var(--s-blue-1)}
.poll-opt .bar{position:absolute;inset:0;width:0;background:linear-gradient(90deg,rgba(112,144,255,.24),rgba(160,186,255,.12));transition:width .6s cubic-bezier(.4,0,.2,1)}
.poll-opt span,.poll-opt b{position:relative}
.poll-opt.picked{border-color:var(--s-blue-1);font-weight:600}
.poll-foot{font-size:11.5px;color:var(--card-white-2);margin-top:2px}

.aurabar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-top:1px solid var(--card-white-line);flex-wrap:wrap}
.abtn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-pill);
  border:1px solid var(--card-white-line);font-family:var(--font);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:#3A4058;transition:.16s;
}
.abtn:hover{border-color:#B9C3E0;background:#F7F8FC}
.abtn.up.on{background:linear-gradient(100deg,#EDE2C9,#E3C97E);border-color:#D3A94F;color:#4A3200}
.abtn.down.on{background:#FFECE7;border-color:#A9673C;color:#8A2A10}
.abtn .n{font-variant-numeric:tabular-nums}
.aurabar .spacer{flex:1}

.comments{border-top:1px solid var(--card-white-line);padding:12px 16px;background:#FBFBFE}
.cmt{display:flex;gap:9px;margin-bottom:11px}
.cmt .body{font-size:13.5px}
.cmt .body .who{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:2px}
.cmt .body .who b{font-family:var(--font);font-size:13.5px}
.cmt-form{display:flex;gap:8px;align-items:center}
.inp{
  flex:1;padding:9px 13px;border-radius:var(--r-pill);border:1px solid var(--card-white-line);
  background:#fff;font-size:13.5px;color:#101019;outline:none;
}
.inp:focus{border-color:var(--s-blue-1);box-shadow:0 0 0 3px rgba(112,144,255,.14)}
.d-inp{
  width:100%;padding:10px 14px;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--surface-inset);color:var(--text);outline:none;font-size:14px;
}
.d-inp:focus{border-color:var(--s-blue-1);box-shadow:0 0 0 3px rgba(112,144,255,.14)}
textarea.d-inp{resize:vertical;min-height:88px;font-family:var(--font-body)}

.composer{display:flex;gap:11px;align-items:center}
.composer .fake{
  flex:1;padding:12px 16px;border-radius:var(--r-pill);background:var(--surface-inset);
  border:1px solid var(--line);color:var(--text-3);font-size:14px;text-align:left;
}
.composer .fake:hover{border-color:var(--line-2)}

/* --------------------------- kanban ------------------------------ */
.kan{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
@media(max-width:900px){.kan{grid-template-columns:1fr}}
.kcol{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px}
.kcol-head{display:flex;align-items:center;gap:8px;margin-bottom:11px;padding:2px 4px}
.kcol-head .md{width:8px;height:8px;border-radius:50%;box-shadow:0 0 10px currentColor;background:currentColor;flex:none}
.kcol-head h3{font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.kcol-head .n{margin-left:auto;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.tick{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px;margin-bottom:9px;cursor:pointer;transition:.18s;border-left-width:3px;
  width:100%;text-align:left;display:block;
}
.tick:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:var(--glow-blue)}
.tick h4{font-size:14px;margin-bottom:7px;line-height:1.3;letter-spacing:-.005em}
.tick .row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-3);flex-wrap:wrap}

/* -------------------------- calendar ----------------------------- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{text-align:center;font-family:var(--font);text-transform:uppercase;font-size:10px;
  letter-spacing:.14em;color:var(--text-3);padding-bottom:4px}
.cal-cell{
  min-height:96px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);
  padding:7px;display:flex;flex-direction:column;gap:4px;transition:.16s;
}
.cal-cell.dim{opacity:.34}
.cal-cell.today{border-color:var(--s-yellow-2);box-shadow:var(--glow-warm)}
.cal-cell .d{font-family:var(--font);font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-3)}
.cal-cell.today .d{color:var(--aura-text);font-weight:700}
.ev{
  border-radius:7px;padding:4px 7px;font-size:10.5px;line-height:1.25;cursor:pointer;
  border-left:3px solid currentColor;background:color-mix(in srgb,currentColor 15%,transparent);
  transition:.15s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;width:100%;
}
.ev:hover{background:color-mix(in srgb,currentColor 30%,transparent);transform:translateX(1px)}
.ev b{color:var(--text);font-weight:600}
.legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.legend .li{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3)}
.legend .sw{width:10px;height:10px;border-radius:3px;box-shadow:0 0 10px currentColor;background:currentColor;flex:none}

.mini{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.mini .mc{
  aspect-ratio:1;border-radius:8px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;font-size:11.5px;font-variant-numeric:tabular-nums;
  color:var(--text-2);border:1px solid transparent;
}
.mini .mc:hover{background:var(--surface-3)}
.mini .mc.dim{opacity:.28}
.mini .mc.today{border-color:var(--s-yellow-2);color:var(--aura-text);font-weight:700}
.mini .dots{display:flex;gap:2px;height:4px;align-items:center}
.mini .dots i{width:4px;height:4px;border-radius:50%;background:currentColor}

/* ------------------------- communities --------------------------- */
.explore{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.ctile{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);transition:.2s;text-align:left;width:100%;display:block}
.ctile:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--glow-blue)}
.ctile .cover{aspect-ratio:1.35;position:relative;display:grid;place-items:center}
.ctile .cover .em{font-size:30px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.ctile .joined{
  position:absolute;top:8px;right:8px;padding:3px 9px;border-radius:var(--r-pill);
  background:rgba(10,10,15,.62);backdrop-filter:blur(6px);font-family:var(--font);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff;
}
.ctile .meta{padding:11px 12px}
.ctile h4{font-size:14px;margin-bottom:4px;line-height:1.25}
.ctile .sub{font-size:11.5px;color:var(--text-3);display:flex;align-items:center;gap:6px}

/* --------------------------- widgets ----------------------------- */
.wgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.w{background:var(--surface);border:1px solid var(--line);
   border-radius:var(--r-lg);padding:16px;position:relative;transition:border-color .2s,box-shadow .2s,opacity .2s}
.w.w6{grid-column:span 6}.w.w8{grid-column:span 8}.w.w12{grid-column:span 12}
@media(max-width:960px){.w,.w.w6,.w.w8{grid-column:span 6}}
@media(max-width:640px){.w,.w.w6,.w.w8,.w.w12{grid-column:span 12}}
.w.pinned{border-color:var(--line-hot);box-shadow:var(--glow-warm)}
.w.dragging{opacity:.35}
.w.dragover{border-color:var(--s-blue-1);box-shadow:0 0 0 2px rgba(112,144,255,.3)}
.w-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.w-head h3{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--text-2)}
.w-tools{margin-left:auto;display:flex;gap:4px;align-items:center;opacity:.45;transition:.2s}
.w:hover .w-tools{opacity:1}
.w-tools button{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:12px;color:var(--text-3);border:1px solid transparent}
.w-tools button:hover{background:var(--surface-3);color:var(--text)}
.w-tools button.on{color:var(--aura-text)}
.grab{cursor:grab}.grab:active{cursor:grabbing}

.row-item{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.row-item:last-child{border-bottom:0;padding-bottom:0}
.row-item .lead{width:4px;height:32px;border-radius:3px;flex:none;box-shadow:0 0 10px currentColor;background:currentColor}
.row-item .t{flex:1;min-width:0}
.row-item .t b{display:block;font-family:var(--font);font-size:14px;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.row-item .t span{font-size:11.5px;color:var(--text-3)}
.row-item .r{font-size:11.5px;color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums;flex:none}

.bigstat{display:flex;align-items:baseline;gap:8px}
.bigstat .n{font-family:var(--font);font-weight:700;font-size:38px;line-height:1;color:var(--s-yellow-2);
  text-shadow:0 0 24px rgba(255,217,102,.4);font-variant-numeric:tabular-nums}
[data-theme="light"] .bigstat .n{color:var(--s-orange-2);text-shadow:none}
.bigstat .u{font-family:var(--font);text-transform:uppercase;font-size:10px;letter-spacing:.16em;color:var(--text-3)}

.bar-track{height:7px;border-radius:99px;background:var(--surface-inset);overflow:hidden;border:1px solid var(--line)}
.bar-fill{height:100%;border-radius:99px;transition:width .8s cubic-bezier(.4,0,.2,1)}

/* --------------------------- rooms ------------------------------- */
.bubbles{display:flex}
.bubbles>*{margin-left:-9px}
.bubbles>*:first-child{margin-left:0}
.speaking{box-shadow:0 0 0 2px var(--club),0 0 16px -2px var(--club)}
.timer{
  font-family:var(--font);font-variant-numeric:tabular-nums;font-size:46px;font-weight:700;
  letter-spacing:.02em;color:var(--heading);text-shadow:0 0 30px rgba(160,186,255,.35);line-height:1;
}
.whiteboard{
  border-radius:var(--r-md);border:1px dashed var(--line-2);
  background:repeating-linear-gradient(45deg,transparent,transparent 11px,rgba(160,186,255,.05) 11px,rgba(160,186,255,.05) 22px);
  min-height:150px;display:grid;place-items:center;color:var(--text-3);text-align:center;padding:16px;
}

/* --------------------------- notes ------------------------------- */
.thumb{aspect-ratio:4/3;border-radius:12px;position:relative;overflow:hidden;display:grid;place-items:center}
.thumb .lines{position:absolute;inset:14px;display:flex;flex-direction:column;gap:6px;opacity:.55}
.thumb .lines i{height:5px;border-radius:99px;background:rgba(255,255,255,.7)}
.upv{
  display:inline-flex;flex-direction:column;align-items:center;gap:1px;padding:6px 9px;
  border-radius:10px;border:1px solid var(--line);background:var(--surface-2);
  font-variant-numeric:tabular-nums;font-family:var(--font);font-size:13px;transition:.16s;line-height:1.1;flex:none;
}
.upv:hover{border-color:var(--s-blue-1)}
.upv.on{border-color:var(--s-yellow-2);color:var(--aura-text);box-shadow:var(--glow-warm)}
.upv small{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.65}

/* -------------------------- tutoring ----------------------------- */
.price{font-family:var(--font);font-size:22px;font-variant-numeric:tabular-nums;color:var(--heading);font-weight:700}
.price small{font-size:11px;color:var(--text-3);letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.stars{color:var(--s-yellow-2);font-size:12px;letter-spacing:.08em}

/* -------------------------- timetable ---------------------------- */
.tt{display:grid;grid-template-columns:58px repeat(5,minmax(110px,1fr));gap:5px}
.tt-scroll{overflow-x:auto;padding-bottom:8px}
.tt-h{font-family:var(--font);text-transform:uppercase;font-size:10px;letter-spacing:.14em;
  color:var(--text-3);text-align:center;padding:6px 0}
.tt-t{font-family:var(--font);font-size:10px;color:var(--text-3);text-align:right;padding-right:8px;
  font-variant-numeric:tabular-nums;line-height:58px}
.tt-slot{height:58px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line)}
.tt-class{
  height:58px;border-radius:9px;padding:7px 9px;transition:.16s;overflow:hidden;text-align:left;
  border:1px solid currentColor;background:color-mix(in srgb,currentColor 16%,transparent);
}
.tt-class:hover{background:color-mix(in srgb,currentColor 32%,transparent);transform:translateY(-1px)}
.tt-class b{display:block;font-family:var(--font);font-size:12px;color:var(--text);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-class span{font-size:10px;opacity:.9}

/* --------------------------- agenda ------------------------------ */
.agenda-item{
  display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line);margin-bottom:8px;
  border-left:3px solid currentColor;transition:.16s;
}
.agenda-item:hover{transform:translateX(2px);border-color:var(--line-2)}
.agenda-item.done{opacity:.42}
.agenda-item.done .t b{text-decoration:line-through}
.cbox{
  width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);flex:none;
  display:grid;place-items:center;font-size:11px;color:transparent;transition:.16s;
}
.cbox.on{background:var(--club);border-color:var(--club);color:#04140E}

/* -------------------------- profile ------------------------------ */
.ach{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;
  border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line);text-align:center;
}
.ach .em{font-size:24px}
.ach b{font-size:11.5px;font-family:var(--font);text-transform:uppercase;letter-spacing:.07em;color:var(--text)}
.ach span{font-size:10px;color:var(--text-3)}
.ach.locked{opacity:.36}
.heat{display:grid;grid-template-columns:repeat(26,1fr);gap:3px}
.heat i{aspect-ratio:1;border-radius:2px;background:var(--surface-3)}

/* ---------------------------- chat ------------------------------- */
.chat{display:flex;flex-direction:column;gap:10px;max-height:300px;overflow-y:auto;padding-right:4px}
.bub{max-width:82%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5}
.bub.ai{background:var(--surface-3);border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start}
.bub.me{background:linear-gradient(100deg,#94A5E8,#6E86E0);color:#04081C;border-bottom-right-radius:5px;align-self:flex-end}
.suggests{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}

/* --------------------------- modal ------------------------------- */
.overlay{
  position:fixed;inset:0;z-index:200;background:rgba(5,5,10,.72);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  display:grid;place-items:center;padding:18px;animation:fade .2s ease;overflow-y:auto;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  width:min(640px,100%);max-height:86vh;overflow-y:auto;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-xl);padding:22px;
  box-shadow:var(--shadow-lg),0 0 60px -20px rgba(112,144,255,.35);
  animation:pop .26s cubic-bezier(.2,.9,.3,1.2);
}
.modal.wide{width:min(880px,100%)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.modal-head h2{font-size:22px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05}
.modal-head .x{margin-left:auto}

.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:7px}
.slot{
  padding:9px 6px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);
  font-family:var(--font);font-size:12px;font-variant-numeric:tabular-nums;text-align:center;transition:.15s;
}
.slot:hover{border-color:var(--s-blue-1)}
.slot.on{background:linear-gradient(100deg,#94A5E8,#6E86E0);color:#04081C;border-color:transparent}
.slot.off{opacity:.28;pointer-events:none;text-decoration:line-through}

/* --------------------------- coach ------------------------------- */
.coach{
  position:fixed;z-index:300;width:min(312px,calc(100vw - 28px));
  background:linear-gradient(160deg,#1C1C28,#141420);
  border:1px solid var(--line-hot);border-radius:var(--r-md);padding:15px 16px;
  box-shadow:0 26px 60px -20px rgba(0,0,0,.9),var(--glow-warm);
  animation:pop .24s cubic-bezier(.2,.9,.3,1.2);color:#DBE1F0;
}
[data-theme="light"] .coach{background:linear-gradient(160deg,#FFFFFF,#F4EDDF);color:#171B2B}
.coach .n{font-family:var(--font);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--s-orange-1)}
.coach p{margin:7px 0 13px;font-size:13.5px;line-height:1.5}
.coach .acts{display:flex;gap:8px;align-items:center}
.coach .acts .skip{margin-left:auto;font-size:11px;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.1em;font-family:var(--font)}
.spot{position:relative;z-index:299;box-shadow:0 0 0 3px rgba(255,217,102,.65),0 0 34px -4px rgba(255,217,102,.7);border-radius:var(--r-md)}
.coach-veil{position:fixed;inset:0;z-index:298;background:rgba(5,5,10,.5);animation:fade .2s}

/* --------------------------- FABs -------------------------------- */
.fabs{position:fixed;right:18px;bottom:18px;z-index:150;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.fab{
  display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:var(--r-pill);
  font-family:var(--font);text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:700;
  background:linear-gradient(100deg,#E3C97E,#C89050 55%,#A9673C);color:#170C02;
  box-shadow:0 14px 34px -12px rgba(255,153,68,.85);transition:.2s;
}
.fab:hover{transform:translateY(-2px) scale(1.02)}
.fab.sec{background:var(--surface);color:var(--text);border:1px solid var(--line-2);box-shadow:var(--shadow-lg)}

.emo{display:flex;gap:8px;flex-wrap:wrap}
.emo button{
  width:52px;height:52px;border-radius:14px;font-size:24px;background:var(--surface-2);
  border:1px solid var(--line);transition:.16s;
}
.emo button:hover{transform:translateY(-2px) scale(1.06);border-color:var(--line-2)}
.emo button.on{border-color:var(--s-yellow-2);background:var(--surface-3);box-shadow:var(--glow-warm)}

.thumbs{
  display:flex;align-items:center;gap:10px;justify-content:center;margin-top:28px;padding:16px;
  border-radius:var(--r-lg);border:1px dashed var(--line-2);background:var(--surface);flex-wrap:wrap;
}
.thumbs .q{font-family:var(--font);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--text-3)}
.tbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);font-size:17px;transition:.16s}
.tbtn:hover{transform:translateY(-2px)}
.tbtn.on.up{border-color:var(--club);box-shadow:0 0 18px -6px var(--club)}
.tbtn.on.down{border-color:var(--s-red-1);box-shadow:0 0 18px -6px var(--s-red-1)}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  z-index:400;padding:12px 20px;border-radius:var(--r-pill);background:var(--surface);
  border:1px solid var(--line-2);box-shadow:var(--shadow-lg);font-size:13px;
  opacity:0;transition:.28s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;display:flex;gap:9px;align-items:center;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
@media(max-width:560px){.opts{grid-template-columns:1fr}}
.opt{
  display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface-2);font-size:13px;transition:.15s;text-align:left;width:100%;
}
.opt:hover{border-color:var(--line-2)}
.opt.on{border-color:var(--s-blue-1);background:var(--surface-3);box-shadow:0 0 18px -10px var(--s-blue-1)}
.opt .bx{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-2);flex:none;
  display:grid;place-items:center;font-size:10px;color:transparent}
.opt.on .bx{background:var(--s-blue-1);border-color:var(--s-blue-1);color:#04081C}

/* --------------------------- utilities --------------------------- */
.hr{height:1px;background:var(--line);margin:16px 0;border:0}
.muted{color:var(--text-3)}
.small{font-size:12px}
.mt{margin-top:14px}.mt-s{margin-top:8px}.mt-l{margin-top:22px}.mb{margin-bottom:14px}
.flex{display:flex}.ac{align-items:center}.as{align-items:flex-start}.jb{justify-content:space-between}
.gap{gap:10px}.gap-s{gap:6px}.gap-l{gap:16px}.wrap{flex-wrap:wrap}.col{flex-direction:column}
.f1{flex:1;min-width:0}
.center{text-align:center}
.trust{
  display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:var(--r-md);
  background:var(--surface-inset);border:1px solid var(--line);font-size:12.5px;color:var(--text-3);
}
.trust b{color:var(--text-2)}

/* ============================ LANDING ============================ */
.landing{position:relative;z-index:2}
.hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  width:min(calc(100% - 24px),var(--maxw));margin:0 auto;padding:150px 0 70px;
}
.hero-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero-strip{
  display:flex;gap:26px;margin-top:60px;flex-wrap:wrap;padding-top:26px;
  border-top:1px solid var(--line);
}
.hero-strip .item b{display:block;font-family:var(--font);font-size:26px;font-variant-numeric:tabular-nums;color:var(--heading)}
.hero-strip .item span{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--text-3);font-family:var(--font)}

/* scroll-transition section: dark starfield -> light off-white */
/* --wash is driven by scroll (0 → 1): the off-white content ground fades
   in behind the headline, soft at both edges so it never reads as a seam */
.shift{
  --wash:0;position:relative;
  background-image:linear-gradient(to bottom,
    rgb(244 241 233 / 0) 0,
    rgb(244 241 233 / var(--wash)) 190px,
    rgb(244 241 233 / var(--wash)) calc(100% - 240px),
    rgb(244 241 233 / 0) 100%);
}
.shift-inner{width:min(calc(100% - 24px),var(--maxw));margin:0 auto;padding:150px 0 150px}
/* the star block sits between the two halves of the section, so the intro
   stops short of it and the supporting cards pick up again underneath */
.shift-inner.si-top{padding-bottom:52px}
.shift-inner.si-tail{padding-top:104px}
.shift-title{
  font-family:var(--font);text-transform:uppercase;font-weight:700;
  font-size:clamp(38px,8.4vw,116px);line-height:.9;letter-spacing:-.03em;
  color:#FFFFFF;max-width:15ch;margin:0 0 34px;
}
.shift.light-on .mono-label{color:#7A6F55}
.shift.light-on .lead-copy{color:#3A3B44}
.shift.light-on h1,.shift.light-on h2,.shift.light-on h3,.shift.light-on h4{color:#0A0A0F}
.lead-copy{max-width:62ch;font-size:clamp(15px,1.8vw,19px);line-height:1.6;color:var(--text-2);transition:color .3s}






.closer{
  width:min(calc(100% - 24px),var(--maxw));margin:0 auto;padding:110px 0 130px;position:relative;z-index:2;
}
.closer-card{
  border-radius:var(--r-xl);padding:clamp(28px,5vw,58px);border:1px solid var(--line-2);
  background:linear-gradient(150deg,var(--surface),var(--surface-inset));
  box-shadow:var(--shadow-lg),0 0 70px -34px rgba(112,144,255,.7);
}
.closer-card h2{font-size:clamp(30px,5.6vw,62px);text-transform:uppercase;line-height:.94;letter-spacing:-.025em}
/* the landing's last stop — "Join & build with us" scrolls here rather than
   into the app, so it has to read as an address, not a footnote */
.contact{
  width:min(calc(100% - 24px),var(--maxw));margin:0 auto;
  padding:56px 0 30px;position:relative;z-index:2;
  scroll-margin-top:96px;            /* the fixed top bar must not cover it */
}
.contact-inner{border-top:1px solid var(--line-2);padding-top:34px}
.contact .mono-label{display:block;margin-bottom:16px}
.contact-mail{
  display:inline-block;font-family:var(--font);font-stretch:87.5%;font-weight:700;
  font-size:clamp(19px,2.6vw,34px);line-height:1.05;letter-spacing:-.02em;
  /* --aura-text, not the raw gold: it darkens itself on the light theme.
     It is the flat fallback here, and the rule the underline is mixed from */
  color:var(--aura-text);
  border-bottom:1px solid color-mix(in srgb,var(--aura-text) 34%,transparent);
  padding-bottom:7px;max-width:100%;overflow-wrap:anywhere;
  transition:border-color .25s ease;
}
/* champagne → deep gold across the address. Guarded, because without
   background-clip the transparent fill would leave nothing to read. */
@supports (background-clip:text) or (-webkit-background-clip:text){
  .contact-mail{
    --mail-a:#EFDAA6;--mail-b:#D3A94F;--mail-c:#B07E33;
    background-image:linear-gradient(96deg,var(--mail-a),var(--mail-b) 48%,var(--mail-c));
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  [data-theme="light"] .contact-mail{--mail-a:#A87C2C;--mail-b:#8A6420;--mail-c:#654613}
}
.contact-mail:hover,.contact-mail:focus-visible{
  border-color:color-mix(in srgb,var(--aura-text) 85%,transparent);
}
.contact p{margin:20px 0 0;max-width:52ch;font-size:14px;line-height:1.62;color:var(--text-2)}

.foot{
  width:min(calc(100% - 24px),var(--maxw));margin:0 auto;padding:0 0 60px;
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--text-3);position:relative;z-index:2;
}

/* ======================= SURVEY / RANKING ======================= */
.wizard{display:flex;flex-direction:column;gap:4px}
.wiz-bar{display:flex;gap:4px;margin-bottom:6px}
.wiz-bar i{flex:1;height:3px;border-radius:99px;background:var(--surface-3);transition:.3s}
.wiz-bar i.on{background:linear-gradient(90deg,#E3C97E,#C89050);box-shadow:0 0 10px -2px var(--s-orange-1)}
.wiz-step{animation:pop .22s cubic-bezier(.2,.9,.3,1.2)}
.wiz-foot{display:flex;gap:10px;align-items:center;margin-top:22px}
.wiz-foot .count{margin-left:auto;font-family:var(--font);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}

/* ---------------- tap-to-rank board ----------------
   Eight squares, tapped in order. The number badge is the whole
   feedback loop: empty and outlined means "a number goes here",
   filled in the module's own colour means "you put it there". */
.sq-rank{position:relative}
.sq-top{display:flex;align-items:center;gap:12px;margin:2px 2px 12px}
.sq-meter{
  flex:1;min-width:60px;height:4px;border-radius:99px;
  background:var(--surface-3);overflow:hidden;
}
.sq-meter i{
  display:block;height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,#E3C97E,#C89050);
  box-shadow:0 0 10px -2px var(--s-orange-1);
  transition:width .34s cubic-bezier(.4,0,.2,1);
}
.sq-count{
  flex:none;font-family:var(--font);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);
}
.sq-count b{color:var(--aura-text);font-weight:700}
.sq-clear{
  flex:none;font-family:var(--font);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);padding:6px 11px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface-2);transition:.16s;
}
.sq-clear:hover:not([disabled]){color:var(--text);border-color:var(--line-2)}
.sq-clear[disabled]{opacity:.32;pointer-events:none}

/* six features, so the board is a 3x2 block at every width it can hold one */
.sq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:520px;margin:0 auto}
.sq{
  position:relative;aspect-ratio:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;padding:10px 8px;
  border-radius:var(--r-md);background:var(--surface-2);
  border:1px solid var(--line);color:var(--text-2);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.2),border-color .18s,background .18s,box-shadow .18s;
}
.sq:hover{border-color:var(--line-2);transform:translateY(-2px)}
.sq:focus-visible{outline:2px solid var(--s-blue-1);outline-offset:2px}
.sq.on{
  border-color:var(--c);color:var(--text);
  background:color-mix(in srgb,var(--c) 13%,var(--surface-2));
  box-shadow:0 0 24px -12px var(--c),inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent);
}
.sq-em{font-size:26px;line-height:1;filter:saturate(.55) opacity(.6);transition:.18s}
.sq.on .sq-em{filter:none;transform:scale(1.06)}
.sq-lbl{
  font-family:var(--font);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.25;text-align:center;max-width:100%;
}
.sq-n{
  position:absolute;top:7px;left:7px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font);font-weight:700;
  font-size:12.5px;font-variant-numeric:tabular-nums;
  border:1px dashed var(--line-2);color:transparent;background:transparent;transition:.18s;
}
.sq.on .sq-n{
  border-style:solid;border-color:transparent;color:#0B0B12;
  background:var(--c);box-shadow:0 0 16px -4px var(--c);
}
[data-theme="light"] .sq.on .sq-n{color:#fff}
.sq.bump{animation:sqBump .32s cubic-bezier(.2,.9,.3,1.2)}
@keyframes sqBump{0%{transform:scale(1)}42%{transform:scale(1.09)}100%{transform:scale(1)}}

.sq-podium{
  margin:14px 2px 0;font-size:12.5px;line-height:1.6;color:var(--text-3);
  min-height:20px;
}
.sq-podium b{color:var(--text-2);font-weight:600}
.sq-rank.done .sq-podium{color:var(--text-2)}

/* the board says "not yet" by shivering rather than by locking a button */
.sq-rank.nudge .sq-grid{animation:sqNudge .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes sqNudge{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  45%{transform:translateX(5px)}
  70%{transform:translateX(-3px)}
}
@media(prefers-reduced-motion:reduce){
  .sq,.sq-em,.sq-n,.sq-meter i{transition:none}
  .sq.bump,.sq-rank.nudge .sq-grid{animation:none}
  .sq:hover{transform:none}
}
@media(max-width:600px){
  .sq-grid{gap:8px}
  .sq{gap:5px;padding:8px 5px;border-radius:14px}
  .sq-em{font-size:22px}
  .sq-lbl{font-size:9px;letter-spacing:.04em}
  .sq-n{width:21px;height:21px;font-size:11px;top:5px;left:5px}
  .sq-top{gap:8px;flex-wrap:wrap}
  .sq-meter{order:3;flex:1 0 100%}
  .sq-count{font-size:10px}
  .sq-clear{margin-left:auto}
}
/* below this the third column leaves a square too small to label */
@media(max-width:359px){.sq-grid{grid-template-columns:repeat(2,1fr)}}
@media(hover:none){
  .sq:hover{transform:none;border-color:var(--line)}
  .sq.on:hover{border-color:var(--c)}
}

/* submit / export panel */
.codebox{
  width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  line-height:1.5;padding:12px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface-inset);color:var(--text-2);height:96px;resize:none;word-break:break-all;
}
.done-tick{
  width:64px;height:64px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  font-size:28px;background:radial-gradient(circle at 34% 32%,#F4EDDF,#D3A94F 45%,#BC8146 78%,#B0564C);
  color:#170C02;box-shadow:0 0 40px -8px rgba(255,170,68,.8);
}

/* ================= AURA: ONE VISUAL SYSTEM =================
   A Reddit-style vote control. The same component carries the
   interactive +/− on posts and notes and the read-only running
   total on profiles, so aura never looks like two things. */
.vote{
  display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line);flex:none;
}
.on-white .vote{background:#F4F5F9;border-color:var(--card-white-line)}
.vote button{
  width:28px;height:26px;border-radius:99px;display:grid;place-items:center;
  font-size:11px;line-height:1;color:var(--text-3);transition:.14s;
}
.vote button .aura-mark{width:14px;height:14px}
.on-white .vote button{color:#6B7392}
.vote button:hover{background:var(--surface-3);color:var(--text)}
.on-white .vote button:hover{background:#E7EAF3;color:#101019}
.vote .n{
  min-width:34px;text-align:center;font-family:var(--font);font-weight:700;
  font-variant-numeric:tabular-nums;font-size:13px;color:var(--text);letter-spacing:.01em;
}
.on-white .vote .n{color:#101019}
.vote button.up.on{color:var(--aura-text);background:rgba(211,169,79,.14)}
.vote button.down.on{color:var(--burgundy);background:rgba(126,59,78,.16)}
.vote.up .n{color:var(--aura-text)}
.vote.down .n{color:var(--burgundy)}
/* the tap: the mark punches out and settles, the way a heart does */
@keyframes auraPop{
  0%  {transform:scale(1)}
  26% {transform:scale(1.55)}
  46% {transform:scale(.88)}
  68% {transform:scale(1.12)}
  100%{transform:scale(1)}
}
@keyframes auraGlow{
  0%  {filter:drop-shadow(0 0 0 rgba(211,169,79,0))}
  30% {filter:drop-shadow(0 0 9px rgba(211,169,79,.95))}
  100%{filter:drop-shadow(0 0 0 rgba(211,169,79,0))}
}
.vote button.pop .aura-mark{animation:auraPop .58s cubic-bezier(.2,1.3,.35,1),auraGlow .58s ease-out}
.vote .n{transition:color .3s ease}
.vote.col{flex-direction:column;gap:0;padding:3px 2px}
.vote.col .n{min-width:0;font-size:12px;padding:1px 0}

/* read-only aggregate — same language, no buttons */
.aura-badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line);font-family:var(--font);
  font-weight:700;font-variant-numeric:tabular-nums;font-size:13px;color:var(--text);flex:none;
}
.on-white .aura-badge{background:#F4F5F9;border-color:var(--card-white-line);color:#101019}
/* ---- the aura mark itself ----
   Eight points, each split into a lit facet and a shaded one. Both are
   currentColor; the shaded half just runs at lower opacity, which is what
   gives it the struck-metal read at 11px as well as at 40px. */
.aura-mark{
  width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.14em;
  color:inherit;overflow:visible;
}
.aura-mark .lit{opacity:1}
.aura-mark .shade{opacity:.52}
.aura-mark .ring{opacity:.35}
.aura-mark.hollow .ring{opacity:.85}
.aura-ink{color:var(--aura-text);display:inline-flex;align-items:center}

.vote button.up .aura-mark{color:var(--text-3)}
.vote button.up:hover .aura-mark,.vote button.up.on .aura-mark{color:var(--aura-text)}
.vote button.down:hover .aura-mark,.vote button.down.on .aura-mark{color:var(--burgundy)}
.aura-badge .car{color:var(--aura-text);display:inline-flex;align-items:center}
.aura-badge .car .aura-mark{width:12px;height:12px}
.aura-badge.lg .car .aura-mark{width:19px;height:19px}
.aura-badge.lg{font-size:26px;padding:8px 18px;gap:9px}
.aura-badge small{font-family:var(--font);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);font-weight:700}

/* ================= SLACK-STYLE COURSE CHANNELS ================= */
.chan-wrap{display:grid;grid-template-columns:222px minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:860px){.chan-wrap{grid-template-columns:1fr}}
.chan-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:10px;position:sticky;top:150px}
@media(max-width:860px){.chan-list{position:static;display:flex;gap:6px;overflow-x:auto}}
.chan{
  display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border-radius:11px;
  font-size:13.5px;color:var(--text-3);transition:.15s;border:1px solid transparent;text-align:left;
  white-space:nowrap;
}
.chan:hover{background:var(--surface-2);color:var(--text)}
.chan.on{background:var(--surface-3);color:var(--heading);border-color:var(--line-2)}
.chan .hash{font-family:var(--font);font-size:15px;opacity:.6}
.chan .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--font);letter-spacing:.01em}
.chan .cnt{font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--text-3);
  background:var(--surface-inset);padding:1px 7px;border-radius:99px}

.thread{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.thread-head{display:flex;align-items:center;gap:10px;padding-bottom:13px;margin-bottom:14px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.thread-head h3{font-size:17px;text-transform:uppercase;letter-spacing:.02em}

.qbubble{
  border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:11px;
  background:var(--surface-2);transition:.16s;width:100%;text-align:left;display:block;
}
.qbubble:hover{border-color:var(--line-2);transform:translateY(-1px)}
.qbubble .who{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:7px}
.qbubble .who b{font-family:var(--font);font-size:14px;color:var(--text)}
.qbubble .who .time{font-size:11px;color:var(--text-3);margin-left:auto}
.qbubble .txt{font-size:14px;line-height:1.55;color:var(--text-2)}
.qbubble .foot{display:flex;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap}

.accepted{
  border:1px solid rgba(91,214,160,.45);background:color-mix(in srgb,var(--club) 9%,var(--surface-2));
  border-radius:14px;padding:14px 16px;margin-bottom:14px;position:relative;
}
.accepted .pin{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--club);font-weight:700;margin-bottom:9px;
}
.accepted .pin .tick{
  width:15px;height:15px;border-radius:50%;background:var(--club);color:#04140E;
  display:grid;place-items:center;font-size:9px;
}
.reply{display:flex;gap:10px;margin-bottom:12px}
.reply .bub{
  flex:1;min-width:0;border-radius:14px;border-top-left-radius:4px;padding:11px 14px;
  background:var(--surface-2);border:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--text-2);
}
.reply .bub .who{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px}
.reply .bub .who b{font-family:var(--font);font-size:13.5px;color:var(--text)}
.reply.me .bub{background:color-mix(in srgb,var(--s-blue-1) 12%,var(--surface-2));border-color:rgba(112,144,255,.3)}

.compose-row{display:flex;gap:9px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* ================= DISCORD-STYLE COMMUNITY RAIL ================= */
.comm-wrap{display:grid;grid-template-columns:78px minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:720px){.comm-wrap{grid-template-columns:1fr}}
.rail{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:9px;
  position:sticky;top:150px;
}
@media(max-width:720px){.rail{position:static;flex-direction:row;overflow-x:auto;padding:10px;justify-content:flex-start}}
.rail-btn{
  position:relative;width:50px;height:50px;border-radius:17px;flex:none;display:grid;place-items:center;
  font-size:22px;transition:.18s cubic-bezier(.2,.9,.3,1.2);border:1px solid transparent;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.45));
}
.rail-btn:hover{border-radius:15px;transform:translateY(-2px)}
.rail-btn.on{border-radius:15px;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--heading)}
.rail-btn .pip{
  position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:4px;height:0;
  border-radius:0 4px 4px 0;background:var(--heading);transition:height .2s;
}
.rail-btn.on .pip{height:26px}
.rail-btn:hover .pip{height:14px}
@media(max-width:720px){.rail-btn .pip{display:none}}
.rail-sep{width:26px;height:1px;background:var(--line);flex:none}
.rail-btn .joined-dot{
  position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;
  background:var(--club);border:2px solid var(--surface);display:grid;place-items:center;
  font-size:7px;color:#04140E;
}
.comm-hero{
  border-radius:var(--r-lg);padding:22px;margin-bottom:14px;position:relative;overflow:hidden;
  border:1px solid var(--line);
}
.comm-hero .em{font-size:38px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.comm-hero h2{font-size:clamp(22px,3vw,32px);text-transform:uppercase;line-height:1;margin-top:10px}

/* coachmark: progress at a glance, and a way back */
.coach-top{display:flex;align-items:center;gap:10px}
.coach-dots{display:flex;gap:4px;margin-left:auto}
.coach-dots i{width:5px;height:5px;border-radius:50%;background:rgba(160,186,255,.28);transition:.2s}
.coach-dots i.done{background:var(--s-orange-1);opacity:.5}
.coach-dots i.on{background:var(--s-orange-1);width:14px;border-radius:3px}
[data-theme="light"] .coach-dots i{background:rgba(24,32,64,.18)}
.coach .acts{flex-wrap:wrap}

/* ============ TUTORING: wide marketplace listings ============
   Deliberately not a card grid — Notes already owns that shape. */
.listing{
  display:grid;grid-template-columns:132px minmax(0,1fr) 190px;gap:18px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;margin-bottom:12px;transition:.18s;
}
.listing:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--glow-blue)}
@media(max-width:820px){
  .listing{grid-template-columns:64px minmax(0,1fr);gap:14px}
  .listing .buy{grid-column:1 / -1;display:flex;align-items:center;gap:12px;
    border-top:1px solid var(--line);padding-top:12px;text-align:left}
}
.listing .shot{
  aspect-ratio:1;border-radius:var(--r-md);display:grid;place-items:center;position:relative;
  font-family:var(--font);font-weight:700;font-size:38px;color:#0A0A0F;
}
@media(max-width:820px){.listing .shot{font-size:22px;border-radius:50%}}
.listing .shot .rank{
  position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:99px;background:rgba(10,10,15,.6);
  color:#fff;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(6px);
}
.listing .buy{text-align:right}
.listing .buy .price{font-size:28px;line-height:1}
.listing .subj{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0}
.listing .blurb{font-size:13px;line-height:1.55;color:var(--text-2);margin:0}

/* ============ GRADES: a report card, not tiles ============ */
.report{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.report-row{
  display:grid;grid-template-columns:76px minmax(0,1fr) 210px 92px;gap:16px;align-items:center;
  padding:15px 18px;border-bottom:1px solid var(--line);transition:.15s;
}
.report-row:last-child{border-bottom:0}
.report-row:hover{background:var(--surface-2)}
@media(max-width:820px){
  .report-row{grid-template-columns:60px minmax(0,1fr) 70px;gap:12px}
  .report-row .prog{grid-column:1 / -1}
}
.report-row .code{font-family:var(--font);font-size:11px;letter-spacing:.1em;font-weight:700}
.report-row .nm{font-family:var(--font);font-size:15px;color:var(--text);letter-spacing:.01em}
.report-row .note{font-size:12px;color:var(--text-3);margin-top:3px;line-height:1.45}
.report-row .grade{
  font-family:var(--font);font-weight:700;font-size:26px;text-align:right;
  color:var(--heading);font-variant-numeric:tabular-nums;line-height:1;
}
.report-row .delta{font-size:11px;text-align:right;margin-top:3px;font-variant-numeric:tabular-nums}
.report-row .prog{position:relative}
.report-row .prog .scale{display:flex;justify-content:space-between;font-size:10px;
  color:var(--text-3);margin-top:5px;font-variant-numeric:tabular-nums}
.report-row .prog .target{
  position:absolute;top:-3px;bottom:9px;width:2px;background:var(--text-2);opacity:.65;border-radius:2px;
}
.report-row .prog .target::after{
  content:"TARGET";position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  font-family:var(--font);font-size:8px;letter-spacing:.12em;color:var(--text-3);
}
.report-head{
  display:grid;grid-template-columns:76px minmax(0,1fr) 210px 92px;gap:16px;
  padding:12px 18px;background:var(--surface-inset);border-bottom:1px solid var(--line);
}
@media(max-width:820px){.report-head{display:none}}
.report-head span{font-family:var(--font);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);font-weight:700}
.report-head span:last-child{text-align:right}

/* ================= FEED: dark-mode post cards =================
   White cards glared against the dark app. The card now uses the
   app's own surface in dark mode and stays white in light mode. */
.pcard{
  background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 18px 44px -30px rgba(0,0,0,.8);
}
.pcard:hover{border-color:var(--line-2)}
[data-theme="light"] .pcard{background:#fff;border-color:var(--card-white-line)}
.pcard .muted{color:var(--text-3)}
.pcard .post-name b{color:var(--text)}
.pcard .post-meta{color:var(--text-3)}
.pcard .post-body{color:var(--text)}
.pcard .aurabar{border-top-color:var(--line)}
.pcard .abtn{border-color:var(--line);color:var(--text-2);background:transparent}
.pcard .abtn:hover{border-color:var(--line-2);background:var(--surface-2);color:var(--text)}
.pcard .comments{background:var(--surface-2);border-top-color:var(--line)}
.pcard .inp{background:var(--surface-inset);border-color:var(--line);color:var(--text)}
.pcard .poll{border-color:var(--line)}
.pcard .poll h4{color:var(--text)}
.pcard .poll-opt{border-color:var(--line);color:var(--text)}
.pcard .poll-foot{color:var(--text-3)}
.pcard .carousel{background:var(--surface-inset)}
.pcard .chip{background:transparent}
.follow-btn{flex:none}

/* segmented control */
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line);flex-wrap:wrap}
.seg button{
  padding:8px 15px;border-radius:var(--r-pill);font-family:var(--font);
  text-transform:uppercase;letter-spacing:.09em;font-size:11px;font-weight:700;
  color:var(--text-3);transition:.16s;white-space:nowrap;
}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface);color:var(--heading);box-shadow:0 2px 10px -4px rgba(0,0,0,.6)}

/* ================= COMMUNITIES: Reddit-style board ================= */
.board-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.flair{
  display:inline-block;padding:2px 8px;border-radius:99px;border:1px solid currentColor;
  font-family:var(--font);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;margin-right:9px;vertical-align:middle;
}
.trow{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px;margin-bottom:9px;transition:.16s;text-align:left;width:100%;
}
.trow:hover{border-color:var(--line-2);transform:translateY(-1px)}
.trow.open{cursor:default;margin-bottom:16px}
.trow.open:hover{transform:none}
.tvote{display:flex;align-items:flex-start;justify-content:center}
.tmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--text-3);margin-bottom:6px}
.tmeta .sub{font-family:var(--font);font-weight:700;color:var(--text-2);letter-spacing:.02em}
.trow h3{font-size:16px;line-height:1.3;margin-bottom:6px;letter-spacing:-.005em}
.trow p{margin:0;font-size:13px;line-height:1.55;color:var(--text-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.trow.open p{-webkit-line-clamp:unset;color:var(--text-2)}
.tactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tactions .abtn{border:0;padding:4px 8px;background:var(--surface-2);border-radius:8px;
  font-size:11px;color:var(--text-3);font-family:var(--font);letter-spacing:.06em}
.thread-wrap .thread-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.thread-wrap .sub{font-family:var(--font);font-size:16px;font-weight:700;color:var(--text)}
.comment{border-left:2px solid var(--line);padding:11px 0 11px 14px;margin-left:6px;margin-bottom:6px}
.comment.best{border-left-color:var(--club);background:color-mix(in srgb,var(--club) 6%,transparent);
  border-radius:0 12px 12px 0;padding-right:12px}
.best-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--club);font-weight:700;margin-bottom:8px}
.best-tag .tick{width:14px;height:14px;border-radius:50%;background:var(--club);color:#04140E;
  display:grid;place-items:center;font-size:8px}
.mb-s{margin-bottom:6px}
.rail-btn.add{background:var(--surface-2)!important;color:var(--text-3)!important;
  border:1px dashed var(--line-2);font-size:22px;font-weight:300}
.rail-btn.add:hover{color:var(--text)!important;border-color:var(--s-blue-1)}

/* ================= EVENTS: the pinboard ================= */
.wb{
  position:relative;min-height:660px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface-inset);overflow:hidden;
}
.wb-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle,var(--line) 1px,transparent 1px);
  background-size:22px 22px;
}
.sticky{
  position:absolute;width:190px;padding:13px;border-radius:12px;cursor:grab;
  background:color-mix(in srgb,var(--c) 13%,var(--surface));
  border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.75);
  transform:rotate(var(--rot));transition:box-shadow .18s,transform .18s;
  touch-action:none;user-select:none;
}
.sticky:hover{transform:rotate(0deg) translateY(-3px);box-shadow:0 18px 34px -14px rgba(0,0,0,.85);z-index:3}
.sticky.dragging{cursor:grabbing;transform:rotate(0deg) scale(1.04);z-index:9;
  box-shadow:0 26px 50px -16px rgba(0,0,0,.9);transition:none}
.sticky.pinned{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 14px 30px -14px rgba(0,0,0,.8)}
.sticky .pin{position:absolute;top:-9px;right:-6px;font-size:15px;opacity:.35;transition:.15s;cursor:pointer}
.sticky:hover .pin{opacity:.85}
.sticky.pinned .pin{opacity:1;filter:drop-shadow(0 0 5px var(--c))}
.sticky .s-kind{font-family:var(--font);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c);font-weight:700}
.sticky h4{font-size:14px;line-height:1.25;margin:6px 0 8px;letter-spacing:-.005em}
.sticky .s-when{font-family:var(--font);font-size:11.5px;color:var(--text);font-variant-numeric:tabular-nums}
.sticky .s-where{font-size:11px;color:var(--text-3);margin-top:2px}
.sticky .s-foot{display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--line)}
.evlist{text-align:left;transition:.16s}
.evlist:hover{transform:translateY(-2px);border-color:var(--line-2)}
.ev-drawer{
  position:sticky;bottom:16px;margin-top:16px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:18px;
  box-shadow:var(--shadow-lg);animation:pop .24s cubic-bezier(.2,.9,.3,1.2);
}

/* ================= DASHBOARD: widget picker ================= */
.w-from{font-family:var(--font);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);opacity:.7;white-space:nowrap}
.w-tools button[data-remove-w]:hover{color:var(--s-red-1)}
.add-w{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:1.5px dashed var(--line-2);background:transparent;min-height:160px;text-align:center;
  transition:.18s;padding:20px;
}
.add-w:hover{border-color:var(--s-blue-1);background:var(--surface-2)}
.add-w .plus{font-size:26px;color:var(--text-3);line-height:1}
.add-w:hover .plus{color:var(--s-blue-1)}
.wpick{display:flex;flex-direction:column;gap:8px;max-height:56vh;overflow-y:auto}
.wpick-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);transition:.15s;text-align:left;width:100%;
}
.wpick-item:hover{border-color:var(--s-blue-1);transform:translateX(2px)}
.wpick-item .em{font-size:18px;flex:none}
.wpick-item b{font-family:var(--font);font-size:14px}
.wpick-item .plus{font-size:19px;color:var(--text-3);flex:none}
.wpick-item:hover .plus{color:var(--s-blue-1)}

/* ================= LANDING v2 ================= */
#constellation{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
}
.landing{position:relative;z-index:2}

.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) 380px;gap:44px;align-items:center;
}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:32px}}

.hero h1{
  font-family:var(--font);text-transform:uppercase;font-weight:700;
  font-size:clamp(42px,8.2vw,104px);line-height:.88;letter-spacing:-.03em;
  color:#FFFFFF;margin:0;max-width:13ch;
}
.hero-sub{margin:26px 0 0;max-width:52ch;font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:var(--text-2)}

/* the hero is one composition on a single centre line: kicker, headline,
   sub, buttons, stats, then the verified card directly beneath them */
.hero-stack{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:34px;
  width:100%;
}
.hero-lead{max-width:min(940px,100%);display:flex;flex-direction:column;align-items:center}
.hero-stack .hero-sub{margin:26px auto 0;text-align:center}
.hero-stack .hero-cta{justify-content:center}
.hero-stack .hero-strip{justify-content:center}
.hero-stack .hero h1,.hero-stack h1{margin-left:auto;margin-right:auto}
.hero-stack .signin{width:min(430px,100%);text-align:left}

/* the demo note. Dashed, muted, labelled — everything about it says
   "this is a note about the walkthrough", not a control in it. */
.demo-note{
  position:relative;width:min(560px,100%);display:flex;gap:12px;align-items:flex-start;
  padding:14px 40px 14px 16px;border-radius:var(--r-md);text-align:left;
  border:1px dashed var(--line-2);background:color-mix(in srgb,var(--surface-inset) 78%,transparent);
  transition:opacity .2s ease,transform .2s ease;
}
.demo-note.gone{opacity:0;transform:translateY(-4px)}
.demo-note p{margin:0;font-size:12.5px;line-height:1.6;color:var(--text-3)}
.demo-note p b{color:var(--text-2)}
.dn-tag{
  flex:none;font-family:var(--font);text-transform:uppercase;letter-spacing:.14em;
  font-size:9px;font-weight:700;color:var(--text-3);padding:4px 8px;border-radius:5px;
  border:1px solid var(--line);background:var(--surface-2);margin-top:1px;white-space:nowrap;
}
.dn-x{
  position:absolute;top:9px;right:9px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;color:var(--text-3);
}
.dn-x:hover{background:var(--surface-3);color:var(--text)}
@media(max-width:560px){
  .demo-note{flex-direction:column;gap:8px}
}

/* verified sign-in card */
.signin{
  border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line-2);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:var(--shadow-lg),0 0 70px -34px rgba(112,144,255,.7);
}
.signin-top{
  padding:14px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(100deg,rgba(91,214,160,.14),transparent 70%);
}
.badge-verified{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font);
  text-transform:uppercase;letter-spacing:.14em;font-size:10px;font-weight:700;color:var(--club);
}
.signin-body{padding:18px;display:flex;flex-direction:column;gap:14px}
.verify-list{display:flex;flex-direction:column;gap:8px;padding:13px 14px;border-radius:var(--r-md);
  background:var(--surface-inset);border:1px solid var(--line)}
.verify-list div{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-2)}
.verify-list .tick{
  width:16px;height:16px;border-radius:50%;background:var(--club);color:#04140E;flex:none;
  display:grid;place-items:center;font-size:9px;font-weight:700;
}

/* ================= THE FEEDBACK LOOP — scroll-lit star =================
   The four steps sit on the tips of one glowing five-point star. The panel
   is pinned while the page scrolls past it, and each arm draws itself in
   turn, so by step 04 the whole star is alight. Everything is driven from
   the --off / --ls-heat values and two state classes set in
   loopStarScroll() — nothing animates on its own, which is what keeps this
   calm instead of busy. */
.loopstar{
  position:relative;margin:56px auto 0;
  width:min(calc(100% - 24px),var(--maxw));
  height:450vh;height:450svh;
}
.loopstar-sticky{
  position:sticky;top:14px;
  height:calc(100vh - 28px);height:calc(100svh - 28px);
  border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  background:radial-gradient(140% 118% at 50% 108%,#111327 0%,#08090F 58%,#050609 100%);
  border:1px solid rgba(211,169,79,.15);
  box-shadow:0 46px 130px -62px rgba(0,0,0,.95),
             inset 0 1px 0 rgba(255,255,255,.05);
}
/* the ground warms up as more of the star lights, on its own layer so the
   change can actually be transitioned rather than snapping per step */
.ls-aura{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 44% at 50% 46%,rgba(211,169,79,.22),transparent 72%);
  opacity:calc(.18 + var(--ls-heat,0) * .82);
  transition:opacity .8s ease;
}
.loopstar-stage{
  --fs:min(60vh,40vw,580px);
  position:relative;height:100%;
  display:flex;align-items:center;justify-content:center;
}

/* ---- the star itself ---- */
.ls-frame{position:relative;width:var(--fs);height:var(--fs);flex:none}
.ls-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ls-base{
  fill:none;stroke:rgba(226,196,132,.17);stroke-width:1.15;
  stroke-linejoin:round;stroke-linecap:round;
}
.ls-arm{--len:0;--off:0;opacity:0;transition:opacity .5s ease}
.ls-arm.lit{opacity:1}
.ls-arm path{
  fill:none;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--off);
}
.ls-halo{stroke:rgba(227,201,126,.6);stroke-width:3.4;filter:url(#lsBloom)}
.ls-core{stroke:#FFE9AE;stroke-width:1.5}

/* ---- node markers on four of the five tips ---- */
.ls-node{
  position:absolute;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border-radius:50%;background:#0B0C14;
  border:1px solid rgba(227,201,126,.32);
  transition:border-color .5s ease,box-shadow .5s ease,transform .55s cubic-bezier(.22,1,.36,1);
}
.ls-node i{
  position:absolute;inset:3px;border-radius:50%;background:rgba(227,201,126,.2);
  transition:background .5s ease,box-shadow .5s ease;
}
.ls-node.is-done{border-color:rgba(240,214,146,.72);box-shadow:0 0 18px -1px rgba(211,169,79,.55)}
.ls-node.is-done i{background:#EBD196;box-shadow:0 0 8px rgba(227,201,126,.55)}
.ls-node.is-on{
  transform:scale(1.42);border-color:rgba(255,233,174,.9);
  box-shadow:0 0 0 5px rgba(211,169,79,.12),0 0 34px 2px rgba(227,201,126,.55);
}
.ls-node.is-on i{background:#FFF3D2;box-shadow:0 0 12px 1px rgba(255,233,174,.9)}

/* ---- the four text blocks ----
   .ls-cards mirrors the star's box exactly, so a card can be pinned to the
   same percentage as its own tip and still sit clear of the artwork. */
.ls-cards{
  position:absolute;left:50%;top:50%;
  width:var(--fs);height:var(--fs);translate:-50% -50%;
  list-style:none;margin:0;padding:0;pointer-events:none;
}
.ls-card{
  position:absolute;width:min(30ch,23vw);
  opacity:.2;transform:translateY(14px);filter:saturate(.5);
  transition:opacity .55s ease,transform .65s cubic-bezier(.22,1,.36,1),filter .55s ease;
}
.ls-card.is-done{opacity:.44;transform:none;filter:none}
.ls-card.is-on{opacity:1;transform:none;filter:none;transition-delay:.09s}
.ls-card .ls-num{
  display:block;font-family:var(--font);font-stretch:87.5%;
  font-size:11px;letter-spacing:.24em;font-weight:700;
  color:rgba(227,201,126,.55);transition:color .5s ease,text-shadow .5s ease;
}
.ls-card.is-done .ls-num{color:rgba(240,214,146,.82)}
.ls-card.is-on .ls-num{color:#FFE9AE;text-shadow:0 0 18px rgba(211,169,79,.7)}
.loopstar .ls-card h3{
  margin:8px 0 9px;font-size:clamp(17px,1.5vw,22px);
  text-transform:uppercase;letter-spacing:-.015em;line-height:1.05;
  color:#F1ECE0;transition:color .5s ease,text-shadow .5s ease;
}
.loopstar .ls-card.is-on h3{color:#FFFFFF;text-shadow:0 0 30px rgba(211,169,79,.4)}
.loopstar .ls-card p{margin:0;font-size:13.5px;line-height:1.62;color:#98A0B6;transition:color .5s ease}
.loopstar .ls-card.is-on p{color:#C6CADA}

/* tips are at 26.49/15.64, 11.96/60.36, 88.04/60.36 and 73.51/15.64 —
   each card hangs just outside its own tip so the arms stay uncovered */
.ls-card[data-card="0"]{right:calc(73.51% + 3.4%);top:15.64%;translate:0 -50%;text-align:right}
.ls-card[data-card="1"]{right:calc(88.04% + 3.4%);top:60.36%;translate:0 -50%;text-align:right}
.ls-card[data-card="2"]{left:calc(88.04% + 3.4%);top:60.36%;translate:0 -50%}
.ls-card[data-card="3"]{left:calc(73.51% + 3.4%);top:15.64%;translate:0 -50%}

@media(max-width:1180px){
  .loopstar-stage{--fs:min(54vh,34vw,470px)}
  .ls-card{width:min(27ch,25vw)}
}

/* ---- narrow screens: star on top, only the live block beneath it ---- */
@media(max-width:900px){
  .loopstar{height:440vh;height:440svh}
  .loopstar-stage{
    --fs:min(70vw,290px);--ls-pad:clamp(96px,19vh,180px);--ls-gap:clamp(24px,4.5vh,46px);
    align-items:flex-start;padding-top:var(--ls-pad);
  }
  .ls-node{width:12px;height:12px;margin:-6px 0 0 -6px}
  .ls-node i{inset:2.5px}
  .ls-cards{
    position:absolute;left:0;right:0;bottom:auto;
    top:calc(var(--ls-pad) + var(--fs) + var(--ls-gap));
    width:auto;height:auto;translate:none;padding:0 18px;
  }
  .ls-card,
  .ls-card[data-card="0"],.ls-card[data-card="1"],
  .ls-card[data-card="2"],.ls-card[data-card="3"]{
    left:50%;right:auto;top:0;bottom:auto;translate:-50% 0;
    width:min(90%,430px);text-align:center;
  }
  /* they stack in one place down here, so anything not live steps aside */
  .ls-card,.ls-card.is-done{opacity:0;transform:translateY(16px)}
  .ls-card.is-on{opacity:1;transform:none}
  .loopstar .ls-card p{font-size:13px}
}
/* a phone held sideways has almost no height to give: shrink the star
   and tighten the gap so the live block still lands on screen */
@media(max-width:900px) and (max-height:560px){
  .loopstar-stage{--fs:min(34vh,170px);--ls-pad:62px;--ls-gap:16px}
  .loopstar .ls-card h3{font-size:17px;margin:6px 0 7px}
}

/* ---- reduced motion: nothing pins, nothing draws, everything is lit ---- */
@media(prefers-reduced-motion:reduce){
  .loopstar{height:auto}
  .loopstar-sticky{position:static;height:auto;padding:clamp(40px,6vw,68px) clamp(18px,4vw,44px)}
  .ls-aura{opacity:1}
  .loopstar-stage{display:block;height:auto;padding:0;--fs:min(62vw,320px)}
  .ls-frame{margin:0 auto}
  .ls-node{display:none}
  .ls-arm{opacity:1}
  .ls-arm path{stroke-dasharray:none;stroke-dashoffset:0}
  .ls-cards,
  .ls-card,.ls-card[data-card="0"],.ls-card[data-card="1"],
  .ls-card[data-card="2"],.ls-card[data-card="3"]{
    position:static;translate:none;transform:none;transition:none;
    width:auto;height:auto;opacity:1;filter:none;text-align:left;
  }
  .ls-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 36px;margin-top:46px;padding:0}
  .ls-card .ls-num{color:#FFE9AE}
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){
  .ls-cards{grid-template-columns:1fr}
}

.why{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
@media(max-width:860px){.why{grid-template-columns:1fr}}
.why-card{
  border-radius:var(--r-lg);padding:20px;border:1px solid rgba(24,32,64,.12);
  background:rgba(255,255,255,.6);color:#171B2B;
}
.shift.light-off .why-card{background:var(--surface);border-color:var(--line);color:var(--text)}
.why-card h4{font-size:14px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:9px;color:inherit}
.why-card p{margin:0;font-size:13px;line-height:1.6;opacity:.78}

/* ================= 3D CURSOR HALO ================= */
#cursor3d{
  position:fixed;left:0;top:0;width:58px;height:58px;margin:-29px 0 0 -29px;
  z-index:120;pointer-events:none;opacity:0;transition:opacity .3s ease;
  will-change:transform;
}
#cursor3d.on{opacity:1}
#cursor3d .ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(255,229,122,.5);
  transform-style:preserve-3d;
}
#cursor3d .ring.r2{inset:9px;border-color:rgba(255,170,68,.42)}
#cursor3d .ring.r3{inset:18px;border-color:rgba(255,119,51,.34)}
#cursor3d .core{
  position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  border-radius:50%;background:#F4EDDF;box-shadow:0 0 10px 2px rgba(255,217,102,.75);
}
[data-theme="light"] #cursor3d .ring{border-color:rgba(217,138,0,.42)}
[data-theme="light"] #cursor3d .ring.r2{border-color:rgba(196,58,16,.3)}
[data-theme="light"] #cursor3d .ring.r3{border-color:rgba(196,58,16,.22)}
[data-theme="light"] #cursor3d .core{background:#A87C22;box-shadow:0 0 9px 2px rgba(217,138,0,.5)}
@media(hover:none),(pointer:coarse){#cursor3d{display:none}}
@media(prefers-reduced-motion:reduce){#cursor3d{display:none}}

/* ================= AURA BURST ================= */
.burst{position:fixed;z-index:400;pointer-events:none;width:0;height:0}
.burst-mark{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  font-size:22px;line-height:0;color:var(--aura-text);
  filter:drop-shadow(0 0 10px rgba(211,169,79,.7));
  animation:burstPop .62s cubic-bezier(.2,1.4,.35,1) forwards;
}
.burst-mark .aura-mark{width:22px;height:22px}
.burst.down .burst-mark{color:var(--burgundy);filter:none}
@keyframes burstPop{
  0%{transform:translate(-50%,-50%) scale(.2) rotateX(60deg);opacity:0}
  35%{transform:translate(-50%,-50%) scale(1.45) rotateX(0deg);opacity:1}
  70%{transform:translate(-50%,-70%) scale(1.05) rotateX(0deg);opacity:.9}
  100%{transform:translate(-50%,-140%) scale(.75) rotateX(-40deg);opacity:0}
}
.burst i{
  position:absolute;left:0;top:0;width:4px;height:4px;border-radius:50%;
  background:var(--aura-text);box-shadow:0 0 6px rgba(211,169,79,.8);
  animation:shard .58s cubic-bezier(.2,.9,.3,1) forwards;
  animation-delay:var(--dl,0ms);opacity:0;
}
.burst.down i{background:var(--burgundy);box-shadow:none}
@keyframes shard{
  0%{transform:translate(-50%,-50%) scale(.4);opacity:0}
  22%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.15);opacity:0}
}

/* ================= ENTRY GATE ================= */
.gate{display:flex;flex-direction:column;gap:16px}

/* ================= DISCORD-STYLE SERVERS ================= */
.server-wrap{
  display:grid;grid-template-columns:78px 224px minmax(0,1fr);gap:14px;align-items:start;
}
@media(max-width:980px){
  .server-wrap{grid-template-columns:64px minmax(0,1fr)}
  .server-wrap .chanlist{grid-column:1 / -1;position:static}
  .server-wrap .chanlist .chan-list-inner{display:flex;gap:6px;overflow-x:auto}
}
@media(max-width:620px){.server-wrap{grid-template-columns:1fr}
  .server-wrap .rail{flex-direction:row;overflow-x:auto;position:static}}
.chanlist{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;position:sticky;top:150px;
}
.chan-head{padding:14px 14px 13px;color:#fff}
.chan-head b{color:#fff}
.chanlist .chan{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 12px;
  font-size:13.5px;color:var(--text-3);transition:.15s;border:0;text-align:left;
}
.chanlist .chan:hover{background:var(--surface-2);color:var(--text)}
.chanlist .chan.on{background:var(--surface-3);color:var(--heading)}
.chanlist .chan .hash{font-family:var(--font);font-size:15px;opacity:.55}
.chanlist .chan .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--font);letter-spacing:.01em}
.chanlist .chan .cnt{font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--text-3);
  background:var(--surface-inset);padding:1px 7px;border-radius:99px}
.chan-title{font-family:var(--font);font-size:19px;font-weight:700;color:var(--heading);
  letter-spacing:.01em;margin-right:4px}
.rail-btn{overflow:hidden}
.rail-btn.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--line-2)}

/* ================= EVENT DISCOVER DECK ================= */
.deck-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.deck-stage{
  position:relative;width:min(400px,100%);height:520px;
  display:flex;align-items:center;justify-content:center;
}
.deck-card{
  position:absolute;inset:0;border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);border:1px solid var(--line-2);
  box-shadow:0 24px 60px -26px rgba(0,0,0,.9);
  transform:translateY(calc(var(--depth) * 10px)) scale(calc(1 - var(--depth) * 0.04));
  transition:transform .28s cubic-bezier(.2,.9,.3,1),opacity .28s;
  touch-action:none;user-select:none;cursor:grab;
}
.deck-card.grabbing{transition:none;cursor:grabbing}
.deck-card.fly-yes{transform:translate(460px,-40px) rotate(22deg)!important;opacity:0}
.deck-card.fly-no{transform:translate(-460px,-40px) rotate(-22deg)!important;opacity:0}
.deck-cover{
  height:150px;display:flex;align-items:flex-start;justify-content:space-between;
  padding:16px;border-bottom:1px solid var(--line);
}
.deck-kind{font-family:var(--font);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700}
.deck-day{font-family:var(--font);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2)}
.deck-body{padding:18px}
.deck-body h3{font-size:21px;text-transform:uppercase;line-height:1.05;letter-spacing:-.02em}
.deck-body p{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.deck-stamp{
  position:absolute;top:26px;padding:6px 14px;border-radius:10px;
  font-family:var(--font);font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;border:2px solid currentColor;opacity:0;transition:opacity .15s;
}
.deck-stamp.yes{left:20px;color:var(--club);transform:rotate(-14deg)}
.deck-stamp.no{right:20px;color:var(--s-red-1);transform:rotate(14deg)}
.deck-card.say-yes .deck-stamp.yes{opacity:1}
.deck-card.say-no .deck-stamp.no{opacity:1}
.deck-empty{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:30px;border-radius:var(--r-xl);
  border:1.5px dashed var(--line-2);background:var(--surface);
}
.deck-empty p{max-width:30ch}
.deck-actions{display:flex;align-items:center;gap:22px}
.deck-btn{
  width:58px;height:58px;border-radius:50%;font-size:22px;flex:none;
  border:1px solid var(--line-2);background:var(--surface);transition:.18s;
}
.deck-btn.yes{color:var(--club)}
.deck-btn.no{color:var(--s-red-1)}
.deck-btn:hover{transform:translateY(-3px) scale(1.06);border-color:currentColor}
.deck-hint{text-align:center;max-width:230px}

/* ================= DASHBOARD RESIZE ================= */
.w{display:flex;flex-direction:column;position:relative}
.w-body{flex:1;min-height:0}
.w.h2{grid-row:span 2}
.w.h0 .w-body{max-height:112px;overflow:hidden;mask-image:linear-gradient(180deg,#000 68%,transparent)}
.w.resizing{outline:1px dashed var(--s-blue-1);outline-offset:3px;transition:none}
.w-grip{
  position:absolute;right:3px;bottom:3px;width:16px;height:16px;cursor:ew-resize;
  opacity:0;transition:opacity .18s;border-radius:0 0 var(--r-lg) 0;
  background:linear-gradient(135deg,transparent 48%,var(--line-2) 50%,transparent 52%,
    transparent 60%,var(--line-2) 62%,transparent 64%);
}
.w:hover .w-grip{opacity:1}
.w-tools button[data-wide],.w-tools button[data-tall]{font-size:11px}

/* ================= PROFILE: socials + records ================= */
.social{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface-2);margin-bottom:7px;transition:.16s;
}
.social:hover{border-color:var(--c);transform:translateX(2px)}
.social-ic{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c);
  font-family:var(--font);font-size:13px;font-weight:700;
}
.social b{display:block;font-family:var(--font);font-size:13.5px;color:var(--text)}
.social .small{display:block}
.social-go{color:var(--text-3);font-size:13px}
.social:hover .social-go{color:var(--c)}

.repo-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.repo-row:last-child{border-bottom:0}
.repo-row b{font-family:var(--font);font-size:13.5px;color:var(--text);display:block}
.repo-dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;margin-right:6px}
.repo{padding:14px 0;border-bottom:1px solid var(--line)}
.repo:last-child{border-bottom:0}
.repo-name{font-family:var(--font);font-size:15px;font-weight:700;color:var(--s-blue-2)}
.repo-about{margin:7px 0 9px;font-size:12.5px;line-height:1.55;color:var(--text-3)}
.repo-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--text-3);
  font-variant-numeric:tabular-nums}
.repo-meta span{display:flex;align-items:center}

/* ================= SIX-STAR CONSTELLATION =================
   The feature list, drawn as the thing the headline promises. Lines are
   one SVG stretched to the box (non-scaling strokes keep them hairline at
   any width); the stars are anchors laid over it in percentages, so the
   shape survives every viewport without a second set of coordinates. */
.consto-sec{
  width:min(calc(100% - 24px),var(--maxw));margin:0 auto;padding:40px 0 90px;
}
.consto-head{max-width:56ch;margin:0 auto 10px;text-align:center}
.consto-head h2{
  font-family:var(--font);text-transform:uppercase;font-weight:700;
  font-size:clamp(30px,5vw,58px);line-height:.94;letter-spacing:-.025em;margin:14px 0 18px;
}
.consto-head .lead-copy{margin:0 auto;max-width:50ch}

.consto{
  position:relative;margin:34px auto 0;width:100%;max-width:1000px;
  aspect-ratio:16 / 8.2;min-height:330px;
}
@media(max-width:760px){.consto{aspect-ratio:1 / 1.35;max-width:440px}}

.consto-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.consto-lines line{
  stroke:var(--line-2);stroke-width:1;
  stroke-dasharray:3 5;opacity:.75;
}
[data-theme="light"] .consto-lines line{stroke:rgba(30,38,78,.22)}

.consto-star{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:6px;border-radius:14px;color:var(--text-2);
  animation:consoBreathe 5.2s ease-in-out var(--d,0s) infinite;
}
@keyframes consoBreathe{0%,100%{opacity:.88}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.consto-star{animation:none}}

.consto-star .mk{
  display:grid;place-items:center;width:44px;height:44px;color:var(--aura-text);
  filter:drop-shadow(0 0 8px rgba(211,169,79,.38));
  transition:transform .28s cubic-bezier(.2,1.2,.35,1),filter .28s ease;
}
.consto-star .mk .aura-mark{width:34px;height:34px}
.consto-star .nm{
  font-family:var(--font);text-transform:uppercase;letter-spacing:.13em;
  font-size:10.5px;font-weight:700;white-space:nowrap;transition:color .2s;
}
.consto-star:hover .mk,.consto-star:focus-visible .mk,.consto-star.shown .mk{
  transform:scale(1.28);
  filter:drop-shadow(0 0 16px rgba(211,169,79,.85)) drop-shadow(0 0 34px rgba(184,135,58,.4));
}
.consto-star:hover .nm,.consto-star:focus-visible .nm,.consto-star.shown .nm{color:var(--heading)}
.consto-star:focus-visible{outline:1px solid var(--line-hot);outline-offset:4px}

.consto-star .card{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,6px);
  width:262px;padding:14px 15px;border-radius:var(--r-md);z-index:5;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  border:1px solid var(--line-2);box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
  text-align:left;
}
.consto-star:hover .card,.consto-star:focus-visible .card,.consto-star.shown .card{
  opacity:1;transform:translate(-50%,0);
}
.consto-star .card b{
  display:block;font-family:var(--font);text-transform:uppercase;letter-spacing:.02em;
  font-size:14px;color:var(--heading);margin-bottom:6px;
}
.consto-star .card > span{display:block;font-size:12.5px;line-height:1.55;color:var(--text-2)}
.consto-star .card em{
  display:block;margin-top:10px;font-style:normal;font-family:var(--font);
  text-transform:uppercase;letter-spacing:.14em;font-size:9.5px;color:var(--aura-text);
}
/* the low stars open their card upward so it never leaves the box */
.consto-star[data-star="notes"] .card,.consto-star[data-star="rooms"] .card{
  top:auto;bottom:calc(100% + 12px);transform:translate(-50%,-6px);
}
.consto-star[data-star="notes"]:hover .card,.consto-star[data-star="notes"].shown .card,
.consto-star[data-star="rooms"]:hover .card,.consto-star[data-star="rooms"].shown .card{
  transform:translate(-50%,0);
}
@media(max-width:520px){.consto-star .card{width:210px}}

/* ================= YOUR VOICE, OUR VISION ================= */
.voice{
  width:min(calc(100% - 24px),var(--maxw));margin:0 auto;padding:30px 0 60px;
}
.voice-inner{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(44px,7vw,86px) clamp(22px,5vw,64px);border-radius:var(--r-xl);
  border:1px solid var(--line-2);
  background:
    radial-gradient(120% 130% at 50% -20%,rgba(75,92,196,.20),transparent 62%),
    color-mix(in srgb,var(--surface) 88%,transparent);
  box-shadow:var(--shadow-lg);
}
.voice-inner::after{
  content:"";position:absolute;left:50%;bottom:-58%;width:150%;height:100%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(211,169,79,.13),transparent 70%);
}
.voice-title{
  font-family:var(--font);text-transform:uppercase;font-weight:700;
  font-size:clamp(34px,6.6vw,80px);line-height:.92;letter-spacing:-.03em;
  margin:0 0 24px;color:var(--heading);
}
.voice-copy{margin:0 auto 34px;max-width:56ch}
.voice-copy b{color:var(--aura-text)}

/* ================= NOTIFICATION BELL + PANEL ================= */
.iconbtn.bell{position:relative}
.bell-ic{width:19px;height:19px}
.bell-dot{
  position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;display:grid;place-items:center;
  font-family:var(--font);font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;
  background:linear-gradient(140deg,#E3C97E,#B8873A);color:#191106;
  border:1.5px solid var(--surface);box-shadow:0 0 12px -2px rgba(184,135,58,.9);
}
.notif{
  position:fixed;top:70px;right:16px;z-index:200;width:min(376px,calc(100% - 32px));
  border-radius:var(--r-lg);overflow:hidden;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid var(--line-2);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease;
}
.notif.on{opacity:1;transform:translateY(0)}
.notif-head{
  display:flex;align-items:center;gap:10px;padding:13px 12px 13px 16px;
  border-bottom:1px solid var(--line);
}
.notif-head b{font-family:var(--font);font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--heading)}
.notif-head .mono-label{margin-left:auto}
.notif-head .x{width:30px;height:30px;font-size:12px}
.notif-list{max-height:min(420px,60vh);overflow-y:auto}
.notif-row{
  display:flex;align-items:flex-start;gap:11px;width:100%;padding:12px 14px;
  text-align:left;border-bottom:1px solid var(--line);transition:.15s;
}
.notif-row:last-child{border-bottom:0}
.notif-row:hover{background:var(--surface-2)}
.notif-ic{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:13px;background:var(--surface-inset);border:1px solid var(--line);color:var(--text-2);
}
.notif-ic.aura{color:var(--aura-text);border-color:var(--line-hot)}
.notif-body{flex:1;min-width:0}
.notif-body b{
  display:block;font-family:var(--font);font-size:13px;font-weight:700;color:var(--text);
  line-height:1.35;letter-spacing:.005em;
}
.notif-body span{
  display:block;margin-top:3px;font-size:11.5px;line-height:1.45;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.notif-when{
  flex:none;font-size:10.5px;color:var(--text-3);font-variant-numeric:tabular-nums;padding-top:2px;
}
.notif-foot{padding:10px 14px;font-size:11px;color:var(--text-3);border-top:1px solid var(--line);
  background:var(--surface-inset)}

/* ================= THANK YOU ================= */
.ty{position:relative;text-align:center;padding:14px 6px 4px}
.ty-x{position:absolute;top:-6px;right:-4px}
.ty-mark{
  width:58px;height:58px;margin:0 auto 26px;color:var(--aura-text);
  display:grid;place-items:center;
  filter:drop-shadow(0 0 16px rgba(211,169,79,.6));
  animation:tyIn .8s cubic-bezier(.2,1.1,.35,1) both;
}
.ty-mark .aura-mark{width:58px;height:58px}
@keyframes tyIn{0%{opacity:0;transform:scale(.4) rotate(-35deg)}100%{opacity:1;transform:none}}
.ty-h{
  font-family:var(--font);text-transform:uppercase;font-weight:700;
  font-size:clamp(23px,3.4vw,36px);line-height:1.04;letter-spacing:-.025em;
  color:var(--heading);margin:0 0 16px;
}
.ty-tag{
  font-family:var(--font);text-transform:uppercase;letter-spacing:.3em;
  font-size:11px;font-weight:700;color:var(--aura-text);margin-bottom:34px;
}
.ty-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:430px;margin:0 auto 30px;
}
.ty-stats > div{
  padding:18px 12px;border-radius:var(--r-lg);
  background:var(--surface-inset);border:1px solid var(--line);
}
.ty-stats b{display:block;font-size:38px;line-height:1;color:var(--heading)}
.ty-stats b small{font-size:15px;color:var(--text-3);margin-left:4px;font-weight:700}
.ty-stats span{
  display:block;margin-top:9px;font-family:var(--font);text-transform:uppercase;
  letter-spacing:.13em;font-size:9.5px;color:var(--text-3);
}
.ty-close{margin:0;font-size:15px;color:var(--text-2)}
.ty-who{margin-top:18px;font-size:11px;color:var(--text-3);font-family:var(--font);letter-spacing:.06em}
.ty-send{margin-top:22px;text-align:left}
.ty-backup{margin-top:18px;text-align:left;border-top:1px solid var(--line);padding-top:14px}
.ty-backup summary{
  cursor:pointer;font-family:var(--font);text-transform:uppercase;letter-spacing:.12em;
  font-size:10px;color:var(--text-3);list-style:none;
}
.ty-backup summary::-webkit-details-marker{display:none}
.ty-backup summary:hover{color:var(--text-2)}
.ty-backup p{margin:10px 0 12px}
@media(max-width:440px){.ty-stats{grid-template-columns:1fr}}

/* the coachmark replay button belongs to the app screens only */
body.on-landing .fabs{display:none}

/* ================= IMAGE PICKER =================
   Shared by the profile photo and the event poster. The preview is the
   whole point of the control, so it gets the space; the error line sits
   under both and only appears when there is something to say. */
.picker{
  display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center;
  padding:14px;border-radius:var(--r-md);border:1px dashed var(--line-2);
  background:var(--surface-inset);
}
.picker.bad{border-color:var(--burgundy);border-style:solid}
.picker-preview{
  width:120px;height:120px;border-radius:var(--r-md);overflow:hidden;
  display:grid;place-items:center;text-align:center;padding:10px;
  background:var(--surface-2);border:1px solid var(--line);
}
.picker.round .picker-preview{border-radius:50%}
.picker-preview img{width:100%;height:100%;object-fit:cover}
.picker-empty{font-size:11px;line-height:1.45;color:var(--text-3)}
.picker-side{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.picker-hint{font-size:11px;color:var(--text-3)}
.picker-err{grid-column:1 / -1;font-size:12px;line-height:1.5;color:var(--burgundy)}
.picker-err:empty{display:none}
[data-theme="dark"] .picker-err{color:#D98A8A}
@media(max-width:520px){
  .picker{grid-template-columns:1fr;justify-items:center;text-align:center}
  .picker-side{align-items:center}
}

/* profile photo, and the button that changes it */
.av.has-photo{background-size:cover;background-position:center;color:transparent}
.pf-photo{position:relative;flex:none}
.pf-photo-btn{
  position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  padding:4px 11px;border-radius:var(--r-pill);white-space:nowrap;
  font-family:var(--font);text-transform:uppercase;letter-spacing:.1em;
  font-size:9px;font-weight:700;color:var(--text-2);
  background:var(--surface-3);border:1px solid var(--line-2);transition:.16s;
}
.pf-photo-btn:hover{color:var(--heading);border-color:var(--line-hot)}

/* ================= EVENT POSTER + CROSS-POST ================= */
.deck-cover.has-poster{background-size:cover;background-position:center;position:relative}
.deck-cover.has-poster::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,15,.45),rgba(8,9,15,.05) 55%,rgba(8,9,15,.5));
}
.deck-cover.has-poster > *{position:relative;z-index:1}
.deck-cover.has-poster .deck-day{color:#fff}
.sticky-poster{
  display:block;height:56px;margin:8px -2px 0;border-radius:8px;
  background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.14);
}
.ev-poster{border-radius:var(--r-md);overflow:hidden;margin-bottom:14px;border:1px solid var(--line)}
.ev-poster img{width:100%;max-height:230px;object-fit:cover}
.post-poster{border-radius:var(--r-md);overflow:hidden;margin-top:12px;border:1px solid var(--line)}
.post-poster img{width:100%;max-height:420px;object-fit:cover}

.from-tag{
  display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-pill);
  font-size:10.5px;font-family:var(--font);letter-spacing:.06em;text-transform:uppercase;
  color:var(--social);border:1px solid color-mix(in srgb,var(--social) 40%,transparent);
  background:color-mix(in srgb,var(--social) 12%,transparent);cursor:pointer;
}
.from-tag:hover{background:color-mix(in srgb,var(--social) 22%,transparent)}

.xpost{
  display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface-inset);cursor:pointer;
}
.xpost input{margin-top:2px;accent-color:var(--royal);width:16px;height:16px;flex:none}
.xpost b{display:block;font-family:var(--font);font-size:13.5px;color:var(--text)}
.xpost .small{display:block;margin-top:3px;line-height:1.45}
.tag.pick{cursor:pointer;transition:.15s;border:1px solid transparent}
.tag.pick.on{border-color:currentColor;background:color-mix(in srgb,currentColor 14%,transparent)}

/* ================= COMING-SOON CONTROL =================
   Reads as deliberate, not broken: muted, dashed, and it says Soon. */
.btn.btn-soon{
  border-style:dashed;color:var(--text-3);background:transparent;
  opacity:.9;cursor:default;
}
.btn.btn-soon:hover{transform:none;border-color:var(--line-hot);color:var(--text-2);background:transparent}
.btn.btn-soon .soon-em{color:var(--aura-text);opacity:.7}
.soon-badge{
  margin-left:2px;padding:2px 6px;border-radius:5px;font-size:8.5px;letter-spacing:.14em;
  background:var(--surface-3);color:var(--text-3);border:1px solid var(--line);
}

/* ================= PULSE COMMUNITIES =================
   Two views of one space. The Current is the live layer; The Board is
   what it leaves behind. The tabs are the whole navigation — switching
   is one tap and never a new screen. */
.pulse-tabs{
  display:flex;align-items:center;gap:6px;padding:6px;margin-bottom:14px;
  border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);
}
.pulse-tabs button{
  display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);
  font-family:var(--font);text-transform:uppercase;letter-spacing:.09em;
  font-size:11.5px;font-weight:700;color:var(--text-3);
  border:1px solid transparent;transition:.18s;
}
.pulse-tabs button:hover{color:var(--text);background:var(--surface-2)}
.pulse-tabs button.on{
  color:var(--heading);background:var(--surface-3);border-color:var(--line-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.pulse-tabs button .aura-mark{width:13px;height:13px;color:var(--aura-text)}
.pt-n{
  font-family:var(--font-body);font-size:10.5px;font-variant-numeric:tabular-nums;
  padding:1px 7px;border-radius:99px;background:var(--surface-inset);color:var(--text-3);
  border:1px solid var(--line);letter-spacing:0;
}
.pulse-tabs-note{
  margin-left:auto;padding-right:10px;font-size:11px;color:var(--text-3);
  font-family:var(--font);text-transform:uppercase;letter-spacing:.12em;
}
@media(max-width:720px){.pulse-tabs-note{display:none}}

.live-dot{
  width:7px;height:7px;border-radius:50%;flex:none;background:var(--club);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--club) 60%,transparent);
  animation:livePulse 2.6s ease-out infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--club) 55%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* the explainer. It has no analog anywhere else students use, so it is
   spelled out once, in the space itself, and then dismissed for good. */
.pulse-tip{
  position:relative;padding:16px 18px;margin-bottom:14px;border-radius:var(--r-lg);
  border:1px solid var(--line-hot);
  background:
    radial-gradient(120% 160% at 0% 0%,rgba(211,169,79,.09),transparent 60%),
    var(--surface-inset);
}
.pt-h{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.pt-h b{font-family:var(--font);text-transform:uppercase;letter-spacing:.06em;font-size:13.5px;color:var(--heading)}
.pt-mk{display:inline-flex;color:var(--aura-text)}
.pt-mk .aura-mark{width:16px;height:16px}
.pt-x{
  margin-left:auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;color:var(--text-3);
}
.pt-x:hover{background:var(--surface-3);color:var(--text)}
.pulse-tip p{margin:0;font-size:13px;line-height:1.62;color:var(--text-2);max-width:78ch}
.pulse-tip p b{color:var(--heading)}

.pulse-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 14px;margin-bottom:12px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);
}
.presence{display:flex;align-items:center;gap:0}
.presence .av{border:2px solid var(--surface);margin-left:-8px}
.presence .av:first-child{margin-left:0}
.presence .more{
  margin-left:4px;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums;
}
.presence-t{
  margin-left:9px;font-family:var(--font);text-transform:uppercase;letter-spacing:.12em;
  font-size:10px;color:var(--text-3);white-space:nowrap;
}
.voice-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chanlist .chan-live{
  width:6px;height:6px;border-radius:50%;background:var(--club);flex:none;
  box-shadow:0 0 7px var(--club);
}

.stream{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.exchange{
  padding:6px 0 10px;border-bottom:1px solid var(--line);
}
.exchange:last-child{border-bottom:0}
.msg{display:flex;gap:10px;padding:7px 8px;border-radius:var(--r-md);transition:background .16s}
.msg:hover{background:var(--surface-2)}
.msg.reply{margin-left:28px;padding-left:12px;border-left:2px solid var(--line)}
.msg.promoted{
  background:color-mix(in srgb,var(--aura-text) 7%,transparent);
  box-shadow:inset 2px 0 0 var(--aura-text);
}
.msg-body{flex:1;min-width:0}
.msg-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:3px}
.msg-top b{font-family:var(--font);font-size:13.5px;color:var(--text);letter-spacing:.01em}
.msg-t{font-size:10.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.msg-text{font-size:14px;line-height:1.55;color:var(--text-2);overflow-wrap:anywhere}
.msg.reply .msg-text{font-size:13.5px}
.msg-foot{display:flex;align-items:center;gap:10px;margin-top:7px;flex-wrap:wrap}
.msg-flag{
  display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--r-pill);
  font-family:var(--font);text-transform:uppercase;letter-spacing:.1em;font-size:9.5px;font-weight:700;
}
.msg-flag.on{color:var(--aura-text);background:color-mix(in srgb,var(--aura-text) 13%,transparent)}
.msg-flag.near{color:var(--text-3);border:1px dashed var(--line-2)}
.pulse-compose{position:sticky;bottom:10px}

/* the promotion moment */
.promo-flash{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:320;
  display:flex;align-items:center;gap:12px;padding:13px 20px 13px 16px;
  border-radius:var(--r-pill);max-width:min(440px,calc(100% - 32px));
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  border:1px solid var(--line-hot);
  box-shadow:var(--shadow-lg),0 0 44px -14px rgba(211,169,79,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity .3s ease,transform .3s cubic-bezier(.2,1.1,.35,1);
}
.promo-flash.on{opacity:1;transform:translate(-50%,0)}
.pf-star{display:inline-flex;color:var(--aura-text);flex:none}
.pf-star .aura-mark{width:26px;height:26px;animation:auraPop .7s cubic-bezier(.2,1.3,.35,1)}
.promo-flash b{
  display:block;font-family:var(--font);text-transform:uppercase;letter-spacing:.06em;
  font-size:13px;color:var(--heading);
}
.promo-flash span{display:block;margin-top:2px;font-size:12px;color:var(--text-3)}

/* a promoted exchange on The Board */
.promoted-card{border-color:var(--line-hot)}
.promoted-card.fresh{animation:promoIn .6s cubic-bezier(.2,1,.35,1)}
@keyframes promoIn{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:none}}
.promo-badge{
  display:inline-flex;align-items:center;gap:5px;color:var(--aura-text);
  font-family:var(--font);text-transform:uppercase;letter-spacing:.1em;font-size:9.5px;font-weight:700;
}
.qa-who{margin-top:8px;font-size:12px;color:var(--text-3)}
.qa-who b{color:var(--text-2)}
.qa-answer{
  margin-top:14px;padding:13px 15px;border-radius:var(--r-md);
  background:var(--surface-inset);border:1px solid var(--line);
}
.qa-answer p{margin:9px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.qa-answer .qa-who{margin-top:10px}


/* ==================================================================
   PHONE LAYOUTS — planner (deadlines & exams) and dashboard
   ------------------------------------------------------------------
   Everything below is inside a max-width query or an is-phone body
   class, so nothing here reaches a desktop screen. The matching JS
   asks U.isPhone() with the same 700px breakpoint, which is why the
   markup and the layout can never end up in different modes.
   ================================================================== */

/* the two-column planner used to carry these as inline styles, which no
   media query could reach past. Same values, now overridable. */
.dl-wrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.dl-cal{position:sticky;top:150px}
.dl-course{padding:4px 0}
.tt-hint{display:none}

@media(max-width:700px){
  /* ---------------- planner: deadlines & exams ---------------- */
  /* what is due comes first. A month grid is a reference, not the
     answer to "what do I have to do", so it moves below the agenda
     instead of costing a screen of scrolling before anything useful. */
  .dl-wrap{grid-template-columns:1fr;gap:12px}
  .dl-agenda{order:1;min-width:0}
  .dl-cal{order:2;position:static;top:auto}

  .mini{gap:4px}
  .mini .mc{border-radius:10px;font-size:13px;gap:3px}
  .mini .dots i{width:5px;height:5px}
  .mini .dots{gap:3px;height:5px}
  .cal-dow{font-size:10px}

  /* six courses stacked is six rows of nothing; two-up halves it */
  .dl-courses{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  .dl-course{padding:5px 0}

  /* a 20px checkbox is not a touch target */
  .agenda-item{gap:11px;padding:12px 12px 12px 11px;align-items:flex-start}
  .agenda-item .cbox{width:27px;height:27px;font-size:14px;border-radius:8px}
  .agenda-item .t{min-width:0}
  .agenda-item .t b{line-height:1.3}
  .agenda-item > .center{text-align:right}
  .agenda-item > .center .stat-num{font-size:15px}

  /* ---------------- planner: timetable ---------------- */
  .tt{grid-template-columns:46px repeat(5,minmax(98px,1fr));gap:4px}
  /* the hour column stays put while the week slides under it. The shadow
     spread is doing the work the background cannot: it paints the 4px grid
     gaps above, below and to the right, so a class never bleeds through */
  .tt-t{
    position:sticky;left:0;z-index:3;height:58px;line-height:1;font-size:9px;
    display:flex;align-items:center;justify-content:flex-end;padding-right:5px;
    background:var(--surface);box-shadow:0 0 0 4px var(--surface);
  }
  .tt-h:first-child{
    position:sticky;left:0;z-index:3;
    background:var(--surface);box-shadow:0 0 0 4px var(--surface);
  }
  .tt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .tt-hint{
    display:block;font-family:var(--font);font-size:9.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--text-3);margin:-4px 0 9px;
  }
  .tt-meta{grid-template-columns:1fr 1fr}

  /* ---------------- dashboard ---------------- */
  /* one column, full bleed. The JS stops writing the inline column span
     on a phone, so a widget sized to 4/12 on a laptop still lands here
     as a full-width card instead of a sliver. */
  .wgrid{grid-template-columns:1fr;gap:12px}
  .w,.w.w6,.w.w8,.w.w12,.w.h0,.w.h2{grid-column:auto;grid-row:auto}
  .w.h0 .w-body{max-height:none;overflow:visible;mask-image:none}
  .w{padding:14px}
  .w-grip{display:none}

  /* the title needs the room, and "from Planner" is the first thing
     worth losing for it — the render drops it rather than hiding it, so
     the guided tour does not try to point at something invisible */
  .w-head{flex-wrap:wrap;gap:7px;margin-bottom:10px}
  .w-head h3{flex:1;min-width:0;font-size:11.5px}
  .w-tools{gap:2px}
  .w-tools button{width:32px;height:32px;font-size:13px;border:1px solid var(--line)}
  .w-tools button[disabled]{opacity:.28;pointer-events:none}

  .dash-bar .btn{flex:1 1 46%;justify-content:center}
  .add-w{min-height:104px}

  /* the planner's own tab pair only — the other segmented controls on the
     app sit inside a toolbar next to other buttons, and stretching those to
     the full width would push their neighbours off the row */
  .seg[data-coach="planner-tabs"]{display:flex;width:100%;gap:4px}
  .seg[data-coach="planner-tabs"] button{
    flex:1;display:flex;align-items:center;justify-content:center;
    padding:9px 8px;font-size:10px;letter-spacing:.06em;
  }
}

/* no hover on a touch screen, so anything that only appeared on hover
   has to be visible from the start */
@media(hover:none){
  .w-tools{opacity:1}
  .agenda-item:hover{transform:none}
  .mini .mc:hover{background:transparent}
}