:root{color-scheme:dark;--bg:#0b0c12;--panel:#171923;--line:#3a3e50;--text:#f7f8fd;--muted:#b5bdcf;--accent:#b8aaff;--accent-text:#17102e;--green:#83e3b1;--red:#ffb4b4;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 0,#26213e 0,transparent 45%),var(--bg);color:var(--text);font-size:16px;line-height:1.7;min-height:100vh}.shell{max-width:1024px;padding:40px 28px 24px;margin:0 auto;display:grid;grid-template-columns:1fr 420px;gap:32px 64px}.brand{grid-column:1/-1;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;letter-spacing:.12em}.brand-mark{display:grid;place-items:center;width:42px;height:42px;background:var(--accent);color:var(--accent-text);border-radius:12px;font-size:23px;font-weight:800;letter-spacing:0}.brand-note{display:block;color:var(--muted);font-size:12px;font-weight:400;letter-spacing:.04em}.intro{padding-top:48px}.eyebrow{color:var(--accent);font-size:12px;letter-spacing:.2em;font-weight:700}h1{font-size:clamp(32px,4.5vw,48px);line-height:1.5;letter-spacing:-.025em;margin:18px 0 24px}.lead{color:var(--muted);font-size:16px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 20px 60px #0003}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}h2{font-size:18px;margin:0}.status{font-size:12px;border:1px solid var(--line);border-radius:100px;padding:3px 12px;white-space:nowrap}.status.ready{color:var(--green);border-color:#48705d}.feedback{min-height:54px;margin:20px 0;color:var(--muted);font-size:14px}.feedback.error{color:var(--red)}label{font-size:14px;font-weight:700}input[type=password]{display:block;width:100%;min-height:50px;background:#0d0e16;color:var(--text);border:1px solid #646c84;border-radius:10px;padding:12px;font-size:17px;margin:8px 0}input::placeholder{color:#aeb7cd}.hint{font-size:12px;color:var(--muted);line-height:1.8}.primary,.secondary,.text-button{display:block;width:100%;min-height:48px;border-radius:10px;padding:12px 14px;margin-top:14px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background-color .15s,border-color .15s}.primary{border:1px solid var(--accent);background:var(--accent);color:var(--accent-text)}.primary:hover{background:#c9bfff}.secondary{border:1px solid #596077;background:transparent;color:var(--text)}.secondary:hover{background:#262b3b}.text-button{border:1px solid transparent;background:transparent;color:var(--muted);font-weight:400}.text-button:hover{color:var(--text);text-decoration:underline}.link-button{text-decoration:none;text-align:center}button:disabled{opacity:.55;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #eee8ff;outline-offset:4px}.usage{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 0;margin:0;border-block:1px solid var(--line)}dt{font-size:12px;color:var(--muted)}dd{font-size:24px;font-weight:700;margin:8px 0 0}.consent{display:flex;gap:12px;align-items:flex-start;font-weight:400;line-height:1.8;margin:18px 0;cursor:pointer}.consent input{width:22px;height:22px;flex:0 0 22px;margin:2px 0 0;accent-color:var(--accent)}.privacy{grid-column:1/-1;max-width:70ch;border-top:1px solid var(--line);padding-top:24px}.privacy h2{font-size:14px}.privacy p,footer{color:var(--muted);font-size:12px}footer{grid-column:1/-1;text-align:center;margin-top:4px}[hidden]{display:none!important}@media(max-width:760px){.shell{grid-template-columns:1fr;max-width:520px;padding:28px 20px;gap:24px}.intro{padding-top:8px}h1{font-size:34px;margin:14px 0}.panel{padding:24px}.privacy{margin-top:4px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.feedback:empty{display:none}.panel .primary{margin-top:0}.feedback{margin-bottom:0}.only{min-height:100vh;display:grid;place-content:center;gap:16px;padding:24px;text-align:center}.only .primary{width:min(420px,calc(100vw - 48px));min-height:56px;font-size:16px;margin:0}.only .feedback{max-width:420px;margin:0}
html, body, #app { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; }
@media (max-width: 600px) {
  #app .page-container { padding: 8px !important; }
  #app .video-container { width: 100% !important; max-width: 100% !important; height: 62dvh !important; margin: 0 !important; aspect-ratio: auto !important; }
  #app .video-container .remote-video-container,
  #app .video-container .local-video-container { border-radius: 16px !important; }
  #app .chat-records-container { width: 100% !important; height: 22dvh !important; aspect-ratio: auto !important; }
  #app .chat-input-wrapper { margin: 0 8px !important; }
}