/* Single-theme on purpose: a night-lit pixel office. Every colour is painted explicitly. */
  :root{
    --ink:#15131d; --panel:#1f1b2a; --panel-2:#272236; --line:#3a3350;
    --text:#f1e9d8; --dim:#b3aac4; --accent:#7fd6c8;
    --work:#5fd68a; --coffee:#f2b84b; --eat:#ff8a6b; --blocked:#ff5c8a; --desk:#9aa9cc; --sleep:#8f9ad0; --lounge:#c9a2ff;
    /* Jersey 10 is the one pixel face: headings, labels, numbers. one design pixel is 1px at 18.67px, so sizes step in 9.33px (1.1667rem, 1.75rem, 2.333rem, 3.5rem) */
    --display:"Jersey 10", "Silkscreen", ui-monospace, monospace;
    --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
    --data:"Jersey 10", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --px1:1.1667rem; --px15:1.75rem; --px2:2.3333rem; --px3:3.5rem;
    color-scheme: dark;
  }
  *{box-sizing:border-box}
  html{background:var(--ink);font-synthesis:none}
  body{margin:0;background:var(--ink);color:var(--text);font:400 1.0625rem/1.6 var(--body);padding-inline:20px;padding-block:0 64px}
  ::selection{background:var(--accent);color:var(--ink)}
  a{color:var(--accent);text-underline-offset:3px}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .wrap{width:100%;max-width:1920px;margin-inline:auto}
  header.top{padding-block:40px 24px;display:grid;gap:10px}
  h1{font:400 var(--px2)/1 var(--display);margin:0;text-wrap:balance}
  @media (min-width:1120px){h1{font-size:var(--px3)}}
  h1 span{color:var(--coffee)}
  .lede{max-width:62ch;color:var(--dim);margin:0;font-size:1.125rem}
  .lede strong{color:var(--text)}
  .lede code{font:1.1em/1 var(--data);color:var(--accent);background:var(--panel-2);padding:0 4px}
  .tag{justify-self:start;font:var(--px1)/1 var(--data);color:var(--ink);background:var(--coffee);padding:4px 8px 3px}

  /* ---------- stage ---------- */
  .stage{display:grid;grid-template-columns:minmax(0,1fr) clamp(310px,24vw,420px);gap:20px;align-items:start}
  .screen{background:#0b0a10;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 0 0 2px #2c2640}
  #floor{display:block;width:100%;height:auto;aspect-ratio:16/10;image-rendering:pixelated;image-rendering:crisp-edges;cursor:pointer;background:#2d4b5b}
  .bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 4px 2px;font:var(--px1)/1 var(--data);color:var(--dim)}
  .bar .clock{color:var(--text);font-size:var(--px15);min-width:3.2em}
  .bar .counts{display:flex;gap:14px;margin-left:auto;flex-wrap:wrap}
  .dot{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:1px}
  button{font:var(--px1)/1 var(--data);color:var(--text);background:var(--panel-2);border:2px solid var(--line);padding:5px 10px 4px;cursor:pointer}
  button:hover{border-color:var(--accent)}
  button[aria-pressed="true"]{background:var(--accent);color:var(--ink);border-color:var(--accent)}
  .seg{display:flex;gap:0}
  .seg button+button{border-left:0}

  aside.side{display:grid;gap:16px}
  .card{background:var(--panel);border:2px solid var(--line);padding:14px 16px}
  .card h3{margin:0;font:400 var(--px15)/1 var(--display)}
  .card .role{color:var(--dim);font-size:.95rem;margin:2px 0 10px}
  .chip{display:inline-flex;align-items:center;gap:6px;font:var(--px15)/1 var(--data);padding:3px 8px 2px;color:var(--ink)}
  .card .task{margin:10px 0 0;font-size:.98rem}
  .card .muted{color:var(--dim)}
  .roll .dot{margin:0}
  .card .since{margin:4px 0 0;color:var(--dim);font:var(--px1)/1.15 var(--data)}
  .journal{background:var(--panel);border:2px solid var(--line);padding:12px 0 8px}
  .journal h3{margin:0 16px 8px;font:400 var(--px1)/1 var(--display);color:var(--dim);letter-spacing:1px}
  .journal ol{list-style:none;margin:0;padding:0;max-height:clamp(330px,40vw,720px);overflow:auto;font:var(--px1)/1.15 var(--data);scrollbar-color:var(--line) transparent}
  .journal li{padding:3px 16px;display:grid;grid-template-columns:3.1em 1fr;gap:6px;color:var(--text);transition:opacity .3s}
  .journal li.future{opacity:.32}
  .journal li.now{background:var(--panel-2)}
  .journal .k{font-weight:400}
  .journal .office{color:var(--dim)}

  .roll{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
  .roll button{display:grid;grid-template-columns:40px 10px minmax(0,1fr);gap:3px 8px;align-items:center;text-align:left;padding:7px 9px 6px;background:var(--panel)}
  .roll button .n{font:400 var(--px1)/1 var(--display);overflow:hidden;text-overflow:ellipsis}
  .roll button .hs{grid-row:span 2;display:block;width:40px;height:40px;image-rendering:pixelated}
  .roll button .hs[hidden]{display:none}
  .roll button .s{grid-column:3;font:calc(var(--px1) * .85)/1 var(--data);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .roll button.sel{border-color:var(--text)}

  /* ---------- sections ---------- */
  section{padding-block:56px 0}
  h2{font:400 var(--px15)/1.05 var(--display);margin:0 0 10px;text-wrap:balance}
  @media (min-width:1245px){h2{font-size:var(--px2)}}
  .intro{max-width:64ch;color:var(--dim);margin:0 0 24px}
  .markers{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:2px;background:var(--line);border:2px solid var(--line)}
  .marker{display:grid;grid-template-columns:64px 1fr;gap:14px;background:var(--panel);padding:14px 16px;align-items:start}
  .marker canvas{width:60px;height:96px;image-rendering:pixelated;background:#3a3350}
  .marker h3{margin:0 0 2px;font:400 var(--px1)/1.15 var(--display)}
  .marker p{margin:0;font-size:.98rem}
  .marker .when{color:var(--dim);margin-top:4px}
  .marker code,.map code,p code,li code{font:1.1em/1 var(--data);color:var(--accent);background:var(--panel-2);padding:0 4px}

  .scroll{overflow-x:auto;border:2px solid var(--line)}
  table.map{border-collapse:collapse;width:100%;min-width:680px;font-size:.98rem}
  .map th{font:400 var(--px1)/1.15 var(--display);text-align:left;color:var(--dim);background:var(--panel-2);padding:10px 14px}
  .map td{padding:11px 14px;border-top:2px solid var(--line);vertical-align:top;background:var(--panel)}
  .map td:last-child{white-space:nowrap}

  pre{margin:0;background:#0e0c14;border:2px solid var(--line);padding:14px 16px;overflow-x:auto;font:var(--px1)/1.15 var(--data);color:var(--text)}
  pre .c{color:var(--dim)} pre .s{color:var(--coffee)} pre .k{color:var(--accent)}
  .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
  .two figure{margin:0;display:grid;gap:8px}
  .two figcaption{font-size:.95rem;color:var(--dim)}

  .flow{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px}
  .flow li{position:relative;background:var(--panel);border:2px solid var(--line);padding:12px 14px}
  .flow li:not(:last-child)::after{content:"";position:absolute;right:-22px;top:50%;width:16px;height:2px;background:var(--coffee)}
  .flow li:not(:last-child)::before{content:"";position:absolute;right:-24px;top:calc(50% - 4px);border:5px solid transparent;border-left-color:var(--coffee);border-right:0}
  .flow b{display:block;font:400 var(--px1)/1.15 var(--display)}
  .flow span{display:block;font:var(--px1)/1.15 var(--data);color:var(--coffee);margin-top:4px;word-break:break-word}
  .flow small{display:block;color:var(--dim);font-size:.88rem;margin-top:6px;line-height:1.4}

  ol.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:2px;background:var(--line);border:2px solid var(--line)}
  ol.steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.1fr);gap:14px;background:var(--panel);padding:13px 16px}
  ol.steps li::before{content:counter(s);font:400 var(--px15)/1 var(--display);color:var(--coffee)}
  ol.steps b{font-weight:700}
  ol.steps .where{font:var(--px1)/1.15 var(--data);color:var(--accent);word-break:break-word}

  .rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:12px 28px;margin:0;padding:0;list-style:none}
  .rules li{padding-left:22px;position:relative;max-width:56ch}
  .rules li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;background:var(--work)}
  .check li::before{background:var(--coffee)}

  .decide{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:16px}
  .q{background:var(--panel);border:2px solid var(--coffee);padding:16px 18px}
  .q h3{margin:0 0 10px;font:400 var(--px1)/1.15 var(--display)}
  .opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:12px}
  .opt{padding:10px 12px;background:var(--panel-2)}
  .opt.rec{outline:2px solid var(--work)}
  .opt b{display:block}
  .opt em{font-style:normal;font:var(--px1)/1 var(--data);color:var(--work)}
  .opt p{margin:4px 0 0;font-size:.95rem;color:var(--dim)}

  @media (max-width: 960px){
    .stage{grid-template-columns:1fr}
    aside.side{grid-template-columns:1fr 1fr}
    .flow{grid-template-columns:1fr;gap:22px}
    .flow li:not(:last-child)::after{right:auto;left:24px;top:auto;bottom:-18px;width:2px;height:14px}
    .flow li:not(:last-child)::before{right:auto;left:20px;top:auto;bottom:-22px;border:5px solid transparent;border-top-color:var(--coffee);border-bottom:0}
  }
  @media (max-width: 700px){
    aside.side,.two{grid-template-columns:1fr}
    ol.steps li{grid-template-columns:32px minmax(0,1fr)}
    ol.steps .where{grid-column:2}
    .bar .counts{margin-left:0}
  }
  @media (prefers-reduced-motion: reduce){ .journal li{transition:none} }

  /* ---------- office app additions ---------- */
  .live{display:inline-flex;align-items:center;gap:8px;justify-self:start;font:var(--px1)/1 var(--data);color:var(--dim)}
  .live i{width:10px;height:10px;background:var(--work);display:inline-block;animation:blink 2s steps(2,end) infinite}
  .live.bad i{background:var(--blocked);animation:none}
  @keyframes blink{50%{opacity:.25}}
  .toprow{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
  footer{padding-block:48px 0;color:var(--dim);font-size:.95rem}
  @media (prefers-reduced-motion: reduce){ .live i{animation:none} }

  /* ---------- office list ---------- */
  .offices{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:16px}
  /* each office is a pixel TV set: antenna, chunky frame, a live screen, and a control panel with the office's name */
  .office{display:grid}
  .tv{display:grid;grid-template-rows:auto 1fr auto;color:var(--text);text-decoration:none;padding-top:22px;position:relative}
  .tv:focus-visible{outline:none}
  .tv:focus-visible .tvbody{outline:2px solid var(--accent);outline-offset:3px}
  .antenna{position:absolute;top:0;left:50%;width:3px;height:3px;margin-left:-2px;background:#6f7584;
    box-shadow:-3px -3px #6f7584,-6px -6px #6f7584,-9px -9px #6f7584,-12px -12px #9aa3ab,3px -3px #6f7584,6px -6px #6f7584,9px -9px #6f7584,12px -12px #9aa3ab,-3px 3px #3d3550,0 3px #3d3550,3px 3px #3d3550}
  .tvbody{display:grid;grid-template-rows:auto 1fr;background:#2b2536;border:3px solid #0b0a10;box-shadow:inset 0 0 0 3px #3d3550,inset 0 -8px 0 #221d2d;padding:12px 12px 14px;transition:box-shadow .15s}
  .tv:hover .tvbody{box-shadow:inset 0 0 0 3px var(--accent),inset 0 -8px 0 #221d2d}
  .screen{position:relative;aspect-ratio:16/10;background:#05050a;border:3px solid #0b0a10;box-shadow:0 0 0 2px #15131d;overflow:hidden}
  .screen img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;filter:saturate(1.05);transition:filter .2s}
  .tv:hover .screen img{filter:saturate(1.15) brightness(1.08)}
  .scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.35) 100%)}
  .onair{position:absolute;top:8px;left:8px;font:var(--px1)/1 var(--data);padding:3px 7px 2px;background:#ff5c8a;color:#15131d;letter-spacing:1px}
  .onair.off{background:#3a3350;color:var(--dim)}
  .watch{position:absolute;right:8px;bottom:8px;font:var(--px1)/1 var(--data);padding:4px 8px 3px;background:rgba(21,19,29,.85);color:var(--accent);opacity:0;transition:opacity .15s}
  .tv:hover .watch,.tv:focus-visible .watch{opacity:1}
  .panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start;margin-top:12px}
  .office h2{margin:0 0 4px;font:400 var(--px15)/1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .office .line{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .office .stats{font:var(--px1)/1.15 var(--data);color:var(--dim)}
  .office .stats b{color:var(--text);font-weight:400}
  .office .who{margin-top:2px;font:var(--px1)/1.15 var(--data);color:var(--work)}
  .office .who.none{color:var(--dim)}
  .controls{display:grid;grid-template-columns:auto auto;gap:6px 8px;align-items:center;padding-top:4px}
  .led{grid-column:1/3;justify-self:end;width:8px;height:8px;background:var(--work);box-shadow:0 0 0 2px #15131d}
  .led.dim{background:#4a4f5c}
  .led.red{background:var(--blocked)}
  .knob{width:14px;height:14px;background:#15131d;box-shadow:inset 0 0 0 3px #4a4656,inset 5px 3px 0 3px #6f7584}
  .grille{grid-column:1/3;width:34px;height:12px;background:repeating-linear-gradient(to bottom,#15131d 0 2px,transparent 2px 4px)}
  .feet{display:flex;justify-content:space-between;height:6px;margin:0 22%;background:linear-gradient(#0b0a10,#0b0a10) left/12px 6px no-repeat,linear-gradient(#0b0a10,#0b0a10) right/12px 6px no-repeat}
  .offices .empty{grid-column:1/-1;padding:28px;background:var(--panel);border:2px dashed var(--line);color:var(--dim)}
  .offices .empty b{display:block;color:var(--text);font:400 var(--px15)/1.15 var(--display);margin-bottom:6px}
  @media (prefers-reduced-motion: reduce){ .tvbody,.screen img,.watch{transition:none} }

  /* ---------- room extras ---------- */
  .dayreplay{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .dayreplay input[type=range]{width:min(260px,40vw);accent-color:var(--accent)}
  .card .gh{margin:10px 0 0;font-size:.95rem}
  .card .gh a{color:var(--accent)}
  .card .muted{color:var(--dim)}
  .tickets h3,.today h3{margin:0 0 10px;font:400 var(--px1)/1 var(--display)}
  .tickets ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
  .tickets li{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;font-size:.95rem}
  .tickets li a,.today a{color:var(--accent);font:var(--px1)/1 var(--data)}
  .tickets .title{overflow-wrap:anywhere}
  .tickets .who{grid-column:2;font:var(--px1)/1 var(--data);color:var(--work)}
  .today .star{margin:0 0 8px;display:flex;align-items:center;gap:8px}
  .today .trophy{width:14px;height:14px;flex:none;background:linear-gradient(var(--coffee),var(--coffee)) 3px 0/8px 7px no-repeat,linear-gradient(var(--coffee),var(--coffee)) 5px 7px/4px 3px no-repeat,linear-gradient(#b8860b,#b8860b) 2px 10px/10px 3px no-repeat;image-rendering:pixelated}
  .today .line{margin:0 0 6px;font-size:.95rem;display:flex;gap:8px;flex-wrap:wrap}
  .today .line>span:first-child{color:var(--dim);min-width:4.6em}
  .today .bars{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px}
  .today .bars li{display:grid;grid-template-columns:6.5em 1fr 4.2em;gap:8px;align-items:center;font:var(--px1)/1 var(--data)}
  .today .meter{display:block;height:8px;background:var(--panel-2)}
  .today .meter i{display:block;height:100%;background:var(--work)}
  .today .v{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums}
  .top .links{display:flex;gap:14px;flex-wrap:wrap;font:var(--px1)/1 var(--data)}

  /* ---------- room: compact header, office switcher, picture fits the screen ---------- */
  .roomtop{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;padding-block:14px 6px}
  .roomtop .brand{font:400 var(--px1)/1 var(--display);color:var(--dim);text-decoration:none}
  .roomtop .brand span{color:var(--coffee)}
  .roomtop h1{font:400 var(--px15)/1 var(--display);margin:0}
  .roomtop .live{margin-left:auto}
  .switcher{display:flex;align-items:stretch;gap:6px;padding-block:4px 12px}
  .switcher .tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
  .switcher .tabs::-webkit-scrollbar{display:none} /* still scrolls by swipe, wheel and the step buttons; no bar under the tabs */
  .switcher .step{flex:none;font-size:var(--px15);padding-inline:10px}
  .office-tab{flex:none;display:grid;grid-template-columns:64px auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:5px 10px 5px 5px;background:var(--panel);border:2px solid var(--line);color:var(--text);text-decoration:none;cursor:pointer}
  .office-tab:hover{border-color:var(--accent)}
  .office-tab[aria-current="page"]{border-color:var(--coffee);background:var(--panel-2)}
  .office-tab canvas{grid-row:1/3;width:64px;height:40px;image-rendering:pixelated;display:block}
  .office-tab .n{font:400 var(--px1)/1 var(--display);white-space:nowrap}
  .office-tab .w{font:var(--px1)/1 var(--data);color:var(--dim);white-space:nowrap}
  .office-tab .w b{color:var(--work);font-weight:400}
  /* the whole office is visible without scrolling: its width follows the screen height */
  .side .card:empty{display:none}

  /* the 8-bit / 16-bit switch: big, in the top bar, the pressed side lit */
  .skinswitch{display:inline-flex;border:2px solid var(--line);background:var(--panel)}
  .skinswitch button{font:400 var(--px1)/1 var(--display);letter-spacing:1px;padding:8px 14px 7px;border:0;background:transparent;color:var(--dim)}
  .skinswitch button+button{border-left:2px solid var(--line)}
  .skinswitch button[aria-pressed="true"]{background:var(--coffee);color:var(--ink)}
  .skinswitch button:hover:not([aria-pressed="true"]){color:var(--text);background:var(--panel-2)}
  .roomtop .skinswitch{margin-left:auto;align-self:center}
  .roomtop .skinswitch+.live{margin-left:0}

  /* ---------- app shell: the page never scrolls, panels do ---------- */
  body.app{height:100dvh;overflow:hidden;padding:0}
  /* notched phones: keep the shell clear of the notch, rounded corners and home bar (viewport-fit=cover in the page head) */
  .shell{height:100dvh;display:flex;flex-direction:column;padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));padding-bottom:env(safe-area-inset-bottom);gap:0}
  .appbar{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;padding-block:max(10px,env(safe-area-inset-top)) 8px;border-bottom:2px solid var(--line)}
  .appbar .brand{font:400 var(--px1)/1 var(--display);color:var(--dim);text-decoration:none}
  .appbar .brand span{color:var(--coffee)}
  .appbar h1{font:400 var(--px15)/1 var(--display);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
  .appbar .tag{font-size:var(--px1);padding:3px 7px 2px}
  .applinks{display:flex;gap:14px;font:var(--px1)/1 var(--data);margin-left:auto}
  .appbar .skinswitch{margin-left:0}
  .appbar .live{margin-left:0}
  /* three-track header: equal side tracks keep the skin tabs dead centre whatever sits either side */
  .appbar3{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .appside{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;min-width:0}
  .appside.end{justify-content:flex-end}
  /* public page has no skin tabs: the end side stays in the last track */
  .public .appbar3 .appside.end{grid-column:-2}
  /* side tracks may shrink: the title ellipsises inside its track instead of sliding under the skin tabs */
  .appside>*{min-width:0}
  .appbar3 h1{max-width:100%}
  .appside .applinks{margin-left:0}
  @media (max-width: 700px){
    .appbar3{grid-template-columns:minmax(0,1fr)}
    .appbar3 .skinswitch{justify-self:center}
    .appside.end{justify-content:flex-start}
  }
  /* public credit shares the live row: one line, never wraps, so the header (and the floor fit.js sizes under it) keeps its height; the status text ellipsises first */
  .credit{flex:none;font:var(--px1)/1 var(--data);color:var(--dim);white-space:nowrap}
  .credit a{color:var(--dim);text-decoration-color:var(--line)}
  .credit a:hover{color:var(--accent);text-decoration-color:currentColor}
  .public .appside.end{flex-wrap:nowrap}
  .public .appside.end .live{overflow:hidden}
  .public #liveText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .app .switcher{flex:none;padding-block:8px}
  .app .stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,24vw,420px);gap:16px;padding-block:10px 12px;align-items:stretch;justify-content:center}
  .view{min-height:0;min-width:0;display:flex;flex-direction:column;gap:6px;padding-block:0}
  .canvaswrap{flex:1;min-height:0;container-type:size;display:grid;place-items:center}
  .canvaswrap .screen{width:min(var(--fitw, 100cqw), 100cqw, calc((100cqh - 12px) * 1.6));padding:6px;box-sizing:border-box;aspect-ratio:auto;border:0;overflow:visible;background:#0b0a10;box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 0 0 2px #2c2640}
  .canvaswrap #floor{width:100%;height:auto}
  .view .bar{flex:none;padding:4px 2px 0}
  .app .side{min-height:0;display:flex;flex-direction:column;gap:10px;overflow:hidden}
  .app .side>.card{flex:none;max-height:28%;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .app .side>.card.today{max-height:32%}
  .app .side>.journal{flex:1;min-height:140px;display:flex;flex-direction:column}
  .app .side>.journal ol{flex:1;min-height:0;max-height:none}
  .markerspanel{flex:1.2;min-height:0;overflow:auto;background:var(--panel);border:2px solid var(--line);padding:12px 14px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .markerspanel h3{margin:0 0 6px;font:400 var(--px1)/1 var(--display)}
  .markerspanel .intro{margin:0 0 10px;font-size:.92rem}
  .markerspanel .markers{grid-template-columns:1fr}
  .markerspanel .marker{grid-template-columns:44px 1fr;padding:10px 12px}
  .markerspanel .marker canvas{width:40px;height:64px}
  .markerspanel .marker h3{font-size:var(--px1)}
  .markerspanel .marker p{font-size:.9rem}
  .homebody{flex:1;min-height:0;overflow:auto;padding-block:12px 20px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  /* small screens cannot fit everything: fall back to a normal scrolling page */
  @media (max-width: 900px), (max-height: 600px){
    body.app{height:auto;overflow:auto}
    .shell{height:auto}
    .app .stage{grid-template-columns:minmax(0,1fr)}
    .canvaswrap{container-type:inline-size;flex:none}
    /* the whole picture fits one screen height even on a landscape phone; fit.js may snap it smaller for crisp pixels */
    .canvaswrap .screen{width:min(var(--fitw, 100%), 100%, calc((100svh - 12px) * 1.6))}
    .app .side{overflow:visible}
    .app .side>.card,.app .side>.card.today{max-height:none}
    .app .side>.journal ol{max-height:min(360px,55svh)}
    .markerspanel{overflow:visible}
    .homebody{overflow:visible}
  }
  /* ---------- room: the roll call is a show/hide list over the office's left edge ---------- */
  .room .canvaswrap .screen{position:relative}
  .rollpanel{position:absolute;top:6px;left:6px;bottom:6px;z-index:5;width:min(210px,calc(100% - 12px));display:flex;flex-direction:column;background:var(--ink);border:2px solid var(--line);box-shadow:12px 0 28px rgba(0,0,0,.45)}
  .rollpanel[hidden]{display:none}
  .rollhead{flex:none;display:flex;align-items:center;gap:8px;padding:5px 5px 5px 10px;border-bottom:2px solid var(--line)}
  .rollhead h2{margin:0;font:400 var(--px1)/1 var(--display)}
  .rollhead .close{margin-left:auto;padding:2px 8px 1px}
  .rollpanel .roll{flex:1;min-height:0;margin:0;padding:6px;display:flex;flex-direction:column;gap:4px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .rollpanel .roll button{flex:none;gap:3px 6px;min-width:0;padding:2px 8px 2px 2px;white-space:nowrap} /* headshot | dot + name, status under the name */
      /* the squad toggle floats in the office's top-left corner, the edge the list opens from; open, it sits in the list's header.
     The picture and the toggle share one grid cell so the toggle can be sticky: on phones the office pans under it */
  .room .canvaswrap .screen{display:grid;grid-template-columns:minmax(0,1fr)}
  .room .canvaswrap #floor{grid-area:1/1}
  .rolltoggle{grid-area:1/1;align-self:start;justify-self:start;position:sticky;left:12px;top:12px;z-index:6;margin:6px;width:36px;height:36px;padding:0;display:grid;place-items:center;background:rgba(21,19,29,.85);color:var(--text);border:2px solid var(--line);box-shadow:0 4px 10px rgba(0,0,0,.4)}
  .rolltoggle .ico{display:block;width:20px;height:20px}
  .rolltoggle[aria-expanded="true"]{background:var(--accent);color:var(--ink);border-color:var(--accent)}
  .rolltoggle:focus-visible{outline:2px solid var(--text);outline-offset:2px}
  @media (min-width: 701px){ .rollhead{min-height:48px;padding-left:52px} }
  /* time and day replay lead the side column: they rewind the whole page, not one tab */
  .nowbar{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font:var(--px1)/1 var(--data);color:var(--dim)}
  .nowbar .clock{color:var(--text);font-size:var(--px15);min-width:2.6em;font-variant-numeric:tabular-nums}
  .nowbar .dayreplay{flex:1;min-width:0;justify-content:flex-end}
  .nowbar .dayreplay input[type=range]{flex:1 1 90px;min-width:90px;width:auto}

  /* ---------- sizes: long feed lines wrap, tablets split the side column, phones get a roll sheet, touch gets 44px ---------- */
  .journal li{grid-template-columns:3.1em minmax(0,1fr);overflow-wrap:anywhere}
  /* tablet portrait: cards on the left, the feed on the right, both under the office */
  @media (min-width: 701px) and (max-width: 900px){
    .app .side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
    .app .side>.journal{grid-column:2;grid-row:1 / span 3}
  }
  /* phones: the office is too small to cover, so the roll call rises from the bottom edge as a sheet */
  @media (max-width: 700px){
    .rollpanel{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;max-height:min(70svh,560px);z-index:20;border-width:2px 0 0;box-shadow:0 -12px 28px rgba(0,0,0,.45);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
    .rollpanel .roll{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));align-content:start}
    /* the office is sized by height (fit.js sets --fitw), bleeds to the screen edges and pans sideways; the page still scrolls vertically.
       container-type off: its layout containment would trap the fixed roll sheet inside this scroller */
    .canvaswrap{display:block;place-items:start;container-type:normal;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:manipulation;scrollbar-width:none;
      margin-inline:calc(-1 * max(16px,env(safe-area-inset-left))) calc(-1 * max(16px,env(safe-area-inset-right)))}
    .canvaswrap::-webkit-scrollbar{display:none}
    .canvaswrap .screen{width:var(--fitw,100%);box-shadow:inset 0 0 0 2px #2c2640}
    .rolltoggle{left:max(12px,env(safe-area-inset-left))}
  }
  @media (pointer: coarse){
    .skinswitch button,.rolltoggle,.rollhead .close,.switcher .step,.bar button,.nowbar button,.roll button,.quotabtn{min-height:44px}
    .rollhead .close,.switcher .step,.rolltoggle{min-width:44px}
    .applinks a{display:inline-flex;align-items:center;min-height:44px}
    .dayreplay input[type=range]{height:44px}
  }

  /* ---------- room side column: now (counts, selected agent), tickets, then feed and Today as tabs filling the rest ---------- */
  .vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .room .side [hidden]{display:none !important}
  /* one row of four, bar + number + label on a single line: the number is the read, the bar carries the state */
  .room .counts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--line);border:2px solid var(--line);flex:none}
  .room .counts li{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:4px;background:var(--panel);padding:5px 6px 4px;font:var(--px1)/1 var(--data);color:var(--dim);min-width:0}
  .room .counts .dot{grid-row:1;align-self:stretch;margin:0;width:6px;height:auto}
  .room .counts b{font:400 var(--px15)/.9 var(--data);color:var(--text);font-variant-numeric:tabular-nums}
  .room .counts span{line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .room .side{container-type:inline-size;min-width:0}
  /* narrow column: the label drops under the number — still four in a row, still one line each.
     It never breaks: the size follows the column (cqw) so the longest word ("blocked") fits at any width. */
  @container (max-width: 369px){
    .room .counts li{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:start;align-content:start;column-gap:5px;padding:5px 5px 4px}
    .room .counts b{font-size:min(var(--px15), 7cqw)}
    .room .counts span{grid-column:2;font-size:min(calc(var(--px1) * .85), 3.9cqw);overflow:visible}
  }
  .room .c-work .dot{background:var(--work)} .room .c-break .dot{background:var(--coffee)} .room .c-lounge .dot{background:var(--lounge)} .room .c-blocked .dot{background:var(--blocked)}

  .room .side .card{padding:10px 14px}
  /* selected agent: name and role on one line, state chip under, task below */
  .room .agent{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:baseline}
  .room .agent>*{grid-column:1/-1}
  .room .agent h3{grid-column:1;font-size:var(--px2);line-height:1}
  .room .agent .role{grid-column:2;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .room .agent .chip{justify-self:start;margin-top:6px;font-size:var(--px1);padding:4px 8px 3px;max-width:100%}
  .room .agent .task{margin-top:8px;font-size:.95rem;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
  .room .agent .since{margin-top:4px}
  .room .agent .gh{margin-top:6px;font-size:.9rem}
  /* tickets: number | title, agents under the title; an empty list collapses to one line */
  .room .tickets h3{margin-bottom:8px;color:var(--dim)}
  .room .tickets li{grid-template-columns:3.2em minmax(0,1fr);gap:0 8px;line-height:1.3}
  .room .tickets li>:first-child,.room .tickets li>a{font:var(--px1)/1.1 var(--data)}
  .room .tickets .who{font-size:var(--px1)}
  .room .tickets:has(>p.muted){display:flex;align-items:baseline;gap:6px 10px;flex-wrap:wrap;background:none;border-color:transparent;padding-block:0}
  .room .tickets:has(>p.muted) h3{margin:0}
  .room .tickets>p.muted{margin:0;font-size:.9rem}

  /* feed and Today: one panel, two tabs, the list takes every pixel left */
  .room .today .star{display:block;line-height:1.35}
  .room .today .trophy{display:inline-block;margin-right:8px;vertical-align:-1px}
  .room .feedbox{padding:0;display:flex;flex-direction:column;min-height:0;background:var(--panel);border:2px solid var(--line)}
  .room .feedtabs{flex:none;display:flex;border-bottom:2px solid var(--line)}
  .room .feedtabs button{flex:1;border:0;background:transparent;color:var(--dim);font:400 var(--px1)/1 var(--display);letter-spacing:1px;padding:8px 10px 7px;text-transform:uppercase}
  .room .feedtabs button+button{border-left:2px solid var(--line)}
  .room .feedtabs button[aria-selected="true"]{color:var(--text);background:var(--panel-2);box-shadow:inset 0 -3px 0 var(--accent)}
  .room .feedtabs button:hover:not([aria-selected="true"]){color:var(--text)}
  .room .feedtabs button:focus-visible{outline-offset:-4px}
  .room .feedbox>.journal{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:none;border:0;padding:4px 0}
  .room .feedbox>.journal ol{flex:1;min-height:0;max-height:none}
  .room .journal ol:focus-visible{outline-offset:-2px}
  .room .journal li{grid-template-columns:3.4em minmax(0,1fr);gap:8px;padding:4px 14px 3px;line-height:1.2}
  .room .journal li>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .room .journal li:hover{background:var(--panel-2)}
  .room .journal li>span:first-child{color:var(--dim);font-variant-numeric:tabular-nums}
  /* the kind word gets a fixed slot so agent names line up down the list */
  .room .journal li>span:last-child>span:first-child{display:inline-block;min-width:5.4em}
  .room .journal li:is(.office,[data-kind="queued"],[data-kind="ack"])>span:last-child{color:var(--dim)}
  /* a bar under the list, not over it: the list gives up the height while the button shows */
  .room .latest{flex:none;align-self:flex-end;margin:4px 12px 2px;background:var(--accent);color:var(--ink);border-color:var(--accent)}
  .room .feedbox>.today{flex:1;min-height:0;overflow:auto;background:none;border:0;max-height:none;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .room .feedbox>.today:empty{display:block}
  .room .feedbox>.today:empty::before{content:"Counting today…";color:var(--dim)}
  .room .feedbox>.today>h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .room .feedbox>.today:focus-visible{outline-offset:-4px}

  /* desktop: the now cards size to content (capped), the feed panel fills */
  .app.room .side{gap:8px}
  .app.room .side>.card{max-height:30%}
  .app.room .side>.card.tickets{max-height:24%}
  .app.room .side>.feedbox{flex:1;min-height:200px}
  @media (max-width: 900px), (max-height: 600px){
    .app.room .side>.card,.app.room .side>.card.tickets{max-height:none}
    .app.room .side{grid-template-columns:minmax(0,1fr)}
    .room .feedbox>.journal ol{max-height:min(420px,55svh)}
    .room .feedbox>.today{max-height:min(460px,60svh)}
  }
  /* tablet portrait: now cards left, feed panel right */
  @media (min-width: 701px) and (max-width: 900px){
    .app.room .side{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
    .app.room .side>.feedbox{grid-column:2;grid-row:1 / span 3;align-self:stretch}
  }
  @media (pointer: coarse){ .room .feedtabs button,.room .latest{min-height:44px} }
  @media (pointer: coarse) and (min-width: 701px){ .rollhead{min-height:56px;padding-left:60px} }
  /* desktop room: the office takes every pixel the chrome leaves, one 8px gutter everywhere (fit.js reads the gap and frame padding) */
  @media (min-width: 901px) and (min-height: 601px){
    .room .shell{padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right))}
    .room .appbar{padding-block:max(6px,env(safe-area-inset-top)) 6px}
    .room .appbar .skinswitch button{padding-block:6px 5px}
    .room .switcher{padding-block:8px 0}
    .app.room .stage{gap:8px;padding-block:8px}
    .room .canvaswrap .screen{padding:3px;width:min(var(--fitw, 100cqw), 100cqw, calc((100cqh - 6px) * 1.6))}
    .rollpanel{top:3px;left:3px;bottom:3px;width:min(210px,calc(100% - 6px))}
  }
  /* loading: TV static between channels in the picture's own box (the transparent canvas keeps the size), then a channel change reveals the floor.
     cost: one 48px noise tile, 2px per grain, jumped 10x a second by background-position steps (a small repaint, no per-frame JS); the scanlines and rolling band ride in the same layer */
  .room .canvaswrap .screen::before{content:"Loading office…";grid-area:1/1;display:grid;place-items:start;padding:var(--px1);
    background:
      repeating-linear-gradient(to bottom,transparent 0 2px,color-mix(in srgb,var(--ink) 45%,transparent) 2px 3px),
      linear-gradient(to bottom,transparent,color-mix(in srgb,var(--text) 7%,transparent) 50%,transparent) 0 -50%/100% 25% no-repeat,
      url("data:image/png;base64,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") 0 0/96px 96px,
      var(--ink);
    image-rendering:pixelated;color:var(--text);font:var(--px2)/1 var(--data);letter-spacing:1px;text-shadow:0 2px var(--ink),2px 0 var(--ink);
    animation:static 2.4s steps(24) infinite}
  .room .canvaswrap .screen[data-caption]::before{content:attr(data-caption)}
  @keyframes static{
    from{background-position:0 0,0 -50%,0 0}
    to{background-position:0 0,0 150%,888px 1272px}
  }
  .room .canvaswrap #floor{opacity:0}
  /* channel change: the picture opens from a thin horizontal line to full height, transform and opacity only, so the box never moves */
  .room .canvaswrap .screen.ready #floor{opacity:1;animation:tune .2s cubic-bezier(.16,1,.3,1)}
  .room .canvaswrap .screen.ready::before{visibility:hidden;animation:none;transition:visibility 0s .2s}
  @keyframes tune{
    from{transform:scaleY(.02);opacity:.6}
    60%{transform:scaleY(1);opacity:1}
  }
  @media (prefers-reduced-motion: reduce){
    .room .canvaswrap .screen::before{animation:none}
    .room .canvaswrap .screen.ready #floor{animation:none}
    .room .canvaswrap .screen.ready::before{transition:none}
  }

/* Claude usage: a one-line button in the side column, the full reading in a modal. */
.room .quotabtn{flex:none;display:flex;align-items:center;gap:6px;width:100%;text-align:left;font:var(--px1)/1 var(--data);color:var(--dim);background:var(--panel);border:2px solid var(--line);padding:7px 10px 6px}
.room .quotabtn b{color:var(--text);font-size:var(--px15);font-variant-numeric:tabular-nums}
.quotadlg{width:min(420px,calc(100vw - 32px));padding:0;background:var(--ink);border:2px solid var(--line);color:var(--text)}
.quotadlg::backdrop{background:rgba(0,0,0,.6)}
.quotadlg #quota{border:0;max-height:70svh;overflow:auto}
.quotadlg #quota h3{display:none} /* the dialog header already names it */
@media(prefers-reduced-motion:reduce){.screen.ready canvas{animation:none;transition:none}.screen .scan{animation:none}}