:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;color:#dce5ea;background:#0a1119;font-size:16px}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer}.shell{max-width:1600px;margin:auto;padding:20px 28px 0}.mast{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #243440;padding-bottom:17px}.brand{display:flex;align-items:center;gap:13px}.brand-mark{color:#56d5de;font-size:2.7rem;line-height:1}.eyebrow,.tag,.slider-head,.hint,.section-no,.scope-bottom,.wave-meta,.keyboard-label,.footer-future{font-size:.76rem;letter-spacing:.14em;font-weight:700}.eyebrow{color:#8da4ae}.eyebrow span{color:#4ed6db;margin-left:12px}h1{font-size:1.65rem;letter-spacing:.1em;line-height:1;margin:7px 0 0;font-weight:760}h1 em{font-style:normal;color:#58dae2}.mast-right{display:flex;align-items:center;gap:30px}.mast-right p{font-size:.86rem;color:#9aaeb8;letter-spacing:.03em}.audio-button{background:#57d9df;color:#071118;border:1px solid #57d9df;padding:13px 19px;min-height:48px;font-weight:800;font-size:.79rem;letter-spacing:.1em;white-space:nowrap}.audio-button[aria-pressed=true]{background:#142d35;color:#69e8ec}.audio-icon{margin-right:8px}.workspace{padding-top:22px}.topline{display:grid;grid-template-columns:minmax(150px,1fr) minmax(240px,1.85fr) minmax(150px,1fr);gap:14px;align-items:stretch}.readout,.interval-readout{border-top:2px solid #32434d;padding:13px 16px 8px;background:#101b25;min-height:117px}.a-readout{border-color:#58d8df}.b-readout{border-color:#f0ae69}.tag{display:block;color:#91a5af}.tag-a{color:#5bdce3}.tag-b{color:#f4b273}.readout strong{font-size:2.25rem;letter-spacing:-.04em;line-height:1.2;display:inline-block;margin:8px 13px 0 0;font-variant-numeric:tabular-nums}.readout span:not(.tag){color:#b9c9cf;font-variant-numeric:tabular-nums;font-size:1.15rem}.readout small{display:block;color:#adbec5;font-size:.8rem;margin-top:1px;font-variant-numeric:tabular-nums}.interval-readout{text-align:center}.interval-readout strong{display:block;font-size:1.6rem;margin:4px 0 8px;font-weight:660}.interval-detail{display:flex;justify-content:center;gap:22px;color:#b5c8d0;font-size:.84rem;font-variant-numeric:tabular-nums}.interval-detail span:last-child{color:#e0c696}.slider-region{margin-top:16px;background:#15232f;border:1px solid #2f4652;padding:13px 22px 11px}.slider-head{display:flex;justify-content:space-between;color:#9fb6c0}.slider-head output{font-size:1.35rem;letter-spacing:0;color:#f3b575;font-variant-numeric:tabular-nums}.slider-wrap{position:relative;padding:12px 0 0}#frequencySlider{display:block;width:100%;height:80px;margin:0;appearance:none;-webkit-appearance:none;touch-action:none;background:linear-gradient(to right,#2b555c,#31666b 28%,#bd8356 100%);border:1px solid #60939a;border-radius:0;cursor:ew-resize}#frequencySlider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:98px;background:#ecf5ef;border:3px solid #0b1922;box-shadow:0 0 0 2px #82e0df,0 0 25px #4fd5d866;border-radius:2px}#frequencySlider::-moz-range-thumb{width:25px;height:92px;background:#ecf5ef;border:3px solid #0b1922;box-shadow:0 0 0 2px #82e0df;border-radius:2px}.slider-scale{display:flex;justify-content:space-between;margin-top:8px;color:#b2c4c9;font-size:.74rem;font-variant-numeric:tabular-nums}.hint{margin:10px 0 0;color:#7f9ca6;font-size:.69rem}.scopes{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(260px,1fr);gap:14px;margin-top:16px}.harmonic-panel,.wave-panel{min-width:0;background:#101b25;border:1px solid #263b46}.panel-head,.controls-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid #263b46}.panel-head>div:first-child,.controls-head>div:first-child{display:flex;align-items:baseline;gap:10px}.section-no{color:#64d1d5}h2{font-size:.86rem;letter-spacing:.13em;margin:0;font-weight:750}.scope-controls{display:flex;align-items:center;gap:20px}.legend{display:flex;align-items:center;gap:7px;font-size:.73rem;color:#b6c5cb}.legend i{height:3px;width:15px;display:inline-block}.a-line{background:#4fdce3}.b-line{background:#efaa6d}.segmented,.tuning-switch{display:flex;border:1px solid #3a535d}.segmented button,.tuning-switch button{border:0;background:transparent;color:#90a8b1;font-size:.69rem;letter-spacing:.08em;font-weight:750;padding:8px 10px;min-height:33px}.segmented button.active,.tuning-switch button.active{background:#25434b;color:#b7fcfa}.canvas-wrap{height:265px;padding:0 10px}canvas{display:block;width:100%;height:100%}.scope-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;color:#8fa6af;border-top:1px solid #223843}.scope-bottom div{color:#e7d09f;font-size:.87rem;letter-spacing:.02em}.scope-bottom div span{margin-left:15px;color:#b5c5c9}.wave-meta{color:#8aa4ad}.wave-panel canvas{height:265px;padding:0 6px}.wave-note{border-top:1px solid #223843;padding:11px 14px;color:#93a8b0;font-size:.75rem;line-height:1.45;min-height:43px}.controls{margin-top:16px;background:#101b25;border:1px solid #263b46}.tuning-switch button{font-size:.77rem;min-width:78px;padding:8px 13px}.interval-buttons{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:5px;padding:14px 15px 10px}.interval-button{background:#172832;border:1px solid #35505a;color:#d8e7e9;min-height:53px;padding:5px 3px;text-align:center;line-height:1.1}.interval-button strong{display:block;font-size:.94rem;font-weight:740}.interval-button small{display:block;color:#8fa7b0;font-size:.65rem;margin-top:5px}.interval-button:hover,.key:hover{border-color:#7bdce0}.interval-button.active{border-color:#65e0df;background:#1e4a50;color:#f2ffff}.interval-button.active small{color:#bce4e5}.keyboard-row{border-top:1px solid #253b46;display:flex;gap:18px;align-items:center;padding:12px 16px}.keyboard-label{line-height:1.45;color:#9cb3bd;min-width:85px}.keyboard-label small{font-size:.58rem;color:#6e909e}.keyboard{display:flex;position:relative;height:61px;flex:0 0 350px}.key{position:relative;flex:1;background:#c8d4d7;border:1px solid #45616c;border-radius:0 0 3px 3px;color:#15252e;padding:0 0 5px;display:flex;align-items:flex-end;justify-content:center;font-size:.62rem;font-weight:800}.key.black{background:#263640;color:#d9e4e5;height:37px;z-index:2;margin:0 -12px;flex:0 0 24px;border-color:#6c8991}.key.active{background:#69d9d9}.key.black.active{background:#db9c64}.tuning-note{font-size:.78rem;line-height:1.4;color:#9db4bd;max-width:360px}.footer-future{opacity:.6;font-size:.63rem}footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#78929d;font-size:.69rem;line-height:1.5;padding:19px 0 24px}@media(max-width:1020px){.shell{padding:16px}.mast-right p{display:none}.scopes{grid-template-columns:1fr 0.85fr}.scope-controls{gap:8px}.segmented button{font-size:.6rem;padding:7px}.interval-buttons{grid-template-columns:repeat(10,minmax(0,1fr))}.keyboard{flex-basis:280px}.tuning-note{max-width:220px}}@media(max-width:730px){.shell{padding:12px}.mast{align-items:flex-start}.brand-mark{display:none}h1{font-size:1.22rem}.eyebrow{font-size:.58rem}.eyebrow span{margin-left:3px}.audio-button{padding:9px;min-height:41px;font-size:.63rem}.topline{grid-template-columns:1fr 1fr}.interval-readout{order:3;grid-column:1 / -1}.readout{min-height:94px}.readout strong{font-size:1.65rem}.readout span:not(.tag){font-size:.9rem}.scopes{grid-template-columns:1fr}.canvas-wrap{height:235px}.wave-panel canvas{height:150px}.interval-buttons{grid-template-columns:repeat(6,minmax(0,1fr))}.keyboard-row{flex-wrap:wrap}.keyboard{flex:1 1 250px}.tuning-note{max-width:none}.interval-detail{flex-wrap:wrap;gap:5px 14px}.slider-region{padding:10px}.slider-head output{font-size:1.05rem}.scope-bottom>span{display:none}footer{display:block}footer span{display:block;margin:4px 0}}@media(max-height:850px) and (min-width:731px){.shell{padding-top:11px}.workspace{padding-top:11px}.slider-region,.scopes,.controls{margin-top:10px}.canvas-wrap,.wave-panel canvas{height:190px}.slider-region{padding-top:8px;padding-bottom:6px}#frequencySlider{height:64px}#frequencySlider::-webkit-slider-thumb{height:78px}.interval-button{min-height:47px}.keyboard-row{padding-top:7px;padding-bottom:7px}.keyboard{height:48px}.key.black{height:30px}footer{padding-top:9px;padding-bottom:8px}}
/* v0.2: measured controls and a compact, full-height iPad landscape layout. */
.a-value{display:flex;align-items:center;gap:12px;margin-top:7px;min-width:0}.a-value select{appearance:auto;-webkit-appearance:menulist;min-width:96px;max-width:126px;border:1px solid #4b8287;background:#15323b;color:#ebffff;font-size:1.62rem;font-weight:730;line-height:1.2;padding:5px 4px;border-radius:2px;cursor:pointer}.a-value span{white-space:nowrap;font-size:1.04rem!important}.a-value select:focus-visible,button:focus-visible,#frequencySlider:focus-visible{outline:2px solid #e8d29c;outline-offset:2px}.trigger-switch{display:flex;border:1px solid #3a535d;white-space:nowrap}.trigger-switch button{border:0;background:transparent;color:#a3b6be;font-weight:750;letter-spacing:.06em;font-size:.73rem;min-height:34px;padding:7px 9px}.trigger-switch button.active{background:#25434b;color:#c5f8f6}.wave-note{font-size:.81rem;color:#afc1c8}.keyboard{display:block;position:relative;background:#0c151d;overflow:hidden;border:1px solid #40515b;border-radius:0 0 3px 3px}.key,.key.black{position:absolute;display:flex;align-items:flex-end;justify-content:center;margin:0;flex:none;min-width:0}.key.white{height:100%;background:linear-gradient(#d8e3e3,#aabcc0);color:#172a31;border:1px solid #526973;border-top:0;border-radius:0 0 3px 3px;z-index:1;padding-bottom:5px;font-size:.72rem}.key.black{height:62%;background:linear-gradient(#202e38,#0b1720);border:1px solid #75909a;border-top:0;border-radius:0 0 3px 3px;box-shadow:0 3px 4px #08131dbb;color:transparent;z-index:2;padding:0}.key.white.active{background:linear-gradient(#8de4e2,#53c6c9)}.key.black.active{background:linear-gradient(#efbc86,#c8874c)}.keyboard-label small{font-size:.7rem}.interval-button small{font-size:.73rem}.slider-scale{font-size:.79rem}.hint{font-size:.75rem}.footer-future{font-size:.7rem}
@media(min-width:900px) and (max-height:820px){.shell{padding:8px 16px 0}.mast{padding-bottom:7px}.brand-mark{font-size:2rem}h1{font-size:1.32rem;margin-top:3px}.mast-right p{margin:0}.audio-button{min-height:38px;padding:8px 13px}.workspace{padding-top:8px}.topline{gap:8px}.readout,.interval-readout{min-height:78px;padding:8px 11px 5px}.tag{font-size:.73rem}.a-value{margin-top:3px}.a-value select{font-size:1.34rem;padding:3px;min-width:88px}.a-value span{font-size:.9rem!important}.readout strong{font-size:1.8rem;margin-top:3px}.readout span:not(.tag){font-size:.96rem}.readout small{font-size:.74rem}.interval-readout strong{font-size:1.32rem;margin:2px 0 4px}.interval-detail{font-size:.75rem;gap:12px}.slider-region,.scopes,.controls{margin-top:8px}.slider-region{padding:7px 14px 5px}.slider-head{font-size:.76rem}.slider-head output{font-size:1.08rem}.slider-wrap{padding-top:5px}#frequencySlider{height:53px}#frequencySlider::-webkit-slider-thumb{width:18px;height:65px}#frequencySlider::-moz-range-thumb{width:18px;height:61px}.slider-scale{margin-top:5px}.hint{margin-top:3px;font-size:.7rem}.scopes{gap:8px}.panel-head,.controls-head{padding:7px 11px}.panel-head h2,.controls-head h2{font-size:.82rem}.canvas-wrap,.wave-panel canvas{height:130px}.scope-bottom{padding:6px 11px}.scope-bottom div{font-size:.76rem}.wave-note{padding:6px 10px;min-height:0;font-size:.73rem}.segmented button,.trigger-switch button{min-height:28px;padding:5px 7px;font-size:.68rem}.tuning-switch button{min-height:29px;padding:5px 11px}.interval-buttons{gap:4px;padding:7px 11px}.interval-button{min-height:37px;padding:3px 2px}.interval-button strong{font-size:.84rem}.interval-button small{font-size:.68rem;margin-top:2px}.keyboard-row{padding:5px 11px;gap:12px}.keyboard{height:38px;flex:0 0 340px}.keyboard-label{min-width:65px;font-size:.72rem}.keyboard-label small{font-size:.64rem}.key.white{font-size:.66rem;padding-bottom:2px}.tuning-note{font-size:.72rem;max-width:none}footer{gap:8px;padding:7px 0 5px;font-size:.64rem;line-height:1.25}.footer-future{font-size:.64rem}}
@media(max-width:730px){.a-value{display:block}.a-value select{font-size:1.25rem;min-width:100px}.a-value span{display:block;margin-top:5px}.readout,.interval-readout{min-height:0}.trigger-switch button{font-size:.68rem;padding:6px}.keyboard{min-height:58px;flex:1 1 100%}.key.white{font-size:.7rem}.hint{font-size:.69rem}}
@media(max-height:500px) and (min-width:731px) and (max-width:950px){.shell{max-width:800px;margin:auto}}
@media(min-width:900px) and (max-height:820px){.interval-button strong{font-size:.9rem}.interval-button small{font-size:.75rem}.hint{font-size:.75rem}.keyboard-label small{font-size:.7rem}.tuning-note{font-size:.76rem}footer,.footer-future{font-size:.69rem}}
@media(min-width:900px) and (max-height:820px){.canvas-wrap,.wave-panel canvas{height:clamp(102px,calc(50dvh - 250px),130px)}.a-value select{min-height:40px}.interval-button{min-height:42px}.tuning-switch button{min-height:34px}.segmented button,.trigger-switch button{min-height:32px}}
/* INTERVAL SCOPE: touch hints, independent B mute, and bilingual information. */
.tag-row{display:flex;align-items:center;gap:7px}.tag-center{justify-content:center}.tag-row .tag{display:inline}.tip-button,.tension-tip,.about-button{border:0;background:transparent;color:#78c9ce;font-weight:800;cursor:pointer}.tip-button{flex:none;font-size:1rem;line-height:1;min-width:25px;min-height:25px;padding:1px}.tip-button:hover,.tip-button[aria-expanded=true],.tension-tip:hover,.tension-tip[aria-expanded=true],.about-button:hover,.about-button[aria-expanded=true]{color:#c7f9f7}.tip-button:focus-visible,.tension-tip:focus-visible,.about-button:focus-visible{outline:2px solid #e8d29c;outline-offset:2px}.b-readout{display:block;width:100%;appearance:none;text-align:left;color:inherit;cursor:pointer;border-left:0;border-right:0;border-bottom:0;font:inherit}.b-readout .tag-row{justify-content:space-between}.b-readout .mute-state{color:#c99b70!important;font-size:.66rem!important;letter-spacing:.08em;font-weight:760;white-space:nowrap}.b-readout .b-value{display:block}.b-readout.muted{background:#161b21;border-color:#af8b70}.b-readout.muted .b-value{opacity:.72}.b-readout.muted .mute-state{color:#f3b579!important}.mute-button{border-color:#a57e64;color:#f5c7a3}.mute-button.active{background:#493022;border-color:#f2b37d;color:#ffe5c9}.mute-button small{color:#d6a57f}.control-meta{display:flex;align-items:center;gap:8px}.tension-tip{font-size:.71rem;letter-spacing:.06em;white-space:nowrap;min-height:34px;padding:5px 7px;border:1px solid #365660}.about-button{font-size:.7rem;letter-spacing:.13em;padding:0}.footer-japanese{color:#90a6af;font-size:.72rem;line-height:1.4;margin:0;padding:0 0 11px}.tip-popover{position:fixed;z-index:100;width:min(370px,calc(100vw - 20px));max-height:min(70vh,460px);overflow:auto;background:#172934;border:1px solid #65abb1;box-shadow:0 18px 50px #02090ed9;color:#e1eef0;padding:17px 18px 16px;border-radius:3px}.tip-popover[hidden]{display:none}.tip-popover h3,.tip-popover h4{margin:0 26px 8px 0;color:#8de3e4;letter-spacing:.1em;font-size:.83rem}.tip-popover h4{color:#e4c89c;margin-top:13px}.tip-popover p{font-size:.89rem;line-height:1.55;margin:0;color:#d9e5e8}.tip-rule{height:1px;background:#41606a;margin:14px 0}.tip-close{position:absolute;right:8px;top:6px;border:0;background:transparent;color:#dce9eb;font-size:1.5rem;line-height:1;min-width:32px;min-height:32px}
@media(min-width:900px) and (max-height:820px){.tip-button{min-width:22px;min-height:22px;font-size:.9rem}.b-readout .mute-state{font-size:.59rem!important}.tension-tip{font-size:.68rem;min-height:29px;padding:4px 6px}.control-meta{gap:5px}footer{gap:9px}.footer-japanese{font-size:.66rem;padding-bottom:3px}.interval-button{min-height:42px}}
@media(max-width:730px){.b-readout .mute-state{font-size:.57rem!important}.control-meta{gap:3px}.tension-tip{font-size:.61rem;padding:3px}.controls-head{flex-wrap:wrap}.tip-popover{font-size:.9rem}.footer-japanese{font-size:.72rem}}
@media(min-width:900px) and (max-height:820px){.canvas-wrap,.wave-panel canvas{height:clamp(95px,calc(50dvh - 258px),130px)}}
@media(min-width:900px) and (max-height:820px){.canvas-wrap,.wave-panel canvas{height:clamp(90px,calc(50dvh - 262px),130px)}}
@media(max-width:1020px){.b-readout .tag-row{flex-wrap:wrap;gap:2px}.b-readout .mute-state{white-space:normal}}
@media(max-width:730px){.topline{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.readout,.interval-readout{min-width:0}.b-readout .b-value{min-width:0}.b-readout .b-value span{overflow-wrap:anywhere}}
@media(max-width:730px){.harmonic-panel .panel-head{flex-wrap:wrap}.harmonic-panel .scope-controls{width:100%;min-width:0;flex-wrap:wrap;justify-content:space-between}.harmonic-panel .segmented{min-width:0}.harmonic-panel .segmented button{white-space:normal}}
/* Ratio marks share the native range thumb's travel, measured by renderScale(). */
#frequencySlider{--slider-thumb-width:28px}
#frequencySlider::-webkit-slider-thumb{width:var(--slider-thumb-width)}
#frequencySlider::-moz-range-thumb{width:var(--slider-thumb-width)}
.slider-scale{position:relative;display:block;height:1em}
.slider-scale span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
@media(min-width:900px) and (max-height:820px){#frequencySlider{--slider-thumb-width:18px}}
.footer-nav{display:flex;align-items:center;gap:7px;white-space:nowrap}
.footer-nav a{color:#96d5d7;font-size:.69rem;text-decoration:none}
.footer-nav a:hover,.footer-nav a:focus-visible{text-decoration:underline}
@media(max-width:730px){.footer-nav{margin-bottom:8px}}
@media(min-width:900px) and (max-height:820px){.footer-japanese{padding-bottom:0}}

/* Keep the frequency control touchable while giving the scopes more room. */
#frequencySlider{height:62px}
#frequencySlider::-webkit-slider-thumb{height:74px}
#frequencySlider::-moz-range-thumb{height:70px}
@media(max-height:850px) and (min-width:731px){
  #frequencySlider{height:52px}
  #frequencySlider::-webkit-slider-thumb{height:64px}
  #frequencySlider::-moz-range-thumb{height:60px}
}
@media(min-width:900px) and (max-height:820px){
  #frequencySlider{height:46px}
  #frequencySlider::-webkit-slider-thumb{height:58px}
  #frequencySlider::-moz-range-thumb{height:54px}
}

/* iPhone landscape uses the available width instead of a narrow stacked view. */
@media(orientation:landscape) and (max-height:500px) and (max-width:1000px){
  .shell{max-width:none;padding:6px max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))}
  .mast{align-items:center;gap:8px;padding-bottom:5px}
  .brand-mark,.mast-right p{display:none}
  h1{font-size:1.15rem;margin-top:2px}
  .eyebrow{font-size:.61rem}
  .audio-button{min-height:36px;padding:5px 9px;font-size:.68rem}
  .workspace{padding-top:6px}
  .topline{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) minmax(0,1fr);gap:6px}
  .interval-readout{order:initial;grid-column:auto}
  .readout,.interval-readout{min-height:73px;padding:6px 8px 4px}
  .tag{font-size:.6rem;letter-spacing:.07em}
  .a-value{display:flex;align-items:center;gap:5px;margin-top:3px}
  .a-value select{min-width:68px;max-width:72px;min-height:34px;padding:2px;font-size:1.03rem}
  .a-value span{display:inline;margin:0;white-space:nowrap;font-size:.7rem!important}
  .readout strong{font-size:1.25rem;margin:3px 4px 0 0}
  .readout span:not(.tag){font-size:.75rem}
  .readout small{font-size:.62rem}
  .interval-readout strong{font-size:1.05rem;margin:2px 0 3px}
  .interval-detail{gap:2px 8px;font-size:.65rem;flex-wrap:wrap}
  .b-readout .mute-state{font-size:.52rem!important}
  .slider-region,.scopes,.controls{margin-top:6px}
  .slider-region{padding:5px 8px 3px}
  .slider-head output{font-size:1rem}
  .slider-wrap{padding-top:4px}
  #frequencySlider{--slider-thumb-width:20px;height:44px}
  #frequencySlider::-webkit-slider-thumb{height:54px}
  #frequencySlider::-moz-range-thumb{height:52px}
  .slider-scale{height:27px;margin-top:3px;font-size:.68rem}
  .slider-scale [data-ratio="3/2"]{top:14px}
  .hint{margin-top:3px;font-size:.64rem}
  .scopes{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:6px}
  .panel-head,.controls-head{padding:5px 7px;gap:5px}
  .wave-panel .panel-head{flex-wrap:wrap}
  .wave-panel .trigger-switch{margin-left:auto}
  .panel-head h2,.controls-head h2{font-size:.72rem}
  .harmonic-panel .scope-controls{gap:5px}
  .legend{font-size:.61rem}
  .segmented button,.trigger-switch button{min-height:28px;padding:4px 5px;font-size:.6rem}
  .canvas-wrap,.wave-panel canvas{height:112px}
  .scope-bottom,.wave-note{padding:5px 7px;font-size:.65rem;min-height:0}
  .scope-bottom div{font-size:.7rem}
  .interval-buttons{grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;padding:6px 7px}
  .interval-button{min-height:42px;padding:3px 1px}
  .interval-button strong{font-size:.76rem}
  .interval-button small{font-size:.59rem;margin-top:2px}
  .keyboard-row{flex-wrap:nowrap;gap:6px;padding:5px 7px}
  .keyboard-label{min-width:52px;font-size:.65rem}
  .keyboard-label small{font-size:.58rem}
  .keyboard{flex:0 0 min(44vw,300px);height:42px;min-height:42px}
  .tuning-note{max-width:none;font-size:.65rem}
  footer{padding:7px 0 4px}
}

/* A restrained cue for the current frequency's distance from each 12-TET button. */
.interval-button.near{box-shadow:0 0 0 1px rgba(101,224,223,var(--near-alpha)),0 0 var(--near-blur) rgba(101,224,223,var(--near-alpha))}

/* iPad landscape: put the small piano beside the intervals to save height. */
@media(min-width:900px) and (min-height:600px) and (max-height:900px){
  .shell{padding:8px 16px 0}
  .mast{padding-bottom:6px}
  .brand-mark{font-size:1.9rem}
  h1{font-size:1.28rem;margin-top:3px}
  .audio-button{min-height:38px;padding:7px 12px}
  .workspace{padding-top:8px}
  .topline{gap:8px}
  .readout,.interval-readout{min-height:74px;padding:7px 10px 5px}
  .slider-region,.scopes,.controls{margin-top:7px}
  .slider-region{padding:6px 13px 5px}
  .slider-wrap{padding-top:5px}
  #frequencySlider{height:44px}
  #frequencySlider::-webkit-slider-thumb{height:56px}
  #frequencySlider::-moz-range-thumb{height:54px}
  .slider-scale{margin-top:4px}
  .hint{margin-top:3px}
  .panel-head,.controls-head{padding:6px 10px}
  .canvas-wrap,.wave-panel canvas{height:clamp(105px,14dvh,125px)}
  .scope-bottom,.wave-note{padding:5px 10px;min-height:0}
  .controls-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(275px,32%)}
  .interval-buttons{grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;padding:7px}
  .interval-button{min-height:42px}
  .keyboard-row{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 42px auto;gap:3px;min-width:0;padding:6px 8px;border-top:0;border-left:1px solid #253b46}
  .keyboard-label{min-width:0;font-size:.67rem;line-height:1.1}
  .keyboard-label br{display:none}
  .keyboard-label small{font-size:.61rem;margin-left:6px}
  .keyboard{width:100%;height:42px;min-height:42px;flex:none}
  .tuning-note{max-width:none;font-size:.67rem;line-height:1.25}
  footer{padding:7px 0 4px}
}
@media(min-width:1000px) and (min-height:600px) and (max-height:900px){
  .interval-buttons{grid-template-columns:repeat(11,minmax(0,1fr))}
}
#tipEn,#tipJa{white-space:pre-line}
.contact-pending{color:#78929d;font-size:.69rem}

/* Responsive density: width arranges the instrument, height adjusts its depth. */
.shell{max-width:1480px;padding:14px 20px 0}
.mast{padding-bottom:10px}
.workspace{padding-top:12px}
.slider-region,.scopes,.controls{margin-top:10px}
.slider-region{padding:8px 14px 5px}
.slider-wrap{padding-top:4px}
#frequencySlider{height:56px;min-height:56px;background:transparent;border:0;touch-action:none}
#frequencySlider::-webkit-slider-runnable-track{height:32px;background:linear-gradient(to right,#2b555c,#31666b 28%,#bd8356 100%);border:1px solid #60939a;border-radius:0}
#frequencySlider::-moz-range-track{height:32px;background:linear-gradient(to right,#2b555c,#31666b 28%,#bd8356 100%);border:1px solid #60939a;border-radius:0}
#frequencySlider::-webkit-slider-thumb{height:48px;margin-top:-9px}
#frequencySlider::-moz-range-thumb{height:48px}
.slider-scale{margin-top:3px}
.hint{margin-top:4px}
.scopes{grid-template-columns:minmax(0,2fr) minmax(270px,1fr);gap:10px;align-items:start}
.panel-head,.controls-head{padding:8px 11px}
.canvas-wrap{height:190px}
.wave-panel canvas{height:auto;aspect-ratio:2 / 1;padding:0 6px;max-height:190px}
.scope-bottom,.wave-note{padding:6px 11px;min-height:0}
.wave-note{font-size:.73rem;line-height:1.3}
.trigger-switch button{min-height:30px;padding:5px 7px;font-size:.68rem}
.interval-buttons{padding:9px 11px 7px;gap:4px}
.interval-button{min-height:44px}
.keyboard-row{padding:7px 11px}
.keyboard{height:48px}
footer{padding:9px 0 7px}

@media(max-width:1050px){
  .scopes{grid-template-columns:minmax(0,1.65fr) minmax(255px,1fr)}
  .panel-head{gap:6px}
  .scope-controls{gap:7px}
}
@media(max-width:820px){
  .shell{padding:12px 14px 0}
  .scopes{grid-template-columns:1fr}
  .canvas-wrap{height:180px}
  .wave-panel canvas{width:min(100%,340px);height:auto;max-height:none;aspect-ratio:2 / 1;margin:0 auto}
  .wave-note{text-align:center}
}
@media(min-width:731px) and (max-width:900px){
  .a-value{display:block}
  .a-value span{display:block;margin-top:4px}
}
@media(max-width:730px){
  .shell{padding:10px 12px 0}
  .mast{padding-bottom:8px}
  .workspace{padding-top:9px}
  .slider-region,.scopes,.controls{margin-top:8px}
  .slider-region{padding:7px 10px 5px}
  .canvas-wrap{height:172px}
  .wave-panel canvas{width:min(100%,380px)}
  .interval-buttons{padding:8px;gap:4px}
  .interval-button{min-height:44px}
}
@media(max-width:430px){
  .canvas-wrap{height:156px}
  .wave-panel canvas{width:min(100%,270px);aspect-ratio:2.15 / 1}
  .topline{gap:7px}
  .readout,.interval-readout{padding:8px 9px 5px}
}
@media(max-width:500px){
  .slider-scale{height:29px}
  .slider-scale [data-ratio="3/2"]{top:15px}
  .slider-region .hint{display:none}
  .wave-panel .panel-head{padding:5px 8px}
  .wave-note{padding:4px 8px}
}
@media(max-height:780px) and (min-width:821px){
  .shell{padding-top:7px}
  .mast{padding-bottom:5px}
  .workspace{padding-top:7px}
  .slider-region,.scopes,.controls{margin-top:6px}
  .readout,.interval-readout{min-height:72px;padding:6px 10px 4px}
  .slider-region{padding:5px 12px 3px}
  .canvas-wrap{height:clamp(132px,19dvh,170px)}
  .wave-panel canvas{max-height:170px}
  .panel-head,.controls-head{padding:5px 9px}
  .scope-bottom,.wave-note{padding:4px 9px}
  .interval-buttons{padding:6px 9px}
  .interval-button{min-height:40px}
  .keyboard-row{padding:5px 9px}
  .keyboard{height:42px}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:1000px){
  .shell{max-width:none;padding:5px max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))}
  .scopes{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:6px}
  .canvas-wrap{height:132px}
  .wave-panel canvas{width:min(100%,250px);height:auto;max-height:none;aspect-ratio:2 / 1;margin:0 auto}
  .wave-panel .panel-head{flex-wrap:wrap}
  .slider-region{padding:4px 8px 2px}
  #frequencySlider{height:48px;min-height:48px}
  #frequencySlider::-webkit-slider-runnable-track{height:26px}
  #frequencySlider::-moz-range-track{height:26px}
  #frequencySlider::-webkit-slider-thumb{height:42px;margin-top:-9px}
  #frequencySlider::-moz-range-thumb{height:42px}
}