.chart-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;margin:20px 0}.chart-card{padding:24px;background:white;border:1px solid #dce9e1;border-radius:20px;min-width:0}.chart-card h3{margin:0 0 6px;font-size:18px}.chart-caption{font-size:12px;color:#6d8377;margin:0 0 20px;line-height:1.5}.chart-wide{grid-column:1/-1}.chart-bars{display:grid;gap:14px}.chart-row{display:grid;grid-template-columns:130px 1fr 28px;align-items:center;gap:10px;width:100%;padding:7px 0;background:none;border:0;color:#234536;text-align:left;cursor:pointer}.chart-row span{font-size:12px}.chart-track{height:22px;border-radius:7px;background:#eff4f0;overflow:hidden}.chart-fill{height:100%;border-radius:7px;background:var(--bar);width:var(--width);animation:barGrow .65s ease both;transform-origin:left}.chart-row[aria-pressed=true]{outline:2px solid #2a9564;outline-offset:4px;border-radius:6px}.donut-layout{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}.donut-svg{width:200px;max-width:100%;height:auto}.donut-segment{cursor:pointer;transition:stroke-width .2s,opacity .2s;stroke-width:24}.donut-segment:hover,.donut-segment:focus{stroke-width:29;outline:none}.chart-legend{display:grid;gap:8px}.chart-legend button{display:flex;align-items:center;gap:8px;border:1px solid transparent;background:#f7faf8;border-radius:8px;padding:8px 11px;cursor:pointer;font-size:12px;text-align:left}.chart-legend button[aria-pressed=true]{border-color:#218958}.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.trend-svg{display:block;width:100%;height:auto;overflow:visible}.trend-svg text{font-family:Arial,sans-serif;font-size:11px;fill:#648174}.trend-point{cursor:pointer;transition:r .15s;stroke:white;stroke-width:3}.trend-point:hover,.trend-point:focus{r:8;outline:2px solid #217754}.chart-empty{display:grid;place-items:center;min-height:180px;background:#f3f8f5;border-radius:12px;color:#708878;text-align:center;padding:25px}.chart-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:end}.chart-controls>div{flex:1;min-width:150px}.chart-controls label{font-size:12px}.filter-chip{display:inline-block;background:#eaf5ee;border:1px solid #c4dfcd;border-radius:20px;padding:6px 10px;margin:8px 6px 4px 0;font-size:12px}.intro-screen{margin:auto;border:0;padding:0;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;background:radial-gradient(ellipse at 80% 20%,#18794e,#062b22 70%);color:white;overflow:hidden;border-radius:0}.intro-screen::backdrop{background:#062b22}.intro-shell{display:flex;flex-direction:column;height:100%;padding:32px clamp(22px,6vw,90px);position:relative}.intro-top{display:flex;justify-content:space-between;align-items:center;z-index:2;gap:15px}.intro-school{font-size:12px;letter-spacing:2px;color:#d6e9dd}.intro-skip{background:#ffffff12;border:1px solid #ffffff50;color:white;border-radius:30px;padding:11px 18px;cursor:pointer}.intro-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;z-index:1}.intro-stage h1{font-size:clamp(44px,8vw,96px);letter-spacing:-3px;margin:15px 0;line-height:1.05}.intro-stage h2{font-size:clamp(30px,5vw,58px);margin:14px 0;letter-spacing:-1px;max-width:900px}.intro-stage p{max-width:680px;font-size:clamp(15px,2vw,21px);line-height:1.6;color:#d7eade;margin:10px auto}.intro-eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#a6dbb8}.intro-icon{font-size:clamp(55px,8vw,92px);animation:introFloat 5s ease-in-out infinite}.intro-logo{width:86px;height:86px;object-fit:contain;background:white;border-radius:20px;padding:8px}.intro-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;z-index:2;flex-wrap:wrap}.intro-dots{display:flex;gap:9px}.intro-dots button{width:9px;height:9px;border-radius:50%;background:#ffffff40;border:0;padding:0;cursor:pointer}.intro-dots button[aria-current=true]{background:#c5e98e;width:28px;border-radius:9px}.intro-buttons{display:flex;gap:9px;flex-wrap:wrap}.intro-buttons button{border-radius:24px;border:1px solid #ffffff35;background:#ffffff10;color:white;padding:11px 18px;cursor:pointer}.intro-buttons .enter-app{background:#eef9ef;color:#0d5035;border-color:#eef9ef;font-weight:bold}.intro-decoration{position:absolute;width:min(70vw,750px);aspect-ratio:1;border:1px solid #ffffff0e;right:-12%;top:-25%;border-radius:50%;pointer-events:none;animation:introOrbit 20s linear infinite}.intro-decoration:after{content:'';position:absolute;inset:60px;border:1px solid #ffffff12;border-radius:50%}.intro-decoration:before{content:'';position:absolute;left:15%;top:18%;width:12px;height:12px;background:#b7e18c66;border-radius:50%;box-shadow:0 0 30px #b7e18c33}.intro-slide-in{animation:introSlide .55s ease both}.intro-screen.exit-intro{animation:introExit .45s ease both}.intro-progress{height:2px;background:#ffffff20;position:absolute;bottom:0;left:0;right:0}.intro-progress span{display:block;height:100%;background:#bbdf93;transition:width .4s}.replay-intro{margin-top:16px}.chart-row:focus-visible,.chart-legend button:focus-visible,.intro-screen button:focus-visible{outline:3px solid #b2d99a;outline-offset:4px}@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes introFloat{50%{transform:translateY(-10px)}}@keyframes introOrbit{to{transform:rotate(360deg)}}@keyframes introSlide{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}@keyframes introExit{to{opacity:0;transform:scale(1.04)}}@media(max-width:750px){.chart-grid{grid-template-columns:1fr}.chart-wide{grid-column:auto}.chart-row{grid-template-columns:100px 1fr 24px}.intro-shell{padding:22px}.intro-school{font-size:10px;letter-spacing:1px}.intro-stage h1{letter-spacing:-1.5px}.intro-bottom{justify-content:center}.intro-dots{width:100%;justify-content:center}}@media(prefers-reduced-motion:reduce){.intro-screen *,.intro-screen,.chart-fill{animation:none!important;transition:none!important}}@media print{.intro-screen,.chart-controls,.filter-chip{display:none!important}.chart-grid{display:block}.chart-card{break-inside:avoid;margin:15px 0}.chart-fill{animation:none!important}}
