/* /whats-that-song (tools/build_whats_that_song.py). The app's "What was that
   song?" sheet on a page: amber kicker (amberLabel), amber neon title, an amber
   find-it tube. One hero in motion: the listening waves. */
:root{--recall-kicker:#e8c193; --amber-fill:#fff1dc; --pink-fill:#ffe3f1; --blurple-fill:#f3efff;
  --card:#120f1e; --kicker-n:#a49dbb; --line:#2e2644; --control-line:#4a3f66; --secondary:#b3abcc;
  --neon-ak:0 0 3px #fff,0 0 10px #e8a24a,0 0 24px #e8a24a,0 0 50px rgba(232,162,74,.45)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.g-b{--gel:var(--accent-400); --gl:145,132,217; --gfill:var(--blurple-fill)}
.g-a{--gel:var(--tube-a); --gl:232,162,74; --gfill:var(--amber-fill)}
.g-p{--gel:var(--tube-p); --gl:224,85,155; --gfill:var(--pink-fill)}

.wts .hero .wrap{padding:30px 0 40px}
.wts .crumb{margin:0 0 26px}
.wts-top{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center}
.wts .kicker{font:500 12.5px/1.4 var(--body); letter-spacing:.24em; text-transform:uppercase;
  color:var(--recall-kicker); margin:0 0 12px}
.wts h1{font-size:clamp(46px,8vw,86px); line-height:1.02; color:var(--amber-fill); text-shadow:var(--neon-ak)}
.wts .dek{margin-top:18px; max-width:46ch}

/* the listening waves: a medallion and three rings going out */
.waves{position:relative; width:clamp(92px,16vw,150px); aspect-ratio:1; display:grid; place-items:center}
.waves .core{position:relative; z-index:2; width:56%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  border:2px solid var(--tube-a); color:var(--amber-fill);
  background:radial-gradient(circle at 50% 40%,rgba(232,162,74,.35),rgba(20,14,34,.95));
  box-shadow:0 0 16px rgba(232,162,74,.55),0 0 40px rgba(232,162,74,.25)}
.waves .core .ico{width:52%; height:52%; filter:drop-shadow(0 0 6px rgba(232,162,74,.8))}
.waves i{position:absolute; inset:22%; border-radius:50%; border:1.5px solid rgba(232,162,74,.7);
  opacity:0; animation:ring 3.6s ease-out infinite}
.waves i:nth-child(2){animation-delay:1.2s} .waves i:nth-child(3){animation-delay:2.4s}
@keyframes ring{0%{transform:scale(.8); opacity:.75} 100%{transform:scale(1.9); opacity:0}}
@media (prefers-reduced-motion: reduce){
  .waves i{animation:none; opacity:.35; transform:scale(1.3)}
  .waves i:nth-child(2){opacity:.18; transform:scale(1.65)}
  .waves i:nth-child(3){display:none}
}

/* the finder: the sheet's box, on the page */
.finder{position:relative; z-index:2; margin:6px 0 0; padding:22px 20px 20px; border-radius:20px;
  background:var(--card); border:1.5px solid rgba(232,162,74,.45);
  box-shadow:0 0 30px -6px rgba(232,162,74,.25), 0 30px 60px -30px rgba(0,0,0,.9)}
.finder form, .finder .found{display:none}
.js .finder form{display:block}
.js .finder .found:not([hidden]){display:block}
.js .finder .nojs{display:none}
.finder label{display:block; font-size:15px; font-weight:500; color:var(--text); margin:0 0 4px}
.finder .hint{display:block; font-size:13.5px; color:var(--secondary); margin:0 0 8px; line-height:1.45}
.finder textarea, .finder input{display:block; width:100%; font:inherit; font-size:17px; line-height:1.45;
  color:var(--text); background:#0b0913; border:1.5px solid var(--control-line); border-radius:12px;
  padding:12px 14px; resize:vertical}
.finder textarea{min-height:88px}
.finder textarea::placeholder, .finder input::placeholder{color:#8f88a8}
.finder textarea:focus, .finder input:focus{outline:none; border-color:var(--accent-400);
  box-shadow:0 0 0 3px rgba(145,132,217,.25)}
.finder .field + .field{margin-top:18px}
.finder .row{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:20px}
.tube{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px;
  border-radius:999px; border:2px solid var(--tube-a); background:rgba(232,162,74,.10); color:var(--amber-fill);
  font:400 20px var(--display); text-shadow:0 0 6px rgba(232,162,74,.7); cursor:pointer;
  box-shadow:0 0 12px rgba(232,162,74,.55),0 0 28px rgba(232,162,74,.28); transition:transform .12s, box-shadow .12s}
.tube:hover{box-shadow:0 0 16px rgba(232,162,74,.7),0 0 34px rgba(232,162,74,.35)}
.tube:active{transform:scale(.97); background:rgba(232,162,74,.18)}
.tube:focus-visible{outline:2px solid var(--accent-400); outline-offset:3px}
.tube .ico{width:20px; height:20px}
.finder .privacy{flex:1 1 260px; margin:0; font-size:13.5px; line-height:1.45; color:var(--secondary)}
.nudge{margin:14px 0 0; padding:10px 14px; border-radius:12px; font-size:14.5px; color:var(--recall-kicker);
  background:rgba(232,162,74,.12); border:1px solid rgba(232,162,74,.65)}
.found{margin-top:26px; padding-top:20px; border-top:1px dashed var(--control-line)}
.found h2{font-size:28px; line-height:1.1; color:var(--amber-fill); text-shadow:var(--neon-ak); outline:none}
.found .lede{margin:6px 0 14px; font-size:14.5px; color:var(--secondary)}
.found ol{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.srch{display:flex; align-items:center; gap:14px; min-height:56px; padding:12px 14px; border-radius:14px;
  text-decoration:none; color:var(--text); border:1.5px solid var(--line); background:rgba(255,255,255,.015)}
.srch:hover{border-color:rgba(232,162,74,.6); background:rgba(232,162,74,.06)}
.srch:active{background:rgba(232,162,74,.12)}
.srch:focus-visible{outline:2px solid var(--accent-400); outline-offset:2px}
.srch .ico{flex:none; width:24px; height:24px; color:var(--tube-a); filter:drop-shadow(0 0 5px rgba(232,162,74,.6))}
.srch .ico.out{width:18px; height:18px; color:var(--secondary); filter:none}
.srch .st{flex:1; min-width:0; display:block}
.srch b{display:block; font-size:15.5px; line-height:1.3}
.srch .sq{display:block; margin-top:2px; font-size:14px; line-height:1.4; color:var(--secondary);
  overflow-wrap:anywhere}
.srch .sw{display:block; margin-top:2px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#8f88a8}
.ghost{display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:14px; padding:0 14px;
  border-radius:999px; border:1px solid var(--control-line); background:none; color:var(--secondary);
  font:500 14px var(--body); cursor:pointer}
.ghost:hover{color:var(--text)}
.ghost .ico{width:18px; height:18px}
.nojs h2{font-size:24px; color:var(--amber-fill); text-shadow:var(--neon-ak); margin:0 0 6px}
.nojs p{color:var(--secondary); font-size:15px; margin:0 0 10px}
.nojs ol{margin:0; padding-left:22px; color:var(--muted); font-size:15.5px; line-height:1.6}
.nojs li{margin-bottom:6px}

/* the steps and the app: big icons, small text */
.ways{padding:64px 0 0}
.ways h2, .inapp h2{font-size:clamp(30px,4.6vw,44px); line-height:1.1; text-shadow:var(--neon-b)}
.ways .lede, .inapp .lede{color:var(--muted); max-width:58ch; margin:12px 0 26px}
.steps{list-style:none; margin:0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.step{position:relative; padding:20px 20px 18px; border-radius:16px; background:var(--surface);
  border:1px solid var(--line); border-top:1.5px solid rgba(var(--gl),.6);
  box-shadow:0 -6px 18px -14px rgba(var(--gl),.7)}
.step .med{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; margin:0 0 14px;
  border:1.5px solid var(--gel); color:var(--gfill); background:rgba(var(--gl),.08);
  box-shadow:0 0 12px rgba(var(--gl),.45)}
.step .med .ico{width:28px; height:28px; filter:drop-shadow(0 0 5px rgba(var(--gl),.8))}
.step .k{display:block; font-size:11.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--kicker-n); margin:0 0 4px}
.step h3{font-size:23px; line-height:1.15; color:var(--gfill); text-shadow:0 0 3px rgba(255,255,255,.35),0 0 12px rgba(var(--gl),.6);
  margin:0 0 8px}
.step p{font-size:15px; line-height:1.55; color:var(--muted)}
.inapp{padding:70px 0 0}
.inapp .eyebrow{color:#fff1dc; text-shadow:0 0 8px var(--gel-b)}
.wts .faq summary{font-size:16.5px}
@media (max-width:640px){
  .wts-top{grid-template-columns:minmax(0,1fr)}
  .waves{order:-1; width:96px; margin:0 0 4px}
  .finder{padding:18px 16px 16px; margin-inline:-6px}
  .tube{width:100%}
}