:root{
      --bg:#ffffff;
      --ink:#111111;
      --muted:#6e6e73;
      --line:#d2d2d7;
      --tile:#f5f5f7;
      --brand:#0071e3;
      --accent:#34c759;
      --radius:18px;
      --max:1200px;
      --mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
      --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 28px rgba(0,0,0,.06);
    }
    @media (prefers-color-scheme: dark){
      :root{
        --bg:#000000;
        --ink:#f5f5f7;
        --muted:#a1a1a6;
        --line:#2c2c2e;
        --tile:#111113;
        --brand:#0a84ff;
        --accent:#30d158;
      }
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      background:var(--bg);
      color:var(--ink);
      font: 15px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Icons","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    }
    a{color:var(--brand); text-decoration:none}
    a:hover{text-decoration:underline}
    .header{
      position:sticky; top:0; z-index:50;
      backdrop-filter:saturate(160%) blur(10px);
      background: color-mix(in oklab, var(--bg) 60%, transparent);
      border-bottom:1px solid var(--line);
    }
    .nav{max-width:var(--max); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 16px}
    .brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
    .dot{width:12px;height:12px;border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--brand), var(--accent)); box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 10%, transparent)}
    .menu{display:flex; gap:14px; align-items:center}
    .menu a{color:var(--muted)}
    .menu a:hover{color:var(--ink)}
    .wrap{max-width:var(--max); margin:0 auto; padding:clamp(16px,2vw,24px)}
    .hero{
      text-align:center; padding: clamp(42px, 8vw, 110px) 0 34px;
      background: linear-gradient(180deg, color-mix(in oklab, var(--tile) 100%, transparent) 0%, transparent 100%);
      border-bottom:1px solid var(--line);
    }
    .title{
      font-size: clamp(28px, 6vw, 56px);
      line-height:1.06; letter-spacing:-.02em; margin:6px 0 8px; font-weight:800;
    }
    .lead{color:var(--muted); font-size:clamp(16px,2.2vw,20px); max-width:820px; margin:0 auto}
    .cta{
      display:inline-flex; gap:10px; align-items:center; margin-top:16px;
      padding:12px 18px; border-radius:999px; border:1px solid var(--line); background:var(--ink); color:var(--bg); font-weight:700;
      box-shadow: var(--shadow);
    }
    .cta.ghost{background:transparent; color:var(--ink)}
    .grid{display:grid; gap:clamp(14px,2vw,22px); grid-template-columns: repeat(12,1fr)}
    .col-12{grid-column:span 12}
    .col-6{grid-column:span 6}
    .col-4{grid-column:span 4}
    @media (max-width:980px){ .col-6,.col-4{grid-column:span 12} }
    .card{
      background:var(--tile); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(16px,2.2vw,24px);
      box-shadow: var(--shadow);
    }
    h2.section{font-size:clamp(22px,3.1vw,32px); margin:0 0 10px}
    h3{font-size:clamp(18px,2.4vw,22px); margin:0 0 8px}
    p.muted{color:var(--muted)}
    .form{display:grid; grid-template-columns:repeat(12,1fr); gap:12px; align-items:end}
    .field{grid-column:span 6; display:flex; flex-direction:column; gap:6px}
    .field label{font-weight:700}
    .field input{
      padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); outline-color:var(--brand);
    }
    .full{grid-column:1 / -1}
    .btn{display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer; font-weight:700}
    .btn.primary{background:var(--ink); color:var(--bg)}
    pre.output{
      white-space:pre-wrap; border:1px dashed var(--line); background:var(--bg); padding:12px; border-radius:12px; min-height:110px; font-family:var(--mono)
    }
    section.block{padding: clamp(28px,4vw,48px) 0; border-bottom:1px solid var(--line)}
    footer{color:var(--muted); padding:28px 0 48px}