/* One-bit chrome shared by the live room and its model notes. */
:root{color-scheme:light;--paper:#fff;--ink:#111;font-family:Monaco,"Lucida Console","Courier New",monospace;font-synthesis:none;font-size:12px;line-height:1.5}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink)}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid #111;outline-offset:4px}
::selection{background:#111;color:#fff}
svg{display:block}

.masthead{min-height:38px;padding:0 24px;display:flex;align-items:center;gap:28px;border-bottom:2px solid #111;background:#fff}
.brand{display:flex;align-items:center;gap:10px;padding:5px 0}
.brand svg{height:22px;width:22px;fill:#111}
.brand strong{font-size:17px;line-height:1;font-weight:900;letter-spacing:-1px}
.menu-links{display:flex;gap:23px;font-size:12px;font-weight:bold}
.menu-links a{padding:7px 0}
.masthead-right{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:10px}
.status-dot{display:block;width:8px;height:8px;flex:0 0 auto;background:#fff;border:1px solid #111}
.status-dot:after{content:"";display:block;width:4px;height:4px;margin:1px;background:#111;opacity:0}
body[data-live-phase=connected] .status-dot{background:#111}
body[data-live-phase=stale] .status-dot:after{opacity:1}

.live-main{width:100%;margin:0;padding:0}
.room{position:relative;width:100%;overflow:hidden;background:#fff}
.canvas-stage{position:relative;width:100%;aspect-ratio:1476/806;min-height:280px;overflow:hidden;background:#fff}
#room-canvas{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.scene-title{position:absolute;left:13px;top:12px;pointer-events:none;background:#fff;border:1px solid #111;padding:3px 7px}
.scene-title p{margin:0;font-size:11px;letter-spacing:.03em}
.loading{position:absolute;inset:0;display:grid;place-items:center;background:#fff;color:#111;padding:24px}
.loading[hidden]{display:none}
.loading span{padding:20px;border:2px solid #111;box-shadow:4px 4px 0 #111;background:#fff;text-align:center;font-size:12px;max-width:340px;line-height:1.7}
.live-error{font-size:12px;line-height:1.6;border:2px solid #111;background:#fff;padding:12px;margin:16px}

/* The separate model-notes page retains its document window. */
.essay-main{padding:34px 32px 12px;margin:0 auto}
.document-window{border:2px solid #111;background:#fff;box-shadow:5px 5px 0 #111}
.window-titlebar{display:flex;align-items:center;gap:8px;height:31px;padding:5px 7px;border-bottom:2px solid #111}
.title-stripes{height:17px;background:repeating-linear-gradient(to bottom,#111 0 1px,#fff 1px 3px);flex:1}
.window-box{width:13px;height:13px;border:1px solid #111;flex:0 0 auto;background:#fff}
.window-zoom{position:relative}
.window-zoom:after{content:"";position:absolute;left:1px;top:1px;width:7px;height:5px;border:1px solid #111}
.window-foot{min-height:22px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding-left:10px;border-top:1px solid #111;background:repeating-linear-gradient(0deg,#fff 0 2px,#dedede 2px 3px)}
.window-foot>span:first-child{font-size:8px;letter-spacing:.02em;background:#fff;padding:1px 4px}
.resize-grip{width:21px;height:21px;border-left:1px solid #111;background:repeating-linear-gradient(135deg,#fff 0 3px,#111 3px 4px);clip-path:polygon(100% 0,100% 100%,0 100%);flex:0 0 auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1000px){
  .masthead{gap:22px;padding:0 18px}
  .masthead-right{font-size:9px}
  .menu-links{font-size:11px;gap:18px}
  .essay-main{padding:26px 20px 10px}
}
@media(max-width:600px){
  .masthead{padding:0 12px;gap:18px;min-height:38px}
  .brand{gap:7px}
  .brand svg{width:20px;height:20px}
  .brand strong{font-size:16px}
  .menu-links{font-size:10px;gap:15px}
  .masthead-right #header-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .scene-title{left:9px;top:9px;padding:2px 5px}
  .scene-title p{font-size:9px}
  .loading{padding:20px}
  .loading span{font-size:10px;padding:15px}
  .essay-main{padding:19px 11px 10px}
  .document-window{box-shadow:3px 3px 0 #111}
  .window-titlebar{gap:6px;height:29px}
  .window-foot>span:first-child{font-size:7px}
}
@media(max-width:360px){
  .menu-links{gap:10px;font-size:9px}
  .masthead{gap:13px}
  .brand strong{font-size:15px}
}