@layer theme,base;@layer components{.which-console{gap:0;padding:.25rem 0;display:grid}.which-question{border-top:1px solid var(--color-line);gap:.6rem;padding:1rem 1.1rem;display:grid}.which-question:first-child{border-top:0}@media (min-width:900px){.which-question{grid-template-columns:minmax(0,15rem) minmax(0,1fr);align-items:center;padding:.85rem 1.4rem}.which-note{grid-column:2}}.which-q{color:var(--color-ink);align-items:baseline;gap:.7rem;font-size:14px;display:flex}.which-step{font-family:var(--font-mono);letter-spacing:.12em;color:var(--color-muted);font-size:11px}.which-options{flex-wrap:wrap;gap:.4rem;display:flex}.which-option{border:1px solid var(--color-line);min-height:36px;color:var(--color-muted);transition:color var(--duration-quick), border-color var(--duration-quick), background-color var(--duration-quick);border-radius:999px;align-items:center;padding:0 .85rem;font-size:13px;text-decoration:none;display:inline-flex}.which-option:hover{color:var(--color-ink);border-color:var(--color-ink)}@supports (color:color-mix(in lab, red, red)){.which-option:hover{border-color:color-mix(in srgb, var(--color-ink) 30%, transparent)}}.which-option[data-on]{color:var(--color-ink);background:linear-gradient(var(--color-surface), var(--color-surface)) padding-box, linear-gradient(90deg, var(--wh-a), var(--wh-b), var(--wh-c)) border-box;box-shadow:0 0 18px -6px var(--wh-b);border-color:#0000}@supports (color:color-mix(in lab, red, red)){.which-option[data-on]{box-shadow:0 0 18px -6px color-mix(in srgb, var(--wh-b) 70%, transparent)}}@media (pointer:coarse){.which-option{min-height:44px}}.which-note{color:var(--color-muted);font-size:11px}.which-picks{grid-template-columns:minmax(0,1fr);gap:.9rem;display:grid}@media (min-width:900px){.which-picks{grid-template-columns:repeat(3,minmax(0,1fr))}}.which-pick{flex-direction:column;gap:.9rem;min-width:0;padding:1.15rem;display:flex}.which-pick-head{align-items:center;gap:.9rem;display:flex}.which-pick-head h3 a{align-items:center;min-height:32px;display:inline-flex}.which-world{filter:drop-shadow(0 0 14px #9b4dff40);flex:none;width:72px;height:72px}.which-kind{text-transform:uppercase;letter-spacing:.18em;color:var(--color-muted);font-size:11px}.which-pick[data-kind=cheapest] .which-kind{color:var(--wh-a)}@supports (color:color-mix(in lab, red, red)){.which-pick[data-kind=cheapest] .which-kind{color:color-mix(in srgb, var(--wh-a) 70%, var(--color-ink))}}.which-pick[data-kind=measured] .which-kind,.which-pick[data-kind=fastest] .which-kind{color:var(--wh-b)}@supports (color:color-mix(in lab, red, red)){.which-pick[data-kind=measured] .which-kind,.which-pick[data-kind=fastest] .which-kind{color:color-mix(in srgb, var(--wh-b) 65%, var(--color-ink))}}.which-pick[data-kind=known] .which-kind{color:var(--wh-c)}@supports (color:color-mix(in lab, red, red)){.which-pick[data-kind=known] .which-kind{color:color-mix(in srgb, var(--wh-c) 65%, var(--color-ink))}}.which-why{color:var(--color-ink-soft);font-size:14px;line-height:1.6}.which-facts{border-top:1px solid var(--color-line);gap:.55rem;padding-top:.85rem;display:grid}.which-fact{gap:.1rem;min-width:0;display:grid}.which-fact dt{text-transform:uppercase;letter-spacing:.12em;color:var(--color-muted);font-size:11px}.which-fact dd{font-family:var(--font-mono);overflow-wrap:anywhere;flex-wrap:wrap;align-items:baseline;column-gap:.5rem;font-size:12px;display:flex}.which-source{font-family:var(--font-sans,inherit);color:var(--color-muted);font-size:11px}.which-ways{flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.3rem;display:flex}.which-way{border:1px solid var(--color-line);min-height:40px;color:var(--color-ink-soft);transition:color var(--duration-quick), background-color var(--duration-quick);border-radius:999px;justify-content:center;align-items:center;padding:0 1rem;font-size:13px;display:inline-flex}.which-way:hover{color:var(--color-ink)}.which-way-main{border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.which-way-main{border-color:color-mix(in srgb, var(--color-accent) 35%, transparent)}}.which-way-main{background:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.which-way-main{background:color-mix(in srgb, var(--color-accent) 10%, transparent)}}.which-way-main{color:var(--color-ink)}.which-way-main:hover{background:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.which-way-main:hover{background:color-mix(in srgb, var(--color-accent) 20%, transparent)}}@media (pointer:coarse){.which-way{min-height:44px}}}@layer utilities;
