/* eides.org — site styles. Every colour, size, speed and easing is a token from tokens.css. */

:root { --gutter: var(--space-4); --max: 1180px; --hdr-h: 64px; }
@media (min-width: 860px) { :root { --gutter: var(--space-8); } }

html { background: var(--surface-000); scroll-behavior: smooth; }
html.is-still { scroll-behavior: auto; }
html.is-intro { overflow: hidden; }
body { margin: 0; background: var(--surface-000); color: var(--ink); font: 400 15px/1.5 var(--font-sans); -webkit-text-size-adjust: 100%; }
body > header, body > main, body > footer { position: relative; z-index: 1; }

/* The ground: a survey sheet under the page, and a paper grain over it */
.ground { position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease-instrument); will-change: transform; }
.ground.is-in { opacity: 1; }
.grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-theme="dark"] .grain { opacity: 0.045; }

/* The entrance */
html.is-intro .hdr, html.is-intro main, html.is-intro footer { visibility: hidden; opacity: 0; }
.hdr, main, footer { transition: opacity 400ms var(--ease-instrument), visibility 0s; }
.intro { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.intro[hidden] { display: none; }
.intro__h, .intro__v { position: absolute; background: var(--laser); opacity: 0; box-shadow: 0 0 10px 1px var(--laser-tint); will-change: transform; }
.intro__h { left: 0; right: 0; top: 0; height: 1px; }
.intro__v { top: 0; bottom: 0; left: 0; width: 1px; }
.intro__lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); }
.intro__datum { width: clamp(40px, 5vw, 56px); height: clamp(40px, 5vw, 56px); overflow: visible; transform-origin: center; will-change: transform, opacity; }
.intro__datum .ring { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 52; stroke-dashoffset: 52; }
.intro__datum .tick { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 3; stroke-dashoffset: 3; }
.intro__datum .dot { fill: var(--laser); transform-box: fill-box; transform-origin: center; transform: scale(0); }
.intro__wm { height: clamp(56px, 7.6vw, 92px); width: auto; overflow: visible; transform-origin: 0 0; will-change: transform, opacity; }
.intro__wm .wm-letters path { opacity: 0; }
.intro__wm .wm-dot { opacity: 0; }
.intro__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro__arc path { fill: none; stroke: var(--laser); stroke-width: var(--stroke-hair); stroke-linecap: round; opacity: 0; }
.intro__fly { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--laser); transform: translate(-50%, -50%); opacity: 0; will-change: transform; }
.intro__read { position: absolute; left: var(--gutter); right: 140px; bottom: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); opacity: 0; }
.intro__read b { color: var(--ink-muted); font-weight: 500; }
.intro__ticks i { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border: 0 solid var(--line-strong); opacity: 0; will-change: transform; }
.intro__ticks i:nth-child(1) { border-left-width: 1.5px; border-top-width: 1.5px; }
.intro__ticks i:nth-child(2) { border-right-width: 1.5px; border-top-width: 1.5px; }
.intro__ticks i:nth-child(3) { border-left-width: 1.5px; border-bottom-width: 1.5px; }
.intro__ticks i:nth-child(4) { border-right-width: 1.5px; border-bottom-width: 1.5px; }

/* The frame opens from its centre, like an aperture, once the entrance hands over */
.hero-frame { clip-path: inset(0 0 0 0); transition: clip-path 700ms var(--ease-instrument); }
html.is-intro .hero-frame, html.is-reveal .hero-frame, .hero-frame.is-snap { clip-path: inset(50% 50% 50% 50%); }
.hero-frame.is-snap { transition: none; }
html.is-still .hero-frame { clip-path: inset(0 0 0 0); transition: none; }

/* The wake at full screen (stage.js): the frame is fixed over the page, its geometry and its aperture set every
   frame from script; a slot keeps its place in the grid. The header is the wordmark alone until the frame retreats,
   then its links and its ground come back. The view's tools and hint wait until the frame has landed. */
html.is-stage { overflow: hidden; }
.hero-frame.is-stage { position: fixed; z-index: 5; margin: 0; box-sizing: border-box; transition: none; will-change: left, top, width; }
.hero-frame.is-stage .ei-frame__view { overflow: hidden; }
.hero-frame.is-stage .ei-frame__ticks { z-index: 3; }
.hero-frame.is-stage .tools, .hero-frame.is-stage .view-hint { opacity: 0; visibility: hidden; }
.hero-frame .tools { transition: opacity var(--dur-draw) var(--ease-instrument), visibility 0s; }
.hero-frame .ei-frame__view canvas.is-staged { position: absolute; left: 0; top: 0; max-width: none; }
.hero-slot { min-width: 0; }
html.is-stage .hdr { background-color: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.is-stage .hdr .nav, html.is-stage .hdr .hdr__end { opacity: 0; visibility: hidden; }
.hdr { transition: opacity 400ms var(--ease-instrument), visibility 0s, background-color 900ms var(--ease-instrument), border-color 900ms var(--ease-instrument); }
.hdr .nav, .hdr .hdr__end { transition: opacity 900ms var(--ease-instrument) 350ms, visibility 0s 350ms; }
a { color: inherit; }
img, svg { display: block; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.skip { position: absolute; left: var(--space-4); top: -48px; padding: var(--space-2) var(--space-3); background: var(--surface-100); border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); z-index: 20; }
.skip:focus { top: var(--space-4); }

/* Header */
.hdr { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--surface-000) 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: var(--stroke-hair) solid var(--line); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--hdr-h); }
.brand { display: block; }
.wm { height: 24px; width: auto; overflow: visible; }
.wm-letters { fill: var(--ink); }
.wm-dot { fill: var(--laser); transform-box: fill-box; transform-origin: center; }
.wm-dot.is-pulse { animation: wm-pulse var(--dur-draw) var(--ease-draw) 1; }
@keyframes wm-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
/* The dot's hop on hover, its landing on a page load and its throw in the entrance are in assets/js/dot.js. */
.nav { display: flex; gap: var(--space-6); }
.nav a { text-decoration: none; color: var(--ink-muted); font-weight: 600; transition: color var(--dur-tick) var(--ease-instrument); }
.nav a:hover { color: var(--ink); }
@media (max-width: 859px) { .nav { display: none; } .hdr__cta { font-size: 13px; padding: var(--space-2) var(--space-3); } }

/* The first screen: a model on the bench and the statement beside it */
/* The first screen runs wider than the content measure: the model is the image, and it gets the room. */
.bench--first { display: grid; gap: var(--space-8); padding-block: var(--space-6) var(--space-16); align-items: center; width: min(100% - 2 * var(--gutter), 1400px); }
@media (min-width: 860px) {
  .bench--first { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-12); padding-block: var(--space-8) var(--space-24); min-height: calc(100svh - var(--hdr-h)); }
}
@media (min-width: 860px) and (max-width: 1100px) { .bench--first { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-8); } }
.hero-frame { border: var(--stroke-hair) solid var(--line); box-shadow: 0 1px 0 var(--surface-100) inset, var(--shadow-float); }
.hero-frame .ei-frame__bar { background: var(--surface-100); }
.hero-frame .ei-frame__view { height: clamp(340px, 112vw, 600px); }
@media (min-width: 860px) { .hero-frame .ei-frame__view { height: clamp(400px, calc(100svh - 268px), 820px); } }
.hero-frame .ei-frame__view canvas { width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.hero-frame .ei-frame__view canvas:active { cursor: grabbing; }
.hero-frame .ei-frame__view canvas.is-pick { cursor: crosshair; }
.hero-frame .ei-frame__view canvas.is-panning:active { cursor: move; }
.hero-frame.is-engaged { border-color: var(--ice-ink); }

/* Model controls: section, explode, view, zoom */
.ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding: var(--space-3) var(--space-4); border-top: var(--stroke-hair) solid var(--line); background: var(--surface-100); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.ctl__range, .ctl__group { display: inline-flex; align-items: center; gap: var(--space-2); }
.ctl__range b { color: var(--ink); font-weight: 500; min-width: 9ch; font-variant-numeric: tabular-nums; text-transform: none; }
.ctl kbd, .keys kbd { font: 500 11px/1 var(--font-mono); padding: 3px 5px; border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); color: var(--ink); }
.ctl__seg { display: inline-flex; border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); overflow: hidden; }
.ctl__seg button { all: unset; cursor: pointer; padding: 5px 9px; font: inherit; letter-spacing: inherit; color: var(--ink-muted); transition: background-color var(--dur-tick) var(--ease-instrument), color var(--dur-tick) var(--ease-instrument); }
.ctl__seg button + button { border-inline-start: var(--stroke-hair) solid var(--line); }
.ctl__seg button:hover { color: var(--ink); background: var(--surface-200); }
.ctl__seg button[aria-pressed="true"] { color: var(--ice-ink); background: var(--ice-tint); }
.ctl__seg button:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: -2px; }
.view-hint { position: absolute; left: var(--space-4); top: var(--space-3); margin: 0; max-width: min(46ch, calc(100% - 96px)); font: 400 12px/1.4 var(--font-mono); color: var(--ink-faint); pointer-events: none; transition: opacity var(--dur-move) var(--ease-instrument); }
.hero-frame.was-touched .view-hint { opacity: 0; }
@media (hover: none) { .view-hint { display: none; } }

/* The measure toggle: a quiet button that turns ice while the tool is live */
.ctl__btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 8px 4px 6px; border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); color: var(--ink-muted); font: inherit; letter-spacing: inherit; text-transform: inherit; transition: background-color var(--dur-tick) var(--ease-instrument), color var(--dur-tick) var(--ease-instrument), border-color var(--dur-tick) var(--ease-instrument); }
.ctl__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ctl__btn:hover { color: var(--ink); background: var(--surface-200); }
.ctl__btn[aria-pressed="true"] { color: var(--ice-ink); background: var(--ice-tint); border-color: var(--ice-ink); }
.ctl__btn:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.tools__measure { justify-content: center; min-width: 44px; padding: 7px 0; box-sizing: border-box; background: var(--surface-100); box-shadow: var(--shadow-float); border-radius: var(--radius-2); }
.tools__measure svg { width: 18px; height: 18px; }
.keys button[aria-pressed="true"] { color: var(--ice-ink); }
.keys button[aria-pressed="true"] kbd { border-color: var(--ice-ink); color: var(--ice-ink); background: var(--ice-tint); }
@media (max-width: 859px) { .tools__measure { min-width: 40px; } }

/* The measuring overlay: ice for what is placed, laser for the live snap point */
.measure { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.measure__line, .measure__tick { stroke: var(--ice-ink); stroke-width: 1.5; stroke-linecap: round; }
.measure__line.is-live { stroke-dasharray: 5 4; }
.measure__handle { fill: var(--ice); stroke: var(--ice-ink); stroke-width: 1.5; }
.measure__snap { fill: none; stroke: var(--laser); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.measure__label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); padding: 3px var(--space-2); font: 500 13px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ice-ink); background: var(--surface-100); border: var(--stroke-hair) solid var(--ice-ink); border-radius: var(--radius-1); box-shadow: var(--shadow-float); white-space: nowrap; pointer-events: none; }
.measure__label.is-live { color: var(--ink-muted); border-color: var(--line-strong); }
.hero-frame.is-measuring .ei-frame__view canvas, .hero-frame.is-measuring .ei-frame__view canvas.is-pick { cursor: crosshair; }
.hero-frame.is-measuring .datum { pointer-events: none; }
.hero-frame.is-measuring { border-color: var(--ice-ink); }

/* View and zoom float in the viewport's top corner, like a viewer's own toolbar */
.tools { position: absolute; top: var(--space-3); right: var(--space-3); display: grid; gap: var(--space-2); justify-items: end; font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; z-index: 2; }
.tools .ctl__seg { background: var(--surface-100); box-shadow: var(--shadow-float); border-radius: var(--radius-2); }
.ctl__seg--v { flex-direction: column; }
.ctl__seg--v button { text-align: center; min-width: 44px; }
.ctl__seg--v button + button { border-inline-start: 0; border-top: var(--stroke-hair) solid var(--line); }
.tools [data-zoom] { font-size: 15px; line-height: 1; padding: 6px 9px; }
@media (max-width: 859px) {
  .tools { top: var(--space-2); right: var(--space-2); }
  .ctl__seg--v button { min-width: 40px; padding: 5px 6px; }
}

/* Range: a rule-weight track, a square ice handle, like the measuring tool's handles */
.ctl input[type="range"] { -webkit-appearance: none; appearance: none; width: clamp(96px, 10vw, 150px); height: 20px; background: transparent; cursor: pointer; margin: 0; }
.ctl input[type="range"]::-webkit-slider-runnable-track { height: 1.5px; background: var(--line-strong); }
.ctl input[type="range"]::-moz-range-track { height: 1.5px; background: var(--line-strong); }
.ctl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5.25px; background: var(--ice); border: 1.5px solid var(--ice-ink); border-radius: 0; transition: transform var(--dur-tick) var(--ease-instrument); }
.ctl input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; background: var(--ice); border: 1.5px solid var(--ice-ink); border-radius: 0; }
.ctl input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.2); }
.ctl input[type="range"]:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.hero-frame .ei-frame__hud { left: auto; right: var(--space-4); transition: opacity var(--dur-move) var(--ease-instrument), transform var(--dur-move) var(--ease-instrument); max-width: calc(100% - 2 * var(--space-4)); }
.hero-frame .ei-frame__hud.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
.hero-frame .ei-frame__hud[data-state="selected"] b:first-child { color: var(--ice-ink); }
.ei-frame__overlay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* Clash datums over the model: the brand mark, in the state's colour */
.datum { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; transform: scale(0); transition: transform var(--dur-move) var(--ease-instrument), opacity var(--dur-move) var(--ease-instrument); pointer-events: auto; cursor: default; }
.datum.is-in { transform: scale(1); }
.datum--resolved { opacity: 0.72; }
.datum--resolved:hover { opacity: 1; }
.datum.is-behind { visibility: hidden; }
.datum svg { width: 100%; height: 100%; overflow: visible; }
.datum .ring, .datum .tick { fill: none; stroke: var(--laser); stroke-width: 1.5; stroke-linecap: round; transition: stroke var(--dur-tick) var(--ease-instrument); }
.datum .dot { fill: var(--laser); transition: fill var(--dur-tick) var(--ease-instrument); }
.datum--resolved .ring, .datum--resolved .tick { stroke: var(--resolved); }
.datum--resolved .dot { fill: var(--resolved); }
.datum__id { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--laser-ink); white-space: nowrap; transition: opacity var(--dur-tick) var(--ease-instrument); }
.datum--resolved .datum__id { color: var(--resolved-ink); opacity: 0; }
.datum--resolved:hover .datum__id { opacity: 1; }
.dim { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font: 400 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-muted); background: var(--surface-200); padding: 2px var(--space-1); opacity: 0; transition: opacity var(--dur-move) var(--ease-instrument); white-space: nowrap; }
.dim.is-in { opacity: 1; }
.dim.is-behind { visibility: hidden; }

/* Keys row under the model */
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-top: var(--stroke-hair) solid var(--line); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 1180px) { .keys { gap: var(--space-2) var(--space-3); } }
.keys button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; transition: color var(--dur-tick) var(--ease-instrument); }
.keys button:hover, .keys button:focus-visible { color: var(--ink); }
.keys button:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.keys kbd { font: 500 11px/1 var(--font-mono); padding: 3px 5px; border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); color: var(--ink); transition: border-color var(--dur-tick) var(--ease-instrument), background-color var(--dur-tick) var(--ease-instrument); }
.keys button:hover kbd { border-color: var(--ink); }
.keys button.is-off { color: var(--ink-faint); }
.keys button.is-off kbd { color: var(--ink-faint); border-color: var(--line); }

/* The statement */
.statement { display: grid; gap: var(--space-6); align-content: center; }
.statement h1 { margin: 0; font: 600 clamp(44px, 5.6vw, 80px)/0.95 var(--font-sans); letter-spacing: -0.03em; text-wrap: balance; }
.statement h1 em { font-style: normal; }
.w--hot { color: var(--laser); }
.statement .lead { margin: 0; font: 400 17px/1.5 var(--font-sans); color: var(--ink-muted); max-width: 42ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* The statement is set out like every heading (type.css): each word rises onto the line as a pencil outline and snaps
   to true, then the ink follows across the words in order. The hot word inks in the laser. */
.w { display: inline-block; opacity: 0; translate: 0 0.45em; color: transparent; -webkit-text-stroke: var(--stroke-hair) var(--ink-faint); paint-order: stroke fill;
  --wd: calc(var(--i, 0) * var(--dur-tick) * 0.6);
  transition: opacity var(--dur-move) var(--ease-instrument) var(--wd), translate calc(var(--dur-move) * 3) var(--ease-instrument) var(--wd), color var(--dur-draw) var(--ease-draw) calc(var(--wd) + var(--dur-move) * 2), -webkit-text-stroke-color var(--dur-draw) var(--ease-draw) calc(var(--wd) + var(--dur-move) * 2); }
.is-in .w { opacity: 1; translate: none; color: var(--ink); -webkit-text-stroke-color: transparent; }
.is-in .w--hot { color: var(--laser); }
.fade { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-draw) var(--ease-instrument), transform var(--dur-draw) var(--ease-instrument); transition-delay: var(--d, 0ms); }
.is-in .fade { opacity: 1; transform: none; }
.readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 479px) { .readouts { grid-template-columns: 1fr 1fr; } .readouts .ei-readout:last-child { grid-column: 1 / -1; } }
@media (max-width: 1180px) { .ei-readout__value { font-size: 36px; } .ei-readout__value small { font-size: 18px; } }
html.is-still .w, html.is-still .fade { transition: none; opacity: 1; filter: none; transform: none; translate: none; }
html.is-still .w { color: var(--ink); -webkit-text-stroke-color: transparent; }
html.is-still .w--hot { color: var(--laser); }
html.is-still .datum, html.is-still .dim, html.is-still .ei-frame__hud { transition: none; }

/* Benches below the first screen */
.benches { padding-block: var(--space-16); border-top: var(--stroke-hair) solid var(--line); }
.benches__grid { display: grid; gap: var(--space-6); }
@media (min-width: 860px) { .benches__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--surface-100); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-1); align-content: start; }
.card .ill { width: 100%; height: 120px; }
.ill path, .ill circle, .ill line, .ill rect, .ill polyline { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ill .hot { stroke: var(--laser); }
.ill .ok { stroke: var(--resolved); }
.ill .sys { stroke: var(--nerve); stroke-width: 2.5; }
.ill text { font: 500 30px var(--font-mono); fill: var(--ink); stroke: none; }
.card h2 { margin: 0; font: 600 28px/1.15 var(--font-sans); letter-spacing: -0.015em; text-wrap: balance; }
.card p { margin: 0; color: var(--ink-muted); }
.card .ei-line { margin-top: var(--space-2); }
.card .ei-line__fig { font-size: 15px; }
.card .ei-line__row .title { font-size: 15px; }
.note { font: 400 13px/1.45 var(--font-sans); color: var(--ink-faint); }

/* Footer: the sheet's title block */
.ftr { border-top: var(--stroke-hair) solid var(--line); padding-block: var(--space-12); }
.ftr__in { display: grid; gap: var(--space-6); }
@media (min-width: 860px) { .ftr__in { grid-template-columns: auto 1fr auto; align-items: center; } }
.lockup { height: 28px; width: auto; }
.lockup { overflow: visible; }
.lockup .lk-ring, .lockup .lk-tick { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.lockup .lk-tick { stroke-linecap: round; }
.lockup .lk-pt { fill: var(--laser); }
.sheet { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.sheet b { color: var(--ink); font-weight: 500; }
.theme { display: inline-flex; gap: var(--space-2); }
.theme .ei-btn[aria-pressed="true"] { color: var(--ink); background: var(--surface-200); }