/* ====== DESIGN ====== */
    :root{
      --bg: #000000;         /* page background */
      --text: #ffffff;       /* primary text */
      --muted: #9ca3af;      /* secondary text */
      --soft: #1a1a1a;       /* cards/lines */
      --line: #242424;       /* hairlines */
      --focus: rgba(255,255,255,.14);
      --radius: 14px;
      --maxw: 920px;
      --pad: clamp(20px, 4vw, 40px);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--text);
      background: var(--bg);
      font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
      display:grid; place-items:center; padding: 24px;
    }
    .wrap{
      width:min(var(--maxw), 100%);
      padding: var(--pad);
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }
    .label{
      display:inline-block;
      font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
      padding:8px 10px;
      border:1px solid var(--line); border-radius:999px; color:var(--muted);
      background: #0b0b0b;
    }
    h1{
      margin:16px 0 6px;
      font-weight:750;
      letter-spacing:.2px;
      font-size: clamp(28px, 5vw, 40px);
    }
    .lead{color:var(--muted); margin:0 0 18px; max-width: 65ch}
    .grid{display:grid; gap:24px; grid-template-columns: 1.2fr .8fr}
    @media (max-width: 780px){ .grid{ grid-template-columns: 1fr } }
    .card{
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 16px;
      background: #0a0a0a;
    }
    .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

    /* countdown */
    .count{display:flex; gap:16px; flex-wrap:wrap; margin: 6px 0 4px}
    .box{min-width:86px; text-align:center; border:1px solid var(--line); border-radius:10px; padding:12px 10px; background:#0b0b0b}
    .n{display:block; font-weight:800; letter-spacing:.4px; font-size: clamp(24px, 4vw, 32px)}
    .l{display:block; font-size:.82rem; color:var(--muted)}

    /* form */
    form{display:flex; gap:10px; margin-top:12px}
    input,button{
      font: inherit; color:var(--text); background:#0b0b0b;
      border:1px solid var(--line); border-radius:10px;
      padding:12px 14px; outline:none;
    }
    input{flex:1; min-width:0}
    input:focus{box-shadow: 0 0 0 4px var(--focus)}
    button{
      cursor:pointer; font-weight:700; background:#111111;
      transition: transform .06s ease, background .15s ease;
    }
    button:hover{background:#141414}
    button:active{transform: translateY(1px)}
    .msg{margin-top:8px; font-size:.92rem}
    .ok{color:#86efac} .err{color:#fca5a5}

    /* footer */
    .hr{height:1px; background:var(--line); margin: 22px 0}
    .foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:.95rem}
    a{color:var(--text); text-underline-offset: 3px}
    a:hover{text-decoration:none}
    .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}