@font-face{font-family:"Nirmala";src:url("assets/NirmalaB.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
:root{--u:calc(min(100vw,600px)/1080);--ease:cubic-bezier(.22,1,.36,1);--dur:.42s}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#000;min-height:100%}
body{font-family:"Nirmala","Nirmala UI",system-ui,sans-serif;font-weight:700;color:#fff;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
.stage{position:relative;width:calc(1080*var(--u));height:calc(2158*var(--u));margin:0 auto;overflow:hidden;background:#000}
.stage>*{position:absolute}
.logo{left:calc(305*var(--u));top:calc(194*var(--u));width:calc(470*var(--u));height:auto}
.controls{left:0;right:0;top:calc(420*var(--u));height:calc(60*var(--u));display:flex;justify-content:center;align-items:center;gap:calc(50*var(--u))}
.ctl{background:none;border:0;color:#fff;font:inherit;font-size:calc(28*var(--u));letter-spacing:-.02em;cursor:pointer;touch-action:manipulation;padding:0 calc(6*var(--u))}
.divider{width:max(1px,calc(3*var(--u)));height:calc(38*var(--u));background:#fff}
.cards{list-style:none;left:calc(305*var(--u));top:calc(621*var(--u));width:calc(470*var(--u));display:flex;flex-direction:column;gap:calc(18.5*var(--u))}
.card{display:flex;align-items:center;height:calc(129.5*var(--u));padding-left:calc(86*var(--u));background:#fff;color:#000;border-radius:calc(42*var(--u));text-decoration:none;font-size:calc(36*var(--u));letter-spacing:-.025em;touch-action:manipulation}
.icon{flex:none;width:calc(72*var(--u));height:calc(72*var(--u));background:#000;border-radius:calc(16*var(--u));display:grid;place-items:center;margin-right:calc(60*var(--u))}
.icon img{width:calc(40*var(--u));height:calc(40*var(--u));object-fit:contain}
.card,.ctl{transition:transform .15s var(--ease)}
.card:active,.ctl:active{transform:scale(.97)}
.card:focus-visible,.ctl:focus-visible{outline:2px solid #4dbbff;outline-offset:3px}
/* text roll */
.roll{display:block;position:relative;overflow:hidden;height:1.4em;line-height:1.4em;white-space:nowrap}
.track{display:flex;flex-direction:column;transition:transform var(--dur) var(--ease);will-change:transform}
.track>span{display:block;height:1.4em}
.is-rolled .track,.rolling .track,.card:focus-visible .track,.ctl:focus-visible .track{transform:translateY(-50%)}
@media (hover:hover){.card:hover .track,.ctl:hover .track{transform:translateY(-50%)}}
.qr{left:calc(423*var(--u));top:calc(1741*var(--u));width:calc(234*var(--u));height:calc(234*var(--u));background:#fff}
.url{left:0;right:0;top:calc(1990*var(--u));text-align:center;font-size:calc(23*var(--u));letter-spacing:-.02em;line-height:calc(36*var(--u))}
.art{left:calc(45*var(--u));top:calc(2008*var(--u));width:calc(316*var(--u));height:auto;pointer-events:none}
@media (prefers-reduced-motion:reduce){.track,.card,.ctl{transition:none!important}.track{transform:none!important}.card:active,.ctl:active{transform:none}}