/* Kaito Toba #27 · direction A v2 "Pit Wall · Livery" (26 Oct 2026)
   Palette sampled from Kaito's own Shoei helmets: deep violet, purple-sector violet, orange, amber, yellow. */
html:not(.ja) .l-ja, html.ja .l-en { display: none !important; }
:root {
  --ink: #0b0712; --ink2: #120b1c; --pan: #1a1127; --pan2: #231636; --line: rgba(222, 205, 255, .12);
  --vid: #3a1050; --vi: #6d2085; --vi2: #8a4ff0; --lil: #c9b3ff;
  --or: #fb5d13; --am: #fb9219; --ye: #f3c94d; --wh: #f7f3ff; --mut: #a597bd;
  --disp: "Big Shoulders Display", "Dela Gothic One", Impact, sans-serif;
  --hud: "Chakra Petch", "Noto Sans JP", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --body: "Chakra Petch", "Noto Sans JP", sans-serif;
  --skew: -9deg;
}
html.ja { --disp: "Dela Gothic One", "Big Shoulders Display", sans-serif; --body: "Noto Sans JP", sans-serif; }
html.ja body { font-feature-settings: "palt"; line-break: strict; word-break: auto-phrase; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--wh); font: 400 16px/1.6 var(--body); overflow-x: hidden; }
body::before { /* carbon weave + grain */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.25) 0 2px, transparent 2px 6px);
}
main, header, footer, .ticker { position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

/* lap progress (scroll) */
.lap { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: rgba(255,255,255,.06); }
.lap i { display: block; height: 100%; width: calc(var(--sp, 0) * 100%); background: linear-gradient(90deg, var(--vi2), var(--or), var(--ye)); box-shadow: 0 0 12px var(--or); }

/* ticker */
.ticker { background: var(--or); color: #170806; overflow: hidden; white-space: nowrap; font: 700 italic 13px var(--hud); letter-spacing: .14em; }
.ticker-in { display: inline-flex; gap: 28px; padding: 7px 0; animation: tick 38s linear infinite; }
.ticker b { color: var(--vid); }
@keyframes tick { to { transform: translateX(-50%); } }

/* header */
.bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 12px 40px;
  background: rgba(11, 7, 18, .78); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.badge { display: inline-grid; place-items: center; width: 46px; height: 40px; font: 900 30px/1 var(--disp); font-family: "Big Shoulders Display", sans-serif;
  color: #fff; transform: skewX(var(--skew)); background: linear-gradient(135deg, var(--vi) 0 48%, var(--or) 48% 72%, var(--ye) 72% 78%, var(--vi2) 78%);
  box-shadow: 0 0 0 2px #fff inset; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.nm { font: 800 22px/1 var(--disp); letter-spacing: .06em; display: flex; flex-direction: column; }
.nm small { font: 600 9px var(--mono); letter-spacing: .3em; color: var(--am); margin-top: 3px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { position: relative; padding: 8px 12px; font: 600 13px var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); transition: color .2s; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; transform: skewX(var(--skew)) scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--vi2), var(--or)); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.nav a:hover, .nav a[aria-current] { color: #fff; }
.nav a:hover::after, .nav a[aria-current]::after { transform: skewX(var(--skew)) scaleX(1); }
.lang { display: flex; transform: skewX(var(--skew)); border: 1px solid var(--line); overflow: hidden; font: 700 12px var(--mono); }
.lang button { padding: 7px 11px; color: var(--mut); }
.lang button[aria-pressed="true"] { background: var(--vi2); color: #fff; }
.lang.sm { display: inline-flex; margin-left: 14px; vertical-align: middle; }
.burger { display: none; width: 40px; height: 34px; flex-direction: column; justify-content: center; gap: 5px; }
.burger i { display: block; height: 3px; background: #fff; transform: skewX(var(--skew)); }
.burger i:nth-child(2) { background: var(--or); width: 70%; }

/* sector rail */
.rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 6px; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font: 700 10px var(--mono); color: var(--mut); }
.rail a span { opacity: 0; transform: translateX(6px); transition: .25s; font-family: var(--hud); letter-spacing: .1em; text-transform: uppercase; }
.rail a b { width: 34px; padding: 4px 0; text-align: center; transform: skewX(var(--skew)); background: rgba(255,255,255,.06); border: 1px solid var(--line); transition: .3s; }
.rail a:hover span, .rail a.on span { opacity: 1; transform: none; }
.rail a.done b { background: rgba(138, 79, 240, .35); color: #fff; }
.rail a.on b { background: var(--vi2); color: #fff; box-shadow: 0 0 16px var(--vi2); border-color: var(--lil); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; font: 700 15px var(--hud); letter-spacing: .14em; text-transform: uppercase;
  transform: skewX(var(--skew)); transition: transform .2s, box-shadow .2s, background .2s; }
.btn > * { transform: skewX(calc(var(--skew) * -1)); }
.btn.or { background: var(--or); color: #170806; box-shadow: 6px 6px 0 var(--vi); }
.btn.or:hover { transform: skewX(var(--skew)) translate(-3px, -3px); box-shadow: 9px 9px 0 var(--vi2); }
.btn.ghost { border: 2px solid rgba(255,255,255,.7); color: #fff; }
.btn.ghost:hover { background: #fff; color: var(--ink); }

/* HERO */
.hero { position: relative; min-height: 740px; height: calc(100vh - 98px); max-height: 940px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.hero-bg { position: absolute; inset: -6% 0 -6%; z-index: -3; transform: translateY(calc(var(--py, 0) * 1px)); }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; filter: saturate(1) contrast(1.12); animation: zoom 9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes zoom { from { transform: scale(1.18); } to { transform: scale(1.02); } }
.hero-tint { position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(11,7,18,.94) 0%, rgba(30,9,48,.7) 30%, rgba(58,16,80,.05) 58%, rgba(11,7,18,.35) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 38%),
    radial-gradient(60% 50% at 80% 30%, rgba(251,93,19,.28), transparent 70%); }
.hero-tint::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 62%, rgba(109,32,133,.4)); mix-blend-mode: color; }
.streaks { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.streaks i { position: absolute; left: 0; height: 2px; border-radius: 2px; opacity: .55;
  background: linear-gradient(90deg, transparent, var(--c)); animation: streak linear infinite; }
@keyframes streak { from { transform: translateX(110vw); } to { transform: translateX(-40vw); } }
.livery { position: absolute; pointer-events: none; }
.livery .bl { transform-box: fill-box; }
.hero-liv { left: 0; right: 0; bottom: 0; width: 100%; height: 62%; z-index: -1; opacity: .92; mix-blend-mode: screen; }
.hero-liv .b1 { animation: blade 1.2s .9s cubic-bezier(.2,.8,.2,1) both; }
.hero-liv .b2 { animation: blade 1.2s 1.05s cubic-bezier(.2,.8,.2,1) both; }
.hero-liv .b3, .hero-liv .b4 { stroke-dasharray: 2400; animation: draw 1.6s 1.2s ease-out both; }
@keyframes blade { from { transform: translateX(-100%) skewX(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes draw { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } }

.lights { position: absolute; top: 36px; left: 40px; display: flex; align-items: center; gap: 10px; z-index: 3; }
.lights i { width: 18px; height: 18px; border-radius: 50%; background: #2a1a33; box-shadow: inset 0 0 0 2px #000; animation: light 2.6s both; }
.lights i:nth-child(1) { animation-delay: .1s; } .lights i:nth-child(2) { animation-delay: .25s; } .lights i:nth-child(3) { animation-delay: .4s; }
.lights i:nth-child(4) { animation-delay: .55s; } .lights i:nth-child(5) { animation-delay: .7s; }
@keyframes light { 0%, 1% { background: #2a1a33; box-shadow: inset 0 0 0 2px #000; }
  6%, 34% { background: var(--or); box-shadow: 0 0 18px var(--or), 0 0 4px var(--ye) inset; }
  36%, 100% { background: #2a1a33; box-shadow: inset 0 0 0 2px #000; } }
.lights span { font: 700 italic 12px var(--hud); letter-spacing: .3em; color: var(--ye); margin-left: 8px; animation: fadein .3s 1.05s both; }
@keyframes fadein { from { opacity: 0; } }

.hero-in { position: relative; display: grid; grid-template-columns: 1fr 340px; align-items: end; gap: 40px; padding: 0 96px 40px 40px; }
.bignum { position: absolute; right: 360px; bottom: -40px; font: 900 clamp(320px, 42vw, 640px)/.8 "Big Shoulders Display", sans-serif; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 3px rgba(251, 146, 25, .55); transform: skewX(var(--skew)); z-index: -1;
  background: linear-gradient(180deg, rgba(138,79,240,.35), transparent 80%); -webkit-background-clip: text; background-clip: text;
  animation: numin 1.4s .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes numin { from { transform: skewX(var(--skew)) translateX(30%); opacity: 0; } }
.kicker { font: 600 12px var(--mono); letter-spacing: .26em; color: var(--am); text-transform: uppercase; }
.hero h1 { margin: 10px 0 6px; font: 900 clamp(96px, 12vw, 190px)/.82 var(--disp); letter-spacing: -.01em; text-transform: uppercase; transform: skewX(var(--skew)); }
.hero h1 span span { display: block; }
.hero h1 .w1 { animation: slide 1s 1.15s cubic-bezier(.2,.9,.2,1) both; }
.hero h1 .w2 { color: transparent; -webkit-text-stroke: 2px #fff; animation: slide 1s 1.3s cubic-bezier(.2,.9,.2,1) both; position: relative; }
.hero h1 .w2::after { content: ""; }
html.ja .hero h1 { font-size: clamp(84px, 10vw, 160px); line-height: .98; }
@keyframes slide { from { transform: translateX(-60px); opacity: 0; filter: blur(8px); } }
.hero .sub { font: 600 15px var(--hud); letter-spacing: .12em; color: var(--lil); }
.hero-txt > .kicker, .hero .sub, .cta { animation: rise .8s 1.5s both; }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
.cta { display: flex; gap: 18px; margin-top: 26px; flex-wrap: wrap; }

/* timing tower */
.tower { background: rgba(18, 11, 28, .82); backdrop-filter: blur(10px); border: 1px solid var(--line); border-top: 3px solid var(--vi2); padding: 16px 18px; font-family: var(--mono);
  transform: skewX(-4deg); animation: rise .9s 1.7s both; }
.tw-hd { display: flex; justify-content: space-between; font: 700 11px var(--mono); letter-spacing: .2em; color: var(--mut); }
.live { color: #fff; display: flex; align-items: center; gap: 6px; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--or); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.tw-lap { margin: 12px 0 10px; }
.tw-lap small, .tw-row small, .tw-sec small { display: block; font: 600 10px var(--mono); letter-spacing: .2em; color: var(--mut); }
.tw-lap b { font: 700 46px/1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.tower.purple .tw-lap b { color: var(--lil); text-shadow: 0 0 18px var(--vi2); }
.tw-sec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tw-sec i { display: block; height: 8px; margin-top: 4px; background: #2b2038; transform: skewX(var(--skew)); transition: background .2s; }
.tw-sec .g i { background: #29d17a; } .tw-sec .y i { background: var(--ye); } .tw-sec .p i { background: var(--vi2); box-shadow: 0 0 10px var(--vi2); }
.tw-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.tw-row b { font: 700 24px/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.tw-row div:first-child b { color: var(--am); }
.tw-trace { width: 100%; height: 44px; margin-top: 8px; }
.tw-trace polyline, .telemetry polyline { fill: none; stroke: var(--or); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tw-trace polyline { stroke-dasharray: 900; animation: draw2 4s linear infinite; }
@keyframes draw2 { from { stroke-dashoffset: 900; } to { stroke-dashoffset: -900; } }

.hud { position: relative; display: flex; gap: 0; border-top: 1px solid var(--line); background: rgba(11,7,18,.7); backdrop-filter: blur(8px); animation: rise .8s 1.9s both; }
.chip { flex: 1; padding: 14px 20px; border-right: 1px solid var(--line); }
.chip small { display: block; font: 600 10px var(--mono); letter-spacing: .2em; color: var(--mut); }
.chip b { font: 700 18px var(--hud); }
.chip:nth-child(odd) b { color: var(--lil); }

/* kerbs */
.kerb { height: 16px; position: relative; z-index: 2;
  background: repeating-linear-gradient(90deg, var(--or) 0 56px, #fff 56px 112px);
  background-position: calc(var(--sy, 0) * -0.6px) 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); box-shadow: 0 0 30px rgba(251,93,19,.35); }
.kerb.k-violet { background-image: repeating-linear-gradient(90deg, var(--vi2) 0 56px, #fff 56px 112px); box-shadow: 0 0 30px rgba(138,79,240,.4); }
.kerb.k-foot { background-image: repeating-linear-gradient(90deg, var(--vi) 0 56px, var(--or) 56px 112px, var(--ye) 112px 120px); }

/* sections */
.sec { position: relative; padding: 110px 96px 90px 40px; max-width: 1560px; margin: 0 auto; }
.sec-hd { display: flex; align-items: flex-end; gap: 22px; margin-bottom: 40px; padding-bottom: 16px; border-bottom: 1px solid var(--line); position: relative; }
.sec-hd::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 3px; width: 140px; background: linear-gradient(90deg, var(--vi2), var(--or)); transform: skewX(var(--skew)); }
.sx { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; transform: skewX(var(--skew));
  background: var(--vi); font: 900 34px/1 "Big Shoulders Display", sans-serif; color: #fff; box-shadow: 4px 4px 0 var(--or); }
.sx small { font: 700 8px var(--mono); letter-spacing: .2em; color: var(--lil); }
.sec-hd h2 { font: 900 clamp(48px, 6vw, 88px)/.9 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); }
html.ja .sec-hd h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.1; }
.more { margin-left: auto; font: 600 13px var(--mono); letter-spacing: .12em; color: var(--am); white-space: nowrap; }
a.more:hover { color: #fff; }

/* reveal on scroll (only when JS runs) */
html.js .rv { opacity: 0; transform: translateX(-40px) skewX(-6deg); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
html.js .rv.in { opacity: 1; transform: none; }

/* news */
.news-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 28px; align-items: stretch; }
.lead { position: relative; isolation: isolate; overflow: hidden; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; border: 1px solid var(--line); }
.lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.lead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11,7,18,.95) 15%, rgba(58,16,80,.35) 60%, transparent); }
.lead:hover img { transform: scale(1.06); }
.lead-tag { font: 700 12px var(--mono); letter-spacing: .16em; color: var(--am); }
.lead-tag b { background: var(--or); color: #170806; padding: 2px 8px; margin-right: 6px; }
.lead-t { font: 900 46px/.95 var(--disp); text-transform: uppercase; margin: 10px 0; transform: skewX(var(--skew)); }
html.ja .lead-t { font-size: 32px; line-height: 1.25; }
.lead-d { font: 600 12px var(--mono); color: var(--mut); letter-spacing: .1em; }

.board { border: 1px solid var(--line); background: rgba(18, 11, 28, .6); }
.board .row { display: grid; grid-template-columns: 74px 1fr 82px 130px 36px; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.board .row.hd { font: 700 10px var(--mono); letter-spacing: .2em; color: var(--mut); padding: 10px 18px; background: rgba(255,255,255,.03); }
a.row::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(138,79,240,.35), rgba(251,93,19,.15) 60%, transparent); transform: translateX(-101%); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
a.row:hover::before { transform: none; }
a.row > * { position: relative; }
.pos { font: 900 30px/1 "Big Shoulders Display", sans-serif; color: var(--lil); transform: skewX(var(--skew)); border-left: 4px solid var(--or); padding-left: 10px; }

.rnd { font: 700 13px var(--mono); background: var(--pan2); padding: 4px 8px; text-align: center; transform: skewX(var(--skew)); border-left: 3px solid var(--or); }
.ev b { display: block; font: 800 22px/1.05 var(--disp); letter-spacing: .02em; }
html.ja .ev b { font-size: 18px; }
.ev em { display: block; font: 400 13px/1.4 var(--body); color: var(--mut); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ser { font: 700 11px var(--mono); letter-spacing: .14em; padding: 4px 8px; text-align: center; border: 1px solid var(--vi2); color: var(--lil); }
.ser.s-ewc { border-color: var(--am); color: var(--am); }
.dt { font: 500 12px var(--mono); color: var(--mut); }
.go { font: 700 20px var(--mono); color: var(--or); transition: transform .3s; }
a.row:hover .go { transform: translateX(6px); }

/* stats band */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); background: linear-gradient(100deg, var(--vid), var(--vi) 50%, #4d1772); position: relative; overflow: hidden; }
.stats::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.04) 22px 24px); }
.stat { position: relative; padding: 46px 40px; border-right: 1px solid rgba(255,255,255,.12); }
.stat b { display: block; font: 900 96px/.85 "Big Shoulders Display", sans-serif; transform: skewX(var(--skew)); font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 30%, var(--ye)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat small { font: 700 12px var(--mono); letter-spacing: .2em; color: var(--lil); }

/* rider */
.rider-grid { display: grid; grid-template-columns: 420px 1fr; gap: 56px; align-items: start; }
.portrait { position: relative; background: linear-gradient(160deg, var(--pan2), var(--ink2)); border: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.portrait img { position: relative; z-index: 1; width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 15%; mix-blend-mode: multiply; filter: contrast(1.05); }
.portrait { background: #f3eefc; }
.port-liv { inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .85; }
.portrait figcaption { position: absolute; z-index: 2; right: 14px; bottom: 6px; font: 900 110px/1 "Big Shoulders Display", sans-serif; transform: skewX(var(--skew)); color: var(--or); -webkit-text-stroke: 2px #fff; }
.grid-prof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cell { background: var(--ink2); padding: 16px 18px; position: relative; }
.cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--vi2); }
.cell:nth-child(4n+2)::before { background: var(--or); } .cell:nth-child(4n+3)::before { background: var(--am); }
.cell small { display: block; font: 600 10px var(--mono); letter-spacing: .2em; color: var(--mut); }
.cell b { font: 700 19px var(--hud); }
.bio { margin: 28px 0; font-size: 17px; line-height: 1.75; color: #e3dbf2; max-width: 68ch; }
html.ja .bio { font-size: 16px; line-height: 1.95; }
.telemetry { border: 1px solid var(--line); background: var(--ink2); padding: 14px 18px; }
.tl-hd { display: flex; justify-content: space-between; font: 600 10px var(--mono); letter-spacing: .2em; color: var(--mut); margin-bottom: 6px; }
.telemetry svg { width: 100%; height: 110px; background: repeating-linear-gradient(0deg, transparent 0 21px, rgba(255,255,255,.05) 21px 22px), repeating-linear-gradient(90deg, transparent 0 59px, rgba(255,255,255,.04) 59px 60px); }
.telemetry .trc { stroke: var(--vi2); stroke-width: 2.5; filter: drop-shadow(0 0 6px var(--vi2)); stroke-dasharray: 1600; stroke-dashoffset: 1600; transition: stroke-dashoffset 2.6s ease-out .3s; }
html:not(.js) .telemetry .trc, .telemetry.in .trc { stroke-dashoffset: 0; }
.career { margin-top: 70px; }
.career h3 { font: 800 28px var(--disp); text-transform: uppercase; margin-bottom: 22px; transform: skewX(var(--skew)); }
.career ol { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.career ol::before { content: ""; position: absolute; left: 0; right: 0; top: 50px; height: 4px; background: repeating-linear-gradient(90deg, var(--or) 0 28px, #fff 28px 56px); }
.career li { position: relative; padding-right: 14px; }
.career .yr { display: block; font: 900 40px/1 "Big Shoulders Display", sans-serif; color: var(--lil); transform: skewX(var(--skew)); }
.career .dot { display: block; width: 18px; height: 18px; margin: 10px 0 14px; transform: skewX(var(--skew)); background: var(--vi2); border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--vi2); position: relative; z-index: 1; }
.career li:nth-child(5) .dot { background: var(--ye); box-shadow: 0 0 0 2px var(--ye), 0 0 18px var(--ye); }
.career li p { font-size: 14px; line-height: 1.45; color: #d9cfec; }

/* photos */
.photos { max-width: none; padding-right: 0; padding-left: 0; }
.photos .sec-hd { margin: 0 96px 40px 40px; }
.film { overflow: hidden; padding: 10px 0 30px; }
.film-in { display: flex; gap: 18px; width: max-content; padding-left: 40px; transform: translateX(calc(var(--slide, 0) * -1px)); will-change: transform; }
.film figure { position: relative; width: 460px; height: 320px; overflow: hidden; transform: skewX(var(--skew)); border: 1px solid var(--line); flex: none; }
.film figure:nth-child(even) { width: 380px; margin-top: 50px; }
.film img { width: 120%; height: 100%; margin-left: -10%; object-fit: cover; transform: skewX(calc(var(--skew) * -1)) scale(1.04); transition: transform .6s, filter .6s; filter: saturate(.8); }
.film figure:hover img { transform: skewX(calc(var(--skew) * -1)) scale(1.12); filter: saturate(1.1); }
.film figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(58,16,80,.75), transparent 50%); }
.film figcaption { position: absolute; z-index: 1; left: 22px; bottom: 14px; font: 700 12px var(--mono); letter-spacing: .2em; color: var(--ye); transform: skewX(calc(var(--skew) * -1)); }

/* merch drop */
.drop-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.prod { position: relative; display: flex; flex-direction: column; background: var(--ink2); border: 1px solid var(--line); overflow: hidden; transition: border-color .3s, transform .3s; }
.prod.big { grid-row: span 2; }
.prod:hover { border-color: var(--or); transform: translateY(-4px); }
.sku { display: flex; justify-content: space-between; padding: 10px 14px; font: 700 11px var(--mono); letter-spacing: .14em; color: var(--mut); border-bottom: 1px solid var(--line); }
.sku em { font-style: normal; color: var(--am); }
.pimg { position: relative; flex: 1; display: grid; place-items: center; padding: 18px; min-height: 220px;
  background: radial-gradient(70% 70% at 50% 55%, #fff 0 45%, #efe9fb 70%), #fff; overflow: hidden; }
.pimg::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s;
  background: linear-gradient(115deg, transparent 30%, var(--vi) 30% 52%, var(--or) 52% 62%, var(--ye) 62% 64%, transparent 64%); }
.prod:hover .pimg::before { opacity: .9; }
.pimg img { position: relative; max-height: 240px; object-fit: contain; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.prod.big .pimg img { max-height: 520px; }
.prod:hover .pimg img { transform: scale(1.06) rotate(-2deg); }
.pinfo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px; }
.pinfo b { font: 700 17px/1.2 var(--hud); }
.prod.big .pinfo b { font: 900 34px/1 var(--disp); text-transform: uppercase; }
.price { font: 700 14px var(--mono); color: var(--am); white-space: nowrap; }
.add { position: absolute; right: 12px; top: 46px; width: 36px; height: 36px; display: grid; place-items: center; background: var(--or); color: #170806; font: 700 22px var(--mono); transform: skewX(var(--skew)) scale(0); transition: transform .3s; }
.prod:hover .add { transform: skewX(var(--skew)) scale(1); }
.prod.big::after { content: "DROP 27"; position: absolute; left: 14px; top: 50px; font: 900 22px "Big Shoulders Display", sans-serif; letter-spacing: .1em; background: var(--vi); padding: 4px 12px; transform: skewX(var(--skew)); box-shadow: 4px 4px 0 var(--or); }
.prods.all { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* sponsors */
.sponsors { max-width: none; padding-left: 40px; padding-right: 96px; overflow: hidden; isolation: isolate; }
.sp-bg { position: absolute; inset: -10% 0; z-index: -1; transform: translateY(calc(var(--py, 0) * 1px)); }
.sp-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: grayscale(1) contrast(1.3); }
.sp-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink), rgba(58,16,80,.7) 40%, rgba(58,16,80,.8) 70%, var(--ink)); mix-blend-mode: multiply; }
.sponsors > *:not(.sp-bg) { max-width: 1424px; margin-left: auto; margin-right: auto; }
.logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.logo { height: 104px; display: grid; place-items: center; padding: 16px; background: #fbf9ff; transform: skewX(var(--skew)); position: relative; overflow: hidden; }
.logo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--vi2); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.logo:hover::after { transform: scaleX(1); }
.logo img { max-height: 70px; max-width: 86%; object-fit: contain; transform: skewX(calc(var(--skew) * -1)); mix-blend-mode: multiply; filter: grayscale(1) contrast(1.1); transition: filter .3s; }
.logo:hover img { filter: none; }
.train { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.train small { font: 700 11px var(--mono); letter-spacing: .2em; color: var(--lil); margin-right: 8px; }
.logo.sm { width: 150px; height: 64px; padding: 10px; }
.logo.sm img { max-height: 44px; }
.pitch { display: flex; align-items: center; gap: 36px; margin-top: 46px; padding: 30px 34px; background: rgba(11,7,18,.75); border-left: 5px solid var(--or); }
.pitch p { font-size: 18px; line-height: 1.7; max-width: 80ch; }
html.ja .pitch p { font-size: 16px; line-height: 1.9; }
.pitch .btn { flex: none; }

/* contact */
.contact { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; }
.radio { display: flex; align-items: center; gap: 12px; font: 700 12px var(--mono); letter-spacing: .2em; color: var(--am); margin-bottom: 20px; }
.rx { display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.rx i { width: 4px; background: var(--vi2); animation: eq 1s ease-in-out infinite; }
.rx i:nth-child(2) { animation-delay: .15s; } .rx i:nth-child(3) { animation-delay: .3s; } .rx i:nth-child(4) { animation-delay: .45s; } .rx i:nth-child(5) { animation-delay: .6s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 20px; } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font: 600 11px var(--mono); letter-spacing: .16em; color: var(--mut); text-transform: uppercase; }
.form .full { grid-column: span 2; }
.form input, .form textarea { background: var(--ink2); border: 1px solid var(--line); border-bottom: 2px solid var(--vi); color: var(--wh); padding: 13px; font: 16px var(--body); outline: none; transition: border-color .2s, background .2s; }
.form input:focus, .form textarea:focus { border-bottom-color: var(--or); background: var(--pan); }
.form button { justify-self: start; background: var(--or); color: #170806; padding: 14px 30px; font: 700 15px var(--hud); letter-spacing: .16em; text-transform: uppercase; transform: skewX(var(--skew)); box-shadow: 6px 6px 0 var(--vi); }
.form-note { grid-column: span 2; font: 13px var(--mono); color: var(--mut); }
.soc-big { align-self: end; display: flex; flex-direction: column; gap: 10px; }
.soc-big h3 { font: 900 44px/1 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); margin-bottom: 8px; }
.soc { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 20px; background: var(--ink2); border: 1px solid var(--line); font: 800 26px var(--disp); text-transform: uppercase;
  transform: skewX(var(--skew)); transition: background .3s, transform .3s; }
.soc small { font: 600 12px var(--mono); color: var(--mut); text-transform: none; }
.soc:hover { background: linear-gradient(90deg, var(--vi), var(--vi2)); transform: skewX(var(--skew)) translateX(8px); }

/* footer */
.foot { position: relative; overflow: hidden; padding: 70px 96px 30px 40px; background: var(--ink2); isolation: isolate; }
.foot-liv { inset: auto 0 0 0; width: 100%; height: 100%; opacity: .35; z-index: -1; }
.foot-big { font: 900 clamp(160px, 24vw, 380px)/.8 "Big Shoulders Display", sans-serif; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 2px rgba(201,179,255,.35); transform: skewX(var(--skew)); white-space: nowrap; }
.foot-big span { color: var(--or); -webkit-text-stroke: 0; margin-left: .1em; }
.foot-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-top: 30px; }
.foot-row > div:first-child { display: flex; gap: 16px; align-items: center; font: 500 14px var(--mono); color: var(--mut); }
.foot-row a { color: var(--am); }
.foot-soc { display: flex; gap: 10px; }
.foot-soc .soc { font-size: 16px; padding: 8px 14px; }
.foot-soc .soc small { display: none; }
.foot-legal { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font: 12px var(--mono); color: var(--mut); }

/* inner pages */
.page-hd { position: relative; overflow: hidden; padding: 90px 96px 50px 40px; min-height: 380px; isolation: isolate; background: radial-gradient(70% 90% at 90% 0%, rgba(138,79,240,.35), transparent 60%), var(--ink2); }
.pg-liv { left: 0; right: 0; bottom: 0; width: 100%; height: 75%; opacity: .7; z-index: -1; mix-blend-mode: screen; }
.pg-liv .b1, .pg-liv .b2 { animation: blade 1.1s .2s cubic-bezier(.2,.8,.2,1) both; }
.page-hd h1 { font: 900 clamp(96px, 13vw, 200px)/.85 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); margin: 8px 0 22px; animation: slide .9s .15s cubic-bezier(.2,.9,.2,1) both; }
html.ja .page-hd h1 { font-size: clamp(72px, 9vw, 140px); line-height: 1.05; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chipbtn { padding: 8px 16px; font: 700 13px var(--mono); border: 1px solid var(--line); background: rgba(11,7,18,.6); transform: skewX(var(--skew)); }
.chipbtn.on { background: var(--vi2); border-color: var(--vi2); }
.count { margin-left: 14px; font: 500 12px var(--mono); color: var(--mut); }
.cart { position: absolute; right: 96px; top: 90px; padding: 10px 18px; background: var(--or); color: #170806; font: 700 14px var(--hud); letter-spacing: .14em; transform: skewX(var(--skew)); box-shadow: 5px 5px 0 var(--vi); }
.cart b { background: #170806; color: var(--or); padding: 0 7px; margin-left: 6px; }
.drop-line { font: 600 16px var(--hud); color: var(--lil); margin: -6px 0 22px; }
.drop-line b { background: var(--vi); color: #fff; padding: 3px 10px; margin-right: 8px; font-family: "Big Shoulders Display", sans-serif; font-weight: 900; letter-spacing: .1em; }
.note p { max-width: 80ch; color: var(--mut); border-left: 3px solid var(--vi2); padding-left: 18px; }
.inner .sec { padding-top: 60px; }

/* article */
.article { max-width: 1560px; margin: 0 auto; padding: 0 96px 100px 40px; }
.art-hero { position: relative; height: 560px; overflow: hidden; }
.art-hero img { width: 100%; height: 120%; object-fit: cover; transform: translateY(calc(var(--py, 0) * 1px)); }
.art-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink), transparent 50%), linear-gradient(90deg, rgba(58,16,80,.6), transparent 60%); }
.art-tag { position: absolute; z-index: 1; left: 30px; bottom: 26px; font: 700 14px var(--mono); letter-spacing: .16em; color: var(--am); }
.art-tag .rnd { color: #fff; margin-right: 8px; }
.art-body { max-width: 860px; margin: -40px auto 0; position: relative; z-index: 1; }
.art-body h2 { font: 900 64px/.95 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); margin-bottom: 30px; }
html.ja .art-body h2 { font-size: 40px; line-height: 1.3; }
.sectors-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 34px; }
.sectors-row div { padding: 14px 16px; background: var(--ink2); border-top: 4px solid var(--ye); font-size: 14px; line-height: 1.45; }
.sectors-row div.p { border-top-color: var(--vi2); }
.sectors-row small { display: block; font: 700 11px var(--mono); letter-spacing: .2em; color: var(--mut); margin-bottom: 4px; }
.art-body > p { font-size: 18px; line-height: 1.8; margin-bottom: 20px; color: #e3dbf2; }
html.ja .art-body > p { font-size: 16.5px; line-height: 2; }
.art-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 30px; }
.art-gal img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transform: skewX(var(--skew)); }

/* phone */
@media (max-width: 900px) {
  .rail { display: none; }
  .bar { padding: 10px 16px; gap: 12px; }
  .nm { font-size: 18px; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; padding: 12px 16px 20px; background: rgba(11,7,18,.97); border-bottom: 3px solid var(--or); }
  .menu-open .nav { display: flex; }
  .nav a { font-size: 18px; padding: 12px 6px; }
  .lang { margin-left: auto; }
  .burger { display: flex; }
  .hero { height: auto; min-height: 0; max-height: none; padding-top: 110px; }
  .hero-in { grid-template-columns: 1fr; padding: 0 18px 24px; gap: 26px; }
  .bignum { right: -20px; top: -10px; bottom: auto; font-size: 300px; }
  .lights { left: 18px; top: 22px; }
  .hero h1 { font-size: 92px; }
  html.ja .hero h1 { font-size: 80px; }
  .hero-liv { height: 40%; }
  .tower { transform: none; }
  .tw-lap b { font-size: 40px; }
  .hud { flex-wrap: wrap; }
  .chip { flex: 1 1 50%; padding: 10px 16px; border-bottom: 1px solid var(--line); }
  .kerb { height: 12px; background-size: auto; }
  .sec { padding: 64px 18px 56px; }
  .sec-hd { flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
  .sx { width: 50px; height: 50px; font-size: 26px; }
  .sec-hd h2 { font-size: 52px; }
  html.ja .sec-hd h2 { font-size: 34px; }
  .more { margin-left: 0; width: 100%; }
  .news-grid { grid-template-columns: 1fr; }
  .lead { min-height: 360px; }
  .lead-t { font-size: 38px; }
  .board .row { grid-template-columns: 58px 1fr 24px; padding: 12px; gap: 10px; }
  .board .row .ser, .board .row .dt, .board .row.hd span:nth-child(3), .board .row.hd span:nth-child(4) { display: none; }
  .pos { font-size: 24px; }
  .ev em { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 28px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .stat b { font-size: 64px; }
  .stat small { font-size: 10px; }
  .rider-grid { grid-template-columns: 1fr; gap: 26px; }
  .grid-prof { grid-template-columns: 1fr 1fr; }
  .career ol { grid-template-columns: 1fr; gap: 0; padding-left: 26px; }
  .career ol::before { left: 7px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; background: repeating-linear-gradient(180deg, var(--or) 0 22px, #fff 22px 44px); }
  .career li { display: grid; grid-template-columns: 70px 1fr; align-items: center; padding: 8px 0; }
  .career .yr { font-size: 30px; }
  .career .dot { position: absolute; left: -26px; margin: 0; }
  .photos .sec-hd { margin: 0 18px 26px; }
  .film { overflow-x: auto; scroll-snap-type: x mandatory; }
  .film-in { transform: none; padding-left: 18px; padding-right: 18px; }
  .film figure, .film figure:nth-child(even) { width: 78vw; height: 240px; margin-top: 0; scroll-snap-align: center; }
  .drop-grid, .prods.all { grid-template-columns: 1fr 1fr; gap: 10px; }
  .prod.big { grid-column: span 2; grid-row: auto; }
  .prod.big .pimg img { max-height: 300px; }
  .prod.big .pinfo b { font-size: 26px; }
  .pimg { min-height: 150px; padding: 10px; }
  .pimg img { max-height: 150px; }
  .pinfo { flex-direction: column; gap: 4px; padding: 10px; }
  .pinfo b { font-size: 14px; }
  .sku { font-size: 9px; padding: 8px 10px; }
  .add { transform: skewX(var(--skew)) scale(1); top: auto; bottom: 10px; width: 30px; height: 30px; }
  .sponsors { padding: 64px 18px 56px; }
  .logos { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .logo { height: 70px; padding: 8px; }
  .logo img { max-height: 46px; }
  .train { flex-wrap: wrap; }
  .logo.sm { width: 120px; height: 54px; }
  .pitch { flex-direction: column; align-items: flex-start; padding: 22px; gap: 20px; }
  .pitch p { font-size: 16px; }
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .form { grid-template-columns: 1fr; }
  .form .full, .form-note { grid-column: auto; }
  .foot { padding: 50px 18px 24px; }
  .foot-big { font-size: 130px; }
  .foot-row { flex-direction: column; align-items: flex-start; }
  .foot-soc { flex-wrap: wrap; }
  .page-hd { padding: 60px 18px 36px; min-height: 0; }
  .page-hd h1 { font-size: 92px; }
  html.ja .page-hd h1 { font-size: 64px; }
  .cart { position: static; display: inline-block; margin-top: 18px; }
  .count { margin-left: 0; width: 100%; margin-top: 6px; }
  .article { padding: 0 0 70px; }
  .art-hero { height: 320px; }
  .art-body { padding: 0 18px; }
  .art-body h2 { font-size: 44px; }
  html.ja .art-body h2 { font-size: 28px; }
  .sectors-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .streaks { display: none; }
}

/* full-page screenshot mode (tools/shoot-violet.mjs) */
html.shot .bar { position: relative; }
html.shot .rail, html.shot .lap { display: none; }

/* Japanese display face (Dela Gothic One) has a single weight: never let the browser fake-bold it */
html { font-synthesis: none; }
html.ja .hero h1 .w2 { color: var(--or); -webkit-text-stroke: 0; }
html.ja .nm .l-ja, html.ja .hero h1, html.ja .sec-hd h2, html.ja .page-hd h1, html.ja .lead-t, html.ja .art-body h2, html.ja .soc-big h3 { font-weight: 400; letter-spacing: .02em; }
@media (max-width: 900px) {
  .hero-bg img { object-position: 42% 55%; }
  .hero-tint { background: linear-gradient(0deg, var(--ink) 0%, rgba(11,7,18,.55) 45%, rgba(30,9,48,.35) 100%), radial-gradient(60% 40% at 80% 20%, rgba(251,93,19,.25), transparent 70%); }
  .tw-trace { display: none; }
  .tower { padding: 12px 14px; }
}
html.ja .nm { font-family: "Noto Sans JP", sans-serif; font-weight: 900; font-size: 19px; letter-spacing: .08em; }

/* v3 (27 Oct 2026): short "featured only" home page + own pages for every section; added on top of v3_base.css */

/* status strip: next race or latest result, right under the hero */
.status-wrap { max-width: 1560px; margin: 0 auto; padding: 34px 96px 0 40px; }
.status { display: grid; grid-template-columns: 150px auto 70px 1fr auto auto; align-items: center; gap: 22px; padding: 18px 24px;
  background: linear-gradient(100deg, var(--vid), var(--pan2) 60%); border: 1px solid var(--line); border-left: 6px solid var(--or); transform: skewX(var(--skew)); }
.status > * { transform: skewX(calc(var(--skew) * -1)); }
.st-k { font: 700 11px var(--mono); letter-spacing: .24em; color: var(--am); }
.status b { font: 900 34px/1 var(--disp); text-transform: uppercase; white-space: nowrap; }
.st-s { font: 700 11px var(--mono); letter-spacing: .14em; padding: 4px 8px; border: 1px solid var(--vi2); color: var(--lil); text-align: center; }
.st-w { color: #e3dbf2; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-d { font: 700 13px var(--mono); color: var(--wh); white-space: nowrap; }
.status:hover { border-left-color: var(--ye); }
.lights.mini { position: static; gap: 5px; }
.lights.mini i { width: 12px; height: 12px; }
.status.last .lights { display: none; }

/* home: latest 3 news */
.home .sec { padding-top: 80px; padding-bottom: 60px; }
.home-news { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; }
.ncard { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  min-height: 250px; padding: 22px; border: 1px solid var(--line); background: var(--pan); }
.ncard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.ncard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11,7,18,.96) 12%, rgba(58,16,80,.35) 62%, transparent); }
.ncard:hover img { transform: scale(1.06); }
.ncard:hover { border-color: var(--or); }
.ncard.lead { grid-row: span 2; min-height: 540px; padding: 30px; }
.ncard .lead-t { font-size: 32px; margin: 6px 0 2px; }
.ncard.lead .lead-t { font-size: 52px; }
html.ja .ncard .lead-t { font-size: 24px; } html.ja .ncard.lead .lead-t { font-size: 34px; }
.nc-x { color: #e3dbf2; font-size: 16px; line-height: 1.55; max-width: 60ch; margin-bottom: 8px; }

/* home: featured photos */
.fp-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 230px 230px; gap: 14px; }
.fp { position: relative; overflow: hidden; border: 1px solid var(--line); transform: skewX(var(--skew)); }
.fp img { width: 120%; max-width: none; height: 100%; margin-left: -10%; object-fit: cover; transform: skewX(calc(var(--skew) * -1)) scale(1.04); transition: transform .6s, filter .6s; filter: saturate(.85); }
.fp:hover img { transform: skewX(calc(var(--skew) * -1)) scale(1.12); filter: saturate(1.1); }
.fp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(58,16,80,.75), transparent 45%); }
.fp span { position: absolute; z-index: 1; left: 20px; bottom: 12px; font: 700 12px var(--mono); letter-spacing: .2em; color: var(--ye); transform: skewX(calc(var(--skew) * -1)); }
.fp0 { grid-row: span 2; }
.fp3 { grid-column: span 2; }

/* home: merch drop, 1 big + 2 */
.home-drop { grid-template-columns: 1.4fr 1fr; }

/* home: contact strip */
.cstrip { position: relative; padding: 0 96px 80px 40px; max-width: 1560px; margin: 0 auto; }
.cs-in { display: grid; grid-template-columns: 1fr auto; gap: 20px 40px; align-items: center; padding: 34px 38px;
  background: radial-gradient(70% 140% at 100% 0%, rgba(251,93,19,.22), transparent 60%), var(--ink2); border: 1px solid var(--line); border-top: 4px solid var(--vi2); }
.cs-in h2 { font: 900 clamp(34px, 4vw, 56px)/.95 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); margin-top: 10px; }
html.ja .cs-in h2 { font-weight: 400; font-size: 34px; line-height: 1.25; }
.cs-act { display: flex; gap: 16px; flex-wrap: wrap; }
.cs-in .foot-soc { grid-column: span 2; }
.cs-in .radio { margin: 0; }

/* photos page */
.ph-ev { margin-bottom: 56px; }
.ph-ev h3 { display: flex; align-items: baseline; gap: 16px; font: 900 40px/1 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); margin-bottom: 18px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line); }
html.ja .ph-ev h3 { font-weight: 400; font-size: 28px; }
.ph-ev h3 small { font: 600 12px var(--mono); letter-spacing: .14em; color: var(--am); }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ph { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--line); background: var(--pan); }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ph:hover img { transform: scale(1.06); }
.ph span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 8px; font-size: 13px; background: linear-gradient(0deg, rgba(11,7,18,.9), transparent); }
.ph:target { outline: 3px solid var(--or); }

/* post page */
.art-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 34px; }
.art-gal a { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.art-gal img { width: 100%; height: 100%; object-fit: cover; }
.art-body p { font-size: 18px; line-height: 1.8; margin-bottom: 18px; color: #e3dbf2; }
.art-hero img { height: 120%; }
.pn { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line); font: 700 13px var(--mono); letter-spacing: .1em; color: var(--am); text-transform: uppercase; }
.pn a:last-child { text-align: right; }
.pn a:nth-child(2) { color: var(--wh); }
.inner > .rider { padding-top: 60px; }

@media (max-width: 900px) {
  .status-wrap { padding: 22px 14px 0; }
  .status { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 18px; transform: none; }
  .status > * { transform: none; }
  .status b { font-size: 26px; grid-column: 1 / -1; white-space: normal; }
  .st-k { grid-column: 1 / -1; }
  .st-w { grid-column: 1 / -1; white-space: normal; font-size: 14px; }
  .st-s { justify-self: start; }
  .lights.mini { display: none; }
  .home .sec { padding-top: 54px; padding-bottom: 36px; }
  .home-news { grid-template-columns: 1fr; grid-template-rows: none; gap: 10px; }
  .ncard { min-height: 170px; padding: 16px; }
  .ncard.lead { grid-row: auto; min-height: 380px; padding: 18px; }
  .ncard .lead-t { font-size: 24px; } .ncard.lead .lead-t { font-size: 36px; }
  html.ja .ncard .lead-t { font-size: 19px; } html.ja .ncard.lead .lead-t { font-size: 24px; }
  .nc-x { font-size: 14px; }
  .fp-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 130px 130px; gap: 8px; }
  .fp0 { grid-row: auto; grid-column: span 2; }
  .fp3 { grid-column: span 2; }
  .home-drop { grid-template-columns: 1fr 1fr; }
  .cstrip { padding: 0 14px 54px; }
  .cs-in { grid-template-columns: 1fr; padding: 24px 20px; }
  .cs-in .foot-soc { grid-column: auto; }
  .cs-in h2 { font-size: 34px; } html.ja .cs-in h2 { font-size: 24px; }
  .ph-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .ph-ev h3 { font-size: 30px; flex-wrap: wrap; }
  .art-body p { font-size: 16px; }
  .v3 .art-body { margin-top: 18px; }
  .art-tag { left: 18px; bottom: 14px; font-size: 12px; }
  .pn { grid-template-columns: 1fr 1fr; }
  .pn a:nth-child(2) { grid-column: span 2; grid-row: 2; text-align: center; }
}

/* full WordPress import (31 Oct 2026): gallery index, album pages, English-only reports */
.alb-yr { margin-bottom: 48px; }
.alb-yr h3 { font: 900 44px/1 var(--disp); transform: skewX(var(--skew)); margin-bottom: 16px; color: var(--am); }
.alb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.alb { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--line); background: var(--pan); }
.alb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.alb:hover img { transform: scale(1.04); }
.alb-grid .alb .alb-t, .alb-grid .alb small { position: absolute; left: 12px; right: 12px; z-index: 1; display: block; }
.alb-grid .alb .alb-t { bottom: 30px; font: 900 22px/1.05 var(--disp); text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
html.ja .alb-grid .alb .alb-t { font-weight: 700; font-size: 18px; }
.alb-grid .alb small { bottom: 10px; font: 600 11px/1.2 var(--mono); letter-spacing: .1em; color: var(--am); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alb::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(0deg, rgba(11,7,18,.94), transparent); }
.ja-note { font: 600 12px var(--mono); letter-spacing: .08em; color: var(--am); border: 1px solid var(--line); padding: 8px 12px; display: inline-block; }
.art-alb { margin-top: 28px; font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.art-alb a { color: var(--am); }
.board .row.off { display: none; }
@media (max-width: 700px) { .alb-grid { grid-template-columns: 1fr 1fr; gap: 6px; } .alb-grid .alb .alb-t { font-size: 14px; bottom: 24px; left: 8px; right: 8px; } .alb-grid .alb small { font-size: 9px; left: 8px; right: 8px; bottom: 8px; letter-spacing: .04em; } .alb-yr h3 { font-size: 32px; } }

/* v4-lightsout (31 Oct 2026): Play tile in the nav, Lights Out game on /play/, LINE "Moto Crew" block + footer version.
   Added after v3_base.css + v3.css. LINE green #06c755 only on LINE buttons (their brand colour). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* nav: Play tile with a tiny start-lights icon */
.nav a.nav-play { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; padding: 7px 12px; color: #fff;
  border: 1px solid var(--vi2); background: linear-gradient(100deg, rgba(138,79,240,.28), rgba(58,16,80,.5)); transform: skewX(var(--skew)); }
.nav a.nav-play > * { transform: skewX(calc(var(--skew) * -1)); }
.nav a.nav-play::after { display: none; }
.nav a.nav-play:hover, .nav a.nav-play[aria-current] { border-color: var(--or); background: linear-gradient(100deg, rgba(251,93,19,.3), rgba(58,16,80,.6)); }
.pl-ic { display: inline-flex; gap: 2px; padding: 3px; background: #120b1c; border: 1px solid rgba(255,255,255,.18); }
.pl-ic i { width: 5px; height: 5px; border-radius: 50%; background: #ff2b2b; box-shadow: 0 0 4px rgba(255,43,43,.8); }
.nav-play:hover .pl-ic i, .nav-play[aria-current] .pl-ic i { animation: plic 1.6s infinite both; }
.pl-ic i:nth-child(2) { animation-delay: .15s !important; } .pl-ic i:nth-child(3) { animation-delay: .3s !important; }
.pl-ic i:nth-child(4) { animation-delay: .45s !important; } .pl-ic i:nth-child(5) { animation-delay: .6s !important; }
@keyframes plic { 0%, 10% { background: #3b2533; } 18%, 70% { background: #ff2b2b; box-shadow: 0 0 6px #ff2b2b; } 76%, 100% { background: #3b2533; } }

/* LINE call to action: QR on desktop, one-tap button on phones */
.mc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 24px; background: #06c755; color: #fff;
  font: 700 16px var(--hud); letter-spacing: .04em; border-radius: 10px; box-shadow: 0 6px 0 #04913e; transition: transform .15s, box-shadow .15s; touch-action: manipulation; }
.mc-btn::before { content: "LINE"; font: 900 11px/1 var(--mono); letter-spacing: .06em; background: #fff; color: #06c755; padding: 4px 6px; border-radius: 5px; }
.mc-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #04913e; }
.mc-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #04913e; }
.mc-qr { display: grid; justify-items: center; gap: 8px; }
.mc-qr img { width: 180px; height: 180px; background: #fff; padding: 10px; border-radius: 12px; }
.mc-qr figcaption { font: 600 11px var(--mono); letter-spacing: .12em; color: var(--mut); text-transform: uppercase; }
html.ja .mc-qr figcaption { text-transform: none; letter-spacing: .04em; }
.mc-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mc-cta .mc-btn { order: 2; }
@media (pointer: coarse), (max-width: 900px) {   /* phones: you can't scan your own screen */
  .mc-qr { display: none; }
  .mc-cta .mc-btn { width: 100%; }
}

/* home: Moto Crew block */
.mcrew .sec-hd .sx { background: #06c755; box-shadow: 4px 4px 0 var(--vi2); }
.mc-card { display: grid; grid-template-columns: 1fr auto; gap: 30px 60px; align-items: center; padding: 40px 44px; position: relative; overflow: hidden;
  background: radial-gradient(60% 120% at 100% 0%, rgba(6,199,85,.16), transparent 60%), radial-gradient(70% 140% at 0% 100%, rgba(138,79,240,.3), transparent 60%), var(--ink2);
  border: 1px solid var(--line); border-left: 6px solid #06c755; }
.mc-card h2 { display: flex; flex-direction: column; margin: 10px 0 22px; font: 900 clamp(40px, 5vw, 72px)/.92 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); }
.mc-card .mc-h2 { color: #06c755; }
html.ja .mc-card h2 { font-weight: 400; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.2; }
.mc-list { list-style: none; display: grid; gap: 12px; }
.mc-list li { display: flex; gap: 14px; align-items: baseline; font-size: 18px; color: #e3dbf2; }
.mc-list b { color: #fff; }
.mc-e { flex: none; width: 28px; text-align: center; }

/* footer: small Moto Crew strip + game line */
.mc-mini { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 34px; padding: 18px 22px;
  border: 1px solid var(--line); border-left: 4px solid #06c755; background: rgba(11,7,18,.6); }
.mc-mini > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.mc-mini b { font: 800 22px/1.1 var(--disp); text-transform: uppercase; }
html.ja .mc-mini b { font: 900 17px/1.4 "Noto Sans JP", sans-serif; }
.mc-mini small { font: 500 12px var(--mono); color: var(--mut); }
.mc-cta.sm { flex-direction: row; gap: 14px; }
.mc-cta.sm .mc-btn { order: 0; min-height: 44px; font-size: 14px; padding: 10px 16px; }
.mc-cta.sm .mc-qr img { width: 96px; height: 96px; padding: 6px; border-radius: 8px; }
.mc-cta.sm figcaption { display: none; }
main.home ~ .foot .mc-mini { display: none; }      /* the home page has the full block */
.foot-play { margin-top: 18px; font: 700 14px var(--hud); letter-spacing: .08em; }
.foot-play a { color: var(--ye); }
.foot-play a:hover { color: var(--or); }

/* /play/: Lights Out */
.play .lo { max-width: 1100px; margin: 0 auto; padding: 40px 40px 70px; touch-action: manipulation; }
.lo-hd h1 { font: 900 clamp(64px, 9vw, 130px)/.85 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); margin: 8px 0 14px; }
html.ja .lo-hd h1 { font-weight: 400; font-size: clamp(46px, 6vw, 84px); line-height: 1.1; }
.lo-how { max-width: 62ch; color: #e3dbf2; margin-bottom: 26px; }
.lo-stage { position: relative; isolation: isolate; min-height: 440px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px;
  padding: 40px 24px; border: 1px solid var(--line); border-top: 4px solid var(--vi2); overflow: hidden;
  background: radial-gradient(80% 70% at 50% 0%, rgba(138,79,240,.28), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 40px), var(--ink2);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.lo-hit { position: absolute; inset: 0; z-index: 0; width: 100%; cursor: pointer; touch-action: none; }
.lo-hit:focus-visible { outline: 3px solid var(--ye); outline-offset: -6px; }
.lo-gantry, .lo-msg { position: relative; z-index: 1; pointer-events: none; }
.lo-gantry { display: flex; gap: clamp(8px, 2vw, 22px); padding: 16px clamp(12px, 2.4vw, 26px); background: #0a0610; border: 2px solid #2b1c3d; border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04); }
.lo-pod { display: flex; flex-direction: column; gap: clamp(6px, 1.2vw, 12px); padding: clamp(6px, 1.2vw, 10px); background: #15101d; border-radius: 10px; border: 1px solid #2b1c3d; }
.lo-pod i { width: clamp(40px, 9vw, 86px); height: clamp(40px, 9vw, 86px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a2430, #1c1018 70%);
  box-shadow: inset 0 0 0 3px #000; transition: background .06s, box-shadow .06s; }
.lo-pod.on i { background: radial-gradient(circle at 35% 30%, #ffb3a8, #ff2b2b 40%, #b30000 80%); box-shadow: 0 0 26px #ff2b2b, 0 0 60px rgba(255,43,43,.45), inset 0 0 0 3px #400; }
.lo-msg { text-align: center; min-height: 92px; }
.lo-big { font: 900 clamp(38px, 6vw, 64px)/1 var(--disp); text-transform: uppercase; letter-spacing: .02em; transform: skewX(var(--skew)); }
html.ja .lo-big { font-weight: 400; font-size: clamp(30px, 4.6vw, 48px); }
.lo-sub { margin-top: 10px; font: 600 13px var(--mono); letter-spacing: .14em; color: var(--mut); text-transform: uppercase; }
html.ja .lo-sub { text-transform: none; letter-spacing: .06em; }
[data-state="idle"] .lo-big { color: var(--ye); animation: lo-pulse 1.4s ease-in-out infinite; }
[data-state="lights"] .lo-big, [data-state="hold"] .lo-big { color: var(--mut); }
[data-state="go"] .lo-big { color: #29d17a; }
[data-state="go"] .lo-stage { border-top-color: #29d17a; }
@keyframes lo-pulse { 50% { opacity: .55; } }

.lo-end { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 26px 22px; text-align: center;
  background: rgba(11,7,18,.9); backdrop-filter: blur(6px); animation: lo-in .25s ease-out both; touch-action: manipulation; }
.lo-end[hidden] { display: none; }
@keyframes lo-in { from { opacity: 0; transform: scale(.98); } }
.lo-time { font: 900 clamp(64px, 11vw, 120px)/.9 var(--disp); transform: skewX(var(--skew)); color: #fff; }
.lo-time small { font-size: .4em; color: var(--am); }
[data-state="false"] .lo-time { color: #ff2b2b; font-size: clamp(48px, 8vw, 92px); }
html.ja [data-state="false"] .lo-time { font-weight: 400; }
.lo-verdict { font: 700 18px var(--hud); color: var(--ye); }
.lo-verdict em { font-style: normal; background: var(--or); color: #170806; padding: 2px 8px; margin-left: 6px; }
.lo-vs { font: 600 14px var(--mono); color: var(--lil); }
.lo-acts { margin: 8px 0 6px; }
.lo-line { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px 22px; width: 100%; max-width: 720px; margin-top: 8px; padding: 16px 18px;
  text-align: left; border: 1px solid var(--line); border-left: 4px solid #06c755; background: rgba(26,17,39,.85); }
.lo-line > div { display: flex; flex-direction: column; gap: 3px; }
.lo-line b { font: 700 16px/1.3 var(--hud); }
.lo-line small { font: 500 12px var(--mono); color: var(--mut); }
.lo-qr { width: 112px; height: 112px; background: #fff; padding: 6px; border-radius: 8px; }
@media (pointer: coarse), (max-width: 900px) { .lo-qr { display: none; } }

.lo-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; border: 1px solid var(--line); background: var(--pan); }
.lo-stats > div { padding: 14px 18px; border-right: 1px solid var(--line); }
.lo-stats > div:last-child { border-right: 0; }
.lo-stats small { display: block; font: 700 10px var(--mono); letter-spacing: .2em; color: var(--am); }
.lo-stats b { font: 900 28px/1.2 var(--disp); }
html.ja .lo-stats b { font: 900 18px/1.6 "Noto Sans JP", sans-serif; }
.lo-fine { margin-top: 14px; font: 500 12px/1.6 var(--mono); color: var(--mut); max-width: 80ch; }

@media (max-width: 900px) {
  .nav a.nav-play { margin: 8px 0 0; align-self: flex-start; font-size: 18px; padding: 10px 14px; }
  .mc-card { grid-template-columns: 1fr; padding: 26px 20px; gap: 22px; }
  .mc-list li { font-size: 16px; }
  .mc-mini { flex-direction: column; align-items: stretch; }
  .mc-cta.sm .mc-btn { width: 100%; }
  .play .lo { padding: 26px 14px 50px; }
  .lo-how { font-size: 15px; margin-bottom: 18px; }
  .lo-stage { min-height: 400px; gap: 26px; padding: 30px 12px; }
  .lo-gantry { padding: 10px; gap: 6px; }
  .lo-pod { padding: 6px; gap: 6px; }
  .lo-pod i { width: 46px; height: 46px; }
  .lo-line { grid-template-columns: 1fr; padding: 14px; }
  html.ja .lo-hd h1 { font-size: 40px; white-space: nowrap; }
  [data-state="result"] .lo-stage, [data-state="false"] .lo-stage { display: block; padding: 0; min-height: 0; }
  [data-state="result"] .lo-gantry, [data-state="false"] .lo-gantry, [data-state="result"] .lo-msg, [data-state="false"] .lo-msg { display: none; }
  .lo-end { position: relative; inset: auto; padding: 30px 14px 18px; }
  .lo-line .mc-btn { width: 100%; }
  .lo-stats > div { padding: 10px 12px; }
  .lo-stats b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-state="idle"] .lo-big, .nav-play .pl-ic i { animation: none !important; }
  .lo-end { animation: none; backdrop-filter: none; }
}

/* ---- Kaito's site v5 (Maya, 31 Oct 2026): Chiara's batch change list items 1-19 ---- */

/* header cart */
.nav-cart { position: relative; display: grid; place-items: center; width: 40px; height: 34px; font-size: 18px; border: 1px solid var(--line); transform: skewX(var(--skew)); }
.nav-cart > * { transform: skewX(calc(var(--skew) * -1)); }
.nav-cart b { position: absolute; right: -8px; top: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--or); color: #170806; font: 800 11px/20px var(--mono); text-align: center; }
.nav-cart b[hidden] { display: none; }

/* item 15: news as a grid of photo cards (news page + home Latest) */
.n5grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nc5 { position: relative; display: flex; flex-direction: column; background: var(--ink2); border: 1px solid var(--line); overflow: hidden; transition: border-color .3s, transform .3s; }
.nc5:hover { border-color: var(--or); transform: translateY(-4px); }
.nc5.off { display: none; }
.nc5-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--pan); }
.nc5-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.nc5:hover .nc5-img img { transform: scale(1.05); }
.nc5-noimg { display: grid; place-items: center; height: 100%; font: 900 80px var(--disp); color: var(--vi2); }
.nc5-meta { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; }
.nc5-meta .dt { font: 600 12px var(--mono); letter-spacing: .08em; color: var(--mut); }
.nc5-t { display: block; padding: 8px 16px 18px; font: 800 22px/1.15 var(--disp); text-transform: uppercase; color: #fff; }
html.ja .nc5-t { font-size: 18px; }
.n5grid.home3 .nc5:first-child { grid-column: span 1; }

/* item 10: featured photos = 3 photos of the latest round, readable label, open the gallery */
.fp5-hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; margin: -10px 0 16px; }
.fp5-hd b { font: 800 26px/1.1 var(--disp); text-transform: uppercase; }
.fp5-hd span { font: 700 14px var(--mono); letter-spacing: .08em; color: var(--am); }
.fp5-hd:hover span { color: var(--or); }
.fp5-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 250px 250px; gap: 14px; }
.fp5 { position: relative; overflow: hidden; border: 1px solid var(--line); display: block; }
.fp5:first-child { grid-row: span 2; }
.fp5 img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.fp5:hover img { transform: scale(1.06); }
.fp5::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(0deg, rgba(11,7,18,.85), transparent); }
.fp5 span { position: absolute; z-index: 1; left: 18px; bottom: 14px; font: 800 20px/1 var(--hud); letter-spacing: .12em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.fp5 span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; background: var(--ye); transform: skewX(var(--skew)); }

/* item 4: ON BOARD card */
.t5 .onb { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.t5 .onb i { width: 8px; height: 8px; border-radius: 50%; background: var(--or); box-shadow: 0 0 8px var(--or); }
.t5 .tw-sec i { position: relative; overflow: hidden; }
.t5 .tw-sec i u { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--am); text-decoration: none; }
.t5 .tw-sec .done i u { background: #29d17a; width: 100% !important; }
.t5.lapdone .tw-lap b { color: var(--lil); text-shadow: 0 0 18px var(--vi2); }
.t5tr polyline { stroke-dasharray: none !important; animation: none !important; opacity: .8; }
.t5tr circle { fill: #fff; stroke: var(--or); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* item 16: profile speed trace (Jerez) */
.telemetry.t5 svg.spd { width: 100%; height: auto; background: none; display: block; }
.spd .tg { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.spd .tt { stroke: rgba(201,179,255,.14); stroke-dasharray: 2 3; }
.spd .ty, .spd .tx { font: 600 11px var(--mono); fill: var(--mut); }
.spd .ty { text-anchor: end; } .spd .tx { text-anchor: middle; }
.spd .tl { stroke: var(--or); stroke-width: 1.5; }
.spd .tlt { font: 700 14px var(--mono); fill: var(--or); text-anchor: end; }
.telemetry.t5 .trc { stroke-dasharray: 3000; stroke-dashoffset: 3000; }
html:not(.js) .telemetry.t5 .trc, .telemetry.t5.in .trc { stroke-dashoffset: 0; }
.bands { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 2px 8px; margin-top: 6px; }
.bands small { font: 700 9px var(--mono); letter-spacing: .14em; color: var(--mut); }
.telemetry .band { width: 100%; height: 30px; display: block; background: none; }
.band polyline { fill: none; stroke: var(--am); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bands svg:last-child polyline { stroke: var(--lil); }

/* items 17-18: amarcord strip replaces the stats strip */
.amarcord { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: linear-gradient(100deg, var(--vid), var(--vi) 50%, #4d1772); padding: 10px; gap: 10px; }
.am5 { display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 0; padding: 0; cursor: zoom-in; background: #000; }
.am5 img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.am5:hover img { transform: scale(1.04); }
.am5:focus-visible { outline: 3px solid var(--ye); outline-offset: 2px; }

/* item 14: sponsors in full colour, true shape, readable */
.logos5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.logo5 { height: 132px; display: grid; place-items: center; padding: 18px 20px; background: #fff; border-radius: 4px; transition: transform .25s, box-shadow .25s; }
.logo5:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.logo5 img { max-width: 100%; max-height: 92px; width: auto; height: auto; object-fit: contain; }
.train5-h { margin: 34px 0 12px; font: 700 12px var(--mono); letter-spacing: .2em; color: var(--lil); text-transform: uppercase; }
.train5 { grid-template-columns: repeat(5, 1fr); }

/* item 13: sponsors marquee on home (above contact) */
.spons5 { padding-top: 70px; padding-bottom: 60px; }
.mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq-in { display: flex; gap: 16px; width: max-content; animation: mq 55s linear infinite; }
.mq:hover .mq-in, .mq:focus-within .mq-in { animation-play-state: paused; }
.mq-logo { flex: none; width: 210px; height: 112px; display: grid; place-items: center; padding: 14px 18px; background: #fff; border-radius: 4px; transition: transform .25s; }
.mq-logo:hover { transform: translateY(-4px); }
.mq-logo img { max-width: 100%; max-height: 80px; object-fit: contain; }
@keyframes mq { to { transform: translateX(calc(-50% - 8px)); } }
.thin-kerb .kerb { height: 6px; }

/* item 19: photo viewer + photo pages */
html.lb-on { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: 64px 1fr 64px; grid-template-rows: auto 1fr; background: rgba(8,5,13,.96); }
.lb[hidden] { display: none; }
.lb-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font: 700 13px var(--mono); letter-spacing: .08em; }
.lb-home { color: var(--am); } .lb-count { color: #fff; }
.lb-close { color: #fff; padding: 8px 12px; border: 1px solid var(--line); background: none; font: inherit; cursor: pointer; }
.lb-prev, .lb-next { align-self: center; height: 96px; font: 300 56px/1 var(--hud); color: #fff; background: none; border: 0; cursor: pointer; }
.lb-prev:hover, .lb-next:hover { color: var(--or); }
.lb.one .lb-prev, .lb.one .lb-next { visibility: hidden; }
.lb-fig { display: grid; place-items: center; min-height: 0; padding: 0 0 16px; }
.lb-fig img { max-width: 100%; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); object-fit: contain; }
.pv { padding: 30px 40px 60px; max-width: 1400px; margin: 0 auto; }
.pv-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font: 700 13px var(--mono); letter-spacing: .08em; color: var(--am); margin-bottom: 16px; }
.pv-bar b { color: #fff; font: 800 20px var(--disp); text-transform: uppercase; text-align: center; }
.pv-fig img { display: block; margin: 0 auto; max-width: 100%; max-height: 78vh; width: auto; height: auto; }
.pv-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; margin-top: 18px; font: 700 14px var(--mono); color: var(--am); }
.pv-nav .pv-next { text-align: right; } .pv-count { color: #fff; }

/* shop: filters, product page, cart, checkout */
.prods .prod.off { display: none; }
.ship5 { margin-top: 26px; font: 500 13px var(--mono); color: var(--mut); }
.ship5 a, .pp-ship a, .co-agree a { color: var(--am); text-decoration: underline; }
.pp { padding: 40px 96px 70px 40px; max-width: 1400px; margin: 0 auto; }
.crumbs { font: 700 13px var(--mono); color: var(--am); margin-bottom: 20px; }
.pp-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.pp-main { display: block; background: #fff; }
.pp-main img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.pp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pp-th { width: 72px; height: 72px; padding: 0; background: #fff; border: 2px solid transparent; cursor: pointer; }
.pp-th.on { border-color: var(--or); }
.pp-th[hidden] { display: none; }
.pp-th img { width: 100%; height: 100%; object-fit: contain; }
.pp-buy h1 { font: 900 clamp(40px, 5vw, 68px)/.95 var(--disp); text-transform: uppercase; margin: 8px 0 12px; }
.pp-price { font: 700 26px var(--mono); color: var(--am); margin-bottom: 18px; }
.pp-opt { border: 0; margin: 0 0 16px; }
.pp-opt legend { font: 700 12px var(--mono); letter-spacing: .16em; color: var(--mut); text-transform: uppercase; margin-bottom: 8px; }
.pp-opt legend em { font-style: normal; color: #fff; margin-left: 6px; letter-spacing: .04em; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt > span { display: inline-block; min-width: 48px; padding: 9px 12px; text-align: center; border: 1px solid var(--line); background: var(--ink2); font: 600 13px var(--hud); cursor: pointer; }
.opt input:checked + span { border-color: var(--or); background: rgba(251,93,19,.18); color: #fff; }
.opt input:focus-visible + span { outline: 2px solid var(--ye); }
.opt.na > span { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
.pp-qty input { width: 80px; margin-left: 8px; padding: 10px; background: var(--ink2); border: 1px solid var(--line); color: #fff; font: 16px var(--mono); }
.pp-qty { margin-bottom: 18px; font: 700 12px var(--mono); letter-spacing: .14em; color: var(--mut); text-transform: uppercase; }
.pp-msg { min-height: 22px; margin-top: 12px; font: 600 14px var(--hud); }
.pp-msg.ok { color: #29d17a; } .pp-msg.bad { color: #ff7a6b; }
.pp-msg a { color: var(--am); text-decoration: underline; }
.pp-ship { margin-top: 10px; font: 500 13px var(--mono); color: var(--mut); }
.pp-desc { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); color: #e3dbf2; font-size: 15px; line-height: 1.6; }
.pp-desc p { margin-bottom: 6px; }
.co-test { display: inline-block; margin-bottom: 18px; padding: 8px 14px; background: var(--ye); color: #170806; font: 800 12px var(--mono); letter-spacing: .12em; }
.co-test[hidden] { display: none; }
.cl { display: grid; grid-template-columns: 72px 1fr auto auto auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cl img { width: 72px; height: 72px; object-fit: contain; background: #fff; }
.cl small { display: block; font: 500 12px var(--mono); color: var(--mut); }
.cl input { width: 64px; padding: 8px; background: var(--ink2); border: 1px solid var(--line); color: #fff; font: 15px var(--mono); }
.cl-x { width: 36px; height: 36px; border: 1px solid var(--line); background: none; color: var(--mut); cursor: pointer; }
.co-sum { margin-top: 22px; display: grid; gap: 12px; justify-items: start; }
.co-sum p, .co-side p { font: 600 15px var(--mono); }
.co-note, .co-fine { font: 500 13px var(--mono); color: var(--mut); }
.co-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
.co-form { grid-template-columns: 1fr 1fr; }
.co-form h3, .co-form .co-test, .co-form [data-rate-list], .co-form .co-agree, .co-form .btn, .co-form .co-fine, .co-form .pp-msg, .co-form > label:nth-of-type(n) { grid-column: span 2; }
.co-form h3 { font: 800 24px var(--disp); text-transform: uppercase; margin-top: 10px; }
.co-form select { background: var(--ink2); border: 1px solid var(--line); border-bottom: 2px solid var(--vi); color: var(--wh); padding: 13px; font: 16px var(--body); }
.co-form .co-state[hidden] { display: none; }
.co-form .btn { justify-self: start; }
.co-form .btn[disabled] { opacity: .45; cursor: not-allowed; }
.co-rate { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); margin-top: 8px; text-transform: none !important; letter-spacing: 0 !important; font: 600 15px var(--hud) !important; color: #fff !important; }
.co-rate span { flex: 1; } .co-rate small { color: var(--mut); }
.co-agree { flex-direction: row !important; align-items: center; gap: 10px !important; text-transform: none !important; letter-spacing: 0 !important; font: 500 14px var(--hud) !important; color: #e3dbf2 !important; }
.co-side { position: sticky; top: 90px; padding: 22px; background: var(--ink2); border: 1px solid var(--line); display: grid; gap: 10px; }
.co-side h3 { font: 800 22px var(--disp); text-transform: uppercase; }
.co-side .cl { grid-template-columns: 56px 1fr auto auto; } .co-side .cl img { width: 56px; height: 56px; }
.co-total { font-size: 19px !important; color: var(--am); }
.co-thanks h2 { font: 900 48px var(--disp); text-transform: uppercase; margin-bottom: 14px; }
.co-thanks p { margin-bottom: 14px; }
.co-empty a { color: var(--am); }
.legal h2 { font: 800 26px var(--disp); text-transform: uppercase; margin: 26px 0 10px; }
.legal a { color: var(--am); text-decoration: underline; }
.draft { display: inline-block; padding: 8px 14px; background: var(--ye); color: #170806; font: 800 12px var(--mono); letter-spacing: .1em; }

/* items 7-9: Lights Out nickname + ranking + jump-start lockout */
.lo-stage.locked { opacity: .35; pointer-events: none; }
.lo-stage, .lo-hit { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.lo-nick { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 14px; margin-bottom: 18px; padding: 18px 20px; background: var(--pan); border: 1px solid var(--or); }
.lo-nick[hidden] { display: none; }
.lo-nick label { display: grid; gap: 8px; font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--am); }
.lo-nick input { padding: 13px; background: var(--ink2); border: 1px solid var(--line); border-bottom: 2px solid var(--or); color: #fff; font: 18px var(--hud); }
.lo-nick-msg { grid-column: 1 / -1; font: 500 13px var(--mono); color: var(--mut); }
.lo-nick-msg.bad { color: #ff7a6b; }
.lo-again[disabled] { opacity: .4; }
.lo-rank { font: 700 15px var(--mono); color: #29d17a; min-height: 1em; }
.lo-board { margin-top: 18px; padding: 18px 20px; background: var(--ink2); border: 1px solid var(--line); }
.lo-board-hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 18px; margin-bottom: 10px; }
.lo-board h2 { font: 900 28px var(--disp); text-transform: uppercase; }
.lo-me { font: 500 13px var(--mono); color: var(--mut); }
.lo-me b { color: #fff; }
.lo-change { background: none; border: 0; color: var(--am); text-decoration: underline; font: inherit; cursor: pointer; }
.lo-top { list-style: none; display: grid; gap: 4px; }
.lo-top li { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; background: var(--pan); font: 600 16px var(--hud); }
.lo-top li span:last-child { font: 700 16px var(--mono); color: var(--am); }
.lo-top li.me { outline: 2px solid var(--or); }
.lo-top li.kaito { background: linear-gradient(100deg, rgba(138,79,240,.35), var(--pan)); }
.lo-top li.lo-wait { display: block; color: var(--mut); font: 500 14px var(--mono); }
.lo-pos { font: 900 20px var(--disp); color: var(--lil); }
.lo-mine { margin-top: 10px; font: 700 14px var(--mono); color: #fff; }

@media (max-width: 900px) {
  .n5grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .nc5-t { font-size: 17px; padding: 6px 12px 14px; } html.ja .nc5-t { font-size: 15px; }
  .nc5-meta { padding: 10px 12px 0; }
  .fp5-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 140px; gap: 8px; }
  .fp5:first-child { grid-column: span 2; grid-row: span 1; }
  .fp5 span { font-size: 16px; left: 12px; bottom: 10px; }
  .fp5-hd b { font-size: 20px; }
  .amarcord { grid-template-columns: 1fr 1fr; padding: 6px; gap: 6px; }
  .logos5, .train5 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .logo5 { height: 96px; padding: 12px 14px; } .logo5 img { max-height: 64px; }
  .mq-logo { width: 160px; height: 88px; } .mq-logo img { max-height: 60px; }
  .pp { padding: 20px 14px 50px; } .pp-grid, .co-grid { grid-template-columns: 1fr; gap: 24px; }
  .co-form { grid-template-columns: 1fr; } .co-form > * { grid-column: 1 / -1 !important; }
  .co-side { position: static; }
  .cl { grid-template-columns: 56px 1fr auto auto; gap: 10px; } .cl img { width: 56px; height: 56px; } .cl > b { display: none; }
  .lb { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .lb-fig { grid-row: 2; padding: 0 4px; } .lb-prev, .lb-next { grid-row: 3; height: 64px; }
  .lb-prev { justify-self: start; position: absolute; left: 8px; bottom: 8px; } .lb-next { position: absolute; right: 8px; bottom: 8px; }
  .lb-fig img { max-height: calc(100dvh - 140px); }
  .pv { padding: 16px 10px 40px; } .pv-bar b { font-size: 15px; }
  .lo-nick { grid-template-columns: 1fr; }
  .lo-top li { grid-template-columns: 38px 1fr auto; font-size: 15px; }
}
@media (max-width: 520px) { .n5grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .mq { -webkit-mask-image: none; mask-image: none; }
  .mq-in { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .mq-logo[aria-hidden] { display: none; }
}
html.ja .lo-time .l-ja, .lo-time .l-en { white-space: nowrap; }
html.ja .lo-time { font-size: clamp(34px, 10vw, 96px); }

/* v5c legal pages */
.legal .upd { font: 700 12px var(--mono); letter-spacing: .08em; opacity: .7; }
.legal .draft, .legal .draft * { color: #170806 !important; }
.legal mark.fill { display: inline; aspect-ratio: auto; background: var(--ye); color: #170806; padding: 0 4px; font-weight: 700; }
.legal .small, .legal small { font-size: .88em; opacity: .85; }
.legal table.toku { width: 100%; border-collapse: collapse; margin: 18px 0; }
.legal table.toku th, .legal table.toku td { text-align: left; vertical-align: top; padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,.15); }
.legal table.toku th { width: 34%; font-weight: 800; }
@media (max-width: 640px) { .legal table.toku th, .legal table.toku td { display: block; width: auto; padding: 6px 0; }
  .legal table.toku th { padding-top: 14px; border-bottom: 0; } }

/* v6 shop: currency picker */
.cur-pick { display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.cur-pick select { background: var(--ink2); color: var(--wh); border: 1px solid var(--line); border-bottom: 2px solid var(--vi); padding: 8px 10px; font: 700 14px var(--mono); letter-spacing: 0; }
.s5-chips .cur-pick { margin-left: auto; }
.crumbs { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.co-cur { margin-bottom: 14px; }
.co-side .co-cur { margin: 0; }
.co-form .co-state[hidden] { display: none; }
@media (max-width: 640px) { .s5-chips .cur-pick { margin-left: 0; width: 100%; } }
@media (max-width: 900px) { .prods .prod .pinfo { padding-right: 50px; } }

/* ---- v7: interactive profile speed trace (Maya, 1 Nov 2026; change list item 24) ---- */
.telemetry.t7 { padding: 14px 16px 12px; }
.telemetry.t7 .tl-hd { align-items: center; gap: 10px; margin-bottom: 10px; }
.telemetry.t7 svg { height: 100%; width: 100%; background: none; display: block; overflow: visible; }
.pl7 { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 7px 12px 7px 10px; border: 1px solid var(--or); background: transparent;
  color: var(--wh); font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; min-height: 34px; }
.pl7:hover, .pl7:focus-visible { background: var(--or); color: #fff; outline: none; }
.pl7 .ic { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.pl7[data-state="playing"] .ic { width: 8px; height: 10px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.pl7 .pl-pause, .pl7 .pl-again { display: none; }
.pl7[data-state="playing"] .pl-play, .pl7[data-state="done"] .pl-play { display: none; }
.pl7[data-state="playing"] .pl-pause, .pl7[data-state="done"] .pl-again { display: inline; }
html:not(.js) .pl7, html:not(.js) .tr7-rd, html:not(.js) .tr7-hint, html:not(.js) .cur7, html:not(.js) .dot7 { display: none; }

.tr7-rd { display: grid; grid-template-columns: 1.25fr 1fr .8fr 1fr 1.1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 12px; }
.rd7 { background: var(--ink); padding: 6px 8px 5px; min-width: 0; }
.rd7 small { display: block; font: 700 9px var(--mono); letter-spacing: .14em; color: var(--mut); white-space: nowrap; }
.rd7 b { display: block; font: 700 18px/1.25 var(--mono); color: var(--wh); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.rd7[data-rd="kmh"] b { color: var(--lil); } .rd7[data-rd="gear"] b { color: var(--am); } .rd7[data-rd="time"] b { color: var(--or); }
.rd7[data-rd="corner"] b .l-en, .rd7[data-rd="corner"] b .l-ja { font-size: 13px; letter-spacing: .04em; }

.tr7-g { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto 190px 26px 30px 30px; column-gap: 8px; position: relative; }
.g7-gut { position: relative; min-width: 0; }
.g7-u { font: 600 10px var(--mono); color: var(--mut); text-align: right; align-self: end; padding-bottom: 4px; }
.yt7 { position: absolute; right: 0; transform: translateY(-50%); font: 600 11px var(--mono); color: var(--mut); line-height: 1; }
.g7-l { display: flex; align-items: center; justify-content: flex-end; }
.g7-l small { font: 700 9px var(--mono); letter-spacing: .12em; color: var(--mut); white-space: nowrap; }
html.ja .g7-l small { letter-spacing: 0; font-size: 10px; }

.tr7-sec { display: flex; height: 22px; gap: 2px; margin-bottom: 4px; }
.sc7 { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; background: rgba(255,255,255,.05); overflow: hidden; }
.sc7 i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--vi2), var(--or)); }
.sc7.done i { background: var(--vi2); }
.sc7 small, .sc7 em { position: relative; font: 700 10px var(--mono); color: var(--wh); font-style: normal; letter-spacing: .06em; }
.sc7 em { color: var(--ye); }
.tr7-cap { display: flex; justify-content: flex-end; align-items: end; padding-bottom: 4px; }
.lt7 { font: 600 10px var(--mono); letter-spacing: .14em; color: var(--mut); }
.lt7 b { font-size: 13px; letter-spacing: .02em; color: var(--or); }

.tr7-plot, .tr7-band { position: relative; min-width: 0; }
.sp7 .gd7 line { stroke: rgba(255,255,255,.08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sp7 .tt7 line { stroke: rgba(201,179,255,.16); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.telemetry.t7 .sp7 polyline { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.telemetry.t7 .sp7 .base7 { stroke: var(--vi2); stroke-width: 2; opacity: .3; }
.telemetry.t7 .sp7 .lit7 { stroke: var(--vi2); stroke-width: 2.5; filter: drop-shadow(0 0 5px var(--vi2)); }
.sp7 .end7 { stroke: var(--or); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.telemetry.t7 .bd7 polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.telemetry.t7 .gear7 polyline { stroke: var(--am); } .telemetry.t7 .lean7 polyline { stroke: var(--lil); }

.tr7-turns { position: relative; z-index: 3; }
.tn7 { position: absolute; top: 3px; transform: translateX(-50%); padding: 2px 1px; min-width: 18px; border: 0; background: none; cursor: pointer;
  font: 600 11px/1.2 var(--mono); color: var(--mut); text-align: center; letter-spacing: -.02em; background: var(--ink2); }
.tn7:hover, .tn7:focus-visible { color: var(--wh); outline: none; text-decoration: underline; text-underline-offset: 3px; }
.tn7.on { color: var(--ye); }

.tr7-hit { grid-column: 2; grid-row: 3 / 7; position: relative; z-index: 2; cursor: crosshair; touch-action: pan-y; outline: none; -webkit-tap-highlight-color: transparent; }
.tr7-hit:focus-visible { box-shadow: 0 0 0 2px var(--lil); }
.cur7 { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-left: 1.5px solid var(--ye); pointer-events: none; opacity: .9; }
.dot7 { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ye); box-shadow: 0 0 0 3px rgba(243,201,77,.25), 0 0 10px var(--ye); pointer-events: none; z-index: 1; }
.tr7-band .dot7 { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
.tr7-hint { margin: 8px 0 0; font: 600 10px var(--mono); letter-spacing: .1em; color: var(--mut); text-align: right; }

@media (max-width: 520px) {
  .telemetry.t7 { padding: 12px 10px 10px; }
  .telemetry.t7 .tl-hd > span:first-child { font-size: 9px; letter-spacing: .14em; }
  .tr7-rd { grid-template-columns: 1.3fr 1fr .75fr 1.1fr 1.15fr; }
  .rd7 { padding: 5px 5px 4px; } .rd7 small { font-size: 8px; letter-spacing: .08em; }
  .rd7 b { font-size: 14px; } .rd7[data-rd="corner"] b .l-en, .rd7[data-rd="corner"] b .l-ja { font-size: 10px; letter-spacing: 0; }
  .tr7-g { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto 170px 24px 26px 26px; column-gap: 6px; }
  .yt7 { font-size: 10px; } .g7-u { font-size: 9px; }
  .tn7 { font-size: 9.5px; min-width: 14px; letter-spacing: -.06em; }
  .g7-l small { font-size: 8px; letter-spacing: .04em; } html.ja .g7-l small { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .telemetry.t7 .sp7 .lit7 { filter: none; }
}

/* v8: Japan-only drop banner (JA view only, added by assets/jpdrop.js) */
[data-jpdrop]:empty { display: none; }
.jpdrop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; text-decoration: none; color: var(--wh);
  background: linear-gradient(100deg, var(--vid), var(--vi) 60%, #8a4ff0); border-left: 6px solid var(--or);
  padding: 14px 18px; margin: 0 0 26px; font: 600 15px/1.4 var(--body); transition: transform .15s, box-shadow .15s; }
.jpdrop:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--or); }
.jpdrop .jp-tag { font: 900 11px/1 var(--mono); letter-spacing: .1em; background: var(--ye); color: var(--ink); padding: 5px 7px; }
.jpdrop b { font: 400 20px/1.1 var(--disp); letter-spacing: .02em; color: #fff; }
.jpdrop .jp-t { color: var(--lil); flex: 1 1 220px; }
.jpdrop .jp-go { font: 900 22px/1 var(--mono); color: var(--or); margin-left: auto; }
.jpdrop-home { margin: -18px 0 30px; }
@media (max-width: 600px) { .jpdrop { gap: 8px 12px; padding: 12px 14px; } .jpdrop b { font-size: 18px; } .jpdrop .jp-t { font-size: 14px; } }

/* ---- cookie banner (v9 consent, Maya 1 Nov 2026): non-modal, bottom card, never covers the photo viewer ---- */
.ck { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; max-width: 560px; margin-left: auto;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--pan2, #231636); color: var(--wh, #fff);
  border: 1px solid var(--line); border-left: 4px solid var(--am, #fb9219); box-shadow: 0 10px 30px rgba(0,0,0,.45);
  font: 400 14px/1.5 var(--body); }
.ck[hidden], html.lb-on .ck { display: none !important; }
.ck-t { margin: 0 0 10px; }
.ck-t b { color: var(--ye, #f3c94d); margin-right: 4px; }
.ck a { color: var(--lil, #c9b3ff); text-decoration: underline; }
.ck-more { margin: 0 0 10px; font-size: 13px; color: var(--mut); }
.ck-more summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.ck-more ul { margin: 4px 0 0 18px; }
.ck-more li { margin: 4px 0; }
.ck-now { margin: 0 0 10px; font-size: 13px; color: var(--mut); }
.ck-b { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-btn { min-height: 48px; padding: 10px 14px; border: 2px solid var(--wh, #fff); background: transparent; color: var(--wh, #fff);
  font: 700 15px var(--hud); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.ck-btn:hover, .ck-btn:focus-visible { background: var(--wh, #fff); color: var(--ink, #0b0712); outline: none; }
html.ck-on body { padding-bottom: 210px; }           /* page can always scroll past the banner */
.foot-legal [data-cookie-settings] { cursor: pointer; }
@media (max-width: 600px) { .ck { left: 8px; right: 8px; bottom: 8px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 13.5px; } }