:root{--ocean: #0b1d2a;--ocean-raised: #12293a;--ice: #eaf4f8;--ice-dim: #9fb8c4;--shelf: #cfe6f0;--hit: #7fd4a0;--land: #e0a96d;--other-ice: #9fc4d6;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,sans-serif}body{margin:0;min-height:100vh;background:var(--ocean);color:var(--ice);display:flex;justify-content:center}#app{width:min(34rem,100% - 2rem);padding:1.5rem 0 3rem}header{text-align:center}h1{margin:0}.wordmark{color:var(--shelf);font-size:2.25rem;letter-spacing:.08em;line-height:1}.wordmark svg{height:5rem;width:auto;max-width:100%}.tagline{margin:.25rem 0 1.5rem;color:var(--ice-dim);font-size:.95rem}.shelf{margin:0 0 1.25rem;aspect-ratio:1 / 1;display:grid;place-items:center;border:1px solid #24435a;border-radius:.75rem;background:var(--ocean-raised);position:relative;overflow:hidden}.shelf svg{width:100%;height:100%;fill:var(--shelf)}.surroundings path{stroke:none}#context-land{fill:var(--land);opacity:.26}#context-ice{fill:var(--other-ice);opacity:.18}.context-key{margin:-.75rem 0 1.25rem;display:flex;gap:1.25rem;justify-content:center;font-size:.8rem;color:var(--ice-dim)}.context-key[hidden]{display:none}.context-key span:before{content:"";display:inline-block;width:.75rem;height:.75rem;border-radius:.2rem;margin-right:.4rem;vertical-align:-.1em;background:var(--swatch);border:1px solid #24435a}.key-land{--swatch: color-mix(in srgb, var(--land) 26%, var(--ocean-raised))}.key-ice{--swatch: color-mix(in srgb, var(--other-ice) 18%, var(--ocean-raised))}.key-ice[hidden]{display:none}.key-ocean{--swatch: var(--ocean-raised)}.shelf figcaption{position:absolute;bottom:.6rem;font-size:1.1rem;font-weight:600;color:var(--ice);padding:.2rem .8rem;border-radius:999px;background:#12293aeb;border:1px solid #24435a}.shelf figcaption:empty{display:none}#guess-form{position:relative}#guess-input{width:100%;box-sizing:border-box;padding:.7rem .9rem;font:inherit;color:var(--ice);background:var(--ocean-raised);border:1px solid #24435a;border-radius:.5rem}#guess-input:focus{outline:2px solid var(--shelf);outline-offset:1px}#guess-input:disabled{opacity:.5}#suggestions{list-style:none;margin:.3rem 0 0;padding:0;position:absolute;z-index:1;width:100%;background:var(--ocean-raised);border-radius:.5rem;overflow:hidden;box-shadow:0 .5rem 1.5rem #0006}#suggestions:empty{display:none}#suggestions button{display:block;width:100%;text-align:left;padding:.55rem .9rem;font:inherit;color:var(--ice);background:none;border:0;cursor:pointer}#suggestions button:hover,#suggestions button:focus{background:#1d3d52}.remaining,.status{color:var(--ice-dim);font-size:.9rem;margin:.75rem 0 0;text-align:center}.status{color:var(--ice);font-size:1.05rem;font-weight:600}.guesses{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.35rem}.guess{display:grid;grid-template-columns:1fr 5.5rem 2rem 3.5rem;align-items:center;gap:.5rem;padding:.55rem .75rem;background:var(--ocean-raised);border-radius:.5rem}.guess.correct{background:#14453099;color:var(--hit)}.guess-distance,.guess-proximity{font-variant-numeric:tabular-nums;text-align:right;color:var(--ice-dim)}.guess.correct .guess-distance,.guess.correct .guess-proximity{color:var(--hit)}.guess-arrow{text-align:center}footer{margin-top:2.5rem;color:#6d8593;font-size:.75rem;text-align:center;line-height:1.5}footer a{color:#86a3b2}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.share-row{margin:.85rem 0 0;text-align:center}#share{font:inherit;font-weight:600;color:var(--ocean);background:var(--shelf);border:0;border-radius:.5rem;padding:.55rem 1.4rem;cursor:pointer}#share:hover{background:var(--ice)}#share:focus-visible{outline:2px solid var(--ice);outline-offset:2px}#about-open{font:inherit;font-size:.75rem;color:#86a3b2;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}#about{width:min(34rem,100% - 2rem);max-height:80vh;overflow-y:auto;padding:1.5rem;color:var(--ice);background:var(--ocean-raised);border:1px solid #24435a;border-radius:.75rem}#about::backdrop{background:#04101acc}#about h2{margin-top:0}#about h3{margin-bottom:.5rem;font-size:.95rem;color:var(--ice-dim)}#about p{line-height:1.55;font-size:.9rem}#about a{color:var(--shelf)}.sources{list-style:none;margin:0;padding:0;display:grid;gap:1rem}.sources li{border-left:2px solid #24435a;padding-left:.9rem}.source-role{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ice-dim)}.source-citation,.source-doi{margin:.35rem 0 0;font-size:.8rem;color:var(--ice-dim)}.derived-note{margin:0 0 1.25rem;padding-bottom:1rem;border-bottom:1px solid #24435a;font-size:.78rem;color:var(--ice-dim)}#about-close{margin-top:1.25rem;font:inherit;font-weight:600;color:var(--ocean);background:var(--shelf);border:0;border-radius:.5rem;padding:.5rem 1.2rem;cursor:pointer}.modes{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;margin-bottom:.85rem;flex-wrap:wrap}.mode-buttons{display:flex;gap:.35rem}.mode-buttons button{font:inherit;font-size:.85rem;color:var(--ice-dim);background:var(--ocean-raised);border:1px solid #24435a;border-radius:.4rem;padding:.35rem .8rem;cursor:pointer}.mode-buttons button.selected{color:var(--ocean);background:var(--shelf);border-color:var(--shelf);font-weight:600}.level-buttons{display:flex;gap:.35rem;flex-wrap:wrap}.level-buttons button{font:inherit;font-size:.85rem;color:var(--ice-dim);background:var(--ocean-raised);border:1px solid #24435a;border-radius:.4rem;padding:.35rem .7rem;cursor:pointer}.level-buttons button.selected{color:var(--ocean);background:var(--shelf);border-color:var(--shelf);font-weight:600}.level-buttons button:disabled{opacity:.4;cursor:not-allowed}.choices{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem}.choices:empty{display:none}.choices button{width:100%;font:inherit;color:var(--ice);background:var(--ocean-raised);border:1px solid #24435a;border-radius:.5rem;padding:.7rem .6rem;cursor:pointer}.choices button:hover:not(:disabled),.choices button:focus-visible:not(:disabled){background:#1d3d52}.choices button.spent{text-decoration:line-through;opacity:.5;cursor:default}.choices button.answer{color:var(--ocean);background:var(--shelf);border-color:var(--shelf);opacity:1;font-weight:600;text-decoration:none}.choices button:disabled{cursor:default}@media(max-width:24rem){.modes{flex-direction:column;align-items:stretch;gap:.5rem}}body.halloween{background:radial-gradient(90% 55% at 82% 0%,#17293b,#0b1d2a 65%) var(--ocean);background-attachment:fixed}body.halloween #app{position:relative;z-index:1}#sky{--moon-size: clamp(6rem, 13vw, 9.5rem);position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0}.moon{position:absolute;top:2.5rem;right:max(-1.5rem,calc(50vw - 18rem - var(--moon-size)));width:var(--moon-size);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 30%,#cbbc9440 0 13%,transparent 14%),radial-gradient(circle at 58% 52%,#cbbc9436 0 17%,transparent 18%),radial-gradient(circle at 42% 68%,#cbbc942e 0 10%,transparent 11%),radial-gradient(circle at 62% 36%,#fffcf1,#f4ead0 52%,#dccfa8);box-shadow:0 0 3rem .5rem #f6ebc426,0 0 9rem 3rem #f6ebc412}.cloud{position:absolute;left:0;width:22rem;height:8.5rem;background:radial-gradient(5.5rem 3rem at 22% 64%,#26445f 0 80%,transparent 100%),radial-gradient(7rem 4rem at 45% 43%,#2e4e6c 0 80%,transparent 100%),radial-gradient(5.5rem 3.2rem at 66% 58%,#26445f 0 80%,transparent 100%),radial-gradient(4rem 2.2rem at 85% 70%,#203950 0 80%,transparent 100%),radial-gradient(9rem 2rem at 50% 74%,#24405a 0 82%,transparent 100%);filter:blur(.35rem);animation:drift linear infinite}@keyframes drift{0%{transform:translate(105vw)}to{transform:translate(-23rem)}}.cloud-1{top:4.5rem;opacity:.8;animation-duration:95s;animation-delay:-22s}.cloud-2{top:14rem;scale:.8;opacity:.45;animation-duration:145s;animation-delay:-95s}.cloud-3{top:40vh;scale:1.3;opacity:.3;animation-duration:210s;animation-delay:-40s}@media(prefers-reduced-motion:reduce){.cloud{animation:none}.cloud-1{left:auto;right:-6rem}.cloud-2{transform:translate(8vw)}.cloud-3{transform:translate(46vw)}}body.halloween .shelf svg{filter:drop-shadow(0 0 .6rem #cfe6f05c)}body.halloween .shelf{background:#12293ae0}
