@layer components{.lu-stage{-webkit-user-select:none;user-select:none;background:radial-gradient(70% 60% at 50% 35%,#1a1430 0%,#07060c 72%);padding:0}.lu-hud{pointer-events:none;align-items:center;gap:16px;display:flex;position:absolute;top:14px;left:20px;right:20px}.lu-stat{color:var(--on-dark-dim);white-space:nowrap;font-size:13px;font-weight:600}.lu-stat b{letter-spacing:-.02em;color:var(--on-dark);font-size:18px;font-weight:700}.lu-clock{letter-spacing:-.04em;margin-left:auto;font-size:34px;font-weight:600;line-height:1;position:relative}.lu-clock.is-done{color:var(--rn)}.lu-plus{letter-spacing:0;color:#ffb255;animation:lu-plus 1.2s var(--ease-out) both;margin-top:4px;font-size:14px;position:absolute;top:100%;right:0}@keyframes lu-plus{0%{opacity:0;transform:translateY(-6px)}15%{opacity:1;transform:none}75%{opacity:1}to{opacity:0}}.lu-area{place-items:center;display:grid;position:absolute;inset:60px 20px 92px;container-type:size}.lu-board{aspect-ratio:1;touch-action:none;cursor:pointer;border-radius:12px;outline:none;width:min(100cqw,100cqh);position:relative}.lu-board:focus-visible{box-shadow:0 0 0 3px var(--rn)}.lu-grid{grid-template:repeat(var(--n), minmax(0, 1fr)) / repeat(var(--n), minmax(0, 1fr));gap:2px;display:grid;position:absolute;inset:0}.lu-grid i{background:#ffffff0e;border-radius:14%;transition:background-color .16s;box-shadow:inset 0 0 0 1px #ffffff0d}.lu-grid i.is-on{background:color-mix(in oklab, var(--c) 13%, transparent)}.lu-grid i.is-linked{background:color-mix(in oklab, var(--c) 30%, transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c) 30%, transparent)}.lu-draw{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.lu-pipe{fill:none;stroke-width:.36px;stroke-linecap:round;stroke-linejoin:round}.lu-dot circle:not(.lu-ring){stroke:#00000059;stroke-width:.04px}.lu-dot .lu-ring{stroke-width:.05px;opacity:.7}.lu-dot.is-pop{animation:lu-pop .42s var(--ease-spring) both}@keyframes lu-pop{0%{transform:scale(1)}40%{transform:scale(1.3)}}.lu-halo{opacity:.28;pointer-events:none}.lu-dot text{text-anchor:middle;dominant-baseline:central;fill:#0d0d0f;font-size:.34px;font-weight:800}.lu-board.is-solved .lu-pipe{animation:lu-flow .9s var(--ease-out) both}@keyframes lu-flow{40%{stroke-width:.48px}}.lu-cursor{left:calc(100% * var(--x) / var(--n));top:calc(100% * var(--y) / var(--n));width:calc(100% / var(--n));aspect-ratio:1;opacity:0;pointer-events:none;border-radius:18%;transition:left 90ms,top 90ms;position:absolute;box-shadow:inset 0 0 0 2px #ccff3dbf}.lu-board:focus-visible .lu-cursor{opacity:1}.lu-cursor.is-drawing{box-shadow:inset 0 0 0 3px var(--rn)}.lu-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}.lu-tools{flex:none;gap:8px;display:flex}.lu-tools .key:focus-visible{outline:2px solid var(--rn);outline-offset:2px}.lu-tiny{aspect-ratio:1;background:var(--play);border-radius:10px;flex:none;width:112px;position:relative;overflow:hidden}@media (max-width:520px){.lu-hud{gap:12px}.lu-area{bottom:132px}.lu-foot{flex-direction:column;gap:14px}.lu-foot p{text-align:center;text-wrap:balance;min-height:2.6em}}@media (prefers-reduced-motion:reduce){.lu-board.is-solved .lu-pipe,.lu-cursor,.lu-dot.is-pop{transition:none;animation:none}}}