/* Illustrated tool keys ("ours"). Each key shows what the tool does before anyone reads the label:
   the still picture shows the result, hovering plays the change. Every version of every key lives here;
   the gallery at /tiles/ shows them side by side. Scoped to body[data-design="ours"] while the
   design comparison bar is in the build; the reference designs and the original look keep working beside it. */

@property --lx { syntax: "<number>"; inherits: true; initial-value: 22; }
@property --ly { syntax: "<number>"; inherits: true; initial-value: 30; }

.tile-pic { display: none; }
/* The key pictures are drawings with their own left and right (before and after, arrows, "35 × 45 mm"): they do not mirror on right to left pages. */
.tile-pic { direction: ltr; }
body[data-design="ours"] .tile-art,
body[data-design="ours"] .tile > .icon { display: none; }

body[data-design="ours"] .tile {
  padding: 8px 8px 10px; gap: 8px; align-items: stretch; justify-content: stretch;
  background: var(--c-tint); color: var(--c-ink); border-radius: 20px;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--c) 18%, transparent);
}
/* Where the face is in the portraits (percent of the square photo); people.js changes them per country. */
:root { --wf-x: 34.7%; --wf-y: 20.9%; --wf-w: 29.2%; --mf-x: 31%; --mf-y: 19.5%; --mf-w: 37.8%; }
body[data-design="ours"] .tile-pic {
  --pic-bg: color-mix(in oklch, var(--c-tint) 55%, var(--surface));
  --ease: cubic-bezier(.3, .8, .3, 1);
  display: block; position: relative; flex: 1 1 auto; min-height: 0; width: 100%;
  border-radius: 13px; overflow: hidden; isolation: isolate; container-type: size;
  background: var(--pic-bg);
}
body[data-design="ours"] .tile-label { flex: none; font-size: 14.5px; font-weight: 680; letter-spacing: -0.005em; text-align: center; color: var(--c-ink); }
body[data-design="ours"] .tile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px var(--c-glow), inset 0 0 0 1px color-mix(in oklch, var(--c) 30%, transparent); }
body[data-design="ours"] .tile[aria-current="page"] { background: var(--c-tint); color: var(--c-ink); box-shadow: 0 0 0 3px var(--c), 0 10px 26px var(--c-glow); }
body[data-design="ours"] .tile[aria-current="page"]::after { display: none; }
body[data-design="ours"] .tile[aria-current="page"] .tile-label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 7px; border-radius: 50%; background: var(--c); vertical-align: 2px; }

/* ---------- shared pieces ---------- */
.pic { position: absolute; inset: 0; display: block; }
.pic .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pic svg { max-width: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pic .pill { display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; border-radius: 999px; font: 700 clamp(9px, 5.6cqw, 12px)/1.2 var(--font); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pic .pill.dim { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--muted) 60%, transparent); }
.pic .pill.hot { background: var(--c); color: oklch(1 0 0); }
.pic .edge { position: absolute; top: 0; bottom: 0; width: 0; z-index: 3; }
.pic .edge::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: oklch(1 0 0); box-shadow: 0 0 0 1px oklch(0 0 0 / .12); }
.pic .knob { position: absolute; top: 50%; left: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 5px; border-radius: 50%; background: oklch(1 0 0); color: oklch(0.35 0.12 var(--h)); box-shadow: 0 3px 10px oklch(0 0 0 / .25); }
.pic .badge { display: inline-block; padding: 2px 5px; border-radius: 4px; color: oklch(1 0 0); font: 800 clamp(8px, 4.6cqw, 11px)/1.15 var(--font); letter-spacing: .02em; }
/* A box the shape of the photo that covers the key, like object-fit: cover, so marks can sit on the photo in its own percentages. */
.pic .cover { position: absolute; left: 50%; top: 50%; width: max(100cqw, calc(100cqh * var(--ar, 1.5))); aspect-ratio: var(--ar, 1.5); transform: translate(-50%, -50%); }
.pic .cover > .ph, .pic .cover > span > .ph { object-fit: fill; }
.checker, .pic-cut .cut, .pic-bgs {
  background-color: oklch(0.99 0 0);
  background-image: conic-gradient(oklch(0.9 0.004 265) 25%, transparent 0 50%, oklch(0.9 0.004 265) 0 75%, transparent 0);
  background-size: 14px 14px;
}
/* Corner handles of a crop frame. */
.pic .c { position: absolute; width: 13px; height: 13px; border: 0 solid oklch(1 0 0); }
.pic .c.tl { left: -3px; top: -3px; border-width: 4px 0 0 4px; } .pic .c.tr { right: -3px; top: -3px; border-width: 4px 4px 0 0; }
.pic .c.bl { left: -3px; bottom: -3px; border-width: 0 0 4px 4px; } .pic .c.br { right: -3px; bottom: -3px; border-width: 0 4px 4px 0; }
/* A label that rolls through a few values (formats, ratios). */
.pic .roll { position: absolute; display: block; height: 1.6em; overflow: hidden; padding: 0 8px; border-radius: 7px; background: var(--c); color: oklch(1 0 0); font: 800 clamp(10px, 6cqw, 14px)/1.6 var(--font); box-shadow: 0 3px 10px oklch(0 0 0 / .25); }
.pic .roll > span { display: flex; flex-direction: column; }
.pic .roll b { display: block; height: 1.6em; text-align: center; }
.tile:hover .pic .roll > span { animation: roll 3.6s var(--ease) infinite; }
@keyframes roll { 0%, 22% { transform: translateY(0); } 33%, 55% { transform: translateY(-1.6em); } 66%, 88% { transform: translateY(-3.2em); } 100% { transform: translateY(-4.8em); } }

/* File icons. */
.pic .file { stroke: none; overflow: visible; filter: drop-shadow(0 4px 8px oklch(0 0 0 / .14)); }
.file .file-body { fill: oklch(1 0 0); stroke: oklch(0.55 0.13 var(--fh)); stroke-width: 2.2; }
.file .file-fold { fill: oklch(0.88 0.06 var(--fh)); stroke: oklch(0.55 0.13 var(--fh)); stroke-width: 2.2; stroke-linejoin: round; }
.file .file-pic { fill: oklch(0.72 0.12 var(--fh)); }
.file .file-sun { fill: oklch(0.82 0.13 85); }
.file .file-band { fill: oklch(0.5 0.15 var(--fh)); }
.file text { fill: oklch(1 0 0); font: 800 8.4px/1 var(--font); letter-spacing: .02em; }

/* Before and after with a divider; hovering shows more of the result. */
.pic-split .after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); transition: clip-path .6s var(--ease); }
.pic-split .edge { left: 50%; transition: left .6s var(--ease); }
.tile:hover .pic-split .after { clip-path: inset(0 0 0 14%); }
.tile:hover .pic-split .edge { left: 14%; }
.pic-split.svg-logo, .pic-split.svg-sketch .after { background: oklch(0.995 0 0); }
.pic-split .after::after { position: absolute; right: 7px; bottom: 7px; padding: 2px 6px; border-radius: 5px; background: oklch(0.45 0.14 var(--h)); color: oklch(1 0 0); font: 800 clamp(8px, 4.8cqw, 11px)/1.2 var(--font); }
.svg-logo .after::after, .svg-parrot .after::after, .svg-sketch .after::after { content: "SVG"; }
.svg-logo .logo { position: absolute; left: 7%; top: 10%; width: 86%; height: 80%; stroke: none; }
.logo .lf { fill: oklch(0.5 0.12 155); } .logo .lb { fill: oklch(0.68 0.12 150); } .logo .ls { fill: oklch(0.84 0.15 82); } .logo .lbg { fill: oklch(0.9 0.06 215); } .logo .lg { fill: oklch(0.42 0.1 155); }
.logo.px rect { stroke: oklch(1 0 0 / .55); stroke-width: .5; }
.logo.vec .outline, .logo.vec .handle { fill: none !important; stroke: oklch(0.55 0.18 255); stroke-width: .9; }
.logo.vec .node { fill: oklch(1 0 0); stroke: oklch(0.55 0.18 255); stroke-width: .9; }
.logo.vec .tip { fill: oklch(0.55 0.18 255); }
.svg-parrot .ph { object-position: 50% 40%; }

/* ---------- Remove background ---------- */
.pic-cut .ph { object-position: 50% 26%; }
.pic-cut .cut { position: absolute; inset: 0; clip-path: inset(0 0 0 52%); transition: clip-path .6s var(--ease); }
.pic-cut .edge { left: 52%; transition: left .6s var(--ease); }
.tile:hover .pic-cut .cut { clip-path: inset(0 0 0 16%); }
.tile:hover .pic-cut .edge { left: 16%; }

.pic-bgs .ph { object-position: 50% 26%; }
.pic-bgs .tint { position: absolute; inset: 0; }
.pic-bgs .swatches { position: absolute; right: 7px; bottom: 7px; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: oklch(1 0 0 / .9); box-shadow: 0 2px 8px oklch(0 0 0 / .18); z-index: 2; }
.pic-bgs .swatches i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .16); }
.pic-bgs .swatches i:nth-child(1) { background: conic-gradient(oklch(0.86 0 0) 25%, oklch(1 0 0) 0 50%, oklch(0.86 0 0) 0 75%, oklch(1 0 0) 0) 0 0 / 6px 6px; }
.pic-bgs .swatches i:nth-child(2) { background: oklch(1 0 0); }
.pic-bgs .swatches i:nth-child(3) { background: oklch(0.8 0.09 235); }
.pic-bgs .swatches i:nth-child(4) { background: oklch(0.85 0.09 45); }
.pic-bgs .swatches::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 2px var(--c); }
.tile:hover .pic-bgs .tint { animation: bgs-tint 4.4s linear infinite; }
.tile:hover .pic-bgs .swatches::after { animation: bgs-ring 4.4s linear infinite; }
@keyframes bgs-tint { 0%, 18% { background: transparent; } 25%, 43% { background: oklch(1 0 0); } 50%, 68% { background: oklch(0.8 0.09 235); } 75%, 93% { background: oklch(0.85 0.09 45); } 100% { background: transparent; } }
@keyframes bgs-ring { 0%, 18% { transform: none; } 25%, 43% { transform: translateX(16px); } 50%, 68% { transform: translateX(32px); } 75%, 93% { transform: translateX(48px); } 100% { transform: none; } }

/* ---------- JPG ⇄ PDF ---------- */
.pic .two { color: var(--c); stroke-width: 2.4; transition: transform .6s var(--ease); }
.tile:hover .pic .two { transform: rotate(180deg); }

.pic-pdf { display: flex; align-items: center; justify-content: center; gap: 5%; }
.pic-pdf .stack { position: relative; height: min(46cqh, 26cqw); aspect-ratio: 3 / 2; margin-inline-start: 4%; }
.pic-pdf .photo { position: absolute; inset: 0; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 2px oklch(1 0 0), 0 4px 10px oklch(0 0 0 / .18); transition: transform .5s var(--ease); }
.pic-pdf .p1 { transform: rotate(-10deg) translate(-8%, 4%); }
.pic-pdf .p2 { transform: rotate(-3deg) translate(-2%, 0); }
.pic-pdf .p3 { transform: rotate(5deg) translate(5%, -3%); }
.pic-pdf .two { width: 15%; max-width: 28px; }
.pic-pdf .pdf { height: min(66cqh, 34cqw); width: auto; }
.tile:hover .pic-pdf .p1 { transform: rotate(-4deg) translate(4%, 0); }
.tile:hover .pic-pdf .p3 { transform: rotate(2deg) translate(-4%, 0); }

.pic-pdfpage { display: flex; align-items: center; justify-content: center; gap: 4%; }
.pic-pdfpage .page { position: relative; display: flex; flex-direction: column; gap: 5%; height: 84%; aspect-ratio: 210 / 297; padding: 10% 10% 0; background: oklch(1 0 0); border-radius: 4px; box-shadow: 0 6px 16px oklch(0 0 0 / .18); transition: transform .5s var(--ease); }
.pic-pdfpage .pg-photo { position: relative; display: block; flex: none; height: 26%; border-radius: 2px; overflow: hidden; }
.pic-pdfpage .ln { display: block; flex: none; height: 3.2%; border-radius: 2px; background: oklch(0.88 0.008 265); }
.pic-pdfpage .ln.s { width: 62%; }
.pic-pdfpage .page > .badge { position: absolute; left: -9%; bottom: 7%; background: oklch(0.56 0.19 27); }
.pic-pdfpage .two { width: 13%; max-width: 26px; }
.pic-pdfpage .jpgs { position: relative; height: 74%; aspect-ratio: 1; }
.pic-pdfpage .jcard { position: absolute; width: 88%; aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 2px oklch(1 0 0), 0 4px 10px oklch(0 0 0 / .2); transition: transform .5s var(--ease); }
.pic-pdfpage .jcard .badge { position: absolute; left: 4px; bottom: 4px; background: oklch(0.5 0.15 236); }
.pic-pdfpage .j1 { left: 0; top: 6%; transform: rotate(-6deg); }
.pic-pdfpage .j2 { right: 0; bottom: 6%; transform: rotate(5deg); }
.tile:hover .pic-pdfpage .page { transform: translateY(-4%); }
.tile:hover .pic-pdfpage .j1 { transform: translate(-6%, -8%) rotate(-11deg); }
.tile:hover .pic-pdfpage .j2 { transform: translate(6%, 8%) rotate(9deg); }

.pic-twofiles { display: flex; align-items: center; justify-content: center; gap: 7%; }
.pic-twofiles .file { height: min(70cqh, 36cqw); width: auto; transition: transform .6s var(--ease); }
.pic-twofiles .two { width: 16%; max-width: 30px; }
.tile:hover .pic-twofiles .f1 { transform: translateY(-6%) rotate(-5deg); }
.tile:hover .pic-twofiles .f2 { transform: translateY(6%) rotate(5deg); }

/* ---------- Passport photo ---------- */
.pic-pass .idcard { position: absolute; left: 9%; top: 8%; height: 72%; aspect-ratio: 35 / 45; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 3px oklch(1 0 0), 0 6px 16px oklch(0 0 0 / .2); }
.pic-pass .idcard .ph { object-position: 50% 30%; }
/* The card shows the middle 77.8 percent of the square photo, so face positions are mapped onto it. */
.pic-pass .oval { position: absolute; left: calc((var(--mf-x) + var(--mf-w) / 2 - 11.1%) / 0.778 - var(--mf-w) * 0.874); width: calc(var(--mf-w) * 1.748); top: calc(var(--mf-y) - 15.5%); height: calc(var(--mf-w) * 1.75); border: 1.5px dashed oklch(1 0 0 / .85); border-radius: 50%; }
.pic-pass .sheet { position: absolute; right: 7%; top: 12%; width: 44%; aspect-ratio: 3 / 2; padding: 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: oklch(1 0 0); border-radius: 4px; box-shadow: 0 6px 16px oklch(0 0 0 / .2); transform: rotate(-5deg); transition: transform .5s var(--ease); }
.pic-pass .mini { background: var(--person-m, url("/assets/art/people/us/m.webp")) 50% 28% / cover; border-radius: 1px; }
.pic-pass .pill { position: absolute; right: 9%; bottom: 7%; background: var(--c); color: oklch(1 0 0); }
.tile:hover .pic-pass .sheet { transform: rotate(0deg) translateY(-4px) scale(1.04); }

.pic-pass2 { display: flex; align-items: center; justify-content: center; gap: 7%; }
.pic-pass2 .photo { position: relative; height: 82%; aspect-ratio: 35 / 45; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 3px oklch(1 0 0), 0 6px 16px oklch(0 0 0 / .2); }
.pic-pass2 .bgc { position: absolute; inset: 0; background: oklch(0.985 0 0); }
.pic-pass2 .photo .ph { object-position: 50% 30%; }
.pic-pass2 .gl { position: absolute; left: 6%; right: 6%; height: 0; border-top: 1.5px dashed oklch(0.6 0.19 25 / .9); }
.pic-pass2 .gl.top { top: calc(var(--mf-y) - 9%); } .pic-pass2 .gl.chin { top: calc(var(--mf-y) + var(--mf-w) + 3.5%); }
.pic-pass2 .sizes { display: flex; flex-direction: column; gap: 6px; }
.pic-pass2 .sizes b { padding: 3px 8px; border-radius: 999px; background: var(--surface); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--line); font: 700 clamp(9px, 5.2cqw, 12px)/1.25 var(--font); white-space: nowrap; text-align: center; }
.pic-pass2 .sizes b:first-child { background: var(--c); color: oklch(1 0 0); box-shadow: none; }
.tile:hover .pic-pass2 .bgc { animation: pass-bg 3.6s linear infinite; }
@keyframes pass-bg { 0%, 26% { background: oklch(0.985 0 0); } 33%, 59% { background: oklch(0.86 0.06 235); } 66%, 92% { background: oklch(0.9 0.004 265); } 100% { background: oklch(0.985 0 0); } }

/* ---------- Enhance ---------- */
.pic-enh .soft { filter: blur(2.6px) saturate(.5) contrast(.88) brightness(1.05); transform: scale(1.06); }
.pic-enh .sharp { position: absolute; inset: 0; clip-path: inset(0 0 0 48%); transition: clip-path .6s var(--ease); }
.pic-enh .edge { left: 48%; transition: left .6s var(--ease); }
.pic-enh .sparkles { position: absolute; right: 7%; top: 8%; width: 32%; max-width: 54px; fill: oklch(0.98 0.06 95); stroke: none; filter: drop-shadow(0 1px 3px oklch(0 0 0 / .35)); z-index: 4; }
.tile:hover .pic-enh .sharp { clip-path: inset(0 0 0 14%); }
.tile:hover .pic-enh .edge { left: 14%; }

/* The lens shows the sharp photo at the same place as the soft one under it. Positions are percent of the photo. */
.pic-lens { --ar: 1; --ls: 34; }
.pic-lens .soft { filter: blur(3.2px) saturate(.55) contrast(.9) brightness(1.04); }
.pic-lens .lens { position: absolute; left: calc(var(--lx) * 1%); top: calc(var(--ly) * 1%); width: calc(var(--ls) * 1%); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px oklch(1 0 0), 0 6px 18px oklch(0 0 0 / .35); transition: --lx .8s var(--ease), --ly .8s var(--ease); }
.pic-lens .lens .in { position: absolute; left: calc(-100% * var(--lx) / var(--ls)); top: calc(-100% * var(--ly) / var(--ls)); width: calc(100% * 100 / var(--ls)); aspect-ratio: 1; }
.pic-lens .lens .ph { object-fit: fill; }
.pic-lens .pill { position: absolute; right: 7px; top: 7px; background: var(--c); color: oklch(1 0 0); z-index: 2; }
.tile:hover .pic-lens .lens { --lx: 46; --ly: 30; }

/* ---------- Compress ---------- */
.pic-cmp { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7%; padding: 6px; }
.pic-cmp .pills { display: flex; align-items: center; gap: 4px; color: var(--c-ink); }
.pic-cmp .mini { width: 16px; height: 16px; }
.pic-cmp .squeeze { display: flex; align-items: center; justify-content: center; gap: 4%; width: 100%; height: 56%; color: var(--c); }
.pic-cmp .push { width: 22%; max-width: 34px; height: auto; stroke-width: 2.6; }
.pic-cmp .push.r { transform: scaleX(-1); }
.pic-cmp .card { position: relative; height: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 3px oklch(1 0 0), 0 6px 16px oklch(0 0 0 / .18); transition: transform .5s var(--ease); }
.tile:hover .pic-cmp .card { transform: scale(.8); }

.pic-bar .gauge { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 9px 6px; border-radius: 10px; background: oklch(0.2 0.02 265 / .58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: oklch(1 0 0); }
.pic-bar .track { display: block; height: 7px; border-radius: 4px; background: oklch(1 0 0 / .28); overflow: hidden; }
.pic-bar .fill { display: block; width: 12%; height: 100%; border-radius: 4px; background: var(--c); }
.pic-bar .nums { display: flex; justify-content: space-between; margin-top: 4px; font: 700 clamp(9px, 5.4cqw, 12px)/1.2 var(--font); font-variant-numeric: tabular-nums; }
.pic-bar .from { opacity: .7; text-decoration: line-through; }
.tile:hover .pic-bar .fill { animation: shrink 1.3s var(--ease) both; }
@keyframes shrink { from { width: 100%; } to { width: 12%; } }

.pic-files { display: flex; align-items: center; justify-content: center; gap: 5%; color: var(--c); }
.pic-files .fbig, .pic-files .fsmall { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pic-files .big { height: min(58cqh, 32cqw); width: auto; }
.pic-files .small { height: min(30cqh, 17cqw); width: auto; transition: transform .5s var(--ease); }
.pic-files .go { width: 14%; max-width: 26px; stroke-width: 2.6; }
.tile:hover .pic-files .small { transform: translateY(-5px) scale(1.1); }

/* ---------- Resize ---------- */
.pic-rsz .big { position: absolute; left: 7%; top: 9%; width: 62%; height: 68%; border-radius: 6px; outline: 2px dashed color-mix(in oklch, var(--c) 80%, transparent); outline-offset: 3px; }
.pic-rsz .big .ph { border-radius: 6px; }
.pic-rsz .h { position: absolute; width: 8px; height: 8px; margin: -7px; background: oklch(1 0 0); border: 2px solid var(--c); border-radius: 2px; z-index: 2; }
.pic-rsz .tl { left: 0; top: 0; } .pic-rsz .tr { left: 100%; top: 0; } .pic-rsz .bl { left: 0; top: 100%; } .pic-rsz .br { left: 100%; top: 100%; }
.pic-rsz .small { position: absolute; right: 6%; bottom: 24%; width: 30%; aspect-ratio: 3 / 2; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 2px oklch(1 0 0), 0 5px 14px oklch(0 0 0 / .22); transition: transform .5s var(--ease); transform-origin: 100% 100%; }
.pic-rsz .pill { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); background: var(--c); color: oklch(1 0 0); font-size: 10.5px; }
.tile:hover .pic-rsz .small { transform: scale(1.3); }

.pic-ruler .fr { position: absolute; left: 25%; top: 25%; width: 66%; height: 64%; border-radius: 5px; box-shadow: 0 0 0 2px oklch(1 0 0), 0 6px 16px oklch(0 0 0 / .2); transition: width .7s var(--ease), height .7s var(--ease); }
.pic-ruler .fr .ph { border-radius: 5px; }
.pic-ruler .h.br { position: absolute; right: -6px; bottom: -6px; width: 11px; height: 11px; background: oklch(1 0 0); border: 2px solid var(--c); border-radius: 3px; z-index: 2; }
.pic-ruler .dim { position: absolute; display: grid; place-items: center; color: var(--c-ink); font: 750 clamp(9px, 5cqw, 12px)/1 var(--font); font-variant-numeric: tabular-nums; }
.pic-ruler .dim.w { left: 0; right: 0; bottom: calc(100% + 7px); height: 10px; border-inline: 2px solid var(--c); background: linear-gradient(var(--c), var(--c)) 50% 50% / 100% 2px no-repeat; }
.pic-ruler .dim.hgt { top: 0; bottom: 0; right: calc(100% + 7px); width: 10px; border-block: 2px solid var(--c); background: linear-gradient(90deg, var(--c), var(--c)) 50% 50% / 2px 100% no-repeat; }
.pic-ruler .dim b { grid-area: 1 / 1; padding: 1px 4px; border-radius: 4px; background: var(--pic-bg); transition: opacity .35s; }
.pic-ruler .dim .n2 { opacity: 0; }
.tile:hover .pic-ruler .fr { width: 38%; height: 37%; }
.tile:hover .pic-ruler .dim .n1 { opacity: 0; }
.tile:hover .pic-ruler .dim .n2 { opacity: 1; transition-delay: .3s; }

.pic-steps .st { position: absolute; left: 8%; bottom: 10%; aspect-ratio: 3 / 2; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 2px oklch(1 0 0), 0 5px 14px oklch(0 0 0 / .22); transition: transform .6s var(--ease); }
.pic-steps .l { width: 66%; } .pic-steps .m { width: 44%; } .pic-steps .s { width: 24%; }
.tile:hover .pic-steps .l { transform: translate(-4%, -8%); }
.tile:hover .pic-steps .m { transform: translate(44%, -4%); }
.tile:hover .pic-steps .s { transform: translate(190%, 0); }

/* ---------- Convert ---------- */
.pic-fan { display: flex; align-items: center; justify-content: center; gap: 3%; color: var(--c); }
.pic-fan .file { height: min(60cqh, 30cqw); width: auto; transition: transform .5s var(--ease); }
.pic-fan .go { width: 12%; max-width: 24px; stroke-width: 2.6; }
.pic-fan .to { display: flex; gap: 3%; }
.pic-fan .f1 { transform: rotate(-7deg) translateY(3%); }
.pic-fan .f2 { transform: rotate(7deg) translateY(3%); }
.tile:hover .pic-fan .from { transform: translateX(5%); }
.tile:hover .pic-fan .f1 { transform: rotate(-13deg) translate(-6%, -3%); }
.tile:hover .pic-fan .f2 { transform: rotate(13deg) translate(6%, -3%); }

.pic-cycle .file { position: absolute; height: min(42cqh, 25cqw); width: auto; }
.pic-cycle .c1 { left: 50%; top: 5%; transform: translateX(-50%); }
.pic-cycle .c2 { left: 16%; bottom: 5%; } .pic-cycle .c3 { right: 16%; bottom: 5%; }
.pic-cycle .ring { position: absolute; left: 50%; top: 60%; width: min(30cqh, 18cqw); transform: translate(-50%, -50%); color: var(--c); stroke-width: 2.2; transition: transform .9s var(--ease); }
.tile:hover .pic-cycle .ring { transform: translate(-50%, -50%) rotate(240deg); }

.pic-tag .fmt { left: 8px; bottom: 8px; }

/* ---------- Crop ---------- */
.pic-crop .fr { position: absolute; inset: 14% 20%; box-shadow: 0 0 0 999px oklch(0.15 0.02 265 / .5); outline: 2px solid oklch(1 0 0);
  background: linear-gradient(oklch(1 0 0 / .5), oklch(1 0 0 / .5)) 0 33.3% / 100% 1px no-repeat, linear-gradient(oklch(1 0 0 / .5), oklch(1 0 0 / .5)) 0 66.6% / 100% 1px no-repeat,
              linear-gradient(90deg, oklch(1 0 0 / .5), oklch(1 0 0 / .5)) 33.3% 0 / 1px 100% no-repeat, linear-gradient(90deg, oklch(1 0 0 / .5), oklch(1 0 0 / .5)) 66.6% 0 / 1px 100% no-repeat;
  transition: inset .6s var(--ease); }
.tile:hover .pic-crop .fr { inset: 22% 30%; }

.pic-ratio .fr { position: absolute; left: 50%; top: 52%; width: min(70cqh, 80cqw); height: min(70cqh, 80cqw); transform: translate(-50%, -50%); box-shadow: 0 0 0 999px oklch(0.15 0.02 265 / .5); outline: 2px solid oklch(1 0 0); }
.pic-ratio .rt { right: 8px; top: 8px; }
.tile:hover .pic-ratio .fr { animation: ratio 3.6s var(--ease) infinite; }
@keyframes ratio {
  0%, 22% { width: min(70cqh, 80cqw); height: min(70cqh, 80cqw); }
  33%, 55% { width: min(62cqh, 70cqw); height: min(78cqh, 87cqw); }
  66%, 88% { width: min(92cqw, 117cqh); height: min(52cqw, 66cqh); }
  100% { width: min(70cqh, 80cqw); height: min(70cqh, 80cqw); }
}

.pic-cropped { display: flex; align-items: center; justify-content: center; gap: 4%; color: var(--c); }
.pic-cropped .wide { position: relative; width: 52%; aspect-ratio: 3 / 2; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 2px oklch(1 0 0), 0 4px 12px oklch(0 0 0 / .2); }
.pic-cropped .sel { position: absolute; left: 27%; right: 27%; top: 14%; bottom: 8%; outline: 2px dashed oklch(1 0 0); box-shadow: 0 0 0 999px oklch(0.15 0.02 265 / .45); }
.pic-cropped .go { width: 12%; max-width: 24px; stroke-width: 2.6; }
.pic-cropped .res { position: relative; height: 74%; aspect-ratio: 4 / 5; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 2px oklch(1 0 0), 0 6px 14px oklch(0 0 0 / .24); transition: transform .5s var(--ease); }
.pic-cropped .res .ph { object-position: 50% 70%; }
.tile:hover .pic-cropped .res { transform: scale(1.07) rotate(2deg); }

/* ---------- Remove object ---------- */
.pic-erase .clean { position: absolute; inset: 0; opacity: 0; transition: opacity .6s .3s; }
.pic-erase .paint { position: absolute; inset: 0; background: oklch(0.64 0.2 var(--h) / .6); -webkit-mask: url("/assets/art/tools/beach-mask.webp") 0 0 / 100% 100% no-repeat; mask: url("/assets/art/tools/beach-mask.webp") 0 0 / 100% 100% no-repeat; transition: opacity .4s .25s; }
.pic-erase .eraser { position: absolute; left: 56%; top: 20%; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: oklch(1 0 0); color: oklch(0.4 0.14 var(--h)); box-shadow: 0 3px 10px oklch(0 0 0 / .28); transition: left .7s var(--ease), top .7s var(--ease); z-index: 2; }
.tile:hover .pic-erase .clean { opacity: 1; }
.tile:hover .pic-erase .paint { opacity: 0; }
.tile:hover .pic-erase .eraser { top: 78%; left: 56%; }

/* ---------- Blur ---------- */
.pic-blur .back { filter: blur(10px) saturate(.9); transform: scale(1.2); }
.pic-blur .sq { position: absolute; top: 0; bottom: 0; left: 50%; aspect-ratio: 1; transform: translateX(-50%); }
.pic-blur .mosaic { position: absolute; inset: 0; clip-path: inset(calc(var(--wf-y) - 9%) calc(100% - var(--wf-x) - var(--wf-w) - 3.6%) calc(100% - var(--wf-y) - var(--wf-w) - 6%) calc(var(--wf-x) - 3.6%) round 10px); transition: clip-path .5s var(--ease); }
.pic-blur .tiny, .pic-plate .tiny { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.tile:hover .pic-blur .mosaic { clip-path: inset(calc(var(--wf-y) - 15%) calc(100% - var(--wf-x) - var(--wf-w) - 12%) calc(100% - var(--wf-y) - var(--wf-w) - 20%) calc(var(--wf-x) - 12%) round 12px); }

.pic-plate .mosaic { position: absolute; inset: 0; clip-path: inset(43.5% 39.5% 45% 40% round 3px); transition: clip-path .5s var(--ease); }
.tile:hover .pic-plate .mosaic { clip-path: inset(40% 36% 42% 36.5% round 5px); }

.pic-bokeh .ph { object-position: 50% 26%; }
.pic-bokeh .back { filter: blur(4px) saturate(1.05); transform: scale(1.08); transition: filter .7s var(--ease); }
.tile:hover .pic-bokeh .back { filter: blur(10px) saturate(1.1); }

/* ---------- Colorize ---------- */
.pic-print { display: grid; place-items: center; }
.pic-print .print { position: relative; display: block; width: min(80cqw, 105cqh); padding: 5px 5px 15px; background: oklch(0.97 0.012 85); border-radius: 2px; box-shadow: 0 6px 16px oklch(0 0 0 / .25); transform: rotate(-4deg); transition: transform .6s var(--ease); }
.pic-print .print > .ph, .pic-print .color { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.pic-print .color { position: absolute; left: 5px; right: 5px; top: 5px; width: auto; -webkit-mask: linear-gradient(110deg, transparent 45%, #000 62%) 45% 0 / 300% 100% no-repeat; mask: linear-gradient(110deg, transparent 45%, #000 62%) 45% 0 / 300% 100% no-repeat; transition: -webkit-mask-position 1s var(--ease), mask-position 1s var(--ease); }
.pic-print .color .ph { position: absolute; inset: 0; }
.tile:hover .pic-print .print { transform: rotate(0deg) scale(1.03); }
.tile:hover .pic-print .color { -webkit-mask-position: 100% 0; mask-position: 100% 0; }

/* ---------- Cartoon ---------- */
.pic-cards .card { position: absolute; top: 50%; height: 80%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 3px oklch(1 0 0), 0 6px 16px oklch(0 0 0 / .22); transition: transform .6s var(--ease); }
.pic-cards .c1 { left: 7%; transform: translateY(-50%) rotate(-6deg); }
.pic-cards .c2 { right: 7%; transform: translateY(-50%) rotate(5deg); }
.pic-cards .sparkles { position: absolute; right: 3%; top: 3%; width: 20%; max-width: 32px; fill: oklch(0.95 0.1 95); stroke: none; filter: drop-shadow(0 1px 3px oklch(0 0 0 / .35)); }
.tile:hover .pic-cards .c1 { transform: translate(-6%, -50%) rotate(-10deg); }
.tile:hover .pic-cards .c2 { transform: translate(4%, -50%) rotate(0deg) scale(1.06); }

/* ---------- Image to text ---------- */
.file .doc-lines { fill: none; stroke: oklch(0.72 0.07 var(--fh)); stroke-width: 2.6; stroke-linecap: round; }
.pic-ocr { display: flex; align-items: center; justify-content: center; gap: 5%; color: var(--c); }
.pic-ocr .rcpt { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10%; height: 80cqh; aspect-ratio: 3 / 4; padding: 0 9%; background: oklch(0.99 0.006 90); border-radius: 3px; box-shadow: 0 6px 16px oklch(0 0 0 / .2); transform: rotate(-4deg); transition: transform .6s var(--ease); }
.pic-ocr .row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 9%; color: oklch(0.32 0.01 260); font: 700 clamp(7px, 4.2cqw, 11px)/1 var(--font); font-variant-numeric: tabular-nums; }
.pic-ocr .row i { flex: 1 1 0; height: .55em; border-radius: 2px; background: oklch(0.8 0.01 260); }
.pic-ocr .row i.s { flex: .55 1 0; }
.pic-ocr .row.tot { padding-top: 9%; box-shadow: 0 -1.5px 0 oklch(0.8 0.01 260); }
.pic-ocr .row::after { content: ""; position: absolute; inset: -32% -7%; border: 1.5px solid var(--c); border-radius: 3px; background: color-mix(in oklch, var(--c) 14%, transparent); }
.pic-ocr .row.tot::after { top: 12%; }
.pic-ocr .go { width: 12%; max-width: 24px; stroke-width: 2.6; }
.pic-ocr .out { height: min(60cqh, 30cqw); width: auto; transition: transform .5s var(--ease); }
.tile:hover .pic-ocr .rcpt { transform: rotate(0deg); }
.tile:hover .pic-ocr .out { transform: translateY(-5px) scale(1.08); }
.tile:hover .pic-ocr .row::after { animation: ocr-mark .5s var(--ease) both; }
.pic-ocr .row:nth-child(2)::after { animation-delay: .15s; }
.pic-ocr .row:nth-child(3)::after { animation-delay: .3s; }
.pic-ocr .row:nth-child(4)::after { animation-delay: .45s; }
@keyframes ocr-mark { from { opacity: 0; transform: scaleX(.2); transform-origin: 0 50%; } to { opacity: 1; transform: none; } }
/* B: a light passes down the receipt and marks each row as it goes */
.pic-ocr.scan .rcpt { height: 88cqh; overflow: hidden; }
.pic-ocr.scan .rcpt::before { content: ""; position: absolute; left: 0; right: 0; top: -20%; height: 18%; z-index: 2; background: linear-gradient(transparent, color-mix(in oklch, var(--c) 45%, transparent), transparent); opacity: 0; }
.tile:hover .pic-ocr.scan .rcpt::before { animation: ocr-scan 1.1s linear both; }
.tile:hover .pic-ocr.scan .row::after { animation-duration: .3s; }
.pic-ocr.scan .row:nth-child(1)::after { animation-delay: .2s; } .pic-ocr.scan .row:nth-child(2)::after { animation-delay: .4s; }
.pic-ocr.scan .row:nth-child(3)::after { animation-delay: .6s; } .pic-ocr.scan .row:nth-child(4)::after { animation-delay: .8s; }
@keyframes ocr-scan { 0% { top: -20%; opacity: 1; } 90% { opacity: 1; } 100% { top: 105%; opacity: 0; } }

/* ---------- narrow and tall keys ---------- */
@container (max-width: 170px) {
  .pic-rsz .pill, .pic-pass .sheet, .pic-pdf .two, .pic-pdfpage .two, .pic-files .go, .pic-cropped .go, .pic-ocr .go { display: none; }
  .pic-rsz .big { width: 70%; left: 8%; }
  .pic-pass .idcard { left: 50%; transform: translateX(-50%); height: 68%; }
  .pic-pass .pill { right: 50%; transform: translateX(50%); }
  .pic-cmp .push { width: 14%; }
  .pic-cmp .pills .dim, .pic-cmp .pills .mini { display: none; }
}
/* Taller than wide (the left keys on desktop): side by side becomes one above the other. */
@container (aspect-ratio < 0.9) {
  .pic-pdf, .pic-pdfpage, .pic-twofiles, .pic-files, .pic-cropped, .pic-pass2 { flex-direction: column; gap: 4%; }
  .pic-pdf .stack { height: auto; width: 62cqw; margin: 0; }
  .pic-pdf .pdf { height: min(38cqh, 50cqw); }
  .pic .two { transform: rotate(90deg); }
  .tile:hover .pic .two { transform: rotate(270deg); }
  .pic-pdfpage .page { height: 50%; }
  .pic-pdfpage .jpgs { height: 36%; }
  .pic-twofiles .file { height: min(38cqh, 52cqw); }
  .pic-files .big { height: min(40cqh, 46cqw); } .pic-files .small { height: min(22cqh, 26cqw); }
  .pic-files .go { transform: rotate(90deg); }
  .pic-ocr:not(.scan) { flex-direction: column; gap: 3%; }
  .pic-ocr:not(.scan) .rcpt { height: 54cqh; }
  .pic-ocr .out { height: min(28cqh, 42cqw); }
  .pic-ocr .go { transform: rotate(90deg); }
  .pic-ocr.scan .rcpt { height: auto; width: 80cqw; }
  .pic-cropped .wide { width: 84%; } .pic-cropped .res { height: 44%; } .pic-cropped .go { transform: rotate(90deg); }
  .pic-pass2 .photo { height: 58%; }
  .pic-pass2 .sizes { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px; }
  .pic-pass2 .sizes b:not(:first-child) { display: none; }
  .pic-fan { flex-direction: column; } .pic-fan .go { transform: rotate(90deg); } .pic-fan .file { height: min(30cqh, 38cqw); }
  .pic-cycle .file { height: min(28cqh, 36cqw); } .pic-cycle .c2 { left: 6%; } .pic-cycle .c3 { right: 6%; }
  .pic-cards .card { height: auto; width: 74%; top: 30%; } .pic-cards .c1 { left: 6%; } .pic-cards .c2 { top: 68%; right: 6%; }
  .pic-cmp .squeeze { height: 40%; }
  .pic-rsz .small { bottom: 30%; }
}

/* ---------- placement: seven keys across the top, seven on the left two by two (the last one wide) ---------- */
@media (min-width: 1181px) {
  body[data-design="ours"] .workspace {
    --top-h: clamp(168px, 13vw, 226px);
    max-width: 1640px;
    grid-template-columns: repeat(21, minmax(0, 1fr));
    grid-template-rows: var(--top-h) repeat(4, minmax(0, 1fr));
    height: clamp(760px, calc(100vh - 64px), 1000px);
  }
  body[data-design="ours"] .tile:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
  body[data-design="ours"] .tile:nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
  body[data-design="ours"] .tile:nth-child(3) { grid-column: 7 / 10; grid-row: 1; }
  body[data-design="ours"] .tile:nth-child(4) { grid-column: 10 / 13; grid-row: 1; }
  body[data-design="ours"] .tile:nth-child(5) { grid-column: 13 / 16; grid-row: 1; }
  body[data-design="ours"] .tile:nth-child(6) { grid-column: 16 / 19; grid-row: 1; }
  body[data-design="ours"] .tile:nth-child(7) { grid-column: 19 / 22; grid-row: 1; }
  body[data-design="ours"] .tile:nth-child(8) { grid-column: 1 / 3; grid-row: 2; }
  body[data-design="ours"] .tile:nth-child(9) { grid-column: 3 / 5; grid-row: 2; }
  body[data-design="ours"] .tile:nth-child(10) { grid-column: 1 / 3; grid-row: 3; }
  body[data-design="ours"] .tile:nth-child(11) { grid-column: 3 / 5; grid-row: 3; }
  body[data-design="ours"] .tile:nth-child(12) { grid-column: 1 / 3; grid-row: 4; }
  body[data-design="ours"] .tile:nth-child(13) { grid-column: 3 / 5; grid-row: 4; }
  body[data-design="ours"] .tile:nth-child(14) { grid-column: 1 / 5; grid-row: 5; }
  body[data-design="ours"] .stage { grid-column: 5 / 16; grid-row: 2 / 6; }
  body[data-design="ours"] .panel { grid-column: 16 / 22; grid-row: 2 / 6; }
  body[data-design="ours"] .panel-head { min-height: 0; }
  body[data-design="ours"] .topbar { max-width: 1640px; }
  body[data-design="ours"] .tile:nth-child(n+8) .tile-label { font-size: 13.5px; }
  body[data-design="ours"] .tile:nth-child(n+8) .tile-label[data-long] { font-size: 12px; letter-spacing: -0.01em; }
}

/* Tablet: two rows of pictured keys that scroll sideways above the stage. */
@media (min-width: 761px) and (max-width: 1180px) {
  body[data-design="ours"] .workspace { grid-template-rows: auto minmax(440px, 1fr); }
  body[data-design="ours"] .tools { display: grid; grid-column: 1 / 6; grid-row: 1; grid-auto-flow: column; grid-template-rows: 148px 148px; grid-auto-columns: 170px; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 3px 3px 10px; scrollbar-width: thin; }
  body[data-design="ours"] .tile { padding: 7px 7px 9px; scroll-snap-align: start; }
  body[data-design="ours"] .tile-pic { flex: 1 1 0; }
  body[data-design="ours"] .tile-label { font-size: 13px; }
  body[data-design="ours"] .stage { grid-row: 2; }
  body[data-design="ours"] .panel { grid-row: 1 / 3; }
}

/* Phone: on the start page the keys are a pictured grid; inside a tool they become the scrolling strip. */
@media (max-width: 760px) {
  body[data-design="ours"] .tile-pic { display: none; }
  body[data-design="ours"] .tile > .icon { display: block; }
  body[data-design="ours"] .tile { padding: 9px 13px 9px 10px; border-radius: 14px; flex-direction: row; align-items: center; }
  body[data-design="ours"] .tile-label { font-size: 13.5px; }
  body[data-design="ours"] .tile[aria-current="page"] .tile-label::before { display: none; }
  body[data-design="ours"] .workspace:not(.has-tool):not(.has-image) .tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; padding: 4px 16px 8px; }
  body[data-design="ours"] .workspace:not(.has-tool):not(.has-image) .tile { flex-direction: column; align-items: stretch; padding: 7px 7px 9px; border-radius: 18px; white-space: normal; }
  body[data-design="ours"] .workspace:not(.has-tool):not(.has-image) .tile-pic { display: block; flex: none; height: 104px; }
  body[data-design="ours"] .workspace:not(.has-tool):not(.has-image) .tile > .icon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pic *, .pic *::after { transition: none !important; animation: none !important; }
}