.top{display:flex;justify-content:space-between;gap:20px;padding-inline:max(24px,calc((100vw - 1192px)/2))}.site-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(18px,3vw,42px)}.site-nav a{white-space:nowrap}.project-link{display:inline-flex;align-items:center;gap:8px}.project-link svg{display:block;width:17px;height:17px;flex:none}
main.editions{max-width:1240px}
.editions .lookup{grid-template-columns:auto minmax(0,1fr) auto auto;gap:16px;min-height:70px;margin:0 0 24px;border:0}.editions .lookup label{font-weight:400;font-size:.75rem}.editions .lookup input{height:62px;font-size:2rem}.editions .lookup button{height:42px;font-size:.74rem}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:clamp(30px,5vw,76px);margin-top:38px;align-items:start}
.credit-card{width:100%;max-width:440px;justify-self:end;aspect-ratio:1;border:1px solid var(--hairline);display:flex;flex-direction:column;margin:0;min-width:0}
.credit-art{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden}
.credit-rotation{position:absolute;inset:0;transform-origin:center center}.credit-rotation.spinning{transition:transform .36s ease-in-out}
.credit-art img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.credit-art .source-highlight{position:absolute;inset:0;pointer-events:none}.credit-art .source-highlight .column-highlight{position:absolute;display:block;border:1px solid #111;background:#fff2;box-shadow:0 0 0 1px #fff}
.art-angle{position:absolute;top:14px;left:16px;font-size:.72rem;line-height:1;color:#777;font-variant-numeric:tabular-nums}
.credit-card figcaption{height:46px;min-height:46px;border-top:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;padding:0 17px;color:#555;font-size:.76rem}
.credit-card #credit-caption{font-weight:500;color:#111}
.credit-card figcaption a{color:#555}
.edition-panel{min-width:0;min-height:440px;display:flex;flex-direction:column}.edition-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.edition-panel h1{font-weight:400;font-size:clamp(2.1rem,4vw,3.55rem);line-height:1.08;letter-spacing:-.07em;margin:0 0 18px}
.edition-list{border-top:1px solid #111;margin-inline:12px}
.edition-row{display:grid;grid-template-columns:1fr;align-items:stretch;position:relative;border-bottom:1px solid var(--hairline)}.edition-row:has(.edition-choice[aria-pressed=true]){background:#111;color:#fff;border-bottom-color:#111}
.edition-choice{width:100%;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:13px;align-items:center;text-align:left;padding:13px;min-height:72px}
.edition-row:not(:has(.edition-choice[aria-pressed=true])):hover{background:#f8f8f8}
.edition-choice .choice-marker{border:1px solid currentColor;width:16px;height:16px;display:grid;place-items:center;font-size:.7rem;line-height:1}
.edition-choice[aria-pressed=true] .choice-marker::before{content:"";width:6px;height:6px;background:#fff}
.choice-copy{display:grid;min-width:0}.choice-copy strong{font-size:.84rem;font-weight:500;letter-spacing:.03em}
.choice-length{font-size:.7rem;white-space:nowrap;color:#777}.edition-choice[aria-pressed=true] .choice-length{color:#ddd}
.player-actions{display:grid;grid-template-columns:1fr 1fr;border:1px solid #111;margin-top:auto}.player-actions button{min-height:64px;font-size:.78rem}.player-actions #play,.player-actions #download-open{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:18px;font-weight:400;text-align:left}.player-actions #play{background:#111;color:#fff}.player-actions #play-icon,.player-actions .download-icon{font-size:.77rem;line-height:1}.player-actions #play:hover:not(:disabled){background:#333}.player-actions #download-open{border-left:1px solid #111}.player-actions #download-open:hover:not(:disabled){background:#f4f4f4}
dialog [data-dialog-title]:focus{outline:none}
.score-section{margin-top:72px;border-top:1px solid #111}.score-head{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:64px;font-size:.75rem}.score-head span:last-child{color:#666;text-align:right}
.score-frame{display:grid;grid-template-columns:102px minmax(0,1fr);border:1px solid var(--hairline);min-width:0}
.lane-labels{position:relative;border-right:1px solid #111;min-width:0;background:#fff;z-index:2}.lane-label{position:absolute;left:0;right:0;display:flex;align-items:center;padding:0 10px;font-size:.75rem;border-bottom:1px solid #e7e7e7}.lane-label.axis{color:#777;font-size:.67rem}.lane-label.note-label{border-top:1px solid #111;font-weight:500}
.lane-label .ink-square{width:9px;height:9px;margin-right:8px;flex:none}
.lane-label .note-symbol{width:9px;height:12px;margin-right:8px;flex:none;display:grid;place-items:center;color:#111;font:13px/1 Arial,sans-serif}
.score-viewport{overflow:auto hidden;min-width:0;scrollbar-width:none;-ms-overflow-style:none;touch-action:auto}.score-viewport::-webkit-scrollbar{display:none}
.score-track{position:relative;background:#fff;min-width:100%}
.score-segment{position:absolute;top:0;border-left:1px solid #cfcfcf;border-right:1px solid #eee;overflow:hidden}.score-segment.finale{border-left-color:#111;background:#fafafa}.score-segment.rest{background:#fafafa}
.segment-head{height:52px;border-bottom:1px solid #dedede;padding:0 11px;display:flex;align-items:center;justify-content:space-between;gap:10px;white-space:nowrap;font-size:.73rem}.segment-head span:last-child{color:#777;font-size:.68rem}.score-segment.finale .segment-head{font-weight:500}
.lane-rule{position:absolute;left:0;right:0;height:1px;background:#e9e9e9;pointer-events:none}.note-rule{background:#111}
.beat-guide{position:absolute;top:52px;bottom:0;width:1px;background:#ededed;pointer-events:none}
.source-run{position:absolute;display:block;min-width:2px;cursor:crosshair}.source-run:hover{outline:1px solid #111;outline-offset:1px}
.note-cell{position:absolute;display:flex;flex-direction:column;justify-content:space-between;min-width:14px;border-left:1px solid #ccc;border-right:1px solid #eee;padding:0;background:#fff;cursor:pointer;text-align:left;overflow:hidden}
.note-cell:hover{background:#f4f4f4}.note-cell:focus-visible{outline:2px solid #111;outline-offset:-2px}
.note-cell .note-heading{display:flex;align-items:baseline;justify-content:space-between;gap:3px;width:100%;padding:8px 7px 0;min-height:31px;white-space:nowrap}.note-cell .beat-index{font-size:.65rem;color:#777;line-height:1}.note-cell .pitch{font-size:.78rem;line-height:1;letter-spacing:-.05em}.note-cell .color-block{position:relative;display:block;height:39px;width:100%;margin-top:auto;flex:none}.note-cell .underprint{position:absolute;display:flex;height:7px;width:100%;bottom:0;left:0}.note-cell .underprint i{min-width:0;height:100%}
.note-cell.fading-note{background:#fafafa;border-left-color:#111}.note-cell.fading-note .beat-index{color:#111}.note-cell.fading-note .color-block::after{content:"";position:absolute;left:var(--hold-share);right:0;top:0;bottom:0;background:linear-gradient(90deg,transparent,#fff);pointer-events:none}
.score-playhead{position:absolute;top:0;bottom:0;z-index:4;width:1px;background:#111;pointer-events:none}.score-playhead::before{content:"";position:absolute;top:0;left:0;border-right:7px solid transparent;border-top:7px solid #111}
.score-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0;font-size:.72rem;color:#777}.score-foot span:last-child{color:#111}
.sound-rules{border-top:1px solid #111;margin-top:46px}.sound-rules summary{min-height:62px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;font-size:.75rem}.sound-rules summary::-webkit-details-marker{display:none}.rule-expand::before{content:"+";font-size:1.1rem;font-weight:400}.sound-rules[open] .rule-expand::before{content:"−"}.rule-intro{margin:0;padding:18px 0 20px;border-top:1px solid var(--hairline);font-size:.76rem;line-height:1.5}.rule-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--hairline)}.rule-facts>div{padding:20px 22px 22px 0;border-bottom:1px solid var(--hairline)}.rule-facts>div:nth-child(2n){padding-left:22px}.rule-facts>div:last-child:nth-child(odd){grid-column:1/-1}.rule-facts dt{font-size:.68rem;color:#777;margin-bottom:8px}.rule-facts dd{font-size:.9rem;margin:0;line-height:1.45}.rule-facts p{font-size:.74rem;color:#666;line-height:1.55;margin:9px 0 0;max-width:48ch}
.editions-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #111;margin-top:40px;padding:28px 0 60px;font-size:.7rem;color:#777}.editions-footer nav{display:flex;flex-wrap:wrap;gap:12px 26px}.editions-footer a,.editions-footer button{white-space:nowrap}.editions-footer button{padding:0}.editions-footer button:hover{text-decoration:underline;text-underline-offset:4px}
.how-to-dialog{width:min(92vw,520px);overflow:hidden}.how-to-dialog::backdrop{background:#0005}.how-to-row{padding:24px;border-bottom:1px solid var(--hairline)}.how-to-row:last-child{border-bottom:0}.how-to-row h3{display:flex;justify-content:space-between;gap:20px;margin:0 0 14px;font-size:.75rem;font-weight:500}.how-to-row h3 span{color:#777;font-weight:400}.how-to-row p{font-size:.83rem;line-height:1.6;max-width:44ch}
.composition-dialog{width:min(92vw,900px);max-height:86vh;overflow:hidden}.composition-dialog[open]{display:flex;flex-direction:column}.composition-dialog::backdrop{background:#0005}.composition-dialog-head{min-height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #111;flex:none}.composition-dialog-head h2{font-size:.77rem;font-weight:500;margin:0}.composition-dialog-head button{font-size:1.55rem;font-weight:300;line-height:1;padding:5px 0 5px 12px}.composition-body{overflow-y:auto;padding:26px 30px 34px;scrollbar-width:thin}.composition-body .lead{font-size:1rem;line-height:1.65;max-width:68ch;margin:0 0 34px}.composition-body .section{display:grid;grid-template-columns:135px minmax(0,1fr);gap:26px;border-top:1px solid #111;padding:22px 0 28px}.composition-body .section h2{font-size:.76rem;font-weight:500;line-height:1.5;margin:0}.composition-body .section p,.composition-body .section li{font-size:.82rem;line-height:1.65;margin:0 0 14px}.composition-body .section p:last-child{margin-bottom:0}.composition-body .section code{overflow-wrap:anywhere}.composition-body .section table{border-collapse:collapse;width:100%;margin:0}.composition-body .section th,.composition-body .section td{text-align:left;vertical-align:top;padding:11px 10px 11px 0;border-bottom:1px solid var(--hairline);font-size:.8rem;line-height:1.55}.composition-body .section th{font-weight:400;color:#777}.composition-body .section tr:last-child td{border-bottom:0}
.format-dialog{width:min(92vw,560px)}.format-dialog .format-list{display:grid}.format-list button{min-height:72px;display:flex;align-items:center;justify-content:space-between;padding:16px 25px;border-top:1px solid var(--hairline);font-size:.84rem;text-align:left}.format-list button:hover:not(:disabled){background:#f5f5f5}.format-list small{color:#777;font-size:.72rem}
.format-error{margin:0;padding:14px 25px;border-top:1px solid var(--hairline);font-size:.76rem;line-height:1.5;color:#a11}.format-error[hidden]{display:none}
.thanks-instructions{border-top:1px solid var(--hairline);padding:21px 25px 24px}.thanks-instructions span{font-size:.7rem;color:#777}.thanks-instructions p{font-size:.83rem;line-height:1.6;margin:9px 0 0}#thanks .dialog-head+h2{padding-bottom:25px}#thanks .thanks-tip{margin:0;border-top:1px solid var(--hairline);padding:19px 25px 25px;font-size:.8rem;line-height:1.6}
@media(max-width:850px){.hero{grid-template-columns:minmax(0,1fr) minmax(260px,1fr);gap:25px}.edition-panel{min-height:calc(50vw - 36.5px)}.edition-panel h1{font-size:2.3rem}.edition-choice{min-height:60px;padding:8px 13px}.editions .lookup{gap:9px;margin-bottom:18px}.editions .lookup input{font-size:1.6rem}.editions .lookup button{font-size:.68rem}.player-actions button{min-height:58px}}
@media(max-width:779px){.hero{grid-template-columns:1fr;gap:27px}.edition-panel{min-height:0}.credit-card{justify-self:center}.player-actions{margin-top:19px}}
@media(max-width:650px){.top{height:auto;display:grid;grid-template-columns:1fr;padding:0 20px;gap:0;font-size:.68rem}.top .brand{display:flex;align-items:center;min-height:58px}.top .site-nav{border-top:1px solid var(--hairline);min-height:44px;justify-content:space-between;gap:10px;font-size:.63rem}.top .project-link{gap:5px}.top .project-link svg{width:15px;height:15px}main.editions{padding:0 20px}.hero{margin-top:24px}.editions .lookup{margin-bottom:20px}.credit-card{width:100%;max-width:440px}.edition-panel h1{font-size:2.25rem}.edition-choice{min-height:70px}.player-actions button{min-height:64px}.score-section{margin-top:55px}.score-head{font-size:.69rem}.score-frame{grid-template-columns:74px minmax(0,1fr)}.lane-label{font-size:.63rem;padding:0 4px}.lane-label.axis{font-size:.57rem}.lane-label .ink-square{width:7px;height:7px;margin-right:4px}.score-foot{font-size:.64rem}.rule-facts{grid-template-columns:1fr}.rule-facts>div:nth-child(2n){padding-left:0}.editions-footer{flex-direction:column;gap:10px;font-size:.64rem}.composition-dialog{width:calc(100vw - 24px);max-height:90vh}.composition-dialog-head{padding:0 18px}.composition-body{padding:20px 20px 28px}.composition-body .section{grid-template-columns:1fr;gap:8px}.composition-body .section th,.composition-body .section td{font-size:.75rem}}
@media(max-width:360px){.top{padding:0 16px;font-size:.64rem}.top .site-nav{font-size:.58rem;gap:6px}main.editions{padding:0 16px}.edition-panel h1{font-size:1.95rem}.editions .lookup{gap:6px}.editions .lookup input{font-size:1.35rem}.editions .lookup #random span{display:none}.player-actions #play,.player-actions #download-open{padding-inline:12px;gap:6px;font-size:.68rem}.score-head{gap:6px;font-size:.62rem}.score-head span:last-child{font-size:.6rem;white-space:nowrap}}
@media(max-width:650px){.lane-label .note-symbol{width:7px;height:10px;margin-right:4px;font-size:11px}}