@charset "utf-8";
/* =========================================================================
   BACKBENCH — the design system
   -------------------------------------------------------------------------
   The idea: an app should look like the thing it is for. This one is for a
   student's desk, so it is built out of a desk's materials — a ruled sheet,
   highlighter ink, a stack of cards, a clock.

   Two rules hold it together:
     1  Six INKS belong to subjects, and to nothing else. Your Maths is
        always the same colour, everywhere in the app.
     2  Status colours (green / orange / red) are separate from the inks, so
        a colour never has to mean two things at once.
   ========================================================================= */

/* ---- 1 · tokens · light first, everything declared here ---------------- */
:root{
  color-scheme:light dark;

  /* paper. a warm sheet under a desk lamp, and ink that has dried on it */
  --bg:#F7F4EC;  --bg-2:#FFFDF8;  --bg-3:#EFEBE0;  --bg-4:#E4DFD1;
  --line:#E2DCCC;  --line-2:#CCC5B1;
  --edge:rgba(255,255,255,.9);
  --tx:#16161C;  --tx-2:#54525C;  --tx-3:#84808B;
  --glass:rgba(255,253,248,.82);
  --rail-bg:#F1EDE1;  --rail-line:#E0D9C6;

  /* six subject inks. Validated for colour-blind separation against paper:
     worst adjacent pair ΔE 9.8 (deutan), 21.1 normal, all above 3:1 contrast.
     A subject's name is always written beside its dot, so colour is never
     the only thing carrying the identity. */
  --ink-1:#6F9A00;  --ink-2:#0093B8;  --ink-3:#D6357F;
  --ink-4:#B57A00;  --ink-5:#6F4BD8;  --ink-6:#D2502C;

  --ok:#128A5B;   --ok-bg:rgba(18,138,91,.10);
  --warn:#B4700A; --warn-bg:rgba(180,112,10,.11);
  --bad:#C4382F;  --bad-bg:rgba(196,56,47,.09);

  --mark-1:rgba(255,214,60,.45);
  --mark-2:rgba(255,120,190,.34);
  --mark-3:rgba(70,205,240,.32);
  --mark-4:rgba(150,240,120,.36);

  --solid:#16161C;  --solid-tx:#FBFAF7;
  --rule:rgba(22,22,28,.07);       /* the lines on the sheet */
  --grain:.055;
  --fibre:1;                       /* paper texture, off in the dark */
  --aurora:0;                      /* the glow behind the dark theme */

  --r:16px;  --r-sm:11px;  --r-lg:26px;
  --ease:cubic-bezier(.2,.72,.28,1);
  --pop:cubic-bezier(.34,1.4,.5,1);
  --sh:0 1px 2px rgba(86,66,26,.06),0 8px 18px -12px rgba(86,66,26,.22),
       0 22px 44px -28px rgba(86,66,26,.24);
  --sh-lg:0 2px 4px rgba(86,66,26,.07),0 16px 32px -18px rgba(86,66,26,.22),
       0 46px 80px -36px rgba(86,66,26,.34);
  --rail:240px;
  --gut:clamp(16px,3.2vw,38px);

  /* two extra accents, kept off the subject inks — used only for credits,
     streaks and the community screens, so they read as "reward", not "data" */
  --accent:#7C5CFF; --accent-2:#FF5D8F;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#07070C; --bg-2:#101118; --bg-3:#181A22; --bg-4:#22242E;
    --line:#24262F; --line-2:#373A46;
    --edge:rgba(255,255,255,.055);
    --tx:#F3F1EC; --tx-2:#A3A2AE; --tx-3:#71707D;
    --glass:rgba(16,17,24,.72);
  --rail-bg:#0B0C12;  --rail-line:#20222B;
    --ink-1:#A9DC3F; --ink-2:#4FD8F5; --ink-3:#FF6FB5;
    --ink-4:#F0B840; --ink-5:#A98BFF; --ink-6:#FF7A5A;
    --ok:#3ECF8E;   --ok-bg:rgba(62,207,142,.12);
    --warn:#FFB020; --warn-bg:rgba(255,176,32,.12);
    --bad:#FF6B5E;  --bad-bg:rgba(255,107,94,.11);
    --mark-1:rgba(255,214,60,.22); --mark-2:rgba(255,120,190,.20);
    --mark-3:rgba(70,205,240,.20); --mark-4:rgba(150,240,120,.20);
    --solid:#F3F1EC; --solid-tx:#0A0A10;
    --rule:rgba(255,255,255,.04);
    --grain:.032;
    --fibre:0;
    --aurora:1;
    --sh:0 1px 2px rgba(0,0,0,.6),0 12px 26px -14px rgba(0,0,0,.9),
         inset 0 1px 0 rgba(255,255,255,.045);
    --sh-lg:0 2px 8px rgba(0,0,0,.62),0 40px 78px -34px rgba(0,0,0,.95),
         0 0 60px -22px color-mix(in srgb,var(--accent) 42%,transparent),
         inset 0 1px 0 rgba(255,255,255,.05);
  }
}
:root[data-theme="dark"]{
  --bg:#07070C; --bg-2:#101118; --bg-3:#181A22; --bg-4:#22242E;
  --line:#24262F; --line-2:#373A46;
  --edge:rgba(255,255,255,.055);
  --tx:#F3F1EC; --tx-2:#A3A2AE; --tx-3:#71707D;
  --glass:rgba(16,17,24,.72);
  --rail-bg:#0B0C12;  --rail-line:#20222B;
  --ink-1:#A9DC3F; --ink-2:#4FD8F5; --ink-3:#FF6FB5;
  --ink-4:#F0B840; --ink-5:#A98BFF; --ink-6:#FF7A5A;
  --ok:#3ECF8E;   --ok-bg:rgba(62,207,142,.12);
  --warn:#FFB020; --warn-bg:rgba(255,176,32,.12);
  --bad:#FF6B5E;  --bad-bg:rgba(255,107,94,.11);
  --mark-1:rgba(255,214,60,.22); --mark-2:rgba(255,120,190,.20);
  --mark-3:rgba(70,205,240,.20); --mark-4:rgba(150,240,120,.20);
  --solid:#F3F1EC; --solid-tx:#0A0A10;
  --rule:rgba(255,255,255,.04);
  --grain:.032;
  --fibre:0;
  --aurora:1;
  --sh:0 1px 2px rgba(0,0,0,.6),0 12px 26px -14px rgba(0,0,0,.9),
       inset 0 1px 0 rgba(255,255,255,.045);
  --sh-lg:0 2px 8px rgba(0,0,0,.62),0 40px 78px -34px rgba(0,0,0,.95),
       0 0 60px -22px color-mix(in srgb,var(--accent) 42%,transparent),
       inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---- 2 · base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);
  font:400 15px/1.6 "Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior-y:none}
body::before{content:"";position:fixed;inset:0;z-index:6;pointer-events:none;
  opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{max-width:100%}

/* the room the app sits in. Paper gets a lamp and a warm edge; ink gets a
   slow aurora. Both are behind everything and never intercept a click. */
.bg-paper,.bg-aurora{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-paper{opacity:var(--fibre);
  background:
    radial-gradient(120% 62% at 50% -12%,rgba(255,246,222,.85),transparent 62%),
    radial-gradient(90% 60% at 100% 100%,rgba(214,53,127,.045),transparent 62%),
    radial-gradient(80% 60% at 0% 96%,rgba(111,154,0,.05),transparent 60%)}
.bg-paper::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 180px -60px rgba(120,92,40,.28)}
.bg-aurora{opacity:var(--aurora);overflow:hidden}
.bg-aurora i{position:absolute;width:64vw;height:64vw;border-radius:50%;filter:blur(120px);
  opacity:.15;animation:aur 38s var(--ease) infinite alternate}
.bg-aurora i:nth-child(1){left:-18vw;top:-24vw;
  background:radial-gradient(circle,var(--accent),transparent 66%)}
.bg-aurora i:nth-child(2){right:-20vw;top:26vh;animation-delay:-14s;animation-duration:46s;
  background:radial-gradient(circle,var(--ink-2),transparent 66%)}
.bg-aurora i:nth-child(3){left:34vw;bottom:-34vw;animation-delay:-26s;animation-duration:52s;
  background:radial-gradient(circle,var(--ink-3),transparent 66%)}
@keyframes aur{0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(6vw,-6vh,0) scale(1.2)}}
.app{position:relative;z-index:1}

/* .btn sets display:inline-flex, which would otherwise beat the hidden
   attribute and show every optional control */
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--tx);outline-offset:2px;border-radius:7px}
::selection{background:var(--mark-1)}
h1,h2,h3,h4{margin:0;line-height:1.06}
p{margin:0 0 .9em}

.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.dsp{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  font-weight:700;letter-spacing:-.032em;line-height:.98;text-wrap:balance;
  font-variation-settings:"wdth" 100,"opsz" 40}
.d1{font-size:clamp(2.5rem,6vw,4.4rem)}
.d2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.d3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.d4{font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;font-weight:700;
  font-size:1.05rem;letter-spacing:-.02em;line-height:1.2}
.lead{font-size:1.02rem;line-height:1.62;color:var(--tx-2);max-width:60ch}
.tiny{font-size:.79rem;line-height:1.5;color:var(--tx-3);margin:0}
.lab{font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-3);
  font-weight:600}
/* an icon dropped into a label or a pill still has to know how big it is */
.lab svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.pill svg{width:13px;height:13px;fill:currentColor;stroke:none;vertical-align:-2px}
.mark{background:linear-gradient(var(--mark-1),var(--mark-1));background-size:100% 54%;
  background-position:0 88%;background-repeat:no-repeat;padding:0 .1em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
/* At display size a highlighter band turns into a block, so the stroke drops
   to an underline in the first subject ink instead — same gesture, still a
   marker, and it reads at 4rem. */
.dsp .mark,.d1 .mark,.d2 .mark{
  background-image:linear-gradient(var(--ink-1),var(--ink-1));
  background-size:100% 11%;background-position:0 96%;padding:0}
.mark-2{background-image:linear-gradient(var(--mark-2),var(--mark-2))}
.mark-3{background-image:linear-gradient(var(--mark-3),var(--mark-3))}
.mark-4{background-image:linear-gradient(var(--mark-4),var(--mark-4))}

/* ---- 3 · shell --------------------------------------------------------- */
.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100dvh}
.rail{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;
  padding:18px 12px 12px;border-right:1px solid var(--rail-line);
  background:color-mix(in srgb,var(--rail-bg) 92%,transparent);
  backdrop-filter:blur(22px) saturate(1.3);
  overflow:hidden;z-index:20}
/* the middle band scrolls; the brand above and the account below never move,
   so a long section list can't slide underneath either of them */
.rail-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  margin:12px -4px 0;padding:0 4px 6px;scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10px,
    #000 calc(100% - 14px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 10px,
    #000 calc(100% - 14px),transparent 100%)}
.rail-scroll::-webkit-scrollbar{width:5px}
.rail-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
.rail-scroll::-webkit-scrollbar-track{background:transparent}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;padding:2px 8px 4px}
.brand-m{width:34px;height:34px;flex:none;border-radius:11px;background:var(--solid);
  color:var(--solid-tx);display:grid;place-items:center;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:19px;
  box-shadow:var(--sh);transform:rotate(-4deg)}
.brand-t{display:flex;flex-direction:column;line-height:1}
.brand-t b{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.08rem;
  letter-spacing:-.03em}
.brand-t i{font-style:normal;font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tx-3);margin-top:4px;font-weight:600}
.nav{position:relative;display:flex;flex-direction:column;gap:1px}
/* one pill slides between the sections instead of each one lighting up */
.nav-ind{position:absolute;left:0;right:0;height:38px;border-radius:11px;
  background:var(--solid);box-shadow:var(--sh);opacity:0;
  transform:translateY(0);transition:transform .42s var(--pop),opacity .25s var(--ease),
    height .3s var(--ease);pointer-events:none;z-index:0}
.nav-ind.on{opacity:1}
.nav-g{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);
  font-weight:600;padding:14px 12px 6px}
.nv{position:relative;z-index:1;display:flex;align-items:center;gap:11px;padding:9px 12px;
  border-radius:11px;border:0;background:none;cursor:pointer;text-align:left;
  color:var(--tx-2);font-size:.91rem;width:100%;
  transition:color .18s var(--ease),transform .22s var(--pop),background .18s var(--ease)}
.nv::before{content:"";position:absolute;left:0;top:50%;translate:0 -50%;width:3px;height:0;
  border-radius:3px;background:var(--ink-2);transition:height .24s var(--pop)}
.nv:hover{color:var(--tx);transform:translateX(3px);
  background:color-mix(in srgb,var(--tx) 7%,transparent)}
.nv:hover::before{height:15px}
.nv:active{transform:translateX(3px) scale(.985)}
.nv .nv-i{transition:transform .3s var(--pop),color .18s}
.nv:hover .nv-i{transform:scale(1.14) rotate(-5deg);color:var(--tx)}
.nv[aria-current="page"]{color:var(--solid-tx);font-weight:600;background:none;transform:none}
.nv[aria-current="page"]::before{height:0}
.nv[aria-current="page"] .nv-i{color:var(--solid-tx);transform:none}
.nv-i{width:18px;height:18px;flex:none;color:var(--tx-3);fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nv-n{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:.68rem;
  padding:1px 6px;border-radius:100px;background:var(--bg-4);color:var(--tx-2)}
.nv[aria-current="page"] .nv-n{background:rgba(128,128,128,.35);color:inherit}
.rail-foot{flex:none;padding:11px 0 0;margin-top:2px;border-top:1px solid var(--rail-line);
  display:flex;flex-direction:column;gap:9px;background:transparent}
/* the account block at the bottom, which is also the way in to You */
.rail-me{display:flex;align-items:center;gap:10px;width:100%;padding:8px 9px;border:0;
  border-radius:13px;background:none;cursor:pointer;text-align:left;color:inherit;
  overflow:hidden;transition:background .18s var(--ease)}
.rail-me:hover{background:color-mix(in srgb,var(--tx) 8%,transparent)}
.rail-me:active{transform:scale(.985)}
.rail-me .av{width:32px;height:32px;font-size:.84rem}
.rail-me .nv-i{width:16px;height:16px;flex:none;color:var(--tx-3)}
.rail-me:hover .nv-i{color:var(--tx-2)}
.rail-me-t{min-width:0;flex:1}
.rail-me-t b{display:block;font-size:.86rem;font-weight:600;letter-spacing:-.012em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-me-t span{display:block;font-size:.71rem;color:var(--tx-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av{border-radius:50%;display:grid;place-items:center;flex:none;font-weight:700;
  font-family:"Bricolage Grotesque",sans-serif;color:#fff;letter-spacing:-.02em;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));font-size:.9rem;
  box-shadow:var(--sh)}
.rail-xp{height:3px;border-radius:4px;background:color-mix(in srgb,var(--tx) 10%,transparent);
  overflow:hidden;margin:0 9px}
.rail-xp i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .8s var(--ease)}
.rail-lv{display:flex;align-items:center;gap:11px}
.rail-lv-t{min-width:0}
.rail-lv-t b{display:block;font-size:.85rem;font-weight:600;letter-spacing:-.012em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-lv-t span{font-size:.7rem;color:var(--tx-3)}

.main{min-width:0;width:100%;max-width:1320px;margin-inline:auto;
  padding:clamp(20px,3vw,42px) var(--gut) 132px}
.view{display:none}
.view.on{display:block;animation:rise .32s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view.on{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;
  justify-content:space-between;margin-bottom:clamp(18px,2.6vw,30px)}
.head-tx{min-width:0}
.head-tx .lead{max-width:54ch}
.head h1{margin-bottom:.16em}

/* ---- the first screen -------------------------------------------------- */
.ob{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,452px);
  gap:clamp(26px,4.5vw,64px);align-items:center;
  min-height:calc(100dvh - clamp(60px,10vh,140px))}
.ob-l{min-width:0}
.ob h1{font-size:clamp(2.3rem,4.6vw,3.9rem);margin:.18em 0 .34em}
.ob-list{display:grid;gap:11px;margin-top:clamp(20px,2.6vw,30px);max-width:44ch}
.ob-i{display:flex;gap:12px;align-items:flex-start}
.ob-i svg{width:19px;height:19px;flex:none;margin-top:3px;fill:none;stroke:var(--tx-3);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ob-i b{font-weight:600;letter-spacing:-.012em}
.ob-i span{color:var(--tx-2);font-size:.92rem}
.ob-r{padding:clamp(18px,2.4vw,26px)}
body.onb .nav,body.onb .rail-foot,body.onb .tabs,body.onb .mtop-r{display:none}
body.onb .main{padding-bottom:clamp(24px,4vw,48px)}
body.onb .rail{justify-content:flex-start}

/* the hero: what today is on the left, how you are doing on the right */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,376px);
  gap:clamp(16px,2.4vw,30px);align-items:stretch;margin-bottom:clamp(16px,2.4vw,26px)}
.hero-l{display:flex;flex-direction:column;justify-content:center;min-width:0;
  padding:clamp(4px,1vw,14px) 0 clamp(4px,1vw,14px) 16px;position:relative}
.hero-l::before{content:"";position:absolute;left:0;top:.3em;bottom:.55em;width:3px;
  border-radius:3px;background:linear-gradient(var(--accent),var(--accent-2))}
.hero-l h1{margin:.1em 0 .18em}
.hero-say{font-size:1.02rem;color:var(--tx-2);max-width:46ch;margin:0}
.hero-say b{color:var(--tx);font-weight:600}
.hero-r{display:flex;flex-direction:column;gap:16px;justify-content:space-between}
.hero-lv{display:flex;align-items:center;gap:14px}
.hero-lv-t{min-width:0}
.hero-lv-t b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:1.12rem;letter-spacing:-.026em;line-height:1.1}
.hero-lv-t span{font-size:.78rem;color:var(--tx-3)}

/* seven days, at a glance. taller bar = a day you did something */
.wk{display:flex;gap:6px;align-items:flex-end}
.wk-d{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.wk-b{width:100%;height:42px;border-radius:9px;background:var(--bg-3);position:relative;
  overflow:hidden;border:1px solid transparent}
.wk-b i{position:absolute;left:0;right:0;bottom:0;border-radius:8px;
  transition:height .5s var(--ease)}
.wk-b .f{background:var(--ink-1);opacity:.9}
.wk-b .a{background:var(--tx-3);opacity:.5}
.wk-d.now .wk-b{border-color:var(--tx-3)}
.wk-d span{font-size:.6rem;letter-spacing:.06em;color:var(--tx-3);font-weight:600;
  text-transform:uppercase}
.wk-d.now span{color:var(--tx)}

/* ---- 4 · surfaces ------------------------------------------------------ */
.card{position:relative;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(15px,2vw,22px);box-shadow:inset 0 1px 0 var(--edge)}
button.card,a.card{text-align:left;cursor:pointer;color:inherit;font:inherit;
  text-decoration:none;display:block;
  transition:transform .18s var(--pop),border-color .18s,box-shadow .18s}
button.card:hover,a.card:hover{transform:translateY(-3px);border-color:var(--line-2);
  box-shadow:var(--sh)}
button.card:active,a.card:active{transform:translateY(-1px)}
.strip-i{transition:background .16s}
.strip-i:hover{background:var(--bg-3)}
.card-q{background:none;border:0;padding:0;box-shadow:none}
.grid{display:grid;gap:13px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,208px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,164px),1fr))}
.row{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.row-b{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:10px}
.sep{height:1px;background:var(--line);border:0;margin:clamp(18px,3vw,32px) 0}

.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,172px),1fr));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-2);
  box-shadow:inset 0 1px 0 var(--edge);margin-bottom:clamp(16px,2.4vw,26px)}
.strip-i{padding:clamp(14px,1.8vw,19px);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;min-width:0}
.strip-i:last-child{border-right:0}
.strip-i small{font-size:.77rem;color:var(--tx-3);line-height:1.4}
.big{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:clamp(1.8rem,3.4vw,2.4rem);line-height:1;font-weight:500;letter-spacing:-.05em}

.sec-h{display:flex;align-items:center;gap:14px;margin:clamp(20px,3vw,30px) 0 13px}
.sec-h:first-child{margin-top:0}
.sec-h::after{content:"";flex:1;height:1px;background:var(--line)}
.sec-h .btn,.sec-h .row{order:3}

/* the ruled sheet — used only where you read or write, like a real one */
.sheet{background-color:var(--bg-2);
  background-image:repeating-linear-gradient(var(--bg-2) 0 30px,var(--rule) 30px 31px);
  background-position:0 6px;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:inset 0 1px 0 var(--edge)}

/* ---- 5 · controls ------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:9px 16px;border-radius:100px;border:1px solid var(--line-2);background:var(--bg-2);
  cursor:pointer;font-size:.875rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  text-decoration:none;box-shadow:inset 0 1px 0 var(--edge);
  transition:transform .16s var(--pop),border-color .16s,background .16s,box-shadow .16s}
.btn:hover{border-color:var(--tx-3);transform:translateY(-1.5px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.btn-p{background:var(--solid);color:var(--solid-tx);border-color:transparent;box-shadow:var(--sh)}
.btn-p:hover{border-color:transparent;box-shadow:var(--sh-lg)}
.btn-q{border-color:transparent;background:none;color:var(--tx-2);box-shadow:none}
.btn-q:hover{background:var(--bg-3);color:var(--tx);border-color:transparent}
.btn-sm{padding:6px 12px;font-size:.8rem}
.btn-lg{padding:13px 26px;font-size:.95rem}
.btn-bad{color:var(--bad);border-color:transparent;background:none;box-shadow:none}
.btn-bad:hover{background:var(--bad-bg);border-color:transparent}
.btn-ic{width:34px;height:34px;padding:0;border-radius:100px}
.btn[disabled]{opacity:.42;pointer-events:none}
/* AI is optional here, so it never looks like the main path */
.btn-ai{border-style:dashed;border-color:var(--line-2);color:var(--tx-2)}
.btn-ai:hover{border-style:solid;color:var(--tx)}

.inp,select.inp,textarea.inp{width:100%;padding:10px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--bg);font-size:.94rem;
  transition:border-color .15s,box-shadow .15s,background .15s}
.inp:focus{outline:none;border-color:var(--tx);background:var(--bg-2);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--tx) 11%,transparent)}
textarea.inp{resize:vertical;min-height:96px;line-height:1.62}
select.inp{appearance:none;cursor:pointer;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.f{display:flex;flex-direction:column;gap:6px}
.seg{display:inline-flex;padding:3px;border-radius:100px;background:var(--bg-3);gap:2px;
  border:1px solid var(--line)}
.seg button{border:0;background:none;padding:6px 15px;border-radius:100px;cursor:pointer;
  font-size:.82rem;color:var(--tx-2);font-weight:500;transition:.16s}
.seg button[aria-pressed="true"]{background:var(--bg-2);color:var(--tx);font-weight:600;
  box-shadow:var(--sh)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:100px;
  border:1px solid var(--line-2);background:var(--bg-2);font-size:.8rem;cursor:pointer;
  color:var(--tx-2);font-weight:500;transition:.15s}
.chip:hover{border-color:var(--tx-3);color:var(--tx);transform:translateY(-1px)}
.chip:active{transform:translateY(0) scale(.96)}
.chip[aria-pressed="true"]{background:var(--solid);color:var(--solid-tx);border-color:transparent}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips-x{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips-x::-webkit-scrollbar{display:none}

/* ---- 6 · ink. a subject's colour, everywhere ---------------------------- */
.ink-1{--ink:var(--ink-1)} .ink-2{--ink:var(--ink-2)} .ink-3{--ink:var(--ink-3)}
.ink-4{--ink:var(--ink-4)} .ink-5{--ink:var(--ink-5)} .ink-6{--ink:var(--ink-6)}
.dot{width:9px;height:9px;border-radius:100px;flex:none;background:var(--ink,var(--tx-3))}
.tag-ink{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;
  border-radius:100px;font-size:.74rem;font-weight:600;
  background:color-mix(in srgb,var(--ink,var(--tx-3)) 15%,transparent);
  color:var(--ink,var(--tx-2))}
.tag-ink::before{content:"";width:6px;height:6px;border-radius:100px;background:currentColor}

/* progress rings — the only chart in the app, so it earns its place */
.ring{--p:0;width:44px;height:44px;flex:none;position:relative;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.ring .bg{stroke:var(--bg-4)}
.ring .fg{stroke:var(--ink,var(--tx));
  stroke-dasharray:var(--c);stroke-dashoffset:calc(var(--c) - var(--c) * var(--p) / 100);
  transition:stroke-dashoffset .8s var(--ease)}
.ring b{font-family:"JetBrains Mono",monospace;font-size:.66rem;font-weight:500;
  letter-spacing:-.05em}
.ring-lg{width:92px;height:92px}
.ring-lg circle{stroke-width:6}
.ring-lg b{font-size:1.05rem}

.meter{height:7px;border-radius:100px;background:var(--bg-3);position:relative;overflow:visible}
.meter i{display:block;height:100%;border-radius:100px;background:var(--ink,var(--tx-3));
  transition:width .7s var(--ease)}
.meter.ok i{background:var(--ok)} .meter.warn i{background:var(--warn)}
.meter.bad i{background:var(--bad)}
.meter .tgt{position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:2px;
  background:var(--tx);opacity:.55}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:100px;
  font-size:.72rem;font-weight:600;white-space:nowrap}
.pill-ok{background:var(--ok-bg);color:var(--ok)}
.pill-warn{background:var(--warn-bg);color:var(--warn)}
.pill-bad{background:var(--bad-bg);color:var(--bad)}
.pill-n{background:var(--bg-3);color:var(--tx-2)}

/* ---- charts. Three, and each does one job -------------------------------
   dots  = state, one square per class      (status colours, keyed)
   bars  = magnitude over an ordered run    (one hue, every bar labelled)
   heat  = how much, day by day             (one hue, light → dark)
   Text never wears a series colour; the marks carry it. */
.dots{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.dots i{width:9px;height:9px;border-radius:3px;background:var(--bg-4);flex:none}
.dots i.p{background:var(--ok)}
.dots i.a{background:var(--bad)}
.dots i.c{background:var(--line-2)}
.key{display:flex;flex-wrap:wrap;gap:11px;align-items:center;font-size:.7rem;color:var(--tx-3)}
.key b{display:inline-flex;align-items:center;gap:5px;font-weight:500}
.key b::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--bg-4)}
.key b.p::before{background:var(--ok)}
.key b.a::before{background:var(--bad)}
.key b.c::before{background:var(--line-2)}

.bars{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,12px);height:132px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;height:100%}
.bar-t{flex:1;width:100%;display:flex;align-items:flex-end;min-height:0}
.bar-t i{width:100%;border-radius:5px 5px 0 0;background:var(--tx-3);opacity:.5;
  transition:height .7s var(--ease);min-height:3px}
.bar.now .bar-t i{background:var(--tx);opacity:1}
.bar b{font-family:"JetBrains Mono",monospace;font-size:.72rem;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em}
.bar span{font-size:.62rem;color:var(--tx-3);font-weight:600;letter-spacing:.04em}

.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,13px);
  grid-auto-columns:13px;justify-content:start;gap:4px;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none}
.heat::-webkit-scrollbar{display:none}
.heat i{width:13px;height:13px;border-radius:4px;background:var(--bg-3)}
.heat i[data-l="1"]{background:color-mix(in srgb,var(--ink-1) 28%,var(--bg-3))}
.heat i[data-l="2"]{background:color-mix(in srgb,var(--ink-1) 52%,var(--bg-3))}
.heat i[data-l="3"]{background:color-mix(in srgb,var(--ink-1) 76%,var(--bg-3))}
.heat i[data-l="4"]{background:var(--ink-1)}
.heat-k{display:flex;align-items:center;gap:5px;font-size:.68rem;color:var(--tx-3);margin-top:10px}
.heat-k i{width:11px;height:11px;border-radius:3px;background:var(--bg-3)}
.heat-k i[data-l="1"]{background:color-mix(in srgb,var(--ink-1) 28%,var(--bg-3))}
.heat-k i[data-l="2"]{background:color-mix(in srgb,var(--ink-1) 52%,var(--bg-3))}
.heat-k i[data-l="3"]{background:color-mix(in srgb,var(--ink-1) 76%,var(--bg-3))}
.heat-k i[data-l="4"]{background:var(--ink-1)}

/* a compact read of every subject at once */
.pulse{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.pl{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--bg-2);min-width:0;
  transition:transform .16s var(--pop),border-color .16s}
.pl:hover{transform:translateY(-2px);border-color:var(--line-2)}
.pl-t{min-width:0;flex:1}
.pl-t b{display:block;font-size:.84rem;font-weight:600;letter-spacing:-.012em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-t .meter{display:block;width:100%;margin-top:6px}
.pl-p{font-family:"JetBrains Mono",monospace;font-size:.82rem;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em}

/* ---- 7 · rows ---------------------------------------------------------- */
.rw{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--line);transition:background .15s;
  background:none;text-align:left;width:100%;border-left:0;border-right:0;border-top:0;
  color:inherit;font:inherit;cursor:default}
.rw:first-of-type{border-top:1px solid var(--line)}
.rw:hover{background:var(--bg-2)}
button.rw,a.rw{cursor:pointer;text-decoration:none}
.rw-n{font-weight:600;letter-spacing:-.012em;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.rw-m{font-size:.78rem;color:var(--tx-3);display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.rw-r{display:flex;align-items:center;gap:7px}

/* ---- 8 · library tiles ------------------------------------------------- */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.tile{position:relative;display:flex;flex-direction:column;gap:9px;padding:14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  box-shadow:inset 0 1px 0 var(--edge);text-align:left;cursor:pointer;color:inherit;
  font:inherit;transition:transform .18s var(--pop),border-color .18s,box-shadow .18s}
.tile:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--sh)}
.tile-th{aspect-ratio:4/3;border-radius:10px;background:var(--bg-3);display:grid;
  place-items:center;overflow:hidden;position:relative}
.tile-th img{width:100%;height:100%;object-fit:cover}
.tile-th svg{width:30px;height:30px;stroke:var(--tx-3);fill:none;stroke-width:1.4}
.tile-n{font-weight:600;font-size:.9rem;line-height:1.3;letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-m{font-size:.72rem;color:var(--tx-3);display:flex;gap:6px;align-items:center}
.tile-x{position:absolute;top:8px;right:8px;opacity:0;transition:.16s}
.tile:hover .tile-x,.tile:focus-within .tile-x{opacity:1}
@media (hover:none){.tile-x{opacity:1}}

/* ---- 9 · reading & notes ----------------------------------------------- */
.prose{padding:clamp(16px,2.4vw,30px);line-height:1.75;font-size:1rem;
  background-position:0 clamp(16px,2.4vw,30px)}
.prose h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.5rem;
  letter-spacing:-.028em;margin:1.4em 0 .4em}
.prose h3{font-weight:700;font-size:1.02rem;margin:1.35em 0 .3em;letter-spacing:-.015em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.25em;margin:.4em 0 1em}
.prose li{margin-bottom:.4em}
.prose li::marker{color:var(--tx-3)}
.prose code{font-family:"JetBrains Mono",monospace;font-size:.85em;background:var(--bg-3);
  padding:1px 5px;border-radius:5px}
.prose pre{background:var(--bg-3);padding:13px 15px;border-radius:var(--r-sm);overflow-x:auto;
  border:1px solid var(--line)}
.prose pre code{background:none;padding:0}
.prose blockquote{margin:.6em 0 1em;padding:2px 0 2px 15px;border-left:3px solid var(--mark-1);
  color:var(--tx-2)}
.prose table{border-collapse:collapse;width:100%;font-size:.9rem;margin:.4em 0 1.1em}
.prose th,.prose td{border:1px solid var(--line);padding:8px 11px;text-align:left}
.prose th{background:var(--bg-3);font-weight:600}
.prose img{border-radius:var(--r-sm);margin:.5em 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:1.4em 0}
.qa{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;background:var(--bg);
  overflow:hidden}
.qa>summary{cursor:pointer;padding:12px 15px;font-weight:600;list-style:none;display:flex;
  gap:11px;align-items:flex-start;letter-spacing:-.012em}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary::before{content:attr(data-m);font-family:"JetBrains Mono",monospace;font-size:.66rem;
  padding:2px 7px;border-radius:100px;background:var(--bg-3);color:var(--tx-3);flex:none;
  margin-top:2px;min-width:32px;text-align:center;font-weight:500}
.qa>div{padding:0 15px 14px;color:var(--tx-2)}

/* ---- 10 · flashcards --------------------------------------------------- */
.deckwrap{display:grid;place-items:center;gap:18px;padding:10px 0}
.fc{position:relative;width:min(100%,560px);aspect-ratio:8/5;perspective:1600px;cursor:pointer;
  background:none;border:0;padding:0}
.fc::before,.fc::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);
  background:var(--bg-2);border:1px solid var(--line);z-index:-1}
.fc::before{transform:translateY(9px) rotate(1.4deg) scale(.978);opacity:.75}
.fc::after{transform:translateY(17px) rotate(-1.8deg) scale(.952);opacity:.45}
.fc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .6s var(--ease)}
.fc[aria-pressed="true"] .fc-in{transform:rotateY(180deg)}
.fc-f,.fc-b{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--bg-2);display:grid;place-items:center;
  padding:30px;text-align:center;box-shadow:var(--sh-lg),inset 0 1px 0 var(--edge);overflow:auto}
.fc-b{transform:rotateY(180deg);background:var(--bg-3)}
.fc-f>div,.fc-b>div{max-width:44ch}
.fc-q{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.028em;
  font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.16}
.fc-a{font-size:1.02rem;line-height:1.62;color:var(--tx-2)}
.fc-tag{position:absolute;top:15px;left:17px;font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx-3);font-weight:600}

/* ---- 11 · focus timer -------------------------------------------------- */
.focus{display:grid;place-items:center;gap:22px;padding:clamp(18px,4vw,40px) 0}
.clock{position:relative;width:min(76vw,300px);aspect-ratio:1;display:grid;place-items:center}
.clock svg{position:absolute;inset:0;transform:rotate(-90deg)}
.clock circle{fill:none;stroke-width:7;stroke-linecap:round}
.clock .bg{stroke:var(--bg-3)}
.clock .fg{stroke:var(--tx);stroke-dasharray:var(--c);
  stroke-dashoffset:calc(var(--c) - var(--c) * var(--p,0) / 100);transition:stroke-dashoffset 1s linear}
.clock.run .fg{stroke:var(--ok)}
.clock.rest .fg{stroke:var(--ink-2)}
.clock b{font-family:"JetBrains Mono",monospace;font-size:clamp(2.6rem,9vw,3.6rem);
  font-weight:500;letter-spacing:-.05em;line-height:1}
.clock span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3);
  font-weight:600;margin-top:6px}

/* ---- 12 · timetable ---------------------------------------------------- */
.tt{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.tt table{border-collapse:collapse;width:100%;min-width:690px;font-size:.85rem}
.tt th,.tt td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0;
  vertical-align:top}
.tt th{padding:11px 12px;text-align:left;font-weight:600;font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-3);background:var(--bg-3)}
.tt th:last-child,.tt td:last-child{border-right:0}
.tt tr:last-child td{border-bottom:0}
.tt .slot{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:9px 11px;min-height:58px;position:relative;transition:.15s;color:inherit;font:inherit}
.tt .slot:hover{background:var(--bg-3)}
.tt .slot b{display:block;font-weight:600;font-size:.84rem;line-height:1.25;letter-spacing:-.012em}
.tt .slot span{font-size:.72rem;color:var(--tx-3)}
.tt .slot.has{background:color-mix(in srgb,var(--ink,#888) 11%,transparent)}
.tt .slot.has::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:3px;background:var(--ink,var(--tx-3))}
.tt .hour{padding:9px 11px;font-size:.7rem;color:var(--tx-3);white-space:nowrap;
  background:var(--bg-3);font-family:"JetBrains Mono",monospace}

/* ---- 13 · tasks -------------------------------------------------------- */
.task{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;
  border-bottom:1px solid var(--line);transition:background .15s}
.task:first-of-type{border-top:1px solid var(--line)}
.task:hover{background:var(--bg-2)}
.task.done{opacity:.44}
.task.done .task-t{text-decoration:line-through}
.tick{width:20px;height:20px;border-radius:7px;border:1.6px solid var(--line-2);flex:none;
  cursor:pointer;background:none;display:grid;place-items:center;margin-top:1px;padding:0;
  transition:.15s var(--pop)}
.tick:hover{border-color:var(--tx-3);transform:scale(1.08)}
.tick svg{width:11px;height:11px;stroke:var(--solid-tx);stroke-width:3;fill:none;opacity:0;
  stroke-linecap:round;stroke-linejoin:round}
.tick[aria-pressed="true"]{background:var(--solid);border-color:transparent}
.tick[aria-pressed="true"] svg{opacity:1}
.task-b{min-width:0;flex:1}
.task-t{font-weight:600;line-height:1.35;letter-spacing:-.012em}

/* ---- 14 · odds and ends ------------------------------------------------ */
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:26px 20px;display:grid;
  place-items:center;gap:5px;text-align:center;cursor:pointer;transition:.18s;background:var(--bg)}
.drop:hover,.drop.over{border-color:var(--tx);background:var(--bg-3)}
.drop b{font-weight:700;letter-spacing:-.015em}
.drop svg{width:22px;height:22px;stroke:var(--tx-3);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.empty{text-align:center;padding:clamp(22px,3.4vw,34px) 20px;border:1.5px dashed var(--line);
  border-radius:var(--r);color:var(--tx-3)}
.empty h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.16rem;
  letter-spacing:-.026em;color:var(--tx);margin-bottom:.25em}
.empty p{max-width:44ch;margin:0 auto .9em;font-size:.88rem;line-height:1.5}
.empty .row{justify-content:center}
.note{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border-radius:var(--r-sm);
  background:var(--bg-3);border:1px solid var(--line);font-size:.87rem;color:var(--tx-2)}
.note svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:var(--tx-3);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.toast{position:fixed;left:50%;bottom:94px;transform:translate(-50%,14px);z-index:80;
  background:var(--solid);color:var(--solid-tx);padding:11px 21px;border-radius:100px;
  font-size:.87rem;font-weight:600;box-shadow:var(--sh-lg);opacity:0;pointer-events:none;
  transition:.3s var(--pop);max-width:92vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.think{display:inline-flex;align-items:center;gap:9px;color:var(--tx-3);font-size:.88rem}
.think i{width:6px;height:6px;border-radius:100px;background:var(--tx-3);
  animation:blink 1.2s var(--ease) infinite}
@keyframes blink{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}

dialog{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);color:var(--tx);
  padding:0;max-width:min(580px,94vw);width:100%;box-shadow:var(--sh-lg)}
dialog::backdrop{background:rgba(8,8,12,.55);backdrop-filter:blur(4px)}
.dlg{padding:clamp(19px,3vw,28px)}
.dlg h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.5rem;
  letter-spacing:-.03em;margin-bottom:.55em}
.dlg-foot{display:flex;gap:9px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.dlg-body{max-height:min(62vh,540px);overflow:auto;margin:0 -4px;padding:0 4px}

/* ---- 14.5 · credits & circle -------------------------------------------- */
.bal-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--bg-2)),
    color-mix(in srgb,var(--accent-2) 10%,var(--bg-2)));
  border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.bal-n{display:flex;align-items:center;gap:10px;margin-top:6px}
.bal-n .bal-i{width:34px;height:34px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.6}
.bal-n span{font-size:clamp(2.4rem,7vw,3.2rem);font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.bal-txt{display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.bal-i-sm{width:.72em;height:.72em;flex:none;fill:none;stroke:var(--accent);stroke-width:1.8}

/* ---- 15 · phone -------------------------------------------------------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:color-mix(in srgb,var(--bg-2) 90%,transparent);backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.tabs-in{display:flex;justify-content:space-around;max-width:540px;margin-inline:auto}
.tb{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 2px 6px;border:0;background:none;cursor:pointer;color:var(--tx-3);font-size:.62rem;
  font-weight:600;border-radius:10px}
.tb svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tb[aria-current="page"]{color:var(--tx)}
.tb[aria-current="page"] svg{stroke-width:2.2}
.tb[aria-current="page"]::before{content:"";position:absolute;top:0;left:50%;translate:-50% 0;
  width:18px;height:2.5px;border-radius:3px;background:var(--tx)}
/* ---- the top bar. On every screen, like a real app --------------------- */
.mtop{display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;z-index:40;
  margin:calc(clamp(20px,3vw,42px) * -1) calc(var(--gut) * -1) clamp(14px,2vw,20px);
  padding:10px var(--gut);min-height:58px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.mtop.stuck{border-bottom-color:var(--line)}
.mtop .brand{display:none}
.mtop-l{display:flex;align-items:center;gap:10px;min-width:0}
.mtop-t{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.02rem;
  letter-spacing:-.026em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtop-r{display:flex;align-items:center;gap:8px}

/* the credit balance, always in reach */
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;
  border-radius:100px;border:1px solid var(--line);background:var(--bg-2);
  font-size:.83rem;font-weight:600;cursor:pointer;color:var(--tx);
  box-shadow:inset 0 1px 0 var(--edge);white-space:nowrap;
  transition:transform .2s var(--pop),border-color .18s,box-shadow .18s}
.chip:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:var(--sh)}
.chip:active{transform:translateY(0) scale(.97)}
.chip svg{width:15px;height:15px;flex:none}
.chip-coin{border-color:color-mix(in srgb,var(--accent) 34%,var(--line));
  background:linear-gradient(140deg,
    color-mix(in srgb,var(--accent) 13%,var(--bg-2)),var(--bg-2))}
.chip-coin svg{color:var(--accent);fill:currentColor;stroke:none}
.chip-fire svg{color:var(--warn);fill:currentColor;stroke:none}
.chip .mono{font-size:.86rem}
/* a coin that has just been earned */
@keyframes coinPop{0%{transform:scale(1)}38%{transform:scale(1.34) rotate(-12deg)}
  100%{transform:scale(1)}}
.chip-coin.earn svg{animation:coinPop .55s var(--pop)}
.chip-coin.earn{border-color:var(--accent)}
.av-btn{width:34px;height:34px;border:0;padding:0;cursor:pointer;
  transition:transform .2s var(--pop),box-shadow .2s}
.av-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:var(--sh-lg)}
@media (max-width:960px){
  .mtop{margin-top:-8px}
  .mtop .brand{display:flex}
  .mtop-t{display:none}
}
@media (max-width:420px){
  .chip-fire{display:none}
}

@media (max-width:960px){
  .app{grid-template-columns:1fr}
  .rail{display:none}
  .tabs{display:block}
  .main{padding-bottom:112px}
  .mtop{display:flex}
  .big{font-size:clamp(1.55rem,7vw,2rem)}
  .head{margin-bottom:15px}
  .ob{grid-template-columns:1fr;gap:20px;min-height:0;padding-top:6px}
  .ob h1{font-size:clamp(2.1rem,8.4vw,2.9rem)}
  .hero{grid-template-columns:1fr;gap:14px}
  .hero-r{padding:15px}
  .strip{grid-template-columns:1fr 1fr}
  .strip-i:nth-child(2n){border-right:0}
  .strip-i:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(min(100%,146px),1fr));gap:10px}
}
@media (max-width:560px){
  .rw{padding:11px 8px;gap:10px}
  .task{padding:11px 8px}
  .prose{padding:16px 14px}
}
@media print{
  .rail,.tabs,.toast,.mtop,.btn,body::before{display:none!important}
  body{background:#fff;color:#000}
  .app{grid-template-columns:1fr}
  .card,.sheet{border-color:#ccc;box-shadow:none;background:#fff}
}

/* ---- 16 · class pack ---------------------------------------------------- */
.rw:has(input:disabled){opacity:.45}
.rw input[type=checkbox]{margin:0}
.card .rw:first-of-type{border-top:0}
#pk-in{font-family:"JetBrains Mono",monospace;resize:vertical;line-height:1.5}

/* ---- 18 · timetable, with the college's own period times ---------------- */
.tt .hour{padding:9px 12px;background:var(--bg-3);white-space:nowrap}
.tt .hour b{display:block;font-family:"JetBrains Mono",monospace;font-size:.78rem;
  font-weight:500;letter-spacing:-.03em;color:var(--tx)}
.tt .hour span{display:block;font-size:.68rem;color:var(--tx-3);margin-top:1px}
.tt th.tt-now{color:var(--tx);background:color-mix(in srgb,var(--ink-2) 12%,var(--bg-3))}
.tt .slot{transition:background .15s var(--ease),transform .18s var(--pop)}
.tt .slot:hover{transform:scale(.985)}
.tt .slot.slot-lab::after,.tt .slot.slot-tut::after,.tt .slot.slot-free::after{
  content:"";position:absolute;right:7px;top:7px;width:6px;height:6px;border-radius:50%;
  background:var(--ink,var(--tx-3))}
.tt .slot.slot-free{opacity:.55}
.prow .inp{min-width:0}
.prow{align-items:center}

/* ---- 19 · predictor, planner, plan, cheat sheet ------------------------- */
.wgt{padding:9px 0;border-bottom:1px solid var(--line)}
.wgt:last-child{border-bottom:0}
.wgt.done{opacity:.5}
.wgt-t{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  margin-bottom:6px}
.wgt-t b{font-size:.9rem;font-weight:600;letter-spacing:-.012em;min-width:0}
.wgt-b{height:7px;border-radius:5px;background:var(--bg-3);overflow:hidden}
.wgt-b i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--ink,var(--tx-2)),
    color-mix(in srgb,var(--ink,var(--tx-2)) 45%,transparent));
  animation:grow .8s var(--ease) both}
@keyframes grow{from{width:0!important}}

/* the month, and the days you are eyeing */
.cal-h{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-h span{text-align:center;font-size:.64rem;letter-spacing:.1em;color:var(--tx-3);
  font-weight:600}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-x{aspect-ratio:1}
.cal-d{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);cursor:pointer;color:inherit;font:inherit;display:grid;
  place-items:center;padding:0;transition:transform .18s var(--pop),background .16s,
  border-color .16s}
.cal-d b{font-size:.82rem;font-weight:600}
.cal-d:hover:not([disabled]){transform:scale(1.09);border-color:var(--tx-3);z-index:2}
.cal-d[disabled]{opacity:.3;cursor:default}
.cal-d.past{opacity:.28}
.cal-d.now{border-color:var(--tx);border-width:2px}
.cal-n{position:absolute;right:3px;top:2px;font-size:.55rem;color:var(--tx-3);
  font-family:"JetBrains Mono",monospace}
.cal-d.skip{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.cal-d.hol{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.cal-d.skip::after{content:"";position:absolute;inset:6px;border-radius:6px;
  background:repeating-linear-gradient(45deg,transparent 0 3px,
    color-mix(in srgb,var(--bad) 22%,transparent) 3px 6px)}
.cal-k{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:.72rem;color:var(--tx-3)}
.cal-k b{font-weight:500;display:inline-flex;align-items:center;gap:5px}
.cal-k b::before{content:"";width:10px;height:10px;border-radius:3px;border:1px solid var(--line)}
.cal-k .k-skip::before{background:var(--bad-bg);border-color:var(--bad)}
.cal-k .k-hol::before{background:var(--ok-bg);border-color:var(--ok)}
.cal-k .k-n::before{background:var(--bg-3)}

/* the plan, one row a day */
.pln{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line)}
.pln:last-child{border-bottom:0}
.pln.late{opacity:.55}
.pln.now .pln-d b{color:var(--ink,var(--tx))}
.pln-d b{display:block;font-size:.83rem;font-weight:600}
.pln-d span{font-size:.68rem;color:var(--tx-3);font-family:"JetBrains Mono",monospace}
.pln-u{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pln-u em{font-size:.83rem;color:var(--tx-2);font-style:normal}

/* the printable sheet */
.csheet{position:fixed;inset:0;z-index:150;background:var(--bg-3);overflow-y:auto;
  padding:0 0 60px;animation:rise .3s var(--ease)}
.cs-bar{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:12px clamp(14px,3vw,28px);background:var(--bg-2);border-bottom:1px solid var(--line)}
.cs-a4{width:min(820px,94vw);margin:22px auto;background:#fff;color:#15151a;
  padding:38px 40px;box-shadow:var(--sh-lg);border-radius:4px;
  font-size:10.5px;line-height:1.42}
.cs-a4 header{border-bottom:2px solid #15151a;padding-bottom:8px;margin-bottom:14px}
.cs-a4 h1{font-family:"Bricolage Grotesque",sans-serif;font-size:21px;letter-spacing:-.03em}
.cs-a4 header p{margin:4px 0 0;font-size:10px;color:#5b5a63}
.cs-a4 h3{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:#15151a;
  margin:0 0 5px;padding-bottom:3px;border-bottom:1px solid #d9d6cc}
.cs-cols{column-count:2;column-gap:26px}
.cs-cols>*{break-inside:avoid}
.cs-cols ul,.cs-cols ol{margin:0 0 13px;padding-left:15px}
.cs-cols li{margin-bottom:3px}
.cs-u{list-style:none;padding-left:0}
.cs-w li span{color:#5b5a63}
.cs-q li b{font-weight:600}
.cs-q li i{font-style:normal;color:#5b5a63;font-size:9px}
.cs-q li span{display:block;color:#3d3c45;font-size:9.5px;margin-top:1px}
.cs-h li{background:#fff6c9;padding:1px 3px;border-radius:2px}
.cs-a4 footer{margin-top:16px;padding-top:7px;border-top:1px solid #d9d6cc;
  font-size:8.5px;color:#86858f;text-align:right}
@media print{
  body.printing>*:not(.csheet){display:none!important}
  body.printing .csheet{position:static;background:#fff;padding:0}
  body.printing .cs-bar{display:none}
  body.printing .cs-a4{width:auto;margin:0;box-shadow:none;padding:0;border-radius:0}
  @page{size:A4;margin:14mm}
}

body.printing{overflow:hidden}

/* ---- 20 · the last coat of polish -------------------------------------- */
/* Things arrive in order when a section opens, and only then — re-rendering
   after a tick or a tap must not make the whole page flash again. */
.view.fresh .strip>*,.view.fresh .grid>*,.view.fresh .tiles>*,
.view.fresh>.card,.view.fresh>.rw,.view.fresh>.task,.view.fresh>.qa{
  animation:liftIn .42s var(--ease) both}
@keyframes liftIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.view.fresh .strip>*:nth-child(2),.view.fresh .grid>*:nth-child(2),
.view.fresh .tiles>*:nth-child(2){animation-delay:.045s}
.view.fresh .strip>*:nth-child(3),.view.fresh .grid>*:nth-child(3),
.view.fresh .tiles>*:nth-child(3){animation-delay:.09s}
.view.fresh .strip>*:nth-child(4),.view.fresh .grid>*:nth-child(4),
.view.fresh .tiles>*:nth-child(4){animation-delay:.135s}
.view.fresh .strip>*:nth-child(n+5),.view.fresh .grid>*:nth-child(n+5),
.view.fresh .tiles>*:nth-child(n+5){animation-delay:.18s}

/* the phone's tab bar gets the same sliding marker as the rail */
.tabs-in{position:relative}
.tab-ind{position:absolute;left:0;top:2px;height:calc(100% - 4px);border-radius:13px;
  background:color-mix(in srgb,var(--tx) 8%,transparent);opacity:0;
  transition:transform .38s var(--pop),width .38s var(--pop),opacity .2s;
  pointer-events:none;z-index:0}
.tab-ind.on{opacity:1}
.tb{position:relative;z-index:1;transition:color .18s var(--ease),transform .2s var(--pop)}
.tb:active{transform:scale(.92)}
.tb svg{transition:transform .3s var(--pop),stroke-width .2s}
.tb[aria-current="page"] svg{transform:translateY(-1px) scale(1.06)}


/* a section heading's rule should not crash into a button on a narrow column */
.sec-h{flex-wrap:wrap}
.sec-h .dsp{min-width:0}

/* nothing in the app should be able to push the page sideways */
.rw,.task,.strip-i,.card,.tile{min-width:0}

/* ---- 21 · invites ------------------------------------------------------- */
.rf-code{padding:11px 13px;border-radius:var(--r-sm);border:1px dashed var(--line-2);
  background:var(--bg-3);word-break:break-all;font-size:.74rem;line-height:1.5;
  color:var(--tx-2)}
.rf-code.big-code{text-align:center;padding:16px 13px;border-style:solid;
  border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg-3))}
.rf-code.big-code b{font-size:1.5rem;letter-spacing:.16em;color:var(--tx)}