@import"https://fonts.googleapis.com/css2?family=Lilita+One&family=Quicksand:wght@500;600;700&family=ZCOOL+KuaiLe&display=swap";:root{--ink: #1a2433;--ink-soft: #3d4a5c;--mist: #e8f4fb;--foam: #f7fcff;--sky: #6eb6d9;--sky-deep: #3a8fb5;--lemon: #ffd23f;--tomato: #ff5a5f;--herb: #2ec4a0;--berry: #ff7ab6;--wood: #c98b63;--shadow: 0 14px 0 color-mix(in srgb, var(--ink) 12%, transparent);--shadow-soft: 0 18px 40px color-mix(in srgb, var(--sky-deep) 18%, transparent);--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-spring: cubic-bezier(.34, 1.45, .64, 1);--hud-pad: clamp(14px, 2.4vw, 28px);font-family:ZCOOL KuaiLe,Quicksand,sans-serif;color:var(--ink);-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;overflow:hidden;background:#d7ebf5}button{font:inherit;border:0;cursor:pointer;color:inherit;-moz-appearance:none;appearance:none;-webkit-appearance:none}button:focus-visible{outline:3px solid var(--lemon);outline-offset:3px}.app,.scene,.scene-placeholder{position:fixed;top:0;right:0;bottom:0;left:0}.scene-placeholder{background:radial-gradient(ellipse 80% 55% at 50% 18%,#fff8e8 0%,transparent 55%),radial-gradient(circle at 18% 72%,rgba(46,196,160,.22) 0%,transparent 35%),radial-gradient(circle at 85% 30%,rgba(255,90,95,.16) 0%,transparent 32%),linear-gradient(180deg,#b8dff0,#e8f4fb 48%,#f3e0c4)}.scene canvas{opacity:0;animation:scene-in .7s var(--ease-out) .05s forwards}@keyframes scene-in{to{opacity:1}}.start-gate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:8;display:grid;place-items:center;padding:var(--hud-pad);border:0;background:radial-gradient(ellipse 90% 60% at 50% 0%,#fff6df 0%,transparent 50%),radial-gradient(circle at 12% 78%,rgba(46,196,160,.28) 0%,transparent 28%),radial-gradient(circle at 88% 22%,rgba(255,122,182,.22) 0%,transparent 26%),linear-gradient(165deg,#8ecae6,#c8e7f5 38%,#ffe8b8);overflow:hidden;cursor:pointer}.start-gate:before,.start-gate:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.start-gate:before{width:min(52vw,420px);height:min(52vw,420px);left:-8%;bottom:-12%;background:radial-gradient(circle,rgba(255,210,63,.45),transparent 68%);animation:drift 9s ease-in-out infinite alternate}.start-gate:after{width:min(40vw,320px);height:min(40vw,320px);right:-6%;top:8%;background:radial-gradient(circle,rgba(110,182,217,.5),transparent 70%);animation:drift 11s ease-in-out infinite alternate-reverse}.start-atmosphere{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.start-atmosphere:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-8%;height:28%;background:radial-gradient(ellipse 42% 80% at 18% 40%,rgba(201,139,99,.35),transparent 70%),radial-gradient(ellipse 50% 90% at 78% 30%,rgba(201,139,99,.28),transparent 72%),linear-gradient(180deg,transparent,rgba(255,236,200,.55) 40%,rgba(232,196,150,.7));border-radius:50% 50% 0 0/28% 28% 0 0;opacity:.9}.float-mote{position:absolute;border-radius:50%;opacity:.45;animation:float-up 7s ease-in-out infinite}.start-stage{position:relative;z-index:1;display:grid;justify-items:center;gap:clamp(14px,2.8vh,28px);text-align:center;max-width:720px;padding-bottom:2vh}.start-brand{display:grid;gap:6px}.start-brand-mark{font-family:Lilita One,Quicksand,sans-serif;font-size:clamp(.85rem,2vw,1.05rem);letter-spacing:.34em;text-transform:uppercase;color:var(--sky-deep)}.start-title{margin:0;font-family:ZCOOL KuaiLe,Lilita One,sans-serif;font-size:clamp(4.2rem,16vw,8.5rem);line-height:.88;letter-spacing:.06em;color:var(--ink);text-shadow:0 3px 0 #fff,0 8px 0 color-mix(in srgb,var(--sky) 35%,transparent),0 28px 50px rgba(26,36,51,.1)}.start-title span{color:var(--tomato)}.start-sub{margin:10px auto 0;max-width:16em;font-family:Quicksand,ZCOOL KuaiLe,sans-serif;font-size:clamp(1rem,2.5vw,1.2rem);font-weight:600;line-height:1.5;color:var(--ink-soft)}.start-hero{position:relative;width:clamp(168px,30vw,236px);height:clamp(168px,30vw,236px);display:grid;place-items:center;margin-block:4px}.start-hero-glow{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.95) 0%,rgba(255,246,220,.55) 38%,transparent 70%);animation:pulse-glow 2.4s ease-in-out infinite}.start-hat{position:relative;display:grid;place-items:center;font-size:clamp(5.2rem,14vw,7.4rem);line-height:1;filter:drop-shadow(0 18px 24px rgba(26,36,51,.16))}.start-ring{position:absolute;top:4%;right:4%;bottom:4%;left:4%;border:3px dashed color-mix(in srgb,var(--lemon) 70%,#fff);border-radius:50%;animation:spin 16s linear infinite;opacity:.7}.start-cta{display:inline-flex;align-items:center;gap:12px;margin-top:4px;padding:18px 34px;border-radius:22px;background:linear-gradient(165deg,#ff7a7e 0%,var(--tomato) 100%);color:#fff;font-size:clamp(1.2rem,3.2vw,1.55rem);letter-spacing:.04em;box-shadow:0 12px color-mix(in srgb,var(--tomato) 48%,#6d181c),0 26px 40px #ff5a5f4d;transition:transform .25s var(--ease-spring),box-shadow .25s var(--ease-out)}.start-gate:hover .start-cta,.start-gate:focus-visible .start-cta{transform:translateY(-3px) scale(1.03)}.start-gate:active .start-cta{transform:translateY(4px) scale(.98);box-shadow:0 4px color-mix(in srgb,var(--tomato) 55%,#7a1f24),0 10px 18px #ff5a5f33}.start-cta-dot{width:10px;height:10px;border-radius:50%;background:var(--lemon);box-shadow:0 0 #ffd23fb3;animation:ping 1.6s ease-out infinite}.hud{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:max(var(--hud-pad),env(safe-area-inset-top)) max(var(--hud-pad),env(safe-area-inset-right)) max(var(--hud-pad),env(safe-area-inset-bottom)) max(var(--hud-pad),env(safe-area-inset-left))}.hud-top,.hud-bottom,.panel,.icon-btn,.next-btn,.food-btn{pointer-events:auto}.hud-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.progress{display:flex;align-items:center;gap:4px;padding:10px 14px;max-width:min(640px,calc(100% - 160px));overflow-x:auto;scrollbar-width:none;background:color-mix(in srgb,var(--foam) 82%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-radius:20px;border:1px solid rgba(255,255,255,.65);box-shadow:var(--shadow-soft)}.progress::-webkit-scrollbar{display:none}.dot{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;font-size:15px;opacity:.28;filter:grayscale(1);transition:transform .35s var(--ease-spring),opacity .3s var(--ease-out),filter .3s var(--ease-out)}.dot.done,.dot.current{opacity:1;filter:none}.dot.current{transform:scale(1.28);position:relative}.dot.current:after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border-radius:50%;border:2px solid var(--lemon);animation:ring-pop 1.8s var(--ease-out) infinite}.icon-btn,.next-btn,.food-btn{transition:transform .22s var(--ease-spring),box-shadow .22s var(--ease-out),background .2s ease}.icon-btn:active,.next-btn:active,.food-btn:active{transform:translateY(5px) scale(.96)}.icon-btn{width:68px;height:68px;border-radius:22px;background:color-mix(in srgb,var(--foam) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:30px;border:1px solid rgba(255,255,255,.7);box-shadow:0 8px color-mix(in srgb,var(--sky-deep) 16%,transparent),var(--shadow-soft)}.icon-btn:hover{transform:translateY(-2px)}.icon-btn.is-muted{background:color-mix(in srgb,var(--tomato) 18%,var(--foam))}.hud-bottom{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,2vw,20px);min-height:108px}.next-btn{width:96px;height:96px;border-radius:30px;background:linear-gradient(160deg,#ffe27a,var(--lemon));font-size:46px;border:1px solid rgba(255,255,255,.55);box-shadow:0 10px color-mix(in srgb,var(--lemon) 45%,#b8860b),0 22px 32px #ffd23f47}.next-btn:hover{transform:translateY(-3px)}.next-btn.cook{background:linear-gradient(160deg,#ff8a8d,var(--tomato));box-shadow:0 10px color-mix(in srgb,var(--tomato) 50%,#7a1f24),0 22px 32px #ff5a5f47}.panel{align-self:center;justify-self:center;max-width:min(920px,100%);width:100%}.ingredient-grid{display:grid;grid-template-columns:repeat(6,minmax(72px,1fr));gap:12px;padding:14px;background:color-mix(in srgb,var(--foam) 86%,transparent);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);border-radius:28px;border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-soft)}.food-btn{position:relative;aspect-ratio:1;border-radius:22px;background:linear-gradient(165deg,#fff,#f3f9fd);box-shadow:0 7px color-mix(in srgb,var(--ink) 10%,transparent)}.food-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;border:3px solid transparent;pointer-events:none;transition:border-color .2s ease}.food-btn.group-staple:before{border-color:color-mix(in srgb,var(--lemon) 75%,transparent)}.food-btn.group-protein:before{border-color:color-mix(in srgb,var(--tomato) 75%,transparent)}.food-btn.group-veggie:before{border-color:color-mix(in srgb,var(--herb) 75%,transparent)}.food-btn:hover{transform:translateY(-4px)}.food-btn.selected{transform:translateY(-5px) scale(1.04);background:#fff;box-shadow:0 10px color-mix(in srgb,var(--herb) 35%,transparent),0 16px 24px #2ec4a033}.check-pip{position:absolute;right:5px;top:5px;width:24px;height:24px;border-radius:50%;background:var(--herb);color:#fff;font-size:14px;display:grid;place-items:center;box-shadow:0 3px color-mix(in srgb,var(--herb) 55%,#0b5);animation:pop-in .35s var(--ease-spring)}.food-icon{display:grid;place-items:center;width:100%;height:100%}.food-icon-glyph{font-size:clamp(34px,4.2vw,56px);line-height:1;filter:drop-shadow(0 3px 0 rgba(26,36,51,.12))}.food-icon-block{width:54%;height:44%;border-radius:10px;background:linear-gradient(#fffdf5 55%,#f0e8cf);box-shadow:0 4px #d8cfae,inset 0 -4px #d8cfae80}.rainbow-panel{display:grid;place-items:center;gap:18px}.rainbow-plate{width:clamp(180px,28vw,230px);height:clamp(180px,28vw,230px);display:grid;place-items:center;position:relative;filter:drop-shadow(0 22px 30px rgba(26,36,51,.16))}.rainbow-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:conic-gradient(#ff5a5f,#ff9f1c,#ffd23f,#2ec4a0,#6eb6d9,#ff7ab6,#ff5a5f);animation:spin 7s linear infinite}.rainbow-plate.two .rainbow-ring{background:conic-gradient(#ffd23f,#ff5a5f,#fff4df,#ffd23f)}.rainbow-plate.one .rainbow-ring,.rainbow-plate.practice .rainbow-ring{background:conic-gradient(#ffd23f,#fff4df,#ffd23f)}.rainbow-core{position:relative;width:66%;height:66%;border-radius:50%;background:linear-gradient(165deg,#fff,#fff8ea);display:grid;place-items:center;font-size:clamp(3.2rem,8vw,4.6rem);box-shadow:inset 0 -8px #1a24330d}.group-pips{display:flex;gap:12px;padding:12px 16px;border-radius:24px;background:color-mix(in srgb,var(--foam) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-soft)}.group-pip{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-size:32px;background:#e8eef4;opacity:.4;filter:grayscale(1);transition:transform .35s var(--ease-spring),opacity .3s ease,filter .3s ease,background .3s ease}.group-pip.on{opacity:1;filter:none;background:#fff;transform:translateY(-3px);box-shadow:0 7px color-mix(in srgb,var(--ink) 12%,transparent)}.group-pip.on.staple{outline:3px solid var(--lemon)}.group-pip.on.protein{outline:3px solid var(--tomato)}.group-pip.on.veggie{outline:3px solid var(--herb)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes drift{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(18px,-22px,0) scale(1.08)}}@keyframes float-up{0%,to{transform:translateZ(0);opacity:.25}50%{transform:translate3d(12px,-28px,0);opacity:.7}}@keyframes pulse-glow{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.12);opacity:1}}@keyframes ping{0%{box-shadow:0 0 #ffd23fb3}70%{box-shadow:0 0 0 14px #ffd23f00}to{box-shadow:0 0 #ffd23f00}}@keyframes ring-pop{0%,to{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:.35}}@keyframes pop-in{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@media(max-width:800px){.ingredient-grid{grid-template-columns:repeat(4,minmax(64px,1fr));gap:10px;padding:12px}.icon-btn{width:58px;height:58px;font-size:26px;border-radius:18px}.next-btn{width:84px;height:84px;font-size:40px;border-radius:26px}.progress{flex:1;max-width:none;min-width:0;justify-content:space-between;gap:0;padding:8px 10px}.dot{width:22px;height:22px;font-size:12px}.dot.current{transform:scale(1.18)}.start-cta{padding:14px 22px}}@media(max-width:480px){.ingredient-grid{grid-template-columns:repeat(3,minmax(56px,1fr))}.hud-bottom{min-height:92px}.group-pip{width:52px;height:52px;font-size:26px}.icon-btn{width:52px;height:52px;font-size:24px;border-radius:16px}.progress{padding:6px 8px}.dot{width:20px;height:20px;font-size:11px}}@media(prefers-reduced-motion:reduce){.start-ring,.rainbow-ring,.float-mote,.start-gate:before,.start-gate:after,.start-hero-glow,.start-cta-dot,.dot.current:after,.scene canvas{animation:none!important}.scene canvas{opacity:1}.icon-btn,.next-btn,.food-btn,.group-pip{transition:none}}