@import"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css";:root{--font-display: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--font-body: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--bg-deep: #08080a;--bg-primary: #0c0c0f;--bg-secondary: #141418;--bg-tertiary: #1c1c22;--bg-elevated: #24242c;--bg-card: #2a2a34;--surface: rgba(255, 255, 255, .03);--surface-hover: rgba(255, 255, 255, .06);--surface-active: rgba(255, 255, 255, .08);--border: rgba(255, 255, 255, .08);--border-subtle: rgba(255, 255, 255, .04);--border-strong: rgba(255, 255, 255, .15);--text-primary: #f5f5f7;--text-secondary: rgba(255, 255, 255, .65);--text-tertiary: rgba(255, 255, 255, .4);--text-muted: rgba(255, 255, 255, .25);--accent: #c9a962;--accent-hover: #dbb970;--accent-glow: rgba(201, 169, 98, .25);--wave-contemplative: #7c9eb2;--wave-passionate: #c75d5d;--wave-melancholic: #8b7cb5;--wave-joyful: #d4a853;--wave-serene: #6ba589;--wave-chaotic: #c76b8a;--success: #5cb585;--warning: #d4a853;--error: #c75d5d;--info: #7c9eb2;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--transition-fast: .15s cubic-bezier(.16, 1, .3, 1);--transition-normal: .3s cubic-bezier(.16, 1, .3, 1);--transition-slow: .5s cubic-bezier(.16, 1, .3, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);font-size:1rem;font-weight:400;line-height:1.6;color:var(--text-primary);background:var(--bg-deep);width:100%;height:100%;overflow:hidden}#root{width:100%;height:100%}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;line-height:1.15;letter-spacing:-.02em}a{color:var(--accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-hover)}button{font-family:var(--font-body);font-size:1rem;border:none;background:none;cursor:pointer;color:inherit}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::selection{background:var(--accent);color:var(--bg-deep)}html,body,#root{width:100%;height:100%;overflow:hidden;background:var(--bg-deep)}.app{width:100%;height:100%;position:relative}.debug-panel{position:absolute;top:var(--spacing-lg);right:var(--spacing-lg);background:#0c0c0ff2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:16px;padding:var(--spacing-lg);color:var(--text-primary);font-family:var(--font-body);min-width:220px;box-shadow:0 8px 32px #0006}.debug-panel h3{font-family:var(--font-display);font-size:1.25rem;font-weight:400;color:var(--text-primary);margin-bottom:var(--spacing-xs);letter-spacing:.02em}.debug-panel>p{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--spacing-lg)}.debug-panel .stats{display:flex;flex-direction:column;gap:var(--spacing-sm)}.debug-panel .stats div{font-size:.85rem;color:var(--text-secondary)}.fullscreen-btn{position:absolute;bottom:var(--spacing-lg);right:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-lg);background:#0c0c0fcc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:10px;color:var(--text-secondary);font-family:var(--font-body);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-normal)}.fullscreen-btn:hover{background:#c9a96226;border-color:var(--accent);color:var(--text-primary);transform:translateY(-2px)}.connection-status{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);border-radius:6px;font-size:.75rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;margin-top:var(--spacing-xs)}.connection-status:before{content:"";width:6px;height:6px;border-radius:50%}.connection-status.connected{background:#5cb58526;color:var(--success)}.connection-status.connected:before{background:var(--success);box-shadow:0 0 8px var(--success)}.connection-status.disconnected{background:#c75d5d26;color:var(--error)}.connection-status.disconnected:before{background:var(--error)}.mode-badge{display:inline-block;padding:var(--spacing-xs) var(--spacing-sm);background:#c9a96226;border:1px solid rgba(201,169,98,.3);border-radius:6px;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:var(--spacing-xs)}.mode-toggle{position:absolute;bottom:var(--spacing-lg);left:var(--spacing-lg)}.mode-toggle button{padding:var(--spacing-md) var(--spacing-lg);background:#0c0c0fcc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:10px;color:var(--text-secondary);font-family:var(--font-body);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-normal)}.mode-toggle button:hover{background:#c9a96226;border-color:var(--accent);color:var(--text-primary)}.zoom-controls{position:absolute;bottom:var(--spacing-lg);right:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-sm)}.zoom-controls button{width:48px;height:48px;background:#0c0c0fe6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:12px;color:var(--text-primary);cursor:pointer;font-size:1.25rem;font-weight:400;font-family:var(--font-body);transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center}.zoom-controls button:hover{background:#c9a96233;border-color:var(--accent);transform:scale(1.05)}.zoom-controls button:active{transform:scale(.95)}.zoom-controls .zoom-level{text-align:center;font-size:.7rem;font-weight:500;color:var(--text-muted);padding:var(--spacing-xs) 0;letter-spacing:.05em}.visitor-debug,.artist-debug{margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--border-subtle);max-height:160px;overflow-y:auto}.debug-title{font-size:.65rem;font-weight:600;color:var(--text-muted);margin-bottom:var(--spacing-sm);text-transform:uppercase;letter-spacing:.15em}.visitor-pos,.artist-pos{display:flex;align-items:center;gap:var(--spacing-sm);font-size:.7rem;padding:3px 0;font-family:SF Mono,Monaco,Inconsolata,monospace}.visitor-dot,.artist-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 8px currentColor}.visitor-coords,.artist-coords{color:var(--text-tertiary)}.visitor-score{color:var(--success);margin-left:auto;font-weight:600}.artist-name{color:var(--text-secondary);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.visitor-debug::-webkit-scrollbar,.artist-debug::-webkit-scrollbar{width:4px}.visitor-debug::-webkit-scrollbar-track,.artist-debug::-webkit-scrollbar-track{background:transparent}.visitor-debug::-webkit-scrollbar-thumb,.artist-debug::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:2px}.canvas-container{position:relative;width:100%;height:100%}.canvas-container:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(201,169,98,.03) 0%,transparent 50%),radial-gradient(ellipse 60% 40% at 80% 80%,rgba(124,158,178,.04) 0%,transparent 50%),radial-gradient(ellipse 50% 30% at 20% 60%,rgba(199,93,93,.03) 0%,transparent 50%);pointer-events:none;z-index:0}.title-overlay{position:absolute;top:var(--spacing-lg);left:var(--spacing-lg);z-index:10}.title-overlay h1{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:300;color:var(--text-primary);letter-spacing:.15em;text-transform:uppercase}.title-overlay p{font-size:.7rem;color:var(--text-muted);letter-spacing:.2em;text-transform:uppercase;margin-top:var(--spacing-xs)}@media(max-width:768px){.debug-panel{top:var(--spacing-md);right:var(--spacing-md);padding:var(--spacing-md);min-width:180px;font-size:.9rem}.debug-panel h3{font-size:1rem}.zoom-controls{bottom:var(--spacing-md);right:var(--spacing-md)}.zoom-controls button{width:40px;height:40px;font-size:1rem}.mode-toggle{bottom:var(--spacing-md);left:var(--spacing-md)}.title-overlay{top:var(--spacing-md);left:var(--spacing-md)}}