:root{--bg:#f6f8fa;--bg-rgb:246,248,250;--surface:#fff;--surface2:#eef2f5;--fg:#0b1f33;--muted:#5a6b7b;--accent:#0a7d6e;--accent2:#1f4fd8;--line:#d7dee5;--accent-rgb:10,125,110;--fg-rgb:11,31,51;
--tint-a:0;--bri:1;--r:20px;--f-head:'Inter Tight','Inter',system-ui,sans-serif;--f-body:'Inter',system-ui,sans-serif;--f-mono:'IBM Plex Mono',ui-monospace,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);color:var(--fg);color-scheme:light}
body{margin:0;font-family:var(--f-body);background:var(--bg);color:var(--fg);line-height:1.55;-webkit-font-smoothing:antialiased;font-size:17px;overflow-x:hidden}
html::after{content:"";position:fixed;inset:0;pointer-events:none;background:rgb(255,166,84);opacity:var(--tint-a);mix-blend-mode:multiply;z-index:90}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.08;margin:0 0 .5em;letter-spacing:-.02em}
p{margin:0 0 1em}a{color:inherit}
.wrap{width:min(1200px,92vw);margin:0 auto}
section{padding:clamp(56px,8vw,112px) 0;position:relative}
.eyebrow{font:600 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;display:block}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:14px 24px;border-radius:999px;border:1.5px solid var(--fg);background:var(--fg);color:var(--bg);font:600 15px var(--f-body);text-decoration:none;cursor:pointer;transition:transform .25s,box-shadow .25s;will-change:transform}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(var(--accent-rgb),.28)}
.btn.alt{background:transparent;color:var(--fg)}
.btn.acc{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.grid{display:grid;gap:20px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}
header.top{position:absolute;top:0;left:0;right:0;z-index:20;padding:20px 0}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font:800 17px var(--f-head);letter-spacing:.04em;text-decoration:none;display:flex;gap:10px;align-items:center}
.logo i{width:22px;height:22px;border-radius:6px;background:var(--accent);display:inline-block}
nav.menu{display:flex;gap:26px;font-size:14px;font-weight:500}nav.menu a{text-decoration:none;opacity:.8}nav.menu a:hover{opacity:1}
@media(max-width:800px){nav.menu{display:none}}
.langs{display:flex;gap:4px;font:600 12px var(--f-mono)}
.langs button{background:transparent;border:1px solid var(--line);color:var(--fg);padding:6px 9px;border-radius:8px;cursor:pointer}
.langs button.on{background:var(--fg);color:var(--bg)}
.langs button[disabled]{opacity:.4;cursor:not-allowed}
.annot{display:inline-block;background:#ffe66d;color:#3a3000;font:600 11px/1.35 var(--f-mono);padding:4px 8px;border-radius:6px;margin:6px 0;max-width:100%}
.annot::before{content:"NOTATKA ▸ ";opacity:.65}
html.noannot .annot{display:none}
.ph{position:relative;border-radius:var(--r);overflow:hidden;min-height:200px;display:flex;align-items:flex-end;filter:brightness(var(--bri));
background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--fg) 9%,var(--surface)) 0 14px,color-mix(in srgb,var(--fg) 5%,var(--surface)) 14px 28px);border:1px dashed color-mix(in srgb,var(--fg) 35%,transparent)}
.ph .cap{position:relative;z-index:2;padding:14px 16px;font:500 12px/1.4 var(--f-mono);background:linear-gradient(transparent,rgba(var(--bg-rgb),.9) 55%);width:100%}
.ph .cap b{display:block;font-size:13px;color:var(--fg)}
.ph .cap small{opacity:.7}
.ph .ico{position:absolute;top:14px;left:16px;font:700 11px var(--f-mono);letter-spacing:.1em;opacity:.6}
.play{position:absolute;right:16px;top:14px;width:42px;height:42px;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center;font-size:14px;z-index:2}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);will-change:transform,opacity}
.reveal.in,html.shot .reveal{opacity:1;transform:none}
canvas.gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.nogl canvas.gl{display:none}
.nogl .glfallback{display:block}
.glfallback{display:none;position:absolute;inset:0;background:radial-gradient(60% 50% at 70% 50%,rgba(var(--accent-rgb),.25),transparent 70%),repeating-linear-gradient(0deg,rgba(var(--fg-rgb),.07) 0 1px,transparent 1px 22px)}
/* debug panel */
#dbg{position:fixed;left:14px;bottom:14px;z-index:100;font:12px/1.4 var(--f-mono);color:var(--fg)}
#dbg .pill{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.18);display:flex;gap:8px;align-items:center}
#dbg .box{display:none;width:300px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:8px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
#dbg.open .box{display:block}
#dbg input[type=range]{width:100%;accent-color:var(--accent)}
#dbg label{display:flex;gap:6px;align-items:center;margin:4px 0}
#dbg button{font:inherit;background:var(--surface2);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:4px 8px;cursor:pointer;margin:2px 2px 0 0}
#dbg .rd{opacity:.8;margin-top:6px}
/* assistant */
.asst{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-height:420px}
.asst .hd{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font:600 14px var(--f-body)}
.asst .hd span{font:500 11px var(--f-mono);opacity:.7}
.asst .log{flex:1;padding:16px 18px;display:flex;flex-direction:column;gap:10px;max-height:340px;overflow:auto}
.msg{max-width:88%;padding:10px 14px;border-radius:14px;font-size:15px;line-height:1.45}
.msg.bot{background:var(--surface2);align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:var(--accent);color:var(--bg);align-self:flex-end;border-bottom-right-radius:4px}
.msg .tag{display:block;font:600 10.5px var(--f-mono);margin-top:6px;opacity:.7}
.asst .chips{padding:0 18px 8px;display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:transparent;color:var(--fg);border-radius:999px;padding:6px 12px;font:500 13px var(--f-body);cursor:pointer}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.asst form{display:flex;border-top:1px solid var(--line)}
.asst input{flex:1;border:0;background:transparent;color:var(--fg);padding:14px 18px;font:inherit;outline:none}
.asst form button{border:0;background:var(--fg);color:var(--bg);padding:0 20px;font-weight:600;cursor:pointer}
.asst .lead{padding:8px 18px;font:500 11.5px var(--f-mono);border-top:1px dashed var(--line);opacity:.85}
.asst .lead b{color:var(--accent)}
/* personalization */
.pzbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font:500 13px var(--f-mono);padding:12px 16px;border:1px dashed color-mix(in srgb,var(--fg) 35%,transparent);border-radius:14px;background:rgba(var(--bg-rgb),.55);backdrop-filter:blur(10px)}
.pzbar select{font:inherit;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.pzbar b{opacity:.65;font-weight:600}
.pzout{font-size:15px}
/* seo matrix */
.mx{display:grid;grid-template-columns:110px repeat(6,1fr);gap:4px;font:500 11.5px var(--f-mono)}
.mx div{padding:8px 6px;border-radius:8px;background:var(--surface2);text-align:center;cursor:default}
.mx .h{background:transparent;font-weight:700;opacity:.8}
.mx .c{cursor:pointer}.mx .c:hover,.mx .c.sel{background:var(--accent);color:var(--bg)}
.slug{font:500 13px var(--f-mono);padding:12px 14px;border-radius:12px;background:var(--surface2);margin-top:10px;word-break:break-all}
/* steps */
.steps{display:flex;gap:0;counter-reset:s}
.steps .st{flex:1;padding:0 12px 0 0;position:relative}
.steps .st::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--surface);border:1.5px solid var(--accent);font:700 13px var(--f-mono);color:var(--accent);margin-bottom:12px}
.steps .st::after{content:"";position:absolute;top:17px;left:42px;right:8px;height:1.5px;background:var(--line)}
.steps .st:last-child::after{display:none}
.steps h4{font-size:16px;margin-bottom:4px}.steps p{font-size:14px;color:var(--muted)}
@media(max-width:800px){.steps{flex-direction:column;gap:18px}.steps .st::after{display:none}}
/* timeline */
.tl{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tl::before{content:"";position:absolute;top:13px;left:0;right:0;height:3px;background:var(--line);border-radius:3px}
.tl::after{content:"";position:absolute;top:13px;left:0;height:3px;width:var(--tlp,12%);background:var(--accent);border-radius:3px;transition:width 1.6s cubic-bezier(.2,.7,.2,1)}
html.shot .tl::after{width:34%}
.tl .m{position:relative;padding-top:42px}
.tl .m::before{content:"";position:absolute;top:5px;left:0;width:19px;height:19px;border-radius:50%;background:var(--bg);border:3px solid var(--line);z-index:1}
.tl .m.done::before{background:var(--accent);border-color:var(--accent)}
.tl .m.now::before{border-color:var(--accent);box-shadow:0 0 0 6px rgba(var(--accent-rgb),.2)}
.tl .tag{display:inline-block;font:600 11px var(--f-mono);padding:3px 8px;border-radius:999px;background:var(--surface2);margin-bottom:8px}
.tl h4{font-size:17px;margin-bottom:6px}.tl p{font-size:14px;color:var(--muted)}
@media(max-width:800px){.tl{grid-template-columns:1fr}.tl::before,.tl::after{display:none}}
/* form */
form.lead label{display:block;font:600 13px var(--f-body);margin:12px 0 4px}
form.lead input,form.lead select,form.lead textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit}
form.lead .chk{display:flex;gap:10px;font-size:13px;color:var(--muted);align-items:flex-start;margin:14px 0}
form.lead .chk input{width:auto;margin-top:4px}
footer{padding:48px 0 90px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.pill2{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--line);font:600 11px var(--f-mono);margin:0 6px 6px 0}
.ph-x{position:relative}
.stamp{position:absolute;right:14px;top:14px;z-index:3;font:800 14px var(--f-head);letter-spacing:.14em;padding:6px 12px;border:3px solid #e5392f;color:#e5392f;border-radius:6px;transform:rotate(-6deg);background:rgba(var(--bg-rgb),.75)}
.slider-note{font:500 12px var(--f-mono);opacity:.7}
@media(prefers-contrast:more){:root{--r:10px}.card,.ph,.chip,.pzbar{border-width:2px}body{font-weight:500}}
html.hc .card,html.hc .ph{border-width:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
ul.ul{padding-left:0;list-style:none;margin:12px 0 0;font-size:14.5px}ul.ul li{padding:7px 0;border-top:1px solid var(--line)}
em{font-style:normal;color:var(--accent)}
details{border-top:1px solid var(--line);padding:16px 0}details summary{cursor:pointer;font:600 18px var(--f-head)}details p{margin:10px 0 0;color:var(--muted)}

html.shot:not(.dbgopen) #dbg{display:none}

:root{--f-head:'Space Grotesk','Inter',system-ui,sans-serif;--f-body:'DM Sans','Inter',system-ui,sans-serif;--f-mono:'DM Mono','IBM Plex Mono',ui-monospace,monospace}
header.top{position:absolute}
nav.menu a.cur{opacity:1;border-bottom:2px solid var(--accent);padding-bottom:3px}
.hdr-cta{display:none}
@media(min-width:1100px){.hdr-cta{display:inline-flex;padding:9px 16px;font-size:13px}}
.hero{min-height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:90px}
.hero .grid{grid-template-columns:1.05fr 1fr;align-items:center}@media(max-width:900px){.hero .grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(42px,6.6vw,100px);font-weight:700;letter-spacing:-.035em;line-height:.98}
.hero .sub{font-size:clamp(18px,1.9vw,23px);color:var(--muted);max-width:36ch;margin:22px 0 30px}
.hero .sub em{font-weight:700}
.globe{position:relative;aspect-ratio:1;width:min(100%,620px);margin:0 auto}
.globe::before{content:"";position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(var(--accent2-rgb),.22),transparent 65%);border:1px solid var(--line)}
.phead{position:relative;overflow:hidden;padding:150px 0 70px;border-bottom:1px solid var(--line)}
.phead .wrap{position:relative;z-index:2}
.phead h1{font-size:clamp(38px,5.6vw,84px);font-weight:700;letter-spacing:-.035em;max-width:16ch}
.phead p.lead{font-size:clamp(17px,1.8vw,22px);color:var(--muted);max-width:50ch}
.phead .gband{position:absolute;inset:0}
.phead.withglobe .globe{position:absolute;right:max(3vw,24px);top:90px;width:min(46vw,460px);z-index:1}
@media(max-width:900px){.phead.withglobe .globe{display:none}}
.tick{display:flex;gap:42px;overflow:hidden;white-space:nowrap;font:600 13px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding:16px 0;border-block:1px solid var(--line);color:var(--muted)}
.tick span{animation:tick 26s linear infinite;display:inline-flex;gap:42px;flex:none}@keyframes tick{to{transform:translateX(-100%)}}
.tick b{color:var(--accent)}
/* flashes (A content, C styling) */
.flashes{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}@media(max-width:900px){.flashes{grid-template-columns:1fr}}
.flash .ph{min-height:320px;filter:grayscale(.85) contrast(1.1) brightness(var(--bri))}
.flash .x1,.flash .x2{position:absolute;left:-6%;top:50%;width:112%;height:7px;background:#e5392f;z-index:3;transform-origin:left center;transform:rotate(-13deg) scaleX(0);box-shadow:0 0 0 2px rgba(0,0,0,.2)}
.flash .x2{transform:rotate(13deg) scaleX(0)}
.flash.in .x1{transform:rotate(-13deg) scaleX(1);transition:transform .8s .15s cubic-bezier(.7,0,.2,1)}
.flash.in .x2{transform:rotate(13deg) scaleX(1);transition:transform .8s .45s cubic-bezier(.7,0,.2,1)}
html.shot .flash .x1{transform:rotate(-13deg) scaleX(1)!important}html.shot .flash .x2{transform:rotate(13deg) scaleX(1)!important}
@supports (animation-timeline:view()){.flash .x1{animation:s1 linear both;animation-timeline:view();animation-range:entry 40% cover 50%}.flash .x2{animation:s2 linear both;animation-timeline:view();animation-range:entry 60% cover 55%}
@keyframes s1{from{transform:rotate(-13deg) scaleX(0)}to{transform:rotate(-13deg) scaleX(1)}}@keyframes s2{from{transform:rotate(13deg) scaleX(0)}to{transform:rotate(13deg) scaleX(1)}}
html.shot .flash .x1,html.shot .flash .x2{animation:none!important}}
.flash h3{margin:18px 0 4px;font-size:24px}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}@media(max-width:900px){.ba{grid-template-columns:1fr}}
.ba .after .ph{border-style:solid;border-color:var(--accent);filter:brightness(var(--bri))}
.ba .lbl{font:700 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;display:block}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--fg)}
.three div{padding:30px 24px 26px 0;border-right:1px solid var(--line)}.three div:last-child{border:0}
.three h2{font-size:clamp(34px,4.6vw,66px);font-weight:700;margin:0;color:var(--accent)}
@media(max-width:900px){.three{grid-template-columns:1fr}}
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.modes div{padding:20px;border:1.5px solid var(--fg);border-radius:var(--r);font:700 21px var(--f-head)}
@media(max-width:900px){.modes{grid-template-columns:repeat(2,1fr)}}
.teaser{position:relative;min-height:380px;border-radius:var(--r);background:var(--surface2);overflow:hidden;display:grid;place-items:center}
.teaser .blob{position:absolute;width:46%;height:56%;border-radius:38% 62% 55% 45%/48% 40% 60% 52%;background:linear-gradient(135deg,var(--accent),var(--accent2));filter:blur(46px);opacity:.75;animation:morph 9s ease-in-out infinite alternate;will-change:transform}
@keyframes morph{to{transform:translate(8%,-6%) rotate(24deg) scale(1.15);border-radius:60% 40% 40% 60%/52% 60% 40% 48%}}
.teaser .msg2{position:relative;text-align:center;font:700 clamp(26px,4vw,52px) var(--f-head);max-width:14ch}
.q label{display:block;padding:12px 16px;border:1.5px solid var(--line);border-radius:12px;margin:8px 0;cursor:pointer}.q label:has(input:checked){border-color:var(--accent);background:rgba(var(--accent-rgb),.12)}
.q input{margin-right:10px;accent-color:var(--accent)}
#qres{margin-top:16px;padding:20px;border-radius:var(--r);background:var(--surface2);display:none}
html.shot #qres{display:block}
/* map + wizard (C) */
.mapbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
svg.map{width:100%;height:auto;display:block}
svg.map circle{transition:r .3s,opacity .3s,fill .6s;cursor:pointer}
.rgs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}@media(max-width:900px){.rgs{grid-template-columns:repeat(2,1fr)}}
.rg{padding:14px;border-radius:14px;border:1.5px solid var(--line);cursor:pointer;background:transparent;color:var(--fg);text-align:left;font:inherit;transition:border-color .3s,transform .3s}
.rg:hover,.rg.on{border-color:var(--accent);transform:translateY(-3px)}.rg b{display:block;font:700 16px var(--f-head)}.rg span{font:500 11.5px var(--f-mono);opacity:.75}
.rinfo{margin-top:16px;padding:18px;border-radius:14px;background:var(--surface2)}
.roles{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.roles span{padding:12px 20px;border-radius:999px;border:1.5px solid var(--fg);font:600 16px var(--f-head)}
.wiz .pg{display:none}.wiz .pg.on{display:block}
.wiz .prog{display:flex;gap:6px;margin-bottom:18px}.wiz .prog i{flex:1;height:4px;border-radius:2px;background:var(--line)}.wiz .prog i.on{background:var(--accent)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.opts button{padding:12px;border-radius:12px;border:1.5px solid var(--line);background:transparent;color:var(--fg);font:inherit;cursor:pointer}.opts button.on{border-color:var(--accent);background:rgba(var(--accent-rgb),.14)}
.cta-band{background:var(--fg);color:var(--bg)}
.cta-band .card{color:var(--fg)}
.legal{border:2px solid #c0392b;border-radius:var(--r);padding:20px 24px;background:rgba(192,57,43,.08)}
.legal h4{margin:0 0 8px;font:700 15px var(--f-head);color:#c0392b}
html[data-mode=night] .legal h4{color:#ff8a7a}
.legal ul{margin:6px 0;padding-left:18px;font-size:14px}.legal li{margin:4px 0}
html.noannot .legal{display:none}
.gate{position:relative;overflow:hidden}.gate .blur{filter:blur(7px);user-select:none;opacity:.7}
.gate .lock{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;font-weight:600}
.fab{position:fixed;right:18px;bottom:18px;z-index:95;background:var(--accent);color:var(--bg);border:0;border-radius:999px;padding:13px 20px;font:700 14px var(--f-body);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.fabp{position:fixed;right:18px;bottom:72px;z-index:95;width:min(400px,92vw);display:none}
.fabp.open{display:block}
.tlbig .m{padding-bottom:10px}
.stagecard{display:grid;grid-template-columns:200px 1fr;gap:26px;padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:16px}
@media(max-width:800px){.stagecard{grid-template-columns:1fr}}
.stagecard .tag{display:inline-block;font:600 11px var(--f-mono);padding:4px 10px;border-radius:999px;background:var(--surface2)}
.stagecard.done{border-color:var(--accent)}
footer a{text-decoration:none;opacity:.85}footer a:hover{opacity:1;text-decoration:underline}
/* public: poster-style crossed-out panels, lanes */
.ph.poster{border:0;min-height:320px;background:linear-gradient(165deg,color-mix(in srgb,var(--fg) 16%,var(--surface)),color-mix(in srgb,var(--fg) 6%,var(--surface)));filter:grayscale(.9) brightness(var(--bri));background-size:cover;background-position:center}
.ph.poster .pdec{position:absolute;inset:auto 0 0 0;height:62%;background:radial-gradient(60% 70% at 18% 100%,color-mix(in srgb,var(--fg) 34%,transparent) 0 60%,transparent 61%),radial-gradient(48% 56% at 52% 100%,color-mix(in srgb,var(--fg) 26%,transparent) 0 60%,transparent 61%),radial-gradient(52% 64% at 86% 100%,color-mix(in srgb,var(--fg) 38%,transparent) 0 60%,transparent 61%)}
.ph.poster .ico{display:none}
.ph.poster .cap{background:none;padding:20px 22px;z-index:4}.ph.poster .cap b{font:700 clamp(20px,2.2vw,28px) var(--f-head);line-height:1.15;color:var(--fg)}
.ph.poster .cap{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.ph.orderpanel{min-height:320px;border:1.5px solid var(--accent);background:linear-gradient(165deg,rgba(var(--accent-rgb),.1),transparent)}
.ph.orderpanel .cap{background:none}
.lanebar{display:flex;flex-direction:column;gap:12px}
.lanebar i{display:block;height:6px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--accent) 0 16px,transparent 16px 30px);opacity:.85;animation:flow 3.2s linear infinite;will-change:background-position}
.lanebar i:nth-child(2){animation-duration:2.6s}.lanebar i:nth-child(3){animation-duration:3.8s}.lanebar i:nth-child(4){animation-duration:2.9s}.lanebar i:nth-child(5){animation-duration:3.4s}.lanebar i:nth-child(6){animation-duration:3s}
@keyframes flow{to{background-position:30px 0}}
.lanebar.big{position:absolute;inset:18% 8% 34%;justify-content:space-evenly}
.lanes .lanebar{margin-top:22px}