:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0}body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}.app{color:#eef2ff;background:radial-gradient(circle at 50% 30%,#16203a 0%,#0b1020 70%);flex-direction:column;display:flex;position:fixed;inset:0;overflow:hidden}.topbar{padding:max(env(safe-area-inset-top), 12px) 18px 8px;justify-content:space-between;align-items:center;gap:12px;display:flex}.topbar h1{letter-spacing:.04em;background:linear-gradient(90deg,#7dd3fc,#c4b5fd);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:1.15rem;font-weight:700}.selectors{gap:10px;display:flex}.picker{text-transform:uppercase;letter-spacing:.08em;color:#93a1c7;flex-direction:column;align-items:flex-end;gap:3px;font-size:.62rem;display:flex}.picker select{color:#eef2ff;background:#1c2743;border:1px solid #33406b;border-radius:8px;padding:5px 8px;font-size:.8rem}.stage{flex:1;min-height:0;position:relative}.stage canvas{display:block;width:100%!important;height:100%!important}.result{pointer-events:none;opacity:0;flex-direction:column;align-items:center;transition:opacity .35s,transform .35s;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%,-8px)}.result.show{opacity:1;transform:translate(-50%)}.result-value{text-shadow:0 2px 18px #0000008c;font-size:4rem;font-weight:800;line-height:1}.result-label{letter-spacing:.12em;text-transform:uppercase;color:#93a1c7;margin-top:2px;font-size:.8rem}.controls{padding:12px 16px max(env(safe-area-inset-bottom), 16px);background:linear-gradient(#0000,#050812bf);flex-direction:column;gap:12px;display:flex}.dice-picker{scrollbar-width:none;justify-content:center;gap:8px;padding-bottom:4px;display:flex;overflow-x:auto}.dice-picker::-webkit-scrollbar{display:none}.die-chip{color:#cdd6f4;cursor:pointer;background:#141d33;border:1.5px solid #33406b;border-radius:12px;flex:none;min-width:52px;padding:9px 12px;font-size:.9rem;font-weight:700;transition:transform .12s,border-color .12s,background .12s}.die-chip:active{transform:scale(.94)}.die-chip.active{border-color:var(--chip);background:color-mix(in srgb, var(--chip) 22%, #141d33);box-shadow:0 0 0 1px var(--chip), 0 6px 18px -8px var(--chip);color:#fff}.roll-btn{letter-spacing:.03em;color:#0b1020;cursor:pointer;background:linear-gradient(90deg,#7dd3fc,#c4b5fd);border:none;border-radius:16px;width:100%;padding:16px;font-size:1.1rem;font-weight:800;transition:transform .12s,opacity .2s;box-shadow:0 10px 26px -10px #7dd3fcb3}.roll-btn:active{transform:scale(.98)}.roll-btn:disabled{opacity:.55;cursor:default}@media (width>=640px){.result-value{font-size:5rem}.controls{width:100%;max-width:520px;margin:0 auto}}