/* Grade's site: black, its white icon and the app's grade bands as the only colour. No third-party requests. */
:root {
  --ink: #000; --paper: #fff; --muted: #98989f; --line: #2c2c2e; --link: #4da3ff;
  --fail: #ff453a; --pass: #e0a100; --good: #30d158; --great: #bf5af2;
  --rounded: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--paper); font: 1.0625rem/1.55 var(--text); overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-underline-offset: .15em; }
a:focus-visible, input:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 6px; }
.brand { position: fixed; z-index: 10; top: 22px; left: 28px; display: inline-flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; font: 700 1.125rem var(--rounded); }
.brand img { width: 2rem; height: 2rem; border-radius: .5rem; }
h1, h2, h3 { font-family: var(--rounded); letter-spacing: -.02em; line-height: 1.04; margin: 0; }
h1 { font-size: clamp(2.6rem, 6.2vw, 6rem); font-weight: 800; }
h2 { font-size: clamp(2.1rem, 3.8vw, 3.6rem); font-weight: 800; }
h3 { font-size: clamp(1.9rem, 3vw, 3rem); font-weight: 800; margin-top: 1.1rem; }
h2 + p, h3 + p { margin-top: .8rem; }
.beat p { color: var(--muted); font-size: 1.2rem; line-height: 1.45; margin: .8rem 0 0; max-width: 34rem; }
.beat .say { color: var(--paper); font: 700 clamp(1.7rem, 2.8vw, 2.7rem)/1.14 var(--rounded); letter-spacing: -.015em; }
.beat a { display: inline-block; margin-top: 1rem; }
.store { display: inline-block; margin-top: 1.5rem; padding: .7rem 1.2rem; border-radius: 1.5rem; background: var(--paper); color: var(--ink); font-weight: 600; font-size: 1rem; }
.slider { margin-top: 1.1rem; max-width: 26rem; }
.slider label { display: flex; justify-content: space-between; font-size: 1rem; color: var(--paper); }
.slider output { font-weight: 700; font-variant-numeric: tabular-nums; }
#labs { display: block; width: 100%; height: 28px; margin-top: 6px; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
#labs::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: var(--line); }
#labs::-moz-range-track { height: 3px; border-radius: 2px; background: var(--line); }
#labs::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10.5px; border-radius: 50%; background: var(--paper); border: 0; }
#labs::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--paper); border: 0; }
.answer { display: flex; align-items: center; gap: 1rem; margin-top: .6rem; max-width: 30rem; }
.answer .grade { font: 800 clamp(3rem, 6vw, 5rem)/1 var(--rounded); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.answer p { margin: 0; font-size: 1rem; }
.closing { text-align: center; }
footer { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1.4rem; margin-top: 1.6rem; color: var(--muted); font-size: .95rem; }
footer a { margin: 0; }

/* Without script the page is the column it always was. */
.beat { max-width: 40rem; margin: 0 auto; padding: 2.5rem 1.25rem; }
main { padding-top: 4rem; }
#stage, .track { display: none; }

.js main { padding: 0; }
.js #stage { display: block; position: fixed; inset: 0; overflow: clip; perspective: 1500px; pointer-events: none; z-index: 1; }
.js .track { display: block; height: 1320svh; }
.js .beat { position: fixed; z-index: 3; left: 56px; bottom: 56px; width: 38vw; max-width: 38rem; min-width: 340px; margin: 0; padding: 0; opacity: 0; visibility: hidden; }
.js .beat.on { visibility: visible; }
.js .beat.hero { width: 52vw; max-width: 56rem; bottom: 12svh; }
.js .beat.closing { left: 50%; bottom: 14svh; width: min(90vw, 36rem); margin-left: calc(min(90vw, 36rem) / -2); }
#mark { position: absolute; left: 0; top: 0; width: 256px; height: 256px; margin: -128px 0 0 -128px; }
#mark path { fill: none; stroke-width: 32; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 220; animation: draw 1.1s .25s cubic-bezier(.65,0,.35,1) both; }
@keyframes draw { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
.mount { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.scrim { position: fixed; z-index: 2; left: 0; right: 0; bottom: 0; height: 42svh; background: linear-gradient(transparent, #000 32%); pointer-events: none; opacity: 0; display: none; }
@media (max-width: 760px) {
  .brand { left: 20px; top: 16px; }
  .js .beat, .js .beat.hero { left: 22px; right: 22px; bottom: 26px; width: auto; min-width: 0; }
  .js .beat.closing { left: 22px; width: auto; margin-left: 0; bottom: 24svh; }
  .scrim { display: block; }
  .beat p { font-size: 1rem; margin-top: .5rem; }
  .only-wide { display: none; }
  h1 { font-size: 2.7rem; }
  h2 { font-size: 1.9rem; }
  h3 { font-size: 1.75rem; }
  .beat .say { font-size: 1.35rem; }
  .answer { margin-top: 0; }
  .answer .grade { font-size: 2.6rem; }
  .answer p { font-size: .9rem; }
  .slider { margin-top: .5rem; }
  .store { margin-top: .9rem; }
}
@media (prefers-reduced-motion: reduce) { #mark path { animation: none; } }

/* ---- The app, as its SwiftUI source draws it ---- */
  .phone { position: absolute; width: 390px; height: 844px; left: -195px; top: -422px; font-family: -apple-system, "SF Pro Text", Inter, sans-serif; color: #000; -webkit-font-smoothing: antialiased; }
  .phone-in { position: absolute; inset: 0; border-radius: 56px; overflow: hidden; background: #f2f2f7; box-shadow: 0 0 0 10px #17171a, 0 0 0 11.5px #3f3f43; }
  .splash { position: absolute; inset: 0; background: #fff; z-index: 40; }
  .island { position: absolute; z-index: 45; top: 11px; left: 50%; width: 118px; height: 34px; margin-left: -59px; border-radius: 20px; background: #000; }
  .status { position: absolute; z-index: 44; top: 18px; left: 34px; right: 30px; display: flex; justify-content: space-between; font: 600 16px -apple-system, "SF Pro Text", Inter, sans-serif; color: #000; }
  .status svg { width: 62px; height: 14px; margin-top: 2px; }
  .scr { position: absolute; inset: 0; padding: 62px 16px 0; background: #f2f2f7; overflow: hidden; }
  .rnd { font-family: ui-rounded, "SF Pro Rounded", -apple-system, Inter, sans-serif; }
  .topbtns { position: absolute; top: 60px; right: 16px; display: flex; gap: 8px; }
  .gbtn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.82); box-shadow: 0 1px 6px rgba(0,0,0,.09), inset 0 0 0 .5px rgba(0,0,0,.05); display: grid; place-items: center; color: #1c1c1e; font-size: 20px; line-height: 1; }
  .gbtn svg { width: 20px; height: 20px; }
  .h-year { font-size: 32px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px; }
  .h-term { font-size: 19px; font-weight: 600; color: rgba(60,60,67,.6); margin-top: 1px; }
  .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
  .tile { position: relative; height: 156px; padding: 16px; border-radius: 22px; background: #fff; display: flex; flex-direction: column; justify-content: space-between; }
  .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
  .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
  .tname { font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
  .ring { position: absolute; top: 15px; right: 15px; width: 28px; height: 28px; transform: rotate(-90deg); }
  .ring circle { fill: none; stroke-width: 4; stroke: rgba(116,116,128,.18); }
  .ring .on { stroke: #007aff; stroke-linecap: round; }
  .tabbar { position: absolute; left: 22px; right: 22px; bottom: 26px; height: 62px; border-radius: 31px; background: rgba(255,255,255,.86); box-shadow: 0 6px 24px rgba(0,0,0,.1), inset 0 0 0 .5px rgba(0,0,0,.05); display: grid; grid-template-columns: repeat(3,1fr); padding: 4px; }
  .tabbar div { display: grid; place-items: center; align-content: center; gap: 2px; font-size: 10.5px; font-weight: 500; color: #1c1c1e; border-radius: 27px; }
  .tabbar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar .sel { color: #007aff; background: rgba(120,120,128,.13); }
  /* subject */
  .sub { background: #f2f2f7; }
  .navrow { display: flex; justify-content: space-between; }
  .navrow .r { display: flex; gap: 8px; }
  .s-name { font-size: 30px; font-weight: 700; margin: 12px 2px 12px; line-height: 1.08; letter-spacing: -.01em; }
  .seg { display: grid; grid-template-columns: 1fr 1fr; height: 36px; padding: 3px; border-radius: 18px; background: rgba(120,120,128,.14); font-size: 14px; font-weight: 500; margin-bottom: 12px; }
  .seg div { display: grid; place-items: center; border-radius: 15px; }
  .seg .sel { background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.1); font-weight: 600; }
  .card { background: #fff; border-radius: 22px; padding: 18px; margin-bottom: 12px; }
  .gbig { display: flex; align-items: center; }
  .gnum { font-size: 52px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
  .gof { font-size: 20px; color: rgba(60,60,67,.6); margin-left: 5px; align-self: flex-end; padding-bottom: 7px; }
  .pill { margin-left: auto; padding: 5px 10px; font-size: 13px; font-weight: 600; color: #007aff; background: rgba(0,122,255,.12); border-radius: 14px; }
  .pill.ok { color: #248a3d; background: rgba(52,199,89,.15); }
  .chev { margin-left: 8px; color: rgba(60,60,67,.3); width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .bar { position: relative; height: 6px; margin: 17px 0 3px; border-radius: 3px; background: rgba(116,116,128,.16); }
  .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #007aff; }
  .bar .b { opacity: .25; }
  .bar u { position: absolute; top: -3px; width: 2px; height: 12px; left: 50%; margin-left: -1px; background: rgba(0,0,0,.6); }
  .stats { display: flex; gap: 36px; margin-top: 18px; }
  .stat small { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: rgba(60,60,67,.6); }
  .stat small i { width: 12px; height: 6px; border-radius: 3px; background: #007aff; }
  .stat small i.b { opacity: .25; }
  .stat b { display: block; font-size: 22px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
  .need-t { margin-top: 18px; padding: 7px 12px; border-radius: 8px; background: rgba(0,122,255,.12); color: #007aff; font-size: 15px; font-weight: 600; }
  .need-r { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font-size: 15px; }
  .need-r b { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .need-r em { font-style: normal; color: rgba(60,60,67,.6); font-size: 15px; margin-right: 4px; }
  .notes { font-size: 21px; font-weight: 700; margin: 8px 2px 8px; }
  .part { display: flex; align-items: center; }
  .part h4 { margin: 0; font-size: 17px; font-weight: 600; }
  .chip { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 7px; font-size: 12px; font-weight: 600; color: rgba(60,60,67,.65); background: rgba(120,120,128,.12); }
  .pval { margin-left: auto; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
  /* calendar */
  .c-title { font-size: 34px; font-weight: 700; }
  .month { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 20px; font-weight: 600; }
  .days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-top: 10px; row-gap: 6px; font-size: 19px; }
  .days small { font-size: 12px; font-weight: 600; color: rgba(60,60,67,.55); }
  .days span { position: relative; height: 40px; display: grid; place-items: center; }
  .days .out { color: rgba(60,60,67,.25); }
  .days .today { color: #007aff; font-weight: 600; }
  .days span i { position: absolute; bottom: 2px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; }
  .up { font-size: 21px; font-weight: 700; margin: 12px 0 8px; }
  .d-row { display: flex; align-items: center; gap: 12px; padding: 10px; background: #fff; border-radius: 16px; margin-bottom: 8px; }
  .d-row .ic { flex: none; border-radius: 12px; }
  .d-row strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; }
  .d-row span { font-size: 14px; color: rgba(60,60,67,.6); }
  /* record */
  .r-stats { display: grid; grid-template-columns: repeat(3,1fr); text-align: center; margin-top: 14px; padding: 15px 4px; background: #fff; border-radius: 20px; }
  .r-stats b { display: block; font-size: 24px; font-weight: 600; }
  .r-stats small { font-size: 12px; color: rgba(60,60,67,.6); }
  .r-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 20px; font-weight: 700; margin: 16px 2px 8px; }
  .r-h small { font-size: 14px; font-weight: 500; color: rgba(60,60,67,.6); }
  .r-card { background: #fff; border-radius: 18px; padding: 4px 14px; }
  .r-card p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 0; font-size: 15.5px; border-bottom: .5px solid rgba(60,60,67,.14); }
  .r-card p:last-child { border: 0; }
  .r-card b { font-weight: 600; font-variant-numeric: tabular-nums; }
  /* watch */
  .watch { position: absolute; width: 176px; height: 214px; left: -88px; top: -107px; border-radius: 50px; background: #000; box-shadow: 0 0 0 8px #17171a, 0 0 0 9.5px #3f3f43; color: #fff; padding: 24px 15px; font-family: -apple-system, "SF Pro Text", Inter, sans-serif; }
  .watch .w-name { font-size: 15px; font-weight: 600; line-height: 1.15; }
  .watch .w-num { font-size: 46px; font-weight: 700; margin-top: 12px; line-height: 1; font-variant-numeric: tabular-nums; }
  .watch .w-of { font-size: 15px; color: rgba(235,235,245,.6); margin-left: 3px; }
  .watch .bar { background: rgba(120,120,128,.4); margin-top: 14px; }
  .tab { cursor: pointer; outline: none; }
  .tab rect { fill: rgba(237,235,230,.04); stroke: rgba(237,235,230,.28); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill .2s ease; }
  .tab text { fill: var(--ash); text-anchor: middle; dominant-baseline: central; transition: fill .2s ease; }
  .tab:hover rect { fill: rgba(237,235,230,.12); }
  .tab:focus-visible rect { stroke: var(--signal); }
  .tab.on rect { fill: var(--bone); stroke: var(--bone); }
  .tab.on text { fill: #000; }
  .glass { fill: rgba(10,10,9,.84); stroke: rgba(237,235,230,.24); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .tt { white-space: pre; fill: rgba(237,235,230,.82); font-family: var(--mono) !important; font-weight: 500; }
  .tt.dim { fill: var(--ash); }
  .tt.sig { fill: var(--signal); }

.c-indigo { background: linear-gradient(#5e5ce6,#4240c8); } .c-orange { background: linear-gradient(#ff9f0a,#f07800); } .c-teal { background: linear-gradient(#30b0c7,#158da3); } .c-pink { background: linear-gradient(#ff375f,#d9163f); } .c-blue { background: linear-gradient(#007aff,#0058cc); } .d-pink { background: #ff375f; } .d-blue { background: #007aff; } .d-orange { background: #ff9f0a; } .d-indigo { background: #5e5ce6; }
.b-fail { color: #ff3b30; } .b-pass { color: #b98900; } .b-good { color: #248a3d; } .b-great { color: #8944ab; }
.scr { will-change: transform; }
.dim { position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.14); }
.popup { position: absolute; z-index: 21; left: 12px; right: 12px; top: 58px; padding: 18px; border-radius: 26px; background: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.2); }
.popup .ph { display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 600; }
.popup .ph span { color: #007aff; font-weight: 600; }
.popup .pv { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #f2f2f7; box-shadow: inset 0 0 0 2px #007aff; }
.popup .pv b { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.popup .pv small { color: rgba(60,60,67,.6); font-size: 15px; }
.pill.bad { color: #d70015; background: rgba(255,59,48,.14); }
.bar i.ok { background: #34c759; } .bar i.ko { background: #ff3b30; }
.verdict { margin-top: 14px; padding: 12px; border-radius: 12px; font-size: 15px; line-height: 1.3; }
.verdict.ok { color: #248a3d; background: rgba(52,199,89,.12); } .verdict.ko { color: #d70015; background: rgba(255,59,48,.1); }
.kept { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: #007aff; }
.seg { position: relative; }
.seg .thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 15px; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.1); }
.seg div { position: relative; }
.seg .sel { background: none; box-shadow: none; }
.e-title { font-size: 17px; font-weight: 600; text-align: center; margin-top: 12px; }
.e-lab { font-size: 13px; color: rgba(60,60,67,.6); margin: 18px 4px 6px; }
.formula { padding: 16px 14px; border-radius: 16px; background: #fff; font: 500 19px/1.4 ui-monospace, "SF Mono", Menlo, monospace; min-height: 84px; }
.formula u { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: #007aff; text-decoration: none; }
.vars { background: #fff; border-radius: 16px; padding: 2px 14px; }
.vars p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 0; font-size: 15px; border-bottom: .5px solid rgba(60,60,67,.14); color: #000; }
.vars p:last-child { border: 0; }
.vars b { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: rgba(0,122,255,.12); color: #007aff; font: 600 15px ui-monospace, Menlo, monospace; }
.vars em { margin-left: auto; flex: none; font-style: normal; font-size: 13px; color: rgba(60,60,67,.6); }
.days .hot { font-weight: 600; color: #fff; }
.days .hot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: #ff375f; z-index: -1; }
.days { isolation: isolate; }
.r-card p { transition: none; }

.seg.two { position: relative; } .seg .thumb-r { left: 50%; }
.seg.two .fsel { font-weight: 600; }
.seg.two div { z-index: 1; }
.seg.two .thumb { z-index: 0; }
.sub .seg div { z-index: 1; }
.watch .bar { overflow: visible; }
@media (max-width: 760px) and (max-height: 700px) {
  .js .beat[data-from="3"] h2 { display: none; }
  .js .beat[data-from="3"] h3 { margin-top: 0; }
}