/* ═══ Mantle product page ═════════════════════════════════════════════════════════════════════
   The kit gives the fire system (tokens, nav, buttons, rows, copy chip, footer, ember edge). This
   file adds the page's own signature: Mantle's island bar, rebuilt in HTML from the real app
   (~/mantle ui/bar/bar.css, ui/bar/index.html, ui/launcher/launcher.css, and the island theme
   ui/shared/glass-light.css, light and dark). Every --lg-* value below is copied from that file;
   they are scoped to .desk and .cam so they never leak into the site's own tokens.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the island theme (glass-light.css), light ── */
.desk,.cam{
  --lg-fill:rgba(255,255,255,.45);      --lg-fill-pop:rgba(255,255,255,.88);
  --lg-edge-in:rgba(255,255,255,.62);   --lg-edge-out:rgba(11,14,26,.10);
  --lg-lip-up:inset 0 1px 0 rgba(255,255,255,.62);
  --lg-drop-up:0 -1px 1px rgba(14,18,38,.05),0 -10px 28px -12px rgba(14,18,38,.22),0 -26px 56px -28px rgba(14,18,38,.30);
  --lg-shadow:0 1px 1px rgba(14,18,38,.05),0 10px 28px -12px rgba(14,18,38,.22),0 26px 56px -28px rgba(14,18,38,.30);
  --lg-ink:#0B0E1A;  --lg-ink-2:#333A4E;  --lg-ink-3:#5B6478;   /* the real ink-3 (glass-light.css:84): the mock is a picture of the product, kept real even where a quiet line dips under 4.5:1 */
  --lg-acc:#4436E8;  --lg-acc-on:#FFFFFF;  --lg-acc-soft:rgba(68,54,232,.12);
  --lg-hover:rgba(11,14,26,.06);  --lg-press:rgba(11,14,26,.10);  --lg-tile:rgba(11,14,26,.08);  --lg-sunk:rgba(11,14,26,.05);
  --lg-warn:#8A4B00;  --lg-warn-soft:rgba(138,75,0,.10);
  --lg-r:8px;  --lg-r-pill:24px;  --lg-r-ctl:6px;  --lg-r-pop:16px;
  --lg-ease:cubic-bezier(.22,.68,.30,1);
  --lg-blur:blur(12px) saturate(150%);
  /* the REAL tints over a blurred picture (real look first): the bar's .45 (bar.css:142 ->
     glass-light.css:34) and the desktop panes' .45 (desktop.css:169). Over this dark photo the bar's date
     sits near 3:1, exactly as it does on Mantle itself; the mock does not brighten the product. */
  --mb-bar-fill:var(--lg-fill);
  --mb-pane-fill:var(--lg-fill);
  --mb-bar-drop:var(--lg-drop-up);
  --mb-knob:0 0 0 .5px rgba(14,18,38,.10),0 1px 3px rgba(14,18,38,.20);
}
/* ── the island theme, dark: Helm's real look, value for value (glass-light.css :root[data-theme=dark]) ── */
.desk[data-theme="dark"],.cam[data-theme="dark"]{
  --lg-fill:rgba(19,20,21,.83);         --lg-fill-pop:rgba(19,20,21,.83);
  --lg-edge-in:rgba(255,255,255,.07);   --lg-edge-out:rgba(255,255,255,.09);
  --lg-lip-up:inset 0 1px 0 rgba(255,255,255,.07);
  --lg-shadow:0 4px 12px rgba(0,0,0,.34),0 24px 64px rgba(0,0,0,.42);
  --lg-ink:#ececea;  --lg-ink-2:#a9aaa7;  --lg-ink-3:#75767a;   /* the real dark ink-3 (glass-light.css:290), kept real */
  --lg-r:10px;  --lg-r-pill:18px;  --lg-r-pop:14px;               /* dark radii (glass-light.css:330-334): the island's ends are 18, not a full semicircle */
  --lg-blur:blur(5px);                                           /* dark blur (glass-light.css:347) */
  --lg-acc:#9fb4cc;  --lg-acc-on:#11161c;  --lg-acc-soft:rgba(159,180,204,.14);
  --lg-hover:rgba(40,41,43,.62);  --lg-press:rgba(62,63,66,.62);  --lg-tile:rgba(40,41,43,.62);  --lg-sunk:rgba(10,11,12,.46);
  --lg-warn:#d6b874;  --lg-warn-soft:rgba(214,184,116,.14);
  --mb-pane-fill:var(--lg-fill);
  --mb-bar-fill:rgba(9,10,11,.50);      /* Helm's rail: only the .50 wash */
  --mb-bar-drop:0 0 0 transparent;      /* dark: no drop on the bar (bar.css, lane clipped-shadow) */
  --mb-knob:0 1px 3px rgba(0,0,0,.4);
}

/* ── the title block ──────────────────────────────────────────────────────────────────────── */
.mh__wrap{padding-top:clamp(96px,11vh,120px);padding-bottom:clamp(58px,7.5vh,80px)}
/* the clean box is as wide as the title's first line ("A new shell for Windows 11," is ~10.7 em), not its unwrapped width */
.mh__box{width:min(100%,max(44rem,calc(var(--t-h1-page) * 10.9)));max-width:none}
.mh__box .h1{max-width:none}
.mh__box .lede{max-width:40em}
/* Mantle's own accent, in a small dose: the M tile in its icon indigo, beside the meta line */
.mh__tag{display:inline-grid;place-items:center;width:22px;height:22px;margin-left:4px;border-radius:6px;background:var(--p-mantle);color:#fff}
.mh__tag svg{display:block}
.mh__acts{margin-top:clamp(22px,3.2vh,30px)}
.mh__spec{margin:16px 0 0;font-size:12px;line-height:1.4;color:var(--ink-2)}
.mh__risk{margin:8px 0 0;max-width:40em;font-size:13.5px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.mh__risk b{font-weight:620;color:var(--ink)}

/* ── the desk: a whole 1920 x 1080 screen, to scale, the island floating at its bottom ──────────────
   The real geometry. The reference screen is 1920 x 1080 at 125 % = 1536 x 864 DIP.
   The pill is min(1120, screen - 28) DIP wide (main.js:914-915, :1423), centred (main.js:1444), 48 tall
   (bar.css:39), 14 above the edge (main.js:916): 1120 of 1536 = 72.9 % of the width, 208 DIP (13.5 %) of
   air each side. The stage below is laid out at exactly 1536 x 864 and scaled AS ONE PIECE to the frame,
   so those proportions hold at every page width: on a phone the whole desktop shrinks, the bar never
   stretches to fill it. */
.desk-sec{position:relative;z-index:1;padding:0 0 clamp(36px,6vh,64px)}
.desk{margin:0}
.desk__screen{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:16/9;width:min(100%,calc((100svh - 150px) * 16 / 9));
  margin:0 auto;container-type:inline-size;border-radius:16px;
  background:#0a0b0d;box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .07),0 30px 80px -40px rgb(var(--shade-rgb) / .9);
  font:12.5px/1.25 var(--f-win);color:var(--lg-ink-2);-webkit-font-smoothing:antialiased}
/* k = frame width / 1536, as a plain number: tan(atan2(a, b)) = a / b. The .75 line is the fallback. */
.desk__stage{position:absolute;left:0;top:0;width:1536px;height:864px;overflow:hidden;transform-origin:0 0;
  transform:scale(.75);transform:scale(tan(atan2(100cqw,1536px)))}
.desk__wp,.desk__blur{position:absolute;inset:-24px;background:#3d6568 url(img/wp/snow-peak.jpg) 50% 70%/cover no-repeat;pointer-events:none}
/* the bar's backdrop: Mantle blurs a photograph of the strip behind the bar (.bdrop, blur 12px,
   saturate 150%) instead of using backdrop-filter. Here the blurred copy is clipped to the island.
   This layer overhangs the 1536 x 864 stage by 24 on every side (1584 x 912), so the island's box is
   re-derived in its coordinates: top 24 + 864 - 14 - 48 = 826, sides 24 + 208 = 232, bottom 24 + 14 = 38. */
.desk__blur{filter:var(--lg-blur);z-index:0;
  clip-path:inset(calc(888px - var(--mb-lift) - var(--mb-h)) calc(24px + var(--mb-side)) calc(24px + var(--mb-lift)) calc(24px + var(--mb-side)) round var(--lg-r-pill));
  transition:opacity 260ms var(--lg-ease)}
.desk{--mb-h:48px;--mb-lift:14px;--mb-side:208px}   /* (1536 - 1120) / 2 */
.desk.is-off .desk__blur{opacity:0}

/* the desktop layer (ui/desktop/desktop.css): a column of glass panes at top 38, left 44, 420 wide, 16 apart
   (.cluster, desktop.css:108-120): the clock pane, then the System tile. A personal dashboard tile
   is left out (it reads "offline" on every other PC). */
.dcol{position:absolute;left:44px;top:38px;z-index:1;width:420px;display:flex;flex-direction:column;gap:16px;transition:opacity 260ms var(--lg-ease)}
.dpane{position:relative;padding:14px 16px 15px;border-radius:16px;background:var(--mb-pane-fill);
  box-shadow:inset 0 0 0 1px var(--lg-edge-out),var(--lg-lip-up),var(--lg-shadow);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  color:var(--lg-ink-2)}
.desk[data-theme="dark"] .dpane{border-radius:14px;box-shadow:inset 0 0 0 1px var(--lg-edge-out),var(--lg-lip-up),0 2px 6px rgba(0,0,0,.30),0 12px 32px rgba(0,0,0,.32)}
.dclock{display:flex;align-items:baseline;font-family:"Segoe UI Variable Display",var(--f-win);font-size:76px;line-height:1;font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--lg-ink)}
.dclock .ss{min-width:2ch}
.dclock .mer{margin-left:.16em;font-size:.3em;font-weight:500;letter-spacing:.06em;color:var(--lg-ink-2)}
.ddate{margin-top:6px;font-size:14px;color:var(--lg-ink-2)}
.dhead{margin:0 0 10px;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--lg-ink-3)}
.drows{margin:0}
.drow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:4px 0}
.drow + .drow{border-top:1px solid var(--lg-edge-out)}
.drow dt{font-size:12px;color:var(--lg-ink-2)}
.drow dd{margin:0;font-size:13px;font-variant-numeric:tabular-nums;color:var(--lg-ink)}
.desk.is-off .dcol{opacity:0}

/* the island (bar.css body.pill .bar): 48 px, 24 px ends, 14 px off the edges, max 1120 */
.mb{position:absolute;left:var(--mb-side);right:var(--mb-side);bottom:var(--mb-lift);z-index:2;height:var(--mb-h)}
.mb__bar{position:relative;height:100%;display:flex;align-items:center;gap:8px;padding:0 8px;border-radius:var(--lg-r-pill);
  box-shadow:var(--mb-bar-drop);color:var(--lg-ink-2);
  transform-origin:50% 100%;transition:transform 560ms var(--lg-ease),opacity 360ms var(--lg-ease)}
.mb__bar::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border:1px solid var(--lg-edge-out);border-radius:inherit;
  background-color:var(--mb-bar-fill);box-shadow:var(--lg-lip-up);transition:background-color 150ms var(--lg-ease)}
/* the down pose: below its resting place and a touch small; .up rises it (bar.css --pane-y/--pane-s) */
.desk.js .mb__bar{transform:translateY(36px) scale(.94);opacity:0}
.desk.js.up .mb__bar{transform:none;opacity:1}
.desk.js.up.is-off .mb__bar{transform:translateY(36px) scale(.94);opacity:0;transition-duration:260ms,200ms}
.desk.js .desk__blur{opacity:0}
.desk.js.up .desk__blur{opacity:1}
.desk.js.up.is-off .desk__blur{opacity:0}
.mb__left,.mb__dock,.mb__right{z-index:2}
.mb__left{position:relative;display:flex;align-items:center;gap:4px;flex:none}
.mb__right{position:relative;display:flex;align-items:center;gap:4px;margin-left:auto;flex:none}

.mb-btn{appearance:none;border:0;margin:0;background:transparent;color:var(--lg-ink-2);font:inherit;height:36px;padding:0 8px;border-radius:var(--lg-r-ctl);
  display:flex;align-items:center;gap:7px;flex:none;cursor:default;transition:background-color 120ms steps(2),color 120ms steps(2)}
@media (hover:hover){.mb-btn:hover{background:var(--lg-hover);color:var(--lg-ink)}}
.mb-btn:active,.mb-btn[aria-expanded="true"]{background:var(--lg-press);color:var(--lg-ink)}
.desk .mb-btn:focus-visible,.desk .mb-cell:focus-visible,.desk .mb-more:focus-visible{outline:1px solid var(--lg-acc);outline-offset:-1px;box-shadow:0 0 0 2px var(--lg-acc-soft);border-radius:var(--lg-r-ctl)}
.mb-glyph{width:36px;justify-content:center;padding:0}
.mb-glyph svg{display:block}
.mb-start{width:38px;justify-content:center;padding:0}
.mb-start svg{display:block}
@media (hover:hover){.mb-start:hover{color:var(--lg-acc)}}
.mb-start:active,.mb-start[aria-expanded="true"]{color:var(--lg-acc)}
.mb-sep{flex:0 0 1px;width:1px;height:20px;background:var(--lg-edge-out)}   /* bar.css:561: no margin of its own, the cluster gap is the air */
/* Downloads and Battery: drawn as in the real cluster (index.html:80-91, battery.js:206-220), not wired in the mock */
.mb-deco{pointer-events:none}
.mb-batt{width:auto;padding:0 7px;gap:5px}
.mb-batt svg{display:block}
.mb-batt .pct{font-size:12.5px;font-variant-numeric:tabular-nums}
.mb-clock{flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;padding:0 9px;min-width:62px;font-variant-numeric:tabular-nums}
.mb-clock .t{font-size:13px;color:var(--lg-ink);min-width:80px;text-align:right}
.mb-clock .d{font-size:12.5px;color:var(--lg-ink-2)}

/* the dock: centred on the island, never under the right cluster (bar.js sets --dock-shift) */
.mb__dock{position:absolute;left:50%;top:0;height:100%;display:flex;align-items:center;gap:6px;transform:translateX(calc(-50% + var(--dock-shift,0px)))}
.mb-cell{position:relative;flex:0 0 36px;width:36px;height:36px;border:0;margin:0;padding:0;background:transparent;color:var(--lg-ink);font:inherit;
  border-radius:var(--lg-r-ctl);cursor:default;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:background-color 150ms steps(2)}
@media (hover:hover){.mb-cell:hover{background:var(--lg-hover)}}
.mb-cell:active{background:var(--lg-press)}
.mb-cell[hidden]{display:none}
.mb-cell .ico{width:24px;height:24px;display:grid;place-items:center;overflow:hidden;border-radius:6px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--lg-ink);transition:transform 120ms steps(2)}
.mb-cell .ico img{width:24px;height:24px;display:block}
.mb-cell .ico.tile{background:var(--lg-tile)}
.mb-cell .ind{flex:0 0 3px;width:6px;height:3px;border-radius:2px;background:var(--lg-ink-2);visibility:hidden;transition:width 150ms steps(2),background-color 150ms steps(2)}
.mb-cell.run .ind{visibility:visible}
.mb-cell.act .ind{width:16px;background:var(--lg-acc)}
.mb-cell.pop-in .ico{animation:mb-press 260ms var(--lg-ease)}
@keyframes mb-press{40%{transform:scale(.86)}}
.mb-div{flex:0 0 1px;width:1px;height:22px;margin:0 3px;background:var(--lg-edge-out)}
.mb-div[hidden]{display:none}
.mb-more{flex:0 0 36px;width:36px;height:36px;border:0;margin:0;padding:0;border-radius:var(--lg-r-ctl);background:var(--lg-sunk);color:var(--lg-ink-2);
  font:inherit;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;cursor:default}
.mb-more[hidden]{display:none}
@media (hover:hover){.mb-more:hover{background:var(--lg-hover);color:var(--lg-ink)}}
/* Helm's count on its pin (helmbadge.css) */
.hb-badge{position:absolute;top:1px;right:1px;min-width:15px;height:15px;display:grid;place-items:center;border-radius:8px;background:var(--lg-acc);color:var(--lg-acc-on);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.72);font-size:10px;font-weight:650;line-height:1;font-variant-numeric:tabular-nums;pointer-events:none}
.desk[data-theme="dark"] .hb-badge{box-shadow:0 0 0 1.5px rgba(19,20,21,.83)}

/* ── the popover host: one at a time, above the bar (bar.css .pop) ── */
.mb-pop{position:absolute;bottom:calc(100% + 7px);left:8px;z-index:10;min-width:210px;max-width:340px;padding:11px 12px;
  background:var(--lg-fill-pop);border:1px solid var(--lg-edge-in);border-radius:var(--lg-r-pop);box-shadow:var(--lg-lip-up),var(--lg-shadow);
  color:var(--lg-ink-2);font-size:12.5px;line-height:1.3;animation:mb-rise 300ms var(--lg-ease) backwards,mb-fade 200ms linear backwards}
.mb-pop[hidden]{display:none}
@keyframes mb-rise{from{transform:translateY(8px)}}
@keyframes mb-fade{from{opacity:0}}
.mb-pop h3{margin:0 0 8px;font-size:12.5px;font-weight:600;color:var(--lg-ink-3);letter-spacing:.04em;text-transform:uppercase}
.mb-pop .big{font-size:15px;color:var(--lg-ink);margin-bottom:4px}
.mb-pop .sub{color:var(--lg-ink-3);line-height:1.45}
.mb-pop .note{margin-top:9px;padding-top:8px;border-top:1px solid var(--lg-edge-out);color:var(--lg-warn);line-height:1.45}
.mb-pop .item{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;border:0;background:transparent;color:var(--lg-ink-2);
  font:inherit;padding:7px 8px;border-radius:var(--lg-r-ctl);cursor:default;transition:background-color 120ms steps(2),color 120ms steps(2)}
@media (hover:hover){.mb-pop .item:hover{background:var(--lg-hover);color:var(--lg-ink)}}
.mb-pop .item:active{background:var(--lg-press)}
.mb-pop .item.armed{color:var(--lg-warn);background:var(--lg-warn-soft)}
.mb-pop .item kbd{flex:none;font:inherit;font-size:11.5px;color:var(--lg-ink-3)}
.mb-pop .mwho{margin:-4px 0 6px}
.mb-pop .item:focus-visible,.mb-pop button:focus-visible,.mb-pop input:focus-visible{outline:1px solid var(--lg-acc);outline-offset:-1px;box-shadow:0 0 0 2px var(--lg-acc-soft);border-radius:var(--lg-r-ctl)}
.mb-pop.more{min-width:236px}
.mb-pop.ovf .item{justify-content:flex-start;gap:10px}
.mb-pop.ovf .ico{width:20px;height:20px;display:grid;place-items:center;border-radius:5px;font-weight:600;flex:none;color:var(--lg-ink)}
.mb-pop.ovf .ico.tile{background:var(--lg-tile)}
.mb-pop.ovf .ico img{width:20px;height:20px;display:block}

/* quick settings (bar.css .qsgrid/.qstile/.qsrow) */
.mb-pop.qs{width:300px;max-width:calc(100% - 16px)}
.qsgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.qstile{display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;align-items:center;gap:0 8px;padding:8px 9px;border:0;border-radius:var(--lg-r-ctl);
  background:var(--lg-tile);color:var(--lg-ink);font:inherit;text-align:left;cursor:default;min-width:0;transition:background-color 150ms steps(2),color 150ms steps(2)}
@media (hover:hover){.qstile:hover{background:var(--lg-hover)}}
.qstile:active{background:var(--lg-press)}
.qsico{grid-row:1/3;display:grid;place-items:center}
.qsico svg{display:block}
.qslbl{font-size:12.5px;line-height:1.15}
.qssub{font-size:12.5px;line-height:1.2;color:var(--lg-ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qstile.on{background:var(--lg-acc);color:var(--lg-acc-on)}
.qstile.on .qssub{color:var(--lg-acc-on);opacity:.86}
.qsrow{margin-bottom:9px}
.qsrowhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;font-size:12.5px;color:var(--lg-ink-2)}
.qsval{color:var(--lg-ink-3);font-variant-numeric:tabular-nums}
.qsline{display:flex;align-items:center;gap:8px}
.qsline input[type="range"]{flex:1 1 auto;width:100%;margin:0;accent-color:var(--lg-acc);background:transparent;height:20px}
.qsseg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;border-radius:var(--lg-r-ctl);background:var(--lg-tile)}
.qsseg button{border:0;background:transparent;color:var(--lg-ink-2);font:inherit;font-size:12px;height:26px;border-radius:5px;cursor:default}
.qsseg button[aria-pressed="true"]{background:var(--lg-acc);color:var(--lg-acc-on)}
@media (hover:hover){.qsseg button:not([aria-pressed="true"]):hover{background:var(--lg-hover);color:var(--lg-ink)}}
.qsfoot{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid var(--lg-edge-out);color:var(--lg-ink-2)}

/* the launcher (ui/launcher: the slot, results, the foot) */
/* the launcher is its own window, 680 x 460 centred on the SCREEN (lib/windows.js:168-182), its panel inset 10
   (launcher.css:72): 660 x 440, radius 20 light / 18 dark (launcher.css:41, :155). The island's top is at
   864 - 14 - 48 = 802 and the panel's bottom at (864 + 440) / 2 = 652, hence 150 above the island. */
.mb-pop.launch{left:50%;bottom:calc(100% + 150px);width:660px;height:440px;max-width:none;display:flex;flex-direction:column;padding:0;overflow:hidden;border-radius:20px;transform:translateX(-50%);animation:mb-rise-c 300ms var(--lg-ease) backwards,mb-fade 200ms linear backwards}
@keyframes mb-rise-c{from{transform:translate(-50%,8px)}}
.ln-slot{position:relative;height:52px;padding:0 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--lg-edge-out)}
.ln-slot::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--lg-acc);opacity:0;transition:opacity 120ms}
.ln-slot:focus-within::after{opacity:1}
.ln-slot svg{flex:none;color:var(--lg-ink-3)}
.ln-q{width:100%;border:0;outline:0;background:transparent;color:var(--lg-ink);font:inherit;font-size:15px;line-height:1.2;padding:0}
.ln-q::placeholder{color:var(--lg-ink-3);opacity:1}
.mb-pop .ln-q:focus-visible{outline:0;box-shadow:none}
.ln-res{padding:6px;max-height:var(--ln-max,180px);overflow-y:auto;overscroll-behavior:contain}
.mb-pop.launch .ln-res{flex:1 1 auto;min-height:0;max-height:none}
.mb-pop.launch .ln-foot{margin-top:auto}
.desk[data-theme="dark"] .mb-pop.launch{border-radius:18px}
.ln-grp{padding:6px 12px 3px;font-size:13px;font-weight:600;color:var(--lg-ink)}
.ln-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 12px 0 10px;border:0;border-radius:var(--lg-r);background:transparent;color:var(--lg-ink);font:inherit;text-align:left;cursor:default}
.ln-row + .ln-row{margin-top:1px}
.ln-row .ico{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;font-size:12.5px;font-weight:600;flex:none}
.ln-row .ico img{width:24px;height:24px;display:block}
.ln-row .ico.tile{background:var(--lg-tile)}
.ln-row .ln-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ln-row .k{flex:none;margin-left:auto;font-size:12px;color:var(--lg-ink-3)}
.ln-row.is-sel{background:var(--lg-tile)}
.ln-row.is-sel::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--lg-acc)}
.ln-none{padding:12px;color:var(--lg-ink-3)}
.ln-foot{display:flex;align-items:center;min-height:34px;padding:0 14px;border-top:1px solid var(--lg-edge-out);font-size:12px;color:var(--lg-ink-3)}
.ln-foot .k{display:inline-flex;align-items:center;gap:5px}
.ln-foot .k + .k{margin-left:auto}
.ln-foot kbd{font:inherit;font-size:11px;padding:1px 5px;border-radius:4px;background:var(--lg-tile);color:var(--lg-ink-2)}

/* the quit state: the island has gone and Windows has its taskbar back */
.desk__off{position:absolute;left:50%;bottom:calc(var(--mb-lift) + 4px);z-index:3;display:flex;align-items:center;gap:14px;margin:0;padding:8px 8px 8px 16px;
  transform:translateX(-50%);width:max-content;max-width:calc(100% - 28px);border-radius:var(--lg-r-pill);background:var(--lg-fill-pop);border:1px solid var(--lg-edge-in);
  box-shadow:var(--lg-lip-up),var(--lg-shadow);color:var(--lg-ink);font-size:13px;animation:mb-fade 300ms linear backwards}
.desk__off[hidden]{display:none}
.mb-btn--acc{background:var(--lg-acc);color:var(--lg-acc-on);padding:0 14px;height:32px;border-radius:16px;font-weight:600}
@media (hover:hover){.mb-btn--acc:hover{background:var(--lg-acc);color:var(--lg-acc-on);filter:brightness(1.08)}}
.mb-btn--acc:focus-visible{outline:2px solid var(--lg-acc);outline-offset:2px}

/* the caption under the desk */
.desk__cap{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 32px;margin-top:16px}
.desk__note{margin:0;max-width:62em;font-size:13px;line-height:1.55;color:var(--ink-3)}
.desk__note .label{display:inline;margin-right:10px;color:var(--ink-2)}
.desk__note i{font-style:normal;color:var(--ink-2)}
.seg{display:inline-flex;flex:none;gap:2px;padding:3px;border-radius:10px;background:rgb(var(--ink-rgb) / .06)}
.seg__b{min-height:32px;padding:0 13px;border:0;border-radius:7px;background:transparent;color:var(--ink-2);font:520 13px/1 var(--f-sans);cursor:pointer;transition:background-color 160ms var(--e),color 160ms var(--e)}
.seg__b[aria-pressed="true"]{background:var(--cream);color:var(--ground)}
@media (hover:hover){.seg__b:not([aria-pressed="true"]):hover{background:rgb(var(--ink-rgb) / .07);color:var(--ink)}}

/* ── the sections ─────────────────────────────────────────────────────────────────────────── */
.mx__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,.8fr);gap:28px clamp(32px,4vw,72px);align-items:start}
.mx__grid--top{grid-template-columns:minmax(0,1fr) minmax(0,1.85fr)}
.mx__n{margin-bottom:18px;display:flex;align-items:center;gap:10px}
.mx__n::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--p-mantle)}
.mx__body{padding-top:30px}
.mx__body p:last-child{margin-bottom:0}
.mx__aside{padding-top:30px}
.mx__fine{font-size:14.5px;color:var(--ink-3)}
.mx + .mx{padding-top:calc(var(--sec-y) * .55)}
.kc{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;padding:0 7px;border-radius:7px;
  background:var(--ground-2);box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .1),inset 0 -2px 0 rgb(var(--shade-rgb) / .45);
  font:500 12.5px/1 var(--f-mono);color:var(--ink);vertical-align:1px}
.kc--w{min-width:84px}

/* 01: the parts of the bar */
.parts{margin:0;display:grid;gap:0}
.parts__r{display:grid;grid-template-columns:30px 1fr;gap:3px 14px;padding:11px 0}
.parts dt{display:contents;font:600 15px/1.3 var(--f-sans);color:var(--cream)}
.parts dt::after{content:none}
.parts dd{grid-column:2;margin:0;font-size:14px;line-height:1.5;color:var(--ink-3)}
.parts__k{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--ground-2);color:var(--cream);font-size:12px;
  box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .08)}
.parts__k--pin::after{content:"";width:12px;height:3px;border-radius:2px;background:var(--ink-2);transform:translateY(7px)}
.parts__k--badge{background:var(--p-mantle);color:#fff;font:650 12px/1 var(--f-win);box-shadow:none}

/* 02: four of Mantle's own app icons (assets/icons, 256 px SVG) */
.apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding-left:0;list-style:none}
.apps li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--ground-2);font:560 15px/1.2 var(--f-sans);color:var(--cream)}
.apps img{width:36px;height:36px;flex:none}

/* 03: the wallpapers */
.wp{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,2.4vw,36px);margin-top:clamp(28px,4vh,44px);align-items:start}
.wp__view{position:relative;margin:0;border-radius:16px;overflow:hidden;background:var(--ground-2);aspect-ratio:3/2}
.wp__view img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity 260ms var(--e)}
.wp__view img.is-loading{opacity:.35}
.wp__cap{position:absolute;left:12px;bottom:12px;display:flex;align-items:baseline;gap:10px;padding:8px 12px;border-radius:10px;background:rgb(var(--ground-rgb) / .82);
  font:560 14px/1.2 var(--f-sans);color:var(--cream)}
.wp__by{font:400 12px/1.2 var(--f-mono);color:var(--ink-2)}
.wp__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.wp__b{display:block;width:100%;padding:0;border:0;border-radius:9px;background:var(--ground-2);cursor:pointer;overflow:hidden;position:relative;aspect-ratio:3/2}
.wp__b img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 300ms var(--e),opacity 200ms var(--e)}
@media (hover:hover){.wp__b:hover img{transform:scale(1.04)}}
.wp__b::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .08);transition:box-shadow 160ms var(--e)}
.wp__b[aria-pressed="true"]::after{box-shadow:inset 0 0 0 2px var(--cream)}
.wp__credits{grid-column:1/-1;margin:2px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.wp__credits a{color:var(--ink-2);text-decoration:underline;text-decoration-color:rgb(var(--ink-rgb) / .25);text-underline-offset:3px}
@media (hover:hover){.wp__credits a:hover{color:var(--fire-ink)}}

/* 04: four ways back */
.ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:clamp(28px,4vh,44px) 0 0;padding:0;list-style:none;counter-reset:w}
.way{display:flex;flex-direction:column;gap:12px;padding:22px 22px 24px;border-radius:18px;background:var(--ground-2)}
.way__n{margin:0;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-size:12px;color:var(--ground);background:var(--cream)}
.way:first-child .way__n{background:var(--fire)}
.way__h{margin:4px 0 0;font:640 21px/1.15 var(--f-sans);font-stretch:90%;letter-spacing:-.01em;color:var(--ink)}
.way__keys{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 0;min-height:30px}
.way__ar{color:var(--ink-3)}
.way__lbl{font-size:14px;color:var(--cream)}
.way__path{margin:2px 0 0;min-height:30px;font-size:12px;line-height:1.6;color:var(--ink-2)}
.way__t{margin:auto 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-3)}
.why{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 40px;margin-top:24px;padding:22px 24px;border-radius:18px;box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .08)}
.why__t{margin:0;max-width:52em;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.why__t em{font:italic 500 1.08em/1 var(--f-serif);color:var(--ink)}

/* 05: the camera */
.facts{margin:0 0 1em;padding:0;list-style:none}
.facts li{position:relative;padding-left:20px;margin-bottom:8px}
.facts li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.cam{margin:0;padding:18px;border-radius:18px;background:#0a0b0d url(img/wp/thumbs/night-fjord.jpg) 50% 50%/cover;position:relative;overflow:hidden}
.cam__row{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:var(--lg-r-pop);background:var(--lg-fill-pop);border:1px solid var(--lg-edge-in);
  box-shadow:var(--lg-lip-up),var(--lg-shadow);font:13px/1.35 var(--f-win);color:var(--lg-ink)}
.cam__txt{flex:1 1 auto;min-width:0}
.cam__l{margin:0;font-size:14px;color:var(--lg-ink)}
.cam__h{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--lg-ink-2)}
.cam__sw{flex:none;position:relative;width:40px;height:20px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(11,14,26,.45);background:transparent}
.cam__knob{position:absolute;left:4px;top:4px;width:12px;height:12px;border-radius:50%;background:#333A4E}
.cam__cap{margin:12px 2px 0;font-size:11.5px;color:#EFE7DA}

/* 06: download */
.dl__risk{margin:18px 0 0;max-width:46em;padding:14px 18px;border-radius:14px;background:rgb(var(--fire-rgb) / .08);
  font-size:16px;line-height:1.55;color:var(--ink-2)}
.dl__risk b{color:var(--ink);font-weight:620}
.dl__rows{margin-top:24px}
.sha{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 0;font-size:12px;color:var(--ink-3)}
.sha__k{letter-spacing:.08em}
.sha .clone{max-width:100%;min-width:0}
.sha__v{font-size:11.5px}
.steps{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px clamp(32px,5vw,88px);margin-top:clamp(36px,5vh,56px);font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.steps p{margin:0 0 1.1em}
.steps b{font-weight:600;color:var(--ink)}
.steps a{color:var(--ink);text-decoration:underline;text-decoration-color:rgb(var(--ink-rgb) / .3);text-underline-offset:3px}
@media (hover:hover){.steps a:hover{color:var(--fire-ink)}}
.steps__h{margin:0 0 10px;font:640 18px/1.2 var(--f-sans);font-stretch:92%;color:var(--ink)}
.steps__col > .steps__h + p + .steps__h,.steps__col p + .steps__h{margin-top:22px}
.steps__l{margin:0;padding:0;list-style:none;counter-reset:s}
.steps__l li{position:relative;padding-left:40px;margin-bottom:16px;counter-increment:s}
.steps__l li::before{content:counter(s);position:absolute;left:0;top:1px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  font:500 12px/1 var(--f-mono);color:var(--ink);box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .2)}
.src{margin-top:clamp(24px,3vh,36px);border-radius:16px;background:var(--ground-2)}
.src__s{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 20px;cursor:pointer;list-style:none;font:600 16px/1.2 var(--f-sans);color:var(--cream);border-radius:16px}
.src__s::-webkit-details-marker{display:none}
.src__ar{color:var(--ink-3);transition:transform 260ms var(--e)}
.src[open] .src__ar{transform:rotate(180deg)}
.src__b{padding:0 20px 20px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.src__b p{margin:0 0 14px}
.src__b code{font-size:13px;color:var(--ink)}
.cmds{position:relative;margin:0 0 14px;padding:14px 52px 14px 16px;border-radius:12px;background:var(--ground);font-size:12.5px;line-height:1.85;color:var(--ink);overflow-x:auto}
.cmds__l{white-space:nowrap}
.cmds__copy{position:absolute;top:8px;right:8px}

/* 07: limits */
.nots{margin:0;padding:30px 0 0;list-style:none;grid-column:2/4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.nots li{padding:18px 20px;border-radius:14px;box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .08);font-size:15px;line-height:1.55;color:var(--ink-2)}

/* the closing strip */
.lic{padding-top:calc(var(--sec-y) * .6)}
.lic__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px}
.lic__h{margin:0;font:560 18px/1.4 var(--f-sans);color:var(--ink-2)}
.lic__v{margin-right:8px;font-size:14px;color:var(--ink)}

/* ── narrow ───────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .mx__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  .mx__aside{grid-column:2}
  .nots{grid-column:2}
  .ways{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wp{grid-template-columns:minmax(0,1fr)}
  .wp__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:860px){
  .mx__grid,.mx__grid--top{grid-template-columns:minmax(0,1fr);gap:0}
  .mx__body,.mx__aside{padding-top:22px}
  .mx__aside,.nots{grid-column:auto}
  .nots{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .desk__cap{flex-direction:column}
  .wp__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px){
  .desk__cap{padding:0 calc(var(--gut) - 12px)}
  .ways{grid-template-columns:minmax(0,1fr)}
  .desk-sec .wrap{padding:0}
  /* a phone gets the same screen, whole and smaller: nothing in it is hidden, moved or stretched. At this
     scale (a quarter) it is a picture, not a working model, so it takes no taps (mantle.js sets inert). */
  .desk__screen{border-radius:0;box-shadow:none}
  .desk__stage{pointer-events:none}
  .desk__try{display:none}
  .wp__cap{left:8px;bottom:8px}
}
@media (max-width:520px){
  .mh__risk{font-size:13px}
  .apps{grid-template-columns:minmax(0,1fr)}
  .wp__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sha__v{font-size:10.5px}
  .lic__h{font-size:16px}
}
@media (max-width:360px){
  .mh__tag{display:none}
}

/* ── reduced motion: no rise and no scale, a short fade only (bar.css, motion-unison) ── */
@media (prefers-reduced-motion:reduce){
  .mb__bar,.desk.js .mb__bar,.desk.js.up.is-off .mb__bar{transform:none!important;transition:opacity 120ms linear}
  .mb-pop,.mb-pop.launch,.desk__off{animation:mb-fade 120ms linear backwards}
  .mb-cell.pop-in .ico{animation:none}
  .wp__b img,.src__ar,.wp__view img{transition:none}
}
@media (forced-colors:active){.mb__bar::after,.mb-pop,.desk__off{border:1px solid CanvasText}}