/* The fifth dimension (HI-16): the three instruments' own bits. Everything else is episode.css. */
#fx-tube,#fx-correct,#fx-ring{display:block;width:100%;height:300px}
.fx-range{display:inline-flex;align-items:center;gap:10px;min-width:220px;flex:1}
.fx-range input{flex:1;accent-color:var(--ember);min-height:32px}
.fx-third{border-top:1px solid var(--grid);padding-top:6px}
.fx-third .sec-head .chip{margin-left:auto}
.fx-goals{list-style:none;margin:0;padding:12px 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;border-top:1px solid var(--grid)}
.fx-goals li{position:relative;padding-left:24px;color:var(--parchment-dim);font-size:14.5px;line-height:1.4}
.fx-goals li::before{content:'';position:absolute;left:0;top:3px;width:12px;height:12px;border:1.5px solid var(--line);border-radius:3px}
.fx-goals li[data-done="true"]{color:var(--parchment)}
.fx-goals li[data-done="true"]::before{background:var(--moss);border-color:var(--moss)}
.fx-goals b{color:var(--brass);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-right:6px}
@media (max-width:700px){
  .fx-goals{grid-template-columns:1fr}
  #fx-tube,#fx-correct,#fx-ring{height:240px}
  .demo-read{grid-template-columns:repeat(2,minmax(0,1fr))}
}
[data-fx-mode][hidden]{display:none!important}