.agent-tree .rec{--z:.72;justify-content:center;display:flex}.agent-tree .rec-phone{border:9px solid var(--phone-bezel);background:var(--phone-bezel);border-radius:34px;overflow:hidden}.agent-tree .rec-screen{zoom:var(--z);background:var(--rec-surface);width:360px;height:760px;color:var(--rec-on-surface);letter-spacing:.25px;font:14px/20px Roboto,system-ui,sans-serif;position:relative;overflow:hidden}.agent-tree .rec-cam{background:var(--phone-bezel);z-index:5;border-radius:50%;width:12px;height:12px;position:absolute;top:9px;left:50%;translate:-50%}.agent-tree .rec-route{flex-direction:column;display:flex;position:absolute;inset:0}.agent-tree .rec-route.is-entering{animation:.25s ease-out both spx-in}:where(.agent-tree .rec button){font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer;background:0 0;border:0;padding:0}.agent-tree .rec .mi{fill:currentColor;width:24px;height:24px}.agent-tree .rec :is(h1,h2,h3,h4,p,ul){margin:0}.agent-tree .rec-bar{z-index:1;background:var(--rec-green-pastel);flex:none;align-items:center;height:92px;padding:28px 4px 0;display:flex;position:relative}.agent-tree .rec-bar h1{text-align:center;letter-spacing:0;color:var(--rec-on-surface);white-space:nowrap;text-overflow:ellipsis;font:400 22px/28px Roboto,sans-serif;position:absolute;bottom:18px;left:56px;right:56px;overflow:hidden}.agent-tree .rec-bar.is-raised{border-bottom:1px solid var(--rec-divider);box-shadow:0 2px 4px color-mix(in srgb, var(--rec-shadow) 22%, transparent)}.agent-tree .rec-bar.is-raised h1{font-weight:700}.agent-tree .rec-icon-btn{border-radius:50%;flex:none;place-items:center;width:48px;height:48px;display:grid}.agent-tree .rec-icon-btn:hover{background:color-mix(in srgb, var(--rec-on-surface) 8%, transparent)}.agent-tree .rec-page{flex-direction:column;flex:1;min-height:0;display:flex}.agent-tree .rec-page.is-gray{background:var(--rec-bg-gray)}.agent-tree .rec-scroll{scrollbar-width:none;flex:1;min-height:0;overflow-y:auto}.agent-tree .rec-center{text-align:center;flex:1;place-items:center;padding:16px;display:grid}.agent-tree .rec-top{padding:16px}.agent-tree .rec-error{color:var(--rec-error)}.agent-tree .rec-spinner{border:4px solid #0000;border-top-color:var(--rec-primary);border-right-color:var(--rec-primary);border-radius:50%;width:40px;height:40px;animation:.9s linear infinite rec-spin;display:block}@keyframes rec-spin{to{rotate:1turn}}.agent-tree .rec-filters{scrollbar-width:none;flex:none;gap:4px;padding:8px 1px 16px;display:flex;overflow-x:auto}.agent-tree .rec-pill{background:var(--rec-card-gray);min-width:58px;height:36px;color:var(--rec-on-surface);letter-spacing:.1px;border-radius:18px;flex:none;padding:0 24px;font-weight:400}.agent-tree .rec-pill.is-on{background:var(--rec-green);color:var(--rec-white);font-weight:700}.agent-tree .rec-cats{grid-template-columns:1fr 1fr;align-content:start;gap:20px;padding:0 12px 12px;display:grid}.agent-tree .rec-cat{background:var(--rec-card-gray);height:170px;box-shadow:0 1px 3px color-mix(in srgb, var(--rec-shadow) 20%, transparent);border-radius:16px;flex-direction:column;align-items:center;gap:8px;padding:12px;display:flex}.agent-tree .rec-cat img{object-fit:cover;border-radius:10px;width:100%;height:110px}.agent-tree .rec-cat span{letter-spacing:.15px;font:700 16px/24px Roboto,sans-serif}.agent-tree .rec-search{flex:none;align-items:center;padding:24px 8px 8px;display:flex}.agent-tree .rec-search input{border:1px solid var(--rec-outline);min-width:0;height:56px;color:var(--rec-on-surface);caret-color:var(--rec-primary);letter-spacing:.5px;appearance:none;background:0 0;border-radius:4px;flex:1;padding:0 15px;font:400 16px/24px Roboto,sans-serif}.agent-tree .rec-search input::placeholder{color:var(--rec-on-surface-variant)}.agent-tree .rec-search input::-webkit-search-cancel-button{display:none}.agent-tree .rec-search input:focus{border:2px solid var(--rec-primary);outline:none;padding:0 14px}.agent-tree .rec-meals{grid-template-columns:1fr 1fr;grid-auto-rows:195px;align-content:start;gap:12px;padding:8px;display:grid}.agent-tree .rec-meal{background:var(--rec-card);box-shadow:0 4px 10px color-mix(in srgb, var(--rec-shadow) 28%, transparent);border-radius:16px;display:block;position:relative;overflow:hidden}.agent-tree .rec-meal img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.agent-tree .rec-meal:after{content:"";background:linear-gradient(transparent, color-mix(in srgb, var(--rec-shadow) 85%, transparent));height:70px;position:absolute;inset:auto 0 0}.agent-tree .rec-meal span{z-index:1;-webkit-line-clamp:2;text-align:left;color:var(--rec-white);letter-spacing:0;-webkit-box-orient:vertical;font:800 22px/28px Roboto,sans-serif;display:-webkit-box;position:absolute;bottom:10px;left:8px;right:8px;overflow:hidden}.agent-tree .rec-detail{flex-direction:column;gap:16px;padding:16px;display:flex}.agent-tree .rec-card{background:var(--rec-card);box-shadow:0 1px 3px color-mix(in srgb, var(--rec-shadow) 22%, transparent);border-radius:12px;flex:none;padding:16px}.agent-tree .rec-card.is-hero{box-shadow:0 2px 6px color-mix(in srgb, var(--rec-shadow) 26%, transparent);padding:0;overflow:hidden}.agent-tree .rec-card.is-hero img{object-fit:cover;width:100%;height:250px;display:block}.agent-tree .rec-card.is-hero div{padding:16px}.agent-tree .rec-card h2{letter-spacing:0;margin-bottom:8px;font:700 28px/36px Roboto,sans-serif}.agent-tree .rec-row{letter-spacing:.5px;justify-content:space-between;gap:8px;font-size:16px;line-height:24px;display:flex}.agent-tree .rec-tags{color:var(--rec-secondary);margin-top:8px}.agent-tree .rec-card h3{letter-spacing:0;color:var(--rec-green);margin-bottom:8px;font:700 22px/28px Roboto,sans-serif}.agent-tree .rec-card ul{padding:0;list-style:none}.agent-tree .rec-card li{padding:2px 0}.agent-tree .rec-steps{white-space:pre-line;line-height:24px}.agent-tree .rec-card h4{letter-spacing:.15px;margin-bottom:4px;font:600 16px/24px Roboto,sans-serif}.agent-tree .rec-link{color:var(--rec-green);word-break:break-all;border-radius:20px;margin-left:-12px;padding:10px 12px;text-decoration:none;display:inline-block}.agent-tree .rec-link:hover{background:color-mix(in srgb, var(--rec-green) 8%, transparent)}@media (width<=720px),(height<=760px){.agent-tree .rec{--z:.62}}@media (prefers-reduced-motion:reduce){.agent-tree .rec-spinner{animation-duration:2.4s}}
