:root {
  --ink: #111111;
  --muted: #5B5850;
  --line: #D0CCC1;
  --line-strong: #86827A;
  --paper: #F7F5EF;
  --tint: #EFEDE4;
  --card: #FFFFFF;
  --field: #FFFFFF;
  --accent: #FFC400;
  --accent-ink: #111111;
  --accent-hover: #EDB600;
  --danger: #A3161F;
  --danger-tint: #FBEDEC;
  --mark: #FFE9A3;
  --mark-strong: #FFD866;
  --syn-s: #0B6B3A;
  --radius: 2px;
  --demo-ink: var(--ink);
  --demo-muted: var(--muted);
  --demo-line: var(--line);
  --demo-tint: var(--mark);
  --demo-tint-strong: var(--mark-strong);
  --demo-accent: var(--accent);
  --demo-faint: var(--tint);
  --demo-surface: var(--card);
  --demo-no: var(--danger);
}
.calm { --mute: var(--muted); }
.calm .site-header, .calm .site-footer { --ink: #111111; --paper: #F7F5EF; --mute: #46443F; --hair: rgba(17, 17, 17, 0.28); --shadow: 9px 9px 0 var(--ink); --shadow-s: 5px 5px 0 var(--ink); }

.calm ::selection { background: var(--accent); color: var(--accent-ink); }
.calm :where(main) :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.calm .skip { background: var(--card); color: var(--ink); border: 1px solid var(--ink); }
.calm .nav-toggle { background: none; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.45); }

.calm .display { font-size: clamp(44px, 6.4vw, 88px); line-height: 0.96; letter-spacing: 0.5px; margin: 0 0 20px; }
.calm .display.md { font-size: clamp(40px, 5.4vw, 68px); }
.calm .hl { display: inline; background: none; color: inherit; padding: 0; margin: 0; line-height: inherit; }
.calm .scene { font-size: clamp(34px, 4.6vw, 56px); line-height: 1; margin: 0 0 18px; }
.calm .kicker { display: block; background: none; color: var(--muted); padding: 0; margin: 0 0 14px; font: 700 12px/1.3 var(--mono); letter-spacing: 0.12em; }
.calm .lead { font-size: 19px; line-height: 1.55; max-width: 640px; margin: 0 0 24px; }
.calm .fine, .calm .mute, .calm .body, .calm .hint { color: var(--muted); }
.calm main p a, .calm main li a, .calm main dd a, .calm main .fine a, .calm main .notice a { color: var(--ink); text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); }
.calm main p a:hover, .calm main li a:hover, .calm main dd a:hover, .calm main .fine a:hover, .calm main .notice a:hover { background: none; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.calm .link-btn { color: var(--ink); font-weight: 400; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); }
.calm .link-btn:hover { background: none; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.calm :not(pre) > code { background: var(--tint); border-radius: var(--radius); }

.calm .band { background-color: transparent; background-image: none; color: var(--ink); }
.calm .band + .band { border-top: 1px solid var(--line); }
.calm .band-tint { background-color: var(--tint); }
.calm .band + .band-tint, .calm .band-tint + .band { border-top: 0; }
.calm .page-band { padding: 52px 0 6px; }
.calm .page-body { padding-top: 30px; }

.calm .win { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.calm .win-bar { min-height: 0; padding: 12px 20px; background: none; color: var(--muted); border-bottom: 1px solid var(--line); font: 400 12px/1.4 var(--mono); letter-spacing: 0.06em; }
.calm .win-bar h2, .calm .win-bar h3, .calm .win-bar .label { color: inherit; }
.calm .win-bar .dots { display: none; }
.calm .win-body { padding: 20px; }

.calm .btn { padding: 10px 18px; background: none; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: none; transition: background-color 0.12s ease, border-color 0.12s ease; }
.calm .btn:hover { background: var(--tint); color: var(--ink); border-color: var(--ink); }
.calm .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.calm .btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); border-color: var(--accent-hover); transform: none; box-shadow: none; }
.calm .btn-primary:active { transform: none; }
.calm .btn-small { padding: 6px 12px; border-width: 1px; }
.calm .btn:disabled { opacity: 0.5; }
.calm .btn:disabled:hover { background: none; border-color: var(--line-strong); }
.calm .btn-primary:disabled:hover { background: var(--accent); border-color: var(--accent); }

.calm .field { margin: 0 0 16px; }
.calm label.label { font: 400 12.5px/1.3 var(--mono); letter-spacing: 0.02em; text-transform: none; color: var(--muted); }
.calm .hint { font-size: 13.5px; line-height: 1.45; }
.calm input[type="text"], .calm input[type="email"], .calm textarea { background: var(--field); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.calm main input:focus-visible, .calm main textarea:focus-visible { outline: 2px solid transparent; outline-offset: 0; border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent); }
.calm ::placeholder { color: var(--muted); }
.calm .field-error { font: 600 13.5px/1.4 var(--sans); color: var(--danger); }
.calm input[aria-invalid="true"], .calm textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.calm main input[aria-invalid="true"]:focus-visible, .calm main textarea[aria-invalid="true"]:focus-visible { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 3px var(--accent); }

.calm .notice { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.calm .notice .label { background: none; color: var(--muted); padding: 0; margin: 0 0 6px; }
.calm .notice.error { background: var(--danger-tint); border-color: var(--danger); }
.calm .notice.error .label { background: none; color: var(--danger); }
.calm .st { background: none; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); font-weight: 400; }

.calm .ticks li { padding-left: 26px; margin: 9px 0; }
.calm .ticks li::before { content: ""; left: 3px; top: 0.5em; width: 10px; height: 5px; border-left: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); }

.calm .step { padding: 18px 0 0; border-top: 1px solid var(--line-strong); }
.calm .step .step-n { margin: 0 0 12px; font: 400 12px/1.3 var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.calm .step h3 { font: 700 27px/1.08 var(--display); letter-spacing: 0.3px; margin: 0 0 8px; }
.calm .step p { margin: 0; font-size: 16px; }

.calm .price-big { margin-top: 8px; color: var(--ink); font-size: clamp(88px, 12vw, 160px); }
.calm .price-unit { display: block; margin: 14px 0 0; font: 400 12.5px/1.4 var(--mono); color: var(--muted); }

.calm .code-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.calm .code-head { min-height: 40px; padding: 0 8px 0 14px; background: none; color: var(--muted); border-bottom: 1px solid var(--line); }
.calm .codegroup .code-head { padding-left: 6px; }
.calm .code-head .label { font-weight: 400; letter-spacing: 0.06em; color: var(--muted); }
.calm .code-head .label::before { content: none; }
.calm .tablist { gap: 2px; align-self: stretch; }
.calm .tab { margin-bottom: -1px; padding: 2px 8px; background: none; color: var(--muted); font-weight: 400; }
.calm .tab:hover { color: var(--ink); }
.calm .tab[aria-selected="true"] { padding-bottom: 0; background: none; color: var(--ink); border-bottom: 2px solid var(--ink); font-weight: 700; }
.calm main .tab:focus-visible { outline-offset: -2px; }
.calm .copy-btn { background: none; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius); font-weight: 400; }
.calm .copy-btn:hover { background: var(--tint); color: var(--ink); border-color: var(--line-strong); }
.calm pre.code { color: var(--ink); }
.calm .tok-k { font-weight: 400; }

.calm .cta-band { padding: 72px 0 88px; }
.calm .cta-block { padding: 56px; background: var(--tint); border-radius: var(--radius); }
.calm .cta-block .display { font-size: clamp(40px, 5.4vw, 72px); margin-bottom: 24px; }
.calm .cta-block .fine { margin: 0; }

.calm .invite-win { border-color: var(--line-strong); box-shadow: none; }
.calm .invite-more > summary { background: none; border: 1px solid var(--line-strong); border-radius: var(--radius); font-weight: 400; }
.calm .invite-more > summary:hover, .calm .invite-more[open] > summary { background: var(--tint); color: var(--ink); }
.calm .invite-more-body { background: var(--card); border: 1px solid var(--line); border-top: 0; }
.calm dl.facts dt { font-weight: 400; color: var(--muted); }
.calm details.more > summary { font-weight: 400; }

.calm #demo .ex-tab { background: none; color: var(--demo-muted); border: 1px solid var(--demo-line); border-radius: var(--radius); box-shadow: none; font-weight: 400; transform: none; }
.calm #demo .ex-tab::before { content: none; }
.calm #demo .ex-tab:hover { color: var(--demo-ink); border-color: var(--demo-muted); }
.calm #demo .ex-tab[aria-selected="true"] { background: none; color: var(--demo-ink); border-color: var(--demo-ink); font-weight: 700; }
.calm #demo .win .demo-q { background: none; border-bottom: 1px solid var(--demo-line); }
.calm #demo .win .demo-text { background: var(--paper); color: var(--demo-ink); }
.calm #demo .win .demo-text mark.ev { background: var(--demo-tint); color: var(--demo-ink); outline: 0; text-decoration: none; }
.calm #demo .win .demo-text mark.ev::after { background: var(--demo-ink); color: var(--paper); }
.calm #demo .win .demo-text mark.ev-extra { background: none; outline: 1px dashed var(--demo-muted); }
.calm #demo .win .demo-text mark.is-hot { background: var(--demo-tint-strong); }
.calm #demo .win .sym-formula { background: var(--paper); border: 1px solid var(--demo-line); border-radius: var(--radius); }
.calm #demo .win .sym-formula .sym, .calm #demo .win .demo-steps .sym { background: var(--demo-faint); color: var(--demo-ink); border-color: transparent; box-shadow: none; }
.calm #demo .win .sym-formula .q, .calm #demo .win .demo-steps .q { background: var(--demo-tint); color: var(--demo-ink); outline: 0; }
.calm #demo .win .sym-formula a.q:hover, .calm #demo .win .demo-steps a.q:hover, .calm #demo .win .sym-formula a.q:focus-visible, .calm #demo .win .demo-steps a.q:focus-visible { background: var(--demo-tint-strong); color: var(--demo-ink); }
.calm #demo .win .sym-formula a.q:focus-visible, .calm #demo .win .demo-steps a.q:focus-visible { outline: 2px solid var(--demo-ink); outline-offset: 2px; }
.calm #demo .win .sym-formula .res { background: var(--demo-ink); color: var(--paper); box-shadow: none; }
.calm #demo .win .st-badge { background: none; color: var(--demo-ink); border: 1px solid var(--demo-muted); }
.calm #demo .win .cbar { background: var(--demo-faint); border: 1px solid var(--demo-line); }
.calm #demo .win .cbar i { background: var(--demo-muted); }
.calm #demo .win .demo-steps .v { background: none; color: var(--demo-ink); border-color: var(--demo-muted); }
.calm #demo .win details.prog pre.code { background: var(--paper); border: 1px solid var(--demo-line); }

@media (max-width: 960px) {
  .calm .cta-band { padding: 52px 0 60px; }
  .calm .cta-block { padding: 40px 28px; }
}
@media (max-width: 600px) {
  .calm .display { font-size: 44px; }
  .calm .btn { white-space: normal; }
  .calm .win-bar { padding: 10px 16px; }
  .calm .win-body { padding: 16px; }
  .calm .cta-block { padding: 28px 20px; }
}

.tok-s { color: var(--syn-s); }

.hero-join { padding: 64px 0 80px; }
.hero-join .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; gap: 56px; }
.hero-join .display { font-size: clamp(52px, 6.8vw, 96px); }
.calm .hero-join .display .hero-sub { margin-top: 0.5em; font-size: max(0.36em, 24px); color: var(--muted); }
.hero-join .lead { font-size: 19px; }
.hero-ticks { margin: 0; }
.hero-side { min-width: 0; scroll-margin-top: 78px; }
.join-win { margin: 0; }
.join-win .win-bar { padding: 12px 24px; }
.hero-side .join-win .win-bar { padding: 22px 24px 0; border-bottom: 0; }
.hero-side .join-win .win-bar .t { font: 700 28px/1.05 var(--display); letter-spacing: 0.4px; text-transform: none; color: var(--ink); white-space: normal; }
.join-win .win-body { padding: 18px 24px 24px; }
.hero-signin { margin: 14px 0 0; }

.join { position: relative; }
.join-progress { list-style: none; margin: 0 0 20px; padding: 0; display: flex; gap: 22px; border-bottom: 1px solid var(--line); font: 400 12.5px/1 var(--mono); color: var(--muted); }
.join-progress li { display: flex; align-items: center; gap: 7px; margin-bottom: -1px; padding: 0 0 12px; white-space: nowrap; }
.join-progress li[aria-current="step"] { padding-bottom: 10px; color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--accent); }
.join-progress li.is-done .n { display: inline-block; width: 10px; height: 6px; margin: 0 1px 3px; font-size: 0; border-left: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); }
.join .field { margin-bottom: 14px; }
.join textarea { min-height: 62px; font: 15px/1.5 var(--sans); }
.join .hint { font-size: 13.5px; }
.join .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.join-actions { margin: 6px 0 14px; }
.join-fine { margin: 0; font-size: 13.5px; }
.join-form-error { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--danger); border-left-width: 3px; border-radius: var(--radius); background: var(--danger-tint); }
.join .code-input { font: 700 26px/1 var(--mono); letter-spacing: 0.3em; max-width: 260px; }
.join-h { font: 700 28px/1.05 var(--display); letter-spacing: 0.4px; margin: 0 0 10px; }
.join-done-text { margin-bottom: 10px; font-size: 18px; }
.place-line { font: 400 16px/1.6 var(--sans); margin: 0 0 14px; }
.place-line .place-n { font: 700 28px/1 var(--display); letter-spacing: 0.4px; margin: 0 2px; }
.boost { border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); padding: 12px 14px; margin: 0 0 14px; }
.boost-t { margin: 0 0 10px; font-size: 14.5px; }
.btn.btn-boost { white-space: normal; text-align: left; line-height: 1.3; min-height: 40px; }
.signed-panel .signed-who { font: 13px/1.6 var(--mono); margin-bottom: 12px; color: var(--muted); }
.signed-panel .st { margin-left: 6px; vertical-align: 1px; }

.wl-card .wl-card-title { margin-bottom: 12px; }
.place-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 4px 0 16px; }
.place-big .n { font: 700 clamp(64px, 9vw, 104px)/0.9 var(--display); letter-spacing: 0.5px; }
.place-big .of { font: 400 16px/1.3 var(--mono); color: var(--muted); }
.wl-facts { margin: 6px 0 18px; }
.wl-other { margin: 12px 0 0; }


.steps-list { list-style: none; margin: 0 0 28px; padding: 0; }
.steps-list .step { margin: 0; }
.how-cta { margin: 0; }

@media (max-width: 960px) {
  .hero-join .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-copy { display: contents; }
  .hero-side { order: 1; margin: 2px 0 30px; }
  .hero-ticks { order: 2; }
}
@media (max-width: 600px) {
  .hero-join { padding: 34px 0 44px; }
  .hero-join .display { font-size: 50px; }
  .hero-join .lead { font-size: 18px; margin-bottom: 22px; }
  .join-win .win-bar { padding: 10px 16px; }
  .hero-side .join-win .win-bar { padding: 18px 16px 0; }
  .join-win .win-body { padding: 14px 16px 18px; }
  .join-progress { gap: 16px; }
  .join-h { font-size: 28px; }
  .place-big .n { font-size: 64px; }
}
@media (forced-colors: active) {
}

@media (prefers-color-scheme: dark) {
  html.theme-auto {
    color-scheme: dark;
    --ink: #F2EFE6;
    --muted: #B4AFA3;
    --line: #45433E;
    --line-strong: #7C786E;
    --paper: #121211;
    --tint: #181714;
    --card: #1C1A17;
    --field: #121211;
    --danger: #FFA3B4;
    --danger-tint: #2A1418;
    --mark: #4A3A00;
    --mark-strong: #6E5606;
    --syn-s: #86E3AE;
    --code-k: #A7BDFF;
    --hair: rgba(242, 239, 230, 0.26);
    --fg: var(--ink);
    --fg-mute: var(--muted);
    --surface: var(--card);
    --surface-2: var(--tint);
  }
  .theme-auto :where(main) :focus-visible { outline-color: var(--accent); }
  .theme-auto .site-header { border-bottom: 1px solid var(--line); }
  .theme-auto .site-footer { border-top: 1px solid var(--line); }

  .theme-auto .cbar { background: #0E0E0D; border-color: var(--fg-mute); }
  .theme-auto .cbar i { background: var(--fg); }

}

/* hero: the price line under the headline (owner, 2026-11-12) */
.hero-join .display .hero-sub { display: block; margin-top: .35em; font-size: .36em; line-height: 1.15; letter-spacing: 0; }
@media (max-width: 720px) { .hero-join .display .hero-sub { font-size: .5em; } }

/* ============================================================
   The demo on the home page (demo.js). Calm on purpose: 1px lines, soft tints, no filled blocks and no hard
   shadows. Every colour is one of the --demo-* properties, which :root maps to the page tokens (light and dark).
   ============================================================ */
.demo .demo-kicker { font: 700 12px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--demo-muted); margin: 0 0 14px; }
.demo .demo-lead { margin-bottom: 22px; }
.demo-app { color: var(--demo-ink); }
.demo-loading { min-height: 240px; }
.demo-label { font: 700 11.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--demo-muted); margin: 0 0 8px; max-width: none; }

.demo-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 10px; margin: 0 0 20px; }
.demo-type-tab {
  appearance: none; display: flex; align-items: flex-end; min-width: 0; margin: 0; padding: 11px 1px 9px; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--demo-line);
  font: 700 14px/1.25 var(--mono); letter-spacing: 0.04em; overflow-wrap: anywhere; color: var(--demo-muted);
}
.demo-type-tab:hover { color: var(--demo-ink); }
.demo-type-tab[aria-selected="true"] { color: var(--demo-ink); border-bottom-color: var(--demo-ink); box-shadow: inset 0 -1px 0 var(--demo-ink); }
.demo-type-tab:focus-visible, .demo-case:focus-visible, .demo-qbtn:focus-visible { outline: 2px solid var(--demo-ink); outline-offset: 2px; }
.demo-panel:focus, .demo-panel:focus-visible { outline: none; }
.demo-panel.is-loading .demo-stage { opacity: 0.45; }

.demo-cases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.demo-case {
  appearance: none; display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; cursor: pointer;
  background: transparent; color: var(--demo-ink); border: 1px solid var(--demo-line); padding: 10px 12px 11px;
}
.demo-case .l { font: 600 15px/1.25 var(--sans); overflow-wrap: anywhere; }
.demo-case .t { font: 12px/1.3 var(--mono); letter-spacing: 0.02em; color: var(--demo-muted); }
.demo-case:hover, .demo-qbtn:hover { border-color: var(--demo-ink); }
.demo-case[aria-pressed="true"], .demo-qbtn[aria-pressed="true"] { border-color: var(--demo-ink); box-shadow: inset 0 -2px 0 var(--demo-ink); }

.demo-questions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; }
.demo-qbtn {
  appearance: none; display: flex; align-items: baseline; gap: 8px; min-width: 0; text-align: left; cursor: pointer;
  background: transparent; color: var(--demo-ink); border: 1px solid var(--demo-line); padding: 9px 11px 10px; font: 14px/1.4 var(--sans);
}
.demo-qbtn .n { flex: none; font: 700 11.5px/1 var(--mono); color: var(--demo-muted); }
.demo-qbtn .t { min-width: 0; overflow-wrap: anywhere; }
.demo-qbtn[aria-pressed="true"] .t { font-weight: 600; }

.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.demo-card { min-width: 0; margin: 0; background: var(--demo-surface); color: var(--demo-ink); border: 1px solid var(--demo-line); }
.demo-file { margin: 0; max-width: none; padding: 9px 16px; border-bottom: 1px solid var(--demo-line); font: 12px/1.3 var(--mono); letter-spacing: 0.02em; color: var(--demo-muted); overflow-wrap: anywhere; }
.demo-q { padding: 14px 16px 13px; border-bottom: 1px solid var(--demo-line); }
.demo-q .demo-label { margin: 0 0 4px; }
.demo-q .q { font: 600 18px/1.4 var(--sans); margin: 0; max-width: none; overflow-wrap: anywhere; }
.demo-text {
  position: relative; margin: 0; padding: 14px 16px 16px; max-height: 440px; overflow-x: hidden; overflow-y: auto;
  font: 13px/1.7 var(--mono); white-space: pre-wrap; white-space: break-spaces; overflow-wrap: anywhere; font-variant-ligatures: none;
}
.demo-text:focus-visible { outline: 2px solid var(--demo-ink); outline-offset: -2px; }
.demo-text.is-tabular { font-size: 12px; }
.demo .demo-text mark.ev {
  background: var(--demo-tint); color: inherit; font-weight: inherit; outline: 0; text-decoration: none;
  border-bottom: 1px solid var(--demo-muted); padding: 1px 0; scroll-margin: 40px;
}
.demo-text mark.ev::after { content: attr(data-n); margin-left: 2px; font: 700 9.5px/1 var(--mono); color: var(--demo-muted); vertical-align: super; }
.demo .demo-text mark.ev-extra { background: transparent; border-bottom-style: dashed; }
.demo .demo-text mark.ev:focus-visible { outline: 2px solid var(--demo-ink); outline-offset: 1px; }
.demo .demo-text mark.is-hot { background: var(--demo-tint-strong); }
.demo .demo-text mark.is-flash { animation: demo-flash 1.1s ease-out; }
@keyframes demo-flash { 0%, 100% { background: var(--demo-tint); } 30% { background: var(--demo-tint-strong); } }

.demo-out { padding: 16px 18px 18px; }
.demo-value { font: 700 clamp(34px, 4.2vw, 50px)/1.04 var(--display); letter-spacing: 0.3px; margin: 0 0 10px; max-width: none; overflow-wrap: anywhere; }
.demo-value.is-none, .demo-value.is-long { font-size: clamp(26px, 3vw, 34px); }
.demo-value.is-xlong { font: 700 clamp(17px, 1.7vw, 20px)/1.35 var(--mono); letter-spacing: 0; }
.demo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 10px; max-width: none; font: 12.5px/1.3 var(--mono); color: var(--demo-muted); }
.demo-meta .st-badge { font: 700 11px/1 var(--mono); letter-spacing: 0.1em; padding: 4px 6px; background: transparent; color: var(--demo-ink); border: 1px solid var(--demo-ink); }
.demo-meta .st-badge.st-no { color: var(--demo-no); border-color: var(--demo-no); }
.demo-conf .v { color: var(--demo-ink); font-weight: 700; }
.demo-cbar { height: 2px; margin: 0 0 18px; background: var(--demo-line); }
.demo-cbar i { display: block; width: 0; height: 100%; background: var(--demo-ink); }
.demo .sym-formula {
  margin: 0 0 18px; padding: 10px 12px; background: transparent; border: 1px solid var(--demo-line);
  font: 14.5px/1.9 var(--mono); overflow-wrap: anywhere; font-variant-ligatures: none;
}
.demo .sym-formula.plain { white-space: pre-wrap; }
.demo .sym-formula .sym, .demo .demo-steps .sym {
  font: 700 0.92em/1.3 var(--mono); letter-spacing: 0.03em; background: var(--demo-faint); color: var(--demo-ink); padding: 2px 4px;
  border: 0; box-shadow: none; min-width: 0;
}
.demo .sym-formula .sym.is-target { box-shadow: 0 0 0 1px var(--demo-ink); }
.demo .sym-formula .p, .demo .sym-formula .lit { color: var(--demo-muted); }
.demo .sym-formula a.q, .demo .demo-steps a.q, .demo .sym-formula span.q, .demo .demo-steps span.q {
  background: var(--demo-tint); color: var(--demo-ink); border-bottom: 1px solid var(--demo-muted); text-decoration: none; padding: 1px 2px;
}
.demo .sym-formula a.q:hover, .demo .demo-steps a.q:hover, .demo .sym-formula a.q:focus-visible, .demo .demo-steps a.q:focus-visible { background: var(--demo-tint-strong); }
.demo .sym-formula .eq { font-weight: 700; }
.demo .sym-formula .res { margin: 0; box-shadow: none; font-weight: 700; border-bottom: 2px solid var(--demo-ink); }
.demo .sym-formula .res.is-no { color: var(--demo-no); border-bottom-color: var(--demo-no); }
.demo-steps { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: step; }
.demo-steps li {
  counter-increment: step; display: grid; grid-template-columns: 18px 84px minmax(0, 1fr); align-items: baseline; gap: 4px 10px;
  padding: 8px 0; border-top: 1px solid var(--demo-line); font-size: 15px; line-height: 1.55;
}
.demo-steps li:last-child { border-bottom: 1px solid var(--demo-line); }
.demo-steps li::before { content: counter(step); font: 12px/1 var(--mono); color: var(--demo-muted); }
.demo-steps .sym { justify-self: start; }
.demo-steps .st-t { min-width: 0; overflow-wrap: anywhere; }
.demo-steps .v { font: 700 0.92em/1.45 var(--mono); }
.demo-steps code { font: 0.9em/1.45 var(--mono); background: var(--demo-faint); padding: 1px 4px; overflow-wrap: anywhere; }
.demo details.prog { margin: 0; }
.demo details.prog > summary { cursor: pointer; padding: 8px 0 6px; font: 700 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--demo-muted); }
.demo details.prog > summary:hover { color: var(--demo-ink); }
.demo-json { margin: 6px 0 0; padding: 10px 12px; max-height: 320px; overflow: auto; border: 1px solid var(--demo-line); font: 12.5px/1.6 var(--mono); }
.demo-json code { font-size: inherit; background: none; padding: 0; }
.demo-foot { margin: 14px 0 0; max-width: none; font-size: 14px; }
.demo-share { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--demo-muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; text-align: left; }
.demo-share:hover { color: var(--demo-ink); }

.demo-symbols { margin: 34px 0 0; padding: 22px 0 0; border-top: 1px solid var(--demo-line); }
.demo-symbols-title { font: 700 13px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 6px; }
.demo-symbols-note { margin: 0 0 16px; max-width: 760px; font-size: 14.5px; color: var(--demo-muted); }
.demo-symgroups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 36px; }
.demo-symgroup-title { margin: 0 0 6px; max-width: none; font: 12px/1.3 var(--mono); color: var(--demo-muted); }
.demo-symrow { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.demo-symchip { display: inline-flex; border: 1px solid var(--demo-line); font: 700 12px/1 var(--mono); letter-spacing: 0.03em; }
.demo-symchip.is-off { border-style: dashed; }
.demo .demo-symchip .name { padding: 6px 7px; color: var(--demo-ink); text-decoration: none; background: none; }
.demo .demo-symchip a.name:hover, .demo .demo-symchip a.name:focus-visible { background: var(--demo-tint); }
.demo .demo-symchip .name.is-off { color: var(--demo-muted); font-weight: 400; }
.demo .demo-symchip .what { padding: 6px 6px; border-left: 1px solid var(--demo-line); color: var(--demo-muted); font-weight: 400; text-decoration: none; background: none; }
.demo .demo-symchip.is-off .what { border-left-style: dashed; }
.demo .demo-symchip .what:hover, .demo .demo-symchip .what:focus-visible { color: var(--demo-ink); background: var(--demo-faint); }
.demo-more { margin: 26px 0 0; max-width: none; font-size: 16px; }
.demo .demo-more a:hover, .demo .link-btn:hover { background: var(--demo-tint); }
.demo .notice { max-width: none; margin: 0; padding: 12px 14px; background: transparent; color: var(--demo-ink); border: 1px solid var(--demo-line); box-shadow: none; }

@media (max-width: 1080px) {
  .demo-types, .demo-cases, .demo-questions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .demo-text { max-height: 320px; }
}
@media (max-width: 720px) {
  .demo-types, .demo-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-questions { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .demo-symgroups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .demo-type-tab { font-size: 13px; padding: 10px 1px 8px; }
  .demo-case { padding: 9px 10px 10px; }
  .demo-case .l { font-size: 14.5px; }
  .demo-q { padding: 12px 14px 11px; }
  .demo-q .q { font-size: 16.5px; }
  .demo-file { padding: 8px 14px; }
  .demo-text { padding: 12px 14px 14px; font-size: 12.5px; }
  .demo-text.is-tabular { font-size: 11.5px; }
  .demo-out { padding: 14px 14px 16px; }
  .demo .sym-formula { font-size: 13.5px; padding: 8px 10px; }
  .demo-steps li { grid-template-columns: 14px 74px minmax(0, 1fr); gap: 4px 8px; }
}
@media (forced-colors: active) {
  .demo-text mark.ev, .demo .sym-formula a.q, .demo .demo-steps a.q { forced-color-adjust: auto; text-decoration: underline; }
  .demo-case[aria-pressed="true"], .demo-qbtn[aria-pressed="true"] { outline: 2px solid CanvasText; }
  .demo-type-tab[aria-selected="true"] { border-bottom-width: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-text mark.is-flash { animation: none; background: var(--demo-tint-strong); }
}
@media (prefers-color-scheme: dark) {
  .theme-auto .demo .demo-kicker { background: none; color: var(--demo-muted); }
  .theme-auto .demo .demo-text mark.ev, .theme-auto .demo .demo-text mark.ev::after { color: inherit; }
  .theme-auto .demo .demo-text mark.ev::after { color: var(--demo-muted); }
  .theme-auto .demo .notice { box-shadow: none; }
  .theme-auto .demo .demo-symchip a:hover, .theme-auto .demo .demo-more a:hover, .theme-auto .demo a.q:hover { color: var(--demo-ink); }
}