:root {
  color-scheme: light;
  --ink: #173e32;
  --paper: #f6f5ef;
  --muted: #53675d;
  --border: #c9d1c5;
  --accent: #ff9c6f;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 280px; min-height: 100dvh; color: var(--ink); background: var(--paper); }
button, input { font: inherit; }
button {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 44px; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  color: inherit; font-weight: 650;
  transition: background-color .18s, color .18s, box-shadow .18s;
}
button:disabled { cursor: wait; opacity: .58; }
button:focus-visible, input:focus-visible { outline: 3px solid #487dce; outline-offset: 3px; }
.symbols { display: none; }
.icon { display: block; flex: none; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shell { width: min(1184px, calc(100% - clamp(40px, 10vw, 152px))); margin-inline: auto; }
.site-head { border-bottom: 1px solid #d8ddd2; }
.head-inner { display: flex; align-items: center; justify-content: space-between; height: 83px; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; font-size: 27px; line-height: 1; letter-spacing: -.07em; font-weight: 800; }
.wordmark img { border-radius: 12px; }
.app-type { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 550; }
.app-type .icon { width: 18px; height: 18px; }

.lobby {
  display: grid; grid-template-columns: minmax(0, 1.56fr) minmax(290px, 1fr);
  align-items: center; gap: clamp(37px, 6.4vw, 100px);
  padding-block: clamp(44px, 10vh, 108px) 65px;
}
.preview-frame {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1.34;
  border-radius: 24px; background: #cb7757; box-shadow: inset 0 0 0 1px #814f3417;
}
.art, .preview-stream { position: absolute; inset: 0; width: 100%; height: 100%; }
.preview-stream { object-fit: cover; transform: scaleX(-1); background: #152b24; }
.art {
  overflow: hidden;
  background: radial-gradient(ellipse at 86% 1%, #fad3a3 0, #edaf83 34%, transparent 67%),
    linear-gradient(145deg, #f2ae83 0%, #df9670 47%, #b86e50 100%);
}
.art-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 27% 91%, #844c3e55, transparent 47%),
    linear-gradient(135deg, #ffd09d75, transparent 52%);
}
.art::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(#422e1619 .55px, transparent .9px) 0 0 / 3px 3px;
  opacity: .37; mix-blend-mode: multiply;
}
.disc {
  position: absolute; width: 51%; aspect-ratio: .95; border-radius: 50%;
  background: linear-gradient(125deg, var(--lip) 1%, var(--ring) 42%, var(--edge) 89%);
  box-shadow: inset -5px -8px 7px var(--edge), inset 2px 3px 2px var(--shine),
    1px 4px 0 var(--edge), 2px 9px 0 var(--edge), 4px 12px 0 var(--shadow),
    8px 22px 13px #56362856, 21px 33px 21px #69493242;
}
.disc i {
  position: absolute; display: block; border-radius: 50%; inset: var(--inset);
  background: linear-gradient(139deg, var(--lip) 1%, var(--ring) 40%, var(--edge) 95%);
  box-shadow: inset 1px 2px 1px var(--shine), inset -1px -3px 3px var(--edge),
    1px 3px 1px var(--edge), 2px 5px 3px var(--shadow);
}
.disc i:nth-child(1) { --inset: 5.3%; }
.disc i:nth-child(2) { --inset: 11.3%; }
.disc i:nth-child(3) { --inset: 17.5%; }
.disc i:nth-child(4) { --inset: 23.9%; }
.disc i:nth-child(5) { --inset: 30.4%; }
.disc i:nth-child(6) { --inset: 37.3%; }
.disc-cream {
  --lip: #fff8d8; --ring: #f4e4b7; --edge: #c1a278; --shadow: #8a6a49; --shine: #fffce5;
  left: 46%; top: 9%; transform: rotate(29deg) scaleX(.85);
}
.disc-green {
  --lip: #5d8265; --ring: #345e47; --edge: #183d30; --shadow: #102b24; --shine: #809680;
  left: 11%; top: 32%; transform: rotate(-30deg) scaleX(.84);
}
.frame-caption {
  position: absolute; inset: auto 0 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 54px 23px 21px;
  color: white; background: linear-gradient(0deg, #292a20a3, #292a2060 38%, transparent);
  pointer-events: none;
}
.preview-title { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 650; text-shadow: 0 1px 3px #0004; }
.viewfinder {
  width: 17px; height: 13px;
  background: linear-gradient(currentColor,currentColor) top left, linear-gradient(currentColor,currentColor) top right,
    linear-gradient(currentColor,currentColor) bottom left, linear-gradient(currentColor,currentColor) bottom right,
    linear-gradient(currentColor,currentColor) top left, linear-gradient(currentColor,currentColor) top right,
    linear-gradient(currentColor,currentColor) bottom left, linear-gradient(currentColor,currentColor) bottom right;
  background-size: 5px 1.6px,5px 1.6px,5px 1.6px,5px 1.6px,1.6px 5px,1.6px 5px,1.6px 5px,1.6px 5px;
  background-repeat: no-repeat;
}
.preview-button {
  padding: 0 16px; border-radius: 24px; background: #f7f5e8; color: var(--ink);
  font-size: 13px; pointer-events: auto; box-shadow: 0 2px 4px #172d2420;
}
.preview-button .icon { width: 17px; height: 17px; }
.preview-button:hover { background: white; }
.setup { min-width: 0; }
h1 { margin: 0; font-size: clamp(36px, 3.8vw, 58px); font-weight: 730; line-height: 1.16; letter-spacing: -.055em; }
.intro { margin: 15px 0 30px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.create-button { width: 100%; min-height: 55px; border-radius: 13px; padding: 0 19px; background: var(--ink); color: #fff; font-size: 16px; }
.create-button:hover { background: #285542; }
.create-button .arrow { margin-left: auto; width: 18px; }
.or { display: flex; align-items: center; gap: 13px; margin: 23px 0 21px; color: #63716a; font-size: 12px; }
.or::before, .or::after { content: ""; height: 1px; flex: 1; background: #d5dacd; }
#join-form label { display: inline-block; margin-bottom: 10px; font-size: 14px; font-weight: 650; }
.join-row { display: grid; grid-template-columns: minmax(0,1fr) 76px; gap: 9px; }
#room-input {
  min-width: 0; width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--border);
  border-radius: 11px; background: #fffef9; color: var(--ink); font-size: 16px; letter-spacing: .1em;
}
#room-input::placeholder { color: #737e74; font-size: 14px; letter-spacing: .02em; }
.join-button, .copy-button { border: 1px solid var(--border); background: rgba(255,255,255,.35); }
.join-button { border-radius: 11px; font-size: 15px; }
.join-button:hover, .copy-button:hover { background: #e8ecdf; }
.error, .notice { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.error { color: #9c381f; margin: 12px 0 0; }
.error[data-kind="status"] { color: var(--muted); }
.error:empty, .notice:empty { display: none; }

.call { padding-block: 23px 26px; }
.room-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.room-number { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 14px; }
.room-number strong { color: var(--ink); font-size: 25px; font-weight: 680; letter-spacing: .075em; font-variant-numeric: tabular-nums; }
.copy-button { border-radius: 24px; padding: 0 15px; font-size: 13px; }
.copy-button .icon { width: 17px; height: 17px; }
.stage {
  position: relative; isolation: isolate; overflow: hidden; height: clamp(320px, 59dvh, 760px);
  border-radius: 22px; color: #fff; background: #183b30;
}
.remote-stream, .remote-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; }
.remote-stream { object-fit: contain; background: #10251f; }
.remote-placeholder {
  display: grid; place-content: center; gap: 23px; text-align: center;
  background: radial-gradient(ellipse at 38% 25%, #28513e 0, #203f33 48%, #17362b 100%);
  font-size: clamp(18px, 2vw, 26px); font-weight: 600;
}
.remote-placeholder::before {
  content: ""; display: block; justify-self: center; width: 86px; height: 78px;
  background: url("/mark.svg") center / cover no-repeat; border-radius: 25px;
  outline: 1px solid #f2f1d829; outline-offset: 12px; margin-bottom: 8px;
}
.stage-top { position: absolute; z-index: 1; inset: 16px 18px auto; display: flex; justify-content: space-between; gap: 10px; pointer-events: none; }
.call-state, .timer, .self-tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 20px;
  background: #0b201bba; color: #fff; font-size: 12px; font-weight: 580;
}
.call-state i { width: 7px; height: 7px; border-radius: 50%; background: #ffb382; }
[data-phase="connected"] .call-state i { background: #9cdeb0; }
.timer { font-variant-numeric: tabular-nums; }
.timer:empty { display: none; }
.self-view {
  position: absolute; z-index: 1; inset: auto 18px 16px auto; width: clamp(80px, 17%, 208px); aspect-ratio: 4 / 3;
  overflow: hidden; border: 1px solid #ffffff70; border-radius: 13px; background: #344e44; box-shadow: 0 6px 15px #0918123d;
}
.self-stream, .self-off { width: 100%; height: 100%; }
.self-stream { object-fit: cover; transform: scaleX(-1); }
.self-off { display: grid; place-items: center; color: #d8e3d6; }
.self-tag { position: absolute; left: 7px; bottom: 7px; font-size: 11px; padding: 1px 7px; }
.play-audio { position: absolute; z-index: 2; left: 14px; bottom: 15px; font-size: 13px; padding: 0 13px; border-radius: 20px; color: var(--ink); background: #f9f8ee; }
.controls { display: flex; align-items: flex-start; justify-content: center; gap: 22px; padding-top: 18px; }
.control { display: flex; flex-direction: column; gap: 7px; width: 74px; padding: 0 0 4px; background: transparent; font-size: 12px; }
.control-icon {
  position: relative; display: grid; place-items: center; width: 49px; height: 49px;
  border: 1px solid #cbd3c6; border-radius: 50%; background: #e8ece2; color: var(--ink);
}
.control:hover .control-icon { background: #dce4d6; }
.control[aria-pressed="false"] .control-icon { background: #f9f4e9; color: #735746; }
.control[aria-pressed="false"] .control-icon::after {
  content: ""; position: absolute; height: 23px; width: 2px; transform: rotate(-42deg);
  background: currentColor; box-shadow: 2px 0 #f9f4e9;
}
.control.end .control-icon { border-color: transparent; background: #ad412f; color: white; }
.control.end:hover .control-icon { background: #963927; }
.notice { margin: 12px 0 0; text-align: center; color: var(--muted); }

@media (max-width: 800px) {
  .shell { width: calc(100% - 48px); }
  .lobby { grid-template-columns: minmax(0, 1.1fr) minmax(265px, 1fr); gap: 24px; }
  .preview-frame { aspect-ratio: .99; }
  .disc-cream { top: 17%; }
  .disc-green { top: 35%; }
  .frame-caption { padding: 35px 12px 12px; }
  .preview-button { padding-inline: 11px; }
}
@media (max-width: 650px) {
  .shell { width: calc(100% - 36px); }
  .head-inner { height: 62px; }
  .wordmark { gap: 9px; font-size: 23px; }
  .wordmark img { width: 33px; height: 33px; border-radius: 9px; }
  .app-type { font-size: 12px; gap: 6px; }
  .lobby { max-width: 460px; grid-template-columns: 1fr; gap: 26px; padding-block: 19px 28px; }
  .preview-frame { border-radius: 17px; aspect-ratio: 1.8; }
  .disc-cream { width: 44%; left: 49%; top: 0; }
  .disc-green { width: 44%; left: 14%; top: 22%; }
  .frame-caption { padding: 31px 13px 11px; }
  .preview-title { font-size: 12px; gap: 7px; }
  .preview-button { font-size: 12px; padding-inline: 11px; }
  h1 { font-size: 35px; }
  .intro { margin: 9px 0 20px; font-size: 14px; }
  .create-button { min-height: 50px; }
  .or { margin: 16px 0 14px; }
  .call { padding-top: 13px; padding-bottom: max(15px, env(safe-area-inset-bottom)); }
  .room-head { margin-bottom: 11px; }
  .room-number { gap: 7px; font-size: 12px; }
  .room-number strong { font-size: 21px; }
  .copy-button { padding: 0 12px; font-size: 12px; }
  .stage { height: clamp(300px, calc(100dvh - 259px), 840px); border-radius: 17px; }
  .stage-top { inset: 12px 12px auto; }
  .self-view { inset: auto 11px 11px auto; width: 25%; aspect-ratio: 3 / 4; }
  .controls { gap: 16px; padding-top: 12px; }
}
@media (max-width: 345px) {
  .shell { width: calc(100% - 24px); }
  .room-number strong { font-size: 18px; }
  .copy-button { padding-inline: 9px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; } }