html.fill-focus-play header,html.fill-focus-play footer,html.fill-focus-play main>nav,html.fill-focus-play main>section:not(#tool-workspace){display:none!important}html.fill-focus-play #tool-workspace{min-height:100dvh;padding-top:.75rem;padding-bottom:1.25rem}html.fill-focus-play body{overscroll-behavior:none}.sound-panel{padding:.85rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-bg, #f8fafc) 70%,#fff)}.sound-row{display:grid;grid-template-columns:5.5rem 1fr;gap:.65rem .85rem;align-items:center}@media(max-width:520px){.sound-row{grid-template-columns:1fr;gap:.4rem}}.sound-row-label{margin:0;font-size:.8rem;font-weight:700;color:var(--color-text);white-space:nowrap}.sound-row-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .65rem;min-width:0}.sound-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-width:4.5rem;padding:.4rem .7rem;border-radius:9999px;border:2px solid #94a3b8;background:#f1f5f9;color:#64748b;font-size:.75rem;font-weight:700;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.sound-toggle.is-on{border-color:#2563eb;background:#2563eb;color:#fff}.sound-field{display:inline-flex;align-items:center;gap:.4rem;min-width:0;padding:.3rem .55rem;border:1px solid var(--color-border);border-radius:.55rem;background:#fff}.sound-field--volume{flex:1 1 12rem;min-width:10rem}.sound-field--narrow{flex:0 0 auto;width:7.5rem}.sound-field-label{flex-shrink:0;font-size:.7rem;font-weight:700;color:var(--color-text-muted);letter-spacing:.02em}.sound-range{flex:1 1 auto;width:100%;min-width:0;accent-color:var(--color-accent)}.sound-select{flex:1 1 auto;min-width:0;width:100%;border:none;background:transparent;font-size:.75rem;font-weight:600;color:var(--color-text);outline:none;cursor:pointer}.fill-demo-stage{position:relative;width:min(100%,20rem);aspect-ratio:1 / 1;margin-inline:auto;display:grid;place-items:center}.fill-demo-board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:5px;width:calc(100% * var(--cols) / var(--demo-max, 8));aspect-ratio:var(--cols) / var(--rows);pointer-events:none}.fill-demo-board .fill-cell{border-radius:.5rem}.fill-demo-finger{position:absolute;top:0;left:0;font-size:1.75rem;line-height:1;pointer-events:none;opacity:0;z-index:2;filter:drop-shadow(0 2px 4px rgba(15,23,42,.25));will-change:transform}.fill-demo-finger.is-visible{opacity:1}.fill-reset-progress-btn{margin-top:.35rem;font-size:.75rem;color:var(--color-text-muted)}.fill-reset-progress-btn.hidden{display:none!important}.fill-primary-btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.75rem;border-radius:9999px;border:none;font-size:.95rem;font-weight:700;color:#fff;background:#2563eb;box-shadow:0 4px 12px #2563eb47;cursor:pointer}.fill-primary-btn--sm{padding:.55rem 1.1rem;font-size:.85rem}.fill-primary-btn:hover{background:#1d4ed8}.fill-primary-btn.hidden,.fill-clear-overlay.hidden{display:none!important}.fill-secondary-btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem .95rem;border-radius:9999px;border:1px solid var(--color-border);background:#fff;font-size:.8rem;font-weight:700;color:var(--color-text);cursor:pointer}.fill-secondary-btn:disabled{opacity:.45;cursor:default}.fill-ghost-btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem .95rem;border-radius:9999px;border:1px dashed var(--color-border);background:transparent;font-size:.8rem;font-weight:600;color:var(--color-text-muted);cursor:pointer}.fill-board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:var(--gap, 6px);width:min(100%,94vw);max-width:42rem;aspect-ratio:var(--cols) / var(--rows);touch-action:none}.fill-cell{border-radius:clamp(.15rem,1.2vw,.55rem);min-width:0;min-height:0;touch-action:none;pointer-events:auto}.fill-cell.is-wall{background:#cbd5e1;opacity:.55;pointer-events:none}.fill-cell.is-fillable{background:#fff;border:2px solid #BFDBFE;box-shadow:inset 0 0 0 1px #fff9}.fill-cell.is-compact.is-fillable{border-width:1px;box-shadow:none}.fill-cell.is-path{background:#3b82f6;border-color:#1d4ed8}.fill-cell.is-start{box-shadow:inset 0 0 0 2px #ffffffa6}.fill-cell.is-head{background:#1d4ed8;transform:scale(1.04)}.fill-clear-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:inherit;background:#2563eb8c;pointer-events:auto;z-index:5;animation:fillPop .45s ease-out}.fill-clear-panel{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem}.fill-next-on-board{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.4rem;border-radius:9999px;border:2px solid #fff;background:#fff;color:#1d4ed8;font-size:.95rem;font-weight:800;letter-spacing:.02em;cursor:pointer;box-shadow:0 8px 24px #0f172a59}.fill-next-on-board:hover{background:#eff6ff;color:#1e3a8a}.fill-next-on-board.hidden{display:none!important}.fill-cert-panel{width:100%;box-sizing:border-box}.fill-cert-panel.hidden{display:none!important}.fill-cert-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.65rem 1rem;border-radius:9999px;border:none;font-size:.85rem;font-weight:700;color:#fff;background:#2563eb;cursor:pointer}.fill-cert-btn--secondary{background:#fff;color:#1d4ed8;border:1px solid #93C5FD}.fill-cert-btn:disabled{opacity:.45;cursor:not-allowed}@keyframes fillPop{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}