:root{
  --bg:#05080e;--bg2:#09101a;--glass:rgba(7,12,20,.64);--glass2:rgba(8,14,24,.84);
  --line:rgba(255,255,255,.105);--line2:rgba(255,255,255,.062);--text:#f2f5f7;--muted:#98a5b5;--muted2:#687586;
  --cyan:#3499d2;--green:#65c7f3;--violet:#a99cff;--amber:#ffd79a;--red:#ff7897;--shadow:0 30px 100px rgba(0,0,0,.5)
}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;overflow:hidden}button,input,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid rgba(52,153,210,.7);outline-offset:2px}.app-shell{width:100%;height:100%;position:relative;isolation:isolate;background:radial-gradient(circle at 52% 42%,#101c2b 0,#07101b 32%,#04070c 74%)}
#globe-stage{position:fixed;inset:0;z-index:0}.ambient-grid{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.11;background-image:linear-gradient(rgba(52,153,210,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(52,153,210,.05) 1px,transparent 1px);background-size:82px 82px;mask-image:radial-gradient(circle at 50% 50%,black,transparent 78%)}.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.glass{background:linear-gradient(180deg,rgba(16,24,36,.74),rgba(6,10,17,.58));border:1px solid var(--line);box-shadow:inset 0 1px rgba(255,255,255,.045),var(--shadow);backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%)}
.topbar{position:fixed;z-index:20;top:18px;left:18px;right:18px;height:72px;border-radius:19px;display:grid;grid-template-columns:255px minmax(320px,700px) 1fr;align-items:center;gap:18px;padding:0 16px}.brand{height:100%;display:flex;align-items:center;gap:12px;border:0;background:none;cursor:pointer}.brand-orbit{position:relative;width:38px;height:38px;display:grid;place-items:center}.brand-orbit i,.brand-orbit b{position:absolute;border-radius:50%}.brand-orbit i{border:1px solid var(--cyan)}.brand-orbit i:nth-child(1){width:36px;height:20px;transform:rotate(23deg);opacity:.35}.brand-orbit i:nth-child(2){width:21px;height:36px;transform:rotate(-28deg);opacity:.5}.brand-orbit i:nth-child(3){width:30px;height:30px;opacity:.16}.brand-orbit b{width:8px;height:8px;background:var(--cyan);box-shadow:0 0 18px rgba(52,153,210,.9)}.brand-copy{text-align:left}.brand-copy strong{font:600 15px Space Grotesk,Inter;letter-spacing:.24em}.brand-copy small{display:block;margin-top:4px;color:var(--muted);font:500 9px DM Mono,monospace;letter-spacing:.11em}.search-wrap{height:44px;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:13px;display:flex;align-items:center;gap:9px;padding:0 12px;transition:.2s}.search-wrap:focus-within{border-color:rgba(52,153,210,.42);box-shadow:0 0 0 4px rgba(52,153,210,.045)}.search-glyph{font-size:23px;color:#8a98aa}.search-wrap input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:13px}.search-wrap input::placeholder{color:#697789}.search-status{font:500 8px DM Mono;color:var(--green);letter-spacing:.1em}.search-wrap kbd{font:500 9px DM Mono;color:#9ba8b7;border:1px solid var(--line);padding:4px 7px;border-radius:6px;background:rgba(255,255,255,.035)}.top-actions{justify-self:end;display:flex;align-items:center;gap:10px}.directory-stat{display:flex;align-items:center;gap:9px;border-right:1px solid var(--line);padding-right:13px}.directory-stat strong{display:block;font:500 11px DM Mono}.directory-stat small{display:block;font:400 8px DM Mono;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green);flex:none}.icon-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035);cursor:pointer}.icon-btn:hover{background:rgba(255,255,255,.07)}.icon-btn.compact{width:36px;height:36px}
.rail{position:fixed;z-index:18;left:18px;top:104px;bottom:108px;width:74px;border-radius:20px;padding:9px 7px;display:flex;flex-direction:column;gap:5px}.rail-btn{height:63px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.rail-btn span{font-size:18px}.rail-btn small{font-size:9px}.rail-btn:hover{background:rgba(255,255,255,.035);color:#dbe4ed}.rail-btn.active{color:var(--cyan);background:rgba(52,153,210,.07);border-color:rgba(52,153,210,.17)}.rail-spacer{flex:1}
.hero-copy{position:fixed;z-index:6;left:122px;top:150px;width:min(470px,34vw);pointer-events:none;transition:opacity .25s,transform .25s}.hero-copy.hidden{opacity:0;transform:translateX(-20px);pointer-events:none}.eyebrow{font:500 10px/1.2 DM Mono,monospace;letter-spacing:.14em;color:#a0adbd;text-transform:uppercase}.hero-copy h1{font:550 clamp(42px,4.4vw,74px)/.91 Space Grotesk,Inter,sans-serif;letter-spacing:-.055em;margin:18px 0 18px}.hero-copy h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(235,243,250,.55)}.hero-copy p{max-width:390px;color:#aeb9c7;font-size:13px;line-height:1.65;margin:0 0 20px}.hero-actions{display:flex;gap:8px;pointer-events:auto}.primary-cta,.ghost-cta{height:42px;border-radius:12px;padding:0 14px;cursor:pointer}.primary-cta{border:1px solid rgba(52,153,210,.3);background:rgba(52,153,210,.11);box-shadow:0 0 28px rgba(52,153,210,.07);font-weight:600}.primary-cta span{margin-left:12px}.ghost-cta{border:1px solid var(--line);background:rgba(255,255,255,.025);color:#c3ceda}.interaction-hints{margin-top:15px;color:#687688;font:400 8px DM Mono;letter-spacing:.07em}.interaction-hints span{color:#bbc5d0;margin-right:4px}.interaction-hints span:not(:first-child){margin-left:12px}
.command{position:fixed;z-index:17;top:106px;right:18px;bottom:108px;width:min(410px,31vw);min-width:345px;border-radius:23px;padding:20px;overflow:hidden;transition:.32s cubic-bezier(.2,.8,.2,1)}.command.collapsed{transform:translateX(calc(100% + 30px));opacity:0}.command-head{display:flex;justify-content:space-between;gap:12px}.command-head h2{font:600 27px/1 Space Grotesk,Inter;margin:8px 0 6px;letter-spacing:-.035em}.command-head p{margin:0;color:var(--muted);font-size:11px}.current-signal{margin-top:18px;border:1px solid var(--line);border-radius:17px;padding:12px;display:grid;grid-template-columns:66px 1fr 38px;align-items:center;gap:12px;background:radial-gradient(circle at 13% 50%,rgba(52,153,210,.08),rgba(255,255,255,.022) 38%,rgba(255,255,255,.015))}.signal-orb{width:60px;height:60px;position:relative;display:grid;place-items:center}.signal-orb i,.signal-orb b{position:absolute;border-radius:50%}.signal-orb i{border:1px solid rgba(52,153,210,.35);animation:spin 8s linear infinite}.signal-orb i:first-child{width:49px;height:25px;transform:rotate(22deg)}.signal-orb i:nth-child(2){width:28px;height:50px;transform:rotate(-25deg);animation-duration:11s;animation-direction:reverse}.signal-orb b{width:14px;height:14px;background:var(--cyan);box-shadow:0 0 22px rgba(52,153,210,.8)}@keyframes spin{to{rotate:360deg}}.signal-copy{min-width:0}.signal-state{font:500 8px DM Mono;color:var(--green);letter-spacing:.12em}.signal-copy h3{font-size:14px;margin:6px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.signal-copy p{margin:0;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.heart-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025);font-size:18px;cursor:pointer}.heart-btn.active{color:#ff8cad;border-color:rgba(255,120,151,.25);background:rgba(255,120,151,.08)}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 18px}.quick-grid button{height:69px;border:1px solid var(--line2);border-radius:14px;background:rgba(255,255,255,.02);text-align:left;padding:10px;cursor:pointer}.quick-grid button:hover{background:rgba(52,153,210,.045);border-color:rgba(52,153,210,.18)}.quick-grid span{float:left;margin-right:7px;color:var(--cyan)}.quick-grid b{display:block;font-size:10px}.quick-grid small{display:block;color:var(--muted);font-size:8px;margin-top:4px}.list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.list-head strong{font-size:11px}.list-head small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.mini-btn{border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.025);color:#98a5b5;padding:7px 8px;font:500 8px DM Mono;cursor:pointer}.station-list{height:calc(100% - 304px);overflow:auto;padding-right:4px}.station-list::-webkit-scrollbar,.drawer::-webkit-scrollbar{width:4px}.station-list::-webkit-scrollbar-thumb,.drawer::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:10px}.station-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px;border-radius:12px;border:1px solid transparent;cursor:pointer}.station-row:hover{background:rgba(255,255,255,.035);border-color:var(--line2)}.station-row.active{background:rgba(52,153,210,.055);border-color:rgba(52,153,210,.18)}.favicon{width:36px;height:36px;border-radius:10px;background:linear-gradient(145deg,rgba(52,153,210,.13),rgba(169,156,255,.08));border:1px solid rgba(255,255,255,.07);display:grid;place-items:center;overflow:hidden;font:600 8px DM Mono;color:#c6d0db}.favicon img{width:100%;height:100%;object-fit:cover}.station-row .copy{min-width:0}.station-row b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.station-row small{display:block;margin-top:3px;color:var(--muted);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quality{text-align:right;font:500 8px DM Mono;color:#7b8796}.quality strong{display:block;color:var(--green);font-size:8px}.empty-state{padding:24px 10px;color:var(--muted);text-align:center;font-size:11px;line-height:1.6}.skeleton{height:55px;margin:6px 0;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.06),rgba(255,255,255,.02));background-size:220% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{to{background-position:-220% 0}}
.globe-chip{position:fixed;z-index:10;left:50%;transform:translateX(-50%);bottom:116px;height:35px;padding:0 11px;border-radius:999px;display:flex;align-items:center;gap:8px}.globe-chip b{font:500 8px DM Mono;letter-spacing:.08em}.globe-chip small{font-size:8px;color:var(--muted)}
.player{position:fixed;z-index:24;left:18px;right:18px;bottom:16px;height:80px;border-radius:19px;display:grid;grid-template-columns:minmax(250px,370px) 150px 1fr minmax(190px,280px);align-items:center;gap:12px;padding:0 16px}.player-station{display:flex;align-items:center;gap:12px;min-width:0}.station-art{width:46px;height:46px;border-radius:12px;border:1px solid rgba(52,153,210,.18);background:linear-gradient(145deg,rgba(52,153,210,.15),rgba(169,156,255,.08));display:grid;place-items:center;overflow:hidden;flex:none}.station-art img{width:100%;height:100%;object-fit:cover}.station-art span{font:600 9px DM Mono}.station-main{min-width:0}.station-main small{display:block;color:var(--cyan);font:500 7px DM Mono;letter-spacing:.1em;margin-bottom:4px}.station-main strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.station-main span{display:block;color:var(--muted);font-size:8px;margin-top:3px}.transport{display:flex;align-items:center;justify-content:center;gap:8px}.transport button{border:0;background:transparent;color:#a6b2c0;font-size:21px;cursor:pointer}.transport .play-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(52,153,210,.35);background:rgba(52,153,210,.1);display:grid;place-items:center;color:#fff;font-size:12px;box-shadow:0 0 26px rgba(52,153,210,.08)}.wave-shell{position:relative;height:46px}.wave-shell canvas{width:100%;height:46px}.wave-center{position:absolute;left:50%;top:6px;bottom:6px;width:1px;background:linear-gradient(transparent,rgba(52,153,210,.5),transparent)}.player-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px}.player-tools>button{border:0;background:transparent;color:#a9b5c2;cursor:pointer}.volume{display:flex;align-items:center;gap:8px;max-width:140px}.volume input{width:100%;accent-color:#d7fbff}.latency{font:500 7px DM Mono;color:var(--green);border:1px solid rgba(150,255,199,.2);background:rgba(150,255,199,.05);padding:5px 7px;border-radius:999px}
.drawer-backdrop{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.38);opacity:0;pointer-events:none;transition:.25s}.drawer-backdrop.open{opacity:1;pointer-events:auto}.drawer{position:fixed;z-index:31;top:18px;right:18px;bottom:18px;width:min(600px,48vw);border-radius:24px;padding:24px;overflow:auto;background:rgba(7,11,18,.91);transform:translateX(calc(100% + 34px));transition:transform .34s cubic-bezier(.2,.8,.2,1)}.drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;position:sticky;top:-24px;padding:24px 0 16px;background:linear-gradient(#0a0f17 72%,transparent);z-index:2}.drawer-head h2{font:600 30px Space Grotesk;margin:7px 0 0;letter-spacing:-.04em}.section-label{font:500 9px DM Mono;color:#8996a6;letter-spacing:.14em;margin:20px 0 10px}.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.feature-card,.country-card{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.024);padding:15px;cursor:pointer}.feature-card:hover,.country-card:hover{border-color:rgba(52,153,210,.2);background:rgba(52,153,210,.04)}.feature-card b,.country-card b{font-size:12px}.feature-card p,.country-card p{font-size:9px;color:var(--muted);line-height:1.5;margin:6px 0 0}.country-card{display:flex;justify-content:space-between;gap:12px}.country-card span{font:500 9px DM Mono;color:var(--cyan)}.result-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;padding:10px 3px;border-bottom:1px solid var(--line2);cursor:pointer}.result-row:hover{background:rgba(255,255,255,.025)}.result-row b{font-size:12px}.result-row small{display:block;color:var(--muted);font-size:9px;margin-top:4px}.result-play{font:500 8px DM Mono;color:var(--cyan);border:1px solid rgba(52,153,210,.2);padding:6px 8px;border-radius:999px}.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.filter-grid label{display:grid;gap:6px;font:500 9px DM Mono;color:#93a0b0}.filter-grid select,.filter-grid input[type="text"]{height:40px;border:1px solid var(--line);border-radius:10px;background:#0b111a;color:#e9eef5;padding:0 10px}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line2)}.toggle-row b{font-size:11px}.toggle-row small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.switch{width:42px;height:24px;border-radius:999px;background:rgba(255,255,255,.08);padding:3px;cursor:pointer;border:1px solid var(--line)}.switch i{display:block;width:16px;height:16px;border-radius:50%;background:#8190a0;transition:.2s}.switch.on{background:rgba(52,153,210,.1);border-color:rgba(52,153,210,.25)}.switch.on i{transform:translateX(18px);background:var(--cyan)}.code-box{display:flex;gap:8px;margin-top:10px}.code-box input{flex:1;height:40px;border:1px solid var(--line);border-radius:10px;background:#0a1018;color:#dce4ed;padding:0 10px;font:400 9px DM Mono}.code-box button{height:40px;border:1px solid rgba(52,153,210,.22);border-radius:10px;background:rgba(52,153,210,.07);cursor:pointer;padding:0 12px}.status-toast{position:fixed;z-index:60;top:110px;left:50%;transform:translate(-50%,-16px);opacity:0;pointer-events:none;border:1px solid var(--line);background:rgba(7,11,18,.9);backdrop-filter:blur(18px);padding:10px 14px;border-radius:999px;color:#d9e2eb;font:500 9px DM Mono;transition:.28s}.status-toast.show{opacity:1;transform:translate(-50%,0)}
.boot-overlay{position:fixed;z-index:90;inset:0;background:radial-gradient(circle at 50% 45%,#101927 0,#05080e 52%,#030509 100%);display:flex;align-items:center;justify-content:center;gap:18px;transition:opacity .5s,visibility .5s}.boot-overlay.done{opacity:0;visibility:hidden}.boot-orbit{position:relative;width:58px;height:58px;display:grid;place-items:center}.boot-orbit i,.boot-orbit b{position:absolute;border-radius:50%}.boot-orbit i{border:1px solid var(--cyan);animation:spin 2.5s linear infinite}.boot-orbit i:first-child{width:58px;height:28px;transform:rotate(23deg)}.boot-orbit i:nth-child(2){width:30px;height:58px;transform:rotate(-30deg);animation-direction:reverse}.boot-orbit b{width:12px;height:12px;background:var(--cyan);box-shadow:0 0 22px rgba(52,153,210,.9)}.boot-overlay strong{font:600 16px Space Grotesk;letter-spacing:.22em}.boot-overlay span{display:block;margin-top:6px;color:var(--muted);font-size:10px;max-width:300px}.error-note{margin:12px 0;padding:12px;border:1px solid rgba(255,120,151,.2);background:rgba(255,120,151,.06);border-radius:12px;color:#e7b7c4;font-size:9px;line-height:1.55}
@media(max-width:1100px){.topbar{grid-template-columns:190px 1fr auto}.directory-stat{display:none}.hero-copy{left:108px;width:330px}.command{width:365px}.player{grid-template-columns:270px 120px 1fr}.player-tools{display:none}}
@media(max-width:820px){.topbar{top:10px;left:10px;right:10px;height:62px;grid-template-columns:44px 1fr 42px;padding:0 8px}.brand-copy,.top-actions .icon-btn:not(#settings-btn),.search-status,.search-wrap kbd{display:none}.brand-orbit{width:34px;height:34px}.search-wrap{height:40px}.rail{left:10px;right:10px;top:auto;bottom:10px;width:auto;height:64px;flex-direction:row;border-radius:16px;padding:5px;z-index:26}.rail-btn{flex:1;height:52px}.rail-spacer,.rail-btn[data-view="countries"]{display:none}.hero-copy{left:18px;top:92px;width:80vw}.hero-copy h1{font-size:42px}.hero-copy p{font-size:12px;max-width:320px}.interaction-hints{display:none}.command{top:auto;left:10px;right:10px;bottom:80px;width:auto;min-width:0;height:47vh;border-radius:20px;padding:16px}.command-head h2{font-size:21px}.quick-grid{display:none}.station-list{height:calc(100% - 153px)}.player{left:14px;right:14px;bottom:84px;height:66px;z-index:25;transform:translateY(calc(-47vh - 10px));grid-template-columns:1fr auto;padding:0 12px}.wave-shell,.player-tools{display:none}.player-station .station-art{width:39px;height:39px}.globe-chip{display:none}.drawer{inset:10px;width:auto;border-radius:20px;padding:20px}.drawer-head{top:-20px;padding-top:20px}.card-grid,.filter-grid{grid-template-columns:1fr}.hero-actions{flex-wrap:wrap}.hero-copy.hidden{display:none}}
@media(max-width:520px){.rail-btn small{font-size:8px}.rail-btn[data-view="history"]{display:none}.hero-copy h1{font-size:38px}.command{height:49vh}.player{transform:translateY(calc(-49vh - 10px))}.search-wrap input{font-size:11px}.station-main span{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}


/* --------------------------------------------------------------------------
   v6 professional rendering + interface refinement
   -------------------------------------------------------------------------- */
:root{--glass:rgba(7,12,20,.58);--glass2:rgba(7,12,20,.86);--muted:#9aa8b8;--line:rgba(255,255,255,.095);--shadow:0 24px 80px rgba(0,0,0,.38)}
.app-shell{background:radial-gradient(circle at 50% 43%,#0b1724 0,#07101a 29%,#03060b 72%)}
.ambient-grid{opacity:.055;background-size:112px 112px}.grain{opacity:.014}.glass{background:linear-gradient(180deg,rgba(13,20,30,.69),rgba(5,9,15,.56));backdrop-filter:blur(20px) saturate(118%);-webkit-backdrop-filter:blur(20px) saturate(118%)}
.topbar{height:76px;border-radius:20px;padding:0 18px;box-shadow:inset 0 1px rgba(255,255,255,.04),0 18px 70px rgba(0,0,0,.26)}
.brand-copy strong{font-size:16px;letter-spacing:.22em}.brand-copy small{font-size:10px;margin-top:5px}.search-wrap{height:48px;border-radius:14px;background:rgba(255,255,255,.028)}.search-wrap input{font-size:14px}.search-status{font-size:9px}.directory-stat strong{font-size:12px}.directory-stat small{font-size:9px}.icon-btn{width:42px;height:42px}
.rail{top:110px;bottom:112px;width:78px;border-radius:21px;padding:10px 7px;background:linear-gradient(180deg,rgba(12,19,28,.60),rgba(5,9,15,.50))}.rail-btn{height:66px}.rail-btn span{font-size:19px}.rail-btn small{font-size:10px}.rail-btn.active{background:rgba(52,153,210,.055);border-color:rgba(52,153,210,.14)}
.hero-copy{top:160px;left:126px;width:min(500px,35vw)}.hero-copy h1{font-size:clamp(48px,4.55vw,76px);line-height:.94;margin:19px 0}.hero-copy p{font-size:14px;line-height:1.68;max-width:410px;color:#aebac8}.eyebrow{font-size:10px}.primary-cta,.ghost-cta{height:46px;border-radius:13px;padding:0 16px}.interaction-hints{font-size:9px;margin-top:17px}
.command{top:112px;bottom:112px;width:min(430px,32vw);min-width:365px;padding:22px;border-radius:24px;background:linear-gradient(180deg,rgba(11,17,26,.77),rgba(5,9,15,.66))}.command-head h2{font-size:29px}.command-head p{font-size:12px;line-height:1.45}.current-signal{margin-top:19px;border-radius:18px;padding:13px;grid-template-columns:62px 1fr 40px;background:radial-gradient(circle at 13% 50%,rgba(52,153,210,.065),rgba(255,255,255,.018) 42%,rgba(255,255,255,.010))}.signal-orb{width:56px;height:56px}.signal-state{font-size:9px}.signal-copy h3{font-size:15px;margin-top:6px}.signal-copy p{font-size:11px;margin-top:4px}.quick-grid{gap:9px;margin:13px 0 19px}.quick-grid button{height:72px;padding:11px;border-radius:14px}.quick-grid b{font-size:11px}.quick-grid small{font-size:9px;line-height:1.3}.list-head strong{font-size:12px}.list-head small{font-size:9px}.mini-btn{font-size:9px;padding:8px 9px}.station-list{height:calc(100% - 312px)}.station-row{grid-template-columns:42px minmax(0,1fr) auto;gap:11px;padding:10px 9px;border-radius:13px}.favicon{width:40px;height:40px;border-radius:11px}.station-row b{font-size:12px}.station-row small{font-size:9px;margin-top:4px}.quality,.quality strong{font-size:9px}.station-row:hover{background:rgba(255,255,255,.027)}.station-row.active{background:rgba(52,153,210,.045)}
.globe-chip{bottom:122px;height:38px;padding:0 13px;gap:9px;background:rgba(6,11,17,.64)}.globe-chip b{font-size:9px}.globe-chip small{font-size:9px}
.player{height:84px;bottom:17px;border-radius:20px;grid-template-columns:minmax(270px,390px) 150px 1fr minmax(205px,290px);padding:0 18px;background:linear-gradient(180deg,rgba(12,19,28,.76),rgba(5,9,15,.67))}.station-art{width:48px;height:48px}.station-main small{font-size:8px}.station-main strong{font-size:13px}.station-main span{font-size:9px}.transport .play-btn{width:46px;height:46px}.latency{font-size:8px}
.drawer{background:rgba(6,10,16,.93)}.drawer-head h2{font-size:32px}.feature-card b,.country-card b{font-size:13px}.feature-card p,.country-card p{font-size:10px}.result-row b{font-size:13px}.result-row small{font-size:10px}
.signal-tooltip{position:fixed;z-index:28;left:0;top:0;width:min(260px,calc(100vw - 32px));padding:11px 13px;border:1px solid rgba(255,255,255,.11);border-radius:13px;background:rgba(5,10,16,.88);box-shadow:0 16px 50px rgba(0,0,0,.34);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);pointer-events:none;opacity:0;transform:translate3d(-999px,-999px,0);transition:opacity .12s ease}.signal-tooltip.show{opacity:1}.signal-tooltip span{display:block;font:500 8px DM Mono;color:var(--cyan);letter-spacing:.12em}.signal-tooltip strong{display:block;margin-top:4px;font:600 12px/1.25 Space Grotesk,Inter;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.signal-tooltip small{display:block;margin-top:4px;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){.command{width:380px}.hero-copy{left:112px}.player{grid-template-columns:285px 120px 1fr}}
@media(max-width:820px){.topbar{height:64px}.search-wrap{height:42px}.hero-copy{top:96px}.hero-copy h1{font-size:44px}.hero-copy p{font-size:13px}.command{height:47vh;padding:17px}.command-head h2{font-size:23px}.station-row b{font-size:12px}.station-row small{font-size:10px}.signal-tooltip{display:none}.player{height:68px}.rail-btn small{font-size:9px}}
@media(max-width:520px){.hero-copy h1{font-size:39px}.search-wrap input{font-size:12px}}

/* --------------------------------------------------------------------------
   v6.5 SOMEWHERE — expert finish
   Product direction: editorial, spatial, quiet. Earth is the hero.
   -------------------------------------------------------------------------- */
:root{
  --bg:#07090d;--bg2:#0c1016;--glass:rgba(10,13,18,.58);--glass2:rgba(9,12,17,.88);
  --line:rgba(255,255,255,.105);--line2:rgba(255,255,255,.055);--text:#f2f5f7;--muted:#aaa9a7;--muted2:#74777d;
  --cyan:#3499d2;--green:#65c7f3;--violet:#d68cff;--amber:#3499d2;--red:#f08096;
  --shadow:0 28px 90px rgba(0,0,0,.42)
}
html,body{background:var(--bg)}
.app-shell{background:radial-gradient(circle at 52% 43%,#121820 0,#0a0f15 30%,#05070a 74%)}
.ambient-grid{opacity:.022;background-size:128px 128px;background-image:linear-gradient(rgba(52,153,210,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(52,153,210,.035) 1px,transparent 1px)}
.grain{opacity:.010}
.glass{background:linear-gradient(180deg,rgba(16,20,26,.70),rgba(7,9,13,.56));border-color:rgba(255,255,255,.095);box-shadow:inset 0 1px rgba(255,255,255,.035),0 24px 75px rgba(0,0,0,.33);backdrop-filter:blur(22px) saturate(108%);-webkit-backdrop-filter:blur(22px) saturate(108%)}
button{transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,opacity .16s ease}
button:active{transform:scale(.975)}
button:focus-visible,input:focus-visible,select:focus-visible{outline-color:rgba(52,153,210,.72)}

/* Brand becomes a restrained listening/radar glyph instead of a sci-fi atom. */
.brand{gap:13px}.brand-orbit{width:40px;height:40px}
.brand-orbit i{border-color:rgba(52,153,210,.58);transform:none!important}
.brand-orbit i:nth-child(1){width:33px;height:33px;opacity:.22}
.brand-orbit i:nth-child(2){width:21px;height:21px;opacity:.40}
.brand-orbit i:nth-child(3){width:9px;height:9px;opacity:.82;background:rgba(52,153,210,.11)}
.brand-orbit b{width:6px;height:6px;left:27px;top:9px;background:#fff4e8;box-shadow:0 0 15px rgba(52,153,210,.7)}
.brand-copy strong{font-size:15px;letter-spacing:.15em;color:#f7f3ee}
.brand-copy small{font-size:9px;letter-spacing:.13em;color:#85878c}

.topbar{top:16px;left:16px;right:16px;height:72px;border-radius:17px;grid-template-columns:260px minmax(340px,680px) 1fr;padding:0 15px}
.search-wrap{height:45px;border-radius:12px;background:rgba(255,255,255,.026)}
.search-wrap:focus-within{border-color:rgba(52,153,210,.34);box-shadow:0 0 0 4px rgba(52,153,210,.035)}
.search-glyph{color:#85878d;font-size:21px}.search-wrap input{font-size:13px;letter-spacing:-.01em}.search-wrap input::placeholder{color:#777a80}
.search-status{color:#7ec9ef}.directory-stat small{text-transform:none;letter-spacing:.02em}.live-dot{background:#93ddb1;box-shadow:0 0 12px rgba(101,199,243,.55)}
.icon-btn{border-radius:11px;background:rgba(255,255,255,.025)}.icon-btn:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16)}

.rail{left:16px;top:102px;bottom:106px;width:72px;border-radius:17px;background:linear-gradient(180deg,rgba(13,17,22,.62),rgba(7,9,13,.50));padding:8px 6px}
.rail-btn{height:62px;border-radius:12px;gap:4px}.rail-btn span{font-size:17px;opacity:.82}.rail-btn small{font-size:9px;color:inherit}
.rail-btn:hover{background:rgba(255,255,255,.03)}.rail-btn.active{color:#b8dff3;background:rgba(52,153,210,.065);border-color:rgba(52,153,210,.13)}

.hero-copy{left:116px;top:154px;width:min(510px,36vw)}
.eyebrow{font-size:9px;letter-spacing:.17em;color:#98999d}.hero-copy .eyebrow .live-dot{margin-right:7px}
.hero-copy h1{font-size:clamp(50px,4.7vw,82px);line-height:.91;letter-spacing:-.06em;margin:19px 0 21px;font-weight:560;max-width:500px}
.hero-copy h1 em{color:#3499d2;-webkit-text-stroke:0;font-weight:500}
.hero-copy p{max-width:420px;font-size:14px;line-height:1.7;color:#b2b0ad;letter-spacing:-.008em}
.primary-cta,.ghost-cta{height:45px;border-radius:11px;padding:0 16px}
.primary-cta{border-color:rgba(52,153,210,.25);background:#3499d2;color:#17100b;box-shadow:0 12px 30px rgba(52,153,210,.11);font-weight:650}
.primary-cta:hover{background:#5dafdc}.ghost-cta{background:rgba(255,255,255,.018);color:#c7c5c1}.ghost-cta:hover{background:rgba(255,255,255,.045)}
.interaction-hints{font-size:8px;letter-spacing:.06em;color:#696c72}.interaction-hints span{color:#a5a5a5}

.command{top:102px;right:16px;bottom:106px;width:min(414px,31vw);min-width:360px;padding:20px;border-radius:19px;background:linear-gradient(180deg,rgba(14,18,23,.76),rgba(6,8,12,.68))}
.command-head h2{font-size:28px;letter-spacing:-.045em;margin-top:7px}.command-head p{font-size:11px;color:#939499}
.current-signal{margin-top:17px;border-radius:15px;padding:12px;background:linear-gradient(120deg,rgba(52,153,210,.06),rgba(255,255,255,.014) 42%,rgba(255,255,255,.008));grid-template-columns:56px 1fr 38px}
.signal-orb{width:52px;height:52px}.signal-orb i{border-color:rgba(52,153,210,.28)}.signal-orb b{width:11px;height:11px;background:#3499d2;box-shadow:0 0 18px rgba(52,153,210,.55)}
.signal-state{color:#7ec9ef;font-size:8px}.signal-copy h3{font-size:14px;letter-spacing:-.015em}.signal-copy p{font-size:10px;color:#919398}
.heart-btn{border-radius:10px}.heart-btn.active{color:#f18da4;border-color:rgba(241,141,164,.25);background:rgba(241,141,164,.07)}
.quick-grid{gap:7px;margin:11px 0 18px}.quick-grid button{height:67px;border-radius:12px;padding:10px;background:rgba(255,255,255,.012)}.quick-grid button:hover{background:rgba(52,153,210,.04);border-color:rgba(52,153,210,.13)}.quick-grid span{color:#e8b68f}.quick-grid b{font-size:10px}.quick-grid small{font-size:8px;color:#83858a}
.list-head strong{font-size:11px;font-weight:600}.list-head small{color:#818389}.mini-btn{border-radius:8px;letter-spacing:.06em}.mini-btn:hover{border-color:rgba(52,153,210,.18);color:#b9d8e8}
.station-row{padding:9px 8px;border-radius:11px}.station-row:hover{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.075)}.station-row.active{background:rgba(52,153,210,.052);border-color:rgba(52,153,210,.15)}
.favicon{border-radius:9px;background:linear-gradient(145deg,rgba(52,153,210,.10),rgba(214,140,255,.05))}.quality strong{color:#8fc4df}

.globe-chip{bottom:119px;height:35px;border-radius:999px;background:rgba(8,10,14,.58);padding:0 12px}.globe-chip b,.globe-chip small{font-size:8px}.globe-chip b{letter-spacing:.08em}
.signal-tooltip{border-radius:11px;background:rgba(8,10,14,.91);border-color:rgba(255,255,255,.10);box-shadow:0 16px 48px rgba(0,0,0,.30);padding:10px 12px}.signal-tooltip span{color:#87c8e9}.signal-tooltip strong{font-size:12px}.signal-tooltip small{font-size:9px;color:#929398}

.player{left:16px;right:16px;bottom:16px;height:78px;border-radius:17px;grid-template-columns:minmax(270px,380px) 140px 1fr minmax(195px,270px);padding:0 16px;background:linear-gradient(180deg,rgba(15,19,24,.76),rgba(7,9,13,.70))}
.station-art{width:46px;height:46px;border-radius:11px;background:linear-gradient(145deg,rgba(52,153,210,.12),rgba(214,140,255,.05))}.station-main strong{font-size:12px;letter-spacing:-.01em}.station-main small{color:#8e9094}.station-main span{color:#777a80}
.transport .play-btn{width:44px;height:44px;border-color:rgba(52,153,210,.28);background:rgba(52,153,210,.10);box-shadow:0 8px 28px rgba(52,153,210,.07)}.transport .play-btn:hover{background:rgba(52,153,210,.16)}
.wave-center{background:linear-gradient(transparent,rgba(52,153,210,.46),transparent)}.latency{color:#7ec9ef;border-color:rgba(101,199,243,.17);background:rgba(101,199,243,.04)}

.drawer{border-radius:20px;background:rgba(8,10,14,.95)}.drawer-head h2{font-size:31px;letter-spacing:-.045em}.feature-card,.country-card{border-radius:13px;background:rgba(255,255,255,.016)}.feature-card:hover,.country-card:hover{border-color:rgba(52,153,210,.16);background:rgba(52,153,210,.025)}.country-card span,.result-play{color:#8bc7e6}.result-play{border-color:rgba(52,153,210,.18)}
.switch.on{background:rgba(52,153,210,.09);border-color:rgba(52,153,210,.22)}.switch.on i{background:#3499d2}.code-box button{border-color:rgba(52,153,210,.18);background:rgba(52,153,210,.055)}
.status-toast{background:rgba(8,10,14,.92);font-size:9px;border-color:rgba(255,255,255,.10)}
.boot-overlay{background:radial-gradient(circle at 50% 45%,#15191f 0,#080a0e 54%,#050609 100%)}.boot-orbit i{border-color:rgba(52,153,210,.62)}.boot-orbit b{background:#3499d2;box-shadow:0 0 20px rgba(52,153,210,.62)}.boot-overlay strong{letter-spacing:.16em;color:#f5f1ec}.boot-overlay span{color:#929399}

@media(max-width:1100px){.topbar{grid-template-columns:205px 1fr auto}.command{width:380px}.hero-copy{left:108px}.player{grid-template-columns:280px 118px 1fr}}
@media(max-width:820px){.topbar{top:10px;left:10px;right:10px}.brand-orbit{width:34px;height:34px}.brand-orbit i:nth-child(1){width:29px;height:29px}.brand-orbit i:nth-child(2){width:18px;height:18px}.brand-orbit b{left:23px;top:7px}.hero-copy{left:18px;top:93px;width:84vw}.hero-copy h1{font-size:44px;max-width:360px}.hero-copy p{font-size:13px;max-width:340px}.command{bottom:80px;height:47vh}.player{left:12px;right:12px;bottom:84px;height:66px}.rail{left:10px;right:10px;bottom:10px}.primary-cta,.ghost-cta{height:43px}}
@media(max-width:520px){.hero-copy h1{font-size:39px}.hero-copy p{font-size:12px}.station-row{padding:8px 7px}}

/* Finish the old orbit motifs into a quieter listening/radar language. */
@keyframes somewherePulse{0%,100%{opacity:.28;transform:scale(.94)}50%{opacity:.72;transform:scale(1.03)}}
.boot-orbit i,.signal-orb i{animation:somewherePulse 2.8s ease-in-out infinite!important;transform:none!important;border-radius:50%}
.boot-orbit i:first-child{width:56px;height:56px;opacity:.24}
.boot-orbit i:nth-child(2){width:34px;height:34px;opacity:.46;animation-delay:.35s!important}
.boot-orbit b{width:8px;height:8px;left:38px;top:12px;background:#fff1e5;box-shadow:0 0 17px rgba(52,153,210,.62)}
.signal-orb i:first-child{width:44px;height:44px;opacity:.22}
.signal-orb i:nth-child(2){width:27px;height:27px;opacity:.42;animation-delay:.4s!important}
.signal-orb b{width:10px;height:10px;left:33px;top:10px;background:#fff1e5;box-shadow:0 0 16px rgba(52,153,210,.55)}

/* --------------------------------------------------------------------------
   v6.6 VIBES / connect.vin product finish
   Visual idea: a live engineering artifact, not a generic streaming app.
   -------------------------------------------------------------------------- */
:root{
  --bg:#060606;--bg2:#0b0b0c;--glass:rgba(10,10,11,.68);--glass2:rgba(8,8,9,.90);
  --line:rgba(242,240,234,.13);--line2:rgba(242,240,234,.065);--text:#f2f5f7;--muted:#9b9a95;--muted2:#666762;
  --cyan:#3499d2;--green:#65c7f3;--violet:#f2f5f7;--amber:#3499d2;--red:#ff6f7c;
  --connect:#3499d2;--paper:#f2f5f7;--ink:#11100f;--shadow:0 28px 90px rgba(0,0,0,.48)
}
html,body{background:#060606;color:var(--paper)}
.app-shell{background:
  radial-gradient(circle at 53% 43%,rgba(25,34,45,.92) 0,rgba(11,15,20,.90) 29%,rgba(6,7,8,.97) 67%,#050505 100%)}
.ambient-grid{opacity:.018;background-size:116px 116px;background-image:linear-gradient(rgba(52,153,210,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(52,153,210,.07) 1px,transparent 1px)}
.grain{opacity:.014}
.glass{background:linear-gradient(180deg,rgba(15,15,16,.72),rgba(7,7,8,.60));border-color:rgba(242,240,234,.115);box-shadow:inset 0 1px rgba(255,255,255,.038),0 28px 80px rgba(0,0,0,.38);backdrop-filter:blur(22px) saturate(105%);-webkit-backdrop-filter:blur(22px) saturate(105%)}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid rgba(52,153,210,.78);outline-offset:3px}

/* connect.vin-style brand lockup: product first, maker always visible. */
.topbar{grid-template-columns:230px minmax(330px,680px) 1fr;height:70px;border-radius:15px;top:15px;left:15px;right:15px}
.brand{gap:12px}.brand-orbit{width:38px;height:38px}
.brand-orbit i{border-color:rgba(242,240,234,.46);transform:none!important}
.brand-orbit i:nth-child(1){width:34px;height:34px;opacity:.16}
.brand-orbit i:nth-child(2){width:22px;height:22px;opacity:.34}
.brand-orbit i:nth-child(3){width:8px;height:8px;background:var(--connect);border:0;opacity:1;box-shadow:0 0 18px rgba(52,153,210,.50)}
.brand-orbit b{width:6px;height:6px;left:26px;top:7px;background:var(--paper);box-shadow:none}
.brand-copy strong{font:600 16px/1 Space Grotesk,Inter,sans-serif;letter-spacing:.13em;color:var(--paper)}
.brand-copy small{margin-top:5px;font:500 8px/1 DM Mono,monospace;letter-spacing:.16em;color:#777772}
.creator-link{display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:1px solid rgba(242,240,234,.08);border-radius:999px;color:#858680;text-decoration:none;font:500 9px DM Mono,monospace;white-space:nowrap;transition:.18s ease}
.creator-link span{color:#686963}.creator-link strong{color:#ddd9d1;font-weight:500}.creator-link b{color:var(--connect);font-weight:500}.creator-link:hover{border-color:rgba(52,153,210,.23);background:rgba(52,153,210,.045);transform:translateY(-1px)}
.top-actions{gap:9px}.directory-stat{padding-right:11px}

.search-wrap{height:43px;border-radius:11px;background:rgba(242,240,234,.025)}
.search-wrap:focus-within{border-color:rgba(52,153,210,.32);box-shadow:0 0 0 4px rgba(52,153,210,.035)}
.search-glyph{color:#7f807b}.search-wrap input{font-size:13px}.search-wrap input::placeholder{color:#6f706c}.search-status{color:#65c7f3}
.live-dot{background:#65c7f3;box-shadow:0 0 12px rgba(101,199,243,.48)}
.icon-btn{border-radius:10px;background:rgba(242,240,234,.02)}

.rail{left:15px;top:98px;bottom:104px;width:70px;border-radius:15px;background:linear-gradient(180deg,rgba(12,12,13,.66),rgba(7,7,8,.54))}
.rail-btn{height:61px;border-radius:10px}.rail-btn span{font-size:16px}.rail-btn small{font:500 8px DM Mono,monospace;letter-spacing:.02em}
.rail-btn.active{color:#fff0e9;background:rgba(52,153,210,.075);border-color:rgba(52,153,210,.15)}
.rail-btn:hover{background:rgba(242,240,234,.03);color:#ece9e2}

/* Editorial hero — curiosity before controls. */
.hero-copy{left:112px;top:137px;width:min(590px,42vw)}
.artifact-label{display:flex;align-items:center;gap:8px;margin-bottom:15px;color:#777873;font:500 8px DM Mono,monospace;letter-spacing:.13em;pointer-events:auto}
.artifact-label span{color:var(--connect)}.artifact-label b{font-weight:400;color:#4e4f4b}
.eyebrow{font-size:9px;letter-spacing:.16em;color:#a1a19c}
.hero-copy h1{max-width:590px;font-size:clamp(48px,4.65vw,78px);line-height:.94;letter-spacing:-.058em;margin:17px 0 19px;font-weight:560}
.hero-copy h1 em{display:block;margin-top:4px;color:var(--connect);-webkit-text-stroke:0;font-style:normal;font-weight:500}
.hero-copy p{max-width:455px;color:#aaa9a4;font-size:14px;line-height:1.68;letter-spacing:-.008em}
.primary-cta,.ghost-cta{height:44px;border-radius:10px;padding:0 15px}
.primary-cta{border-color:var(--connect);background:var(--connect);color:#160b08;box-shadow:0 11px 30px rgba(52,153,210,.13);font-weight:650}
.primary-cta:hover{background:#55afe0}.ghost-cta{border-color:rgba(242,240,234,.11);background:rgba(242,240,234,.018);color:#cfcdc6}.ghost-cta:hover{border-color:rgba(242,240,234,.19);background:rgba(242,240,234,.04)}

.world-pulse{display:flex;gap:0;margin-top:20px;width:max-content;max-width:100%;pointer-events:auto;border-top:1px solid rgba(242,240,234,.10);border-bottom:1px solid rgba(242,240,234,.07)}
.world-pulse div{min-width:105px;padding:11px 18px 11px 0;margin-right:18px;position:relative}
.world-pulse div:not(:last-child):after{content:"";position:absolute;right:0;top:12px;bottom:12px;width:1px;background:rgba(242,240,234,.07)}
.world-pulse strong{display:block;color:#f0eee7;font:500 17px/1 Space Grotesk,Inter,sans-serif;letter-spacing:-.03em}
.world-pulse small{display:block;margin-top:5px;color:#6f706b;font:500 8px DM Mono,monospace;letter-spacing:.07em;text-transform:uppercase}
.interaction-hints{margin-top:13px;font-size:8px;color:#5f605c}.interaction-hints span{color:#a2a29d}

/* Context panel is a live instrument, not a floating dashboard. */
.command{top:98px;right:15px;bottom:104px;width:min(408px,30.5vw);border-radius:16px;background:linear-gradient(180deg,rgba(13,13,14,.78),rgba(6,6,7,.71));padding:19px}
.command-head h2{font-size:29px;letter-spacing:-.05em}.command-head p{color:#8d8d89}
.current-signal{border-radius:13px;background:linear-gradient(116deg,rgba(52,153,210,.065),rgba(242,240,234,.012) 46%,transparent);border-color:rgba(242,240,234,.09)}
.signal-orb i{border-color:rgba(242,240,234,.22)}.signal-orb b{background:var(--connect);box-shadow:0 0 15px rgba(52,153,210,.42)}
.signal-state{color:#65c7f3}.quick-grid button{border-radius:10px;background:rgba(242,240,234,.01)}.quick-grid button:hover{background:rgba(52,153,210,.035);border-color:rgba(52,153,210,.13)}.quick-grid span{color:#6dbce5}
.station-row{border-radius:9px}.station-row.active{background:rgba(52,153,210,.052);border-color:rgba(52,153,210,.15)}
.favicon{border-radius:8px;background:linear-gradient(145deg,rgba(52,153,210,.11),rgba(242,240,234,.025))}.quality strong{color:#91cbe8}

.globe-chip{bottom:116px;height:34px;background:rgba(7,7,8,.64);border-radius:999px}.globe-chip b{color:#e9e7df}.globe-chip small{color:#777873}
.signal-tooltip{background:rgba(7,7,8,.93);border-color:rgba(242,240,234,.11);box-shadow:0 16px 50px rgba(0,0,0,.40)}.signal-tooltip span{color:var(--connect)}

.player{left:15px;right:15px;bottom:15px;height:76px;border-radius:15px;background:linear-gradient(180deg,rgba(13,13,14,.80),rgba(6,6,7,.75))}
.station-art{border-radius:9px;background:linear-gradient(145deg,rgba(52,153,210,.13),rgba(242,240,234,.025))}
.transport .play-btn{border-color:rgba(52,153,210,.30);background:var(--connect);color:#170b07;box-shadow:0 8px 25px rgba(52,153,210,.10)}.transport .play-btn:hover{background:#55afe0}
.wave-center{background:linear-gradient(transparent,rgba(52,153,210,.42),transparent)}
.latency{color:#65c7f3;border-color:rgba(101,199,243,.17)}

.drawer{background:rgba(7,7,8,.96);border-radius:16px}.drawer-head h2{font-size:32px;letter-spacing:-.05em}
.feature-card,.country-card{border-radius:10px;background:rgba(242,240,234,.012)}.feature-card:hover,.country-card:hover{border-color:rgba(52,153,210,.15);background:rgba(52,153,210,.025)}.country-card span,.result-play{color:#6dbce5}
.section-label{color:#777873;letter-spacing:.13em}.switch.on{background:rgba(52,153,210,.08);border-color:rgba(52,153,210,.22)}.switch.on i{background:var(--connect)}

/* Boot is explicitly presented as a connect.vin artifact. */
.boot-overlay{background:radial-gradient(circle at 50% 45%,#151515 0,#090909 54%,#050505 100%)}
.boot-orbit i{border-color:rgba(242,240,234,.35)}.boot-orbit b{background:var(--connect);box-shadow:0 0 18px rgba(52,153,210,.52)}
.boot-overlay strong{letter-spacing:.14em;color:var(--paper)}.boot-overlay span{color:#8d8d88}.boot-overlay small{display:block;margin-top:9px;color:#555651;font:500 8px DM Mono,monospace;letter-spacing:.15em}
@keyframes vibesPulse{0%,100%{opacity:.24;transform:scale(.94)}50%{opacity:.62;transform:scale(1.025)}}
.boot-orbit i,.signal-orb i{animation:vibesPulse 2.8s ease-in-out infinite!important;transform:none!important;border-radius:50%}

@media(max-width:1180px){.creator-link{display:none}.topbar{grid-template-columns:215px minmax(300px,1fr) auto}.hero-copy{width:min(520px,39vw)}.command{width:382px}}
@media(max-width:820px){
  .topbar{grid-template-columns:auto 1fr auto}.brand-copy small{display:none}.brand-copy strong{font-size:14px}.hero-copy{left:18px;top:96px;width:88vw}.artifact-label{margin-bottom:11px}.hero-copy h1{font-size:43px;max-width:420px}.hero-copy p{font-size:13px;max-width:365px}.world-pulse{margin-top:14px}.world-pulse div{min-width:82px;padding-right:12px;margin-right:12px}.world-pulse strong{font-size:15px}.interaction-hints{display:none}
}
@media(max-width:520px){.hero-copy h1{font-size:37px;line-height:.96}.hero-copy p{font-size:12px}.world-pulse small{font-size:7px}.world-pulse div{min-width:72px}.world-pulse strong{font-size:14px}.artifact-label{font-size:7px}}


/* --------------------------------------------------------------------------
   v6.7 CONNECT.VIN palette pass
   Reference palette sampled from the supplied connect.vin mark:
   black + soft white + electric blue.
   -------------------------------------------------------------------------- */
:root{
  --bg:#000102;--bg2:#03070a;
  --glass:rgba(3,7,10,.72);--glass2:rgba(2,5,8,.92);
  --line:rgba(239,245,249,.12);--line2:rgba(239,245,249,.062);
  --text:#f2f5f7;--muted:#8e9aa2;--muted2:#5e6970;
  --cyan:#3499d2;--connect:#3499d2;--green:#65c7f3;--violet:#dceaf2;--amber:#3499d2;
  --paper:#f2f5f7;--ink:#061017;--shadow:0 28px 90px rgba(0,0,0,.54)
}
html,body{background:#000;color:var(--paper)}
.app-shell{background:
  radial-gradient(circle at 53% 43%,rgba(13,31,43,.96) 0,rgba(5,13,19,.95) 30%,rgba(1,5,8,.99) 68%,#000 100%)}
.ambient-grid{
  opacity:.022;
  background-image:
    linear-gradient(rgba(52,153,210,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(52,153,210,.055) 1px,transparent 1px)
}
.glass{
  background:linear-gradient(180deg,rgba(7,13,18,.74),rgba(1,4,7,.66));
  border-color:rgba(239,245,249,.105);
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 28px 82px rgba(0,0,0,.46)
}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{
  outline-color:rgba(52,153,210,.82)
}
.brand-orbit i{border-color:rgba(242,245,247,.44)}
.brand-orbit i:nth-child(3){background:#3499d2;box-shadow:0 0 18px rgba(52,153,210,.55)}
.brand-orbit b{background:#f2f5f7}
.brand-copy strong{color:#f2f5f7}
.brand-copy small{color:#77848c}
.brand-copy small .connect-domain{color:#dfe5e8}
.brand-copy small .vin-accent{color:#3499d2}
.creator-link{border-color:rgba(239,245,249,.085);color:#7f8a91}
.creator-link strong{color:#e3e8eb}
.creator-link .vin-accent{color:#3499d2}
.creator-link b{color:#3499d2}
.creator-link:hover{border-color:rgba(52,153,210,.28);background:rgba(52,153,210,.055)}
.search-wrap{background:rgba(239,245,249,.022)}
.search-wrap:focus-within{border-color:rgba(52,153,210,.38);box-shadow:0 0 0 4px rgba(52,153,210,.045)}
.search-status,.live-dot,.signal-state,.latency{color:#65c7f3}
.live-dot{background:#65c7f3;box-shadow:0 0 12px rgba(101,199,243,.48)}
.rail-btn.active{color:#dff4ff;background:rgba(52,153,210,.085);border-color:rgba(52,153,210,.18)}
.artifact-label span,.hero-copy h1 em{color:#3499d2}
.primary-cta{border-color:#3499d2;background:#3499d2;color:#041018;box-shadow:0 12px 32px rgba(52,153,210,.16)}
.primary-cta:hover{background:#55afe0}
.world-pulse{border-color:rgba(239,245,249,.09)}
.world-pulse strong{color:#eef4f7}
.world-pulse small{color:#6e7b83}
.current-signal{background:linear-gradient(116deg,rgba(52,153,210,.075),rgba(239,245,249,.012) 46%,transparent)}
.signal-orb i{border-color:rgba(239,245,249,.22)}
.signal-orb b{background:#3499d2;box-shadow:0 0 17px rgba(52,153,210,.50)}
.quick-grid button:hover,.feature-card:hover,.country-card:hover{background:rgba(52,153,210,.04);border-color:rgba(52,153,210,.15)}
.quick-grid span,.country-card span,.result-play,.signal-tooltip span{color:#6dbce5}
.station-row.active{background:rgba(52,153,210,.06);border-color:rgba(52,153,210,.17)}
.favicon,.station-art{background:linear-gradient(145deg,rgba(52,153,210,.14),rgba(239,245,249,.025))}
.quality strong{color:#8fc9e8}
.transport .play-btn{border-color:rgba(52,153,210,.34);background:#3499d2;color:#031019;box-shadow:0 9px 28px rgba(52,153,210,.13)}
.transport .play-btn:hover{background:#55afe0}
.wave-center{background:linear-gradient(transparent,rgba(52,153,210,.48),transparent)}
.switch.on{background:rgba(52,153,210,.095);border-color:rgba(52,153,210,.24)}
.switch.on i{background:#3499d2}
.boot-overlay{background:radial-gradient(circle at 50% 45%,#0d1820 0,#03080b 55%,#000 100%)}
.boot-orbit i{border-color:rgba(239,245,249,.34)}
.boot-orbit b{background:#3499d2;box-shadow:0 0 19px rgba(52,153,210,.58)}
.boot-overlay strong{color:#f2f5f7}
.boot-overlay small{color:#5c6970}

/* --------------------------------------------------------------------------
   v6.7.2 — Headline-only typography adjustment
   Keep all left-side UI typography at the normal v6.7 scale. Only the hero
   question is intentionally smaller so it doesn't overpower the globe.
   -------------------------------------------------------------------------- */
@media (min-width:821px){
  .hero-copy h1{
    font-size:clamp(40px,3.75vw,62px);
    line-height:.96;
    max-width:540px;
  }
}
@media (max-width:820px){
  .hero-copy h1{font-size:36px;line-height:.98;max-width:380px}
}
@media (max-width:520px){
  .hero-copy h1{font-size:33px;line-height:1;max-width:340px}
}

/* ========================================================================== 
   v6.8 — Professional cross-device responsive system
   One final layout layer intentionally overrides the historical breakpoint
   experiments above. It uses dynamic viewport units, safe areas, robust touch
   targets, and explicit portrait/landscape compositions.
   ========================================================================== */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --edge:clamp(12px,1.15vw,18px);
  --topbar-h:70px;
  --player-h:76px;
  --rail-w:70px;
}
html,body{min-width:280px;min-height:100%;height:100%;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{position:fixed;inset:0}
.app-shell,#globe-stage,.ambient-grid,.grain{width:100%;height:100%;height:100dvh}
button,a,input,select{touch-action:manipulation}
button{-webkit-tap-highlight-color:transparent}
input[type="search"]{-webkit-appearance:none;appearance:none}
.station-list,.drawer{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}

/* Keep all desktop regions inside safe areas and let the center column shrink. */
.topbar{
  top:max(var(--edge),var(--safe-top));
  left:max(var(--edge),var(--safe-left));
  right:max(var(--edge),var(--safe-right));
  height:var(--topbar-h);
  grid-template-columns:minmax(176px,230px) minmax(220px,680px) minmax(0,1fr);
  min-width:0;
}
.topbar>*{min-width:0}
.search-wrap{min-width:0}
.top-actions{min-width:0}
.rail{
  left:max(var(--edge),var(--safe-left));
  top:calc(max(var(--edge),var(--safe-top)) + var(--topbar-h) + 13px);
  bottom:calc(max(var(--edge),var(--safe-bottom)) + var(--player-h) + 13px);
  width:var(--rail-w);
}
.command{
  top:calc(max(var(--edge),var(--safe-top)) + var(--topbar-h) + 13px);
  right:max(var(--edge),var(--safe-right));
  bottom:calc(max(var(--edge),var(--safe-bottom)) + var(--player-h) + 13px);
  width:clamp(340px,30.5vw,410px);
  min-width:0;
}
.player{
  left:max(var(--edge),var(--safe-left));
  right:max(var(--edge),var(--safe-right));
  bottom:max(var(--edge),var(--safe-bottom));
  height:var(--player-h);
  min-width:0;
  grid-template-columns:minmax(210px,360px) 132px minmax(100px,1fr) minmax(170px,260px);
}
.player>*{min-width:0}
.hero-copy{
  left:calc(max(var(--edge),var(--safe-left)) + var(--rail-w) + 36px);
  top:calc(max(var(--edge),var(--safe-top)) + var(--topbar-h) + 64px);
  width:min(510px,calc(100vw - 600px));
  max-height:calc(100dvh - var(--topbar-h) - var(--player-h) - 130px);
}
.hero-copy h1{font-size:clamp(38px,3.75vw,62px)}
.globe-chip{bottom:calc(max(var(--edge),var(--safe-bottom)) + var(--player-h) + 26px)}
.status-toast{top:calc(max(var(--edge),var(--safe-top)) + var(--topbar-h) + 20px);max-width:min(540px,calc(100vw - 24px));text-align:center}
.drawer{top:max(var(--edge),var(--safe-top));right:max(var(--edge),var(--safe-right));bottom:max(var(--edge),var(--safe-bottom));width:min(600px,calc(100vw - 2 * var(--edge)))}

/* Recoverable panel collapse. The old close control could hide the panel forever. */
.panel-toggle{
  position:fixed;z-index:23;
  right:max(var(--edge),var(--safe-right));
  top:50%;transform:translateY(-50%);
  width:54px;height:58px;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  cursor:pointer;color:#dce8ee;
}
.panel-toggle[hidden]{display:none!important}
.panel-toggle span{font-size:17px;color:#78c4ea}.panel-toggle small{font:500 8px DM Mono,monospace;color:#87959d}

/* Medium laptops/tablets: preserve the full UI without horizontal collision. */
@media (max-width:1180px) and (min-width:821px){
  :root{--rail-w:64px;--topbar-h:66px;--player-h:72px}
  .topbar{grid-template-columns:176px minmax(220px,1fr) auto;gap:12px;padding-inline:12px}
  .creator-link,.directory-stat{display:none}
  .brand-copy strong{font-size:14px}
  .command{width:clamp(320px,35vw,370px);padding:17px}
  .hero-copy{left:calc(max(var(--edge),var(--safe-left)) + var(--rail-w) + 24px);width:min(390px,calc(100vw - 520px));top:calc(max(var(--edge),var(--safe-top)) + var(--topbar-h) + 45px)}
  .hero-copy h1{font-size:clamp(34px,4vw,48px)}
  .hero-copy p{max-width:330px}
  .world-pulse div{min-width:82px;padding-right:11px;margin-right:11px}
  .player{grid-template-columns:minmax(200px,280px) 116px minmax(100px,1fr)}
  .player-tools{display:none}
  .rail-btn{height:58px}
}

/* Touch portrait layout: stable top search, compact globe area, lower signal sheet,
   persistent player, and six-function navigation. */
@media (max-width:820px){
  :root{
    --edge:10px;
    --topbar-h:60px;
    --player-h:62px;
    --mobile-nav-h:66px;
    --mobile-panel-h:clamp(208px,31dvh,292px);
  }
  .app-shell{height:100dvh;min-height:100dvh}
  .ambient-grid{background-size:72px 72px}
  .topbar{
    top:max(var(--edge),var(--safe-top));left:max(var(--edge),var(--safe-left));right:max(var(--edge),var(--safe-right));
    height:var(--topbar-h);grid-template-columns:42px minmax(0,1fr) 42px;gap:8px;padding:0 7px;border-radius:15px;
  }
  .brand{width:42px;justify-content:center}.brand-copy{display:none!important}.brand-orbit{width:32px;height:32px}
  .top-actions{display:block}.top-actions>*{display:none!important}.top-actions #settings-btn{display:block!important;width:42px;height:42px}
  .search-wrap{height:42px;border-radius:11px;padding-inline:10px;gap:7px}.search-glyph{font-size:20px}.search-wrap input{font-size:16px} /* prevents iOS focus zoom */
  .search-status,.search-wrap kbd{display:none!important}

  .rail{
    left:max(var(--edge),var(--safe-left));right:max(var(--edge),var(--safe-right));top:auto;
    bottom:max(var(--edge),var(--safe-bottom));width:auto;height:var(--mobile-nav-h);
    flex-direction:row;padding:5px;gap:2px;border-radius:16px;z-index:27;
  }
  .rail-spacer{display:none!important}
  .rail-btn,.rail-btn[data-view="countries"],.rail-btn[data-view="history"]{display:flex!important;flex:1 1 0;min-width:0;height:54px;border-radius:11px;gap:3px;padding:0 2px}
  .rail-btn span{font-size:16px}.rail-btn small{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

  .player{
    left:max(var(--edge),var(--safe-left));right:max(var(--edge),var(--safe-right));
    bottom:calc(max(var(--edge),var(--safe-bottom)) + var(--mobile-nav-h) + 8px);
    height:var(--player-h);transform:none!important;border-radius:15px;padding:0 10px;
    grid-template-columns:minmax(0,1fr) 112px;gap:7px;z-index:26;
  }
  .player-station{gap:9px}.player-station .station-art{width:40px;height:40px;border-radius:10px}
  .station-main small{font-size:7px;margin-bottom:3px}.station-main strong{font-size:11px}.station-main span{font-size:8px}
  .transport{gap:4px}.transport button{width:30px;height:42px;font-size:20px;padding:0}.transport .play-btn{width:42px;height:42px}
  .wave-shell,.player-tools{display:none!important}

  .command{
    left:max(var(--edge),var(--safe-left));right:max(var(--edge),var(--safe-right));top:auto;
    bottom:calc(max(var(--edge),var(--safe-bottom)) + var(--mobile-nav-h) + var(--player-h) + 16px);
    width:auto;min-width:0;height:var(--mobile-panel-h);padding:14px;border-radius:17px;z-index:19;
  }
  .command.collapsed{transform:translateY(calc(100% + var(--player-h) + var(--mobile-nav-h) + 40px));opacity:0;pointer-events:none}
  .command-head{align-items:flex-start}.command-head h2{font-size:20px;margin:5px 0 3px}.command-head p{font-size:9px;line-height:1.35;max-width:70vw}
  .command-head .eyebrow{font-size:8px}.icon-btn.compact{width:38px;height:38px;flex:none}
  .current-signal{margin-top:10px;padding:8px;grid-template-columns:44px minmax(0,1fr) 38px;gap:8px;border-radius:12px}
  .signal-orb{width:42px;height:42px}.signal-orb i:first-child{width:36px;height:36px}.signal-orb i:nth-child(2){width:23px;height:23px}.signal-orb b{left:27px;top:7px}
  .signal-copy h3{font-size:12px;margin-top:4px}.signal-copy p{font-size:9px}.signal-state{font-size:7px}
  .quick-grid{display:none!important}.list-head{margin:8px 0 4px}.list-head strong{font-size:10px}.list-head small{font-size:8px}.mini-btn{min-height:34px;padding:6px 8px}
  .station-list{height:calc(100% - 117px);padding-right:1px}
  .station-row{min-height:48px;padding:6px 5px;grid-template-columns:36px minmax(0,1fr) auto;gap:8px}.favicon{width:34px;height:34px}.station-row b{font-size:11px}.station-row small{font-size:9px}

  .hero-copy{
    left:max(16px,calc(var(--safe-left) + 16px));right:max(16px,calc(var(--safe-right) + 16px));width:auto;
    top:calc(max(var(--edge),var(--safe-top)) + var(--topbar-h) + 22px);
    max-height:none;z-index:6;
  }
  .artifact-label{margin-bottom:8px;font-size:7px}.hero-copy .eyebrow{font-size:8px}.hero-copy h1{font-size:clamp(29px,9.2vw,36px);line-height:1;margin:11px 0 10px;max-width:430px}
  .hero-copy p{font-size:11px;line-height:1.52;max-width:min(340px,88vw);margin-bottom:12px}
  .hero-actions{gap:7px;flex-wrap:nowrap}.primary-cta,.ghost-cta{height:40px;padding-inline:11px;font-size:11px;white-space:nowrap}
  .world-pulse{margin-top:11px;max-width:100%;overflow:hidden}.world-pulse div{min-width:0;flex:1;padding:8px 8px 8px 0;margin-right:8px}.world-pulse strong{font-size:13px}.world-pulse small{font-size:6.5px;white-space:nowrap}.interaction-hints{display:none!important}
  .globe-chip{display:none!important}

  .panel-toggle{right:max(var(--edge),var(--safe-right));top:auto;bottom:calc(max(var(--edge),var(--safe-bottom)) + var(--mobile-nav-h) + var(--player-h) + 24px);transform:none;width:50px;height:50px;border-radius:13px}
  .drawer{inset:max(var(--edge),var(--safe-top)) max(var(--edge),var(--safe-right)) max(var(--edge),var(--safe-bottom)) max(var(--edge),var(--safe-left));width:auto;padding:18px;border-radius:18px}
  .drawer-head{top:-18px;padding:18px 0 13px}.drawer-head h2{font-size:25px}.card-grid,.filter-grid{grid-template-columns:1fr}.feature-card,.country-card{padding:13px;min-height:52px}.result-row{min-height:55px}
  .status-toast{top:calc(max(var(--edge),var(--safe-top)) + var(--topbar-h) + 10px)}
}

/* Small phones: remove nonessential hero density before sacrificing controls. */
@media (max-width:520px){
  :root{--mobile-panel-h:clamp(196px,29dvh,248px)}
  .topbar{grid-template-columns:38px minmax(0,1fr) 38px}.brand{width:38px}.top-actions #settings-btn{width:38px;height:40px}
  .search-wrap{padding-inline:8px}.search-glyph{font-size:18px}.search-wrap input{font-size:16px}
  .rail-btn span{font-size:15px}.rail-btn small{font-size:7px}
  .hero-copy h1{font-size:clamp(27px,8.9vw,33px)}
  .hero-copy p{max-width:300px;font-size:10.5px}
  .world-pulse div:nth-child(4){display:none}.world-pulse div:nth-child(3):after{display:none}
  .primary-cta,.ghost-cta{font-size:10px;padding-inline:9px}.primary-cta span{margin-left:6px}
  .command{padding:12px}.command-head p{display:none}.current-signal{margin-top:7px}.list-head{margin-top:6px}.station-list{height:calc(100% - 102px)}
  .player{grid-template-columns:minmax(0,1fr) 106px}.station-main span{display:none}.player-station .station-art{width:38px;height:38px}
}

/* Very short portrait screens: prioritize the usable globe/player/panel over marketing copy. */
@media (max-width:820px) and (max-height:700px) and (orientation:portrait){
  :root{--mobile-panel-h:clamp(175px,27dvh,205px)}
  .hero-copy p,.artifact-label,.world-pulse{display:none}
  .hero-copy{top:calc(max(var(--edge),var(--safe-top)) + var(--topbar-h) + 13px)}
  .hero-copy h1{font-size:30px;margin:7px 0 11px;max-width:330px}.hero-copy .eyebrow{font-size:7px}
  .command-head p{display:none}.current-signal{display:none}.station-list{height:calc(100% - 65px)}
}

/* Phone/tablet landscape: side-by-side instrument layout avoids stacking more
   vertical layers than the viewport can physically contain. */
@media (max-height:560px) and (orientation:landscape){
  :root{--edge:8px;--topbar-h:54px;--player-h:58px;--rail-w:58px}
  .topbar{top:max(var(--edge),var(--safe-top));left:max(var(--edge),var(--safe-left));right:max(var(--edge),var(--safe-right));height:var(--topbar-h);grid-template-columns:44px minmax(170px,1fr) auto;border-radius:13px;padding:0 7px;gap:7px}
  .brand-copy,.directory-stat,.creator-link,.search-status,.search-wrap kbd,#install-btn,#fullscreen-btn{display:none!important}.brand{width:42px;justify-content:center}.search-wrap{height:38px}.search-wrap input{font-size:14px}.top-actions{display:block}.top-actions #settings-btn{display:block!important;width:40px;height:40px}
  .rail{left:max(var(--edge),var(--safe-left));top:calc(max(var(--edge),var(--safe-top)) + var(--topbar-h) + 7px);bottom:max(var(--edge),var(--safe-bottom));right:auto;width:var(--rail-w);height:auto;flex-direction:column;padding:4px;gap:1px;border-radius:13px;z-index:25}
  .rail-spacer{display:none}.rail-btn,.rail-btn[data-view="countries"],.rail-btn[data-view="history"]{display:flex!important;width:100%;height:auto;min-height:42px;flex:1;gap:1px;padding:1px}.rail-btn span{font-size:14px}.rail-btn small{font-size:6.5px}
  .command{top:calc(max(var(--edge),var(--safe-top)) + var(--topbar-h) + 7px);right:max(var(--edge),var(--safe-right));bottom:max(var(--edge),var(--safe-bottom));left:auto;width:clamp(278px,39vw,350px);height:auto;padding:11px;border-radius:14px}
  .command.collapsed{transform:translateX(calc(100% + 24px));opacity:0}.command-head h2{font-size:18px}.command-head p{display:none}.current-signal{margin-top:6px;padding:6px;grid-template-columns:38px minmax(0,1fr) 34px}.signal-orb{width:36px;height:36px}.signal-orb i:first-child{width:31px;height:31px}.signal-orb i:nth-child(2){width:20px;height:20px}.signal-orb b{left:24px;top:5px}.heart-btn{width:32px;height:32px}.quick-grid{display:none}.list-head{margin:6px 0 3px}.station-list{height:calc(100% - 98px)}.station-row{min-height:40px;padding:4px}.favicon{width:30px;height:30px}
  .player{left:calc(max(var(--edge),var(--safe-left)) + var(--rail-w) + 7px);right:calc(max(var(--edge),var(--safe-right)) + clamp(278px,39vw,350px) + 7px);bottom:max(var(--edge),var(--safe-bottom));height:var(--player-h);transform:none!important;grid-template-columns:minmax(0,1fr) 106px;padding:0 9px;border-radius:13px}.wave-shell,.player-tools{display:none}.player-station .station-art{width:38px;height:38px}.station-main span{display:none}.transport{gap:3px}.transport .play-btn{width:40px;height:40px}
  .hero-copy{left:calc(max(var(--edge),var(--safe-left)) + var(--rail-w) + 18px);right:calc(max(var(--edge),var(--safe-right)) + clamp(278px,39vw,350px) + 16px);top:calc(max(var(--edge),var(--safe-top)) + var(--topbar-h) + 18px);width:auto}.artifact-label,.hero-copy p,.world-pulse,.interaction-hints{display:none!important}.hero-copy .eyebrow{font-size:7px}.hero-copy h1{font-size:clamp(24px,4.2vw,34px);line-height:1;margin:8px 0 10px;max-width:400px}.hero-actions{gap:6px}.primary-cta,.ghost-cta{height:36px;padding-inline:9px;font-size:9px}
  .globe-chip{display:none}.panel-toggle{right:max(var(--edge),var(--safe-right));top:50%;bottom:auto;transform:translateY(-50%);width:48px;height:48px}
  .drawer{inset:max(var(--edge),var(--safe-top)) max(var(--edge),var(--safe-right)) max(var(--edge),var(--safe-bottom)) auto;width:min(520px,72vw);padding:16px}.drawer-head{top:-16px;padding-top:16px}
}

/* Large/ultrawide screens: cap floating UI sizes so the globe remains primary. */
@media (min-width:1600px){
  .topbar{grid-template-columns:250px minmax(440px,720px) 1fr}
  .hero-copy{width:540px;left:132px}.command{width:420px}.player{grid-template-columns:390px 150px 1fr 280px}
}
@media (min-width:2200px){
  :root{--edge:22px;--topbar-h:74px;--player-h:82px;--rail-w:74px}
  .hero-copy{left:150px;top:180px}.hero-copy h1{font-size:66px}.command{width:438px}.topbar{max-width:2200px;margin-inline:auto}.player{max-width:2200px;margin-inline:auto}
}

/* Input modality + accessibility quality. */
@media (hover:hover) and (pointer:fine){
  .rail-btn,.icon-btn,.station-row,.primary-cta,.ghost-cta,.mini-btn,.heart-btn,.transport button{transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
  .primary-cta:hover,.ghost-cta:hover,.icon-btn:hover,.mini-btn:hover{transform:translateY(-1px)}
}
@media (pointer:coarse){
  .icon-btn,.heart-btn,.mini-btn,.transport button{min-width:42px;min-height:42px}
  .station-row{min-height:50px}
}
@media (prefers-contrast:more){
  :root{--line:rgba(255,255,255,.24);--line2:rgba(255,255,255,.13);--muted:#b7c0c6}
  .glass{background:rgba(2,6,9,.88)}
}

/* ========================================================================== 
   v7.0 — authoritative mobile composition + Listen Together
   ========================================================================== */
.together-btn{position:relative;display:inline-flex!important;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 9px!important;border:1px solid rgba(52,153,210,.2)!important;border-radius:10px!important;background:rgba(52,153,210,.05)!important;color:#d7f1ff!important;white-space:nowrap;cursor:pointer}
.together-btn:hover,.together-btn.active{background:rgba(52,153,210,.12)!important;border-color:rgba(52,153,210,.36)!important}.together-btn.connected .together-icon{color:#65c7f3;text-shadow:0 0 12px rgba(101,199,243,.7)}.together-btn .together-label{font:500 8px DM Mono,monospace}.together-btn b{min-width:17px;height:17px;padding:0 4px;border-radius:999px;display:grid;place-items:center;background:#3499d2;color:#031019;font:700 8px DM Mono,monospace}
.listen-hero{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid rgba(52,153,210,.16);border-radius:14px;background:linear-gradient(135deg,rgba(52,153,210,.09),rgba(255,255,255,.012))}.listen-hero>span{width:42px;height:42px;border:1px solid rgba(52,153,210,.28);border-radius:50%;display:grid;place-items:center;color:#65c7f3;flex:none}.listen-hero b{font-size:13px}.listen-hero p{margin:7px 0 0;color:var(--muted);font-size:10px;line-height:1.55}
.room-input,.room-name-row input{width:100%;height:46px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.025);color:var(--text);padding:0 12px;font-size:16px;outline:0}.room-input:focus,.room-name-row input:focus{border-color:rgba(52,153,210,.42);box-shadow:0 0 0 4px rgba(52,153,210,.05)}.room-actions{margin-top:10px}.room-primary,.room-join button,.room-code-box button,.room-name-row button{height:44px;border:1px solid rgba(52,153,210,.28);border-radius:11px;background:#3499d2;color:#031019;font-weight:700;cursor:pointer;padding:0 14px}.room-primary{width:100%;display:flex;align-items:center;justify-content:space-between}.room-primary:disabled,.room-join button:disabled{opacity:.42;cursor:not-allowed}
.room-divider{display:flex;align-items:center;gap:10px;margin:22px 0 10px;color:#66747d;font:500 8px DM Mono,monospace;letter-spacing:.12em}.room-divider:before,.room-divider:after{content:"";height:1px;background:var(--line2);flex:1}.room-join{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:8px}.room-join .room-input{text-transform:uppercase;letter-spacing:.14em;font:600 14px DM Mono,monospace}.room-footnote{color:#78858d;font-size:9px;line-height:1.55;margin:15px 0 0}
.room-live-card{padding:16px;border:1px solid rgba(52,153,210,.18);border-radius:14px;background:linear-gradient(135deg,rgba(52,153,210,.08),rgba(255,255,255,.012))}.room-live-top{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center}.room-status-dot{width:8px;height:8px;border-radius:50%;background:#69737a}.room-status-dot.online{background:#65c7f3;box-shadow:0 0 12px rgba(101,199,243,.7)}.room-live-top small{display:block;color:#7f8d95;font:500 7px DM Mono,monospace}.room-live-top strong{display:block;margin-top:3px;font:600 18px Space Grotesk,Inter;letter-spacing:.08em}.room-live-top>b{font:500 8px DM Mono,monospace;color:#9ccce5}.room-live-card p{margin:12px 0 0;color:var(--muted);font-size:10px;line-height:1.55}.room-code-box{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}.room-code-box>strong{min-height:44px;display:flex;align-items:center;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.02);font:600 15px DM Mono,monospace;letter-spacing:.12em}.room-code-box button,.room-name-row button{background:rgba(52,153,210,.08);color:#bce7ff;font:600 8px DM Mono,monospace}.room-name-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.room-now{margin-top:14px;padding:13px;border:1px solid var(--line2);border-radius:12px;background:rgba(255,255,255,.015)}.room-now span{display:block;color:#6dbce5;font:500 7px DM Mono,monospace}.room-now b{display:block;margin-top:6px;font-size:12px}.room-now small{display:block;margin-top:4px;color:var(--muted);font-size:9px}.room-leave{width:100%;height:42px;margin-top:18px;border:1px solid rgba(255,111,124,.2);border-radius:11px;background:rgba(255,111,124,.055);color:#ff9eaa;cursor:pointer;font-size:10px}

@media (max-width:820px){
  :root{--edge:10px;--topbar-h:54px;--player-h:68px;--mobile-nav-h:58px}
  html,body,.app-shell{width:100%;height:100dvh;overflow:hidden}
  .topbar{top:max(8px,var(--safe-top));left:max(8px,var(--safe-left));right:max(8px,var(--safe-right));height:var(--topbar-h);grid-template-columns:38px minmax(0,1fr) 40px;gap:7px;padding:0 6px;border-radius:14px}.brand{width:38px;height:42px;justify-content:center}.brand-copy{display:none!important}.brand-orbit{width:30px;height:30px}.brand-orbit i:nth-child(1){width:28px;height:28px}.brand-orbit i:nth-child(2){width:18px;height:18px}.brand-orbit b{left:22px;top:5px}.search-wrap{height:40px;border-radius:10px;padding:0 9px;gap:6px}.search-glyph{font-size:18px}.search-wrap input{font-size:16px}.search-status,.search-wrap kbd{display:none!important}.top-actions{display:flex!important;justify-content:flex-end}.top-actions>*{display:none!important}.top-actions #settings-btn{display:grid!important;place-items:center;width:40px;height:40px;border-radius:10px}
  .rail{left:max(8px,var(--safe-left));right:max(8px,var(--safe-right));bottom:max(8px,var(--safe-bottom));top:auto;width:auto;height:var(--mobile-nav-h);padding:4px;gap:2px;flex-direction:row;border-radius:15px;z-index:27}.rail-spacer{display:none!important}.rail-btn{display:flex!important;flex:1 1 0;min-width:0;height:50px!important;padding:0 2px;border-radius:10px;gap:2px}.rail-btn[data-view="history"]{display:none!important}.rail-btn span{font-size:16px}.rail-btn small{font:500 7.5px DM Mono,monospace;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .player{left:max(8px,var(--safe-left));right:max(8px,var(--safe-right));bottom:calc(max(8px,var(--safe-bottom)) + var(--mobile-nav-h) + 7px);height:var(--player-h);padding:0 9px;grid-template-columns:minmax(0,1fr) 48px 46px;gap:6px;border-radius:14px;z-index:26;transform:none!important;transition:opacity .18s ease,transform .2s ease}.player-station{gap:8px;overflow:hidden}.player-station .station-art{width:42px;height:42px;border-radius:10px}.station-main small{font-size:6.5px;margin-bottom:3px}.station-main strong{font-size:11px}.station-main span{display:none!important}.transport{width:48px;gap:0}.transport #prev-btn,.transport #next-btn{display:none!important}.transport .play-btn{display:grid!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;font-size:12px}.wave-shell{display:none!important}.player-tools{display:flex!important;width:46px;justify-content:center;gap:0}.player-tools>:not(#together-btn){display:none!important}.player-tools #together-btn{display:grid!important;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0!important;border-radius:11px!important}.together-btn .together-label{display:none}.together-btn .together-icon{font-size:16px}.together-btn b{position:absolute;right:-3px;top:-3px;min-width:16px;height:16px;font-size:7px;border:2px solid #071017}
  .hero-copy{left:max(16px,calc(var(--safe-left) + 16px));right:max(16px,calc(var(--safe-right) + 16px));top:calc(max(8px,var(--safe-top)) + var(--topbar-h) + 17px);width:auto;max-height:none;z-index:6;pointer-events:none}.artifact-label,.hero-copy p,.world-pulse,.interaction-hints,.ghost-cta{display:none!important}.hero-copy .eyebrow{font-size:7px}.hero-copy h1{font-size:clamp(27px,8.5vw,34px);line-height:1.01;max-width:330px;margin:8px 0 12px;letter-spacing:-.045em}.hero-actions{pointer-events:auto}.primary-cta{height:38px;padding:0 11px;font-size:10px;border-radius:10px}.hero-copy.hidden{display:none!important}
  .command{left:max(8px,var(--safe-left));right:max(8px,var(--safe-right));top:auto;bottom:calc(max(8px,var(--safe-bottom)) + var(--mobile-nav-h) + 7px);width:auto;height:min(66dvh,540px);min-width:0;padding:14px;border-radius:18px;z-index:25;box-shadow:0 -20px 70px rgba(0,0,0,.58);transform:none;opacity:1;pointer-events:auto}.command.collapsed{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}.command-head{align-items:center}.command-head h2{font-size:21px;margin:4px 0 2px}.command-head p{font-size:9px;max-width:68vw}.command-head .eyebrow{font-size:7px}.icon-btn.compact{width:40px;height:40px;min-width:40px;min-height:40px}.current-signal{margin-top:9px;padding:8px;grid-template-columns:42px minmax(0,1fr) 38px;gap:8px;border-radius:12px}.signal-orb{width:40px;height:40px}.signal-orb i:first-child{width:34px;height:34px}.signal-orb i:nth-child(2){width:22px;height:22px}.signal-orb b{left:26px;top:6px}.signal-copy h3{font-size:12px;margin:4px 0 2px}.signal-copy p{font-size:8.5px}.signal-state{font-size:7px}.heart-btn{width:38px;height:38px}.quick-grid{display:none!important}.list-head{margin:9px 0 5px}.list-head strong{font-size:10px}.list-head small{font-size:8px}.mini-btn{min-height:36px;padding:0 9px}.station-list{height:calc(100% - 119px);padding-right:0}.station-row{min-height:50px;padding:6px 4px;grid-template-columns:36px minmax(0,1fr) auto;gap:8px}.favicon{width:34px;height:34px}.station-row b{font-size:11px}.station-row small{font-size:8.5px}.quality{font-size:7px}.app-shell.panel-open-mobile .player{opacity:0;transform:translateY(18px)!important;pointer-events:none}.app-shell.panel-open-mobile .hero-copy{opacity:0;pointer-events:none}.panel-toggle,.globe-chip{display:none!important}
  .drawer-backdrop{z-index:40}.drawer{z-index:41;inset:max(8px,var(--safe-top)) max(8px,var(--safe-right)) max(8px,var(--safe-bottom)) max(8px,var(--safe-left));width:auto;height:auto;padding:16px;border-radius:18px;transform:translateY(calc(100% + 20px));overflow:auto}.drawer.open{transform:none}.drawer-head{top:-16px;padding:16px 0 13px}.drawer-head h2{font-size:26px}.card-grid,.filter-grid{grid-template-columns:1fr}.feature-card,.country-card{padding:14px}.status-toast{top:calc(max(8px,var(--safe-top)) + var(--topbar-h) + 8px);max-width:calc(100vw - 24px)}.room-code-box{grid-template-columns:1fr 1fr}.room-code-box>strong{grid-column:1/-1}.room-code-box button{width:100%}
}

@media (max-width:380px) and (orientation:portrait){
  :root{--player-h:64px;--mobile-nav-h:56px}.topbar{grid-template-columns:34px minmax(0,1fr) 38px;gap:5px;padding-inline:5px}.brand{width:34px}.brand-orbit{transform:scale(.9)}.top-actions #settings-btn{width:38px;height:38px}.player{grid-template-columns:minmax(0,1fr) 44px 42px;padding-inline:7px;gap:4px}.player-station .station-art{width:38px;height:38px}.station-main strong{font-size:10.5px}.transport{width:44px}.transport .play-btn{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}.player-tools{width:42px}.player-tools #together-btn{width:40px;height:40px;min-width:40px;min-height:40px}.rail-btn span{font-size:15px}.rail-btn small{font-size:6.8px}.hero-copy h1{font-size:27px;max-width:290px}.primary-cta{height:36px;font-size:9px}.command{height:min(70dvh,500px);padding:12px}.command-head p{display:none}.station-list{height:calc(100% - 105px)}
}

@media (max-height:560px) and (max-width:920px) and (orientation:landscape){
  :root{--edge:8px;--topbar-h:48px;--player-h:56px;--rail-w:54px}.topbar{top:max(6px,var(--safe-top));left:max(6px,var(--safe-left));right:max(6px,var(--safe-right));height:var(--topbar-h);grid-template-columns:36px minmax(150px,1fr) 38px;padding:0 5px;border-radius:12px}.brand{width:34px}.search-wrap{height:36px}.search-wrap input{font-size:14px}.top-actions #settings-btn{width:36px;height:36px;min-width:36px;min-height:36px}.rail{left:max(6px,var(--safe-left));right:auto;top:calc(max(6px,var(--safe-top)) + var(--topbar-h) + 6px);bottom:max(6px,var(--safe-bottom));width:var(--rail-w);height:auto;flex-direction:column;padding:3px;border-radius:12px}.rail-btn{width:100%;height:auto!important;min-height:38px;flex:1}.rail-btn[data-view="history"]{display:none!important}.rail-btn span{font-size:14px}.rail-btn small{font-size:6px}.player{left:calc(max(6px,var(--safe-left)) + var(--rail-w) + 6px);right:max(6px,var(--safe-right));bottom:max(6px,var(--safe-bottom));height:var(--player-h);grid-template-columns:minmax(0,1fr) 44px 42px;border-radius:12px;padding-inline:8px}.player-station .station-art{width:38px;height:38px}.transport{width:44px}.transport .play-btn{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}.player-tools{width:42px}.player-tools #together-btn{width:40px;height:40px;min-width:40px;min-height:40px}.hero-copy{left:calc(max(6px,var(--safe-left)) + var(--rail-w) + 16px);right:max(12px,var(--safe-right));top:calc(max(6px,var(--safe-top)) + var(--topbar-h) + 12px);width:auto}.hero-copy h1{font-size:clamp(23px,4vw,31px);max-width:390px;margin:6px 0 9px}.hero-copy .eyebrow{font-size:6.5px}.primary-cta{height:34px;font-size:9px}.command{top:calc(max(6px,var(--safe-top)) + var(--topbar-h) + 6px);right:max(6px,var(--safe-right));bottom:max(6px,var(--safe-bottom));left:auto;width:min(390px,46vw);height:auto;padding:11px;border-radius:14px;z-index:29}.command.collapsed{transform:translateX(calc(100% + 20px));opacity:0}.command-head h2{font-size:18px}.command-head p{display:none}.current-signal{margin-top:6px;padding:6px;grid-template-columns:36px minmax(0,1fr) 34px}.signal-orb{width:34px;height:34px}.heart-btn{width:34px;height:34px;min-width:34px;min-height:34px}.list-head{margin:6px 0 3px}.station-list{height:calc(100% - 96px)}.station-row{min-height:42px;padding:4px}.favicon{width:30px;height:30px}.app-shell.panel-open-mobile .player{opacity:0;pointer-events:none}.drawer{inset:max(6px,var(--safe-top)) max(6px,var(--safe-right)) max(6px,var(--safe-bottom)) auto;width:min(560px,76vw);padding:14px}.drawer-head{top:-14px;padding-top:14px}
}

@media (min-width:821px){.player-tools{gap:7px}.player-tools .volume{max-width:88px}.together-btn .together-label{display:none}.together-btn{width:38px;min-width:38px;padding:0!important}.together-btn b{position:absolute;right:-5px;top:-6px}}
@media (min-width:821px) and (max-width:1180px){.player{grid-template-columns:minmax(190px,1fr) 108px minmax(80px,.55fr) 46px!important}.player-tools{display:flex!important;width:46px;justify-content:center}.player-tools>:not(#together-btn){display:none!important}.player-tools #together-btn{display:grid!important;place-items:center;width:40px;height:40px}}
@media (min-width:1600px){.together-btn{width:auto;min-width:78px;padding:0 9px!important}.together-btn .together-label{display:inline}}