/* axi0 Meet (/meet/): the axi0 family look (as Notes and Translate): true black or warm paper, Instrument Sans, the
   orange core as the one accent. No inline styles in the markup: the page runs under style-src 'self'; sizes the
   layout computes are custom properties set from meet.js. */
@font-face {
  font-family: "Instrument Sans";
  src: url(/axi0/fonts/instrument-sans-latin-var.woff2) format("woff2");
  font-weight: 400 700;
  font-display: optional;
}
:root {
  --bg: #000; --panel: #0a0a0c; --panel2: #111115; --tile: #16161b; --field: #050506; --hover: #18181d;
  --line: #1c1c21; --line2: #2a2a31; --field-line: #3a3a42;
  --head: #fff; --text: #d6d6dc; --soft: #b4b4bd; --lede: #a3a3ad; --mute: #8e8e98; --place: #7c7c87;
  --core: #f6a04d; --core-ink: #f6a04d; --core-hover: #ffb26a; --on-core: #000;
  --danger: #ff8f78; --leave: #e5484d; --on-leave: #fff;
  --round: #1d1d23; --round-ink: #f1f1f4; --round-off: #f1f1f4; --round-off-ink: #111;
  --shade: rgba(0, 0, 0, .55);
  color-scheme: dark;
}
html[data-axi0-theme="light"] {
  --bg: #f6f2ea; --panel: #fffdf9; --panel2: #efe8dc; --tile: #e6dfd3; --field: #fffdf9; --hover: #efe8dc;
  --line: #e6dfd3; --line2: #d3cabb; --field-line: #8a8174;
  --head: #17140f; --text: #2c2823; --soft: #4a433b; --lede: #4f4940; --mute: #675f54; --place: #6f665a;
  --core-ink: #9a4a0a; --danger: #b3261e; --leave: #c62a2f;
  --round: #fffdf9; --round-ink: #17140f; --round-off: #17140f; --round-off-ink: #fffdf9;
  --shade: rgba(23, 20, 15, .55);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  html:not([data-axi0-theme="dark"]) {
    --bg: #f6f2ea; --panel: #fffdf9; --panel2: #efe8dc; --tile: #e6dfd3; --field: #fffdf9; --hover: #efe8dc;
    --line: #e6dfd3; --line2: #d3cabb; --field-line: #8a8174;
    --head: #17140f; --text: #2c2823; --soft: #4a433b; --lede: #4f4940; --mute: #675f54; --place: #6f665a;
    --core-ink: #9a4a0a; --danger: #b3261e; --leave: #c62a2f;
    --round: #fffdf9; --round-ink: #17140f; --round-off: #17140f; --round-off-ink: #fffdf9;
    --shade: rgba(23, 20, 15, .55);
    color-scheme: light;
  }
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--text); background: var(--bg);
  font: 15px/1.55 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
}
a { color: var(--core-ink); text-underline-offset: 3px; }
::selection { background: rgba(246, 160, 77, .35); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 8px 14px; border-radius: 999px; background: var(--core); color: var(--on-core); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--core-ink); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- header (as Notes) ---------------------------------------------------------------------------------------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 22px 20px 8px; }
.mark { display: inline-flex; align-items: baseline; gap: .12em; color: var(--head); text-decoration: none; font-size: 26px; font-weight: 600; letter-spacing: -.045em; white-space: nowrap; }
.mark-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--core); box-shadow: 0 0 9px var(--core); transform: translateY(-2px); }
.mark-s { color: var(--mute); font-weight: 500; }
.top-right { display: flex; align-items: center; gap: 14px; }
.top-nav { display: flex; gap: 20px; }
.top-nav a { color: var(--soft); text-decoration: none; font-size: 14px; line-height: 44px; }
.top-nav a:hover { color: var(--head); text-decoration: underline; }
.theme-btn {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line2); border-radius: 50%;
  background: var(--panel); color: var(--soft); cursor: pointer;
}
.theme-btn:hover { border-color: var(--core); color: var(--head); }
.theme-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .i-moon, html[data-axi0-theme="light"] .theme-btn .i-sun { display: none; }
html[data-axi0-theme="light"] .theme-btn .i-moon { display: block; }
@media (prefers-color-scheme: light) {
  html:not([data-axi0-theme="dark"]) .theme-btn .i-sun { display: none; }
  html:not([data-axi0-theme="dark"]) .theme-btn .i-moon { display: block; }
}
.me-slot { position: relative; flex: none; width: 36px; height: 36px; }
.me-slot:empty { display: none; }
@media (max-width: 560px) { .top-nav { display: none; } .top { padding-top: 14px; } }

/* ---- shared --------------------------------------------------------------------------------------------------- */
main { max-width: 1180px; margin: 0 auto; padding: 4px 20px 24px; }
h1 { margin: 22px 0 8px; color: var(--head); font-size: clamp(32px, 5vw, 44px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
h2 { margin: 0 0 10px; color: var(--head); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
h3 { margin: 22px 0 6px; color: var(--head); font-size: 15px; font-weight: 600; }
.lede { max-width: 44em; margin: 0; color: var(--lede); font-size: 16px; }
.lede.small { font-size: 14px; }
.card { padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.card > p { margin: 0 0 12px; }
label { display: block; margin: 16px 0 6px; color: var(--head); font-size: 14px; }
input[type="text"], select {
  width: 100%; min-height: 44px; padding: 9px 13px; border: 1px solid var(--field-line); border-radius: 12px;
  background: var(--field); color: var(--head); font: inherit; font-size: 15px;
}
input::placeholder { color: var(--place); }
input[type="text"]:focus, select:focus { outline: none; border-color: var(--core); box-shadow: 0 0 0 3px rgba(246, 160, 77, .2); }
.hint { margin: 6px 0 0; color: var(--mute); font-size: 13px; }
.error { margin: 10px 0 0; color: var(--danger); font-size: 14px; }
.note { margin: 8px 0 0; color: var(--core-ink); font-size: 13px; }
.error:empty, .note:empty { display: none; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.row.tight { flex-wrap: nowrap; margin-top: 0; }
.row.tight input { flex: 1 1 auto; min-width: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; margin: 0;
  border: 1px solid var(--line2); border-radius: 999px; background: var(--panel); color: var(--head); font: inherit; font-size: 14px;
  white-space: nowrap; cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: rgba(246, 160, 77, .7); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { border-color: var(--core); background: var(--core); color: var(--on-core); font-weight: 600; }
.btn.primary:hover { background: var(--core-hover); }
.btn.big { min-height: 50px; padding: 0 26px; font-size: 16px; }
.icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--soft); cursor: pointer; }
.icon:hover { background: var(--hover); color: var(--head); }
.icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ---- home ----------------------------------------------------------------------------------------------------- */
.home .start { max-width: 640px; margin-top: 22px; }
.home .start .btn.primary { margin-top: 4px; }
.join-form { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--line); }
.facts { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--lede); font-size: 14px; }
.facts li { padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; }
.facts strong { display: block; margin-bottom: 4px; color: var(--head); font-weight: 600; }
@media (min-width: 860px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- lobby ---------------------------------------------------------------------------------------------------- */
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.lobby .side h1 { margin-top: 0; font-size: 30px; }
.lobby .side #allow { margin-top: 16px; }
.invite { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; align-items: center; }
.invite .qr { margin-top: 0; }
@media (max-width: 700px) { .invite { grid-template-columns: minmax(0, 1fr); } .invite .qr { margin-top: 8px; } }
@media (max-width: 860px) { .lobby-grid { grid-template-columns: minmax(0, 1fr); } }
.preview { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 20px; background: var(--tile); }
.preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mirror { transform: scaleX(-1); }
.preview-off { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--soft); font-size: 16px; }
.preview.on .preview-off { display: none; }
.preview:not(.on) video { visibility: hidden; }
.preview-bar { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 14px; }
.level { position: absolute; left: 16px; bottom: 26px; width: 6px; height: 34px; border-radius: 3px; background: var(--shade); overflow: hidden; }
.level span { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--core); transition: height .08s linear; }
.devices { margin-top: 16px; }
.devices summary { min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--head); font-size: 14px; cursor: pointer; list-style: none; }
.devices summary::-webkit-details-marker { display: none; }
.devices summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.devices[open] summary::before { transform: rotate(45deg); }
.devices label:first-of-type { margin-top: 4px; }
.linkbox { display: flex; gap: 10px; }
.linkbox input { flex: 1 1 auto; min-width: 0; font: 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.qr { width: 184px; margin-top: 16px; padding: 12px; border-radius: 14px; background: #fff; }
.qr:empty { display: none; }
.qr svg { display: block; width: 100%; height: auto; }

/* ---- round buttons (lobby and call bar) ------------------------------------------------------------------------ */
.round {
  position: relative; display: grid; place-items: center; flex: none; width: 52px; height: 52px; padding: 0; border: 1px solid var(--line2);
  border-radius: 50%; background: var(--round); color: var(--round-ink); cursor: pointer;
}
.round .off, .round[aria-pressed="false"] .on { display: none; }
.round[aria-pressed="false"] .off { display: block; }
.round:hover { border-color: var(--core); }
.round svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#l-mic[aria-pressed="false"], #l-cam[aria-pressed="false"], #c-mic[aria-pressed="false"], #c-cam[aria-pressed="false"] { background: var(--round-off); color: var(--round-off-ink); border-color: var(--round-off); }
#c-share[aria-pressed="true"], #c-hand[aria-pressed="true"], #c-chat[aria-pressed="true"], #c-people[aria-pressed="true"] { background: var(--core); color: var(--on-core); border-color: var(--core); }
.round.leave { width: 64px; border-radius: 26px; background: var(--leave); border-color: var(--leave); color: var(--on-leave); }
.round.leave:hover { filter: brightness(1.1); }
.round .dot { position: absolute; top: 9px; right: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--core); border: 2px solid var(--round); }
.round .count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--panel2); color: var(--head); font-size: 12px; line-height: 20px; }

/* ---- the call ------------------------------------------------------------------------------------------------- */
body.v-call { overflow: hidden; }
body.v-call .top, body.v-call .foot, body.v-call .skip { display: none; }
body.v-call main { max-width: none; padding: 0; }
.call { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 0; }
.grid { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px; }
.spot { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 16px; background: #000; overflow: hidden; }
.spot video { width: 100%; height: 100%; object-fit: contain; display: block; }
.spot .tag { position: absolute; left: 12px; bottom: 12px; }
.stage.has-spot .grid { flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; height: 118px; align-content: stretch; }
.stage.has-spot .tile { width: 168px !important; height: 104px !important; }
.tile {
  position: relative; overflow: hidden; flex: none; margin: 0; width: var(--tw, 320px); height: var(--th, 180px); border-radius: 16px; background: var(--tile);
  outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .15s;
}
.tile.speaking { outline-color: var(--core); }
.stage.duo .tile:not(.self) { width: 100% !important; height: 100% !important; }
.stage.duo .tile.self { position: absolute; z-index: 2; right: 12px; bottom: 12px; width: clamp(112px, 24%, 280px) !important; height: auto !important; aspect-ratio: 16 / 9; box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
@media (max-aspect-ratio: 1 / 1) { .stage.duo .tile.self { width: clamp(96px, 30%, 200px) !important; aspect-ratio: 3 / 4; } }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.tile.self video { transform: scaleX(-1); }
.tile.nocam video { visibility: hidden; }
.tile .face { position: absolute; inset: 0; display: grid; place-items: center; }
.tile .face span { display: grid; place-items: center; width: clamp(48px, 28%, 96px); aspect-ratio: 1; border-radius: 50%; background: var(--panel2); color: var(--head); font-size: clamp(20px, 3vw, 38px); font-weight: 600; }
.tile:not(.nocam) .face { display: none; }
.tag { position: absolute; left: 10px; bottom: 10px; right: 10px; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.tag b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 9px; border-radius: 8px; background: var(--shade); color: #fff; font-size: 13px; font-weight: 500; }
.tag i { display: none; padding: 3px 7px; border-radius: 8px; background: var(--shade); color: #fff; font-size: 12px; font-style: normal; }
.tile.muted .tag .m, .tile.hand .tag .h, .tile.wait:not(.stranger) .tag .w { display: inline-block; }
.tile.hand { outline-color: var(--core); }
.bar { flex: none; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 12px 12px calc(14px + env(safe-area-inset-bottom)); }
.banner { position: absolute; z-index: 5; top: 12px; left: 50%; transform: translateX(-50%); max-width: min(92vw, 640px); margin: 0; padding: 10px 16px;
  border: 1px solid var(--core); border-radius: 14px; background: var(--panel); color: var(--head); font-size: 14px; text-align: center; }
.panel { position: absolute; z-index: 6; top: 12px; right: 12px; bottom: 90px; width: 340px; display: flex; flex-direction: column; padding: 14px 16px 16px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow-y: auto; }
.panel-top { display: flex; align-items: center; justify-content: space-between; }
.panel-top h2 { margin: 0; }
.panel .hint { margin-top: 0; }
.msgs { flex: 1 1 auto; margin: 10px 0; padding: 0; list-style: none; overflow-y: auto; }
.msgs li { margin: 0 0 10px; }
.msgs .who { color: var(--head); font-weight: 600; font-size: 13px; }
.msgs .when { margin-left: 6px; color: var(--mute); font-size: 12px; }
.msgs p { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-form { display: flex; gap: 8px; }
.chat-form input { flex: 1 1 auto; min-width: 0; }
.plist { margin: 10px 0 0; padding: 0; list-style: none; }
.plist li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.plist .st { color: var(--mute); font-size: 13px; }
@media (min-width: 641px) { .call.with-panel .stage { padding-right: 364px; } }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 96px; transform: translateX(-50%); max-width: min(92vw, 520px); margin: 0; padding: 10px 16px;
  border-radius: 12px; background: var(--head); color: var(--bg); font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.on { opacity: 1; }
@media (max-width: 640px) {
  .bar { gap: 8px; }
  .round { width: 46px; height: 46px; }
  .round.leave { width: 54px; }
  .panel { inset: 0; width: auto; bottom: 0; border-radius: 0; border: 0; z-index: 8; }
  .stage { padding: 8px 8px 0; }
  .grid { gap: 8px; }
  .stage.has-spot .tile { width: 120px !important; height: 80px !important; }
  .stage.has-spot .grid { height: 88px; }
}
@media (max-width: 380px) { .bar { gap: 6px; } .round { width: 42px; height: 42px; } }

/* ---- end ------------------------------------------------------------------------------------------------------ */
.end .card { max-width: 560px; margin: 40px auto 0; }
.end h1 { margin-top: 0; font-size: 30px; }

.foot { max-width: 1180px; margin: 0 auto; padding: 18px 20px 34px; color: var(--mute); font-size: 13px; }
.foot p { margin: 0 0 6px; }
.foot a { color: var(--soft); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }