body.welcome-guide-open{overflow:hidden}
dialog.welcome-guide{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden;color:var(--green-dark,#164a2d)}
dialog.welcome-guide::backdrop{background:transparent}
.welcome-guide-veil{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.welcome-guide .welcome-guide-card{display:flex;flex-direction:column;overflow:hidden}
.welcome-guide-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:3px;margin:-3px}
.welcome-guide .welcome-guide-top,.welcome-guide .welcome-guide-progress,.welcome-guide .welcome-guide-actions,.welcome-guide .welcome-guide-other{flex-shrink:0}
.welcome-guide-card{position:absolute;box-sizing:border-box;width:380px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;padding:24px;border:1px solid #dbe7d5;border-radius:20px;background:#fbfdf8;box-shadow:0 16px 64px #0c302340;text-align:left}
.welcome-guide-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.welcome-guide-top button{flex:none;padding:10px 14px;min-height:44px;border:1px solid #d7dfd1;border-radius:10px;background:#edf0e8;color:#526452;font:inherit;font-size:14px;font-weight:650;line-height:1.4;cursor:pointer;transition:background-color .18s,transform .15s}
.welcome-guide-top button:hover{background:#e1e8dc}
.welcome-guide-top button:active{transform:scale(.97)}
.welcome-guide-progress{display:flex;justify-content:center;align-items:center;gap:10px;min-height:18px;margin:17px 0 13px}
.welcome-guide-progress i{position:relative;flex:none;width:9px;height:9px;overflow:hidden;border-radius:50%;background:#dce7d7}
.welcome-guide-progress i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#9cbea4;transform:scale(0)}
.welcome-guide-progress .is-done::after,.welcome-guide-progress .is-current::after{transform:scale(1)}
.welcome-guide-progress .is-current{overflow:visible;box-shadow:0 0 0 3px #e0ecde}
.welcome-guide-progress .is-current::after{background:#247b46}
.welcome-guide-progress .is-arriving::after{animation:welcome-progress-fill .32s cubic-bezier(.2,.75,.25,1) both}
.welcome-guide-logo{display:block;width:145px;height:auto;margin:0 0 20px}
#welcome-guide-title{min-width:0;margin:0;font-size:28px;line-height:1.2;color:#164a2d;outline:none}
#welcome-guide-description{margin:0 0 22px;font-size:17px;line-height:1.6;color:#334c3e}
.welcome-guide-options{display:flex;flex-direction:column;gap:10px;margin:0 0 22px;padding:0;border:0}
.welcome-guide-options legend{margin-bottom:12px;font-size:14px;font-weight:700;color:#164a2d}
.welcome-guide-options label{display:flex;align-items:center;gap:11px;min-height:50px;padding:12px;border:1px solid #cadbc4;border-radius:11px;background:#fff;font-size:16px;line-height:1.4;cursor:pointer;transition:background-color .2s,border-color .2s,box-shadow .2s,transform .15s}
.welcome-guide-options label:has(input:checked){border-color:#247b46;background:#e8f4e7;box-shadow:0 0 0 1px #247b4620}
.welcome-guide-options label:active{transform:scale(.99)}
.welcome-guide-options label>span{flex:1}
.welcome-guide-options label::after{content:"";flex:none;width:6px;height:11px;margin:0 3px 3px 0;border:solid #247b46;border-width:0 2px 2px 0;opacity:0;transform:rotate(45deg) scale(.5);transition:opacity .2s,transform .2s}
.welcome-guide-options label:has(input:checked)::after{opacity:1;transform:rotate(45deg) scale(1)}
.welcome-guide-options input{flex:none;width:19px;height:19px;margin:0;accent-color:#247b46}
.welcome-guide-actions{display:flex;align-items:stretch;gap:10px;margin-top:6px}
.welcome-guide-actions .primary{flex:1;min-width:0;min-height:50px;padding:13px 16px;font-size:15px;line-height:1.4;white-space:normal}
.welcome-guide-actions .text{flex:none;padding:12px 0;min-width:52px;font-size:14px}
.welcome-guide-other{display:block;width:100%;min-height:44px;margin:10px 0 0;text-align:center;font-size:14px}
.welcome-guide-recipe{display:flex;align-items:center;gap:14px;margin:0 0 22px;padding:12px;border:1px solid #dce7d7;border-radius:12px;background:#e8f4e7}
.welcome-guide-recipe img{flex:none;width:64px;height:64px;border-radius:9px;object-fit:cover}
.welcome-guide-recipe strong,.welcome-guide-recipe span{display:block}.welcome-guide-recipe strong{font-size:16px;line-height:1.35}.welcome-guide-recipe span{margin-top:5px;font-size:14px;color:#59695c}
.welcome-guide-note{margin:-8px 0 18px;font-size:13px;line-height:1.5;color:#59695c}
.welcome-guide-water{display:flex;align-items:flex-start;gap:12px;margin:0 0 20px}
.welcome-guide-water p{margin:0;font-size:16px;line-height:1.5;color:#334c3e}
.welcome-guide-water-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border:3px solid #f3d783;border-radius:50%;background:#12679b;color:white}
.welcome-guide-water-icon svg{width:29px;height:29px}
.welcome-guide-water+.welcome-guide-options legend{font-size:16px;line-height:1.4}
.welcome-guide .welcome-guide-feedback{min-height:20px;margin:-8px 0 14px;font-size:13px;line-height:1.5;font-weight:600;color:#247b46}
.welcome-guide .welcome-guide-actions button,.welcome-guide .welcome-guide-other{transition:background-color .18s,box-shadow .18s,transform .15s}
.welcome-guide .welcome-guide-actions button:active,.welcome-guide .welcome-guide-other:active{transform:scale(.98)}
.welcome-guide-veil rect{transition:opacity .2s}
.welcome-guide[data-transitioning] [data-guide]{cursor:progress}
@keyframes welcome-progress-fill{from{transform:scale(.4);opacity:.4}to{transform:scale(1);opacity:1}}
.comfortable-reading #welcome-guide-title{font-size:31px}
.comfortable-reading #welcome-guide-description{font-size:20px;line-height:1.6}
.comfortable-reading .welcome-guide-options label{font-size:18px}
.comfortable-reading .welcome-guide-actions .primary{font-size:17px}
.comfortable-reading .welcome-guide-water p{font-size:18px}
.comfortable-reading .welcome-guide-feedback{font-size:15px}
.welcome-guide button:focus-visible,.welcome-guide input:focus-visible{outline:3px solid #b4822b;outline-offset:3px}
@media(max-width:800px){
 .welcome-guide-card{width:calc(100vw - 32px);padding:20px;max-height:calc(100dvh - 130px - env(safe-area-inset-bottom,0px))}
 .welcome-guide[data-stage="0"] .welcome-guide-card,.welcome-guide[data-stage="5"] .welcome-guide-card{max-height:calc(100dvh - 32px - env(safe-area-inset-bottom,0px))}
 #welcome-guide-title{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
 .welcome-guide *,.welcome-guide *::after{animation:none!important;transition:none!important}
 .welcome-guide-options label:active,.welcome-guide .welcome-guide-actions button:active,.welcome-guide .welcome-guide-other:active{transform:none}
}