/* Whizra demo bar: one component, two modes (autoplay in the hero, hands-on as soon as the visitor clicks or types).
   Scoped under .wzb. Colours: docs/brand/icon-brief.md §14; rules: docs/website/lessons/glass-design.md.
   The bar floats, so it's milky glass; the @ list opens over our own content, so it's opaque. */
.wzb{
  --b-ink:#1B1410; --b-mute:#6E655D; --b-line:rgba(27,20,16,.12); --b-soft:rgba(27,20,16,.05); --b-ember:#C2410C;
  --b-glass:rgba(255,252,249,.86); --b-edge:rgba(255,255,255,.8); --b-menu:#FFFFFF; --b-hi:rgba(194,65,12,.12);
  --b-p1:#FBEFE4; --b-p2:#EED8C4; --b-err:#D70015;
  --b-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  --b-brand:"Archivo","Helvetica Neue",Arial,sans-serif;
  display:grid;gap:13px;justify-items:center;font:15px/1.5 var(--b-ui);color:var(--b-ink);-webkit-font-smoothing:antialiased;container-type:inline-size;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wzb{
  --b-ink:#FFF7F0; --b-mute:#B5ADA6; --b-line:rgba(255,247,240,.13); --b-soft:rgba(255,247,240,.07); --b-ember:#FF9330;
  --b-glass:rgba(40,31,26,.86); --b-edge:rgba(255,255,255,.12); --b-menu:#221A15; --b-hi:rgba(255,147,48,.16);
  --b-p1:#2E241D; --b-p2:#160F0B; --b-err:#FF6961}}
:root[data-theme="dark"] .wzb{
  --b-ink:#FFF7F0; --b-mute:#B5ADA6; --b-line:rgba(255,247,240,.13); --b-soft:rgba(255,247,240,.07); --b-ember:#FF9330;
  --b-glass:rgba(40,31,26,.86); --b-edge:rgba(255,255,255,.12); --b-menu:#221A15; --b-hi:rgba(255,147,48,.16);
  --b-p1:#2E241D; --b-p2:#160F0B; --b-err:#FF6961}
.wzb *,.wzb *::before,.wzb *::after{box-sizing:border-box}
.wzb [hidden]{display:none!important}
.wzb button{font:inherit;color:inherit;margin:0}
.wzb :focus-visible{outline:2px solid #FF9330;outline-offset:2px}

.wzb-stage{width:100%;border-radius:21px;padding:clamp(21px,6cqi,55px) clamp(8px,4cqi,55px);
  background:radial-gradient(120% 120% at 50% 0%,var(--b-p1),var(--b-p2));display:grid;justify-items:center}
.wzb-bar{position:relative;width:min(100%,640px);background:var(--b-glass);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid var(--b-edge);border-radius:21px;box-shadow:0 21px 55px -21px rgba(27,20,16,.45);text-align:left}
.wzb-field{display:flex;align-items:center;gap:8px;padding:13px 13px 13px 21px;min-height:62px;flex-wrap:wrap;cursor:text}
.wzb-chev{font:800 22px/1 var(--b-brand);color:var(--b-ember);flex:none}
.wzb-chips{display:contents}
.wzb-chip{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;background:var(--b-soft);border:1px solid var(--b-line);border-radius:7px;padding:2px 4px 2px 8px;white-space:nowrap;max-width:100%}
.wzb-chip span{overflow:hidden;text-overflow:ellipsis}
.wzb-chip button{border:0;background:none;padding:0 4px;cursor:pointer;color:var(--b-mute);line-height:1;min-width:0}
.wzb-auto .wzb-chip button{display:none}
.wzb-chip.auto{padding-right:8px}
.wzb-in{flex:1 1 140px;min-width:0;max-width:100%;resize:none;overflow:hidden;display:block;border:0;background:none;outline:none;font:500 clamp(17px,3.4cqi,21px)/1.3 var(--b-ui);color:var(--b-ink);padding:4px 0}
.wzb-in::placeholder{color:var(--b-mute)}
.wzb .wzb-in:focus-visible{outline:none}
.wzb-bar:focus-within{border-color:var(--b-ember);box-shadow:0 0 0 3px var(--b-hi),0 21px 55px -21px rgba(27,20,16,.45)}
.wzb-res{border-top:1px solid var(--b-line);padding:13px 21px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:3px 13px;align-items:center}
.wzb-res[hidden]{display:none}
.wzb-tk{width:34px;height:32px;grid-row:span 2}
.wzb-res.wzb-landed .wzb-tk{animation:wzb-land .618s cubic-bezier(.2,1.4,.4,1)}
@keyframes wzb-land{0%{transform:scale(.2) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}
.wzb-found{font-size:13px;color:var(--b-mute,#6E655D)}.wzb-found b{color:var(--b-ink,#1B1410);font-weight:600}
.wzb-work{width:30px;height:18px;animation:wzb-work .5s ease-in-out infinite}
@keyframes wzb-work{50%{opacity:.35;transform:translateX(3px)}}
.wzb-big{font:800 clamp(18px,3.6cqi,25px)/1.15 var(--b-brand);letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-width:0}
.wzb-meta{grid-column:2/4;color:var(--b-mute);font-size:14px;min-width:0}
.wzb-meta b{color:var(--b-ink);font-weight:600}
.wzb-saved{font-size:14px;color:var(--b-mute);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.wzb-saved b{color:var(--b-ink)}
.wzb-thumb{grid-column:3;grid-row:1/3;width:44px;height:56px;object-fit:cover;object-position:top;border-radius:5px;border:1px solid var(--b-line);background:#fff}
.wzb-res.wzb-has-thumb .wzb-saved{grid-column:2;text-align:left}
.wzb-about{grid-column:2/4;font-size:15px;max-width:60ch}
.wzb-say{grid-column:1/-1;font-size:15px}
.wzb-say .wzb-err{color:var(--b-err)}
.wzb-btns{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:5px}
.wzb-b{border:1px solid var(--b-line);background:var(--b-soft);border-radius:999px;padding:4px 12px;cursor:pointer;font-size:14px;text-decoration:none;color:var(--b-ink);min-width:0}
.wzb-b.wzb-p{background:var(--b-ember);border-color:transparent;color:#fff}
:root[data-theme="dark"] .wzb .wzb-b.wzb-p{color:#1B1410}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wzb .wzb-b.wzb-p{color:#1B1410}}

/* @ picker: opaque, over our own content */
.wzb-menu{position:absolute;left:13px;right:13px;top:calc(100% - 6px);z-index:30;background:var(--b-menu);border:1px solid var(--b-line);border-radius:13px;
  box-shadow:0 21px 34px -13px rgba(27,20,16,.4);padding:5px;margin:0;list-style:none;max-height:260px;overflow:auto}
.wzb-menu li{display:flex;justify-content:space-between;gap:13px;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:15px}
.wzb-menu li span:last-child{color:var(--b-mute);font-size:13px;font-variant-numeric:tabular-nums}
.wzb-menu li[aria-selected="true"]{background:var(--b-hi)}
.wzb-menu .wzb-mh{cursor:default;font-size:12px;color:var(--b-mute);text-transform:uppercase;letter-spacing:.07em}

.wzb-under{display:flex;flex-wrap:wrap;gap:8px 21px;align-items:center;justify-content:center;font-size:14px;color:var(--b-mute);text-align:center}
.wzb-under b{color:var(--b-ink);font-variant-numeric:tabular-nums}
.wzb-ctl{border:1px solid var(--b-line);background:none;border-radius:999px;padding:3px 12px;cursor:pointer;font-size:13px;font-weight:600;color:var(--b-mute)}
.wzb-sug{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:680px}
.wzb-sug button{border:1px solid var(--b-line);background:var(--b-menu);border-radius:999px;padding:4px 12px;cursor:pointer;font-size:14px}
.wzb-sug button::before{content:"› ";color:var(--b-ember);font-weight:800}
.wzb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wzb-caret{display:inline-block;width:2px;height:1.1em;background:var(--b-ember);animation:wzb-blink 1s steps(1) infinite;vertical-align:-.15em}
@keyframes wzb-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.wzb *{animation:none!important;transition:none!important}}

/* ---- the /sandbox page (data-mode="hands"): a visual guide, pick → say → done ---- */
.wzb-step{width:100%;display:grid;gap:13px;justify-items:center;padding:21px 0;border-top:1px solid var(--b-line)}
.wzb-step:first-child{border-top:0;padding-top:0}
.wzb-step h3{margin:0;justify-self:start;display:flex;align-items:center;gap:8px;font:800 20px/1.2 var(--b-brand);letter-spacing:-.02em;color:var(--b-mute);transition:color .236s}
.wzb-step h3 i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:14px;border:1.5px solid var(--b-line);color:var(--b-mute)}
.wzb[data-step="1"] [data-s="1"] h3,.wzb[data-step="2"] [data-s="2"] h3,.wzb[data-step="3"] [data-s="3"] h3{color:var(--b-ink)}
.wzb[data-step="1"] [data-s="1"] h3 i,.wzb[data-step="2"] [data-s="2"] h3 i,.wzb[data-step="3"] [data-s="3"] h3 i{background:var(--b-ember);border-color:transparent;color:#fff}
:root[data-theme="dark"] .wzb[data-step] .wzb-step h3 i{color:#1B1410}
.wzb[data-step="2"] [data-s="1"] h3 i::before,.wzb[data-step="3"] [data-s="1"] h3 i::before,.wzb[data-step="3"] [data-s="2"] h3 i::before{content:"✓"}
.wzb[data-step="2"] [data-s="1"] h3 i,.wzb[data-step="3"] [data-s="1"] h3 i,.wzb[data-step="3"] [data-s="2"] h3 i{font-size:0}
.wzb[data-step="2"] [data-s="1"] h3 i::before,.wzb[data-step="3"] [data-s="1"] h3 i::before,.wzb[data-step="3"] [data-s="2"] h3 i::before{font-size:14px;color:var(--b-ember)}
.wzb-files{width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:13px}
.wzb-file{display:grid;justify-items:center;gap:5px;padding:13px 8px;border:1.5px solid var(--b-line);border-radius:13px;background:var(--b-menu);cursor:pointer;text-align:center;min-width:0;transition:border-color .236s,transform .236s}
.wzb-file:hover{border-color:var(--b-mute);transform:translateY(-2px)}
.wzb-file[aria-pressed="true"]{border-color:var(--b-ember);background:var(--b-hi)}
.wzb-file b{font-size:13px;font-weight:600;line-height:1.3;overflow-wrap:break-word}
.wzb-file span:not(.wzb-ic){font-size:12px;color:var(--b-mute);font-variant-numeric:tabular-nums}
.wzb-ic{position:relative;width:56px;height:64px;display:grid;place-items:center}
.wzb-ic img{width:56px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--b-line);background:#fff}
.wzb-ic em{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font:700 9px/1 var(--b-ui);font-style:normal;letter-spacing:.04em;background:var(--b-ink);color:var(--b-menu);padding:2px 4px;border-radius:3px}
.wzb-ic.wzb-doc svg{width:46px;height:58px}
.wzb-ic.wzb-doc svg path{fill:var(--b-menu);stroke:var(--b-mute);stroke-width:1.5;stroke-linejoin:round}
.wzb-ic.wzb-fold svg{width:56px;height:46px}
.wzb-ic.wzb-fold svg path{fill:#5AA9E6}
.wzb-ic.wzb-none{border:1px solid var(--b-line);border-radius:6px}
/* the next thing to do gets a soft ring */
.wzb[data-step="1"] .wzb-files{outline:2px dashed var(--b-ember);outline-offset:8px;border-radius:13px}
.wzb[data-step="2"] .wzb-bar{border-color:var(--b-ember);box-shadow:0 0 0 3px var(--b-hi),0 21px 55px -21px rgba(27,20,16,.45)}
.wzb-sl{font-size:14px;color:var(--b-mute);align-self:center}
.wzb-sug small{color:var(--b-mute);font-size:12px}
.wzb-ba{width:100%;display:grid;gap:13px;justify-items:center}
.wzb-wait{margin:0;color:var(--b-mute);font-size:15px;padding:21px;border:1.5px dashed var(--b-line);border-radius:13px;width:100%;text-align:center}
.wzb-row{display:flex;align-items:center;justify-content:center;gap:21px;flex-wrap:wrap}
.wzb-ins,.wzb-outs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.wzb-card{display:grid;justify-items:center;gap:3px;padding:13px;border:1px solid var(--b-line);border-radius:13px;background:var(--b-menu);width:160px;text-align:center}
.wzb-card b{font-size:13px;font-weight:600;overflow-wrap:break-word}
.wzb-card span:not(.wzb-ic){font-size:12px;color:var(--b-mute);font-variant-numeric:tabular-nums}
.wzb-card.wzb-cout{border:1.5px solid var(--b-ember);box-shadow:0 13px 21px -13px rgba(194,65,12,.45);animation:wzb-pop .382s cubic-bezier(.2,1.3,.4,1)}
@keyframes wzb-pop{0%{transform:scale(.85);opacity:0}100%{transform:none;opacity:1}}
.wzb-arrow{font:800 28px var(--b-brand);color:var(--b-mute)}
.wzb-bars{width:min(100%,520px);display:grid;gap:8px}
.wzb-bars div{display:grid;grid-template-columns:52px minmax(0,1fr) 64px;gap:8px;align-items:center;font-size:13px;color:var(--b-mute);font-variant-numeric:tabular-nums}
.wzb-bars i{display:block;height:12px;border-radius:6px;background:var(--b-mute);opacity:.45}
.wzb-bars .wzb-after i{background:linear-gradient(90deg,#FF9330,#E04E14);opacity:1;animation:wzb-grow .618s ease-out}
@keyframes wzb-grow{from{width:100%!important}}
.wzb-bars b{color:var(--b-ink);text-align:right}
.wzb-foot{margin:0;display:flex;gap:8px;align-items:center;font-size:14px;color:var(--b-mute);text-align:left;max-width:640px}
.wzb-foot .wzb-tk{width:22px;height:21px;flex:none}
.wzb-foot b{color:var(--b-ink)}
.wzb-buyline{margin:0;font-size:15px;color:var(--b-mute);text-align:center}
.wzb-buyline a{font-weight:700;color:var(--b-ember)}

/* group chips above the bar: what kinds of jobs; the playing group is marked, a chosen one is pressed */
.wzb-groups{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.wzb-groups button{border:1px solid var(--b-line);background:var(--b-menu);border-radius:999px;padding:5px 14px;cursor:pointer;font-size:14px;font-weight:600;color:var(--b-mute);transition:color .236s,border-color .236s,background .236s}
.wzb-groups button:hover{color:var(--b-ink);border-color:var(--b-mute)}
.wzb-groups button.wzb-now{color:var(--b-ink);border-color:var(--b-ink)}
.wzb-groups button[aria-pressed="true"]{background:var(--b-ember);border-color:transparent;color:#fff}
:root[data-theme="dark"] .wzb .wzb-groups button[aria-pressed="true"]{color:#1B1410}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wzb .wzb-groups button[aria-pressed="true"]{color:#1B1410}}

/* the chip whose demo is running pops and fills; the rest stay quiet */
.wzb-groups button.wzb-now{background:var(--b-ember);border-color:transparent;color:#fff}
:root[data-theme="dark"] .wzb .wzb-groups button.wzb-now{color:#1B1410}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wzb .wzb-groups button.wzb-now{color:#1B1410}}
.wzb-groups button.wzb-pop{animation:wzb-chip .382s cubic-bezier(.2,1.5,.4,1)}
@keyframes wzb-chip{0%{transform:scale(.92)}60%{transform:scale(1.1)}100%{transform:none}}
.wzb-all{align-self:center;font-size:14px;font-weight:700;color:var(--b-ember);text-decoration:none;padding:5px 8px}
.wzb-all:hover{text-decoration:underline}

/* the result as the app shows it: the made file as a picture, then what happened */
.wzb-res.wzb-card2{grid-template-columns:auto minmax(0,1fr);gap:13px 21px;align-items:center}
.wzb-body{display:grid;gap:3px;min-width:0}
.wzb-body .wzb-big{display:flex;align-items:center;gap:8px}
.wzb-body .wzb-big .wzb-tk{width:28px;height:26px;flex:none}
.wzb-body .wzb-saved{text-align:left}
.wzb-body .wzb-meta,.wzb-body .wzb-about{grid-column:auto}
.wzb-pic{display:grid;place-items:center;min-width:84px;min-height:84px}
.wzb-pic img{display:block;border-radius:6px;border:1px solid var(--b-line);background:#fff;box-shadow:0 8px 13px -8px rgba(27,20,16,.35)}
.wzb-page img{width:auto;height:auto;max-height:96px;max-width:150px}
.wzb-photo img{width:84px;height:84px;object-fit:cover}
.wzb-res.wzb-landed .wzb-pic img{animation:wzb-pop .382s cubic-bezier(.2,1.3,.4,1)}
@media (max-width:480px){.wzb-pic{min-width:60px;min-height:60px}.wzb-page img{max-height:72px;max-width:96px}.wzb-photo img{width:60px;height:60px}}

/* the group row above the bar: one group at a time (owner 2026-11-02). Ink pill for the group, outlined job pills
   (fully readable), the playing job filled Ember; orange stays only on the done tick. */
.wzb-gjobs{display:flex;align-items:center;justify-content:center;gap:8px;max-width:100%;min-height:34px;flex-wrap:nowrap}
.wzb-gname{flex:none;background:var(--b-ink);color:var(--b-menu);font:700 14px/1 var(--b-ui);padding:8px 14px;border-radius:999px}
.wzb-jps{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;min-width:0}
.wzb-jp{font:500 13px/1 var(--b-ui);color:var(--b-ink);background:var(--b-menu);border:1px solid var(--b-jp-line);padding:6px 10px;border-radius:999px;white-space:nowrap}
.wzb-jp.wzb-on{background:var(--b-menu);border:1.5px solid var(--b-ink);color:var(--b-ink);font-weight:700}   /* the playing job: white, dark outline (orange stays on the tick) */
.wzb-gjobs .wzb-all{flex:none;font-size:13px;font-weight:700;color:var(--b-ember);text-decoration:none;white-space:nowrap;padding:0 4px}
.wzb-gjobs .wzb-all:hover{text-decoration:underline}
.wzb-gjobs.wzb-swap .wzb-gname{animation:wzb-gpop .2s ease-out both}
.wzb-gjobs.wzb-swap .wzb-jps{animation:wzb-gfade .2s ease-out .05s both}
@keyframes wzb-gpop{from{opacity:0;transform:scale(.85)}}
@keyframes wzb-gfade{from{opacity:0;transform:translateX(8px)}}
.wzb{--b-jp-line:rgba(27,20,16,.28)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wzb{--b-jp-line:rgba(255,247,240,.3)}}
:root[data-theme="dark"] .wzb{--b-jp-line:rgba(255,247,240,.3)}
@media (min-width:761px){.wzb-gjobs{flex-wrap:wrap}.wzb-jps{flex:0 1 auto;max-width:640px}}
/* phones: the job pills scroll sideways inside their own row, never the page */
@media (max-width:760px){.wzb-gjobs{justify-content:flex-start;width:100%}.wzb-jps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0}.wzb-jps::-webkit-scrollbar{display:none}}
/* the demo's one column never grows past its container (the nowrap pill row would otherwise widen the page) */
.wzb{grid-template-columns:minmax(0,1fr)}
.wzb-gjobs{min-width:0}
@media (max-width:760px){.wzb-jps{flex:1 1 auto}}

/* "+ more →": to the group's page (where every job of the group lives) */
.wzb-more{font:600 13px/1 var(--b-ui);color:var(--b-ink);text-decoration:none;white-space:nowrap;padding:6px 4px}
.wzb-more:hover{color:var(--b-ember);text-decoration:underline}
.wzb-gjobs .wzb-all{margin-left:auto}
@media (min-width:761px){.wzb-gjobs{width:min(100%,640px);justify-content:flex-start}}   /* the row lines up with the bar; All jobs at its right edge */

/* ---- the drawn Mac desktop (owner 2026-11-02: "it must feel like a Mac app at first glance").
   Our own generic drawing: a menu bar with Whizra's glyph, a soft wallpaper, a Finder-style window. No Apple logo or artwork. */
.wzb{--m-wall:linear-gradient(155deg,#FFDCC0 0%,#F5B49A 38%,#D9A3C4 72%,#B8A4D9 100%);--m-menu:rgba(255,255,255,.5);--m-menu-ink:#1B1410;
  --m-win:#FBF8F5;--m-side:#F1ECE6;--m-win-ink:#1B1410;--m-win-line:rgba(27,20,16,.1);--m-key:#FFFFFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wzb{--m-wall:linear-gradient(155deg,#4A2C22 0%,#3A2433 50%,#232042 100%);--m-menu:rgba(20,14,11,.55);--m-menu-ink:#FFF7F0;
  --m-win:#221A15;--m-side:#1A1410;--m-win-ink:#FFF7F0;--m-win-line:rgba(255,247,240,.1);--m-key:#2E241D}}
:root[data-theme="dark"] .wzb{--m-wall:linear-gradient(155deg,#4A2C22 0%,#3A2433 50%,#232042 100%);--m-menu:rgba(20,14,11,.55);--m-menu-ink:#FFF7F0;
  --m-win:#221A15;--m-side:#1A1410;--m-win-ink:#FFF7F0;--m-win-line:rgba(255,247,240,.1);--m-key:#2E241D}
.wzb-stage.wzb-mac{position:relative;overflow:hidden;background:var(--m-wall);border-radius:16px;gap:21px;
  padding:calc(26px + clamp(21px,5cqi,44px)) clamp(10px,4cqi,44px) clamp(18px,4cqi,34px);
  box-shadow:0 0 0 1px rgba(27,20,16,.18),0 0 0 7px #1B1410,0 0 0 8px rgba(27,20,16,.25),0 34px 55px -34px rgba(27,20,16,.6);margin:8px}
.wzb-menubar{position:absolute;inset:0 0 auto;height:26px;display:flex;align-items:center;gap:14px;padding:0 12px;font-size:12px;color:var(--m-menu-ink);
  background:var(--m-menu);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.wzb-menubar b{font-weight:700}
.wzb-msp{flex:1}
.wzb-mglyph{width:22px;height:12px;transition:filter .382s}
.wzb:not(.wzb-away) .wzb-mglyph{filter:drop-shadow(0 0 4px rgba(255,147,48,.9))}   /* lit while the bar is open */
.wzb-mi{width:16px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.wzb-mi .f{fill:currentColor;stroke:none}
.wzb-time{font-variant-numeric:tabular-nums}
/* the bar drops in over the desktop */
.wzb-mac .wzb-bar{z-index:3;transition:transform .382s cubic-bezier(.2,1.2,.4,1),opacity .236s}
.wzb-away .wzb-mac .wzb-bar{transform:translateY(-28px) scale(.98);opacity:0;pointer-events:none}
/* ⌥ ⌥, pressed twice just before the bar appears */
.wzb-keys{position:absolute;right:clamp(12px,4cqi,34px);bottom:clamp(12px,3cqi,24px);z-index:4;display:flex;gap:6px;opacity:0;transition:opacity .236s}
.wzb-keys kbd{font:600 18px/1 var(--b-ui);color:var(--m-win-ink);background:var(--m-key);border-radius:7px;padding:8px 11px;box-shadow:0 3px 0 rgba(27,20,16,.35),0 0 0 1px rgba(27,20,16,.15)}
.wzb-keys-on .wzb-keys{opacity:1}
.wzb-keys-on .wzb-keys kbd{animation:wzb-press .26s ease 2}
@keyframes wzb-press{50%{transform:translateY(3px);box-shadow:0 0 0 rgba(27,20,16,.35),0 0 0 1px rgba(27,20,16,.15)}}
/* a small Finder-style window holding the files */
.wzb-finder{justify-self:start;margin-left:clamp(0px,5cqi,56px);width:min(100%,480px);background:var(--m-win);color:var(--m-win-ink);border-radius:10px;overflow:hidden;font-size:12px;
  box-shadow:0 0 0 1px var(--m-win-line),0 21px 34px -21px rgba(27,20,16,.55);z-index:1}
.wzb-ftb{display:flex;gap:6px;align-items:center;padding:7px 10px;background:var(--m-side);border-bottom:1px solid var(--m-win-line)}
.wzb-ftb i{width:10px;height:10px;border-radius:50%;background:#FF5F57}.wzb-ftb i:nth-child(2){background:#FEBC2E}.wzb-ftb i:nth-child(3){background:#28C840}
.wzb-ftb b{margin-left:10px;font-weight:600}
.wzb-fbody{display:grid;grid-template-columns:96px minmax(0,1fr)}
.wzb-fside{display:grid;gap:3px;padding:8px;background:var(--m-side);align-content:start;color:var(--b-mute)}
.wzb-fside span{padding:2px 7px;border-radius:5px}.wzb-fside .on{background:var(--m-win-line);color:var(--m-win-ink)}
.wzb-ffiles{display:flex;flex-wrap:wrap;gap:12px;padding:12px;min-height:104px;align-content:start}
.wzb-ff{width:92px;display:grid;justify-items:center;gap:4px;text-align:center}
.wzb-ff .wzb-ic{width:44px;height:50px}.wzb-ff .wzb-ic img{width:44px;height:50px}.wzb-ff .wzb-doc svg{width:36px;height:46px}.wzb-ff .wzb-fold svg{width:46px;height:38px}
.wzb-ff .wzb-ic em{font-size:7px}
.wzb-ff i{font-style:normal;font-size:11px;line-height:1.25;padding:1px 5px;border-radius:4px;overflow-wrap:break-word;word-break:normal;max-width:100%}
.wzb-ff.wzb-sel i{background:#C2410C;color:#fff}
.wzb-ff.wzb-made{animation:wzb-pop .382s cubic-bezier(.2,1.3,.4,1)}
.wzb-ff.wzb-made i{font-weight:700;outline:1.5px solid #C2410C}
@container (max-width:520px){
  .wzb-menubar span:not(.wzb-msp):not(.wzb-time),.wzb-menubar b,.wzb-mi{display:none}   /* phones: the glyph and the time */
  .wzb-fside{display:none}.wzb-fbody{grid-template-columns:minmax(0,1fr)}.wzb-finder{margin-left:0}
  .wzb-stage.wzb-mac{margin:6px;box-shadow:0 0 0 1px rgba(27,20,16,.18),0 0 0 5px #1B1410,0 21px 34px -21px rgba(27,20,16,.6)}
}
@media (prefers-reduced-motion:reduce){.wzb-away .wzb-mac .wzb-bar{transform:none;opacity:1}}