/* nikotani.com — "I love building."
   A desert at golden hour folds into a name; the night of the hologram; then the warm light of the products.
   Type: Goodboy Gallery's pair. Instrument Serif speaks (upright only, never italic); Geist reads; Geist Mono labels. */

@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Chango"; src: url("/fonts/chango.ttf") format("truetype"); font-display: swap; }

:root {
  --night: #07080b;
  --on-night: #efe9df;
  --dim: #938e85;
  --faint: #ffffff17;
  --accent: #ff9b54;  /* sun-flare orange, from the hero */
  --holo: #8aa0ff;
  --cream: #f3ecdf;
  --ink: #17120d;
  --ink-dim: #6e6255;
  --orange: #f47a2a;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.2, .75, .15, 1);
  --gutter: clamp(18px, 4.4vw, 72px);
  --bg: var(--night);     /* scene colors, blended by scroll */
  --fg: var(--on-night);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; font-synthesis: none; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, figure, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
em { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--night); }
.wrap { width: 100%; max-width: 1480px; margin: 0 auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rc .c { display: inline-block; text-align: center; }
.rc .c.g { font-family: var(--mono); font-size: .58em; transform: translateY(-.16em); opacity: .72; }
.skip { position: fixed; z-index: 100; left: 12px; top: -60px; padding: 10px 14px; background: var(--on-night); color: var(--night); font: 500 12px/1 var(--mono); border-radius: 99px; }
.skip:focus { top: 12px; }
.eyebrow { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .62; }
.arrow { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; transition: transform .5s var(--ease); }
a:hover > .arrow { transform: translate(2px, -2px); }

/* Display type: one voice everywhere. */
.about-title, .made-title, .goodboy-title, .side-title, .bridge-line, .lonely-line, .hero-title h1 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; line-height: .95; text-wrap: balance;
}

/* ---------- Pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 99px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid currentColor; cursor: pointer; background: none; transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); white-space: nowrap; }
.pill-light { background: var(--on-night); color: var(--night); border-color: var(--on-night); }
.pill-light:hover { background: transparent; color: var(--on-night); }
.pill-ink { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pill-ink:hover { background: transparent; color: var(--ink); }
.pill-ghost { color: var(--on-night); border-color: #ffffff38; }
.pill-ghost:hover { border-color: var(--on-night); background: #ffffff0d; }
.pill-big { min-height: 56px; padding: 0 28px; font-size: 14px; text-transform: none; letter-spacing: .02em; }

/* ---------- Nav ---------- */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: calc(16px + env(safe-area-inset-top, 0px)) var(--gutter) 0; color: #fff; mix-blend-mode: difference; pointer-events: none; }
.nav > *, .nav a { pointer-events: auto; }
.nav-name { font-family: var(--serif); font-size: 19px; font-weight: 400; letter-spacing: -.01em; opacity: 0; transform: translateY(-6px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.nav.named .nav-name { opacity: 1; transform: none; }
.nav nav { display: flex; align-items: center; gap: 26px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.nav-link { position: relative; padding: 8px 0; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-pill { padding: 11px 16px; border-radius: 99px; background: #fff; color: #000; }

/* ---------- 1 · Hero: into the name ---------- */
.hero { position: relative; height: calc(var(--hero-len, 150vh) + 235vh); }
.hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: var(--night); }
.hero-img, .hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: 53% 50%; }
.gl-on .hero-img, .gl-pending .hero-img { visibility: hidden; }
.hero-img { transform-origin: 53% 30%; }
/* Warm light under the mask: the letters glow like the horizon they hold. */
.hero-lift { position: absolute; inset: 0; z-index: 1; mix-blend-mode: screen; pointer-events: none; opacity: 0; background: radial-gradient(70% 46% at 50% 50%, #b9772c99, transparent 72%); }
.hero-mask { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--night); mix-blend-mode: multiply; pointer-events: none; }
/* No will-change here: the letters must re-rasterize as they shrink from 220× to 1×, or Chrome keeps a stale tile. */
.hero-mark { color: #fff; font-family: var(--serif); font-weight: 400; font-size: 16vw; line-height: .84; letter-spacing: -.015em; white-space: nowrap; text-align: center; }
.hero-mark > span { display: inline-block; }
.hero-mark .base { display: inline-block; width: 0; height: 0; }
.hero-title { position: absolute; z-index: 3; left: 0; right: 0; top: clamp(90px, 15vh, 170px); text-align: center; color: #1b130b; will-change: transform, opacity, filter; }
.hero-title h1 { font-size: clamp(72px, 12.5vw, 230px); font-weight: 400; letter-spacing: -.02em; }
.hero-title p { margin-top: clamp(4px, 1vh, 12px); font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.3vw, 38px); letter-spacing: -.005em; color: #2a1c0e; }
.hero-after { position: absolute; z-index: 3; left: 0; right: 0; top: calc(50% + var(--mark-h, 14vw) / 2 + clamp(18px, 3vh, 34px)); text-align: center; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.1vw, 34px); color: var(--on-night); opacity: 0; }
.hero-cue { position: absolute; z-index: 3; left: 50%; bottom: calc(104px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font: 500 10px/1 var(--mono); letter-spacing: .34em; text-transform: uppercase; color: #e9dcc8b3; }
.hero-cue i { display: block; width: 1px; height: 34px; background: linear-gradient(#e9dcc8, transparent); transform-origin: top; animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.brands { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; padding-inline: var(--gutter); color: #e9dcc8; }
.brands-label, .brands-foot { font: 500 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; opacity: .72; }
.brands-foot { opacity: .45; }
.brands-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.brands-track { display: flex; align-items: center; gap: 76px; width: max-content; animation: marquee 38s linear infinite; }
.brand { display: flex; align-items: center; gap: 9px; flex: none; opacity: .82; }
/* Balanced by eye: each mark reads at about the same visual weight. */
.brand img { height: 28px; width: auto; }
.brand-gb img { height: 44px; }
.brand-ds img { height: 20px; }
.brand-tw img { position: relative; top: -5px; height: 30px; } /* sized and lifted by its letters, not the hat */
.brand-sc span { font-family: "Chango", var(--sans); font-size: 19px; line-height: 1; color: #fff; letter-spacing: .01em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 2 · About (slides up over the hero) ---------- */
/* Espresso: a warm dark that separates from the black around it. */
.about { --on-night: #f4e8d5; --dim: #9a8977; --faint: #ffecd21a; position: relative; z-index: 4; margin-top: -100vh; margin-top: -100svh; background: #1a1411; color: var(--on-night); border-radius: 28px 28px 0 0; padding-block: clamp(100px, 15vh, 170px) clamp(120px, 18vh, 200px); box-shadow: 0 -40px 90px #000d; }
.about-title { font-size: clamp(50px, 8.6vw, 156px); }
.about-title em { color: var(--accent); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 96px); margin-top: clamp(56px, 8vh, 100px); align-items: start; }
.shutter-frame { overflow: hidden; border-radius: 10px; aspect-ratio: 3 / 2; background: #241c18; will-change: clip-path; }
.shutter img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 60%; will-change: transform; }
.shutter figcaption { margin-top: 14px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.about-copy { display: grid; gap: 40px; }
.bio { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.7vw, 42px); line-height: 1.16; letter-spacing: -.008em; text-wrap: pretty; }
.bio .w { opacity: .16; }
.facts { display: grid; border-top: 1px solid var(--faint); }
.facts > div { display: grid; grid-template-columns: minmax(130px, 40%) 1fr; gap: 16px; padding-block: 15px; border-bottom: 1px solid var(--faint); }
.facts dt { font: 500 11px/1.7 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.facts dd { font-size: 17px; }
/* Toolbox: a quiet extension of the facts. Small marks, names on hover or focus. */
.toolbox { display: grid; gap: 14px; }
.toolbox-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font: 500 11px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.toolbox-label span { letter-spacing: .06em; text-transform: none; font-family: var(--sans); font-size: 13px; color: #8d7e6f; }
.tool-rows { display: grid; margin: 0; border-top: 1px solid var(--faint); }
.tool-row { display: grid; grid-template-columns: minmax(130px, 40%) 1fr; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--faint); align-items: center; }
.tool-row dt { font: 500 11px/1.7 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.tool-row dd { margin: 0; }
.tools { display: flex; flex-wrap: wrap; gap: 12px 15px; }
.tool { position: relative; display: block; outline: none; }
.tool-mark { height: 20px; display: flex; align-items: center; color: var(--on-night); opacity: .55; transition: color .4s var(--ease), opacity .4s var(--ease); }
.tool-mark svg { width: 20px; height: 20px; fill: currentColor; }
.tool:hover .tool-mark, .tool:focus-visible .tool-mark { opacity: 1; }
.tool-badge { display: grid; place-items: center; width: 20px; height: 20px; border: 1.25px solid currentColor; border-radius: 5px; font: 600 9px/1 var(--sans); }
.tool-word { font: 600 13px/1 var(--sans); letter-spacing: -.02em; }
.tool:hover .tool-badge, .tool:hover .tool-word { color: var(--accent); }
.tool-name { position: absolute; z-index: 2; left: 50%; bottom: calc(100% + 9px); transform: translate(-50%, 4px); padding: 6px 9px; border-radius: 6px; background: var(--on-night); color: var(--night); font: 500 10px/1 var(--mono); letter-spacing: .06em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .3s var(--ease); }
.tool:hover .tool-name, .tool:focus-visible .tool-name { opacity: 1; transform: translate(-50%, 0); }
.tool:focus-visible .tool-mark { outline: 1px solid var(--accent); outline-offset: 4px; border-radius: 3px; }

/* ---------- 3 · Made by hand ---------- */
.made { position: relative; z-index: 4; background: var(--night); color: var(--on-night); padding-top: clamp(110px, 16vh, 200px); }
.made-head { display: grid; gap: 24px; padding-bottom: clamp(30px, 5vh, 60px); }
.made-title { font-size: clamp(46px, 7.4vw, 134px); max-width: 12ch; }
.made-title em { color: var(--accent); }

.grow { position: relative; height: 230vh; }
.grow-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.grow-frame { position: absolute; inset: 0; background: #000; clip-path: inset(18% 22% 18% 22% round 14px); will-change: clip-path; }
.grow-frame video { width: 100%; height: 100%; object-fit: cover; }
.grow-cap { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #efe9dfcc; }
.grow-cap b { color: var(--on-night); font-weight: 500; }

.lonely { position: relative; height: 560vh; }
.lonely-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #01030d; }
.lonely-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
.lonely-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #01030dde 0%, #01030d00 40%), linear-gradient(180deg, #01030d99 0%, #01030d00 22%); }
.lonely-line { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(150px, 23vh, 250px); padding-inline: var(--gutter); text-align: center; font-size: clamp(52px, 8.4vw, 156px); color: #f2f4ff; opacity: 0; transform: translateY(24px); filter: blur(12px); transition: opacity 1.6s var(--ease), transform 1.6s var(--ease), filter 1.6s var(--ease); pointer-events: none; }
.lonely-line.on { opacity: var(--line-fade, 1); transform: none; filter: none; }
.lonely-bar { position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-inline: var(--gutter); }
.lonely-credit { display: grid; gap: 4px; font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #c9cde0b3; }
.lonely-title { color: #f2f4ff; }
.lonely-more { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 6px; color: #f2f4ff; border-bottom: 1px solid #f2f4ff59; padding-bottom: 2px; transition: border-color .3s var(--ease); }
.lonely-more:hover { border-bottom-color: #f2f4ff; }
.lonely-controls { display: flex; gap: 8px; }
.ctl { appearance: none; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 1px solid #ffffff3d; background: #01030d80; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: border-color .3s, background .3s; color: #f2f4ff; }
.ctl:hover { border-color: #f2f4ff; }
.ctl[aria-pressed="true"] { background: #f2f4ff; color: #01030d; border-color: #f2f4ff; }
/* Shown only when the phone refuses to start a video on its own (iOS Low Power Mode). */
.tap-play { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; color: #f2f4ff; }
.tap-play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.tap-play[hidden] { display: none; }

/* The bridge lives inside the film's stage: canvas over the video, then the Mac window. */
.bridge-gl { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; }
.bridge-src { position: absolute; width: 1px; height: 1px; left: -9999px; top: 0; }
.bridge-line { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; padding-inline: var(--gutter); transform: translateY(-50%); text-align: center; font-size: clamp(44px, 6vw, 112px); color: var(--on-night); text-shadow: 0 0 40px #01030d; opacity: 0; pointer-events: none; }
.mac { position: absolute; z-index: 3; left: 50%; top: 52%; width: min(78vw, 1180px, calc((100svh - 210px) * 1.6)); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 60px 120px -50px #3b281a8c, 0 24px 50px -30px #3b281a66; opacity: 0; transform: translate(-50%, -50%); transform-origin: 50% 50%; will-change: transform, opacity; pointer-events: none; }
.mac-bar { display: flex; align-items: center; gap: 8px; height: 38px; padding-inline: 14px; background: #ebe5dc; border-bottom: 1px solid #ddd3c5; }
.mac-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.mac-bar i:nth-child(2) { background: #febc2e; }
.mac-bar i:nth-child(3) { background: #28c840; }
.mac-bar span { margin-inline: auto; transform: translateX(-24px); padding: 5px 16px; border-radius: 7px; background: #f8f4ee; font: 500 12px/1 var(--sans); color: #6e6255; }
.mac img { width: 100%; height: auto; }
/* On phones the homepage lands in a phone instead: the mobile site, in the same iPhone frame as Screamr. */
.mphone { position: absolute; z-index: 3; left: 50%; top: 52%; display: none; width: min(68vw, calc((100svh - 200px) * .489)); aspect-ratio: 1350 / 2760; opacity: 0; transform: translate(-50%, -50%); transform-origin: 50% 50%; will-change: transform, opacity; pointer-events: none; }
.mphone .phone-screen { box-shadow: 0 50px 80px -40px #3b281a99; }
.mphone .phone-frame { opacity: 0; }
.no-gl .bridge-gl { display: none; }

/* ---------- 4 · Goodboy Gallery ---------- */
.goodboy { position: relative; z-index: 4; color: var(--fg); padding-block: clamp(40px, 6vh, 80px) clamp(120px, 18vh, 200px); } /* the bridge's window already leads in */
.goodboy-head { display: grid; gap: 24px; }
.goodboy-title { display: flex; flex-wrap: wrap; align-items: center; column-gap: .26em; font-size: clamp(48px, 8vw, 146px); }
.goodboy-logo { height: 1.22em; width: auto; }
.goodboy-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; margin-top: 10px; }
.goodboy-sub p { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.38; max-width: 32ch; letter-spacing: -.01em; }

/* The machine: five stops, arrows that flow and nudge, and an order that hops through (src/machine.js). */
.machine { --gap: 44px; --rust: #8c4a2b; position: relative; list-style: none; margin: clamp(56px, 9vh, 100px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.stop { position: relative; display: grid; align-content: start; gap: 6px; padding: 18px 18px 20px; border-radius: 18px; background: #fbf7f0; border: 1px solid #17120d1a; transition: transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease); }
.stop.hot { transform: translateY(-6px); border-color: var(--rust); box-shadow: 0 26px 50px -30px #8c4a2bb3; }
.stop-art { height: 84px; display: flex; align-items: flex-end; margin-bottom: 10px; color: var(--ink); }
.stop-art svg { width: 40px; height: 40px; }
.stop-n { font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--rust); }
.stop b { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.75vw, 30px); line-height: 1.04; letter-spacing: -.01em; }
.stop-text { font-size: 14px; line-height: 1.4; color: var(--ink-dim); }
.stop:not(:last-child)::before { content: ""; position: absolute; top: 50%; left: calc(100% + 7px); width: calc(var(--gap) - 16px); height: 1.5px; background: linear-gradient(90deg, var(--rust) 55%, transparent 0) 0 0 / 7px 100% repeat-x; animation: flow-x .9s linear infinite; }
.stop:not(:last-child)::after { content: ""; position: absolute; top: calc(50% - 4px); left: calc(100% + var(--gap) - 15px); width: 8px; height: 8px; border-top: 1.5px solid var(--rust); border-right: 1.5px solid var(--rust); transform: rotate(45deg); animation: nudge-x 1.4s var(--ease) infinite; }
@keyframes flow-x { to { background-position-x: 7px; } }
@keyframes flow-y { to { background-position-y: 7px; } }
@keyframes nudge-x { 50% { translate: 4px 0; } }
@keyframes nudge-y { 50% { translate: 0 4px; } }
.paint { width: 56px; height: 81px; border: 3px solid var(--ink); background: #fbf7f0; box-shadow: 0 14px 22px -14px #3b281aa6; }
.parcel { width: 40px; height: 40px; transition: color .4s var(--ease), transform .55s cubic-bezier(.3, 1.6, .5, 1); }
.stop-ship.hot .parcel { color: var(--rust); transform: translateY(-3px) rotate(-6deg); }
/* Ships itself: three status lines tick on, one after another. */
.ticks { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.3; color: var(--ink-dim); }
.ticks li { display: flex; align-items: center; gap: 8px; }
.ticks li::before { content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%; border: 1.3px solid #17120d40; background: no-repeat center / 9px 9px; transition: background-color .35s var(--ease), border-color .35s var(--ease), transform .45s cubic-bezier(.3, 1.8, .5, 1); }
.ticks li.done { color: var(--ink); }
.ticks li.done::before { border-color: var(--rust); background-color: var(--rust); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.2 5.2 4.2 7.1 7.9 3' fill='none' stroke='%23fbf7f0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transform: scale(1.12); }
.packet { position: absolute; z-index: 6; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #c4582b; box-shadow: 0 0 0 6px #c4582b2e, 0 0 22px 4px #ff9b5480; opacity: 0; pointer-events: none; will-change: transform, opacity; }

/* The wall: one quiet row of finished prints, the machine's output. */
.wall { margin-top: clamp(56px, 9vh, 100px); perspective: 1400px; perspective-origin: 50% 30%; }
.wall-track { display: flex; justify-content: center; gap: clamp(10px, 1.6vw, 26px); padding-inline: var(--gutter); transform-style: preserve-3d; }
.print { width: clamp(52px, 8.4vw, 140px); aspect-ratio: 640 / 955; overflow: hidden; border: clamp(4px, .45vw, 7px) solid var(--ink); background: #ece2d2; box-shadow: 0 24px 34px -24px #3b281aa6; }
.print img { display: block; width: 100%; height: 100%; object-fit: cover; }
.print.landed { animation: land 1s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes land { 0% { translate: 0 -16px; scale: 1.06; box-shadow: 0 40px 50px -26px #8c4a2bcc; } 100% { translate: 0 0; scale: 1; } }

/* ---------- 5 · In the background: three small living scenes (src/side.js) ---------- */
.phone-screen { position: absolute; left: 5.333%; top: 2.5%; width: 89.333%; height: 95%; object-fit: cover; object-position: top; border-radius: 9% / 4.4%; }
.phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.side { position: relative; z-index: 4; color: var(--fg); padding-block: clamp(110px, 16vh, 180px) clamp(40px, 6vh, 80px); }
.side-title { font-size: clamp(44px, 5.6vw, 104px); margin-top: 22px; max-width: 14ch; }
.side-title em { color: var(--accent); }
.side-cards { list-style: none; margin: clamp(44px, 7vh, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); perspective: 1200px; }
.side-card { --mx: 50%; --my: 0%; --rx: 0deg; --ry: 0deg; position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 22px; overflow: hidden; background: #0e0f13; border: 1px solid #ffffff14; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .6s var(--ease), border-color .5s var(--ease); }
.side-card::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); background: radial-gradient(420px circle at var(--mx) var(--my), #ffffff1c, transparent 60%); }
.side-card.lit::after { opacity: 1; }
.side-card.lit { border-color: #ffffff2e; transition: transform .12s linear, border-color .5s var(--ease); }
.side-stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.side-copy { display: grid; align-content: start; gap: 10px; padding: 20px 22px 24px; }
.side-name { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.side-name img { width: auto; }
.name-ds { height: 19px; }
/* The Tax Wizard logo's letters fill only its bottom half (the hat is the top half): size it by the letters and lift it so they sit on the row's centre. */
.name-tw { position: relative; top: -5px; height: 30px; }
.sc-word { font-family: "Chango", var(--sans); font-size: 19px; line-height: 1; }
.side-name small { font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 6px 8px; border-radius: 99px; border: 1px solid currentColor; opacity: .75; }
.card-sc .side-name small { color: var(--orange); opacity: 1; }
.side-line { font-size: 15px; line-height: 1.45; color: #efe9dfb8; max-width: 34ch; }
.side-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding-block: 6px; color: var(--on-night); }
.side-private { color: #efe9df73; }
.side-dots { display: none; } /* phones only (the carousel) */

/* Deskspace: the studio render slowly pushes in; its real estimate counts up when the card arrives. */
.ds-stage { background: #000; }
.ds-shot { position: absolute; left: 0; top: -13%; width: 100%; height: 136%; max-width: none; object-fit: cover; object-position: 40% 50%; transform-origin: 45% 40%; transform: scale(1.08); transition: transform 9s cubic-bezier(.2, .6, .2, 1); }
.card-ds.live .ds-shot { transform: scale(1.18) translate(-1.5%, 1%); }
.ds-price { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: baseline; gap: 6px; padding: 9px 13px; border-radius: 12px; background: #0b0b0ee0; border: 1px solid #ffffff1f; color: #f2f2f2; box-shadow: 0 18px 30px -18px #000; transform: translateZ(40px); }
.ds-price small { font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #a5a5ab; }
.ds-price b { font: 600 18px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Screamr: the map, with sightings pinging across the park. */
.sc-stage { background: radial-gradient(120% 90% at 50% 100%, #3a1a0a, #0d0a08 70%); }
.sc-phone { position: absolute; left: 50%; top: 13%; width: 47%; aspect-ratio: 1350 / 2760; translate: -50% 0; transform: rotate(-9deg) translateZ(30px); } /* rises from the bottom edge */
.sc-phone::before { content: ""; position: absolute; inset: 6% 7% 2%; z-index: -1; border-radius: 16% / 8%; box-shadow: 0 34px 50px #000d; }
.sc-stage::before { content: ""; position: absolute; left: 50%; top: 58%; width: 70%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, #f47a2a3d, transparent); }
.ping { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px 2px #f47a2a99; }
.ping::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--orange); opacity: 0; }
.card-sc.live .ping::after { animation: ping 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
.card-sc.live .ping { animation: blip 2.4s ease-in-out infinite; }
.p1 { left: 34%; top: 30%; } .p2 { left: 64%; top: 24%; } .p3 { left: 50%; top: 46%; } .p4 { left: 28%; top: 58%; }
.card-sc.live .p2, .card-sc.live .p2::after { animation-delay: .6s; }
.card-sc.live .p3, .card-sc.live .p3::after { animation-delay: 1.2s; }
.card-sc.live .p4, .card-sc.live .p4::after { animation-delay: 1.8s; }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes blip { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.5); } 30% { transform: scale(1); } }

/* Tax Wizard: county balances fill in row by row under a scan line, then the total lands with sparkles. */
.tw-stage { background: radial-gradient(110% 80% at 80% 0%, #0b3a7a, #03234f 60%); color: #fffcf7; padding: 18px 18px 0; display: grid; align-content: start; }
.tw-hat { position: absolute; right: 16px; top: 12px; width: 54px; height: auto; transform: translateZ(30px); }
.tw-sheet { margin-top: 30px; border-radius: 12px 12px 0 0; background: #fffcf7; color: #16223a; padding: 12px 14px 10px; box-shadow: 0 -10px 40px -20px #000; font-size: 12.5px; transform: translateZ(20px); }
.tw-head, .tw-rows li, .tw-total { display: grid; grid-template-columns: 1.15fr 1fr .95fr; gap: 6px; align-items: center; }
.tw-head { font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #2263b1; padding-bottom: 8px; border-bottom: 1px solid #dfe9f7; }
.tw-rows { list-style: none; margin: 0; padding: 0; }
.tw-rows li { position: relative; padding: 7px 0; border-bottom: 1px solid #dfe9f7; }
.tw-rows li span:nth-child(2) { font-family: var(--mono); font-size: 11px; color: #16223a99; }
.tw-rows li b, .tw-total b { justify-self: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.tw-rows li b { color: #16223a59; transition: color .3s; }
.tw-rows li.done b { color: #16223a; }
.tw-rows li.scan::before { content: ""; position: absolute; inset: 0 -14px; background: linear-gradient(90deg, #67a2e700, #67a2e744, #67a2e700); }
.tw-total { padding-top: 9px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.tw-total span { grid-column: 1 / 3; font: 500 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #2263b1; }
.tw-total b { grid-column: 3; color: #03234f; }
.card-tw.totaled .tw-total { opacity: 1; transform: none; }
.spark { position: absolute; width: 12px; height: 12px; opacity: 0; background: #eaa10a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.k1 { right: 70px; top: 18px; } .k2 { right: 14px; top: 62px; width: 9px; height: 9px; } .k3 { right: 52px; top: 52px; width: 7px; height: 7px; }
.card-tw.totaled .spark { animation: twinkle 1.6s ease-in-out; }
.card-tw.totaled .k2 { animation-delay: .25s; } .card-tw.totaled .k3 { animation-delay: .5s; }
@keyframes twinkle { 0% { opacity: 0; transform: scale(.2) rotate(0); } 40% { opacity: 1; transform: scale(1.2) rotate(45deg); } 100% { opacity: 0; transform: scale(.6) rotate(90deg); } }

/* ---------- 6 · Close ---------- */
.close { position: relative; z-index: 4; color: var(--fg); padding-top: clamp(60px, 10vh, 120px); }
.close-stage { position: relative; height: clamp(300px, 40vw, 620px); overflow: hidden; isolation: isolate; }
/* The film plays behind the line (it used to play inside the letters, where it was too dark to see). */
.close-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 45%; filter: brightness(1.5) contrast(1.05) saturate(1.15); }
.close-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--night), #07080b00 22%, #07080b00 78%, var(--night)), radial-gradient(ellipse at 50% 52%, #01030d14 30%, #01030d8c 88%); }
.close-mask { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.close-title { color: #f2f4ff; text-shadow: 0 4px 40px #01030d99; font-family: var(--serif); font-weight: 400; font-size: 13vw; line-height: .86; letter-spacing: -.015em; text-align: center; white-space: nowrap; }
.close-title .w { display: inline-block; }
.close-copy { display: grid; justify-items: center; gap: 32px; padding-block: clamp(30px, 5vh, 60px) clamp(100px, 15vh, 170px); text-align: center; }
.close-sub { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.7vw, 42px); line-height: 1.18; letter-spacing: -.02em; max-width: 22ch; text-wrap: balance; }
.close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 28px; padding-block: 26px calc(30px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--faint); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.foot nav { display: flex; gap: 22px; }
.foot a:hover, .ascii-toggle:hover { color: var(--on-night); }
.ascii-toggle { appearance: none; border: 0; background: none; padding: 6px 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
kbd { font: inherit; padding: 2px 6px; border: 1px solid currentColor; border-radius: 4px; }

/* ---------- ASCII mode + toast ---------- */
.ascii-layer { position: absolute; pointer-events: none; }
.shutter-frame, .print { position: relative; }
.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); padding: 12px 18px; border-radius: 99px; background: var(--on-night); color: var(--night); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Reveal (content is visible without JS; JS opts in) ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.2s var(--ease), transform 1.3s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
/* ---------- 404: "You look lost." over a still from the film ---------- */
.lost { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: #01030d; color: var(--on-night); }
.lost-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 38% 40%; }
.lost::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #01030d00 58%, #01030dd9 80%, #01030d 100%); }
.lost-home { position: absolute; z-index: 2; top: calc(18px + env(safe-area-inset-top, 0px)); left: var(--gutter); font-family: var(--serif); font-size: 19px; letter-spacing: -.01em; }
.lost-copy { position: relative; z-index: 1; display: grid; gap: 18px; justify-items: start; padding-bottom: calc(clamp(48px, 10vh, 110px) + env(safe-area-inset-bottom, 0px)); }
.lost-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(58px, 9vw, 160px); line-height: .95; letter-spacing: -.02em; }
.lost-sub { margin: 0 0 10px; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 36px); line-height: 1.2; }
.lost-sub em { color: var(--accent); }
/* Phones: the frame fills the top 62% (her face and pointing hand), the copy sits below it. */
@media (max-width: 760px) {
  .lost-img { height: 62%; object-position: 39% 50%; }
  .lost::after { background: linear-gradient(180deg, #01030d00 42%, #01030d 62%); }
}
/* Desktop: the copy sits in the empty sky, top right, so her hand and Chief stay as clear as in the film. */
@media (min-width: 761px) {
  .lost { align-items: start; }
  .lost::after { background: linear-gradient(180deg, #01030d8c 0%, #01030d00 34%); }
  .lost-copy { justify-items: end; text-align: right; padding-top: calc(90px + 6vh); padding-bottom: 0; }
  .lost-title { font-size: clamp(58px, 7.4vw, 140px); }
}

/* The machine stacks on tablets and phones: art on the left, arrows pointing down. */
@media (max-width: 1000px) {
  .machine { --gap: 46px; grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .stop { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "art n" "art b" "art text"; column-gap: 18px; row-gap: 4px; align-items: center; padding: 16px 18px; }
  .stop-art { grid-area: art; height: auto; margin: 0; justify-content: center; align-items: center; }
  .stop-n { grid-area: n; align-self: end; } .stop b { grid-area: b; } .stop-text { grid-area: text; align-self: start; }
  .stop:not(:last-child)::before { top: calc(100% + 7px); left: 50%; width: 1.5px; height: calc(var(--gap) - 16px); background: linear-gradient(180deg, var(--rust) 55%, transparent 0) 0 0 / 100% 7px repeat-y; animation-name: flow-y; }
  .stop:not(:last-child)::after { top: calc(100% + var(--gap) - 15px); left: calc(50% - 4px); transform: rotate(135deg); animation-name: nudge-y; }
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hide-sm { display: none; }
  .nav nav { gap: 16px; }
  .hero-mark > span { display: block; }
  .hero-title { top: clamp(84px, 13vh, 120px); }
  .hero-title h1 { font-size: 21vw; }
  .hero-cue { display: none; }
  /* Phones: the label and its punchline share the top line, the marks scroll beneath. */
  .brands { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 10px; }
  .brands-label { grid-row: 1; grid-column: 1; white-space: normal; }
  .brands-foot { grid-row: 1; grid-column: 2; text-align: right; }
  .brands-marquee { grid-row: 2; grid-column: 1 / -1; }
  .brands-track { gap: 48px; }
  .brand img { height: 22px; } .brand-gb img { height: 34px; } .brand-ds img { height: 15px; } .brand-tw img { height: 22px; top: -4px; } .brand-sc span { font-size: 14px; }
  .about { border-radius: 20px 20px 0 0; }
  .facts > div { grid-template-columns: 1fr; gap: 4px; }
  .tool-row { grid-template-columns: 1fr; gap: 10px; }
  .grow { height: 180vh; }
  .lonely { height: 470vh; }
  .lonely-bar { flex-direction: column; align-items: stretch; }
  .lonely-controls .ctl { flex: 1; }
  /* Phones: the films keep their true shape, a cinema frame on the dark page, instead of a deep crop. */
  .grow-frame { inset: auto 0; top: 50%; height: 56.25vw; transform: translateY(-50%); }
  .grow-cap { bottom: auto; top: calc(50% + 28.125vw + 18px); }
  .lonely-video { inset: auto 0; top: 42%; height: 41.667vw; transform: translateY(-50%); object-position: 50% 50%; }
  .lonely-shade { display: none; }
  .lonely-line { bottom: auto; top: calc(42% + 20.833vw + 26px); font-size: 46px; }
  /* Phones: a floating carousel. The front card is flat and drifts; the other two wait at its sides, turned in 3D.
     It advances on its own, and a swipe, a tap on a side card or a dot takes over. Without JS it's a plain list. */
  .side-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; perspective: none; }
  .side-card { transform: none; transform-style: flat; }
  .side-cards.carousel { gap: 0; perspective: 1100px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  .carousel .side-card { grid-area: 1 / 1; width: 80%; justify-self: center; transition: transform .75s var(--ease), opacity .75s var(--ease); }
  .carousel .side-card[data-pos="0"] { z-index: 3; transform: none; animation: drift 5.5s ease-in-out infinite; }
  .carousel .side-card[data-pos="-1"] { z-index: 2; transform: translateX(-60%) rotateY(30deg) scale(.82); opacity: .5; }
  .carousel .side-card[data-pos="1"] { z-index: 2; transform: translateX(60%) rotateY(-30deg) scale(.82); opacity: .5; }
  @keyframes drift { 50% { translate: 0 -7px; } }
  .carousel .side-card:not([data-pos="0"]) * { pointer-events: none; } /* a tap lands on the card itself */
  .side { overflow-x: clip; }
  .side-dots { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
  .side-dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #ffffff38; transition: width .45s var(--ease), background-color .45s var(--ease); }
  .side-dots button::before { content: ""; position: absolute; inset: -14px -8px; }
  .side-dots button[aria-current="true"] { width: 24px; background: var(--accent); }
  .wall { perspective: none; }
  .wall-track { transform-style: flat; }
  .close-title { text-shadow: 0 2px 22px #01030d99; }
  #lonelyPlay { top: 42%; }
  .mac { display: none; }
  .mphone { display: block; }
  /* Two big prints per row on phones: the art is the product. The right one hangs a little lower. */
  .wall-track { gap: 12px; }
  .print { width: calc((100vw - 2 * var(--gutter) - 36px) / 4); }
  .print:nth-child(n+5) { display: none; } /* four prints fit a phone */
  .goodboy-logo { height: 1.45em; }
  .close-stage { height: 62vw; }
  .close-title { font-size: 21vw; }
  .close-title .w { display: block; }
  .foot { justify-content: flex-start; }
}
/* Touch: small links keep their look but get a finger-sized hit area. */
@media (pointer: coarse) {
  .nav-name, .nav-link, .foot a, .ascii-toggle, .lonely-more { position: relative; }
  .nav-name::before, .nav-link::before, .foot a::before, .ascii-toggle::before, .lonely-more::before { content: ""; position: absolute; inset: -12px -8px; }
  .nav-pill { padding: 14px 18px; }
  .foot nav { gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel .side-card { transition: none; animation: none !important; }
  .side-card { transform: none !important; }
  .ds-shot, .card-ds.live .ds-shot { transform: scale(1.08); transition: none; }
  .ping, .ping::after { animation: none !important; }
  .stop::before, .stop::after { animation: none !important; }
  .packet { display: none; }
  .brands-track, .hero-cue i { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .lonely-line { transition: none; }
  .bio .w { opacity: 1 !important; }
}

.close-sub em { color: var(--accent); }

/* toolbox:start */
.tool-blender:hover .tool-mark, .tool-blender:focus .tool-mark { color: #E87D0D; }
.tool-autodeskmaya:hover .tool-mark, .tool-autodeskmaya:focus .tool-mark { color: #37A5CC; }
.tool-claude:hover .tool-mark, .tool-claude:focus .tool-mark { color: #D97757; }
.tool-googlegemini:hover .tool-mark, .tool-googlegemini:focus .tool-mark { color: #8E75B2; }
.tool-react:hover .tool-mark, .tool-react:focus .tool-mark { color: #61DAFB; }
.tool-supabase:hover .tool-mark, .tool-supabase:focus .tool-mark { color: #3FCF8E; }
.tool-cloudflare:hover .tool-mark, .tool-cloudflare:focus .tool-mark { color: #F38020; }
.tool-shopify:hover .tool-mark, .tool-shopify:focus .tool-mark { color: #7AB55C; }
.tool-meta:hover .tool-mark, .tool-meta:focus .tool-mark { color: #0467DF; }
.tool-google:hover .tool-mark, .tool-google:focus .tool-mark { color: #4285F4; }
.tool-appstore:hover .tool-mark, .tool-appstore:focus .tool-mark { color: #0D96F6; }
/* toolbox:end */