/* Bouliw · Fun mode.
   On by default; the Fun switch in the header brings back the plain site.
   Styles: Overdrive (default), Y2K, Phantom, Alert, Neon, 8-bit and Mix.
   Everything below only applies when <html> carries data-fun and data-skin. */

/* ---------- Fonts (fetched only when a style uses them) ---------- */
@font-face { font-family: "FX Anton"; src: url("fonts/anton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "FX Serif"; src: url("fonts/noto-serif-wdth.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; }
@font-face { font-family: "FX Display"; src: url("fonts/noto-serif-display-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "FX Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "FX Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "FX Orbitron"; src: url("fonts/orbitron.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "FX Press"; src: url("fonts/press-start-2p.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "FX Pixelify"; src: url("fonts/pixelify-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "FX Silk"; src: url("fonts/silkscreen.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "FX Michroma"; src: url("fonts/michroma.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "FX Mincho"; src: url("fonts/mincho-jp.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "FX Dot"; src: url("fonts/dotgothic-jp.woff2") format("woff2"); font-display: swap; }

/* ---------- The toggle (also visible in the default site) ---------- */
.top nav { margin-left: auto; }
.fun-toggle { display: none; }
.has-js .fun-toggle {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 22px; padding: 0;
  border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer;
}
.fun-toggle:hover { color: var(--ink); }
.fun-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.fun-switch { position: relative; width: 26px; height: 15px; border: 1.5px solid currentColor; border-radius: 999px; flex: none; }
.fun-switch i { position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transition: transform .2s; }
.fun-toggle[aria-pressed="true"] .fun-switch i { transform: translateX(11px); }

.fx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fx-split, .fx-pose, .fx-ep, .fx-marquee, .fx-badges, .fx-deco { display: none; }
html:not([data-fun]) .fx-dock { display: none; }

/* ---------- Shared frame for every style ---------- */
html[data-fun] body { overflow-x: clip; background: var(--bg); color: var(--text); font-family: inherit; }
html[data-skin="mix"] { font-family: "FX Geist", var(--sans); }
html[data-fun] .top { position: relative; }
html[data-fun] :is(.hero, .project, .upstream, footer) { position: relative; isolation: isolate; }
html[data-fun] .fx-deco { display: block; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); pointer-events: none; overflow: hidden; }
html[data-fun] .fx-deco::before, html[data-fun] .fx-deco::after { content: ""; position: absolute; }
html[data-fun]:not([data-skin="mix"]):not([data-skin="overdrive"]) body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--fx-paper, var(--bg)); }
html[data-skin="mix"] :is(.top, .hero, .project, .upstream, footer)::before { content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--fx-paper, var(--bg)); }
html[data-fun] .project, html[data-fun] .upstream, html[data-fun] footer { border-top: 0; }
html[data-fun] body { padding-bottom: 84px; }

/* Mix: the page itself stays neutral, every section brings its own style */
html[data-skin="mix"] { --bg: #f5f5f7; --ink: #0a0a0b; --text: #26252b; --muted: #5c5c66; --line: #d2d2d7; }
@media (prefers-color-scheme: dark) { html[data-skin="mix"] { --bg: #0a0a0b; --ink: #f5f5f7; --text: #d9d8de; --muted: #a1a1aa; --line: #2c2b31; } }

/* ---------- Style dock ---------- */
.fx-dock {
  position: fixed; z-index: 1000; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 6px; max-width: calc(100vw - 20px); overflow-x: auto;
  border-radius: 18px; background: rgb(14 13 20 / .95); border: 1px solid rgb(255 255 255 / .16);
  box-shadow: 0 18px 50px -12px rgb(0 0 0 / .65), inset 0 1px 0 rgb(255 255 255 / .12);
  font: 600 13px/1 "FX Geist", var(--sans); scrollbar-width: none;
}
.fx-dock::-webkit-scrollbar { display: none; }
.fx-dock .fx-dock-label { padding: 0 8px 0 10px; font: 10px/1 "FX Silk", var(--mono); letter-spacing: .08em; color: #a1a1aa; white-space: nowrap; }
.fx-dock button {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 0; border-radius: 12px;
  background: transparent; color: #f5f5f7; font: inherit; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, transform .15s;
}
.fx-dock button:hover { background: rgb(255 255 255 / .1); }
.fx-dock button:active { transform: scale(.95); }
.fx-dock button:focus-visible { outline: 2px solid #b6ff3b; outline-offset: 1px; }
.fx-dock button[aria-pressed="true"] { background: #f5f5f7; color: #0a0a0b; }
.fx-dock .sw { width: 16px; height: 16px; border-radius: 5px; flex: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
.fx-dock [data-skin-btn="overdrive"] .sw { background: linear-gradient(135deg, #6b2bff 0 55%, #b6ff3b 55%); }
.fx-dock [data-skin-btn="y2k"] .sw { background: linear-gradient(180deg, #fff 0 40%, #b49cff 45%, #6b2bff 60%, #22d3ee); }
.fx-dock [data-skin-btn="phantom"] .sw { background: linear-gradient(135deg, #0a0a0b 0 45%, #e60012 45% 75%, #fff 75%); }
.fx-dock [data-skin-btn="alert"] .sw { background: repeating-linear-gradient(-45deg, #ff6a00 0 4px, #000 4px 8px); }
.fx-dock [data-skin-btn="neon"] .sw { background: linear-gradient(135deg, #ff2e88, #7c3aed 50%, #22d3ee); }
.fx-dock [data-skin-btn="pixel"] .sw { background: conic-gradient(#ffec27 25%, #ff004d 0 50%, #29adff 0 75%, #00e436 0); border-radius: 0; }
.fx-dock [data-skin-btn="mix"] .sw { background: conic-gradient(#e60012 0 20%, #ff6a00 0 40%, #22d3ee 0 60%, #b49cff 0 80%, #00e436 0); border-radius: 50%; }

/* Reveal on scroll: hidden states exist only once the script runs, with motion allowed */
@keyframes fx-rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes fx-pop { 0% { opacity: 0; scale: .86; } 60% { opacity: 1; scale: 1.03; } 100% { opacity: 1; scale: 1; } }
@keyframes fx-slam { 0% { opacity: 0; scale: 1.7; rotate: -9deg; } 55% { opacity: 1; scale: .94; } 100% { opacity: 1; scale: 1; } }
@keyframes fx-dash { 0% { opacity: 0; translate: -90px 0; } 70% { opacity: 1; translate: 8px 0; } 100% { opacity: 1; translate: 0 0; } }
@keyframes fx-cut { 0%, 30% { opacity: 0; } 31%, 45% { opacity: 1; } 46%, 55% { opacity: 0; } 56%, 100% { opacity: 1; } }
@keyframes fx-shake { 0%, 100% { translate: 0 0; } 25% { translate: -4px 2px; } 50% { translate: 4px -2px; } 75% { translate: -2px 1px; } }
@keyframes fx-blink { 50% { opacity: 0; } }
@keyframes fx-marquee { to { transform: translateX(-50%); } }
@keyframes fx-spark { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2) rotate(140deg); } }
html.fx-anim[data-fun] :is(.project, .upstream):not(.fx-in) :is(.copy, .stage, .diff) { opacity: 0; }
html.fx-anim[data-fun] :is(.project, .upstream).fx-in .copy { animation: fx-rise .6s cubic-bezier(.16, 1, .3, 1) both; }
html.fx-anim[data-fun] :is(.project, .upstream).fx-in :is(.stage, .diff) { animation: fx-pop .6s cubic-bezier(.2, 1.2, .4, 1) .08s both; }

.fx-spark { position: fixed; z-index: 9999; pointer-events: none; font: 16px/1 "FX Geist", sans-serif; color: var(--c); text-shadow: 0 0 8px var(--c); animation: fx-spark .9s cubic-bezier(.2, .8, .3, 1) forwards; }

/* =====================================================================
   Y2K · chrome, gel buttons, windows, holographic blobs
   ===================================================================== */
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) {
  --bg: #e4e1ee; --surface: #ffffff; --ink: #0a0a0b; --text: #24222f; --muted: #514d66; --line: #aaa6c0;
  --mix: black; --mix-amount: 38%;
  --y-edge: #0a0a0b; --y-hard: #6b2bff; --y-link: #1a1adb;
  --y-metal: linear-gradient(180deg, #ffffff 0%, #ecebf4 45%, #cfcbe0 52%, #e4e2ee 100%);
  --y-chrome: linear-gradient(180deg, #ffffff 0%, #dcd9ea 36%, #4e4868 49%, #2a2540 51%, #c7c2dc 54%, #ffffff 80%, #aaa5c4 100%);
  --fx-paper:
    radial-gradient(42vw 30vw at 88% 6%, rgb(255 107 213 / .38), transparent 70%),
    radial-gradient(40vw 32vw at 4% 38%, rgb(34 211 238 / .3), transparent 70%),
    radial-gradient(46vw 36vw at 70% 96%, rgb(107 43 255 / .26), transparent 70%),
    radial-gradient(rgb(10 10 11 / .13) 1px, transparent 1.5px) 0 0 / 6px 6px,
    linear-gradient(165deg, #f0eef7, #d9d5e9);
  --fx-trail: 1;
  font-family: "FX Geist", var(--sans);
}
@media (prefers-color-scheme: dark) {
  :is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) {
    --bg: #0c0a1d; --surface: #17142e; --ink: #f6f5fb; --text: #d8d5ec; --muted: #a8a4c6; --line: #3a355f;
    --mix: white; --mix-amount: 22%;
    --y-edge: #000000; --y-hard: #b6ff3b; --y-link: #8ab4ff;
    --y-metal: linear-gradient(180deg, #4a4478 0%, #2c2754 46%, #1a1738 52%, #262148 100%);
    --y-chrome: linear-gradient(180deg, #ffffff 0%, #d9d3ff 34%, #6d5fd6 49%, #2c2266 51%, #b3a8ff 55%, #ffffff 80%, #9a90d6 100%);
    --fx-paper:
      radial-gradient(1.2px 1.2px at 20% 30%, #fff 50%, transparent 100%) 0 0 / 180px 180px,
      radial-gradient(1px 1px at 70% 80%, #cfc8ff 50%, transparent 100%) 0 0 / 120px 120px,
      radial-gradient(1.4px 1.4px at 45% 60%, #b6ff3b 50%, transparent 100%) 0 0 / 260px 260px,
      radial-gradient(44vw 30vw at 86% 4%, rgb(255 46 136 / .26), transparent 70%),
      radial-gradient(40vw 34vw at 2% 42%, rgb(34 211 238 / .18), transparent 70%),
      radial-gradient(50vw 40vw at 70% 100%, rgb(107 43 255 / .34), transparent 70%),
      linear-gradient(170deg, #120e2c, #07061a);
  }
}

:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top {
  margin-top: 18px; padding: 9px 10px 9px 12px; border: 2px solid var(--y-edge); border-radius: 999px;
  background: var(--y-metal); box-shadow: 6px 6px 0 var(--y-hard), inset 0 1px 0 rgb(255 255 255 / .7);
}
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top .mark { font: 13px/1 "FX Michroma", var(--sans); letter-spacing: .02em; text-transform: uppercase; }
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top .glyph {
  border-radius: 50%; border: 1.5px solid var(--y-edge); color: #fff; font: 700 15px/1 "FX Michroma", sans-serif;
  background: radial-gradient(circle at 34% 28%, #fff 0 9%, #c9b8ff 22%, #6b2bff 58%, #2a0f73 100%);
  text-shadow: 0 1px 1px rgb(0 0 0 / .5);
}
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top nav { gap: 8px; }
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top nav :is(a, .lang-toggle), :is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top .fun-toggle {
  margin: 0; padding: 7px 14px; border: 1.5px solid var(--y-edge); border-radius: 999px; color: #0a0a0b;
  font: 11px/1 "FX Silk", var(--mono); letter-spacing: .04em;
  background: linear-gradient(180deg, #ffffff 0 46%, #e3e0ef 52%, #f6f5fb 100%);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / .08);
}
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top .fun-toggle { margin-left: 8px; }
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top nav :is(a, .lang-toggle):hover, :is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top .fun-toggle:hover { background: linear-gradient(180deg, #e2f6ff 0 46%, #7cc8f7 52%, #bfe9ff 100%); }
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top .fun-toggle[aria-pressed="true"] { background: linear-gradient(180deg, #f3ffe0 0 46%, #a6ef2f 52%, #d8ff98 100%); }

:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero h1 {
  font: 400 clamp(2rem, 5.4vw, 4.5rem)/1.1 "FX Michroma", var(--sans); letter-spacing: -.02em; text-transform: uppercase;
  max-width: 15ch; color: transparent; background: var(--y-chrome); -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 1.5px var(--y-edge); filter: drop-shadow(5px 5px 0 var(--y-hard));
}
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero h1 em {
  font: italic 800 1.08em/1 "FX Display", var(--serif); letter-spacing: -.01em; text-transform: none;
  background: linear-gradient(90deg, #ff6bd5, #b49cff, #22d3ee, #b6ff3b, #ff6bd5) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text;
}
@keyframes y2k-holo { to { background-position: 200% 0; } }
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .lede { color: var(--text); font-weight: 500; }
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .lede::before { content: "✦ "; color: var(--y-hard); }

:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .index { border: 2px solid var(--y-edge); border-radius: 16px; background: var(--surface); box-shadow: 8px 8px 0 var(--y-hard); overflow: hidden; position: relative; }
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .index::before {
  content: "C:\\BOULIW\\PROJECTS"; display: flex; align-items: center; height: 32px; padding: 0 92px 0 14px;
  font: 11px/1 "FX Silk", var(--mono); letter-spacing: .05em; color: #fff; text-shadow: 1px 1px 0 #000;
  background: linear-gradient(#d9ccff 0 25%, #b49cff 25% 50%, #6b2bff 50% 75%, #5420d6 75%);
  border-bottom: 2px solid var(--y-edge);
}
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .index::after {
  content: ""; position: absolute; top: 9px; right: 12px; width: 72px; height: 13px;
  background:
    radial-gradient(circle at 50% 50%, #b6ff3b 0 5px, #0a0a0b 5px 6.5px, transparent 7px) right / 14px 13px no-repeat,
    radial-gradient(circle at 50% 50%, #fff 0 5px, #0a0a0b 5px 6.5px, transparent 7px) center / 14px 13px no-repeat,
    radial-gradient(circle at 50% 50%, #fff 0 5px, #0a0a0b 5px 6.5px, transparent 7px) left / 14px 13px no-repeat;
}
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .index ol { border-top: 0; padding: 8px; column-gap: 8px; }
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .index li { border-bottom: 1px dotted var(--line); }
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .index a { padding: 11px 12px; border-radius: 9px; }
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .index .t { font-family: "FX Geist", var(--sans); font-weight: 700; font-size: 1.05rem; }
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .index .t::before {
  width: 15px; height: 15px; border: 1.5px solid var(--y-edge);
  background: radial-gradient(circle at 35% 30%, #fff 0 14%, var(--accent) 48%, color-mix(in oklab, var(--accent), #000 45%) 100%);
}
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .index .n { font-family: "FX Silk", var(--mono); }
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .index a:hover, :is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .index a:focus-visible { background: linear-gradient(180deg, #4c8df0, #1f5fd6); outline: 0; }
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .index a:hover :is(.t, .n, .d), :is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .index a:focus-visible :is(.t, .n, .d) { color: #fff; }

:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .fx-marquee {
  display: block; overflow: hidden; margin-top: clamp(36px, 6vw, 64px); border: 2px solid var(--y-edge); border-radius: 999px;
  background: var(--y-metal); box-shadow: 5px 5px 0 var(--y-hard); white-space: nowrap;
}
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .fx-marquee span { display: inline-block; padding: 10px 0; font: 12px/1 "FX Silk", var(--mono); letter-spacing: .08em; color: #0a0a0b; animation: fx-marquee 26s linear infinite; }
@media (prefers-color-scheme: dark) { :is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).hero .fx-marquee span { color: #f6f5fb; } }

:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .label {
  display: inline-block; padding: 7px 13px; border: 1.5px solid var(--y-edge); border-radius: 999px; color: #0a0a0b;
  font: 11px/1 "FX Silk", var(--mono); letter-spacing: .04em; text-transform: none;
  background: linear-gradient(180deg, #ffffff 0 46%, color-mix(in oklab, var(--accent) 34%, #fff) 52%, color-mix(in oklab, var(--accent) 14%, #fff) 100%);
}
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) h2 {
  font: 400 clamp(1.7rem, 3.3vw, 2.7rem)/1.1 "FX Michroma", var(--sans); letter-spacing: -.02em; text-transform: uppercase;
  color: transparent; background: var(--y-chrome); -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 1.2px var(--y-edge); filter: drop-shadow(4px 4px 0 var(--accent));
}
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .head img { filter: drop-shadow(0 8px 12px rgb(0 0 0 / .25)); }
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .tagline { font-weight: 650; }
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .copy .fact {
  position: relative; padding: 42px 16px 14px 50px; border: 2px solid var(--y-edge); border-radius: 12px;
  background: var(--surface); box-shadow: 5px 5px 0 var(--accent); font-size: 13px;
}
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .copy .fact::before {
  content: "info.txt"; position: absolute; left: 0; right: 0; top: 0; height: 26px; display: flex; align-items: center; padding-left: 12px;
  font: 11px/1 "FX Silk", var(--mono); color: #fff; text-shadow: 1px 1px 0 #000; border-bottom: 2px solid var(--y-edge); border-radius: 10px 10px 0 0;
  background: linear-gradient(color-mix(in oklab, var(--accent) 40%, #fff) 0 25%, color-mix(in oklab, var(--accent) 70%, #fff) 25% 50%, var(--accent) 50% 75%, color-mix(in oklab, var(--accent), #000 25%) 75%);
}
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .copy .fact::after {
  content: "i"; position: absolute; left: 14px; top: 40px; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--y-edge); color: #fff; font: italic 700 15px/1 Georgia, serif;
  background: radial-gradient(circle at 35% 30%, #fff 0 10%, #5aa0ff 40%, #1f4fb5 100%);
}
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .stack li {
  padding: 7px 12px; border: 1.5px solid var(--y-edge); border-radius: 999px; color: #0a0a0b; font: 11px/1 "FX Silk", var(--mono);
  background: linear-gradient(180deg, rgb(255 255 255 / .96) 0 46%, color-mix(in oklab, var(--accent) 30%, #fff) 52%, color-mix(in oklab, var(--accent) 12%, #fff) 100%);
}
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .btn {
  position: relative; overflow: hidden; padding: 11px 22px; border: 1.5px solid #1d0a5c; border-radius: 999px; color: #fff;
  text-shadow: 0 1px 1px rgb(0 0 0 / .4); background: linear-gradient(180deg, #8d63ff 0%, #5a26e6 48%, #4513c9 52%, #7a4dff 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 6px 14px -4px rgb(84 32 214 / .6);
}
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .btn::before { content: ""; position: absolute; left: 12%; right: 12%; top: 2px; height: 44%; border-radius: 999px; background: linear-gradient(rgb(255 255 255 / .75), rgb(255 255 255 / .08)); pointer-events: none; }
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .btn:hover { background: linear-gradient(180deg, #9a74ff 0%, #6431f0 48%, #4f1ad6 52%, #8a62ff 100%); }
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .more { color: var(--y-link); text-decoration-color: currentColor; text-decoration-thickness: 1.5px; font-weight: 600; }

:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .stage {
  padding-top: calc(32px + clamp(18px, 3.4vw, 40px)); border: 2px solid var(--y-edge); border-radius: 16px; box-shadow: 9px 9px 0 var(--accent);
  background: radial-gradient(color-mix(in oklab, var(--ink) 14%, transparent) 1px, transparent 1.5px) 0 0 / 6px 6px, linear-gradient(170deg, color-mix(in oklab, var(--accent) 16%, var(--surface)), var(--surface));
}
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .stage::before {
  content: attr(data-fx-name) ".exe"; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 32px; display: flex; align-items: center; padding: 0 12px;
  font: 11px/1 "FX Silk", var(--mono); letter-spacing: .05em; color: #fff; text-shadow: 1px 1px 0 #000; border-bottom: 2px solid var(--y-edge);
  background: linear-gradient(color-mix(in oklab, var(--accent) 40%, #fff) 0 25%, color-mix(in oklab, var(--accent) 70%, #fff) 25% 50%, var(--accent) 50% 75%, color-mix(in oklab, var(--accent), #000 25%) 75%);
}
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .stage::after {
  content: ""; position: absolute; z-index: 3; top: 9px; right: 12px; width: 72px; height: 13px;
  background:
    linear-gradient(#0a0a0b 0 0) right / 20px 12px no-repeat,
    linear-gradient(#fff 0 0) center / 20px 12px no-repeat,
    linear-gradient(#fff 0 0) left / 20px 12px no-repeat;
  -webkit-mask: radial-gradient(farthest-side, #000 98%, transparent) right / 20px 12px no-repeat, radial-gradient(farthest-side, #000 98%, transparent) center / 20px 12px no-repeat, radial-gradient(farthest-side, #000 98%, transparent) left / 20px 12px no-repeat;
}
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .stage .shot, :is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .stage .window, :is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .stage .term, :is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .stage .screen, :is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .stage .diff { border: 2px solid var(--y-edge); box-shadow: 5px 5px 0 rgb(10 10 11 / .85); }
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .said li {
  font-weight: 600; color: #0a0a0b; border: 1.5px solid var(--y-edge); border-radius: 18px 18px 18px 4px;
  background: linear-gradient(180deg, #ffffff 0 50%, #eef1ff 100%); box-shadow: 4px 4px 0 var(--accent);
}
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .said li::before { width: 10px; height: 10px; border: 1px solid #0a0a0b; background: radial-gradient(circle at 35% 30%, #fff 0 14%, var(--accent) 50%); }
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .said small { color: #514d66; }
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .diff { border: 2px solid var(--y-edge); border-radius: 14px; box-shadow: 8px 8px 0 var(--y-hard); background: var(--surface); }

:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])):is(footer) { align-items: center; }
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) footer > span, :is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])):is(footer) > span { font: 13px/1 "FX Michroma", var(--sans); text-transform: uppercase; color: var(--ink); }
:is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])):is(footer) .fx-badges { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; order: 3; }
.fx-badges b {
  display: inline-grid; place-items: center; width: 88px; height: 31px; padding: 0 4px; text-align: center;
  font: 8px/1.15 "FX Silk", monospace; letter-spacing: .03em; color: #fff; border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / .55), inset -1px -1px 0 rgb(0 0 0 / .45); text-shadow: 1px 1px 0 #000;
}
.fx-badges b:nth-child(1) { background: linear-gradient(#5a26e6, #2a0f73); }
.fx-badges b:nth-child(2) { background: linear-gradient(#1f9d55, #0b4d28); }
.fx-badges b:nth-child(3) { background: linear-gradient(#ff2e88, #8a0c45); }
.fx-badges b:nth-child(4) { background: linear-gradient(#ffb000, #a05a00); }
.fx-badges b:nth-child(5) { background: linear-gradient(#22d3ee, #0b6a80); }

html.fx-anim :is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).fx-in .stage { animation: y2k-open .55s cubic-bezier(.2, 1.35, .4, 1) .05s both; }
@keyframes y2k-open { 0% { opacity: 0; scale: .2 .06; } 45% { opacity: 1; scale: 1.02 .1; } 100% { opacity: 1; scale: 1 1; } }

/* =====================================================================
   PHANTOM · red, black, white; tilted menus, ransom letters, halftone
   ===================================================================== */
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) {
  --bg: #0a0a0b; --surface: #17171a; --ink: #ffffff; --text: #eeeeee; --muted: #b6b6bc; --line: #3a3a3f;
  --mix: white; --mix-amount: 22%;
  --p-red: #e60012; --p-red-text: #ff4d57; --p-box: #ffffff; --p-on-box: #0a0a0b;
  --fx-paper:
    radial-gradient(circle, rgb(230 0 18 / .2) 0 1.6px, transparent 2px) 0 0 / 11px 11px,
    repeating-linear-gradient(-58deg, transparent 0 60px, rgb(230 0 18 / .07) 60px 64px),
    #0a0a0b;
  font-family: "FX Geist", var(--sans);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M3 2 L26 11 L15 14 L11 27 Z' fill='%23e60012' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto;
}
@media (prefers-color-scheme: light) {
  :is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) {
    --bg: #f3f0ea; --surface: #ffffff; --ink: #0a0a0b; --text: #141414; --muted: #46443f; --line: #cfcac0;
    --mix: black; --mix-amount: 38%; --p-red-text: #c4000f; --p-box: #0a0a0b; --p-on-box: #ffffff;
    --fx-paper:
      radial-gradient(circle, rgb(10 10 11 / .13) 0 1.5px, transparent 1.9px) 0 0 / 11px 11px,
      repeating-linear-gradient(-58deg, transparent 0 60px, rgb(230 0 18 / .08) 60px 64px),
      #f3f0ea;
  }
}
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) a, :is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) button { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M17 1l4.7 10.6 11.3.9-8.6 7.6 2.7 11.4L17 25.4 6.9 31.5l2.7-11.4L1 12.5l11.3-.9z' fill='%23e60012' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 17 17, pointer; }

:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).top .mark { font: 400 22px/1 "FX Anton", sans-serif; text-transform: uppercase; font-style: italic; letter-spacing: .02em; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).top .glyph { background: var(--p-red); color: #fff; border-radius: 0; clip-path: polygon(0 8%, 100% 0, 92% 100%, 6% 92%); font: 400 20px/1 "FX Anton", sans-serif; rotate: -6deg; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).top nav :is(a, .lang-toggle), :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).top .fun-toggle, :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])):is(footer) nav :is(a, .lang-toggle) {
  padding: 5px 12px; background: var(--p-box); color: var(--p-on-box); font: italic 800 12px/1 "FX Geist", sans-serif; text-transform: uppercase; letter-spacing: .06em;
  clip-path: polygon(0 0, 100% 12%, 96% 100%, 3% 88%); transition: background .15s, color .15s, rotate .15s;
}
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).top nav :is(a, .lang-toggle):hover, :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).top .fun-toggle:hover, :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])):is(footer) nav :is(a, .lang-toggle):hover { background: var(--p-red); color: #fff; rotate: -3deg; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).top .fun-toggle[aria-pressed="true"] { background: var(--p-red); color: #fff; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).top .fun-toggle .fun-switch { border-color: currentColor; }

:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-deco::before {
  top: -6%; bottom: 30%; right: -4%; width: 52vw; max-width: 760px; background: var(--p-red);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%, 15% 74%, 6% 70%, 20% 44%, 10% 40%, 24% 14%);
  rotate: 6deg;
}
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-deco::after {
  top: -6%; bottom: 30%; right: -4%; width: 52vw; max-width: 760px; rotate: 6deg;
  background-image: radial-gradient(circle, rgb(0 0 0 / .55) 0 1.8px, transparent 2.2px); background-size: 10px 10px;
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%, 15% 74%, 6% 70%, 20% 44%, 10% 40%, 24% 14%);
  -webkit-mask-image: linear-gradient(to left, #000, transparent 75%); mask-image: linear-gradient(to left, #000, transparent 75%);
}
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero h1 {
  font: italic 400 clamp(3rem, 8.4vw, 7.2rem)/.9 "FX Anton", sans-serif; letter-spacing: .005em; text-transform: uppercase;
  max-width: 11ch; color: var(--ink); text-shadow: .055em .05em 0 var(--p-red); rotate: -3deg; transform-origin: 0 100%;
}
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero h1 em { font-style: italic; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero h1 em .fx-split { display: inline-flex; flex-wrap: wrap; gap: .04em .02em; vertical-align: top; text-shadow: none; margin-top: .08em; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero h1 em .fx-split .fx-w { display: inline-flex; gap: .02em; margin-right: .22em; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero h1 em .fx-ch { display: inline-block; padding: .02em .08em .04em; line-height: 1; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero h1 em .fx-gap { display: inline-block; width: .2em; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero h1 em .fx-ch:nth-of-type(5n+1) { font-family: "FX Anton"; background: var(--p-box); color: var(--p-on-box); rotate: -4deg; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero h1 em .fx-ch:nth-of-type(5n+2) { font: italic 900 1.05em/1 "FX Display", serif; text-transform: none; background: var(--p-red); color: #fff; rotate: 3deg; translate: 0 .06em; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero h1 em .fx-ch:nth-of-type(5n+3) { font: normal 900 .86em/1 "FX Geist", sans-serif; color: var(--ink); box-shadow: inset 0 0 0 .07em var(--ink); rotate: -1.5deg; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero h1 em .fx-ch:nth-of-type(5n+4) { font: normal 900 1.02em/1 "FX Serif", serif; font-stretch: 62.5%; color: var(--p-red); rotate: 6deg;
  /* An outline in the box colour, so the red letter still reads where it lands on the red panel. */
  -webkit-text-stroke: .09em var(--p-box); paint-order: stroke fill; text-shadow: .05em .05em 0 #0a0a0b; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero h1 em .fx-ch:nth-of-type(5n) { font: normal 700 .78em/1 "FX Mono", monospace; background: var(--p-box); color: var(--p-red); rotate: -7deg; translate: 0 .05em; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero h1 em .fx-orig { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .lede {
  max-width: 54ch; margin-top: 44px; padding: 18px 24px 22px; background: var(--p-box); color: var(--p-on-box); font-weight: 600;
  clip-path: polygon(0 5%, 100% 0, 98.5% 93%, 0 100%); rotate: -1deg; filter: drop-shadow(8px 8px 0 var(--p-red));
}
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: center; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index ol { grid-template-columns: 1fr; border: 0; rotate: -4deg; transform-origin: 0 0; padding: 8px 0 30px; gap: 4px; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index li { border: 0; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index li:nth-child(2) { margin-left: 18px; } :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index li:nth-child(3) { margin-left: 36px; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index li:nth-child(4) { margin-left: 54px; } :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index li:nth-child(5) { margin-left: 72px; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index li:nth-child(6) { margin-left: 90px; } :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index li:nth-child(7) { margin-left: 108px; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index li:nth-child(8) { margin-left: 126px; } :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index li:nth-child(9) { margin-left: 144px; } :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index li:nth-child(10) { margin-left: 162px; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index a { position: relative; isolation: isolate; display: inline-flex; align-items: baseline; gap: 12px; width: fit-content; padding: 5px 18px 7px 10px; outline: 0; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index .t { font: italic 400 clamp(1.5rem, 3vw, 2.45rem)/1 "FX Anton", sans-serif; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); gap: 0; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index .t::before { display: none; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index .n { font: italic 900 14px/1 "FX Geist", sans-serif; color: var(--p-red-text); }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index .d { font: italic 800 11px/1.2 "FX Geist", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); text-align: left; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index a::before, :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index a::after { content: ""; position: absolute; pointer-events: none; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index a::before { z-index: -1; inset: -2px -8px -2px -6px; background: var(--p-box); clip-path: polygon(0 14%, 100% 0, 97% 100%, 3% 84%); scale: 0 1; transform-origin: left; transition: scale .16s cubic-bezier(.2, 1.3, .4, 1); }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index a::after { z-index: -2; inset: -14px -32px -12px -22px; background: var(--p-red); clip-path: polygon(3% 34%, 28% 0, 33% 22%, 100% 8%, 86% 50%, 100% 94%, 42% 78%, 30% 100%, 20% 72%, 0 90%); scale: 0; rotate: 4deg; transition: scale .22s cubic-bezier(.2, 1.4, .4, 1); }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index a:is(:hover, :focus-visible, .on)::before { scale: 1 1; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index a:is(:hover, :focus-visible, .on)::after { scale: 1; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index a:is(:hover, :focus-visible, .on) :is(.t, .n, .d) { color: var(--p-on-box); }

:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-pose { display: grid; position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; justify-self: center; perspective: 900px; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-pose > div { grid-area: 1 / 1; position: relative; display: none; place-items: center; isolation: isolate; cursor: pointer; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-pose > div.on { display: grid; animation: p-pose-in .42s cubic-bezier(.2, 1.3, .4, 1) both; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-pose > div::before {
  content: ""; position: absolute; z-index: -1; inset: 6%; background: var(--p-red); rotate: 8deg;
  clip-path: polygon(50% 0, 58% 30%, 82% 8%, 72% 38%, 100% 34%, 76% 54%, 96% 78%, 66% 70%, 62% 100%, 48% 74%, 26% 96%, 30% 66%, 2% 72%, 22% 50%, 0 26%, 30% 32%, 22% 4%);
}
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-pose > div.on::before { animation: p-burst .4s cubic-bezier(.2, 1.3, .4, 1) both; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-pose img { width: 58%; height: auto; filter: drop-shadow(4px 0 0 var(--p-box)) drop-shadow(-4px 0 0 var(--p-box)) drop-shadow(0 4px 0 var(--p-box)) drop-shadow(0 -4px 0 var(--p-box)) drop-shadow(12px 12px 0 #0a0a0b); animation: p-idle 2.4s ease-in-out .4s infinite alternate; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-pose img.shot-pose { width: 92%; border: 6px solid var(--p-box); filter: drop-shadow(12px 12px 0 #0a0a0b); rotate: -5deg; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-pose b.num { font: italic 400 clamp(6rem, 14vw, 11rem)/1 "FX Anton", sans-serif; color: var(--p-box); text-shadow: .06em .06em 0 #0a0a0b; rotate: -8deg; animation: p-idle 2.4s ease-in-out .4s infinite alternate; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-pose .say {
  position: absolute; z-index: 2; top: 2%; left: -6%; max-width: 72%; padding: 10px 18px 22px 14px; background: var(--p-box); color: var(--p-on-box);
  font: italic 400 clamp(15px, 1.6vw, 21px)/1.05 "FX Anton", sans-serif; text-transform: uppercase; letter-spacing: .02em;
  clip-path: polygon(0 8%, 100% 0, 94% 78%, 40% 82%, 22% 100%, 26% 84%, 4% 90%); rotate: -4deg;
}
@keyframes p-pose-in { 0% { opacity: 0; rotate: y 80deg; scale: .82; translate: -30px 0; } 55% { opacity: 1; rotate: y -10deg; scale: 1.06; translate: 6px 0; } 100% { opacity: 1; rotate: y 0deg; scale: 1; translate: 0 0; } }
@keyframes p-burst { 0% { scale: .4; rotate: -30deg; } 60% { scale: 1.1; rotate: 14deg; } 100% { scale: 1; rotate: 8deg; } }
@keyframes p-idle { from { translate: 0 0; } to { translate: 0 -8px; } }

:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .label {
  display: inline-block; padding: 5px 13px 5px 10px; background: var(--p-box); color: var(--p-on-box);
  font: italic 900 13px/1 "FX Geist", sans-serif; letter-spacing: .07em; clip-path: polygon(0 0, 100% 10%, 97% 100%, 2% 90%); rotate: -2deg;
}
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) h2 { font: italic 400 clamp(2.6rem, 5.6vw, 4.8rem)/.92 "FX Anton", sans-serif; text-transform: uppercase; letter-spacing: .01em; text-shadow: .06em .055em 0 var(--p-red); rotate: -3deg; transform-origin: 0 100%; padding-right: .1em; }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .head img { filter: drop-shadow(3px 0 0 var(--p-box)) drop-shadow(-3px 0 0 var(--p-box)) drop-shadow(0 3px 0 var(--p-box)) drop-shadow(0 -3px 0 var(--p-box)) drop-shadow(6px 6px 0 var(--p-red)); rotate: -6deg; }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .tagline { font-weight: 800; font-style: italic; font-size: 1.3rem; }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .copy .fact { border: 0; padding: 14px 18px 16px; background: var(--p-red); color: #fff; font: 700 14px/1.5 "FX Geist", sans-serif; clip-path: polygon(0 6%, 100% 0, 99% 100%, 1% 94%); rotate: -1deg; }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .copy .fact code { color: #fff; }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .stack { gap: 8px; }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .stack li { border: 2px solid var(--ink); border-radius: 0; color: var(--ink); font: 800 12px/1 "FX Geist", sans-serif; text-transform: uppercase; letter-spacing: .05em; transform: skewX(-12deg); }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .stack li:nth-child(odd) { background: var(--p-box); color: var(--p-on-box); border-color: var(--p-box); }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .btn {
  padding: 12px 24px; border-radius: 0; background: var(--p-red); color: #fff; font: italic 900 15px/1 "FX Geist", sans-serif; text-transform: uppercase; letter-spacing: .05em;
  clip-path: polygon(0 0, 100% 8%, 96% 100%, 3% 92%); filter: drop-shadow(5px 5px 0 var(--p-box));
}
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .btn:hover { background: var(--p-box); color: var(--p-on-box); animation: fx-shake .22s steps(4); }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .more { color: var(--ink); font: italic 800 14px/1.4 "FX Geist", sans-serif; text-transform: uppercase; letter-spacing: .04em; text-decoration-color: var(--p-red); text-decoration-thickness: 3px; }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .stage { background: transparent; overflow: visible; border-radius: 0; isolation: isolate; }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .stage::before {
  content: ""; position: absolute; z-index: -1; inset: -5% -6%; background: var(--p-red);
  clip-path: polygon(5% 2%, 100% 0, 95% 100%, 0 92%, 4% 60%, 0 56%);
}
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .stage::after {
  content: ""; position: absolute; z-index: -1; inset: -5% -6%; pointer-events: none;
  background-image: radial-gradient(circle, rgb(0 0 0 / .5) 0 1.8px, transparent 2.2px); background-size: 10px 10px;
  clip-path: polygon(5% 2%, 100% 0, 95% 100%, 0 92%, 4% 60%, 0 56%);
  -webkit-mask-image: linear-gradient(135deg, transparent 30%, #000); mask-image: linear-gradient(135deg, transparent 30%, #000);
}
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .stage :is(.shot, .window, .term, .screen, .diff) { border-radius: 0; border: 5px solid #fff; box-shadow: 10px 10px 0 #0a0a0b; rotate: -1.5deg; }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .stage .inset { rotate: 3deg; }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .said li { border-radius: 0; border: 0; background: #fff; color: #0a0a0b; font: italic 800 16px/1.2 "FX Geist", sans-serif; text-transform: uppercase; clip-path: polygon(0 8%, 100% 0, 97% 100%, 2% 90%); box-shadow: none; }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .said li::before { background: #e60012; border-radius: 0; }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .said small { color: #46443f; }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .diff { border-radius: 0; border: 4px solid var(--p-box); box-shadow: 10px 10px 0 var(--p-red); rotate: -1deg; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])):is(footer) > span { font: italic 400 30px/1 "FX Anton", sans-serif; text-transform: uppercase; text-shadow: .06em .06em 0 var(--p-red); color: var(--ink); }

html.fx-anim :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).fx-in h2 { animation: fx-slam .34s cubic-bezier(.2, 1.3, .4, 1) .1s both; }
html.fx-anim :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).fx-in .label { animation: fx-dash .3s cubic-bezier(.2, 1.2, .4, 1) both; }
html.fx-anim :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).fx-in .stage { animation: p-stage-in .5s cubic-bezier(.2, 1.3, .4, 1) .15s both; }
@keyframes p-stage-in { 0% { opacity: 0; translate: 120px 0; rotate: 8deg; } 70% { opacity: 1; translate: -8px 0; rotate: -1deg; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; } }

/* =====================================================================
   ALERT · black and orange title cards, hexagons, hazard bands
   ===================================================================== */
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) {
  --bg: #000000; --surface: #0c0c0c; --ink: #ffffff; --text: #e9e6df; --muted: #aaa69c; --line: #333333;
  --mix: white; --mix-amount: 22%;
  --e-or: #ff6a00; --e-or-text: #ff8a3d; --e-red: #e3000f; --e-red-text: #ff5a52; --e-ok: #3dff7a;
  --fx-paper:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 0L56 16V48L28 64L0 48V16ZM28 64V97' fill='none' stroke='%23ff6a00' stroke-opacity='.16'/%3E%3C/svg%3E") 0 0 / 56px 97px,
    radial-gradient(70vw 50vw at 100% 0%, rgb(227 0 15 / .16), transparent 70%),
    #000;
  font-family: "FX Geist", var(--sans);
}
@media (prefers-color-scheme: light) {
  :is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) {
    --bg: #ece8dd; --surface: #f8f5ee; --ink: #0a0a0a; --text: #161616; --muted: #4a463e; --line: #c8c2b3;
    --mix: black; --mix-amount: 38%;
    --e-or: #ff5a1f; --e-or-text: #a63a06; --e-red: #c8211b; --e-red-text: #b42318; --e-ok: #1f7a3f;
    --fx-paper:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 0L56 16V48L28 64L0 48V16ZM28 64V97' fill='none' stroke='%23c8211b' stroke-opacity='.14'/%3E%3C/svg%3E") 0 0 / 56px 97px,
      #ece8dd;
  }
}
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top .mark { font: 900 18px/1 "FX Serif", serif; font-stretch: 62.5%; text-transform: uppercase; letter-spacing: .02em; }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top .glyph { border-radius: 0; background: var(--ink); color: var(--bg); font: 900 20px/1 "FX Serif", serif; font-stretch: 62.5%; }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top nav :is(a, .lang-toggle), :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top .fun-toggle, :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])):is(footer) nav :is(a, .lang-toggle) { color: var(--e-or-text); font: 600 12px/1 "FX Mono", monospace; text-transform: uppercase; letter-spacing: .12em; }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top nav :is(a, .lang-toggle)::before, :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top .fun-toggle .fun-label::before, :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])):is(footer) nav :is(a, .lang-toggle)::before { content: "["; margin-right: 3px; }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top nav :is(a, .lang-toggle)::after, :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top .fun-toggle .fun-label::after, :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])):is(footer) nav :is(a, .lang-toggle)::after { content: "]"; margin-left: 3px; }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top nav :is(a, .lang-toggle):hover, :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top .fun-toggle:hover { color: var(--ink); }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top .fun-switch { border-radius: 0; } :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top .fun-switch i { border-radius: 0; }
@media (max-width: 560px) {
  :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top .mark { font-size: 0; gap: 0; }
  :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top nav :is(a, .lang-toggle), :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top .fun-toggle { letter-spacing: .04em; }
  :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top nav :is(a, .lang-toggle)::before, :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top .fun-toggle .fun-label::before { margin-right: 1px; }
  :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top nav :is(a, .lang-toggle)::after, :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).top .fun-toggle .fun-label::after { margin-left: 1px; }
}

:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .fx-deco::before {
  content: "警告"; right: max(16px, calc(50vw - 600px)); top: 8%; font: 800 clamp(5rem, 16vw, 15rem)/1 "FX Mincho", serif; color: var(--e-red);
  writing-mode: vertical-rl; letter-spacing: -.04em; animation: e-flicker 4s steps(1) infinite;
}
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .fx-deco::after {
  content: "PATTERN ORANGE // 総員第一種戦闘配置 // ALL HANDS, LEVEL ONE"; left: max(20px, calc(50vw - 580px)); top: 22px;
  font: 600 11px/1 "FX Mono", "FX Mincho", monospace; letter-spacing: .14em; color: var(--e-or-text); white-space: nowrap;
}
@keyframes e-flicker { 0%, 62%, 66%, 100% { opacity: 1; } 63%, 65% { opacity: .15; } }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero h1 {
  font: 900 clamp(3rem, 8vw, 7.6rem)/.84 "FX Serif", serif; font-stretch: 62.5%; text-transform: uppercase; letter-spacing: -.005em;
  max-width: 13ch; color: var(--ink); padding-top: .12em; border-top: 4px solid var(--ink);
}
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero h1 em { font-style: normal; color: var(--e-or); }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .lede { color: var(--text); border-left: 4px solid var(--e-or); padding-left: 18px; }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .index ol { border-top: 0; }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .index::before {
  content: "警告 WARNING ◆ 警告 WARNING ◆ 警告 WARNING ◆ 警告 WARNING ◆ 警告 WARNING ◆ 警告 WARNING"; display: block; overflow: hidden; white-space: nowrap; margin-bottom: 14px; padding: 7px 10px;
  font: 700 12px/1 "FX Mono", "FX Mincho", monospace; letter-spacing: .2em; color: #000;
  background: repeating-linear-gradient(-45deg, var(--e-or) 0 14px, #000 14px 18px, var(--e-or) 18px 32px);
}
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .index li { border-bottom: 1px solid var(--line); }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .index a { grid-template-columns: 40px auto 1fr; padding: 10px 8px; }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .index .n {
  display: grid; place-items: center; width: 34px; height: 30px; background: var(--e-or); color: #000; font: 700 12px/1 "FX Mono", monospace;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .index .t { font: 900 1.45rem/1 "FX Serif", serif; font-stretch: 62.5%; text-transform: uppercase; letter-spacing: .01em; }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .index .t::before { display: none; }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .index .d { font: 500 11px/1.3 "FX Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .index a:hover, :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .index a:focus-visible { background: var(--e-or); outline: 0; }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .index a:hover :is(.t, .d), :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .index a:focus-visible :is(.t, .d) { color: #000; }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .index a:hover .n, :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .index a:focus-visible .n { background: #000; color: var(--e-or); }

:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])):is(.project, .upstream) { padding-top: clamp(96px, 12vw, 150px); }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])):is(.project, .upstream) .fx-deco::before {
  top: 0; left: -45.25px; right: 0; height: 30px;
  background: repeating-linear-gradient(-45deg, var(--e-or) 0 16px, transparent 16px 32px) 0 0 / 45.25px 100%;
  animation: e-band-t 1.4s linear infinite;
}
@keyframes e-band-t { to { translate: 45.25px 0; } }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])):is(.project, .upstream) .fx-deco::after {
  content: "EMERGENCY ◆ 非常事態 ◆ EMERGENCY"; top: 0; left: 50%; translate: -50% 0; height: 30px; display: flex; align-items: center; padding: 0 22px;
  background: var(--bg); color: var(--e-or-text); font: 700 13px/1 "FX Mono", "FX Mincho", monospace; letter-spacing: .24em; white-space: nowrap;
}
@keyframes e-band { to { background-position: 45.25px 0; } }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .copy { position: relative; }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .fx-ep { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; color: var(--e-red-text); }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .fx-ep b { font: 800 clamp(2rem, 3.6vw, 3rem)/1 "FX Mincho", serif; color: var(--e-red); }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .fx-ep i { font: normal 600 11px/1 "FX Mono", monospace; letter-spacing: .2em; }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .label { color: var(--e-or-text); font: 600 12px/1 "FX Mono", monospace; letter-spacing: .14em; }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .label::before { content: "▶ "; animation: fx-blink 1s steps(1) infinite; }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) h2 { font: 900 clamp(3rem, 7vw, 6.2rem)/.82 "FX Serif", serif; font-stretch: 62.5%; text-transform: uppercase; letter-spacing: -.005em; }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .tagline { font: 700 1.25rem/1.35 "FX Serif", serif; font-stretch: 75%; }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .copy .fact {
  position: relative; padding: 40px 16px 14px; border: 2px solid var(--e-or); background: color-mix(in oklab, var(--e-or) 7%, transparent);
  font: 13px/1.6 "FX Mono", monospace; color: var(--ink);
}
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .copy .fact::before {
  content: "WARNING"; position: absolute; left: 0; right: 0; top: 0; height: 24px; display: flex; align-items: center; padding-left: 10px;
  font: 700 11px/1 "FX Mono", monospace; letter-spacing: .3em; color: #000;
  background: linear-gradient(90deg, var(--e-or) 0 110px, transparent 110px), repeating-linear-gradient(-45deg, var(--e-or) 0 8px, #000 8px 14px);
}
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .stack li { border: 1px solid var(--e-or); border-radius: 0; color: var(--e-or-text); font: 600 11px/1 "FX Mono", monospace; text-transform: uppercase; letter-spacing: .1em; }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .btn { border-radius: 0; background: var(--e-or); color: #000; font: 700 13px/1 "FX Mono", monospace; text-transform: uppercase; letter-spacing: .12em; padding: 13px 18px; }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .btn:hover { background: var(--ink); color: var(--bg); }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .more { font: 600 13px/1.4 "FX Mono", monospace; text-transform: uppercase; letter-spacing: .08em; text-decoration-color: var(--e-or); }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .stage {
  border-radius: 0; border: 1px solid color-mix(in oklab, var(--e-or) 60%, transparent);
  background:
    linear-gradient(var(--e-or) 0 0) top left / 26px 4px no-repeat, linear-gradient(var(--e-or) 0 0) top left / 4px 26px no-repeat,
    linear-gradient(var(--e-or) 0 0) top right / 26px 4px no-repeat, linear-gradient(var(--e-or) 0 0) top right / 4px 26px no-repeat,
    linear-gradient(var(--e-or) 0 0) bottom left / 26px 4px no-repeat, linear-gradient(var(--e-or) 0 0) bottom left / 4px 26px no-repeat,
    linear-gradient(var(--e-or) 0 0) bottom right / 26px 4px no-repeat, linear-gradient(var(--e-or) 0 0) bottom right / 4px 26px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5'%3E%3Cpath d='M14 0L28 8V24L14 32L0 24V8ZM14 32V48.5' fill='none' stroke='%23ff6a00' stroke-opacity='.3'/%3E%3C/svg%3E") 0 0 / 28px 48.5px,
    var(--surface);
  padding-top: calc(28px + clamp(18px, 3.4vw, 40px));
}
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .stage::before {
  content: "CAM-0" attr(data-fx-n) " // " attr(data-fx-name) "   ● LIVE"; position: absolute; z-index: 3; top: 12px; left: 16px;
  font: 600 10.5px/1 "FX Mono", monospace; letter-spacing: .16em; color: var(--e-or-text); white-space: pre; text-transform: uppercase;
}
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .stage::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgb(255 106 0 / .05) 0 1px, transparent 1px 4px); }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .stage :is(.shot, .window, .term, .screen, .diff) { border-radius: 0; box-shadow: 0 0 0 1px var(--e-or), 0 0 40px -8px rgb(255 106 0 / .45); }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .said li { border-radius: 0; border: 1px solid var(--e-or); background: var(--bg); color: var(--ink); font-family: "FX Mono", monospace; font-size: 14px; box-shadow: none; }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .said li::before { border-radius: 0; background: var(--e-ok); }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .diff { border-radius: 0; border: 1px solid var(--e-or); background: var(--surface); }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])):is(footer) { position: relative; }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])):is(footer) > span { font: 900 22px/1 "FX Serif", serif; font-stretch: 62.5%; text-transform: uppercase; color: var(--ink); }
:is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])):is(footer) .fx-deco::after { content: "終"; right: max(16px, calc(50vw - 600px)); bottom: 0; font: 800 120px/1 "FX Mincho", serif; color: var(--e-red); opacity: .9; }
html.fx-anim :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).fx-in h2 { animation: fx-cut .5s steps(1) .12s both; }
html.fx-anim :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).fx-in .fx-ep { animation: fx-cut .5s steps(1) both; }

/* =====================================================================
   NEON · cyan and magenta, aberration, scanlines, synthwave grid
   ===================================================================== */
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) {
  --bg: #08051a; --surface: #110b2c; --ink: #ffffff; --text: #ddd8ff; --muted: #a49cd6; --line: #2e2350;
  --mix: white; --mix-amount: 22%;
  --n-c: #22d3ee; --n-m: #ff2e88; --n-y: #ffe14d; --n-ct: #5ce1f5; --n-mt: #ff6baa; --n-glow: rgb(255 46 136 / .55);
  --fx-paper:
    repeating-linear-gradient(to bottom, rgb(255 255 255 / .035) 0 1px, transparent 1px 4px),
    linear-gradient(rgb(46 35 80 / .6) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgb(46 35 80 / .6) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(80vw 50vw at 50% -10%, rgb(255 46 136 / .2), transparent 70%),
    radial-gradient(60vw 40vw at 100% 70%, rgb(34 211 238 / .14), transparent 70%),
    #08051a;
  font-family: "FX Geist", var(--sans);
  cursor: crosshair;
}
@media (prefers-color-scheme: light) {
  :is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) {
    --bg: #f7f0ff; --surface: #ffffff; --ink: #170a3a; --text: #2a1d55; --muted: #574b84; --line: #dccdf6;
    --mix: black; --mix-amount: 38%;
    --n-c: #0891b2; --n-m: #db2777; --n-y: #a16207; --n-ct: #0b6a80; --n-mt: #be185d; --n-glow: rgb(219 39 119 / .3);
    --fx-paper:
      repeating-linear-gradient(to bottom, rgb(23 10 58 / .03) 0 1px, transparent 1px 4px),
      linear-gradient(rgb(219 39 119 / .09) 1px, transparent 1px) 0 0 / 48px 48px,
      linear-gradient(90deg, rgb(8 145 178 / .09) 1px, transparent 1px) 0 0 / 48px 48px,
      radial-gradient(70vw 40vw at 50% -10%, rgb(255 46 136 / .16), transparent 70%),
      linear-gradient(180deg, #fbf3ff, #eaf8ff);
  }
}
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).top .mark { font: 800 15px/1 "FX Orbitron", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).top .glyph { border-radius: 0; background: transparent; color: var(--n-ct); box-shadow: inset 0 0 0 1.5px var(--n-c), 0 0 14px var(--n-glow); font: 900 16px/1 "FX Orbitron", sans-serif; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).top nav :is(a, .lang-toggle), :is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).top .fun-toggle, :is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])):is(footer) nav :is(a, .lang-toggle) { color: var(--n-ct); font: 600 12px/1 "FX Mono", monospace; text-transform: uppercase; letter-spacing: .14em; }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).top nav :is(a, .lang-toggle):hover, :is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).top .fun-toggle:hover { color: var(--n-mt); text-shadow: 0 0 10px var(--n-glow); }

:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .fx-deco::before {
  top: clamp(40px, 8vw, 100px); right: max(24px, calc(50vw - 560px)); width: min(30vw, 380px); aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(180deg, #ffe14d 8%, #ff8a3d 38%, #ff2e88 62%, #7c3aed 100%);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 50% no-repeat, repeating-linear-gradient(#000 0 10px, transparent 10px 15px) bottom / 100% 50% no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% 50% no-repeat, repeating-linear-gradient(#000 0 10px, transparent 10px 15px) bottom / 100% 50% no-repeat;
  filter: drop-shadow(0 0 40px rgb(255 46 136 / .6));
}
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .fx-deco::after {
  top: calc(clamp(40px, 8vw, 100px) + min(15vw, 190px)); right: max(0px, calc(50vw - 640px)); width: min(48vw, 640px); height: min(26vw, 320px);
  background-image: linear-gradient(var(--n-m) 2px, transparent 2px), linear-gradient(90deg, var(--n-m) 2px, transparent 2px);
  background-size: 48px 48px; transform: perspective(260px) rotateX(62deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 92%); mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
  animation: n-floor 1.1s steps(6) infinite; opacity: .85;
}
@keyframes n-floor { to { background-position: 0 48px; } }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero h1 {
  position: relative; font: 900 clamp(2.2rem, 5.2vw, 4.4rem)/1.04 "FX Orbitron", sans-serif; text-transform: uppercase; letter-spacing: .02em; max-width: 11ch;
  color: var(--ink); text-shadow: -.04em 0 0 var(--n-c), .04em 0 0 var(--n-m), 0 0 26px var(--n-glow);
}
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero h1 em { font-style: normal; color: var(--n-y); text-shadow: -.04em 0 0 var(--n-c), .04em 0 0 var(--n-m), 0 0 26px rgb(255 225 77 / .5); }
@media (prefers-color-scheme: light) { :is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero h1 em { color: var(--n-m); text-shadow: -.04em 0 0 var(--n-c), 0 0 18px var(--n-glow); } }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) :is(.hero h1, h2)::before, :is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) :is(.hero h1, h2)::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; text-shadow: none;
}
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) :is(.hero h1, h2)::before { color: var(--n-c); animation: n-glitch-a 3.4s steps(1) infinite; }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) :is(.hero h1, h2)::after { color: var(--n-m); animation: n-glitch-b 3.4s steps(1) infinite; }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) h2 { position: relative; }
@keyframes n-glitch-a { 0%, 90%, 100% { opacity: 0; } 91% { opacity: .9; clip-path: inset(10% 0 62% 0); translate: -6px 0; } 93% { opacity: .9; clip-path: inset(58% 0 18% 0); translate: 5px 0; } 95% { opacity: 0; } }
@keyframes n-glitch-b { 0%, 91%, 100% { opacity: 0; } 92% { opacity: .9; clip-path: inset(40% 0 30% 0); translate: 6px 0; } 94% { opacity: .9; clip-path: inset(80% 0 4% 0); translate: -4px 0; } 96% { opacity: 0; } }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .lede { font: 15.5px/1.7 "FX Mono", monospace; color: var(--text); }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .lede::before { content: "> "; color: var(--n-mt); }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .lede::after { content: ""; display: inline-block; width: .6em; height: 1.1em; margin-left: 4px; vertical-align: -.2em; background: var(--n-c); animation: fx-blink 1s steps(1) infinite; }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .index ol { border: 0; column-gap: 14px; row-gap: 10px; }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .index li { border: 0; }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .index a {
  position: relative; isolation: isolate; padding: 14px 16px; background: color-mix(in oklab, var(--n-c) 55%, transparent);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); transition: background .15s;
}
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .index a::before { content: ""; position: absolute; z-index: -1; inset: 1.5px; background: var(--bg); clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); transition: background .15s; }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .index .n { color: var(--n-mt); font-family: "FX Mono", monospace; }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .index .t { font: 700 1rem/1.2 "FX Orbitron", sans-serif; text-transform: uppercase; letter-spacing: .06em; }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .index .t::before { border-radius: 0; box-shadow: 0 0 10px var(--accent); }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .index .d { font: 12px/1.3 "FX Mono", monospace; }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .index a:hover, :is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .index a:focus-visible { background: var(--n-m); outline: 0; }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .index a:hover::before, :is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .index a:focus-visible::before { background: color-mix(in oklab, var(--n-m) 14%, var(--bg)); }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .index a:hover .t { text-shadow: -2px 0 var(--n-c), 2px 0 var(--n-m); }

:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .label { color: var(--n-ct); font: 600 12.5px/1 "FX Mono", monospace; letter-spacing: .16em; text-shadow: 0 0 12px color-mix(in oklab, var(--n-c) 60%, transparent); }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .label::before { content: "[ "; color: var(--n-mt); } :is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .label::after { content: " ]"; color: var(--n-mt); }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) h2 { font: 900 clamp(2rem, 4vw, 3.2rem)/1.04 "FX Orbitron", sans-serif; text-transform: uppercase; letter-spacing: .02em; text-shadow: -.04em 0 0 var(--n-c), .04em 0 0 var(--n-m), 0 0 22px var(--n-glow); }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .head img { filter: drop-shadow(0 0 16px color-mix(in oklab, var(--accent) 70%, transparent)); }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .copy .fact {
  position: relative; isolation: isolate; border: 0; padding: 36px 16px 14px; background: var(--n-m); font: 13px/1.6 "FX Mono", monospace;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .copy .fact::before { content: ""; position: absolute; z-index: -1; inset: 1.5px; background: var(--surface); clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .copy .fact::after {
  content: "SYS.NOTE"; position: absolute; left: 1.5px; right: 1.5px; top: 1.5px; height: 22px; display: flex; align-items: center; padding-left: 16px;
  font: 600 10.5px/1 "FX Mono", monospace; letter-spacing: .2em; color: var(--n-mt);
  background: linear-gradient(90deg, transparent 0 110px, transparent 110px), repeating-linear-gradient(45deg, color-mix(in oklab, var(--n-m) 40%, transparent) 0 3px, transparent 3px 9px) 110px 0 / 100% 100% no-repeat;
  border-bottom: 1.5px solid var(--n-m);
}
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .stack li { border: 0; border-radius: 0; padding: 7px 12px; background: color-mix(in oklab, var(--n-c) 12%, transparent); color: var(--n-ct); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--n-c) 60%, transparent); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .btn { border-radius: 0; background: var(--n-m); color: #0a0a0b; font: 800 13px/1 "FX Orbitron", sans-serif; text-transform: uppercase; letter-spacing: .1em; padding: 13px 20px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .btn:hover { background: var(--n-c); }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .more { color: var(--n-ct); text-decoration-color: var(--n-m); font-family: "FX Mono", monospace; font-size: 14px; }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .stage {
  border-radius: 0; background: var(--n-c); padding: 2px; isolation: isolate;
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .stage::before {
  content: ""; position: absolute; z-index: -1; inset: 2px;
  clip-path: polygon(21px 0, 100% 0, 100% calc(100% - 21px), calc(100% - 21px) 100%, 0 100%, 0 21px);
  background: repeating-linear-gradient(to bottom, color-mix(in oklab, var(--n-c) 8%, transparent) 0 1px, transparent 1px 4px), radial-gradient(circle at 70% 20%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 70%), var(--surface);
}
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .stage::after { content: "SYS//" attr(data-fx-name) "  ▮▮▮▯▯"; position: absolute; z-index: 2; left: 30px; top: 7px; font: 600 10px/1 "FX Mono", monospace; letter-spacing: .2em; color: var(--n-ct); text-transform: uppercase; }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .stage { padding: clamp(22px, 4vw, 46px); }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .stage.boulito-stage { display: grid; }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .roughcut-stage { padding-bottom: clamp(96px, 17vw, 190px); }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .stage :is(.shot, .window, .term, .screen, .diff) { border-radius: 0; box-shadow: 0 0 0 1px var(--n-c), 0 0 34px -6px color-mix(in oklab, var(--n-c) 70%, transparent); }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .said li { border-radius: 0; border: 1px solid var(--n-c); background: var(--bg); color: var(--ink); font-family: "FX Mono", monospace; font-size: 14px; box-shadow: 0 0 18px -6px var(--n-c); }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .said li::before { border-radius: 0; background: var(--n-m); box-shadow: 0 0 8px var(--n-m); }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .diff { border-radius: 0; border: 1px solid var(--n-c); background: var(--surface); box-shadow: 0 0 40px -10px var(--n-c); }
:is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])):is(footer) > span { font: 800 14px/1 "FX Orbitron", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }

/* =====================================================================
   8-BIT · Game Boy greens by day, PICO-8 colors by night
   ===================================================================== */
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) {
  --bg: #e0f8d0; --surface: #f2ffe8; --ink: #081820; --text: #0b2418; --muted: #2c5a46; --line: #88c070;
  --mix: black; --mix-amount: 40%;
  --x-a: #346856; --x-on-a: #e0f8d0; --x-b: #88c070; --x-c: #081820; --x-hi: #346856; --x-cloud: #f2ffe8; --x-cloud-edge: #88c070;
  --fx-paper: conic-gradient(rgb(52 104 86 / .07) 25%, transparent 0 50%, rgb(52 104 86 / .07) 0 75%, transparent 0) 0 0 / 32px 32px, #e0f8d0;
  font-family: "FX Pixelify", var(--sans);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath d='M2 2h3v3h3v3h3v3h3v3h3v3h-6v3h-3v3H5v-3H2z' fill='%23081820'/%3E%3Cpath d='M5 5h3v3h3v3h3v3h3v0h-6v3H8v3H5z' fill='%23e0f8d0'/%3E%3C/svg%3E") 2 2, auto;
}
@media (prefers-color-scheme: dark) {
  :is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) {
    --bg: #111327; --surface: #1d2b53; --ink: #fff1e8; --text: #f4ebe2; --muted: #c2c3c7; --line: #5f574f;
    --mix: white; --mix-amount: 22%;
    --x-a: #ffec27; --x-on-a: #111327; --x-b: #ff004d; --x-c: #29adff; --x-hi: #00e436; --x-cloud: #1d2b53; --x-cloud-edge: #2c3d73;
    --fx-paper:
      conic-gradient(at 3px 3px, transparent 75%, rgb(255 241 232 / .8) 0) 0 0 / 97px 113px,
      conic-gradient(at 3px 3px, transparent 75%, #29adff 0) 41px 23px / 151px 137px,
      conic-gradient(at 3px 3px, transparent 75%, #ffec27 0) 80px 60px / 223px 199px,
      conic-gradient(at 6px 6px, transparent 75%, rgb(255 241 232 / .35) 0) 13px 71px / 311px 283px,
      #111327;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath d='M2 2h3v3h3v3h3v3h3v3h3v3h-6v3h-3v3H5v-3H2z' fill='%23111327'/%3E%3Cpath d='M5 5h3v3h3v3h3v3h3v0h-6v3H8v3H5z' fill='%23ffec27'/%3E%3C/svg%3E") 2 2, auto;
  }
}
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top .mark { font: 12px/1 "FX Press", monospace; text-transform: uppercase; }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top .glyph { border-radius: 0; background: var(--x-a); color: var(--x-on-a); font: 13px/1 "FX Press", monospace; box-shadow: 0 0 0 3px var(--ink), 4px 4px 0 3px var(--ink); }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top nav :is(a, .lang-toggle), :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top .fun-toggle, :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)):is(footer) nav :is(a, .lang-toggle) {
  padding: 8px 10px; background: var(--surface); color: var(--ink); font: 11px/1 "FX Silk", monospace; text-transform: uppercase;
  box-shadow: 0 0 0 3px var(--ink), inset -3px -3px 0 rgb(0 0 0 / .18), inset 3px 3px 0 rgb(255 255 255 / .35);
}
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top nav { gap: 14px; } :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top .fun-toggle { margin-left: 14px; }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top nav :is(a, .lang-toggle):hover, :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top .fun-toggle:hover, :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)):is(footer) nav :is(a, .lang-toggle):hover { background: var(--x-a); color: var(--x-on-a); }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top .fun-switch { border-radius: 0; } :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top .fun-switch i { border-radius: 0; }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .fx-deco::before {
  top: 40px; left: 0; width: 8px; height: 8px; background: transparent;
  box-shadow: 16px 0 var(--x-cloud-edge), 24px 0 var(--x-cloud-edge), 32px 0 var(--x-cloud-edge), 8px 8px var(--x-cloud-edge), 16px 8px var(--x-cloud), 24px 8px var(--x-cloud), 32px 8px var(--x-cloud), 40px 8px var(--x-cloud-edge), 48px 8px var(--x-cloud-edge), 0 16px var(--x-cloud-edge), 8px 16px var(--x-cloud), 16px 16px var(--x-cloud), 24px 16px var(--x-cloud), 32px 16px var(--x-cloud), 40px 16px var(--x-cloud), 48px 16px var(--x-cloud), 56px 16px var(--x-cloud-edge), 0 24px var(--x-cloud-edge), 8px 24px var(--x-cloud-edge), 16px 24px var(--x-cloud-edge), 24px 24px var(--x-cloud-edge), 32px 24px var(--x-cloud-edge), 40px 24px var(--x-cloud-edge), 48px 24px var(--x-cloud-edge), 56px 24px var(--x-cloud-edge);
  animation: x-cloud 60s linear infinite; scale: 2;
}
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .fx-deco::after {
  top: 150px; left: 0; width: 8px; height: 8px; background: transparent; opacity: .8;
  box-shadow: 16px 0 var(--x-cloud-edge), 24px 0 var(--x-cloud-edge), 8px 8px var(--x-cloud-edge), 16px 8px var(--x-cloud), 24px 8px var(--x-cloud), 32px 8px var(--x-cloud-edge), 0 16px var(--x-cloud-edge), 8px 16px var(--x-cloud-edge), 16px 16px var(--x-cloud-edge), 24px 16px var(--x-cloud-edge), 32px 16px var(--x-cloud-edge), 40px 16px var(--x-cloud-edge);
  animation: x-cloud 90s linear -40s infinite; scale: 2.5;
}
@keyframes x-cloud { from { translate: -200px 0; } to { translate: calc(100vw + 100px) 0; } }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero h1 { font: 400 clamp(1.45rem, 4.1vw, 3.1rem)/1.38 "FX Press", monospace; letter-spacing: 0; max-width: 16ch; color: var(--ink); text-shadow: .1em .1em 0 var(--x-b); }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero h1 em { font-style: normal; color: var(--x-a); }
@media (prefers-color-scheme: light) { :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero h1 em { color: var(--x-a); text-shadow: .1em .1em 0 var(--x-b); } }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .lede, :is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .copy {
  position: relative; background: var(--surface); color: var(--text);
  box-shadow: 0 0 0 4px var(--ink), inset 0 0 0 4px var(--surface), inset 0 0 0 7px var(--x-b), 8px 8px 0 4px var(--ink);
}
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .lede { max-width: 56ch; padding: 22px 28px 30px; font-size: 1.15rem; }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .lede::after { content: ""; position: absolute; right: 18px; bottom: 12px; width: 14px; height: 10px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); animation: x-next .9s steps(2) infinite; }
@keyframes x-next { 50% { translate: 0 4px; } }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index { padding: 14px; background: var(--surface); box-shadow: 0 0 0 4px var(--ink), inset 0 0 0 4px var(--surface), inset 0 0 0 7px var(--x-b), 8px 8px 0 4px var(--ink); }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index ol { border: 0; column-gap: 20px; }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index li { border-bottom: 3px dotted var(--line); }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index li:last-child, :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index li:nth-last-child(2):nth-child(odd) { border-bottom-color: transparent; }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index a { position: relative; grid-template-columns: 1.4em 2.2em auto 1fr; padding: 12px 6px; }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index a::before { content: "▶"; font: 12px/1 "FX Press", monospace; color: var(--x-b); opacity: 0; }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index a:is(:hover, :focus-visible)::before { opacity: 1; animation: fx-blink .6s steps(1) infinite; }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index a:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; border-radius: 0; }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index .n { font: 12px/1 "FX Silk", monospace; color: var(--muted); }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index .t { font: 12px/1.4 "FX Press", monospace; text-transform: uppercase; }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index .t::before { border-radius: 0; width: 10px; height: 10px; box-shadow: 2px 2px 0 var(--ink); }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index .d { font-size: 15px; }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index a:hover .t { color: var(--x-hi); }
@media (prefers-color-scheme: light) { :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index a:hover .t { color: var(--x-a); } }

:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)):is(.project, .upstream) .fx-deco::before {
  top: 0; left: 0; right: 0; height: 16px;
  background: linear-gradient(var(--ink) 0 0) 0 0 / 100% 2px no-repeat, linear-gradient(90deg, var(--ink) 2px, transparent 2px) 0 2px / 32px 7px, linear-gradient(90deg, var(--ink) 2px, transparent 2px) 16px 9px / 32px 7px, linear-gradient(var(--ink) 0 0) 0 8px / 100% 1px no-repeat, var(--x-b);
}
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .copy { padding: 30px clamp(20px, 3vw, 34px) 30px; }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .label { font: 12px/1 "FX Silk", monospace; color: var(--muted); }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .label::before { content: "★ "; color: var(--x-b); }
@media (prefers-color-scheme: light) { :is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .label::before { color: var(--x-a); } }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) h2 { font: 400 clamp(1.25rem, 2.6vw, 2rem)/1.35 "FX Press", monospace; letter-spacing: 0; text-shadow: .12em .12em 0 var(--x-b); }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .head img { image-rendering: pixelated; filter: drop-shadow(4px 4px 0 var(--ink)); }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .tagline { font-weight: 600; font-size: 1.28rem; }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .copy p { font-size: 1.05rem; }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .copy .fact { border: 0; padding: 12px 14px 12px 40px; position: relative; background: color-mix(in oklab, var(--x-b) 22%, var(--surface)); box-shadow: inset 0 0 0 3px var(--ink); font: 15px/1.5 "FX Pixelify", sans-serif; color: var(--ink); }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .copy .fact::before { content: "★"; position: absolute; left: 14px; top: 12px; color: var(--x-a); font: 14px/1.3 "FX Press", monospace; text-shadow: 2px 2px 0 var(--ink); }
@media (prefers-color-scheme: light) { :is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .copy .fact::before { color: var(--ink); text-shadow: none; } }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .stack { gap: 10px; }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .stack li { border: 0; border-radius: 0; padding: 7px 9px; background: var(--bg); color: var(--ink); font: 11px/1 "FX Silk", monospace; box-shadow: 0 0 0 3px var(--ink), 3px 3px 0 3px var(--ink); }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .btn {
  border-radius: 0; padding: 14px 16px; background: var(--x-a); color: var(--x-on-a); font: 11px/1.2 "FX Press", monospace; text-transform: uppercase;
  box-shadow: 0 0 0 3px var(--ink), 6px 6px 0 3px var(--ink), inset -4px -4px 0 rgb(0 0 0 / .3), inset 4px 4px 0 rgb(255 255 255 / .35);
}
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .btn:hover { background: var(--x-a); filter: brightness(1.1); }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .btn:active { translate: 4px 4px; box-shadow: 0 0 0 3px var(--ink), 2px 2px 0 3px var(--ink); }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .more { font: 12.5px/1.6 "FX Silk", monospace; text-decoration-color: var(--x-b); text-decoration-thickness: 3px; }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .stage {
  border-radius: 0; background: conic-gradient(color-mix(in oklab, var(--accent) 22%, var(--surface)) 25%, var(--surface) 0 50%, color-mix(in oklab, var(--accent) 22%, var(--surface)) 0 75%, var(--surface) 0) 0 0 / 24px 24px;
  box-shadow: 0 0 0 4px var(--ink), 10px 10px 0 4px var(--ink);
  overflow: visible;
}
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .stage :is(.shot, .window, .term, .screen, .diff) { border-radius: 0; box-shadow: 0 0 0 4px var(--ink), 6px 6px 0 4px rgb(0 0 0 / .55); }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .said li { border-radius: 0; border: 0; background: var(--surface); color: var(--ink); font: 16px/1.2 "FX Pixelify", sans-serif; box-shadow: 0 0 0 3px var(--ink), 4px 4px 0 3px var(--ink); }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .said li::before { border-radius: 0; background: var(--x-b); }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .said small { color: var(--muted); }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .diff { border-radius: 0; border: 0; box-shadow: 0 0 0 4px var(--ink), 8px 8px 0 4px var(--ink); font-family: "FX Mono", monospace; }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)):is(footer) { position: relative; padding-top: 70px; }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)):is(footer) > span { font: 12px/1 "FX Press", monospace; text-transform: uppercase; color: var(--ink); }
:is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)):is(footer) .fx-deco::after {
  content: ""; top: 22px; left: 0; width: 6px; height: 6px; background: transparent;
  box-shadow:
    12px 0 var(--x-hi), 18px 0 var(--x-hi), 24px 0 var(--x-hi),
    6px 6px var(--x-hi), 12px 6px var(--x-hi), 18px 6px var(--x-hi), 24px 6px var(--x-hi), 30px 6px var(--x-hi),
    0 12px var(--x-hi), 6px 12px var(--ink), 12px 12px var(--x-hi), 18px 12px var(--x-hi), 24px 12px var(--ink), 30px 12px var(--x-hi), 36px 12px var(--x-hi),
    0 18px var(--x-hi), 6px 18px var(--x-hi), 12px 18px var(--x-hi), 18px 18px var(--x-hi), 24px 18px var(--x-hi), 30px 18px var(--x-hi), 36px 18px var(--x-hi),
    0 24px var(--x-hi), 6px 24px var(--x-hi), 12px 24px var(--x-hi), 18px 24px var(--x-hi), 24px 24px var(--x-hi), 30px 24px var(--x-hi), 36px 24px var(--x-hi);
  animation: x-walk 14s linear infinite, x-hop .5s steps(2) infinite; left: 0;
}
@keyframes x-walk { from { translate: -60px 0; } to { translate: 100vw 0; } }
@keyframes x-hop { 50% { margin-top: -6px; } }
html.fx-anim :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).fx-in .copy { animation: x-step .5s steps(5) both; }
@keyframes x-step { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* ---------- Small screens ---------- */
@media (max-width: 759px) {
  :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index { grid-template-columns: 1fr; }
  :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-pose { display: none; }
  :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index ol { rotate: -3deg; }
  :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index li { margin-left: 0 !important; }
  :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index a { flex-wrap: wrap; row-gap: 4px; }
  :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index .d { flex-basis: 100%; margin: 0; padding-left: 28px; }
  :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-deco::before, :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-deco::after { width: 70vw; bottom: 55%; opacity: .9; }
  :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .fx-deco::before { opacity: .22; }
  :is([data-skin="alert"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])).hero .fx-deco::after { white-space: normal; right: 20px; }
  :is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .fx-deco::before { width: 40vw; top: 18px; opacity: .55; }
  :is([data-skin="neon"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])).hero .fx-deco::after { display: none; }
  :is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top { border-radius: 22px; }
  :is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top nav :is(a, .lang-toggle), :is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top .fun-toggle { padding: 6px 9px; }
  :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top nav :is(a, .lang-toggle), :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top .fun-toggle { padding: 6px 7px; font-size: 10px; }
  :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index a { grid-template-columns: 1.4em 2.2em 1fr; }
  :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).hero .index .d { grid-column: 3; }
  :is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .fx-ep b { font-size: 1.8rem; }
  .fx-dock .fx-dock-label { display: none; }
  .fx-dock button { padding: 9px 10px; }
}
@media (max-width: 520px) {
  .fx-dock { gap: 2px; }
  .fx-dock .sw { display: none; }
  .fx-dock button { padding: 9px 8px; font-size: 12.5px; }
}
@media (max-width: 520px) {
  :is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top nav :is(a, .lang-toggle), :is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top .fun-toggle, :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).top nav :is(a, .lang-toggle), :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).top .fun-toggle, :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top nav :is(a, .lang-toggle), :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top .fun-toggle { font-size: 10px; }
  :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).top .mark, :is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top .mark { font-size: 0; gap: 0; }
  :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).top .mark .glyph, :is([data-skin="y2k"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="earshot"], [id="trackmend"])).top .mark .glyph { font-size: 18px; }
  :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top .mark { font-size: 0; gap: 0; } :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top .mark .glyph { font-size: 13px; }
  :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top nav { gap: 10px; } :is([data-skin="pixel"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)).top .fun-toggle { margin-left: 10px; }
}

/* ---------- Reduced motion: keep the look, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-fun] *, html[data-fun] *::before, html[data-fun] *::after { animation: none !important; transition: none !important; }
}

/* Channel-switch static when the style changes */
html.fx-switching body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; mix-blend-mode: hard-light;
  background: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px;
  animation: fx-static .42s steps(6) forwards;
}
@keyframes fx-static { 0% { opacity: .95; background-position: 0 0; } 33% { background-position: 37px 91px; } 66% { opacity: .7; background-position: 113px 17px; } 100% { opacity: 0; background-position: 61px 140px; } }

/* =====================================================================
   OVERDRIVE · violet and acid, everything at once (the default style)
   ===================================================================== */
/* ---------- Palette ---------- */
html[data-skin="overdrive"] {
  --bg: #0a0a0b; --surface: #16151a; --sunken: #050506; --ink: #f5f5f7; --text: #dcdbe2; --muted: #a1a1aa; --line: #2c2b31;
  --mix: white; --mix-amount: 22%;
  --v: #6b2bff; --v2: #b49cff; --v-text: #a88bff; --a: #b6ff3b; --a-ink: #b6ff3b; --m: #ff2e88; --c: #22d3ee; --o: #ff5a1f;
  --edge: #f5f5f7; --hard: #b6ff3b; --hard-2: #6b2bff; --glow: rgb(107 43 255 / .55);
  --steps: linear-gradient(#d9ccff 0 25%, #b49cff 25% 50%, #6b2bff 50% 75%, #5420d6 75%);
  --cut: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  html[data-skin="overdrive"] {
    --bg: #f5f5f7; --surface: #ffffff; --sunken: #e8e8ed; --ink: #0a0a0b; --text: #26252b; --muted: #5c5c66; --line: #d2d2d7;
    --mix: black; --mix-amount: 38%;
    --v-text: #5b1ff0; --a-ink: #356a00; --edge: #0a0a0b; --hard: #6b2bff; --hard-2: #b6ff3b; --glow: rgb(107 43 255 / .3);
    color-scheme: light;
  }
}

html[data-skin="overdrive"] body { background: var(--bg); color: var(--text); font-family: "FX Geist", var(--sans); overflow-x: clip; }
html[data-skin="overdrive"] ::selection { background: var(--a); color: #0a0a0b; }
html[data-skin="overdrive"] :is(.hero, .project, .upstream, footer) { position: relative; isolation: isolate; }
html[data-skin="overdrive"] .fx-deco { display: block; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); overflow: hidden; pointer-events: none; }
html[data-skin="overdrive"] a:focus-visible, html[data-skin="overdrive"] button:focus-visible, html[data-skin="overdrive"] pre:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 4px; border-radius: 2px; }

/* ---------- Ambient layers ---------- */
.od-aurora { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; }
.od-aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .42; }
.od-aurora i:nth-child(1) { background: radial-gradient(closest-side, var(--od-c1), transparent); left: -22vmax; top: -26vmax; animation: od-drift-a 48s ease-in-out infinite alternate; }
.od-aurora i:nth-child(2) { background: radial-gradient(closest-side, #b6ff3b, transparent); right: -30vmax; top: 18vh; opacity: .16; animation: od-drift-b 56s ease-in-out infinite alternate; }
.od-aurora i:nth-child(3) { background: radial-gradient(closest-side, var(--od-c3), transparent); left: 18vw; bottom: -40vmax; opacity: .24; animation: od-drift-c 52s ease-in-out infinite alternate; }
@media (prefers-color-scheme: light) { .od-aurora i { opacity: .26; } .od-aurora i:nth-child(2) { opacity: .18; } }
@keyframes od-drift-a { to { transform: translate(24vw, 18vh) scale(1.15); } }
@keyframes od-drift-b { to { transform: translate(-30vw, 30vh) scale(.9); } }
@keyframes od-drift-c { to { transform: translate(-20vw, -30vh) scale(1.2); } }
html[data-skin="overdrive"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(color-mix(in oklab, var(--ink) 16%, transparent) 1px, transparent 1.5px) 0 0 / 7px 7px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, transparent 30%, #000 100%); mask-image: radial-gradient(ellipse at 50% 40%, transparent 30%, #000 100%);
}
html[data-skin="overdrive"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / .022) 0 1px, transparent 1px 3px);
}
@media (prefers-color-scheme: light) { html[data-skin="overdrive"] body::after { background: repeating-linear-gradient(to bottom, rgb(10 10 11 / .025) 0 1px, transparent 1px 3px); } }
.od-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; width: 100vw; height: 100vh; }

/* ---------- HUD ---------- */
.od-hud { position: fixed; inset: 0; z-index: 95; pointer-events: none; font: 500 10px/1 "FX Mono", monospace; letter-spacing: .16em; color: var(--a-ink); text-transform: uppercase; }
.od-hud .c { position: absolute; width: 18px; height: 18px; border: 0 solid var(--a-ink); }
.od-hud .c1 { top: 10px; left: 10px; border-width: 2px 0 0 2px; } .od-hud .c2 { top: 10px; right: 10px; border-width: 2px 2px 0 0; }
.od-hud .c3 { bottom: 10px; left: 10px; border-width: 0 0 2px 2px; } .od-hud .c4 { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; }
.od-hud .xy { position: absolute; left: 36px; bottom: 15px; color: var(--muted); }
.od-hud .stage-no { position: absolute; right: 36px; bottom: 15px; display: flex; gap: 10px; align-items: center; }
.od-hud .stage-no b { font-weight: 700; color: var(--ink); }
.od-hud .side { position: absolute; left: 15px; top: 50%; translate: 0 -50%; writing-mode: vertical-rl; rotate: 180deg; color: var(--muted); font-family: "FX Mono", "FX Dot", monospace; }
/* The Latin text reads bottom to top; the Japanese stands upright and reads top to bottom. */
.od-hud .side .jp { display: inline-block; rotate: 180deg; font-family: "FX Dot", monospace; letter-spacing: .12em; }
.od-hud .gauge { position: absolute; right: 14px; top: 50%; translate: 0 -50%; display: grid; gap: 3px; }
.od-hud .gauge i { display: block; width: 6px; height: 10px; background: var(--line); }
.od-hud .gauge i.on { background: var(--a-ink); box-shadow: 0 0 8px color-mix(in oklab, var(--a) 60%, transparent); }
.od-progress { position: fixed; top: 0; left: 0; z-index: 96; height: 3px; width: 100%; transform-origin: 0 0; scale: var(--p, 0) 1; background: linear-gradient(90deg, var(--v), var(--m), var(--c), var(--a)); pointer-events: none; }

/* ---------- Cursor ---------- */
html.od-cursor-on[data-skin="overdrive"], html.od-cursor-on[data-skin="overdrive"] * { cursor: none !important; }
.od-dot, .od-ring { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; }
.od-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--a); box-shadow: 0 0 0 1.5px #0a0a0b; }
.od-ring {
  --r: var(--a-ink); width: 34px; height: 34px;
  background:
    linear-gradient(var(--r) 0 0) top left / 10px 2px no-repeat, linear-gradient(var(--r) 0 0) top left / 2px 10px no-repeat,
    linear-gradient(var(--r) 0 0) top right / 10px 2px no-repeat, linear-gradient(var(--r) 0 0) top right / 2px 10px no-repeat,
    linear-gradient(var(--r) 0 0) bottom left / 10px 2px no-repeat, linear-gradient(var(--r) 0 0) bottom left / 2px 10px no-repeat,
    linear-gradient(var(--r) 0 0) bottom right / 10px 2px no-repeat, linear-gradient(var(--r) 0 0) bottom right / 2px 10px no-repeat;
  transition: width .18s cubic-bezier(.2, 1.3, .4, 1), height .18s cubic-bezier(.2, 1.3, .4, 1), opacity .2s;
}
.od-ring.lock { --r: var(--m); }
.od-ring::after { content: attr(data-label); position: absolute; left: 0; top: -15px; font: 700 9px/1 "FX Mono", monospace; letter-spacing: .2em; color: var(--m); opacity: 0; transition: opacity .15s; }
.od-ring.lock::after { opacity: 1; }

/* ---------- Boot sequence ---------- */
.od-boot { position: fixed; inset: 0; z-index: 10000; background: #050506; color: #b6ff3b; display: grid; place-items: center; overflow: hidden; font: 500 clamp(11px, 1.5vw, 15px)/1.9 "FX Mono", "FX Dot", monospace; letter-spacing: .08em; cursor: pointer; }
.od-boot .in { width: min(640px, 86vw); }
.od-boot p { margin: 0; white-space: pre; overflow: hidden; opacity: 0; animation: od-boot-line .01s steps(1) forwards; }
.od-boot p b { color: #fff; font-weight: 700; }
.od-boot p:nth-child(1) { color: #fff; animation-delay: .05s; } .od-boot p:nth-child(2) { animation-delay: .22s; }
.od-boot p:nth-child(3) { animation-delay: .36s; } .od-boot p:nth-child(4) { animation-delay: .5s; }
.od-boot p:nth-child(5) { animation-delay: .64s; } .od-boot p:nth-child(6) { animation-delay: .78s; }
.od-boot p:nth-child(7) { animation-delay: .92s; }
.od-boot .bar { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; margin: 18px 0; padding: 3px; border: 1px solid #b6ff3b; }
.od-boot .bar i { height: 12px; background: #1a1a1d; animation: od-boot-seg .01s steps(1) forwards; }
.od-boot .start { margin-top: 10px; text-align: center; font: 400 clamp(14px, 2.4vw, 22px)/1 "FX Press", monospace; color: #fff; opacity: 0; animation: od-boot-line .01s steps(1) 1.5s forwards, od-blink .3s steps(1) 1.5s 4; }
.od-boot .kana { position: absolute; top: 24px; right: 28px; writing-mode: vertical-rl; font: 400 clamp(18px, 3vw, 30px)/1 "FX Dot", monospace; color: #6b2bff; letter-spacing: .1em; }
.od-boot .w { position: absolute; top: -20%; bottom: -20%; width: 70vw; left: -80vw; transform: skewX(-18deg); animation: od-wipe .55s cubic-bezier(.7, 0, .3, 1) forwards; }
.od-boot .w1 { background: #6b2bff; animation-delay: 1.9s; } .od-boot .w2 { background: #b6ff3b; animation-delay: 1.98s; } .od-boot .w3 { background: #0a0a0b; animation-delay: 2.06s; }
.od-boot.out { animation: od-boot-out .35s ease-in 2.4s forwards; }
.od-boot.skip { animation: od-boot-out .2s ease-in forwards; }
@keyframes od-boot-line { to { opacity: 1; } }
@keyframes od-boot-seg { to { background: #b6ff3b; } }
@keyframes od-wipe { to { left: 130vw; } }
@keyframes od-boot-out { to { opacity: 0; visibility: hidden; } }
@keyframes od-blink { 50% { opacity: 0; } }

/* ---------- Header ---------- */
html[data-skin="overdrive"] .top {
  position: sticky; top: 0; z-index: 80; margin: 0 calc(50% - 50vw); padding: 14px calc(50vw - 50%);
  background: color-mix(in oklab, var(--bg) 93%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
}
html[data-skin="overdrive"] .top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--v), var(--a), transparent); }
html[data-skin="overdrive"] .mark { font: 700 13px/1 "FX Mono", monospace; letter-spacing: .2em; text-transform: uppercase; }
html[data-skin="overdrive"] .glyph { position: relative; border-radius: 0; background: var(--v); color: #fff; font: 900 21px/1 "FX Serif", serif; font-stretch: 62.5%; box-shadow: 3px 3px 0 var(--a); }
html[data-skin="overdrive"] .glyph::after { content: ""; position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; background: var(--a); box-shadow: 0 0 0 1.5px var(--bg); animation: od-blink 1.2s steps(1) infinite; }
html[data-skin="overdrive"] .top nav { gap: 6px; }
html[data-skin="overdrive"] .top nav :is(a, .lang-toggle), html[data-skin="overdrive"] .fun-toggle {
  position: relative; padding: 7px 10px; color: var(--ink); font: 600 11.5px/1 "FX Mono", monospace; text-transform: uppercase; letter-spacing: .14em;
  border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent); transition: background .12s, color .12s;
}
html[data-skin="overdrive"] .top nav :is(a, .lang-toggle):hover { background: var(--ink); color: var(--bg); }
html[data-skin="overdrive"] .fun-toggle { margin-left: 6px; background: var(--a); color: #0a0a0b; border-color: var(--a); box-shadow: 3px 3px 0 var(--v); }
html[data-skin="overdrive"] .fun-toggle:hover { color: #0a0a0b; background: #c9ff6b; }

/* ---------- Hero ---------- */
html[data-skin="overdrive"] .hero { padding-top: clamp(40px, 8vw, 96px); padding-bottom: 0; }
html[data-skin="overdrive"] .hero .fx-deco::before {
  content: "ファンモード"; position: absolute; right: max(18px, calc(50vw - 610px)); top: 40px; writing-mode: vertical-rl;
  font: 400 clamp(26px, 3.4vw, 46px)/1 "FX Dot", monospace; letter-spacing: .12em; color: var(--v-text); opacity: .9;
}
html[data-skin="overdrive"] .hero .fx-deco::after {
  content: "VIDEO  VOICE  BLUE TEAM  MUSIC  OCR  OPEN SOURCE  VIDEO  VOICE  BLUE TEAM  MUSIC  OCR  OPEN SOURCE  "; position: absolute; left: 0; top: 30%; white-space: pre;
  font: 900 clamp(7rem, 18vw, 17rem)/1 "FX Serif", serif; font-stretch: 62.5%; color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--ink) 9%, transparent);
  animation: od-slide 80s linear infinite; /* the giant outline words drift across the hero */
}
@keyframes od-slide { to { translate: -50% 0; } }
html[data-skin="overdrive"] .hero h1 {
  position: relative; isolation: isolate; max-width: 13ch; margin-top: 8px;
  font: 900 clamp(3rem, 7.4vw, 7.4rem)/.86 "FX Serif", serif; font-stretch: 62.5%; letter-spacing: -.005em; text-transform: uppercase; color: var(--ink);
}
html[data-skin="overdrive"] .hero h1::before, html[data-skin="overdrive"] .hero h1::after, html[data-skin="overdrive"] main h2::before {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; white-space: normal;
}
html[data-skin="overdrive"] .hero h1::before { z-index: -1; color: var(--v); translate: .055em .055em; animation: od-jitter 3.4s steps(1) infinite; }
html[data-skin="overdrive"] .hero h1::after { z-index: -2; color: var(--a); translate: -.035em -.03em; }
@media (prefers-color-scheme: light) { html[data-skin="overdrive"] .hero h1::after { color: color-mix(in oklab, var(--a) 70%, #fff); } }
html[data-skin="overdrive"] .hero h1 em {
  font-style: normal; color: transparent;
  background: linear-gradient(95deg, var(--v2), var(--m) 30%, var(--c) 60%, var(--a) 85%, var(--v2)) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text;
}
@media (prefers-color-scheme: light) { html[data-skin="overdrive"] .hero h1 em { background-image: linear-gradient(95deg, #5420d6, #d6006c 30%, #0b6a80 60%, #356a00 85%, #5420d6); } }
@keyframes od-holo { to { background-position: 220% 0; } }
@keyframes od-jitter { 0%, 86%, 100% { translate: .055em .055em; } 88% { translate: .12em -.02em; } 91% { translate: -.06em .08em; } 94% { translate: .09em 0; } }
html[data-skin="overdrive"] .lede { position: relative; max-width: 54ch; margin-top: 36px; padding: 16px 0 16px 22px; font-size: clamp(1.08rem, 1.6vw, 1.26rem); color: var(--text); border-left: 3px solid var(--a-ink); }
html[data-skin="overdrive"] .lede::before { content: "SYS.INTRO // 01"; position: absolute; left: 22px; top: -10px; font: 600 10px/1 "FX Mono", monospace; letter-spacing: .2em; color: var(--a-ink); }

/* Stickers */
html[data-skin="overdrive"] .od-stickers { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.od-sticker {
  position: absolute; pointer-events: auto; touch-action: none; user-select: none; padding: 8px 14px; font: 800 14px/1 "FX Geist", sans-serif; letter-spacing: .01em;
  border: 2px solid #0a0a0b; box-shadow: 4px 4px 0 #0a0a0b; border-radius: 999px; animation: od-bob 3.2s ease-in-out infinite alternate; cursor: grab;
}
.od-sticker:active { cursor: grabbing; }
.od-sticker.s1 { top: 4%; right: 6%; background: #b6ff3b; color: #0a0a0b; rotate: -8deg; }
.od-sticker.s2 { top: 19%; right: 15%; background: #6b2bff; color: #fff; rotate: 6deg; animation-delay: -1s; }
.od-sticker.s3 { top: 33%; right: 2%; background: #ff2e88; color: #0a0a0b; rotate: -3deg; animation-delay: -2s; border-radius: 6px; }
.od-sticker.s5 { top: 60%; right: 6%; background: #22d3ee; color: #0a0a0b; rotate: 7deg; animation-delay: -1.6s; }
.od-sticker.s4 { top: 46%; right: 17%; background: #fff; color: #0a0a0b; rotate: 12deg; animation-delay: -.5s; font: 400 11px/1 "FX Press", monospace; padding: 9px 12px; border-radius: 0; }
@keyframes od-bob { to { translate: 0 -8px; } }

/* Index as a tilted game menu */
html[data-skin="overdrive"] .index { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: center; }
html[data-skin="overdrive"] .index ol { grid-template-columns: 1fr; border: 0; rotate: -4deg; transform-origin: 0 0; padding: 10px 0 34px; gap: 3px; }
html[data-skin="overdrive"] .index li { border: 0; }
html[data-skin="overdrive"] .index li:nth-child(2) { margin-left: 18px; } html[data-skin="overdrive"] .index li:nth-child(3) { margin-left: 36px; }
html[data-skin="overdrive"] .index li:nth-child(4) { margin-left: 54px; } html[data-skin="overdrive"] .index li:nth-child(5) { margin-left: 72px; }
html[data-skin="overdrive"] .index li:nth-child(6) { margin-left: 90px; } html[data-skin="overdrive"] .index li:nth-child(7) { margin-left: 108px; }
html[data-skin="overdrive"] .index li:nth-child(8) { margin-left: 126px; } html[data-skin="overdrive"] .index li:nth-child(9) { margin-left: 144px; } html[data-skin="overdrive"] .index li:nth-child(10) { margin-left: 162px; }
html[data-skin="overdrive"] .index a { position: relative; isolation: isolate; display: inline-flex; align-items: baseline; gap: 12px; width: fit-content; padding: 5px 18px 7px 10px; outline-offset: 6px; }
html[data-skin="overdrive"] .index .n { font: 700 12px/1 "FX Mono", monospace; color: var(--v-text); }
html[data-skin="overdrive"] .index .t { gap: 0; white-space: nowrap; font: 900 clamp(1.5rem, 3vw, 2.5rem)/.95 "FX Serif", serif; font-stretch: 62.5%; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
html[data-skin="overdrive"] .index .t::before { display: none; }
html[data-skin="overdrive"] .index .d { font: 600 10.5px/1.2 "FX Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: left; }
html[data-skin="overdrive"] .index a::before, html[data-skin="overdrive"] .index a::after { content: ""; position: absolute; pointer-events: none; }
html[data-skin="overdrive"] .index a::before { z-index: -1; inset: -2px -8px -2px -6px; background: var(--a); clip-path: polygon(0 14%, 100% 0, 97% 100%, 3% 84%); scale: 0 1; transform-origin: left; transition: scale .16s cubic-bezier(.2, 1.3, .4, 1); }
html[data-skin="overdrive"] .index a::after { z-index: -2; inset: -14px -32px -12px -22px; background: var(--v); clip-path: polygon(3% 34%, 28% 0, 33% 22%, 100% 8%, 86% 50%, 100% 94%, 42% 78%, 30% 100%, 20% 72%, 0 90%); scale: 0; rotate: 4deg; transition: scale .22s cubic-bezier(.2, 1.4, .4, 1); }
html[data-skin="overdrive"] .index a:is(:hover, :focus-visible, .on)::before { scale: 1 1; }
html[data-skin="overdrive"] .index a:is(:hover, :focus-visible, .on)::after { scale: 1; }
html[data-skin="overdrive"] .index a:is(:hover, :focus-visible, .on) :is(.t, .n, .d) { color: #0a0a0b; }

html[data-skin="overdrive"] .od-pose { display: grid; position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; justify-self: center; perspective: 900px; }
.od-pose > div { grid-area: 1 / 1; position: relative; display: none; place-items: center; isolation: isolate; cursor: pointer; }
.od-pose > div.on { display: grid; animation: od-pose-in .42s cubic-bezier(.2, 1.3, .4, 1) both; }
.od-pose > div::before {
  content: ""; position: absolute; z-index: -1; inset: 6%; background: var(--v); rotate: 8deg;
  clip-path: polygon(50% 0, 58% 30%, 82% 8%, 72% 38%, 100% 34%, 76% 54%, 96% 78%, 66% 70%, 62% 100%, 48% 74%, 26% 96%, 30% 66%, 2% 72%, 22% 50%, 0 26%, 30% 32%, 22% 4%);
}
.od-pose > div::after {
  content: ""; position: absolute; z-index: -1; inset: 6%; rotate: 8deg; background-image: radial-gradient(circle, #b6ff3b 0 1.6px, transparent 2px); background-size: 10px 10px;
  clip-path: polygon(50% 0, 58% 30%, 82% 8%, 72% 38%, 100% 34%, 76% 54%, 96% 78%, 66% 70%, 62% 100%, 48% 74%, 26% 96%, 30% 66%, 2% 72%, 22% 50%, 0 26%, 30% 32%, 22% 4%);
  -webkit-mask-image: linear-gradient(135deg, transparent 40%, #000); mask-image: linear-gradient(135deg, transparent 40%, #000);
}
.od-pose > div.on::before { animation: od-burst .4s cubic-bezier(.2, 1.3, .4, 1) both; }
.od-pose img { width: 58%; height: auto; filter: drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(12px 12px 0 #b6ff3b); animation: od-idle 2.4s ease-in-out .4s infinite alternate; }
.od-pose img.shot-pose { width: 92%; border: 6px solid #fff; filter: drop-shadow(12px 12px 0 #b6ff3b); rotate: -5deg; }
.od-pose b.num { font: 900 clamp(7rem, 15vw, 12rem)/1 "FX Serif", serif; font-stretch: 62.5%; color: #fff; text-shadow: .05em .05em 0 #b6ff3b; rotate: -8deg; animation: od-idle 2.4s ease-in-out .4s infinite alternate; }
.od-pose .say {
  position: absolute; z-index: 2; top: 2%; left: -6%; max-width: 72%; padding: 10px 18px 22px 14px; background: #fff; color: #0a0a0b;
  font: 900 clamp(16px, 1.8vw, 24px)/1 "FX Serif", serif; font-stretch: 62.5%; text-transform: uppercase; letter-spacing: .01em;
  clip-path: polygon(0 8%, 100% 0, 94% 78%, 40% 82%, 22% 100%, 26% 84%, 4% 90%); rotate: -4deg;
}
@keyframes od-pose-in { 0% { opacity: 0; rotate: y 80deg; scale: .82; translate: -30px 0; } 55% { opacity: 1; rotate: y -10deg; scale: 1.06; translate: 6px 0; } 100% { opacity: 1; rotate: y 0deg; scale: 1; translate: 0 0; } }
@keyframes od-burst { 0% { scale: .4; rotate: -30deg; } 60% { scale: 1.1; rotate: 14deg; } 100% { scale: 1; rotate: 8deg; } }
@keyframes od-idle { from { translate: 0 0; } to { translate: 0 -8px; } }

/* Hazard band with a crawl, closing the hero */
html[data-skin="overdrive"] .od-band {
  display: block; position: relative; margin: clamp(40px, 6vw, 72px) calc(50% - 50vw) 0; height: 44px; overflow: hidden;
  background: repeating-linear-gradient(-45deg, var(--a) 0 16px, #0a0a0b 16px 32px); border-block: 2px solid #0a0a0b;
}
.od-band span {
  position: absolute; top: 7px; bottom: 7px; left: 0; display: flex; align-items: center; padding: 0 16px; white-space: nowrap; background: #0a0a0b; color: var(--a);
  font: 700 13px/1 "FX Mono", "FX Mincho", monospace; letter-spacing: .26em; animation: od-slide 40s linear infinite;
}

/* ---------- Projects ---------- */
html[data-skin="overdrive"] .project, html[data-skin="overdrive"] .upstream { border-top: 0; padding-top: 0; }
html[data-skin="overdrive"] .od-card {
  display: flex; align-items: center; gap: 18px; grid-column: 1 / -1; order: -2; position: relative; overflow: hidden; height: 58px; padding: 0 20px;
  margin: 0 calc(50% - 50vw) clamp(16px, 3vw, 36px); background: #0a0a0b; color: #f5f5f7; border-block: 1px solid #2c2b31;
  font: 600 11px/1 "FX Mono", monospace; letter-spacing: .2em; text-transform: uppercase;
}
html[data-skin="overdrive"] .upstream .od-card { margin-bottom: 0; }
.od-card b { font: 800 30px/1 "FX Mincho", serif; color: #ff3b3b; letter-spacing: 0; }
.od-card .ep { color: #b6ff3b; }
.od-card .rule { flex: 1; height: 1px; background: linear-gradient(90deg, #6b2bff, transparent); }
.od-card .seg { display: flex; gap: 3px; } .od-card .seg i { width: 7px; height: 12px; background: #2c2b31; } .od-card .seg i.on { background: #b6ff3b; }
.od-card .hz { position: absolute; right: 0; top: 0; bottom: 0; width: 90px; background: repeating-linear-gradient(-45deg, #b6ff3b 0 10px, transparent 10px 20px); -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
html[data-skin="overdrive"] .od-card .inner { display: flex; align-items: center; gap: 18px; width: 100%; max-width: 1064px; margin: 0 auto; }

html[data-skin="overdrive"] .label {
  display: inline-block; padding: 6px 12px; background: var(--a); color: #0a0a0b; font: 700 11.5px/1 "FX Mono", monospace; letter-spacing: .14em; text-transform: uppercase;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
html[data-skin="overdrive"] main h2, html[data-skin="overdrive"] .upstream h2 {
  position: relative; isolation: isolate; font: 900 clamp(2.9rem, 6.2vw, 5.6rem)/.86 "FX Serif", serif; font-stretch: 62.5%; text-transform: uppercase; letter-spacing: 0; color: var(--ink);
}
html[data-skin="overdrive"] main h2::before { z-index: -1; color: var(--v); translate: .05em .05em; }
html[data-skin="overdrive"] .head { gap: 18px; }
html[data-skin="overdrive"] .head img { filter: drop-shadow(4px 4px 0 var(--v)); }
html[data-skin="overdrive"] .tagline { font: 700 1.28rem/1.35 "FX Geist", sans-serif; color: var(--ink); }
html[data-skin="overdrive"] .copy .fact {
  position: relative; margin: 26px 0; padding: 38px 18px 16px; border: 0; background: var(--a-ink); color: var(--ink); font: 13px/1.6 "FX Mono", monospace; isolation: isolate;
  clip-path: var(--cut);
}
html[data-skin="overdrive"] .copy .fact::before { content: ""; position: absolute; z-index: -1; inset: 1.5px; background: var(--surface); clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); }
html[data-skin="overdrive"] .copy .fact::after {
  content: "SYS / NOTE"; position: absolute; left: 1.5px; right: 1.5px; top: 1.5px; height: 24px; display: flex; align-items: center; padding-left: 18px;
  font: 700 10px/1 "FX Mono", monospace; letter-spacing: .24em; color: #0a0a0b;
  background: linear-gradient(90deg, var(--a) 0 120px, transparent 120px), repeating-linear-gradient(45deg, color-mix(in oklab, var(--v) 70%, transparent) 0 3px, transparent 3px 8px);
}
html[data-skin="overdrive"] .stack { gap: 8px; }
html[data-skin="overdrive"] .stack li { padding: 7px 10px; border: 1.5px solid var(--edge); border-radius: 0; background: var(--surface); color: var(--ink); font: 11px/1 "FX Silk", monospace; box-shadow: 3px 3px 0 var(--v); }
html[data-skin="overdrive"] .btn {
  display: inline-block; padding: 13px 20px; border-radius: 0; background: var(--a); color: #0a0a0b; font: 800 13px/1 "FX Mono", monospace; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 5px 5px 0 var(--v); border: 2px solid #0a0a0b; transition: box-shadow .15s, background .15s, translate .2s cubic-bezier(.2, 1.3, .4, 1);
}
html[data-skin="overdrive"] .btn:hover { background: #c9ff6b; box-shadow: 8px 8px 0 var(--m); }
html[data-skin="overdrive"] .btn:active { box-shadow: 2px 2px 0 var(--v); }
html[data-skin="overdrive"] .more { color: var(--v-text); font: 600 14px/1.4 "FX Mono", monospace; text-decoration: none; background: linear-gradient(90deg, var(--v), var(--m), var(--a)) 0 100% / 100% 2px no-repeat; padding-bottom: 3px; transition: background-size .2s; }
html[data-skin="overdrive"] .more:hover { background-size: 100% 100%; color: #fff; }

/* Stages become chrome windows that tilt */
html[data-skin="overdrive"] .stage {
  --rx: 0deg; --ry: 0deg; overflow: visible; border-radius: 14px; border: 2px solid var(--edge); padding-top: calc(32px + clamp(18px, 3.4vw, 40px));
  background: radial-gradient(color-mix(in oklab, var(--ink) 13%, transparent) 1px, transparent 1.5px) 0 0 / 6px 6px, linear-gradient(160deg, color-mix(in oklab, var(--accent) 22%, var(--surface)), var(--surface) 70%);
  box-shadow: 10px 10px 0 var(--hard); transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
  transform-style: preserve-3d;
}
html[data-skin="overdrive"] .stage:hover { box-shadow: 14px 14px 0 var(--hard), 0 30px 80px -20px var(--glow); }
html[data-skin="overdrive"] .stage::before {
  content: attr(data-fx-name) ".app"; position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 32px; display: flex; align-items: center; padding: 0 12px; border-radius: 12px 12px 0 0;
  font: 11px/1 "FX Silk", monospace; letter-spacing: .06em; color: #fff; text-shadow: 1px 1px 0 #000; background: var(--steps); border-bottom: 2px solid var(--edge);
}
html[data-skin="overdrive"] .stage::after {
  content: ""; position: absolute; z-index: 4; top: 9px; right: 12px; width: 70px; height: 12px;
  background: radial-gradient(farthest-side, #b6ff3b 92%, transparent) right / 20px 12px no-repeat, radial-gradient(farthest-side, #fff 92%, transparent) center / 20px 12px no-repeat, radial-gradient(farthest-side, #fff 92%, transparent) left / 20px 12px no-repeat;
  filter: drop-shadow(0 0 0 #000) drop-shadow(1px 1px 0 #000);
}
.od-sheen { position: absolute; z-index: 3; inset: 0; border-radius: 12px; pointer-events: none; display: none; mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .55), transparent 40%), linear-gradient(115deg, transparent 30%, rgb(182 255 59 / .35) 45%, rgb(255 46 136 / .3) 55%, transparent 70%) var(--mx, 50%) 0 / 300% 100%; }
html[data-skin="overdrive"] .stage:hover .od-sheen { display: block; }
html[data-skin="overdrive"] .stage :is(.shot, .window, .term, .screen, .diff) { border: 2px solid var(--edge); border-radius: 8px; box-shadow: 6px 6px 0 rgb(0 0 0 / .55); }
html[data-skin="overdrive"] .said li { border-radius: 0; border: 2px solid var(--edge); background: var(--surface); color: var(--ink); font: 600 15px/1.2 "FX Geist", sans-serif; box-shadow: 4px 4px 0 var(--v); clip-path: none; }
html[data-skin="overdrive"] .said li::before { border-radius: 0; background: var(--a); box-shadow: 0 0 0 1px #0a0a0b; }
html[data-skin="overdrive"] .diff { border-radius: 0; border: 2px solid var(--edge); background: var(--sunken); box-shadow: 10px 10px 0 var(--hard); }
html[data-skin="overdrive"] .upstream .links .label {
  background: none; color: var(--m) !important; border: 3px solid var(--m); padding: 8px 12px; rotate: -8deg; clip-path: none; font: 800 12px/1 "FX Mono", monospace; letter-spacing: .2em;
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--m) 30%, transparent); mask: radial-gradient(circle at 30% 40%, #000 60%, rgb(0 0 0 / .75) 61%);
}

/* ---------- Footer ---------- */
html[data-skin="overdrive"] footer { border-top: 0; padding-top: 0; align-items: center; }
html[data-skin="overdrive"] .od-endroll { display: block; flex: 0 0 auto; width: 100vw; margin: 0 calc(50% - 50vw) 18px; overflow: hidden; border-block: 2px solid var(--edge); background: var(--v); }
html[data-skin="overdrive"] footer .od-thanks { flex-basis: 100%; margin-top: 10px; }
.od-endroll span { display: inline-block; padding: 14px 0; white-space: pre; font: 900 clamp(2.4rem, 6vw, 5rem)/1 "FX Serif", serif; font-stretch: 62.5%; color: #fff; text-transform: uppercase; animation: od-slide 22s linear infinite; }
.od-endroll span em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px #fff; }
html[data-skin="overdrive"] footer > span { font: 700 13px/1 "FX Mono", monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
html[data-skin="overdrive"] footer .od-thanks { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font: 10px/1.6 "FX Press", monospace; color: var(--a-ink); }
html[data-skin="overdrive"] footer .od-thanks i { font-style: normal; color: var(--muted); font-family: "FX Mono", monospace; letter-spacing: .3em; }
html[data-skin="overdrive"] footer .od-thanks b { font-weight: 400; animation: od-blink 1.1s steps(1) infinite; }
html[data-skin="overdrive"] footer .od-continue { font: inherit; color: inherit; background: none; border: 2px solid currentColor; padding: 8px 12px; cursor: pointer; box-shadow: 4px 4px 0 var(--v); transition: translate .12s, box-shadow .12s; }
html[data-skin="overdrive"] footer .od-continue:hover { background: var(--a); color: #0a0a0b; border-color: #0a0a0b; }
html[data-skin="overdrive"] footer .od-continue:active { translate: 4px 4px; box-shadow: 0 0 0 var(--v); }
html[data-skin="overdrive"] footer .od-continue:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.od-thanks { display: none; }

/* ---------- Reveal ---------- */
@keyframes od-rise { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }
@keyframes od-slam { 0% { opacity: 0; scale: 1.6; rotate: -6deg; } 55% { opacity: 1; scale: .95; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes od-open { 0% { opacity: 0; scale: .3 .05; } 45% { opacity: 1; scale: 1.02 .08; } 100% { opacity: 1; scale: 1 1; } }
@keyframes od-card-in { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
html.fx-anim[data-skin="overdrive"] :is(.project, .upstream):not(.fx-in) :is(.copy, .stage, .diff, .od-card) { opacity: 0; }
html.fx-anim[data-skin="overdrive"] :is(.project, .upstream).fx-in .od-card { animation: od-card-in .45s steps(9) both; }
html.fx-anim[data-skin="overdrive"] :is(.project, .upstream).fx-in .copy { animation: od-rise .6s cubic-bezier(.16, 1, .3, 1) .12s both; }
html.fx-anim[data-skin="overdrive"] :is(.project, .upstream).fx-in h2 { animation: od-slam .4s cubic-bezier(.2, 1.3, .4, 1) .22s both; }
html.fx-anim[data-skin="overdrive"] :is(.project, .upstream).fx-in :is(.stage, .diff) { animation: od-open .6s cubic-bezier(.2, 1.3, .4, 1) .2s both; }
html.od-intro[data-skin="overdrive"] .hero h1 { animation: od-slam .5s cubic-bezier(.2, 1.3, .4, 1) both; }
html.od-intro[data-skin="overdrive"] .index li { animation: od-dash .3s cubic-bezier(.2, 1.2, .4, 1) both; }
html.od-intro[data-skin="overdrive"] .index li:nth-child(n) { animation-delay: calc(var(--i, 0) * 45ms + .25s); }
@keyframes od-dash { 0% { opacity: 0; translate: -90px 0; } 70% { opacity: 1; translate: 8px 0; } 100% { opacity: 1; translate: 0 0; } }

/* ---------- Hyper mode (the code from old games) ---------- */
/* Kept light on purpose: only small elements move, nothing blurs or filters a full-screen layer. */
html.od-hyper .od-aurora i { animation-duration: 4s; }
html.od-hyper :is(.hero h1, .od-sticker, .od-hud) { animation: od-shake .4s steps(4) 2; }
@keyframes od-shake { 0%, 100% { translate: 0 0; } 25% { translate: -6px 3px; } 50% { translate: 5px -3px; } 75% { translate: -3px 2px; } }
html.od-hyper[data-skin="overdrive"] .hero h1 .od-glitch { animation: od-rgb .5s steps(1) infinite; }
.od-confetti { position: fixed; z-index: 9998; top: -20px; width: 10px; height: 10px; pointer-events: none; animation: od-fall var(--t, 2.4s) cubic-bezier(.3, .2, .6, 1) forwards; }
@keyframes od-fall { to { translate: var(--dx, 0) 110vh; rotate: var(--r, 540deg); } }

/* ---------- Small screens ---------- */
@media (max-width: 959px) {
  html[data-skin="overdrive"] .stage { transform: none; }
}
@media (max-width: 759px) {
  html[data-skin="overdrive"] .index { grid-template-columns: 1fr; }
  html[data-skin="overdrive"] .od-pose { display: none; }
  html[data-skin="overdrive"] .index ol { rotate: -3deg; }
  html[data-skin="overdrive"] .index li { margin-left: 0 !important; }
  html[data-skin="overdrive"] .index a { flex-wrap: wrap; row-gap: 4px; }
  html[data-skin="overdrive"] .index .d { flex-basis: 100%; margin: 0; padding-left: 28px; }
  html[data-skin="overdrive"] .od-stickers { display: none; }
  html[data-skin="overdrive"] .hero .fx-deco::before { top: 16px; font-size: 22px; opacity: .55; }
  .od-hud .xy, .od-hud .side, .od-hud .gauge, .od-hud .stage-no { display: none; }
  html[data-skin="overdrive"] .od-card { gap: 12px; padding: 0 14px; } html[data-skin="overdrive"] .od-card .seg, html[data-skin="overdrive"] .od-card .rule { display: none; }
}
@media (max-width: 520px) {
  html[data-skin="overdrive"] .top nav :is(a, .lang-toggle), html[data-skin="overdrive"] .fun-toggle { padding: 6px 7px; font-size: 10px; letter-spacing: .08em; }
  html[data-skin="overdrive"] .mark { font-size: 0; gap: 0; } html[data-skin="overdrive"] .mark .glyph { font-size: 21px; }
  html[data-skin="overdrive"] .fun-switch { display: none; }
}

/* ---------- Reduced motion: keep the look, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="overdrive"] *, html[data-skin="overdrive"] *::before, html[data-skin="overdrive"] *::after { animation: none !important; transition: none !important; }
  html[data-skin="overdrive"] .stage { transform: none; }
}

/* =====================================================================
   Overdrive and the dock together
   ===================================================================== */
.od-pose, .od-card, .od-band, .od-stickers, .od-endroll, .od-thanks { display: none; }
@media (max-width: 1179px) { .od-hud .xy, .od-hud .stage-no { display: none; } }
@media (max-width: 430px) {
  .fx-dock button { padding: 9px 6px; font-size: 12px; }
  .fx-dock { padding: 5px; }
}

/* =====================================================================
   EXTRAS · clickable windows, sliding menu selection, transitions,
   click bursts, achievements and the sound switch
   ===================================================================== */

/* ---------- Each skin names its click burst ---------- */
html[data-fun] { --fx-click: pixels; }
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) { --fx-click: sparks; }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) { --fx-click: stars; }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) { --fx-click: hex; }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) { --fx-click: neon; }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) { --fx-click: coins; }
html[data-skin="overdrive"] { --fx-click: pixels; }

/* ---------- Project windows open the project ---------- */
.fx-open { display: none; }
html[data-fun] .fx-open { display: block; position: absolute; inset: 0; z-index: 5; border-radius: inherit; cursor: pointer; }
html[data-fun] .fx-open::after {
  content: "OPEN ON GITHUB ↗"; position: absolute; right: 14px; bottom: 12px; padding: 8px 12px; white-space: nowrap;
  font: 700 11px/1 "FX Mono", monospace; letter-spacing: .12em; color: #fff; background: #0a0a0b; border: 1.5px solid #fff;
  opacity: 0; translate: 0 8px; transition: opacity .18s, translate .18s cubic-bezier(.2, 1.3, .4, 1); pointer-events: none;
}
html[data-fun] .stage:hover .fx-open::after { opacity: 1; translate: 0 0; }
html[data-fun] .stage video[controls] { position: relative; z-index: 6; }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .fx-open::after { border: 0; background: var(--p-red); color: #fff; font: italic 900 13px/1 "FX Geist", sans-serif; letter-spacing: .06em; clip-path: polygon(0 0, 100% 10%, 97% 100%, 2% 90%); }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .fx-open::after { border: 0; background: var(--e-or); color: #000; }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .fx-open::after { border: 0; background: var(--n-m); color: #0a0a0b; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .fx-open::after { border: 0; background: var(--x-a); color: var(--x-on-a); font: 10px/1.2 "FX Press", monospace; letter-spacing: 0; box-shadow: 0 0 0 3px var(--ink), 4px 4px 0 3px var(--ink); }
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .fx-open::after { border: 1.5px solid #1d0a5c; border-radius: 999px; background: linear-gradient(180deg, #8d63ff, #5a26e6 48%, #4513c9 52%, #7a4dff); font: 11px/1 "FX Silk", monospace; letter-spacing: .04em; }
html[data-skin="overdrive"] .fx-open::after { border: 2px solid #0a0a0b; background: var(--a); color: #0a0a0b; box-shadow: 4px 4px 0 var(--v); }
html[data-skin="overdrive"] :is(.project, .upstream) { scroll-margin-top: 64px; }

/* ---------- Menu selection that slides from line to line ---------- */
.fx-sel { display: none; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index ol, html[data-skin="overdrive"] .index ol { position: relative; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index li, html[data-skin="overdrive"] .index li { position: relative; z-index: 1; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index a::before, :is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index a::after,
html[data-skin="overdrive"] .index a::before, html[data-skin="overdrive"] .index a::after { content: none; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index .fx-sel, html[data-skin="overdrive"] .index .fx-sel {
  display: block; position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; pointer-events: none;
  transition: translate .3s cubic-bezier(.2, 1.25, .4, 1), width .3s cubic-bezier(.2, 1.25, .4, 1), height .3s cubic-bezier(.2, 1.25, .4, 1);
}
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .index .fx-sel { --sel-band: var(--p-box); --sel-splash: var(--p-red); }
html[data-skin="overdrive"] .index .fx-sel { --sel-band: var(--a); --sel-splash: var(--v); }
.fx-sel::before, .fx-sel::after { content: ""; position: absolute; }
.fx-sel::before { z-index: 1; inset: -2px -8px -2px -6px; background: var(--sel-band); clip-path: polygon(0 14%, 100% 0, 97% 100%, 3% 84%); }
.fx-sel::after {
  z-index: 0; inset: -14px -32px -12px -22px; rotate: 4deg; background: var(--sel-splash);
  clip-path: polygon(3% 34%, 28% 0, 33% 22%, 100% 8%, 86% 50%, 100% 94%, 42% 78%, 30% 100%, 20% 72%, 0 90%);
}
.fx-sel.pop::before { animation: fx-sel-band .24s cubic-bezier(.2, 1.3, .4, 1); }
.fx-sel.pop::after { animation: fx-sel-splash .34s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes fx-sel-band { from { scale: .55 1; } to { scale: 1 1; } }
@keyframes fx-sel-splash { 0% { scale: .3; } 70% { scale: 1.1; } 100% { scale: 1; } }

/* ---------- Slash cover: menu → project, and the Phantom / Overdrive styles ---------- */
.fx-slash { position: fixed; inset: 0; z-index: 10001; pointer-events: none; overflow: hidden; }
.fx-slash i { position: absolute; top: -30%; bottom: -30%; left: -30%; right: -30%; transform: skewX(-14deg); translate: 150% 0; }
.fx-slash i:nth-child(2) { left: 6%; }
.fx-slash i:nth-child(3) { left: 22%; }
.fx-slash i:nth-child(1) { background: var(--s1); animation: fx-sl-in .26s cubic-bezier(.7, 0, .3, 1) forwards; }
.fx-slash i:nth-child(2) { background: var(--s2); animation: fx-sl-in .26s cubic-bezier(.7, 0, .3, 1) .05s forwards; }
.fx-slash i:nth-child(3) { background: var(--s3); animation: fx-sl-in .26s cubic-bezier(.7, 0, .3, 1) .1s forwards; }
.fx-slash .t { position: absolute; left: 4vw; right: 4vw; top: 50%; translate: 0 -50%; display: grid; justify-items: center; gap: 14px; rotate: -6deg; text-align: center; opacity: 0; animation: fx-sl-title .36s cubic-bezier(.2, 1.3, .4, 1) .18s forwards; }
.fx-slash .t b { font: var(--sf); font-size: var(--sz, clamp(3rem, 10vw, 9rem)); line-height: .9; text-transform: uppercase; color: var(--st); text-shadow: .06em .06em 0 var(--ss); overflow-wrap: anywhere; }
.fx-slash .t small { padding: 7px 14px; font: 800 13px/1 "FX Mono", monospace; letter-spacing: .22em; text-transform: uppercase; background: var(--st); color: var(--s3); }
.fx-slash.out i { translate: 0 0; animation: fx-sl-out .3s cubic-bezier(.7, 0, .3, 1) forwards; }
.fx-slash.out i:nth-child(2) { animation-delay: .04s; }
.fx-slash.out i:nth-child(3) { animation-delay: .08s; }
.fx-slash.out .t { opacity: 1; animation: fx-sl-tout .18s ease-in forwards; }
@keyframes fx-sl-in { from { translate: 150% 0; } to { translate: 0 0; } }
@keyframes fx-sl-out { from { translate: 0 0; } to { translate: -150% 0; } }
@keyframes fx-sl-title { 0% { opacity: 0; scale: 1.8; } 60% { opacity: 1; scale: .95; } 100% { opacity: 1; scale: 1; } }
@keyframes fx-sl-tout { to { opacity: 0; scale: .9; } }
.fx-slash[data-k="phantom"] { --s1: #ffffff; --s2: #e60012; --s3: #0a0a0b; --st: #ffffff; --ss: #e60012; --sf: italic 400 1em/1 "FX Anton", sans-serif; --sz: clamp(3rem, 11vw, 10rem); }
.fx-slash[data-k="overdrive"] { --s1: #b6ff3b; --s2: #6b2bff; --s3: #0a0a0b; --st: #ffffff; --ss: #6b2bff; --sf: 900 1em/1 "FX Serif", serif; --sz: clamp(3rem, 11vw, 10rem); }
.fx-slash[data-k="overdrive"] .t b, .fx-slash[data-k="alert"] .t b { font-stretch: 62.5%; }
.fx-slash[data-k="alert"] { --s1: #ffffff; --s2: #ff6a00; --s3: #000000; --st: #ffffff; --ss: #e3000f; --sf: 900 1em/1 "FX Serif", serif; --sz: clamp(3rem, 11vw, 10rem); }
.fx-slash[data-k="neon"] { --s1: #22d3ee; --s2: #ff2e88; --s3: #08051a; --st: #ffffff; --ss: #ff2e88; --sf: 900 1em/1 "FX Orbitron", sans-serif; --sz: clamp(2rem, 6.4vw, 6rem); }
.fx-slash[data-k="y2k"] { --s1: #22d3ee; --s2: #b49cff; --s3: #2a0f73; --st: #ffffff; --ss: #6b2bff; --sf: 400 1em/1 "FX Michroma", sans-serif; --sz: clamp(1.8rem, 5.8vw, 5.4rem); }
.fx-slash[data-k="pixel"] { --s1: #ffec27; --s2: #ff004d; --s3: #111327; --st: #fff1e8; --ss: #ff004d; --sf: 400 1em/1.2 "FX Press", monospace; --sz: clamp(1.4rem, 4.6vw, 4rem); }

/* ---------- Neon: glitch slices ---------- */
.fx-glitch { position: fixed; inset: 0; z-index: 10001; pointer-events: none; display: grid; grid-template-rows: repeat(8, 1fr); overflow: hidden; }
.fx-glitch i { background: #08051a; translate: var(--o) 0; animation: fx-gl-in .24s steps(4) forwards; animation-delay: calc(var(--n) * 18ms); }
.fx-glitch i:nth-child(3n) { background: #ff2e88; } .fx-glitch i:nth-child(4n) { background: #22d3ee; } .fx-glitch i:nth-child(5n) { background: #110b2c; }
.fx-glitch.out i { translate: 0 0; animation: fx-gl-out-a .26s steps(4) forwards; animation-delay: calc(var(--n) * 14ms); }
.fx-glitch.out i:nth-child(even) { animation-name: fx-gl-out-b; }
.fx-glitch .t { position: absolute; inset: 0; display: grid; place-items: center; font: 900 clamp(2.6rem, 10vw, 8rem)/1 "FX Orbitron", sans-serif; text-transform: uppercase; color: #fff; text-shadow: -.05em 0 #22d3ee, .05em 0 #ff2e88; opacity: 0; animation: fx-gl-t .3s steps(3) .12s forwards; }
.fx-glitch.out .t { opacity: 1; animation: fx-sl-tout .12s steps(2) forwards; }
@keyframes fx-gl-in { to { translate: 0 0; } }
@keyframes fx-gl-out-a { to { translate: 101% 0; } }
@keyframes fx-gl-out-b { to { translate: -101% 0; } }
@keyframes fx-gl-t { 0% { opacity: 0; translate: -12px 0; } 50% { opacity: 1; translate: 9px 0; } 100% { opacity: 1; translate: 0 0; } }

/* ---------- Mix: colour bars ---------- */
.fx-bars { position: fixed; inset: 0; z-index: 10001; pointer-events: none; display: grid; grid-template-columns: repeat(7, 1fr); overflow: hidden; }
.fx-bars i { translate: 0 -102%; animation: fx-bars-in .3s cubic-bezier(.7, 0, .3, 1) forwards; animation-delay: calc(var(--n) * 24ms); }
.fx-bars i:nth-child(1) { background: #c0c0c0; } .fx-bars i:nth-child(2) { background: #c0c000; } .fx-bars i:nth-child(3) { background: #00c0c0; }
.fx-bars i:nth-child(4) { background: #00c000; } .fx-bars i:nth-child(5) { background: #c000c0; } .fx-bars i:nth-child(6) { background: #c00000; } .fx-bars i:nth-child(7) { background: #0000c0; }
.fx-bars.out i { translate: 0 0; animation: fx-bars-out .32s cubic-bezier(.7, 0, .3, 1) forwards; animation-delay: calc(var(--n) * 24ms); }
.fx-bars .t { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 14px 26px; background: #0a0a0b; color: #fff; font: 400 clamp(1.4rem, 4vw, 2.6rem)/1 "FX Press", monospace; opacity: 0; animation: fx-boot-show .01s .2s forwards; }
.fx-bars.out .t { opacity: 1; animation: fx-sl-tout .12s forwards; }
@keyframes fx-bars-in { to { translate: 0 0; } }
@keyframes fx-bars-out { from { translate: 0 0; } to { translate: 0 102%; } }
@keyframes fx-boot-show { to { opacity: 1; } }

/* ---------- Alert: warning screen ---------- */
.fx-alarm { position: fixed; inset: 0; z-index: 10001; pointer-events: none; display: grid; place-items: center; align-content: center; gap: 10px; background: #000; color: #ff6a00; text-align: center; opacity: 0; animation: fx-al-in .36s steps(1) forwards; }
.fx-alarm::before, .fx-alarm::after { content: ""; position: absolute; left: 0; right: 0; height: 56px; background: repeating-linear-gradient(-45deg, #ff6a00 0 22px, #000 22px 44px) 0 0 / 62.2px 100%; animation: e-band .9s linear infinite; }
.fx-alarm::before { top: 0; } .fx-alarm::after { bottom: 0; }
.fx-alarm b { font: 800 clamp(5rem, 20vw, 15rem)/1 "FX Mincho", serif; color: #ff6a00; text-shadow: 0 0 40px rgb(255 106 0 / .5); }
.fx-alarm small, .fx-alarm span { font: 700 clamp(11px, 1.4vw, 14px)/1 "FX Mono", "FX Mincho", monospace; letter-spacing: .3em; text-transform: uppercase; }
.fx-alarm span { color: #fff; }
.fx-alarm.out { opacity: 1; animation: fx-al-out .3s steps(3) forwards; }
@keyframes fx-al-in { 0% { opacity: 0; } 15% { opacity: 1; } 35% { opacity: .15; } 55% { opacity: 1; } 100% { opacity: 1; } }
@keyframes fx-al-out { to { opacity: 0; } }

/* ---------- 8-bit: iris ---------- */
.fx-iris { position: fixed; inset: 0; z-index: 10001; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.fx-iris i { width: 260vmax; height: 260vmax; border-radius: 50%; box-shadow: 0 0 0 200vmax #111327; animation: fx-iris-in .34s steps(9) forwards; }
.fx-iris b { position: absolute; font: 400 clamp(12px, 2vw, 18px)/1 "FX Press", monospace; color: #ffec27; opacity: 0; animation: fx-boot-show .01s .3s forwards; }
.fx-iris.out i { width: 0; height: 0; animation: fx-iris-out .4s steps(10) forwards; }
.fx-iris.out b { opacity: 0; animation: none; }
@keyframes fx-iris-in { to { width: 0; height: 0; } }
@keyframes fx-iris-out { from { width: 0; height: 0; } to { width: 260vmax; height: 260vmax; } }

/* ---------- Y2K: theme window ---------- */
.fx-win { position: fixed; inset: 0; z-index: 10001; pointer-events: none; display: grid; place-items: center; background: conic-gradient(#b49cff 25%, #e4e1ee 0 50%, #b49cff 0 75%, #e4e1ee 0) 0 0 / 4px 4px; opacity: 0; animation: fx-boot-show .16s steps(3) forwards; }
.fx-win .w { width: min(440px, 86vw); border: 2px solid #0a0a0b; border-radius: 12px; overflow: hidden; background: #fff; color: #0a0a0b; box-shadow: 8px 8px 0 #6b2bff; animation: y2k-open .34s cubic-bezier(.2, 1.35, .4, 1) .06s both; }
.fx-win .bar { display: flex; justify-content: space-between; align-items: center; height: 30px; padding: 0 12px; font: 11px/1 "FX Silk", monospace; color: #fff; text-shadow: 1px 1px 0 #000; background: linear-gradient(#d9ccff 0 25%, #b49cff 25% 50%, #6b2bff 50% 75%, #5420d6 75%); border-bottom: 2px solid #0a0a0b; }
.fx-win .body { padding: 18px 18px 20px; font: 600 14px/1.4 "FX Geist", sans-serif; }
.fx-win .seg { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; margin-top: 12px; padding: 3px; border: 1.5px solid #0a0a0b; border-radius: 4px; }
.fx-win .seg i { height: 12px; background: #e4e1ee; animation: fx-win-seg .01s steps(1) forwards; animation-delay: calc(.12s + var(--n) * 22ms); }
.fx-win.out { opacity: 1; animation: fx-al-out .26s steps(3) forwards; }
.fx-win.out .w { animation: fx-win-close .2s ease-in forwards; }
@keyframes fx-win-seg { to { background: #6b2bff; } }
@keyframes fx-win-close { to { scale: .2 .06; opacity: 0; } }

/* ---------- Switching fun mode off: the old TV turns off ---------- */
html.fx-poweroff { background: #000; }
html.fx-poweroff body { overflow: hidden; animation: fx-crt .44s cubic-bezier(.7, 0, .3, 1) forwards; }
html.fx-poweroff :is(.fx-dock, .od-hud, .od-progress, .od-dot, .od-ring, .od-aurora, .od-canvas, .fx-toasts) { visibility: hidden; }
@keyframes fx-crt { 0% { transform: none; filter: none; } 55% { transform: scale(1, .005); filter: brightness(5); } 100% { transform: scale(0, .005); filter: brightness(9); } }

/* ---------- Click bursts ---------- */
.fx-p { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; }
.fx-p.star { width: 18px; height: 18px; margin: -9px; background: var(--c); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: fx-p-fly .7s cubic-bezier(.2, .8, .3, 1) forwards; }
.fx-p.px { width: 7px; height: 7px; margin: -3.5px; background: var(--c); animation: fx-p-fly .65s cubic-bezier(.2, .8, .3, 1) forwards; }
.fx-p.spark { margin: -10px; font: 18px/1 "FX Geist", sans-serif; color: var(--c); text-shadow: 0 0 8px var(--c); animation: fx-p-fly .75s cubic-bezier(.2, .8, .3, 1) forwards; }
.fx-p.hex { width: 34px; height: 39px; margin: -19.5px -17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 39'%3E%3Cpath d='M17 1.5L32.5 10.5V28.5L17 37.5L1.5 28.5V10.5Z' fill='none' stroke='%23ff6a00' stroke-width='2.5'/%3E%3C/svg%3E") center / contain no-repeat; animation: fx-p-ring .6s ease-out forwards; }
.fx-p.ring { width: 22px; height: 22px; margin: -11px; border-radius: 50%; border: 2px solid #22d3ee; box-shadow: 0 0 14px #22d3ee, inset 0 0 8px #ff2e88; animation: fx-p-ring .55s ease-out forwards; }
.fx-p.ray { width: 2px; height: 16px; margin: -8px -1px; background: #ff2e88; box-shadow: 0 0 8px #ff2e88; animation: fx-p-ray .5s ease-out forwards; }
.fx-p.coin { width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: #ffec27; box-shadow: inset -3px -3px 0 #d49a00, 0 0 0 2px #111327; animation: fx-p-coin .8s cubic-bezier(.3, .7, .6, 1) forwards, fx-p-spin .24s steps(2) infinite; }
.fx-p.lock { width: 48px; height: 48px; margin: -24px;
  background:
    linear-gradient(#b6ff3b 0 0) top left / 12px 2px no-repeat, linear-gradient(#b6ff3b 0 0) top left / 2px 12px no-repeat,
    linear-gradient(#b6ff3b 0 0) top right / 12px 2px no-repeat, linear-gradient(#b6ff3b 0 0) top right / 2px 12px no-repeat,
    linear-gradient(#b6ff3b 0 0) bottom left / 12px 2px no-repeat, linear-gradient(#b6ff3b 0 0) bottom left / 2px 12px no-repeat,
    linear-gradient(#b6ff3b 0 0) bottom right / 12px 2px no-repeat, linear-gradient(#b6ff3b 0 0) bottom right / 2px 12px no-repeat;
  animation: fx-p-lock .4s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes fx-p-fly { from { translate: 0 0; scale: 1; rotate: 0deg; opacity: 1; } to { translate: var(--dx) var(--dy); scale: .25; rotate: var(--r, 0deg); opacity: 0; } }
@keyframes fx-p-ring { from { scale: .25; opacity: 1; } to { scale: 3.2; opacity: 0; } }
@keyframes fx-p-ray { from { transform: rotate(var(--a)) translateY(-8px); opacity: 1; } to { transform: rotate(var(--a)) translateY(-46px); opacity: 0; } }
@keyframes fx-p-coin { 0% { translate: 0 0; } 45% { translate: calc(var(--dx) * .5) -72px; } 100% { translate: var(--dx) 26px; opacity: 0; } }
@keyframes fx-p-spin { 50% { scale: .2 1; } }
@keyframes fx-p-lock { from { scale: 1.7; opacity: 1; } to { scale: .55; opacity: 0; } }

/* ---------- Achievements ---------- */
.fx-toasts { position: fixed; z-index: 10002; top: 80px; left: 50%; translate: -50% 0; display: grid; justify-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 24px); pointer-events: none; }
.fx-toast {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; padding: 8px 20px 8px 8px; border-radius: 999px;
  background: rgb(14 13 20 / .97); color: #f5f5f7; border: 1px solid rgb(255 255 255 / .16); box-shadow: 0 18px 44px -12px rgb(0 0 0 / .65);
  font: 500 13px/1.25 "FX Geist", sans-serif; animation: fx-toast-in .55s cubic-bezier(.2, 1.3, .4, 1) both;
}
.fx-toast::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .22) 50%, transparent 65%); translate: -100% 0; animation: fx-toast-glint .9s ease-in-out .35s forwards; }
.fx-toast .ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #0a0a0b; background: radial-gradient(circle at 35% 28%, #fff 0 9%, #d6ff8f 26%, #b6ff3b 50%, #4d8f00 100%); box-shadow: 0 0 0 2px rgb(182 255 59 / .25); }
.fx-toast .ico svg { width: 24px; height: 24px; }
.fx-toast small { display: block; margin-bottom: 3px; font: 700 10px/1.2 "FX Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: #b6ff3b; }
.fx-toast b { display: block; font-size: 15px; font-weight: 800; }
.fx-toast span { color: #b3b3bb; font-size: 12.5px; }
.fx-toast.out { animation: fx-toast-out .35s ease-in forwards; }
@keyframes fx-toast-in { 0% { opacity: 0; translate: 0 -34px; scale: .8; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes fx-toast-out { to { opacity: 0; translate: 0 -24px; scale: .9; } }
@keyframes fx-toast-glint { to { translate: 100% 0; } }

/* ---------- Sound switch in the dock ---------- */
.fx-dock .fx-dock-sep { width: 1px; height: 22px; margin: 0 4px; background: rgb(255 255 255 / .18); flex: none; }
.fx-dock .fx-sound svg { width: 16px; height: 16px; flex: none; }
.fx-dock .fx-sound[aria-pressed="true"] { background: #b6ff3b; color: #0a0a0b; }
.fx-dock .fx-sound .off { display: block; } .fx-dock .fx-sound .on { display: none; }
.fx-dock .fx-sound[aria-pressed="true"] .off { display: none; } .fx-dock .fx-sound[aria-pressed="true"] .on { display: block; }
@media (max-width: 520px) { .fx-dock .fx-sound .lbl { display: none; } .fx-dock .fx-dock-sep { margin: 0 2px; } }
@media (max-width: 430px) { .fx-dock button { padding: 9px 5px; font-size: 11.5px; } }


/* =====================================================================
   MORE · title cards, cursors, XP, the pixel buddy, menu poses,
   sceneries, the hidden game, 3D title, startup, performance switches
   ===================================================================== */

/* ---------- Pause what is off screen; lighter mode when frames drop ---------- */
html[data-fun] .fx-paused, html[data-fun] .fx-paused *, html[data-fun] .fx-paused *::before, html[data-fun] .fx-paused *::after { animation-play-state: paused !important; }
html.fx-lite[data-skin="overdrive"] .hero .fx-deco::after, html.fx-lite .od-aurora i, html.fx-lite .fx-scenery *, html.fx-lite .od-sticker, html.fx-lite .od-band span, html.fx-lite .od-endroll span, html.fx-lite .fx-marquee span { animation: none !important; }
html.fx-lite[data-fun] body::after { display: none; }

/* ---------- Phones: nothing may push the page sideways ---------- */
html[data-fun] { overflow-x: clip; }
@media (max-width: 760px) {
  html[data-fun] .hero { overflow-x: clip; }
  html[data-fun] .index a::after { inset: -10px -12px -10px -12px; }
}


/* ---------- Project titles behave like trading cards on hover ---------- */
html[data-fun] .head {
  position: relative; width: fit-content; max-width: 100%;
  transform: perspective(800px) rotateX(var(--hrx, 0deg)) rotateY(var(--hry, 0deg)) scale(var(--hs, 1));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
html[data-fun] .head.fx-card-on { transition: transform .1s linear; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) { html[data-fun] .head { width: max-content; max-width: none; } }
html[data-fun] .head::before, html[data-fun] .head::after { content: ""; position: absolute; inset: -8px -16px -4px; border-radius: 14px; pointer-events: none; opacity: 0; transition: opacity .2s, scale .3s cubic-bezier(.2, 1.3, .4, 1); scale: .9; }
html[data-fun] .head::before { z-index: -1; background: var(--card-bg, var(--surface)); border: 2px solid var(--card-edge, var(--ink)); box-shadow: 8px 8px 0 var(--card-shadow, var(--accent)); }
html[data-fun] .head::after {
  background: radial-gradient(circle at var(--hmx, 50%) var(--hmy, 50%), rgb(255 255 255 / .38), transparent 46%),
    linear-gradient(115deg, transparent 28%, rgb(182 255 59 / .28) 44%, rgb(255 46 136 / .24) 56%, rgb(34 211 238 / .2) 64%, transparent 74%) var(--hmx, 50%) 0 / 260% 100%;
  mix-blend-mode: soft-light;
}
html[data-fun] .head.fx-card-on::before, html[data-fun] .head.fx-card-on::after { opacity: 1; scale: 1; }
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .head::before { border-radius: 0; border: 3px solid var(--p-box); background: var(--bg); box-shadow: 8px 8px 0 var(--p-red); clip-path: polygon(0 6%, 100% 0, 98% 100%, 2% 94%); }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .head::before { border-radius: 0; border: 1px solid var(--e-or); background: var(--bg); box-shadow: 6px 6px 0 var(--e-or); }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .head::before { border-radius: 0; border: 0; background: color-mix(in oklab, var(--n-c) 14%, var(--bg)); box-shadow: 0 0 0 1.5px var(--n-c), 0 0 30px -4px var(--n-c); }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .head::before { border-radius: 0; border: 4px solid var(--ink); background: var(--surface); box-shadow: 6px 6px 0 var(--ink); }
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .head::before { border: 2px solid var(--y-edge); background: var(--surface); box-shadow: 6px 6px 0 var(--accent); }
html[data-skin="overdrive"] .head::before { border-radius: 4px; background: var(--surface); border-color: var(--edge); box-shadow: 8px 8px 0 var(--v); }

/* ---------- A cursor drawn for each style ---------- */
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 2l18 11-8 1.5 4.5 8.5-3 1.6-4.5-8.6L4 21z' fill='%23fff' stroke='%236b2bff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M22 2l1 2.6L25.6 5.6 23 6.6 22 9.2 21 6.6 18.4 5.6 21 4.6z' fill='%23ff6bd5'/%3E%3C/svg%3E") 3 2, auto; }
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) :is(a, button) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' shape-rendering='crispEdges'%3E%3Cpath d='M9 2h3v9h2V8h3v3h2V9h3v3h2v8l-2 4H10l-5-7 2-2 2 2z' fill='%23fff' stroke='%230a0a0b' stroke-width='1.6'/%3E%3C/svg%3E") 10 2, pointer; }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='9' fill='none' stroke='%23ff6a00' stroke-width='2'/%3E%3Cpath d='M16 1v9M16 22v9M1 16h9M22 16h9' stroke='%23ff6a00' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='1.6' fill='%23ff6a00'/%3E%3C/svg%3E") 16 16, crosshair; }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) :is(a, button) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 4l11 6v12l-11 6-11-6V10z' fill='%23ff6a00' fill-opacity='.35' stroke='%23ff6a00' stroke-width='2'/%3E%3Cpath d='M16 0v8M16 24v8M0 16h8M24 16h8' stroke='%23e3000f' stroke-width='2'/%3E%3C/svg%3E") 16 16, pointer; }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='10' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-dasharray='5 4'/%3E%3Ccircle cx='16' cy='16' r='2.4' fill='%23ff2e88'/%3E%3C/svg%3E") 16 16, crosshair; }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) :is(a, button) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='10' fill='%23ff2e88' fill-opacity='.25' stroke='%23ff2e88' stroke-width='2'/%3E%3Cpath d='M16 2v6M16 24v6M2 16h6M24 16h6' stroke='%2322d3ee' stroke-width='2'/%3E%3C/svg%3E") 16 16, pointer; }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) :is(a, button) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' shape-rendering='crispEdges'%3E%3Cpath d='M8 1h3v8h3V7h3v2h3v2h3v9h-3v3H9v-3H6v-3H3v-5h3v2h2z' fill='%23fff1e8' stroke='%23111327' stroke-width='2'/%3E%3C/svg%3E") 9 1, pointer; }

/* ---------- Sound sub-switches ---------- */
.fx-dock :is(.fx-music, .fx-typing)[hidden] { display: none; }
.fx-dock :is(.fx-music, .fx-typing) svg { width: 15px; height: 15px; flex: none; }
.fx-dock :is(.fx-music, .fx-typing)[aria-pressed="true"] { background: rgb(182 255 59 / .18); color: #d6ff8f; }
@media (max-width: 760px) { .fx-dock :is(.fx-music, .fx-typing) .lbl { display: none; } }

/* ---------- XP ---------- */
.fx-dock .fx-xp { display: flex; align-items: center; gap: 7px; padding: 10px 10px; font: 700 11px/1 "FX Mono", monospace; letter-spacing: .06em; color: #b6ff3b; white-space: nowrap; }
.fx-dock .fx-xp[aria-expanded="true"] { background: rgb(182 255 59 / .16); }
.fx-xp i { position: relative; display: block; width: 54px; height: 6px; overflow: hidden; border-radius: 3px; background: rgb(255 255 255 / .14); }
.fx-xp i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #6b2bff, #b6ff3b); transform-origin: left; scale: var(--p, 0) 1; transition: scale .6s cubic-bezier(.2, .8, .2, 1); }
@media (max-width: 760px) { .fx-xp i { width: 28px; } }
@media (max-width: 520px) { .fx-dock .fx-xp { padding: 9px 6px; } .fx-dock .fx-xp i { display: none; } }
.fx-xpgain { position: fixed; z-index: 1001; left: 50%; bottom: 74px; translate: -50% 0; padding: 4px 9px; font: 700 12px/1 "FX Mono", monospace; color: #0a0a0b; background: #b6ff3b; border: 2px solid #0a0a0b; pointer-events: none; animation: fx-xpgain 1.1s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes fx-xpgain { 0% { opacity: 0; translate: -50% 10px; } 20% { opacity: 1; translate: -50% 0; } 75% { opacity: 1; } 100% { opacity: 0; translate: -50% -26px; } }
.fx-levelup { position: fixed; inset: 0; z-index: 10002; display: grid; place-items: center; align-content: center; gap: 12px; pointer-events: none; }
.fx-levelup::before { content: ""; position: absolute; left: 50%; top: 50%; width: 80vmin; height: 80vmin; margin: -40vmin 0 0 -40vmin; border-radius: 50%; background: repeating-conic-gradient(rgb(182 255 59 / .16) 0 8deg, transparent 8deg 22deg); animation: fx-spin 6s linear infinite, fx-lu-fade 1.8s ease forwards; }
.fx-levelup b { position: relative; font: 400 clamp(2rem, 7vw, 5rem)/1 "FX Press", monospace; color: #fff; text-shadow: .08em .08em 0 #6b2bff, -.04em -.04em 0 #b6ff3b; animation: fx-lu-slam .5s cubic-bezier(.2, 1.3, .4, 1) both, fx-lu-fade 1.8s ease forwards; }
.fx-levelup span { position: relative; padding: 8px 16px; font: 700 clamp(14px, 2vw, 20px)/1 "FX Mono", monospace; letter-spacing: .2em; color: #0a0a0b; background: #b6ff3b; border: 2px solid #0a0a0b; animation: fx-lu-slam .5s cubic-bezier(.2, 1.3, .4, 1) .12s both, fx-lu-fade 1.8s ease forwards; }
@keyframes fx-spin { to { rotate: 360deg; } }
@keyframes fx-lu-slam { 0% { opacity: 0; scale: 2.2; } 60% { opacity: 1; scale: .94; } 100% { opacity: 1; scale: 1; } }
@keyframes fx-lu-fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- The pixel buddy ---------- */
.fx-buddy { --s: 1.5; }
.fx-peek, .fx-mart { --s: 2; }
.fx-spr {
  display: block; width: calc(32px * var(--s)); height: calc(52px * var(--s));
  background: url("sprites/buddy.png") no-repeat; background-size: calc(384px * var(--s)) calc(312px * var(--s));
  /* Percentages: column c of 12 is at c/11, row r of 6 at r/5, whatever the scale. */
  background-position: calc(var(--c, 8) * 100% / 11) calc(var(--r, 0) * 20%);
  image-rendering: pixelated;
}
/* Walk cycles: columns 0-3 walk right, 4-7 walk left. No variables inside the keyframes, so Safari plays them too. */
.fx-spr.walk { animation: fx-walk-r .64s steps(4) infinite; }
.fx-spr.walk.l { animation-name: fx-walk-l; }
@keyframes fx-walk-r { from { background-position-x: 0%; } to { background-position-x: 36.3636%; } }
@keyframes fx-walk-l { from { background-position-x: 36.3636%; } to { background-position-x: 72.7273%; } }
.fx-buddy { position: fixed; z-index: 990; left: 0; bottom: 70px; translate: var(--x, -90px) 0; transition: translate var(--t, 0s) linear; cursor: pointer; }
.fx-buddy[hidden] { display: none; }
.fx-buddy .hop { position: relative; }
.fx-buddy .hop::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -3px; height: 7px; border-radius: 50%; background: rgb(0 0 0 / .35); }
.fx-buddy.jump .hop { animation: fx-hop .46s cubic-bezier(.3, .7, .4, 1); }
.fx-buddy.poof .fx-spr { animation: fx-poof .4s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes fx-hop { 0%, 100% { translate: 0 0; } 45% { translate: 0 -38px; } }
@keyframes fx-poof { 0% { scale: .2 1.6; } 60% { scale: 1.15 .9; } 100% { scale: 1; } }
.fx-buddy .say {
  position: absolute; left: 0; bottom: calc(100% + 10px); translate: 0 6px; padding: 7px 10px; white-space: nowrap;
  font: 9px/1.3 "FX Press", monospace; color: #0a0a0b; background: #fff; border: 2px solid #0a0a0b; box-shadow: 3px 3px 0 #0a0a0b;
  opacity: 0; transition: opacity .15s, translate .2s cubic-bezier(.2, 1.3, .4, 1); pointer-events: none;
}
.fx-buddy .say::after { content: ""; position: absolute; left: calc(16px * var(--s) - 5px); top: 100%; width: 10px; height: 8px; background: #0a0a0b; clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* Near the right edge the bubble opens to the left. */
.fx-buddy.r .say { left: auto; right: 0; }
.fx-buddy.r .say::after { left: auto; right: calc(16px * var(--s) - 5px); }
.fx-buddy.talk .say { opacity: 1; translate: 0 0; }
.fx-buddy.sleep .say { opacity: 1; translate: 0 0; animation: fx-zzz 1.6s ease-in-out infinite; }
@keyframes fx-zzz { 50% { translate: 0 -6px; } }
.fx-peek { position: absolute; z-index: 6; width: calc(32px * var(--s)); height: calc(52px * var(--s)); overflow: hidden; pointer-events: none; }
.fx-peek .fx-spr { translate: 0 105%; transition: translate .4s cubic-bezier(.2, 1.3, .4, 1); }
.fx-peek.up .fx-spr { translate: 0 42%; }
@media (max-width: 759px) { .fx-buddy { --s: 1.25; bottom: 64px; } .fx-peek { display: none; } }

/* ---------- Menu poses: the buddy changes outfit and pose on each line ---------- */
.fx-mart { --s: 6; position: relative; z-index: 1; display: block; width: calc(32px * var(--s)); height: calc(52px * var(--s));
  background: url("sprites/buddy.png") no-repeat; background-size: calc(384px * var(--s)) calc(312px * var(--s));
  background-position: calc(var(--c) * -32px * var(--s)) calc(var(--r) * -52px * var(--s)); image-rendering: pixelated;
  filter: drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(10px 10px 0 rgb(0 0 0 / .85));
  animation: fx-idle-y 2.4s ease-in-out .4s infinite alternate; }
@keyframes fx-idle-y { to { translate: 0 -8px; } }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-pose img.badge, html[data-skin="overdrive"] .od-pose img.badge,
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-pose b.badge, html[data-skin="overdrive"] .od-pose b.badge {
  position: absolute; z-index: 2; right: 6%; bottom: 8%; width: 28%; height: auto; rotate: 8deg; animation: none; filter: drop-shadow(5px 5px 0 #0a0a0b);
}
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-pose img.badge.shot-pose, html[data-skin="overdrive"] .od-pose img.badge.shot-pose { width: 42%; border: 4px solid #fff; }
:is([data-skin="phantom"] :is(.top, .hero, .project, .upstream, footer), [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])).hero .fx-pose b.badge, html[data-skin="overdrive"] .od-pose b.badge { width: auto; font-size: clamp(2.6rem, 5vw, 4rem); text-shadow: .05em .05em 0 #0a0a0b; }
@media (max-width: 1100px) { .fx-mart { --s: 5; } }

/* ---------- Sceneries, one per style (single-style mode only) ---------- */
.fx-scenery { display: none; }
html[data-fun]:not([data-skin="mix"]):not([data-skin="overdrive"]) .fx-scenery { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-scenery > * { display: none; position: absolute; }
/* Y2K: soap bubbles */
html[data-skin="y2k"] .fx-scenery .bub { display: block; bottom: -140px; left: var(--x); width: var(--d); aspect-ratio: 1; border-radius: 50%; opacity: .7;
  background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .95) 0 7%, transparent 9%), radial-gradient(circle, transparent 56%, rgb(180 156 255 / .4) 68%, rgb(34 211 238 / .35) 78%, rgb(255 107 213 / .45) 90%, transparent 100%);
  animation: fx-bubble var(--t) linear var(--dl) infinite; }
@keyframes fx-bubble { to { translate: -40px calc(-100vh - 280px); } }
@keyframes fx-bubble-b { to { translate: 50px calc(-100vh - 280px); } }
@keyframes fx-bubble-c { to { translate: 10px calc(-100vh - 280px); } }
html[data-skin="y2k"] .fx-scenery .bub:nth-child(3n+1) { animation-name: fx-bubble-b; }
html[data-skin="y2k"] .fx-scenery .bub:nth-child(3n+2) { animation-name: fx-bubble-c; }
/* Phantom: slow red stars */
html[data-skin="phantom"] .fx-scenery .star { display: block; left: var(--x); top: var(--y); width: var(--d); aspect-ratio: 1; background: #e60012; opacity: .13;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: fx-spin var(--t) linear infinite; }
/* Alert: radar sweep */
html[data-skin="alert"] .fx-scenery .radar { display: block; right: -120px; bottom: -120px; width: 520px; aspect-ratio: 1; border-radius: 50%; opacity: .5;
  background: repeating-radial-gradient(circle, transparent 0 58px, rgb(255 106 0 / .35) 59px 60px), linear-gradient(transparent calc(50% - .5px), rgb(255 106 0 / .3) 0 calc(50% + .5px), transparent 0), linear-gradient(90deg, transparent calc(50% - .5px), rgb(255 106 0 / .3) 0 calc(50% + .5px), transparent 0); }
html[data-skin="alert"] .fx-scenery .radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgb(255 106 0 / .55), transparent 70deg); animation: fx-spin 4s linear infinite; }
html[data-skin="alert"] .fx-scenery .blip { display: block; width: 8px; height: 8px; border-radius: 50%; background: #ff6a00; box-shadow: 0 0 12px #ff6a00; right: var(--x); bottom: var(--y); animation: fx-blip 4s linear var(--dl) infinite; }
@keyframes fx-blip { 0%, 100% { opacity: 0; } 5% { opacity: 1; } 40% { opacity: 0; } }
/* Neon: a floor that runs with the page */
html[data-skin="neon"] .fx-scenery .floor { display: block; left: -30vw; right: -30vw; bottom: 0; height: 38vh; perspective: 280px; perspective-origin: 50% 0; opacity: .55;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); mask-image: linear-gradient(to bottom, transparent, #000 45%); }
html[data-skin="neon"] .fx-scenery .floor i { position: absolute; left: 0; right: 0; top: -48px; height: 300%; transform-origin: 50% 0; transform: rotateX(68deg);
  background-image: linear-gradient(var(--n-m) 2px, transparent 2px), linear-gradient(90deg, var(--n-m) 2px, transparent 2px); background-size: 64px 64px; translate: 0 var(--g, 0px); }
html[data-skin="neon"] .fx-scenery .floor::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--n-c); box-shadow: 0 0 18px 4px var(--n-c); z-index: 1; }
/* 8-bit: hills that scroll sideways */
html[data-skin="pixel"] .fx-scenery .hills { display: block; left: 0; right: 0; bottom: 0; height: 120px; background-repeat: repeat-x; background-position: var(--h, 0px) 100%; image-rendering: pixelated; opacity: .9; }
html[data-skin="pixel"] .fx-scenery .hills.far { height: 150px; opacity: .55; background-position: var(--hf, 0px) 100%; }
html[data-skin="pixel"] .fx-scenery .hills { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='80' shape-rendering='crispEdges'%3E%3Cpath d='M0 80V56h16v-8h16v-8h24v8h16v8h24v-16h16v-8h32v8h16v16h24v-8h24v8h16v8h32v24z' fill='%2388c070'/%3E%3C/svg%3E"); background-size: 512px 160px; }
html[data-skin="pixel"] .fx-scenery .hills.far { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='80' shape-rendering='crispEdges'%3E%3Cpath d='M0 80V40h24V24h24V8h32v16h24v16h32V24h24V16h32v16h24v24h40v24z' fill='%23c8e8b0'/%3E%3C/svg%3E"); background-size: 512px 160px; }
@media (prefers-color-scheme: dark) {
  html[data-skin="pixel"] .fx-scenery .hills { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='80' shape-rendering='crispEdges'%3E%3Cpath d='M0 80V56h16v-8h16v-8h24v8h16v8h24v-16h16v-8h32v8h16v16h24v-8h24v8h16v8h32v24z' fill='%231d2b53'/%3E%3C/svg%3E"); }
  html[data-skin="pixel"] .fx-scenery .hills.far { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='80' shape-rendering='crispEdges'%3E%3Cpath d='M0 80V40h24V24h24V8h32v16h24v16h32V24h24V16h32v16h24v24h40v24z' fill='%237e2553'/%3E%3C/svg%3E"); }
}

/* ---------- 3D title and depth ---------- */
html[data-fun] .hero h1 { transform: perspective(1100px) rotateX(calc(var(--py, 0) * -6deg)) rotateY(calc(var(--px, 0) * 8deg)); transition: transform .3s ease-out; }

/* ---------- The hidden game ---------- */
html.fx-gaming[data-fun], html.fx-gaming[data-fun] * { cursor: auto !important; }
html.fx-gaming[data-fun] .fx-game button { cursor: pointer !important; }
html.fx-gaming[data-fun] .fx-game canvas { cursor: crosshair !important; }
html.fx-gaming :is(.od-dot, .od-ring) { display: none; }
.fx-coin { display: none; }
html[data-fun] footer .fx-coin {
  display: inline-flex; align-items: center; gap: 10px; order: 2; margin-left: auto; padding: 10px 14px; border: 0; cursor: pointer;
  font: 400 10px/1 "FX Press", monospace; color: #111327; background: #ffec27; box-shadow: 0 0 0 3px #111327, 4px 4px 0 3px #111327;
}
html[data-fun] footer .fx-coin:hover { background: #fff1e8; }
html[data-fun] footer .fx-coin:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
html[data-fun] footer .fx-coin i { width: 0; height: 0; border-left: 7px solid currentColor; border-block: 5px solid transparent; animation: fx-blink-c 1s steps(1) infinite; }
@keyframes fx-blink-c { 50% { opacity: 0; } }
.fx-game { position: fixed; inset: 0; z-index: 10003; display: grid; place-items: center; padding: 16px; background: rgb(5 5 6 / .9); }
.fx-game .cab { display: grid; gap: 10px; padding: 14px; width: min(520px, 100%); background: #111327; border: 4px solid #fff1e8; box-shadow: 10px 10px 0 #6b2bff; color: #fff1e8; }
.fx-game .hud { display: flex; justify-content: space-between; gap: 10px; font: 400 10px/1.4 "FX Press", monospace; }
.fx-game .hud b { font-weight: 400; color: #ffec27; }
.fx-game canvas { display: block; width: 100%; aspect-ratio: 3 / 4; max-height: 70vh; object-fit: contain; image-rendering: pixelated; background: #05050a; touch-action: none; cursor: crosshair; }
.fx-game .help { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 400 10px/1.4 "FX Silk", monospace; color: #c2c3c7; }
.fx-game button { font: 400 10px/1 "FX Press", monospace; color: #111327; background: #fff1e8; border: 0; padding: 8px 10px; cursor: pointer; box-shadow: 3px 3px 0 #6b2bff; }
.fx-game button:focus-visible { outline: 3px solid #ffec27; outline-offset: 3px; }

/* ---------- Progress panel (opened from the level in the dock) ---------- */
.fx-panel {
  position: fixed; z-index: 1001; left: 50%; bottom: 76px; translate: -50% 0; width: min(520px, calc(100vw - 20px)); max-height: calc(100dvh - 110px); isolation: isolate;
  display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #0e0d14; color: #f5f5f7;
  border: 1px solid rgb(255 255 255 / .16); box-shadow: 0 24px 60px -12px rgb(0 0 0 / .7), 6px 6px 0 #6b2bff; font: 400 13px/1.45 "FX Geist", system-ui, sans-serif;
  animation: fx-panel-in .22s cubic-bezier(.2, 1.2, .4, 1);
}
@keyframes fx-panel-in { from { opacity: 0; translate: -50% 14px; } }
@media (prefers-reduced-motion: reduce) { .fx-panel { animation: none; } }
.fx-panel .fx-panel-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 10px 18px; border-bottom: 1px solid rgb(255 255 255 / .1); }
.fx-panel .fx-panel-title { font: 400 12px/1 "FX Press", monospace; letter-spacing: .04em; text-transform: uppercase; color: #b6ff3b; }
.fx-panel .close { width: 32px; height: 32px; border: 0; border-radius: 10px; background: rgb(255 255 255 / .08); color: #f5f5f7; font: 400 20px/1 system-ui, sans-serif; cursor: pointer; }
.fx-panel .close:hover { background: rgb(255 255 255 / .16); }
.fx-panel :is(.close, .fx-panel-body):focus-visible { outline: 2px solid #b6ff3b; outline-offset: 2px; }
.fx-panel .fx-panel-body { overflow-y: auto; padding: 14px 18px 18px; overscroll-behavior: contain; scrollbar-width: thin; }
.fx-panel .lv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fx-panel .lv b { font: 400 22px/1 "FX Press", monospace; color: #fff; text-shadow: 3px 3px 0 #6b2bff; }
.fx-panel .lv span { font: 700 12px/1 "FX Mono", monospace; color: #b6ff3b; }
.fx-panel .bar { position: relative; height: 10px; margin: 12px 0 8px; overflow: hidden; border-radius: 5px; background: rgb(255 255 255 / .12); }
.fx-panel .bar i { position: absolute; inset: 0; background: linear-gradient(90deg, #6b2bff, #b6ff3b); transform-origin: left; scale: var(--p, 0) 1; }
.fx-panel .next, .fx-panel .all { margin: 0; font: 500 11.5px/1.4 "FX Mono", monospace; color: #a1a1aa; }
.fx-panel .all { margin-top: 14px; color: #b6ff3b; }
.fx-panel .fx-sec { margin: 20px 0 8px; font: 400 10px/1 "FX Silk", monospace; letter-spacing: .1em; text-transform: uppercase; color: #a1a1aa; }
.fx-panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.fx-panel .ach li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: rgb(255 255 255 / .05); }
.fx-panel .ach .ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.fx-panel .ach .ico svg { width: 16px; height: 16px; }
.fx-panel .ach .todo .ico { background: rgb(255 255 255 / .08); color: #a1a1aa; }
.fx-panel .ach .ok .ico { background: #b6ff3b; color: #0a0a0b; }
.fx-panel .ach .txt { display: grid; gap: 2px; min-width: 0; }
.fx-panel .ach b { font-weight: 700; color: #fff; }
.fx-panel .ach .txt span { color: #c7c7d1; }
.fx-panel .ach .ok .txt span { color: #a1a1aa; }
.fx-panel .ach em { display: flex; align-items: center; gap: 6px; font: 700 11px/1 "FX Mono", monospace; font-style: normal; color: #b6ff3b; white-space: nowrap; }
.fx-panel .ach .ok em { color: #a1a1aa; }
.fx-panel .ach em i { padding: 4px 6px; border-radius: 6px; font-style: normal; color: #f5f5f7; background: rgb(107 43 255 / .55); }
.fx-panel .earn li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 2px; border-bottom: 1px dashed rgb(255 255 255 / .1); color: #d4d4dc; }
.fx-panel .earn li:last-child { border-bottom: 0; }
.fx-panel .earn b { flex: none; font: 700 12px/1.45 "FX Mono", monospace; color: #b6ff3b; }
@media (max-width: 520px) { .fx-panel { bottom: 70px; } .fx-panel .ach li { grid-template-columns: 26px 1fr; } .fx-panel .ach em { grid-column: 2; } }

/* =====================================================================
   JUICE · played once per page load, never again on scroll or style change
   ===================================================================== */
/* Project titles slam in, overshoot and shake */
@keyframes fx-head-slam {
  0% { opacity: 0; scale: 1.9; }
  50% { opacity: 1; scale: .93; }
  64% { scale: 1.05; }
  76% { scale: 1; translate: -6px 2px; }
  84% { translate: 5px -2px; }
  92% { translate: -2px 1px; }
  100% { opacity: 1; scale: 1; translate: 0 0; }
}
html.fx-anim[data-fun] :is(.project, .upstream).fx-in .head { animation: fx-head-slam .75s cubic-bezier(.2, .9, .3, 1) .2s backwards; transform-origin: 15% 60%; }
html.fx-anim[data-fun] :is(.project, .upstream).fx-in .head h2 { animation: none; }
/* Tech tags drop in one by one with a squashy bounce */
@keyframes fx-tag-drop {
  0% { opacity: 0; translate: 0 -28px; }
  55% { opacity: 1; translate: 0 0; scale: 1.1 .86; }
  75% { translate: 0 -4px; scale: .96 1.05; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
html.fx-anim[data-fun] :is(.project, .upstream).fx-in .stack li { animation: fx-tag-drop .5s cubic-bezier(.3, .9, .4, 1) backwards; animation-delay: calc(.6s + var(--i, 0) * 75ms); }
/* Once landed, the entrance animations are switched off for good */
html[data-fun] .fx-landed :is(.copy, .stage, .diff, .od-card, .head, .stack li), html[data-fun] .fx-landed h2 { animation: none !important; }

/* Tags press into their shadow on hover */
html[data-fun] .stack li { transition: translate .12s cubic-bezier(.2, 1.4, .4, 1), scale .12s, box-shadow .12s; }
html[data-fun] .stack li:hover { translate: 2px 2px; scale: .97; }
html[data-skin="overdrive"] .stack li:hover { box-shadow: 1px 1px 0 var(--v); scale: 1; }
html[data-skin="pixel"] .stack li:hover { box-shadow: 0 0 0 3px var(--ink), 1px 1px 0 3px var(--ink); scale: 1; }

/* Stripes that run: the note header and the episode banner */
@keyframes fx-stripes-note { to { background-position: 0 0, 11.3137px 0; } }
@keyframes fx-stripes-hz { to { background-position: 28.2843px 0; } }
html[data-skin="overdrive"] .copy .fact::after { animation: fx-stripes-note 1.1s linear infinite; }
html[data-skin="overdrive"] .od-card .hz { animation: fx-stripes-hz 1.4s linear infinite; }

/* A shine sweeps across the main buttons every few seconds; buttons squash when clicked */
.fx-shine { display: none; }
html[data-fun] .btn { position: relative; }
html[data-fun] .btn .fx-shine { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
html[data-fun] .btn .fx-shine::before {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 38%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .8) 50%, transparent); transform: skewX(-22deg);
  translate: -160% 0; animation: fx-shine 5s cubic-bezier(.45, 0, .2, 1) var(--sd, 0s) infinite;
}
@keyframes fx-shine { 0%, 74% { translate: -160% 0; } 100% { translate: 320% 0; } }
@keyframes fx-squash { 0% { scale: 1; } 30% { scale: 1.12 .84; } 55% { scale: .93 1.07; } 78% { scale: 1.03 .98; } 100% { scale: 1; } }
html[data-fun] .fx-squash { animation: fx-squash .38s cubic-bezier(.2, .8, .3, 1); }
html.fx-lite .btn .fx-shine::before { animation: none; }

/* ---------- Boulito, also in katakana: a vertical tag next to the title ---------- */
.fx-kana { display: none; }
html[data-fun] .head .fx-kana {
  display: inline-block; align-self: center; flex: none; writing-mode: vertical-rl; text-orientation: upright; margin-left: 4px; padding: 9px 6px;
  font: 400 clamp(17px, 1.8vw, 27px)/1 "FX Dot", monospace; letter-spacing: .1em; color: #0a0a0b; background: #b6ff3b;
  border: 2px solid #0a0a0b; box-shadow: 4px 4px 0 #6b2bff; rotate: 5deg;
}
:is([data-skin="phantom"], [data-skin="mix"] :is(.top, .hero, [id="takeline"], [id="lantern"])) .head .fx-kana { background: var(--p-red); color: #fff; border-color: #0a0a0b; box-shadow: 4px 4px 0 #0a0a0b; rotate: -6deg; font-family: "FX Mincho", serif; font-weight: 900; }
:is([data-skin="alert"], [data-skin="mix"] :is([id="vigie"], [id="doc-indexer"])) .head .fx-kana { background: none; color: var(--e-or-text); border: 1px solid var(--e-or); box-shadow: 3px 3px 0 color-mix(in oklab, var(--e-or) 40%, transparent); rotate: 0deg; font-family: "FX Mincho", serif; font-weight: 900; }
:is([data-skin="neon"], [data-skin="mix"] :is([id="roughcut"], [id="mac-toolkit"])) .head .fx-kana { background: none; color: var(--n-ct); border: 1.5px solid var(--n-c); box-shadow: 0 0 18px -2px var(--n-c), inset 0 0 12px -4px var(--n-c); text-shadow: 0 0 10px var(--n-c); rotate: 0deg; }
:is([data-skin="pixel"], [data-skin="mix"] :is([id="boulito"], [id="upstream"], footer)) .head .fx-kana { background: var(--bg); color: var(--ink); border: 0; box-shadow: 0 0 0 3px var(--ink), 3px 3px 0 3px var(--ink); rotate: 0deg; }
:is([data-skin="y2k"], [data-skin="mix"] :is([id="earshot"], [id="trackmend"])) .head .fx-kana { background: linear-gradient(180deg, #ff6bd5, #b49cff 55%, #22d3ee); color: #fff; border: 2px solid #fff; border-radius: 10px; box-shadow: 0 6px 18px -6px rgb(107 43 255 / .6); text-shadow: 0 1px 0 rgb(0 0 0 / .25); rotate: -3deg; }

/* =====================================================================
   LANGUAGE · the EN / FR button (also in the default site)
   ===================================================================== */
html.i18n-pending body { visibility: hidden; }
.lang-toggle { display: none; }
.has-js .lang-toggle { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; }
.has-js .lang-toggle:hover { color: var(--ink); }
.lang-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.lang-toggle b { font-weight: inherit; opacity: .5; }
.lang-toggle i { font-style: normal; opacity: .4; margin: 0 .3em; }
html:not([lang="fr"]) .lang-toggle b[data-l="en"], html[lang="fr"] .lang-toggle b[data-l="fr"] { opacity: 1; }

/* =====================================================================
   OVERDRIVE MASHUP · each project has a guest reference
   (synthwave, Persona, Evangelion, arcade, Y2K) inside the violet and acid palette
   ===================================================================== */
/* Background glows take the colour of the project on screen */
@property --od-c1 { syntax: "<color>"; inherits: true; initial-value: #6b2bff; }
@property --od-c3 { syntax: "<color>"; inherits: true; initial-value: #ff2e88; }
.od-aurora i { transition: --od-c1 1.6s ease, --od-c3 1.6s ease; }

/* A giant outline number behind each project, drifting slowly */
.od-num { display: none; }
html[data-skin="overdrive"] :is(.project, .upstream) { position: relative; isolation: isolate; }
html[data-skin="overdrive"] .od-num {
  display: block; position: absolute; z-index: -1; right: 0; top: 70px; pointer-events: none; user-select: none;
  font: 900 clamp(11rem, 28vw, 26rem)/.8 "FX Serif", serif; font-stretch: 62.5%; letter-spacing: -.02em; color: transparent;
  -webkit-text-stroke: 2px color-mix(in oklab, var(--accent, #6b2bff) 34%, transparent);
  animation: od-num-drift 24s ease-in-out infinite alternate;
}
@keyframes od-num-drift { from { translate: 0 0; } to { translate: -7vw 36px; } }
@media (max-width: 760px) { html[data-skin="overdrive"] .od-num { top: 90px; font-size: 9rem; -webkit-text-stroke-width: 1.5px; } }

/* RGB glitch on the titles, a split second every few seconds */
@keyframes od-rgb {
  0%, 86%, 100% { opacity: 0; translate: 0 0; clip-path: inset(0); }
  87% { opacity: .95; clip-path: inset(8% 0 64% 0); translate: -.07em 0; }
  89% { opacity: .95; clip-path: inset(52% 0 24% 0); translate: .06em 0; }
  91% { opacity: .95; clip-path: inset(28% 0 50% 0); translate: -.03em 0; }
  92% { opacity: 0; }
}
html[data-skin="overdrive"] main h2::after {
  content: attr(data-text); position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  color: #22d3ee; text-shadow: .05em 0 #ff2e88; animation: od-rgb 5.2s steps(1) var(--gd, 0s) infinite;
}
.od-glitch { display: none; }
html[data-skin="overdrive"] .hero h1 .od-glitch {
  display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  color: #22d3ee; text-shadow: .04em 0 #ff2e88; animation: od-rgb 4.4s steps(1) 1.4s infinite;
}
html.fx-lite[data-skin="overdrive"] :is(main h2::after, .hero h1 .od-glitch, .od-num) { animation: none; }

/* --- Title cards --- */
html[data-skin="overdrive"] .od-card .inner { position: relative; z-index: 1; }
/* Persona: a red calling card with a cut-out name */
html[data-skin="overdrive"] .od-card.g-persona { background: #e60012; color: #fff; border-color: #0a0a0b; }
.od-card.g-persona .slash { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(104deg, transparent 0 62%, #0a0a0b 62% 76%, transparent 76% 79%, #0a0a0b 79%); }
.od-card.g-persona .star { font-size: 28px; line-height: 1; color: #0a0a0b; text-shadow: 2px 2px 0 #fff; rotate: -14deg; }
.od-card.g-persona .cc { padding: 6px 10px; background: #0a0a0b; color: #fff; font: 400 13px/1 "FX Anton", sans-serif; letter-spacing: .16em; rotate: -3deg; }
.od-card.g-persona .ransom { display: inline-flex; align-items: center; gap: 2px; }
.od-card.g-persona .ransom i { display: inline-block; padding: 3px 5px 2px; font: 400 20px/1 "FX Anton", sans-serif; font-style: normal; letter-spacing: 0; background: #fff; color: #0a0a0b; rotate: -3deg; }
.od-card.g-persona .ransom i:nth-child(3n) { background: #0a0a0b; color: #fff; rotate: 4deg; }
.od-card.g-persona .ransom i:nth-child(4n+2) { background: #e60012; color: #fff; box-shadow: 0 0 0 2px #fff; rotate: 2deg; font-family: "FX Serif", serif; font-weight: 900; }
.od-card.g-persona .ransom i:nth-child(5n+4) { translate: 0 3px; rotate: -6deg; }
.od-card.g-persona .ransom i.gap { width: 10px; padding: 0; background: none; box-shadow: none; }
.od-card.g-persona .no { margin-left: auto; font: 400 15px/1 "FX Anton", sans-serif; letter-spacing: .12em; color: #fff; }
/* Arcade: STAGE 03, blinking READY, coins */
html[data-skin="overdrive"] .od-card.g-arcade { background: #111327; color: #fff1e8; border-color: #29adff; font: 400 10px/1 "FX Press", monospace; letter-spacing: .04em; }
.od-card.g-arcade .up { color: #ff004d; } .od-card.g-arcade .up b { font: inherit; color: #fff1e8; }
.od-card.g-arcade .stage-t { font-size: 17px; color: #ffec27; text-shadow: 3px 3px 0 #ff004d; }
.od-card.g-arcade .nm { color: #29adff; text-transform: uppercase; }
.od-card.g-arcade .ready { margin-left: auto; color: #00e436; animation: od-ready 1s steps(1) infinite; }
@keyframes od-ready { 50% { opacity: 0; } }
.od-card.g-arcade .coins { display: flex; gap: 6px; }
.od-card.g-arcade .coins i { width: 11px; height: 11px; background: #ffec27; box-shadow: inset -2px -2px 0 #ab5236; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); animation: od-coin 1.2s steps(2) infinite; }
.od-card.g-arcade .coins i:nth-child(2) { animation-delay: .2s; } .od-card.g-arcade .coins i:nth-child(3) { animation-delay: .4s; }
@keyframes od-coin { 50% { scale: .35 1; } }
/* Y2K: a glossy window title bar and a loading bar */
html[data-skin="overdrive"] .od-card.g-y2k { background: linear-gradient(180deg, #f1edff, #cfc6ff); color: #1d1450; border-color: #fff; text-transform: none; letter-spacing: .02em; }
.od-card.g-y2k .win { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; height: 30px; padding: 0 5px 0 9px; color: #fff; font: 700 12px/1 "FX Geist", sans-serif;
  background: linear-gradient(90deg, #0a246a, #6b2bff 60%, #ff6bd5); border: 2px solid #fff; box-shadow: 0 0 0 1px #1d1450, 3px 3px 0 #1d1450; }
.od-card.g-y2k .ico { width: 14px; height: 14px; flex: none; background: conic-gradient(#ff004d 25%, #00e436 0 50%, #29adff 0 75%, #ffec27 0); }
.od-card.g-y2k .tt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.od-card.g-y2k .btns { display: flex; gap: 3px; }
.od-card.g-y2k .btns i { display: grid; place-items: center; width: 18px; height: 16px; font: 700 10px/1 "FX Mono", monospace; font-style: normal; color: #0a0a0b; background: #d4d0c8; box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #fff; }
.od-card.g-y2k .prog { display: flex; flex: none; width: 160px; height: 16px; padding: 2px; background: #fff; box-shadow: inset 1px 1px 0 #808080, 0 0 0 1px #1d1450; }
.od-card.g-y2k .prog i { flex: 1; background: repeating-linear-gradient(90deg, #6b2bff 0 8px, transparent 8px 10px); transform-origin: left; animation: od-prog 3.4s steps(16) infinite; }
@keyframes od-prog { from { scale: 0 1; } to { scale: 1 1; } }
.od-card.g-y2k .spark { flex: none; color: #ff6bd5; font-size: 18px; animation: od-twinkle 1.6s ease-in-out infinite; }
@keyframes od-twinkle { 50% { scale: .5; opacity: .4; rotate: 45deg; } }
/* Synthwave: sunset, chrome number, grid */
html[data-skin="overdrive"] .od-card.g-synth { background: linear-gradient(180deg, #14042a 0%, #3b0a5c 62%, #ff2e88 140%); color: #fff; border-color: #ff2e88; }
.od-card.g-synth .grid { position: absolute; left: -10%; right: -10%; bottom: 0; height: 55%; pointer-events: none; opacity: .55; transform-origin: bottom; transform: perspective(70px) rotateX(38deg);
  background: repeating-linear-gradient(90deg, rgb(34 211 238 / .7) 0 1px, transparent 1px 44px), repeating-linear-gradient(0deg, rgb(34 211 238 / .7) 0 1px, transparent 1px 9px); }
.od-card.g-synth .sun { width: 40px; height: 40px; flex: none; border-radius: 50%; box-shadow: 0 0 22px #ff2e88;
  background: linear-gradient(180deg, #ffe14d 0 46%, transparent 46% 52%, #ffa03d 52% 64%, transparent 64% 69%, #ff5a7a 69% 80%, transparent 80% 85%, #ff2e88 85%); }
.od-card.g-synth .ep { color: #22d3ee; text-shadow: 0 0 8px #22d3ee; }
html[data-skin="overdrive"] .od-card.g-synth b.big { font: 400 30px/1 "FX Michroma", sans-serif; letter-spacing: .02em; color: transparent;
  background: linear-gradient(180deg, #fff 0 45%, #b49cff 52%, #ff2e88 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 6px rgb(255 46 136 / .8)); }
.od-card.g-synth .nm { font: 700 13px/1 "FX Orbitron", sans-serif; letter-spacing: .22em; color: #ffe14d; text-shadow: 0 0 10px #ff2e88; }
@media (max-width: 760px) {
  .od-card.g-y2k .prog, .od-card.g-arcade .up, .od-card.g-arcade .coins, .od-card.g-persona .cc, .od-card.g-synth .ep { display: none; }
  .od-card.g-persona .ransom i { font-size: 15px; padding: 2px 4px; }
}

/* --- Small details from each guest --- */
html[data-skin="overdrive"] [data-guest="persona"] .label { background: #e60012; color: #fff; rotate: -2deg; box-shadow: 4px 4px 0 #0a0a0b; clip-path: none; }
html[data-skin="overdrive"] [data-guest="arcade"] .label { background: #111327; color: #ffec27; font: 400 10px/1.2 "FX Press", monospace; letter-spacing: .04em; clip-path: none; box-shadow: 0 0 0 3px #29adff; }
html[data-skin="overdrive"] [data-guest="y2k"] .label { background: linear-gradient(180deg, #fff 0 45%, #ddd4ff 50%, #b49cff); color: #1d1450; border-radius: 999px; clip-path: none; box-shadow: inset 0 0 0 1.5px #6b2bff, 0 4px 14px -6px #6b2bff; }
html[data-skin="overdrive"] [data-guest="synth"] .label { background: transparent; color: #ff5fa8; clip-path: none; box-shadow: inset 0 0 0 1.5px #ff2e88, 0 0 16px -3px #ff2e88; text-shadow: 0 0 8px rgb(255 46 136 / .55); }
html[data-skin="overdrive"] [data-guest="persona"] .stage { --steps: repeating-linear-gradient(-45deg, #e60012 0 12px, #0a0a0b 12px 24px); }
html[data-skin="overdrive"] [data-guest="arcade"] .stage { --steps: #111327; }
html[data-skin="overdrive"] [data-guest="y2k"] .stage { --steps: linear-gradient(90deg, #0a246a, #6b2bff 60%, #ff6bd5); }
html[data-skin="overdrive"] [data-guest="synth"] .stage { --steps: linear-gradient(90deg, #14042a, #6b2bff 55%, #ff2e88); }
@media (prefers-color-scheme: light) { html[data-skin="overdrive"] [data-guest="synth"] .label { color: #c8005f; text-shadow: none; } }
/* Phones: the button only shows the language it switches to, and the header tightens up */
@media (max-width: 560px) {
  .top nav { gap: 14px; }
  .has-js .fun-toggle { margin-left: 14px; }
  .lang-toggle i, html:not([lang="fr"]) .lang-toggle b[data-l="en"], html[lang="fr"] .lang-toggle b[data-l="fr"] { display: none; }
  .lang-toggle b { opacity: 1 !important; }
}
/* Homebrew: the diff sits in a stage like the other projects, which animates for it */
html[data-fun] .stage .diff { animation: none !important; }
/* Its copy is short, so a centred window would hide the 09: start it where the number thins out, as on the projects */
/* The whole window is a link in fun mode, so the diff cannot scroll: it shrinks a little, then wraps on small screens */
@media (min-width: 960px) { html[data-fun] .diff-stage .diff { font-size: clamp(9.5px, .94vw, 12px); } }
@media (max-width: 959px) { html[data-fun] .diff-stage .diff :is(span, del, ins) { white-space: pre-wrap; overflow-wrap: anywhere; } }
@media (min-width: 960px) { html[data-skin="overdrive"] .upstream .stage { align-self: start; margin-top: calc(70px + clamp(110px, 17.4vw, 258px) - clamp(56px, 9vw, 112px)); } }

/* Particles animated from JS (Web Animations): their CSS keyframes stay off */
.fx-p.fx-js:not(.coin), .fx-spark.fx-js, .od-confetti.fx-js { animation: none !important; }
.fx-cheat b { font-size: clamp(2.4rem, 8vw, 6rem); }