:root{
  --bg:#0a0a10;
  --bg-raised:#121219;
  --bg-card:#151420;
  --border:rgba(255,255,255,0.09);
  --border-hover:rgba(154,140,255,0.45);

  --text:#f4f2fb;
  --text-dim:#948fae;
  --text-faint:#5c5876;

  --violet:#8f7dff;
  --violet-deep:#5a49c9;
  --foil:#63e8d4;
  --amber:#ffb454;
  --green:#63e0a0;

  --glow-violet:rgba(143,125,255,0.35);
  --glow-foil:rgba(99,232,212,0.25);

  --font-display:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','Courier New',monospace;

  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:8px;

  --nav-bg:rgba(10,10,16,0.78);
  --field-dot:rgba(255,255,255,0.06);
  --glow1:rgba(90,73,201,0.38);
  --glow2:rgba(99,232,212,0.08);
  --glow3:rgba(143,125,255,0.12);
  --btn-primary-bg:var(--text);
  --btn-primary-text:#0a0a0f;
  --dropdown-bg-top:#18172233;
  --dropdown-bg-bottom:#0d0c14;
  --dropdown-bg-solid:#14131e;
  --dropdown-arrow-bg:#14131e;
}

html[data-theme="light"]{
  --bg:#ffffff;
  --bg-raised:#f5f4fb;
  --bg-card:#ffffff;
  --border:rgba(22,19,37,0.10);
  --border-hover:rgba(90,73,201,0.4);

  --text:#161325;
  --text-dim:#5a5570;
  --text-faint:#918caa;

  --violet:#6a54e6;
  --violet-deep:#5a49c9;
  --foil:#0fa693;
  --amber:#c07816;
  --green:#1c9b62;

  --glow-violet:rgba(106,84,230,0.18);
  --glow-foil:rgba(15,166,147,0.14);

  --nav-bg:rgba(255,255,255,0.82);
  --field-dot:rgba(22,19,37,0.05);
  --glow1:rgba(106,84,230,0.14);
  --glow2:rgba(15,166,147,0.10);
  --glow3:rgba(106,84,230,0.10);

  --btn-primary-bg:#171527;
  --btn-primary-text:#ffffff;

  --dropdown-bg-top:#f2f0fa;
  --dropdown-bg-bottom:#ffffff;
  --dropdown-bg-solid:#ffffff;
  --dropdown-arrow-bg:#ffffff;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  overflow-x:hidden;
  transition:background-color .35s ease, color .35s ease;
}

.bg-field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle, var(--field-dot) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 900px 700px at 50% 0%, black 40%, transparent 85%);
  transition:background-color .35s ease;
}
.bg-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 800px 480px at 50% -5%, var(--glow1), transparent 60%),
    radial-gradient(ellipse 600px 460px at 8% 32%, var(--glow2), transparent 60%),
    radial-gradient(ellipse 600px 460px at 92% 45%, var(--glow3), transparent 60%);
}

::selection{background:var(--violet); color:#0a0a10;}

nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 40px;
  background:var(--nav-bg);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:background-color .35s ease, border-color .35s ease;
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-0.01em;}
.brand .mark{
  width:30px; height:30px; border-radius:9px; overflow:hidden;
  box-shadow:0 0 20px var(--glow-violet);
}
.brand .mark img{width:100%; height:100%; object-fit:contain; display:block;}
.brand .id{
  font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint);
  letter-spacing:0.5px; margin-left:2px; padding-top:2px;
}

.nav-links{display:flex; gap:26px; align-items:center;}
.nav-links a{
  position:relative;
  color:var(--text-dim); text-decoration:none; font-size:14px; font-weight:500;
  padding:6px 0; transition:color .2s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:linear-gradient(90deg, var(--violet), var(--foil));
  transition:right .25s ease;
}
.nav-links a:hover{color:var(--text);}
.nav-links a:hover::after{right:0;}
.nav-links a.active{color:var(--violet);}
.nav-links a.active::after{right:0;}

.nav-website-link{display:flex!important; align-items:center; gap:6px;}
.nav-website-icon{width:16px; height:16px; border-radius:4px; object-fit:cover; flex-shrink:0; opacity:0.85; transition:opacity .2s;}
.nav-website-link:hover .nav-website-icon{opacity:1;}

.nav-cta-wrap{position:relative; width:38px; height:38px; flex-shrink:0;}
.nav-cta{
  box-sizing:border-box; display:flex; align-items:center;
  position:absolute; top:0; right:0;
  width:38px; height:38px; border-radius:19px;
  background:rgba(255,255,255,0.06); border:1px solid var(--border);
  color:var(--violet); overflow:hidden; padding:2px;
  text-decoration:none; cursor:pointer; z-index:60;
  transition:width .45s cubic-bezier(.22,.9,.24,1), background .35s ease, border-color .35s ease, box-shadow .35s ease, padding .45s cubic-bezier(.22,.9,.24,1);
}

@media (hover:hover) and (pointer:fine){
  .nav-cta:hover{
    width:216px; background:rgba(18,17,26,0.97); border-color:var(--border-hover);
    box-shadow:0 12px 30px rgba(0,0,0,0.45), 0 0 0 1px rgba(143,125,255,0.15);
    padding:2px 8px 2px 2px;
  }
  .nav-cta:hover .nav-cta-info{max-width:130px; opacity:1; margin-left:10px;}
  .nav-cta:hover .nav-cta-icon{width:22px; opacity:1; margin-left:auto;}
}
.nav-cta-avatar{width:32px; height:32px; min-width:32px; border-radius:50%; overflow:hidden; flex-shrink:0; position:relative;}
.nav-cta-avatar img{width:100%!important; height:100%!important; object-fit:cover!important; border-radius:50%!important; display:block;}
.nav-cta-status{position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%; background:var(--green); border:2px solid var(--bg); transition:border-color .35s ease;}
.nav-cta-info{display:flex; flex-direction:column; justify-content:center; max-width:0; opacity:0; margin-left:0; overflow:hidden; white-space:nowrap; transition:max-width .4s ease .05s, opacity .3s ease .08s, margin-left .4s ease .05s;}
.nav-cta-name{font-family:var(--font-display); font-weight:600; font-size:12.5px; color:var(--text); line-height:1.3;}
.nav-cta-role{font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.6px; color:var(--text-dim); text-transform:uppercase; line-height:1.3;}
.nav-cta-icon{display:flex; align-items:center; justify-content:center; width:0; opacity:0; margin-left:0; flex-shrink:0; overflow:hidden; transition:width .35s ease .1s, opacity .3s ease .12s, margin-left .35s ease .1s;}
.nav-cta-icon svg{width:16px; height:16px; color:var(--text-dim);}

.theme-toggle{
  position:absolute; top:96px; left:40px; z-index:40;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:19px; flex-shrink:0;
  background:rgba(255,255,255,0.06); border:1px solid var(--border);
  color:var(--text-dim); cursor:pointer;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
  transition:background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.theme-toggle:hover{
  color:var(--violet); border-color:var(--border-hover);
  background:rgba(143,125,255,0.1); transform:translateY(-1px);
}
.theme-toggle:active{ transform:translateY(0); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .theme-icon-sun{ display:none; }
html[data-theme="light"] .theme-toggle .theme-icon-sun{ display:block; }
html[data-theme="light"] .theme-toggle .theme-icon-moon{ display:none; }

main{position:relative; z-index:1;}

.hero{
  display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; gap:40px;
  max-width:1180px; margin:0 auto; padding:88px 24px 70px;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:1.5px;
  color:var(--text-dim); margin-bottom:22px; text-transform:uppercase;
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green);}
h1{
  font-family:var(--font-display); font-size:clamp(36px,4.6vw,58px);
  line-height:1.08; font-weight:700; letter-spacing:-0.02em;
}
h1 .accent{color:var(--violet); position:relative;}
h1 .accent::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:9px;
  background:linear-gradient(90deg, rgba(143,125,255,0.45), rgba(99,232,212,0.35));
  z-index:-1; border-radius:3px;
}
.sub{max-width:520px; margin:24px 0 0; color:var(--text-dim); font-size:16.5px; line-height:1.65; font-weight:400;}
.sub b{color:var(--text); font-weight:600;}

.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px;}
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:30px;
  font-family:var(--font-body); font-weight:600; font-size:15px; text-decoration:none;
  transition:transform .2s, box-shadow .2s; border:1px solid transparent; cursor:pointer;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--btn-primary-bg); color:var(--btn-primary-text);}
.btn-primary:hover{box-shadow:0 8px 24px rgba(255,255,255,0.15);}
.btn-secondary{background:rgba(255,255,255,0.05); color:var(--text); border-color:var(--border);}
.btn-secondary:hover{background:rgba(255,255,255,0.09); box-shadow:0 8px 24px rgba(143,125,255,0.18);}

.btn::after{
  content:"";
  position:absolute; left:-35%; bottom:0;
  width:35%; height:2.5px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  filter:drop-shadow(0 0 6px rgba(143,125,255,0.9)) drop-shadow(0 0 12px rgba(99,232,212,0.6));
  opacity:0; pointer-events:none;
}
.btn:hover::after{
  opacity:1;
  animation: btnDash 1.1s ease-in-out infinite;
}
@keyframes btnDash{
  0%  { left:-35%; }
  100%{ left:100%; }
}

.badge-stage{
  display:flex; justify-content:center; align-items:center; padding:20px;
  perspective:1200px;
}

.award-badge{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:min(440px,90vw); padding:56px 20px 40px;
  cursor:pointer;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .2s ease-out;
  will-change:transform;
}
.award-laurel{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100%; height:auto;
  fill:var(--violet); opacity:0.55;
  filter:drop-shadow(0 0 18px rgba(143,125,255,0.25));
  pointer-events:none;
}
.award-content{ position:relative; z-index:2; text-align:center; }
.award-pill{
  display:inline-block; padding:6px 18px; margin-bottom:14px; border-radius:8px;
  font-family:var(--font-mono); font-weight:600; font-size:12px; letter-spacing:2px;
  color:#0a0a0f; text-transform:uppercase;
  background:linear-gradient(135deg, var(--violet), #63e8d4);
}
.award-title{
  font-family:var(--font-display); font-size:clamp(30px,4vw,42px); font-weight:800;
  letter-spacing:-0.01em; color:var(--text);
}
.award-rule{ width:120px; height:1px; margin:14px auto; background:var(--border); }
.award-subtitle{ color:var(--text-dim); font-size:15px; font-weight:400; margin-bottom:10px; }
.award-recipient{ font-family:var(--font-mono); font-style:italic; color:var(--text-dim); font-size:13px; }

@media (prefers-reduced-motion:reduce){
  .award-badge{ transition:none; }
}

.logo-scene{
  position:relative;
  width:min(340px,84vw); height:min(340px,84vw);
  display:flex; align-items:center; justify-content:center;
}

.logo-img-wrap{
  position:relative; z-index:4;
  width:78%; height:78%;
  border-radius:50%;
  filter:
    drop-shadow(0 4px 6px rgba(0,0,0,0.5))
    drop-shadow(0 10px 20px rgba(0,0,0,0.4))
    drop-shadow(0 0 40px rgba(143,125,255,0.35))
    drop-shadow(0 0 80px rgba(99,232,212,0.15));
  transform: rotate(var(--tilt,0deg)) translate(var(--tx,0px), var(--ty,0px));
  transition: transform 0.2s ease-out;
}

.logo-img{
  width:100%; height:100%; object-fit:contain; display:block;
  border-radius:50%;
}

.logo-vray-sheen{
  position:absolute; left:50%; bottom:6%;
  width:62%; height:14px;
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(90deg,
    transparent 0%,
    #ffd23f 20%,
    #ff9d1f 45%,
    #ff5b1f 65%,
    #ff2e2e 82%,
    transparent 100%
  );
  filter:blur(7px);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity 0.35s ease;
  pointer-events:none; z-index:5;
}
.logo-scene:hover .logo-vray-sheen{
  opacity:1;
}

.logo-shadow{
  position:absolute; bottom:-24px; left:50%; transform:translateX(-50%);
  width:55%; height:18px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, transparent 75%);
  z-index:1; pointer-events:none;
}

.badge-card,.lanyard,.model-glow-ring,.sticker,.sticker-sheet,.sticker-hint,
.model-wrap,.logo-glow-ring,.logo-particles,.logo-vray-fresnel{ display:none; }

section{max-width:1120px; margin:0 auto; padding:56px 24px;}
.section-head{text-align:center; margin-bottom:48px;}
.section-head .tag{
  font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:2px;
  color:var(--violet); margin-bottom:14px; display:block; text-transform:uppercase;
}
.section-head h2{font-family:var(--font-display); font-size:clamp(26px,3.6vw,38px); font-weight:700; letter-spacing:-0.01em;}
.section-head p{color:var(--text-dim); margin-top:14px; max-width:560px; margin-left:auto; margin-right:auto;}

.grid{display:flex; flex-direction:column; gap:12px;}

.card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px 22px; display:flex; align-items:center; gap:20px;
  transition:border-color .25s, transform .25s, box-shadow .25s;
  position:relative; overflow:hidden; text-decoration:none; color:inherit; cursor:pointer;
}
.card::before{
  content:""; position:absolute; top:10px; bottom:10px; left:0; width:3px;
  background:linear-gradient(180deg, var(--violet), var(--foil));
  opacity:0; transition:opacity .25s;
}
.card:hover{border-color:var(--border-hover); transform:translateX(4px); box-shadow:0 16px 40px rgba(0,0,0,0.4);}
.card:hover::before{opacity:1;}
.card:active{transform:translateX(1px);}
.card.soon{opacity:0.6; cursor:default;}
.card.soon:hover{transform:none; box-shadow:none; border-color:var(--border);}
.card.soon:hover::before{opacity:0;}
.card-top{display:flex; align-items:center; flex-direction:column; gap:8px; flex-shrink:0;}

.icon-wrap{
  width:46px; height:46px; border-radius:12px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
}
.icon-wrap img{width:26px; height:26px; object-fit:contain; border-radius:6px;}
.icon-wrap img.zoomed{width:36px; height:36px; object-fit:cover; transform:scale(1.35); border-radius:8px;}
.icon-wrap img.upscaled{width:30px; height:30px; object-fit:contain;}
.icon-wrap.fill{padding:0;}
.icon-wrap img.fill{width:100%; height:100%; object-fit:cover; border-radius:11px;}

.icon-wrap.fade, .ro-icon.fade{position:relative;}
.fade-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation:iconCrossfade 9s ease-in-out infinite;}
.fade-img.fade-1{animation-delay:0s;}
.fade-img.fade-2{animation-delay:3s;}
.fade-img.fade-3{animation-delay:6s;}
@keyframes iconCrossfade{
  0%{opacity:0;}
  6%{opacity:1;}
  28%{opacity:1;}
  34%{opacity:0;}
  100%{opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .fade-img{animation:none;}
  .fade-img.fade-1{opacity:1;}
}

.badge-pill{
  font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.4px;
  padding:4px 10px; border-radius:20px; text-transform:uppercase; white-space:nowrap;
}
.badge-pill.ready{background:rgba(99,224,160,0.15); color:var(--green);}
.badge-pill.soon{background:rgba(255,255,255,0.08); color:var(--text-dim);}
.badge-pill.beta{background:rgba(255,180,84,0.15); color:var(--amber);}

.card h3{font-family:var(--font-display); font-size:17px; font-weight:600; margin-bottom:3px;}
.card p{color:var(--text-dim); font-size:13.5px; line-height:1.5;}
.card-content{flex:1; min-width:0;}
.card-link{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--violet); text-decoration:none; margin-top:8px;}
.card-link:hover{color:var(--foil);}
.card-link svg{width:13px;height:13px;}
.disabled-link{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--text-faint); margin-top:8px;}

.steps{display:flex; flex-direction:column; gap:0; position:relative; max-width:640px; margin:0 auto;}
.step{
  background:transparent; border:none; padding:0 0 32px 52px;
  position:relative;
}
.step:last-child{padding-bottom:0;}
.step::before{
  content:""; position:absolute; left:13px; top:30px; bottom:0; width:1px;
  background:linear-gradient(180deg, var(--border-hover), var(--border));
}
.step:last-child::before{display:none;}
.step .num{
  position:absolute; left:0; top:0;
  width:28px; height:28px; border-radius:50%;
  background:var(--bg-card); border:1px solid var(--border-hover); color:var(--violet);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:600; font-size:13px;
  box-shadow:0 0 0 4px var(--bg);
}
.step h4{font-family:var(--font-display); font-weight:600; font-size:16px; margin-bottom:6px;}
.step p{color:var(--text-dim); font-size:13.5px; line-height:1.5;}

.warning-box{
  background:rgba(143,125,255,0.06); border:1px solid rgba(143,125,255,0.25); border-radius:var(--radius-md);
  padding:24px 28px; display:flex; gap:16px; align-items:flex-start; max-width:800px; margin:0 auto;
}
.warning-box.amber{border-color:rgba(255,180,84,0.3); background:rgba(255,180,84,0.06);}
.warning-box svg{flex-shrink:0; width:22px; height:22px; color:var(--violet); margin-top:2px;}
.warning-box p{color:var(--text-dim); font-size:14px; line-height:1.6;}
.warning-box b{color:var(--text);}

.link-placeholder{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:30px;
  background:rgba(255,255,255,0.03); border:1px dashed var(--text-faint);
  color:var(--text-faint); font-family:var(--font-mono); font-size:12.5px;
  letter-spacing:0.5px; text-transform:uppercase; cursor:not-allowed;
  user-select:none;
}
.link-placeholder svg{width:15px; height:15px; flex-shrink:0;}

.tos-link{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:30px;
  background:rgba(143,125,255,0.08); border:1px solid var(--border-hover);
  color:var(--violet); font-family:var(--font-mono); font-size:12.5px;
  letter-spacing:0.5px; text-transform:uppercase; text-decoration:none;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.tos-link:hover{ background:rgba(143,125,255,0.16); color:var(--foil); transform:translateY(-2px); }
.tos-link svg{width:15px; height:15px; flex-shrink:0;}

footer{border-top:1px solid var(--border); padding:34px 24px; text-align:center; color:var(--text-dim); font-size:13px; position:relative; z-index:1;}
footer a{color:var(--violet); text-decoration:none;}
footer a:hover{color:var(--foil);}

@media (max-width:900px){
  .hero{grid-template-columns:1fr; text-align:center; padding-top:60px;}
  .hero > div{min-width:0;}
  .sub{margin-left:auto; margin-right:auto;}
  .hero-actions{justify-content:center;}
  .badge-stage{order:-1;}
}
@media (max-width:760px){
  html{overflow-x:hidden;}
  body{overflow-x:hidden; width:100%;}
  nav{padding:14px 18px;}
  .nav-links{display:none;}
  .theme-toggle{top:78px; left:18px;}
  .nav-cta, .nav-cta-wrap{width:38px!important; height:38px!important;}
  .nav-cta{padding:2px!important; background:rgba(255,255,255,0.06)!important; box-shadow:none!important;}
  .nav-cta-info, .nav-cta-icon{display:none!important;}
  .card{flex-direction:column; align-items:flex-start; text-align:left;}
  .card-top{flex-direction:row;}
}

.repo-dropdown-arrow{
  position:fixed; z-index:202; width:16px; height:16px;
  background:var(--dropdown-arrow-bg);
  border-left:1px solid var(--border-hover);
  border-top:1px solid var(--border-hover);
  transform:translate(-50%,-50%) rotate(45deg);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease, background-color .35s ease;
}
.repo-dropdown-arrow.open{ opacity:1; }

.repo-dropdown{
  position:fixed; z-index:201; width:300px;
  background:linear-gradient(180deg, var(--dropdown-bg-top), var(--dropdown-bg-bottom)); background-color:var(--dropdown-bg-solid);
  border:1px solid var(--border-hover); border-top:none; border-radius:6px; padding:8px;
  box-shadow:0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(143,125,255,0.08);
  overflow:hidden; transform-origin:top center; opacity:0; max-height:64px; transform:scale(0.98);
  pointer-events:none;
  transition:max-height .38s cubic-bezier(.19,1,.22,1), opacity .18s ease, transform .38s cubic-bezier(.19,1,.22,1), box-shadow .38s ease;
}
.repo-dropdown.open{
  opacity:1; max-height:420px; transform:scale(1); pointer-events:auto;
  box-shadow:0 26px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(143,125,255,0.14), 0 0 40px rgba(143,125,255,0.1);
}
.repo-dropdown-label{display:flex; align-items:center; gap:12px; padding:8px; margin-bottom:2px;}
.repo-dropdown-label .rdl-icon{
  width:38px; height:38px; border-radius:8px; flex-shrink:0;
  background:rgba(255,255,255,0.06); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--violet);
  overflow:hidden; position:relative; transition:background .25s ease, border-color .25s ease, box-shadow .35s ease;
}
.repo-dropdown-label:hover .rdl-icon{background:rgba(143,125,255,0.12); border-color:rgba(143,125,255,0.4); box-shadow:0 0 0 3px rgba(143,125,255,0.12), 0 0 16px rgba(143,125,255,0.35);}
.repo-dropdown-label .rdl-icon svg{width:18px; height:18px; transform:translate(-5px,-5px) rotate(-32deg); transition:transform .55s cubic-bezier(.16,1,.3,1);}
.repo-dropdown-label:hover .rdl-icon svg{transform:translate(0,0) rotate(0deg); transition:transform .28s cubic-bezier(.34,1.7,.64,1);}
.repo-dropdown-label .rdl-text{display:flex; flex-direction:column; gap:1px; min-width:0;}
.repo-dropdown-label .rdl-title{font-family:var(--font-display); font-size:14.5px; font-weight:700; letter-spacing:-0.01em;}
.repo-dropdown-label .rdl-sub{font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim);}
.repo-dropdown-list{display:flex; flex-direction:column; gap:2px;}
.repo-option{
  display:flex; align-items:center; gap:12px; width:100%;
  background:transparent; border:1px solid transparent; border-radius:5px; padding:10px 8px;
  text-decoration:none; color:var(--text); cursor:pointer;
  transition:background .15s, border-color .15s, opacity .3s ease, transform .3s ease;
  text-align:left; opacity:0; transform:translateY(8px);
}
.repo-dropdown.open .repo-option{opacity:1; transform:translateY(0);}
.repo-dropdown.open .repo-option:nth-child(1){transition-delay:.08s;}
.repo-dropdown.open .repo-option:nth-child(2){transition-delay:.13s;}
.repo-option:hover{background:rgba(143,125,255,0.1); border-color:rgba(143,125,255,0.3);}
.repo-option .ro-icon{
  width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,0.05); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
}
.repo-option .ro-icon img{width:100%; height:100%; object-fit:cover;}
.repo-option .ro-icon img.zoomed{transform:scale(1.7);}
.repo-option .ro-text{display:flex; flex-direction:column; gap:2px;}
.repo-option .ro-title{font-family:var(--font-display); font-size:13.5px; font-weight:600;}
.repo-option .ro-sub{font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim);}
.repo-option .ro-arrow{margin-left:auto; width:14px; height:14px; color:var(--text-dim); flex-shrink:0;}
.repo-option:hover .ro-arrow{color:var(--violet);}

.faq-list{display:flex; flex-direction:column; gap:12px; max-width:760px; margin:0 auto;}

.faq-item{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  overflow:hidden; transition:border-color .25s ease;
}
.faq-item:hover{border-color:var(--border-hover);}
.faq-item.open{border-color:var(--border-hover);}

.faq-summary{
  all:unset; box-sizing:border-box;
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:16px; width:100%;
  padding:18px 22px; font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--text);
}
.faq-summary .faq-num{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:rgba(143,125,255,0.12); border:1px solid var(--border-hover); color:var(--violet);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:600; font-size:12px;
}
.faq-summary .faq-q-text{flex:1; min-width:0;}
.faq-summary .faq-chevron{
  flex-shrink:0; width:18px; height:18px; color:var(--text-dim);
  transition:transform .35s cubic-bezier(.19,1,.22,1), color .25s ease;
}
.faq-item.open .faq-summary .faq-chevron{transform:rotate(180deg); color:var(--violet);}

.faq-answer-wrap{
  max-height:0; overflow:hidden;
  transition:max-height .38s cubic-bezier(.19,1,.22,1);
}

.faq-answer{
  padding:0 22px 20px 64px; color:var(--text-dim); font-size:14px; line-height:1.65;
}
.faq-answer p{margin:0 0 10px;}
.faq-answer p:last-child{margin-bottom:0;}
.faq-answer code{
  background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius:5px;
  padding:1px 6px; font-family:var(--font-mono); font-size:12.5px; color:var(--foil);
}
.faq-answer b, .faq-answer strong{color:var(--text); font-weight:600;}
.faq-answer ol, .faq-answer ul{margin:8px 0 10px; padding-left:20px; display:flex; flex-direction:column; gap:6px;}

.faq-cta{
  display:flex; align-items:center; gap:16px;
  background:rgba(143,125,255,0.06); border:1px solid rgba(143,125,255,0.25); border-radius:var(--radius-md);
  padding:18px 22px; text-decoration:none; color:inherit;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.faq-cta:hover{border-color:var(--border-hover); background:rgba(143,125,255,0.1); transform:translateX(4px);}
.faq-cta .faq-cta-icon{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:rgba(143,125,255,0.12); border:1px solid var(--border-hover); color:var(--violet);
  display:flex; align-items:center; justify-content:center;
}
.faq-cta .faq-cta-icon svg{width:15px; height:15px;}
.faq-cta-text{flex:1; min-width:0;}
.faq-cta-text h4{font-family:var(--font-display); font-weight:600; font-size:14.5px; margin-bottom:2px;}
.faq-cta-text p{color:var(--text-dim); font-size:13px; margin:0;}
.faq-cta-arrow{flex-shrink:0; width:16px; height:16px; color:var(--text-dim); transition:color .25s ease;}
.faq-cta:hover .faq-cta-arrow{color:var(--violet);}

@media (max-width:600px){
  .faq-summary{padding:16px 18px; gap:12px;}
  .faq-answer{padding:0 18px 18px 54px;}
}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .model-glow-ring{animation:none;}
  .model-loading-ring{animation:none;}
  .reveal{opacity:1; transform:none; transition:none;}
}

.kb-gate-overlay{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,6,10,0.72); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.kb-gate-overlay.open{ opacity:1; pointer-events:auto; }
body.kb-gate-lock{ overflow:hidden; height:100%; }
html:has(body.kb-gate-lock){ overflow:hidden; }
.kb-gate-card{
  width:min(380px,88vw); text-align:center;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px 30px 20px; box-shadow:0 30px 80px rgba(0,0,0,0.6);
  transform:translateY(10px) scale(.97); transition:transform .22s ease;
}
.kb-gate-overlay.open .kb-gate-card{ transform:translateY(0) scale(1); }
.kb-gate-card h3{
  font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:-0.01em; margin-bottom:10px;
}

.kb-gate-scene{
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
}
.kb-gate-mascot-wrap{
  display:flex; flex-direction:row; align-items:flex-end; flex-shrink:0;
  gap:0;
  width:clamp(380px, 70vw, 760px);
}
.kb-gate-mascot-col{
  display:flex; flex-direction:column; align-items:center; flex-shrink:0;
  width:clamp(230px, 44vw, 460px);
}
.kb-gate-mascot{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 20px 16px rgba(0,0,0,0.6));
}
.kb-gate-floor{
  width:86%; height:18px; margin-top:-12px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(143,125,255,0.45), transparent 72%);
}
.kb-gate-dialogue{
  position:relative; text-align:left;
  flex:1 1 auto; min-width:170px; max-width:280px;
  align-self:flex-start;
  margin-top:clamp(4px, 3vw, 18px); margin-left:clamp(-90px, -9vw, -50px);
  background:var(--bg-raised); border:1px solid var(--border); border-radius:14px;
  padding:11px 13px 12px;
  box-shadow:0 10px 24px rgba(0,0,0,0.28);
}

.kb-gate-dialogue::after{
  content:""; position:absolute; left:-7px; top:20px;
  width:14px; height:14px;
  background:var(--bg-raised);
  border-left:1px solid var(--border); border-bottom:1px solid var(--border);
  border-bottom-left-radius:4px;
  transform:rotate(45deg);
}
.kb-gate-dialogue-name{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.4px;
  color:var(--violet); margin-bottom:5px; padding-bottom:5px; border-bottom:1px solid var(--border);
}
.kb-gate-dialogue-text{
  font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--text); margin:0; min-height:2.6em;
}
@media (max-width:640px){
  .kb-gate-scene{ flex-direction:column; align-items:center; }
  .kb-gate-mascot-wrap{
    flex-direction:column; align-items:center; gap:0;
    width:clamp(260px, 78vw, 380px);
  }
  .kb-gate-dialogue{
    order:-1; align-self:stretch; max-width:100%;
    margin:0 0 30px;
  }

  .kb-gate-dialogue::after{
    left:24px; top:auto; bottom:-7px;
    border-left:none; border-bottom:1px solid var(--border);
    border-right:1px solid var(--border); border-top:none;
    border-bottom-left-radius:0; border-bottom-right-radius:4px;
    transform:rotate(45deg);
  }
}
.kb-gate-input{
  width:100%; text-align:center; background:var(--bg-raised); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px;
  font-family:var(--font-mono); font-size:12.5px; outline:none; margin-bottom:16px;
  transition:border-color .2s, box-shadow .2s;
}
.kb-gate-input:focus{ border-color:var(--border-hover); box-shadow:0 0 0 3px rgba(143,125,255,0.14); }
.kb-gate-bar-track{
  height:10px; border-radius:6px; background:var(--bg-raised); border:1px solid var(--border);
  overflow:hidden; margin-bottom:12px;
}
.kb-gate-bar-fill{
  height:100%; width:0%; border-radius:6px;
  background:linear-gradient(90deg, var(--violet), var(--foil));
  transition:width .08s linear;
}
.kb-gate-status{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.5px; text-transform:uppercase;
  color:var(--text-faint);
}
.kb-gate-status.success{ color:var(--green); }
.kb-gate-nag-clock{
  display:none; margin-top:8px;
  font-family:var(--font-mono); font-size:15px; letter-spacing:1px;
  color:var(--text); text-align:center;
}
.kb-gate-nag-clock.show{ display:block; }
.kb-gate-convo-choices{
  display:none; flex-direction:column; gap:8px; margin-top:6px; margin-bottom:14px; text-align:left;
}
.kb-gate-convo-choice{
  width:100%; text-align:left; padding:10px 14px; border-radius:10px;
  background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--text);
  font-family:var(--font-body); font-size:13px; line-height:1.4; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.kb-gate-convo-choice:hover{ background:rgba(255,255,255,0.09); border-color:var(--border-hover); transform:translateX(2px); }
.kb-gate-convo-final{
  text-align:center; font-weight:600;
  background:var(--btn-primary-bg); color:var(--btn-primary-text); border-color:transparent;
}
.kb-gate-convo-final:hover{ background:var(--btn-primary-bg); box-shadow:0 8px 20px rgba(255,255,255,0.15); transform:translateY(-1px); }
.kb-gate-close{
  margin-top:12px; background:transparent; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.3px; color:var(--text-faint); text-decoration:underline;
}
.kb-gate-close:hover{ color:var(--text); }
.kb-gate-confirm-actions{
  display:flex; gap:10px; justify-content:center; margin-top:6px;
}
.kb-gate-confirm-actions .btn{
  flex:1 1 0; padding:10px 0; font-size:13px; justify-content:center;
}
@media (prefers-reduced-motion:reduce){
  .kb-gate-overlay, .kb-gate-card, .kb-gate-bar-fill{ transition:none; }
}