:root{
  --bg:#000; --fg:#eaeaea; --mut:#43ff8a; --mut-brd:#262626; --hover:#141414;
  --soft:#9a9a9a; --maxw:1200px; --shadow:0 12px 40px rgba(0,0,0,.45); --radius:14px; --ring:0 0 0 2px rgba(255,255,255,.06) inset;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui, Arial, sans-serif}

/* Header */
.site-header{
  position:sticky; top:0; z-index:40;
  display:flex; gap:.8rem; align-items:center; justify-content:center;
  background:#0a0a0a; border-bottom:1px solid var(--mut-brd);
  padding:.6rem 1rem;
}
.menu-toggle{
  background:transparent; border:1px solid var(--mut-brd); color:var(--fg);
  padding:.45rem .6rem; border-radius:10px; cursor:pointer;
}
.menu-toggle:hover{background:var(--hover)}
.site-nav{display:none; width:100%}
.site-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap}
.site-nav a{display:block; padding:.5rem .8rem; border-radius:10px; color:var(--fg); text-decoration:none; border:1px solid transparent}
.site-nav a:hover{background:var(--hover)}
.site-nav .active{border-color:var(--mut); color:#fff}

/* Mobile open */
.site-header.is-open .site-nav{display:block}

@media (min-width:860px){
  .menu-toggle{display:none}
  .site-header{justify-content:space-between}
  .site-nav{display:block}
  .site-nav ul{margin:0}
}

/* Views */
.views{max-width:var(--maxw); margin:0 auto; padding:1rem}
.view{display:none; padding:1.2rem}
.view.active{display:block}

/* HERO like SpaceArt */
.hero{
  min-height:calc(100dvh - 120px);
  display:grid; place-items:center;
  background: radial-gradient(1000px 600px at 50% -10%, rgba(67,255,138,.12), transparent 60%);
}
.hero-inner{ text-align:center; padding:2rem 1rem; }
.hero-title{ font-size:clamp(2rem, 4vw, 3rem); margin:0 0 .6rem; letter-spacing:.02em }
.accent{ color:var(--mut); text-shadow:0 0 18px rgba(67,255,138,.25) }
.hero-sub{ color:#cfcfcf; max-width:760px; margin:0 auto 1.2rem; }
.hero-ctas{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin:1rem 0 }
.btn{ display:inline-block; padding:.7rem 1.1rem; border-radius:12px; text-decoration:none; font-weight:600; border:1px solid var(--mut-brd); }
.btn-primary{ background:linear-gradient(180deg, #1b1b1b, #101010); border-color:#2f2f2f; color:#fff; box-shadow:0 8px 24px rgba(67,255,138,.12) }
.btn-primary:hover{ background:#171717 }
.btn-ghost{ background:transparent; color:var(--fg) }
.btn-ghost:hover{ background:var(--hover) }
.hero-meta{ color:var(--soft); margin-top:.4rem; font-size:.95rem }

/* APP */
.app-wrap{max-width:860px; margin:0 auto}
.controls-row,.checks-row,.buttons-row{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.6rem 0 }
select,textarea,pre,button{ border-radius:var(--radius); border:1px solid var(--mut-brd); background:#0b0b0b; color:var(--fg); box-shadow:var(--ring) }
select{ padding:.5rem .7rem }
textarea{ width:100%; padding:1rem; min-height:120px }
pre{ width:100%; padding:1rem; min-height:120px; overflow:auto; white-space:pre-wrap; background:#050505 }
button{ background:#111; border-color:#2b2b2b; cursor:pointer; padding:.6rem .95rem }
button:hover{ background:var(--hover) }
button#btnTransform{ border-color:var(--mut); color:#fff }
.visually-hidden{ position:absolute!important; width:1px; height:1px; margin:-1px; border:0; padding:0; clip:rect(0 0 0 0); overflow:hidden }