keeps the two-column broadcast grid: column 2 renders the "FEED // STANDBY" bracket frame and the idle acquisition ring over a preview this page does not have. Collapse the grid for that page only (body > main.studio; launcher-live is body > section.studio, which keeps its video, frame and ring untouched). Both pseudo-elements are decoration, no content is lost. */ html.hunter-hud body:has(> main.studio) .studio{grid-template-columns:minmax(0,1fr);max-width:760px} html.hunter-hud body:has(> main.studio) .studio:before, html.hunter-hud body:has(> main.studio) .studio:after{display:none} /* …and centre the collapsed plate in the window instead of pinning it to the top-left corner: this page opens in the user's own desktop browser during Google sign-in, so a 1440x900 viewport is its primary view. Every layer the core appends to is position:fixed, so it never becomes a flex item; the page's only flow child is

. Under 700px the page keeps the authored block flow (the plate is tall there and centring could clip its top). */ html.hunter-hud body:has(> main.studio){display:flex;align-items:center;justify-content:center} html.hunter-hud body:has(> main.studio) .studio{width:min(760px,100%);margin:0} @media(max-width:700px){ html.hunter-hud body:has(> main.studio){display:block} html.hunter-hud body:has(> main.studio) .studio{width:auto;margin:0 0 32px} } /* Without the launcher's ?port/&state parameters the sign-in button is disabled by the page script. launcher-live.css drops a disabled button to opacity .5, which erases its chamfer and edge; use the "unavailable" hatch the live page already gives its own disabled #start instead, so the control still reads as a real (inactive) key. */ html.hunter-hud body:has(> main.studio) #login:disabled, html.hunter-hud body:has(> main.studio) #login:disabled:hover{ opacity:1;color:#a08a6c;border-color:var(--hh-edge-2);box-shadow:inset 0 1px rgba(255,190,100,.05); background:repeating-linear-gradient(115deg,rgba(255,170,0,.07) 0 6px,transparent 6px 12px),linear-gradient(180deg,#1d160c,#110d08); } /* The core conduit runs down the right gutter; on the short centred pages (login, play gate) it reads as a stray hairline hanging off the plate, and on launcher-live it runs through the feed status chip, so keep it a faint trace. */ html.hunter-hud body:has(> .studio) .hud-atmos-conduit, html.hunter-hud body:has(> main > h1) .hud-atmos-conduit{opacity:.22} /* launcher-live pauses its own decoration while broadcasting; hide the ember canvas too so the capture stays clean. */ html.hunter-hud body:has(> .studio #stop:not([hidden])) .hud-atmos-ember, html.hunter-hud body:has(> .studio #stop:not([hidden])) .hud-atmos-conduit{display:none!important} /* ═══════════════════════════════════════════════════════════════════════════════ 1. Download page · tokens, type scale and ground ═══════════════════════════════════════════════════════════════════════════════ */ html.hunter-hud body.download-page{ --lh-nav-h:84px; /* type scale: mono micro tags → HUD labels → reading copy → module titles → section heads → display */ --lh-fs-micro:9px;--lh-fs-label:10.5px;--lh-fs-note:13px;--lh-fs-copy:14px;--lh-fs-lead:15.5px; --lh-fs-h4:16px;--lh-fs-h3:26px;--lh-fs-h2:clamp(32px,3.3vw,46px);--lh-fs-display:clamp(50px,5.1vw,76px); /* material */ --lh-well:linear-gradient(180deg,#040303,#0b0806); --lh-well-shadow:inset 0 2px 7px rgba(0,0,0,.85),inset 0 0 0 1px rgba(77,53,20,.72),0 1px rgba(255,180,100,.05); --lh-rivet:radial-gradient(circle closest-side,#e2b47a 0 16%,#8a5f28 30%,#35240f 58%,rgba(0,0,0,.65) 78%,transparent 100%); --lh-hazard:repeating-linear-gradient(135deg,var(--hh-yellow) 0 5px,rgba(0,0,0,0) 5px 10px); --lh-diamond-visor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 0 8 4 4 8 0 4Z' fill='%23a6ff4d'/%3E%3C/svg%3E"); --lh-bezel:#0d0906; color:var(--hh-ink); font-family:var(--hh-font-text); } html.hunter-hud .download-page .space-grid{display:none!important} /* The skin makes the nav sticky (the page CSS had it static), so in-page anchors such as the hero's "See what's supported" → #compatibility would land under the opaque bar. Offset every anchorable target by the bar height; --lh-nav-h already drops to 72px under 700px, so one rule covers both sizes. */ html.hunter-hud .download-page [id]{scroll-margin-top:calc(var(--lh-nav-h) + 18px)} html.hunter-hud .download-page :focus-visible{outline:2px solid var(--hh-yellow);outline-offset:3px} html.hunter-hud .download-page a{transition:color .18s} /* ---------- Header: sticky carbon bar, full-bleed via a fixed pseudo (adds no scrollable overflow) ---------- */ html.hunter-hud .download-nav{position:sticky;top:0;z-index:60;height:var(--lh-nav-h);isolation:isolate} html.hunter-hud .download-nav:before{ content:'';position:fixed;left:0;right:0;top:0;height:var(--lh-nav-h);z-index:-1;pointer-events:none; background: linear-gradient(90deg,var(--hh-yellow) 0 56px,var(--hh-orange) 56px 130px,rgba(255,122,0,.25) 130px 45%,transparent 80%) left bottom/100% 1px no-repeat, var(--hh-hex) 0 0/45px 26px, linear-gradient(180deg,rgba(15,11,8,.96),rgba(8,6,5,.96)); border-bottom:1px solid var(--hh-edge); box-shadow:0 12px 30px rgba(0,0,0,.35); } /* The bar charges once on load (the core top line keeps the looping beam at the viewport edge). */ html.hunter-hud .download-nav:after{ content:'';position:absolute;left:0;bottom:-2px;width:22%;height:3px;pointer-events:none;opacity:0; background:linear-gradient(90deg,transparent,rgba(255,196,0,.95),transparent); animation:lh-beam 1.25s var(--hh-ease-io) .1s both; } html.hunter-hud .download-brand{gap:12px;font:700 13px/1 var(--hh-font-hud);letter-spacing:.06em;text-transform:uppercase;color:var(--hh-ink)} html.hunter-hud .download-brand b{ width:38px;height:42px;font:700 14px/1 var(--hh-font-hud);letter-spacing:0;color:#1c0b00; background:linear-gradient(180deg,#ffe98f,var(--hh-yellow) 45%,#ff6a00); box-shadow:inset 0 1px rgba(255,255,255,.6),inset 0 -3px rgba(120,40,0,.4); } html.hunter-hud .download-brand small{font:700 10px/1 var(--hh-font-mono);letter-spacing:.24em;color:var(--hh-orange);transition:color .2s} html.hunter-hud .download-brand:hover small{color:var(--hh-yellow)} html.hunter-hud .download-nav>div{gap:18px} html.hunter-hud .download-nav>div>a{padding:9px 12px} html.hunter-hud .download-nav select{ padding:9px 30px 9px 12px!important;font:600 11.5px/1.2 var(--hh-font-hud)!important;letter-spacing:.08em;text-transform:uppercase; clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); } /* the chamfer clips an outside outline: ring the select from the inside instead */ html.hunter-hud .download-nav select:focus-visible{outline:2px solid var(--hh-yellow)!important;outline-offset:-4px!important} /* ═══════════════════════════════════════════════════════════════════════════════ 2. Hero copy · display type, the armed download control ═══════════════════════════════════════════════════════════════════════════════ */ html.hunter-hud .download-hero{position:relative;padding:74px 0 86px} /* powered-on spill: the device lights the ground around it (kept inside the hero box, so no overflow) */ html.hunter-hud .download-hero:before{ content:'';position:absolute;right:0;top:4%;width:50%;height:92%;pointer-events:none; background:radial-gradient(closest-side,rgba(255,112,0,.13),rgba(255,112,0,.045) 55%,transparent); animation:hh-fade 1.2s ease-out .35s both; } /* power-on sequence, 60 ms apart */ html.hunter-hud .hero-copy>*{animation:hh-rise .55s var(--hh-ease-out) .05s both} html.hunter-hud .hero-copy>:nth-child(3){animation-delay:.17s} html.hunter-hud .hero-copy>:nth-child(4){animation-delay:.23s} html.hunter-hud .hero-copy>:nth-child(5){animation-delay:.29s} html.hunter-hud .hero-copy>:nth-child(n+6){animation-delay:.35s} html.hunter-hud .download-page .download-kicker{margin:0;gap:10px} html.hunter-hud .download-page .hero-copy .download-kicker:after{display:none} /* release chip: the page's real version number, tabular, in a chamfered readout */ html.hunter-hud .download-page .hero-copy .download-kicker>span:last-child{ display:inline-flex;align-items:center;gap:6px;margin-left:4px;padding:4px 7px 4px 7px;font-size:0;letter-spacing:0; background:rgba(8,6,4,.9);border:1px solid var(--hh-edge-2); clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); } html.hunter-hud .download-page .hero-copy .download-kicker>span:last-child:before{content:'VER';content:'VER' / '';font:700 8.5px/1 var(--hh-font-mono);letter-spacing:.2em;color:var(--hh-dim)} html.hunter-hud .download-page .hero-copy .download-kicker [data-release-version]{font:700 10.5px/1 var(--hh-font-mono);letter-spacing:.1em;color:var(--hh-yellow);font-variant-numeric:tabular-nums} html.hunter-hud .download-page .signal{ flex:0 0 6px;width:6px;height:6px;border-radius:0;background:var(--hh-visor);transform:rotate(45deg); box-shadow:0 0 8px rgba(166,255,77,.8); } html.hunter-hud .download-page h1{ margin:22px 0 24px; font:600 condensed var(--lh-fs-display)/.92 var(--hh-font-hud);letter-spacing:.012em;text-transform:uppercase; color:var(--hh-ink);text-shadow:0 0 30px rgba(255,122,0,.26);text-wrap:balance; animation:lh-reveal-x .75s var(--hh-ease-out) .11s backwards; } html.hunter-hud .download-page h1 em{ display:inline-block;font-style:normal;color:var(--hh-orange-2);text-shadow:none; background:linear-gradient(180deg,#ffeaa6 0%,var(--hh-yellow) 34%,var(--hh-orange) 76%,#ff5400 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 0 18px rgba(255,98,0,.34)); } /* ~60 characters a line (em, not ch: a Segoe UI "0" is wider than its average letter, so ch measures run short) */ html.hunter-hud .download-lead{max-width:30em;color:var(--hh-dim);font:400 var(--lh-fs-lead)/1.75 var(--hh-font-text);text-wrap:pretty} /* The armed control. The actions row becomes a two-cell grid so a pseudo-element can share the button's cell and size itself to it (margin:-10px) without anchor positioning: a recessed bay with corner brackets and a hazard strip. */ html.hunter-hud .download-page .download-actions{ display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:40px;row-gap:16px;margin:40px 0 20px; } html.hunter-hud .download-page .download-actions>.download-primary{grid-area:1/1;position:relative;z-index:1} html.hunter-hud .download-page .download-actions>.download-secondary{grid-area:1/2} html.hunter-hud .download-page .download-actions:before{ --lh-bay:rgba(255,152,32,.8); content:'';grid-area:1/1;align-self:stretch;justify-self:stretch;margin:-10px;pointer-events:none; background: linear-gradient(var(--lh-bay),var(--lh-bay)) left top/14px 2px no-repeat, linear-gradient(var(--lh-bay),var(--lh-bay)) left top/2px 14px no-repeat, linear-gradient(var(--lh-bay),var(--lh-bay)) right top/14px 2px no-repeat, linear-gradient(var(--lh-bay),var(--lh-bay)) right top/2px 14px no-repeat, linear-gradient(var(--lh-bay),var(--lh-bay)) left bottom/14px 2px no-repeat, linear-gradient(var(--lh-bay),var(--lh-bay)) left bottom/2px 14px no-repeat, linear-gradient(var(--lh-bay),var(--lh-bay)) right bottom/14px 2px no-repeat, linear-gradient(var(--lh-bay),var(--lh-bay)) right bottom/2px 14px no-repeat, var(--lh-hazard) left 22px bottom 3px/66px 4px no-repeat, linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.28)); box-shadow:inset 0 0 0 1px rgba(77,53,20,.55),inset 0 8px 16px rgba(0,0,0,.6); transition:background-position .35s var(--hh-ease-out); animation:lh-lock .6s var(--hh-ease-out) .45s both; } /* lock-on: the brackets slide 4px in (background-position lands on whole pixels, so they stay crisp) and turn yellow */ html.hunter-hud .download-page .download-actions:has(>.download-primary:hover):before, html.hunter-hud .download-page .download-actions:has(>.download-primary:focus-visible):before{ --lh-bay:var(--hh-yellow); background-position:left 4px top 4px,left 4px top 4px,right 4px top 4px,right 4px top 4px,left 4px bottom 4px,left 4px bottom 4px,right 4px bottom 4px,right 4px bottom 4px,left 22px bottom 3px,0 0; } /* power key with a recessed trigger cell (both download buttons) */ html.hunter-hud .download-page .download-primary{ min-height:56px;padding:0 28px 0 0!important;gap:20px; font:700 13px/1.15 var(--hh-font-hud)!important;letter-spacing:.14em!important; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 6px,transparent 6px 12px),linear-gradient(180deg,var(--hh-yellow) 0%,var(--hh-orange-2) 55%,var(--hh-orange) 100%)!important; transition:color .18s,border-color .18s,box-shadow .22s,translate .25s var(--hh-ease-out)!important; } html.hunter-hud .download-page .download-primary:hover{ translate:0 -1px; background:repeating-linear-gradient(115deg,rgba(255,255,255,.1) 0 6px,transparent 6px 12px),linear-gradient(180deg,#ffe066 0%,var(--hh-yellow) 45%,var(--hh-orange-2) 100%)!important; } html.hunter-hud .download-page .download-primary>span:first-child{ display:grid;place-items:center;align-self:stretch;flex:0 0 54px; font:700 22px/1 var(--hh-font-hud);color:var(--hh-yellow);text-shadow:0 0 12px rgba(255,196,0,.85); background:linear-gradient(180deg,#2b1503,#140a01); box-shadow:inset -1px 0 rgba(255,226,122,.5),inset 0 3px 8px rgba(0,0,0,.65); transition:color .2s,text-shadow .2s; } html.hunter-hud .download-page .download-primary:hover>span:first-child{color:#fff4c2;text-shadow:0 0 14px rgba(255,220,90,1)} html.hunter-hud .download-page .download-primary:focus-visible{outline:2px solid #1a0a00;outline-offset:-6px} html.hunter-hud .download-page .download-secondary{ position:relative;padding:6px 0;font:600 12px/1.2 var(--hh-font-hud);letter-spacing:.14em;text-transform:uppercase;color:var(--hh-orange-2)!important; } html.hunter-hud .download-page .download-secondary:after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--hh-yellow);box-shadow:0 0 10px var(--hh-orange);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--hh-ease-out)} html.hunter-hud .download-page .download-secondary:hover{color:var(--hh-yellow)!important} html.hunter-hud .download-page .download-secondary:hover:after{transform:scaleX(1)} /* target readout under the bay (the page's own requirement string + the release size once it loads) */ html.hunter-hud .download-page .download-meta{ display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:26px 0 0; font:700 10.5px/1.6 var(--hh-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hh-ink-2);font-variant-numeric:tabular-nums; } html.hunter-hud .download-page .download-meta:before{content:'// TARGET';content:'// TARGET' / '';color:var(--hh-dim);letter-spacing:.2em} html.hunter-hud .download-page .small-note{font:12.5px/1.7 var(--hh-font-text);color:var(--hh-dim)} /* attention callout (yellow): an account is required */ html.hunter-hud .download-page .account-note{ position:relative;max-width:420px;margin-top:22px;padding:10px 14px 10px 44px;font:13px/1.55 var(--hh-font-text);color:var(--hh-ink-2); background:linear-gradient(90deg,rgba(255,196,0,.12),rgba(255,196,0,.02) 80%);border-left:2px solid var(--hh-yellow); clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%); } html.hunter-hud .download-page .account-note>span:first-child{ position:absolute;left:12px;top:50%;display:grid;place-items:center;width:22px;height:22px;margin-top:-11px;padding:0; font-size:12px;line-height:1;color:var(--hh-yellow);text-shadow:0 0 8px rgba(255,196,0,.75); background:var(--lh-well);box-shadow:var(--lh-well-shadow); } /* ═══════════════════════════════════════════════════════════════════════════════ 3. The device chassis (console preview) · the page's centrepiece ═══════════════════════════════════════════════════════════════════════════════ */ /* Channel state from the pressed console key (real page state): LED cluster, CH readout, sliding key rail, re-scan. */ html.hunter-hud .download-page .nexus-device{ --lh-ch-i:0;--lh-ch-n:1;--lh-led-off:#4a3417;--lh-led-1:var(--hh-yellow);--lh-led-2:var(--lh-led-off);--lh-led-3:var(--lh-led-off);--lh-led-4:var(--lh-led-off); counter-reset:lh-ch var(--lh-ch-n); isolation:auto; animation:hh-panel-in .7s var(--hh-ease-out) .15s both; } html.hunter-hud .download-page .nexus-device:has([data-console=gamecube][aria-pressed=true]){--lh-ch-i:1;--lh-ch-n:2;--lh-led-1:var(--lh-led-off);--lh-led-2:var(--hh-yellow)} html.hunter-hud .download-page .nexus-device:has([data-console=wii][aria-pressed=true]){--lh-ch-i:2;--lh-ch-n:3;--lh-led-1:var(--lh-led-off);--lh-led-3:var(--hh-yellow)} html.hunter-hud .download-page .nexus-device:has([data-console="3ds"][aria-pressed=true]){--lh-ch-i:3;--lh-ch-n:4;--lh-led-1:var(--lh-led-off);--lh-led-4:var(--hh-yellow)} html.hunter-hud .download-page .nexus-device.hh-plate{ --cut:18px; background: radial-gradient(360px circle at var(--mx,-999px) var(--my,-999px),rgba(255,140,30,.08),transparent 65%), linear-gradient(to bottom right,transparent calc(50% - 1px),var(--hh-edge-hot) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) top left/var(--cut) var(--cut) no-repeat border-box, linear-gradient(to bottom right,transparent calc(50% - 1px),var(--hh-edge-hot) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) bottom right/var(--cut) var(--cut) no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/28px 3px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/3px 28px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/28px 3px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/3px 28px no-repeat border-box, linear-gradient(180deg,#1e150c 0,#140e08 44px,#100b07 62%,#0a0806 100%)!important; box-shadow:inset 0 1px rgba(255,214,150,.11),inset 0 -1px rgba(0,0,0,.75),inset 1px 0 rgba(255,190,110,.04),inset -1px 0 rgba(0,0,0,.45)!important; } html.hunter-hud .download-page .nexus-device:before{left:var(--cut);top:0;width:44%;height:2px;background:linear-gradient(90deg,var(--hh-yellow),var(--hh-orange) 45%,transparent)} html.hunter-hud .download-page .nexus-device:after{display:none} /* top cap: PWR LED, device name, channel LED cluster, channel range */ html.hunter-hud .download-page .device-header{ position:relative;gap:12px;padding:15px 18px 14px 22px; font:700 9.5px/1 var(--hh-font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--hh-orange-2); background:linear-gradient(180deg,rgba(255,200,120,.05),rgba(255,200,120,0) 85%); border-bottom:1px solid #000;box-shadow:0 1px rgba(255,170,90,.07); } html.hunter-hud .download-page .device-header>span:first-child{display:flex;align-items:center;margin-right:auto;min-width:0} html.hunter-hud .download-page .device-header>span:last-child{order:2;color:var(--hh-dim);letter-spacing:.16em;font-variant-numeric:tabular-nums} html.hunter-hud .download-page .device-header .signal{ display:inline-block;flex:0 0 7px;width:7px;height:7px;margin-right:10px;background:var(--hh-visor);box-shadow:0 0 9px rgba(166,255,77,.85); animation:hh-fade .2s steps(2,jump-none) .5s both; } /* four channel lenses (one per console key); the lit one carries a halo that follows --lh-ch-i */ html.hunter-hud .download-page .device-header:after{ content:'';order:1;flex:0 0 38px;height:11px; background: linear-gradient(var(--lh-led-1),var(--lh-led-1)) 3px 3px/5px 5px no-repeat, linear-gradient(var(--lh-led-2),var(--lh-led-2)) 12px 3px/5px 5px no-repeat, linear-gradient(var(--lh-led-3),var(--lh-led-3)) 21px 3px/5px 5px no-repeat, linear-gradient(var(--lh-led-4),var(--lh-led-4)) 30px 3px/5px 5px no-repeat, radial-gradient(closest-side,rgba(255,196,0,.6),rgba(255,160,0,.18) 60%,rgba(255,160,0,0)) calc(var(--lh-ch-i) * 9px) 0/11px 11px no-repeat; animation:hh-fade .3s steps(3,jump-none) .62s both; } /* the glass: a recessed screen inside a 12px riveted bezel with tick rulers */ html.hunter-hud .download-page .device-stage{ padding:12px; background: radial-gradient(ellipse 58% 62% at 50% 50%,rgba(255,122,0,.22),transparent 72%), repeating-linear-gradient(180deg,rgba(255,160,60,.035) 0 1px,transparent 1px 4px), var(--hh-hex) 0 0/45px 26px, linear-gradient(180deg,#0c0806,#060403); border-bottom:1px solid #000; /* 13px ring: 12px sits under the bezel overlay, the 13th pixel is the lit glass edge; then the glass vignette */ box-shadow:inset 0 0 0 13px rgba(255,152,32,.3),inset 0 0 34px 14px rgba(0,0,0,.78); animation:lh-screen-on .6s linear .5s both; } html.hunter-hud .download-page .device-stage:before{ content:'CH ' counter(lh-ch,decimal-leading-zero) ' / 04'; content:'CH ' counter(lh-ch,decimal-leading-zero) ' / 04' / ''; position:absolute;inset:0;z-index:3;pointer-events:none; display:flex;justify-content:flex-end;align-items:flex-start;padding:24px 30px 0 0; font:700 9px/1 var(--hh-font-mono);letter-spacing:.22em;color:var(--hh-yellow);font-variant-numeric:tabular-nums;text-shadow:0 0 6px #000,0 0 10px #000; background: var(--lh-rivet) left 3px top 3px/7px 7px no-repeat, var(--lh-rivet) right 3px top 3px/7px 7px no-repeat, var(--lh-rivet) left 3px bottom 3px/7px 7px no-repeat, var(--lh-rivet) right 3px bottom 3px/7px 7px no-repeat, repeating-linear-gradient(180deg,rgba(255,196,0,.7) 0 1px,transparent 1px 50px) left 2px top 25px/8px calc(100% - 50px) no-repeat, repeating-linear-gradient(180deg,rgba(255,152,32,.38) 0 1px,transparent 1px 10px) left 5px top 25px/5px calc(100% - 50px) no-repeat, repeating-linear-gradient(180deg,rgba(255,196,0,.7) 0 1px,transparent 1px 50px) right 2px top 25px/8px calc(100% - 50px) no-repeat, repeating-linear-gradient(180deg,rgba(255,152,32,.38) 0 1px,transparent 1px 10px) right 5px top 25px/5px calc(100% - 50px) no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) left 22px top 22px/16px 2px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) left 22px top 22px/2px 16px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) right 22px bottom 22px/16px 2px no-repeat, linear-gradient(var(--hh-orange),var(--hh-orange)) right 22px bottom 22px/2px 16px no-repeat, linear-gradient(180deg,#171009,var(--lh-bezel)) top/100% 12px no-repeat, linear-gradient(0deg,#080605,var(--lh-bezel)) bottom/100% 12px no-repeat, linear-gradient(var(--lh-bezel),var(--lh-bezel)) left/12px 100% no-repeat, linear-gradient(var(--lh-bezel),var(--lh-bezel)) right/12px 100% no-repeat; } /* scan pass over the imagery; restarts on every channel change (a new animation-name restarts the animation) */ html.hunter-hud .download-page .device-stage:after{ content:'';position:absolute;left:12px;right:12px;top:0;height:70px;z-index:2;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(255,170,60,.03) 80%,rgba(255,215,120,.2) 98%,transparent); transform:translateY(-100%); animation:lh-scan-a 8s var(--hh-ease-io) .9s infinite;animation-play-state:var(--hud-play); } html.hunter-hud .download-page .nexus-device:has([data-console=gamecube][aria-pressed=true]) .device-stage:after{animation-name:lh-scan-b;animation-delay:0s} html.hunter-hud .download-page .nexus-device:has([data-console=wii][aria-pressed=true]) .device-stage:after{animation-name:lh-scan-c;animation-delay:0s} html.hunter-hud .download-page .nexus-device:has([data-console="3ds"][aria-pressed=true]) .device-stage:after{animation-name:lh-scan-d;animation-delay:0s} /* The console artwork ships as an opaque bitmap on a cold slate backdrop (ps2.png is the worst offender: a light slate rectangle). An inset box-shadow paints UNDER a replaced element's content, so it cannot soften the hard photo edge — use a radial mask whose transparent stop lands INSIDE the element box (radii are radii, not diameters: 54% means the left/right edges sit at .5/.54 = 93% of the ramp and fade out) so the baked backdrop dissolves into the ember stage, and push the art further into the orange world. */ html.hunter-hud .download-page .device-stage img{ box-shadow:none; -webkit-mask-image:radial-gradient(ellipse 54% 58% at 50% 48%,#000 0 46%,rgba(0,0,0,.5) 78%,transparent 100%); mask-image:radial-gradient(ellipse 54% 58% at 50% 48%,#000 0 46%,rgba(0,0,0,.5) 78%,transparent 100%); filter:grayscale(.35) sepia(.85) hue-rotate(-14deg) saturate(1.55) brightness(.88) contrast(1.2) drop-shadow(0 14px 22px rgba(0,0,0,.7)) drop-shadow(0 0 20px rgba(255,122,0,.22)); animation:lh-materialize .7s var(--hh-ease-out) .72s both,controller-float 6s ease-in-out 1.45s infinite; animation-play-state:var(--hud-play); } /* radar: a fixed reticle ring with cardinal ticks and a contact, and a sweeping ring that pings the contact as it passes (both loops share the 12s period; the contact sits at ~335deg, so it flares at ~93% of the sweep) */ html.hunter-hud .download-page .radar-ring{ width:212px;height:212px;border:1px solid rgba(255,152,32,.26); box-shadow:0 0 0 26px rgba(255,122,0,.028),0 0 0 58px rgba(255,122,0,.018); background: linear-gradient(rgba(255,196,0,.65),rgba(255,196,0,.65)) center top/1px 9px no-repeat, linear-gradient(rgba(255,196,0,.65),rgba(255,196,0,.65)) center bottom/1px 9px no-repeat, linear-gradient(rgba(255,196,0,.65),rgba(255,196,0,.65)) left center/9px 1px no-repeat, linear-gradient(rgba(255,196,0,.65),rgba(255,196,0,.65)) right center/9px 1px no-repeat; animation:lh-ring-in .7s var(--hh-ease-out) .62s both; } html.hunter-hud .download-page .radar-ring:after{ top:15px;left:56px;width:7px;height:7px;border-radius:0;background:var(--hh-yellow);transform:rotate(45deg); box-shadow:0 0 10px var(--hh-yellow),0 0 22px var(--hh-orange); animation:lh-contact 12s linear infinite;animation-play-state:var(--hud-play); } html.hunter-hud .download-page .radar-ring.second{ width:254px;height:254px;border:1px dashed rgba(255,152,32,.3);border-top:2px solid var(--hh-yellow);box-shadow:none; background:conic-gradient(from 0deg,transparent 0 292deg,rgba(255,160,40,.025) 310deg,rgba(255,170,40,.15) 357deg,rgba(255,226,140,.34) 360deg); animation:lh-ring-in .7s var(--hh-ease-out) .68s both,radar-spin 12s linear infinite; animation-play-state:var(--hud-play); } html.hunter-hud .download-page .radar-ring.second:after{display:none} html.hunter-hud .download-page .device-coordinate{ left:30px;bottom:24px;z-index:2;display:flex;align-items:center;gap:8px; font:700 8.5px/1 var(--hh-font-mono);letter-spacing:.22em;color:var(--hh-yellow);text-shadow:0 0 6px rgba(0,0,0,.95); } html.hunter-hud .download-page .device-coordinate:before{content:'';flex:0 0 5px;height:5px;background:var(--hh-visor);transform:rotate(45deg);box-shadow:0 0 7px rgba(166,255,77,.8)} /* key bed: recessed well, raised keys, a yellow rail that slides under the pressed key */ html.hunter-hud .download-page .console-tabs{ position:relative;gap:6px;margin:14px 18px 18px;padding:5px 5px 8px; background:var(--lh-well);box-shadow:var(--lh-well-shadow); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); } html.hunter-hud .download-page .console-tabs:after{ content:'';position:absolute;left:5px;bottom:2px;width:calc((100% - 28px)/4);height:2px;pointer-events:none; background:var(--hh-yellow);box-shadow:0 0 8px var(--hh-orange),0 0 2px var(--hh-yellow); transform:translateX(calc(var(--lh-ch-i,0) * (100% + 6px)));transition:transform .45s var(--hh-ease-out); animation:hh-fade .3s ease-out 1.02s both; } html.hunter-hud .download-page .console-tabs button{ padding:10px 2px!important;font-size:10.5px!important;letter-spacing:.12em!important;color:var(--hh-dim)!important; background:linear-gradient(180deg,#241b10,#130e08)!important; box-shadow:inset 0 1px rgba(255,205,140,.11),inset 0 -2px rgba(0,0,0,.5)!important; transition:color .18s,border-color .18s,box-shadow .22s,translate .2s var(--hh-ease-out)!important; animation:hh-rise .45s var(--hh-ease-out) .9s both; } html.hunter-hud .download-page .console-tabs button:nth-child(2){animation-delay:.95s} html.hunter-hud .download-page .console-tabs button:nth-child(3){animation-delay:1s} html.hunter-hud .download-page .console-tabs button:nth-child(4){animation-delay:1.05s} html.hunter-hud .download-page .console-tabs button:hover{ translate:0 -1px;color:var(--hh-ink)!important;border-color:var(--hh-orange)!important; box-shadow:inset 0 1px rgba(255,205,140,.15),inset 0 -12px 18px -12px rgba(255,122,0,.6)!important; } html.hunter-hud .download-page .console-tabs button[aria-pressed=true]{ translate:0 1px;color:var(--hh-yellow)!important;border-color:rgba(255,170,0,.5)!important;text-shadow:0 0 10px rgba(255,170,0,.45)!important; background:linear-gradient(180deg,rgba(255,170,0,.17),rgba(255,122,0,.04)),linear-gradient(180deg,#140f08,#0c0906)!important; box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,170,0,.22)!important; } html.hunter-hud .download-page .console-tabs button:focus-visible{outline:2px solid var(--hh-yellow);outline-offset:-5px} /* bottom cap: emulator readout in a recessed LCD well */ html.hunter-hud .download-page .device-footer{ gap:14px;padding:13px 18px 17px;border-top:1px solid #000; background:linear-gradient(180deg,rgba(255,122,0,.05),transparent 70%);box-shadow:inset 0 1px rgba(255,170,90,.07); } html.hunter-hud .download-page .device-footer>div{ min-width:0;padding:8px 18px 9px 14px;background:var(--lh-well);box-shadow:var(--lh-well-shadow); clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); animation:hh-slide-in .5s var(--hh-ease-out) 1.1s both; } html.hunter-hud .download-page .device-footer small{font:700 8.5px/1 var(--hh-font-mono);letter-spacing:.22em;color:var(--hh-dim)} html.hunter-hud .download-page .device-footer strong{margin-top:3px;font:600 17px/1.15 var(--hh-font-hud);letter-spacing:.08em;text-transform:uppercase;color:var(--hh-yellow-2);text-shadow:0 0 12px rgba(255,196,0,.4)} html.hunter-hud .download-page .device-footer>span{font:600 10px/1.35 var(--hh-font-hud);letter-spacing:.14em;text-transform:uppercase;color:var(--hh-ink-2);text-align:right} /* ═══════════════════════════════════════════════════════════════════════════════ 4. Feature modules ═══════════════════════════════════════════════════════════════════════════════ */ html.hunter-hud .download-page .download-features{position:relative;gap:18px;padding:62px 0 0;border:0;counter-reset:lh-feat} /* the hero ends on a hazard strip + energy line, with the band's mono tag under it (alt text '' keeps the decorative string out of the accessibility tree) */ html.hunter-hud .download-page .download-features:before{ content:'';position:absolute;left:0;right:0;top:0;height:5px;pointer-events:none; background: var(--lh-hazard) left top/96px 5px no-repeat, linear-gradient(90deg,var(--hh-edge-hot),var(--hh-edge) 30%,transparent 90%) left 108px top 2px/calc(100% - 108px) 1px no-repeat; } html.hunter-hud .download-page .download-features:after{ content:'// INSIDE THE LAUNCHER';content:'// INSIDE THE LAUNCHER' / ''; position:absolute;left:0;top:22px;pointer-events:none; font:700 9px/1 var(--hh-font-mono);letter-spacing:.24em;color:var(--hh-dim); } html.hunter-hud .download-page .download-features article{ position:relative;--cut:10px;padding:24px 26px 28px;counter-increment:lh-feat; transition:border-color .25s,box-shadow .3s,translate .35s var(--hh-ease-out); } html.hunter-hud .download-page .download-features article.hh-plate, html.hunter-hud .download-page .compat-cards article.hh-plate{ background: radial-gradient(300px circle at var(--mx,-999px) var(--my,-999px),rgba(255,140,30,.1),transparent 65%), linear-gradient(90deg,rgba(255,196,0,.5),rgba(255,122,0,.2) 36%,rgba(255,122,0,0) 70%) left var(--cut) top 0/calc(100% - var(--cut) - 24px) 1px no-repeat border-box, linear-gradient(to bottom right,transparent calc(50% - .9px),var(--hh-edge-hot) calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) top left/var(--cut) var(--cut) no-repeat border-box, linear-gradient(to bottom right,transparent calc(50% - .9px),var(--hh-edge-hot) calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) bottom right/var(--cut) var(--cut) no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/var(--lh-bracket,18px) 2px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/2px var(--lh-bracket,18px) no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/var(--lh-bracket,18px) 2px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/2px var(--lh-bracket,18px) no-repeat border-box, linear-gradient(180deg,rgba(255,190,110,.035),transparent 38%), linear-gradient(165deg,#17110a,#0a0807 72%)!important; box-shadow:inset 0 1px rgba(255,214,150,.06),inset 0 -1px rgba(0,0,0,.6),inset 0 -44px 50px -44px rgba(0,0,0,.65)!important; } html.hunter-hud .download-page .download-features article:hover, html.hunter-hud .download-page .compat-cards article:hover{ translate:0 -2px;border-color:var(--hh-orange)!important; box-shadow:inset 0 1px rgba(255,214,150,.1),inset 0 0 0 1px rgba(255,122,0,.18),inset 0 -30px 36px -28px rgba(255,122,0,.42)!important; } html.hunter-hud .download-page .download-features article:before{ content:'// 0' counter(lh-feat);content:'// 0' counter(lh-feat) / '';position:absolute;right:18px;top:20px;pointer-events:none; font:700 9px/1 var(--hh-font-mono);letter-spacing:.2em;color:var(--hh-muted);font-variant-numeric:tabular-nums;transition:color .25s; } html.hunter-hud .download-page .download-features article:hover:before{color:var(--hh-yellow)} /* icon socket */ html.hunter-hud .download-page .feature-icon{ position:relative;display:grid;place-items:center;width:42px;height:42px;font-size:21px;line-height:1;color:var(--hh-orange); text-shadow:0 0 14px rgba(255,122,0,.8); background:var(--lh-well);box-shadow:var(--lh-well-shadow); clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); transition:color .25s,text-shadow .25s; } html.hunter-hud .download-page .download-features article:hover .feature-icon{color:var(--hh-yellow);text-shadow:0 0 16px rgba(255,196,0,.9)} /* red = live: a steady red glyph with a small on-air lamp that breathes */ html.hunter-hud .download-page .feature-icon.live-icon, html.hunter-hud .download-page .download-features article:hover .feature-icon.live-icon{color:var(--hh-red);text-shadow:0 0 14px rgba(255,59,36,.85)} html.hunter-hud .download-page .feature-icon.live-icon:after{ content:'';position:absolute;right:5px;top:5px;width:5px;height:5px;border-radius:50%;background:var(--hh-red);box-shadow:0 0 6px var(--hh-red); animation:hh-pulse 2.4s ease-in-out infinite;animation-play-state:var(--hud-play); } html.hunter-hud .download-page h2{margin:12px 0} html.hunter-hud .download-page .download-features h2{margin:20px 0 10px;font-size:var(--lh-fs-h4)!important;line-height:1.25!important;letter-spacing:.06em!important} html.hunter-hud .download-page .download-features p{margin:0;color:var(--hh-dim);font:var(--lh-fs-note)/1.75 var(--hh-font-text)} /* ═══════════════════════════════════════════════════════════════════════════════ 5. Compatibility · console slots ═══════════════════════════════════════════════════════════════════════════════ */ html.hunter-hud .download-page .compatibility{position:relative;padding:92px 0 88px} html.hunter-hud .download-page .compatibility:before,html.hunter-hud .download-page .first-run:before{ content:'';position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,var(--hh-edge-hot),var(--hh-edge) 30%,transparent 90%); } html.hunter-hud .download-page .compatibility h2,html.hunter-hud .download-page .first-run h2{ margin:16px 0 18px;font-size:var(--lh-fs-h2)!important;line-height:1!important;letter-spacing:.02em!important;font-stretch:condensed;text-wrap:balance; } html.hunter-hud .download-page .compatibility>div:first-child>p:not(.download-kicker):not(.small-note){max-width:50ch;color:var(--hh-dim);font:var(--lh-fs-copy)/1.75 var(--hh-font-text)} html.hunter-hud .download-page .language-pills{gap:8px;margin:24px 0 12px} html.hunter-hud .download-page .language-pills span{padding:5px 10px;letter-spacing:.14em;transition:color .2s,border-color .2s} /* the page's active language (the select's real value) lights its pill: visor = current */ html.hunter-hud .download-page:has(#downloadLanguage option[value=en]:checked) .language-pills span:nth-child(1), html.hunter-hud .download-page:has(#downloadLanguage option[value=pt]:checked) .language-pills span:nth-child(2), html.hunter-hud .download-page:has(#downloadLanguage option[value=es]:checked) .language-pills span:nth-child(3){ padding-left:22px;color:#e2f6cf!important;border-color:rgba(166,255,77,.45)!important; background:var(--lh-diamond-visor) left 8px center/7px 7px no-repeat,rgba(10,13,6,.92)!important; } html.hunter-hud .download-page .compat-cards{gap:12px;counter-reset:lh-slot} html.hunter-hud .download-page .compat-cards article{ --cut:8px;--lh-bracket:14px;position:relative;justify-content:flex-start;padding:42px 20px 20px;counter-increment:lh-slot; transition:border-color .25s,box-shadow .3s,translate .35s var(--hh-ease-out); } html.hunter-hud .download-page .compat-cards article:after{ content:'SLOT ' counter(lh-slot,decimal-leading-zero);content:'SLOT ' counter(lh-slot,decimal-leading-zero) / ''; position:absolute;left:20px;top:18px;pointer-events:none; font:700 8.5px/1 var(--hh-font-mono);letter-spacing:.22em;color:var(--hh-muted);font-variant-numeric:tabular-nums;transition:color .25s; } html.hunter-hud .download-page .compat-cards article:hover:after{color:var(--hh-dim)} /* visor = ready: every slot ships with its emulator (and BIOS) */ html.hunter-hud .download-page .compat-cards article:before{ content:'READY';content:'READY' / '';position:absolute;right:16px;top:13px;pointer-events:none; padding:3px 6px 3px 17px;font:700 8px/1.2 var(--hh-font-mono);letter-spacing:.16em;color:#d3f2b4; background:var(--lh-diamond-visor) left 6px center/6px 6px no-repeat,rgba(9,12,5,.85);border:1px solid rgba(166,255,77,.3); clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px); } /* self-test blink as the slot rises in; it only dips, so the chip never depends on the animation to be visible */ html.hunter-hud .download-page .compat-cards article.hh-reveal:before{animation:lh-led-check .45s steps(1,end) .2s} html.hunter-hud .download-page .compat-cards b{font:600 17px/1.15 var(--hh-font-hud);letter-spacing:.05em;text-transform:uppercase;color:var(--hh-ink)} html.hunter-hud .download-page .compat-cards span{ align-self:flex-start;margin-top:9px;padding:3px 7px;font:700 9.5px/1.2 var(--hh-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hh-orange-2); background:rgba(8,6,4,.9);border:1px solid var(--hh-edge-2); clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); } html.hunter-hud .download-page .compat-cards p{margin:10px 0 0;color:var(--hh-dim);font:12.5px/1.6 var(--hh-font-text)} /* ═══════════════════════════════════════════════════════════════════════════════ 6. First run · a three-stage setup pipeline ═══════════════════════════════════════════════════════════════════════════════ */ html.hunter-hud .download-page .first-run{position:relative;padding:60px 0 70px;border-top:0} html.hunter-hud .download-page .first-run ol{position:relative} html.hunter-hud .download-page .first-run li{position:relative;gap:20px;margin-bottom:28px} html.hunter-hud .download-page .first-run li:last-child{margin-bottom:0} /* index socket */ html.hunter-hud .download-page .first-run li>b{ position:relative;z-index:1;flex:0 0 46px;display:grid;place-items:center;width:46px;height:46px; font:600 condensed 20px/1 var(--hh-font-hud);letter-spacing:.02em;color:var(--hh-yellow);font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(255,170,0,.6); background:var(--lh-well);box-shadow:var(--lh-well-shadow); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); } /* node light that fires when the rail pulse reaches the socket (desktop pipeline only) */ html.hunter-hud .download-page .first-run li>b:after{ content:'';position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(circle closest-side,rgba(255,196,0,.34),rgba(255,122,0,.1) 60%,transparent); box-shadow:inset 0 0 0 1px rgba(255,196,0,.55); } html.hunter-hud .download-page .first-run h3{margin:2px 0 6px;font:600 var(--lh-fs-h4)/1.25 var(--hh-font-hud);letter-spacing:.06em;text-transform:uppercase;color:var(--hh-ink)} html.hunter-hud .download-page .first-run p{margin:0;max-width:44ch;color:var(--hh-dim);font:13.5px/1.7 var(--hh-font-text)} /* vertical rail linking the sockets (tablet / phone) */ html.hunter-hud .download-page .first-run li:not(:last-child):before{ content:'';position:absolute;left:22px;top:52px;bottom:-24px;width:2px;pointer-events:none; background:repeating-linear-gradient(180deg,var(--hh-edge-hot) 0 4px,transparent 4px 8px); } @media(min-width:1001px){ html.hunter-hud .download-page .first-run{grid-template-columns:minmax(0,1fr);row-gap:34px} html.hunter-hud .download-page .first-run ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px} html.hunter-hud .download-page .first-run li{flex-direction:column;gap:20px;margin:0;padding-right:12px} html.hunter-hud .download-page .first-run li:not(:last-child):before{display:none} /* horizontal rail from the first socket centre to the last. When the steps arrive, one light pulse runs 01 → 02 → 03 and each socket lights as it passes (a one-shot: the device radar is the page's only ambient loop). The pulse waits while the steps are still hidden below the fold (li.hh-will-reveal) and starts when they rise in. */ html.hunter-hud .download-page .first-run ol:before{ content:'';position:absolute;left:23px;right:calc((100% - 56px)/3 - 23px);top:22px;height:2px;pointer-events:none; background: linear-gradient(90deg,transparent,rgba(255,226,122,.95),transparent) -120px 0/120px 2px no-repeat, repeating-linear-gradient(90deg,var(--hh-edge-hot) 0 6px,transparent 6px 10px); } html.hunter-hud .download-page .first-run ol:not(:has(> li.hh-will-reveal)):before{animation:lh-rail 2.4s linear .4s both} /* direction chevron in the gutter just before sockets 02 and 03 */ html.hunter-hud .download-page .first-run li:nth-child(n+2):after{ content:'';position:absolute;left:-20px;top:17px;width:8px;height:12px;pointer-events:none; background:var(--hh-orange-2);clip-path:polygon(0 0,100% 50%,0 100%,35% 50%); } /* the pulse centre reaches the sockets at ~6%, 50% and ~94% of its run (.56s, 1.6s, 2.64s): each light peaks then */ html.hunter-hud .download-page .first-run ol:not(:has(> li.hh-will-reveal)) li>b:after{animation:lh-node .7s ease-out .42s both} html.hunter-hud .download-page .first-run ol:not(:has(> li.hh-will-reveal)) li:nth-child(2)>b:after{animation-delay:1.46s} html.hunter-hud .download-page .first-run ol:not(:has(> li.hh-will-reveal)) li:nth-child(3)>b:after{animation-delay:2.5s} html.hunter-hud .download-page .first-run h3{margin-top:0} } /* ═══════════════════════════════════════════════════════════════════════════════ 7. Requirements · the pre-flight console (second armed control, end of the page) ═══════════════════════════════════════════════════════════════════════════════ */ html.hunter-hud .download-page .requirements{--cut:16px;position:relative;gap:56px;padding:38px 36px 42px;margin-bottom:88px} html.hunter-hud .download-page .requirements.hh-plate{ background: radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px),rgba(255,140,30,.08),transparent 65%), linear-gradient(90deg,var(--hh-yellow),var(--hh-orange) 16%,rgba(255,122,0,.22) 40%,transparent 68%) left var(--cut) top 0/calc(100% - var(--cut)) 2px no-repeat border-box, var(--lh-hazard) right 44px bottom 0/150px 4px no-repeat border-box, linear-gradient(to bottom right,transparent calc(50% - .9px),var(--hh-edge-hot) calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) top left/var(--cut) var(--cut) no-repeat border-box, linear-gradient(to bottom right,transparent calc(50% - .9px),var(--hh-edge-hot) calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) bottom right/var(--cut) var(--cut) no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/24px 3px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/3px 24px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/24px 3px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/3px 24px no-repeat border-box, radial-gradient(ellipse 50% 90% at 80% 50%,rgba(255,122,0,.07),transparent 70%), linear-gradient(165deg,#1b140b,#0a0807 72%)!important; box-shadow:inset 0 1px rgba(255,214,150,.09),inset 0 -1px rgba(0,0,0,.7)!important; } html.hunter-hud .download-page .requirements h2{margin:0 0 14px;font-size:var(--lh-fs-h3)!important;line-height:1.05!important;letter-spacing:.03em!important;font-stretch:condensed} html.hunter-hud .download-page .requirements p{max-width:62ch;margin:0 0 12px;color:var(--hh-dim);font:var(--lh-fs-copy)/1.75 var(--hh-font-text)} /* the plate has no kicker of its own: give it the eyebrow (lit dash + mono tag) the other sections carry */ html.hunter-hud .download-page .requirements>div:first-child:before{ content:'// PRE-FLIGHT';content:'// PRE-FLIGHT' / ''; display:block;margin:0 0 14px;padding-left:28px; font:700 9px/1 var(--hh-font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--hh-orange-2); background:linear-gradient(var(--hh-orange),var(--hh-orange)) left center/18px 2px no-repeat; } /* the bay: a recessed well that seats the release readout, the power key and the checksum */ html.hunter-hud .download-page .requirements>div:last-child{ position:relative;align-self:center;padding:24px 26px 22px; background:var(--lh-well);box-shadow:var(--lh-well-shadow); clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); } html.hunter-hud .download-page .requirements>div:last-child:before{ content:'';position:absolute;inset:0;pointer-events:none; background: var(--lh-rivet) right 6px top 6px/7px 7px no-repeat, var(--lh-rivet) left 6px bottom 6px/7px 7px no-repeat, linear-gradient(90deg,rgba(255,152,32,.35),transparent) left 10px top 0/60% 1px no-repeat; } html.hunter-hud .download-page .release-label{display:flex;align-items:center;gap:10px;margin-bottom:16px;font:700 9px/1 var(--hh-font-mono);letter-spacing:.24em;color:var(--hh-dim)} html.hunter-hud .download-page .release-label:before{content:'';flex:0 0 18px;height:2px;background:var(--hh-orange);box-shadow:0 0 10px rgba(255,122,0,.8)} html.hunter-hud .download-page .release-label b{padding:3px 6px;font:700 12px/1 var(--hh-font-mono);letter-spacing:.12em;color:var(--hh-yellow);font-variant-numeric:tabular-nums;background:rgba(255,196,0,.07);border:1px solid rgba(255,196,0,.28)} html.hunter-hud .download-page .requirements details{margin-top:18px;font:11px/1.6 var(--hh-font-text);color:var(--hh-dim)} html.hunter-hud .download-page .requirements summary{ display:flex;align-items:center;gap:9px;list-style:none; font:600 11px/1.4 var(--hh-font-hud);letter-spacing:.12em;text-transform:uppercase;color:var(--hh-orange-2);transition:color .18s; } html.hunter-hud .download-page .requirements summary::-webkit-details-marker{display:none} html.hunter-hud .download-page .requirements summary:before{ content:'';flex:0 0 auto;width:0;height:0;border:5px solid transparent;border-left-color:currentColor; transform-origin:35% 50%;transition:transform .22s var(--hh-ease-out); } html.hunter-hud .download-page .requirements details[open] summary:before{transform:rotate(90deg)} html.hunter-hud .download-page .requirements summary:hover{color:var(--hh-yellow)} html.hunter-hud .download-page .requirements summary:focus-visible{outline-offset:2px} html.hunter-hud .download-page .requirements code{ margin-top:10px;padding:8px 10px;font:10px/1.5 var(--hh-font-mono);letter-spacing:.06em;color:var(--hh-yellow-2); background:rgba(8,6,4,.9);border:1px solid var(--hh-edge);border-left:2px solid var(--hh-orange); } /* ---------- Footer ---------- */ html.hunter-hud .download-footer{ position:relative;padding:28px 44px 38px;border-top:1px solid var(--hh-edge); font:700 10px/1 var(--hh-font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--hh-dim);font-variant-numeric:tabular-nums; background:repeating-linear-gradient(90deg,var(--hh-orange) 0 13px,transparent 13px 17px) left 44px top/120px 4px no-repeat; } html.hunter-hud .download-footer .download-brand{font:700 10px/1 var(--hh-font-mono);letter-spacing:.24em;color:var(--hh-dim)} html.hunter-hud .download-footer .download-brand:hover{color:var(--hh-yellow)} html.hunter-hud .download-footer div a{position:relative;padding:4px 0;color:var(--hh-dim)} html.hunter-hud .download-footer div a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hh-yellow);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--hh-ease-out)} html.hunter-hud .download-footer div a:hover{color:var(--hh-yellow)} html.hunter-hud .download-footer div a:hover:after{transform:scaleX(1)} html.hunter-hud .download-footer>span{display:flex;align-items:center;gap:9px;color:var(--hh-dim)} html.hunter-hud .download-footer>span:before{content:'';flex:0 0 6px;height:6px;background:var(--hh-visor);transform:rotate(45deg);box-shadow:0 0 8px rgba(166,255,77,.7)} /* ---------- HUD tags follow the page language (launcher-download.js sets on load and on every switch). VER / CH / SLOT are universal abbreviations and stay as they are. ---------- */ html.hunter-hud[lang=pt] .download-page .download-meta:before, html.hunter-hud[lang=es] .download-page .download-meta:before{content:'// SISTEMA';content:'// SISTEMA' / ''} html.hunter-hud[lang=pt] .download-page .download-features:after{content:'// DENTRO DO LAUNCHER';content:'// DENTRO DO LAUNCHER' / ''} html.hunter-hud[lang=es] .download-page .download-features:after{content:'// DENTRO DEL LAUNCHER';content:'// DENTRO DEL LAUNCHER' / ''} html.hunter-hud[lang=pt] .download-page .compat-cards article:before{content:'PRONTO';content:'PRONTO' / ''} html.hunter-hud[lang=es] .download-page .compat-cards article:before{content:'LISTO';content:'LISTO' / ''} html.hunter-hud[lang=pt] .download-page .requirements>div:first-child:before{content:'// PR\C9-VOO';content:'// PR\C9-VOO' / ''} html.hunter-hud[lang=es] .download-page .requirements>div:first-child:before{content:'// PREVUELO';content:'// PREVUELO' / ''} /* ---------- Load entrance for modules already on screen (the scroll reveal only handles what starts below the fold) ---------- */ html.hunter-hud .download-page .download-features article:not(.hh-will-reveal):not(.hh-reveal){animation:hh-rise .55s var(--hh-ease-out) .5s both} html.hunter-hud .download-page .download-features article:not(.hh-will-reveal):not(.hh-reveal):nth-child(2){animation-delay:.56s} html.hunter-hud .download-page .download-features article:not(.hh-will-reveal):not(.hh-reveal):nth-child(3){animation-delay:.62s} /* scroll reveal staggers (siblings entering together) */ html.hunter-hud .download-page .download-features article.hh-reveal:nth-child(2), html.hunter-hud .download-page .first-run li.hh-reveal:nth-child(2){animation-delay:.06s} html.hunter-hud .download-page .download-features article.hh-reveal:nth-child(3), html.hunter-hud .download-page .first-run li.hh-reveal:nth-child(3){animation-delay:.12s} html.hunter-hud .download-page .compat-cards article.hh-reveal:nth-child(2){animation-delay:.05s} html.hunter-hud .download-page .compat-cards article.hh-reveal:nth-child(3){animation-delay:.1s} html.hunter-hud .download-page .compat-cards article.hh-reveal:nth-child(4){animation-delay:.15s} /* ---------- Responsive (download page) ---------- */ /* below ~1080px the pre-flight column gets too narrow for the power key's one-line label: stack the console and lay the bay out as a row (release readout + key, checksum underneath) */ @media(max-width:1080px){ html.hunter-hud .download-page .requirements{grid-template-columns:minmax(0,1fr);gap:26px} html.hunter-hud .download-page .requirements>div:last-child{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;column-gap:28px;row-gap:14px;align-self:stretch} html.hunter-hud .download-page .release-label{margin:0} html.hunter-hud .download-page .requirements details{flex:1 0 100%;margin-top:2px} } @media(max-width:1000px){ html.hunter-hud .download-page .console-tabs button{letter-spacing:.06em!important} html.hunter-hud .download-page .download-actions{grid-template-columns:auto} html.hunter-hud .download-page .download-actions>.download-secondary{grid-area:2/1;margin-top:10px} html.hunter-hud .download-page .radar-ring{width:186px;height:186px} html.hunter-hud .download-page .radar-ring:after{top:13px;left:49px} html.hunter-hud .download-page .radar-ring.second{width:222px;height:222px} html.hunter-hud .download-footer{padding-left:28px;padding-right:28px;background-position:left 28px top} } @media(max-width:700px){ html.hunter-hud body.download-page{--lh-nav-h:72px;--lh-fs-h3:22px} html.hunter-hud .download-nav{height:var(--lh-nav-h)} html.hunter-hud .download-hero{padding:34px 0 50px} html.hunter-hud .download-hero:before{top:auto;bottom:0;right:0;width:100%;height:58%} html.hunter-hud .download-page h1{font-size:clamp(44px,12.5vw,58px);margin:18px 0 18px} html.hunter-hud .download-page .download-actions{margin:34px 10px 18px} html.hunter-hud .download-page .download-primary{padding-right:22px!important;gap:16px} html.hunter-hud .download-page .download-primary>span:first-child{flex-basis:48px} html.hunter-hud .download-page .nexus-device{--cut:12px} html.hunter-hud .download-page .device-header{padding:13px 14px 12px 16px;letter-spacing:.18em} html.hunter-hud .download-page .device-stage:before{padding:22px 26px 0 0} html.hunter-hud .download-page .console-tabs{margin:12px 14px 16px} html.hunter-hud .download-page .console-tabs button{font-size:10px!important;letter-spacing:.05em!important} html.hunter-hud .download-page .device-footer{padding:12px 14px 15px} html.hunter-hud .download-page .device-footer>span{letter-spacing:.08em} html.hunter-hud .download-page .device-footer>div{padding:7px 14px 8px 12px} html.hunter-hud .download-page .download-features{padding-top:48px} html.hunter-hud .download-page .download-features:after{top:18px} html.hunter-hud .download-page .download-features article{--cut:8px;padding:20px 18px 22px} html.hunter-hud .download-page .download-features article:before{right:14px;top:16px} html.hunter-hud .download-page .download-features h2{margin:4px 0 8px} html.hunter-hud .download-page .feature-icon{width:36px;height:36px;font-size:18px} html.hunter-hud .download-page .compatibility{padding:52px 0} html.hunter-hud .download-page .compat-cards article{padding:38px 14px 16px} html.hunter-hud .download-page .compat-cards article:after{left:14px;top:16px} html.hunter-hud .download-page .compat-cards article:before{right:10px;top:11px;padding-left:15px;background-position:left 5px center,0 0} html.hunter-hud .download-page .compat-cards b{font-size:15.5px} html.hunter-hud .download-page .first-run{padding:40px 0 44px} html.hunter-hud .download-page .requirements{--cut:12px;padding:26px 20px 30px;margin-bottom:44px} html.hunter-hud .download-page .requirements>div:last-child{padding:20px 14px 18px;align-self:stretch} /* the bay is ~265px wide at 390 with a classic scrollbar: keep the key's label on one line (ES is the longest, 23 chars) */ html.hunter-hud .download-page .requirements .download-primary{font-size:12px!important;letter-spacing:.06em!important;gap:12px;padding-right:14px!important} html.hunter-hud .download-page .requirements .download-primary>span:first-child{flex-basis:44px} html.hunter-hud .download-footer{padding:24px 20px 32px;background-position:left 20px top} html.hunter-hud .download-nav select{max-width:118px} } /* ═══════════════════════════════════════════════════════════════════════════════ 8. launcher-play gate page (plain page: inline cyan styles) + .og-launcher-dialog (launcher-play.css) ═══════════════════════════════════════════════════════════════════════════════ */ html.hunter-hud body:has(> main > h1){font-family:var(--hh-font-text);color:var(--hh-ink)} /* console-weight plate. The links sit on one row under the copy; main's own colour goes transparent so the bare " · " separator text node between them disappears (every child sets its own colour, nothing else is a text node). */ html.hunter-hud body:has(> main > h1)>main{ --cut:16px;position:relative;display:flex;flex-wrap:wrap;align-items:center;column-gap:26px; max-width:500px;padding:34px 40px 36px;color:transparent; border:1px solid var(--hh-edge-2); clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); background: linear-gradient(90deg,var(--hh-yellow),var(--hh-orange) 18%,rgba(255,122,0,.22) 42%,transparent 70%) left var(--cut) top 0/calc(100% - var(--cut)) 2px no-repeat border-box, radial-gradient(circle closest-side,#e2b47a 0 16%,#8a5f28 30%,#35240f 58%,rgba(0,0,0,.65) 78%,transparent 100%) right 10px bottom 10px/7px 7px no-repeat border-box, radial-gradient(circle closest-side,#e2b47a 0 16%,#8a5f28 30%,#35240f 58%,rgba(0,0,0,.65) 78%,transparent 100%) left 10px top 26px/7px 7px no-repeat border-box, linear-gradient(to bottom right,transparent calc(50% - .9px),var(--hh-edge-hot) calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) top left/var(--cut) var(--cut) no-repeat border-box, linear-gradient(to bottom right,transparent calc(50% - .9px),var(--hh-edge-hot) calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) bottom right/var(--cut) var(--cut) no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/24px 3px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) top right/3px 24px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/24px 3px no-repeat border-box, linear-gradient(var(--hh-orange),var(--hh-orange)) bottom left/3px 24px no-repeat border-box, radial-gradient(ellipse 90% 40% at 50% 0,rgba(255,122,0,.09),transparent 70%), linear-gradient(165deg,#1b140b,#0a0807 72%); box-shadow:inset 0 1px rgba(255,214,150,.09),inset 0 -1px rgba(0,0,0,.7); animation:hh-panel-in .6s var(--hh-ease-out) both; } /* the gate's ambient loop: a slow scan pass down the plate (the same beat as the launcher-auth form plate) */ html.hunter-hud body:has(> main > h1)>main:after{ content:'';position:absolute;left:0;right:0;top:0;height:80px;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(255,170,60,.02) 80%,rgba(255,210,120,.12) 99%,transparent); transform:translateY(-100%); animation:lh-plate-scan 10s var(--hh-ease-io) 1.4s infinite;animation-play-state:var(--hud-play); } html.hunter-hud body:has(> main > h1)>main>:not(a:not(:first-child)){flex:0 0 100%} html.hunter-hud body:has(> main > h1)>main>*{animation:hh-rise .5s var(--hh-ease-out) .12s both} html.hunter-hud body:has(> main > h1)>main>h1{animation:lh-reveal-x .6s var(--hh-ease-out) .16s backwards} html.hunter-hud body:has(> main > h1)>main>p{animation-delay:.22s} html.hunter-hud body:has(> main > h1)>main>a:nth-of-type(2){animation-delay:.28s} html.hunter-hud body:has(> main > h1)>main>a:nth-of-type(3){animation-delay:.34s} html.hunter-hud body:has(> main > h1)>main>a:first-child{ display:inline-flex;align-items:center;gap:10px;font:700 10px/1 var(--hh-font-mono);letter-spacing:.3em;color:var(--hh-yellow);text-decoration:none; } html.hunter-hud body:has(> main > h1)>main>a:first-child:before{content:'';flex:0 0 18px;height:2px;background:var(--hh-orange);box-shadow:0 0 10px rgba(255,122,0,.8)} html.hunter-hud body:has(> main > h1)>main>h1{ margin:14px 0 12px;font:600 condensed 44px/.95 var(--hh-font-hud);letter-spacing:.03em;text-transform:uppercase;color:var(--hh-ink);text-shadow:0 0 22px rgba(255,122,0,.35); } html.hunter-hud body:has(> main > h1)>main>p{margin:0 0 26px;font:15px/1.65 var(--hh-font-text);color:var(--hh-dim);text-wrap:pretty} html.hunter-hud body:has(> main > h1)>main>a:not(:first-child){ position:relative;display:inline-block;padding:4px 0;font:600 12px/1.3 var(--hh-font-hud);letter-spacing:.12em;text-transform:uppercase;color:var(--hh-orange-2);text-decoration:none; } html.hunter-hud body:has(> main > h1)>main>a:not(:first-child):not(.hh-primary):after{content:'';position:absolute;left:0;right:0;bottom:1px;height:1px;background:var(--hh-yellow);box-shadow:0 0 10px var(--hh-orange);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--hh-ease-out)} html.hunter-hud body:has(> main > h1)>main>a:not(:first-child):hover{color:var(--hh-yellow)} html.hunter-hud body:has(> main > h1)>main>a:not(:first-child):not(.hh-primary):hover:after{transform:scaleX(1)} /* the gate's one armed control (classMap gives it .hh-btn.hh-primary) */ html.hunter-hud body:has(> main > h1)>main>a.hh-primary{ padding:15px 24px!important;font-size:12.5px!important;letter-spacing:.14em!important; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); transition:color .18s,border-color .18s,box-shadow .22s,translate .25s var(--hh-ease-out)!important; } html.hunter-hud body:has(> main > h1)>main>a.hh-primary:hover{translate:0 -1px} html.hunter-hud body:has(> main > h1)>main>a.hh-primary:focus-visible{outline:2px solid #1a0a00;outline-offset:-6px} @media(max-width:520px){ html.hunter-hud body:has(> main > h1)>main{--cut:12px;padding:28px 24px 30px;row-gap:14px} html.hunter-hud body:has(> main > h1)>main>h1{font-size:38px} } /* The "play in launcher" dialog rendered by launcher-play-gate.js on this page (and wherever the gate mounts). */ html.hunter-hud .og-launcher-dialog{ --cut:16px;--panel-edge:var(--hh-edge-hot);padding:26px 30px 24px;color:var(--hh-ink);font:400 14px/1.6 var(--hh-font-text); box-shadow:inset 0 1px rgba(255,180,90,.08),0 30px 100px rgba(0,0,0,.75)!important; animation:hh-panel-in .4s var(--hh-ease-out) both; } html.hunter-hud .og-launcher-dialog::backdrop{background:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(255,122,0,.10),transparent 70%),rgba(3,3,3,.9);backdrop-filter:none} html.hunter-hud .og-launcher-dialog :focus-visible{outline:2px solid var(--hh-yellow);outline-offset:3px} html.hunter-hud .og-launcher-dialog .hh-btn:focus-visible{outline-offset:-5px} html.hunter-hud .og-launcher-dialog .hh-primary:focus-visible{outline-color:#1a0a00;outline-offset:-6px} html.hunter-hud .og-launcher-close{margin:0 0 18px auto;padding:6px 14px!important;font-size:11px!important;letter-spacing:.12em!important} /* identity: the cover seated in a recessed well */ html.hunter-hud .og-launcher-identity{ padding:12px;background:linear-gradient(180deg,#050403,#0c0906); box-shadow:inset 0 2px 7px rgba(0,0,0,.85),inset 0 0 0 1px rgba(77,53,20,.72); clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); } html.hunter-hud .og-launcher-identity img{ border-radius:0;border:1px solid var(--hh-edge-2);background:#0b0806;padding:4px; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); } html.hunter-hud .og-launcher-identity small{display:flex;align-items:center;gap:9px;font:700 9.5px/1.2 var(--hh-font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--hh-orange-2)} html.hunter-hud .og-launcher-identity small:before{content:'';flex:0 0 16px;height:2px;background:var(--hh-orange);box-shadow:0 0 10px rgba(255,122,0,.8)} html.hunter-hud .og-launcher-identity h3{font:600 condensed 26px/1.1 var(--hh-font-hud);letter-spacing:.04em;text-transform:uppercase;color:var(--hh-ink);text-shadow:0 0 18px rgba(255,122,0,.3)} html.hunter-hud .og-launcher-dialog h2{margin:22px 0 6px;font:600 condensed 22px/1.15 var(--hh-font-hud);letter-spacing:.05em;text-transform:uppercase;color:var(--hh-ink)} html.hunter-hud .og-launcher-dialog p{color:var(--hh-dim);margin:6px 0 20px} html.hunter-hud .og-launcher-actions>*{padding:14px 16px!important;font-size:12.5px!important;letter-spacing:.12em!important} html.hunter-hud .og-launcher-actions>.hh-primary{ clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 6px,transparent 6px 12px),linear-gradient(180deg,var(--hh-yellow) 0%,var(--hh-orange-2) 55%,var(--hh-orange) 100%)!important; } html.hunter-hud .og-launcher-dialog .og-launcher-note{margin-top:20px;padding-top:12px;border-top:1px dashed var(--hh-edge-2);font:12px/1.6 var(--hh-font-text);color:var(--hh-dim)} html.hunter-hud .og-launcher-status{position:relative;margin:12px 0 0;padding:8px 12px 8px 28px;font:13px/1.5 var(--hh-font-text);color:var(--hh-yellow-2)!important;background:linear-gradient(90deg,rgba(255,196,0,.12),transparent 90%);border-left:2px solid var(--hh-yellow)} html.hunter-hud .og-launcher-status:before{content:'';position:absolute;left:11px;top:14px;width:7px;height:7px;background:var(--hh-yellow);transform:rotate(45deg);box-shadow:0 0 8px var(--hh-orange);animation:hh-pulse 1.6s ease-in-out infinite;animation-play-state:var(--hud-play)} /* ═══════════════════════════════════════════════════════════════════════════════ 9. Core telemetry readout · carbon backing on the two pages that still show it ═══════════════════════════════════════════════════════════════════════════════ The core tag is fixed bottom-right at z-index 2147483001 with no backing. launcher.html is a long marketing page whose copy runs full width to the bottom-right, so at several scroll offsets the tag printed straight through live body text. launcher-play gets a carbon chip (its centred plate never reaches the bottom-right corner); launcher.html stands it up as a vertical side rail in the right page gutter (reads bottom-to-top, 20px wide), so it never crosses page content. (launcher-auth / launcher-live / launcher-login hide the tag entirely in section 0.) */ html.hunter-hud body:has(> main > h1) .hud-telemetry{ right:0;bottom:0;padding:9px 18px 9px 36px;color:var(--hh-dim);font-variant-numeric:tabular-nums; background:linear-gradient(90deg,rgba(5,4,3,0),rgba(5,4,3,.93) 20%,rgba(5,4,3,.97) 46%); } html.hunter-hud body.download-page .hud-telemetry{ right:4px;bottom:46px;padding:14px 4px 14px 5px;gap:14px; writing-mode:vertical-rl;transform:rotate(180deg); font-size:9px;letter-spacing:.24em;color:var(--hh-dim);font-variant-numeric:tabular-nums; background:linear-gradient(0deg,rgba(5,4,3,0),rgba(5,4,3,.9) 14%,rgba(5,4,3,.9) 86%,rgba(5,4,3,0)); border-right:1px solid var(--hh-edge-2); } html.hunter-hud body.download-page .hud-telemetry b, html.hunter-hud body:has(> main > h1) .hud-telemetry b{color:var(--hh-yellow)} /* between the core's 760px cut-off and 900px the page gutter is too narrow for the rail to breathe */ @media(max-width:900px){html.hunter-hud body.download-page .hud-telemetry{display:none}} /* ---------- Motion (lh-) ---------- */ /* Headline wipe. The core hh-reveal-x ends on clip-path:inset(0) and holds it (fill both), which crops glyph parts that sit outside a tight display line box: the acute accents of "PRÓXIMO"/"NÍVEL" and the glow. Wipe with a clip box that overhangs the element, and drop it once the wipe ends (fill backwards). */ @keyframes lh-reveal-x{0%{clip-path:inset(-40% 100% -40% -4%);opacity:.2}100%{clip-path:inset(-40% -8% -40% -4%);opacity:1}} /* the beam is 22% of the bar: 0 → 350% keeps its right edge inside the bar, so the sweep never adds scroll overflow */ @keyframes lh-beam{0%{opacity:0;transform:translateX(0)}14%,82%{opacity:1}100%{opacity:0;transform:translateX(350%)}} @keyframes lh-lock{0%{opacity:0;scale:1.14}55%{opacity:1}100%{opacity:1;scale:1}} /* one soft dip (not a strobe): a dark screen catching, sagging once, then holding */ @keyframes lh-screen-on{0%{opacity:0}22%{opacity:.7}38%{opacity:.45}64%,100%{opacity:1}} @keyframes lh-materialize{0%{opacity:0;scale:.9}100%{opacity:1;scale:1}} @keyframes lh-ring-in{0%{opacity:0;scale:.62}100%{opacity:1;scale:1}} @keyframes lh-contact{0%,90%{opacity:.4;scale:1}93%{opacity:1;scale:1.75}100%{opacity:.5;scale:1}} @keyframes lh-scan-a{0%{transform:translateY(-100%)}30%,100%{transform:translateY(520%)}} @keyframes lh-scan-b{0%{transform:translateY(-100%)}30%,100%{transform:translateY(520%)}} @keyframes lh-scan-c{0%{transform:translateY(-100%)}30%,100%{transform:translateY(520%)}} @keyframes lh-scan-d{0%{transform:translateY(-100%)}30%,100%{transform:translateY(520%)}} @keyframes lh-led-check{0%{opacity:.35}30%{opacity:1}55%{opacity:.45}80%,100%{opacity:1}} @keyframes lh-rail{0%{background-position:-120px 0,0 0}100%{background-position:calc(100% + 120px) 0,0 0}} @keyframes lh-node{0%{opacity:0}22%{opacity:1}100%{opacity:0}} @keyframes lh-plate-scan{0%{transform:translateY(-100%)}32%,100%{transform:translateY(420%)}} /* Launcher release 1.4.20: scoped to the download page. */ html.hunter-hud .download-page .release-highlights{padding:52px 0 8px;border-bottom:1px solid var(--hh-edge)} html.hunter-hud .download-page .release-highlights>h2{font:600 34px/1.15 var(--hh-font-hud);text-transform:uppercase;color:var(--hh-ink)} html.hunter-hud .download-page .release-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:26px 0} html.hunter-hud .download-page .release-grid article{padding:22px;background:linear-gradient(145deg,#20150e,#0c0907);border:1px solid var(--hh-edge-2);border-top:2px solid var(--hh-orange)} html.hunter-hud .download-page .release-number{font:700 11px var(--hh-font-mono);color:var(--hh-orange);letter-spacing:.16em} html.hunter-hud .download-page .release-grid h3{font:600 19px/1.2 var(--hh-font-hud);color:var(--hh-ink);margin:14px 0 10px} html.hunter-hud .download-page .release-grid p,html.hunter-hud .download-page .release-gpu-note,html.hunter-hud .download-page .all-systems p{font:12px/1.8 var(--hh-font-text);color:var(--hh-dim)} html.hunter-hud .download-page .release-gpu-note{padding:14px 18px;border-left:2px solid var(--hh-yellow);background:#ffb00008;margin:0 0 30px} html.hunter-hud .download-page .all-systems{margin:0 0 52px;border:1px solid var(--hh-edge-2);background:#100c09} html.hunter-hud .download-page .all-systems summary{padding:20px 24px;cursor:pointer;font:600 16px/1.4 var(--hh-font-hud);color:var(--hh-yellow)} html.hunter-hud .download-page .all-systems details>p{margin:0;padding:0 24px 20px} html.hunter-hud .download-page .system-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0 24px 24px;gap:1px 20px} html.hunter-hud .download-page .system-grid li{display:flex;align-items:center;gap:12px;border-top:1px solid var(--hh-edge);padding:15px 0;min-width:0} html.hunter-hud .download-page .system-number{font:10px var(--hh-font-mono);color:var(--hh-orange)} html.hunter-hud .download-page .system-grid li>div{flex:1;min-width:0} html.hunter-hud .download-page .system-grid b{font:600 13px/1.4 var(--hh-font-hud);color:var(--hh-ink)} html.hunter-hud .download-page .system-grid small{display:block;font:10px/1.5 var(--hh-font-text);color:var(--hh-dim)} html.hunter-hud .download-page .system-bundled,html.hunter-hud .download-page .system-import{font:9px/1.4 var(--hh-font-text);color:var(--hh-dim);max-width:100px;text-align:right} html.hunter-hud .download-page .system-bundled{color:var(--hh-yellow)} @media(max-width:760px){html.hunter-hud .download-page .release-grid,html.hunter-hud .download-page .system-grid{grid-template-columns:1fr}html.hunter-hud .download-page .release-highlights>h2{font-size:28px}}