@layer components{.os-stage{-webkit-user-select:none;user-select:none;background:radial-gradient(70% 60% at 50% 35%,#22122f 0%,#08060c 72%);padding:0}.os-hud{pointer-events:none;align-items:center;gap:16px;display:flex;position:absolute;top:14px;left:20px;right:20px}.os-level{letter-spacing:.14em;text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--on-dark-dim);font-size:12px;font-weight:600;overflow:hidden}.os-fill{color:var(--on-dark-dim);font-size:14px;font-weight:650}.os-clock{letter-spacing:-.04em;margin-left:auto;font-size:34px;font-weight:600;line-height:1;position:relative}.os-clock.is-done{color:var(--rn)}.os-cost{letter-spacing:0;color:#ffb020;animation:os-rise 1.1s var(--ease-out) both;margin-top:4px;font-size:14px;font-weight:700;position:absolute;top:100%;right:0}@keyframes os-rise{0%{opacity:0;transform:translateY(-4px)}15%{opacity:1;transform:none}70%{opacity:1}to{opacity:0;transform:translateY(8px)}}.os-area{place-items:center;display:grid;position:absolute;inset:60px 20px 92px;container-type:size}.os-board{aspect-ratio:1;touch-action:none;cursor:pointer;border-radius:14px;outline:none;width:min(100cqw,100cqh);position:relative}.os-board:focus-visible{box-shadow:0 0 0 3px var(--rn)}.os-grid{grid-template:repeat(var(--n), minmax(0, 1fr)) / repeat(var(--n), minmax(0, 1fr));gap:3px;display:grid;position:absolute;inset:0}.os-grid i{background:#ffffff0f;border-radius:18%;transition:background-color .16s;box-shadow:inset 0 0 0 1px #ffffff0f}.os-grid i.is-on{background:#ffffff1a}.os-draw{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.os-seg{stroke-width:.4px;stroke-linecap:round}.os-head{stroke:#0d0d0f;stroke-width:.06px}.os-wall{stroke:#f4f1ff;stroke-width:.12px;stroke-linecap:round}.os-num circle{fill:#f4f1ff;stroke:#0d0d0f;stroke-width:.05px}.os-num text{text-anchor:middle;dominant-baseline:central;fill:#0d0d0f;font-size:.36px;font-weight:800}.os-num.is-on circle{fill:var(--rn)}.os-num.is-next circle{stroke:var(--rn);stroke-width:.07px}.os-board.is-solved .os-seg{animation:os-glow .9s var(--ease-out) both}@keyframes os-glow{40%{stroke-width:.52px}}.os-foot{left:24px;right:24px;bottom:max(22px, calc(env(safe-area-inset-bottom) + 12px));color:var(--on-dark-dim);justify-content:space-between;align-items:center;gap:12px;font-size:14px;display:flex;position:absolute}.os-tools{flex:none;gap:8px;display:flex}.os-tools .key:focus-visible{outline:2px solid var(--rn);outline-offset:2px}.os-hint{--key:#ffb020;--key-ink:#0d0d0f;--edge:#78460073}.os-foot p.is-hint{color:var(--on-dark);animation:pop .26s var(--ease-pop) both}@media (max-width:520px){.os-hud{gap:12px}.os-level{letter-spacing:.06em}.os-area{bottom:132px}.os-foot{flex-direction:column;gap:14px}.os-foot p{text-align:center;text-wrap:balance;min-height:2.6em}}.os-tiny{aspect-ratio:1;background:var(--play);border-radius:10px;flex:none;width:112px;position:relative}@media (prefers-reduced-motion:reduce){.os-board.is-solved .os-seg,.os-cost,.os-foot p.is-hint{animation:none}.os-grid i{transition:none}}}