:root{--g:#4f9a6b;--bg:#f7faf7;--t:#2d3a32;--m:#6b7a70;--c:#fff;--r:18px}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,"Noto Sans","Noto Sans Bengali","Noto Sans Devanagari","Noto Sans JP","Noto Sans Arabic",sans-serif;background:var(--bg);color:var(--t);line-height:1.6}
header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:14px 20px;background:#fff;box-shadow:0 1px 8px #0000000d;position:sticky;top:0;z-index:5}
.brand{font-weight:700;color:var(--g);text-decoration:none;font-size:1.2rem}nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
nav a{color:var(--t);text-decoration:none}.pill,.btn{background:var(--g);color:#fff!important;padding:8px 16px;border-radius:999px;border:0;cursor:pointer;font-size:1rem;text-decoration:none;display:inline-block;transition:background .3s}
.btn:hover,.pill:hover{background:#428558}.btn.sec{background:#e3efe6;color:var(--t)!important}.btn:disabled{opacity:.5;cursor:default}
select{padding:6px 10px;border-radius:10px;border:1px solid #cfdcd2;background:#fff}
main{max-width:1050px;margin:auto;padding:20px}.hero{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin:10px 0 30px}
.hero img,.cover{width:100%;border-radius:var(--r)}h1{font-size:2rem;line-height:1.25}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.card{background:var(--c);border-radius:var(--r);overflow:hidden;box-shadow:0 2px 12px #0000000a;text-decoration:none;color:inherit;display:block;transition:transform .3s}
.card:hover{transform:translateY(-2px)}.card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.card div{padding:14px}.card h3{margin:0 0 6px}.card p{margin:0;color:var(--m)}
.tag{font-size:.8rem;padding:2px 10px;border-radius:999px;background:#e3efe6;color:var(--g);margin-top:8px;display:inline-block}.tag.l{background:#f3ece2;color:#9a6b2f}
article{background:#fff;border-radius:var(--r);padding:24px;box-shadow:0 2px 12px #0000000a}article li{margin:8px 0}
.lock{background:#fffaf2;border:1px solid #f0e0c4;border-radius:var(--r);padding:20px;text-align:center}
.disc,footer{color:var(--m);font-size:.9rem}footer{text-align:center;padding:30px 20px}
.box{background:#fff;border-radius:var(--r);padding:22px;box-shadow:0 2px 12px #0000000a;margin-top:16px}
.drop{border:2px dashed #cfdcd2;border-radius:var(--r);padding:20px;text-align:center}.drop img,.drop video{max-width:100%;max-height:320px;border-radius:12px;margin-top:10px}
.notice{background:#eef5fb;border-radius:12px;padding:12px 16px;color:#3c5a73;margin-top:12px}
.nut{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:12px 0}.nut div{background:#f1f7f2;border-radius:12px;padding:10px;text-align:center}.nut b{display:block;font-size:1.3rem;color:var(--g)}
.price{font-size:2.6rem;font-weight:700;color:var(--g)}ul.f{list-style:none;padding:0}ul.f li:before{content:"✓ ";color:var(--g)}
[dir=rtl] body{text-align:right}
@media(max-width:700px){.hero{grid-template-columns:1fr}h1{font-size:1.6rem}header{padding:10px}}
.chips{margin:12px 0;display:flex;flex-wrap:wrap;gap:6px}.rt{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.rt>div{background:#f1f7f2;border-radius:14px;padding:4px 14px}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.form input,.form select{width:100%;padding:7px;border-radius:10px;border:1px solid #cfdcd2}
.mp{width:100%;border-collapse:collapse}.mp td{padding:8px;border-bottom:1px solid #e3efe6;vertical-align:top}.nut small{display:block;color:var(--m)}
/* v0.3 */
.fi{width:110px;height:66px;border-radius:10px;object-fit:cover;display:block}.mp td{vertical-align:middle;padding:6px}
.steps2{display:flex!important;padding:0!important;background:#f3f8f4}.steps2 img{width:50%!important;aspect-ratio:1!important}
.exsteps{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}.st{background:#f7faf7;border-radius:14px;padding:10px}.st img{width:100%;border-radius:12px}
.pl{list-style:none;padding:0}.pl li{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0}.pl a{display:flex;align-items:center;gap:8px;color:inherit}.pl img{width:40px;height:40px;border-radius:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}h2{margin-top:30px}
.breath{text-align:center}.circle{width:220px;height:220px;margin:24px auto;border-radius:50%;background:radial-gradient(circle,#cfe8f3,#9fc9e6);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:scale(.6);color:#28465a;font-size:1.3rem;box-shadow:0 0 40px #9fc9e680}.circle b{font-size:2rem}
.song img{width:100%;height:90px;object-fit:cover;border-radius:12px}.song pre{white-space:pre-wrap;font-family:inherit;color:var(--t);font-style:italic;line-height:1.7}
.snd.on{outline:3px solid var(--g)}.snd input[type=range]{width:55%;vertical-align:middle}.tm{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.recipe{background:#fbf8f2;border-radius:14px;padding:16px;margin-top:14px}.rcols{display:grid;grid-template-columns:1fr 1.5fr;gap:18px}@media(max-width:700px){.rcols{grid-template-columns:1fr}}

.brand{display:flex;align-items:center;gap:8px}.brand img{border-radius:9px;flex:none}.brand span{display:flex;flex-direction:column;line-height:1.1}.brand small{font-size:.72rem;font-weight:400;color:var(--m)}
img{max-width:100%}html,body{overflow-x:hidden}
@media(max-width:700px){header{flex-wrap:nowrap;flex-direction:column;align-items:stretch;gap:6px}header .brand{justify-content:flex-start}nav{flex-wrap:nowrap;overflow-x:auto;gap:14px;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}nav::-webkit-scrollbar{display:none}nav a,nav select{flex:none;white-space:nowrap;font-size:.95rem}.pill{padding:6px 12px}}
@media(max-width:700px){nav select{position:absolute;top:14px;right:10px;max-width:110px}html[dir=rtl] nav select{right:auto;left:10px}nav .pill{order:-1}}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin:1rem 0}.plan{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.plan.best{border:2px solid var(--g)}.plan .badge{position:absolute;top:-.8rem;background:var(--g);color:#fff;border-radius:1rem;padding:.1rem .8rem;font-size:.8rem}.plan .save{color:var(--g);font-weight:700}
/* v0.5 mobile-first */
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-size:16px}
.btn,.pill,select,input,button{min-height:48px;font-size:1rem}.btn,.pill{display:inline-flex;align-items:center;justify-content:center}
.form input,.form select{min-height:48px;font-size:16px}
#app.fade{animation:fd .18s ease-out}@keyframes fd{from{opacity:.4}to{opacity:1}}
.bnav{display:none}
@media(max-width:820px){
 body{font-size:17px;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
 header{flex-direction:row!important;flex-wrap:nowrap;align-items:center!important;padding:8px 12px}
 header nav a:not(.pill){display:none}header nav{overflow:visible;gap:8px;padding:0}
 nav select{position:static!important;max-width:96px;min-height:40px;padding:4px 6px}
 header .pill{min-height:40px;padding:6px 14px;font-size:.95rem}
 .brand small{display:none}
 main{padding:14px}h1{font-size:1.5rem}h2{font-size:1.25rem}
 .grid,.rt,.exsteps,.plans{grid-template-columns:1fr!important;gap:14px}
 .card{display:flex;align-items:center;min-height:88px}.card img{width:96px;height:96px;aspect-ratio:1;flex:none}.card div{padding:12px}.card h3{font-size:1.05rem}.card p{font-size:.95rem}
 .card:hover{transform:none}.card:active{transform:scale(.98)}
 .chips .btn{min-width:64px}.drop{padding:28px 14px}.drop input{width:100%;min-height:56px}
 .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;box-shadow:0 -2px 12px #00000014;padding-bottom:env(safe-area-inset-bottom)}
 .bnav a{flex:1;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--m);font-size:.72rem;line-height:1.1;gap:2px;padding:4px 2px}
 .bnav a span{font-size:1.35rem}.bnav a b{font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .bnav a.on{color:var(--g)}.bnav a.on span{transform:scale(1.1)}
 footer{padding-bottom:20px}
}
@media(max-width:820px){.bnav a b{white-space:normal;text-align:center;font-size:.68rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.bnav a{min-width:0}.hero img{max-height:160px;object-fit:cover}}
@media(max-width:820px){nav.bnav{overflow:visible;gap:0;flex-wrap:nowrap}nav.bnav a{flex:1 1 0;white-space:normal;font-size:.68rem}}
.drop input::file-selector-button{min-height:52px;padding:10px 18px;border:0;border-radius:999px;background:var(--g);color:#fff;font-size:1rem;margin-inline-end:10px;cursor:pointer}