.picture-instrument{color-scheme:dark;--bg:#101d20;--ink:#eee6d7;--muted:#b4bdb3;--line:#425554;--gold:#ddb576;--time:#f0eee1;--green:#bed0b2;font-family:Georgia,'Times New Roman',serif}.picture-instrument *{box-sizing:border-box}.picture-instrument{margin:0;background:var(--bg);color:var(--ink)}.picture-instrument{max-width:1280px;margin:auto;padding:60px 48px 32px}.picture-instrument .eyebrow,.picture-instrument .stage-label,.picture-instrument .line-key,.picture-instrument .score-heading p,.picture-instrument .transport,.picture-instrument .status,.picture-instrument .sources,.picture-instrument .source-status,.picture-instrument .formula,.picture-instrument .method-note,.picture-instrument .bands,.picture-instrument table,.picture-instrument .instrument-footer,.picture-instrument .row-control{font-family:system-ui,sans-serif}.picture-instrument .eyebrow{font-size:11px;letter-spacing:.2em;color:var(--gold);margin:0 0 24px}.picture-instrument .heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:46px}.picture-instrument h1{font-size:clamp(52px,7vw,91px);font-weight:400;line-height:.94;letter-spacing:-.045em;margin:0}.picture-instrument h1 em{font-weight:400;color:var(--green)}.picture-instrument .heading>p{font-size:18px;line-height:1.6;color:var(--muted);margin:0 0 5px}.picture-instrument .instrument{border:1px solid var(--line);padding:20px;background:#142629}.picture-instrument .stage-label{display:flex;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:.13em;padding:0 0 13px;color:var(--muted)}.picture-instrument .image-stage{position:relative;aspect-ratio:1536/704;overflow:hidden;background:#dfdacd}.picture-instrument canvas{width:100%;height:100%;display:block}.picture-instrument .columns{position:absolute;inset:0;background:repeating-linear-gradient(to right,transparent 0,transparent calc(6.25% - 1px),#fff4 calc(6.25% - 1px),#fff4 6.25%);pointer-events:none}.picture-instrument .sample-line{position:absolute;left:0;right:0;top:58%;height:0;border-top:2px dashed #f7bb56;filter:drop-shadow(0 1px 1px #000);pointer-events:none}.picture-instrument .sample-line span{position:absolute;right:8px;top:5px;font:10px system-ui;color:#fff3d4;background:#16333cdc;padding:4px 6px;letter-spacing:.1em}.picture-instrument .playhead{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--time);box-shadow:0 0 0 2px #1332348c;pointer-events:none}.picture-instrument .playhead:before{content:'';position:absolute;left:-6px;top:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid var(--time)}.picture-instrument .line-key{display:flex;gap:24px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin:13px 0 28px}.picture-instrument .line-key span{display:flex;align-items:center;gap:7px}.picture-instrument .line-key i{display:inline-block;width:21px;height:0;border-top:2px dashed var(--gold)}.picture-instrument .line-key .time-key{width:0;height:14px;border:0;border-left:2px solid var(--time)}.picture-instrument .row-control{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:14px}.picture-instrument .row-control output{color:var(--gold)}.picture-instrument input[type=range]{width:100%;min-width:0;accent-color:var(--gold);height:28px;cursor:pointer}.picture-instrument .row-control input,.picture-instrument .row-control p{grid-column:1/-1}.picture-instrument .row-control p{font-size:12px;color:var(--muted);margin:0}.picture-instrument .score-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:31px}.picture-instrument .score-heading h2{font-size:25px;font-weight:400;margin:0}.picture-instrument .score-heading p{font-size:11px;color:var(--muted)}.picture-instrument .score{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:5px;margin-top:12px}.picture-instrument .step{height:162px;position:relative;padding:0;border:1px solid #44635f;background:#1c3638;overflow:hidden;cursor:pointer;border-radius:0;color:var(--ink)}.picture-instrument .step .colour{position:absolute;bottom:35px;left:0;right:0;height:var(--height);background:var(--colour);opacity:.88}.picture-instrument .step .note{position:absolute;bottom:9px;left:0;right:0;font:13px system-ui;z-index:1}.picture-instrument .step .number{position:absolute;top:8px;left:0;right:0;font:10px system-ui;color:var(--muted);z-index:1}.picture-instrument .step.active{border-color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold);background:#3a5045}.picture-instrument .step.active .note{color:#fff0b8}.picture-instrument .step:hover{border-color:var(--green)}.picture-instrument button,.picture-instrument .upload{font:14px system-ui;color:var(--ink);border:1px solid #71827b;background:transparent;border-radius:0;padding:13px 22px;cursor:pointer;min-height:44px}.picture-instrument button:disabled{opacity:.45;cursor:default}.picture-instrument .primary{background:var(--gold);color:#18272b;border-color:var(--gold);font-weight:650}.picture-instrument .transport{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:25px}.picture-instrument .play-controls{display:flex;gap:9px;flex-wrap:wrap}.picture-instrument .tempo{display:grid;grid-template-columns:auto 135px auto;align-items:center;gap:12px;font-size:12px}.picture-instrument .tempo output{min-width:58px;color:var(--muted)}.picture-instrument .status{font-size:13px;color:var(--green);min-height:21px;margin:15px 0 28px}.picture-instrument .sources{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:23px;border-top:1px solid var(--line)}.picture-instrument .sources button,.picture-instrument .upload{font-size:12px;padding:10px 13px}.picture-instrument .sources>span{font-size:11px;color:var(--muted);margin-left:auto}.picture-instrument .upload{position:relative}.picture-instrument .upload input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}.picture-instrument .upload:focus-within{outline:2px solid var(--gold);outline-offset:3px}.picture-instrument .source-status{font-size:11px;color:var(--muted);margin:12px 0 0}.picture-instrument .translation{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;padding:68px 0 40px}.picture-instrument .translation h2{font-size:40px;line-height:1.1;font-weight:400;margin:0}.picture-instrument .translation p{color:var(--muted);line-height:1.55;font-size:16px;max-width:570px}.picture-instrument .translation .formula{font-size:15px;color:var(--ink);padding:15px 0;border-block:1px solid var(--line)}.picture-instrument .translation .method-note{font-size:12px}.picture-instrument .bands{display:flex;gap:20px;margin:22px 0;font-size:11px;color:var(--muted)}.picture-instrument .bands b{display:block;font-size:23px;color:var(--ink);font-weight:400;padding-top:4px}.picture-instrument details{border-block:1px solid var(--line);padding:20px 0}.picture-instrument summary{font-size:19px;cursor:pointer}.picture-instrument .table-scroll{overflow:auto}.picture-instrument table{border-collapse:collapse;width:100%;font-size:13px;text-align:left}.picture-instrument caption{text-align:left;font-size:12px;color:var(--muted);padding:17px 0}.picture-instrument th,.picture-instrument td{padding:9px;border-bottom:1px solid #344c4b}.picture-instrument th{color:var(--gold);font-weight:400}.picture-instrument .instrument-footer{display:flex;justify-content:space-between;gap:25px;font-size:11px;line-height:1.65;color:var(--muted);padding-top:24px}.picture-instrument :focus-visible{outline:2px solid var(--gold);outline-offset:4px}.picture-instrument button[aria-pressed=true]{background:#36504c;border-color:var(--green)}@media(max-width:760px){.picture-instrument{padding:32px 18px}.picture-instrument .heading{display:block;margin-bottom:28px}.picture-instrument .heading>p{margin-top:24px;font-size:16px}.picture-instrument .instrument{padding:12px}.picture-instrument .stage-label{font-size:8px;gap:8px}.picture-instrument .stage-label>span:last-child{display:none}.picture-instrument .sample-line span{font-size:8px;top:3px}.picture-instrument .line-key{gap:9px;margin-bottom:22px;font-size:10px}.picture-instrument .score-heading{display:block}.picture-instrument .score-heading h2{font-size:23px}.picture-instrument .score-heading p{margin:7px 0 15px}.picture-instrument .score{gap:3px;grid-template-columns:repeat(8,minmax(0,1fr))}.picture-instrument .step{height:112px}.picture-instrument .step .note{font-size:13px}.picture-instrument .transport{display:block}.picture-instrument .tempo{grid-template-columns:auto 1fr auto;margin-top:17px}.picture-instrument .play-controls button{padding:12px 15px}.picture-instrument .sources>span{margin:8px 0 0;width:100%}.picture-instrument .translation{display:block;padding-top:44px}.picture-instrument .translation>div+div{margin-top:28px}.picture-instrument .translation h2{font-size:34px}.picture-instrument .translation p{font-size:15px}.picture-instrument .bands{gap:16px;justify-content:space-between}.picture-instrument .bands b{font-size:21px}.picture-instrument .instrument-footer{display:block}.picture-instrument .row-control{font-size:13px}}@media(prefers-reduced-motion:reduce){.picture-instrument *,.picture-instrument *::before,.picture-instrument *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}.picture-instrument{padding-top:26px}.picture-instrument .eyebrow{margin-bottom:12px}.picture-instrument .heading{margin-bottom:22px;align-items:center}.picture-instrument h1{font-size:clamp(44px,5vw,64px);line-height:1.06}.picture-instrument .heading>p{font-size:14px;line-height:1.5}.picture-instrument .instrument{padding:14px}.picture-instrument .transport{margin-top:0}.picture-instrument .status{font-size:12px;margin:10px 0 14px;min-height:16px}.picture-instrument .stage-label{padding-bottom:9px}.picture-instrument .image-stage{max-width:min(100%,calc(34vh * 1536 / 704));margin-inline:auto}.picture-instrument .line-key{justify-content:center;margin:10px 0 16px}.picture-instrument .row-control{grid-template-columns:auto 48px minmax(120px,1fr);align-items:center;column-gap:14px}.picture-instrument .row-control input{grid-column:3}.picture-instrument .row-control p{grid-column:1/-1;margin-top:0}.picture-instrument .score-heading{margin-top:18px}.picture-instrument .score{margin-top:7px}.picture-instrument .step{height:92px}.picture-instrument .step .colour{bottom:29px;height:calc(var(--height) * .7)}.picture-instrument .step .note{bottom:7px}.picture-instrument .step .number{top:6px}.picture-instrument .sources{padding-top:16px;margin-top:21px}.picture-instrument .translation{padding-top:48px}@media(max-width:760px){.picture-instrument{padding-top:22px}.picture-instrument .heading{display:block;margin-bottom:22px}.picture-instrument h1{font-size:45px}.picture-instrument .heading>p{margin-top:12px;font-size:13px}.picture-instrument .instrument{padding:11px}.picture-instrument .transport{position:sticky;top:0;z-index:4;background:#142629;padding:8px 0}.picture-instrument .tempo{margin-top:8px}.picture-instrument .status{margin:6px 0 14px}.picture-instrument .image-stage{max-width:100%}.picture-instrument .line-key{justify-content:start;margin-bottom:16px}.picture-instrument .row-control{grid-template-columns:1fr auto;gap:5px}.picture-instrument .row-control input{grid-column:1/-1}.picture-instrument .score-heading{margin-top:16px}.picture-instrument .score-heading p{margin-bottom:10px}.picture-instrument .step{height:91px}.picture-instrument .sources{margin-top:20px}.picture-instrument .translation{padding-top:35px}}@media(min-width:900px){.picture-instrument .workspace{display:grid;grid-template-columns:1.07fr .93fr;gap:28px;align-items:start}.picture-instrument .picture-section,.picture-instrument .score-section{min-width:0}.picture-instrument .image-stage{max-width:100%;margin:0}.picture-instrument .stage-label{font-size:9px}.picture-instrument .line-key{justify-content:start;gap:14px;font-size:10px;margin-bottom:16px}.picture-instrument .row-control{grid-template-columns:1fr auto;gap:6px}.picture-instrument .row-control input{grid-column:1/-1}.picture-instrument .score-heading{display:block;margin-top:0}.picture-instrument .score-heading h2{font-size:27px}.picture-instrument .score-heading p{margin:10px 0 18px}.picture-instrument .score{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.picture-instrument .step{height:132px}.picture-instrument .step .colour{height:var(--height)}.picture-instrument .step .note{font-size:14px;bottom:9px}.picture-instrument .step .number{top:8px}.picture-instrument .sources{margin-top:25px}}.picture-instrument .framing{font:13px system-ui,sans-serif;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}.picture-instrument .framing[hidden]{display:none}.picture-instrument .framing select{font:14px system-ui,sans-serif;color:var(--ink);background:#1c3638;border:1px solid #71827b;min-height:44px;padding:8px 12px}.picture-instrument .framing p{color:var(--muted);font-size:12px;line-height:1.5;margin:0;flex-basis:100%}

.picture-instrument{font-family:var(--ds-font-family-body);max-width:1280px}.picture-instrument h1,.picture-instrument h2{font-family:var(--ds-font-family-display)}.picture-instrument h1{font-weight:500}.picture-instrument .instrument-footer{font-family:var(--ds-font-family-body)}.picture-instrument button,.picture-instrument select{font-family:var(--ds-font-family-body)}.picture-instrument .tool-language{font-size:12px;color:var(--muted);margin:0 0 12px}.picture-instrument .pp-breadcrumb{font:12px var(--ds-font-family-mono);margin:0 0 12px}.picture-instrument .pp-breadcrumb a{color:var(--green)}

.picture-instrument .sound-controls{display:grid;gap:10px}.picture-instrument .volume{display:grid;grid-template-columns:auto 135px auto;align-items:center;gap:12px;font-size:12px}.picture-instrument .volume output{min-width:58px;color:var(--muted)}.picture-instrument .sound-help{font:12px var(--ds-font-family-body);color:var(--muted);line-height:1.5;margin:10px 0}.picture-instrument input[type=range]{min-height:24px}@media(max-width:760px){.picture-instrument .sound-controls{margin-top:10px;gap:7px}.picture-instrument .volume{grid-template-columns:auto 1fr auto}.picture-instrument .sound-controls .tempo{margin-top:0}}