:root {
    font-family: Inter, Segoe UI, sans-serif;
    color: #243b38;
    background: #eeeee8;
  }

  * { box-sizing: border-box; }

  body { margin: 0; }
  
  button {
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #334a45;
    padding: 10px 14px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
  }
  button:hover { background: #e4eae2; }
  
  a { color: inherit; }

  dialog {
    border: 1px solid #a8b3a7;
    border-radius: 18px;
    padding: 0;
    width: min(760px, 92vw);
    max-height: 85dvh;
    background: #faf9f3;
    color: #243b38;
    box-shadow: 0 30px 100px #1116;
  }
  dialog::backdrop {
    background: #16291fb3;
    backdrop-filter: blur(5px);
  }
  
  [hidden] { display: none !important; }
  
  dialog {
    width: min(920px, 94vw);
    max-height: 90dvh;
  }

  /* Keyboard focus ring (accessibility). */
body :is(button, a, input, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-accent) !important;
    outline-offset: 2px !important;
  }

/* Window title bars. */
.windowbar{display:flex;align-items:center;justify-content:space-between;padding:15px 22px;background:#e4e8df}
.windowbar h2{font-size:15px;margin:0}
.windowbar button{background:#fff9}
.windowbar{padding:9px 14px}
@media(max-width:600px){
  .windowbar button{padding:8px;font-size:10px}
}

/* Drafting-paper theme, shared by every page (the room's settings.js sets the same values at runtime). */
:root{--paper-center:#f5f1e8;--paper-edge:#ded7ca;--drawing-ink:#655e52;--drawing-rule:#aaa091;--drawing-serif:Georgia,'Times New Roman',serif;color:var(--drawing-ink)}
body{background:radial-gradient(ellipse at 48% 43%,var(--paper-center) 0%,var(--paper-center) 20%,var(--paper-edge) 100%)}