@font-face { font-family: 'Unbounded'; src: url(/fonts/Unbounded-latin.woff2) format('woff2'); font-weight: 200 900; font-display: swap; }
  @font-face { font-family: 'Plex'; src: url(/fonts/IBMPlexMono-Regular-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }
  @font-face { font-family: 'Plex'; src: url(/fonts/IBMPlexMono-Medium-latin.woff2) format('woff2'); font-weight: 500; font-display: swap; }
  :root {
    --ink: #0B1817;
    --lilac: #E6F2EE;
    --lime: #A6D9CE;
    --dim: rgba(230, 242, 238, .62);
    --glass: rgba(12, 11, 15, .58);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--ink); color: var(--lilac); }
  body { font: 13px/1.4 'Plex', ui-monospace, monospace; min-height: 100svh; display: flex; flex-direction: column; }
  a { color: inherit; }

  
  .stage { position: relative; width: 100%; height: min(100svh, calc(100vw * 1.745)); min-height: 360px; overflow: hidden; }
  canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .ui { position: absolute; inset: 0; pointer-events: none; padding: 16px; }
  .ui a, .ui button, .ui .chip { pointer-events: auto; }

  .top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; }
  .mark { justify-self: start; font: 600 15px/1 'Unbounded', sans-serif; letter-spacing: -.01em; text-decoration: none; background: var(--glass); padding: 9px 12px; border-radius: 999px; }
  .mark b { color: var(--lime); font-weight: 600; }
  .state { justify-self: end; background: var(--glass); padding: 8px 12px; border-radius: 999px; color: var(--dim); white-space: nowrap; }
  .state i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); margin-right: 7px; vertical-align: 1px; }
  .state.on i { background: var(--lime); box-shadow: 0 0 0 3px rgba(255, 212, 59, .18); }

  .scenes { display: flex; gap: 2px; background: var(--glass); padding: 3px; border-radius: 999px; }
  .scenes button { font: 500 12px/1 'Plex', monospace; border: 0; background: none; color: var(--dim); padding: 8px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
  .scenes button[aria-pressed="true"] { background: var(--lilac); color: var(--ink); }

  
  
  .bubble { position: absolute; left: 0; top: 0; width: max-content; max-width: min(calc(100% - 32px), 420px); background: var(--lilac); color: var(--ink); font-weight: 500; padding: 10px 14px; border-radius: 16px; text-align: center; pointer-events: auto; visibility: hidden; --tail: 50%; }
  .bubble::after { content: ''; position: absolute; left: var(--tail); bottom: -7px; width: 14px; height: 14px; background: var(--lilac); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
  .bubble a { display: inline-block; margin-left: 6px; color: var(--ink); font-weight: 500; }

  .acts { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: flex; gap: 6px; pointer-events: auto; visibility: hidden; }
  .btn { font: 600 14px/1 'Unbounded', sans-serif; border: 0; border-radius: 999px; padding: 13px 18px; cursor: pointer; color: var(--ink); background: var(--lilac); white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.35); transition: transform .08s; }
  .mini:active { transform: scale(.95); }
  .btn.hire:active { transform: translateX(-50%) scale(.95); }
  
  .btn.hire { position: absolute; left: 0; top: 0; transform: translateX(-50%); background: var(--lime); text-decoration: none; font-size: 15px; padding: 14px 24px; pointer-events: auto; visibility: hidden; }
  .acts .mini { font: 500 12px/1 'Plex', monospace; min-height: 36px; border: 1px solid rgba(230,242,238,.28); border-radius: 999px; padding: 0 12px; cursor: pointer; color: var(--lilac); background: var(--glass); white-space: nowrap; transition: transform .08s; }
  .acts .mini.feed { border-color: rgba(255, 212, 59,.45); }

  footer { padding: 28px 16px 22px; color: var(--dim); border-top: 1px solid rgba(230,242,238,.1); }
  .cols { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 18px 56px; }
  .cols div { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
  .cols h3 { margin: 0 0 3px; font: 500 11px/1 'Plex', monospace; letter-spacing: .06em; text-transform: uppercase; color: rgba(230,242,238,.4); }
  .cols a, .copy { color: var(--lilac); text-decoration: none; font: 13px/1.35 'Plex', monospace; }
  .cols a:hover, .copy:hover { color: var(--lime); }
  .copy { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
  .copy span { color: var(--dim); }
  .fine { margin: 24px 0 0; text-align: center; font-size: 11px; color: rgba(230,242,238,.4); }
  @media (max-width: 760px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; justify-content: stretch; } }


  @media (max-width: 760px) {
    .top { grid-template-columns: 1fr auto; }
    .top .scenes { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
    .mark { font-size: 13px; }
    .state { font-size: 11px; padding: 7px 10px; }
    .scenes button { padding: 8px 6px; font-size: 11px; }
    .btn.hire { font-size: 14px; padding: 13px 20px; }
    .acts .mini { font-size: 11px; padding: 0 9px; }
  }


.bubble,[data-token-copy]{overflow-wrap:anywhere;max-width:100%}
.bsc-toolbar{position:fixed;right:16px;bottom:16px;z-index:100;display:flex;align-items:center;gap:10px;padding:7px 9px 7px 14px;border:1px solid #e6f2ee44;border-radius:24px;background:#0b1817ee;color:#e6f2ee;font:12px monospace}.bsc-toolbar button{background:#A6D9CE;color:#0b1817;border:0;border-radius:20px;padding:11px 14px;cursor:pointer;font:600 12px monospace}.bsc-page{max-width:920px;margin:40px auto 80px;padding:24px;color:#e6f2ee;font:15px/1.8 'Plex',monospace}.bsc-page h1,.bsc-page h2{font-family:'Unbounded',sans-serif;line-height:1.3}.bsc-page h1{font-size:clamp(28px,6vw,48px)}.bsc-page section{padding:24px;margin:20px 0;border:1px solid #e6f2ee33;border-radius:18px;background:#18131e}.bsc-page a{color:#A6D9CE}.bsc-page code{overflow-wrap:anywhere}.bsc-page .label{color:#A6D9CE;font-size:12px;text-transform:uppercase;letter-spacing:2px}.bsc-disabled{opacity:.65;cursor:default!important}body{padding-bottom:64px}

:root{--mint:#a6d9ce;--paper:#e6f2ee}html{scroll-behavior:smooth}button,input,select,textarea{font:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #a6d9ce;outline-offset:3px}button{cursor:pointer}[hidden]{display:none!important}.stage canvas{filter:hue-rotate(21deg) saturate(.8)}.mark{letter-spacing:.09em}.state{color:var(--paper)}.bsc-toolbar{background:#0b1817f5}.bsc-toolbar button{background:var(--mint)}.bsc-toolbar span{max-width:150px}.room-sign{position:absolute;display:grid;place-items:center;background:#25394d;color:#a6d9ce;border:2px solid #a6d9ce;border-radius:4px;font:600 13px 'Unbounded';letter-spacing:.07em;transform:rotate(-2deg);box-shadow:0 0 18px #a6d9c655;pointer-events:none}.bsc-page{width:100%;max-width:1050px;color:var(--paper)}.bsc-page section{background:#132321;border-color:#a6d9ce30}.bsc-page .label,.bsc-page a{color:var(--mint)}.page-nav{display:flex;flex-wrap:wrap;align-items:center;gap:15px;margin-bottom:35px}.page-nav a{text-decoration:none;font-size:12px}.page-nav a:first-child{font:600 16px 'Unbounded';letter-spacing:.08em;margin-right:auto}.lede{max-width:680px;color:#b1c7c0;font-size:16px}.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}.field{display:flex;flex-direction:column;gap:6px;margin:15px 0}.field label,.small{font-size:12px;color:#b1c7c0}input,textarea,select{width:100%;color:#e6f2ee;background:#0b1817;border:1px solid #a6d9ce50;border-radius:9px;padding:12px;min-width:0}textarea{resize:vertical;min-height:120px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.action{background:var(--mint);color:#0b1817;border:1px solid var(--mint);border-radius:99px;padding:11px 17px;text-decoration:none;font-weight:600}.action.secondary{background:transparent;color:var(--paper)}.task{padding:18px 0;border-bottom:1px solid #a6d9ce30}.task h3{margin:6px 0;overflow-wrap:anywhere;font-family:'Unbounded';font-size:16px}.task p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}.task.done h3{text-decoration:line-through;color:#9ab7ae}.tag{font-size:11px;border:1px solid #a6d9ce40;padding:4px 7px;border-radius:99px;color:#b1c7c0}.empty{padding:30px 0;color:#9ab7ae}.task button,.guide-card button{border:1px solid #a6d9ce50;border-radius:50px;background:none;color:#e6f2ee;padding:6px 10px;margin:5px 5px 0 0}.guide-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.guide-card{padding:24px;border:1px solid #a6d9ce30;border-radius:15px;background:#132321}.guide-card h2{font-size:21px;margin:10px 0}.guide-card p{font-size:14px;color:#b1c7c0}.guide-card a{display:inline-block;margin-top:12px}.status-message{min-height:24px;font-size:13px;color:var(--mint)}.reading{max-width:720px}.reading h2{font-size:25px;margin-top:36px}.reading p{color:#c0d4cd}.wallet-dialog{color:#e6f2ee;background:#132321;border:1px solid #a6d9ce;border-radius:20px;max-width:440px;width:calc(100% - 30px);padding:25px}.wallet-dialog::backdrop{background:#000b}.wallet-dialog button{display:block;margin-top:12px;padding:12px 16px;background:#a6d9ce;border:0;border-radius:12px;width:100%}.wallet-dialog .close{background:transparent;color:#e6f2ee;border:1px solid #a6d9ce55}.mood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.mood{aspect-ratio:4/3;border:1px solid #a6d9ce50;border-radius:16px;background:radial-gradient(circle at 45% 40%,var(--tone),#0b1817 75%);display:grid;place-items:center;font-size:38px;position:relative;overflow:hidden}.mood::before{content:'';width:70px;height:70px;border:2px solid #e6f2ee88;border-radius:17px;transform:rotate(45deg)}.mood span{position:absolute;bottom:16px;font:12px 'Plex';font-size:12px;letter-spacing:.1em}.mood button{position:absolute;inset:0;opacity:0;cursor:pointer}.room-help{position:absolute;left:18px;bottom:18px;max-width:210px;padding:10px 12px;background:#0b1817bb;border:1px solid #a6d9ce44;border-radius:10px;color:#e6f2ee;font-size:11px}.room-help a{color:#a6d9ce}.fine{color:#9ab7ae}.cols h3{color:#9ab7ae}.draft-counter{font-size:11px;color:#a6d9ce}.book-row{border-top:1px solid #a6d9ce30;padding:20px 0}.book-row a{font-family:'Unbounded';font-size:18px}.stage-fallback{position:absolute;inset:150px 20px auto;text-align:center;z-index:3;background:#132321;border-radius:15px;padding:20px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:760px){.top{grid-template-columns:1fr auto}.mark{font-size:12px}.state{font-size:10px;padding:8px}.ui{padding:12px}.scenes{max-width:100%;flex-wrap:wrap;justify-content:center}.scenes button{padding:8px 7px}.bsc-page{padding:19px;margin:18px auto 80px}.split,.guide-grid{grid-template-columns:1fr}.bsc-page section{padding:18px}.page-nav{gap:13px}.page-nav a:first-child{flex:0 0 100%}.mood-grid{grid-template-columns:1fr 1fr}.bsc-toolbar{right:10px;bottom:10px;left:10px;justify-content:space-between}.bsc-toolbar span{font-size:10px}.room-help{display:none}.cols{gap:26px 20px}.stage{height:min(100svh,calc(100vw * 1.745));min-height:580px}.acts{z-index:3}.room-sign{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation-duration:.01ms!important}}

.mark{display:flex;align-items:center}.nook-brand-avatar{height:38px;width:38px;object-fit:cover;border-radius:9px;margin-right:8px}.notebook-host{display:flex;align-items:center;gap:24px;max-width:650px;margin:10px 0 36px}.notebook-host img{width:128px;height:128px;object-fit:cover;border-radius:18px;border:2px solid #a6d9ce}.notebook-host p{line-height:1.65}.notebook-host .label{margin:0 0 9px}@media(max-width:600px){.nook-brand-avatar{width:30px;height:30px}.notebook-host{gap:16px}.notebook-host img{width:94px;height:94px}.notebook-host p{font-size:12px}}

.room-residents{position:absolute;top:84px;left:24px;font:10px IBM Plex Mono,monospace;padding:6px 9px;border-radius:20px;background:#0b211be6;color:#b8e5d8;z-index:5;pointer-events:none}@media(max-width:760px){.room-residents{top:112px;left:18px;font-size:9px}}

.notebook-host-story{display:grid;grid-template-columns:minmax(0,1fr);max-width:760px;gap:16px}.notebook-host-story img{width:100%;height:auto;max-width:760px;border-radius:15px}.notebook-host-story>div{max-width:640px}