:root{
    --bg1:#c9cecf; --bg2:#aeb4b5; --card:#ffffff; --ink:#0a0c0e; --muted:#77808a;
    --faint:#9aa2ab; --line:rgba(10,12,14,.09); --line2:rgba(10,12,14,.06);
    --g1:#4285F4; --g2:#9B72CB; --g3:#E8659A;
    --shadow:0 40px 90px -30px rgba(20,26,34,.45), 0 8px 24px -12px rgba(20,26,34,.25);
  }
  * { box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body { margin:0; color:var(--ink); line-height:1.55;
    font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    background:var(--card); -webkit-font-smoothing:antialiased; }
  .wrap { margin:0; padding:0; }
  a { color:inherit; }

  /* ---------- HERO (full-bleed) ---------- */
  .hero { position:relative; background:var(--card);
    overflow:hidden; display:flex; flex-direction:column;
    min-height:100vh; min-height:100svh; transition:outline-color .2s;
    outline:3px solid transparent; outline-offset:-3px; }
  .hero.hover { outline-color:var(--g2); }
  .hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(60% 55% at 50% 46%, rgba(155,140,230,.05), transparent 70%); }

  .nav { position:relative; z-index:3; display:flex; align-items:center;
    justify-content:space-between; gap:16px; padding:clamp(16px,2.2vw,28px) clamp(18px,4vw,64px); }
  .brand { display:flex; align-items:center; gap:9px; font-weight:800;
    letter-spacing:.01em; font-size:15px; }
  .brand .mark { font-size:18px; line-height:1; background:linear-gradient(135deg,
    var(--g1),var(--g2) 55%,var(--g3)); -webkit-background-clip:text;
    background-clip:text; color:transparent; }
  .navlinks { display:flex; gap:clamp(14px,2.4vw,30px); }
  .navlinks a { text-decoration:none; color:var(--muted); font-size:12px;
    font-weight:600; text-transform:uppercase; letter-spacing:.14em; transition:color .15s; }
  .navlinks a:hover { color:var(--ink); }
  .pill { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:#fff; padding:6px 13px; border-radius:30px;
    background:linear-gradient(90deg,var(--g1),var(--g2)); white-space:nowrap; }

  .stage { position:relative; flex:1; min-height:clamp(300px,48vh,540px); }
  #spark { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:pointer; }
  .stage-hint { position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
    font-size:12px; color:var(--faint); letter-spacing:.06em; text-align:center;
    pointer-events:none; white-space:nowrap; }
  .stage-hint b { color:var(--muted); }

  .herofoot { position:relative; z-index:3; display:grid;
    grid-template-columns:1fr auto 1fr; align-items:end; gap:20px;
    padding:clamp(16px,2.4vw,30px) clamp(18px,4vw,64px) clamp(20px,3vw,44px); }
  .num { font-size:12px; font-weight:700; color:var(--faint); letter-spacing:.2em; }
  .hf-left h1 { margin:4px 0 6px; font-weight:800; letter-spacing:-.02em;
    line-height:.98; font-size:clamp(30px,5.2vw,64px); text-transform:uppercase; }
  .hf-left h1 .dot { color:var(--g2); }
  .hf-left p { margin:0; max-width:34ch; font-size:13.5px; color:var(--muted); }
  .hf-mid { display:flex; flex-direction:column; align-items:center; gap:12px; }
  .cta { border:0; cursor:pointer; font-weight:700; font-size:14.5px; color:#fff;
    padding:14px 26px; border-radius:40px; letter-spacing:.01em;
    background:linear-gradient(90deg,var(--g1),var(--g2) 55%,var(--g3));
    box-shadow:0 14px 30px -12px rgba(120,90,200,.7); transition:transform .12s, box-shadow .2s; }
  .cta:hover { transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(120,90,200,.8); }
  .cta:active { transform:translateY(0); }
  .dots { display:flex; gap:7px; }
  .dots i { width:6px; height:6px; border-radius:50%; background:var(--line);
    display:inline-block; }
  .dots i:first-child { background:var(--g2); }
  .hf-right { justify-self:end; text-align:right; display:flex; flex-direction:column;
    gap:3px; align-items:flex-end; }
  .hf-right .tag { font-size:11px; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted); }
  .hf-right .box { margin-top:6px; font-size:11px; font-weight:800; letter-spacing:.12em;
    text-transform:uppercase; color:#fff; background:var(--ink); padding:5px 9px; border-radius:5px; }

  /* ---------- CONTENT SHEET (seamless, full-bleed) ---------- */
  .sheet { background:var(--card); border-top:1px solid var(--line2);
    padding:clamp(22px,4vw,56px) clamp(18px,4vw,64px); }
  .sheet > * { max-width:1160px; margin-inline:auto; }

  .grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .card { background:#fbfcfd; border:1px solid var(--line); border-radius:14px; padding:16px; }
  .card h3 { margin:0 0 10px; font-size:12px; color:var(--muted);
    text-transform:uppercase; letter-spacing:.08em; }
  canvas, video { max-width:100%; border-radius:10px; display:block; }
  .card canvas, .card video { width:100%; background:#f0f2f4; }
  button { background:var(--ink); color:#fff; border:0; border-radius:10px;
    padding:11px 18px; font-size:14px; cursor:pointer; font-weight:700; }
  button:disabled { background:#c4c9cd; color:#fff; cursor:default; }
  .status { font-size:13px; color:var(--muted); margin-top:12px; min-height:18px; }
  .ok { color:#1a7f37; } .warn { color:#9a6700; } .err { color:#cf222e; }
  .note { font-size:12px; color:var(--muted); margin-top:8px; }
  pre.dbg { display:none; }   /* internal log — not shown to users */
  a.dl { display:inline-block; margin-top:12px; color:var(--g1); font-weight:700;
    text-decoration:none; }
  a.dl:hover { text-decoration:underline; }
  #tool:empty { display:none; }
  #tool { scroll-margin-top:20px; }

  .limits { border-left:3px solid var(--g3); padding:12px 16px; margin-top:26px;
    background:#faf7fb; border-radius:10px; font-size:12.5px; color:var(--muted); }
  .limits b { color:var(--ink); }

  section.info { margin-top:34px; }
  section.info h2 { font-size:clamp(18px,2.4vw,24px); margin:0 0 10px; letter-spacing:-.01em; }
  section.info h3 { font-size:15px; margin:20px 0 6px; color:var(--ink); }
  section.info p, section.info li { font-size:14px; color:#4b535c; }
  section.info code { background:#f0f2f4; padding:1px 6px; border-radius:5px;
    font-size:12.5px; color:var(--ink); }
  .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:16px 0; }
  .steps div { background:#fbfcfd; border:1px solid var(--line); border-radius:14px;
    padding:16px; font-size:13.5px; color:#4b535c; }
  .steps b { color:var(--ink); display:block; margin-bottom:6px; }
  details { background:#fbfcfd; border:1px solid var(--line); border-radius:12px;
    padding:13px 16px; margin:9px 0; }
  details[open] { background:#fff; box-shadow:0 6px 20px -14px rgba(20,26,34,.4); }
  details summary { cursor:pointer; font-weight:700; font-size:14.5px; color:var(--ink); }
  details p { margin:10px 0 2px; }
  footer { margin-top:24px; padding:20px 4px 4px; border-top:1px solid var(--line);
    font-size:12px; color:var(--faint); }

  @media (max-width:820px){
    .grid,.steps { grid-template-columns:1fr; }
    .navlinks { display:none; }
    .herofoot { grid-template-columns:1fr; gap:16px; }
    .hf-mid { align-items:flex-start; }
    .hf-right { justify-self:start; text-align:left; align-items:flex-start; }
  }

  /* ---------- H1 accent (the dot is decorative: kept out of the text) ------ */
  .hf-left h1 .l1::after { content:"."; color:var(--g2); }
  .hf-left h1 .l2 { display:block; }
  .herofoot-sm { grid-template-columns:1fr auto; align-items:center; }
  .herofoot-sm h1 { font-size:clamp(26px,3.6vw,44px); text-transform:none;
    line-height:1.06; }
  .herofoot-sm .hf-left p { max-width:56ch; margin-top:8px; }
  .stage-sm { min-height:clamp(190px,26vh,300px); }
  a.cta { text-decoration:none; display:inline-block; }

  /* ---------- breadcrumbs ---------- */
  .crumbs { font-size:12px; color:var(--faint); margin-bottom:6px; }
  .crumbs a { color:var(--muted); text-decoration:none; }
  .crumbs a:hover { color:var(--ink); text-decoration:underline; }

  /* ---------- comparison table ---------- */
  .tablewrap { overflow-x:auto; margin:14px 0; }
  table { border-collapse:collapse; width:100%; min-width:620px; font-size:13.5px; }
  th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);
    vertical-align:top; }
  thead th { font-size:11.5px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--muted); border-bottom:1px solid var(--ink); }
  thead th:nth-child(2) { color:var(--g2); }
  tbody th { font-weight:600; color:var(--ink); width:22%; }
  tbody td { color:#4b535c; }
  tbody tr:nth-child(odd) { background:#fbfcfd; }

  /* ---------- before/after figures ---------- */
  .demo figure { margin:0; background:#fbfcfd; border:1px solid var(--line);
    border-radius:14px; padding:12px; }
  .demo img { width:100%; height:auto; border-radius:9px; display:block;
    background:#f0f2f4; }
  .demo figcaption { font-size:12.5px; color:var(--muted); margin-top:9px; }

  /* ---------- content lists + changelog ---------- */
  section.info ul { padding-left:20px; }
  section.info li { margin:5px 0; }
  .log h3 { font-size:14px; margin:22px 0 6px; }
  .log time { color:var(--g2); font-weight:700; }

  /* ---------- footer ---------- */
  .footcols { display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
    margin-bottom:20px; }
  .footcols h3 { font-size:11.5px; text-transform:uppercase; letter-spacing:.1em;
    color:var(--muted); margin:0 0 8px; }
  .footcols ul { list-style:none; margin:0; padding:0; }
  .footcols li { margin:5px 0; }
  .footcols a { font-size:13px; color:#4b535c; text-decoration:none; }
  .footcols a:hover { color:var(--ink); text-decoration:underline; }
  .footnote { font-size:12px; color:var(--faint); margin:8px 0 0; }
  .footnote a { color:var(--g1); }
  .brand { text-decoration:none; }
  .navlinks a[aria-current="page"] { color:var(--ink); }

  @media (max-width:820px){
    .footcols { grid-template-columns:1fr 1fr; }
    .herofoot-sm { grid-template-columns:1fr; }
  }

  /* Inner pages: the full-viewport hero belongs to the home page only, so
     content pages start reading immediately instead of a screen later. */
  .hero.compact { min-height:0; }
  .hero.compact .stage-sm { min-height:clamp(150px,20vh,240px); }
  .hero.compact .herofoot { padding-bottom:clamp(14px,2vw,26px); }

  /* ---------- learn-a-new-watermark panel ---------- */
  .learnrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    margin:14px 0 4px; }
  .learnrow .note { margin:0; }
  #learnResults:empty { display:none; }
  #learnResults { margin-top:14px; }
  #learnResults figure { margin:0; background:#fbfcfd; border:1px solid var(--line);
    border-radius:14px; padding:12px; }
  #learnResults img { width:100%; height:auto; border-radius:9px; display:block;
    background:#f0f2f4; }
  #learnResults figcaption { font-size:12px; color:var(--muted); margin-top:8px;
    display:flex; justify-content:space-between; gap:10px; align-items:center; }
  #learnResults figcaption a { color:var(--g1); font-weight:700;
    text-decoration:none; white-space:nowrap; }
  #learnResults figcaption a:hover { text-decoration:underline; }