/* Форсаж-21 — redesign. Visual language: road markings + Kharkiv metro lines. */

@font-face{font-family:"Unbounded";font-weight:200 900;font-style:normal;font-display:swap;
  src:url(/assets/fonts/unbounded-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-weight:200 900;font-style:normal;font-display:swap;
  src:url(/assets/fonts/unbounded-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";font-weight:400 900;font-style:normal;font-display:swap;
  src:url(/assets/fonts/golos-text-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-weight:400 900;font-style:normal;font-display:swap;
  src:url(/assets/fonts/golos-text-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#1C2430;      /* asphalt */
  --ink-2:#465162;    /* secondary text */
  --concrete:#EDEFF2; /* page */
  --paper:#FFFFFF;
  --rule:#C9CFD8;
  --red:#D1001D;      /* brand red (logo), red metro line, primary action */
  --orange:#F76D2C;   /* brand orange (logo road border) */
  --cream:#FFFDDB;    /* logo plate */
  --asphalt:#444444;  /* logo road */
  --blue:#2557B8;     /* blue metro line */
  --green:#2E9B57;    /* green metro line */
  --yellow:#FFC93C;   /* promo only */
  --lred:#D1001D;--lblue:#2557B8;--lgreen:#2E9B57; /* metro line colours: fixed, independent of the theme */
  --red-h:#A80018;    /* primary hover */
  --red-l:#E8283F;--red-d2:#7A0010;--red-n:#FF4D5E; /* shades of the primary: car glass, car details, dial needle */
  --plate:#FFF3CC;    /* hero scene background */
  --dash:#161C26;     /* dashboard background */
  --t-red2:#FAD3D8;
  --display:"Unbounded","Golos Text",system-ui,sans-serif;
  --text:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:min(1200px,100% - 2.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--concrete);color:var(--ink);font:400 1.0625rem/1.6 var(--text);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:100}
.skip:focus{left:0}
.wrap{width:var(--wrap);margin-inline:auto}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-weight:700;font-size:clamp(2.05rem,5vw,4.1rem);line-height:1.06;letter-spacing:-.025em}
h2{font-weight:650;font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.14;letter-spacing:-.02em}
h3{font-weight:600;font-size:1.0625rem;line-height:1.3;letter-spacing:-.005em}
p{margin:0 0 1em}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.55;max-width:46ch;color:var(--ink)}
.muted{color:var(--ink-2)}
.prose{max-width:68ch}
.prose p,.prose ul,.prose ol{margin:0 0 1.1em}
.prose h2{margin:2.2em 0 .6em;font-size:clamp(1.3rem,2.2vw,1.7rem)}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.4em}

/* Header */
.site-head{border-bottom:1px solid var(--rule);background:var(--concrete)}
.head-row{display:flex;align-items:center;gap:1.5rem;min-height:76px}
.brand{display:inline-flex;align-items:center;gap:.7rem;font:700 1.2rem/1 var(--display);letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand svg{width:34px;height:34px;flex:none}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.4rem}
.nav a{font-size:.95rem;font-weight:500;text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--ink);color:var(--ink)}
.nav a[aria-current="page"]{border-color:var(--red)}
.lang{display:flex;gap:.2rem;margin-left:.4rem;padding-left:1.2rem;border-left:1px solid var(--rule)}
.lang a{font-weight:600;padding:.3rem .5rem;border-radius:6px;border:0}
.lang a[aria-current="true"]{background:var(--ink);color:#fff}
.head-tel{font-weight:700;text-decoration:none;white-space:nowrap}
.menu-btn{display:none;margin-left:auto;background:none;border:2px solid var(--ink);border-radius:10px;padding:.55rem .9rem;font:600 .95rem var(--text);color:var(--ink);cursor:pointer}
@media (max-width:1120px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:76px;z-index:20;background:var(--concrete);border-bottom:1px solid var(--rule);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem 1.25rem 1.25rem;margin:0}
  .nav.open{display:flex}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--rule);font-size:1.05rem}
  .lang{border:0;margin:.8rem 0 0;padding:0}
  .site-head{position:relative}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.8rem 1.5rem;border-radius:12px;
  font:600 1.02rem/1.2 var(--text);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-h);color:#fff}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.8rem 0 1rem}

/* Sections */
.sec{padding:clamp(3rem,6vw,5.5rem) 0}
.sec.white{background:var(--paper)}
.sec-head{max-width:46rem;margin-bottom:2rem}
.sec-head p{margin:.9rem 0 0;color:var(--ink-2)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:860px){.cols{grid-template-columns:1fr}}

/* Prices */
.price-list{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.price-list li{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.price-list .what strong{display:block;font-weight:600}
.price-list .what span{font-size:.95rem;color:var(--ink-2)}
.price-list .sum{font:650 clamp(1.3rem,2.4vw,1.75rem)/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.price-list .sum small{font:500 .85rem var(--text);letter-spacing:0;color:var(--ink-2)}
.tag{display:inline-block;background:var(--yellow);color:var(--ink);font-weight:600;padding:.3rem .7rem;border-radius:6px;font-size:.95rem}
.fine{font-size:.92rem;color:var(--ink-2)}

/* Notice (road-sign style) */
.notice{display:flex;gap:1.1rem;align-items:flex-start;background:var(--paper);border:2px solid var(--ink);border-left:10px solid var(--red);border-radius:12px;padding:1.2rem 1.4rem}
.notice svg{flex:none;width:44px;height:44px;margin-top:.15rem}
.notice h3{margin-bottom:.3rem}
.notice p{margin:0}
.band{padding:0 0 clamp(3rem,6vw,5rem)}
.sec.white + .band,.band.on-white{background:var(--paper)}

/* Metro-style branch map */
.lines{border-bottom:1px solid var(--rule)}
.line-row{--c:var(--ink);display:grid;grid-template-columns:minmax(170px,230px) 1fr;gap:1.5rem;align-items:start;padding:1.5rem 0;border-top:1px solid var(--rule)}
.line-row.red{--c:var(--lred)}.line-row.blue{--c:var(--lblue)}.line-row.green{--c:var(--lgreen)}
.line-tag{display:flex;align-items:center;gap:.7rem;font-weight:600;line-height:1.3}
.line-tag::before{content:"";flex:none;width:34px;height:12px;border-radius:6px;background:var(--c)}
.stations{list-style:none;margin:0;padding:0;display:flex}
.stations li{position:relative;flex:1 1 0;min-width:0;padding:2.1rem 1rem 0 0}
.stations li::before{content:"";position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--paper);border:6px solid var(--c);z-index:1}
.stations li::after{content:"";position:absolute;left:13px;top:9px;width:100%;height:8px;background:var(--c)}
.stations li:last-child::after{display:none}
.stations li:only-child::after{display:block;width:45%}
.st-name{font-weight:600;display:block;line-height:1.3}
.st-addr{display:block;font-size:.92rem;color:var(--ink-2);margin:.15rem 0 .25rem}
.st-tel{font-size:.95rem;font-weight:500}
.other-addr{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;padding-top:1.5rem;border-top:1px dashed var(--ink)}
.other-addr h3{margin-bottom:.3rem}
@media (max-width:860px){
  .line-row{grid-template-columns:1fr;gap:1rem}
  .stations{flex-direction:column}
  .stations li{flex:0 0 auto;padding:0 0 1.5rem 3rem;min-height:3.2rem}
  .stations li:last-child{padding-bottom:0}
  .stations li::after{left:9px;top:13px;width:8px;height:100%}
  .stations li:only-child::after{display:none}
  .other-addr{grid-template-columns:1fr}
}

/* Plain ruled blocks */
.ruled{border-top:2px solid var(--ink);padding-top:1.2rem}
.ruled h2{font-size:clamp(1.3rem,2.2vw,1.65rem);margin-bottom:.8rem}
.ruled p{max-width:46ch}
.more{font-weight:600}

/* Blue program panel */
.panel-blue{background:var(--blue);color:#fff;border-radius:20px;padding:clamp(1.75rem,4vw,3.25rem);display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}
.panel-blue h2{color:#fff}
.panel-blue p{max-width:46ch}
.panel-blue a:hover{color:#fff}
.panel-blue .btn-ghost{border-color:#fff;color:#fff}
.panel-blue .btn-ghost:hover{background:#fff;color:var(--blue)}
.panel-blue ul{margin:0;padding:0;list-style:none}
.panel-blue li{padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.35)}
.panel-blue li:last-child{border:0}
@media (max-width:860px){.panel-blue{grid-template-columns:1fr}}

/* Statement */
.statement{font:500 clamp(1.4rem,2.9vw,2.2rem)/1.3 var(--display);letter-spacing:-.02em;max-width:34ch}
.statement b{font-weight:700}

/* Forms */
.form-panel{background:var(--paper);border:2px solid var(--ink);border-radius:16px;padding:clamp(1.25rem,3vw,2rem)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;margin-bottom:.4rem;font-size:.97rem}
.field input,.field select{width:100%;min-height:54px;padding:.7rem .9rem;border:2px solid var(--rule);border-radius:10px;background:#fff;font:400 1.05rem var(--text);color:var(--ink)}
.field input:hover,.field select:hover{border-color:var(--ink-2)}
.field input:focus,.field select:focus{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.form-status{min-height:1.6em;margin:.9rem 0 0;font-weight:500}
.form-status.ok{color:#1d6b3a}.form-status.err{color:var(--red)}
.docs{margin:0;padding:0;list-style:none;counter-reset:d;border-top:2px solid var(--ink)}
.docs li{padding:.9rem 0;border-bottom:1px solid var(--rule)}

/* Numbered steps = real sequence, same pin language as the road */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;position:relative;max-width:60ch}
.steps::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:6px;background:var(--ink);border-radius:3px}
.steps li{position:relative;padding:0 0 1.6rem 4rem;counter-increment:s}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:-.1rem;width:44px;height:44px;border-radius:50%;background:var(--paper);
  border:5px solid var(--ink);display:grid;place-items:center;font:700 .95rem var(--display)}
.steps h3{margin-bottom:.3rem}
.steps p{margin:0;color:var(--ink-2)}

/* Page head */
.page-head{padding:clamp(2rem,5vw,3.75rem) 0 clamp(1.5rem,3vw,2.5rem)}
.page-head h1{font-size:clamp(1.8rem,4vw,3.1rem);max-width:22ch}
.page-head .lead{margin-top:1.1rem}
.crumbs{font-size:.92rem;color:var(--ink-2);margin:0 0 1.2rem}
.crumbs a{color:inherit}

/* Facts / branch info */
.facts{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:.9rem 2rem;border-top:2px solid var(--ink);padding-top:1.2rem}
.facts dt{font-weight:600}
.facts dd{margin:0}
@media (max-width:640px){.facts{grid-template-columns:1fr;gap:.2rem}.facts dd{margin-bottom:.8rem}}
.map{width:100%;aspect-ratio:4/3;border:0;border-radius:14px;background:var(--rule)}
.branch-table{width:100%;border-collapse:collapse}
.branch-table th,.branch-table td{text-align:left;padding:.85rem .6rem .85rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
.branch-table th{font-weight:600;border-bottom:2px solid var(--ink)}
.people{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.people li{display:flex;gap:1.2rem;align-items:center;padding:1.2rem 0;border-bottom:1px solid var(--rule)}
.avatar{flex:none;width:72px;height:72px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 1.25rem var(--display);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.people strong{display:block;font-size:1.1rem}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--rule)}

/* Footer */
.site-foot{background:var(--ink);color:#fff;padding:clamp(2.5rem,5vw,4rem) 0 2rem;font-size:.97rem}
.site-foot a{color:#fff}
.site-foot a:hover{color:var(--yellow)}
.foot-grid{display:grid;grid-template-columns:1.1fr 1.3fr 1fr;gap:2.5rem}
.site-foot h2{font-size:1rem;margin-bottom:1rem}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:.45rem}
.foot-branches li{display:flex;justify-content:space-between;gap:1rem}
.foot-bottom{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.25);display:flex;flex-wrap:wrap;gap:.5rem 2rem;color:#C9CFD8;font-size:.9rem}
.foot-bottom a{color:#C9CFD8}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr;gap:2rem}}

/* Mobile action bar */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background:var(--paper);border-top:1px solid var(--rule)}
  .mbar .btn{min-height:48px;padding:.6rem .8rem;font-size:.97rem}
  body{padding-bottom:78px}
}

/* Three teaser columns on the home page */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
@media (max-width:860px){.trio{grid-template-columns:1fr}}

/* Staff lists, FAQ, video reviews */
.sub-h{font-size:clamp(1.2rem,2vw,1.55rem);margin-bottom:1.1rem}
.people.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));column-gap:2.5rem}
.people.grid li{padding:.9rem 0}
.people.grid .avatar{width:56px;height:56px;font-size:1.05rem}
.people .muted{font-size:.92rem}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:2px solid var(--ink)}
.faq summary{cursor:pointer;font-weight:600;padding:1rem 2rem 1rem 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.85rem;font:600 1.4rem/1 var(--display)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 1.1rem;max-width:60ch;color:var(--ink-2)}
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1rem;margin-top:2rem}
.yt,.yt-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;display:block}
.yt{position:relative;cursor:pointer;background:var(--ink) center/cover no-repeat;padding:0}
.yt::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/32px no-repeat}
.yt:hover::after{background-color:var(--red-h)}

/* photos hot-linked from the old site, blog */
.photo-grid a{display:block;border-radius:12px;overflow:hidden}
.photo-grid a img{transition:transform .25s ease}
.photo-grid a:hover img{transform:scale(1.03)}
.avatar img{object-position:center top}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.6rem}
.post-card{display:flex;flex-direction:column;gap:1rem}
.post-card .post-img{display:block;border-radius:12px;overflow:hidden;background:var(--rule);aspect-ratio:16/10}
.post-card .post-img img{width:100%;height:100%;object-fit:cover}
.post-card time{color:var(--ink-2)}
.post-card time{font-size:.9rem}
.post-card h3{font-size:1.15rem;line-height:1.3;margin:.3rem 0 .5rem}
.post-card h3 a{color:var(--ink);text-decoration:none}
.post-card h3 a:hover{color:var(--red)}
.post-card p{margin:0;color:var(--ink-2)}
.post-cover{margin:1rem 0 1.5rem;border-radius:14px;overflow:hidden;background:var(--rule)}
.post-cover img{width:100%;max-height:420px;object-fit:cover;display:block}

/* instructor / team cards, filter chips, lightbox */
.icards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:1.8rem 1.4rem}
.icards.compact{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:1.4rem 1rem}
.icard{display:flex;flex-direction:column;gap:.75rem;margin:0;padding:0}
.icard[hidden]{display:none}
.icard-photo{position:relative;border-radius:14px;overflow:hidden;background:var(--ink);aspect-ratio:3/4;color:#fff}
.icard.sq .icard-photo{aspect-ratio:1/1}
.icard-photo a{display:block;width:100%;height:100%;cursor:zoom-in}
.icard-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block;transition:transform .3s ease}
.icard-photo a:hover img{transform:scale(1.04)}
.icard-photo .ini{position:absolute;inset:0;display:grid;place-items:center;font:700 2.4rem var(--display)}
.icard-likes{position:absolute;left:.6rem;bottom:.6rem;display:inline-flex;align-items:center;gap:.35rem;background:rgba(28,36,48,.84);color:#fff;border-radius:999px;padding:.28rem .7rem .28rem .55rem;font:600 .85rem var(--text);pointer-events:none}
.icard-likes svg{width:.95rem;height:.95rem;fill:#ff6b5e}
.icard strong{display:block;font-size:1.05rem;line-height:1.3}
.icard .meta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.35rem}
.icard .muted{color:var(--ink-2);font-size:.9rem}
.icard>div:last-child>.muted{display:block;margin-top:.3rem}
.badge{display:inline-block;padding:.15rem .65rem;border-radius:999px;font:600 .78rem var(--text);border:1px solid var(--rule)}
.badge.mt{background:#E8EEF9;border-color:#C5D3F0;color:var(--blue)}
.badge.at{background:#E4F4EA;border-color:#BFE3CC;color:#1f7a42}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 2.2rem}
.chip{border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:999px;padding:.45rem .95rem;font:600 .9rem var(--text);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.istats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.2rem;margin:0 0 2.5rem}
.istats div{border-top:3px solid var(--ink);padding-top:.7rem}
.istats b{display:block;font:700 1.9rem var(--display)}
.istats span{color:var(--ink-2)}
@media(max-width:560px){
  .icards,.icards.compact{grid-template-columns:repeat(2,1fr);gap:1.2rem .8rem}
  .icard strong{font-size:.95rem}
}
.lb{position:fixed;inset:0;z-index:1000;background:rgba(15,20,28,.92);display:grid;place-items:center;padding:2vh 2vw;cursor:zoom-out}
.lb img{max-width:96vw;max-height:92vh;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5);background:#fff}
.lb-x{position:absolute;top:1rem;right:1.2rem;font:700 2rem/1 var(--text);color:#fff;background:none;border:0;cursor:pointer}


/* =====================================================================
   v2 · bolder graphic layer  (brand: red / orange / asphalt / cream from the logo)
   ===================================================================== */
[hidden]{display:none!important}
.js-only{display:none}.js .js-only{display:block}
:root{--sh:7px 7px 0 var(--ink);--sh-s:3px 3px 0 var(--ink);--t-blue:#E8EEF9;--t-green:#E4F4EA;--t-yellow:#FFF3CC;--t-red:#FBE6E8}

/* buttons: poster-style, they press down */
.btn{border:2px solid var(--ink);box-shadow:var(--sh-s);transition:transform .12s ease,box-shadow .12s ease,background-color .15s,color .15s}
.btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:none}
.btn-ghost{background:var(--paper);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.panel-blue .btn-ghost{background:transparent;border-color:#fff;color:#fff;box-shadow:3px 3px 0 rgba(0,0,0,.3)}
.panel-blue .btn-ghost:hover{background:#fff;color:var(--blue)}
.form-panel,.notice{border-width:3px;box-shadow:var(--sh-s)}
.cfg-note{background:var(--t-yellow);border:2px solid var(--ink);border-radius:10px;padding:.6rem .8rem;margin:0 0 1rem;font-size:.95rem}

/* brand logo */
.head-row{min-height:80px}
.brand{display:inline-flex;align-items:center}
.brand img{height:56px;width:auto;display:block}
@media (max-width:1120px){.nav{top:80px}}
@media (max-width:560px){.brand img{height:46px}.head-row{min-height:70px}.nav{top:70px}}
.foot-logo{display:inline-block;background:var(--cream);border:3px solid #fff;border-radius:16px;padding:.5rem .9rem;margin-bottom:2rem}
.foot-logo:hover{border-color:var(--yellow)}
.foot-logo img{height:64px;width:auto;display:block}

.eyebrow{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.1rem;padding:.45rem .85rem;border:2px solid var(--ink);border-radius:999px;background:var(--paper);
  font:700 .78rem/1 var(--text);letter-spacing:.08em;text-transform:uppercase}
.eyebrow i{width:.65rem;height:.65rem;border-radius:50%;background:var(--red)}
.sec-head .eyebrow{margin-bottom:1.2rem}

/* ---------- hero ---------- */
.hero{padding:clamp(1.5rem,3.5vw,3rem) 0 clamp(2.25rem,4vw,3.75rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.hero h1{font-size:clamp(2.1rem,4.7vw,4.2rem);max-width:none}
.hl{color:var(--red);background:linear-gradient(transparent 66%,var(--yellow) 66% 94%,transparent 94%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero .lead{margin-top:1.4rem}
.hero-note{font-size:.95rem;color:var(--ink-2);margin:0}
.hero-art{position:relative;aspect-ratio:600/560;border:3px solid var(--ink);border-radius:30px;overflow:hidden;box-shadow:var(--sh);background:var(--plate)}
.hero-art .scene{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.sticker{position:absolute;z-index:2;padding:.7em .95em;border:2.5px solid var(--ink);border-radius:12px;background:#fff;box-shadow:3px 3px 0 var(--ink);font:700 clamp(.72rem,1.3vw,.95rem)/1 var(--display)}
.sticker.s1{left:4%;top:5%;background:var(--yellow);transform:rotate(-5deg)}
.sticker.s2{right:5%;bottom:5%;background:var(--red);color:#fff;transform:rotate(4deg)}
.scene-dash{animation:dash-flow 1s linear infinite}
.scene-streaks{animation:streak 1.4s ease-in-out infinite alternate}
@keyframes dash-flow{to{stroke-dashoffset:-72}}
@keyframes streak{from{transform:translateX(-10px);opacity:.25}to{transform:translateX(10px);opacity:.6}}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(2rem,4vw,3.25rem);border:3px solid var(--ink);border-radius:22px;background:var(--paper);box-shadow:var(--sh-s);overflow:hidden}
.hero-stats div{padding:1.1rem 1.3rem;border-left:3px solid var(--ink)}
.hero-stats div:first-child{border-left:0}
.hero-stats b{display:block;font:700 clamp(1.5rem,3vw,2.3rem)/1.1 var(--display);color:var(--red);letter-spacing:-.02em}
.hero-stats span{display:block;color:var(--ink-2);font-size:.95rem;margin-top:.3rem;line-height:1.35}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{max-height:420px;aspect-ratio:auto;height:min(78vw,420px)}
  .hero-art .scene{object-fit:cover}
  .hero-stats{grid-template-columns:1fr 1fr}
  .hero-stats div:nth-child(3){border-left:0}
  .hero-stats div:nth-child(n+3){border-top:3px solid var(--ink)}
}

/* ---------- route ---------- */
.route{background:var(--paper);border-block:3px solid var(--ink);padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3rem,6vw,5rem)}
.route h2{max-width:22ch}
.journey{position:relative;margin-top:2.75rem}
.jr-list{list-style:none;margin:0;padding:0 0 0 3.6rem;position:relative;z-index:1;counter-reset:s}
.jr-list::before{content:"";position:absolute;left:.95rem;top:0;bottom:0;width:10px;border-radius:5px;background:var(--ink)}
.jr-svg{display:none}
.stop{position:relative;margin:0 0 1.5rem;padding:1.15rem 1.3rem 1.25rem;background:var(--paper);border:3px solid var(--ink);border-radius:20px;box-shadow:var(--sh-s);
  counter-increment:s;transition:background-color .35s ease}
.stop:last-child{margin-bottom:0}
.stop::before{content:counter(s);position:absolute;left:-3.65rem;top:1rem;width:40px;height:40px;border-radius:50%;background:var(--paper);border:5px solid var(--ink);
  display:grid;place-items:center;font:700 .9rem var(--display)}
.stop .ico{display:inline-grid;vertical-align:middle;place-items:center;width:46px;height:46px;border-radius:14px;border:2.5px solid var(--ink);background:var(--t-blue);color:var(--ink);transition:background-color .35s,color .35s}
.stop .ico svg{width:26px;height:26px}
.stop .when{display:inline-block;vertical-align:middle;margin-left:.5rem;font:700 .8rem/1 var(--text);background:var(--ink);color:#fff;border-radius:7px;padding:.35rem .6rem}
.stop h3{margin:.8rem 0 .4rem;font-size:1.15rem}
.stop p{margin:0;color:var(--ink-2);font-size:.98rem}
.stop.on{background:var(--t-yellow)}
.stop.on .ico{background:var(--red);color:#fff}
.journey.live .jr-svg{display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible;max-width:none}
.journey.live .jr-list::before,.journey.live .stop::before{display:none}
.jr-pin circle{fill:#fff;stroke:var(--ink);stroke-width:5;transition:fill .3s}
.jr-pin text{font:700 13px var(--display);fill:var(--ink);transition:fill .3s}
.jr-pin.on circle{fill:var(--red)}
.jr-pin.on text{fill:#fff}
@media (min-width:861px){
  .journey.live .jr-list{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(8rem,15vw,13rem);padding:0}
  .journey.live .stop{grid-row:calc(var(--i) + 1);margin:0 0 2.4rem;width:100%;max-width:30rem}
  .journey.live .stop:nth-child(odd){grid-column:1;justify-self:end;text-align:right}
  .journey.live .stop:nth-child(even){grid-column:2;justify-self:start}
  .journey.live .stop:nth-child(odd) .when{margin:0 .5rem 0 0;float:none}
  .journey.live{--gap:clamp(8rem,15vw,13rem)}
  .journey.live .stop::after{content:"";position:absolute;top:calc(46px - 1.5px);height:3px;background:var(--ink);width:calc(var(--gap) / 2 - 46px - 19px)}
  .journey.live .stop:nth-child(odd)::after{left:100%;margin-left:3px}
  .journey.live .stop:nth-child(even)::after{right:100%;margin-right:3px}
}
@media (max-width:860px){.journey.live .jr-list{padding-left:3.5rem}}

/* ---------- calculator dashboard ---------- */
.dash{position:relative;background:var(--dash);color:#fff;border:3px solid var(--ink);border-radius:30px;box-shadow:var(--sh);overflow:hidden;
  padding:clamp(1.25rem,3vw,2.25rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.25rem) clamp(1.5rem,4vw,3.5rem)}
.dash::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(800px 380px at 12% -10%,rgba(247,109,44,.28),transparent 60%),radial-gradient(560px 300px at 100% 115%,rgba(209,0,29,.28),transparent 60%)}
.dash>*{position:relative}
.dash-gauges{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:1rem;align-items:center}
.gauge-main,.gauge-hours{position:relative;container-type:inline-size}
.dial{width:100%;height:auto;overflow:visible;max-width:none}
.dial-track{fill:none;stroke:rgba(255,255,255,.13);stroke-linecap:round}
.dial-val{fill:none;stroke:var(--orange);stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:13.3;transition:stroke-dashoffset .9s cubic-bezier(.3,.8,.2,1)}
.dial.small .dial-val{stroke:var(--yellow);stroke-dashoffset:0}
.dial-ticks path{stroke:rgba(255,255,255,.45);stroke-width:2.5;stroke-linecap:round}
.dial-needle{transform:rotate(358deg);transition:transform .9s cubic-bezier(.3,1.25,.4,1)}
.dial.small .dial-needle{transform:rotate(390deg)}
.dial-needle path{stroke:var(--red-n);stroke-width:5;stroke-linecap:round;fill:none}
.dial-needle circle{fill:#fff;stroke:var(--red-n);stroke-width:4}
.odo{position:absolute;left:0;right:0;top:71%;display:flex;justify-content:center;height:1em;overflow:hidden;font:700 clamp(1.15rem,12.5cqw,2.4rem)/1 var(--display);letter-spacing:-.02em}
.odo .col{display:block;height:1em;overflow:hidden}
.odo .col i{display:block;font-style:normal;transform:translateY(calc(var(--n,0) * -1em));transition:transform .9s cubic-bezier(.3,1.1,.3,1)}
.odo .col b{display:block;height:1em;font-weight:700}
.odo .sp{display:block;width:.35em}
.odo-cap{position:absolute;left:0;right:0;top:91%;text-align:center;font-size:clamp(.62rem,3.2cqw,.78rem);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.68);font-weight:600}
.hrs{position:absolute;left:0;right:0;top:66%;text-align:center;line-height:1.1}
.hrs b{display:block;font:700 clamp(1rem,17cqw,1.7rem) var(--display)}
.hrs span{display:block;font-size:clamp(.55rem,7cqw,.7rem);color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.05em}
.dash:not(.ready) .odo,.dash:not(.ready) .odo-cap{display:none}
.dash-ctl{display:grid;gap:1.1rem;align-content:start}
.ctl{border:0;margin:0;padding:0;min-width:0}
.ctl legend{padding:0;margin-bottom:.55rem;font:700 .76rem/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.seg2,.gears{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.seg2 label,.gears label{position:relative;display:block;cursor:pointer}
.seg2 input,.gears input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.seg2 span{display:block;height:100%;padding:.7rem .9rem;border:2px solid rgba(255,255,255,.3);border-radius:14px;font-weight:600;line-height:1.25;transition:background-color .2s,color .2s,border-color .2s}
.seg2 small{display:block;font-weight:500;font-size:.85rem;color:rgba(255,255,255,.68)}
.seg2 input:checked + span{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.seg2 input:checked + span small{color:rgba(28,36,48,.78)}
.gcard{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.7rem;align-content:center;align-items:center;height:100%;padding:.6rem .8rem;
  border:2px solid rgba(255,255,255,.3);border-radius:16px;transition:background-color .2s,border-color .2s}
.gcard .gate{grid-row:1 / 3;width:68px;height:auto}
.gcard b{align-self:end;font-weight:600;line-height:1.2}
.gcard small{align-self:start;font-size:.82rem;color:rgba(255,255,255,.68);line-height:1.3}
.gears input:checked + .gcard{border-color:var(--yellow);background:rgba(255,201,60,.13)}
.seg2 input:focus-visible + span,.gears input:focus-visible + .gcard,.friend input:focus-visible ~ .sw{outline:3px solid #fff;outline-offset:3px}
.gate-line{stroke:rgba(255,255,255,.45);stroke-width:3;fill:none;stroke-linecap:round}
.gate-letters text{font:700 11px var(--text);fill:rgba(255,255,255,.65)}
.knob{transform:translate(40px,32px);transition:transform .5s cubic-bezier(.3,1.4,.4,1)}
.knob[data-pos="at"]{transform:translate(40px,10px)}
.knob circle{r:7.5px;fill:rgba(255,255,255,.8)}
.gears input:checked + .gcard .knob[data-pos="mt"]{transform:translate(16px,10px)}
.gears input:checked + .gcard .knob[data-pos="at"]{transform:translate(40px,55px)}
.gears input:checked + .gcard .knob circle{fill:var(--yellow)}
.friend{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:center;padding:.7rem .9rem;border:2px solid rgba(255,255,255,.3);border-radius:16px;cursor:pointer;transition:border-color .2s}
.friend input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.sw{position:relative;width:48px;height:28px;border-radius:14px;background:rgba(255,255,255,.24);transition:background-color .2s}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.3,1.4,.4,1)}
.friend input:checked + .sw{background:var(--green)}
.friend input:checked + .sw::after{transform:translateX(20px)}
.friend:has(input:checked){border-color:var(--yellow)}
.friend-t b{display:block;font-weight:600;line-height:1.25}
.friend-t small{color:rgba(255,255,255,.7)}
.seat{width:56px;height:auto}
.seat rect{fill:none;stroke:rgba(255,255,255,.45);stroke-width:2.5}
.seat circle{fill:rgba(255,255,255,.18)}
.seat circle:first-of-type{fill:#fff}
.seat path{stroke:rgba(255,255,255,.35);stroke-width:2.5}
.seat .p2{fill:var(--yellow);opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;transition:opacity .25s,transform .3s cubic-bezier(.3,1.5,.4,1)}
.dash.with-friend .seat .p2{opacity:1;transform:scale(1)}
.dash-out{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;border-top:2px dashed rgba(255,255,255,.28);padding-top:1.3rem}
.dash output{font:700 clamp(1.8rem,4vw,2.6rem)/1 var(--display);display:block}
.dash.ready output{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dash .breakdown{display:block;color:rgba(255,255,255,.82);font-size:1rem;max-width:48ch;line-height:1.45}
.dash .btn-primary{box-shadow:3px 3px 0 #000;border-color:#000}
.dash .btn-primary:hover{box-shadow:1px 1px 0 #000}
@media (max-width:860px){.dash{grid-template-columns:1fr}.dash-gauges{grid-template-columns:1.5fr 1fr}.dash-out .btn{width:100%}}

/* ---------- metro map ---------- */
.metro{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:clamp(1rem,2.5vw,2rem);align-items:start}
.metro-map{background:var(--paper);border:3px solid var(--ink);border-radius:28px;box-shadow:var(--sh);padding:clamp(.6rem,1.5vw,1.2rem);overflow:hidden}
.mapsvg{width:100%;height:auto;display:block;max-width:none}
.mapsvg .ln{transition:opacity .25s}
.mapsvg[data-line] .ln,.mapsvg[data-line] .stn{opacity:.18}
.mapsvg[data-line="red"] .ln.red,.mapsvg[data-line="red"] .stn.red,.mapsvg[data-line="blue"] .ln.blue,.mapsvg[data-line="blue"] .stn.blue,
.mapsvg[data-line="green"] .ln.green,.mapsvg[data-line="green"] .stn.green{opacity:1}
.mapsvg .stn{cursor:pointer;outline:none;transition:opacity .25s}
.mapsvg .stn text{font:700 42px var(--text);fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:10px;stroke-linejoin:round}
.mapsvg .pl{font:500 35px var(--text);fill:#566175;paint-order:stroke;stroke:#fff;stroke-width:9px;stroke-linejoin:round}
.mapsvg .stn text.sub{font:500 30px var(--text);fill:#566175}
.mapsvg .stn .dot,.mapsvg .stn .halo{transform-box:fill-box;transform-origin:center;transition:transform .2s}
.mapsvg .stn:hover .dot,.mapsvg .stn:focus-visible .dot{transform:scale(1.22)}
.mapsvg .stn.on .dot{transform:scale(1.3)}
.mapsvg .stn.on .halo{animation:halo 1.7s ease-out infinite}
.mapsvg .stn:focus-visible .hit{stroke:var(--blue);stroke-width:3;stroke-dasharray:6 4}
@keyframes halo{0%{transform:scale(.6);opacity:.35}100%{transform:scale(1.5);opacity:0}}
.mlegend{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem .4rem .2rem}
.lg{--c:var(--ink);display:inline-flex;align-items:center;gap:.5rem;border:2px solid var(--ink);border-radius:999px;background:#fff;padding:.4rem .85rem;font:600 .88rem var(--text);color:var(--ink);cursor:pointer}
.lg i{width:22px;height:8px;border-radius:4px;background:var(--c)}
.lg.red{--c:var(--lred)}.lg.blue{--c:var(--lblue)}.lg.green{--c:var(--lgreen)}
.lg[aria-pressed="true"]{background:var(--ink);color:#fff}
.bp-col{display:none}
.js .bp-col{display:block;position:sticky;top:1rem}
.bpanels{background:var(--paper);border:3px solid var(--ink);border-radius:24px;box-shadow:var(--sh-s);padding:1.4rem}
.bp-empty{text-align:center;padding:1.2rem .4rem;color:var(--ink-2)}
.bp-pin{display:block;width:44px;height:44px;margin:0 auto 1rem;border-radius:50% 50% 50% 0;background:var(--red);border:3px solid var(--ink);transform:rotate(-45deg);position:relative}
.bp-pin::after{content:"";position:absolute;left:11px;top:11px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.bpanel:focus{outline:none}
.bp-line{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;font:700 .76rem/1.2 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.bp-line::before{content:"";flex:none;width:28px;height:10px;border-radius:5px;background:#7A8494}
.bp-line.red::before{background:var(--lred)}.bp-line.blue::before{background:var(--lblue)}.bp-line.green::before{background:var(--lgreen)}
.bpanel h3{font-size:1.4rem;margin-bottom:1rem}
.bp-facts{margin:0 0 1.2rem;display:grid;grid-template-columns:max-content 1fr;gap:.45rem 1rem;font-size:.97rem}
.bp-facts dt{font-weight:600}.bp-facts dd{margin:0}
.bp-h{font-weight:700;margin:0 0 .6rem}
.chips.sm{margin:0 0 .8rem}
.chips.sm .chip{padding:.3rem .75rem;font-size:.85rem}
.chip:disabled{opacity:.4;cursor:not-allowed}
.bp-people{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.55rem;max-height:26rem;overflow:auto}
.bp-people li{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center}
.bp-people .avatar{width:44px;height:44px;font-size:.9rem}
.bp-name{font-weight:600;line-height:1.25}
.bpanel .actions{margin:1rem 0 0}
.st-name.on{color:var(--red);text-decoration:underline}
.metro-hint{display:none;margin:0 0 1rem;color:var(--ink-2)}
@media (min-width:861px){.lines,.other-addr{display:none}}
.bp-x{display:none}
.bp-back{position:fixed;inset:0;z-index:59;background:rgba(15,20,28,.55)}
body.bp-lock{overflow:hidden}
@media (max-width:860px){
  .metro{display:block}.metro-map{display:none}.metro-hint{display:block}
  .js .bp-col{position:static}
  .bpanels{display:none}
  .bpanels.open{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;max-height:88vh;overflow:auto;border-radius:26px 26px 0 0;border-width:3px 0 0;
    padding:1.3rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.25)}
  .bpanels .bp-empty{display:none}
  .bp-x{display:grid;place-items:center;position:absolute;right:.9rem;top:.8rem;width:44px;height:44px;border:2px solid var(--ink);border-radius:12px;background:#fff;font:600 1.6rem/1 var(--text);color:var(--ink);cursor:pointer}
  .bpanel{position:relative}
  .bpanel h3{padding-right:3.2rem}
  .bp-facts{grid-template-columns:1fr;gap:.1rem}
  .bp-facts dd{margin-bottom:.6rem}
  .bp-people{max-height:none;overflow:visible}
}

/* ---------- quiz ---------- */
.quiz-sec{background:var(--yellow);border-block:3px solid var(--ink)}
.quiz-head{max-width:46rem;margin-bottom:2rem}
.quiz-head .lead{margin-top:.9rem}
.quiz{background:var(--paper);border:3px solid var(--ink);border-radius:28px;box-shadow:var(--sh);padding:clamp(1.25rem,3vw,2.5rem);min-height:20rem}
.qz-intro{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:1.5rem 0;text-align:center}
.qz-intro-signs{display:flex;gap:clamp(1rem,3vw,2.5rem);align-items:center}
.qintro{width:clamp(70px,14vw,120px);height:auto}
.qintro:nth-child(1){transform:rotate(-7deg)}.qintro:nth-child(3){transform:rotate(7deg)}
.qz-top{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.qz-prog{display:flex;gap:.4rem;flex:1}
.qz-prog i{flex:1;height:12px;border-radius:6px;background:#E3E7ED;border:2px solid var(--ink)}
.qz-prog i.done{background:var(--ink)}.qz-prog i.cur{background:var(--orange)}
.qz-count{margin:0;font-weight:700;font-size:.9rem;color:var(--ink-2);white-space:nowrap}
.qz-body{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:clamp(1.25rem,3vw,2.5rem);align-items:start}
.qz-sign{background:var(--t-blue);border:3px solid var(--ink);border-radius:24px;padding:1.2rem;display:grid;place-items:center}
.qsign{width:100%;height:auto;max-width:150px}
.qz-title{font-size:clamp(1.1rem,2.1vw,1.5rem);line-height:1.3;margin-bottom:1.2rem;outline:none}
.qz-opts{display:grid;gap:.65rem}
.qz-opt{display:flex;gap:.9rem;align-items:center;text-align:left;padding:.8rem 1rem;min-height:56px;border:2.5px solid var(--ink);border-radius:16px;background:#fff;
  font:500 1.02rem/1.35 var(--text);color:var(--ink);cursor:pointer;box-shadow:var(--sh-s);transition:transform .12s,box-shadow .12s,background-color .15s}
.qz-opt:hover:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);background:var(--t-yellow)}
.qz-l{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--ink);color:#fff;font:700 .85rem var(--display)}
.qz-opt.ok{background:#CFEFD9;border-color:#1f7a42}.qz-opt.ok .qz-l{background:#1f7a42}
.qz-opt.bad{background:var(--t-red2);border-color:var(--red)}.qz-opt.bad .qz-l{background:var(--red)}
.qz-opt:disabled{cursor:default}
.qz-opt:disabled:not(.ok):not(.bad){opacity:.55}
.qz-fb{margin-top:1rem;min-height:2.5rem;line-height:1.5}
.qz-fb b.ok{color:#1f7a42}.qz-fb b.bad{color:var(--red)}
.qz-next{margin-top:.9rem;display:flex}
.qz-res{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.qz-ringbox{position:relative;width:min(210px,60%);margin-bottom:1rem}
.qz-ring{width:100%;height:auto;transform:rotate(-90deg)}
.qz-ring circle{fill:none;stroke-width:14;stroke-linecap:round}
.qz-ring .t{stroke:#E3E7ED}
.qz-ring .v{stroke:var(--green);transition:stroke-dashoffset 1s cubic-bezier(.3,.8,.2,1)}
.qz-ring[data-s="3"] .v{stroke:var(--orange)}
.qz-ring[data-s="0"] .v,.qz-ring[data-s="1"] .v,.qz-ring[data-s="2"] .v{stroke:var(--red)}
.qz-score{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.qz-score b{font:700 2.1rem/1 var(--display)}
.qz-score span{font-size:.72rem;color:var(--ink-2);max-width:10ch;margin-top:.3rem}
.qz-verdict{font:600 1.2rem/1.4 var(--text);margin:0 0 .5rem}
.qz-lab{display:block;font-weight:600;margin:1.2rem 0 .4rem}
.qz-name{width:100%;max-width:22rem;min-height:52px;padding:.6rem .9rem;border:2px solid var(--ink);border-radius:12px;background:#fff;font:400 1.05rem var(--text);color:var(--ink)}
.qz-name:focus{outline:3px solid var(--blue);outline-offset:1px}
.qz-ticket{margin:0}
.qz-ticket img{width:100%;height:auto;border:3px solid var(--ink);border-radius:18px;box-shadow:var(--sh-s);background:#fff}
.qz-tools{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
@media (max-width:860px){.qz-body,.qz-res{grid-template-columns:1fr}.qz-sign{max-width:170px}}

@media (prefers-reduced-motion:reduce){
  .scene-dash,.scene-streaks,.mapsvg .stn.on .halo{animation:none}
  .dial-val,.dial-needle,.odo .col i,.knob,.sw::after,.qz-ring .v{transition:none}
  html{scroll-behavior:auto}
}