:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #10142d; background: #f7f5ed; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #d7d5cb; }
header a { color: #4a4092; text-decoration: none; font-weight: 800; }
header label { display: flex; align-items: center; gap: 7px; }
select, button { padding: 9px 11px; border: 1px solid #b8b4a6; border-radius: 999px; color: #10142d; background: white; font: inherit; font-weight: 750; }
main { display: grid; place-items: center; gap: 15px; padding: 16px; }
.warning { max-width: 620px; padding: 10px 14px; border-radius: 10px; color: #694f11; background: #fff0bc; font-size: .83rem; text-align: center; }
.controller { width: min(82vmin, 660px); aspect-ratio: 1; position: relative; display: grid; place-items: center; padding: 12%; border: clamp(12px, 3vmin, 26px) solid white; border-radius: 4%; background: white; box-shadow: 0 10px 45px rgba(16,20,45,.17); }
.controller img { width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; }
.edge { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: white; background: #10142d; font-size: 1.5rem; font-weight: 950; }
.top { top: 1.5%; left: 50%; transform: translateX(-50%); }
.right { right: 1.5%; top: 50%; transform: translateY(-50%); }
.bottom { bottom: 1.5%; left: 50%; transform: translateX(-50%); }
.left { left: 1.5%; top: 50%; transform: translateY(-50%); }
#status { margin: 0; color: #686a77; font-size: .78rem; }
@media (display-mode: fullscreen) { header, .warning, #status { display: none; } main { min-height: 100vh; padding: 2vmin; } .controller { width: 96vmin; } }
@media (max-width: 620px) { header { flex-wrap: wrap; } header button { width: 100%; } }