*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;-webkit-text-size-adjust:100%}
body{height:100dvh}
body{background:var(--ink);color:var(--txt);font:15px/1.5 'Bricolage Grotesque',system-ui,sans-serif;display:flex;overflow:hidden}
#bars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(60vmax 60vmax at 35% 50%,rgb(var(--accent-rgb)/calc(.16 + var(--pulse,0)*.3)),transparent 60%)}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;font:inherit;color:inherit;background:none;border:0;cursor:pointer;position:relative;overflow:hidden}
input{font:inherit;color:inherit}
ul{list-style:none}
i{line-height:1}
h1{font-size:clamp(26px,3vw,34px);line-height:1;letter-spacing:-.045em;font-weight:800;overflow-wrap:anywhere}
.intro{position:fixed;inset:0;z-index:50;background:var(--accent);display:grid;place-items:center;animation:curtain .8s var(--ease) 1.25s forwards}
.intro img{width:min(46vw,250px);height:auto;opacity:0;transform:translateY(22px) scale(.95);animation:logoIn .8s var(--ease) .1s forwards}
@keyframes logoIn{to{opacity:1;transform:none}}
@keyframes curtain{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
[hidden]{display:none!important}
@keyframes ping{to{transform:scale(2.2);opacity:0}}
@keyframes pop{from{transform:translateY(120%)}}