:root { font-family: system-ui, sans-serif; color: #303b47; background: #f3f1f7; line-height: 1.55; }
* { box-sizing: border-box; } body { margin: 0; } main { max-width: 760px; margin: auto; padding: 1.5rem; }
a { color: #36567b; } h1 { margin-bottom: .25rem; } h2 { font-size: 1.15rem; }
button, select { font: inherit; min-height: 48px; border: 2px solid #5f6b84; border-radius: .6rem; background: white; color: #303b47; padding: .55rem .8rem; cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #aa5829; outline-offset: 3px; }
button:disabled { opacity: .75; cursor: default; } .notes, .controls { display: flex; flex-wrap: wrap; gap: .5rem; }
.note { min-width: 130px; min-height: 64px; background: #e6e7f5; font-weight: 700; } .sound-option { display: block; margin: 1rem 0; }
.sound-option input { width: 24px; height: 24px; vertical-align: middle; } .sound-option span { font-size: .9rem; }
.result { margin-top: 1rem; padding: 1rem; background: #e0e9dc; border-radius: .75rem; }
.target-seq { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 .5rem; list-style-position: inside; }
.target-seq li { padding: .6rem .9rem; background: #e6e7f5; border-radius: .6rem; font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }