:root{
    --bg:#0b0c10;
    --card:#121318;
    --text:#e9ecf1;
    --muted:#a8b0bd;
    --brand:#7c5cff;
    --brand-2:#3bd1ff;
    --ok:#2ecc71;
    --err:#e74c3c;
    --border:#1e2230;
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --radius:18px;
    --radius-sm:12px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:linear-gradient(180deg,#0b0c10,#0b0c10 50%,#0c111b 100%);
  }
  
  .container{width:min(1100px,92vw); margin:0 auto}
  
  /* Header */
  .site-header{
    position:sticky; top:0; z-index:10;
    backdrop-filter:saturate(180%) blur(6px);
    background:rgba(11,12,16,.7); border-bottom:1px solid var(--border);
  }
  .nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
  .brand{font-weight:800; text-decoration:none; color:var(--text)}
  .nav a{color:var(--muted); text-decoration:none; margin-left:20px}
  .nav a[aria-current="page"]{color:var(--text)}
  
  /* Hero */
  .hero{padding:56px 0 24px}
  .hero-inner{display:grid; gap:18px; place-items:center; text-align:center}
  .headline{font-size:clamp(28px,4vw,48px); margin:6px 0}
  .subhead{color:var(--muted); margin:0 0 8px}
  
  /* Subscribe card */
  .subscribe-card{
    display:grid; gap:14px; padding:24px;
    background:radial-gradient(1200px 400px at 50% -10%, rgba(123,92,255,.15), transparent 40%) , var(--card);
    border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
    width:min(700px,100%);
  }
  .form-row{display:flex; gap:12px}
  .form-row input{
    width:100%; padding:16px 14px; border-radius:var(--radius-sm);
    border:1px solid var(--border); background:#0e1016; color:var(--text);
  }
  .btn-cta, .btn{
    cursor:pointer; border:0; padding:14px 18px; border-radius:999px; font-weight:700;
    color:#0a0b10; background:linear-gradient(90deg,var(--brand),var(--brand-2)); box-shadow:var(--shadow);
  }
  .btn:hover{filter:brightness(1.05)}
  .btn.ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
  .btn.danger{background:linear-gradient(90deg,#ff5f6d,#ffc371); color:#0b0c10}
  
  /* Tool card */
  .tool{padding:36px 0 64px}
  .tool-card{
    display:grid; gap:12px; padding:20px; background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow);
  }
  .tool-card .result-row{display:flex; gap:10px}
  .tool-card .result-row input{flex:1}
  
  /* Doc pages */
  .doc{padding:36px 0 64px}
  details{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    padding:14px 18px; margin:12px 0; box-shadow:var(--shadow)
  }
  summary{cursor:pointer; font-weight:700}
  .qa{color:var(--muted); margin-top:10px}
  
  /* Joke */
  .joke-wrap{
    padding:24px 0;
    min-height:calc(100vh - 200px);
    display:grid;
    place-items:center;
  }
  .joke-card{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    padding:36px; box-shadow:var(--shadow);
    width:min(820px,96vw);
    text-align:center;
  }
  .joke-q{
    font-size:clamp(28px,5vw,56px);
    line-height:1.2;
    margin:0 0 12px;
  }
  .joke-a{
    color:var(--muted);
    font-size:clamp(20px,3.2vw,28px);
  }
  .share-row{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:22px;
  }

  @media (max-width: 480px){
    .joke-card{padding:24px}
  }
  
  /* Footer */
  .site-footer{border-top:1px solid var(--border); margin-top:40px; padding:18px 0; background:#0b0c10}
  .footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
  .footer-links a{color:var(--muted); text-decoration:none; margin-left:16px}
  
  /* Helpers */
  .muted{color:var(--muted)}
  .tiny{color:var(--muted); font-size:12px}
  .form-msg{margin:6px 0 0}
  .form-msg.success{color:var(--ok)}
  .form-msg.error{color:var(--err)}
  .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}