:root{--ink:#092350;--muted:#50617a;--sky:#b9e3fa;--coral:#ff665f;--blue:#3177ee;--yellow:#ffd24a;--paper:#fff;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html{width:100%;height:100%;overflow:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
body{margin:0;height:100%;width:100%;overflow:hidden;overscroll-behavior:none;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Roboto","Segoe UI",Arial,sans-serif;font-weight:500;color:var(--ink);background:radial-gradient(ellipse at 50% 25%,#d5f1ff 0%,#b8e5fc 55%,#a4d8f5 100%);-webkit-font-smoothing:antialiased}
button,select{font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button{cursor:pointer}button:active{scale:.965}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
a{color:inherit;text-decoration:none}.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.app{height:100vh;height:100dvh;max-height:100dvh;min-height:0;width:min(1540px,100%);display:grid;grid-template-rows:minmax(0,1fr) 20px;gap:9px;margin:0 auto;padding:max(9px,var(--safe-top)) 12px max(8px,var(--safe-bottom));overflow:hidden}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,430px);gap:16px;min-height:0;min-width:0}
.map-panel{position:relative;isolation:isolate;min-width:0;min-height:0;overflow:hidden;border-radius:30px;background:linear-gradient(125deg,rgba(230,248,255,.28),transparent 60%);contain:layout paint}
.sky{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 57% 49%,rgba(237,251,255,.55),transparent 64%)}
.clouds{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;filter:blur(1px)}
.cloud{position:absolute;width:176px;height:58px;border-radius:50%;opacity:.86;transform:translate3d(0,0,0);will-change:transform;background:radial-gradient(ellipse at 50% 85%,rgba(255,255,255,.96) 0 55%,rgba(255,255,255,0) 76%);filter:drop-shadow(0 13px 21px rgba(115,181,218,.18));animation:cloud-drift 19s ease-in-out infinite alternate}
.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:radial-gradient(circle at 50% 48%,white 10%,rgba(255,255,255,.93) 53%,transparent 75%)}
.cloud:before{width:92px;height:92px;top:-43px;left:23px}.cloud:after{width:80px;height:80px;top:-27px;left:84px}
.cloud-a{left:-42px;top:36%;animation-duration:23s}
.cloud-b{right:-48px;top:23%;scale:.78;animation-delay:-8s;animation-duration:21s}
.cloud-c{left:-62px;bottom:12%;scale:1.13;animation-duration:17s;animation-delay:-5s;opacity:.75}
.cloud-d{right:-40px;bottom:8%;scale:.95;animation-duration:25s;animation-delay:-12s}
@keyframes cloud-drift{0%{transform:translate3d(-11px,5px,0)}100%{transform:translate3d(25px,-10px,0)}}
.hero{position:absolute;left:26px;top:26px;right:24px;z-index:9;pointer-events:none}
.hero-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sticker{display:flex;align-items:center;gap:8px;border-radius:999px;padding:10px 15px;background:rgba(255,255,255,.9);box-shadow:0 7px 28px rgba(51,121,170,.1);font-weight:850;letter-spacing:.07em;font-size:13px;white-space:nowrap}
.spark{font-size:18px;color:#ffc32e}
.round-tabs{pointer-events:auto;display:flex;align-items:center;padding:5px;background:rgba(255,255,255,.85);box-shadow:0 7px 28px rgba(51,121,170,.1);border-radius:999px;gap:2px}
.round-tabs button{border:0;border-radius:999px;background:transparent;padding:10px 16px;min-width:110px;min-height:42px;font-size:14px;font-weight:780;white-space:nowrap;color:var(--ink)}
.round-tabs button[aria-pressed="true"]{background:var(--yellow);box-shadow:inset 0 0 0 1px #ffc139}
h1,h2,p{margin:0}
.hero h1{margin-top:12px;font-size:clamp(50px,6vw,94px);letter-spacing:-.077em;line-height:.85;font-weight:900;max-width:670px;text-wrap:balance}
.hero h1 span{display:block;color:var(--coral);margin-top:8px}
.legend{position:absolute;right:24px;top:164px;z-index:9;display:flex;flex-direction:column;gap:10px;padding:13px 15px;border-radius:18px;background:rgba(255,255,255,.75);box-shadow:0 8px 26px rgba(56,122,168,.1);backdrop-filter:blur(8px)}
.legend span{display:flex;align-items:center;gap:10px;font-weight:750;font-size:13px;white-space:nowrap}
.legend-dot{display:block;width:13px;height:13px;border-radius:50%;flex:none}
.legend-dot.red{background:var(--coral)}.legend-dot.blue{background:var(--blue)}.legend-dot.neutral{background:var(--yellow)}
.map-stage{position:absolute;inset:152px 8px 91px;z-index:3;overflow:hidden;touch-action:none;user-select:none;contain:layout style paint}
#map3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none}
#map3d.grabbing{cursor:grabbing}
.state-labels{position:absolute;inset:0;pointer-events:none}
.state-label{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);padding:3px 7px;min-width:34px;height:26px;border-radius:9px;color:var(--ink);background:rgba(255,255,255,.96);border:1.5px solid rgba(10,36,78,.75);box-shadow:0 3px 0 rgba(10,36,78,.85),0 6px 12px #18447825;font-size:12px;font-weight:850;letter-spacing:.01em;white-space:nowrap;will-change:transform}
.state-label.selected{background:var(--yellow)}.state-label[hidden]{display:none!important}
.render-note{position:absolute;inset:10px;display:grid;place-items:center;border-radius:20px;background:rgba(255,255,255,.85);padding:20px;text-align:center;font-size:16px;font-weight:700}.render-note[hidden]{display:none!important}
.map-controls{position:absolute;right:18px;bottom:120px;z-index:10;display:flex;flex-direction:column;gap:9px}
.map-controls button{display:grid;place-items:center;width:54px;height:54px;padding:0;border:0;border-radius:50%;font-size:31px;font-weight:550;color:var(--ink);background:rgba(255,255,255,.95);box-shadow:0 9px 22px rgba(51,119,160,.14)}
.map-controls button:hover{background:#fff}.map-controls svg{width:25px;height:25px}
.map-bottom{position:absolute;left:22px;right:22px;bottom:18px;z-index:10}
.uf-picker{position:relative;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.97);border-radius:17px;padding:10px 17px;min-height:58px;box-shadow:0 9px 25px rgba(51,119,160,.14);width:min(100%,440px)}
.uf-picker>svg:first-child{flex:none;color:var(--ink)}
.uf-picker select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font-size:16px;font-weight:760;line-height:1.25;color:var(--ink);min-width:0;width:100%;padding-right:20px;outline:0}
.select-chevron{position:absolute;right:17px;pointer-events:none}
.results{min-width:0;min-height:0;display:flex;flex-direction:column;gap:13px;background:rgba(255,255,255,.96);border-radius:26px;padding:22px;box-shadow:0 14px 34px rgba(65,116,156,.1)}
.results-heading{flex:none}.eyebrow{font-size:13px;font-weight:780;letter-spacing:.095em;color:var(--muted);text-transform:uppercase}
.heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:9px;margin-top:5px}
.results-heading h2{font-size:clamp(29px,2.5vw,40px);line-height:1.03;font-weight:890;letter-spacing:-.065em;min-width:0}
.results-heading h2 span{color:var(--coral)}.round-date{font-size:11px;font-weight:700;letter-spacing:.025em;white-space:nowrap;padding-bottom:3px;color:var(--muted)}
.progress-panel{flex:none;padding:16px;border:1px solid #d9e6f8;background:#f8fbff;border-radius:18px}
.progress-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;font-weight:750;color:#455b79;white-space:nowrap}
.progress-label strong{font-size:28px;font-weight:900;letter-spacing:-.055em;color:var(--ink)}
.progress-track{height:12px;margin:12px 0 5px;border-radius:999px;background:#e6eaf0;overflow:hidden}
.progress-track span{display:block;width:0;height:100%;border-radius:999px;background:var(--yellow);transition:width .35s ease}
.progress-bottom{text-align:left;font-size:12px;font-weight:600;color:var(--muted)}
.candidates{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
.candidate{min-height:0;flex:1;padding:16px;border-radius:19px;display:flex;flex-direction:column;gap:8px}
.candidate.lula{background:#ffebec;border:1px solid #ffd3d6}.candidate.flavio{background:#e8f1ff;border:1px solid #d1e4ff}
.candidate-heading{display:flex;align-items:center;gap:12px;min-width:0}
.candidate-heading img{height:62px;width:62px;object-fit:cover;object-position:center 22%;border-radius:50%;flex:none}
.candidate-title{display:flex;flex-direction:column;gap:4px;min-width:0}
.candidate-title strong{font-size:20px;font-weight:850;letter-spacing:-.04em}.candidate-title small{font-size:15px;color:var(--muted);font-weight:650}
.candidate-percent{margin-top:auto;text-align:right;font-size:clamp(32px,3.5vw,48px);font-weight:880;letter-spacing:-.075em;line-height:1}
.vote-total{text-align:right;font-size:14px;color:var(--muted);font-weight:650}
.candidate-meter{height:11px;overflow:hidden;border-radius:999px;background:rgba(57,92,164,.15)}
.candidate-meter span{display:block;width:0;height:100%;border-radius:999px;transition:width .35s ease}
.candidate.lula .candidate-meter span{background:var(--coral)}.candidate.flavio .candidate-meter span{background:var(--blue)}
.footer{display:flex;align-items:center;justify-content:space-between;padding:0 12px;gap:10px;color:rgba(9,35,80,.7);font-size:10px;font-weight:720;letter-spacing:.05em;white-space:nowrap}.footer a{text-decoration:underline;text-underline-offset:3px}

@media(max-width:950px){
 .app{grid-template-rows:minmax(0,1fr) 16px;padding:max(6px,var(--safe-top)) 9px max(6px,var(--safe-bottom));gap:5px}
 .workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(258px,37%);gap:9px}
 .map-panel{border-radius:22px}
 .hero{left:18px;right:12px;top:13px}.hero-line{gap:6px}
 .sticker{font-size:11px;padding:8px 11px;letter-spacing:.035em;gap:5px}.spark{font-size:16px}
 .round-tabs{padding:3px;gap:0}
 .round-tabs button{padding:8px 10px;min-height:38px;min-width:79px;font-size:12px}
 .hero h1{font-size:clamp(36px,6.4vw,64px);margin-top:11px;line-height:.88;letter-spacing:-.065em}
 .hero h1 span{margin-top:5px}
 .legend{top:132px;right:13px;border-radius:14px;padding:10px;gap:7px}
 .legend span{font-size:11px;gap:7px}.legend-dot{width:10px;height:10px}
 .map-stage{inset:114px 4px 76px}
 .map-controls{right:13px;bottom:93px;gap:8px}
 .map-controls button{width:44px;height:44px;font-size:28px}
 .map-controls svg{width:22px;height:22px}
 .map-bottom{bottom:11px;left:12px;right:12px}
 .uf-picker{width:min(100%,460px);min-height:52px;border-radius:16px}
 .uf-picker select{font-size:16px}
 .results{padding:15px;border-radius:20px;gap:9px}
 .eyebrow{font-size:11px}
 .results-heading h2{font-size:31px}
 .round-date{font-size:10px}
 .progress-panel{padding:10px 12px;border-radius:13px}
 .progress-label{font-size:11px}.progress-label strong{font-size:24px}
 .progress-track{height:9px;margin:6px 0 4px}
 .progress-bottom{font-size:11px}
 .candidates{flex-direction:row;gap:9px;min-height:0}
 .candidate{padding:11px;border-radius:15px;min-width:0;gap:5px}
 .candidate-heading{gap:8px}
 .candidate-heading img{height:42px;width:42px}
 .candidate-title{gap:2px}
 .candidate-title strong{font-size:15px}
 .candidate-title small{font-size:12px}
 .candidate-percent{font-size:clamp(27px,5.4vw,36px)}
 .vote-total{font-size:11px}
 .candidate-meter{height:8px}
 .footer{font-size:9px}
}
@media(max-width:480px){
 .workspace{grid-template-rows:minmax(0,1fr) minmax(250px,36%)}
 .hero{left:12px;right:9px;top:12px}
 .sticker{font-size:10px;padding:7px 10px}
 .round-tabs button{font-size:11px;min-height:36px;min-width:71px;padding:7px 9px}
 .hero h1{font-size:clamp(38px,10.5vw,50px)}
 .legend{top:136px;right:6px;padding:8px 9px;gap:6px;background:rgba(255,255,255,.68)}
 .legend span{font-size:10px;gap:6px}
 .map-stage{inset:116px 0 78px}
 .map-controls{right:9px;bottom:90px;gap:6px}
 .map-controls button{width:41px;height:41px;font-size:26px}
 .uf-picker{padding:8px 12px;min-height:52px;gap:8px}
 .uf-picker select{font-size:16px;font-weight:730}
 .state-label{font-size:11px;min-width:29px;height:24px;padding:3px 5px;border-radius:8px}
 .results{padding:12px;gap:7px}
 .eyebrow{font-size:10px}
 .heading-row{align-items:center;margin-top:2px}
 .results-heading h2{font-size:clamp(27px,7vw,32px)}
 .round-date{font-size:10px}
 .progress-panel{padding:8px 10px}
 .progress-label{font-size:10px}
 .progress-label strong{font-size:22px}
 .progress-bottom{font-size:10px}
 .candidate{padding:9px;gap:4px}
 .candidate-heading img{width:40px;height:40px}
 .candidate-title strong{font-size:15px}
 .candidate-title small{font-size:11px}
 .candidate-percent{font-size:clamp(25px,6.5vw,32px)}
 .vote-total{font-size:10px}
 .footer{font-size:9px}
 .cloud-a{left:-94px;top:36%}.cloud-b{right:-98px;top:23%}.cloud-c{left:-100px;bottom:15%}.cloud-d{right:-112px;bottom:16%}
}
@media(max-width:385px){
 .hero h1{font-size:39px}
 .round-tabs button{min-width:66px;font-size:10.5px}
 .legend{top:132px}
 .results-heading h2{font-size:26px}
 .round-date{font-size:9px}
 .candidate-heading img{width:36px;height:36px}
 .candidate-title strong{font-size:14px}
}
@media(max-height:735px) and (max-width:950px){
 .workspace{grid-template-rows:minmax(0,1fr) 244px}
 .hero h1{font-size:clamp(33px,9vw,43px)}
 .hero h1 span{margin-top:3px}
 .legend{top:121px}
 .map-stage{inset:111px 0 64px}
 .map-controls{bottom:74px}
 .uf-picker{min-height:45px}
 .results{padding:9px 10px;gap:5px}
 .results-heading h2{font-size:26px}
 .progress-panel{padding:6px 9px}
 .progress-label strong{font-size:20px}
 .progress-track{height:8px;margin:4px 0 2px}
 .candidates{gap:7px}
 .candidate{padding:7px}
 .candidate-heading img{width:33px;height:33px}
 .candidate-title strong{font-size:13px}
 .candidate-title small{font-size:10px}
 .candidate-percent{font-size:25px}
 .vote-total{font-size:9px}
}
@media(min-width:951px) and (max-height:680px){
 .hero h1{font-size:clamp(42px,5vw,68px)}
 .legend{top:135px}
 .map-stage{inset:122px 0 76px}
 .results{gap:8px;padding:14px}
 .candidate-heading img{height:44px;width:44px}
 .candidate-percent{font-size:33px}
}
@media(prefers-reduced-motion:reduce){
 .cloud{animation:none}
 *{scroll-behavior:auto!important;transition-duration:0ms!important}
}

/* Refined atmospheric clouds; CSS compositing runs without a WebGL redraw. */
.cloud{filter:blur(5px) drop-shadow(0 16px 24px rgba(130,191,223,.12));mask-image:radial-gradient(ellipse at 52% 54%,#000 41%,rgba(0,0,0,.8) 54%,transparent 86%);-webkit-mask-image:radial-gradient(ellipse at 52% 54%,#000 41%,rgba(0,0,0,.8) 54%,transparent 86%)}
.progress-track span,.candidate-meter span{transition:none}
@media(max-height:735px) and (max-width:480px){
 .legend{display:none}
 .map-controls{right:10px;bottom:69px;gap:6px}
 .map-controls button{width:36px;height:36px;font-size:24px}
 .map-controls svg{width:20px;height:20px}
}