:root{font-family:system-ui,sans-serif;color:#f5f7fb;background:#20242d;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;background:#20242d}button{font:inherit;user-select:none;-webkit-user-select:none}main{display:flex;flex-direction:column;width:min(100% - 32px,760px);height:100dvh;margin:auto;padding:clamp(12px,3vh,32px) 0}header{flex:none;margin-bottom:clamp(10px,2vh,18px);text-align:center}h1{margin:0;font-size:clamp(2rem,7vh,3.5rem);line-height:1.05}h2{margin:0;font-size:1rem}.results,.controls{background:#2b303c;border:1px solid #ffffff12}.results{position:relative;display:flex;flex:1 1 0;flex-direction:column;min-height:0;padding:clamp(14px,2.5vh,22px) 24px;border-radius:24px 24px 0 0}.results>*:not(.dice-canvas){position:relative;z-index:2}.dice-canvas{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 7px 0 #0005)}.results-heading{display:flex;flex:none;align-items:center;justify-content:space-between;gap:16px}.total{display:flex;align-items:baseline;gap:10px;color:#c8cdd7}.total output{color:#fff;font-size:clamp(2rem,6vh,2.5rem);font-weight:700}#dice-pool{flex:1 1 0;min-height:0;margin:8px 0 0;padding:0;overflow:hidden;gap:clamp(8px,2vh,22px);list-style:none}#dice-pool.individual{display:grid;grid-template-columns:repeat(var(--columns, 1),var(--die-size, 104px));grid-auto-rows:var(--die-size, 104px);place-content:center}.die{--die: #ff6534;display:grid;place-items:center;width:var(--die-size);height:var(--die-size);background:var(--die);filter:drop-shadow(0 7px 0 color-mix(in srgb,var(--die),#000 32%));clip-path:polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%)}.three-dice #dice-pool.individual .die{background:transparent;filter:none;clip-path:none}.three-dice .die strong{position:relative;z-index:2;text-shadow:0 1px 2px #0008}.three-dice .die.rolling{animation:none}.three-dice .die.rolling strong{visibility:hidden}.die strong{font-size:clamp(1.5rem,5vh,2.5rem)}.die.d4{--die: #14863f;clip-path:polygon(50% 4%,96% 92%,4% 92%)}.die.d6{--die: #087f91;clip-path:none}.die.d8{--die: #8037df;clip-path:polygon(50% 0,95% 50%,50% 100%,5% 50%)}.die.d10{--die: #c51e78;clip-path:polygon(50% 0,96% 42%,82% 87%,50% 100%,18% 87%,4% 42%)}.die.d12{--die: #d32920}.die.d20{--die: #c94f00}.rolling{animation:roll 1.2s cubic-bezier(.2,.75,.25,1);animation-delay:var(--roll-delay, 0ms);will-change:transform}#dice-pool.grouped{display:flex;flex-direction:column;justify-content:center;gap:clamp(3px,.8vh,7px)}.dice-group{display:grid;grid-template-columns:minmax(68px,auto) 1fr auto;align-items:center;gap:8px;padding:clamp(4px,.8vh,8px) 10px;border-radius:10px;background:#222733}.dice-group>strong,.dice-group>b{white-space:nowrap}.dice-group>b{color:#c8cdd7}.distribution{display:flex;flex-wrap:wrap;gap:3px 8px}.distribution span{min-width:31px;font-size:clamp(.72rem,1.7vh,.85rem);white-space:nowrap}.rolling-count{animation:rolling-count 1.2s ease-out;color:#aac6ff}#empty-state{position:absolute;top:54px;right:16px;bottom:0;left:16px;display:grid;place-items:center;margin:0;color:#aeb5c2;text-align:center}#probability{flex:none;padding-top:clamp(7px,1.3vh,12px);border-top:1px solid #ffffff14}.probability-summary{display:flex;align-items:start;justify-content:space-between;gap:12px}.probability-summary h2{font-size:clamp(.8rem,1.8vh,1rem)}#probability-chance{flex:none;color:#9fc1ff;font-size:clamp(1.15rem,3.2vh,1.55rem);font-weight:800;line-height:1}#probability-detail,#probability-outcome,.chart-hint{margin:0;color:#aeb5c2;font-size:clamp(.62rem,1.45vh,.76rem);line-height:1.25}#probability-detail{margin-top:2px}#probability-chart{position:relative;height:clamp(50px,9vh,76px);margin-top:5px;border-bottom:1px solid #6d7483;cursor:crosshair;touch-action:none}#probability-chart:focus-visible{border-radius:3px;outline:2px solid #9fc1ff;outline-offset:2px}#probability-chart svg{display:block;width:100%;height:100%}.chart-bars.base{fill:#555d6d}.neutral .chart-bars.base{fill:#727b8d}.neutral .chart-bars.success{display:none}.chart-bars.success{fill:#62bd86}.target-marker,.result-marker{vector-effect:non-scaling-stroke}.target-marker{stroke:#f5f7fb;stroke-width:1.5;stroke-dasharray:4 3}.result-marker{stroke:#ffd166;stroke-width:3}#chart-scan{position:absolute;z-index:3;top:-31px;min-width:72px;padding:5px 8px;border:1px solid #ffffff30;border-radius:8px;background:#151a24;box-shadow:0 4px 14px #0008;color:#fff;font-size:.72rem;font-weight:800;text-align:center;transform:translate(-50%);pointer-events:none}.chart-range{display:flex;justify-content:space-between;margin-top:2px;color:#8f97a6;font-size:.58rem}#probability-outcome{margin-top:2px;color:#f5f7fb;font-weight:700}.chart-hint{margin-top:1px}[hidden]{display:none!important}.controls{flex:none;padding:clamp(12px,2vh,18px) 24px clamp(14px,2.5vh,22px);border-top:0;border-radius:0 0 24px 24px}.controls-heading,.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.text-button,.close-button{border:0;background:transparent;color:#aac6ff;cursor:pointer}.text-button{padding:4px;font-weight:700}#dice-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:10px}.die-button{position:relative;--die: #ff6534;min-width:0;height:clamp(44px,7vh,54px);border:0;border-radius:12px;background:var(--die);color:#fff;cursor:pointer;transition:transform .15s,filter .15s}.die-count{position:absolute;top:-7px;right:-5px;min-width:22px;padding:2px 5px;border:2px solid #2b303c;border-radius:100px;background:#f5f7fb;color:#20242d;font-size:.7rem;font-weight:700}.die-button:not(:disabled):hover{filter:brightness(1.12);transform:translateY(-2px)}.die-button:not(:disabled):active{transform:translateY(1px)}.die-button strong{font-size:1.25rem}.die-button.d4{--die: #14863f}.die-button.d6{--die: #087f91}.die-button.d8{--die: #8037df}.die-button.d10{--die: #c51e78}.die-button.d12{--die: #d32920}.die-button.d20{--die: #c94f00}.actions{display:flex;justify-content:center;gap:12px;margin-top:clamp(10px,2vh,16px)}.actions button{min-width:130px;padding:11px 28px;border:0;border-radius:100px;background:#3a404d;color:#fff;font-weight:700;cursor:pointer}.actions .primary{background:#9fc1ff;color:#15213b}.die-button:disabled,.text-button:disabled,.actions button:disabled{opacity:.42;cursor:not-allowed}dialog{width:min(100% - 32px,440px);padding:0;border:1px solid #ffffff20;border-radius:20px;background:#2b303c;color:#f5f7fb;box-shadow:0 24px 80px #000a}dialog::backdrop{background:#0b0d12c7}#bulk-form{display:grid;gap:14px;padding:22px}.close-button{width:36px;height:36px;color:#f5f7fb;font-size:1.8rem}.bulk-dice{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px;margin:0;padding:0;border:0}.bulk-dice legend{grid-column:1 / -1;margin-bottom:2px;padding:0;font-weight:700}.bulk-die-row{display:grid;justify-content:center;gap:4px}.bulk-die-row>label{font-size:.85rem;font-weight:700}.quantity-control{display:grid;grid-template-columns:30px 48px 30px;overflow:hidden;border:1px solid #ffffff30;border-radius:9px;background:#20242d}.quantity-control button,.quantity-control input{height:34px;padding:0;border:0;background:transparent;color:#fff;font:inherit}.quantity-control button{color:#aac6ff;font-size:1.2rem;cursor:pointer}.quantity-control button:hover{background:#ffffff0d}.quantity-control input{width:48px;border-right:1px solid #ffffff20;border-left:1px solid #ffffff20;text-align:center;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.quantity-control input::-webkit-inner-spin-button,.quantity-control input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.error{margin:-4px 0 0;color:#ffaaa3;font-size:.85rem}.dialog-submit{justify-self:end;padding:11px 20px;border:0;border-radius:100px;font-weight:700}.dialog-submit.primary{background:#9fc1ff;color:#15213b}@keyframes roll{0%{transform:translateY(10px) scale(.82) rotate(-16deg)}18%{transform:translate(-8px,-12px) scale(.94) rotate(30deg)}38%{transform:translate(9px,-3px) scale(1.02) rotate(-24deg)}58%{transform:translate(-6px,7px) rotate(17deg)}76%{transform:translate(4px,-3px) scale(1.04) rotate(-8deg)}90%{transform:translateY(2px) rotate(3deg)}to{transform:none}}@keyframes rolling-count{0%,to{opacity:.55}50%{opacity:1}}@media(max-width:560px){main{width:100%;padding:0}header{margin:0;padding:clamp(10px,2.5vh,24px) 16px clamp(8px,2vh,18px)}.results,.controls{padding-right:16px;padding-left:16px;border-radius:0}#dice-buttons{gap:6px}.actions button{min-width:112px}#dice-pool.grouped{gap:3px}.dice-group{grid-template-columns:56px 1fr 44px;gap:4px;padding:2px 5px}.dice-group>strong,.dice-group>b{font-size:.7rem}.distribution{gap:0 4px}.distribution span{min-width:25px;font-size:.64rem;line-height:1.2}#probability{padding-top:6px}#probability-chart{margin-top:3px}}@media(max-width:560px)and (max-height:620px){#probability-detail{display:none}#probability-chart{height:36px}#probability-outcome,.chart-hint{font-size:.56rem}.dice-group{grid-template-columns:52px 1fr 38px;gap:2px;padding:1px 3px}.dice-group>strong,.dice-group>b{font-size:.58rem}.distribution{gap:0 2px}.distribution span{min-width:23px;font-size:.5rem;line-height:1.1}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}