:root{--bg:#faf9f6;--card:#fff;--ink:#1f1e1b;--muted:#6b6862;--line:#e6e3dc;--accent:#0F6E56;--accent-ink:#fff;--warn:#8a5a00;--warn-bg:#fff3d6}
@media (prefers-color-scheme:dark){:root{--bg:#161614;--card:#1f1f1c;--ink:#ecebe6;--muted:#a3a19a;--line:#33322e;--accent:#4fb89a;--accent-ink:#0d211b;--warn:#f1c46b;--warn-bg:#3a2e12}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}a{color:var(--accent)}img{max-width:100%;display:block}
.top{border-bottom:1px solid var(--line);background:var(--card)}.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:58px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}.brand b{color:var(--accent);font-weight:600}
.mark{width:36px;height:auto;overflow:visible}.mark .dome{fill:#0F6E56}.mark .lines{stroke:#9FE1CB;stroke-width:2.2;fill:none;stroke-linecap:round}.mark .door{fill:#FAEEDA}.mark .base{fill:#085041}
@media (prefers-color-scheme:dark){.mark .base{fill:#5DCAA5}}
.top{position:sticky;top:0;z-index:5;transition:box-shadow .3s}.top.scrolled{box-shadow:0 6px 20px -12px rgba(0,0,0,.35)}.top nav a{margin-left:16px;color:var(--muted);text-decoration:none;font-size:15px}.top nav a:hover{color:var(--ink)}
main{padding:28px 16px 48px}.hero{padding:28px 0 20px}.hero h1{margin:0;font-size:32px;line-height:1.2}.hero p{margin:6px 0 0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column}
.card img{aspect-ratio:1;object-fit:cover;width:100%}.card .t{padding:10px 14px 0;font-weight:500}.card .p{padding:2px 14px 14px;color:var(--muted)}
.product{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"gallery info" "vid info";grid-template-rows:auto 1fr;column-gap:32px;row-gap:16px}
.gallery{grid-area:gallery}.info{grid-area:info}.vid{grid-area:vid}
@media (max-width:760px){.product{grid-template-columns:1fr;grid-template-areas:"gallery" "info" "vid";row-gap:20px}.vid .ad{margin:0 auto}}
#main{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:var(--card)}
.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.thumb{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;background:none;width:64px;height:64px}
.thumb img{width:100%;height:100%;object-fit:cover}.thumb.on{border-color:var(--accent)}
.ad{display:block;width:100%;max-width:300px;aspect-ratio:9/16;border-radius:14px;background:#000}
.info h1{margin:0 0 6px;font-size:28px;line-height:1.25}.price{font-size:24px;font-weight:600;margin:0}.lead{color:var(--muted)}
.info h2{font-size:16px;margin:22px 0 6px}.info ul{padding-left:20px;margin:0}
.buy{width:100%;padding:14px;border:0;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-size:17px;font-weight:600;cursor:pointer;margin-top:8px}
.buy:disabled{opacity:.55;cursor:not-allowed}.small{font-size:14px;color:var(--muted)}
.deliv{border-collapse:collapse}.deliv td{padding:4px 18px 4px 0;border-bottom:1px solid var(--line)}
.plan{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:0 10px 10px 0;padding:10px 14px;font-size:15px}
.sample,.todo{background:var(--warn-bg);color:var(--warn);border-radius:8px}.sample{padding:8px 12px;margin:0 0 18px;font-size:14px}.todo{padding:1px 6px}
footer{border-top:1px solid var(--line);padding:20px 0 32px;color:var(--muted);font-size:14px}footer nav a{margin-right:16px;color:var(--muted)}

/* motion */
.js:not(.seen) .mark .dome{transform-origin:60px 80px;animation:dome .7s cubic-bezier(.2,.9,.3,1.2) both}
.js:not(.seen) .mark .lines{stroke-dasharray:120;stroke-dashoffset:120;animation:draw .9s .35s ease-out forwards}
.js:not(.seen) .mark .door{animation:door .6s .75s ease-out both}
.js:not(.seen) .mark .base{transform-origin:60px 80px;animation:base .5s ease-out both}
.js:not(.seen) .brand span{animation:rise .6s .25s ease-out both}
@keyframes dome{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes door{0%{opacity:0;fill:#FAC775}60%{opacity:1;fill:#FAC775}100%{opacity:1;fill:#FAEEDA}}
@keyframes base{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.js .hero>*,.js .card,.js .gallery,.js .info>*,.js .vid,.js main>h1,.js main>h2,.js main>p,.js main>ul{opacity:0;transform:translateY(18px);transition:opacity .6s ease-out,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.js .in{opacity:1!important;transform:none!important}
.card img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}.card:hover img{transform:scale(1.045)}
.card{transition:border-color .3s,box-shadow .3s,opacity .6s ease-out var(--d,0ms),transform .6s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}.card:hover{border-color:var(--accent);box-shadow:0 10px 28px -16px rgba(15,110,86,.55)}
#main{transition:opacity .25s ease}#main.swap{opacity:0}
.thumb{transition:border-color .2s,transform .2s}.thumb:hover{transform:translateY(-2px)}
.buy,.thumb{-webkit-tap-highlight-color:transparent}.buy:not(:disabled):active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .hero>*,.js .card,.js .gallery,.js .info>*,.js .vid,.js main>h1,.js main>h2,.js main>p,.js main>ul{opacity:1;transform:none}}