.organ-page { --organ-green:#315e50; --organ-ink:#28473c; --organ-gold:#f6cd79; margin:0; padding-top:0; color:var(--organ-ink); background:radial-gradient(ellipse at 50% 18%,#fff5d9 0,transparent 60%),#f4f5e9; font-family:"Nunito",system-ui,sans-serif; }
.organ-page *, .organ-page *::before, .organ-page *::after { box-sizing:border-box; }
.organ-page [hidden] { display:none!important; }
.organ-page button { cursor:pointer; }
.organ-page button:focus-visible,.organ-page a:focus-visible,.organ-page summary:focus-visible,.organ-page input:focus-visible { outline:3px solid #bb7023; outline-offset:4px; }
.organ-header { max-width:1260px; margin:auto; padding:20px 32px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid #dce1cf; }
.organ-brand { display:flex; gap:12px; align-items:center; color:var(--organ-ink); font-family:"Baloo 2",sans-serif; font-size:1.15rem; font-weight:800; line-height:1.2; text-decoration:none; }
.organ-brand img { width:52px; height:52px; border-radius:50%; box-shadow:0 3px 9px #34523224; }
.organ-brand small { display:block; margin-top:5px; font-family:"Nunito",sans-serif; font-size:.73rem; font-weight:600; }
.organ-back { display:flex; align-items:center; gap:10px; flex-shrink:0; min-height:46px; padding:10px 17px; border:1px solid #cbd5bd; border-radius:30px; background:#fffdf4; color:var(--organ-ink); font-size:.86rem; font-weight:800; text-decoration:none; }
.organ-main { max-width:1160px; margin:auto; padding:28px 28px 36px; }
.organ-intro { display:flex; justify-content:space-between; align-items:center; gap:25px; margin-bottom:25px; }
.organ-eyebrow { margin:0 0 5px; color:#6a7651; font-size:.71rem; font-weight:900; text-transform:uppercase; letter-spacing:.16em; }
.organ-intro h1 { margin:0; font-family:"Baloo 2",sans-serif; color:#264d3e; font-size:clamp(2.2rem,4.5vw,3.35rem); line-height:1.1; }
.organ-intro p:last-child { margin:9px 0 0; font-size:1rem; }
.organ-mode { display:flex; gap:4px; flex-shrink:0; padding:5px; border:1px solid #d7deca; border-radius:18px; background:#e8eddd; }
.organ-mode button { min-height:49px; border:0; border-radius:13px; padding:12px 17px; color:#3e5b4d; background:transparent; font-size:.9rem; font-weight:900; }
.organ-mode button span { margin-right:5px; font-size:1.15rem; }
.organ-mode button[aria-pressed=true] { color:#fffcef; background:var(--organ-green); box-shadow:0 3px 8px #23482b24; }
.organ-learning { margin:0 0 24px; border:1px solid #d3d8bd; border-radius:20px; background:#fffcf0; overflow:hidden; }
.organ-song-choices { display:flex; flex-wrap:wrap; gap:8px; padding:13px 20px; background:#edf0df; }
.organ-song-choices button { min-height:44px; padding:8px 14px; border:1px solid transparent; border-radius:10px; background:transparent; color:#49603e; font-size:.87rem; font-weight:800; }
.organ-song-choices button[aria-pressed=true] { color:#31543c; border-color:#c7d1b2; background:#fffdf1; }
.organ-song-choices button span { margin-right:6px; color:#9b6b20; }
.organ-learning-body { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px; }
.organ-learning h2 { margin:0; font-family:"Baloo 2",sans-serif; font-size:1.45rem; line-height:1.2; }
#organ-next-note { margin:8px 0 0; font-size:.88rem; }
.organ-melody { min-width:0; flex:1; max-width:370px; text-align:center; }
.organ-score { display:none; scroll-margin-top:15px; margin:0 0 14px; padding:13px 18px; border:1px solid #e5d5a7; border-radius:9px; background:#fffae9; box-shadow:0 3px 7px #3e291c30; }
.organ-main:has([data-organ-mode="learn"][aria-pressed="true"]) .organ-score { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.organ-score #organ-next-note { margin:0; font-size:.85rem; font-weight:900; color:#315e50; }
.organ-score-jump { display:inline-flex; align-items:center; min-height:44px; margin-top:5px; color:#466c48; font-size:.77rem; font-weight:800; text-underline-offset:4px; }
#organ-melody-notes { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; }
#organ-melody-notes > * { display:grid; place-items:center; min-width:30px; height:34px; padding:2px 7px; border-radius:9px; background:#e8eadb; border:1px solid #d4dbc3; color:#4f6747; font-weight:900; }
#organ-melody-notes > [data-state=done] { background:#315e50; color:white; border-color:#315e50; }
#organ-melody-notes > [data-state=current] { background:#f9d27c; border-color:#bd8b2e; color:#624512; box-shadow:0 0 0 2px #edcf8b; }
#organ-progress { margin:8px 0 0; font-size:.75rem; color:#6b785d; }
.organ-demo-controls { display:flex; flex-direction:column; gap:7px; }
.organ-phrase-navigation { margin:0 22px 19px; padding:16px 0 0; border-top:1px solid #dde1cc; }
.organ-phrase-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:11px; }
.organ-phrase-label { color:#547044; font-size:.9rem; font-style:italic; }.organ-phrase-heading > :last-child { color:#7b856c; font-size:.73rem; }
.organ-phrase-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
.organ-phrase-navigation > p { margin:12px 0 0; color:#6a7859; font-size:.77rem; }
.organ-page button:disabled { cursor:default; opacity:.5; }
.organ-button { min-height:44px; border:1px solid #bfcbb2; border-radius:11px; padding:10px 15px; color:#31543f; background:#eef1e2; font-size:.82rem; font-weight:900; }
.organ-button--subtle { background:transparent; }
.organ-instrument { padding:0; border:1px solid #5f432d; border-radius:90px 90px 24px 24px; background:#64482f; box-shadow:0 17px 0 -8px #cdd0b9,0 25px 40px -20px #3d49304f; overflow:hidden; }
.organ-pipe-room { position:relative; height:230px; padding:22px 12% 0; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; background:radial-gradient(ellipse at 50% 75%,#cca267 0,#9d7247 46%,#624731 88%); border-top:12px solid #765135; border-bottom:6px solid #493222; }
.organ-pipe-room::before { content:""; position:absolute; inset:8px 12px 0; border:2px solid #dfb5765c; border-bottom:0; border-radius:80px 80px 0 0; pointer-events:none; }
.organ-pipes { position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:center; gap:clamp(5px,1vw,12px); width:100%; max-width:650px; height:100%; padding:0 0 21px; }
.organ-pipe { display:block; position:relative; height:var(--pipe-height); flex:1; max-width:35px; border-radius:40% 40% 3px 3px; border:1px solid #c7aa75; background:linear-gradient(90deg,#796d4d 0%,#c5bb91 13%,#eee5b9 38%,#fff2c4 47%,#c8bb8a 67%,#887b56 98%); box-shadow:4px 4px 7px #3c251b52,inset 0 2px 0 #fff4c2; transition:filter 90ms,box-shadow 90ms; }
.organ-pipe::before { content:""; position:absolute; bottom:18%; left:12%; right:12%; height:12px; border-top:3px solid #d9ca96; border-bottom:2px solid #b5a574; border-radius:50% 50% 0 0; background:linear-gradient(#4f492c,#6c603b); box-shadow:0 2px 2px #625e3340; }
.organ-pipe::after { content:""; position:absolute; bottom:0; left:0; right:0; height:8px; border-top:2px solid #f3dba7; border-bottom:2px solid #7d603b; background:#c4a369; }
.organ-pipe[data-sounding=true] { filter:brightness(1.33); box-shadow:0 0 22px #ffe49b,0 0 4px #fff7cf; }
.organ-window { position:absolute; bottom:30px; width:75px; height:115px; border:7px solid #765237; border-radius:70px 70px 8px 8px; background:linear-gradient(45deg,#dbb65c80 24%,transparent 25%,transparent 75%,#dbb65c80 76%),linear-gradient(-45deg,#ac86485e 24%,transparent 25%,transparent 75%,#ac86485e 76%),#f3d796; background-size:28px 40px; box-shadow:0 0 22px #f9d0896b,inset 0 0 15px #b9802c6e; display:grid; place-items:center; color:#805629; font-size:2.1rem; }
.organ-window--left { left:4%; }.organ-window--right { right:4%; }
.organ-pipe-caption { position:absolute; z-index:2; bottom:4px; color:#f7dfad; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; text-align:center; }
.organ-console { padding:16px clamp(16px,4vw,48px) 13px; background:repeating-linear-gradient(2deg,transparent 0,transparent 22px,#633f2a15 24px,transparent 26px),linear-gradient(105deg,#88603e,#a0754b 40%,#9a6b42 70%,#785035); border-top:4px solid #bd8d59; }
.organ-console-head { display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:13px; }
.organ-console-line { width:70px; height:1px; background:#dec19a6b; box-shadow:0 2px 0 #603e2e; }
.organ-plaque { display:inline-block; padding:5px 20px; background:linear-gradient(135deg,#e9d5a3,#cdb478); border:1px solid #594227; border-radius:6px; box-shadow:0 2px 3px #4327194a,inset 0 0 0 2px #e6ce9757; color:#634c28; font-family:Georgia,serif; font-size:.6rem; font-weight:bold; letter-spacing:.2em; text-align:center; }
.organ-console-controls { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:16px; }
.organ-stops { display:flex; gap:10px; }
.organ-stops button { min-height:46px; display:flex; align-items:center; gap:9px; border:1px solid #664526; border-radius:30px; padding:8px 14px 8px 8px; color:#644a2e; background:#f4e9ca; font-size:.82rem; font-weight:900; box-shadow:0 3px 0 #523821; }
.organ-stop-dot { width:23px; height:23px; flex-shrink:0; border:2px solid #c1b08a; border-radius:50%; background:linear-gradient(135deg,#fff9e2,#d2c4a0); box-shadow:inset 0 0 0 3px #f6ecd0; }
.organ-stops button[aria-pressed=true] .organ-stop-dot { background:#315e50; border-color:#274b3d; box-shadow:inset 0 0 0 4px #315e50,inset 0 0 0 6px #afc994; }
.organ-stops button[aria-pressed=true] { background:#fff4d7; border-color:#3d5235; }
.organ-volume { display:flex; align-items:center; gap:12px; color:#fff3d7; font-size:.76rem; font-weight:800; margin:0; }
.organ-volume input { width:110px; height:44px; padding:0; accent-color:#f9db96; cursor:pointer; }
.organ-keybed { position:relative; border:9px solid #4e3526; border-top-width:12px; border-bottom-width:12px; border-radius:9px; background:#3f2c21; box-shadow:0 2px 0 #cc9b69,0 5px 6px #39271e52,inset 0 5px 8px #27180d; }
.organ-keys { position:relative; height:200px; width:100%; touch-action:none; user-select:none; -webkit-user-select:none; }
.organ-key { position:absolute; top:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; margin:0; padding:8px 0 9px; user-select:none; -webkit-user-select:none; touch-action:none; -webkit-touch-callout:none; border-radius:0 0 5px 5px; transition:background 65ms,box-shadow 65ms; }
.organ-key--white { z-index:1; left:calc(var(--white-index)*12.5%); width:12.5%; height:100%; border:1px solid #b2a996; border-bottom:6px solid #cfc6b3; color:#5c6554; background:linear-gradient(#ece9dc,#fffcf0 24%,#fffdf5 94%,#e8dfcc); box-shadow:inset 0 3px 6px #43382938; }
.organ-key--black { z-index:2; left:calc(var(--white-index)*12.5%); transform:translateX(-50%); width:clamp(24px,4.5vw,49px); height:61%; border:1px solid #241e1a; border-bottom:7px solid #1e1d18; color:#f5edd9; background:linear-gradient(90deg,#302e28,#49483d 30%,#48483e 65%,#2b2b24); box-shadow:2px 5px 4px #372b2547,inset 0 -2px 0 #625f4f; }
.organ-key__name { font-size:1.15rem; font-weight:900; line-height:1.2; }
.organ-key__shortcut { margin-top:8px; width:20px; height:20px; border:1px solid #d7d6c5; border-radius:5px; color:#85907d; font-family:inherit; font-size:.65rem; line-height:19px; }
.organ-key--black .organ-key__name { font-size:.75rem; }.organ-key--black .organ-key__shortcut { color:#c4c5b4; border-color:#747466; width:17px; height:17px; line-height:16px; font-size:.6rem; margin-top:6px; }
.organ-key[data-next=true] { background:linear-gradient(#b4d5b3,#d8edc6); border-color:#477457; color:#284c33; }
.organ-key[data-next=true]::after { content:"↓"; position:absolute; bottom:62px; font-size:1.5rem; font-weight:900; }
.organ-key[data-sounding=true] { background:linear-gradient(#edbb65,#ffe29b); color:#694619; border-color:#b8893c; box-shadow:inset 0 4px 10px #9b632938; }
.organ-key--white[data-sounding=true] { height:calc(100% - 2px); border-bottom-width:3px; }
.organ-key--black[data-sounding=true] { background:linear-gradient(#bc8a3e,#ecd091); border-bottom-color:#825c2a; color:#352813; }
.organ-key:focus-visible { outline:3px solid #397f9b!important; outline-offset:-4px!important; }
.organ-console-foot { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:9px; color:#fff2d8; }
.organ-console-foot p { margin:0; font-size:.78rem; }
.organ-stop-all { flex-shrink:0; min-height:44px; padding:8px 11px; color:#ffedce; border:1px solid #d3b28570; background:#6748317a; border-radius:10px; font-size:.75rem; font-weight:800; }
.organ-stop-all span { margin-right:5px; font-size:.65rem; }
.organ-status { min-height:25px; max-width:none; width:100%; margin:23px 0 13px; color:#45654d; text-align:center; font-size:.88rem; font-weight:700; }
.organ-bottom { display:flex; justify-content:space-between; align-items:flex-start; gap:25px; border-top:1px solid #d9dfca; padding-top:16px; }
.organ-bottom > p { margin:8px 0 0; color:#718060; font-size:.8rem; }.organ-bottom > p span { color:#a27a2b; padding-right:5px; font-size:1.2rem; }
.organ-help { max-width:390px; font-size:.8rem; }.organ-help summary { min-height:44px; padding:10px 0 10px 15px; cursor:pointer; color:#41664f; font-weight:900; }.organ-help p { margin:10px 0 0; line-height:1.7; }
.organ-footer { max-width:1104px; margin:0 auto 25px; padding:0 16px; text-align:center; color:#758269; font-size:.68rem; }.organ-footer a { color:inherit; }
.organ-noscript { padding:20px; background:#fff2cb; border:1px solid #cbb574; border-radius:12px; }
@media(max-width:850px) {
  .organ-intro { align-items:flex-start; flex-direction:column; gap:18px; }.organ-mode { align-self:flex-start; }
  .organ-learning-body { flex-wrap:wrap; }.organ-learning-body > div:first-child { flex:1; }.organ-demo-controls { flex-direction:row; }.organ-melody { flex-basis:100%; max-width:none; order:3; }
  .organ-pipe-room { height:190px; }.organ-window { width:47px; height:88px; border-width:5px; }.organ-window--left { left:3%; }.organ-window--right { right:3%; }
  .organ-pipe { max-width:27px; }.organ-pipes { gap:7px; }
}
@media(max-width:540px) {
  .organ-main:has([data-organ-mode="learn"][aria-pressed="true"]) .organ-score { flex-direction:column; gap:9px; }
  .organ-score { padding:12px 9px; }.organ-score #organ-next-note { font-size:.8rem; }
  .organ-header { padding:14px 16px; gap:9px; }.organ-brand { font-size:.82rem; gap:8px; }.organ-brand img { width:40px; height:40px; }.organ-brand small { font-size:.58rem; max-width:145px; }.organ-back { padding:8px 11px; font-size:.73rem; gap:6px; }
  .organ-main { padding:23px 12px 25px; }.organ-intro { gap:16px; padding:0 4px; margin-bottom:18px; }.organ-intro h1 { font-size:2.4rem; }.organ-intro p:last-child { font-size:.86rem; }.organ-eyebrow { font-size:.62rem; }
  .organ-mode { width:100%; }.organ-mode button { flex:1; padding:10px 5px; font-size:.8rem; }.organ-mode button span { margin-right:2px; }
  .organ-instrument { border-radius:53px 53px 17px 17px; }.organ-pipe-room { height:154px; padding:16px 12% 0; border-top-width:9px; }.organ-pipe-room::before { border-radius:40px 40px 0 0; }
  .organ-pipes { gap:4px; padding-bottom:18px; }.organ-pipe::before { height:8px; border-top-width:2px; }.organ-pipe-caption { font-size:.46rem; letter-spacing:.13em; }
  .organ-window { width:25px; height:65px; border-width:3px; border-radius:25px 25px 5px 5px; bottom:28px; font-size:1.1rem; background-size:14px 20px; }
  .organ-console { padding:12px 9px 9px; }.organ-console-head { margin-bottom:12px; gap:10px; }.organ-console-line { width:35px; }.organ-plaque { font-size:.49rem; padding:4px 10px; }
  .organ-console-controls { flex-wrap:wrap; justify-content:center; gap:6px; margin-bottom:9px; }.organ-stops { width:100%; justify-content:center; gap:8px; }.organ-stops button { font-size:.72rem; padding:7px 9px 7px 7px; min-height:44px; gap:6px; }.organ-stop-dot { width:21px; height:21px; }
  .organ-volume { font-size:.68rem; gap:9px; }.organ-volume input { width:118px; height:44px; }
  .organ-keybed { border-width:5px; border-top-width:8px; border-bottom-width:8px; }.organ-keys { height:161px; }.organ-key { padding-bottom:8px; }.organ-key__name { font-size:.93rem; }.organ-key__shortcut { margin-top:6px; width:16px; height:16px; line-height:15px; font-size:.55rem; }.organ-key--black .organ-key__name { font-size:.63rem; }.organ-key--black .organ-key__shortcut { width:14px; height:14px; line-height:13px; font-size:.51rem; }
  .organ-key[data-next=true]::after { bottom:54px; font-size:1.3rem; }.organ-console-foot { gap:7px; margin-top:7px; }.organ-console-foot p { font-size:.7rem; max-width:170px; }.organ-stop-all { padding:7px 8px; font-size:.73rem; }
  .organ-status { margin:21px 4px 12px; font-size:.79rem; }.organ-bottom { flex-direction:column; gap:6px; padding:12px 5px 0; }.organ-bottom > p { margin:0; font-size:.75rem; }.organ-help { max-width:none; }.organ-help summary { padding-left:0; }
  .organ-learning { border-radius:16px; margin-bottom:17px; }.organ-song-choices { padding:10px; gap:4px; }.organ-song-choices button { padding:7px 9px; font-size:.73rem; }.organ-learning-body { padding:15px; gap:13px; }.organ-learning h2 { font-size:1.2rem; }.organ-learning-body > div:first-child { flex-basis:100%; }#organ-next-note { font-size:.8rem; }.organ-demo-controls { width:100%; }.organ-demo-controls button { flex:1; font-size:.75rem; padding:8px; }#organ-melody-notes { gap:5px; }#organ-melody-notes > * { min-width:25px; height:30px; font-size:.78rem; padding:2px 5px; }
}
@media(prefers-reduced-motion:reduce) { .organ-page *, .organ-page *::before, .organ-page *::after { animation:none!important; transition:none!important; } }
@media(max-width:540px) {
  .organ-phrase-navigation { margin:0 15px 16px; padding-top:13px; }
  .organ-phrase-actions .organ-button { padding:8px 10px; font-size:.7rem; }
  .organ-phrase-actions [data-organ-demo-all] { order:3; width:100%; }
  .organ-phrase-navigation > p { font-size:.72rem; }
}

/* Two manuals, with a complete performance always within reach. */
.organ-main { max-width:1260px; }
.organ-intro { margin-bottom:22px; }
.organ-performance { display:flex; align-items:center; gap:21px; margin:0 0 25px; padding:21px 25px; border:1px solid #d7ccaa; border-radius:19px; background:linear-gradient(110deg,#fffdf4,#f7edce); box-shadow:0 4px 16px #71613208; }
.organ-performance-emblem { display:grid; place-items:center; flex-shrink:0; width:63px; height:74px; border:1px solid #d9c68f; border-radius:35px 35px 12px 12px; background:linear-gradient(#f8e6b5,#fff9e9); color:#8b672c; font:2.4rem Georgia,serif; }
.organ-performance-copy { flex:1; min-width:0; }
.organ-performance h2 { margin:0; color:#315441; font-family:"Baloo 2",sans-serif; font-size:1.45rem; font-weight:800; line-height:1.3; }
#organ-performance-label { margin:5px 0 0; color:#6b7053; font-size:.8rem; }
#organ-performance-progress { display:block; appearance:none; -webkit-appearance:none; width:min(100%,390px); height:5px; margin-top:12px; border:0; border-radius:9px; overflow:hidden; background:#e6dfc4; accent-color:#51744e; }
#organ-performance-progress::-webkit-progress-bar { background:#e6dfc4; border-radius:9px; }
#organ-performance-progress::-webkit-progress-value { background:#51744e; border-radius:9px; }
#organ-performance-progress::-moz-progress-bar { background:#51744e; border-radius:9px; }
.organ-listen { display:flex; align-items:center; justify-content:center; gap:10px; flex-shrink:0; min-height:52px; padding:13px 21px; border:1px solid #264d3e; border-radius:13px; color:#fff9e8; background:#315e50; box-shadow:0 3px 0 #234336; font-size:.88rem; font-weight:900; }
.organ-listen:hover { background:#254f41; }
.organ-listen[aria-pressed=true] { background:#775128; border-color:#684320; box-shadow:0 3px 0 #543819; }
.organ-instrument { border-radius:120px 120px 25px 25px; }
.organ-pipe-room { height:295px; padding:24px 13% 0; border-top-width:15px; }
.organ-pipe-room::before { border-radius:100px 100px 0 0; }
.organ-pipes { max-width:880px; gap:clamp(3px,.55vw,7px); }
.organ-pipe { max-width:30px; }
.organ-window { width:85px; height:157px; bottom:39px; }
.organ-window--left { left:3%; }
.organ-window--right { right:3%; }
.organ-pipe-caption { font-size:.64rem; bottom:4px; }
.organ-console { padding:18px clamp(16px,4vw,48px) 16px; }
.organ-console-controls { margin-bottom:17px; }
.organ-stops { flex-wrap:wrap; }
.organ-stops button { min-height:46px; }
.organ-main[data-organ-performance=true] .organ-score { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.organ-score-copy { min-width:0; }
#organ-score-phrase { margin:0 0 6px; color:#6e632f; font:italic 1.05rem Georgia,serif; line-height:1.4; }
#organ-score-phrase:empty { display:none; }
.organ-score .organ-melody { max-width:570px; }
.organ-manuals { user-select:none; -webkit-user-select:none; }
.organ-manual-heading { display:flex; align-items:center; justify-content:space-between; padding:0 8px; margin:15px 0 8px; color:#fff2cf; font-size:.75rem; font-weight:900; letter-spacing:.03em; }
.organ-manual-heading small { margin-left:11px; color:#ecd7b0; font-size:.7rem; font-weight:500; letter-spacing:0; }
.organ-manual-hint { color:#f1dcb7; font-size:.63rem; font-weight:500; }
.organ-manuals > .organ-manual-heading:first-child { margin-top:0; }
.organ-keys { height:179px; }
.organ-keybed--bass .organ-keys { height:160px; }
.organ-key--black { width:clamp(24px,4.5vw,53px); }
.organ-keybed--bass { box-shadow:0 3px 0 #d4a875,0 7px 8px #39271e52; }
.organ-console-foot { margin-top:14px; }
.organ-console-foot p { font-size:.8rem; }
.organ-footer { max-width:1204px; }
@media(max-width:850px) {
  .organ-performance { gap:16px; padding:20px; }
  .organ-performance h2 { font-size:1.23rem; }
  .organ-performance-emblem { display:none; }
  .organ-listen { padding:12px 16px; font-size:.79rem; }
  .organ-pipe-room { height:235px; padding-left:11%; padding-right:11%; }
  .organ-window { width:47px; height:116px; }
  .organ-console-controls { flex-wrap:wrap; justify-content:center; gap:9px 20px; }
  .organ-stops button { font-size:.77rem; }
  .organ-score .organ-melody { max-width:none; }
}
@media(max-width:540px) {
  .organ-main { padding-top:19px; }
  .organ-intro { gap:14px; margin-bottom:17px; }
  .organ-intro h1 { font-size:2.2rem; }
  .organ-intro p:last-child { max-width:300px; line-height:1.6; }
  .organ-performance { flex-direction:column; align-items:stretch; gap:14px; padding:16px; margin-bottom:19px; border-radius:16px; }
  .organ-performance h2 { font-size:1.23rem; }
  .organ-performance .organ-eyebrow { font-size:.56rem; }
  #organ-performance-label { font-size:.73rem; }
  #organ-performance-progress { width:100%; margin-top:10px; }
  .organ-listen { min-height:49px; font-size:.85rem; }
  .organ-instrument { border-radius:64px 64px 18px 18px; }
  .organ-pipe-room { height:170px; padding:16px 9% 0; border-top-width:10px; }
  .organ-pipe-room::before { inset:6px 8px 0; border-radius:50px 50px 0 0; }
  .organ-pipes { gap:2px; padding-bottom:19px; }
  .organ-pipe::before { height:7px; left:6%; right:6%; border-top-width:1px; border-bottom-width:1px; }
  .organ-pipe::after { height:6px; }
  .organ-window { width:21px; height:75px; bottom:30px; font-size:1rem; border-width:3px; }
  .organ-window--left { left:1.7%; }.organ-window--right { right:1.7%; }
  .organ-pipe-caption { font-size:.44rem; }
  .organ-console { padding:12px 9px 11px; }
  .organ-console-controls { gap:5px; margin-bottom:11px; }
  .organ-stops { gap:5px; flex-wrap:nowrap; }
  .organ-stops button { flex:1; flex-direction:column; justify-content:center; gap:5px; padding:8px 4px; border-radius:13px; min-height:62px; font-size:.61rem; }
  .organ-stop-dot { width:20px; height:20px; }
  .organ-volume { justify-content:center; }
  .organ-main[data-organ-performance=true] .organ-score { flex-direction:column; gap:9px; }
  .organ-score { text-align:center; }
  #organ-score-phrase { font-size:.93rem; }
  .organ-manual-heading { margin:13px 0 7px; padding:0 4px; font-size:.68rem; }
  .organ-manual-heading small { margin-left:8px; font-size:.63rem; }
  .organ-manual-hint { font-size:.56rem; }
  .organ-keys { height:157px; }
  .organ-keybed--bass .organ-keys { height:143px; }
  .organ-key__shortcut { font-size:.5rem; }
  .organ-keybed--bass .organ-key__shortcut { min-width:23px; width:auto; padding:0 2px; font-size:.5rem; }
  .organ-keybed--bass .organ-key--black .organ-key__shortcut { min-width:18px; font-size:.41rem; }
  .organ-console-foot { gap:8px; margin-top:10px; }
  .organ-console-foot p { font-size:.68rem; max-width:160px; line-height:1.5; }
}