@font-face{font-family:Space;src:url('https://vibe.filesafe.space/1782748335719021487/assets/c29f016e-e747-4eb5-99ea-c4e34069d277.woff2') format('woff2');font-display:swap}
:host{--cyan:hsl(190 100% 50%);--muted:#a3abb4;display:block;background:#000;color:#fff;font:16px/1.5 Space,'Arial',sans-serif;color-scheme:dark;contain:content}*{box-sizing:border-box}button,select,input{font:inherit}button,select{min-height:46px}button{cursor:pointer;color:inherit}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}button{border:1px solid #30363b;background:#101316;transition:background .15s,border-color .15s}button:hover{border-color:#7c8c98}button[aria-pressed=true]{border-color:var(--cyan);background:#09232b;color:var(--cyan)}button:disabled{opacity:.5;cursor:default}h1,h2,h3,p{margin:0}a{color:var(--cyan)}.shell{max-width:1600px;margin:auto;padding:0 44px 28px}.header{height:91px;border-bottom:1px solid #252a2e;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-weight:800;font-size:27px;letter-spacing:-1.5px;line-height:1}.brand small{display:block;font-size:10px;letter-spacing:5.2px;margin-top:8px;font-weight:500}.header-right{display:flex;gap:25px;align-items:center;color:#aab3bc;font-size:12px;letter-spacing:1.7px}.header-right b{font-size:19px;color:#eee;letter-spacing:-.6px;font-style:italic}.intro{display:flex;justify-content:space-between;align-items:end;margin:28px 0 24px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--cyan);margin-bottom:7px}.intro h1{font-size:34px;letter-spacing:-1.3px;line-height:1.15}.intro p{color:var(--muted);font-size:14px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:28px;align-items:start}.left{min-width:0;position:sticky;top:16px}.stage{height:470px;position:relative;background:radial-gradient(ellipse at 45% 48%,#202a32 0%,#10161b 47%,#090c0f 80%);border:1px solid #252d34;overflow:hidden}.stage:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px #0006}.canvas{position:absolute;inset:25px 0 20px;z-index:1}.canvas canvas{display:block;width:100%;height:100%;touch-action:pan-y}.stage-top{position:absolute;top:19px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;z-index:2;gap:10px}.vehicle-buttons{display:flex;gap:4px}.vehicle-buttons button{background:#0b1117cc;font-size:13px;padding:0 14px;min-height:36px}.vehicle-buttons button[aria-pressed=true]{color:#fff;border-color:#a3bdcd;background:#29333b}.stage-tag{font-size:11px;letter-spacing:1.6px;color:#8d9da8}.stage-bottom{position:absolute;bottom:18px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;z-index:2;gap:12px}.hint{color:#95a3ad;font-size:12px}.reset{min-height:36px;width:36px;background:#111a22bb;font-size:20px}.modes{display:flex;gap:0;border:1px solid #39434b}.modes button{min-height:36px;border:0;background:#0a1016dd;font-size:13px;padding:0 13px}.modes button[aria-pressed=true]{background:var(--cyan);color:#000}.comparison{display:flex;justify-content:space-between;align-items:center;padding:14px 0;gap:12px;border-bottom:1px solid #252a2e}.current{font-size:15px}.current span{color:var(--muted);font-size:13px;display:block}.toggle-label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;white-space:nowrap}.toggle-label input{appearance:none;width:35px;height:20px;background:#343c43;border-radius:20px;position:relative;cursor:pointer;flex-shrink:0}.toggle-label input:before{content:'';width:14px;height:14px;border-radius:50%;background:#b0b8bf;position:absolute;top:3px;left:3px}.toggle-label input:checked{background:var(--cyan)}.toggle-label input:checked:before{left:18px;background:#000}.energy{padding-top:22px}.energy-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}.energy-heading h2{font-size:17px;font-weight:500}.smalltag{font-size:11px;letter-spacing:1px;color:#a7b2bb}.energy-values{display:grid;grid-template-columns:1fr 1fr;gap:20px}.stat{display:flex;align-items:baseline;gap:12px}.stat strong{font-size:36px;font-weight:500;letter-spacing:-1.5px;line-height:1.2;color:var(--cyan)}.stat:last-child strong{color:#f6b678}.stat span{font-size:13px;color:#b2bcc4;max-width:130px;line-height:1.3}.energy-bar{height:7px;background:#f6b678;margin:15px 0 12px;overflow:hidden}.energy-bar i{display:block;height:100%;background:var(--cyan);transition:width .3s}.energy-note{font-size:12px;color:#8997a2;max-width:650px;line-height:1.6}.energy-note a{color:#adbcc6}.heat-legend{position:absolute;top:69px;right:20px;text-align:right;z-index:2;font-size:12px;color:#f6b678;pointer-events:none}.heat-legend span{display:block;color:var(--cyan)}.controls{border-top:1px solid #30363b}.step{padding:20px 0;border-bottom:1px solid #30363b}.step-title{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:15px;font-weight:500}.step-title b{font-size:11px;color:var(--cyan);font-weight:400;letter-spacing:1px}.select{display:block;width:100%;border:1px solid #38414a;background:#101418;color:#eee;padding:11px 12px;font-size:14px;border-radius:0}.film-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.film{padding:12px 13px;text-align:left;min-height:84px;position:relative}.film b{font-size:14px;display:block;font-weight:500}.film span{display:block;font-size:11px;color:#a0adb7;margin:2px 0 7px}.film strong{font-size:17px;font-weight:500}.film[aria-pressed=true]:after{content:'\2713';position:absolute;right:10px;bottom:12px;color:var(--cyan);font-size:14px}.film-desc{margin:10px 0 0;color:#a0acb5;font-size:12px}.shade-label{display:flex;justify-content:space-between;align-items:center}.shade-label strong{font-size:25px;color:var(--cyan);font-weight:500}.shades{display:flex;gap:5px;margin:8px 0}.shades button{flex:1;min-width:0;padding:0 2px;font-size:13px;background:linear-gradient(0deg,#10151b,#25313a)}.shade-ends{display:flex;justify-content:space-between;color:#8c9aa5;font-size:11px;margin-top:6px}.shade-note{font-size:12px;color:#8c9aa5;margin-top:10px}.addons{display:grid;gap:12px}.addon-row label{font-size:13px;color:#bac3cb;display:block;margin-bottom:5px}.addon-row .select{font-size:13px;min-height:44px}.mini-shades{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}.mini-shades button{padding:0 10px;min-height:36px;font-size:12px}.roof-note{font-size:12px;color:#91a2ae;margin-top:6px}.summary{padding:20px 0;display:flex;justify-content:space-between;align-items:center}.summary span{font-size:13px;color:#adb8c0}.summary strong{font-size:35px;font-weight:500;letter-spacing:-1px}.summary small{display:block;font-size:11px;color:#8e9ca7}.breakdown{font-size:12px;color:#a2afb9;margin-top:-8px;margin-bottom:14px}.breakdown div{display:flex;justify-content:space-between;margin-top:5px}.fine-print{font-size:11px;line-height:1.6;color:#81909c}.footer{margin-top:30px;padding-top:20px;border-top:1px solid #252a2e;color:#7e8a93;font-size:12px;display:flex;justify-content:space-between;gap:20px}.footer details{max-width:750px}.footer summary{cursor:pointer;color:#aeb8c0;min-height:30px}.footer details p{margin-top:8px}.footer .stamp{font-size:11px;letter-spacing:2px;white-space:nowrap}.fallback{position:absolute;inset:85px 25px;display:flex;align-items:center;justify-content:center;text-align:center;color:#b8c8d1;font-size:15px;z-index:4;background:#0c121a}.hidden{display:none!important}.heat-zone{max-width:160px;min-height:35px;font-size:12px;padding:3px 5px;border:1px solid #333;background:#111820;color:#ddd}.no-selection{color:#a8b8c5;padding:16px 0;font-size:14px}@media(min-width:1450px){.stage{height:540px}.layout{grid-template-columns:minmax(0,1fr) 400px;gap:36px}.film{min-height:87px}}@media(max-width:1000px){.shell{padding:0 22px 24px}.layout{grid-template-columns:minmax(0,1fr) 330px;gap:20px}.stage{height:410px}.header-right>span{display:none}.intro p{max-width:190px;text-align:right}.stat{display:block}.stat span{display:block;margin-top:4px}.stage-tag{display:none}.hint{max-width:90px;font-size:11px}}@media(max-width:760px){.shell{padding:0 16px 16px}.header{height:68px}.brand{font-size:23px}.brand small{font-size:8px;letter-spacing:4.6px}.header-right b{font-size:17px}.intro{margin:19px 0 16px}.intro h1{font-size:27px}.eyebrow{font-size:10px;margin-bottom:5px}.intro p{display:none}.layout{display:block}.left{position:static}.stage{height:315px;margin:0 -16px;border-left:0;border-right:0}.canvas{inset:30px 0 24px}.stage-top{top:12px;left:16px;right:16px}.stage-bottom{bottom:12px;left:16px;right:16px}.vehicle-buttons button{padding:0 13px;min-height:36px}.hint{max-width:110px}.comparison{padding:12px 0}.current{font-size:14px}.current span{font-size:12px}.toggle-label{font-size:12px}.energy{padding:16px 0 19px}.energy-heading{margin-bottom:10px}.energy-heading h2{font-size:15px}.stat{display:flex;gap:9px}.stat strong{font-size:31px}.stat span{font-size:11px;max-width:95px}.energy-bar{margin:12px 0 8px}.energy-note{font-size:11px}.step{padding:17px 0}.film{min-height:86px}.film b{font-size:15px}.film span{font-size:12px}.film strong{font-size:19px}.shades button{min-height:46px;font-size:14px}.step-title{font-size:16px}.summary{position:sticky;bottom:0;background:#080d11f5;border-top:1px solid #2d3942;margin:12px -16px 0;padding:12px 16px;z-index:5;backdrop-filter:blur(16px)}.footer{display:block;margin-top:20px}.footer .stamp{margin-top:20px}.heat-legend{top:58px;right:16px}.addons{gap:13px}.shade-note{font-size:12px}.select{font-size:16px}.addon-row .select{font-size:14px}.film-desc{font-size:13px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(max-width:360px){.stat{display:block}.current{max-width:165px}.modes button{padding:0 10px}.hint{display:none}}

@media(max-width:760px){.left{display:contents}.stage{position:sticky;top:0;z-index:6;height:clamp(225px,36svh,315px);background:radial-gradient(ellipse at 45% 48%,#202a32 0%,#10161b 47%,#090c0f 80%)}}

.brand .bravos-logo{display:block;width:210px;height:auto;max-width:100%}.header-right .autobahn-logo{display:block;width:135px;height:auto;object-fit:contain}.brand{min-width:0}.header-right{flex-shrink:0}@media(max-width:760px){.brand .bravos-logo{width:165px}.header-right .autobahn-logo{width:104px}.header{gap:18px}}@media(max-width:360px){.brand .bravos-logo{width:145px}.header-right .autobahn-logo{width:90px}}

.model-name{position:absolute;top:65px;left:20px;z-index:2;pointer-events:none;color:#aab9c4;font-size:12px;letter-spacing:.2px}@media(max-width:760px){.model-name{top:56px;left:16px;font-size:11px;max-width:140px}}

.load-state{position:absolute;inset:95px 24px 65px;z-index:4;display:flex;flex-direction:column;gap:14px;justify-content:center;align-items:center;text-align:center;background:#101820e6;color:#c2d6e2;font-size:14px}.load-state button{padding:8px 20px}.model-name{max-width:190px}