:root{--paper:#f7f5f2;--panel:#fff;--ink:#17120f;--ink-soft:#6a5f58;--ink-faint:#9a8f87;--rule:#ded6cd;--rail:#c9bfb4;--felt:#b0271f;--felt-soft:#f0dbd7;--felt-key:#c9524a;--felt-key-d:#8e1f19;--brass:#8a6a2f;--ivory:#fbf8f2;--ebony:#201a16;--shadow:0 1px 2px #17120f0f, 0 8px 24px -12px #17120f2e;--on-felt:#fff;--serif:"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--sans:-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;--mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace}@media (prefers-color-scheme:dark){:root{--paper:#14100e;--panel:#1d1815;--ink:#f1ebe3;--ink-soft:#a69a90;--ink-faint:#776c64;--rule:#342b25;--rail:#3e342c;--felt:#e4685a;--felt-soft:#38201c;--felt-key:#e4685a;--felt-key-d:#b03a2e;--brass:#c9a45c;--ivory:#e9e0d2;--ebony:#14100e;--shadow:0 1px 2px #0006, 0 12px 32px -14px #000000b3;--on-felt:#14100e}}:root[data-theme=dark]{--paper:#14100e;--panel:#1d1815;--ink:#f1ebe3;--ink-soft:#a69a90;--ink-faint:#776c64;--rule:#342b25;--rail:#3e342c;--felt:#e4685a;--felt-soft:#38201c;--felt-key:#e4685a;--felt-key-d:#b03a2e;--brass:#c9a45c;--ivory:#e9e0d2;--ebony:#14100e;--on-felt:#14100e;--shadow:0 1px 2px #0006, 0 12px 32px -14px #000000b3}:root[data-theme=light]{--paper:#f7f5f2;--panel:#fff;--ink:#17120f;--ink-soft:#6a5f58;--ink-faint:#9a8f87;--rule:#ded6cd;--rail:#c9bfb4;--felt:#b0271f;--felt-soft:#f0dbd7;--felt-key:#c9524a;--felt-key-d:#8e1f19;--brass:#8a6a2f;--ivory:#fbf8f2;--ebony:#201a16;--on-felt:#fff;--shadow:0 1px 2px #17120f0f, 0 8px 24px -12px #17120f2e}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:1.6}.wrap{max-width:1060px;margin:0 auto;padding:0 24px}.prose{max-width:64ch}.masthead{padding:72px 0 28px}.eyebrow{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--felt);margin:0 0 18px;font-size:11px}h1{font-family:var(--serif);letter-spacing:-.02em;text-wrap:balance;margin:0 0 20px;font-size:clamp(42px,7vw,76px);font-weight:400;line-height:.98}h1 em{color:var(--felt);font-style:italic}.deck{font-family:var(--serif);color:var(--ink-soft);max-width:56ch;margin:0;font-size:clamp(18px,2.2vw,22px);font-style:italic;line-height:1.5}section{border-top:1px solid var(--rule);padding:52px 0}section:first-of-type{border-top:none}h2{font-family:var(--serif);letter-spacing:-.01em;text-wrap:balance;margin:0 0 8px;font-size:clamp(26px,3.4vw,36px);font-weight:400;line-height:1.15}h3{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px;font-size:11px;font-weight:500}p{margin:0 0 16px}p:last-child{margin-bottom:0}.lead{color:var(--ink-soft);margin-bottom:30px}strong{font-weight:600}.nn{font-family:var(--mono);letter-spacing:.01em;font-size:.92em}.stage-shell{background:var(--panel);border:1px solid var(--rule);box-shadow:var(--shadow);border-radius:3px;overflow:hidden}.stage-svg-box{padding:6px 10px 0}.stage-svg-box svg{width:100%;height:auto;display:block}.stage-foot{flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:4px 22px 20px;display:flex}.chord-sym{font-family:var(--serif);letter-spacing:-.01em;font-size:34px;line-height:1.1}.chord-long{font-family:var(--serif);color:var(--ink-soft);font-size:17px;font-style:italic}.chord-spelling{font-family:var(--mono);color:var(--felt);letter-spacing:.06em;font-size:15px}.chord-note{font-family:var(--serif);color:var(--ink-soft);flex-basis:100%;font-size:15px;font-style:italic}.controls{border-top:1px solid var(--rule);background:color-mix(in srgb, var(--panel) 88%, var(--paper));flex-wrap:wrap;gap:22px 34px;padding:18px 22px 20px;display:flex}.ctl{flex-direction:column;gap:8px;display:flex}.ctl-label{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);font-size:10px}.btnrow{flex-wrap:wrap;gap:5px;display:flex}button{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--rule);cursor:pointer;border-radius:2px;padding:7px 11px;transition:background .13s,border-color .13s,color .13s}button:hover{border-color:var(--ink-faint)}button:focus-visible{outline:2px solid var(--felt);outline-offset:2px}.letter-btn{font-family:var(--serif);min-width:38px;font-size:17px}.acc-btn{min-width:40px;font-size:18px;line-height:1.1}button[aria-pressed=true]{background:var(--felt);border-color:var(--felt);color:var(--on-felt)}.qual-btn{flex-direction:column;align-items:flex-start;gap:1px;min-width:120px;padding:6px 13px 7px;display:flex}.qual-btn .q-name{font-size:15px}.qual-btn .q-form{font-family:var(--mono);color:var(--ink-faint);letter-spacing:.04em;font-size:10.5px}.qual-btn[aria-pressed=true] .q-form{color:color-mix(in srgb, var(--on-felt) 78%, var(--felt))}.ext-btn{min-width:106px}.play-btn{border-color:var(--ink);align-self:flex-end;align-items:center;gap:8px;padding:9px 16px;display:inline-flex}.play-btn:hover{background:var(--ink);color:var(--paper)}.play-btn .tri{font-size:11px}.recipe{border-top:1px solid var(--rule)}.rrow{border-top:1px solid var(--rule);grid-template-columns:34px 74px 84px 1fr;align-items:baseline;gap:0 16px;padding:13px 22px;transition:background .14s;display:grid}.rrow:first-child{border-top:none}.rrow:hover{background:var(--felt-soft)}.r-role{font-family:var(--mono);color:var(--felt);font-size:13px;font-weight:600}.r-name{font-family:var(--serif);font-size:21px}.r-int{font-family:var(--mono);color:var(--brass);letter-spacing:.04em;font-size:12px}.r-why{color:var(--ink-soft);font-size:14.5px;line-height:1.45}.r-why b{color:var(--ink);font-weight:600}.r-tag{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-size:11px}.stage[data-hi="0"] .roleg:not([data-role="0"]),.stage[data-hi="1"] .roleg:not([data-role="1"]),.stage[data-hi="2"] .roleg:not([data-role="2"]),.stage[data-hi="3"] .roleg:not([data-role="3"]){opacity:.22}.enh{border-top:1px solid var(--rule);background:color-mix(in srgb, var(--panel) 88%, var(--paper));flex-direction:column;gap:11px;padding:17px 22px 20px;display:flex}.enh-head{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);font-size:10px}.enh-row{flex-wrap:wrap;gap:9px;display:flex}.enh-card{text-align:left;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 15px 10px;display:flex}.enh-card[aria-pressed=true]{border-color:var(--felt);background:var(--felt-soft);color:var(--ink)}.enh-name{font-family:var(--serif);font-size:19px;line-height:1.15}.enh-spell{font-family:var(--mono);letter-spacing:.07em;color:var(--ink-soft);font-size:12px}.enh-card[aria-pressed=true] .enh-spell{color:var(--felt)}.enh-tag{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brass);margin-top:2px;font-size:9.5px}.enh-note{font-family:var(--serif);color:var(--ink-soft);max-width:62ch;margin:0;font-size:14.5px;font-style:italic;line-height:1.5}.enh-note b{font-style:normal;font-family:var(--mono);color:var(--ink);font-size:13px}.chips{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;margin-top:26px;display:grid}.chip{border-radius:3px;flex-direction:column;align-items:center;gap:2px;padding:12px 6px 11px;transition:border-color .14s,transform .14s;display:flex}.chip:hover{border-color:var(--felt);transform:translateY(-2px)}.chip svg{display:block}.chip .c-num{font-family:var(--serif);color:var(--felt);font-size:14px;font-style:italic}.chip .c-name{font-family:var(--serif);margin-top:2px;font-size:17px}.chip .c-sym{color:var(--felt)}.chip .c-qual{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-size:10px}.rulers{flex-direction:column;gap:22px;margin-top:26px;display:flex}.ruler-block{flex-direction:column;gap:7px;display:flex}.ruler-cap{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-size:11px}.ruler{gap:3px;padding-bottom:2px;display:flex;overflow-x:auto}.tick{border:1px solid var(--rule);background:var(--panel);border-radius:2px;flex-direction:column;flex:1 1 0;align-items:center;gap:3px;min-width:30px;padding:7px 2px 6px;display:flex}.tick .t-n{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-faint);font-size:12px}.tick .t-l{font-family:var(--mono);letter-spacing:.06em;color:#0000;white-space:nowrap;font-size:9.5px}.tick.on{background:var(--felt-soft);border-color:var(--felt)}.tick.on .t-n{color:var(--ink);font-weight:600}.tick.on .t-l{color:var(--felt)}.qtable{border-top:1px solid var(--rule);margin-top:24px}.qrow{border-bottom:1px solid var(--rule);grid-template-columns:minmax(120px,.9fr) minmax(140px,1fr) minmax(96px,.7fr) minmax(150px,1.1fr);align-items:baseline;gap:4px 18px;padding:15px 4px;display:grid}.qrow.head{border-bottom:1px solid var(--ink);padding:0 4px 8px}.qrow.head span{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-size:10px}.q-title{font-family:var(--serif);font-size:20px}.q-title .sym{color:var(--felt);font-family:var(--mono);margin-left:5px;font-size:14px}.q-cell{font-family:var(--mono);color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:13px}.q-cell.ex{color:var(--ink);letter-spacing:.05em}.q-mood{font-family:var(--serif);color:var(--ink-soft);grid-column:1/-1;font-size:15px;font-style:italic}.compare{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:28px;display:grid}.card{background:var(--panel);border:1px solid var(--rule);border-radius:3px;flex-direction:column;gap:12px;padding:20px 22px 22px;display:flex}.card.good{border-left:3px solid var(--felt)}.card.bad{border-left:3px solid var(--rail)}.card-tag{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:10px}.card.good .card-tag{color:var(--felt)}.card.bad .card-tag{color:var(--ink-faint)}.card-spell{font-family:var(--mono);letter-spacing:.1em;font-size:17px}.card p{color:var(--ink-soft);font-size:14.5px;line-height:1.5}footer{border-top:1px solid var(--rule);font-family:var(--serif);color:var(--ink-faint);padding:34px 0 64px;font-size:15px;font-style:italic}.staff-line{stroke:var(--ink);stroke-width:1.1px;opacity:.55}.ledger{stroke:var(--ink);stroke-width:1.3px;opacity:.75}.notehead{fill:var(--ink)}.acc{fill:var(--ink);font-family:var(--serif)}.wkey{fill:var(--ivory);stroke:var(--rail);stroke-width:.8px}.bkey{fill:var(--ebony);stroke:var(--rail);stroke-width:.5px}.wkey.lit{fill:var(--felt-key);stroke:var(--felt)}.bkey.lit{fill:var(--felt-key-d);stroke:var(--felt)}.klabel{font-family:var(--mono);fill:var(--ink-faint);font-size:8.5px}.klabel.lit{fill:var(--panel)}.guide{stroke:var(--felt);stroke-width:1px;stroke-dasharray:3 3;opacity:.75}.bracket{stroke:var(--brass);stroke-width:1px;fill:none}.blabel{font-family:var(--mono);fill:var(--brass);letter-spacing:.05em;font-size:10.5px}.blabel-bg{fill:var(--panel)}.badge-c{fill:var(--panel);stroke:var(--felt);stroke-width:1px}.badge-t{font-family:var(--mono);fill:var(--felt);font-size:9.5px;font-weight:600}.staff-line,.ledger,.guide,.bracket,.blabel,.blabel-bg,.klabel,.badge-c,.badge-t,.acc,.notehead{pointer-events:none}.playable{cursor:pointer}.wkey.playable:hover{fill:color-mix(in srgb, var(--ivory) 84%, var(--felt))}.bkey.playable:hover{fill:color-mix(in srgb, var(--ebony) 70%, var(--felt))}.wkey.lit.playable:hover,.bkey.lit.playable:hover{fill:var(--felt)}.nhit{fill:var(--felt);opacity:0;transition:opacity .13s}.nhit:hover{opacity:.2}.roleg{transition:opacity .18s}.anim{animation:.34s cubic-bezier(.2,.9,.3,1) backwards pop;animation-delay:calc(var(--i) * 95ms)}@keyframes pop{0%{opacity:0;transform:translate(-9px)}to{opacity:1;transform:translate(0)}}@media (prefers-reduced-motion:reduce){.anim{animation:none}.chip:hover{transform:none}}@media (max-width:720px){.wrap{padding:0 16px}.masthead{padding:44px 0 20px}.rrow{grid-template-columns:26px auto 1fr;gap:2px 14px;padding:13px 16px}.r-why{grid-column:1/-1;margin-top:4px}.stage-foot{padding:4px 16px 18px}.controls,.enh{padding-left:16px;padding-right:16px}.qrow.head{display:none}.qrow{flex-wrap:wrap;gap:4px 16px;display:flex}.q-title,.q-mood{flex-basis:100%}}