*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "cv05" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
}
.p-stack { display: flex; flex-direction: column; gap: var(--space-8); }
.p-stack-s { display: flex; flex-direction: column; gap: var(--space-4); }
.p-row { display: flex; align-items: center; gap: var(--space-3); }
.p-row-w { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.p-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.p-grow { flex: 1 1 auto; min-width: 0; }
.p-hr { border: 0; margin: 0; height: 0; }
.p-cap { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-faint); }
.p-cap--a { color: var(--accent); }
.p-note { font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.p-mono { font-family: var(--font-sans); }
.p-faint { color: var(--ink-faint); }
.p-dim { color: var(--ink-dim); }
.p-accent { color: var(--accent); }
.p-danger { color: var(--danger); }
.p-caution { color: var(--caution); }
.p-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.p-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.p-btn {
  --h: var(--control-md);
  --pad: var(--control-md-pad);
  --glyph: var(--control-md-glyph);
  font-family: var(--font-sans);
  font-size: var(--control-md-text);
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.026em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--h);
  padding: 0 var(--pad);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.p-btn--sm { --h: var(--control-sm); --pad: var(--control-sm-pad); --glyph: var(--control-sm-glyph); font-size: var(--control-sm-text); line-height: 18px; gap: 6px; }
.p-btn--lg { --h: var(--control-lg); --pad: var(--control-lg-pad); --glyph: var(--control-lg-glyph); font-size: var(--control-lg-text); line-height: 22px; }
.p-btn--primary { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
.p-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: var(--shadow-glow); }
.p-btn--outline { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.p-btn--outline:hover { background: color-mix(in srgb, var(--ink) 13%, transparent); }
.p-btn--quiet { color: var(--ink-muted); padding: 0 calc(var(--pad) * 0.75); }
.p-btn--quiet:hover { color: var(--ink); background: var(--surface-raised); }
.p-btn--danger { background: var(--danger); color: var(--on-danger); border-color: var(--danger); }
.p-btn--ghosted { color: var(--accent); background: var(--accent-wash); }
.p-btn--icon { width: var(--h); padding: 0; flex: none; font-size: var(--glyph); }
.p-btn--block { display: flex; width: 100%; justify-content: center; }
.p-btn[disabled] {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink-dim);
  border-color: transparent;
  cursor: not-allowed;
  box-shadow: none;
}
.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.p-kbd {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ink-dim);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
}
.p-field { display: flex; flex-direction: column; gap: var(--space-2); }
.p-label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.p-input {
  font-family: var(--font-sans);
  font-size: var(--control-md-text);
  line-height: 20px;
  letter-spacing: -0.026em;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  height: var(--control-md);
  padding: 0 var(--control-md-pad);
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-out);
}
textarea.p-input { height: auto; min-height: 88px; padding: 10px var(--control-md-pad); resize: vertical; }
.p-input--sm { height: var(--control-sm); padding: 0 var(--control-sm-pad); font-size: var(--control-sm-text); }
.p-input--mono { font-family: var(--font-sans); }
.p-input::placeholder { color: var(--ink-dim); }
.p-input:hover { border-color: var(--ink-dim); }
.p-input.is-focus { border-color: var(--accent); }
.p-input--error { border-color: var(--danger); }
.p-hint { font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.p-err {
  font-size: 13px;
  line-height: 18px;
  color: var(--danger);
  display: flex;
  gap: var(--space-2);
}
.p-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-muted);
}
.p-chip {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--surface-raised);
  color: var(--ink-faint);
  transition: all var(--duration-fast) var(--ease-out);
}
.p-chip--pass { color: var(--accent); background: var(--accent-wash); }
.p-chip--fail { color: var(--danger); background: var(--danger-wash); }
.p-chip--running { color: var(--caution); background: var(--caution-wash); }
.p-chip--mentor { color: var(--ink); }
.p-chip--solid { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.p-succ { display: inline-flex; align-items: center; gap: 4px; height: 12px; }
.p-succ__t {
  width: 3px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  transition: background var(--duration-base) var(--ease-out);
}
.p-succ__t--done { background: var(--accent); }
.p-succ__t--now { background: var(--accent-fill); height: 12px; width: 4px; box-shadow: var(--shadow-glow); }
.p-succ__t--lock { background: var(--border); }
.p-succ-l { font-family: var(--font-sans); font-size: 12.5px; line-height: 20px; color: var(--ink-faint); }
.p-succ-l b { color: var(--ink); font-weight: 400; }
.p-bar {
  height: 3px;
  background: var(--border);
  border-radius: var(--radius-pill);
  width: 100%;
  overflow: hidden;
}
.p-bar__f {
  display: block;
  height: 3px;
  background: var(--accent-fill);
  border-radius: var(--radius-pill);
  transform-origin: left;
  animation: p-fill var(--duration-slow) var(--ease-settle) both;
}
@keyframes p-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.p-chain {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 12.5px;
}
.p-chain__n { color: var(--ink-dim); }
.p-chain__n--done { color: var(--accent); }
.p-chain__n--now { color: var(--ink); font-weight: 500; }
.p-chain__a { color: var(--border-strong); }
.p-mark {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
}
.p-mark--done { background: var(--accent-fill); border-color: var(--accent-fill); }
.p-mark--now { background: var(--accent-fill); border-color: var(--accent-fill); box-shadow: var(--shadow-glow); }
.p-mark--lock { background: var(--border); border-color: var(--border); }
.p-mark--fail { background: var(--danger); border-color: var(--danger); }
.p-code {
  background: var(--code-bg);
  color: var(--code-ink);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 24px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.p-code__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 20px;
  color: var(--ink-faint);
}
.p-code__b { display: flex; }
.p-code__g {
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  color: var(--code-gutter);
  text-align: right;
  user-select: none;
  font-size: 12.5px;
  line-height: 24px;
  flex: none;
}
.p-code__g i { font-style: normal; display: block; }
.p-code__g i.on { color: var(--code-gutter-active); }
.p-code__l { padding: var(--space-3) var(--space-4) var(--space-3) 0; overflow-x: auto; flex: 1 1 auto; }
.p-code__l pre { margin: 0; font: inherit; white-space: pre; }
.p-code__l .hl {
  background: var(--code-line);
  display: inline-block;
  box-sizing: content-box;
  width: 100%;
  vertical-align: top;
  margin: 0 calc(var(--space-4) * -1);
  padding: 0 var(--space-4);
}
.k { color: var(--code-keyword); }
.m { color: var(--code-modifier); }
.t { color: var(--code-type); }
.f { color: var(--code-func); }
.v { color: var(--code-var); }
.s { color: var(--code-string); }
.n { color: var(--code-number); }
.c { color: var(--code-comment); }
.p-ic {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--surface-raised);
  color: var(--ink);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.p-block + .p-block { margin-top: var(--space-10); }
.p-prose { max-width: var(--measure-prose); }
.p-prose p {
  font-size: 17px;
  line-height: 28px;
  letter-spacing: -0.011em;
  margin: 0 0 var(--space-6);
  color: var(--ink-muted);
}
.p-prose p:last-child { margin-bottom: 0; }
.p-prose strong { color: var(--ink); font-weight: 600; }
.p-prose h2 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: var(--space-8) 0 var(--space-4);
}
.p-prose ul, .p-prose ol {
  font-size: 17px;
  line-height: 28px;
  color: var(--ink-muted);
  margin: 0 0 var(--space-6);
  padding-left: var(--space-6);
}
.p-prose li { margin-bottom: var(--space-2); }
.p-prose li::marker { color: var(--ink-dim); }
.p-prose a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.p-prose a:hover { border-bottom-color: var(--accent); }
.p-quiz {
  max-width: var(--measure-prose);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--surface);
}
.p-quiz__q { font-size: 16px; line-height: 26px; color: var(--ink); margin: 0 0 var(--space-4); }
.p-opt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.p-opt:hover { background: var(--surface-raised); }
.p-opt--sel { background: var(--surface-raised); color: var(--ink); }
.p-opt--right { background: var(--accent-wash); color: var(--ink); }
.p-opt--wrong { background: var(--danger-wash); color: var(--ink); }
.p-opt__k {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-dim);
  flex: none;
  width: 14px;
}
.p-fb {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-3);
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-muted);
  animation: p-rise var(--duration-base) var(--ease-out) both;
}
@keyframes p-rise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.p-pg { border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.p-pg--running { box-shadow: var(--shadow-glow); }
.p-pg__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  font-size: 13px;
  color: var(--ink-faint);
}
.p-pill {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  padding: 0 var(--space-2);
  color: var(--ink-muted);
}
.p-out {
  background: var(--code-bg);
  color: var(--code-ink);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 20px;
  padding: var(--space-3) var(--space-4);
}
.p-out__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--ink-dim);
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
}
.p-out__h--run { background: var(--caution-wash); color: var(--caution); }
.p-caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: var(--caution);
  vertical-align: -2px;
  animation: p-blink 1s steps(1) infinite;
}
@keyframes p-blink {
  50% { opacity: 0; }
}
.p-test {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 20px;
  animation: p-pop var(--duration-slow) var(--ease-settle) both;
}
.p-test__v { font-weight: 500; flex: none; width: 46px; }
.p-test--pass .p-test__v { color: var(--accent); }
.p-test--fail .p-test__v { color: var(--danger); }
.p-test__n { color: var(--ink); }
.p-test__d { color: var(--ink-dim); margin-left: auto; }
@keyframes p-pop {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.p-diff {
  padding: var(--space-2) var(--space-4) var(--space-3) calc(var(--space-4) + 46px + var(--space-3));
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 20px;
  color: var(--ink-muted);
}
.p-app { display: flex; flex-direction: column; background: var(--ground); min-height: 100%; }
.p-top {
  position: relative;
  z-index: 20;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--topbar);
  padding: 0 var(--gutter);
  background: var(--ground);
  font-size: 14px;
  color: var(--ink-muted);
  transition: background-color var(--duration-base) var(--ease-out);
}
.p-wm {
  font-family: var(--font-display);
  white-space: nowrap;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.38em;
}
.p-wm__mark { width: 1.1em; height: 1.1em; flex: none; }
.p-wm__mark path { fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; }
.p-wm__mark circle { fill: var(--accent); }
.p-wm__d { position: relative; }
.p-wm__d::before { content: ""; position: absolute; left: 51%; top: 0.2em; width: 0.155em; height: 0.155em; margin-left: -0.0775em; border-radius: 50%; background: var(--accent); }
.p-wm__d--j::before { left: 61%; }
.p-body { display: flex; flex: 1 1 auto; min-height: 0; }
.p-rail {
  --rail-hover: color-mix(in srgb, var(--ink) 4%, var(--ground));
  --rail-on: color-mix(in srgb, var(--ink) 8%, var(--ground));
  width: var(--rail);
  flex: none;
  padding: var(--space-6) 0;
}
.p-rail--r { width: var(--rail-narrow); }
.p-rail__h { padding: 0 var(--space-5) var(--space-3); }
.p-rail__i {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 var(--space-3) 2px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-faint);
  transition: color var(--duration-fast) var(--ease-out);
}
.p-rail__i:hover { color: var(--ink-muted); }
.p-rail__i:focus-visible, .p-bl:focus-visible { outline-offset: -2px; }
.p-rail__i--lock, .p-rail__i--lock:hover { color: var(--ink-dim); cursor: default; }
.p-rail__i--on, .p-rail__i--on:hover { color: var(--ink); font-weight: 500; }
.p-rail__g { flex: none; width: 16px; font-size: 12px; font-weight: 400; text-align: center; color: var(--ink-dim); }
.p-rail__i--done .p-rail__g, .p-rail__i--on .p-rail__g { color: var(--accent); }
.p-rail__pill {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--rail-on);
  view-transition-name: rail-pill;
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(rail-pill) { animation-duration: 250ms; animation-timing-function: var(--ease-out); mix-blend-mode: lighten; }
[data-theme="mint"]::view-transition-group(rail-pill) { mix-blend-mode: darken; }
::view-transition-old(rail-pill) { display: none; }
::view-transition-new(rail-pill) { height: 100%; animation: none; }
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
[data-glide] { position: relative; isolation: isolate; }
.p-glide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--radius-md);
  background: var(--rail-hover);
  opacity: 0;
  pointer-events: none;
  transition: transform 200ms var(--ease-out), width 200ms var(--ease-out), height 200ms var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.p-glide.is-on { opacity: 1; }
.p-glide.is-home { transition-delay: 0s, 0s, 0s, 200ms; }
.p-main { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.p-col { max-width: var(--measure-wide); margin: 0 auto; padding: var(--space-12) var(--space-8); }
.p-li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  color: var(--ink-faint);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-out);
}
.p-li:hover { background: var(--surface); }
.p-li__t { font-size: 15px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); }
.p-li--lock .p-li__t { color: var(--ink-dim); font-weight: 400; }
.p-li__n {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-dim);
  width: 26px;
  flex: none;
}
.p-card { border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-6); }
.p-sec { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-4); }
.p-sec__l { flex: 1 1 auto; }
.p-empty { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-12) var(--space-10); text-align: center; }
.p-empty__t {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.p-slide {
  background: var(--ground);
  color: var(--ink);
  padding: var(--space-20);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.p-slide__hud {
  position: absolute;
  left: var(--space-8);
  right: var(--space-8);
  bottom: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-dim);
}
.p-slide__r {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
}
.p-slide__r i { display: block; height: 2px; background: var(--accent-fill); }
.p-navgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.p-nc {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 12.5px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-faint);
  transition: all var(--duration-fast) var(--ease-out);
}
.p-nc--done { background: var(--surface-raised); color: var(--ink); }
.p-nc--now { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
.p-nc--flag { background: var(--caution-wash); color: var(--caution); }
.p-timer { font-family: var(--font-sans); font-size: 14px; letter-spacing: .02em; }
.p-bl {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 var(--space-3) 2px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--ink-faint);
  transition: color var(--duration-fast) var(--ease-out);
}
.p-bl:hover { color: var(--ink-muted); }
.p-bl--on, .p-bl--on:hover { background: var(--rail-on); color: var(--ink); }
.p-bl__g { color: var(--ink-dim); font-family: var(--font-sans); flex: none; cursor: grab; }
.p-bl__k {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-dim);
  flex: none;
  width: 88px;
}
.p-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-8);
  font-size: 13px;
  line-height: 18px;
  background: var(--surface);
  color: var(--ink-faint);
}
.p-banner--caution { background: var(--caution-wash); color: var(--caution); }
.p-menu {
  background: var(--surface-float);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-overlay);
  padding: var(--space-2);
  width: 300px;
}
.p-menu__i {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--ink-muted);
  transition: background var(--duration-fast) var(--ease-out);
}
.p-menu__i:hover { background: var(--surface-raised); color: var(--ink); }
.p-menu__g { font-family: var(--font-sans); color: var(--accent); flex: none; width: 16px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}