* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0e1116; color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.layout { display: flex; align-items: center; justify-content: center; height: 100vh; gap: 16px; padding: 16px; }
#dish { display: block; width: min(70vh, 70vw); height: min(70vh, 70vw); border-radius: 50%; background: radial-gradient(circle, #1a1f28 0%, #11141a 100%); box-shadow: 0 0 0 2px rgba(255,255,255,0.08), 0 20px 60px rgba(0,0,0,0.6); }
#chart { display: block; width: 260px; height: 160px; background: rgba(20,24,32,0.9); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; }
.sidebar { display: flex; flex-direction: column; gap: 10px; }
.btn { padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: rgba(20,24,32,0.85); color: #fff; font-size: 13px; cursor: pointer; backdrop-filter: blur(4px); min-width: 160px; text-align: left; }
.btn:hover { background: rgba(255,255,255,0.12); }
.slider { font-size: 12px; opacity: 0.85; display: flex; flex-direction: column; gap: 6px; }
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.panel { background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 10px 12px; }
.top-right { position: absolute; top: 12px; right: 12px; }
.bottom-left { position: absolute; bottom: 12px; left: 12px; }
.hud-value { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}