:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  background: #ffffff;
  color: #1d1d1f;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; overflow-x: hidden; background: #ffffff; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app-shell { position: relative; min-height: 100dvh; max-width: 540px; margin: 0 auto; padding-bottom: calc(132px + env(safe-area-inset-bottom)); background: #ffffff; }

.brand-header { display: flex; justify-content: center; padding: max(42px, calc(env(safe-area-inset-top) + 25px)) 24px 0; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: #141416; font-size: 1.2rem; font-weight: 500; letter-spacing: -.045em; text-decoration: none; }
.brand-mark { display: inline-block; width: 24px; height: 24px; }
.brand-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }

main { min-height: calc(100dvh - 96px - env(safe-area-inset-top)); padding: 0 24px; }
.agent-stage { --agent-scale: 1; --agent-y: 0px; --agent-opacity: 1; --halo-scale: 1; --halo-y: 8px; --halo-opacity: .82; position: relative; display: grid; min-height: calc(100dvh - 215px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); place-items: center; padding-bottom: 104px; overflow: hidden; transition: min-height .72s cubic-bezier(.22,.75,.28,1), padding .72s cubic-bezier(.22,.75,.28,1); }
.agent-halo { position: absolute; width: 178px; height: 148px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(215,222,233,.48) 0%, rgba(238,241,246,.31) 35%, rgba(255,255,255,0) 72%); filter: blur(5px); opacity: var(--halo-opacity); transform: translateY(var(--halo-y)) scale(var(--halo-scale)); transition: opacity .45s, transform .7s cubic-bezier(.22,.75,.28,1); }
.agent-cluster { position: relative; z-index: 1; width: 104px; height: 92px; transform: translateY(var(--agent-y)) scale(var(--agent-scale)); opacity: var(--agent-opacity); transition: transform .7s cubic-bezier(.22,.75,.28,1), opacity .42s ease; }
.agent-piece { position: absolute; display: block; box-shadow: 0 13px 18px rgba(51,60,75,.17), inset 0 1px 1px rgba(255,255,255,.92); }
.agent-piece--blue { top: 6px; left: 37px; width: 27px; height: 27px; border-radius: 50%; background: linear-gradient(145deg, #5b9eff, #1871df); box-shadow: 0 11px 18px rgba(48,118,229,.25), inset 1px 1px 2px rgba(255,255,255,.55); }
.agent-piece--pearl { bottom: 8px; left: 13px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(145deg, #ffffff 3%, #e4e6ea 56%, #c6cbd2); }
.agent-piece--capsule { right: 12px; bottom: 4px; width: 31px; height: 60px; border-radius: 99px; background: linear-gradient(143deg, #ffffff 6%, #e8eaee 51%, #c7ccd3); transform: rotate(36deg); }

.agent-stage[data-state="preparing"] { --agent-opacity: 0; --agent-y: 20px; --agent-scale: .68; --halo-opacity: 0; --halo-y: 12px; --halo-scale: .5; }
.agent-stage[data-state="entering"] .agent-cluster { animation: agent-enter .95s cubic-bezier(.2,.82,.26,1) both; }
.agent-stage[data-state="entering"] .agent-halo { animation: halo-enter 1.15s cubic-bezier(.22,.75,.28,1) both; }
@keyframes agent-enter { 0% { opacity: 0; transform: translateY(20px) scale(.68); filter: blur(5px); } 58% { opacity: 1; transform: translateY(-2px) scale(1.045); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes halo-enter { 0% { opacity: 0; transform: translateY(12px) scale(.5); } 64% { opacity: .92; transform: translateY(7px) scale(1.05); } 100% { opacity: .82; transform: translateY(8px) scale(1); } }

.agent-stage[data-state="idle"] .agent-piece--blue { animation: blue-float 7.4s ease-in-out infinite; }
.agent-stage[data-state="idle"] .agent-piece--pearl { animation: pearl-float 7.4s ease-in-out -2.7s infinite; }
.agent-stage[data-state="idle"] .agent-piece--capsule { animation: capsule-float 7.4s ease-in-out -5.1s infinite; }
.agent-stage[data-state="idle"] .agent-halo { animation: halo-breathe 7.4s ease-in-out infinite; }
@keyframes blue-float { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(3px,-6px,0) scale(1.045); } }
@keyframes pearl-float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-4px,3px,0) scale(.965); } }
@keyframes capsule-float { 0%,100% { transform: rotate(36deg) translate3d(0,0,0); } 50% { transform: rotate(39deg) translate3d(2px,-4px,0) scale(1.02); } }
@keyframes halo-breathe { 0%,100% { opacity: .72; transform: translateY(8px) scale(.95); } 50% { opacity: 1; transform: translateY(3px) scale(1.08); } }

.agent-stage[data-state="focus"] { --agent-y: -2px; --agent-scale: 1.035; --halo-opacity: 1; --halo-y: 4px; --halo-scale: 1.1; }.agent-stage[data-state="focus"] .agent-piece--blue { animation: focus-blue .45s ease-out both; }
@keyframes focus-blue { 50% { transform: translateY(-7px) scale(1.13); } 100% { transform: translateY(-3px) scale(1.045); } }

.agent-stage[data-state="searching"] .agent-halo { animation: search-halo 1.5s ease-in-out infinite; }.agent-stage[data-state="searching"] .agent-cluster { animation: search-cluster 1.5s cubic-bezier(.42,0,.58,1) infinite; }.agent-stage[data-state="searching"] .agent-piece--blue { animation: search-blue 1.5s ease-in-out infinite; }.agent-stage[data-state="searching"] .agent-piece--pearl { animation: search-pearl 1.5s ease-in-out -.25s infinite; }.agent-stage[data-state="searching"] .agent-piece--capsule { animation: search-capsule 1.5s ease-in-out -.5s infinite; }
@keyframes search-halo { 0%,100% { opacity: .6; transform: translateY(8px) scale(.86); } 45% { opacity: 1; transform: translateY(6px) scale(1.28); } 72% { opacity: .72; transform: translateY(6px) scale(1.05); } }
@keyframes search-cluster { 0%,100% { transform: scale(1); } 45% { transform: scale(.89); } 72% { transform: scale(1.05); } }
@keyframes search-blue { 0%,100% { transform: translate(0,0) scale(1); } 45% { transform: translate(-18px,17px) scale(.86); } 72% { transform: translate(9px,-7px) scale(1.09); } }
@keyframes search-pearl { 0%,100% { transform: translate(0,0) scale(1); } 45% { transform: translate(21px,-22px) scale(.77); } 72% { transform: translate(5px,-6px) scale(1.05); } }
@keyframes search-capsule { 0%,100% { transform: rotate(36deg) translate(0,0) scale(1); } 45% { transform: rotate(-6deg) translate(-9px,-15px) scale(.77); } 72% { transform: rotate(46deg) translate(4px,3px) scale(1.08); } }

.agent-stage[data-state="resolving"] .agent-halo { animation: resolve-halo .48s ease-out both; }.agent-stage[data-state="resolving"] .agent-cluster { animation: resolve-cluster .48s cubic-bezier(.2,.8,.3,1) both; }
@keyframes resolve-halo { 0% { opacity: .9; transform: translateY(6px) scale(1.25); } 100% { opacity: .55; transform: translateY(8px) scale(.76); } }
@keyframes resolve-cluster { 0% { transform: scale(1.04); } 55% { transform: scale(.78); } 100% { transform: scale(.84); } }
.agent-stage[data-state="complete"] .agent-piece--blue { animation: complete-blue 1.4s ease-out both; }.agent-stage[data-state="empty"], .agent-stage[data-state="error"] { --agent-scale: .72; --agent-opacity: .7; }.agent-stage[data-state="error"] .agent-piece--blue { background: linear-gradient(145deg, #d9dbe0, #afb4bd); }
@keyframes complete-blue { 0% { transform: scale(1.25); } 55% { transform: scale(.92); } 100% { transform: scale(1); } }

.status { position: absolute; bottom: 25%; margin: 0; color: #878a91; font-size: .77rem; letter-spacing: -.01em; opacity: 0; transform: translateY(5px); transition: opacity .25s, transform .25s; }.status.is-visible { opacity: 1; transform: translateY(0); }

.results-panel { padding-bottom: 26px; }.results-panel[hidden] { display: none; }.results-panel.is-visible .result-card, .results-panel.is-visible .empty-card { animation: result-reveal .54s cubic-bezier(.2,.72,.28,1) both; }.results-panel.is-visible .result-card:nth-child(2) { animation-delay: .07s; }.results-panel.is-visible .result-card:nth-child(3) { animation-delay: .14s; }.results-panel.is-visible .result-card:nth-child(4) { animation-delay: .21s; }
@keyframes result-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
body.has-results .agent-stage { --agent-scale: .64; --agent-y: 0px; --agent-opacity: 1; --halo-scale: .58; --halo-y: 7px; --halo-opacity: .55; min-height: 146px; padding: 22px 0 0; place-items: center; } body.has-results .status { bottom: 5px; font-size: .71rem; }

.results { display: grid; gap: 12px; }.result-card, .empty-card { position: relative; min-width: 0; padding: 20px 19px; border: 1px solid #ececef; border-radius: 21px; background: #ffffff; box-shadow: 0 10px 24px rgba(24,28,35,.045); }.result-meta { display: flex; min-width: 0; align-items: center; gap: 7px; color: #85878e; font-size: .69rem; }.badge, .summary { overflow-wrap: anywhere; }.result-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #2f80ed; }.title { margin: 12px 0 7px; color: #202124; font-size: 1rem; font-weight: 660; line-height: 1.45; letter-spacing: -.025em; }.summary { margin: 0; color: #74777e; font-size: .82rem; line-height: 1.68; white-space: pre-line; }.links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }.cloud-link { min-height: 31px; padding: 7px 10px; border-radius: 10px; color: #24262b; background: #f5f5f7; font-size: .73rem; font-weight: 610; text-decoration: none; transition: background .18s, transform .18s; }.cloud-link:hover { background: #ececf0; transform: translateY(-1px); }.source-page { display: inline-block; margin-top: 15px; color: #357ee1; font-size: .73rem; text-decoration: none; }.source-page span { font-size: .93rem; }.no-links { color: #9699a1; font-size: .74rem; }.empty-card { text-align: center; padding: 31px 20px; }.empty-card h2 { margin: 0 0 8px; font-size: 1rem; font-weight: 650; }.empty-card p { margin: 0; color: #85878e; font-size: .8rem; line-height: 1.65; }

.composer { position: fixed; z-index: 5; bottom: max(23px, calc(env(safe-area-inset-bottom) + 14px)); left: 50%; display: flex; align-items: center; width: min(calc(100% - 48px), 430px); height: 65px; padding: 7px 8px 7px 20px; border: 0; border-radius: 21px; background: #f5f5f7; box-shadow: 0 10px 26px rgba(24,28,35,.08), inset 0 1px rgba(255,255,255,.72); transform: translateX(-50%); transition: box-shadow .25s, background .25s; }.composer:focus-within { background: #f8f8fa; box-shadow: 0 0 0 2px rgba(29,29,31,.16), 0 12px 30px rgba(24,28,35,.11), inset 0 1px rgba(255,255,255,.92); }.composer-search { position: relative; flex: 0 0 auto; width: 23px; height: 23px; margin-right: 14px; border: 2px solid #18191c; border-radius: 50%; }.composer-search::after { position: absolute; right: -6px; bottom: -4px; width: 9px; height: 2px; border-radius: 2px; background: #18191c; content: ""; transform: rotate(48deg); }.composer input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; background: transparent; color: #202124; font-size: 1rem; }.composer button { display: grid; flex: 0 0 auto; width: 49px; height: 49px; place-items: center; border: 0; border-radius: 50%; color: #ffffff; background: #111214; font-size: 2rem; font-weight: 240; line-height: 1; transition: transform .2s, background .2s, opacity .2s; }.composer button span { transform: translateY(-2px); }.composer button:hover { transform: scale(1.045); background: #000000; }.composer button:disabled { cursor: wait; opacity: .62; transform: none; }.composer.is-searching { box-shadow: 0 13px 31px rgba(24,28,35,.13); }.brand:focus-visible, .composer button:focus-visible, .cloud-link:focus-visible, .source-page:focus-visible { outline: 2px solid rgba(29,29,31,.55); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (max-width: 390px) { .brand-header { padding-top: max(35px, calc(env(safe-area-inset-top) + 20px)); }.agent-stage { min-height: calc(100dvh - 195px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }.composer { width: calc(100% - 32px); height: 61px; bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)); }.composer button { width: 45px; height: 45px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }