:root{font-family:Inter,Noto Sans Thai,Segoe UI,sans-serif;color:#241921;background:#fff8ef;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--paper: #fffaf2;--ink: #241921;--muted: #786b72;--line: rgba(90, 57, 39, .14);--surface: #ffffff;--rose: #e23b66;--gold: #f4b83e;--green: #04a77a}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;-webkit-touch-callout:none}a{color:inherit}.page-shell{position:relative;display:grid;align-items:start;justify-items:center;min-height:100vh;padding:10px;background:linear-gradient(180deg,#ffe8b2c7,#fff8ef00 260px),linear-gradient(135deg,#ffffffe0,#f4b83e24),#fffaf5}.landing-content{display:grid;width:min(100%,430px);justify-items:center;padding-bottom:calc(92px + env(safe-area-inset-bottom));transition:filter .18s ease,opacity .18s ease}.is-locked .landing-content{filter:blur(12px);opacity:.56;pointer-events:none;-webkit-user-select:none;user-select:none}.hero{display:grid;width:100%;gap:10px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fffaf2f0;box-shadow:0 18px 42px #6138141f}.brand-banner{display:grid;width:100%;margin:0;overflow:hidden;border-radius:8px;background:radial-gradient(circle at center,rgba(244,184,62,.22),transparent 58%),#fff2dc}.brand-banner img{display:block;width:100%;height:auto;padding:8px 10px 2px;object-fit:contain}.brand-banner p{margin:0 8px 10px;padding:10px 8px;border:3px solid var(--rose);border-radius:4px;background:#ffffffb8;color:var(--rose);font-size:clamp(.9rem,4.1vw,1.18rem);font-weight:900;line-height:1.15;text-align:center;white-space:nowrap}.carousel{display:grid;gap:12px}.slide-stage{position:relative;width:100%}.slide-frame{position:relative;width:100%;aspect-ratio:1 / 1;margin:0;overflow:hidden;border:1px solid #23201d;border-radius:8px;background:#120917;box-shadow:none;touch-action:pan-y;animation:slide-reveal .62s cubic-bezier(.2,.86,.2,1) both}.slide-frame img{display:block;width:100%;height:100%;object-fit:contain;animation:slide-image-focus .62s cubic-bezier(.2,.86,.2,1) both;will-change:opacity,transform}.slide-frame:after{position:absolute;inset:0;background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.28) 45%,transparent 72%);content:"";pointer-events:none;transform:translate(-120%);animation:slide-shine .72s ease-out both}.slide-frame-prev{--slide-offset: -18px}.slide-frame-next{--slide-offset: 18px}.slide-nav{position:absolute;top:50%;z-index:2;display:grid;width:40px;height:40px;place-items:center;border:1px solid rgba(244,184,62,.78);border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.26),transparent 34%),#171114bd;color:#fff;cursor:pointer;font:inherit;box-shadow:0 8px 18px #0003,inset 0 0 0 1px #ffffff1a;transform:translateY(-50%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.slide-nav:before{width:10px;height:10px;border-top:3px solid #ffffff;border-right:3px solid #ffffff;content:""}.slide-nav-prev:before{margin-left:4px;transform:rotate(-135deg)}.slide-nav-next:before{margin-right:4px;transform:rotate(45deg)}.slide-nav:hover{background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.34),transparent 34%),#171114db;border-color:var(--gold)}.slide-nav-prev{left:9px}.slide-nav-next{right:9px}.slide-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 4px}.slide-meta span{color:var(--rose);font-size:.78rem;font-weight:900;text-transform:uppercase}.slide-meta strong{color:var(--ink);font-size:1rem}.slide-dots{position:relative;display:flex;justify-content:center;gap:8px;padding-top:8px}.auto-progress{position:absolute;top:0;left:50%;width:min(190px,58vw);height:3px;overflow:hidden;border-radius:999px;background:#c8bfc7a8;transform:translate(-50%)}.auto-progress:after{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--rose),var(--gold));content:"";transform-origin:left center;animation:auto-progress 5s linear both}.dot-button{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:#c8bfc7;cursor:pointer}.dot-button.is-active{width:24px;background:var(--rose)}.thumbnail-strip{display:grid;grid-auto-columns:62px;grid-auto-flow:column;gap:7px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:thin}.thumbnail-button{position:relative;aspect-ratio:1 / 1;padding:0;overflow:hidden;border:2px solid transparent;border-radius:8px;background:var(--surface);box-shadow:0 4px 14px #36231414;cursor:pointer;scroll-snap-align:start}.thumbnail-button>img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.96);transform:scale(1.02);-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.thumbnail-button:after{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 40%),#17111433;content:"";pointer-events:none}.thumbnail-button.is-active{border-color:var(--rose)}.actions{position:fixed;right:10px;bottom:max(10px,env(safe-area-inset-bottom));left:10px;z-index:6;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(calc(100% - 20px),430px);margin:0 auto;padding:8px;border:1px solid rgba(90,57,39,.12);border-radius:8px;background:#fffaf2eb;box-shadow:0 -12px 34px #3623141f;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.action-button{display:inline-flex;min-height:54px;align-items:center;justify-content:center;gap:10px;padding:13px 12px;border:0;border-radius:8px;font-size:1rem;font-weight:800;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}.action-button:active{transform:translateY(1px)}.action-button:hover{transform:translate(-2px,-2px)}.action-primary{background:var(--green);color:#fff;box-shadow:0 10px 26px #04a77a38}.action-secondary{background:var(--surface);color:var(--ink);box-shadow:0 10px 26px #ffffff24}.button-icon{display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:#ffffff38;font-weight:900}.action-secondary .button-icon{background:#f5e7b9}.age-gate{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:18px;background:#fffaf26b;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.age-card{display:grid;width:min(100%,300px);min-height:158px;align-content:center;justify-items:center;gap:10px;padding:16px;border:1px solid rgba(90,57,39,.16);border-radius:8px;background:#fffffff5;box-shadow:0 24px 70px #24192138;color:var(--ink);text-align:center}.age-card h2{margin:0;font-size:clamp(1.12rem,4.7vw,1.38rem);line-height:1.12}.age-card p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.45}.age-card p span{display:block}.age-confirm-button{width:100%;min-height:42px;border:0;border-radius:8px;background:var(--green);color:#fff;cursor:pointer;font:inherit;font-size:.92rem;font-weight:900;box-shadow:0 10px 26px #04a77a38}.slide-nav:focus-visible,.dot-button:focus-visible,.thumbnail-button:focus-visible,.action-button:focus-visible,.age-confirm-button:focus-visible{outline:3px solid rgba(226,59,102,.34);outline-offset:3px}@media(max-width:560px){.page-shell{padding:6px}.hero{gap:8px;padding:6px}.slide-nav{width:36px;height:36px}.slide-nav:before{width:9px;height:9px;border-width:2.5px}.actions{grid-template-columns:1fr 1fr;right:6px;bottom:max(6px,env(safe-area-inset-bottom));left:6px;width:calc(100% - 12px);padding:6px}.action-button{width:100%;min-height:52px;font-size:.94rem}}@media(max-width:360px){.brand-banner p{font-size:.78rem}.action-button{gap:6px;padding-inline:8px;font-size:.86rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}}@keyframes slide-reveal{0%{opacity:0;transform:translate(var(--slide-offset, 18px)) scale(.975)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes slide-image-focus{0%{filter:saturate(.8) contrast(.96);transform:scale(1.035)}to{filter:saturate(1) contrast(1);transform:scale(1)}}@keyframes slide-shine{0%{opacity:0;transform:translate(-120%)}28%{opacity:.86}to{opacity:0;transform:translate(120%)}}@keyframes auto-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}
