:root{--soft-white: #F5F6F7;--stone-gray: #DADBDD;--charcoal: #1E1F22;--cool-silver: #BFC3C9;--muted-blue-gray: #7C8A9A;--bg: var(--soft-white);--surface: #fff;--hover: #ececed;--border: var(--stone-gray);--border-subtle: #ececed;--text: var(--charcoal);--muted: var(--muted-blue-gray);--faint: var(--cool-silver);--accent: var(--charcoal);--accent-strong: #000;--on-accent: var(--soft-white);--danger: #b4453a;--danger-bg: #fbf3f2;--ok: #3f8f5f;--shadow: 0 12px 40px rgba(30, 31, 34, .18);--overlay: rgba(30, 31, 34, .35);--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", sans-serif;--ease: cubic-bezier(.16, 1, .3, 1);--transition-slow: .4s var(--ease);--transition-medium: .3s var(--ease);--transition-fast: .2s var(--ease);color-scheme:light}@media (prefers-color-scheme: dark){:root{--bg: #1a1b1e;--surface: #232428;--hover: #2a2c31;--border: #34363b;--border-subtle: #2a2c30;--text: #e8e9ec;--muted: #9aa3af;--faint: #6b7280;--accent: #e8e9ec;--accent-strong: #ffffff;--on-accent: #1a1b1e;--danger: #e0726a;--danger-bg: #2a2020;--shadow: 0 12px 40px rgba(0, 0, 0, .5);--overlay: rgba(0, 0, 0, .55);color-scheme:dark}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:15px/1.45 var(--font-sans);-webkit-font-smoothing:antialiased}button,input{font:inherit}.grow{flex:1}@keyframes mail-rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes mail-fade{0%{opacity:0}to{opacity:1}}@keyframes mail-sheet{0%{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}@keyframes mail-pulse{0%,to{opacity:1}50%{opacity:.45}}@keyframes room-pop{0%{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}@keyframes room-knock{0%,to{box-shadow:0 0 color-mix(in srgb,var(--muted) 35%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--muted) 0%,transparent)}}.stage{animation:mail-rise var(--transition-medium) both}.pop{display:inline-flex;animation:room-pop var(--transition-fast) both}.page{height:100%;display:flex;flex-direction:column}.body{flex:1;min-height:0}.body--center{display:flex;align-items:center;justify-content:center;padding:16px}.head{display:flex;align-items:center;gap:10px;padding:0 14px;height:60px;animation:mail-fade var(--transition-medium) both}.mark{color:var(--muted);font-size:19px;letter-spacing:.04em}.head__title{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.head__count{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:.9rem}.rec{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px;border-radius:var(--radius-md);color:var(--danger);font-size:.72rem;font-weight:600;letter-spacing:.06em;animation:mail-rise var(--transition-medium) both}.rec__word{line-height:1}.rec__dot{width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 30%,transparent);animation:mail-pulse 1.6s ease-in-out infinite}.ib{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-md);border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;flex-shrink:0;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}.ib:hover{background:var(--hover);color:var(--text)}.ib:active{transform:scale(.94)}.ib:disabled{opacity:.4;cursor:default;background:none;transform:none}.ib.is-done{color:var(--ok)}.ib--small{width:24px;height:24px}.ib--big{width:44px;height:44px;border-radius:50%;border-color:var(--border);background:var(--surface);color:var(--text)}.ib--big:hover{border-color:var(--muted);background:var(--surface)}.ib--big.is-off,.ib--danger{background:var(--danger);border-color:transparent;color:#fff}.ib--danger:hover{background:var(--danger);filter:brightness(1.08)}.ib--ok{color:var(--ok)}.ib--ok:hover{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}.pb{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:22px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font-weight:500;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast),opacity var(--transition-fast)}.pb:hover{background:var(--accent-strong)}.pb:active{transform:scale(.97)}.pb:disabled{opacity:.4;cursor:default;transform:none}.foot{display:flex;align-items:center;gap:10px;padding:12px 14px;padding-bottom:calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border-subtle);background:var(--bg);animation:mail-rise var(--transition-medium) both}.line{margin:0;font-size:.92rem;animation:mail-fade var(--transition-medium) both}.line.is-muted{color:var(--muted)}.line.is-err{color:var(--danger)}.line--bar{display:flex;align-items:center;gap:8px;padding:6px 14px}.prejoin{width:100%;max-width:560px;display:flex;flex-direction:column;gap:10px}.input{width:100%;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-md);padding:11px 14px;font-size:16px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input::placeholder{color:var(--faint)}.input:focus{outline:none;border-color:var(--muted);box-shadow:0 0 0 3px color-mix(in srgb,var(--muted) 18%,transparent)}.knocks{display:flex;flex-direction:column;gap:6px;padding:0 14px 8px}.knock{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:8px 10px;color:var(--muted);box-shadow:var(--shadow);animation:mail-sheet var(--transition-medium) both}.knock__name{flex:1;color:var(--text);font-weight:500}.grid{overflow-y:auto;display:grid;gap:8px;padding:0 14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-content:center}.grid--1{grid-template-columns:1fr}.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}.tile{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:center;animation:mail-sheet var(--transition-medium) both;transition:box-shadow var(--transition-medium),border-color var(--transition-medium)}.tile--large{width:100%}.tile--knocking{animation:mail-sheet var(--transition-medium) both,room-knock 2.4s var(--ease) .4s infinite}.tile video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--transition-slow)}.tile video.is-live{opacity:1}.tile video.is-hidden{display:none}.tile--self video{transform:scaleX(-1)}.tile__initial{width:72px;height:72px;border-radius:50%;background:var(--hover);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--muted);animation:room-pop var(--transition-medium) both}.tile__name{position:absolute;left:10px;bottom:8px;display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:#fff;background:#1e1f228c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:3px 8px;border-radius:var(--radius-sm);animation:mail-fade var(--transition-slow) both}.sheet__scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay);display:flex;justify-content:flex-end;animation:mail-fade var(--transition-fast) both;z-index:10}.sheet{width:min(360px,100%);height:100%;background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow-y:auto;animation:room-slide var(--transition-medium) both}@keyframes room-slide{0%{transform:translate(24px);opacity:0}to{transform:none;opacity:1}}.sheet__head{display:flex;align-items:center;gap:8px;padding:0 12px 0 16px;height:60px;border-bottom:1px solid var(--border-subtle);position:sticky;top:0;background:var(--surface)}.sheet__title{font-weight:500}.sec{display:flex;flex-direction:column;gap:10px;padding:16px;border-bottom:1px solid var(--border-subtle)}.sec__h{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}.sec__h--sub{margin-top:4px}.sec__preview{aspect-ratio:16 / 9;border-radius:var(--radius-md);overflow:hidden;background:var(--hover);display:flex;align-items:center;justify-content:center}.sec__preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.sec__preview video.is-hidden{display:none}.sel{width:100%;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-md);padding:9px 32px 9px 12px;font-size:.92rem;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat;transition:border-color var(--transition-fast)}.sel:focus{outline:none;border-color:var(--muted)}.seg{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:3px;gap:2px}.seg__b{flex:1;border:0;background:none;color:var(--muted);border-radius:var(--radius-sm);padding:7px 10px;font-size:.85rem;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.seg__b.is-on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px #1e1f221f}.seg__b:disabled{opacity:.4;cursor:default}.diag{display:block;font-size:.72rem;color:var(--muted);white-space:pre-wrap;word-break:break-word;background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:6px 8px}.meter{height:6px;border-radius:3px;background:var(--hover);overflow:hidden}.meter__bar{height:100%;width:100%;transform-origin:left;background:var(--ok);transition:transform 80ms linear}.tb{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:var(--radius-md);padding:8px 12px;font-size:.9rem;cursor:pointer;transition:border-color var(--transition-fast),transform var(--transition-fast)}.tb:hover{border-color:var(--muted)}.tb:active{transform:scale(.97)}.tb:disabled{opacity:.5;cursor:default;transform:none}@media (max-width: 600px){.sheet{width:100%}.head{padding:0 10px;height:52px}.head__count span{display:none}.grid{align-content:start;padding:0 10px;gap:6px}.tile{aspect-ratio:auto;height:26vh;min-height:120px}.tile--large{height:40vh}.tile__initial{width:56px;height:56px;font-size:22px}.foot{padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}.body--center{padding:12px 10px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.ib--rec .rec-btn__dot{width:12px;height:12px;border-radius:50%;background:var(--danger);transition:border-radius var(--transition-medium),transform var(--transition-medium)}.ib--rec.is-on{border-color:var(--danger);color:var(--danger)}.ib--rec.is-on .rec-btn__dot{border-radius:3px;transform:scale(.9);animation:mail-pulse 1.6s ease-in-out infinite}