/* Studio Home D, the page since 2026-09-28 (rooms.js; Alan: "implement the studio design, it is good"). Measures from
   design-mockups/studio-redesign-2026-09-23/studio-home-directions/gen.mjs (rackD, glass5, mainD, forYouD, effectsD,
   D_phone), and for the Templates and Effects rooms from templates-directions/gen.mjs (sideA, wallHeader, wall3,
   filterPanel, pvModule, emptyGlass). Everything is scoped under html.home-rooms (home-boot.js sets it before first
   paint), so /home/?classic is untouched. The Instrument's own corners (5 to 16 px) and materials, as in Focus
   (focus.css): keys, wells, trays, grooves; no print-sheet marks. Every weight is 400; Doto is 800. */

@font-face { font-family: "Focus Doto"; src: url("/fonts/focus/doto-800-latin.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Focus Martian Mono"; src: url("/fonts/focus/martian-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Focus Archivo"; src: url("/fonts/focus/archivo-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* The display's figures, as Focus draws every Doto readout (focus.css, Alan #53 and #66): Doto, with Martian Mono's
   point and colon in Doto's 0.6 em cell and the zero drawn as Doto's O. Home's displays and the rooms' (a film's clock,
   "7 of 15 watched") read them ahead of plain Doto, whose colon reads as a dagger. */
@font-face { font-family: "Focus Doto Figures"; src: url("/fonts/focus/doto-800-latin.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Focus Doto Figures"; src: url("/fonts/focus/martian-mono-400-latin.woff2") format("woff2"); font-weight: 800; unicode-range: U+2E; size-adjust: 85.714%; font-display: swap; }
@font-face { font-family: "Focus Doto Figures"; src: url("/fonts/focus/martian-mono-400-latin.woff2") format("woff2"); font-weight: 800; unicode-range: U+3A; size-adjust: 85.714%; font-display: swap; }
@font-face { font-family: "Focus Doto Figures"; src: url("/fonts/focus/doto-800-zero.woff2") format("woff2"); font-weight: 800; unicode-range: U+30; font-display: swap; }

html.home-rooms {
  --hr-disp: "Focus Doto Figures", "Focus Doto", ui-monospace, monospace;
  --hr-print: "Focus Martian Mono", ui-monospace, Menlo, monospace;
  --hr-text: "Focus Archivo", system-ui, sans-serif;
  --chassis: #121212; --silk: #a19d94; --ink: #ece7dd; --hi: #fff; --disp: #f6efe3; --disp-2: #bdb6aa; --used: #8b867e; --dim: #77726b; --mark-off: #4b4640;
  --led: #ef282d; --led-off: #2b1414; --lamp-rim: rgba(255,255,255,.13); --bone: #f7f4ed; --edge: #080808; --rim: #262626; --tile-ring: rgba(247,244,237,.42);
  --key: linear-gradient(180deg, #313131, #252525); --key-hover: linear-gradient(180deg, #383838, #2a2a2a);
  --key-sh: 0 2px 0 #080808, 0 3px 7px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.08);
  --mod: linear-gradient(180deg, #1c1c1c, #171717);
  --mod-sh: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.5), 0 0 0 1px #090909, 0 14px 30px rgba(0,0,0,.42);
  --well: #070707; --well-sh: inset 0 2px 7px rgba(0,0,0,.86), inset 0 0 0 1px #000, 0 1px 0 rgba(255,255,255,.05);
  --tray: #0e0e0e; --tray-sh: inset 0 2px 9px rgba(0,0,0,.75), inset 0 0 0 1px #000, 0 1px 0 rgba(255,255,255,.05);
  --latch: #0f0f0f; --glow: 0 0 7px rgba(246,239,227,.55); --hover: rgba(255,255,255,.045);
  --red: linear-gradient(180deg, #f2393d, #c81c21); --red-sh: 0 2px 0 #5a0b0d, 0 3px 10px rgba(239,40,45,.35), inset 0 1px 0 rgba(255,255,255,.3);
  --sel-soft: linear-gradient(180deg, #1d1d1d, #161616); --sel-soft-sh: inset 0 0 0 1px rgba(247,244,237,.42), inset 0 1px 0 rgba(255,255,255,.05);
  color-scheme: dark;
  background: var(--chassis);
}
/* The Community and Tutorials rooms (room-kit.css) keep their own tokens; their display face takes the figures too. */
html.home-rooms .hr-root .hk-room { --hk-f-disp: "Focus Doto Figures", "Focus Doto", ui-monospace, monospace; }
html.home-rooms body { margin: 0; overflow: hidden; background: var(--chassis); color: var(--ink); font: 400 14px/1.45 var(--hr-text); font-synthesis: none; -webkit-font-smoothing: antialiased; }
html.home-rooms :is(b, strong) { font-weight: 400; }
/* The classic frame steps aside; its scripts keep running (account, projects, notices), and rooms.js moves their live
   nodes into the rack. */
html.home-rooms :is(.page-rails, .home-sidebar, main#top) { display: none !important; }
html.home-rooms .hr-root *, html.home-rooms .hr-root *::before, html.home-rooms .hr-root *::after { box-sizing: border-box; }
html.home-rooms .hr-root :focus { outline: none; }
html.home-rooms .hr-root :focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
html.home-rooms .hr-root [hidden] { display: none !important; }
.hr-root .tr-mod { background: var(--mod); box-shadow: var(--mod-sh); border-radius: 16px; }
.hr-root .tr-grow { flex: 1 1 auto; min-width: 0; }
.hr-root .tr-groove { display: block; height: 1px; flex: none; background: var(--edge); box-shadow: 0 1px 0 var(--rim); }
.hr-root .tr-ic { display: block; flex: none; }

/* ---------- the page: the rack, then the main module (rackD, mainD: 16 px sides, 14 top and bottom, 12 between) ---------- */
html.home-rooms .hr-root { position: fixed; inset: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
/* the machine's grain on the chassis, under the modules (focus.css; rooms.js draws it) */
html.home-rooms .hr-root::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--hd-noise, none); opacity: .5; mix-blend-mode: overlay; }
.hr-root > :is(.hd-rack, .hd-main) { position: relative; z-index: 1; }

/* ---------- type roles ---------- */
.hr-root .hd-print { font: 400 11px/1.2 var(--hr-print); letter-spacing: .1em; text-transform: uppercase; color: var(--silk); white-space: nowrap; }
.hr-root .hd-read { font: 400 12px/1 var(--hr-print); color: var(--silk); white-space: nowrap; }
.hr-root .hd-doto { font: 800 18px/1 var(--hr-disp); letter-spacing: .04em; text-transform: uppercase; color: var(--disp); text-shadow: 0 0 7px rgba(246,239,227,.4); white-space: nowrap; }
.hr-root .hd-sent { margin: 0; font: 400 13px/18px var(--hr-text); color: var(--disp-2); }

/* ---------- keys: 2 px of travel, a face that lightens ---------- */
.hr-root .tr-key { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 9px;
  background: var(--key); box-shadow: var(--key-sh); color: var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none;
  font: 400 11px/1 var(--hr-print); letter-spacing: .08em; text-transform: uppercase; transition: background .12s, color .12s, box-shadow .15s, transform .07s; }
.hr-root .tr-key:hover { background: var(--key-hover); }
.hr-root .tr-key:active { transform: translateY(2px); box-shadow: 0 0 0 var(--edge), inset 0 1px 0 rgba(255,255,255,.05); }
.hr-root .tr-key:disabled { opacity: .4; cursor: default; pointer-events: none; }
.hr-root .tr-key.tr-lg { height: 36px; border-radius: 10px; padding: 0 14px; }
.hr-root .tr-key.tr-sq { width: 36px; padding: 0; }
.hr-root .tr-key.hd-sm { height: 30px; border-radius: 9px; padding: 0 12px; }
.hr-root .tr-key.hd-sq { width: 30px; padding: 0; }
.hr-root .tr-key.hd-wide { width: 100%; height: 40px; }
.hr-root .tr-key.is-latched { transform: translateY(2px); background: var(--latch); box-shadow: var(--well-sh); color: var(--hi); text-shadow: var(--glow); }
.hr-root .tr-key.is-red { background: var(--red); box-shadow: var(--red-sh); color: var(--hi); }
.hr-root .tr-key.is-red:hover { background: linear-gradient(180deg, #f6474b, #d42126); }
/* A preview's Use key or an opened look is the one red thing while it stands: the rack's red key turns plain (board TA1). */
html.home-rooms.tr-previewing .hr-root .tr-key.is-red { background: var(--key); box-shadow: var(--key-sh); color: var(--ink); }
.hr-root .tr-key .tr-n { font: 400 11px/1 var(--hr-print); letter-spacing: 0; color: #c9c3b8; }

/* the home key (focus.css .lbf-homekey) */
.hr-root .hr-home { position: relative; flex: none; display: block; width: 42px; height: 42px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 46%, #f5343a 0%, #ef282d 50%, #d61d23 100%); box-shadow: 0 2.4px 0 #5e0a0d, 0 3.6px 9px rgba(0,0,0,.6); transition: transform .07s, box-shadow .07s; }
.hr-root .hr-home.is-40 { width: 40px; height: 40px; }
.hr-root .hr-home img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hr-root .hr-home i { position: absolute; inset: 0; border-radius: 10px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 40%); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -2.5px 3px rgba(70,0,4,.38); }
.hr-root .hr-home:active { transform: translateY(2px); box-shadow: 0 .4px 0 #5e0a0d, 0 1.6px 5px rgba(0,0,0,.6); }

/* ---------- the rack (rackD): the head, the projects, the box, the account ---------- */
.hr-root .hd-rack { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 12px; }
.hr-root .hd-rack-head { display: flex; align-items: center; gap: 10px; height: 46px; padding-left: 2px; flex: none; }
.hr-root .hd-studio { gap: 8px; }
.hr-root .hd-g1 { margin: 14px 2px; }
.hr-root .hd-rack-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; }
.hr-root .hd-rack-body::-webkit-scrollbar { display: none; }
.hr-root .hd-proj-head { display: flex; align-items: center; flex: none; height: 24px; padding: 0 10px; }
.hr-root .hd-new { flex: none; margin: 10px 0 12px; gap: 8px; }
.hr-root .hd-proj-list { display: flex; flex-direction: column; gap: 2px; }
.hr-root .hd-prow { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; height: 70px; padding: 0 10px 0 8px; border-radius: 10px; color: inherit; text-decoration: none; transition: background .12s; }
.hr-root .hd-prow:hover, .hr-root .hd-prow:focus-visible { background: var(--hover); }
.hr-root .hd-prow:hover .hd-pn { color: var(--hi); }
.hr-root .hd-th { position: relative; display: block; flex: none; width: 96px; height: 54px; overflow: hidden; border-radius: 5px; background: #000; box-shadow: 0 0 0 2px var(--well), 0 0 0 3px #222; }
.hr-root .hd-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-root .hd-pw { min-width: 0; }
.hr-root .hd-pn { display: block; font: 400 14px/20px var(--hr-text); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-root .hd-pa { display: block; font: 400 12px/16px var(--hr-print); color: var(--silk); white-space: nowrap; }
.hr-root .hd-qrow { display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; margin-top: 4px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent;
  color: var(--silk); cursor: pointer; font: 400 14px/1 var(--hr-text); white-space: nowrap; text-align: left; transition: background .12s, color .12s; }
.hr-root .hd-qrow:hover { background: var(--hover); color: var(--ink); }
.hr-root .hd-q-c { margin-left: auto; font: 400 12px/1 var(--hr-print); color: var(--silk); }
.hr-root .hd-note { margin: 6px 10px 0; font: 400 13px/18px var(--hr-text); color: var(--silk); }
.hr-root .hd-notices { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.hr-root .hd-notices:empty { display: none; }

/* the Go Pro box: a tray at the rack's foot, above the account (rackD's probox) */
.hr-root .hd-box { flex: none; display: flex; flex-direction: column; gap: 12px; margin: 12px 0; padding: 14px; border-radius: 12px; background: var(--tray); box-shadow: var(--tray-sh); }
.hr-root .hd-box-head { display: flex; align-items: center; gap: 10px; }
.hr-root .hd-g2 { margin: 0 2px 10px; }
.hr-root .hd-rack.is-pro .hd-g2 { margin-top: 12px; }
.hr-root .hd-foot { display: flex; align-items: center; gap: 8px; flex: none; }
.hr-root .hd-account { position: relative; flex: 1 1 auto; min-width: 0; }

/* Home's own account slot (dashboard.js fills it): Sign in as a key, the account as the rack's foot row. */
.hr-root #account-slot { position: relative; display: flex; align-items: center; }
.hr-root #account-slot .home-signin { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 36px; padding: 0 14px; border: 0; border-radius: 10px;
  background: var(--key); box-shadow: var(--key-sh); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; font: 400 11px/1 var(--hr-print); letter-spacing: .08em; text-transform: uppercase; }
.hr-root #account-slot .home-signin:hover { background: var(--key-hover); }
.hr-root #account-slot .home-account-row { display: flex; align-items: center; gap: 12px; width: 100%; height: 52px; padding: 0 8px; border: 0; border-radius: 12px; background: transparent; box-shadow: none;
  color: var(--ink); cursor: pointer; text-align: left; font: 400 14px/20px var(--hr-text); letter-spacing: 0; text-transform: none; transition: background .12s; }
.hr-root #account-slot .home-account-row:hover, .hr-root #account-slot .home-account-row[aria-expanded="true"] { background: var(--hover); }
.hr-root #account-slot .home-avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--well); box-shadow: var(--well-sh);
  color: var(--disp); font: 800 17px/1 var(--hr-disp); letter-spacing: 0; text-shadow: 0 0 7px rgba(246,239,227,.45); }
.hr-root #account-slot .home-account-copy { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.hr-root #account-slot .home-account-name { display: block; font: 400 14px/20px var(--hr-text); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-root #account-slot .home-account-plan { display: block; margin-top: 2px; font: 400 11px/1.2 var(--hr-print); letter-spacing: .1em; text-transform: uppercase; color: var(--silk); white-space: nowrap; }
/* The chevron draws Phosphor's CaretUp (the menu opens upward). */
.hr-root #account-slot .home-account-chevron { flex: none; width: 14px; height: 14px; font-size: 0; color: var(--silk); background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.hr-root #account-slot .account-pop { position: absolute; top: auto; bottom: calc(100% + 10px); left: 0; right: auto; z-index: 30; width: 276px; padding: 16px;
  background: var(--mod); box-shadow: var(--mod-sh); border: 0; border-radius: 16px; color: var(--ink); font-family: var(--hr-text); }
.hr-root #account-slot .ap-name { font: 400 15px/20px var(--hr-text); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-root #account-slot .ap-mail { margin-top: 2px; font: 400 13px/18px var(--hr-text); color: var(--silk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-root #account-slot .ap-plan { margin: 12px 0 0; padding: 12px 0; border-top: 1px solid var(--edge); box-shadow: inset 0 1px 0 var(--rim); font: 400 11px/1.2 var(--hr-print); letter-spacing: .1em; color: var(--silk); }
.hr-root #account-slot .ap-plan b, .hr-root #account-slot .ap-plan b.pro { font-weight: 400; color: var(--disp); }
.hr-root #account-slot .ap-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 0; border: 0; border-top: 1px solid var(--edge); box-shadow: inset 0 1px 0 var(--rim);
  background: transparent; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; font: 400 14px/18px var(--hr-text); }
.hr-root #account-slot .ap-link:hover { color: var(--hi); }
.hr-root #account-slot .ap-v { font: 400 12px/1 var(--hr-print); color: var(--silk); }
.hr-root #account-slot .ap-out { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; min-height: 0; margin-top: 12px; border: 0; border-radius: 10px;
  background: var(--key); box-shadow: var(--key-sh); color: var(--ink); cursor: pointer; font: 400 11px/1 var(--hr-print); letter-spacing: .08em; text-transform: uppercase; }
.hr-root #account-slot .ap-out:hover { background: var(--key-hover); }

/* ---------- the classic notices in the rack (home-setup.js decides them): trays with a key ---------- */
.hr-root .setup-band { display: flex; flex-direction: column; gap: 10px; padding: 0; }
.hr-root .hint { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px 10px; min-height: 0; margin: 0; padding: 12px; border: 0; border-radius: 12px; background: var(--tray); box-shadow: var(--tray-sh); }
.hr-root .hint-mark { width: 18px; height: 18px; color: var(--silk); }
.hr-root .hint-copy { order: 0; margin: 0; font: 400 13px/18px var(--hr-text); color: var(--ink); }
.hr-root .hint-copy .why { color: var(--silk); }
.hr-root .hint-cta { grid-column: 1 / -1; order: 0; display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border: 0; border-radius: 9px;
  background: var(--key); box-shadow: var(--key-sh); color: var(--ink); text-decoration: none; font: 400 11px/1 var(--hr-print); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.hr-root .hint-cta:hover { background: var(--key-hover); border: 0; }
.hr-root .bnote { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; margin: 0; padding: 14px 12px; border: 0; border-radius: 12px; background: var(--tray); box-shadow: var(--tray-sh); }
.hr-root .bnote-regs { display: none; }
.hr-root .bnote-mark { width: 24px; height: 24px; }
.hr-root .bnote-mark svg { width: 100%; height: 100%; display: block; }
.hr-root .bnote-kick { display: block; font: 400 11px/1.2 var(--hr-print); letter-spacing: .1em; text-transform: uppercase; color: var(--silk); }
.hr-root .bnote-title { margin: 6px 0 0; font: 400 14px/19px var(--hr-text); color: var(--ink); }
.hr-root .bnote-sub { margin: 6px 0 0; font: 400 13px/18px var(--hr-text); color: var(--silk); }
.hr-root .bnote-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hr-root :is(.bnote-go, .bnote-stay) { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--key); box-shadow: var(--key-sh);
  color: var(--ink); text-decoration: none; cursor: pointer; font: 400 11px/1 var(--hr-print); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.hr-root :is(.bnote-go, .bnote-stay):hover { background: var(--key-hover); }
.hr-root .bnote-go svg { width: 14px; height: 14px; }
.hr-root .bchip-wrap { position: relative; display: flex; }
.hr-root .bchip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--key); box-shadow: var(--key-sh);
  color: var(--ink); cursor: pointer; font: 400 11px/1 var(--hr-print); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.hr-root .bchip:hover, .hr-root .bchip[aria-expanded="true"] { background: var(--key-hover); border: 0; }
.hr-root .bchip svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.hr-root .bchip-pop { position: absolute; top: auto; bottom: calc(100% + 10px); left: 0; right: auto; z-index: 30; width: 276px; padding: 16px; border: 0; border-radius: 16px; background: var(--mod); box-shadow: var(--mod-sh); color: var(--ink); }
.hr-root .bchip-kick { display: block; font: 400 11px/1.2 var(--hr-print); letter-spacing: .1em; text-transform: uppercase; color: var(--silk); }
.hr-root .bchip-title { margin: 6px 0 0; font: 400 15px/20px var(--hr-text); color: var(--ink); }
.hr-root .bchip-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--edge); box-shadow: inset 0 1px 0 var(--rim); }
.hr-root .bchip-row .k { display: block; font: 400 11px/1.2 var(--hr-print); letter-spacing: .1em; text-transform: uppercase; color: var(--silk); }
.hr-root .bchip-row p { margin: 6px 0 0; font: 400 13px/18px var(--hr-text); color: var(--disp-2); }
.hr-root .bchip-go { display: inline-flex; align-items: center; height: 30px; margin-top: 12px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--key); box-shadow: var(--key-sh);
  color: var(--ink); text-decoration: none; font: 400 11px/1 var(--hr-print); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- the main module: the glass (glass5), then the section ---------- */
.hr-root .hd-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; padding: 12px; }
.hr-root .hd-glass { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 56px; border-radius: 10px; overflow: hidden; background: var(--well); box-shadow: var(--well-sh); }
.hr-root .hd-src { position: relative; display: flex; align-items: center; justify-content: center; gap: 11px; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--mark-off); cursor: pointer; transition: color .12s; }
.hr-root .hd-src[hidden] { display: none; }
.hr-root .hd-src + .hd-src { border-left: 1px solid #1d1d1d; box-shadow: inset 1px 0 0 #000; }
.hr-root .hd-src:hover { color: var(--dim); }
.hr-root .hd-src-n { font: 800 18px/1 var(--hr-disp); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.hr-root .hd-src.is-on { color: var(--disp); }
.hr-root .hd-src.is-on .hd-src-n { text-shadow: 0 0 7px rgba(246,239,227,.5); }
.hr-root .hd-src.is-on .tr-ic { filter: drop-shadow(0 0 5px rgba(246,239,227,.45)); }
.hr-root .hd-lamp { position: absolute; left: 50%; bottom: 7px; width: 32px; height: 2px; margin-left: -16px; border-radius: 1px; background: #1e1c1a; }
.hr-root .hd-src.is-on .hd-lamp { background: var(--disp); box-shadow: 0 0 6px rgba(246,239,227,.7); }
.hr-root .hd-src:focus-visible { outline-offset: -3px; }
.hr-root .hd-sections { position: relative; flex: 1 1 auto; min-height: 0; display: grid; }
.hr-root .hd-sec { min-width: 0; min-height: 0; display: grid; }
/* The desk narrows: the glass keeps every word on one line. */
@media (max-width: 1280px) { .hr-root .hd-src-n { font-size: 15px; } .hr-root .hd-src { gap: 9px; } }
@media (max-width: 1080px) { .hr-root .hd-src .tr-ic { display: none; } }

/* ---------- For you (forYouD): the wall of everything on a sunk tray, four across ---------- */
.hr-root .fy-tray { position: relative; min-height: 0; overflow: hidden; border-radius: 16px; background: var(--tray); box-shadow: var(--tray-sh); }
.hr-root .fy-scroll { position: relative; min-height: 0; height: 100%; overflow-y: auto; padding: 16px 11px 72px; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }
.hr-root .fy-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none; background: linear-gradient(180deg, rgba(14,14,14,0), var(--tray) 88%); border-radius: 0 0 16px 16px; }
.hr-root .fy-status { padding: 120px 0 24px; }
.hr-root .fy-grid { position: relative; }
.hr-root .fy-card { position: absolute; left: 0; top: 0; }
.hr-root .fy-frame { position: relative; margin: 5px; overflow: hidden; border-radius: 8px; background: #000; box-shadow: 0 0 0 1px var(--rim); transition: box-shadow .12s; }
.hr-root .fy-card:is(:hover, :focus-within) .fy-frame { box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 3px var(--tile-ring); }
.hr-root .fy-art { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: #000; color: inherit; cursor: pointer; }
.hr-root .fy-art:focus-visible { outline-offset: -3px; }
.hr-root .fy-art > img, .hr-root .fy-art > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-root .fy-art > video { opacity: 0; transition: opacity .2s; }
.hr-root .fy-art.is-playing > video { opacity: 1; }
.hr-root .fy-badge { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 5px; background: var(--well);
  color: var(--disp); font: 400 11px/1 var(--hr-print); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.hr-root .fy-act { position: absolute; bottom: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 0; border-radius: 6px;
  background: var(--well); box-shadow: 0 0 0 1px #000; color: var(--disp); cursor: pointer; text-decoration: none; font: 400 11px/1 var(--hr-print); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.hr-root .fy-act:hover { color: var(--hi); }
.hr-root .fy-act.fy-r { left: auto; right: 8px; }
.hr-root .fy-act.fy-q { width: 26px; padding: 0; justify-content: center; pointer-events: none; }
.hr-root .fy-acts { position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .12s; }
.hr-root .fy-card:is(:hover, :focus-within) .fy-acts { opacity: 1; pointer-events: auto; }
.hr-root .fy-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; padding: 4px 6px 0; cursor: pointer; }
.hr-root .fy-name { min-width: 0; font: 400 14px/20px var(--hr-text); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .12s; }
.hr-root .fy-card:is(:hover, :focus-within) .fy-name { color: var(--hi); }
.hr-root .fy-kind { flex: none; font: 400 11px/1 var(--hr-print); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.hr-root .fy-meta { flex: none; font: 400 12px/1 var(--hr-print); color: var(--silk); white-space: nowrap; }
.hr-root .fy-cap2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 2px 6px 0; }
.hr-root .fy-by { min-width: 0; font: 400 12px/16px var(--hr-text); color: var(--silk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-root .fy-stats { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.hr-root .fy-n { display: inline-flex; align-items: center; gap: 5px; font: 400 12px/1 var(--hr-print); color: var(--silk); }

/* ---------- the rooms (Templates, Effects): the list, the wall ---------- */
.hr-root .tr-room { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 12px; min-height: 0; }
.hr-root .tr-side { padding-top: 18px; min-width: 0; }
.hr-root .tr-cap { display: block; padding: 0 10px 8px; font: 400 11px/1 var(--hr-print); letter-spacing: .12em; text-transform: uppercase; color: var(--used); white-space: nowrap; }
.hr-root .tr-list { display: grid; gap: 2px; }
/* a quiet choice: its lamp, its words, its count; the chosen one lit */
.hr-root .tr-q { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 10px 0 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--disp-2); text-align: left; cursor: pointer; white-space: nowrap; font: 400 14px/1 var(--hr-text); transition: background .12s, color .12s; }
.hr-root .tr-q:hover { background: rgba(255,255,255,.04); color: var(--ink); }
.hr-root .tr-lp { width: 6px; height: 6px; border-radius: 50%; justify-self: center; }
.hr-root .tr-q-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hr-root .tr-q-c { font: 400 12px/1 var(--hr-print); color: var(--used); }
.hr-root .tr-q.is-on { color: var(--hi); text-shadow: var(--glow); }
.hr-root .tr-q.is-on .tr-lp { background: var(--bone); box-shadow: 0 0 7px rgba(247,244,237,.85); }
.hr-root .tr-q.is-on .tr-q-c { color: #c9c3b8; text-shadow: none; }
.hr-root .tr-q.is-dim { opacity: .4; }
.hr-root .tr-wall { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: 16px; background: #0b0b0b;
  box-shadow: inset 0 2px 9px rgba(0,0,0,.85), inset 0 0 0 1px #000, 0 1px 0 rgba(255,255,255,.05); overflow: hidden; }
.hr-root .tr-head { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 20px 24px 12px; white-space: nowrap; }
.hr-root .tr-find { position: relative; display: flex; align-items: center; gap: 10px; flex: none; width: 280px; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--well); box-shadow: var(--well-sh); color: var(--silk); }
.hr-root .tr-find input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: none; outline: none; color: var(--disp); font: 400 14px/1 var(--hr-text); -webkit-appearance: none; appearance: none; }
.hr-root .tr-find input::placeholder { color: #86817a; opacity: 1; }
.hr-root .tr-find input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hr-root .tr-find:focus-within { box-shadow: var(--well-sh), 0 0 0 1px var(--bone); }
.hr-root .tr-count { font: 400 11px/1 var(--hr-print); letter-spacing: .1em; text-transform: uppercase; color: var(--silk); }
.hr-root .tr-chips { display: flex; gap: 8px; min-width: 0; overflow: hidden; }
.hr-root .tr-chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px 0 11px; border: 0; border-radius: 8px; background: var(--latch); box-shadow: var(--well-sh);
  color: var(--hi); text-shadow: var(--glow); cursor: pointer; font: 400 13px/1 var(--hr-text); }
.hr-root .tr-chip .tr-ic { color: var(--silk); }
.hr-root .tr-chip:hover .tr-ic { color: var(--ink); }
.hr-root .tr-scroll { position: relative; min-height: 0; overflow-y: auto; padding: 12px 24px 48px; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }
.hr-root .tr-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none; background: linear-gradient(180deg, rgba(11,11,11,0), #0b0b0b 85%); border-radius: 0 0 16px 16px; }
.hr-root .tr-grid { position: relative; }
/* masonry.js positions the cards; each one a screen in its bezel, then its name */
.hr-root .tr-card { position: absolute; left: 0; top: 0; padding: 7px 7px 13px; }
.hr-root .tr-card-hit { display: grid; gap: 16px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.hr-root .tr-screen { position: relative; display: block; width: 100%; border-radius: 6px; overflow: hidden; background: #050505;
  box-shadow: 0 0 0 6px #080808, 0 0 0 7px var(--rim), 0 14px 28px rgba(0,0,0,.5); transition: box-shadow .12s; }
.hr-root .tr-screen > img, .hr-root .tr-screen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-root .tr-screen > video { opacity: 0; transition: opacity .2s; }
.hr-root .tr-screen.is-playing > video { opacity: 1; }
.hr-root .tr-card-hit:hover .tr-screen, .hr-root .tr-card-hit:focus-visible .tr-screen { box-shadow: 0 0 0 6px #080808, 0 0 0 7px #4d4d4d, 0 14px 28px rgba(0,0,0,.5); }
.hr-root .tr-card-hit:focus-visible { outline-offset: 10px; border-radius: 8px; }
.hr-root .tr-vplate { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: 8px;
  background: rgba(7,7,7,.84); box-shadow: 0 0 0 1px rgba(255,255,255,.08); font: 400 13px/1 var(--hr-text); color: var(--ink); white-space: nowrap; opacity: 0; transition: opacity .12s; }
.hr-root .tr-card-hit:hover .tr-vplate, .hr-root .tr-card-hit:focus-visible .tr-vplate { opacity: 1; }
.hr-root .tr-name-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; height: 18px; }
.hr-root .tr-name { min-width: 0; font: 400 14px/17px var(--hr-text); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-root .tr-meta { flex: none; font: 400 11px/1 var(--hr-print); color: var(--silk); white-space: nowrap; }
.hr-root .tr-failed { position: absolute; inset: 0; display: grid; place-items: center; font: 400 12px/1 var(--hr-text); color: var(--used); }
/* a source that cannot play: the still stays, and its plate stays up with the quiet word (room.js) */
.hr-root .tr-screen.is-broken .tr-vplate { opacity: 1; padding-left: 11px; color: var(--silk); }
.hr-root .tr-screen.is-broken .tr-vplate .tr-ic { display: none; }

/* ---------- the filter panel (filterPanel): under its key, the counts, Reset ---------- */
.hr-root .tr-pop { position: absolute; right: 24px; top: 68px; z-index: 5; width: 292px; display: flex; flex-direction: column; gap: 14px; padding: 16px 12px 12px; }
.hr-root .tr-pop-b { display: flex; flex-direction: column; gap: 14px; }
.hr-root .tr-grp .tr-cap { padding-bottom: 6px; }
.hr-root .tr-pop-f { display: flex; justify-content: flex-end; padding-top: 2px; }

/* ---------- empty, no match, loading: the glass says it (emptyGlass) ---------- */
.hr-root .tr-status { display: grid; place-items: center; padding: 88px 0 24px; }
.hr-root .tr-glass { position: relative; width: min(600px, 100%); min-height: 292px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px 24px; border-radius: 6px; overflow: hidden; text-align: center;
  background: radial-gradient(ellipse at 50% 38%, #171717, #0a0a0a 72%); box-shadow: 0 0 0 6px #080808, 0 0 0 7px var(--rim), 0 14px 28px rgba(0,0,0,.5); }
.hr-root .tr-glass::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 45%; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)); }
.hr-root .tr-glass > .tr-ic { color: #5a5650; }
.hr-root .tr-glass-t { font: 800 22px/1 var(--hr-disp); letter-spacing: .06em; text-transform: uppercase; color: var(--disp); text-shadow: 0 0 8px rgba(246,239,227,.45); }
.hr-root .tr-glass-l { margin: 0; font: 400 14px/20px var(--hr-text); color: var(--silk); }
.hr-root .tr-glass-l.tr-small { font-size: 13px; line-height: 18px; }
.hr-root .tr-glass-more { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hr-root .tr-glass-more .tr-groove { width: 240px; margin: 6px 0 2px; }
.hr-root .tr-glass-more .tr-cap { padding: 0; font-size: 11px; color: var(--silk); }
.hr-root .tr-big { margin: 0; font: 400 18px/24px var(--hr-text); color: var(--ink); }
.hr-root .tr-glass .tr-key { margin-top: 6px; }

/* ---------- the preview (pvModule), over a smoke ---------- */
.hr-root .tr-pv { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; border: 0; color: var(--ink); overflow: auto; }
.hr-root .tr-pv::backdrop { background: rgba(6,6,6,.66); }
.hr-root .tr-pv-head { display: flex; align-items: center; gap: 10px; padding: 12px; }
.hr-root .tr-well { flex: 1 1 auto; min-width: 0; height: 56px; display: flex; align-items: baseline; gap: 14px; padding: 17px 16px 0; border-radius: 10px; background: var(--well); box-shadow: var(--well-sh); overflow: hidden; }
.hr-root .tr-disp { margin: 0; font: 800 26px/1 var(--hr-disp); letter-spacing: .04em; text-transform: uppercase; color: var(--disp); text-shadow: 0 0 7px rgba(246,239,227,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hr-root .tr-print { flex: none; font: 400 11px/1.2 var(--hr-print); letter-spacing: .1em; text-transform: uppercase; color: var(--silk); white-space: nowrap; }
.hr-root .tr-pv-body { display: flex; gap: 32px; padding: 10px 24px 24px; }
.hr-root .tr-pv-left { flex: 1 1 688px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.hr-root .tr-pv-screen { position: relative; aspect-ratio: 16 / 9; margin-top: 7px; border-radius: 6px; overflow: hidden; background: #050505;
  box-shadow: 0 0 0 6px #080808, 0 0 0 7px var(--rim), 0 14px 28px rgba(0,0,0,.5); }
.hr-root .tr-pv-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-root .tr-pv-screen.is-contain > img { object-fit: contain; }
.hr-root .tr-pv-screen > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
/* the film (gallery.js previewFilm): fitted as the still is, shown once a real frame plays, its keys at the corner */
.hr-root .tr-pv-screen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .2s; }
.hr-root .tr-pv-screen.is-contain > video { object-fit: contain; }
.hr-root .tr-pv-screen.is-playing > video { opacity: 1; }
.hr-root .tr-film-keys { position: absolute; left: 16px; bottom: 16px; z-index: 4; display: flex; gap: 8px; }
.hr-root .tr-pv-screen .tr-film-note { left: 16px; bottom: 16px; opacity: 1; color: var(--silk); }
.hr-root .tr-pv-nav { display: flex; justify-content: space-between; gap: 12px; }
.hr-root .tr-pv-nav .tr-key { max-width: 48%; }
.hr-root .tr-pv-nav .tr-key-t { overflow: hidden; text-overflow: ellipsis; }
.hr-root .tr-pv-nav .tr-next { flex-direction: row-reverse; }
.hr-root .tr-pv-right { flex: 0 0 330px; display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
.hr-root .tr-desc { margin: 0; font: 400 15px/22px var(--hr-text); color: var(--ink); }
.hr-root .tr-facts { display: grid; margin: 0; }
.hr-root .tr-fact { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 42px; }
.hr-root .tr-fact + .tr-fact { border-top: 1px solid var(--edge); box-shadow: inset 0 1px 0 var(--rim); }
.hr-root .tr-fact .tr-cap { padding: 0; font-size: 11px; color: var(--silk); }
.hr-root .tr-fact dd { margin: 0; font: 400 14px/1 var(--hr-text); color: var(--ink); white-space: nowrap; }
.hr-root .tr-sent { margin: 0; font: 400 13px/19px var(--hr-text); color: var(--silk); }
.hr-root .tr-error { margin: 0; font: 400 13px/18px var(--hr-text); color: #ff8d90; }
.hr-root .tr-use { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--red); box-shadow: var(--red-sh); color: var(--hi); font: 400 11px/1 var(--hr-print); letter-spacing: .1em; text-transform: uppercase; transition: background .12s, transform .07s; }
.hr-root .tr-use:hover { background: linear-gradient(180deg, #f6474b, #d42126); }
.hr-root .tr-use:active { transform: translateY(2px); box-shadow: 0 0 0 #5a0b0d, inset 0 1px 0 rgba(255,255,255,.2); }
.hr-root .tr-under { font: 400 11px/1.2 var(--hr-print); letter-spacing: .1em; text-transform: uppercase; color: var(--used); text-align: center; white-space: nowrap; }

/* ---------- the Effects room (effects-room.js; boards C1-wall and C2-card): the wall of effects, the name only ---------- */
.hr-root .fx-card .tr-card-hit { gap: 16px; }
.hr-root .fx-name { display: block; font-size: 15px; line-height: 19px; transition: color .12s, text-shadow .12s; }
.hr-root .fx-card:is(:hover, :focus-within) .fx-name { color: var(--hi); text-shadow: var(--glow); }
.hr-root .fx-card:is(:hover, :focus-within) .tr-screen { box-shadow: 0 0 0 6px #080808, 0 0 0 7px #4d4d4d, 0 14px 28px rgba(0,0,0,.5); }
/* Use this effect rises on the picture under the pointer (the name row is 19 px, 16 px under the picture) */
.hr-root .fx-card .fx-use { position: absolute; right: 17px; bottom: 58px; z-index: 2; height: 28px; border-radius: 8px; padding: 0 10px; font-size: 11px;
  opacity: 0; pointer-events: none; transition: opacity .12s, background .12s; }
.hr-root .fx-card:is(:hover, :focus-within) .fx-use { opacity: 1; pointer-events: auto; }
/* The effect's preview carries no words but its name and family: the key stands alone at the foot of its column,
   level with the foot of the picture. */
.hr-root .fx-pv .tr-pv-right { padding-bottom: 62px; }

/* ---------- the phone's pieces, off at the desk ---------- */
.hr-root :is(.hd-bar, .hd-menu, .hd-strip, .hd-g-strip, .hd-handle) { display: none; }

/* ---------- phones and narrow windows (D_phone): the bar, the glass, the wall, the handle at the foot ---------- */
@media (max-width: 900px) {
  html.home-rooms .hr-root { display: block; padding: 0; }
  .hr-root .hd-bar { position: fixed; top: 12px; left: 16px; right: 16px; z-index: 8; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 8px; border: 0; }
  .hr-root .hd-menu:not([hidden]) { position: fixed; top: 74px; right: 16px; z-index: 9; display: flex; flex-direction: column; gap: 2px; width: min(280px, calc(100vw - 32px)); padding: 8px; }
  .hr-root .hd-mrow { display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink);
    cursor: pointer; text-align: left; text-decoration: none; font: 400 14px/1 var(--hr-text); }
  .hr-root .hd-mrow:hover { background: var(--hover); }
  .hr-root .hd-mrow .tr-ic { color: var(--silk); }
  .hr-root .hd-mrow-v { margin-left: auto; font: 400 12px/1 var(--hr-print); color: var(--silk); }
  .hr-root .hd-main { position: fixed; top: 80px; left: 16px; right: 16px; bottom: 0; padding: 0; gap: 12px; background: none; box-shadow: none; border-radius: 0; }
  .hr-root .hd-glass { height: 62px; }
  .hr-root .hd-src { flex-direction: column; gap: 6px; }
  .hr-root .hd-src .tr-ic { display: block; width: 18px; height: 18px; }
  .hr-root .hd-src-n { font-size: 11px; letter-spacing: .02em; }
  .hr-root .hd-lamp { bottom: 5px; width: 24px; margin-left: -12px; }
  .hr-root .fy-tray { border-radius: 16px 16px 0 0; }
  .hr-root .fy-scroll { padding: 10px 3px calc(var(--hd-foot, 142px) + 28px); }
  /* the Community and Tutorials rooms scroll inside their own box: it ends where the foot begins */
  .hr-root .hd-sec:is([data-section="community"], [data-section="tutorials"]) { padding-bottom: calc(var(--hd-foot, 142px) + 8px); }
  .hr-root .fy-fade { height: 150px; border-radius: 0; }
  /* A card two across is narrow: its words stand under each other (card(), w < 200). */
  .hr-root .fy-card:not(.is-look) .fy-cap { flex-direction: column; align-items: flex-start; gap: 3px; }
  .hr-root .fy-card:not(.is-look) .fy-name { max-width: 100%; }
  .hr-root .fy-card:not(.is-look) .fy-kind, .hr-root .fy-card:not(.is-look) .fy-meta { line-height: 16px; }
  .hr-root .fy-name { font-size: 15px; }
  .hr-root .fy-cap2 .fy-stats { gap: 8px; }

  /* the rack is the handle at the foot, the Go Pro strip fused on top, a groove between (D_phone) */
  .hr-root .hd-rack { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 7; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0 10px 0 12px;
    box-shadow: var(--mod-sh), 0 -12px 30px rgba(0,0,0,.55); }
  .hr-root .hd-rack > :is(.hd-rack-head, .hd-g1, .hd-rack-body, .hd-box, .hd-g2, .hd-foot) { display: none; }
  .hr-root .hd-strip { display: flex; align-items: center; gap: 10px; height: 54px; flex: none; }
  .hr-root .hd-strip .hd-doto { font-size: 16px; }
  .hr-root .hd-strip-l { flex: 1 1 auto; min-width: 0; font: 400 13px/16px var(--hr-text); color: var(--disp-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hr-root .hd-g-strip { display: block; margin: 0 -2px; }
  .hr-root .hd-strip[hidden] + .hd-g-strip { display: none; }
  .hr-root .hd-handle { display: flex; align-items: center; gap: 12px; height: 71px; flex: none; }
  .hr-root .hd-handle .hd-th { width: 64px; height: 36px; }
  .hr-root .hd-handle-w { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; cursor: pointer; }
  .hr-root .hd-handle-l { display: block; margin-top: 4px; font: 400 13px/16px var(--hr-text); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the drawer: the rack's whole column over the page, the handle as its head */
  .hr-root .hd-rack.is-open { padding-bottom: 12px; }
  .hr-root .hd-rack.is-open > :is(.hd-strip, .hd-g-strip) { display: none; }
  .hr-root .hd-rack.is-open > .hd-rack-body { display: flex; flex: 1 1 auto; }
  .hr-root .hd-rack.is-open > .hd-box:not([hidden]) { display: flex; }
  .hr-root .hd-rack.is-open > :is(.hd-g2, .hd-foot) { display: flex; }
  .hr-root .hd-rack.is-open > .hd-g2 { display: block; margin-top: 12px; }
  .hr-root .hd-rack.is-open .hd-new-q { display: none; }
  .hr-root .hd-rack.is-open .hd-proj-head { display: none; }
  .hr-root .hd-rack.is-open .hd-new { margin-top: 2px; }
  .hr-root #account-slot .account-pop { width: min(300px, calc(100vw - 64px)); }
  .hr-root .bchip-pop { width: min(300px, calc(100vw - 64px)); }

  /* the rooms: their list runs across above the wall */
  .hr-root .tr-room { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: 10px; }
  .hr-root .tr-side { padding-top: 0; overflow-x: auto; scrollbar-width: none; }
  .hr-root .tr-side::-webkit-scrollbar { display: none; }
  .hr-root .tr-side .tr-cap { display: none; }
  .hr-root .tr-side .tr-list { grid-auto-flow: column; grid-auto-columns: max-content; }
  .hr-root .tr-wall { border-radius: 16px 16px 0 0; }
  .hr-root .tr-head { flex-wrap: wrap; padding: 14px 14px 10px; }
  .hr-root .tr-find { width: 100%; }
  .hr-root .tr-scroll { padding: 10px 14px calc(var(--hd-foot, 142px) + 28px); }
  .hr-root .tr-pop { right: 14px; top: auto; }
  .hr-root .tr-pv-body { flex-direction: column; padding: 8px 14px 16px; }
  /* Stacked, the desk's 688 px basis would be the picture's HEIGHT: about 500 px of empty sheet under it on a phone
     (measured 2026-09-28). Each column is as tall as what it holds, and the effect's key needs no picture to line up with. */
  .hr-root .tr-pv-left { flex: none; }
  .hr-root .tr-pv-right { flex-basis: auto; }
  .hr-root .fx-pv .tr-pv-right { padding-bottom: 0; }
}