/* AgilePQ — component styles. Colours, spaces, radii, strokes and shadows are tokens from tokens.json.
   Motion constants live here because tokens.json carries no motion family. */

/* ---------- base and motion ---------- */
:root {
  --apq-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --apq-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --apq-t-hover: 160ms;
  --apq-t-lift: 280ms;
  --apq-t-arrive: 640ms;
  --apq-t-draw: 1000ms;
  --apq-t-count: 1200ms;
  --apq-stagger: 90ms;
  --apq-pulse: 2400ms;
}
:root, [data-theme="dark"] { --apq-show-on-dark: inline-block; --apq-show-on-light: none; color-scheme: dark; }
[data-theme="light"] { --apq-show-on-dark: none; --apq-show-on-light: inline-block; color-scheme: light; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[data-theme] { color: var(--ink); }
.apq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.apq-keepcase { text-transform: none; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--stroke-mark) solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }

/* Tabular lining numerals in data only. They bring Mona Sans' slashed zero, which is intended; prose keeps proportional figures. */
.apq-num, .apq-dim__num, .apq-dim__inline, .apq-reach__tick, .apq-reach__facts dd, .apq-reach__pointlabel, .apq-reach__c0label, .apq-reach__tag,
.apq-mosca__name, .apq-mosca__tick, .apq-mosca__control output, .apq-bytes__value, .apq-bytes__bar, .apq-spec td, .apq-titleblock dd,
.apq-claims__n, .apq-index__n, .apq-label__index, .apq-ring__value, .apq-ring__legend dd, .apq-callout__value { font-variant-numeric: lining-nums tabular-nums; }

@media (max-width: 720px) {
  .display-1 { font-size: 48px; }
  .display-2 { font-size: 38px; }
  .headline { font-size: 28px; }
  .figure { font-size: 84px; }
  .quote { font-size: 22px; }
}

/* arrival in sequence. Hidden start states apply only under html.apq-motion (set by the bundle, or by a
   one-line head script on a site), so content is visible without JS; components add .is-in in view. */
.apq-motion .apq-arrive { opacity: 0; transform: translateY(16px); transition: opacity var(--apq-t-arrive) var(--apq-ease), transform var(--apq-t-arrive) var(--apq-ease); transition-delay: calc(var(--apq-i, 0) * var(--apq-stagger)); }
.apq-motion .is-in > .apq-arrive, .apq-motion .apq-arrive.is-in, .apq-motion .is-in .apq-arrive { opacity: 1; transform: none; }
span.apq-arrive { display: inline-block; }
.apq-motion .apq-draw { transform: scaleX(0); transform-origin: left center; transition: transform var(--apq-t-draw) var(--apq-ease); transition-delay: calc(var(--apq-i, 0) * var(--apq-stagger) + 120ms); }
.apq-motion .is-in .apq-draw { transform: scaleX(1); }
.apq-motion .apq-dim--center .apq-dim__line { transform-origin: center center; }
/* safety net: if the page's script never marks itself live, show everything after 2.6s */
.apq-motion:not(.apq-live) .apq-arrive, .apq-motion:not(.apq-live) .apq-draw { animation: apq-fallback 1ms linear 2600ms forwards; }
@keyframes apq-fallback { to { opacity: 1; transform: none; } }

/* the pulse: a halo that breathes behind what needs you */
.apq-halo { position: relative; }
.apq-halo::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; box-shadow: var(--apq-glow, var(--glow-signal)); opacity: 0.4; animation: apq-halo var(--apq-pulse) var(--apq-ease-in-out) infinite; pointer-events: none; }
@keyframes apq-halo { 0%, 100% { opacity: 0.35; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .apq-arrive, .apq-draw { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .apq-halo::after { animation: none; opacity: 0.8; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Frame, Sheet, Panel ---------- */
.apq-frame { min-height: 100%; background: radial-gradient(900px 520px at 78% -8%, var(--signal-wash), rgba(0,0,0,0) 70%), radial-gradient(700px 420px at 0% 100%, var(--signal-wash), rgba(0,0,0,0) 70%), var(--ground); }
.apq-sheet { margin: 0 var(--layout-inset); background: var(--sheet); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-sheet); overflow: hidden; position: relative; }
.apq-sheet + .apq-sheet { margin-top: var(--layout-inset); }
@media (max-width: 720px) { .apq-sheet { margin: 0 8px; border-radius: var(--radius-md); } }

.apq-panel { position: relative; background: var(--panel); color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-panel); padding: var(--space-6); transition: transform var(--apq-t-lift) var(--apq-ease), box-shadow var(--apq-t-lift) var(--apq-ease); }
.apq-panel--tight { padding: var(--space-5); }
.apq-panel--flush { padding: 0; overflow: hidden; }
.apq-panel--glass { background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: var(--shadow-glass), inset 0 0 0 1px var(--glass-edge); }
.apq-panel--lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.apq-panel--signal { box-shadow: var(--shadow-panel), var(--glow-signal); }
.apq-panel--exposed { box-shadow: var(--shadow-panel), var(--glow-exposed); }
.apq-panel--ahead { box-shadow: var(--shadow-panel), var(--glow-ahead); }
.apq-panel__title { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 700; }
@media (max-width: 720px) { .apq-panel { padding: var(--space-5) var(--space-4); } }

/* ---------- Logo ---------- */
.apq-logo { display: inline-flex; align-items: center; line-height: 0; }
.apq-logo img { display: block; height: 100%; width: auto; }
.apq-logo__dark { display: var(--apq-show-on-dark) !important; }
.apq-logo__light { display: var(--apq-show-on-light) !important; }

/* ---------- Button ---------- */
.apq-btn {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-3);
  height: 48px; padding: 0 var(--space-5);
  border: var(--stroke-hair) solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font-text); font-size: 16px; line-height: 1.25; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--apq-t-hover) linear, border-color var(--apq-t-hover) linear, color var(--apq-t-hover) linear, box-shadow var(--apq-t-lift) var(--apq-ease), transform var(--apq-t-lift) var(--apq-ease);
}
.apq-btn--lg { height: 56px; padding: 0 var(--space-6); font-size: 17px; }
.apq-btn--primary { background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%), var(--action); border-color: var(--action-edge); color: var(--on-action); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 18px -8px var(--action); }
.apq-btn--primary:hover { background-color: var(--action-hover); background-image: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%); border-color: var(--action-edge); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), var(--glow-signal); text-decoration: none; }
.apq-btn--primary:active { transform: none; }
.apq-btn--secondary { background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: var(--line-strong); color: var(--ink); }
.apq-btn--secondary:hover { border-color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-panel); text-decoration: none; }
.apq-btn--quiet { height: auto; padding: var(--space-2) 0; background: transparent; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.apq-btn--quiet:hover { text-decoration-thickness: 2px; }
.apq-btn .apq-arrow { transition: transform var(--apq-t-lift) var(--apq-ease); }
.apq-btn:hover .apq-arrow { transform: translateX(4px); }
.apq-btn:disabled, .apq-btn[aria-disabled="true"] { cursor: not-allowed; background: transparent; background-image: none; box-shadow: none; transform: none; border-color: var(--line-strong); border-style: dashed; color: var(--ink-faint); }
.apq-btn--quiet:disabled, .apq-btn--quiet[aria-disabled="true"] { border: 0; text-decoration: none; }
.apq-arrow { flex: none; display: block; }

/* ---------- Label ---------- */
.apq-label { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-family: var(--font-display); font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.apq-label__index { color: var(--link); }
.apq-label__leader { flex: none; width: var(--space-5); border-top: var(--stroke-hair) solid var(--line-strong); }

/* ---------- Section ---------- */
.apq-section { position: relative; padding: var(--space-9) var(--space-7); }
.apq-section--band { background: var(--band); }
.apq-section--frame { background: var(--ground); }
.apq-section__inner { max-width: var(--layout-page); margin: 0 auto; display: grid; grid-template-columns: var(--layout-rail) minmax(0, 1fr); column-gap: var(--layout-gutter); }
.apq-section__rail { padding-top: 0.35em; }
.apq-section__body > :first-child { margin-top: 0; }
.apq-section__body > p, .apq-section__body > ul, .apq-section__body > ol:not([class]) { max-width: var(--layout-measure); }
@media (max-width: 1023px) { .apq-section__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); } }
@media (max-width: 720px) { .apq-section { padding: var(--space-8) var(--space-4); } }

/* ---------- Hero ---------- */
.apq-hero { position: relative; padding: var(--space-9) var(--space-7) var(--space-10); background: radial-gradient(760px 460px at 82% 30%, var(--signal-wash), rgba(0,0,0,0) 70%), var(--ground); overflow: hidden; }
.apq-hero__inner { position: relative; max-width: var(--layout-page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.apq-hero__copy { display: grid; gap: var(--space-5); align-content: center; }
.apq-hero__title { margin: 0; font-family: var(--font-display); font-size: 88px; line-height: 0.94; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.apq-hero__lede { margin: 0; font-size: 21px; line-height: 1.45; color: var(--ink-muted); max-width: 46ch; }
.apq-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); }
.apq-hero__instrument { position: relative; min-width: 0; }
@media (max-width: 1100px) { .apq-hero__title { font-size: 64px; } }
@media (max-width: 960px) { .apq-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); } }
@media (max-width: 720px) {
  .apq-hero { padding: var(--space-8) var(--space-4) var(--space-9); }
  .apq-hero__title { font-size: 48px; }
  .apq-hero__lede { font-size: 18px; }
}

/* ---------- SiteHeader (glass) ---------- */
.apq-header { position: sticky; top: 0; z-index: 20; padding: var(--space-3) var(--layout-inset); }
.apq-header__bar { max-width: var(--layout-page); margin: 0 auto; height: 64px; padding: 0 var(--space-3) 0 var(--space-5); display: flex; align-items: center; gap: var(--space-6); border-radius: var(--radius-md); background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: var(--shadow-glass), inset 0 0 0 1px var(--glass-edge); }
.apq-header__home { display: inline-flex; height: 22px; margin-right: auto; border-radius: var(--radius-sm); }
.apq-header__nav { display: flex; align-items: center; gap: var(--space-5); }
.apq-header__nav ul { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.apq-header__nav a:not(.apq-btn) { display: inline-block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink-muted); font-size: 16px; font-weight: 600; text-decoration: none; transition: color var(--apq-t-hover) linear, background-color var(--apq-t-hover) linear; }
.apq-header__nav a:not(.apq-btn):hover { color: var(--ink); background: var(--band); }
.apq-header__nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 calc(-1 * var(--stroke-mark)) 0 var(--signal); border-radius: 0; }
.apq-header__menu { display: none; height: 44px; padding: 0 var(--space-4); background: transparent; color: var(--ink); border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-sm); font: 600 16px/1 var(--font-text); cursor: pointer; }
@media (max-width: 860px) {
  .apq-header { padding: var(--space-2) 8px; }
  .apq-header__bar { height: 56px; padding: 0 var(--space-2) 0 var(--space-4); flex-wrap: wrap; }
  .apq-header__menu { display: inline-block; }
  .apq-header__nav { display: none; }
  .apq-header.is-open .apq-header__bar { height: auto; padding-top: var(--space-2); padding-bottom: var(--space-4); }
  .apq-header.is-open .apq-header__home, .apq-header.is-open .apq-header__menu { margin-top: 4px; }
  .apq-header__nav.is-open { display: flex; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: var(--space-4); padding-top: var(--space-3); animation: apq-drop var(--apq-t-lift) var(--apq-ease); }
  .apq-header__nav ul { flex-direction: column; gap: 0; }
  .apq-header__nav ul a:not(.apq-btn) { display: block; padding: var(--space-3) var(--space-2); border-bottom: var(--stroke-hair) solid var(--line); border-radius: 0; }
  .apq-header__nav .apq-btn { justify-content: center; }
}
@keyframes apq-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- SiteFooter (title block on the frame) ---------- */
.apq-footer { padding: var(--space-8) var(--space-7) var(--space-7); background: var(--ground); }
.apq-footer__inner { max-width: var(--layout-page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-7); align-items: end; }
.apq-footer__lead { display: grid; gap: var(--space-4); align-content: start; align-self: start; }
.apq-footer__logo { height: 22px; display: inline-flex; }
.apq-footer__tag { margin: 0; color: var(--ink-muted); max-width: 36ch; }
.apq-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; padding: 0; margin: 0; }
.apq-footer__links a { color: var(--ink-muted); text-decoration: none; font-size: 15px; }
.apq-footer__links a:hover { color: var(--ink); text-decoration: underline; }
.apq-titleblock { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--radius-md); overflow: hidden; background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-glass), inset 0 0 0 1px var(--glass-edge); }
.apq-titleblock__cell { padding: var(--space-3) var(--space-4) var(--space-4); border-right: var(--stroke-hair) solid var(--line); border-bottom: var(--stroke-hair) solid var(--line); min-width: 0; }
.apq-titleblock__cell.is-wide { grid-column: span 2; }
.apq-titleblock dt { font-family: var(--font-display); font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-2); }
.apq-titleblock dd { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.apq-footer__legal { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ink-faint); }
@media (max-width: 860px) {
  .apq-footer { padding: var(--space-7) var(--space-4); }
  .apq-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .apq-titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Dimension ---------- */
.apq-dim { margin: 0; color: var(--ink); }
.apq-dim--signal { --apq-dim-ink: var(--signal); }
.apq-dim--exposed { --apq-dim-ink: var(--exposed); }
.apq-dim--ahead { --apq-dim-ink: var(--ahead); }
.apq-dim--neutral { --apq-dim-ink: var(--line-strong); }
.apq-dim__value { display: flex; align-items: baseline; justify-content: center; gap: var(--space-2); color: var(--ink); }
.apq-dim--start .apq-dim__value, .apq-dim--start .apq-dim__caption { justify-content: flex-start; text-align: left; }
.apq-dim__num { font-family: var(--font-display); font-weight: 800; line-height: 0.88; letter-spacing: -0.03em; }
.apq-dim--figure .apq-dim__num { font-size: 120px; }
.apq-dim--title .apq-dim__num { font-size: 38px; line-height: 1.06; letter-spacing: -0.01em; }
.apq-dim__unit { font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--ink-muted); }
.apq-dim__value .apq-claim { font-size: 14px; }
.apq-dim__track { position: relative; padding: var(--space-5) 0; }
.apq-dim--center .apq-dim__track { display: flex; justify-content: center; }
.apq-dim__line { position: relative; min-width: 48px; }
.apq-dim__rule { position: absolute; left: 0; right: 0; top: 0; border-top: var(--stroke-hair) solid var(--apq-dim-ink); box-shadow: 0 0 10px 0 var(--apq-dim-ink); }
.apq-dim--neutral .apq-dim__rule { box-shadow: none; }
.apq-dim__tick { position: absolute; top: -8px; width: var(--stroke-hair); height: 15px; background: var(--apq-dim-ink); transform: rotate(45deg); }
.apq-dim__tick--start { left: 0; }
.apq-dim__tick--end { right: 0; }
.apq-dim__ext { position: absolute; top: -20px; width: var(--stroke-hair); height: 28px; background: var(--apq-dim-ink); }
.apq-dim__ext--start { left: 0; }
.apq-dim__ext--end { right: 0; }
.apq-dim--open .apq-dim__tick--end, .apq-dim--open .apq-dim__ext--end { display: none; }
.apq-dim__open { position: absolute; left: 100%; top: calc(-1 * var(--stroke-hair)); width: 64px; border-top: var(--stroke-mark) dashed var(--apq-dim-ink); }
.apq-dim--inline .apq-dim__track { padding: var(--space-4) 0; }
.apq-dim__inline { position: absolute; left: 50%; top: 0; transform: translate(-50%, -55%); padding: 2px var(--space-3); border-radius: var(--radius-full); background: var(--apq-dim-ground, var(--sheet)); box-shadow: inset 0 0 0 1px var(--apq-dim-ink); font-family: var(--font-display); font-size: 15px; line-height: 1.2; font-weight: 700; color: var(--ink); white-space: nowrap; }
.apq-dim--start.apq-dim--inline .apq-dim__inline { left: var(--space-6); transform: translate(0, -55%); }
.apq-dim__caption { display: flex; justify-content: center; text-align: center; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.apq-panel .apq-dim, .apq-panel .apq-bytes, .apq-panel .apq-mosca, .apq-panel .apq-reach { --apq-dim-ground: var(--panel); }
.apq-section--band .apq-dim, .apq-section--band .apq-bytes, .apq-section--band .apq-reach { --apq-dim-ground: var(--band); }
@media (max-width: 720px) {
  .apq-dim--figure .apq-dim__num { font-size: 84px; }
  .apq-dim__unit { font-size: 18px; }
}

/* ---------- ReachScale ---------- */
.apq-reach { color: var(--ink); }
.apq-reach__plot { position: relative; height: 204px; margin: 0 var(--space-4); }
.apq-pair { margin-left: 0.5em; font-weight: 500; }
.apq-reach__tag { display: block; white-space: nowrap; font-family: var(--font-display); font-size: 14px; line-height: 1.15; font-weight: 700; letter-spacing: 0.02em; }
.apq-reach__lit { position: absolute; left: 0; top: 60px; height: 72px; background: linear-gradient(180deg, rgba(0,0,0,0), var(--signal-wash)); }
.apq-reach__stack { position: absolute; right: 0; top: 0; height: 30px; }
.apq-reach__stack .apq-reach__tag { position: absolute; right: 0; top: 0; color: var(--exposed); }
.apq-reach__stack-line { position: absolute; left: 0; right: 0; top: 28px; border-top: var(--stroke-hair) solid var(--exposed); }
.apq-reach__stack-line::before { content: ""; position: absolute; left: 0; top: -8px; width: var(--stroke-hair); height: 15px; background: var(--exposed); transform: rotate(45deg); }
.apq-reach__stack-drop { position: absolute; left: 0; top: 28px; height: 60px; border-left: var(--stroke-hair) dashed var(--exposed); }
.apq-reach__stack-wash { position: absolute; left: 0; right: 0; top: 29px; height: 103px; background: linear-gradient(180deg, var(--exposed-wash), rgba(0,0,0,0)); }
.apq-reach__slim { position: absolute; left: 0; top: 44px; }
.apq-reach__slim .apq-reach__tag { color: var(--link); }
.apq-reach__slim-bar { position: relative; height: var(--stroke-bar); margin-top: var(--space-2); border-radius: var(--radius-full); background: linear-gradient(90deg, var(--signal), var(--signal-lit)); box-shadow: var(--glow-signal); }
.apq-reach__slim-drop { position: absolute; right: 0; top: 100%; height: 54px; border-left: var(--stroke-hair) solid var(--signal); }
.apq-reach__axis { position: absolute; left: 0; right: 0; top: 132px; border-top: var(--stroke-hair) solid var(--line-strong); }
.apq-reach__tick { position: absolute; top: 132px; width: 0; }
.apq-reach__tick::before { content: ""; position: absolute; left: 0; top: 0; height: 8px; border-left: var(--stroke-hair) solid var(--line-strong); }
.apq-reach__tick span { position: absolute; top: 14px; left: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--ink-faint); }
.apq-reach__unit { position: absolute; right: 0; top: 180px; font-family: var(--font-mono); font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--ink-faint); }
.apq-reach__c0 { position: absolute; left: 0; top: 96px; }
.apq-reach__c0-line { margin-top: 8px; border-top: var(--stroke-hair) dashed var(--line-strong); }
.apq-reach__point { position: absolute; top: 132px; width: 0; }
.apq-reach__dot { position: absolute; left: -5px; top: -5px; width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--apq-dim-ground, var(--sheet)); border: var(--stroke-hair) solid var(--ink-muted); box-sizing: border-box; }
.apq-reach__pointlabel, .apq-reach__c0label { position: absolute; bottom: 22px; left: 0; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-display); font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-faint); }
.apq-reach__c0label { position: static; transform: none; display: block; }
.is-selected > .apq-reach__dot { border-width: var(--stroke-mark); border-color: var(--ink); background: var(--ink); box-shadow: 0 0 12px 2px var(--signal-wash); }
.is-selected > .apq-reach__pointlabel, .apq-reach__c0.is-selected .apq-reach__c0label { color: var(--ink); }
.apq-reach__c0.is-selected .apq-reach__c0-line { border-top-style: solid; border-top-width: var(--stroke-mark); border-top-color: var(--ink); }
.apq-reach__classes { display: inline-flex; gap: var(--space-1); padding: var(--space-1); margin-top: var(--space-5); border-radius: var(--radius-sm); background: var(--band); max-width: 100%; }
.apq-reach__class { min-height: 40px; padding: 0 var(--space-5); background: transparent; color: var(--ink-muted); border: 0; border-radius: calc(var(--radius-sm) - 2px); font: 600 16px/1.25 var(--font-text); cursor: pointer; transition: background-color var(--apq-t-hover) linear, color var(--apq-t-hover) linear, box-shadow var(--apq-t-lift) var(--apq-ease); }
.apq-reach__class:hover { color: var(--ink); }
.apq-reach__class[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-panel); }
.apq-reach__detail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-7); margin-top: var(--space-6); }
.apq-reach__quote { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); max-width: var(--layout-measure); animation: apq-swap var(--apq-t-lift) var(--apq-ease); }
@keyframes apq-swap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.apq-reach__source { display: block; margin-top: var(--space-3); font-size: 14px; color: var(--ink-muted); }
.apq-reach__facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; column-gap: var(--space-5); }
.apq-reach__facts dt { padding: var(--space-3) 0; border-top: var(--stroke-hair) solid var(--line); font-size: 14px; color: var(--ink-muted); }
.apq-reach__facts dd { margin: 0; padding: var(--space-3) 0; border-top: var(--stroke-hair) solid var(--line); font-size: 15px; font-weight: 600; }
.apq-word--signal { color: var(--link); }
.apq-word--exposed { color: var(--exposed); }
.apq-word--ahead { color: var(--ahead); }
@media (max-width: 720px) {
  .apq-reach__detail { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .apq-reach__class { padding: 0 var(--space-4); }
}
@media (max-width: 560px) { .apq-reach__slim-drop { display: none; } }

/* ---------- MoscaClock ---------- */
.apq-mosca { color: var(--ink); }
.apq-mosca__plot { position: relative; margin: 0 var(--space-2); }
.apq-mosca__row { position: relative; height: 58px; }
.apq-mosca__span { position: absolute; top: 28px; height: var(--stroke-bar); border-radius: var(--radius-full); background: linear-gradient(90deg, var(--apq-span-a), var(--apq-span-b)); }
.apq-mosca__span--y { --apq-span-a: var(--ahead); --apq-span-b: var(--ahead-lit); }
.apq-mosca__span--x { --apq-span-a: var(--signal); --apq-span-b: var(--signal-lit); box-shadow: 0 0 16px -2px var(--signal); }
.apq-mosca__span--z { height: var(--stroke-mark); top: 32px; background: var(--ink-muted); }
.apq-mosca__span--z.is-open { background: none; border-top: var(--stroke-mark) dashed var(--ink-muted); height: 0; }
.apq-mosca__span--gap { --apq-span-a: var(--exposed); --apq-span-b: var(--exposed-lit); --apq-glow: var(--glow-exposed); box-shadow: var(--glow-exposed); }
.apq-mosca__wash { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(0,0,0,0), var(--exposed-wash)); border-left: var(--stroke-hair) dashed var(--exposed); pointer-events: none; }
.apq-mosca__now { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-left: var(--stroke-hair) solid var(--signal); }
.apq-mosca__now-dot { position: absolute; left: -6px; bottom: -6px; width: 11px; height: 11px; border-radius: var(--radius-full); background: var(--signal); box-shadow: var(--glow-signal); }
.apq-mosca__name { position: absolute; top: 2px; margin-left: 12px; white-space: nowrap; font-size: 14px; line-height: 1.3; color: var(--ink-muted); }
.apq-mosca__name b { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin-right: var(--space-2); }
.apq-mosca__name--gap, .apq-mosca__name--gap b { color: var(--exposed); }
.apq-mosca__name--y b { color: var(--ahead); }
.apq-mosca__name--x b { color: var(--link); }
.apq-mosca__rows { position: relative; }
.apq-mosca__axis { position: relative; height: 40px; border-top: var(--stroke-hair) solid var(--line-strong); }
.apq-mosca__tick { position: absolute; top: 0; width: 0; }
.apq-mosca__tick::before { content: ""; position: absolute; top: 0; height: 8px; border-left: var(--stroke-hair) solid var(--line-strong); }
.apq-mosca__tick span { position: absolute; top: 14px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--ink-faint); }
.apq-mosca__verdict { margin: var(--space-5) 0 0; font-size: 17px; line-height: 1.55; max-width: var(--layout-measure); }
.apq-mosca__verdict strong { font-weight: 700; }
.apq-mosca__source { margin: var(--space-2) 0 0; font-size: 14px; color: var(--ink-muted); max-width: 80ch; }
.apq-mosca__controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--stroke-hair) solid var(--line); }
.apq-mosca__control label { display: block; font-size: 15px; font-weight: 600; margin-bottom: var(--space-2); }
.apq-mosca__control output { font-family: var(--font-display); font-weight: 700; margin-left: var(--space-2); }
.apq-mosca__control input[type="range"] { width: 100%; accent-color: var(--signal); height: 24px; }
.apq-mosca__control .apq-mosca__unknown { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: 14px; font-weight: 400; color: var(--ink-muted); }
.apq-mosca__unknown input { width: 18px; height: 18px; accent-color: var(--signal); margin: 0; }
@media (max-width: 720px) {
  .apq-mosca__controls { grid-template-columns: minmax(0, 1fr); }
  .apq-mosca__name { left: 0 !important; right: auto !important; text-align: left !important; }
}

/* ---------- ByteStrip ---------- */
.apq-bytes { display: grid; gap: var(--space-6); margin: 0; color: var(--ink); }
.apq-bytes__row { display: grid; grid-template-columns: 168px minmax(0, 1fr); column-gap: var(--space-5); align-items: end; }
.apq-bytes__name { padding-bottom: 6px; font-family: var(--font-display); font-size: 15px; line-height: 1.2; font-weight: 700; }
.apq-bytes__track { position: relative; }
.apq-bytes__dim { position: relative; height: 38px; }
.apq-bytes__dim-line { position: absolute; left: 0; top: 29px; border-top: var(--stroke-hair) solid var(--apq-bytes-ink); }
.apq-bytes__dim-line::before, .apq-bytes__dim-line::after { content: ""; position: absolute; top: -8px; width: var(--stroke-hair); height: 15px; background: var(--apq-bytes-ink); transform: rotate(45deg); }
.apq-bytes__dim-line::before { left: 0; }
.apq-bytes__dim-line::after { right: 0; }
.apq-bytes__value { position: absolute; top: 0; left: 0; white-space: nowrap; font-family: var(--font-display); font-size: 15px; line-height: 1.2; font-weight: 700; }
.apq-bytes__bar { position: relative; height: 30px; overflow: hidden; border-radius: var(--radius-sm); background: linear-gradient(180deg, var(--apq-bytes-wash), rgba(0,0,0,0)), var(--apq-dim-ground, var(--sheet)); box-shadow: inset 0 0 0 1px var(--apq-bytes-ink); font-family: var(--font-mono); font-size: 11px; line-height: 30px; letter-spacing: 0.04em; color: var(--apq-bytes-ink); white-space: nowrap; padding: 0 var(--space-2); box-sizing: border-box; }
.apq-bytes__bar.is-flash { animation: apq-flash 900ms var(--apq-ease); }
@keyframes apq-flash { 0% { box-shadow: inset 0 0 0 1px var(--apq-bytes-ink), 0 0 0 0 var(--apq-bytes-ink); } 30% { box-shadow: inset 0 0 0 1px var(--apq-bytes-ink), 0 0 26px 2px var(--apq-bytes-ink); } 100% { box-shadow: inset 0 0 0 1px var(--apq-bytes-ink), 0 0 0 0 rgba(0,0,0,0); } }
.apq-bytes__row--signal { --apq-bytes-ink: var(--signal); --apq-bytes-wash: var(--signal-wash); }
.apq-bytes__row--exposed { --apq-bytes-ink: var(--exposed); --apq-bytes-wash: var(--exposed-wash); }
.apq-bytes__row--neutral { --apq-bytes-ink: var(--line-strong); --apq-bytes-wash: rgba(0,0,0,0); }
.apq-bytes__caption { margin: 0; font-size: 14px; color: var(--ink-muted); }
@media (max-width: 720px) { .apq-bytes__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); } }

/* ---------- MemoryRing ---------- */
.apq-ring { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); align-items: center; margin: 0; }
.apq-ring__svg { display: block; overflow: visible; }
.apq-ring__track { fill: none; stroke: var(--band); }
/* the memory ring shows its final value when motion is off or never starts */
html:not(.apq-motion) .apq-ring__arc { stroke-dashoffset: var(--apq-ring-final) !important; }
.apq-motion:not(.apq-live) .apq-ring__arc { animation: apq-ring-fallback 1ms linear 2600ms forwards; }
@keyframes apq-ring-fallback { to { stroke-dashoffset: var(--apq-ring-final); } }
.apq-ring__arc { fill: none; stroke-linecap: round; filter: drop-shadow(0 0 8px var(--signal)); transition: stroke-dashoffset var(--apq-t-draw) var(--apq-ease) 200ms; }
.apq-ring__stop-a { stop-color: var(--signal); }
.apq-ring__stop-b { stop-color: var(--signal-lit); }
.apq-ring__tickmark { stroke: var(--line-strong); stroke-width: 1; }
.apq-ring__value { font-family: var(--font-display); font-weight: 800; fill: var(--ink); text-anchor: middle; }
.apq-ring__unit { font-family: var(--font-display); font-weight: 700; fill: var(--ink-muted); text-anchor: middle; }
.apq-ring__of { font-family: var(--font-text); fill: var(--ink-muted); text-anchor: middle; }
.apq-ring__legend { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); align-content: center; }
.apq-ring__legend dt { padding: var(--space-3) 0; border-top: var(--stroke-hair) solid var(--line); font-size: 14px; color: var(--ink-muted); }
.apq-ring__legend dd { margin: 0; padding: var(--space-3) 0; border-top: var(--stroke-hair) solid var(--line); font-size: 15px; font-weight: 600; }
.apq-ring__caption { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ink-muted); }
@media (max-width: 560px) { .apq-ring { grid-template-columns: minmax(0, 1fr); justify-items: center; } .apq-ring__legend { width: 100%; } }

/* ---------- DeviceDrawing ---------- */
.apq-device { position: relative; margin: 0; }
.apq-device__stage { position: relative; border-radius: var(--radius-md); overflow: hidden; background: #ffffff; box-shadow: var(--shadow-panel); }
.apq-device__img { display: block; width: 100%; height: auto; }
.apq-device__overlay { position: absolute; inset: 0; pointer-events: none; }
.apq-device__leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.apq-device__leaders line { stroke: #0a1834; stroke-width: 1; vector-effect: non-scaling-stroke; }
.apq-device__leaders .apq-arrive { transform: none; }
.apq-callout__dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: var(--radius-full); background: #062af3; box-shadow: 0 0 0 3px #ffffff, 0 0 0 4px rgba(6,42,243,0.4), 0 0 20px 2px rgba(6,42,243,0.5); }
.apq-callout__label { position: absolute; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 24px -8px rgba(10,24,52,0.35), inset 0 0 0 1px rgba(80,105,151,0.3); color: #0a1834; white-space: nowrap; }
.apq-callout__label.is-right { transform: translate(-100%, -50%); }
.apq-callout__label.is-left { transform: translate(0, -50%); }
.apq-callout__value { display: block; font-family: var(--font-display); font-size: 18px; line-height: 1.15; font-weight: 800; color: #0a1834; }
.apq-callout__text { display: block; font-size: 13px; line-height: 1.3; color: #384d73; }
.apq-device__caption { margin: var(--space-3) 0 0; font-size: 14px; color: var(--ink-muted); }
@media (max-width: 720px) { .apq-callout__value { font-size: 13px; } .apq-callout__text { display: none; } .apq-callout__label { padding: 4px 8px; } }

/* ---------- Claim (glass pop-up) and ClaimList ---------- */
.apq-claim { position: relative; font-size: 12px; line-height: 0; vertical-align: super; margin-left: 0.15em; font-family: var(--font-text); font-weight: 600; letter-spacing: 0; }
.apq-claim__btn { font: inherit; line-height: 1; padding: 2px 4px; margin: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--link); cursor: pointer; }
.apq-claim__btn:hover { background: var(--band); }
.apq-claim--verify .apq-claim__btn { color: var(--ahead); text-decoration: underline dotted; text-underline-offset: 2px; }
.apq-claim__pop { position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: max-content; max-width: min(320px, 80vw); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: var(--shadow-glass), inset 0 0 0 1px var(--glass-edge); font-size: 14px; line-height: 1.45; font-weight: 400; color: var(--ink); text-align: left; white-space: normal; animation: apq-pop var(--apq-t-lift) var(--apq-ease); }
@keyframes apq-pop { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.apq-claim__pop strong { display: block; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-1); }
.apq-claim__pop .is-verify { color: var(--ahead); }
.apq-claim__pop .is-source { color: var(--link); }
.apq-claim__pop .is-company { color: var(--ink); }
.apq-claim__pop a { display: inline-block; margin-top: var(--space-2); }
.apq-claims { list-style: none; margin: 0; padding: 0; max-width: 88ch; }
.apq-claims li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: var(--space-4); padding: var(--space-3); border-radius: var(--radius-sm); border-bottom: var(--stroke-hair) solid var(--line); font-size: 14px; line-height: 1.45; color: var(--ink-muted); transition: background-color var(--apq-t-hover) linear; }
.apq-claims li:target { background: var(--band); box-shadow: var(--glow-ahead); }
.apq-claims__n { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.apq-claims__text { color: var(--ink); }
.apq-claims__source { display: block; margin-top: var(--space-1); }
.apq-claims__status { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.apq-claims__status--source { color: var(--link); }
.apq-claims__status--verify { color: var(--ahead); }
.apq-claims__status--company { color: var(--ink-muted); }
@media (max-width: 720px) {
  .apq-claims li { grid-template-columns: 32px minmax(0, 1fr); }
  .apq-claims__status { grid-column: 2; margin-top: var(--space-2); }
}

/* ---------- SpecTable ---------- */
.apq-spec { width: 100%; border-collapse: collapse; color: var(--ink); }
.apq-spec caption { text-align: left; padding-bottom: var(--space-4); font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.apq-spec th, .apq-spec td { text-align: left; vertical-align: top; padding: var(--space-4) var(--space-5) var(--space-4) 0; border-top: var(--stroke-hair) solid var(--line); }
.apq-spec tr:first-child th, .apq-spec tr:first-child td { border-top: 0; }
.apq-spec tbody tr { transition: background-color var(--apq-t-hover) linear; }
.apq-spec tbody tr:hover { background: linear-gradient(90deg, var(--signal-wash), rgba(0,0,0,0) 70%); }
.apq-spec th { width: 32%; font-weight: 400; font-size: 15px; color: var(--ink-muted); padding-left: var(--space-3); }
.apq-spec td { font-size: 17px; font-weight: 600; }
.apq-spec td.is-mono { font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.6; }
.apq-spec sup { font-size: 0.7em; line-height: 0; }
.apq-spec__note { display: block; margin-top: var(--space-1); font-family: var(--font-text); font-size: 14px; font-weight: 400; color: var(--ink-muted); }
@media (max-width: 720px) {
  .apq-spec th, .apq-spec td { display: block; width: auto; padding-right: 0; }
  .apq-spec td { border-top: 0; padding-top: 0; padding-left: var(--space-3); }
}

/* ---------- Quote ---------- */
.apq-quote { margin: 0; max-width: 34em; position: relative; padding: var(--space-6) 0 0; }
.apq-quote::before { content: ""; position: absolute; left: 0; top: 0; width: 96px; height: var(--stroke-mark); border-radius: var(--radius-full); background: linear-gradient(90deg, var(--signal), var(--signal-lit)); box-shadow: var(--glow-signal); }
.apq-quote blockquote { margin: 0; font-family: var(--font-text); font-size: 28px; line-height: 1.3; font-weight: 400; letter-spacing: -0.005em; color: var(--ink); text-indent: -0.42em; }
.apq-quote__mark { color: var(--signal); font-family: var(--font-display); font-weight: 800; }
.apq-quote figcaption { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: 15px; color: var(--ink-muted); }
.apq-quote__name { font-weight: 600; color: var(--ink); }
@media (max-width: 720px) { .apq-quote blockquote { font-size: 22px; } }

/* ---------- IndexList ---------- */
.apq-index { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.apq-index__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.2fr) 40px; column-gap: var(--space-5); align-items: baseline; padding: var(--space-6) var(--space-5); border-radius: var(--radius-md); position: relative; border-bottom: var(--stroke-hair) solid var(--line); transition: background-color var(--apq-t-lift) var(--apq-ease), box-shadow var(--apq-t-lift) var(--apq-ease), transform var(--apq-t-lift) var(--apq-ease), border-color var(--apq-t-lift) linear; }
.apq-index__item:hover { background: var(--panel); box-shadow: var(--shadow-lift); transform: translateY(-2px); border-bottom-color: transparent; }
.apq-index__n { font-family: var(--font-display); font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: 0.1em; color: var(--link); }
.apq-index__title { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--ink); }
.apq-index__title a { color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.apq-index__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.apq-index__title a:focus-visible { outline: none; }
.apq-index__item:focus-within { outline: var(--stroke-mark) solid var(--focus); outline-offset: 3px; }
.apq-index__text { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-muted); max-width: 48ch; }
.apq-index__go { justify-self: end; color: var(--ink-faint); transition: transform var(--apq-t-lift) var(--apq-ease), color var(--apq-t-hover) linear; }
.apq-index__item:hover .apq-index__go { color: var(--signal); transform: translateX(4px); }
@media (max-width: 860px) {
  .apq-index__item { grid-template-columns: 40px minmax(0, 1fr) 28px; row-gap: var(--space-3); padding: var(--space-5) var(--space-3); }
  .apq-index__text { grid-column: 2 / 4; grid-row: 2; }
  .apq-index__go { grid-column: 3; grid-row: 1; }
}

/* ---------- Field ---------- */
.apq-field { display: grid; gap: var(--space-2); max-width: 560px; }
.apq-field__label { font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.apq-field__req { color: var(--ink-muted); font-weight: 400; margin-left: var(--space-2); }
.apq-field__hint { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.apq-field__control { box-sizing: border-box; width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); background: var(--sheet); color: var(--ink); border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-sm); font: 400 17px/1.4 var(--font-text); box-shadow: inset 0 1px 2px rgba(0,0,0,0.12); transition: border-color var(--apq-t-hover) linear, box-shadow var(--apq-t-lift) var(--apq-ease); }
textarea.apq-field__control { min-height: 144px; resize: vertical; }
select.apq-field__control { appearance: none; background-image: none; padding-right: var(--space-7); }
.apq-field__select { position: relative; }
.apq-field__select::after { content: ""; position: absolute; right: var(--space-4); top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: var(--stroke-hair) solid var(--ink); border-bottom: var(--stroke-hair) solid var(--ink); transform: rotate(45deg); pointer-events: none; }
.apq-field__control::placeholder { color: var(--ink-faint); }
.apq-field__control:hover { border-color: var(--ink-muted); }
.apq-field__control:focus-visible { outline: var(--stroke-mark) solid var(--focus); outline-offset: 3px; border-color: var(--signal); box-shadow: var(--glow-signal); }
.apq-field__control:disabled { border-style: dashed; color: var(--ink-faint); cursor: not-allowed; }
.apq-field.is-invalid .apq-field__control { border-color: var(--error); box-shadow: var(--glow-exposed); }
.apq-field__error { margin: 0; font-size: 14px; line-height: 1.45; color: var(--error); }
.apq-field__error strong { font-weight: 700; }

/* ---------- Notice ---------- */
.apq-notice { position: relative; max-width: 640px; padding: var(--space-4) var(--space-5) var(--space-5); border-radius: var(--radius-md); background: var(--panel); box-shadow: var(--shadow-panel); overflow: hidden; }
.apq-notice::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--stroke-mark); background: var(--apq-notice-ink, var(--line-strong)); }
.apq-notice--info { --apq-notice-ink: var(--line-strong); }
.apq-notice--loading { --apq-notice-ink: var(--line); }
.apq-notice--success { --apq-notice-ink: var(--signal); box-shadow: var(--shadow-panel), var(--glow-signal); }
.apq-notice--error { --apq-notice-ink: var(--error); box-shadow: var(--shadow-panel), var(--glow-exposed); }
.apq-notice--empty { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.apq-notice--empty::before { background: none; border-top: var(--stroke-mark) dashed var(--line-strong); height: 0; }
.apq-notice__title { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.apq-notice__word { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-right: var(--space-3); }
.apq-notice--success .apq-notice__word { color: var(--link); }
.apq-notice--error .apq-notice__word { color: var(--error); }
.apq-notice--info .apq-notice__word, .apq-notice--empty .apq-notice__word, .apq-notice--loading .apq-notice__word { color: var(--ink-faint); }
.apq-notice__body { margin: var(--space-2) 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); max-width: var(--layout-measure); }
.apq-notice__action { margin-top: var(--space-4); }
.apq-notice__progress { position: absolute; left: 0; top: 0; height: var(--stroke-mark); width: 30%; background: linear-gradient(90deg, var(--signal), var(--signal-lit)); box-shadow: var(--glow-signal); animation: apq-measure 1.6s var(--apq-ease-in-out) infinite; }
@keyframes apq-measure { 0% { left: 0; width: 0; } 50% { left: 0; width: 100%; } 100% { left: 100%; width: 0; } }
.apq-skeleton { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.apq-skeleton span { display: block; height: 12px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--band) 0%, var(--line) 50%, var(--band) 100%); background-size: 200% 100%; animation: apq-shimmer 1.4s linear infinite; }
.apq-skeleton span:nth-child(2) { width: 82%; }
.apq-skeleton span:nth-child(3) { width: 64%; }
@keyframes apq-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- preview helpers (used by preview.html only) ---------- */
.apq-demo { padding: var(--space-6); }
.apq-demo-row { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.apq-demo-stack { display: grid; gap: var(--space-6); }