@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--bg:#eef0e9;--paper:#fafbf6;--ink:#07110d;--muted:#647069;--line:#cdd3cc;--acid:#b8ff5a;--green:#0c5940;--amber:#ff9d45;--red:#e95a4f;--max:1220px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}.topbar{height:68px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - var(--max))/2));position:sticky;top:0;z-index:20;border-bottom:1px solid #2f3d35}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;font-family:'Manrope';font-weight:800}.brand b{font-size:13px;color:var(--acid);padding-left:9px;border-left:1px solid #536159}.brand sup{font-size:8px}.signal{width:27px;height:27px;position:relative;display:flex;align-items:center;gap:2px}.signal i{display:block;width:4px;border-radius:5px;background:var(--acid);align-self:flex-end}.signal i:nth-child(1){height:7px}.signal i:nth-child(2){height:14px}.signal i:nth-child(3){height:21px}.dataset-status{font-size:12px;color:#aebbb3;display:flex;align-items:center;gap:6px}.dataset-status strong{color:#fff}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 5px rgba(184,255,90,.12)}main{width:min(var(--max),calc(100% - 32px));margin:auto}.intro{padding:72px 0 50px;display:grid;grid-template-columns:1.25fr .75fr;gap:80px;align-items:end}.eyebrow,.step{font:700 11px 'Manrope';letter-spacing:.13em;text-transform:uppercase;color:var(--green)}h1,h2,h3{font-family:'Manrope';margin:0;letter-spacing:-.04em}h1{font-size:clamp(48px,7vw,88px);line-height:.95;margin-top:17px}h1 em{font-style:normal;color:var(--green)}.intro-copy{font-size:19px;line-height:1.55;color:var(--muted);margin:0 0 7px}.tabs{height:58px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);display:flex;align-items:stretch;gap:3px}.tabs button{border:0;background:transparent;padding:0 22px;font-weight:700;cursor:pointer;border-bottom:4px solid transparent}.tabs button.active{border-bottom-color:var(--green);color:var(--green)}.tabs a{margin-left:auto;align-self:center;font-size:13px;font-weight:700}.view{display:none;padding:34px 0 80px}.view.active{display:block}.control-panel{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:24px}.picker-head,.mode-row,.metrics-head,.rank-head{display:flex;justify-content:space-between;align-items:center;gap:25px}.picker-head>div,.mode-row>div,.metrics-head>div,.rank-head>div{display:flex;align-items:center;gap:13px}.picker-head h2,.mode-row h2,.metrics-head h2,.rank-head h2{font-size:23px}.text-btn{border:0;background:none;text-decoration:underline;cursor:pointer;color:var(--muted)}.search-wrap{margin-top:21px;height:62px;border:2px solid var(--ink);border-radius:15px;background:white;display:flex;align-items:center;padding:0 17px;gap:13px}.search-wrap:focus-within{box-shadow:0 0 0 4px rgba(12,89,64,.12)}.search-wrap svg{width:22px;fill:none;stroke:currentColor;stroke-width:2}.search-wrap input{border:0;outline:0;font:600 18px 'DM Sans';width:100%;background:none}.search-wrap kbd{font:600 12px 'DM Sans';border:1px solid var(--line);border-radius:5px;padding:4px 7px;color:var(--muted)}.search-results{position:absolute;left:24px;right:24px;top:122px;z-index:15;background:white;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 45px rgba(9,25,17,.17);max-height:380px;overflow:auto;padding:7px}.result-btn{width:100%;display:flex;align-items:center;gap:13px;padding:10px;border:0;background:white;border-radius:9px;text-align:left;cursor:pointer}.result-btn:hover,.result-btn:focus{background:#edf3eb;outline:none}.result-btn img,.quick-phone img,.phone-photo{width:46px;height:46px;object-fit:contain;background:#f1f2ed;border-radius:9px}.result-btn b{display:block}.result-btn span{color:var(--muted);font-size:12px}.brand-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.chip{border:1px solid var(--line);background:white;padding:8px 12px;border-radius:99px;cursor:pointer;font-weight:700}.chip span{color:var(--muted);margin-left:4px}.chip.active{background:var(--ink);color:white;border-color:var(--ink)}.chip.active span{color:var(--acid)}.quick-phones{display:flex;gap:9px;overflow:auto;margin-top:17px;padding-bottom:3px}.quick-phone{border:1px solid var(--line);background:white;border-radius:13px;padding:8px 13px 8px 8px;display:flex;align-items:center;gap:9px;min-width:max-content;cursor:pointer}.quick-phone b{font-size:13px}.mode-row{margin:38px 0 20px}.mode-switch{display:flex;border:1px solid var(--line);border-radius:10px;padding:4px;background:#e2e6df}.mode-switch button{border:0;background:transparent;border-radius:7px;padding:9px 13px;font-weight:700;cursor:pointer}.mode-switch button.active{background:white;box-shadow:0 2px 7px rgba(0,0,0,.08)}.empty-state{border:1px dashed #9ca8a0;border-radius:22px;text-align:center;padding:67px 20px;background:rgba(255,255,255,.3)}.empty-state h2{font-size:28px;margin-top:22px}.empty-state p{color:var(--muted)}.empty-rings{width:100px;height:100px;position:relative;margin:auto;display:grid;place-items:center}.empty-rings span{position:absolute;border:1px solid #9cad9f;border-radius:50%;inset:0}.empty-rings span:nth-child(2){inset:15px}.empty-rings span:nth-child(3){inset:30px;background:var(--acid);border-color:var(--ink)}.empty-rings b{z-index:2;font-size:20px}.phone-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.phone-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;min-width:0}.phone-card.winner{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}.phone-card .remove{position:absolute;top:10px;right:10px;border:0;background:#e4e8e2;width:28px;height:28px;border-radius:50%;cursor:pointer}.phone-photo{width:76px;height:76px;border-radius:14px}.phone-card .brand-name{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-top:15px}.phone-card h3{font-size:20px;line-height:1.15;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phone-card .model-meta{font-size:12px;color:var(--muted);margin-top:7px}.score-badge{display:inline-flex;margin-top:15px;padding:6px 9px;border-radius:7px;background:#e5eadf;font-size:12px;font-weight:700}.metrics-head{margin:43px 0 17px}.legend{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}.legend i,.legend span{width:18px;height:5px;background:var(--acid);display:inline-block}.legend span{background:var(--red);margin-left:10px}.metric-row{display:grid;grid-template-columns:190px 1fr;gap:20px;padding:18px 0;border-top:1px solid var(--line)}.metric-label b{font:700 14px 'Manrope';display:block}.metric-label span{font-size:11px;color:var(--muted)}.metric-values{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.metric-cell{min-width:0}.value-line{display:flex;justify-content:space-between;align-items:end}.value-line b{font:800 25px 'Manrope';letter-spacing:-.04em}.value-line small{color:var(--muted)}.bar{height:7px;background:#dce1db;border-radius:9px;overflow:hidden;margin-top:8px}.bar i{display:block;height:100%;border-radius:9px}.share-row{display:flex;align-items:center;gap:15px;margin-top:25px}.primary-btn{background:var(--ink);color:white;border:0;border-radius:10px;padding:13px 18px;font-weight:700;cursor:pointer}.rank-head{align-items:flex-end;margin-bottom:25px}.rank-head>div:first-child{display:block}.rank-head p{margin:6px 0 0;color:var(--muted)}.rank-controls{display:flex;gap:12px}.rank-controls label{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--muted)}select{display:block;margin-top:5px;border:1px solid var(--line);border-radius:8px;padding:9px;background:white;font:600 13px 'DM Sans'}.rank-table-wrap{background:var(--paper);border:1px solid var(--line);border-radius:17px;overflow:auto}table{border-collapse:collapse;width:100%;min-width:700px}th,td{text-align:left;padding:14px 17px;border-bottom:1px solid var(--line)}th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}td:first-child{font:800 18px 'Manrope'}.rank-phone{display:flex;align-items:center;gap:10px}.rank-phone img{width:42px;height:42px;object-fit:contain;background:#eef0eb;border-radius:8px}.rank-phone span{display:block;font-size:11px;color:var(--muted)}.rank-value{font:800 21px 'Manrope'}.limit-track{height:7px;background:#e1e4df;border-radius:10px;width:150px}.limit-track i{display:block;height:100%;border-radius:10px}.add-small{border:1px solid var(--line);background:white;border-radius:8px;padding:7px 10px;cursor:pointer}.context{margin-bottom:80px;background:var(--ink);color:white;border-radius:20px;padding:27px;display:flex;justify-content:space-between;align-items:center;gap:40px}.context strong{font:700 17px 'Manrope'}.context p{margin:7px 0 0;color:#aab8af;font-size:13px;max-width:780px}.context a{color:var(--acid);font-weight:700;font-size:13px;white-space:nowrap}footer{background:#07110d;color:#95a39a;padding:28px max(20px,calc((100vw - var(--max))/2));display:flex;justify-content:space-between;font-size:12px}footer a{color:white}
@media(max-width:760px){.topbar{height:60px}.dataset-status{font-size:0}.dataset-status strong{font-size:12px}.intro{grid-template-columns:1fr;gap:24px;padding:46px 0 34px}.intro-copy{font-size:16px}.tabs button{padding:0 13px}.tabs a{display:none}.view{padding-top:20px}.control-panel{padding:15px;border-radius:16px}.picker-head h2,.mode-row h2,.metrics-head h2{font-size:19px}.search-wrap{height:56px}.search-results{left:15px;right:15px;top:109px}.quick-phones{margin-right:-15px}.mode-row{display:block}.mode-switch{margin-top:14px}.mode-switch button{flex:1}.empty-state{padding:47px 14px}.phone-cards{grid-template-columns:repeat(2,1fr)}.phone-card{padding:14px}.phone-card:nth-child(n+3){display:none}.phone-photo{width:59px;height:59px}.metrics-head{display:block}.legend{margin-top:13px}.metric-row{grid-template-columns:1fr;gap:10px}.metric-values{grid-template-columns:repeat(2,1fr)}.metric-cell:nth-child(n+3){display:none}.value-line b{font-size:21px}.rank-head{display:block}.rank-controls{margin-top:18px;overflow:auto}.context{display:block}.context a{display:inline-block;margin-top:18px}.brand-filters{flex-wrap:nowrap;overflow:auto;margin-right:-15px}.brand-filters .chip{min-width:max-content}footer{display:block}footer span{display:block;margin:5px 0}}
@media(max-width:420px){main{width:min(100% - 20px,var(--max))}.brand b{display:none}h1{font-size:43px}.phone-card h3{font-size:16px}.phone-card .model-meta{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.selectors{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;margin-top:22px}.device-select{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;padding:18px;background:#edf0e9;border:1px solid var(--line);border-radius:15px}.device-label{grid-column:1/-1;display:flex;align-items:center;gap:10px}.device-label span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--acid);font:800 12px 'Manrope'}.device-select label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.device-select select{width:100%;height:44px;margin-top:6px;border:1px solid #aeb8b0;border-radius:9px;padding:0 11px;background:white;color:var(--ink);font:600 14px 'DM Sans'}.device-select select:disabled{opacity:.55}.swap-btn{width:50px;height:50px;border:1px solid var(--line);border-radius:50%;background:white;font-size:22px;cursor:pointer;display:grid;place-items:center}.swap-btn small{display:none}
@media(max-width:760px){.selectors{grid-template-columns:1fr;gap:9px}.device-select{grid-template-columns:1fr;gap:10px;padding:14px}.device-label,.device-select label{grid-column:1}.swap-btn{width:100%;height:38px;border-radius:9px;font-size:18px;display:flex;align-items:center;justify-content:center;gap:7px}.swap-btn small{display:inline;font:700 12px 'DM Sans'}}