.page-faq{
  --tut-rail:264px;
  --tut-ring:rgba(138,92,255,.34);
  background:
    radial-gradient(120% 55% at 88% -8%, rgba(138,92,255,.22), transparent 62%),
    radial-gradient(90% 50% at -10% 30%, rgba(61,231,255,.10), transparent 60%),
    var(--void);
  color:var(--star);
  padding-bottom:3.5rem;
  overflow-x:hidden;
}

.page-faq .tut-hero{
  position:relative;
  padding:1.75rem 0 2rem;
  border-bottom:1px solid var(--line-soft);
}

.page-faq .tut-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:linear-gradient(90deg,var(--violet),var(--cyan) 55%,transparent);
  opacity:.7;
}

.page-faq .tut-hero__grid{
  display:grid;
  gap:1.25rem;
  margin-top:1rem;
}

.page-faq .tut-hero__copy h1{
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:-.02em;
  font-size:clamp(1.9rem,7vw,3.6rem);
  line-height:1.16;
  margin:.5rem 0 0;
}

.page-faq .tut-hero__lede{
  margin:1rem 0 0;
  max-width:44ch;
  color:var(--mist);
  font-size:1rem;
  line-height:1.8;
}

.page-faq .tut-hero__tags{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-content:flex-start;
}

.page-faq .tut-hero__tags a{
  display:inline-block;
  padding:.5rem .9rem;
  border-radius:var(--pill);
  border:1px solid var(--line-cyan);
  color:var(--star);
  font-size:.8125rem;
  text-decoration:none;
  background:rgba(17,27,61,.6);
  min-height:36px;
  line-height:1.3;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}

.page-faq .tut-hero__tags a:hover,
.page-faq .tut-hero__tags a:focus-visible{
  background:rgba(138,92,255,.24);
  border-color:var(--violet);
}

.page-faq .tut-layout{
  display:grid;
  gap:1.25rem;
  padding-top:1.75rem;
}

.page-faq .tut-index{
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(17,27,61,.92),rgba(10,18,48,.72));
  padding:.9rem 1rem 1rem;
}

.page-faq .tut-index__title{
  margin:0 0 .75rem;
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.18em;
  color:var(--mist);
  text-transform:uppercase;
}

.page-faq .tut-index ol{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.15rem;
}

.page-faq .tut-index a{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  padding:.55rem .5rem;
  border-radius:var(--r-sm);
  border-left:2px solid transparent;
  color:var(--star);
  text-decoration:none;
  font-size:.9375rem;
  line-height:1.45;
  min-height:44px;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}

.page-faq .tut-index a:hover,
.page-faq .tut-index a:focus-visible{
  background:rgba(138,92,255,.16);
  border-left-color:var(--cyan);
  color:#fff;
}

.page-faq .tut-index__num{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--violet);
}

.page-faq .tut-index__foot{
  margin:1rem 0 0;
  padding-top:.75rem;
  border-top:1px solid var(--line-soft);
  font-size:.75rem;
  color:var(--mist);
}

.page-faq .tut-panels{
  display:grid;
  gap:1.1rem;
  min-width:0;
}

.page-faq .tut-panel{
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(10,18,48,.88),rgba(5,8,20,.72));
  padding:1.15rem;
  scroll-margin-top:calc(var(--header-h) + 1.25rem);
  min-width:0;
}

.page-faq .tut-panel--support{
  border-color:rgba(255,200,87,.34);
  background:linear-gradient(150deg,rgba(255,200,87,.10),rgba(10,18,48,.92) 55%);
}

.page-faq .tut-panel__head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.85rem;
  align-items:start;
  margin-bottom:1rem;
}

.page-faq .tut-panel__num{
  font-family:var(--font-mono);
  font-size:clamp(1.75rem,6vw,2.75rem);
  line-height:.9;
  font-weight:700;
  color:transparent;
  -webkit-text-stroke:1px var(--violet);
  letter-spacing:-.03em;
}

.page-faq .tut-panel__title{
  margin:0;
  font-family:var(--font-head);
  font-size:clamp(1.2rem,3.6vw,1.7rem);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.3;
}

.page-faq .tut-panel__sub{
  margin:.4rem 0 0;
  font-size:.875rem;
  line-height:1.7;
  color:var(--mist);
}

.page-faq .tut-figure{
  margin:0 0 1rem;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--panel);
}

.page-faq .tut-figure img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}

.page-faq .tut-figure figcaption{
  padding:.55rem .85rem;
  font-size:.75rem;
  line-height:1.6;
  color:var(--mist);
  background:rgba(5,8,20,.72);
  border-top:1px solid var(--line-soft);
}

.page-faq .tut-track{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  margin:0 0 1rem;
  overflow:visible;
}

.page-faq .tut-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.65rem;
}

.page-faq .tut-step{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.8rem;
  align-items:start;
  padding:.9rem;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:rgba(17,27,61,.62);
}

.page-faq .tut-step__num{
  font-family:var(--font-mono);
  font-size:1.5rem;
  font-weight:700;
  line-height:1;
  color:var(--gold);
  letter-spacing:-.04em;
}

.page-faq .tut-step__body h3{
  margin:0 0 .35rem;
  font-family:var(--font-head);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.01em;
}

.page-faq .tut-step__body p{
  margin:0;
  font-size:.9375rem;
  line-height:1.75;
  color:var(--mist);
}

.page-faq .tut-tip{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.5rem;
  margin:1rem 0 0;
  padding:.75rem .9rem;
  border-left:3px solid var(--cyan);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:rgba(61,231,255,.07);
  font-size:.875rem;
  line-height:1.7;
  color:var(--mist);
}

.page-faq .tut-tip strong{
  color:var(--star);
  font-weight:600;
}

.page-faq .tut-split{
  display:grid;
  gap:.85rem;
  margin:0 0 1rem;
}

.page-faq .tut-split--tight{
  margin-bottom:.85rem;
}

.page-faq .tut-split__col{
  padding:.9rem;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:rgba(17,27,61,.5);
}

.page-faq .tut-split__col h3{
  margin:0 0 .4rem;
  font-family:var(--font-head);
  font-size:1rem;
  font-weight:700;
  color:var(--cyan);
  letter-spacing:.01em;
}

.page-faq .tut-split__col p{
  margin:0;
  font-size:.9375rem;
  line-height:1.78;
  color:var(--mist);
}

.page-faq .tut-split__col p .mono{
  color:var(--gold);
}

.page-faq .tut-path{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.55rem;
}

.page-faq .tut-path li{
  padding:.8rem .9rem;
  border-radius:var(--r-sm);
  border:1px dashed var(--line);
  font-size:.9375rem;
  line-height:1.75;
  color:var(--mist);
  background:rgba(10,18,48,.6);
}

.page-faq .tut-path__key{
  display:inline-block;
  margin-right:.55rem;
  padding:.15rem .55rem;
  border-radius:var(--pill);
  background:rgba(138,92,255,.2);
  border:1px solid var(--line);
  color:var(--star);
  font-size:.75rem;
  font-weight:600;
  white-space:nowrap;
}

.page-faq .tut-fold{
  margin-top:.65rem;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:rgba(17,27,61,.55);
  overflow:hidden;
}

.page-faq .tut-fold summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:44px;
  padding:.8rem .9rem;
  cursor:pointer;
  list-style:none;
  font-size:.9375rem;
  font-weight:600;
  color:var(--star);
  transition:background .2s var(--ease);
}

.page-faq .tut-fold summary::-webkit-details-marker{display:none;}

.page-faq .tut-fold summary::after{
  content:"+";
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:1.05rem;
  color:var(--cyan);
}

.page-faq .tut-fold[open] summary::after{content:"−";}

.page-faq .tut-fold summary:hover{background:rgba(61,231,255,.08);}

.page-faq .tut-fold__body{
  padding:0 .9rem .9rem;
  font-size:.9125rem;
  line-height:1.8;
  color:var(--mist);
  border-top:1px solid var(--line-soft);
  padding-top:.75rem;
}

.page-faq .tut-fold__body a,
.page-faq .tut-prose a{
  color:var(--cyan);
  text-decoration:underline;
  text-underline-offset:3px;
}

.page-faq .tut-cards{
  display:grid;
  gap:.65rem;
}

.page-faq .tut-card{
  padding:.9rem;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:linear-gradient(160deg,rgba(17,27,61,.9),rgba(10,18,48,.6));
}

.page-faq .tut-card__kicker{
  margin:0 0 .3rem;
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.16em;
  color:var(--gold);
}

.page-faq .tut-card h3{
  margin:0 0 .4rem;
  font-family:var(--font-head);
  font-size:1rem;
  font-weight:700;
}

.page-faq .tut-card p{
  margin:0;
  font-size:.9rem;
  line-height:1.75;
  color:var(--mist);
}

.page-faq .tut-note{
  margin-top:.85rem;
  padding:.85rem .9rem;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:rgba(138,92,255,.1);
  font-size:.9125rem;
  line-height:1.8;
  color:var(--mist);
}

.page-faq .tut-note strong{color:var(--star);}

.page-faq .tut-note a{
  color:var(--cyan);
  text-decoration:underline;
  text-underline-offset:3px;
}

.page-faq .tut-checks{
  list-style:none;
  margin:.25rem 0 0;
  padding:0;
  display:grid;
  gap:.55rem;
}

.page-faq .tut-checks li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.6rem;
  align-items:start;
  font-size:.9rem;
  line-height:1.75;
  color:var(--mist);
  padding-bottom:.55rem;
  border-bottom:1px solid var(--line-soft);
}

.page-faq .tut-checks li:last-child{border-bottom:0;padding-bottom:0;}

.page-faq .tut-checks strong{
  color:var(--star);
  font-weight:600;
}

.page-faq .tut-checks__dot{
  width:8px;
  height:8px;
  margin-top:.6rem;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 3px rgba(61,231,255,.16);
}

.page-faq .tut-prose p{
  margin:0 0 .85rem;
  font-size:.9375rem;
  line-height:1.85;
  color:var(--mist);
}

.page-faq .tut-prose p:last-child{margin-bottom:0;}

.page-faq .tut-contact{
  display:grid;
  gap:.6rem;
}

.page-faq .tut-contact__row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.5rem .85rem;
  padding:.7rem .85rem;
  border-radius:var(--r-sm);
  background:rgba(5,8,20,.55);
  border:1px solid var(--line-soft);
}

.page-faq .tut-contact__label{
  flex:0 0 auto;
  min-width:2.5rem;
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--mist);
}

.page-faq .tut-contact__value{
  min-width:0;
  font-size:.9375rem;
  color:var(--star);
  word-break:break-word;
}

.page-faq .tut-contact__value.mono{
  font-family:var(--font-mono);
  color:var(--gold);
}

.page-faq .tut-contact__note{
  margin:.15rem 0 .35rem;
  font-size:.875rem;
  line-height:1.75;
  color:var(--mist);
}

.page-faq .tut-contact .btn{
  justify-self:start;
}

@media (min-width:640px){
  .page-faq .tut-split{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-faq .tut-cards{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-faq .tut-panel{padding:1.5rem;}
}

@media (min-width:960px){
  .page-faq .tut-hero{padding:2.25rem 0 2.5rem;}
  .page-faq .tut-hero__grid{
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    align-items:end;
    gap:2.5rem;
  }
  .page-faq .tut-hero__tags{justify-content:flex-end;}
  .page-faq .tut-layout{
    grid-template-columns:var(--tut-rail) minmax(0,1fr);
    gap:2.25rem;
    padding-top:2.5rem;
  }
  .page-faq .tut-index{
    position:sticky;
    top:calc(var(--header-h) + 1.25rem);
  }
  .page-faq .tut-panels{gap:1.4rem;}
  .page-faq .tut-panel{padding:1.85rem;}
  .page-faq .tut-steps{gap:.7rem;}
  .page-faq .tut-hero__lede{font-size:1.0625rem;}
}

@media (prefers-reduced-motion:reduce){
  .page-faq .tut-hero__tags a,
  .page-faq .tut-index a,
  .page-faq .tut-fold summary{transition:none;}
}
<<<END>>>