*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark:#000;--bg-surface:#0a0a0a;--bg-surface-elevated:#141414;--gold-primary:#e8a940;--gold-glow:#e8a94014;--gold-muted:#e8a9404d;--text-primary:#fff;--text-secondary:#a3a3a3;--text-tertiary:#737373;--border-subtle:#ffffff0f;--border-strong:#ffffff26;--border-gold:#e8a94033;--shadow-glow:#000c;--font-serif:"Lora", Georgia, serif;--font-sans:"DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"DM Mono", monospace;--gold-text:#e8a940;--btn-primary-bg:#e8a940;--btn-primary-text:#000;--btn-primary-shadow:#e8a94026;--space-1:.25rem;--space-2:.5rem;--space-3:1rem;--space-4:1.5rem;--space-5:2rem;--space-6:3rem;--space-7:4rem;--space-8:6rem;--space-9:8rem;--ease-out-quint:cubic-bezier(.22, 1, .36, 1)}[data-theme=light]{--bg-dark:#fafafa;--bg-surface:#fff;--bg-surface-elevated:#f3f4f6;--gold-primary:#e8a940;--gold-glow:#e8a94026;--gold-muted:#e8a94066;--gold-text:#b47814;--text-primary:#171717;--text-secondary:#525252;--text-tertiary:#a3a3a3;--border-subtle:#00000014;--border-strong:#0003;--border-gold:#e8a9404d;--shadow-glow:#ffffffe6;--btn-primary-bg:#171717;--btn-primary-text:#fff;--btn-primary-shadow:#00000026}body{font-family:var(--font-sans);background-color:var(--bg-dark);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;overscroll-behavior:none;touch-action:none;line-height:1.6;overflow:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);color:var(--text-primary);font-weight:400;line-height:1.1}a{color:inherit;text-decoration:none}.glass-panel{-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-subtle);transition:all .3s var(--ease-out-quint);background:#0a0a0a99;border-radius:24px;box-shadow:0 8px 32px #0006}[data-theme=light] .glass-panel{background:#ffffffb3;box-shadow:0 8px 32px #0000000d}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.icon-btn{width:40px;height:40px;color:var(--text-secondary);cursor:pointer;transition:all .2s var(--ease-out-quint);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-btn:hover{color:var(--text-primary);background:var(--border-subtle)}.icon-btn.active{color:var(--gold-primary);background:var(--gold-glow)}.btn-primary{justify-content:center;align-items:center;gap:var(--space-2);font-family:var(--font-sans);padding:0 var(--space-3);cursor:pointer;height:36px;transition:all .3s var(--ease-out-quint);background:var(--btn-primary-bg);color:var(--btn-primary-text);box-shadow:0 4px 16px var(--btn-primary-shadow);border:none;border-radius:18px;font-size:.875rem;font-weight:500;display:inline-flex}.btn-primary:hover{box-shadow:0 6px 24px var(--gold-glow);transform:translateY(-1px)}.app-container{background-color:var(--bg-dark);width:100vw;height:100vh;position:relative;overflow:hidden}.app-container.grid-blank{background-image:none}.app-container.grid-dot{background-image:radial-gradient(var(--border-strong) 1px, transparent 1px);background-position:-16px -16px;background-size:32px 32px}.app-container.grid-ruled{background-image:linear-gradient(var(--border-strong) 1px, transparent 1px);background-size:100% 32px}.app-container.grid-isometric{background-image:linear-gradient(30deg, var(--border-subtle) 1px, transparent 1px), linear-gradient(150deg, var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);background-size:40px 69.28px}.canvas-placeholder{z-index:10;position:absolute;inset:0}.header-island{z-index:50;border-radius:16px;align-items:center;gap:.5rem;padding:.5rem .75rem;display:flex;position:fixed;top:1rem}.header-island-left{left:1rem}.header-island-right{right:1rem}.header-island-divider{background:var(--border-subtle);width:1px;height:24px;margin:0 .25rem}.doc-info{margin:0 .25rem}.doc-title{font-size:.9375rem;font-family:var(--font-sans);color:var(--text-primary);margin-bottom:0;font-weight:500;line-height:1.2}.doc-status{color:var(--text-tertiary);font-size:.6875rem;font-family:var(--font-sans);align-items:center;gap:.375rem;display:flex}.status-dot{border-radius:50%;width:6px;height:6px;display:inline-block}.status-dot.connected{background:#34d399;box-shadow:0 0 6px #34d39966}.status-dot.connecting{background:var(--gold-primary);animation:1.5s infinite pulse-status}.status-dot.disconnected{background:var(--text-tertiary)}@keyframes pulse-status{0%,to{opacity:1}50%{opacity:.3}}.share-btn{font-family:var(--font-mono);cursor:pointer;transition:all .2s var(--ease-out-quint);border:1px solid var(--border-gold);background:var(--gold-glow);color:var(--gold-primary);letter-spacing:.05em;border-radius:10px;align-items:center;gap:.375rem;padding:.375rem .75rem;font-size:.75rem;display:inline-flex}.share-btn:hover{border-color:var(--gold-primary);background:#e8a94026;transform:translateY(-1px)}.avatars{margin-right:0}.avatar{width:28px;height:28px;color:var(--bg-dark);border:2px solid var(--bg-surface);border-radius:50%;justify-content:center;align-items:center;margin-left:-6px;font-size:.6875rem;font-weight:600;display:flex}.avatar:first-child{margin-left:0}.tutor-avatar{background:var(--gold-primary);z-index:2}.student-avatar{background:var(--text-primary);z-index:1;position:relative}.overflow-avatar{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:.65rem}.pen-indicator{background-color:var(--gold-primary);border:1px solid var(--bg-surface);border-radius:50%;width:7px;height:7px;position:absolute;top:-2px;right:-2px}.follow-me-toggle{align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);transition:all .2s var(--ease-out-quint);background:var(--bg-surface-elevated);color:var(--text-secondary);border:1px solid var(--border-subtle);cursor:pointer;border-radius:9999px;font-size:.875rem;font-weight:500;display:flex}.follow-me-toggle:hover{color:var(--text-primary);background:var(--bg-surface-elevated);border-color:var(--border-strong);transform:translateY(-1px)}.follow-me-toggle:active{transform:translateY(1px)}.follow-me-toggle.active{background:var(--border-gold);color:var(--gold-primary);box-shadow:0 0 12px var(--gold-glow);border:1px solid var(--gold-primary)}@keyframes pulse-gold{0%{box-shadow:0 0 #e8a94066}70%{box-shadow:0 0 0 6px #e8a94000}to{box-shadow:0 0 #e8a94000}}.animate-pulse{animation:2s infinite pulse-gold}.pm-wrapper{position:relative}.pm-trigger{cursor:pointer;transition:opacity .2s}.pm-trigger:hover{opacity:.8}.pm-dropdown{right:0;top:calc(100% + var(--space-2));width:260px;padding:var(--space-2);gap:var(--space-1);z-index:50;animation:pm-fade-in .2s var(--ease-out-quint);flex-direction:column;display:flex;position:absolute}@keyframes pm-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.pm-header{padding:var(--space-1) var(--space-2);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-1);font-size:.75rem;font-weight:600}.pm-item{padding:var(--space-2);border-radius:8px;justify-content:space-between;align-items:center;transition:background-color .2s;display:flex}.pm-item:hover{background-color:#ffffff0d}.pm-info{align-items:center;gap:var(--space-2);display:flex}.pm-initials{border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:.75rem;font-weight:500;display:flex}.pm-color-dot{color:#000;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:.75rem;font-weight:600;display:flex}.tutor-initials{color:var(--text-primary);background-color:#ffffff1a}.student-initials{color:var(--text-secondary);background-color:#00000080}.pm-name{color:var(--text-primary);font-size:.8125rem;font-weight:500}.pm-actions{align-items:center;gap:var(--space-1);display:flex}.pm-action-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.pm-action-btn:hover{color:var(--text-primary);background-color:#ffffff1a}.pm-action-btn.active-pen{color:var(--gold-primary);background-color:var(--border-gold)}.icon-btn.danger-armed{color:#ef4444;background:#ef444426;animation:.8s infinite alternate danger-pulse}@keyframes danger-pulse{0%{box-shadow:0 0 #ef44444d}to{box-shadow:0 0 0 4px #ef444400}}@media (width<=480px){.header-island{border-radius:12px;padding:.375rem .5rem}.doc-title{font-size:.8125rem}.share-btn span{display:none}}.toolbar-wrapper{z-index:50;align-items:center;gap:.5rem;display:flex;position:fixed}@media (width>=769px){.toolbar-wrapper{flex-direction:column;bottom:2rem;left:50%;transform:translate(-50%)}.toolbar-panel{border-radius:9999px;flex-direction:row;gap:.25rem;padding:.5rem .75rem;display:flex}.toolbar-options{border-radius:16px;flex-direction:row;gap:1rem;max-width:360px;padding:.75rem;display:flex}}@media (width<=768px){.toolbar-wrapper{flex-direction:row;top:50%;left:1rem;transform:translateY(-50%)}.toolbar-panel{border-radius:20px;flex-direction:column;gap:.25rem;padding:.75rem .5rem;display:flex}.toolbar-options{border-radius:16px;flex-direction:column;gap:.75rem;max-width:200px;padding:.75rem;display:flex}}.toolbar-sep{background:var(--border-subtle)}@media (width>=769px){.toolbar-sep{width:1px;height:24px;margin:0 .125rem}}@media (width<=768px){.toolbar-sep{width:24px;height:1px;margin:.125rem 0}}.option-section{flex-direction:column;gap:.375rem;display:flex}.option-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);padding:0 .125rem;font-size:.625rem;font-weight:600}.color-grid{flex-wrap:wrap;gap:.375rem;max-width:160px;display:flex}.color-swatch{cursor:pointer;width:22px;height:22px;transition:transform .2s var(--ease-out-quint);border:2px solid #0000;border-radius:50%}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{border-color:var(--text-primary);box-shadow:0 0 0 2px var(--bg-surface);transform:scale(1.15)}.width-presets{align-items:center;gap:.25rem;display:flex}.width-preset{cursor:pointer;width:32px;height:32px;transition:all .2s var(--ease-out-quint);background:0 0;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;display:flex}.width-preset:hover{background:var(--border-subtle);border-color:var(--border-strong)}.width-preset.active{background:var(--gold-glow);border-color:var(--gold-primary)}.width-dot{background:var(--text-primary);transition:all .15s var(--ease-out-quint);border-radius:50%}.width-preset.active .width-dot{background:var(--gold-primary)}.view-only-badge{text-transform:uppercase;letter-spacing:.08em;color:var(--gold-primary);border:1px solid var(--border-gold);background:var(--gold-glow);border-radius:10px;padding:.375rem .75rem;font-size:.6875rem;font-weight:600}.selection-bar{z-index:55;animation:selection-bar-in .25s var(--ease-out-quint);border-radius:14px;align-items:center;gap:.25rem;padding:.375rem .5rem;display:flex;position:fixed;bottom:6rem;left:50%;transform:translate(-50%)}@media (width<=768px){.selection-bar{flex-direction:column;margin-right:3.5rem;inset:50% 1rem auto auto;transform:translateY(-50%)translate(0)}}@keyframes selection-bar-in{0%{opacity:0;transform:translate(-50%)translateY(8px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@media (width<=768px){@keyframes selection-bar-in{0%{opacity:0;transform:translateY(-50%)translate(8px)}to{opacity:1;transform:translateY(-50%)translate(0)}}}.selection-action{color:var(--text-secondary);font-family:var(--font-sans);cursor:pointer;transition:all .2s var(--ease-out-quint);white-space:nowrap;background:0 0;border:none;border-radius:10px;align-items:center;gap:.375rem;padding:.5rem .75rem;font-size:.8125rem;font-weight:500;display:flex}.selection-action:hover{color:var(--text-primary);background:var(--border-subtle)}.selection-action:active{transform:scale(.95)}.selection-action.danger:hover{color:#ef4444;background:#ef44441a}.selection-sep{background:var(--border-subtle);width:1px;height:20px}@media (width<=768px){.selection-sep{width:20px;height:1px}}.modal-backdrop{-webkit-backdrop-filter:blur(4px);z-index:100;animation:fadeIn .2s var(--ease-out-quint);background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--bg-surface);border:1px solid var(--border-subtle);transform-origin:50%;width:90%;max-width:600px;animation:scaleIn .3s var(--ease-out-quint);border-radius:24px;overflow:hidden;box-shadow:0 24px 64px #0006}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.modal-header{border-bottom:1px solid var(--border-subtle);padding:1.5rem}.modal-title{font-family:var(--font-sans);color:var(--text-primary);margin:0;font-size:1.25rem;font-weight:600}.modal-body{height:400px}.modal-sidebar{border-right:1px solid var(--border-subtle);background:var(--bg-surface-elevated);width:200px;padding:1.5rem}.tab-btn{width:100%;color:var(--text-secondary);font-family:var(--font-sans);cursor:pointer;transition:all .2s var(--ease-out-quint);text-align:left;background:0 0;border:none;border-radius:12px;align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.875rem;font-weight:500;display:flex}.tab-btn:hover{background:var(--border-subtle);color:var(--text-primary)}.tab-btn.active{background:var(--gold-glow);color:var(--gold-primary)}.modal-panels{flex:1;padding:2rem;overflow-y:auto}.setting-label{font-family:var(--font-sans);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin:0;font-size:.875rem;font-weight:600}.segmented-control{border:1px solid var(--border-subtle);background:#0003;border-radius:12px;padding:.25rem}[data-theme=light] .segmented-control{background:#0000000d}.segment-btn{color:var(--text-secondary);font-family:var(--font-sans);cursor:pointer;transition:all .2s var(--ease-out-quint);background:0 0;border:none;border-radius:8px;flex:1;padding:.75rem;font-size:.875rem;font-weight:500}.segment-btn:hover{color:var(--text-primary)}.segment-btn.active{background:var(--bg-surface-elevated);color:var(--text-primary);box-shadow:0 2px 8px #0003}[data-theme=light] .segment-btn.active{background:#fff;box-shadow:0 2px 8px #0000000d}.grid-options{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.grid-card{border:1px solid var(--border-subtle);cursor:pointer;transition:all .2s var(--ease-out-quint);color:var(--text-secondary);font-family:var(--font-sans);background:0 0;border-radius:12px;flex-direction:column;gap:.75rem;padding:.75rem;font-size:.875rem;font-weight:500;display:flex}.grid-card:hover{border-color:var(--border-strong);color:var(--text-primary)}.grid-card.active{border-color:var(--gold-primary);background:var(--gold-glow);color:var(--gold-primary)}.grid-preview{background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:8px;width:100%;height:60px}.grid-preview.blank{background-image:none}.grid-preview.dot{background-image:radial-gradient(var(--border-strong) 1px, transparent 1px);background-size:12px 12px}.grid-preview.ruled{background-image:linear-gradient(var(--border-strong) 1px, transparent 1px);background-size:100% 16px}.grid-preview.isometric{background-image:linear-gradient(30deg, var(--border-subtle) 1px, transparent 1px), linear-gradient(150deg, var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);background-size:20px 34.64px}.user-item{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:12px;padding:1rem}.user-name{font-family:var(--font-sans);color:var(--text-primary);font-size:.875rem;font-weight:600}.user-role{font-family:var(--font-sans);color:var(--text-tertiary);font-size:.75rem}.icon-btn.danger{color:var(--text-secondary)}.icon-btn.danger:hover{color:#ef4444;background:#ef44441a}.mode-options{flex-direction:column;gap:.5rem;display:flex}.mode-card{border:1px solid var(--border-subtle);cursor:pointer;transition:all .2s var(--ease-out-quint);text-align:left;background:0 0;border-radius:12px;flex-direction:column;gap:.25rem;padding:.875rem 1rem;display:flex}.mode-card:hover{border-color:var(--border-strong);background:#ffffff08}.mode-card.active{border-color:var(--gold-primary);background:var(--gold-glow)}.mode-card-header{align-items:center;gap:.5rem;display:flex}.mode-card-title{font-family:var(--font-sans);color:var(--text-primary);font-size:.875rem;font-weight:600}.mode-card.active .mode-card-title,.mode-card.active .mode-card-header{color:var(--gold-primary)}.mode-card-desc{font-family:var(--font-sans);color:var(--text-tertiary);margin-left:1.5rem;font-size:.75rem}