/* Flattened 2026-09-09: every selector below is
   declared exactly once per media context. See scripts/review/flatten-css.mjs
   for why, and .review/LEDGER.md for the two defects that came out of the
   version that was not. */
:root{color-scheme:dark;--paper:#f7f1e7;--quiet:#dbd2c6;background:#1b1916}
*{box-sizing:border-box}
html{margin:0;scroll-behavior:auto!important;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{margin:0;min-height:100vh;overflow-x:clip}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
a{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:5px}
#journey{height:410vh}
#spatial-world{position:fixed;inset:0;overflow:hidden;background:#17191e}
#spatial-canvas,#poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#poster{opacity:1;transition:opacity .7s}
body.scene-ready #poster{opacity:0}
#spatial-canvas{opacity:0;transition:opacity .7s}
body.scene-ready #spatial-canvas{opacity:1}
#room-header{position:fixed;z-index:10;left:40px;right:40px;top:30px;display:flex;align-items:center;justify-content:space-between;font-size:var(--t-fine);letter-spacing:.015em;color:var(--paper)}
#room-header a{text-decoration:none;text-shadow:0 1px 12px #000}
.wordmark{font-weight:600}
.wordmark span{opacity:.4;margin:0 7px}
#direct-entry{border-bottom:1px solid #ffffff45;padding:8px 12px;font-size:var(--t-fine);color:#fff;border-bottom-color:#ffffff85;background:rgba(9,11,15,.78);border-radius:6px;backdrop-filter:blur(10px);border-bottom-width:0}
#direct-entry span{margin-left:18px}
#invitation{position:fixed;left:6vw;top:36%;z-index:8;max-width:430px;color:var(--paper);text-shadow:0 2px 25px #0006;padding:22px 24px 24px;border-radius:14px;background:linear-gradient(to bottom right,rgba(9,11,15,.72),rgba(9,11,15,.5));backdrop-filter:blur(18px) saturate(1.15);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px rgba(0,0,0,.4)}
#invitation .eyebrow{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px;color:#ded3c0}
#invitation h1{font-weight:400;letter-spacing:-.055em;line-height:1;margin:0 0 22px}
#invitation>p:not(.eyebrow){font-size:var(--t-body);line-height:1.75;color:var(--quiet);margin:0 0 26px}
#enter-room{padding:13px 18px;border:1px solid #f7f1e750;border-radius:5px;background:rgba(12,14,18,.6);backdrop-filter:blur(16px);color:var(--paper);font-size:var(--t-fine);min-height:44px}
#enter-room span{margin-left:40px}
#enter-room:hover{background:#f7f1e7;color:#282a2d;text-shadow:none}
#journey-nav{position:fixed;z-index:10;bottom:32px;left:40px;display:flex;align-items:center;gap:12px;color:var(--paper);padding:7px 14px;border-radius:999px;background:rgba(9,11,15,.6);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1)}
#journey-nav button{background:none;border:0;color:#f2ebdd;font-size:var(--t-fine);padding:10px 0;opacity:.85;min-height:44px}
#journey-nav button[aria-current]{opacity:1;font-weight:600}
#journey-nav span{width:24px;height:1px;background:#ffffff35}
#room-caption{position:fixed;z-index:7;bottom:43px;right:40px;font-size:var(--t-micro);color:#ded3c0;margin:0;max-width:46ch;text-align:right;line-height:1.55;padding:8px 12px;border-radius:9px;background:rgba(9,11,15,.55);backdrop-filter:blur(12px)}
#desktop-placement{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:20;opacity:0;transform-origin:0 0;pointer-events:none;overflow:hidden;will-change:transform,opacity}
#desktop-placement.active{pointer-events:auto}
#desktop-placement #crt.mac-desktop{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
#return-room{position:fixed;bottom:15px;right:18px;z-index:8000;border:1px solid #ffffff33;border-radius:20px;background:#152130cc;backdrop-filter:blur(14px);color:white;font-size:var(--t-micro);min-height:32px;padding:8px 12px}
#return-room[hidden]{display:none}
#diagnostics{position:fixed;right:15px;top:70px;z-index:10000;background:#10141aeb;border:1px solid #ffffff30;border-radius:10px;padding:16px;width:300px;max-height:calc(100vh - 100px);overflow:auto;color:white;font:var(--t-micro)/1.6 var(--face-evidence)}
#diagnostics label{display:block;margin:10px 0}
#diagnostics pre{font-size:var(--t-micro);white-space:pre-wrap}
#diagnostics h2{font-size:var(--t-micro);margin:0}
#debug-progress{width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body.desktop-active #room-header,body.desktop-active #journey-nav,body.desktop-active #room-caption,body.desktop-active #invitation,body.desktop-active #mini-marker{visibility:hidden}
body.graphics-failed #journey,body.motion-off #journey{height:100vh}
body.graphics-failed #journey-nav,body.motion-off #journey-nav{display:none}
@media(max-width:650px){
#room-header{left:22px;right:22px;top:20px;font-size:var(--t-fine);flex-wrap:wrap;gap:6px}
#invitation{left:18px;top:auto;bottom:126px;max-width:none;right:18px;padding:18px 18px 20px}
#invitation .eyebrow{font-size:var(--t-micro);margin:0 0 12px}
#journey-nav{left:18px;bottom:82px;padding:6px 12px}   /* the caption began 9px inside the nav */
#room-caption{left:18px;right:18px;bottom:14px;font-size:var(--t-micro);max-width:none;text-align:left;display:grid;gap:3px;justify-items:start}
#poster{object-position:43% center}
#return-room{bottom:82px;right:10px}
#diagnostics{top:58px;right:10px;width:270px}
#journey{height:330vh}
}
@media(prefers-reduced-motion:reduce){
*{scroll-behavior:auto!important}
#poster,#spatial-canvas{transition:none}
}
.room-fallback{display:block;max-width:38ch;margin:0 0 8px;color:#f7f1e7;font-weight:600;text-shadow:0 1px 12px #000}
@media(max-width:650px){
.room-fallback{max-width:none}
}
#mini-marker{position:fixed;left:0;top:0;z-index:9;pointer-events:none;color:var(--paper);opacity:0;transition:opacity .5s var(--e-move)}
#mini-marker.on{opacity:var(--mm-fade,1)}
#mini-marker[hidden]{display:none}
#mini-marker.detached{transition:opacity .5s var(--e-move),transform .5s var(--e-move)}
#mini-marker.detached .mm-dot,#mini-marker.detached .mm-rule{opacity:0}
.mm-dot{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;border:1.5px solid #f7f1e7;background:#f7f1e733;box-shadow:0 0 14px #000a;transition:opacity .3s var(--e-move)}
.mm-rule{position:absolute;left:5px;top:0;width:64px;height:1px;background:linear-gradient(to right,#f7f1e7cc,#f7f1e733);transform-origin:-5px 50%;transition:opacity .3s var(--e-move),transform .5s var(--e-move)}
.mm-card{position:absolute;left:74px;top:-30px;width:264px;text-shadow:0 1px 14px #000;padding:11px 14px;border-radius:10px;background:rgba(10,12,16,.62);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.13);transition:transform .5s var(--e-move)}
.mm-eyebrow{margin:0 0 3px;font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:#ded3c0}
.mm-title{margin:0 0 5px;font-size:var(--t-lead);font-weight:600;letter-spacing:-.01em}
.mm-line{margin:0;font-size:var(--t-fine);line-height:1.5;color:#f2ebdd}
@media(max-width:650px){

/* Measured on a 390px phone: the card sat at x 100-350 over an invitation
     panel at x 24-314, covering three lines of the pitch. There is nowhere on
     a 390px screen for a 250px card beside a 290px panel, so it stops trying
     to sit beside the dot and goes above everything instead: pinned under the
     header on the right, with the rule drawn down to the machine. The dot
     still points; nothing lands on the sentence that explains the property. */
  /* Scoped through #mini-marker, and through .flip too, because
     "#mini-marker.flip .mm-card{right:74px}" outside this block is
     specificity (1,2,0) and beat a bare .mm-card. The card landed 100px left
     of where the maths put it and the rule pointed at nothing. Scope, do not
     reach for !important: the same trap took .tp-play to 1.08:1 in August. */
  #mini-marker .mm-card,#mini-marker.flip .mm-card{position:absolute;left:var(--mm-card-x,0);right:auto;top:var(--mm-card-y,0);width:min(206px,58vw);text-align:right;padding:9px 11px;transform:none;transition:none}
  #mini-marker .mm-rule,#mini-marker.flip .mm-rule{position:absolute;left:var(--mm-rule-x,0);right:auto;top:var(--mm-rule-y,0);width:1px;height:var(--mm-drop,120px);background:linear-gradient(to bottom,#f7f1e7d9,#f7f1e77a 55%,#f7f1e7cc);box-shadow:0 0 6px #0009;transform:none;transition:opacity .3s var(--e-move)}
  #mini-marker:not(.speaking) .mm-line{display:none}   /* the line shows once the invitation has gone: there is room then, and something to say */
.mm-title{font-size:var(--t-lead)}
.mm-line{font-size:var(--t-fine)}
}
@media(prefers-reduced-motion:reduce){
#mini-marker,#mini-marker.detached,.mm-card,.mm-dot,.mm-rule{transition:none}
}
#mini-marker.flip .mm-rule{transform:scaleX(-1)}
#mini-marker.flip .mm-card{transform:translateX(calc(-100% - 148px));text-align:right}
@media(max-width:650px){


}
#room-live{margin:0;font-size:var(--t-fine);letter-spacing:.02em;color:#e6ddcd;text-shadow:0 1px 12px #000;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
@media(max-width:900px){
#room-live{max-width:44vw;font-size:var(--t-micro)}
}
@media(max-width:650px){
#room-live{order:3;flex:1 0 100%;max-width:none;white-space:normal;font-size:var(--t-micro)}
.rp-mark svg{width:92vw}
.rp-key{max-width:none}
}
#spatial-world::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(to bottom,rgba(8,10,14,.62) 0,rgba(8,10,14,.16) 16%,transparent 30%,transparent 58%,rgba(8,10,14,.42) 82%,rgba(8,10,14,.72) 100%)}
#record-plate{position:fixed;inset:0;z-index:8;display:grid;place-content:center;gap:18px;pointer-events:none;opacity:0;padding:0 5vw}
.rp-mark{color:#e8c979;line-height:0;filter:drop-shadow(0 2px 14px #0009)}
.rp-mark svg{width:min(62vw,900px);height:auto;display:block}
.rp-key{margin:0;justify-self:center;max-width:52ch;text-align:center;font-size:var(--t-fine);line-height:1.5;color:#f2ebdd;text-shadow:0 1px 14px #000;padding:9px 14px;border-radius:10px;background:rgba(10,12,16,.62);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.13)}
#room-header,#invitation,#journey-nav,#mini-marker{color:#f9f5ee}
#direct-entry:hover{background:rgba(10,12,16,.68)}
#invitation .invite-body{font-size:var(--t-body);line-height:1.62;color:#f2ebdd;margin:0 0 16px;max-width:52ch}   /* 46ch measured as 43 characters per line on the desktop; the floor is 45 */
.invite-counts{margin:0 0 22px;display:grid;gap:3px;font-size:var(--t-fine);color:#e6ddcd;font-variant-numeric:tabular-nums}
.ic-row{display:grid;grid-template-columns:44px 1fr;align-items:baseline;gap:10px}
.ic-row b{font-weight:650;color:#fff;font-size:var(--t-body);text-align:right}
.ic-row i{font-style:normal;color:#d8cfbe}
#room-caption a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media(max-width:650px){
/* On a phone this filled pill was the loudest thing on the screen, louder
     than "Go into the machine", which is the action the front door is asking
     for. A skip link should be findable, not first. */
  #direct-entry{font-size:var(--t-fine);background:none;backdrop-filter:none;border-radius:0;border-bottom:1px solid #ffffff5c;padding:4px 0;color:#efe7d9}
  #direct-entry span{margin-left:8px}
#invitation .invite-body{font-size:var(--t-body);margin:0 0 14px}
.invite-counts{font-size:var(--t-fine);margin:0 0 18px}
#journey-nav button{font-size:var(--t-fine)}
.mm-eyebrow{font-size:var(--t-micro)}
}