@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root { color-scheme: dark; --black:#090a0b; --panel:#111315; --white:#f3f2ed; --muted:#a7a7a1; --yellow:#ffd400; --line:#303236; --red:#ff7d72; font-family:"Noto Sans JP",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:var(--white); overflow-x:hidden; }
button,input { font:inherit; }
a { color:inherit; }
.hero { min-height:700px; height:94vh; max-height:920px; position:relative; display:flex; align-items:flex-end; isolation:isolate; overflow:hidden; }
.hero__image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-3; }
.hero__shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(6,7,8,.98) 0%,rgba(6,7,8,.72) 42%,rgba(6,7,8,.08) 74%),linear-gradient(0deg,rgba(6,7,8,.7),transparent 42%); }
.topbar { position:absolute; top:0; left:0; right:0; padding:26px clamp(24px,5vw,80px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.17); font-size:13px; letter-spacing:.08em; }
.topbar>a { text-decoration:none; min-height:44px; display:flex; align-items:center; }
.brand { font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:21px; letter-spacing:.12em; }
.brand__mark { display:grid; place-items:center; width:36px; height:36px; margin-right:12px; border:2px solid var(--yellow); border-radius:50%; color:var(--yellow); }
.hero__content { width:min(720px,90vw); margin:0 clamp(24px,8vw,130px) clamp(58px,8vh,100px); }
.eyebrow,.index { margin:0 0 18px; color:var(--yellow); font:700 13px/1 "Barlow Condensed",sans-serif; letter-spacing:.22em; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:22px; font:800 clamp(70px,10vw,142px)/.76 "Barlow Condensed",sans-serif; letter-spacing:-.045em; text-transform:uppercase; }
h1 span { color:transparent; -webkit-text-stroke:2px var(--white); }
.lead { max-width:600px; color:#d6d5d0; font-size:clamp(15px,1.4vw,19px); line-height:1.9; }
.hero__cta { margin-top:22px; display:inline-flex; gap:34px; align-items:center; min-height:52px; padding:0 22px; background:var(--yellow); color:#0a0b0c; font-weight:900; text-decoration:none; }
main { background:var(--white); color:#131416; }
.compare,.saved,.guide,.caution { padding:clamp(70px,9vw,130px) clamp(20px,8vw,130px); }
.section-heading { max-width:1440px; margin:0 auto 44px; display:grid; grid-template-columns:180px 1fr; gap:24px; align-items:start; }
.section-heading .index { color:#7a6500; padding-top:9px; }
.section-heading h2 { margin-bottom:6px; font:800 clamp(44px,6vw,78px)/.95 "Barlow Condensed",sans-serif; letter-spacing:-.03em; }
.section-heading p:last-child { color:#676866; }
#comparison-form { max-width:1440px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 180px; gap:18px; align-items:end; }
.input-bay { position:relative; padding:28px; background:#e8e7e1; border-top:5px solid #222; }
.input-bay--b { background:#17191b; color:var(--white); border-color:var(--yellow); }
.input-bay__tag { position:absolute; top:-5px; right:20px; padding:8px 12px; background:#222; color:white; font:700 12px "Barlow Condensed",sans-serif; letter-spacing:.1em; }
.input-bay--b .input-bay__tag { background:var(--yellow); color:#111; }
.input-bay label,.speed-field label { display:block; margin-bottom:12px; font-size:13px; font-weight:700; }
.input-bay input { width:100%; height:70px; padding:0; background:transparent; color:inherit; border:0; border-bottom:2px solid currentColor; border-radius:0; font:700 clamp(30px,4vw,52px) "Barlow Condensed",sans-serif; text-transform:uppercase; }
input:focus-visible,button:focus-visible,a:focus-visible { outline:3px solid #00a8ff; outline-offset:3px; }
input[aria-invalid="true"] { border-color:var(--red); }
.field-note,.error { min-height:20px; margin:9px 0 0; font-size:12px; color:#777; }
.input-bay--b .field-note { color:#aaa; }
.error { color:#b5261b; font-weight:700; }
.input-bay--b .error { color:#ff9c92; }
.swap { align-self:center; font:700 32px "Barlow Condensed",sans-serif; text-align:center; }
.speed-field { grid-column:1/2; }
.speed-field>div { display:flex; align-items:center; gap:8px; }
.speed-field input { width:100px; height:52px; padding:0 12px; border:2px solid #222; color:#111; background:white; font-size:18px; }
.measure-button { grid-column:4; min-height:58px; border:0; background:var(--yellow); color:#111; font-weight:900; cursor:pointer; }
.results { padding:clamp(70px,9vw,130px) clamp(20px,8vw,130px); background:#0e1012; color:var(--white); }
.section-heading--light .index { color:var(--yellow); }
.section-heading--light p:last-child { color:#aaa; }
.result-grid { max-width:1440px; margin:auto; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.overlay-panel { min-width:0; padding:20px; background:#151719; }
#tire-overlay { display:block; width:100%; height:auto; max-height:580px; background:radial-gradient(circle at center,#24272a,#121416 70%); }
.floor { stroke:#656669; stroke-width:1; stroke-dasharray:7 8; }
.wheel { fill:none; stroke-width:22; transform-origin:center; }
.wheel--a { stroke:#f2f1eb; opacity:.9; }
.wheel--b { stroke:var(--yellow); opacity:.76; stroke-dasharray:7 5; }
.measure-line { stroke-width:2; }
.measure-line--a { stroke:#f2f1eb; }
.measure-line--b { stroke:var(--yellow); }
.svg-label { font:700 18px "Barlow Condensed",sans-serif; }
.svg-label--a { fill:#f2f1eb; }.svg-label--b { fill:var(--yellow); }
.width-label { fill:#8f9194; font:600 12px "Noto Sans JP",sans-serif; }
.width-bar--a { fill:#f2f1eb; }.width-bar--b { fill:var(--yellow); }
.legend { display:flex; gap:24px; margin:18px 4px 8px; font-size:13px; }
.legend span { display:flex; align-items:center; gap:8px; }
.legend i { width:28px; border-top:3px solid; }.legend-a { border-color:white!important; }.legend-b { border-color:var(--yellow)!important; border-top-style:dashed!important; }
.scale-note { margin:10px 4px 0; color:#8f9194; font-size:12px; line-height:1.7; }
.metrics { background:#111315; }
.metric { display:grid; grid-template-columns:1fr 1.15fr 1.5fr; align-items:center; min-height:112px; padding:20px 24px; border-bottom:1px solid var(--line); }
.metric p { margin:0; color:#a8aaac; font-size:13px; }
.metric>div { display:flex; align-items:baseline; gap:5px; }
.metric strong { font:700 clamp(28px,3.2vw,46px) "Barlow Condensed",sans-serif; }
.metric span { color:#999; font-size:12px; }
.metric em { margin-left:auto; padding:5px 7px; background:#292c2f; color:var(--yellow); font:normal 700 12px "Barlow Condensed",sans-serif; }
.metric--primary { border-left:4px solid var(--yellow); }
.speed-result { padding:25px 24px 30px; background:var(--yellow); color:#111; }
.speed-result p { margin-bottom:6px; font-size:12px; }.speed-result strong { display:block; font:700 30px "Barlow Condensed",sans-serif; }.speed-result small { font-weight:700; }
.result-actions { max-width:1440px; margin:24px auto 0; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.action-button { min-height:48px; padding:0 20px; border:2px solid var(--yellow); background:var(--yellow); color:#111; font-weight:900; cursor:pointer; }
.action-button--ghost { background:transparent; color:white; border-color:#777; }
#save-message { margin:0 0 0 8px; color:#c7c8c8; font-size:13px; }
.saved { background:#ecebe5; }
.saved-list { max-width:1440px; margin:auto; display:grid; gap:10px; }
.saved-empty { padding:30px; border:1px dashed #aaa; color:#777; }
.saved-card { display:grid; grid-template-columns:1fr auto; background:white; border-left:5px solid #17191b; }
.saved-card__load { min-height:76px; display:grid; grid-template-columns:54px 1fr; grid-template-rows:1fr 1fr; column-gap:16px; padding:12px 20px; text-align:left; border:0; background:transparent; color:#151618; cursor:pointer; }
.saved-card__load span { grid-row:1/3; align-self:center; font:700 24px "Barlow Condensed",sans-serif; color:#8a7410; }.saved-card__load strong { align-self:end; }.saved-card__load small { color:#777; }
.saved-card__remove { min-width:72px; min-height:44px; margin:12px; border:1px solid #aaa; background:white; color:#333; cursor:pointer; }
.guide { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,8vw,130px); background:#17191b; color:var(--white); }
.guide__main h2 { font:800 clamp(48px,6vw,82px)/.92 "Barlow Condensed",sans-serif; }
.formula { display:flex; align-items:baseline; gap:6px; margin-top:54px; font:800 clamp(44px,6vw,76px) "Barlow Condensed",sans-serif; }.formula i { color:var(--yellow); font-style:normal; }
.formula-labels { display:flex; justify-content:space-between; max-width:440px; color:#98999b; font-size:11px; }
.guide__notes article { display:grid; grid-template-columns:50px 1fr; gap:20px; padding:28px 0; border-top:1px solid #3b3d3f; }.guide__notes article>span { color:var(--yellow); font:700 20px "Barlow Condensed",sans-serif; }.guide__notes h3 { margin-bottom:8px; font-size:18px; }.guide__notes p { margin:0; color:#b8b9b9; line-height:1.9; font-size:14px; }
.caution { display:flex; gap:30px; align-items:flex-start; background:var(--yellow); }
.caution__icon { flex:0 0 auto; display:grid; place-items:center; width:54px; height:54px; border:3px solid #111; border-radius:50%; font:800 28px "Barlow Condensed",sans-serif; }
.caution h2 { margin-bottom:8px; font:800 34px "Barlow Condensed",sans-serif; }.caution p { max-width:1000px; margin:0; line-height:1.9; }
footer { padding:38px clamp(20px,8vw,130px); display:grid; grid-template-columns:1fr 2fr auto; gap:20px; color:#aaa; font-size:12px; } footer p { margin:0; } footer p:first-child { color:white; font-weight:900; } footer a { min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; }

@media (max-width:900px) {
  .hero { min-height:720px; height:88vh; }.hero__image { object-position:62% center; }.hero__shade { background:linear-gradient(90deg,rgba(6,7,8,.96),rgba(6,7,8,.4)),linear-gradient(0deg,rgba(6,7,8,.85),transparent 60%); }
  #comparison-form { grid-template-columns:1fr 32px 1fr; }.speed-field { grid-column:1/3; }.measure-button { grid-column:3; }.result-grid { grid-template-columns:1fr; }.guide { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .topbar>a:last-child { display:none; }.hero { min-height:680px; }.hero__content { margin-bottom:48px; }.hero__image { object-position:66% center; opacity:.72; }
  h1 { font-size:clamp(64px,24vw,104px); }.lead { max-width:92%; font-size:14px; }
  .compare,.results,.saved,.guide,.caution { padding:64px 18px; }.section-heading { grid-template-columns:1fr; gap:0; }.section-heading h2 { font-size:48px; }
  #comparison-form { grid-template-columns:1fr; }.swap { transform:rotate(45deg); }.speed-field,.measure-button { grid-column:1; }.measure-button { min-height:56px; }.input-bay { padding:22px 20px; }.input-bay input { font-size:40px; }
  .result-grid { border-left:0;border-right:0; }.overlay-panel { padding:8px; }.metric { grid-template-columns:1fr 1fr; padding:17px 16px; }.metric p { grid-column:1/3; margin-bottom:4px; }.metric strong { font-size:32px; }.result-actions { align-items:stretch; }.action-button { flex:1 1 150px; }
  .guide__main h2 { font-size:54px; }.formula { font-size:15vw; gap:3px; }.formula-labels { font-size:9px; }
  .caution { gap:18px; }.caution__icon { width:44px;height:44px; }.caution h2 { font-size:28px; }
  footer { grid-template-columns:1fr auto; } footer p:nth-child(2) { grid-column:1/3; grid-row:2; }
}
@media (max-width:340px) {
  .topbar { padding-left:16px;padding-right:16px; }.brand { font-size:18px; }.hero__content { margin-left:16px; }.compare,.results,.saved,.guide,.caution { padding-left:14px;padding-right:14px; }.input-bay input { font-size:34px; }.metric { padding-left:12px;padding-right:12px; }.metric strong { font-size:28px; }
}
@media print {
  .hero,.compare,.saved,.guide,.caution,footer,.result-actions { display:none!important; }.results { padding:20px;background:white;color:black; }.section-heading--light p:last-child { color:#333; }.result-grid { grid-template-columns:1fr 1fr;border-color:#777; }.overlay-panel,.metrics { background:white; }.metric { border-color:#bbb; }.metric em { color:black;background:#eee; }.speed-result { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}