@font-face{font-family:Plex;src:url('assets/fonts/plex-mono-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Plex;src:url('assets/fonts/plex-mono-medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Russo;src:url('assets/fonts/russo-one.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;--bg:#080808;--panel:#0d0d0d;--line:#303030;--soft:#a3a3a3;--white:#ededed;--mono:Plex,'Courier New',monospace;--display:Russo,'Arial Black',sans-serif;--gutter:clamp(20px,4vw,72px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--bg);color:var(--white);font:400 16px/1.6 var(--mono);-webkit-font-smoothing:antialiased}body::before{content:'';position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 3px,#ffffff02 3px 4px);z-index:5}button,a{-webkit-tap-highlight-color:transparent}button{font:400 14px/1.4 var(--mono);cursor:pointer;color:inherit;background:transparent;border:1px solid var(--line);border-radius:0;transition:background .16s,border-color .16s,color .16s}button:hover{background:#252525;border-color:#777}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid white;outline-offset:4px}button.selected{background:var(--white);color:#080808;border-color:var(--white)}a{color:inherit;text-decoration:none}[hidden]{display:none!important}h1,h2,h3,p,dl,dd{margin:0}.skip-link{position:fixed;left:20px;top:-90px;background:white;color:black;padding:12px 20px;z-index:50}.skip-link:focus{top:12px}
.topbar{min-height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:36px;padding:18px var(--gutter)}.brand{font:25px/1 var(--display);letter-spacing:-1px;white-space:nowrap}.brand-mark{font:24px/1 var(--mono);padding:0 3px}.path{display:flex;gap:14px;align-items:center}.path,.top-status{font-size:12px;letter-spacing:1px;color:var(--soft)}.path-current{color:#e4e4e4}.top-status{margin-left:auto;white-space:nowrap}main{max-width:1800px;margin:auto;padding:44px var(--gutter) 60px}.title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px;gap:24px}.eyebrow{font-size:12px;letter-spacing:1.6px;color:var(--soft);margin-bottom:12px}.eyebrow>span{padding:0 10px;color:#666}h1{font:clamp(52px,7vw,106px)/1.05 var(--display);letter-spacing:-3px;transform:skewX(-8deg);transform-origin:left;text-shadow:0 0 24px #ffffff12}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 370px;border:1px solid var(--line);scroll-margin-top:0}.viewer{min-width:0;display:flex;flex-direction:column;align-self:start;background:radial-gradient(ellipse at 50% 40%,#181818 0,#0b0b0b 72%);position:sticky;top:58px}.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;font-size:12px;letter-spacing:.7px;border-bottom:1px solid #242424}.viewer-top>span:first-child{display:flex;align-items:center;gap:12px}.cross-mark{width:12px;height:12px;display:inline-block;background:linear-gradient(white,white) center/1px 100% no-repeat,linear-gradient(white,white) center/100% 1px no-repeat;opacity:.6}.model-tag{color:var(--soft);white-space:nowrap}.scene{position:relative;height:clamp(390px,37vw,600px);overflow:hidden}canvas{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.corner{position:absolute;width:22px;height:22px;pointer-events:none;border-color:#777;border-style:solid}.tl{top:24px;left:24px;border-width:2px 0 0 2px}.tr{top:24px;right:24px;border-width:2px 2px 0 0}.bl{bottom:24px;left:24px;border-width:0 0 2px 2px}.br{bottom:24px;right:24px;border-width:0 2px 2px 0}.scene-index{position:absolute;left:40px;top:40px;font-size:12px;line-height:1.8;pointer-events:none}.scene-index span{color:#808080;font-size:12px}.orientation{position:absolute;left:40px;bottom:39px;font-size:12px;display:flex;gap:6px;flex-direction:column;pointer-events:none}.orientation span:last-child{color:#8a8a8a}.viewer-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0 24px;padding:18px 0 14px;border-top:1px solid var(--line)}.segmented,.small-controls{display:flex;gap:4px}.segmented{gap:0}.segmented button+button{margin-left:-1px}.viewer-controls button{min-height:42px;padding:9px 14px}.small-controls button:first-child,.small-controls button:nth-child(2){width:42px;padding:0;font-size:20px}.small-controls button{padding:8px 10px;font-size:12px}.view-presets{padding:0 24px 16px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--soft)}.view-presets>span{margin-right:6px;letter-spacing:1px}.view-presets button{border:0;padding:10px 4px;min-height:40px;font-size:14px;position:relative}.view-presets button:hover{background:transparent;color:white}.view-presets button[aria-pressed=true]{color:white}.view-presets button[aria-pressed=true]::after{content:'';position:absolute;bottom:4px;left:4px;right:4px;height:1px;background:white}.callout{display:none;position:absolute;pointer-events:none;align-items:center;gap:8px;font-size:12px;background:#080808ed;border:1px solid #888;padding:8px 10px;white-space:nowrap;max-width:calc(100% - 30px)}.callout-dot{width:5px;height:5px;background:white;flex-shrink:0}
.dossier{border-left:1px solid var(--line);background:var(--panel);padding:25px 26px 24px;min-width:0}.dossier-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dossier-heading .eyebrow{margin:0;font-size:12px;letter-spacing:1px}.dossier h2{font:24px/1.35 var(--display);letter-spacing:-.4px}.identity{margin:24px 0 18px;display:grid;gap:7px}.identity>div{display:flex;align-items:baseline;justify-content:space-between;gap:20px;font-size:14px}.identity dt{color:var(--soft)}.identity dd{color:#ddd}.specs{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;padding:21px 0 26px;border-top:1px solid var(--line)}.specs dt{font-size:12px;color:var(--soft);margin-bottom:8px}.specs dd{font:36px/1.2 var(--display);white-space:nowrap}.specs small{font:14px var(--mono);color:var(--soft)}.section-label{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:18px 0 9px;font-size:12px;letter-spacing:.6px;color:var(--soft)}.section-label h3{font:400 12px/1.5 var(--mono);letter-spacing:.6px;color:#ddd}.section-label>span{border:1px solid #444;padding:0 7px}.equipment-intro{font-size:12px;color:#939393;margin-bottom:14px}.module-list button[data-module]{width:100%;display:flex;align-items:center;text-align:left;border:0;border-top:1px solid #292929;padding:17px 8px 17px 0;gap:12px;font-size:14px;min-height:78px}.module-id{font-size:12px;color:#808080;align-self:flex-start;margin-top:2px}.module-list small{display:block;font-size:12px;color:#949494;margin-top:7px;line-height:1.45}.module-symbol{margin-left:auto;color:#b7b7b7;align-self:flex-start;line-height:20px;font-size:20px}.module-list button[data-module]:hover{background:#171717}.module-list button[data-module].selected{background:#1c1c1c;color:white;border-color:#444;box-shadow:inset 2px 0 white;padding-left:10px}.module-list button.selected .module-id{color:white}.module-detail{padding:18px 16px 16px;border:1px solid #3d3d3d;border-top:0;background:#141414;animation:reveal .18s ease-out}.module-detail>.eyebrow{font-size:12px;color:#ddd;letter-spacing:.6px;line-height:1.6;margin:0}.module-detail>p{font-size:14px;line-height:1.8;color:#bcbcbc;margin-top:12px}.module-detail .detail-close{display:block;border:0;border-bottom:1px solid #666;padding:4px 0;font-size:12px;color:#bdbdbd;margin-top:15px;min-height:32px}.module-detail .detail-close:hover{color:white;background:transparent}#equipment{scroll-margin-top:84px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px var(--gutter);font-size:12px;color:#999;letter-spacing:.8px}footer b{font-weight:400;color:#ddd;margin:0 8px}
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.workspace{grid-template-columns:minmax(0,1fr) 405px}.dossier{padding:30px 32px}.dossier h2{font-size:27px}.scene{height:610px}.specs{padding:26px 0 30px}.module-list button[data-module]{padding-top:19px;padding-bottom:19px}}
@media(max-width:1150px){.workspace{grid-template-columns:minmax(0,1fr) 335px}.dossier{padding:22px}.dossier h2{font-size:22px}.viewer-controls{margin:0 20px}.viewer-controls button{padding:10px 12px}.small-controls button{padding:8px;font-size:12px}.viewer-controls{justify-content:flex-start}.view-presets{padding-left:20px;padding-right:20px}.scene{height:440px}.scene-index{left:35px;top:37px}.scene-index>span{display:none}.orientation{left:35px}.viewer-top{padding:18px 20px;letter-spacing:0;font-size:12px}}
@media(max-width:850px){:root{--gutter:24px}.topbar{gap:22px}.top-status{display:none}main{padding-top:30px}.workspace{grid-template-columns:1fr}.viewer{position:relative;top:auto}.scene{height:450px}.dossier{border-left:0;border-top:1px solid var(--line);padding:28px}.dossier-heading{margin-bottom:16px}.dossier h2{font-size:26px}.identity{max-width:440px}.specs{max-width:440px;padding-bottom:30px}.module-list button[data-module]{padding-top:18px;padding-bottom:18px;font-size:16px}.module-list small{font-size:13px}.module-detail>p{font-size:16px}.viewer-controls{justify-content:space-between}}
@media(max-width:540px){:root{--gutter:16px}html{scroll-padding-top:68px}.topbar{min-height:64px;padding-top:16px;padding-bottom:16px;gap:18px}.brand{font-size:21px}.brand-mark{font-size:20px}.path{font-size:12px;letter-spacing:0;gap:8px;flex-wrap:wrap}.title-row{margin-bottom:27px;gap:14px}.eyebrow{font-size:12px;letter-spacing:.7px}h1{font-size:clamp(42px,11vw,58px);letter-spacing:-1.5px}.scene{height:360px}.viewer-top{font-size:12px;padding:16px;gap:8px}.viewer-top>span:first-child{gap:8px}.cross-mark{width:10px;height:10px}.model-tag{font-size:12px}.corner{width:18px;height:18px}.tl{top:18px;left:18px}.tr{top:18px;right:18px}.bl{bottom:18px;left:18px}.br{bottom:18px;right:18px}.scene-index{left:29px;top:30px;font-size:12px}.orientation{left:29px;bottom:29px;font-size:12px;gap:4px}.orientation>span:last-child{display:none}.viewer-controls{margin:0 16px;gap:12px;padding:16px 0 12px}.segmented{width:100%}.segmented button{flex:1;min-height:44px}.small-controls{width:100%;gap:6px}.small-controls button{min-height:44px;font-size:12px;flex:1;white-space:nowrap}.small-controls button:first-child,.small-controls button:nth-child(2){flex:0 0 44px}.view-presets{gap:5px 12px;padding:0 16px 14px}.view-presets>span{display:none}.view-presets button{font-size:14px}.callout{white-space:normal;max-width:210px;font-size:12px}.dossier{padding:24px 20px}.dossier h2{font-size:24px}.specs{gap:20px}.specs dd{font-size:34px}.identity{margin-top:20px}.module-list button[data-module]{font-size:14px;gap:10px}.module-list small{font-size:12px}.module-detail>p{font-size:14px}footer{padding-top:20px;padding-bottom:20px;flex-wrap:wrap;gap:18px}footer>span:nth-child(2){display:none}}
@media(max-width:360px){.title-row>div:first-child{min-width:0;flex:1}.unit-title h1{font-size:36px}.small-controls{gap:4px}.small-controls button{padding:8px 4px}.small-controls button:first-child,.small-controls button:nth-child(2){flex-basis:40px;width:40px}.view-presets{gap:4px 8px}}
.unit-title>div:first-child{min-width:0;flex:1}.unit-title h1{font-size:clamp(30px,4.6vw,70px);line-height:1.2;letter-spacing:-1.5px;transform:none}.viewer{position:relative;top:0}.workspace{margin-top:8px}.scene-index{max-width:calc(100% - 80px)}
@media(max-width:540px){.unit-title h1{font-size:clamp(27px,7vw,38px);letter-spacing:-.6px}.scene-index{max-width:calc(100% - 58px);font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Viewer grows with the dossier; controls remain against its bottom edge. */
.viewer{align-self:stretch;min-height:0}.scene{flex:1 1 auto;height:auto;min-height:420px}.viewer-top,.viewer-controls,.view-presets{flex-shrink:0}.view-presets{margin-top:auto}.path{min-width:0}.path-current{overflow-wrap:anywhere}
@media(max-width:850px){.scene{flex:0 0 450px;height:450px;min-height:0}.view-presets{margin-top:0}}
@media(max-width:540px){.scene{flex-basis:360px;height:360px}.path{flex:1;display:block;font-size:11px;line-height:1.6}.path>span{display:inline}.path>span+span{margin-left:5px}.path-current{display:block!important;margin-left:0!important;font-size:12px}.topbar{align-items:center}}
/* Static illustrations share the dossier height and keep view buttons at the frame. */
.bike-illustration{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:90px 30px 40px;filter:grayscale(1);user-select:none;pointer-events:none}
.scene{background:#080808}
.illustration-presets{padding:18px 24px;gap:12px;border-top:1px solid var(--line);margin-top:0}
.illustration-presets button{border:1px solid var(--line);padding:10px 16px;min-height:44px}
.illustration-presets button.selected{background:var(--white);color:var(--bg);border-color:var(--white)}
@media(max-width:540px){.bike-illustration{padding:65px 20px 25px}.illustration-presets{padding:14px 16px}.viewer-top{font-size:11px}}

.illustration-presets{display:flex;flex-wrap:wrap;gap:8px}.illustration-presets button{padding:10px 12px}.bike-illustration{mix-blend-mode:screen}
@media(max-width:540px){.illustration-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.illustration-presets button{padding:10px 4px}}

.hud-signal{margin-left:auto;display:flex;align-items:center;gap:5px;height:22px}.hud-signal i{display:block;width:2px;height:8px;background:#777}.hud-signal i:nth-child(2n){height:15px;background:#aaa}.hud-signal i:nth-child(3n){height:20px;background:#555}.hud-signal b{display:block;width:14px;height:14px;border:1px solid #777;margin-left:13px;position:relative}.hud-signal b::after{content:'';position:absolute;inset:4px;background:#aaa}.hud-footer-mark{display:flex;align-items:center;gap:12px;width:100px;height:16px}.hud-footer-mark i{width:10px;height:10px;border:1px solid #666;transform:rotate(45deg)}.hud-footer-mark b{flex:1;height:1px;background:repeating-linear-gradient(to right,#777 0 3px,transparent 3px 7px)}@media(max-width:540px){.hud-signal{display:none}}
.hud-signal{border:0;padding:8px 0 8px 12px;background:transparent;min-width:66px;min-height:40px}.hud-signal:hover{background:transparent}.hud-signal i{opacity:.7}.hud-signal b{opacity:.28;transition:opacity .08s}.hud-signal.signal-on b{opacity:1}.hud-signal.signal-on b::after{background:white}.discovery-reopen{border:0;padding:0;width:32px;height:36px;background:transparent;color:#bdbdbd}.discovery-reopen svg{width:100%;height:100%}.discovery-reopen:hover{color:white;background:transparent}.signal-breach{animation:signal-breach .65s steps(1) both}@keyframes signal-breach{0%,65%{filter:contrast(2);transform:translateX(2px)}20%,80%{filter:invert(1);transform:translateX(-2px)}40%,100%{filter:none;transform:none}}#hidden-layer{padding:0;background:#080808;color:white;border:1px solid #666;width:min(560px,calc(100vw - 40px));height:min(600px,calc(100dvh - 60px));overflow:hidden}#hidden-layer::backdrop{background:#000d}.layer-close{position:absolute;right:16px;top:14px;width:40px;height:40px;font-size:25px;border-color:#444;z-index:2}.layer-reticle{position:absolute;inset:70px 40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(#333,#333) center/1px 100% no-repeat,linear-gradient(#333,#333) center/100% 1px no-repeat}.layer-reticle svg{width:70%;height:80%;filter:drop-shadow(0 0 7px #ffffff35)}.layer-reticle path{stroke-dasharray:400;stroke-dashoffset:400;animation:trace-symbol 1.8s ease-out forwards}.layer-ticks{position:absolute;inset:25px;border:1px dashed #333;pointer-events:none}@keyframes trace-symbol{to{stroke-dashoffset:0}}@media(max-width:540px){.hud-signal{display:flex;gap:3px;min-width:48px}.hud-signal b{margin-left:5px}.hud-signal i{width:1px}.topbar{gap:12px}.path{min-width:0}.layer-reticle{inset:65px 25px}}@media(prefers-reduced-motion:reduce){.layer-reticle path{stroke-dashoffset:0}.signal-breach{animation:none}}
.image-stage{position:absolute;inset:90px 30px 40px;overflow:hidden}.image-stage .bike-illustration{padding:0;width:100%;height:100%;inset:0}.scene-index,.corner{z-index:1}@media(max-width:540px){.image-stage{inset:65px 20px 25px}}
.scene[data-equipment] .image-stage{top:calc(50% + 20px);bottom:auto;aspect-ratio:4/3;transform:translateY(-50%)}