/* =========================================================
   PAGE 03 — INTERVALS & FRACTIONS
   ========================================================= */

.interval-tool{
  padding:18px;
  border:1px solid var(--tl-line,#596163);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0)),
    var(--tl-panel-2,#383e40);
  color:var(--tl-cream,#eadfc8);
}

.interval-toolbar{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:end;
  margin-bottom:14px;
}

.tonic-control{
  display:grid;
  gap:6px;
}

.tonic-control>span{
  color:var(--tl-muted,#aea491);
  font-size:.72rem;
  font-weight:700;
}

.tonic-control select{
  min-width:150px;
  min-height:42px;
  padding:8px 11px;
  border:1px solid var(--tl-line,#596163);
  border-radius:8px;
  background:var(--tl-panel,#303638);
  color:var(--tl-cream,#eadfc8);
  color-scheme:dark;
  outline:none;
  font-size:.95rem;
  font-weight:750;
}

.tonic-control select:focus{
  border-color:var(--tl-copper,#a56f50);
}

.interval-now{
  display:flex;
  gap:11px;
  align-items:center;
  text-align:right;
}

.interval-now>span{
  color:var(--tl-copper-2,#bf8060);
  font-size:2.2rem;
  line-height:1;
  font-weight:900;
}

.interval-now>div{
  display:grid;
  gap:3px;
}

.interval-now strong{
  color:var(--tl-cream,#eadfc8);
  font-size:1.15rem;
  font-weight:900;
}

.interval-now small{
  color:var(--tl-cream-2,#d5c8af);
  font-size:.72rem;
}

/* ---------- piano ---------- */

.interval-piano-panel{
  padding:14px;
  border:1px solid var(--tl-line,#596163);
  border-radius:11px;
  background:var(--tl-panel,#303638);
}

.panel-headline{
  display:grid;
  gap:3px;
  margin-bottom:10px;
}

.panel-headline span{
  color:var(--tl-muted,#aea491);
  font-size:.68rem;
}

.panel-headline strong{
  color:var(--tl-cream,#eadfc8);
  font-size:.98rem;
  font-weight:850;
}

.interval-piano{
  position:relative;
  height:205px;
  overflow:hidden;
  border:1px solid #777066;
  border-radius:7px 7px 4px 4px;
  background:#2d3132;
  user-select:none;
}

.white-keys{
  position:absolute;
  inset:0;
  display:flex;
  z-index:1;
}

.piano-key.white{
  position:relative;
  flex:1 1 0;
  height:100%;
  padding:0;
  border:0;
  border-right:1px solid #85817a;
  background:
    linear-gradient(
      90deg,
      #d9d2c3 0%,
      #ede7da 16%,
      #f3ede3 70%,
      #d0c8b8 100%
    );
  color:#17191a;
  cursor:pointer;
}

.piano-key.white:last-child{
  border-right:0;
}

.piano-key.black{
  position:absolute;
  top:0;
  width:4.5%;
  height:62%;
  padding:0;
  border:1px solid #090b0b;
  border-top:0;
  border-radius:0 0 4px 4px;
  transform:translateX(-50%);
  background:
    linear-gradient(
      90deg,
      #080a0a 0%,
      #222727 27%,
      #383e3e 51%,
      #1d2222 76%,
      #080909 100%
    );
  color:#f0e9dd;
  box-shadow:0 6px 8px rgba(0,0,0,.42);
  z-index:3;
  cursor:pointer;
}

.piano-key .note-label{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  font-size:.72rem;
  font-weight:900;
  white-space:nowrap;
}

.piano-key.black .note-label{
  bottom:9px;
  font-size:.61rem;
}

.piano-key.outside-range{
  opacity:.34;
  filter:saturate(.4);
  cursor:default;
}

.piano-key.tonic-key::after{
  content:attr(data-tonic-label);
  position:absolute;
  left:50%;
  bottom:31px;
  transform:translateX(-50%);
  padding:2px 6px;
  border:1px solid #554238;
  border-radius:3px;
  background:#6d5548;
  color:#f0e5d2;
  font-size:.49rem;
  font-weight:900;
  letter-spacing:.05em;
  white-space:nowrap;
}

.piano-key.black.tonic-key::after{
  bottom:29px;
}

.piano-key.selected-key{
  box-shadow:inset 0 -7px 0 var(--tl-copper-2,#bf8060);
}

.piano-key.black.selected-key{
  box-shadow:
    inset 0 -6px 0 var(--tl-copper-2,#bf8060),
    0 6px 8px rgba(0,0,0,.42);
}

/* ---------- bracket ---------- */

.interval-bracket-zone{
  position:relative;
  height:62px;
  margin-top:2px;
}

.interval-bracket{
  position:absolute;
  top:9px;
  height:23px;
}

.interval-bracket .line{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--tl-copper-2,#bf8060);
}

.interval-bracket .cap{
  position:absolute;
  bottom:0;
  width:2px;
  height:11px;
  background:var(--tl-copper-2,#bf8060);
}

.interval-bracket .cap.left{left:0}
.interval-bracket .cap.right{right:0}

.interval-bracket .label{
  position:absolute;
  left:50%;
  bottom:14px;
  min-width:175px;
  transform:translateX(-50%);
  display:grid;
  gap:1px;
  padding:4px 8px;
  border:1px solid var(--tl-line,#596163);
  border-radius:5px;
  background:var(--tl-panel,#303638);
  text-align:center;
  white-space:nowrap;
}

.interval-bracket .label strong{
  color:var(--tl-cream,#eadfc8);
  font-size:.78rem;
}

.interval-bracket .label small{
  color:var(--tl-cream-2,#d5c8af);
  font-size:.66rem;
}

/* ---------- fractions ---------- */

.fraction-chain{
  display:grid;
  grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr;
  gap:7px;
  align-items:stretch;
  margin-top:12px;
}

.fraction-card{
  display:grid;
  align-content:center;
  min-width:0;
  min-height:126px;
  padding:14px;
  border:1px solid var(--tl-line,#596163);
  border-radius:10px;
  background:var(--tl-panel,#303638);
}

.fraction-card>span{
  margin-bottom:8px;
  color:var(--tl-muted,#aea491);
  font-size:.68rem;
  font-weight:700;
}

.fraction-card>strong{
  color:var(--tl-cream,#eadfc8);
  font-size:1.18rem;
  line-height:1.2;
}

.fraction-card>small{
  margin-top:8px;
  color:var(--tl-cream-2,#d5c8af);
  font-size:.70rem;
}

.length-card,
.frequency-card{
  border-bottom:2px solid rgba(165,111,80,.46);
}

.musical-card{
  border-color:rgba(165,111,80,.72);
}

.musical-card>strong{
  color:var(--tl-copper-2,#bf8060);
  font-size:1.35rem;
}

.chain-arrow{
  display:grid;
  place-items:center;
  color:var(--tl-copper-2,#bf8060);
  font-size:1.35rem;
  font-weight:900;
}

/* ---------- results ---------- */

.interval-results{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}

.interval-results article{
  min-width:0;
  padding:14px;
  border:1px solid var(--tl-line,#596163);
  border-radius:9px;
  background:var(--tl-panel,#303638);
}

.interval-results span{
  display:block;
  margin-bottom:6px;
  color:var(--tl-muted,#aea491);
  font-size:.68rem;
  font-weight:700;
}

.interval-results strong{
  display:block;
  color:var(--tl-cream,#eadfc8);
  font-size:1.12rem;
  font-weight:850;
}

.interval-results .delta-card{
  border-bottom:2px solid rgba(165,111,80,.54);
}

.interval-results .delta-card strong{
  color:var(--tl-copper-2,#bf8060);
}

/* ---------- details ---------- */

.fraction-info{
  margin-top:12px;
  overflow:hidden;
  border:1px solid var(--tl-line,#596163);
  border-radius:9px;
  background:var(--tl-panel,#303638);
}

.fraction-info summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  list-style:none;
  cursor:pointer;
}

.fraction-info summary::-webkit-details-marker{
  display:none;
}

.fraction-info summary>span{
  color:var(--tl-cream,#eadfc8);
  font-size:.80rem;
  font-weight:800;
}

.fraction-info summary>small{
  margin-left:auto;
  color:var(--tl-muted,#aea491);
  font-size:.64rem;
}

.fraction-info summary::after{
  content:"+";
  color:var(--tl-copper-2,#bf8060);
  font-size:1.1rem;
  font-weight:900;
}

.fraction-info[open] summary::after{
  content:"−";
}

.fraction-info-body{
  padding:0 14px 14px;
  border-top:1px solid rgba(255,255,255,.055);
}

.fraction-info-body p{
  margin:12px 0 0;
  color:var(--tl-cream-2,#d5c8af);
  font-size:.78rem;
  line-height:1.55;
}

.details-example{
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:12px;
  padding:10px 12px;
  border-left:3px solid var(--tl-copper,#a56f50);
  background:rgba(165,111,80,.08);
}

.details-example strong{
  color:var(--tl-cream,#eadfc8);
  font-size:1.05rem;
}

.details-example span{
  color:var(--tl-copper-2,#bf8060);
  font-size:.82rem;
  font-weight:850;
}

/* ---------- responsive ---------- */

@media(max-width:1050px){
  .fraction-chain{
    grid-template-columns:1fr 28px 1fr;
  }

  .fraction-chain .chain-arrow:nth-of-type(3){
    display:none;
  }
}

@media(max-width:850px){
  .interval-results{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .interval-piano{
    height:175px;
  }
}

@media(max-width:650px){
  .interval-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .interval-now{
    text-align:left;
  }

  .fraction-chain{
    grid-template-columns:1fr;
  }

  .chain-arrow{
    min-height:20px;
    transform:rotate(90deg);
  }
}

@media(max-width:520px){
  .interval-tool{
    padding:11px;
  }

  .interval-results{
    grid-template-columns:1fr;
  }

  .interval-piano{
    height:155px;
  }

  .piano-key.black .note-label{
    display:none;
  }
}


/* =========================================================
   PAGE 01 — Natural / 12-TET comparison rulers
   ========================================================= */

.interval-rulers{
  margin-bottom:12px;
  padding:13px 14px 11px;
  border:1px solid var(--tl-line,#596163);
  border-radius:10px;
  background:var(--tl-panel,#303638);
}

.ruler-row{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:11px;
  align-items:center;
}

.ruler-row + .ruler-row{
  margin-top:10px;
}

.ruler-label{
  display:grid;
  gap:2px;
}

.ruler-label strong{
  font-size:.70rem;
  font-weight:900;
  letter-spacing:.06em;
}

.ruler-label small{
  color:var(--tl-muted,#aea491);
  font-size:.61rem;
}

.tet-label strong{
  color:#c2c8c6;
}

.natural-label strong{
  color:var(--tl-copper-2,#bf8060);
}

.pitch-ruler{
  position:relative;
  height:38px;
  overflow:hidden;
  border:1px solid #626969;
  border-radius:6px;
  background:#252a2b;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.28);
}

.pitch-ruler::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.tet-ruler::before{
  background:linear-gradient(
    180deg,
    rgba(194,200,198,.10),
    rgba(194,200,198,.025)
  );
}

.natural-ruler::before{
  background:linear-gradient(
    180deg,
    rgba(191,128,96,.11),
    rgba(191,128,96,.025)
  );
}

.ruler-marker{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  transform:translateX(-1px);
  z-index:2;
}

.tet-ruler .ruler-marker{
  background:#b9c0be;
}

.natural-ruler .ruler-marker{
  background:var(--tl-copper-2,#bf8060);
}

.ruler-marker.is-selected{
  width:5px;
  transform:translateX(-2.5px);
  background:#fff8e9;
  box-shadow:0 0 10px rgba(255,248,233,.58);
  z-index:4;
}

.ruler-axis{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  margin:7px 0 0 103px;
  color:#aaa18f;
  font-size:.58rem;
}

.ruler-axis span{
  text-align:center;
}

.ruler-axis span:first-child{
  text-align:left;
}

.ruler-axis span:last-child{
  text-align:right;
}

@media(max-width:650px){
  .ruler-row{
    grid-template-columns:72px 1fr;
  }

  .ruler-axis{
    margin-left:83px;
  }
}


/* =========================================================
   Bottom guide — how to read the module
   ========================================================= */

.module-guide{
  margin-top:12px;
  overflow:hidden;
  border:1px solid var(--tl-line,#596163);
  border-radius:9px;
  background:var(--tl-panel,#303638);
}

.module-guide summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  list-style:none;
  cursor:pointer;
}

.module-guide summary::-webkit-details-marker{
  display:none;
}

.module-guide summary>span{
  color:var(--tl-cream,#eadfc8);
  font-size:.81rem;
  font-weight:850;
}

.module-guide summary>small{
  margin-left:auto;
  color:var(--tl-muted,#aea491);
  font-size:.64rem;
}

.module-guide summary::after{
  content:"+";
  color:var(--tl-copper-2,#bf8060);
  font-size:1.1rem;
  font-weight:900;
}

.module-guide[open] summary::after{
  content:"−";
}

.module-guide-body{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.055);
}

.module-guide-body section{
  padding:11px 12px;
  border:1px solid rgba(231,217,186,.10);
  border-radius:8px;
  background:rgba(255,255,255,.014);
}

.module-guide-body section strong{
  display:block;
  margin-bottom:6px;
  color:var(--tl-cream,#eadfc8);
  font-size:.75rem;
  font-weight:850;
}

.module-guide-body section p{
  margin:0;
  color:var(--tl-cream-2,#d5c8af);
  font-size:.72rem;
  line-height:1.52;
}

.guide-formula{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 12px;
  border-left:3px solid var(--tl-copper,#a56f50);
  background:rgba(165,111,80,.08);
}

.guide-formula>span,
.guide-formula>small{
  color:var(--tl-cream-2,#d5c8af);
  font-size:.70rem;
}

.guide-formula>strong{
  color:var(--tl-cream,#eadfc8);
  font-size:1rem;
}

@media(max-width:850px){
  .module-guide-body{
    grid-template-columns:1fr;
  }

  .guide-formula{
    grid-column:auto;
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }
}


/* =========================================================
   Hz values — absolute frequencies for A4 = 440 Hz
   ========================================================= */

.tonic-frequency{
  display:block;
  margin-top:2px;
  color:var(--tl-muted,#aea491);
  font-size:.64rem;
  white-space:nowrap;
}

.interval-results .hz-value{
  display:block;
  margin-top:5px;
  color:var(--tl-cream-2,#d5c8af);
  font-size:.72rem;
  font-weight:700;
}

.interval-results .delta-hz{
  color:var(--tl-copper-2,#bf8060);
}

.interval-results article:nth-child(2),
.interval-results article:nth-child(3){
  position:relative;
}

.interval-results article:nth-child(2)::after,
.interval-results article:nth-child(3)::after{
  content:"Hz";
  position:absolute;
  right:10px;
  bottom:9px;
  color:rgba(213,200,175,.28);
  font-size:.58rem;
  font-weight:800;
}


/* =========================================================
   Symmetric comparison: Natural vs 12-TET
   length and frequency shown side by side
   ========================================================= */

.comparison-results{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}

.comparison-results .system-card{
  position:relative;
}

.comparison-results .natural-system{
  border-top:2px solid rgba(191,128,96,.58);
}

.comparison-results .tet-system{
  border-top:2px solid rgba(185,192,190,.50);
}

.comparison-results .system-card small{
  display:block;
  margin-top:5px;
  color:var(--tl-cream-2,#d5c8af);
  font-size:.70rem;
}

.compare-delta{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:16px;
}

.compare-delta span{
  margin:0;
}

.compare-delta strong,
.compare-delta small{
  margin:0 !important;
}

@media(max-width:900px){
  .comparison-results{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:520px){
  .comparison-results{
    grid-template-columns:1fr !important;
  }

  .compare-delta{
    grid-template-columns:1fr;
    gap:5px;
  }
}


/* render fix */
.fraction-card strong mjx-container{
  margin:0 !important;
}

.comparison-results strong,
.comparison-results small{
  min-height:1.1em;
}


/* hotfix: frequency multiplier lives inside frequency-ratio card */
.ratio-multiplier{
  display:block;
  margin-top:7px;
  color:var(--tl-copper-2,#bf8060);
  font-size:.76rem;
  font-style:normal;
  font-weight:850;
}


/* =========================================================
   Physical comparison: fretboard + active vibrating length
   ========================================================= */

.physical-compare{
  margin-bottom:12px;
  padding:14px;
  border:1px solid var(--tl-line,#596163);
  border-radius:11px;
  background:var(--tl-panel,#303638);
}

.physical-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:end;
  margin-bottom:11px;
}

.physical-head>div{
  display:grid;
  gap:3px;
}

.physical-head span,
.physical-head small{
  color:var(--tl-muted,#aea491);
  font-size:.67rem;
}

.physical-head strong{
  color:var(--tl-cream,#eadfc8);
  font-size:.98rem;
  font-weight:850;
}

.physics-board{
  position:relative;
  height:196px;
  overflow:hidden;
  border:1px solid #67594f;
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.026),rgba(0,0,0,.04)),
    linear-gradient(90deg,#5c453b,#75594a 48%,#584239);
  box-shadow:inset 0 0 24px rgba(0,0,0,.16);
}

.physics-nut,
.physics-bridge{
  position:absolute;
  top:0;
  bottom:0;
  z-index:8;
}

.physics-nut{
  left:0;
  width:7px;
  background:linear-gradient(90deg,#eee7d9,#bdb3a2);
}

.physics-bridge{
  right:0;
  width:9px;
  background:linear-gradient(90deg,#747b79,#c0c6c2);
}

.physics-nut span,
.physics-bridge span{
  position:absolute;
  top:7px;
  color:#e6dbc6;
  font-size:.52rem;
  white-space:nowrap;
}

.physics-nut span{
  left:12px;
}

.physics-bridge span{
  right:13px;
}

.physics-fret{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  transform:translateX(-1px);
  background:linear-gradient(90deg,#77807e,#ced3d0,#737b79);
  opacity:.72;
  z-index:2;
}

.physics-fret b{
  position:absolute;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  color:#e5dac6;
  font-size:.54rem;
}

.physics-fret.is-selected{
  width:4px;
  transform:translateX(-2px);
  opacity:1;
  background:#d8deda;
  box-shadow:0 0 7px rgba(216,222,218,.28);
}

.physics-track{
  position:absolute;
  left:0;
  right:0;
  height:52px;
  z-index:5;
}

.natural-track{top:50px}
.tet-track{top:116px}

.track-name{
  position:absolute;
  left:13px;
  top:2px;
  width:58px;
  color:var(--tl-cream-2,#d5c8af);
  font-size:.61rem;
  font-weight:900;
  z-index:7;
}

.track-string{
  position:absolute;
  top:28px;
  height:4px;
}

.track-string.inactive{
  left:0;
  background:#6f6d67;
  opacity:.45;
}

.track-string.active{
  right:0;
  box-shadow:0 0 6px rgba(237,224,197,.26);
}

.natural-active{
  background:linear-gradient(180deg,#dba27f,#a56f50);
}

.tet-active{
  background:linear-gradient(180deg,#e7e2d7,#abb3b1);
}

.contact-marker{
  position:absolute;
  top:11px;
  bottom:2px;
  width:4px;
  transform:translateX(-2px);
  border-radius:3px;
  z-index:8;
}

.natural-contact{
  background:var(--tl-copper-2,#bf8060);
}

.tet-contact{
  background:#d5dcda;
}

.contact-marker b{
  position:absolute;
  top:-1px;
  left:50%;
  transform:translate(-50%,-100%);
  padding:2px 4px;
  border-radius:3px;
  background:#272c2d;
  color:#f1e7d5;
  font-size:.50rem;
}

.track-value{
  position:absolute;
  right:15px;
  top:0;
  color:#e4d8c2;
  font-size:.62rem;
  font-weight:800;
}

.physical-numbers{
  display:grid;
  grid-template-columns:1fr .72fr 1fr;
  gap:7px;
  margin-top:9px;
}

.length-frequency-pair,
.inverse-center{
  min-width:0;
  padding:10px 11px;
  border:1px solid var(--tl-line,#596163);
  border-radius:8px;
  background:rgba(255,255,255,.014);
}

.length-frequency-pair span,
.inverse-center span{
  display:block;
  color:var(--tl-muted,#aea491);
  font-size:.64rem;
  font-weight:700;
}

.length-frequency-pair strong,
.inverse-center strong{
  display:block;
  margin-top:5px;
  color:var(--tl-cream,#eadfc8);
  font-size:.98rem;
  font-weight:850;
}

.length-frequency-pair small,
.inverse-center small{
  display:block;
  margin-top:4px;
  color:var(--tl-cream-2,#d5c8af);
  font-size:.66rem;
}

.natural-pair{
  border-left:2px solid rgba(191,128,96,.58);
}

.tet-pair{
  border-left:2px solid rgba(190,198,196,.48);
}

.inverse-center{
  text-align:center;
}

.inverse-center strong{
  font-size:1.04rem;
}

.physical-law{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-top:8px;
  padding:8px 11px;
  border-left:3px solid var(--tl-copper,#a56f50);
  background:rgba(165,111,80,.07);
  color:var(--tl-cream-2,#d5c8af);
  font-size:.72rem;
}

.physical-law strong{
  color:var(--tl-copper-2,#bf8060);
}

.compact-delta{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:14px;
  margin-top:8px;
  padding:10px 12px;
  border:1px solid var(--tl-line,#596163);
  border-bottom:2px solid rgba(165,111,80,.58);
  border-radius:8px;
  background:var(--tl-panel,#303638);
}

.compact-delta span{
  color:var(--tl-muted,#aea491);
  font-size:.67rem;
}

.compact-delta strong{
  color:var(--tl-copper-2,#bf8060);
  font-size:1rem;
}

.compact-delta small{
  color:var(--tl-copper-2,#bf8060);
  font-size:.70rem;
}

/* sequence spacing */
.physical-compare + .interval-rulers{
  margin-top:0;
  margin-bottom:12px;
}

.interval-rulers + .interval-piano-panel{
  margin-top:0;
}

.interval-piano-panel + .fraction-chain{
  margin-top:12px;
}

@media(max-width:820px){
  .physical-numbers{
    grid-template-columns:1fr 1fr;
  }

  .inverse-center{
    grid-column:1/-1;
  }

  .physical-law{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
}

@media(max-width:560px){
  .physical-head{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }

  .physics-board{
    height:184px;
  }

  .physical-numbers{
    grid-template-columns:1fr;
  }

  .inverse-center{
    grid-column:auto;
  }

  .compact-delta{
    grid-template-columns:1fr;
    gap:5px;
  }
}


/* =========================================================
   PAGE 01 CLEAN PHYSICAL MODULE
   ========================================================= */

.interval-tool{
  padding:16px !important;
}

.interval-toolbar{
  margin-bottom:12px !important;
}

.selected-fret-head{
  display:grid;
  gap:3px;
  margin-left:auto;
  text-align:right;
}

.selected-fret-head>span{
  color:var(--tl-muted,#aea491);
  font-size:.66rem;
}

.selected-fret-head>strong{
  color:var(--tl-copper-2,#bf8060);
  font-size:1.05rem;
  font-weight:900;
}

.selected-fret-head>small{
  color:var(--tl-cream-2,#d5c8af);
  font-size:.69rem;
}

.fret-select-hint{
  margin:-2px 0 8px;
  color:var(--tl-muted,#aea491);
  font-size:.67rem;
}

.physics-fret{
  cursor:pointer;
  pointer-events:auto;
}

.physics-fret:hover{
  background:var(--tl-copper-2,#bf8060);
  opacity:1;
}

.physics-fret-hit{
  position:absolute;
  top:0;
  bottom:0;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  z-index:7;
}

.physics-fret-hit:hover{
  background:rgba(255,255,255,.035);
}

.physics-fret-hit.is-selected{
  background:rgba(165,111,80,.08);
}

.physics-compare-grid{
  display:grid;
  gap:7px;
  margin-top:9px;
}

.system-row{
  display:grid;
  grid-template-columns:110px 1fr 30px 1fr;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--tl-line,#596163);
  border-radius:8px;
  background:rgba(255,255,255,.014);
}

.natural-row{
  border-left:3px solid var(--tl-copper-2,#bf8060);
}

.tet-row{
  border-left:3px solid #b9c2c0;
}

.system-name{
  display:grid;
  gap:3px;
}

.system-name strong{
  color:var(--tl-cream,#eadfc8);
  font-size:.86rem;
}

.system-name small{
  color:var(--tl-muted,#aea491);
  font-size:.65rem;
}

.system-row>div:not(.system-name):not(.relation-arrow){
  display:grid;
  gap:3px;
}

.system-row span{
  color:var(--tl-muted,#aea491);
  font-size:.64rem;
}

.system-row>div>strong{
  color:var(--tl-cream,#eadfc8);
  font-size:.98rem;
}

.system-row small{
  color:var(--tl-cream-2,#d5c8af);
  font-size:.67rem;
}

.relation-arrow{
  color:var(--tl-copper-2,#bf8060);
  text-align:center;
  font-size:1.1rem;
  font-weight:900;
}

.inverse-law-main{
  display:grid;
  grid-template-columns:1fr 34px 1fr;
  gap:8px;
  align-items:center;
  margin-top:9px;
  padding:10px 12px;
  border:1px solid var(--tl-line,#596163);
  border-radius:8px;
  background:#2b3031;
}

.inverse-law-main>div{
  display:grid;
  gap:5px;
  text-align:center;
}

.inverse-law-main span{
  color:var(--tl-muted,#aea491);
  font-size:.64rem;
}

.inverse-law-main strong{
  color:var(--tl-cream,#eadfc8);
  font-size:1.08rem;
}

.inverse-law-main>b{
  color:var(--tl-copper-2,#bf8060);
  text-align:center;
  font-size:1.1rem;
}

.compact-difference{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:14px;
  align-items:center;
  margin-top:8px;
  padding:9px 12px;
  border:1px solid var(--tl-line,#596163);
  border-bottom:2px solid rgba(165,111,80,.55);
  border-radius:8px;
  background:var(--tl-panel,#303638);
}

.compact-difference span{
  color:var(--tl-muted,#aea491);
  font-size:.66rem;
}

.compact-difference strong{
  color:var(--tl-copper-2,#bf8060);
  font-size:.76rem;
}

.physics-description,
.symbol-help{
  margin-top:8px;
  overflow:hidden;
  border:1px solid var(--tl-line,#596163);
  border-radius:8px;
  background:var(--tl-panel,#303638);
}

.physics-description summary,
.symbol-help summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  list-style:none;
  cursor:pointer;
}

.physics-description summary::-webkit-details-marker,
.symbol-help summary::-webkit-details-marker{
  display:none;
}

.physics-description summary span,
.symbol-help summary span{
  color:var(--tl-cream,#eadfc8);
  font-size:.76rem;
  font-weight:850;
}

.physics-description summary small,
.symbol-help summary small{
  margin-left:auto;
  color:var(--tl-muted,#aea491);
  font-size:.62rem;
}

.physics-description summary::after,
.symbol-help summary::after{
  content:"+";
  color:var(--tl-copper-2,#bf8060);
  font-weight:900;
}

.physics-description[open] summary::after,
.symbol-help[open] summary::after{
  content:"−";
}

.physics-description-body{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:10px 12px 12px;
  border-top:1px solid rgba(255,255,255,.05);
}

.physics-description-body p{
  margin:0;
  color:var(--tl-cream-2,#d5c8af);
  font-size:.70rem;
  line-height:1.5;
}

.symbol-help-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  padding:10px 12px 12px;
  border-top:1px solid rgba(255,255,255,.05);
}

.symbol-help-grid>div{
  display:grid;
  gap:4px;
  padding:9px 10px;
  border:1px solid rgba(231,217,186,.10);
  border-radius:7px;
  background:rgba(255,255,255,.014);
}

.symbol-help-grid strong{
  color:var(--tl-cream,#eadfc8);
  font-size:1rem;
}

.symbol-help-grid span{
  color:var(--tl-cream-2,#d5c8af);
  font-size:.66rem;
  line-height:1.35;
}

@media(max-width:850px){
  .system-row{
    grid-template-columns:90px 1fr 22px 1fr;
  }

  .physics-description-body{
    grid-template-columns:1fr;
  }

  .symbol-help-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:600px){
  .selected-fret-head{
    width:100%;
    margin-left:0;
    text-align:left;
  }

  .system-row{
    grid-template-columns:1fr;
  }

  .relation-arrow{
    transform:rotate(90deg);
  }

  .inverse-law-main{
    grid-template-columns:1fr;
  }

  .inverse-law-main>b{
    transform:rotate(90deg);
  }

  .compact-difference{
    grid-template-columns:1fr;
    gap:5px;
  }

  .symbol-help-grid{
    grid-template-columns:1fr;
  }
}


/* Mathematical notation inside Natural / 12-TET rows */
.system-formula{
  min-height:1.35em;
}

.system-formula mjx-container{
  margin:0 !important;
  color:var(--tl-cream-2,#d5c8af) !important;
  font-size:1.02em !important;
}


/* =========================================================
   READABILITY — explanatory text only
   Keep module geometry unchanged; do not require browser zoom.
   ========================================================= */

.physics-description summary span,
.symbol-help summary span{
  font-size:.86rem;
}

.physics-description summary small,
.symbol-help summary small{
  font-size:.70rem;
}

.physics-description-body p{
  font-size:.88rem;
  line-height:1.58;
}

.symbol-help-grid span{
  font-size:.78rem;
  line-height:1.46;
}

.symbol-help-grid strong{
  font-size:1.06rem;
}

@media(max-width:760px){
  .physics-description-body p{
    font-size:.90rem;
  }

  .symbol-help-grid span{
    font-size:.80rem;
  }
}