/* ===========================================================================
   InkCurity 2.0 — one stylesheet for the whole site
   Identity from InkCurity: deep sea-blue ink, one splash of light, hairlines,
   mono for meta, keys instead of lozenges, glows instead of drop shadows.
   Manners from Trumpf: calm first, one signature moment per screen, two
   motion curves, feedback under 200 ms, caps only in mono labels.
   No external resources. Fonts are self-hosted (SIL OFL, see /assets/fonts).
   =========================================================================== */

/* ---- Fonts --------------------------------------------------------------- */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("/assets/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("/assets/fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;
  src:url("/assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;
  src:url("/assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---- Tokens -------------------------------------------------------------- */
/* Layout: one 1120 px column, prose at 680 px, groups on deep ink, the page on void. */
:root{
  color-scheme:dark;

  /* Ink, outside in */
  --void:#040b18;          /* page */
  --deep:#091629;          /* groups, cards */
  --raised:#0f1e35;        /* hover, popovers */
  --float:#132541;         /* sheets, toasts */
  --well:#06101f;          /* terminal, code */

  /* Hairlines */
  --line:#1a2d49;
  --line-soft:rgba(120,165,230,.11);
  --line-strong:#2a4568;
  --edge:#4a6a96;          /* control edges, 3:1 */

  /* Fills on ink */
  --fill:rgba(130,175,240,.07);
  --fill-strong:rgba(130,175,240,.12);
  --fill-pressed:rgba(130,175,240,.17);

  /* Text: hi titles, fg body (14:1 on deep), mute hints (6.5:1), faint glyphs only */
  --hi:#ffffff;
  --fg:#dce5f2;
  --mute:#8aa4c8;
  --faint:#4f6a8e;

  /* The splash: one accent. Switchable by the terminal (theme …). */
  --accent:#5cc8ff;
  --accent-rgb:92,200,255;
  --accent-hover:#7dd4ff;
  --accent-text:#8fd6ff;
  --on-accent:#031021;
  --electric:#2f4dff;
  --electric-rgb:47,77,255;
  --wash:rgba(var(--accent-rgb),.13);
  --wash-strong:rgba(var(--accent-rgb),.2);

  /* Status, always with a word or a glyph */
  --ok:#4ade80;
  --warn:#f8e16c;
  --danger:#ff5577;
  --danger-rgb:255,85,119;
  --magenta:#ff3d8e;       /* guest star: once per screen */
  --gold:#f5c84c;

  /* Paper: the rare light surface (receipt, envelope, print) */
  --paper:#f4f1e8;
  --paper-soft:#eae6d8;
  --paper-line:#d6cfb8;
  --paper-ink:#0e1124;
  --paper-mute:#545b7a;    /* 5.6:1 on paper */

  /* Type */
  --font-display:"Space Grotesk","Geist",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;

  /* Space (4 pt) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:28px;--s8:32px;
  --s10:40px;--s12:48px;--s16:64px;--s20:80px;--s24:96px;

  /* Shape: keys 10, groups 14, panels 16, signature cards 22, sheets 28 */
  --r-sm:6px;--r-key:10px;--r-card:14px;--r-panel:16px;--r-sig:22px;--r-sheet:28px;--r-full:999px;

  /* Depth: glows replace drop shadows; floating things get a hairline,
     a soft shadow underneath and lamp light in the splash. */
  --highlight:inset 0 1px 0 rgba(255,255,255,.045);
  --glow-sm:0 0 24px -6px rgba(var(--accent-rgb),.5);
  --glow-md:0 0 0 1px rgba(var(--accent-rgb),.22),0 0 40px -8px rgba(var(--accent-rgb),.5);
  --shadow-float:0 0 0 1px var(--line-strong),0 18px 40px -12px rgba(0,0,0,.72),0 24px 60px -30px rgba(var(--accent-rgb),.2);
  --shadow-sheet:0 0 0 1px var(--line-strong),0 32px 80px -20px rgba(0,0,0,.85),0 30px 90px -40px rgba(var(--accent-rgb),.24);

  /* Motion: Trumpf's two curves, InkCurity's ease for hovers */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-ios:cubic-bezier(.32,.72,0,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.45,.64,1);
  --ease-exit:cubic-bezier(.55,0,1,.45);
  --dur-exit:120ms;--dur-press:180ms;--dur-fade:200ms;--dur-release:220ms;--dur-rise:260ms;
  --dur-control:300ms;--dur-step:340ms;--dur-push:420ms;--dur-toast:480ms;--dur-sheet:500ms;
  --dur-count:600ms;--dur-spin:900ms;--dur-flash:1200ms;
  --press:.97;

  /* Grain (fractal noise), used by the page and the signature cards */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Layout */
  --maxw:1120px;
  --prose:680px;
  --gutter:clamp(20px,4vw,40px);
  --nav-h:64px;
  --tab-h:64px;
}

/* Accent themes (terminal: theme …). The root carries data-accent. */
:root[data-accent="magenta"]{--accent:#ff3d8e;--accent-rgb:255,61,142;--accent-hover:#ff63a6;--accent-text:#ff8dbd;--on-accent:#1d0410}

/* Paper: the light edition, unlocked in the terminal (theme paper). */
:root[data-paper]{
  color-scheme:light;
  --void:#f4f1e8;--deep:#fbf9f3;--raised:#efeadb;--float:#fffdf8;--well:#ece7d8;
  --line:#ddd5bf;--line-soft:rgba(14,17,36,.08);--line-strong:#c9bfa3;--edge:#8f8565;
  --fill:rgba(14,17,36,.045);--fill-strong:rgba(14,17,36,.08);--fill-pressed:rgba(14,17,36,.12);
  --hi:#0b0e1f;--fg:#1b2036;--mute:#545b7a;--faint:#9a927a;
  --accent:#0b62c4;--accent-rgb:11,98,196;--accent-hover:#0a56ad;--accent-text:#0a56ad;--on-accent:#ffffff;
  --highlight:inset 0 1px 0 rgba(255,255,255,.7);
  --shadow-float:0 0 0 1px var(--line),0 18px 40px -16px rgba(60,48,20,.28);
  --shadow-sheet:0 0 0 1px var(--line),0 30px 80px -24px rgba(60,48,20,.36);
}
/* Magenta on paper: the accent switch works in both modes (4.6 to 5.6 : 1 on every paper surface) */
:root[data-paper][data-accent="magenta"]{--accent:#c0265f;--accent-rgb:192,38,95;--accent-hover:#a91f52;--accent-text:#a91f52;--on-accent:#fff}

/* ---- Reset / base -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  background-color:var(--void);
  scrollbar-color:var(--line-strong) var(--void);
  hanging-punctuation:first;
}
body{
  min-height:100vh;min-height:100dvh;
  background:var(--void);color:var(--fg);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  font-feature-settings:"ss01" 0;
}
img,svg,video,canvas{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:rgba(var(--accent-rgb),.32);color:var(--hi)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.08;letter-spacing:-.025em;color:var(--hi);text-wrap:balance}
p,li{text-wrap:pretty}
strong,b{font-weight:600;color:var(--hi)}
kbd{font-family:var(--font-mono);font-size:.78em}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* Two languages live side by side; the root says which one shows. */
:root[data-lang="en"] [data-l="de"],
:root:not([data-lang="en"]) [data-l="en"]{display:none!important}

.skip{
  position:fixed;z-index:200;left:max(12px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 12px);
  padding:.7rem 1rem;border-radius:var(--r-key);background:var(--float);color:var(--hi);
  box-shadow:var(--shadow-float);font-size:.9375rem;
  transform:translateY(calc(-100% - 24px));transition:transform var(--dur-fade) var(--ease-soft);
}
.skip:focus{transform:none}

/* ---- Atmosphere: one ink bloom, a breath of grain ------------------------ */
.atmo{position:fixed;inset:-20vh 0;z-index:0;pointer-events:none;overflow:hidden}
.atmo::before{
  content:"";position:absolute;left:-12vw;top:12vh;width:min(980px,110vw);height:720px;
  background:radial-gradient(closest-side,rgba(var(--accent-rgb),.13),rgba(var(--accent-rgb),.05) 45%,transparent 72%);
  transform:translate3d(0,0,0);
}
.atmo::after{
  content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
:root[data-paper] .atmo::after{opacity:.09;mix-blend-mode:multiply}
.app{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.app > main{flex:1 0 auto}

/* ---- Layout -------------------------------------------------------------- */
.wrap{
  width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left,0px));
  padding-right:max(var(--gutter),env(safe-area-inset-right,0px));
}
.prose-col{max-width:var(--prose)}
.page-head{padding-block:clamp(48px,9vw,96px) clamp(24px,4vw,40px)}
.stack{display:flex;flex-direction:column}
.section{padding-block:clamp(40px,7vw,72px)}
.section--tight{padding-block:clamp(24px,4vw,40px)}

/* ---- Labels: the only place for capitals --------------------------------- */
.eyebrow,.overline,.label,.meta{
  font-family:var(--font-mono);text-transform:uppercase;font-weight:500;
  font-variant-numeric:tabular-nums;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.65rem;flex-wrap:wrap;
  font-size:.75rem;line-height:1.4;letter-spacing:.18em;color:var(--mute);
}
.eyebrow::before{content:"";flex:none;width:6px;height:12px;border-radius:1px;background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.7)}
.eyebrow .sep{color:var(--faint)}
/* long eyebrows (privacy, imprint): on phones the date gets its own line instead of a dangling dot */
@media (max-width:479px){
  .eyebrow--stack{row-gap:4px}
  .eyebrow--stack .sep{display:none}
  .eyebrow--stack .sep ~ *{flex-basis:100%;padding-left:calc(6px + .65rem)}
}
.overline{font-size:.6875rem;line-height:1.3;letter-spacing:.16em;font-weight:600;color:var(--mute)}
.label{font-size:.6875rem;letter-spacing:.18em;color:var(--mute)}
.meta{font-size:.6875rem;letter-spacing:.16em;color:var(--mute)}

/* Code comments instead of handwriting */
.note{
  display:block;font-family:var(--font-mono);font-size:.8125rem;line-height:1.5;
  color:var(--mute);letter-spacing:0;
}
.note::before{content:"// ";content:"// " / "";color:var(--accent)}

/* Display type */
.display-xl{font-size:clamp(2.6rem,1.4rem + 5.4vw,5.4rem);line-height:1.01;letter-spacing:-.04em;font-weight:500}
.display-l{font-size:clamp(2.35rem,1.6rem + 3.2vw,3.9rem);line-height:1.03;letter-spacing:-.035em;font-weight:500}
.title-1{font-size:clamp(1.6rem,1.3rem + 1vw,1.95rem);line-height:1.12;letter-spacing:-.025em;font-weight:500}
.title-2{font-size:1.375rem;line-height:1.2;letter-spacing:-.02em;font-weight:500}
.title-3{font-size:1.25rem;line-height:1.25;letter-spacing:-.015em;font-weight:600;font-family:var(--font-body)}
.lead{font-size:clamp(1.125rem,1.05rem + .35vw,1.3rem);line-height:1.55;color:var(--mute);max-width:58ch}
.lead b,.lead strong{color:var(--fg);font-weight:500}
.hint{font-size:.8125rem;line-height:1.4;color:var(--mute)}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono)}
.accent{color:var(--accent-text)}

/* Blinking cursor, the brand's literal heartbeat */
.cursor{
  display:inline-block;width:.42em;height:.86em;margin-left:.08em;vertical-align:-.04em;
  background:var(--accent);border-radius:1px;box-shadow:0 0 18px rgba(var(--accent-rgb),.55);
  animation:blink 1.06s steps(1,end) infinite;
}
@keyframes blink{50%{opacity:0}}

/* ---- Navigation ---------------------------------------------------------- */
.nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  view-transition-name:nav;
  background:rgba(4,11,24,.72);
  -webkit-backdrop-filter:saturate(160%) blur(20px);backdrop-filter:saturate(160%) blur(20px);
  border-bottom:1px solid var(--line-soft);
}
:root[data-paper] .nav{background:rgba(244,241,232,.82)}
.nav__in{display:flex;align-items:center;gap:var(--s6);height:var(--nav-h)}
.brand{display:inline-flex;align-items:center;gap:.65rem;min-width:0;color:var(--hi);font-family:var(--font-mono);font-weight:500;font-size:1.1875rem;letter-spacing:-.015em}
.brand img{width:30px;height:30px;flex:none;border-radius:8px;filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.28))}
.brand__word{white-space:nowrap}
.brand__ink{display:inline-block;font-weight:500;cursor:pointer;transform-origin:50% 100%}
.brand__c{color:var(--accent-text)}
.nav__links{display:flex;align-items:center;gap:var(--s1);margin-left:auto}
.nav__links a{
  position:relative;padding:.5rem .8rem;border-radius:var(--r-key);
  font-size:.9375rem;font-weight:500;color:var(--mute);
  transition:color var(--dur-fade) var(--ease),background-color var(--dur-fade) var(--ease);
}
.nav__links a:hover{color:var(--fg);background:var(--fill)}
.nav__links a[aria-current="page"]{color:var(--hi)}
.nav__links a[aria-current="page"]::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:-12px;height:2px;border-radius:2px;
  background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.8);
}
.nav__tools{display:flex;align-items:center;gap:var(--s2)}
.live{
  display:inline-flex;align-items:center;gap:.5rem;height:32px;padding:0 .75rem;border-radius:var(--r-full);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--ok);background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.26);
  transition:background-color var(--dur-fade) var(--ease),transform var(--dur-press) var(--ease-soft);
  white-space:nowrap;
}
.live:hover{background:rgba(74,222,128,.13)}
:root[data-paper] .live:not(.night){color:#0f6b30;border-color:rgba(15,107,48,.3)}
:root[data-paper] .live:not(.night) .live__dot{background:#16a34a;box-shadow:0 0 8px rgba(22,163,74,.6)}
.live:active{transform:scale(var(--press))}
.live__dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{50%{opacity:.35}}
.live.poked .live__dot{animation:poke .6s var(--ease-soft)}
@keyframes poke{40%{transform:scale(2.2)}}
.iconbtn{
  display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--r-key);color:var(--mute);
  transition:background-color var(--dur-fade) var(--ease),color var(--dur-fade) var(--ease),transform var(--dur-press) var(--ease-soft);
}
.iconbtn:hover{background:var(--fill);color:var(--fg)}
.iconbtn:active{transform:scale(var(--press))}
.iconbtn svg{width:19px;height:19px}
.cmdk{
  display:inline-flex;align-items:center;gap:.45rem;height:32px;padding:0 .6rem 0 .55rem;border-radius:var(--r-key);
  border:1px solid var(--line);color:var(--mute);font-family:var(--font-mono);font-size:.75rem;
  transition:border-color var(--dur-fade) var(--ease),color var(--dur-fade) var(--ease),background-color var(--dur-fade) var(--ease);
}
.cmdk:hover{border-color:var(--line-strong);color:var(--fg);background:var(--fill)}
.cmdk svg{width:15px;height:15px}
.cmdk kbd{color:var(--mute)}
.seg{
  display:inline-flex;padding:2px;border-radius:var(--r-key);background:var(--fill);border:1px solid var(--line-soft);
}
.seg button{
  min-width:34px;height:26px;padding:0 .5rem;border-radius:8px;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;font-weight:600;color:var(--mute);
  transition:background-color var(--dur-control) var(--ease-soft),color var(--dur-fade) var(--ease);
}
.seg button[aria-pressed="true"]{background:var(--raised);color:var(--hi);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 2px 8px rgba(0,0,0,.35)}
:root[data-paper] .seg button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 4px rgba(60,48,20,.18)}
.seg button:not([aria-pressed="true"]):hover{color:var(--fg)}

/* The scan line under the nav: a radar sweep, transform only */
.scan{position:absolute;left:0;right:0;bottom:-1px;height:1px;overflow:hidden;pointer-events:none}
.scan::before{
  content:"";position:absolute;top:0;left:0;width:200%;height:1px;
  background:linear-gradient(90deg,transparent 0 30%,rgba(var(--accent-rgb),.0) 34%,rgba(var(--accent-rgb),.9) 41%,rgba(var(--accent-rgb),.0) 48%,transparent 52% 100%);
  animation:scan 9s linear infinite;
}
@keyframes scan{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* Mobile tab bar: floating material, Trumpf-style */
.tabbar{display:none}
@media (max-width:767px){
  .nav__links,.nav .cmdk{display:none}
  html{scroll-padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 22px)}
  .nav__in{gap:var(--s3)}
  .nav__tools{margin-left:auto}
  /* a veil under the floating bar: text no longer runs sharp beside and below it.
     It lies under the footer (z 38 < 39), which brings its own veil in --foot-bg (Footer · Schleier, Z22) */
  :root{--veil-h:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 28px)}
  .app::after{content:"";position:fixed;left:0;right:0;bottom:0;height:var(--veil-h);background:linear-gradient(to top,var(--void) 30%,transparent);pointer-events:none;z-index:38}
  .tabbar{
    position:fixed;z-index:45;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));
    bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
    view-transition-name:tabbar;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:var(--tab-h);padding:6px;border-radius:24px;
    background:rgba(15,30,53,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
    box-shadow:0 0 0 1px var(--line-strong),0 18px 40px -10px rgba(0,0,0,.75);
  }
  :root[data-paper] .tabbar{background:rgba(255,253,248,.86)}
  .tabbar a,.tabbar button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:18px;
    font-size:.625rem;font-weight:500;letter-spacing:.01em;color:var(--mute);
    transition:color var(--dur-fade) var(--ease),background-color var(--dur-fade) var(--ease),transform var(--dur-press) var(--ease-soft);
  }
  .tabbar svg{width:23px;height:23px;stroke-width:1.8}
  .tabbar [aria-current="page"]{color:var(--accent-text);background:var(--wash)}
  .tabbar [aria-current="page"] svg{stroke-width:2.3}
  .tabbar a:active,.tabbar button:active{transform:scale(.94)}
  /* the room for the bar is the footer's bottom padding (Footer D · Schwelle), so its surface runs on under the bar */
}

/* ---- Keys (buttons) ------------------------------------------------------ */
.keys{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.key{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:46px;padding:.7rem 1.15rem;
  border-radius:var(--r-key);border:1px solid transparent;
  font-family:var(--font-body);font-size:.9688rem;font-weight:500;letter-spacing:-.01em;line-height:1.2;
  transition:transform var(--dur-press) var(--ease-soft),background-color var(--dur-fade) var(--ease),border-color var(--dur-fade) var(--ease),color var(--dur-fade) var(--ease),box-shadow var(--dur-fade) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.key svg{width:18px;height:18px;flex:none}
.key:active{transform:scale(var(--press))}
.key--fill{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 32px -14px rgba(var(--accent-rgb),.9),var(--highlight)}
.key--fill:hover{background:var(--accent-hover);box-shadow:0 12px 40px -12px rgba(var(--accent-rgb),.95)}
.key--tint{background:var(--wash);color:var(--accent-text)}
.key--tint:hover{background:var(--wash-strong)}
.key--line{border-color:var(--line-strong);color:var(--fg)}
.key--line:hover{border-color:var(--edge);background:var(--fill)}
.key--plain{color:var(--mute);padding-inline:.4rem;font-family:var(--font-mono);font-size:.8438rem;letter-spacing:0}
.key--plain:hover{color:var(--fg)}
.key--white{background:#fff;color:#0a2a6b;box-shadow:0 10px 26px -10px rgba(0,0,0,.55)}
.key--glass{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.key--glass:hover{background:rgba(255,255,255,.16)}
.key--white:hover{background:#f1f7ff}
.key--danger{background:rgba(var(--danger-rgb),.12);color:#ff8ea4}
.key--danger:hover{background:rgba(var(--danger-rgb),.18)}
.key--sm{min-height:36px;padding:.45rem .8rem;font-size:.875rem}

/* ---- Grouped lists (Trumpf ListSection on ink) --------------------------- */
.group + .group{margin-top:var(--s7)}
.group__h{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  margin:0 0 var(--s2) var(--s4);font-family:var(--font-body);font-size:.8125rem;font-weight:500;letter-spacing:0;color:var(--mute);line-height:1.4;
}
.group__h .meta{margin-right:var(--s4)}
.list{
  list-style:none;padding:0;margin:0;border-radius:var(--r-card);overflow:hidden;
  background:var(--deep);box-shadow:0 0 0 1px var(--line-soft),var(--highlight);
}
.list > li{position:relative}
.list > li + li::before{content:"";position:absolute;top:0;right:0;left:var(--inset,16px);height:1px;background:var(--line-soft);z-index:1}
.list--tiles{--inset:62px}
.row{
  display:flex;align-items:center;gap:14px;min-height:60px;width:100%;padding:12px 16px;text-align:left;
  transition:background-color var(--dur-release) var(--ease);
}
a.row,button.row{cursor:pointer}
a.row:hover,button.row:hover{background:var(--fill)}
a.row:active,button.row:active{background:var(--fill-pressed);transition-duration:0ms}
.row:focus-visible{outline-offset:-2px;border-radius:var(--r-card)}
.row__text{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;gap:1px}
.row__title{font-size:1rem;font-weight:500;color:var(--fg);line-height:1.35;letter-spacing:-.01em}
.row__hint{font-size:.8125rem;line-height:1.4;color:var(--mute)}
.row__value{font-size:.9375rem;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.row .chev{width:16px;height:16px;flex:none;color:var(--faint);stroke-width:2.5;transition:transform var(--dur-press) var(--ease-soft),color var(--dur-fade) var(--ease)}
a.row:hover .chev,button.row:hover .chev{color:var(--mute);transform:translateX(2px)}
.row .ext{width:15px;height:15px;flex:none;color:var(--faint);stroke-width:2.2}
.tile{
  display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:8px;
  background:var(--wash);color:var(--accent-text);
}
.tile svg{width:19px;height:19px;stroke-width:2.1}
.tile--ok{background:rgba(74,222,128,.12);color:var(--ok)}
.tile--danger{background:rgba(var(--danger-rgb),.13);color:#ff8ea4}
.tile--gold{background:rgba(245,200,76,.13);color:var(--gold)}
.tile img{width:32px;height:32px;border-radius:8px}

/* Danger zone: red-tinted, last on the page */
.group--danger .group__h{color:#ff8ea4}
.group--danger .list{background:linear-gradient(rgba(var(--danger-rgb),.07),rgba(var(--danger-rgb),.07)),var(--deep);box-shadow:inset 0 0 0 1px rgba(var(--danger-rgb),.22)}
.group--danger .row__title{color:#ff8ea4}
:root[data-paper] .group--danger .group__h,:root[data-paper] .group--danger .row__title{color:#c0213f}

/* ---- Badges / tags ------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;height:22px;padding:0 .55rem;border-radius:var(--r-full);
  font-family:var(--font-mono);font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:var(--b,var(--mute));background:rgba(var(--b-rgb,138,164,200),.1);box-shadow:inset 0 0 0 1px rgba(var(--b-rgb,138,164,200),.28);
}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.badge--live{--b:var(--ok);--b-rgb:74,222,128}
:root[data-paper] .badge--live{--b:#0f6b30;--b-rgb:15,107,48}
:root[data-paper] .tile--ok{color:#16803c;background:rgba(22,128,60,.1)}
.badge--dev{--b:var(--warn);--b-rgb:248,225,108}
.badge--ship{--b:var(--accent-text);--b-rgb:var(--accent-rgb)}
.badge--arch{--b:var(--mute);--b-rgb:138,164,200}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  display:inline-flex;align-items:center;height:28px;padding:0 .7rem;border-radius:var(--r-full);
  font-size:.8125rem;font-weight:500;color:var(--fg);background:var(--fill-strong);
}

/* ---- Cards (plain) ------------------------------------------------------- */
.card{
  position:relative;border-radius:var(--r-card);background:var(--deep);padding:var(--s6);
  box-shadow:0 0 0 1px var(--line-soft),var(--highlight);
}

/* ---- Hero (home) --------------------------------------------------------- */
.hero{padding-block:clamp(56px,11vw,128px) clamp(32px,5vw,56px);position:relative}
.hero .eyebrow{margin-bottom:var(--s6)}
.hero h1{max-width:13.5ch}
.hero .lead{margin-top:var(--s7)}
.hero .keys{margin-top:var(--s8)}
.hero .note{margin-top:var(--s6)}
.ink-word{position:relative;display:inline-block;color:var(--accent-text);white-space:nowrap}
:root.intro .hero-rise{animation:rise .7s var(--ease-soft) both}
:root.intro .hero-rise:nth-child(2){animation-delay:60ms}
:root.intro .hero-rise:nth-child(3){animation-delay:120ms}
:root.intro .hero-rise:nth-child(4){animation-delay:180ms}
:root.intro .hero-rise:nth-child(5){animation-delay:240ms}
@keyframes rise{from{opacity:.001;transform:translateY(10px)}}

/* ---- Live card "Gerade dran" (home signature) ----------------------------
   The one lit block of the start page: ink under a bloom of splash and
   electric blue, fine grain, an edge that catches the light (the same card
   as on cloud.inkcurity.net). */
.livecard,.herocard{
  position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-sig);color:#eaf1fb;
  padding:clamp(22px,3.5vw,36px);
  background-color:#0b1c36;
  background-image:
    radial-gradient(130% 80% at 0% 0%,rgba(var(--accent-rgb),.26),transparent 62%),
    radial-gradient(110% 75% at 100% 0%,rgba(var(--electric-rgb),.36),transparent 64%);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.32),inset 0 1px 0 rgba(255,255,255,.08),0 30px 70px -30px rgba(var(--accent-rgb),.5);
}
:root[data-morph-skat] .livecard,:root[data-morph-skat] .herocard{view-transition-name:skat}
.livecard::before,.herocard::before{ /* grain */
  content:"";position:absolute;inset:0;z-index:-1;opacity:.06;pointer-events:none;
  background-image:var(--grain);background-size:160px 160px;
}
.livecard::after,.herocard::after{ /* lit top edge */
  content:"";position:absolute;left:8%;right:8%;top:0;height:1px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.9) 30%,rgba(255,255,255,.9) 50%,rgba(var(--accent-rgb),.9) 70%,transparent);
  opacity:.7;
}
.livecard{min-height:340px}
.livecard__light{ /* slow lamp drift, transform only */
  position:absolute;z-index:-1;width:60%;aspect-ratio:1;left:-14%;top:-55%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),0));
  animation:drift 16s var(--ease) infinite alternate;
}
@keyframes drift{to{transform:translate3d(22%,18%,0) scale(1.12)}}
.livecard__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:stretch}
.livecard .overline,.herocard .overline{color:rgba(234,241,251,.72)}
.livecard h2,.herocard h2{color:#fff;margin-top:var(--s3)}
.livecard__sub{margin-top:var(--s3);color:#c3d3ea;font-size:1rem;max-width:44ch}
.livecard__facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s5)}
.livecard__facts > span,.herocard .chip{
  display:inline-flex;align-items:center;height:28px;padding:0 .7rem;border-radius:var(--r-full);
  background:rgba(255,255,255,.08);color:#eaf1fb;font-size:.8125rem;font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.livecard .keys{margin-top:var(--s7)}
.livecard__chart{position:relative;display:flex;flex-direction:column;gap:var(--s2);min-height:200px;padding:var(--s4);border-radius:var(--r-card);background:rgba(2,8,20,.32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.livecard__chart svg{width:100%;height:auto;overflow:visible;margin-top:auto}
.livecard__chart .cap{display:flex;justify-content:space-between;gap:var(--s3);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;color:#a9c3e3}
.livecard__chart .head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.livecard__chart .big{font-family:var(--font-display);font-size:2.6rem;line-height:1;color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:6px}
.livecard__icon{flex:none;width:56px;height:56px;border-radius:13px;box-shadow:0 12px 24px -10px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12)}
.livecard__fan{flex:none;width:clamp(76px,9vw,96px);margin:-6px -4px 0 0;padding:0;border-radius:12px;cursor:pointer;filter:drop-shadow(0 10px 16px rgba(2,8,30,.55))}
.livecard__fan svg{width:100%;height:auto;overflow:visible}
.livecard__fan .c{transform-box:fill-box;transform-origin:50% 100%;transition:transform 700ms var(--ease-ios)}
.livecard__fan .c1{transform:rotate(-21deg)}.livecard__fan .c2{transform:rotate(-7deg)}.livecard__fan .c3{transform:rotate(7deg)}.livecard__fan .c4{transform:rotate(21deg)}
.livecard__fan .c2{transition-delay:80ms}.livecard__fan .c3{transition-delay:160ms}.livecard__fan .c4{transition-delay:240ms}
.livecard.fanned .livecard__fan .c1{transform:rotate(-40deg) translateY(-4px)}
.livecard.fanned .livecard__fan .c2{transform:rotate(-14deg) translateY(-9px)}
.livecard.fanned .livecard__fan .c3{transform:rotate(14deg) translateY(-9px)}
.livecard.fanned .livecard__fan .c4{transform:rotate(40deg) translateY(-4px)}
.spark-line{stroke:var(--accent-text)}
.spark-dot{fill:var(--accent-text)}
.spark-halo{fill:var(--accent)}
.spark-stop{stop-color:var(--accent)}
@media (max-width:760px){
  .livecard__grid{grid-template-columns:1fr}
  .livecard__chart{min-height:170px}
}

/* ---- Hero card (projects signature): same material as the live card --- */
.herocard .wm{position:absolute;z-index:-1;font-family:var(--font-body);line-height:1;color:rgba(234,241,251,.07);pointer-events:none;user-select:none;letter-spacing:-.06em}
.herocard .wm--a{font-size:64px;right:28px;top:22px;color:rgba(234,241,251,.1)}
.herocard .wm--b{font-size:64px;right:28px;top:92px;color:rgba(234,241,251,.07)}
@media (max-width:640px){.herocard .wm{font-size:40px}.herocard .wm--b{top:66px}}
.herocard__top{display:flex;align-items:center;gap:var(--s4)}
.herocard__icon{width:64px;height:64px;border-radius:15px;box-shadow:0 10px 24px -8px rgba(0,0,30,.6),0 0 0 1px rgba(255,255,255,.14)}
.herocard p{color:#c3d3ea;margin-top:var(--s4);max-width:62ch}
.herocard .chips{margin-top:var(--s5)}
.glassrow{
  display:flex;align-items:center;gap:var(--s3);width:100%;margin-top:var(--s6);padding:12px 14px;border-radius:var(--r-card);
  background:rgba(255,255,255,.08);color:#fff;text-align:left;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:background-color var(--dur-release) var(--ease);
}
.glassrow:hover{background:rgba(255,255,255,.13)}
.glassrow:active{background:rgba(255,255,255,.17);transition-duration:0ms}
.glassrow .row__hint{color:#a9c3e3}
.glassrow .row__title{color:#fff}
.glassrow .chev{width:16px;height:16px;flex:none;color:#a9c3e3;stroke-width:2.5;transition:transform var(--dur-press) var(--ease-soft)}
.glassrow:hover .chev{transform:translateX(2px)}

/* ---- Terminal ------------------------------------------------------------ */
.term{
  position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--well);
  box-shadow:0 0 0 1px var(--line),0 24px 60px -36px rgba(var(--accent-rgb),.45);
  font-family:var(--font-mono);font-size:.84rem;line-height:1.6;letter-spacing:0;color:var(--fg);
  cursor:text;
}
.term__bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:40px;padding:0 var(--s4);
  border-bottom:1px solid var(--line);color:var(--mute);font-size:.75rem;
}
.term__bar .ttl{display:inline-flex;align-items:center;gap:.6rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term__bar .ttl::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.8)}
.term__bar kbd{padding:2px 6px;border-radius:6px;border:1px solid var(--line);color:var(--faint)}
.term__body{padding:var(--s4) var(--s4) var(--s5);max-height:min(62vh,520px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.term__body p{white-space:pre-wrap;overflow-wrap:anywhere}
.term-line{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:.15rem 0;color:var(--mute)}
.term-cmd{color:var(--hi);margin-left:.45rem}
.term-out{margin:.05rem 0 .7rem;color:var(--fg)}
.term-out::before{content:"› ";color:var(--faint)}
.term-help{margin:.05rem 0 .7rem;color:var(--mute)}
.term-help b{color:var(--hi);font-weight:600}
.term-err{margin:.05rem 0 .7rem;color:#ff8ea4}
:root[data-paper] .term-err{color:#b4123a}
.term-ok{margin:.05rem 0 .7rem;color:var(--accent-text)}
.term-ascii{margin:.05rem 0 .7rem;color:var(--mute);white-space:pre!important;overflow-x:auto;overflow-wrap:normal!important}
.term-ascii b{color:var(--hi)}
.term-ascii .k{color:var(--accent-text)}
.term-log{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:1.25ch;row-gap:.2rem;margin:.05rem 0 .7rem;color:var(--fg)}
.term__body .term-log{white-space:normal}
.term-log > .d{grid-column:1/-1;margin-top:.6rem;color:var(--hi)}
.term-log > .d:first-child{margin-top:0}
.term-log > .k{color:var(--accent-text)}
.term-log > .m{min-width:0;overflow-wrap:anywhere}
.term-log > .c{grid-column:1/-1;margin-top:.6rem;color:var(--mute)}
.term-log > .c > span{color:var(--faint)}
.term a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.term .sw{display:inline-block;width:.7em;height:.7em;border-radius:50%;vertical-align:-.05em;margin-right:.25em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.term-form{display:flex;align-items:center;margin-top:.15rem}
.term-input{flex:1 1 auto;min-width:4ch;margin-left:.45rem;padding:0;border:0;outline:0;background:transparent;color:var(--hi);caret-color:var(--accent);font:inherit}
.term-input::placeholder{color:var(--faint)}
.term-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);margin-right:.5rem;vertical-align:.05em}
/* fish powerline prompt, Jan's own */
.pl{display:inline-flex;align-items:stretch;flex:none;line-height:1.5}
.pl .sg{display:inline-flex;align-items:center;padding:0 .5rem;font-size:.72rem;font-weight:600}
.pl .sg.vi{background:var(--ok);color:#052e14}
.pl .sg.us{background:var(--fg);color:#0b1426}
.pl .sg.us b{color:#3d4b66;font-weight:700}
.pl .sg.pa{background:var(--raised);color:var(--fg)}
.pl .sg.pa b{color:var(--hi)}
.pl .ch{width:0;border-top:.75em solid transparent;border-bottom:.75em solid transparent;border-left:.45em solid}
.pl .ch.vi{border-left-color:var(--ok)}
.pl .ch.us{border-left-color:var(--fg)}
.pl .ch.pa{border-left-color:var(--raised)}
:root[data-paper] .pl .sg.us{background:#1b2036;color:#f4f1e8}
:root[data-paper] .pl .sg.us b{color:#c7cbe0}
:root[data-paper] .pl .ch.us{border-left-color:#1b2036}

/* ---- Sheets (native dialog) ---------------------------------------------- */
dialog.sheet{
  position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:min(92dvh,920px);
  padding:0;border:0;border-radius:var(--r-sheet) var(--r-sheet) 0 0;background:var(--float);color:var(--fg);
  box-shadow:var(--shadow-sheet);overflow:hidden;display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform var(--dur-sheet) var(--ease-ios),overlay var(--dur-sheet) allow-discrete,display var(--dur-sheet) allow-discrete;
}
dialog.sheet:not([open]){display:none}
dialog.sheet[open]{transform:none}
@starting-style{dialog.sheet[open]{transform:translateY(100%)}}
dialog.sheet.closing{transform:translateY(100%);transition-duration:420ms;transition-timing-function:cubic-bezier(.36,.66,.04,1)}
dialog.sheet::backdrop{background:rgba(2,6,15,.62);opacity:1;transition:opacity var(--dur-sheet) var(--ease-ios),overlay var(--dur-sheet) allow-discrete,display var(--dur-sheet) allow-discrete}
@starting-style{dialog.sheet[open]::backdrop{opacity:0}}
dialog.sheet.closing::backdrop{opacity:0;transition-duration:380ms;transition-timing-function:var(--ease)}
.sheet__head{position:relative;display:flex;align-items:center;gap:var(--s3);padding:22px var(--s5) var(--s3);flex:none;touch-action:none;cursor:grab}
.sheet__head::before{content:"";position:absolute;left:50%;top:7px;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:rgba(138,164,200,.4)}
.sheet__title{flex:1 1 auto;min-width:0;font-family:var(--font-body);font-size:1.25rem;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--hi)}
.sheet__close{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--fill-strong);color:var(--mute);transition:background-color var(--dur-fade) var(--ease),transform var(--dur-press) var(--ease-soft)}
.sheet__close:hover{background:var(--fill-pressed);color:var(--fg)}
.sheet__close:active{transform:scale(.92)}
.sheet__close svg{width:14px;height:14px;stroke-width:2.6}
.sheet__body{overflow-y:auto;overscroll-behavior:contain;padding:var(--s2) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom,0px))}
.sheet__body > * + *{margin-top:var(--s5)}
.sheet__body .list{background:var(--raised)}
.sheet__foot{flex:none;padding:var(--s3) var(--s5) calc(var(--s4) + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-soft);background:rgba(19,37,65,.86);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
dialog.sheet--term .sheet__body{padding:0}
dialog.sheet--term .term{border-radius:0;box-shadow:none;background:transparent}
dialog.sheet--term .term__body{max-height:none;min-height:46vh;overflow:visible;overscroll-behavior:auto}
@media (min-width:768px){
  dialog.sheet{
    inset:0;margin:auto;width:min(560px,calc(100% - 48px));max-height:min(86vh,820px);height:fit-content;border-radius:var(--r-sheet);
    transform:translateY(24px) scale(.98);opacity:0;
    transition:transform var(--dur-sheet) var(--ease-ios),opacity 260ms var(--ease),overlay var(--dur-sheet) allow-discrete,display var(--dur-sheet) allow-discrete;
  }
  dialog.sheet[open]{transform:none;opacity:1}
  @starting-style{dialog.sheet[open]{transform:translateY(24px) scale(.98);opacity:0}}
  dialog.sheet.closing{transform:translateY(12px) scale(.97);opacity:0;transition-duration:260ms;transition-timing-function:var(--ease-ios)}
  dialog.sheet.closing::backdrop{transition-duration:240ms}
  dialog.sheet--wide{width:min(760px,calc(100% - 48px))}
  .sheet__head{cursor:default;padding-top:var(--s5)}
  .sheet__head::before{display:none}
}
/* Trumpf: on phones the page behind recedes like a card in a stack */
@media (max-width:767px){
  .app > main{transition:transform var(--dur-sheet) var(--ease-ios)}
  :root.recede .app > main{transform:translateY(10px) scale(.94)}
}

/* ---- Toasts -------------------------------------------------------------- */
.toasts{position:fixed;z-index:120;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 12px);display:grid;justify-items:center;pointer-events:none;padding-inline:16px}
.toast{
  pointer-events:auto;display:flex;align-items:center;gap:12px;width:min(400px,100%);padding:10px 10px 10px 12px;border-radius:var(--r-sig);
  background:rgba(19,37,65,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:var(--shadow-float);color:var(--fg);
  transform:translateY(-130%) scale(.96);opacity:0;transition:transform var(--dur-toast) var(--ease-ios),opacity 240ms var(--ease);
}
:root[data-paper] .toast{background:rgba(255,253,248,.92)}
.toast.in{transform:none;opacity:1}
.toast.out{transform:translateY(-130%) scale(.96);opacity:0;transition-duration:260ms}
.toast .tile{width:30px;height:30px}
.toast__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.toast__title{font-size:.9375rem;font-weight:600;color:var(--hi);line-height:1.3}
.toast__hint{font-size:.8125rem;color:var(--mute);line-height:1.35}
.toast__act{flex:none;height:34px;padding:0 .8rem;border-radius:var(--r-key);color:var(--accent-text);font-weight:600;font-size:.875rem;background:var(--wash)}
.toast__act:hover{background:var(--wash-strong)}
/* one message frame: new content swaps in place (Gestaltung r2 §1) */
.toast__stack{display:grid;flex:1 1 auto;min-width:0}
.toast__stack > .toast__text{grid-area:1/1}
.toast .tile{display:grid;place-items:center}
.toast .tile > svg{grid-area:1/1}
.toast__act{display:inline-grid;place-items:center}
.toast__lbl{grid-area:1/1;white-space:nowrap}
.toast [data-leave]{opacity:0;transform:translateY(-6px);transition:opacity var(--dur-exit) var(--ease),transform var(--dur-exit) var(--ease)}
.toast [data-enter]{opacity:0;transform:translateY(8px)}
.toast [data-enter="go"]{opacity:1;transform:none;transition:opacity var(--dur-fade) var(--ease) 80ms,transform var(--dur-rise) var(--ease-soft) 80ms}
.toast .tile > [data-leave],.toast .tile > [data-enter]{transform:scale(.6)}
.toast .tile > [data-enter="go"]{opacity:1;transform:none;transition:opacity var(--dur-fade) var(--ease) 80ms,transform var(--dur-control) var(--ease-spring) 80ms}
.toast__act > [data-leave],.toast__act > [data-enter]{transform:none}
.toast__act > [data-enter="go"]{transform:none;transition:opacity var(--dur-fade) var(--ease) 80ms}

/* ---- Footer: the D rules sit at the end of this file ---------------------- */
/* Redaction bars: decor, and a scratch card for the curious */
.bars{position:relative;display:inline-flex;gap:5px;align-items:center;height:22px;cursor:crosshair;touch-action:none;user-select:none}
.bars__msg{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;color:var(--accent-text);pointer-events:none}
.bars canvas{position:absolute;inset:0;width:100%;height:100%}

/* ---- Page: projects ------------------------------------------------------ */
.proj-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s10) var(--s8);margin-top:var(--s12);align-items:start}
.proj-grid > .group{margin-top:0}
@media (max-width:900px){.proj-grid{grid-template-columns:1fr}}

/* ---- Projects: the ink well, a lab for the splash engine (package 10c, B) --- */
.lab{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.35fr);grid-template-areas:"head fig" "ctrl fig";
  gap:var(--s6) clamp(32px,4.5vw,64px);align-content:center;margin-top:clamp(56px,7vw,88px);scroll-margin-top:calc(var(--nav-h) + 24px)}
.lab__head{grid-area:head;align-self:end;display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.lab__head .title-1{margin-top:2px}
.lab__lead{color:var(--mute);font-size:1rem;line-height:1.6;max-width:44ch}
.lab__controls{grid-area:ctrl;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4);min-width:0}

/* palettes: the existing .seg group, three colour dots per button */
.lab__pal{display:inline-flex;flex-wrap:nowrap;max-width:100%}
.lab__pal button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 .7rem}
.lab__sw{display:inline-flex;flex:none}
.lab__sw i{width:7px;height:7px;border-radius:50%;margin-left:-2px;box-shadow:0 0 0 1.5px var(--void)}
.lab__sw i:first-child{margin-left:0}
@media (pointer:coarse){.lab__pal button{height:44px}}

/* switch: a row with a 44 px target, track 44 × 26, thumb 20; fill and thumb colour through opacity */
.switch{display:flex;align-items:center;gap:var(--s3);min-height:44px;width:100%;text-align:left}
.switch__track{position:relative;flex:none;width:44px;height:26px;border-radius:var(--r-full);background:var(--fill-strong);box-shadow:inset 0 0 0 1px var(--line-strong)}
.switch__track::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);
  box-shadow:0 0 18px -4px rgba(var(--accent-rgb),.8);opacity:0;transition:opacity var(--dur-control) var(--ease-soft)}
.switch__thumb{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--mute);
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform var(--dur-control) var(--ease-soft)}
.switch__thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--on-accent);opacity:0;transition:opacity var(--dur-control) var(--ease-soft)}
.switch[aria-checked="true"] .switch__track::before{opacity:1}
.switch[aria-checked="true"] .switch__thumb{transform:translateX(18px)}
.switch[aria-checked="true"] .switch__thumb::after{opacity:1}
.switch__text{display:flex;flex-direction:column;gap:1px;min-width:0}
.switch__title{font-size:.9375rem;font-weight:500;color:var(--fg);line-height:1.35}
.switch__hint{font-size:.8125rem;color:var(--mute);line-height:1.4}
.switch[aria-disabled="true"]{cursor:not-allowed}
.switch[aria-disabled="true"] .switch__track{opacity:.45}
.switch[aria-disabled="true"] .switch__title{color:var(--mute)}
.switch:focus-visible{outline-offset:4px}
.lab__controls .note{margin-top:var(--s1)}

/* the well: a sunken surface, 16:10 next to the text, 4:3 on narrow screens */
.lab__fig{grid-area:fig;align-self:center;margin:0;min-width:0;display:flex;flex-direction:column;gap:var(--s3)}
.lab__well{position:relative;width:100%;aspect-ratio:16/10;min-height:260px;max-height:440px;
  border-radius:var(--r-panel);background:var(--well);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line-soft),inset 0 18px 40px -24px rgba(0,0,0,.65)}
:root[data-paper] .lab__well{box-shadow:inset 0 0 0 1px var(--line),inset 0 14px 30px -22px rgba(60,48,20,.28)}
.lab__well::before{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:160px;opacity:.04;pointer-events:none}
/* the whole well is one button (JS only); without JS or with reduced motion only the still remains */
.lab__tap{position:absolute;inset:0;display:grid;place-items:center;width:100%;border-radius:inherit;cursor:crosshair;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.lab__tap:focus-visible{outline:2px solid var(--accent);outline-offset:-5px;border-radius:var(--r-panel)}
.lab__tap:disabled{cursor:default}
.lab__hint{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.8125rem;color:var(--mute);
  transition:opacity var(--dur-fade) var(--ease);pointer-events:none}
.lab__hint::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px rgba(var(--accent-rgb),.8)}
.lab.is-used .lab__hint,.lab.is-still .lab__hint{opacity:0}
.lab__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
:root.js .lab:not(.is-still) .lab__still{display:none}
:root[data-paper] .lab__still{mix-blend-mode:multiply}

/* caption: the live line on the left, the source on the right; wraps instead of cutting off */
.lab__cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s2) var(--s4);padding-inline:2px}
.lab__stats{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.75rem;color:var(--mute);
  font-variant-numeric:tabular-nums;white-space:pre;min-width:0}
.lab__stats.lab__nojs{white-space:normal}
.lab__led{flex:none;width:6px;height:6px;border-radius:50%;background:var(--faint)}
.lab__stats.is-live{color:var(--fg)}
.lab__stats.is-live .lab__led{background:var(--ok);box-shadow:0 0 8px rgba(74,222,128,.7)}
.lab__stats.is-wake .lab__led{animation:poke .6s var(--ease-soft)}
:root[data-paper] .lab__stats.is-live .lab__led{background:#16a34a;box-shadow:0 0 8px rgba(22,163,74,.6)}
.lab__src{margin-left:auto;font-size:.8125rem;color:var(--mute);border-bottom:1px solid var(--line-strong)}
.lab__src:hover{color:var(--fg)}

@media (max-width:900px){
  .lab{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "fig" "ctrl";gap:var(--s5)}
  .lab__well{aspect-ratio:4/3}
}
@media (max-width:380px){
  .lab__pal{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .lab__pal button{justify-content:flex-start}
}
@media print{.lab{display:none!important}}

/* ---- Page: about — the OpenPGP smart card ---------------------------------
   ID-1 landscape (85.60 × 53.98 mm). One design at 340 × 214 design px,
   scaled as a whole through --u. Faces are flat; depth comes from the glow
   layer behind, never from shadows on 3D faces. */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "card" "contact";gap:0 clamp(32px,6vw,80px);align-items:start}
.about-head{grid-area:head;padding-bottom:0}
.about-head .display-l{margin-top:20px}
.about-lead{margin-top:var(--s6);color:var(--fg)}
.about-lead2{margin-top:var(--s4)}
a.inline{color:var(--accent-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a.inline:hover{color:var(--hi)}
.idstage{grid-area:card;position:relative;display:grid;justify-items:center;padding-block:var(--s6) var(--s2)}
.about-contact{grid-area:contact;margin-top:var(--s10)}
.about-foot{margin:var(--s3) var(--s4) 0}
@media (min-width:960px){
  .about-grid{grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr);grid-template-areas:"head card" "contact card"}
  .idstage{position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 16px);padding-top:clamp(56px,8vw,104px)}
}
/* ==========================================================================
   InkCurity 2.0 · the PGP smart card on /about/  (card.css)
   Replaces every card rule in ink.css (list in README.md). ID-1 landscape,
   85.60 × 53.98 mm, designed at 340 × 214 px and scaled through --u. Faces
   are flat; depth comes from the glow behind, never from shadows on 3D faces.
   Light: --lx/--ly (0 … 1) are written onto the moving layers only, and
   those layers move by transform (editionLight.ts in the Skat Tracker), so
   a drifting card is composited, never repainted.
   The back is the security side: fingerprint, randomart and a seal slot.
   Verifying speaks the material's language, not traffic-light green.
   ========================================================================== */

/* ---- stage ---------------------------------------------------------------- */
.idwrap{position:relative;display:grid;place-items:center;width:100%;padding:30px 0;perspective:1100px}
.idglow{position:absolute;left:50%;top:50%;width:min(340px,78%);aspect-ratio:85.6/53.98;border-radius:24px;transform:translate(-50%,-46%) rotate(-3deg);
  background:radial-gradient(closest-side,rgba(var(--accent-rgb),.62),rgba(var(--electric-rgb),.3) 62%,transparent);filter:blur(34px);opacity:.5;pointer-events:none}
.idwrap:has(.idcard[data-edition="holo"]) .idglow{border-radius:50%;background:conic-gradient(from 20deg,rgb(255 150 214 / .42),rgb(150 200 255 / .5),rgb(160 240 214 / .42),rgb(255 226 170 / .38),rgb(196 170 255 / .46),rgb(255 150 214 / .42))}
.idwrap:has(.idcard[data-edition="poly"]) .idglow{border-radius:50%;background:conic-gradient(from 115deg,rgb(255 96 170 / .45),rgb(255 214 72 / .4),rgb(64 210 255 / .45),rgb(150 108 255 / .45),rgb(255 96 170 / .45))}
.idwrap:has(.idcard[data-edition="silver"]) .idglow{background:radial-gradient(closest-side,rgb(206 220 240 / .62),rgb(70 80 96 / .3) 62%,transparent)}
.idwrap:has(.idcard[data-edition="gold"]) .idglow{background:radial-gradient(closest-side,rgb(255 196 70 / .7),rgb(140 90 10 / .34) 62%,transparent)}
/* on paper the card lies on ivory: it casts a soft shadow instead of glowing */
:root[data-paper] .idwrap .idglow,:root[data-paper] .idwrap:has(.idcard[data-edition]) .idglow{border-radius:24px;
  background:radial-gradient(closest-side,rgb(22 24 44 / .62),rgb(22 24 44 / .2) 62%,transparent);filter:blur(20px);opacity:.5;transform:translate(-50%,-38%) rotate(-3deg) scale(.96)}

/* ---- the card ------------------------------------------------------------- */
.idcard{
  --tilt:-3deg;--rx:0deg;--ry:0deg;
  --w:min(400px,calc(100vw - 2 * var(--gutter) - 28px));--u:calc(var(--w) / 340);
  /* the card keeps the theme's bright accent, also on paper (the page's paper blue is for ivory) */
  --acc:var(--accent);--acc-rgb:var(--accent-rgb);--acc-text:var(--accent-text);--on-acc:var(--on-accent);
  position:relative;display:block;width:var(--w);aspect-ratio:85.6/53.98;padding:0;border:0;border-radius:calc(14 * var(--u));
  background:none;color:#fff;font:inherit;text-align:left;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent;
  transform-style:preserve-3d;transform:rotate(var(--tilt)) rotateX(var(--rx)) rotateY(var(--ry));transition:transform 460ms var(--ease-spring);
}
/* (:where keeps this at the weight of .idcard, so an edition's own accent text still wins) */
:where(:root[data-paper]) .idcard{--acc:#5cc8ff;--acc-rgb:92,200,255;--acc-text:#8fd6ff;--on-acc:#031021}
:where(:root[data-paper][data-accent="magenta"]) .idcard{--acc:#ff3d8e;--acc-rgb:255,61,142;--acc-text:#ff8dbd;--on-acc:#1d0410}
.idcard.tilting{transition:transform 140ms var(--ease)}
.idcard:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.idcard__in{position:absolute;inset:0;display:block;border-radius:inherit;transform-style:preserve-3d;transform:rotateY(0deg)}
.idcard.flipped .idcard__in{transform:rotateY(180deg)}
.idface{
  position:absolute;inset:0;display:block;overflow:hidden;border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden;isolation:isolate;
  background:radial-gradient(90% 70% at 0% 0%,rgba(var(--acc-rgb),.22),transparent 60%),linear-gradient(150deg,#16294a 0%,#0f1e35 48%,#091629 100%);
  box-shadow:inset 0 0 0 calc(1.5 * var(--u)) rgba(var(--acc-rgb),.4);color:#fff;
}
.idface--back{transform:rotateY(180deg)}
.idface::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain);background-size:160px 160px;opacity:.1;mix-blend-mode:overlay}

/* ---- light: pre-rendered layers, moved by transform ------------------------
   .lt sits under the print, .ed over it (metal sheens, glints, frames). */
.idcard .lt{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.idcard .lt i{position:absolute;left:0;top:0;display:none;width:100%;height:100%;font-style:normal;will-change:transform}
/* the soft light of the ink card: a box twice the card's size, centred on the light */
.idcard .lt-spot{display:block;left:-100%;top:-100%;width:200%;height:200%;mix-blend-mode:screen;
  background:radial-gradient(30% 22.5% at 50% 50%,rgba(255,255,255,.15),transparent 70%);
  transform:translate3d(calc(clamp(0, var(--lx,.32), 1) * 50%),calc(clamp(0, var(--ly,.28), 1) * 50%),0)}
.idcard .ed,.idcard .medal{display:none}
.idcard .ed{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.idcard .ed i{position:absolute;inset:0;border-radius:inherit}
.idcard .ed i > b{display:none}

/* ---- front ---------------------------------------------------------------- */
.idf-top{position:absolute;left:calc(20 * var(--u));right:calc(20 * var(--u));top:calc(17 * var(--u));display:flex;align-items:center;gap:calc(8 * var(--u))}
.idf-top .mark{width:calc(26 * var(--u));height:calc(26 * var(--u));filter:drop-shadow(0 0 calc(8 * var(--u)) rgba(var(--acc-rgb),.45))}
.idf-top .wm{font-family:var(--font-mono);font-weight:500;font-size:calc(13 * var(--u));letter-spacing:-.01em;color:#fff}
.idf-top .wm b{font-weight:500;color:var(--acc-text)}
.idcard .ovl{font-family:var(--font-mono);font-size:max(8px,calc(9 * var(--u)));font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--label);white-space:nowrap}
.idf-top .ovl{margin-left:auto}
.chipx{position:absolute;left:calc(22 * var(--u));top:calc(66 * var(--u));width:calc(44 * var(--u));height:calc(34 * var(--u));border-radius:calc(6 * var(--u));
  background:linear-gradient(135deg,#f3dc8c,#c9a440 52%,#f5e3a4);box-shadow:inset 0 0 0 1px rgba(60,40,0,.3)}
.chipx::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent 32%,rgba(90,64,10,.45) 32% calc(32% + 1px),transparent 0 68%,rgba(90,64,10,.45) 68% calc(68% + 1px),transparent 0),
             linear-gradient(0deg,transparent 33%,rgba(90,64,10,.45) 33% calc(33% + 1px),transparent 0 66%,rgba(90,64,10,.45) 66% calc(66% + 1px),transparent 0)}
.chipx i{position:absolute;left:32%;right:32%;top:33%;bottom:33%;border-radius:2px;background:linear-gradient(135deg,#f7e7a8,#d8b453)}
.ring{position:absolute;right:calc(-46 * var(--u));top:calc(34 * var(--u));width:calc(176 * var(--u));aspect-ratio:1;border-radius:50%;border:1px solid rgba(var(--acc-rgb),.18);pointer-events:none}
.ring::before,.ring::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(var(--acc-rgb),.14)}
.ring::before{inset:16%}
.ring::after{inset:33%;background:radial-gradient(closest-side,rgba(var(--acc-rgb),.12),transparent)}
.who{position:absolute;left:calc(20 * var(--u));bottom:calc(44 * var(--u));display:flex;flex-direction:column;gap:calc(5 * var(--u))}
.who .name{font-family:var(--font-display);font-weight:600;font-size:calc(27 * var(--u));line-height:1;letter-spacing:-.03em;color:#fff}
.who .handle{font-family:var(--font-mono);font-weight:500;font-size:calc(12.5 * var(--u));color:var(--acc-text)}
.idf-foot{position:absolute;left:calc(20 * var(--u));right:calc(20 * var(--u));bottom:calc(14 * var(--u));display:flex;justify-content:space-between;gap:8px;
  padding-top:calc(8 * var(--u));border-top:1px solid rgba(255,255,255,.1);font-family:var(--font-mono);font-size:max(8px,calc(9 * var(--u)));letter-spacing:.12em;text-transform:uppercase;color:var(--label)}
.edtag{position:absolute;right:calc(20 * var(--u));top:calc(46 * var(--u));font-family:var(--font-mono);font-size:calc(8.5 * var(--u));font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--label-hi)}
.edtag:empty{display:none}

/* ---- back: fingerprint, randomart, seal slot ------------------------------- */
.idface--back .ovl{position:absolute;left:calc(18 * var(--u));top:calc(14 * var(--u));max-width:calc(100% - 72 * var(--u))}
.idb-grid{position:absolute;left:calc(18 * var(--u));right:calc(26 * var(--u));top:calc(50 * var(--u));bottom:calc(34 * var(--u));display:flex;align-items:center;gap:calc(16 * var(--u))}
.idcard .art{display:block;font-family:var(--font-mono);font-size:calc(9.4 * var(--u));line-height:1.05;letter-spacing:0;white-space:pre;color:var(--art)}
.art-e{position:relative;display:inline-block;font-weight:700;color:var(--acc-text);text-shadow:0 0 calc(8 * var(--u)) rgba(var(--acc-rgb),.9);cursor:help}
.art-e::before{content:"";position:absolute;inset:-12px -10px}
.art-e::after{content:attr(data-s);position:absolute;left:0;top:0;color:var(--peek);text-shadow:none;opacity:0}
.art-e.peek{animation:peekE 2.6s var(--ease-soft)}
.art-e.peek::after{animation:peekS 2.6s var(--ease-soft)}
@keyframes peekE{0%,100%{color:var(--acc-text)}14%,82%{color:transparent;text-shadow:none}}
@keyframes peekS{0%,100%{opacity:0;transform:translateY(-.7em)}14%,82%{opacity:1;transform:none}}
/* the fingerprint sits on a plate; the plate only shows itself while and after checking */
.idcard .fpfull{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,auto);gap:calc(3 * var(--u)) calc(10 * var(--u));
  padding:calc(9 * var(--u)) calc(9 * var(--u));margin:calc(-9 * var(--u)) calc(-9 * var(--u)) calc(-9 * var(--u)) auto;
  font-family:var(--font-mono);font-weight:500;font-size:calc(14 * var(--u));line-height:1.36;color:var(--print)}
.idcard .fpfull span{position:relative;transition:color 260ms var(--ease)}
.idcard .status{position:absolute;right:calc(18 * var(--u));bottom:calc(13 * var(--u));display:flex;align-items:center;gap:calc(6 * var(--u));
  font-family:var(--font-mono);font-size:max(9px,calc(10 * var(--u)));color:var(--label)}

/* ---- the colours each edition prints with (ink is the default) ------------- */
.idcard{
  --print:#fff;--label:rgba(255,255,255,.8);--label-hi:rgba(255,255,255,.86);--art:rgba(255,255,255,.82);--dim:rgba(255,255,255,.62);
  /* the seal slot: a guilloché rosette in the card's ink */
  --rosette:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23fff'%3E%3Ccircle cx='50' cy='50' r='48' stroke-width='2.6'/%3E%3Ccircle cx='50' cy='50' r='43.6' stroke-width='1.1'/%3E%3Cpath id='a' stroke-width='1.35' d='M86.2 50L88.8 51.7L90.5 53.5L91 55.4L90.1 57.1L87.9 58.4L85 59.4L82 60.1L79.8 60.8L78.6 61.9L78.7 63.4L79.8 65.5L81.4 68.1L82.7 70.8L83.3 73.3L82.8 75.2L81.2 76.2L78.6 76.2L75.6 75.6L72.7 74.8L70.4 74.3L68.9 74.6L68.2 76L68.1 78.3L68.1 81.4L67.9 84.4L67.2 86.9L65.8 88.2L63.9 88.2L61.7 87L59.4 85L57.3 82.8L55.5 81.2L54 80.7L52.8 81.6L51.5 83.6L50 86.2L48.3 88.8L46.5 90.5L44.6 91L42.9 90.1L41.6 87.9L40.6 85L39.9 82L39.2 79.8L38.1 78.6L36.6 78.7L34.5 79.8L31.9 81.4L29.2 82.7L26.7 83.3L24.8 82.8L23.8 81.2L23.8 78.6L24.4 75.6L25.2 72.7L25.7 70.4L25.4 68.9L24 68.2L21.7 68.1L18.6 68.1L15.6 67.9L13.1 67.2L11.8 65.8L11.8 63.9L13 61.7L15 59.4L17.2 57.3L18.8 55.5L19.3 54L18.4 52.8L16.4 51.5L13.8 50L11.2 48.3L9.5 46.5L9 44.6L9.9 42.9L12.1 41.6L15 40.6L18 39.9L20.2 39.2L21.4 38.1L21.3 36.6L20.2 34.5L18.6 31.9L17.3 29.2L16.7 26.7L17.2 24.8L18.8 23.8L21.4 23.8L24.4 24.4L27.3 25.2L29.6 25.7L31.1 25.4L31.8 24L31.9 21.7L31.9 18.6L32.1 15.6L32.8 13.1L34.2 11.8L36.1 11.8L38.3 13L40.6 15L42.7 17.2L44.5 18.8L46 19.3L47.2 18.4L48.5 16.4L50 13.8L51.7 11.2L53.5 9.5L55.4 9L57.1 9.9L58.4 12.1L59.4 15L60.1 18L60.8 20.2L61.9 21.4L63.4 21.3L65.5 20.2L68.1 18.6L70.8 17.3L73.3 16.7L75.2 17.2L76.2 18.8L76.2 21.4L75.6 24.4L74.8 27.3L74.3 29.6L74.6 31.1L76 31.8L78.3 31.9L81.4 31.9L84.4 32.1L86.9 32.8L88.2 34.2L88.2 36.1L87 38.3L85 40.6L82.8 42.7L81.2 44.5L80.7 46L81.6 47.2L83.6 48.5Z'/%3E%3Cuse href='%23a' transform='rotate(7.5 50 50)'/%3E%3Cuse href='%23a' transform='rotate(15 50 50)'/%3E%3Cuse href='%23a' transform='rotate(22.5 50 50)'/%3E%3Ccircle cx='50' cy='50' r='28.6' stroke-width='1.2'/%3E%3Cpath id='b' stroke-width='1.15' d='M68.6 50L71.8 51.4L73.9 53.2L74.5 54.9L73.3 56.2L70.6 57L67.2 57.1L63.8 56.8L61.3 56.5L60.1 56.8L60.4 57.9L61.6 60.2L63.2 63.2L64.4 66.4L64.7 69.2L63.9 70.8L62.1 70.9L59.6 69.6L57.1 67.2L55 64.6L53.4 62.6L52.4 62L51.7 62.9L51 65.4L50 68.6L48.6 71.8L46.8 73.9L45.1 74.5L43.8 73.3L43 70.6L42.9 67.2L43.2 63.8L43.5 61.3L43.2 60.1L42.1 60.4L39.8 61.6L36.8 63.2L33.6 64.4L30.8 64.7L29.2 63.9L29.1 62.1L30.4 59.6L32.8 57.1L35.4 55L37.4 53.4L38 52.4L37.1 51.7L34.6 51L31.4 50L28.2 48.6L26.1 46.8L25.5 45.1L26.7 43.8L29.4 43L32.8 42.9L36.2 43.2L38.7 43.5L39.9 43.2L39.6 42.1L38.4 39.8L36.8 36.8L35.6 33.6L35.3 30.8L36.1 29.2L37.9 29.1L40.4 30.4L42.9 32.8L45 35.4L46.6 37.4L47.6 38L48.3 37.1L49 34.6L50 31.4L51.4 28.2L53.2 26.1L54.9 25.5L56.2 26.7L57 29.4L57.1 32.8L56.8 36.2L56.5 38.7L56.8 39.9L57.9 39.6L60.2 38.4L63.2 36.8L66.4 35.6L69.2 35.3L70.8 36.1L70.9 37.9L69.6 40.4L67.2 42.9L64.6 45L62.6 46.6L62 47.6L62.9 48.3L65.4 49Z'/%3E%3Cuse href='%23b' transform='rotate(15 50 50)'/%3E%3Cuse href='%23b' transform='rotate(30 50 50)'/%3E%3Ccircle cx='50' cy='50' r='7.2' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E");
  --blind:rgba(var(--acc-rgb),.5);--frame:rgba(255,255,255,.4);--scan:rgba(var(--acc-rgb),.3);--scan-core:rgba(235,248,255,.95);
  /* verified: the card's own ink, struck as a seal */
  --ok-fill:radial-gradient(circle at 34% 28%,rgb(255 255 255 / .16),transparent 60%),var(--acc);--ok-ink:var(--on-acc);
  --ok-lines:var(--acc);--ok-line:rgba(var(--acc-rgb),.9);--ok-glow:rgba(var(--acc-rgb),.6);--ok-text:#fff;--peek:var(--acc-text);
  /* mismatch: always red, always with a cross */
  --bad-fill:linear-gradient(150deg,#ff5f80,#d0244b);--bad-ink:#fff;--bad-line:#ff6f8a;--bad-text:#ffb0bf;
}

/* ---- checking: data-check = idle · busy · pass · ok · bad · na --------------- */
/* viewfinder corners round the fingerprint */
.idcard .fpfull::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;--c:var(--frame);--L:calc(10 * var(--u));--t:max(1px,calc(1.3 * var(--u)));
  background:linear-gradient(var(--c) 0 0) 0 0/var(--L) var(--t),linear-gradient(var(--c) 0 0) 0 0/var(--t) var(--L),
             linear-gradient(var(--c) 0 0) 100% 0/var(--L) var(--t),linear-gradient(var(--c) 0 0) 100% 0/var(--t) var(--L),
             linear-gradient(var(--c) 0 0) 0 100%/var(--L) var(--t),linear-gradient(var(--c) 0 0) 0 100%/var(--t) var(--L),
             linear-gradient(var(--c) 0 0) 100% 100%/var(--L) var(--t),linear-gradient(var(--c) 0 0) 100% 100%/var(--t) var(--L);
  background-repeat:no-repeat;opacity:0;transform:scale(1.07);transition:opacity 280ms var(--ease),transform 520ms var(--ease-soft)}
/* the scan line: a thin bright core in a soft band at the top of a plate-sized box; the box slides down once */
.idcard .fpfull::after{content:"";position:absolute;left:calc(2 * var(--u));right:calc(2 * var(--u));top:0;height:100%;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent 1.2%,var(--scan) 4.3%,var(--scan-core) 5%,var(--scan) 5.7%,transparent 8.8%);will-change:transform}
/* a tick under each group as it is compared */
.idcard .fpfull span::after{content:"";position:absolute;left:0;right:0;bottom:calc(-1 * var(--u));height:max(1px,calc(1.1 * var(--u)));border-radius:1px;
  background:var(--ok-line);opacity:.9;transform:scaleX(0);transform-origin:0 50%;transition:transform 260ms var(--ease-soft),opacity 700ms var(--ease)}
.idcard[data-check="busy"] .fpfull span:not(.ok):not(.bad),.idcard[data-check="pass"] .fpfull span:not(.ok):not(.bad){color:var(--dim)}
.idcard:is([data-check="busy"],[data-check="pass"],[data-check="ok"],[data-check="bad"]) .fpfull::before{opacity:1;transform:none}
.idcard[data-check="pass"] .fpfull::after{animation:idcPass 820ms linear both}
@keyframes idcPass{0%{opacity:0;transform:translateY(0)}6%,90%{opacity:1}100%{opacity:0;transform:translateY(90%)}}
.idcard .fpfull span.ok::after{transform:scaleX(1)}
.idcard[data-check="ok"] .fpfull::before{--c:var(--ok-line);animation:idcLock 520ms var(--ease-soft) both}
@keyframes idcLock{0%{transform:scale(1.05)}100%{transform:none}}
.idcard:is([data-check="ok"],[data-check="bad"]) .fpfull span.ok::after{opacity:0;transition:transform 260ms var(--ease-soft),opacity 900ms var(--ease) 380ms}
.idcard .fpfull span.bad{color:var(--bad-text)}
.idcard .fpfull span.bad::after{background:var(--bad-line);bottom:auto;top:calc(50% - max(.5px,calc(.55 * var(--u))));opacity:1;transform:scaleX(1)}
.idcard[data-check="bad"] .fpfull::before{--c:var(--bad-line)}

/* the seal slot, top right on every edition (on metal: the medal) */
.idcard .idface--back .medal{display:grid;place-items:center;position:absolute;right:calc(15 * var(--u));top:calc(9 * var(--u));width:calc(33 * var(--u));height:calc(33 * var(--u));border-radius:50%}
.idcard .medal::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}
.idcard:not([data-edition="silver"]):not([data-edition="gold"]) .medal::before{background:var(--blind);
  -webkit-mask:var(--rosette) center/100% 100% no-repeat;mask:var(--rosette) center/100% 100% no-repeat;
  animation:idcDial 14s linear infinite paused}
.idcard:not([data-edition="silver"]):not([data-edition="gold"]) .medal > b{display:none}
.idcard:is([data-check="busy"],[data-check="pass"]) .medal::before{animation-play-state:running}
@keyframes idcDial{to{transform:rotate(1turn)}}
.idcard .seal{position:absolute;inset:calc(7.4 * var(--u));display:grid;place-items:center;border-radius:50%;opacity:0;pointer-events:none}
.idcard .seal svg{width:72%;height:72%;overflow:visible}
.idcard .seal path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.idcard .seal--ok{background:var(--ok-fill);box-shadow:inset 0 0 0 calc(.9 * var(--u)) rgb(255 255 255 / .3),0 0 0 calc(.8 * var(--u)) rgb(0 0 0 / .2)}
.idcard .seal--ok path{stroke:var(--ok-ink);stroke-dasharray:20;stroke-dashoffset:20}
.idcard .seal--bad{background:var(--bad-fill);box-shadow:inset 0 0 0 calc(.9 * var(--u)) rgb(255 255 255 / .3),0 0 0 calc(.8 * var(--u)) rgb(0 0 0 / .2)}
.idcard .seal--bad path{stroke:var(--bad-ink)}
.idcard[data-check="ok"]:not([data-edition="silver"]):not([data-edition="gold"]) .medal::before{background:var(--ok-lines)}
.idcard[data-check="bad"]:not([data-edition="silver"]):not([data-edition="gold"]) .medal::before{background:var(--bad-line);opacity:.7}
.idcard[data-check="ok"] .seal--ok,.idcard[data-check="bad"] .seal--bad{opacity:1;animation:idcStrike 560ms cubic-bezier(.2,.9,.25,1.25) both}
.idcard[data-check="ok"] .seal--ok path{stroke-dashoffset:0;transition:stroke-dashoffset 380ms var(--ease-soft) 240ms}
@keyframes idcStrike{0%{opacity:0;transform:scale(1.9) rotate(-14deg)}50%{opacity:1}62%{transform:scale(.92) rotate(2deg)}100%{opacity:1;transform:none}}
/* the strike sends a ring outwards */
.idcard .idface--back .medal::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 0 calc(1.2 * var(--u)) var(--ok-glow)}
.idcard[data-check="ok"] .idface--back .medal::after{animation:idcRing 900ms var(--ease-soft) 160ms both}
@keyframes idcRing{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(2.1)}}
.idcard[data-check="bad"] .idface--back .medal{animation:idcNo 440ms var(--ease) 300ms both}
@keyframes idcNo{0%,100%{translate:0}20%{translate:calc(-3 * var(--u))}40%{translate:calc(3 * var(--u))}60%{translate:calc(-2 * var(--u))}80%{translate:calc(1 * var(--u))}}

/* status: a mark that says it without colour */
.idcard .status i{position:relative;flex:none;width:calc(9 * var(--u));height:calc(9 * var(--u));min-width:8px;min-height:8px;border-radius:50%;box-shadow:inset 0 0 0 max(1px,calc(1.1 * var(--u))) currentColor}
.idcard .status[data-kind="busy"] i{box-shadow:none;background:conic-gradient(currentColor 0 70%,transparent 0);
  -webkit-mask:radial-gradient(closest-side,transparent 56%,#000 62%);mask:radial-gradient(closest-side,transparent 56%,#000 62%);animation:idcDial .9s linear infinite}
.idcard .status[data-kind="ok"]{color:var(--ok-text)}
.idcard .status[data-kind="bad"]{color:var(--bad-text)}
.idcard .status[data-kind="ok"] i{box-shadow:none;background:var(--ok-fill)}
.idcard .status[data-kind="bad"] i{box-shadow:none;background:var(--bad-fill)}
.idcard .status[data-kind="ok"] i::after{content:"";position:absolute;left:34%;top:18%;width:26%;height:46%;border:solid var(--ok-ink);border-width:0 max(1.2px,calc(1.3 * var(--u))) max(1.2px,calc(1.3 * var(--u))) 0;transform:rotate(42deg)}
.idcard .status[data-kind="bad"] i::before,.idcard .status[data-kind="bad"] i::after,.idcard .status[data-kind="na"] i::after{content:"";position:absolute;left:25%;right:25%;top:calc(50% - max(.6px,calc(.65 * var(--u))));height:max(1.2px,calc(1.3 * var(--u)));background:var(--bad-ink);transform:rotate(45deg)}
.idcard .status[data-kind="bad"] i::after{transform:rotate(-45deg)}
.idcard .status[data-kind="na"] i::after{background:currentColor;transform:none}

/* ---- editions, after the Skat Tracker (cardEdition.ts) -----------------------
   Ladder: Tinte 0 · Folie 3 · Interferenz 5 · Polychrome 7 · Feinsilber 10 · Feingold 12 */

/* -- foil: one bright band across the card, running with the light; the seal is hot-foil chrome */
.idcard[data-edition="foil"]{--acc-text:#b8e6ff;--dim:rgba(255,255,255,.66);
  --ok-fill:radial-gradient(circle at 34% 26%,rgb(255 255 255 / .9),transparent 46%),linear-gradient(150deg,#ffffff 0%,#d3dce8 22%,#f6f9fd 40%,#93a3b9 62%,#e4eaf2 80%,#aebccd 100%);
  --ok-ink:#0c1a33;--ok-lines:#dfe7f2;--ok-line:rgba(223,231,242,.9);--ok-glow:rgba(214,226,244,.7)}
:root[data-accent="magenta"] .idcard[data-edition="foil"]{--acc-text:#ffbcd8}
.idcard[data-edition="foil"] .lt-a{display:block;width:260%;mix-blend-mode:screen;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.15) 46%,rgba(var(--acc-rgb),.2) 50%,transparent 62%);
  transform:translate3d(calc(-61.538% * clamp(0, var(--lx,.32), 1)),0,0)}

/* -- interference: mother-of-pearl. A thin film of pastel colour runs with the light over fine
      diffraction lines, a pearl rim holds it; the seal is a hologram */
.idcard[data-edition="holo"]{--acc-text:#b8e6ff;--dim:rgba(255,255,255,.66);--label:rgba(255,255,255,.88);
  --ok-fill:radial-gradient(circle at 34% 26%,rgb(255 255 255 / .85),transparent 48%),conic-gradient(from 210deg,#ffffff,#ffd9ee,#d8e8ff,#d4f7e6,#fff0d2,#e6dcff,#ffffff);
  --ok-ink:#1d1f4d;--ok-lines:#f3e8ff;--ok-line:rgba(238,230,255,.9);--ok-glow:rgba(226,214,255,.7)}
:root[data-accent="magenta"] .idcard[data-edition="holo"]{--acc-text:#ffcce2}
.idcard[data-edition="holo"] .idface{
  background:radial-gradient(90% 70% at 0% 0%,rgba(var(--acc-rgb),.14),transparent 60%),linear-gradient(150deg,#1e2846 0%,#151c36 48%,#0e1428 100%);
  box-shadow:inset 0 0 0 calc(1.5 * var(--u)) rgb(226 214 255 / .5)}
.idcard[data-edition="holo"] .lt-spot{background:radial-gradient(30% 22.5% at 50% 50%,rgba(255,255,255,.12),transparent 70%)}
/* diffraction: lines finer than a hair, still */
.idcard[data-edition="holo"] .lt-a{display:block;mix-blend-mode:overlay;will-change:auto;background:repeating-linear-gradient(112deg,rgb(255 255 255 / .16) 0 .6px,transparent .6px 2.2px)}
/* the film: broad pastel bands, as on a black pearl, sliding with the light */
.idcard[data-edition="holo"] .lt-b{display:block;width:300%;height:300%;mix-blend-mode:screen;
  background:linear-gradient(112deg,rgb(255 128 200 / .24) 0%,rgb(136 168 255 / .28) 9%,rgb(104 232 214 / .22) 18%,rgb(255 222 136 / .2) 27%,rgb(214 146 255 / .26) 36%,
    rgb(255 128 200 / .24) 45%,rgb(136 168 255 / .28) 54%,rgb(104 232 214 / .22) 63%,rgb(255 222 136 / .2) 72%,rgb(214 146 255 / .26) 81%,rgb(255 128 200 / .24) 90%,rgb(136 168 255 / .28) 100%);
  transform:translate3d(calc(-66.667% * clamp(0, var(--lx,.32), 1)),calc(-66.667% * clamp(0, var(--ly,.28), 1)),0)}
.idcard[data-edition="holo"] .ed{display:block}
.idcard[data-edition="holo"] .ed i:nth-child(1),.idcard[data-edition="holo"] .ed i:nth-child(2),.idcard[data-edition="holo"] .ed i:nth-child(3){display:none}
.idcard[data-edition="holo"] .ed i:nth-child(4){border:calc(3 * var(--u)) solid transparent;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0) border-box;-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0) border-box}
.idcard[data-edition="holo"] .ed i:nth-child(4) > b{display:block;position:absolute;left:calc(-3 * var(--u));top:calc(-3 * var(--u));
  width:calc((100% + 6 * var(--u)) * 2);height:calc((100% + 6 * var(--u)) * 2);will-change:transform;
  background:linear-gradient(135deg,#ffffff 0%,#ffe0f0 14%,#dceaff 28%,#dcf8ea 42%,#fff0d8 56%,#ece0ff 70%,#ffffff 84%,#dceaff 100%);opacity:.85;
  transform:translate3d(calc(-50% * (1 - clamp(0, var(--lx,.32), 1))),calc(-50% * (1 - clamp(0, var(--ly,.28), 1))),0)}

/* -- polychrome: the wheel round the identity hue, a second rainbow against it, a turning
      rainbow edge; white print, the seal in white enamel */
.idcard[data-edition="poly"]{--print:#fff;--label:#fff;--label-hi:#fff;--art:#fff;--dim:rgba(255,255,255,.88);
  --blind:rgba(255,255,255,.6);--frame:rgba(255,255,255,.62);--scan:rgba(255,255,255,.3);--scan-core:#fff;
  --ok-fill:radial-gradient(circle at 34% 26%,#ffffff,#f1f3f8 55%,#d6dce8);--ok-ink:#2a1d55;--ok-lines:#ffffff;--ok-line:rgba(255,255,255,.95);--ok-glow:rgba(255,255,255,.75);--ok-text:#fff;--peek:#fff;
  --bad-fill:radial-gradient(circle at 34% 26%,#ffffff,#f6e8ec 60%,#e8d2d9);--bad-ink:#b3123a;--bad-text:#ffe0e7;--bad-line:#ffd2dc}
.idcard[data-edition="poly"] .idface{background:#2a1d55;box-shadow:none}
.idcard[data-edition="poly"] .lt-spot{display:none}
.idcard[data-edition="poly"] .lt-a{display:block;width:260%;height:260%;
  background:linear-gradient(128deg,hsl(336 80% 24%) 0.0%,hsl(21 80% 23%) 12.5%,hsl(66 80% 18%) 25.0%,hsl(111 80% 18%) 37.5%,hsl(156 80% 19%) 50.0%,hsl(201 80% 25%) 62.5%,hsl(246 80% 29%) 75.0%,hsl(291 80% 27%) 87.5%,hsl(336 80% 24%) 100.0%);
  transform:translate3d(calc(-61.538% * (1 - clamp(0, var(--lx,.32), 1))),calc(-61.538% * (1 - clamp(0, var(--ly,.28), 1))),0)}
.idcard[data-edition="poly"] .lt-b{display:block;width:200%;height:200%;mix-blend-mode:soft-light;opacity:.62;
  background:repeating-linear-gradient(28deg,hsl(342 100% 66% / 0.55) 0.0%,hsl(26 100% 60% / 0.55) 2.6%,hsl(56 100% 58% / 0.55) 5.2%,hsl(130 80% 56% / 0.55) 7.8%,hsl(188 100% 56% / 0.55) 10.4%,hsl(230 100% 66% / 0.55) 13.0%,hsl(282 96% 68% / 0.55) 15.6%,hsl(342 100% 66% / 0.55) 18.2%);
  transform:translate3d(calc(-50% * clamp(0, var(--lx,.32), 1)),calc(-50% * clamp(0, var(--ly,.28), 1)),0)}
.idcard[data-edition="poly"] .lt-c{display:block;will-change:auto;mix-blend-mode:soft-light;
  background:linear-gradient(0deg,rgb(0 0 0 / .3) 0%,rgb(0 0 0 / 0) 32%),linear-gradient(150deg,rgb(255 255 255 / .22) 0%,rgb(255 255 255 / 0) 50%,rgb(0 0 0 / .4) 100%)}
.idcard[data-edition="poly"] :is(.who .name,.wm,.fpfull,.art,.who .handle,.wm b,.art-e,.edtag,.ovl,.idf-foot,.status){text-shadow:0 1px 2px rgb(0 0 0 / .55),0 0 12px rgb(0 0 0 / .35)}
.idcard[data-edition="poly"] :is(.who .handle,.wm b,.art-e){color:#fff}
.idcard[data-edition="poly"] .idf-foot{border-top-color:rgb(255 255 255 / .3)}
.idcard[data-edition="poly"] .ring,.idcard[data-edition="poly"] .ring::before,.idcard[data-edition="poly"] .ring::after{border-color:rgb(255 255 255 / .28)}
.idcard[data-edition="poly"] .ed{display:block}
.idcard[data-edition="poly"] .ed i:nth-child(1){inset:auto;left:0;top:0;width:240%;height:240%;border-radius:0;opacity:.4;will-change:transform;mix-blend-mode:soft-light;
  background:linear-gradient(118deg,transparent 36%,rgb(255 255 255 / .55) 49%,transparent 62%);
  transform:translate3d(calc(-58.333% * (1 - clamp(0, var(--lx,.32), 1))),calc(-58.333% * (1 - clamp(0, var(--ly,.28), 1))),0)}
.idcard[data-edition="poly"] .ed i:nth-child(2),.idcard[data-edition="poly"] .ed i:nth-child(3){display:none}
.idcard[data-edition="poly"] .ed i:nth-child(4){border:calc(3 * var(--u)) solid transparent;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0) border-box;-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0) border-box}
.idcard[data-edition="poly"] .ed i:nth-child(4) > b{display:block;position:absolute;left:50%;top:50%;width:calc(var(--w) * 1.25);height:calc(var(--w) * 1.25);margin:calc(var(--w) * -.625);will-change:transform;
  background:conic-gradient(hsl(342 100% 66%),hsl(26 100% 60%),hsl(56 100% 58%),hsl(130 80% 56%),hsl(188 100% 56%),hsl(230 100% 66%),hsl(282 96% 68%),hsl(342 100% 66%));
  transform:rotate(calc(clamp(0, var(--lx,.32), 1) * 360deg))}
/* the enamel seal sits in a rainbow ring, like the edge */
.idcard[data-edition="poly"] .seal--ok,.idcard[data-edition="poly"] .seal--bad{box-shadow:0 0 0 calc(1.4 * var(--u)) rgb(255 255 255 / .85),0 calc(1 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / .35)}

/* -- metals: a solid bar, brushed, engraved, polished frame, hallmark, medal */
.idcard[data-edition="silver"]{
  --m-frame:linear-gradient(150deg,#5d646e 0%,#c3cad2 14%,#fbfcfd 26%,#a3abb5 40%,#626a74 55%,#d4d9df 70%,#ffffff 80%,#858d97 100%);
  --m-pic:linear-gradient(160deg,#eef1f4,#c3c9d1 45%,#9ea6b1 75%,#d7dce1);--m-plate:linear-gradient(180deg,#ffffff,#dde2e7);
  --m-ink:#262c34;--m-text:#1a1f25;--m-ink-sh:rgb(34 38 46 / .85);--m-ink-li:rgb(255 255 255 / .95);--m-ink-glow:rgb(255 255 255 / .4);
  --m-sheen:linear-gradient(118deg,transparent 38%,rgb(255 255 255 / .15) 44%,rgb(255 255 255 / .9) 49.5%,rgb(220 232 248 / .5) 52%,transparent 60%);
  --m-sheen2:linear-gradient(118deg,transparent 45%,rgb(255 255 255 / .6) 49.5%,transparent 54%);--m-edge:rgb(70 78 90 / .7);
  /* verified: the medal turns over to heat-blued steel */
  --ok-fill:radial-gradient(circle at 36% 28%,rgb(160 196 255 / .9),transparent 40%),radial-gradient(circle at 50% 50%,#3d63d6 0,#203f9e 48%,#132a6c 78%,#0d1d4d);
  --ok-ink:#f2f5f9;--ok-line:rgb(24 52 140 / .8);--ok-glow:rgb(70 110 220 / .55);--ok-text:#14181d;
  --bad-fill:radial-gradient(circle at 36% 28%,rgb(255 190 200 / .8),transparent 40%),radial-gradient(circle at 50% 50%,#e0405f,#a5122f 60%,#5e0716);--bad-ink:#f7f3f4;--bad-line:#8e0f2a;--bad-text:#6f0a20;
  --print:var(--m-text);--label:#2f353d;--label-hi:var(--m-ink);--art:var(--m-ink);--dim:#30363e;--frame:rgb(26 31 37 / .5);--scan:rgb(255 255 255 / .55);--scan-core:#fff;--peek:#14306f}
.idcard[data-edition="gold"]{
  --m-frame:linear-gradient(150deg,#7a4d0c 0%,#e8b84a 14%,#fff1b0 26%,#d9a032 40%,#8c5a12 55%,#f3cf6a 70%,#fff4c4 80%,#b47a1c 100%);
  --m-pic:linear-gradient(160deg,#f6d77a,#d8a33e 45%,#bc8629 75%,#e8bd5c);--m-plate:linear-gradient(180deg,#fff6d4,#efcd78);
  --m-ink:#3a2203;--m-text:#221402;--m-ink-sh:rgb(70 40 0 / .9);--m-ink-li:rgb(255 246 206 / .95);--m-ink-glow:rgb(255 232 160 / .4);
  --m-sheen:linear-gradient(118deg,transparent 38%,rgb(255 255 255 / .15) 44%,rgb(255 252 230 / .85) 49.5%,rgb(255 230 150 / .5) 52%,transparent 60%);
  --m-sheen2:linear-gradient(118deg,transparent 45%,rgb(255 250 220 / .55) 49.5%,transparent 54%);--m-edge:rgb(110 70 8 / .7);
  /* verified: the medal turns over to ink enamel, InkCurity's own blue set in fine gold */
  --ok-fill:radial-gradient(circle at 36% 28%,rgb(120 170 255 / .55),transparent 42%),radial-gradient(circle at 50% 50%,#24447e 0,#16294a 50%,#0b1730 80%,#070f22);
  --ok-ink:#ffe08a;--ok-line:rgb(18 34 70 / .78);--ok-glow:rgb(255 214 110 / .6);--ok-text:#1c1002;
  --bad-fill:radial-gradient(circle at 36% 28%,rgb(255 190 200 / .75),transparent 40%),radial-gradient(circle at 50% 50%,#d8385a,#9c112c 60%,#550614);--bad-ink:#ffe08a;--bad-line:#6e0b1a;--bad-text:#470510;
  --print:var(--m-text);--label:#2c1a03;--label-hi:var(--m-ink);--art:var(--m-ink);--dim:#322207;--frame:rgb(58 34 3 / .55);--scan:rgb(255 250 225 / .55);--scan-core:#fffdf2;--peek:#14306f}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .idface{
  background:repeating-linear-gradient(0deg,rgb(255 255 255 / .1) 0 .5px,transparent .5px 1.5px),repeating-linear-gradient(0deg,rgb(0 0 0 / .07) 0 .4px,transparent .4px 2.3px),var(--m-pic);
  background-blend-mode:overlay,overlay,normal;box-shadow:inset 0 0 0 calc(1.5 * var(--u)) var(--m-edge);color:var(--m-ink)}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .lt-spot{display:none}
.idcard:is([data-edition="silver"],[data-edition="gold"]) :is(.who .name,.who .handle,.wm,.wm b,.ovl,.idf-foot,.fpfull,.art,.art-e,.status,.edtag){
  color:var(--m-ink);background:none;-webkit-background-clip:border-box;background-clip:border-box;
  text-shadow:0 -.7px 0 var(--m-ink-sh),0 .9px 0 var(--m-ink-li),0 0 5px var(--m-ink-glow)}
.idcard:is([data-edition="silver"],[data-edition="gold"]) :is(.fpfull,.idf-foot,.who .handle){color:var(--m-text)}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .status{color:var(--label)}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .fpfull span{color:var(--print)}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .fpfull span.bad{color:var(--bad-text)}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .status[data-kind="ok"]{color:var(--ok-text)}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .status[data-kind="bad"]{color:var(--bad-text)}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .idf-foot{border-top-color:var(--m-ink-sh);border-top-style:solid}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .idf-top .mark{filter:drop-shadow(0 1px 0 var(--m-ink-li)) drop-shadow(0 -1px 0 var(--m-ink-sh))}
.idcard[data-edition="gold"] .chipx{filter:saturate(.75) brightness(.82) contrast(1.15);box-shadow:inset 0 0 0 1px rgba(60,30,0,.65),0 1px 0 rgba(255,240,200,.6)}
/* the dial: a sunburst guilloché instead of the rings */
.idcard:is([data-edition="silver"],[data-edition="gold"]) .ring{border:0;opacity:.75;mix-blend-mode:overlay;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgb(255 255 255 / .34) 0deg 1.2deg,rgb(0 0 0 / .1) 1.2deg 2.6deg,transparent 2.6deg 5deg),
             repeating-radial-gradient(circle at 50% 50%,transparent 0 9px,rgb(0 0 0 / .1) 9.5px 10.2px,rgb(255 255 255 / .25) 10.4px 11px);
  -webkit-mask:radial-gradient(closest-side,#000 70%,transparent);mask:radial-gradient(closest-side,#000 70%,transparent)}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .ring::before,.idcard:is([data-edition="silver"],[data-edition="gold"]) .ring::after{display:none}
/* hallmark: struck into the metal */
.idcard:is([data-edition="silver"],[data-edition="gold"]) .edtag{padding:calc(2 * var(--u)) calc(6 * var(--u));border-radius:calc(3 * var(--u));
  box-shadow:inset 0 1px 1.5px var(--m-ink-sh),inset 0 -.75px 0 var(--m-ink-li);letter-spacing:.12em}
/* sheens under the print (the engraving stays dark when the light crosses it), oversized and slid;
   over the print only the glints round the light and the polished frame */
.idcard:is([data-edition="silver"],[data-edition="gold"]) :is(.lt-a,.lt-b){display:block;width:240%;height:240%;
  transform:translate3d(calc(-58.333% * (1 - clamp(0, var(--lx,.32), 1))),calc(-58.333% * (1 - clamp(0, var(--ly,.28), 1))),0)}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .lt-a{background:var(--m-sheen);mix-blend-mode:soft-light}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .lt-b{background:var(--m-sheen2);mix-blend-mode:screen}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .ed{display:block}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .ed i:nth-child(1),.idcard:is([data-edition="silver"],[data-edition="gold"]) .ed i:nth-child(2){display:none}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .ed i:nth-child(3){inset:auto;left:-100%;top:-100%;width:200%;height:200%;border-radius:0;mix-blend-mode:screen;will-change:transform;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 0,rgb(0 0 0 / .55) calc(70 * var(--u)),rgb(0 0 0 / .12) calc(130 * var(--u)),transparent calc(170 * var(--u)));
  mask:radial-gradient(circle at 50% 50%,#000 0,rgb(0 0 0 / .55) calc(70 * var(--u)),rgb(0 0 0 / .12) calc(130 * var(--u)),transparent calc(170 * var(--u)));
  transform:translate3d(calc(clamp(0, var(--lx,.32), 1) * 50%),calc(clamp(0, var(--ly,.28), 1) * 50%),0)}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .ed i:nth-child(3) > b{display:block;position:absolute;left:50%;top:50%;width:50%;height:50%;will-change:transform;
  background-image:radial-gradient(0.99px 6.20px at 30% 35%,#fff,rgb(255 255 255 / 0)),radial-gradient(6.20px 0.99px at 30% 35%,#fff,rgb(255 255 255 / 0)),radial-gradient(1.31px 8.20px at 60% 70%,#fff,rgb(255 255 255 / 0)),radial-gradient(8.20px 1.31px at 60% 70%,#fff,rgb(255 255 255 / 0)),radial-gradient(1.4px 8.8px at 45% 55%,#fff,rgb(255 255 255 / 0)),radial-gradient(8.8px 1.4px at 45% 55%,#fff,rgb(255 255 255 / 0));
  background-position:0 0,0 0,14px 22px,14px 22px,31px 7px,31px 7px;background-size:46px 55px,46px 55px,64px 60px,64px 60px,97px 83px,97px 83px;
  transform:translate3d(calc(clamp(0, var(--lx,.32), 1) * -100%),calc(clamp(0, var(--ly,.28), 1) * -100%),0)}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .ed i:nth-child(4){border:calc(5 * var(--u)) solid transparent;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0) border-box;-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0) border-box;box-shadow:inset 0 0 0 .75px var(--m-ink-li)}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .ed i:nth-child(4) > b{display:block;position:absolute;left:calc(-5 * var(--u));top:calc(-5 * var(--u));
  width:calc((100% + 10 * var(--u)) * 2);height:calc((100% + 10 * var(--u)) * 2);background:var(--m-frame);will-change:transform;
  transform:translate3d(calc(-50% * (1 - clamp(0, var(--lx,.32), 1))),calc(-50% * (1 - clamp(0, var(--ly,.28), 1))),0)}
/* the plate on metal: engraved corners, a white glint for the scan */
.idcard:is([data-edition="silver"],[data-edition="gold"]) .fpfull::before{filter:drop-shadow(0 .8px 0 var(--m-ink-li))}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .fpfull::after{mix-blend-mode:screen}
/* the medal: polished rim, sunburst dial, the fineness on a bar; verified, it turns over to enamel */
.idcard:is([data-edition="silver"],[data-edition="gold"]) .idface--back .medal{width:calc(30 * var(--u));height:calc(38 * var(--u));top:calc(9 * var(--u));
  background:var(--m-frame);background-size:200% 200%;background-position:68% 72%;box-shadow:0 0 0 .75px var(--m-ink-sh),0 1px 2px rgb(0 0 0 / .35)}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .medal::before{inset:calc(2.5 * var(--u));
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgb(255 255 255 / .34) 0deg 1.2deg,rgb(0 0 0 / .1) 1.2deg 2.6deg,transparent 2.6deg 5deg),var(--m-pic);
  box-shadow:inset 0 0 0 .6px var(--m-ink-sh),inset 0 1px 2px rgb(0 0 0 / .3)}
.idcard .medal > b{position:relative;padding:calc(2 * var(--u)) calc(4 * var(--u));border-radius:99px;font:800 max(6.5px,calc(7.5 * var(--u)))/1 var(--font-body);letter-spacing:.08em;
  color:var(--m-ink);background:var(--m-plate);text-shadow:0 -.6px 0 var(--m-ink-sh),0 .8px 0 var(--m-ink-li);
  box-shadow:0 0 0 .75px var(--m-ink-sh),inset 0 0 0 .75px var(--m-ink-li),0 1px 2px rgb(0 0 0 / .35)}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .seal{inset:0;border-radius:50%}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .seal--ok{background:radial-gradient(closest-side,transparent 74%,rgb(0 0 0 / .35) 76%,transparent 79%),var(--ok-fill);
  box-shadow:inset 0 0 0 calc(2.5 * var(--u)) transparent,0 0 0 .75px var(--m-ink-sh)}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .seal--bad{background:var(--bad-fill);box-shadow:0 0 0 .75px var(--m-ink-sh)}
/* enamel sits inside the polished rim: the rim is the medal's own background, seen through a ring mask */
.idcard:is([data-edition="silver"],[data-edition="gold"]) .seal--ok,.idcard:is([data-edition="silver"],[data-edition="gold"]) .seal--bad{
  -webkit-mask:radial-gradient(closest-side,#000 calc(100% - 2.6 * var(--u)),transparent calc(100% - 2.4 * var(--u)));mask:radial-gradient(closest-side,#000 calc(100% - 2.6 * var(--u)),transparent calc(100% - 2.4 * var(--u)))}
.idcard:is([data-edition="silver"],[data-edition="gold"]) .seal svg{width:60%;height:60%;filter:drop-shadow(0 -.5px 0 rgb(0 0 0 / .45))}
.idcard:is([data-check="ok"],[data-check="bad"]) .medal > b{visibility:hidden;transition:visibility 0s 310ms}
.idcard:is([data-edition="silver"],[data-edition="gold"]):is([data-check="ok"],[data-check="bad"]) .idface--back .medal{animation:idcCoin 620ms cubic-bezier(.45,0,.3,1) both}
.idcard:is([data-edition="silver"],[data-edition="gold"])[data-check="ok"] .seal--ok,
.idcard:is([data-edition="silver"],[data-edition="gold"])[data-check="bad"] .seal--bad{animation:idcFace 620ms steps(1,end) both}
.idcard:is([data-edition="silver"],[data-edition="gold"])[data-check="bad"] .idface--back .medal{animation:idcCoin 620ms cubic-bezier(.45,0,.3,1) both,idcNo 440ms var(--ease) 700ms both}
@keyframes idcCoin{0%{transform:none}45%,55%{transform:scaleX(0)}100%{transform:none}}
@keyframes idcFace{0%{opacity:0}50%,100%{opacity:1}}
.idwrap:has(.idcard[data-edition="silver"]) .idglow,.idwrap:has(.idcard[data-edition="gold"]) .idglow{opacity:.5}

/* -- night print (0–5 h, ink and foil): the negative on ivory, verified in stamp blue */
.idcard[data-night]{--print:#0b1020;--label:rgba(14,17,36,.74);--label-hi:rgba(14,17,36,.74);--art:#1b2238;--dim:rgba(14,17,36,.7);--acc-text:#1a44bd;
  --blind:rgba(31,79,209,.42);--frame:rgba(14,17,36,.38);--scan:rgba(31,79,209,.16);--scan-core:rgba(31,79,209,.75);
  --ok-fill:radial-gradient(circle at 34% 28%,rgb(255 255 255 / .35),transparent 50%),#1f4fd1;--ok-ink:#fff;--ok-lines:#1f4fd1;--ok-line:rgba(31,79,209,.85);--ok-glow:rgba(31,79,209,.45);--ok-text:#0b1020;--peek:#1f4fd1;
  --bad-fill:linear-gradient(150deg,#d8304f,#a3102c);--bad-line:#b5163a;--bad-text:#8e0f2a}
.idcard[data-night] .idface{color:#0e1124;background:linear-gradient(150deg,#f7f4ec,#e9e3d3);box-shadow:inset 0 0 0 calc(1.5 * var(--u)) rgba(14,17,36,.2);filter:brightness(.9)}
.idcard[data-night] :is(.who .name,.wm){color:#0b1020}
.idcard[data-night] :is(.who .handle,.wm b,.art-e){color:#1a44bd;text-shadow:none}
.idcard[data-night] .idf-foot{border-color:rgba(14,17,36,.14)}
.idcard[data-night] :is(.ring,.ring::before){border-color:rgba(14,17,36,.12)}
.idcard[data-night] .lt{display:none}

/* ---- motion off: every state at once, nothing runs ------------------------ */
@media (prefers-reduced-motion:reduce){
  .idcard .fpfull::before,.idcard .fpfull::after,.idcard .fpfull span::after,.idcard .medal::before,.idcard .idface--back .medal::after,
  .idcard .idface--back .medal,.idcard .seal,.idcard .seal path,.idcard .status i{animation:none!important;transition:none!important}
  .idcard .fpfull::after,.idcard .idface--back .medal::after{opacity:0!important}
}
:root[data-motion="reduced"] .idcard .fpfull::before,:root[data-motion="reduced"] .idcard .fpfull::after,:root[data-motion="reduced"] .idcard .fpfull span::after,
:root[data-motion="reduced"] .idcard .medal::before,:root[data-motion="reduced"] .idcard .idface--back .medal::after,:root[data-motion="reduced"] .idcard .idface--back .medal,
:root[data-motion="reduced"] .idcard .seal,:root[data-motion="reduced"] .idcard .seal path,:root[data-motion="reduced"] .idcard .status i{animation:none!important;transition:none!important}
:root[data-motion="reduced"] .idcard .fpfull::after,:root[data-motion="reduced"] .idcard .idface--back .medal::after{opacity:0!important}

/* ---- the hint under the card never moves the card ------------------------- */
.idhint{margin-top:var(--s3);text-align:center;font-size:.8125rem;line-height:1.5;color:var(--mute);max-width:44ch;height:6em;overflow:visible}
.keyslip,.keyslips{display:none}

/* About: toolbox and colophon */
.about-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s12) clamp(32px,6vw,80px);align-items:start}
@media (max-width:900px){.about-cols{grid-template-columns:1fr}}
.about-sub{margin-top:6px;max-width:52ch}
.about-sub2{margin-top:var(--s5)}
.about-colophon{margin-top:var(--s5)}
.langs{list-style:none;padding:0;margin:var(--s5) 0 0;display:grid;gap:12px}
.langs li{display:grid;grid-template-columns:minmax(80px,7rem) minmax(0,1fr) 3rem;grid-template-areas:"n bar v" ". h h";align-items:center;column-gap:12px;row-gap:1px}
.langs__n{grid-area:n;font-size:.9375rem;font-weight:500;color:var(--fg)}
.langs__bar{grid-area:bar;height:6px;border-radius:4px;background:var(--fill-strong);overflow:hidden}
.langs__bar i{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--accent)}
.langs__v{grid-area:v;text-align:right;font-family:var(--font-mono);font-size:.8125rem;color:var(--fg)}
.langs__h{grid-area:h;font-size:.75rem;color:var(--mute)}

/* ---- Page: legal ---------------------------------------------------------- */
.legal-grid{display:grid;grid-template-columns:240px minmax(0,var(--prose));gap:clamp(32px,6vw,80px);align-items:start}
.toc{position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 28px);display:flex;flex-direction:column;gap:2px}
.toc .label{margin:0 0 var(--s3) var(--s3)}
.toc a{padding:.4rem .75rem;border-radius:8px;font-size:.875rem;color:var(--mute);line-height:1.35;transition:background-color var(--dur-fade) var(--ease),color var(--dur-fade) var(--ease)}
.toc a:hover{background:var(--fill);color:var(--fg)}
.toc a.on{color:var(--hi);background:var(--wash)}
.legal-grid > *{min-width:0}
@media (max-width:900px){
  .legal-grid{grid-template-columns:minmax(0,1fr);row-gap:0}
  .legal-grid .prose > [data-l] > :first-child{margin-top:0}
  .toc{position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));z-index:5;display:block;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter)) var(--s6);padding:10px var(--gutter);
    background:rgba(4,11,24,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-soft)}
  :root[data-paper] .toc{background:rgba(244,241,232,.9)}
  .toc::-webkit-scrollbar{display:none}
  .toc .label{display:none}
  .toc > [data-l]{flex-direction:row!important;gap:6px!important;width:max-content}
  .toc a{white-space:nowrap;border-radius:var(--r-full);box-shadow:inset 0 0 0 1px var(--line);padding:.35rem .8rem;font-size:.8125rem}
}
@media (max-width:767px){.toc{top:calc(56px + env(safe-area-inset-top,0px))}}
.prose{max-width:var(--prose)}
.prose h2{font-size:1.5rem;letter-spacing:-.02em;margin:var(--s12) 0 var(--s3);scroll-margin-top:calc(var(--nav-h) + 24px)}
.prose h3{font-family:var(--font-body);font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;margin:var(--s6) 0 var(--s2);color:var(--hi)}
.prose p,.prose li{color:#c4d0e3;margin-top:var(--s3)}
:root[data-paper] .prose p,:root[data-paper] .prose li,:root[data-paper] .prose td{color:var(--fg)}
.prose ul{padding-left:1.2rem}
.prose a{color:var(--accent-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.prose a:hover{color:var(--hi)}
.prose .meta{display:block;margin-top:var(--s2)}
.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 18px;margin-top:var(--s4);font-size:.9375rem}
.facts dt{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;color:var(--mute);padding-top:.15rem}
.facts dd{color:var(--fg);margin:0}

/* The receipt (privacy signature): paper, mono, perforated */
.receipt-wrap{position:relative;display:grid;justify-items:center;margin-block:var(--s8) var(--s4)}
.receipt-slot{width:min(380px,100%);height:14px;border-radius:7px;background:var(--well);box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 1px var(--line)}
.receipt{
  --zig:radial-gradient(circle at 6px 0,transparent 5.5px,#000 6px) 0 0/12px 100% repeat-x;
  position:relative;width:min(340px,calc(100% - 24px));margin-top:-7px;padding:26px 22px 30px;
  background:var(--paper);color:var(--paper-ink);font-family:var(--font-mono);font-size:.78rem;line-height:1.55;
  box-shadow:0 30px 50px -28px rgba(0,0,0,.85);
  -webkit-mask:linear-gradient(#000,#000) 0 0/100% calc(100% - 7px) no-repeat,radial-gradient(circle at 6px 7px,transparent 5px,#000 5.5px) 0 100%/12px 7px repeat-x;
  mask:linear-gradient(#000,#000) 0 0/100% calc(100% - 7px) no-repeat,radial-gradient(circle at 6px 7px,transparent 5px,#000 5.5px) 0 100%/12px 7px repeat-x;
  transform-origin:50% 0;
}
.receipt.printing{animation:print 1.1s var(--ease-ios) both}
@keyframes print{from{transform:translateY(-62%);clip-path:inset(62% 0 0 0)}to{transform:none;clip-path:inset(0 0 0 0)}}
.receipt h3{font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.2em;text-align:center;color:var(--paper-ink);font-weight:700;text-transform:uppercase}
.receipt .c{text-align:center;color:var(--paper-mute)}
.receipt hr{border:0;border-top:1px dashed #a49c82;margin:12px 0}
.receipt .ln{display:flex;gap:6px;align-items:baseline}
.receipt .ln .k{flex:none}
.receipt .ln .dots{flex:1 1 auto;min-width:12px;border-bottom:1px dotted #8f876d;transform:translateY(-4px)}
.receipt .ln .v{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.receipt .total{font-size:.95rem;font-weight:700;letter-spacing:.04em}
.receipt .barcode{display:flex;gap:1px;height:38px;margin:14px auto 4px;width:86%}
.receipt .barcode i{display:block;flex:1 1 auto;background:var(--paper-ink)}
.receipt small{display:block;margin-top:6px;color:var(--paper-mute);font-size:.68rem;line-height:1.45}

/* The envelope (imprint signature) */
.envelope{
  position:relative;margin-top:var(--s8);max-width:640px;border-radius:12px;overflow:hidden;
  background:var(--paper);color:var(--paper-ink);padding:clamp(22px,4vw,36px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.04);
}
.envelope::before{ /* airmail stripes along the top */
  content:"";position:absolute;left:0;right:0;top:0;height:7px;
  background:repeating-linear-gradient(-45deg,#2f4dff 0 12px,transparent 12px 20px,#5cc8ff 20px 32px,transparent 32px 40px);opacity:.85;
}
.envelope__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:start}
.envelope address{font-style:normal;font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;color:var(--paper-ink);margin-top:var(--s10)}
.envelope address b{color:var(--paper-ink);font-weight:600}
.envelope .from{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-mute)}
.stamp{
  position:relative;width:96px;height:118px;padding:7px;background:#fffdf7;
  /* perforation only along the edge: holes everywhere, plus the solid content box */
  -webkit-mask:radial-gradient(circle,transparent 3.4px,#000 3.9px) -5px -5px/10px 10px round,linear-gradient(#000,#000) content-box;
  mask:radial-gradient(circle,transparent 3.4px,#000 3.9px) -5px -5px/10px 10px round,linear-gradient(#000,#000) content-box;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));transform:rotate(3deg);cursor:pointer;
  transition:filter var(--dur-fade) var(--ease);
}
.stamp:hover{filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)) brightness(1.04)}
.stamp__in{height:100%;border-radius:2px;background:linear-gradient(160deg,#0f1e35,#040b18);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px 4px}
.stamp__in img{width:46px;height:46px}
.stamp__in span{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.12em;color:#8fd6ff}
.postmark{position:absolute;right:56px;top:66px;width:96px;height:96px;border-radius:50%;border:2px solid rgba(23,46,110,.55);color:rgba(23,46,110,.62);display:grid;place-items:center;transform:rotate(-14deg);font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;text-align:center;line-height:1.3;pointer-events:none}
.postmark::after{content:"";position:absolute;left:-60px;right:-60px;top:50%;height:22px;margin-top:-11px;background:repeating-linear-gradient(0deg,rgba(23,46,110,.5) 0 2px,transparent 2px 6px);-webkit-mask:linear-gradient(90deg,#000 0 28%,transparent 28% 72%,#000 72%);mask:linear-gradient(90deg,#000 0 28%,transparent 28% 72%,#000 72%)}
@media (max-width:560px){.envelope__grid{grid-template-columns:1fr}.stamp{position:absolute;right:16px;top:20px;width:74px;height:92px}.postmark{right:24px;top:96px;width:70px;height:70px}.postmark::after{display:none}.envelope address{margin-top:var(--s6)}}

/* ---- Page: 404 · the ink blot is the 0 in 4●4 ----------------------------- */
.lost{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:calc(620px + 2 * var(--gutter));padding-block:clamp(36px,7vh,80px) var(--s10)}
.lost .eyebrow{justify-content:center}
.code{position:relative;display:flex;align-items:center;justify-content:center;margin:12px 0 4px;font-family:var(--font-display);font-weight:600;font-size:clamp(96px,26vw,184px);line-height:1;letter-spacing:-.04em;color:var(--hi);user-select:none;-webkit-user-select:none}
.code .d{position:relative;z-index:1}
.slot{position:relative;width:.66em;height:.8em;margin:0 .02em}
.slot .blob,.slot .blob-static{position:absolute;left:50%;top:50%;width:1.3em;height:1.3em;max-width:none;transform:translate(-50%,-50%);display:block}
.slot .blob{touch-action:pan-y;cursor:grab}
:root.js .slot.blob-ready .blob-static{display:none}
:root:not(.js) .slot .blob{display:none}
.slot .bar{display:none;position:absolute;left:4%;right:4%;top:22%;bottom:22%;border-radius:2px;background:var(--fg)}
.slot .glow{position:absolute;left:50%;top:50%;width:1.6em;height:1.6em;margin:-.8em 0 0 -.8em;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.22),transparent);pointer-events:none;z-index:-1}
:root[data-status="403"] .slot .blob,:root[data-status="403"] .slot .blob-static,:root[data-status="403"] .slot .glow{display:none}
:root[data-status="403"] .slot .bar{display:block}
.lost__title{margin-top:12px}
.lost .lead{margin:10px auto 0;max-width:42ch}
.didyou{margin-top:22px;font-family:var(--font-mono);font-size:.8125rem;line-height:1.5;color:var(--mute)}
.didyou code{color:var(--fg)}
.lost .keys{justify-content:center;margin-top:14px}
.lost__alt{width:100%;margin-top:var(--s8);text-align:left}
.lost__receipt{margin-top:var(--s7);max-width:100%;font-family:var(--font-mono);font-size:.8125rem;line-height:1.5;color:var(--mute);overflow-wrap:anywhere}
.lost__receipt .cursor{width:.6ch;height:1.05em;margin-left:4px;vertical-align:-.2em}
@media (max-width:420px){.lost .keys .key{width:100%}}

/* ---- Vault: your hand, Skat style ------------------------------------------ */
.vault-head .display-l{margin-top:20px}
.vault-head .lead{margin-top:20px}
.vault-head .note{margin-top:14px}
.eyebrow.glow{animation:eyeglow 1.2s var(--ease)}
@keyframes eyeglow{30%{color:var(--accent-text);text-shadow:0 0 14px rgba(var(--accent-rgb),.7)}}
.vault-stage{padding-top:var(--s4)}
.vhand{--cw:clamp(84px,11vw,112px);position:relative;max-width:900px;height:calc(var(--cw) * 1.4 + 64px);margin-inline:auto}
.vcard{
  position:absolute;left:50%;bottom:0;width:var(--cw);aspect-ratio:5/7;margin-left:calc(var(--cw) / -2);
  transform-origin:50% 140%;transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg));
  transition:transform 600ms var(--ease-ios);perspective:700px;
}
.vcard.got:hover{transform:translate(var(--x,0px),calc(var(--y,0px) - 6px)) rotate(var(--r,0deg));transition-duration:var(--dur-press)}
.vcard__in{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform 640ms var(--ease-soft)}
.vcard.down .vcard__in{transform:rotateY(180deg)}
.vcard.unflip .vcard__in{transition:transform 150ms var(--ease-exit)}
.vcard__face,.vcard__back{position:absolute;inset:0;overflow:hidden;border-radius:calc(var(--cw) * .09);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.vcard__face{background:#fbfaf6;color:#1c1c1e;font-family:var(--font-body);font-weight:700;box-shadow:0 10px 24px -10px rgba(0,0,0,.8),inset 0 0 0 1px rgba(0,0,0,.16)}
.vcard__face::before{content:"";position:absolute;inset:7%;border-radius:4px;border:1px solid rgba(0,0,0,.07)}
.vcard__back{transform:rotateY(180deg);background:linear-gradient(160deg,#16294a,#08122a);box-shadow:0 10px 24px -10px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.08)}
.vcard__back span{position:absolute;inset:8%;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.16);
  background:repeating-linear-gradient(90deg,#2a4568 0 10px,transparent 10px 14px) 50% 40%/76% 9% no-repeat,
             repeating-linear-gradient(90deg,#2a4568 0 16px,transparent 16px 20px) 50% 55%/60% 9% no-repeat,
             repeating-linear-gradient(90deg,#2a4568 0 7px,transparent 7px 11px) 50% 70%/44% 9% no-repeat,
             radial-gradient(circle at 50% 20%,rgba(var(--accent-rgb),.35) 0 8%,transparent 9%)}
.vcard .ix{position:absolute;left:9%;top:6%;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1;font-size:calc(var(--cw) * .17)}
.vcard .ix b{color:inherit;font-weight:700}
.vcard .ix i{display:block;font-style:normal}
.vcard .ix svg{width:.8em;height:.8em}
.vcard .ix--r{left:auto;top:auto;right:9%;bottom:6%;transform:rotate(180deg)}
.vcard .pip{position:absolute;inset:0;display:grid;place-items:center}
.vcard .pip svg{width:44%;height:auto}
.vcard.red .vcard__face{color:#d42a22}
.vcard.green .vcard__face{color:#1f7a37}
.vcard.orange .vcard__face{color:#d26a00}
.vskat{display:grid;justify-items:center;gap:10px;margin-top:var(--s8)}
.vskat__cards{display:flex;gap:14px;min-height:calc(clamp(62px,7.5vw,80px) * 1.4)}
.vskat .vcard{--cw:clamp(62px,7.5vw,80px);position:relative;left:auto;bottom:auto;margin:0;transform:rotate(-5deg)}
.vskat .vcard:nth-child(2){transform:rotate(6deg) translateY(4px)}
.vskat .vcard.got:hover{transform:rotate(0deg) translateY(-4px)}
.vempty{display:grid;justify-items:center;gap:8px;max-width:46ch;margin:var(--s8) auto 0;text-align:center}
.vempty .keys{justify-content:center;margin-top:var(--s3)}
@media (max-width:559px){
  .vhand{--cw:56px;display:grid;grid-template-columns:repeat(5,var(--cw));gap:10px;justify-content:center;height:auto}
  .vhand .vcard{position:relative;left:auto;bottom:auto;margin:0;width:var(--cw);transform:none}
  .vhand .vcard.got:hover{transform:translateY(-3px)}
}
@media (max-width:359px){
  .vhand{--cw:48px}
}
.vault-cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s10) var(--s8);margin-top:var(--s12);align-items:start}
.vault-cols > .group{margin-top:0}
@media (max-width:900px){.vault-cols{grid-template-columns:1fr}}
.vault-danger{margin-top:var(--s12)}
.vlist .row{align-items:flex-start}
.vtile{display:inline-flex;align-items:center;justify-content:center;gap:1px;font-family:var(--font-body);font-weight:700;font-size:.78rem;background:#fbfaf6;color:#1c1c1e;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.vtile svg{width:11px;height:11px}
.vtile.red{color:#d42a22}
.vtile.green{color:#1f7a37}
.vtile.orange{color:#d26a00}
.vtile.off{background:var(--fill-strong);color:var(--faint)}
.redact{display:inline-block;width:var(--w,8em);max-width:100%;height:.78em;border-radius:3px;background:var(--line-strong);vertical-align:-.04em}
.row__tip{display:block;margin-top:6px;padding:8px 10px;border-radius:8px;background:var(--wash);color:var(--accent-text);font-size:.8125rem;line-height:1.45;outline:none}
.row__tip.in{animation:tipin 200ms var(--ease-soft)}
@keyframes tipin{from{opacity:0;transform:translateY(-4px)}}
.vrow__end{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.vtipbtn{min-height:32px;padding:.35rem .7rem;font-size:.8125rem;white-space:nowrap}
.vlist__foot{margin:10px 16px 0}
@media (max-width:480px){
  .vrow{flex-wrap:wrap}
  .vrow__end{flex-direction:row;flex-wrap:wrap;align-items:center;width:100%;padding-left:46px}
}
.minicard{flex:none;display:grid;place-items:center;width:44px;height:28px;border-radius:5px;overflow:hidden;transform:rotate(-3deg);
  font-family:var(--font-display);font-size:.62rem;font-weight:600;letter-spacing:.02em;color:#fff;
  background:linear-gradient(150deg,#16294a,#091629);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45),0 0 16px -4px rgba(var(--accent-rgb),.6)}
.minicard[data-edition="foil"]{background:linear-gradient(112deg,#16294a 30%,#3a5c92 48%,#16294a 64%)}
.minicard[data-edition="holo"]{background:linear-gradient(112deg,#5cc8ff,#2f4dff,#8fd6ff,#5cc8ff)}
.minicard[data-edition="silver"]{background:linear-gradient(150deg,#eef2f6,#bcc6d1 40%,#f6f8fa 60%,#a3aebb);color:#0e1124}
.minicard[data-edition="gold"]{background:linear-gradient(150deg,#3b2a08,#1f1604);box-shadow:inset 0 0 0 1px rgba(245,200,76,.7),0 0 18px -4px rgba(245,200,76,.7);color:#f5c84c}
.minicard.spin{animation:minispin 900ms var(--ease-ios)}
@keyframes minispin{from{transform:rotate(-3deg) rotateY(0)}to{transform:rotate(-3deg) rotateY(360deg)}}
.ladder{list-style:none;padding:0;margin:var(--s3) var(--s4) 0;display:flex;flex-wrap:wrap;gap:6px}
.ladder li{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 .6rem;border-radius:var(--r-full);background:var(--fill);font-family:var(--font-mono);font-size:.6875rem;color:var(--mute)}
.ladder li b{font-family:var(--font-body);font-size:.75rem;font-weight:600;color:inherit}
.ladder li.on{color:var(--fg)}
.ladder li.now{color:var(--accent-text);background:var(--wash);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3)}

/* The four jacks (type "trumpf"): playing cards fan up from below */
.pcard{
  position:absolute;bottom:0;left:0;width:clamp(96px,14vw,140px);aspect-ratio:5/7;transform-origin:50% 130%;border-radius:10px;background:#fbfaf6;color:#111;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.2) inset;
  display:flex;flex-direction:column;justify-content:space-between;padding:8px 9px;font-family:var(--font-body);font-weight:700;
}
.pcard .r{font-size:1.1rem;line-height:1}
.pcard .s{display:grid;place-items:center}
.pcard .s svg{width:46%;height:auto}
.pcard .r2{transform:rotate(180deg);align-self:flex-end}
.jackfan{position:fixed;inset:0;z-index:105;pointer-events:none;overflow:hidden}
.jackfan__in{position:absolute;left:50%;bottom:12vh;width:0;height:0}
.jackfan .pcard{transform:translate(-50%,75vh);transition:transform 640ms var(--ease-ios)}

/* ---- Confetti (rewards only) --------------------------------------------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:110;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;will-change:transform;animation:fall var(--d,3s) linear forwards}
@keyframes fall{to{transform:translate3d(var(--x,0),110vh,0) rotate(var(--r,540deg))}}

/* ---- Burst (ink splatter egg) -------------------------------------------- */
.burst{position:fixed;inset:0;z-index:105;pointer-events:none;display:grid;place-items:center}

/* ---- View transitions (Trumpf: tabs crossfade, push slides, nav stands still) */
@view-transition{navigation:auto}
/* behind the snapshots: the page colour, never the browser's white (the old page fades out faster than the new one fades in) */
::view-transition{background-color:var(--void)}
/* tabs: the old page stays opaque, the new one dissolves over it, so every frame is fully covered */
::view-transition-group(root){animation-duration:var(--dur-rise);animation-timing-function:var(--ease-soft)}
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:var(--dur-fade) var(--ease) both vt-fade-in,var(--dur-rise) var(--ease-soft) both vt-rise;mix-blend-mode:normal}
:root[data-vt="push"]::view-transition-group(root),:root[data-vt="back"]::view-transition-group(root){animation-duration:var(--dur-push);animation-timing-function:var(--ease-ios)}
:root[data-vt="push"]::view-transition-old(root){animation:260ms var(--ease) both vt-fade-out,var(--dur-push) var(--ease-ios) both vt-parallax}
:root[data-vt="push"]::view-transition-new(root){animation:var(--dur-push) var(--ease-ios) both vt-from-right}
:root[data-vt="back"]::view-transition-old(root){animation:380ms var(--ease-ios) both vt-to-right;z-index:2}
:root[data-vt="back"]::view-transition-new(root){animation:380ms var(--ease-ios) both vt-from-parallax,220ms var(--ease) both vt-fade-in}
::view-transition-group(nav),::view-transition-group(tabbar),::view-transition-group(atmo){animation:none}
.atmo{view-transition-name:atmo}
::view-transition-group(skat){animation-duration:var(--dur-push);animation-timing-function:var(--ease-ios);z-index:50}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}
@keyframes vt-rise{from{transform:translateY(8px)}}
@keyframes vt-parallax{to{transform:translateX(-30%)}}
@keyframes vt-from-right{from{transform:translateX(100%)}}
@keyframes vt-to-right{to{transform:translateX(100%)}}
@keyframes vt-from-parallax{from{transform:translateX(-30%)}}

/* ---- Reduced motion: Trumpf's switch and the system setting ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .cursor{animation:none}
}
:root[data-motion="reduced"] *,:root[data-motion="reduced"] *::before,:root[data-motion="reduced"] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
:root[data-motion="reduced"] .cursor{animation:none}
/* page changes with reduced motion, switch and system alike: a 140 ms linear
   dissolve without offset; push and back dissolve too, the old page never fades in */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*){animation:none!important}
  ::view-transition-old(*){animation:none!important;z-index:auto!important;mix-blend-mode:normal!important}
  ::view-transition-new(*){animation:140ms linear both vt-fade-in!important;mix-blend-mode:normal!important}
}
:root[data-motion="reduced"]::view-transition-group(*){animation:none!important}
:root[data-motion="reduced"]::view-transition-old(*){animation:none!important;z-index:auto!important;mix-blend-mode:normal!important}
:root[data-motion="reduced"]::view-transition-new(*){animation:140ms linear both vt-fade-in!important;mix-blend-mode:normal!important}

/* ---- Print: the paper edition ---------------------------------------------- */
@media print{
  :root{--void:#fff;--deep:#fff;--fg:#111;--hi:#000;--mute:#444;--line-soft:#ccc;color-scheme:light;--accent:#0b62c4;--accent-rgb:11,98,196;--accent-text:#0a56ad}
  .nav,.tabbar,.atmo,.toasts,.foot .bars,.term,.keys,.cmdk,.toc,dialog{display:none!important}
  body{background:#fff;color:#111;font-size:11pt}
  .app{padding:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
  .printnote{display:block!important;margin-top:24pt;font-family:var(--font-mono);font-size:8pt;color:#555;border-top:1px dashed #999;padding-top:8pt}
}
.printnote{display:none}

/* ---- Privacy: receipt details, tables, objection box ---------------------- */
.receipt{width:min(304px,calc(100% - 24px));font-size:.8125rem}
.receipt b{color:var(--paper-ink);font-weight:700}
.receipt .sec{margin:2px 0 6px;font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-ink)}
.receipt .subln{font-size:.75rem;color:#3a4062}
.receipt .subln .dots{border-bottom-color:transparent}
.receipt .mini{font-size:.6875rem;line-height:1.45;color:var(--paper-mute);margin:0 0 4px}
.receipt .mono-l{overflow-wrap:anywhere;color:var(--paper-ink)}
.receipt .warnv{color:#b3261e}
.receipt .ln .v{color:#174ea6}
.receipt .total .v{color:var(--paper-ink)}
.receipt--idle{padding-bottom:18px}
.receipt--idle .c:last-child{margin-top:6px}
.receipt:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.prose .lead-p{font-size:1.15rem;line-height:1.55;color:var(--fg);margin-top:var(--s8)}
.prose .list.summary{margin-top:var(--s3);padding:0}
.prose .list.summary li{margin:0}
.prose .list.summary .row{min-height:0;padding:12px 16px}
.prose .list.summary .row__hint{margin:0;color:var(--mute)}
.row__meta{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;color:var(--mute);margin-top:3px}
.prose code{font-family:var(--font-mono);font-size:.86em;padding:.1em .38em;border-radius:5px;background:var(--wash);color:var(--accent-text)}
.tablewrap{overflow-x:auto;margin-top:var(--s4);border-radius:var(--r-card);box-shadow:0 0 0 1px var(--line-soft);background:var(--deep)}
.prose table{width:100%;border-collapse:collapse;font-size:.875rem;line-height:1.45}
.prose th{text-align:left;font-weight:600;color:var(--hi);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.prose td{padding:10px 14px;color:#c4d0e3;border-top:1px solid var(--line-soft);vertical-align:top}
.prose tr:first-child td{border-top:0}
.prose td code{white-space:nowrap}
.objection{margin-top:var(--s6);padding:18px 20px;border-radius:var(--r-card);background:var(--wash);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.32)}
.objection__t{font-weight:600;color:var(--hi)!important;margin:0!important}
.objection p{margin-top:var(--s2)}
/* open points before going live: never in running text, always a box under the block (Gestaltung r2 §5) */
.gate{display:flex;align-items:flex-start;gap:12px;margin-top:14px;padding:12px 14px;border:1px dashed var(--faint);border-radius:var(--r-key);color:var(--mute);font-size:.875rem;line-height:1.5;max-width:640px}
@media print{.gate{display:none!important}}
.gate__icon{flex:none;width:18px;height:18px;margin-top:2px;color:var(--accent-text)}
.gate__label{display:block;margin-bottom:2px;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.gate p{margin:0}
.group--danger [data-wipe].restore .row__title{color:var(--accent-text)}
.group--danger [data-wipe][aria-disabled="true"]{cursor:default;opacity:.7}

.legal-narrow{max-width:var(--prose)}
.disclose{margin-top:var(--s8);border-radius:var(--r-card);background:var(--deep);box-shadow:0 0 0 1px var(--line-soft),var(--highlight)}
.disclose summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:600;color:var(--hi);display:flex;align-items:center;justify-content:space-between;gap:12px}
.disclose summary::-webkit-details-marker{display:none}
.disclose summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);transition:transform var(--dur-control) var(--ease-ios)}
.disclose[open] summary::after{transform:rotate(-135deg)}
.disclose ul{padding:0 16px 16px 34px;margin:0}
.disclose li{margin-top:6px}

/* ===========================================================================
   2.0 additions: top-layer toasts, honest status pill, terminal autosuggest,
   home layout, footer rows, secrets. Kept together so they can be reviewed.
   =========================================================================== */

/* Toasts live in the top layer (popover), so they also show above sheets */
.toasts[popover]{inset:calc(env(safe-area-inset-top,0px) + 12px) 0 auto 0;margin:0;width:auto;height:auto;max-width:none;max-height:none;padding:0 16px;border:0;background:transparent;color:inherit;overflow:visible}
.toasts{gap:8px}
.toast .tile--gold{background:rgba(245,200,76,.16);color:var(--gold)}

/* Nav: clear at the top so the bloom shows, material once you scroll */
.nav{transition:background-color var(--dur-control) var(--ease),border-color var(--dur-control) var(--ease),backdrop-filter var(--dur-control) var(--ease)}
:root.js:not(.scrolled) .nav{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
:root.js:not(.scrolled) .nav .scan{opacity:.55}

/* Status pill: Jan's local time; after midnight it says so */
.live__label{display:inline-flex;align-items:center}
/* the clock arrives with ink.js: its place is kept from the first paint */
.live__t:not(.is-set){visibility:hidden}
/* online or offline: boot.js sets data-jan-night (before 5 at Jan's) before the first paint */
:root[data-jan-night] .live__st .st-on,:root:not([data-jan-night]) .live__st .st-off{display:none}
:root:not(.js) .live__t{display:none}
.live__t::before{content:"·";margin:0 .45em;opacity:.7}
.live.night{color:var(--accent-text);background:var(--wash);border-color:rgba(var(--accent-rgb),.3)}
.live.night .live__dot{background:var(--accent-text);box-shadow:0 0 10px var(--accent)}
@media (max-width:429px){:root.js .live__st{display:none}.live__t::before{display:none}.live{padding:0 .6rem;letter-spacing:.08em}}
@media (max-width:339px){.brand__word{display:none}}

/* The cursor that sometimes talks (morse) */
.cursor.morse{animation:none;transition:opacity 30ms linear}
.cursor.morse.off{opacity:.06}

/* Fine pointer vs. touch wording */
.only-coarse{display:none}
/* ⌘K or Strg K: boot.js marks Apple devices before the first paint */
:root:not([data-keys="mac"]) .k-mac,:root[data-keys="mac"] .k-pc{display:none}
@media (pointer:coarse){.only-fine{display:none}.only-coarse{display:inline}}

/* Terminal: fish-style ghost suggestion, candidates, chips */
.term__log{display:block}
.term-field{position:relative;flex:1 1 auto;min-width:4ch;margin-left:.45rem;display:grid}
.term-field .term-input{grid-area:1/1;width:100%;margin-left:0;position:relative;z-index:1}
.term-ghost{grid-area:1/1;white-space:pre;overflow:hidden;color:transparent;pointer-events:none}
.term-ghost .typed{visibility:hidden}
.term-ghost .rest{color:var(--faint)}
.term-cands{margin:.25rem 0 0;color:var(--mute);white-space:pre-wrap}
.term-cands:empty{display:none}
.term-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px var(--s4) 12px;border-top:1px solid var(--line)}
.term-chip{height:30px;padding:0 .75rem;border-radius:var(--r-full);font-family:var(--font-mono);font-size:.75rem;color:var(--mute);background:var(--fill);box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:color var(--dur-fade) var(--ease),background-color var(--dur-fade) var(--ease),transform var(--dur-press) var(--ease-soft)}
.term-chip:hover{color:var(--fg);background:var(--fill-strong)}
.term-chip:active{transform:scale(.96)}
dialog.sheet--term .term-chips{position:sticky;bottom:0;background:var(--float)}

/* Reduced motion: a still blot instead of a splash */
.stillblot{position:fixed;z-index:105;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity 300ms var(--ease);
  background:radial-gradient(closest-side,rgba(var(--accent-rgb),.55),rgba(var(--electric-rgb),.35) 60%,transparent 72%)}
.stillblot.on{opacity:1}

/* ---- Home: hero and the live card side by side from 1024 px -------------- */
.home-top{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(32px,4vw,64px);align-items:center}
.home-top .hero h1{max-width:12ch}
.home-live{padding-bottom:var(--s6)}
@media (min-width:1024px){
  .home-top{grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);padding-block:clamp(56px,8vw,112px) clamp(24px,3vw,40px)}
  .home-top .hero{padding-block:0}
  .home-live{padding-bottom:0}
}
.livecard{min-height:0}
.livecard__head{display:flex;align-items:center;gap:var(--s4)}
.livecard__head .title-1{margin-top:4px}
.livecard__head .livecard__icon{width:52px;height:52px}
.livecard__chart{margin-top:var(--s5);min-height:0}
.livecard__last{display:flex;flex-direction:column;align-items:flex-end;gap:3px;max-width:22ch;text-align:right;font-size:.8125rem;line-height:1.35;color:#c3d3ea}
.livecard .keys{margin-top:var(--s6)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.sec-head .note{margin:0}
/* ---- Startseite · Kapitel (m4 a, B): the terminal, five chapters, the seal as the finale ----
   A close beat between the levels (--ch-gap; Paket 42: the motion parts them now, not empty air), dense
   inside (--ch-in). One moment per screen, first appearance only:
   ink.js adds .is-in to [data-reveal] (IntersectionObserver) and :root.home-anim only when motion is on,
   so without JS or with reduced motion everything stands in its end state. Only transform/opacity move. */
:root{
  --ch-gap:clamp(56px,4vw + 32px,88px);
  --ch-top:clamp(40px,3vw + 14px,56px);
  --ch-in:clamp(20px,2.2vw,28px);
  --say:clamp(2rem,1.25rem + 3.4vw,4rem);
  --fp:clamp(1.05rem,.7rem + 2.4vw,2.125rem);
  --seal:clamp(96px,8vw + 40px,148px);
  --card-face:#fffdf7;--card-ink:#0e1124;--card-green:#1d7a4a;--card-back:#13295c;--card-back-2:#0a1838;
  --seal-face:var(--line);--seal-hi:rgba(var(--accent-rgb),.3);--seal-lo:rgba(0,0,0,.7)
}
:root[data-paper]{--seal-hi:rgba(255,255,255,.95);--seal-lo:rgba(60,48,20,.32)}
.home-ch{padding-top:var(--ch-gap);scroll-margin-top:max(0px,calc(var(--nav-h) + var(--s4) - var(--ch-gap)))}
.home-chapters > .home-term{padding-top:var(--ch-top)} /* hero → terminal, the first level */
.home-head{margin-bottom:var(--ch-in)}
.home-path{display:block;margin:0 0 var(--s3);font-family:var(--font-mono);font-size:.8125rem;line-height:1.4;letter-spacing:0;color:var(--accent-text)}
.home-path i{font-style:normal;color:var(--mute)}
.home-title{margin:0;font-family:var(--font-display);font-size:clamp(1.75rem,1.2rem + 1.8vw,2.5rem);line-height:1.08;letter-spacing:-.03em;font-weight:500;color:var(--hi);text-wrap:balance;max-width:24ch}
.home-sub{margin:var(--s3) 0 0;color:var(--mute);max-width:54ch}
.home-more{display:inline-flex;align-items:center;gap:.4em;min-height:44px;margin-top:var(--s3);color:var(--accent-text);font-weight:500;font-size:.9688rem}
.home-more svg{width:16px;height:16px;flex:none;transition:transform var(--dur-press) var(--ease-soft)}
.home-more:hover svg{transform:translateX(3px)}
.home-chapters code{font-family:var(--font-mono);font-size:.94em}
.home-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s6) clamp(32px,6vw,96px);align-items:start}
.home-split > .home-head{margin:0}
@media (max-width:860px){.home-split{grid-template-columns:minmax(0,1fr)}}

/* B1 · Satz (air): the words rise, then "fertig"/"done" fills with ink (a wipe made of two opposite transforms) */
.home-say{margin:0;font-family:var(--font-display);font-size:var(--say);line-height:1.04;letter-spacing:-.04em;font-weight:500;color:var(--hi);max-width:16ch;text-wrap:balance}
.home-say .w{display:inline-block}
.home-fill{position:relative;display:inline-block}
.home-fill__ink{position:absolute;inset:0;overflow:hidden;color:var(--accent-text);white-space:nowrap}
.home-fill__ink > span{display:inline-block}
.home-say.is-in .w{transition:opacity .5s var(--ease-soft) calc(var(--i) * 70ms),transform .8s var(--ease-soft) calc(var(--i) * 70ms)}
.home-say.is-in .home-fill__ink,.home-say.is-in .home-fill__ink > span{transition:transform 1.2s var(--ease-ios) .7s}

/* B2 · Werkstatt (dense) */
.home-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin:0;padding:0;list-style:none}
.home-card{position:relative;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s6);border-radius:var(--r-card);background:var(--deep);box-shadow:0 0 0 1px var(--line),var(--highlight);transition:background-color var(--dur-fade) var(--ease),transform var(--dur-press) var(--ease-soft)}
.home-card:hover{background:var(--raised)}
.home-card:active{transform:scale(.985)}
.home-card:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.home-card a{color:inherit}
.home-card a:focus-visible{outline:none}
.home-card a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.home-card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.home-card h3{margin:0;font-family:var(--font-display);font-size:1.375rem;line-height:1.15;letter-spacing:-.02em;font-weight:500;color:var(--hi)}
.home-card p{margin:0;font-family:var(--font-mono);font-size:.8125rem;line-height:1.5;color:var(--mute)}
.home-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-full);font-family:var(--font-mono);font-size:.6875rem;color:var(--fg);background:var(--fill-strong);white-space:nowrap}
.home-pill--live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.home-emb{display:flex;align-items:center;height:40px}
.home-emb--drops i{width:22px;height:22px;border-radius:50%;background:var(--accent);opacity:.9}
.home-emb--drops i + i{margin-left:-7px;width:15px;height:15px;opacity:.6}
.home-emb--drops i + i + i{margin-left:-4px;width:9px;height:9px;opacity:.4}
.home-emb--lang{font-family:var(--font-mono);font-size:.875rem;color:var(--accent-text);gap:.5em}
.home-emb--lang b{font-weight:500;padding:2px 7px;border-radius:6px;background:var(--wash)}
.home-emb--tiles{display:grid;grid-template-columns:repeat(2,18px);grid-auto-rows:18px;gap:3px;height:auto}
.home-emb--tiles b{display:grid;place-items:center;border-radius:4px;background:var(--wash-strong);font-family:var(--font-display);font-size:.625rem;color:var(--accent-text)}
@media (max-width:767px){.home-cards{grid-template-columns:minmax(0,1fr);gap:var(--s3)}.home-card{padding:var(--s5)}}

/* B3 · Server (air with data): an ink stroke through every missing thing */
.home-srv{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s10) clamp(32px,6vw,96px);align-items:start}
.home-hosts{margin:0;padding:0;list-style:none}
.home-hosts li{display:flex;flex-direction:column;gap:2px;padding:var(--s3) 0;border-top:1px solid var(--line)}
.home-hosts li:last-child{border-bottom:1px solid var(--line)}
.home-host{font-family:var(--font-mono);font-size:.9375rem;color:var(--hi)}
.home-host-d{font-size:.875rem;line-height:1.45;color:var(--mute)}
.home-gone{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);margin:var(--s3) 0 0;padding:0;list-style:none}
.home-gone li{position:relative;font-family:var(--font-display);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.25rem);line-height:1.25;letter-spacing:-.025em;color:var(--mute)}
.home-gone li::after{content:"";position:absolute;left:-.05em;right:-.05em;top:54%;height:.085em;border-radius:.05em;background:var(--accent);opacity:.9;transform-origin:0 50%}
.home-gone.is-in li::after{transition:transform .36s var(--ease-soft) calc(var(--i) * 250ms + 150ms)}
@media (max-width:860px){.home-srv{grid-template-columns:minmax(0,1fr)}}

/* B4 · Logbuch (dense, small): the three newest changelog entries, built in */
.home-log{margin:0;padding:0;list-style:none}
.home-log li{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:var(--s1) var(--s5);padding:var(--s4) 0;border-top:1px solid var(--line)}
.home-log li:last-child{border-bottom:1px solid var(--line)}
.home-log time{font-family:var(--font-mono);font-size:.8125rem;line-height:1.85;color:var(--mute)}
.home-log p{margin:0;font-size:1rem;line-height:1.55;color:var(--fg)}
.home-gitlog{display:inline-flex;align-items:center;gap:.6em;min-height:44px;margin-top:var(--s3);padding:0 .9rem;border:0;border-radius:var(--r-full);background:var(--fill);box-shadow:inset 0 0 0 1px var(--line-soft);font-family:var(--font-mono);font-size:.8125rem;color:var(--fg);cursor:pointer}
.home-gitlog:hover{background:var(--fill-strong)}
.home-gitlog i{font-style:normal;color:var(--accent-text)}
.home-gitlog code{font-size:inherit}
@media (max-width:767px){.home-log li{grid-template-columns:minmax(0,1fr);gap:2px}.home-log time{line-height:1.4}}

/* B5 · Blatt (only from the first found card on; ink.js fills the fan from Ink.hand()) */
.home-hand{align-items:center}
.home-fan{--cw:72px;--step:40px;position:relative;height:calc(var(--cw) * 1.4 + 56px);margin:0 0 calc(var(--cw) * .21 + 33px);padding:0;list-style:none}
.home-c{position:absolute;left:50%;bottom:6px;width:var(--cw);height:calc(var(--cw) * 1.4);margin-left:calc(var(--cw) / -2);border-radius:8px;transform-origin:50% 100%;
  transform:translateX(calc(var(--k) * var(--step))) translateY(calc(var(--k) * var(--k) * 1.3px)) rotate(calc(var(--k) * 4.5deg))}
.home-c--face{background:var(--card-face);color:var(--card-ink);box-shadow:0 0 0 1px rgba(14,17,36,.14),0 10px 20px -12px rgba(0,0,0,.7)}
.home-c--green{color:var(--card-green)}
.home-c--red{color:#d42a22}
.home-c--orange{color:#d26a00}
.home-c--back{background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 2px,transparent 2px 7px),linear-gradient(160deg,var(--card-back),var(--card-back-2));box-shadow:inset 0 0 0 3px var(--card-back-2),inset 0 0 0 4px rgba(143,214,255,.38),0 0 0 1px rgba(2,6,14,.85),-8px 2px 14px -8px rgba(0,0,0,.7)}
.home-c b{position:absolute;left:7px;top:5px;color:inherit;font-family:var(--font-display);font-size:calc(var(--cw) * .3);line-height:1;font-weight:600}
.home-c i{position:absolute;right:6px;bottom:4px;display:block;width:calc(var(--cw) * .36);height:calc(var(--cw) * .36)}
.home-c i svg{display:block;width:100%;height:100%}
.home-fan.is-in .home-c{transition:transform .8s var(--ease-ios) calc(var(--i) * 30ms)}
@media (max-width:767px){.home-fan{--cw:clamp(40px,12vw,48px);--step:clamp(17px,6vw,23px)}}

/* B6 · Siegel (signature): the seal stands blind-embossed (Prägung, §9) until the browser has recomputed the
   fingerprint; then the stamp lands in ink (or in --danger with ×). The box keeps var(--seal) in every state. */
.home-keys{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head head" "fp seal" "act seal" "links links";gap:var(--s6) clamp(24px,5vw,72px);align-items:center}
/* Paper: the seal's result colours from the page's paper set (.badge--live, .group--danger); scoped here,
   because a global --ok/--danger on paper would darken the dots and the .pl chips (dark text on --ok) */
:root[data-paper] .home-keys{--ok:#0f6b30;--danger:#c0213f;--danger-rgb:192,33,63}
.home-keys > .home-head{grid-area:head;margin:0}
.home-since{display:block;margin-top:var(--s3);font-family:var(--font-mono);font-size:.8125rem;color:var(--mute)}
.home-fp{grid-area:fp;justify-self:start;max-width:100%;position:relative;margin:0;padding:.08em 0 .16em;overflow:hidden;font-family:var(--font-mono);font-size:var(--fp);line-height:1.45;letter-spacing:.02em;color:var(--hi);font-variant-numeric:tabular-nums}
.home-fp > span{display:block;white-space:nowrap}
.home-g{position:relative;display:inline-block;font-weight:500}
.home-g::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--ok);transform:scaleX(0);transform-origin:0 50%;transition:transform .26s var(--ease-soft)}
.home-g.ok::after{transform:scaleX(1)}
.home-g.bad{color:var(--danger)}
.home-g.bad::after{background:var(--danger);transform:scaleX(1)}
.home-fp > .home-beam{position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.26),transparent);opacity:0;transform:translateX(-110%);pointer-events:none}
.home-keys.is-run .home-beam{animation:home-beam .95s linear both}
@keyframes home-beam{0%{opacity:0;transform:translateX(-110%)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(340%)}}
.home-act{grid-area:act;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5)}
.home-status{font-family:var(--font-mono);font-size:.8125rem;color:var(--mute)}
.home-keys.is-ok .home-status{color:var(--ok)}
.home-keys.is-bad .home-status{color:var(--danger)}
.home-links{grid-area:links;display:flex;flex-wrap:wrap;gap:0 var(--s6);margin:0;padding:0;list-style:none}
.home-links a,.home-links button{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:.9375rem;color:var(--mute);cursor:pointer}
.home-links a:hover,.home-links button:hover{color:var(--fg)}
.home-seal{position:relative;grid-area:seal;width:var(--seal);height:var(--seal);align-self:center}
.home-seal__svg{position:relative;z-index:1;display:block;width:100%;height:100%;overflow:visible}
.home-seal__pre{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--seal-face);
  font-family:var(--font-mono);font-size:7.4px;letter-spacing:.02em;
  filter:drop-shadow(-1px -1px 0 var(--seal-hi)) drop-shadow(1px 1px 0 var(--seal-lo));transition:opacity .2s var(--ease)}
.home-keys.is-ok .home-seal__pre,.home-keys.is-bad .home-seal__pre{opacity:0}
.home-seal__lit{color:var(--accent);opacity:0}
.home-seal__sweep{transform-box:view-box;transform-origin:60px 60px}
:root.home-anim .home-keys.is-run .home-seal__lit{animation:home-seal-lit .95s var(--ease) both}
:root.home-anim .home-keys.is-run .home-seal__sweep{animation:home-seal-sweep .95s var(--ease) both}
@keyframes home-seal-lit{0%{opacity:0}18%{opacity:.9}78%{opacity:.9}100%{opacity:0}}
@keyframes home-seal-sweep{from{transform:rotate(-70deg)}to{transform:rotate(290deg)}}
.home-seal__stamp{opacity:0;transform-box:view-box;transform-origin:60px 60px;transform:scale(1) rotate(-12deg);color:var(--accent)}
.home-seal__stamp .o{fill:none;stroke:currentColor;stroke-width:2.6}
.home-seal__stamp .i{fill:none;stroke:currentColor;stroke-width:1.2}
.home-seal__stamp text{fill:currentColor;font-family:var(--font-mono);font-size:7.4px;letter-spacing:.02em}
.home-seal__stamp .ck{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.home-seal__stamp .no{display:none}
.home-keys.is-ok .home-seal__stamp,.home-keys.is-bad .home-seal__stamp{opacity:.92;transform:scale(1) rotate(-12deg);transition:opacity .14s linear}
.home-keys.is-bad .home-seal__stamp{color:var(--danger)}
.home-keys.is-bad .home-seal__stamp .ck{display:none}
.home-keys.is-bad .home-seal__stamp .no{display:inline}
/* with motion the stamp waits big and turned, then lands (reduced motion: it only fades in, see above) */
:root.home-anim .home-seal__stamp{transform:scale(1.5) rotate(-26deg)}
:root.home-anim .home-keys.is-ok .home-seal__stamp,:root.home-anim .home-keys.is-bad .home-seal__stamp{transform:scale(1) rotate(-12deg);transition:transform .46s var(--ease-spring),opacity .14s linear}
@media (prefers-reduced-motion:reduce){.home-seal *{animation:none!important}.home-beam{display:none}}
:root[data-motion="reduced"] .home-seal *{animation:none!important}
:root[data-motion="reduced"] .home-beam{display:none}
@media (max-width:767px){.home-keys{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head head" "fp fp" "act seal" "links links";gap:var(--s5) var(--s4)}.home-act{flex-direction:column;align-items:flex-start;gap:var(--s2)}}

/* the waiting states exist only on screen with motion; print and reduced motion get the end state */
@media screen{
  :root.home-anim .home-say:not(.is-in) .w{opacity:0;transform:translate3d(0,.24em,0)}
  :root.home-anim .home-say:not(.is-in) .home-fill__ink{transform:translateX(-101%)}
  :root.home-anim .home-say:not(.is-in) .home-fill__ink > span{transform:translateX(101%)}
  :root.home-anim .home-gone:not(.is-in) li::after{transform:scaleX(0)}
  :root.home-anim .home-fan:not(.is-in) .home-c{transform:translateY(10px)}
}

/* ---- Startseite · Scroll (Paket 42): the levels surface one after another ------------------------
   Jan, 7.11.: you do not scroll a page, you swim from level to level and everything surfaces in turn.
   The parts carry [data-rise] in the page (the log rows come from the build and are named here).
   Jan chose b, Strömung (7.11.): CSS only, on scroll timelines. A browser without them gets a, which
   ink.js switches on with :root[data-scroll="a"]. Only transform and opacity move; reduced motion, print
   and a page without JS show every part in place at once, and a part with focus always stands still. */
/* order inside a row: b shifts the range by it */
.home-chapters :is(.home-card:nth-child(2),.home-srv > div > [data-rise],.home-log > li,.home-seal){--r:1}
.home-chapters .home-card:nth-child(3){--r:2}
/* the terminal prints in order: the greeting's parts carry their own --l (.mp, motd in term.js and in
   the page), then the prompt and the chips */
[data-term-inline] .term-form{--l:4.5}
[data-term-inline] .term-chips{--l:5.5}

/* a · Auftauchen (fallback without scroll timelines): a part surfaces once, when it reaches the screen, on the live card's curve from the
   intro; parts that arrive together follow each other (ink.js sets --d). Then the page stands still. */
@keyframes rise-a{from{opacity:0;transform:translate3d(0,var(--rise-y,28px),0) scale(.975)}}
@keyframes rise-line{from{opacity:0;transform:translate3d(0,8px,0)}}
@media screen{
  :root[data-scroll="a"].home-anim .home-chapters :is([data-rise],.home-log > li):not(.is-set){animation:rise-a 1.05s var(--ease-soft) var(--d,0ms) backwards paused}
  :root[data-scroll="a"].home-anim .home-chapters :is([data-rise],.home-log > li).is-up{animation-play-state:running}
  :root[data-scroll="a"].home-anim [data-term-inline]{--rise-y:44px}
  :root[data-scroll="a"].home-anim [data-term-inline]:not(.is-set) :is(.term__body > p,.term__log > p,.mp,.term-form,.term-chips){animation:rise-line .5s var(--ease-soft) calc(var(--d,0ms) + 420ms + var(--l,0) * 130ms) backwards paused}
  :root[data-scroll="a"].home-anim [data-term-inline]:not(.is-set) .motd-shackle{animation:motd-shut .42s cubic-bezier(.5,0,.75,0) calc(var(--d,0ms) + 980ms) backwards paused}
  :root[data-scroll="a"].home-anim [data-term-inline].is-up :is(.term__body > p,.term__log > p,.mp,.term-form,.term-chips,.motd-shackle){animation-play-state:running}
}

/* b · Strömung (Jan's choice): the scroll is the current. A part rises out of the depth while it crosses the lowest
   third of the screen and sinks back a little as it slides under the bar; scrolling up takes it back
   down. The terminal prints its lines as it rises. CSS only (scroll-driven, composited); a browser
   without scroll timelines gets a (ink.js). */
@keyframes rise-b{from{opacity:0;transform:translate3d(0,var(--rise-y,64px),0) scale(.94)}55%{opacity:1}}
@keyframes sink-b{35%{opacity:1;transform:none}to{opacity:.3;transform:scale(.965)}}
@keyframes rise-b-line{from{opacity:0;transform:translate3d(0,14px,0)}}
@keyframes motd-shut{from{transform:translate3d(0,-.5em,0)}}
@media screen and (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  :root.js:not([data-motion="reduced"]) .home-chapters :is([data-rise],.home-log > li){
    transform-origin:50% 100%;
    animation:rise-b cubic-bezier(.33,.66,.4,1) backwards,sink-b linear forwards;
    animation-timeline:view(block var(--nav-h) 0),view(block var(--nav-h) 0);
    animation-range:cover calc(var(--r,0) * 3vh) cover calc(32vh + var(--r,0) * 3vh),exit-crossing 0% exit-crossing 100%}
  :root.js:not([data-motion="reduced"]) [data-term-inline]{--rise-y:96px;view-timeline:--term block;view-timeline-inset:var(--nav-h) 0}
  :root.js:not([data-motion="reduced"]) [data-term-inline] :is(.term__body > p,.term__log > p,.mp,.term-form,.term-chips){
    animation:rise-b-line linear backwards;animation-timeline:--term;
    animation-range:cover calc(10vh + var(--l,0) * 3.5vh) cover calc(20vh + var(--l,0) * 3.5vh)}
  /* a · the padlock's shackle snaps shut once its lines stand */
  :root.js:not([data-motion="reduced"]) [data-term-inline] .motd-shackle{animation:motd-shut cubic-bezier(.5,0,.75,0) backwards;animation-timeline:--term;animation-range:cover 24vh cover 31vh}
  :root.js:not([data-motion="reduced"]) .home-chapters :is([data-rise],.home-log > li):focus-within,
  :root.js:not([data-motion="reduced"]) [data-term-inline]:focus-within :is(.term__body > p,.term__log > p,.mp,.term-form,.term-chips,.motd-shackle){animation:none}
}}

/* Rows with a sibling action (copy, download): never nested in the link */
.list > li.has-act{display:flex;align-items:center}
.list > li.has-act > .row{flex:1 1 auto;min-width:0}
/* the whole card is one surface: hovering the row tints the li, the button sits on top (Gestaltung r2 §2) */
.list > li.has-act{transition:background-color var(--dur-release) var(--ease)}
.list > li.has-act:has(> a.row:hover){background:var(--fill)}
.list > li.has-act:has(> a.row:active){background:var(--fill-pressed);transition-duration:0ms}
.list > li.has-act > a.row:hover,.list > li.has-act > a.row:active{background:transparent}
.row-act{flex:none;display:grid;place-items:center;width:40px;height:40px;margin-right:10px;border-radius:var(--r-key);color:var(--mute);
  transition:background-color var(--dur-fade) var(--ease),color var(--dur-fade) var(--ease),transform var(--dur-press) var(--ease-soft)}
.row-act:hover{background:var(--fill);color:var(--fg)}
.row-act:active{transform:scale(.94)}
.row-act svg{width:18px;height:18px}
.row-act--text{width:auto;height:36px;padding:0 .8rem;border-radius:var(--r-key);background:var(--wash);color:var(--accent-text);font-size:.875rem;font-weight:500;white-space:nowrap}
.row-act--text:hover{background:var(--wash-strong);color:var(--accent-text)}
@media (pointer:coarse){.row-act{width:44px;height:44px}.row-act--text{width:auto;height:auto;min-height:44px}} /* the text button follows its label on touch too */
@media (max-width:520px){
  .list > li.has-act:has(.row-act--text){flex-wrap:wrap}
  .row-act--text{margin:0 16px 14px 62px}
}
.fprow{display:flex;flex-wrap:wrap;column-gap:.6em;margin-top:5px;font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.02em;color:var(--fg)}
.fprow span{white-space:nowrap}
.row__hint .mono,.row__hint.mono{font-family:var(--font-mono);font-size:.78rem}
.row__title .hs{display:inline-block;width:16px;height:16px;margin-left:4px;vertical-align:-3px}

/* ---- Scratch bars: the hand bar ------------------------------------------- */
.bars{border-radius:4px}
.bars:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.bars__bar{display:block;height:11px;border-radius:2px;background:var(--line-strong)}
.bars.won{cursor:pointer}
.bars.won .bars__bar,.bars.won .bars__msg{display:none}
.bars__hand{display:inline-flex;align-items:center;gap:3px}
.bars__hand b{display:grid;place-items:center;width:12px;height:17px;border-radius:3px;background:var(--line-strong);font-size:9px;line-height:1;font-weight:700;color:#1c1c1e}
.bars__hand b svg{width:8px;height:8px}
.bars__hand b.got{background:#fbfaf6}
.bars__hand b.red{color:#d42a22}
.bars__hand b.green{color:#1f7a37}
.bars__hand b.orange{color:#d26a00}
.bars.won:hover .bars__hand b.got{transform:translateY(-1px)}

/* ---- Projects: Blaufeuer, Bock -------------------------------------------- */
.proj-hero{position:relative;scroll-margin-top:calc(var(--nav-h) + 24px)}
#karte{scroll-margin-top:var(--nav-h)}
.herocard .wm svg{display:inline-block;width:1em;height:1em;vertical-align:top}
.herocard::after{transition:opacity 300ms var(--ease),box-shadow 300ms var(--ease),height 300ms var(--ease)}
.herocard.heating::after{opacity:calc(.7 + var(--heat,0) * .3);height:calc(1px + var(--heat,0) * 2px);box-shadow:0 0 calc(var(--heat,0) * 28px) calc(var(--heat,0) * 4px) rgba(var(--accent-rgb),.75)}
.herocard.ablaze{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.55),0 -40px 90px -30px rgba(var(--electric-rgb),.9),0 30px 70px -30px rgba(var(--accent-rgb),.5)}
canvas.flames{position:absolute;z-index:3;pointer-events:none;max-width:none}
.herocard__icon{cursor:pointer;-webkit-tap-highlight-color:transparent}
.chip.chip--bock{background:#ffb340;color:#3a2400;font-weight:600;box-shadow:none}

/* ---- Print additions ----------------------------------------------------------- */
@media print{
  .idwrap,.idhint,.row-act,.term-chips,.vhand,.vskat,.ladder,.minicard,.lost .code,.bars{display:none!important}
  .about-grid,.about-cols,.vault-cols,.home-top{display:block}
  .livecard,.herocard{background:#fff!important;color:#000!important;box-shadow:none!important;border:1px solid #999}
  .livecard *,.herocard *{color:#000!important}
}

/* Projects: real app captures from the Play Store kit, lazy, scroll-snapped */
.shots{margin-top:var(--s6);border-radius:var(--r-card)}
.shots__rail:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-card)}
.shots__rail{list-style:none;margin:0;padding:4px 2px 14px;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,19vw,208px);gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.shots__rail li{scroll-snap-align:start}
.shots__rail img{width:100%;height:auto;aspect-ratio:9/16;border-radius:16px;background:var(--deep);box-shadow:0 0 0 1px var(--line-soft),0 18px 40px -20px rgba(0,0,0,.8)}
.shots__note{margin-top:2px}

/* Without JavaScript: hide controls that would do nothing (content stays) */
:root:not(.js) .cmdk,:root:not(.js) .tabbar [data-open-terminal],:root:not(.js) .livecard [data-sheet],:root:not(.js) .glassrow[data-sheet],:root:not(.js) .row-act[data-copy],:root:not(.js) [data-copy].key{display:none}
:root:not(.js) .tabbar{grid-template-columns:repeat(3,minmax(0,1fr))}

/* 404/403 eggs: the redacted zero, the sealed jack */
.slot .bar[role="button"]{cursor:pointer;transform-origin:100% 50%;transition:transform 420ms var(--ease-soft),opacity 300ms var(--ease)}
.slot .bar[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.slot .bar.gone{transform:scaleX(0);opacity:0}
:root[data-status="403"] .slot:has(.bar.gone)::after{content:"0";position:absolute;inset:0;display:grid;place-items:center;font:inherit;color:var(--hi);animation:vt-fade-in 300ms var(--ease-soft) both}
.vcard.sealed .vcard__face::after{content:"";position:absolute;right:10%;bottom:22%;width:22%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#f5c84c 45%,#b88a1d);box-shadow:0 0 0 2px rgba(184,138,29,.35),0 4px 10px -4px rgba(0,0,0,.5)}
.badge--gold{--b:var(--gold);--b-rgb:245,200,76}
:root[data-paper] .badge--gold{--b:#7d5a0c;--b-rgb:125,90,12}
.nb{white-space:nowrap}

/* ===========================================================================
   Review fixes (während): focus, print, no-JS, small screens, editions
   =========================================================================== */
/* Terminal: a visible focus (the input itself has no outline) */
[data-term-inline] .term:has(.term-input:focus-visible){box-shadow:0 0 0 2px rgba(var(--accent-rgb),.55),0 30px 80px -34px rgba(var(--accent-rgb),.65)}
.term-form{padding-bottom:2px}

/* Focus rings on the dark cards stay white (projects review, patch A) */
.herocard :focus-visible,.livecard :focus-visible{outline-color:#fff}

/* Lists on small phones: badge under the title, hints stay short */
@media (max-width:480px){
  .list--tiles .row:has(> .badge){display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:var(--s3);row-gap:6px}
  .list--tiles .row:has(> .badge) > .tile{grid-row:1 / span 2;align-self:start}
  .list--tiles .row:has(> .badge) > .row__text{grid-column:2;grid-row:1}
  .list--tiles .row:has(> .badge) > .badge{grid-column:2;grid-row:2;justify-self:start}
  .list--tiles .row:has(> .badge) > .chev,.list--tiles .row:has(> .badge) > .ext{grid-column:3;grid-row:1 / span 2;align-self:center}
}
.badge--tinker{--b:var(--mute);--b-rgb:138,164,200;background:none}


/* Imprint: the stamp's focus ring lives on an unmasked wrapper */
.stamp-hit{display:inline-block;border-radius:6px;transform:rotate(3deg);outline:none;cursor:pointer}
.stamp-hit .stamp{transform:none}
.stamp-hit:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media (max-width:560px){.stamp-hit{position:absolute;right:16px;top:20px}.stamp-hit .stamp{position:relative;right:auto;top:auto}.stamp__in{padding:5px 3px}.stamp__in img{width:34px;height:34px}}
:root[data-paper] .envelope{box-shadow:0 0 0 1px rgba(14,17,36,.14),0 8px 24px -12px rgba(0,0,0,.18)}

/* Privacy: stacked tables on phones (labels come from the header row) */
@media (max-width:600px){
  .prose .tablewrap{overflow:visible;background:none;box-shadow:none}
  .prose table,.prose tbody,.prose tr,.prose td{display:block}
  .prose thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .prose tr{margin-bottom:10px;border-radius:var(--r-card);background:var(--deep);box-shadow:0 0 0 1px var(--line-soft);padding:6px 0}
  .prose td{border:0!important;padding:4px 14px}
  .prose td::before{content:attr(data-label);display:block;font:500 .6875rem/1.4 var(--font-mono);letter-spacing:.04em;color:var(--mute)}
}

/* Without JavaScript: more dead controls hidden, no spoilers */
:root:not(.js) .bars__msg,:root:not(.js) .seg,:root:not(.js) .receipt-wrap ~ .keys,:root:not(.js) .group--danger,:root:not(.js) .vtipbtn{display:none}
:root:not(.js) .js-only{display:none}
:root.js .no-js-only{display:none}

/* Print, completed: no skip link, no dead UI, readable lists and marks */
@media print{
  .skip,.atmo,.idwrap,.idglow,.cursor,.group--danger,.receipt-wrap:has(.receipt--idle),.receipt-wrap:has(.receipt--idle) ~ .keys,.receipt-wrap:has(.receipt--idle) ~ .hint,
  section:has(> [data-term-inline]),.only-fine,.only-coarse,.herocard .wm,.glassrow,.row .chev,.shots,.shots__note,.home-hand,.home-act,.home-gitlog{display:none!important}
  .prose p,.prose li,.prose td,.prose th,.row__title,.row__hint,.lead{color:#111!important}
  .objection{background:none!important;box-shadow:none!important;border:1pt solid #000}
  .badge{color:#000!important;background:none!important;box-shadow:inset 0 0 0 1px #888!important}
  .list{box-shadow:none!important;background:none!important;border:1px solid #ccc}
  .keyslips{display:grid!important;grid-template-columns:1fr 1fr;gap:6mm;margin-top:10mm}
  .keyslip{display:block!important;border:1px dashed #888;padding:4mm 5mm;font-family:var(--font-mono);font-size:8.5pt;line-height:1.5;color:#000;break-inside:avoid}
  .keyslip p{margin:0}
  details{display:block}
}

/* Imprint prints as a DIN 5008 window letter (form B), from the imprint review */
@media print{
  .skip{display:none!important}                                  /* global: Skip-Link nie drucken */
  @page letter{size:A4;margin:0}
  body[data-page="imprint"] .app{page:letter}
  body[data-page="imprint"] :is(.foot__grid,.foot__row:not(.foot__row--fine),.foot__copy,.stamp-hit,.stamp,.postmark,.keys,.page-head .lead,.envelope .from,.group .tile,.group .chev){display:none!important}
  body[data-page="imprint"] .envelope::before{display:none}
  body[data-page="imprint"] main{position:relative;min-height:0;padding:98mm 20mm 0 25mm!important;box-sizing:border-box}
  body[data-page="imprint"] main .wrap{max-width:none;margin:0;padding:0}
  body[data-page="imprint"] .page-head{position:absolute;top:18mm;left:25mm;right:20mm;width:auto;max-width:none;padding:0!important}
  body[data-page="imprint"] .page-head h1{margin:0!important;font-size:22pt;color:#000}
  body[data-page="imprint"] .page-head .eyebrow{position:absolute;top:32mm;left:100mm;width:80mm;margin:0;font-size:7.5pt;color:#000}
  body[data-page="imprint"] .page-head .eyebrow::before{display:none}
  /* Anschriftfeld Form B: 45 mm von oben, 20 mm von links, 85 x 45 mm; Text ab 5 mm Einzug */
  body[data-page="imprint"] .envelope{position:absolute;top:45mm;left:20mm;width:85mm;height:45mm;max-width:none;margin:0;padding:17.7mm 0 0 5mm;
    background:none!important;box-shadow:none!important;border-radius:0;overflow:visible;color:#000}
  body[data-page="imprint"] .envelope address{margin:0;font-size:11pt;line-height:1.35;color:#000}
  body[data-page="imprint"] .legal-narrow{max-width:none}
  body[data-page="imprint"] .group{margin-top:0!important}
  body[data-page="imprint"] :is(.list,.disclose){background:none!important;box-shadow:none!important}
  body[data-page="imprint"] .row{min-height:0;padding:1mm 0}
  body[data-page="imprint"] .prose h2{font-size:11pt;margin:4mm 0 1mm}
  body[data-page="imprint"] .prose p,body[data-page="imprint"] .prose li{font-size:9pt;line-height:1.4;color:#222}
  body[data-page="imprint"] .row__title{font-size:10pt}
  body[data-page="imprint"] .disclose{margin-top:3mm!important}
  body[data-page="imprint"] .app{min-height:0!important}
  html:has(body[data-page="imprint"]),body[data-page="imprint"],body[data-page="imprint"] main{min-height:0!important;height:auto!important}
  body[data-page="imprint"] .list > li{height:auto;break-inside:avoid}
  body[data-page="imprint"] :is(.foot,.foot .wrap){position:static!important;border:0;margin:0;padding:0}
  body[data-page="imprint"] .printnote{position:absolute;top:284mm;left:25mm;right:20mm;margin:0!important;padding:0!important;border:0!important}
  /* Falzmarken (105/210 mm) und Lochmarke (148,5 mm) am linken Rand */
  body[data-page="imprint"] main::before,body[data-page="imprint"] main::after{content:"";position:absolute;left:5mm;width:5mm;border-top:.3pt solid #000}
  body[data-page="imprint"] main::before{top:105mm}
  body[data-page="imprint"] main::after{top:210mm}
}

/* Projects: the streak badge at the Skat Tracker icon */
.herocard__top{position:relative}
.streak{position:absolute;left:50px;top:-8px;min-width:24px;height:24px;padding:0 7px;border-radius:12px;display:grid;place-items:center;
  font:700 .75rem/1 var(--font-mono);color:#3a1600;background:#ffb340;box-shadow:0 6px 16px -6px rgba(255,140,40,.8),0 0 0 2px rgba(11,28,54,.9);
  transform:scale(0);transition:transform 200ms var(--ease-soft),background 300ms var(--ease);pointer-events:none}
.streak.on{transform:scale(1)}
.streak.blue{color:#fff;background:#2f4dff;box-shadow:0 6px 18px -6px rgba(92,200,255,.9),0 0 0 2px rgba(11,28,54,.9)}
[data-ramsch-note]{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px}
[data-ramsch-note]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* After-review polish */
.disclose{scroll-margin-top:calc(var(--nav-h) + 24px)}
.disclose summary{border-radius:var(--r-card)}
.disclose summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:900px){.prose h2,.prose h3,.prose section[id],#beleg,#gefahrenzone{scroll-margin-top:140px}}
@media (pointer:coarse){.term__bar kbd{display:none}}
:root:not(.js) .term__bar kbd{display:none}
@media print{
  .keyslip p{white-space:pre}
  .about-cols > div + div,#colophon-title{margin-top:10mm}
  .prose section:has(.receipt--idle){display:none!important}
}

/* Gesamtblick polish: toasts below the nav, a little more ink, quieter mobile hero */
.toasts{top:calc(env(safe-area-inset-top,0px) + var(--nav-h) + 8px)}
.toasts[popover]{inset:calc(env(safe-area-inset-top,0px) + var(--nav-h) + 8px) 0 auto 0}
@media (max-width:767px){.toasts{top:calc(env(safe-area-inset-top,0px) + 64px)}.toasts[popover]{inset:calc(env(safe-area-inset-top,0px) + 64px) 0 auto 0}}
.atmo::before{background:radial-gradient(closest-side,rgba(var(--accent-rgb),.17),rgba(var(--accent-rgb),.06) 45%,transparent 72%)}
.atmo{background:radial-gradient(600px 420px at 88% 18%,rgba(var(--electric-rgb),.12),transparent 70%)}
.livecard .overline .age{color:rgba(234,241,251,.55)}
/* boot.js sets data-aged and --age before the first paint (no reflow of the hero beside it) */
.livecard .overline .was,:root[data-aged="old"] .livecard .overline .now{display:none}
:root[data-aged="old"] .livecard .overline .was{display:inline}
:root[data-aged] .livecard .overline .age{counter-reset:age var(--age)}
:root[data-aged] .livecard .overline [data-l="de"] .age::after{content:" · vor " counter(age) " Tagen"}
:root[data-aged] .livecard .overline [data-l="en"] .age::after{content:" · " counter(age) " days ago"}
@media (max-width:480px){.herocard .wm{display:none}}

/* ---- Feedback round 1 (23.10.) ------------------------------------------- */
/* Magenta is loud on its own: half the bloom */
:root[data-accent="magenta"] .atmo::before{opacity:.5}
:root[data-accent="magenta"] .atmo{background:radial-gradient(600px 420px at 88% 18%,rgba(var(--electric-rgb),.07),transparent 70%)}

/* Danger zone, rebuilt: a card with what's stored as chips and one clear button */
.dz{margin-top:56px}
.dz__h{display:flex;align-items:center;gap:8px;margin:0 0 10px 4px!important;font:600 .75rem/1 var(--font-mono)!important;letter-spacing:.14em!important;text-transform:uppercase;color:#ff8ea4}
.dz__h svg{width:14px;height:14px}
.dz__card{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px;border-radius:var(--r-card);
  background:linear-gradient(135deg,rgba(var(--danger-rgb),.10),rgba(var(--danger-rgb),.03) 60%),var(--deep);
  box-shadow:inset 0 0 0 1px rgba(var(--danger-rgb),.24),0 18px 40px -28px rgba(var(--danger-rgb),.5);transition:background var(--dur-fade) var(--ease),box-shadow var(--dur-fade) var(--ease)}
.dz__card .tile{flex:none}
.dz__text{flex:1 1 220px;min-width:0}
.prose .dz__t{margin:0;font-weight:600;font-size:1rem;color:#ff8ea4}
.prose .dz__chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;font-size:.8125rem;color:var(--mute)}
.dz__chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--r-full);font:500 .75rem/1 var(--font-mono);color:var(--fg);background:var(--fill-strong);box-shadow:inset 0 0 0 1px var(--line)}
.dz__btn{flex:none;min-height:44px;padding:0 20px;border-radius:var(--r-full);border:0;cursor:pointer;font:600 .9375rem var(--font-body);
  background:var(--danger);color:#2a0710;box-shadow:0 6px 20px -8px rgba(var(--danger-rgb),.8);transition:transform var(--dur-press) var(--ease-ios),background var(--dur-fade),box-shadow var(--dur-fade)}
.dz__btn:hover{background:#ff6f8b}
.dz__btn:active{transform:scale(var(--press))}
.dz__btn:focus-visible{outline:2px solid var(--danger);outline-offset:3px}
.dz__btn[aria-disabled="true"]{background:var(--fill-strong);color:var(--faint);box-shadow:none;cursor:default}
.dz.clean .dz__card{background:var(--deep);box-shadow:inset 0 0 0 1px var(--line)}
.dz.clean .dz__t{color:var(--fg)}
.dz.restore .dz__card{background:linear-gradient(135deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.03) 60%),var(--deep);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.28)}
.dz.restore .dz__t{color:var(--accent-text)}
.dz.restore .dz__btn{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 20px -8px rgba(var(--accent-rgb),.8)}
.prose .dz__note{margin:10px 4px 0;font-size:.8125rem;line-height:1.5;color:var(--mute)}
:root[data-paper] .dz__t,:root[data-paper] .dz__h{color:#c0213f}
:root[data-paper] .dz__btn{color:#fff;background:#d42a4b}
@media (max-width:420px){.dz__btn{width:100%}}
:root:not(.js) .dz{display:none}
@media print{.dz{display:none!important}}
/* lists inside prose keep their own geometry */
.prose ul.list{padding-left:0}
.prose ul.list > li{margin-top:0}


/* Stamp and postmark, redrawn as SVG: real perforation, a cancellation that sits half on the stamp */
.stamp-hit{position:relative;display:inline-block;width:100px;height:124px;margin:-4px 6px 0 0}
.stamp-hit .stamp{display:block;width:100px;height:124px;padding:0;background:none;-webkit-mask:none;mask:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.22)) drop-shadow(0 10px 16px rgba(0,0,0,.14));transform-origin:80% 10%}
.stamp-hit:hover .stamp{filter:drop-shadow(0 5px 7px rgba(0,0,0,.26)) drop-shadow(0 16px 22px rgba(0,0,0,.16))}
.stamp-hit .postmark{position:absolute;z-index:2;left:-128px;top:40px;width:170px;height:100px;max-width:none;border:0;border-radius:0;color:rgba(26,44,108,.86);transform:rotate(-7deg);mix-blend-mode:multiply;pointer-events:none;display:block}
.stamp-hit .postmark::after{content:none}
@media (max-width:560px){
  .stamp-hit{position:absolute;right:14px;top:18px;width:80px;height:99px;margin:0}
  .stamp-hit .stamp{width:80px;height:99px}
  .stamp-hit .postmark{left:-104px;top:32px;width:136px;height:80px}
}

/* minicards in the vault */
.minicard[data-edition="poly"]{background:linear-gradient(128deg,hsl(336 84% 44%) 0.0%, hsl(21 84% 44%) 12.5%, hsl(66 84% 44%) 25.0%, hsl(111 84% 44%) 37.5%, hsl(156 84% 44%) 50.0%, hsl(201 84% 44%) 62.5%, hsl(246 84% 44%) 75.0%, hsl(291 84% 44%) 87.5%, hsl(336 84% 44%) 100.0%);color:#fff}
.minicard[data-edition="silver"]{background:repeating-linear-gradient(0deg,rgb(255 255 255 / .12) 0 .5px,transparent .5px 1.5px),linear-gradient(160deg,#eef1f4,#b5bcc5 45%,#858d98 75%,#d3d8de);color:#4f5762;box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .7)}
.minicard[data-edition="gold"]{background:repeating-linear-gradient(0deg,rgb(255 255 255 / .12) 0 .5px,transparent .5px 1.5px),linear-gradient(160deg,#f6d77a,#c9922e 45%,#9a6416 75%,#e2b552);color:#7a4c0a;box-shadow:inset 0 0 0 1.5px rgb(255 240 190 / .7),0 0 18px -4px rgb(255 196 70 / .7)}
.ladder li[data-ed="poly"].now{background:linear-gradient(110deg,rgb(255 96 170 / .16),rgb(64 210 255 / .16),rgb(150 108 255 / .16))}

/* 404 blot (blob.js): the canvas sits in the slot and only covers the drops;
   blob.js sizes it and moves it with a transform, snapped to device pixels.
   It scrolls with the page. The slot takes the pointer. */
canvas.blob.blob--sdf{position:absolute;left:0;top:0;width:auto;height:auto;max-width:none;transform:none;transform-origin:0 0;will-change:transform;pointer-events:none;z-index:4}
.slot{touch-action:none;cursor:grab}
.slot:active{cursor:grabbing}
:root[data-status="403"] .slot{touch-action:auto;cursor:auto}
.slot::after{content:"";position:absolute;inset:-.22em -.3em}
:root[data-status="403"] .slot::after{content:none}

/* ---- Intro, round 3: "ta-dum", seen instead of heard ----------------------
   ta:  a drop of ink falls onto "private Dinge" and hits (ripple, crown).
   dum: a breath later the blot bursts across the words; they stand dark in
        the wet ink for a moment, then the letters soak it up from left to
        right and keep the accent. The brush stroke follows the same way.
   intro.js draws the ink on a canvas behind the text and cuts the words with
   two clip-paths. This file sets the stage, the entrances that run in CSS
   (words, bloom, live card) and the fallback without JS: the words simply
   take the accent after a moment. Only transform and opacity animate here. */
.ink-word{position:relative;display:inline-block;isolation:isolate;white-space:nowrap;color:var(--accent-text)}
.ink-fill{display:inline-block;color:var(--accent-text)}
.ink-ov{position:absolute;left:0;top:0;white-space:nowrap;color:var(--on-accent);pointer-events:none;-webkit-user-select:none;user-select:none}
.ink-cv{position:absolute;left:0;top:0;z-index:-1;max-width:none;transform-origin:0 0;pointer-events:none;contain:strict}
.hero h1 .w{display:inline-block}

/* words: rise and settle, no blur (crisp from the first frame) */
:root.intro .hero h1 .w{animation:inkWordIn .56s var(--ease-soft) both;animation-delay:calc(var(--i) * 55ms)}
@keyframes inkWordIn{from{opacity:0;transform:translate3d(0,.24em,0)}}
/* until intro.js takes over, the inked words stay white; without JS they turn
   at 1.7 s (the time the ink would have reached them) */
:root.intro .ink-fill{animation:inkWait 1.7s step-end both}
@keyframes inkWait{from{color:var(--hi)}}
/* the line: one pointed swash of ink under the words, accent running into
   magenta, a wet highlight and a soft glow. It lives between the p stem and
   the g hook, so it never crosses a descender. Geometry is inline on the svg
   (in em, scales with the words). In the intro, intro.js lets the retreating
   ink uncover it and runs the light over it once; the CSS below only reveals
   it when JS is missing. */
.ink-word .ul{position:absolute;right:auto;bottom:auto;max-width:none;overflow:visible;color:var(--magenta);pointer-events:none}
.ink-word .ul path{stroke:none;fill:currentColor}
.ink-word .ul .ul__gloss{fill:#fff;opacity:.3}
.ink-word .ul .ul__glow{opacity:.55}
:root[data-paper] .ink-word .ul .ul__glow{opacity:.3}
:root[data-paper] .ink-word .ul .ul__gloss{opacity:.45}
:root.intro .ink-word .ul{animation:inkLineIn .7s var(--ease-soft) 1.9s both}
@keyframes inkLineIn{from{opacity:0;clip-path:inset(-50% 100% -50% -50%)}to{opacity:1;clip-path:inset(-50% 0 -50% -50%)}}

/* the room answers the second beat: the bloom swells, the live card surfaces */
:root.intro .atmo::before{animation:inkBloom 2.3s cubic-bezier(.16,1,.3,1) .94s both,atmoDrift 46s ease-in-out 3.24s infinite alternate}
@keyframes inkBloom{from{opacity:0;transform:scale(.4) translate3d(-6%,4%,0)}}
:root.intro .home-live .livecard{animation:inkSurface 1.15s var(--ease-soft) 1.04s both}
@keyframes inkSurface{from{opacity:0;transform:translate3d(0,22px,0) scale(.97)}}

/* reduced motion: the final state, at once */
@media (prefers-reduced-motion:reduce){
  :root.intro .hero h1 .w,:root.intro .ink-fill,:root.intro .ink-word .ul,:root.intro .atmo::before,:root.intro .home-live .livecard{animation:none!important}
}
:root[data-motion="reduced"].intro :is(.hero h1 .w,.ink-fill,.ink-word .ul,.home-live .livecard),
:root[data-motion="reduced"].intro .atmo::before{animation:none!important}
/* after the run the entrances are spent: a language switch shows the words as they are */
:root.intro-done :is(.hero h1 .w,.ink-fill,.ink-word .ul,.hero-rise,.home-live .livecard){animation:none}
/* the deep end of the ink (canvas reads it); splash and paper use --electric */
:root[data-accent="magenta"]{--ink-deep:#b0135f}

/* ♠ B: the cursor is tappable; its tape writes the morse along */
.hero .cursor.tappable{cursor:pointer;pointer-events:auto}
.hero .cursor.tappable::before{content:"";position:absolute;inset:-.2em -.3em}
.hero .cursor{position:relative}
.morse-tape{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.2em 1.1em;min-height:1.6em;margin-top:.6em;font:500 1.0625rem/1 var(--font-mono);color:var(--accent-text);letter-spacing:.06em;transition:opacity .8s var(--ease)}
.morse-tape .g{display:inline-flex;flex-direction:column;align-items:center;gap:.35em}
.morse-tape .g i{font-style:normal}
.morse-tape .g{flex-direction:row;flex-wrap:wrap;justify-content:center;width:max-content;position:relative;padding-bottom:1.2em}
.morse-tape .g b{position:absolute;left:0;right:0;bottom:0;text-align:center;font-weight:700;color:var(--hi);animation:rise .4s var(--ease-soft) both}
.morse-tape .g i{animation:rise .18s var(--ease-soft) both}
.morse-tape .q{color:var(--faint)}
.morse-tape.gone{opacity:0}
.morse-tape{font-size:1.25rem}
.morse-tape .g i{font-weight:700}

/* Vault: lay your cards */
.vault-stage .vcard{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.vault-stage .vcard:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:calc(var(--cw) * .09)}
.vault-stage .vcard.ph{visibility:hidden}
.vghost{position:fixed;z-index:300;margin:0;pointer-events:none;transform-origin:50% 50%;transition:none;filter:drop-shadow(0 22px 26px rgba(0,0,0,.55));aspect-ratio:auto}
.vghost .vcard__in{transition:none}
:root.vdragging,:root.vdragging *{cursor:grabbing!important}
.vault-stage .vcard.swap-target{translate:0 -12px;filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),.7));transition:translate .25s var(--ease-soft),filter .25s}
.vskat{border-radius:var(--r-card);padding:10px 16px 14px;transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.vskat.over{background:rgba(var(--accent-rgb),.07);box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.45)}
.vskat.thud{animation:thud .42s var(--ease-soft)}
@keyframes thud{30%{transform:scale(.97) translateY(3px)}}
.vault-howto{text-align:center;max-width:none;margin-top:var(--s4)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:559px){.vault-howto{font-size:.8125rem}}
.vskat{width:fit-content;margin-inline:auto;padding-inline:28px}
.brand__ink{min-width:3ch;text-align:center}

/* ---- Live receipt, round 2: a small printer and an annotated receipt --------
   Intro and keys on top; below, the printer on the left and the notes on the
   right, each note level with its section and tied to it by a dashed lead.
   A note slides in as its section leaves the slot. Phones: notes below. */
.bonbox{margin-top:var(--s4)}
.bonbox__intro > p:first-child{margin-top:0}
.bonbox__intro .keys{margin-top:16px}
.bonbox__stage{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0 40px;align-items:start;margin-top:28px}
.bonbox .receipt-wrap{margin:0;display:grid;justify-items:center;position:relative}
.printer{position:relative;z-index:2;width:100%;height:34px;border-radius:14px 14px 9px 9px;
  background:linear-gradient(180deg,var(--float),var(--raised));
  box-shadow:0 0 0 1px var(--line),0 14px 26px -16px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07)}
.printer::before{content:"INK·PRINT";position:absolute;left:14px;top:7px;font:600 .5rem/1 var(--font-mono);letter-spacing:.2em;color:var(--faint)}
.printer__slot{position:absolute;left:10px;right:10px;bottom:7px;height:6px;border-radius:3px;background:#01050c;box-shadow:inset 0 2px 3px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.05)}
.printer__led{position:absolute;right:14px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ok);opacity:.3;transition:opacity .3s}
.bonbox.busy .printer__led{opacity:1;box-shadow:0 0 8px var(--ok);animation:ledblink .18s steps(2,end) infinite}
.bonbox.busy .printer{animation:buzz .07s linear infinite alternate}
@keyframes ledblink{50%{opacity:.35}}
@keyframes buzz{from{transform:translateX(-.4px)}to{transform:translateX(.4px)}}
:root[data-paper] .printer__slot{background:#2a2a2a}
.bonbox .receipt{position:relative;z-index:1;width:calc(100% - 22px);margin-top:-12px;padding:26px 18px 28px}
/* the notes */
.bonlegend{list-style:none;counter-reset:bon;margin:0;padding:0;display:grid;gap:10px;position:relative}
.prose .bonlegend > li{counter-increment:bon;position:relative;margin:0;padding:10px 12px 10px 44px;border-radius:12px;background:var(--fill);
  box-shadow:inset 0 0 0 1px var(--line-soft);font-size:.8125rem;line-height:1.5;color:var(--mute)}
.bonlegend > li::before{content:counter(bon);position:absolute;left:12px;top:10px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font:700 .6875rem/1 var(--font-mono);color:var(--on-accent);background:var(--accent)}
.bonlegend > li.bonlegend__blind::before{content:"?";background:var(--warn);color:#1d1600}
.bonlegend > li b{display:block;color:var(--fg);font-weight:600;font-size:.875rem}
.bonlegend > li::after{content:"";position:absolute;right:100%;top:21px;width:34px;border-top:1.5px dashed rgba(var(--accent-rgb),.55);display:none;transform-origin:100% 50%}
.bonlegend > li.bonlegend__blind::after{border-top-color:rgba(248,225,108,.6)}
.bonlegend.aligned{display:block}
.prose .bonlegend.aligned > li{position:absolute;left:0;right:0;top:var(--top,0);opacity:0;transform:translateX(-14px);
  transition:opacity .45s var(--ease),transform .55s var(--ease-soft),top .4s var(--ease-soft)}
.bonlegend.aligned > li::after{display:block;scale:0 1;transition:scale .4s var(--ease-soft) .12s}
.prose .bonlegend.aligned > li.lit{opacity:1;transform:none}
.bonlegend.aligned > li.lit::after{scale:1 1}
.receipt .sec[data-n]::before{content:attr(data-n);display:inline-grid;place-items:center;width:15px;height:15px;margin-right:6px;border-radius:50%;background:var(--paper-ink);color:var(--paper);font-size:.5625rem;vertical-align:1px;letter-spacing:0}
.receipt .ln .k{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.receipt .ln .v{flex:0 0 auto;max-width:62%;overflow-wrap:anywhere;text-align:right}
.receipt .c{overflow-wrap:anywhere}
@media (max-width:759px){
  .bonbox__stage{grid-template-columns:minmax(0,1fr);gap:22px}
  .bonbox .receipt-wrap{width:min(320px,100%);justify-self:center}
}
@media print{.bonbox__stage{grid-template-columns:260px minmax(0,1fr)}.printer,.bonbox .keys{display:none!important}.bonbox .receipt{margin-top:0}}
.bonlegend > li::after{width:51px}
:root[data-paper] .receipt{box-shadow:0 0 0 1px rgba(60,48,20,.14),0 22px 34px -20px rgba(60,48,20,.45)}
:root[data-paper] .bonbox .receipt{background:#fffdf8}
:root.vdragging .vhand .vcard{transition:transform 280ms cubic-bezier(.2,.8,.2,1);will-change:transform}
:root.vdragging .vcard.got:hover{transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg))}
.vghost{will-change:transform}
.vghost{filter:none}
.vghost .vcard__face,.vghost .vcard__back{box-shadow:0 26px 40px -16px rgba(0,0,0,.75),inset 0 0 0 1px rgba(0,0,0,.16)}

/* review r1 fixes: home */
.ink-word{isolation:isolate}
.ink-word .ul{z-index:-1}
.hero{position:relative}
.morse-tape{position:absolute;z-index:6;margin:0;max-width:min(320px,calc(100% - 8px));padding:12px 16px 10px;border-radius:14px;
  background:rgba(19,37,65,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-float),inset 0 0 0 1px rgba(var(--accent-rgb),.25)}
:root[data-paper] .morse-tape{background:rgba(255,253,248,.92)}
@media (prefers-reduced-motion:reduce){:root.intro *{animation-delay:0s!important}}
:root[data-motion="reduced"].intro *{animation-delay:0s!important}
.g48 .toasts,.g48 .toasts[popover]{top:auto;inset:auto 0 calc(env(safe-area-inset-bottom,0px) + 16px) 0}
.vault-stage .vcard.held{translate:0 -14px;filter:drop-shadow(0 0 12px rgba(var(--accent-rgb),.65))}

/* review r1 fixes: projects, privacy, imprint */
.receipt .ln .k{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
@media (max-width:360px){.bonbox .receipt{padding-inline:12px;font-size:.75rem}}
html:has(dialog.sheet[open]){overflow:hidden}
dialog.sheet:focus,dialog.sheet:focus-visible{outline:none}
.streak--free{z-index:5}
canvas.flames:not(.flames--gl){-webkit-mask:linear-gradient(to top,transparent 0,#000 34px,#000 62%,transparent);mask:linear-gradient(to top,transparent 0,#000 34px,#000 62%,transparent)}
@media (max-width:420px){.stamp-hit .postmark .pm-waves{display:none}}
.envelope{overflow:visible}
.envelope::before{border-radius:12px 12px 0 0}
.stamp-hit.peeling{z-index:20}
.stamp-hit.peeling .stamp{filter:none}
@media print{
  .bonbox .receipt{break-inside:avoid;box-shadow:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .bonlegend.aligned{display:grid;min-height:0!important}
  .prose .bonlegend.aligned > li{position:static;opacity:1;transform:none}
  .bonlegend > li::after{display:none!important}
}

/* ---- Background, round 2: wolke, two soft clouds of light that drift very slowly */
.atmo::before{left:-14vw;top:2vh;width:min(1100px,120vw);height:820px;
  background:radial-gradient(closest-side,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.055) 48%,transparent 74%);
  animation:atmoDrift 46s ease-in-out infinite alternate;will-change:transform}
.atmo{background:radial-gradient(640px 460px at 86% 14%,rgba(var(--electric-rgb),.13),transparent 70%)}
@keyframes atmoDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7vw,5vh,0) scale(1.07)}100%{transform:translate3d(2vw,12vh,0) scale(.97)}}
:root[data-paper] .atmo::before{background:radial-gradient(closest-side,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.035) 50%,transparent 74%);mix-blend-mode:multiply}
:root[data-paper] .atmo{background:radial-gradient(640px 460px at 86% 14%,rgba(var(--electric-rgb),.05),transparent 70%)}
:root[data-accent="magenta"] .atmo::before{opacity:.55}
@media (prefers-reduced-motion:reduce){.atmo::before{animation:none!important}}
:root[data-motion="reduced"] .atmo::before{animation:none!important}

/* review r1, small things */
.ladder li[data-ed="silver"].now{background:linear-gradient(160deg,rgba(238,241,244,.18),rgba(133,141,152,.12));color:var(--fg)}
.ladder li[data-ed="gold"].now{background:linear-gradient(160deg,rgba(246,215,122,.22),rgba(154,100,22,.14));color:#f5c84c}
.vrow .row__text{flex:1 1 0;min-width:0}
@media (max-width:559px){.vault-stage .vcard.swap-target{translate:0 -6px}}

/* vault: a calm landing (no hover jump while cards settle) */
:root.vsettling .vcard.got:hover{transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg))}
:root.vsettling .vskat .vcard:nth-child(1){transform:rotate(-5deg)}
:root.vsettling .vskat .vcard:nth-child(2){transform:rotate(6deg) translateY(4px)}
/* home: the terminal spans the content width like every chapter and stands as one fixed window
   (Paket 42). The mount brings prompt and chips into the same height, so nothing below it moves;
   wheel and swipe go on to the page once the log is at its end, or when it does not overflow at all
   (no scroll trap; contain stays for the ⌘K sheet). Phones: never lower than before (349 px) */
:root{--term-h:clamp(360px,44vh,500px)}
@media (max-width:767px){:root{--term-h:clamp(360px,52svh,420px)}}
[data-term-inline] .term{display:flex;flex-direction:column;height:var(--term-h)}
[data-term-inline] :is(.term__bar,.term-chips){flex:none}
[data-term-inline] .term__body{flex:1 1 auto;min-height:0;max-height:none}
[data-term-inline] .term__body{overscroll-behavior-y:auto}

/* Terminal frame: a soft gradient edge; clicking in sends one arc of light round it */
@property --ta{syntax:"<angle>";inherits:false;initial-value:0deg}
[data-term-inline] .term{border:1px solid transparent;box-shadow:0 24px 60px -36px rgba(var(--accent-rgb),.45);
  background:linear-gradient(var(--well),var(--well)) padding-box,
             linear-gradient(160deg,rgba(var(--accent-rgb),.38),rgba(255,255,255,.06) 38%,rgba(255,255,255,.04) 70%,rgba(var(--accent-rgb),.16)) border-box;
  transition:box-shadow .5s var(--ease-soft)}
[data-term-inline] .term::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;border:1.5px solid transparent;opacity:0;
  background:conic-gradient(from var(--ta),transparent 0deg,rgba(var(--accent-rgb),.95) 40deg,rgba(255,255,255,.9) 52deg,rgba(var(--accent-rgb),.6) 70deg,transparent 110deg) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0) border-box;-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0) border-box}
[data-term-inline] .term:focus-within{box-shadow:0 0 0 4px rgba(var(--accent-rgb),.09),0 30px 80px -34px rgba(var(--accent-rgb),.65)}
[data-term-inline] .term:focus-within::after{animation:termArc 1.25s cubic-bezier(.4,0,.2,1) both}
@keyframes termArc{0%{--ta:-60deg;opacity:0}12%{opacity:1}80%{opacity:1}100%{--ta:300deg;opacity:0}}
[data-term-inline] .term:focus-within .term__bar .ttl::before{animation:termDot .9s var(--ease-soft)}
@keyframes termDot{40%{transform:scale(1.6);box-shadow:0 0 16px rgba(var(--accent-rgb),1)}}
[data-term-inline] .term__bar{transition:color .4s var(--ease)}
[data-term-inline] .term:focus-within .term__bar{color:var(--fg)}
:root[data-paper] [data-term-inline] .term{background:linear-gradient(var(--well),var(--well)) padding-box,linear-gradient(160deg,rgba(var(--accent-rgb),.35),rgba(14,17,36,.08) 40%,rgba(14,17,36,.06) 70%,rgba(var(--accent-rgb),.14)) border-box}
dialog.sheet--term .term-input:focus,dialog.sheet--term .term-input:focus-visible{outline:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){[data-term-inline] .term:focus-within::after,[data-term-inline] .term:focus-within .term__bar .ttl::before{animation:none}}
:root[data-motion="reduced"] [data-term-inline] .term:focus-within::after{animation:none}

/* ---- Terminal · motd (Paket 43): the greeting on top of the home terminal ----------------------
   Like a server's banner after the SSH login (term.js, motd), in InkCurity's tokens: keys in the
   accent ink, values in body ink, zeros in green, rules dashed like
   a terminal's. The terminal is a size container, so phones and the ⌘K sheet get the narrow lines
   (.motd-w wide only, .motd-n narrow only). Only the parts (.mp) move, in the order of
   "Startseite · Scroll". Jan chose a (r5f); the wordmark of b moved to neofetch (.neo-*). */
.term{container:term / inline-size}
.motd{--mk:var(--accent-text);--mz:var(--ok);--mr:rgba(var(--accent-rgb),.36);
  margin:0 0 .8rem;line-height:1.5;color:var(--fg);font-variant-ligatures:none;font-feature-settings:"calt" 0,"liga" 0}
:root[data-paper] .motd{--mz:#0f6b30;--mr:rgba(14,17,36,.28)}
.term__body .motd p{white-space:normal}
.motd b{color:var(--hi);font-weight:600}
.motd .k{color:var(--mk);font-weight:700}
.motd .z{color:var(--mz);font-weight:700}
.motd-kv{display:grid;grid-template-columns:var(--kw,10ch) minmax(0,1fr);column-gap:1ch}
.motd-rule,.motd-note::before,.motd-note::after{height:1px;background:repeating-linear-gradient(90deg,var(--mr) 0 .6ch,transparent .6ch 1ch)}
.motd-rule{margin:.45rem 0 .4rem}
.motd-note{position:relative;padding:.38rem 0}
.motd-note::after,.motd-note::before{content:"";position:absolute;left:0;right:0}
.motd-note::before{top:0}
.motd-note::after{bottom:0}
.motd-note{color:var(--accent-text)}
.term-dot.is-off{background:var(--faint);box-shadow:none}
@container term (max-width:599px){.motd-w{display:none!important}.motd{margin-bottom:.6rem}.motd-rule{margin:.35rem 0 .3rem}.motd-note{padding:.3rem 0}}
@container term (min-width:600px){.motd-n{display:none!important}}
/* phones with the tall window (420 px from about 800 px screen height) show one line more */
@media (max-height:799px){@container term (max-width:599px){[data-term-inline] .motd-t{display:none!important}}}

/* Seite an Seite: the padlock in ink (accent → electric), keyhole open, beside the fetch lines */
.motd--a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:4ch;align-items:start}
.motd-logo{margin:.1rem 0 0;font:inherit;font-weight:700;line-height:1.12;letter-spacing:0;white-space:pre;color:var(--mk)}
.motd-shackle,.motd-lock{display:block}
.motd-shackle{color:var(--mute)}
.motd-lock{background:linear-gradient(180deg,var(--accent-text),var(--accent) 45%,var(--electric));-webkit-background-clip:text;background-clip:text;color:transparent}
.motd-host{color:var(--mk)}
.motd-sw{display:flex;margin-top:.5rem}
.motd-sw i{display:block;width:2.5ch;height:.9rem}
:root[data-paper] .motd-sw i{box-shadow:inset 0 0 0 1px rgba(14,17,36,.12)}
.motd--a .motd-note{grid-column:1/-1;margin-top:.65rem}
/* the window is 396 px from 900 px screen height on (--term-h); on shorter screens (360 px) the greeting
   sets its lines closer and leaves out "stand" */
@media (max-height:899px){@container term (min-width:600px){
  [data-term-inline] .motd{line-height:1.35}
  [data-term-inline] .motd-logo{line-height:1}
  [data-term-inline] .motd-tall{display:none}
}}
@container term (max-width:599px){.motd--a{grid-template-columns:minmax(0,1fr);--kw:7ch}.motd--a .motd-logo{display:none}.motd--a .motd-note{margin-top:.5rem}}

/* neofetch: the FIGlet wordmark on top (term.js, BANNER; once the head of motd b), in body ink with
   the C in the accent; narrow terminals (phones, a narrow ⌘K sheet) get the word instead and drop the
   block padlock (.neo-l) and two tails (.neo-w: Trumpf, server logs), so no line runs wider than the terminal */
.neo{margin-bottom:.35rem;font-variant-ligatures:none;font-feature-settings:"calt" 0,"liga" 0}
.neo-banner{display:block;line-height:1.16;color:var(--hi)}
.neo b,.neo-word b{font-weight:inherit;color:var(--accent-text)}
.neo-word{display:none;font-weight:700;font-size:1.25em;line-height:1.3;color:var(--hi)}
@container term (max-width:599px){.neo-banner,.neo-l,.neo-w{display:none}.neo-word{display:inline}}
/* the smallest phones (320 px): English runs a character longer, so the lines step down a little */
@container term (max-width:299px){.neo-info{font-size:.92em}}

.about-craft{color:var(--fg)}

/* Screenshot viewer */
.shots__rail li{cursor:zoom-in;border-radius:22px;outline-offset:4px}
.shots__rail li:focus-visible{outline:2px solid var(--accent)}
.shots__rail li img{transition:transform var(--dur-press) var(--ease-ios)}
.shots__rail li:active img{transform:scale(.97)}
dialog.viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;color:var(--fg);
  background:rgba(2,6,15,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:none;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
dialog.viewer[open]{display:grid}
dialog.viewer::backdrop{background:transparent}
.viewer__top{display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 8px}
.viewer__count{font:600 .8125rem var(--font-mono);letter-spacing:.12em;color:var(--mute)}
.viewer__btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;color:var(--fg);background:rgba(255,255,255,.08);
  transition:background var(--dur-fade) var(--ease),transform var(--dur-press) var(--ease-ios)}
.viewer__btn:hover{background:rgba(255,255,255,.16)}
.viewer__btn:active{transform:scale(.92)}
.viewer__btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.viewer__btn svg{width:20px;height:20px}
.viewer__stage{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,40px);min-height:0;padding:0 12px}
.viewer__fig{margin:0;display:grid;justify-items:center;gap:12px;min-height:0;height:100%;align-content:center}
.viewer__img{display:block;height:min(78dvh,880px);max-height:100%;width:auto;max-width:calc(100vw - 140px);aspect-ratio:9/16;object-fit:cover;border-radius:clamp(18px,3vh,30px);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 90px -30px rgba(0,0,0,.9);touch-action:pan-y;user-select:none;-webkit-user-drag:none;cursor:grab;transition:translate .3s var(--ease-soft),opacity .3s var(--ease)}
.viewer__cap{max-width:46ch;text-align:center;font-size:.875rem;line-height:1.45;color:var(--mute)}
.viewer__dots{display:flex;justify-content:center;gap:8px;padding:10px 0 calc(env(safe-area-inset-bottom,0px) + 18px)}
.viewer__dot{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.25);cursor:pointer;transition:width .3s var(--ease-soft),background .3s}
.viewer__dot.on{width:22px;background:var(--accent)}
@media (max-width:640px){.viewer__nav{display:none}.viewer__img{max-width:calc(100vw - 32px);height:min(72dvh,760px)}}
:root[data-paper] dialog.viewer{background:rgba(244,241,232,.9);color:var(--fg)}
:root[data-paper] .viewer__btn{background:rgba(14,17,36,.07)}
:root[data-paper] .viewer__dot{background:rgba(14,17,36,.2)}

/* morse tape: one line */
.morse-tape{flex-wrap:nowrap;white-space:nowrap;max-width:none;width:max-content;gap:.2em .8em;font-size:1.0625rem}
@media (max-width:420px){.morse-tape{font-size:.9375rem;gap:.2em .6em;padding:10px 12px 8px}}

/* vault drag: the hand moves on springs (JS), so no CSS transition fights them */
:root.vdragging .vhand .vcard{transition:none}

.vhand.no-anim .vcard,.vskat__cards.no-anim .vcard{transition:none}
/* 404: whatever the blot draws, it never creates scrollbars (clip, unlike hidden, keeps sticky intact) */
body[data-page="lost"] .app{overflow:clip}
/* home: the intro canvas reaches past the words on narrow phones (320 px: up to 39 px);
   its ink stays on screen, the empty margin must not make the page swipe sideways */
body[data-page="home"] .app{overflow-x:clip}

/* morse tape: dismissable; it fades quickly */
.morse-tape{cursor:pointer;transition:opacity .45s var(--ease)}

/* ---- Footer D · Schlusspunkt: one big closing line, then the invitation ---
   Taken over from prototype v20 (shared rules and D), renamed to foot__*.
   Only tokens, so dark, paper and both accents work without extra rules. */
/* Schwelle F2 · Kante (round 4, f4 a): the footer is a surface of its own, set off by
   --sill on every page, with a static ink edge on top; paper tints it (#ebe5d3), edge included */
:root{
  --sill:clamp(96px,11vw,160px);      /* last content → footer */
  --edge-h:32px;                      /* ink edge, ≥ 768 px (viewBox 1440 × 40) */
  --foot-bg:var(--deep);
  --foot-pad:clamp(64px,7.5vw,108px); /* inside, on top */
}
@media (max-width:767px){:root{--edge-h:24px}}  /* phone edge, viewBox 390 × 28 */
:root[data-paper]{--foot-bg:#ebe5d3}
/* --big and --mail drive both columns */
.foot{--big:clamp(2.75rem,3.9vw,3.5rem);--mail:clamp(1.25rem,1.9vw,1.75rem);position:relative;z-index:1;margin-top:var(--sill);padding-block:var(--foot-pad) var(--s6);background:var(--foot-bg);overflow-x:clip}
.foot a{transition:color var(--dur-fade) var(--ease),border-color var(--dur-fade) var(--ease),background-color var(--dur-fade) var(--ease)}
.foot__edge{display:block;position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:var(--edge-h);fill:var(--foot-bg);pointer-events:none}
.foot__edge--n{display:none}
@media (max-width:767px){.foot__edge--w{display:none}.foot__edge--n{display:block}}
/* colophon, the third zone: spaced, no separator dots */
.foot__colo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s5);margin:0;padding:0;list-style:none;font-family:var(--font-mono);font-size:.75rem;line-height:1.6;color:var(--mute)}
.foot__colo a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.foot__colo a:hover{color:var(--fg)}
/* touch: the footer's links reach 44 px as hit areas, the lines keep their rhythm */
@media screen and (pointer:coarse){
  .foot__nav a,.foot__colo a,.foot__key,.foot__mail{position:relative}
  .foot__nav a::after,.foot__colo a::after,.foot__key::after,.foot__mail::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;margin-top:-22px}
}
@media print{.foot__edge,.foot__shade{display:none!important}.foot{background:none}}
/* the sill is the whole distance: pages that end in a padded section give their bottom padding up */
.about-more,.lost{padding-bottom:0}
.foot__key{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;background:var(--fill);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;color:var(--mute)}
.foot__key:hover{background:var(--fill-strong);color:var(--fg)}
/* two columns on one level: the right column is as tall as the two-line closing line.
   Two edges (round 6): the closing line, the pages and the colophon stand on the left content edge;
   mail with PGP, the contacts, the card bar and © end flush on the right one */
.foot__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s5) clamp(32px,6vw,96px);align-items:stretch}
.foot__big{margin:0;font-family:var(--font-display);font-size:var(--big);font-weight:500;line-height:1.04;letter-spacing:-.035em;color:var(--hi)}
.foot__big > span{display:block}
.foot__dot{color:var(--accent);text-shadow:0 0 26px rgba(var(--accent-rgb),.55)}
/* cap on cap and baseline on baseline: Space Grotesk at 1.04 on the left, address line and 15px contacts on the right (least squares, 861-1680px) */
.foot__cta{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s2);min-width:0;
  margin-block:calc(-.7472 * var(--big) + .8013 * var(--mail) + 15.22px) calc(.1379 * var(--big) - 4.53px)}
.foot__line{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s2) var(--s4);margin:0}
.foot__mail{display:inline-flex;align-items:center;gap:.6rem;padding-bottom:4px;border-bottom:1px solid var(--line-strong);
  font-family:var(--font-display);font-size:var(--mail);letter-spacing:-.02em;color:var(--hi)}
.foot__mail svg{width:22px;height:22px;flex:none;transition:transform var(--dur-rise) var(--ease-soft)}
.foot__mail:hover{color:var(--accent-text);border-bottom-color:currentColor}
.foot__mail:hover svg{transform:translateX(4px)}
.foot__line .foot__key svg{width:13px;height:13px}
.foot__more{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s2) var(--s6);color:var(--mute);font-size:.9375rem}
.foot__more a{color:var(--mute)}
.foot__more a:hover{color:var(--fg)}
/* ---- Footer · contacts come out of the ink (a13, round 3, C: ink line) -------
   At rest only the service names; the ID is in the markup (no JS: visible) and
   :root.js hides it. A tap gives the ID its place at once, the neighbours glide
   aside (FLIP in ink.js), and everything the animation shows stays inside .ink,
   the box of the ID (overflow:clip). Only transform and opacity move. */
.foot__more{position:relative}
.foot__c{position:relative;display:inline-flex;align-items:baseline;gap:.45em}
.foot__id{position:relative;display:inline-block;margin:0;padding:0;border:0;background:none;font:inherit;font-family:var(--font-mono);font-size:.8125rem;
  line-height:inherit;letter-spacing:.01em;color:var(--mute);white-space:nowrap;cursor:pointer;border-radius:4px;text-decoration:none}
.foot__id:hover{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.foot__id:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:root:not(.js) .foot__id[data-copy]{pointer-events:none;cursor:text;user-select:text}
.foot__veil{display:none}
:root.js .foot__c:not(.is-open) .foot__id{display:none}
/* the service name is the switch, also while the ID stands (aria-expanded) */
.foot__s{position:relative;display:inline-block}
:root.js .foot__veil:not([hidden]){display:block;position:absolute;inset:-6px -8px;z-index:1;margin:0;padding:0;border:0;border-radius:8px;
  background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:root.js .foot__c.is-open .foot__veil{right:-3px}
.foot__veil:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.foot__s:hover .foot__svc{color:var(--fg)}
/* while inking: the real text holds the place, only what lies in the box shows */
.foot__id.is-inking{pointer-events:none}
.foot__id.is-inking > .foot__t{opacity:0}
.foot__probe{display:inline-block;width:0;height:0}
.foot__ghost{position:absolute;margin:0;pointer-events:none}
/* the box of the ID: 3px left (6.75px gap to the service), 4px right, .42em above and below */
.foot__id .ink{position:absolute;left:-3px;right:-4px;top:-.42em;bottom:-.42em;overflow:clip;contain:layout paint;pointer-events:none}
.foot__id .ink .w{position:absolute;inset:0;overflow:clip}
.foot__id .ink .i{position:absolute;inset:0}
.foot__id .ink .t{position:absolute;left:3px;top:.42em;margin:0;white-space:nowrap;color:var(--mute)}
.foot__id .ink .wet{color:var(--accent-text)}
.foot__id .ink .fx{position:absolute;left:0;top:0}
/* ink line with a drop for a head */
.foot__id .ink .ln{height:1.5px;border-radius:1px;background:var(--accent)}
.foot__id .ink .hd{width:0;height:0}
.foot__id .ink .hd i{position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 5px rgba(var(--accent-rgb),.6)}
@media (pointer:coarse){.foot__more li.foot__c{padding-block:11px}:root.js .foot__veil:not([hidden]){top:-11px;bottom:-11px}}
@media print{.foot__veil{display:none!important}.foot__c .foot__id{display:inline-block!important}.foot__id .ink{display:none}.foot__c{background:none!important}}
/* flush right (round 6): an ID that opens pushes its own name and the names before it to the left.
   The names carry the footer's surface, so an ID running back slides under its right neighbour,
   and during a run the right edge gets a front of the same surface (two columns only) */
@media (min-width:861px){
  .foot__c:not(.foot__ghost){background:var(--foot-bg)}
  .foot__more:has(.foot__id.is-inking)::after{content:"";position:absolute;left:100%;top:-12px;bottom:-12px;width:160px;background:var(--foot-bg);pointer-events:none}
}
/* below the closing line two rows on the same edges: pages | card bar, colophon | ©.
   Both are .foot__row: ink.js glides them as units when a contact opens */
.foot__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s3) var(--s8);margin-top:clamp(36px,4vw,52px)}
.foot__row + .foot__row{align-items:baseline;margin-top:var(--s5)}
.foot__row > :last-child{justify-self:end}
.foot__nav{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s6)}
.foot__nav a{padding:6px 0;color:var(--mute);font-size:.875rem}
.foot__nav a:hover{color:var(--fg)}
.foot__nav a[aria-current="page"]{color:var(--accent-text)}
.foot__copy{font-family:var(--font-mono);font-size:.75rem;color:var(--mute)}
/* stacked: 36px closing line, no alignment offsets; one edge, every group on a line of its own */
@media (max-width:860px){
  .foot{--big:2.25rem}
  .foot__grid{grid-template-columns:1fr;align-items:start}
  .foot__cta{justify-content:flex-start;margin-block:0;gap:var(--s3)}
  .foot__line,.foot__more{justify-content:flex-start}
  .foot__row{grid-template-columns:minmax(0,1fr)}
  .foot__row > :last-child{justify-self:start}
  .foot__row + .foot__row{row-gap:var(--s1)}
}
@media (max-width:767px){
  .foot__more li.foot__c{display:inline-flex;align-items:baseline;min-height:0;padding-block:11px}
  :root.js .foot__veil:not([hidden]){top:-11px;bottom:-11px}
  /* one footer, not two: Projects and About live in the tab bar */
  .foot__row{row-gap:var(--s2);margin-top:var(--s8)}
  .foot__nav{display:flex;flex-wrap:wrap;gap:0 var(--s5)}
  .foot__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .foot__nav a:nth-child(-n+2){display:none}
  .foot{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 32px)}
}
/* Footer · Schleier (Z22): under the tab bar the footer veils itself in its own surface. The page veil
   (.app::after, z 38) lies under the footer (z 39, still under the nav at 40 and the bar at 45); this one
   is fixed like it, the same height and gradient, clipped to the footer's box (clip for older WebKit) */
.foot__shade{display:none}
@media (max-width:767px){
  .foot{z-index:39}
  .foot__shade{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;clip:rect(0 auto auto 0);clip-path:inset(0)}
  .foot__shade::before{content:"";position:fixed;left:0;right:0;bottom:0;height:var(--veil-h);background:linear-gradient(to top,var(--foot-bg) 30%,transparent)}
}

/* ---- Footer D · the closing dot drops as ink (package 10c, A) ---------------
   The dot stays text (sentence, copy, print, screen readers); an empty button
   lies on top of it, hidden without JS. Only tokens; only transform and
   opacity animate. ink.js runs it, the splash engine paints the blot. */
.foot__end{position:relative;display:inline-block;
  --dot-x:58%;          /* centre of the dot's ink, measured: 58 % of the glyph width (Space Grotesk) */
  --dot-y:.78em;        /* centre of the dot's ink from the top of the line box (line-height 1.02; baseline at .85em) */
  --land-x:.7em;        /* where the drop lands, relative to the dot centre */
  --land-y:.28em}
.foot__dot{display:inline-block;transform-origin:58% 83%;  /* the baseline under the dot centre */
  transition:transform var(--dur-rise) var(--ease-soft),opacity var(--dur-fade) var(--ease)}
/* tap area 44 × 44, shifted 8 px into the free space after the sentence, no layout */
.foot__ink{position:absolute;z-index:1;left:calc(var(--dot-x) - 14px);top:calc(var(--dot-y) - 22px);width:44px;height:44px;
  border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.foot__ink:focus-visible{outline:none}
.foot__ink::before{content:"";position:absolute;left:14px;top:22px;width:.46em;height:.46em;margin:-.23em 0 0 -.23em;border-radius:50%;
  box-shadow:0 0 0 2px var(--accent);opacity:0;transition:opacity var(--dur-fade) var(--ease)}
.foot__ink:focus-visible::before{opacity:1}
@media (hover:hover){.foot__end:hover .foot__dot{transform:scale(1.18)}}
.foot__end:active .foot__dot{transform:scale(.88);transition-duration:var(--dur-press)}

/* hint: a drop settling (only when opened fresh from outside, once per page view) */
@keyframes dot-settle{
  0%{transform:none}
  22%{transform:scale(1.16,.86)}
  48%{transform:scale(.92,1.1)}
  72%{transform:scale(1.04,.97)}
  100%{transform:none}
}
.foot__end.is-settle .foot__dot{animation:dot-settle var(--dur-count) var(--ease-soft)}
/* tap: the dot falls to where it lands (120 ms, accelerating) … */
.foot__end.is-fallen .foot__dot{opacity:0;transform:translate(var(--land-x),var(--land-y)) scale(.55);
  transition:opacity var(--dur-exit) var(--ease-exit),transform var(--dur-exit) var(--ease-exit)}
/* … and from 2.0 s a new dot wells up from the baseline (420 ms, no overshoot) */
@keyframes dot-refill{
  0%{opacity:0;transform:scale(0)}
  30%{opacity:1}
  100%{opacity:1;transform:none}
}
.foot__end.is-refill .foot__dot{animation:dot-refill var(--dur-push) var(--ease-soft) both}

/* reduced motion, or no engine: a still of real ink where the drop lands */
.foot__still{position:absolute;z-index:0;pointer-events:none;width:6em;height:6em;max-width:none;
  left:calc(var(--dot-x) + var(--land-x) - 3em);top:calc(var(--dot-y) + var(--land-y) - 3em);
  opacity:0;transition:opacity var(--dur-fade) var(--ease)}
.foot__still.on{opacity:1}
.foot__still.off{transition-duration:600ms}
:root[data-paper] .foot__still{mix-blend-mode:multiply}
@media (prefers-reduced-motion:reduce){.foot__dot{transition:none!important;animation:none!important;transform:none!important;opacity:1!important}}
:root[data-motion="reduced"] .foot__dot{transition:none!important;animation:none!important;transform:none!important;opacity:1!important}
@media print{.foot__ink,.foot__still{display:none!important}.foot__dot{transform:none!important;opacity:1!important}}