/* How-tos (how-tos.html): Rosco's app window drawn in the landing page's design, for walkthrough videos.
   Layer hw- = the how-to stage. It reuses the site's product-screen pieces (.ui-card, .ui-button, .ui-chip, .ui-token,
   .ui-checkbox, .ui-status, .ui-variation, .ui-task-mark, .is-focused, .ui-cursor) and tokens only.
   The stage is a fixed 1440 x 810 world scaled as one piece (--k, set by site.js); a camera (.hw-cam) zooms inside it.
   Sizes inside the world are world pixels: at --k the page shows them at k x, and the 1920 x 1080 video at 1.333 x.
   The markup is the finished state (last view, last caption); site.js plays to it. */

.howto .panel{margin-top:var(--space-10)}

/* 8 Oct 2026: locked walkthroughs for visitors who are not signed in. The walkthrough is held still underneath, blurred
   out of reach; the card's line resolves word by word as it scrolls into view (effects library 11, soft blur in), then
   the lime highlighter sweeps; moss button beside a quiet link (15, brand close). Without JavaScript, with reduced
   motion, or in ?qa stills, the card simply shows finished. Signed in (.is-unlocked): the panel as on every other page. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hw-locked{position:relative;overflow:clip;border:1px solid var(--glass-rim);border-radius:var(--radius-frame);background:var(--glass-pane);box-shadow:var(--shadow-card)}   /* clip, not hidden: hidden makes a scroll container */
.hw-blurred{filter:blur(14px) saturate(.7);opacity:.8;transform:scale(1.01);pointer-events:none;user-select:none}
.hw-locked:not(.is-unlocked) .hw-blurred .panel-steps,.hw-locked:not(.is-unlocked) .hw-blurred .frame-caption{display:none}
.hw-lock{position:absolute;inset:0;display:grid;place-items:center;padding:var(--space-6)}
.hw-lock-card{width:min(460px,100%);padding:var(--space-8);border:1px solid var(--glass-rim);border-radius:var(--radius-xl);background:var(--glass-fill-strong);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.hw-lock-kicker{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-4);font:400 var(--text-xs)/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--site-moss)}
.hw-lock-kicker svg{width:15px;height:15px;flex:none}
.hw-lock-line{margin:0;font:500 clamp(30px,3.2vw,42px)/1.08 var(--font-sans);letter-spacing:-.035em;color:var(--site-ink)}
.hw-lock-line .w{display:inline-block}
.hw-lock-line mark{white-space:nowrap}
.hw-lock-sub{margin:var(--space-4) 0 var(--space-6);font:300 var(--text-body)/1.5 var(--font-sans);color:var(--site-ink-2);text-wrap:pretty}
.hw-lock-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5)}
.hw-lock-actions .text-link{min-height:44px}
.chapter-index .hw-lock-mark{display:inline-flex;align-self:center;color:var(--site-muted)}
.chapter-index .hw-lock-mark svg{width:14px;height:14px}
.js .hw-lock:not(.is-in) .hw-lock-line .w{opacity:0;transform:translateY(18px);filter:blur(10px)}
.hw-lock-line .w{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 90ms)}
.js .hw-lock-line mark.hl{animation:none;background-size:0% 72%;transition:background-size 1.1s cubic-bezier(.6,0,.2,1) calc(var(--n) * 90ms + .45s)}
.js .hw-lock.is-in .hw-lock-line mark.hl{background-size:100% 72%}
@media (prefers-reduced-motion:reduce){.hw-lock-line .w,.js .hw-lock-line mark.hl{transition:none}}
.qa .hw-lock-line .w,.qa .hw-lock-line mark.hl{transition:none}
.hw-locked.is-unlocked{overflow:visible;border:0;background:none;box-shadow:none;border-radius:0}
.hw-locked.is-unlocked .hw-blurred{filter:none;opacity:1;transform:none;pointer-events:auto;user-select:auto}
.hw-locked.is-unlocked .hw-lock,.rosco-signed-in .hw-lock-mark,.rosco-signed-in .hw-lock-note,.rosco-signed-in .hw-lock-lede{display:none}
@media (max-width:720px){
  .hw-lock{position:relative;inset:auto;margin-top:calc(-1 * var(--space-16));padding:0 var(--space-3) var(--space-8)}
  .hw-lock-card{padding:var(--space-6)}
}
.hw-screen{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-lg);background:var(--site-bg);isolation:isolate}
.hw-world{position:absolute;left:0;top:0;width:1440px;height:810px;transform-origin:0 0;transform:scale(var(--k,.76))}
.hw-cam{position:absolute;left:0;top:0;width:1440px;height:810px;transform-origin:0 0}

/* ---------- the app ---------- */
.hw-app{position:absolute;inset:0;display:grid;grid-template-columns:232px minmax(0,1fr);color:var(--ui-ink);font:300 15.5px/1.45 var(--font-sans);-webkit-font-smoothing:antialiased;
  background:radial-gradient(640px 420px at 6% 4%,var(--light-lime),transparent 70%),radial-gradient(520px 380px at 96% 100%,var(--light-moss),transparent 72%),var(--site-bg)}
.hw-app svg{flex:none}
.hw-sb{display:flex;flex-direction:column;min-width:0;padding:24px 14px 14px 18px}
.hw-sb-brand{display:flex;align-items:center;gap:7px;padding:0 8px;font:600 25px/1 var(--font-sans);letter-spacing:-.04em;color:var(--site-ink)}
.hw-sb-brand svg{display:block;width:auto;height:.96em}
.hw-sb-org{display:flex;align-items:center;gap:10px;height:46px;margin:24px 0 14px;padding:0 10px;border:1px solid var(--glass-rim);border-radius:var(--radius-md);background:var(--glass-fill-strong);box-shadow:var(--shadow-card);font:400 15px/1 var(--font-sans);color:var(--site-ink)}
.hw-sb-org svg{margin-left:auto;color:var(--site-muted)}
.hw-sb-orgmark{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--radius-sm);background:var(--site-moss);color:var(--site-white);font:500 10.5px/1 var(--font-mono);letter-spacing:.04em}
.hw-sb-nav{display:flex;flex-direction:column;gap:2px}
.hw-sb-item{display:flex;align-items:center;gap:12px;height:39px;padding:0 10px;border-radius:var(--radius-md);font:400 15px/1 var(--font-sans);color:var(--site-ink-2)}
.hw-sb-item svg{color:var(--site-muted)}
.hw-sb-item.is-active{background:var(--ui-card);box-shadow:inset 0 0 0 1px var(--ui-card-line),var(--shadow-card);color:var(--site-ink);font-weight:500}
.hw-sb-item.is-active svg{color:var(--site-moss)}
.hw-sb-gap{display:block;height:1px;margin:12px 10px;background:var(--site-line)}
.hw-sb-user{display:flex;align-items:center;gap:10px;margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--site-line)}
.hw-sb-user b{display:block;font:500 14px/1.25 var(--font-sans);color:var(--site-ink)}
.hw-sb-user small{display:block;font:300 12.5px/1.3 var(--font-sans);color:var(--site-muted)}
.hw-sb-user svg{margin-left:auto;color:var(--site-muted)}
.hw-avatar{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--ui-navy);color:var(--ui-white);font:400 12px/1 var(--font-mono)}

.hw-main{min-width:0;padding:14px 14px 14px 0}
.hw-win{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--ui-card);border:1px solid var(--ui-card-line);border-radius:var(--radius-xl);box-shadow:var(--shadow-lift)}
.hw-top{display:flex;align-items:center;gap:16px;flex:none;height:60px;padding:0 24px;border-bottom:1px solid var(--ui-row-line)}
.hw-top b{font:500 18px/1 var(--font-sans);letter-spacing:.01em}
.hw-top-ic{display:flex;gap:16px;margin-left:auto;color:var(--ui-label)}
.hw-ic{display:inline-flex;color:var(--ui-label)}
.hw-tabs{position:relative;display:flex;gap:30px;flex:none;height:50px;padding:0 24px;border-bottom:1px solid var(--ui-row-line)}
.hw-tabs span{font:400 15.5px/50px var(--font-sans);color:var(--ui-label);white-space:nowrap}
.hw-tabs span.is-active{color:var(--ui-ink)}
.hw-ul{position:absolute;left:0;bottom:-1px;width:0;height:2px;background:var(--ui-ink)}
.hw-body{position:relative;flex:1;min-height:0}
.hw-view{position:absolute;inset:0;display:flex;flex-direction:column;gap:16px;padding:20px 24px;opacity:0;visibility:hidden}
.hw-view:last-child{opacity:1;visibility:visible}
.hw-view.is-flush{gap:0;padding:0}

/* cards, labels, values */
.hw-card{flex:none;padding:18px 22px}
.hw-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.hw-card-head b{display:flex;align-items:center;gap:8px;font:500 17px/1.2 var(--font-sans)}
.hw-card-head small{display:block;margin-top:5px;font:300 14px/1.3 var(--font-sans);color:var(--ui-label)}
.hw-label{display:block;font:400 11.5px/1.25 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ui-label)}
.hw-kv b{display:block;margin-top:7px;font:400 16.5px/1.25 var(--font-sans);color:var(--ui-ink);white-space:nowrap}
.hw-kv.is-green b{color:var(--ui-green)}
.hw-kv.is-faint b{color:var(--ui-faint)}
.hw-kv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 24px;margin-top:20px}
.hw-kv-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin-top:12px}
.hw-search-row{display:flex;gap:12px;margin-top:16px}
.hw-search{display:flex;flex:1;align-items:center;gap:10px;height:46px;padding:0 16px;border:1px solid var(--ui-field-line);border-radius:var(--radius-md);background:var(--ui-field);font:300 15.5px/1 var(--font-sans);color:var(--ui-faint)}
.hw-search.is-small{flex:none;width:180px;height:38px}
.hw-dd{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border:1px solid var(--ui-field-line);border-radius:var(--radius-md);background:var(--ui-field);font:400 14.5px/1 var(--font-sans);color:var(--ui-ink-2);white-space:nowrap}
.hw-dd svg{color:var(--ui-label)}
.hw-dd.is-small{height:36px}
.hw-dd.is-open{border-color:var(--ui-ink);box-shadow:var(--shadow-focus)}

/* tables */
.hw-table{overflow:hidden;font:300 15px/1.35 var(--font-sans)}
.hw-th,.hw-tr{display:grid;grid-template-columns:var(--cols);align-items:center;column-gap:14px;padding:0 20px}
.hw-th{min-height:50px;background:var(--ui-head);border-bottom:1px solid var(--ui-row-line);font:400 11.5px/1.25 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ui-label)}
.hw-th small{display:block;margin-top:3px;font-size:10.5px;letter-spacing:.04em;text-transform:none;color:var(--ui-faint)}
.hw-tr{min-height:45px;border-bottom:1px solid var(--ui-row-line);background:var(--ui-card)}
.hw-tr:last-child{border-bottom:0}
.hw-tr.is-title{background:var(--ui-title-row);font-weight:500}
.hw-tr.is-total{background:var(--ui-title-row);font-weight:500}
.hw-tr.is-top{align-items:start;padding-top:14px;padding-bottom:14px}
.hw-tr.is-hover{background:var(--ui-soft)}
.hw-tr i{font-style:normal}
.hw-num{justify-self:end;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hw-strong{color:var(--ui-ink);font-weight:400}
.hw-tr.is-title .hw-strong,.hw-tr.is-total .hw-strong{font-weight:500}
.hw-green{color:var(--ui-green)}
.hw-ex{display:flex;justify-content:flex-end;color:var(--ui-faint)}
.hw-ex.is-hover{color:var(--ui-ink)}
.hw-card.is-table{flex:1;min-height:0;padding:0;overflow:hidden}
.hw-card.is-table .hw-card-head{align-items:center;padding:11px 20px}
.hw-card.is-summary{padding:16px 22px 18px}
.hw-card.is-summary .hw-card-head{align-items:center}
.is-phases{--cols:minmax(0,2.15fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.85fr) minmax(0,.95fr) minmax(0,.75fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,.8fr) 22px}
.is-phases .hw-th{min-height:46px}
.is-phases .hw-tr{min-height:42px}
.is-phases .hw-tr.is-target{background:var(--ui-card)}

/* inputs that get typed into: value from the playhead, caret while focused, placeholder while empty */
.hw-in{position:relative;display:flex;align-items:center;min-height:46px;padding:0 14px;overflow:hidden;border:1px solid var(--ui-field-line);border-radius:var(--radius-md);background:var(--ui-field);font:400 15.5px/1.3 var(--font-sans);color:var(--ui-ink);white-space:nowrap}
.hw-ph{font-weight:300;color:var(--ui-faint)}
.hw-ph-static{color:var(--ui-faint)}
.hw-val:not(:empty)~.hw-ph{display:none}
.hw-caret{display:none;flex:none;width:1.5px;height:1.15em;margin-left:1px;background:var(--ui-ink)}
.hw-in.is-focused .hw-caret{display:inline-block}
.hw-in.is-cell{justify-content:flex-end;justify-self:stretch;min-height:34px;margin-right:-10px;padding:0 10px;border-color:transparent;background:transparent}
.hw-in.is-cell .hw-ph{color:var(--ui-faint)}
.hw-in.is-url{font:400 14px/1.3 var(--font-mono)}
.hw-in-wrap{position:relative;display:flex;align-items:center;gap:8px}
.hw-in-wrap .hw-in{flex:1;min-width:0}
.hw-in-ic{position:absolute;right:14px;display:inline-flex;color:var(--ui-faint)}
.hw-plus{display:grid;place-items:center;flex:none;width:46px;height:46px;border:1px solid var(--ui-field-line);border-radius:var(--radius-md);background:var(--ui-field);color:var(--ui-ink-2)}
.hw-tokens{display:flex;gap:6px}
.hw-tokens .ui-token{height:46px;font-size:15px}

/* meetings */
.hw-sub{position:relative;display:flex;gap:40px;flex:none;height:48px;padding:0 24px;border-bottom:1px solid var(--ui-row-line);background:var(--ui-soft)}
.hw-sub span{font:400 12px/48px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ui-label)}
.hw-sub span.is-active{color:var(--ui-ink)}
.hw-sub-ul{position:absolute;left:0;bottom:-1px;width:0;height:3px;background:var(--ui-ink)}
.hw-pane{position:absolute;left:0;right:0;top:48px;bottom:0;display:flex;flex-direction:column;gap:14px;padding:16px 24px 0;opacity:0;visibility:hidden}
.hw-pane:last-child{opacity:1;visibility:visible}
.hw-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:13px 18px;border-radius:var(--radius-md);background:var(--ui-head)}
.hw-meta.is-six{grid-template-columns:minmax(0,.75fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1.6fr) minmax(0,.6fr) minmax(0,.75fr)}
.hw-meta .hw-label{white-space:nowrap}
.hw-meta .hw-kv b{margin-top:6px;font-size:15.5px}
.hw-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.hw-form .hw-label{margin-bottom:8px}
.hw-actions{display:flex;align-items:center;gap:10px}
.hw-actions .ui-button svg,.hw-toolbar .ui-button svg,.hw-card-head .ui-button svg{margin-right:-2px}
.hw-actions .is-off{opacity:.35}
.hw-table.is-agenda,.hw-table.is-minutes,.hw-table.is-schedule{border:1px solid var(--ui-card-line);border-radius:var(--radius-md);background:var(--ui-card)}
.is-agenda{--cols:24px minmax(0,.4fr) minmax(0,2.7fr) minmax(0,.75fr) minmax(0,.75fr) minmax(0,.75fr) minmax(0,.38fr) minmax(0,.38fr)}
.is-agenda .hw-tr{height:50px;min-height:0}   /* fixed: rows are added one at a time and the Add row moves down by exactly one row */
.is-agenda .hw-in{min-height:36px;margin-left:-9px;padding:0 8px;border-color:transparent;background:transparent}
.is-agenda .ui-checkbox svg{width:13px;height:13px}
.is-minutes{--cols:minmax(0,.4fr) minmax(0,2.7fr) minmax(0,.75fr) minmax(0,.75fr) minmax(0,.75fr) minmax(0,.6fr)}
.is-minutes .hw-tr{min-height:52px}
.hw-add{display:flex;gap:24px;padding:14px 20px;border-top:1px solid var(--ui-row-line);font:300 15px/1 var(--font-sans);color:var(--ui-label)}
.hw-add span{display:inline-flex;align-items:center;gap:6px;padding:4px 6px;margin:-4px -6px;border-radius:var(--radius-sm)}
.hw-add span.is-hover{background:var(--ui-soft);color:var(--ui-ink)}
.hw-min-head{display:flex;align-items:center;gap:10px}
.hw-min-head b{display:block;font:500 20px/1.2 var(--font-sans)}
.hw-min-head small{display:block;margin-top:4px;font:300 14.5px/1.3 var(--font-sans);color:var(--ui-label)}

/* states the walkthroughs switch (site.js) */
.hw-app .is-gone{display:none}
.hw-dialog .ui-button.is-hover{border-color:var(--ui-ink);color:var(--ui-ink)}

/* overlays inside the window */
.hw-dialog{position:absolute;left:50%;top:50%;z-index:6;width:520px;margin:-112px 0 0 -260px;padding:24px 26px;background:var(--ui-card);border:1px solid var(--ui-card-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lift);opacity:0;visibility:hidden}
.hw-dialog b{font:500 20px/1.2 var(--font-sans)}
.hw-dialog p{margin:10px 0 0;font:300 15.5px/1.45 var(--font-sans);color:var(--ui-ink-2)}
.hw-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.hw-sheet{position:absolute;right:0;top:0;bottom:0;z-index:6;display:flex;flex-direction:column;gap:12px;width:620px;padding:24px 28px;background:var(--ui-card);border-left:1px solid var(--ui-card-line);box-shadow:-24px 0 48px -24px rgba(36,39,33,.3);opacity:0;visibility:hidden}
.hw-sheet-head{display:flex;align-items:center;justify-content:space-between}
.hw-sheet-head b{font:500 23px/1.2 var(--font-sans);letter-spacing:-.01em}
.hw-kicker{display:block;margin-top:6px;font:400 11.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--site-moss)}
.hw-sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.hw-sf .hw-label{margin-bottom:7px}
.hw-box{display:flex;align-items:center;height:40px;padding:0 14px;overflow:hidden;border:1px solid var(--ui-field-line);border-radius:var(--radius-md);background:var(--ui-field);font:400 15.5px/1 var(--font-sans);white-space:nowrap}
.hw-box i{margin-right:6px;font-style:normal;color:var(--ui-label)}
.hw-box svg{margin-left:auto;color:var(--ui-faint)}
.hw-plain{display:flex;align-items:center;height:40px;font:400 15.5px/1 var(--font-sans)}
.hw-sf.is-lit .hw-box{border-color:var(--site-moss);box-shadow:0 0 0 3px var(--app-highlight)}
.hw-comps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hw-comp{padding:12px 16px;border:1px solid var(--ui-card-line);border-radius:var(--radius-md);background:var(--ui-field)}
.hw-comp b{display:block;margin-top:10px;font:400 23px/1 var(--font-sans);color:var(--ui-green)}

/* schedules */
.hw-toolbar{display:flex;align-items:center;gap:10px}
.hw-hint{font:300 14px/1 var(--font-sans);font-style:italic;color:var(--ui-label)}
.hw-hint,[data-t="sch-all"]{display:none}
.hw-hint.is-shown{display:inline}
[data-t="sch-all"].is-shown{display:inline}
[data-t="sch-fin"].is-hidden,[data-t="addrow"].is-hidden{display:none}
.is-schedule{--cols:40px 66px 66px minmax(0,1.1fr) minmax(0,1.9fr) minmax(0,.6fr) minmax(0,.6fr) minmax(0,.55fr) minmax(0,1.4fr);font-size:14.5px;line-height:1.45}
.is-schedule .hw-th{column-gap:14px}
.hw-img{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ui-label)}
.hw-img small{font-size:11.5px}
.hw-link-cell{position:relative;display:grid;place-items:center;width:34px;height:30px}
.hw-dash{color:var(--ui-faint)}
.hw-link-on{position:absolute;inset:0;display:none;place-items:center;border-radius:var(--radius-sm);background:var(--app-highlight);color:var(--site-moss)}
.hw-link-cell.is-linked .hw-link-on{display:grid}
.hw-link-cell.is-linked .hw-dash{display:none}
.hw-link-cell.is-hover{border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--ui-field-line);background:var(--ui-field)}
.hw-dot{display:inline-block;flex:none;width:9px;height:9px;margin-right:8px;border-radius:50%;background:var(--app-category-red)}
.hw-menu{position:absolute;left:58px;top:68px;z-index:5;width:360px;padding:6px 0;background:var(--ui-card);border:1px solid var(--ui-card-line);border-radius:var(--radius-md);box-shadow:var(--shadow-lift);opacity:0;visibility:hidden}
.hw-menu span{display:flex;align-items:center;gap:10px;padding:11px 16px;font:400 15px/1.2 var(--font-sans)}
.hw-menu span.is-hover{background:var(--ui-soft)}
.hw-menu i{display:block;height:1px;margin:4px 0;background:var(--ui-row-line)}
.hw-pop{position:absolute;left:0;top:0;z-index:5;width:540px;padding:14px 16px;background:var(--ui-card);border:1px solid var(--ui-card-line);border-radius:var(--radius-md);box-shadow:var(--shadow-lift);opacity:0;visibility:hidden}
.hw-pop .hw-label{margin-bottom:8px}
.hw-pop small{display:block;margin-top:8px;font:300 13px/1.3 var(--font-sans);color:var(--ui-label)}
.hw-tip{position:absolute;left:0;top:0;z-index:5;padding:9px 12px;border-radius:var(--radius-sm);background:var(--ui-ink);color:var(--ui-white);font:400 13px/1 var(--font-mono);white-space:nowrap;opacity:0;visibility:hidden}

/* ---------- the video layer: subtitles, key presses, title and end cards (above the camera, not zoomed) ---------- */
/* when the camera is in, the crop edges fade softly into paper instead of slicing text (--zoomed: 0 to 1, site.js) */
.hw-world:after{content:'';position:absolute;inset:0;z-index:19;pointer-events:none;box-shadow:inset 0 0 34px 10px var(--site-bg);opacity:var(--zoomed,0)}
.hw-caps{position:absolute;left:0;right:0;bottom:30px;z-index:20;display:grid;justify-items:center;pointer-events:none}
.hw-cap{grid-area:1/1;max-width:1080px;padding:14px 28px;border:1px solid var(--glass-rim);border-radius:20px;background:var(--glass-fill-strong);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);font:400 27px/1.35 var(--font-sans);letter-spacing:-.01em;color:var(--site-ink);text-align:center;opacity:0;visibility:hidden}
.hw-cap:last-child{opacity:1;visibility:visible}
.hw-key{position:absolute;right:44px;bottom:40px;z-index:21;padding:9px 15px;border:1px solid var(--site-line-strong);border-bottom-width:3px;border-radius:var(--radius-md);background:var(--ui-white);font:500 16px/1 var(--font-mono);color:var(--site-ink);opacity:0;visibility:hidden}
.hw-veil{position:absolute;inset:0;z-index:22;background:rgba(242,240,233,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden}
.hw-over{position:absolute;inset:0;z-index:23;display:grid;place-items:center;pointer-events:none;opacity:0;visibility:hidden}
.hw-title-card,.hw-end-card{position:relative;isolation:isolate;padding:46px 54px;border:1px solid var(--glass-rim);border-radius:28px;background:var(--glass-fill-strong);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.hw-title-card{width:940px}
.hw-title-card:before,.hw-end-card:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--glass-sheen)}
.hw-title-card .hw-kicker{margin:0;font-size:15px}
.hw-title-card b{display:block;margin-top:18px;font:500 62px/1.05 var(--font-sans);letter-spacing:-.04em;color:var(--site-ink)}
.hw-title-card small{display:block;margin-top:24px;font:400 14px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--site-muted)}
.hw-end-card{display:flex;flex-direction:column;align-items:center;gap:18px;padding:52px 76px}
.hw-end-mark{display:flex;align-items:center;gap:12px;font:600 76px/1 var(--font-sans);letter-spacing:-.04em;color:var(--site-ink)}
.hw-end-mark svg{display:block;width:auto;height:.96em}
.hw-end-card small{font:400 17px/1 var(--font-mono);letter-spacing:.14em;color:var(--site-moss)}

/* the drawn cursor rides the camera; --inv (1 / zoom, set by site.js) keeps it one size on screen */
.hw-cam .ui-cursor svg{transform:scale(calc(1.3 * var(--inv,1)));transform-origin:2px 1px}
.hw-cam .ui-press-ring{left:calc(-24px * var(--inv,1));top:calc(-24px * var(--inv,1));width:calc(48px * var(--inv,1));height:calc(48px * var(--inv,1));border-width:calc(2.5px * var(--inv,1))}