/* Phone-first guest requests. Decorative motion never drives audio or layout. */
:root{color-scheme:dark;--bg:#0c1b24;--card:#132a34;--ink:#edf7f6;--muted:#94b1b9;--mint:#80e6cd;--edge:#29444d;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);min-height:100dvh}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.55;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid var(--mint);outline-offset:4px}button,input{min-height:52px}main{max-width:620px;margin:auto;padding:calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));position:relative}.ambient{pointer-events:none;position:fixed;inset:0;background:radial-gradient(ellipse at 85% 0%,#1d595945,transparent 55%)}header{display:flex;align-items:center;justify-content:space-between;gap:14px}.brand{font-weight:500;font-size:16px;letter-spacing:1px;color:var(--mint);text-decoration:none;border:1px solid #54877d;border-radius:8px;padding:10px 12px;white-space:nowrap}.brand b{font-weight:800}.tag{font-size:9px;color:var(--muted);letter-spacing:1.6px;text-align:right}.hero{padding-top:38px}.eyebrow{display:flex;align-items:center;gap:8px;color:#b2d8d2;font-size:12px}.dot{width:6px;height:6px;background:var(--mint);border-radius:50%;box-shadow:0 0 14px #80e6cd55}h1{font-size:clamp(32px,7.8vw,47px);font-weight:650;line-height:1.12;letter-spacing:-1.6px;margin:20px 0 16px}p{color:var(--muted);font-size:14px;line-height:1.65;margin:12px 0}h2{font-size:23px;line-height:1.2;letter-spacing:-.5px;margin:12px 0}.bars{height:53px;display:flex;align-items:center;gap:4px;margin:28px 0 25px;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}.bars i{display:block;border-radius:3px;background:linear-gradient(#80e6cd,#3c907d);width:100%;height:14px;opacity:.5}.bars i:nth-child(3n){height:32px;opacity:.9}.bars i:nth-child(4n){height:50px}.bars i:nth-child(7n){height:23px;opacity:.65}.card{border:1px solid var(--edge);background:linear-gradient(145deg,#17323b,#112630);border-radius:22px;padding:26px 22px;box-shadow:0 16px 45px #0002}.step{font-size:10px;letter-spacing:2px;color:var(--mint);font-weight:650}.card p{font-size:13px}label{display:block;font-size:12px;color:var(--muted);margin:22px 0 9px}#code{width:100%;text-align:center;background:#0d2129;border:1px solid #395c65;border-radius:12px;color:var(--ink);font-size:28px;letter-spacing:12px;padding:10px 0 10px 12px;height:64px;outline:none}small{display:block;color:var(--muted);font-size:11px;line-height:1.5;margin:10px 0 21px}.primary,.secondary{width:100%;border-radius:12px;padding:14px 18px;display:flex;align-items:center;justify-content:center;gap:16px;font-size:14px;font-weight:650;min-height:54px}.primary{background:var(--mint);color:#12332d;border:1px solid var(--mint);transition:background .18s,transform .18s}.primary:active{transform:scale(.985);background:#a6efde}.secondary{background:transparent;border:1px solid var(--edge);color:#c6dadd;margin-top:12px}.search-box{display:flex;align-items:center;background:#142e38;border:1px solid #3d626c;border-radius:15px;overflow:hidden}.search-box svg{width:21px;height:21px;fill:none;stroke:var(--mint);stroke-width:1.7;margin-left:15px;flex-shrink:0}.search-box input{width:100%;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);padding:16px 10px;outline:none}.search-box input::placeholder{color:#91aeb6}.search-box button{background:transparent;color:var(--mint);border:0;width:49px;font-size:25px}.search-heading{display:flex;justify-content:space-between;gap:12px;margin:18px 3px 12px;font-size:11px;color:var(--muted);line-height:1.5}.song{display:flex;align-items:center;gap:12px;min-height:81px;padding:13px 12px;margin:8px 0;border:1px solid #243f48;border-radius:14px;background:#132932;width:100%;text-align:left;color:var(--ink);transition:border-color .15s,background .15s}.song:active,.song:hover{background:#1c3a43;border-color:#4e8b7d}.song-icon{height:42px;width:42px;flex-shrink:0;display:grid;place-items:center;background:#25433f;border:1px solid #345c50;color:var(--mint);border-radius:11px;font-size:23px}.song-copy{flex:1;min-width:0}.song-title{display:block;font-size:15px;font-weight:600;overflow-wrap:anywhere;line-height:1.35}.song-artist{display:block;color:var(--muted);font-size:12px;margin-top:5px;line-height:1.35}.song-time{font-size:11px;color:#aac7cb;margin-right:3px}.song-arrow{color:var(--mint);font-size:20px}.empty{text-align:center;padding:35px 12px}.empty span{display:block;color:#507e7b;font-size:40px}.empty p{font-size:14px}.correction{background:none;border:0;color:var(--mint);font-size:13px;text-align:left;padding:8px 0;min-height:42px}.mine{border-top:1px solid var(--edge);padding-top:14px;margin-top:24px}.mine h2{font-size:15px}.mine h2 span{font-size:11px;border-radius:7px;padding:4px 7px;background:#25413f;color:var(--mint);margin-left:5px}.request{padding:12px 0;border-bottom:1px solid #243e46;font-size:13px}.request small{margin:5px 0 0;color:var(--mint)}.round-icon{width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:#254b42;color:var(--mint);font-size:28px;margin-bottom:22px}.success .note{margin:22px 0}.note{font-size:12px!important;color:var(--muted)}footer{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:32px;color:#78939b;font-size:10px;line-height:1.5}footer b{font-weight:600;letter-spacing:.4px}#error{background:#4a3130;border:1px solid #815147;color:#ffe0cb;padding:13px 16px;border-radius:12px;font-size:13px}dialog{position:fixed;inset:auto 0 0;margin:auto auto 0;max-width:620px;width:100%;border:1px solid #3f646b;border-radius:25px 25px 0 0;background:#142c36;color:var(--ink);padding:32px 24px calc(24px + env(safe-area-inset-bottom));max-height:90dvh;box-shadow:0 -10px 80px #0005}dialog::backdrop{background:#031016bb;backdrop-filter:blur(4px)}dialog h2{overflow-wrap:anywhere;padding-right:20px}.close{position:absolute;top:12px;right:14px;width:44px;min-height:44px;font-size:28px;color:var(--muted);background:transparent;border:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}[hidden]{display:none!important}@media(min-width:700px){main{padding-top:40px}.hero{padding-top:52px}dialog{bottom:24px;border-radius:24px;width:570px}}@media(max-width:350px){main{padding-inline:16px}.tag{font-size:8px}.card{padding:22px 16px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(max-width:600px){main{padding-top:calc(18px + env(safe-area-inset-top));padding-inline:18px}.hero{padding-top:22px}h1{font-size:32px;margin:16px 0 12px}.hero p{font-size:13px;line-height:1.5}.hero p br,.card p br{display:none}.bars{height:32px;margin:16px 0 18px}.bars i:nth-child(4n){height:32px}.bars i:nth-child(3n){height:23px}.card{padding:20px 18px}.card h2{font-size:22px}label{margin:16px 0 8px}small{margin:8px 0 16px}footer{margin-top:24px}}

/* A single search surface: focus belongs to the whole field, not input edges. */
.search-box{border-radius:20px;border-color:#3d626c;background:linear-gradient(120deg,#16323b,#122a34);box-shadow:0 8px 28px #00000012;transition:border-color .2s,box-shadow .2s}
.search-box:focus-within{border-color:#80d8c4;box-shadow:0 0 0 3px #80e6cd12,0 8px 28px #00000012}
.search-box input,.search-box input:focus{appearance:none;-webkit-appearance:none;box-shadow:none!important;border:0!important;outline:0;background:transparent;border-radius:0;caret-color:var(--mint)}
.search-box input::-webkit-search-decoration{appearance:none;-webkit-appearance:none}
.search-box svg{margin-left:18px;width:20px;height:20px;opacity:.85}
.search-box input{padding:18px 12px;min-height:60px}
.search-box button{flex:0 0 48px;min-height:44px;margin:5px 6px 5px 0;border-radius:13px;transition:background .18s,color .18s,transform .18s}
.search-box button:hover{background:#80e6cd12;color:#a7f3df}
.search-box button:active{transform:scale(.94)}
.search-box button:focus-visible{outline-offset:-3px}
.search-heading{margin:0 3px;font-size:12px}
#search-status{display:block}
#search-status:not(:empty){padding:16px 0 4px}
/* Transform-only wave with staggered phases: fixed box, no layout reflow. */
.bars{height:44px;margin:24px 0;gap:4px}
.bars i{height:32px!important;flex:1;min-width:0;width:auto;border-radius:4px;opacity:.8;background:linear-gradient(180deg,#96ebd7,#4eaf9a);transform-origin:center;animation:music-wave 2.8s ease-in-out infinite alternate;animation-delay:-1.2s}
.bars i:nth-child(2n){animation-duration:2.3s;animation-delay:-.7s}
.bars i:nth-child(3n){animation-duration:3.1s;animation-delay:-2.5s}
.bars i:nth-child(4n){animation-duration:2.6s;animation-delay:-1.8s}
.bars i:nth-child(5n){animation-duration:3.5s;animation-delay:-3s}
.bars i:nth-child(7n){animation-duration:2.1s;animation-delay:-.3s}
@keyframes music-wave{0%{transform:scaleY(.28);opacity:.45}35%{transform:scaleY(.72);opacity:.75}70%{transform:scaleY(.4);opacity:.6}100%{transform:scaleY(1);opacity:.95}}
.brand{border-color:#54877d99;background:#132d342e;border-radius:11px;padding:11px 13px;letter-spacing:.6px}
.hero p{max-width:490px;color:#a4bec4}
.empty{padding:27px 12px 24px}
.empty span{font-size:36px;color:#61978e}
.empty p{margin:8px 0 0;color:#8eafb4;font-size:13px;line-height:1.65}
.mine{border-top:0;padding-top:0;margin-top:18px}
.mine h2{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:16px;letter-spacing:-.2px}
.mine h2 span{margin:0;padding:4px 8px;border:1px solid #39594f66}
.request{padding:15px 16px;margin:8px 0;border:1px solid #29444d;border-radius:14px;background:#122b333d;line-height:1.5;overflow-wrap:anywhere}
.request small{font-size:11px;margin:6px 0 0}
footer{gap:6px;margin-top:32px;padding-top:24px;border-top:1px solid #29444d80;font-size:11px;color:#91aeb5;text-align:center}
footer strong{font-size:14px;letter-spacing:.2px;font-weight:600;color:#c8e2df;margin-top:2px}
.signature-heart{width:18px;height:18px;fill:none;stroke:#80d8c4;stroke-width:1.5;stroke-linejoin:round;margin-bottom:5px;opacity:.85}
@media(max-width:600px){.bars{height:36px;margin:20px 0}.bars i{height:30px!important}.hero p{font-size:14px;line-height:1.6}.search-box input{padding-left:10px}.search-box svg{margin-left:15px}.empty{padding-block:24px}footer{padding-top:22px;margin-top:26px}.hero{padding-top:26px}}
@media(max-width:350px){.brand{font-size:14px;padding:10px}.tag{letter-spacing:1px}.search-box button{flex-basis:40px}.search-box input{font-size:16px;padding-right:4px}}
@media(prefers-reduced-motion:reduce){.bars i{animation:none;transform:scaleY(.45)}.bars i:nth-child(3n){transform:scaleY(.8)}.bars i:nth-child(4n){transform:scaleY(1)}}