:root { color-scheme: light; --fog:#f0f1f2; --paper:#ffffff; --ink:#333333; --slate:#6b6f73; --blue:#096fc8; --deep:#0757a0; --line:rgba(51,51,51,.12); }
* { box-sizing:border-box; }
body { margin:0; background:var(--fog); color:var(--ink); font:400 16px/1.7 -apple-system,BlinkMacSystemFont,"Inter","Hiragino Sans","Noto Sans JP",sans-serif; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-weight:600; line-height:1.25; }
h2 { font-size:24px; margin-bottom:16px; } h3 { font-size:20px; }
.container { width:calc(100% - 96px); max-width:1200px; margin-inline:auto; }
.header { position:fixed; z-index:10; top:0; left:0; width:100%; max-width:none; padding:24px max(48px,calc((100vw - 1200px)/2)); display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid rgba(51,51,51,0); transition:transform .3s; }
.header.scrolled { background:rgba(255,255,255,.85); backdrop-filter:blur(12px); border-color:var(--line); }
.brand { color:var(--ink); font-size:24px; font-weight:600; white-space:nowrap; }
nav { display:flex; gap:32px; } nav a { color:var(--ink); font-size:15px; }
.header nav a { padding-block:8px; border-bottom:2px solid rgba(51,51,51,0); }
.header nav a[aria-current] { border-color:var(--blue); }
.primary,.secondary { display:inline-block; background:var(--blue); color:var(--paper); border-radius:999px; font-size:15px; font-weight:600; padding:14px 28px; transition:transform .2s; }
.secondary { padding:9px 20px; }
.primary:hover,.secondary:hover { background:var(--deep); text-decoration:none; }
.hero { position:relative; overflow:hidden; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding-block:160px 80px; }
#orb { position:fixed; inset:0; width:100vw; height:100vh; height:100svh; z-index:0; pointer-events:none; }
.hero-copy { position:relative; z-index:1; max-width:55%; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.12em; color:var(--slate); }
.hero-title { font-size:clamp(40px,10vw,84px); font-weight:600; letter-spacing:-.02em; line-height:1; max-width:650px; margin:24px 0; }
h1 { font-size:clamp(24px,5.5vw,36px); max-width:650px; }
.lead { max-width:620px; margin:24px 0 32px; }
.history { display:block; margin-top:20px; }
.section,.results-band { margin-top:96px; }
.english { font-size:clamp(32px,4vw,40px); font-weight:600; letter-spacing:-.02em; line-height:1.1; margin-bottom:16px; }
.results-heading>p:last-child,.detail,.race-date { color:var(--slate); font-size:13px; }
.metrics,.features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:32px; }
.metric,.features article,.race-card { min-width:0; padding:32px; background:rgba(255,255,255,.88); border:1px solid var(--line); border-radius:16px; transition:transform .2s; }
.metric:hover,.features article:hover,.race-card:hover { border-color:var(--blue); }
.metric h3 { font-size:14px; font-weight:400; }
.number { color:var(--blue); font-size:clamp(44px,4vw,52px); font-weight:600; font-variant-numeric:tabular-nums; line-height:1.25; margin-top:20px; }
.unit,.currency { font-size:14px; color:var(--slate); font-weight:400; margin-left:6px; }
.currency { margin-left:0; }
.money .number { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:clamp(28px,3.1vw,44px); }
.money .number>span { white-space:nowrap; }
.features p { margin-top:16px; }
.schedule { margin:32px 0 0; max-width:720px; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:8px 24px; }
.schedule>div { display:grid; grid-template-columns:150px 1fr; padding:28px 0; border-bottom:1px solid var(--line); }
.schedule dt { color:var(--blue); font-weight:600; font-variant-numeric:tabular-nums; }
.schedule dd { margin:0; }
.section-heading { display:flex; justify-content:space-between; gap:20px; align-items:baseline; }
.race-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px; }
.race-card { position:relative; color:var(--ink); } .race-card:hover { text-decoration:none; }
.race-venue { color:var(--slate); font-size:13px; letter-spacing:.08em; }
.race-card h3 { margin:20px 0 28px; } .race-card time { color:var(--blue); font-variant-numeric:tabular-nums; }
.arrow { position:absolute; right:24px; top:24px; color:var(--slate); } .race-card:hover .arrow { color:var(--blue); }
.disclaimer { margin-block:96px; text-align:center; color:var(--slate); font-size:13px; }
.footer-band { background:var(--paper); border-top:1px solid var(--line); padding:56px 0; }
.footer-inner { display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.footer-inner nav { margin-left:auto; } .footer-inner .eyebrow { width:100%; }
main { position:relative; z-index:1; overflow-x:clip; }
.footer-band { position:relative; z-index:1; }
.section-heading,.english,h1,h2,.lead,.schedule,.schedule dt { color:var(--ink); }
.header.hidden { transform:translateY(-100%); }
.schedule>div { position:relative; border-bottom:0; }
.schedule>div::after { content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; background:var(--line); transform-origin:left; }
.motion .anim { opacity:0; transform:translate(var(--x,0px),var(--y,28px)); transition:transform var(--duration,.85s) cubic-bezier(.2,.7,.2,1),opacity var(--duration,.85s) cubic-bezier(.2,.7,.2,1); }
.motion .anim.in { opacity:1; transform:translate(0,0); }
.motion .schedule>div::after { transform:scaleX(0); transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.motion .schedule>div.in::after { transform:scaleX(1); }
.motion .schedule>div.preparing::after { will-change:transform; }
#orb { transform-origin:70% 50%; }
.motion #orb { opacity:0; transform:scale(.85); transition:opacity 1.2s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1); }
.motion #orb.in { opacity:1; transform:scale(1); }
.motion #orb.settled { transition:none; }
@media(max-width:640px) {
 .container { width:calc(100% - 40px); }
 .header { width:100%; padding:16px 20px; gap:16px; } .header nav { gap:20px; } .header .secondary { display:none; }
 .hero { padding-top:calc(26vh + 30vmin + 40px); padding-top:calc(26svh + 30vmin + 40px); padding-bottom:48px; min-height:100vh; min-height:100svh; }
 #orb { transform-origin:50% 26%; }
 .hero-copy { max-width:100%; }
 .hero-title { margin-block:16px; overflow-wrap:break-word; }
 .section,.results-band { margin-top:64px; }
 .metrics { gap:12px; } .metric,.features article,.race-card { padding:24px; }
 .metric { padding-inline:16px; } .number { font-size:44px; } .unit { margin-left:2px; }
 .money .number { font-size:clamp(18px,5.3vw,28px); gap:4px; } .money .number>.unit { width:100%; }
 .features,.race-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
 .schedule>div { grid-template-columns:100px minmax(0,1fr); gap:12px; }
 .schedule { padding:4px 16px; }
 .section-heading { align-items:flex-start; flex-direction:column; gap:0; }
 .disclaimer { margin-block:64px; } .footer-inner nav { gap:20px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } .motion .anim,.motion #orb { opacity:1; transform:none; } .motion .schedule>div::after { transform:scaleX(1); } .header.hidden { transform:none; } }