:root { color-scheme:dark; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:#17151a; color:#f4e8d8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:18px; background:radial-gradient(circle at top,#342b3a,#110f13 68%); }
button,input { font:inherit; }
button { border:2px solid #875f72; background:#382635; color:#fff1e2; padding:.72rem .9rem; border-radius:8px; cursor:pointer; box-shadow:inset 0 -2px #1c121a; }
button:hover,button:focus { background:#513448; outline:2px solid #e0a56f; outline-offset:1px; }
button.primary { background:#8d3f47; border-color:#4b2026; }
input { width:100%; padding:.68rem; margin-top:.35rem; background:#171119; border:2px solid #6d4a5b; color:#fff1e2; border-radius:6px; }
label { display:block; margin:.8rem 0; }
.machine { position:relative; width:min(100%,980px); border:8px solid #504450; border-radius:28px; background:#251f27; box-shadow:0 20px 60px #000a,inset 0 0 0 3px #151116; padding:14px; }
.machine-head,.machine-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 8px; }
.machine-foot { flex-wrap:wrap; }
.machine-foot-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-left:auto; }
#codeDisplay { overflow-wrap:anywhere; }
.machine-head small { display:block; margin-top:4px; color:#cab8c3; }
.brand { font-weight:900; letter-spacing:.12em; }
.badge,.signal { border:1px solid #9a687c; border-radius:999px; padding:.32rem .58rem; font-size:.78rem; background:#1b151c; }
.screen { min-height:540px; background:#d9c5ad; color:#24151d; border:8px inset #725b68; padding:14px; overflow:auto; max-height:74vh; }
.hidden { display:none !important; }
.tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:8px; }
.tab.active { background:#d39a67; color:#24151d; border-color:#ffe0a3; }
.drawer { display:none; }
.drawer.active { display:block; }
.panel { border:3px solid #51323f; background:#ead8bf; padding:13px; margin-bottom:12px; box-shadow:inset 0 0 0 2px #fff0d5; }
.panel h1,.panel h2 { margin:.15rem 0 .65rem; }
.panel h2 { font-size:1rem; letter-spacing:.07em; }
.panel-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.button-row { display:flex; flex-wrap:wrap; gap:8px; }
.eyebrow,.kicker { font-size:.76rem; letter-spacing:.1em; font-weight:900; margin:0 0 .5rem; color:#744555; }
.event { border-left:4px solid #9a5f5f; padding:.35rem .7rem; margin:.55rem 0; background:#f3e2ca; }
.event time,.small { display:block; color:#69545c; font-size:.76rem; margin-top:.25rem; }
.room-view { position:relative; min-height:256px; margin:0 0 12px; }
.room-stage { width:252px; height:256px; overflow:hidden; margin:0 auto; outline:3px solid #51323f; background:#1b151c; box-shadow:inset 0 0 0 2px #fff0d5,0 6px 18px #2b202633; }
.room-stage canvas { display:block; width:256px; height:256px; margin-left:-2px; image-rendering:pixelated; image-rendering:crisp-edges; }
.overheard-bubble { position:absolute; left:calc(50% + 146px); top:48px; width:min(250px,calc(50% - 164px)); min-width:190px; padding:12px 14px; border:3px solid #51323f; background:#f3e2ca; color:#24151d; box-shadow:0 8px 24px #2b202655,inset 0 0 0 2px #fff0d5; transition:opacity .26s ease,transform .26s ease; z-index:4; }
.overheard-bubble::before { content:""; position:absolute; left:-10px; top:46px; width:16px; height:16px; background:#f3e2ca; border-left:3px solid #51323f; border-bottom:3px solid #51323f; transform:rotate(45deg); }
.overheard-bubble .eyebrow { display:block; margin-bottom:.35rem; }
.overheard-bubble p { margin:0; line-height:1.35; }
.overheard-bubble.condensing { opacity:0; transform:translateX(12px) scale(.96); }
.footer-pill { border-radius:999px; padding:.55rem .72rem; font-size:.72rem; letter-spacing:.04em; box-shadow:0 8px 24px #120d13aa,inset 0 -2px #1c121a; }
.return-summary-dialog { border:0; padding:0; width:min(90vw,620px); max-width:620px; background:transparent; color:#24151d; }
.return-summary-dialog::backdrop { background:#110d13c4; }
.return-summary { border:3px double #65404d; background:#f3d8b6; padding:11px; margin:0; max-height:72vh; overflow:auto; box-shadow:0 20px 70px #000a; }
.return-summary h2 { margin:0; }
.return-summary-head { position:sticky; top:-11px; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-11px -11px 10px; padding:11px; background:#f3d8b6; border-bottom:1px dashed #8e7374; }
.item { padding:.65rem 0; border-bottom:1px dashed #8e7374; }
.item:last-child { border-bottom:0; }
.chapters { margin:.2rem 0 .65rem; padding-left:1.25rem; font-size:.8rem; color:#51323f; }
.status { min-height:1.25em; }
.tiny { padding:.35rem .5rem; font-size:.7rem; }
.divider { text-align:center; margin:1rem 0; font-weight:700; }
.gate-screen { max-width:600px; margin:auto; }
@media (max-width:650px) {
  body { padding:0; place-items:stretch; }
  .machine { border-radius:0; min-height:100vh; width:100%; border-width:4px; }
  .screen { max-height:none; min-height:calc(100vh - 175px); }
  .panel-row { grid-template-columns:1fr; }
  .tabs { grid-template-columns:repeat(2,1fr); }
  .room-view { display:flex; flex-direction:column; align-items:center; }
  .overheard-bubble { position:relative; left:auto; top:auto; width:min(100%,320px); min-width:0; margin:10px auto 0; }
  .overheard-bubble::before { left:calc(50% - 8px); top:-10px; border-left:3px solid #51323f; border-top:3px solid #51323f; border-bottom:0; }
  .machine-foot { align-items:flex-start; flex-direction:column; }
  .machine-foot-actions { margin-left:0; justify-content:flex-start; width:100%; }
}