/* h1v3MIND/ed home page: the office floor at the top (js/floor.js), what people use it for, the rooms toolbar, the
   looks, and a button to ask for access. The rooms and things are drawn the way the app's 16-bit theme draws them. */

main { padding-top: var(--nav-h); }
.sec { padding: clamp(72px, 10vw, 128px) 0 0; }
.sec-head { max-width: 760px; display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 44px); }
.sec-head-c { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.lead { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.5; color: var(--muted); max-width: 640px; }
.small { font-size: .95rem; color: var(--subtle); }

/* ---------- the top: a line, a button, and the office at work ---------- */
.hero { padding-top: clamp(22px, 3.5vw, 40px); }
.hero-copy { display: grid; justify-items: center; text-align: center; gap: 14px; }
.hero-copy .lead { margin: 0 auto; max-width: 700px; }
.hero-copy .h-xl { font-size: clamp(2.1rem, 1.1rem + 3.2vw, 3.8rem); }
.cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 4px; }
.hero-fact { color: var(--muted); font-size: 1rem; }
.hero-closed { padding: 8px 12px; border: 2px solid var(--line); background: var(--panel); color: var(--muted); font-size: .95rem; }
.btn-big { min-height: 56px; padding: 0 1.6em; font-size: 14px; }

.floor-win { margin: clamp(22px, 3vw, 36px) auto 0; max-width: 1240px; background: #1b1530; border: 3px solid var(--frame); box-shadow: inset 0 0 0 2px #1b1530, var(--shadow); }
.fs-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #2b2140; }
.fs-askbar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 4px 0 8px; background: #120e22; border: 2px solid var(--line); box-shadow: inset 2px 2px 0 #0006; }
.fs-askbar:focus-within { border-color: var(--gold); }
.fs-askbar .face { flex: none; width: 32px; height: 32px; border: 2px solid #68d6ec; background: #2b2140; }
.face img { width: 100%; height: 100%; image-rendering: pixelated; }
.fs-askbar input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none; color: var(--text); font: 400 16px/1 var(--sans); caret-color: var(--gold); }
.fs-askbar input::placeholder { color: var(--subtle); opacity: 1; }
.fs-pill { flex: none; font: 400 11px/1 var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 5px 7px; background: #2b2140; }
.fs-send { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--gold); color: var(--on-gold); box-shadow: 2px 2px 0 #000a; }
.fs-send:hover { background: var(--gold-2); }
.fs-send:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }
.fs-send svg { width: 16px; height: 16px; }
.fs-send.pressed, .fs-send:active { transform: translate(2px, 2px); box-shadow: none; }
.fs-pause { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 50px; min-width: 50px; justify-content: center; padding: 0 12px; border: 2px solid var(--line); color: var(--muted);
  font: 400 12px/1 var(--pixel); letter-spacing: .04em; text-transform: uppercase; }
.fs-pause:hover { color: var(--text); border-color: var(--frame); }
.fs-pause svg { width: 14px; height: 14px; }
.fs-pause .i-play { display: none; }
.fs-convo { display: grid; gap: 6px; align-content: center; min-height: 50px; padding: 8px 14px 10px; background: #2b2140; border-bottom: 3px solid #0c0a18; }
.fs-line { font-size: 16px; line-height: 1.35; color: var(--text); }
.fs-line b { font: 400 11px var(--pixel); letter-spacing: .04em; text-transform: uppercase; color: #68d6ec; margin-right: 6px; }
.fs-line.you b { color: var(--gold); }
.fs-line.hint { color: var(--muted); }
.fs-line.fs-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--muted); }
.fs-go { min-height: 44px; }
.fs-cast { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 14px 12px; border-top: 3px solid #0c0a18; background: #2b2140; color: var(--muted); font-size: 15px; }
.fs-cast > span { display: inline-flex; align-items: center; gap: 6px; }
.fs-cast .face { flex: none; width: 22px; height: 22px; background: #1b1530; }
.fs-cast b { color: var(--text); font-weight: 600; }
@media (max-width: 560px) {
  .fs-pill { display: none; }
  .fs-top { padding: 8px; gap: 8px; }
  .fs-pause { padding: 0; } .fs-pause .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fs-cast { gap: 4px 14px; font-size: 14px; }
}

/* the floor: rooms on dark tiles, the corridor between them */
.floor { position: relative; overflow: hidden; height: 560px; background: #241c3a; background-image: linear-gradient(90deg, #ffffff08 2px, transparent 2px), linear-gradient(#ffffff08 2px, transparent 2px); background-size: 24px 24px; }
.fs-plane { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.fs-room { position: absolute; display: flex; flex-direction: column; padding: 12px 14px 12px; color: #f4f0ff;
  --rb: #8fa3c0; --grid: linear-gradient(90deg, #1b15301f 2px, transparent 2px), linear-gradient(#1b15301f 2px, transparent 2px); --gs: 24px 24px;
  background-color: var(--rb); background-image: var(--grid); background-size: var(--gs); border: 6px solid #2b2140; box-shadow: 0 0 0 3px #f4f0ff, 6px 6px 0 3px #0009; }
.fs-room.k-library { --rb: #b07a46; --grid: conic-gradient(#cf9a62 0 25%, #b07a46 0 50%); --gs: 32px 32px; }
.fs-room.k-commons, .fs-room.k-reception { --rb: #c6bce0; --grid: conic-gradient(#d8d0ec 0 25%, #c6bce0 0 50%); --gs: 40px 40px; }
.fs-room.k-lead { --rb: #57c873; --grid: linear-gradient(90deg, #3fae5a 2px, transparent 2px), linear-gradient(#3fae5a 2px, transparent 2px); --gs: 16px 16px; }
.fs-name { align-self: flex-start; display: flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 2px 8px 3px; background: #2b2140; box-shadow: 2px 2px 0 #0008;
  font: 400 max(17px, calc(13px / var(--k, 1)))/1.2 var(--sans); white-space: nowrap; }
.fs-name .sym { color: var(--gold); font-size: .85em; }
.fs-name small { font: 400 max(10px, calc(8px / var(--k, 1))) var(--pixel); letter-spacing: .04em; text-transform: uppercase; color: #c9c1ec; }
.fs-door { position: absolute; left: 50%; width: 46px; height: 9px; margin-left: -23px; background: var(--rb); }
.fs-door.bottom { bottom: -15px; } .fs-door.top { top: -15px; }
.fs-door.left, .fs-door.right { width: 9px; height: 46px; margin-left: 0; left: auto; }
.fs-door.left { left: -15px; } .fs-door.right { right: -15px; }
.fs-things { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; margin-top: 10px; }
.fs-floor { position: relative; flex: 1; display: flex; flex-wrap: wrap; align-content: flex-end; align-items: flex-end; gap: 8px 14px; margin-top: 18px; }

/* the things in a room: a picture, its name and state underneath (the app's thing art) */
.fs-thing { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.fs-thing .art { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px; padding: 5px; background: #f4f0ff; border: 3px solid #1b1530; }
.fs-thing .tag { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.fs-thing .tag b { padding: 1px 4px; background: #1b1530; font: 400 max(10px, calc(8px / var(--k, 1)))/1.4 var(--pixel); letter-spacing: .04em; text-transform: uppercase; color: #fff6b0; white-space: nowrap; }
.fs-thing .tag small { padding: 0 4px; background: #1b1530; font: 400 max(10px, calc(8px / var(--k, 1)))/1.4 var(--pixel); color: #f4f0ff; white-space: nowrap; }
.fs-thing.live .art { box-shadow: 0 0 0 3px #ffd65a; }
.fs-thing.live .art::after { content: ""; position: absolute; inset: -9px; box-shadow: 0 0 0 2px #ffd65a; opacity: 0; animation: glow 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes glow { 50% { opacity: .9; } }
.t-board .art { width: 98px; height: 50px; }
.t-board .note { width: 19px; height: 11px; background: #fff7c2; border: 1px solid #0003; }
.t-board .note.running { background: #ffd27a; } .t-board .note.review { background: #cdbcff; } .t-board .note.blocked { background: #ff9a84; }
.t-shelves .art { width: 124px; height: 50px; flex-wrap: nowrap; align-items: flex-end; gap: 2px; padding: 4px 5px 5px; overflow: hidden; }
.t-shelves .book { flex: none; width: 5px; height: var(--h); border: 1px solid #1b1530; background: #1d2433; }
.t-shelves .book.b1 { background: #f7f5ef; } .t-shelves .book.b2 { background: #c9c5b8; } .t-shelves .book.b3 { background: #b33a26; }
.t-returns .art { width: 72px; height: 32px; }
.t-returns .tray { position: absolute; left: 8px; bottom: 5px; width: 40px; height: 14px; border: 2px solid #1b1530; background: #fffefb; }
.t-returns .paper { position: absolute; left: 14px; bottom: 12px; width: 28px; height: 16px; border: 1px solid #1b1530; background: #ffd65a; transform: rotate(-8deg); }
.t-belt .art { width: 112px; height: 20px; padding: 2px 4px; background-image: repeating-linear-gradient(90deg, #0002 0 2px, transparent 2px 12px); flex-wrap: nowrap; gap: 14px; }
.t-belt .box { width: 13px; height: 12px; border: 1px solid #1b1530; background: #d8a35a; }
.t-belt.live .box { animation: belt 1.4s linear infinite; } @keyframes belt { to { transform: translateX(26px); } }
.t-log .art { width: 44px; height: 34px; gap: 2px; padding: 4px; flex-wrap: nowrap; }
.t-log .page { flex: 1; background: repeating-linear-gradient(#0000 0 4px, #0003 4px 5px), #fffefb; border: 1px solid #0003; }
.t-deleg .art { width: 86px; height: 44px; flex-direction: column; flex-wrap: nowrap; gap: 4px; padding: 6px 8px; }
.t-deleg .line { height: 5px; width: 80%; background: var(--hue); } .t-deleg .line:nth-child(2n) { width: 62%; } .t-deleg .line.none { background: #1b1530; opacity: .2; }
.t-mailbox .art { width: 36px; height: 34px; background: #e0503a; }
.t-mailbox .flag { position: absolute; right: -8px; top: -12px; width: 4px; height: 16px; background: #1b1530; }
.t-mailbox.live .flag { background: #ffd65a; height: 22px; }
.t-wall .art { width: 92px; height: 38px; background: #1d2433; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.t-wall .cell { background: #4fbf7a; } .t-wall .cell.warn { background: #ff7a64; }
.t-desk { order: 3; margin: 30px auto 0; }
.t-desk .art { width: 156px; height: 40px; border-radius: 26px 26px 6px 6px; }
.t-desk .seat { position: absolute; left: 50%; top: 14px; width: 1px; height: 1px; }
.k-reception .fs-things { align-items: flex-end; }

/* desks and the furniture that's only there to look at */
.fs-desk { position: relative; width: 94px; height: 84px; flex: none; }
.fs-desk::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: #b07a46; border: 2px solid #4a2b17; }
.fs-desk::after { content: ""; position: absolute; left: 34px; bottom: 30px; width: 26px; height: 16px; background: #4a2b17; }
.fs-desk .chair { position: absolute; left: 50%; top: 22px; width: 1px; height: 1px; }
.fs-decor { flex: none; display: block; }
.fs-decor.sofa { width: 120px; height: 34px; background: #b5542e55; border: 3px solid #2b2140; }
.fs-decor.table { width: 54px; height: 54px; border-radius: 50%; background: #b07a46; border: 3px solid #2b2140; }
.fs-decor.cooler { width: 24px; height: 40px; background: #fffefb; border: 3px solid #2b2140; box-shadow: inset 0 12px 0 #8cc7e8; }
.fs-decor.reading { width: 150px; height: 46px; border-radius: 23px; background: #b07a46; border: 3px solid #2b2140; margin: 0 auto 10px; position: relative; }
.fs-decor.reading::after { content: ""; position: absolute; right: 18px; top: -10px; width: 14px; height: 14px; border-radius: 50%; background: #ffd65a; box-shadow: 0 0 18px 6px #ffe45c66; }

/* the crew: 16-bit people with their names under their feet */
.fs-crew, .fs-bubbles { position: absolute; inset: 0; pointer-events: none; }
.fs-ag { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.fs-sprite { position: absolute; left: -16px; top: -46px; width: 32px; height: 48px; max-width: none; image-rendering: pixelated; }
.fs-tag { position: absolute; top: 4px; left: 0; transform: translateX(-50%); padding: 1px 5px; background: #1b1530; color: #fff6b0; font: 400 max(10px, calc(8px / var(--k, 1)))/1.4 var(--pixel); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.fs-ag .star { position: absolute; left: 10px; top: -54px; width: 16px; height: 16px; background: var(--gold); box-shadow: 0 0 0 2px #1b1530; }
.fs-ag .star::before { content: ""; position: absolute; inset: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%231b1530' d='M5 0h2v3h5v2h-2v2h1v5H9v-2H8V9H4v1H3v2H1V7h1V5H0V3h5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.fs-talk { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.fs-arrow { fill: none; stroke: var(--hue); stroke-width: 3; stroke-dasharray: 6 7; stroke-linecap: square; animation: flow 1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -26; } }
.fs-bubble { position: absolute; left: 0; top: 0; max-width: max(230px, calc(180px / var(--k, 1))); padding: 7px 11px 8px; background: #f4f0ff; color: #1b1530; border: 3px solid #1b1530; box-shadow: 3px 3px 0 #0008;
  font: 400 max(15px, calc(12px / var(--k, 1)))/1.25 var(--sans); animation: pop .22s ease-out; }
.fs-bubble .who { display: block; margin-bottom: 2px; font: 400 max(10px, calc(8px / var(--k, 1))) var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--hue) 40%, #1b1530); white-space: nowrap; }
.fs-bubble.speech { background: var(--hue); }
.fs-bubble.speech .who { color: #1b1530b3; }
.fs-bubble .puff { position: absolute; background: #f4f0ff; border: 3px solid #1b1530; }
.fs-bubble .p1 { width: 11px; height: 11px; left: calc(50% - 6px); bottom: -15px; }
.fs-bubble .p2 { width: 7px; height: 7px; left: calc(50% + 4px); bottom: -24px; }
@keyframes pop { from { opacity: 0; margin-top: 6px; } }

/* the narrow floor plan is drawn bigger for a phone, with only the names */
.floor.compact .fs-name { font-size: max(24px, calc(13px / var(--k, 1))); } .floor.compact .fs-name small, .floor.compact .fs-thing .tag small { display: none; }
.floor.compact .fs-thing .tag b { font-size: max(14px, calc(8.5px / var(--k, 1))); }
.floor.compact .fs-sprite { left: -21px; top: -60px; width: 42px; height: 63px; }
.floor.compact .fs-tag { font-size: max(14px, calc(8.5px / var(--k, 1))); }
.floor.compact .fs-ag .star { top: -70px; left: 12px; }
.floor.compact .fs-bubble { max-width: 300px; font-size: max(22px, calc(12px / var(--k, 1))); padding: 9px 13px 10px; }
.floor.compact .fs-bubble .who { font-size: max(13px, calc(8px / var(--k, 1))); }
.floor.compact .t-desk { margin-top: 44px; }
.floor-static { display: block; width: 100%; height: auto; }
html:not(.js) .floor, html:not(.js) .fs-top, html:not(.js) .fs-convo { display: none; }

/* ---------- what people use it for ---------- */
.use-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px; }
.use { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 22px 22px 18px; background: linear-gradient(180deg, #33284d 0%, #251c3a 100%);
  border: 3px solid var(--frame); box-shadow: inset 0 0 0 2px #1b1530, var(--shadow); }
.use-art { height: 92px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background-color: var(--rb, #8fa3c0); background-image: var(--grid);
  background-size: var(--gs, 24px 24px); border: 4px solid #2b2140; box-shadow: 0 0 0 2px #f4f0ff; overflow: hidden; }
.use-art.k-library { --rb: #b07a46; --grid: conic-gradient(#cf9a62 0 25%, #b07a46 0 50%); --gs: 32px 32px; }
.use-art.k-reception, .use-art.k-commons { --rb: #c6bce0; --grid: conic-gradient(#d8d0ec 0 25%, #c6bce0 0 50%); --gs: 40px 40px; }
.use-art.k-lead { --rb: #57c873; --grid: linear-gradient(90deg, #3fae5a 2px, transparent 2px), linear-gradient(#3fae5a 2px, transparent 2px); --gs: 16px 16px; }
.use-art.k-channel { --grid: linear-gradient(90deg, #1b15301f 2px, transparent 2px), linear-gradient(#1b15301f 2px, transparent 2px); }
.use-art .crew { display: flex; gap: 2px; margin-left: auto; align-items: flex-end; }
.use-art .crew img { width: 32px; height: 48px; image-rendering: pixelated; }
.use-art { position: relative; }
.t-board .note.done { background: #8fe3a6; }
/* a card's own little office (scenes.js on the floor.js engine): one room, the crew talking in bubbles */
.use-art.live { display: block; height: auto; padding: 0; }
.floor.card { position: relative; height: auto; background: none; }
.floor.card .fs-room { border: 0; box-shadow: none; padding: 8px 12px; }
.floor.card .fs-name small, .floor.card .fs-thing .tag small { display: none; }
.floor.card .fs-things { margin-top: 8px; gap: 8px 14px; }
.floor.card .fs-floor { margin-top: 6px; gap: 6px 14px; }
.card-night { position: absolute; inset: 0; background: #0b0d2a; opacity: 0; pointer-events: none; transition: opacity 1.4s cubic-bezier(.16, 1, .3, 1); }
.floor.card.night .card-night { opacity: .55; transition-duration: .4s; }
.fs-ag.visitor .fs-sprite { filter: drop-shadow(2px 0 0 #ffd65a) drop-shadow(-2px 0 0 #ffd65a); }
.fs-thing.t-link.live .wire i { animation: link 1.1s steps(10) infinite; }
.card-pause { position: absolute; top: 6px; right: 6px; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; background: #17132bcc; border: 2px solid var(--line); color: var(--muted); }
.card-pause::before { content: ""; position: absolute; inset: -7px; }
.card-pause:hover { color: var(--text); border-color: var(--frame); }
.card-pause svg { width: 12px; height: 12px; }
.card-pause .i-play, .use-art:has(.floor.paused) .card-pause .i-pause { display: none; }
.use-art:has(.floor.paused) .card-pause .i-play { display: block; }
.access-box { overflow: hidden; }
.access-box .crew { position: relative; }
.say { position: absolute; z-index: 2; left: 0; bottom: calc(100% + 10px); padding: 6px 10px 7px; white-space: nowrap; background: #68d6ec; color: #1b1530; border: 3px solid #1b1530; box-shadow: 3px 3px 0 #0008;
  font: 400 15px/1.2 var(--sans); animation: pop .22s ease-out; }
.say::after { content: ""; position: absolute; left: 14px; top: 100%; width: 10px; height: 8px; background: #1b1530; clip-path: polygon(0 0, 100% 0, 0 100%); }
.use-art .crew img.visitor { filter: drop-shadow(0 0 0 #ffd65a) drop-shadow(2px 0 0 #ffd65a); }
.use h3 { font: 600 1.4rem/1.2 var(--display); color: var(--text); }
.use p { color: var(--muted); }
.use .who { display: flex; flex-wrap: wrap; gap: 6px; }
.use .who span { font: 400 11px/1 var(--pixel); letter-spacing: .04em; text-transform: uppercase; color: var(--gold-2); padding: 5px 7px; background: #1b1530; }
.t-link .art { width: 96px; height: 40px; flex-wrap: nowrap; align-items: center; gap: 0; padding: 6px 7px; }
.t-link .end { flex: none; width: 18px; height: 22px; border: 3px solid #1b1530; background: #fff1c2; }
.t-link .end.far { background: #ffe58a; }
.t-link .wire { position: relative; flex: 1; height: 3px; margin: 0 3px; background: repeating-linear-gradient(90deg, #1b1530 0 4px, transparent 4px 7px); }
.t-link .wire i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; background: #ffd65a; }

@keyframes link { to { left: calc(100% - 8px); } }
.t-strip .art { width: 120px; height: 40px; padding: 4px; gap: 3px; flex-wrap: nowrap; align-items: flex-end; background: #2b2140; }
.t-strip .art i { flex: 1; height: 24px; background: #8fa3c0; border: 2px solid #f4f0ff; }
.t-strip .art i:nth-child(2) { background: #c6bce0; } .t-strip .art i:nth-child(3) { background: #57c873; } .t-strip .art i:nth-child(4) { flex: .6; background: #ffd65a; }

/* ---------- the rooms toolbar ---------- */
.shot { display: grid; gap: 12px; }
.shot > img, .scroll-x { width: 100%; height: auto; border: 3px solid var(--frame); box-shadow: var(--shadow); background: #1b1530; }
.shot figcaption { color: var(--muted); font-size: .98rem; max-width: 70ch; }
.toolbar-more { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px 36px; align-items: end; margin-top: 40px; }
.toolbar-note { color: var(--muted); max-width: 40ch; padding-bottom: 34px; }
@media (max-width: 900px) { .toolbar-more { grid-template-columns: 1fr; } .toolbar-note { padding-bottom: 0; } }
/* the close-up runs the full width of the window, like HiveBar along the bottom of a screen; on a phone it keeps a
   readable size and scrolls sideways */
.toolbar-lead { margin: 0 calc(50% - 50vw); }
.toolbar-lead .scroll-x { border-width: 3px 0; box-shadow: none; }
.toolbar-lead figcaption { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.swipe-hint { display: none; color: var(--text); }
@media (max-width: 700px) {
  .scroll-x { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: var(--gold-line) #1b1530; }
  .scroll-x .bar-scene { width: 1600px; }
  .bar-pause { right: auto; left: 12px; }
  .swipe-hint { display: inline; }
}

/* HiveBar, live: the office in a row over a Mac desktop (js/floor.js draws it in the same plane units as the picture) */
.bar-scene { position: relative; overflow: hidden; }
.bar-backdrop, .bar-static { display: block; width: 100%; height: auto; }
.bar-static { position: absolute; inset: 0; }
.floor.strip { position: absolute; left: 0; right: 0; top: 16.296%; height: auto; overflow: visible; background: none; }
.floor.strip::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 61.1%; background: #241c3a;
  background-image: linear-gradient(90deg, #ffffff08 2px, transparent 2px), linear-gradient(#ffffff08 2px, transparent 2px); background-size: 24px 24px; border-top: 3px solid #0c0a18; }
.floor.strip .fs-room { padding: 8px 12px; }
.floor.strip .fs-thing .tag small { display: none; }
.floor.strip .fs-things { margin-top: 8px; gap: 8px 14px; }
.floor.strip .fs-floor { margin-top: 6px; gap: 6px 10px; }
.floor.strip .fs-desk, .floor.card .fs-desk { width: 72px; height: 48px; }
.floor.strip .fs-desk::before, .floor.card .fs-desk::before { height: 22px; }
.floor.strip .fs-desk::after, .floor.card .fs-desk::after { left: 24px; bottom: 18px; width: 22px; height: 12px; }
.floor.strip .fs-desk .chair, .floor.card .fs-desk .chair { top: 40px; }
.floor.strip .t-desk, .floor.card .t-desk { order: 0; margin: 0; }
.floor.strip .t-desk .art, .floor.card .t-desk .art { width: 86px; height: 34px; border-radius: 18px 18px 4px 4px; }
.floor.strip .t-desk .seat, .floor.card .t-desk .seat { top: 16px; }
.floor.strip .fs-decor.reading, .floor.card .fs-decor.reading { width: 120px; height: 34px; margin: 0; }
.floor.strip .fs-decor.sofa { width: 100px; height: 28px; } .floor.strip .fs-decor.table { width: 42px; height: 42px; }
.fs-tether { fill: none; stroke: var(--hue); stroke-width: 2; stroke-dasharray: 2 5; opacity: .9; }
.bar-panel { position: absolute; display: grid; grid-template-rows: auto 1fr; gap: 8px; padding: 10px; background: #2b2140; border: 3px solid #f4f0ff; box-shadow: 4px 4px 0 #0009; color: #f4f0ff; }
.bar-ws { display: flex; align-items: center; gap: 8px; font: 400 max(13px, calc(10px / var(--k, 1))) var(--pixel); }
.bar-ws i { margin-left: auto; width: 8px; height: 8px; background: #6fdc8c; }
.bar-logo { width: 18px; height: 18px; background: var(--gold); border: 2px solid #1b1530; }
.bar-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bar-tile { display: grid; align-content: center; gap: 2px; padding: 4px 7px; border: 2px solid #6c5f96; background: #221a38; }
.bar-tile b { font: 400 max(16px, calc(12px / var(--k, 1)))/1 var(--pixel); color: #f4f0ff; }
.bar-tile.warn b { color: #ff9a84; }
.bar-tile small { font: 400 max(10px, calc(8px / var(--k, 1)))/1.2 var(--sans); color: #c9c1ec; }
.bar-tile.bump b { animation: bump .45s steps(3); }
@keyframes bump { 40% { transform: translateY(-4px); color: var(--gold); } }
.bar-pause { position: absolute; right: 12px; top: 12px; min-height: 44px; background: #17132bdd; }
.floor-win:has(.floor.paused) .fs-pause .i-pause, .bar-scene:has(.floor.paused) .bar-pause .i-pause { display: none; }
.floor-win:has(.floor.paused) .fs-pause .i-play, .bar-scene:has(.floor.paused) .bar-pause .i-play { display: block; }
html:not(.js) .floor.strip, html:not(.js) .bar-pause { display: none; }

/* ---------- looks ---------- */
.looks-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 250px); gap: 28px; align-items: start; }
.looks-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.looks-tabs button { position: relative; min-height: 44px; font: 400 12px/1 var(--pixel); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 0 14px; border: 2px solid var(--line); background: var(--panel); }
.looks-tabs button:hover { color: var(--text); border-color: var(--frame); }
.looks-tabs button[aria-selected="true"] { color: var(--on-gold); background: var(--gold); border-color: #1b1530; box-shadow: 3px 3px 0 #000a; }
.looks-view { position: relative; aspect-ratio: 16 / 10; border: 3px solid var(--frame); box-shadow: var(--shadow); background: #1b1530; overflow: hidden; }
.looks-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.looks-view img[hidden] { display: block !important; opacity: 0; pointer-events: none; }
.looks-view img.coming { z-index: 2; }
.wipe-edge { position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; width: 8px; margin-left: -4px; background: var(--gold); box-shadow: 0 0 0 3px #1b1530; opacity: 0; pointer-events: none; }
.looks-tabs.cycling button[aria-selected="true"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 5px; height: 3px; background: var(--on-gold); transform-origin: left;
  animation: cycle var(--cycle, 3.6s) steps(12) both; }
@keyframes cycle { from { transform: scaleX(0); } }
.phone-shot { margin-top: 62px; }
@media (max-width: 900px) { .looks-grid { grid-template-columns: 1fr; } .phone-shot { margin-top: 8px; max-width: 260px; justify-self: center; } }

/* ---------- asking for access ---------- */
.access { padding-bottom: clamp(80px, 11vw, 140px); }
.access-box { display: grid; justify-items: center; text-align: center; gap: 18px; padding: clamp(36px, 6vw, 64px) 22px; background: linear-gradient(180deg, #33284d 0%, #251c3a 100%);
  border: 3px solid var(--frame); box-shadow: inset 0 0 0 2px #1b1530, var(--shadow); }
.access-box .crew { display: flex; gap: 6px; }
.access-box .crew img { width: 40px; height: 60px; image-rendering: pixelated; }
.notice { padding: 10px 14px; border: 2px solid var(--line); background: var(--panel); color: var(--muted); }
.notice.ok { border-color: var(--green); color: var(--green); }

.req { width: min(520px, calc(100vw - 24px)); padding: 0; border: 3px solid var(--frame); background: linear-gradient(180deg, #33284d 0%, #251c3a 100%); color: var(--text);
  box-shadow: inset 0 0 0 2px #1b1530, var(--shadow); }
.req::backdrop { background: #0c0a18cc; }
.req form { display: grid; gap: 14px; padding: 22px 22px 20px; }
.req-head { display: flex; align-items: flex-start; gap: 12px; }
.req-head h2 { font: 600 1.6rem/1.15 var(--display); flex: 1; }
.req-x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--line); color: var(--muted); }
.req-x svg { width: 16px; height: 16px; }
.req-x:hover { color: var(--text); border-color: var(--frame); }
.field { display: grid; gap: 6px; }
.field label { font: 400 12px/1.2 var(--pixel); letter-spacing: .04em; text-transform: uppercase; color: var(--gold-2); }
.field label i { font-style: normal; color: var(--subtle); text-transform: none; font-family: var(--sans); font-size: 13px; letter-spacing: 0; }
.field input, .field textarea { width: 100%; padding: 10px 12px; font: 400 16px/1.4 var(--sans); color: var(--text); background: #120e22; border: 2px solid var(--line); box-shadow: inset 2px 2px 0 #0006; resize: vertical; caret-color: var(--gold); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field.bad input { border-color: var(--red); }
.field-err { color: var(--red); font-size: .9rem; }
.req-count { justify-self: end; font: 400 11px var(--pixel); color: var(--subtle); }
.req-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.req-privacy { flex: 1 1 200px; color: var(--subtle); font-size: .92rem; line-height: 1.4; }
.req-out p { margin: 0; }
.req-out .ok { color: var(--green); } .req-out .err { color: var(--red); }
.req-done { display: grid; gap: 14px; justify-items: start; padding: 26px 22px 22px; }
.req-done .crew { display: flex; gap: 4px; }
.req-done .crew img { width: 32px; height: 48px; image-rendering: pixelated; }
.req-scout { padding: 8px 12px; background: #f4f0ff; color: #1b1530; border: 3px solid #1b1530; box-shadow: 3px 3px 0 #0008; }
.req-scout b { font: 400 11px var(--pixel); letter-spacing: .04em; text-transform: uppercase; color: #0f6d83; margin-right: 6px; }

/* ---------- on a phone, a request button in reach between the top and the end ---------- */
.m-cta { display: none; }
@media (max-width: 700px) {
  .m-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #17132bf2;
    border-top: 3px solid #0c0a18; transform: translateY(110%); visibility: hidden; transition: transform .2s ease-out, visibility 0s linear .2s; }
  .m-cta.on { transform: none; visibility: visible; transition: transform .2s ease-out; }
  .m-cta .btn { width: 100%; min-height: 48px; }
}

/* ---------- arriving: things rise in as you reach them ---------- */
.motion .rise { opacity: 0; transform: translateY(18px); transition: opacity .5s ease-out, transform .5s ease-out; }
.motion .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fs-arrow, .t-link .wire i, .t-belt.live .box, .fs-thing.live .art::after { animation: none; } .m-cta { transition: none !important; } }