.tut-root{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:1.5rem;background:#0a0c0db8;background:color-mix(in srgb,var(--void) 72%,transparent)}.tut-root[hidden]{display:none}.tut-panel{width:min(38rem,100%);max-height:100%;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem .75rem}.tut-panel:focus{outline:none}.tut-head{display:flex;align-items:baseline;gap:.6rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}.tut-head h2{margin:0;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}.tut-count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-faint)}.tut-x{background:none;border:0;padding:0 .2rem;font-size:1.1rem;line-height:1;color:var(--ink-faint);cursor:pointer}.tut-x:hover{color:var(--ink)}.tut-stage{margin:.9rem 0 .7rem}.tut-diagram{display:block;width:100%;height:auto;max-height:42vh;margin:0 auto}.tut-table{display:block;width:100%;aspect-ratio:240 / 132;max-height:42vh;margin:0 auto;border-radius:6px}.tut-table[hidden],.tut-art[hidden]{display:none}.tut-rail{fill:var(--panel-2);stroke:var(--line)}.tut-tip-ink{fill:var(--ink-dim)}.tut-tip-good{fill:var(--good)}.tut-tip-foul{fill:var(--foul)}.tut-cloth{fill:var(--cloth);fill-opacity:.62}.tut-pocket{fill:var(--void)}.tut-called{fill:none;stroke:var(--brass);stroke-width:1.6;stroke-dasharray:3 3}.tut-string{stroke:var(--ink-faint);stroke-width:1;stroke-dasharray:2 4}.tut-ball-edge{stroke:#0000008c;stroke-width:.8}.tut-cue-mark{fill:#00000047}.tut-num{fill:#15181a;text-anchor:middle;font-family:var(--mono);font-weight:700}.tut-dim{opacity:.34}.tut-ghost{fill:none;stroke:var(--ink-faint);stroke-width:1.2;stroke-dasharray:3 3}.tut-shot{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:6 5}.tut-shot-ink{stroke:var(--ink-dim)}.tut-shot-good{stroke:var(--good)}.tut-shot-foul{stroke:var(--foul)}.tut-cross path{stroke:var(--foul);stroke-width:2.2;stroke-linecap:round}.tut-tag{fill:var(--ink-dim);text-anchor:middle;font-family:var(--sans);font-size:8px}.tut-tag-good{fill:var(--good)}.tut-tag-foul{fill:var(--foul)}.tut-tag-brass{fill:var(--brass)}.tut-tally circle{fill:none;stroke-width:2}.tut-tally-1{stroke:var(--ink-faint)}.tut-tally-2{stroke:var(--brass)}.tut-tally-3{stroke:var(--foul)}@keyframes tut-flow{to{stroke-dashoffset:-22}}.tut-flow{animation:tut-flow 1.1s linear infinite}.tut-body{margin:0 0 .85rem}.tut-sec{margin:0 0 .3rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}.tut-cap{margin:0;font-size:.92rem;line-height:1.45;color:var(--ink);text-align:left;min-height:4.4em}.tut-foot{display:flex;align-items:center;gap:.75rem;padding-top:.6rem;border-top:1px solid var(--line)}.tut-nav{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);color:var(--ink-dim);padding:.25rem .7rem;cursor:pointer}.tut-nav:hover:not(:disabled){color:var(--ink);border-color:var(--ink-faint)}.tut-nav:disabled{opacity:.35;cursor:default}.tut-dots{display:flex;gap:.4rem;margin:0 auto}.tut-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer}.tut-dot:hover{background:var(--ink-faint)}.tut-dot.on{background:var(--ink-dim)}.tut-clock{margin:.6rem 0 0;text-align:center;font-size:11px;color:var(--ink-faint)}.tut-panel :focus-visible,.tut-panel:focus-visible{outline:2px solid var(--brass);outline-offset:2px}@media(prefers-reduced-motion:reduce){.tut-flow{animation:none}}@media(max-width:30rem){.tut-root{padding:.75rem}.tut-cap{font-size:.88rem}}[data-layout=compact] .tut-root{padding:.5rem}[data-layout=compact] .tut-panel{width:100%;height:100%;max-height:100%;overflow:hidden;padding:.4rem .7rem;display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"head head" "stage body" "foot foot" "clock clock";column-gap:.8rem}[data-layout=compact] .tut-head{grid-area:head;padding-bottom:.3rem}[data-layout=compact] .tut-head h2{font-size:.7rem}[data-layout=compact] .tut-x{min-width:44px;min-height:34px;font-size:1.25rem;text-align:right}[data-layout=compact] .tut-stage{grid-area:stage;margin:0;min-height:0;display:flex;align-items:center}[data-layout=compact] .tut-diagram,[data-layout=compact] .tut-table{max-height:100%}[data-layout=compact] .tut-table{min-height:0;min-width:0}[data-layout=compact] .tut-body{grid-area:body;margin:0;min-height:0;overflow-y:auto;padding:.25rem .25rem .25rem 0;-webkit-overflow-scrolling:touch}[data-layout=compact] .tut-sec{font-size:.68rem}[data-layout=compact] .tut-cap{font-size:.86rem;line-height:1.4;min-height:0}[data-layout=compact] .tut-foot{grid-area:foot;padding-top:.3rem;gap:.5rem}[data-layout=compact] .tut-nav{min-width:44px;min-height:44px;padding:0;font-size:1.05rem}[data-layout=compact] .tut-dot{width:10px;height:10px}[data-layout=compact] .tut-clock{grid-area:clock;margin:.2rem 0 0;font-size:10px}@media(orientation:portrait){[data-layout=compact] .tut-panel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;grid-template-areas:"head" "stage" "body" "foot" "clock"}[data-layout=compact] .tut-diagram{max-height:30vh}}