:root{--primary-lighter:#ffe29d;--primary-light:#ffc53d;--primary:#da9900;--primary-dark:#996b00;--primary-darker:#3d2b00;--secondary-lighter:#b487d3;--secondary-light:#7c32ae;--secondary:#5a0892;--secondary-dark:#3f0467;--secondary-darker:#190029;--tertiary-lighter:#83d4b3;--tertiary-light:#2ab17a;--tertiary:#009459;--tertiary-dark:#00683e;--tertiary-darker:#002a19;--complement-lighter:#8d9bd4;--complement-light:#3a52b1;--complement:#112a94;--complement-dark:#081b68;--complement-darker:#010929;--standout-color:var(--tertiary);--standout-font-color:var(--complement-darker);--standout-alt-color:var(--secondary);--font-color:var(--complement-darker);--font-emph-color:var(--secondary-darker);--background-color:var(--primary-lighter);--background-special-color:hsl(from var(--background-color) h s 90%);--font-alt-color:var(--primary-light);--background-alt-color:var(--primary-light);--link-color:var(--complement-light);--border-color:var(--complement-light);--shadow-color:hsl(from var(--complement-darker) h s l / 0.2);--border-standout-color:var(--tertiary-dark);--surface-color:#ffffff;--border-soft-color:hsl(from var(--border-color) h 5% 90%);--invalid-color:#ff0000;@media (prefers-color-scheme:dark){--font-color:var(--primary-lighter);--font-emph-color:var(--secondary-lighter);--background-color:var(--complement-darker);--background-special-color:hsl(from var(--background-color) h s 10%);--background-alt-color:var(--primary-dark);--link-color:var(--complement-lighter);--shadow-color:hsl(from var(--complement-darker) h s 5% / 1);--border-standout-color:var(--tertiary);--surface-color:#1a1a2a;--border-soft-color:hsl(from var(--border-color) h 15% 40%);}scrollbar-gutter:stable;}*{box-sizing:border-box;margin:0;padding:0;transition:all 0.2s;}body{padding:1rem;background-color:var(--background-color);color:var(--font-color);line-height:1.6;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;@media (max-width:480px){padding:0.5rem;}}[title]{text-decoration:underline dotted 1px currentcolor;cursor:help;}:focus-visible{outline:0.25rem solid var(--border-color);}h1{margin-block-end:0.5rem;color:var(--standout-color);}h2{margin-block-end:0.5rem;color:var(--standout-color);font-size:1.25rem;}a{border-radius:0.5lh;text-decoration:none;font-weight:bold;&:link,    &:visited{color:var(--link-color);}&:hover{text-decoration:underline;}}button{border:none;line-height:1.6;cursor:pointer;}.surface{border-radius:1rem;padding:1.5rem;box-shadow:0 0.25rem 1rem var(--shadow-color);background-color:var(--surface-color);@media (max-width:480px){padding:1rem;}}.standout-button, .mini-button{border-radius:0.5rem;padding-block:0.75rem;padding-inline:1rem;background:var(--standout-color);color:var(--standout-font-color);font-weight:bold;&:hover, &:focus-visible{background:var(--standout-alt-color);color:var(--font-alt-color);}&:active{background:hsl(from var(--standout-alt-color) h s 60%);}}.mini-button{padding-block:0.1rem;padding-inline:0.5rem;}.loader{top:0;left:0;block-size:100%;inline-size:100%;border:none;align-items:center;justify-content:center;background:var(--background-color);&:popover-open{display:flex;}.loader-spinner{block-size:10rem;inline-size:10rem;border-left:0.2rem solid var(--border-standout-color);border-top:0.2rem solid var(--border-standout-color);border-radius:50%;animation:loader-spin 1s linear infinite;}}@keyframes loader-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}.container{max-inline-size:1200px;margin-inline:auto;display:grid;gap:2rem;grid-template-areas:"header header"        "dice-selection roll-results"        "dice-selection distribution-results"        "footer footer";grid-template-columns:1fr 2fr;grid-template-rows:auto auto 1fr;@media (max-width:768px){grid-template-areas:"header"            "dice-selection"            "roll-results"            "distribution-results"            "footer";grid-template-columns:1fr;grid-template-rows:none;}@media (max-width:480px){gap:1.5rem;}}header{grid-area:header;text-align:center;position:relative;#install-button-container{position:absolute;top:1rem;right:1rem;@media (max-width:600px){margin-block-start:0.5rem;position:initial;display:flex;justify-content:flex-end;}}}footer{grid-area:footer;text-align:center;font-size:small;}.dice-selection{block-size:min-content;grid-area:dice-selection;&> div{margin-block-end:2rem;&:last-child{margin-block-end:0;}}.dice-buttons{.dice-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill, minmax(3.2lh, 1fr));}.dice-button{border:0.15rem solid var(--border-color);border-radius:1rem;padding:0.8rem;display:flex;gap:0.5rem;flex-direction:column;align-items:center;justify-content:center;background:var(--background-color);font-size:1rem;&:hover, &:focus-visible{background:var(--standout-color);box-shadow:0 0.5rem 1rem var(--shadow-color);transform:translateY(-0.25rem);}&:active{background:hsl(from var(--standout-color) h s 60%);box-shadow:none;transform:translateY(0);}svg{block-size:2lh;inline-size:2lh;*{stroke-width:4px;stroke:var(--primary-dark);}polygon, ellipse{fill:var(--primary-light);}polyline{fill:none;}text{font-size:30px;text-anchor:middle;}}span{color:var(--font-color);font-weight:bold;}}}.custom-dice{h2{margin-block-end:1rem;color:var(--standout-color);font-size:1.25rem;}.input-group{display:flex;input{@media (max-width:768px){width:100%;}border:0.15rem solid var(--border-color);border-inline-end:none;border-start-start-radius:0.5rem;border-end-start-radius:0.5rem;padding:0.75rem;flex:1;background:var(--surface-color);color:var(--font-color);font-size:1rem;&:invalid{border-color:var(--invalid-color);&+button{border-color:var(--invalid-color);}}}button{border-radius:0;border-start-end-radius:0.5rem;border-end-end-radius:0.5rem;}}}.selected-dice{.dice-list{min-block-size:3rem;display:flex;flex-wrap:wrap;gap:0.5rem;&:empty::before{inline-size:100%;display:block;content:"None yet";}.dice-chip{border-radius:2rem;padding-block:0.5rem;padding-inline:1rem;display:flex;gap:0.5rem;align-items:center;background:var(--standout-alt-color);color:var(--font-alt-color);font-weight:bold;.remove-button{block-size:2rem;inline-size:2rem;margin-inline-end:-0.5rem;border-radius:50%;padding:0;align-items:center;background:var(--background-color);color:var(--font-color);font-weight:bold;font-size:1.2rem;&:hover, &:focus-visible{background:var(--standout-color);color:var(--standout-alt-color);}&:active{background:hsl(from var(--standout-color) h s 60%);color:var(--standout-alt-color);}}}}}}.results{display:flex;flex-direction:column;gap:2rem;}.roll-results{block-size:min-content;grid-area:roll-results;.roll-output{min-block-size:calc(3rem + 1lh);margin-block-end:1rem;border-radius:0.5rem;padding:1rem;display:flex;gap:0.5rem;align-items:center;justify-content:center;flex-wrap:wrap;background:var(--background-special-color);color:var(--font-color);text-align:center;font-size:2rem;font-weight:bold;&:empty::before{inline-size:100%;display:block;font-size:1.5rem;content:"No dice";}.die-roll-container{min-inline-size:calc(2rem + 2ch);padding:0;display:flex;gap:0;flex-direction:column;font-size:1.5rem;.die-description{border-block-end:0.1rem solid var(--background-special-color);padding-inline:0.25rem;font-size:0.5em;}.die-roll{padding-block-end:0.25rem;padding-inline:1rem;display:block;}&:hover, &:focus-visible{box-shadow:0 0.5rem 1rem var(--shadow-color);transform:translateY(-0.25rem);}&:active{box-shadow:none;transform:translateY(0);.die-description{border-bottom-color:hsl(from var(--standout-alt-color) h s 60%);}}}.roll-total{min-inline-size:calc(2rem + 2ch);margin-inline-start:1rem;border-radius:calc(1.2rem + 1lh) / calc(1rem + 1lh);padding-block:0.5rem;padding-inline:1rem;background:var(--standout-alt-color);color:var(--font-alt-color);text-align:center;font-size:2rem;@media (prefers-reduced-motion:no-preference){&.just-rolled{transform:scale(1.05) rotate(5deg);}}}}.reroll-button{inline-size:100%;display:block;font-size:1.2rem;}}.distribution-results{block-size:min-content;grid-area:distribution-results;#empty-results-table{display:none;}&:has(tbody:empty){thead{display:none;}#empty-results-table{display:initial;}}table{inline-size:100%;margin-top:1rem;border-collapse:collapse;}th,    td{padding-inline:0.25rem;text-align:left;&:first-of-type{padding-inline-start:0.5rem;}&:last-of-type{padding-inline-end:0.5rem;}}th{padding-block:0.25rem;background-color:var(--standout-alt-color);color:var(--font-alt-color);font-weight:bold;}tbody{tr{border-block-end:0.1rem solid var(--border-soft-color);padding-block:0.1rem;&:hover{background-color:var(--background-special-color);.probability-bar{background-color:var(--primary);@media (prefers-color-scheme:dark){background-color:var(--primary-light);}}}&:last-of-type{border-block-end:none;}}}.probability-bar-container{inline-size:100%;block-size:0.8lh;border-radius:0.25rem;background:var(--border-soft-color);.probability-bar{block-size:100%;inline-size:attr(data-ratio type(<percentage>), 0%);border-radius:0.25rem;background-color:var(--primary-light);@media (prefers-color-scheme:dark){background-color:var(--primary);}}}}