.room-body{--room-bg:#0f1a15;--room-bar:#162018;--room-raised:#223029;--room-tab:#1c2b22;--room-line:#2a3830;--room-line-2:#334a3f;--room-text:#f0f0f0;--room-soft:#b0b8b4;--room-muted:#7a8a83;--room-mint:#d8f3dc;--room-green:#2d6a4f;--room-green-2:#40916c;--room-deep:#1b4332;--room-red:#dc2626;--room-top-h:52px;--room-bar-h:60px;background:var(--room-bg);color:var(--room-text);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;overflow:hidden}.room{flex-direction:column;height:100dvh;font-size:11px;display:flex}.room-btn{border:1px solid var(--room-line-2);white-space:nowrap;height:32px;color:var(--room-soft);cursor:pointer;transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);background:0 0;border-radius:7px;justify-content:center;align-items:center;gap:5px;padding:0 13px;font-size:11px;display:inline-flex}.room-btn:hover{border-color:var(--room-green-2);color:var(--room-text)}.room-btn--danger{border-color:var(--room-red);background:var(--room-red);color:var(--color-white)}.room-btn--danger:hover{color:var(--color-white);background:#b91c1c;border-color:#b91c1c}.room-btn--primary{border-color:var(--room-green);background:var(--room-green);color:var(--color-white)}.room-btn:focus-visible,.room-ctrl:focus-visible,.room-tabs__tab:focus-visible,.room-composer__send:focus-visible{outline:2px solid var(--room-mint);outline-offset:2px}.room-avatar{background:linear-gradient(135deg, var(--room-green-2) 0%, var(--room-deep) 100%);font-family:var(--font-display);color:var(--color-white);border-radius:50%;flex:none;place-items:center;font-weight:800;display:grid}.room-avatar--xl{color:#ffffffe6;filter:drop-shadow(0 0 30px #2d6a4f33);border:3px solid #2d6a4f80;width:120px;height:120px;font-size:42px}.room-avatar--md{background:linear-gradient(135deg, var(--room-green) 0%, var(--room-green-2) 100%);width:44px;height:44px;font-size:16px}.room-avatar--sm{width:28px;height:28px;margin-top:2px;font-size:10px}.room-avatar--me{background:linear-gradient(135deg, var(--room-green) 0%, var(--room-green-2) 100%);font-family:var(--font-sans);font-weight:400}.room-top{height:var(--room-top-h);border-bottom:1px solid var(--room-line);background:var(--room-bar);flex:none;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 16px;display:grid}.room-top__start{align-items:center;gap:12px;min-width:0;display:flex}.room-brand{color:var(--room-text);flex:none;align-items:center;gap:7px;display:inline-flex}.room-brand__mark{background:var(--room-green);width:28px;height:28px;font-family:var(--font-display);color:var(--color-white);border-radius:7px;place-items:center;font-size:12px;font-weight:800;display:grid}.room-top__divider{background:var(--room-line-2);width:1px;height:22px}.room-top__lesson{flex-direction:column;gap:2px;min-width:0;display:flex}.room-top__lesson p,.room-top__lesson h1{white-space:nowrap;text-overflow:ellipsis;font-size:11px;font-weight:400;overflow:hidden}.room-top__lesson h1{color:var(--room-soft)}.room-top__status{align-items:center;gap:10px;display:flex}.room-live{color:#fc8181;background:#dc262626;border:1px solid #dc26264d;border-radius:20px;align-items:center;gap:6px;padding:5px 12px;display:inline-flex}.room-live span{background:var(--room-red);border-radius:50%;width:7px;height:7px;animation:1.6s ease-in-out infinite room-pulse}@keyframes room-pulse{50%{opacity:.35}}.room-top__timer{font-variant-numeric:tabular-nums}.room-top__end{justify-content:flex-end;gap:8px;display:flex}.room-body__grid{flex:1;grid-template-columns:minmax(0,1fr) 320px;min-height:0;display:grid}.room-stage{flex-direction:column;min-width:0;min-height:0;display:flex}.room-stage__view{background:radial-gradient(ellipse 70% 70% at 50% 50%, #1c3028 0%, var(--room-bg) 70%);flex:1;place-items:center;display:grid;position:relative;overflow:hidden}.room-speaker{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0009;border-radius:20px;align-items:center;gap:6px;padding:5px 12px;display:inline-flex;position:absolute;bottom:70px;left:16px}.room-speaker span{background:var(--room-green-2);border-radius:50%;width:8px;height:8px}.room-reaction{pointer-events:none;font-size:48px;line-height:1;position:absolute;bottom:120px;left:50%;transform:translate(-50%)}.room-reaction.is-playing{animation:1.6s ease-out forwards room-float}@keyframes room-float{0%{opacity:0;transform:translate(-50%,20px)scale(.6)}20%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%,-120px)scale(1.1)}}.room-self{border:2px solid var(--room-line-2);background:linear-gradient(135deg, #223029 0%, var(--room-bar) 100%);border-radius:14px;place-items:center;width:160px;height:100px;display:grid;position:absolute;bottom:70px;right:16px;overflow:hidden;box-shadow:0 4px 20px #00000080}.room-self.is-camera-off .room-avatar{opacity:.55}.room-self__name{color:#fffc;font-size:10px;font-weight:700;position:absolute;bottom:6px;left:8px}.room-self__muted{background:#dc2626cc;border-radius:50%;place-items:center;width:20px;height:20px;display:grid;position:absolute;top:6px;right:6px}.room-self__muted[hidden],.room-self__hand[hidden]{display:none}.room-self__hand{font-size:16px;position:absolute;top:4px;left:6px}.room-controls{height:var(--room-bar-h);border-top:1px solid var(--room-line);background:var(--room-bar);flex:none;justify-content:center;align-items:center;gap:10px;padding:0 12px;display:flex}.room-controls__group{gap:10px;display:flex}.room-controls__divider{background:var(--room-line);width:1px;height:28px;margin-inline:4px}.room-ctrl{border:1px solid var(--room-line);background:var(--room-raised);cursor:pointer;width:44px;height:44px;transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);border-radius:50%;flex:none;place-items:center;display:grid;position:relative}.room-ctrl:hover{border-color:var(--room-green-2)}.room-ctrl.is-off{background:#dc262626;border-color:#dc262666}.room-ctrl[aria-pressed=true]:not(.is-off){border-color:var(--room-green-2);background:var(--room-green)}.room-ctrl--end{border-color:var(--room-red);background:var(--room-red);width:50px;height:50px}.room-ctrl--end:hover{background:#b91c1c;border-color:#b91c1c}.room-ctrl--panel{display:none}.room-ctrl__tip{white-space:nowrap;color:var(--color-white);opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);background:#000000d9;border-radius:6px;padding:4px 9px;font-size:11px;font-weight:700;position:absolute;bottom:calc(100% + 5px);left:50%;transform:translate(-50%,4px)}.room-ctrl:hover .room-ctrl__tip,.room-ctrl:focus-visible .room-ctrl__tip{opacity:1;transform:translate(-50%)}.room-panel{border-left:1px solid var(--room-line);background:var(--room-bar);flex-direction:column;min-height:0;display:flex}.room-tabs{border-bottom:1px solid var(--room-line);flex:none;display:flex}.room-tabs__tab{color:var(--room-muted);cursor:pointer;transition:color var(--dur) var(--ease), background var(--dur) var(--ease);border-bottom:2px solid #0000;flex:1;justify-content:center;align-items:center;gap:5px;padding:12px 8px;font-size:11px;display:flex}.room-tabs__tab img{opacity:.7}.room-tabs__tab:hover{color:var(--room-soft)}.room-tabs__tab[aria-selected=true]{border-bottom-color:var(--room-green-2);background:var(--room-tab);color:var(--room-mint)}.room-tabs__tab[aria-selected=true] img{opacity:1}.room-panel__close{width:44px;color:var(--room-soft);cursor:pointer;place-items:center;font-size:14px;display:none}.room-pane{flex-direction:column;flex:1;min-height:0;display:flex}.room-pane[hidden]{display:none}.room-pane__intro{color:var(--room-muted);padding:14px 14px 4px}.room-chat{flex-direction:column;flex:1;gap:12px;padding:14px 14px 8px;display:flex;overflow-y:auto}.room-chat__note{text-align:center;color:var(--room-muted);padding-block:4px}.room-msg{align-items:flex-start;gap:8px;display:flex}.room-msg--me{flex-direction:row-reverse}.room-msg__body{flex-direction:column;gap:3px;min-width:0;max-width:227px;display:flex}.room-msg--me .room-msg__body{align-items:flex-end}.room-msg__name{color:var(--room-muted);font-size:10px;font-weight:700}.room-msg__bubble{border:1px solid var(--room-line);background:var(--room-raised);white-space:pre-line;overflow-wrap:anywhere;color:var(--room-text);border-radius:4px 14px 14px;padding:10px 13px;line-height:1.35}.room-msg--me .room-msg__bubble{border-color:var(--room-green);background:var(--room-deep);color:var(--color-white);border-radius:14px 4px 14px 14px}.room-msg__time{color:var(--room-muted);font-size:10px}.room-vocab{color:var(--room-soft);background:#2d6a4f33;border:1px solid #2d6a4f66;border-radius:7px;align-items:center;gap:5px;margin-top:2px;padding:8px 12px;display:flex}.room-vocab span:first-child{min-width:43px;color:var(--room-mint)}.room-composer{border-top:1px solid var(--room-line);flex:none;align-items:flex-end;gap:8px;padding:11px 12px 10px;display:flex}.room-composer__input{border:1px solid var(--room-line-2);background:var(--room-raised);field-sizing:content;resize:none;min-width:0;max-height:80px;color:var(--room-text);border-radius:10px;flex:1;padding:10px 13px;font-size:13px;line-height:18px}.room-composer__input::placeholder{color:var(--room-muted)}.room-composer__input:focus{border-color:var(--room-green-2);outline:none}.room-composer__send{background:var(--room-green);cursor:pointer;width:36px;height:36px;transition:background var(--dur) var(--ease);border-radius:50%;flex:none;place-items:center;display:grid}.room-composer__send:hover{background:var(--room-green-2)}.room-files{flex-direction:column;gap:8px;padding:10px 14px;display:flex}.room-file{border:1px solid var(--room-line);background:var(--room-raised);transition:border-color var(--dur) var(--ease);border-radius:10px;align-items:center;gap:10px;padding:10px;display:flex}.room-file:hover{border-color:var(--room-green-2)}.room-file>span:last-child{min-width:0;color:var(--room-muted);flex-direction:column;gap:2px;display:flex}.room-file strong{white-space:nowrap;text-overflow:ellipsis;color:var(--room-text);font-size:12px;font-weight:600;overflow:hidden}.room-file__icon{border-radius:8px;flex:none;place-items:center;width:36px;height:36px;display:grid}.room-file__icon--red{background:#ffdad6e6}.room-file__icon--green{background:#d8f3dce6}.room-board__tools{justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;display:flex}.room-board__colors{gap:8px;display:flex}.room-board__colors label{cursor:pointer}.room-board__colors input{opacity:0;position:absolute}.room-board__colors span{background:var(--swatch);border:2px solid #0000;border-radius:50%;width:22px;height:22px;font-size:0;display:block;overflow:hidden}.room-board__colors input:checked+span{border-color:var(--color-white);box-shadow:0 0 0 2px var(--room-green-2)}.room-board__colors input:focus-visible+span{outline:2px solid var(--room-mint);outline-offset:3px}.room-board{border:1px dashed var(--room-line-2);cursor:crosshair;touch-action:none;background:#11201a;border-radius:10px;flex:1;width:calc(100% - 28px);min-height:0;margin:0 14px 14px}.room-dialog{border:1px solid var(--room-line-2);background:var(--room-bar);width:min(380px,100vw - 32px);color:var(--room-text);border-radius:14px;padding:0}.room-dialog::backdrop{background:#0009}.room-dialog__body{flex-direction:column;gap:14px;padding:22px;display:flex}.room-dialog__title{font-size:16px;font-weight:700}.room-dialog__text{color:var(--room-soft);font-size:13px;line-height:20px}.room-dialog__actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;padding-top:4px;display:flex}.room-field{color:var(--room-soft);flex-direction:column;gap:6px;font-size:12px;display:flex}.room-field select{border:1px solid var(--room-line-2);background:var(--room-raised);height:36px;color:var(--room-text);border-radius:8px;padding:0 10px;font-size:13px}@media (prefers-reduced-motion:reduce){.room-live span,.room-reaction.is-playing{animation:none}}@media (width<=1023.98px){.room-body__grid{grid-template-columns:minmax(0,1fr)}.room-ctrl--panel{display:grid}.room-panel{top:var(--room-top-h);z-index:var(--z-drawer);visibility:hidden;width:min(360px,100%);transition:transform var(--dur) var(--ease), visibility 0s linear var(--dur);position:fixed;bottom:0;right:0;transform:translate(100%);box-shadow:-8px 0 24px #0006}.room-panel.is-open{visibility:visible;transition:transform var(--dur) var(--ease);transform:none}.room-panel__close{display:grid}}@media (width<=767.98px){.room-top{grid-template-columns:minmax(0,1fr) auto;padding:0 10px}.room-top__status{display:none}.room-brand{gap:0;font-size:0}.room-btn span{display:none}.room-btn{padding:0 9px}.room-top__end .room-btn:not(.room-btn--danger){display:none}.room-controls{gap:6px;padding:0 8px}.room-controls__group{gap:6px}.room-controls__divider{display:none}.room-ctrl{width:38px;height:38px}.room-ctrl--end{width:42px;height:42px}.room-ctrl__tip{display:none}.room-speaker{bottom:12px}.room-self{width:110px;height:72px;bottom:10px;right:10px}.room-avatar--xl{width:96px;height:96px;font-size:34px}}