htm-confetti canvas{left:0;pointer-events:none;position:fixed;top:0}htm-spinner svg{animation:calc(var(--htm-duration, .25s) * 5) linear htm-spin infinite}htm-spinner p{display:none}@keyframes htm-spin{0%{stroke-dashoffset:502;stroke-dasharray:150.6 100.4}50%{stroke-dasharray:1 250}to{stroke-dashoffset:0;stroke-dasharray:150.6 100.4}}@media (prefers-reduced-motion: reduce){htm-spinner svg{display:none}htm-spinner p{display:block}}htm-toast{background-color:var(--htm-bg, white);border-color:var(--htm-border, black);border-radius:var(--htm-radius, .5rem);border-style:solid;border-width:1px;color:var(--htm-fg, black);max-width:min(calc(100vw - calc(var(--htm-spacing, 1.25rem) * 2)),20rem);padding:calc(var(--htm-spacing, 1.25rem) * .6) var(--htm-spacing, 1.25rem);position:fixed;transition-duration:var(--htm-duration, .25s);transition-property:bottom,left,right,top;transition-timing-function:cubic-bezier(.75,-.75,.25,1.5);width:max-content;z-index:10000}htm-toast.danger{background-color:var(--htm-bg-danger, #991b1b);border:none;color:#fff}htm-toast.info{background-color:var(--htm-bg-info, #1e40af);border:none;color:#fff}htm-toast.success{background-color:var(--htm-bg-success, #166534);border:none;color:#fff}htm-toast.bottom{bottom:-10rem}htm-toast.bottom.enter{bottom:1.25rem}htm-toast.center{left:50%;transform:translate(-50%)}htm-toast.center.bottom.exit{bottom:-10rem}htm-toast.center.top.exit{top:-10rem}htm-toast.left{left:1.25rem}htm-toast.left.exit{left:-20rem}htm-toast.right{right:1.25rem}htm-toast.right.exit{right:-20rem}htm-toast.top{top:-10rem}htm-toast.top.enter{top:1.25rem}@media (prefers-reduced-motion: reduce){htm-toast{transition-duration:0ms}}:root{--blue: #1d4ed8;--circle-a: #eab308;--circle-b: #3b82f6;--circle-c: #ef4444;--dark: #121212;--gray: #374151;--light: #fefefe;--red: #b91c1c;--slate: #334155;--bg-blue: #1d4ed8;--bg: var(--light);--fg: var(--dark);--htm-border: var(--slate);--h1: clamp(1.5rem, 6.25vmin, 2rem);--h2: clamp(1.375rem, 5vmin, 1.75rem);--h3: clamp(1.25rem, 4vmin, 1.5rem)}:root:has(body.dark){--blue: #60a5fa;--gray: #d1d5db;--red: #ef4444;--slate: #cbd5e1;--bg: var(--dark);--fg: var(--light)}*{border-color:var(--slate);border-width:1px;box-sizing:border-box}html{background-color:var(--bg);color:var(--fg)}html:has(dialog[open]){overflow:hidden}body{display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;justify-content:space-between;margin:0;min-height:100vh;text-align:center}body.dark{color-scheme:dark}header{align-items:center;display:flex;justify-content:space-between;padding:.75rem 1.25rem 1.25rem}.site-logo{color:var(--gray);display:flex;font-size:1.125rem;font-weight:700;gap:.25rem;text-decoration:inherit}header :last-child{align-items:center;display:flex;gap:1.25rem;margin-inline:auto 0}main{align-items:center;display:flex;flex-direction:column;padding-inline:1.25rem}footer{align-items:center;display:flex;flex-direction:column;gap:.75rem;justify-content:center;margin:auto auto 0;max-width:65ch;padding:5rem 1.25rem .75rem}footer div{display:inline-flex;gap:1.25rem}h1,h2,p{margin:0}h1,h2{letter-spacing:1px;text-wrap:balance}h2,h3{font-weight:inherit}h1{font-size:var(--h1)}h2{font-size:var(--h2);margin-block:.5rem 2rem}p{line-height:1.6;text-wrap:pretty}pre{font-family:inherit;text-align:center}small{font-size:75%}a,button{align-items:center;color:var(--blue);display:inline-flex;justify-content:center;min-height:2rem;min-width:2rem}button{border:none;background:inherit;cursor:pointer;font-size:inherit;padding:0}ol,ul{list-style:none;margin:0;padding:0}label{align-items:flex-start;display:flex;flex-direction:column;font-size:.875rem;width:min(100%,30rem)}input,select{background-color:var(--bg);border-radius:.5rem;color:inherit;font-size:1rem;max-width:65ch;min-height:2.5rem;padding:.5rem;width:100%}select{cursor:pointer}dialog{border-radius:1rem;border-style:solid;margin:20vh auto;padding:0;width:min(calc(100vw - 2.5rem),20rem)}dialog::backdrop{background-color:#000c}.btn{background-color:var(--bg-blue);border-radius:.5rem;color:var(--light);font-size:1.0675rem;font-weight:600;letter-spacing:.5px;padding:.75rem 1.5rem}.theme-toggle-container{display:flex;font-size:1.5rem;gap:1.25rem}.copyright{align-items:center;display:flex;gap:0 .25rem;flex-wrap:wrap;justify-content:center;width:100%}htm-toast{--htm-bg: var(--fg);--htm-fg: var(--bg);line-height:1.3}.bg-gradient{background:var(--circle-c);background:radial-gradient(circle,var(--circle-c) 0%,var(--circle-b) 50%,var(--circle-a) 100%);height:100vh;left:0;opacity:10%;pointer-events:none;position:fixed;top:0;width:100vw;z-index:-10}htm-spinner{margin:5rem auto}@media (prefers-contrast: more){.bg-gradient{display:none}}@media not all and (min-width: 400px){html{font-size:14px}body{text-align:left}h1,h2,p{width:100%}dialog{margin:1.25rem auto}}@media (min-width: 800px) and (min-height: 800px){html{font-size:18px}}body[data-route=home] .creator-text{color:var(--gray);font-size:.875rem}body[data-route=home] .game-controls{align-items:center;display:flex;flex-direction:column}body[data-route=home] .game-controls>p{font-size:.875rem;margin-block:.25rem;text-align:center}body[data-route=home] .draggables{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem;max-width:27rem}body[data-route=home] [draggable=true]{background-color:#fff;border-color:var(--dark);border-style:solid;cursor:grab;font-size:.875rem}body[data-route=home] .dropzone.dragover{background-color:#ffffffb3}body[data-route=home] .reset-button{color:var(--red);margin-block-start:.5rem}body[data-route=home] .guesses-text{margin-block:.5rem;text-align:center}body[data-route=home] .hints-container{align-items:center;display:flex;flex-direction:column;gap:.5rem;margin-block-start:1.25rem;max-width:65ch;text-align:center}body[data-route=home] .previous-game-container{display:flex;flex-direction:column;gap:.75rem;margin-block-start:3rem;max-width:30rem;width:100%}body[data-route=home] .previous-game-container p{color:var(--gray);font-size:.875rem}body[data-route=home] .game-summary{margin-block-start:3rem}body[data-route=home] .game-summary>div{margin:.5rem auto 0;width:fit-content}body[data-route=home] .home-button{margin:-1rem auto .5rem -.25rem}body[data-route=home] dialog{border-radius:1rem;border-style:solid;margin:20vh auto;padding:0;text-align:left;width:min(calc(100vw - 2.5rem),30rem)}body[data-route=home] dialog::backdrop{background-color:#000c}body[data-route=home] dialog,body[data-route=home] dialog>div{border-radius:1rem}body[data-route=home] dialog>div{padding:1.25rem}body[data-route=home] dialog h1{font-size:1.125rem;margin-block-end:.5rem}body[data-route=home] .dialog-cta-container{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;justify-content:flex-end;margin-block-start:.5rem}body[data-route=home] .dialog-cta-container>a{padding:.75rem}body[data-route=home] .red-text{color:var(--red)}body[data-route=home] main :not(:where(.circle-container *,.previous-game-container *)){animation:fadeIn .3s forwards}@keyframes fadeIn{0%{opacity:0}25%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){body[data-route=home] main :not(:where(.circle-container *,.previous-game-container *)){animation:none}}.circle-container{height:22.5rem;margin-block-start:1.25rem;position:relative;width:22.5rem}.circle{border-radius:100%;height:16rem;opacity:50%;position:absolute;width:16rem}.circle-a{background-color:var(--circle-a);left:0;top:0}.circle-b{background-color:var(--circle-b);right:0;top:0}.circle-c{background-color:var(--circle-c);bottom:0;left:3.25rem}.circle-title{background-color:var(--light);border-radius:1.5rem;border-style:solid;border-width:2px;color:var(--dark);font-size:.875rem;font-weight:700;line-height:1.2;padding:.5rem;position:absolute;text-align:center;width:10rem}.circle-title-a{border-color:var(--circle-a);left:0;top:-1.25rem}.circle-title-b{border-color:var(--circle-b);right:0;top:-1.25rem}.circle-title-c{border-color:var(--circle-c);bottom:-1.25rem;left:6.25rem}[draggable=true],.dropzone{align-items:center;border-radius:2rem;color:var(--dark);display:flex;height:4rem;justify-content:center;line-height:1;padding-inline:.5rem;text-align:center;width:6.5rem}.dropzone{position:absolute}.dropzone:not([draggable=true]){padding-inline:0}.dropzone:not([draggable=true]) span{align-items:center;background-color:var(--light);border-radius:1.25rem;border-style:solid;display:flex;font-size:.875rem;justify-content:center;line-height:1;min-height:2.625rem;min-width:5rem;padding:.375rem .5rem}.dropzone-a{left:.25rem;top:4.25rem}.dropzone-ab{left:8rem;top:2.5rem}.dropzone-abc{left:8rem;top:8rem}.dropzone-ac{left:2.5rem;top:11.5rem}.dropzone-b{right:.25rem;top:4.25rem}.dropzone-bc{right:2.5rem;top:11.5rem}.dropzone-c{bottom:2.5rem;left:8rem}body[data-route=learn] main>div{align-items:center;display:flex;flex-direction:column;gap:1rem;margin-block-start:1.25rem;max-width:65ch}body[data-route=learn] main>div p{text-align:left;width:min(calc(100vw - 2.5rem),100%)}body[data-route=learn] main>a{margin-block-start:1.25rem}body[data-route=learn] .circle-container{--learn-circle-duration: .5s;--learn-circle-a-delay: .25s;--learn-circle-b-delay: .5s;--learn-circle-c-delay: .75s;--learn-content-delay: calc( var(--learn-circle-c-delay) + var(--learn-circle-duration) );margin-block:1rem 2rem;text-align:center}body[data-route=learn] .circle{animation:slideIn var(--learn-circle-duration) forwards}body[data-route=learn] .circle-a{animation-delay:var(--learn-circle-a-delay);transform:translate(-100vw)}body[data-route=learn] .circle-b{animation-delay:var(--learn-circle-b-delay);transform:translate(100vw)}body[data-route=learn] .circle-c{animation-delay:var(--learn-circle-c-delay);transform:translateY(100vh)}body[data-route=learn] .circle-title,body[data-route=learn] .dropzone{animation:fadeIn .45s ease-out var(--learn-content-delay) forwards;opacity:0}@keyframes slideIn{to{transform:translate(0)}}@media (prefers-reduced-motion: reduce){body[data-route=learn] .circle,body[data-route=learn] .circle-title,body[data-route=learn] .dropzone{animation:none;opacity:1}body[data-route=learn] .circle-a,body[data-route=learn] .circle-b,body[data-route=learn] .circle-c{animation-delay:0ms;transform:none}}body[data-route=share] main{animation:fadeIn .5s forwards}body[data-route=share] .certificate-container{margin-block-start:2rem}body[data-route=share] .certificate-canvas-container{aspect-ratio:3 / 4;border-style:solid;height:auto;max-width:min(calc(100vw - 2.5rem),30rem);margin-block:1.25rem;width:100%}body[data-route=share] .certificate-canvas-container canvas{display:block;height:100%;object-fit:contain;width:100%}body[data-route=share].dark .certificate-canvas-container{border-style:none}body[data-route=share] .certificate-form{align-items:flex-end;display:flex;flex-wrap:nowrap;gap:.5rem;justify-content:center;max-width:30rem;width:100%}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){body[data-route=share] main{animation:none}}body[data-route=stats] h2{margin-block:0}body[data-route=stats] h3{font-size:var(--h3);margin-block:0 .5rem;text-align:center}body[data-route=stats] section{animation:fadeInUp .6s ease-out forwards;display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;margin-block-start:2rem;width:100%}body[data-route=stats] .stats-summary{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-width:20rem}body[data-route=stats] .stats-summary li{background-color:color-mix(in oklab,var(--gray) 20%,transparent);border-radius:1rem;display:flex;flex-direction:column;gap:.25rem;padding:.75rem .5rem;text-align:center;width:6.25rem}body[data-route=stats] .stats-summary li strong{font-size:1.25rem}body[data-route=stats] .distribution{display:flex;flex-direction:column;gap:.5rem;max-width:20rem;width:100%}@keyframes fadeInUp{0%{opacity:0}20%{opacity:0;transform:translateY(1.25rem)}to{opacity:1;transform:translateY(0)}}body[data-route=stats] .bar{align-items:center;display:flex;gap:.25rem}body[data-route=stats] .bar span{text-align:center;width:1.5rem}body[data-route=stats] .bar-fill{background:var(--bg-blue);border-radius:.25rem;color:var(--light);font-size:.875rem;min-width:1.5rem;padding:.25rem .5rem;text-align:right;transition:width 1s ease-out}@media (prefers-reduced-motion: reduce){body[data-route=stats] section{animation:none}body[data-route=stats] .bar-fill{transition:none}}