*,:after,:before{box-sizing:border-box}body,html{margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,Helvetica Neue,Arial,sans-serif}body{background-color:#fff;color:#000}.app-root{min-height:100vh;align-items:center;justify-content:center;padding:16px}.app-card,.app-root{display:flex;background-color:#fff}.app-card{width:100%;max-width:960px;border:1px solid #000;box-shadow:0 12px 40px rgba(0,0,0,.12);padding:20px 18px 16px;flex-direction:column;gap:16px}.app-header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.app-title{font-size:20px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.app-subtitle{font-size:13px;color:#555}.app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:14px 16px;gap:14px 16px}.app-section{border-top:1px solid #000;padding-top:10px}.app-footer{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#777;flex-wrap:wrap}.field{display:flex;flex-direction:column;gap:6px;font-size:13px}.field-row{display:flex;flex-wrap:wrap;gap:10px}.field-label{font-weight:500}.field-label-inline{display:inline-flex;align-items:center;gap:4px;font-size:12px}input[type=range],select{padding:6px 8px;border-radius:0;border:1px solid #000;background-color:#fff;color:#000;font-size:13px;outline:none}input[type=range]{padding:0}.tempo-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.tempo-value{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-size:12px;color:#333}.btn{border-radius:999px;border:1px solid #000;background-color:#000;color:#fff;padding:7px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:transform .06s ease,background-color .1s ease,color .1s ease}.btn.secondary{background-color:#fff;color:#000}.btn.small{padding:4px 10px;font-size:11px}.btn:disabled{opacity:.35;cursor:default}.btn:not(:disabled):hover{transform:translateY(-1px)}.btn:not(:disabled):active{transform:translateY(0)}.btn-row{display:flex;flex-wrap:wrap;gap:8px}.status-text{font-size:12px;color:#333;min-height:1.2em}.status-text strong{font-weight:600}.history-header,.piano-header{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;margin-bottom:6px}.section-title{font-weight:600;letter-spacing:.08em;text-transform:uppercase}.history-list{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto}.history-item{border:1px solid #000;padding:6px 8px;font-size:12px;display:flex;justify-content:space-between;gap:10px}.history-meta{display:flex;flex-direction:column;gap:2px}.history-line{white-space:nowrap}.piano-wrapper{display:flex;border:1px solid #000;overflow:hidden;background-color:#fff}.piano-empty{font-size:12px;color:#777;padding:8px}canvas.piano-canvas{display:block}.piano-labels{flex:0 0 52px;border-right:1px solid #000;background-color:#fff;font-size:10px;color:#333;padding-top:8px}.piano-canvas-container{flex:1 1 auto;overflow-x:auto;overflow-y:hidden}@media (max-width:900px){.app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.app-root{align-items:stretch;padding:0}.app-card{border-radius:0;max-width:none;min-height:100vh}.app-grid{grid-template-columns:1fr}}