/* Peano — shared preview stylesheet.
   Loaded after tokens.css in every preview. Every colour, step, radius,
   duration and curve below is a token; nothing here invents a value.
   Prefix: p-   Default theme: ink (dark). */

*, *::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;
}

/* ---------- scaffolding ----------------------------------------------- */
.p-frame  { background: var(--ground); color: var(--ink); }
.p-pad    { padding: var(--space-8); }
.p-pad-s  { padding: var(--space-6); }
.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; border-top: 1px solid var(--border); margin: 0; }
.p-cap    { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; 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-mono); }
.p-disp   { font-family: var(--font-display); }
.p-muted  { color: var(--ink-muted); }
.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-spec   { display: flex; flex-direction: column; gap: var(--space-2); }
.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); }

/* ---------- buttons: Modal pills -------------------------------------- */
.p-btn {
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500;
  letter-spacing: -0.026em;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  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--primary { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); font-weight: 500; }
.p-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: var(--shadow-glow); }
.p-btn--outline { border-color: var(--border-strong); color: var(--ink); }
.p-btn--outline:hover { border-color: var(--ink); }
.p-btn--quiet   { color: var(--ink-muted); padding-left: var(--space-3); padding-right: var(--space-3); }
.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 { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.p-btn--sm { font-size: 13px; line-height: 18px; padding: var(--space-1) var(--space-3); }
.p-btn--lg { font-size: 15px; line-height: 22px; padding: var(--space-3) var(--space-6); }
.p-btn--block { display: flex; width: 100%; justify-content: center; }
.p-btn--disabled, .p-btn[disabled] {
  background: var(--surface-raised); color: var(--ink-dim);
  border-color: var(--border); cursor: not-allowed; box-shadow: none;
}
.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.p-kbd {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 18px;
  color: var(--ink-dim); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 var(--space-1);
}

/* ---------- fields ----------------------------------------------------- */
.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: 14px; line-height: 20px; letter-spacing: -0.026em;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); width: 100%;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.p-input--mono { font-family: var(--font-mono); }
.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-input--disabled { background: var(--surface-raised); color: var(--ink-dim); border-color: var(--border); }
.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-check__b {
  width: 16px; height: 16px; flex: none; margin-top: 2px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--on-accent);
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.p-check__b--on { background: var(--accent-fill); border-color: var(--accent-fill); }
.p-check__b--radio { border-radius: var(--radius-pill); }
.p-check__b--radio.p-check__b--on { background: var(--surface); border: 5px solid var(--accent-fill); }

/* ---------- chips ------------------------------------------------------ */
.p-chip {
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); color: var(--ink-faint);
  transition: all var(--duration-fast) var(--ease-out);
}
.p-chip--pass    { color: var(--accent);  border-color: var(--accent);  background: var(--accent-wash); }
.p-chip--fail    { color: var(--danger);  border-color: var(--danger);  background: var(--danger-wash); }
.p-chip--running { color: var(--caution); border-color: var(--caution); background: var(--caution-wash); }
.p-chip--locked  { color: var(--ink-dim); border-color: var(--border); }
.p-chip--mentor  { color: var(--ink); border-color: var(--ink); }
.p-chip--solid   { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }

/* ---------- successor progress ---------------------------------------- */
.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-mono); 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 { height: 3px; background: var(--accent-fill); border-radius: var(--radius-pill); transform-origin: left; animation: p-fill var(--duration-slow) var(--ease-spring) 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-mono); 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); border-bottom: 2px solid var(--accent-fill); padding-bottom: 1px; }
.p-chain__a { color: var(--border-strong); }

/* lesson state markers */
.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--open { background: transparent; }
.p-mark--lock { background: var(--border); border-color: var(--border); }
.p-mark--fail { background: var(--danger); border-color: var(--danger); }

/* ---------- code ------------------------------------------------------- */
.p-code {
  background: var(--code-bg); color: var(--code-ink);
  font-family: var(--font-mono); font-size: 14px; line-height: 24px;
  border: 1px solid var(--border); 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); border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); 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: block; 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); font-style: italic; }
.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);
}

/* ---------- content blocks --------------------------------------------- */
.p-block + .p-block { margin-top: var(--space-10); }
.p-block__tag { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--space-3); }
.p-prose { max-width: var(--measure-prose); }
.p-prose p { font-size: 16px; line-height: 26px; 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: 16px; line-height: 26px; 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-axiom { border-left: 2px solid var(--accent-fill); padding-left: var(--space-5); max-width: var(--measure-prose); }
.p-axiom__l { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-2); }
.p-axiom p { font-size: 16px; line-height: 26px; color: var(--ink); margin: 0; }

.p-sb { display: flex; align-items: center; gap: var(--space-4); color: var(--ink-dim); }
.p-sb::before, .p-sb::after { content: ""; flex: 1 1 auto; border-top: 1px dashed var(--border-strong); }

/* quiz */
.p-quiz { max-width: var(--measure-prose); border: 1px solid var(--border); 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 var(--border); border-radius: var(--radius-md);
  font-size: 14px; line-height: 20px; color: var(--ink-muted);
  margin-bottom: var(--space-2); background: var(--ground); cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.p-opt:hover { border-color: var(--border-strong); }
.p-opt--sel   { border-color: var(--ink-dim); color: var(--ink); }
.p-opt--right { border-color: var(--accent); background: var(--accent-wash); color: var(--ink); }
.p-opt--wrong { border-color: var(--danger); background: var(--danger-wash); color: var(--ink); }
.p-opt__k { font-family: var(--font-mono); 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; } }

/* playground block */
.p-pg { border: 1px solid var(--border); 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);
  border-bottom: 1px solid var(--border); font-size: 13px; color: var(--ink-faint);
}
.p-pill {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 18px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  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: 12px; line-height: 16px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim);
  padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); 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-mono); font-size: 12.5px; line-height: 20px; border-bottom: 1px solid var(--border); animation: p-pop var(--duration-slow) var(--ease-spring) both; }
.p-test:last-child { border-bottom: 0; }
.p-test--pass { background: var(--accent-wash); }
.p-test--fail { background: var(--danger-wash); }
.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; background: var(--danger-wash); border-bottom: 1px solid var(--border); color: var(--ink-muted); }

/* interactive demo */
.p-demo { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.p-demo__s { padding: var(--space-6); border-bottom: 1px solid var(--border); background: var(--ground); }
.p-demo__c { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-4); font-size: 13px; color: var(--ink-faint); }
.p-slider { height: 3px; background: var(--border-strong); border-radius: var(--radius-pill); position: relative; flex: 1 1 auto; }
.p-slider__k { position: absolute; top: -4px; width: 11px; height: 11px; background: var(--accent-fill); border-radius: var(--radius-pill); }

/* ---------- app shell -------------------------------------------------- */
.p-app { display: flex; flex-direction: column; background: var(--ground); min-height: 100%; }
.p-top {
  height: var(--topbar); flex: none; display: flex; align-items: center; gap: var(--space-6);
  padding: 0 var(--space-5); margin: var(--space-3) var(--space-8) 0;
  background: var(--surface-float); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-overlay); font-size: 14px; color: var(--ink-muted);
}
.p-top--flat { margin: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--border); padding: 0 var(--space-8); }
.p-wm { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); display: inline-flex; align-items: baseline; gap: 1px; }
.p-wm i { font-style: normal; color: var(--accent); }
.p-ctx {
  display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 3px var(--space-3);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.p-ctx:hover { border-color: var(--ink); }
.p-av { width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--surface-raised); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--ink-muted); }
.p-body { display: flex; flex: 1 1 auto; min-height: 0; }
.p-rail { width: var(--rail); flex: none; border-right: 1px solid var(--border); padding: var(--space-6) 0; }
.p-rail--r { border-right: 0; border-left: 1px solid var(--border); width: var(--rail-narrow); }
.p-rail__h { padding: 0 var(--space-5) var(--space-3); }
.p-rail__i {
  display: flex; align-items: center; gap: var(--space-3); margin: 0 var(--space-3);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  font-size: 14px; line-height: 20px; color: var(--ink-faint);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.p-rail__i:hover { background: var(--surface); color: var(--ink-muted); }
.p-rail__i--on { color: var(--ink); background: var(--surface-raised); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent-fill); }
.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-col--prose { max-width: var(--measure-prose); }

.p-list { }
.p-li {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border);
  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-mono); font-size: 12.5px; color: var(--ink-dim); width: 26px; flex: none; }

.p-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-6); }
.p-card--mentor { box-shadow: inset 2px 0 0 var(--ink); }

.p-sec { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-4); }
.p-sec__l { flex: 1 1 auto; border-top: 1px solid var(--border); }

.p-empty { border: 1px dashed var(--border-strong); 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); }

/* ---------- slides ------------------------------------------------------ */
.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-mono); 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); }

/* ---------- exam -------------------------------------------------------- */
.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-mono); font-size: 12.5px; border: 1px solid var(--border-strong); 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); border-color: var(--ink-dim); }
.p-nc--now  { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
.p-nc--flag { border-color: var(--caution); color: var(--caution); }
.p-timer { font-family: var(--font-mono); font-size: 14px; letter-spacing: .02em; }

/* ---------- mentor editor ----------------------------------------------- */
.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: background var(--duration-fast) var(--ease-out); }
.p-bl:hover { background: var(--surface); }
.p-bl--on { background: var(--surface-raised); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent-fill); }
.p-bl__g { color: var(--ink-dim); font-family: var(--font-mono); flex: none; cursor: grab; }
.p-bl__k { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; 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; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--ink-faint); }
.p-banner--caution { background: var(--caution-wash); color: var(--caution); border-bottom-color: var(--caution); }
.p-menu { background: var(--surface-float); border: 1px solid var(--border); 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-mono); color: var(--accent); flex: none; width: 16px; }

/* ---------- mobile ------------------------------------------------------ */
.p-phone { width: 390px; background: var(--ground); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; }
.p-phone .p-prose p { line-height: 27px; }

/* ---------- htmx swap annotation (documentation only) ------------------- */
.p-swap { outline: 1px dashed var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); }
.p-swap-t { font-family: var(--font-mono); font-size: 11px; color: var(--on-accent); background: var(--accent-fill); padding: 1px 5px; border-radius: var(--radius-sm); }

/* ---------- motion respect ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}