:root{font-family:Inter,Segoe UI,system-ui,Arial,sans-serif;color:#112d45;background:#e9eff5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.app{width:min(1560px,100%);margin:auto;min-height:100vh;display:flex;flex-direction:column;background:#f7f9fc;box-shadow:0 10px 45px #24446212}header{background:linear-gradient(113deg,#0e243b,#1b4863);color:white;min-height:91px;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:15px}.eyebrow{font-size:11px;letter-spacing:.16em;color:#7addf5;font-weight:800}h1{font-size:clamp(17px,1.65vw,27px);line-height:1.12;margin:6px 0 0;font-weight:780}.headerRight{display:flex;align-items:center;gap:12px}.pill{border:1px solid #7394ab;border-radius:30px;padding:9px 12px;font-size:11px;white-space:nowrap}.reset{border:0;background:linear-gradient(#ffb049,#ed7c26);padding:11px 15px;border-radius:10px;color:#251404;box-shadow:0 4px 0 #ad551c;cursor:pointer;font-weight:800;white-space:nowrap}nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;background:#dae6ef;padding:9px 17px}.tab{border:1px solid #bfd0dd;background:#f6faff;color:#254b62;padding:10px 5px;border-radius:9px;font-size:14px;font-weight:850;cursor:pointer}.tab span{font-size:12px;font-weight:650;margin-left:4px}.tab.active{background:#126b86;border-color:#126b86;color:#fff;box-shadow:0 2px 7px #145d8155}main{flex:1;padding:13px 18px;min-height:0}.view{display:none}.view.active{display:block}.stage{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(285px,1fr);gap:12px;min-height:0}.visual,.panel,.lossgraph{background:white;border:1px solid #d7e1e9;border-radius:13px;box-shadow:0 2px 9px #2444620c}.visual{position:relative;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;min-height:270px}.visual img{width:100%;height:clamp(185px,29vh,305px);object-fit:contain}.stagelabel{align-self:stretch;color:#22647f;font-weight:850;font-size:11px;letter-spacing:.045em;text-align:left}.notation{font-size:11.5px;color:#45677b;line-height:1.38;padding:4px 8px;text-align:center}.panel{padding:16px 19px;display:flex;flex-direction:column;gap:9px}h2{font-size:17px;margin:0 0 4px}h3{font-size:12px;margin:0 0 6px;color:#426076}.instrument{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:3px 0 10px}.meter{background:#112c43;border:2px solid #36576b;border-radius:8px;padding:9px 4px;text-align:center;color:#a9fbda;min-width:0}.meter small{display:block;font-size:9px;color:#c5dde9}.meter strong{display:block;font:700 clamp(15px,1.65vw,24px) ui-monospace,monospace;margin-top:7px}.panel label{font-size:12px;font-weight:750;display:flex;justify-content:space-between;gap:8px}.panel label output{color:#0b7696;font-weight:850}input[type=range]{width:100%;accent-color:#0b83a0;cursor:pointer;margin:0 0 8px}.rangeends{display:flex;justify-content:space-between;color:#829aab;font-size:10px;margin-top:-9px}.help,.footerinfo{color:#547184;font-size:11.7px;line-height:1.45;margin:5px 0 0}.warning{border:1px solid #ecbb67;background:#fff4dd;padding:10px;border-radius:8px;font-size:12px;color:#89550c;line-height:1.4}.results{margin-top:12px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.result{border-radius:10px;background:#fff;border:1px solid #d8e5ec;padding:11px 9px;min-width:0}.result small{display:block;font-size:10.5px;font-weight:700;color:#527083;min-height:24px}.result strong{display:block;font-size:clamp(14px,1.55vw,20px);color:#123b53;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result em{font-size:10px;color:#6e8290;font-style:normal}.footerinfo{padding:9px 5px}.circuit svg{width:100%;max-height:290px}.seg{display:flex;gap:6px}.seg button{flex:1;border:1px solid #a9c7d8;padding:12px 5px;background:#edf5f9;border-radius:8px;color:#225674;cursor:pointer;font-weight:800}.seg button.on{background:#136b87;color:white}.largebox{background:#edf5fa;border-radius:8px;padding:11px}.largebox span,.largebox strong{display:block;font-size:11px}.largebox strong{font-size:16px;margin-top:4px}.equation{background:#fff4ce;border:1px solid #b98550;border-left:4px solid #d44836;padding:9px;text-align:center;font-weight:850;border-radius:5px}.plot svg{width:100%;height:clamp(195px,29vh,315px)}.legend{display:flex;gap:13px;justify-content:center;font-size:11px;font-weight:800}.teal{color:#068d9b}.amber{color:#e18419}.violet{color:#7854a0}.lossgraph{padding:7px 15px;margin-top:9px}.lossgraph svg{width:100%;height:clamp(58px,12vh,105px)}select{padding:10px;border-radius:8px;border:1px solid #b4cbd9;background:white;color:#153c53;font-weight:700}.nameplate{background:linear-gradient(135deg,#dde8ed,#f8fbfc 35%,#bacfd8);border:2px solid #8299a5;border-radius:8px;padding:10px;box-shadow:inset 0 0 8px #6c899344}.pltitle{font-weight:900;text-align:center;border-bottom:2px solid #748b97;padding-bottom:6px;letter-spacing:.09em}.nameplate>div:not(.pltitle):not(.plfoot){display:flex;justify-content:space-between;padding:5px 2px;border-bottom:1px solid #a6bac5;font-size:12px;gap:8px}.plfoot{font-size:9px;text-align:center;padding-top:7px}footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #d3e2ec;color:#607f90;font-size:10px;padding:8px 22px}@media(min-width:950px) and (min-height:700px){main{display:flex;flex-direction:column}.view.active{flex:1}.stage{min-height:min(42vh,400px)}.visual img{height:min(31vh,315px)}}@media(max-width:900px){.tab span{display:block;font-size:10px}.results{grid-template-columns:repeat(3,minmax(0,1fr))}.stage{grid-template-columns:1fr}.visual img{height:260px}.headerRight .pill{display:none}}@media(max-width:520px){header{padding:13px;align-items:flex-start}h1{font-size:17px}.reset{font-size:11px;padding:9px}nav{gap:3px;padding:5px}.tab{font-size:14px;padding:8px 0}.tab span{font-size:9px}main{padding:8px}.panel{padding:13px}.results{grid-template-columns:repeat(2,minmax(0,1fr))}.visual img{height:210px}.instrument .meter strong{font-size:15px}footer{flex-direction:column}}


.circuitRef{width:100%;height:clamp(170px,25vh,250px);object-fit:contain}
#view-C .results{grid-template-columns:repeat(6,minmax(0,1fr))}
#view-D .stage{grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:stretch}
#view-D .visual{padding:10px 12px;min-height:220px}
#view-D .panel{padding:12px 16px;gap:7px}
#view-D .plot svg{height:clamp(155px,20vh,215px)}
#view-D .results{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:8px}
#view-D .result{padding:9px 8px}
#view-D .result small{min-height:18px;font-size:10px}
#view-D .result strong{font-size:clamp(13px,1.3vw,18px)}
#view-D .lossgraph{padding:6px 12px;margin-top:7px}
#view-D .lossgraph h3{margin:0 0 4px;font-size:11px}
#view-D .lossgraph svg{height:clamp(52px,8vh,80px)}
#view-D .legend{font-size:10px;gap:10px}
#view-D .help{font-size:11px;line-height:1.3}
@media(min-width:1100px){
  #view-D .stage{min-height:min(34vh,300px)}
}
@media(max-width:900px){
  #view-D .results{grid-template-columns:repeat(3,minmax(0,1fr))}
  #view-C .results{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:520px){
  #view-D .results,#view-C .results{grid-template-columns:repeat(2,minmax(0,1fr))}
}