:root{
 --bg:#f6f5ef;--card:#fff;--ink:#1d2a24;--muted:#5d6b64;--line:#e3e1d6;
 --pri:#1f5f4a;--pri2:#2f8a66;--acc:#c6e36b;--ok:#2f8a4a;--warn:#c98a12;--bad:#c0442f;
 --r:16px;--sh:0 1px 2px rgba(20,40,30,.06),0 6px 24px rgba(20,40,30,.06);
 --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--pri)}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(28px,4.5vw,46px)}
h2{font-size:clamp(22px,3vw,30px)}
h3{font-size:19px}
h4{font-size:16px}
p{margin:0 0 1em}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)}
.small{font-size:14px}
.ic{width:20px;height:20px;flex:none;vertical-align:-4px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.top{position:sticky;top:0;z-index:50;background:rgba(246,245,239,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:20px;height:64px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-size:19px;white-space:nowrap}
.logo b{color:var(--pri)}
.logo-ic{width:30px;height:30px;color:#fff;background:var(--pri);border-radius:9px;padding:4px}
.nav{display:flex;gap:4px}
.nav a{padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:500;font-size:15px}
.nav a:hover{background:#e9e8de}
.search{position:relative;margin-left:auto;width:260px}
.search input{width:100%;height:40px;border:1px solid var(--line);border-radius:12px;padding:0 12px 0 36px;font:inherit;font-size:15px;background:#fff}
.search input:focus{outline:2px solid var(--pri2);border-color:transparent}
.s-ic{position:absolute;left:10px;top:10px;width:20px;height:20px;color:var(--muted)}
.s-res{position:absolute;top:46px;right:0;width:min(420px,92vw);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);max-height:70vh;overflow:auto;padding:6px}
.s-res a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink)}
.s-res a:hover,.s-res a.act{background:#f0efe6}
.s-res small{display:block;color:var(--muted)}
.s-res .none{padding:12px;color:var(--muted)}
.menu-btn{display:none;margin-left:auto;background:none;border:0;padding:8px;color:var(--ink);cursor:pointer}
.menu-btn .ic{width:26px;height:26px}

/* hero */
.hero{background:linear-gradient(160deg,color-mix(in srgb,var(--c,#1f5f4a) 14%,#fff),var(--bg) 70%);padding:40px 0 32px;border-bottom:1px solid var(--line)}
.hero-home{--c:#2f8a66;padding:56px 0 48px}
.hh{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c,var(--pri))}
.kicker .ic{width:16px;height:16px}
.lead{font-size:clamp(17px,2vw,20px);color:#34433c;max-width:720px}
.crumb{font-size:14px;color:var(--muted);margin-bottom:14px}.crumb a{color:var(--muted)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--pri);color:#fff;text-decoration:none;font-weight:600;padding:12px 20px;border-radius:12px;border:0;font:inherit;font-weight:600;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{background:#174a39;transform:translateY(-1px)}
.btn-2{background:#fff;color:var(--pri);border:1px solid var(--line)}.btn-2:hover{background:#f0efe6}
.btn-s{padding:8px 14px;font-size:14px;margin-top:6px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.stats{display:flex;gap:28px;flex-wrap:wrap}
.stats b{display:block;font-size:30px;color:var(--pri)}
.stats span{font-size:14px;color:var(--muted)}
.h1-ic{width:40px;height:40px;vertical-align:-6px;color:var(--c)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.eq{padding:24px}
.eq-row{display:flex;align-items:stretch;gap:8px;margin:14px 0}
.eq-row>b{align-self:center;font-size:22px;color:var(--muted)}
.eq-b{flex:1;background:#f6f5ef;border-radius:12px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.eq-b .ic{width:32px;height:32px;color:var(--pri)}
.eq-b span{font-weight:700;font-size:14px}.eq-b small{font-size:12px;color:var(--muted);line-height:1.3}
.eq-b.live{background:#eaf5d0}.eq-b.live .ic{animation:wob 2.4s ease-in-out infinite}
.eq-b.out{background:var(--pri);color:#fff}.eq-b.out .ic,.eq-b.out small{color:#d7eee3}
@keyframes wob{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.1)}}

/* sections & grids */
.sec{padding:36px 0}
.sec-h{margin-bottom:20px}
.grid2,.grid3,.grid4{display:grid;gap:18px}
.grid2{grid-template-columns:repeat(2,1fr)}
.grid3{grid-template-columns:repeat(3,1fr)}
.grid4{grid-template-columns:repeat(4,1fr)}
.acard{display:flex;flex-direction:column;padding:22px;text-decoration:none;color:var(--ink);border-top:5px solid var(--c);transition:transform .15s,box-shadow .15s}
.acard:hover,.tcard:hover,.gcard:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(20,40,30,.12)}
.acard-ic,.tcard-ic,.ht-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--c,#1f5f4a) 14%,#fff);color:var(--c,var(--pri));margin-bottom:12px;flex:none}
.acard-ic .ic,.tcard-ic .ic{width:30px;height:30px}
.acard p{color:var(--muted);flex:1}
.acard-n{font-weight:600;color:var(--c);display:flex;align-items:center;gap:6px}
.trend-card{--c:#4a3f8f;margin-top:18px;flex-direction:row;align-items:center;gap:18px}
.trend-card>div:nth-child(2){flex:1}.trend-card p{margin:0}.trend-card .acard-ic{margin:0}
.tcard{display:flex;gap:16px;padding:18px;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.tcard h3{font-size:17px;margin-bottom:6px}
.tcard p{color:var(--muted);font-size:15px;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tcard-b{min-width:0}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;background:#f0efe6;border-radius:999px;padding:3px 10px;color:#3c4943;white-space:nowrap}
.tag .ic{width:14px;height:14px;vertical-align:0}
.tag-game{background:#eaf5d0;color:#3f5a12;font-weight:600}
.dots{display:inline-flex;gap:3px}
.dots i{width:8px;height:8px;border-radius:50%;background:#d6d4c8}
.dots i.on{background:var(--c,var(--pri))}
.hw{padding:20px}.hw .ic{width:30px;height:30px;color:var(--pri2);margin-bottom:8px}.hw p{color:var(--muted);margin:0;font-size:15px}

/* games chips */
.gchips{display:flex;flex-wrap:wrap;gap:10px}
.gchip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-weight:500;transition:background .15s}
.gchip:hover{background:#eaf5d0}
.gchip .ic{color:var(--pri2)}
.gcard{display:flex;gap:16px;padding:20px;text-decoration:none;color:var(--ink);transition:transform .15s}
.gcard p{color:var(--muted);font-size:15px}
.howto{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.howto div{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:10px 14px;border-radius:12px;font-weight:500}
.howto .ic{color:var(--pri2)}

/* wizard */
.wizard{padding:28px}
.wz-q{margin-bottom:16px}
.wz-o{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.wz-o button,.fbtn{font:inherit;font-size:14.5px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer;color:var(--ink)}
.wz-o button.on,.fbtn.on{background:var(--pri);border-color:var(--pri);color:#fff}
.wz-res{margin-top:22px}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px}

/* area hero */
.ha{display:grid;grid-template-columns:1.5fr 1fr;gap:30px;align-items:center}
.bars{padding:20px}
.bar{display:grid;grid-template-columns:130px 1fr 24px;align-items:center;gap:10px;font-size:14px;margin:8px 0}
.bar-t{height:10px;background:#efeee5;border-radius:6px;overflow:hidden}
.bar-t i{display:block;height:100%;background:var(--c);border-radius:6px}

/* tech page */
.ht{display:flex;gap:20px;align-items:flex-start}
.ht-ic{width:72px;height:72px;border-radius:20px}.ht-ic .ic{width:42px;height:42px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.fact{display:flex;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.fact>.ic{color:var(--c);width:24px;height:24px}
.fact small{display:block;color:var(--muted);font-size:12.5px}
.fact b{font-size:14.5px;font-weight:600;line-height:1.35;display:block}
.tlayout{display:grid;grid-template-columns:220px 1fr;gap:36px}
.toc{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:2px;padding-top:36px;font-size:14.5px}
.toc b{margin-bottom:6px}
.toc a{color:var(--muted);text-decoration:none;padding:6px 10px;border-left:2px solid var(--line)}
.toc a:hover{color:var(--pri);border-color:var(--pri)}
.tmain{min-width:0}
.big{font-size:18px}
.flow{display:flex;align-items:stretch;gap:6px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:20px 0}
.fl-col{flex:1;background:#f8f7f2;border-radius:12px;padding:12px;min-width:0}
.fl-h{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--c);margin-bottom:8px}
.fl-h .ic{width:16px;height:16px}
.fl-col p{font-size:14.5px;margin:0}
.chip{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 8px;margin:0 4px 6px 0;font-size:14px}
.fl-mid{background:color-mix(in srgb,var(--c) 10%,#fff)}
.fl-out{background:color-mix(in srgb,var(--c) 18%,#fff)}
.fl-arr{display:grid;place-items:center;color:var(--c)}
.microbes{position:relative;height:34px;margin-bottom:6px}
.microbes i{position:absolute;width:14px;height:9px;border-radius:50%;background:var(--c);opacity:.75;animation:swim 4s ease-in-out infinite}
.microbes i:nth-child(1){left:6%;top:4px}.microbes i:nth-child(2){left:30%;top:18px;animation-delay:-1s;width:10px}
.microbes i:nth-child(3){left:52%;top:6px;animation-delay:-2s}.microbes i:nth-child(4){left:72%;top:20px;animation-delay:-3s;width:12px}
.microbes i:nth-child(5){left:88%;top:2px;animation-delay:-1.5s;width:9px}
@keyframes swim{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(6px,-4px) rotate(20deg)}50%{transform:translate(-4px,4px) rotate(-10deg)}75%{transform:translate(3px,2px) rotate(15deg)}}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pc-c{padding:18px;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.pc-c ul{list-style:none;margin:0;padding:0}
.pc-c li{display:flex;gap:8px;margin:8px 0;font-size:15px}
.pros .ic{color:var(--ok)}.cons .ic{color:var(--bad)}
.nv{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:start}
.steps{list-style:none;margin:0;padding:0;position:relative}
.steps li{display:flex;gap:16px;position:relative;padding-bottom:18px}
.steps li:not(:last-child)::before{content:"";position:absolute;left:19px;top:42px;bottom:0;width:2px;background:var(--line)}
.st-n{width:40px;height:40px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.steps h4{margin:8px 0 4px}.steps p{margin:0;color:#34433c;font-size:15.5px}
.need{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;position:sticky;top:84px}
.need h3{display:flex;gap:8px;align-items:center;margin-bottom:2px}
.chk{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px dashed var(--line);cursor:pointer;font-size:15px}
.chk input{width:18px;height:18px;margin-top:3px;accent-color:var(--pri)}
.chk input:checked+span{text-decoration:line-through;color:var(--muted)}
.errs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.err{display:flex;gap:12px;background:#fff7e8;border:1px solid #f0dcb4;border-radius:14px;padding:14px}
.err .ic{color:var(--warn);width:22px;height:22px}
.err p{margin:0;font-size:15px}
.err.leg{background:#fff;border-color:var(--line)}.err.leg .ic{color:var(--pri)}
.safety{display:flex;gap:14px;background:#eef5f1;border:1px solid #cfe3d8;border-radius:var(--r);padding:18px;margin-top:16px}
.safety>.ic{width:30px;height:30px;color:var(--pri)}
.safety p{margin:0}
.sups{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.sup{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;border-left:4px solid var(--c,var(--pri2))}
.sup-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.sup h4{margin-bottom:6px}
.sup p{font-size:15px;color:#34433c;flex:1}
.sup-f{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;font-size:14px}
.sup-f a{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.sup-f .ic{width:15px;height:15px}
.note{background:#fff;border:1px dashed var(--line);border-radius:14px;padding:16px;color:var(--muted)}
.src ul{padding-left:18px;font-size:14px;word-break:break-all}
.prose{max-width:820px}.prose li{margin-bottom:8px}

/* trends */
.trend{padding:22px}
.tr-h{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.tr-h .ic{width:34px;height:34px;color:#4a3f8f;flex:none}
.tr-h h3{margin:0}
.lead-s{color:#34433c}
details{border-top:1px solid var(--line);padding:8px 0}
summary{cursor:pointer;font-weight:600;color:#4a3f8f}
details p{margin:8px 0 0;font-size:15px}
.when{display:flex;gap:10px;background:#f1effa;border-radius:12px;padding:12px;margin:12px 0}
.when .ic{color:#4a3f8f}.when p{margin:0;font-size:15px}
.timeline{list-style:none;margin:0;padding:0;display:flex;gap:0;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory}
.timeline li{flex:0 0 210px;scroll-snap-align:start;position:relative;padding:28px 14px 0 0}
.timeline li::before{content:"";position:absolute;top:8px;left:0;right:0;height:3px;background:#d8d4ef}
.timeline li::after{content:"";position:absolute;top:2px;left:0;width:15px;height:15px;border-radius:50%;background:#4a3f8f;border:3px solid #fff}
.timeline b{font-size:20px;color:#4a3f8f}
.timeline p{font-size:14.5px;margin:4px 0 0}

/* footer */
.foot{background:#17352b;color:#cfe0d7;margin-top:40px;padding:40px 0 20px}
.foot-in{display:grid;grid-template-columns:2fr 1.2fr 1fr;gap:30px}
.foot .logo{color:#fff}.foot .logo b{color:var(--acc)}
.foot .muted{color:#a9c0b4}
.foot h4{color:#fff}
.foot a{display:block;color:#cfe0d7;text-decoration:none;padding:3px 0;font-size:15px}
.foot a.logo{display:flex}
.foot a:hover{color:#fff}
.foot-note{border-top:1px solid #2c5244;margin-top:24px;padding-top:16px;font-size:13.5px;color:#a9c0b4}

/* ---------- GAME ---------- */
.game{scroll-margin-top:90px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh);overflow:hidden}
.g-start{display:grid;grid-template-columns:1fr 220px;gap:20px;padding:28px;align-items:center;background:linear-gradient(135deg,#eaf5d0,#fff)}
.g-start h3{font-size:24px}
.g-body{display:grid;grid-template-columns:1fr 260px}
.g-main{padding:24px;min-width:0}
.g-side{background:#f8f7f2;border-left:1px solid var(--line);padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.g-prog{display:flex;gap:6px;margin-bottom:16px}
.g-prog i{flex:1;height:6px;border-radius:4px;background:#e7e5da}
.g-prog i.done{background:var(--pri2)}.g-prog i.cur{background:var(--acc)}
.g-step h4{font-size:20px;margin-bottom:4px}
.g-help{color:var(--muted);font-size:15px}
.g-ings{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0}
.g-ing{font:inherit;font-size:14.5px;text-align:left;border:2px solid var(--line);background:#fff;border-radius:14px;padding:12px;cursor:pointer;display:flex;gap:8px;align-items:center;transition:all .15s}
.g-ing:hover{border-color:#bcd99a}
.g-ing.on{border-color:var(--pri2);background:#eef7e6}
.g-ing .box{width:20px;height:20px;border-radius:6px;border:2px solid #c9c7bb;flex:none;display:grid;place-items:center}
.g-ing.on .box{background:var(--pri2);border-color:var(--pri2)}
.g-ing.on .box::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.g-sl{margin:18px 0}
.g-sl-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.g-val{font-size:28px;font-weight:700;color:var(--pri)}
.g-sl input[type=range]{width:100%;height:36px;accent-color:var(--pri2)}
.g-scale{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.g-opts{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.g-opt{font:inherit;font-size:15px;text-align:left;border:2px solid var(--line);background:#fff;border-radius:14px;padding:12px 14px;cursor:pointer}
.g-opt.on{border-color:var(--pri2);background:#eef7e6}
.g-nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px;flex-wrap:wrap}
.g-hint{font-size:14px;color:var(--muted);margin-top:8px}
.g-hint a{font-weight:600}
.vessel{width:170px;height:190px}
.vessel .liq{transition:fill 1s,y 1s,height 1s}
.v-lbl{font-size:13px;color:var(--muted);text-align:center}
.g-meters{display:flex;gap:10px;width:100%}
.g-meter{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;text-align:center}
.g-meter small{display:block;font-size:11.5px;color:var(--muted)}
.g-meter b{font-size:16px}
.g-inlist{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.g-inlist span{font-size:12px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--ink)}
@keyframes drop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.bub{animation:rise 2.2s linear infinite;opacity:0}
@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:.8}100%{transform:translateY(-90px);opacity:0}}
.g-run{padding:28px;text-align:center}
.g-run .vessel{width:200px;height:220px}
.g-bar{height:12px;background:#efeee5;border-radius:8px;overflow:hidden;max-width:420px;margin:14px auto}
.g-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pri2),var(--acc));transition:width .3s linear}
.g-phase{min-height:52px;font-size:16px;max-width:520px;margin:0 auto}
.g-res{padding:26px}
.g-res-h{display:flex;gap:18px;align-items:center;margin-bottom:16px}
.g-badge{width:84px;height:84px;border-radius:24px;display:grid;place-items:center;flex:none}
.g-badge .ic{width:48px;height:48px}
.g-badge.win{background:#e3f3d4;color:var(--ok)}.g-badge.lose{background:#fbe3dd;color:var(--bad)}
.g-stars{display:flex;gap:4px}
.g-stars svg{width:26px;height:26px}
.g-fb{list-style:none;padding:0;margin:0 0 16px}
.g-fb li{display:flex;gap:10px;padding:10px 12px;border-radius:12px;margin-bottom:8px;font-size:15px}
.g-fb li.ok{background:#eef7e6}.g-fb li.ok .ic{color:var(--ok)}
.g-fb li.warn{background:#fff7e8}.g-fb li.warn .ic{color:var(--warn)}
.g-fb li.fail{background:#fdeeea}.g-fb li.fail .ic{color:var(--bad)}
.g-fb b{display:block}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-10px;width:8px;height:12px;animation:fall 2.5s ease-in forwards}
@keyframes fall{to{transform:translateY(420px) rotate(540deg);opacity:0}}

/* responsive */
@media (max-width:1000px){
 .hh,.ha{grid-template-columns:1fr}
 .grid3{grid-template-columns:repeat(2,1fr)}
 .grid4{grid-template-columns:repeat(2,1fr)}
 .facts{grid-template-columns:repeat(2,1fr)}
 .tlayout{grid-template-columns:1fr}
 .toc{display:none}
 .search{width:200px}
}
@media (max-width:820px){
 .menu-btn{display:block}
 .nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;flex-direction:column;padding:10px 16px;border-bottom:1px solid var(--line)}
 .nav.open{display:flex}
 .search{position:absolute;top:64px;left:0;right:0;width:auto;padding:8px 16px;background:var(--bg);border-bottom:1px solid var(--line)}
 .search .s-ic{left:26px;top:18px}
 .s-res{left:16px;right:16px;width:auto;top:54px}
 .top{margin-bottom:57px}
 .grid2,.sups,.errs,.pc,.nv{grid-template-columns:1fr}
 .need{position:static}
 .flow{flex-direction:column}
 .fl-arr{transform:rotate(90deg);height:24px}
 .g-body,.g-start{grid-template-columns:1fr}
 .g-side{border-left:0;border-top:1px solid var(--line);order:-1;flex-direction:row;flex-wrap:wrap;justify-content:center}
 .g-side .vessel{width:110px;height:124px}
 .g-meters{width:auto;flex:1;min-width:180px}
 .eq-row{flex-wrap:wrap}.eq-b{flex:1 1 40%}.eq-row>b{display:none}
 .foot-in{grid-template-columns:1fr}
 .trend-card{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
 .grid3,.grid4,.facts{grid-template-columns:1fr}
 .ht{flex-direction:column}
 .bar{grid-template-columns:110px 1fr 20px}
 .tcard{flex-direction:column;gap:4px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}