@import url('/chords/tokens.css');
*{box-sizing:border-box}
body{margin:0;background:var(--studio-bg);color:var(--studio-text);font:15px/1.5 var(--studio-ui);-webkit-font-smoothing:antialiased}
header,main,footer{max-width:960px;margin:0 auto;padding-left:32px;padding-right:32px}
header{display:flex;align-items:center;justify-content:space-between;min-height:84px;border-bottom:1px solid var(--studio-border)}
a{color:inherit;text-decoration:none}
.brand{font:italic 34px var(--studio-display)}.brand span{color:var(--studio-accent)}
nav{display:flex;gap:24px;color:var(--studio-muted);font-size:13px}nav a{padding:10px 0}nav a[aria-current]{color:var(--studio-text);box-shadow:0 2px var(--studio-accent)}
main{padding-top:48px;padding-bottom:64px}
.eyebrow{font:12px var(--studio-mono);color:var(--studio-muted);margin:0 0 12px;letter-spacing:.04em}
h1{font:48px/1.05 var(--studio-display);margin:0 0 10px}
.lede{color:var(--studio-muted);margin:0 0 28px;font-size:16px}
form{display:flex;gap:10px}
input[type=search]{flex:1;min-width:0;font:16px var(--studio-ui);padding:13px 14px;border:1px solid var(--studio-border);border-radius:var(--studio-radius);background:var(--studio-surface);color:var(--studio-text)}
button,.actions a{font:500 14px var(--studio-ui);padding:12px 18px;border:1px solid var(--studio-border);border-radius:var(--studio-radius);background:var(--studio-surface);color:var(--studio-text);cursor:pointer;transition:background 120ms,border-color 120ms}
button:hover,.actions a:hover{background:var(--studio-raised);border-color:var(--studio-muted)}
button.primary{background:var(--studio-accent);border-color:var(--studio-accent);color:#fff}button.primary:hover{background:#b52b35}
#status{color:var(--studio-playing);font-size:13px;min-height:20px;margin:14px 0}
.results{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.results button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:8px}
.results img{width:56px;height:56px;border-radius:3px;flex:none;background:var(--studio-raised)}
.results span{display:flex;flex-direction:column;min-width:0}
.results strong{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.results small{color:var(--studio-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.output{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:20px}
.output[hidden]{display:none}
#receipt{width:100%;max-width:420px;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.actions [hidden]{display:none}
footer{display:flex;justify-content:space-between;gap:16px;color:var(--studio-muted);font-size:12px;border-top:1px solid var(--studio-border);padding-top:20px;padding-bottom:28px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:where(button,a,input):focus-visible{outline:2px solid var(--studio-focus);outline-offset:3px}
@media(max-width:640px){header,main,footer{padding-left:18px;padding-right:18px}h1{font-size:38px}nav{gap:12px}form{flex-direction:column}footer{flex-direction:column}.brand{font-size:28px}}
.hints{list-style:none;counter-reset:hint;margin:4px 0 0;padding:0;width:100%;max-width:520px;display:flex;flex-direction:column;gap:8px}
.hints[hidden],.hints li[hidden]{display:none}
.hints li{counter-increment:hint;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--studio-surface);border:1px solid var(--studio-border);border-radius:var(--studio-radius);padding:10px 12px;font-size:14px}
.hints li span:before{content:counter(hint);display:inline-grid;place-items:center;width:22px;height:22px;margin-right:10px;border-radius:50%;background:var(--studio-accent);color:#fff;font:500 12px var(--studio-ui)}
.hints em{font-style:normal;color:var(--studio-playing)}
.hints button{padding:8px 12px;font-size:13px;flex:none}
.shelf{margin-top:40px}
.shelf h2{font:28px/1.1 var(--studio-display);margin:0 0 4px}
.shelf-note{color:var(--studio-muted);font-size:13px;margin:0 0 14px}
.tiles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
.tiles button{width:100%;padding:0;border:0;background:none;text-align:left;display:flex;flex-direction:column;gap:6px;color:var(--studio-text)}
.tiles button:hover{background:none}
.tiles img,.tiles .rank{width:100%;aspect-ratio:1;border-radius:4px;object-fit:cover;background:var(--studio-raised);transition:transform 120ms}
.tiles button:hover img{transform:scale(1.03)}
.tiles .rank{display:grid;place-items:center;font:500 44px var(--studio-display);color:var(--studio-muted)}
.tiles strong{font-weight:500;font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tiles small{color:var(--studio-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pair{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.pair input{flex:1;min-width:160px;font:16px var(--studio-ui);padding:12px 14px;border:1px solid var(--studio-border);border-radius:var(--studio-radius);background:var(--studio-surface);color:var(--studio-text)}
.pair select{font:14px var(--studio-ui);padding:12px;border:1px solid var(--studio-border);border-radius:var(--studio-radius);background:var(--studio-surface);color:var(--studio-text);color-scheme:dark}
@media(max-width:640px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.pair button{width:100%}}
.handoff{display:flex;align-items:center;gap:16px;width:100%;max-width:520px;background:var(--studio-surface);border:1px solid var(--studio-border);border-radius:var(--studio-radius);padding:14px}
.handoff[hidden]{display:none}
.handoff canvas{flex:none;width:112px;height:112px;background:#fff;border-radius:4px}
.handoff p{margin:0;font-size:14px;color:var(--studio-muted)}
.handoff strong{color:var(--studio-text);font-weight:500}