:root{
  --bg:#f5f5f7; --surface:#ffffff; --surface2:#fbfbfd; --text:#1d1d1f; --text2:#6e6e73; --text3:#86868b;
  --line:rgba(0,0,0,.09); --fill:rgba(0,0,0,.045); --fill2:rgba(0,0,0,.08);
  --accent:#0071e3; --accent-soft:rgba(0,113,227,.12); --ok:#1d8f4e; --warn:#b25e00;
  --bar:rgba(251,251,253,.72); --stage:#ececf0; --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.06);
  --plan-room:#ffffff; --plan-room-hover:#fafafc; --plan-line:#c7c7cc; --plan-wall:#3a3a3c; --plan-service:#efeff2; --plan-text:#aeaeb2; --plan-screen:#30b0c7;
  --k-display:#0071e3; --k-room:#8e44d9; --k-lounge:#e8860c; --k-floor:#0f9db5; --k-passage:#9a7b52; --k-entry:#28a745;
  --plan-detail:#b8b8bd; --plan-furn:#f2f2f5; --plan-pass:#f4f1ec; --plan-zone:rgba(0,113,227,.035); --plan-zone-line:rgba(0,113,227,.35); --accent-soft2:rgba(0,113,227,.2);
  --r-lg:22px; --r-md:16px; --r-sm:11px;
  --spring:cubic-bezier(.34,1.4,.64,1); --ease:cubic-bezier(.2,.8,.2,1);
  --side:320px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#000; --surface:#1c1c1e; --surface2:#161618; --text:#f5f5f7; --text2:#a1a1a6; --text3:#8e8e93;
  --line:rgba(255,255,255,.1); --fill:rgba(255,255,255,.06); --fill2:rgba(255,255,255,.11);
  --accent:#2997ff; --accent-soft:rgba(41,151,255,.18); --ok:#30d158; --warn:#ff9f0a;
  --bar:rgba(22,22,24,.72); --stage:#0e0e10; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  --plan-room:#232326; --plan-room-hover:#28282b; --plan-line:#48484a; --plan-wall:#c7c7cc; --plan-service:#2a2a2c; --plan-text:#636366; --plan-screen:#40c8e0;
  --k-display:#2997ff; --k-room:#bf5af2; --k-lounge:#ff9f0a; --k-floor:#40c8e0; --k-passage:#c4a77d; --k-entry:#30d158;
  --plan-detail:#4a4a4e; --plan-furn:#2a2a2d; --plan-pass:#1a1a1c; --plan-zone:rgba(41,151,255,.06); --plan-zone-line:rgba(41,151,255,.45); --accent-soft2:rgba(41,151,255,.28);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
html{overflow-x:clip}
body{background:var(--bg);color:var(--text);font:15px/1.47 -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable Text","Segoe UI","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px;border-radius:10px}
img{display:block;max-width:100%}
h1,h2,h3{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",sans-serif;letter-spacing:-.025em}

/* Toolbar */
.bar{position:sticky;top:0;z-index:40;height:56px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 20px;
  background:var(--bar);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;justify-self:start;padding:6px 8px;border-radius:10px}
.brand:hover{background:var(--fill)}
.mark{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 0 0 1px var(--line)}
.mark img{width:26px;height:26px}
.herologo{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.herologo .mark{width:56px;height:56px}.herologo .mark img{width:50px;height:50px}
.herologo b{font-size:15px;font-weight:600;display:block}.herologo span{font-size:13px;color:var(--text2)}
.brand small{color:var(--text2);font-weight:400}
.byline{display:flex;align-items:center;gap:10px;margin-left:auto;padding-left:18px;border-left:1px solid var(--line)}
.byline small{font-size:12px;color:var(--text2)}
.byline img{height:26px;width:auto;display:block}
.kixr{display:inline-flex;align-items:center;gap:6px;padding:0 6px;opacity:.9}
.kixr small{font-size:11px;color:var(--text3)}
.kixr img{height:16px;width:auto;display:block}
@media (max-width:720px){ .kixr{display:none} .herologo{flex-wrap:wrap} .byline{margin-left:0;padding-left:0;border-left:0;width:100%} }
.seg{display:flex;background:var(--fill2);border-radius:10px;padding:2px;position:relative}
.seg button{position:relative;z-index:1;padding:6px 16px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;transition:color .2s}
.seg .thumb{position:absolute;top:2px;bottom:2px;border-radius:8px;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);transition:left .45s var(--spring),width .45s var(--spring)}
:root[data-theme="dark"] .seg .thumb{background:#636366}
.tools{justify-self:end;display:flex;align-items:center;gap:8px}
.icon-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--text2)}
.icon-btn:hover{background:var(--fill);color:var(--text)}
.icon-btn svg{width:18px;height:18px}
.count{font-size:13px;color:var(--text2);font-variant-numeric:tabular-nums;padding:5px 10px;border-radius:20px;background:var(--fill)}
.count b{color:var(--text);font-weight:600}

/* Shell */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);gap:28px;max-width:1500px;margin:0 auto;padding:24px 28px 60px}
.side{position:sticky;top:80px;align-self:start;max-height:calc(100vh - 96px);display:flex;flex-direction:column;gap:14px}
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.mapcard{padding:14px 14px 12px}
.maphead{display:flex;justify-content:space-between;align-items:baseline;padding:2px 4px 8px}
.maphead span{font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.06em}
.maphead em{font-style:normal;font-size:12px;color:var(--text3);margin-left:auto;margin-right:8px}
.maphead{align-items:center}
.minbtn{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--text2);background:var(--fill);flex:none;transition:transform .3s var(--spring),background .2s}
.minbtn:hover{background:var(--fill2);color:var(--text)}
.minbtn:active{transform:scale(.9)}
.minbtn svg{width:14px;height:14px}
.mappill{display:none;align-items:center;gap:10px;height:48px;padding:0 8px 0 8px;border-radius:999px;background:var(--bar);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);
  box-shadow:0 10px 36px rgba(0,0,0,.18),inset 0 0 0 1px var(--line);font-size:13.5px;animation:pop .5s var(--spring);max-width:calc(100vw - 32px)}
.mappill .pmap{width:54px;height:40px;flex:none;border-radius:8px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.mappill .pmap svg{width:100%;height:100%}
.mappill .ptx{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;min-width:0}
.mappill .ptx small{font-size:11.5px;color:var(--text2)}
.mappill .ptx b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.mappill .up{width:30px;height:30px;border-radius:50%;background:var(--fill);display:grid;place-items:center;color:var(--text2);flex:none}
.mappill .up svg{width:14px;height:14px}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
.mapcard{animation:pop .5s var(--spring)}
body.map-min .shell{grid-template-columns:minmax(0,1fr)}
body.map-min .side{position:fixed;top:auto;left:20px;right:auto;bottom:20px;z-index:50;width:auto;max-height:none}
body.map-min .mapcard,body.map-min .zlistcard{display:none}
body.map-min .mappill{display:flex}
body.map-min .zstrip{display:flex}
body.map-min .shell{padding-bottom:100px}
#map{width:100%;height:auto;display:block;touch-action:manipulation}
.mapcap{display:flex;align-items:center;gap:8px;min-height:22px;padding:8px 4px 0;font-size:13px;color:var(--text2)}
.mapcap b{color:var(--text);font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}

/* Plan drawing: strokes keep their pixel width at any size, so the plan stays crisp */
.plan{--w-wall:2.2px;--w-part:1.4px;--w-line:3px;--w-hit:14px;--w-zone:1px;shape-rendering:geometricPrecision}
.bigplan .plan{--w-wall:4px;--w-part:2.5px;--w-line:6px;--w-hit:26px;--w-zone:1.5px}
.plan path,.plan rect{vector-effect:non-scaling-stroke}
.p-service{fill:var(--plan-service);stroke:var(--plan-service);stroke-width:6px;stroke-linejoin:round}
.p-label{fill:var(--plan-text);font-size:44px;font-weight:500;text-anchor:middle;dominant-baseline:middle;pointer-events:none;letter-spacing:0}
.mapcard .p-label{display:none}
.p-wall{fill:none;stroke:var(--plan-wall);stroke-width:var(--w-part);stroke-linecap:round;pointer-events:none}
.p-col{fill:var(--plan-wall);pointer-events:none}
.p-core{fill:var(--plan-wall);pointer-events:none}
.p-entr{fill:var(--k-entry)}
.k-whole{--k:var(--text2)}.k-display{--k:var(--k-display)}.k-room{--k:var(--k-room)}.k-lounge{--k:var(--k-lounge)}.k-floor{--k:var(--k-floor)}.k-passage{--k:var(--k-passage)}.k-entry{--k:var(--k-entry)}
.z{cursor:pointer;outline:none}
.z.room{fill:var(--plan-room);stroke:var(--plan-wall);stroke-width:var(--w-wall);stroke-linejoin:round;transition:fill .35s}
.z.room:hover{fill:var(--plan-room-hover)}
.z.room.on{fill:var(--accent-soft)}
.z.area{fill:color-mix(in srgb,var(--k) 12%,transparent);stroke:color-mix(in srgb,var(--k) 60%,transparent);stroke-width:var(--w-zone);stroke-linejoin:round;transition:fill .3s var(--ease),stroke-width .3s}
.z.area:hover,.z.area.hov{fill:color-mix(in srgb,var(--k) 24%,transparent)}
.z.area.on{fill:color-mix(in srgb,var(--k) 32%,transparent);stroke:var(--k);stroke-width:calc(var(--w-zone) * 2.2)}
.z.line .vis{fill:none;stroke:var(--k);stroke-width:var(--w-line);stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:opacity .3s,stroke-width .3s}
.z.line .hit{fill:none;stroke:transparent;stroke-width:var(--w-hit);stroke-linecap:round}
.z.line:hover .vis,.z.line.hov .vis{opacity:1}
.z.line.on .vis{opacity:1;stroke-width:calc(var(--w-line) * 1.7)}
.z:focus-visible.area{stroke:var(--k);stroke-width:calc(var(--w-zone) * 3)}
.badge{cursor:pointer}
.badge circle{fill:var(--surface);stroke:var(--k);stroke-width:5;transition:fill .3s,stroke .3s}
.badge text{fill:var(--k);font-size:50px;font-weight:700;text-anchor:middle;dominant-baseline:central;letter-spacing:-1px}
.badge path{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.badge:hover circle{fill:color-mix(in srgb,var(--k) 18%,var(--surface))}
.badge.done circle{fill:var(--ok);stroke:var(--ok)}
.badge.done path{opacity:1}.badge.done text{opacity:0}
.badge.on circle{fill:var(--k);stroke:var(--k)}
.badge.on text{fill:#fff}
.badge path,.badge circle{vector-effect:none}

/* Large plan (overview and summary) */
.bigplan{position:relative;background:var(--surface);border-radius:28px;box-shadow:var(--shadow);padding:28px 28px 22px;margin-top:28px}
.bigplan .bp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.bigplan h2{font-size:24px;font-weight:600}
.bigplan .bp-sub{color:var(--text2);font-size:14px;margin-top:2px}
.roomchips{display:flex;gap:8px;flex-wrap:wrap}
.rchip{display:flex;flex-direction:column;align-items:flex-start;padding:8px 14px;border-radius:14px;background:var(--fill);text-align:left;transition:background .2s,transform .3s var(--spring)}
.rchip:hover{background:var(--fill2)}.rchip:active{transform:scale(.97)}
.rchip small{font-size:11.5px;color:var(--text2)}
.rchip b{font-size:13.5px;font-weight:600}
.rchip.done b{color:var(--ok)}
.bp-stage{position:relative}
.bp-stage svg{width:100%;height:auto;display:block}
.pin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--bar);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);box-shadow:0 4px 18px rgba(0,0,0,.12),inset 0 0 0 1px var(--line);white-space:nowrap;text-align:left;
  transition:transform .4s var(--spring),box-shadow .2s}
.pin:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 8px 26px rgba(0,0,0,.18),inset 0 0 0 1.5px var(--accent)}
.pin .pn{min-width:24px;height:24px;padding:0 6px;border-radius:12px;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--k);color:#fff;flex:none}
.pin.done .pn{background:var(--ok);color:#fff}
.pin .pn svg{width:12px;height:12px}
.pin .pt{display:flex;flex-direction:column;line-height:1.15}
.pin .pt b{font-size:13px;font-weight:600}
.pin .pt small{font-size:11.5px;color:var(--text2)}
.pin.soon .pt small{color:var(--text3)}
.pin.hl{box-shadow:0 8px 26px rgba(0,0,0,.18),inset 0 0 0 1.5px var(--k)}
.pin.done .pt small{color:var(--ok)}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--text2)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{display:inline-block;width:18px;height:4px;border-radius:2px}
.legend i.sq{width:10px;height:10px;border-radius:2px}
.legend i.zn{width:12px;height:12px;border-radius:4px;background:color-mix(in srgb,var(--k) 25%,transparent);box-shadow:inset 0 0 0 1.5px var(--k)}
html[data-view="home"] .mapcard,html[data-view="summary"] .mapcard{display:none}
@media (max-width:1080px){ html[data-view="home"] .side,html[data-view="summary"] .side{display:none} }
@media (max-width:720px){ .pin .pt{display:none} .pin{padding:4px} .bigplan{padding:18px 14px 16px;border-radius:22px} }

/* Zone list */
.zlist{padding:8px;overflow:auto}
.zprog{padding:8px 10px 12px}
.zprog .t{display:flex;justify-content:space-between;font-size:13px;color:var(--text2)}
.zprog .t b{color:var(--text)}
.track{height:4px;border-radius:4px;background:var(--fill2);margin-top:8px;overflow:hidden}
.track i{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .6s var(--spring)}
.zgroup{font-size:11.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;padding:12px 10px 4px}
.zrow .num{color:var(--k,var(--text2));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--k,#888) 55%,transparent)}
.zrow.soon .ztext span{color:var(--text3)}
.zrow{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border-radius:12px;text-align:left;transition:background .2s}
.zrow:hover{background:var(--fill)}
.zrow.on{background:var(--accent-soft)}
.num{min-width:24px;height:24px;padding:0 4px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--text2);box-shadow:inset 0 0 0 1.5px var(--fill2);transition:background .3s,color .3s}
.zrow.done .num{background:var(--ok);color:#fff;box-shadow:none}
.zrow.on .num{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.zrow.on.done .num{background:var(--accent);color:#fff;box-shadow:none}
.num svg{width:12px;height:12px}
.ztext{min-width:0;flex:1}
.ztext b{display:block;font-weight:500;font-size:14px}
.ztext span{display:block;font-size:12.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Main views */
main{min-width:0}
.view{animation:rise .55s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.eyebrow{font-size:13px;font-weight:600;color:var(--accent);letter-spacing:0;margin-bottom:6px}
.h1{font-size:44px;line-height:1.08;font-weight:700}
.lede{font-size:19px;line-height:1.42;color:var(--text2);margin:10px 0 0;max-width:46em}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:6px 0 24px}
.btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:500;transition:transform .3s var(--spring),background .2s,opacity .2s;white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{opacity:.9}
.btn.ghost{background:var(--fill2)}
.btn.ghost:hover{background:var(--fill)}
.btn.link{padding:0;height:auto;color:var(--accent)}
.btn.link:hover{text-decoration:underline}
.btn svg{width:15px;height:15px}

/* Stage */
.stage{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--stage);aspect-ratio:16/9;max-height:68vh;width:100%;user-select:none;touch-action:pan-y}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
.stage .nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.78);color:#1d1d1f;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 10px rgba(0,0,0,.12);opacity:0;transition:opacity .25s,transform .3s var(--spring)}
.stage:hover .nav{opacity:1}
.stage .nav:active{transform:translateY(-50%) scale(.92)}
.stage .prev{left:16px}.stage .next{right:16px}
.stage .nav svg{width:18px;height:18px}
.stage .full{position:absolute;right:14px;top:14px;opacity:1;transform:none;width:36px;height:36px}
.stage .full:active{transform:scale(.92)}
.capbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 4px 0;min-height:40px}
.capbar p{margin:0;color:var(--text2);font-size:14px}
.dots{display:flex;gap:7px;flex:none}
.dots button{width:7px;height:7px;border-radius:50%;background:var(--fill2);transition:width .4s var(--spring),background .2s}
.dots button.on{width:22px;border-radius:4px;background:var(--text)}
.ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;color:var(--text3);font-size:14px;text-align:center}
.ph svg{width:44px;height:44px;opacity:.6}
.ph b{color:var(--text2);font-weight:600;font-size:17px}

/* Option cards */
.sectitle{font-size:22px;font-weight:600;margin:34px 0 4px}
.secsub{color:var(--text2);margin:0 0 16px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.opt{position:relative;text-align:left;background:var(--surface);border-radius:var(--r-md);padding:14px;box-shadow:inset 0 0 0 1px var(--line);
  display:flex;flex-direction:column;gap:12px;transition:box-shadow .3s var(--ease),transform .4s var(--spring)}
.opt:hover{box-shadow:inset 0 0 0 1px var(--text3)}
.opt:active{transform:scale(.985)}
.opt.chosen{box-shadow:inset 0 0 0 2px var(--accent)}
.opt.viewing:not(.chosen){box-shadow:inset 0 0 0 1px var(--text3)}
.opt .thumb{aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--stage);position:relative}
.opt .thumb img{width:100%;height:100%;object-fit:cover}
.opt .thumb .ph{font-size:12px;gap:6px}.opt .thumb .ph svg{width:26px;height:26px}
.opt .code{font-size:12px;font-weight:600;color:var(--text2)}
.opt h3{font-size:17px;font-weight:600;margin-top:1px}
.opt p{margin:4px 0 0;color:var(--text2);font-size:13.5px;line-height:1.4}
.opt .foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.pick{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--accent)}
.opt.chosen .pick{color:var(--accent)}
.radio{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--text3);display:grid;place-items:center;transition:all .35s var(--spring)}
.opt.chosen .radio{background:var(--accent);box-shadow:none}
.radio svg{width:11px;height:11px;color:#fff;opacity:0;transform:scale(.4);transition:all .35s var(--spring)}
.opt.chosen .radio svg{opacity:1;transform:none}
.cmp-tog{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text2);padding:4px 9px 4px 6px;border-radius:999px}
.cmp-tog:hover{background:var(--fill)}
.box{width:16px;height:16px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--text3);display:grid;place-items:center;transition:all .25s}
.box svg{width:10px;height:10px;color:#fff;opacity:0}
.cmp-tog.on .box{background:var(--accent);box-shadow:none}.cmp-tog.on .box svg{opacity:1}
.cmp-tog.on{color:var(--accent)}

/* Detail */
.detail{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-top:16px}
.panel{background:var(--surface);border-radius:var(--r-md);padding:20px 22px;box-shadow:inset 0 0 0 1px var(--line)}
.panel h4{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em}
.specs{margin:0}
.specs div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:11px 0;border-top:1px solid var(--line)}
.specs div:first-child{border-top:0;padding-top:0}
.specs dt{color:var(--text2);font-size:14px}
.specs dd{margin:0;font-size:14.5px}
.pairs{display:flex;flex-direction:column;gap:8px}
.pair{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--fill);text-align:left;width:100%;transition:background .2s}
.pair:hover{background:var(--fill2)}
.pair .pz{font-size:12px;color:var(--text2)}
.pair .po{font-weight:500;font-size:14px}
.pair .st{margin-left:auto;font-size:12px;font-weight:500;white-space:nowrap}
.st.ok{color:var(--ok)}.st.diff{color:var(--warn)}.st.none{color:var(--text3)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:12px;padding:6px 0;font-size:14px}
.steps li::before{content:counter(s);width:22px;height:22px;border-radius:50%;background:var(--fill2);display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.sw{display:flex;gap:12px;flex-wrap:wrap}
.sw div{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--text2);width:64px;text-align:center}
.sw i{width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}
.stack{display:flex;flex-direction:column;gap:16px}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line)}
.pager button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border-radius:14px;text-align:left;max-width:48%}
.pager button:hover{background:var(--fill)}
.pager button.nx{align-items:flex-end;text-align:right;margin-left:auto}
.pager small{font-size:12px;color:var(--text2)}
.pager span{font-size:17px;font-weight:600;color:var(--accent)}

.soonbox{border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);padding:46px 30px;display:grid;justify-items:center;gap:10px;text-align:center}
.soonbox svg{width:52px;height:52px;color:var(--k,var(--text3));opacity:.8}
.soonbox b{font-size:22px;font-weight:600}
.soonbox p{margin:0;color:var(--text2);max-width:34em}
.soonmini{display:flex;flex-wrap:wrap;gap:8px}

/* Plan detail */
.p-detail{fill:none;stroke:var(--plan-detail);stroke-width:1px;stroke-linecap:round;pointer-events:none}
.p-furn{fill:var(--plan-furn);stroke:var(--plan-detail);stroke-width:1px;pointer-events:none}
.p-note{fill:var(--text3);font-size:34px;font-weight:500;text-anchor:middle;dominant-baseline:middle;pointer-events:none;letter-spacing:.5px}
.mapcard .p-note,#pmap .p-note{display:none}
.mapcard .p-detail{opacity:.6}

/* Slider compare inside a zone */
.modebar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.modeseg{display:inline-flex;background:var(--fill2);border-radius:10px;padding:2px}
.modeseg button{padding:6px 16px;border-radius:8px;font-size:13px;font-weight:500;transition:background .25s,box-shadow .25s}
.modeseg button.on{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12)}
:root[data-theme="dark"] .modeseg button.on{background:#636366}
.slider{position:relative;aspect-ratio:16/9;max-height:70vh;width:100%;border-radius:var(--r-lg);overflow:hidden;background:var(--stage);--pos:50%;user-select:none;touch-action:pan-y}
.slider .sl-side{position:absolute;inset:0}
.slider .sl-side img{width:100%;height:100%;object-fit:cover}
.slider .sl-side.a{clip-path:inset(0 calc(100% - var(--pos)) 0 0);z-index:1}
.slider .sl-side .ph{background:var(--stage)}
.sl-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.35);z-index:2;pointer-events:none}
.sl-knob{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.92);color:#1d1d1f;box-shadow:0 2px 12px rgba(0,0,0,.28);display:grid;place-items:center}
.sl-knob svg{width:22px;height:22px}
.sl-tag{position:absolute;top:14px;z-index:3;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:600;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none;max-width:44%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-tag.l{left:14px}.sl-tag.r{right:14px}
.sl-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.pickers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 4px}
.pickers .pk{display:flex;flex-direction:column;gap:8px}
.pickers .pk small{font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em}
.pickers .pk:last-child{align-items:flex-end}
.pickers .chips{gap:6px}
.pickers .pk:last-child .chips{justify-content:flex-end}
.vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:12px;margin:0 0 12px}
.vs-side{display:flex;flex-direction:column;gap:8px;min-width:0}
.vs-side:last-child{align-items:flex-end}
.vs-lab{font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em}
.vs-chips{display:flex;gap:8px;overflow-x:auto;max-width:100%;padding:3px;scrollbar-width:none}
.vs-chips::-webkit-scrollbar{display:none}
.vs-chip{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px 4px 6px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,opacity .2s,transform .15s}
.vs-chip:active{transform:scale(.96)}
.vs-chip .vs-th{width:76px;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--stage)}
.vs-chip .vs-th img{width:100%;height:100%;object-fit:cover}
.vs-chip .vs-th .ph span{display:none}.vs-chip .vs-th .ph svg{width:18px;height:18px}
.vs-chip span{font-size:12.5px;font-weight:600;color:var(--text2);max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-chip.on{box-shadow:inset 0 0 0 2px var(--accent)}
.vs-chip.on span{color:var(--accent)}
.vs-chip.off{opacity:.45}
.vs-mid{align-self:center;margin-top:20px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--fill2);font-size:12px;font-weight:700;color:var(--text2)}
@media (max-width:640px){.vs{grid-template-columns:1fr}.vs-mid{display:none}.vs-side:last-child{align-items:flex-start}}
.csides{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:12px}
.cside{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border-radius:var(--r-md);padding:12px 14px;box-shadow:inset 0 0 0 1px var(--line)}
.cside div{display:flex;flex-direction:column;min-width:0}
.cside b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cside span{font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cside .btn{flex:none;height:34px;padding:0 16px;font-size:13.5px}
.opt.incmp{box-shadow:inset 0 0 0 2px var(--text3)}
.opt.chosen{box-shadow:inset 0 0 0 2px var(--accent)}
.sidebadge{font-size:12px;font-weight:600;color:var(--text2);background:var(--fill2);padding:3px 10px;border-radius:999px}
.opt{cursor:pointer}
@media (max-width:720px){ .csides{grid-template-columns:minmax(0,1fr)} }

/* Zones waiting on images */
.where{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.where figure{margin:0;background:var(--surface);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.where svg{display:block;width:100%;height:auto;background:var(--plan-service)}
.where figcaption{padding:10px 14px;font-size:13px;color:var(--text2)}
.where .cad image{opacity:.95}
.where .cad .hl{fill:color-mix(in srgb,var(--k) 18%,transparent);stroke:var(--k);stroke-width:3px;vector-effect:non-scaling-stroke}
.where .cad .hl-line{fill:none;stroke:var(--k);stroke-width:6px;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.85}
@media (max-width:720px){ .where{grid-template-columns:1fr} .pickers{grid-template-columns:1fr} .pickers .pk:last-child{align-items:flex-start} .pickers .pk:last-child .chips{justify-content:flex-start} }

/* Compare */
.toolbar2{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 9px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:500;transition:all .25s}
.chip.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
.chip.on .box{background:var(--accent);box-shadow:none}.chip.on .box svg{opacity:1}
.switch{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--text2)}
.switch i{width:44px;height:26px;border-radius:13px;background:var(--fill2);position:relative;transition:background .3s}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:transform .4s var(--spring)}
.switch.on i{background:var(--ok)}
.switch.on i::after{transform:translateX(18px)}
.cmp{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow-x:auto}
.cmp-grid{display:grid;min-width:640px}
.cmp-col{padding:20px 18px;display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--line)}
.cmp-col:first-child{border-left:0}
.cmp-col .thumb{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--stage);position:relative;cursor:zoom-in}
.cmp-col .thumb img{width:100%;height:100%;object-fit:cover}
.cmp-col h3{font-size:19px;font-weight:600}
.cmp-col p{margin:0;color:var(--text2);font-size:13.5px}
.cmp-col .btn{align-self:flex-start;height:32px;padding:0 14px;font-size:13px}
.cmp-row{display:contents}
.cmp-row .lab{grid-column:1/-1;padding:16px 18px 2px;font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;border-top:1px solid var(--line)}
.cmp-row .val{padding:4px 18px 16px;font-size:14.5px;border-left:1px solid var(--line)}
.cmp-row .val.first{border-left:0}
.cmp-row .val.same{color:var(--text2)}
.cmp-row .val.mine{color:var(--accent);font-weight:500}
.cmp-row .val .tag{display:inline-block;font-size:11px;font-weight:600;color:var(--text2);margin-right:6px}
.empty{padding:40px;text-align:center;color:var(--text2)}

/* Home */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:20px 0 6px}
.hero .h1{font-size:56px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:30px 0 8px}
.fact{background:var(--surface);border-radius:var(--r-md);padding:18px 20px;box-shadow:inset 0 0 0 1px var(--line)}
.fact b{font-size:30px;font-weight:600;letter-spacing:-.03em}
.fact b small{font-size:15px;font-weight:500;color:var(--text2);margin-left:4px;letter-spacing:0}
.fact span{display:block;color:var(--text2);font-size:13.5px}
.dirs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.dir{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;text-align:left;transition:transform .45s var(--spring)}
.dir:hover{transform:translateY(-3px)}
.dir .thumb{aspect-ratio:16/9;background:var(--stage);overflow:hidden}
.dir .thumb img{width:100%;height:100%;object-fit:cover}
.dir .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.dir h3{font-size:19px;font-weight:600}
.dir p{margin:0;color:var(--text2);font-size:14px}
.dir ul{margin:6px 0 0;padding:0;list-style:none;font-size:13px;color:var(--text2)}
.dir li{padding:3px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px}
.dir li b{font-weight:500;color:var(--text);text-align:right}
.dir .act{margin-top:12px}
.howto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.how{text-align:left;transition:box-shadow .2s,transform .3s var(--spring);display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--text2)}
.how:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.how:active{transform:scale(.98)}
.how b{display:block;color:var(--text);font-weight:600;margin-bottom:2px}
.how .n{width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:600;flex:none}

/* Directions table */
.dtab .cmp-col{gap:8px}
.dtab .meter{font-size:12.5px;color:var(--text2)}
.dtab .val .oname{display:block;font-weight:500}
.dtab .val .ocode{font-size:12px;color:var(--text2)}
.dtab .val.match{color:var(--ok)}
.dtab .mineCol{background:var(--accent-soft)}

/* Summary */
.sum{display:flex;flex-direction:column;gap:12px}
.srow{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:18px;align-items:center;background:var(--surface);border-radius:var(--r-md);padding:12px;box-shadow:inset 0 0 0 1px var(--line)}
.srow .thumb{aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--stage);position:relative}
.srow .thumb img{width:100%;height:100%;object-fit:cover}
.srow .thumb .ph svg{width:22px;height:22px}.srow .thumb .ph span{display:none}
.srow .zn{font-size:12.5px;color:var(--text2)}
.srow h3{font-size:17px;font-weight:600;margin:1px 0 2px}
.srow .tl{color:var(--text2);font-size:13.5px}
.notes{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.note{display:flex;gap:8px;align-items:center;font-size:13px}
.note svg{width:14px;height:14px;flex:none}
.note.ok{color:var(--ok)}.note.diff{color:var(--warn)}
.note .btn.link{font-size:13px}
.srow.missing h3{color:var(--text3)}
.actions{display:flex;gap:10px;flex-wrap:wrap}

/* Lightbox + toast */
.lb{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.92);display:none;flex-direction:column;align-items:center;justify-content:center;padding:56px 70px 70px}
.lb.open{display:flex;animation:fade .3s var(--ease)}
.lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.lb p{color:#d2d2d7;font-size:14px;margin:16px 0 0;text-align:center}
.lb .x,.lb .nav{position:absolute;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center}
.lb .x{top:16px;right:16px}.lb .prev{left:16px;top:50%}.lb .next{right:16px;top:50%}
.lb svg{width:18px;height:18px}
.toast{position:fixed;left:50%;bottom:28px;z-index:90;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:rgba(29,29,31,.92);color:#fff;border-radius:999px;padding:10px 12px 10px 18px;font-size:14px;display:flex;gap:12px;align-items:center;backdrop-filter:blur(12px);transition:all .45s var(--spring)}
.toast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.toast button{color:#2997ff;font-weight:600;padding:4px 8px}

/* Tablet and phone: the minimap floats, always on screen */
@media (max-width:1080px){
  .shell{grid-template-columns:minmax(0,1fr);padding:20px 20px 230px}
  .side{position:fixed;top:auto;left:16px;bottom:16px;z-index:50;width:236px;max-height:none;gap:0}
  .brand small{display:none}
  .side .zlistcard{display:none}
  .mapcard{background:var(--bar);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);box-shadow:0 10px 40px rgba(0,0,0,.18),inset 0 0 0 1px var(--line);padding:10px 10px 8px}
  .maphead{padding:0 2px 6px}
  .mapcap{font-size:12.5px;padding-top:6px}
  .zstrip{display:flex !important}
  .detail{grid-template-columns:minmax(0,1fr)}
  .h1{font-size:36px}.hero .h1{font-size:44px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.zstrip{display:none;gap:8px;overflow-x:auto;margin:0 -20px 18px;padding:2px 20px 6px;scrollbar-width:none}
.zstrip::-webkit-scrollbar{display:none}
.zstrip .chip{flex:none}
.zstrip .chip.done:not(.on){color:var(--ok)}
@media (max-width:720px){
  .bar{grid-template-columns:auto 1fr auto;padding:0 10px;gap:6px}
  .brand small,.brand .bt{display:none}
  .seg{justify-self:center}.seg button{padding:5px 8px;font-size:12px}
  .count,#themeBtn{display:none}
  .side{left:auto;right:12px;bottom:12px;width:178px}
  .maphead{padding:0 0 6px}.maphead span,.maphead em{display:none}.maphead{justify-content:flex-end}
  .minbtn{position:absolute;top:8px;right:8px;z-index:2}
  .mapcard{position:relative}
  body.map-min .side{left:12px;bottom:12px}
  .shell{padding:16px 16px 200px}
  .h1{font-size:30px}.hero .h1{font-size:36px}.lede{font-size:16px}
  .head{flex-direction:column;align-items:flex-start}
  .specs div{grid-template-columns:1fr;gap:2px}
  .howto{grid-template-columns:1fr}
  .srow{grid-template-columns:88px minmax(0,1fr)}
  .srow .actions{grid-column:1/-1}
  .stage .nav{opacity:1;width:36px;height:36px}
  .lb{padding:56px 8px 70px}
}
@media print{
  .bar,.side,.actions,.pager,.toast{display:none!important}
  .shell{display:block;padding:0}
  body{background:#fff}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}