/* Scoped extraction of the approved DOM1 HTML demo; editing controls are admin-only. */
.tsf-gaming-setup :is(h1,h2,h3,p,small,header,nav,section,article,footer,hr,button,label){
  all:revert;
  box-sizing:border-box
}


.tsf-gaming-setup{
  color-scheme:dark;
  --purple:#a14bff;
  --cyan:#3ad9ff;
  --ink:#060713;
  --muted:#a8a9bf
}
.tsf-gaming-setup *{
  box-sizing:border-box
}
.tsf-gaming-setup{
  margin:0;
  background:#060711;
  color:white;
  font-family:Inter,Segoe UI,Arial,sans-serif
}
.tsf-gaming-setup button,.tsf-gaming-setup label{
  font:inherit
}
.tsf-gaming-setup header{
  height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(22px,5vw,80px);
  border-bottom:1px solid #29253b;
  background:#090913
}
.tsf-gaming-setup .mark{
  font-weight:1000;
  letter-spacing:-3px;
  font-style:italic;
  font-size:35px
}
.tsf-gaming-setup .mark b{
  color:var(--purple)
}
.tsf-gaming-setup header nav{
  font-size:12px;
  letter-spacing:.24em;
  color:#a9a6b8
}
.tsf-gaming-setup .status{
  font-size:11px;
  color:#b3f8db;
  border:1px solid #275d52;
  border-radius:50px;
  padding:8px 12px
}
.tsf-gaming-setup .hero{
  min-height:540px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:95px 22px
}
.tsf-gaming-setup .hero::before{
  content:"";
  position:absolute;
  inset:-30px;
  background-image:linear-gradient(90deg,#070612bb,#07061270,#070612bb),var(--tsf-gaming-hero,url("../images/gaming-setup/hero.webp"));
  background-size:cover;
  background-position:center;
  filter:blur(15px);
  z-index:-2;
  transform:scale(1.07)
}
.tsf-gaming-setup .hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#060711,transparent 62%);
  z-index:-1
}
.tsf-gaming-setup .eyebrow{
  font-size:12px;
  color:var(--cyan);
  letter-spacing:.34em;
  font-weight:800;
  text-transform:uppercase
}
.tsf-gaming-setup .hero h1{
  font-size:clamp(57px,10vw,135px);
  letter-spacing:-.07em;
  margin:0;
  font-weight:1000;
  line-height:.92;
  font-style:italic;
  text-shadow:0 10px 65px #080212
}
.tsf-gaming-setup .hero h1 span{
  color:var(--purple);
  text-shadow:0 0 60px #9638ff99
}
.tsf-gaming-setup .hero h2{
  font-size:clamp(18px,2vw,28px);
  letter-spacing:.53em;
  font-weight:350;
  margin:15px 0 26px;
  color:#e1d9ed
}
.tsf-gaming-setup .hero p{
  color:#c4bfd2;
  font-size:14px;
  line-height:1.7
}
.tsf-gaming-setup .hero hr{
  height:2px;
  width:95px;
  border:0;
  background:linear-gradient(90deg,var(--purple),var(--cyan));
  margin:24px auto
}
.tsf-gaming-setup .ambient{
  position:absolute;
  width:500px;
  height:500px;
  border-radius:50%;
  filter:blur(100px);
  opacity:.17;
  z-index:-1
}
.tsf-gaming-setup .ambient.left{
  background:var(--purple);
  left:-190px;
  top:110px
}
.tsf-gaming-setup .ambient.right{
  background:var(--cyan);
  right:-200px;
  top:30px
}
.tsf-gaming-setup .gs-content{
  max-width:1400px;
  padding:20px 28px 95px;
  margin:auto
}
.tsf-gaming-setup .section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin:26px 0 24px
}
.tsf-gaming-setup .section-head h2{
  font-size:clamp(28px,4vw,44px);
  margin:0;
  letter-spacing:-.045em
}
.tsf-gaming-setup .section-head p{
  font-size:13px;
  color:#a9a7bd;
  max-width:430px;
  line-height:1.6
}
.tsf-gaming-setup .line{
  height:2px;
  background:linear-gradient(90deg,var(--purple),transparent);
  width:100%;
  margin:0 0 28px
}
.tsf-gaming-setup .grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px
}
.tsf-gaming-setup .gear{
  min-width:0;
  border:1px solid #383044;
  background:linear-gradient(152deg,#181224,#0b0b15 75%);
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);
  transition:transform .2s,border-color .2s,box-shadow .2s;
  position:relative
}
.tsf-gaming-setup .gear:hover{
  transform:translateY(-5px);
  border-color:#9050cc;
  box-shadow:0 15px 55px #842fee2c
}
.tsf-gaming-setup .gear::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:2px;
  width:70%;
  background:linear-gradient(90deg,var(--purple),transparent)
}
.tsf-gaming-setup .gear-art{
  height:210px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 65%,#5b28843d,transparent 68%)
}
.tsf-gaming-setup .gear-art::after{
  content:"";
  width:60%;
  height:9px;
  border-radius:100%;
  background:#bb69ff;
  filter:blur(21px);
  position:absolute;
  bottom:20px;
  opacity:.5;
  pointer-events:none
}
.tsf-gaming-setup .gear-art img{
  display:block;
  width:91%;
  height:88%;
  object-fit:contain;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 14px 16px #000b)
}
.tsf-gaming-setup .placeholder-tag{
  position:absolute;
  z-index:2;
  right:12px;
  top:12px;
  border:1px solid #615778;
  color:#b2a1cb;
  background:#0d0c18bc;
  padding:5px 7px;
  font-size:9px;
  letter-spacing:.1em
}
.tsf-gaming-setup .gear-info{
  padding:16px 18px 18px
}
.tsf-gaming-setup .gear-info small{
  color:var(--cyan);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em
}
.tsf-gaming-setup .gear-info h3{
  font-size:16px;
  margin:10px 0 4px;
  line-height:1.35;
  min-height:43px
}
.tsf-gaming-setup .gear-info p{
  font-size:12px;
  color:#9995af;
  margin:0 0 19px
}
.tsf-gaming-setup .actions{
  display:flex;
  gap:8px
}
.tsf-gaming-setup .change{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  border:1px solid #7447a2;
  color:#f2dbff;
  padding:11px 13px;
  font-size:12px;
  font-weight:700;
  background:#49186b69;
  flex:1
}
.tsf-gaming-setup .change:hover{
  background:#7235a0
}
.tsf-gaming-setup .reset{
  cursor:pointer;
  background:transparent;
  color:#a99abb;
  border:1px solid #443750;
  padding:0 14px;
  font-size:22px
}
.tsf-gaming-setup .reset:hover{
  border-color:#ad61fd;
  color:white
}
.tsf-gaming-setup .notice{
  margin-top:24px;
  color:#a7a2b8;
  font-size:12px;
  line-height:1.7;
  border-left:3px solid var(--purple);
  padding:5px 15px
}
.tsf-gaming-setup .toast{
  position:fixed;
  right:20px;
  bottom:20px;
  background:#20132f;
  color:white;
  border:1px solid #8e60ac;
  padding:14px 20px;
  box-shadow:0 10px 40px #0009;
  z-index:10;
  opacity:0;
  transform:translateY(10px);
  transition:.2s;
  pointer-events:none;
  font-size:13px
}
.tsf-gaming-setup .toast.show{
  opacity:1;
  transform:translateY(0)
}
.tsf-gaming-setup footer{
  text-align:center;
  padding:30px;
  color:#79758b;
  font-size:11px;
  letter-spacing:.12em;
  border-top:1px solid #211d2a
}
@media(max-width:1080px){
  .tsf-gaming-setup .grid{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

}
@media(max-width:760px){
  .tsf-gaming-setup .grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.tsf-gaming-setup .hero{
  min-height:450px
}
.tsf-gaming-setup header nav{
  display:none
}
.tsf-gaming-setup .section-head{
  display:block
}
.tsf-gaming-setup .gear-art{
  height:170px
}

}
@media(max-width:480px){
  .tsf-gaming-setup .gs-content{
  padding:14px 13px 55px
}
.tsf-gaming-setup .grid{
  gap:10px
}
.tsf-gaming-setup .gear-art{
  height:140px
}
.tsf-gaming-setup .gear-info{
  padding:13px 10px
}
.tsf-gaming-setup .gear-info h3{
  font-size:13px
}
.tsf-gaming-setup .gear-info small{
  font-size:9px
}
.tsf-gaming-setup .gear-info p{
  font-size:10px
}
.tsf-gaming-setup .change{
  font-size:10px;
  padding:10px 6px
}
.tsf-gaming-setup .reset{
  padding:0 9px
}
.tsf-gaming-setup .placeholder-tag{
  font-size:7px
}

}


.tsf-gaming-setup{
  isolation:isolate;
  line-height:normal;
  font-size:16px;
  width:100%;
  max-width:none;
  text-align:left
}
.tsf-gaming-setup .actions{
  min-height:40px
}
.tsf-gaming-setup a.change{
  text-decoration:none
}
.tsf-gaming-setup :is(h1,h2,h3,p){
  overflow-wrap:anywhere
}
.tsf-gaming-setup :is(a,button):focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:4px
}
.tsf-gaming-setup .gear-art img{
  max-width:none
}
.tsf-gaming-setup .gear-art a{
  display:contents
}
@media(prefers-reduced-motion:reduce){
  .tsf-gaming-setup .gear{
  transition:none
}
.tsf-gaming-setup .gear:hover{
  transform:none
}

}


@media(max-width:480px){
  .tsf-gaming-setup .actions{
  min-height:36px
}

}




/* Keep the heading near the top on narrow screens without the former hero label. */
@media(max-width:680px){.tsf-gaming-setup .hero{min-height:0;padding:42px 22px}}