/* Secondary surfaces share the instrument palette, while retaining their workflows. */
:root { --bad: var(--warn); --radius: var(--radius-control); }
html, body { background: var(--void); color: var(--ink); }
body { font-family: var(--sans); font-size: 16px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
::selection { color: var(--on-signal); background: var(--signal-fill); }
[hidden] { display: none !important; }
.topbar, .top { border-color: var(--line); background: var(--void); }
.topbar .brand-en { font-size: 12px; letter-spacing: .08em; }
.mast .kicker, .note .tag { font-size: 12px; letter-spacing: .06em; }
.note { background: var(--panel); border-color: var(--line); border-left-color: var(--signal); box-shadow: none; border-radius: var(--radius-surface); }
.note p, .note li { font-size: 14px; }
.stat, .panel, .card, .box, .callout, .exercise, .result { background: var(--panel); color: var(--ink); border-color: var(--line); box-shadow: none; border-radius: var(--radius-surface); }
:root[data-theme="dark"] .callout { background: var(--panel); }
:root[data-theme="dark"] .legend i { background: linear-gradient(90deg,var(--panel),var(--signal)); }
.stat b { font-family: var(--mono); }
.btn { border-radius: var(--radius-surface); min-height: 44px; }
.btn:not(.ghost), .btn.primary { background: var(--signal-fill); color: var(--on-signal); border-color: var(--signal-fill); }
.btn:not(.ghost):hover { background: var(--signal-hover); color: var(--on-signal); }
button, a, input, select { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}