@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;0,900;1,700;1,800&family=Barlow:wght@400;500;600;700&display=swap');
:root{--ink:#243247;--navy:#172337;--muted:#64748a;--orange:#f69d23;--blue:#2f92d4;--paper:#f4f7fa;--edge:#dce3ea;--green:#198065;--red:#c64d58;--font:'Barlow',Arial,sans-serif;--display:'Barlow Condensed','Arial Narrow',Arial,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:#eef2f6;color:var(--ink);font-family:var(--font);font-size:15px;background-image:linear-gradient(120deg,#e4ecf333,transparent 60%)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #2f92d4;outline-offset:4px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--display);line-height:.98;font-weight:800}h2{font-size:34px;letter-spacing:.01em}h3{font-size:25px}input,select,textarea{border:1px solid #cbd4df;background:#fff;color:var(--ink);border-radius:3px;padding:11px 13px;min-width:0}select{cursor:pointer}input[type=search]{min-width:200px}label{font-size:13px;font-weight:600;letter-spacing:.03em}label select,label input:not([type=radio]),label textarea{display:block;width:100%;margin-top:7px}small{font-weight:400;letter-spacing:0}input::placeholder,textarea::placeholder{color:#8492a4}fieldset{border:0;padding:0;margin:0}.topbar{background:var(--navy);color:#fff;min-height:99px;padding:22px max(calc((100vw - 1280px)/2),32px);display:flex;align-items:center;justify-content:space-between;gap:25px}.hub-link{font-size:11px;letter-spacing:.12em;color:#c1cbd9;font-weight:600}.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:28px;font-weight:800;letter-spacing:.04em}.brand b{color:var(--orange)}.brand small{display:block;font:9px var(--font);letter-spacing:.22em;color:#a7b6c9;margin-top:5px}.ow-mark{border:5px solid #e9eef4;border-top-color:var(--orange);border-radius:50%;width:45px;height:45px;display:grid;place-items:center;font-size:42px;line-height:1;font-weight:900;color:#fff}.storage-label{font-size:9px;letter-spacing:.14em;color:#a9b8cb;white-space:nowrap}.storage-label i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#76cfae;margin-right:7px}.main-nav{min-height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 max(calc((100vw - 1280px)/2),32px);gap:16px;background:#fff;border-bottom:1px solid var(--edge);box-shadow:0 2px 10px #1b304b05}.main-nav>div{display:flex;align-self:stretch;gap:32px}.main-nav a{font:700 17px var(--display);letter-spacing:.07em;padding:22px 0 18px;white-space:nowrap;border-bottom:4px solid transparent}.main-nav a.active{border-bottom-color:var(--orange);color:#152338}.new-label{display:inline-block;font:700 8px var(--font);padding:3px 4px;background:#fff0d8;color:#b87912;vertical-align:middle;margin-left:5px}.text-button{font-size:10px;font-weight:700;letter-spacing:.08em;background:none;border:0;color:#64748a;padding:10px;white-space:nowrap}.text-button:hover{color:var(--ink)}main{max-width:1344px;margin:auto;padding:28px 32px 50px}.hero-banner{min-height:405px;position:relative;background-image:linear-gradient(90deg,#14233dfc 0%,#1c2e46f2 36%,#293f5d38 70%,#293f5d00 100%),url('assets/tracer-scene.jpg');background-size:cover;background-position:center;overflow:hidden;border-radius:4px;box-shadow:0 10px 28px #1b304b15}.hero-banner:after{content:'';position:absolute;width:140px;height:6px;background:var(--orange);right:-25px;bottom:30px;transform:rotate(-45deg)}.banner-content{padding:40px 44px;color:#fff;position:relative;z-index:1}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.19em;line-height:1.5;color:#7b899b;margin-bottom:8px}.banner-content .eyebrow{color:var(--orange)}.hero-banner h1{font-size:76px;letter-spacing:-.01em}.hero-banner h1 em{font-style:italic;color:var(--orange)}.banner-content>p:not(.eyebrow){color:#c3cfdd;font-size:15px;line-height:1.6;margin:17px 0 23px}.button-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:26px;font:700 18px var(--display);letter-spacing:.06em;border:1px solid transparent;padding:13px 22px;border-radius:3px;transition:background .15s,transform .15s;text-align:center}.button:hover{transform:translateY(-2px)}.primary{color:#192a40;background:var(--orange);box-shadow:0 3px 0 #d88415}.primary:hover{background:#ffb43a}.ghost{color:#e7edf4;border-color:#8e9db055;background:#ffffff09}.secondary{border-color:#cbd5df;background:#fff;color:#45556c}.secondary:hover{background:#e8eef5}.banner-caption{display:block;font-size:8px;letter-spacing:.19em;color:#91a3b9;margin-top:22px}.banner-corner{position:absolute;right:26px;top:22px;color:#ffffffc0;font-size:9px;letter-spacing:.17em}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:32px 0 18px}.compact-label{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px}.compact-label select{width:auto;padding:8px 12px;margin:0;font-size:12px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.metric{background:#fff;position:relative;border:1px solid var(--edge);border-radius:4px;padding:22px 24px;border-top:3px solid #b4c1d0}.metric:nth-child(2){border-top-color:var(--orange)}.metric:nth-child(3){border-top-color:#7eb6d8}.metric:nth-child(4){border-top-color:#91c6b1}.metric-label{font:700 14px var(--display);letter-spacing:.09em;color:#7a899b}.metric-value{font:800 51px var(--display);margin:6px 0;line-height:1}.metric small{font-size:11px;color:#8190a1}.overview-columns{display:grid;grid-template-columns:1.05fr .9fr 1.1fr;gap:18px;margin-top:22px}.panel{background:#fff;border:1px solid var(--edge);border-radius:4px;padding:24px}.panel-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:20px}.panel-heading .eyebrow{font-size:8px;margin-bottom:6px}.subtle{color:var(--muted);font-size:12px;line-height:1.7}.small-link{font-size:9px;letter-spacing:.06em;font-weight:700;color:#4c789b}.average-item{display:flex;justify-content:space-between;align-items:center;margin:18px 0}.average-item>span{display:flex;align-items:center;gap:10px;font:600 16px var(--display);letter-spacing:.03em}.average-item i{width:7px;height:21px;transform:skew(-12deg);background:var(--blue)}.average-item.healing i{background:#64b397}.average-item.mitigation i{background:#b19bd9}.average-item strong{font:700 27px var(--display)}.timed-averages{border-top:1px solid var(--edge);padding-top:10px;font-size:10px}.map-spotlight{min-height:278px;position:relative;overflow:hidden;background:#1e3047;color:#fff;background-size:cover;background-position:center}.map-spotlight .eyebrow{color:#ffbf60}.map-spotlight h3{font-size:36px;margin:12px 0}.spotlight-stats{display:flex;gap:20px;margin-top:26px}.spotlight-stats strong{display:block;font:800 40px var(--display)}.spotlight-stats small{color:#d1dfed;font-size:10px;letter-spacing:.07em}.spotlight-note{font-size:10px;color:#b6c9dd;margin-top:17px;line-height:1.6}.empty-state{padding:35px 15px;text-align:center;color:#718198;font-size:13px;line-height:1.8}.empty-state h3{font-size:26px;color:var(--ink);margin-bottom:10px}.empty-state .button{margin-top:17px}.map-spotlight .empty-state{color:#c0cfdf;padding:12px 0;text-align:left}.map-spotlight .empty-state h3{color:#fff}.recent-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #e9eef4}.recent-row:last-child{border:0}.recent-row img{width:38px;height:38px;object-fit:cover;background:#e9eff5;border-radius:3px}.recent-row .row-main{flex:1}.recent-row strong{display:block;font-size:12px}.recent-row small{font-size:10px;color:#7a8a9d}.result-pill{font:700 11px var(--display);padding:5px 8px;letter-spacing:.07em;border-radius:2px;white-space:nowrap}.result-pill.win{color:#217961;background:#e1f2eb}.result-pill.loss{color:#bd4553;background:#fbe7e9}.result-pill.draw{color:#6a6b8f;background:#ededf5}.table-wrap{padding:0;overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}th{text-align:left;font:700 12px var(--display);letter-spacing:.08em;color:#7c8c9d;background:#f8fafc;padding:16px 22px;border-bottom:1px solid var(--edge)}td{padding:17px 22px;border-bottom:1px solid #edf0f4}tr:last-child td{border:0}td strong{font-weight:600}td small{display:block;font-size:10px;color:#8a98a8;margin-top:3px}.winrate-bar{width:70px;background:#e8edf3;height:4px;margin-top:6px;border-radius:4px;overflow:hidden}.winrate-bar span{display:block;height:100%;background:var(--orange)}.page-title{font-size:57px}.steps{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;margin:26px 0 30px;background:#e3e9f0;border-radius:4px;overflow:hidden}.steps button{background:transparent;border:0;width:100%;text-align:left;padding:19px 24px;color:#8493a7;font:700 20px var(--display)}.steps button span{margin-left:8px}.steps button.active{background:var(--navy);color:#fff;box-shadow:inset 0 -4px var(--orange)}.steps button.complete{color:#526d86;background:#dbe5ed}.stage-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:26px 0 24px}.stage-heading>p,.stage-heading p:not(.eyebrow){color:var(--muted);font-size:13px}.stage-heading input{max-width:260px}.role-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.role-card{height:410px;position:relative;text-align:left;color:#fff;overflow:hidden;background:#233850;border:0;border-radius:4px;padding:28px;isolation:isolate;transition:transform .2s,box-shadow .2s}.role-card:before{content:'';position:absolute;inset:0;background-image:linear-gradient(0deg,#182b46 3%,#172c4480 40%,#172b4400 75%),var(--scene);background-size:auto 100%;background-position:67% 50%;z-index:-1;transition:scale .25s}.role-card:hover{transform:translateY(-6px);box-shadow:0 10px 25px #203d5625}.role-card:hover:before{scale:1.05}.role-card>img{position:absolute;left:26px;top:25px;width:36px;height:36px;filter:brightness(0) invert(1);opacity:.9}.role-card .role-text{position:absolute;left:27px;right:27px;bottom:30px}.role-card h3{font-size:56px;font-style:italic}.role-card p{color:#ccd7e3;margin:10px 0;font-size:13px;line-height:1.6}.role-card .role-go{position:absolute;right:0;bottom:5px;color:var(--orange);font-size:27px}.role-card small{color:var(--orange);font:700 12px var(--display);letter-spacing:.1em}.hero-select-layout{display:grid;grid-template-columns:1fr 270px;gap:28px;align-items:start}.hero-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:15px;padding:4px}.hero-card{position:relative;background:#dfe7ef;border:3px solid #fff;border-radius:4px;padding:0;box-shadow:0 3px 8px #263a5310;overflow:hidden;transition:transform .15s,border-color .15s;color:var(--ink)}.hero-card img{width:100%;aspect-ratio:1;display:block;object-fit:cover;transition:scale .2s}.hero-card .hero-name{display:block;background:#fff;padding:9px 3px;font:700 17px var(--display);line-height:1.15;text-transform:uppercase}.hero-card:hover{transform:translateY(-4px);border-color:#f5bd6d}.hero-card:hover img{scale:1.04}.hero-card[aria-pressed=true]{border-color:var(--orange);outline:2px solid #fff;outline-offset:2px;transform:translateY(-5px);box-shadow:0 6px 16px #d78b3033}.hero-card[aria-pressed=true] .hero-name{background:var(--orange);color:#1a2e45}.hero-detail{background:linear-gradient(150deg,#2c4360,#18283e);border-radius:5px;min-height:355px;color:#fff;padding:25px;position:sticky;top:20px}.hero-detail>img{width:100%;max-height:240px;object-fit:contain;filter:drop-shadow(0 15px 17px #08122266)}.hero-detail .eyebrow{color:#f7bb65;margin:12px 0 8px}.hero-detail h3{font-size:42px;font-style:italic}.hero-detail p:not(.eyebrow){color:#b0c2d6;font-size:12px;line-height:1.7;margin-top:14px}.hero-detail .blank-mark{font-size:95px;color:#7189a333;display:block;text-align:center;margin-top:35px}.stage-actions{display:flex;justify-content:space-between;gap:16px;margin-top:30px}.inline-filters{display:flex;gap:10px}.map-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.map-card{padding:0;border:3px solid transparent;border-radius:4px;position:relative;aspect-ratio:1.7;overflow:hidden;text-align:left;background:linear-gradient(135deg,#55718b,#21364d);color:#fff;transition:transform .15s,border-color .15s}.map-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.map-card:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#14273de6)}.map-card .map-card-label{position:absolute;bottom:13px;left:15px;right:10px;z-index:1}.map-card strong{display:block;font:700 23px var(--display);text-transform:uppercase}.map-card small{font-size:8px;letter-spacing:.15em;color:#e4e9ef}.map-card[aria-pressed=true]{border-color:var(--orange);outline:2px solid #fff;outline-offset:2px;transform:translateY(-3px)}.map-card:hover{transform:translateY(-3px)}.match-selection{display:flex;align-items:center;padding:20px 25px;gap:18px;margin-bottom:20px;border-radius:4px;background:linear-gradient(90deg,#182c47f7,#18304abe),var(--map-image);background-position:center;background-size:cover;color:#fff}.match-selection img{width:76px;height:76px;object-fit:cover;background:#dce6ee;border-radius:4px;border:2px solid #fff}.match-selection h3{font-size:37px}.match-selection p{color:#c3d0df;font-size:13px;margin-top:7px}.match-selection .selection-map{margin-left:auto;font:700 30px var(--display);text-transform:uppercase;text-align:right}.match-selection .selection-map small{display:block;font:10px var(--font);letter-spacing:.1em;margin-top:8px;color:#c4d2e2}.match-form{max-width:950px;margin:auto}.form-heading{margin-bottom:25px}.result-options legend{font-size:11px;color:#7c8ca0;font-weight:600;margin-bottom:10px}.result-options{display:flex;gap:12px}.result-options label{flex:1;position:relative}.result-options input{position:absolute;opacity:0;left:10px;top:10px}.result-options span{display:block;padding:17px;border:2px solid #e0e6ed;text-align:center;font:700 23px var(--display);border-radius:3px}.result-options input:focus-visible+span{outline:3px solid var(--blue);outline-offset:3px}.result-win input:checked+span{border-color:#4b9e86;background:#e5f3ed;color:#287c63}.result-loss input:checked+span{border-color:#cf7882;background:#fbeaec;color:#b34c59}.result-draw input:checked+span{border-color:#9293bb;background:#efeff8;color:#6a6b92}.stat-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:29px 0}.stat-fields label{font:700 15px var(--display);letter-spacing:.06em}.stat-fields input{font:700 40px var(--display);padding:15px;border:1px solid #d6dfe9;border-top:3px solid var(--blue)}.stat-fields .healing-field input{border-top-color:#65ad94}.stat-fields .mit-field input{border-top-color:#a18ac4}.stat-fields small{display:block;color:#8291a3;font:11px var(--font);margin-top:8px}.form-details{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:25px 0}.form-details label{font-size:11px}.notes-label{display:block;font-size:11px}.form-message{font-size:12px;line-height:1.6;color:var(--red);margin-top:15px}.predictor-banner{padding:32px 0 30px}.predictor-banner .eyebrow{color:#b97a1c}.predictor-banner p:not(.eyebrow){margin-top:16px;color:var(--muted)}.predictor-controls{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:22px}.predictor-controls label{font:600 14px var(--display);letter-spacing:.06em}.recommendation-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:25px 0}.recommendation{background:#fff;border:1px solid var(--edge);border-top:4px solid #c4cfdb;border-radius:4px;overflow:hidden;position:relative}.recommendation:first-child{border-top-color:var(--orange)}.rec-top{display:flex;align-items:center;padding:23px;gap:16px;background:linear-gradient(130deg,#dce7f2,#f6f8fb)}.rec-top img{width:95px;height:95px;object-fit:cover}.rec-top h3{font-size:34px}.rec-top small{display:block;font:700 10px var(--font);letter-spacing:.07em;color:#698099;margin-bottom:7px}.rec-body{padding:21px}.rec-chance{font:800 56px var(--display);display:block}.rec-body>small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.rec-body p{font-size:12px;color:#738399;line-height:1.7;margin:15px 0}.rec-body .button{font-size:14px;width:100%;padding:10px}.evidence-badge{display:inline-block;font-size:9px;font-weight:600;padding:5px 7px;background:#fff1d9;color:#aa751e;border-radius:2px;margin-top:12px}.evidence-badge.established{background:#e5f1eb;color:#39876b}.matchup-panel{display:grid;grid-template-columns:1fr 240px;gap:20px;margin-top:26px}.matchup-panel h2{font-size:32px}.matchup-panel label{font-size:11px}.matchup-panel .subtle{margin-top:12px}#matchup-result{grid-column:1/-1;border-top:1px solid var(--edge);padding-top:22px}.matchup-stats{display:flex;gap:45px;align-items:center}.matchup-stats strong{font:800 55px var(--display);display:block}.matchup-stats small{font-size:11px;color:var(--muted)}.matchup-description{font-size:12px;color:var(--muted);line-height:1.8;margin-top:15px}.method{margin:25px 0;padding:15px 0;color:var(--muted);font-size:12px;line-height:1.9}.method summary{cursor:pointer;font-weight:600}.method p{margin-top:12px;max-width:900px}.history-filters{display:flex;flex-wrap:wrap;gap:15px;align-items:end;padding:18px}.history-filters label{flex:1;min-width:130px;font-size:10px}.history-filters select{font-size:12px}.history-count{font-size:12px;color:var(--muted);margin:22px 0 15px}.history-row{display:grid;grid-template-columns:62px minmax(140px,1.1fr) minmax(100px,.9fr) repeat(3,.65fr) auto;gap:20px;align-items:center;background:#fff;border:1px solid var(--edge);border-left:4px solid #bed7d0;padding:17px 20px;margin-bottom:11px;border-radius:3px}.history-row.loss{border-left-color:#dba8b0}.history-row.draw{border-left-color:#b9b9d2}.history-portrait{width:56px;height:56px;border-radius:3px;background:#e1e9f2;object-fit:cover}.history-hero strong{font:700 24px var(--display);display:block}.history-hero small,.history-map small,.history-stat small{display:block;font-size:9px;color:#7d8fa3;margin-top:4px}.history-map strong{display:block;font-size:12px;margin-top:9px}.history-stat strong{font:700 26px var(--display)}.history-actions{display:flex;gap:5px}.history-actions button{padding:8px;background:#f0f4f8;border:0;color:#5d748b;font-size:11px;border-radius:3px}.history-actions button:hover{background:#e0e8f2}.history-note{grid-column:2/-1;color:#728196;font-size:12px;line-height:1.7;overflow-wrap:anywhere}.pagination{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:28px}.pagination .button{font-size:13px}.pagination span{font-size:12px;color:var(--muted)}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#172d45;color:#fff;padding:17px 20px;border-left:4px solid var(--orange);border-radius:4px;box-shadow:0 10px 35px #15283c50;max-width:calc(100% - 30px);width:max-content;z-index:10;display:flex;align-items:center;gap:16px;font-size:13px}.toast button{background:none;color:var(--orange);border:0;font-weight:700;font-size:12px}.toast #toast-close{color:#a8bacb;font-size:20px}footer{max-width:1280px;margin:auto;border-top:1px solid #d7e0e9;padding:24px 0 30px;display:flex;justify-content:space-between;gap:25px;color:#8795a5;font-size:9px;line-height:1.7;letter-spacing:.02em}footer>span:first-child{white-space:nowrap;font-weight:600}footer b{color:#5f768f}footer a{text-decoration:underline}.import-review{background:#fff8e9;border:1px solid #e6c993;padding:20px;border-radius:4px;margin:20px 0}.import-review p{font-size:13px;line-height:1.7;margin-bottom:12px}.import-review .button{font-size:14px;padding:10px 15px}
@media(min-width:1500px){.hero-banner{min-height:430px}.banner-content{padding:42px 48px}.hero-banner h1{font-size:82px}}
@media(max-width:1050px){.topbar{padding:20px 25px}.brand{font-size:24px}.storage-label{display:none}.main-nav{padding:0 25px}.main-nav>div{gap:24px}.main-nav .text-button{display:none}main{padding:24px}.overview-columns{grid-template-columns:1fr 1fr}.overview-columns>.panel:last-child{grid-column:1/-1}.map-grid{grid-template-columns:repeat(3,1fr)}.hero-select-layout{grid-template-columns:1fr 220px}.hero-detail{padding:18px}.history-row{gap:13px;grid-template-columns:48px 1.2fr 1fr repeat(3,.65fr) auto}.history-portrait{width:44px;height:44px}.history-actions{flex-direction:column}.role-card{height:350px;padding:20px}.role-card h3{font-size:46px}.role-card .role-text{left:20px;right:20px}.recommendation-list{gap:12px}.rec-top{padding:14px;gap:10px}.rec-top img{width:68px;height:68px}.rec-top h3{font-size:28px}.rec-body{padding:15px}footer{margin:0 24px}}
@media(max-width:700px){.topbar{padding:17px 18px;min-height:88px;gap:14px}.brand{font-size:22px;gap:9px}.brand small{font-size:7px;letter-spacing:.12em}.ow-mark{width:34px;height:34px;border-width:4px;font-size:30px}.hub-link{font-size:8px;max-width:65px;line-height:1.7}.main-nav{padding:0 17px;min-height:53px;overflow-x:auto}.main-nav>div{gap:23px}.main-nav a{font-size:14px;padding:18px 0 14px}.new-label{display:none}main{padding:18px 15px 35px}.hero-banner{min-height:380px;background-position:58% 50%;background-image:linear-gradient(90deg,#14233df5,#1b2c45c9 55%,#293f5d20),url('assets/tracer-scene.jpg')}.banner-content{padding:34px 24px}.hero-banner h1{font-size:62px}.banner-content>p:not(.eyebrow){font-size:13px;margin:18px 0 23px}.banner-content .button{padding:12px 15px;font-size:16px;gap:12px}.banner-corner{display:none}.banner-caption{font-size:7px}.eyebrow{font-size:8px}.section-heading{margin-top:27px;gap:10px}h2{font-size:28px}.metrics{grid-template-columns:repeat(2,1fr);gap:11px}.metric{padding:17px 19px}.metric-label{font-size:12px}.metric-value{font-size:43px}.metric small{font-size:9px}.overview-columns{grid-template-columns:1fr;gap:15px;margin-top:16px}.overview-columns>.panel:last-child{grid-column:auto}.panel{padding:21px}.map-spotlight{min-height:255px}.compact-label{font-size:10px}.compact-label select{font-size:11px;padding:8px}.page-title{font-size:43px}.section-heading>.button{font-size:13px;padding:11px}.steps{margin:22px 0}.steps button{font-size:15px;padding:14px 10px;text-align:center}.steps button span{display:block;font-size:12px;margin:6px 0 0}.stage-heading{align-items:start;flex-direction:column;gap:14px}.stage-heading input{max-width:none;width:100%}.stage-heading h2{font-size:30px}.role-cards{grid-template-columns:1fr;gap:15px}.role-card{height:190px}.role-card:before{background-size:cover;background-position:center 35%;background-image:linear-gradient(90deg,#172c44f0,#172c4488 50%,#172c4400 85%),var(--scene)}.role-card>img{left:auto;right:20px;top:18px;width:24px;height:24px}.role-card .role-text{bottom:23px;max-width:260px}.role-card h3{font-size:46px}.role-card p{font-size:12px;max-width:225px;margin:8px 0}.role-card .role-go{right:-45px}.hero-select-layout{grid-template-columns:1fr;gap:15px}.hero-grid{grid-template-columns:repeat(3,1fr);gap:12px}.hero-detail{position:static;min-height:0;display:grid;grid-template-columns:90px 1fr;gap:0 16px;align-items:center;padding:15px}.hero-detail>img{grid-row:1/4;height:95px}.hero-detail .eyebrow{margin:0}.hero-detail h3{font-size:34px}.hero-detail p:not(.eyebrow){margin-top:7px;font-size:11px}.hero-detail .blank-mark{grid-row:1/4;font-size:60px;margin:0}.hero-card .hero-name{font-size:16px}.stage-actions .button{font-size:13px;padding:13px 14px;gap:5px}.inline-filters{width:100%;flex-wrap:wrap}.inline-filters input{flex:1}.inline-filters select{flex:1}.map-grid{grid-template-columns:repeat(2,1fr);gap:12px}.map-card{aspect-ratio:1.45}.map-card strong{font-size:22px}.map-card .map-card-label{left:11px;bottom:11px}.map-card small{font-size:7px}.match-selection{padding:15px;gap:12px;flex-wrap:wrap}.match-selection img{width:60px;height:60px}.match-selection h3{font-size:30px}.match-selection .selection-map{width:100%;text-align:left;font-size:26px;padding-top:10px;border-top:1px solid #ffffff22;margin-top:3px}.match-selection .selection-map small{display:inline-block;margin-left:10px;font-size:8px}.match-form{padding:20px}.result-options{gap:8px}.result-options span{padding:13px 6px;font-size:20px}.stat-fields{gap:10px;margin:23px 0}.stat-fields label{font-size:12px}.stat-fields input{font-size:29px;padding:12px 9px}.stat-fields small{font-size:9px;line-height:1.5}.form-details{grid-template-columns:1fr;gap:18px}.form-details label{font-size:12px}.predictor-controls{grid-template-columns:1fr;gap:17px}.predictor-banner{padding:20px 0 25px}.predictor-banner p:not(.eyebrow){font-size:13px;line-height:1.7}.recommendation-list{grid-template-columns:1fr;gap:15px}.recommendation{display:grid;grid-template-columns:130px 1fr}.rec-top{display:flex;flex-direction:column;align-items:start;gap:10px;justify-content:center}.rec-top img{width:100px;height:100px}.rec-top h3{font-size:30px}.rec-body{padding:18px}.rec-body p{font-size:11px;margin:12px 0}.rec-chance{font-size:45px}.matchup-panel{grid-template-columns:1fr}.matchup-stats{gap:25px;flex-wrap:wrap}.matchup-stats strong{font-size:44px}.history-filters{gap:13px;padding:16px}.history-filters label{min-width:120px}.history-filters .text-button{margin-left:auto}.history-row{grid-template-columns:48px 1fr 1fr;padding:15px;gap:15px 12px}.history-hero{grid-column:2}.history-map{grid-column:3}.history-stat{grid-row:2}.history-stat strong{font-size:25px}.history-actions{grid-column:1/-1;flex-direction:row;justify-content:end;border-top:1px solid #edf0f4;padding-top:10px}.history-actions button{padding:8px 13px}.history-note{grid-column:1/-1}.history-hero strong{font-size:22px}.history-map strong{font-size:11px}.pagination{gap:14px}.pagination .button{font-size:12px;padding:10px 14px}.history-count{font-size:11px}.toast{font-size:12px;padding:14px;gap:10px}footer{margin:0 15px;flex-direction:column;gap:10px;font-size:8px}.table-wrap{padding:0}.match-form .stage-actions{flex-wrap:wrap}.match-form .stage-actions .button{flex:1}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

#view-history>.section-heading{align-items:center;flex-wrap:wrap}@media(max-width:700px){#view-history>.section-heading .button-row{width:100%;gap:8px}#view-history>.section-heading .button-row .button{font-size:13px;padding:11px 14px;flex:1}}