:root { color-scheme: dark; font: 14px system-ui, sans-serif; background: #141d25; color: #e4edf2; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { height: 100dvh; }
#scene { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
#scene:focus-visible { outline: 1px solid #8adbd5; outline-offset: -2px; }
.switch { position: fixed; top: max(18px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
.feed-toggle { display: flex; gap: 4px; padding: 4px; border: 1px solid #49606f80; border-radius: 12px; background: #16232deb; box-shadow: 0 4px 20px #0003; backdrop-filter: blur(12px); }
.feed-toggle button { display: flex; align-items: center; justify-content: center; gap: 9px; flex: 1; min-width: 0; min-height: 44px; touch-action: manipulation; padding: 9px 12px; border: 0; border-radius: 8px; font: inherit; font-size: clamp(12px, 2.7vw, 14px); line-height: 1.3; color: #9eafb9; background: transparent; cursor: pointer; transition: background .15s, color .15s; }
.feed-toggle button:hover { color: #e4edf2; background: #253a46; }
.feed-toggle button[aria-pressed="true"] { color: #f1f8fb; background: #35505e; box-shadow: 0 1px 4px #0003; }
.feed-toggle button:focus-visible { outline: 2px solid #8adbd5; outline-offset: -2px; }
.connection { display: grid; place-items: center; flex: 0 0 6px; color: #a7b4bd; }
.status-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; }
.connection[data-state="live"] { color: #91dfba; }
.connection[data-state="live"] .status-dot { animation: live-pulse 2.4s ease-in-out infinite; }
.connection[data-state="waiting"], .connection[data-state="reconnecting"] { color: #e4bf78; }
@keyframes live-pulse { 0%, 100% { box-shadow: 0 0 0 2px #91dfba10; } 50% { box-shadow: 0 0 0 4px #91dfba25; } }
@media (prefers-reduced-motion: reduce) { .feed-toggle button { transition: none; } .connection .status-dot { animation: none; } }

@media (max-width: 480px) {
  .feed-toggle button { padding: 10px 8px; gap: 8px; font-size: 13px; }
}
@media (hover: hover) and (pointer: fine) {
  #scene { cursor: grab; }
  #scene:active { cursor: grabbing; }
}