/* clicrite: "Try it" interactives. Uses only the site's theme tokens (light default, html.night dark). */

/* ---------- section ---------- */
.pg-play{background:var(--bg-2);overflow:hidden}
.pg-play .play-wrap{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:clamp(40px,5vw,80px);align-items:center}
.pg-play .play-copy .pg-sub{max-width:24em}
@media (max-width:1023px){.pg-play .play-wrap{grid-template-columns:minmax(0,1fr);gap:32px}.pg-play .play-copy .pg-sub{max-width:34em}}

/* ---------- the card every interactive shares ---------- */
.play{
  --p-bad:#c4223a;--p-bad-bg:rgba(255,93,108,.11);--p-bad-line:rgba(255,93,108,.45);
  --p-ok-bg:rgba(2,211,224,.13);--p-ok-line:rgba(0,116,124,.35);
  --p-panel:var(--bg-2);--p-panel-2:var(--bg-3);--p-raise:var(--bg);
  --p-sh:0 1px 2px rgba(9,0,87,.06),0 8px 22px -14px rgba(9,0,87,.35);
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--bg);border-radius:28px;box-shadow:var(--card-sh),0 0 0 1px var(--line);
  color:var(--fg);font-family:var(--body);overflow:hidden;isolation:isolate;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none
}
html.night .play{
  --p-bad:#ff8593;--p-bad-bg:rgba(255,93,108,.14);--p-bad-line:rgba(255,93,108,.5);
  --p-ok-bg:rgba(2,211,224,.14);--p-ok-line:rgba(2,211,224,.42);
  --p-panel:rgba(255,255,255,.035);--p-panel-2:rgba(255,255,255,.06);--p-raise:#141047;
  --p-sh:0 1px 0 rgba(255,255,255,.04) inset,0 10px 24px -16px rgba(0,0,0,.9);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02)),var(--bg-2)
}
.play *,.play *::before,.play *::after{box-sizing:border-box}
.play .pi{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
:where(.play) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:inherit}
:where(.play) button:disabled{cursor:default}
.play :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
.play-stage{position:relative;flex:1;padding:28px;min-height:400px;display:flex;flex-direction:column;justify-content:center}
.play-bar{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 14px 12px 26px;border-top:1px solid var(--line)}
.play-msg{flex:1;min-width:0;display:flex;align-items:center;gap:12px;margin:0;font:600 15px/1.35 var(--display);letter-spacing:-.005em;color:var(--soft)}
.play-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--dim);opacity:.6;transition:background .4s,opacity .4s,box-shadow .4s}
.play-bar[data-tone="ok"] .play-dot{background:var(--teal);opacity:1;box-shadow:0 0 0 4px var(--p-ok-bg)}
.play-bar[data-tone="bad"] .play-dot{background:var(--danger-ink);opacity:1;box-shadow:0 0 0 4px var(--p-bad-bg)}
.play-bar[data-tone="ok"] .play-msg,.play.is-done .play-msg{color:var(--fg)}
.play-txt.in{animation:p-txt .45s var(--ease)}
@keyframes p-txt{from{opacity:0;transform:translateY(4px)}}
.play-again{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;height:auto;padding:8px 16px 8px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font:650 14px/1 var(--display)!important;color:var(--soft)!important;transition:background .25s,color .25s,box-shadow .25s}
.play-again .pi{width:17px;height:17px;transition:transform .5s var(--ease)}
.play-again:hover{background:var(--p-panel);color:var(--fg)!important}
.play-again:hover .pi{transform:rotate(-120deg)}
.play.is-done .play-again{background:var(--teal);color:var(--ink)!important;box-shadow:0 8px 20px -10px rgba(2,211,224,.8)}
.play.is-done .play-again:hover{filter:brightness(1.05)}
.p-panel{background:var(--p-panel);border-radius:18px;box-shadow:inset 0 0 0 1px var(--line)}
.p-cap{margin:0;font:650 11.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.play-fly{position:absolute;left:0;top:0;z-index:20;pointer-events:none;will-change:transform}
.play-drag{touch-action:none;cursor:grab}
.play-drag.is-drag{cursor:grabbing;z-index:30;position:relative;transition:none!important}
.play.is-dragging{cursor:grabbing}
/* shared switch */
.p-sw{position:relative;flex:none;width:46px;height:28px;border-radius:999px;background:var(--p-panel-2);box-shadow:inset 0 0 0 1px var(--line);transition:background .35s var(--ease),box-shadow .35s}
.p-sw::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(9,0,87,.3),0 0 0 .5px rgba(9,0,87,.08);transition:transform .4s var(--ease)}
[aria-checked="true"]>.p-sw,input:checked+.p-sw{background:var(--teal);box-shadow:none}
[aria-checked="true"]>.p-sw::after,input:checked+.p-sw::after{transform:translateX(18px)}
.p-tog{display:flex;align-items:center;gap:14px;cursor:pointer;position:relative}
.p-tog input{position:absolute;opacity:0;width:46px;height:28px;margin:0;cursor:pointer}
.p-tog input:focus-visible+.p-sw{outline:2px solid var(--accent);outline-offset:3px}
.p-tl{display:flex;flex-direction:column;gap:2px;min-width:0}
.p-tl b{font:650 15px/1.25 var(--display)}
.p-tl small{font-size:13.5px;line-height:1.35;color:var(--dim)}

/* =================== MANAGED IT =================== */
.mit{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:22px;align-items:stretch}
.mit-floor{padding:20px;display:flex;flex-direction:column;gap:16px;
  background-image:radial-gradient(circle,var(--line) 1px,transparent 1.4px);background-size:18px 18px}
.mit-grid{margin:auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mit-m{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 6px 14px;border-radius:16px;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line);transition:box-shadow .35s,transform .35s var(--ease),background .35s}
.mit-m:hover{transform:translateY(-2px)}
.mit-ic{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--p-panel);color:var(--fg);transition:background .35s,color .35s}
.mit-ic .pi{width:24px;height:24px}
.mit-l{font:650 13px/1.15 var(--display);color:var(--soft);text-align:center}
.mit-st{position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--teal);opacity:.85;transition:all .35s var(--ease)}
.mit-st .pi{display:none}
.mit-m.is-bad{box-shadow:var(--p-sh),inset 0 0 0 1.5px var(--p-bad-line)}
.mit-m.is-bad .mit-ic{background:var(--p-bad-bg);color:var(--p-bad)}
.mit-m.is-bad .mit-st{background:var(--danger-ink);opacity:1;animation:mit-pulse 1.4s ease-out infinite}
@keyframes mit-pulse{0%{box-shadow:0 0 0 0 rgba(255,93,108,.55)}100%{box-shadow:0 0 0 10px rgba(255,93,108,0)}}
.mit-spin{position:absolute;inset:-5px;border-radius:17px;border:2px solid transparent;border-top-color:var(--teal);border-right-color:var(--teal);opacity:0}
.mit-m.is-fixing .mit-spin{opacity:1;animation:p-spin .8s linear infinite}
@keyframes p-spin{to{transform:rotate(360deg)}}
.mit-m.is-ok{box-shadow:var(--p-sh),inset 0 0 0 1.5px var(--p-ok-line)}
.mit-m.is-ok .mit-ic{background:var(--p-ok-bg);color:var(--accent)}
.mit-m.is-ok .mit-st{width:20px;height:20px;top:6px;right:6px;display:grid;place-items:center;color:var(--ink);opacity:1}
.mit-m.is-ok .mit-st .pi{display:block;width:13px;height:13px;stroke-width:2.6}
.mit-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.mit-dock{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:var(--p-panel);box-shadow:inset 0 0 0 1px var(--line)}
.mit-dock b{display:block;font:650 15px/1.2 var(--display)}
.mit-dock span{display:block;font-size:13px;line-height:1.3;color:var(--dim)}
.mit-tech{position:relative;z-index:5;flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--teal);color:var(--ink)!important;box-shadow:0 10px 24px -10px rgba(2,211,224,.9),inset 0 1px 0 rgba(255,255,255,.4);transition:box-shadow .3s,filter .3s}
.mit-tech .pi{width:24px;height:24px;stroke-width:2}
.mit-tech:hover{filter:brightness(1.04)}
.mit-tech.is-fly{transition:transform .55s cubic-bezier(.45,0,.2,1),box-shadow .3s}
.mit-tech:disabled{cursor:default;box-shadow:0 6px 16px -10px rgba(2,211,224,.7)}
.mit-tix{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mit-t{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line);transition:opacity .4s}
.mit-td{flex:none;width:8px;height:8px;border-radius:50%;background:var(--danger-ink)}
.mit-tt{flex:1;min-width:0;font-size:14px;line-height:1.3;color:var(--soft)}
.mit-tt b{display:block;font:650 14px/1.25 var(--display);color:var(--fg)}
.mit-ts{flex:none;display:inline-flex;align-items:center;gap:4px;font:650 12px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--p-bad)}
.mit-ts .pi{width:14px;height:14px;stroke-width:2.4}
.mit-t.is-closed .mit-td{background:var(--teal)}
.mit-t.is-closed .mit-ts{color:var(--accent)}
.mit-t.is-closed .mit-tt{opacity:.7}

/* =================== CYBERSECURITY: spot the phish =================== */
.ph{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;align-items:start}
.ph-mail{padding:22px 22px 18px;font-size:15px;line-height:1.5;color:var(--soft);background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line)}
.ph-mail p{margin:0}
.ph-head{display:flex;gap:12px;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ph-av{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--p-panel-2);font:700 15px/1 var(--display);color:var(--soft)}
.ph-meta{min-width:0;flex:1}
.ph-from{color:var(--fg);overflow-wrap:anywhere}
.ph-from b{font:650 15px/1.3 var(--display)}
.ph-to{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--dim)}
.ph-subj{margin:14px 0 10px!important;font:650 16.5px/1.35 var(--display);color:var(--fg)}
.ph-body{display:flex;flex-direction:column;gap:10px}
.ph-s{position:relative;display:inline;text-align:left;border-radius:6px;padding:1px 3px!important;margin:0 -3px;line-height:inherit;font-size:inherit!important;transition:background .25s,color .25s,box-shadow .25s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ph-s:hover{background:var(--p-panel-2)}
.ph-s.is-found{background:var(--p-bad-bg);color:var(--p-bad);box-shadow:inset 0 -1.5px 0 var(--p-bad-line)}
.ph-s.is-nope{animation:ph-nope .5s ease}
@keyframes ph-nope{30%{background:var(--p-panel-2)}}
.ph-ctaw{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:4px 0}
.ph-s.ph-cta{display:inline-flex;margin:0;padding:10px 18px!important;border-radius:10px;background:var(--navy);color:#fff;font:650 14px/1 var(--display)!important}
html.night .ph-s.ph-cta{background:#2b2a8f}
.ph-s.ph-cta.is-found{background:var(--p-bad-bg);color:var(--p-bad);box-shadow:inset 0 0 0 1.5px var(--p-bad-line)}
.ph-url{font:600 12.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--p-bad);padding:5px 8px;border-radius:7px;background:var(--p-bad-bg);opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s var(--ease);overflow-wrap:anywhere}
.ph-cta.is-found+.ph-url{opacity:1;transform:none}
.ph-s.ph-att{display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 12px 8px 10px!important;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);font:600 13.5px/1.2 var(--display)!important;color:var(--fg)}
.ph-s.ph-att .pi{width:17px;height:17px}
.ph-s.ph-att.is-found{box-shadow:inset 0 0 0 1.5px var(--p-bad-line)}
.ph-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.ph-count{margin:0;font:600 14px/1 var(--display);color:var(--dim)}
.ph-count b{font-size:26px;color:var(--fg);margin-right:2px;font-variant-numeric:tabular-nums}
.ph-clues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ph-c{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--p-panel);box-shadow:inset 0 0 0 1px var(--line);transition:background .4s,box-shadow .4s}
.ph-num{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--p-panel-2);font:700 12px/1 var(--display);color:var(--dim);transition:background .3s,color .3s}
.ph-c div{min-width:0;display:flex;flex-direction:column;gap:2px}
.ph-c b{font:650 14px/1.3 var(--display);color:var(--dim)}
.ph-c span:last-child{font-size:13px;line-height:1.35;color:var(--dim);opacity:.7}
.ph-c.is-on{background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line)}
.ph-c.is-on .ph-num{background:var(--danger-solid);color:#fff}
.ph-c.is-on b{color:var(--fg)}
.ph-c.is-on span:last-child{color:var(--soft);opacity:1}

/* =================== CLOUD =================== */
.cl{display:flex;flex-direction:column;gap:18px}
.cl-sky{display:flex;justify-content:center}
.cl-cloud{position:relative;width:min(240px,62%);aspect-ratio:220/132;display:grid;place-items:center;transition:transform .5s var(--ease)}
.cl-cloud svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cl-shape{fill:var(--p-panel);stroke:var(--line);stroke-width:1.5;transition:fill .4s,stroke .4s,filter .4s}
.cl-cloud.is-over{transform:scale(1.05)}
.cl-cloud.is-over .cl-shape,.cl-cloud.is-up .cl-shape{fill:var(--p-ok-bg);stroke:var(--p-ok-line)}
.cl-core{position:relative;top:10%;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--p-raise);box-shadow:var(--p-sh);color:var(--accent)}
.cl-core .pi{grid-area:1/1;width:22px;height:22px;stroke-width:2;transition:opacity .3s,transform .4s var(--ease)}
.cl-ok{opacity:0;transform:scale(.5)}
.cl-ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg)}
.cl-ring circle{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:107;stroke-dashoffset:107}
.cl-cloud.is-up .cl-ring circle{transition:stroke-dashoffset .75s cubic-bezier(.4,0,.2,1);stroke-dashoffset:0}
.cl-cloud.is-up .cl-up{transform:translateY(-3px)}
.cl-cloud.is-done .cl-up{opacity:0;transform:scale(.5)}
.cl-cloud.is-done .cl-ok{opacity:1;transform:none}
.cl-cloud.is-done .cl-core{background:var(--teal);color:var(--ink)}
.cl-core{transition:background .4s,color .4s}
.cl-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px;align-items:end}
.cl-desk{display:flex;flex-direction:column;gap:10px}
.cl-files{display:flex;flex-direction:column;gap:8px}
.cl-f{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line);text-align:left;transition:opacity .4s,box-shadow .3s,transform .3s var(--ease)}
.cl-f:not(.is-sent):hover{transform:translateY(-2px)}
.cl-fi,.cl-chip,.cl-g{display:grid;place-items:center;flex:none;border-radius:10px}
.cl-fi{width:36px;height:36px}
.cl-fi .pi{width:20px;height:20px}
[data-c="a"]:is(.cl-f) .cl-fi,.cl-chip[data-c="a"],.cl-g[data-c="a"]{background:rgba(2,211,224,.16);color:var(--accent)}
[data-c="b"]:is(.cl-f) .cl-fi,.cl-chip[data-c="b"],.cl-g[data-c="b"]{background:rgba(var(--fg-rgb),.08);color:var(--fg)}
[data-c="c"]:is(.cl-f) .cl-fi,.cl-chip[data-c="c"],.cl-g[data-c="c"]{background:rgba(255,190,80,.2);color:var(--warm-t)}
.cl-fn{flex:1;min-width:0;font:650 14.5px/1.2 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-fs{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--teal);color:var(--ink);opacity:0;transform:scale(.5);transition:opacity .35s,transform .4s var(--ease)}
.cl-fs .pi{width:13px;height:13px;stroke-width:2.6}
.cl-f.is-sent{opacity:.55;box-shadow:inset 0 0 0 1px var(--line);background:transparent;cursor:default}
.cl-f.is-sent .cl-fs{opacity:1;transform:none}
.cl-chip{width:34px;height:34px;box-shadow:var(--p-sh)}
.cl-chip .pi{width:19px;height:19px}
.cl-devs{display:flex;align-items:flex-end;justify-content:center;gap:16px}
.cl-dev{display:flex;flex-direction:column;align-items:center;gap:8px}
.cl-scr{position:relative;background:var(--p-panel);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.cl-lap{flex:1;max-width:220px}
.cl-lap .cl-scr{width:100%;aspect-ratio:16/10;border-radius:10px 10px 3px 3px;border:5px solid var(--p-panel-2);border-bottom-width:6px}
.cl-base{display:block;width:118%;height:7px;margin-top:-8px;border-radius:2px 2px 7px 7px;background:var(--p-panel-2);box-shadow:inset 0 0 0 1px var(--line)}
.cl-ph .cl-scr{width:62px;aspect-ratio:9/18;border-radius:13px;border:4px solid var(--p-panel-2)}
.cl-grid{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:6px;padding:10px 8px}
.cl-g{width:26px;height:26px;border-radius:7px}
.cl-g .pi{width:15px;height:15px}
.cl-ph .cl-grid{flex-direction:column;align-items:center;flex-wrap:nowrap;gap:5px;padding:12px 4px}
.cl-ph .cl-g{width:22px;height:22px;border-radius:6px}
.cl-ph .cl-g .pi{width:13px;height:13px}

/* =================== BACKUP =================== */
.bk{display:flex;flex-direction:column;gap:22px}
.bk-win{padding:0;overflow:hidden;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line);transition:box-shadow .5s}
.bk-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 18px;border-bottom:1px solid var(--line)}
.bk-ttl{display:inline-flex;align-items:center;gap:10px;font:650 15px/1 var(--display);white-space:nowrap;min-width:0}
.bk-ttl .pi{width:20px;height:20px;color:var(--accent)}
.bk-hit{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;min-height:38px;height:auto;padding:6px 14px 6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--p-bad-line);color:var(--p-bad)!important;font:650 13.5px/1 var(--display)!important;transition:background .25s,opacity .3s}
.bk-hit .pi{width:17px;height:17px}
.bk-hit:hover{background:var(--p-bad-bg)}
.bk-hit:disabled{opacity:.4}
.bk-files{list-style:none;margin:0;padding:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bk-f{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--p-panel);min-width:0;transition:background .35s,color .35s}
.bk-fi{position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;background:var(--p-raise);color:var(--accent);box-shadow:inset 0 0 0 1px var(--line);transition:background .35s,color .35s}
.bk-fi .pi{grid-area:1/1;width:18px;height:18px;transition:opacity .3s,transform .35s var(--ease)}
.bk-i2{opacity:0;transform:scale(.6)}
.bk-fn{min-width:0;font:600 13.5px/1.2 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-f.is-locked{background:var(--p-bad-bg);color:var(--p-bad)}
.bk-f.is-locked .bk-fn{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:600}
.bk-f.is-locked .bk-fi{color:var(--p-bad);background:transparent;box-shadow:inset 0 0 0 1px var(--p-bad-line)}
.bk-f.is-locked .bk-i1{opacity:0;transform:scale(.6)}
.bk-f.is-locked .bk-i2{opacity:1;transform:none}
.bk-f.is-back{animation:bk-back .9s var(--ease)}
@keyframes bk-back{0%{background:var(--p-ok-bg)}}
.bk-note{position:relative;height:0;margin:0;overflow:hidden;font:650 13.5px/1 var(--display);transition:height .4s var(--ease)}
.bk-note>span{position:absolute;left:14px;right:14px;top:0;height:40px;display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .4s}
.bk-note .pi{width:16px;height:16px;stroke-width:2.2}
.bk-nb{color:var(--p-bad)}
.bk-ng{color:var(--accent)}
.bk.is-locked .bk-note,.bk.is-restored .bk-note{height:44px}
.bk.is-locked .bk-nb,.bk.is-restored .bk-ng{opacity:1}
.bk.is-locked .bk-win{box-shadow:var(--p-sh),inset 0 0 0 1.5px var(--p-bad-line)}
.bk-time{display:flex;flex-direction:column;gap:16px;padding:0 6px}
.bk-track{position:relative;height:28px;margin:0 12px;touch-action:none;cursor:pointer}
.bk-rail{position:absolute;left:0;right:0;top:12px;height:4px;border-radius:4px;background:var(--p-panel-2)}
.bk-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,var(--teal),rgba(2,211,224,.5))}
.bk-stop{position:absolute;top:10px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:rgba(var(--fg-rgb),.22)!important;pointer-events:none;transition:background .3s}
.bk-stop.is-pass{background:var(--teal)!important}
.bk-thumb{position:absolute;top:0;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(9,0,87,.28),0 0 0 1px rgba(9,0,87,.08);transition:left .35s var(--ease),transform .25s var(--ease);cursor:grab}
.bk-thumb::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--teal)}
.bk-thumb[aria-disabled="true"]{cursor:not-allowed}
.bk-thumb[aria-disabled="true"]::after{background:var(--p-panel-2)}
.bk-thumb.is-grab{transform:scale(1.12);cursor:grabbing}
.bk-thumb:focus-visible{outline-offset:4px;border-radius:50%}
.bk-thumb.is-hint{animation:bk-hint 1.6s var(--ease) infinite}
@keyframes bk-hint{0%,100%{transform:translateX(0)}40%{transform:translateX(-14px)}60%{transform:translateX(-14px)}}
.bk-ticks{position:relative;height:16px;margin:0 12px}
.bk-ticks span{position:absolute;top:0;transform:translateX(-50%);font:600 12.5px/1 var(--display);color:var(--dim);white-space:nowrap;transition:color .3s}
.bk-ticks span:first-child{transform:translateX(-12px)}
.bk-ticks span:last-child{transform:translateX(calc(-100% + 12px))}
.bk-ticks span.is-on{color:var(--fg)}

/* =================== NETWORK =================== */
.nw{display:flex;align-items:center;justify-content:center}
.nw-map{position:relative;width:100%;max-width:680px;aspect-ratio:640/300}
.nw-map.nw-v{max-width:330px}
.nw-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nw-e{stroke:var(--line);stroke-width:5;stroke-linecap:round;fill:none;transition:stroke .4s,stroke-width .4s}
html:not(.night) .nw-e{stroke:rgba(9,0,87,.14)}
.nw-e.is-live{stroke:var(--teal);stroke-width:5}
.nw-e.is-cut{stroke:var(--danger-ink);stroke-width:4;stroke-dasharray:4 12;opacity:.85}
.nw-cell{stroke-width:3;stroke-dasharray:2 9}
.nw-cell.is-live{stroke-width:4;stroke-dasharray:2 9}
.nw-hit{stroke:transparent;stroke-width:26;cursor:pointer;pointer-events:stroke}
.nw-pk circle{fill:var(--bg);stroke:var(--teal);stroke-width:3}
html.night .nw-pk circle{fill:#fff;stroke:var(--teal)}
.nw-pk{transition:opacity .2s}
.nw-r circle{fill:var(--p-raise);stroke:rgba(var(--fg-rgb),.18);stroke-width:1.5}
html.night .nw-r circle{fill:#151150}
.nw-r .nw-rd{fill:rgba(var(--fg-rgb),.35);stroke:none}
.nw-n rect{fill:var(--navy);stroke:none}
html.night .nw-n rect{fill:#fff}
.nw-ni{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transform:scale(1.15)}
html.night .nw-ni{stroke:var(--navy)}
.nw-nl,.nw-tl{font:650 15px var(--display);fill:var(--soft)}
.nw-tl{font-size:13px;fill:var(--dim);letter-spacing:.02em}
.nw-tw circle{fill:var(--p-raise);stroke:rgba(var(--fg-rgb),.16);stroke-width:1.5}
html.night .nw-tw circle{fill:#151150}
.nw-tw path{fill:none;stroke:var(--dim);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.nw-twd{fill:var(--dim);stroke:none!important}
.nw-map.on-cell .nw-tw path{stroke:var(--accent)}
.nw-map.on-cell .nw-twd{fill:var(--accent)}
.nw-map.on-cell .nw-tw circle{stroke:var(--teal)}
.nw-map.on-cell .nw-tl{fill:var(--accent)}
.nw-cut{position:absolute;z-index:2;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;display:grid;place-items:center;background:var(--p-raise)!important;color:var(--soft);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line);transform:scale(.78);transition:transform .3s var(--ease),color .25s,background .25s,box-shadow .3s}
html.night .nw-cut{background:#151150!important}
.nw-cut .pi{width:17px;height:17px;opacity:.85;transition:opacity .2s}
.nw-cut:hover,.nw-cut:focus-visible{transform:scale(1);color:var(--p-bad);box-shadow:var(--p-sh),inset 0 0 0 1.5px var(--p-bad-line)}
.nw-cut:hover .pi,.nw-cut:focus-visible .pi{opacity:1}
.nw-cut:focus-visible{border-radius:50%}
.nw-cut.is-cut{transform:scale(.7);color:#fff;background:var(--danger-solid)!important;box-shadow:none}
.nw-cut.is-cut .pi{opacity:1}
@media (hover:none){.nw-cut{transform:scale(.86)}}

/* =================== VOIP =================== */
.vo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:center;justify-content:center}
.vo-phone{width:236px;padding:9px;border-radius:40px;background:var(--navy);box-shadow:0 30px 60px -30px rgba(9,0,87,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
html.night .vo-phone{background:#1b1760;box-shadow:0 30px 60px -30px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.1)}
.vo-scr{position:relative;display:flex;flex-direction:column;align-items:center;min-height:400px;padding:44px 18px 26px;border-radius:32px;background:linear-gradient(180deg,#140f5c 0%,#090057 100%);color:#fff;overflow:hidden}
.vo-scr::before{content:"";position:absolute;top:10px;left:50%;width:70px;height:20px;margin-left:-35px;border-radius:12px;background:#05031d}
.vo-who{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.vo-av{position:relative;display:grid;place-items:center;width:76px;height:76px;margin-bottom:8px;border-radius:50%;background:rgba(255,255,255,.08)}
.vo-av svg{width:44px;height:44px}
.vo-ring{fill:none;stroke:var(--teal);stroke-width:4.6;stroke-linecap:round}
.vo-dot{fill:#fff}
.vo-av::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(2,211,224,.5);opacity:0}
[data-ph="ring"] .vo-av::after{opacity:1;animation:vo-ring 1.1s ease-out infinite}
@keyframes vo-ring{0%{box-shadow:0 0 0 0 rgba(2,211,224,.55)}100%{box-shadow:0 0 0 22px rgba(2,211,224,0)}}
.vo-name{margin:0;font:650 19px/1.2 var(--display);letter-spacing:-.01em}
.vo-st{margin:0;min-height:20px;font:500 14.5px/1.35 var(--body);color:rgba(255,255,255,.66);font-variant-numeric:tabular-nums}
[data-ph="live"] .vo-st{color:var(--teal)}
.vo-talk{flex:1;display:flex;align-items:center;width:100%;padding:14px 0}
.vo-bub{position:relative;width:100%;margin:0;padding:14px 16px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.1);font:500 14.5px/1.45 var(--body);color:#fff;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease)}
[data-ph="live"] .vo-bub,[data-ph="end"] .vo-bub:not(:empty){opacity:1;transform:none}
[data-ph="end"] .vo-bub{opacity:.5!important}
.vo-ctl{display:flex;justify-content:center}
.vo-call{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#2fd17c!important;color:#fff!important;box-shadow:0 10px 24px -8px rgba(47,209,124,.7);transition:background .3s,transform .3s var(--ease),box-shadow .3s}
.vo-call .pi{width:26px;height:26px;fill:currentColor;stroke:none;transition:transform .4s var(--ease)}
.vo-call:hover{transform:scale(1.05)}
.vo-call.is-end{background:#ff4d5e!important;box-shadow:0 10px 24px -8px rgba(255,77,94,.7)}
.vo-call.is-end .pi{transform:rotate(135deg)}
.vo-call:focus-visible{outline-color:#fff;border-radius:50%}
[data-ph="idle"] .vo-call{animation:vo-nudge 2.4s ease-in-out infinite}
@keyframes vo-nudge{0%,70%,100%{box-shadow:0 10px 24px -8px rgba(47,209,124,.7),0 0 0 0 rgba(47,209,124,.45)}85%{box-shadow:0 10px 24px -8px rgba(47,209,124,.7),0 0 0 12px rgba(47,209,124,0)}}
.vo-side{display:flex;flex-direction:column;gap:18px;min-width:0;max-width:340px}
.vo-route{display:flex;flex-direction:column;align-items:center;padding:18px 16px 16px;border-radius:18px;background:var(--p-panel);box-shadow:inset 0 0 0 1px var(--line)}
.vo-num{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 16px;border-radius:999px;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line);font:650 14px/1 var(--display)}
.vo-num .pi{width:16px;height:16px;fill:var(--accent);stroke:none}
.vo-fork{display:block;width:100%;height:34px}
.vo-p{fill:none;stroke:rgba(var(--fg-rgb),.14);stroke-width:2;vector-effect:non-scaling-stroke;transition:stroke .4s}
.vo[data-to="desk"] .vo-pd,.vo[data-to="cell"] .vo-pc{stroke:var(--teal)}
.vo-ends{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:10px}
.vo-end{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px 12px;border-radius:14px;background:var(--p-raise);box-shadow:inset 0 0 0 1px var(--line);font:650 13.5px/1.1 var(--display);color:var(--dim);transition:color .35s,box-shadow .35s,background .35s}
.vo-end .pi{width:26px;height:26px}
.vo[data-to="desk"] .vo-end[data-e="desk"],.vo[data-to="cell"] .vo-end[data-e="cell"]{color:var(--fg);box-shadow:var(--p-sh),inset 0 0 0 1.5px var(--p-ok-line)}
.vo[data-to="desk"][data-ph="ring"] .vo-end[data-e="desk"] .pi,.vo[data-to="cell"][data-ph="ring"] .vo-end[data-e="cell"] .pi{animation:vo-buzz .5s ease-in-out infinite;color:var(--accent)}
.vo[data-to="desk"][data-ph="live"] .vo-end[data-e="desk"],.vo[data-to="cell"][data-ph="live"] .vo-end[data-e="cell"]{background:var(--p-ok-bg)}
@keyframes vo-buzz{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}

/* =================== STRATEGY =================== */
.st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.st-col{display:flex;flex-direction:column;gap:10px;min-height:290px;padding:14px 10px 10px;border-radius:18px;background:var(--p-panel);box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,box-shadow .25s}
.st-col.is-over{background:var(--p-ok-bg);box-shadow:inset 0 0 0 1.5px var(--p-ok-line)}
.st-h{display:flex;align-items:center;justify-content:space-between;margin:0;padding:0 6px;font:700 13px/1 var(--display)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.st-col[data-c="0"] .st-h{color:var(--accent)}
.st-n{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--p-panel-2);font-size:12px;letter-spacing:0;color:var(--dim)}
.st-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.st-card{position:relative;display:flex;align-items:center;gap:4px;min-height:58px;padding:8px 4px;border-radius:14px;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line);transition:box-shadow .3s,transform .3s var(--ease)}
.st-card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--teal);opacity:.9}
.st-card[data-t="sec"]::before{background:var(--navy)}
html.night .st-card[data-t="sec"]::before{background:#8f8cff}
.st-card[data-t="hw"]::before{background:rgba(255,190,80,.9)}
.st-card[data-t="net"]::before{background:rgba(var(--fg-rgb),.3)}
.st-card.is-lift{box-shadow:0 18px 40px -16px rgba(9,0,87,.45),inset 0 0 0 1px var(--line)}
.st-card.is-drag{transform-origin:center}
.st-card.is-moved{animation:st-moved .9s var(--ease)}
@keyframes st-moved{0%{box-shadow:var(--p-sh),inset 0 0 0 1.5px var(--p-ok-line)}}
.st-t{flex:1;min-width:0;font:650 14px/1.25 var(--display);padding:0 2px}
.st-mv{flex:none;display:grid;place-items:center;width:30px;height:36px;border-radius:9px;color:var(--dim);transition:color .2s,background .2s,opacity .2s}
.st-mv .pi{width:16px;height:16px;stroke-width:2}
.st-mv:hover:not(:disabled){background:var(--p-panel);color:var(--fg)}
.st-mv:disabled{opacity:0;pointer-events:none}

/* =================== responsive =================== */
@media (max-width:1180px) and (min-width:1024px){.play-stage{padding:22px}}
@media (max-width:760px){
  .play{border-radius:24px}
  .play-stage{padding:18px;min-height:0}
  .play-bar{padding:10px 10px 10px 18px;min-height:60px}
  .play-msg{font-size:14px}
  .play-again{height:38px;padding:0 13px 0 11px}
  .mit,.ph{grid-template-columns:minmax(0,1fr)}
  .mit-floor{padding:14px}
  .mit-grid{gap:8px}
  .mit-m{padding:14px 4px 11px;gap:8px;border-radius:14px}
  .mit-ic{width:40px;height:40px;border-radius:12px}
  .mit-l{font-size:12px}
  .mit-tix{min-height:58px}
  .cl-row{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px}
  .cl-f{gap:8px;padding:8px}
  .cl-fi{width:30px;height:30px;border-radius:8px}
  .cl-fn{font-size:13px}
  .cl-fs{width:18px;height:18px}
  .cl-devs{gap:10px}
  .cl-ph .cl-scr{width:46px}
  .cl-lap .cl-grid{gap:4px;padding:6px}
  .cl-g{width:20px;height:20px;border-radius:5px}
  .cl-g .pi{width:12px;height:12px}
  .cl-ph .cl-grid{padding:8px 3px;gap:4px}
  .cl-ph .cl-g{width:18px;height:18px}
  .cl-ph .cl-g .pi{width:11px;height:11px}
  .bk-files{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;gap:8px}
  .bk-f{gap:8px;padding:8px}
  .bk-fi{width:28px;height:28px;border-radius:8px}
  .bk-fi .pi{width:16px;height:16px}
  .bk-fn{font-size:13px}
  .ph-c:not(.is-on){display:none}
  .ph-clues:not(:has(.is-on)){display:none}
  .bk-hit span{font-size:13px}
  .vo{grid-template-columns:minmax(0,1fr);justify-items:center}
  .vo-phone{width:min(236px,100%)}
  .vo-scr{min-height:360px;padding-top:38px}
  .vo-av{width:64px;height:64px;margin-bottom:4px}
  .vo-side{max-width:none;width:100%}
}
@media (max-width:620px){
  .st{grid-template-columns:minmax(0,1fr);gap:10px}
  .st-col{min-height:0;padding:12px 8px 8px}
  .st-list{min-height:58px}
  .st-mv .pi{transform:rotate(90deg)}
}
@media (max-width:420px){
  .ph-mail{padding:16px 14px 14px;font-size:14.5px}
  .ph-subj{font-size:15.5px}
  .bk-ticks span{font-size:11.5px}
  .bk-bar{padding:10px 10px 10px 14px}
  .bk-ttl{font-size:14px;gap:8px}
  .bk-ttl .pi{display:none}
  .bk-hit{padding:0 12px 0 10px}
  .nw-cut{width:32px;height:32px;margin:-16px 0 0 -16px}
}

/* =================== reduced motion: everything works, nothing big moves =================== */
@media (prefers-reduced-motion:reduce){
  .play *,.play *::before,.play *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.12s!important;transition-delay:0s!important}
  .nw-e.is-live{stroke-dasharray:10 8}
}

/* ---------- industries: find the risks (MODS.risk) ---------- */
.rk{display:flex;flex-direction:column;gap:16px}
.rk-top{display:flex;align-items:center;gap:14px}
.rk-lv{margin:0;display:flex;align-items:baseline;gap:8px;font:650 14px/1 var(--display);color:var(--dim);white-space:nowrap}
.rk-n{font-size:16px;color:var(--danger-ink);font-variant-numeric:tabular-nums;transition:color .4s}
.rk.is-ready .rk-n{color:var(--accent)}
.rk-bar{flex:1;display:flex;gap:6px}
.rk-bar i{flex:1;height:8px;border-radius:99px;background:var(--danger-ink);opacity:.85;transition:background .45s,opacity .45s}
.rk-bar i.on{background:var(--teal);opacity:1}
.rk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rk-i{position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;min-height:92px;padding:14px;border-radius:16px;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1.5px rgba(255,93,108,.45);text-align:left;transition:box-shadow .35s,background .35s,transform .3s var(--ease)}
.rk-i:hover:not(.is-on){transform:translateY(-2px)}
.rk-i:not(.is-on){animation:rk-pulse 2.4s ease-in-out infinite}
.rk-i:nth-child(2){animation-delay:.6s}.rk-i:nth-child(3){animation-delay:1.2s}.rk-i:nth-child(4){animation-delay:1.8s}
@keyframes rk-pulse{0%,100%{box-shadow:var(--p-sh),inset 0 0 0 1.5px rgba(255,93,108,.35)}50%{box-shadow:var(--p-sh),inset 0 0 0 1.5px rgba(255,93,108,.85),0 0 0 4px rgba(255,93,108,.10)}}
.rk-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,93,108,.12);color:var(--danger-ink);transition:background .35s,color .35s}
.rk-t{flex:1;min-width:0;display:grid}
.rk-tag{display:grid;font:700 11px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.rk-tag em,.rk-t>b{grid-area:auto;font-style:normal}
.rk-tag em{grid-area:1/1;transition:opacity .3s}
.rk-bad{color:var(--danger-ink)}.rk-ok{color:var(--accent);opacity:0}
.rk-t>b{grid-area:2/1;font:650 14px/1.28 var(--display);transition:opacity .35s,transform .4s var(--ease)}
.rk-fix{opacity:0;transform:translateY(6px)}
.rk-ck{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--teal);color:var(--ink);opacity:0;transform:scale(.5);transition:opacity .3s,transform .4s var(--ease)}
.rk-ck .pi{width:14px;height:14px;stroke-width:2.8}
.rk-i.is-on{background:var(--p-panel);box-shadow:inset 0 0 0 1.5px rgba(2,211,224,.55);cursor:default}
.rk-i.is-on .rk-ic{background:var(--teal);color:var(--ink)}
.rk-i.is-on .rk-bad,.rk-i.is-on .rk-risk{opacity:0}
.rk-i.is-on .rk-ok,.rk-i.is-on .rk-fix{opacity:1;transform:none}
.rk-i.is-on .rk-ck{opacity:1;transform:none}
.rk.is-ready .rk-grid{animation:co-glow 1.2s var(--ease)}
@media (max-width:560px){.rk-grid{grid-template-columns:1fr}.rk-i{min-height:0;padding:11px 12px}.rk-ic{width:34px;height:34px}}
@media (prefers-reduced-motion:reduce){.rk-i:not(.is-on){animation:none}}

/* =====================================================================
   ROUND 8: richer demos (compliance, software, and one mechanic per industry)
   ===================================================================== */
.play .p-btn,.ob-go,.lg-go,.fn-go,.rt-go{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 18px;border-radius:999px;background:var(--fg);color:var(--bg)!important;font:650 15px/1.15 var(--display)!important;box-shadow:0 10px 22px -14px rgba(9,0,87,.8);transition:filter .25s,opacity .25s,transform .25s var(--ease),background .3s}
html.night :is(.ob-go,.lg-go,.fn-go,.rt-go){background:var(--teal);color:var(--ink)!important;box-shadow:0 10px 22px -14px rgba(2,211,224,.8)}
:is(.ob-go,.lg-go,.fn-go,.rt-go):hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}
:is(.ob-go,.lg-go,.fn-go,.rt-go):disabled{opacity:.38;cursor:default;box-shadow:none}
:is(.ob-go,.lg-go,.fn-go,.rt-go) .pi{width:19px;height:19px;stroke-width:2}
.play [hidden]{display:none!important}

/* ---------- COMPLIANCE: audit binder ---------- */
.ab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"ask ask" "mid tray";gap:18px 22px;align-items:start}
.ab-ask{grid-area:ask;display:flex;gap:12px;align-items:flex-start}
.ab-av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--fg);color:var(--bg)}
html.night .ab-av{background:var(--p-panel-2);color:var(--teal)}
.ab-bub{flex:1;min-width:0;padding:12px 16px 14px;border-radius:4px 18px 18px 18px;background:var(--p-panel);box-shadow:inset 0 0 0 1px var(--line)}
.ab-who{margin:0 0 4px;display:flex;justify-content:space-between;gap:10px;font:650 12.5px/1.2 var(--display);color:var(--dim)}
.ab-who>b{color:var(--fg)}
.ab-k{font-variant-numeric:tabular-nums}.ab-k b{color:var(--fg)}
.ab-q{margin:0;font:600 17px/1.32 var(--display);color:var(--fg);letter-spacing:-.01em}
.ab-q.in{animation:p-txt .45s var(--ease)}
.ab-mid{grid-area:mid}
.ab-binder{position:relative;display:flex;height:210px;padding-right:46px}
.ab-spine{flex:none;width:30px;border-radius:12px 0 0 12px;background:var(--ink);display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:24px 0}
html.night .ab-spine{background:#2a2470}
.ab-spine i{width:12px;height:12px;border-radius:50%;background:var(--bg-2);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.ab-pages{flex:1;position:relative;border-radius:0 12px 12px 0;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line),4px 4px 0 -1px var(--bg-3),8px 8px 0 -2px var(--line);padding:16px 14px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .4s}
.ab-ttl{margin:0;font:700 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ab-sheet{flex:1;display:grid;place-items:center}
.ab-sheet:empty::before{content:"";width:70%;height:70%;border:1.5px dashed var(--line);border-radius:10px}
.ab-pg{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;text-align:center}
.ab-pg .pi{width:30px;height:30px;color:var(--accent)}
.ab-pg b{font:650 14px/1.2 var(--display)}
.ab-pg i{display:block;width:78%;height:5px;border-radius:9px;background:var(--p-panel-2)}
.ab-pg i:last-child{width:52%}
.ab-tabs{position:absolute;right:0;top:10px;bottom:10px;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;width:56px}
.ab-tabs li{flex:1;display:flex;align-items:center;padding-left:14px;border-radius:0 9px 9px 0;background:var(--p-panel-2);font:700 9.5px/1 var(--display);letter-spacing:.02em;color:var(--dim);transition:background .4s,color .4s,transform .4s var(--ease);transform:translateX(-8px)}
.ab-tabs li.is-cur{transform:none;box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--fg)}
.ab-tabs li.is-on{background:var(--teal);color:var(--ink);transform:none}
.ab.is-ready .ab-pages{box-shadow:0 0 0 2px var(--teal),0 12px 30px -12px rgba(2,211,224,.6)}
.ab-tray{grid-area:tray;display:flex;flex-direction:column;gap:10px;min-width:0}
.ab-docs{display:flex;flex-direction:column;gap:8px}
.ab-d{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:14px;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line);text-align:left;transition:opacity .35s,box-shadow .3s,transform .3s var(--ease)}
.ab-d:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--p-sh),inset 0 0 0 1.5px var(--accent)}
.ab-di{flex:none;display:grid;place-items:center;width:36px;height:42px;border-radius:6px 12px 6px 6px;background:var(--p-panel);color:var(--accent)}
.ab-di .pi{width:19px;height:19px}
.ab-dt{min-width:0;display:flex;flex-direction:column;gap:2px}
.ab-dt b{font:650 14px/1.2 var(--display)}.ab-dt small{font-size:12.5px;line-height:1.25;color:var(--dim)}
.ab-d.is-in{opacity:.32;box-shadow:inset 0 0 0 1px var(--line);cursor:default}
.ab-flyd{display:grid;place-items:center;width:40px;height:48px;border-radius:6px 12px 6px 6px;background:var(--teal);color:var(--ink);box-shadow:0 10px 20px -8px rgba(2,211,224,.8)}

/* ---------- SOFTWARE: new hire ---------- */
.ob{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;align-items:center}
.ob-l{display:flex;flex-direction:column;gap:12px;min-width:0}
.ob-who{display:flex;align-items:center;gap:12px;padding:12px 14px}
.ob-av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--teal),#6b8cff);color:var(--ink);font:700 15px/1 var(--display)}
.ob-who b{display:block;font:650 16px/1.2 var(--display)}.ob-who small{font-size:13px;color:var(--dim)}
.ob.is-leaving .ob-av{filter:grayscale(1);opacity:.6}
.ob-roles{display:flex;gap:6px;padding:4px;border-radius:999px;background:var(--p-panel);box-shadow:inset 0 0 0 1px var(--line)}
.ob-role{flex:1;min-height:40px;padding:0 8px;border-radius:999px;text-align:center!important;font:650 14px/1 var(--display)!important;color:var(--soft)!important;transition:background .3s,color .3s,box-shadow .3s}
.ob-role[aria-checked="true"]{background:var(--p-raise);color:var(--fg)!important;box-shadow:var(--p-sh),inset 0 0 0 1px var(--line)}
.ob-role:disabled{cursor:default}
.ob-role:disabled:not([aria-checked="true"]){opacity:.45}
.ob-go.is-off{background:transparent;color:var(--fg)!important;box-shadow:inset 0 0 0 1.5px var(--fg)}
html.night .ob-go.is-off{background:transparent;color:var(--teal)!important;box-shadow:inset 0 0 0 1.5px var(--teal)}
.ob-r{display:flex;flex-direction:column;gap:12px;min-width:0}
.ob-lap{display:flex;flex-direction:column;align-items:center}
.ob-scr{position:relative;width:100%;aspect-ratio:16/9.5;border-radius:12px 12px 4px 4px;background:var(--ink);padding:10px;box-shadow:inset 0 0 0 5px #1b1660;overflow:hidden}
html.night .ob-scr{background:#05031f}
.ob-apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:6px}
.ob-app{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:10px;background:rgba(255,255,255,.08);color:var(--teal);transition:opacity .4s,filter .4s}
.ob-app .pi{width:20px;height:20px}
.ob-app small{font:650 10.5px/1 var(--display);color:#e7e9ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ob.is-leaving .ob-app{opacity:.25;filter:grayscale(1)}
.ob-lock{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(5,3,31,.88);color:#fff;font:650 14px/1 var(--display);opacity:0;transition:opacity .5s}
.ob-lock .pi{color:var(--teal)}
.ob.is-wiped .ob-lock{opacity:1}
.ob-base{width:112%;height:9px;border-radius:0 0 10px 10px;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line)}
.ob-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;min-height:116px}
.ob-ln{display:flex;align-items:center;gap:9px;font:600 13.5px/1.3 var(--display);color:var(--soft)}
.ob-ck{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--teal);color:var(--ink)}
.ob-ck .pi{width:12px;height:12px;stroke-width:2.8}
.ob-ln.is-off .ob-ck{background:var(--fg);color:var(--bg)}
html.night .ob-ln.is-off .ob-ck{background:var(--p-panel-2);color:var(--teal)}
.ob-apps:empty::before{content:"New laptop";grid-column:1/-1;display:block;padding-top:16%;text-align:center;font:600 12px/1 var(--display);color:rgba(231,233,255,.45)}
.ob-log:empty::before{content:"The setup log appears here.";font-size:13px;color:var(--dim)}

/* ---------- ACCOUNTING: tax-season inbox (swipe) ---------- */
.tx{display:flex;flex-direction:column;gap:14px;max-width:520px;margin:0 auto;width:100%}
.tx-head{display:flex;align-items:center;gap:12px}
.tx-head b{display:block;font:650 16px/1.2 var(--display)}.tx-head small{font-size:13px;color:var(--dim)}
.tx-cal{flex:none;display:flex;flex-direction:column;align-items:center;width:44px;border-radius:10px;overflow:hidden;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line)}
.tx-cal small{display:block;width:100%;text-align:center;background:var(--danger-solid);color:#fff;font:700 10px/1.6 var(--display);text-transform:uppercase;letter-spacing:.08em}
.tx-cal b{font:700 18px/1.5 var(--display)!important}
.tx-score{margin-left:auto;font:700 15px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--accent)}
.tx-deck{position:relative;display:flex;flex-direction:column;gap:10px}
.tx-stack{position:relative;height:166px}
.tx-c{position:absolute;inset:0;padding:16px 18px;border-radius:20px;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line);transform:translateY(calc(var(--k) * 9px)) scale(calc(1 - var(--k) * .04));transition:transform .45s var(--ease),filter .45s;touch-action:none;cursor:grab;overflow:hidden}
.tx-c:last-child{transition:none}
.tx-c>*{transition:opacity .3s}
.tx-c:not(.is-top)>*{opacity:0}
.tx-c:not(.is-top){filter:brightness(.97)}
html.night .tx-c:not(.is-top){filter:brightness(.85)}
.tx-c.is-hold{cursor:grabbing}
.tx-from{margin:0 0 10px;display:flex;align-items:center;gap:10px;min-width:0}
.tx-from>span:last-child{min-width:0}
.tx-from b{display:block;font:650 14.5px/1.2 var(--display)}
.tx-from small{display:block;font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-av{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--p-panel-2);font:700 14px/1 var(--display);color:var(--soft)}
.tx-subj{margin:0 0 6px;font:650 17px/1.25 var(--display);letter-spacing:-.01em}
.tx-body{margin:0;font-size:14.5px;line-height:1.4;color:var(--soft)}
.tx-stamp{position:absolute;top:16px;padding:5px 10px;border-radius:8px;font:800 13px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .15s}
.tx-s1{right:16px;color:var(--p-bad);box-shadow:inset 0 0 0 2px var(--p-bad);transform:rotate(8deg)}
.tx-s0{right:16px;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);transform:rotate(-8deg)}
.tx-c.lean-rep .tx-s1,.tx-c.is-rep .tx-s1,.tx-c.lean-ok .tx-s0,.tx-c.is-ok .tx-s0{opacity:1}
.tx-why{margin:0;min-height:40px;font-size:14px;line-height:1.4;color:var(--soft);opacity:0;transition:opacity .3s}
.tx-why.on{opacity:1}
.tx-why b.ok{color:var(--accent)}.tx-why b.bad{color:var(--p-bad)}
.tx-act{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tx-b{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:16px;font:650 15px/1 var(--display)!important;box-shadow:inset 0 0 0 1.5px var(--line);transition:background .25s,box-shadow .25s,opacity .3s}
.tx-rep{color:var(--p-bad)!important}.tx-rep:hover:not(:disabled){background:var(--p-bad-bg);box-shadow:inset 0 0 0 1.5px var(--p-bad-line)}
.tx-ok{color:var(--accent)!important}.tx-ok:hover:not(:disabled){background:var(--p-ok-bg);box-shadow:inset 0 0 0 1.5px var(--p-ok-line)}
.tx-b:disabled{opacity:.35}
.tx-done{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:20px;background:var(--p-panel);box-shadow:inset 0 0 0 1.5px var(--p-ok-line)}
.tx-done .pi{width:36px;height:36px;padding:7px;border-radius:50%;background:var(--teal);color:var(--ink);stroke-width:2.6}
.tx-done b{font:650 18px/1.2 var(--display)}.tx-done small{color:var(--dim);font-size:14px}

/* ---------- HEALTHCARE: clinic floor plan ---------- */
.hc{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:center}
.hc-plan{position:relative;width:100%;aspect-ratio:320/200;border-radius:16px;background:var(--p-panel);box-shadow:inset 0 0 0 1px var(--line);background-image:radial-gradient(circle,var(--line) 1px,transparent 1.4px);background-size:16px 16px}
.hc-svg{position:absolute;inset:0;width:100%;height:100%}
.hc-out{fill:none;stroke:rgba(var(--fg-rgb),.35);stroke-width:2.5}
.hc-wall{fill:none;stroke:rgba(var(--fg-rgb),.35);stroke-width:2.5;stroke-linecap:round}
.hc-rl{font:700 9px var(--display);fill:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.hc-f>*{fill:var(--p-panel-2);stroke:rgba(var(--fg-rgb),.14)}
.hc-spot{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;border-radius:50%}
.hc-ring{position:absolute;inset:8px;border-radius:50%;background:var(--danger-ink);box-shadow:0 0 0 0 rgba(255,93,108,.5);animation:mit-pulse 1.6s ease-out infinite}
.hc-ic{position:relative;font:800 15px/1 var(--display);color:#fff}
.hc-ok{position:absolute;inset:8px;display:grid;place-items:center;border-radius:50%;background:var(--teal);color:var(--ink);opacity:0;transform:scale(.5);transition:opacity .3s,transform .4s var(--ease)}
.hc-ok .pi{width:16px;height:16px;stroke-width:2.8}
.hc-spot.is-cur .hc-ring{box-shadow:0 0 0 5px rgba(255,93,108,.25)}
.hc-spot.is-fixed .hc-ring{animation:none;opacity:0}.hc-spot.is-fixed .hc-ic{opacity:0}
.hc-spot.is-fixed .hc-ok{opacity:1;transform:none}
.hc-card{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.hc-where{margin:0;font:700 11.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--p-bad)}
.hc-what{margin:0;font:600 16px/1.35 var(--display)}
.hc-opts{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.hc-o{min-height:52px;padding:10px 12px;border-radius:13px;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line);font:600 14px/1.3 var(--display)!important;transition:box-shadow .3s,background .3s,opacity .3s}
.hc-o:hover:not(:disabled){box-shadow:var(--p-sh),inset 0 0 0 1.5px var(--accent)}
.hc-o.is-no{opacity:.55;box-shadow:inset 0 0 0 1.5px var(--p-bad-line);text-decoration:line-through;text-decoration-color:var(--p-bad)}
.hc-o.is-yes{background:var(--teal);color:var(--ink)!important;box-shadow:none;opacity:1}
.hc-o:disabled:not(.is-yes):not(.is-no){opacity:.5}
.hc-note{margin:0;font-size:13.5px;line-height:1.4;color:var(--p-bad);min-height:0}
.hc-note:empty{display:none}
.hc-hint{margin:0;display:flex;align-items:center;gap:10px;font:600 14px/1.35 var(--display);color:var(--soft)}
.hc-hint .pi{color:var(--accent)}
.hc.is-ready .hc-plan{box-shadow:inset 0 0 0 2px var(--teal)}

/* ---------- LEGAL: matter access review ---------- */
.lg{display:flex;flex-direction:column;gap:12px}
.lg-head{display:flex;align-items:center;gap:12px}
.lg-f{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--fg);color:var(--bg)}
html.night .lg-f{background:var(--p-panel-2);color:var(--teal)}
.lg-head b{display:block;font:650 16px/1.2 var(--display)}.lg-head small{font-size:13px;color:var(--dim)}
.lg-cnt{margin-left:auto;font:600 13px/1.2 var(--display);color:var(--dim);white-space:nowrap}
.lg-n{font-size:16px;color:var(--fg);font-variant-numeric:tabular-nums}
.lg-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lg-r{display:flex;align-items:flex-start;gap:10px;padding:10px 10px 10px 12px;border-radius:14px;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line);transition:box-shadow .3s,background .3s}
.lg-av{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--p-panel-2);font:700 12px/1 var(--display);color:var(--soft);transition:opacity .3s}
.lg-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lg-t b{font:650 14px/1.2 var(--display)}.lg-t small{font-size:12.5px;line-height:1.3;color:var(--dim)}
.lg-why{font-style:normal;font-size:12.5px;line-height:1.3;margin-top:3px}
.lg-why:empty{display:none}
.lg-sw{flex:none;display:inline-flex;margin-top:3px;border-radius:999px}
.lg-r.is-off{background:var(--p-panel);box-shadow:inset 0 0 0 1px var(--line)}
.lg-r.is-off .lg-av,.lg-r.is-off .lg-t b{opacity:.55}
.lg-r.is-off .lg-t b{text-decoration:line-through}
.lg-r.is-bad{box-shadow:inset 0 0 0 1.5px var(--p-bad-line)}.lg-r.is-bad .lg-why{color:var(--p-bad)}
.lg-r.is-good .lg-why{color:var(--accent)}
.lg-r.is-good{box-shadow:inset 0 0 0 1.5px var(--p-ok-line)}
.lg-go{align-self:flex-start}

/* ---------- FINANCIAL: patch windows ---------- */
.fn{display:flex;flex-direction:column;gap:12px}
.fn-axis{position:relative;height:14px;margin:0 0 0 calc(var(--fn-l,170px) + 12px);font:700 10.5px/1 var(--display);color:var(--dim)}
.fn-axis span{position:absolute;top:0;transform:translateX(-50%)}
.fn-axis span:first-child{transform:none}.fn-axis span:last-child{transform:translateX(-100%)}
.fn-rows{display:flex;flex-direction:column;gap:10px}
.fn-row{display:grid;grid-template-columns:var(--fn-l,170px) minmax(0,1fr);gap:12px;align-items:center}
.fn-l{margin:0;display:grid;grid-template-columns:22px 1fr;column-gap:8px;align-items:center}
.fn-l .pi{grid-row:span 2;width:20px;height:20px;color:var(--accent)}
.fn-l b{font:650 14px/1.2 var(--display)}
.fn-t{font:600 12px/1.3 var(--display);color:var(--accent)}
.fn-row.is-bad .fn-t{color:var(--p-bad)}
.fn-track{position:relative;height:44px;border-radius:12px;background:var(--p-panel);box-shadow:inset 0 0 0 1px var(--line);background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:calc(100% / 8) 100%}
.fn-mkt{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,rgba(255,93,108,.13) 0 6px,rgba(255,93,108,.05) 6px 12px);box-shadow:inset 0 0 0 1px rgba(255,93,108,.25)}
.fn-blk{position:absolute;top:5px;bottom:5px;display:grid;place-items:center;border-radius:9px;background:var(--teal);color:var(--ink);box-shadow:0 6px 14px -8px rgba(2,211,224,.9);cursor:grab;touch-action:none;min-width:30px;transition:background .3s,box-shadow .3s}
.fn-blk .pi{width:16px;height:16px;stroke-width:2.2}
.fn-blk.is-bad{background:var(--danger-solid);color:#fff;box-shadow:0 6px 14px -8px rgba(255,93,108,.9)}
.fn-blk.is-drag{cursor:grabbing;box-shadow:0 0 0 4px rgba(2,211,224,.25)}
.fn-blk.is-bad.is-drag{box-shadow:0 0 0 4px rgba(255,93,108,.25)}
.fn-blk:focus-visible{outline-offset:2px}
.fn-blk.is-done{background:var(--fg);color:var(--teal)}
html.night .fn-blk.is-done{background:#fff;color:var(--ink)}
.fn.is-run .fn-blk{cursor:default}
.fn-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:4px}
.fn-key{margin:0;display:flex;align-items:center;gap:8px;font:600 13px/1.2 var(--display);color:var(--dim)}
.fn-key i{width:18px;height:12px;border-radius:3px;background:repeating-linear-gradient(135deg,rgba(255,93,108,.3) 0 3px,rgba(255,93,108,.1) 3px 6px);box-shadow:inset 0 0 0 1px rgba(255,93,108,.35)}

/* ---------- MANUFACTURING: network sort ---------- */
.mf{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:20px;align-items:start}
.mf-tray{display:flex;flex-direction:column;gap:10px;min-width:0}
.mf-devs{display:flex;flex-wrap:wrap;gap:8px;min-height:44px}
.mf-d{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 12px 8px 10px;border-radius:12px;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line);font:650 13.5px/1.15 var(--display)!important;text-align:left;transition:box-shadow .25s,transform .25s var(--ease),background .25s}
.mf-d .pi{width:18px;height:18px;color:var(--accent)}
.mf-d:hover:not(:disabled){transform:translateY(-2px)}
.mf-d.is-sel{box-shadow:0 0 0 2px var(--accent),0 10px 20px -10px rgba(2,211,224,.7);transform:translateY(-2px)}
.mf-d.is-in{min-height:34px;padding:5px 10px 5px 8px;font-size:12.5px!important;box-shadow:inset 0 0 0 1px var(--line);background:var(--p-raise);cursor:default}
.mf-d.is-in .pi{width:15px;height:15px}
.mf-zones{position:relative;display:flex;flex-direction:column;gap:10px}
.mf-z{position:relative;min-height:84px;padding:10px 12px 12px;border-radius:16px;background:var(--p-panel);box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .25s,background .25s;overflow:hidden}
.mf-z.is-over,.mf.has-sel .mf-z:hover{box-shadow:inset 0 0 0 2px var(--accent);background:var(--p-ok-bg)}
.mf-zh{display:flex;align-items:baseline;gap:8px;width:100%;min-height:28px;margin-bottom:6px;text-align:left}
.mf-zh b{font:700 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.mf-zh small{font-size:12.5px;color:var(--dim)}
.mf.has-sel .mf-zh b{color:var(--accent)}
.mf-in{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.mf-z[data-z="plant"]{background-image:linear-gradient(180deg,transparent 70%,rgba(2,211,224,.06))}
.mf-belt{position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(90deg,rgba(var(--fg-rgb),.12) 0 10px,transparent 10px 20px);opacity:0;transition:opacity .4s}
.mf-belt i{position:absolute;bottom:3px;width:14px;height:10px;border-radius:2px;background:var(--teal);left:-20px}
.mf.is-ready .mf-belt{opacity:1}
.mf.is-ready .mf-belt i{animation:mf-belt 3.6s linear infinite}
.mf.is-ready .mf-belt i:nth-child(2){animation-delay:-1.2s}.mf.is-ready .mf-belt i:nth-child(3){animation-delay:-2.4s}
@keyframes mf-belt{to{left:calc(100% + 20px)}}
.mf-fw{position:absolute;left:50%;top:calc(33.3% - 1px);transform:translate(-50%,-50%) scale(.8);display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--fg);color:var(--bg);font:700 11px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity .4s,transform .5s var(--ease);z-index:2}
.mf-fw .pi{width:14px;height:14px}
html.night .mf-fw{background:var(--teal);color:var(--ink)}
.mf.is-ready .mf-fw{opacity:1;transform:translate(-50%,-50%)}

/* ---------- NONPROFITS: compare ---------- */
.bud{display:flex;flex-direction:column;gap:16px}
.bud-cmp{position:relative;border-radius:18px;overflow:hidden;touch-action:none;cursor:ew-resize;box-shadow:inset 0 0 0 1px var(--line);display:grid}
.bud-side{grid-area:1/1;padding:18px 20px 20px;min-width:0}
.bud-a{background:var(--p-ok-bg)}
html.night .bud-a{background:rgba(2,211,224,.09)}
.bud-b{background:var(--p-raise);box-shadow:inset 0 0 0 1px var(--line)}
.bud-h{margin:0 0 12px;display:flex;align-items:baseline;gap:8px}
.bud-h b{font:700 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase}
.bud-b .bud-h b{color:var(--p-bad)}.bud-a .bud-h b{color:var(--accent)}
.bud-h small{font-size:12.5px;color:var(--dim)}
.bud-a .bud-h{justify-content:flex-end;text-align:right}
.bud-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.bud-side li{display:flex;align-items:center;gap:10px;font:600 14.5px/1.3 var(--display)}
.bud-side li .pi{width:19px;height:19px;flex:none}
.bud-b li .pi{color:var(--p-bad)}.bud-a li .pi{color:var(--accent);stroke-width:2.4}
.bud-b li span{color:var(--soft)}
.bud-line{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--fg);pointer-events:none}
html.night .bud-line{background:var(--teal)}
.bud-h-btn{position:absolute;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--fg);color:var(--bg);box-shadow:0 8px 20px -8px rgba(9,0,87,.6);cursor:ew-resize}
html.night .bud-h-btn{background:var(--teal);color:var(--ink)}
.bud-h-btn .pi{width:15px;height:15px;stroke-width:2.6;margin:0 -2px}
.bud-cmp.is-hint .bud-h-btn{animation:np-hint 1.3s var(--ease) 2}
@keyframes np-hint{50%{transform:translateX(-16px)}}
.bud-meter p{margin:0 0 7px;display:flex;justify-content:space-between;font:650 12px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.bud-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--teal)}
.bud-over{display:block;height:100%;background:rgba(var(--fg-rgb),.22);transition:width .25s var(--ease)}
.bud-mis{flex:1}
.bud.is-ready .bud-bar{box-shadow:0 0 0 4px var(--p-ok-bg)}

/* ---------- EDUCATION: Wi-Fi coverage ---------- */
.ed{display:flex;flex-direction:column;gap:12px}
.ed-plan{position:relative;width:100%;aspect-ratio:16/10;border-radius:16px;background:var(--p-panel);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;touch-action:none}
.ed-heat{position:absolute;inset:0;width:100%;height:100%}
.ed-walls{position:absolute;inset:0;pointer-events:none}
.ed-room{position:absolute;width:33%;height:39%;padding:8px 10px;border:2px solid rgba(var(--fg-rgb),.28);display:flex;flex-direction:column;justify-content:space-between;transition:background .3s}
.ed-room b{font:700 11px/1 var(--display);letter-spacing:.04em;color:var(--soft)}
.ed-room[data-lv="0"]{background:rgba(255,93,108,.07)}
.ed-bars{display:flex;align-items:flex-end;gap:2px;height:13px}
.ed-bars s{display:block;width:4px;border-radius:1px;background:rgba(var(--fg-rgb),.2)}
.ed-bars s:nth-child(1){height:5px}.ed-bars s:nth-child(2){height:9px}.ed-bars s:nth-child(3){height:13px}
.ed-room[data-lv="1"] s:nth-child(1){background:var(--danger-ink)}
.ed-room[data-lv="2"] s:nth-child(-n+2){background:#e4a400}
.ed-room[data-lv="3"] s{background:var(--accent)}
.ed-hall{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:700 10px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.ed-ap{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;border-radius:50%;background:var(--fg);color:var(--teal);box-shadow:0 0 0 4px rgba(2,211,224,.25),0 8px 16px -8px rgba(9,0,87,.7);cursor:grab;touch-action:none;z-index:2}
html.night .ed-ap{background:#fff;color:var(--ink)}
.ed-ap .pi{width:20px;height:20px;stroke-width:2}
.ed-ap.is-drag{cursor:grabbing;box-shadow:0 0 0 8px rgba(2,211,224,.3),0 14px 22px -8px rgba(9,0,87,.7)}
.ed-sum{margin:0;font:600 14px/1.3 var(--display);color:var(--soft)}
.ed-n{font-size:16px;color:var(--fg);font-variant-numeric:tabular-nums}
.ed.is-ready .ed-plan{box-shadow:inset 0 0 0 2px var(--teal)}

/* ---------- REAL ESTATE: wire instructions ---------- */
.re{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px;align-items:start}
.re-mail{padding:16px 18px;display:flex;flex-direction:column;gap:10px;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line)}
.re-top{margin:0;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.re-clock{display:inline-flex;align-items:center;gap:6px;font:650 12.5px/1 var(--display);color:var(--soft)}
.re-clock .pi{width:15px;height:15px;color:var(--p-bad)}
.re-t{font-variant-numeric:tabular-nums;color:var(--fg)}
.re-warn{display:none;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:var(--p-bad-bg);color:var(--p-bad);font:700 11.5px/1 var(--display)}
.re-warn .pi{width:14px;height:14px}
.re.is-ready .re-warn{display:inline-flex}
.re-from{margin:0;display:flex;align-items:center;gap:10px;min-width:0}
.re-from>span:last-child{min-width:0}
.re-av{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--p-panel-2);font:700 15px/1 var(--display)}
.re-from b{display:block;font:650 14.5px/1.2 var(--display)}.re-from small{display:block;font-size:12.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis}
.re-subj{margin:0;font:650 17px/1.25 var(--display);letter-spacing:-.01em}
.re-body{margin:0;font-size:14.5px;line-height:1.45;color:var(--soft)}
.re-acct{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:10px 12px;border-radius:12px;background:var(--p-panel);font:600 13px/1.3 var(--display);color:var(--dim)}
.re-acct b{color:var(--fg);font-variant-numeric:tabular-nums}
.re.is-ready .re-mail{box-shadow:inset 0 0 0 1.5px var(--p-bad-line)}
.re.is-ready .re-acct b{text-decoration:line-through;text-decoration-color:var(--p-bad)}
.re-panel{display:flex;flex-direction:column;gap:8px;min-width:0}
.re-choices{display:flex;flex-direction:column;gap:8px}
.re-c{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 14px;border-radius:14px;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line);font:600 14.5px/1.3 var(--display)!important;text-align:left;transition:box-shadow .25s,transform .25s var(--ease)}
.re-c .pi{width:20px;height:20px;color:var(--accent)}
.re-c:hover{transform:translateX(3px);box-shadow:var(--p-sh),inset 0 0 0 1.5px var(--accent)}
.re-out{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:16px;background:var(--p-panel);box-shadow:inset 0 0 0 1px var(--line)}
.re-out[data-tone="bad"]{background:var(--p-bad-bg);box-shadow:inset 0 0 0 1px var(--p-bad-line)}
.re-out[data-tone="ok"]{box-shadow:inset 0 0 0 1.5px var(--p-ok-line)}
.re-ot{margin:0;font-size:14.5px;line-height:1.45}
.re-out[data-tone="bad"] .re-ot b{color:var(--p-bad)}.re-out[data-tone="ok"] .re-ot b{color:var(--accent)}
.re-call{display:flex;flex-direction:column;gap:6px}
.re-call:empty{display:none}
.re-l{margin:0;max-width:92%;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.35}
.re-l b{font:650 12px/1 var(--display);display:block;margin-bottom:3px;color:var(--dim)}
.re-l.them{align-self:flex-start;background:var(--p-raise);box-shadow:inset 0 0 0 1px var(--line)}
.re-l.you{align-self:flex-end;background:var(--teal);color:var(--ink)}
.re-l.you b{color:rgba(9,0,87,.6)}
.re-back,.re-rep{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px 8px 13px;border-radius:999px;font:650 14px/1 var(--display)!important}
.re-back{box-shadow:inset 0 0 0 1.5px var(--line)}
.re-back .pi,.re-rep .pi{width:17px;height:17px}
.re-rep{background:var(--fg);color:var(--bg)!important}
html.night .re-rep{background:var(--teal);color:var(--ink)!important}
.re-rep:disabled{opacity:.45}

/* ---------- RETAIL: store + live monitoring log ---------- */
.rt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:stretch}
.rt-store{padding:14px;display:flex;flex-direction:column;gap:12px}
.rt-h{margin:0;display:flex;justify-content:space-between;align-items:center;gap:8px}
.rt-h b{font:650 15px/1.2 var(--display)}
.rt-net{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:var(--p-raise);box-shadow:inset 0 0 0 1px var(--line);font:650 11.5px/1 var(--display);color:var(--soft);white-space:nowrap}
.rt-net .pi{width:14px;height:14px;color:var(--accent)}
.rt.is-backup .rt-net{box-shadow:inset 0 0 0 1.5px #e4a400}
.rt.is-backup .rt-net .pi{color:#e4a400}
.rt-regs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rt-reg{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 4px 10px;border-radius:14px;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line);transition:box-shadow .3s,opacity .3s}
.rt-ri{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--p-panel);color:var(--fg)}
.rt-reg b{font:650 12px/1.1 var(--display);text-align:center}
.rt-reg small{font-size:11.5px;color:var(--dim)}
.rt-n{font-variant-numeric:tabular-nums;color:var(--fg);font-weight:700}
.rt-st{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--dim);opacity:.4}
.rt.is-open .rt-st{background:var(--teal);opacity:1}
.rt-reg.is-ding .rt-ri{animation:rt-ding .5s var(--ease)}
@keyframes rt-ding{40%{background:var(--p-ok-bg);color:var(--accent);transform:scale(1.08)}}
.rt-reg.is-bad{box-shadow:var(--p-sh),inset 0 0 0 1.5px var(--p-bad-line)}
.rt-reg.is-bad .rt-st{background:var(--danger-ink);animation:mit-pulse 1.4s ease-out infinite}
.rt-reg.is-bad .rt-ri{background:var(--p-bad-bg);color:var(--p-bad)}
.rt-reg.is-iso{opacity:.45}
.rt-reg.is-iso .rt-st{background:#e4a400}
.rt-go{margin-top:auto;align-self:stretch}
.rt-log{display:flex;flex-direction:column;border-radius:18px;background:#0b0838;color:#e7e9ff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);overflow:hidden;min-height:250px}
html.night .rt-log{background:#05031f}
.rt-lh{margin:0;display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.08);font:650 13px/1 var(--display)}
.rt-lh small{margin-left:auto;color:rgba(231,233,255,.55);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px}
.rt-live{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(2,211,224,.5);animation:rt-live 1.8s ease-out infinite}
@keyframes rt-live{to{box-shadow:0 0 0 8px rgba(2,211,224,0)}}
.rt-lines{list-style:none;margin:0;padding:10px 14px 14px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;flex:1}
.rt-l{display:grid;grid-template-columns:auto 1fr;gap:9px;font:500 12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:rgba(231,233,255,.82)}
.rt-l time{color:rgba(231,233,255,.45)}
.rt-l.bad span{color:#ff8593}.rt-l.ok span{color:var(--teal)}

/* ---------- CONSTRUCTION: missing laptop ---------- */
.cn{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px;align-items:stretch}
.cn-map{position:relative;min-height:250px;overflow:hidden;background:var(--p-panel)}
.cn-map svg{position:absolute;inset:0;width:100%;height:100%}
.cn-st{fill:none;stroke:rgba(var(--fg-rgb),.1);stroke-width:3.2;vector-effect:non-scaling-stroke;stroke-width:9}
.cn-trail{fill:none;stroke:var(--danger-ink);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:4 5;opacity:0;transition:opacity .6s}
.cn.is-found .cn-trail{opacity:.7}
.cn-site{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;font:700 10.5px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.cn-site .pi{width:30px;height:30px;padding:6px;border-radius:9px;background:#e4a400;color:#1c1400}
.cn-dot{position:absolute;width:0;height:0;opacity:0;transition:opacity .4s}
.cn-dot i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--danger-ink);box-shadow:0 0 0 3px var(--bg),0 0 0 0 rgba(255,93,108,.5);animation:cn-ping 1.5s ease-out infinite}
@keyframes cn-ping{to{box-shadow:0 0 0 3px var(--bg),0 0 0 16px rgba(255,93,108,0)}}
.cn.is-found .cn-dot{opacity:1}
.cn.is-locked .cn-dot i{background:var(--fg)}
.cn.is-wiped .cn-dot i{background:var(--teal);animation:none}
.cn-last{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:999px;background:var(--p-raise);box-shadow:var(--p-sh),inset 0 0 0 1px var(--line);font:650 12px/1 var(--display);color:var(--soft)}
.cn-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.cn-dev{display:flex;align-items:center;gap:12px;padding:12px 14px}
.cn-di{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--p-bad-bg);color:var(--p-bad);transition:background .3s,color .3s}
.cn.is-wiped .cn-di{background:var(--p-ok-bg);color:var(--accent)}
.cn-dev b{display:block;font:650 15px/1.2 var(--display)}.cn-dev small{font-size:12.5px;color:var(--dim)}
.cn-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cn-a{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:62px;padding:9px 4px;border-radius:14px;background:var(--fg);color:var(--bg)!important;font:650 13.5px/1 var(--display)!important;text-align:center;transition:opacity .3s,background .3s,transform .25s var(--ease)}
html.night .cn-a{background:var(--teal);color:var(--ink)!important}
.cn-a .pi{width:20px;height:20px}
.cn-a:hover:not(:disabled){transform:translateY(-2px)}
.cn-a:disabled{opacity:.3}
.cn-a.is-done{opacity:1;background:var(--p-panel);color:var(--accent)!important;box-shadow:inset 0 0 0 1.5px var(--p-ok-line)}
.cn-view{display:flex;flex-direction:column;gap:7px}
.cn-scr{position:relative;height:96px;border-radius:12px;background:var(--ink);overflow:hidden;box-shadow:inset 0 0 0 4px #1b1660}
html.night .cn-scr{background:#05031f}
.cn-scr>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#e7e9ff;opacity:0;transition:opacity .5s}
.cn-s0{opacity:1!important;flex-direction:row!important;gap:6px!important;flex-wrap:wrap;padding:14px}
.cn-s0 i{width:34px;height:26px;border-radius:5px;background:rgba(255,255,255,.12)}
.cn-s0 span{width:100%;text-align:center;font:600 11px/1 var(--display);color:rgba(231,233,255,.6)}
.cn.is-locked .cn-s0{opacity:0!important}
.cn.is-locked .cn-s1{opacity:1}
.cn.is-wiped .cn-s1{opacity:0}
.cn.is-wiped .cn-s2{opacity:1}
.cn-s1 .pi{color:var(--teal)}.cn-s1 b{font:650 14px/1 var(--display)}.cn-s1 small,.cn-s2 small{font-size:11px;color:rgba(231,233,255,.6)}
.cn-s2 code{font:500 11.5px/1.3 ui-monospace,Menlo,monospace;color:var(--teal);letter-spacing:.06em;text-align:center;padding:0 14px}

/* ---------- round 8: phone ---------- */
@media (max-width:760px){
  .ab{grid-template-columns:minmax(0,1fr);grid-template-areas:"ask" "mid" "tray";gap:14px}
  .ab-q{font-size:16px}
  .ab-av{width:38px;height:38px}
  .ab-binder{height:118px;padding-right:0;padding-bottom:0}
  .ab-spine{width:22px;padding:14px 0}.ab-spine i{width:9px;height:9px}
  .ab-pages{padding:10px 12px 34px}
  .ab-pg{flex-direction:row;justify-content:center;gap:10px}.ab-pg i{display:none}.ab-pg .pi{width:24px;height:24px}
  .ab-sheet:empty::before{height:40px}
  .ab-tabs{top:auto;bottom:8px;left:32px;right:8px;width:auto;flex-direction:row;height:22px;gap:4px}
  .ab-tabs li{padding:0;justify-content:center;border-radius:6px;transform:none;font-size:9px}
  .ab-docs{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .ab-d{flex-direction:column;align-items:flex-start;gap:7px;padding:10px}
  .ab-di{width:30px;height:34px}
  .ab-dt b{font-size:13px}.ab-dt small{font-size:11.5px}
  .ob{grid-template-columns:minmax(0,1fr);gap:14px}
  .ob-r{flex-direction:row;align-items:flex-start;gap:12px}
  .ob-lap{flex:0 0 44%}
  .ob-apps{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:2px}
  .ob-app{padding:4px 1px;gap:2px;border-radius:7px}.ob-app .pi{width:14px;height:14px}.ob-app small{font-size:8px}
  .ob-scr{padding:6px;aspect-ratio:4/3.3}
  .ob-log{flex:1;min-width:0;min-height:128px}.ob-ln{font-size:12.5px;align-items:flex-start}.ob-ck{width:17px;height:17px;margin-top:1px}
  .tx-stack{height:170px}
  .tx-c{padding:14px 15px}
  .tx-subj{font-size:16px}
  .hc{grid-template-columns:minmax(0,1fr);gap:14px}
  .hc-opts{grid-template-columns:minmax(0,1fr)}
  .hc-o{min-height:46px}
  .hc-what{font-size:15px}
  .lg-list{grid-template-columns:minmax(0,1fr);gap:6px}
  .lg-r{padding:8px 8px 8px 10px}
  .lg-cnt{display:none}
  .lg-go{align-self:stretch}
  .fn{--fn-l:0px}
  .fn-axis{margin-left:0}
  .fn-row{grid-template-columns:minmax(0,1fr);gap:5px}
  .fn-l{display:flex;gap:7px;flex-wrap:wrap;align-items:baseline}
  .fn-l .pi{width:16px;height:16px;align-self:center}
  .fn-l b{font-size:13.5px}
  .fn-track{height:38px}
  .fn-go{width:100%}
  .mf{grid-template-columns:minmax(0,1fr);gap:14px}
  .mf-devs{gap:6px}
  .mf-d{min-height:40px;padding:7px 10px 7px 8px;font-size:13px!important}
  .mf-z{min-height:72px}
  .bud-side{padding:14px 14px 16px}
  .bud-side li{font-size:13.5px;gap:8px}
  .bud-h small{display:none}
  .ed-plan{aspect-ratio:4/3.4}
  .ed-room{padding:6px 7px}.ed-room b{font-size:10px}
  .re{grid-template-columns:minmax(0,1fr);gap:12px}
  .re-mail{padding:13px 14px;gap:8px}
  .re-subj{font-size:16px}.re-body{font-size:14px}
  .re-acct{display:none}
  .rt{grid-template-columns:minmax(0,1fr);gap:12px}
  .rt-log{min-height:196px}
  .cn{grid-template-columns:minmax(0,1fr);gap:12px}
  .cn-map{min-height:168px}
  .cn-scr{height:84px}
}
@media (max-width:360px){
  .ab-docs{grid-template-columns:minmax(0,1fr)}
  .ab-d{flex-direction:row;align-items:center}
  .tx-stack{height:196px}
}
@media (prefers-reduced-motion:reduce){
  .hc-ring,.rt-live,.cn-dot i,.mf.is-ready .mf-belt i{animation:none!important}
}

@keyframes co-glow{0%{filter:drop-shadow(0 0 0 rgba(2,211,224,0))}40%{filter:drop-shadow(0 0 18px rgba(2,211,224,.7))}100%{filter:drop-shadow(0 0 0 rgba(2,211,224,0))}}