:root{--cream:#fbf5ea;--paper:#fff;--ocean:#145a8c;--ocean-deep:#0e4269;--coffee:#5b3a24;--coffee-deep:#45291a;--sky:#d6eaf6;--sky-soft:#eaf4fa;--ink:#22303a;--muted:#5e554c;--line:#e2d6c2;--radius:18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{background:var(--cream);color:var(--ink);margin:0;font-family:Noto Sans Thai,system-ui,sans-serif;font-size:17px;line-height:1.75;overflow-x:hidden}h1,h2,h3,h4,p{margin:0}img{max-width:100%;height:auto;display:block}:focus-visible{outline:3px solid var(--ocean);outline-offset:3px}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.config-notice{color:#4a3b00;background:#fff3c4;padding:10px 16px;font-size:15px}.topbar,main>*,.footer{width:100%;max-width:1080px;margin-inline:auto;padding-inline:20px}.topbar{padding-block:14px 0}.topbar__brand{color:var(--ocean);font-size:16px;font-weight:700}.section{padding-block:40px}.section__title{color:var(--coffee);font-size:26px;font-weight:700;line-height:1.45}.section__lead,.section__body{max-width:38em;margin-top:8px}.section__small{color:var(--muted);max-width:42em;margin-top:16px;font-size:15px}.btn{min-height:52px;font:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;border:2px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:10px 24px;font-size:17px;font-weight:700;line-height:1.4;text-decoration:none;display:inline-flex}.btn--coffee{background:var(--coffee);color:#fff}.btn--coffee:hover:not(:disabled){background:var(--coffee-deep)}.btn--ocean{background:var(--ocean);color:#fff}.btn--ocean:hover:not(:disabled){background:var(--ocean-deep)}.btn--outline{background:var(--paper);color:var(--ocean);border-color:var(--ocean)}.btn--outline:hover:not(:disabled){background:var(--sky-soft)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--block{width:100%}.hero{gap:24px;padding-block:20px 32px;display:grid}.hero__title{color:var(--coffee);text-wrap:balance;font-size:clamp(30px,8.4vw,46px);font-weight:700;line-height:1.35}.hero__lead{max-width:30em;margin-top:12px;font-size:18px}.hero__cta{margin-top:20px}.hero__photo{background:var(--sky);border-radius:999px 999px var(--radius) var(--radius);justify-content:center;align-items:flex-end;padding:36px 28px 28px;display:flex}.hero__photo img{object-fit:contain;width:auto;max-height:440px}.hero__placeholder{aspect-ratio:4/5;border:2px dashed var(--ocean);text-align:center;width:64%;color:var(--ocean);background:#ffffff80;border-radius:14px;place-items:center;padding:12px;font-size:15px;display:grid}@media (width>=820px){.hero{grid-template-columns:1.1fr 1fr;align-items:center;gap:48px;padding-block:40px 56px}.hero__photo{padding:56px 48px 40px}.hero__placeholder{width:56%}}.recipe-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px;display:grid}@media (width>=820px){.recipe-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}.recipe-card{border-radius:var(--radius);border:2px solid var(--line);background:var(--paper);min-height:112px;color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 14px 16px;display:flex}.recipe-card[aria-pressed=true]{border-color:var(--ocean);background:var(--sky-soft);box-shadow:inset 0 0 0 1px var(--ocean)}.recipe-card__name{color:var(--coffee);font-size:19px;font-weight:700;line-height:1.5}.recipe-card__summary{color:var(--muted);font-size:15px;line-height:1.6}.ratio{gap:3px;width:100%;margin-top:auto;padding-top:10px;display:flex}.ratio__seg{border-radius:6px;height:10px;box-shadow:inset 0 0 0 1px #22303a26}.recipe-detail{margin-top:20px;scroll-margin-top:12px}.recipe-detail:focus{outline:none}.detail{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:22px 18px 24px}.detail__title{color:var(--coffee);font-size:24px;line-height:1.45}.note{border-left:4px solid var(--ocean);background:var(--sky-soft);color:var(--ocean-deep);border-radius:0 10px 10px 0;margin-top:10px;padding:10px 14px;font-size:15px}.detail__photo{background:var(--sky-soft);border-radius:16px;width:100%;max-width:420px;height:auto;margin-top:16px}.detail__cols{gap:28px;margin-top:8px;display:grid}@media (width>=820px){.detail{padding:32px}.detail__cols{grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:48px}}.detail__sub{color:var(--ocean);margin-top:20px;font-size:18px}.ingredients{margin:6px 0 0;padding:0;list-style:none}.ingredients li{border-bottom:1px dashed var(--line);flex-wrap:wrap;justify-content:space-between;gap:2px 16px;padding:10px 0;display:flex}.ingredients__amount{color:var(--coffee);text-align:right;margin-left:auto;font-weight:700}.ingredients .is-optional .ingredients__amount{color:var(--muted);font-weight:400}.steps{counter-reset:step;gap:12px;margin:10px 0 0;padding:0;list-style:none;display:grid}.steps li{counter-increment:step;grid-template-columns:36px 1fr;align-items:start;gap:12px;display:grid}.steps li:before{content:counter(step);background:var(--coffee);color:#fff;border-radius:50%;place-items:center;width:36px;height:36px;margin-top:2px;font-weight:700;line-height:1;display:grid}.animation__title{color:var(--ocean);margin-top:20px;margin-bottom:10px;font-size:18px}.player__frame,.still__frame{border:1px solid var(--line);background:var(--cream);border-radius:16px;width:100%;position:relative;overflow:hidden}.still{margin:0}.player__buttons{grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;display:grid}.player__buttons .btn{padding-inline:12px}.animation__optin{width:100%;margin-top:12px}.animation__msg{color:var(--muted);margin-top:8px;font-size:15px}.strength{border-top:1px solid var(--line)}.adjust{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;max-width:720px;margin-top:20px;display:grid}.adjust__item{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px}.adjust__head{color:var(--ocean);font-weight:700}.storage{border-top:1px solid var(--line)}.footer{padding-block:32px 40px;padding-bottom:max(40px, env(safe-area-inset-bottom));border-top:1px solid var(--line)}.footer__actions{gap:12px;max-width:560px;display:grid}@media (width>=620px){.footer__actions{grid-template-columns:1fr 1fr}}.footer__brand{color:var(--muted);margin-top:20px;font-size:15px}