html{scroll-behavior:smooth}
body{background-color:#0e0c1a;background-image:radial-gradient(900px 500px at 85% -10%,rgba(63,220,176,.13),transparent 60%),radial-gradient(700px 420px at -10% 30%,rgba(249,184,74,.08),transparent 60%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:auto,auto,44px 44px,44px 44px;background-attachment:fixed}
.f55-ring{position:relative;border-radius:1.25rem;background:linear-gradient(160deg,#1b1730,#120f22);transition:box-shadow .3s,transform .3s}
.f55-ring::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(63,220,176,.65),rgba(249,184,74,.15) 40%,rgba(255,255,255,.04) 60%,rgba(249,184,74,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.f55-ring:hover{box-shadow:0 0 0 1px rgba(63,220,176,.25),0 18px 50px -20px rgba(63,220,176,.45)}
.f55-lift:hover{transform:translateY(-3px)}
.f55-gold{background:linear-gradient(100deg,#ffe7b0,#f9b84a 45%,#3fdcb0);-webkit-background-clip:text;background-clip:text;color:transparent}
.f55-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;border-radius:999px;padding:.8rem 1.6rem;color:#0e0c1a;background:linear-gradient(100deg,#ffd27a,#f9b84a 55%,#e89a23);box-shadow:0 10px 30px -10px rgba(249,184,74,.7);transition:filter .2s,transform .2s}
.f55-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.f55-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;border-radius:999px;padding:.8rem 1.6rem;color:#b8f7e4;border:1px solid rgba(63,220,176,.45);transition:background .2s}
.f55-btn-ghost:hover{background:rgba(63,220,176,.1)}
.f55-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;padding:.25rem .7rem;border-radius:999px;background:rgba(63,220,176,.1);color:#7ff0cf;border:1px solid rgba(63,220,176,.25)}
.f55-coin{animation:f55spin 9s linear infinite}
@keyframes f55spin{to{transform:rotate(360deg)}}
.f55-pulse{animation:f55pulse 2.4s ease-in-out infinite}
@keyframes f55pulse{0%,100%{opacity:1}50%{opacity:.35}}
.f55-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.f55-reveal.is-in{opacity:1;transform:none}
.f55-prose h2{font-family:"Noto Serif Thai",serif;font-size:1.5rem;font-weight:700;color:#ffe7b0;margin:2.2rem 0 .8rem;line-height:1.5}
.f55-prose h3{font-family:"Noto Serif Thai",serif;font-size:1.2rem;font-weight:600;color:#7ff0cf;margin:1.6rem 0 .6rem}
.f55-prose p{margin:0 0 1.05rem;line-height:1.95;color:#d9d4ea}
.f55-prose ul,.f55-prose ol{margin:0 0 1.2rem 1.3rem;line-height:1.9;color:#d9d4ea}
.f55-prose ul{list-style:disc}.f55-prose ol{list-style:decimal}
.f55-prose a{color:#ffd27a;text-decoration:underline;text-underline-offset:3px}
.f55-prose blockquote{border-left:3px solid #3fdcb0;padding:.6rem 1rem;margin:1.4rem 0;background:rgba(63,220,176,.06);border-radius:0 .75rem .75rem 0;color:#b8f7e4}
details.f55-faq summary{list-style:none;cursor:pointer}
details.f55-faq summary::-webkit-details-marker{display:none}
details.f55-faq[open] .f55-plus{transform:rotate(45deg)}
.f55-plus{transition:transform .25s}
@media (prefers-reduced-motion:reduce){.f55-coin,.f55-pulse{animation:none}.f55-reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
.f55-dock{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:45;border-radius:22px;background:rgba(22,19,39,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 40px -14px rgba(0,0,0,.9),0 0 0 1px rgba(63,220,176,.06)}
.f55-dock::before{content:"";position:absolute;top:-1px;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,rgba(63,220,176,.6),rgba(249,184,74,.6),transparent)}
.f55-dock-link{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 2px 9px;font-size:11px;color:#a39cc0;transition:color .2s}
.f55-dock-link:hover{color:#e7e3f3}
.f55-dock-link[aria-current=page]{color:#ffd27a;font-weight:600}
.f55-dock-link[aria-current=page]::before{content:"";position:absolute;top:0;width:24px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#3fdcb0,#f9b84a);box-shadow:0 0 12px rgba(249,184,74,.7)}
.f55-dock-mid{position:relative;z-index:1}
.f55-dock-play{display:flex;flex-direction:column;align-items:center;gap:4px;padding-bottom:9px;font-size:11px;font-weight:600;color:#ffe7b0}
.f55-dock-coin{display:grid;place-items:center;width:58px;height:58px;margin-top:-30px;border-radius:999px;color:#0e0c1a;background:radial-gradient(circle at 35% 30%,#ffe7b0,#f9b84a 55%,#e89a23);border:4px solid #161327;box-shadow:0 0 0 1px rgba(63,220,176,.55),0 10px 24px -6px rgba(249,184,74,.75);transition:transform .2s}
.f55-dock-coin svg{margin-left:3px}
.f55-dock-play:hover .f55-dock-coin,.f55-dock-play:focus-visible .f55-dock-coin{transform:translateY(-2px) scale(1.04)}
.f55-dock-play:active .f55-dock-coin{transform:scale(.95)}
@media (max-width:1023.98px){body{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}
.f55-prov{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.f55-prov-track{display:flex;gap:14px;width:max-content;margin:0;padding:6px 0 14px;list-style:none;animation:f55prov 48s linear infinite;animation-play-state:paused}
.f55-prov.is-on .f55-prov-track{animation-play-state:running}
.f55-prov.is-on:hover .f55-prov-track{animation-play-state:paused}
.f55-prov-track li{flex:none;border-radius:14px;overflow:hidden;background:#161327;border:1px solid rgba(63,220,176,.2);box-shadow:0 10px 24px -14px rgba(0,0,0,.85);transition:transform .25s,border-color .25s,box-shadow .25s}
.f55-prov-track li:hover{transform:translateY(-3px);border-color:rgba(249,184,74,.6);box-shadow:0 0 0 1px rgba(249,184,74,.2),0 14px 30px -12px rgba(249,184,74,.5)}
.f55-prov-track img{display:block;width:200px;height:128px}
@keyframes f55prov{to{transform:translateX(calc(-50% - 7px))}}
@media (max-width:640px){.f55-prov-track{gap:10px;animation-duration:34s}.f55-prov-track img{width:156px;height:100px}@keyframes f55prov{to{transform:translateX(calc(-50% - 5px))}}}
@media (prefers-reduced-motion:reduce){.f55-prov-track{animation-duration:110s}.f55-prov-track li{transition:none}}
.f55-slides{transition:transform .6s cubic-bezier(.22,.7,.2,1);touch-action:pan-y}
.f55-slide{flex:none;width:100%}
.f55-slide-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:999px;display:grid;place-items:center;font-size:26px;line-height:1;padding-bottom:3px;color:#ffe7b0;background:rgba(14,12,26,.6);border:1px solid rgba(249,184,74,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s,background .2s}
.f55-slider:hover .f55-slide-nav,.f55-slide-nav:focus-visible{opacity:1}
.f55-slide-nav:hover{background:rgba(249,184,74,.25)}
@media (hover:none){.f55-slide-nav{display:none}}
.f55-dots button{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.45);transition:width .3s,background .3s}
.f55-dots button[aria-current=true]{width:24px;background:linear-gradient(90deg,#3fdcb0,#f9b84a)}
.f55-slide img{-webkit-user-drag:none;user-select:none}
