:root {
    --ink: #20221f;
    --muted: #777970;
    --paper: #f2f0e9;
    --panel: #fffdf8;
    --line: #dedbd3;
    --orange: #c76545;
    --orange-dark: #8f3f31;
    --green: #3f6972;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'Space Grotesk', 'Trebuchet MS', sans-serif; }
button, input { font: inherit; }
button { transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }
.site-header { display: flex; align-items: center; gap: 18px; padding: 30px max(24px, calc((100vw - 1160px) / 2)); color: #fffdf8; background: var(--ink); }
.site-header h1 { margin: 2px 0 4px; font-size: clamp(26px, 4vw, 42px); line-height: 1; font-weight: 600; letter-spacing: -.8px; }
.header-copy { margin: 0; color: #bbbcb3; font-size: 16px; }
.eyebrow { margin: 0 0 7px; color: var(--orange); font: 700 10px 'DM Mono', monospace; letter-spacing: 1.4px; text-transform: uppercase; }
.header-state { margin-left: auto; color: #b8c9ba; font: 11px 'DM Mono', monospace; white-space: nowrap; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #8ec49a; box-shadow: 0 0 0 4px rgba(142,196,154,.12); }
.live-dot.is-offline { background: var(--orange); box-shadow: 0 0 0 4px rgba(47,107,79,.14); }
main { display: grid; max-width: 1160px; margin: 0 auto; padding: 34px 24px 60px; grid-template-columns: 300px 1fr; grid-template-areas: "controls simulation" "controls results" "graph graph"; align-items: start; gap: 22px; }
.panel { padding: 26px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(32,34,31,.045); animation: panel-in .55s both; }
.controls-panel { animation-delay: .06s; } .simulation-panel { animation-delay: .12s; } .graph-panel { animation-delay: .18s; }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.controls-panel { grid-area: controls; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.section-heading h2 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.4px; }
.step-label, .graph-key { color: var(--muted); font: 11px 'DM Mono', monospace; }
.control-kicker { margin: 0 0 8px; color: var(--muted); font: 10px 'DM Mono', monospace; letter-spacing: .7px; text-transform: uppercase; }
.controls-layout { display: grid; gap: 18px; }
.preset-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 18px; }
.preset { display: grid; gap: 7px; padding: 7px; border: 1px solid var(--line); color: var(--muted); background: transparent; text-align: left; cursor: pointer; font: 11px 'DM Mono', monospace; }
.preset > span:last-child { display: grid; gap: 2px; }
.preset strong, .sensor-option strong { color: var(--ink); font-size: 11px; font-weight: 600; }
.preset small, .sensor-option small { color: var(--muted); font-size: 9px; }
.preset-art, .sensor-art { display: block; overflow: hidden; position: relative; background: #dbe3dd; }
.preset-art { height: 45px; }
.preset-art::before, .preset-art::after { content: ''; position: absolute; }
.art-city { background: linear-gradient(#b9d3d5 0 58%, #66736e 59%); }
.art-city::before { left: 12%; bottom: 22%; width: 19%; height: 48%; background: #7d7770; box-shadow: 27px 7px #9b8175, 54px -8px #6c7773; }
.art-city::after { left: 8%; right: 8%; bottom: 12%; height: 3px; background: #e4d7b8; box-shadow: 0 9px #4c5552; }
.art-wet { background: linear-gradient(#738c96 0 58%, #405358 59%); }
.art-wet::before { inset: 0; background: repeating-linear-gradient(105deg, transparent 0 10px, rgba(231,248,248,.5) 11px, transparent 12px 23px); }
.art-wet::after { left: 8%; right: 8%; bottom: 18%; height: 3px; background: #b9d6d5; box-shadow: 0 9px rgba(185,214,213,.5); }
.art-track { background: linear-gradient(#a9c7ce 0 58%, #4d5c58 59%); }
.art-track::before { left: 0; right: 0; bottom: 21%; height: 6px; background: repeating-linear-gradient(90deg, #f4f1e8 0 9px, #2f6b4f 9px 18px); transform: skewY(-5deg); }
.art-track::after { left: 39%; bottom: 8%; width: 22%; height: 13px; background: repeating-linear-gradient(90deg, #fffdf8 0 5px, transparent 5px 10px); }
.preset.is-active, .preset:hover { border-color: var(--orange); color: var(--orange-dark); background: #edf5ef; }
.preset:active, .primary-button:active { transform: translateY(1px); }
.vehicle-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
.input-group { min-width: 0; margin-bottom: 14px; }
.input-group label { display: block; margin-bottom: 7px; font: 11px 'DM Mono', monospace; color: var(--muted); line-height: 1.25; }
.input-group input { width: 100%; padding: 10px 11px; border: 1px solid var(--line); color: var(--ink); background: #f7f5ef; font-size: 17px; }
.input-help { display: block; margin-top: 5px; color: var(--muted); font: 9px 'DM Mono', monospace; }
.input-group input:focus { outline: 2px solid #b8d2c0; border-color: var(--orange); }
.compact-input { margin-top: 1px; }
.preset:focus-visible, .sensor-option:focus-visible, .primary-button:focus-visible, .input-group input:focus-visible { outline: 3px solid #b8d2c0; outline-offset: 2px; }
.sensor-controls { display: grid; gap: 14px; margin-top: 3px; }
.sensor-control { padding-top: 13px; border-top: 1px solid var(--line); }
.sensor-control > label { display: block; margin-bottom: 8px; color: var(--muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; }
.sensor-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.sensor-option { display: grid; gap: 3px; padding: 5px; border: 1px solid var(--line); color: var(--muted); background: #f7f5ef; text-align: left; cursor: pointer; }
.sensor-option:disabled { cursor: not-allowed; opacity: .45; }
.sensor-option.is-active, .sensor-option:hover { border-color: var(--green); background: #eef5ed; }
.sensor-art { height: 25px; background: #e3e8e1; }
.sensor-art::before, .sensor-art::after { content: ''; position: absolute; }
.art-clean::before, .art-normal::before, .art-noisy::before { left: 12%; right: 12%; top: 50%; height: 2px; background: var(--green); }
.art-clean::after, .art-normal::after, .art-noisy::after { width: 4px; height: 4px; top: 10px; left: 30%; border-radius: 50%; background: var(--green); box-shadow: 19px 0 var(--green), 38px 0 var(--green); }
.art-normal::after { box-shadow: 19px 2px var(--green), 38px -1px var(--green); }
.art-noisy::after { box-shadow: 17px -5px var(--green), 37px 6px var(--green); }
.art-clear { background: linear-gradient(#b9d3d5, #e5eee7); }
.art-clear::before { left: 18%; right: 18%; top: 50%; border-top: 2px dotted var(--green); }
.art-typical { background: linear-gradient(#bdccd0, #e5eee7); }
.art-typical::before { left: 18%; right: 18%; top: 50%; border-top: 2px dotted var(--orange); transform: rotate(3deg); }
.art-urban { background: linear-gradient(#8a9a9e, #c4d0ca); }
.art-urban::before { left: 18%; right: 18%; top: 50%; border-top: 2px dotted var(--orange-dark); transform: rotate(-8deg); }
.art-sport::before, .art-standard::before, .art-touring::before { left: 50%; top: 50%; width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 50%; transform: translate(-50%, -50%); }
.art-standard::before { width: 17px; height: 17px; }
.art-touring::before { width: 20px; height: 20px; }
.sensor-control > input { width: 100%; margin-top: 6px; padding: 6px 8px; border: 1px solid var(--line); color: var(--ink); background: #fffdf8; font: 13px 'DM Mono', monospace; }
.configuration-hint { min-height: 16px; margin: 14px 0 -8px; color: var(--muted); font: 10px 'DM Mono', monospace; }
.configuration-hint.is-error { color: var(--orange-dark); }
.primary-button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 24px; padding: 14px 15px; border: 0; color: white; background: var(--orange); cursor: pointer; font: 700 12px 'DM Mono', monospace; text-transform: uppercase; }
.primary-button:hover { background: var(--orange-dark); }
.primary-button:disabled { cursor: wait; opacity: .7; }
.simulation-panel { grid-area: simulation; min-width: 0; overflow: hidden; }
.status-pill { padding: 6px 9px; border: 1px solid var(--line); color: var(--muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; }
.status-pill.is-running { color: var(--orange-dark); border-color: #b8d2c0; background: #edf5ef; }
.status-pill.is-complete { color: var(--green); border-color: #b8cfbd; background: #eef5ed; }
.road { position: relative; height: clamp(250px, 24vw, 320px); overflow: hidden; background: #b9c6c3; border: 1px solid #aab8b3; box-shadow: inset 0 -14px 22px rgba(25,31,29,.16); }
.road-sky { position: absolute; inset: 0 0 42% 0; overflow: hidden; background: linear-gradient(#bed4d7, #d8e1d8); }
.road-sky::before, .road-sky::after { content: ''; position: absolute; width: 58px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.62); box-shadow: 16px 4px 0 rgba(255,255,255,.62), -16px 5px 0 rgba(255,255,255,.62); }
.road-sky::before { top: 24px; left: 16%; transform: scale(.7); } .road-sky::after { top: 43px; right: 17%; transform: scale(.5); opacity: .7; }
.road-horizon { position: absolute; inset: 29% 0 40%; background: linear-gradient(170deg, transparent 40%, #6f897a 41% 62%, #9ba88f 63%); clip-path: polygon(0 100%, 0 60%, 21% 72%, 38% 30%, 49% 66%, 70% 26%, 100% 68%, 100% 100%); }
.road-horizon::before, .road-horizon::after { content: ''; position: absolute; bottom: 6%; width: 22px; height: 40px; background: #526e61; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.road-horizon::before { left: 11%; } .road-horizon::after { right: 25%; transform: scale(.8); }
.road-cloud { position: absolute; z-index: 1; width: 48px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.58); box-shadow: 13px 4px 0 rgba(255,255,255,.58), -13px 4px 0 rgba(255,255,255,.58); }
.cloud-one { top: 23px; left: 30%; transform: scale(.75); } .cloud-two { top: 53px; right: 30%; transform: scale(.48); opacity: .75; }
.city-scene, .track-scene { position: absolute; z-index: 1; inset: 0; pointer-events: none; transition: opacity .25s ease; }
.city-scene { opacity: 0; }
body[data-road="city"] .city-scene { opacity: 1; }
.building, .house { position: absolute; bottom: 40%; display: block; background: #667476; border: 1px solid rgba(32,34,31,.35); box-shadow: inset 8px 0 rgba(255,255,255,.07); }
.building::after { content: ''; position: absolute; inset: 10px 7px; background: repeating-linear-gradient(90deg, #e7c979 0 5px, transparent 5px 12px), repeating-linear-gradient(0deg, transparent 0 12px, rgba(228,201,121,.75) 13px 18px); opacity: .8; }
.building-one { left: 8%; width: 35px; height: 55px; } .building-two { left: 18%; width: 25px; height: 36px; background: #7f7775; } .building-three { right: 14%; width: 44px; height: 66px; background: #6d7775; }
.house { width: 36px; height: 22px; background: #b76b4d; border: 0; box-shadow: none; } .house::before { content: ''; position: absolute; top: -17px; left: -5px; width: 0; height: 0; border-right: 23px solid transparent; border-bottom: 18px solid #744e49; border-left: 23px solid transparent; } .house::after { content: ''; position: absolute; left: 14px; bottom: 0; width: 8px; height: 13px; background: #433f3b; }
.house-one { left: 40%; } .house-two { right: 31%; transform: scale(.75); background: #b49363; }
.track-scene { opacity: 0; } body[data-road="track"] .track-scene { opacity: 1; }
.track-curb { position: absolute; top: 57%; width: 19%; height: 8px; background: repeating-linear-gradient(90deg, #f4f1e8 0 13px, #2f6b4f 13px 26px); transform: skewY(-5deg); } .curb-left { left: 0; } .curb-right { right: 0; transform: skewY(5deg); }
.starting-grid { position: absolute; left: 42%; top: 64%; width: 16%; height: 15px; background: repeating-linear-gradient(90deg, #fffdf8 0 6px, transparent 6px 12px), repeating-linear-gradient(0deg, #fffdf8 0 6px, transparent 6px 12px); opacity: .75; }
.track-banner { position: absolute; top: 28%; right: 7%; padding: 4px 7px; color: #fffdf8; background: #2f6b4f; font: 8px 'DM Mono', monospace; letter-spacing: .8px; transform: rotate(3deg); }
.road-surface { position: absolute; inset: 58% 0 0; background: linear-gradient(90deg, #73736b 0 5%, #555b58 5% 95%, #73736b 95%), repeating-linear-gradient(0deg, transparent 0 17px, rgba(255,255,255,.025) 18px 19px); transform: perspective(160px) rotateX(5deg); }
.road-surface::before, .road-surface::after { content: ''; position: absolute; top: 4%; width: 3px; height: 100%; background: rgba(220,211,183,.8); }
.road-surface::before { left: 5%; } .road-surface::after { right: 5%; }
.road-surface span { position: absolute; top: 48%; width: 8%; height: 4px; background: #d5cdb6; box-shadow: 0 1px 0 rgba(28,31,29,.25); }
.road-surface span:nth-child(1) { left: 4%; } .road-surface span:nth-child(2) { left: 29%; } .road-surface span:nth-child(3) { left: 54%; } .road-surface span:nth-child(4) { left: 79%; }
.road-post { position: absolute; z-index: 1; bottom: 36%; width: 5px; height: 30px; background: #f4f1e8; border-top: 7px solid var(--orange); box-shadow: 2px 2px 0 rgba(32,34,31,.2); }
.road-post span { position: absolute; top: 14px; left: -4px; width: 13px; height: 3px; background: #f4f1e8; } .post-left { left: 8%; transform: scale(.65); } .post-right { right: 9%; transform: scale(.85); }
.rain-layer { position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: 0; background: repeating-linear-gradient(105deg, transparent 0 13px, rgba(228,244,246,.58) 14px, transparent 15px 28px); animation: rain-fall .45s linear infinite; }
@keyframes rain-fall { from { background-position: 0 0; } to { background-position: -24px 34px; } }
body[data-road="wet"] .rain-layer { opacity: 1; }
body[data-road="wet"] .road-sky { background: linear-gradient(#778e98, #abb9b6); }
body[data-road="wet"] .road-horizon { background: linear-gradient(170deg, transparent 40%, #536b6a 41% 62%, #71817d 63%); }
body[data-road="wet"] .road-surface { background: linear-gradient(90deg, #596a6b 0 5%, #34474b 5% 95%, #596a6b 95%), repeating-linear-gradient(0deg, transparent 0 17px, rgba(200,230,235,.08) 18px 19px); }
body[data-road="wet"] .road-surface::after, body[data-road="wet"] .road-surface::before { background: rgba(188,222,228,.65); }
body[data-road="track"] .road-sky { background: linear-gradient(#a9c7ce, #dae0d3); }
body[data-road="track"] .road-horizon { background: linear-gradient(170deg, transparent 40%, #617d6e 41% 62%, #a2af8e 63%); }
body[data-road="track"] .road-post { border-top-color: #d8d2c0; }
#motorcycle { position: absolute; z-index: 2; top: 49%; left: 20px; width: 154px; transform: translateY(-50%); transform-origin: 50% 78%; filter: drop-shadow(0 7px 4px rgba(0,0,0,.25)); }
#motorcycle svg { display: block; width: 100%; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
#motorcycle svg .leaning-body { transform-box: view-box; transform-origin: 120px 91px; transition: transform .35s ease; }
#motorcycle svg .wheel { fill: #272a29; stroke: #f5f1e6; stroke-width: 3; } #motorcycle svg .hub { fill: #d7d2c5; stroke: #272a29; stroke-width: 2; }
#motorcycle svg .wheel-spin { fill: none; stroke: #b7b8ae; stroke-width: 2; opacity: .85; transform-box: view-box; } #motorcycle.is-moving svg .wheel-spin { animation: none; }
@keyframes wheel-spin { to { transform: rotate(360deg); } }
#motorcycle svg .tank { fill: #f4f1e8; stroke: var(--ink); } #motorcycle svg .fairing { fill: #20221f; stroke: var(--ink); } #motorcycle svg .accent-panel { fill: var(--orange); stroke: var(--orange-dark); } #motorcycle svg .stripe { fill: #f4f1e8; stroke: #f4f1e8; }
#motorcycle svg .seat { fill: #272a29; stroke: #272a29; } #motorcycle svg .monoshock { stroke: #d7d2c5; stroke-width: 4; } #motorcycle svg .monoshock-spring { stroke: var(--orange); stroke-width: 2; } #motorcycle svg .fork { stroke: #d5d1c4; } #motorcycle svg .exhaust { fill: #9c9d94; stroke: #555b58; } #motorcycle svg .head-lamp { fill: #e9d47c; stroke: #bb9e44; } #motorcycle svg .head-lamp-bulb, #motorcycle svg .running-light { fill: #fff4b0; stroke: #fff8d1; stroke-width: 2; filter: drop-shadow(0 0 4px #f4d56f); } #motorcycle svg .running-light { stroke-width: 1; } #motorcycle svg .tail-light { fill: #7d241c; stroke: #5b1712; }
#motorcycle svg .brake-disc { fill: none; stroke: #c8c7bd; stroke-width: 3; } #motorcycle svg .tone-ring { fill: none; stroke: #2f6b4f; stroke-width: 2; stroke-dasharray: 2 3; } #motorcycle svg .caliper { fill: #2f6b4f; stroke: #1f4d39; stroke-width: 2; } #motorcycle svg .wss-sensor { fill: #20221f; stroke: #d7d2c5; stroke-width: 2; } #motorcycle svg .hydraulic-line { stroke: #2f6b4f; stroke-width: 2; }
#motorcycle svg .rear-caliper { fill: #2f6b4f; } #motorcycle svg .rear-hydraulic { stroke: #2f6b4f; } #motorcycle svg .handlebar { stroke: #30332f; stroke-width: 3; } #motorcycle svg .brake-lever { stroke: #d7d2c5; stroke-width: 2; } #motorcycle svg .accel-cable { stroke: #1f4d39; stroke-width: 1.5; }
#motorcycle.is-braking svg .tail-light { fill: #2f6b4f; stroke: #b8d2c0; filter: drop-shadow(0 0 5px #2f6b4f); }
#brakeImpressions { position: absolute; z-index: 1; top: 71%; left: 20px; display: flex; gap: 13px; width: 73px; opacity: 0; transform: rotate(-2deg); transition: opacity .25s ease; }
#brakeImpressions span { display: block; width: 30px; height: 5px; background: #2f6b4f; box-shadow: 0 0 0 1px rgba(31,77,57,.2); }
#brakeImpressions span:first-child { transform: translateY(4px) rotate(2deg); } #brakeImpressions span:last-child { transform: translateY(-2px) rotate(-4deg); }
#brakeImpressions.is-visible { opacity: .9; }
.telemetry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 1px; background: var(--line); border: 1px solid var(--line); }.telemetry div { padding: 12px 13px; background: var(--panel); }.telemetry span { display: block; margin-bottom: 6px; color: var(--muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; }.telemetry strong { font: 19px 'DM Mono', monospace; }.telemetry small { color: var(--muted); font-size: 10px; }
.sensor-readout { margin-top: 12px; border: 1px solid var(--line); background: #f7f5ef; }
.sensor-heading { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; color: var(--ink); border-bottom: 1px solid var(--line); font: 11px 'DM Mono', monospace; text-transform: uppercase; }
.sensor-heading small { color: var(--muted); font-size: 9px; font-weight: 400; text-transform: none; }
.sensor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.sensor-grid div { min-width: 0; padding: 10px 12px; background: var(--panel); }
.sensor-grid span { display: block; margin-bottom: 5px; color: var(--muted); font: 9px 'DM Mono', monospace; text-transform: uppercase; }
.sensor-grid strong { display: block; overflow: hidden; font: 15px 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.sensor-grid small { color: var(--muted); font-size: 9px; }
.results { display: grid; grid-area: results; grid-template-columns: repeat(4, 1fr); gap: 12px; }.result-card { min-width: 0; padding: 19px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 10px 30px rgba(32,34,31,.035); }.result-card h3 { margin: 0; color: var(--muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; }.result-card p { margin: 18px 0 3px; color: var(--orange-dark); font: 500 30px Georgia, serif; }.result-card span { color: var(--muted); font: 11px 'DM Mono', monospace; }.result-explanation { grid-area: explanation; margin: 0; padding: 14px 17px; border-left: 3px solid var(--orange); color: var(--muted); background: #f8df9c; font-size: 13px; line-height: 1.5; }.graph-panel { grid-area: graph; }.graph-key i { display: inline-block; width: 18px; margin-right: 5px; border-top: 3px solid var(--orange); vertical-align: middle; }.graph-panel .section-heading { margin-bottom: 5px; } #velocityGraph { display: block; width: 100%; height: 260px; }
@media (min-width: 980px) { main { grid-template-columns: 1fr; grid-template-areas: "controls" "simulation" "results" "explanation" "graph"; } .controls-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } .sensor-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .sensor-control { padding-top: 0; border-top: 0; } .sensor-control > label { min-height: 25px; } .primary-button { max-width: 330px; } }
@media (max-width: 760px) { .site-header { align-items: flex-start; padding: 24px 18px; } .header-state { display: none; } main { display: block; padding: 22px 14px 40px; } .panel, .results, .result-explanation { margin-bottom: 14px; } .controls-panel { margin-bottom: 14px; } .results { display: grid; grid-template-columns: repeat(2, 1fr); } .section-heading { margin-bottom: 19px; } }
@media (max-width: 430px) { .site-header h1 { max-width: 260px; font-size: 28px; } .header-copy { max-width: 250px; font-size: 14px; line-height: 1.35; } .panel { padding: 19px 16px; } .telemetry { grid-template-columns: repeat(2, 1fr); } .telemetry strong { font-size: 17px; } .sensor-grid { grid-template-columns: repeat(2, 1fr); } .sensor-grid strong { font-size: 13px; } .road { height: 205px; } #motorcycle { width: 132px; } .results { grid-template-columns: 1fr 1fr; gap: 7px; } .result-card { padding: 14px 11px; } .result-card p { font-size: 24px; } }
.site-footer { padding: 0 24px 28px; color: var(--muted); text-align: center; font: 10px 'DM Mono', monospace; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Warm braking accent with a cooler secondary signal color. */
.hero-art, .story-section { background: #3f6972; }
.hero h1 em, .sensor-story h2 em { color: #e3a184; }
.hero .eyebrow { color: #e3a184; }
.hero-button:hover { background: var(--orange); }
.art-track::before, .track-curb { background: repeating-linear-gradient(90deg, #f4f1e8 0 13px, var(--orange) 13px 26px); }
.track-banner { background-color: var(--orange); }
#motorcycle svg .accent-panel { fill: var(--orange); stroke: var(--orange-dark); }
#motorcycle svg .tone-ring { stroke: var(--orange); }
#motorcycle svg .caliper, #motorcycle svg .rear-caliper { fill: var(--orange); }
#motorcycle svg .hydraulic-line, #motorcycle svg .rear-hydraulic { stroke: var(--orange); }
#brakeImpressions span { background: var(--orange); }
.hero-ticker span::after { color: var(--orange); }
.study-note-mark, .sensor-story .eyebrow, .sensor-story-data li span, .technical-index, .stack-strip > span { color: var(--orange-dark); }
#motorcycle.is-braking svg .tail-light { fill: var(--orange); stroke: #f0b29b; filter: drop-shadow(0 0 5px var(--orange)); }
.status-pill.is-complete { transition: color .2s ease, background-color .2s ease; }
.status-pill.is-danger { color: #fffdf8; border-color: var(--orange-dark); background: var(--orange-dark); }
#motorcycle.is-fallen { transform: translateY(-8%) rotate(82deg) !important; transform-origin: 48% 78%; transition: transform .45s ease-in; filter: drop-shadow(8px 10px 4px rgba(0,0,0,.22)); }
#motorcycle.is-rear-lift { transform: translateY(-58%) rotate(-3deg) !important; transform-origin: 48% 78%; }
#motorcycle.is-hazard svg .running-light { fill: #f8df9c; stroke: #fff4b0; filter: drop-shadow(0 0 6px #f8df9c); animation: hazard-flash .55s steps(2, end) infinite; }
@keyframes hazard-flash { 50% { opacity: .2; } }
#dog { position: absolute; z-index: 4; bottom: 34%; left: 72%; width: 45px; height: 42px; color: #20221f; transition: left .2s ease; }
#dog span { position: absolute; display: block; background: #f2a83b; filter: drop-shadow(0 1px 0 #20221f); }
#dog .dog-body { left: 9px; bottom: 8px; width: 28px; height: 18px; border-radius: 55% 45% 35% 45%; }
#dog .dog-head { left: 1px; bottom: 18px; width: 17px; height: 16px; border-radius: 50%; }
#dog .dog-ear { left: 1px; bottom: 28px; width: 8px; height: 12px; border-radius: 60% 20%; transform: rotate(25deg); background: #9d4f2d; }
#dog .dog-leg { bottom: 0; width: 5px; height: 13px; border-radius: 0 0 3px 3px; }
#dog .dog-leg-one { left: 14px; } #dog .dog-leg-two { left: 29px; }
#dog .dog-tail { right: 1px; bottom: 22px; width: 15px; height: 5px; border-radius: 5px; transform: rotate(-35deg); transform-origin: left center; }
#dog strong { position: absolute; bottom: -15px; left: 4px; color: #fffdf8; font: 8px 'DM Mono', monospace; text-transform: uppercase; }
#dog.is-dead { filter: grayscale(1); opacity: .55; transform: rotate(90deg) translate(-4px, 12px); transform-origin: 45% 75%; }
#dog.is-dead strong { color: #f8df9c; }
#dog.is-safe { animation: dog-alert .8s ease-in-out infinite alternate; }
#dog.is-track-hidden { display: none; }
@keyframes dog-alert { to { transform: translateY(-2px); } }
#dog.is-jumping { animation: dog-jump 1.1s cubic-bezier(.2,.8,.3,1) both; }
@keyframes dog-jump { 0% { opacity: .25; transform: translateY(-76px) rotate(-8deg) scale(.86); } 55% { opacity: 1; transform: translateY(-22px) rotate(8deg) scale(1.04); } 100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); } }

/* Editorial shell: original visual system for Brake Lab. */
html { scroll-behavior: smooth; }
body { background: #f4f0e6; }
.site-header { position: sticky; z-index: 10; top: 0; min-height: 70px; padding: 18px max(24px, calc((100vw - 1240px) / 2)); border-bottom: 1px solid rgba(255,255,255,.15); }
.wordmark { color: #fffdf8; font: 700 18px 'DM Mono', monospace; letter-spacing: -1.5px; text-decoration: none; }
.wordmark span, .site-footer > span span { color: var(--orange); }
.site-nav { display: flex; gap: 24px; margin-left: auto; }
.site-nav a { color: #d8d8d0; font: 11px 'DM Mono', monospace; text-decoration: none; text-transform: uppercase; }
.site-nav a:hover { color: #fff; }
.header-state { margin-left: 26px; }
main { display: block; max-width: none; margin: 0; padding: 0; }
.hero { position: relative; display: grid; min-height: min(740px, calc(100vh - 70px)); grid-template-columns: minmax(0, 1fr) minmax(400px, .92fr); overflow: hidden; color: #fffdf8; background: #20221f; }
.hero-copy { z-index: 2; align-self: center; max-width: 700px; padding: 70px max(24px, calc((100vw - 1240px) / 2)); padding-right: 40px; }
.hero .eyebrow { color: #9bc4a8; }
.hero h1 { margin: 0; font-size: clamp(56px, 8vw, 118px); font-weight: 500; letter-spacing: -.08em; line-height: .86; }
.hero h1 em, .sensor-story h2 em { color: #9bc4a8; font-family: Georgia, serif; font-weight: 400; }
.hero-copy > p:not(.eyebrow) { max-width: 440px; margin: 34px 0 0; color: #c4c7be; font-size: 17px; line-height: 1.5; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 35px; }
.hero-button { display: inline-flex; align-items: center; gap: 34px; padding: 16px 18px; color: #20221f; background: #f4f0e6; font: 700 11px 'DM Mono', monospace; text-decoration: none; text-transform: uppercase; }
.hero-button:hover { background: #2f6b4f; color: #fff; }
.text-link { color: #fffdf8; font: 11px 'DM Mono', monospace; text-decoration: none; text-transform: uppercase; }
.text-link:hover { color: #9bc4a8; }
.hero-art { position: relative; min-height: 480px; overflow: hidden; background: #2f6b4f; }
.hero-art::before { position: absolute; inset: 0; content: ''; background: radial-gradient(circle at 75% 26%, rgba(255,242,205,.58) 0 2px, transparent 3px) 0 0 / 50px 50px; opacity: .35; }
.hero-art p { position: absolute; z-index: 2; top: 13%; left: 11%; margin: 0; color: #20221f; font: 11px 'DM Mono', monospace; letter-spacing: .08em; line-height: 1.45; }
.sun-disc { position: absolute; top: 9%; right: 11%; width: min(23vw, 310px); aspect-ratio: 1; border-radius: 50%; background: #f8df9c; box-shadow: 0 0 0 18px rgba(248,223,156,.15); }
.hero-road-lines { position: absolute; inset: 45% -15% -10%; transform: perspective(300px) rotateX(52deg); transform-origin: bottom; background: #252925; }
.hero-road-lines::before { position: absolute; inset: 0; content: ''; background: repeating-linear-gradient(90deg, transparent 0 13%, rgba(255,255,255,.12) 13.2% 13.8%, transparent 14% 25%); }
.hero-road-lines i { position: absolute; top: 45%; width: 9%; height: 6px; background: #f8df9c; }.hero-road-lines i:nth-child(1){left:8%}.hero-road-lines i:nth-child(2){left:34%}.hero-road-lines i:nth-child(3){left:60%}.hero-road-lines i:nth-child(4){left:86%}
.hero-bike { position: absolute; z-index: 2; right: 7%; bottom: 20%; width: min(38vw, 460px); transform: rotate(-2deg); filter: drop-shadow(13px 17px 0 rgba(32,34,31,.18)); }
.hero-bike svg { width: 100%; fill: none; stroke: #fffdf8; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }.hero-bike circle { fill: #252925; stroke: #fffdf8; }
.hero-stamp { position: absolute; z-index: 3; right: 10%; bottom: 10%; padding: 7px 10px; border: 1px solid rgba(32,34,31,.6); color: #20221f; font: 12px 'DM Mono', monospace; transform: rotate(-5deg); }
.hero-ticker { position: absolute; z-index: 5; right: 0; bottom: 0; left: 0; display: flex; gap: 32px; overflow: hidden; padding: 10px 0; color: #20221f; background: #f8df9c; font: 11px 'DM Mono', monospace; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }.hero-ticker span::after { margin-left: 32px; content: '✦'; color: #2f6b4f; }
.study-note { display: flex; align-items: baseline; gap: 24px; max-width: 1160px; margin: 0 auto; padding: 18px 24px 0; color: #5d625b; }.study-note-mark { flex: 0 0 auto; color: #1f4d39; font: 11px 'DM Mono', monospace; letter-spacing: .08em; }.study-note p { max-width: 820px; margin: 0; font-size: 13px; line-height: 1.5; }.study-note strong { color: #20221f; }
.dashboard { display: grid; max-width: 1160px; margin: 0 auto; padding: 74px 24px; grid-template-columns: 300px 1fr; grid-template-areas: "controls simulation" "controls results" "graph graph"; align-items: start; gap: 22px; }
.dashboard .panel { border-radius: 2px; }
.story-section { display: grid; padding: 108px max(24px, calc((100vw - 1160px) / 2)); color: #f4f0e6; background: #537b62; grid-template-columns: 1.1fr 1fr; gap: 72px; }
.story-intro h2, .sensor-story h2 { margin: 0; font-size: clamp(38px, 5vw, 68px); font-weight: 500; letter-spacing: -.06em; line-height: .95; }
.story-steps { display: grid; border-top: 1px solid rgba(255,255,255,.4); }.story-steps article { display: grid; padding: 21px 0; border-bottom: 1px solid rgba(255,255,255,.4); grid-template-columns: 44px 1fr; column-gap: 16px; }.story-steps span { color: #bbd5bc; font: 11px 'DM Mono', monospace; }.story-steps h3 { margin: 0; font-size: 21px; font-weight: 500; }.story-steps p { grid-column: 2; margin: 9px 0 0; color: #d9e4d7; line-height: 1.45; }
.sensor-story { display: grid; padding: 102px max(24px, calc((100vw - 1160px) / 2)); background: #f8df9c; grid-template-columns: 1fr 1fr; gap: 80px; }.sensor-story .eyebrow { color: #1f4d39; }.sensor-story h2 { color: #20221f; }.sensor-story-data { align-self: end; max-width: 420px; }.sensor-story-data > p { margin-top: 0; font-size: 18px; line-height: 1.45; }.sensor-story-data ul { padding: 0; border-top: 1px solid rgba(32,34,31,.35); list-style: none; }.sensor-story-data li { padding: 12px 0; border-bottom: 1px solid rgba(32,34,31,.35); font-size: 15px; }.sensor-story-data li span { display: inline-block; width: 52px; color: #1f4d39; font: 11px 'DM Mono', monospace; }
.technical-section { padding: 104px max(24px, calc((100vw - 1160px) / 2)); background: #e8ece4; }.technical-heading { display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 80px; align-items: end; }.technical-heading .eyebrow { grid-column: 1 / -1; }.technical-heading h2 { margin: 0; color: #20221f; font-size: clamp(38px, 5vw, 68px); font-weight: 500; letter-spacing: -.06em; line-height: .95; }.technical-heading > p:last-child { max-width: 390px; margin: 0; font-size: 18px; line-height: 1.45; }.technical-grid { display: grid; margin-top: 58px; border-top: 1px solid #aeb8ac; grid-template-columns: repeat(4, 1fr); }.technical-grid article { min-width: 0; padding: 22px 22px 10px 0; border-right: 1px solid #aeb8ac; }.technical-grid article:not(:first-child) { padding-left: 22px; }.technical-grid article:last-child { border-right: 0; }.technical-index { color: #1f4d39; font: 10px 'DM Mono', monospace; letter-spacing: .08em; }.technical-grid h3 { margin: 28px 0 10px; font-size: 19px; font-weight: 500; }.technical-grid p { margin: 0; color: #596158; font-size: 14px; line-height: 1.55; }.technical-grid code { color: #20221f; font: 12px 'DM Mono', monospace; }.stack-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 72px; padding-top: 18px; border-top: 1px solid #aeb8ac; }.stack-strip > span { margin-right: 10px; color: #1f4d39; font: 10px 'DM Mono', monospace; text-transform: uppercase; }.stack-strip strong { padding: 7px 9px; color: #20221f; border: 1px solid #b8c1b4; background: #f4f6f0; font: 11px 'DM Mono', monospace; font-weight: 500; }.stack-strip p { flex-basis: 100%; max-width: 720px; margin: 12px 0 0; color: #596158; font-size: 13px; line-height: 1.5; }.scope-note { max-width: 820px; margin: 48px 0 0; padding-left: 14px; border-left: 2px solid #2f6b4f; color: #596158; font: 11px 'DM Mono', monospace; line-height: 1.6; }
.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 28px max(24px, calc((100vw - 1160px) / 2)); color: #b8b9b0; background: #20221f; text-align: left; }.site-footer > span { color: #fffdf8; font: 700 16px 'DM Mono', monospace; letter-spacing: 0; }.site-footer > span span { display: block; font-size: 9px; letter-spacing: .08em; }.site-footer p { margin: 0; font: 10px 'DM Mono', monospace; }
@media (min-width: 901px) { .hero { min-height: min(650px, calc(100vh - 70px)); grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr); }.hero-copy { padding-top: 54px; padding-bottom: 86px; }.hero h1 { max-width: 720px; font-size: clamp(58px, 7.4vw, 108px); }.hero-copy > p:not(.eyebrow) { max-width: 500px; }.hero-art { min-height: 0; }.dashboard { grid-template-columns: minmax(0, 1fr); grid-template-areas: "controls" "simulation" "results" "explanation" "graph"; gap: 26px; padding-top: 58px; }.dashboard .controls-panel { position: static; }.dashboard .panel { padding: 24px; }.dashboard .simulation-panel { min-width: 0; }.controls-layout { grid-template-columns: 1fr; gap: 24px; }.vehicle-inputs { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 14px; }.sensor-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }.road { height: clamp(280px, 25vw, 350px); }.technical-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }.technical-grid article { min-height: 245px; } }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; }.hero-copy { padding-top: 86px; padding-bottom: 100px; }.hero-art { min-height: 420px; }.dashboard { grid-template-columns: 1fr; grid-template-areas: "controls" "simulation" "results" "explanation" "graph"; }.controls-layout { grid-template-columns: 1fr; }.sensor-controls { grid-template-columns: repeat(3, 1fr); }.story-section, .sensor-story, .technical-heading { grid-template-columns: 1fr; gap: 45px; }.technical-grid { grid-template-columns: repeat(2, 1fr); }.technical-grid article:nth-child(2), .technical-grid article:nth-child(4) { border-right: 0; }.technical-grid article:nth-child(3), .technical-grid article:nth-child(4), .technical-grid article:nth-child(5) { border-top: 1px solid #aeb8ac; }.site-nav { display: none; } }
@media (max-width: 600px) { .site-header { min-height: 60px; padding: 15px 18px; }.wordmark { font-size: 15px; }.header-state { display: block; margin-left: auto; font-size: 9px; }.hero { min-height: auto; }.hero-copy { padding: 72px 18px 76px; }.hero h1 { font-size: clamp(53px, 16vw, 80px); }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.hero-art { min-height: 320px; }.hero-bike { right: 2%; width: 88%; }.sun-disc { width: 180px; }.study-note { display: block; padding: 18px 18px 0; }.study-note p { margin-top: 8px; }.dashboard { padding: 44px 14px; }.sensor-controls { grid-template-columns: 1fr; }.story-section, .sensor-story, .technical-section { padding: 68px 18px; }.technical-grid { grid-template-columns: 1fr; }.technical-grid article, .technical-grid article:not(:first-child) { padding: 20px 0; border-right: 0; border-bottom: 1px solid #aeb8ac; }.technical-grid article:first-child { padding-top: 20px; }.technical-grid article:nth-child(3) { border-top: 0; }.stack-strip { align-items: flex-start; flex-direction: column; }.stack-strip > span { margin: 0 0 4px; }.site-footer { align-items: flex-start; flex-direction: column; gap: 12px; padding: 24px 18px; }.site-footer p { line-height: 1.5; } }