.mx,.cmp{--good:#c6d8ae;--good-bg:#1b2416;--vend:#f0c79a;--vend-bg:#2a1d10;padding-bottom:120px}.mx button:not(.btn),.cmp button:not(.btn){color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0}.mx a,.cmp a{color:inherit;text-decoration:none}.mx ::selection,.cmp ::selection,.viewer ::selection{background:var(--accent);color:var(--accent-ink)}.mx :focus-visible,.cmp :focus-visible,.viewer :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}.num{font-variant-numeric:tabular-nums}.flip-x{transform:scaleX(-1)}.text-action{min-height:36px;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px;transition:color var(--t-hover), text-decoration-color var(--t-hover);align-items:center;gap:7px;font-size:14.5px;font-weight:580;display:inline-flex}.text-action:hover{color:var(--accent);text-decoration-color:currentColor}.mx h2 i,.cmp h1 i,.cmp h2 i{color:var(--accent);font-style:normal}.trust{letter-spacing:-.005em;white-space:nowrap;background:var(--surface-3);height:24px;color:var(--ink-2);border-radius:7px;align-items:center;padding:0 9px;font-size:12.5px;font-weight:640;display:inline-flex}.trust.strong{background:var(--good-bg);color:var(--good)}.trust.vendor{background:var(--vend-bg);color:var(--vend)}.trust.lead{color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-strong);background:0 0}.trust.run{background:var(--accent-soft);color:var(--accent)}.mx-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end;gap:20px clamp(32px,5vw,80px);padding-top:clamp(36px,4.6vw,68px);padding-bottom:clamp(28px,3vw,44px);display:grid}.mx-hero h1{letter-spacing:-.045em;text-wrap:balance;font-size:clamp(44px,5.4vw,80px);font-weight:780;line-height:.96}.mx-hero h1 span{color:var(--accent)}.mx-lede>p:first-child{color:var(--ink-2);text-wrap:pretty;max-width:52ch;font-size:clamp(17px,1.25vw,19px);line-height:1.55}.mx-stats{color:var(--muted);margin-top:14px;font-size:14px}.mx-stats .num{color:var(--ink);font-weight:640}.mx-stats i{color:var(--deco);margin:0 6px;font-style:normal}.mx-bar{top:var(--header-h);z-index:40;background:color-mix(in oklab, var(--bg) 94%, transparent);-webkit-backdrop-filter:saturate(1.2)blur(12px);border-block:1px solid var(--line);padding:12px 0;position:sticky}.mx-bar-inner{flex-wrap:wrap;align-items:center;gap:10px 14px;display:flex}.mx-types{background:var(--bg-sunk);box-shadow:inset 0 0 0 1px var(--line);border-radius:14px;gap:4px;padding:4px;display:flex}.mx-types button{min-height:40px;color:var(--muted);transition:background-color var(--t-hover), color var(--t-hover);border-radius:10px;align-items:center;gap:8px;padding:0 16px;font-size:15px;font-weight:640;display:inline-flex}.mx-types button .num{color:var(--faint);font-size:12.5px;font-weight:600}.mx-types button:hover{color:var(--ink)}.mx-types button[aria-pressed=true]{background:var(--surface-3);color:var(--ink);box-shadow:0 1px 2px #00000073}.mx-types button[aria-pressed=true] .icon{color:var(--accent)}.mx-types button[aria-pressed=true] .num{color:var(--ink-2)}.mx-model{align-items:center;margin-left:auto;display:inline-flex;position:relative}.mx-model select{appearance:none;border:1px solid var(--line-strong);background:var(--surface);min-width:220px;max-width:300px;height:42px;color:var(--ink);font:inherit;cursor:pointer;border-radius:999px;padding:0 38px 0 16px;font-size:14.5px;font-weight:560}.mx-model select:hover{border-color:var(--muted)}.mx-model .icon{pointer-events:none;color:var(--muted);position:absolute;right:14px}.mx-compare .icon{color:var(--accent)}.mx-jobs{scrollbar-width:none;gap:8px;margin-top:10px;padding-bottom:2px;display:flex;overflow-x:auto}.mx-jobs::-webkit-scrollbar{display:none}.mx-jobs button{min-height:36px;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink-2);transition:background-color var(--t-hover), color var(--t-hover), box-shadow var(--t-hover);border-radius:999px;flex:none;align-items:center;gap:8px;padding:0 14px;font-size:14px;font-weight:600;display:inline-flex}.mx-jobs button .num{color:var(--muted);font-size:12px}.mx-jobs button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--muted)}.mx-jobs button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);box-shadow:none}.mx-jobs button[aria-pressed=true] .num{color:var(--accent-ink-2)}.mx-look{border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);color:var(--ink-2);max-width:max-content;margin-top:26px;padding:12px 16px;font-size:15px}.mx-list{padding-top:8px}.test{border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 140px);padding-block:clamp(34px,3.6vw,52px)}.test[hidden]{display:none}.test-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;display:flex}.test-head h3{letter-spacing:-.03em;text-wrap:balance;font-size:clamp(22px,1.8vw,28px);font-weight:720;line-height:1.15}.test-credit{color:var(--muted);flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13.5px;display:flex}.test-brief{max-width:86ch;margin-top:10px}.brief-text{color:var(--ink-2);text-wrap:pretty;font-size:15.5px;line-height:1.55}.brief-text.clamp{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.test-brief.is-open .brief-text.clamp{-webkit-line-clamp:unset;display:block}.brief-extra{color:var(--muted);flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:13px;display:flex}.brief-more{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;font-weight:600;color:var(--ink-2)!important}.brief-more:hover{color:var(--accent)!important}.tiles{grid-template-columns:repeat(auto-fill, minmax(min(var(--min,240px), 100%), 1fr));gap:18px 14px;margin-top:20px;display:grid}.tile{min-width:0}.tile[hidden]{display:none}.tile-frame{width:100%;aspect-ratio:var(--frame,16 / 9);border-radius:var(--r);background:var(--bg-sunk);box-shadow:inset 0 0 0 1px var(--line);cursor:zoom-in;isolation:isolate;transition:box-shadow var(--t-hover), transform var(--t-ui) var(--ease-out);padding:0;display:block;position:relative;overflow:hidden}.tile-frame img,.tile-frame video{object-fit:contain;z-index:-1;width:100%;height:100%;position:absolute;inset:0}.tile-frame video{opacity:0;transition:opacity .22s}.tile.is-playing .tile-frame video,.tile-frame.is-playing video,.is-playing>video{opacity:1}.tile-tag{height:24px;color:var(--ink);-webkit-backdrop-filter:blur(6px);transition:opacity var(--t-hover);background:#0a0908bd;border-radius:7px;align-items:center;gap:5px;padding:0 8px;font-size:12px;font-weight:600;display:inline-flex;position:absolute;bottom:8px;left:8px}.tile.is-playing .tile-tag{opacity:0}.is-input .tile-tag{background:var(--accent);color:var(--accent-ink);backdrop-filter:none}@media (hover:hover) and (pointer:fine){.tile-frame:hover{box-shadow:inset 0 0 0 1px var(--muted)}}.tile-frame:active{transform:scale(.985)}.tile figcaption{flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:10px;font-size:14.5px;line-height:1.35;display:flex}.tile figcaption>a:first-child,.tile figcaption>span:first-child{color:var(--ink);font-weight:640}.tile figcaption>a:first-child:hover{color:var(--accent)}.tile figcaption small{color:var(--muted);flex-basis:100%;font-size:13px}.tile figcaption small.older{box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--muted);border-radius:5px;flex-basis:auto;padding:1px 6px;font-size:11.5px;font-weight:600}.tile-page{text-underline-offset:4px;align-items:center;gap:5px;font-size:13px;display:inline-flex;color:var(--ink-2)!important;text-decoration:underline!important;text-decoration-color:var(--line-strong)!important}.tile-page:hover{color:var(--accent)!important}.is-input figcaption>span:first-child{color:var(--muted);font-weight:560}.tile.is-picked .tile-frame{box-shadow:inset 0 0 0 2px var(--accent)}.tile.is-picked figcaption>a:first-child{color:var(--accent)}.test-foot{flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:22px;display:flex}.test-actions{flex-wrap:wrap;align-items:center;gap:10px 18px;display:flex}.test-actions [data-play-all][aria-pressed=true]{--b-bg:var(--surface-3);--b-ink:var(--ink);--b-line:var(--line-strong)}.test-note{color:var(--muted);flex-wrap:wrap;flex:320px;gap:4px 16px;font-size:13.5px;line-height:1.5;display:flex}.test-note a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;white-space:nowrap;align-items:center;gap:5px;display:inline-flex}.test-note a:hover{color:var(--accent)}.mx-more{flex-direction:column;align-items:center;gap:10px;margin-top:40px;display:flex}.mx-more p{color:var(--muted);font-size:13.5px}.mx-empty{text-align:center;justify-items:center;gap:8px;padding:70px 20px;display:grid}.mx-empty h3{letter-spacing:-.02em;font-size:22px;font-weight:700}.mx-empty p{color:var(--muted);margin-bottom:10px}.mx-empty[hidden],.mx-more [hidden]{display:none}.mx-prod,.mx-how{padding-top:clamp(80px,9vw,140px)}.mx-prod h2,.mx-how h2{letter-spacing:-.045em;font-size:clamp(40px,4.4vw,64px);font-weight:780;line-height:1}.prod-pair{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:18px;margin-top:30px;display:grid}.prod{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);gap:18px;padding:18px;display:grid}.prod-media{cursor:zoom-in}.prod-copy{justify-items:start;gap:10px;padding:4px 6px;display:grid}.prod-copy h3{letter-spacing:-.03em;font-size:24px;font-weight:740}.prod-copy p{color:var(--ink-2);max-width:60ch;font-size:15.5px;line-height:1.55}.prod-copy p a{color:var(--accent)}.mx-how{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:28px clamp(32px,5vw,80px);display:grid}.how-intro{justify-items:start;gap:16px;display:grid}.how-intro p{color:var(--ink-2);max-width:54ch;font-size:16px;line-height:1.6}.how-key{gap:2px;padding-top:8px;display:grid}.how-key div{border-bottom:1px solid var(--line);grid-template-columns:150px minmax(0,1fr);align-items:baseline;gap:14px;padding:12px 0;display:grid}.how-key dd{color:var(--ink-2);font-size:14.5px;line-height:1.5}.how-scores{border-top:1px solid var(--line);grid-column:1/-1}.how-scores summary{cursor:pointer;align-items:center;gap:10px;min-height:58px;font-size:16px;font-weight:640;list-style:none;display:flex}.how-scores summary::-webkit-details-marker{display:none}.how-scores summary .num{color:var(--muted);font-size:13px}.how-scores summary .icon{color:var(--muted);transition:transform var(--t-ui) var(--ease-out);margin-left:auto}.how-scores[open] summary .icon{transform:rotate(45deg)}.how-scores ul{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:4px 28px;padding:4px 0 20px;list-style:none;display:grid}.how-scores li{border-bottom:1px solid var(--line);justify-content:space-between;gap:12px;padding:9px 0;font-size:14.5px;display:flex}.how-scores li a{color:var(--ink-2);align-items:center;gap:6px;display:inline-flex}.how-scores li a:hover{color:var(--accent)}.how-scores li span{color:var(--muted);font-size:13px}.viewer{border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--surface);width:min(1240px,100vw - 32px);max-width:none;max-height:calc(100dvh - 32px);color:var(--ink);padding:0;overflow:hidden;box-shadow:0 30px 80px #0009}.viewer[open]{animation:viewer-in .26s var(--ease-out);grid-template-rows:auto minmax(0,1fr) auto;display:grid}.viewer::backdrop{-webkit-backdrop-filter:blur(5px);background:#060504d1}@keyframes viewer-in{0%{opacity:0;transform:translateY(10px)scale(.985)}}.viewer-top,.viewer-bottom{align-items:center;gap:16px;padding:12px 14px 12px 20px;display:flex}.viewer-title{flex-wrap:wrap;flex:1;align-items:baseline;gap:2px 12px;min-width:0;display:flex}.viewer-title strong{letter-spacing:-.02em;font-size:18px;font-weight:700}.viewer-title span{color:var(--muted);font-size:14px}.viewer-count{color:var(--muted);font-size:13.5px}.viewer-close{width:42px;height:42px;color:var(--ink-2);border-radius:999px;place-items:center;display:grid}.viewer-close:hover{background:var(--surface-3);color:var(--ink)}.viewer-stage{background:var(--bg-sunk);place-items:center;min-height:0;display:grid}.viewer-stage img,.viewer-stage video{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 180px);display:block}.viewer-stage video{width:100%}.viewer-test{text-align:center;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:14px;overflow:hidden}.viewer-bottom .btn[hidden]{visibility:hidden;display:inline-flex}@media (width<=900px){.mx-hero,.mx-how,.prod-pair{grid-template-columns:1fr}.mx-model{flex:200px;margin-left:0}.mx-model select{width:100%;min-width:0;max-width:none}}@media (width<=640px){.tiles:not([data-wide]){grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}.tile figcaption{font-size:13.5px}.tile-tag{bottom:6px;left:6px}.mx-types{width:100%}.mx-types button{flex:1;justify-content:center;padding:0 8px}.mx-types button .icon,.mx-compare{display:none}.how-key div{grid-template-columns:1fr;gap:6px}.viewer-bottom .btn{padding:0 14px}.viewer-bottom .btn:not(:has(.icon:only-child)){gap:0;font-size:0}.viewer-bottom .btn .icon{width:18px;height:18px}.test-foot{gap:14px}}@media (prefers-reduced-motion:reduce){.viewer[open]{animation:none}.tile-frame,.tile-frame video{transition:none}}
