.tool-card { padding: clamp(var(--space-m), 2.5vw, var(--space-l)); }.tool-layout {display: grid;grid-template-columns: minmax(300px, 540px) minmax(280px, 1fr);gap: var(--space-l);align-items: start;}@media (max-width: 880px) {.tool-layout { grid-template-columns: 1fr; }}.board-side { display: flex; flex-direction: column; gap: var(--space-m); }.board-wrap {position: relative;width: 100%;aspect-ratio: 1 / 1;border-radius: var(--radius-m);overflow: hidden;border: 1px solid var(--border-subtle);touch-action: manipulation;}canvas.board {display: block;width: 100%;height: 100%;cursor: pointer;background: var(--grid-bg);}canvas.board:focus-visible {outline: 3px solid var(--color-primary);outline-offset: -3px;}.numpad {display: grid;grid-template-columns: repeat(9, 1fr);gap: 6px;}.numpad .btn {padding: 12px 0;font-size: var(--font-size-b);font-weight: 700;font-variant-numeric: tabular-nums;}.numpad-row2 { display: flex; gap: 6px; margin-top: 6px; }.numpad-row2 .btn { flex: 1; }.toggle-btn[aria-pressed="true"] {background: var(--color-primary);color: var(--text-inverse);border-color: var(--color-primary);}.tool-side { display: flex; flex-direction: column; gap: var(--space-l); }.tool-group { display: flex; flex-direction: column; gap: var(--space-s); }.tool-label {margin: 0;font-size: var(--font-size-s);font-weight: 700;color: var(--text-primary);}.tool-btns { display: flex; flex-wrap: wrap; gap: var(--space-s); }.tool-tip { margin: 0; font-size: var(--font-size-t); color: var(--text-tertiary); }.status-line {min-height: 1.5em;margin: 0;font-size: var(--font-size-s);font-weight: 600;}.status-info { color: var(--text-secondary); }.status-ok { color: var(--color-success); }.status-err { color: var(--color-danger); }.ocr-drop {border: 2px dashed var(--border-strong);border-radius: var(--radius-m);padding: var(--space-l) var(--space-m);text-align: center;color: var(--text-secondary);font-size: var(--font-size-s);cursor: pointer;transition: border-color .15s, background .15s;display: flex;flex-direction: column;align-items: center;gap: 4px;}.ocr-drop:hover, .ocr-drop.dragover, .ocr-drop:focus-visible {border-color: var(--color-primary);background: color-mix(in srgb, var(--color-primary) 6%, transparent);outline: none;}.ocr-drop strong { color: var(--text-primary); font-size: var(--font-size-b); }.ocr-drop .ocr-icon { color: var(--color-primary); margin-bottom: 4px; }.ocr-drop.is-busy { opacity: .6; pointer-events: none; }.ocr-preview {display: none;width: 100%;border-radius: var(--radius-m);border: 1px solid var(--border-subtle);}.ocr-preview.show { display: block; }.progress-bar {display: none;height: 6px;border-radius: var(--radius-full);background: var(--bg-inset);overflow: hidden;}.progress-bar.show { display: block; }.progress-fill {height: 100%;width: 0;background: var(--color-primary);border-radius: var(--radius-full);transition: width .2s ease;}.play-bar {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: var(--space-m);margin-bottom: var(--space-m);}.play-controls { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }.play-controls select { width: auto; padding: 8px 10px; font-weight: 600; }.stat { display: flex; flex-direction: column; align-items: center; min-width: 72px; }.stat-label {font-size: var(--font-size-t);color: var(--text-tertiary);text-transform: uppercase;letter-spacing: .06em;}.stat-value {font-size: var(--font-size-h);font-weight: 700;font-variant-numeric: tabular-nums;line-height: 1.2;}.pause-overlay {position: absolute;inset: 0;display: none;align-items: center;justify-content: center;flex-direction: column;gap: var(--space-m);background: color-mix(in srgb, var(--grid-bg) 88%, transparent);z-index: 5;font-weight: 700;font-size: var(--font-size-l);}.board-wrap.is-paused .pause-overlay { display: flex; }.board-wrap.is-paused canvas.board { filter: blur(6px); }.win-overlay {position: absolute;inset: 0;display: none;align-items: center;justify-content: center;background: color-mix(in srgb, var(--bg-base) 72%, transparent);-webkit-backdrop-filter: blur(3px);backdrop-filter: blur(3px);z-index: 6;}.win-overlay.show { display: flex; }.win-card {background: var(--bg-elevated);border: 1px solid var(--border-subtle);border-radius: var(--radius-l);box-shadow: var(--shadow-drop);padding: var(--space-x) var(--space-x) var(--space-l);text-align: center;max-width: 320px;margin: var(--space-m);}.win-card h2 {font-size: var(--font-size-h);font-weight: 800;margin-bottom: var(--space-s);color: var(--color-success);}.win-card .win-stats { color: var(--text-secondary); font-size: var(--font-size-s); margin-bottom: var(--space-l); }.win-card .btn { width: 100%; }.print-controls {display: flex;flex-wrap: wrap;gap: var(--space-l);align-items: flex-end;}.print-controls .field { margin: 0; min-width: 160px; }.print-actions { display: flex; gap: var(--space-s); margin-left: auto; }.print-area { display: flex; flex-direction: column; gap: var(--space-x); margin-top: var(--space-x); }.print-empty { color: var(--text-tertiary); text-align: center; padding: var(--space-x); border: 2px dashed var(--border-subtle); border-radius: var(--radius-l); }.sheet {background: #fff;color: #111;border: 1px solid var(--border-subtle);border-radius: var(--radius-m);box-shadow: var(--shadow-card);padding: 28px;}.sheet-header {display: flex;justify-content: space-between;align-items: baseline;gap: var(--space-m);font-size: var(--font-size-s);color: #333;border-bottom: 2px solid #111;padding-bottom: 8px;margin-bottom: 18px;}.sheet-header strong { font-size: var(--font-size-b); color: #111; }.puzzles-grid { display: grid; gap: 24px; }.puzzles-grid[data-layout="1"] { grid-template-columns: 1fr; }.puzzles-grid[data-layout="2"] { grid-template-columns: repeat(2, 1fr); }.puzzles-grid[data-layout="4"] { grid-template-columns: repeat(2, 1fr); }.puzzles-grid[data-layout="6"] { grid-template-columns: repeat(3, 1fr); }@media (max-width: 640px) {.puzzles-grid[data-layout="2"], .puzzles-grid[data-layout="4"], .puzzles-grid[data-layout="6"] { grid-template-columns: 1fr 1fr; }}.puzzle-item { break-inside: avoid; }.puzzle-item svg { width: 100%; height: auto; display: block; }.puzzle-label { font-weight: 700; font-size: 13px; color: #222; margin-bottom: 6px; }.solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }@media (max-width: 640px) { .solutions-grid { grid-template-columns: repeat(2, 1fr); } }@media print {body { background: #fff; }body.printing * { visibility: hidden; }body.printing #print-area, body.printing #print-area * { visibility: visible; }body.printing #print-area { position: absolute; left: 0; top: 0; width: 100%; display: block; }.sheet {border: none; box-shadow: none; border-radius: 0;padding: 0;page-break-after: always;}.sheet:last-child { page-break-after: auto; }}.tech-card {display: grid;grid-template-columns: minmax(250px, 370px) 1fr;gap: var(--space-x);align-items: start;padding-block: var(--space-x);border-top: 1px solid var(--border-subtle);}.tech-card:first-of-type { border-top: none; }.tech-card h3 { margin-bottom: var(--space-s); }.tech-card p { color: var(--text-secondary); font-size: var(--font-size-s); margin-bottom: var(--space-s); }.tech-card .key-point { color: var(--text-primary); font-weight: 600; }@media (max-width: 880px) {.tech-card { grid-template-columns: 1fr; }.tech-card .board-col { order: -1; max-width: 400px; }}.mini-board {display: block;width: 100%;border: 1px solid var(--border-subtle);border-radius: var(--radius-m);background: var(--grid-bg);}.board-col .caption {margin: 6px 0 0;font-size: var(--font-size-t);color: var(--text-tertiary);text-align: center;}.badge {display: inline-block;padding: 2px 10px;border-radius: var(--radius-full);font-size: var(--font-size-t);font-weight: 700;background: var(--color-primary-light);color: var(--color-primary);letter-spacing: .03em;}.badge-success { background: var(--color-success-bg); color: var(--color-success); }.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }.badge-danger { background: var(--color-danger-bg); color: var(--color-danger); }