:root{color-scheme:dark;--bg:#10191b;--mint:#b7efd4;--text:#edf3ef;--muted:#a4b8af;--border:#30473e;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}*{box-sizing:border-box}body{margin:0;background:#080f11;color:var(--text);min-width:280px}main{width:100%;max-width:1040px;min-height:100dvh;margin:auto;padding:24px;background:var(--bg)}header{display:flex;align-items:center;justify-content:space-between;gap:16px}.logo{font-size:29px;font-weight:650;letter-spacing:-1px;color:var(--text);text-decoration:none}.tag,.eyebrow,.field-label,.section-label{font-size:10px;letter-spacing:2px;color:var(--muted)}.art{height:240px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px solid #2b3e3b;width:226px;height:226px;border-radius:50%}.orbit.inner{width:148px;height:148px}.star{font-size:90px;color:var(--mint);filter:drop-shadow(0 0 28px #80ffc32a)}.dot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--mint);left:calc(50% - 80px);top:29px;box-shadow:0 0 25px #b7efd43a}.dot.peach{background:#e3ad8a;left:calc(50% + 70px);top:auto;bottom:39px}.eyebrow{color:var(--mint);margin:18px 0}h1{font-size:clamp(32px,5vw,46px);line-height:1.12;letter-spacing:-1.5px;font-weight:550;margin:16px 0}p{font-size:15px;color:var(--muted);line-height:1.7;margin:0 0 24px}.field-label,.section-label{display:block;margin:28px 0 12px}input{width:100%;font:inherit;font-size:17px;padding:19px 16px;border:1px solid #3a4c47;border-radius:13px;color:var(--text);background:#182326;outline:none}input:focus{border-color:var(--mint)}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:4px}button:disabled{cursor:wait}.primary{width:100%;border:0;border-radius:13px;min-height:58px;padding:18px;background:var(--mint);color:#17382c;font-weight:650;margin-top:12px}.primary:disabled{opacity:.45}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{background:transparent;border:1px solid #344943;border-radius:30px;color:#c4d5cf;padding:12px 15px;min-height:44px;font-size:12px}.chip:hover,.node:hover,.row:hover{background:#2a4438}.note{font-size:12px;color:#91a99d;line-height:1.7;margin-top:24px}.back{border:0;background:none;min-height:44px;padding:8px 0;color:var(--mint);font-size:13px;margin:24px 0 6px}.map{position:relative;aspect-ratio:1/1;isolation:isolate;max-width:520px;width:100%;margin:0 auto}.ring{position:absolute;border:1px solid #293e34;border-radius:50%;pointer-events:none}.node{position:absolute;transform:translate(-50%,-50%);width:88px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #456456;border-radius:25px;padding:6px 8px;background:#20342e;color:#def4e8;font-size:11px;line-height:1.25;text-align:center}.node span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.node.center{background:var(--mint);color:#17382c;font-weight:700;width:92px;height:54px;z-index:1;font-size:12px}.legend{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#a4c6b7;margin:8px 0 28px}.row{display:flex;align-items:center;width:100%;gap:16px;min-height:64px;border:0;border-bottom:1px solid #263c33;background:transparent;color:#e3f0e9;padding:16px 6px;text-align:left}.rank{font-size:11px;color:#92b3a2}.name{flex:1;overflow-wrap:anywhere}.arrow{color:var(--mint)}#error{color:#ffbea4;font-size:14px;line-height:1.6}#error:not(:empty){margin:20px 0;padding:16px;border:1px solid #6c493e;border-radius:12px;background:#30231f}#status{font-size:13px;color:var(--mint)}#status:not(:empty){padding:16px 0}footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:32px;border-top:1px solid #293c36;padding-top:20px;color:#92a99d;font-size:10px;letter-spacing:1px;line-height:1.6}a{color:var(--mint)}.skip{position:absolute;left:12px;top:-100px;padding:12px;background:var(--bg);z-index:5}.skip:focus{top:12px}.message{margin:24px 0}.home,.results{animation:appear .3s ease-out}button,a{transition:background .15s ease}#content:focus{outline:none}@keyframes appear{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:600px){main{margin:32px auto;min-height:780px;width:calc(100% - 48px);border:1px solid #2b3e36;border-radius:28px;box-shadow:0 20px 100px #0006;padding:32px}.home{max-width:420px;margin:auto}.node{width:100px;height:52px;font-size:12px}.node.center{width:104px;height:58px;font-size:13px}}
@media(min-width:850px){main{padding:36px 48px}.home{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;min-height:600px}.intro .art{height:290px}.search-panel{padding-top:35px}.results h1{margin-top:8px}.results-intro{max-width:580px}.discovery{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center}.discovery-list .section-label{margin-top:0}.map{min-height:390px}footer{margin-top:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:599px){.map{width:calc(100% + 24px);margin-left:-12px}.node{width:80px;height:44px}.node.center{width:84px;height:44px;font-size:11px}}

/* One revolution in four minutes; labels counter-rotate to remain upright. */
.orbit-layer{position:absolute;inset:0;transform-origin:50% 50%;animation:orbit-revolution 240s linear infinite;pointer-events:none}.orbit-layer .node{pointer-events:auto;animation:orbit-label 240s linear infinite}.map-viewport:hover .orbit-layer,.map-viewport:hover .orbit-layer .node,.map-viewport:focus-within .orbit-layer,.map-viewport:focus-within .orbit-layer .node,.rotation-paused .orbit-layer,.rotation-paused .orbit-layer .node,#content[aria-busy="true"] .orbit-layer,#content[aria-busy="true"] .orbit-layer .node{animation-play-state:paused}.map-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}.map-controls .map-hint{margin:0;flex:1}.rotation-toggle{flex-shrink:0;min-height:44px;padding:10px 14px;color:var(--mint);background:transparent;border:1px solid #456456;border-radius:24px;font-size:12px}.rotation-toggle:hover{background:#20342e}@keyframes orbit-revolution{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes orbit-label{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(-360deg)}}@media(hover:none){.map-viewport:hover .orbit-layer,.map-viewport:hover .orbit-layer .node{animation-play-state:running}.map-viewport:active .orbit-layer,.map-viewport:active .orbit-layer .node,.map-viewport:focus-within .orbit-layer,.map-viewport:focus-within .orbit-layer .node,.rotation-paused .orbit-layer,.rotation-paused .orbit-layer .node,#content[aria-busy="true"] .orbit-layer,#content[aria-busy="true"] .orbit-layer .node{animation-play-state:paused}}@media(prefers-reduced-motion:reduce){.rotation-toggle{display:none}.map-controls .map-hint{font-size:0}.map-controls .map-hint::after{content:'Closer means more similar. Tap an artist to explore.';font-size:12px}}

/* Fit the complete result to the available screen; never pan inside the map. */
.showing-results main{min-height:0;margin:12px auto;padding:20px;width:calc(100% - 24px)}
.showing-results .logo{font-size:24px}.showing-results .back{margin:8px 0 0;min-height:32px;font-size:12px}
.showing-results h1{font-size:28px;margin:6px 0}.results-intro>p{font-size:12px;line-height:1.4;margin:0 0 10px}.results-intro{max-width:none}
.discovery{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr);gap:24px;align-items:center;min-width:0}
.visual{min-width:0}.map-viewport{width:100%;overflow:visible;border:0;max-height:none;min-height:0}
.map{position:relative;width:100%;max-width:570px;min-width:0;min-height:0;aspect-ratio:1;margin:0 auto}
.map .node{width:76px;height:40px;font-size:10px;padding:4px}.map .node.center{width:88px;height:46px;font-size:11px}
.map.compact-map .node:not(.center){width:28px;height:28px;border-radius:50%;font-size:11px;padding:0}.map.compact-map .node.center{width:76px;height:40px;font-size:10px}
.map-controls{gap:8px;margin-bottom:0}.map-controls .map-hint{font-size:10px;line-height:1.3;margin:0}.rotation-toggle{min-height:32px;padding:6px 10px;font-size:10px}
.legend{margin:0 0 8px;font-size:10px}.discovery-list{margin:0}.discovery-list .section-label{margin:0 0 6px;font-size:9px;letter-spacing:1px}
.discovery-rows{display:grid;grid-template-columns:1fr;gap:0}.row{min-height:34px;padding:5px 0;gap:8px;font-size:12px}.rank{font-size:10px;min-width:16px}.name{line-height:1.25}.discovery-list .note{font-size:10px;line-height:1.3;margin:8px 0 0}
.showing-results footer{margin-top:10px;padding-top:8px;font-size:9px;letter-spacing:.5px}
@media(max-width:749px){.showing-results main{margin:0;width:100%;padding:12px 16px;border-radius:0;border:0}.showing-results header{gap:10px}.showing-results .tag{font-size:8px;letter-spacing:1.3px}.showing-results h1{font-size:25px}.results-intro>p{font-size:11px;margin-bottom:6px}.discovery{display:block}.map{width:min(100%,clamp(150px,calc(100dvh - 440px),290px));margin:0 auto}.discovery-rows{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px}.row{font-size:11px;min-height:32px;padding:4px 0}.row .arrow{display:none}.row .name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.map-controls .map-hint{max-width:210px}.discovery-list .section-label{margin-bottom:3px}.legend{margin-bottom:6px}.showing-results footer{margin-top:8px}}
@media(min-width:750px) and (max-height:750px){.showing-results main{padding:12px 20px}.map{max-width:460px}.row{min-height:30px}.results-intro>p{margin-bottom:4px}}
@media(max-height:550px) and (min-width:600px){.showing-results main{margin:0 auto}.showing-results h1{font-size:22px}.map{max-width:270px}.discovery{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.discovery-rows{grid-template-columns:1fr 1fr;gap:0 10px}.row{min-height:30px;font-size:10px}.results-intro>p{display:none}}
@media(max-width:749px){.map{width:min(100%,clamp(170px,calc(100dvh - 500px),290px))}.map.compact-map .node.center{width:58px;height:30px;font-size:9px}}
@media(max-width:749px) and (max-height:650px){.showing-results h1{font-size:22px}.results-intro>p{display:none}.row{min-height:29px;font-size:10px}.discovery-list .note{display:none}.showing-results .back{min-height:28px}.map-controls .map-hint{font-size:9px}.rotation-toggle{min-height:28px}.showing-results footer{margin-top:5px;padding-top:5px}}
@media(min-width:750px) and (min-height:551px){.showing-results .map{max-width:min(570px,calc(100dvh - 280px))}}

/* Wider radial spread, with a smaller centre to give close matches room. */
.map.compact-map .node:not(.center){width:24px;height:24px;font-size:10px}.map.compact-map .node.center{width:50px;height:28px;font-size:9px}