:root{color:#1c1c1c;--gutter:16px;--feed-chrome:212px;background:#fafafa;font-family:system-ui,sans-serif}body{margin:0;overflow-x:clip}.app{max-inline-size:520px;padding:8px var(--gutter);margin-inline:auto}.muted{color:#666}.feed-header{align-items:center;gap:8px;block-size:32px;display:flex}.feed-title{white-space:nowrap;text-overflow:ellipsis;flex:1;margin:0;font-size:1rem;overflow:hidden}.feed-step{margin:0;font-size:.85rem}.feed-message{margin-block:32px;font-size:1.1rem}.position-task{min-block-size:2.7em;margin-block:8px;font-size:.95rem;font-weight:600;line-height:1.35}.board{--board:clamp(320px, min(100vw, 100vh - var(--feed-chrome)), 520px);inline-size:var(--board);margin-inline:calc((100% - var(--board)) / 2);touch-action:none}@supports (height:100dvh){.board{--board:clamp(320px, min(100vw, 100dvh - var(--feed-chrome)), 520px)}}.position-status{justify-content:space-between;align-items:center;gap:8px;min-block-size:44px;margin-block-start:8px;display:flex}.position-message{margin:0;font-weight:600}.position-message--solved{color:#1b7f3a}.position-message--failed{color:#b3261e}.summary{flex-direction:column;gap:16px;padding-block:24px;display:flex}.summary h2{margin:0;font-size:1.25rem}.summary-tiles{grid-template-columns:1fr 1fr;gap:12px;display:grid}.summary-tile{background:#fff;border:1px solid #e3e3e3;border-radius:8px;flex-direction:column;gap:4px;padding:12px;display:flex}.summary-tile strong{font-size:1.5rem}.summary-actions{flex-direction:column;gap:8px;display:flex}button{touch-action:manipulation;min-block-size:44px;padding-inline:16px;font-size:1rem}.app--staff{max-inline-size:1280px}.staff-lessons{line-height:1.9}.staff-lesson{grid-template-columns:minmax(0,1fr) 460px;align-items:start;gap:24px;display:grid}.staff-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;display:grid}.staff-card{background:#fff;border:2px solid #e3e3e3;border-radius:8px;flex-direction:column;gap:6px;padding:8px;font-size:.85rem;display:flex}.staff-card-open{text-align:start;min-block-size:0;font:inherit;cursor:pointer;background:0 0;border:0;flex-direction:column;gap:6px;padding:0;display:flex}.staff-card-controls{gap:4px;display:flex}.staff-card-controls button,.staff-card-controls select{min-block-size:32px;padding-inline:8px}.staff-step h2{font-size:1rem}.staff-toolbar{flex-wrap:wrap;align-items:center;gap:8px;margin-block:12px;display:flex}.staff-side{flex-direction:column;gap:16px;display:flex;position:sticky;inset-block-start:8px}.staff-supplements h2{font-size:1rem}.staff-order{gap:4px;margin-inline-end:8px;display:inline-flex}.staff-order button{min-block-size:28px;padding-inline:8px}.staff-card--selected{border-color:#1b5fbf}.staff-card--muted .staff-board-small{opacity:.45}.staff-badge{color:#b3261e}.staff-board-small{pointer-events:none;inline-size:100%}.staff-viewer{flex-direction:column;gap:8px;display:flex}.staff-board-large{inline-size:440px}.staff-steps{justify-content:space-between;align-items:center;display:flex}.staff-line{flex-wrap:wrap;gap:4px 12px;margin:0;padding-inline-start:20px;display:flex}.staff-line-current{font-weight:700}.map-lesson h3,.map-step h3{margin-block:12px 6px;font-size:1rem}.map-step{margin-inline-start:16px}.map-positions{flex-wrap:wrap;gap:6px;display:flex}.map-thumb{align-items:stretch;gap:6px;display:flex}.map-portion{background:#1b5fbf;border-radius:2px;inline-size:3px}.map-gap{margin-inline-start:8px;font-size:.85rem}.fen-thumb{display:block}.fen-thumb-light{fill:#f0d9b5}.fen-thumb-dark{fill:#b58863}.map-size-small .fen-thumb{block-size:72px;inline-size:72px}.map-size-medium .fen-thumb{block-size:144px;inline-size:144px}.map-size-large .fen-thumb{block-size:216px;inline-size:216px}.setup{flex-direction:column;gap:8px;display:flex}.setup-palette{flex-wrap:wrap;gap:4px;display:flex}.setup-tool{inline-size:44px;padding:2px}.setup-palette [aria-pressed=true]{outline:3px solid #1b5fbf}.setup-fen{flex-direction:column;gap:4px;display:flex}.setup-fen input{font-family:monospace}.recorder{flex-direction:column;gap:8px;display:flex}.tree{line-height:2}.tree-move{cursor:pointer;background:0 0;border:1px solid #0000;min-block-size:28px;margin-inline-end:4px;padding-inline:6px;font-family:monospace}.tree-move--current{background:#e8f0fb;border-color:#1b5fbf}.tree-branch{color:#555;margin-inline-end:4px}