:root{--bg: #0d0d0f;--panel: #16161a;--bar: #3b3b3d;--bar-edge: #2b2b2d;--line: #2a2a31;--ink: #ece9e4;--muted: #a6a29b;--accent: #f5c451;--font-display: "Cormorant Garamond", "Orpheus Pro", Georgia, serif;--font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--key-top: #4a4a4a;--key-bottom: #3a3a3a;--key-side: #2b2b2b;--key-depth: 2.8px;--key-depth-down: .7px;--key-travel: 2.1px;--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--font-ui);-webkit-font-smoothing:antialiased;overflow:hidden}.app{display:flex;height:100%;position:relative}.sidebar{position:relative;flex:0 0 15.5rem;display:flex;flex-direction:column;gap:18px;padding:16px 14px 14px 16px;background:var(--bar);border-right:1px solid var(--bar-edge);overflow:hidden}.sidebar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url(./swirls-BPB8cNHc.png) repeat;background-size:280px 280px;opacity:.035;pointer-events:none}.sidebar>*{position:relative}.sidebar header h1{margin:0;line-height:0;color:var(--ink)}.sidebar header h1 a{display:block;width:72%;color:inherit;text-decoration:none}.sidebar header h1 a:hover{color:#fff}.logo{display:block;width:100%;height:auto}.sidebar header p{margin:8px 0 0;color:var(--muted);font-size:.8rem;line-height:1.45}.sidebar h2{margin:0 0 7px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.switcher{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:var(--key-depth)}.switcher button,.sidebar .reset{position:relative;top:0;display:flex;align-items:center;gap:6px;flex:1 1 auto;justify-content:center;border:0;border-radius:6px;padding:7px 10px;font:inherit;font-size:.78rem;line-height:1.2;color:#a9a9a9;cursor:pointer;background:var(--noise),linear-gradient(var(--key-top),var(--key-bottom));background-blend-mode:overlay;box-shadow:inset 0 1px #ffffff26,inset 0 -1px #0006,0 var(--key-depth) 0 var(--key-side),0 3.5px 2.8px #0009;text-shadow:1px 1px 1px #151515;transition:top .06s,box-shadow .06s,color .12s}.switcher button:hover,.sidebar .reset:hover{color:#c8c8c8}.switcher button:focus-visible,.sidebar .reset:focus-visible{outline:2px solid #7fb8ff;outline-offset:2px}.switcher button:active,.sidebar .reset:active,.switcher button.on{top:var(--key-travel);box-shadow:inset 0 1px #ffffff1a,inset 0 -1px #0006,0 var(--key-depth-down) 0 var(--key-side),0 1.4px 2.1px #0009}.switcher button.on{color:#e6e6e6}.led{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:radial-gradient(circle at 40% 35%,#555,#1e1e1e 70%);box-shadow:inset 0 1px 2px #000000e6,0 1px #ffffff26;transition:background .2s,box-shadow .2s}.switcher button.on .led{background:radial-gradient(circle at 40% 35%,#d8ffd0,#3ddc4a 45%,#137a1f 80%);box-shadow:inset 0 1px 2px #00000080,0 0 7px 1px #3ddc4a8c}.actions{display:flex;gap:6px;padding-bottom:var(--key-depth)}.sidebar .reset{flex:1 1 0;width:auto}.stage{position:relative;flex:1 1 auto;min-width:0}.map{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}.map:active{cursor:grabbing}.status{display:grid;place-items:center;height:100%;width:100%;color:var(--muted)}.detail{position:absolute;z-index:3;top:0;right:0;width:min(26rem,100%);height:100%;overflow:hidden;background:#0b0b0dd6;padding:18px 22px 20px;display:flex;flex-direction:column;gap:0}.detail>*:not(.herobox){flex:0 0 auto}.detail .close{position:absolute;top:10px;right:12px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#0a0a0cd1;color:var(--muted);font-size:1.15rem;line-height:1;width:30px;height:30px;padding:0;border-radius:50%;cursor:pointer}.detail .close:hover{color:var(--ink);border-color:var(--muted)}.herobox{flex:1 1 auto;min-height:5rem;display:flex;align-items:center;justify-content:center;margin-bottom:14px;overflow:hidden}.herobox a{display:contents}.herobox img{transition:opacity .15s}.herobox a:hover img{opacity:.88}.herobox img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}.detail h2{margin:0 0 3px;font-size:1.05rem;line-height:1.3}.detail .artist{margin:0 0 14px;color:var(--muted);font-size:.85rem}.detail h3{margin:16px 0 7px;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}dl{margin:0;display:grid;grid-template-columns:4.4rem 1fr;gap:6px 10px}dt{color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;padding-top:2px}dd{margin:0;font-size:.85rem}.muted{color:var(--muted)}.small{font-size:.74rem}.predicted{color:var(--accent);font-weight:600}.jump{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;border-bottom:1px dotted rgba(255,255,255,.35)}.jump:hover,.jump:focus-visible{border-bottom-color:var(--accent);color:var(--accent)}.withheld{color:var(--muted);font-style:italic}.conf{display:inline-flex;align-items:center;gap:3px;margin-left:8px}.conf em{font-style:normal;color:var(--muted);font-size:.72rem;margin-left:4px}.similar{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.similar button{position:relative;padding:0;border:1px solid var(--line);background:none;overflow:hidden;cursor:pointer;aspect-ratio:1}.similar .cell{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.similar button:hover{border-color:var(--accent)}.similar img{position:relative;width:100%;height:100%;object-fit:cover;display:block}.regions{top:16px;right:16px;width:13.5rem;max-height:calc(100% - 32px);display:flex;flex-direction:column;gap:6px;padding:10px 8px 8px 12px}.regions ul{list-style:none;margin:0;padding:0 4px 0 0;overflow-y:auto;min-height:0}.regions li+li{margin-top:1px}.regions ul button{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:8px;background:none;border:none;color:var(--ink);font:inherit;font-size:.9rem;text-align:left;padding:4px 6px;border-radius:6px;cursor:pointer}.regions ul button:hover{background:#ffffff12}.regions ul button em{font-style:normal;color:var(--muted);font-size:.8rem}.regions .reset{margin-top:2px;background:#ffffff0d;border:none;color:var(--muted);font:inherit;font-size:.84rem;padding:5px;border-radius:6px;cursor:pointer}.regions .reset:hover{color:var(--ink);background:#ffffff1a}.note-foot{margin:8px 0 0}@media(max-height:640px){.note-foot{display:none}.detail .similar{grid-template-columns:repeat(8,1fr)}}.compare{flex:0 0 auto}.compare .drop{width:100%;min-height:8rem;display:grid;place-items:center;padding:8px;border:0;border-radius:7px;background:var(--noise),#2c2c2e;background-blend-mode:overlay;box-shadow:inset 0 2px 6px #000c,inset 0 0 0 1px #0000008c,0 1px #ffffff14;outline:1px dashed rgba(255,255,255,.13);outline-offset:-7px;color:var(--muted);font:inherit;font-size:.76rem;text-align:center;cursor:pointer;transition:outline-color .15s,color .15s}.compare .drop:hover:not(:disabled){outline-color:#f5c45173;color:var(--ink)}.compare .drop:disabled{cursor:progress}.compare .drop img{max-width:100%;max-height:5.5rem;display:block}.compare .small{margin:6px 0 0}.about-link{margin-top:auto;align-self:flex-start;background:none;border:0;padding:2px 0;font:inherit;font-size:.75rem;color:var(--muted);cursor:pointer;border-bottom:1px dotted rgba(255,255,255,.25)}.about-link:hover{color:var(--accent);border-bottom-color:var(--accent)}.about-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#040406b8;display:flex;align-items:center;justify-content:center;padding:24px}.about{position:relative;width:min(34rem,100%);max-height:100%;overflow-y:auto;padding:26px 30px 28px;background:linear-gradient(#16161af6,#16161af6),url(./swirls-BPB8cNHc.png) repeat,var(--panel);background-size:auto,280px 280px,auto;border:1px solid var(--line);border-radius:4px}.about h2{margin:0 0 10px;font-family:var(--font-display);font-size:1.7rem;font-weight:600}.about h3{margin:20px 0 6px;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}.about p{margin:0 0 9px;font-size:.86rem;line-height:1.6}.about a{color:var(--accent)}.about .credits{margin-top:30px}.about .signoff{margin:10px 0 0}.about .close{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer}.about .close:hover{color:var(--ink)}@keyframes neon{0%{color:#ff1e56}33%{color:#39ff14}66%{color:#2d9bff}to{color:#ff1e56}}.neon span{display:inline-block;animation:neon 5.3s linear infinite;text-shadow:0 0 7px currentColor}@media(prefers-reduced-motion:reduce){.neon span{animation-duration:10.7s}}.working{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;background:#0606088c;cursor:progress}.working p{margin:0;padding:12px 20px;border-radius:7px;background:#0b0b0deb;border:1px solid var(--line);color:var(--ink);font-size:.86rem}@media(orientation:portrait)and (max-width:820px){.app{flex-direction:column}.sidebar{flex:0 0 auto;border-right:0;border-bottom:1px solid var(--bar-edge)}.sidebar header h1{display:flex;justify-content:center}.sidebar header h1 a{width:30%;min-width:96px}.sidebar header p{display:none}.sidebar h2{display:none}.detail{width:100%;height:100%;top:0;bottom:0;padding:14px 16px 16px}.detail .close{top:8px;right:10px}}@media(max-width:820px),(max-height:640px){.sidebar{gap:6px;padding:7px 12px 6px}.wink{display:none}.switcher{gap:5px;padding-bottom:var(--key-depth)}.switcher button{padding:6px 8px;font-size:.74rem}.actions{gap:5px}.sidebar .reset{padding:6px 8px;font-size:.74rem}.about-link{margin-top:0;font-size:.68rem}.compare .drop{display:flex;align-items:center;justify-content:center;width:100%;min-height:0;padding:6px 10px;border-radius:6px;outline:0;background:var(--noise),linear-gradient(var(--key-top),var(--key-bottom));background-blend-mode:overlay;box-shadow:inset 0 1px #ffffff26,inset 0 -1px #0006,0 var(--key-depth) 0 var(--key-side),0 3.5px 2.8px #0009;color:#d9d9d9;font-size:.74rem;text-shadow:1px 1px 1px #151515;margin-bottom:var(--key-depth)}.compare .drop span{display:none}.compare .drop:after{content:"Add a picture"}.compare .drop img{display:none}}@media(max-height:640px){.sidebar{flex-basis:12.5rem}.sidebar header h1 a{width:58%}}
