:root { --ink:#111; --muted:#5f6370; --line:#ececf1; --soft:#f6f6f9; --p1:#7b5cff; --p2:#b86bff; }
  * { box-sizing:border-box; }
  button, input { font-family:inherit; }
  body { margin:0; font-family: "Google Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; }
  a { color:inherit; }
  .wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
  nav { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  nav .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }
  .logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.1rem; text-decoration:none; }
  .logo i { width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--p1),var(--p2)); display:grid; place-items:center; color:#fff; font-style:normal; font-size:.95rem; }
  .navlinks { display:flex; gap:28px; font-size:.95rem; color:#333; }
  .navlinks a { text-decoration:none; }
  .cta { background:#111; color:#fff; border-radius:10px; padding:10px 18px; font-weight:600; font-size:.9rem; text-decoration:none; }
  .crumbs { font-size:.8rem; color:var(--muted); padding:18px 0 0; }
  .hero { text-align:center; padding:48px 0 20px; }
  .hero h1 { font-size:clamp(2rem,5vw,3.4rem); font-weight:600; letter-spacing:-.02em; margin:0; }
  .hero h1 .ic { background:linear-gradient(135deg,var(--p1),var(--p2)); -webkit-background-clip:text; color:transparent; margin-right:10px; }
  .hero p { font-size:1.15rem; color:var(--muted); max-width:560px; margin:18px auto 0; line-height:1.55; }
  .card { max-width:760px; margin:40px auto 0; background:#fff; border-radius:24px; box-shadow:0 2px 6px rgba(0,0,0,.04), 0 24px 60px rgba(40,20,90,.12); padding:18px; }
  #drop { border-radius:16px; min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; cursor:pointer; transition:.2s; background:var(--soft); }
  #drop.over { background:#efe9ff; outline:2px dashed var(--p1); }
  .upload { background:linear-gradient(90deg,var(--p1),var(--p2)); color:#fff; font-weight:600; font-size:1.05rem; border:0; border-radius:14px; padding:16px 34px; cursor:pointer; box-shadow:0 10px 24px rgba(123,92,255,.35); text-decoration:none; display:inline-block; }
  #drop small { color:var(--muted); }
  .tools { display:none; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; padding:4px 0 14px; }
  .tools button { background:var(--soft); color:var(--ink); border:1px solid var(--line); padding:9px 14px; border-radius:10px; font-size:.9rem; cursor:pointer; font-weight:500; }
  .tools button:hover { background:#eee; }
  .tools #download { background:linear-gradient(90deg,var(--p1),var(--p2)); color:#fff; border:0; }
  .tools label { color:var(--muted); font-size:.85rem; display:flex; gap:6px; align-items:center; }
  .stage { position:relative; display:none; border-radius:14px; overflow:hidden; }
  .stage canvas { display:block; width:100%; height:auto; }
  #overlay { position:absolute; inset:0; cursor:none; touch-action:none; opacity:.5; width:100%; height:100%; }
  #brushRing { position:absolute; display:none; pointer-events:none; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.5); }
  .hint { color:var(--muted); font-size:.85rem; text-align:center; margin:12px 0 2px; }
  .samples { text-align:center; margin-top:22px; font-size:.85rem; color:var(--muted); }
  .samples b { color:var(--ink); }
  .samples div { display:flex; gap:10px; justify-content:center; margin-top:10px; }
  .samples canvas { width:56px; height:56px; border-radius:10px; cursor:pointer; border:2px solid transparent; transition:.15s; }
  .samples canvas:hover { border-color:var(--p1); transform:translateY(-2px); }
  section { padding:80px 0 0; }
  h2 { font-size:clamp(1.6rem,3.4vw,2.3rem); font-weight:600; letter-spacing:-.015em; text-align:center; margin:0 0 12px; }
  .lead { text-align:center; color:var(--muted); max-width:600px; margin:0 auto 40px; font-size:1.05rem; line-height:1.55; }
  .grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
  .tile { background:var(--soft); border-radius:20px; padding:28px; }
  .tile .n { width:38px; height:38px; border-radius:12px; background:#fff; display:grid; place-items:center; font-weight:700; color:var(--p1); box-shadow:0 2px 8px rgba(0,0,0,.06); margin-bottom:16px; }
  .tile h3 { margin:0 0 8px; font-size:1.1rem; }
  .tile p { margin:0; color:var(--muted); line-height:1.55; font-size:.95rem; }
  .demo { max-width:900px; margin:0 auto; border-radius:24px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.04), 0 24px 60px rgba(40,20,90,.12); background:#000; position:relative; }
  .demo canvas { display:block; width:100%; height:auto; }
  .demo .bar { position:absolute; left:0; bottom:0; height:4px; background:linear-gradient(90deg,var(--p1),var(--p2)); width:0; }
  .demo-ctrl { display:flex; justify-content:center; gap:10px; margin-top:16px; }
  .demo-ctrl button { background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:8px 16px; cursor:pointer; font-size:.9rem; }
  .video-embed { max-width:900px; margin:24px auto 0; aspect-ratio:16/9; border-radius:20px; overflow:hidden; display:none; }
  .video-embed iframe { width:100%; height:100%; border:0; }
  #vframe { width:auto; height:auto; max-width:100%; max-height:60vh; margin:0 auto; border-radius:14px; background:#000; display:block; cursor:crosshair; touch-action:none; user-select:none; }
  #vframe.busy { cursor:progress; }
  #vpanel video { width:100%; max-height:60vh; border-radius:14px; background:#000; display:block; }
  .vprog { height:6px; background:var(--soft); border-radius:6px; margin-top:12px; overflow:hidden; }
  #vbar { height:100%; width:0; background:linear-gradient(90deg,var(--p1),var(--p2)); transition:width .2s; }
  .vrow { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
  .upload:disabled { opacity:.6; cursor:default; }
  .ghostbtn { background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:16px 24px; cursor:pointer; font-weight:500; font-size:1rem; }
  details { border-bottom:1px solid var(--line); padding:20px 4px; max-width:760px; margin:0 auto; }
  summary { font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; font-size:1.05rem; }
  summary::after { content:"+"; color:var(--muted); font-size:1.3rem; }
  details[open] summary::after { content:"–"; }
  details p { color:var(--muted); line-height:1.6; margin:12px 0 0; }
  .band { margin-top:90px; background:linear-gradient(120deg,#1a1033,#3b1f7a); color:#fff; border-radius:28px; padding:60px 24px; text-align:center; }
  .band h2 { color:#fff; }
  .band p { color:#cfc6ff; margin:0 0 26px; }
  footer { margin-top:70px; border-top:1px solid var(--line); padding:28px 0 40px; font-size:.85rem; color:var(--muted); }
  footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
  @media (max-width:700px){ .navlinks{display:none} }
  /* long-form content */
  .crumbs a { text-decoration:none; color:var(--muted); }
  .prose { max-width:760px; margin:0 auto; }
  .prose h2 { text-align:left; }
  .prose p, .prose li { color:#3b3f4a; line-height:1.7; font-size:1.02rem; }
  .prose ol { padding-left:1.3em; } .prose li { margin:8px 0; }
  .prose a { color:var(--p1); }
  table.cmp { width:100%; border-collapse:collapse; margin:20px 0; font-size:.95rem; }
  table.cmp th, table.cmp td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; }
  table.cmp td:nth-child(n+2), table.cmp th:nth-child(n+2) { text-align:center; }
  table.cmp th:nth-child(2) { color:var(--p1); }
  .flinks { display:flex; flex-wrap:wrap; gap:8px 20px; width:100%; margin-bottom:6px; }
  .flinks a { text-decoration:none; color:var(--muted); } .flinks a:hover { color:var(--ink); }
  footer .wrap { flex-direction:column; }
  .page-hero { text-align:center; padding:40px 0 10px; }
  .page-hero h1 { font-size:clamp(1.9rem,4.5vw,3rem); font-weight:600; letter-spacing:-.02em; margin:0; }
  .page-hero p { font-size:1.12rem; color:var(--muted); max-width:620px; margin:16px auto 24px; line-height:1.55; }
  nav.crumbs { position:static; background:none; backdrop-filter:none; border:0; z-index:auto; }
  @media (max-width:520px){ .cta { padding:8px 12px; font-size:.82rem; white-space:nowrap; } .logo { font-size:1rem; white-space:nowrap; } nav .wrap { gap:10px; } }
  #drop small { text-align:center; padding:0 16px; }
  /* ads: few, clearly labelled, out of the way */
  .ad-slot { max-width:760px; margin:56px auto 0; text-align:center; }
  .ad-label { display:block; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:#a0a4ae; margin-bottom:6px; }
  /* batch */
  .bhead { display:flex; justify-content:space-between; align-items:center; padding:4px 4px 14px; color:var(--muted); font-size:.92rem; }
  .bhead b { color:var(--ink); font-size:1rem; }
  .bgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; max-height:62vh; overflow:auto; padding:2px; }
  .bitem { margin:0; border-radius:14px; overflow:hidden; background:var(--soft); cursor:pointer; user-select:none; transition:transform .15s, box-shadow .15s; }
  .bitem:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(40,20,90,.12); }
  .bimg { position:relative; aspect-ratio:1; background:#eee; }
  .bimg img { width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; }
  .bspin { display:none; position:absolute; inset:0; margin:auto; width:28px; height:28px; border:3px solid #fff; border-top-color:var(--p1); border-radius:50%; animation:spin .8s linear infinite; }
  .bitem.working .bspin { display:block; } .bitem.working img { opacity:.5; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .bitem figcaption { display:flex; justify-content:space-between; gap:6px; padding:8px 10px; font-size:.78rem; }
  .bname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
  .bstate { white-space:nowrap; color:#1a8f4c; font-weight:600; }
  .bitem.check .bstate { color:#c47a00; }
  .upload:disabled, button:disabled { opacity:.55; cursor:default; }