/* 100K Club: styles ported verbatim from the claude.ai artifact (Main.dc.html). */
body{margin:0;background:#0A1430}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top, 0px) + 88px)}
a{color:#E6C987}a:hover{color:#F1DCA0}
:focus-visible{outline:2px solid #E6C987;outline-offset:3px}
.num{font-variant-numeric:tabular-nums}
.gold-mask{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:url(assets/crest-mask.webp);mask-image:url(assets/crest-mask.webp);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.gold-sweep{background:linear-gradient(105deg,rgba(255,244,210,0) 40%,rgba(255,244,210,.75) 48%,rgba(255,255,255,.95) 50%,rgba(255,244,210,.75) 52%,rgba(255,244,210,0) 60%);background-size:300% 100%;background-repeat:no-repeat;animation:sweep 6s ease-in-out infinite}
@keyframes sweep{0%{background-position:100% 0}40%{background-position:0% 0}100%{background-position:0% 0}}
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;box-sizing:border-box;border-radius:12px;font:600 15px/1 'Geist',system-ui,sans-serif;letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .15s ease-out,box-shadow .2s ease-out,filter .2s ease-out,background-color .2s ease-out}
@media (hover: hover){.btn:hover{transform:translateY(-1px)}}
.btn:active{transform:translateY(1px) scale(.985)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);transition:transform .3s ease-out;pointer-events:none}
@media (hover: hover){.btn:hover::after{transform:translateX(120%)}}
.btn-gold{background:linear-gradient(180deg,#FFF4C9 0%,#F6DC98 14%,#E2BE6E 36%,#C49442 54%,#B4843A 62%,#D4AB5C 82%,#EFCF86 100%);color:#0D152E;border:1px solid #8A6526;text-shadow:0 1px 0 rgba(255,246,214,.6);box-shadow:inset 0 1px 0 rgba(255,252,236,.95),inset 0 -1px 0 rgba(255,236,180,.55),inset 0 0 0 1px rgba(120,86,30,.25),0 1px 0 rgba(0,0,0,.4),0 14px 30px -12px rgba(214,170,90,.65),0 0 0 1px rgba(10,20,48,.4)}
.btn-gold::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(112deg,rgba(255,255,255,0) 18%,rgba(255,252,238,.5) 30%,rgba(255,255,255,0) 42%);mix-blend-mode:soft-light;pointer-events:none;z-index:-1}
@media (hover: hover){.btn-gold:hover{filter:brightness(1.07) saturate(1.06);box-shadow:inset 0 1px 0 rgba(255,252,236,1),inset 0 -1px 0 rgba(255,236,180,.6),inset 0 0 0 1px rgba(120,86,30,.25),0 1px 0 rgba(0,0,0,.4),0 18px 36px -12px rgba(214,170,90,.8),0 0 0 1px rgba(10,20,48,.4)}}
.btn-gold:active{filter:brightness(.96);box-shadow:inset 0 2px 5px rgba(100,70,20,.5),inset 0 -1px 0 rgba(255,236,180,.35),0 1px 0 rgba(0,0,0,.35)}
.btn-gold:hover{color:#121A33}
.btn-outline{background:linear-gradient(180deg,#142650,#0B1634) padding-box,linear-gradient(180deg,#FFF0C2,#E2BE6E 30%,#B4843A 65%,#EFCF86) border-box;color:#F1DCA0;border:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 0 rgba(0,0,0,.4),0 12px 26px -14px rgba(0,0,0,.7)}
@media (hover: hover){.btn-outline:hover{background:linear-gradient(180deg,#1A2F60,#0F1C40) padding-box,linear-gradient(180deg,#FFF4C9,#F0D08A 30%,#C49442 65%,#F6DC98) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 0 rgba(0,0,0,.4),0 14px 30px -14px rgba(0,0,0,.7)}}
.btn-outline:hover{color:#F7E6B0}
.btn-sm{min-height:44px;padding:0 16px;font-size:14px;border-radius:11px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border:1px solid rgba(255,255,255,.085);border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 28px 56px -32px rgba(0,0,0,.7)}
.nav-link{position:relative;text-decoration:none;font-weight:500;font-size:15px;transition:color .2s ease-out}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:#E6C987;transform:scaleX(0);transform-origin:left;transition:transform .2s ease-out}
@media (hover: hover){.nav-link:hover::after{transform:scaleX(1)}}
.nav-link:focus-visible::after{transform:scaleX(1)}
.cat-btn{transition:background-color .15s ease}
.cat-btn:hover{background-color:rgba(255,255,255,.05) !important}
.m-cta{display:none !important}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.m-cta{background:#081127 !important}}
::selection{background:rgba(230,201,135,.35);color:#fff}
.card{position:relative;isolation:isolate}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(380px circle at var(--mx,-999px) var(--my,-999px),rgba(230,201,135,.6),transparent 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(520px circle at var(--mx,-999px) var(--my,-999px),rgba(230,201,135,.075),transparent 42%);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:-1}
@media (hover: hover){.card:hover::before,.card:hover::after{opacity:1}}
@property --ga{syntax:'<angle>';inherits:false;initial-value:0deg}
.gold-frame{background:conic-gradient(from var(--ga),#4A3818,#F6DFA0 10%,#9C7A35 22%,#2E2410 40%,#E8C979 55%,#4A3818 70%,#FFF1C7 82%,#4A3818) !important;}
@keyframes spinga{to{--ga:360deg}}
@keyframes introCrest{from{opacity:0;transform:translateY(48px) scale(.9);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes introUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.intro-crest{animation:introCrest 1.3s cubic-bezier(.16,.84,.24,1) both}
.intro-1{animation:introUp .9s cubic-bezier(.2,.8,.2,1) .65s both}
.intro-2{animation:introUp .9s cubic-bezier(.2,.8,.2,1) .8s both}
.intro-3{animation:introUp .9s cubic-bezier(.2,.8,.2,1) .95s both}
.intro-4{animation:introUp .9s cubic-bezier(.2,.8,.2,1) 1.1s both}
.intro-nav{animation:introUp .8s ease .2s both}
@supports (animation-timeline: view()){
.reveal{animation:revealUp linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
@keyframes revealUp{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:none}}
h2.reveal{animation-name:revealWipe;animation-range:entry 5% cover 32%}
@keyframes revealWipe{from{clip-path:inset(-12% 100% -12% 0);opacity:.35}to{clip-path:inset(-12% 0 -12% 0);opacity:1}}
@keyframes growX{to{transform:scaleX(1)}}
}
.field:focus{outline:none;border-color:#E6C987;box-shadow:0 0 0 4px rgba(230,201,135,.14)}
input[type=range]{accent-color:#E6C987;width:100%}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(255,107,107,.55)}100%{box-shadow:0 0 0 10px rgba(255,107,107,0)}}
@media (max-width: 640px){
.lb-table{min-width:0 !important}
.lb-table thead{display:none}
.lb-table .lb-row{display:grid;grid-template-columns:36px auto minmax(0,1fr) auto;grid-template-areas:"pos name name units" "pos sport rec roi";column-gap:10px;row-gap:4px;padding:14px 16px;align-items:baseline}
.lb-table .lb-row td{padding:0 !important}
.lb-table .lb-pos{grid-area:pos;align-self:center}
.lb-table .lb-name{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-table .lb-units{grid-area:units;text-align:right}
.lb-table .lb-sport{grid-area:sport;font-size:13px}
.lb-table .lb-rec{grid-area:rec;font-size:13px;white-space:nowrap}
.lb-table .lb-roi{grid-area:roi;text-align:right;font-size:13px}
}
@media (max-width: 720px){
.dw-win{flex-wrap:nowrap !important}
.dw-rail,.dw-sidehead{display:none !important}
.dw-side{flex:0 0 142px !important;max-width:142px !important;padding:8px !important;justify-content:center}
.dw-side .cat-btn{min-height:34px !important;padding:5px 6px !important;gap:4px !important;font-size:12px !important;letter-spacing:.01em !important}
.dw-side .cat-btn>span:first-child{left:-8px !important}
.dw-side .cat-btn>span:nth-child(3){display:none !important}
.dw-side .cat-btn span[aria-label]{width:18px !important;height:18px !important}
.dw-main{flex:1 1 0 !important;min-width:0 !important}
.dw-main .dw-top{display:none !important}
.dw-main .dw-copy{padding:12px 12px 8px !important}
.dw-main .dw-copy h3{font-size:19px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-main .dw-copy p{display:none !important}
.dw-main .dw-copy>div{gap:0 !important}
.dw-win{height:232px}
.dw-main .dw-preview{flex:none !important;margin:0 10px 10px !important;height:172px !important;min-height:0;padding:10px !important;border-radius:12px !important;overflow:hidden !important}
.dw-preview .btn{display:none !important}
.dw-msgs,.dw-openbar{display:none !important}
.dw-open-cta{display:flex !important}
.dw-open-cta .btn,.dw-preview .dw-m-only{display:inline-flex !important}
.dw-preview span[style*="font-size: 17px"]{font-size:13px !important}
.dw-preview span[style*="width: 48px; height: 48px"]{width:32px !important;height:32px !important}
.dw-preview span[style*="width: 36px; height: 36px"]{width:24px !important;height:24px !important;font-size:12px !important}
.dw-preview span[style*="font-size: 15px; color: #D6DBE6"]{font-size:12px !important}
.dw-preview span[style*="font-size: 13px; color: #B9C1D2"]{font-size:12px !important}
.lad-ranks{scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.lad-ranks button{scroll-snap-align:start}
.lad-bar{display:none}
.lad-ranks{display:flex !important;overflow-x:auto;gap:8px !important;margin:-4px -24px -8px;padding:4px 24px 10px;scrollbar-width:none}
.lad-ranks button[aria-pressed="true"]{box-shadow:inset 0 1px 0 rgba(255,255,255,0.55),0 3px 8px -3px rgba(0,0,0,0.55) !important}
.lad-ranks::-webkit-scrollbar{display:none}
.lad-ranks button{flex-shrink:0;min-height:44px !important;padding:10px 14px !important;white-space:nowrap}
.lad-split{gap:20px !important}
.lad-card{order:-1;padding:0 !important}
.lad-detail h3{font-size:30px !important}
.lad-detail p{font-size:16px !important}
.lad-detail .card{padding:22px !important}
}
.price-gold{background:linear-gradient(100deg,#B4843A 0%,#E2BE6E 22%,#FFF4C9 38%,#E2BE6E 52%,#B4843A 70%,#F0D08A 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:priceSheen 7s ease-in-out infinite;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35)) drop-shadow(0 12px 26px rgba(214,170,90,.28))}
@keyframes priceSheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.metal{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;background-size:250% 100%;animation:priceSheen 7s ease-in-out infinite}
.metal-gold{background-image:linear-gradient(100deg,#B4843A 0%,#E2BE6E 22%,#FFF4C9 38%,#E2BE6E 52%,#B4843A 70%,#F0D08A 100%)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}
.faq-a[data-open="true"]{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
@media (max-width: 760px){
.podium{grid-template-columns:1fr !important;gap:8px !important}
.podium>.pod-card{order:0 !important;margin-bottom:0 !important;display:grid !important;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ord name stats" "ord rank stats";column-gap:14px !important;row-gap:2px !important;align-items:center;padding:12px 16px !important;border-radius:16px !important}
.pod-head{display:contents !important}
.pod-ord{grid-area:ord;font-size:28px !important}
.pod-name{grid-area:name}
.pod-rank{grid-area:rank}
.pod-stats{grid-area:stats;flex-direction:column;align-items:flex-end !important;gap:0 !important;padding-top:0 !important;border-top:none !important}
.pod-stats .metal{font-size:19px !important}
.pod-meta{font-size:12px !important}
}
.enamel{background:radial-gradient(120% 60% at 50% -10%,rgba(230,201,135,.08),rgba(230,201,135,0) 55%),linear-gradient(180deg,#12204A,#0A1532) !important;border:1px solid rgba(230,201,135,.18) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(8,16,40,.5),0 30px 60px -30px rgba(0,0,0,.8) !important}
.rank-metal{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;background-image:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 58%),linear-gradient(180deg,var(--m1) 0%,var(--m2) 44%,var(--m3) 50%,var(--m4) 58%,var(--m5) 100%);background-size:320% 100%,100% 100%;background-position:120% 0,0 0;background-repeat:no-repeat;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35));animation:rankSheen 6s ease-in-out infinite}
@keyframes rankSheen{0%,18%{background-position:120% 0,0 0}62%,100%{background-position:-20% 0,0 0}}
.rm-0{--m1:#FFFFFF;--m2:#DCE2EC;--m3:#6F798D;--m4:#B7BFCD;--m5:#F5F7FA}
.rm-1{--m1:#FFFEF8;--m2:#F2E5C2;--m3:#9C844F;--m4:#DCC796;--m5:#FFF6DD}
.rm-2{--m1:#F5FCFF;--m2:#B6E6FF;--m3:#2A6E9C;--m4:#7FC6EE;--m5:#E3F6FF}
.rm-3{--m1:#FFF4CC;--m2:#EDC566;--m3:#7E5617;--m4:#D2A23E;--m5:#F8E09A}
.rm-4{--m1:#FFF6D8;--m2:#F0CF7A;--m3:#8A6420;--m4:#DDB050;--m5:#FAE6A8}
.enamel.legend-card{background:radial-gradient(120% 60% at 50% -10%,rgba(230,201,135,.10),rgba(230,201,135,0) 55%),linear-gradient(165deg,#17171A 0%,#0B0B0D 55%,#121215 100%) !important;border:1px solid rgba(217,180,90,.5) !important;box-shadow:inset 0 1px 0 rgba(255,236,190,.10),inset 0 0 0 1px rgba(0,0,0,.6),0 30px 60px -30px rgba(0,0,0,.85),0 0 0 1px rgba(217,180,90,.08) !important}
.lad-detail .card{transition:background .45s ease-out,border-color .45s ease-out,opacity .6s ease-out .15s,transform .6s ease-out .15s}
.nav-link[aria-current="true"]{color:#F1DCA0 !important}
.nav-link[aria-current="true"]::after{transform:scaleX(1)}
.m-menu-btn{display:none}
@media (max-width: 900px){.m-menu-btn{display:grid !important}}
@media (max-width: 480px){.nav-join{display:none !important}}
.lb-row{transition:background-color .2s ease-out}
@media (hover: hover){.lb-row:hover{background-color:rgba(230,201,135,.05)}}
@keyframes menuIn{from{opacity:0}to{opacity:1}}
::selection{background:rgba(230,201,135,.38);color:#FFFFFF}
html{scrollbar-color:#9A7841 #081127;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#081127}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#E2BE6E,#9A7841);border-radius:999px;border:2px solid #081127}
.chat-roll{animation:chatRoll 22s linear infinite}
@keyframes chatRoll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.idle-card{animation:idleCard 9s ease-in-out infinite}
@keyframes idleCard{0%,100%{transform:rotateX(7deg) rotateY(-10deg)}25%{transform:rotateX(-3deg) rotateY(4deg)}50%{transform:rotateX(-6deg) rotateY(10deg)}75%{transform:rotateX(4deg) rotateY(-3deg)}}
.idle-foil{animation:idleFoil 9s ease-in-out infinite}
@keyframes idleFoil{0%,100%{background-position:15% 20%,0 0}50%{background-position:85% 80%,0 0}}
.idle-glare{animation:idleGlare 9s ease-in-out infinite}
@keyframes idleSheen{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
@keyframes idleGlare{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
a,button{-webkit-tap-highlight-color:transparent}
@media (hover: hover){
.mcard[data-hover="true"] .idle-card{animation:none;transform:rotateX(calc((0.5 - var(--my, 0.5)) * 20deg)) rotateY(calc((var(--mx, 0.5) - 0.5) * 26deg));transition:transform .12s ease-out}
.mcard[data-hover="true"] .idle-foil{animation:none;opacity:.38 !important;background-position:calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%),0 0 !important}
.mcard[data-hover="true"] .idle-glare{animation:none;opacity:1 !important;background-position:calc(100% - var(--mx, 0.5) * 100%) calc(100% - var(--my, 0.5) * 100%) !important}
}
#updates-email::placeholder{color:#8F9AB2;opacity:1}
.win-dot{display:grid;place-items:center;height:32px;padding:0 4px;background:none;border:none;cursor:pointer}
.pod-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,0.55) 48%,rgba(255,255,255,0.12) 53%,rgba(255,255,255,0) 62%);background-size:260% 100%;mix-blend-mode:overlay;animation:podSheen 6s ease-in-out infinite}
.pod-2 .pod-sheen{animation-delay:-2s}.pod-3 .pod-sheen{animation-delay:-4s}
@keyframes podSheen{0%,100%{background-position:110% 0}50%{background-position:-10% 0}}
.pod-card{transition:transform .25s ease-out,box-shadow .25s ease-out}
@media (hover: hover){.pod-card:hover{transform:translateY(-3px)}}
.lb-wrap{scrollbar-width:none}
.lb-wrap::-webkit-scrollbar{display:none}
@media (max-width: 640px){main h2.reveal{margin-bottom:-4px !important}}
.dot-prog{position:relative;overflow:hidden}
.dot-prog::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#B4843A,#F1DCA0);transform-origin:left;animation:dotFill 6s linear forwards}
.dot-prog[data-paused="true"]::after{animation-play-state:paused}
@keyframes dotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){.dot-prog::after{animation:none;transform:none}}
@media (hover: none){[data-crest]{animation:crestIdle 5.5s ease-in-out infinite}}
@keyframes crestIdle{0%,100%{transform:rotateX(4deg) rotateY(-7deg)}25%{transform:rotateX(-2deg) rotateY(3deg)}50%{transform:rotateX(-4deg) rotateY(7deg)}75%{transform:rotateX(2deg) rotateY(-3deg)}}
@media (prefers-reduced-motion: reduce){[data-crest]{animation:none !important}}
.btn-round{position:relative;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;cursor:pointer;color:#F1DCA0;border:1px solid transparent;background:linear-gradient(180deg,#142650,#0B1634) padding-box,linear-gradient(180deg,#FFF0C2,#E2BE6E 30%,#B4843A 65%,#EFCF86) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 0 rgba(0,0,0,.4),0 12px 26px -14px rgba(0,0,0,.7);transition:transform .15s ease-out,box-shadow .2s ease-out,background .2s ease-out,color .2s ease-out}
@media (hover: hover){.btn-round:hover{color:#FFF4C9;background:linear-gradient(180deg,#1A2F60,#0F1C40) padding-box,linear-gradient(180deg,#FFF4C9,#F0D08A 30%,#C49442 65%,#F6DC98) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 0 rgba(0,0,0,.4),0 14px 30px -14px rgba(0,0,0,.7)}}
.btn-round:active{transform:scale(.94)}
@media (max-width: 640px){
.hero-inner{padding-top:84px !important;padding-bottom:36px !important;gap:18px !important}
[data-crest]{width:min(280px,60vw) !important}
.hero-inner .intro-1{font-size:26px !important}
.hero-inner p.intro-1{font-size:15px !important;margin-top:-10px !important}
}
@supports (height: 100dvh){.m-menu{height:100dvh !important}}
.m-cta{transition:transform .3s ease-out,opacity .3s ease-out}
.m-cta[data-show="false"]{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
@media (max-width: 640px){.hero-trust{display:none !important}}
.dw-m-only{display:none !important}
.track-num{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 14px 'Plus Jakarta Sans',Geist,system-ui,sans-serif;color:#1A1205;background:linear-gradient(160deg,#F7E6B0,#CBAA67 55%,#9A7841);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 6px rgba(0,0,0,.35)}
[data-crest] .gold-mask{z-index:4}
/* ══ Carousel (Bencho, MIT) ════════════════════════════════
   Cards on a ring that drift at rest, give under the pointer,
   and can be swiped round. Three motions on three nested
   elements, one transform each — see the note in makeCarousel
   for why they cannot share a node.

   100K: Bencho's design tokens are defined here on the
   component's own root, because this page has no global
   equivalents to map them to (it writes its colours as plain
   values), and defining them here means nothing leaks out.
   --bg is the page navy, --ink-rgb the page's off-white ink
   as three bare numbers (the CSS builds rgba() from it),
   --font-ui the page's UI face, and --shadow-rgb the black
   every other shadow on the page uses. --lift and --sway are
   set per card by the script. */
.car-wrap {
  position: relative;
  width: 100%;}
/* 100K: on narrow screens the ring bleeds to the screen edges rather than the column's padding, so the clipped side cards are cut by the phone, not by an invisible line 24px in */
@media (max-width: 808px) {
  .car-wrap { margin: 0 -24px; width: calc(100% + 48px); }
}
.car {
  --bg: #0A1430;
  --ink-rgb: 243, 241, 236;
  --font-ui: Geist, system-ui, sans-serif;
  --shadow-rgb: 0, 0, 0;
  position: absolute;
  left: 50%;
  top: 0;
  transform-origin: top center;
  font-family: var(--font-ui);}

/* ── the frame is only a frame ─────────────────────────────
   No background, no clip, no mask. The cards are on a ring
   and never reach an edge, so the question of what happens at
   the edge is gone and so is everything that was answering
   it. */
.car-track {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;}

.car-track[data-held="true"] {
  cursor: grabbing;}

.car-track:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(var(--ink-rgb), 0.4);
  border-radius: 24px;}

/* the slot holds WHERE on the ring and the card's own resting
   ANGLE, written per frame by the script — so it carries no
   transition of its own, or the easing and the drag would
   re-interpolate against each other */
.car-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center;}

/* ── the drift ──────────────────────────────────────────────
   Keyframes rather than a loop: a rAF per card would be a
   permanent loop for motion nobody is watching. This runs on
   the compositor and pauses itself when the tab hides. The
   period is set per card and deliberately does not divide
   into its neighbours'.

   The perspective lives HERE, not on the track: each card is
   its own object being touched and wants its own vanishing
   point. */
.car-float {
  width: 100%;
  height: 100%;
  perspective: 760px;
  animation: car-bob 5s ease-in-out infinite;}

/* 100K: the card is the page's enamel frame around the slip,
   like the slides it replaces, so the screenshot sits in the
   same gold-edged plate as everything else on the page. */
.car-card {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 8px;
  border-radius: 18px;
  box-sizing: border-box;
  /* ONE SHADOW, AND IT DOES NOT MOVE. The dent and the rim say
     the card went back; the shadow only has to say it is off
     the ground. */
  box-shadow: 0 12px 28px -10px rgba(var(--shadow-rgb), 0.55) !important;
  /* no transition: the tilt is sprung in the script, and a
     transition on top would be a second opinion */}

.car-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  pointer-events: none;}

.car-sheen {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 18px;
  pointer-events: none;}

@media (prefers-reduced-motion: reduce) {
  .car-float { animation: none; }
}

@keyframes car-bob {
  0%, 100% {
    transform: translateY(calc(var(--lift, 4px) * -1)) rotate(calc(var(--sway, 1deg) * -1));
  }
  50% {
    transform: translateY(var(--lift, 4px)) rotate(var(--sway, 1deg));
  }}

/* ══ Emoji reactions (Bencho, MIT) ═══════════════════════════
   100K: Bencho's design tokens are defined on the component's
   own root, because this page has no global equivalents (it
   writes its colours as plain values), and defining them here
   means nothing leaks out. Mapped to the Discord preview's own
   colours: the chip surface is the faint lift the preview's
   panels use on the navy, the ink is the chat text, and the
   signal colour for "you are in this one" is the club gold. */
.rxn {
  --card: rgba(255, 255, 255, 0.05);
  --fill-slab: rgba(255, 255, 255, 0.05);
  --ink: #D6DBE6;
  --fill-on: #D6DBE6;
  --signal: #E6C987;
  --slab: #050B1A;
  --on-slab: #F3F1EC;
  --pane-edge: rgba(230, 201, 135, 0.18);
  --font-ui: Geist, system-ui, sans-serif;
  position: relative;
  margin-top: 6px;
  font-family: var(--font-ui);
  color: var(--fill-on, var(--ink));}

/* 100K: Discord-sized chips — 28px rather than Bencho's 36, so
   the row reads as reactions under a chat line rather than as
   buttons on a card */
.rxn-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 28px;}

.rxn-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: 999px;
  background: var(--fill-slab, var(--card));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease;
  letter-spacing: -0.01em;}

.rxn-chip:hover { background: rgba(255, 255, 255, 0.09); }

/* the ones you are in carry a coloured edge — the fill stays the
   chip's own */
.rxn-chip[data-mine] {
  background: color-mix(in srgb, var(--signal, #2231dd) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal, #2231dd) 45%, transparent);
  color: var(--signal, #2231dd);}

.rxn-chip-e { font-size: 16px; line-height: 1; transition: opacity 160ms ease; letter-spacing: -0.02em; }

.rxn-chip-e[data-landing] { opacity: 0; }

/* ── each emoji's own arrival ─────────────────────────────── */
.rxn-p {
  position: relative;
  display: inline-block;
  font-style: normal;
  line-height: 1;}

.rxn-p[data-play][data-k="launch"] { animation: rxn-launch 640ms cubic-bezier(0.3, 1.2, 0.4, 1); }

/* its exhaust: a small puff left behind under it */
.rxn-p[data-play][data-k="launch"]::after {
  content: "";
  position: absolute;
  left: 20%;
  top: 70%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fill-on, #17181a) 20%, transparent);
  animation: rxn-puff 520ms ease-out forwards;}

.rxn-p[data-play][data-k="flicker"] { animation: rxn-flicker 620ms ease-out; }

.rxn-p[data-play][data-k="confetti"] { animation: rxn-pop 420ms cubic-bezier(0.3, 1.6, 0.4, 1); }

.rxn-bits { position: absolute; left: 50%; top: 50%; pointer-events: none; }

.rxn-bits b {
  position: absolute;
  width: 3px;
  height: 3px;
  margin: -1.5px;
  border-radius: 1px;
  background: var(--c);
  animation: rxn-bit 560ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;}

.rxn-p[data-play][data-k="glance"] { animation: rxn-glance 700ms ease-in-out; }

.rxn-p[data-play][data-k="tick"] { animation: rxn-tick 460ms cubic-bezier(0.3, 1.6, 0.4, 1); }

.rxn-p[data-play][data-k="beat"] { animation: rxn-beat 620ms ease-in-out; }

.rxn-p[data-play][data-k="nod"] { animation: rxn-nod 520ms cubic-bezier(0.3, 1.4, 0.4, 1); transform-origin: 50% 90%; }

.rxn-p[data-play][data-k="laugh"] { animation: rxn-laugh 560ms ease-in-out; }

.rxn-p[data-play][data-k="wow"] { animation: rxn-wow 520ms cubic-bezier(0.3, 1.5, 0.4, 1); transform-origin: 50% 100%; }

.rxn-p[data-play][data-k="droop"] { animation: rxn-droop 700ms ease-in-out; transform-origin: 50% 100%; }

.rxn-p[data-play][data-k="bow"] { animation: rxn-bow 620ms ease-in-out; transform-origin: 50% 100%; }

@media (prefers-reduced-motion: reduce) {
  .rxn-p[data-play], .rxn-p[data-play]::after, .rxn-bits b { animation: none; }
}

.rxn-count { display: inline-flex; font-variant-numeric: tabular-nums; }

.rxn-col { display: inline-block; height: 1.4em; overflow: hidden; line-height: 1.4em; }

.rxn-strip {
  display: flex;
  flex-direction: column;
  transition: transform 220ms cubic-bezier(0.24, 1.34, 0.38, 1);}

.rxn-strip > span { height: 1.4em; }

.rxn-add-wrap { display: flex; }

.rxn-add {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--fill-slab, var(--card));
  color: color-mix(in srgb, var(--fill-on, #17181a) 52%, transparent);
  cursor: pointer;
  /* a finger holds and slides from here: no scroll, no text
     selection, no system menu getting in the way */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: color 160ms ease, scale 160ms cubic-bezier(0.24, 1.34, 0.38, 1);}

.rxn-add:hover, .rxn-add[aria-expanded="true"] { color: var(--fill-on, var(--ink)); scale: 1.06; }

/* the pill floats above the row, from the row's start, so it
   never runs off the block whatever the chips have pushed the
   button to. 100K: above the chips rather than in place of the
   message — see the note in makeReactions. */
.rxn-pill {
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: calc(100% + 6px);
  display: flex;
  align-items: center;
  /* the same air round the row on every side — the emoji's own
     box is its glyph, so the air above and below is the padding
     and nothing else */
  padding: 6px;
  border-radius: 22px;
  background: #142252;
  box-shadow: 0 0 0 1px var(--pane-edge), 0 14px 30px -12px rgba(0, 0, 0, 0.7);
  transform-origin: 14px 100%;}

.rxn-emo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;}

.rxn-emo span {
  display: block;
  font-size: 20px;
  line-height: 1;
  transform: scale(var(--s, 1));
  transform-origin: 50% 90%;
  /* still one at a time, but it eases up to size and back with a
     soft settle rather than snapping */
  transition: transform 220ms cubic-bezier(0.24, 1.34, 0.38, 1);
  letter-spacing: -0.02em;}

.rxn-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  translate: -50% 0;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--slab, #17181a);
  color: var(--on-slab, #fff);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease, left 160ms ease;
  letter-spacing: 0em;}

.rxn-fly {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  display: grid;
  place-items: center;
  font-size: 16px;
  pointer-events: none;
  letter-spacing: -0.01em;}

@keyframes rxn-launch {
  0% { transform: translate(0, 0) rotate(0); }
  30% { transform: translate(2px, -7px) rotate(-12deg); }
  60% { transform: translate(-1px, 1px) rotate(4deg); }
  100% { transform: translate(0, 0) rotate(0); }}

@keyframes rxn-puff {
  0% { opacity: 0; transform: scale(0.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-5px, 6px) scale(1.6); }}

@keyframes rxn-flicker {
  0% { transform: scale(1); filter: brightness(1); }
  15% { transform: scale(1.18, 1.1); filter: brightness(1.35); }
  30% { transform: scale(0.94, 1.08); filter: brightness(1); }
  48% { transform: scale(1.1, 0.96); filter: brightness(1.25); }
  66% { transform: scale(0.98, 1.04); }
  100% { transform: scale(1); filter: brightness(1); }}

@keyframes rxn-pop { 0% { transform: scale(0.7) rotate(-12deg); } 50% { transform: scale(1.18) rotate(6deg); } 100% { transform: none; } }

@keyframes rxn-bit {
  0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(-16px) scale(0.6); opacity: 0; }}

@keyframes rxn-glance {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2.5px); }
  60% { transform: translateX(2.5px); }}

@keyframes rxn-tick { 0% { transform: scale(0.6) rotate(-14deg); } 55% { transform: scale(1.2) rotate(4deg); } 100% { transform: none; } }

@keyframes rxn-beat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.26); }
  30% { transform: scale(1); }
  45% { transform: scale(1.18); }
  60% { transform: scale(1); }}

@keyframes rxn-nod { 0% { transform: rotate(0); } 35% { transform: rotate(-16deg) translateY(-2px); } 100% { transform: rotate(0); } }

@keyframes rxn-laugh {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-10deg); }
  40% { transform: rotate(9deg); }
  60% { transform: rotate(-7deg); }
  80% { transform: rotate(4deg); }}

@keyframes rxn-wow { 0% { transform: scale(1); } 35% { transform: scale(0.92, 1.22); } 100% { transform: scale(1); } }

@keyframes rxn-droop { 0%, 100% { transform: none; } 40% { transform: translateY(2px) rotate(-8deg) scale(0.96); } }

@keyframes rxn-bow { 0%, 100% { transform: none; } 40% { transform: translateY(2px) scale(1, 0.9); } 60% { transform: translateY(1px) scale(1, 0.95); } }

h1,h2,h3{text-wrap:balance}
.skip-link{position:absolute;left:12px;top:-64px;z-index:100;background:#E6C987;color:#0A1430;padding:12px 18px;border-radius:10px;font-weight:600;text-decoration:none;transition:top .15s ease-out}
.skip-link:focus{top:12px;color:#0A1430}
p{text-wrap:pretty}
@media (max-width: 900px){.nav-links{display:none !important}}
@media (max-width: 720px){.m-cta{display:flex !important}}
@media (prefers-reduced-motion: reduce){.gold-sweep{animation:none;opacity:0}.reveal,.intro-crest,.intro-1,.intro-2,.intro-3,.intro-4,.intro-nav,.gold-frame,.nav-progress,.price-gold,.metal,.rank-metal,.chat-roll,.idle-card,.idle-foil,.idle-glare,.idle-sheen,.pod-sheen{animation:none !important}*{transition:none !important;scroll-behavior:auto !important}}

/* ══ Static-port additions (not in the original) ════════════════ */
/* icons in buttons keep their size; in the phone's sticky bar the
   original let the Discord icon shrink to a dot */
.btn svg{flex-shrink:0}