:root {
  --ink: #0c0d0e;
  --muted: #777c80;
  --paper: #fff;
  --green: #18a86b;
  --green-dark: #087a4d;
  --ease-spring: linear(0, .005, .02 1.2%, .08 2.7%, .28 6%, .62 10%, .9 14%, 1.04 18%, 1.09 22%, 1.07 29%, 1.01 40%, .995 54%, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #e8eaec;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.svg-filters { position: absolute; width: 0; height: 0; }

.app {
  position: relative;
  width: min(100vw, 430px);
  height: 100dvh;
  min-height: 640px;
  margin: 0 auto;
  overflow: hidden;
  overscroll-behavior: none;
  isolation: isolate;
  background: var(--paper);
}

.screen {
  position: absolute;
  inset: 0;
  padding: max(24px, env(safe-area-inset-top)) 24px max(22px, env(safe-area-inset-bottom));
  transition: opacity .48s ease, transform .78s var(--ease-spring), visibility 0s linear .78s;
}

.brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; font-weight: 750; font-size: 18px; letter-spacing: -.04em; }
.brand-mark { position: relative; width: 25px; height: 25px; filter: url(#gooey); }
.brand-mark i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #0a0b0c; top: 5px; }
.brand-mark i:first-child { left: 2px; }
.brand-mark i:last-child { right: 2px; }

.search-screen { display: flex; flex-direction: column; }
.search-copy { position: relative; margin-top: clamp(94px, 17vh, 146px); }
.eyebrow { margin: 0 0 12px; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; line-height: 1; font-weight: 760; color: #656b70; }
.search-copy h1, .results-copy h1 { margin: 0; font-size: clamp(48px, 13vw, 62px); line-height: .92; letter-spacing: -.075em; font-weight: 680; }
.search-form { position: absolute; left: 24px; right: 24px; top: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 76px; transform: translateY(-50%); }
.search-unit { position: relative; width: 76px; height: 76px; border-radius: 27px; padding: 2px; overflow: hidden; background: conic-gradient(from var(--beam-angle, 0deg), #ffffff 0 8%, #72dcff 16%, #8277ff 29%, #ff6eae 43%, #ffca6e 58%, #5ce0aa 73%, #ffffff 88% 100%); box-shadow: 0 14px 32px rgba(39,45,56,.12), 0 2px 5px rgba(39,45,56,.08); transition: width .9s var(--ease-spring), border-radius .75s var(--ease-spring), transform .9s var(--ease-spring); animation: beam 3.4s linear infinite; cursor: text; }
.search-form:focus-within .search-unit { width: calc(100% - 66px); border-radius: 38px; }
.search-form.has-value .search-unit { width: calc(100% - 66px); border-radius: 38px; }
.search-form.has-value .search-unit { transform: translateX(-33px); }
.search-glass { position: relative; display: flex; align-items: center; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; color: #30353b; background: #fff; border: 1px solid #fff; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(114,125,141,.08); cursor: text; }
.search-glass::after { content: ""; position: absolute; inset: 2px; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at 25% 0%, rgba(255,255,255,.96), transparent 44%); mix-blend-mode: screen; }
.search-icon { z-index: 1; flex: 0 0 auto; width: 19px; height: 19px; margin-left: 26px; border: 2px solid #22282e; border-radius: 50%; transition: margin .75s var(--ease-spring), transform .4s ease; }
.search-icon::after { content: ""; position: absolute; width: 8px; height: 2px; margin: 14px 0 0 13px; background: #22282e; border-radius: 2px; transform: rotate(45deg); transform-origin: left; }
.search-form:focus-within .search-icon, .search-form.has-value .search-icon { margin-left: 23px; transform: scale(.92); }
.search-glass input { z-index: 1; width: 0; min-width: 0; opacity: 0; border: 0; outline: 0; padding: 0; margin-left: 14px; background: transparent; color: var(--ink); font-weight: 560; font-size: 15px; transition: width .55s var(--ease-out), opacity .3s ease .1s; }
.search-form:focus-within input, .search-form.has-value input { width: 100%; opacity: 1; }
.search-glass input::placeholder { color: #8b9197; }
.dynamic-placeholder { position: absolute; z-index: 2; left: 58px; right: 44px; overflow: hidden; color: #777e84; font-size: 13px; font-weight: 520; line-height: 1; white-space: nowrap; text-overflow: clip; opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity .18s ease, transform .3s var(--ease-out); }
.dynamic-placeholder.is-visible { opacity: 1; transform: translateY(0); }
.dynamic-placeholder .typed-fragment { color: #1c2024; font-weight: 680; }
.dynamic-placeholder .typing-caret { display: inline-block; width: 1px; height: 14px; margin-left: 2px; vertical-align: -2px; background: #2d3338; animation: caret-blink .8s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.clear-input { z-index: 2; flex: 0 0 auto; width: 30px; height: 30px; margin-right: 9px; padding: 0 0 2px; border: 0; border-radius: 50%; color: #777f87; background: rgba(255,255,255,.55); opacity: 0; transform: scale(.5); pointer-events: none; transition: .35s var(--ease-spring); }
.has-value .clear-input { opacity: 1; transform: scale(1); pointer-events: auto; }
.search-submit { position: absolute; right: 0; width: 56px; height: 56px; border: 0; border-radius: 50%; background: #0c0d0e; color: #fff; font-size: 25px; opacity: 0; transform: translateX(-46px) scale(.3); pointer-events: none; transition: opacity .25s ease, transform .7s var(--ease-spring), box-shadow .4s ease; }
.has-value .search-submit { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; box-shadow: 0 13px 30px rgba(0,0,0,.18); }
.search-submit:active { transform: scale(.88); }
@property --beam-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes beam { to { --beam-angle: 360deg; } }

.filter-screen { visibility: hidden; opacity: 0; transform: translateY(22%) scale(.96); display: flex; flex-direction: column; }
.filter-header { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; padding-top: 4px; }
.back-button { width: 34px; height: 34px; border: 0; background: transparent; font-size: 23px; color: #6f7478; cursor: pointer; }
.editable-query { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 0; border: 0; background: none; text-align: left; color: #3b3e41; font-size: 17px; line-height: 1.16; font-weight: 650; letter-spacing: -.035em; cursor: pointer; }
.editable-query span:first-child { max-width: 290px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pencil { flex: 0 0 auto; color: #858a8e; font-size: 16px; transform: rotate(-8deg); }
.filter-content { margin-top: clamp(54px, 10vh, 84px); }
.progress-row { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.progress-row p { margin: 0; font-size: 29px; line-height: 1; letter-spacing: -.06em; font-weight: 660; }
.progress-row span { color: #858b90; font-size: 12px; font-weight: 650; }
.progress-track { height: 3px; margin-top: 14px; overflow: hidden; border-radius: 99px; background: rgba(20,25,30,.08); }
.progress-track i { display: block; width: 0; height: 100%; background: var(--green); border-radius: inherit; transition: width .75s var(--ease-spring); }
.filter-stack { display: flex; flex-direction: column; gap: 9px; margin-top: 32px; }
.filter-group { position: relative; opacity: 0; transform: translateY(22px) scale(.94); animation: pill-in .7s var(--ease-spring) forwards; animation-delay: var(--delay); }
.filter-primary { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; padding: 0 18px 0 20px; border: 0; border-radius: 27px; background: #111314; color: #fff; cursor: pointer; box-shadow: 0 9px 18px rgba(0,0,0,.11); transition: background .55s ease, border-radius .7s var(--ease-spring), transform .25s ease; }
.filter-primary:active { transform: scale(.975); }
.filter-primary .label { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 14px; }
.filter-primary .number { color: #777d81; font-size: 10px; font-variant-numeric: tabular-nums; transition: color .4s; }
.filter-primary .value { max-width: 155px; color: rgba(255,255,255,.78); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.filter-primary .plus { width: 22px; font-size: 20px; line-height: 1; font-weight: 300; transition: transform .6s var(--ease-spring); }
.filter-group.open .filter-primary { border-radius: 25px 25px 15px 15px; }
.filter-group.open .plus { transform: rotate(45deg); }
.filter-group.done .filter-primary { background: linear-gradient(110deg, #087c4f, #1cb776); }
.filter-group.done .number { color: rgba(255,255,255,.6); }
.filter-group.done .plus { font-size: 15px; font-weight: 760; }
.options-shell { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(-15px) scale(.96); transform-origin: top; transition: grid-template-rows .68s var(--ease-spring), opacity .28s ease, transform .68s var(--ease-spring); }
.filter-group.open .options-shell { grid-template-rows: 1fr; opacity: 1; transform: translateY(0) scale(1); }
.options-clip { min-height: 0; overflow: hidden; }
.options-cloud { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 2px 5px; filter: url(#gooey) drop-shadow(0 7px 11px rgba(0,0,0,.11)); }
.filter-option { min-height: 42px; border: 0; border-radius: 999px; padding: 0 15px; background: #111314; color: #fff; font-size: 12px; font-weight: 570; opacity: 0; transform: translateY(-20px) scale(.35); cursor: pointer; }
.filter-group.open .filter-option { animation: option-pop .72s var(--ease-spring) forwards; animation-delay: calc(var(--i) * 45ms); }
.filter-option.selected { background: var(--green); }
@keyframes pill-in { to { opacity: 1; transform: none; } }
@keyframes option-pop { to { opacity: 1; transform: none; } }

.results-screen { visibility: hidden; opacity: 0; transform: translateY(28%) scale(.93); overflow-y: auto; scrollbar-width: none; color: #fff; background: #0d0e0f; transition-duration: .7s; }
.results-screen::-webkit-scrollbar { display: none; }
.results-backdrop { position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, #18191b 0%, #0d0e0f 48%, #08090a 100%); }
.results-backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% -12%, rgba(255,255,255,.1), transparent 35%); }
.results-header { position: relative; display: flex; align-items: center; justify-content: flex-start; }
.glass-icon { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.44); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.53), rgba(255,255,255,.22)); color: #0b0f13; backdrop-filter: blur(18px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 9px 25px rgba(0,0,0,.12); }
.glass-icon { border: 1px solid rgba(255,255,255,.42); font-size: 24px; cursor: pointer; }
.glass-icon:active { transform: scale(.9); }
.results-copy { position: relative; margin-top: 31px; }
.results-copy h1 { max-width: 370px; font-size: clamp(41px, 11vw, 52px); }
.results-copy > p:last-child { max-width: 340px; margin: 13px 0 0; color: rgba(255,255,255,.74); font-size: 12px; line-height: 1.45; }
.recommendations-list { position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.rank-card { position: relative; display: grid; grid-template-columns: 98px 1fr; min-height: 148px; overflow: hidden; border: 1px solid rgba(255,255,255,.32); border-radius: 27px; color: #101418; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(240,244,246,.71)); backdrop-filter: blur(24px) saturate(135%); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 18px 36px rgba(0,0,0,.17); opacity: 0; transform: translateY(44px) scale(.9); animation: card-rise .86s var(--ease-spring) forwards; animation-delay: var(--delay); }
.rank-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at 40% 0%, rgba(255,255,255,.72), transparent 40%); mix-blend-mode: screen; }
.rank-photo { position: relative; min-height: 148px; overflow: hidden; background: #d4d8da; }
.rank-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.03); }
.medal { position: absolute; z-index: 2; left: 9px; top: 9px; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; color: #231b08; font-size: 12px; font-weight: 850; box-shadow: 0 5px 14px rgba(0,0,0,.22); }
.medal.gold { background: linear-gradient(135deg, #fff2a6, #d99c24); }
.medal.silver { background: linear-gradient(135deg, #fff, #a9b1b8); }
.medal.bronze { background: linear-gradient(135deg, #f4c294, #a95a2d); }
.rank-body { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; padding: 15px 14px 12px; }
.rank-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rank-meta span:first-child { color: #687078; text-transform: uppercase; letter-spacing: .08em; font-size: 8px; font-weight: 800; }
.rank-body h2 { margin: 7px 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; line-height: 1.05; letter-spacing: -.045em; }
.rank-reason { margin: 0; color: #535a60; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 10.5px; line-height: 1.34; }
.rank-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; }
.rank-actions small { color: #6a7075; font-size: 9px; font-weight: 650; }
.rank-link { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 8px 10px; color: #111; text-decoration: none; font-size: 9px; font-weight: 850; letter-spacing: .035em; box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 4px 10px rgba(0,0,0,.12); }
.rank-link.gold { background: linear-gradient(135deg, #fff2a6, #d99c24); }
.rank-link.silver { background: linear-gradient(135deg, #fff, #a9b1b8); }
.rank-link.bronze { background: linear-gradient(135deg, #f4c294, #a95a2d); }
.rank-link::after { content: "↗"; font-size: 11px; }
@keyframes card-rise { to { opacity: 1; transform: none; } }
.results-footer { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 19px 2px 6px; color: rgba(255,255,255,.5); font-size: 9px; }
.results-footer button { padding: 0; border: 0; color: #fff; background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }

.toast { position: absolute; z-index: 20; left: 50%; bottom: 32px; padding: 11px 15px; border-radius: 999px; color: white; background: rgba(14,16,18,.9); font-size: 11px; transform: translate(-50%, 30px) scale(.85); opacity: 0; pointer-events: none; backdrop-filter: blur(12px); transition: .55s var(--ease-spring); }
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

.app[data-step="filters"] .search-screen { visibility: hidden; opacity: 0; transform: translateY(-18%) scale(.94); }
.app[data-step="filters"] .filter-screen { visibility: visible; opacity: 1; transform: none; transition-delay: .05s, .05s, 0s; }
.app[data-step="results"] .search-screen, .app[data-step="results"] .filter-screen { visibility: hidden; opacity: 0; transform: translateY(-24%) scale(.92); }
.app[data-step="results"] .results-screen { visibility: visible; opacity: 1; transform: none; transition-delay: .04s, .04s, 0s; }

@media (min-width: 520px) and (min-height: 740px) {
  body { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
  .app { width: min(430px, 51.75vh); height: min(92vh, 764.44px); min-height: 680px; aspect-ratio: 9 / 16; border-radius: 42px; box-shadow: 0 35px 90px rgba(25,30,36,.25), 0 0 0 1px rgba(255,255,255,.7); }
}

@media (max-height: 700px) {
  .search-copy { margin-top: 64px; }
  .filter-content { margin-top: 34px; }
  .filter-stack { margin-top: 22px; }
  .filter-primary { min-height: 49px; }
  .results-copy { margin-top: 20px; }
  .recommendations-list { margin-top: 18px; }
  .rank-card { min-height: 132px; grid-template-columns: 90px 1fr; }
  .rank-photo { min-height: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}