:root{
  --bg:#222;
  --bg-accent:#1a1a1a;
  --surface:#333;
  --surface-2:#444;
  --surface-3:#2b2b2b;
  --text:#f5f5f5;
  --muted:#e5e5e5;
  --brand:#ff7300;
  --brand-strong:#e86600;
  --ring:rgba(255,115,0,.45);
  --maxw:1100px;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --header-bg:#222;
  --card-overlay:rgba(255,255,255,.02);
  --wet-texture:url("style%20file/grayscale_transparent_nobuffer.png");
  --texture-size:720px;
  --overlay-opacity:.06;
}

*,
*::before,
*::after{box-sizing:border-box}

body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',Arial,sans-serif;
  line-height:1.6;
  background:radial-gradient(1200px 800px at 80% -10%,var(--bg-accent),transparent 10%),var(--bg);
  color:var(--text);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(120deg,rgba(255,255,255,.06),rgba(255,255,255,0) 35%,rgba(255,255,255,.06) 20%,rgba(255,255,255,0) 45%),
    radial-gradient(900px 600px at 20% 10%,rgba(255,255,255,.12),transparent 10%),
    radial-gradient(700px 520px at 85% 85%,rgba(255,255,255,.08),transparent 25%),
    var(--wet-texture);
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-size:auto,auto,auto,var(--texture-size) auto;
  opacity:var(--overlay-opacity);
  mix-blend-mode:screen;
  z-index:-1;
}

img{max-width:100%;height:auto;display:block}

a{color:inherit;text-decoration:none}

.wrapper{max-width:var(--maxw);margin:0 auto;padding:0 20px}

header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--header-bg);
  backdrop-filter:saturate(1.2) blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,.04);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:24px 0;
}

.logo{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-weight:700}
.logo .badge{
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:transparent url("style%20file/icononly_transparent_nobuffer.png") center/contain no-repeat !important;
  color:transparent !important;
  font-size:0;
  text-indent:-999px;
  overflow:hidden;
  font-weight:800;
  letter-spacing:.05em;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
}

nav{display:flex;align-items:center;gap:10px}
.togglebtn{
  appearance:none;
  background:var(--surface);
  color:var(--brand);
  border:0;
  border-radius:14px;
  width:46px;
  height:42px;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.togglebtn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.togglebtn .bars{display:grid;gap:5px}
.togglebtn .bars span{width:22px;height:2px;background:currentColor;display:block;border-radius:2px}

.navlinks{list-style:none;padding:0;margin:0;display:none}
.navlinks[data-open="true"]{
  display:grid;
  gap:8px;
  position:absolute;
  top:72px;
  right:20px;
  background:var(--surface);
  padding:14px;
  border-radius:14px;
  box-shadow:var(--shadow);
  min-width:220px;
}
.navlinks a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  color:var(--brand);
}
.navlinks a:hover,
.navlinks a:focus-visible{
  background:var(--bg);
  color:var(--brand);
  outline:3px solid transparent;
  box-shadow:0 0 0 3px var(--ring) inset;
}

@media (min-width:800px){
  .togglebtn{display:none}
  .navlinks{
    display:flex;
    gap:6px;
    position:static;
    background:transparent;
  }
  .navlinks[data-open="true"]{display:flex}
  .navlinks a{padding:10px 14px}
}

.btn{
  --_bg:var(--brand);
  --_fg:#111;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:12px;
  font-weight:600;
  text-decoration:none;
  color:var(--_fg);
  background:linear-gradient(180deg,var(--_bg),var(--brand-strong));
  box-shadow:0 6px 20px rgba(255,115,0,.25);
  transition:background .15s ease,box-shadow .15s ease,transform .05s ease;
}
.btn:hover{background:linear-gradient(180deg,var(--brand-strong),color-mix(in srgb,var(--brand-strong) 85%,#000))}
.btn:active{transform:translateY(1px);box-shadow:0 3px 12px rgba(255,115,0,.2)}
.btn.ghost{
  --_bg:transparent;
  --_fg:var(--brand);
  background:transparent;
  box-shadow:inset 0 0 0 2px var(--brand);
}
.btn.ghost:hover,
.btn.ghost:active{
  background:var(--brand);
  color:#111;
  box-shadow:0 6px 20px rgba(255,115,0,.25);
}
.btn.secondary{
  --_bg:var(--surface-2);
  --_fg:var(--brand);
  background:var(--surface-2);
  box-shadow:inset 0 0 0 2px var(--brand);
}
.btn.secondary:hover{background:var(--brand);color:#111}

footer{padding:40px 20px;text-align:center;color:var(--muted)}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}