/* The site's one stylesheet.
 *
 * Lifted out of landing.html when a second front door was added, because the
 * alternative was a second copy of eighteen kilobytes of tokens — and a copied
 * palette does not stay a copy. It drifts, silently, and the first symptom is
 * one page in last month's colours.
 *
 * Same-origin and tiny after compression, so the extra request costs a
 * fraction of what it buys. Nothing here is fetched from outside: no web
 * fonts, no CDN. fonts.googleapis.com does not answer in the mainland, and a
 * page that waits on it is a page that does not load.
 */
  /* No web fonts. fonts.googleapis.com does not answer in the mainland, and a
     page that waits on it is a page that does not load. */
  :root{
    --paper:#EEF0F4; --raise:#F7F8FB; --card:#FCFCFD; --ink:#151B28; --ink-2:#4E5968;
    --muted:#8A939F; --line:#E3E6EC; --hair:#EAECF1;
    --accent:#3F68D8; --accent-ink:#FFFFFF; --accent-soft:#E8ECF7;
    --t1:#3F68D8; --t2:#2A9D63; --t3:#D99038; --t4:#7268C4; --t5:#D4485C; --t6:#2F8C9E;
    --serif:Georgia,"Songti SC","Noto Serif CJK SC",'Times New Roman',serif;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
      "Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
    --shadow:0 1px 2px rgba(21,27,40,.05),0 10px 30px rgba(21,27,40,.08);
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --paper:#0B0E15; --raise:#141924; --card:#1B212D; --ink:#E9EDF5; --ink-2:#A3B0C4;
      --muted:#6F7D92; --line:#232B39; --hair:#1E2531;
      --accent:#5C8DFF; --accent-ink:#0B0E15; --accent-soft:#18233D;
      --t1:#5C8DFF; --t2:#4EBE88; --t3:#E4A65A; --t4:#9187E0; --t5:#F0687C; --t6:#4FA9BC;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.32);
    }
  }
  :root[data-theme="dark"]{
    --paper:#0B0E15; --raise:#141924; --card:#1B212D; --ink:#E9EDF5; --ink-2:#A3B0C4;
    --muted:#6F7D92; --line:#232B39; --hair:#1E2531;
    --accent:#5C8DFF; --accent-ink:#0B0E15; --accent-soft:#18233D;
    --t1:#5C8DFF; --t2:#4EBE88; --t3:#E4A65A; --t4:#9187E0; --t5:#F0687C; --t6:#4FA9BC;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.32);
  }
  /* WHAT MOVES WHEN THE LANGUAGE DOES — the half of a translation that is not
     words. Georgia has no Chinese glyphs and falls back per character
     mid-sentence; CJK wants more room between lines and none between
     characters; and Chinese has no case, so a tracked-out uppercase label
     reads as broken rather than as a label. */
  :root[data-lang="zh"]{
    --serif:"Songti SC","Noto Serif CJK SC","Source Han Serif SC","STSong",Georgia,serif;
    --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
      "Microsoft YaHei","Noto Sans SC","Segoe UI",sans-serif;
  }
  :root[data-lang="zh"] body{line-height:1.8}
  :root[data-lang="zh"] .kicker,
  :root[data-lang="zh"] .eyebrow span,
  :root[data-lang="zh"] .rule h4{text-transform:none;letter-spacing:.02em}
  :root[data-lang="zh"] h1{letter-spacing:0;line-height:1.28;max-width:16ch}
  :root[data-lang="zh"] .thing .n{letter-spacing:0}

  /* display:flex and display:grid both outrank the user agent's [hidden] rule. */
  [hidden]{display:none!important}

  *{box-sizing:border-box}
  /* THE WHOLE APP, ONE SIZE UP.
     Everything here is set in rem, so the root is the one dial: 17px instead
     of the browser's 16 puts about six per cent on every size, every gap and
     every tap target at once, which is what "it is all a bit small" actually
     asks for. Not a per-element pass — that is how a page ends up with three
     sizes of the same thing. */
  html{font-size:17px;-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
    font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased}
  a{color:inherit}
  button{font:inherit;cursor:pointer}
  img{max-width:100%}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
  .wrap{max-width:62rem;margin:0 auto;padding:0 1.25rem}
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

  /* ---- masthead ---------------------------------------------------------- */
  .top{border-bottom:1px solid var(--hair);background:var(--paper)}
  .top .wrap{display:flex;align-items:center;gap:1rem;padding-top:.85rem;padding-bottom:.85rem}
  .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
  /* The mark, at the proportions it is drawn at everywhere else: 0.52 of the
     diameter, sans, greyscale antialiasing. See the note in index.html. */
  .brand i{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--accent);
    color:var(--accent-ink);display:grid;place-items:center;font-family:var(--sans);
    font-weight:500;font-size:1.14rem;font-style:normal;flex:0 0 auto;
    -webkit-font-smoothing:antialiased}
  .brand b{font-family:var(--serif);font-weight:400;font-size:1.18rem;line-height:1.1}
  .brand small{display:block;font-family:var(--sans);font-size:.64rem;letter-spacing:.15em;
    text-transform:uppercase;color:var(--muted);line-height:1.4}
  .top .go{margin-left:auto;border:0;border-radius:99px;background:var(--accent);
    color:var(--accent-ink);padding:.55rem 1.2rem;font-size:.92rem;text-decoration:none;
    display:inline-block;white-space:nowrap}

  /* ---- hero -------------------------------------------------------------- */
  .hero{padding:3.4rem 0 2.6rem}
  @media (max-width:700px){ .hero{padding:2.2rem 0 1.8rem} }
  /* A label the way Co-Star sets one: tiny, tracked hard, with an underscore
     where a space would be. Borrowed because it is a cheap piece of texture
     that costs no colour and no image — and dropped entirely in Chinese,
     where tracked-out characters read as broken rather than as a label. */
  .kicker{display:flex;align-items:center;gap:.5rem;font-size:.7rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--muted);margin:0 0 1.6rem;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  :root[data-lang="zh"] .kicker{font-family:var(--sans);letter-spacing:.04em;
    text-transform:none;font-size:.76rem}
  .kicker i{width:.45rem;height:.45rem;border-radius:50%;background:var(--accent);flex:0 0 auto}
  h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(2.15rem,5.4vw,3.5rem);
    line-height:1.08;letter-spacing:-.02em;max-width:20ch}
  h1 em{font-style:normal;color:var(--accent)}
  .lede{margin:1.15rem 0 0;font-size:1.1rem;line-height:1.65;color:var(--ink-2);max-width:36rem}
  .hanzi{margin:.85rem 0 0;font-family:var(--serif);font-size:1.02rem;color:var(--muted)}
  .hanzi b{color:var(--ink-2);font-weight:400}
  .cta{display:flex;flex-wrap:wrap;gap:.65rem;margin:1.7rem 0 0}
  .btn{border:0;border-radius:99px;padding:.8rem 1.55rem;font-size:1rem;background:var(--accent);
    color:var(--accent-ink);text-decoration:none;display:inline-block}
  .btn.ghost{background:var(--raise);color:var(--ink);border:1px solid var(--line)}
  .under{margin:.95rem 0 0;font-size:.85rem;color:var(--muted)}

  .lang{border:1px solid var(--line);background:var(--raise);color:var(--ink-2);
    border-radius:99px;padding:.45rem 1rem;font-size:.85rem;line-height:1;
    white-space:nowrap}
  .lang:hover{color:var(--ink);border-color:var(--muted)}

  /* The one moving thing on the page. Real questions people arrive with,
     cycling — because the fastest way to say what a board is for is to show
     somebody asking. It holds a fixed height so nothing below it jumps, and
     it stops entirely for anyone who asked for less motion. */
  /* THE QUESTION IS THE HERO.
     The single thing worth taking from Co-Star: their landing page is a
     sentence, at size, with nothing propping it up. Ours has something better
     than a sentence somebody wrote — a question somebody actually has. It was
     in a bordered box under the headline, which is where you put a thing you
     are not sure about. */
  .asking{margin:0 0 1.4rem}
  /* NO RESERVED HEIGHT. This held 2.4 lines so that a rotating question could
     change length without the page below it jumping. The question does not
     rotate any more — it is one line about one room — so the reservation is
     just a hole under the headline, and it was the first thing anybody saw. */
  .asking q{display:block;font-family:var(--serif);quotes:none;
    font-size:clamp(2rem,5.2vw,3.4rem);line-height:1.14;letter-spacing:-.02em;
    max-width:19ch;transition:opacity .4s ease}
  :root[data-lang="zh"] .asking q{line-height:1.35;letter-spacing:0;max-width:15ch;
    font-size:clamp(1.75rem,4.6vw,2.9rem)}
  .asking q.fade{opacity:0}
  .asking .under{margin:.7rem 0 0;font-size:1.02rem;color:var(--ink-2)}
  @media (prefers-reduced-motion:reduce){ .asking q{transition:none} }

  /* ---- what is actually on it, live -------------------------------------- */
  .band{background:var(--raise);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  section{padding:3rem 0}
  .eyebrow{display:flex;align-items:center;gap:.9rem;margin:0 0 1.5rem}
  .eyebrow span{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
    white-space:nowrap}
  .eyebrow i{flex:1;height:1px;background:var(--line)}
  h2{margin:0 0 .55rem;font-family:var(--serif);font-weight:400;
    font-size:clamp(1.6rem,3.2vw,2.15rem);line-height:1.18}
  .sub{margin:0 0 1.8rem;color:var(--ink-2);max-width:38rem;font-size:1rem}

  .live{display:grid;gap:.85rem;grid-template-columns:repeat(2,1fr)}
  @media (max-width:720px){ .live{grid-template-columns:1fr} }
  .post{background:var(--card);border:1px solid var(--line);border-radius:.85rem;
    padding:1.05rem 1.1rem;display:flex;gap:.8rem;align-items:flex-start;
    text-decoration:none;color:inherit}
  .post .av{width:2.6rem;height:2.6rem;border-radius:50%;flex:0 0 auto;background:var(--accent);
    color:var(--accent-ink);display:grid;place-items:center;font-family:var(--serif);
    font-size:1.05rem;line-height:1;overflow:hidden}
  .post .av img{width:100%;height:100%;object-fit:cover;display:block}
  .post .m{flex:1;min-width:0}
  .post .eb{display:flex;align-items:center;gap:.4rem;margin:0 0 .2rem}
  .post .eb i{width:.4rem;height:.4rem;border-radius:50%;flex:0 0 auto}
  .post .eb span{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
  .post .who{display:flex;align-items:baseline;gap:.5rem}
  .post .who b{font-family:var(--serif);font-weight:400;font-size:1.02rem;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .post .who time{margin-left:auto;color:var(--muted);font-size:.82rem;flex:0 0 auto}
  .post p{margin:.3rem 0 0;font-family:var(--serif);font-size:1rem;line-height:1.5;
    color:var(--ink-2);overflow-wrap:anywhere}
  .empty{background:var(--card);border:1px dashed var(--line);border-radius:.85rem;
    padding:2.2rem 1.2rem;text-align:center}
  .empty b{display:block;font-family:var(--serif);font-weight:400;font-size:1.25rem;
    margin:0 0 .35rem}
  .empty p{margin:0 auto;max-width:26rem;font-size:.95rem;line-height:1.6;color:var(--ink-2)}
  .more{margin:1.4rem 0 0;text-align:center}

  /* The two-column list, taken as a shape from Co-Star's do/don't. It works
     because the pairing does the explaining: neither column means much alone,
     and together each line is a whole piece of advice in four words. */
  .dd{border-top:1px solid var(--line)}
  .ddhead{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding:.9rem 0 .5rem}
  .ddhead span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .ddhead span:last-child{color:var(--t5)}
  :root[data-lang="zh"] .ddhead span{font-family:var(--sans);letter-spacing:.04em;
    text-transform:none;font-size:.78rem}
  .ddrow{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;
    padding:.85rem 0;border-top:1px solid var(--hair)}
  .ddrow p{margin:0;font-family:var(--serif);font-size:1.06rem;line-height:1.4}
  .ddrow p:last-child{color:var(--muted);text-decoration:line-through;
    text-decoration-color:var(--t5);text-decoration-thickness:1px}
  @media (max-width:560px){
    .ddhead,.ddrow{gap:.9rem}
    .ddrow p{font-size:.98rem}
  }

  /* ---- the three things --------------------------------------------------- */
  .three{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
  @media (max-width:820px){ .three{grid-template-columns:1fr} }
  .thing{background:var(--card);border:1px solid var(--line);border-radius:.9rem;
    padding:1.4rem 1.35rem}
  .thing .n{font-family:var(--serif);font-size:.88rem;color:var(--accent);letter-spacing:.06em}
  .thing h3{margin:.4rem 0 .4rem;font-family:var(--serif);font-weight:400;font-size:1.3rem;
    line-height:1.2}
  .thing p{margin:0;color:var(--ink-2);font-size:.94rem;line-height:1.6}
  .thing .say{margin:.85rem 0 0;padding-top:.8rem;border-top:1px solid var(--hair);
    font-family:var(--serif);font-size:.94rem;color:var(--muted)}

  /* ---- how it is run ------------------------------------------------------ */
  .rules{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr)}
  @media (max-width:760px){ .rules{grid-template-columns:1fr} }
  .rule{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);
    border-radius:.7rem;padding:1.05rem 1.15rem}
  .rule.warn{border-left-color:var(--t3)}
  .rule h4{margin:0 0 .3rem;font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;
    color:var(--accent)}
  .rule.warn h4{color:var(--t3)}
  .rule p{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-2)}

  /* ---- the three screens, drawn -------------------------------------------
     A phone is a rounded box with a bezel; what is inside is the real
     interface at a quarter size, built from the same tokens as the app. No
     image files: nothing to fetch over a slow connection, nothing to go stale
     when the UI moves, and the words inside change language with the page. */
  /* The strip that says this is not open yet. Quiet, full width, above the
     hero — it is a status, not an announcement, and it is what somebody who
     followed a link here should read before they judge how quiet it is. */
  .invite{margin:0;padding:.55rem 1.15rem;background:var(--accent-soft);
    color:var(--accent);font-size:.8rem;letter-spacing:.02em;text-align:center}

  .shots{display:grid;gap:2.2rem;grid-template-columns:repeat(3,1fr);
    margin:2.4rem 0 0;align-items:start}
  @media (max-width:820px){ .shots{grid-template-columns:1fr;gap:2.8rem;
    max-width:22rem;margin-left:auto;margin-right:auto} }
  .shot{display:flex;flex-direction:column;align-items:center;text-align:center}
  .phone{width:100%;max-width:15.5rem;aspect-ratio:9/13;background:var(--card);
    border:1px solid var(--line);border-radius:1.5rem;box-shadow:var(--shadow);
    overflow:hidden;display:flex;flex-direction:column;position:relative}
  /* The notch. One grey pill — enough to read as a phone, and nothing that
     imitates a particular manufacturer's hardware. */
  .phone::before{content:"";position:absolute;top:.45rem;left:50%;
    transform:translateX(-50%);width:2.6rem;height:.28rem;border-radius:99px;
    background:var(--line)}
  .ph-top{padding:1.15rem .7rem .45rem;border-bottom:1px solid var(--hair);
    display:flex;align-items:center;gap:.35rem}
  .ph-top b{font-family:var(--serif);font-weight:400;font-size:.8rem;color:var(--ink)}
  .ph-top i{margin-left:auto;width:1.1rem;height:.42rem;border-radius:99px;
    background:var(--accent-soft)}
  .ph-body{flex:1;overflow:hidden;padding:.5rem .55rem;display:flex;
    flex-direction:column;gap:.42rem;text-align:left}
  .ph-card{background:var(--raise);border:1px solid var(--hair);border-radius:.5rem;
    padding:.42rem .5rem}
  .ph-card p{margin:0;font-size:.58rem;line-height:1.45;color:var(--ink)}
  .ph-card span{display:block;margin-top:.22rem;font-size:.48rem;color:var(--muted)}
  /* The bar at the bottom of the real app: feed, a big +, profile. */
  .ph-bar{border-top:1px solid var(--hair);padding:.35rem 0 .45rem;
    display:flex;align-items:center;justify-content:space-around}
  .ph-bar u{width:.75rem;height:.62rem;border-radius:.12rem;background:var(--line);
    display:block}
  .ph-bar em{width:1.35rem;height:1.35rem;border-radius:50%;background:var(--accent);
    display:grid;place-items:center;color:var(--accent-ink);font-style:normal;
    font-size:.8rem;line-height:1}
  /* The profile screen: a cover, a round face over it, then facts. */
  .ph-cover{height:2.5rem;background:linear-gradient(135deg,var(--accent),var(--t6))}
  .ph-face{width:2.4rem;height:2.4rem;border-radius:50%;background:var(--raise);
    border:2px solid var(--card);margin:-1.2rem auto 0;display:grid;
    place-items:center;font-family:var(--serif);color:var(--accent);font-size:1rem}
  .ph-name{margin:.3rem 0 0;text-align:center;font-family:var(--serif);
    font-size:.68rem;color:var(--ink)}
  .ph-facts{margin:.12rem 0 0;text-align:center;font-size:.5rem;color:var(--muted)}
  .ph-bio{margin:.4rem .55rem 0;text-align:center;font-size:.55rem;line-height:1.5;
    color:var(--ink-2)}
  /* The directory: a row per person, with the days they are free. */
  /* The deck, drawn small. One card filling the phone, the words on a scrim
     over it, and the two ways on underneath — which is the whole screen. */
  .ph-deck{flex:1;min-height:0;padding:.5rem .55rem;display:flex}
  .ph-pc{flex:1;position:relative;border-radius:.55rem;overflow:hidden;
    background:linear-gradient(160deg,var(--accent),var(--t6));
    display:flex;align-items:flex-end}
  .ph-init{position:absolute;inset:0;display:grid;place-items:center;line-height:1;
    font-family:var(--serif);font-size:2.8rem;color:rgba(255,255,255,.45)}
  /* The column is centred for its caption; a person's own words are not. */
  .ph-scrim{position:relative;width:100%;text-align:left;padding:1.1rem .5rem .45rem;
    background:linear-gradient(to top,rgba(10,14,22,.86),rgba(10,14,22,0))}
  .ph-pn{margin:0;font-family:var(--serif);font-size:.72rem;color:#fff}
  .ph-pw{margin:.08rem 0 0;font-size:.46rem;color:rgba(255,255,255,.8)}
  .ph-pg{margin:.2rem 0 0;font-size:.5rem;line-height:1.4;color:rgba(255,255,255,.9)}
  .ph-acts{display:flex;gap:.3rem;padding:0 .55rem .5rem}
  .ph-acts b,.ph-acts u{flex:1;text-align:center;font-weight:400;text-decoration:none;
    font-size:.5rem;padding:.32rem 0;border-radius:99px}
  .ph-acts b{background:var(--accent);color:var(--accent-ink)}
  .ph-acts u{background:var(--raise);border:1px solid var(--hair);color:var(--ink-2)}

  .ph-row{display:flex;align-items:center;gap:.4rem}
  .ph-row b{width:1.15rem;height:1.15rem;border-radius:50%;background:var(--accent-soft);
    color:var(--accent);display:grid;place-items:center;font-family:var(--serif);
    font-weight:400;font-size:.55rem;flex:0 0 auto}
  .ph-row div{min-width:0}
  .ph-row p{margin:0;font-size:.58rem;color:var(--ink);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .ph-row span{display:block;font-size:.48rem;color:var(--muted)}
  .shot b.cap{display:block;margin:1rem 0 .15rem;font-family:var(--serif);
    font-weight:400;font-size:1.02rem;color:var(--ink)}
  .shot p.cap{margin:0;font-size:.86rem;line-height:1.5;color:var(--muted);
    max-width:17rem}

  footer{border-top:1px solid var(--hair);padding:2.4rem 0 3rem;color:var(--muted);
    font-size:.85rem;line-height:1.7}
  footer .wrap{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:space-between}
  footer b{display:block;font-family:var(--serif);font-weight:400;color:var(--ink);
    font-size:1rem;margin:0 0 .3rem}
  footer .col{max-width:32rem}
  /* block, not inline-block: the spans before it are inline, so an
     inline-block link carried on at the end of the paragraph instead of
     starting its own line. width:max-content keeps the underline the width of
     the word rather than the column. */
  footer .adminlink{display:block;width:max-content;margin-top:1.1rem;
    font-size:.82rem;color:var(--muted);text-decoration:none;
    border-bottom:1px solid var(--hair);padding-bottom:.15rem}
  footer .adminlink:hover{color:var(--ink)}

  /* ---- the waiting list, on the public page ---------------------------------
   * The one thing a stranger can DO on this site; everything above it is
   * reading. Boxed and centred so it reads as the end of the argument. */
  /* THE FEED, OUT OF FOCUS. Grey blocks where the words are — see feedPeek in
     wait.js for why the words are not here at all. Fades out at the bottom so
     it reads as something continuing rather than a list that stopped. */
  .peek{margin:1.6rem 0 0}
  .peekhead{display:block;margin:0 0 .7rem;font-size:.72rem;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .peekstack{position:relative;filter:blur(3.5px);opacity:.75;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
    pointer-events:none;user-select:none}
  .peekpost{display:flex;gap:.7rem;padding:.75rem 0;align-items:flex-start}
  .peekav{flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:50%;
    background:var(--accent);opacity:.55}
  .peekwords{display:flex;flex-wrap:wrap;gap:.34rem .3rem;padding-top:.35rem}
  .peekwords b{display:block;height:.62rem;border-radius:.31rem;background:var(--ink);
    opacity:.16}
  @media (prefers-reduced-motion:reduce){.peekstack{filter:blur(3.5px)}}
  .waitbox{max-width:34rem;margin:2.4rem auto 0;padding:1.4rem 1.3rem 1.5rem;
    background:var(--card);border:1px solid var(--line);border-radius:1.2rem;
    text-align:left;box-shadow:var(--shadow)}
  /* WHICH ROOM. Four chips in a row that wraps to two — small enough that the
     question does not become the form. */
  .waitbox .waitask{margin:0 0 .55rem;font-size:.9rem;color:var(--ink-2)}
  /* Who sent them. Set above the form, in the accent, because it is the
     reason they are looking at this box at all. */
  .waitbox .waitfrom{margin:.9rem 0 0;font-size:.95rem;color:var(--accent);
    font-weight:500}
  .waitbox .waitrooms{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .3rem}
  .waitbox .waitrm{padding:.5rem .85rem;border:1px solid var(--line);border-radius:99px;
    background:var(--raise);color:var(--ink-2);font-size:.92rem}
  .waitbox .waitrm.on{background:var(--accent);border-color:var(--accent);
    color:var(--accent-ink)}
  .waitbox form{display:flex;flex-direction:column;gap:.6rem;margin:1.1rem 0 0}
  .waitbox input,.waitbox textarea{width:100%;padding:.75rem .9rem;font:inherit;
    font-size:1rem;border:1px solid var(--line);border-radius:.7rem;
    background:var(--paper);color:var(--ink);resize:vertical}
  .waitbox input:focus,.waitbox textarea:focus{outline:2px solid var(--accent);
    outline-offset:1px;border-color:var(--accent)}
  /* The button that opens the form. Sits directly under the count with room
     around it — collapsed, this and the number are the whole box. */
  /* INVITE ONLY, then the figure. The eyebrow is small and wide-tracked so it
     reads as a stamp rather than a heading; the number is the largest thing in
     the box because it is the only evidence on the page that anybody else
     wants in. */
  .waiteyebrow{display:block;margin:0 0 .5rem;font-size:.72rem;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
  :root[data-lang="zh"] .waiteyebrow{letter-spacing:.08em;font-size:.78rem}
  .waitcount{display:flex;gap:.7rem;align-items:baseline;margin:.9rem 0 0}
  .waitcount b{font-family:var(--serif);font-weight:400;font-size:3.2rem;
    line-height:.9;color:var(--accent);font-variant-numeric:tabular-nums}
  .waitcount span{font-size:.95rem;line-height:1.35;color:var(--ink-2);
    white-space:pre-line}
  .waitbox .btn{margin:.2rem 0 0}
  .waitbox .said{margin:.8rem 0 0;font-size:.92rem;color:var(--accent)}
  .waitbox .said.bad{color:var(--t5)}
  .waitnote{margin:1rem 0 0;font-size:.8rem;line-height:1.55;color:var(--muted)}