/* © 2026 LFM Labs. All rights reserved. */
/* looks-mock.css: taste mocks for BLUEPRINT S4 Dimensions (Sir 2026-11-13: "come up
   with various mocks of the version to see what it looks like"). Not the S4a format:
   one block per dimension, switched by html[data-look] (?look= in index.html).
   Paper is the house look and needs no block. Each block overrides the page tokens
   (intro.js reads --ink and --dust-alpha for the particles) plus --p-* tokens for the
   particle material, and restyles the buttons, story and background: a full skin
   (Sir 2026-11-13: "Full skin (b)"). Fonts come from Google Fonts here; the real
   build self-hosts and subsets them (S4 weight budget). Selectors use html:root so
   they win over the theme blocks whatever the system setting. */

/* ---------------------------------------------------------------- Neon */
/* Rebuilt (client 2026-11-13: "swap the neon tubes, I guess the particles did not glow
   enough"). One medium: bent glass tubes on a dark brick wall. The letters are tubes
   (--p-tube: rasterLine strokes them, round caps and joins, so grains sample the tube),
   the glow is in the shader (--p-glow: a white-hot core and a halo per grain, added up),
   and each line ignites by stroke group when it settles. Pink tubes; the eyebrow and the
   buttons are a second, orange-red tube (data-tone="2"). No cyan (another LFM product). */
html:root[data-look="neon"] {
  color-scheme: dark;
  --paper-lift: #1a1011; --paper: #0d0808; --paper-edge: #050303;
  --ink: #ffe6f8; --on-ink: #0d0808; --quiet: #d39cbf; --ink-2: #ffd3ef; --ink-3: #8a5a76;
  --accent: #b8532c; --on-accent: #fff; /* pinned, so the pair holds in either theme */
  --grain-opacity: 0.05; --dust-alpha: 0.3;
  --tube: #ff2bd6; --tube-2: #ff4a1c; --tube-core: #ffe6f8; --tube-core-2: #ffe4da;
  --type: "Comfortaa", "Quicksand", system-ui, sans-serif; --brand-type: "Comfortaa", system-ui, sans-serif;
  --mark-stroke: rgb(255, 43, 214);
  --cursor-stroke: rgba(255, 230, 248, 1); --cursor-fill: rgba(255, 43, 214, 0.18);
  --cursor-fill-hot: rgba(255, 74, 28, 0.45); --cursor-shadow: rgba(255, 43, 214, 0.9);
  --tube-glow:
    0 0 1px #fff, 0 0 4px var(--tube), 0 0 10px var(--tube), 0 0 22px rgba(255, 43, 214, 0.75),
    0 0 46px rgba(255, 43, 214, 0.4), inset 0 0 4px var(--tube), inset 0 0 12px rgba(255, 43, 214, 0.45);
  --tube-glow-2:
    0 0 1px #fff, 0 0 4px var(--tube-2), 0 0 10px var(--tube-2), 0 0 22px rgba(255, 74, 28, 0.75),
    0 0 46px rgba(255, 74, 28, 0.4), inset 0 0 4px var(--tube-2), inset 0 0 12px rgba(255, 74, 28, 0.45);
  --tube-text: 0 0 2px #fff, 0 0 6px var(--tube), 0 0 14px var(--tube), 0 0 30px rgba(255, 43, 214, 0.7), 0 0 60px rgba(255, 43, 214, 0.35);
  --tube-text-2: 0 0 2px #fff, 0 0 6px var(--tube-2), 0 0 14px var(--tube-2), 0 0 30px rgba(255, 74, 28, 0.7);
  /* The particle material: pink tubes, a second tube colour, light that adds up. */
  --p-ink: #ff2bd6; --p-ink-2: #ff4a1c;
  --p-shape: 0; --p-blend: 1; --p-glow: 1; --p-tube: 1; --p-weight: 300;
  --p-cursor: glow;   /* a glow trail; tubes the cursor passes over buzz */
}
/* A dark, warm brick wall, lit by a pink pool behind the text. Bricks are one inline SVG
   tile (mortar and two staggered courses) plus a larger tile that varies the bricks. */
html:root[data-look="neon"] body {
  background:
    radial-gradient(ellipse 52% 34% at 50% 42%, rgba(255, 43, 214, 0.22), rgba(255, 43, 214, 0.07) 45%, transparent 75%),
    radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0, 0, 0, 0.78) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='192'%3E%3Cg fill='%23000' fill-opacity='0.35'%3E%3Crect x='121.5' y='1.5' width='117' height='29'/%3E%3Crect x='1.5' y='97.5' width='117' height='29'/%3E%3Crect x='181.5' y='129.5' width='117' height='29'/%3E%3Crect x='-58.5' y='161.5' width='117' height='29'/%3E%3C/g%3E%3Cg fill='%23ff9a7a' fill-opacity='0.035'%3E%3Crect x='241.5' y='65.5' width='117' height='29'/%3E%3Crect x='61.5' y='33.5' width='117' height='29'/%3E%3Crect x='121.5' y='161.5' width='117' height='29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 360px 192px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Crect width='120' height='64' fill='%23070505'/%3E%3Cg fill='%231c1110'%3E%3Crect x='1.5' y='1.5' width='117' height='29' rx='2'/%3E%3Crect x='-58.5' y='33.5' width='117' height='29' rx='2'/%3E%3Crect x='61.5' y='33.5' width='117' height='29' rx='2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 64px,
    #0d0808;
}
/* HTML type as tubes: the same stroke as the particles (0.075em, centred on the outline). */
/* A gentle wide bloom on top of the shader's halo. */
html:root[data-look="neon"] #ink { filter: drop-shadow(0 0 6px rgba(255, 43, 214, 0.55)) drop-shadow(0 0 22px rgba(255, 43, 214, 0.3)); }
html:root[data-look="neon"] .type-line,
html:root[data-look="neon"] .story h2 {
  color: var(--tube-core); -webkit-text-stroke: 0.075em var(--tube-core); paint-order: stroke fill;
  text-shadow: var(--tube-text); font-weight: 300; letter-spacing: 0;
}
html:root[data-look="neon"] .choice {
  background: rgba(255, 74, 28, 0.03); color: var(--tube-core-2);
  border: 2px solid var(--tube-core-2); border-radius: 999px; box-shadow: var(--tube-glow-2);
  text-shadow: var(--tube-text-2); backdrop-filter: none; -webkit-backdrop-filter: none;
  font: 400 15px/1.2 var(--brand-type); letter-spacing: 0.02em;
}
html:root[data-look="neon"] .choice::before, html:root[data-look="neon"] .choice::after { display: none; }
html:root[data-look="neon"] .choice:hover, html:root[data-look="neon"] .choice:focus-visible {
  color: #fff; border-color: #fff; background: rgba(255, 74, 28, 0.1);
  box-shadow: 0 0 2px #fff, 0 0 6px var(--tube-2), 0 0 16px var(--tube-2), 0 0 34px rgba(255, 74, 28, 0.9),
    0 0 70px rgba(255, 74, 28, 0.55), inset 0 0 8px var(--tube-2), inset 0 0 20px rgba(255, 74, 28, 0.6);
}
/* Story screen: the field and phone are pink tubes; the eyebrow and button, orange-red. */
html:root[data-look="neon"] .story-eyebrow {
  color: var(--tube-core-2); -webkit-text-stroke: 0.075em var(--tube-core-2); paint-order: stroke fill;
  font-weight: 400; text-shadow: var(--tube-text-2);
}
html:root[data-look="neon"] .story-sub {
  color: var(--ink-2); -webkit-text-stroke: 0.075em var(--ink-2); paint-order: stroke fill;
  font-weight: 300; text-shadow: 0 0 6px rgba(255, 43, 214, 0.8), 0 0 18px rgba(255, 43, 214, 0.45);
}
html:root[data-look="neon"] .story-cta span { -webkit-text-stroke: 0.075em currentColor; paint-order: stroke fill; }
html:root[data-look="neon"] .story-field {
  border: 2px solid var(--tube-core); border-radius: 999px; background: rgba(255, 43, 214, 0.03);
  box-shadow: var(--tube-glow); color: var(--tube-core); font-weight: 300; text-shadow: var(--tube-text);
}
html:root[data-look="neon"] .story-field::placeholder {
  color: var(--quiet); -webkit-text-stroke: 0.075em var(--quiet); text-shadow: 0 0 8px rgba(255, 43, 214, 0.6);
}
html:root[data-look="neon"] .story-phone { border: 2px solid var(--tube-core); box-shadow: var(--tube-glow); }
html:root[data-look="neon"] .story-bar {
  border: 1.5px solid var(--tube-core);
  box-shadow: 0 0 3px var(--tube), 0 0 9px rgba(255, 43, 214, 0.7), 0 0 20px rgba(255, 43, 214, 0.35), inset 0 0 4px rgba(255, 43, 214, 0.5);
}
html:root[data-look="neon"] .story-draft, html:root[data-look="neon"] .replay { text-shadow: 0 0 6px rgba(255, 43, 214, 0.6); }

/* -------------------------------------------------- Signal (retro screen) */
html:root[data-look="signal"] {
  color-scheme: dark;
  --paper-lift: #14100a; --paper: #0d0a06; --paper-edge: #070503;
  --ink: #ffb547; --on-ink: #0d0a06; --quiet: #b07a2c; --ink-2: #ffc977; --ink-3: #8a5f22;
  --accent: #b8532c; --on-accent: #fff; /* pinned, so the pair holds in either theme */
  --grain-opacity: 0.06; --dust-alpha: 0.8;
  --type: "VT323", ui-monospace, monospace; --brand-type: "IBM Plex Mono", ui-monospace, monospace;
  --mark-stroke: rgb(255, 181, 71);
  --cursor-stroke: rgba(255, 181, 71, 1); --cursor-fill: rgba(255, 181, 71, 0.15);
  --cursor-fill-hot: rgba(255, 181, 71, 0.5); --cursor-shadow: rgba(255, 181, 71, 0.6);
  --p-shape: 1; --p-blend: 1; --p-snap: 3; --p-weight: 400;
  --p-cursor: burn;   /* phosphor burn-in; bad tracking by the live cursor */
}
html:root[data-look="signal"] body { background: radial-gradient(ellipse at 50% 45%, #1a130a 0%, #0d0a06 60%, #050302 100%); }
/* scanlines and a vignette, over everything but the cursor */
html:root[data-look="signal"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.28) 3px),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
}
html:root[data-look="signal"] #ink { filter: drop-shadow(0 0 4px rgba(255, 181, 71, 0.6)); }
html:root[data-look="signal"] .type-line,
html:root[data-look="signal"] .story h2 { text-shadow: 0 0 6px rgba(255, 181, 71, 0.65); letter-spacing: 0.02em; }
html:root[data-look="signal"] .choice {
  background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 0 8px rgba(255, 181, 71, 0.35);
  font: 400 15px/1.2 var(--brand-type); text-transform: uppercase; letter-spacing: 0.08em;
}
html:root[data-look="signal"] .choice::before, html:root[data-look="signal"] .choice::after { display: none; }
html:root[data-look="signal"] .choice:hover { background: var(--ink); color: var(--on-ink); }
html:root[data-look="signal"] .choice::selection { background: var(--ink); }
/* Story screen: square amber 2px boxes, mono labels. */
html:root[data-look="signal"] .story-eyebrow { font: 400 13px/1.2 var(--brand-type); letter-spacing: 0.24em; }
html:root[data-look="signal"] .story-sub { font-size: clamp(20px, 1.9vw, 25px); line-height: 1.3; color: var(--quiet); }
html:root[data-look="signal"] .story-field {
  border: 2px solid var(--ink); border-radius: 0; background: transparent;
  font: 400 15px/1.2 var(--brand-type); text-transform: uppercase; letter-spacing: 0.06em;
}
html:root[data-look="signal"] .story-phone { border: 2px solid var(--ink); border-radius: 0; box-shadow: 0 0 8px rgba(255, 181, 71, 0.3); }
html:root[data-look="signal"] .story-bar { border: 2px solid var(--quiet); border-radius: 0; }
html:root[data-look="signal"] .story-draft { font-family: var(--brand-type); }

/* ------------------------------------------------------------- Terminal */
/* The code itself, flat and crisp (not Signal's analogue CRT: no scanlines, no glow).
   Light-grey type on near-black, one green accent: the block caret. The particles are
   characters (--p-shape: 4, a glyph atlas), the field falls as character rain
   (--p-fall), and the words resolve out of it as an ASCII mosaic. */
html:root[data-look="terminal"] {
  color-scheme: dark;
  --paper-lift: #0b0c0b; --paper: #0a0b0a; --paper-edge: #0a0b0a;
  --ink: #d6dbd2; --on-ink: #0a0b0a; --quiet: #7f877b; --ink-2: #b4bbaf; --ink-3: #5c6458;
  --grain-opacity: 0; --dust-alpha: 0.6;
  --accent: #3dff8a; --on-accent: #0a0b0a;
  --type: "JetBrains Mono", ui-monospace, monospace; --brand-type: "JetBrains Mono", ui-monospace, monospace;
  --mark-stroke: rgb(214, 219, 210);
  --cursor-stroke: rgba(214, 219, 210, 1); --cursor-fill: rgba(10, 11, 10, 0.5);
  --cursor-fill-hot: rgba(61, 255, 138, 0.5); --cursor-shadow: rgba(0, 0, 0, 0);
  --p-shape: 4; --p-blend: 0; --p-fall: 1; --p-weight: 700;
  --p-cursor: scramble; /* glyphs under the cursor scramble, then resolve */
}
html:root[data-look="terminal"] body { background: #0a0b0a; }
html:root[data-look="terminal"] .type-line,
html:root[data-look="terminal"] .story h2 { font-weight: 500; letter-spacing: -0.03em; }
@keyframes lfm-term-blink { 50% { opacity: 0; } }
html:root[data-look="terminal"] .story h2::after {
  content: ""; display: inline-block; width: 0.55em; height: 0.92em; margin-left: 0.14em;
  vertical-align: -0.1em; background: var(--accent); animation: lfm-term-blink 1.06s steps(1, end) infinite;
}
html:root[data-look="terminal"] .story-eyebrow { font: 500 12px/1.2 var(--type); letter-spacing: 0.14em; color: var(--quiet); }
html:root[data-look="terminal"] .story-eyebrow::before { content: "// "; }
html:root[data-look="terminal"] .story-sub { font: 400 clamp(15px, 1.3vw, 18px)/1.55 var(--type); color: var(--quiet); }
/* The field is a prompt: "> yourbusiness.com", no box, a green caret. */
html:root[data-look="terminal"] .story-form { position: relative; }
html:root[data-look="terminal"] .story-form::before {
  content: ">"; position: absolute; left: 0; top: 0; height: 48px;
  font: 500 16px/48px var(--type); color: var(--accent); pointer-events: none;
}
html:root[data-look="terminal"] .story-field {
  border: 0; border-radius: 0; background: transparent; max-width: 20rem;
  padding: 15px 12px 15px 22px; font: 400 16px/18px var(--type); caret-color: var(--accent);
}
html:root[data-look="terminal"] .story-field:focus-visible { outline: 1px solid var(--ink-3); outline-offset: 2px; }
/* Buttons are bracketed commands: "[ Check my site ]". No box; hover inverts. */
html:root[data-look="terminal"] .choice {
  background: transparent; color: var(--ink); border: 0; border-radius: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; font: 500 15px/1.2 var(--type);
  letter-spacing: 0; padding: 12px 8px;
}
html:root[data-look="terminal"] .choice::before,
html:root[data-look="terminal"] .choice::after {
  position: static; inset: auto; padding: 0; height: auto; display: inline; z-index: auto;
  background: none; -webkit-mask: none; mask: none; opacity: 1; border-radius: 0;
  color: var(--quiet); white-space: pre;
}
html:root[data-look="terminal"] .choice::before { content: "[ "; }
html:root[data-look="terminal"] .choice::after { content: " ]"; }
html:root[data-look="terminal"] .choice:hover,
html:root[data-look="terminal"] .choice:focus-visible { background: var(--accent); color: var(--on-ink); translate: none; box-shadow: none; }
html:root[data-look="terminal"] .choice:hover::before, html:root[data-look="terminal"] .choice:hover::after,
html:root[data-look="terminal"] .choice:focus-visible::before, html:root[data-look="terminal"] .choice:focus-visible::after { color: var(--on-ink); }
html:root[data-look="terminal"] .choice:active { background-image: none; }
/* Phone frame and skeleton: box-drawing hairlines, square corners. */
html:root[data-look="terminal"] .story-phone { border: 1px solid var(--ink-3); border-radius: 0; }
html:root[data-look="terminal"] .story-bar,
html:root[data-look="terminal"] .story-bar.hero,
html:root[data-look="terminal"] .story-bar.pill { border: 1px solid var(--ink-3); border-radius: 0; }
html:root[data-look="terminal"] .story-draft { font-family: var(--type); }

/* ---------------------------------------------------------------- Comic */
html:root[data-look="comic"] {
  color-scheme: light;
  --paper-lift: #fffaf0; --paper: #fff3d6; --paper-edge: #f6e3b3;
  --ink: #141414; --on-ink: #fff; --quiet: #5b5246; --ink-2: #2a2a2a; --ink-3: #6b6152;
  --grain-opacity: 0.03; --dust-alpha: 1.1;
  --accent: #ff4b3e; --accent-2: #ffd23f; --on-accent: #141414;
  --type: "Bangers", "Comic Neue", system-ui, sans-serif; --brand-type: "Comic Neue", system-ui, sans-serif;
  --mark-stroke: rgb(20, 20, 20);
  --cursor-stroke: rgba(20, 20, 20, 1); --cursor-fill: rgba(255, 210, 63, 0.9);
  --cursor-fill-hot: rgba(255, 75, 62, 0.9); --cursor-shadow: rgba(0, 0, 0, 0.0);
  --p-shape: 2; --p-blend: 0; --p-step: 12; --p-weight: 400;
  --p-cursor: flick;  /* fast moves flick dots away and stretch them into speed lines */
}
html:root[data-look="comic"] body {
  background:
    radial-gradient(circle, rgba(255, 75, 62, 0.16) 1.2px, transparent 1.6px) 0 0 / 9px 9px,
    radial-gradient(ellipse at 50% 30%, #fffaf0 0%, #fff3d6 60%, #f6e3b3 100%);
}
html:root[data-look="comic"] .type-line,
html:root[data-look="comic"] .story h2 { letter-spacing: 0.03em; font-weight: 400; }
html:root[data-look="comic"] .choice {
  background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 5px 5px 0 var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none;
  font: 700 16px/1.2 var(--brand-type);
}
html:root[data-look="comic"] .choice::before, html:root[data-look="comic"] .choice::after { display: none; }
html:root[data-look="comic"] .choice:hover { background: var(--accent-2); translate: -2px -2px; box-shadow: 7px 7px 0 var(--ink); }
html:root[data-look="comic"] .cursor path { stroke-width: 2.2; }
/* Story screen: 3px black borders with a hard offset shadow. */
html:root[data-look="comic"] .story-eyebrow { font: 700 13px/1.2 var(--brand-type); letter-spacing: 0.2em; color: var(--accent); }
html:root[data-look="comic"] .story-sub { font: 400 clamp(17px, 1.6vw, 21px)/1.4 var(--brand-type); color: var(--quiet); }
html:root[data-look="comic"] .story-field {
  border: 3px solid var(--ink); border-radius: 14px; background: #fff;
  box-shadow: 4px 4px 0 var(--ink); font: 400 16px/1.2 var(--brand-type);
}
html:root[data-look="comic"] .story-phone { border: 3px solid var(--ink); background: #fff; box-shadow: 7px 7px 0 var(--ink); }
html:root[data-look="comic"] .story-bar { border: 2px solid var(--ink); background: var(--accent-2); }
html:root[data-look="comic"] .story-bar.hero { background: var(--accent); }

/* ------------------------------------------------------------ Blueprint */
html:root[data-look="blueprint"] {
  color-scheme: dark;
  --paper-lift: #1c4f8a; --paper: #15427a; --paper-edge: #0e3263;
  --ink: #eef5ff; --on-ink: #15427a; --quiet: #9fbde6; --ink-2: #d6e6fb; --ink-3: #86a7d6;
  --accent: #b8532c; --on-accent: #fff; /* pinned, so the pair holds in either theme */
  --grain-opacity: 0.05; --dust-alpha: 0.75;
  --type: "IBM Plex Sans Condensed", system-ui, sans-serif; --brand-type: "IBM Plex Mono", ui-monospace, monospace;
  --mark-stroke: rgb(238, 245, 255);
  --cursor-stroke: rgba(238, 245, 255, 1); --cursor-fill: rgba(21, 66, 122, 0.4);
  --cursor-fill-hot: rgba(238, 245, 255, 0.3); --cursor-shadow: rgba(0, 0, 0, 0.3);
  --p-shape: 3; --p-blend: 0; --p-weight: 300;
  --p-cursor: survey; /* grains near the cursor's x and y lines snap to the 24 px grid */
}
html:root[data-look="blueprint"] body {
  background:
    linear-gradient(rgba(238, 245, 255, 0.12) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgba(238, 245, 255, 0.12) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(rgba(238, 245, 255, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(238, 245, 255, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(ellipse at 50% 35%, #1c4f8a 0%, #15427a 55%, #0e3263 100%);
}
html:root[data-look="blueprint"] .type-line,
html:root[data-look="blueprint"] .story h2 { font-weight: 300; letter-spacing: 0.01em; }
html:root[data-look="blueprint"] .choice {
  background: rgba(238, 245, 255, 0.04); color: var(--ink); border: 1px dashed rgba(238, 245, 255, 0.8);
  border-radius: 2px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  font: 400 13px/1.2 var(--brand-type); text-transform: uppercase; letter-spacing: 0.14em;
}
html:root[data-look="blueprint"] .choice::before, html:root[data-look="blueprint"] .choice::after { display: none; }
html:root[data-look="blueprint"] .choice:hover { border-style: solid; background: rgba(238, 245, 255, 0.12); }
/* Story screen: dashed hairlines, mono labels, square-ish corners. */
html:root[data-look="blueprint"] .story-eyebrow { font: 400 12px/1.2 var(--brand-type); letter-spacing: 0.22em; }
html:root[data-look="blueprint"] .story-sub { font-weight: 300; color: var(--quiet); }
html:root[data-look="blueprint"] .story-field {
  border: 1px dashed rgba(238, 245, 255, 0.8); border-radius: 2px; background: rgba(238, 245, 255, 0.04);
  font: 400 13px/1.2 var(--brand-type); letter-spacing: 0.06em;
}
html:root[data-look="blueprint"] .story-phone { border: 1px dashed rgba(238, 245, 255, 0.8); border-radius: 18px; }
html:root[data-look="blueprint"] .story-bar { border: 1px dashed rgba(238, 245, 255, 0.55); border-radius: 2px; }
html:root[data-look="blueprint"] .story-draft { font-family: var(--brand-type); }
/* Survey guides through the cursor (intro.js adds them for --p-cursor: survey). */
html:root[data-look="blueprint"] .survey-guide { position: fixed; z-index: 3; pointer-events: none; opacity: 0; will-change: transform, opacity; }
html:root[data-look="blueprint"] .survey-guide.x { top: 0; bottom: 0; left: 0; width: 0; border-left: 1px dashed rgba(238, 245, 255, 0.55); }
html:root[data-look="blueprint"] .survey-guide.y { left: 0; right: 0; top: 0; height: 0; border-top: 1px dashed rgba(238, 245, 255, 0.55); }

/* ------------------------------------------------------------------ Ink */
html:root[data-look="ink"] {
  color-scheme: light;
  --paper-lift: #fbf8f0; --paper: #f2ecdf; --paper-edge: #e4dccb;
  --ink: #16130f; --on-ink: #fbf8f0; --quiet: #7a7062; --ink-2: #3a342c; --ink-3: #8d8373;
  --grain-opacity: 0.12; --dust-alpha: 1.2;
  --accent: #c8361f; --on-accent: #fbf8f0;
  --type: "Cormorant Garamond", Georgia, serif; --brand-type: "EB Garamond", Georgia, serif;
  --mark-stroke: rgb(22, 19, 15);
  --cursor-stroke: rgba(22, 19, 15, 0.9); --cursor-fill: rgba(242, 236, 223, 0.4);
  --cursor-fill-hot: rgba(200, 54, 31, 0.25); --cursor-shadow: rgba(0, 0, 0, 0.15);
  --p-shape: 0; --p-blend: 0; --p-soft: 1; --p-weight: 400; --p-style: italic;
  --p-cursor: smudge; /* smeared along the stroke, darker where it lingers, dries in ~3 s */
}
html:root[data-look="ink"] body {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(22, 19, 15, 0.05), transparent 45%),
    radial-gradient(ellipse at 85% 80%, rgba(22, 19, 15, 0.06), transparent 50%),
    radial-gradient(ellipse at 50% 30%, #fbf8f0 0%, #f2ecdf 55%, #e4dccb 100%);
}
html:root[data-look="ink"] #ink { filter: blur(0.35px) contrast(1.15); }
html:root[data-look="ink"] .type-line,
html:root[data-look="ink"] .story h2 { font-weight: 300; font-style: italic; letter-spacing: 0; }
html:root[data-look="ink"] .choice {
  background: transparent; color: var(--ink); border: 0; border-radius: 0;
  border-bottom: 1.5px solid var(--ink); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  font: 400 18px/1.2 var(--brand-type); font-style: italic; padding-left: 4px; padding-right: 4px;
}
html:root[data-look="ink"] .choice::before, html:root[data-look="ink"] .choice::after { display: none; }
html:root[data-look="ink"] .choice:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* Story screen: a single ink underline for the field, ink hairlines for the frame. */
html:root[data-look="ink"] .story-eyebrow { font: 400 14px/1.2 var(--brand-type); letter-spacing: 0.16em; color: var(--ink-2); }
html:root[data-look="ink"] .story-sub { font: italic 400 clamp(19px, 1.7vw, 23px)/1.4 var(--type); color: var(--quiet); }
html:root[data-look="ink"] .story-field {
  border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; background: transparent;
  padding-left: 4px; padding-right: 4px; font: italic 400 18px/1.2 var(--brand-type);
}
html:root[data-look="ink"] .story-phone { border: 1px solid var(--ink); }
html:root[data-look="ink"] .story-bar { border: 1px solid var(--ink-3); }