:root{--bg:#1e2130;--panel:#262a3a;--panel2:#161a28;--line:#4b5460;--text:#f3f5f4;--muted:#aeb4c0;--accent:#91dfd2;--button:#34394d;--plot:#1e2130}
*{box-sizing:border-box}html{font-size:62.5%}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:1.5rem;line-height:1.6}a{color:#b6e5df;text-decoration:none}a:hover{text-decoration:underline}button,select,input{font:inherit}#big-app-container{min-height:100vh}.banner{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.7rem max(3rem,7vw);border-bottom:1px solid var(--line);background:var(--bg)}.banner h1{margin:0;font-size:2rem;letter-spacing:.1rem;text-transform:uppercase;font-weight:650}.banner p{margin:.2rem 0 0;color:var(--muted);font-size:1.45rem}.banner-actions{display:flex;align-items:center;gap:1rem}.banner-actions img{height:3.2rem;width:auto}.button,.update-button{border:1px solid #596174;border-radius:5px;background:transparent;color:#c9ced8;cursor:pointer;padding:.65rem 1.35rem;text-transform:uppercase;letter-spacing:.06rem;font-size:1.15rem;font-weight:650}.button:hover,.update-button:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}.update-button{background:var(--button);align-self:end;height:4.2rem}#app-container{width:min(1500px,94vw);margin:0 auto 6rem}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;margin-bottom:2.4rem}.tab{border:0;border-bottom:4px solid var(--bg);background:var(--panel2);color:#d8dce5;padding:1.25rem 1rem;letter-spacing:.08rem;text-transform:uppercase;font-size:1.25rem;font-weight:700;cursor:pointer}.tab.active{border-bottom-color:var(--accent);color:white}.tab-panel{display:none}.tab-panel.active{display:block}.intro-card,.outro-card,.controls-card,.graph-card,.table-card{background:rgba(38,42,58,.72);border:1px solid #353b4c;border-radius:7px}.intro-card,.outro-card{padding:2rem 2.4rem;margin:0 0 1.6rem}.intro-card p{margin:.6rem 0 1.2rem}.formula{overflow-x:auto;text-align:center;padding:.6rem 0;color:#f5f6f8}.controls-card{display:grid;grid-template-columns:minmax(180px,1fr) minmax(280px,2fr) 150px;gap:1.5rem;padding:1.5rem 2rem;margin:0 0 1.6rem;align-items:end}.controls-card.compact{grid-template-columns:minmax(300px,550px);margin-top:1.6rem}.controls-card label{display:flex;flex-direction:column;gap:.6rem;color:#bec4cf;font-size:1.25rem;font-weight:650;text-transform:uppercase;letter-spacing:.05rem}.controls-card select{height:4.2rem;padding:0 1rem;border-radius:4px;border:1px solid #4f5769;background:#171b29;color:var(--text);outline:none}.controls-card select:focus{border-color:var(--accent)}.graph-card{padding:.5rem;margin-bottom:1.6rem;overflow:hidden}.plot{height:520px;width:100%}.treemap{height:670px}.table-card{padding:1.2rem;overflow:auto}.factor-table-wrap{overflow:auto}.factor-table{border-collapse:collapse;min-width:1200px;width:100%;table-layout:fixed}.factor-table th,.factor-table td{border:1px solid #666d79;padding:.65rem .5rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:105px;color:#111}.factor-table th{background:#ab63fa;color:white;font-weight:700}.factor-table td{background:#969696}.factor-table td:hover{overflow:visible;white-space:normal;position:relative;z-index:3}.footnote{color:#c2c7d0;font-size:1.25rem;margin:.8rem 1.2rem}.slider-label{max-width:550px}.slider-label input{width:100%;accent-color:var(--accent)}.outro-card ul{margin:.2rem 0;padding-left:2rem}.outro-card li{margin:.7rem 0}.modal{display:none;position:fixed;z-index:10000;inset:0;background:rgba(0,0,0,.65);padding:8vh 2rem}.modal.open{display:block}.modal-card{width:min(720px,90vw);margin:auto;background:#2d3038;border:1px solid #51596a;padding:2rem 2.4rem;border-radius:8px;box-shadow:0 20px 70px rgba(0,0,0,.4)}.modal-close{float:right;border:0;background:transparent;color:#d9dde5;cursor:pointer;padding:.4rem .8rem}.modal-close:hover{color:var(--accent)}.modal-card h2{margin-top:0}.static-note{color:var(--accent)}.status{padding:3rem;text-align:center;color:#c3c8d2}.error{color:#ff9d9d}
@media(max-width:900px){.banner{padding:1.5rem 2rem;align-items:flex-start}.banner-actions img{display:none}.controls-card{grid-template-columns:1fr 1fr}.update-button{grid-column:1/-1;width:150px}.tabs{grid-template-columns:1fr 1fr}.plot{height:460px}.treemap{height:560px}}
@media(max-width:600px){body{font-size:1.4rem}.banner{flex-direction:column}.banner h1{font-size:1.65rem}.tabs{grid-template-columns:1fr}.controls-card{grid-template-columns:1fr}.update-button{grid-column:auto;width:100%}.intro-card,.outro-card{padding:1.5rem}.plot{height:430px}.treemap{height:520px}}

/* Non-destructive loading overlay for Plotly graphs. Keeping Plotly's DOM intact
   prevents Update from leaving an initialized graph in a broken state. */
.plot{position:relative}
.plot.is-loading::after{content:'Loading…';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(30,33,48,.70);color:#d9dde5;font-weight:650;letter-spacing:.04rem;z-index:20;pointer-events:none}
.update-button:disabled{opacity:.65;cursor:wait}