.puzzle{gap:var(--space-4);flex-direction:column;display:flex}.puzzle-bar{align-items:center;gap:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-key);padding:12px 18px;display:flex}.puzzle-bar-brand{font-family:var(--font-display);letter-spacing:-.01em;align-items:center;gap:10px;font-size:21px;font-weight:600;display:flex}.puzzle-bar-icon{border-radius:var(--radius-sm);background:var(--accent);width:32px;height:32px;color:var(--accent-ink);box-shadow:0 4px 12px -6px var(--accent-glow);place-items:center;display:grid}.puzzle-stat{padding-left:var(--space-3);border-left:1px solid var(--line-soft);flex-direction:column;gap:1px;display:flex}.puzzle-stat .mono{font-size:var(--size-mono-2);font-weight:500}.puzzle-stat[data-warn=true] .mono{color:var(--ink-dim)}.puzzle-focus{align-items:center;gap:6px;display:flex}.puzzle-count{font-family:var(--font-mono);font-size:var(--size-mono-3);color:var(--ink-muted);margin-left:auto}.puzzle-body{grid-template-columns:minmax(0, var(--board-max)) minmax(320px, 400px);gap:var(--space-5);justify-content:center;place-items:start center;width:100%;display:grid}.puzzle-board{width:100%;min-width:0;position:relative}.puzzle-board.shaking{animation:puzzle-shake .42s var(--ease-out)}@keyframes puzzle-shake{0%,to{transform:translate(0)}15%{transform:translate(-9px)}35%{transform:translate(7px)}55%{transform:translate(-5px)}75%{transform:translate(3px)}}@media (prefers-reduced-motion:reduce){.puzzle-board.shaking{outline:2px solid var(--threat);outline-offset:4px;animation:none}}.puzzle-side{gap:var(--space-3);flex-direction:column;width:100%;min-width:0;display:flex}.puzzle-verdict{gap:var(--space-2);border-left:3px solid var(--line);transition:border-color var(--dur-base) var(--ease-out)}.puzzle-verdict[data-tone=good]{border-left-color:var(--cls-excellent)}.puzzle-verdict[data-tone=bad]{border-left-color:var(--cls-mistake)}.puzzle-verdict-head{font-family:var(--font-display);font-size:var(--size-display-3);line-height:1.1}.puzzle-progress{gap:6px;margin-top:2px;display:flex}.puzzle-pip{border-radius:var(--radius-pill);background:var(--raised);width:26px;height:4px;transition:background-color var(--dur-base) var(--ease-out)}.puzzle-pip[data-done=true]{background:var(--accent)}.puzzle-rating{align-items:baseline;gap:var(--space-2);margin-top:4px;display:flex}.puzzle-rating .label{margin-right:auto}.puzzle-delta{font-size:var(--size-mono-3);color:var(--cls-mistake)}.puzzle-delta[data-up=true]{color:var(--cls-excellent)}.puzzle-actions{align-items:center;gap:var(--space-2);flex-flow:wrap}.puzzle-solution{font-size:var(--size-mono-2);color:var(--ink-dim);flex-wrap:wrap;gap:6px 10px;display:flex}.puzzle-solution span[data-mine=true]{color:var(--ink)}.puzzle-themes{margin-top:var(--space-2);flex-wrap:wrap;gap:6px;display:flex}.puzzle-origin,.puzzle-link{font-size:var(--size-ui-3)}.puzzle-flag{font-size:var(--size-ui-3);align-self:flex-start;padding-inline:0}@media (max-width:1100px){.puzzle-body{grid-template-columns:minmax(0,1fr)}}.puzzle-loading{padding:var(--space-6);color:var(--ink-muted);justify-content:center;align-items:center;gap:10px;display:flex}.puzzle-empty{align-items:center;gap:var(--space-3);padding:var(--space-6) var(--space-5);border:1px dashed var(--line);border-radius:var(--radius-xl);background:var(--surface);background-image:radial-gradient(90% 120% at 50% 0%, var(--accent-soft), transparent 60%);text-align:center;animation:rise-in var(--dur-base) var(--ease-out) both;flex-direction:column;display:flex}.puzzle-empty-icon{border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--ground-sunk);width:56px;height:56px;color:var(--accent);place-items:center;display:grid}.puzzle-empty h2{font-size:28px}.puzzle-empty p{max-width:56ch;color:var(--ink-muted);margin:0}.puzzle-empty-actions{justify-content:center;gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap;display:flex}.puzzle-empty-note{font-size:var(--size-ui-3);color:var(--ink-dim);max-width:60ch;margin:0}.puzzle-empty-note.error{color:var(--bad)}