/* Graphite: supplied variables.css is the source of the design tokens. */
:root{--page:var(--color-obsidian-canvas);--surface:var(--color-obsidian-canvas);--raised:var(--color-charcoal-surface);--line:var(--color-graphite-edge);--text:var(--color-cloud-white);--muted:var(--color-fog);--accent:var(--color-cloud-white);--font-matterfont:Inter,system-ui,-apple-system,'Segoe UI',sans-serif}
body{background:var(--page);color:var(--text);font-family:var(--font-matterfont);font-feature-settings:'clig' 0,'liga' 0;font-size:14px}button,input,textarea,select{font-family:var(--font-matterfont)}body:before{display:none}header{max-width:1152px;height:72px;margin:24px auto 0;padding:0 24px;border:1px solid var(--line);border-radius:10px;background:var(--page);box-shadow:var(--shadow-sm)}.brand{font-size:22px;letter-spacing:-.8px}.brand .brand-symbol{color:#fafafa!important}.tag{font-family:var(--font-matterfont);font-size:10px;font-weight:600;letter-spacing:1.2px;color:var(--muted)}main{max-width:1248px;padding:24px 48px 32px}.mode-tabs{gap:8px;margin-bottom:56px;padding-bottom:24px;border-color:var(--line)}.mode-tabs button{font-size:14px;font-weight:500;line-height:20px;gap:8px;padding:8px 16px;border-radius:8px;color:var(--muted)}.mode-tabs button[aria-selected=true]{background:#171717;border:1px solid #464646;color:#fafafa}.mode-tabs button:hover{background:#171717;color:#fafafa}.nav-index,.mode-tabs button[aria-selected=true] .nav-index{font-family:var(--font-matterfont);color:#737373;font-size:10px}.eyebrow{font-family:var(--font-matterfont);font-size:10px;letter-spacing:1.5px;font-weight:700;color:var(--muted)}h1{font-family:var(--font-matterfont);font-size:60px;font-weight:500;letter-spacing:-1.5px;line-height:1;margin:24px 0}h1 em{font-weight:500;color:#fafafa}h2,.results-heading h2,.podium-heading h2{font-family:var(--font-matterfont);font-size:36px;font-weight:500;line-height:1.11;letter-spacing:-1px}.intro{font-size:16px;line-height:1.5;color:#a1a1a1;max-width:680px}.primary,.primary:hover,.retry{background:#e5e5e5;color:#171717;border:1px solid #ffffff1a;border-radius:8px;font-size:14px;font-weight:500;line-height:20px;padding:10px 16px;box-shadow:var(--shadow-subtle-3)}.primary:hover{background:#fafafa;border-color:#fff;transform:translateY(-1px)}.text-button,.lb-open,.sources a{color:var(--color-signal-orange)}.text-button:hover,.lb-open:hover,.sources a:hover{color:#ffad70}.options,.badge,.metrics span,.results-count,.role-number{font-family:var(--font-matterfont)}.options{font-size:12px;color:#a1a1a1}.toolbar{margin:32px 0 24px}.cards{gap:8px}.card,.reason,.counter-card{background:#0a0a0a;border:1px solid #262626;border-radius:10px}.card:hover,.counter-card:hover{border-color:#464646;transform:translateY(-2px)}.portrait{background:#000;height:225px}.portrait:after{background:linear-gradient(transparent 25%,#0a0a0a)}.role{font-size:12px;font-weight:500;padding:16px}.hero h2{font-family:var(--font-matterfont);font-size:24px;font-weight:600;letter-spacing:-.7px}.hero small{font-size:9px;color:#a1a1a1}.controls{gap:8px}.reroll,.lock,.lock.active,.lb-actions button,.steam-refresh,.model-controls button,.model-retry{background:#171717;color:#fafafa;border:1px solid #262626;border-radius:8px}.reroll:hover,.lock:hover,.lb-actions button:hover:not(:disabled),.steam-refresh:hover,.model-controls button:hover{background:#262626;border-color:#464646;color:#fafafa}.lock.active{border-color:#fafafa;background:#262626}.reason{padding:16px}.reason h3{font-size:16px;line-height:1.4;font-weight:600;margin-bottom:12px}.reason p{font-size:14px;line-height:1.5}.analysis-top h2{font-size:28px}.badge{font-size:10px;letter-spacing:.4px}.metrics span,.score-pill,.score-pill.muted{background:#171717;border-color:#262626;color:#e5e5e5}.hint{border-color:#262626;padding:24px 0}.hint strong{font-size:12px}.hint p{font-size:13px;line-height:1.5}.legend{font-size:11px}.sources{font-size:12px}.sources summary{color:#a1a1a1}.enemy-slot,.enemy-slot.selected{background:#0a0a0a;border-color:#262626;border-radius:10px}.enemy-slot.active-slot{border-color:#737373}.enemy-slot.drop-over{border-color:#fafafa;background:#171717}.enemy-head h2{font-size:20px}.slot-label strong{font-size:12px}.hero-choice,.hero-choice:hover,.hero-choice[aria-pressed=true]{background:#0a0a0a;border-color:#262626;border-radius:8px;color:#e5e5e5;font-size:12px}.hero-choice:hover{background:#171717;border-color:#464646}.hero-choice[aria-pressed=true]{background:#262626;border-color:#a1a1a1;color:#fafafa}.hero-picker{gap:8px}.hero-choice img{filter:none}.counter-card-head{padding:16px;border-color:#262626}.counter-card h3{font-size:24px;font-weight:600}.counter-card-head>img{border-radius:10px}.counter-card details{background:#0a0a0a;border-color:#262626}.counter-card details summary{font-size:12px}.recommend-label{color:#a1a1a1}.match-chip,.match-chip.unfavorable{background:#171717}.counter-results-note,.quiet{font-size:12px}.counter-card .match-section{padding:16px 16px 0}.counter-card .match-section>small{font-family:var(--font-matterfont);font-size:10px;color:#a1a1a1}.counter-section>h2{font-size:24px}.results-count{font-size:12px;border-color:#262626;border-radius:20px}.role-number{border-radius:9999px;background:#171717;color:#e5e5e5}.match-table td a{color:#ff8833}.match-table{font-size:11px}.lb-profiles{gap:8px}.lb-profiles button,.lb-profiles button:hover,.lb-profiles button[aria-pressed=true]{border-radius:8px;border-color:#262626;background:#0a0a0a;color:#a1a1a1;font-size:12px;padding:10px 16px}.lb-profiles button:hover{background:#171717;color:#fafafa}.lb-profiles button[aria-pressed=true]{background:#262626;border-color:#464646;color:#fafafa}.lb-profiles button>span{font-family:var(--font-matterfont);color:#737373}.lb-profiles small{background:#171717;color:#a1a1a1}.podium-heading .eyebrow{color:#a1a1a1}.podium-heading h2{font-size:36px}.podium-heading p{font-size:13px}.podium-heading .rotation-hint{font-family:var(--font-matterfont);font-size:12px}.podium-stage{border-color:#262626}.podium-base,.podium-1 .podium-base,.podium-2 .podium-base,.podium-3 .podium-base{background:#0a0a0a;border-color:#262626;border-radius:10px 10px 0 0}.podium-base small,.podium-1 .podium-base small{font-family:var(--font-matterfont);font-size:9px;color:#737373}.podium-base strong{font-size:14px}.podium-1 .podium-base strong{font-size:18px}.podium-name,.podium-1 .podium-name{font-family:var(--font-matterfont)}.model-loader{border-color:#262626;border-top-color:#e5e5e5}.model-controls button{min-width:32px;min-height:32px}.model-controls button:first-child,.model-controls button:last-child{border-radius:9999px}.model-retry{background:#171717}.leader-table td,.leader-table tr{background:#0a0a0a;border-color:#262626}.leader-table td:first-child,.leader-table td:last-child{border-color:#262626}.leader-table td:first-child{border-radius:10px 0 0 10px}.leader-table td:last-child{border-radius:0 10px 10px 0}.leader-table thead th{font-family:var(--font-matterfont);font-size:10px;font-weight:600;letter-spacing:.8px;color:#a1a1a1}.leader-table .lb-rank{font-family:var(--font-matterfont)}input[type=search],input[type=url],select,.leader-table textarea,.leader-table input[type=url],.lb-nickname-label input,.lb-picker>summary{background:#0a0a0a;color:#e5e5e5;border-color:#262626;border-radius:10px;font-size:12px}.lb-picker>summary{min-height:64px}.lb-picker summary:hover{background:#171717;border-color:#464646}.lb-picker summary img{filter:none;border-radius:8px}.lb-nickname-label{font-size:10px;letter-spacing:0;color:#a1a1a1}.lb-menu{background:#0a0a0afc;border-color:#464646;border-radius:10px;box-shadow:var(--shadow-md)}.lb-option,.lb-option:hover{background:#171717;border-color:#262626;border-radius:8px;font-size:12px}.lb-option:hover{border-color:#a1a1a1;background:#262626}.lb-open,.steam-state{font-size:11px}.steam-refresh{font-size:11px;padding:8px}.lb-actions .lb-remove{font-size:10px}.leader-table textarea{font-size:12px;line-height:1.5}.lb-toolbar>span,#lb-status{font-size:12px}.lb-actions button{min-width:32px;min-height:32px}footer{border-color:#262626;color:#737373;font-size:10px}.brand span:not(.brand-symbol){color:#fafafa}
#draft-panel{position:relative}.spectral-mark{position:absolute;top:0;right:-8px;width:285px;height:285px;pointer-events:none;opacity:.85;animation:lattice-in 1s ease-out both}.spectral-mark svg{width:100%;height:100%;animation:lattice-breathe 8s ease-in-out infinite}#draft-panel>h1,#draft-panel>.intro{position:relative;max-width:800px}.spectral-mark:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,#0a0a0a00 40%,#0a0a0a 75%)}@keyframes lattice-in{from{opacity:0;transform:translateY(16px)}to{opacity:.85;transform:translateY(0)}}@keyframes lattice-breathe{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@media(max-width:1200px){header{margin-left:32px;margin-right:32px}main{padding-left:32px;padding-right:32px}.spectral-mark{width:230px;right:0;opacity:.55}#draft-panel>h1{font-size:54px;max-width:740px}.hero h2{font-size:21px}.counter-card h3{font-size:21px}}
@media(max-width:1000px){.spectral-mark{display:none}.mode-tabs button{font-size:13px}.reason p{font-size:13px}.reason h3{font-size:14px}.portrait{height:220px}.hero h2{font-size:20px}.lb-profiles button{font-size:11px;padding:10px 12px}}
@media(max-width:800px){.leader-table tr{background:#0a0a0a;border-color:#262626;border-radius:10px}.podium-heading h2{font-size:30px}.counter-card h3{font-size:24px}.leader-table td{border-radius:0!important}.leader-table .lb-rank:before{font-family:var(--font-matterfont)}}
@media(max-width:650px){header{margin:16px 16px 0;padding:0 16px;height:64px}main{padding:24px 16px}.mode-tabs{margin-bottom:40px;padding-bottom:16px;gap:4px}.mode-tabs button{padding:8px;font-size:11px;line-height:18px}h1,#draft-panel>h1{font-size:40px;line-height:1.05;letter-spacing:-1px}.intro{font-size:14px;line-height:1.5}.eyebrow{font-size:9px}.primary{font-size:13px;padding:10px 16px}.options{font-size:10px}.toolbar{margin:24px 0 16px;gap:16px}.portrait{height:205px}.role{font-size:11px;padding:12px}.hero h2{font-size:20px}.hero-choice{font-size:10px}.analysis-top h2{font-size:24px}.badge{font-size:9px}.lb-profiles button{font-size:10px;padding:10px}.podium-heading{padding-top:32px}.podium-heading h2{font-size:28px}.podium-heading .rotation-hint{font-size:10px}.podium-base small,.podium-1 .podium-base small{font-size:7px;letter-spacing:1px}.podium-base strong{font-size:10px}.podium-1 .podium-base strong{font-size:12px}.model-controls button{min-width:24px;min-height:28px}.model-controls button:first-child,.model-controls button:last-child{min-width:28px}.results-heading h2{font-size:28px}.counter-section>h2{font-size:22px}.hint p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.spectral-mark,.spectral-mark svg{animation:none}.spectral-mark{opacity:.85}}
#draft-panel>.toolbar,#draft-panel>.cards,#draft-panel>.legend,#draft-panel>#analysis,#draft-panel>.hint{position:relative;z-index:1}.spectral-mark{z-index:0}
/* A dedicated viewport + control row leaves no shared area with the medal. */
.podium-character,.podium-1 .podium-character{display:grid;grid-template-rows:minmax(0,1fr) 40px;align-items:stretch;justify-content:stretch;gap:8px;padding-bottom:52px;box-sizing:content-box;overflow:visible}
.model-viewport{grid-row:1;position:relative;width:100%;height:100%;min-height:0;overflow:hidden;isolation:isolate}
.hero-canvas,.hero-video{inset:0;width:100%;height:100%;display:block;object-fit:contain;object-position:center center}
.model-controls,.model-loaded:hover .model-controls,.model-loaded:focus-within .model-controls{grid-row:2;position:relative;inset:auto;left:auto;bottom:auto;transform:none;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;opacity:1;z-index:4}
.model-controls button{min-width:40px;min-height:36px;padding:7px 12px;line-height:20px;font-size:12px}.model-controls button:first-child,.model-controls button:last-child{min-width:36px}
.podium-base{z-index:1}.podium-character .model-retry{position:absolute;bottom:52px;z-index:5}.model-failed.video-loaded .model-retry{bottom:52px;opacity:1}.model-failed .model-controls{visibility:hidden;display:flex;pointer-events:none}.model-loader{bottom:calc(50% + 40px)}.model-failed.video-loaded .model-error{top:0;bottom:auto}.model-empty{grid-row:1;align-self:center;justify-self:center;margin:0}
@media(max-width:800px){.podium-character,.podium-1 .podium-character{padding-bottom:44px;gap:8px;grid-template-rows:minmax(0,1fr) 36px}.model-controls{gap:4px;height:36px}.model-controls button{min-width:28px;min-height:32px;padding:5px 7px;font-size:10px}.model-controls button:first-child,.model-controls button:last-child{min-width:30px}.podium-character .model-retry,.model-failed.video-loaded .model-retry{bottom:44px}}
@media(max-width:420px){.model-controls{gap:3px}.model-controls button{padding:4px;min-width:24px;font-size:9px}.model-controls button:first-child,.model-controls button:last-child{min-width:27px}.podium-stage{gap:4px}}
/* Display stage: full-height models touch the upper slab; controls live on the front. */
.podium-stage{padding:0 20px 12px;gap:20px;border-bottom:1px solid #363636;background:radial-gradient(ellipse at 50% 93%,#ffffff08,transparent 55%);align-items:end}.podium-place{min-width:0;position:relative}.podium-person{min-height:85px}.podium-character,.podium-1 .podium-character{display:block;height:340px;padding:0;box-sizing:border-box;overflow:visible;z-index:2}.podium-1 .podium-character{height:410px}.model-viewport{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}.hero-canvas,.hero-video{width:100%;height:100%;object-fit:contain;object-position:center bottom}.model-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0}.podium-base,.podium-1 .podium-base,.podium-2 .podium-base,.podium-3 .podium-base{position:relative;z-index:1;isolation:isolate;height:200px;padding:110px 12px 60px;display:flex;align-items:center;justify-content:flex-start;gap:7px;background:linear-gradient(110deg,#202124 0%,#121315 26%,#191a1d 48%,#0c0d0f 100%);border:1px solid #414246;border-bottom:2px solid #505156;border-radius:7px 7px 2px 2px;box-shadow:inset 1px 0 #ffffff0a,inset -8px 0 20px #0008,0 8px 14px #0009;overflow:visible}.podium-1 .podium-base{height:232px;padding-top:132px;border-color:#766846;background:linear-gradient(110deg,#29271f,#161614 30%,#201f19 65%,#0f100e)}.podium-2 .podium-base{height:210px;border-color:#54616a}.podium-3 .podium-base{height:190px;padding-top:104px;border-color:#6d5141}.podium-base:before{content:'';position:absolute;left:-6px;right:-6px;top:-7px;height:12px;background:linear-gradient(180deg,#53565a,#25272b 40%,#0b0d10);border:1px solid #65696e;border-radius:5px;box-shadow:0 4px 10px #0008;z-index:2}.podium-1 .podium-base:before{border-color:#8d7a4f;background:linear-gradient(#a58b58,#52472d 35%,#242018 80%)}.podium-2 .podium-base:before{border-color:#8b9ca8;background:linear-gradient(#97a8b5,#48555f 35%,#1b2026 80%)}.podium-3 .podium-base:before{border-color:#99755b;background:linear-gradient(#b08a6a,#614633 35%,#241d17 80%)}.podium-base:after{content:'';position:absolute;inset:20px 14px 15px;border:1px solid #ffffff0c;border-top:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent,transparent 18px,#ffffff02 19px,transparent 20px);z-index:-1}.podium-base .place-medal,.podium-1 .podium-base .place-medal,.podium-3 .podium-base .place-medal{top:12px;width:82px;height:94px;filter:drop-shadow(0 4px 8px #0009)}.podium-1 .podium-base .place-medal{top:18px;width:97px;height:112px}.podium-3 .podium-base .place-medal{width:76px;height:88px}.podium-base strong,.podium-1 .podium-base strong{position:relative;z-index:2;font-size:16px;line-height:1.15;color:#eee;font-weight:500}.podium-1 .podium-base strong{font-size:20px}.podium-base small{font-size:8px;letter-spacing:1.7px;color:#8f9399}.podium-base .model-controls,.model-loaded:hover .model-controls,.model-loaded:focus-within .model-controls{position:absolute;left:0;right:0;bottom:14px;top:auto;transform:none;display:flex;justify-content:center;align-items:center;gap:6px;opacity:1;height:34px;z-index:5;visibility:visible}.model-controls button{background:#0a0a0abf;border-color:#4b4c50;font-size:11px;min-height:32px;padding:5px 9px;box-shadow:inset 0 1px #ffffff08}.model-controls button:hover{border-color:#b1b1b1;background:#26272a}.podium-place:has(.model-failed) .model-controls{display:none}.podium-character .model-retry,.model-failed.video-loaded .model-retry{bottom:8px}.model-failed.video-loaded .model-error{top:8px;bottom:auto}.model-loader{bottom:45%}
.award-badge{display:inline-flex;align-items:center;flex-direction:column;gap:2px;min-width:72px;vertical-align:middle}.award-face{display:block;position:relative;width:66px;height:76px}.award-face img{width:100%;height:100%}.award-face b{position:absolute;inset:29px 0 auto;text-align:center;font:600 19px/1.2 Inter,sans-serif;letter-spacing:-1px;color:#e9e4f2;font-variant-numeric:tabular-nums}.award-badge>small{font-size:9px;line-height:1.3;letter-spacing:.7px;text-transform:uppercase;font-weight:500;color:#b2a0d3}.award-top25>small{color:#8aaaca}.award-top50>small{color:#90b5a5}.award-top100>small{color:#8e9caf}.award-ranked>small{color:#959595}.award-face b:where(:not(:first-child)){text-shadow:0 1px 3px #000}.leader-table td:first-child{min-width:85px}
/* Optimized 480px renders keep their aspect ratio, without blowing up small thumbnails. */
.portrait{height:auto;aspect-ratio:1/1.12;background:radial-gradient(ellipse at 50% 40%,#292c30,#111214 58%,#0a0a0a)}.portrait img{display:block;width:100%;height:100%;object-fit:contain;object-position:center center;filter:none;transition:opacity .2s;transform:none!important}.portrait:after{background:linear-gradient(transparent 45%,#0a0a0a 94%)}.hero{bottom:14px}.hero h2{font-size:22px}.card:hover .portrait img{transform:none}
.dota-emblem{position:absolute;top:8px;right:16px;width:250px;height:250px;pointer-events:none;perspective:800px;z-index:0}.dota-emblem-spin{width:100%;height:100%;transform-style:preserve-3d;animation:dota-axis 12s linear infinite}.dota-emblem-spin img{width:100%;height:100%;filter:drop-shadow(0 0 20px #fff1)}@keyframes dota-axis{from{transform:rotateX(-10deg) rotateY(0deg)}to{transform:rotateX(-10deg) rotateY(360deg)}}
@media(max-width:1000px){.podium-character{height:290px}.podium-1 .podium-character{height:350px}.podium-stage{gap:14px;padding:0 8px 10px}.dota-emblem{display:none}.hero h2{font-size:20px}}
@media(max-width:800px){.podium-character,.podium-1 .podium-character{display:block;padding:0;height:250px}.podium-1 .podium-character{height:310px}.podium-base,.podium-2 .podium-base{height:186px;padding:104px 5px 58px}.podium-1 .podium-base{height:212px;padding:119px 5px 58px}.podium-3 .podium-base{height:175px;padding:98px 5px 58px}.podium-base .place-medal,.podium-3 .podium-base .place-medal{width:72px;height:83px;top:14px}.podium-1 .podium-base .place-medal{width:85px;height:98px;top:17px}.podium-base strong{font-size:13px}.podium-1 .podium-base strong{font-size:16px}.podium-base .model-controls{gap:4px;bottom:12px}.model-controls button{padding:5px 7px;min-width:28px;font-size:10px}.award-face{width:57px;height:66px}.award-face b{inset:25px 0 auto;font-size:17px}.award-badge>small{font-size:8px}}
@media(max-width:650px){.podium-stage{gap:7px;padding:0 2px 8px}.podium-character,.podium-1 .podium-character{height:210px;padding:0}.podium-1 .podium-character{height:260px}.podium-base,.podium-2 .podium-base{height:175px;padding-top:94px}.podium-1 .podium-base{height:194px;padding-top:106px}.podium-3 .podium-base{height:165px;padding-top:89px}.podium-base .place-medal,.podium-3 .podium-base .place-medal{width:65px;height:75px;top:12px}.podium-1 .podium-base .place-medal{width:75px;height:86px;top:14px}.podium-base strong{font-size:11px}.podium-1 .podium-base strong{font-size:13px}.podium-base small{font-size:6px;letter-spacing:1px}.podium-base .model-controls{gap:2px;bottom:11px}.model-controls button{min-height:29px;min-width:24px;padding:3px 4px;font-size:9px}.model-controls button:first-child,.model-controls button:last-child{min-width:25px}.podium-base:before{left:-2px;right:-2px}.hero h2{font-size:20px}.leader-table td:first-child{min-width:0}.leader-table .award-badge{flex-direction:row;gap:10px}.award-badge>small{font-size:10px}}
@media(prefers-reduced-motion:reduce){.dota-emblem-spin{animation:none;transform:rotateX(-10deg) rotateY(20deg)}}
.podium-base,.podium-1 .podium-base,.podium-2 .podium-base,.podium-3 .podium-base{box-sizing:border-box}