@property --gutter { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root {
  --frame-inset: 0px;
  --header-h: 3.5rem; --header-rows: 1; --header-row: var(--header-h); --header-fade: 0.75rem;
  
  --logo-air: 0.5rem;
  --nav-pad: 0.625rem; --nav-pad-inline: 0.625rem; --nav-gap: 0.5rem;
  
  --nav-reserve: 10rem; --header-rows-wrapped: 2; --nav-reserve-kept: calc(var(--nav-reserve) * (var(--header-rows-wrapped) - var(--header-rows)));
  --wall-gap: clamp(12px, 6vw - 12px, 72px);
  --wall-inset: calc(var(--frame-inset) + 1px + var(--wall-depth) + var(--wall-gap));
  --wall-fade: calc(var(--wall-depth) + var(--wall-gap));
  --page-floor: 0px; --transport-lane: 0px;
  --page-max: 1200px; --page-share: 10vw;
  --page-least-side: var(--wall-inset);
  @media (min-width: 40rem) { --page-least-side: max(var(--wall-inset), var(--page-share), (100vw - var(--page-max)) / 2); }
  --page-side: max(var(--page-least-side), var(--page-floor), var(--transport-lane));
  --page-start: max(var(--page-least-side), var(--page-floor));
  --column-pad: 0px;
  --rule-bar-length: 1.25rem; --rule-downbeat: 0.1875rem; --rule-beat: 0.0625rem;
  --dash-on: 4px; --dash-off: 3px;
  --dash: var(--dash-on) var(--dash-off); --dash-period: calc(var(--dash-on) + var(--dash-off));
  --header-bottom: calc(var(--wall-inset) + var(--header-pad-top) + var(--header-rows) * var(--header-row));
  --bullet-size: 0.5rem;
  --mark-gap: 0.5rem; --mark-column: 6.5rem;
  
  --key-min: 40px; --engraved-size: 0.625rem; --engraved-tracking: 0.12em;
  --engraved-size-narrow: 0.5625rem; --engraved-tracking-narrow: 0.06em;
  
  --plate-cast-shadow: 0 0 var(--plate-cast-blur) var(--plate-cast);
  --plate-edges:
    calc(-1 * var(--chamfer)) calc(-1 * var(--chamfer)) 0 var(--chamfer-lit), var(--chamfer) var(--chamfer) 0 var(--chamfer-shade),
    0 0 0 calc(var(--chamfer) + 1px) var(--plate-edge), var(--plate-cast-shadow);
  
  --rack-gap: clamp(14px, 3.5vw, 52px); --rack-side: clamp(6px, 1.5vw, 22px); --cast-centre: 54%; --rack-foot-w: 0.06; --rack-foot-c: 0.15; --rack-foot-disc: 0.78; --rack-foot-collar: 0.1; --rack-foot-tip: 0.86; --rack-foot-shadow: 1.5; --rack-lip: 3px;
  --bezel-w: 4px; --needle-peg: -50deg; --needle-sweep: 100deg; --needle-swing: 0.6s;
  
  --meter-lip-h: 10px; --meter-sensor-at: 12%; --meter-sensor-w: 2.5%;
  --meter-hairline: 0.55; --meter-major: 0.85; --meter-rule: 1; --meter-needle-w: 1; --meter-glow-w: 3.2; --meter-needle-root: 16; --meter-needle-reach: 240; --meter-rim-w: 2.6;
  --meter-type: 9.5px; --meter-legend: 8px; --meter-tracking: 0.04em;
  --plate-band: clamp(2.25rem, 1.75rem + 1.5vw, 3.25rem);
  --lip: 0 1px 0 var(--bevel-hi);

  --gutter: clamp(var(--space-6), 3vw, var(--space-12));
  --figure-wide-max: 90rem;
  --flow-max: 80rem;
  --figure-side-columns: minmax(0, 2fr) minmax(14rem, 1fr);
  --measure: 36rem;
  --measure-wide: 44rem;
  --pair-gap: var(--space-12); --pair-max: calc(2 * var(--measure) + var(--pair-gap));
  --stage-gap: var(--space-12);
  --uniq-face-max: 22rem;
  --day: 3.25rem;
  --section-gap: var(--space-8);
  --space-section: calc(2 * var(--gutter));
  --space-head: clamp(var(--space-6), var(--space-4) + 2vw, var(--space-12));
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.layout-slot:empty { display: none; }



html { -webkit-text-size-adjust: 100%; overflow-x: clip; background: var(--floor-surface); scroll-padding-top: calc(var(--header-bottom) + 1rem); }


body {
  position: relative; margin: var(--wall-inset) var(--page-side) var(--wall-inset) var(--page-start); overflow: clip;
  background: var(--paper-surface); box-shadow: var(--plate-edges); border-radius: var(--plate-radius); color: var(--ink-soft); accent-color: var(--accent-fill);
  font: var(--body-weight) var(--body-size) / var(--leading-body) var(--font-body); letter-spacing: var(--tracking-body);
  font-optical-sizing: auto;
}

img, svg, canvas { display: block; max-width: 100%; }


a[href^="mailto:"] { overflow-wrap: anywhere; }
a { color: inherit; text-decoration-color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: var(--underline-hover); }

:is(.guide-crumb, .guide-more > p, .facts > dd, .stage-source, :is(.checklist, .red-flags) li > strong) > a {
  position: relative;
  &::before { content: '' / ''; position: absolute; inset: min(0px, (100% - var(--tap-min)) / 2); }
}
:is(.checklist, .red-flags) li > strong > a::before { inset-block: min(0px, 100% - var(--tap-min)) 0; }

:is(.guide :is(.prose, .guide-body), .piece-meta, .footer-links) a:not(.button) {
  --wiped: 0; --wipe-weight: var(--underline-hover);
  background: linear-gradient(var(--accent-ink) 0 0)
    left calc(100% * (1 - var(--wiped)) + var(--wiped) * var(--wipe-start, 0px)) bottom var(--wipe-drop, 0.05em) / calc(var(--wiped) * (100% - var(--wipe-start, 0px))) var(--wipe-weight) no-repeat;
  text-decoration-color: color-mix(in srgb, var(--accent-ink) calc(100% - var(--wiped) * 100%), transparent);
  @media (hover: hover) { &:hover { --wiped: 1; } }
  &:focus-visible { --wiped: 1; }
  @media (prefers-reduced-motion: no-preference) { transition: background-size var(--wipe-time) ease, text-decoration-color var(--hover-fade); }
}

main a[target='_blank']:not(.button) {
  --flown: 0;
  @media (hover: hover) { &:hover { --flown: 1; } }
  &:focus-visible { --flown: 1; }
}
main a[target='_blank']:not(.button)::after {
  --out-arrow: 0.75em;
  content: '\2060' / ''; padding-inline-start: calc(0.2em + var(--out-arrow));
  background: currentColor;
  mask:
    linear-gradient(#000 0 0) right 0 top 50% / var(--out-arrow) var(--out-arrow) no-repeat,
    var(--button-arrow-out) right calc(-1 * var(--flown) * var(--out-arrow)) top calc(50% - var(--flown) * var(--out-arrow)) / var(--out-arrow) var(--out-arrow) no-repeat,
    var(--button-arrow-out) right calc((1 - var(--flown)) * var(--out-arrow)) top calc(50% + (1 - var(--flown)) * var(--out-arrow)) / var(--out-arrow) var(--out-arrow) no-repeat;
  mask-composite: intersect, add;
  @media (prefers-reduced-motion: no-preference) { transition: mask-position var(--sweep-time) var(--ease-sweep); }
  @media (forced-colors: active) { background: LinkText; forced-color-adjust: none; }
}


::selection { background: var(--accent-fill); color: var(--on-accent); }

:focus-visible, .button:has(> input.visually-hidden:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius); }

.visually-hidden, :is([role="status"], [role="alert"], [aria-live]):empty {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: var(--gutter); top: -4rem; z-index: 60; background: var(--ink); color: var(--paper); padding: 0.5rem 0.75rem; }
.skip-link:focus { top: calc(var(--frame-inset) + var(--gutter)); }

.nowrap { white-space: nowrap; }

.wrap { margin-inline: auto; padding-inline: var(--gutter); }


@keyframes fade-in { from { opacity: 0; } }



h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--font-display); text-transform: var(--title-case); letter-spacing: var(--tracking-display); text-wrap: balance; }
h2 { font-size: var(--step-4); font-weight: var(--heading-weight); line-height: var(--leading-heading); }

@property --title-word { syntax: '<number>'; inherits: false; initial-value: 1; }

h1, .acoustics-band h2, .closing h2 { font: var(--title-weight) min(var(--title-size), 100cqi / var(--title-word)) / var(--leading-title) var(--font-display); text-transform: var(--title-case); min-width: min-content; }

:is(.hero-inner, .page-head, .guide-head, .acoustics-band, .closing) { container-type: inline-size; }

h1:not([style*="--title-word"]) { overflow-wrap: anywhere; }
p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
:where(.section, .section > header, .guide-head, .hero-inner, .hero-text, .booking-form) > p { margin-block: 0; }
h4, h5 { color: var(--ink); text-wrap: balance; }
:is(strong, dt, th, summary, legend) { color: var(--ink); }

.data { white-space: nowrap; font-family: var(--font-data); font-size: 0.9em; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.email { text-transform: none; }

:is(.hero-place, :is(.facts, .booking-row dl) > dt, :is(.stage-facts, .uniq-facts) dt, .guide-crumb, .stage-maker, .uniq-maker, .client-scope, .package-tag, .package h4, 
    .status-pill, .figure-speed, .rm-view-caption, .month th, .guide-contents, .site-nav, .page-menu, .learn-filter,
    .footer-links, .field > label, legend.label, .dinner > legend, .flow-picker > legend, .modes-pick > label, .piece-meta, .piece-dims, .plot-scale, .flow-label, .dr-label,
    .guide-more > p, .problems dt, .chip span, .modes-count, .modes-walls, .modes-meter-scale, .chain-link-label, .chain-station, .chain-key),
.section-mark::before, .section-mark > .track-length, :where(.rules) strong, :is(.notice, .visit-card, .slot-summary, .visit-policy) > :first-child,
.notice:not(:has(> *)) {
  font-family: var(--font-ui); font-weight: var(--label-weight); font-size: var(--label-size); line-height: 1.3;
  text-transform: var(--label-case); letter-spacing: var(--label-tracking);
}
:is(.figure-speed, .rm-view-caption, .piece-dims, .plot-scale, .flow-label, .dr-label, .modes-walls, .modes-meter-scale, .chain-station, .chain-key) { --label-size: var(--step--2); }
:is(.field > label, legend.label) .hint { text-transform: none; font-family: var(--font-body); }


h3, :is(.guides, .chain-step, .film) h4, .sheet figcaption, :where(.principles, .partners .rules) strong, :is(.extras, .choice) > legend, .glossary dt, .flow-side dt, .guide-body .rules strong {
  font: var(--heading-weight) var(--step-2) / var(--leading-heading) var(--font-display); text-transform: var(--title-case); letter-spacing: var(--tracking-display);
}




:root, .stage {
  --rule-bar-stops:
    var(--rule) 0 var(--rule-downbeat), transparent 0 calc(var(--rule-bar-length) / 4),
    var(--rule) 0 calc(var(--rule-bar-length) / 4 + var(--rule-beat)), transparent 0 calc(var(--rule-bar-length) / 2),
    var(--rule) 0 calc(var(--rule-bar-length) / 2 + var(--rule-beat)), transparent 0 calc(var(--rule-bar-length) * 3 / 4),
    var(--rule) 0 calc(var(--rule-bar-length) * 3 / 4 + var(--rule-beat)), transparent 0 var(--rule-bar-length);
  --bar-rule: repeating-linear-gradient(90deg, var(--rule-bar-stops));
  --rule-solid-v: linear-gradient(var(--rule) 0 0);
}



:root {
  --page-frame-rule: linear-gradient(var(--rule) 0 0);
  --page-frame-strip: linear-gradient(var(--floor) 0 0);
  --page-frame-paint:
    var(--page-frame-rule) left var(--frame-inset) top var(--frame-inset) / calc(100% - 2 * var(--frame-inset)) 1px no-repeat,
    var(--page-frame-rule) left var(--frame-inset) bottom var(--frame-inset) / calc(100% - 2 * var(--frame-inset)) 1px no-repeat,
    var(--page-frame-rule) left var(--frame-inset) top var(--frame-inset) / 1px calc(100% - 2 * var(--frame-inset)) no-repeat,
    var(--page-frame-rule) right var(--frame-inset) top var(--frame-inset) / 1px calc(100% - 2 * var(--frame-inset)) no-repeat,
    var(--page-frame-strip) top / 100% calc(var(--frame-inset) + 1px) no-repeat,
    var(--page-frame-strip) bottom / 100% calc(var(--frame-inset) + 1px) no-repeat,
    var(--page-frame-strip) left / calc(var(--frame-inset) + 1px) 100% no-repeat,
    var(--page-frame-strip) right / calc(var(--frame-inset) + 1px) 100% no-repeat;
}
body::before { content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; background: var(--page-frame-paint); }

@media (forced-colors: active) { body::before { inset: var(--frame-inset); border: 1px solid; } }


.treated-border {
  position: fixed; inset: calc(var(--frame-inset) + 1px); z-index: 50; container-type: size; pointer-events: none;
  &::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    --column-start: calc(var(--page-start) - var(--frame-inset) - 1px);
    --column-w: calc(100% - var(--column-start) - (var(--page-side) - var(--frame-inset) - 1px));
    background:
      linear-gradient(var(--paper), transparent) left var(--column-start) top / var(--column-w) var(--wall-fade) no-repeat,
      linear-gradient(transparent, var(--paper)) left var(--column-start) bottom / var(--column-w) var(--wall-fade) no-repeat;
    clip-path: inset(var(--plate-above) 0 var(--plate-below));
    @supports (animation-timeline: scroll()) {
      animation: plate-start linear both, plate-end linear both; animation-timeline: scroll(root), scroll(root);
      animation-range: 0px var(--wall-fade), calc(100% - var(--wall-fade)) 100%;
    }
  }
  @media print { &::before { display: none; } }
  & .border-defs { position: absolute; }
  & .border-edge { position: absolute; left: 0; top: 0; display: flex; width: 100cqw; transform-origin: 0 0; }
  & .border-edge[data-side="right"] { left: 100%; width: 100cqh; rotate: 90deg; }
  & .border-edge[data-side="bottom"] { left: 100%; top: 100%; rotate: 180deg; }
  & .border-edge[data-side="left"] { top: 100%; width: 100cqh; rotate: 270deg; }
  & .border-cap { flex: none; overflow: visible; inline-size: var(--wall-cap); block-size: var(--wall-depth); }
  & .border-run { flex: 1; min-width: 0; position: relative; }
  & .border-units { position: absolute; inset: 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; overflow: hidden; }
  & .border-units > * { flex: none; display: block; max-width: none; block-size: var(--wall-depth); }
  & .border-units > i { height: 100%; }
  & .border-group { display: flex; }
  & .border-group > * { flex: none; display: block; max-width: none; block-size: var(--wall-depth); }
  & .border-unit { inline-size: var(--wall-unit); }
  & .border-unit-spaced { inline-size: var(--wall-spaced); }
}

.border-fabric { fill: var(--lora); }
.border-warp { fill: var(--lora-light); }
.border-weft { fill: var(--lora-dark); }
.border-seam { stroke: var(--lora-dark); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.border-block { stroke: var(--wood-shadow); stroke-width: 0.6px; vector-effect: non-scaling-stroke; }
.border-wood-0 { fill: var(--wood-0); } .border-wood-1 { fill: var(--wood-1); } .border-wood-2 { fill: var(--wood-2); }
.border-wood-3 { fill: var(--wood-3); } .border-wood-4 { fill: var(--wood-4); } .border-wood-5 { fill: var(--wood-5); }
.border-grain { fill: none; stroke: var(--wood-grain); stroke-width: 0.6px; vector-effect: non-scaling-stroke; }
@media (forced-colors: active) {
  :is(.border-fabric, .border-warp, .border-weft, [class*="border-wood-"]) { fill: Canvas; }
  :is(.border-seam, .border-block) { stroke: CanvasText; }
  .border-grain { stroke: none; }
}

:root, .stage { --bullet: linear-gradient(var(--accent) 0 0) left center / var(--bullet-size) var(--bullet-size) no-repeat; }


.stage {
  --ink: var(--stage-ink); --ink-soft: var(--stage-soft); --ink-mute: var(--stage-soft); --rule: var(--stage-rule); --tick: var(--stage-tick); --accent: var(--stage-accent); --accent-ink: var(--stage-accent);
  --poche: var(--stage-soft); --zone-blend: normal; --focus: var(--stage-focus); --bevel-hi: var(--stage-tick);
}

:is(figure, .chain) { --accent: var(--illustration-accent); --accent-fill: var(--illustration-accent); --accent-ink: var(--illustration-ink); --stage-accent: var(--illustration-stage); }
.stage :is(figure, .chain) { --accent: var(--stage-accent); --accent-ink: var(--stage-accent); }
:is(figure, .chain) :is(a, button, input, .chip, .cross-fader) { --accent: var(--interface-accent); --accent-fill: var(--interface-accent); --accent-ink: var(--interface-ink); --stage-accent: var(--interface-stage); }

:is(#gallery, .guides) > li:is(:hover, :has(:focus-visible)) { --ink-fill: 100%; --print-shrink: var(--print-shrunk); --hover-zoom: var(--print-zoom); --surface-fill: var(--paper-sunk); }

.stage {
  --window-glass: var(--stage-recess), var(--stage) var(--window-depth);
  color: var(--ink);
  border-image: linear-gradient(var(--screen) 0 1px, var(--window-glass) calc(100% - 1px), var(--stage-rule) calc(100% - 1px)) fill 0 / 0 / 0 100vmax;
  clip-path: inset(0 -100vmax); --surface-fill: var(--stage);
}



.site-header {
  position: sticky; top: var(--wall-inset); z-index: 40; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between;
  container-type: inline-size; min-height: calc(var(--header-h) + var(--header-pad-top)); padding-block-start: var(--header-pad-top); background: var(--paper-surface);
}

.site-header::after { content: ''; position: absolute; inset: 100% 0 auto; block-size: var(--header-fade); background: linear-gradient(var(--paper), transparent); pointer-events: none; }

@property --plate-above { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --plate-below { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes plate-start { from { --plate-above: var(--wall-fade); } to { --plate-above: 0px; } }
@keyframes plate-end { to { --plate-below: var(--wall-fade); } }

.site-header::before { content: ''; position: absolute; inset: calc(-1 * var(--wall-inset)) 0 100%; background: var(--paper-surface); }

.wordmark { display: inline-flex; align-items: center; min-height: var(--header-h); padding-inline: var(--gutter); color: var(--ink); text-decoration: none; }
.wordmark { flex: 0 1 auto; min-width: 0; max-width: calc(100cqw - var(--nav-reserve-kept)); }
.wordmark .mark-drawing { height: min(var(--logo-size), var(--header-h) - 2 * var(--logo-air)); width: auto; max-width: 100%; }

.mark-drawing { display: block; }
:is(.mark-letters, .mark-lit) { fill: none; stroke: currentColor; stroke-width: 1px; stroke-linejoin: miter; }
:is(.wordmark, .footer-mark) { --mark-dim: color-mix(in srgb, currentColor 22%, var(--paper)); }
:is(.wordmark, .footer-mark).is-lit .mark-letters { stroke: var(--mark-dim); }

@media (not (prefers-reduced-motion: reduce)) and (not (forced-colors: active)) { html[data-name-lit] .wordmark .mark-letters { stroke: var(--mark-dim); } }
.mark-lit { fill: currentColor; }
@media (forced-colors: active) { :is(.mark-letters, .mark-lit), :is(.wordmark, .footer-mark).is-lit .mark-letters { stroke: CanvasText; } .mark-lit { display: none; } }

:root { --header-slide: 0.4s; }
body { --header-cover: var(--header-bottom); --sticky-top: calc(var(--header-cover) + 1.5rem); }
@media (min-width: 52rem) and (prefers-reduced-motion: no-preference) {
  .site-header { transition: translate var(--header-slide) ease; }
  .site-header.is-hidden { translate: 0 calc(-100% - var(--wall-depth) - var(--wall-gap)); pointer-events: none; }
  .site-header.is-instant { transition: none; }
  body:has(> .site-header.is-hidden) { --header-cover: var(--wall-inset); }
  :is(.policy section > h2, .guide > .guide-contents, .system-tabs, .system-sheets, .packages.is-stacked > .package) { transition: top var(--header-slide) ease; }
}
:is(.site-nav, .page-menu) ul { list-style: none; margin: 0; padding: 0; }
.page-menu ul { display: flex; flex-wrap: wrap; column-gap: var(--space-6); }
:is(.site-nav, .page-menu) li { position: relative; display: flex; }
.site-nav > ul > li { flex: none; }

.site-nav .button.quiet {
  --button-ink: var(--ink-soft); flex: 1; min-height: var(--header-h); padding: var(--nav-pad) var(--nav-pad-inline);
  border: 0; border-radius: 0; background: none; box-shadow: none; text-shadow: var(--engraved);
}
.site-nav .button.quiet[aria-current] { --button-ink: var(--ink); }
@media (forced-colors: active) { .site-nav .button.quiet { background: none; } }
.site-nav .nav-cta { align-items: center; padding-inline-end: var(--nav-pad-inline); }
.site-nav .nav-cta .button { --button-pad-inline: var(--nav-pad-inline); }

@property --beam { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.site-header .site-nav .button.quiet::before {
  --beam: var(--beam-start);
  content: attr(data-legend) / ''; inset: 0; z-index: auto; translate: none; inline-size: auto; block-size: auto; border-radius: 0; box-shadow: none; pointer-events: none;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: inherit; white-space: nowrap;
  color: transparent; text-shadow: none;
  background: linear-gradient(var(--beam-angle), transparent calc(var(--beam) - var(--beam-width)), var(--beam-lit) var(--beam), transparent calc(var(--beam) + var(--beam-width)));
  -webkit-background-clip: text; background-clip: text;
}
@keyframes beam-cross { from { --beam: var(--beam-start); } to { --beam: var(--beam-end); } }
@media (prefers-reduced-motion: no-preference) {
  .site-header .site-nav .button.quiet:is(:hover, :active, :focus-visible)::before { animation: beam-cross var(--beam-time) ease-out both; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .site-nav .button.quiet:is(:hover, :active, :focus-visible)::before { --beam: var(--beam-held); }
}
@media (forced-colors: active) {
  .site-header .site-nav .button.quiet::before { content: none; }
  .site-header .site-nav .button.quiet:is(:hover, :active, :focus-visible) { color: Highlight; }
}

:is(.guide-contents, .learn-filter) { --current-room: calc(2 * var(--current-inset) + var(--bullet-size)); }
@property --current-square-ink { syntax: '<color>'; inherits: false; initial-value: transparent; }
:is(.guide-contents a, .learn-filter a)[aria-current] {
  --current-square-ink: var(--ink);
  background: linear-gradient(var(--current-square-ink) 0 0) right var(--current-inset) center / var(--bullet-size) var(--bullet-size) no-repeat;
}

:root { --current-square-from: 0.9; }
@media (prefers-reduced-motion: no-preference) {
  .guide-contents a[aria-current] { animation: current-square-in var(--hover-fade) ease; }
  .guide-contents a::before { transition: color var(--hover-fade); }
}
@keyframes current-square-in {
  from { --current-square-ink: transparent; background-size: calc(var(--current-square-from) * var(--bullet-size)) calc(var(--current-square-from) * var(--bullet-size)); }
}
.page-menu a { display: flex; align-items: center; min-height: var(--tap-min); color: var(--ink-soft); text-decoration: none; }
.page-menu a:hover { color: var(--ink); text-decoration: underline; }

.guide-contents a {
  --ticked: 0; position: relative; padding-inline: 1.25rem;
  @media (hover: hover) { &:hover { --ticked: 1; } }
  &:is(:focus-visible, :active) { --ticked: 1; }
}
.guide-contents a::after {
  --corner-tick-size: 4px; --corner-tick-travel: 6px; --corner-tick: linear-gradient(var(--ink) 0 0);
  --tick-arriving: calc(var(--ticked) * var(--corner-tick-travel) - (1 - var(--ticked)) * var(--corner-tick-size));
  --tick-leaving: calc((1 - var(--ticked)) * var(--corner-tick-travel) - var(--ticked) * var(--corner-tick-size));
  content: '' / ''; position: absolute; inset: 0; pointer-events: none;
  background:
    var(--corner-tick) left var(--tick-arriving) top var(--tick-arriving),
    var(--corner-tick) right var(--tick-arriving) bottom var(--tick-arriving),
    var(--corner-tick) right var(--tick-leaving) top var(--tick-leaving),
    var(--corner-tick) left var(--tick-leaving) bottom var(--tick-leaving);
  background-size: var(--corner-tick-size) var(--corner-tick-size); background-repeat: no-repeat;
  @media (prefers-reduced-motion: no-preference) { transition: background-position var(--sweep-time) var(--ease-sweep); }
}
.guide-contents a:active::after { transition-duration: 0s; }

.site-nav { display: flex; flex: none; margin-inline-start: auto; padding-inline-start: var(--nav-gap); }
.site-nav > ul { display: flex; }

@media (max-width: 23.37rem) {
  :root { --header-rows: var(--header-rows-wrapped); }
  .site-nav { flex: 1 0 100%; padding-inline-start: 0; }
  .site-nav > ul { flex: 1; }
  .site-nav > ul > li { flex: 1; }
  .site-nav > ul > li > .button { flex: 1; justify-content: center; }
}

:is(.site-nav .button.quiet, .guides a, #gallery a.frame):focus-visible { outline: none; }
.site-nav li:has(> .button.quiet:focus-visible)::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
:is(.site-nav li:has(> .button.quiet:focus-visible), .guides a:focus-visible, #gallery a.frame:focus-visible)::after {
  --ring-width: 2px; --ring-gap: 4px;
  box-shadow: inset 0 0 0 var(--ring-gap) var(--paper); outline: var(--ring-width) solid var(--focus); outline-offset: calc(-1 * (var(--ring-width) + var(--ring-gap)));
}

.nav-menu > ul {
  --menu-top: min(var(--header-bottom), 100dvh - var(--frame-inset) - var(--header-row));
  inset: var(--menu-top) calc(var(--page-side) + var(--rack-side)) auto calc(var(--page-start) + var(--rack-side)); width: auto; max-height: calc(100dvh - var(--menu-top) - var(--frame-inset)); margin: 0; overflow: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--rule); border-top: 0; background: var(--paper-surface); color: var(--ink);
}
.nav-menu > ul:popover-open { display: grid; }
.nav-menu:has(> :popover-open) > .button { --button-ink: var(--ink); }
.nav-menu > ul > li:nth-child(n + 3) { border-top: 1px solid var(--rule); }
.nav-menu > ul > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (prefers-reduced-motion: no-preference) {
  .nav-menu > ul {
    --menu-wipe: 0.4s; --menu-folded: inset(0 0 100% 0);
    clip-path: var(--menu-folded);
    transition: clip-path var(--menu-wipe) ease, overlay var(--menu-wipe) allow-discrete, display var(--menu-wipe) allow-discrete;
  }
  .nav-menu > ul:popover-open { clip-path: inset(0); }
  @starting-style { .nav-menu > ul:popover-open { clip-path: var(--menu-folded); } }
}

:root { --held: 0; }
.site-header, main, .site-footer, .page-scroll { opacity: calc(1 - var(--held)); }


:root {
  --fader-cap-w: 1.75rem; --fader-cap-h: 1rem; --fader-cap-grip: 0.1875rem; --fader-index: 2px; --fader-index-lit: 4px; --fader-slot-w: 5px;
  --knob-detent: steps(3); --fader-intent: 120ms; --fader-linger: 350ms; --fader-reveal: 300ms; --fader-dimmed: 0.45;
}

:is(.cross-fader, .zone-fader .fader-travel) {
  --fader-track: var(--tap-min);
  --cap-edge: calc((var(--fader-track) - var(--fader-cap-w)) / 2);
  --cross-fader-rule: linear-gradient(var(--ink) 1px, var(--poche) 1px calc(100% - 1px), var(--ink) calc(100% - 1px));
  --cross-fader-slot: var(--cross-fader-rule) center / calc(100% - var(--fader-cap-h)) var(--fader-slot-w) no-repeat;
  --cross-fader-cap:
    linear-gradient(var(--accent) 0 0) center / var(--fader-index) var(--fader-cap-w) no-repeat,
    linear-gradient(var(--ink-mute) 0 0) calc(50% - 2 * var(--fader-cap-grip)) center / 1px calc(var(--fader-cap-w) - 2px) no-repeat,
    linear-gradient(var(--ink-mute) 0 0) calc(50% + 2 * var(--fader-cap-grip)) center / 1px calc(var(--fader-cap-w) - 2px) no-repeat,
    linear-gradient(var(--ink) 0 0) left center / 1px var(--fader-cap-w) no-repeat,
    linear-gradient(var(--ink) 0 0) right center / 1px var(--fader-cap-w) no-repeat,
    linear-gradient(var(--ink) 0 0) left 0 top var(--cap-edge) / 100% 1px no-repeat,
    linear-gradient(var(--ink) 0 0) left 0 bottom var(--cap-edge) / 100% 1px no-repeat,
    linear-gradient(var(--paper) 0 0) center / 100% var(--fader-cap-w) no-repeat;
}
.cross-fader {
  display: block; inline-size: 100%; block-size: var(--fader-track); margin: 0; padding: 0;
  appearance: none; -webkit-appearance: none; background: var(--cross-fader-slot); touch-action: pan-y;
  &::-webkit-slider-runnable-track { block-size: 100%; background: none; border: 0; }
  &::-moz-range-track { block-size: 100%; background: none; border: 0; }
  &::-moz-range-progress { background: none; }
  &::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; inline-size: var(--fader-cap-h); block-size: 100%; border: 0; border-radius: 0; background: var(--cross-fader-cap); }
  &::-moz-range-thumb { inline-size: var(--fader-cap-h); block-size: 100%; border: 0; border-radius: 0; background: var(--cross-fader-cap); }
  &:is(:active, :focus-visible) { --fader-index: var(--fader-index-lit); }
  &:focus-visible { outline: none; box-shadow: var(--fader-focus); }
  @media (forced-colors: active) {
    &:focus-visible { outline: 2px solid Highlight; box-shadow: none; }
    appearance: auto; -webkit-appearance: auto; background: none;
    &::-webkit-slider-thumb { appearance: auto; -webkit-appearance: auto; }
  }
}

@media (min-width: 83rem) {
  :root { --header-h: 5rem; --logo-air: 1rem; --nav-pad-inline: 1.5rem; --nav-gap: 2rem; --nav-reserve: 36rem; }
  .nav-menu:not(:has(> :popover-open)) { display: contents; }
  .nav-menu > ul:not(:popover-open) { display: contents; }
  .nav-menu > ul:not(:popover-open) > li { border-top: 0; grid-column: auto; }
  .nav-menu:not(:has(> :popover-open)) > .button { display: none; }
  .site-nav { position: relative; }
}
@media (min-width: 40rem) and (max-width: 82.99rem) { :root { --nav-pad-inline: 1.25rem; --nav-gap: 1.5rem; --nav-reserve: 14.5rem; } }




main .button:not(.small-key) { max-width: 100%; white-space: normal; text-wrap: balance; text-align: center; line-height: var(--key-legend-leading); }




.hero { padding-block: var(--space-head); }
.hero:has(.hero-drawing) { padding-top: 0; }
.hero-inner { --hero-gap: var(--space-4); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hero-gap); align-items: start; }
.hero-text { display: grid; align-content: start; min-width: 0; }
.hero h1 { order: -1; text-wrap: balance; }
.hero .lede { font-size: var(--step-1); max-width: 30rem; color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; }

.hero-place { color: var(--accent-ink); margin-bottom: 0; min-height: 1lh; }
.hero-note { flex: 1 1 18rem; margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.hero-note .data { font-size: 1em; }

.opening { padding-block-end: var(--space-head); }
@media (min-width: 72rem) { .opening + .section > header { --opens-from-below: 1; } }

@media (prefers-reduced-motion: no-preference) and (min-width: 72rem) {
  @supports (animation-timeline: view()) {
    .opens-from-below { animation: open-from-below linear both; animation-timeline: view(block 0px); animation-range: entry; }
    @keyframes open-from-below {
      from { translate: 0 -100%; clip-path: inset(100% 0 0 0); }
      to { translate: 0 0; clip-path: inset(0 0 0 0); }
    }
  }
}




.section {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-head) var(--section-gap); padding-block: var(--space-head) var(--space-section);
}
:is(.wrap, .learn-groups) > :is(.section, .page-head) { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
:where(.section) > header { display: grid; gap: var(--space-4); }
.section-intro { color: var(--ink-soft); }

.section-mark { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--mark-gap); writing-mode: horizontal-tb; color: var(--accent-ink); }

.section-mark[data-label]::before { content: attr(data-track) / ''; }
.section-mark > .track-length { order: 1; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

@media (min-width: 52rem) {
  .section:has(> .section-mark + header) {
    grid-template-columns: var(--mark-column) minmax(0, 1fr);
    & > * { grid-column: 1 / -1; }
    & > .section-mark { grid-column: 1; grid-row: 1; align-self: start; padding-block-start: calc((var(--step-4) * var(--leading-heading) - var(--label-size)) / 2); }
    & > .section-mark + header { grid-column: 2; grid-row: 1; }
    &.guide > :is(header, .prose, .art-note, .partners-ask) { grid-column: 2; }
  }
}
.closing > .section-mark { justify-self: stretch; }


@property --rule-arrived { syntax: '<percentage>'; inherits: false; initial-value: 100%; }

@property --arriving-rule-image { syntax: '*'; inherits: false; }
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  :where(*) { --arriving-rule-image: linear-gradient(to right, var(--arriving-rule, var(--rule)) var(--rule-arrived), transparent 0) 1; }
  :is(.dr-sheet[data-crops], .package[data-recommended]) { border-image: var(--arriving-rule-image); }
  .dr-sheet[data-crops] { --arriving-rule: var(--ink); }
  .package[data-recommended] { --arriving-rule: var(--accent); }
}



:where(.steps, .problems, .guides, .principles, .clients, .partners .rules, .gallery, .films, .uniq-apart, .bookings) {
  --cells-wide: 3; --cells-cols: 1;
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0; grid-template-columns: repeat(var(--cells-cols), minmax(0, 1fr));
  counter-reset: cell;

  :is(.section, .guide-more, .sound-guides, .uniq, .uniq-films) > & { margin-inline: calc(-1 * var(--gutter)); }
  & > li {
    --cell-pad-top: var(--space-4);
    counter-increment: cell; position: relative; min-width: 0;
    display: grid; align-content: start; gap: var(--space-4); padding: var(--cell-pad-top) var(--gutter) var(--space-8);
  }
  & > li::before {
    content: var(--track-prefix, '') counter(cell) / '';
    font: var(--font-label); letter-spacing: var(--label-tracking); color: var(--ink);
  }
  & :is(h3, h4) { margin: 0; }
  & p { margin: 0; color: var(--ink-soft); }

  @media (min-width: 40rem) { --cells-cols: 2; }
  @media (min-width: 72rem) { --cells-cols: var(--cells-wide); }
}
:where(.partners .rules) { --cells-wide: 4; }

@property --ink-fill { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

:root { --print-shrunk: 0.9; --print-zoom: 1.1; }
:is(#gallery, .guides) > li {
  color: var(--ink-soft);
  background: linear-gradient(var(--paper-sunk) 0 0) bottom / 100% var(--ink-fill) no-repeat;
}
#gallery a.frame::after { content: '' / ''; position: absolute; inset: 0; }
@media (prefers-reduced-motion: no-preference) {
  :is(#gallery, .guides) > li {
    transition: --ink-fill var(--hover-fade), --print-shrink var(--hover-fade), --hover-zoom var(--zoom-fade) ease, color var(--hover-fade);
  }
  :is(#gallery, .guides) > li :is(h3, p, .data, .frame-inner), :is(#gallery, .guides) > li::before, .guides a::before {
    transition: color var(--hover-fade), border-color var(--hover-fade), background-color var(--hover-fade);
  }
}



:where(.sheet, .hero-drawing) { margin: 0; min-width: 0; container-type: inline-size; }
.sheet { --sheet-gap: var(--space-4); display: grid; gap: var(--sheet-gap); align-content: start; }

.sheet figcaption { order: -1; color: var(--ink); }


.dr-sheet {
  --frame-h: min(100cqi * var(--sheet-frame), var(--sheet-frame-max, 100cqi * var(--sheet-frame)));
  --sheet-w: min(100cqi, var(--frame-h) * var(--sheet-ratio));
  position: relative; width: var(--sheet-w); color: var(--ink);
  margin: calc((var(--frame-h) - var(--sheet-w) / var(--sheet-ratio)) / 2) auto;
}
.dr-drawing { display: block; width: 100%; height: 100%; overflow: hidden; }
.dr-sheet[data-crops] {
  --frame-rule: 1px;
  --base-frame-h: min(var(--sheet-frame-max, 100cqi), 100cqi * var(--sheet-frame) / var(--sheet-frame-scale, 1));
  --frame-h: calc((var(--base-frame-h) - 2 * var(--frame-rule)) * var(--sheet-frame-scale, 1) + 2 * var(--frame-rule));
  --drawn-w: calc((var(--frame-h) - 2 * var(--frame-rule)) * var(--sheet-ratio));
  --frame-w: min(100cqi, var(--drawn-w) + 2 * var(--frame-rule));
  width: var(--frame-w); height: var(--frame-h); aspect-ratio: auto; margin: 0 auto; overflow: clip; border-width: var(--frame-rule); border-style: solid; border-color: var(--ink); box-shadow: var(--well), var(--lip);
  & > :is(.dr-drawing, .dr-labels, .dr-tags, .dr-hotspots) { position: absolute; inset: 0 auto; left: calc(50% - var(--drawn-w) / 2); width: var(--drawn-w); max-width: none; height: 100%; }
}
.dr-labels { position: absolute; inset: 0; pointer-events: none; }

.dr-labels .dr-label, .flow-label { position: absolute; transform: translate(calc(var(--share-left) * -100%), calc(var(--share-above) * -100%)); }
.dr-labels .dr-label { padding: 0.2em 0.35em; white-space: pre; color: var(--ink-soft); }

:is(.dr-labels .dr-dim-label, .dr-tag > summary:not(.dr-callout)) { background: var(--paper); }
:is(.dr-labels, .dr-tags) .dr-callout { background: var(--label-bg); color: var(--label-ink); }

.dr-labels .dr-callout { pointer-events: auto; }
.dr-labels .dr-dim-label-plumb { padding-inline: 0; writing-mode: vertical-rl; writing-mode: sideways-lr; background: none; }
@container (max-width: 29rem) { :is(.dr-labels .dr-label-wide, .dr-tags .dr-label-wide, .dr-view .dr-callout-leader-wide) { display: none; } }

:is(.dr-labels .dr-label-over-tag, .flow-label-over-tag) { translate: 0 -100%; }
@container (max-width: 19rem) {
  .dr-plan-tag { display: none; }
  :is(.dr-labels .dr-label-over-tag, .flow-label-over-tag) { translate: none; }
}
@container (max-width: 22rem) { .dr-labels .dr-dim-label { padding-block: 0; line-height: 1.1; } }
@container (max-width: 30rem) { .dr-labels .dr-dim-label-short { writing-mode: horizontal-tb; padding-inline: 0.35em; background: var(--paper); } }
@container (max-width: 32rem) { .dr-sheet :is(.dr-label-listening, .dr-listening .dr-callout-leader) { display: none; } }


.dr-view { color: var(--ink-mute); }
.dr-view :is(.dr-line, .dr-callout-leader, .dr-speaker, .dr-stand, .dr-cabinet, .dr-uniq, .dr-panels, .dr-absorber, .dr-avaa, .plan-sources, .plan-sinks, .dr-chair, .dr-rods, .dr-sling) { color: var(--ink); }
.dr-view :where(path, rect, circle, ellipse) { stroke: currentColor; stroke-width: 1px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dr-view :where(path, rect, circle, ellipse):where(:not([fill])) { fill: none; }
.dr-view :is(.plan-panels, .plan-tritraps) > * { fill: inherit; }
.dr-view :is(.plan-wall, .dr-wall :is(rect, path)) { fill: var(--poche); stroke: none; }
.dr-view .dr-wall-line { display: none; }
.dr-view :is(.plan-floor, .plan-opening, .dr-mask) { fill: var(--paper); stroke: none; }
.dr-view :is(.dr-hidden, .dr-hidden *) { stroke: var(--ink-mute); stroke-dasharray: var(--dash); }
.dr-view .dr-axis * { stroke-width: 0.75px; stroke-dasharray: 8 3 1 3; }
.dr-view .dr-dim * { stroke-width: 0.75px; }
.dr-view .dr-zone { fill: var(--accent); fill-opacity: var(--zone-opacity); mix-blend-mode: var(--zone-blend); stroke: none; }

.dr-view .dr-listening > .dr-zone { fill-opacity: var(--listening-zone-opacity); stroke: var(--accent); }

.dr-view { --wavefront-first: 0.95; --wavefront-fade: 0.13; }
.dr-view .dr-speaker-axis { stroke: var(--accent); stroke-dasharray: var(--dash); }
.dr-view .dr-wavefront { fill: none; stroke: var(--accent); --wavefront-rest: calc(var(--wavefront-first) - var(--wavefront) * var(--wavefront-fade)); stroke-opacity: var(--wavefront-rest); }

.dr-view .dr-position { fill: none; stroke: var(--accent); stroke-width: 1.3px; stroke-linecap: round; stroke-opacity: 0.8; }
.dr-view .dr-position-upper { stroke-width: 2.2px; stroke-opacity: 1; }
.dr-view .dr-position-centre { stroke-width: 1.6px; stroke-opacity: 1; }
.dr-view .dr-position-stand { stroke: var(--accent); stroke-width: 0.9px; stroke-dasharray: 3 3; stroke-opacity: 0.75; }
.dr-drawing .dr-hatch-line { stroke: var(--ink-mute); }
.dr-marker { fill: none; stroke: var(--accent); stroke-width: var(--marker-size); stroke-linecap: square; vector-effect: non-scaling-stroke; }




.dr-hotspots {
  --hotspot-mark: 1.5rem; --hotspot-gap: 0.5rem; --hotspot-card-w: 19rem; --hotspot-area-bleed: 0.25rem; --hotspot-beside-gap: 0.25rem;
  position: absolute; inset: 0; pointer-events: none; counter-reset: hotspot;
}
.dr-hotspot {
  --beside-off: calc(var(--hotspot-mark) / 2 + var(--hotspot-beside-gap));
  --mark-x: calc(var(--at-x) + var(--beside-x, 0) * var(--beside-off)); --mark-y: calc(var(--at-y) + var(--beside-y, 0) * (var(--beside-off) + var(--beside-slope, 0) * var(--hotspot-mark) / 2));
  counter-set: hotspot var(--hotspot-number);
}

.dr-hotspot[data-cropped] { visibility: hidden; }
.dr-hotspot > summary {
  position: absolute; z-index: 2; left: var(--mark-x); top: var(--mark-y); translate: -50% -50%;
  display: grid; place-items: center; width: var(--hotspot-mark); height: var(--hotspot-mark);
  list-style: none; pointer-events: auto;
  background: var(--accent-fill); color: var(--on-accent); font: var(--label-weight) var(--step--2) / 1 var(--font-ui);
  &::-webkit-details-marker { display: none; }
  &::before { content: ''; position: absolute; inset: min(0px, (var(--hotspot-mark) - var(--tap-min)) / 2); }
}
.dr-hotspot[open] > summary { z-index: 4; }
.dr-hotspot-number::before { content: counter(hotspot, decimal-leading-zero); }
.dr-hotspot[open] .dr-hotspot-number::before { content: '×'; }
.dr-hotspot-card {
  position: absolute; z-index: 3; display: grid; gap: 0.35rem; padding: 0.75rem 1rem; pointer-events: auto;
  width: var(--hotspot-card-w); max-width: calc(var(--hotspot-room) - var(--hotspot-mark) / 2 - var(--hotspot-gap));
  border: 1px solid var(--accent); background: var(--paper-surface); color: var(--ink); text-align: start;
  &::before { content: '[' counter(hotspot, decimal-leading-zero) ']' / ''; font: var(--font-label); letter-spacing: var(--label-tracking); color: var(--accent-ink); }
}

.dr-hotspot-card .dr-hotspot-title { margin: 0; font-size: var(--step-0); line-height: var(--leading-body); color: var(--ink); }
.dr-hotspot-facts {
  display: grid; grid-template-rows: 1fr; font-size: var(--step--1); line-height: var(--leading-body);
  & > div { min-height: 0; overflow: hidden; }
  .dr-hotspot-card & p { margin: 0.2rem 0 0; color: var(--ink-soft); }
}
.dr-hotspot[data-preview] .dr-hotspot-facts { grid-template-rows: 0fr; }
.dr-hotspot[data-toward~="right"] > .dr-hotspot-card { --hotspot-room: calc(100% - var(--mark-x)); left: calc(var(--mark-x) + var(--hotspot-mark) / 2 + var(--hotspot-gap)); }
.dr-hotspot[data-toward~="left"] > .dr-hotspot-card { --hotspot-room: var(--mark-x); right: calc(100% - var(--mark-x) + var(--hotspot-mark) / 2 + var(--hotspot-gap)); }

.dr-sheet[data-crops] {
  & .dr-hotspot[data-toward~="right"] > .dr-hotspot-card { --hotspot-room: calc(50% + var(--frame-w) / 2 - var(--mark-x)); }
  & .dr-hotspot[data-toward~="left"] > .dr-hotspot-card { --hotspot-room: calc(var(--mark-x) - 50% + var(--frame-w) / 2); }
}
.dr-hotspot[data-toward~="down"] > .dr-hotspot-card { top: calc(var(--mark-y) - var(--hotspot-mark) / 2); }
.dr-hotspot[data-toward~="up"] > .dr-hotspot-card { bottom: calc(100% - var(--mark-y) - var(--hotspot-mark) / 2); }
@container (max-width: 32rem) {
  .dr-hotspot[data-toward] > .dr-hotspot-card { left: 0; right: 0; width: auto; max-width: none; gap: 0.2rem; padding: 0.5rem 0.75rem; pointer-events: none; }
  .dr-hotspot-card .dr-hotspot-title { font-size: var(--step--1); }
  .dr-hotspot-facts { font-size: var(--step--2); }
  .dr-hotspot[data-half="top"] > .dr-hotspot-card { top: auto; bottom: 0; }
  .dr-hotspot[data-half="bottom"] > .dr-hotspot-card { top: 0; bottom: auto; }
  .dr-sheet[data-crops] .dr-hotspot[data-toward] > .dr-hotspot-card { left: calc(50% - var(--frame-w) / 2); right: calc(50% - var(--frame-w) / 2); }
}
.dr-hotspot-area {
  position: absolute; pointer-events: none;
  &::before {
    content: ''; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    width: max(100%, var(--hotspot-mark)); height: max(100%, var(--hotspot-mark)); padding: var(--hotspot-area-bleed); box-sizing: content-box;
    border: 1px solid var(--accent);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .dr-hotspots { --hotspot-area-lands: 1.6; }
  .dr-hotspot[open] .dr-hotspot-card { animation: fade-in var(--hover-fade) var(--ease-open); }
  .dr-hotspot-facts { transition: grid-template-rows var(--hover-fade) var(--ease-settle); }
  .dr-hotspot[open] .dr-hotspot-area::before { animation: fade-in var(--hover-fade) var(--ease-open), area-land var(--hover-fade) var(--ease-settle); }
  @keyframes area-land { from { scale: var(--hotspot-area-lands); } }
}
@media (forced-colors: active) { .dr-hotspot > summary, .dr-hotspot-card { border: 1px solid CanvasText; } }


.dr-hotspots[data-skin="grow"] {
  --hotspot-gap: calc(-1 * var(--hotspot-mark)); --hotspot-card-w: 16rem;
  --marker-rest-opacity: 0.72; --marker-breath-period: 1.2s; --marker-breath-runs: 2; --marker-breath-stagger: 0.1s; --marker-breath-scale: 1.05;
  & .dr-hotspot:not([open]) > summary { opacity: var(--marker-rest-opacity); }
  & .dr-hotspot:not([open]) > summary:is(:hover, :focus-visible) { opacity: 1; }
  & .dr-hotspot-card { padding: 0.6rem 0.75rem; border: 0; background: var(--accent-fill); }
  & .dr-hotspot-card::before { display: none; }
  & .dr-hotspot-card :is(.dr-hotspot-title, .dr-hotspot-facts p) { color: var(--on-accent); }
  & [data-toward~="right"] > .dr-hotspot-card { --grow-right: calc(100% - var(--hotspot-mark)); }
  & [data-toward~="left"] > .dr-hotspot-card { --grow-left: calc(100% - var(--hotspot-mark)); }
  & [data-toward~="down"] > .dr-hotspot-card { --grow-bottom: calc(100% - var(--hotspot-mark)); padding-top: calc(var(--hotspot-mark) + 0.35rem); }
  & [data-toward~="up"] > .dr-hotspot-card { --grow-top: calc(100% - var(--hotspot-mark)); padding-bottom: calc(var(--hotspot-mark) + 0.35rem); }
}
@container (max-width: 32rem) { .dr-hotspots[data-skin="grow"] .dr-hotspot[data-toward] > .dr-hotspot-card { padding: 0.5rem 0.75rem; } }



.dr-tags {
  --tag-card-w: 23rem; --tag-gap: 0.35rem; --tag-label-h: calc(1.7 * var(--step--2));
  --tag-frame-l: 0%; --tag-frame-r: 100%; --tag-card-bg: var(--paper-surface);
  position: absolute; inset: 0; pointer-events: none;
}

:is(.dr-tags, .dr-hotspots) { isolation: isolate; }
.dr-tags:has(.dr-tag[open]) { z-index: 1; }
.dr-sheet[data-crops] .dr-tags { --tag-frame-l: calc(50% - var(--frame-w) / 2); --tag-frame-r: calc(50% + var(--frame-w) / 2); }
.dr-tag > summary {
  position: absolute; z-index: 2; left: var(--at-x); top: var(--at-y); translate: calc(var(--share-left) * -100%) calc(var(--share-above) * -100%);
  padding: 0.2em 0.35em; white-space: nowrap; list-style: none; pointer-events: auto; color: var(--ink-soft);
  text-decoration: underline dotted var(--accent) 1.5px; text-underline-offset: 0.3em;
  &::-webkit-details-marker { display: none; }
  &::before { content: '' / ''; position: absolute; inset: min(0px, (100% - var(--tap-min)) / 2) 0; }
}
.dr-tag[open] > summary { z-index: 4; background: var(--accent-fill); color: var(--on-accent); text-decoration-color: currentColor; }
@media (hover: hover) { .dr-tag > summary:hover { text-decoration-style: solid; } }
.dr-tag-card {
  --tag-card-fit: min(var(--tag-card-w), var(--tag-frame-r) - var(--tag-frame-l));
  --tag-card-h: min(17rem, 100%); --tag-card-covers: 0;
  position: absolute; z-index: 3; display: flex; flex-direction: column; gap: var(--space-2); padding: 0.75rem 1rem; pointer-events: auto;
  width: var(--tag-card-fit); height: var(--tag-card-h); left: clamp(var(--tag-frame-l), var(--at-x) - var(--tag-card-fit) / 2, var(--tag-frame-r) - var(--tag-card-fit));
  border: 1px solid var(--accent); background: var(--tag-card-bg); color: var(--ink); text-align: start;
}

.dr-tag-card::before { content: '' / ''; position: absolute; left: 0; right: 0; height: calc(var(--tag-gap) + 1px); }
.dr-tag[data-half="top"] > .dr-tag-card::before { bottom: 100%; }
.dr-tag[data-half="bottom"] > .dr-tag-card::before { top: 100%; }
.dr-tag[data-half="top"] > .dr-tag-card { top: clamp(0px, var(--at-y) + (1 - var(--share-above)) * var(--tag-label-h) + var(--tag-gap), 100% - var(--tag-card-h)); }
.dr-tag[data-half="bottom"] > .dr-tag-card { bottom: clamp(0px, 100% - var(--at-y) + var(--share-above) * var(--tag-label-h) + var(--tag-gap), 100% - var(--tag-card-h)); }
.dr-tag-card .dr-tag-title { margin: 0; font-size: var(--step-0); line-height: var(--leading-body); color: var(--ink); }
.dr-tag-card .dr-tag-said { margin: 0; font-size: var(--step--1); line-height: var(--leading-body); color: var(--ink-soft); }

.dr-tag-plot {
  --tag-plot-h: 5rem;
  flex: 1 1 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(var(--tag-plot-h), 1fr) auto; column-gap: 0.4rem; row-gap: 0.3rem;
  padding-right: 1.25rem; font: 400 var(--step--2) / 1 var(--font-data); color: var(--ink-soft);
  & .dr-tag-axis { grid-column: 1 / -1; margin: 0 0 0.5em; }
  & .plot-levels { grid-column: 1; grid-row: 2; position: relative; min-width: 1.6em; }
  & .plot-levels span { position: absolute; right: 0; translate: 0 -50%; white-space: nowrap; }
  & .plot-scale { grid-column: 2; grid-row: 3; }
}
.dr-tag-plot-area { --plot-rule: var(--rule); --plot-accent: var(--accent); grid-column: 2; grid-row: 2; position: relative; min-height: 0; }
.dr-tag-plot-area svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  & :is(.dr-tag-drop, .dr-tag-mark) { fill: none; vector-effect: non-scaling-stroke; }
  & .dr-tag-drop { stroke: var(--ink-soft); stroke-dasharray: 3 3; }
  & .dr-tag-mark { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
}
.dr-tag-mark-label { position: absolute; translate: 0.6em 0.2em;
  &[data-side="above"] { translate: 0.6em calc(-100% - 0.2em); } white-space: nowrap; padding: 0.1em 0.25em; background: var(--tag-card-bg); color: var(--ink); }

@container (min-width: 40rem) {
  .dr-tags { --tag-card-w: 33rem; }
  .dr-tag-card { --tag-card-h: min(12.5rem, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 10rem; grid-template-rows: auto minmax(0, 1fr); column-gap: 1.25rem; row-gap: var(--space-2); }
  .dr-tag-card .dr-tag-title { grid-column: 1 / -1; }
  .dr-tag-card .dr-tag-said { align-self: center; }
}
@container (max-width: 32rem) {
  .dr-tag[data-half] > .dr-tag-card { --tag-card-covers: 1; top: 0; bottom: auto; height: auto; min-height: 100%; left: var(--tag-frame-l); width: calc(var(--tag-frame-r) - var(--tag-frame-l)); gap: 0.3rem; padding: 0.5rem 0.75rem; z-index: 5; }
  @media (scripting: none) { .dr-tag[open] > summary { z-index: 6; } }
  .dr-tag-card .dr-tag-title { font-size: var(--step--1); }
  .dr-tag-card .dr-tag-said, .dr-tag-plot .plot-tick-minor { display: none; }
  .dr-tag-plot { --tag-plot-h: 4rem; }
}
@media (prefers-reduced-motion: no-preference) { .dr-tag[open] .dr-tag-card { animation: fade-in var(--hover-fade) var(--ease-open); } }
@media (forced-colors: active) { .dr-tag > summary, .dr-tag-card { border: 1px solid CanvasText; } }

.dr-selection {
  --selection-fade: 67%;
  position: absolute; z-index: 5; pointer-events: none; border: 1px solid var(--accent);
  background: linear-gradient(var(--selection-angle), color-mix(in srgb, var(--accent) 64%, transparent), transparent var(--selection-fade));
}
.dr-sheet.is-selecting { user-select: none; }
@media (prefers-reduced-motion: no-preference) {
  :where(.dr-hotspots[data-skin="grow"]) {
    & :where(.dr-hotspot:not([open]) > summary) { animation: marker-breath var(--marker-breath-period) var(--ease-open) calc(var(--hotspot-index) * var(--marker-breath-stagger)) var(--marker-breath-runs); }
    & .dr-hotspot[open] .dr-hotspot-card { animation: marker-grow var(--hover-fade) var(--ease-settle); }
    & .dr-hotspot[open] .dr-hotspot-card > * { animation: fade-in var(--hover-fade) var(--ease-open); }
  }
  @container (max-width: 32rem) { .dr-hotspots[data-skin="grow"] .dr-hotspot[open] .dr-hotspot-card { animation-name: fade-in; } }
  .hero-drawing:not(.is-live) .dr-hotspots * { animation-play-state: paused; }
  @keyframes marker-breath { 50% { opacity: 1; scale: var(--marker-breath-scale); } }
  @keyframes marker-grow { from { clip-path: inset(var(--grow-top, 0) var(--grow-right, 0) var(--grow-bottom, 0) var(--grow-left, 0)); } }
}



.lightbox {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0;
  padding: var(--gutter); background: transparent; color: var(--stage-ink); overscroll-behavior: contain;
}
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-4); justify-items: center; }
.lightbox::backdrop { background: var(--stage); }
.lightbox img { align-self: center; width: auto; height: auto; max-height: 100%; border: var(--border-w) solid var(--stage-ink); background: var(--art-mat); }
.lightbox-close { justify-self: end; }
.lightbox-steps { justify-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

.lightbox .lightbox-steps > button {
  --sweep-from: left; --arrow-step: 1ch; --arrow-shift: calc(-1 * var(--arrow-step)); white-space: nowrap; padding-inline: clamp(0.6rem, 3vw, var(--stage-button-pad-inline));
  background: linear-gradient(var(--stage-accent) 0 0) var(--sweep-from) / 0% 100% no-repeat;
}
.lightbox .lightbox-steps > button:first-child { --sweep-from: right; --arrow-shift: 0ch; }
.lightbox .lightbox-steps > button:first-child::before { content: '\2190\2190' / ''; margin-inline-end: var(--arrow-step); }
.lightbox .lightbox-steps > button:last-child::after { content: '\2192\2192' / ''; margin-inline-start: var(--arrow-step); }
.lightbox .lightbox-steps > button::before, .lightbox .lightbox-steps > button::after { display: inline-block; inline-size: var(--arrow-step); overflow: clip; white-space: nowrap; vertical-align: bottom; text-indent: var(--arrow-shift); }
@media (hover: hover) {
  .lightbox .lightbox-steps > button:hover { background-size: 100% 100%; color: var(--stage); }
  .lightbox .lightbox-steps > button:first-child:hover { --arrow-shift: calc(-1 * var(--arrow-step)); }
  .lightbox .lightbox-steps > button:last-child:hover { --arrow-shift: 0ch; }
}
.lightbox .lightbox-steps > button:active { background-size: 100% 100%; color: var(--stage); }
@media (prefers-reduced-motion: no-preference) {
  .lightbox .lightbox-steps > button { transition: background-size var(--sweep-time) var(--ease-sweep), color var(--hover-fade), border-color var(--hover-fade); }
  .lightbox .lightbox-steps > button::before, .lightbox .lightbox-steps > button::after { transition: text-indent var(--sweep-time) var(--ease-sweep); }
  .lightbox .lightbox-steps > button:active { transition: none; }
}
.lightbox-steps .label-box { margin: 0 0 var(--bar); padding-block: 0.6rem; font-size: var(--step--1); text-align: center; }
.lightbox-steps .label-box[data-position]::before {
  content: '[' attr(data-position) '] ' / ''; font: var(--font-label); letter-spacing: var(--label-tracking); color: var(--accent-ink);
}
.lightbox :focus-visible { outline-color: var(--stage-focus); }

@media (prefers-reduced-motion: no-preference) {
  .lightbox { overflow: clip; }
  .lightbox, .lightbox::backdrop {
    opacity: 0;
    transition: opacity var(--hover-fade), overlay var(--hover-fade) allow-discrete, display var(--hover-fade) allow-discrete;
  }
  .lightbox[open], .lightbox[open]::backdrop { opacity: 1; }
  @starting-style { .lightbox[open], .lightbox[open]::backdrop { opacity: 0; } }
  .lightbox > * { translate: 100vw 0; transition: translate var(--hover-fade); }
  .lightbox[open] > * { translate: 0 0; }
  @starting-style { .lightbox[open] > * { translate: 100vw 0; } }
}




.motion-on { display: none; }
.figure-speed { justify-self: start; margin: 0; color: var(--accent-ink); }

.follows-sound-speed .figure-speed-label::before { content: var(--sound-speed-label); }
.follows-sound-speed .figure-speed-words::before { content: var(--sound-speed-words); }
.sound-slowed::before { content: var(--sound-slowed); }
.sound-room-second::before { content: var(--sound-room-second); }

.stage {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8);
  padding-block: clamp(1.25rem, 0.5rem + 3.5vw, 3.25rem);
}
@media (min-width: 60rem) { .stage { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--stage-gap); align-items: center; } }

.stage h2 { font-size: var(--step-4); line-height: 0.95; letter-spacing: -0.015em; }
.stage-maker, .uniq-maker { display: block; margin-bottom: 0.6rem; }
.stage-maker { color: var(--stage-accent); }
.stage p { color: var(--stage-soft); }
.stage .stage-where { font-size: var(--step-1); color: var(--stage-soft); margin-block: 1.25rem 1.5rem; text-wrap: balance; }
.stage a { color: var(--stage-ink); text-decoration-color: var(--stage-accent); }
.stage :focus-visible { outline-color: var(--stage-focus); }

.stage-facts {
  display: flex; flex-wrap: wrap; gap: var(--space-4) 2.25rem;
  max-width: var(--measure); margin: 1.75rem 0 1.25rem; padding-block: 1rem; border-block: 1px solid var(--stage-rule);
}
.stage-facts dt { color: var(--stage-soft); }
.stage-facts dd { margin: var(--space-1) 0 0; color: var(--stage-ink); overflow-wrap: anywhere; white-space: normal; }
.stage .stage-source { margin: 0; font-size: var(--step--1); }

.stage-figure { margin: 0; display: grid; gap: 1.25rem; min-width: 0; }
.avaa-art { display: grid; grid-template-columns: clamp(4.5rem, 2rem + 9vw, 12rem) minmax(0, 1fr); gap: clamp(var(--space-2), var(--space-1) + 1.5vw, 1.25rem); align-items: end; }
.avaa-column { width: 100%; height: auto; overflow: visible; color: var(--stage-ink); }
.avaa-floor { fill: var(--stage-accent); opacity: 0.14; }

.avaa-mesh { opacity: calc(0.3 + 0.45 * var(--switch-strength, 0)); }
.avaa-rings { color: var(--stage-accent); stroke-dasharray: 2 5; opacity: var(--switch-strength, 0); }
.avaa-rings circle { opacity: 0; transform-box: fill-box; transform-origin: center; }

.stage-plot { display: grid; gap: 0.4rem; min-width: 0; font: 400 var(--step--2) / 1 var(--font-data); color: var(--stage-soft); }
.stage-plot svg { width: 100%; height: auto; aspect-ratio: 5 / 4; overflow: visible; }
.stage-plot .plot-band { fill: var(--stage-accent); opacity: 0.1; }

:is(.stage-plot, .dr-tag-plot-area) {
  & :is(.plot-grid, .plot-live) { vector-effect: non-scaling-stroke; }
  & .plot-grid { stroke: var(--plot-rule); }
  & .plot-level { stroke-dasharray: 1 3; }
  & .plot-live { fill: none; stroke: var(--plot-accent); stroke-width: 2.25; stroke-linejoin: round; }
}
.stage-plot { --plot-rule: var(--stage-rule); --plot-accent: var(--stage-accent); }
.plot-scale { position: relative; height: 1em; }
.plot-scale span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.plot-band-label { color: var(--stage-accent); }

.stage-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); }
:is(.stage-switch, .lightbox button, .modes-step button) {
  --stage-button-pad-inline: 1.1rem; min-height: var(--tap-min); padding: 0.5rem var(--stage-button-pad-inline);
  font: var(--label-weight) var(--step--1) / 1.2 var(--font-ui); text-transform: var(--label-case); letter-spacing: var(--label-tracking); color: var(--stage-ink);
  background: transparent; border: 1px solid var(--stage-rule); border-radius: var(--radius);
}
@media (hover: hover) { :is(.stage-switch, .lightbox button):hover { border-color: var(--stage-accent); } }
.stage-switch { display: inline-flex; align-items: center; gap: 0.6rem; }
.stage-switch-lamp { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--stage-soft); opacity: 0.45; transition: opacity 0.4s, background-color 0.4s, box-shadow 0.4s; box-shadow: 0 0 0 0 var(--stage-wash); }
.stage-switch[aria-checked='true'] .stage-switch-lamp { background: var(--stage-accent); opacity: 1; box-shadow: 0 0 0 4px var(--stage-wash); }
.stage-switch-state { font-family: var(--font-data); font-size: var(--step--2); color: var(--stage-soft); min-width: 3ch; }
.stage-switch-state::before { content: 'off'; }
.stage-switch[aria-checked='true'] .stage-switch-state::before { content: 'on'; }
.dirac-demo-note { font-size: var(--step--1); color: var(--stage-soft); margin: 0; }
.dirac-listen { --dirac-listen-w: 16rem; display: grid; justify-items: center; gap: 0.6rem; width: min(100%, var(--dirac-listen-w)); margin-inline: auto; padding-block: 0.5rem 0.25rem; }
.dirac-play { width: 6rem; aspect-ratio: 1; padding: 0; border: 0; background: none; color: var(--stage-ink); }
.dirac-play svg { display: block; width: 100%; height: 100%; }
.dirac-play-mark { fill: currentColor; }
@media (hover: hover) { .dirac-play:hover { color: var(--stage-accent); } }
.dirac-listen[data-state='loading'] .dirac-play { opacity: 0.6; }
.dirac-listen[data-state='loading'] :is(.dirac-play, .dirac-play *) { cursor: progress !important; }

.dirac-seek { margin-block: calc((var(--fader-cap-w) - var(--fader-track)) / 2); }
.dirac-seek:disabled { opacity: 0.4; }
.dirac-times { display: flex; justify-content: space-between; width: 100%; margin: 0; font: 500 var(--step--2) / 1 var(--font-data); color: var(--stage-soft); }
.dirac-seek:disabled + .dirac-times { visibility: hidden; }
.stage-switch.dirac-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; padding: 0; overflow: hidden; isolation: isolate; }
.dirac-switch > span:not(.dirac-switch-thumb) { padding: 0.55rem 0.75rem; text-align: center; transition: color 0.3s; }
.dirac-switch-thumb { position: absolute; inset: 0 auto 0 0; width: 50%; z-index: -1; background: var(--stage-ink); transform: translateX(calc(var(--switch-strength, 0) * 100%)); }
.dirac-switch > span:nth-child(2) { color: var(--stage); }
.dirac-switch[aria-checked='true'] > span:nth-child(2) { color: var(--stage-ink); }
.dirac-switch[aria-checked='true'] > span:nth-child(3) { color: var(--stage); }
.stage-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) 1.25rem; font-size: var(--step--1); color: var(--stage-soft); }
.stage-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.stage-legend li::before { content: ''; width: 1.5rem; border-top: 2px solid var(--stage-accent); }
.stage figcaption { font-size: var(--step--1); color: var(--stage-soft); max-width: var(--measure); }
.stage-legend .stage-legend-target::before { border-top: 3px solid color-mix(in srgb, var(--stage-soft) 55%, transparent); }

.sound-lead { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.sound-lead p { color: var(--ink-soft); }


.modes { --still-ghost: 0.2; --modes-lane: 1.5rem; margin: 0.75rem 0 0; width: 100%; max-width: var(--figure-wide-max); justify-self: start; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-8); align-items: start; }
.modes-drawing { display: grid; gap: 1.25rem; min-width: 0; }
.modes-pick { display: grid; gap: var(--space-2); min-width: 0; max-width: 44rem; }
.modes-pick > label { color: var(--ink-soft); }
.modes-ladder { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 0.6rem; align-items: start; }
.modes-lanes { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(var(--modes-lanes), var(--modes-lane)); font: var(--label-weight) var(--step--2) / var(--modes-lane) var(--font-data); text-transform: var(--label-case); letter-spacing: var(--label-tracking); color: var(--ink-soft); }
.modes-ladder-plot { grid-column: 2; grid-row: 1; min-width: 0; padding-inline: calc(var(--fader-cap-h) / 2); touch-action: pan-y; font: var(--step--2) / 1 var(--font-data); color: var(--ink-soft); }
.modes-ladder-plot svg { display: block; width: 100%; height: calc(var(--modes-lanes) * var(--modes-lane)); overflow: visible; }
.modes-ladder-plot .plot-scale { margin-top: 0.3rem; }
.rm-lane { fill: none; stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rm-rung { fill: none; stroke: var(--ink-soft); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rm-rung.is-gone { opacity: 0.55; }
.rm-rung-band { fill: var(--paper-sunk); }
.rm-rung-picked .rm-rung { stroke: var(--accent); stroke-width: 3; opacity: 1; }
.modes-range { grid-column: 2; grid-row: 2; }
.modes-ladder-key { margin: 0; font-size: var(--step--2); color: var(--ink-soft); }
.modes-step { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.modes-step button { color: var(--ink); border-color: var(--rule); }
.modes-step button:hover:not(:disabled) { border-color: var(--accent); }
.modes-step button:disabled { opacity: 0.4; cursor: default; }
.modes-count { color: var(--ink-soft); }

.modes-pick { container-type: inline-size; }
@container (width < 18rem) {
  .modes-step { flex-wrap: wrap; gap: var(--space-2); }
  .modes-step > .modes-count { order: -1; flex-basis: 100%; text-align: center; }
  .modes-step > button { flex: 1 1 0; --stage-button-pad-inline: 0.5rem; }
}

.modes-ladder-plot .plot-scale span:last-child { transform: translateX(-100%); }
.modes-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); max-width: 34rem; align-items: start; }
.rm-view { min-width: 0; display: grid; gap: 0.3rem; }
.rm-view-caption { margin: 0 0 0.3rem; color: var(--ink-soft); }
.rm-box { position: relative; container-type: inline-size; }
.rm-field { position: absolute; inset: 0; opacity: var(--cut-strength); }
.rm-phase { position: absolute; inset: 0; width: 100%; height: 100%; }
.rm-phase-b { opacity: 0; }
.rm-pressed { fill: var(--pressure-high); }
.rm-pulled { fill: var(--pressure-low); }
.rm-view.is-still .rm-field { opacity: var(--still-ghost); }
.rm-drawing { position: relative; display: block; width: 100%; height: auto; overflow: hidden; }
.rm-nulls path { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.rm-cut { fill: none; stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 1 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rm-seat-halo { fill: none; stroke: var(--paper); stroke-width: 4; vector-effect: non-scaling-stroke; }
.rm-seat { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.flow-label.rm-still-label { width: max-content; max-width: 90%; white-space: normal; padding: 0.2em 0.45em; text-align: center; color: var(--ink); background: var(--paper); border-radius: var(--radius); }
.modes-walls { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--ink-soft); }
.modes-seat { display: grid; gap: 0.6rem; max-width: var(--measure); }
.modes-readouts { display: grid; color: var(--ink); }
.modes-readouts > * { grid-area: 1 / 1; }
.modes-readouts span { display: block; }
.modes-readouts span:first-child { font: var(--step-1) / 1.25 var(--font-display); }
.modes-readouts span:nth-child(2) { margin-top: 0.2rem; font-size: var(--step--1); color: var(--ink-soft); }
.modes-readouts span:nth-child(3) { margin-top: 0.3rem; }
.modes-readout-fit { visibility: hidden; }
.modes-meter { display: grid; gap: 0.3rem; }
.modes-meter-track { display: block; height: 0.6rem; overflow: hidden; background: var(--paper-sunk); border: 1px solid var(--rule); border-radius: var(--radius); }
.modes-meter-fill { display: block; height: 100%; background: color-mix(in srgb, var(--flow-bass) 35%, transparent); transform-origin: left; }
.modes-meter-swing { display: block; height: 100%; background: var(--flow-bass); transform-origin: left; }
.modes-meter-scale { display: flex; justify-content: space-between; color: var(--ink-soft); }
.modes-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: var(--step--1); color: var(--ink-soft); }
.modes-legend li { display: flex; align-items: center; gap: var(--space-2); }
.modes-key { flex: none; display: inline-block; width: 0.75rem; height: 0.75rem; }
.modes-key-pressed { background: var(--pressure-high); }
.modes-key-pulled { background: var(--pressure-low); }
.modes-key-null { width: 1.5rem; height: 0; border-top: 1.5px dashed var(--ink); }
.modes-key-cut { width: 1.5rem; height: 0; border-top: 2px dotted var(--ink-soft); }
.modes-key-seat { border-radius: 50%; background: transparent; border: 2px solid var(--ink); }
.modes figcaption { font-size: var(--step--1); color: var(--ink-soft); max-width: var(--measure); }
.modes figcaption strong { color: var(--ink); font-weight: 600; }
.sound-lead .modes-note { margin: 0; font-size: var(--step--1); max-width: var(--measure); }
@media (min-width: 60rem) {
  .modes { grid-template-columns: var(--figure-side-columns); grid-template-rows: repeat(3, auto) 1fr; }
  .modes-drawing { grid-column: 1; grid-row: 1 / span 4; }
  .modes > :not(.modes-drawing) { grid-column: 2; }
  .modes-legend { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 60rem) and (max-width: 79.99rem) {
  .modes { grid-template-rows: auto 1fr; }
  .modes-drawing { grid-row: 1 / span 2; }
  .modes > :is(figcaption, .modes-note) { grid-column: 1 / -1; }
}


.dirac-room, .dirac-front { display: block; width: 100%; height: auto; overflow: hidden; }
.dirac-room *, .dirac-front * { vector-effect: non-scaling-stroke; }
:is(.dirac-room, .dirac-front) {
  .dr-paths path { fill: none; stroke-linejoin: round; }
  .dr-direct { stroke: var(--stage-accent); stroke-width: 1.5; }
  .dr-waves { fill: none; stroke: var(--stage-accent); stroke-width: 1; opacity: var(--switch-strength, 0); }
  .dr-waves circle { opacity: 0; }
  .dr-mics circle { fill: var(--stage-accent); stroke: var(--stage); stroke-width: 1; }
  .dr-tick { fill: none; stroke: var(--stage); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .dr-mic-edges path { fill: none; stroke: var(--stage-accent); stroke-opacity: 0.45; stroke-width: 1; stroke-dasharray: 3 3; }
  .dr-mic-boxes rect { fill: var(--stage-accent); fill-opacity: 0.06; stroke: var(--stage-accent); stroke-opacity: 0.45; stroke-width: 1; stroke-dasharray: 3 3; }
  .dr-marker { stroke: var(--stage-accent); }
}

.dirac-plots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: end; }
@media (min-width: 36rem) { .dirac-plots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
.dirac-plots > .stage-legend { grid-column: 1 / -1; }
.dirac .dirac-plot-title { margin: 0 0 0.5rem; font-size: var(--step--1); color: var(--stage-ink); }
.dirac .stage-plot svg { aspect-ratio: 3 / 2; }
.stage-plot .plot-target { fill: none; stroke: var(--stage-soft); stroke-opacity: 0.55; stroke-width: 3; vector-effect: non-scaling-stroke; }
.stage-plot .plot-outside { fill: var(--stage-soft); opacity: 0.12; }

.uniq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; }
@media (min-width: 60rem) { .uniq { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3.5rem; } }
.uniq h2 { font-size: var(--step-4); line-height: 1; margin-bottom: 1.25rem; }
.uniq-maker { color: var(--accent-ink); }
.uniq-text p { color: var(--ink-soft); }
.uniq-facts { display: flex; flex-wrap: wrap; gap: var(--space-4) 2.25rem; max-width: var(--measure); margin: 1.5rem 0 1rem; padding-block: 1rem; }
.uniq-facts dt { color: var(--ink-soft); }
.uniq-facts dd { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.uniq-source { font-size: var(--step--1); }
.uniq-figure { margin: 0; display: grid; gap: var(--space-4); justify-items: center; }

.uniq-face, .uq-rings { grid-area: 1 / 1; width: min(100%, var(--uniq-face-max)); height: auto; overflow: hidden; border-radius: 50%; }
:is(.uniq-face, .uq-rings) * { vector-effect: non-scaling-stroke; }
.uq-spine { fill: none; stroke-width: 0.8; stroke-linecap: round; }
.uq-badge { font-family: var(--font-body); font-weight: 300; letter-spacing: 0.02em; }
.uq-rings { fill: none; stroke: var(--stage-accent); stroke-width: 1.5; pointer-events: none; }
.uq-rings circle { opacity: 0; }
.uniq figcaption { font-size: var(--step--1); color: var(--ink-soft); max-width: var(--uniq-face-max); text-align: center; }

.uniq-apart { grid-column: 1 / -1; }
.uniq-apart > li { grid-column: 1 / -1; }
.uniq-apart figure { margin: 0; display: grid; gap: var(--space-4); }
.uniq-video { display: block; width: 100%; height: auto; background: var(--screen); border-radius: var(--radius); }
.uniq-apart figcaption { max-width: var(--measure); text-align: left; }
.uniq-films { grid-column: 1 / -1; display: grid; gap: var(--space-4); }
.uniq-films h3 { margin: 0; }
@media (min-width: 48rem) { .films { --cells-cols: 3; } }
.film p, .films-note { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.film-play, .film-player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
.film-play { position: relative; padding: 0; overflow: hidden; background: var(--paper-sunk); }
.film-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-play::before, .film-play::after { content: ''; position: absolute; right: 0.75rem; bottom: 0.75rem; width: 3rem; height: 3rem; transition: scale 0.2s; }
.film-play::before { border-radius: 50%; background: var(--stage); }
.film-play::after {
  background: var(--stage-ink);
  mask: no-repeat 56% 50% / 38% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z'/%3E%3C/svg%3E");
}
.film-play:is(:hover, :focus-visible)::before, .film-play:is(:hover, :focus-visible)::after { scale: 1.08; }
@media (hover: hover) {
  .film-play img { filter: saturate(0); }
  .film-play:is(:hover, :focus-visible) img { filter: none; }
}
@media (prefers-reduced-motion: no-preference) { .film-play img { transition: filter var(--hover-fade); } }

.chain {
  --chain-dash: 5px; --chain-dash-gap: 4px; --chain-dash-to: to right;
  display: grid; gap: var(--space-4); margin-block: 0; padding-block: var(--space-head);
}
:is(.chain, .sound-guides) > h3 { font-size: var(--step-3); font-weight: 700; line-height: 1; }
.chain-steps {
  --chain-hops: 4;
  --chain-far-lag: 0.15s; --chain-rest: 5s;
  --chain-flex-dwell: calc(var(--chain-flex-ms) * var(--sound-slowdown) * 1ms);
  --chain-ls50-dwell: calc(var(--chain-ls50-ms) * var(--sound-slowdown) * 1ms);
  --chain-kc62-dwell: calc(var(--chain-kc62-ms) * var(--sound-slowdown) * 1ms);
  --chain-at-ls50: var(--chain-flex-dwell);
  --chain-at-subs: calc(var(--chain-at-ls50) + var(--chain-ls50-dwell));
  --chain-cycle: calc(var(--chain-at-subs) + 2 * var(--chain-kc62-dwell) + var(--chain-rest));
  --chain-icon-w: 4rem; --chain-icon-h: 3rem; --chain-icon-gap: 1rem; --chain-link-inset: 0.75rem; --chain-overhang: 1.75rem; --chain-label-rise: 1.1rem;
  --chain-stack-gap: 1.75rem; --chain-pair-gap: 3rem; --chain-crossover-h: 2.5rem; --chain-relay-clear: 0.25rem;
  --chain-station-gap: 0.625rem; --chain-stations-after: 0.5rem; --chain-station-lag: calc(var(--chain-ls50-dwell) / 2); --chain-dash-to: to bottom;
  list-style: none; margin: 1rem 0 0; padding: 0; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem;
}

.chain { container-type: inline-size; }
@container (width < 13rem) { .chain-steps { --chain-icon-w: 3rem; --chain-icon-h: 2.25rem; --chain-icon-gap: 0.75rem; } }
.chain-step:nth-child(1) { --depart: 0s; }
.chain-step:nth-child(2) { --depart: var(--chain-flex-dwell); }
.chain-step:nth-child(3) { --depart: var(--chain-at-subs); --play: var(--chain-at-subs); }
.chain-step:nth-child(4) { --play: calc(var(--chain-at-subs) + var(--chain-kc62-dwell)); }
.chain-subs .chain-relay { --depart: calc(var(--chain-at-subs) + var(--chain-kc62-dwell)); }
.chain-subs .chain-second { --play: calc(var(--chain-at-subs) + 2 * var(--chain-kc62-dwell)); }
.chain-step { position: relative; display: grid; grid-template-columns: var(--chain-icon-w) minmax(0, 1fr); column-gap: var(--chain-icon-gap); align-content: start; }
.chain-step > :not(.chain-icon, .chain-link) { grid-column: 2; }
.chain-icon { grid-row: 1 / span 3; width: var(--chain-icon-w); height: var(--chain-icon-h); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; color: var(--ink-soft); }
.chain-icon .chain-led { fill: var(--ink); stroke: none; }
.chain-top { fill: currentColor; fill-opacity: 0.12; }
.chain-keys { stroke: var(--accent); stroke-width: 1.1; }
.chain-screen { stroke: var(--ink); stroke-width: 0.6; }
.chain-screen .chain-readout { stroke-width: 3; stroke-linecap: butt; stroke-dasharray: 1.9 0.6; }
.chain-screen .chain-screen-text { stroke-width: 1.4; stroke-linecap: butt; stroke-dasharray: 1.1 0.4; }
.chain-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.chain-seam { stroke-width: 0.75; opacity: 0.55; }
.chain-surround { stroke-width: 1.6; stroke-dasharray: 1 0.9; }
.chain-cone { fill: currentColor; fill-opacity: 0.18; stroke-width: 0.75; }
.chain-wave { stroke: var(--accent); }
.chain-step h4 { margin: 0 0 0.35rem; }
.chain-step p { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0.5rem; }
.chain-step .chain-out { color: var(--ink); margin-bottom: 0; }
.chain-note { font-size: var(--step--1); color: var(--ink-soft); margin-top: 1.5rem; }
.chain > .figure-speed { margin: 0.25rem 0 0.5rem; }
.chain-link { position: absolute; left: calc(var(--chain-icon-w) / 2 - 2px); top: calc(var(--chain-icon-h) + var(--chain-link-inset)); bottom: calc(-1 * var(--chain-overhang)); width: 5px; overflow: hidden; }
.chain-link::before, .chain-relay::before { content: ''; position: absolute; inset: 0 2px; background: var(--rule); }
.chain-link::after, .chain-relay::after { content: ''; position: absolute; inset: 0; opacity: 0; border-radius: 3px; background: var(--accent); }


.chain-subs { grid-template-rows: var(--chain-icon-h) var(--chain-stack-gap) var(--chain-icon-h); }
.chain-subs .chain-icon { grid-row: 1; grid-column: 1; }
.chain-subs .chain-icon.chain-second { grid-row: 3; }
.chain-subs > .chain-stations { grid-row: 1; height: var(--chain-icon-h); margin: 0; }
.chain-subs > .chain-stations.chain-second { grid-row: 2 / span 2; align-self: end; }
.chain-subs > h4 { margin-top: var(--chain-stations-after); }
.chain-relay {
  position: absolute; left: calc(var(--chain-icon-w) / 2 - 2px); width: 5px; overflow: hidden;
  top: calc(var(--chain-icon-h) + var(--chain-relay-clear)); height: calc(var(--chain-stack-gap) - 2 * var(--chain-relay-clear));
}
.chain-subs > .chain-relay { grid-column: auto; }
.chain-link-label { position: absolute; left: calc(var(--chain-icon-w) / 2 + 0.5rem); bottom: calc(-1 * var(--chain-overhang)); color: var(--accent-ink); writing-mode: vertical-rl; }
.chain-step > .chain-link-label { grid-column: auto; }
.chain-sources > .chain-link-label { display: none; }
.chain-sources .chain-icon { grid-row: 1; grid-column: 1; }
.chain-sources .chain-icon-tv { grid-column: 2; }
.chain-sources > h4:first-of-type { margin-top: 2rem; }
.chain-step h4.chain-source-next { margin-top: 1.25rem; }
.chain-sources > .chain-branch { grid-column: auto; }
.chain-branch { position: absolute; left: calc(var(--chain-icon-w) / 2); top: calc(var(--chain-icon-h) + var(--chain-link-inset)); width: calc(var(--chain-icon-w) + var(--chain-icon-gap)); height: 2rem; overflow: visible; fill: none; }
.chain-branch path { vector-effect: non-scaling-stroke; }
.chain-branch-rule { stroke: var(--rule); stroke-width: 1; }
.chain-branch-pulse { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.chain-branch-x { display: none; }
.chain-crossover { display: none; }
.chain-step > .chain-crossover { grid-column: auto; }
.chain-crossover svg { display: block; width: 100%; height: var(--chain-crossover-h); overflow: visible; }
.chain-crossover path { fill: none; stroke-width: 1.75; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chain-crossover .crossover-subs { stroke: var(--accent); }
.chain-crossover .crossover-mains { stroke: var(--ink-soft); }
.chain-crossover .plot-scale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.15rem var(--space-3); height: auto; margin-top: 0.3rem; }
.chain-crossover .plot-scale span { position: static; transform: none; }
.chain-crossover .crossover-label-subs { color: var(--accent-ink); }
.chain-crossover .crossover-label-mains { color: var(--ink-soft); margin-inline-start: auto; }


:is(.chain-link, .chain-relay).chain-digital::before, :is(.chain-link, .chain-relay).chain-digital::after, .chain-key-line.chain-digital {
  mask: repeating-linear-gradient(var(--chain-dash-to), #000 0 var(--chain-dash), transparent 0 calc(var(--chain-dash) + var(--chain-dash-gap)));
}
.chain-branch.chain-digital path { stroke-dasharray: var(--chain-dash) var(--chain-dash-gap); stroke-linecap: butt; }


.chain-stations { display: flex; align-items: center; gap: var(--chain-station-gap); margin-bottom: var(--chain-stations-after); }
.chain-station { position: relative; padding: 0.3em 0.45em 0.25em; border: 1px solid var(--ink-soft); color: var(--ink); line-height: 1; white-space: nowrap; }
.chain-station::after { content: ''; position: absolute; inset: -1px; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }
.chain-station + .chain-station::before { content: ''; position: absolute; right: calc(100% + 1px); top: 50%; width: var(--chain-station-gap); height: 1px; background: var(--rule); }

.chain-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) 1.25rem; margin: 0; color: var(--ink-soft); }
.chain-key-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.chain-key-line { width: 2rem; height: 1px; background: var(--rule); }

@media (min-width: 72rem) {
  .chain-steps {
    grid-template-columns: repeat(var(--chain-hops), minmax(0, 1fr)); gap: 2.5rem;
  }
  .chain-step { grid-template-columns: minmax(0, 1fr); }
  .chain-step > :not(.chain-icon, .chain-link) { grid-column: 1; }
  .chain-icon { grid-row: auto; margin-bottom: var(--chain-icon-gap); }
  .chain-link, .chain-branch { left: calc(var(--chain-icon-w) + var(--chain-link-inset)); right: calc(-1 * var(--chain-overhang)); width: auto; }
  .chain-link { top: calc(var(--chain-icon-h) / 2 - 2px); bottom: auto; height: 5px; }
  .chain-link::before { inset: 2px 0; }
  .chain-sources .chain-icon-tv { grid-row: 2; grid-column: 1; margin-top: var(--chain-stack-gap); }
  .chain-subs .chain-icon { grid-row: 1; }
  .chain-subs { grid-template-rows: none; }
  .chain-subs .chain-icon.chain-second { grid-row: 1; margin-left: calc(var(--chain-icon-w) + var(--chain-pair-gap)); }
  .chain-step:not(.chain-sources) > .chain-icon { margin-bottom: calc(var(--chain-icon-h) + 2 * var(--chain-icon-gap) + var(--chain-stack-gap)); }
  .chain-relay { left: calc(var(--chain-icon-w) + var(--chain-relay-clear)); top: calc(var(--chain-icon-h) / 2 - 2px); width: calc(var(--chain-pair-gap) - 2 * var(--chain-relay-clear)); height: 5px; }
  .chain-relay::before { inset: 2px 0; }
  .chain-link-label { left: calc(var(--chain-icon-w) + var(--chain-link-inset)); right: calc(-1 * var(--chain-overhang)); bottom: auto; top: calc(var(--chain-icon-h) / 2 - var(--chain-label-rise)); text-align: center; writing-mode: horizontal-tb; }
  .chain-sources > .chain-link-label { display: block; }
  .chain-sources > .chain-link-label { right: auto; text-align: start; }
  .chain-sources > .chain-branch-label { top: calc(var(--chain-icon-h) * 1.5 + var(--chain-icon-gap) + var(--chain-stack-gap) + var(--chain-label-rise) - 1em); }
  .chain-sources > h4:first-of-type { margin-top: 0; }
  .chain-branch { top: calc(var(--chain-icon-h) / 2); width: calc(100% - var(--chain-icon-w) - var(--chain-link-inset) + var(--chain-overhang)); height: calc(var(--chain-icon-h) + var(--chain-icon-gap) + var(--chain-stack-gap)); }
  .chain-branch-x { display: inline; }
  .chain-crossover { display: block; position: absolute; margin: 0; left: calc(var(--chain-icon-w) + var(--chain-link-inset)); right: calc(-1 * var(--chain-overhang)); top: calc(var(--chain-icon-h) / 2 + var(--chain-link-inset)); }
  .chain-branch-y { display: none; }
  .chain-steps { --chain-dash-to: to right; }
  .chain-stations { position: absolute; left: 0; top: calc(var(--chain-icon-h) + var(--chain-icon-gap)); width: var(--chain-icon-w); flex-direction: column; margin: 0; }
  .chain-subs > .chain-stations { grid-row: auto; height: auto; }
  .chain-subs > h4 { margin-top: 0; }
  .chain-subs > .chain-stations.chain-second { grid-row: auto; left: calc(var(--chain-icon-w) + var(--chain-pair-gap)); }
  .chain-station + .chain-station::before { right: auto; top: auto; left: 50%; bottom: calc(100% + 1px); width: 1px; height: var(--chain-station-gap); }
}

.prose { columns: var(--measure) 2; column-gap: var(--section-gap); max-width: calc(2 * var(--measure) + var(--section-gap)); }
.prose p { break-inside: avoid; }

.room-treatment { display: grid; gap: var(--space-3); justify-items: start; }
.room-treatment p { color: var(--ink-soft); margin-bottom: 0.5rem; }
.flow { margin: 0.25rem 0 0.75rem; width: 100%; max-width: var(--measure-wide); justify-self: stretch; display: grid; gap: var(--space-4); }
.flow-drawing { display: grid; gap: 0.35rem; min-width: 0; }
.flow-plan-wrap { position: relative; width: 100%; container-type: inline-size; }
.flow-plan { display: block; width: 100%; height: auto; overflow: hidden; }
.flow-field { position: absolute; display: block; max-width: none; pointer-events: none; mix-blend-mode: var(--wave-blend); }
.flow-labels { position: absolute; inset: 0; pointer-events: none; }
.flow-label {
  font: clamp(var(--step--2), 1cqi, var(--step--1)) / 1.1 var(--font-data); white-space: pre; color: var(--ink-soft);
}
.flow-label-sink { color: var(--flow-sink); }
.flow .flow-label { text-shadow: 0 0 2px var(--paper-sunk), 0 0 2px var(--paper-sunk), 0 0 5px var(--paper-sunk); }

.flow .dr-tag > summary { padding-inline: 0; background: none; font: clamp(var(--step--2), 1cqi, var(--step--1)) / 1.1 var(--font-data); color: var(--flow-sink); text-shadow: 0 0 2px var(--paper-sunk), 0 0 2px var(--paper-sunk), 0 0 5px var(--paper-sunk); }
.flow-pair { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.25rem clamp(var(--space-4), var(--space-2) + 3vw, var(--section-gap)); }
.flow-side { display: grid; gap: var(--space-2); align-content: start; }
.flow-side dt { display: flex; align-items: center; gap: var(--space-2); color: var(--ink); }
.flow-side dd { margin: 0; max-width: var(--measure); font-size: var(--step--1); color: var(--ink-soft); }
.flow-key { flex: none; width: 0.7rem; aspect-ratio: 1; border-radius: 50%; }
.flow-key-source { border: 1.5px solid var(--accent); }
.flow-key-sink { border: 1.5px dashed var(--flow-sink); }
.flow .chip input:checked + span { background: var(--paper-raised); color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.flow-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) 1.25rem; }
.flow-picker { border: 0; margin: 0; padding: 0; min-width: 0; align-items: center; }
.flow-picker legend { float: left; margin-right: 0.25rem; padding: 0; color: var(--ink-soft); }
.flow-chip { gap: 0.45rem; }
.flow-swatch { display: inline-block; flex: none; width: 0.8rem; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1px var(--paper-raised); }
.flow-swatch-all { background: conic-gradient(var(--band-bass) 0 33.3%, var(--band-mids) 0 66.7%, var(--band-highs) 0); }
.flow { --stage-ink: var(--ink); --stage-soft: var(--ink-soft); --stage-accent: var(--flow-sink); --stage-rule: var(--rule); }
.flow figcaption { font-size: var(--step--1); color: var(--ink-soft); max-width: var(--measure); margin: 0; }
.flow-caption { display: grid; gap: var(--space-2); }
.flow-caption p { margin: 0; }
.disclosure-body { padding-bottom: 0; }
.flow-notes > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); width: fit-content; color: var(--ink); list-style: none; }
.flow-notes > summary::-webkit-details-marker { display: none; }
.flow-notes > summary::before { content: '+'; font-family: var(--font-data); color: var(--accent-ink); }
.flow-notes[open] > summary::before { content: '−'; }
@media (hover: hover) { .flow-notes > summary:hover { color: var(--accent-ink); } }
.flow-notes p + p { margin-top: 0.5rem; }
@media (max-width: 30rem) { .flow-label-wide { display: none; } }
@media (min-width: 80rem) {
  .flow { max-width: var(--flow-max); grid-template-columns: var(--figure-side-columns); grid-template-rows: auto auto 1fr auto; column-gap: var(--section-gap); align-items: start; }
  .flow-drawing { grid-column: 1; grid-row: 1 / 4; }
  .flow-controls, .flow-pair { grid-column: 2; }
  .flow figcaption { grid-column: 1 / -1; }
  .flow-pair { grid-template-columns: minmax(0, 1fr); }
}


.flow-plan {
  .plan-floor { fill: var(--paper-sunk); }
  .dr-hatch-line { stroke: var(--flow-sink); }
  .plan-sinks { color: var(--flow-sink); }
  .plan-tritraps * { stroke-dasharray: var(--dash); }
  
  .plan-avaas * { stroke: currentColor; stroke-dasharray: none; }
  .plan-sources .dr-cabinet { color: var(--accent); }
}

@media (prefers-reduced-motion: no-preference) {
  .avaa[data-reveal='pending'] .avaa-draw { stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: butt; }
  .avaa[data-reveal='done'] .avaa-draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(0.6, 0, 0.2, 1); }
  .avaa-rings circle { animation: avaa-draw-in 3.6s cubic-bezier(0.3, 0, 0.2, 1) infinite; }
  .avaa-rings circle:nth-child(2) { animation-delay: -1.2s; }
  .avaa-rings circle:nth-child(3) { animation-delay: -2.4s; }
  @keyframes avaa-draw-in {
    0% { transform: scale(1.2); opacity: 0; }
    30% { opacity: 0.6; }
    100% { transform: scale(0.45); opacity: 0; }
  }

  .dirac[data-reveal='pending'] .dr-mic { opacity: 0; transform: scale(0.2); }
  .dirac[data-reveal='done'] .dr-mic {
    transform-box: fill-box; transform-origin: center;
    transition: opacity var(--mic-pop) ease-out, transform var(--mic-pop) cubic-bezier(0.2, 0, 0, 1); transition-delay: var(--mic-delay);
  }
  
  .dr-waves circle { animation: dirac-sweep 3s cubic-bezier(0.2, 0, 0.4, 1) infinite; }
  .dr-waves circle:nth-child(2) { animation-delay: -1s; }
  .dr-waves circle:nth-child(3) { animation-delay: -2s; }
  @keyframes dirac-sweep {
    0% { r: calc(var(--ring-r) * 0.05); opacity: 0; }
    15% { opacity: 0.55; }
    100% { r: calc(var(--ring-r) * 4); opacity: 0; }
  }

  .uq-rings circle { animation: uniq-spread 2.7s cubic-bezier(0.2, 0, 0.4, 1) 5; }
  .uq-rings circle:nth-child(2) { animation-delay: -0.9s; }
  .uq-rings circle:nth-child(3) { animation-delay: -1.8s; }
  
  .uniq-figure.is-live .uq-rings { will-change: transform; }
  @keyframes uniq-spread {
    0% { r: calc(var(--ring-r) * 0.6); opacity: 0; }
    15% { opacity: 0.9; }
    100% { r: calc(var(--ring-r) * 9); opacity: 0; }
  }

  .chain-link::after, .chain-relay::after, .chain-branch-pulse { animation: chain-carry var(--chain-cycle) ease-out infinite; animation-delay: var(--depart); }
  .chain-wave { animation: chain-wave var(--chain-cycle) ease-out infinite; animation-delay: var(--play); }
  .chain-wave-far { animation-delay: calc(var(--play) + var(--chain-far-lag)); }
  .chain-steps .chain-station::after { animation: chain-flash var(--chain-cycle) ease-out infinite; animation-delay: var(--chain-station-at, var(--play)); }
  .chain-steps .chain-station:not(:last-child) { --chain-station-at: calc(var(--play) - var(--chain-station-lag)); }
  @keyframes chain-carry { 0% { opacity: 1; } 3%, 100% { opacity: 0; } }
  
  @keyframes chain-flash { 0% { opacity: 0; } 0.5% { opacity: 1; } 3%, 100% { opacity: 0; } }
  @keyframes chain-wave { 0% { opacity: 0.15; } 2% { opacity: 1; } 22%, 100% { opacity: 0.15; } }

  .rm-phase { animation: modes-phase var(--period) linear infinite; }
  .rm-phase-b { animation-delay: calc(var(--period) / -2); }
  @keyframes modes-phase {
    0% { opacity: 1; animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
    25% { opacity: 0; }
    75% { opacity: 0; animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
    100% { opacity: 1; }
  }
  .modes-meter-swing { animation: modes-seat calc(var(--period) / 2) linear infinite; }
  @keyframes modes-seat {
    0% { transform: scaleX(1); animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
    50% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
    100% { transform: scaleX(1); }
  }
  .rm-view.is-still .rm-phase { animation: none; }
  .modes.is-live .rm-phase { will-change: opacity; }
  .modes-meter-fill { transition: transform 300ms cubic-bezier(0.2, 0, 0, 1); }
  .motion-on { display: inline; }
  .motion-off { display: none; }

  .stage:not(.is-live) *, .stage:not([data-switch-showing]) [data-follows-switch] *, .uniq-figure:not(.is-live) *, .flow:not(.is-live) *, .modes:not(.is-live) *, .chain:not(.is-live) *, .chain:not(.is-live) *::before, .chain:not(.is-live) *::after { animation-play-state: paused; }
}


@media (prefers-reduced-motion: reduce) {
  .avaa-rings circle:nth-child(1) { transform: scale(1.1); opacity: 0.2; }
  .avaa-rings circle:nth-child(2) { transform: scale(0.8); opacity: 0.4; }
  .avaa-rings circle:nth-child(3) { transform: scale(0.5); opacity: 0.55; }
  .dr-waves circle:nth-child(1) { r: var(--ring-r); opacity: 0.5; }
  .dr-waves circle:nth-child(2) { r: calc(var(--ring-r) * 2); opacity: 0.32; }
  .dr-waves circle:nth-child(3) { r: calc(var(--ring-r) * 3); opacity: 0.16; }
}




@property --vt-reach { syntax: '<length>'; inherits: true; initial-value: 0px; }
:root {
  --vt-x: 50vw; --vt-y: 50vh; --vt-far: hypot(50vw, 50vh); --vt-wave: 0.45s; --vt-front: 1rem;
  --vt-rarefaction: color-mix(in oklab, var(--pressure-low) 55%, transparent);
  --vt-compression: color-mix(in oklab, var(--accent) 55%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  .treated-border { view-transition-name: page-wall; }
  ::view-transition-group(site-header), ::view-transition-group(page-wall) { animation: none; }
  ::view-transition, html[data-arrival~="opened"] body::after {
    background:
      radial-gradient(circle at var(--vt-x) var(--vt-y),
        transparent var(--vt-reach), var(--vt-rarefaction) calc(var(--vt-reach) + var(--vt-front) / 2),
        transparent calc(var(--vt-reach) + var(--vt-front)), var(--vt-compression) calc(var(--vt-reach) + 1.5 * var(--vt-front)),
        transparent calc(var(--vt-reach) + 2 * var(--vt-front))),
      var(--page-frame-paint), var(--floor-surface);
  }
  ::view-transition { animation: vt-front var(--vt-wave) linear forwards; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  ::view-transition-new(root) { clip-path: circle(var(--vt-reach) at var(--vt-x) var(--vt-y)); }
  ::view-transition-old(root) {
    mask: radial-gradient(circle at var(--vt-x) var(--vt-y), transparent calc(var(--vt-reach) + 2 * var(--vt-front)), #000 calc(var(--vt-reach) + 2 * var(--vt-front)));
  }
  @keyframes vt-front { from { --vt-reach: 0px; } to { --vt-reach: calc(var(--vt-far) + 2 * var(--vt-front)); } }
}




@property --ink-heard { syntax: '<number>'; inherits: false; initial-value: 1; }
:root {
  --line-draw: 1s; --mark-appear: 0.2s; --land-scale: 1.6; --unheard: 0.15;
  --band-bass-width: 3px; --band-mids-width: 1.5px; --band-highs-width: 1px;
  --place-hold-max: 1.2s;
  --head-rise: 0.6s; --block-rise: 1s; --block-rise-delay: 0.3s;
}
.hero-drawing { --flow-runs: 2; }

.dr-view .dr-band { fill: none; stroke-opacity: 0; --band-strength: calc(var(--wavefront-first) - var(--wavefront) * var(--wavefront-fade)); }
.dr-view .dr-band-bass { stroke: var(--band-bass); stroke-width: var(--band-bass-width); }
.dr-view .dr-band-mids { stroke: var(--band-mids); stroke-width: var(--band-mids-width); }
.dr-view .dr-band-highs { stroke: var(--band-highs); stroke-width: var(--band-highs-width); }


[style*="--heard-m"] { --heard-at: calc(var(--heard-m) * var(--sound-slowdown) / var(--sound-m-per-s) * 1s); }
[style*="--room-heard-m"] { --room-heard: calc(var(--room-heard-m) * var(--sound-slowdown) / var(--sound-m-per-s) * 1s); }

@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  html[data-arrival~="staged"] {
    & .hero-drawing .dr-view [style*="--heard-m"] { opacity: var(--ink-heard); animation: heard var(--mark-appear) linear var(--heard-at) backwards; }
    & .hero-drawing .dr-view .dr-band { animation: band-front var(--answer-fade) var(--answer-fade-curve) var(--heard-at); }
    & .hero-drawing .dr-view .dr-wavefront { animation-delay: calc(var(--heard-at) + var(--answer-fade)); }
    & .hero-drawing .dr-view .dr-speaker-axis {
      --dash-flow-runs: var(--flow-runs);
      animation: heard var(--mark-appear) linear var(--heard-at) backwards, dash-flow calc(var(--dash-flow-runs) * var(--dash-flow-period)) linear;
    }
    & .hero-drawing .dr-sheet > :not(svg) { animation: fade-in var(--mark-appear) linear var(--room-heard) backwards; }
    & .hero-drawing:not(.is-live) .dr-sheet > :not(svg) { animation-play-state: paused; }
    & .hero-drawing .dr-hotspots summary { animation-delay: calc(var(--room-heard) + var(--hotspot-index) * var(--marker-breath-stagger)); }

    & .hero-drawing > .dr-sheet { animation: rule-arrive var(--line-draw) linear both, var(--drifting, none); animation-timeline: auto, var(--drift-timeline, auto); animation-range: normal, var(--drift-range, normal); }
    & .treated-border .border-run { animation: border-draw var(--line-draw) linear backwards; }
    & .treated-border .border-cap:first-child { transform-origin: 0 0; animation: land var(--mark-appear) var(--ease-settle) var(--line-draw) backwards; }
    & .treated-border .border-cap:last-child { animation: held-out-of-sight 0s var(--line-draw) backwards; }

    & .hero-place:not([data-decode]) { animation: held-out-of-sight 0s var(--place-hold-max) both; }
    & .hero h1 { animation: head-rise var(--head-rise) var(--ease-rise) backwards; }
    & .hero .lede { animation: block-rise var(--block-rise) var(--ease-settle) var(--block-rise-delay) backwards; }
  }

  @keyframes heard { from { --ink-heard: var(--unheard); } }
  @keyframes band-front { from { stroke-opacity: var(--band-strength); } to { stroke-opacity: 0; } }
  @keyframes held-out-of-sight { from { visibility: hidden; } }
  @keyframes rule-arrive { from { --rule-arrived: 0%; } }
  @keyframes border-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
  @keyframes land { from { opacity: 0; scale: var(--land-scale); } }
  @keyframes head-rise { from { translate: 0 100%; clip-path: inset(0 0 100% 0); } }
  @keyframes block-rise { from { opacity: 0; translate: 0 var(--rise-block); } }
}



@property --order { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --word { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --reveal-delay { syntax: '*'; inherits: false; }
@property --rise { syntax: '*'; inherits: false; }
@property --draw { syntax: '*'; inherits: false; }
@property --settle { syntax: '*'; inherits: false; }
@property --drifting { syntax: '*'; inherits: false; }
@property --drift-timeline { syntax: '*'; inherits: false; }
@property --drift-range { syntax: '*'; inherits: false; }
:root {
  --rise-stagger: 0.06s; --word-stagger: 0.02s; --word-rise: 0.8s; --button-rise: 0.5s; --rule-draw: 1.2s;
  --frame-settle: 1.6s; --frame-overscale: 1.25;
}

@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .rises:not(.is-revealed) { opacity: 0; translate: 0 var(--rise-block); }
  .rises-by-word:not(.is-revealed) .rise-word { opacity: 0; translate: 0 100%; }
  .draws-rule:not(.is-revealed) { --rule-arrived: 0%; }
  .scales-into-frame:not(.is-revealed) { opacity: 0; }

  .is-revealed {
    --reveal-delay: calc(var(--order) * var(--rise-stagger));
    --rise-time: var(--block-rise);
    &.button { --rise-time: var(--button-rise); }
    &.rises { --rise: block-rise var(--rise-time) var(--ease-rise) var(--reveal-delay) backwards; }
    &.draws-rule { --draw: rule-arrive var(--rule-draw) linear var(--reveal-delay) backwards; }
    &.scales-into-frame { --settle: scale-into-frame var(--frame-settle) var(--ease-fly) backwards; }
    &.scales-into-frame.print { --settle: settle-print var(--frame-settle) var(--ease-fly) backwards; }
    &:is(.rises, .draws-rule, .scales-into-frame) {
      animation: var(--rise, none), var(--draw, none), var(--settle, none), var(--drifting, none);
      animation-timeline: auto, auto, auto, var(--drift-timeline, auto);
      animation-range: normal, normal, normal, var(--drift-range, normal);
    }
  }
  .rises-by-word.is-revealed .rise-word {
    animation: word-rise var(--word-rise) var(--ease-open) calc(var(--order) * var(--rise-stagger) + var(--word) * var(--word-stagger)) backwards;
  }
  .sheet:has(> .scales-into-frame.is-revealed) { animation: clip-to-frame var(--frame-settle); }

  @keyframes word-rise { from { opacity: 0; translate: 0 100%; } }
  @keyframes scale-into-frame { from { opacity: 0; scale: var(--frame-overscale); } }
  @keyframes settle-print { from { opacity: 0; --settle-scale: var(--frame-overscale); } }
  @keyframes clip-to-frame { from, to { clip-path: inset(0%); } }
}



:root { --wordmark-ink-delay: 0.2s; --wordmark-ink-time: 0.5s; }

@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  html[data-arrival~="opened"] {
    & body::after {
      content: ''; position: fixed; inset: 0; z-index: 39; pointer-events: none;
      mask: radial-gradient(circle at var(--vt-x) var(--vt-y), transparent var(--vt-reach), #000 var(--vt-reach));
      animation: vt-front var(--vt-wave) linear both, put-away 0s var(--vt-wave) forwards;
    }
    & .wordmark { animation: wordmark-ink var(--wordmark-ink-time) var(--ease-open) var(--wordmark-ink-delay) backwards; }
  }

  @keyframes put-away { to { visibility: hidden; } }
  @keyframes wordmark-ink { from { color: transparent; } }
}



@media (prefers-reduced-motion: no-preference) {
  :root { --dash-flow-period: 1.2s; --wavefront-pass: 0.9s; --wavefront-runs: 3; }
  .dr-view .dr-speaker-axis { --dash-flow-runs: 4; animation: dash-flow calc(var(--dash-flow-runs) * var(--dash-flow-period)) linear; }
  .dr-view .dr-wavefront { animation: wavefront-pass var(--wavefront-pass) var(--ease-open) var(--heard-at) var(--wavefront-runs) both; }
  @keyframes wavefront-pass { 25% { stroke-opacity: 1; } }
  :is(.sheet, .hero-drawing):not(.is-live) .dr-view * { animation-play-state: paused; }
  @keyframes dash-flow { to { stroke-dashoffset: calc(-2 * var(--dash-flow-runs) * var(--dash-period)); } }
}



.guide-head { display: grid; gap: var(--space-4); justify-items: start; padding-block: var(--space-head) 0; }
.guide-head h1 { max-width: 14ch; text-wrap: pretty; }
.guide-head .section-intro { font-size: var(--step-1); max-width: var(--measure-wide); margin: 0; }
.learn-head { padding-bottom: var(--space-head); }
.learn-groups > .section { padding-block-start: 0; }
.guide-crumb { margin: 0; color: var(--accent-ink); }
.guide-crumb a { display: inline-block; padding-block: 0.3rem; text-decoration-color: currentColor; }
.guide { padding-block: 0 var(--space-section); }
.guide > .section-mark { margin-top: var(--space-head); }

.guide-share { position: relative; margin: 0; }
.copy-link {
  min-height: var(--tap-min); padding: 0 0.9rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: none; color: var(--ink-soft); font: var(--font-label); text-transform: var(--label-case); letter-spacing: var(--label-tracking);
}
@media (hover: hover) { .copy-link:hover { color: var(--ink); border-color: var(--ink); } }
.copy-link:active { color: var(--ink); border-color: var(--ink); }
.copy-link-note {
  --note-arrow: 0.5rem;
  position: absolute; inset-inline-start: 0; bottom: calc(100% + var(--note-arrow)); padding: 0.6rem; white-space: nowrap; pointer-events: none;
  background: var(--label-bg); color: var(--label-ink); font: var(--font-label); text-transform: var(--label-case); opacity: 0;
}
.copy-link-note::after {
  content: '' / ''; position: absolute; top: calc(100% - var(--note-arrow) / 2); inset-inline-start: 1rem;
  inline-size: var(--note-arrow); block-size: var(--note-arrow); background: inherit; rotate: 45deg;
}
.copy-link-note:empty { visibility: hidden; }
.copy-link-note[data-shown] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .copy-link { transition: color var(--hover-fade), border-color var(--hover-fade); }
  .copy-link:active { transition: none; }
  .copy-link-note { transition: opacity var(--hover-fade); }
}
.guide > .section-mark + .guide-head { padding-top: 0; }



.learn-filter { --current-inset: calc(var(--bullet-size) / 2); margin-inline: calc(-1 * var(--gutter)); container-type: inline-size; }
.learn-filter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.learn-filter li { display: flex; flex: 1 0 0; min-width: max-content; }
@container (width < 18.5rem) { .learn-filter li { flex-grow: 0; } }
.learn-filter a { flex: 1; min-height: var(--tap-min); padding: 0 var(--current-room) 0 var(--nav-pad); line-height: var(--tap-min); color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.learn-filter a[aria-current] { color: var(--accent-ink); }
@media (hover: hover) { .learn-filter a:hover { color: var(--ink); } }
.learn-filter .count { vertical-align: super; font-size: var(--step--2); line-height: 1; color: var(--ink-mute); }
.learn-filter .count::before { content: '[' / ''; }
.learn-filter .count::after { content: ']' / ''; }
@media (prefers-reduced-motion: no-preference) { .learn-filter a { transition: color var(--hover-fade); } }


.guides a { text-decoration: underline 2px transparent; }
.guides a:hover { text-decoration-color: var(--accent); }
.guides a::after { content: '' / ''; position: absolute; inset: 0; }
.guides a::before {
  content: '' / ''; position: absolute; inset-block-start: var(--cell-pad-top); inset-inline-end: var(--gutter); inline-size: var(--label-size); block-size: var(--label-size);
  background: var(--accent-ink); mask: var(--button-arrow) center / contain no-repeat;
}

.guide-more { display: grid; gap: var(--space-6); padding-bottom: var(--space-section); }
.guide-more h2 { font-size: var(--step-3); }
.guide-more .guides p { font-size: var(--step--1); }
.guide-more > p { margin: 0; }
.guide-more > p a { display: inline-block; padding-block: 0.3rem; }


.system {
  --system-tabs-h: calc(2 * var(--tap-min)); --system-part-h: 70svh; --system-caption-h: 4rem;
  --system-sheet-rest-scale: 1.04; --system-tab-slide: 0.3s;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8) var(--pair-gap); min-width: 0; counter-reset: system-part;
}
.system-tabs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--space-6); counter-reset: system-tab; }
.system-tabs a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.system-tabs li { counter-increment: system-tab; }
.system-parts { display: grid; }
.system-part { counter-increment: system-part; display: grid; }
.system-part h3 { position: relative; padding-block: 1rem; }
.system-part h3::before { content: var(--track-prefix, '') counter(system-part) / ''; display: block; margin-bottom: 0.6rem; font: var(--font-label); letter-spacing: var(--label-tracking); color: var(--ink); }
.system-sheets { display: grid; gap: var(--space-8); }
@media (min-width: 40rem) { .system:not(.is-story) .system-sheets { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.system.is-story {
  & .system-tabs { display: none; }
  & .system-part { border-bottom: 1px solid var(--rule); }
  & .system-part h3 { min-height: var(--tap-min); padding-inline-end: 3rem; }
  & .system-part h3 > button { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; text-align: start; }
  & .system-part h3 > button::after { content: '' / ''; position: absolute; inset: 0; }
  & .system-part h3 > button[aria-disabled='true'] { cursor: default; }
  & .system-part[data-open] h3::before { color: var(--accent-ink); }
  & .system-part-body { display: grid; grid-template-rows: 0fr; }
  & .system-part-body > * { min-height: 0; overflow: clip; }
  & .system-part:not([data-open]) .system-part-body > * { visibility: hidden; }
  & .system-part[data-open] .system-part-body { grid-template-rows: 1fr; }
  & .system-part[data-open] .system-part-body > .facts { margin-bottom: 1.25rem; }
  & .system-sheets { contain: paint; --sheet-frame-max: 60svh; }
  & .system-sheet { grid-area: 1 / 1; opacity: 0; scale: var(--system-sheet-rest-scale); visibility: hidden; }
  & .system-sheet[data-current] { opacity: 1; scale: 1; visibility: visible; }
}
@media (hover: hover) { .system.is-story .system-part h3:has(> button:not([aria-disabled='true'])):hover { color: var(--accent-ink); } }

.system.is-story.is-scrubbed .system-sheet { opacity: 1; scale: 1; visibility: visible; transition: none; }

.system-strip { margin-inline: calc(-1 * var(--gutter)); border-block: 1px solid var(--rule); }
.system-strip-head { display: flex; justify-content: space-between; border-bottom: 1px solid var(--rule); }
.system-strip-label { display: flex; align-items: center; min-height: var(--tap-min); padding-inline: var(--gutter); font: var(--font-label); letter-spacing: var(--label-tracking); text-transform: var(--label-case); color: var(--ink-soft); }
.system-strip-controls { display: flex; }
.system-strip-controls > * { min-width: var(--tap-min); border-width: 0 0 0 1px; }
.system-strip-controls .button { padding: 0; border-radius: 0; border-color: var(--rule); }
.system-strip-controls .button::after { content: '' / ''; inline-size: var(--key-glyph); block-size: var(--key-glyph); background: currentColor; mask: var(--button-arrow) center / contain no-repeat; }
.system-strip-toggle {
  padding-inline: 1rem; border: 0 solid var(--rule); background: none;
  font: var(--font-label); letter-spacing: var(--label-tracking); text-transform: var(--label-case); color: var(--ink);
}
.system-strip-toggle[aria-disabled='true'] { color: var(--ink-mute); cursor: default; }
.system-strip-prev::after { scale: -1 1; }
.system-strip-rail { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.system-strip-rail::-webkit-scrollbar { display: none; }
.system-strip-cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11rem, 1fr); }
.system-strip-cell { scroll-snap-align: start; }
.system-strip-cell + .system-strip-cell { background: var(--rule-solid-v) left top / 1px 100% no-repeat; }
.system-strip-cell > button {
  display: grid; gap: 0.4rem; align-content: start; width: 100%; height: 100%; min-height: calc(2 * var(--tap-min)); padding: 0.8rem var(--gutter);
  border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--step--1); text-align: start;
}
.system-strip-role { font: var(--font-label); letter-spacing: var(--label-tracking); text-transform: var(--label-case); color: var(--ink-soft); }
.system-strip-cell[data-current] .system-strip-role { color: var(--accent-ink); }
@media (hover: hover) { .system-strip-cell > button:hover .system-strip-name { text-decoration: underline; } }

@media (min-width: 72rem) {
  .system.is-story {
    grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); row-gap: 0;
    grid-template-areas: 'strip strip' 'tabs tabs' 'parts sheets';
    & .system-strip { grid-area: strip; margin-bottom: var(--space-head); }
    & .system-tabs {
      grid-area: tabs; display: block; position: sticky; top: var(--header-cover); z-index: 2; isolation: isolate;
      height: var(--system-tabs-h); margin-inline: calc(-1 * var(--gutter)); background: var(--paper); border-block: 1px solid var(--rule);
      --system-tab-fill: var(--ink);
    }
    & .system-tabs ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; height: 100%; }
    & .system-tabs li + li { background: var(--rule-solid-v) left top / 1px 100% no-repeat; }
    & .system-tabs a {
      display: grid; align-content: space-between; height: 100%; padding: 0.75rem var(--gutter);
      font: var(--font-label); letter-spacing: var(--label-tracking); text-transform: var(--label-case); color: var(--ink-soft); text-decoration: none;
    }
    & .system-tabs a::before { content: var(--track-prefix, '') counter(system-tab) / ''; }
    & .system-tabs a[aria-current] { color: var(--paper); --surface-fill: var(--system-tab-fill); }
    & .system-tabs-mark {
      position: absolute; inset-block: 0; left: 0; z-index: -1; width: calc(100% / var(--part-count)); background: var(--system-tab-fill);
      translate: calc(var(--current-index) * 100%) 0;
    }
    & .system-parts { grid-area: parts; }
    & .system-part { min-height: var(--system-part-h); align-content: start; border-bottom: 0; scroll-margin-top: var(--system-tabs-h); }
    & .system-part h3 { padding-block: var(--space-head) 1rem; }
    & .system-parts .system-part h3::after { content: none; }
    & .system-part-body { grid-template-rows: 1fr; }
    & .system-part:not([data-open]) .system-part-body > * { visibility: visible; }
    & .system-sheets {
      grid-area: sheets; position: sticky; top: calc(var(--header-cover) + var(--system-tabs-h)); align-self: start; align-content: center;
      min-height: calc(100svh - var(--header-bottom) - var(--system-tabs-h) - var(--wall-inset));
      --sheet-frame-max: calc(100svh - var(--header-bottom) - var(--system-tabs-h) - var(--wall-inset) - var(--system-caption-h));
    }
  }
}
.sound-guides { display: grid; gap: var(--space-4); }


.acoustics-band {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6) var(--pair-gap);
  padding-block: var(--space-section);
}
.acoustics-band-name { flex: none; width: min-content; display: grid; gap: var(--space-3); }
.acoustics-band-body { flex: 1 1 var(--measure); max-width: var(--measure-wide); display: grid; gap: var(--space-6); justify-items: start; }
.acoustics-band-body > p { margin: 0; font-size: var(--step-lead); max-width: none; }



:where(.rules:not(.principles, .partners .rules)) { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--pair-gap); max-width: var(--pair-max); }
.visit-rules > .rules { margin-inline: calc(-1 * var(--gutter)); max-width: none; column-gap: 0; }
.visit-rules > .rules > li { padding-inline: var(--gutter); }
@media (min-width: 52rem) { :where(.rules:not(.principles, .partners .rules)) { grid-template-columns: 1fr 1fr; } }
:where(.rules:not(.principles, .partners .rules)) > li { padding: 0.85rem 0; display: grid; gap: 0.2rem; align-content: start; }
.rules li > span { max-width: var(--measure); }
.partners-ask { display: grid; gap: var(--space-6); justify-items: start; margin: 0; padding-block: var(--space-section); }
.partners-ask p { margin: 0; max-width: var(--measure-wide); font-size: var(--step-lead); }



.terms { display: grid; gap: var(--space-8) var(--space-12); align-items: start; grid-template-columns: minmax(0, var(--measure-wide)); }
@media (min-width: 72rem) { .terms { grid-template-columns: minmax(0, var(--measure)) minmax(0, var(--measure-wide)); justify-content: start; } }


:where(.facts, .booking-row dl) {
  margin: 0; display: grid; grid-template-columns: minmax(0, 1fr);

  & > :is(dt, dd) { margin: 0; }
  & > dt { padding-top: 0.65rem; color: var(--ink-soft); }
  & > dd { padding-block: 0.2rem 0.65rem; color: var(--ink); overflow-wrap: anywhere; }

  @media (min-width: 40rem) {
    grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--space-6);
    & > dt { padding-block: 0.65rem; }
    & > dd { padding-top: 0.65rem; }
  }
}


.price-calc {
  --tick-minor: 0.375rem; --tick-hour: 0.75rem; --tick-gap: 2px;
  --cap-clear: calc((var(--tap-min) - var(--fader-cap-w)) / 2);
  --scale-top: max(0px, var(--tick-hour) + var(--tick-gap) - var(--cap-clear));
  --cap-top: calc(var(--scale-top) + var(--cap-clear));
  --price-legend-h: 1.5rem;
  container-type: inline-size;
}
.price-scale { position: relative; margin-top: 0.25rem; padding-block: var(--scale-top) max(0px, var(--step--2) + var(--tick-gap) - var(--cap-clear)); }
.price-legend { display: block; block-size: var(--price-legend-h); color: var(--ink-mute); }
.price-ticks { position: absolute; inset: var(--price-legend-h) calc(var(--fader-cap-h) / 2) 0; pointer-events: none; }
.price-tick {
  position: absolute; left: calc(var(--at) * 100%); top: calc(var(--cap-top) - var(--tick-gap) - var(--tick-minor)); height: var(--tick-minor);
  border-inline-start: 1px solid var(--rule); translate: -0.5px 0;
}
.price-tick.is-hour { top: calc(var(--cap-top) - var(--tick-gap) - var(--tick-hour)); height: var(--tick-hour); border-color: var(--ink-mute); }
.price-numeral {
  position: absolute; left: calc(var(--at) * 100%); top: calc(var(--cap-top) + var(--fader-cap-w) + var(--tick-gap)); translate: -50% 0;
  font: var(--font-label); font-size: var(--step--2); line-height: 1;
  color: var(--ink-mute); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.price-scale > input {
  --set: 0;
  position: relative;
  &:focus-visible { outline: none; }
  @media (forced-colors: none) {
    background: linear-gradient(var(--accent) 0 0) calc(var(--fader-cap-h) / 2) center / calc(var(--set) * (100% - var(--fader-cap-h))) calc(var(--fader-slot-w) - 2px) no-repeat, var(--cross-fader-slot);
  }
}
@media (scripting: none) { .price-scale { display: none; } }

.visit-rules { display: grid; gap: var(--space-3); }




.piece { gap: 0.6rem; }
.frame { aspect-ratio: 1; display: flex; align-items: flex-end; justify-content: center; margin-bottom: calc(var(--bar) + 0.4rem); }
a.frame { text-decoration: none; }

.frame-inner { border: var(--border-w) solid var(--ink); background: var(--art-mat); box-shadow: var(--hard-bar); overflow: clip; }

@property --settle-scale { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --print-shrink { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --hover-zoom { syntax: '<number>'; inherits: true; initial-value: 1; }
.print { display: block; overflow: clip; scale: calc(var(--settle-scale) * var(--print-shrink)); }

@property --drift { syntax: '<number>'; inherits: true; initial-value: 0; }
:root { --drift-zoom: 0.1; --drift-shift: 4%; --drawing-drift-zoom: 0.05; }
.print img { scale: calc(var(--hover-zoom) * (1 + var(--drift-zoom) * var(--drift))); translate: 0 calc(-1 * var(--drift-shift) * var(--drift)); }
.hero-drawing > .dr-sheet { scale: calc(1 + min(var(--drawing-drift-zoom), tan(atan2(2 * var(--gutter), 100cqi))) * var(--drift)); }
@media (prefers-reduced-motion: no-preference) and (min-width: 64rem) {
  @supports (animation-timeline: view()) {
    :is(.hero-drawing, .frame-inner) { view-timeline: --drift-frame block; view-timeline-inset: 0; }
    :where(.hero-drawing > .dr-sheet, .print) {
      --drifting: drift linear both; --drift-timeline: --drift-frame;
      animation: var(--drifting, none); animation-timeline: var(--drift-timeline, auto); animation-range: var(--drift-range, normal);
    }
    .hero-drawing > .dr-sheet { --drift-range: exit; }
    @keyframes drift { to { --drift: 1; } }
  }
}

@property --inked { syntax: '<number>'; inherits: false; initial-value: 1; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (mask-composite: intersect) {
    .print.is-inking {
      --ink-drag: 1.12; --ink-edge-narrow: 61.8%;
      --ink-run: calc(100% + var(--ink-edge-depth) * 100%);
      --ink-begins-above-foot: 25%; --ink-ends-below-head: 55%;
      mask:
        var(--ink-edge) left 0 top calc((1 - var(--inked)) * var(--ink-run)) / 100% 200% no-repeat,
        var(--ink-edge) left 0 top calc((1 - var(--inked)) * var(--ink-drag) * var(--ink-run)) / var(--ink-edge-narrow) 200% repeat-x;
      mask-composite: intersect;
      animation: ink-in linear both, var(--drifting, none);
      animation-timeline: view(block var(--ink-ends-below-head) var(--ink-begins-above-foot)), var(--drift-timeline, auto);
      animation-range: normal, var(--drift-range, normal);
    }
    @keyframes ink-in { from { --inked: 0; } }
  }
}
.frame-inner img { position: relative; display: block; width: 100%; height: auto; object-fit: cover; overflow: hidden; }
.frame-inner img::after { content: ''; position: absolute; inset: 0; background: var(--paper-sunk); }



.piece-dims {
  --dim-tick: 0.5rem;
  position: relative; margin: 0 auto; max-width: none; padding-top: calc(var(--dim-tick) + 0.2rem); text-align: center; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(var(--ink-soft) 0 0) left calc(var(--dim-tick) / 2) / 100% 1px no-repeat;
}
.piece-dims::before, .piece-dims::after {
  content: ''; position: absolute; top: 0; width: 1px; height: var(--dim-tick); background: var(--ink-soft); transform: rotate(45deg);
}
.piece-dims::before { left: 0; }
.piece-dims::after { right: 0; }

.piece h3 { margin-top: 0.4rem; }
.piece-meta { margin: 0; color: var(--ink-soft); }
.piece-meta a { color: var(--ink); }
.piece-meta .data { font-size: 1em; }
.piece-foot { display: flex; align-items: baseline; gap: 0 var(--space-3); flex-wrap: wrap; padding-top: 0.6rem; font: var(--label-weight) var(--step--2) / 1.4 var(--font-ui); text-transform: var(--label-case); letter-spacing: var(--label-tracking); }
.piece-foot .data { font: 700 var(--step-1) / 1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--ink); }
.piece-foot a { display: inline-flex; align-items: center; min-height: var(--tap-min); margin-inline-start: auto; color: var(--accent-ink); text-decoration: none; }
.piece-foot a:hover { text-decoration: underline; }
.piece .status { position: absolute; top: 1rem; inset-inline-end: 1.25rem; line-height: 1; color: var(--ink); }
.piece .status[data-status='available'] { --status-kind: var(--ok); }
.piece .status[data-status='reserved'] { --status-kind: var(--warn); }
.piece .status[data-status='sold'] { --status-kind: var(--ink-mute); }


:is(.status-pill, .piece .status)::before {
  content: '[' / ''; padding-inline-end: 1.3em;
  background: linear-gradient(var(--status-kind, transparent) 0 0) right 0.4em center / 0.6em 0.6em no-repeat;
}
:is(.status-pill, .piece .status)::after { content: ']' / ''; }


.art-note { display: grid; gap: var(--space-4) var(--pair-gap); align-items: baseline; margin: 0 calc(-1 * var(--gutter)); padding: 1.25rem var(--gutter) 0; border-top: 1px solid var(--ink); }
.art-note h2 { font-size: var(--step-3); }
.art-note p { margin: 0; color: var(--ink-soft); }
.art-note h3 + p { margin-top: 0.5rem; white-space: pre-line; }
.art-note p + h3 { margin-top: 1.25rem; }
@media (min-width: 52rem) { .art-note { grid-template-columns: repeat(2, minmax(0, var(--measure))); } }




.teaser { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 52rem) { .teaser { grid-template-columns: 1fr 1fr; } }
.teaser > div { display: grid; gap: 1.25rem; justify-items: start; }
.teaser p { color: var(--ink-soft); margin: 0; }
.offer-links { align-items: stretch; }
.offer-links > div { grid-template-rows: auto 1fr auto; align-items: start; }



.faq { margin-inline: calc(-1 * var(--gutter)); display: grid; gap: 0; align-items: start; }
.faq details { padding-inline: var(--gutter); }
.faq summary {
  position: relative; list-style: none; padding: 1rem 3rem 1rem 0;
  font: 600 var(--step-0) / 1.35 var(--font-body); letter-spacing: var(--tracking-display);
}
.faq summary::-webkit-details-marker { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .guides a { transition: text-decoration-color var(--hover-fade); }
  :is(.faq summary, .page-menu a, .system-part h3, .system-part h3::before) { transition: color var(--hover-fade); }
  .system.is-story {
    & .system-part-body { transition: grid-template-rows var(--hover-fade); }
    & .system-part-body > * { transition: visibility 0s linear var(--hover-fade); }
    & .system-part[data-open] .system-part-body > * { transition-delay: 0s; }
    & .system-sheet { transition: opacity var(--hover-fade), scale var(--hover-fade), visibility 0s linear var(--hover-fade); }
    & .system-sheet[data-current] { transition-delay: 0s; }
    & .system-tabs-mark { transition: translate var(--system-tab-slide) linear; }
    & .system-tabs a { transition: color var(--system-tab-slide) linear; }
  }
  :is(.faq details, .flow-notes, .guide-contents details) { interpolate-size: allow-keywords; }
  :is(.faq details, .flow-notes, .guide-contents details)::details-content {
    display: flow-root; block-size: 0; overflow: clip;
    transition: block-size var(--hover-fade), content-visibility var(--hover-fade) allow-discrete;
  }
  :is(.faq details, .flow-notes, .guide-contents details)[open]::details-content { block-size: auto; transition-property: block-size; }
  .flow-notes:has(> .disclosure-body)::details-content { transition: none; }
  .flow-notes:has(> .disclosure-body)[open]::details-content { overflow: visible; }
}

:is(.faq summary, .system.is-story .system-part h3)::after {
  --faq-bar: 0.6em; --faq-stroke: 1.5px; --faq-bar-upright: var(--faq-bar);
  content: '[\00a0]' / ''; position: absolute; right: 0; top: 1rem; font: 500 var(--step--2) / 1.9 var(--font-ui); color: var(--ink-mute);
  background:
    linear-gradient(currentColor 0 0) center / var(--faq-bar) var(--faq-stroke) no-repeat,
    linear-gradient(currentColor 0 0) center / var(--faq-stroke) var(--faq-bar-upright) no-repeat;
}
:is(.faq details[open] > summary, .system.is-story .system-part[data-open] h3)::after { --faq-bar-upright: 0px; }
:is(.faq details[open] > summary, .system.is-story .system-part[data-open] h3, .faq summary:focus-visible, .system.is-story .system-part h3:has(:focus-visible))::after { color: var(--accent-ink); }
@media (hover: hover) { .faq summary:hover::after { color: var(--accent-ink); } }
@media (prefers-reduced-motion: no-preference) {
  :is(.faq summary, .system.is-story .system-part h3)::after { transition: background-size var(--hover-fade) ease; }
}
@media (forced-colors: active) {
  :is(.faq summary, .system.is-story .system-part h3)::after { content: '[+]' / ''; background: none; }
  :is(.faq details[open] > summary, .system.is-story .system-part[data-open] h3)::after { content: '[−]' / ''; }
}



.closing { display: grid; justify-items: start; gap: var(--space-6); padding-block: var(--space-section); }
.closing p { margin: 0; }
.closing h2 { max-width: 12ch; }

.site-footer {
  container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--gutter); align-items: center;
  padding: var(--space-6) var(--gutter); font-size: var(--step--1); color: var(--ink-soft);
}
.site-footer p { margin: 0; max-width: none; }

.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.footer-links .button { --button-key-h: var(--key-min); --button-pad-inline: 0.875rem; }
.footer-links .email { grid-column: 1 / -1; text-transform: none; letter-spacing: 0.04em; }
@media (min-width: 40rem) { .footer-links { display: flex; } }
@media (min-width: 52rem) { .site-footer { grid-template-columns: minmax(0, 1fr) auto; } }
.controller {
  --zone-pad: var(--space-4); --groove-gap: var(--space-6); --groove-w: 2px; --knob-column: 14rem; --knob-max: 11rem; --scale-overhang: 0.875rem;
  container: controller / inline-size; grid-column: 1 / -1; position: relative;
  color: var(--ink);
}
@media (scripting: none) { .controller { display: none; } }
.controller-zones { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.controller-zone { position: relative; display: flex; flex-direction: column; gap: var(--space-4); min-inline-size: 0; padding-block: var(--zone-pad); --groove-across: 0; }
.zone-fader { --groove-across: 1; }
@container controller (min-width: 40rem) {
  .controller-zones { grid-template-columns: var(--knob-column) minmax(0, 1fr); }
  .zone-knob { padding-inline-end: var(--groove-gap); }
  .zone-fader { --groove-across: 0; padding-inline-start: var(--groove-gap); }
}

.controller-zone + .controller-zone::before {
  --groove-down: calc(1 - var(--groove-across)); --groove-far: calc(100% - var(--groove-w));
  content: ''; position: absolute;
  inset-block: calc(var(--groove-down) * var(--zone-pad)) calc(var(--groove-down) * var(--zone-pad) + var(--groove-across) * var(--groove-far));
  inset-inline: 0 calc(var(--groove-down) * var(--groove-far));
  background: linear-gradient(calc(90deg + var(--groove-across) * 90deg), var(--rule) 50%, var(--bevel-hi) 50%);
}
:is(.knob-title, .fader-label, .controller .engraved) { font: 500 var(--engraved-size) / 1 var(--font-ui); letter-spacing: var(--engraved-tracking); text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; text-shadow: var(--engraved); }
.controller-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-block-size: 20px; }

.led-glyphs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.led-display {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--display-gap); margin: var(--display-bezel-w); padding: var(--display-pad);
  border-radius: 2px; background: var(--display-glass); box-shadow: var(--display-bezel);
}
.led-display-text { display: none; }
.led-display-face { display: block; block-size: var(--display-figure); inline-size: auto; }
.led-display-unlit { fill: var(--unlit); }
.led-display-cell { fill: var(--lit); stroke: var(--lit-halo); stroke-linejoin: round; paint-order: stroke; }
.led-display-units { display: grid; gap: var(--display-legend-gap); }
.led-display-unit {
  display: flex; align-items: center; gap: var(--display-legend-gap); font: 600 var(--engraved-size) / 1 var(--font-ui); letter-spacing: var(--engraved-tracking);
  text-transform: uppercase; white-space: nowrap; color: var(--unlit-legend);
  &::before { content: ''; flex: none; inline-size: var(--display-led); aspect-ratio: 1; border-radius: 50%; background: var(--unlit-legend); }
  &.is-lit { color: var(--lit); }
  &.is-lit::before { background: radial-gradient(circle at 40% 35%, var(--lit-hot), var(--lit) 60%); box-shadow: 0 0 0 1px var(--lit-halo); }
}
@media (forced-colors: active) {
  .led-display { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
  .led-display-face { display: none; }
  .led-display-text { display: block; font: 500 var(--step--2) / 1 var(--font-ui); color: CanvasText; white-space: nowrap; }
  .led-display-unit { color: GrayText; &::before { forced-color-adjust: none; background: GrayText; } }
  .led-display-unit.is-lit { color: Highlight; &::before { background: Highlight; box-shadow: none; } }
}

.knob-choice { display: flex; flex-direction: column; block-size: 100%; gap: var(--space-4); }
.knob-control {
  --g: 0; --knob-grow: 1.08; --knob-delay: calc(var(--g) * var(--fader-intent) + (1 - var(--g)) * var(--fader-linger));
  --knob-time: var(--fader-reveal) var(--ease-roll) var(--knob-delay);
  position: relative; flex: none; margin-block: auto;
}
.knob-control.is-grown { --g: 1; }
.knob-control:hover .knob-pointer { stroke-width: 3px; }
.knob-zone { position: relative; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.knob-control.is-dragging .knob-zone { cursor: grabbing; }
.knob { display: block; inline-size: 100%; max-inline-size: var(--knob-max); block-size: auto; margin-inline: auto; overflow: visible; }
.knob-cap { transform-box: fill-box; transform-origin: center; scale: calc(1 + var(--g) * (var(--knob-grow) - 1)); transition: scale var(--knob-time); }
.knob-shadow { fill: var(--bevel-lo); }
.knob-face-lit { stop-color: var(--chamfer-lit); }
.knob-face-shade { stop-color: var(--chamfer-shade); }
.knob-body { stroke: var(--plate-edge); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.knob-ring { fill: none; stroke: var(--bevel-hi); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.knob-pointer { stroke: var(--accent); stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: transform var(--fader-reveal) var(--knob-detent); }
.knob-control.is-dragging .knob-pointer { transition: none; }
.knob-tick { stroke: var(--ink-mute); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.knob-legend { fill: var(--ink-mute); font: 500 9.5px var(--font-ui); dominant-baseline: central; letter-spacing: var(--engraved-tracking); text-transform: uppercase; }
.knob-legend.is-current { fill: var(--ink); }
.knob-choice:has(:focus-visible) .knob-body { stroke: var(--focus); stroke-width: 2px; }

.zone-knob > .lamp { position: absolute; inset-block-start: var(--zone-pad); inset-inline-end: 0; }
@container controller (min-width: 40rem) { .zone-knob > .lamp { inset-inline-end: var(--groove-gap); } }
.lamp { display: flex; align-items: center; gap: 6px; }
.lamp i, .transport-key::after {
  box-sizing: border-box; inline-size: var(--lamp-size); block-size: var(--lamp-size); border: 1px solid var(--lamp-rim); border-radius: 50%; background: var(--led-off);
  transition: background var(--lamp-fade) linear, box-shadow var(--lamp-fade) linear;
}
.lamp.is-lit i, .transport-key:is([aria-pressed='true'], .is-active)::after { background: var(--lit); box-shadow: 0 0 var(--lamp-size) var(--lit-halo); }
.transport-key::after { content: '' / ''; position: absolute; inset: var(--lamp-inset) var(--lamp-inset) auto auto; }
.lamp i { display: block; }
@media (forced-colors: active) {
  .lamp i, .transport-key::after { forced-color-adjust: none; border-color: ButtonText; background: Canvas; box-shadow: none; }
  .lamp.is-lit i, .transport-key:is([aria-pressed='true'], .is-active)::after { background: Highlight; }
}

.zone-fader {
  --controller-track: calc(var(--tap-min) + 0.5rem); --cap-band: calc((var(--controller-track) - var(--fader-cap-w)) / 2);
  & :is(.fader-travel, .cross-fader) { --fader-track: var(--controller-track); }
  & .choice-fader { display: flex; flex-direction: column; gap: var(--space-2); }
  & .fader-legend { display: flex; justify-content: space-between; padding-inline: var(--scale-overhang); font: 500 var(--engraved-size) / 1 var(--font-ui); letter-spacing: var(--engraved-tracking); text-transform: uppercase; color: var(--ink-mute); }
  & .fader-legend b { font: 500 0.875rem / 1 var(--font-ui); color: var(--ink); }
  & .fader-travel { position: relative; padding-inline: var(--scale-overhang); }
  & .fader-scale { display: flex; flex-direction: row-reverse; justify-content: space-between; margin: 0; padding: 0 calc(var(--fader-cap-h) / 2); list-style: none; pointer-events: none; }
  & .fader-scale.is-above { position: absolute; inset-block-start: 0; inset-inline: var(--scale-overhang); }
  & .fader-scale li { display: flex; flex-direction: column; align-items: center; inline-size: 0; }
  & .fader-scale li::before { content: ''; inline-size: 1px; block-size: calc(var(--cap-band) / 2); background: var(--ink-mute); }
  & .fader-scale.is-above li { justify-content: flex-end; block-size: var(--cap-band); }
  & .fader-scale li.is-scaled::before { block-size: var(--cap-band); background: var(--ink); }
  & .fader-scale li.is-current::before { inline-size: 2px; block-size: var(--cap-band); background: var(--lit-mark); box-shadow: 0 0 var(--glow) var(--lit-mark); }
  & .fader-scale.is-below { margin-block-start: calc(-1 * var(--cap-band)); }
  & .fader-scale-label { margin-block-start: 6px; font: 500 0.75rem / 1 var(--font-ui); color: var(--ink-mute); white-space: nowrap; }
}
@container controller (min-width: 40rem) { .zone-fader .controller-head { align-items: flex-start; } }
.zone-fader .fader-scale li.is-beyond { opacity: var(--fader-dimmed); }
.zone-fader .fader-travel::before {
  position: absolute; z-index: 2; pointer-events: none; inset-block-start: 0; inset-inline-end: var(--scale-overhang);
  inline-size: var(--fader-cap-h); block-size: var(--fader-track); background: var(--cross-fader-cap);
}
:root[data-sound-live] {
  & .zone-fader .fader-travel::before { content: ''; }
  & .choice-fader input { opacity: var(--fader-dimmed); }
  & .choice-fader input::-webkit-slider-thumb { background: none; }
  & .choice-fader input::-moz-range-thumb { background: none; }
  & .fader-scale li { opacity: var(--fader-dimmed); }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) { .zone-fader { display: none; } }
@media (prefers-reduced-motion: reduce) { :is(.knob-cap, .knob-pointer, .lamp i) { transition: none; } .transport-key::after { transition: none; } }
@media (forced-colors: active) { .knob-body, .knob-tick { stroke: CanvasText; } .knob-body { fill: Canvas; } .knob-shadow, .knob-ring { display: none; } .knob-pointer { stroke: Highlight; } .knob-legend { fill: CanvasText; } .knob-legend.is-current { fill: Highlight; } .controller-zone + .controller-zone::before { forced-color-adjust: none; background: CanvasText; } }

.site-footer .footer-mark { grid-column: 1 / -1; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: pan-y pinch-zoom; }
.footer-mark .mark-drawing { width: 100%; height: auto; }





:root:has(body.rack) { --page-max: 1680px; --page-share: 4vw; --page-start: var(--page-least-side); --column-pad: var(--rack-side); }
.rack {
  --unit-face: var(--unit-finish); --unit-lit: var(--chamfer-lit); --unit-shade: var(--chamfer-shade); --unit-edge: var(--plate-edge);
  padding: var(--rack-side) var(--rack-side) var(--rack-gap); background: none; box-shadow: none;
}
.rack :is(.site-header, main > .unit, .site-footer) {
  --unit-top: inset 0 1px var(--unit-edge), inset 0 calc(var(--chamfer) + 1px) var(--unit-lit);
  --unit-foot: inset 0 -1px var(--unit-edge), inset 0 calc(-1 * var(--rack-lip)) var(--unit-shade);
  --unit-sides: inset 1px 0 var(--unit-edge), inset -1px 0 var(--unit-edge), inset calc(var(--chamfer) + 1px) 0 var(--unit-lit), inset calc(-1px - var(--chamfer)) 0 var(--unit-shade);
  --unit-cast: radial-gradient(ellipse 50% 100% at var(--cast-centre) 0, var(--unit-cast-shade), transparent) top / 100% calc(var(--rack-gap) / 3) no-repeat;
  border-radius: var(--plate-radius); color: var(--ink-soft);
  background: var(--unit-cast), var(--unit-face);
  box-shadow: var(--unit-top), var(--unit-foot), var(--unit-sides);
}
.rack :is(main > .unit, .site-footer) { position: relative; }
.rack main > .unit { margin-block-end: var(--rack-gap); }

.rack :is(main > .unit, .site-footer) {
  --foot-disc-w: calc(var(--rack-foot-w) * var(--rack-foot-disc)); --foot-shadow-w: calc(var(--foot-disc-w) * var(--rack-foot-shadow));
  --foot-p: calc((var(--rack-foot-c) - var(--rack-foot-w) / 2) / (1 - var(--rack-foot-w)) * 100%);
  --foot-outer-p: calc((var(--rack-foot-c) - var(--rack-foot-w) / 2) / (1 - var(--rack-foot-w) / 2) * 100%);
  --foot-inner-p: calc(var(--rack-foot-c) / (1 - var(--rack-foot-w) / 2) * 100%);
  --foot-disc-p: calc((var(--rack-foot-c) - var(--foot-disc-w) / 2) / (1 - var(--foot-disc-w)) * 100%);
  --foot-shadow-p: calc((var(--rack-foot-c) - var(--foot-shadow-w) / 2) / (1 - var(--foot-shadow-w)) * 100%);
  --foot-collar-h: calc(var(--rack-gap) * var(--rack-foot-collar)); --foot-cone-h: calc(var(--rack-gap) * (var(--rack-foot-tip) - var(--rack-foot-collar))); --foot-disc-h: calc(var(--rack-gap) * (1 - var(--rack-foot-tip)));
  --foot-collar-box: top / calc(var(--rack-foot-w) * 100%) var(--foot-collar-h) no-repeat;
  --foot-cone-box: top var(--foot-collar-h) / calc(var(--rack-foot-w) * 100%) var(--foot-cone-h) no-repeat;
  --foot-half-box: top var(--foot-collar-h) / calc(var(--rack-foot-w) * 50%) var(--foot-cone-h) no-repeat;
  --foot-axis-box: top var(--foot-collar-h) / 1px var(--foot-cone-h) no-repeat;
  --foot-disc-box: bottom / calc(var(--foot-disc-w) * 100%) var(--foot-disc-h) no-repeat;
  --foot-solid: linear-gradient(#000 0 0);
  --foot-cut-right: linear-gradient(to top right, transparent calc(50% - 0.5px), #000 calc(50% + 0.5px));
  --foot-cut-left: linear-gradient(to top left, transparent calc(50% - 0.5px), #000 calc(50% + 0.5px));
  --foot-turned: linear-gradient(90deg, var(--foot-lo), var(--foot-mid) 16%, var(--foot-hi) 34%, var(--foot-mid) 62%, var(--foot-lo) 88%, var(--foot-mid));
  --foot-cone: conic-gradient(from -60deg at 50% 100%, var(--foot-lo), var(--foot-mid) 22deg, var(--foot-hi) 40deg, var(--foot-mid) 70deg, var(--foot-lo) 106deg, var(--foot-mid) 120deg);
}
.rack :is(main > .unit, .site-footer)::before, .rack :is(main > .unit, .site-footer)::after { content: ''; position: absolute; inset: 100% 0 auto; block-size: var(--rack-gap); pointer-events: none; }
.rack :is(main > .unit, .site-footer)::before {
  background:
    radial-gradient(closest-side, var(--plate-cast), transparent) left var(--foot-shadow-p) bottom / calc(var(--foot-shadow-w) * 100%) calc(var(--foot-disc-h) * 3) no-repeat,
    radial-gradient(closest-side, var(--plate-cast), transparent) right var(--foot-shadow-p) bottom / calc(var(--foot-shadow-w) * 100%) calc(var(--foot-disc-h) * 3) no-repeat,
    radial-gradient(ellipse 50% 100% at var(--cast-centre) 0, var(--plate-cast), transparent);
}
.rack :is(main > .unit, .site-footer)::after {
  background:
    linear-gradient(var(--foot-seat) 0 1px, transparent 1px) left var(--foot-p) var(--foot-collar-box),
    linear-gradient(var(--foot-seat) 0 1px, transparent 1px) right var(--foot-p) var(--foot-collar-box),
    var(--foot-turned) left var(--foot-p) var(--foot-collar-box),
    var(--foot-turned) right var(--foot-p) var(--foot-collar-box),
    var(--foot-cone) left var(--foot-p) var(--foot-cone-box),
    var(--foot-cone) right var(--foot-p) var(--foot-cone-box),
    linear-gradient(var(--foot-rim) 0 1px, transparent 1px) left var(--foot-disc-p) var(--foot-disc-box),
    linear-gradient(var(--foot-rim) 0 1px, transparent 1px) right var(--foot-disc-p) var(--foot-disc-box),
    var(--foot-turned) left var(--foot-disc-p) var(--foot-disc-box),
    var(--foot-turned) right var(--foot-disc-p) var(--foot-disc-box);
  mask:
    var(--foot-solid) left var(--foot-p) var(--foot-collar-box),
    var(--foot-solid) right var(--foot-p) var(--foot-collar-box),
    var(--foot-cut-right) left var(--foot-outer-p) var(--foot-half-box),
    var(--foot-cut-left) left var(--foot-inner-p) var(--foot-half-box),
    var(--foot-cut-left) right var(--foot-outer-p) var(--foot-half-box),
    var(--foot-cut-right) right var(--foot-inner-p) var(--foot-half-box),
    var(--foot-solid) left calc(var(--rack-foot-c) * 100%) var(--foot-axis-box),
    var(--foot-solid) right calc(var(--rack-foot-c) * 100%) var(--foot-axis-box),
    var(--foot-solid) left var(--foot-disc-p) var(--foot-disc-box),
    var(--foot-solid) right var(--foot-disc-p) var(--foot-disc-box);
}

.rack :is(main > .unit, .site-footer) :is(h1, h2, h3, .section-mark, .unit-plate, .hero-place, .facts dt, .analyser-system, .analyser-steps, .analyser-readouts dt) { text-shadow: var(--engraved); }
.rack :is(
  .unit-plate, .site-nav, .unit .section-mark, .unit .section > header h2, .steps h3, .facts dt, .rules strong, .analyser-system, .analyser-steps, .analyser-readouts dt,
  .price-legend, .price-tick, .price-numeral, .price-rates dt,
  .knob-title, .knob-legend, .knob-tick, .fader-label, .fader-scale, .controller .engraved, .transport-key
) { --ink: var(--legend-ink); --ink-mute: var(--legend-ink-mute); --ink-soft: var(--legend-ink-soft); }


.unit-plate {
  display: flex; align-items: center; gap: 1.25em; white-space: nowrap;
  min-block-size: var(--plate-band); margin: 0 var(--gutter);
  font: 400 var(--engraved-size) / 1 var(--font-ui); letter-spacing: var(--engraved-tracking); text-transform: uppercase; color: var(--ink-mute);
  background: linear-gradient(var(--engrave-shade) 0 0) bottom 1px left / 100% 1px no-repeat, linear-gradient(var(--engrave-lip) 0 0) bottom left / 100% 1px no-repeat;
}
@media (max-width: 24.99rem) { .unit-plate { gap: 0.75em; font-size: var(--engraved-size-narrow); letter-spacing: var(--engraved-tracking-narrow); } }


.vu-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.vu { display: block; inline-size: 100%; block-size: auto; }
.vu-dome-lit { stop-color: var(--meter-dome-lit); }
.vu-dome-dim { stop-color: var(--meter-dome-dim); }
.vu-rim { stop-color: var(--meter-rim); }
.vu-halo { stop-color: var(--meter-halo); }
.vu-fades { stop-opacity: 0; }
.vu-scale, .vu-tick { fill: none; stroke: var(--meter-ink); stroke-width: var(--meter-hairline); }
.vu-scale { stroke-width: var(--meter-rule); }
.vu-tick.is-labelled { stroke-width: var(--meter-major); }
.vu text { fill: var(--meter-ink); font: 400 var(--meter-type) var(--font-ui); text-anchor: middle; dominant-baseline: central; letter-spacing: var(--meter-tracking); }
.vu text.vu-unit { font-size: var(--meter-legend); letter-spacing: var(--engraved-tracking); text-transform: uppercase; }
:is(.vu-needle, .vu-needle-glow) { stroke-linecap: round; stroke-dasharray: 0 var(--meter-needle-root) var(--meter-needle-reach); transform-box: view-box; transform-origin: 120px 140px; rotate: calc(var(--needle-peg) + var(--set, 0) * var(--needle-sweep)); }
.vu-needle { stroke: var(--meter-needle); stroke-width: var(--meter-needle-w); }
.vu-needle-glow { stroke: var(--meter-needle-glow); stroke-width: var(--meter-glow-w); }
.vu-hub { fill: url(#vu-dome); stroke: url(#vu-rim); stroke-width: var(--meter-rim-w); }
.vu-hub-ring { fill: url(#vu-halo); }
@media (prefers-reduced-motion: no-preference) { :is(.vu-needle, .vu-needle-glow) { transition: rotate var(--needle-swing) var(--ease-settle); } }


.meter-window {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--bezel-w); margin-block-start: 0.75rem;
  padding: var(--meter-lip-h) var(--bezel-w) 0; border-radius: 1px;
  background:
    var(--meter-lip) top / 100% var(--meter-lip-h) no-repeat, linear-gradient(var(--meter-seam) 0 0) top var(--meter-lip-h) left / 100% 1px no-repeat,
    var(--grain-dark), var(--meter-ends), var(--meter-glass);
  box-shadow: inset 1px 0 var(--meter-glass-edge), inset -1px 0 var(--meter-glass-edge), inset 0 -1px var(--meter-glass-edge), var(--meter-frame);
}
.meter-window::after {
  content: ''; position: absolute; left: 50%; bottom: var(--meter-sensor-at); translate: -50% 0; inline-size: var(--meter-sensor-w); aspect-ratio: 1; border-radius: 50%;
  background: var(--meter-sensor); box-shadow: 0 0 0 1px var(--meter-seam);
}


.rack { --header-cover: var(--wall-inset); }
.rack .site-header, .rack .site-header.is-hidden { position: relative; top: auto; translate: none; pointer-events: auto; transition: none; }
.rack .site-header::before, .rack .site-header::after { content: none; }
.rack header.site-header { --unit-foot: inset 0 0 transparent; border-end-start-radius: 0; border-end-end-radius: 0; }
.rack main > .unit:first-of-type { --unit-top: inset 0 0 transparent; --unit-cast: none; border-start-start-radius: 0; border-start-end-radius: 0; }


.rack .nav-menu > ul { --menu-top: min(var(--header-bottom) + var(--rack-side), 100dvh - var(--frame-inset) - var(--header-row)); background: var(--unit-face); }
.rack .wordmark { padding-inline-end: 0; --mark-dim: color-mix(in srgb, currentColor 45%, var(--paper)); }

.rack .treated-border::before { content: none; }




.rack {
  --legend-size: 0.8125rem;
  --bezel-frame: 0 0 0 1px var(--unit-edge), inset 0 0 0 1px var(--fascia-lit), inset 0 2px 0 #ffffff, 0 2px 0 var(--bevel-lo);
  --zone-groove: linear-gradient(var(--engrave-shade) 0 0) top left / 100% 1px no-repeat, linear-gradient(var(--engrave-lip) 0 0) top 1px left / 100% 1px no-repeat;
}
.rack :is(main, .site-footer) { --focus: var(--accent); }
.rack .unit :is(
  .section > header h2, .steps h3, .facts dt, .rules strong,
  .hero-place, .price-legend, .price-rates dt
) { font: var(--font-label); font-size: var(--legend-size); line-height: 1.3; letter-spacing: var(--engraved-tracking); text-transform: uppercase; }


.rack .unit .section { padding-block: calc(var(--gutter) * 1.5) var(--gutter); gap: var(--space-4) var(--section-gap); }
.rack .unit .section:has(> .section-mark + header) {
  grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  & > * { grid-column: 1 / -1; }
  & > .section-mark { grid-column: 2; grid-row: 1; justify-self: end; padding: 0; color: var(--ink-mute); }
  & > .section-mark + header { grid-column: 1 / -1; grid-row: 1; padding: 0; grid-template-columns: subgrid; & > * { grid-column: 1 / -1; } & > h2 { grid-column: 1; } }
}
.rack .unit .section > header { gap: var(--space-2); }
.rack .unit .section-intro { max-width: var(--measure); }


.rack .hero { padding-block: calc(var(--gutter) / 2); }
.rack .hero-inner {
  --hero-title-size: calc(1.75rem + var(--type-growth) * 1.25);
  gap: calc(var(--gutter) / 2) var(--pair-gap);
}
.rack .hero h1 { --title-size: var(--hero-title-size); margin: 0; }
.rack .hero-text { gap: var(--space-3); }
.rack .hero-actions { --hero-module-w: 18rem; container-type: inline-size; margin-top: 0.75rem; gap: 0.625rem; align-items: stretch; }
.rack .hero-drawing {
  padding: calc(var(--bezel-w) + 2px) var(--bezel-w) var(--bezel-w); border-radius: 2px; background: var(--bezel); box-shadow: var(--bezel-frame);
}

.rack .hero-drawing .dr-sheet[data-crops] { --frame-h: calc((100cqi - 2 * var(--frame-rule)) / var(--sheet-ratio) + 2 * var(--frame-rule)); }
@container (max-width: 32rem) {
  .rack .hero-drawing .dr-hotspots { --hotspot-mark: 1rem; & .dr-hotspot > summary { font-size: 0.625rem; } }
  .rack .hero-drawing .dr-sheet[data-crops] { overflow: visible; }
  .rack .hero-drawing .dr-hotspot[data-toward] > .dr-hotspot-card { top: calc(100% + var(--bezel-w)); bottom: auto; pointer-events: auto; }
}
.rack .unit-amp:has(.hero-drawing .dr-hotspot[open]) { z-index: 1; & .hero-drawing > .dr-sheet { z-index: 1; } }
@media (min-width: 72rem) {
  .rack .hero-inner {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "drawing";
    & > .hero-text { grid-area: text; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "title lede" "place actions"; column-gap: var(--pair-gap); align-items: start; }
    & > .hero-text > h1 { grid-area: title; }
    & > .hero-text > .hero-place { grid-area: place; }
    & > .hero-text > .lede { grid-area: lede; }
    & > .hero-text > .hero-actions { grid-area: actions; }
    & > .hero-drawing { grid-area: drawing; margin: 0; }
  }
}


.rack .next-free { --vfd-dots: 1.0625rem; display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; max-width: none; }

.rack :is(.next-free, .analyser-readouts .led-display) {
  --vfd-pad: 0.875rem;
  position: relative; isolation: isolate; box-sizing: border-box; block-size: var(--key-h); margin: 0; padding: 0 var(--vfd-pad);
  border: 1px solid; border-color: var(--key-frame-shade) var(--key-frame-lit) var(--key-frame-lit) var(--key-frame-shade); border-radius: var(--key-radius);
  background: var(--key-recess); box-shadow: 0 1px 0 var(--fascia-lit), var(--key-recess-shade);
  &::before {
    content: '' / ''; position: absolute; z-index: -1; inset: var(--key-cap-gap); border-radius: calc(var(--key-radius) - 2px);
    background: var(--display-glass); box-shadow: inset 0 1px 2px #000000, inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  }
}
.rack .next-free-legend {
  flex: none; inline-size: min-content; font: 600 var(--engraved-size) / 1.15 var(--font-ui); letter-spacing: var(--engraved-tracking); text-transform: uppercase;
  color: var(--lit); opacity: 0.82;
}
.rack .next-free-reading { display: flex; justify-content: flex-end; flex: 1 1 auto; min-inline-size: 0; }
.vfd-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vfd-face { display: block; block-size: var(--vfd-dots); inline-size: auto; max-inline-size: 100%; overflow: visible; }
.vfd-unlit { fill: var(--unlit); }
.vfd-lit { fill: var(--lit); stroke: var(--lit-halo); stroke-width: 0.4; stroke-linejoin: round; paint-order: stroke; }
@container (max-width: 29.5rem) { .rack .hero-actions > :is(.button, .next-free) { flex: 1 1 100%; max-inline-size: var(--hero-module-w); } }
@media (forced-colors: active) {
  .rack :is(.next-free, .analyser-readouts .led-display) { background: Canvas; border-color: CanvasText; box-shadow: none; &::before { display: none; } }
  .rack .next-free-legend { color: CanvasText; opacity: 1; }
  .vfd-face { display: none; }
  .vfd-text { position: static; inline-size: auto; block-size: auto; clip-path: none; color: CanvasText; font: 500 var(--step-0) / 1 var(--font-data); }
}


.rack .price-calc {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "meters" "scale"; gap: var(--meter-gap) var(--pair-gap);
  & > :is(.meter-window, .price-scale) { justify-self: center; inline-size: min(100%, var(--meter-window-max)); margin: 0; }
  & > .meter-window { grid-area: meters; }
  & > .price-scale { grid-area: scale; }
}

@media (max-width: 44.99rem) {
  .rack .meter-window {
    grid-template-columns: minmax(0, 1fr);
    &::after {
      inset: calc(50% + (var(--meter-lip-h) - var(--bezel-w)) / 2) 0 auto; translate: none; inline-size: auto; block-size: var(--bezel-w); aspect-ratio: auto; border-radius: 0;
      background: var(--unit-face); box-shadow: 0 -1px var(--meter-glass-edge), 0 1px var(--meter-seam);
    }
  }
}
@media (scripting: none) {
  .meter-window { display: none; }
  .rack .price-rates.visually-hidden {
    position: static; inline-size: auto; block-size: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--pair-gap);
    & > div { display: flex; align-items: baseline; gap: var(--space-3); }
    & dt { color: var(--ink-mute); }
    & dd { margin: 0; font: 400 var(--step-1) / 1 var(--font-data); color: var(--ink); }
  }
}


.rack .analyser {
  --analyser-side: 13rem; --analyser-pad: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); --analyser-glass: #0b0a0a;
  --screen-line: color-mix(in oklab, var(--lit) 24%, #ebe4d8); --screen-dim: color-mix(in oklab, var(--screen-line) 52%, var(--analyser-glass));
  --graticule: color-mix(in srgb, var(--screen-line) 6%, transparent); --title-dots: 0.8125rem;
}
.rack .analyser-lede { margin: 0; max-width: var(--measure); font-size: var(--step-1); line-height: 1.35; color: var(--ink); }
.rack .analyser-panel {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "screen" "system" "steps" "controls" "readouts";
  gap: calc(var(--gutter) * 0.75) var(--pair-gap); padding-block-start: var(--gutter); background: var(--zone-groove);
}
@media (min-width: 60rem) {
  .rack .analyser-panel { grid-template-columns: minmax(0, 1fr) var(--analyser-side); grid-template-areas: "screen controls" "system ." "steps ." "readouts readouts"; }
}
.rack .analyser-screen {
  --ink: var(--screen-line); --ink-soft: color-mix(in oklab, var(--screen-line) 80%, var(--analyser-glass)); --ink-mute: var(--screen-dim); --rule: var(--screen-dim); --tick: var(--screen-dim);
  --paper: var(--analyser-glass); --paper-surface: var(--analyser-glass); --paper-raised: var(--analyser-glass); --poche: var(--screen-dim);
  --label-bg: transparent; --label-ink: var(--screen-line); --zone-blend: normal; --zone-opacity: 0.16; --focus: var(--lit); --on-accent: var(--analyser-glass);
  grid-area: screen; position: relative; display: grid; margin: var(--display-bezel-w); padding: var(--analyser-pad);
  border-radius: 2px; color: var(--ink); box-shadow: var(--display-bezel);
  background:
    linear-gradient(rgba(255, 255, 255, 0.05), transparent 18%),
    repeating-linear-gradient(90deg, var(--graticule) 0 1px, transparent 1px 10%) var(--analyser-pad) 0 / calc(100% - 2 * var(--analyser-pad)) 100% no-repeat,
    repeating-linear-gradient(var(--graticule) 0 1px, transparent 1px 12.5%) 0 var(--analyser-pad) / 100% calc(100% - 2 * var(--analyser-pad)) no-repeat,
    var(--analyser-glass);
}
.rack .analyser-view {
  --accent: var(--illustration-stage); --accent-fill: var(--illustration-stage); --accent-ink: var(--illustration-stage);
  --sheet-frame-max: min(25rem, 58svh); --sheet-gap: var(--analyser-pad);
  grid-area: 1 / 1; display: grid; grid-template-rows: auto 1fr; gap: var(--sheet-gap); align-content: start; margin: 0; min-inline-size: 0; container-type: inline-size;
}
.rack .analyser-title { display: grid; justify-items: start; margin: 0; & > * { grid-area: 1 / 1; } & .vfd-face { block-size: var(--title-dots); } }
.rack .analyser-title > :not(.is-current) { visibility: hidden; }

.rack .analyser-screen .dr-view {
  & :is(.plan-wall, .dr-wall > rect, .plan-floor, .plan-opening) { fill: none; }
  & .dr-wall-line { display: inline; fill: none; stroke: var(--ink); stroke-linecap: square; }
  & :is(.dr-speaker, .dr-cabinet, .dr-uniq, .dr-panels, .dr-absorber, .dr-avaa, .plan-sinks) { color: var(--accent); }
}
.rack .analyser-screen .dr-hatch-line { stroke: var(--accent); stroke-opacity: 0.7; }
.rack .analyser-view .dr-sheet[data-crops] { border-color: var(--screen-dim); box-shadow: none; }
@media (scripting: enabled) { .rack .analyser-view:not(.is-current) { visibility: hidden; } }

@container (max-width: 32rem) { .rack .analyser-view .dr-hotspots { --hotspot-mark: 1rem; & .dr-hotspot > summary { font-size: 0.625rem; } } }
@media (scripting: none) { .rack .analyser-screen { row-gap: calc(2 * var(--analyser-pad)); } .rack .analyser-view { grid-area: auto; } .rack .analyser-panel [data-choice] { display: none; } }


.rack .analyser :is(.analyser-system, .analyser-steps, .analyser-readouts dt) {
  font: 500 var(--engraved-size) / 1.2 var(--font-ui); letter-spacing: var(--engraved-tracking); text-transform: uppercase; color: var(--ink-mute); white-space: nowrap;
}
.rack .analyser-system {
  grid-area: system; display: flex; flex-direction: column; gap: 0.375rem var(--space-6); margin: calc(var(--gutter) * -0.375) 0 0; padding: 0 var(--display-bezel-w); list-style: none;
}
.rack .analyser-steps {
  grid-area: steps; display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: max-content; justify-content: start;
  gap: 0.625rem var(--space-8); margin: 0; padding: 0 var(--display-bezel-w); list-style: none;
  & > li { display: flex; align-items: center; gap: var(--space-2); }
  & > li::before {
    content: '' / ''; flex: none; box-sizing: border-box; inline-size: var(--lamp-size); block-size: var(--lamp-size); border: 1px solid var(--lamp-rim); border-radius: 50%;
    background: var(--lit); box-shadow: 0 0 var(--lamp-size) var(--lit-halo); transition: background var(--lamp-fade) linear, box-shadow var(--lamp-fade) linear;
  }
  &[data-following] > li:not(.is-lit)::before { background: var(--led-off); box-shadow: none; }
  & > [aria-current] { color: var(--ink); }
}
@media (max-width: 23.99rem) { .rack .analyser-steps { grid-template-rows: none; grid-auto-flow: row; } }
@media (min-width: 40rem) { .rack .analyser-system { flex-direction: row; flex-wrap: wrap; } .rack .analyser-steps { grid-template-rows: repeat(2, auto); } }
@media (min-width: 72rem) { .rack .analyser-steps { grid-template-rows: auto; justify-content: space-between; } }


.rack .analyser-controls {
  --knob-max: 11rem; grid-area: controls; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--gutter);
  & .knob-choice { block-size: auto; align-items: center; }
}
.rack .analyser-keys { display: grid; gap: var(--space-2); margin: 0; & .button { --button-key-h: var(--key-min); inline-size: 100%; } }
@media (min-width: 30rem) and (max-width: 59.99rem) { .rack .analyser-controls { grid-template-columns: auto minmax(0, 1fr); } }
@media (min-width: 60rem) {
  .rack .analyser-controls { grid-template-rows: auto auto; align-content: space-between; align-items: start; padding-block: var(--display-bezel-w); }
}


.rack .analyser-readouts {
  grid-area: readouts; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0;
  & .readout { display: grid; justify-items: start; gap: var(--space-2); min-inline-size: 0; }
  & dd { justify-self: stretch; margin: 0; }
  & .led-display { --vfd-pad: 0.75rem; inline-size: min(100%, 8.25rem); justify-content: space-between; }
  & .led-display-face { flex: none; }
  & .led-display-units { align-self: end; margin-block-end: calc((var(--key-h) - 2px - var(--display-figure)) / 2); }
}
@media (min-width: 22.5rem) { .rack .analyser-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 40rem) { .rack .analyser-readouts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--pair-gap); } }
@media (min-width: 72rem) { .rack .analyser-readouts { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) { .rack .analyser-steps > li::before { transition: none; } }
@media (forced-colors: active) {
  .rack .analyser-screen { --paper: Canvas; --paper-surface: Canvas; --paper-raised: Canvas; --ink: CanvasText; --ink-soft: CanvasText; --ink-mute: CanvasText; --poche: CanvasText; --label-ink: CanvasText; background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
  .rack .analyser-steps > li::before { forced-color-adjust: none; border-color: CanvasText; background: Highlight; box-shadow: none; }
  .rack .analyser-steps[data-following] > li:not(.is-lit)::before { background: Canvas; }
}


.rack .unit > :is(.section, .band) + :is(.section, .band) { background: var(--zone-groove); background-position-x: var(--gutter); background-size: calc(100% - 2 * var(--gutter)) 1px; }



.rack .terms { grid-template-columns: minmax(0, 1fr); gap: var(--gutter) var(--pair-gap); }
.rack .terms-notes { display: grid; gap: var(--space-2); max-width: var(--measure-wide); & p { margin: 0; } }
.rack .facts {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-4) var(--gutter);
  & > div { display: grid; align-content: start; gap: var(--space-1); }
  & dt { padding: 0; color: var(--ink-mute); }
  & dd { margin: 0; padding: 0; }
}


.rack .steps {
  --track-prefix: ''; --step-lamp-gap: 0.5rem; margin: 0;
  & > li { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--step-lamp-gap); padding: 1rem 0 1.25rem; }
  & > li > :is(h3, p) { grid-column: 1 / -1; }
  & > li::before { grid-area: 1 / 1; font: 400 var(--step-1) / 1 var(--font-ui); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--legend-ink-mute); text-shadow: var(--engraved); }
  & p { font-size: var(--body-size); }
}
.rack .step-lamp {
  --step-lamp-fill: var(--led-off); --step-lamp-halo: transparent; --step-lamp-forced: Canvas;
  grid-area: 1 / 2; justify-self: start; align-self: center;
  box-sizing: border-box; inline-size: var(--lamp-size); block-size: var(--lamp-size); border: 1px solid var(--lamp-rim); border-radius: 50%;
  background: var(--step-lamp-fill); box-shadow: 0 0 var(--lamp-size) var(--step-lamp-halo); transition: background-color var(--lamp-fade) linear, box-shadow var(--lamp-fade) linear;
}
.rack .steps > li:not(.is-pending):is(:last-child, :has(+ .is-pending)) > .step-lamp { --step-lamp-fill: var(--lit); --step-lamp-halo: var(--lit-halo); --step-lamp-forced: Highlight; }
@media (forced-colors: active) { .rack .step-lamp { forced-color-adjust: none; border-color: ButtonText; background: var(--step-lamp-forced); box-shadow: none; } }
@media (min-width: 72rem) {
  .rack .steps > li { padding-inline: var(--gutter); }
  .rack .steps > li:first-child { padding-inline-start: 0; }
  .rack .steps > li + li { box-shadow: inset 1px 0 var(--engrave-shade), inset 2px 0 var(--engrave-lip); }
}

@property --numbered-key-lamp { syntax: '<color>'; inherits: true; initial-value: transparent; }
.rack .faq { --numbered-key-w: 2.75rem; --numbered-key-h: 2rem; }
.rack .faq summary {
  --numbered-key-frame: 1px; --numbered-key-cap-at: calc(var(--numbered-key-frame) + var(--key-cap-gap));
  --numbered-key-lit: var(--key-frame-lit); --numbered-key-shade: var(--key-frame-shade); --numbered-key-ink: var(--key-legend-quiet);
  --numbered-key-sink: 0px; --numbered-key-cap-shade: var(--key-cap-shade); --numbered-key-recess-shade: var(--key-recess-shade);
  --numbered-key-lamp: var(--led-off); --numbered-key-halo: transparent; --numbered-key-forced: ButtonText;
  transition: --numbered-key-lamp var(--lamp-fade) linear;
}
.rack .faq details[open] > summary {
  --numbered-key-ink: var(--key-legend-primary); --numbered-key-sink: var(--key-sink); --numbered-key-cap-shade: var(--key-cap-shade-pressed); --numbered-key-recess-shade: var(--key-recess-shade-pressed);
  --numbered-key-lamp: var(--lit); --numbered-key-halo: var(--lit-halo); --numbered-key-forced: Highlight;
}
@media (hover: hover) { .rack .faq summary:hover { --numbered-key-lit: var(--accent); --numbered-key-shade: var(--accent); } }
.rack .faq summary:active { --numbered-key-sink: var(--key-sink); --numbered-key-cap-shade: var(--key-cap-shade-pressed); --numbered-key-recess-shade: var(--key-recess-shade-pressed); }
.rack .faq summary::before { box-sizing: border-box; inline-size: var(--numbered-key-w); block-size: var(--numbered-key-h); }
@media (forced-colors: none) {
  .rack .faq summary::before {
    content: '' / '';
    border: var(--numbered-key-frame) solid; border-color: var(--numbered-key-shade) var(--numbered-key-lit) var(--numbered-key-lit) var(--numbered-key-shade); border-radius: var(--key-radius);
    background: var(--key-recess); box-shadow: 0 1px 0 var(--fascia-lit), var(--numbered-key-recess-shade);
  }
  .rack .faq details:is([open], :not([open])) > summary::after {
    content: var(--numeral) / ''; display: grid; place-items: center; box-sizing: border-box;
    inline-size: calc(var(--numbered-key-w) - 2 * var(--numbered-key-cap-at)); block-size: calc(var(--numbered-key-h) - 2 * var(--numbered-key-cap-at)); margin: var(--numbered-key-cap-at);
    border-radius: calc(var(--key-radius) - var(--numbered-key-frame)) / 50%; box-shadow: var(--numbered-key-cap-shade); translate: 0 var(--numbered-key-sink);
    font: 600 var(--label-size) / 1 var(--font-ui); letter-spacing: var(--engraved-tracking); font-variant-numeric: tabular-nums; color: var(--numbered-key-ink); text-shadow: var(--key-legend-cut);
    padding-inline-end: calc(var(--lamp-inset) + var(--lamp-size));
    background:
      radial-gradient(circle closest-side, var(--numbered-key-lamp) calc(100% - 1px), var(--lamp-rim) calc(100% - 1px) 99%, transparent) right var(--lamp-inset) top var(--lamp-inset) / var(--lamp-size) var(--lamp-size) no-repeat,
      radial-gradient(circle closest-side, var(--numbered-key-halo), transparent) right calc(var(--lamp-inset) - var(--lamp-size)) top calc(var(--lamp-inset) - var(--lamp-size)) / calc(3 * var(--lamp-size)) calc(3 * var(--lamp-size)) no-repeat,
      var(--key-grain), var(--key-cap);
  }
}
@media (forced-colors: active) {
  .rack .faq summary::before { content: var(--numeral) / ''; display: grid; place-items: center; border: 1px solid var(--numbered-key-forced); border-radius: var(--key-radius); font: 600 var(--label-size) / 1 var(--font-ui); color: var(--numbered-key-forced); }
}
.rack .visit-rules > .rules {
  margin-inline: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 var(--gutter);
  & > li { padding: 0.5rem 0; }
  & strong { color: var(--ink-mute); }
}


.rack .faq {
  --faq-indent: calc(var(--numbered-key-w) + 0.75rem);
  margin-inline: 0; gap: 0 var(--pair-gap); counter-reset: preset;
  & details { padding-inline: 0; counter-increment: preset; background: var(--zone-groove); }
  & summary { min-block-size: var(--tap-min); padding: 0.75rem 0 0.75rem var(--faq-indent); font-size: var(--step-0); --numeral: counter(preset); --numbered-key-top: 0.75rem; }
  @media (forced-colors: active) { & summary { padding-inline-end: 3rem; } }
  & summary::before { position: absolute; inset-inline-start: 0; inset-block-start: var(--numbered-key-top); }
  @media (forced-colors: none) { & details:is([open], :not([open])) > summary::after { position: absolute; inset-inline-start: 0; inset-block-start: var(--numbered-key-top); right: auto; } }
  & details > :not(summary) { margin: 0 0 var(--space-4); padding-inline-start: var(--faq-indent); }
}


.rack .closing {
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-block: var(--gutter); gap: var(--space-3) var(--gutter);
  & > * { grid-column: 1 / -1; }
  & > h2 { grid-column: 1; grid-row: 1; align-self: baseline; }
  & > .section-mark { grid-column: 2; grid-row: 1; align-self: baseline; justify-self: end; color: var(--ink-mute); }
  & h2 { max-width: none; font: var(--title-weight) var(--step-3) / var(--leading-heading) var(--font-display); }
  & p { max-width: var(--measure); }
}
@media (min-width: 52rem) {
  .rack .closing { & > p { grid-column: 1; } & > .button { grid-column: 2; justify-self: end; margin-top: 0; } }
}


.rack .site-footer > .unit-plate { grid-column: 1 / -1; margin-inline: 0; }



:root {
  --transport-air: 4px; --transport-key: var(--tap-min); --transport-pad: 4px; --transport-rim: 1px;
  --transport-w: calc(var(--transport-key) + 2 * (var(--transport-pad) + var(--transport-rim)));
  --transport-outmost: calc(var(--frame-inset) + 1px);
  --transport-end: clamp(var(--transport-outmost), var(--page-side) + var(--column-pad) - var(--transport-air) - var(--transport-w), var(--wall-inset) - var(--wall-gap) + var(--transport-air));
}
@media (scripting: enabled) and (forced-colors: none) {
  :root[data-scrollbar-drawn] { --transport-lane: calc(var(--transport-outmost) + var(--transport-w) + var(--transport-air) - var(--column-pad)); }
}
.page-scroll {
  --key: var(--transport-key); --key-gap: 3px;
  position: fixed; z-index: 55; pointer-events: none; color: var(--ink);
  inset-inline-end: var(--transport-end); inset-block-start: 50%; translate: 0 -50%;
}
.deck { display: none; }
.transport {
  display: flex; flex-direction: column; gap: var(--key-gap); padding: var(--transport-pad); border: var(--transport-rim) solid var(--ink); border-radius: var(--plate-radius); background: var(--paper);
  opacity: 0; translate: 12px 0; pointer-events: none;
  transition: opacity 0.25s var(--ease-roll) 0.5s, translate 0.25s var(--ease-roll) 0.5s;
}
:is(.page-scroll:is(.is-plate, .is-engaged) .transport, .transport:has(:focus-visible)) { opacity: 1; translate: 0; pointer-events: auto; transition-duration: 0.14s; transition-delay: 0s; }
.page-scroll .transport-key {
  --button-key-h: 0px; flex-direction: column; inline-size: var(--key); block-size: var(--key); row-gap: 3px; user-select: none; -webkit-user-select: none;
  &[aria-disabled='true'] { opacity: var(--fader-dimmed); }
  & svg { display: block; inline-size: 12px; block-size: 12px; fill: none; stroke: currentColor; stroke-width: 1px; stroke-linejoin: round; stroke-linecap: round; }
}


@supports not (-webkit-touch-callout: none) {
@media (hover: hover) and (pointer: fine) and (min-width: 56.25rem) and (min-height: 42.5rem) and (scripting: enabled) and (forced-colors: none) {
  
  :root[data-scrollbar-drawn] {
    scrollbar-width: none; &::-webkit-scrollbar { display: none; }
    --width-u: 56; --deck-clearance: calc(40px - var(--column-pad)); --deck-edge: 24px; --deck-least: 1px;
    --page-floor: calc(var(--wall-inset) - var(--wall-gap) + var(--deck-clearance) + var(--width-u) * var(--deck-least) + var(--deck-edge));
    --transport-lane: 0px;
  }
  .page-scroll {
    --tape-turns: 7; --hub: 0.4; --reel-turns: 5;
    --u: clamp(var(--deck-least), (var(--page-side) - var(--wall-inset) + var(--wall-gap) - var(--deck-clearance) - var(--deck-edge)) / var(--width-u), 1.4px);
    --key: var(--key-min); --keys-gap: 12px; --keys: calc(3 * var(--key) + 2 * var(--key-gap) + var(--keys-gap));
    --reel: calc(21 * var(--u)); --pack: calc(18 * var(--u)); --reel-x: calc(24 * var(--u)); --tape-x: calc(36 * var(--u)); --tape-w: calc(16 * var(--u));
    --head-w: calc(10 * var(--u)); --gap: calc(6 * var(--u)); --pen: calc(5 * var(--u)); --flag-h: calc(14 * var(--u));
    --fixed: calc(4 * var(--reel) + 2 * var(--gap));
    --win: clamp(96px, calc(100dvh - var(--header-bottom) - var(--wall-cap) - var(--fixed) - var(--keys) - 16px), calc(250 * var(--u)));
    --half: calc(var(--win) / 2); --len: calc(var(--win) * var(--tape-turns)); --reels-h: calc(var(--fixed) + var(--win));
    inset-inline-end: calc(var(--wall-inset) - var(--wall-gap) + var(--deck-edge));
    inset-block-start: calc(var(--header-bottom) + max(12px, (100dvh - var(--header-bottom) - var(--wall-cap) - var(--reels-h) - var(--keys)) / 2)); translate: none;
    inline-size: calc(var(--width-u) * var(--u)); block-size: calc(var(--reels-h) + var(--keys));
  }
  .deck {
    --oxide: color-mix(in srgb, var(--ink) 26%, var(--paper));
    --leader: var(--by-day, var(--paper-raised)) var(--by-night, color-mix(in srgb, var(--ink) 80%, var(--paper)));
    --hub-area: calc(var(--hub) * var(--hub)); --set: 0;
    --f1: sqrt(calc(var(--hub-area) + (1 - var(--set)) * (1 - var(--hub-area))));
    --f2: sqrt(calc(var(--hub-area) + var(--set) * (1 - var(--hub-area))));
    --spin: calc(360deg * var(--reel-turns) / (1 - var(--hub)));
    display: block; position: absolute; inset: 0 0 auto; block-size: var(--reels-h); pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; outline: none;
    &.is-dragging { cursor: grabbing; }
    &:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
    & :is(i, b) { display: block; font-style: normal; font-weight: inherit; }
  }
  .transport { position: absolute; inset: auto 0 0; margin-inline: auto; inline-size: var(--key); padding: 0; border: 0; background: none; opacity: 1; translate: none; pointer-events: auto; transition: none; }

  .deck-reel { position: absolute; inset-inline-start: calc(var(--reel-x) - var(--reel)); inline-size: calc(var(--reel) * 2); block-size: calc(var(--reel) * 2); }
  .deck-reel.is-supply { inset-block-start: 0; --f: var(--f1); --turn: calc(var(--spin) * (1 - var(--f1))); }
  .deck-reel.is-takeup { inset-block-start: calc(2 * var(--reel) + 2 * var(--gap) + var(--win)); --f: var(--f2); --turn: calc(var(--spin) * (var(--f2) - var(--hub))); }
  .deck-pack {
    position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; box-sizing: border-box; border: 1px solid var(--ink); border-radius: 50%;
    inline-size: calc(var(--f) * var(--pack) * 2); block-size: calc(var(--f) * var(--pack) * 2);
    background: repeating-radial-gradient(circle, var(--ink-mute) 0 1px, transparent 1px 3px);
  }
  .deck-spokes { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1px; rotate: var(--turn); }
  .deck-spokes * { vector-effect: non-scaling-stroke; }
  .deck-spokes .flange { stroke: var(--ink-mute); }
  .deck-spokes .solid { fill: var(--paper); }

  .deck-lead { position: absolute; inline-size: 1.5px; margin-inline-start: -0.75px; background: var(--ink); transform-origin: 50% 0; }
  .deck-lead.is-in {
    --dx: calc(var(--tape-x) - (var(--reel-x) + var(--f1) * var(--pack))); --dy: calc(var(--reel) + var(--gap));
    inset-inline-start: calc(var(--reel-x) + var(--f1) * var(--pack)); inset-block-start: var(--reel);
    block-size: hypot(var(--dx), var(--dy)); rotate: atan2(calc(-1 * var(--dx)), var(--dy));
  }
  .deck-lead.is-out {
    --dx: calc(var(--reel-x) + var(--f2) * var(--pack) - var(--tape-x)); --dy: calc(var(--reel) + var(--gap));
    inset-inline-start: var(--tape-x); inset-block-start: calc(2 * var(--reel) + var(--gap) + var(--win));
    block-size: hypot(var(--dx), var(--dy)); rotate: atan2(calc(-1 * var(--dx)), var(--dy));
  }

  .deck-run { position: absolute; inset-inline: 0; inset-block-start: calc(2 * var(--reel) + var(--gap)); block-size: var(--win); }
  .deck-window {
    position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--tape-x) + var(--tape-w) / 2); overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent, var(--ink) 9%, var(--ink) 91%, transparent);
  }
  .deck-tape { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: calc(var(--len) + var(--win)); translate: 0 calc((var(--set) - 1) * var(--len)); will-change: translate; }
  .deck-tape::before, .deck-leader {
    content: ''; position: absolute; inset-inline-start: calc(var(--tape-x) - var(--tape-w) / 2); inline-size: var(--tape-w); box-sizing: border-box; border-inline: 1px solid var(--ink);
  }
  .deck-tape::before { inset-block: 0; background: var(--oxide); }
  .deck-tape::after {
    content: ''; position: absolute; inset-block: 0; inset-inline-start: calc(var(--tape-x) - var(--tape-w) / 2 + 2px); inline-size: 3px;
    background: repeating-linear-gradient(to bottom, var(--ink-mute) 0 1px, transparent 1px calc(20 * var(--u)));
  }
  .deck-leader { background: var(--leader); block-size: var(--half); &::after { content: ''; position: absolute; inset-inline: -1px; block-size: 5px; box-sizing: border-box; background: var(--paper); border-block: 1px solid var(--ink); } }
  .deck-leader.is-end { inset-block-start: 0; &::after { inset-block-end: -3px; } }
  .deck-leader.is-start { inset-block-end: 0; &::after { inset-block-start: -3px; } }

  .deck-flag {
    position: absolute; inset-inline-start: 0; inline-size: calc(var(--tape-x) + var(--tape-w) / 2); block-size: var(--flag-h); margin-block-start: calc(var(--flag-h) / -2);
    inset-block-start: calc(var(--half) + (1 - var(--p, 0)) * var(--len));
  }
  .deck-code {
    position: absolute; inset-inline-end: calc(var(--tape-w) + var(--pen) + 3px); inset-block-start: 50%; translate: 0 -50%;
    font: var(--font-label); font-size: max(9px, calc(10 * var(--u))); letter-spacing: var(--label-tracking); line-height: 1; color: var(--ink-mute); font-variant-numeric: tabular-nums;
  }
  .deck-pen { position: absolute; inset-inline-end: calc(var(--tape-w) - 1px); inset-block-start: 50%; translate: 0 -50%; inline-size: var(--pen); block-size: calc(8 * var(--u)); background: var(--ink); clip-path: polygon(0 50%, 100% 0, 100% 100%); }
  .deck-splice { position: absolute; inset-inline-end: 0; inline-size: var(--tape-w); inset-block-start: 50%; block-size: 0; border-top: 1px solid var(--ink); rotate: -8deg; }
  .deck-here { position: absolute; inset-inline-start: 0; inline-size: calc(var(--tape-x) + var(--tape-w) / 2); inset-block-start: 50%; block-size: 0; pointer-events: none; }
  .deck-here .deck-pen { background: var(--accent); scale: 1.3; transform-origin: 100% 50%; }
  .deck-here .deck-code { padding-inline: 2px; background: var(--paper); color: var(--accent-ink); opacity: 1; font-size: max(12px, calc(13 * var(--u))); }
  .deck-name {
    
    position: absolute; bottom: 5px; left: calc(var(--tape-x) + var(--tape-w) / 2 - 10.5px); max-height: calc(var(--win) * 0.4); overflow: hidden; text-overflow: ellipsis;
    writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; font: var(--font-label); font-size: 10px; letter-spacing: var(--label-tracking); line-height: 9px; color: var(--accent-ink);
  }
  .deck-roller { position: absolute; inset-inline-start: var(--tape-x); inline-size: calc(6 * var(--u)); block-size: calc(6 * var(--u)); margin: calc(-3 * var(--u)) 0 0 calc(-3 * var(--u)); box-sizing: border-box; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); }
  .deck-roller.is-top { inset-block-start: 0; }
  .deck-roller.is-bottom { inset-block-start: 100%; }
  .deck-head { position: absolute; inset-inline-start: calc(var(--tape-x) + var(--tape-w) / 2 + 1px); inline-size: var(--head-w); block-size: calc(24 * var(--u)); inset-block-start: calc(50% - 12 * var(--u)); box-sizing: border-box; border: 1px solid var(--ink); background: var(--paper); }
  .deck-index { position: absolute; inset-inline-start: calc(var(--tape-x) - var(--tape-w) / 2 - 4px); inline-size: calc(var(--tape-w) + var(--head-w) + 4px); block-size: 2px; inset-block-start: calc(50% - 1px); background: var(--accent); }
}
}
@media (prefers-reduced-motion: reduce) { :is(.transport, .transport-key) { transition: none; } }
@media (forced-colors: active), print { .page-scroll { display: none; } }



main:has(> .page-head) { min-height: 100svh; }
.page-head { display: grid; gap: var(--space-4); padding-block: var(--space-head); }
.page-head p { margin: 0; }
@media (min-width: 75rem) {
  .page-head { grid-template-columns: minmax(min-content, 1fr) minmax(0, var(--measure)); align-items: end; column-gap: var(--pair-gap); }
  .page-head > .section-mark { grid-column: 1 / -1; }
}

main:has(> .booking:not([hidden])) > #status:has(> .notice) { margin-top: var(--space-head); }

.not-found { display: grid; gap: var(--space-6); justify-items: start; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.page-head:has(> .trail-sources) { --trail-size: 6rem; position: relative; isolation: isolate; }
@media (max-width: 39.99rem) { .page-head:has(> .trail-sources) { --trail-size: 4.5rem; } }
.trail-sources { position: absolute; width: 0; height: 0; overflow: hidden; }
.trail { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; color: var(--ink); }
.trail > svg { position: absolute; left: 0; top: 0; width: var(--trail-size); height: auto; }



.label-box, :is(.notice, .visit-card, .slot-summary, .visit-policy), .row-actions:has(> p:first-child) {
  --label-pad: 1.25rem; --strip-pad: 0.55rem var(--label-pad);
  border: var(--border-w) solid var(--label-bg); background: var(--paper-raised); color: var(--ink);
  box-shadow: var(--hard-bar); padding: 0 var(--label-pad) var(--label-pad); border-radius: 0; border-image: none;
}
:is(.notice, .visit-card, .slot-summary, .visit-policy) > :first-child {
  max-width: none; margin: 0 calc(-1 * var(--label-pad)) 1rem; padding: var(--strip-pad); background: var(--label-bg); color: var(--label-ink);
  text-wrap: pretty;
}
:is(.notice, .visit-card, .slot-summary, .visit-policy) > :first-child :is(strong, .data) { color: inherit; font: inherit; }
:is(.av-editor, .sg-menu) > p:first-child { margin: 0 calc(-1 * var(--label-pad)); padding: var(--strip-pad); background: var(--label-bg); color: var(--label-ink); font: var(--font-label); text-transform: var(--label-case); }

:is(.notice:has(> :only-child), .slot-summary:has(> .estimate:empty)) { padding-bottom: 0; background: var(--label-bg); }
:is(.notice > :only-child, .slot-summary:has(> .estimate:empty) > :first-child) { margin-bottom: 0; }
.notice:not(:has(> *)) { padding: var(--strip-pad); background: var(--label-bg); color: var(--label-ink); text-wrap: pretty; }
.notice { max-width: var(--measure-wide); margin-bottom: var(--bar); }
.notice p { max-width: none; margin: 0; }
.notice p + p { margin-top: 0.5rem; }
:is(.notice.ok, .notice.error, .notice.warn, .notice.info) > :first-child::before, :is(.notice.ok, .notice.error, .notice.warn, .notice.info):not(:has(> *))::before {
  content: ''; display: inline-block; width: 0.6em; height: 0.6em; margin-inline-end: 0.6em; box-shadow: 0 0 0 1px var(--label-ink); background: var(--kind);
}
.notice.ok { --kind: var(--ok); }
.notice.error { --kind: var(--error); }
.notice.warn { --kind: var(--warn); }
.notice.info { --kind: var(--accent); }
.notice > .facts { margin-bottom: 1rem; }

@media (prefers-reduced-motion: no-preference) {
  #status .notice.ok {
    transition: opacity var(--hover-fade) ease, translate var(--hover-fade) var(--ease-settle);
    @starting-style { opacity: 0; translate: 0 1rem; }
  }
  .booking.is-leaving { opacity: 0; transition: opacity var(--hover-fade) ease; }
}



.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.field p { margin: 0; }
.field .hint { font-size: var(--step--1); color: var(--ink-soft); }
.field .error { font-size: var(--step--1); color: var(--error); min-height: 0; }
.field .error:empty { display: none; }

input:not([type]), input[type='text'], input[type='email'], input[type='tel'], input[type='url'], input[type='number'], input[type='date'], select, textarea {
  font: inherit; color: var(--ink); background: transparent; box-shadow: var(--lip);
  border: 0; border-bottom: 1px solid var(--ink-mute); border-radius: 0; padding: 0.6rem 0 0.5rem; min-height: var(--tap-min); width: 100%;
}
:is(input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input[aria-invalid='true'], textarea[aria-invalid='true'], select[aria-invalid='true'] { border-color: var(--error); }
textarea { min-height: 6rem; resize: vertical; }
::placeholder { color: var(--ink-mute); opacity: 1; }


.booking-form :is(input:not([type='checkbox'], [type='radio']), select, textarea) {
  --underline: var(--accent); --underline-drawn: 0%;
  background: linear-gradient(var(--underline) 0 0) left bottom / var(--underline-drawn) var(--border-w) no-repeat;
  &:focus, &[aria-invalid='true'] { --underline-drawn: 100%; }
  &[aria-invalid='true'] { --underline: var(--error); }
  @media (hover: hover) { &:hover { --underline-drawn: 100%; } }
  @media (prefers-reduced-motion: no-preference) { transition: background-size var(--hover-fade) ease, border-color var(--hover-fade); }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.field .error:not(:empty), #form-status .notice) {
    transition: opacity var(--hover-fade) ease;
    @starting-style { opacity: 0; }
  }
}
.check {
  --check-box: 1.2rem; --check-at: 0.2rem;
  position: relative; display: flex; gap: 0.6rem; align-items: flex-start; min-block-size: var(--tap-min);
  & label { flex: 1; align-self: stretch; color: var(--ink); }
  & label::before { content: '' / ''; position: absolute; inset: 0; }
  & input {
    appearance: none; inline-size: var(--check-box); block-size: var(--check-box); margin: var(--check-at) 0 0; flex: none;
    border: 1px solid var(--ink); border-radius: 0; background: var(--paper-sunk); box-shadow: var(--well);
  }
  & .tick {
    position: absolute; inset-inline-start: 0; top: var(--check-at); inline-size: var(--check-box); block-size: var(--check-box); pointer-events: none;
    fill: none; stroke: var(--accent-ink); stroke-width: 2;
  }
  & .tick use { stroke-dasharray: 1; stroke-dashoffset: 1; }
  & .tick .dot { fill: var(--accent-ink); stroke: none; scale: 0; transform-box: fill-box; transform-origin: center; }
  & input:checked + .tick use { stroke-dashoffset: 0; }
  & input:checked + .tick .dot { scale: 1; }
  @media (prefers-reduced-motion: no-preference) {
    & .tick use { transition: stroke-dashoffset var(--tick-draw) var(--ease-fly); }
    & .tick .dot { transition: scale var(--tick-draw) var(--ease-fly); }
  }
  @media (forced-colors: active) {
    & input { appearance: auto; }
    & .tick { display: none; }
  }
}
.dinner:disabled .check input { border-style: dashed; border-color: var(--ink-mute); }
.dinner { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-2); min-width: 0; }
.dinner legend { padding: 0; margin-bottom: 0.25rem; }
.dinner:disabled .check label { color: var(--ink-soft); }
:is(.extras, .choice) > legend { float: left; width: 100%; padding: 0; }
:is(.extras, .choice) > legend .hint { font: var(--font-label); margin-inline-start: 0.35rem; }


.extras {
  --extras-pad: 1.25rem;
  border: 0; margin: 0; padding: var(--extras-pad) 0 0; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.extras > legend { grid-column: 1 / -1; margin-bottom: 1rem; }
.extras > .field { align-content: start; padding-block: 1rem var(--extras-pad); }
@container (min-width: 32rem) {
  .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .extras > .field:nth-child(odd of .field) { padding-inline-end: var(--extras-pad); }
  .extras > .field:nth-child(even of .field) { padding-inline-start: var(--extras-pad); }
}



.booking { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem var(--space-16); padding-block: var(--space-head) var(--space-section); }
@media (min-width: 60rem) {
  .booking { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; column-gap: 0; padding-top: 0; }
  .booking > * { padding-top: var(--space-head); }
  .booking-picker { padding-inline-end: 2rem; }
  .booking-form { padding-inline-start: 2rem; }
}
.booking-picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.booking h2 { font-size: var(--step-3); }
.booking [data-step]::before { content: '[' attr(data-step) ']' / ''; display: block; margin-bottom: 0.5rem; color: var(--ink); font: var(--font-label); letter-spacing: var(--label-tracking); font-variant-numeric: tabular-nums; }
:is(.choice, .booking-form > h2) { padding-top: 0; }
.calendar-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin-bottom: 1.25rem; }
.calendar-head h2 { margin-inline-end: auto; }
.month-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.month { width: 100%; border-collapse: collapse; table-layout: fixed; }

.calendar { container-type: inline-size; --weekday-em: 3; --day-number-em: 1.6; --calendar-column: calc(100cqi / var(--week-days)); }
.month th { color: var(--ink-soft); padding-bottom: 0.6rem; }
.month abbr { text-decoration: none; font-size: min(1em, var(--calendar-column) / var(--weekday-em)); }
.month td { padding: 0; text-align: center; border: 1px solid var(--rule); }
.day {
  position: relative; display: block; width: 100%; aspect-ratio: 1; max-height: var(--day); min-height: var(--tap-min);
  font: 500 min(var(--step-0), var(--calendar-column) / var(--day-number-em)) / 1 var(--font-data); color: var(--ink); letter-spacing: 0;
  padding-inline: 0; background: var(--paper-raised); border: 0; border-radius: 0;
}
.day:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--ink); }
.day:disabled { color: var(--ink-mute); cursor: default; background: repeating-linear-gradient(135deg, var(--rule) 0 1px, transparent 1px 6px); }
.day[aria-pressed='true'] { background: var(--accent-fill); color: var(--on-accent); }
.day[data-today]::after { content: ''; position: absolute; top: 0; right: 0; width: 0.5em; height: 0.5em; background: var(--accent); }
.hint { font-size: var(--step--1); color: var(--ink-soft); font-weight: 400; }
.calendar .hint { margin-top: 0.75rem; }

.calendar .hint > .button { display: flex; inline-size: fit-content; margin-top: 0.75rem; }


:is([aria-busy='true'] .loading-note, [aria-busy='true'] > .notice > :first-child)::after {
  content: '-' / ''; display: inline-block; min-inline-size: 1.4ch; margin-inline-start: 0.4ch;
  font-family: var(--font-ui); line-height: 1; text-align: center;
  @media (prefers-reduced-motion: no-preference) { animation: ascii-spin var(--spinner-turn) steps(4, end) infinite; }
}
@keyframes ascii-spin {
  0% { content: '-' / ''; }
  25% { content: '\\' / ''; }
  50% { content: '|' / ''; }
  75% { content: '/' / ''; }
}


.pending-dots { display: inline-flex; gap: 0.3em; margin-inline-start: 0.4em; vertical-align: middle; }
.pending-dots > i {
  inline-size: 0.4em; block-size: 0.4em; background: currentColor;
  @media (prefers-reduced-motion: no-preference) {
    animation: dot-pulse var(--dots-pulse) ease-in-out infinite backwards; animation-delay: calc((sibling-index() - 1) * var(--dots-stagger));
  }
}
@keyframes dot-pulse {
  0%, 60%, 100% { opacity: 0.25; scale: 0.75; }
  30% { opacity: 1; scale: 1.2; }
  45% { opacity: 0.7; scale: 1; }
}

.choice { border: 0; margin: 0; padding-inline: 0; padding-bottom: 0; display: grid; gap: var(--space-4); min-width: 0; }
.choice > .hint { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.chips:empty { border: 0; }
.chips:not(:empty) + .hint { display: none; }
.chip { position: relative; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.chip span {
  display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0.5rem 1rem;
  color: var(--ink); background: var(--paper-raised);
}
.chip input:checked + span { background: var(--accent-fill); color: var(--on-accent); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip:hover span { box-shadow: inset 0 0 0 1px var(--ink); }

.chips[data-ink] {
  position: relative; isolation: isolate; background: var(--paper-raised);
  &::before {
    content: ''; position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; opacity: 0;
    translate: var(--ink-x) var(--ink-y); inline-size: var(--ink-w); block-size: var(--ink-h); background: var(--accent-fill);
  }
  &:has(input:checked)::before { opacity: 1; }
  & .chip span { background: transparent; }
  @media (prefers-reduced-motion: no-preference) {
    &[data-ink-placed]::before { transition: translate var(--chip-slide) linear, inline-size var(--chip-slide) linear, block-size var(--chip-slide) linear; }
    & .chip span { transition: color var(--hover-fade); }
  }
}
.length-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.length-chips .chip span { width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.2rem; padding-block: 0.65rem; }
.length-chips small { font-size: var(--step--2); font-weight: 500; color: var(--ink-soft); }
.length-chips input:checked + span small { color: inherit; }

@media (forced-colors: active) {
  :is(.day[aria-pressed='true'], .chip input:checked + span, .learn-filter a[aria-current], .system.is-story .system-tabs a[aria-current], .av-view[aria-pressed='true'], .sg-strip-day[aria-pressed='true']) {
    forced-color-adjust: none; background: Highlight; color: HighlightText; outline-color: CanvasText;
    & * { color: inherit; }
  }
}

.booking-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); container-type: inline-size; }

.booking-form #submit { justify-self: start; max-inline-size: 100%; font-size: var(--step-0); white-space: normal; text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .booking-form #submit { transition: background-color var(--hover-fade), color var(--hover-fade), border-color var(--hover-fade); }
}
.slot-summary { display: grid; gap: var(--space-4); }
.estimate { display: grid; gap: 0.3rem; }
.estimate p { margin: 0; }
.estimate strong { font: 600 var(--step-0) / 1.3 var(--font-body); }
.estimate strong .data { font: 700 var(--step-3) / 1 var(--font-display); letter-spacing: var(--tracking-display); }
.estimate strong + .hint { display: block; }
.estimate:empty { display: none; }

.toast {
  position: fixed; inset-inline: var(--page-start) var(--page-side); z-index: 45;
  bottom: max(var(--wall-inset), env(safe-area-inset-bottom));
  padding: 0.75rem 1rem; background: var(--label-bg); color: var(--label-ink); box-shadow: var(--hard-bar);
  font: var(--font-label); text-transform: var(--label-case); letter-spacing: var(--label-tracking);
  opacity: 0; visibility: hidden; translate: 0 0.5rem; pointer-events: none;
  &.is-visible { opacity: 1; visibility: visible; translate: 0; pointer-events: auto; }
  main:has(.booking-form :is(input, select, textarea):focus) &.is-visible { opacity: 0; visibility: hidden; pointer-events: none; }
  @media (min-width: 40rem) { inset-inline-start: auto; max-inline-size: 24rem; }
  @media (prefers-reduced-motion: no-preference) {
    transition: translate var(--toast-rise) ease, opacity var(--hover-fade) ease, visibility var(--hover-fade);
  }
}

.price-swap {
  display: inline-grid; grid-template-columns: min-content 0fr; column-gap: 0.5ch; align-items: baseline;
  & .was { position: relative; text-decoration: none; color: var(--ink); }
  & .was::after { content: ''; position: absolute; inset-inline: 0; top: 50%; block-size: var(--border-w); background: currentColor; scale: 0 1; transform-origin: left; }
  & .now { overflow: hidden; white-space: nowrap; }
  &.is-discounted { grid-template-columns: min-content 1fr; }
  &.is-discounted .was { color: var(--ink-mute); }
  &.is-discounted .was::after { scale: 1; }
  @media (prefers-reduced-motion: no-preference) {
    transition: grid-template-columns var(--hover-fade) var(--ease-settle);
    & .was { transition: color var(--hover-fade); }
    & .was::after { transition: scale var(--hover-fade) var(--ease-settle); }
  }
}



.visit-card { display: grid; gap: var(--space-6); max-width: var(--measure-wide); }
:is(.visit-card, .visit-policy, .slot-summary) > :first-child { margin-bottom: 0; }
.visit-card .notice { flex-basis: 100%; }
.visit-card .row-actions { gap: var(--space-3); padding-top: 1rem; }
.visit-card .row-actions > p { flex-basis: 100%; font-size: var(--step-0); }
.visit-card .row-actions:empty { display: none; }
.visit-policy { margin-block: 2.5rem var(--space-section); max-width: var(--measure-wide); display: grid; gap: var(--space-4); }
.visit-policy p { margin: 0; }




.coupon-entry { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.coupon-entry input { flex: 1 1 12rem; min-width: 0; }

:is(.admin > h2, .admin > section > h2) {
  margin: 0 0 1rem; padding-inline-start: 1rem; color: var(--ink);
  font: 500 var(--step--1) / 1.3 var(--font-ui); letter-spacing: 0;
  background: var(--bullet);
}


.admin-filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); align-items: end; margin: 0;
  border-top: 1px solid var(--rule); box-shadow: inset 0 -1px 0 var(--rule);
  background: var(--rule-solid-v) left top / 1px 100% no-repeat;
}
:is(.admin, .admin > section) > .admin-filters { margin-block-end: var(--space-8); }
.admin-filters > .field {
  align-self: stretch; align-content: start; padding: var(--space-4);
  border-bottom: 1px solid var(--rule); background: var(--rule-solid-v) right top / 1px 100% no-repeat;
}
.admin-filters > .button { justify-self: start; margin: var(--space-4); }
.admin-filters :is(input, select) { line-height: 1.25; }


.bookings { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-section); }
.booking-row { --status-kind: var(--ink-mute); }
.booking-row[data-status='pending'] { --status-kind: var(--accent); }
.booking-row[data-status='confirmed'] { --status-kind: var(--ok); }
.booking-row :is(h2, h3) { font: 600 var(--step-2) / var(--leading-heading) var(--font-display); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; }
.booking-row > p { margin: 0; }
.booking-row dd { white-space: pre-wrap; }
.booking-row img { border: 1px solid var(--rule); }
.booking-row .data { white-space: normal; }
.status-pill { color: var(--ink); }

.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding-top: 1rem; border-top: 1px solid; border-image: var(--bar-rule) 1; }
.row-actions p { margin: 0; font-size: var(--step--1); }
.row-actions:has(> p:first-child) { max-width: var(--measure-wide); margin-bottom: var(--bar); }
.row-actions:has(> p:first-child) > p { flex-basis: 100%; max-width: none; padding-top: var(--label-pad); color: var(--ink); }


.change-log { list-style: none; margin: 0 0 var(--space-section); padding: 0; border-top: 1px solid var(--rule); font: 500 var(--step--1) / 1.4 var(--font-ui); letter-spacing: 0; color: var(--ink-soft); }
.change-log li { padding-block: 0.55rem; border-bottom: 1px solid; border-image: var(--bar-rule) 1; overflow-wrap: anywhere; }
.change-log .log-time { display: block; font-variant-numeric: tabular-nums; }
.change-log :is(.log-actor, .log-id) { color: var(--ink); }
@media (min-width: 40rem) {
  .change-log { display: grid; grid-template-columns: max-content repeat(2, minmax(0, max-content)) minmax(8ch, 1fr); column-gap: var(--space-6); }
  .change-log li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
  .change-log .log-note { display: block; }
}

#status:has(> .notice) { margin-bottom: 1.5rem; }
#status:has(> .notice):has(+ .booking[hidden]) { margin-bottom: var(--space-section); }


.flag-pill { --status-kind: var(--error); color: var(--error); }




.availability { --slot-h: 24px; --slots: 48; --days: 7; --gutter-w: 3.25rem; --booking-inset: 28%; }
@media (pointer: coarse), (max-width: 51.99rem) { .availability { --slot-h: var(--tap-min); } }
.availability #status:has(> .notice) { margin-bottom: 1.5rem; }


.av-views { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 1.25rem; border: 1px solid var(--ink); }
.av-view {
  min-height: var(--tap-min); border: 0; background: var(--paper-raised); color: var(--ink);
  font: var(--font-label); text-transform: var(--label-case); letter-spacing: var(--label-tracking);
  &[aria-pressed='true'] { background: var(--label-bg); color: var(--label-ink); }
  & + & { border-inline-start: 1px solid var(--ink); }
}
.av-layout { --av-gap: 1.5rem; display: grid; gap: var(--av-gap); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-section); }
@media (max-width: 51.99rem) {
  body[data-availability-view='calendar'] .av-panel, body[data-availability-view='hours'] .av-calendar { display: none; }
  .av-savebar { order: 3; position: sticky; bottom: max(var(--wall-inset), env(safe-area-inset-bottom)); z-index: 30; padding: 0.5rem 0.75rem; }
  .av-savebar[data-idle] { position: static; }
  .av-flags { order: 2; }
}
@media (min-width: 52rem) {
  .av-views { display: none; }
  .av-layout { grid-template-columns: minmax(20rem, 24rem) minmax(0, 1fr); grid-template-areas: 'bar calendar' 'flags calendar' 'panel calendar'; align-items: start; gap: 0 var(--pair-gap); }
  .av-savebar { grid-area: bar; position: sticky; top: var(--sticky-top); z-index: 5; }
  
  .av-panel * { scroll-margin-top: calc(var(--savebar-h, 0px) + var(--av-gap)); }
  .av-flags { grid-area: flags; }
  .av-savebar, .av-flags { margin-block-end: var(--av-gap); }
  .av-panel { grid-area: panel; }
  .av-calendar { grid-area: calendar; position: sticky; top: var(--sticky-top); }
}

.av-savebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: 0.75rem 1rem;
  background: var(--paper-raised); border: var(--border-w) solid var(--label-bg); box-shadow: var(--hard-bar);
}
.av-savebar-state { flex: 1 1 8rem; margin: 0; font: var(--font-label); text-transform: var(--label-case); letter-spacing: var(--label-tracking); color: var(--ink); }
.av-savebar-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.av-savebar-confirm:not(:empty) { flex-basis: 100%; display: grid; gap: 0.35rem; font-size: var(--step--1); }
.av-savebar-confirm:empty { display: none; }
.av-savebar-flags {
  flex-basis: 100%; display: flex; align-items: center; gap: 0.5em; min-block-size: var(--tap-min); padding: 0; border: 0;
  background: none; color: var(--error); font: inherit; font-size: var(--step--1); text-align: start;
  &::before { content: '' / ''; flex: none; inline-size: 0.6em; block-size: 0.6em; background: var(--error); }
  &::after { content: '+' / ''; margin-inline-start: auto; font: 500 var(--step-0) / 1 var(--font-ui); }
  &[aria-expanded='true']::after { content: '−' / ''; }
}
.av-savebar-confirm { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.av-savebar-confirm > p { flex-basis: 100%; margin: 0; }


.av-flags {
  display: grid; gap: 0.35rem; padding: 0.75rem 1rem; font-size: var(--step--1); color: var(--error);
  background: var(--paper-raised); border: 1px solid var(--error); box-shadow: inset 3px 0 0 var(--error);
  & :is(p, ul) { margin: 0; }
  & ul { padding-inline-start: 1.1rem; max-block-size: 12rem; overflow-y: auto; }
  & a { color: inherit; }
}


.av-panel { display: grid; gap: var(--space-8); }
.av-panel > section { display: grid; gap: var(--space-3); align-content: start; padding-top: 1rem; border-top: 1px solid var(--rule); }
.av-panel h2 { margin: 0; padding-inline-start: 1rem; color: var(--ink); font: 500 var(--step--1) / 1.3 var(--font-ui); background: var(--bullet); }
.av-panel p { margin: 0; }
.av-fields { display: grid; gap: var(--space-4); }
.av-note { font-size: var(--step--1); color: var(--ink-soft); }
.av-week, .av-overrides { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.av-day, .av-override { display: grid; gap: var(--space-2); padding-block: 0.6rem; border-bottom: 1px solid; border-image: var(--bar-rule) 1; }
.av-day { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name tools' 'ranges ranges'; align-items: center; }
.av-day > .av-day-name { grid-area: name; font: var(--font-label); text-transform: var(--label-case); letter-spacing: var(--label-tracking); }
.av-day > .av-tools { grid-area: tools; }
.av-day > .av-ranges { grid-area: ranges; }
.av-ranges { display: grid; gap: 0.4rem; min-width: 0; }
.av-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 0.35rem; align-items: center; }
.av-range select { padding-inline: 0.45rem; font-variant-numeric: tabular-nums; }
.av-closed { color: var(--ink-mute); }
.av-tools { display: flex; gap: 0.35rem; }
.av-icon {
  display: inline-grid; place-items: center; inline-size: var(--tap-min); block-size: var(--tap-min); flex: none;
  border: 1px solid var(--rule); background: var(--paper-raised); color: var(--ink); font: 500 var(--step-0) / 1 var(--font-ui);
  @media (hover: hover) { &:hover { border-color: var(--ink); } }
  &[aria-expanded='true'] { background: var(--label-bg); color: var(--label-ink); }
}
.av-warning, .av-copy { grid-column: 1 / -1; }
.av-warning { font-size: var(--step--1); color: var(--error); }
.av-warning::before { content: '' / ''; display: inline-block; inline-size: 0.6em; block-size: 0.6em; margin-inline-end: 0.5em; background: var(--error); }
.av-copy { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0 var(--space-3); margin: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--rule); }
.av-copy legend { padding-inline: 0.25rem; font: var(--font-label); text-transform: var(--label-case); }
.av-copy .row-actions { grid-column: 1 / -1; }
.av-override { grid-template-columns: minmax(0, 1fr); }
.av-override .row-actions { padding-top: 0.25rem; border-top: 0; }
.av-editor { display: grid; gap: var(--space-4); }
.av-on-date { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: var(--step--1); }
.av-on-date li { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
#add-override { justify-self: start; }
#add-override[hidden] { display: none; }


.av-toast {
  position: fixed; z-index: 45; inset-inline: var(--page-start) var(--page-side); top: calc(var(--header-bottom) + 0.5rem);
  display: grid; gap: var(--space-2); padding: 0.75rem 1rem; background: var(--label-bg); color: var(--label-ink); box-shadow: var(--hard-bar);
  font: var(--font-label); letter-spacing: var(--label-tracking);
  opacity: 0; visibility: hidden; translate: 0 -0.5rem; pointer-events: none;
  &.is-visible { opacity: 1; visibility: visible; translate: 0; pointer-events: auto; }
  & p { margin: 0; max-width: none; }
  & > div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  & button { min-height: var(--tap-min); padding-inline: 0.9rem; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; text-transform: var(--label-case); }
  @media (min-width: 52rem) { top: auto; bottom: var(--wall-inset); inset-inline-start: auto; max-inline-size: 26rem; }
  @media (prefers-reduced-motion: no-preference) { transition: translate var(--toast-rise) ease, opacity var(--hover-fade) ease, visibility var(--hover-fade); }
}


.av-calendar[data-mode='day'] { --days: 1; }
.sg-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: 0.75rem; }
.sg-title { margin: 0; font: 600 var(--step-2) / var(--leading-heading) var(--font-display); }
.sg-navs { display: flex; }
:is(.sg-nav, .av-bar-button) {
  min-inline-size: var(--tap-min); min-block-size: var(--tap-min); padding-inline: 0.75rem; border: 1px solid var(--ink); background: var(--paper-raised); color: var(--ink);
  font: var(--font-label); text-transform: var(--label-case);
  & + & { border-inline-start: 0; }
  @media (hover: hover) { &:hover { background: var(--label-bg); color: var(--label-ink); } }
}
.sg-strip { display: none; }
.av-calendar[data-mode='day'] .sg-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 0.75rem; border: 1px solid var(--ink); }
.sg-strip-day {
  position: relative; display: grid; place-items: center; gap: 0.1rem; min-block-size: calc(1.4 * var(--tap-min)); padding: 0.25rem 0 0.75rem; border: 0; background: var(--paper-raised); color: var(--ink);
  font: var(--font-label); text-transform: var(--label-case);
  & + & { border-inline-start: 1px solid var(--rule); }
  & strong { font: 600 var(--step-0) / 1 var(--font-ui); color: inherit; }
  &[aria-pressed='true'] { background: var(--label-bg); color: var(--label-ink); }
  &[data-today] > span { padding-inline-start: 0.7rem; background: var(--bullet); }
  &[data-closed] { color: var(--ink-mute); background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--rule) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)) var(--paper-raised); }
  &[data-closed][aria-pressed='true'] { background-color: var(--label-bg); color: var(--label-ink); }
  &[data-booked]::after { content: '' / ''; position: absolute; inset-block-end: 0.25rem; inline-size: 0.35rem; block-size: 0.35rem; background: currentColor; }
}
.sg-heads, .sg-columns { display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); }
.sg-heads { margin-inline-start: var(--gutter-w); border-top: 1px solid var(--ink); }
.sg-head { display: flex; flex-wrap: wrap; min-width: 0; border-inline-start: 1px solid var(--rule); border-bottom: 1px solid var(--ink); }
.sg-day {
  flex: 1 0 3rem; min-width: 0; min-block-size: var(--tap-min); display: grid; align-content: center; gap: 0.15rem; padding: 0.3rem 0.4rem; border: 0; background: none; color: var(--ink); text-align: start;
  font: var(--font-label); text-transform: var(--label-case); letter-spacing: var(--label-tracking);
  &[aria-current='date'] .sg-day-name { padding-inline-start: 0.85rem; background: var(--bullet); }
  @media (hover: hover) { &:hover { background: var(--paper-sunk); } }
}
.sg-day-name { white-space: nowrap; }
.sg-day-name strong { display: block; font: 600 var(--step-1) / 1 var(--font-ui); color: inherit; }
.sg-day-note { font-size: var(--step--2); color: var(--accent-ink); text-transform: none; }
.sg-add {
  flex: none; inline-size: var(--tap-min); min-block-size: var(--tap-min); border: 0; border-inline-start: 1px dotted var(--rule); background: none; color: var(--accent-ink);
  font: 500 var(--step-1) / 1 var(--font-ui);
  &:disabled { color: var(--ink-mute); }
  @media (hover: hover) { &:enabled:hover { background: var(--accent-wash); } }
}
.sg-scroller { overflow-y: auto; max-block-size: min(72svh, 46rem); border-bottom: 1px solid var(--ink); overscroll-behavior: contain; }
.av-calendar[data-mode='day'] .sg-scroller { max-block-size: max(18rem, calc(100svh - 20rem)); }
.sg-body { display: grid; grid-template-columns: var(--gutter-w) minmax(0, 1fr); }
.sg-gutter { position: relative; block-size: calc(var(--slots) * var(--slot-h)); }
.sg-gutter > span {
  position: absolute; inset-inline-end: 0.4rem; top: calc(var(--from) * var(--slot-h)); translate: 0 -50%;
  font: 500 var(--step--2) / 1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink-mute);
  &:first-child { translate: 0 0.15rem; }
}
.sg-col {
  position: relative; block-size: calc(var(--slots) * var(--slot-h)); border-inline-start: 1px solid var(--rule);
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(2 * var(--slot-h) - 1px), var(--rule) 0 calc(2 * var(--slot-h))),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--slot-h) - 1px), var(--tick) 0 var(--slot-h));
  touch-action: pan-y; -webkit-touch-callout: none; user-select: none; cursor: crosshair;
  &[data-drawing] { cursor: ns-resize; }
}
.sg-col > * { position: absolute; top: calc(var(--from) * var(--slot-h)); block-size: calc(var(--span) * var(--slot-h)); }
.sg-past { inset-inline: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(135deg, var(--tick) 0 1px, transparent 0 6px); }

.sg-clock-change {
  inset-inline: 0 1px; z-index: 2; pointer-events: none; display: grid; align-content: center; justify-items: end; padding-inline: 0.35rem;
  background: repeating-linear-gradient(45deg, var(--ink-mute) 0 1px, transparent 0 5px) var(--paper-sunk);
  & > span { padding: 0.05rem 0.25rem; background: var(--paper-raised); color: var(--ink-soft); font: 500 var(--step--2) / 1.2 var(--font-ui); }
}
.sg-range {
  inset-inline: 0 1px; z-index: 1; display: grid; align-content: start; padding: 0.2rem 0.35rem; border: 0; border-inline-start: 3px solid var(--accent);
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--slot-h) - 1px), color-mix(in srgb, var(--accent) 30%, transparent) 0 var(--slot-h)),
    color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-ink); text-align: start; overflow: visible;
  font: 500 var(--step--2) / 1.2 var(--font-ui); font-variant-numeric: tabular-nums;
  &[data-own-hours] { outline: 1px dashed var(--accent); outline-offset: -1px; }
  &[data-resizing] { background-color: color-mix(in srgb, var(--accent) 32%, transparent); }
  @media (hover: hover) { &:hover { background-color: color-mix(in srgb, var(--accent) 26%, transparent); } }
}
.sg-range-time { position: relative; z-index: 3; justify-self: start; padding: 0.05rem 0.2rem; background: var(--paper-raised); }

.sg-range[data-label-at='end'] { align-content: end; }
.sg-range[data-label-at='none'] .sg-range-time { visibility: hidden; }

.sg-handle {
  --handle-h: 10px; position: absolute; inset-inline: 0; block-size: var(--handle-h); z-index: 2; cursor: ns-resize; touch-action: none;
  &[data-edge='start'] { top: calc(-1 * var(--handle-h) / 2); }
  &[data-edge='end'] { bottom: calc(-1 * var(--handle-h) / 2); }
  &::after { content: '' / ''; position: absolute; inset-inline: 35%; top: calc(50% - 1px); block-size: 3px; background: var(--accent); opacity: 0; }
  @media (pointer: coarse) {
    --handle-h: var(--tap-min);
    .sg-range:not([data-selected]) > & { display: none; }
    &::after { opacity: 1; }
  }
}
.sg-range[data-selected] { background-color: color-mix(in srgb, var(--accent) 26%, transparent); outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) { .sg-range:is(:hover, :focus-visible) .sg-handle::after { opacity: 1; } }
.sg-booking {
  inset-inline: var(--booking-inset) 2px; z-index: 4; display: grid; align-content: start; gap: 0.1rem; padding: 0.2rem 0.35rem; overflow: hidden;
  border: 1px solid var(--ink); background: var(--paper-raised); color: var(--ink); text-align: start;
  font: 500 var(--step--2) / 1.2 var(--font-ui);
  &[data-status='pending'] { border-style: dashed; }
  &[data-flagged] { border-color: var(--error); box-shadow: inset 3px 0 0 var(--error); color: var(--error); }
}
.sg-booking-time > span { display: inline-block; }

.sg-col { container-type: inline-size; }
@container (max-width: 5.5rem) {
  .sg-range-time, .sg-booking > * { display: none; }
  .sg-booking { inset-inline: 2px; }
}
.sg-booking-who { font-family: var(--font-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-booking-flag::before { content: '' / ''; display: inline-block; inline-size: 0.55em; block-size: 0.55em; margin-inline-end: 0.35em; background: var(--error); }
.sg-turnover { inset-inline: var(--booking-inset) 2px; z-index: 4; pointer-events: none; background: repeating-linear-gradient(135deg, var(--ink-mute) 0 1px, transparent 0 5px); opacity: 0.6; }
.sg-ghost { inset-inline: 0 1px; z-index: 5; pointer-events: none; background: color-mix(in srgb, var(--accent) 34%, transparent); border: 1px solid var(--accent); }
.sg-ghost > span {
  position: absolute; inset-inline-start: 0.25rem; bottom: calc(100% + 0.25rem); padding: 0.3rem 0.5rem; white-space: nowrap;
  background: var(--label-bg); color: var(--label-ink); font: var(--font-label); text-transform: var(--label-case);
}
.sg-menu {
  position: fixed; inset: auto; margin: 0; inline-size: min(22rem, calc(100vw - 16px)); max-block-size: calc(100svh - 16px); overflow-y: auto;
  display: none; gap: var(--space-3);
  &:popover-open { display: grid; }
  & p { margin: 0; }
}
.sg-menu-times { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.sg-menu-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sg-menu-flag { color: var(--error); }
.sg-copy { display: grid; gap: 0 var(--space-3); grid-template-columns: 1fr 1fr; margin: 0; padding: 0.5rem 0.75rem 0.75rem; border: 1px solid var(--rule); }
.sg-copy legend { font: var(--font-label); text-transform: var(--label-case); }
.sg-copy > .button { grid-column: 1 / -1; justify-self: start; margin-top: 0.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .sg-range, .sg-booking { transition: background-color var(--hover-fade); }
}



.policy { --policy-heading-w: 20rem; display: grid; gap: var(--space-section); counter-reset: policy; }
.policy section { counter-increment: policy; display: grid; gap: var(--space-4); align-content: start; }
.policy-body { display: grid; gap: var(--space-3); align-content: start; }
.policy h2 { font-size: var(--step-3); }
.policy h2::before { content: var(--track-prefix, '') counter(policy) / ''; display: block; margin-bottom: 0.75rem; color: var(--ink); font: var(--font-label); letter-spacing: var(--label-tracking); }
.policy h3 { margin-top: 1rem; }
.policy p, .policy ul { margin: 0; }
.policy ul { max-width: var(--measure); padding-inline-start: 1.25rem; display: grid; gap: var(--space-2); }
.policy li::marker { color: var(--accent-ink); }
@media (min-width: 60rem) {
  .policy section { grid-template-columns: minmax(0, var(--policy-heading-w)) minmax(0, var(--measure-wide)); column-gap: var(--pair-gap); }
  .policy-body { grid-column: 2; }
  .policy section > h2 { grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: var(--sticky-top); }
  .policy h3:first-of-type { margin-top: 0; }
}


.client .client-scope { color: var(--accent-ink); }


.packages { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 0; display: grid; column-gap: var(--pair-gap); grid-template-columns: minmax(0, 1fr); counter-reset: cell; }
.package { position: relative; counter-increment: cell; display: grid; gap: 1.25rem; align-content: start; padding: 1.5rem var(--gutter) 2.25rem; }
.package::before { content: var(--track-prefix, '') counter(cell) / ''; font: var(--font-label); letter-spacing: var(--label-tracking); color: var(--ink); }
.package[data-recommended] { border-top: var(--border-w) solid var(--accent); }
.package[data-add-on] { margin-top: 2rem; }
.package-head { display: grid; gap: 0.4rem; justify-items: start; }
.package h3 { font-size: var(--step-3); }
.package p { margin: 0; }
.package-tag { color: var(--accent-ink); }
.package .package-fee {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.4rem; margin-top: 0.6rem;
  color: var(--ink); font: 700 var(--step-4) / 1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums;
}
.package-fee small { font: var(--label-weight) var(--step--2) / 1.2 var(--font-ui); text-transform: var(--label-case); letter-spacing: var(--label-tracking); color: var(--ink-soft); }
.package-for { font-size: var(--step-0); max-width: var(--measure); }
.package-body { display: grid; gap: var(--space-6) var(--pair-gap); align-content: start; }
.package-part { display: grid; gap: var(--space-2); align-content: start; }
.package h4 { margin: 0; color: var(--accent-ink); }
.package-base { font-size: var(--step--1); }
.package-part ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: var(--step--1); }
.package-part li { position: relative; padding-inline-start: 1rem; }
.package-part li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 0.45rem; border-top: 1px solid var(--accent); }
.package .package-note { padding-top: 1rem; font-size: var(--step--1); color: var(--ink-soft); max-width: none; }
@media (min-width: 40rem) { .package-body { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
@media (min-width: 60rem) {
  .packages { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(0, 4fr); }
  .package {
    grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-rows: auto auto 1fr auto;
    grid-template-areas: 'mark mark mark' 'head work deliverables' 'for work deliverables' 'for note note';
  }
  .package::before { grid-area: mark; }
  .package > .package-head { grid-area: head; }
  .package > .package-for { grid-area: for; }
  .package > .package-body { display: contents; }
  .package .package-work { grid-area: work; }
  .package .package-deliverables { grid-area: deliverables; }
  .package > .package-note { grid-area: note; }
  .packages { --stack-step: 3rem; }
}

.packages.is-stacked > .package {
  position: sticky; top: calc(var(--header-cover) + var(--stack-index) * var(--stack-step)); z-index: calc(1 + var(--stack-index)); background: var(--paper);
  & :is(.package-head, .package-for, .package-part, .package-note) { opacity: calc(1 - var(--covered, 0)); }
  &:focus-within { z-index: calc(1 + var(--stack-size)); --covered: 0 !important; }
}


.matrix { display: grid; gap: var(--space-4); }

.deliverables-matrix { --rise-stagger: 0.01s; width: 100%; table-layout: fixed; border-collapse: collapse; counter-reset: matrix-package; font-size: var(--step--1); }
.deliverables-matrix :is(th, td) { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--rule); text-align: start; vertical-align: middle; }
.deliverables-matrix thead :is(th, td) { vertical-align: bottom; border-bottom-color: var(--ink); }
.deliverables-matrix thead th { width: max(var(--tap-min), 14%); counter-increment: matrix-package; font: var(--font-label); letter-spacing: var(--label-tracking); text-transform: var(--label-case); color: var(--ink); }
.deliverables-matrix thead th::before { content: var(--track-prefix, '') counter(matrix-package) / ''; display: block; margin-bottom: 0.5rem; }
.deliverables-matrix tbody th { padding-inline-start: 0; font-weight: 400; color: var(--ink); }
.matrix-mark { display: inline-block; width: 0.9rem; aspect-ratio: 1; vertical-align: middle; border: 1px solid currentColor; color: var(--ink); }
[data-included="own"] > .matrix-mark { background: currentColor; }
.deliverables-matrix td[data-included="no"] { background: repeating-linear-gradient(45deg, var(--rule) 0 1px, transparent 0 6px); }
.matrix-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.matrix-key .matrix-mark { margin-inline-end: 0.5rem; }
@media (max-width: 39.99rem) {
  .deliverables-matrix { table-layout: auto; }
  .deliverables-matrix thead :is(th, td) { vertical-align: top; }
  .deliverables-matrix tbody td { text-align: center; }
  .deliverables-matrix thead th { writing-mode: vertical-rl; }
  .deliverables-matrix thead th::before { display: inline; margin: 0; margin-inline-end: 0.75em; font-size: var(--step--2); }
}

.matrix { container-type: inline-size; grid-template-columns: minmax(0, 1fr); }
@container (width < 15rem) {
  .deliverables-matrix tr { display: flex; flex-wrap: wrap; }
  .deliverables-matrix :is(thead th, td) { flex: 1 1 0; width: auto; }
  .deliverables-matrix thead td { display: none; }
  .deliverables-matrix tbody th { flex-basis: 100%; padding-block-end: 0.2rem; border-bottom: 0; }
}

.deliverables-groups { columns: 22rem 3; column-gap: var(--pair-gap); padding-top: 0.5rem; }
.deliverables-groups > div { margin-bottom: 1.5rem; }
.deliverables-groups h3 { margin-bottom: 0.5rem; break-after: avoid; }
.deliverables-groups dl { margin: 0; border-top: 1px solid var(--rule); }
.deliverables-groups dl > div { break-inside: avoid; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.deliverables-groups dt { font: 600 var(--step-0) / 1.35 var(--font-body); }
.deliverables-groups dd { margin: var(--space-1) 0 0; font-size: var(--step--1); }

p:has(> [data-services]:empty) { display: none; }
:is(.clients:empty, .deliverables:has(.deliverables-groups:empty), .enquire:has(.enquiry-questions:empty)) { display: none; }
.listen-band { margin-bottom: var(--space-section); }
.listen-band .teaser { align-items: start; }
.listen-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.enquiry-questions { margin: 0 0 1.5rem; padding-inline-start: 1.25rem; display: grid; gap: 0.4rem; max-width: var(--measure); }



.guide-contents { color: var(--ink-soft); }
.guide-contents ol { list-style: none; margin: 0; padding: 0; counter-reset: part; }
.guide-contents li { counter-increment: part; }
.guide-contents a { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-content: center; min-height: var(--tap-min); padding-block: 0.75rem; text-decoration: none; }
.guide-contents a::before { content: var(--track-prefix, '') counter(part) / ''; font-variant-numeric: tabular-nums; color: var(--ink); }
.guide-contents a:is(:hover, [aria-current]) { color: var(--ink); }
.guide-contents a[aria-current]::before { color: var(--accent-ink); }

.guide-contents summary {
  --toggle-tick: 0.7rem; --toggle-tick-travel: 1rem; --toggle-tick-inset: 0.9rem;
  --toggle-tick-away: calc(var(--toggle-tick-inset) - var(--toggle-tick) - var(--toggle-tick-travel));
  --folded-tick-at: var(--toggle-tick-inset); --open-tick-at: var(--toggle-tick-away);
  --tick-stroke: linear-gradient(currentColor 0 0);
  display: block; min-height: var(--tap-min); padding: 0.75rem calc(2 * var(--toggle-tick-inset) + var(--toggle-tick)) 0.75rem 0;
  border-top: 1px solid var(--rule); color: var(--ink); list-style: none;
  background:
    var(--tick-stroke) right var(--folded-tick-at) bottom var(--folded-tick-at) / 1px var(--toggle-tick),
    var(--tick-stroke) right var(--folded-tick-at) bottom var(--folded-tick-at) / var(--toggle-tick) 1px,
    var(--tick-stroke) right var(--open-tick-at) top var(--open-tick-at) / 1px var(--toggle-tick),
    var(--tick-stroke) right var(--open-tick-at) top var(--open-tick-at) / var(--toggle-tick) 1px;
  background-repeat: no-repeat;
  @media (max-width: 47.99rem) { --toggle-tick-travel: 0.8rem; }
}
.guide-contents summary::-webkit-details-marker { display: none; }
.guide-contents summary[data-count]::after { content: ' [' attr(data-count) ']' / ''; color: var(--ink-mute); }
.guide-contents details[open] > summary { --folded-tick-at: var(--toggle-tick-away); --open-tick-at: var(--toggle-tick-inset); }
@media (prefers-reduced-motion: no-preference) { .guide-contents summary { transition: background-position var(--hover-fade); } }
@supports selector(::details-content) {
  @media (min-width: 64rem) {
    .guide-contents summary { display: none; }
    .guide-contents details::details-content { content-visibility: visible; block-size: auto; overflow: visible; }
  }
}

@media (min-width: 64rem) and (hover: hover) {
  .guide-contents a > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .guide-contents li { position: relative; }
  .guide-contents li[data-truncated]::after {
    content: attr(data-title) / ''; position: absolute; z-index: 2; inset-block-start: 50%; inset-inline-start: 3rem; translate: 0 -50%;
    inline-size: max-content; max-inline-size: var(--measure); padding: 0.6rem; pointer-events: none; opacity: 0;
    background: var(--label-bg); color: var(--label-ink);
  }
  .guide-contents li[data-truncated]:has(> a:is(:hover, :focus-visible))::after { opacity: 1; }
  @media (prefers-reduced-motion: no-preference) { .guide-contents li[data-truncated]::after { transition: opacity var(--hover-fade); } }
}
.guide-body { display: grid; gap: var(--space-section); min-width: 0; container-type: inline-size; counter-reset: part; }
.guide-body > section { display: grid; gap: var(--space-6); align-content: start; min-width: 0; counter-increment: part; }
.guide-body > section > h2 { max-width: 20ch; }
.guide:has(> .guide-contents) .guide-body > section > h2::before {
  content: var(--track-prefix, '') counter(part) / '';
  display: block; margin-bottom: 1rem; font: var(--font-label); letter-spacing: var(--label-tracking); font-variant-numeric: tabular-nums; color: var(--ink);
}
.guide :is(.prose, .guide-body) { line-height: var(--leading-prose); }
.guide .prose { columns: auto; max-width: var(--measure); }
.guide .sound-lead > .prose { columns: var(--measure) 2; max-width: var(--pair-max); }
.guide-body .prose p:last-child { margin-bottom: 0; }
.guide-notice { margin-bottom: 2.5rem; }
.glossary-term { text-decoration-style: dotted; text-decoration-thickness: 1.5px; }

.glossary-tip {
  --tip-arrow: 0.75rem;
  position: fixed; inset: var(--tip-y, 0) auto auto var(--tip-x, 0); margin: 0; overflow: visible;
  max-inline-size: min(22rem, 100vw - 2 * var(--gutter)); padding: 0.75rem 0.9rem; border: 0;
  background: var(--label-bg); color: var(--label-ink); font: 500 var(--step--1) / 1.4 var(--font-body); letter-spacing: 0; text-wrap: pretty;
}
.glossary-tip::after {
  content: '' / ''; position: absolute; top: calc(100% - var(--tip-arrow) / 2); left: var(--tip-arrow-x, 50%);
  inline-size: var(--tip-arrow); block-size: var(--tip-arrow); background: inherit; translate: -50% 0; rotate: 45deg;
}
.glossary-tip[data-side='below']::after { top: auto; bottom: calc(100% - var(--tip-arrow) / 2); }
@media (prefers-reduced-motion: no-preference) {
  .glossary-tip { opacity: 0; transition: opacity var(--hover-fade), display var(--hover-fade) allow-discrete, overlay var(--hover-fade) allow-discrete; }
  .glossary-tip:popover-open { opacity: 1; }
  @starting-style { .glossary-tip:popover-open { opacity: 0; } }
}
@media (forced-colors: active) { .glossary-tip { border: 1px solid CanvasText; } }

@media (min-width: 64rem) {
  .guide:has(> .guide-contents) { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); }
  .guide:has(> .guide-contents) > :not(.guide-contents, .guide-body) { grid-column: 1 / -1; }
  .guide > .guide-contents { --current-inset: var(--bullet-size); grid-column: 1; position: sticky; top: var(--sticky-top); z-index: 1; align-self: start; }
  .guide > .guide-contents a { padding-inline-end: var(--current-room); }
  .guide:has(> .guide-contents) > .guide-body { grid-column: 2; }
}

.glossary { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: var(--space-8) var(--pair-gap); }
.glossary > div { padding-top: 0.9rem; }
.glossary dt { margin-bottom: 0.5rem; }
.glossary dd { margin: 0; max-width: var(--measure); }
.glossary > div:target { box-shadow: inset 3px 0 0 var(--accent); padding-inline-start: 1rem; }
.glossary > div:target dt { color: var(--accent-ink); }

.problems .problem-question { font-size: var(--step-1); line-height: 1.35; color: var(--ink); }
.problems dl { margin: 0.5rem 0 0; display: grid; gap: var(--space-3); padding-top: 1rem; }
.problems dt { color: var(--accent-ink); }
.problems dd { margin: var(--space-1) 0 0; }

.guide-body .rules { max-width: none; border-top: 0; row-gap: var(--space-8); }
.guide-body .rules li { padding: 0.9rem 0 0; gap: var(--space-2); }
@container (min-width: 80rem) { .guide-body .rules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 50rem) { .guide-body .symptoms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.guide-body :is(.checklist, .red-flags) li { grid-template-columns: 1rem minmax(0, 1fr); column-gap: var(--space-3); }
.guide-body :is(.checklist, .red-flags) li::before { grid-row: 1 / span 2; justify-self: center; }
.checklist li::before { content: ''; width: 0.9rem; height: 0.9rem; margin-top: 0.3rem; border: 1.5px solid var(--accent-ink); border-radius: var(--radius); }
.red-flags li::before { content: '!'; font: 600 var(--step-1) / 1.2 var(--font-ui); color: var(--warn); }

.scope-pair { display: grid; gap: 1.25rem var(--pair-gap); align-items: start; }
@container (min-width: 60rem) { .scope-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); max-width: calc(3 * var(--measure) + 2 * var(--section-gap)); } }
.scope-request { margin: 0; max-width: var(--measure-wide); padding-inline-start: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-inline-start: 2px solid var(--accent); font-size: var(--step-1); }
.scope-request p { max-width: none; }
.scope-request p:last-child { margin-bottom: 0; }
.scope-request mark { background: none; color: var(--accent-ink); font-style: italic; }

.fees { border-top: 1px solid var(--rule); }
.fees:has(dl:empty), .red-flags li:has(> [data-fee]:empty) { display: none; }
.fees-head { display: none; }
.fees dl { margin: 0; }
.fees dl > div { display: grid; gap: var(--space-1) var(--space-6); padding-block: 0.9rem; border-bottom: 1px solid var(--rule); }
.fees dt { font: 600 var(--step-0) / 1.35 var(--font-body); }
.fees dd { margin: 0; max-width: var(--measure); }
.fees .fees-fee { color: var(--ink); }
.fees-fee small { font-size: var(--step--1); color: var(--ink-soft); }
@container (min-width: 44rem) {
  .fees-head, .fees dl > div { grid-template-columns: minmax(0, 1.1fr) minmax(11rem, 0.8fr) minmax(0, 2fr); }
  .fees-head { display: grid; gap: var(--space-6); padding-block: 0.6rem; border-bottom: 1px solid var(--rule); font-size: var(--step--1); color: var(--ink-soft); }
}

.guide-next { margin: 0; padding-top: 1.25rem; }
.guide-next:empty { display: none; }




@property --surface-fill { syntax: '<color>'; inherits: false; initial-value: transparent; }


.cursor-layer {
  position: fixed; inset: 0; inline-size: auto; block-size: auto; margin: 0; padding: 0; border: 0; background: none; overflow: visible;
  pointer-events: none;
}

.cursor-sound { position: absolute; left: calc(-1 * (var(--frame-inset) + 1px)); top: calc(-1 * (var(--frame-inset) + 1px)); max-inline-size: none; pointer-events: none; }
@media print { .cursor-sound { display: none; } }
.cursor-driver {
  position: absolute; left: 0; top: 0; opacity: 0; will-change: transform; --cursor-fade-in: 120ms;
  &.is-visible { opacity: 1; transition: opacity var(--cursor-fade-in) linear; }
  & svg { position: absolute; translate: -50% -50%; max-inline-size: none; overflow: visible; }
}

.cursor-driver svg {
  & .cursor-trim { fill: none; }
  & .cursor-band { fill: none; stroke: var(--uniq-surround); }
  & .cursor-flute-trough { fill: var(--uniq-surround-shadow); fill-opacity: 0.9; }
  & .cursor-flute-crest { fill: var(--uniq-surround-lit); fill-opacity: calc(0.45 + 0.45 * var(--flute-light)); }
  & .cursor-cone { stroke: var(--uniq-surround-shadow); stroke-width: 0.35; }
  & .cursor-cone-lit { stop-color: color-mix(in oklab, var(--uniq-cone), white 55%); }
  & .cursor-cone-mid { stop-color: color-mix(in oklab, var(--uniq-cone), #9e9e9e 55%); }
  & .cursor-cone-shade { stop-color: color-mix(in oklab, var(--uniq-cone), #6e6e6e 60%); }
  & .cursor-rib-lit { fill: var(--uniq-rib); }
  & .cursor-rib-shade { fill: var(--uniq-rib-edge); fill-opacity: 0.8; }
  & .cursor-neck { stroke: var(--uniq-gap); stroke-width: 0.22; }
  & .cursor-neck-mid { stop-color: var(--uniq-neck); }
  & .cursor-neck-shade { stop-color: color-mix(in oklab, var(--uniq-neck), black 30%); }
  & .cursor-crimson-lit { stop-color: color-mix(in oklab, var(--illustration), white 22%); }
  & .cursor-crimson-mid { stop-color: var(--illustration); }
  & .cursor-crimson-shade { stop-color: color-mix(in oklab, var(--illustration), black 40%); }
  & .cursor-blade-lit { fill: color-mix(in oklab, var(--uniq-blade), white 14%); }
  & .cursor-blade-shade { fill: var(--uniq-blade); }
  & .cursor-blade-edge { fill: none; stroke: var(--uniq-gap); stroke-width: 0.07; stroke-linejoin: round; }
  & .cursor-blade-spine { fill: none; stroke: color-mix(in oklab, var(--uniq-blade), white 45%); stroke-width: 0.07; stroke-linecap: round; }
  & .cursor-pin { fill: color-mix(in oklab, var(--uniq-blade), white 70%); stroke: var(--uniq-gap); stroke-width: 0.08; }
}
.cursor-driver.is-disabled svg {
  & .cursor-cone { fill: var(--cursor-mute); fill-opacity: 0.06; stroke: var(--cursor-mute); stroke-dasharray: 1.6 1.6; }
  & :is(.cursor-rib-lit, .cursor-rib-shade) { opacity: 0.45; }
}


.cursor-layer [data-surface='light'] {
  --cursor-mute: var(--ink-mute-day);
}
.cursor-layer [data-surface='dark'] {
  --cursor-mute: var(--ink-mute-night);
}
.cursor-layer [data-surface='accent'] {
  --cursor-mute: var(--paper-day);
}


.cursor-driver > .cursor-hand { opacity: 0; scale: 1; transition: opacity 0.1s linear, scale 0.08s linear; }
.cursor-hand-outline { fill: var(--paper-day); stroke: var(--ink-day); stroke-width: 1.2px; stroke-linejoin: round; }
.cursor-driver.is-gripping > svg:not(.cursor-hand) { opacity: 0; transition: opacity 0.1s linear; }
.cursor-driver.is-gripping > .cursor-hand { opacity: 1; }
.cursor-driver.is-gripping.is-pressing > .cursor-hand { scale: 0.9; }

.cursor-driver { --pinch-return: 120ms; }
.cursor-driver > .cursor-pinch { opacity: 0; rotate: var(--pinch-turn, 0deg); transition: opacity 0.1s linear, rotate var(--pinch-return) var(--ease-settle); }
.cursor-driver.is-turning > .cursor-pinch { transition: opacity 0.1s linear; }
.cursor-pinch-outline { fill: var(--paper-day); stroke: var(--ink-day); stroke-width: 0.95px; stroke-linejoin: round; stroke-linecap: round; }
.cursor-pinch-line { fill: none; stroke: var(--ink-day); stroke-width: 0.75px; stroke-linecap: round; }
.cursor-driver.is-pinching > svg:not(.cursor-pinch) { opacity: 0; transition: opacity 0.1s linear; }
.cursor-driver.is-pinching > svg.cursor-pinch { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cursor-driver > .cursor-pinch { transition: opacity 0.1s linear; } }

.cursor-driver > .cursor-lamp { opacity: 0; scale: 0.6; rotate: 20deg; transition: opacity var(--fader-reveal) var(--ease-roll), scale var(--fader-reveal) var(--ease-roll); }
.cursor-lamp :is(.cursor-lamp-body, .cursor-lamp-fine, .cursor-lamp-lens, .cursor-lamp-ray) { stroke-linejoin: round; stroke-linecap: round; }
.cursor-lamp-body, .cursor-lamp-lens { fill: var(--paper-day); stroke: var(--ink-day); stroke-width: 1.2px; }
.cursor-lamp-fine { fill: none; stroke: var(--ink-day); stroke-width: 0.9px; }
.cursor-lamp-ray { fill: none; stroke: var(--lit); stroke-width: 1.1px; stroke-dasharray: 2 2.5; opacity: 0; transition: opacity var(--fader-reveal) var(--ease-roll); }
.cursor-driver.is-lamp > svg:not(.cursor-lamp) { opacity: 0; scale: 0.55; transition: opacity var(--fader-reveal) var(--ease-roll), scale var(--fader-reveal) var(--ease-roll); }
.cursor-driver.is-lamp > .cursor-lamp { opacity: 1; scale: 1; }
.cursor-driver.is-lamp .cursor-lamp-ray { opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .cursor-driver > .cursor-lamp, .cursor-lamp-ray, .cursor-driver.is-lamp > svg:not(.cursor-lamp) { transition: none; } }


html.cursor-drawn, html.cursor-drawn * { cursor: none !important; }

@media (any-pointer: fine) and (not (forced-colors: active)) { html[data-pointer-drawn], html[data-pointer-drawn] * { cursor: none !important; } }
:is(html.cursor-drawn, html[data-pointer-drawn]) :is(input:not([type]), input:is([type='text'], [type='email'], [type='search'], [type='url'], [type='tel'], [type='password'], [type='number']), textarea, [contenteditable=''], [contenteditable='true'], iframe, embed, object) { cursor: auto !important; }
@media print { .cursor-layer { display: none; } }


@property --pressable { syntax: 'no | yes | disabled'; inherits: true; initial-value: no; }
:where(a[href], button, summary, select, label[for], label:has(input, select, textarea), input:is([type='button'], [type='submit'], [type='reset'], [type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file']), [role='button'], [role='link'], [role='tab'], [role='menuitem'], [role='option'], [role='switch'], [role='checkbox'], [role='radio'], [data-cursor='interactive']), .button[data-cursor='interactive'] {
  cursor: pointer; --pressable: yes;
  &:where(:disabled, [aria-disabled='true'], [aria-disabled='true'] *, fieldset:disabled *):not([data-cursor='interactive']) { --pressable: disabled; }
}


.playground { min-height: calc(100dvh - var(--header-bottom) - var(--wall-inset)); }


@media not (any-pointer: fine) { .laptop-only { display: none; } }

@media (max-width: 39.99rem), (pointer: coarse) and (max-width: 68.75rem) {
  :root {
    --wall-inset: 0.625rem;
    --page-least-side: var(--wall-inset);
    --gutter: var(--space-4);
    --rack-side: 0px;
    --rack-gap: var(--space-6);
    --space-section: var(--space-12);
    --space-head: var(--space-6);
    --section-gap: var(--space-6);
    --pair-gap: var(--space-8);
    --stage-gap: var(--space-8);
    --type-growth: 0rem;
    --step-4: 1.75rem;
    --title-size: 2rem;
    --leading-title: 1.1;
    --leading-heading: 1.18;
    --label-tracking: 0.045em;
    --engraved-tracking: 0.065em;
    --key-pad-inline: 1rem;
    --key-pad-inline-quiet: 0.8rem;
    --key-cap-gap: 2px;
    --bezel-w: 2px;
  }
  :root[data-scrollbar-drawn] { --transport-lane: 0px; }
  .treated-border, .page-scroll { display: none; }
  :root:has(body.rack) { --logo-air: 0.75rem; --header-h: calc(var(--key-h) + 2 * var(--logo-air)); }
  .rack .wordmark { min-inline-size: min(100%, 12rem); }
  .rack .site-nav .nav-cta { padding-inline-end: var(--gutter); }
  .rack .unit-amp > .unit-plate {
    font-size: var(--engraved-size); line-height: 1.3;
    flex-wrap: wrap; white-space: normal; row-gap: 0.5em; padding-block: 0.5rem;
  }
  .rack .hero { padding-block: 1rem 1.5rem; }
  .rack .hero-inner {
    --hero-title-size: 1.75rem; --hero-gap: 1rem;
    grid-template-areas: "title" "place" "intro" "drawing" "actions";
    gap: var(--hero-gap) var(--pair-gap);
  }
  .rack .hero-text { display: contents; gap: var(--hero-gap); }
  .rack .hero h1 { grid-area: title; }
  .rack .hero-place { grid-area: place; }
  .rack .hero .lede { grid-area: intro; margin: 0; }
  .rack .hero-drawing { grid-area: drawing; }
  .rack .hero-drawing .dr-hotspots { display: none; }
  .rack .hero-actions { --hero-module-w: 100%; grid-area: actions; margin: 0; gap: var(--space-3); }
  @media (min-width: 40rem) {
    .rack .hero-inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas: "text drawing"; align-items: center;
    }
    .rack .hero-text { display: grid; grid-area: text; grid-template-areas: "title" "place" "intro" "actions"; }
  }
  .rack .unit .section { padding-block: 1.5rem 2rem; }
  .stage { gap: var(--space-6); }
  .stage h2 { font-size: var(--step-3); line-height: var(--leading-heading); }
  .label-box, :is(.notice, .visit-card, .slot-summary, .visit-policy), .row-actions:has(> p:first-child) {
    --label-pad: 1rem;
    box-shadow: none;
  }
  .slot-summary { padding: 1rem 0; border: 0; border-block: 1px solid var(--rule); background: transparent; }
  .slot-summary > :first-child { margin: 0; padding: 0; background: transparent; color: var(--ink); }
}