:root{--bg: #07070a;--accent: #9b6bff;--text: #e8e8ea;--dim: #8b8c92;--faint: #56575e}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{background:var(--bg);color:var(--text);font-family:Geist Mono,ui-monospace,SF Mono,monospace;overflow:hidden}#root{position:relative}canvas{display:block;touch-action:none}.hud{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none;padding:26px 30px;display:flex;flex-direction:column;justify-content:space-between}.hud-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}.hud-id{display:inline-flex;align-items:center;gap:10px}.mute{pointer-events:auto;font-family:Geist Mono,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:5px 10px;cursor:pointer;transition:color .2s,border-color .2s}.mute:hover{color:var(--text);border-color:#9b6bff73}.hud-actions{display:inline-flex;align-items:center;gap:10px}.hud-back{pointer-events:auto;font-family:Geist Mono,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:5px 10px;text-decoration:none;transition:color .2s,border-color .2s}.hud-back:hover{color:var(--text);border-color:#9b6bff73}.hud-top .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}.hud-top b{color:var(--text);font-weight:500}.hud-bottom{font-size:11px;letter-spacing:.12em;color:var(--faint)}.hint{position:absolute;left:50%;bottom:32px;transform:translate(-50%);z-index:10;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);animation:pulse 3s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.4}50%{opacity:.9}}.corner{position:absolute;width:22px;height:22px;border-color:#9b6bff66;border-style:solid;z-index:10}.corner.tl{top:18px;left:18px;border-width:1px 0 0 1px}.corner.tr{top:18px;right:18px;border-width:1px 1px 0 0}.corner.bl{bottom:18px;left:18px;border-width:0 0 1px 1px}.corner.br{bottom:18px;right:18px;border-width:0 1px 1px 0}@keyframes appearFade{0%{opacity:0}to{opacity:1}}.hud{animation:appearFade 1s ease .4s both}.corner{animation:appearFade .8s ease both}.corner.tr{animation-delay:.1s}.corner.bl{animation-delay:.2s}.corner.br{animation-delay:.3s}.scanlines{position:absolute;top:0;right:0;bottom:0;left:0;z-index:9;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.022) 0px,rgba(255,255,255,.022) 1px,transparent 1px,transparent 3px);opacity:.6}.grain{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.node-label{font-family:Geist Mono,monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--text);white-space:nowrap;transform:translateY(-34px);text-shadow:0 0 10px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.95);transition:opacity .2s;-webkit-user-select:none;user-select:none}.node-label:before{content:"[";margin-right:6px;color:var(--accent);opacity:.65}.node-label:after{content:"]";margin-left:6px;color:var(--accent);opacity:.65}.panel{position:absolute;top:50%;right:30px;transform:translateY(-50%) translate(24px);width:min(330px,calc(100vw - 60px));z-index:20;padding:22px 24px;background:#0b0b11d1;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(155,107,255,.28);border-radius:12px;opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s cubic-bezier(.22,1,.36,1)}.panel.open{opacity:1;transform:translateY(-50%) translate(0);pointer-events:auto}.panel-close{position:absolute;top:10px;right:14px;background:none;border:none;color:var(--dim);font-size:22px;line-height:1;cursor:pointer}.panel-close:hover{color:var(--text)}.panel-type{font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}.panel-title{font-family:Geist Mono,monospace;font-size:20px;font-weight:500;color:var(--text);margin-bottom:12px}.panel-desc{font-size:13.5px;line-height:1.55;color:var(--dim);margin-bottom:16px}.panel-stack{display:flex;flex-wrap:wrap;gap:6px}.panel-stack span{font-family:Geist Mono,monospace;font-size:11px;padding:3px 9px;border:1px solid rgba(255,255,255,.1);border-radius:5px;color:var(--dim)}@media (max-width: 600px){.panel{top:auto;bottom:70px;right:16px;left:16px;width:auto;transform:translateY(24px)}.panel.open{transform:translateY(0)}.hud{padding:18px 16px}.hud-top{font-size:11px}.node-label{font-size:10px;transform:translateY(-30px)}.corner{width:16px;height:16px}.hint{bottom:22px;font-size:10px}}