/* Anonimo site. One stylesheet, system fonts (15 scripts), light by default, dark when the
   system is dark. The accent is the blue of the app icon; the only decoration is the
   mosaic motif that shows what the app does. */
:root {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --line: #d9dee8;
  --text: #141821;
  --muted: #5b6475;
  --accent: #1f6fd6;
  --accent-ink: #ffffff;
  --accent-soft: #e4eefb;
  --mosaic-a: #b9c3d6;
  --mosaic-b: #8f9bb3;
  --face: #e8d5c4;
  --stage: #dde5f0;
  --error: #b3261e;
  --radius: 10px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d12;
    --surface: #151922;
    --line: #2a3140;
    --text: #eef1f6;
    --muted: #a3acbe;
    --accent: #7eb8ff;
    --accent-ink: #0b0d12;
    --accent-soft: #16233a;
    --mosaic-a: #3a4356;
    --mosaic-b: #566178;
    --face: #c9a98f;
    --stage: #263042;
    --error: #ff8a80;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
/* Header, main, footer: the footer sits at the bottom of the window even on a short page. */
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; }

.wrap { max-width: 920px; margin: 0 auto; padding-inline: 16px; }
main { padding-block: 24px 56px; flex: 1 0 auto; width: 100%; }
/* One text column on every page; only the photo tool and wide tables use the full frame. */
main > :not(.scroll):not(.tool), section { max-width: 760px; }
section:has(> .scroll) { max-width: none; }

.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 16px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 6px 10px; z-index: 5; border-radius: 6px; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.2rem; color: var(--text); text-decoration: none; margin-inline-end: auto; letter-spacing: -0.01em; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-header nav a { color: var(--text); text-decoration: none; font-size: 0.95rem; padding-block: 4px; }
.site-header nav a:hover { color: var(--accent); }
.site-header nav .nav-app { color: var(--accent); font-weight: 600; }

.lang { position: relative; font-size: 0.9rem; }
.lang summary { cursor: pointer; color: var(--muted); list-style: none; padding: 4px 0; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: " \25BE"; }
.lang ul {
  position: absolute; inset-inline-end: 0; z-index: 4; margin: 6px 0 0; padding: 6px;
  list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  columns: 2; column-gap: 4px; width: max-content; max-width: calc(100vw - 32px); box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.35);
}
.lang li a { display: block; padding: 6px 10px; color: var(--text); text-decoration: none; border-radius: 6px; }
.lang li a:hover, .lang li a[aria-current] { background: var(--accent-soft); }

/* Text */
h1 { font-size: clamp(1.75rem, 4.6vw, 2.6rem); line-height: 1.15; margin: 0.3em 0 0.5em; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: 1.4rem; line-height: 1.3; margin: 2.2em 0 0.6em; letter-spacing: -0.01em; text-wrap: balance; }
h3 { font-size: 1.08rem; margin: 1.4em 0 0.3em; }
p { margin: 0 0 1em; }
.lead { font-size: 1.15rem; line-height: 1.55; }
.facts { color: var(--accent); font-weight: 600; }
.muted { color: var(--muted); font-size: 0.92rem; }
.note { background: var(--surface); border-inline-start: 3px solid var(--accent); padding: 10px 14px; border-radius: 6px; }
.crumbs { margin: 0; font-size: 0.92rem; }
.crumbs a { color: var(--muted); }
ul, ol { padding-inline-start: 1.3em; }
li { margin-block: 0.35em; }
ul.checks { list-style: none; padding: 0; }
ul.checks li { position: relative; padding-inline-start: 1.6em; }
ul.checks li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.55em; width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
ol.steps li { margin-block: 0.5em; }
time { font-variant-numeric: tabular-nums; }

/* Hero: the headline, then the strip of faces with one left visible. */
.hero { padding-top: 8px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 1.2em; }
.faces { display: block; width: 100%; max-width: 760px; height: auto; margin: 20px 0 8px; }
.cards .faces { margin: 0 0 12px; border-radius: 10px; }
.faces .keep { stroke: var(--accent); stroke-width: 5; stroke-dasharray: 10 7; fill: none; }
.faces .ground { fill: var(--stage); }
figure { margin: 0; }
.hero figcaption, .cards figcaption { color: var(--muted); font-size: 0.9rem; }

/* Buttons */
.button, button {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer; line-height: 1.3;
  padding: 11px 18px; border-radius: 8px; text-decoration: none; text-align: center;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
}
.button.secondary, button:not(.primary) { background: var(--surface); color: var(--accent); }
button:not(.primary):hover, .button.secondary:hover { background: var(--accent-soft); }
.button:hover { filter: brightness(1.07); }
button:disabled { opacity: 0.55; cursor: progress; }
.button:focus-visible, button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.link-button { background: none !important; border: 0 !important; padding: 6px 0 !important; color: var(--accent) !important; font-weight: 500 !important; text-decoration: underline; }

/* Cover style cards: three faces, one per cover. */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 6px; }
.card h3 { margin: 0.2em 0 0.3em; }
.card p { color: var(--muted); font-size: 0.95rem; }
.card svg { display: block; width: 100%; height: auto; margin-bottom: 8px; }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }

/* Tables */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: 0.5em 1em; width: min(888px, calc(100vw - 32px)); max-width: none; }
.nw { white-space: nowrap; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; font-variant-numeric: tabular-nums; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child > * { border-bottom: 0; }
thead th { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
tbody th { font-weight: 600; }
table.compare thead th:first-of-type { color: var(--accent); }
table.compare tbody td:first-of-type { background: var(--accent-soft); }
table.compare td, table.compare th { min-width: 150px; }
table.compare tr.sources td, table.compare tr.sources th { font-size: 0.85rem; color: var(--muted); }

.faq h3 { margin-top: 1.6em; }
.faq h3 + p { margin-top: 0; }

/* Guide lists */
ul.links { padding-inline-start: 1.2em; }
/* Padding, not margin: a margin is dropped at the top of the second column, so the columns would not line up. */
ul.links li { margin-block: 0; padding-block: 0.175em; break-inside: avoid; }
@media (min-width: 700px) { ul.links.cols { columns: 2; column-gap: 32px; } }
ul.guide-list { list-style: none; padding: 0; margin: 0; }
ul.guide-list li { padding-block: 12px; border-bottom: 1px solid var(--line); }
ul.guide-list li:first-child { padding-top: 0; }
ul.guide-list a { font-weight: 600; }
ul.guide-list .summary { display: block; color: var(--muted); font-size: 0.95rem; margin-top: 2px; }

.app-line { margin-block: 24px; padding: 12px 16px; border-inline-start: 3px solid var(--accent); background: var(--surface); border-radius: 6px; max-width: 760px; }
.cta-box {
  margin-top: 40px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.cta-box h2 { margin-top: 0; }
.cta-box p:last-child { margin: 0; }

/* The photo blur tool */
.tool { margin-block: 16px 8px; }
.dropzone { border: 2px dashed var(--line); border-radius: var(--radius); padding: 36px 20px; text-align: center; background: var(--surface); }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dropzone .button { margin-bottom: 10px; }
.dropzone .private { color: var(--accent); font-weight: 600; margin: 0; }
.workspace { display: grid; gap: 16px; }
.workspace > * { min-width: 0; }
.stage-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
/* --ar is the photo's width / height, set by blur.js: a tall photo is narrowed so all of it fits in 75% of the screen height. */
.stage { position: relative; line-height: 0; margin-inline: auto; max-width: min(100%, calc(var(--ar, 100) * 75vh)); touch-action: none; user-select: none; -webkit-user-select: none; }
.stage canvas { display: block; width: 100%; height: auto; border-radius: 6px; }
.covers { position: absolute; inset: 0; }
/* Covers are buttons, so they must out-rank the global button colours: the blur drawn on the canvas has to show through. */
.covers .cover, .covers .cover:hover {
  position: absolute; border: 2px solid rgba(255, 255, 255, 0.95); border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45); background: transparent; padding: 0; margin: 0; font: inherit;
  display: block; min-width: 0; line-height: 0; color: inherit;
}
.covers .cover.kept { border-color: var(--accent); border-style: dashed; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); }
.cover:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cover .handle {
  position: absolute; inset-inline-end: -8px; bottom: -8px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff; cursor: nwse-resize; touch-action: none;
}
[dir="rtl"] .cover .handle { cursor: nesw-resize; }
.cover .remove {
  position: absolute; top: -10px; inset-inline-end: -10px; width: 22px; height: 22px; border-radius: 50%; padding: 0;
  background: #fff; color: #000; border: 1px solid #0003; font-size: 14px; line-height: 20px; text-align: center; cursor: pointer;
}
.cover .remove:hover { background: #fff; }
/* Resize and delete controls appear on the cover you last touched or tabbed to, so small covers stay tappable. */
.cover .handle, .cover .remove { display: none; }
.cover:focus .handle, .cover:focus .remove { display: block; }
.stage.adding { cursor: crosshair; }
.status { margin: 10px 4px 0; font-weight: 600; min-height: 1.5em; }
#hint { margin: 4px 4px 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); align-self: start; }
.group { padding: 14px 16px; border-top: 1px solid var(--line); }
.group:first-child { border-top: 0; }
.group-label { display: block; margin: 0 0 8px; color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.actions-col { display: flex; flex-wrap: wrap; gap: 8px; }
.actions-col button { flex: 1 1 auto; }
.group .primary { width: 100%; padding-inline: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-size: 0.92rem; color: var(--muted); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.inline-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.segmented { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px; }
.segmented label { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 0.95rem; }
.segmented input { margin: 0 6px 0 0; }
@supports selector(:has(*)) {
  .segmented { position: relative; }
  .segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
  .segmented label:has(input:checked) { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
  .segmented label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
}
.emoji-row { margin-top: 12px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.emoji-grid label { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 8px; border: 1px solid transparent; font-size: 1.35rem; cursor: pointer; margin: 0; }
.emoji-grid input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.emoji-grid label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.emoji-grid label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 1px; }
.tool .error { color: var(--error); font-weight: 600; }
/* The tool stays inside the same 920px frame as every other page, so the header and footer never shift. */
@media (min-width: 860px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 304px; align-items: start; gap: 16px; }
}

/* Footer */
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; padding-block: 24px 36px; background: var(--surface); }
.site-footer a { color: var(--muted); }
.site-footer p { margin: 0 0 8px; }
.maker { display: flex; align-items: flex-start; gap: 8px; }
.maker-logo { display: inline-flex; flex: none; margin-top: 3px; }
.maker-logo img { display: block; width: 20px; height: 20px; }
@media (prefers-color-scheme: dark) { .maker-logo img { filter: invert(1); } }

@media (prefers-reduced-motion: no-preference) {
  .button, button, .lang li a { transition: background-color 0.15s, color 0.15s; }
}

/* Japanese headings break between phrases, not inside words. */
:lang(ja) h1, :lang(ja) h2 { word-break: auto-phrase; }
/* Korean wraps at spaces between words, never inside one; very long words may still break to avoid overflow. */
:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }

/* Phones: four nav links and the language menu do not fit on one line. iOS Safari shows Apple's Smart App Banner and every page has an App Store button, so the header drops its app link. */
@media (max-width: 520px) {
  .site-header nav { gap: 4px 14px; }
  .site-header nav .nav-app { display: none; }
  /* Two rows in every language: logo and language on top, the links below. */
  .site-header .lang { order: 1; }
  .site-header nav { order: 2; flex-basis: 100%; }
}