@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap";
:root{--font-main:"Outfit",sans-serif;--radius:18px;--radius-sm:12px;--radius-lg:26px;--radius-xl:36px;--primary:#8b4513;--primary-dark:#5d2e0c;--primary-light:sienna;--accent:#f4a460;--accent-light:#ffdab9;--secondary:#deb887;--surface:#fff8f0;--surface-elevated:#fff;--text-main:#2c1810;--text-light:#8b7355;--text-muted:#a89080;--text-primary:var(--text-main);--text-secondary:var(--text-muted);--card-bg:#fff;--card-border:#8b451314;--glass-hover:#8b45130f;--accent-primary:var(--primary);--accent-secondary:var(--accent);--bg-main:var(--surface-elevated);--glass-border:#8b45131a;--shadow-sm:0 4px 12px 0 #8b45130f;--shadow:0 8px 24px 0 #8b451314;--shadow-lg:0 16px 36px 0 #8b45131f;--shadow-xl:0 26px 60px 0 #8b451329;--card-radius:var(--radius);--card-shadow:var(--shadow);--card-shadow-hover:var(--shadow-lg);--chip-bg:#8b451314;--chip-border:#8b451333;--icon-badge-bg:#8b451314;--btn-radius:999px;--success:#4caf50;--success-light:#4caf501a;--warning:#ff9800;--warning-light:#ff98001a;--error:#f44336;--error-light:#f443361a;--transition-fast:.15s ease;--transition:.3s ease;--transition-slow:.5s ease;--transition-bounce:.4s cubic-bezier(.175,.885,.32,1.275)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:1.6;overflow-x:hidden}html{scroll-behavior:smooth}:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}::selection{background:var(--accent);color:var(--primary-dark)}h1,h2,h3{color:var(--primary);font-weight:700}a{color:inherit;text-decoration:none}ul{list-style:none}img,video,svg,canvas{max-width:100%;height:auto}.glass-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}.glass-card:hover{box-shadow:var(--card-shadow-hover);border-color:#8b451329;transform:translateY(-2px)}.btn{border-radius:var(--btn-radius);border:1px solid var(--card-border);background:var(--card-bg);color:var(--text-primary);cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast);justify-content:center;align-items:center;gap:.5rem;padding:.7rem 1.2rem;font-weight:600;display:inline-flex}.btn:hover{box-shadow:var(--shadow-sm);border-color:#8b451333;transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border-color:#0000}.btn-secondary{color:var(--accent-primary);background:#8b451314}.btn-ghost{background:0 0;border-color:#0000}.chip{background:var(--chip-bg);border:1px solid var(--chip-border);color:var(--accent-primary);border-radius:999px;align-items:center;gap:.35rem;padding:.35rem .75rem;font-size:.78rem;font-weight:600;display:inline-flex}.icon-badge{background:var(--icon-badge-bg);border:1px solid #8b45131f;border-radius:14px;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg,var(--surface)25%,var(--secondary)50%,var(--surface)75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.5s infinite shimmer}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.5s forwards fadeIn}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.title-gradient{background:linear-gradient(135deg,var(--primary)0%,var(--accent)100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);font-weight:600;font-family:var(--font-main);border:none;justify-content:center;align-items:center;gap:.5rem;padding:.8rem 1.5rem;display:inline-flex;position:relative;overflow:hidden}.btn:after{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);transition:transform .5s;position:absolute;inset:0;transform:translate(-100%)}.btn:hover:after{transform:translate(100%)}.btn-primary{background:linear-gradient(135deg,var(--primary)0%,var(--primary-light)100%);color:#fff;box-shadow:0 4px 15px #8b451333}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #8b45134d}.btn-primary:active{transform:translateY(0);box-shadow:0 2px 10px #8b451333}.btn-secondary{color:var(--primary);border:2px solid var(--primary);background:0 0}.btn-secondary:hover{background:var(--primary);color:#fff}.btn-ghost{color:var(--primary);background:#8b45130d}.btn-ghost:hover{background:#8b45131a}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.app-footer{text-align:center;color:var(--text-muted);padding:2.5rem 1rem;padding-bottom:calc(7rem + env(safe-area-inset-bottom));background:linear-gradient(#0000 0%,#8b451305 100%);border-top:1px solid #8b45130f;font-size:.9rem}.app-footer-title{margin-bottom:.5rem}.app-footer-title strong{color:var(--primary)}.app-footer-subtitle{opacity:.85;font-size:.85rem}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--secondary);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}html,body{width:100%;overflow-x:hidden}@media (max-width:768px){.container{padding:0 1rem}main{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}button,a,input,select,textarea{min-height:44px}button:active,a:active{transform:scale(.98)}.glass-card:hover{transform:none}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}@media (max-width:380px){:root{font-size:14px}.container{padding:0 .75rem}input,select,textarea{font-size:16px}}@supports (padding:max(0px)){body{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right));padding-bottom:max(0px,env(safe-area-inset-bottom))}}html{-moz-text-size-adjust:100%;text-size-adjust:100%}*{-webkit-overflow-scrolling:touch}@media (max-width:768px){::-webkit-scrollbar{width:0;height:0}}
:root{--primary:#8b4513;--primary-dark:#5d2e0c;--primary-light:sienna;--secondary:tan;--accent:#f4a460;--accent-light:#ffdab9;--background:snow;--surface:#ffffffe6;--surface-elevated:#fff;--text-main:#2d2d2d;--text-muted:#555;--text-light:#777;--glass-bg:#ffffffd9;--glass-border:#00000014;--card-shadow:0 8px 32px 0 #8b451314;--bg-gradient:linear-gradient(135deg,#fdfbfb 0%,#f5f3f0 50%,#ebedee 100%)}body{background:var(--bg-gradient);color:var(--text-main);background-attachment:fixed;min-height:100vh;font-family:Outfit,sans-serif;position:relative}body:before{content:"";pointer-events:none;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238b4513' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");position:fixed;inset:0}@media (max-width:768px){body{background-attachment:scroll}body:before{position:absolute}}.glass-card{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-main);-webkit-backdrop-filter:blur(16px);box-shadow:var(--card-shadow);transition:all .3s}.glass-card:hover{box-shadow:0 12px 40px #8b45131f}h1,h2,h3{color:var(--primary);letter-spacing:-.02em;font-weight:700;line-height:1.2}h1{font-size:clamp(1.8rem,4vw,2.5rem)}h2{font-size:clamp(1.4rem,3vw,2rem)}h3{font-size:clamp(1.1rem,2vw,1.4rem)}p,span,li,div{color:var(--text-main)}p{line-height:1.7}.text-muted{color:var(--text-muted)}.btn-primary{background:linear-gradient(135deg,var(--primary)0%,var(--primary-light)100%);border:none;border-radius:12px;padding:.8rem 1.5rem;font-weight:600;transition:all .3s;box-shadow:0 4px 15px #8b451333;color:#fff!important}.btn-primary:hover{filter:brightness(1.05);transform:translateY(-3px);box-shadow:0 8px 25px #8b45134d}.btn-primary:active{transform:translateY(-1px);box-shadow:0 4px 15px #8b451333}.ingredients-list li,.steps-list li{color:var(--text-main)!important;border-bottom:1px solid #0000000d!important}.meta-box{background:#fff!important;border:1px solid #0000000d!important;box-shadow:0 2px 8px #00000005!important}.meta-box .label{color:var(--text-muted)!important}.meta-value{color:var(--primary)!important}
@keyframes pageEnter{0%{opacity:0;transform:translateY(30px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes heroEnter{0%{opacity:0;filter:blur(8px);transform:translateY(40px)scale(.96)}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}@keyframes cardStagger{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.enhanced-glass{-webkit-backdrop-filter:blur(20px)saturate(180%);background:linear-gradient(135deg,#fffffffa 0%,#fffaf5f2 100%);border:1px solid #8b45131f;box-shadow:0 8px 32px #8b45131a,0 4px 16px #0000000d,inset 0 1px #ffffffe6}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}.shimmer-effect{position:relative;overflow:hidden}.shimmer-effect:before{content:"";background:linear-gradient(90deg,#0000,#fff9,#0000);width:100%;height:100%;animation:2s infinite shimmer;position:absolute;top:0;left:-100%}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.float-animation{animation:3s ease-in-out infinite float}@keyframes pulseGlow{0%,to{box-shadow:0 0 20px #f4a4604d,0 0 40px #f4a4601a}50%{box-shadow:0 0 30px #f4a46080,0 0 60px #f4a46033}}@keyframes gradientRotate{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.gradient-border{background:linear-gradient(135deg,var(--primary),var(--accent),var(--primary));background-size:200% 200%;animation:3s infinite gradientRotate;position:relative}.magnetic-hover{transition:transform .3s cubic-bezier(.16,1,.3,1)}.magnetic-hover:hover{transform:scale(1.05)rotate(1deg)}.card-tilt{transform-style:preserve-3d;transition:transform .3s}.card-tilt:hover{transform:perspective(1000px)rotateX(2deg)rotateY(-2deg)translateZ(10px)}@keyframes ripple{to{opacity:0;transform:scale(4)}}.ripple-container{position:relative;overflow:hidden}.ripple{background:#f4a46099;border-radius:50%;animation:.6s ease-out ripple;position:absolute;transform:scale(0)}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1)}}@keyframes rotateIn{0%{opacity:0;transform:rotate(-10deg)scale(.8)}to{opacity:1;transform:rotate(0)scale(1)}}@keyframes fadeScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.animate-slide-left{animation:.6s cubic-bezier(.16,1,.3,1) slideInLeft}.animate-slide-right{animation:.6s cubic-bezier(.16,1,.3,1) slideInRight}.animate-slide-up{animation:.6s cubic-bezier(.16,1,.3,1) slideInUp}.animate-bounce{animation:.6s cubic-bezier(.16,1,.3,1) bounceIn}.animate-rotate{animation:.5s cubic-bezier(.16,1,.3,1) rotateIn}.animate-fade-scale{animation:.4s ease-out fadeScale}.scroll-reveal{opacity:0;transition:all .8s cubic-bezier(.16,1,.3,1);transform:translateY(30px)}.scroll-reveal.revealed{opacity:1;transform:translateY(0)}.shadow-soft{box-shadow:0 4px 20px #8b451314,0 2px 8px #0000000a}.shadow-medium{box-shadow:0 12px 40px #8b45131f,0 6px 16px #0000000f}.shadow-strong{box-shadow:0 20px 60px #8b45132e,0 10px 30px #00000014}.gradient-text{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.blur-bg{-webkit-backdrop-filter:blur(16px)}.blur-bg-strong{-webkit-backdrop-filter:blur(24px)}.frosted-glass{-webkit-backdrop-filter:blur(20px)saturate(180%);background:#ffffffb3;border:1px solid #ffffff4d}