:root{--bg:#FFFFFF;--s1:#FAFAFA;--s2:#F3F3F3;--line:#E6E6E6;--tx:#0A0A0A;--mu:#767676;--ac:#0A0A0A;--ink:#FFFFFF;--bl:#0B57D0;--ok:#1D7A4B;--er:#C23B2E;--fd:'Golos Text','Helvetica Neue',Arial,sans-serif;--fb:'Golos Text','Helvetica Neue',Arial,sans-serif;--fm:'IBM Plex Mono',ui-monospace,monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--fb);font-size:16px;line-height:1.55;font-weight:400}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul{margin:0;padding:0;font-weight:500}
b,strong{font-weight:500}
li{list-style:none}
.pg{background:var(--bg);color:var(--tx);min-height:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 40px;width:100%}
.nav{display:flex;align-items:center;gap:36px;min-height:80px;flex-wrap:wrap}
.nav .links{display:flex;gap:32px;color:var(--mu);font-size:15px;flex-grow:1;flex-wrap:wrap}
.nav .links a.on{color:var(--tx)}
.logo{font-family:var(--fd);font-weight:500;font-size:16px;display:flex;align-items:center;gap:10px;letter-spacing:.14em}
.logo i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--tx);display:inline-block;position:relative}
.logo i:after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--tx)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 24px;border-radius:2px;font:500 15px var(--fb);border:1px solid var(--tx);background:transparent;color:var(--tx);cursor:pointer;white-space:nowrap}
.btn.p{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.btn.l{min-height:56px;padding:0 32px;font-size:16px}
.btn.w{width:100%}
.eyebrow{font:400 13px var(--fb);color:var(--mu)}
.d1{font:500 64px/1.04 var(--fd);letter-spacing:-.035em}
.d2{font:500 40px/1.1 var(--fd);letter-spacing:-.03em}
.d3{font:500 20px/1.3 var(--fd);letter-spacing:-.01em}
.lead{font-size:19px;color:var(--mu);max-width:520px;line-height:1.5}
.mu{color:var(--mu)}
.sm{font-size:14px}
.mono{font-family:var(--fm)}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:2px;font:400 12px var(--fb);border:1px solid var(--line);color:var(--mu);white-space:nowrap}
.tag.p{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.tag.b{color:var(--bl);border-color:var(--bl)}
.tag.o{color:var(--ok);border-color:var(--ok)}
.tag.e{color:var(--er);border-color:var(--er)}
.inp{width:100%;height:48px;border-radius:2px;border:1px solid var(--line);background:var(--bg);color:var(--tx);padding:0 14px;font:400 16px var(--fb)}
.lbl{font:400 13px var(--fb);color:var(--mu);display:block;margin-bottom:6px}
.wave{height:44px;background:var(--tx);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 126 44'><path d='M3 18V26M9 12V32M15 8V36M21 14V30M27 4V40M33 10V34M39 16V28M45 6V38M51 12V32M57 18V26M63 2V42M69 9V35M75 15V29M81 5V39M87 11V33M93 17V27M99 7V37M105 3V41M111 13V31M117 19V25M123 7V37' stroke='black' stroke-width='1.5' stroke-linecap='butt' fill='none'/></svg>") left center/126px 44px repeat-x;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 126 44'><path d='M3 18V26M9 12V32M15 8V36M21 14V30M27 4V40M33 10V34M39 16V28M45 6V38M51 12V32M57 18V26M63 2V42M69 9V35M75 15V29M81 5V39M87 11V33M93 17V27M99 7V37M105 3V41M111 13V31M117 19V25M123 7V37' stroke='black' stroke-width='1.5' stroke-linecap='butt' fill='none'/></svg>") left center/126px 44px repeat-x}
.wave.d{background:#CFCFCF}
.wave.s{-webkit-mask-size:84px 44px;mask-size:84px 44px}
.play{width:44px;height:44px;border-radius:50%;background:transparent;border:1px solid var(--tx);display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--tx)}
.sec{padding:112px 0}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.sp{flex-grow:1}
.hl{height:1px;background:var(--line);border:0}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.foot{border-top:1px solid var(--line);padding:56px 0 40px}
.foot h4{font:400 13px var(--fb);color:var(--mu);margin-bottom:14px}
.foot li{padding:5px 0;color:var(--tx);font-size:15px}
.faq{border-top:1px solid var(--line)}
.faq>div{border-bottom:1px solid var(--line);padding:26px 0}
.faq b{font:500 19px var(--fb);display:block}
.faq p{color:var(--mu);margin-top:8px;max-width:720px;font-weight:400}
.chk{display:flex;gap:10px;align-items:flex-start;color:var(--tx);font-size:15px}
.chk svg{color:var(--tx);margin-top:2px}
@media(max-width:860px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}.d1{font-size:38px}.d2{font-size:28px}.sec{padding:64px 0}.nav .links{display:none}.wrap{padding:0 20px}}
/* gauge */
.gg{fill:none;stroke-linecap:butt}
.g-bg{stroke:var(--line);stroke-width:2;stroke-dasharray:75 100}
.g-fg{stroke:var(--tx);stroke-width:4}
.g-red{stroke:var(--er);stroke-width:4;stroke-dasharray:0 64 11 100}
.g-tk{stroke:var(--mu);stroke-width:8;stroke-dasharray:0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0.15 2.35 0 25}
.sl{height:2px;background:var(--line);position:relative}
.sl b{position:absolute;left:0;top:-1px;bottom:-1px;background:var(--tx)}
.sl u{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--tx);transform:translate(-50%,-50%);box-shadow:0 0 0 6px var(--bg)}
.seg{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.seg span{flex:1;text-align:center;padding:16px 10px;font:400 18px var(--fb);color:var(--mu)}
.seg span.on{background:var(--tx);color:var(--bg)}
.adm{display:flex;min-height:100%;background:var(--bg)}
.side{width:240px;flex:none;border-right:1px solid var(--line);padding:28px 20px;display:flex;flex-direction:column;gap:2px;background:var(--bg)}
.side a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:2px;color:var(--mu);font-size:15px}
.side a.on{color:var(--tx);background:var(--s2)}
.amain{flex-grow:1;min-width:0;padding:36px 48px;display:flex;flex-direction:column;gap:28px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font:400 12px var(--fb);color:var(--mu);text-align:left;padding:10px 12px;border-bottom:1px solid var(--tx)}
.tbl td{padding:14px 12px;border-bottom:1px solid var(--line)}
.kpi{font:400 40px var(--fd);letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* форми й службові елементи */
[hidden]{display:none!important}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--bl);outline-offset:2px}
button{font-family:inherit}
.btn:disabled{opacity:.45;cursor:default}
.btn:hover:not(:disabled){opacity:.85}
.field-err{color:var(--er);font-size:14px;min-height:20px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--tx);color:var(--bg);padding:12px 20px;border-radius:2px;font-size:15px;z-index:50}
.chip{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:2px;border:1px solid var(--line);color:var(--mu);font-size:15px;background:transparent;cursor:pointer}
.chip.on{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:2px;cursor:pointer;background:transparent;width:100%;text-align:left;color:inherit;font:inherit}
.opt.on{border-color:var(--tx)}
.dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--mu);flex:none}
.opt.on .dot{border-color:var(--tx);background:radial-gradient(var(--tx) 45%,transparent 50%)}
.qr{background:#fff;padding:12px;display:inline-block}
.code{font:400 40px var(--fm);letter-spacing:.25em}
.bar{height:2px;background:var(--line);position:relative}
.bar b{position:absolute;left:0;top:0;bottom:0;background:var(--tx)}

/* плеєр в авто: темна тема, великі елементи */
.dark{--bg:#0A0A0A;--s1:#121212;--s2:#1C1C1C;--line:#2A2A2A;--tx:#F5F5F5;--mu:#8C8C8C;--ac:#F5F5F5;--ink:#0A0A0A;--bl:#7FA8FF;--ok:#6FD3A0;--er:#FF7A6B;background:var(--bg);color:var(--tx)}
.drive{min-height:100vh;display:flex;flex-direction:column}
.drive .bar-top{display:flex;align-items:center;gap:20px;padding:0 32px;min-height:72px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.cbtn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:64px;padding:0 36px;border-radius:2px;font:500 20px var(--fb);border:1px solid var(--tx);background:transparent;color:var(--tx);cursor:pointer}
.cbtn.p{background:var(--tx);color:var(--bg)}
.cbtn.s{min-height:52px;padding:0 20px;font-size:17px}
.cbtn.e{background:var(--er);border-color:var(--er);color:#1a0603}
.view{flex:1;display:flex;align-items:center;justify-content:center;gap:56px;padding:32px;flex-wrap:wrap}
.gauge{position:relative;width:min(480px,80vw);aspect-ratio:1;flex:none}
.gauge svg{width:100%;height:100%}
.gauge .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sound-row{display:flex;align-items:center;gap:20px;padding:18px 22px;border:1px solid var(--line);border-radius:2px;background:transparent;color:inherit;width:100%;text-align:left;font:inherit;cursor:pointer}
.sound-row.on{border-color:var(--tx)}
input[type=range]{width:100%;accent-color:var(--tx);height:32px}
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet>div{background:var(--bg);border:1px solid var(--line);width:min(720px,100%);max-height:88vh;overflow:auto;padding:28px}
.toggle{width:64px;height:36px;border-radius:99px;background:var(--line);position:relative;border:0;cursor:pointer;flex:none}
.toggle:after{content:"";position:absolute;left:4px;top:4px;width:28px;height:28px;border-radius:50%;background:var(--tx);transition:left .15s}
.toggle[aria-checked=true]{background:var(--tx)}
.toggle[aria-checked=true]:after{left:32px;background:var(--bg)}

/* детальна панель приладів */
.dark{--am:#E8B04A}
.stage{flex:1;display:flex;flex-direction:column;min-width:0}
.stage[hidden]{display:none!important}
.stage[data-mode=detail] .simple{display:none}
.stage[data-mode=simple] .dash{display:none}
.simple{flex:1;display:flex;align-items:center;justify-content:center;gap:56px;padding:32px;flex-wrap:wrap}
.dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);margin:12px 12px 0}
.panel{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0;overflow:hidden}
.panel canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.p-rpm{grid-column:span 3;height:300px}
.p-engine{grid-column:span 6;height:300px}
.p-speed{grid-column:span 3;height:300px}
.p-gauge{grid-column:span 2;height:150px}
.p-scope{grid-column:span 3;height:150px}
.p-scope.wide{grid-column:span 4}
.p-scope.narrow{grid-column:span 2}
.p-info{grid-column:span 12;display:flex;gap:32px;padding:12px 16px;flex-wrap:wrap}
.info{display:flex;flex-direction:column;gap:2px;font-size:12px}
.info b{font-weight:500;font-size:18px}
.controls{display:flex;align-items:center;gap:20px;padding:14px 16px;flex-wrap:wrap}
.controls .ctl{display:flex;flex-direction:column;gap:2px;flex:1 1 200px;max-width:320px}
@media(max-width:900px){.p-rpm,.p-speed{grid-column:span 6}.p-engine{grid-column:span 12;order:-1;height:260px}.p-gauge{grid-column:span 4}.p-scope,.p-scope.wide{grid-column:span 6}.p-scope.narrow{grid-column:span 12}}

/* Режим їзди: вікно браузера Tesla менше за весь екран, тому все вміщується у вікно без прокрутки */
.drive.driving{height:100vh;height:100dvh;min-height:0;overflow:hidden}
.drive.driving .bar-top{min-height:52px;padding:0 16px;gap:12px}
.drive.driving .bar-top .cbtn.s{min-height:42px;padding:0 14px;font-size:15px}
.drive.driving .stage{min-height:0;overflow:auto}
.drive.driving .simple{min-height:0;padding:16px;gap:40px}
.drive.driving .gauge{width:min(440px,80vw,calc(100dvh - 190px))}
.drive.driving .controls{padding:8px 12px;gap:12px;flex-wrap:nowrap}
.drive.driving .controls .cbtn{min-height:44px;padding:0 16px;font-size:15px;white-space:nowrap}
.drive.driving .controls .ctl{flex:1 1 160px}
.drive.driving .controls .lbl{font-size:13px}
.drive.driving .controls input[type=range]{height:24px}
.drive.driving .p-info{gap:20px;padding:6px 12px}
.drive.driving .info{flex-direction:row;align-items:baseline;gap:8px;font-size:11px}
.drive.driving .info b{font-size:15px}
@media(min-width:901px){
  .drive.driving .dash{flex:1 1 auto;min-height:380px;margin:8px 8px 0;grid-template-rows:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto}
  .drive.driving .dash .panel{height:auto}
}
@media(max-width:900px){.drive.driving{height:auto;overflow:visible}.drive.driving .controls{flex-wrap:wrap}}

/* Педалі в режимі симуляції: глибина натискання залежить від того, наскільки низько торкнутися */
.pedals{display:flex;align-items:center;gap:12px;flex:0 1 auto}
.pedals[hidden]{display:none}
.pedal{--d:0;flex:none;position:relative;width:76px;height:84px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
/* нахиляється лише пластина, а зона дотику лишається на місці: глибина рахується без спотворень */
.pedal .plate{position:absolute;inset:0;border:1px solid var(--mu);border-radius:6px 6px 10px 10px;overflow:hidden;pointer-events:none;
  background:repeating-linear-gradient(180deg,var(--s2) 0 7px,var(--s1) 7px 10px);
  transform:perspective(260px) rotateX(calc(var(--d) * 24deg)) scale(calc(1 - var(--d) * .06));transform-origin:50% 100%;transition:transform .05s linear}
.pedal.brake{width:96px;height:66px}
.pedal i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--d) * 100%);background:var(--am);opacity:.55}
.pedal.brake i{background:var(--er)}
.pedal span{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:500 11px var(--fm);letter-spacing:.06em;color:var(--tx)}
.pedal span b{display:block;font-size:15px;font-weight:500}
.pedal:focus-visible{outline:2px solid var(--bl);outline-offset:2px}
.pedal-hint{max-width:150px;line-height:1.3}
@media(max-width:1100px){.pedal-hint{display:none}}