:root {
    --bg: #f6f5f2; --surface: #ffffff; --surface-2: #faf9f6; --ink: #16161a; --muted: #6b6b75; --line: #e4e2dc;
    --accent: #ff5a36; --accent-soft: #fff0eb; --accent-ink: #ffffff; --err: #d93636;
    --radius: 16px; --shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.06);
    --checker: repeating-conic-gradient(#e9e7e1 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #111114; --surface: #1a1a1f; --surface-2: #16161a; --ink: #f2f2f4; --muted: #9a9aa6; --line: #2b2b33;
      --accent-soft: #3a1f18;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
      --checker: repeating-conic-gradient(#26262c 0% 25%, #1c1c21 0% 50%) 50% / 16px 16px;
    }
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; }
  body { background: var(--bg); color: var(--ink); font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
  button, select { font: inherit; }

  /* Nav */
  nav { display: flex; align-items: center; gap: 12px; padding: 18px 0; }
  nav .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
  nav .logo { width: 32px; height: 32px; }
  nav .links { margin-left: auto; display: flex; gap: 22px; font-size: 15px; }
  nav .links a { color: var(--muted); text-decoration: none; }
  nav .links a:hover { color: var(--ink); }

  /* Hero */
  .hero { text-align: center; padding: 36px 0 28px; }
  .hero h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 14px; }
  .hero h1 em { font-style: normal; color: var(--accent); }
  .hero p.lead { font-size: 18px; color: var(--muted); max-width: 640px; margin: 0 auto 28px; }
  #drop {
    display: grid; place-items: center; text-align: center; gap: 10px; max-width: 820px; margin: 0 auto;
    padding: 52px 20px; border: 2px dashed var(--line); border-radius: 20px; background: var(--surface);
    cursor: pointer; transition: border-color .15s, background .15s, transform .15s; box-shadow: var(--shadow);
  }
  #drop:hover, #drop.over { border-color: var(--accent); }
  #drop.over { background: var(--accent-soft); transform: scale(1.01); }
  #drop .icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
  #drop .icon svg { width: 28px; height: 28px; }
  #drop strong { font-size: 20px; }
  #drop span { color: var(--muted); font-size: 14px; }
  #drop .pick { color: var(--accent-ink); font-size: 15px; }
  .pick { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border-radius: 12px; padding: 12px 22px; font-weight: 700; margin-top: 6px; }
  .formats-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
  .chip { font-size: 13px; color: var(--muted); border: 1px solid var(--line); background: var(--surface); padding: 4px 10px; border-radius: 999px; }

  /* Status */
  #status { display: none; align-items: center; gap: 14px; padding: 16px 18px; margin: 20px auto 0; max-width: 820px; }
  #status.show { display: flex; }
  .spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; flex: 1; min-width: 80px; }
  .bar i { display: block; height: 100%; width: 40%; background: var(--accent); border-radius: 3px; animation: slide 1.2s ease-in-out infinite; }
  @keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
  #status.error { color: var(--err); }
  #status.error .spinner, #status.error .bar { display: none; }

  /* Result */
  #result { display: none; margin-top: 28px; }
  #result.show { display: block; }
  .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .lbl { font-size: 14px; color: var(--muted); }
  .toolbar label { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; cursor: pointer; }
  input[type=color] { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
  input[type=color]::-webkit-color-swatch-wrapper { padding: 3px; }
  input[type=color]::-webkit-color-swatch { border: none; border-radius: 5px; }
  select { font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
  .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .seg button { border: 0; background: transparent; color: var(--ink); padding: 7px 11px; font-size: 13px; cursor: pointer; }
  .seg button.on { background: var(--ink); color: var(--surface); }
  .spacer { flex: 1; }
  .panes { display: grid; grid-template-columns: 1fr 1fr; }
  .pane { min-width: 0; }
  .pane + .pane { border-left: 1px solid var(--line); }
  .pane h3 { margin: 0; padding: 10px 16px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--line); }
  .view { height: 520px; overflow: auto; background: var(--checker); }
  .view .inner { min-width: 100%; min-height: 100%; display: grid; place-items: center; padding: 16px; }
  .view img, .view .svgbox { display: block; max-width: none; }
  .view .svgbox svg { display: block; width: 100%; height: 100%; }
  .stats { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .stats b { color: var(--ink); font-weight: 600; }

  /* Download panel */
  .dl { padding: 22px 20px 24px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
  .dl-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
  .dl-head h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
  .dl-head .sub { color: var(--muted); font-size: 14px; }
  .dl h4 { margin: 18px 0 10px; font-size: 14px; }
  .opts { display: grid; gap: 10px; }
  .opts.fmt { grid-template-columns: repeat(5, 1fr); }
  .opts.use { grid-template-columns: repeat(3, 1fr); }
  .opt { position: relative; text-align: left; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 14px; cursor: pointer; transition: border-color .12s, background .12s; }
  .opt:hover { border-color: var(--muted); }
  .opt.on { border-color: var(--accent); background: var(--accent-soft); }
  .opt.on::after { content: ""; position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat; }
  .opts.fmt .opt { text-align: center; }
  .opt .ic { font-weight: 800; font-size: 13px; letter-spacing: .04em; display: inline-block; padding: 4px 8px; border-radius: 6px; color: #fff; margin-bottom: 8px; }
  .opt b { display: block; font-size: 16px; }
  .opt small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; line-height: 1.35; }
  .opt:disabled { opacity: .4; cursor: not-allowed; }
  .dl-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 11px 18px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
  .btn:hover { border-color: var(--ink); }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-size: 17px; padding: 14px 26px; box-shadow: 0 8px 20px rgba(255,90,54,.28); }
  .btn.primary:hover { filter: brightness(.96); }
  .btn:disabled { opacity: .6; cursor: progress; }
  #pngScaleBox { display: none; }
  #pngScaleBox.show { display: flex; }

  /* Mode picker */
  .modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 820px; margin: 0 auto 16px; }
  .modes .opt { text-align: center; padding: 12px 10px; }
  .modes .opt b { font-size: 15px; }
  .tolbox { display: none; justify-content: center; margin: -4px auto 14px; font-size: 14px; color: var(--muted); gap: 8px; align-items: center; }
  .tolbox.show { display: flex; }
  .tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 2px 6px; margin-left: 4px; vertical-align: 2px; }

  /* Background-removal result */
  #rb { display: none; margin-top: 28px; }
  #rb.show { display: block; }
  .view.bg-white { background: #ffffff; }
  .view.bg-black { background: #111111; }
  .view.bg-green { background: #2f7d4a; }
  #rbImg { display: block; max-width: none; }
  @media (max-width: 760px) { .modes { grid-template-columns: 1fr; } }

  /* Sections */
  section.info { padding: 56px 0 8px; }
  section.info h2 { text-align: center; font-size: 28px; letter-spacing: -.02em; margin: 0 0 26px; }
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .step { padding: 22px; }
  .step .n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; margin-bottom: 12px; }
  .step h3 { margin: 0 0 6px; font-size: 17px; }
  .step p { margin: 0; color: var(--muted); font-size: 14px; }
  details.faq { padding: 0; margin-bottom: 10px; }
  details.faq summary { cursor: pointer; font-weight: 600; padding: 16px 18px; list-style: none; }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq summary::after { content: "+"; float: right; color: var(--muted); font-weight: 400; }
  details.faq[open] summary::after { content: "–"; }
  details.faq p { margin: 0; padding: 0 18px 16px; color: var(--muted); font-size: 15px; }
  footer { text-align: center; color: var(--muted); font-size: 13px; padding: 40px 0 36px; }

  @media (max-width: 860px) {
    .opts.fmt { grid-template-columns: repeat(3, 1fr); }
    .opts.use, .grid3 { grid-template-columns: 1fr; }
    nav .links { display: none; }
  }
  @media (max-width: 760px) {
    .wrap { padding: 0 16px; }
    .panes { grid-template-columns: 1fr; }
    .pane + .pane { border-left: 0; border-top: 1px solid var(--line); }
    .view { height: 340px; }
    .opts.fmt { grid-template-columns: repeat(2, 1fr); }
    .btn.primary { width: 100%; }
  }

/* --- v2: language menu, tool nav, article, tool cards --- */
nav .lang { position: relative; margin-left: 8px; }
nav .lang button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 6px 10px; font-size: 14px; cursor: pointer; }
nav .lang .menu { display: none; position: absolute; right: 0; top: 110%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 20; min-width: 140px; }
nav .lang .menu.show { display: block; }
nav .lang .menu a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; }
nav .lang .menu a:hover, nav .lang .menu a.on { background: var(--accent-soft); }
@media (max-width: 860px) { nav .lang { margin-left: auto; } }
.toolnav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 4px 0 0; }
.toolnav a { font-size: 13px; color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; background: var(--surface); }
.toolnav a:hover { color: var(--ink); border-color: var(--muted); }
.toolnav a.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.tolbox label { display: inline-flex; align-items: center; gap: 6px; }
.tolbox { gap: 18px; flex-wrap: wrap; }
.prose { max-width: 780px; margin: 0 auto; }
.prose h2 { text-align: left !important; font-size: 24px !important; margin: 28px 0 10px !important; }
.prose p { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.tool { display: block; padding: 16px; text-decoration: none; color: var(--ink); }
.tool:hover { border-color: var(--accent); }
.tool b { display: block; margin-bottom: 4px; }
.tool span { color: var(--muted); font-size: 13px; }
footer .flinks { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-bottom: 10px; }
footer .flinks a { color: var(--muted); text-decoration: none; }
footer .flinks a:hover { color: var(--ink); }

/* --- v3: editing tools, slider compare, crop dialog, examples --- */
.tools2 { border-top: 0; padding-top: 10px; padding-bottom: 10px; gap: 8px; }
.tbtn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 7px 11px; font-size: 13px; cursor: pointer; }
.tbtn:hover:not(:disabled) { border-color: var(--muted); }
.tbtn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tbtn:disabled { opacity: .4; cursor: default; }
.hint { font-size: 13px; color: var(--accent); }
.sw { position: relative; display: inline-flex; }
.sw .x { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 12px; line-height: 15px; padding: 0; cursor: pointer; display: none; }
.sw:hover .x, .sw.off .x { display: block; }
.sw.off input { opacity: .25; }
.sw.sel input { outline: 2px solid var(--accent); outline-offset: 2px; }
.view.erasing .svgbox { cursor: crosshair; }
.view.erasing .svgbox path:hover { opacity: .6; }
.cmpwrap { position: relative; }
.cmpwrap .svgbox { position: relative; }
.cmpclip { display: none; position: absolute; left: 0; top: 0; bottom: 0; width: 50%; overflow: hidden; border-right: 2px solid var(--accent); }
.cmpclip img { display: block; max-width: none; }
.cmpbar { display: none; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.cmpbar input { flex: 1; accent-color: var(--accent); }
#result.slider .pa { display: none; }
#result.slider .panes { grid-template-columns: 1fr; }
#result.slider .pane + .pane { border-left: 0; }
#result.slider .cmpclip { display: block; }
#result.slider .cmpbar { display: flex; }
#sizeBox { display: none; }
#sizeBox.show { display: flex; }
#sizeBox input { width: 90px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.examples { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.examples button { padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); cursor: pointer; width: 58px; height: 58px; }
.examples button:hover { border-color: var(--accent); }
.examples img { display: block; width: 56px; height: 56px; object-fit: cover; }
.dlg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50; place-items: center; padding: 16px; }
.dlg.show { display: grid; }
.dlgbox { padding: 18px; max-width: 960px; }
.dlgbox h3 { margin: 0 0 12px; }
.dlgbox canvas { display: block; max-width: 100%; cursor: crosshair; touch-action: none; background: var(--checker); }
.dlgfoot { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.prose h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; margin: 20px 0 6px; }
.prose .upd { font-size: 13px; }
.radiusBox { display: none !important; }
.radiusBox.show { display: flex !important; }
.radiusBox input { width: 110px; accent-color: var(--accent); }
.radiusBox b { min-width: 18px; color: var(--ink); font-weight: 600; }


/* =================================================================== v5: black & white editorial */
:root {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f7f7f7; --ink: #0b0b0b; --muted: #6a6a6a; --line: #e7e7e7;
  --accent: #0b0b0b; --accent-soft: #f2f2f2; --accent-ink: #ffffff; --err: #c62828;
  --radius: 14px; --shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06);
  --checker: repeating-conic-gradient(#ededed 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;
  --line-2: #c9c9c9; --ink-2: #262626; --topbg: rgba(255,255,255,.88); --muted-inv: #bdbdbd; --ink-soft: #3c3c3c;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font: 16px/1.6 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1200px; }
a { color: inherit; }
/* header */
.top { position: sticky; top: 0; z-index: 40; background: var(--topbg); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.topin { display: flex; align-items: center; gap: 22px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand .logo { width: 28px; height: 28px; color: var(--ink); }
.mainnav { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.mainnav > a, .ddb { color: var(--muted); text-decoration: none; font: 500 15px/1 inherit; padding: 9px 12px; border-radius: 999px; background: none; border: 0; cursor: pointer; }
.mainnav > a:hover, .ddb:hover, .dd:hover .ddb { color: var(--ink); }
.mainnav > a.on { color: var(--ink); background: var(--surface-2); font-weight: 600; }
.dd { position: relative; }
.ddm { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: var(--shadow); }
.dd:hover .ddm, .dd:focus-within .ddm { display: grid; }
.ddm a { color: var(--ink); text-decoration: none; padding: 9px 12px; border-radius: 9px; font-size: 14px; }
.ddm a:hover, .ddm a.on { background: var(--surface-2); }
.top .lang { margin-left: auto; }
.lang { position: relative; }
.lang button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; }
.lang .menu { display: none; position: absolute; right: 0; top: 118%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 60; min-width: 150px; }
.lang .menu.show { display: block; }
.lang .menu a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; }
.lang .menu a:hover, .lang .menu a.on { background: var(--surface-2); }
/* hero */
.hero3 { text-align: center; padding: 72px 0 36px; max-width: 900px; margin: 0 auto; }
.eyebrow { display: inline-block; font: 600 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; margin: 0 0 26px; }
.hero3 h1 { font-size: clamp(40px, 6.6vw, 82px); line-height: 1; letter-spacing: -.045em; font-weight: 800; margin: 0 0 22px; }
.hero3 h1 em, .sechead h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.hero3 .lead { font-size: 19px; color: var(--muted); margin: 0 auto 30px; max-width: 640px; }
.modes2 { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); margin-bottom: 18px; }
.modes2.hide { display: none; }
.mchip { border: 0; background: none; color: var(--muted); font: 600 14px/1 inherit; padding: 10px 16px; border-radius: 999px; cursor: pointer; }
.mchip.on { background: var(--ink); color: var(--bg); }
#drop.dropcard { display: grid; justify-items: center; gap: 8px; text-align: center; max-width: 760px; margin: 0 auto; padding: 38px 24px 22px;
  border: 1.5px dashed var(--line-2); border-radius: 22px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; box-shadow: none; place-items: initial; }
#drop.dropcard:hover, #drop.dropcard.over { border-color: var(--ink); background: var(--surface-2); }
#drop.dropcard.over { transform: scale(1.01); }
.dicon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); margin: 0 auto 6px; }
.dicon svg { width: 24px; height: 24px; }
#drop.dropcard strong { font-size: 21px; letter-spacing: -.02em; color: var(--ink); }
#drop.dropcard .dsub { color: var(--muted); font-size: 14px; }
kbd { font: 600 12px ui-monospace, Menlo, monospace; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; color: var(--ink); background: var(--surface-2); }
#drop.dropcard .pick { display: inline-block; margin: 12px auto 4px; padding: 14px 30px; border-radius: 999px; font-size: 16px; font-weight: 700; background: var(--ink); color: var(--bg); box-shadow: none; }
#drop.dropcard:hover .pick { background: var(--ink-2); }
.dfmt { display: block; width: 100%; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; font: 12px ui-monospace, Menlo, monospace; letter-spacing: .12em; color: var(--muted); text-align: center; }
.hero3 .tolbox { justify-content: center; margin: 16px 0 0; }
.trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 0; margin: 22px 0 0; color: var(--muted); font-size: 14px; }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { width: 15px; height: 15px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hero3 #status { margin: 18px auto 0; text-align: left; }
.spinner { border-color: var(--line); border-top-color: var(--ink); }
.bar i { background: var(--ink); }
/* showcase band */
.band { margin: 56px 0 0; }
.bandhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.bandhead .eyebrow { margin-bottom: 14px; }
.bandhead h2 { margin: 0; font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -.035em; }
.sc { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.scstage { position: relative; height: 520px; overflow: hidden; background: #fff; cursor: ew-resize; touch-action: none; user-select: none; }
.scstage.checker { background: #f1efe9; }
.scstage.checker .scclip { background: repeating-conic-gradient(#ececec 0% 25%, #fff 0% 50%) 50% / 18px 18px; }
.scstage img { position: absolute; max-width: none; pointer-events: none; }
.scclip { position: absolute; inset: 0; }
.scbar { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.scbar span { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.scbar span::before { content: "◂ ▸"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--bg); font: 700 11px/1 sans-serif; letter-spacing: 3px; }
.scstage .tag { position: absolute; top: 14px; font: 600 11px ui-monospace, Menlo, monospace; letter-spacing: .2em; text-transform: uppercase; background: var(--ink); color: var(--bg); padding: 6px 10px; border-radius: 999px; pointer-events: none; }
.scstage .tag.l { left: 14px; } .scstage .tag.r { right: 62px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.sczoom { position: absolute; right: 14px; top: 14px; display: grid; gap: 6px; }
.sczoom button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 18px; cursor: pointer; box-shadow: var(--shadow); }
.schead { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); font: 13px ui-monospace, Menlo, monospace; color: var(--muted); }
.scgo { margin-left: auto; border: 0; background: var(--ink); color: var(--bg); font: 600 14px/1 inherit; padding: 11px 18px; border-radius: 999px; cursor: pointer; }
.scgo:hover { background: var(--ink-2); }
.scthumbs { display: flex; gap: 8px; overflow-x: auto; padding: 4px; }
.scthumbs button { flex: none; width: 54px; height: 54px; padding: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); cursor: pointer; filter: grayscale(1); opacity: .7; transition: filter .15s, opacity .15s; }
.scthumbs button:hover { filter: none; opacity: 1; }
.scthumbs button.on { filter: none; opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; }
.scthumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* sections */
.sec { padding: 96px 0 0; }
.sechead { max-width: 720px; margin: 0 0 34px; }
.sechead h2, .sec > h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.04em; line-height: 1.05; margin: 0 0 12px; text-align: left; }
.secsub { color: var(--muted); margin: 0; font-size: 17px; text-align: left; }
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feat { padding: 30px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.feat:hover { background: var(--surface-2); }
.fi { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink); }
.fi svg { width: 19px; height: 19px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feat h3 { margin: 18px 0 6px; font-size: 18px; letter-spacing: -.01em; }
.feat p, .stp p { margin: 0; color: var(--muted); font-size: 15px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: s; }
.stp { padding-top: 22px; border-top: 2px solid var(--ink); }
.sn { font: 500 44px/1 var(--serif); font-style: italic; color: var(--ink); }
.stp h3 { margin: 14px 0 6px; font-size: 20px; letter-spacing: -.02em; }
.uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.use { position: relative; display: block; border: 1px solid var(--line); border-radius: 16px; padding: 22px 48px 22px 22px; text-decoration: none; color: var(--ink); background: var(--surface); transition: background .15s, color .15s, border-color .15s; }
.use:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.use:hover span { color: var(--muted-inv); }
.use b { display: block; font-size: 17px; margin-bottom: 4px; letter-spacing: -.01em; }
.use span { color: var(--muted); font-size: 14px; }
.use i { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 20px; }
.sec.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 28px !important; letter-spacing: -.03em; margin: 34px 0 12px !important; text-align: left !important; }
.prose p { color: var(--ink-soft); font-size: 17px; line-height: 1.75; }
.cmpwrap2 { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp th { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); background: var(--surface-2); }
.cmp td:first-child { color: var(--muted); }
.cmp th:nth-child(2) { background: var(--ink); color: var(--bg); }
.cmp td.us { color: var(--ink); font-weight: 700; background: var(--surface-2); }
.cmp tr:last-child td { border-bottom: 0; }
.faq2 { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: start; }
.faq2 .sechead { position: sticky; top: 90px; }
details.faq { background: var(--surface); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; margin: 0; }
details.faq summary { padding: 20px 4px; font-size: 17px; }
details.faq summary::after { color: var(--ink); }
details.faq p { padding: 0 4px 20px; color: var(--muted); }
.cta { text-align: center; margin: 100px 0 0; padding: 70px 24px; border-radius: 28px; background: var(--ink); color: var(--bg); }
.cta h2 { margin: 0 0 10px; font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -.04em; }
.cta p { color: var(--muted-inv); margin: 0 0 26px; font-size: 18px; }
.cta .btn.primary { background: var(--bg); color: var(--ink); border-color: var(--bg); box-shadow: none; border-radius: 999px; }
.foot { border-top: 1px solid var(--line); margin-top: 90px; padding: 56px 0 60px; background: var(--surface); }
.fcols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px; }
.fcols h4 { margin: 0 0 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.fcols a { display: block; color: var(--ink); text-decoration: none; font-size: 14px; margin: 0 0 9px; }
.fcols a:hover { text-decoration: underline; }
.fbrand p { color: var(--muted); font-size: 14px; margin-top: 12px; max-width: 260px; }
/* tool panels in monochrome */
.card { background: var(--surface); }
#result, #rb { margin-top: 24px; box-shadow: var(--shadow); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); box-shadow: none; }
.btn.primary:hover { filter: none; background: var(--ink-2); }
.opt.on { border-color: var(--ink); background: var(--surface-2); }
.opt.on::after { background-color: var(--ink); }
.seg button.on { background: var(--ink); color: var(--bg); }
.tbtn.on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.hint { color: var(--ink); font-weight: 600; }
.sw.sel input { outline-color: var(--ink); }
.radiusBox input, .cmpbar input { accent-color: var(--ink); }
.cmpclip { border-right-color: var(--ink); }
.examples { display: none; }
@media (max-width: 980px) {
  .feats, .uses, .steps { grid-template-columns: 1fr 1fr; }
  .fcols { grid-template-columns: 1fr 1fr; }
  .faq2 { grid-template-columns: 1fr; gap: 0; }
  .faq2 .sechead { position: static; }
  .mainnav .dd { display: none; }
}
@media (max-width: 640px) {
  .hero3 { padding-top: 44px; }
  .feats, .uses, .steps { grid-template-columns: 1fr; }
  .scstage { height: 360px; }
  .mainnav > a { padding: 8px 9px; font-size: 14px; }
  .brand span { display: none; }
  .topin { gap: 8px; }
  .sec { padding-top: 70px; }
  .scstage .tag.r { right: 58px; }
}
footer.foot { text-align: left; color: var(--ink); font-size: 14px; }
.fbrand .brand { display: inline-flex; }

/* =================================================================== v6: dark mode + compact footer */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0a; --surface: #121212; --surface-2: #1b1b1b; --ink: #f2f2f2; --muted: #9b9b9b; --line: #262626; --line-2: #3d3d3d;
  --ink-2: #d6d6d6; --topbg: rgba(10,10,10,.82); --muted-inv: #5a5a5a; --ink-soft: #cfcfcf;
  --accent: #f2f2f2; --accent-soft: #1b1b1b; --accent-ink: #0a0a0a; --err: #ff6b6b;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
  --checker: repeating-conic-gradient(#262626 0% 25%, #1a1a1a 0% 50%) 50% / 16px 16px;
}
html[data-theme="dark"] .sc { background: var(--surface); }
html[data-theme="dark"] .scstage .tag.r { background: #fff; color: #0b0b0b; }
html[data-theme="dark"] .sczoom button { background: #fff; color: #0b0b0b; border-color: #e7e7e7; }
html[data-theme="dark"] .scbar span::before { color: var(--bg); }
html[data-theme="dark"] img, html[data-theme="dark"] .view { color-scheme: light; }
.topsp { margin-left: auto; }
.themebtn { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; padding: 0; }
.topsp + .themebtn { margin-left: 0; }
.themebtn:hover { border-color: var(--ink); }
.themebtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.themebtn .i-sun { display: none; }
html[data-theme="dark"] .themebtn .i-sun { display: block; }
html[data-theme="dark"] .themebtn .i-moon { display: none; }
.top .lang { margin-left: 8px; }
body, .top, .card, .feat, .foot { transition: background-color .2s, color .2s, border-color .2s; }
/* compact footer */
.foot { margin-top: 90px; padding: 44px 0 26px; background: var(--bg); border-top: 1px solid var(--line); }
.fgrid { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 36px; align-items: start; }
.fgrid h4 { margin: 4px 0 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); font-weight: 700; }
.fgrid nav { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0; }
.fgrid nav:first-of-type { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.fgrid nav h4 { grid-column: 1 / -1; }
.fgrid nav a { color: var(--ink); text-decoration: none; font-size: 14px; }
.fgrid nav a:hover { text-decoration: underline; }
.fbrand p { color: var(--muted); font-size: 14px; margin: 12px 0 0; max-width: 300px; }
.fbot { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .fgrid { grid-template-columns: 1fr 1fr; } .fbrand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .fgrid { grid-template-columns: 1fr; } }
/* =================================================================== v7: blog */
.mainnav > a[href="/blog/"] { }
.bloghero { padding-bottom: 20px; }
.blist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; }
.bcard { display: block; border: 1px solid var(--line); border-radius: 18px; padding: 26px; text-decoration: none; color: var(--ink); background: var(--surface); transition: border-color .15s, transform .15s; }
.bcard:hover { border-color: var(--ink); transform: translateY(-2px); }
.bcard time { font: 12px ui-monospace, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bcard h2 { font-size: 22px; letter-spacing: -.02em; line-height: 1.25; margin: 10px 0 8px; }
.bcard p { color: var(--muted); font-size: 15px; margin: 0 0 14px; }
.bcard span { font-weight: 600; font-size: 14px; }
.post .crumbs { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.post .crumbs a { color: var(--muted); }
.post h1 { font-size: clamp(32px, 4.6vw, 50px); line-height: 1.08; letter-spacing: -.04em; margin: 0 0 14px; }
.post .meta { font: 13px ui-monospace, Menlo, monospace; color: var(--muted); margin: 0 0 24px; }
.post .lede { font-size: 20px; line-height: 1.6; color: var(--ink); }
.post a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.post ul, .post ol { padding-left: 22px; color: var(--ink-soft); font-size: 17px; line-height: 1.7; }
.post li { margin: 0 0 8px; }
.post h2 { scroll-margin-top: 80px; }
.toc { border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin: 26px 0 10px; background: var(--surface-2); }
.toc b { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.toc ol { margin: 10px 0 0; font-size: 15px !important; }
.toc li { margin: 4px 0 !important; }
.toc a { text-decoration: none !important; }
.toc a:hover { text-decoration: underline !important; }
.tip { border-left: 3px solid var(--ink); background: var(--surface-2); padding: 14px 18px; border-radius: 0 12px 12px 0; margin: 18px 0; color: var(--ink-soft); font-size: 16px; }
.tip b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 4px; color: var(--ink); }
.postcta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 40px 0 10px; padding: 24px; border-radius: 18px; background: var(--ink); color: var(--bg); }
.postcta b { display: block; font-size: 19px; }
.postcta span { color: var(--muted-inv); font-size: 14px; }
.post .postcta a.btn.primary { background: var(--bg); color: var(--ink); border-color: var(--bg); text-decoration: none; border-radius: 999px; }
@media (max-width: 760px) { .blist { grid-template-columns: 1fr; } .mainnav a[href="/blog/"] { display: none; } }
.toc { display: block; padding: 18px 22px; }

/* showcase v2 (11 Nov 2026): single curated example, zoom badge, drag hint, file facts */
.scstage.vecmode { background: #fff; }
.sczl { display: grid; place-items: center; min-width: 34px; height: 22px; padding: 0 6px; border-radius: 999px; font: 600 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .04em; color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
.schead { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
#scName { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.2 ui-monospace, Menlo, monospace; color: var(--muted, #6b6b6b); }
#scName b { color: var(--ink); font-weight: 700; }
#scName i { font-style: normal; opacity: .55; }
.scmeta { display: flex; gap: 6px; flex-wrap: wrap; margin-right: auto; }
.scmeta span { padding: 5px 10px; border-radius: 999px; font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .03em; color: var(--ink); background: var(--accent-soft, rgba(0,0,0,.05)); border: 1px solid var(--line); }
html[data-theme="dark"] .sczl { background: #fff; color: #0b0b0b; border-color: #e7e7e7; }
@media (max-width: 640px) { .scmeta { margin-right: 0; } }
/* original vs no background: both sides framed as the same card, checkerboard only behind the cut-out */
.scstage.checker .scclip { background: none; }
.scstage.checker #scPix, .scstage.checker #scVec { border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.10); }
.scstage.checker #scVec { background: repeating-conic-gradient(#ececec 0% 25%, #ffffff 0% 50%) 50% / 18px 18px; }

/* image converter (11 Nov 2026) */
#icApp [hidden], .icpanel[hidden] { display: none !important; }
.icopts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin: 16px auto 0; max-width: 860px; }
.icopts label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--ink); }
.icopts select, .icopts input[type=number], .icopts input[type=color] { font: inherit; font-weight: 500; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; }
.icopts input[type=number] { width: 92px; }
.icopts input[type=color] { width: 40px; height: 34px; padding: 3px; }
.icopts input[type=range] { width: 120px; accent-color: var(--ink); }
.icopts .icq { font: 600 12px ui-monospace, Menlo, monospace; min-width: 42px; }
.icopts .icsizes { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.icopts .icsizes label { font-weight: 500; font-size: 12px; gap: 4px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
#icDrop.over { outline: 2px dashed var(--ink); outline-offset: 4px; }
.icpanel { margin: 26px auto 0; max-width: 980px; text-align: left; }
.icbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.icbar h2 { margin: 0; font-size: 20px; }
.icbar .btns { display: flex; gap: 8px; }
.iclist { display: grid; gap: 10px; }
.icrow { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; }
.icthumb { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; font: 700 11px ui-monospace, Menlo, monospace; color: var(--ink); background: repeating-conic-gradient(#ececec 0% 25%, #ffffff 0% 50%) 50% / 12px 12px; border: 1px solid var(--line); }
.icthumb img { width: 100%; height: 100%; object-fit: contain; }
.icmeta { min-width: 0; }
.icname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icstat { margin-top: 4px; font: 500 12.5px/1.4 ui-monospace, Menlo, monospace; color: var(--muted, #6b6b6b); }
.icstat b { color: var(--ink); }
.icstat .ok { color: #1f8a4c; font-weight: 700; }
.icstat .up { color: #b4541a; font-weight: 700; }
.icrow.err .icstat { color: #c0392b; }
.icdl { white-space: nowrap; }
.icfmts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.icfmts a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; }
.icfmts a:hover { border-color: var(--ink); }
.icfmts a i { font-style: normal; opacity: .5; }
.ictable { width: 100%; border-collapse: collapse; margin: 14px 0 6px; font-size: 15px; }
.ictable th, .ictable td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ictable th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6b6b6b); }
@media (max-width: 640px) { .icrow { grid-template-columns: 48px 1fr; } .icthumb { width: 48px; height: 48px; } .icdl { grid-column: 1 / -1; text-align: center; } .icopts { justify-content: flex-start; } }