:root{color-scheme:dark;--bg:#100d13;--surface:#19141c;--surface2:#211a24;--line:#4c3942;--gold:#e2b568;--gold-light:#ffdf9e;--text:#f6ecdf;--muted:#b7a9a9;--teal:#74ceb5}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 50% -10%,#30212e 0,transparent 56%),var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.65}
a{color:var(--gold-light)}a:hover{color:white}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.site-header{max-width:1160px;margin:auto;padding:28px 28px 25px}.topline{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;padding-bottom:26px;border-bottom:1px solid var(--line);font-size:.82rem;letter-spacing:.08em}.topline .back{text-decoration:none}.edition{color:var(--muted)}.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.21em;font-size:.76rem;font-weight:700;margin:20px 0 9px}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:normal;line-height:1.2}h1{font-size:clamp(2.3rem,6vw,4.4rem);margin:0}h1 em{color:var(--gold);font-weight:normal}.lead{color:#d3c4c4;font-size:clamp(1rem,2vw,1.18rem);max-width:720px;margin:16px 0 10px}
main{max-width:1160px;margin:auto;padding:0 28px 70px}.instrument-panel{border:1px solid var(--line);border-radius:19px;background:linear-gradient(160deg,#201822,#151018);box-shadow:0 18px 66px #05040890;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:18px 32px 0}.panel-head .eyebrow{margin:2px 0}.panel-head h2{font-size:clamp(1.45rem,3.2vw,2rem);margin:6px 0}.indicator{display:inline-block;color:var(--gold-light);border:1px solid #82603a;border-radius:50px;padding:7px 18px;font-size:.83rem}
.instrument-frame{padding:10px 20px 0;background:radial-gradient(ellipse,#48302925,transparent 68%)}#monochord{display:block;width:100%;max-width:1050px;margin:auto;touch-action:pan-y}#bridge{cursor:grab;touch-action:none}#bridge:active{cursor:grabbing}
.controls{padding:8px 32px 30px}.control-heading{display:block;font-size:.97rem;font-weight:650}#length-control{display:block;accent-color:var(--gold);width:100%;margin:19px 0 0;cursor:pointer}.helper{font-size:.81rem;color:var(--muted);margin:8px 0 22px}.preset-label{font-size:.75rem;color:var(--muted);letter-spacing:.13em;text-transform:uppercase;margin:0 0 10px}.presets{display:flex;gap:8px;flex-wrap:wrap}.preset{border:1px solid var(--line);background:#271f27;color:var(--text);border-radius:8px;padding:9px 14px;font-weight:700;min-width:100px}.preset span{display:block;font-size:.74rem;font-weight:400;color:var(--muted)}.preset:hover,.preset.active{border-color:var(--gold);background:#4b3429}.preset.active span{color:#f1dcbd}
.sound-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.sound-actions button{border-radius:10px;padding:13px 22px;border:1px solid var(--gold);font-weight:600}.primary{background:var(--gold);color:#181010}.primary:hover{background:var(--gold-light)}.secondary{background:transparent;color:var(--gold-light)}.secondary:hover{background:#5b402b}.audio-status{color:var(--muted);font-size:.83rem;min-height:24px;margin:15px 0 0}
.readings{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.readings article{min-width:0;border:1px solid var(--line);background:var(--surface);padding:19px 22px;border-radius:13px}.readings article p{color:var(--muted);font-size:.82rem;margin:0 0 6px}.readings strong{display:block;color:var(--gold-light);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:550;font-variant-numeric:tabular-nums;line-height:1.3}.readings span{color:var(--muted);font-size:.77rem}
.explainer{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr);gap:50px;margin:50px 0 0}.explainer .eyebrow{margin:0}.explainer h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:10px 0 16px}.explainer p{color:#d2c5c5}.equation{border-left:3px solid var(--gold);padding:13px 20px;background:#241b25;color:var(--gold-light);font-family:Georgia,serif;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:.025em;margin:22px 0}.explainer aside{border-left:1px solid var(--line);padding:10px 0 0 26px}.explainer h3{font-size:1.25rem;margin:0 0 12px}
footer{border-top:1px solid var(--line);padding:23px;text-align:center;color:var(--muted);font-size:.85rem}
@media(max-width:780px){.site-header{padding:20px 15px}.topline{padding-bottom:18px}main{padding:0 12px 46px}.panel-head{padding:20px 18px 0}.instrument-frame{padding:7px 0 0}.controls{padding:10px 18px 25px}.readings{grid-template-columns:1fr}.explainer{grid-template-columns:1fr;gap:12px;margin-top:30px}.explainer aside{border-left:0;border-top:1px solid var(--line);padding:20px 0 0}.sound-actions button{flex:1 1 210px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Catálogo de razones — cada selección conserva la fracción de longitud exacta. */
.ratio-help{color:var(--muted);font-size:.85rem;max-width:790px;line-height:1.6;margin:0 0 15px}
.ratio-help strong{color:#f1d3a1}
.ratio-groups{display:grid;gap:9px}
.ratio-group{border:1px solid #5a4649;background:#18131a;border-radius:9px;padding:0 12px}
.ratio-group summary{cursor:pointer;color:#e7d2ad;padding:10px 4px;font-weight:600;font-size:.86rem;list-style:revert}
.ratio-group summary:hover{color:#fff2d5}
.ratio-group[open] summary{border-bottom:1px solid #43343a}
.ratio-group .presets{padding:12px 0 14px;gap:8px}
.ratio-group .preset{flex:1 0 145px;max-width:228px;text-align:left;padding:8px 11px;min-width:0;font-size:.91rem;font-variant-numeric:tabular-nums}
.ratio-group .preset span{font-size:.76rem;line-height:1.35;margin-top:2px}
@media(max-width:780px){.ratio-group .preset{flex-basis:125px;max-width:none}}


/* Modelo iceberg: niveles visibles por dificultad, explicaciones desplegables. */
.iceberg-intro{max-width:820px;margin:9px 0 0;padding-left:14px;border-left:2px solid #b58a5c;
  color:#c9bdc1;font-size:.92rem;line-height:1.65}
.pedagogical-note{margin:15px 0 18px;padding:0 15px;border:1px solid #5b4b46;
  background:#1b1820;border-radius:11px;color:#d0c7c9}
.pedagogical-note summary{cursor:pointer;display:list-item;list-style:disclosure-closed;
  padding:13px 4px 13px 2px;color:#f1d9ae;font-weight:600;font-size:.9rem;line-height:1.5}
.pedagogical-note[open] summary{list-style:disclosure-open;border-bottom:1px solid #544643}
.pedagogical-note summary::marker{color:#d3a86d}
.pedagogical-note summary:focus-visible{outline:2px solid #74ceb5;outline-offset:4px}
.pedagogical-note .pedagogical-body{padding:11px 3px 15px;font-size:.89rem;line-height:1.7}
.pedagogical-note .pedagogical-body p{margin:7px 0 12px;color:#d2c5c8}
.pedagogical-note .pedagogical-body p:last-child{margin-bottom:0}
.pedagogical-note .scale-explanation{padding:10px 2px 12px}
.pedagogical-note .scale-explanation h3{font-size:1rem}
.pedagogical-note .comma-card{margin:14px 0;max-width:100%}
.pedagogical-note .harmony-equations{margin:13px 0}
.pedagogical-note .equation{max-width:100%;overflow-wrap:anywhere}
.notation-advanced{margin-top:36px;border-color:#7b5b46}
.iceberg-means{margin-top:36px}
@media(max-width:780px){
  .pedagogical-note{padding:0 11px;margin:13px 0 17px}
  .pedagogical-note summary{font-size:.87rem}
  .pedagogical-note .pedagogical-body{font-size:.86rem}
  .iceberg-intro{font-size:.88rem}
}