/* Dimensional surfaces for the existing interactive machine. */
body::before{display:none}
body{font-family:"IBM Plex Sans Thai",Tahoma,sans-serif}
.shell{max-width:1060px}
.brand{padding-block:8px}
.daily{font-size:.75rem}
.intro h1{line-height:1.2;letter-spacing:-.025em}
.intro-logo{right:0}
.eyebrow{font-size:.875rem;background:rgba(255,250,240,.75)}
.machine-wrap{display:flex;flex-direction:column;align-items:center;gap:22px;max-width:100%}
.machine{transform:none;filter:drop-shadow(0 18px 12px rgba(13,59,45,.17))}
.machine-top{background:linear-gradient(115deg,#fffdf6 8%,#fff9eb 56%,#e9dfc8 100%);border-width:5px;box-shadow:inset 0 4px 0 #fff,inset -7px 0 0 #d8d3b9,inset 7px 0 0 #fffaf0}
.machine-top:before{background:linear-gradient(125deg,rgba(255,255,255,.8),transparent 24%,rgba(255,255,255,.28) 25%,transparent 42%),linear-gradient(#f2d38d,#ffebb7);border-width:3px;box-shadow:inset 0 7px 14px #8f682c38,0 2px 0 #fff}
.machine-top strong{line-height:1.45;font-weight:500;margin-top:3px;font-size:1.25rem}
.mini-label{font-size:.75rem;letter-spacing:.16em}
.capsules i{border-width:3px;box-shadow:inset 3px 4px 3px #ffffff9c,inset -4px -6px 7px #164d3b33,2px 5px 5px #55401838}
.machine-bottom{background:linear-gradient(115deg,#ff8a4e,#ed6a36 48%,#ca4e24);border-width:5px;box-shadow:inset 0 4px 0 #ffb582,inset -6px -7px 0 #a8432333,inset 5px 0 0 #ff98664d}
.coin{border-width:3px;box-shadow:inset 0 2px 3px #fff6cd,0 3px 0 #9e4a22;font-size:1rem;line-height:1.1}
.knob{background:linear-gradient(135deg,#fff,#e1e0cb);border-width:4px;box-shadow:0 6px 0 #103d2f,0 9px 9px #68331f55,inset 0 3px 0 white}
.knob span{background:linear-gradient(90deg,#dfa327,#ffcf58 45%,#e6a220);border-width:3px;box-shadow:2px 2px 2px #164d3b44}
.chute{width:78px;height:64px;right:14px;bottom:12px;background:linear-gradient(#15392e,#2e5544);border:4px solid #f2dfb7;border-radius:13px 13px 20px 20px;box-shadow:0 3px 0 #ad4926,inset 0 4px 8px #061d17;isolation:isolate}
.chute>.slot{position:absolute;left:0;right:0;bottom:0;width:100%;height:9px;margin:0;border-radius:0;background:#d1bb91;box-shadow:0 -2px 0 #fff1d4;z-index:3}
.chute>.drop-capsule{left:10px;top:-45px;box-shadow:inset 3px 3px 2px #ffffffaa,inset -4px -4px 4px #164d3b33,0 4px 3px #0004;border-width:3px}
.machine.spinning .knob{animation-duration:var(--turn-time)}
.machine.spinning .capsules i{animation-duration:.38s}
.machine.spinning .capsules .c2,.machine.spinning .capsules .c5{animation-delay:.16s;animation-direction:alternate-reverse}
.machine.dispensing .drop-capsule{animation-duration:var(--drop-time);animation-timing-function:cubic-bezier(.42,0,.75,1)}
.machine.collecting .drop-capsule{animation-duration:.65s}
.machine-status{font-size:.875rem;line-height:1.65;text-align:center;max-width:320px;min-height:3.3em;margin:0;color:var(--green);text-wrap:balance}
.hint,.privacy-note{font-size:.875rem;line-height:1.6;text-wrap:balance}
.privacy-note{color:#526459;margin:4px 0 0}
.input-row{flex-wrap:wrap}.input-row input{flex-basis:140px}.input-row button{flex-grow:1}
button,input{touch-action:manipulation}
button:focus-visible{outline:3px solid #b76a09;outline-offset:5px}
button{transition:background-color .15s,box-shadow .15s}
.result-card{box-shadow:0 20px 60px #092f2a55;border-width:3px;background:linear-gradient(135deg,#fffdf7,#fff5dc);padding-top:50px}
.result-card h2{line-height:1.65;overflow-wrap:anywhere;text-wrap:pretty}
.result-label{overflow-wrap:anywhere;line-height:1.7}
.capsule-icon::before{background:linear-gradient(135deg,#ffe991,#f5b52e 65%,#d89925);box-shadow:inset 4px 4px 4px #fff8, inset -2px -4px 5px #95621444}
.capsule-icon::after{background:linear-gradient(135deg,#fff,#fff9e7 60%,#d9d7bd);box-shadow:inset -3px -4px 4px #164d3b22}
.capsule-icon::before,.capsule-icon::after{border-width:3px;transition-duration:var(--open-time)}
.is-cracking .capsule-icon{animation-duration:var(--crack-time)}
.is-opening .capsule-icon{animation:none}
.is-opening::before{animation-duration:var(--open-time)}
.sealed-hint{line-height:1.65}
dialog{max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
body:has(dialog[open]){overflow:hidden}
@media(max-width:760px){
 .shell{padding-top:calc(10px + env(safe-area-inset-top))}
 .brand{padding-block:0}.brand-logo{width:86px;height:48px}
 .intro{margin-top:12px}.intro h1{font-size:clamp(2.25rem,10vw,3rem);line-height:1.22}
 .intro h1 br{display:none}.intro h1 span{display:inline-block;margin-left:.18em}
 .lead{font-size:1rem;margin-top:8px}.lead br{display:none}
 .intro-logo{display:none}.eyebrow{font-size:.875rem;margin-bottom:5px;padding:4px 12px}
 .controls{margin-top:16px}.input-row input{flex-basis:auto}
 .hint{font-size:.875rem;margin-top:12px}.privacy-note{font-size:.875rem}
 .machine-wrap{margin:24px 0 0;gap:20px}
 .machine{width:min(82vw,310px)}
 .machine-top{height:292px;padding-top:24px;border-radius:52px 52px 22px 22px}
 .machine-top strong{font-size:1.15rem;line-height:1.45;max-width:180px}
 .machine-top:before{inset:120px 17px 15px}
 .capsules{inset:151px 21px 15px;transform:scale(.86);transform-origin:center top}
 .machine-bottom{height:157px;margin:-5px 14px 0}
 .coin{top:40px;left:16px;transform:none}
 .knob{top:28px;width:76px;height:76px;transform:none}
 .chute{right:10px;bottom:12px;width:65px;height:62px;transform:none}
 .chute>.drop-capsule{left:4px}
 .result-card{padding:50px 22px 24px}.result-card h2{font-size:clamp(1.35rem,5.7vw,1.85rem)}
 .close{top:7px;right:7px}.machine-status{max-width:290px}
}
@media(max-width:370px){.machine{width:270px;max-width:100%}.coin{left:10px;width:44px;height:44px}.chute{right:8px;width:58px}.chute>.drop-capsule{left:1px}.capsules{transform:scale(.76)}.knob{width:68px;height:72px}}
.pickup-sparkles{position:absolute;right:14px;bottom:12px;width:78px;height:64px;pointer-events:none;z-index:4;opacity:0}
.pickup-sparkles span{position:absolute;font-size:25px;line-height:1;color:#fff6ce;text-shadow:0 1px 2px #985218;opacity:0}
.pickup-sparkles span:nth-child(1){left:-17px;top:-16px}
.pickup-sparkles span:nth-child(2){right:-11px;top:-19px;font-size:30px}
.pickup-sparkles span:nth-child(3){left:-19px;bottom:2px;font-size:19px}
.pickup-sparkles span:nth-child(4){right:0;bottom:-21px;color:#fff0ef;font-size:22px}
.machine.capsule-waiting .pickup-sparkles{opacity:1}
.machine.capsule-waiting .pickup-sparkles span{animation:pickup-twinkle 2.2s ease-in-out infinite}
.machine.capsule-waiting .pickup-sparkles span:nth-child(2){animation-delay:.3s}
.machine.capsule-waiting .pickup-sparkles span:nth-child(3){animation-delay:.65s}
.machine.capsule-waiting .pickup-sparkles span:nth-child(4){animation-delay:.95s}
.machine.capsule-waiting .chute{animation:pickup-glow 2.2s ease-in-out infinite;outline:2px solid #fff1bb;outline-offset:3px}
.machine.capsule-waiting .drop-capsule{animation:pickup-bob 2.2s ease-in-out infinite}
@keyframes pickup-twinkle{0%,100%{opacity:.5;transform:scale(.75) rotate(-8deg)}50%{opacity:1;transform:scale(1.1) rotate(8deg)}}
@keyframes pickup-glow{0%,100%{box-shadow:0 0 0 6px #ffd76b55,0 0 16px #ffe79b66,inset 0 4px 8px #061d17}50%{box-shadow:0 0 0 10px #ffd76b77,0 0 26px #ffe79baa,inset 0 4px 8px #061d17}}
@keyframes pickup-bob{0%,100%{transform:translateY(56px) rotate(4deg)}50%{transform:translateY(52px) rotate(-4deg)}}
@media(max-width:760px){.pickup-sparkles{right:10px;bottom:12px;width:65px;height:62px}}
@media(max-width:370px){.pickup-sparkles{right:8px;width:58px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.machine.capsule-waiting .pickup-sparkles span{opacity:1}.machine.capsule-waiting .chute{box-shadow:0 0 0 7px #ffd76b77,0 0 20px #ffe79baa}}