@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&family=Sarabun:wght@400;500;600;700&display=swap');

:root{color-scheme:light;--paper:#f4efe4;--paper2:#fffdf8;--ink:#172b3a;--muted:#667783;--line:#ded5c6;--red:#c94f42;--teal:#287f78;--gold:#c98b2e;--shadow:0 18px 55px rgba(34,43,52,.13)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}
body{font-family:'Sarabun','Noto Sans Thai',system-ui,sans-serif;background-image:radial-gradient(circle at 12% 6%,rgba(255,255,255,.72),transparent 30%),radial-gradient(circle at 94% 80%,rgba(220,204,174,.24),transparent 28%);}
button,input{font:inherit}
button{color:inherit}
.app{width:min(100%,1600px);min-height:100dvh;margin:0 auto;padding:18px clamp(14px,3vw,42px) 16px;display:flex;flex-direction:column;gap:14px}
.topbar{display:grid;grid-template-columns:minmax(225px,1fr) minmax(260px,1.3fr) auto;align-items:center;gap:22px;min-height:58px}
.brand-lockup{display:flex;align-items:center;gap:13px;min-width:0}
.brand-logo{display:block;width:auto;height:39px;max-width:116px;object-fit:contain}
.brand-divider{height:35px;width:1px;background:#d6cdbc}
.brand-copy{display:flex;flex-direction:column;line-height:1.16}
.brand-copy .eyebrow{font:600 9px/1.4 'Kanit',sans-serif;letter-spacing:.16em;color:var(--red)}
.brand-copy strong{font:600 17px/1.2 'Kanit',sans-serif;letter-spacing:.01em}
.top-title{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:center}
.top-title span{font:600 9px 'Kanit',sans-serif;letter-spacing:.17em;color:var(--teal)}
.top-title strong{font:500 clamp(15px,1.35vw,20px) 'Kanit','Sarabun',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:rgba(255,253,248,.8);display:grid;place-items:center;cursor:pointer;transition:transform .2s,border-color .2s,background .2s}
.icon-button:hover,.nav-button:hover{transform:translateY(-1px);border-color:#c8b99f;background:white}
.icon-button svg,.nav-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.deck-shell{flex:1;min-height:0;display:grid;place-items:center}
.stage{position:relative;width:min(100%,calc((100dvh - 240px)*16/9));aspect-ratio:16/9;background:#eee7da;border:1px solid rgba(87,94,96,.16);border-radius:13px;overflow:hidden;box-shadow:var(--shadow);isolation:isolate;touch-action:pan-y}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid rgba(255,255,255,.55);border-radius:inherit;z-index:2}
.stage img{width:100%;height:100%;display:block;object-fit:cover;user-select:none;-webkit-user-drag:none;transition:opacity .19s ease,transform .22s ease}
.stage:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border:0;border-radius:0;background:#151e24;box-shadow:none}
.stage:fullscreen img{object-fit:contain}
.stage.changing img{opacity:.68;transform:scale(.993)}
.click-zone{position:absolute;z-index:4;top:0;bottom:0;width:8%;padding:0;border:0;background:transparent;cursor:pointer;display:grid;align-items:center;opacity:0;transition:opacity .2s}
.click-zone:hover,.click-zone:focus-visible{opacity:1}
.click-zone.previous{left:0;justify-items:start;padding-left:12px;background:linear-gradient(90deg,rgba(15,31,42,.17),transparent)}
.click-zone.next{right:0;justify-items:end;padding-right:12px;background:linear-gradient(270deg,rgba(15,31,42,.17),transparent)}
.edge-arrow{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(255,253,248,.92);box-shadow:0 4px 16px rgba(0,0,0,.12);font:400 35px/1 'Sarabun',sans-serif;color:var(--ink)}
.stage-hint{position:absolute;z-index:3;left:50%;bottom:14px;transform:translate(-50%,7px);padding:7px 12px;border:1px solid rgba(255,255,255,.7);border-radius:30px;background:rgba(255,253,248,.86);color:#536578;font-size:11px;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap}
.stage.show-hint .stage-hint{opacity:1;transform:translate(-50%,0)}
.controls{display:grid;grid-template-columns:150px minmax(220px,650px) 150px;gap:clamp(12px,3vw,42px);align-items:center;justify-content:center;width:100%;margin:0 auto}
.nav-button{height:44px;padding:0 15px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:24px;background:rgba(255,253,248,.76);font:500 13px 'Sarabun',sans-serif;cursor:pointer;transition:transform .2s,border-color .2s,background .2s}
.nav-button:disabled{opacity:.4;cursor:default;transform:none}
.next-button{background:var(--ink);color:white;border-color:var(--ink)}
.next-button:hover{background:#244257;border-color:#244257;color:white}
.progress-area{display:flex;flex-direction:column;gap:5px;min-width:0}
.progress-meta{display:flex;justify-content:center;align-items:baseline;gap:6px;font-family:'Kanit',sans-serif}
.progress-meta #currentCount{font-size:16px;font-weight:600;color:var(--ink)}
.progress-caption{font-size:8px;letter-spacing:.16em;color:var(--red)}
.count-divider,.progress-meta #totalCount{font-size:11px;color:var(--muted)}
#slideRange{appearance:none;width:100%;height:5px;border-radius:9px;background:linear-gradient(90deg,var(--teal) var(--progress,0%),#d9d0c1 var(--progress,0%));outline:none;cursor:pointer}
#slideRange::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;background:var(--paper2);border:3px solid var(--teal);box-shadow:0 1px 5px rgba(0,0,0,.18)}
#slideRange::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--paper2);border:3px solid var(--teal);box-shadow:0 1px 5px rgba(0,0,0,.18)}
.tick-row{display:grid;grid-template-columns:repeat(16,1fr);gap:4px}
.tick-row button{height:5px;padding:0;border:0;border-radius:5px;background:#d8d0c3;cursor:pointer;transition:background .18s,transform .18s}
.tick-row button:hover{transform:scaleY(1.8);background:#a99b83}
.tick-row button.active{background:var(--red)}
.footnote{position:relative;display:flex;justify-content:center;align-items:center;gap:9px;color:#75818a;font-size:11px;min-height:19px}
.foot-dot{color:#c3a15f}
.copyright{position:absolute;right:3px;font:500 8px 'Kanit',sans-serif;letter-spacing:.13em;color:#9a978f}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button:focus-visible,input:focus-visible{outline:3px solid rgba(40,127,120,.45);outline-offset:3px}
@media(max-width:760px){
 .app{padding:10px 10px calc(12px + env(safe-area-inset-bottom));gap:10px;min-height:100dvh}
 .topbar{grid-template-columns:1fr auto;gap:10px;min-height:49px}
 .brand-logo{height:32px;max-width:84px}.brand-divider{height:29px}.brand-lockup{gap:8px}.brand-copy strong{font-size:15px}.brand-copy .eyebrow{font-size:8px}
 .top-title{grid-column:1/3;grid-row:2;align-items:flex-start;text-align:left;padding-left:2px;gap:0}
 .top-title span{font-size:8px}.top-title strong{font-size:16px;max-width:calc(100vw - 28px)}
 .fullscreen{grid-column:2;grid-row:1;width:38px;height:38px}
 .deck-shell{flex:0;min-height:0}
 .stage{width:100%;border-radius:8px}
 .click-zone{width:10%;opacity:.72}.click-zone.previous{padding-left:5px}.click-zone.next{padding-right:5px}.edge-arrow{width:31px;height:31px;font-size:27px}
 .stage-hint{display:none}
 .controls{grid-template-columns:42px minmax(130px,1fr) 42px;gap:9px;margin-top:auto}
 .nav-button{width:42px;height:42px;padding:0;border-radius:50%}.nav-button span{display:none}.nav-button svg{width:20px;height:20px}
 .progress-area{gap:7px}.tick-row{gap:2px}.tick-row button{height:4px}
 .footnote{font-size:9px;gap:5px;flex-wrap:wrap;line-height:1.1;padding-right:0}.copyright{display:none}
}
@media(max-width:380px){.footnote{font-size:8px}.tick-row{gap:1px}.brand-copy strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}