/* ALEXX SkyRider™ R05 — Visual Master
   Presentation-only layer. Hero composition and /play gameplay remain untouched. */
:root{
  --r05-black:#000;
  --r05-ink:#020704;
  --r05-panel:#041008;
  --r05-panel-2:#07150d;
  --r05-green:#53ff74;
  --r05-green-dim:#159a39;
  --r05-amber:#ffb000;
  --r05-cyan:#2fe5ff;
  --r05-magenta:#ff2fd4;
  --r05-cream:#fff9e0;
  --r05-copy:#d9f2df;
  --r05-muted:#89af92;
  --r05-line:rgba(83,255,116,.23);
  --r05-line-hot:rgba(47,229,255,.34);
  --r05-shadow:0 18px 55px rgba(0,0,0,.34),inset 0 0 28px rgba(83,255,116,.018);
}

/* Preserve the approved Hero exactly: all R05 section styling explicitly excludes it. */
body.r21-gate{
  background:
    radial-gradient(circle at 12% 24%,rgba(255,47,212,.035),transparent 24rem),
    radial-gradient(circle at 88% 48%,rgba(47,229,255,.035),transparent 28rem),
    linear-gradient(180deg,#000 0%,#020704 45%,#000 100%);
}
.r21-topbar{border-bottom-color:var(--r05-line)!important;box-shadow:0 8px 30px rgba(0,0,0,.45),0 0 24px rgba(83,255,116,.045)!important}
.r21-brand{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;letter-spacing:.11em!important}
.r21-nav a,.r21-nav-button{
  border-radius:3px!important;border-color:var(--r05-line)!important;background:rgba(0,12,5,.9)!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;letter-spacing:.075em!important;
  box-shadow:inset 0 0 14px rgba(83,255,116,.018)!important;
}
.r21-nav a:nth-child(3n+2){color:#c9f9ff!important;border-color:rgba(47,229,255,.25)!important}
.r21-nav a:nth-child(3n){color:#ffe0f6!important;border-color:rgba(255,47,212,.22)!important}
.r21-nav-button{color:var(--r05-amber)!important;border-color:rgba(255,176,0,.28)!important}
.r21-nav-button.active{box-shadow:0 0 14px rgba(255,176,0,.16),inset 0 0 12px rgba(255,176,0,.04)!important}

.r21-section:not(.r21-hero){
  position:relative!important;
  border:1px solid var(--r05-line)!important;
  border-top-color:rgba(83,255,116,.30)!important;
  margin:clamp(14px,2vw,26px) auto!important;
  background:
    linear-gradient(90deg,rgba(83,255,116,.035),transparent 14%,transparent 86%,rgba(47,229,255,.028)),
    linear-gradient(180deg,rgba(4,16,8,.93),rgba(0,6,2,.95))!important;
  box-shadow:var(--r05-shadow)!important;
}
.r21-section:not(.r21-hero)::before{
  content:"SYS:// ALEXX_SKYRIDER // PORTAL_NODE";display:block;position:absolute;top:10px;right:14px;z-index:1;
  color:rgba(137,175,146,.55);font:700 .56rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;pointer-events:none;
}
.r21-section:not(.r21-hero):nth-of-type(4n+1){border-top-color:rgba(255,176,0,.36)!important}
.r21-section:not(.r21-hero):nth-of-type(4n+2){border-top-color:rgba(47,229,255,.38)!important}
.r21-section:not(.r21-hero):nth-of-type(4n+3){border-top-color:rgba(255,47,212,.30)!important}

.r21-heading{align-items:center!important;border-bottom:1px solid var(--r05-line)!important;padding-bottom:.9rem!important}
.r21-heading>span{
  color:var(--r05-amber)!important;border:1px solid rgba(255,176,0,.30);background:rgba(255,176,0,.035);
  padding:.42rem .55rem;font:800 .67rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;letter-spacing:.15em!important;
}
.r21-heading h2{color:var(--r05-cream)!important;text-shadow:0 0 5px rgba(255,249,224,.35),0 0 15px rgba(47,229,255,.26)!important}
.r21-heading h2::after{height:2px!important;background:linear-gradient(90deg,var(--r05-cyan),var(--r05-magenta) 42%,var(--r05-amber) 72%,transparent)!important}
.r21-copy,.r21-support,.r21-note,.r21-demo-footnote{color:var(--r05-copy)!important}
.r21-copy{font-size:clamp(1rem,1.25vw,1.12rem)!important;line-height:1.84!important}
.r21-copy strong{color:#fff!important}
.r21-evidence,.r21-route-label{color:var(--r05-muted)!important}

.r21-btn,.r21-demo-play{
  border-radius:3px!important;border-color:var(--r05-line)!important;background:#031008!important;color:var(--r05-green)!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;letter-spacing:.075em!important;
  box-shadow:inset 0 0 16px rgba(83,255,116,.025)!important;
}
.r21-btn:hover,.r21-btn:focus-visible,.r21-demo-play:hover,.r21-demo-play:focus-visible{
  border-color:var(--r05-cyan)!important;color:#f1fdff!important;box-shadow:0 0 15px rgba(47,229,255,.16),inset 0 0 18px rgba(47,229,255,.035)!important;
}
.r21-btn.primary,.r21-demo-play{border-color:rgba(255,176,0,.58)!important;color:var(--r05-amber)!important;background:rgba(255,176,0,.035)!important}

.r21-resource,.r21-latest-card,.r21-demo-cabinet,.r21-faq-grid>*,.r21-testid-card,
.r21-controls-grid>*,.r21-threat-grid>*,.r21-basics>*,.r21-mode-split>*,.r21-face-copy{
  border-radius:3px!important;border-color:var(--r05-line)!important;background:
    linear-gradient(180deg,rgba(7,21,13,.94),rgba(2,10,5,.94))!important;
  box-shadow:inset 0 0 24px rgba(83,255,116,.02),0 7px 22px rgba(0,0,0,.18)!important;
}
.r21-resource:hover,.r21-latest-card:hover,.r21-demo-cabinet:hover,.r21-faq-grid>*:hover,.r21-testid-card:hover{
  border-color:rgba(47,229,255,.38)!important;box-shadow:0 0 18px rgba(47,229,255,.055),inset 0 0 20px rgba(47,229,255,.018)!important;
}
.r21-resource h3,.r21-latest-card h3,.r21-demo-cabinet h3,.r21-faq-grid h3{color:var(--r05-cream)!important;text-shadow:0 0 11px rgba(47,229,255,.18)!important}
.r21-resource:nth-child(3n+2) h3,.r21-latest-card:nth-child(3n+2) h3{ text-shadow:0 0 11px rgba(255,47,212,.20)!important }
.r21-resource:nth-child(3n) h3,.r21-latest-card:nth-child(3n) h3{ text-shadow:0 0 11px rgba(255,176,0,.20)!important }

.r21-journal-categories a{
  position:relative;border-radius:2px!important;border-color:var(--r05-line)!important;background:#031008!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;color:#c8fbd2!important;letter-spacing:.045em;
}
.r21-journal-categories a::before{content:">";color:var(--r05-amber);margin-right:.45rem}
.r21-journal-categories a:nth-child(4n+2){border-color:rgba(47,229,255,.28)!important}
.r21-journal-categories a:nth-child(4n+3){border-color:rgba(255,47,212,.24)!important}
.r21-journal-categories a:nth-child(4n){border-color:rgba(255,176,0,.28)!important}
.r21-journal-categories a:hover,.r21-journal-categories a:focus-visible{background:#06170c!important;border-color:var(--r05-green)!important}
.r21-journal-context-link{color:var(--r05-cyan)!important}
.r21-latest-category,.r21-kicker,.r21-demo-badges{color:var(--r05-amber)!important}

.r21-crt-window,.r21-route-window,.r21-face-preview,.r21-demo-preview{border-radius:4px!important;border-color:rgba(47,229,255,.24)!important;background:#000!important}
.r21-demo-hall{background:radial-gradient(circle at 50% 0,rgba(255,176,0,.05),transparent 28rem),#020704!important}
.r21-demo-marquee{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;letter-spacing:.18em!important;color:var(--r05-amber)!important;border-color:rgba(255,176,0,.48)!important}
.r21-footer{background:#010603!important;border-top:1px solid var(--r05-line)!important;color:var(--r05-muted)!important}
.r21-footer a{color:var(--r05-green)!important}

/* More arcade color without turning the site into a rainbow. */
#controls .r21-heading>span,#tested-with .r21-heading>span{color:var(--r05-cyan)!important;border-color:rgba(47,229,255,.30)!important}
#faces .r21-heading>span,#latest-journal .r21-heading>span{color:#ff8fe6!important;border-color:rgba(255,47,212,.28)!important}
#fuel-tnt .r21-heading>span,#demos .r21-heading>span{color:var(--r05-amber)!important}
#journal .r21-heading h2,#latest-journal .r21-heading h2{text-shadow:0 0 5px rgba(255,249,224,.34),0 0 16px rgba(255,47,212,.22)!important}

@media(max-width:980px){
  .r21-section:not(.r21-hero){margin:12px auto!important}
  .r21-section:not(.r21-hero)::before{display:none}
}
@media(max-width:720px){
  .r21-section:not(.r21-hero){width:calc(100% - 12px)!important;padding-left:1rem!important;padding-right:1rem!important;margin:8px 6px!important}
  .r21-heading{align-items:flex-start!important;gap:.65rem!important}
  .r21-heading>span{white-space:normal!important}
  .r21-heading h2{font-size:clamp(1.55rem,8vw,2.3rem)!important;overflow-wrap:anywhere}
  .r21-copy{font-size:1rem!important;line-height:1.8!important}
  .r21-resource,.r21-latest-card,.r21-demo-cabinet,.r21-faq-grid>*,.r21-testid-card{padding:1rem!important;min-width:0!important}
  .r21-btn,.r21-demo-play{min-height:44px!important;white-space:normal!important;text-align:center!important;overflow-wrap:anywhere}
}
@media(max-width:430px){
  .r21-section:not(.r21-hero){padding-left:.85rem!important;padding-right:.85rem!important}
  .r21-heading>span{font-size:.61rem!important}
}
@media(prefers-reduced-motion:reduce){
}