body.page-join{background:var(--r);--soju:#3E7CB1;--mak:#D9822B;--line:#ddd2bb;--mute:#5f5a4f}
body.page-join .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body.page-join .codewrap{position:relative;display:block;margin:6px 0 10px}
body.page-join .codewrap .codeent{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0}
body.page-join .codefill{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;font-size:30px}
body.page-join .jw {max-width:520px;margin:0 auto;padding:16px 16px 32px}
body.page-join .evh {background:var(--g);color:#fff;padding:12px 16px;border-bottom:2px solid var(--ink)}
body.page-join .evh .in2 {max-width:520px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
body.page-join .evh b {display:block;font:900 19px/1.15 Fraunces,serif;color:#fff}
body.page-join .evh small {display:block;font:500 11px 'DM Mono',monospace;letter-spacing:.6px;color:#cfe3d6;margin-top:3px}
body.page-join .evh .tag {flex:none;font:600 10.5px 'DM Mono',monospace;letter-spacing:1px;background:var(--y);color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:3px 9px}
body.page-join .jh {margin:6px 0 14px}
body.page-join .jh h1 {font-size:28px}
body.page-join .jh p {color:#3d3a33;font-size:14.5px;margin-top:4px}
body.page-join .search {position:relative;margin-bottom:12px}
body.page-join .search .in {padding-left:42px}
body.page-join .search:before {content:"⌕";position:absolute;left:15px;top:50%;transform:translateY(-52%);font-size:20px;color:var(--mute)}
body.page-join .names {display:grid;gap:8px}
body.page-join .nm {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;width:100%;text-align:left;padding:12px 14px;border:2px solid var(--ink);border-radius:14px;background:#fffdf7;box-shadow:3px 3px 0 var(--g)}
body.page-join .nm b {font-size:17px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.page-join .nm small {grid-column:1;display:flex;align-items:center;gap:6px;font:500 11.5px 'DM Mono',monospace;color:var(--mute);letter-spacing:.3px}
body.page-join .nm .go {grid-row:1/3;grid-column:2;font:700 13px Inter,sans-serif;color:var(--g);display:flex;align-items:center;gap:6px}
body.page-join .nm .go:after {content:"›";font-size:22px;line-height:1;color:var(--g)}
body.page-join .nm.taken {background:#efe9dc;border-color:#b7ad98;box-shadow:none}
body.page-join .nm.taken b {color:#8a826f}
body.page-join .nm.taken .go {color:#8a826f;font:600 11px 'DM Mono',monospace;letter-spacing:1px;border:1.5px dashed #b7ad98;border-radius:999px;padding:3px 9px}
body.page-join .nm.taken .go:after {content:none}
body.page-join .nm.pick {background:var(--y)}
body.page-join .sect {display:flex;justify-content:space-between;align-items:center;gap:10px;font:500 11px 'DM Mono',monospace;letter-spacing:1.5px;color:var(--mute);margin:16px 0 8px}
body.page-join .notlist {margin-top:16px;padding:14px;border:2px dashed var(--g);border-radius:14px;background:#f4f8f2;display:flex;align-items:center;justify-content:space-between;gap:12px}
body.page-join .notlist b {display:block;font-size:15px}
body.page-join .notlist span {font-size:12.5px;color:var(--mute)}
body.page-join .help {margin-top:14px;font-size:12.5px;color:var(--mute);text-align:center}
body.page-join .sheet {position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--paper);border-top:2px solid var(--ink);border-radius:20px 20px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto}
body.page-join .sheet .grab {width:44px;height:5px;border-radius:9px;background:#cbbfa3;margin:0 auto 14px}
body.page-join .sheet h2 {font-size:26px;margin-bottom:4px}
body.page-join .sheet .who {display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:12px;border:2px solid var(--ink);border-radius:14px;background:#fffdf7;margin:12px 0}
body.page-join .av {width:46px;height:46px;border-radius:50%;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font:800 15px Inter,sans-serif;color:#fff;background:var(--soju)}
body.page-join .who b {display:block;font-size:17px}
body.page-join .who small {display:block;font:500 11.5px 'DM Mono',monospace;color:var(--mute);margin-top:2px}
body.page-join .sheet .btn {width:100%;margin-top:10px}
body.page-join .sheet .fine {font-size:12.5px;color:var(--mute);margin-top:12px;text-align:center}
body.page-join .codeent span {height:64px;border:2px solid var(--ink);border-radius:14px;background:#fffdf7;display:flex;align-items:center;justify-content:center;font:700 30px 'DM Mono',monospace;color:var(--g)}
body.page-join .codeent span.cur {background:#fff;box-shadow:inset 0 0 0 2px var(--y)}
body.page-join .panel .btn.block {margin-top:6px}
body.page-join .okc .big {width:72px;height:72px;margin:0 auto 12px;border-radius:50%;background:var(--m);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font:900 34px Inter,sans-serif;color:var(--g)}
body.page-join .okc h1 {font-size:30px}
body.page-join .okc p {color:#3d3a33;margin-top:6px}
body.page-join .facts {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 4px;text-align:left}
body.page-join .facts div {border:2px solid var(--ink);border-radius:12px;background:#fffdf7;padding:9px 12px}
body.page-join .facts b {display:block;font:500 10.5px 'DM Mono',monospace;letter-spacing:1px;color:var(--mute)}
body.page-join .facts span {font-weight:800;font-size:15px}
body.page-join .stack {display:grid;gap:10px;margin-top:16px}
body.page-join .radios {display:grid;grid-template-columns:1fr 1fr;gap:8px}
body.page-join .desk-ev {display:none;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:14px 16px;background:var(--g);color:#fff;border:2px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--y)}
body.page-join .desk-ev b {display:block;font:900 22px/1.15 Fraunces,serif}
body.page-join .desk-ev small {display:block;font:500 11.5px 'DM Mono',monospace;color:#cfe3d6;margin-top:3px}
body.page-join .desk-ev .tag {flex:none;font:600 10.5px 'DM Mono',monospace;letter-spacing:1px;background:var(--y);color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:3px 9px}
@media (max-width:899px) {
  body.page-join .top {display:none}
}
@media (min-width:900px) {
  body.page-join .jw {max-width:760px;padding:28px 20px 48px}
  body.page-join .evh {display:none}
  body.page-join .desk-ev {display:flex}
  body.page-join .names {grid-template-columns:1fr 1fr;gap:10px 12px}
  body.page-join .jw.narrow {max-width:560px}
  body.page-join .sheet {top:50%;bottom:auto;left:50%;right:auto;width:460px;transform:translate(-50%,-50%);border:2px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--g);padding:18px 22px 20px}
  body.page-join .sheet .grab {display:none}
}
/* m12 QA: join renders without setup.css, so the pieces it borrows live here. */
body.page-join a.nm{text-decoration:none;color:inherit}
body.page-join [data-name][hidden]{display:none}
body.page-join .okc{text-align:center;padding:24px 18px}
body.page-join .fld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
body.page-join .fld>label,body.page-join .lbl{font-weight:700;font-size:13.5px}
body.page-join .fld>label .hint{font-weight:500;font-size:12px;color:var(--mute)}
body.page-join .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
body.page-join .seg{display:flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:#fffdf7;width:100%}
body.page-join .seg label{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 10px;font-weight:700;font-size:14px;text-align:center;cursor:pointer;border-left:2px solid var(--ink)}
body.page-join .seg label:first-child{border-left:0}
body.page-join .seg input{position:absolute;opacity:0;pointer-events:none}
body.page-join .seg label:has(input:checked){background:var(--g);color:#fff}
body.page-join .seg label:has(input:focus-visible){outline:3px solid var(--y);outline-offset:-3px}
body.page-join .fine{font-size:12.5px;color:var(--mute);margin-top:12px;text-align:center}
body.page-join .notlist .btn{flex:none;white-space:nowrap;background:#fff;color:var(--ink)}
body.page-join .nm small .dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink);flex:none;display:inline-block}
body.page-join .nm small .dot.soju{background:var(--soju)}
body.page-join .nm small .dot.mak{background:var(--mak)}