:root{
  --bg:#07101f;--surface:#0d182a;--surface2:#111f34;--text:#f4f0e8;--muted:#96a6bb;--line:#26364d;
  --major:#2f7dff;--minor:#a36df2;--shared:#dbe7f8;--bridge:#efbd43;--excluded:#eb565d;
  --shadow:0 30px 80px #0007
}
*{box-sizing:border-box}html{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}body{margin:0;min-height:100vh;background:radial-gradient(circle at 58% 28%,#122c4d 0,transparent 33%),linear-gradient(145deg,#091426,#050b15 72%)}button,select{font:inherit}.shell{width:min(1560px,100%);margin:auto;padding:28px clamp(18px,4vw,64px) 38px}header{display:flex;align-items:end;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);padding-bottom:22px}.eyebrow{color:#7e91aa;font-size:.72rem;letter-spacing:.22em;font-weight:750;margin:0 0 8px}h1{font:400 clamp(2.1rem,4.4vw,4.05rem)/.92 Georgia,serif;margin:0;letter-spacing:-.045em}h1 em{color:#8cb4ff;font-weight:400}.subtitle{margin:12px 0 0;color:var(--muted);font-size:.85rem}.audio-button,.boundary-button{border:1px solid var(--line);color:var(--text);background:var(--surface);border-radius:99px;padding:10px 16px;cursor:pointer;white-space:nowrap}.audio-button[aria-pressed=false]{color:var(--muted)}.workspace{display:grid;grid-template-columns:minmax(230px,285px) minmax(500px,1fr) minmax(245px,300px);gap:clamp(20px,3vw,45px);align-items:center;min-height:720px}.card{background:#0b1627d9;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}.control-block+.control-block{margin-top:24px}.control-block label,.label{display:block;font-size:.8rem;color:#c3ccda;margin-bottom:10px}select{width:100%;appearance:none;background:var(--surface2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23dce5f2' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;color:var(--text);border:1px solid #31455f;border-radius:10px;padding:13px}.hint{color:var(--muted);font-size:.82rem;line-height:1.55}.formula-box{display:flex;align-items:center;justify-content:center;gap:9px;margin:22px 0;padding:13px 8px;background:#081321;border:1px solid var(--line);border-radius:11px;font:400 1rem Georgia,serif}.formula-box span:first-child{color:#8db5ff}.formula-box span:last-child{color:#c49cff}.formula-box b{color:#657891}.listen-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.listen-grid button{border:1px solid var(--line);background:#101e31;color:white;border-radius:10px;padding:10px 8px;cursor:pointer;display:flex;align-items:center;gap:7px;text-align:left}.listen-grid button:hover,.boundary-button:hover{border-color:#58708f;background:#142740}.dot,.legend i{display:inline-block;width:8px;height:8px;border-radius:99px;background:currentColor}.major{color:var(--major)!important}.minor{color:var(--minor)!important}.field{color:var(--shared)!important}.shared{color:var(--shared)!important}.bridge{color:var(--bridge)!important}.excluded{color:var(--excluded)!important}.boundary-button{width:100%;border-radius:10px;margin-top:8px;font-size:.8rem;border-bottom:3px solid var(--excluded)}.principle{border-top:1px solid var(--line);padding-top:18px;margin:23px 0 0;color:#c7d1df;font:italic .93rem/1.5 Georgia,serif}.map-panel{min-width:0;text-align:center}.map-kicker{color:#73859d;letter-spacing:.22em;font-size:.67rem;margin:0 0 20px}.note-map{position:relative;width:min(590px,100%);aspect-ratio:1;margin:auto;border-radius:50%;background:radial-gradient(circle,#0b1729 0 25%,transparent 25.5%),radial-gradient(circle,transparent 0 67%,#10233a 67.5% 68%,transparent 68.5%),radial-gradient(circle,#0d1c31 0 78%,#07101f 78.5%);box-shadow:0 0 0 1px #354863,0 45px 90px #0008,inset 0 0 90px #1a3c6955}.note-map svg{position:absolute;inset:0;width:100%;height:100%}.orbit{fill:none;stroke:#334965;stroke-width:.35}.orbit.inner{stroke-dasharray:1.2 2;opacity:.55}.tone{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;background:#0a1627;color:white;font:600 1.02rem Georgia,serif;cursor:pointer;z-index:2;transform:var(--position);transition:filter .2s,scale .2s,opacity .2s,background .2s}.tone:hover,.tone.selected{scale:1.14;filter:drop-shadow(0 0 12px currentColor)}.tone.major-only{color:var(--major)}.tone.minor-only{color:var(--minor)}.tone.shared-note{color:var(--shared);background:#13233a}.tone.bridge-note{color:var(--bridge);background:#211b0f;box-shadow:0 0 0 6px #efbd4318}.tone.excluded-note{color:var(--excluded);background:#211116;box-shadow:0 0 0 7px #eb565d15;transform:var(--position) scale(.88)}.tone.excluded-note::after{content:none}.tone.excluded-note span{position:relative;z-index:1;text-shadow:0 1px 3px #000}.map-center{position:absolute;inset:36%;border:1px solid #30445f;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#081321;z-index:3;box-shadow:0 10px 35px #0008}.map-center small,.map-center span{font-size:.54rem;letter-spacing:.2em;color:var(--muted)}.map-center strong{font:400 clamp(2.5rem,5vw,4.2rem)/.9 Georgia,serif;color:#8eb6ff;margin:5px}.legend{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 22px;margin-top:25px;color:#c5cfdd;font-size:.74rem}.legend span{display:flex;align-items:center;gap:7px}.legend i{width:7px;height:23px}.inspector{padding:24px}.reading{padding:18px 0}.reading+.reading{border-top:1px solid var(--line)}.reading>span{font-size:.65rem;letter-spacing:.18em;color:#73869f}.reading h2,.reading h3{font:400 1.2rem/1.25 Georgia,serif;margin:9px 0 6px}.reading h2{color:#9bbdff}.reading h3{color:#f2c75e}.reading p{font-size:.78rem;line-height:1.5;color:var(--muted);margin:5px 0}.reading-line{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-top:8px}.reading-line strong{font:400 2rem Georgia,serif}.border-reading strong{color:var(--excluded)}.bridge-reading strong{color:var(--bridge)}.collection{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1.18fr}.collection article{display:grid;grid-template-columns:58px 1fr;gap:16px;padding:25px clamp(14px,2vw,28px);align-items:center}.collection article+article{border-left:1px solid var(--line)}.number{font:italic 2.35rem Georgia,serif;color:#506680}.collection p{font:400 1rem Georgia,serif;margin:0 0 10px}.note-row{display:flex;flex-wrap:wrap;gap:5px}.note-row button{min-width:31px;height:31px;border:1px solid #334861;border-radius:7px;background:#0e1c30;color:#e8edf5;cursor:pointer;font:600 .8rem Georgia,serif}.note-row button.special{border-color:var(--bridge);color:#f4ca63}.theory{border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}.theory>div{padding:30px clamp(12px,3vw,34px)}.theory>div+div{border-left:1px solid var(--line)}.theory span{color:#4f6580;font:italic 1.4rem Georgia,serif}.theory h3{font:400 1.15rem Georgia,serif;margin:10px 0}.theory p{color:var(--muted);font-size:.86rem;line-height:1.55;margin:0}.statement{text-align:center;padding:34px 18px}.statement p{max-width:780px;margin:auto;color:#d9e0ea;font:italic clamp(1.05rem,2vw,1.35rem)/1.55 Georgia,serif}footer{display:flex;justify-content:space-between;gap:30px;color:#71839a;font-size:.72rem;border-top:1px solid var(--line);padding-top:25px}footer p{margin:0}footer strong{color:#aeb9c8;font-weight:500}
@media(max-width:1120px){.workspace{grid-template-columns:250px 1fr}.inspector{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.inspector>.eyebrow{grid-column:1/-1}.reading{padding:0}.reading+.reading{border-top:0;border-left:1px solid var(--line);padding-left:22px}.collection{grid-template-columns:1fr 1fr}.collection .wide{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}}
@media(max-width:760px){.shell{padding:18px 14px 32px}header{align-items:center}h1{font-size:2.1rem}.subtitle{font-size:.72rem}.audio-button{font-size:.72rem;padding:9px 11px}.workspace{display:flex;flex-direction:column;min-height:0;padding:26px 0}.controls,.inspector{width:100%}.controls{display:grid;grid-template-columns:1fr 1fr;gap:18px}.formula-box{margin:0}.control-block+.control-block{margin:0}.principle{grid-column:1/-1}.map-panel{width:100%}.tone{width:45px;height:45px;margin:-22.5px;font-size:.85rem}.legend{gap:8px 13px}.inspector{display:block}.reading{padding:16px 0}.reading+.reading{border-left:0;border-top:1px solid var(--line);padding-left:0}.collection,.theory{grid-template-columns:1fr}.collection article+article,.collection .wide,.theory>div+div{border-left:0;border-top:1px solid var(--line)}footer{flex-direction:column}}
@media(max-width:440px){header{display:block}.audio-button{margin-top:18px}.controls{display:block}.formula-box{margin:20px 0}.control-block+.control-block{margin-top:22px}.principle{margin-top:22px}.tone{width:40px;height:40px;margin:-20px}.map-center{inset:34%}.collection article{grid-template-columns:45px 1fr}.number{font-size:1.8rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Tres formas de la subdominante menor dentro del Campo 11 */
.collection{grid-template-columns:1fr 1.55fr 1.18fr}
.minor-family{align-items:start}
.minor-forms{display:grid;gap:14px}
.minor-form{padding-bottom:12px;border-bottom:1px solid var(--line)}
.minor-form:last-child{padding-bottom:0;border-bottom:0}
.minor-form p{margin:0 0 3px}
.minor-form small{display:block;margin-bottom:8px;color:#60758f;font-size:.54rem;font-weight:750;letter-spacing:.14em}
.minor-form.generator small{color:#9a80c7}
@media(max-width:1120px){.collection{grid-template-columns:1fr 1fr}.collection .minor-family{border-left:1px solid var(--line)}.collection .wide{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}}
@media(max-width:760px){.collection{grid-template-columns:1fr}.collection .minor-family{border-left:0;border-top:1px solid var(--line)}}

/* Composer · Campo 11 */
.composer{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0 38px;margin-top:0}.composer-head{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:20px}.composer-head h2{font:400 clamp(1.9rem,3.4vw,3.1rem)/1 Georgia,serif;margin:0;letter-spacing:-.035em}.composer-head h2 em{color:#8cb4ff;font-weight:400}.composer-subtitle{color:var(--muted);font-size:.86rem;line-height:1.55;max-width:760px;margin:10px 0 0}.field-status{min-width:245px;text-align:right;padding:14px 17px;border:1px solid var(--line);border-radius:14px;background:#0b1627}.field-status small{display:block;color:#7187a2;font-size:.6rem;letter-spacing:.18em}.field-status strong{display:block;color:#dce9fb;font:400 1.08rem Georgia,serif;margin:5px 0 3px}.field-status span{display:block;color:var(--excluded);font-size:.72rem}.composer-panel,.composer-route{background:#0b1627d9;border:1px solid var(--line);border-radius:18px;padding:22px;margin-top:14px;box-shadow:0 18px 45px #0004}.composer-toolbar{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:16px}.composer-label{display:block;color:#7fa6d8;font-size:.68rem;letter-spacing:.2em;font-weight:800}.composer-toolbar p{color:var(--muted);font-size:.78rem;margin:5px 0 0}.particular-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}.particular-toggle input{position:absolute;opacity:0;pointer-events:none}.particular-toggle>span:last-child{display:grid;gap:2px;font-size:.72rem;color:#c6d1df}.particular-toggle small{color:var(--excluded)}.toggle-track{width:48px;height:27px;border-radius:99px;background:#111d2d;border:1px solid #3a4e68;padding:3px;transition:.2s}.toggle-track i{display:block;width:19px;height:19px;border-radius:50%;background:#70839a;transition:.2s}.particular-toggle input:checked+.toggle-track{border-color:var(--excluded);background:#25131a}.particular-toggle input:checked+.toggle-track i{transform:translateX(20px);background:var(--excluded);box-shadow:0 0 13px #eb565d88}.composer-tonics{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px}.composer-tonic{aspect-ratio:1;border-radius:50%;border:1px solid #3b5878;background:#0a1728;color:#eef4fb;font:600 1rem Georgia,serif;cursor:pointer;min-width:0}.composer-tonic.active{background:var(--bridge);border-color:#f9d676;color:#111927;box-shadow:0 0 18px #efbd4344}.composer-modes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}.composer-mode{min-height:46px;border:1px solid #35506d;border-radius:10px;background:#0b1a2d;color:#dce7f5;padding:9px 8px;cursor:pointer;font-size:.78rem;font-weight:750;position:relative}.composer-mode.active{border-color:var(--mode-color);color:var(--mode-color);box-shadow:inset 0 -2px 0 var(--mode-color)}.composer-mode.particular::after,.composer-chip.particular::after{content:'◆';color:var(--excluded);font-size:.55rem;margin-left:6px;vertical-align:2px}.composer-mode.locked,.composer-chip.locked{opacity:.38;cursor:not-allowed}.composer-more{width:100%;margin-top:12px;border:1px solid #4f6f95;border-radius:16px;background:linear-gradient(180deg,#11253e,#0b1b2f);color:#e8f1ff;padding:16px 18px;cursor:pointer;font-size:1.05rem;font-weight:800;letter-spacing:.01em;box-shadow:inset 0 0 0 1px #223b56,0 10px 26px #00000020;transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}.composer-more:hover{border-color:#7b9ec7;color:#ffffff;background:linear-gradient(180deg,#142b48,#0d1f35);box-shadow:inset 0 0 0 1px #2f5278,0 12px 28px #00000028}.composer-more:focus-visible{outline:none;border-color:#9cc0ea;box-shadow:0 0 0 3px #9cc0ea22,inset 0 0 0 1px #35597f,0 12px 28px #00000028}.composer-more[aria-expanded='true']{border-color:#8c6b2f;color:#f1cb64;background:linear-gradient(180deg,#162436,#101b2a);box-shadow:inset 0 0 0 1px #6d5526,0 0 0 1px #2f4058,0 12px 28px #00000028}.composer-advanced{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.composer-advanced.open{display:block}.composer-families{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.composer-family{border:1px solid #324b67;border-radius:10px;background:#0a1829;color:#dce7f3;text-align:left;padding:11px;cursor:pointer}.composer-family.active{border-color:var(--bridge);background:#171b24}.composer-family b{display:block;color:#f0c45a;font-size:.77rem}.composer-family small{display:block;color:#7f95ad;font-size:.63rem;margin-top:3px}.composer-family-modes{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}.composer-chip{border:1px solid #344f6c;border-radius:99px;background:#0a192b;color:#d8e5f4;padding:7px 11px;cursor:pointer;font-size:.72rem}.composer-chip.active{border-color:var(--bridge);color:var(--bridge);background:#191c24}.composer-preview{display:grid;grid-template-columns:minmax(170px,.9fr) minmax(300px,1.5fr) auto;gap:14px 22px;align-items:center;margin-top:16px;padding:17px;border:1px solid #314b67;border-radius:14px;background:#081421}.preview-copy small{color:#7189a5;font-size:.59rem;letter-spacing:.18em}.preview-copy h3{font:400 1.2rem Georgia,serif;margin:5px 0 0}.composer-scale-notes{display:flex;flex-wrap:wrap;gap:6px}.composer-scale-notes span{min-width:36px;text-align:center;border:1px solid #344d69;border-radius:8px;background:#0d1b2e;padding:7px 8px;font:600 .78rem Georgia,serif}.composer-scale-notes span.tonic{border-color:var(--bridge);color:var(--bridge)}.composer-scale-notes span.particular{border-color:var(--excluded);color:#ff8a90;background:#211117}.composer-preview-meta{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:#7f94ac;font-size:.68rem}.composer-preview-meta strong{border:1px solid #48617d;border-radius:99px;padding:5px 8px;font-size:.62rem;letter-spacing:.06em}.composer-preview-meta strong.inside{color:#a9d5c6;border-color:#467c6a}.composer-preview-meta strong.expansion{color:#ff9196;border-color:#8d4047;background:#251319}.composer-add{grid-column:3;grid-row:1/span 2;border:0;border-radius:10px;background:linear-gradient(180deg,#f4ce70,#dfad3d);color:#0b1420;padding:13px 18px;font-weight:850;cursor:pointer;min-width:170px}.composer-add:disabled{opacity:.42;cursor:not-allowed}.composer-edit-status{display:none;margin-top:8px;align-items:center;gap:8px;color:var(--bridge);font-size:.62rem;text-transform:uppercase;letter-spacing:.12em}.composer-edit-status.show{display:flex}.composer-edit-status button{border:1px solid #7f6330;border-radius:99px;background:transparent;color:var(--bridge);font-size:.58rem;padding:5px 8px;cursor:pointer}.route-head{display:flex;justify-content:space-between;gap:18px;align-items:end}.route-head h3{font:400 1.25rem Georgia,serif;margin:5px 0 0}.route-head>span{color:#8297ae;font-size:.75rem}.composer-journey{display:flex;flex-wrap:wrap;gap:22px 26px;min-height:104px;padding:22px 4px 4px}.composer-step{position:relative;flex:0 0 calc((100% - 130px)/6);min-width:0}.composer-step:not(.last):not(.row-end)::after{content:'';position:absolute;top:46px;left:calc(100% + 7px);width:14px;height:1px;background:linear-gradient(90deg,var(--a),var(--b))}.composer-node{text-align:center;cursor:pointer}.composer-node .step-num{color:#6f88a3;font-size:.65rem;margin-bottom:6px}.composer-node .step-circle{width:66px;height:66px;border:2px solid var(--c);border-radius:50%;display:grid;place-items:center;margin:auto;background:#091625;font:600 1.35rem Georgia,serif;box-shadow:0 0 17px color-mix(in srgb,var(--c) 25%,transparent)}.composer-node .step-mode{color:var(--c);font-size:.66rem;font-weight:850;text-transform:uppercase;letter-spacing:.09em;margin-top:8px}.composer-node .step-family{color:#748ba4;font-size:.58rem;margin-top:3px}.composer-step.particular-step .step-circle{box-shadow:0 0 0 3px #eb565d22,0 0 16px #eb565d44}.composer-step.particular-step .step-num::after{content:' ◆';color:var(--excluded)}.composer-step.editing .step-circle{outline:3px solid #efbd4333}.composer-empty{width:100%;text-align:center;color:#6f849d;padding:24px}.composer-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}.composer-actions button{border:1px solid #36516e;border-radius:10px;background:#0a1728;color:#d9e5f3;padding:12px;cursor:pointer}.composer-actions .export{border-color:#8b6a2d;color:#efc75e}.composer-principle{margin:16px auto 0;max-width:930px;color:#8fa2b8;text-align:center;font:italic .86rem/1.55 Georgia,serif}.composer-principle strong{color:#f0c45a;font-weight:400}
@media(max-width:1120px){.composer-families{grid-template-columns:repeat(3,1fr)}.composer-modes{grid-template-columns:repeat(4,1fr)}.composer-step{flex-basis:calc((100% - 78px)/4)}}
@media(max-width:760px){.composer-head,.composer-toolbar{display:block}.field-status{text-align:left;margin-top:16px}.particular-toggle{margin-top:15px}.composer-tonics{grid-template-columns:repeat(6,minmax(0,1fr))}.composer-families{grid-template-columns:repeat(2,1fr)}.composer-preview{grid-template-columns:1fr}.composer-preview-meta,.composer-add{grid-column:1;grid-row:auto}.composer-add{width:100%}.composer-actions{grid-template-columns:repeat(2,1fr)}.composer-step{flex-basis:calc((100% - 26px)/2)}.composer-step::after{display:none}}
@media(max-width:440px){.composer-tonics{grid-template-columns:repeat(4,minmax(0,1fr))}.composer-modes,.composer-families{grid-template-columns:repeat(2,1fr)}.composer-panel,.composer-route{padding:16px 13px}.composer-actions{grid-template-columns:1fr}}

/* Nota particular · énfasis visual en Composer */
.field-status{
  position:relative;
  overflow:hidden;
  border-color:#6f3640;
  background:linear-gradient(145deg,#0b1627 0%,#15131d 100%);
  box-shadow:inset 3px 0 0 var(--excluded),0 10px 30px #0003;
}
.field-status::after{
  content:'NOTA PARTICULAR';
  display:block;
  margin-top:7px;
  color:#ff9398;
  font-size:.52rem;
  letter-spacing:.18em;
  font-weight:850;
}
.field-status span{
  color:#ff7f86;
  font-weight:750;
  text-shadow:0 0 14px #eb565d55;
}
.particular-toggle{
  padding:9px 12px;
  border:1px solid #61333d;
  border-radius:12px;
  background:#160f17;
}
.particular-toggle b{color:#f2dfe2}
.particular-toggle small{font-weight:800;text-shadow:0 0 10px #eb565d55}
.composer-tonics{padding-bottom:16px}
.composer-tonic{position:relative;overflow:visible}
.composer-tonic.note-particular{
  border:2px solid var(--excluded);
  color:#ff9da1;
  background:radial-gradient(circle at 50% 42%,#2a151b 0,#17111a 70%);
  box-shadow:0 0 0 5px #eb565d13,0 0 24px #eb565d38,inset 0 0 20px #eb565d16;
}
.composer-tonic.note-particular::after{
  content:'PARTICULAR';
  position:absolute;
  left:50%;
  bottom:-17px;
  transform:translateX(-50%);
  color:#ff848b;
  font:800 .43rem/1 Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.11em;
  white-space:nowrap;
}
.composer-tonic.note-particular .particular-mark{
  position:absolute;
  top:-5px;
  right:-3px;
  width:18px;
  height:18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--excluded);
  color:#fff;
  border:2px solid #0b1627;
  font:700 .47rem/1 sans-serif;
  box-shadow:0 0 13px #eb565d99;
}
.composer-tonic.note-particular:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 6px #eb565d16,0 0 30px #eb565d66,inset 0 0 20px #eb565d22;
}
.composer-tonic.note-particular.active{
  background:var(--excluded);
  border-color:#ffb2b6;
  color:#fff;
  box-shadow:0 0 0 6px #eb565d24,0 0 34px #eb565d88;
}
.composer-tonic.note-particular.active::after{color:#ff9da2}
@media(max-width:760px){
  .particular-toggle{width:max-content;max-width:100%}
  .composer-tonics{padding-bottom:18px}
}

.composer-expansion-section{margin-top:16px;padding-top:14px;border-top:1px solid #263c55}
.composer-expansion-title{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:9px}
.composer-expansion-title span{color:#7fa6d8;font-size:.62rem;letter-spacing:.18em;font-weight:800}
.composer-expansion-title p{margin:0;color:#738ba5;font-size:.66rem;text-align:right}
.composer-expansions{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.composer-family.expansion-card{border-style:dashed}
@media(max-width:1120px){.composer-expansions{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.composer-expansion-title{display:block}.composer-expansion-title p{text-align:left;margin-top:5px}.composer-expansions{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.composer-expansions{grid-template-columns:1fr}}


/* ===== COMPOSER · PARALELOS / ROTACIONES RECENTRADAS ===== */
.composer-view-switch{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 8px}
.composer-view-button{min-height:42px;border:1px solid #35506d;border-radius:10px;background:#091625;color:#9fb4cc;padding:9px 12px;cursor:pointer;font-size:.72rem;font-weight:800;letter-spacing:.02em}
.composer-view-button.active{border-color:var(--bridge);color:var(--bridge);background:#171b24;box-shadow:inset 0 -2px 0 var(--bridge)}
.composer-view-help{margin:0 0 12px;color:#7189a5;font-size:.68rem;line-height:1.5}
.composer-relative{margin:2px 0 0;padding:14px;border:1px solid #2d4865;border-radius:12px;background:#081421}
.composer-relative-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:11px}
.composer-relative-head strong{color:#f0c45a;font:400 1rem Georgia,serif}
.composer-relative-head span{color:#7189a5;font-size:.64rem;text-align:right}
.composer-relative-modes{display:flex;flex-wrap:wrap;gap:8px}
.composer-relative-chip{border:1px solid #344f6c;border-radius:10px;background:#0a192b;color:#d8e5f4;padding:8px 11px;cursor:pointer;font-size:.7rem;text-align:left}
.composer-relative-chip strong{color:#f0c45a;font:600 .8rem Georgia,serif;margin-right:4px}
.composer-relative-chip.active{border-color:var(--bridge);background:#191c24;box-shadow:inset 0 -2px 0 var(--bridge)}
.composer-relative-chip.particular::after{content:'◆';color:var(--excluded);font-size:.52rem;margin-left:6px;vertical-align:2px}

/* Estados accesibles añadidos sin alterar el diseño del Composer. */
.composer-family.locked{opacity:.42;cursor:not-allowed}
.particular-toggle:focus-within{outline:2px solid #8cb4ff;outline-offset:4px;border-radius:8px}
button:focus-visible,select:focus-visible{outline:2px solid #8cb4ff;outline-offset:3px}
.composer-relative-empty{color:#8096af;font-size:.72rem;line-height:1.55;padding:3px 1px}
@media(max-width:760px){.composer-view-switch{grid-template-columns:1fr}.composer-relative-head{display:block}.composer-relative-head span{display:block;text-align:left;margin-top:4px}}

/* ESPECTRO MODAL · Partitura de colores */
.composer-route .route-head{padding-bottom:14px;border-bottom:1px solid rgba(90,124,160,.28)}
.composer-route .route-head h3{margin-top:7px}
.composer-edit-status .delete-edit{border-color:#7d3d48;color:#ff7f89}
.composer-journey{position:relative}
.composer-step{padding-bottom:6px}
.composer-node{position:relative;z-index:1}
.composer-node::before{
  content:'';position:absolute;z-index:-1;left:-13px;right:-13px;top:40px;height:42px;pointer-events:none;
  background:
    linear-gradient(rgba(129,160,193,.22),rgba(129,160,193,.22)) 0 0/100% 1px no-repeat,
    linear-gradient(rgba(129,160,193,.22),rgba(129,160,193,.22)) 0 10px/100% 1px no-repeat,
    linear-gradient(rgba(129,160,193,.22),rgba(129,160,193,.22)) 0 20px/100% 1px no-repeat,
    linear-gradient(rgba(129,160,193,.22),rgba(129,160,193,.22)) 0 30px/100% 1px no-repeat,
    linear-gradient(rgba(129,160,193,.22),rgba(129,160,193,.22)) 0 41px/100% 1px no-repeat;
}
.composer-step::before{content:'';position:absolute;z-index:0;top:40px;right:-13px;width:1px;height:42px;background:rgba(129,160,193,.32);pointer-events:none}
.composer-step:not(.last):not(.row-end)::after{display:none}
@media(max-width:900px){.composer-node::before{left:-9px;right:-9px}.composer-step::before{right:-9px}}

/* Notas de cada escala dentro de la Partitura de colores */
.composer-node .step-notes{color:#8fa2b8;font-size:.55rem;line-height:1.35;margin-top:6px;white-space:normal;overflow-wrap:anywhere}