@font-face { font-family: "ICM Serif"; src: url("fonts/ICMSerif-Regular.schematic.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "ICM Serif"; src: url("fonts/ICMSerif-Italic.schematic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("fonts/Metropolis-Regular.schematic.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("fonts/Metropolis-Bold.schematic.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
/* The parallel bars are the one glyph ICM Serif lacks. */
@font-face { font-family: "Parallel"; src: url("fonts/DejaVuSans.schematic.woff2") format("woff2"); unicode-range: U+2225; font-display: swap; }

:root {
  color-scheme: light dark;
  --page: light-dark(#f5f5f7, #000);
  --card: light-dark(#fff, #1c1c1e);
  --ink: light-dark(#1d1d1f, #f5f5f7);
  --secondary: light-dark(#6e6e73, #98989d);
  --tertiary: light-dark(#a1a1a6, #636366);
  --hairline: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.14));
  --fill: light-dark(rgba(120, 120, 128, 0.12), rgba(120, 120, 128, 0.28));
  --thumb: light-dark(#fff, #636366);
  --bar: light-dark(rgba(245, 245, 247, 0.72), rgba(0, 0, 0, 0.66));
  --sheet-bg: light-dark(rgba(255, 255, 255, 0.82), rgba(44, 44, 46, 0.78));
  --group: light-dark(rgba(120, 120, 128, 0.08), rgba(255, 255, 255, 0.07));
  --blue: light-dark(#0071e3, #2997ff);
  --blue-hover: light-dark(#0077ed, #47a6ff);
  --again: light-dark(#d70015, #ff6961);
  --hard: light-dark(#b25000, #ffb340);
  --good: light-dark(#248a3d, #30db5b);
  --easy: light-dark(#0071e3, #409cff);
  --on: #34c759;
  --shadow: light-dark(0 1px 2px rgba(0, 0, 0, 0.03), 0 0 0 transparent), light-dark(0 10px 30px rgba(0, 0, 0, 0.05), 0 0 0 transparent);
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --serif: "ICM Serif", "Parallel", "Liberation Serif", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Metropolis", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Metropolis", Arial, sans-serif;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 15px/1.45 var(--sans);
  letter-spacing: -0.01em;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
i { font-family: var(--serif); }
sub { font-size: 0.72em; line-height: 0; vertical-align: -0.28em; font-style: italic; font-family: var(--serif); letter-spacing: 0; }
kbd {
  font: 500 11px/1 var(--sans);
  background: var(--fill);
  border-radius: 5px;
  padding: 4px 6px;
  color: inherit;
  opacity: 0.75;
}
:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 55%, transparent); outline-offset: 2px; }

/* --- Navigation: a frosted bar --- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 52px;
  padding: 0 clamp(16px, 2.6vw, 32px);
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.brand { margin-right: auto; display: flex; align-items: center; gap: 9px; }
.brand img { width: 22px; height: 22px; border-radius: 5px; }
.brand h1 { margin: 0; font: 600 17px/1 var(--display); letter-spacing: -0.015em; }

.counts { display: flex; gap: 16px; margin: 0; }
.counts div { display: flex; align-items: baseline; gap: 5px; }
.counts dt { color: var(--secondary); font-size: 12px; }
.counts dd { margin: 0; font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.count-new dd { color: var(--easy); }
.count-learn dd { color: var(--hard); }
.count-due dd { color: var(--good); }

.tools { display: flex; align-items: center; gap: 8px; }
.tool {
  height: 30px;
  min-width: 30px;
  background: var(--fill);
  border: 0;
  border-radius: 980px;
  display: grid;
  place-items: center;
  transition: transform 0.2s var(--spring), background 0.2s;
}
.tool:hover { background: color-mix(in srgb, var(--fill) 100%, var(--ink) 6%); }
.tool:active { transform: scale(0.94); }
.tool svg { width: 15px; height: 15px; }
.tool-text { padding: 0 14px; font-size: 13px; font-weight: 500; }

/* --- Layout --- */
.desk {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: 14px;
  padding: 16px clamp(16px, 2.6vw, 32px) 8px;
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
}

/* --- The circuit --- */
.sheet {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--card);
  border-radius: 28px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 22px 28px 0;
}
.eyebrow { margin: 0 0 3px; color: var(--secondary); font-size: 12px; font-weight: 600; }
.sheet-head h2 { margin: 0; font: 600 24px/1.14 var(--display); letter-spacing: -0.018em; text-wrap: balance; }
.sheet-head h2.unknown { color: var(--tertiary); }
.meta { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 2px; }
.pill {
  background: var(--fill);
  border-radius: 980px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.pill:empty { display: none; }

.drawing {
  flex: 1;
  min-height: 240px;
  padding: 6px 24px 2px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.drawing svg { width: 100%; height: 100%; max-height: calc(100dvh - 290px); min-height: 240px; color: var(--ink); }
.lbl { font: italic 400 15.116px var(--serif); fill: currentColor; letter-spacing: 0; }
.empty { color: var(--secondary); max-width: 30ch; text-align: center; font: 500 19px/1.3 var(--display); }
.empty b { font-weight: 600; color: var(--ink); }

.wire { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.7s var(--spring) forwards; }
.sym, .lbl, .drawing svg > circle { animation: settle 0.5s 0.1s ease-out both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes settle { from { opacity: 0; } to { opacity: 1; } }

.params {
  list-style: none;
  margin: 0;
  padding: 6px 24px 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.params li { background: var(--group); border-radius: 980px; padding: 3px 11px; white-space: nowrap; }
.params i { font-size: 15px; }
.params .eq { color: var(--tertiary); margin: 0 0.3em; }

/* --- Answers --- */
.panel { display: flex; flex-direction: column; min-height: 0; }
.tiles { flex: 1; display: grid; grid-auto-rows: minmax(78px, 1fr); gap: 10px; }

.tile {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  grid-template-areas: "sym cap ans";
  align-items: center;
  column-gap: 8px;
  width: 100%;
  padding: 12px 22px;
  background: var(--card);
  border: 0;
  border-radius: 20px;
  box-shadow: var(--shadow);
  text-align: left;
  transition: transform 0.35s var(--spring);
}
.tile:not(.open):hover { transform: scale(1.012); }
.tile:not(.open):active { transform: scale(0.985); }
.tile:not(.open):hover .hidden-mark { background: var(--blue); color: #fff; }
.tile.open { cursor: default; grid-template-areas: "sym ans ans"; }
.tile.open .caption { display: none; }

.symbol { grid-area: sym; font: 400 30px/1 var(--serif); letter-spacing: 0; }
.caption { grid-area: cap; color: var(--secondary); font-size: 13px; }
.answer { grid-area: ans; min-width: 0; }

.hidden-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fill);
  color: var(--secondary);
  font: 400 20px/1 var(--sans);
  padding-bottom: 2px;
  transition: background 0.2s, color 0.2s;
}

.tile.open .answer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "formula value" "approx value";
  align-items: center;
  column-gap: 16px;
  animation: focus-in 0.5s var(--spring) both;
}
@keyframes focus-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(4px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

.value {
  grid-area: value;
  grid-column: 2;
  grid-row: 1 / -1;
  font: 600 clamp(19px, 1.7vw, 25px)/1.1 var(--display);
  letter-spacing: -0.022em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.formula { grid-area: formula; font: 400 clamp(18px, 1.45vw, 21px)/1.3 var(--serif); letter-spacing: 0; }
.approx { grid-area: approx; font: 400 clamp(14px, 1.1vw, 16px)/1.3 var(--serif); letter-spacing: 0; color: var(--secondary); margin-top: 3px; }
.approx-sign { margin-right: 0.45em; }
.term, .group { display: inline-block; }
.bin { white-space: pre; }
.bin.par { font-family: "Parallel", var(--serif); font-size: 0.82em; }
.thin { display: inline-block; width: 0.12em; }
.paren { font-size: 1.12em; }
.frac {
  display: inline-grid;
  vertical-align: middle;
  margin: 0 0.18em;
  font-size: 0.9em;
  line-height: 1.22;
}
.frac > span { display: block; text-align: center; padding: 0 0.3em; }
.frac > span:first-child { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.frac > span:last-child { padding-top: 1px; }

.insight {
  margin: 12px 6px 10px;
  min-height: 2.9em;
  font-size: 15px;
  line-height: 1.42;
  color: var(--secondary);
  text-wrap: pretty;
}

/* --- Actions --- */
.actions { min-height: 52px; }
.primary {
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 980px;
  padding: 10px 22px;
  font-weight: 500;
  transition: transform 0.25s var(--spring), background 0.2s;
}
.primary:hover { background: var(--blue-hover); }
.primary:active { transform: scale(0.98); }
.primary kbd { background: rgba(255, 255, 255, 0.22); opacity: 1; }
.reveal { width: 100%; height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; }

.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grade {
  --tone: var(--good);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label key" "delay key";
  align-items: center;
  height: 52px;
  padding: 0 14px 0 18px;
  text-align: left;
  background: var(--tint);
  border: 0;
  border-radius: 16px;
  color: var(--tone);
  font-weight: 600;
  line-height: 1.2;
  animation: focus-in 0.4s var(--spring) both;
  transition: transform 0.25s var(--spring), background 0.2s;
}
.grade .delay { grid-area: delay; font-weight: 400; font-size: 12px; opacity: 0.85; }
.grade kbd { grid-area: key; background: var(--tint); }
.grade:hover { background: color-mix(in srgb, var(--tint) 100%, var(--tone) 10%); }
.grade:active { transform: scale(0.97); }
/* Tints come from the vivid system colors; the text uses their darker, legible variants. */
.grade-again { --tone: var(--again); --tint: rgba(255, 59, 48, 0.12); }
.grade-hard { --tone: var(--hard); --tint: rgba(255, 149, 0, 0.14); }
.grade-good { --tone: var(--good); --tint: rgba(52, 199, 89, 0.14); }
.grade-easy { --tone: var(--easy); --tint: rgba(0, 122, 255, 0.11); }

.practice-note { margin: 8px 0 0; color: var(--secondary); font-size: 12.5px; text-align: center; }
.conventions { margin: 0; padding: 10px 6px 0; color: var(--secondary); font-size: 12px; line-height: 1.45; }
.conventions i { font-size: 1.12em; }

.colophon {
  padding: 8px clamp(16px, 2.6vw, 32px) 14px;
  color: var(--tertiary);
  font-size: 11px;
  text-align: center;
}
.colophon a { color: var(--secondary); }

/* --- Deck: an iOS settings sheet --- */
.deck {
  width: min(500px, calc(100vw - 24px));
  max-height: 92dvh;
  background: var(--sheet-bg);
  color: var(--ink);
  border: 0;
  border-radius: 26px;
  padding: 22px 22px 18px;
  -webkit-backdrop-filter: saturate(180%) blur(40px);
  backdrop-filter: saturate(180%) blur(40px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28), 0 0 0 0.5px var(--hairline);
}
.deck[open] { animation: sheet-in 0.45s var(--spring) both; }
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.deck::backdrop {
  background: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.deck h2 { margin: 0 0 12px; font: 700 26px/1.1 var(--display); letter-spacing: -0.02em; outline: 0; }
.deck fieldset { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.deck legend { padding: 0 2px 5px; color: var(--secondary); font-size: 12px; font-weight: 500; }

.counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; column-gap: 12px; }

.segs { display: flex; gap: 2px; padding: 2px; background: var(--fill); border-radius: 10px; }
.seg { flex: 1; cursor: pointer; position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block;
  padding: 5px 0;
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background 0.2s, box-shadow 0.2s;
}
.seg input:checked + span {
  background: var(--thumb);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
}
.seg input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--blue) 55%, transparent); }

.opts { background: var(--group); border-radius: 12px; overflow: hidden; }
.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 6px 12px 6px 14px;
  cursor: pointer;
  border-top: 0.5px solid var(--hairline);
}
.opt:first-child { border-top: 0; }
.opt > span { flex: 1; font-size: 14px; }
.opt small { font: 400 13.5px var(--serif); letter-spacing: 0; color: var(--secondary); }
/* A switch, from a plain checkbox. */
.opt input {
  order: 3;
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 42px;
  height: 25px;
  margin: 0;
  border-radius: 13px;
  background: var(--fill);
  cursor: pointer;
  transition: background 0.25s;
}
.opt input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s var(--spring);
}
.opt input:checked { background: var(--on); }
.opt input:checked::after { transform: translateX(17px); }

.deck-size { margin: 2px 2px 12px; color: var(--secondary); font-size: 13px; }
.deck-foot { display: flex; justify-content: space-between; align-items: center; }
.quiet { background: none; border: 0; padding: 6px 2px; color: var(--again); font-size: 14px; }
.quiet:hover { opacity: 0.75; }

/* --- Cascades: wide circuits get the full width, with the answers underneath --- */
.desk.wide { grid-template-columns: minmax(0, 1fr); }
.wide .drawing { min-height: 0; }
.wide .drawing svg { max-height: 42dvh; min-height: 260px; transition: max-height 0.4s var(--spring); }
/* Once answered, the circuit gives up height so the stage-by-stage view fits alongside it. */
.wide.revealed .drawing svg { max-height: 27dvh; min-height: 190px; }
.wide .tiles { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(72px, auto); }
.wide .insight { min-height: 0; }
.wide .actions {
  position: sticky;
  bottom: 8px;
  z-index: 1;
  padding: 6px;
  margin: 0 -6px;
  border-radius: 22px;
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.breakdown:empty { display: none; }
.breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.stage {
  padding: 16px 20px 18px;
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow);
  min-width: 0;
  animation: focus-in 0.5s var(--spring) both;
}
.stage h3 { margin: 0 0 8px; font: 600 13px/1.3 var(--sans); }
.stage h3 small { display: block; font-size: 12px; font-weight: 400; color: var(--secondary); }
.stage-gain { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; }
.stage-gain .symbol { font-size: 22px; }
.stage-gain .value { font-size: 19px; }
.stage .formula { display: block; font-size: 18px; }
.stage .approx { display: block; }

/* --- Narrow screens --- */
@media (max-width: 960px) {
  .desk { grid-template-columns: minmax(0, 1fr); }
  .drawing svg { max-height: 58vh; }
  .conventions { margin-top: 2px; }
  .wide .tiles { grid-template-columns: minmax(0, 1fr); }
  .wide .drawing { overflow-x: auto; place-items: center start; }
  .wide .drawing svg { min-width: calc((var(--stages) - 1) * 230px); }
}
@media (max-width: 620px) {
  .masthead { gap: 12px; }
  .brand h1 { font-size: 16px; }
  .brand img { display: none; }
  .counts { gap: 9px; }
  .counts dt { font-size: 0; }
  .counts dt::first-letter { font-size: 11px; }
  .sheet { border-radius: 24px; }
  .sheet-head { padding: 18px 20px 0; }
  .sheet-head h2 { font-size: 21px; }
  .params { padding: 6px 16px 18px; }
  .tile { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 12px 16px; }
  .symbol { font-size: 25px; }
  .grades { grid-template-columns: repeat(2, 1fr); }
  .formula { font-size: 17px; }
  .wide .actions { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; margin: 0; padding: 0; }
  kbd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition: none !important; }
}