html{scrollbar-gutter:stable}body{margin:0;font:15px/1.5 system-ui,sans-serif;color:#1b1b1b}#app{max-width:1200px;margin:0 auto;padding:16px}.disclaimer{max-width:1200px;margin:0 auto;padding:12px 16px 0;color:#9b2c2c;font-weight:600}canvas{width:100%;display:block;border:1px solid #ddd}.controls{display:flex;gap:12px;align-items:center;margin:12px 0;flex-wrap:wrap}.attribution{margin-top:24px;font-size:13px;color:#666}.answer-row{display:flex;gap:12px;align-items:center;margin:6px 0}.answer-row span{min-width:340px}.problems{color:#9b2c2c;min-height:22px}.derived{color:#555;font-size:14px}table.review{border-collapse:collapse;margin:12px 0}table.review th,table.review td{border:1px solid #ddd;padding:6px 10px;text-align:left}table.review tr.correct td{background:#f0fff4}table.review tr.wrong td{background:#fff5f5}.explanation{margin:12px 0}.deviations h3{font-size:15px;margin:16px 0 4px}.deviations ul{margin:4px 0;padding-left:20px;color:#555;font-size:14px}.kinds button.active{background:#2b6cb0;color:#fff;border-color:#2b6cb0}.thumbs{display:grid;grid-template-columns:repeat(6,auto);gap:6px;justify-content:start;margin-bottom:8px}.thumbs .thumb{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:3px 5px;background:#fff;border:1px solid #ccc;border-radius:4px;font:600 12px sans-serif;cursor:pointer}.thumbs .thumb canvas{border:none}.thumbs .thumb.open{border:2px solid #2563eb;padding:2px 4px}.thumbs .thumb.answer span:after{content:" ●";color:#2b6cb0}canvas.rhythm-strip{cursor:pointer;margin-bottom:8px}@media (max-width: 760px){.thumbs{display:flex;overflow-x:auto}.thumbs .thumb{flex:0 0 auto}}.step{margin:8px 0 4px;padding:6px 10px;background:#eef2ff;color:#1e3a8a;border-radius:4px}.how-to{margin:4px 0 8px;font-size:14px;color:#444}.strip-placeholder{padding:40px 0;text-align:center;color:#666;border:1px dashed #ccc}canvas.work-strip{touch-action:none}.scroll{display:flex;gap:8px;align-items:center;margin:6px 0}.scroll .scroll-range{flex:1}.zoom button.active{background:#2b6cb0;color:#fff;border-color:#2b6cb0}.zoom .nudge{min-width:36px}canvas.magnifier{width:auto;border:none;outline:1px solid #888;outline-offset:-1px;border-radius:6px;box-shadow:0 2px 8px #0000004d;z-index:10}
