/* ==========================================================================
   AI Image Label · EU blue and yellow.
   The colours of Europe (Reflex Blue #003399, Yellow #FFCC00). Its flag only beside links to the EU's own texts and
   sites, and as decoration (the AI Act illustration, the corner picker): never in the name, logo or branding, as the
   legal notice says. No Commission typeface. The site is independent, and says so on every page. The only EU
   artwork used as such is the Commission's own icons for labelling AI-generated content, free for anyone to use.
   Image SEO for AI's layout system (its sibling: same components, spacing and two-view tool), with its own
   label editor. Hand-written CSS: no Tailwind directives, neither its preflight nor its utilities are used.
   No text under 16px (1rem), illustrations included. One exception: the Commission's icons themselves, shown as
   the artwork people will see on images (their lettering scales with them), always with their name written beside.

   One URL, two views. #tool (the labeller controller) starts as the landing's drop panel; once images are in,
   the controller sets html[data-view=workspace] and the page becomes the workspace (.app): the landing's header,
   copy, sections and footer are hidden. See "One page, two views" at the end.

   The Content-Security-Policy forbids inline styles: everything is a class. Scripts set the previews' sizes
   and the label's position through the CSSOM.
   ========================================================================== */

/* ---------- Fonts: Image SEO for AI's self-hosted files (app/assets/fonts/ai_image_label), swapped in, not preloaded ----------
   Titles: Zalando Sans SemiExpanded (variable 200–900). Text: Funnel Sans (variable 300–800). Both cover the
   accents of French, German, Italian and Spanish (latin and latin-ext files).
   While they load, local Arial stands in, resized to the same average width and vertical metrics
   (size-adjust and overrides computed from the fonts' tables), so swapping them in moves nothing. */

@font-face{
  font-family:"Zalando Sans SemiExpanded";

  font-style:normal;

  font-weight:200 900;

  font-display:swap;

  src:url("/assets/ai_image_label/zalando-sans-semiexpanded-normal-latin-71e855f8.woff2") format("woff2");

  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face{
  font-family:"Zalando Sans SemiExpanded";

  font-style:normal;

  font-weight:200 900;

  font-display:swap;

  src:url("/assets/ai_image_label/zalando-sans-semiexpanded-normal-latin-ext-9669d5c9.woff2") format("woff2");

  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face{
  font-family:"Funnel Sans";

  font-style:normal;

  font-weight:300 800;

  font-display:swap;

  src:url("/assets/ai_image_label/funnel-sans-normal-300-800-latin-d63407db.woff2") format("woff2");

  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face{
  font-family:"Funnel Sans";

  font-style:normal;

  font-weight:300 800;

  font-display:swap;

  src:url("/assets/ai_image_label/funnel-sans-normal-300-800-latin-ext-31879f27.woff2") format("woff2");

  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF
}

/* Fallbacks: regular weights on Arial, semibold and up on Arial Bold (measured at 400 and 600). */

@font-face{
  font-family:"Zalando Fallback";

  font-weight:200 549;

  src:local("Arial"), local("ArialMT");

  size-adjust:112.88%;

  ascent-override:85.40%;

  descent-override:22.15%;

  line-gap-override:0%;

  unicode-range:U+0000-02BA, U+02BB-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C4, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD
}

@font-face{
  font-family:"Zalando Fallback";

  font-weight:550 900;

  src:local("Arial Bold"), local("Arial-BoldMT");

  size-adjust:108.22%;

  ascent-override:89.08%;

  descent-override:23.10%;

  line-gap-override:0%;

  unicode-range:U+0000-02BA, U+02BB-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C4, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD
}

@font-face{
  font-family:"Funnel Fallback";

  font-weight:300 549;

  src:local("Arial"), local("ArialMT");

  size-adjust:101.50%;

  ascent-override:98.52%;

  descent-override:24.63%;

  line-gap-override:0%;

  unicode-range:U+0000-02BA, U+02BB-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C4, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD
}

@font-face{
  font-family:"Funnel Fallback";

  font-weight:550 800;

  src:local("Arial Bold"), local("Arial-BoldMT");

  size-adjust:94.98%;

  ascent-override:105.29%;

  descent-override:26.32%;

  line-gap-override:0%;

  unicode-range:U+0000-02BA, U+02BB-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C4, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD
}

/* ---------- Theme tokens (EU blue and yellow). WCAG 2.2: every text pair >= 4.5:1, borders and focus >= 3:1 ----------
   canvas page background                     deep    deeper field (behind the drop panel, alternate sections, sidebar)
   deep-2 tracks on deep                      mist    hover on white       mat  preview mat on white cards
   line / line-2 hairlines on canvas / deep   border  input borders (4.6:1 on white)
   ink / ink-2 / muted  text                  blue    the one action colour (links, ticks, focus ring); white on it 10.9:1
   yellow highlights: on blue only as text (7.2:1), or as a fill with ink on it (13.4:1); never yellow text on white
   night  the hero and footer field, white text on it 13.9:1, yellow 9.2:1
   ok / red  statuses, readable on deep too
   Measured: ink 16.1 on canvas, 14.3 on deep; ink-2 10.6 / 9.4; muted 6.4 / 5.7 (5.0 on deep-2); blue 10.0 / 8.9 */

:root{
  --canvas:#F4F6FB;
  --deep:#E4EAF7;
  --deep-2:#D3DCF0;
  --deep-3:#B9C6E6;
  --mist:#F1F4FB;
  --mat:#EEF2FA;
  --checker:#E3E8F3;
  --line:#DCE2EF;
  --line-2:#C9D3EA;
  --border:#6B7799;
  --ink:#0B1A3D;
  --ink-2:#2E3A5C;
  --muted:#4F5B7A;
  --blue:#003399;
  --blue-2:#002577;
  --blue-soft:#E3EAFA;
  --blue-tint:rgba(0,51,153,.05);
  --yellow:#FFCC00;
  --yellow-2:#F2BD00;
  --yellow-soft:#FFF4CC;
  --night:#001A4D;
  --night-2:#0A2A6B;
  --on-night:#FFFFFF;
  --on-night-2:#D3DCF5;
  --ok:#1D6B45;
  --red:#B0341F;
  --overlay:rgba(244,246,251,.94);
  color-scheme:light;
  --white:#FFFFFF;
  --r:14px;
  /* surfaces, fields, images */
  --r-c:12px;
  /* controls: buttons, inputs, segmented tracks */
  --shadow-tool:0 1px 2px rgba(11,26,61,.06), 0 24px 60px -24px rgba(11,26,61,.34);
  --font:"Funnel Sans", "Funnel Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display:"Zalando Sans SemiExpanded", "Zalando Fallback", "Funnel Sans", "Funnel Fallback", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --gutter:20px

}

*,*::before,*::after{
  box-sizing:border-box
}

/* The hidden attribute always wins over a component's display (buttons, grids, flex rows the script hides). */

[hidden]{
  display:none !important
}

html{
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
       text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:24px
}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font:400 17px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip
}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.025em;
  text-wrap:balance;
  overflow-wrap:break-word;
  -webkit-hyphens:auto;
          hyphens:auto
}

p{
  margin:0;
  text-wrap:pretty
}

ul,ol{
  margin:0;
  padding:0;
  list-style:none
}

dl,dd{
  margin:0
}

figure{
  margin:0
}

img,svg{
  display:block;
  max-width:100%
}

a{
  color:inherit
}

button,input,textarea,select{
  font:inherit;
  color:inherit
}

button{
  cursor:pointer
}

table{
  border-collapse:collapse
}

kbd{
  display:inline-grid;
  place-items:center;
  min-width:1.7em;
  height:1.7em;
  padding:0 .4em;
  border-radius:6px;
  background:var(--deep-2);
  color:var(--ink-2);
  font:600 1em/1 var(--font);
  vertical-align:.04em
}

::-moz-selection{
  background:var(--yellow);
  color:var(--ink)
}

::selection{
  background:var(--yellow);
  color:var(--ink)
}

:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px
}

.on-night :focus-visible,.site-header :focus-visible,.hero :focus-visible,.site-footer :focus-visible,.cta :focus-visible,.takeaways :focus-visible{
  outline-color:var(--yellow)
}

.site-header .menu-panel :focus-visible,.site-header .lang-panel :focus-visible{
  outline-color:var(--blue)
}

.hero .tool :focus-visible{
  outline-color:var(--blue)
}

.accent{
  font-weight:300;
  color:var(--blue);
  letter-spacing:-.02em
}

.sr{
  position:absolute !important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0
}

.sprite{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.skip{
  position:absolute;
  left:12px;
  top:-60px;
  z-index:100;
  padding:12px 18px;
  border-radius:var(--r-c);
  background:var(--ink);
  color:#fff;
  font-weight:600;
  text-decoration:none
}

.skip:focus{
  top:12px
}

.i{
  width:20px;
  height:20px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}

.wrap{
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding-inline:var(--gutter)
}

@media (min-width:40em){
  :root{
    --gutter:32px 
  }
}

@media (min-width:64em){
  :root{
    --gutter:56px 
  }
}

@media (min-width:90em){
  :root{
    --gutter:64px 
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important
  }

  html{
    scroll-behavior:auto
  }
}

/* ---------- Logo: a picture frame, its label in the top right corner ---------- */

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  text-decoration:none;
  color:var(--ink);
  border-radius:var(--r-c)
}

.brand-name{
  font:600 18px/1 var(--display);
  letter-spacing:-.02em;
  white-space:nowrap
}

.logo{
  width:32px;
  height:32px;
  flex:none
}

.logo-frame{
  fill:var(--blue)
}

.logo-hill{
  fill:#5B7FD1
}

.logo-pill{
  fill:var(--yellow)
}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  padding:0 22px;
  border:0;
  border-radius:var(--r-c);
  font:600 16px/1.1 var(--font);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .15s, color .15s, box-shadow .15s
}

.btn .i{
  width:18px;
  height:18px;
  stroke-width:1.9
}

.btn-primary{
  background:var(--blue);
  color:#fff
}

.btn-primary:hover{
  background:var(--blue-2)
}

.btn-yellow{
  background:var(--yellow);
  color:var(--ink)
}

.btn-yellow:hover{
  background:var(--yellow-2)
}

.btn-secondary{
  background:var(--deep);
  color:var(--ink)
}

.btn-secondary:hover{
  background:var(--deep-2)
}

.btn-white{
  background:#fff;
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.btn-white:hover{
  background:var(--mist)
}

.btn-quiet{
  background:transparent;
  color:var(--ink-2);
  padding-inline:14px
}

.btn-quiet:hover{
  background:var(--deep);
  color:var(--ink)
}

.btn-icon{
  width:44px;
  min-height:44px;
  padding:0;
  background:transparent;
  color:var(--ink-2)
}

.btn-icon:hover{
  background:var(--deep);
  color:var(--ink)
}

.btn-lg{
  min-height:56px;
  padding-inline:28px;
  font-size:17px
}

.btn:disabled{
  opacity:.45;
  cursor:default
}

/* The European flag, only where it marks the EU's own texts and sites (never this site's brand). 12px from the
   link's name with the link's 6px gap. */

.flag{
  display:inline-block;
  flex:none;
  width:24px;
  height:16px;
  margin-right:6px;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.25)
}

.kicker{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--blue);
  font:650 16px/1.2 var(--font);
  letter-spacing:.04em;
  text-transform:uppercase
}

.kicker .i{
  width:18px;
  height:18px
}

.checker{
  background-color:#fff;
  background-image:repeating-conic-gradient(var(--checker) 0 25%, #fff 0 50%);
  background-size:16px 16px
}

/* ==========================================================================
   Header, hero and landing sections
   ========================================================================== */

/* The top bar: the hero's night blue, so the phone's browser bar (theme-color), the bar and the hero read as one
   block. Over a hero it is transparent, the hero's light running behind it; elsewhere (legal pages) it is solid. */

.site-header{
  position:relative;
  z-index:20;
  background:var(--night);
  color:var(--on-night)
}

html:not([data-view=workspace]) body:has(main > .hero:first-child) .site-header{
  position:absolute;
  inset:0 0 auto;
  background:transparent
}

html:not([data-view=workspace]) body:has(main > .hero:first-child) main > .hero:first-child{
  padding-top:calc(68px + clamp(28px, 4vw, 60px))
}

@media (min-width:40em){
  html:not([data-view=workspace]) body:has(main > .hero:first-child) main > .hero:first-child{
    padding-top:calc(76px + clamp(28px, 4vw, 60px))
  }
}

.site-header .brand{
  color:#fff
}

.site-header .logo-frame{
  fill:#fff
}

.site-header .logo-hill{
  fill:#8EA7E2
}

.header-in{
  display:flex;
  align-items:center;
  gap:32px;
  min-height:68px
}

@media (min-width:40em){
  .header-in{
    min-height:76px
  }
}

.nav{
  display:none
}

.nav-list{
  display:flex;
  gap:2px
}

.nav-list a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  border-radius:var(--r-c);
  color:var(--on-night-2);
  font-size:16px;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap
}

.nav-list a:hover{
  color:#fff;
  background:rgba(255,255,255,.1)
}

.nav-list a[aria-current]{
  color:#fff;
  font-weight:650;
  text-decoration:underline;
  text-decoration-color:var(--yellow);
  text-decoration-thickness:2px;
  text-underline-offset:8px
}

.header-end{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto
}

.header-cta{
  display:none;
  min-height:44px;
  padding-inline:18px
}

@media (min-width:56em){
  .header-cta{
    display:inline-flex
  }
}

/* The smallest phones (320px): the brand, the language and the menu still fit on one row */

@media (max-width:24em){
  :root{
    --gutter:16px 
  }

  .header-in{
    gap:10px
  }

  .brand-name{
    font-size:16px
  }

  .lang-button > .i:not(.lang-chevron),.lang-chevron{
    display:none
  }
}

/* Five guides with long names: the nav shows from 100em in English, whose names fit there; the other languages'
   (German and Spanish above all) keep the menu at every width */

@media (min-width:100em){
  html:lang(en) .nav{
    display:block
  }

  html:lang(en) .menu{
    display:none
  }
}

.menu,.lang{
  position:relative
}

.menu-button,.lang-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:44px;
  height:44px;
  padding:0 10px;
  border-radius:var(--r-c);
  background:var(--deep);
  color:var(--ink);
  list-style:none;
  cursor:pointer;
  font:650 16px/1 var(--font)
}

.menu-button::-webkit-details-marker,.lang-button::-webkit-details-marker{
  display:none
}

.menu-button:hover,.lang-button:hover{
  background:var(--deep-2)
}

/* On the night-blue bar: translucent, white */

.site-header .menu-button,.site-header .lang-button{
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)
}

.site-header .menu-button:hover,.site-header .lang-button:hover,.site-header details[open] > summary{
  background:rgba(255,255,255,.2)
}

.menu-button .i-shut,.menu[open] .menu-button .i-open{
  display:none
}

.menu[open] .menu-button .i-shut{
  display:block
}

.lang-button .i{
  width:18px;
  height:18px
}

.lang-chevron{
  width:16px !important;
  height:16px !important;
  transition:transform .15s
}

.lang[open] .lang-chevron{
  transform:rotate(180deg)
}

.menu-panel,.lang-panel{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:30;
  width:300px;
  padding:8px;
  background:#fff;
  color:var(--ink);
  border-radius:var(--r);
  box-shadow:var(--shadow-tool)
}

.lang-panel{
  width:220px
}

.menu-panel a,.lang-panel a{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:0 14px;
  border-radius:var(--r-c);
  text-decoration:none;
  font-weight:500
}

.menu-panel a:hover,.lang-panel a:hover{
  background:var(--mist)
}

.menu-panel a[aria-current],.lang-panel a[aria-current]{
  background:var(--deep);
  font-weight:650
}

.lang-code{
  display:inline-grid;
  place-items:center;
  min-width:34px;
  height:26px;
  border-radius:6px;
  background:var(--blue-soft);
  color:var(--blue);
  font:650 16px/1 var(--font)
}

.top-lang .lang-panel{
  right:0
}

/* ---------- Hero: the night-blue field, the white tool panel on it ---------- */

.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(28px, 4vw, 60px) 0 clamp(40px, 5vw, 72px);
  background:var(--night);
  color:var(--on-night);
  text-align:center;
  isolation:isolate
}

/* A soft light in the field, and the label motif: a frame's top right corner, very faint */

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(120% 90% at 50% 0%, #0B3A9E 0%, rgba(11,58,158,0) 60%), radial-gradient(60% 50% at 100% 0%, rgba(255,204,0,.14) 0%, rgba(255,204,0,0) 70%)
}

.hero-kicker{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px
}

.hero-kicker li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:0 14px 0 11px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  color:var(--on-night);
  font-size:16px;
  font-weight:550
}

.hero-kicker .i{
  width:17px;
  height:17px;
  color:var(--yellow);
  stroke-width:2.1
}

.hero-title{
  margin:22px auto 0;
  max-width:16em;
  font-size:clamp(34px, 1rem + 3.4vw, 68px);
  font-weight:650;
  line-height:1.03;
  letter-spacing:-.042em;
  color:#fff
}

.hero-title .hl{
  color:var(--yellow);
  font-weight:650
}

.lead{
  margin:20px auto 0;
  max-width:46em;
  color:var(--on-night-2);
  font-size:clamp(17px, 1rem + .2vw, 19px);
  line-height:1.55;
  text-wrap:balance
}

.hero-independent{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:8px;
  max-width:52em;
  margin:22px auto 0;
  color:var(--on-night-2);
  font-size:16px;
  line-height:1.45
}

.hero-independent .i{
  width:18px;
  height:18px;
  margin-top:2px;
  color:var(--yellow)
}

@media (max-width:39.99em){
  .hero{
    padding-top:20px
  }

  .hero-kicker li{
    min-height:32px;
    padding:0 12px 0 10px
  }

  .hero-title{
    margin-top:16px
  }

  .lead{
    margin-top:14px;
    font-size:17px;
    line-height:1.5
  }
}

/* Breadcrumb on guide pages */

.crumbs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 10px;
  color:var(--on-night-2);
  font-size:16px
}

.crumbs a{
  color:#fff;
  text-underline-offset:4px
}

.crumbs li + li::before{
  content:"›";
  margin-right:10px;
  color:var(--on-night-2)
}

/* ---------- The tool on the landing: one white panel, the drop zone and a live example ---------- */

.tool{
  margin-top:clamp(26px, 3vw, 40px);
  text-align:left
}

.hero .tool{
  color:var(--ink)
}

.tool-panel{
  display:grid;
  gap:16px;
  max-width:1080px;
  margin-inline:auto;
  padding:10px;
  border-radius:calc(var(--r) + 6px);
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)
}

@media (min-width:40em){
  .tool-panel{
    padding:16px
  }
}

@media (min-width:64em){
  .tool-panel{
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    align-items:stretch
  }
}

.dropzone{
  position:relative;
  isolation:isolate;
  display:grid;
  align-content:center;
  justify-items:center;
  text-align:center;
  padding:36px 26px 32px;
  background:#fff;
  border-radius:var(--r);
  box-shadow:var(--shadow-tool)
}

@media (min-width:40em){
  .dropzone{
    padding:46px 48px 40px
  }
}

.dropzone::before{
  content:"";
  position:absolute;
  inset:10px;
  z-index:-1;
  border:2px dashed var(--blue);
  border-radius:10px;
  transition:background-color .15s, border-color .15s
}

@media (min-width:40em){
  .dropzone::before{
    inset:14px
  }
}

.dropzone:has(.drop-area:hover)::before,.dropzone:has(input:focus-visible)::before{
  border-color:var(--blue-2);
  background:var(--blue-tint)
}

.tool[data-dragging=true] .dropzone::before{
  border-style:solid;
  background:var(--blue-tint)
}

.drop-area{
  display:grid;
  justify-items:center;
  gap:18px;
  cursor:pointer;
  border-radius:var(--r-c)
}

.dropzone:has(input:focus-visible) .drop-area{
  outline:2px solid var(--blue);
  outline-offset:6px
}

.drop-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border-radius:50%;
  background:var(--blue-soft);
  color:var(--blue);
  transition:background-color .15s, color .15s
}

.drop-icon .i{
  width:30px;
  height:30px;
  stroke-width:1.8
}

.drop-icon::before{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid var(--blue);
  border-radius:50%;
  opacity:0;
  animation:drop-pulse 2.8s cubic-bezier(.2,.6,.3,1) infinite
}

@keyframes drop-pulse{
  0%{
    transform:scale(1);
    opacity:.4
  }

  70%,100%{
    transform:scale(1.5);
    opacity:0
  }
}

.dropzone:has(.drop-area:hover) .drop-icon,.dropzone:has(input:focus-visible) .drop-icon,.tool[data-dragging=true] .dropzone .drop-icon{
  background:var(--blue);
  color:#fff
}

@media (prefers-reduced-motion:reduce){
  .drop-icon::before{
    animation:none !important;
    opacity:0
  }
}

.drop-title{
  max-width:16em;
  font:600 clamp(24px, 1rem + .95vw, 30px)/1.12 var(--display);
  letter-spacing:-.03em;
  color:var(--ink);
  text-wrap:balance
}

.only-coarse{
  display:none
}

@media (pointer:coarse){
  .only-fine{
    display:none
  }

  .only-coarse{
    display:inline
  }
}

.drop-button{
  margin-top:22px
}

.drop-hint{
  margin-top:14px;
  color:var(--muted);
  font-size:16px;
  line-height:1.8
}

@media (max-width:39.99em){
  .dropzone{
    padding:24px 18px
  }

  .drop-area{
    gap:12px
  }

  .drop-icon{
    width:56px;
    height:56px
  }

  .drop-icon .i{
    width:24px;
    height:24px
  }

  .drop-title{
    font-size:24px
  }

  .drop-button{
    margin-top:16px;
    min-height:52px
  }

  .drop-hint{
    margin-top:10px;
    line-height:1.7
  }
}

/* The example beside the drop zone: one portrait before and after, then the After's top right corner up close,
   measured. One size from 64em up (364px wide: all the room it has at 1024px), about as tall as the drop zone beside
   it: in English and Italian, from about 1200px, where the drop hint fits on fewer lines, it is the taller of the two
   (by some 24px) and the drop zone stretches to match. */

.demo{
  display:none
}

@media (min-width:64em){
  .demo{
    display:grid;
    grid-template-columns:minmax(0,364px);
    justify-content:center;
    align-content:center;
    gap:8px;
    padding:10px;
    border-radius:var(--r);
    background:#fff;
    box-shadow:var(--shadow-tool)
  }
}

/* ar-w / ar-h: the portrait's proportions (its width and height in shared/_tool). zoom: how much larger the close-up
   is than the After. gap: between the two pictures; band-side, band-top: the band round the close-up's picture,
   outside it (all three fractions of the example's width). strip: the close-up's width / height. margin, size, pill:
   the label's visible shape by default (labelRect), in % of the picture's shorter side, here its width: 3% from the
   edges, 5% tall, 25.9795% wide (5 × the pill's proportions). The frame on the After, the close-up and the
   measurements all follow from these. */

.demo{
  --ar-w:4;
  --ar-h:5;
  --zoom:4;
  --gap:.0275;
  --band-side:.14;
  --band-top:.0275;
  --strip:4.4;
  --margin:3;
  --size:5;
  --pill:25.9795;
  --frame-r:10px 
}

.demo-pair{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  -moz-column-gap:calc(var(--gap) * 100%);
       column-gap:calc(var(--gap) * 100%)
}

.demo-shot{
  position:relative;
  aspect-ratio:var(--ar-w) / var(--ar-h);
  border-radius:10px;
  background:var(--deep)
}

.demo-picture{
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover
}

.demo-pair .demo-picture{
  border-radius:10px
}

/* The label as the tool places it on a 4:5 picture: overlayBox(labelRect(1080×1350, defaults)) for AI GENERATED */

.demo-label{
  position:absolute;
  left:67.12988%;
  top:0.23251%;
  width:33.59183%;
  height:8.51214%;
  max-width:none
}

.demo-tag{
  position:absolute;
  left:8px;
  bottom:8px;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:var(--ink);
  font:600 16px/1.2 var(--font)
}

.demo-after .demo-tag{
  background:var(--yellow)
}

.demo-arrow{
  position:absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fff;
  color:var(--blue);
  box-shadow:0 0 0 4px rgba(255,255,255,.35), 0 4px 12px rgba(11,26,61,.28)
}

.demo-arrow .i{
  width:20px;
  height:20px;
  stroke-width:2.2
}

/* The part of the After that the close-up shows: inside the frame's border, from the picture's top and right edges.
   The same radius and colours as the close-up's frame; the magnifier under it. */

.demo-focus{
  position:absolute;
  top:-2px;
  right:-2px;
  left:calc((1 - 2 * (1 - var(--band-side)) / (var(--zoom) * (1 - var(--gap)))) * 100% - 2px);
  height:calc(2 * (1 / var(--strip) - var(--band-top)) * var(--ar-w) / (var(--ar-h) * var(--zoom) * (1 - var(--gap))) * 100% + 4px);
  border:2px solid var(--blue);
  border-radius:var(--frame-r);
  box-shadow:inset 0 0 0 1.5px #fff
}

.demo-zoom-mark{
  position:absolute;
  left:50%;
  top:calc(100% + 3px);
  translate:-50% 0;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  box-shadow:0 0 0 2px #fff
}

.demo-zoom-mark .i{
  width:16px;
  height:16px;
  stroke-width:2.4
}

/* The close-up: the same After, var(--zoom) times larger, its top right corner in view. The band round it, outside
   the picture, shows where the picture ends. */

.demo-zoom{
  position:relative;
  aspect-ratio:var(--strip);
  border-radius:var(--frame-r);
  overflow:hidden;
  background:var(--deep)
}

.demo-zoom::after{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid var(--blue);
  border-radius:inherit;
  box-shadow:inset 0 0 0 1.5px #fff
}

.demo-zoom-shot{
  position:absolute;
  right:calc(var(--band-side) * 100%);
  top:calc(var(--band-top) * var(--strip) * 100%);
  width:calc(var(--zoom) * (1 - var(--gap)) * 50%);
  aspect-ratio:var(--ar-w) / var(--ar-h);
  border-radius:16px;
  box-shadow:0 0 0 1px var(--ink)
}

.demo-zoom .demo-picture{
  border-radius:inherit
}

/* Measurements of the label's visible shape (labelRect): x from 100 - margin - pill to 100 - margin % of the width,
   y from margin to margin + size % of the width, turned into % of the height. Yellow: clear on the brown curtain. */

.demo-dim{
  position:absolute;
  color:var(--yellow);
  background:currentColor
}

.demo-dim::before,.demo-dim::after{
  content:"";
  position:absolute;
  background:currentColor
}

.demo-dim-y{
  width:2px;
  translate:-1px 0
}

.demo-dim-y::before,.demo-dim-y::after{
  left:-4px;
  width:10px;
  height:2px
}

.demo-dim-y::before{
  top:0
}

.demo-dim-y::after{
  bottom:0
}

.demo-dim-x{
  height:2px;
  translate:0 -1px
}

.demo-dim-x::before,.demo-dim-x::after{
  top:-4px;
  width:2px;
  height:10px
}

.demo-dim-x::before{
  left:0
}

.demo-dim-x::after{
  right:0
}

.demo-dim b{
  position:absolute;
  top:50%;
  translate:0 -50%;
  padding:2px 5px;
  border-radius:5px;
  background:var(--yellow);
  color:var(--ink);
  font:700 16px/1 var(--font);
  white-space:nowrap
}

.demo-dim-top{
  left:calc((100 - var(--margin) - var(--pill) / 5) * 1%);
  top:0;
  height:calc(var(--margin) * var(--ar-w) / var(--ar-h) * 1%)
}

.demo-dim-top b{
  right:10px
}

.demo-dim-side{
  left:calc((100 - var(--margin)) * 1%);
  width:calc(var(--margin) * 1%);
  top:calc((var(--margin) + var(--size) / 2) * var(--ar-w) / var(--ar-h) * 1%)
}

.demo-dim-side b{
  left:calc(100% + 6px)
}

.demo-dim-size{
  left:calc((100 - var(--margin) - var(--pill)) * 1% - 12px);
  top:calc(var(--margin) * var(--ar-w) / var(--ar-h) * 1%);
  height:calc(var(--size) * var(--ar-w) / var(--ar-h) * 1%)
}

.demo-dim-size b{
  right:10px
}

.demo-caption{
  color:var(--ink-2);
  font:600 16px/1.3 var(--font);
  text-align:center;
  text-wrap:balance
}

.demo-caption b{
  color:var(--blue);
  font-weight:750
}

.trust{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 32px;
  margin-top:26px;
  color:var(--on-night-2);
  font-size:16px
}

.trust li{
  display:flex;
  align-items:center;
  gap:10px
}

.trust .i{
  width:18px;
  height:18px;
  color:var(--yellow)
}

.notice{
  margin:0 0 16px;
  padding:14px 18px;
  border-radius:var(--r-c);
  background:var(--yellow-soft);
  color:var(--ink)
}

.tool > .notice{
  max-width:640px;
  margin:16px auto 0;
  text-align:left
}

.drop-overlay{
  display:none
}

.tool[data-dragging=true] .drop-overlay{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  padding:16px;
  background:var(--overlay);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px)
}

@media (min-width:40em){
  .tool[data-dragging=true] .drop-overlay{
    padding:24px
  }
}

.drop-overlay-in{
  display:grid;
  place-content:center;
  justify-items:center;
  gap:12px;
  padding:24px;
  text-align:center;
  border:2px dashed var(--blue);
  border-radius:var(--r);
  background:var(--blue-tint);
  color:var(--ink-2);
  font-size:17px
}

.drop-overlay-in .drop-icon{
  width:92px;
  height:92px;
  margin-bottom:10px;
  background:var(--blue);
  color:#fff
}

.drop-overlay-in .drop-icon .i{
  width:36px;
  height:36px
}

.drop-overlay-in strong{
  font:600 clamp(26px, 1rem + 1.4vw, 36px)/1.15 var(--display);
  letter-spacing:-.03em;
  color:var(--ink)
}

/* ---------- Sections ---------- */

.section{
  padding-top:clamp(88px, 10vw, 160px)
}

.section.alt{
  margin-top:clamp(88px, 10vw, 160px);
  padding:clamp(64px, 8vw, 120px) 0;
  background:var(--deep)
}

.section.alt + .section.alt{
  margin-top:0;
  padding-top:0
}

.sec-head{
  display:grid;
  gap:20px;
  margin-bottom:clamp(40px, 5vw, 72px)
}

.sec-head h2,.faq-head h2,.cta h2,.split-head h2{
  font-size:clamp(32px, 1.1rem + 2.6vw, 56px);
  line-height:1.04;
  letter-spacing:-.04em
}

.sec-head .kicker{
  margin-bottom:20px
}

.sec-lead{
  max-width:34em;
  color:var(--ink-2);
  font-size:18px;
  line-height:1.6
}

@media (min-width:64em){
  .sec-head{
    grid-template-columns:repeat(12,minmax(0,1fr));
    -moz-column-gap:32px;
         column-gap:32px;
    align-items:end
  }

  .sec-head > :first-child{
    grid-column:1 / span 7
  }

  .sec-head > :last-child:not(:first-child){
    grid-column:9 / -1
  }

  .sec-head > :only-child{
    grid-column:1 / span 9
  }
}

/* The three icons: one white card each, the official artwork on a mat, when to use it, an example */

.icons{
  display:grid;
  gap:16px
}

@media (min-width:56em){
  .icons{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
  }
}

.icon-card{
  display:flex;
  flex-direction:column;
  padding:22px;
  border-radius:var(--r);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.icon-mat{
  display:grid;
  place-items:center;
  height:150px;
  border-radius:10px;
  background:var(--mat)
}

.icon-mat img{
  height:64px;
  width:auto
}

.icon-mat-dark{
  background:var(--night)
}

.icon-card h3{
  margin-top:20px;
  font-size:clamp(21px, 1rem + .4vw, 24px);
  letter-spacing:-.025em
}

.icon-card h3 small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font:500 16px/1.3 var(--font);
  letter-spacing:0
}

.icon-card p{
  margin-top:12px;
  color:var(--ink-2);
  font-size:17px
}

.icon-card .icon-example{
  margin-top:auto;
  padding-top:16px;
  color:var(--muted);
  font-size:16px
}

.icon-card .icon-example strong{
  color:var(--ink-2)
}

.variants{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:16px
}

.variant{
  display:grid;
  place-items:center;
  gap:6px;
  padding:12px 8px;
  border-radius:10px;
  background:var(--mat);
  text-align:center;
  color:var(--ink-2);
  font-size:16px
}

.variant img{
  height:36px;
  width:auto
}

.variant-dark{
  background:var(--night);
  color:var(--on-night)
}

.variant-photo{
  background:linear-gradient(135deg, #8F5A86, #3F3A7A);
  color:#fff
}

.variant-photo-dark{
  background:linear-gradient(135deg, #2B3A78, #0D1739);
  color:#fff
}

/* How it works: three numbered steps on a hairline grid */

.steps{
  display:grid;
  gap:1px;
  background:var(--line-2);
  border-block:1px solid var(--line-2)
}

.steps > li{
  display:flex;
  flex-direction:column;
  padding:30px 0 34px;
  background:var(--canvas)
}

.section.alt .steps > li{
  background:var(--deep)
}

/* Side by side, the same width for each step (so their pictures line up), a hairline halfway between them */

@media (min-width:56em){
  .steps{
    grid-template-columns:repeat(3,minmax(0,1fr));
    -moz-column-gap:56px;
         column-gap:56px;
    background:none
  }

  .steps > li{
    position:relative;
    padding:36px 0 40px
  }

  .steps > li + li::before{
    content:"";
    position:absolute;
    inset-block:0;
    left:-28px;
    width:1px;
    background:var(--line-2)
  }
}

/* The backdrop step-add and step-choose draw, for step-download which has none */

.step-art{
  width:100%;
  height:auto;
  aspect-ratio:600 / 380;
  margin-bottom:22px;
  border-radius:var(--r);
  background:linear-gradient(135deg, #F4F6FB, #E9EEF9)
}

.law-grid{
  display:grid;
  gap:40px;
  align-items:center
}

@media (min-width:64em){
  .law-grid{
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    -moz-column-gap:56px;
         column-gap:56px
  }
}

.law-art{
  width:100%;
  height:auto;
  aspect-ratio:600 / 380;
  border-radius:var(--r);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.step-num{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  font:650 18px/1 var(--display)
}

.steps h3,.point h3{
  margin-top:18px;
  font-size:clamp(20px, 1rem + .4vw, 23px);
  line-height:1.15;
  letter-spacing:-.025em
}

.steps p,.point p{
  margin-top:10px;
  max-width:30em;
  color:var(--ink-2);
  font-size:17px
}

/* Points: icon, title, text on the same hairline grid (2 columns from 44em, 3 from 72em) */

.points{
  display:grid;
  gap:1px;
  background:var(--line-2);
  border-block:1px solid var(--line-2)
}

.point{
  padding:30px 0 34px;
  background:var(--canvas)
}

.section.alt .point{
  background:var(--deep)
}

.point .i{
  width:28px;
  height:28px;
  color:var(--blue);
  stroke-width:1.5
}

@media (min-width:44em){
  .points{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .point{
    padding:32px 28px 36px
  }

  .point:nth-child(2n+1){
    padding-left:0
  }

  .point:nth-child(2n){
    padding-right:0
  }
}

@media (min-width:72em){
  .points-3{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .points-3 .point:nth-child(n){
    padding-left:32px;
    padding-right:32px
  }

  .points-3 .point:nth-child(3n+1){
    padding-left:0
  }

  .points-3 .point:nth-child(3n){
    padding-right:0
  }
}

/* Plain facts: oversized figures */

.facts{
  display:grid;
  gap:1px;
  background:var(--line-2);
  border-block:1px solid var(--line-2)
}

.fact{
  padding:28px 0 30px;
  background:var(--canvas)
}

.section.alt .fact{
  background:var(--deep)
}

@media (min-width:44em){
  .facts{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .fact{
    padding:32px 28px
  }

  .fact:nth-child(2n+1){
    padding-left:0
  }
}

@media (min-width:72em){
  .facts{
    grid-template-columns:repeat(4,minmax(0,1fr))
  }

  .fact:nth-child(n){
    padding-left:28px
  }

  .fact:first-child{
    padding-left:0
  }
}

/* Two columns at most, next to an illustration */

@media (min-width:72em){
  .facts.facts-2{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .facts-2 .fact:nth-child(2n){
    padding-left:28px
  }

  .facts-2 .fact:nth-child(2n+1){
    padding-left:0
  }
}

.fact strong{
  display:block;
  font:600 clamp(34px, 1rem + 2vw, 48px)/1 var(--display);
  letter-spacing:-.045em;
  color:var(--blue)
}

.fact span{
  display:block;
  margin-top:12px;
  max-width:20em;
  color:var(--ink-2);
  font-size:17px
}

.facts-note{
  margin-top:24px;
  color:var(--muted);
  font-size:16px
}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:28px;
  color:var(--blue);
  font-weight:650;
  text-underline-offset:4px
}

.link-arrow .i{
  width:18px;
  height:18px;
  stroke-width:2
}

/* Guides: one card per page, all linked from every page */

.guides{
  display:grid;
  gap:16px
}

@media (min-width:44em){
  .guides{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (min-width:80em){
  .guides{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

.guide-card{
  position:relative;
  display:grid;
  align-content:start;
  gap:12px;
  padding:26px 24px 28px;
  border-radius:var(--r);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:box-shadow .15s
}

.guide-card:hover{
  box-shadow:inset 0 0 0 2px var(--blue)
}

.guide-card .i{
  width:28px;
  height:28px;
  color:var(--blue)
}

.guide-card h3{
  font-size:clamp(20px, 1rem + .35vw, 22px);
  letter-spacing:-.02em
}

.guide-card h3 a{
  text-decoration:none
}

.guide-card h3 a::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--r)
}

.guide-card p{
  color:var(--ink-2);
  font-size:17px
}

/* ---------- FAQ ---------- */

.faq{
  display:grid;
  gap:40px
}

@media (min-width:64em){
  .faq{
    grid-template-columns:repeat(12,minmax(0,1fr));
    -moz-column-gap:32px;
         column-gap:32px;
    align-items:start
  }

  .faq-head{
    grid-column:1 / span 4;
    position:sticky;
    top:32px
  }

  .faq-list{
    grid-column:6 / -1
  }
}

.faq-head > p{
  margin-top:22px;
  color:var(--ink-2);
  font-size:18px
}

.qa{
  border-top:1px solid var(--line-2)
}

.qa:last-child{
  border-bottom:1px solid var(--line-2)
}

.qa summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  min-height:76px;
  padding:16px 0;
  list-style:none;
  cursor:pointer;
  font:550 clamp(18px, 1rem + .3vw, 20px)/1.35 var(--display);
  letter-spacing:-.015em;
  border-radius:var(--r-c)
}

.qa summary::-webkit-details-marker{
  display:none
}

.qa summary:hover .qa-icon{
  background:var(--deep-2)
}

.qa-icon{
  display:grid;
  place-items:center;
  flex:none;
  width:40px;
  height:40px;
  border-radius:var(--r-c);
  background:var(--deep);
  transition:background-color .15s
}

.qa-icon .i{
  width:18px;
  height:18px;
  stroke-width:1.9;
  transition:transform .2s
}

.qa[open] .qa-icon .i{
  transform:rotate(45deg)
}

.qa-answer{
  max-width:44em;
  padding:0 64px 30px 0;
  color:var(--ink-2);
  font-size:17px
}

.qa-answer a{
  color:var(--blue);
  font-weight:600;
  text-underline-offset:3px
}

@media (max-width:39.99em){
  .qa-answer{
    padding-right:0
  }
}

/* ---------- Final call to action: a night-blue band ---------- */

.cta{
  display:grid;
  gap:28px;
  padding:clamp(32px, 6vw, 80px);
  border-radius:var(--r);
  background:var(--night);
  color:var(--on-night)
}

@media (min-width:64em){
  .cta{
    grid-template-columns:minmax(0,1.2fr) auto;
    align-items:center;
    -moz-column-gap:48px;
         column-gap:48px
  }
}

.cta h2{
  color:#fff
}

.cta p{
  margin-top:18px;
  max-width:32em;
  color:var(--on-night-2);
  font-size:18px
}

/* ---------- Footer ---------- */

.site-footer{
  margin-top:clamp(88px, 10vw, 150px);
  padding:56px 0 40px;
  background:var(--night);
  color:var(--on-night)
}

.site-footer .brand{
  color:#fff
}

.site-footer .logo-frame{
  fill:#fff
}

.site-footer .logo-hill{
  fill:#8EA7E2
}

.foot-grid{
  display:grid;
  gap:40px
}

@media (min-width:40em){
  .foot-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .foot-brand{
    grid-column:1 / -1
  }
}

/* The official sources get the widest column: long names, each after a flag */

@media (min-width:72em){
  .foot-grid{
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,.8fr);
    -moz-column-gap:32px;
         column-gap:32px
  }

  .foot-brand{
    grid-column:auto
  }
}

.foot-brand > p{
  margin-top:14px;
  max-width:24em;
  color:var(--on-night-2);
  font-size:16px
}

.foot-promise{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--yellow) !important;
  font-weight:600
}

.foot-promise .i{
  width:18px;
  height:18px
}

.site-footer nav h2{
  color:var(--on-night-2);
  font:650 16px/1.2 var(--font);
  letter-spacing:.04em;
  text-transform:uppercase
}

.site-footer nav ul{
  display:grid;
  margin-top:12px
}

.site-footer nav a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding-block:6px;
  color:#fff;
  font-size:16px;
  text-decoration:none;
  overflow-wrap:anywhere
}

.site-footer nav a .i{
  width:16px;
  height:16px;
  color:var(--on-night-2)
}

.site-footer nav a:hover{
  text-decoration:underline;
  text-underline-offset:4px
}

.site-footer nav a[aria-current]{
  color:var(--yellow);
  font-weight:650
}

.foot-independent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:44px;
  padding:18px 20px;
  border-radius:var(--r-c);
  background:rgba(255,255,255,.07);
  color:var(--on-night-2);
  font-size:16px;
  line-height:1.5
}

.foot-independent .i{
  width:18px;
  height:18px;
  margin-top:3px;
  color:var(--yellow)
}

.foot-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  margin-top:28px;
  color:var(--on-night-2);
  font-size:16px
}

/* ==========================================================================
   Guide pages: the hero, the tool, then an article with its contents list
   ========================================================================== */

.guide-hero{
  text-align:center
}

.guide-hero .hero-title{
  max-width:18em;
  font-size:clamp(32px, 1rem + 2.8vw, 60px)
}

.guide-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 20px;
  margin-top:18px;
  color:var(--on-night-2);
  font-size:16px
}

.guide-meta span{
  display:inline-flex;
  align-items:center;
  gap:8px
}

.guide-meta .i{
  width:17px;
  height:17px;
  color:var(--yellow)
}

.article{
  display:grid;
  gap:40px;
  padding-top:clamp(64px, 8vw, 120px)
}

/* Grid items may shrink below their content (a wide table scrolls in its own box instead of widening the page) */

.article > *,.part,.faq > *,.legal-body > *{
  min-width:0
}

@media (min-width:72em){
  .article{
    grid-template-columns:repeat(12,minmax(0,1fr));
    -moz-column-gap:32px;
         column-gap:32px;
    align-items:start
  }

  .article-aside{
    grid-column:1 / span 3;
    position:sticky;
    top:24px
  }

  .article-body{
    grid-column:5 / -1
  }
}

.toc{
  padding:22px 22px 18px;
  border-radius:var(--r);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.toc h2{
  font:650 16px/1.2 var(--font);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted)
}

.toc ol{
  display:grid;
  gap:2px;
  margin-top:12px;
  counter-reset:toc
}

.toc li{
  counter-increment:toc
}

/* The list's links only: the button under it keeps its own white text and gets no number */

.toc li a{
  display:flex;
  gap:10px;
  padding:8px 0;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.4;
  text-decoration:none
}

.toc li a::before{
  content:counter(toc);
  flex:none;
  min-width:1.4em;
  color:var(--blue);
  font-weight:650
}

.toc li a:hover{
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:3px
}

.toc-tool{
  display:flex;
  width:100%;
  margin-top:16px;
  padding-block:12px;
  white-space:normal;
  text-align:center;
  line-height:1.25
}

@media (min-width:72em){
  .article-aside{
    max-height:calc(100dvh - 48px);
    overflow-y:auto
  }
}

.takeaways{
  padding:28px 28px 30px;
  border-radius:var(--r);
  background:var(--night);
  color:var(--on-night)
}

.takeaways h2{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-size:clamp(21px, 1rem + .4vw, 24px)
}

.takeaways h2 .i{
  color:var(--yellow)
}

.takeaways ul{
  display:grid;
  gap:12px;
  margin-top:18px
}

.takeaways li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  color:var(--on-night-2);
  font-size:17px
}

.takeaways li .i{
  width:20px;
  height:20px;
  margin-top:3px;
  color:var(--yellow);
  stroke-width:2.2
}

.takeaways a{
  color:#fff;
  font-weight:600;
  text-underline-offset:3px
}

.part{
  margin-top:clamp(56px, 6vw, 88px);
  scroll-margin-top:24px
}

.part > h2{
  font-size:clamp(28px, 1rem + 1.6vw, 40px);
  line-height:1.08;
  letter-spacing:-.035em
}

.part > * + *{
  margin-top:20px
}

.prose{
  max-width:44em;
  color:var(--ink-2);
  font-size:17px;
  line-height:1.65
}

.prose > * + *{
  margin-top:14px
}

.prose h3{
  margin-top:32px;
  color:var(--ink);
  font-size:clamp(19px, 1rem + .3vw, 22px);
  line-height:1.25;
  letter-spacing:-.015em
}

.prose ul,.prose ol{
  display:grid;
  gap:8px;
  padding-left:22px
}

.prose ul{
  list-style:disc
}

.prose ol{
  list-style:decimal
}

.prose li::marker{
  color:var(--blue);
  font-weight:650
}

.prose a{
  color:var(--blue);
  font-weight:600;
  text-underline-offset:3px;
  overflow-wrap:anywhere
}

.prose strong{
  color:var(--ink);
  font-weight:650
}

.prose blockquote{
  margin:20px 0 0;
  padding:4px 0 4px 20px;
  border-left:4px solid var(--yellow);
  color:var(--ink)
}

.prose code{
  padding:1px 6px;
  border-radius:6px;
  background:var(--deep);
  font-size:16px;
  overflow-wrap:anywhere
}

.callout{
  display:flex;
  align-items:flex-start;
  gap:14px;
  max-width:46em;
  padding:20px 22px;
  border-radius:var(--r);
  background:var(--blue-soft);
  color:var(--ink)
}

.callout > .i{
  width:22px;
  height:22px;
  margin-top:2px;
  color:var(--blue)
}

.callout-warn{
  background:var(--yellow-soft)
}

.callout-warn > .i{
  color:#8A5A00
}

.callout-text{
  display:grid;
  gap:6px;
  min-width:0;
  font-size:17px;
  line-height:1.55
}

.callout-text > strong{
  display:block;
  font-weight:650
}

.callout-body > * + *{
  margin-top:10px
}

.callout-body ul{
  display:grid;
  gap:6px;
  padding-left:20px;
  list-style:disc
}

.callout a{
  color:var(--blue);
  font-weight:600;
  text-underline-offset:3px
}

.timeline{
  display:grid;
  max-width:46em;
  border-left:2px solid var(--line-2);
  margin-left:8px
}

.timeline li{
  position:relative;
  padding:0 0 26px 26px
}

.timeline li::before{
  content:"";
  position:absolute;
  left:-9px;
  top:4px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  box-shadow:inset 0 0 0 4px var(--blue)
}

.timeline li.now::before{
  background:var(--yellow);
  box-shadow:inset 0 0 0 4px var(--blue)
}

.timeline time{
  display:block;
  color:var(--blue);
  font:650 17px/1.3 var(--font)
}

.timeline strong{
  display:block;
  margin-top:4px;
  color:var(--ink);
  font:600 19px/1.3 var(--display);
  letter-spacing:-.015em
}

.timeline p{
  margin-top:6px;
  color:var(--ink-2);
  font-size:17px
}

.checks{
  display:grid;
  gap:0;
  max-width:46em
}

.checks li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px 0;
  border-top:1px solid var(--line);
  color:var(--ink);
  font-size:17px
}

.checks li:last-child{
  border-bottom:1px solid var(--line)
}

.checks .i{
  width:22px;
  height:22px;
  margin-top:2px;
  stroke-width:2.2
}

.checks .yes .i{
  color:var(--ok)
}

.checks .no .i{
  color:var(--red)
}

.checks-pair{
  display:grid;
  gap:28px;
  max-width:none
}

@media (min-width:56em){
  .checks-pair{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px
  }
}

.checks-pair h3{
  font-size:20px;
  letter-spacing:-.015em
}

.checks-pair .checks{
  margin-top:12px
}

.table-wrap{
  max-width:100%;
  overflow-x:auto;
  border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--line-2);
  background:#fff
}

.table{
  width:100%;
  min-width:36em;
  font-size:16px;
  line-height:1.45
}

.table th,.table td{
  padding:14px 16px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line)
}

.table thead th{
  background:var(--deep);
  color:var(--ink);
  font-weight:650
}

.table tbody th{
  color:var(--ink);
  font-weight:650
}

.table td{
  color:var(--ink-2)
}

.table tr:last-child > *{
  border-bottom:0
}

.table a{
  color:var(--blue);
  font-weight:600
}

.sources{
  max-width:46em;
  padding:24px 24px 18px;
  border-radius:var(--r);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.sources h3{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  letter-spacing:-.015em
}

.sources h3 .i{
  color:var(--blue)
}

.sources ul{
  display:grid;
  margin-top:10px
}

.sources li{
  padding:12px 0;
  border-top:1px solid var(--line);
  font-size:16px;
  color:var(--muted)
}

.sources li:first-child{
  border-top:0
}

.sources a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--blue);
  font-size:17px;
  font-weight:650;
  text-underline-offset:3px;
  overflow-wrap:anywhere
}

.sources a .i{
  width:16px;
  height:16px
}

.sources span{
  display:block;
  margin-top:2px
}

.how-steps{
  display:grid;
  gap:14px;
  max-width:46em;
  counter-reset:how
}

.how-steps li{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:4px 16px;
  counter-increment:how
}

.how-steps li::before{
  content:counter(how);
  grid-row:span 2;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--blue-soft);
  color:var(--blue);
  font:650 18px/1 var(--display)
}

.how-steps strong{
  align-self:center;
  color:var(--ink);
  font-size:18px
}

.how-steps p{
  color:var(--ink-2);
  font-size:17px
}

/* ---------- 404 ---------- */

.hero-404{
  padding-bottom:clamp(64px, 9vw, 136px)
}

.hero-actions{
  display:flex;
  justify-content:center;
  margin-top:36px
}

/* ---------- Legal pages ---------- */

.legal{
  padding-top:clamp(40px, 6vw, 88px)
}

.legal-head{
  max-width:56em
}

.legal-head h1{
  margin-top:22px;
  font-size:clamp(36px, 1.1rem + 3vw, 64px);
  line-height:1.03;
  letter-spacing:-.04em
}

.legal-updated{
  margin-top:18px;
  color:var(--muted);
  font-size:16px
}

.legal-body{
  display:grid;
  gap:48px;
  margin-top:clamp(40px, 5vw, 72px)
}

@media (min-width:64em){
  .legal-body{
    grid-template-columns:repeat(12,minmax(0,1fr));
    -moz-column-gap:32px;
         column-gap:32px;
    align-items:start
  }

  .legal-aside{
    grid-column:1 / span 4;
    position:sticky;
    top:32px
  }

  .legal-body > .prose{
    grid-column:6 / -1
  }
}

.legal-summary{
  padding:26px 24px 28px;
  border-radius:var(--r);
  background:var(--deep)
}

.legal-summary h2{
  font-size:21px;
  letter-spacing:-.02em;
  line-height:1.2
}

.legal-summary ul{
  display:grid;
  gap:12px;
  margin-top:16px
}

.legal-summary li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--ink);
  font-size:16px;
  line-height:1.5
}

.legal-summary .i{
  width:18px;
  height:18px;
  margin-top:3px;
  color:var(--blue);
  stroke-width:2.1
}

.prose h2{
  margin-top:56px;
  color:var(--ink);
  font-size:clamp(24px, 1rem + .8vw, 30px);
  line-height:1.15;
  letter-spacing:-.03em
}

.prose > h2:first-child{
  margin-top:0
}

.prose dl{
  display:grid;
  border-top:1px solid var(--line)
}

.prose dl > div{
  display:grid;
  gap:4px;
  padding:14px 0;
  border-bottom:1px solid var(--line)
}

@media (min-width:40em){
  .prose dl > div{
    grid-template-columns:200px minmax(0,1fr);
    gap:24px
  }
}

.prose dt{
  color:var(--muted);
  font-size:16px;
  font-weight:600;
  overflow-wrap:anywhere
}

.prose dd{
  color:var(--ink);
  overflow-wrap:anywhere
}

/* ==========================================================================
   Workspace, shown once images are in (html[data-view=workspace])
   The label's settings in a blue sidebar, the batch bar (the one raised panel), the large preview where the
   label is dragged, and the cards.
   ========================================================================== */

.app{
  display:none
}

html[data-view=workspace] .app{
  display:block
}

@media (min-width:64em){
  html[data-view=workspace] .app{
    display:grid;
    grid-template-columns:360px minmax(0,1fr);
    align-items:start
  }
}

@media (min-width:100em){
  html[data-view=workspace] .app{
    grid-template-columns:384px minmax(0,1fr)
  }
}

/* ---------- Sidebar ---------- */

.side{
  display:flex;
  flex-direction:column;
  margin:12px 12px 0;
  padding:14px 16px 18px;
  background:var(--deep);
  border-radius:var(--r)
}

@media (min-width:64em){
  .side{
    position:sticky;
    top:12px;
    height:calc(100vh - 24px);
    height:calc(100dvh - 24px);
    margin:12px 0 12px 12px;
    padding:22px 20px 22px;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--deep-3) transparent
  }
}

.side-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.panel-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-top:22px
}

.panel-head h2{
  font:650 16px/1 var(--font);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted)
}

.panel-head p{
  font-size:16px;
  color:var(--muted)
}

.group{
  margin:22px 0 0;
  padding:0;
  border:0;
  min-width:0
}

.panel-head + .group{
  margin-top:16px
}

.group-title{
  display:flex;
  align-items:center;
  gap:8px;
  float:left;
  width:100%;
  padding:0;
  margin-bottom:10px;
  font:650 16px/1.25 var(--font);
  color:var(--ink)
}

.group-title > .i{
  width:18px;
  height:18px;
  color:var(--blue)
}

/* What the sidebar is: one set of settings for the whole batch */

.panel-intro{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:12px;
  padding:12px 14px;
  border-radius:var(--r-c);
  background:rgba(255,255,255,.65);
  color:var(--ink-2);
  font-size:16px;
  line-height:1.45
}

.panel-intro .i{
  width:20px;
  height:20px;
  margin-top:1px;
  color:var(--blue)
}

.group-title + *{
  clear:both
}

.hint{
  margin-top:10px;
  font-size:16px;
  line-height:1.45;
  color:var(--muted)
}

/* "Which one?": a tip under the icon choices, opened on hover, click or tap; its link opens the guide in a new tab */

.tip{
  position:relative;
  margin-top:10px
}

.tip-button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:0 10px 0 6px;
  margin-left:-6px;
  border-radius:var(--r-c);
  color:var(--blue);
  font:650 16px/1.2 var(--font);
  list-style:none;
  cursor:pointer
}

.tip-button::-webkit-details-marker{
  display:none
}

.tip-button .i{
  width:18px;
  height:18px
}

.tip-button:hover,.tip[open] > .tip-button{
  background:rgba(255,255,255,.6)
}

.tip-panel{
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  z-index:15;
  width:min(320px, calc(100vw - 48px));
  padding:16px 18px 14px;
  border-radius:var(--r);
  background:#fff;
  box-shadow:var(--shadow-tool)
}

.tip-panel::before{
  content:"";
  position:absolute;
  left:18px;
  top:-6px;
  width:12px;
  height:12px;
  background:#fff;
  transform:rotate(45deg);
  border-radius:2px
}

.tip-panel ul{
  display:grid;
  gap:10px
}

.tip-panel li{
  display:grid;
  gap:2px;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.4
}

.tip-panel strong{
  color:var(--ink)
}

.tip-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  margin-top:6px;
  color:var(--blue);
  font-weight:650;
  text-underline-offset:3px
}

.tip-more .i{
  width:16px;
  height:16px
}

/* Icon: three radio cards, each with the official icon */

.icon-choices{
  display:grid;
  gap:6px
}

.icon-choice{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:64px;
  padding:8px 12px 8px 8px;
  border-radius:var(--r-c);
  background:rgba(255,255,255,.55);
  cursor:pointer;
  box-shadow:inset 0 0 0 1px transparent
}

.icon-choice:hover{
  background:#fff
}

.icon-choice:has(input:checked){
  background:#fff;
  box-shadow:inset 0 0 0 2px var(--blue)
}

.icon-choice:has(input:focus-visible){
  outline:2px solid var(--blue);
  outline-offset:2px
}

.icon-sample{
  display:grid;
  place-items:center;
  height:48px;
  border-radius:8px;
  background:var(--mat)
}

.icon-sample img{
  height:28px;
  width:auto
}

.icon-text{
  display:grid;
  gap:2px;
  line-height:1.3
}

.icon-text strong{
  font-size:16px;
  color:var(--ink)
}

.icon-text span{
  font-size:16px;
  color:var(--muted)
}

/* Colour: five swatches (automatic, black, white, and their 50% transparent versions) */

.swatches{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px
}

.swatch{
  display:grid;
  justify-items:center;
  gap:6px;
  padding:8px 4px;
  border-radius:var(--r-c);
  cursor:pointer;
  text-align:center
}

.swatch:hover{
  background:rgba(255,255,255,.55)
}

.swatch:has(input:checked){
  background:#fff;
  box-shadow:inset 0 0 0 2px var(--blue)
}

.swatch:has(input:focus-visible){
  outline:2px solid var(--blue);
  outline-offset:2px
}

.swatch-chip{
  position:relative;
  width:36px;
  height:36px;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--border)
}

.swatch-auto .swatch-chip{
  background:linear-gradient(135deg, #000 0 50%, #fff 50% 100%)
}

.swatch-black .swatch-chip{
  background:#000
}

.swatch-white .swatch-chip{
  background:#fff
}

.swatch-black-transparent .swatch-chip{
  background:linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), repeating-conic-gradient(#C9D3EA 0 25%, #fff 0 50%) 0 0 / 12px 12px
}

.swatch-white-transparent .swatch-chip{
  background:linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), repeating-conic-gradient(#56648A 0 25%, #2E3A5C 0 50%) 0 0 / 12px 12px
}

.swatch-name{
  font-size:16px;
  line-height:1.15;
  color:var(--ink-2);
  -webkit-hyphens:auto;
          hyphens:auto;
  overflow-wrap:anywhere
}

.swatches .swatch:not(.swatch-auto) .swatch-name{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap
}

/* Automatic on a row of its own, the four official colours under it */

.swatches{
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.swatch-auto{
  grid-column:1 / -1;
  grid-auto-flow:column;
  justify-content:start;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:8px 12px;
  text-align:left
}

.swatch-auto .swatch-name{
  font-weight:650;
  color:var(--ink)
}

/* Position: the four corners of a picture, and "Custom" */

/* The corner picker: a light European flag (its official proportions, its circle of stars, in pale tints), a
   label in each corner */

.corners{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  width:100%;
  max-width:240px;
  aspect-ratio:3 / 2;
  border-radius:12px;
  background:#DCE5F9 url("/assets/ai_image_label/art/eu-flag-light-13cba9ba.svg") center / cover no-repeat;
  box-shadow:inset 0 0 0 1px var(--border)
}

.corners-frame{
  position:absolute;
  inset:0;
  border-radius:12px;
  pointer-events:none
}

.corner{
  position:relative;
  display:grid;
  padding:12px;
  cursor:pointer;
  border-radius:10px
}

.corner-top-left{
  justify-items:start;
  align-items:start
}

.corner-top-right{
  justify-items:end;
  align-items:start
}

.corner-bottom-left{
  justify-items:start;
  align-items:end
}

.corner-bottom-right{
  justify-items:end;
  align-items:end
}

.corner-dot{
  width:38px;
  height:18px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 0 0 2px var(--border);
  transition:background-color .15s, box-shadow .15s
}

.corner:hover .corner-dot{
  box-shadow:0 0 0 2px var(--blue)
}

.corner:has(input:checked) .corner-dot{
  background:var(--ink);
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--blue)
}

.corner:has(input:focus-visible){
  outline:2px solid var(--yellow);
  outline-offset:-4px;
  box-shadow:inset 0 0 0 6px var(--blue)
}

.tool[data-position=custom] .corner-dot{
  opacity:.45
}

.custom-choice{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  margin-top:10px;
  padding:0 14px;
  border-radius:var(--r-c);
  background:rgba(255,255,255,.55);
  cursor:pointer;
  font-weight:600;
  color:var(--ink)
}

.custom-choice .i{
  width:18px;
  height:18px;
  color:var(--blue)
}

.custom-choice:hover{
  background:#fff
}

.custom-choice:has(input:checked){
  background:#fff;
  box-shadow:inset 0 0 0 2px var(--blue)
}

.custom-choice:has(input:focus-visible){
  outline:2px solid var(--blue);
  outline-offset:2px
}

/* Sliders */

.range-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px
}

.range-head .group-title{
  float:none;
  width:auto;
  margin:0
}

.range-value{
  font:650 16px/1 var(--font);
  color:var(--blue)
}

.range{
  --fill:50%;
  -webkit-appearance:none;
  -moz-appearance:none;
       appearance:none;
  width:100%;
  height:44px;
  margin:4px 0 0;
  background:transparent;
  cursor:pointer
}

.range::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background:linear-gradient(to right, var(--blue) var(--fill), var(--deep-3) var(--fill))
}

.range::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:var(--deep-3)
}

.range::-moz-range-progress{
  height:6px;
  border-radius:999px;
  background:var(--blue)
}

.range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:24px;
  height:24px;
  margin-top:-9px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 2px var(--blue), 0 2px 6px rgba(11,26,61,.25)
}

.range::-moz-range-thumb{
  width:24px;
  height:24px;
  border:0;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 2px var(--blue), 0 2px 6px rgba(11,26,61,.25)
}

.range:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:6px
}

/* Switches: real checkboxes with role=switch */

.switch-row{
  display:flex;
  align-items:center;
  gap:12px
}

.switch-label{
  flex:1;
  display:flex;
  align-items:center;
  min-height:44px;
  margin:0 !important;
  float:none !important;
  cursor:pointer
}

.switch{
  -webkit-appearance:none;
  -moz-appearance:none;
       appearance:none;
  position:relative;
  flex:none;
  width:50px;
  height:30px;
  margin:0;
  border:1.5px solid var(--border);
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  transition:background-color .15s, border-color .15s
}

.switch::before{
  content:"";
  position:absolute;
  left:4px;
  top:50%;
  width:20px;
  height:20px;
  translate:0 -50%;
  border-radius:50%;
  background:var(--muted);
  transition:translate .15s, background-color .15s
}

.switch:hover{
  border-color:var(--ink-2)
}

.switch:checked{
  background:var(--blue);
  border-color:var(--blue)
}

.switch:checked::before{
  translate:19px -50%;
  background:#fff
}

.switch:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px
}

.switch-row + .hint{
  margin-top:2px
}

.side-tip{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:24px;
  padding:16px;
  border-radius:var(--r-c);
  background:rgba(255,255,255,.6)
}

.side-tip .i{
  width:20px;
  height:20px;
  margin-top:2px;
  color:var(--blue)
}

.side-tip p{
  display:grid;
  gap:4px;
  font-size:16px;
  line-height:1.45;
  color:var(--ink-2)
}

.side-tip strong{
  color:var(--ink)
}

.panel-foot{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:20px;
  font-size:16px;
  line-height:1.45;
  color:var(--ink-2)
}

.panel-foot .i{
  width:18px;
  height:18px;
  margin-top:2px;
  color:var(--blue)
}

/* ---------- Main area ---------- */

.app-main{
  min-width:0;
  padding:8px 16px 148px
}

@media (min-width:40em){
  .app-main{
    padding-inline:28px
  }
}

@media (min-width:64em){
  .app-main{
    display:flex;
    flex-direction:column;
    padding:16px 56px 72px 48px
  }
}

@media (min-width:100em){
  .app-main{
    padding-right:72px;
    padding-left:64px
  }
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:56px
}

.back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 14px 0 10px;
  margin-left:-10px;
  border-radius:var(--r-c);
  color:var(--ink-2);
  font:500 16px/1 var(--font);
  text-decoration:none
}

.back:hover{
  background:var(--deep);
  color:var(--ink)
}

.back .i{
  width:18px;
  height:18px
}

.results-head{
  display:grid;
  gap:16px;
  margin-top:12px
}

@media (min-width:64em){
  .results-head{
    margin-top:24px
  }
}

.ws-title{
  font-family:var(--display);
  font-weight:600;
  text-wrap:balance;
  font-size:clamp(32px, 1rem + 2.4vw, 56px);
  line-height:1.02;
  letter-spacing:-.042em
}

.ws-title:focus{
  outline:none
}

.results-lead{
  max-width:44em;
  color:var(--ink-2);
  font-size:17px
}

.lead-short{
  display:none
}

@media (max-width:39.99em){
  .lead-long{
    display:none
  }

  .lead-short{
    display:inline
  }
}

/* ---------- Batch bar: the one raised panel (sticky from 64em, a floating island below) ---------- */

.bar{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:30;
  padding:12px 12px 12px 18px;
  background:#fff;
  border-radius:var(--r);
  box-shadow:0 2px 6px rgba(11,26,61,.08), 0 24px 48px -16px rgba(11,26,61,.36)
}

.bar-progress{
  display:none
}

.tool[data-state=busy] .bar-progress{
  display:block;
  position:absolute;
  left:18px;
  right:18px;
  bottom:4px;
  width:auto;
  height:3px;
  border:0;
  -webkit-appearance:none;
  -moz-appearance:none;
       appearance:none;
  background:var(--deep);
  overflow:hidden
}

.bar-progress::-webkit-progress-bar{
  background:var(--deep)
}

.bar-progress::-webkit-progress-value{
  background:var(--blue)
}

.bar-progress::-moz-progress-bar{
  background:var(--blue)
}

.bar-in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px
}

.stat{
  display:none
}

.bar-status{
  flex:1 1 12em;
  min-width:0;
  font:650 16px/1.3 var(--font);
  color:var(--ink);
  overflow-wrap:anywhere
}

@media (max-width:39.99em){
  .bar-status{
    flex-basis:100%;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden
  }

  .bar-actions{
    margin-left:0;
    width:100%;
    justify-content:flex-end
  }

  .app-main{
    padding-bottom:200px
  }
}

.bar-actions{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto
}

.bar-download{
  min-height:52px;
  padding:0 20px
}

.bar-restart,.bar-zip{
  display:none
}

.tool[data-downloaded] .bar-restart{
  display:inline-flex
}

@media (max-width:30em){
  .bar-restart span{
    display:none
  }
}

@media (min-width:64em){
  .bar{
    position:sticky;
    left:auto;
    right:auto;
    top:12px;
    bottom:auto;
    z-index:6;
    margin-top:32px;
    padding:16px 18px 16px 28px;
    box-shadow:var(--shadow-tool)
  }

  .bar::before{
    content:"";
    position:absolute;
    left:-12px;
    right:-12px;
    top:-13px;
    height:13px;
    background:var(--canvas)
  }

  .bar-in{
    gap:0
  }

  .stat{
    display:flex;
    align-items:center;
    min-width:0;
    padding-right:clamp(24px, 3vw, 44px)
  }

  .tool:not(:has(.card[data-state=error])) .stat-skipped{
    display:none
  }

  .stat-text{
    display:grid;
    gap:4px;
    line-height:1.2;
    color:var(--muted);
    font-size:16px
  }

  .stat-text strong{
    display:block;
    font:500 38px/1 var(--display);
    letter-spacing:-.05em;
    color:var(--ink)
  }

  .stat-skipped strong{
    color:var(--red)
  }

  .bar-actions{
    display:grid;
    justify-items:center;
    gap:6px
  }

  .tool[data-downloaded] .bar-actions{
    display:flex
  }

  .bar-download{
    min-height:56px;
    padding:0 30px
  }

  .bar-zip{
    display:block;
    font-size:16px;
    color:var(--muted)
  }

  .tool[data-downloaded] .bar-zip{
    display:none
  }
}

/* ---------- The large preview: the selected image, its label draggable ---------- */

.stage{
  margin-top:24px;
  padding:16px;
  border-radius:var(--r);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line)
}

@media (min-width:64em){
  .stage{
    margin-top:28px;
    padding:20px 24px 22px
  }
}

.stage[hidden]{
  display:none
}

.stage-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 16px;
  margin-bottom:14px
}

.stage-head h2{
  font-size:22px;
  letter-spacing:-.025em
}

.stage-name{
  min-width:0;
  color:var(--ink-2);
  font-size:16px;
  overflow-wrap:anywhere
}

.stage-position{
  color:var(--muted);
  font-size:16px
}

.stage-reset{
  margin-left:auto;
  min-height:44px
}

/* As wide as the stage allows, as tall as the screen allows, always in the picture's proportions (--ratio, set
   by the script): the label's position in percent of the frame is its position in percent of the picture. */

.stage-frame{
  --ratio:1.5;
  position:relative;
  width:min(100%, calc(min(56vh, 620px) * var(--ratio)));
  aspect-ratio:var(--ratio);
  margin-inline:auto;
  border-radius:8px;
  background:var(--mat);
  touch-action:pan-y pinch-zoom;
  -moz-user-select:none;
       user-select:none;
  -webkit-user-select:none
}

/* Not clipped: the label's focus ring stays whole at the picture's edges (the icon's overhanging margin is blank) */

.stage-img{
  display:block;
  width:100%;
  height:100%;
  border-radius:8px;
  pointer-events:none;
  -webkit-user-drag:none
}

.tool[data-position=custom] .stage-frame,.stage-frame:has(.stage-label){
  cursor:crosshair
}

.stage-label{
  position:absolute;
  display:block;
  padding:0;
  border:0;
  background:transparent;
  cursor:grab;
  touch-action:none;
  border-radius:999px
}

.stage-label img{
  position:absolute;
  max-width:none;
  pointer-events:none;
  -webkit-user-drag:none
}

.tool[data-moving] .stage-label{
  cursor:grabbing
}

.stage-label:hover{
  filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 4px rgba(0,51,153,.8))
}

.hero .tool .stage-label:focus-visible,.stage-label:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:3px;
  box-shadow:0 0 0 9px var(--blue)
}

.stage-help{
  margin-top:12px;
  color:var(--muted);
  font-size:16px
}

.stage-note{
  margin-top:8px;
  color:var(--red);
  font-size:16px;
  font-weight:600
}

.stage-note:empty{
  display:none
}

/* ---------- Toolbar ---------- */

.toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 20px;
  margin:48px 0 20px
}

.toolbar h2{
  font-size:28px;
  letter-spacing:-.035em
}

.results-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-left:auto
}

.results-clear .i{
  width:18px;
  height:18px
}

.add-more{
  position:relative
}

.add-area{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 18px 0 14px;
  border-radius:var(--r-c);
  background:var(--deep);
  color:var(--ink);
  font:650 16px/1 var(--font);
  cursor:pointer;
  white-space:nowrap
}

.add-area .i{
  width:18px;
  height:18px;
  stroke-width:2;
  color:var(--blue)
}

.add-area:hover{
  background:var(--deep-2)
}

.add-more:has(input:focus-visible) .add-area{
  outline:2px solid var(--blue);
  outline-offset:2px
}

@media (max-width:39.99em){
  .toolbar{
    margin:32px 0 14px
  }

  .toolbar h2{
    flex:1 1 auto;
    font-size:24px
  }
}

/* ---------- Cards: one per image ---------- */

.results{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%, 260px),1fr));
  align-items:start
}

.card{
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr auto;
  border-radius:var(--r);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .15s
}

.card[data-selected]{
  box-shadow:inset 0 0 0 2px var(--blue)
}

.card [hidden]{
  display:none !important
}

.card-preview{
  position:relative;
  padding:10px 10px 0
}

.card-select{
  display:grid;
  place-items:center;
  width:100%;
  height:200px;
  padding:10px;
  border:0;
  border-radius:10px;
  background:var(--mat);
  cursor:pointer
}

.card-select:focus-visible{
  outline-offset:-3px;
  outline-width:3px
}

.frame{
  --ratio:1.5;
  position:relative;
  display:block;
  width:min(100%, calc(180px * var(--ratio)));
  aspect-ratio:var(--ratio);
  margin:auto;
  overflow:hidden;
  border-radius:4px
}

.card-img{
  display:block;
  width:100%;
  height:100%
}

.card-label{
  position:absolute;
  max-width:none;
  pointer-events:none
}

/* the file's blank margin may overhang the frame */

.card-img:not([src]),.card-label:not([src]){
  visibility:hidden
}

.card-wait{
  position:absolute;
  left:20px;
  top:20px;
  padding:0 10px;
  border-radius:8px;
  background:#fff;
  font:650 16px/32px var(--font);
  color:var(--ink);
  display:none
}

.when-queued,.when-working{
  display:none
}

.card[data-state=queued] .card-wait,.card[data-state=working] .card-wait{
  display:block
}

.card[data-state=queued] .when-queued,.card[data-state=working] .when-working{
  display:inline
}

.card-body{
  display:grid;
  align-content:start;
  gap:4px;
  padding:14px 16px 4px
}

.card-name{
  font:650 16px/1.35 var(--font);
  overflow-wrap:anywhere
}

.card-meta,.card-place{
  display:flex;
  flex-wrap:wrap;
  gap:0 10px;
  color:var(--muted);
  font-size:16px
}

.card-meta span:empty,.card-place span:empty{
  display:none
}

.card-meta span + span::before,.card-place span + span::before{
  content:"·";
  margin-right:10px
}

.card-note{
  color:var(--red);
  font-size:16px;
  font-weight:600
}

.card-note:empty{
  display:none
}

.card-skipped{
  display:none;
  align-items:center;
  gap:6px;
  color:var(--red);
  font:650 16px/1.2 var(--font)
}

.card-skipped .i{
  width:16px;
  height:16px
}

.card-how > summary{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  list-style:none;
  cursor:pointer;
  color:var(--ink);
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:4px
}

.card-how > summary::-webkit-details-marker{
  display:none
}

.card-how p{
  color:var(--ink-2);
  font-size:16px
}

.card-actions{
  display:flex;
  align-items:center;
  gap:2px;
  padding:6px 8px 10px
}

.card-actions .btn{
  min-height:44px;
  padding-inline:10px
}

.card-download{
  margin-left:auto
}

.card-reset{
  display:none !important
}

.card[data-own] .card-reset{
  display:inline-flex !important
}

.card:not([data-state=done]) .card-download,.card:not([data-state=done]) .card-reset{
  display:none !important
}

.card:not([data-state=done]) .card-place{
  display:none
}

/* A refused image: first, full width, one quiet row with the reason */

.card[data-state=error]{
  grid-column:1 / -1;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto;
  background:var(--deep);
  box-shadow:none
}

.card[data-state=error] .card-preview{
  display:none
}

.card[data-state=error] .card-body{
  padding:14px 16px
}

.card[data-state=error] .card-skipped{
  display:inline-flex
}

.card[data-state=error] .card-note{
  color:var(--ink-2);
  font-weight:500
}

.card[data-state=error] .card-actions{
  padding:8px
}

.card:not([data-state=error]) .card-how{
  display:none !important
}

/* Keep focused fields clear of the sticky bar (desktop) and the floating island (mobile): WCAG 2.4.11 */

html[data-view=workspace]{
  scroll-padding-top:16px;
  scroll-padding-bottom:124px
}

@media (min-width:64em){
  html[data-view=workspace]{
    scroll-padding-top:128px;
    scroll-padding-bottom:24px
  }
}

/* ---------- One page, two views ----------
   The labeller sets html[data-view=workspace] once images are in: the landing (header, hero copy, sections,
   footer) goes, and the tool fills the page as the workspace (.app). Without images, .app stays hidden. */

html[data-view=workspace] body{
  background:var(--canvas)
}

html[data-view=workspace] .site-header,
html[data-view=workspace] .site-footer,
html[data-view=workspace] #main > :not(.hero),
html[data-view=workspace] .hero > .wrap > :not(.tool),
html[data-view=workspace] .tool > :not(.app, .drop-overlay){
  display:none
}

html[data-view=workspace] .hero{
  padding:0;
  background:none;
  color:var(--ink);
  text-align:left;
  overflow:visible
}

html[data-view=workspace] .hero::before{
  display:none
}

html[data-view=workspace] .hero > .wrap{
  max-width:none;
  padding:0
}

html[data-view=workspace] .tool{
  margin:0
}