.iux-tool [hidden]{display:none!important}

:root{--paper:#f6f4f0;--ink:#16161a;--soft:#3c3d44;--mute:#686a73;--glass:#e6eaee;--rule:#d9d6cf;--berry:#8a2d5f;--berry2:#72244e;--amber:#e9b949;--rose:#e07a93;--sky:#7fa9dc;
--f:"Mona Sans",-apple-system,"Segoe UI",sans-serif;--fm:"Spline Sans Mono",ui-monospace,monospace}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--soft);font:400 18px/1.62 var(--f)}
a{color:var(--berry)}.iux-wrap{max-width:1140px;margin:0 auto;padding:0 16px}
h1,h2,h3{color:var(--ink);font-family:var(--f);font-stretch:112%;letter-spacing:-.025em;text-wrap:balance}
h1{font-weight:700;font-size:clamp(36px,5.8vw,64px);line-height:1.03;margin:0 0 16px}h1 em{font-style:normal;color:var(--berry)}h2{font-weight:650;font-size:30px;line-height:1.12;margin:44px 0 12px}
p,li{text-wrap:pretty}
.iux-nav{border-bottom:1px solid var(--rule)}.iux-nav .iux-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 22px;padding-top:6px;padding-bottom:6px}
.iux-logo{display:inline-flex;gap:10px;align-items:center;font:700 19px var(--f);font-stretch:110%;color:var(--ink);text-decoration:none;margin:0}
.iux-logo span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--ink);color:var(--paper);font:500 13px var(--fm)}
.iux-nav nav{display:flex;flex-wrap:wrap;gap:0 20px}.iux-nav nav a{color:var(--ink);text-decoration:none;font:500 15px var(--f);min-height:44px;display:inline-flex;align-items:center}.iux-nav nav a:hover{color:var(--berry)}
.iux-tag{display:inline-block;font:500 12px var(--fm);letter-spacing:.04em;text-transform:uppercase;color:var(--berry);background:#f3e6ed;border-radius:999px;padding:4px 10px;margin:0 0 14px}
.iux-lede{font-size:20.5px;line-height:1.5;max-width:38em;margin:0 auto 18px}
.iux-hero{padding:56px 0 24px}.iux-center{text-align:center}.iux-center h1{max-width:15em;margin-left:auto;margin-right:auto}
.iux-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.iux-btn,.iux-btn2{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:10px;font:600 16px var(--f);text-decoration:none}
.iux-btn{background:var(--berry);color:#fff}.iux-btn:hover{background:var(--berry2)}.iux-btn2{border:1px solid var(--ink);color:var(--ink)}
.iux-concept{margin:34px auto 0;max-width:920px}.iux-win{background:#fff;border:1px solid var(--rule);border-radius:16px;box-shadow:0 30px 60px -36px rgba(22,22,26,.4);overflow:hidden}
.iux-wbar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--glass);font:500 13px var(--fm);color:var(--mute)}.iux-wbar i{width:10px;height:10px;border-radius:50%;background:#c8ccd2}.iux-wbar span{margin-left:10px}
.iux-wbody{display:grid;grid-template-columns:1fr;gap:16px;padding:18px}
.iux-shot{position:relative;background:var(--paper);border-radius:10px;padding:22px;min-height:190px}.iux-shot div{background:#fff;border:1px solid var(--rule);border-radius:6px;height:30px;margin:0 0 10px}
.iux-shot .iux-f1{width:55%;height:18px;border:0;background:var(--rule)}.iux-shot .iux-fb{width:40%;background:var(--ink);border:0}
.iux-pin{position:absolute;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--fm);color:var(--ink)}.iux-p1{background:var(--amber);top:44px;right:18px}.iux-p2{background:var(--rose);top:86px;right:44px}.iux-p3{background:var(--sky);bottom:24px;left:44%}
.iux-finds{margin:0;padding:0;list-style:none;font-size:15.5px}.iux-finds li{padding:10px 0;border-bottom:1px solid var(--rule)}.iux-finds b{display:block;font:600 12.5px var(--fm);text-transform:uppercase;color:var(--ink)}
.iux-concept figcaption{font:500 13px var(--fm);color:var(--mute);text-align:center;margin-top:10px}
.iux-how .iux-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:14px;counter-reset:s}.iux-how li{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:18px;counter-increment:s}
.iux-how li::before{content:counter(s);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--glass);font:500 14px var(--fm);color:var(--ink);margin-bottom:10px}
.iux-how b{display:block;font:650 19px var(--f);color:var(--ink)}.iux-how span{font-size:16px}.iux-note{font-size:14.5px;color:var(--mute)}
.iux-tool{background:var(--ink);color:#dcdde2;border-radius:18px;padding:26px 20px;margin:44px 0}.iux-tool h2{color:#fff;margin:0}.iux-tool .iux-lede{margin:8px 0 18px;color:#c8c9d0}
.iux-thead{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.iux-thead .iux-tag{margin:0;background:#2c2d33;color:#f0c6dc}
.iux-cgrid{display:grid;grid-template-columns:1fr;gap:16px}.iux-cf{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}.iux-cf label{display:flex;flex-direction:column;gap:6px;font:500 13px var(--fm);text-transform:uppercase;color:#b9bac2}
.iux-pair{display:flex;gap:8px}.iux-pair input[type=color]{width:48px;height:46px;padding:2px;border:1px solid #44454c;border-radius:8px;background:#25262c}
.iux-cf input:not([type=color]){font:500 16px var(--fm);padding:9px 10px;min-height:46px;width:100%;border:1px solid #44454c;border-radius:8px;background:#25262c;color:#fff}
.iux-cf button{grid-column:1/-1;min-height:44px;border-radius:8px;border:1px solid #55565e;background:transparent;color:#fff;font:600 15px var(--f);cursor:pointer}
.iux-prev{border-radius:12px;padding:18px;border:1px solid #44454c}.iux-prev .iux-pl{font:600 24px var(--f);margin:0 0 6px}.iux-prev .iux-ps{font-size:16px;margin:0}
.iux-ratio{font:700 54px/1 var(--f);font-stretch:115%;color:#fff;margin:18px 0 8px;font-variant-numeric:tabular-nums}.iux-ratio .iux-u{font-size:28px;color:#9a9ba3}
.iux-verdicts{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:1fr;gap:8px}.iux-verdicts li{background:#25262c;border-radius:10px;padding:10px 12px;display:grid;gap:2px}
.iux-verdicts b{color:#fff;font-weight:600}.iux-verdicts span{font:500 14px var(--fm);color:#f0c6dc}.iux-verdicts small{color:#9a9ba3;font-size:13px}.iux-tool .iux-note{color:#9a9ba3}
.iux-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}.iux-cards a{display:block;height:100%;background:#fff;border:1px solid var(--rule);border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--soft)}
.iux-cards b{display:block;font:650 18.5px/1.25 var(--f);color:var(--ink);margin-bottom:4px}.iux-cards span{font-size:15.5px}.iux-cards a:hover{border-color:var(--berry)}
.iux-doc{padding-top:30px;max-width:860px}.iux-crumb{font:500 13px var(--fm);color:var(--mute);margin:0 0 14px}.iux-crumb a{color:var(--mute)}.iux-doc .iux-lede{margin-left:0}
.iux-meta{font:500 14px var(--f);color:var(--mute);border-top:1px solid var(--rule);padding-top:8px}
.iux-answer{border:1px solid var(--ink);border-radius:12px;padding:14px 18px;margin:20px 0 10px;background:#fff}.iux-answer .iux-tag{margin:0 0 6px}.iux-answer p:last-child{margin:0}
.iux-body{max-width:720px}.iux-body table{border-collapse:collapse;width:100%;font-size:15px;margin:14px 0}.iux-body th,.iux-body td{text-align:left;border-bottom:1px solid var(--rule);padding:8px 6px;vertical-align:top}
.iux-body th{font:500 12px var(--fm);text-transform:uppercase;color:var(--mute)}.iux-body .iux-tool{max-width:none}
.iux-sources{margin-top:34px;border-top:2px solid var(--ink);padding-top:10px;font-size:15px}.iux-sources h2{font:500 12.5px var(--fm);text-transform:uppercase;margin:0 0 8px}
.iux-more h2{font-size:24px}
.iux-foot{background:#fff;border-top:1px solid var(--rule);padding:30px 0 40px;margin-top:50px;font-size:15px}.iux-small{font-size:13.5px;color:var(--mute)}
@media (min-width:760px){.iux-how .iux-steps{grid-template-columns:repeat(3,1fr)}.iux-cards{grid-template-columns:1fr 1fr}.iux-wbody{grid-template-columns:1.1fr 1fr}.iux-cgrid{grid-template-columns:1fr 1fr}.iux-verdicts{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){body{font-size:17.5px}.iux-lede{font-size:19px}.iux-nav nav{gap:0 14px}.iux-nav nav a{font-size:14px}}

.iux-tag,.iux-finds b,.iux-sources h2{font-size:13px}main p,.iux-foot p{max-width:900px}
.iux-body table{display:block;overflow-x:auto;max-width:100%}