/* obrussalabs.com home hero. Built by scripts/site_hero_bundle.py: do not edit by hand.
   The live view's stylesheets (tools/surfaces/), then the hero's own (scripts/site_hero/hero.css). */
/* ---- tools/surfaces/frame.css ---- */
/* SURFACES frame. One look: the house scheme from publication/design/system/bruce.css (tokens only,
   no colour values of its own except black-alpha shadows). Gold is the pointer and the yes button. */
.sfv{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;font-family:var(--font);color:var(--ink)}
.sfv-stage{position:relative;display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-items:start;min-height:320px;padding:0 4%}
.sfv[data-cols="2"] .sfv-stage{grid-template-columns:repeat(2,minmax(0,1fr))}
.sfv[data-cols="3"] .sfv-stage{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr)}
.sfv[data-drive] .sfv-stage{display:flex}
.sfv[data-drive] .sfv-col{flex:.8 1 0}
.sfv[data-drive] .sfv-now{flex:2.4 1 0}
.sfv-col{min-width:0;display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.sfv-col[hidden]{display:none}
.sfv-label{font-size:var(--fs-xs);color:var(--dim);letter-spacing:.02em}
.sfv-win{display:none;min-width:0;background:var(--float);border-radius:var(--r-l);box-shadow:var(--e2);overflow:hidden;animation:sfv-in var(--t-slow) var(--ease)}
.sfv-win.on{display:block}
.sfv-bar{display:flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border-bottom:1px solid var(--hair);font-size:var(--fs-xs);color:var(--muted)}
.sfv-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sfv-title:empty::before{content:"\00a0"}
.sfv-mark:empty{display:none}
.sfv-mark{color:var(--k-done)}
.sfv-mark::before{content:"\2713\00a0"}
.sfv-win.held .sfv-bar{color:var(--k-held)}
.sfv-warn{margin:0;padding:8px 14px;border-bottom:1px solid var(--hair);font-size:var(--fs-xs);line-height:1.45;color:var(--k-need);overflow-wrap:anywhere}
.sfv-warn:empty{display:none}
.sf{min-width:0;max-height:62vh;overflow:auto;overflow-wrap:anywhere}
.sfv-win.whole .sf{max-height:none}
.sfv[data-done] .sfv-col{display:none}
.sfv[data-done] .sfv-stage{grid-template-columns:minmax(0,1fr)}
.sfv[data-done][data-on="in"] .sfv-in:not([hidden]),.sfv[data-done][data-on="now"] .sfv-now:not([hidden]),.sfv[data-done][data-on="out"] .sfv-out:not([hidden]){display:grid}
.sfv[data-held] .sfv-win{opacity:.45;transition:opacity var(--t-slow) var(--ease)}

.sfv .sfv-plan{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0 4%;list-style:none;font-size:var(--fs-xs);color:var(--dim)}
.sfv-plan[hidden]{display:none}
.sfv-plan li::before{content:"\25CB\00a0"}
.sfv-plan li.now{color:var(--ink)}
.sfv-plan li.now::before{content:"\25CF\00a0";color:var(--k-work)}
.sfv-plan li.ok::before{content:"\2713\00a0";color:var(--k-done)}
.sfv-foot{display:flex;align-items:baseline;gap:12px;padding:0 4%;min-height:26px}
.sfv-say{flex:1;min-width:0;margin:0;font-size:var(--fs-b);color:var(--ink);overflow-wrap:anywhere}
.sfv-fast{font-size:var(--fs-xs);color:var(--dim)}
.sfv-fast[hidden]{display:none}

.sfv-strip{display:flex;gap:8px;padding:2px 4% 6px;overflow-x:auto;scrollbar-width:none}
.sfv-strip:empty{display:none}
.sfv .sfv-tab{flex:0 0 auto;display:flex;align-items:center;gap:8px;max-width:190px;min-height:44px;padding:6px 10px;border:0;border-radius:var(--r-m);background:var(--float);color:var(--muted);font:inherit;font-size:var(--fs-xs);cursor:pointer;box-shadow:var(--e1)}
.sfv .sfv-tab[aria-current="true"]{background:var(--float-2);color:var(--ink)}
.sfv-tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sfv-pic{flex:0 0 auto;width:40px;height:30px;border-radius:6px;background:var(--lift);overflow:hidden;display:grid;place-items:center;font-size:11px;line-height:1.1}
.sfv-pic>*{max-width:100%;max-height:100%}
.sfv-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sfv-name:empty{display:none}

.sfv-ptr,.sfv-ring{position:absolute;left:0;top:0;z-index:5;pointer-events:none;will-change:transform}
.sfv-ptr{transition:transform 600ms cubic-bezier(.45,.05,.2,1)}
.sfv-ptr[hidden],.sfv-ring[hidden]{display:none}
.sfv-ptr i{display:block;width:0;height:0;border-left:13px solid var(--gold);border-top:5px solid transparent;border-bottom:13px solid transparent;transform:rotate(-12deg);filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.sfv-ptr b{position:absolute;left:12px;top:16px;padding:2px 8px;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-size:11px;font-weight:600;white-space:nowrap}
.sfv-ring{width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:2px solid var(--gold);opacity:0}
.sfv-ring.go{animation:sfv-ring 420ms ease-out}
.sfv-fly{position:fixed;left:0;top:0;z-index:6;max-width:220px;padding:4px 10px;border-radius:999px;background:var(--float-2);color:var(--ink);font:var(--fs-xs) var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--e2);pointer-events:none;transition:transform 620ms cubic-bezier(.45,.05,.2,1)}

.sfv-hold{position:absolute;left:0;right:0;top:20%;margin:0 auto;z-index:7;width:min(420px,88%);padding:20px;border-radius:var(--r-l);background:var(--t-held);box-shadow:var(--e2);animation:sfv-card var(--t-slow) var(--ease)}
.sfv-hold[hidden]{display:none}
.sfv-held{font-size:var(--fs-xs);color:var(--k-held);margin-bottom:6px}
.sfv-held::before{content:"\25A0\00a0"}
.sfv-hold p{margin:0 0 16px;font-size:var(--fs-b);color:var(--ink)}
.sfv-hold p:empty,.sfv-hold ul:empty,.sfv .sfv-yes[hidden]{display:none}
.sfv-hold ul{margin:0 0 16px;padding-left:18px;font-size:var(--fs-s);color:var(--muted)}
.sfv .sfv-yes,.sfv .sfv-no{min-height:44px;padding:0 18px;border:0;border-radius:999px;font:inherit;font-size:var(--fs-s);cursor:pointer}
.sfv .sfv-yes{background:var(--gold);color:var(--gold-ink);font-weight:600}
.sfv .sfv-yes:hover{background:var(--gold-hover)}
.sfv .sfv-no{background:none;color:var(--muted)}
.sfv-yes:focus-visible,.sfv-no:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.sf-plain{padding:16px 18px;font-size:var(--fs-m);line-height:1.55;color:var(--ink)}
.sf-plain p{margin:0 0 8px;white-space:pre-wrap}
.sf-rows{margin:4px 18px 14px;border-collapse:collapse;font-size:var(--fs-s);color:var(--ink)}
.sf-rows td{padding:5px 16px 5px 0;border-bottom:1px solid var(--hair);vertical-align:top}

@keyframes sfv-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sfv-ring{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.5)}}
@keyframes sfv-card{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* a phone: one stacked paper, the one Bruce is on; the strip switches */
@media (max-width:760px){
  .sfv-stage,.sfv[data-cols] .sfv-stage,.sfv[data-drive] .sfv-stage{display:grid;grid-template-columns:minmax(0,1fr);padding:0 16px;min-height:240px}
  .sfv-col{display:none}
  .sfv[data-on="in"] .sfv-in:not([hidden]),.sfv[data-on="now"] .sfv-now:not([hidden]),.sfv[data-on="out"] .sfv-out:not([hidden]){display:grid}
  .sfv-foot,.sfv-strip,.sfv .sfv-plan{padding-left:16px;padding-right:16px}
  .sfv-plan li:not(.now){display:none}
  .sf{max-height:56vh}
}
@media (prefers-reduced-motion:reduce){
  .sfv-win,.sfv-hold,.sfv-ring.go{animation:none}
  .sfv-ptr,.sfv-fly{transition:none}
}
/* ---- tools/surfaces/web.css ---- */
/* SURFACES web (member 4). One look: the house scheme. Every colour here is a token of
   publication/design/system/bruce.css or a mix of two of them; no colour value is written in this file.
   The browser's frame is the house black. The page inside is light, because a web page is: its paper is the
   house ink, its words the house black, and the reading light is the house's working colour. */
.sf-web{
  --sfw-paper:var(--ink); --sfw-ink:var(--bg); --sfw-soft:color-mix(in srgb,var(--bg) 62%,var(--ink));
  --sfw-line:color-mix(in srgb,var(--bg) 14%,var(--ink)); --sfw-read:color-mix(in srgb,var(--k-work) 34%,var(--ink));
  --sfw-see:color-mix(in srgb,var(--k-work) 45%,var(--bg)); --sfw-ask:color-mix(in srgb,var(--k-need) 52%,var(--bg));
  --sfw-ask-bg:color-mix(in srgb,var(--k-need) 24%,var(--ink)); --sfw-stop:color-mix(in srgb,var(--k-held) 50%,var(--bg));
  --sfw-stop-bg:color-mix(in srgb,var(--k-held) 26%,var(--ink));
  display:flex; flex-direction:column; min-width:0; overflow:hidden; background:var(--float-2); color:var(--ink);
  font-family:var(--font);
}
.sf-web *{box-sizing:border-box}
.sfw-bar{flex:none; padding:8px 10px 9px; border-bottom:1px solid var(--hair-2)}
.sfw-tabs{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; margin-bottom:7px}
.sfw-tabs::-webkit-scrollbar{display:none}
.sfw-tab{
  flex:0 1 190px; min-width:74px; max-width:190px; padding:6px 12px; border-radius:var(--r-s) var(--r-s) 3px 3px;
  color:var(--dim); font-size:var(--fs-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sfw-tab.sfw-on{background:var(--lift); color:var(--ink)}
.sfw-tab.sfw-bad{text-decoration:line-through; text-decoration-color:var(--k-need)}
.sfw-addr{
  display:flex; align-items:center; gap:9px; min-width:0; padding:7px 14px; border-radius:999px;
  background:var(--bg); border:1px solid var(--hair); font-size:var(--fs-s);
}
.sfw-lock{flex:none; width:8px; height:8px; border-radius:50%; background:var(--dim)}
.sfw-lock.sfw-safe{background:var(--k-done)}
.sfw-url{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted)}
.sfw-url b{font-weight:600; color:var(--ink)}
.sfw-when{flex:none; color:var(--dim); font-size:var(--fs-xs)}
.sfw-view{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; background:var(--sfw-paper); color:var(--sfw-ink); position:relative}
.sfw-view:focus-visible{outline:2px solid var(--k-work); outline-offset:-2px}
.sfw-page{max-width:800px; margin:0 auto; padding:26px 7% 64px; font-size:16px; line-height:1.6; overflow-wrap:anywhere}
.sfw-page p{margin:0 0 .8em}
.sfw-site{font-weight:700; font-size:var(--fs-s); color:var(--sfw-see); padding-bottom:12px; margin-bottom:20px !important; border-bottom:1px solid var(--sfw-line)}
.sfw-page h1{margin:0 0 20px; font-size:29px; line-height:1.18; letter-spacing:-.02em; font-weight:650}
.sfw-page .sfw-h{margin:1.5em 0 .45em; font-size:19px; font-weight:650; line-height:1.3}
.sfw-page .sfw-row{margin:0; padding:8px 2px; border-bottom:1px solid var(--sfw-line); font-variant-numeric:tabular-nums}
.sfw-menu{display:flex; flex-wrap:wrap; gap:4px 18px; padding-bottom:10px; border-bottom:1px solid var(--sfw-line); font-size:var(--fs-s)}
.sfw-link{color:var(--sfw-see); border-radius:5px}
.sfw-menu .sfw-link{text-decoration:underline; text-underline-offset:3px}
.sfw-part{border-radius:var(--r-s); margin:0 -12px; padding:2px 12px; box-shadow:inset 0 0 0 transparent; transition:background var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease)}
.sfw-part.sfw-now{background:color-mix(in srgb,var(--k-work) 12%,var(--ink)); box-shadow:inset 3px 0 0 var(--sfw-see)}
.sfw-hit{background:var(--sfw-read); color:inherit; border-radius:4px; padding:1px 2px; margin:0 -2px}
.sfw-hit.sfw-now,.sfw-link.sfw-now{background:var(--sfw-read); box-shadow:0 0 0 2px var(--sfw-see); animation:sfw-lit var(--t-slow) var(--ease) both}
.sfw-hit.sfw-taken{text-decoration:underline; text-decoration-color:var(--sfw-see); text-decoration-thickness:2px; text-underline-offset:3px}
.sfw-doubt{display:inline-block; margin-left:8px; padding:1px 9px; border-radius:999px; background:var(--sfw-ask-bg); color:var(--sfw-ask); font-size:13px}
.sfw-doubt::before,.sfw-note::before{content:"\25B2\00a0"}
.sfw-gap{margin:14px 0 !important; padding:9px 14px; border:1px dashed var(--sfw-line); border-radius:var(--r-s); color:var(--sfw-soft); font-size:var(--fs-s)}
.sfw-note,.sfw-hold{position:sticky; top:0; left:0; z-index:2; margin:0; padding:11px 7%; background:var(--sfw-ask-bg); color:var(--sfw-ask); font-size:var(--fs-m); font-weight:550; border-bottom:1px solid var(--sfw-line); animation:sfw-in var(--t-slow) var(--ease) both}
.sfw-hold{background:var(--sfw-stop-bg); color:var(--sfw-stop)}
.sfw-hold::before{content:"\25A0\00a0"}
.sfw-linkhead{margin-top:2.2em !important; padding-top:16px; border-top:1px solid var(--sfw-line); font-size:var(--fs-m) !important; color:var(--sfw-soft)}
.sfw-links,.sfw-results{margin:0; padding:0 0 0 26px}
.sfw-links li{padding:3px 6px; font-size:var(--fs-m)}
.sfw-links li::marker,.sfw-results li::marker{color:var(--sfw-soft); font-size:13px}
.sfw-results li{padding:11px 10px; margin-bottom:6px}
.sfw-lt{display:block; font-weight:600; text-decoration:underline; text-underline-offset:3px}
.sfw-results .sfw-lt{font-size:18px}
.sfw-lu{display:block; color:var(--sfw-soft); font-size:13px}
.sfw-file{display:inline-block; padding:7px 13px; border:1px solid var(--sfw-line); border-radius:var(--r-s); font-size:var(--fs-s)}
.sfw-failed{text-align:center; padding-top:9vh}
.sfw-failed h1{color:var(--sfw-ask)}
.sfw-failed h1::before{content:"\25B2\00a0"}
.sfw-why{max-width:520px; margin:0 auto !important; color:var(--sfw-soft)}
.sfw-empty{text-align:center; color:var(--sfw-soft); padding-top:6vh}
/* the real window's picture fills this window's width; web.js moves the window to what Bruce is on */
.sfw-page.sfw-pic{max-width:none; padding:0}
.sfw-shot{position:relative}
.sfw-shot img{display:block; width:100%; height:100%}
.sfw-ghost{position:absolute; inset:0; visibility:hidden; pointer-events:none}
.sfw-box[hidden]{display:none}
.sfw-box{position:absolute; border-radius:6px; box-shadow:0 0 0 3px var(--k-work); animation:sfw-lit var(--t-slow) var(--ease) both}
.sfw-typed{position:absolute; left:0; top:100%; margin-top:6px; padding:2px 9px; border-radius:var(--r-s); background:var(--bg); color:var(--ink); font-style:normal; font-size:var(--fs-xs); white-space:nowrap}
.sfw-done .sfw-now{animation:none}
.sfw-thumb{display:inline-flex; color:var(--muted)}
.sfw-thumb.sfw-bad{color:var(--k-need)}
.sfw-dots{flex:none; width:22px; height:15px; border-radius:4px; border:1.5px solid currentColor; border-top-width:5px}
@keyframes sfw-lit{from{box-shadow:0 0 0 9px transparent}}
@keyframes sfw-in{from{opacity:0; transform:translateY(6px)}}
@media (max-width:600px){
  .sfw-when{display:none}
  .sfw-tab{flex-basis:132px; min-width:64px}
  .sfw-page{padding:20px 18px 52px; font-size:var(--fs-m)}
  .sfw-page h1{font-size:24px}
  .sfw-note,.sfw-hold{padding:10px 18px}
  .sfw-shot{width:180%}   /* a phone moves in close */
}
@media (prefers-reduced-motion:reduce){
  .sfw-note,.sfw-hold,.sfw-now,.sfw-box{animation:none !important}
  .sfw-part{transition:none}
}
/* ---- tools/surfaces/app.css ---- */
/* SURFACES app: Bruce working inside an application. One look: the house scheme (true black, gold only
   for what the person presses). Every colour is a token of publication/design/system/bruce.css.
   The window's own picture is whatever the real application looks like. Scoped under .sf-app.
   The window's bar, the pointer and the stop card are the frame's (frame.css); none is drawn here. */
.sf-app{display:block;min-width:0;font-family:var(--font);color:var(--ink);background:var(--bg);overflow:hidden}
.sf-app [hidden]{display:none!important}

/* the window itself */
/* always the window's full width, so no band sits beside the picture; never taller than the frame lets
   a window be. Where that cuts the picture short, app.js moves it up and down to follow the action.
   At the end it rests on the top of the page, as a window does. */
.sf-app .sfa-view{position:relative;width:100%;aspect-ratio:1.6;max-height:54vh;overflow:hidden;background:var(--bg)}
.sf-app .sfa-stage{position:absolute;left:0;top:0;width:100%;aspect-ratio:var(--sfa-a,1.6);overflow:hidden;
  transform-origin:0 0;transition:transform 380ms var(--ease)}
.sf-app .sfa-ghost{position:absolute;left:0;top:0;width:100%;height:100%;visibility:hidden;pointer-events:none}
.sf-app .sfa-pic{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;
  transition:opacity 220ms linear,transform 380ms var(--ease)}
.sf-app .sfa-pic.sfa-on{opacity:1}

/* the control he is on */
.sf-app .sfa-ring{position:absolute;z-index:3;box-sizing:border-box;pointer-events:none;
  border:2px solid var(--k-work);border-radius:7px;outline:4px solid var(--cyan-soft);
  transition:left 200ms var(--ease),top 200ms var(--ease),width 200ms var(--ease),height 200ms var(--ease)}
.sf-app .sfa-ring.sfa-stop{border-color:var(--k-held);border-width:3px;outline:5px solid var(--t-held);
  animation:sfa-stop 1.8s ease-in-out infinite}
@keyframes sfa-stop{50%{outline-width:9px}}
.sf-app .sfa-tag{position:absolute;left:-3px;bottom:calc(100% + 6px);padding:2px 9px;border-radius:6px;
  background:var(--k-held);color:var(--bg);font-size:12px;font-weight:700;white-space:nowrap}

/* the words going in, a letter at a time, where the field is */
.sf-app .sfa-type{position:absolute;z-index:4;box-sizing:border-box;display:flex;align-items:center;
  padding:0 .7em;overflow:hidden;white-space:pre-wrap;line-height:1.25;border-radius:6px;
  background:var(--ink);color:var(--bg);border:2px solid var(--k-work);font-size:14px}
.sf-app .sfa-type::after{content:"";flex:none;width:2px;height:1.1em;margin-left:1px;background:var(--bg);
  animation:sfa-caret .9s steps(1) infinite}
@keyframes sfa-caret{50%{opacity:0}}
.sf-app .sfa-type.sfa-free{transform:translate(14px,16px);padding:4px 10px;max-width:60%}

/* an honest doubt, on the exact control */
.sf-app .sfa-doubt{position:absolute;z-index:7;display:flex;gap:8px;align-items:flex-start;
  max-width:min(86%,340px);padding:7px 11px;border-radius:8px;
  background:var(--t-need);border:1px solid var(--k-need);color:var(--ink);font-size:13px;line-height:1.35;
  transition:left 380ms var(--ease),top 380ms var(--ease)}
.sf-app .sfa-doubt i{flex:none;width:18px;height:18px;border-radius:50%;background:var(--k-need);color:var(--bg);
  font-style:normal;font-weight:800;font-size:12.5px;line-height:18px;text-align:center}

/* no picture: say so, and write the steps out */
.sf-app .sfa-lost{position:absolute;left:12px;right:12px;bottom:10px;z-index:8;margin:0;padding:8px 12px;
  border-radius:8px;background:var(--t-need);border:1px solid var(--k-need);color:var(--ink);font-size:13px}
.sf-app .sfa-words{position:absolute;inset:0;z-index:2;margin:0;padding:16px 18px 16px 40px;overflow:auto;
  background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.5}
.sf-app .sfa-words li{margin:0 0 8px}
.sf-app .sfa-words b{display:block;font-weight:600;color:var(--k-work)}
.sf-app .sfa-words em{display:block;font-style:normal;color:var(--k-need)}

/* the small picture in the strip */
.sfa-thumb{width:100%;aspect-ratio:1.6;overflow:hidden;border-radius:6px;background:var(--float-2);
  color:var(--muted);font:600 12px/1.2 var(--font);display:grid;place-items:center;text-align:center}
.sfa-thumb img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}

/* caught up at once, or the person asked for less motion: no gliding */
.sf-app.sfa-now .sfa-stage,.sf-app.sfa-now .sfa-pic,.sf-app.sfa-now .sfa-ring,.sf-app.sfa-now .sfa-doubt{transition:none}
@media (prefers-reduced-motion:reduce){
  .sf-app .sfa-stage,.sf-app .sfa-pic,.sf-app .sfa-ring,.sf-app .sfa-doubt{transition:none}
  .sf-app .sfa-ring.sfa-stop,.sf-app .sfa-type::after{animation:none}
}
/* ---- tools/surfaces/sheet.css ---- */
/* SURFACES sheet: the spreadsheet. One look: the house scheme of publication/design/system/bruce.css; every
   colour here is a house token. The frame draws the window around it; this file draws only the sheet.
   Cyan is Bruce working, amber a doubt, coral held: each also has its own shape and its own words. */
.sf-sheet{display:flex;flex-direction:column;min-width:0;max-width:100%;overflow:hidden;background:var(--float);color:var(--ink);font-size:14px;line-height:1.4;overflow-wrap:normal}
.sf-sheet .bar{display:flex;align-items:baseline;gap:12px;padding:10px 14px;border-bottom:1px solid var(--hair);min-height:42px;flex:0 0 auto}
.sf-sheet .at{flex:0 0 auto;min-width:44px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.sf-sheet .fx{min-width:0;overflow-wrap:anywhere}
.sf-sheet .fx.isfx,.sf-sheet td.isfx .v{color:var(--k-work)}
.sf-sheet .wrap{position:relative;flex:1 1 auto;min-height:0;overflow:auto;max-width:100%;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sf-sheet table{border-collapse:separate;border-spacing:0;min-width:100%}
.sf-sheet th,.sf-sheet td{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:8px 10px;text-align:left;vertical-align:top;font-variant-numeric:tabular-nums}
.sf-sheet th{position:sticky;z-index:2;background:var(--float-2);color:var(--dim);font-weight:500;font-size:12px;text-align:center}
.sf-sheet thead th{top:0;min-width:92px}
.sf-sheet tbody th{left:0;min-width:34px;width:34px;padding:8px 4px}
.sf-sheet thead th.corner{left:0;z-index:3;min-width:34px;width:34px}
.sf-sheet td{min-width:92px;max-width:300px;height:36px;overflow-wrap:break-word;transition:background var(--t-slow) var(--ease)}
.sf-sheet td.b{font-weight:650}
.sf-sheet td.fill{background:var(--float-2)}
.sf-sheet td.num{text-align:right}
.sf-sheet td .v{display:block;min-height:20px;white-space:pre-wrap}

/* the selected cell: one box that glides from cell to cell, as in a real spreadsheet */
.sf-sheet .cur{position:absolute;z-index:1;pointer-events:none;box-sizing:border-box;border:2px solid var(--k-work);border-radius:4px;opacity:0;transition:left var(--t-med) var(--ease),top var(--t-med) var(--ease),width var(--t-med) var(--ease),height var(--t-med) var(--ease),opacity var(--t-fast)}
.sf-sheet .cur.on{opacity:1}
.sf-sheet .cur.rd{border-style:dashed}
.sf-sheet .cur.hd{border-color:var(--k-held)}
.sf-sheet.rd .wrap{box-shadow:inset 0 0 0 2px var(--k-work)}

/* a cell just written, a cell that changed, a thing that arrived from elsewhere, the cells a formula reads */
.sf-sheet td.new,.sf-sheet td.land,.sf-sheet td.dep{background:var(--cyan-soft)}
.sf-sheet td.chg{background:var(--cyan-soft);box-shadow:inset 0 -2px 0 var(--k-work)}
.sf-sheet td.land,.sf-sheet td.dep{box-shadow:inset 0 0 0 1px var(--k-work)}

/* a doubt sits ON its cell: an amber triangle and the words. Held: a coral octagon and the words */
.sf-sheet td.doubt,.sf-sheet td.held{min-width:176px}
.sf-sheet td.doubt{box-shadow:inset 3px 0 0 var(--k-need)}
.sf-sheet td.held{box-shadow:inset 3px 0 0 var(--k-held)}
.sf-sheet .doubt-say,.sf-sheet .held-say{display:block;margin:5px 0 0;padding-left:17px;position:relative;font-size:12.5px;line-height:1.35;text-align:left;font-weight:500;white-space:normal}
.sf-sheet .doubt-say{color:var(--k-need)}
.sf-sheet .held-say{color:var(--k-held)}
.sf-sheet .doubt-say::before,.sf-sheet .held-say::before{content:"";position:absolute;left:0;top:3px;width:11px;height:11px}
.sf-sheet .doubt-say::before{background:var(--k-need);clip-path:polygon(50% 0,100% 100%,0 100%)}
.sf-sheet .held-say::before{background:var(--k-held);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}

.sf-sheet .tabs{display:flex;flex:0 0 auto;gap:4px;padding:8px 10px 0;overflow-x:auto;border-top:1px solid var(--hair)}
.sf-sheet .tabs button{flex:0 0 auto;padding:6px 12px;min-height:34px;background:none;border:0;font:inherit;cursor:pointer;border-radius:var(--r-s) var(--r-s) 0 0;color:var(--dim);font-size:13px;white-space:nowrap}
.sf-sheet .tabs button:hover{color:var(--ink)}
.sf-sheet .tabs button.on{background:var(--float-2);color:var(--ink);font-weight:550}
.sf-sheet .foot{flex:0 0 auto;padding:10px 14px;border-top:1px solid var(--hair);color:var(--dim);font-size:13px}
.sf-sheet .foot p{margin:0;color:var(--ink)}
.sf-sheet .foot p+p{margin-top:4px}
.sf-sheet .foot p:not([class]){color:var(--dim)}
.sf-sheet .foot .doubt-say,.sf-sheet .foot .held-say{font-size:13px}
.sf-sheet .bar[hidden],.sf-sheet .tabs[hidden],.sf-sheet .foot[hidden]{display:none}

/* the small picture for the strip of things used */
.sf-sheet-thumb{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;width:44px;height:34px;padding:4px;box-sizing:border-box;background:var(--float-2);border-radius:6px}
.sf-sheet-thumb i{display:block;border-radius:1px;background:var(--hair-2)}
.sf-sheet-thumb i.f{background:var(--muted)}

@media (max-width:860px){
  .sf-sheet{font-size:13px}
  .sf-sheet th,.sf-sheet td{padding:7px 8px}
  .sf-sheet thead th,.sf-sheet td{min-width:88px}
  .sf-sheet td{max-width:220px}
}
@media (prefers-reduced-motion:reduce){
  .sf-sheet .cur,.sf-sheet td{transition:none}
}
/* ---- tools/surfaces/note.css ---- */
/* SURFACES note. Tokens from publication/design/system/bruce.css only. */
.sf-note{background:var(--float)}
.sf-note-body{padding:16px 18px;font-size:var(--fs-m);line-height:1.55;color:var(--ink)}
.sf-note-body p{margin:0 0 8px;white-space:pre-wrap;animation:sf-note-in var(--t-slow) var(--ease)}
.sf-note-body p:empty{display:none}
.sf-note-body img{display:block;max-width:100%;border-radius:var(--r-s);margin:0 0 8px}
.sf-note-line{color:var(--muted);padding-left:12px;border-left:2px solid var(--hair-2)}
.sf-note-line:last-child{color:var(--ink);border-left-color:var(--k-work)}
.sf-note-done .sf-note-line:last-child{border-left-color:var(--hair-2)}
.sf-note-doubt{color:var(--k-need)}
.sf-note-doubt::before{content:"\25B2\00a0"}
.sf-note-held{color:var(--k-held)}
.sf-note-held::before{content:"\25A0\00a0"}
.sf-note-thumb{display:block;padding:2px;font-size:6px;line-height:1.2;color:var(--muted);overflow:hidden;white-space:normal;word-break:break-all}
@keyframes sf-note-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sf-note-body p{animation:none}}
/* ---- scripts/site_hero/hero.css ---- */
/* obrussalabs.com home hero (scripts/site_hero/hero.css): the words on the left, Bruce's live view in a
   window on the right; one above the other on a phone. Colours are the design system's tokens only. */
.hero2.hero-live { text-align: left; padding: 36px 0 8px; }
.hero-live .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.hero-live .wordmark { font-size: clamp(64px, 9vw, 128px); line-height: .95; }
.hero-live .lede { margin: 18px 0 0; max-width: none; font-size: clamp(20px, 2.2vw, 28px); font-weight: 550; letter-spacing: -.01em; color: var(--ink); }
.hero-live .sub { margin: 12px 0 0; max-width: 34em; font-size: 16.5px; line-height: 1.55; color: var(--muted); }
.hero-live .cta-row { justify-content: flex-start; margin-top: 24px; }
.howknow { margin: 10px 0 0; max-width: 34em; font-size: 14.5px; line-height: 1.5; color: var(--dim); }
.howknow summary { cursor: pointer; display: inline-block; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; list-style: none; min-height: 28px; }
.howknow summary::-webkit-details-marker { display: none; }
.howknow summary:hover { color: var(--ink); }
.howknow p { margin: 8px 0 0; }

.hv { margin: 0; min-width: 0; background: var(--float); border-radius: var(--r-xl); box-shadow: var(--e2); overflow: hidden; text-align: left; }
.hv-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hair); font-size: 14px; min-width: 0; }
.hv-head .mark { width: 16px; height: 16px; color: var(--gold); flex: none; }
.hv-head b { color: var(--k-work); font-size: 12.5px; font-weight: 600; }
.hv-cap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; color: var(--ink); }
/* one fixed height, so the page under the window never moves while a job plays */
.hv-body { height: 640px; padding: 14px 0 6px; overflow: hidden; }
.hv-still { display: block; width: calc(100% - 32px); height: auto; margin: 26px 16px 0; border-radius: var(--r-m); }
.hv-foot p { margin: 0; }
.hv-foot { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 8px 16px; border-top: 1px solid var(--hair); font-size: 12.5px; line-height: 1.45; color: var(--dim); }
.hv-pause { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: transparent; border: 0; cursor: pointer; flex: none;
  min-height: 36px; min-width: 72px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-2); }
.hv-pause:hover { background: var(--float-2); }
.hv-pause:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* the view inside the window: the window is narrower than a page, so its places sit one above the other */
/* the words of the step and the strip stay in sight at the foot; the work above them is what moves */
.hv-stage { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.hv-body .sfv-stage, .hv-body .sfv[data-drive] .sfv-stage { display: flex; flex-direction: column; padding: 0 16px;
  flex: 1 1 auto; min-height: 0; overflow: hidden; }
.hv-body .sfv-foot, .hv-body .sfv-strip { flex: none; }
.hv-body .sfv[data-drive] .sfv-col { flex: none; }
.hv-body .sfv-out .sf, .hv-body .sfv-in .sf { max-height: 244px; }
.hv-body .sfv-foot, .hv-body .sfv-strip, .hv-body .sfv .sfv-plan { padding-left: 16px; padding-right: 16px; }
.closing-note { margin: 18px 0 0; font-size: 14.5px; color: var(--dim); }
@media (max-width: 900px) {
  .hero2.hero-live { padding-top: 20px; }
  .hero-live .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hv-body { height: 480px; padding: 10px 0 4px; }
  .hv-still { margin-top: 12px; }
}
/* the stop card: the frame puts it under the window and makes room for it there. This window is one fixed
   size, so here it sits over the foot of the work instead, compact, and nothing is pushed out of sight. */
.hv-body .sfv-stage { margin-bottom: 0 !important; }
.hv-body .sfv-hold { left: 0 !important; right: 0 !important; top: auto !important; bottom: 8px !important; margin: 0 auto;
  width: min(440px, calc(100% - 32px)); padding: 14px 16px; }
.hv-body .sfv-hold p { margin-bottom: 8px; font-size: 15px; line-height: 1.4; }
.hv-body .sfv-hold ul { margin-bottom: 8px; font-size: 13px; line-height: 1.4; }
.hv-body .sfv .sfv-yes, .hv-body .sfv .sfv-no { min-height: 36px; }