.loose-ends{--orange:#f0b36d;--warm:#dbc7af;--edge:#59432f;background:radial-gradient(ellipse at 85% 20%,#75472218,transparent 45%),#101311;color:#eee8df}
.loose-ends main{max-width:1120px}.loose-ends button:focus-visible,.loose-ends a:focus-visible,.loose-ends input:focus-visible,.loose-ends select:focus-visible,.loose-ends summary:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
.loose-ends ::selection{background:var(--orange);color:#241b12}.loose-ends .skip-link{background:var(--orange)}
.workshop-header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:38px 26px;border-bottom:1px solid var(--edge)}
.kicker{font:10px/1.6 ui-monospace,Consolas,monospace;letter-spacing:1.7px;color:var(--orange);margin:0 0 12px}.workshop-name{font-size:27px;font-weight:600;letter-spacing:-1px}.workshop-name span{margin-left:17px;color:var(--orange)}.workshop-header>p{font-size:12px;color:#b6aa9b;margin:0}
.experiment-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:end;padding-block:54px 42px}.experiment-intro h1{font-size:clamp(62px,7.5vw,98px);line-height:.98;letter-spacing:-5px;font-weight:550;margin:0 0 26px}.experiment-intro h1 em{font-style:normal;color:var(--orange)}.intro{color:#c9beb0;font-size:17px;line-height:1.7;margin:0}.vex-note{display:flex;gap:20px;max-width:380px;padding-bottom:4px}.vex-mark{font-size:38px;line-height:1;color:var(--orange)}.vex-note p:not(.kicker){font-size:13px;line-height:1.9;color:#bfae99;margin:0 0 13px}.vex-note p:last-child{margin-bottom:0;color:#e1c29c}
.instrument{border:1px solid #6b5036;border-radius:8px;overflow:hidden;background:#181b17;box-shadow:0 22px 65px #0003}.instrument-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 28px;border-bottom:1px solid var(--edge);background:#22221b}.instrument-top h2{font-size:14px;letter-spacing:0;font-weight:500}.root-label{display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:11px;color:#ccbaa3}select{color:#ffe2bc;background:#29271e;border:1px solid #806142;border-radius:4px;padding:7px 25px 7px 10px;font:inherit;font-size:13px}
.chord-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center;padding:32px 36px}.chord-card{min-width:0;padding:0 0 0 17px;border-left:2px solid #615746}.chord-card.changed{border-left-color:var(--orange)}.chord-card .kicker{font-size:9px;color:#c4b39b}.changed .kicker{color:var(--orange)}.chord-card h3{font-size:clamp(24px,3vw,36px);line-height:1.2;font-weight:500;overflow-wrap:anywhere}.changed h3{color:var(--orange)}.note-spelling{font:15px/1.6 ui-monospace,Consolas,monospace;letter-spacing:2px;margin:14px 0 8px;color:#e3d8c9}.chord-caption{font-size:11px;color:#bdaf9b}.pair-arrow{font-size:29px;font-weight:300;color:#b08a5f}
.pitch-board{margin:0 28px 28px;padding:24px;border:1px solid #403d30;border-radius:4px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),#ffffff03 calc(20% - 1px),#ffffff03 20%),#111611}.pitch-lane{display:grid;grid-template-columns:130px 1fr;gap:24px;align-items:center;margin-bottom:20px}.lane-label{font:9px/1.6 ui-monospace,Consolas,monospace;letter-spacing:1px;color:#bcad96}.moving .lane-label{color:var(--orange)}.fixed-track{display:flex;align-items:center;gap:14px;color:#d2c6b3;font:14px/1.4 ui-monospace,Consolas,monospace}.fixed-track:after{content:'';height:1px;background:#524f3d;flex:1}.fixed-track>span{width:54px;padding:9px 0;border:1px solid #575340;text-align:center;border-radius:4px;background:#22271d}.moving-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:14px;position:relative}.moving-track:before{content:'';position:absolute;top:50%;left:0;right:0;border-top:1px dashed #7d5c3b}.pitch-stop{z-index:1;position:relative;padding:11px 4px;text-align:center;border:1px solid #554733;border-radius:4px;background:#1c2118;color:#ac9c86;font:14px/1.4 ui-monospace,Consolas,monospace}.pitch-stop.reference{border:2px dashed #d0ba99;color:#e0ccb0}.pitch-stop.current{background:var(--orange);color:#302011;border-color:var(--orange);box-shadow:0 0 25px #f0b36d18;font-weight:700}.board-caption{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:10px;color:#b8a68d;margin:26px 0 0}.board-caption>span:last-child{margin-left:auto}.legend-dot,.legend-ring{width:7px;height:7px;border-radius:50%;background:var(--orange);display:inline-block}.legend-ring{background:none;border:1px dashed #d0ba99;margin-left:13px}
.edit-panel{padding:26px 36px;border-block:1px solid var(--edge);background:#201f18}.edit-heading{display:flex;justify-content:space-between;gap:20px;font-size:13px}.edit-heading output{color:var(--orange);font:12px/1.7 ui-monospace,Consolas,monospace}.slider-row{display:flex;align-items:center;gap:20px;margin-top:20px}.step-button{width:44px;height:44px;font-size:25px;border:1px solid #725638;background:#2d281e;border-radius:4px;color:var(--orange);flex-shrink:0}input[type=range]{accent-color:var(--orange);cursor:pointer;min-width:0}.slider-row input{flex:1;width:100%;height:34px}.range-labels{display:flex;justify-content:space-between;margin:2px 64px 0;color:#ad9b81;font:10px/1.6 ui-monospace,Consolas,monospace}.quick-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.quick-choices button{padding:9px 13px;background:#151a14;border:1px solid #655138;border-radius:24px;font-size:11px;color:#cbbb9f;min-height:38px}.quick-choices button[aria-pressed=true]{background:#f0b36d1c;border-color:var(--orange);color:#ffe1b7}.quick-choices button:hover,.play-controls button:hover:not(:disabled),.step-button:hover:not(:disabled){border-color:var(--orange);color:#ffe3c1}
.listen-panel{padding:26px 36px}.play-controls{display:flex;gap:10px;flex-wrap:wrap}.play-controls button{min-height:44px;border:1px solid #69543a;background:#22251b;color:#e9d8bf;padding:10px 17px;border-radius:4px;font-size:12px}.play-controls button.play-primary{background:var(--orange);color:#2b1e11;font-weight:650;border-color:var(--orange)}.play-controls button.play-primary:hover:not(:disabled){background:#ffd3a0;color:#2b1e11}.loose-ends button:disabled{opacity:.4;cursor:default}.volume-label{display:flex;align-items:center;gap:14px;font-size:11px;color:#c3b39d;margin-top:24px}.volume-label input{width:135px}.volume-label output{font:11px/1.5 ui-monospace,Consolas,monospace;width:35px}.audio-status{font-size:11px;color:#b5a48d;margin:13px 0 0;min-height:18px}.audio-status.error{color:#ffc8a7}.chord-card.is-playing{background:#f0b36d0c;outline:1px solid #f0b36d55;outline-offset:10px}.notice{padding:20px;background:#412c1b;color:#ffe0b8}
.finding{display:flex;gap:24px;padding:38px 20px 32px;max-width:800px}.finding-index{font-size:33px;color:var(--orange)}.finding h2{font-size:27px;letter-spacing:-.6px;color:#eee0cb}.finding p:not(.kicker){font-size:13px;line-height:1.9;color:#bdae99;margin-bottom:0}.finding p.vex-observation{color:#e5bc8b;font-style:italic}.theory{margin:0 0 48px 68px;max-width:740px;border-top:1px solid var(--edge);padding-top:18px}.theory summary{color:#dcc09a;font-size:12px;cursor:pointer;width:fit-content}.theory p{font-size:12px;line-height:1.9;color:#bfae97}.theory>div{padding-block:10px}.workshop-footer{border-top:1px solid var(--edge);padding-block:28px 45px;display:flex;justify-content:space-between;align-items:center;gap:25px}.workshop-footer p{font-size:12px;line-height:1.8;color:#b9aa93;margin:0}.workshop-footer p span{color:var(--orange)}.workshop-footer>a{color:var(--orange);font-size:12px}
@media(max-width:760px){.workshop-header{padding-top:25px}.workshop-header>p{font-size:10px}.workshop-name{font-size:23px}.kicker{font-size:8px}.experiment-intro{grid-template-columns:1fr;gap:28px;padding-block:36px 28px}.experiment-intro h1{font-size:70px;letter-spacing:-3px}.intro{font-size:15px}.vex-note{max-width:440px;gap:14px}.vex-mark{font-size:29px}.vex-note p:not(.kicker){font-size:12px}.instrument-top{padding:16px;align-items:flex-start}.instrument-top h2{max-width:170px;font-size:12px}.root-label{gap:7px;font-size:10px}.chord-pair{padding:24px 16px;gap:10px}.chord-card{padding-left:10px}.chord-card h3{font-size:24px}.chord-card .kicker{font-size:7px;letter-spacing:.8px}.note-spelling{font-size:11px;letter-spacing:.5px}.chord-caption{font-size:10px;display:block}.pair-arrow{font-size:18px}.pitch-board{margin:0 12px 20px;padding:16px 12px}.pitch-lane{grid-template-columns:1fr;gap:9px;margin-bottom:18px}.lane-label{font-size:8px}.fixed-track>span{font-size:12px;padding:6px 0;width:45px}.moving-track{gap:8px}.pitch-stop{font-size:12px;padding:10px 3px}.board-caption{font-size:9px;gap:6px;margin-top:20px}.board-caption>span:last-child{width:100%;margin:6px 0 0}.edit-panel,.listen-panel{padding:22px 16px}.edit-heading{font-size:12px;gap:8px}.edit-heading output{font-size:11px}.slider-row{gap:12px}.range-labels{margin-inline:55px}.quick-choices{gap:7px}.quick-choices button{padding:9px 11px;font-size:10px}.play-controls{display:grid;grid-template-columns:1fr 1fr}.play-controls button{padding:10px 9px;font-size:11px}.finding{gap:12px;padding-inline:0}.finding h2{font-size:24px}.finding-index{font-size:24px}.finding p:not(.kicker){font-size:12px}.theory{margin-left:36px}.workshop-footer{align-items:flex-start;flex-direction:column}.audio-status{font-size:10px}}
@media(prefers-reduced-motion:reduce){.loose-ends{scroll-behavior:auto}}

/* Shared workshop navigation grows by adding an entry in workshop.js. */
.workshop-credit{font-size:11px;line-height:1.8;color:#c4ae91;max-width:650px;margin:-4px 0 20px}
loose-ends-header{display:block}.workshop-header{display:block;padding-bottom:0}.workshop-heading{min-width:0}.workshop-heading-row{display:flex;align-items:center;gap:38px;flex-wrap:wrap}.workshop-name{white-space:nowrap;padding-bottom:22px}.experiment-tabs{display:flex;gap:8px;flex-wrap:wrap;align-self:stretch;align-items:stretch}.experiment-tabs a{display:flex;gap:9px;align-items:center;padding:14px 16px 22px;border-bottom:2px solid transparent;color:#c5b59f;font-size:12px}.experiment-tabs a>span{font:10px/1.6 ui-monospace,Consolas,monospace;color:#a58b69}.experiment-tabs a[aria-current]{color:#ffdbac;border-bottom-color:var(--orange);background:linear-gradient(0deg,#f0b36d0d,transparent)}.experiment-tabs a:hover{color:var(--orange)}
.beat-readouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;padding:30px 36px}.beat-readouts>div{border-left:2px solid #6c553c;padding-left:18px}.beat-readouts>div:last-child{border-left-color:var(--orange)}.beat-readouts h3{font-size:30px;color:#f5dbb8;line-height:1.2}.beat-readouts>div:last-child h3{color:var(--orange)}.beat-readouts .kicker{font-size:9px;letter-spacing:1.2px}
.beat-visual{display:grid;grid-template-columns:170px 1fr;gap:35px;margin:0 28px 28px;padding:26px;border:1px solid #53442f;background:#111611;border-radius:4px;align-items:center}.pulse-orbit{width:160px;height:160px;border:1px solid #7c5b36;border-radius:50%;position:relative;display:grid;place-items:center;isolation:isolate}.pulse-orbit>div{position:absolute;inset:9px;border-radius:50%;background:radial-gradient(circle,#f5b66e,#9f5c24);opacity:.35;z-index:-1}.pulse-orbit>span{font:9px/1.8 ui-monospace,Consolas,monospace;letter-spacing:1.5px;text-align:center;color:#ffe1b5}.envelope-view{min-width:0}.envelope-view svg{width:100%;height:auto}.envelope-view .kicker{font-size:8px}.graph-axis{display:flex;justify-content:space-between;font:9px/1.6 ui-monospace,Consolas,monospace;color:#b29b7d}.envelope-view>p:last-child{font-size:11px;color:#d4bd9e;margin-bottom:0}.beat-range-labels{display:flex;justify-content:space-between;font:10px/1.6 ui-monospace,Consolas,monospace;color:#b5a084;margin-top:5px}
@media(max-width:760px){.workshop-heading-row{gap:0 20px}.workshop-name{padding-bottom:16px}.experiment-tabs{width:100%;gap:0}.experiment-tabs a{padding:12px 11px 15px;font-size:11px;gap:7px}.experiment-tabs a:first-child{padding-left:0}.experiment-tabs a>span{font-size:9px}.beat-readouts{padding:24px 16px;gap:12px}.beat-readouts>div{padding-left:10px}.beat-readouts h3{font-size:20px}.beat-readouts .kicker{font-size:7px;letter-spacing:.5px}.beat-visual{margin:0 12px 20px;padding:20px 15px;grid-template-columns:1fr;gap:22px}.pulse-orbit{justify-self:center;width:130px;height:130px}.envelope-view .kicker{font-size:7px}}