*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
:root{color-scheme:light}
body{margin:0;background:var(--baucon-gallery-surface);color:var(--baucon-ink);font:var(--baucon-body)/1.55 var(--baucon-display)}
a{color:var(--baucon-signal);text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--baucon-signal);outline-offset:3px}
button,select,input{font:inherit}
button,select,input[type=radio],input[type=checkbox],input[type=range]{cursor:pointer}
button:disabled,input:disabled{cursor:default}
button{color:inherit}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{line-height:1.04;letter-spacing:-.015em}
h3{font-size:1.5rem}
p+p{margin-block-start:.7em}
ol,ul{padding-inline-start:1.35em}
li+li{margin-block-start:.4em}
.shell{width:min(100% - clamp(32px,8vw,112px),1300px);margin-inline:auto}
.eyebrow,.tag,.bar,.indexline,.bench-head,.readout,.range-label,.poster figcaption,.ticks,caption,.small,.footer{font-family:var(--baucon-technical)}
.eyebrow,.tag,.bar,.indexline,.poster figcaption,.footer{font-size:.72rem;letter-spacing:.08em}
.skip{position:absolute;top:6px;left:8px;transform:translateY(-150%);background:var(--baucon-paper);padding:.5rem;z-index:10}
.skip:focus{transform:none}
.sitehead{border-block-end:var(--baucon-rule) solid}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:62px}
.brand{font-size:1rem;font-weight:bold;text-decoration:none;color:inherit;white-space:nowrap}
.bar nav{display:flex;flex-wrap:wrap;gap:0 clamp(.5rem,2vw,1.5rem)}
.bar nav a{min-height:var(--baucon-target);display:inline-flex;align-items:center;color:inherit;text-decoration:none}
.bar nav a:hover{text-decoration:underline}
.version{white-space:nowrap}
.hero{display:grid;grid-template-columns:.93fr 1.07fr;gap:clamp(28px,5vw,78px);align-items:center;padding-block:clamp(40px,7vw,98px) clamp(30px,5vw,65px)}
.hero h1{font-size:clamp(3.3rem,7vw,8rem);line-height:1;letter-spacing:-.025em;margin-block:.21em .26em}
.hero h1 i{font-style:normal;color:var(--baucon-signal)}
.hero h1 .headline-first-line { display: block; margin-block-end: -.04em; }
.hero h1 .headline-kern { margin-inline-end: .05em; }
.hero h1 .headline-period { color: var(--baucon-oxide); }
.lede{font-size:clamp(1.17rem,2.3vw,1.55rem);line-height:1.27;max-width:32ch;font-weight:700;letter-spacing:-.02em}
.hero p:not(.eyebrow){max-width:38ch}
.hero .action{margin-block-start:1.6rem}
.space-scene svg{display:block;width:100%;height:auto}
.poster { min-width: 0; }
.poster figcaption { padding: .55rem .25rem 0; }
.hero-perspective-stage {
  position: relative;
  background: transparent;
}
.hero-perspective-stage img, .hero-perspective-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 580 / 455;
}
.hero-perspective-stage img { object-fit: contain; filter: url(#xerox-ink-plate); }
.hero-perspective-stage canvas { cursor: grab; touch-action: pinch-zoom; }
.hero-perspective-stage canvas:active { cursor: grabbing; }
.hero-perspective-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding: .25rem;
}
.hero-perspective-controls p { font-size: .82rem; }
.hero .hero-perspective-controls .action { margin: 0; }
.indexline,.footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-block-start:1px solid;border-block-end:1px solid;padding-block:.65rem}
.action{display:inline-flex;align-items:center;justify-content:center;gap:.8em;min-height:var(--baucon-target);padding:.45rem .85rem;background:transparent;border:1px solid currentColor;text-decoration:none;color:inherit;font-weight:700;line-height:1.2}
.action:hover{background:#e7e1d2}
.primary{background:var(--baucon-signal);color:white;border-color:var(--baucon-signal)}
.primary:hover{background:#171c83}
.chapter{margin-block:clamp(52px,8vw,110px);scroll-margin-top:1rem}
.chapter-head{display:grid;grid-template-columns:minmax(130px,1fr) 4fr;gap:var(--baucon-space-gutter);border-top:1px solid;padding-top:1rem;margin-bottom:clamp(20px,4vw,44px)}
.chapter-head h2,.closing h2{font-size:clamp(2.65rem,6.25vw,6rem);margin-bottom:.16em}
.chapter-head p:not(.eyebrow){font-size:clamp(1rem,2vw,1.25rem);max-width:60ch}
.bench,.annotation{border:1px solid}
.bench-head{min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem var(--baucon-space-gutter);border-bottom:1px solid;font-size:.81rem}
.tag{display:inline-block;padding:.16em .4em;border:1px solid;line-height:1.25}
.space-layout,.time-layout,.control-grid,.notes-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.space-scene,.time-scene{display:grid;align-content:center;border-inline-end:1px solid var(--baucon-ink);min-width:0}
.space-scene{background:#171b64;color:#fff6df;--context:#242988;--evidence:#f4f0e5;--selection:#f06a48;--grid:#222bbd;--axis:#fcfcff}
.context-plane,.evidence-plane,.selection-plane{stroke:currentColor;stroke-width:1.5}
.context-plane{fill:var(--context)}
.evidence-plane{fill:var(--evidence)}
.selection-plane{fill:var(--selection)}
.plane-grid{stroke:var(--grid);fill:none}
.anchor-line{stroke:var(--axis);stroke-width:1.5;stroke-dasharray:3 4;fill:none}
.anchor-point{fill:var(--ink,#1c2020);stroke:#fff7e6;stroke-width:2}
[data-medium=eink] .space-scene{background:#eee;color:#222;--context:#fff;--evidence:#ccc;--selection:#444;--grid:#303030;--axis:#000}
[data-medium=print] .space-scene{background:#fff9e8;color:#30241b;--context:#f7e8cb;--evidence:#fff9e8;--selection:#df9d88;--grid:#a03522;--axis:#54210f}
.bench-tools,.inspector-stage,.annotation,.notes-grid>div{padding:clamp(14px,3vw,30px)}
.bench-tools fieldset{margin:0;padding:0;border:0;min-width:0}
.bench-tools legend,.range-label{font-size:.85rem;font-weight:bold}
.segmented{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.35rem}
.segmented label{display:flex;align-items:center;gap:.45rem;padding:.25rem .65rem;border:1px solid;min-height:var(--baucon-target);cursor:pointer}
.segmented input[type="radio"], .circular-checkbox {
  appearance: none;
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.segmented input[type="radio"]:checked {
  background: radial-gradient(circle, var(--baucon-signal) 0 4px, transparent 4.5px);
}
.circular-checkbox { display: inline-grid; place-items: center; }
.circular-checkbox:checked::after {
  content: "";
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--baucon-signal);
}
.circular-checkbox:disabled { opacity: .45; }
@media (forced-colors: active) {
  .segmented input[type="radio"], .segmented input[type="radio"]:checked, .circular-checkbox {
    appearance: auto;
    background: revert;
  }
  .circular-checkbox:checked::after { content: none; }
}
input{accent-color:var(--baucon-signal)}
.readout,.small{font-size:.79rem;margin-block:.55rem 1rem}
.range-label{display:flex;justify-content:space-between;gap:.4rem}
input[type=range]{width:100%;display:block;margin:0;min-height:var(--baucon-target)}
.plane-key{margin-bottom:0}
/* ANTICIPATION_STYLES_START */
.time-scene{padding:clamp(14px,3vw,30px);color:#f4f0e5;background:#1c2020;gap:1.15rem;min-height:245px}
.timeline-labels {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-size: .8rem;
}
.timeline-track {
  --offset: 0px;
  position: relative;
  height: 100px;
  margin-inline-end: 5px;
}
.timeline-rest, .timeline-gap, .timeline-sample, .timeline-anchor { position: absolute; }
.timeline-rest {
  inset: 0 auto 0 0;
  border-inline-start: 1px dashed #d0d0ca;
  z-index: 1;
}
.timeline-gap {
  inset: 0 auto 0 0;
  width: var(--offset);
  background: #f1b65d;
}
.timeline-sample {
  inset: 0 0 0 var(--offset);
  background: #f4f0e5;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.timeline-anchor {
  top: 50%;
  right: 0;
  width: 10px;
  aspect-ratio: 1;
  transform: translate(50%, -50%);
  border: 2px solid #f4f0e5;
  border-radius: 50%;
  background: #1c2020;
}
.timeline-frames {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline-frames li {
  display: grid;
  gap: .15rem;
  margin: 0;
  padding: .4rem;
  border: 1px solid #8a8c87;
  font-size: .75rem;
  line-height: 1.3;
}
.timeline-icon {
  position: relative;
  display: block;
  width: min(100%, 3rem);
  height: 1rem;
  border-inline-start: 1px dashed #d0d0ca;
}
.timeline-icon::after {
  content: "";
  position: absolute;
  inset: 0 0 0 var(--mini-offset, 0px);
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
[data-step="anticipate"] .timeline-icon { --mini-offset: 4px; }
[data-step="hold"] .timeline-icon { --mini-offset: 9px; background: linear-gradient(to right, #f1b65d 9px, transparent 9px); }
.time-scene:has([data-phase="anticipate"]) [data-step="anticipate"],
.time-scene:has([data-phase="hold"]) [data-step="hold"],
.time-scene:has([data-phase="settle"]) [data-step="settle"] {
  color: #f1b65d;
  border-color: currentColor;
}
.time-caption{max-width:42ch}
.time-number{font:700 clamp(2.1rem,5vw,4rem)/1 var(--baucon-technical);color:var(--baucon-signal)}
.time-number span{font-size:1rem}
.play-controls{display:flex;flex-wrap:wrap;gap:.45rem;margin-block:.75rem}
.ticks{display:grid;grid-template-columns:repeat(4,1fr);font-size:.7rem}
.ticks span:last-child{text-align:right}
.ticks span:nth-child(3){text-align:right}
.motion-option{display:flex;align-items:center;gap:.45rem;min-height:var(--baucon-target)}
/* ANTICIPATION_STYLES_END */
.spec-handoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  padding: clamp(14px, 3vw, 30px);
  border-block-start: 1px solid;
}
.spec-handoff p { max-width: 58ch; margin-block-start: .35rem; }
.spec-handoff .play-controls { margin: 0; }
.control-grid,.notes-grid{gap:var(--baucon-space-gutter)}
.inspector-stage>.action{margin-bottom:1rem}
.baucon-inspector__title{font-size:1.15rem;letter-spacing:normal;line-height:1.15}
.baucon-inspector__body summary{cursor:pointer;min-height:var(--baucon-target);align-content:center}
.annotation{background:#f3f3f3}
.type-specimens { margin: 0; }
.type-specimens > div {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(0, 4fr);
  gap: .5rem var(--baucon-space-gutter);
  align-items: baseline;
  padding: clamp(.85rem, 2vw, 1.5rem) var(--baucon-space-gutter);
  border-block-end: 1px solid #b9b3a4;
}
.type-specimens dt { font-weight: 700; }
.type-specimens dd { margin: 0; min-width: 0; }
.type-specimens .small { max-width: 66ch; margin-block: .5rem 0; }
.type-display {
  font-size: clamp(2.25rem, 5vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
}
.type-section {
  font-size: clamp(1.6rem, 3.2vw, 3rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.015em;
}
.type-specimens .time-number { margin-block-start: .25rem; }
.type-source { margin: .75rem var(--baucon-space-gutter); }
@media (max-width: 650px) {
  .type-specimens > div { grid-template-columns: 1fr; }
}
.table-wrap{overflow-x:auto;margin-block:var(--baucon-space-gutter);border-bottom:1px solid}
table{width:100%;text-align:left;border-collapse:collapse;font-size:.91rem}
caption{text-align:left;padding:.6rem .65rem;border-block:1px solid;font-size:.82rem;font-weight:bold}
th,td{vertical-align:top;padding:.65rem;border-bottom:1px solid #b9b3a4}
thead{background:var(--baucon-ink);color:var(--baucon-paper)}
tbody tr:last-child>*{border-bottom:0}
code{font-family:var(--baucon-technical);font-size:.85em;overflow-wrap:anywhere}
.swatch {
  display: inline-block;
  width: .75em;
  height: .75em;
  border-radius: 50%;
  margin-inline-end: .35em;
}
.swatch--outlined { border: 1px solid currentColor; }
.token-tools,.kit-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem 1rem}
.select-field { position: relative; display: inline-block; }
.select-field select {
  appearance: none;
  display: block;
  max-inline-size: 100%;
  min-height: var(--baucon-target);
  border: 1px solid;
  border-radius: 0;
  background: var(--baucon-paper);
  color: inherit;
  padding-inline: .6rem 2rem;
}
.select-field::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: .75rem;
  width: .625rem;
  height: .375rem;
  background: currentColor;
  clip-path: polygon(0 18%, 12% 0, 50% 65%, 88% 0, 100% 18%, 50% 100%);
  transform: translateY(-50%);
  pointer-events: none;
}
@media (forced-colors: active) {
  .select-field::after { forced-color-adjust: none; background: ButtonText; }
}
@supports (appearance: base-select) and selector(::picker(select)) {
  .select-field select, .select-field ::picker(select) {
    appearance: base-select;
  }
  .select-field select { display: flex; align-items: center; }
  .select-field select::picker-icon { display: none; }
  .select-field:has(select:open)::after {
    transform: translateY(-50%) rotate(180deg);
  }
  .select-field ::picker(select) {
    margin: 0;
    padding: 0;
    min-inline-size: anchor-size(width);
    border: 1px solid currentColor;
    border-radius: 0;
    background: var(--baucon-paper);
    color: var(--baucon-ink);
  }
  .select-field option {
    min-block-size: var(--baucon-target);
    padding: .45rem .6rem;
    gap: .6rem;
  }
  .select-field option:checked {
    background: var(--baucon-ink);
    color: var(--baucon-paper);
  }
  .select-field option:not(:checked):not(:disabled):is(:hover, :focus-visible) {
    background: #e2e2e2;
  }
  .select-field option:focus-visible { outline-offset: -3px; }
  .select-field option::checkmark { order: 1; margin-inline-start: auto; }
  .select-field option:checked::checkmark {
    content: "";
    flex: 0 0 .75rem;
    height: .5625rem;
    align-self: center;
    background: currentColor;
    clip-path: polygon(0 52%, 12% 36%, 36% 66%, 88% 0, 100% 16%, 36% 100%);
  }
  @media (forced-colors: active) {
    .select-field option:checked { background: Highlight; color: HighlightText; }
    .select-field option:checked::checkmark { forced-color-adjust: none; background: HighlightText; }
  }
}
.notes-grid>div{border-top:1px solid;border-bottom:1px solid}
.notes-grid ol,.notes-grid ul{margin-bottom:0}
.boilerplate{border:1px solid;padding:.5rem 1rem}
.boilerplate summary{display:list-item;min-height:var(--baucon-target);align-content:center;cursor:pointer;font-weight:bold}
.boilerplate pre{white-space:pre-wrap;overflow-wrap:anywhere;font:.86rem/1.6 var(--baucon-technical);max-width:88ch}
.closing{background:var(--baucon-signal);color:white;padding:clamp(20px,6vw,68px);margin-block-end:3rem}
.closing h2{margin-top:.16em}
.closing a{color:white}
.closing a:focus-visible{outline-color:white}
.footer{border-bottom:0;margin-bottom:1rem}
@media(max-width:850px){
  .hero{grid-template-columns:1fr;gap:1.6rem}
  .poster{max-width:650px}
  .hero h1{font-size:clamp(2.8rem,11vw,7rem)}
}
@media(max-width:650px){
  .bar{flex-wrap:wrap;gap:0;padding-block:.4rem}
  .bar nav{order:3;width:100%;justify-content:space-between}
  .chapter-head,.space-layout,.time-layout,.control-grid,.notes-grid{grid-template-columns:1fr}
  .chapter-head{gap:.55rem}
  .space-scene,.time-scene{border-inline-end:0;border-block-end:1px solid var(--baucon-ink)}
  .table-wrap table{min-width:32rem}
}
@media print{
  .sitehead nav,.action,.token-tools,.motion-option,.skip,input{display:none!important}
  .hero,.space-layout,.time-layout{display:block}
  .poster{max-width:24rem;margin-top:1rem}
  .chapter{margin-block:2rem}
  .bench,.table-wrap{break-inside:avoid}
  .table-wrap table{min-width:0}
}

/* The documented portfolio paper expression. Editorial color stays outside map selection. */
.chapter-head{border-top-width:3px}
[data-medium=print] .space-scene{background:var(--baucon-paper);color:var(--baucon-ink);--context:transparent;--evidence:var(--baucon-paper);--selection:var(--baucon-paper);--grid:var(--baucon-ink);--axis:var(--baucon-ink)}
[data-medium=print] .anchor-point{stroke:var(--baucon-paper)}
.table-wrap{scrollbar-color:#777 transparent;scrollbar-width:thin}
@media(forced-colors:active){.table-wrap{scrollbar-color:auto;scrollbar-width:auto}}
.clock-specimen{display:flex;gap:1rem 2rem;flex-wrap:wrap;border-bottom:1px solid;padding:1rem var(--baucon-space-gutter)}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--baucon-clock-live);vertical-align:.1em}
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: clock-pulse 2.8s ease-in-out infinite; }
}
@keyframes clock-pulse {
  50% { opacity: .65; transform: scale(.88); }
}

.eyebrow,.tag,.bar,.indexline,.bench-head,.poster figcaption,.footer{text-transform:uppercase}
.time-number,.ticks{font-variant-numeric:tabular-nums}

.study-content { padding: clamp(1rem, 3vw, 1.75rem); }
#integrations .bench-head h3 { font-size: 1rem; letter-spacing: normal; }
.terrain-figure { display: block; width: 100%; height: auto; }
.reveal-phrase {
  --reveal-field: #f5d54a;
  padding: .35em .42em .44em;
  font-size: clamp(1.85rem, 4vw, 3.5rem);
  font-weight: 750;
  line-height: 1.08;
}
.reveal-phrase[data-revealed] { color: #171818; background-color: var(--reveal-field); }
.reveal-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.reveal-word { display: inline-block; white-space: nowrap; }
.reveal-stop { display: inline-block; transform-origin: 50% 85%; }
#reveal-study .play-controls { margin-block-start: clamp(1.25rem, 3vw, 2.25rem); }

.pronunciation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  margin-top: 1rem;
}
.pronunciation .action { margin: 0; }
#pronunciation-note, #pronunciation-status { font-size: .9rem; }
#pronunciation-status:empty { display: none; }

.plane-pixel, .pixel-anchor { display: none; }

[data-medium="8bit"] .space-scene {
  background: #0b1224;
  color: #fff1bb;
  --context: url(#space-pixel-dither) #354578;
  --evidence: #72d6bd;
  --selection: #ffd15c;
  --axis: #fff1bb;
}
[data-medium="8bit"] :is(.plane-smooth, .plane-hatch, .plane-grid, .anchor-point) { display: none; }
[data-medium="8bit"] :is(.plane-pixel, .pixel-anchor) {
  display: inline;
  shape-rendering: crispEdges;
  stroke-width: 3;
}
[data-medium="8bit"] .pixel-anchor { fill: #b12d56; stroke: #0b1224; }
[data-medium="8bit"] .anchor-line { shape-rendering: crispEdges; stroke-dasharray: 4 4; }

[data-medium="32bit"] .space-scene {
  background: #141e32;
  color: #d8eef9;
  --context: url(#space-context-shading);
  --evidence: url(#space-evidence-shading);
  --selection: url(#space-selection-shading);
  --grid: #4a647e;
}
[data-medium="32bit"] .plane-hatch { display: none; }
[data-medium="32bit"] .plane-smooth {
  stroke-width: 2;
  filter: drop-shadow(0 5px 0 #101a2b);
}

#projection-picker { margin-block-end: 1rem; }

.evolved-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1rem;
}
.evolved-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.evolved-card {
  min-width: 0;
  border: 1px solid var(--baucon-ink);
  padding: 1rem;
}
.evolved-card h3 { margin-block: .85rem .45rem; }
.evolved-card p { margin: 0; }
.evolved-plate {
  --travel: 560ms ease;
  position: relative;
  height: 7rem;
  border: 1px solid var(--plate-line);
  color: var(--plate-line);
  background: var(--plate-surface);
}
.evolved-base {
  --plate-surface: var(--baucon-paper);
  --plate-line: var(--baucon-ink);
  --plate-signal: var(--baucon-signal);
}
.evolved-bautendo {
  --plate-surface: #27334e;
  --plate-line: #ffe7aa;
  --plate-signal: #f3a85d;
}
.evolved-bautendo .evolved-plate {
  --travel: 560ms steps(6, end);
  background-image:
    linear-gradient(#ffe7aa26 1px, transparent 1px),
    linear-gradient(90deg, #ffe7aa26 1px, transparent 1px);
  background-size: 1rem 1rem;
}
.evolved-bautari {
  --plate-surface: #151217;
  --plate-line: #f7e5bd;
  --plate-signal: #f7e5bd;
}
.evolved-bautari .evolved-plate {
  --bautari-travel-time: 1600ms;
  --bautari-column-delay: 280ms;
  --travel: var(--bautari-travel-time) steps(8, end);
}
.evolved-destination.bautari-pixels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
}
.bautari-pixels span { background: #efbf53; }
.bautari-pixels span:nth-child(-n + 6) { background: #e88448; }
.bautari-pixels span:nth-child(-n + 3) { background: #d7564f; }
[data-arrived="true"] .evolved-bautari .evolved-marker {
  left: calc(86% - 1.05rem);
}
[data-arrived="true"] .bautari-pixels span {
  background: var(--plate-signal);
  transition: background-color 0s var(--bautari-travel-time);
}
[data-arrived="true"] .bautari-pixels span:nth-child(3n + 2) {
  transition-delay: calc(var(--bautari-travel-time) + var(--bautari-column-delay));
}
[data-arrived="true"] .bautari-pixels span:nth-child(3n) {
  transition-delay: calc(var(--bautari-travel-time) + 2 * var(--bautari-column-delay));
}
.evolved-route {
  position: absolute;
  inset-inline: 14%;
  top: 50%;
  border-top: 1px dashed currentColor;
}
.evolved-start, .evolved-destination, .evolved-marker {
  position: absolute;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translate(-50%, -50%);
}
.evolved-start, .evolved-destination {
  border: 1px solid currentColor;
  background: var(--plate-surface);
}
.evolved-start, .evolved-marker { left: 14%; }
.evolved-destination, [data-arrived="true"] .evolved-marker { left: 86%; }
.evolved-marker {
  width: .7rem;
  height: .7rem;
  background: var(--plate-signal);
  transition: left var(--travel);
}
.evolved-bautendo .evolved-marker {
  clip-path: polygon(25% 0, 75% 0, 75% 25%, 100% 25%, 100% 75%, 75% 75%, 75% 100%, 25% 100%, 25% 75%, 0 75%, 0 25%, 25% 25%);
}
@media (max-width: 760px) {
  .evolved-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .evolved-marker { transition: none; }
  [data-arrived="true"] .bautari-pixels span:nth-child(n) { transition: none; }
}

.hero-callout-space {
  --hero-note-height: 8rem;
  display: flex;
  justify-content: flex-end;
}
.hero-perspective-stage:has(canvas:not([hidden])) .hero-callout-space {
  block-size: var(--hero-note-height);
}
#hero-layer-note {
  align-self: start;
  width: min(63%, 17rem);
  max-block-size: var(--hero-note-height);
  overflow: auto;
  overscroll-behavior: contain;
  padding: .45rem .65rem;
  border: 1px solid currentColor;
  background: var(--baucon-gallery-surface);
  color: var(--baucon-ink);
  font-size: .8rem;
  line-height: 1.35;
}
#hero-layer-note strong, #hero-layer-note span { display: block; }
#hero-layer-note strong {
  margin-bottom: .18rem;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#hero-leader, #hero-leader span { position: absolute; pointer-events: none; }
#hero-leader { inset: 0; color: var(--baucon-ink); }
#hero-leader span {
  height: 1px;
  background: currentColor;
  transform-origin: left center;
}
.hero-range {
  flex: 1 1 11rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .15rem .5rem;
  font-size: .82rem;
}
.hero-range input {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 2rem;
  margin: 0;
}
.hero-perspective-controls p { flex-basis: 100%; }

#hero-layer-note:has(.hero-facet-details:not([hidden])) {
  width: min(82%, 23rem);
}
.hero-facet-details {
  margin: .45rem 0 0;
  padding-inline-start: 1.2rem;
}
.hero-facet-details li {
  padding: .28rem 0;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

#hero-layer-note.is-floating { position: absolute; }

.component-preview { margin-block-start: 2rem; }
.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--baucon-space-gutter);
  align-items: stretch;
  margin-block: 1rem;
}
.component-card {
  min-width: 0;
  padding: 1rem;
}
.component-card > h2, .component-card > h4 { margin: 0 0 .85rem; font-size: 1.2rem; }
.component-card .small { margin-block-end: 0; }
.component-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
[data-action-demo] .primary {
  background: #526984;
  border-color: #526984;
}
@media (hover: hover) {
  [data-action-demo] .primary:hover {
    background: var(--baucon-signal);
    border-color: var(--baucon-signal);
  }
}
@media (prefers-reduced-motion: no-preference) {
  [data-action-demo] .primary { transition: background-color 160ms ease-out, border-color 160ms ease-out; }
}
.component-card fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.component-card .clock-specimen { border: 0; padding: 0; }
.component-library { padding-block-start: 2.5rem; }
.component-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem 1rem; }
.component-filters label, .component-field label { display: block; font-weight: 700; }
.component-filters input, .component-field input {
  max-width: 100%;
  min-height: var(--baucon-target);
  padding-inline: .6rem;
  color: inherit;
  background: var(--baucon-gallery-surface);
  border: 1px solid;
}
.component-filters input { width: min(18rem, 100%); }
.component-filters input[type="search"]:focus, .component-field input[type="text"]:focus {
  outline: none;
  box-shadow: none;
  caret-color: currentColor;
}
.component-count { min-height: 1.55em; }
.component-card .baucon-inspector, .component-card .small + .component-actions { margin-block-start: .75rem; }