/* SNARL storefront layout refresh: preserve the palette, clarify hierarchy and breathing room. */
:root{--layout-width:1320px;--layout-gutter:clamp(18px,4vw,54px);--layout-section:clamp(54px,7vw,92px)}
html{scroll-padding-top:104px;scroll-behavior:smooth}
body{overflow-x:clip;line-height:1.68;background:var(--bg)}
.wrap,.announcement-section{width:min(var(--layout-width),calc(100% - 2*var(--layout-gutter)))}
.nav{position:sticky;top:0;z-index:60;min-height:76px;height:auto;gap:24px;padding-block:10px;align-items:center;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent)}
.brand{flex:0 0 auto}.brand-logo{display:block;max-width:178px;max-height:42px;object-fit:contain}
.nav-actions{flex:1 1 auto;min-width:0;max-width:100%;flex-wrap:nowrap;justify-content:flex-end;gap:7px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap}.nav-actions::-webkit-scrollbar{display:none}.nav-actions .nav-btn{flex:0 0 auto;border-radius:8px}.theme-switcher{position:relative;flex:0 0 auto;list-style:none}.theme-switcher>summary{cursor:pointer;list-style:none}.theme-switcher>summary::-webkit-details-marker{display:none}.theme-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:90;min-width:126px;padding:6px;display:grid;gap:4px;border:1px solid var(--line);border-radius:10px;background:var(--paper);box-shadow:var(--shadow)}.theme-menu button{border:0;border-radius:6px;background:transparent;color:var(--ink);padding:8px 10px;text-align:left}.theme-menu button:hover,.theme-menu button.active{background:var(--soft);color:var(--ink)}
.announcement-section{display:grid;grid-template-columns:minmax(150px,.28fr) minmax(0,1fr);align-items:center;gap:14px 28px;margin:20px auto 0;padding:18px 22px;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:var(--shadow)}
.announcement-heading{grid-row:span 2}.announcement-heading h2{font-size:clamp(20px,2vw,26px);margin:3px 0}.announcement-list{min-width:0}.service-announcement{min-width:0;border:0;border-left:3px solid var(--accent);border-radius:0;background:var(--soft);padding:10px 14px}.service-announcement p{margin:2px 0;overflow-wrap:anywhere}
main.wrap{padding-bottom:20px}
.hero{grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:clamp(34px,6vw,88px);padding:clamp(54px,7vw,94px) 0 clamp(44px,6vw,76px);align-items:center}
.hero h1{max-width:760px;font-size:clamp(48px,7vw,88px);line-height:.99;letter-spacing:-.07em;margin:18px 0 22px}.hero p{max-width:580px;font-size:clamp(15px,1.4vw,18px)}.hero-art{min-height:clamp(280px,32vw,420px);height:auto;border-radius:22px;background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--accent) 21%,var(--paper)),var(--paper) 68%);box-shadow:var(--shadow)}.hero-art:before,.hero-art:after{width:min(30vw,350px);height:min(30vw,350px);border-color:color-mix(in srgb,var(--line) 75%,var(--accent))}.hero-art:after{width:min(21vw,240px);height:min(21vw,240px)}.hero-art strong{font-size:clamp(76px,10vw,140px)}.hero-actions{gap:10px;flex-wrap:wrap}.hero-actions .button{border-radius:9px;padding:11px 17px}
.service-cards{grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow)}.service-card{min-width:0;padding:clamp(17px,2.5vw,28px);border-right:1px solid var(--line)}.service-card:last-of-type{border-right:0}.service-card strong{display:block;font-size:clamp(27px,3vw,38px);line-height:1.15;letter-spacing:-.04em;margin-top:5px}.service-icon{width:38px;height:38px;border-radius:11px;background:var(--soft);display:grid;place-items:center}.service-health{grid-column:1/-1;justify-content:flex-start;padding:10px 20px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--soft) 60%,var(--paper))}
.release-panel{margin-top:22px;border-radius:16px;box-shadow:var(--shadow)}
.section{padding:var(--layout-section) 0;scroll-margin-top:88px}.section:nth-of-type(even){position:relative}.section-head{margin-bottom:26px;max-width:820px}.section-head .kicker{display:flex;align-items:center;gap:12px;margin-bottom:9px}.section-head .kicker:after{content:"";height:1px;width:46px;background:var(--accent)}.section h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12;letter-spacing:-.045em;margin:3px 0 8px}.section-sub,.section-head>p{max-width:700px}
.product-grid{gap:18px}.plan{border-radius:14px;padding:clamp(20px,3vw,32px);box-shadow:0 8px 28px #18251a0a}.plan:hover{transform:translateY(-3px)}.plan-head{align-items:center;padding-bottom:17px}.plan h3{font-size:clamp(23px,2.4vw,30px)}.variant-list{gap:9px}.variant{border-radius:8px;padding:14px 11px}.variant.selected{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 70%,transparent)}.plan-foot{padding-top:14px;border-top:1px solid var(--line)}
.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.feature-card{height:100%;padding:clamp(20px,2.6vw,30px);border-radius:14px;box-shadow:var(--shadow)}.feature-card h3{font-size:18px}.feature-card li{font-size:14px;line-height:1.65}.feature-card ul{padding-left:20px}.feature-card .feature-note{padding:10px 12px;border-radius:8px;background:var(--soft)}
#benefits .benefit-comparison{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:16px}.benefit-tier{height:100%;border-radius:14px}
.checkin-balance,.checkin-calendar,.checkin-prize-odds,.checkin-rules,.reward-card,.account-box,.notice,.public-chat{border-radius:14px}.checkin-prize-odds{margin-top:20px;padding:clamp(18px,2.4vw,28px)}.checkin-prize-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}.reward-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}.reward-card{height:100%;padding:22px;box-shadow:var(--shadow)}
.account-box{padding:clamp(20px,3vw,34px);gap:22px}.account-box>div:first-child{min-width:0}.order-list{gap:12px;margin-top:20px}.order-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px 16px;align-items:center;padding:17px;border-radius:11px;background:var(--paper)}.order-row>div{min-width:0;overflow-wrap:anywhere}.order-row [id^="key-"]{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}.order-row [id^="key-"] code{overflow-wrap:anywhere;word-break:break-word}.order-row .order-hide{margin:0}.member-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}.member-settings>.account-avatar,.member-settings>h3,.member-settings>p{grid-column:1/-1}.member-settings>.form{min-width:0;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}.member-settings>.form input{min-width:0}
.notice{padding:clamp(18px,2.6vw,28px)}.public-chat{margin-top:28px;padding:clamp(18px,2.8vw,30px)}.chat-log{border-radius:10px}.faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.faq-list details{height:100%;border-radius:10px;padding:17px;background:var(--paper)}.footer{margin-top:36px;padding:26px 0 max(38px,env(safe-area-inset-bottom));gap:16px}
.dialog-card{border-radius:16px;padding:clamp(22px,4vw,36px)}.button:focus-visible,.nav-btn:focus-visible,.tab:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tool-demo{margin:18px 0 2px;max-width:900px}.tool-demo img,.tool-demo-video{display:block;width:100%;max-height:65vh;object-fit:contain;border-radius:10px}.copy-order-key{white-space:nowrap}
@media(max-width:980px){:root{--layout-gutter:24px;--layout-section:60px}.nav{gap:12px}.nav-actions{justify-content:flex-start}.hero{grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:26px}.hero-art{min-height:270px}.service-card{padding:18px}.announcement-section{grid-template-columns:150px minmax(0,1fr)}}
@media(max-width:760px){:root{--layout-gutter:16px;--layout-section:46px}html{scroll-padding-top:108px}.nav{gap:7px;min-height:66px;padding-block:7px}.brand-logo{max-width:140px;max-height:34px}.nav-actions{width:100%;justify-content:flex-start;padding:2px 0}.nav-actions .nav-btn{font-size:11px;padding:7px 9px}.announcement-section{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:12px;padding:14px}.announcement-heading{grid-row:auto;display:flex;align-items:baseline;justify-content:space-between;gap:12px}.announcement-heading h2{font-size:20px}.hero{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:40px}.hero h1{font-size:clamp(43px,11vw,66px)}.hero-art{min-height:220px;height:220px}.hero-art:before{width:240px;height:240px}.hero-art:after{width:165px;height:165px}.service-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.service-card{border-bottom:1px solid var(--line);border-right:0}.service-card:nth-child(odd){border-right:1px solid var(--line)}.service-card:nth-child(3){border-bottom:0}.service-health{grid-column:1/-1;border-top:1px solid var(--line)}.release-panel{padding:18px}.section-head{margin-bottom:20px}.product-grid{grid-template-columns:minmax(0,1fr)}#benefits .benefit-comparison,.feature-grid,.faq-list,.member-settings{grid-template-columns:minmax(0,1fr)}.member-settings>.account-avatar,.member-settings>h3,.member-settings>p{grid-column:auto}.order-row{grid-template-columns:minmax(0,1fr) auto}.order-row>div:first-child{grid-column:1/-1}.order-row .order-hide{grid-column:2;grid-row:2}.notice{align-items:flex-start}.faq-list{gap:9px}}
@media(max-width:420px){:root{--layout-gutter:12px;--layout-section:38px}.brand-logo{max-width:120px}.nav-actions .nav-btn{font-size:10px;padding:6px 8px}.hero-actions{flex-wrap:wrap}.service-card{padding:13px 11px;gap:9px}.service-card strong{font-size:23px}.checkin-dialog .dialog-card{padding:20px 12px}.music-player:not(.compact){max-width:calc(100vw - 150px);grid-template-columns:38px minmax(0,1fr);gap:6px;padding:8px}.music-player:not(.compact) .record{width:36px;height:36px}.music-player:not(.compact) .music-controls{grid-column:1/-1;justify-content:center}.music-player:not(.compact) .progress,.music-player:not(.compact) .time{grid-column:1/-1}.support-launcher{max-width:176px;width:176px}}
@media(prefers-reduced-motion:reduce){.plan,.button,.nav-btn,.support-launcher{animation:none!important;transition:none!important}}

/* Keep the homepage compact and align its cards instead of distributing them across the full row. */
:root{--layout-section:clamp(42px,4.5vw,60px)}
.hero{gap:clamp(24px,4vw,54px);padding:clamp(42px,5vw,68px) 0 clamp(36px,4.2vw,58px)}
.section-head{margin-bottom:18px}
.product-grid{width:100%;max-width:1120px;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),360px));justify-content:start;gap:20px}
.plan{padding:clamp(18px,2vw,24px)}
.plan-desc{min-height:0}
#benefits .benefit-comparison{max-width:1040px;gap:14px}
.feature-grid{gap:12px}
.release-panel{width:100%;margin:8px 0 0}
@media(max-width:760px){.product-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),360px));gap:12px}.hero{padding-top:38px;padding-bottom:34px}}
.currency-note{margin:12px 0 0;font-size:11px;line-height:1.6}.currency-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Smooth music-player interactions on mouse and touch screens. */
.music-player:not(.is-dragging){transition:width .26s cubic-bezier(.2,.75,.25,1),height .26s cubic-bezier(.2,.75,.25,1),padding .26s cubic-bezier(.2,.75,.25,1),border-radius .26s cubic-bezier(.2,.75,.25,1),grid-template-columns .26s cubic-bezier(.2,.75,.25,1),grid-template-rows .26s cubic-bezier(.2,.75,.25,1),box-shadow .2s ease,transform .2s ease}
.record-toggle{touch-action:none;transition:transform .18s ease,filter .18s ease;cursor:grab}.record-toggle:active{transform:scale(.94)}
.music-player.is-dragging{transition:none!important;transform:scale(1.035);cursor:grabbing;box-shadow:0 18px 48px #0005}
.music-controls button{transition:transform .16s ease,background-color .16s ease,filter .16s ease}.music-controls button:active{transform:scale(.91)}
.music-playlist{opacity:0;transform:translateX(9px);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.75,.25,1);pointer-events:none}.music-playlist.is-visible{opacity:1;transform:translateX(0);pointer-events:auto}
.playlist-track{transition:background-color .14s ease,color .14s ease,transform .14s ease}.playlist-track:active{transform:scale(.985)}
@media(hover:hover) and (pointer:fine){.music-player.compact:hover{box-shadow:0 16px 44px #0004}.music-player.compact:hover .record-toggle{transform:scale(1.06)}.music-controls button:hover{transform:translateY(-1px)}}
@media(pointer:coarse){.music-player.compact{width:72px;height:72px;padding:12px}.music-player.compact .record-toggle,.music-player.compact .record-toggle .record{width:48px;height:48px}.music-player.expanded{max-width:calc(100vw - 20px)!important}.music-player.expanded .music-controls button,.music-player.expanded .music-controls button.primary-control{flex-basis:42px;width:42px;height:42px}.music-player.expanded .music-playlist{transform:translateY(8px)}.music-player.expanded .music-playlist.is-visible{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.music-player,.record-toggle,.music-controls button,.music-playlist,.playlist-track{transition:none!important}.music-player.is-dragging{transform:none}}