.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm);transition:transform var(--duration-fast) var(--ease-out-expo),box-shadow var(--duration-fast) var(--ease-out-expo),background-color var(--duration-fast) ease}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn--primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-soft)}.btn--primary:hover{background:var(--color-primary-strong);box-shadow:var(--shadow-raised)}.btn--ghost{background:var(--color-surface-raised);color:var(--color-ink);box-shadow:var(--shadow-soft)}.btn--danger{background:var(--color-danger);color:#fff}.btn--toggle{background:var(--color-surface-raised);color:var(--color-ink-soft);border-radius:var(--radius-pill);width:48px;height:48px;padding:0;font-size:1.2rem;box-shadow:var(--shadow-soft)}.btn--toggle.btn--active{background:var(--color-secondary);color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.login{height:100%;display:grid;place-items:center;background:radial-gradient(60vw 60vh at 15% 10%,rgb(46 196 182 / .12),transparent 60%),radial-gradient(50vw 50vh at 85% 90%,rgb(255 107 94 / .14),transparent 60%),var(--color-surface)}.login__panel{width:min(400px,calc(100vw - 2 * var(--space-6)));background:var(--color-surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}.login__brand{display:flex;align-items:center;gap:var(--space-3)}.login__dot{width:18px;height:18px;border-radius:50%;background:var(--color-primary);box-shadow:26px 0 0 -4px var(--color-secondary),50px 0 0 -8px var(--color-accent)}.login__title{font-size:var(--text-xl);letter-spacing:-.02em}.login__subtitle{margin:0;color:var(--color-ink-soft)}.login__form{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-2)}.login__field{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-sm);font-weight:500;color:var(--color-ink-soft)}.login__field input{padding:var(--space-3);border:1.5px solid var(--color-surface-sunken);border-radius:var(--radius-md);background:var(--color-surface);transition:border-color var(--duration-fast) ease}.login__field input:focus{border-color:var(--color-secondary);outline:none}.login__error{margin:0;color:var(--color-danger);font-size:var(--text-sm)}.login__hint{margin:0;font-size:var(--text-xs);color:var(--color-ink-faint);text-align:center}.chat-fab{position:absolute;bottom:var(--space-4);left:var(--space-4);width:52px;height:52px;border-radius:50%;background:var(--color-surface-raised);box-shadow:var(--shadow-raised);font-size:1.3rem;z-index:var(--z-panel)}.chat-fab__badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-pill);background:var(--color-primary);color:#fff;font-size:var(--text-xs);font-weight:600;display:grid;place-items:center}.chat{position:absolute;bottom:var(--space-4);left:var(--space-4);width:320px;height:420px;max-height:calc(100vh - 2 * var(--space-8));display:flex;flex-direction:column;background:var(--color-surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);z-index:var(--z-panel);overflow:hidden}.chat__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-surface-sunken)}.chat__tabs{display:flex;gap:var(--space-1)}.chat__tab{padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:500;color:var(--color-ink-soft)}.chat__tab--active{background:var(--color-ink);color:#fff}.chat__close{color:var(--color-ink-faint)}.chat__list{flex:1;overflow-y:auto;padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}.chat__more{align-self:center;font-size:var(--text-xs);color:var(--color-secondary);font-weight:600}.chat__empty{color:var(--color-ink-faint);font-size:var(--text-sm);text-align:center;margin:auto}.chat__message{display:grid;grid-template-columns:1fr auto;gap:0 var(--space-2)}.chat__author{font-size:var(--text-xs);font-weight:600;color:var(--color-secondary)}.chat__time{font-size:var(--text-xs);color:var(--color-ink-faint)}.chat__body{grid-column:1 / -1;margin:0;font-size:var(--text-sm);overflow-wrap:anywhere}.chat__error{margin:0;padding:var(--space-1) var(--space-3);font-size:var(--text-xs);color:var(--color-danger)}.chat__form{display:flex;gap:var(--space-2);padding:var(--space-3);border-top:1px solid var(--color-surface-sunken)}.chat__form input{flex:1;padding:var(--space-2) var(--space-3);border:1.5px solid var(--color-surface-sunken);border-radius:var(--radius-pill);background:var(--color-surface)}.chat__form input:focus{border-color:var(--color-secondary);outline:none}.chat__form button{font-weight:600;color:var(--color-primary)}.chat__form button:disabled{color:var(--color-ink-faint)}.hud{position:absolute;bottom:var(--space-4);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-4);background:var(--color-surface-raised);border-radius:var(--radius-pill);box-shadow:var(--shadow-raised);z-index:var(--z-hud)}.hud__zone{font-size:var(--text-sm);font-weight:600;color:var(--color-secondary);white-space:nowrap}.hud__controls{display:flex;gap:var(--space-2)}.hud__meta{display:flex;gap:var(--space-3)}.hud__link{font-size:var(--text-sm);color:var(--color-ink-soft);font-weight:500;white-space:nowrap}.hud__link:hover{color:var(--color-ink)}.hud__error{position:absolute;bottom:calc(100% + var(--space-2));left:50%;transform:translate(-50%);margin:0;padding:var(--space-2) var(--space-4);background:var(--color-danger);color:#fff;border-radius:var(--radius-md);font-size:var(--text-sm);white-space:nowrap}.interaction-hint{position:absolute;top:0;left:0;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);margin-left:-0px;background:var(--color-ink);color:#fff;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:600;white-space:nowrap;box-shadow:var(--shadow-raised);will-change:transform}.interaction-hint kbd{background:#fff;color:var(--color-ink);border-radius:4px;padding:0 6px;font-family:var(--font-body);font-weight:700}.whiteboard__toolbar{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-3);flex-wrap:wrap}.whiteboard__colors,.whiteboard__widths{display:flex;gap:var(--space-2)}.whiteboard__color{width:26px;height:26px;border-radius:50%;border:2px solid transparent;transition:transform var(--duration-fast) var(--ease-out-expo)}.whiteboard__color--active{border-color:var(--color-ink);transform:scale(1.15)}.whiteboard__width{width:30px;height:30px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--color-surface-sunken)}.whiteboard__width--active{background:var(--color-ink)}.whiteboard__width span{display:block;border-radius:50%;background:currentColor;color:var(--color-ink)}.whiteboard__width--active span{color:#fff;background:#fff}.whiteboard__clear{margin-left:auto;color:var(--color-danger);font-size:var(--text-sm);font-weight:600}.whiteboard__canvas{width:100%;border-radius:var(--radius-md);border:1.5px solid var(--color-surface-sunken);background:#fff;cursor:crosshair;touch-action:none}.stickyboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-3)}.note{display:flex;flex-direction:column;border-radius:var(--radius-sm);box-shadow:var(--shadow-soft);min-height:140px;transform:rotate(-.6deg)}.note:nth-child(2n){transform:rotate(.8deg)}.note--yellow{background:#fbe27a}.note--coral{background:#ffb3ab}.note--teal{background:#a8e6df}.note--lavender{background:#cfc6ff}.note__body{flex:1;background:transparent;border:none;resize:none;padding:var(--space-3);font-size:var(--text-sm);color:var(--color-ink)}.note__body:focus{outline:none}.note__footer{display:flex;justify-content:flex-end;gap:var(--space-1);padding:var(--space-1) var(--space-2);opacity:0;transition:opacity var(--duration-fast) ease}.note:hover .note__footer,.note:focus-within .note__footer{opacity:1}.stickyboard__add{min-height:140px;border:2px dashed var(--color-ink-faint);border-radius:var(--radius-sm);color:var(--color-ink-soft);font-weight:600;transition:border-color var(--duration-fast) ease,color var(--duration-fast) ease}.stickyboard__add:hover{border-color:var(--color-secondary);color:var(--color-secondary)}.youtube__frame-wrap{position:relative;aspect-ratio:16 / 9}.youtube__frame{position:absolute;inset:0;width:100%;height:100%;border:none;border-radius:var(--radius-md)}.modal-backdrop{position:fixed;inset:0;background:var(--color-overlay);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);animation:modal-fade var(--duration-fast) ease-out}.modal{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);width:min(560px,calc(100vw - 2 * var(--space-6)));max-height:calc(100vh - 2 * var(--space-8));display:flex;flex-direction:column;animation:modal-pop var(--duration-normal) var(--ease-out-expo)}.modal--wide{width:min(960px,calc(100vw - 2 * var(--space-6)))}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-surface-sunken)}.modal__title{font-size:var(--text-lg)}.modal__close{color:var(--color-ink-faint);font-size:var(--text-base);padding:var(--space-1);border-radius:var(--radius-sm)}.modal__close:hover{color:var(--color-ink)}.modal__body{padding:var(--space-6);overflow:auto}@keyframes modal-fade{0%{opacity:0}}@keyframes modal-pop{0%{opacity:0;transform:translateY(12px) scale(.98)}}.presence{position:absolute;top:var(--space-4);right:var(--space-4);width:200px;max-height:40vh;background:var(--color-surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:var(--space-3) var(--space-4);overflow:auto;z-index:var(--z-panel)}.presence__title{font-size:var(--text-sm);display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2)}.presence__count{background:var(--color-secondary);color:#fff;border-radius:var(--radius-pill);font-size:var(--text-xs);padding:0 var(--space-2)}.presence__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}.presence__item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}.presence__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.presence__name em{color:var(--color-ink-faint);font-style:normal;font-size:var(--text-xs)}.bubble{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;gap:2px;margin-left:-44px;will-change:transform;pointer-events:none}.bubble__video{width:88px;height:66px;object-fit:cover;border-radius:var(--radius-md);border:2.5px solid #fff;box-shadow:var(--shadow-raised);background:var(--color-ink)}.bubble__placeholder{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--color-surface-raised);border:2.5px solid #fff;box-shadow:var(--shadow-soft);font-size:1rem}.bubble__placeholder--connecting{color:var(--color-ink-faint);animation:bubble-pulse 1.2s ease-in-out infinite}.bubble__label{font-size:var(--text-xs);font-weight:600;color:#fff;text-shadow:0 1px 3px rgb(30 36 48 / .6)}@keyframes bubble-pulse{50%{opacity:.4}}.screen-window{position:absolute;top:0;left:0;margin-left:-120px;display:flex;flex-direction:column;align-items:center;gap:2px;will-change:transform;pointer-events:none}.screen-window__hit{pointer-events:auto;padding:0;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-pop);border:3px solid var(--color-secondary);line-height:0}.screen-window__video{width:240px;height:135px;object-fit:contain;background:var(--color-ink)}.screen-window__video--big{width:100%;max-height:70vh;background:var(--color-ink);border-radius:var(--radius-md)}.screen-window__label{font-size:var(--text-xs);font-weight:600;color:#fff;text-shadow:0 1px 3px rgb(30 36 48 / .6)}.office{position:relative;height:100%;overflow:hidden}.office__canvas{position:absolute;inset:0;z-index:var(--z-canvas)}.office__canvas canvas{display:block}.office__world-overlay{position:absolute;inset:0;z-index:var(--z-world-overlay);pointer-events:none;overflow:hidden}.office__status{position:absolute;inset:0;display:grid;place-items:center;gap:var(--space-4);background:var(--color-surface);font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-ink-soft);z-index:var(--z-modal)}.office__status--error{color:var(--color-danger)}.office__status button{padding:var(--space-2) var(--space-4);background:var(--color-primary);color:#fff;border-radius:var(--radius-md);font-weight:600}:root{--color-surface: #faf7f2;--color-surface-raised: #ffffff;--color-surface-sunken: #f0ebe3;--color-ink: #1e2430;--color-ink-soft: #5a6372;--color-ink-faint: #98a0ad;--color-primary: #ff6b5e;--color-primary-strong: #e8554a;--color-secondary: #2ec4b6;--color-accent: #9b8cff;--color-warning: #f2b33d;--color-danger: #e0454e;--color-success: #3bb273;--color-overlay: rgb(30 36 48 / .45);--font-body: "Inter", system-ui, sans-serif;--font-display: "Outfit", var(--font-body);--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.25rem;--text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-pill: 999px;--shadow-soft: 0 4px 16px rgb(30 36 48 / .08);--shadow-raised: 0 8px 28px rgb(30 36 48 / .14);--shadow-pop: 0 12px 40px rgb(30 36 48 / .22);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--duration-fast: .15s;--duration-normal: .3s;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--z-canvas: 0;--z-world-overlay: 10;--z-hud: 20;--z-panel: 30;--z-modal: 40}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-ink);background:var(--color-surface);-webkit-font-smoothing:antialiased;overflow:hidden}h1,h2,h3{font-family:var(--font-display);margin:0}button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}input,textarea,select{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}