/* Tango walkthrough: all styles. One column whose width is set from script (--col), see measure() in js/walkthrough.js. */
  /* One look in both viewer themes: a white page with black type, as in the references. */
  :root {
    --paper: #fff;
    --ink: #000;
    --grey: #8c8c8c;
    --rule: #dcdcdc;
    --m: clamp(16px, 1.6vw, 28px);
    --head: 64px;
    --rail: 0px;
    --col: 100%;
    --small: clamp(15px, 1.12vw, 19px);
    --mid: clamp(1.3rem, 1.8vw, 2rem);
    --huge: clamp(2.1rem, 3.5vw, 4.4rem);
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --paper: #fff; --ink: #000; }
  }
  :root[data-theme="dark"] { --paper: #fff; --ink: #000; }

  *, *::before, *::after { box-sizing: inherit; }
  html { scroll-padding-top: calc(var(--head) + env(safe-area-inset-top, 0px)); }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: var(--small);
    line-height: 1.34;
    font-weight: 500;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, p, dl, dd, dt, ul, ol { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }
  ul, ol { list-style: none; }
  a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
  a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

  .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--m); width: min(var(--col), 100% - 2 * var(--m)); margin-left: auto; margin-right: auto; }

  /* Header: Play on the left, the name in the middle, Contact on the right, on the column's edges */
  .head {
    position: fixed; top: 0; left: 0; right: 0; z-index: 20;
    display: grid; grid-template-columns: 1fr auto 1fr; column-gap: var(--m);
    height: calc(var(--head) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(var(--m), calc((100% - var(--col)) / 2)) 0;
    align-items: center;
    background: var(--paper);
  }
  .head::after { content: ""; position: absolute; bottom: 0; height: 1px; background: var(--rule); left: max(var(--m), calc((100% - var(--col)) / 2)); right: max(var(--m), calc((100% - var(--col)) / 2)); }
  .controls { justify-self: start; display: flex; align-items: center; gap: 16px; }
  .play, .fullbtn { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
  .fullbtn svg { display: block; }
  .fullbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  .play .ic { display: block; fill: currentColor; }
  .play .ic-pause, .play.on .ic-play { display: none; }
  .play.on .ic-pause { display: inline; }
  .play:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  .brand { justify-self: center; white-space: nowrap; }
  .brand .name { letter-spacing: 0.08em; }
  .brand .by { color: var(--grey); font-size: 0.8em; }      /* the same size as the step names */
  .head a { text-decoration: none; }
  .head a:hover { text-decoration: underline; }
  .head .contact { justify-self: end; }

  /* ---------- The sequence ---------- */
  .story { padding-top: var(--head); }
  .intro { padding-top: var(--m); padding-bottom: clamp(32px, 7vh, 72px); min-height: 40vh; align-content: start; }
  .intro .jump { grid-column: 1; }
  .intro .lead { grid-column: 2 / 5; }
  .lead-top { display: flex; justify-content: space-between; margin-bottom: 0.5em; }
  .lead h1 { font-size: var(--huge); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
  .lead .sub { max-width: 31em; margin-top: clamp(18px, 3vh, 30px); }

  /* The steps: one small row across the page, above the picture, on a thin line with a point per step.
     A black line fills along it as the run goes on; the current step is black, and each step keeps
     what it produced beside its name. */
  .steps { position: sticky; top: var(--head); z-index: 10; width: min(var(--col), 100% - 2 * var(--m)); margin: 0 auto; background: var(--paper); }
  .steps::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
  .fill { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--ink); z-index: 1; }
  .index { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--m); font-size: 0.8em; }
  .index li {
    position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap;
    padding: 7px 0 10px;
    transition: color 0.2s linear;
  }
  .index li::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--grey); background: var(--paper); z-index: 2; transition: background-color 0.2s linear, border-color 0.2s linear; }
  .index li.past::after { border-color: var(--ink); background: var(--ink); }
  .index li.off { color: var(--grey); }
  .step { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
  .step:disabled { cursor: default; }
  .step:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  .keep { flex: none; display: block; height: 1.5em; width: 0; aspect-ratio: 3 / 2; object-fit: cover; opacity: 0; }
  .keep.has { width: auto; }

  .track { width: min(var(--col), 100% - 2 * var(--m)); margin: 0 auto; }
  .track { height: 5000vh; }
  .panel {
    position: sticky; top: calc(var(--head) + var(--rail));
    height: calc(100vh - var(--head) - var(--rail) - var(--m));
    height: calc(100svh - var(--head) - var(--rail) - var(--m));
    overflow: hidden;
    background: var(--paper);
  }
  .panel { cursor: pointer; }      /* a click on the picture plays or holds the run */
  .scene { position: absolute; inset: 0; background: #fdfdfd; will-change: clip-path; }
  .scene.lifted { z-index: 3; }
  .frame { position: absolute; overflow: hidden; }
  .res { opacity: 0; }
  .slider { position: absolute; top: 0; bottom: 0; left: 0; width: 0; opacity: 0; border-left: 1.5px solid #fff; will-change: transform; }
  .slider::after { content: ""; position: absolute; left: -11px; top: 50%; width: 19px; height: 19px; margin-top: -10px; border: 1.5px solid #fff; border-radius: 50%; background: rgba(0, 0, 0, 0.25); }
  .inset { position: absolute; top: 4%; right: 2.6%; height: 22%; width: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; border: 1px solid rgba(255, 255, 255, 0.85); opacity: 0; }
  .line { z-index: 4; }
  /* a second white sheet over the app: the style transfer shown large, and the overview at the end */
  .stage2 { position: absolute; left: 0; top: 0; z-index: 5; background: var(--paper); opacity: 0; visibility: hidden; overflow: hidden; transform-origin: 0 0; will-change: transform, opacity; }
  .stage2 img { position: absolute; display: block; }
  #stBefore, .sty { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  #stRef { left: 0; top: 0; border: 1px solid rgba(0, 0, 0, 0.5); opacity: 0; will-change: transform, opacity; }
  /* the wrap-up, inside the app: every image of the run, in order */
  .wrap { position: absolute; left: 0; right: 0; bottom: 0; top: 7.4%; background: #171717; opacity: 0; visibility: hidden; }
  .slide { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; opacity: 0; }
  .slide img { display: block; width: var(--tw, 120px); aspect-ratio: 3 / 2; object-fit: cover; opacity: 0; }
  .says { position: absolute; left: 0; top: 0; z-index: 4; }
  .say { position: absolute; left: 0; top: 0; width: max-content; max-width: min(46em, 86vw); opacity: 0; transition: opacity 0.25s linear; }
  .say { max-width: min(34em, 86vw); }
  .say .asked { color: var(--grey); }
  .ly { position: absolute; inset: 0; width: 100%; height: 100%; }
  img.ly, .ly img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ly img { position: absolute; inset: 0; }
  #l-clay, #mat, #l-green, #l-stone { opacity: 0; }

  .board { position: absolute; inset: 0; background: #f0eae4; opacity: 0; visibility: hidden; will-change: opacity; }
  .board img {
    position: absolute; right: 0; top: 0; height: 100%; width: auto;
    transform-origin: 100% 50%;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 10%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 10%);
    will-change: transform;
  }
  .swatches { position: absolute; left: var(--m); bottom: var(--m); display: flex; }
  .swatches span { width: clamp(22px, 2.4vw, 38px); aspect-ratio: 1; }

  /* The opening: the logo on white, the app window opening in its true proportion,
     the recording of the app, the exchange with the assistant, the stored result */
  .open { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: var(--paper); }
  .app { position: absolute; left: 0; top: 0; overflow: hidden; background: #171717; clip-path: inset(50%); will-change: clip-path; }
  .cam { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
  .cam canvas { display: block; width: 100%; height: 100%; }
  .answer {
    position: absolute; top: 0; right: 0; bottom: 0; width: 61%;
    display: flex; align-items: center;
    padding: 0 4.5% 0 5%;
    background: rgba(23, 23, 23, 0.96); color: #f4f4f4; opacity: 0;
  }
  .answer .said { font-size: var(--ans, 24px); line-height: 1.2; letter-spacing: -0.02em; }
  .said .off { opacity: 0; }
  .typing > .on::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -0.14em; background: currentColor; }
  .spot { position: absolute; left: 0; top: 0; pointer-events: none; outline: 0 solid rgba(255, 255, 255, 0.6); will-change: transform, width, height; }
  .note { position: absolute; left: 0; top: 0; max-width: 27em; opacity: 0; color: var(--grey); will-change: opacity; }
  .note .what { color: var(--ink); }
  .start { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; }
  .open:not(.below) .start { color: #f4f4f4; }
  .open:not(.below) .note, .open:not(.below) .start { background: rgba(23, 23, 23, 0.9); padding: 10px 14px; }
  .open:not(.below) .note { color: #b4b4b4; }
  .open:not(.below) .note .what { color: #f4f4f4; }
  .talk { position: absolute; left: 0; right: 0; display: none; }
  .talk > div { position: absolute; left: 0; right: 0; top: var(--m); opacity: 0; }
  .talk .you { display: grid; grid-template-columns: minmax(0, 46em) auto; column-gap: var(--m); align-items: start; justify-content: start; }
  .talk .you .who { grid-column: 1 / -1; }
  .talk .ai .said { column-count: 2; column-gap: var(--m); }
  .talk .who { color: var(--grey); margin-bottom: 0.6em; }
  .talk strong { font-weight: 800; }
  .ref { display: block; width: clamp(110px, 11vw, 168px); aspect-ratio: 16 / 9; object-fit: cover; opacity: 0; }
  .open.below .answer { display: none; }
  .open.below .talk { display: block; }
  .enter {
    position: absolute; left: 0; top: 0; transform-origin: 50% 0;
    display: grid; justify-items: center; gap: 16px;
    padding: 0; border: 0; background: none; color: #f2f2f2; font: inherit; letter-spacing: inherit; cursor: pointer;
    mix-blend-mode: difference;      /* the light logo reads dark on the white page and light on the app */
    will-change: transform, opacity;
  }
  .enter img { display: block; height: clamp(92px, 15vh, 148px); width: auto; }
  .enter:focus-visible { outline: 2px solid #fff; outline-offset: 10px; }
  .arrow { display: block; margin-top: 10px; }
  .arrow path { animation: blink 1.5s ease-in-out infinite; }
  @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.12; } }
  @media (prefers-reduced-motion: reduce) { .arrow path { animation: none; } }
  .fly { position: fixed; left: 0; top: 0; z-index: 30; display: block; object-fit: cover; opacity: 0; pointer-events: none; will-change: transform, width, height; }
  .attach {
    position: absolute; top: 0; right: 0; bottom: 0; width: 61%;
    display: flex; flex-direction: column; justify-content: center; gap: 1.1em;
    padding: 0 4.5% 0 5%;
    background: rgba(23, 23, 23, 0.96); color: #f4f4f4; opacity: 0; pointer-events: none;
  }
  .attach p { font-size: var(--ans, 24px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 800; }
  .attach img { display: block; width: 40%; aspect-ratio: 16 / 9; object-fit: cover; }
  .open.below .attach { display: none; }

  @media (max-aspect-ratio: 1/1) {
    .board img {
      right: auto; left: 0; top: auto; bottom: 0; width: 100%; height: auto;
      transform-origin: 50% 100%;
      -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 10%);
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 10%);
    }
    .swatches { bottom: auto; top: var(--m); }
  }

  /* ---------- After the sequence ---------- */
  .block { padding-top: clamp(64px, 12vh, 140px); align-items: start; }
  .block > h2 { grid-column: 1; color: var(--grey); }
  .block > .body { grid-column: 2 / 5; min-width: 0; }
  .statement { font-size: var(--mid); line-height: 1.16; letter-spacing: -0.02em; max-width: 27em; text-wrap: pretty; }
  .statement + p { max-width: 31em; margin-top: 1.4em; }
  .rows li { border-top: 1px solid var(--rule); padding: 0.75em 0; }
  .rows li:last-child, .sheet div:last-child { border-bottom: 1px solid var(--rule); }
  .sheet div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--m); border-top: 1px solid var(--rule); padding: 0.75em 0; }
  .sheet dt { color: var(--grey); }
  .sheet dd { grid-column: 2 / 4; }
  .close .body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--m); }
  .close .lead { grid-column: 2 / 4; }
  .close h3 { font-size: var(--huge); line-height: 1.04; letter-spacing: -0.035em; }
  .close p { max-width: 31em; margin-top: clamp(18px, 3vh, 30px); }
  .close a { display: inline-block; margin-top: 1em; }
  .close { padding-bottom: clamp(80px, 16vh, 180px); }

  @media (max-width: 819px) {
    :root { --head: 54px; }
    .cols { grid-template-columns: minmax(0, 1fr); }
    .steps { width: auto; margin: 0 var(--m); }
    .index { display: flex; justify-content: space-between; gap: 0 10px; font-size: 0.78em; }
    .index li { padding: 6px 0 9px; gap: 5px; }
    .brand .by { font-size: 0.78em; }
    .keep { height: 1.15em; }
    .talk .you { grid-template-columns: minmax(0, 1fr); }
    .talk .ai .said { column-count: 1; }
    .ref { margin-top: 0.9em; }
    .track { width: auto; margin: 0 var(--m); }
    .block > h2, .block > .body, .intro .jump, .intro .lead { grid-column: 1; }
    .intro { min-height: 0; padding-top: 22px; }
    .intro .jump { order: 2; margin-top: 18px; }
    .intro .lead, .close .lead { grid-column: 1; }
    .close .body { grid-template-columns: minmax(0, 1fr); }
    .block > h2 { margin-bottom: 14px; }
    .sheet div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
    .sheet dd { grid-column: 1; }
  }
  /* Full screen: only the picture, centred and as large as the screen allows; the header, the steps row and
     the texts under the window step aside. Two small controls stay in the corner. */
  .fullbar { display: none; }
  .full .head, .full .steps, .full .intro, .full #fly { display: none; }
  /* the texts become subtitles: one strip under the picture, two lines at most, same black term and grey text */
  .full .note, .full .start, .full .say, .full .talk { font-size: var(--sub-fs, 13px); line-height: 1.34; }
  .full .note, .full .say { width: var(--sub-w); max-width: none; max-height: 2.68em; overflow: hidden; }
  .full .note p, .full .say p { display: inline; }
  .full .note .what::after, .full .say .what::after { content: " · "; color: var(--grey); }
  .full .talk { width: var(--sub-w) !important; }
  .full .talk .who { display: none; }
  .full .talk > div { top: var(--m); display: flex; flex-direction: column; justify-content: flex-end; height: 2.68em; overflow: hidden; }   /* newest line at the bottom, older ones leave at the top */
  .full .talk .you, .full .talk .ai { grid-template-columns: none; }
  .full .talk .ai .said { column-count: 1; }
  .full .said .off { display: none; }       /* what is not written yet takes no room, so the newest words sit at the bottom */
  .full #orderLine::before { content: "You  "; color: var(--grey); }
  .full #promptOut::before { content: "Local prompt assistant  "; color: var(--grey); }
  .full #you .said { padding-right: 5em; }
  .full .ref { position: absolute; right: 0; bottom: 0; width: auto; height: 2.68em; margin: 0; }
  .full .story { padding-top: 0; }
  .full .panel { top: 0; height: 100vh; height: 100dvh; }
  .full .fullbar { display: flex; position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); z-index: 40; gap: 6px; }
  .fullbar button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--rule); border-radius: 2px; background: rgba(255, 255, 255, 0.88); color: var(--ink); font: inherit; font-size: 0.8em; letter-spacing: inherit; cursor: pointer; }
  .fullbar button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .fullbar svg { display: block; }
  @media (max-height: 520px) {             /* phones in landscape: small icons, one above the other, in the free strip beside the picture */
    .full .fullbar { flex-direction: column; top: calc(8px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); }
    .fullbar button { width: 34px; height: 34px; padding: 0; justify-content: center; }
    .fullbar button span { display: none; }
  }

  /* Reduced motion: no pinning, the frames are laid out as a plain sequence */
  .still .track { height: auto; }
  .still .panel { position: static; height: auto; overflow: visible; background: none; }
  .still .scene { position: static; transform: none; background: none; }
  .still .frame { position: static; }
  .still #hand, .still .slider, .still .inset { display: none; }
  .still .res { position: static; opacity: 1; height: auto; margin-top: var(--m); }
  .still .line { position: static; opacity: 1; padding: var(--m) 0 0; }
  .still .says, .still .say { position: static; opacity: 1; padding-top: var(--m); }
  .still .stage2 { display: none; }
  .still .wrap { position: static; opacity: 1; visibility: visible; padding: var(--m); }
  .still .slide { position: static; opacity: 1; margin-bottom: var(--m); }
  .still .slide img { opacity: 1; }
  .still .ly, .still .ly img { position: static; opacity: 1 !important; height: auto; aspect-ratio: 16 / 9; margin-bottom: var(--m); }
  .still #l-white { display: none; }
  .still #mat { -webkit-mask-image: none; mask-image: none; }
  .still .board { position: relative; opacity: 1; visibility: visible; aspect-ratio: 16 / 9; }
  .still .open { position: static; margin-bottom: var(--m); }
  .still .app { position: relative; width: 100% !important; height: auto !important; aspect-ratio: 3840 / 2088; clip-path: none; }
  .still .answer, .still .enter, .still .fly, .still .spot { display: none; }
  .still .note, .still .start { position: static; opacity: 1; padding-top: var(--m); }
  .still .talk { display: block; position: static; }
  .still .talk > div { position: static; opacity: 1; padding-top: var(--m); }
  .still .said .off { opacity: 1; }
  .still .keep, .still .ref { opacity: 1; }
  .still .keep { width: auto; }
  .still .steps { position: static; }
  .still .play, .still .fill, .still .fullbtn { display: none; }
  .still .attach { display: none; }