/* CloneBoy²⁶ site. Tokens are the app's (app/CloneBoy26/App.xaml); the feel is JACKPORT's, in CloneBoy RGB. */
:root{
  --void:#07070C; --ink:#0E0E14; --panel:#17171F; --rail:#2A2A36;
  --neon:#39FF14; --cyan:#2EE6D6; --amber:#FFC53D; --red:#C8102E; --fog:#9A9AAE; --paper:#F2F2F7;
  --rgb:#FF5C5C,#FFA94D,#FFE066,#39FF14,#2EE6D6,#5C7CFF,#C77DFF;
  --disp:'Unbounded',system-ui,sans-serif; --mono:'JetBrains Mono',Consolas,monospace; --body:'Space Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--void);color:var(--paper);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,pre{margin:0}
main{overflow-x:clip}
[hidden]{display:none!important}
ul,ol{padding:0;list-style:none}
code{font-family:var(--mono);font-size:.92em;color:var(--neon)}
.mono{font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--fog)}
.fine{font-size:14px;color:var(--fog)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--neon);color:#031;padding:8px 12px;border-radius:6px}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px;border-radius:4px}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,56px);
  background:linear-gradient(#07070Cee,#07070Cb0 70%,transparent);font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.top a{text-decoration:none;color:var(--fog)}
.top a:hover{color:var(--paper)}
.brand{display:flex;align-items:center;gap:10px;color:var(--paper)!important}
.brand img{height:22px;width:auto;image-rendering:pixelated}
.top nav{display:flex;gap:clamp(14px,2.4vw,34px)}
.top .hot{color:var(--neon)}
.snack{color:var(--neon)!important;letter-spacing:.06em;text-transform:none;white-space:nowrap}
.snack:hover{text-shadow:0 0 14px #39ff14aa}
@media (max-width:900px){.top nav{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(900px,100svh);margin-top:-52px;padding:120px 16px 150px;display:grid;place-items:center;text-align:center;overflow:clip}
.sky{position:absolute;inset:0;overflow:hidden}
.stars{position:absolute;inset:0;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff9,transparent),radial-gradient(1px 1px at 31% 62%,#fff6,transparent),radial-gradient(1.4px 1.4px at 58% 12%,#fff8,transparent),radial-gradient(1px 1px at 77% 41%,#fff7,transparent),radial-gradient(1.2px 1.2px at 88% 76%,#fff6,transparent),radial-gradient(1px 1px at 44% 86%,#fff5,transparent),radial-gradient(1px 1px at 6% 71%,#fff6,transparent),radial-gradient(1.3px 1.3px at 67% 67%,#fff5,transparent),radial-gradient(1px 1px at 22% 40%,#fff5,transparent),radial-gradient(1px 1px at 93% 22%,#fff7,transparent)}
/* the aurora: soft radial gradients (no blur filter), moved by transform only */
.aur{position:absolute;left:-10%;right:-10%;top:-12%;height:78%;opacity:.5;will-change:transform}
.a1{background:
  radial-gradient(34% 62% at 6% 52%,#FF5C5C 0,transparent 70%),
  radial-gradient(30% 70% at 22% 34%,#FFA94D 0,transparent 70%),
  radial-gradient(30% 60% at 37% 56%,#FFE066 0,transparent 70%),
  radial-gradient(32% 78% at 52% 26%,#39FF14 0,transparent 70%),
  radial-gradient(30% 62% at 66% 52%,#2EE6D6 0,transparent 70%),
  radial-gradient(30% 72% at 81% 34%,#5C7CFF 0,transparent 70%),
  radial-gradient(32% 60% at 96% 54%,#C77DFF 0,transparent 70%);
  animation:drift1 26s ease-in-out infinite alternate}
.a2{opacity:.28;top:4%;background:
  radial-gradient(40% 50% at 18% 60%,#C77DFF 0,transparent 70%),
  radial-gradient(36% 56% at 46% 44%,#2EE6D6 0,transparent 70%),
  radial-gradient(40% 50% at 78% 62%,#FF5C5C 0,transparent 70%);
  animation:drift2 34s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(3%,3%,0) scale(1.06)}}
@keyframes drift2{from{transform:translate3d(4%,2%,0) scale(1.05)}to{transform:translate3d(-4%,-2%,0) scale(1)}}
.rays{position:absolute;inset:0 0 35% 0;background:repeating-linear-gradient(90deg,transparent 0 60px,#ffffff0a 60px 64px,transparent 64px 150px);-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.sea{position:absolute;left:0;right:0;bottom:0;height:230px;background:linear-gradient(transparent,var(--void) 82%),repeating-linear-gradient(0deg,transparent 0 21px,#2ee6d626 21px 22px),repeating-linear-gradient(90deg,transparent 0 59px,#5c7cff26 59px 60px);transform:perspective(500px) rotateX(58deg);transform-origin:bottom}
.sky::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 46% at 50% 46%,#07070Cb8,transparent 75%),linear-gradient(transparent 55%,var(--void) 96%)}
.hero-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:980px;width:100%}
.eyebrow{color:#e6e6f0}
.wm{margin-top:22px;width:min(900px,100%)}
.wm img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 40px #5c7cff55) drop-shadow(0 10px 50px #000);animation:resolve 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes resolve{from{opacity:0;filter:blur(18px) drop-shadow(8px 0 0 #ff5c5c88) drop-shadow(-8px 0 0 #2ee6d688);transform:scale(1.04)}}
.tag{font-family:var(--disp);font-size:clamp(17px,2.4vw,24px);color:var(--neon);text-shadow:0 0 22px #39ff1488;margin-top:clamp(16px,2.6vw,26px)}
.lede{font-size:clamp(17px,2vw,21px);color:#d7d7e4;margin:14px 0 32px;max-width:640px}
.cta{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center}
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;padding:19px 32px;border-radius:16px;background:#0b0b11;color:var(--paper);text-decoration:none;text-align:left;transition:transform .15s}
.btn b{font-family:var(--disp);font-weight:700;font-size:clamp(14px,1.7vw,17px);letter-spacing:.04em;display:block}
.btn small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--fog);display:block;margin-top:5px}
.btn::before,.btn::after{content:"";position:absolute;inset:-3px;border-radius:19px;background:conic-gradient(from var(--spin,40deg),#FF5C5C,#FFA94D,#FFE066,#39FF14,#2EE6D6,#5C7CFF,#C77DFF,#FF5C5C);z-index:-1;animation:spin 9s linear infinite}
.btn::after{inset:-12px;border-radius:28px;filter:blur(22px);opacity:.5;z-index:-2}
@property --spin{syntax:'<angle>';inherits:false;initial-value:40deg}
@keyframes spin{to{--spin:400deg}}
.btn:hover{transform:translateY(-2px)}
.btn[aria-disabled=true]{cursor:default}
.btn.nudge{animation:nudge .45s}
@keyframes nudge{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.btn.sm{padding:15px 24px;margin:6px 0 4px}
.ghost{padding:19px 24px;border-radius:16px;border:1px dashed #3a3a4a;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--fog);text-transform:uppercase}
.free{margin-top:20px;color:var(--amber)}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.chip{padding:8px 14px;border-radius:99px;border:1px solid var(--rail);background:#12121acc;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:#c9c9d8;text-transform:uppercase;text-decoration:none}
.chip:hover{border-color:var(--neon);color:var(--paper)}
.chip i{font-style:normal;color:var(--neon)}
.quote{position:absolute;left:clamp(16px,8vw,120px);bottom:70px;z-index:3;text-align:left;transform:rotate(-3deg);font-style:italic;color:#c9c9d8}
.quote span{display:block;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--fog);margin-top:4px}
.knox-peek{position:absolute;right:clamp(16px,8vw,120px);bottom:-30px;width:clamp(120px,17vw,250px);height:auto;image-rendering:pixelated;z-index:3;filter:drop-shadow(0 0 30px #39ff1455)}
@media (max-width:760px){.quote{left:16px;bottom:26px;font-size:15px}.knox-peek{right:14px;bottom:-16px}.hero{padding-bottom:140px}}

/* ---------- bands ---------- */
.band{position:relative;z-index:0;max-width:1160px;margin:0 auto;padding:clamp(60px,9vw,110px) clamp(16px,4vw,40px) 0}
.kicker{color:var(--neon)}
h2{font-family:var(--disp);font-weight:900;font-size:clamp(26px,4.4vw,44px);line-height:1.12;margin:12px 0 30px;letter-spacing:-.01em}
h3{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.03em}
.intro{max-width:720px;color:#cfcfdd;margin:-12px 0 30px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps li{background:var(--panel);border:1px solid var(--rail);border-radius:18px;padding:26px}
.steps .n{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;font-family:var(--disp);font-weight:900;font-size:20px;color:#08080c;background:var(--c);box-shadow:0 0 26px color-mix(in srgb,var(--c) 55%,transparent);margin-bottom:18px}
.steps h3{font-size:19px;margin-bottom:8px}
.steps p{color:#c4c4d4;font-size:16px}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* the app's hero card: the rainbow turns round the border, THIS sparkles */
.herocard{position:relative;border-radius:22px;background:var(--panel);padding:clamp(24px,4vw,40px);margin-top:54px}
.herocard::before,.herocard::after{content:"";position:absolute;inset:-4px;border-radius:26px;background:conic-gradient(from var(--spin,200deg),#FF5C5C,#FFA94D,#FFE066,#39FF14,#2EE6D6,#5C7CFF,#C77DFF,#FF5C5C);z-index:-1;animation:spin 9s linear infinite}
.herocard::after{inset:-18px;border-radius:40px;filter:blur(30px);opacity:.4;z-index:-2}
.herocard h3{font-weight:900;font-size:clamp(19px,3vw,30px);line-height:1.2}
.herocard sup,.ab-name sup{color:var(--neon);font-size:.55em}
.how{font-family:var(--mono);font-weight:700;font-size:clamp(15px,2vw,20px);letter-spacing:.08em;margin-top:14px}
.this{animation:this 3.5s steps(1) infinite;text-shadow:0 0 16px currentColor}
@keyframes this{0%{color:#FF5C5C}14%{color:#FFA94D}28%{color:#FFE066}42%{color:#39FF14}57%{color:#2EE6D6}71%{color:#5C7CFF}85%{color:#C77DFF}}
.sub{color:#d7d7e4;font-size:18px;margin-top:10px}
.herocard .fine{margin-top:8px}
.nq{font-style:italic;color:#c9c9d8;font-size:15px;margin-top:12px}
.pick{position:absolute;right:26px;top:-16px;transform:rotate(4deg);background:var(--amber);color:#111;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.12em;padding:7px 12px;border-radius:6px;z-index:2}
.sit{position:absolute;left:30px;top:-58px;width:92px;height:auto;image-rendering:pixelated;z-index:-1}
.jobs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
.job{position:relative;background:#12121a;border:1px solid var(--rail);border-radius:16px;padding:22px 24px;overflow:hidden}
.job::before{content:"";display:block;width:30px;height:4px;border-radius:2px;background:var(--c);box-shadow:0 0 14px var(--c);margin-bottom:14px}
.job p{color:#c4c4d4;font-size:15.5px;margin-top:8px}
.job b{color:var(--paper)}
.tags{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.tags span{padding:4px 9px;border-radius:6px;border:1px solid var(--rail);color:var(--fog)}
.tags .ok{color:var(--neon);border-color:#39ff1455}
.rufus{padding-right:104px}
.tomb{position:absolute;right:20px;top:20px;width:66px;height:80px;border-radius:33px 33px 4px 4px;background:linear-gradient(#5a5c68,#3c3e48);border:2px solid #2a2b33;display:grid;place-content:center;text-align:center;transform:rotate(-8deg);color:#15161b;font-family:var(--mono);line-height:1.15}
.tomb b{font-size:15px}.tomb span{font-size:10px}
.aster{margin-top:14px;text-transform:none;letter-spacing:.04em}
@media (max-width:760px){.jobs{grid-template-columns:1fr}}

.needs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.needs li{border-left:3px solid var(--neon);background:#12121a;border-radius:0 12px 12px 0;padding:16px 18px}
.needs b{display:block;font-family:var(--disp);font-size:13.5px}
.needs span{display:block;color:var(--fog);font-size:14.5px;margin-top:6px}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.shot div{aspect-ratio:16/10;border-radius:14px;border:1px dashed #3a3a4a;background:repeating-linear-gradient(135deg,#101017 0 14px,#13131b 14px 28px);display:grid;place-content:center;justify-items:center;gap:12px;text-align:center}
.shot img{width:64px;height:auto;image-rendering:pixelated;opacity:.55}
.shot.live div{border-style:solid;border-color:var(--rail);padding:0;overflow:hidden}
.shot figcaption{font-size:14px;color:var(--fog);margin-top:8px}
@media (max-width:900px){.needs{grid-template-columns:1fr 1fr}.shots{grid-template-columns:1fr}}
@media (max-width:520px){.needs{grid-template-columns:1fr}}

.safegrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.panel{position:relative;z-index:0;background:var(--panel);border:1px solid var(--rail);border-radius:18px;padding:26px;min-width:0}
.panel h3{font-size:17px;margin-bottom:12px}
.panel h4{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin:20px 0 8px}
.panel p{color:#cfcfdd;font-size:16px}
.panel p+p{margin-top:10px}
.panel .fine{font-size:14px;color:var(--fog)}
.dl{grid-row:span 2;border-color:#39ff1444;box-shadow:0 0 50px #39ff1410}
.file{color:var(--paper);letter-spacing:.04em;text-transform:none;font-size:14px;overflow-wrap:anywhere}
.state{margin:8px 0 14px}
.hash{display:flex;gap:10px;align-items:center;background:#0b0b11;border:1px solid var(--rail);border-radius:10px;padding:10px 12px}
.exe-l{margin-top:12px!important}
.hash+.fine,[data-exe]+.fine{margin-top:12px!important}
.hash code{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13px}
pre{background:#0b0b11;border:1px solid var(--rail);border-radius:10px;padding:10px 12px;overflow-x:auto;margin:8px 0}
button,.mini{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--paper);background:#1d1d28;border:1px solid var(--rail);border-radius:8px;padding:7px 12px;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.mini:hover{border-color:var(--neon)}
.mini.neon{color:var(--neon);border-color:#39ff1466}
.links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px!important;font-family:var(--mono);font-size:13px}
.links a{color:var(--cyan)}
.smart{position:relative;margin:16px 0 10px;background:#0f5fb8;color:#fff;border-radius:4px;padding:18px 20px 16px;font-family:'Segoe UI',system-ui,sans-serif;font-size:13px;display:grid;gap:8px;line-height:1.4}
.smart b{font-size:19px;font-weight:400}
.smart u{width:max-content}
.smart div{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.smart i{font-style:normal;border:2px solid #fff;padding:4px 14px}
.smart i.dim{opacity:.7}
.smart em{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:700;background:var(--neon);color:#031;padding:2px 7px;border-radius:5px;width:max-content}
.smart .s1{position:absolute;left:96px;top:86px}
.never{grid-column:1/-1}
.never ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.never li{position:relative;padding-left:26px;color:#c4c4d4;font-size:15.5px}
.never li::before{content:"✕";position:absolute;left:0;color:var(--red);font-weight:700;filter:brightness(1.6)}
.never b{color:var(--paper)}
@media (max-width:820px){.safegrid,.never ul{grid-template-columns:1fr}}

.code{color:var(--neon);font-weight:400}
.status{display:inline-block;color:#111;background:var(--amber);padding:5px 10px;border-radius:6px;margin:-14px 0 24px;letter-spacing:.14em}
.status.out{background:var(--neon)}
.notes{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px}
.notes h3{color:var(--cyan);font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 10px}
.notes ul+h3{margin-top:24px}
.notes li{position:relative;padding-left:20px;color:#c4c4d4;font-size:15.5px;margin-bottom:9px}
.notes li::before{content:"▸";position:absolute;left:0;color:var(--neon)}
.notes b{color:var(--paper)}
@media (max-width:820px){.notes{grid-template-columns:1fr}}

/* the app's ABOUT window */
.about{max-width:820px;margin:0 auto;background:var(--ink);border:1px solid var(--rail);border-radius:18px;padding:clamp(22px,4vw,34px);box-shadow:0 30px 80px #000a,0 0 60px #39ff1412}
.who{display:flex;gap:22px;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--rail)}
.who img{width:118px;height:auto;image-rendering:pixelated;flex:none}
.kn{color:var(--neon);font-weight:700;letter-spacing:.06em;text-transform:none}
.ab-name{font-family:var(--disp);font-weight:900;font-size:clamp(24px,4vw,34px);line-height:1.15}
.ab-ver{text-transform:none;letter-spacing:.04em;margin:4px 0 6px}
.jar-h{color:var(--neon);font-size:15px;margin-top:22px}
.jar-p{color:#d7d7e4;margin:6px 0 16px}
.jar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{background:var(--panel);border:1px solid var(--rail);border-radius:12px;padding:14px 10px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;min-width:0}
.tile h4{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--cyan)}
.tile.dim{opacity:.6}
.handle{font-family:var(--mono);font-size:13px;font-weight:700;overflow-wrap:anywhere;margin:auto 0}
.amber{color:var(--amber)}
.tb{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.bug{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--rail)}
@media (max-width:700px){.jar{grid-template-columns:1fr 1fr}.who img{width:84px}}

.foot{margin-top:clamp(70px,10vw,120px);padding:0 16px 46px;text-align:center;color:var(--fog);font-size:15px}
.foot .rgb{height:3px;max-width:1160px;margin:0 auto 34px;background:linear-gradient(90deg,var(--rgb))}
.foot p{margin-top:10px}
.foot img{height:18px;width:auto;image-rendering:pixelated;vertical-align:-3px}
.foot b{color:var(--paper)}
.foot .mono{letter-spacing:.1em;text-transform:none;font-size:12.5px}
.foot .tiny{font-size:11px;opacity:.7;max-width:640px;margin-inline:auto}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aur,.btn::before,.btn::after,.herocard::before,.herocard::after,.wm img,.this{animation:none}
  .this{color:#FFE066}
}