:root{--bg: #0b0b0b;--card: #141414;--raised: #1c1c1c;--green: #8cc63f;--cream: #f3efe7;--ink: #121212;--ink-sub: #6e6a62;--text: #f4f1ea;--soft: #d9d5cc;--sub: #9a968d;--dim: #64605a;--danger: #e5484d;--hairline: rgba(255, 255, 255, .08);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--display: "Anton", "Impact", "Arial Narrow", sans-serif;--ui: "Inter", -apple-system, system-ui, sans-serif;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--ui);-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}img{display:block;-webkit-user-drag:none}.display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1}.headline{font-weight:300;letter-spacing:-.02em;line-height:1.1;margin:0}.eyebrow{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--sub)}.tnum{font-variant-numeric:tabular-nums}.app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}.ambient{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.ambient-pool{position:absolute;left:50%;top:16%;width:150vw;height:150vw;translate:-50% -50%;opacity:.13;border-radius:50%;-webkit-mask-image:radial-gradient(circle,#000 0%,transparent 70%);mask-image:radial-gradient(circle,#000 0%,transparent 70%)}.main{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:50% 40%}.page{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;overflow-x:hidden;padding:calc(var(--safe-top) + 14px) 0 calc(var(--safe-bottom) + 130px);-webkit-overflow-scrolling:touch;scrollbar-width:none}.page::-webkit-scrollbar{display:none}.status-fade{position:absolute;left:0;right:0;top:0;height:calc(var(--safe-top) + 14px);pointer-events:none;z-index:3;background:linear-gradient(var(--bg),rgba(11,11,11,.9) 50%,rgba(11,11,11,0))}.px{padding-left:22px;padding-right:22px}.mx{margin-left:16px;margin-right:16px}.card{background:var(--card);border:1px solid var(--hairline);border-radius:20px}.tabbar{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;padding:0 92px var(--safe-bottom) 0;background:var(--bg);border-top:1px solid var(--hairline)}.tab{flex:1;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;padding-top:11px;position:relative;color:var(--dim);transition:color .25s}.tab.on{color:var(--text)}.tab svg{width:22px;height:22px}.tab span{font-size:9.5px;font-weight:500;letter-spacing:.14em}.tab.on span{font-weight:600}.tab-indicator{position:absolute;top:-1px;width:26px;height:3px;background:var(--green);clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%)}.fab{position:absolute;right:18px;bottom:calc(var(--safe-bottom) + 12px);z-index:12;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 14px #00000080;color:var(--ink)}.fab svg{width:22px;height:22px}.toast-wrap{position:absolute;left:22px;right:22px;bottom:calc(var(--safe-bottom) + 92px);z-index:15;pointer-events:none}.toast{display:flex;align-items:center;gap:11px;padding:15px 18px;border-radius:999px;background:var(--cream);color:var(--ink);box-shadow:0 12px 24px #00000073;font-size:14px;font-weight:500}.toast .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}.toast .tag{margin-left:auto;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-sub)}.slant{position:relative;width:100%;padding:17px 0;display:flex;align-items:center;justify-content:center;gap:10px;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);background:var(--raised);color:var(--text);transition:transform .25s cubic-bezier(.3,1.4,.5,1),color .2s}.slant:before{content:"";position:absolute;inset:0 auto 0 0;width:20px;background:var(--green);clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:width .32s cubic-bezier(.2,.8,.2,1)}.slant:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;clip-path:inherit;box-shadow:inset 0 0 0 1px #ffffff24;pointer-events:none}.slant>*{position:relative}.slant:active{transform:scale(.97);color:var(--ink)}.slant:active:before{width:calc(100% + 12px)}.slant.ink{background:var(--ink);color:var(--cream)}.slant .label{font-family:var(--display);font-size:21px;letter-spacing:.04em;text-transform:uppercase;line-height:1}.roll{display:inline-flex}.roll-slot{display:inline-flex;position:relative;overflow:hidden}.roll-slot>span{display:inline-block}.press{transition:transform .26s cubic-bezier(.3,1.5,.5,1),opacity .2s}.press:active{transform:scale(.95);opacity:.85}.header{display:flex;align-items:center;justify-content:space-between}.wordmark{display:flex;align-items:center;gap:9px}.wordmark img{height:29px}.wordmark .display{font-size:21px;letter-spacing:.03em}.showcase{position:relative;padding:22px;border-radius:28px;overflow:hidden}.showcase-pool{position:absolute;left:50%;top:42%;width:420px;height:420px;translate:-50% -50%;opacity:.22;border-radius:50%;-webkit-mask-image:radial-gradient(circle,#000 0%,transparent 70%);mask-image:radial-gradient(circle,#000 0%,transparent 70%);pointer-events:none}.stage{position:relative;height:262px;display:grid;place-items:center;touch-action:none;perspective:700px}.floor{position:absolute;left:50%;top:calc(50% + 104px);translate:-50% -50%;border-radius:50%;border:1px solid}.can-shadow{position:absolute;left:50%;top:calc(50% + 104px);width:140px;height:24px;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);animation:shadow 5s ease-in-out infinite}@keyframes shadow{50%{width:126px;opacity:.8}}.bob{animation:bob 5s ease-in-out infinite;transform-style:preserve-3d}@keyframes bob{0%,to{transform:translateY(-6px) rotateY(0)}25%{transform:translateY(-13px) rotateY(7deg)}75%{transform:translateY(1px) rotateY(-7deg)}}.can-photo{width:136px;height:192px;border-radius:16px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.14);background:var(--card) center/cover no-repeat}.can-photo:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(200deg,rgba(255,255,255,.22),transparent 45%,rgba(0,0,0,.35))}.thumb{position:relative;overflow:hidden;background:var(--card) center/cover no-repeat;display:grid;place-items:center;flex:none}.thumb .initials{font-family:var(--display);color:#fffffff2}.thumb.gloss:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(225deg,rgba(255,255,255,.12),transparent 45%,rgba(0,0,0,.35))}.bar-track{height:4px;border-radius:4px;background:#ffffff14;overflow:hidden}.bar-fill{height:100%;border-radius:4px}.stats{display:flex;align-items:center;padding:18px 0}.stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px}.vrule{width:1px;height:44px;background:var(--hairline)}.section-head{display:flex;align-items:baseline;justify-content:space-between}.section-head h2{font-size:22px;font-weight:400;letter-spacing:-.01em;margin:0}.rack{display:flex;gap:12px;overflow-x:auto;padding:16px 22px;scrollbar-width:none;perspective:600px}.rack::-webkit-scrollbar{display:none}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--card);border:1px solid var(--hairline);text-align:left;position:relative}.quick .plus{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;flex:none}.pill{position:relative;padding:10px 18px;border-radius:999px;font-size:13px;font-weight:500;color:var(--soft);box-shadow:inset 0 0 0 1px #ffffff2e}.pill .bg{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;background:var(--cream)}.pill span{position:relative;transition:color .25s}.pill.on span{color:var(--ink)}.row-wrap{position:relative;overflow:hidden}.row-delete{position:absolute;inset:0 0 0 auto;width:88px;display:grid;place-items:center;background:var(--danger);color:#fff;font-size:13px;font-weight:600}.row{position:relative;display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--card);touch-action:pan-y}@supports (animation-timeline: view()){.row-wrap{animation:edge linear both;animation-timeline:view()}@keyframes edge{0%{opacity:.35;scale:.97}10%,90%{opacity:1;scale:1}to{opacity:.35;scale:.97}}}.cylinder{position:relative;height:340px;overflow:hidden;touch-action:pan-y}.cyl-card{position:absolute;left:50%;top:50%;width:150px;height:214px;margin:-107px 0 0 -75px;border-radius:15px;box-shadow:0 22px 22px #0009;border:1px solid rgba(255,255,255,.12);background:var(--card) center/cover no-repeat}.edge-btn{position:absolute;top:50%;margin-top:-19px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;z-index:50;background:#141414e6;box-shadow:inset 0 0 0 1px #ffffff24}.big-score{position:absolute;left:50%;top:50%;translate:-50% calc(-50% - 34px);font-size:300px;background:linear-gradient(#f4f1ea1c,#f4f1ea00);-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}.meter{display:flex}.meter button{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px}.meter .slot{height:40px;display:flex;align-items:flex-end}.meter .bar{width:6px;border-radius:3px;transform-origin:bottom}.ranked li{list-style:none;position:relative}.ranked button{width:100%;display:flex;align-items:center;gap:12px;padding:10px 14px;text-align:left;position:relative}.rank-hl{position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff0d;border-left:3px solid var(--green)}.scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c;z-index:20}.sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;background:var(--cream);color:var(--ink);border-radius:28px 28px 0 0;padding:14px 22px calc(var(--safe-bottom) + 30px);touch-action:none}.sheet:after{content:"";position:absolute;left:0;right:0;top:100%;height:400px;background:var(--cream)}.grabber{width:44px;height:4px;border-radius:4px;background:#1212122e;margin:0 auto 20px}.seg{position:relative;flex:1;padding:12px 0;border-radius:999px;font-size:14px;font-weight:500;box-shadow:inset 0 0 0 1px #1212122e}.seg .bg{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;background:var(--ink)}.seg span{position:relative;transition:color .25s}.seg.on span{color:var(--cream)}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:12px;font-size:14px;background:#ffffff73;box-shadow:inset 0 0 0 1px #1212121a;transition:background .25s,box-shadow .25s}.chip.on{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink),0 4px 8px #00000014;font-weight:500}.intro{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;background:var(--bg);display:grid;place-items:center}.burst-canvas{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;pointer-events:none}
