:root{--ink:#e8eaed;--ink-dim:#9aa0a6;--surface:#1c1f26;--canvas:#0e1014;--line:#30343c;--shadow:0 1px 2px #0006, 0 16px 40px #00000073;--font:"Outfit", "Segoe UI", sans-serif;color:var(--ink);background:var(--canvas);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:var(--font);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}*,:before,:after{box-sizing:border-box}html,body,#app{height:100dvh;overflow:hidden}body{overscroll-behavior:none;background:radial-gradient(circle at 8% 0%, #448aff2e, transparent 28%), radial-gradient(circle at 92% 8%, #ff525224, transparent 26%), radial-gradient(circle at 70% 100%, #69f0ae1a, transparent 30%), var(--canvas);margin:0}button{font:inherit;cursor:pointer}.app-shell{width:min(980px,100%);height:100dvh;padding:max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));margin:0 auto;overflow:hidden}.dice-tray{background:var(--surface);border:1px solid var(--line);height:100%;min-height:0;box-shadow:var(--shadow);border-radius:28px;flex-direction:column;padding:.9rem .9rem .85rem;display:flex;overflow:hidden}.notation{color:var(--ink-dim);white-space:nowrap;text-overflow:ellipsis;margin:0 0 .65rem;font-weight:500;overflow:hidden}.die-picker,.tray-actions{flex-wrap:wrap;align-items:center;gap:.55rem;display:flex}.die-picker{margin-bottom:.35rem;padding:.4rem .15rem .15rem;overflow:visible}.die-chip{letter-spacing:.01em;border:0;border-radius:999px;flex:1 1 0;min-width:0;padding:.7rem .15rem;font-size:clamp(.78rem,3.1vw,1rem);font-weight:700;transition:transform .14s,filter .14s;box-shadow:0 1px 2px #00000059}.die-chip:hover{filter:brightness(1.08);transform:translateY(-2px)}.die-chip:active{transform:translateY(0)scale(.97)}.tray-actions{gap:.65rem;margin-bottom:1rem;display:grid}.quiet-actions{gap:.35rem;display:flex}.text-action{color:var(--ink-dim);background:0 0;border:0;padding:.35rem .55rem;font-weight:600}.text-action:disabled{opacity:.35;cursor:not-allowed}.text-action:not(:disabled):hover{color:var(--ink)}.roll-bar{color:#121418;letter-spacing:.01em;background:#e8eaed;border:0;border-radius:14px;width:100%;padding:.9rem 1rem;font-size:1.05rem;font-weight:700}.roll-bar:disabled{opacity:.4;cursor:not-allowed}.roll-bar:not(:disabled):hover{background:#fff}.dice-canvas{border:1px solid var(--line);background:#090b10;border-radius:22px;flex:auto;width:100%;min-height:0;position:relative;overflow:hidden}.parked{z-index:2;pointer-events:none;flex-wrap:wrap;align-items:center;gap:10px;width:min(320px,78%);display:flex;position:absolute;top:18px;left:18px}.parked-die{place-items:center;width:58px;height:58px;font-size:.85rem;font-weight:700;display:grid;box-shadow:0 10px 18px #00000073}.shape-4{clip-path:polygon(50% 6%,94% 88%,6% 88%)}.shape-6{border-radius:8px}.shape-8{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.shape-10{clip-path:polygon(50% 0,95% 38%,77% 100%,23% 100%,5% 38%)}.shape-12{clip-path:polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%)}.shape-20{border-radius:50%}.shape-100{border-radius:12px;width:74px}.dice-canvas canvas{width:100%!important;height:100%!important}.fireworks{z-index:4;pointer-events:none;position:absolute;inset:0;overflow:hidden}.spark{border-radius:50%;animation:1s ease-out forwards burst;position:absolute;top:58%;left:50%;box-shadow:0 0 10px}@keyframes burst{0%{opacity:1;transform:translate(-50%,-50%)scale(.4)}to{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.15);opacity:0}}@keyframes sink{0%{opacity:.9;transform:translate(-50%,-50%)scale(1)}to{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.7);opacity:0}}.roll-result{z-index:5;pointer-events:none;place-items:center;display:grid;position:absolute;bottom:.7rem;left:0;right:0}.result-total{color:#121418;letter-spacing:-.06em;background:#f8f9fa;border-radius:24px;place-items:center;min-width:5.2rem;padding:.05rem .85rem .2rem;font-size:clamp(4.2rem,20vw,7.2rem);font-weight:700;line-height:.9;animation:.46s cubic-bezier(.16,1.35,.3,1) both pop;display:inline-grid;box-shadow:0 0 0 6px #ffffff29,0 16px 36px #00000080}@keyframes pop{0%{opacity:0;transform:translateY(16px)scale(.45)}62%{opacity:1;transform:translateY(0)scale(1.12)}to{opacity:1;transform:translateY(0)scale(1)}}