.os-head{grid-template-columns:auto minmax(0,1fr) auto}.os-head h2{letter-spacing:-.045em}.board-frame{border-radius:var(--r-md);background-color:var(--paper);background-image:radial-gradient(circle at 1px 1px,color-mix(in oklch,var(--ink)14%,transparent)1.2px,transparent 1.6px);box-shadow:inset 0 0 0 1.5px var(--line),var(--shadow-1);background-size:22px 22px;margin-top:18px;position:relative;overflow:hidden}.whiteboard{touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;width:100%;height:auto;max-height:68dvh;margin-inline:auto;display:block}.os-stroke{fill:color-mix(in oklch,var(--signal)14%,transparent);stroke:var(--signal);stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.os-stroke.is-live{fill:none}.os-stroke.is-compare{fill:none;stroke-dasharray:8 6;stroke-width:3px}.os-target{fill:color-mix(in oklch,var(--route-1)55%,transparent);stroke:var(--text-1);stroke-width:3px;stroke-linejoin:round;pointer-events:none}.os-target.is-revealing{animation:reveal .65s var(--ease-out)both}@keyframes reveal{0%{opacity:0;transform:scale(.96)}}.os-target{transform-box:fill-box;transform-origin:50%}.os-guide{fill:none;stroke:var(--route-3);stroke-width:2.5px;stroke-dasharray:10 8;pointer-events:none}.os-guide-label{fill:var(--text-3);font:700 13px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;pointer-events:none}.sketch-tip{background:var(--ink);color:var(--paper);pointer-events:none;white-space:nowrap;border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:600;transition:opacity .2s;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.sketch-tip.is-hidden{opacity:0}.loop-count{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);pointer-events:none;font-size:.75rem;font-weight:700;position:absolute;top:12px;right:14px}.os-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.os-actions #skip{margin-right:auto}.os-actions[hidden]{display:none}.os-actions .btn-ghost{border-color:var(--line)}.recap-sketches{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;display:grid}.recap-sketch{border-radius:var(--r-md);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}.recap-sketch svg{background:var(--paper);width:100%;height:auto;display:block}.recap-sketch div{justify-content:space-between;align-items:baseline;gap:10px;padding:12px 16px 14px;display:flex}.recap-sketch h3{letter-spacing:-.03em;font-size:1.15rem}.recap-sketch strong{font-family:var(--font-mono)}@media (max-width:520px){.os-actions .btn{padding-inline:14px}}