* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #05060a; color: #fff; font-family: ui-sans-serif, system-ui, sans-serif; }
[id="3-bloby-problem"] { position: fixed; inset: 0; width: 100vw; height: 100vh; }
main { position: fixed; inset: 0; z-index: 1; pointer-events: none; text-align: center; }
h1 { position: absolute; top: 2rem; left: 50%; margin: 0; transform: translateX(-50%); font-size: clamp(1.1rem, 3vw, 2.2rem); letter-spacing: .08em; white-space: nowrap; mix-blend-mode: difference; }
p { position: absolute; top: 4.5rem; left: 50%; margin: 0; transform: translateX(-50%); font-size: clamp(.75rem, 1.5vw, 1rem); letter-spacing: .04em; white-space: nowrap; mix-blend-mode: difference; }
button { pointer-events: auto; position: absolute; right: 1.25rem; bottom: 1.25rem; padding: .65rem .85rem; color: #fff; background: rgba(8,9,18,.7); border: 1px solid rgba(255,255,255,.3); border-radius: 4px; cursor: pointer; }
button:hover, button:focus-visible { background: rgba(255,255,255,.15); }
#tuning-toggle { right: 1.25rem; bottom: 4.2rem; }
#solution-picker { position: absolute; top: 2rem; left: 1.25rem; display: grid; gap: .35rem; color: #fff; font-size: .72rem; letter-spacing: .08em; pointer-events: auto; mix-blend-mode: difference; }
#solution { padding: .35rem .5rem; color: #fff; background: rgba(8,9,18,.8); border: 1px solid rgba(255,255,255,.25); border-radius: 4px; font: inherit; letter-spacing: 0; }
#tuning-panel { position: absolute; right: 1.25rem; bottom: 7.5rem; display: grid; gap: .7rem; width: min(15rem, calc(100vw - 2rem)); max-height: calc(100vh - 8rem); overflow-y: auto; padding: 1rem; color: #fff; background: rgba(8,9,18,.82); border: 1px solid rgba(255,255,255,.25); border-radius: 4px; text-align: left; pointer-events: auto; backdrop-filter: blur(14px); }
#tuning-panel[hidden] { display: none; }
#tuning-panel label { display: grid; grid-template-columns: 1fr auto; gap: .3rem .7rem; font-size: .75rem; }
#tuning-panel output { color: #bdb5ff; font-variant-numeric: tabular-nums; }
#tuning-panel input { grid-column: 1 / -1; width: 100%; accent-color: #8e6cff; }
#reset-tuning { position: static; grid-column: 1 / -1; width: 100%; }
@media (max-width: 640px) { h1 { top: 1.25rem; } button { right: .75rem; bottom: .75rem; } #solution-picker { top: 1.25rem; left: .75rem; } #tuning-toggle { bottom: 4rem; } #tuning-panel { right: .75rem; bottom: 7rem; } }