:root{color-scheme:light dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;--accent: #bd1757;--more-accent: light-dark( hsl(from var(--accent) h 77 52), hsl(from var(--accent) h 79 37) );--background: light-dark( hsl(from var(--accent) h 100 97), hsl(from var(--accent) h 11 5) );--container: light-dark( hsl(from var(--accent) h 42 88), hsl(from var(--accent) h 42 10) );--text: light-dark( hsl(from var(--accent) h 100 5), hsl(from var(--accent) h 100 96) );--less-dark-text: light-dark( hsl(from var(--accent) h 100 30), hsl(from var(--accent) h 100 75) );--lighter-text: light-dark( hsl(from var(--accent) h 19 66), hsl(from var(--accent) h 9 40) );--dialog-backdrop: light-dark(#00000066, #ffffff10);--on-accent: hsl(from var(--accent) h 100 98)}html,body{height:100%;touch-action:pan-x pan-y;margin:0}body{display:flex;flex-direction:column}main{flex:1;width:1200px;margin:0 auto;padding:0 1rem;box-sizing:border-box}@media(max-width:1200px){main{width:90%}}mdi-icon svg{display:block;width:1em;height:1em}body{background-color:var(--background)}p,h1,label,span{color:var(--text)}header{padding-top:max(10px,env(safe-area-inset-top))!important;display:flex;align-items:center;padding:10px 15px;background-color:var(--container);z-index:100;position:-webkit-sticky;position:sticky;top:0;z-index:1;backface-visibility:hidden;-webkit-backface-visibility:hidden}header span{font-size:1.6rem;font-weight:500;flex:1}button{all:unset;line-height:1;align-items:center;display:flex;justify-content:center;gap:6px;padding:10px 20px;background-color:var(--accent);color:var(--on-accent);border-radius:32px}button mdi-icon svg,button mdi-icon{width:24px!important;height:24px!important}button:hover{background-color:var(--more-accent)}button>*{flex:0 0 auto!important}button.transparent{background-color:transparent;color:var(--text)}button.transparent:hover{background-color:var(--dialog-backdrop)}div#countdowns{display:none;max-width:1200px;grid-template-rows:auto;grid-template-columns:1fr 1fr 1fr;gap:20px;padding-top:20px}@media(max-width:1200px){div#countdowns{grid-template-columns:1fr}}.countdown{display:flex;flex-direction:row;background-color:var(--color);padding:10px 15px;border-radius:12px;gap:20px}.countdown .p1{display:flex;flex-direction:column}.countdown .p1 .name{font-size:1.4rem;overflow-wrap:anywhere;word-break:break-all;font-weight:500}.countdown .p1 .remaining{font-size:1.2rem;font-weight:500;color:rgb(from var(--text) r g b / calc(alpha*.6))}.countdown .progress{margin-left:auto;width:80px;height:80px;border-radius:200px;flex-shrink:0;background:conic-gradient(var(--progress-bar-color) 0%,var(--progress-bar-color) var(--percentage),transparent var(--percentage),transparent 100%)}.countdown .progress .buffer{position:relative;background-color:var(--color);width:50px;height:50px;border-radius:200px;top:15px;left:15px;display:flex;align-items:center;justify-content:center;color:var(--progress-bar-color)}div#empty-state{display:none;height:100%;margin:auto;flex-direction:column;align-items:center;text-align:center;justify-content:center}div#empty-state h2{margin-top:0}dialog{background-color:var(--background);max-width:80vw;width:80vw;border-radius:16px;outline:none;border:0px solid black}dialog h1{display:flex;align-items:center;margin:0 0 15px;font-weight:500;font-size:1.75rem}dialog h1 button{margin-left:auto}dialog::backdrop{background-color:var(--dialog-backdrop)}@media(min-width:1024px){dialog{width:50vw;max-width:50vw}}div.field{display:flex;gap:12px;align-items:center}div.field input{flex:1}div.field label{min-width:100px}@media(max-width:1024px){div.field{align-items:start;gap:6px!important;flex-direction:column}div.field *{box-sizing:border-box;width:100%}}input,textarea{all:unset;background-color:var(--container);color:var(--text)!important;font-size:1rem;padding:9px 12px;border-radius:10px;border:1px solid var(--lighter-text)}:is(input,textarea)::placeholder{color:var(--lighter-text)}:is(input,textarea):focus{border:2px solid var(--less-dark-text);padding:8px 11px}input[type=color]{all:revert;border-radius:10px;width:100%;border:1px solid var(--lighter-text);background-color:var(--container)}form{display:flex;flex-direction:column;gap:12px}form #submit-container{display:flex;justify-content:flex-end}
