@layer components{.dn-stage{-webkit-user-select:none;user-select:none;background:radial-gradient(55% 60% at 10% 6%,#ffc83a21,#0000 70%),radial-gradient(60% 65% at 92% 100%,#7f98ff2b,#0000 70%),#0c0b13;padding:0}.dn-hud{pointer-events:none;align-items:center;gap:16px;display:flex;position:absolute;top:14px;left:20px;right:20px}.dn-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}.dn-count{color:var(--on-dark-dim);align-items:center;gap:5px;font-size:14px;font-weight:650;display:inline-flex}.dn-mini{width:15px;height:15px}.dn-count .dn-moon{margin-left:6px}.dn-clock{letter-spacing:-.04em;margin-left:auto;font-size:34px;font-weight:600;line-height:1;position:relative}.dn-clock.is-done{color:var(--rn)}.dn-cost{letter-spacing:0;color:#ffb020;animation:dn-rise 1.1s var(--ease-out) both;margin-top:4px;font-size:14px;font-weight:700;position:absolute;top:100%;right:0}@keyframes dn-rise{0%{opacity:0;transform:translateY(-4px)}15%{opacity:1;transform:none}70%{opacity:1}to{opacity:0;transform:translateY(8px)}}.dn-area{place-items:center;display:grid;position:absolute;inset:60px 20px 92px;container-type:size}.dn-board{--gap:clamp(3px, 1.1cqmin, 7px);aspect-ratio:1;width:min(100cqw,100cqh);position:relative}.dn-grid{grid-template:repeat(var(--n), minmax(0, 1fr)) / repeat(var(--n), minmax(0, 1fr));gap:var(--gap);width:100%;height:100%;display:grid}.dn-cell{min-width:0;min-height:0;transition:background-color .14s ease, transform .16s var(--ease-spring);background:#ffffff0e;border-radius:22%;place-items:center;display:grid;position:relative;box-shadow:inset 0 0 0 1px #ffffff12}@media (hover:hover){.dn-cell:not(.is-given):hover{background-color:#ffffff1a}}.dn-cell:not(.is-given):active{transform:scale(.94)}.dn-cell.is-given{background-color:#ffffff29;box-shadow:inset 0 -2px #00000047,inset 0 1px #ffffff24}.dn-cell:focus-visible{z-index:2;outline:2px solid var(--rn);outline-offset:2px}.dn-cell.is-bad{background-image:repeating-linear-gradient(135deg,#ff5b3a73 0 5px,#0000 5px 10px)}.dn-cell.is-hint:after{content:"";border-radius:inherit;animation:dn-glow 1.8s var(--ease-out) both;pointer-events:none;position:absolute;inset:-1px;box-shadow:inset 0 0 0 3px #ffb020}@keyframes dn-glow{0%,45%{opacity:1}to{opacity:0}}.dn-sym{width:64%;height:64%;animation:pop .22s var(--ease-pop) both}.dn-cell.is-given .dn-sym{animation:none}.dn-sun{fill:#ffc83a}.dn-moon{fill:#a9b9ff}.dn-board.is-solved .dn-cell{animation:dn-win .7s var(--ease-out) both;animation-delay:var(--d)}@keyframes dn-win{35%{background-color:#ccff3d6b;transform:scale(1.05)}}.dn-sign{z-index:3;left:calc((100% + var(--gap)) * var(--x) / var(--n) - var(--gap) / 2);top:calc((100% + var(--gap)) * var(--y) / var(--n) - var(--gap) / 2);width:max(15px, calc(36% / var(--n)));aspect-ratio:1;pointer-events:none;background:#23222f;border-radius:50%;place-items:center;display:grid;position:absolute;translate:-50% -50%;box-shadow:0 0 0 1.5px #ffffff73,0 2px 6px #0000008c}.dn-sign svg{fill:none;stroke:#fff;stroke-width:1.8px;stroke-linecap:round;width:82%;height:82%}.dn-sign.is-bad{background:#ff5b3a;box-shadow:0 0 0 1.5px #ffb3a3,0 2px 6px #0000008c}.dn-rules{display:none}@container (min-width:980px){.dn-rules{width:190px;color:var(--on-dark-dim);gap:14px;font-size:13px;line-height:1.3;display:grid;position:absolute;top:50%;left:28px;translate:0 -50%}.dn-rules li{gap:6px;display:grid}.dn-rules li>span{align-items:center;gap:3px;height:22px;display:flex}.dn-rules svg{width:20px;height:20px}.dn-rules .dn-sign.is-flat{width:22px;position:static;translate:none}.dn-rules .dn-sign.is-flat svg{width:82%;height:82%}.dn-no{opacity:.5;display:grid;position:relative}.dn-no:after{content:"";background:#ff7a5c;border-radius:1px;height:2px;position:absolute;top:50%;left:-2px;right:-2px;rotate:-40deg}}.dn-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}.dn-foot p.is-hint{color:var(--on-dark);animation:pop .26s var(--ease-pop) both}.dn-tools{flex:none;gap:8px;display:flex}.dn-tools .key:focus-visible{outline:2px solid var(--rn);outline-offset:2px}.dn-hint{--key:#ffb020;--key-ink:#0d0d0f;--edge:#78460073}@media (max-width:520px){.dn-hud{gap:12px}.dn-level{letter-spacing:.06em}.dn-area{bottom:132px}.dn-foot{flex-direction:column;gap:14px}.dn-foot p{text-align:center;text-wrap:balance;min-height:2.6em}}.dn-tiny{flex:none;gap:2px;width:120px;display:grid}.dn-tiny i{aspect-ratio:1;border-radius:50%}.dn-tiny i.dn-sun{background:#ffc83a}.dn-tiny i.dn-moon{background:#a9b9ff}.dn-tiny i.is-given{box-shadow:0 0 0 1.5px var(--stage-ink)}@media (prefers-reduced-motion:reduce){.dn-sym,.dn-board.is-solved .dn-cell,.dn-cost,.dn-cell.is-hint:after,.dn-foot p.is-hint{animation:none}.dn-cell{transition:none}}}