/* HaxLab 1.0 · Launcher Broadcast */
@font-face{font-family:'HX Barlow';src:url(hx-barlow-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'HX Barlow';src:url(hx-barlow-600.woff2) format('woff2');font-weight:500 900;font-display:swap}
@font-face{font-family:'HX Barlow Condensed';src:url(hx-barlow-condensed-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'HX Barlow Condensed';src:url(hx-barlow-condensed-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'HX Barlow Condensed';src:url(hx-barlow-condensed-800i.woff2) format('woff2');font-weight:800 900;font-style:italic;font-display:swap}
@font-face{font-family:'HX Mono';src:url(hx-jetbrains-mono-500.woff2) format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'HX Mono';src:url(hx-jetbrains-mono-700.woff2) format('woff2');font-weight:600 800;font-display:swap}

:root{--bg:#0c0e12;--panel:#14171d;--raised:#1b1f26;--line:#22262e;--line2:#2b3039;--fg:#f2efe6;--muted:#9aa0aa;--accent:#ffc21a;--on-accent:#0c0e12;--red:#e5484d;--blue:#3d7ef5;--display:'HX Barlow Condensed','Arial Narrow',system-ui,sans-serif;--text:'HX Barlow','Segoe UI',system-ui,sans-serif;--mono:'HX Mono',ui-monospace,monospace;--ease:cubic-bezier(.2,.8,.1,1);--snap:cubic-bezier(.7,0,.2,1);color-scheme:dark}
html[data-theme=estadio]{--accent:#ffc21a}
html[data-theme=neon]{--accent:#c6f432}
html[data-theme=gelo]{--accent:#4fd8f0}
html[data-theme=rubro]{--accent:#ff5a4e}
html[data-theme=lilas]{--accent:#b48cff}
html[data-theme=giz]{--accent:#f2efe6}
html[data-theme=claro]{--bg:#f2efe6;--panel:#e7e3d8;--raised:#dcd7ca;--line:#d3cec1;--line2:#c4bfb1;--fg:#0c0e12;--muted:#4f5560;--accent:#0c0e12;--on-accent:#ffc21a;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font:15px/1.5 var(--text)}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shell{height:100vh;min-height:620px;display:flex;flex-direction:column;overflow:hidden;transition:background .3s}

.top{display:flex;align-items:center;gap:16px;padding:18px clamp(16px,3vw,40px);border-bottom:1px solid var(--line);flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark{display:grid;place-items:center;width:42px;height:42px;background:var(--accent);color:var(--on-accent);font:italic 800 27px/1 var(--display);clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);transition:background .3s}
.word{font:italic 800 30px/1 var(--display);letter-spacing:.5px}
.tag{font:500 11px var(--mono);color:var(--muted);border:1px solid var(--line2);padding:4px 8px}
.links{margin-left:auto;display:flex;align-items:center;gap:20px;font-weight:500;font-size:14px}
.links a{text-decoration:none;color:var(--muted)}.links a:hover{color:var(--fg)}
.live{display:flex;align-items:center;gap:8px;font:500 11px var(--mono);background:var(--panel);padding:8px 12px}
.live i{width:8px;height:8px;border-radius:50%;background:#3ddc84;animation:pulse 1.6s ease-in-out infinite}

.hero{flex:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);padding:clamp(20px,3.5vh,40px) clamp(16px,3vw,40px) 24px;min-height:0}
.intro{display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,2vh,18px);min-height:0;animation:rise .7s var(--ease) both}
.kicker{align-self:flex-start;margin:0;font:500 12px var(--mono);letter-spacing:1px;background:var(--accent);color:var(--on-accent);padding:6px 16px 6px 10px;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
h1{margin:0;font:italic 800 clamp(48px,min(7.6vw,9.6vh),116px)/.86 var(--display);text-transform:uppercase;letter-spacing:-1px}
h1 em{color:var(--accent);font-style:inherit;transition:color .3s}
.lead{margin:0;max-width:460px;font-size:clamp(15px,1.3vw,18px);color:var(--muted)}
.cta{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:470px;padding:20px 30px 20px 26px;background:var(--accent);color:var(--on-accent);text-decoration:none;clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%);transition:transform .18s var(--ease),filter .18s,background .3s}
.cta:hover{transform:translateX(6px);filter:brightness(1.06)}
.cta span{display:flex;flex-direction:column}
.cta b{font:italic 800 clamp(26px,2.6vw,36px)/1 var(--display)}
.cta small{font:500 11px var(--mono);letter-spacing:1px;margin-top:6px}
.cta svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.4;flex-shrink:0}
#status{margin:0;font:500 12px var(--mono);color:var(--muted)}

.monitor{position:relative;display:flex;flex-direction:column;gap:12px;padding:14px;background:var(--panel);border:1px solid var(--line);min-width:0;animation:rise .7s .1s var(--ease) both}
.monitor-head{display:flex;justify-content:space-between;font:500 11px var(--mono);letter-spacing:1px;color:var(--muted)}
.rec{display:flex;align-items:center;gap:6px;color:#ff5a5f}.rec i{width:7px;height:7px;border-radius:50%;background:#ff5a5f;animation:pulse 1.2s infinite}
.bug{display:flex;align-self:flex-start;font:700 22px/1 var(--display);animation:wipe .8s .35s var(--snap) both}
.bug b{padding:6px 14px;font-weight:700}
.bug .hx{background:#f2efe6;color:#0c0e12;font-style:italic;font-weight:800;padding:6px 10px}
.bug .red{background:var(--red);color:#fff}.bug .blue{background:var(--blue);color:#fff}
.bug .score{background:#0c0e12;color:#fff;font:700 20px/1 var(--mono);display:flex;align-items:center}
.bug .clock{background:#1e222a;color:var(--accent);font:700 17px/1 var(--mono);display:flex;align-items:center}
.pitch{position:relative;flex:1;min-height:260px;background:#5e7d4c;overflow:hidden}
.pitch svg{position:absolute;inset:0;width:100%;height:100%}
.route{fill:none;stroke:var(--accent);stroke-width:4;stroke-dasharray:10 8;stroke-linecap:round;stroke-linejoin:round;animation:dash 1.2s linear infinite}
.route.head{stroke-dasharray:none;animation:none}
.p-red{color:var(--accent);animation:red 6s cubic-bezier(.4,0,.2,1) infinite}
.p-red text{font:500 12px var(--mono);fill:#fff}
.ring{fill:none;stroke:var(--accent);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ring 1.4s ease-out infinite}
.p-blue{animation:blue 6s ease-in-out infinite alternate}
.ball{animation:ball 6s cubic-bezier(.4,0,.2,1) infinite}
.sting{position:absolute;left:-30px;right:-30px;top:42%;height:64px;display:flex;align-items:center;justify-content:center;background:var(--accent);animation:sting 6s var(--snap) infinite}
.sting span{transform:skewX(14deg);font:italic 800 clamp(34px,4vw,52px)/1 var(--display);letter-spacing:2px;color:var(--on-accent)}
.scrub{position:relative;height:6px;background:var(--raised)}
.scrub .fill{position:absolute;inset:0;background:#6b7280;transform-origin:left;animation:fill 6s linear infinite}
.scrub .goal{position:absolute;top:-4px;width:4px;height:14px;background:var(--accent)}
.scrub .head{position:absolute;top:-5px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#f2efe6;animation:head 6s linear infinite}

.deck{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.cell{background:var(--bg);padding:18px clamp(16px,3vw,40px);display:flex;flex-direction:column;gap:12px;transition:background .3s}
.cell>label,.label{font:500 11px var(--mono);letter-spacing:1px;color:var(--muted)}
.value{display:flex;align-items:baseline;gap:8px}
.value input{width:110px;background:transparent;border:0;border-bottom:2px solid var(--accent);color:var(--fg);font:700 40px/1 var(--display);padding:0}
.value span{font-family:var(--mono);color:var(--muted)}
.presets{display:flex;gap:6px}
.presets button{min-width:54px;height:38px;border:1px solid var(--line2);background:transparent;font:500 13px var(--mono)}
.presets button:hover{border-color:var(--accent)}
.presets button.selected{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.keys{display:flex;align-items:center;gap:18px}
.pad{display:grid;grid-template-columns:repeat(3,36px);gap:4px}
kbd{height:36px;display:grid;place-items:center;background:var(--raised);border-bottom:3px solid var(--line2);font:700 14px var(--mono)}
.keys p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}.keys b{color:var(--fg)}
.themes{display:flex;flex-wrap:wrap;gap:8px}
.themes button{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 8px;border:1px solid var(--line2);background:transparent;font-weight:600;font-size:13px;transition:border-color .15s,transform .15s var(--ease)}
.themes button:hover{transform:translateY(-2px)}
.themes button[aria-pressed=true]{border-color:var(--fg);background:var(--raised)}
.themes i{width:18px;height:18px;clip-path:polygon(0 0,100% 0,100% 65%,65% 100%,0 100%)}
.themes [data-theme=estadio] i{background:#ffc21a}.themes [data-theme=neon] i{background:#c6f432}.themes [data-theme=gelo] i{background:#4fd8f0}.themes [data-theme=rubro] i{background:#ff5a4e}.themes [data-theme=lilas] i{background:#b48cff}.themes [data-theme=giz] i{background:#f2efe6;outline:1px solid #9aa0aa}.themes [data-theme=claro] i{background:#0c0e12;outline:1px solid #9aa0aa}
.cell small{font-size:12px;color:var(--muted)}

.ticker{display:flex;align-items:stretch;min-height:42px;background:#f2efe6;color:#0c0e12}
html[data-theme=claro] .ticker{background:#0c0e12;color:#f2efe6}
.ticker-tag{flex-shrink:0;display:flex;align-items:center;padding:0 22px 0 clamp(16px,3vw,40px);background:var(--accent);color:var(--on-accent);font:italic 800 20px/1 var(--display);clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.ticker-track{flex:1;overflow:hidden;display:flex;align-items:center}
.ticker-run{display:flex;gap:40px;white-space:nowrap;padding-left:24px;font:600 18px/1 var(--display);text-transform:uppercase;animation:ticker 36s linear infinite}
.ticker-run i{font-style:normal}
.downloads{flex-shrink:0;display:flex;align-items:center;gap:14px;padding:0 clamp(16px,3vw,40px) 0 20px;background:rgba(0,0,0,.07);font:600 11px var(--mono)}
.downloads a{text-decoration:none}.downloads a:hover{text-decoration:underline}
.mobile-install{display:none;border:0;background:none;font:600 11px var(--mono)}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes dash{to{stroke-dashoffset:-36}}
@keyframes ball{0%{transform:translate(0,0)}22%{transform:translate(118px,-46px)}40%{transform:translate(236px,10px)}58%{transform:translate(300px,-30px)}70%,100%{transform:translate(372px,-4px)}}
@keyframes red{0%{transform:translate(0,0)}40%{transform:translate(150px,-6px)}70%,100%{transform:translate(280px,-10px)}}
@keyframes blue{0%{transform:translate(0,0)}50%{transform:translate(-40px,28px)}100%{transform:translate(-56px,22px)}}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes sting{0%,66%{transform:translateX(-115%) skewX(-14deg)}72%,88%{transform:translateX(0) skewX(-14deg)}96%,100%{transform:translateX(120%) skewX(-14deg)}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes head{from{left:0}to{left:100%}}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media (max-width:980px){
  .shell{height:auto;min-height:100vh;overflow:visible}
  .hero{grid-template-columns:1fr}
  .monitor{order:0}.pitch{min-height:200px}
  .deck{grid-template-columns:1fr}
  .links .help{display:none}
}
@media (max-width:600px){
  .tag{display:none}
  .top{padding:14px 16px}
  .ticker{flex-wrap:wrap}
  .ticker-track{min-height:42px}
  .downloads{width:100%;justify-content:space-between;padding:10px 16px}
  .mobile-install{display:inline}
  .bug{font-size:16px}.bug b{padding:5px 8px}
}
@media (min-width:981px) and (max-height:800px){.lead{font-size:14px;max-width:420px}.cta{padding:14px 26px 14px 22px}.cta b{font-size:28px}.cell{padding-top:12px;padding-bottom:12px;gap:8px}.hero{padding-top:16px;padding-bottom:16px}.kicker{padding-top:4px;padding-bottom:4px}}