.tut{flex-direction:column;gap:12px;display:flex}.tut-kicker{letter-spacing:.04em;text-transform:uppercase;color:var(--muted-foreground);margin:10px 48px 0 0;font-size:13px;font-weight:600}.tut-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tut-stage{touch-action:pan-y;display:grid;overflow:hidden}.tut-slide{text-align:center;opacity:0;visibility:hidden;flex-direction:column;grid-area:1/1;align-items:center;gap:6px;min-width:0;padding:2px;transition:opacity .22s,transform .3s,visibility 0s linear .3s;display:flex;transform:translate(40px)}.tut-slide.past{transform:translate(-40px)}.tut-slide.on{opacity:1;visibility:visible;transition:opacity .25s 50ms,transform .3s,visibility;transform:none}.tut-pic{--tut-h:clamp(176px, 34vh, 236px);--tut-size:min(212px, calc(var(--tut-h) - 24px));width:100%;height:var(--tut-h);border-radius:var(--radius);border:var(--line-width) solid var(--border);cursor:pointer;background:color-mix(in srgb, var(--c) calc(var(--tint) * .55), var(--card));justify-content:center;align-items:center;margin-bottom:8px;display:flex}.sheet .tut-title{font-size:22px}.tut-line{text-wrap:balance;max-width:34ch;margin:0;font-size:16px;line-height:1.4}.tut-line+.tut-line{color:var(--muted-foreground);font-size:15px}.tut-slide.text-only{text-align:left;justify-content:center;align-items:stretch;gap:10px}.tut-slide.text-only .rules{margin:0}.tut-controls{color:var(--muted-foreground);margin:0;font-size:14px;line-height:1.45}.tut-nav{grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;display:grid}.tut-nav .btn{white-space:nowrap;padding:11px 14px;font-size:15px}.tut-back{justify-self:start}.tut-next{justify-self:end}.tut-dots{display:flex}.tut-dots button{cursor:pointer;background:0 0;border:0;place-items:center;width:16px;height:28px;padding:0;display:grid}.tut-dots span{background:color-mix(in srgb, var(--foreground) 25%, transparent);border-radius:99px;width:7px;height:7px;transition:background-color .2s,transform .2s}.tut-dots .on span{background:var(--foreground);transform:scale(1.3)}.tut-board{pointer-events:none;width:var(--tut-size);flex:none}.tut-board>svg.pz-svg{width:100%;height:auto;display:block}.tut-col{flex-direction:column;align-items:center;gap:8px;display:flex}.tut-col .tut-board:not(:last-child){width:calc(var(--tut-size) - 38px)}.tut-stack,.tut-swap{place-items:center;display:inline-grid}.tut-stack>*,.tut-swap>*{grid-area:1/1}.tut-band{z-index:1;pointer-events:none;background:color-mix(in srgb, var(--primary) 26%, transparent);border-radius:4px;position:absolute}.tut-sb .cell{position:relative}.tut-bad{border-radius:inherit;color:var(--danger);background:color-mix(in srgb, var(--danger) 22%, transparent);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.tut-ng{width:calc(var(--tut-size) + 8px)}.tut-ng .cells{position:relative}.tut-ng .cell span{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.tut-ng .clue{border-radius:6px}.tut-ks{position:relative}.tut-ks .cages{inset:calc(var(--cell-gap) / 2);width:calc(100% - var(--cell-gap));height:calc(100% - var(--cell-gap))}.tut-ks .cages path{vector-effect:non-scaling-stroke;stroke-width:1.4px;stroke-dasharray:4 3}.tut-ks .sum{z-index:3;background:var(--cell);border-radius:3px;padding:0 2px;font-size:11px}.tut-ks .v{place-items:center;display:grid}.tut-ks .v>*{grid-area:1/1}.tut-ks .d.tut-red{color:var(--danger)}.tut-sum{font:600 15px / 1 var(--font-mono);color:var(--foreground);background:var(--card);border:max(var(--line-width), 1px) solid var(--border);border-radius:99px;align-items:center;gap:6px;margin:0;padding:6px 12px;display:inline-flex}.tut-sum.bad{color:var(--danger);border-color:var(--danger)}.tut-count{z-index:1;font:600 11px / 1 var(--font-mono);color:var(--foreground);opacity:.7;position:absolute;top:3px;left:4px}.sk-preview.tut-wrong{border-style:solid;border-color:var(--danger);background:color-mix(in srgb, var(--danger) 16%, transparent)}.sk-preview.tut-wrong .sk-bubble{background:var(--danger);color:var(--cell)}.tut-ar .arrow.t-leave{opacity:0}.tut-ar .halo.tut-blocker{stroke:color-mix(in srgb, var(--danger) 32%, transparent)}.tut-tap{fill:none;stroke:var(--foreground);stroke-width:.05px;opacity:0;transform-box:fill-box;transform-origin:50%}.tut-hearts{justify-content:center;gap:4px;display:flex}.tut-np .t-draw{stroke-dasharray:1 1}.tut-ghost{fill:none;stroke:var(--danger);stroke-width:26px;stroke-linecap:round}.tut .t-on,.tut .t-out{opacity:0}.tut-pic .t-pulse,.tut-pic .t-pop{transform-box:fill-box;transform-origin:50%}.tut-slide.run .t-pop{animation:t-pop var(--t,.36s) cubic-bezier(.3, 1.4, .5, 1) var(--d,0s) both}.tut-slide.run .t-in{animation:t-in var(--t,.3s) ease var(--d,0s) both}.tut-slide.run .t-out{animation:t-out var(--t,.3s) ease var(--d,0s) both}.tut-slide.run .t-on{animation:t-on var(--t,1s) linear var(--d,0s)}.tut-slide.run .t-pulse{animation:t-pulse var(--t,.5s) ease var(--d,0s)}.tut-slide.run .t-shake{animation:t-shake .45s ease var(--d,0s)}.tut-slide.run .t-glow{animation:t-glow var(--t,.9s) ease var(--d,0s)}.tut-slide.run .t-sweep{transform-origin:0;animation:t-sweep var(--t,.22s) ease-out var(--d,0s) both}@keyframes t-pop{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}@keyframes t-in{0%{opacity:0}to{opacity:1}}@keyframes t-out{0%{opacity:1}to{opacity:0}}@keyframes t-on{0%{opacity:0}10%,88%{opacity:1}to{opacity:0}}@keyframes t-pulse{45%{transform:scale(1.22)}}@keyframes t-shake{15%,55%{translate:-3px}35%,75%{translate:3px}}@keyframes t-glow{30%,70%{filter:brightness(1.15)saturate(1.35);transform:scale(.94)}}@keyframes t-sweep{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.tut-slide.run .clue.t-mark{animation:t-mark var(--t) ease var(--d)}.tut-slide.run .clue.t-undim{animation:t-undim .4s ease var(--d2) backwards}.tut-slide.run .clue.t-mark.t-undim{animation:t-mark var(--t) ease var(--d), t-undim .4s ease var(--d2) backwards}@keyframes t-mark{10%,90%{background:color-mix(in srgb, var(--primary) 40%, transparent);color:var(--foreground);opacity:1}}@keyframes t-undim{0%{color:var(--foreground);opacity:1}}.tut-slide.run .cages .t-cage{animation:1.4s .2s t-cage}@keyframes t-cage{30%,70%{stroke-width:3px}}.tut-slide.run .sk-preview.tut-drag{animation:t-on var(--t) linear var(--d), t-sk-drag var(--t2) ease-in-out var(--d) both}@keyframes t-sk-drag{0%{width:calc((100% + var(--cell-gap)) * 1 / var(--cols) - var(--cell-gap));height:calc((100% + var(--cell-gap)) * 1 / var(--rows) - var(--cell-gap))}45%{width:calc((100% + var(--cell-gap)) * 3 / var(--cols) - var(--cell-gap));height:calc((100% + var(--cell-gap)) * 1 / var(--rows) - var(--cell-gap))}75%,to{width:calc((100% + var(--cell-gap)) * 3 / var(--cols) - var(--cell-gap));height:calc((100% + var(--cell-gap)) * 2 / var(--rows) - var(--cell-gap))}}.tut-slide.run .tut-ar .arrow.t-leave{animation:t-ar-fade var(--t) linear var(--d) both}.tut-slide.run .tut-ar .arrow.t-leave .body{animation:t-ar-body var(--t) cubic-bezier(.45, 0, .75, .45) var(--d) both}.tut-slide.run .tut-ar .arrow.t-leave .head{animation:t-ar-head var(--t) cubic-bezier(.45, 0, .75, .45) var(--d) both}@keyframes t-ar-fade{0%,70%{opacity:1}to{opacity:0}}@keyframes t-ar-body{0%{stroke-dashoffset:0}to{stroke-dashoffset:var(--off)}}@keyframes t-ar-head{0%{transform:none}to{transform:translate(var(--tx), var(--ty))}}.tut-slide.run .tut-ar .arrow.t-bump{animation:ar-bump .42s ease var(--d)}.tut-slide.run .tut-ar .arrow.t-bump .body{animation:t-red-stroke var(--t) linear var(--d)}.tut-slide.run .tut-ar .arrow.t-bump .head{animation:t-red-head var(--t) linear var(--d)}@keyframes t-red-stroke{0%,to{stroke:var(--danger)}}@keyframes t-red-head{0%,to{fill:var(--danger);stroke:var(--danger)}}.tut-slide.run .tut-tap.t-on{animation:t-tap var(--t) ease-out var(--d)}@keyframes t-tap{0%{opacity:0;transform:scale(1.8)}45%{opacity:.8;transform:scale(1)}75%{opacity:.8}to{opacity:0;transform:scale(.9)}}.tut-slide.run .tut-ar .dot.t-ripple{animation:t-ar-dot var(--t) ease var(--d) both}@keyframes t-ar-dot{40%{transform:scale(2.6)}}.tut-slide.run .hearts svg.t-heart{animation:t-heart var(--t) ease var(--d) both}@keyframes t-heart{0%{fill:var(--danger);stroke:#0000;transform:scale(1)}50%{transform:scale(1.3)}}.tut-slide.run .tut-np .t-draw{animation:t-draw var(--t) linear var(--d) both}@keyframes t-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}.tut-slide.run .tut-np .cell.t-reach{animation:t-reach-cell var(--t) linear var(--d) backwards}@keyframes t-reach-cell{0%,to{background-color:var(--cell)}}.tut-slide.run .tut-np .badge.t-reach circle{animation:t-reach-ring var(--t) linear var(--d) backwards}.tut-slide.run .tut-np .badge.t-reach text{animation:t-reach-text var(--t) linear var(--d) backwards}@keyframes t-reach-ring{0%,to{fill:var(--cell);stroke:var(--foreground)}}@keyframes t-reach-text{0%,to{fill:var(--foreground)}}.tut-slide.run .tut-np .wall.t-wall{animation:t-wall var(--t) ease var(--d)}@keyframes t-wall{20%,80%{stroke:var(--danger);stroke-width:18px}}.tut-slide.run .tut-np .t-linepulse .line{animation:np-pulse .7s ease var(--pd) 2}.tut-slide.run .tut-np .t-linepulse .line.t-draw{animation:t-draw var(--t) linear var(--d) both, np-pulse .7s ease var(--pd) 2}@media (prefers-reduced-motion:reduce){.tut-slide,.tut-slide *{transition:none!important;animation:none!important}.tut-slide,.tut-slide.past{transform:none}}