/* Night Walk Sketches: a marker board at night. Flat poster shapes, chalk white and tangerine,
   tape and pins, no drop shadows. The night paper is always the biggest thing on screen. */

:root {
  --nw-paper: #08112A;
  --nw-lemon: #FFE27A;
  --nw-window: #0B1430;
  --nw-wobble: 14px 5px 12px 4px / 5px 12px 4px 14px;
  --nw-wobble-2: 5px 13px 4px 15px / 13px 4px 15px 5px;
  --nw-edge: 12px;
  --nw-gap: 8px;
  --nw-top: calc(var(--ac-status-h, 72px) + 4px);
  --nw-safe-l: max(var(--nw-edge), env(safe-area-inset-left));
  --nw-safe-r: max(var(--nw-edge), env(safe-area-inset-right));
  --nw-safe-b: max(8px, env(safe-area-inset-bottom));
  --nw-backdrop: var(--ak-backdrop-layer, linear-gradient(color-mix(in srgb, var(--ak-bg) 89%, transparent), color-mix(in srgb, var(--ak-bg) 89%, transparent)), url("art/night-street.jpg"));
  --nw-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background-color: var(--ak-bg);
  background-image: var(--ak-bg-art), var(--nw-backdrop);
  background-size: var(--ak-bg-size), var(--ak-bg-size), cover, cover;
  background-position: 0 0, 0 0, center, center;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
svg { display: block; }

/* The painted logo, small, between the status chips and the help button. */
.nw-logo {
  position: fixed;
  z-index: 20;
  top: calc(max(12px, env(safe-area-inset-top)) + 6px);
  right: calc(72px + env(safe-area-inset-right));
  width: auto;
  height: min(40px, 6dvh);
  pointer-events: none;
}

.app {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  padding: var(--nw-top) var(--nw-safe-r) var(--nw-safe-b) var(--nw-safe-l);
  touch-action: manipulation;
}
/* Behind the opening the paper is not there at all, so nothing on it looks tappable before it is. */
.app[inert] { visibility: hidden; }

/* ---------- Chips: tilted paper with a wobbly marker edge, flat ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 12px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--nw-wobble);
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
  rotate: -1.5deg;
}
.chip:nth-child(even) { rotate: 1.5deg; border-radius: var(--nw-wobble-2); }
.chip svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.chip:active { translate: 0 1px; }
.chip:focus-visible,
.paper:focus-visible,
.window:focus-visible,
.cap:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: 3px; }

/* The one tangerine chip on each screen. */
.chip-done {
  background: var(--ak-accent);
  border-color: var(--ak-accent);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-weight: 400;
  font-size: 19px;
  padding: 0 16px;
}

/* New idea: the chalk-white chip pinned at the end of the strip. */
.chip-pin {
  position: relative;
  flex-direction: column;
  gap: 2px;
  background: var(--ak-btn-fill);
  border-color: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  padding: 8px 6px 6px;
  font-size: 14px;
  rotate: 3deg;
}
.chip-pin::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ak-btn-ink);
  border-radius: 50%;
  background: var(--ak-accent);
  translate: -50% 0;
}

/* ---------- The paper screen ---------- */

.studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "deal" "paper" "tools";
  gap: var(--nw-gap);
  width: 100%;
  max-width: 1180px;
  height: 100%;
}

.deal {
  grid-area: deal;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

/* The tape strip: tangerine masking tape holding three paper cards. */
/* Nothing in the idea column is squeezed under its neighbour; the column scrolls instead. */
.deal > * { flex-shrink: 0; }

.strip {
  --card-h: min(calc((100vw - 2 * var(--nw-edge) - 84px) / 3.05), 17dvh, 128px);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 6px;
}
.tape {
  position: absolute;
  top: 2px;
  left: -6px;
  right: 40px;
  height: 20px;
  background: color-mix(in srgb, var(--ak-accent) 88%, var(--ak-bg));
  clip-path: polygon(0 12%, 2% 0, 98% 6%, 100% 30%, 99% 60%, 100% 100%, 1% 92%, 0 60%);
  rotate: -0.6deg;
}

.cards {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  position: relative;
  flex: none;
  height: var(--card-h);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--ak-btn-ink);
  rotate: var(--tilt, 0deg);
  transform-origin: 50% 0;
}
.card-feeling {
  --tilt: -2deg;
  aspect-ratio: 384 / 273;
  background-image: url("art/card-feeling.png");
}
.card-thing {
  --tilt: 1.5deg;
  aspect-ratio: 357 / 384;
  background-image: url("art/card-thing.png");
}
.card-rule {
  --tilt: -1deg;
  aspect-ratio: 233 / 384;
  background-image: url("art/card-rule.png");
}

.card-kind {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.card-word {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  line-height: 1.05;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.card-feeling .card-word {
  inset: 30% 13% 12% 13%;
  font-family: var(--ak-font-display);
  font-size: 26px;
}
.card-thing .card-word {
  inset: 32% 10% 11% 14%;
  font-weight: 700;
  font-size: 18px;
}
.card-rule .card-word {
  inset: 13% 12% 34% 12%;
  font-weight: 700;
  font-size: 15px;
}
/* Not dealt yet: each card is a blank form, its field named over a dashed line to fill. */
.card.is-blank .card-word {
  flex-direction: column;
  gap: 6px;
  color: color-mix(in srgb, var(--ak-btn-ink) 70%, transparent);
  font-size: min(13px, calc(var(--card-h) * 0.13));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.card.is-blank .card-word::before { content: attr(data-empty); }
/* The rule's step on the climb, as notches in the pennant's point: one gentle, three the tightest. */
.card-level {
  position: absolute;
  left: 0;
  right: 0;
  top: 70%;
  display: flex;
  justify-content: center;
  gap: 3px;
}
.card-level i {
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--ak-btn-ink);
  border-radius: 50%;
}
.card-rule:not([data-level]) .card-level,
.card-rule[data-level=""] .card-level { display: none; }
.card-rule[data-level="1"] .card-level i:nth-child(-n+1),
.card-rule[data-level="2"] .card-level i:nth-child(-n+2),
.card-rule[data-level="3"] .card-level i { background: var(--ak-btn-ink); }
.card.is-blank .card-word::after {
  content: '';
  width: 70%;
  border-bottom: 2px dashed color-mix(in srgb, var(--ak-btn-ink) 55%, transparent);
}

.strip-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
  width: 76px;
  margin-top: 2px;
}
.strip-chips .chip {
  width: 100%;
  min-height: 48px;
  height: max(48px, calc((var(--card-h) - 8px) / 2));
  flex-direction: column;
  gap: 1px;
  padding: 4px;
  font-size: 13px;
  line-height: 1.05;
}
.strip-chips .chip svg { width: 20px; height: 20px; }
/* The way to the gallery keeps its two words on one line, so the chip never outgrows itself. */
.chip-street span { white-space: nowrap; font-size: 12px; letter-spacing: -0.01em; }
/* The way to the gallery: tangerine-edged, so it never reads as part of the Studio settings. */
.chip-street {
  border-color: var(--ak-accent);
  rotate: -2deg;
}

.prompt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
}
.prompt-line {
  flex: 1 1 auto;
  margin: 0;
  padding: 4px 10px;
  border-left: 4px solid var(--ak-accent);
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-size: 17px;
  line-height: 1.3;
}
.prompt-line.is-empty { color: var(--ak-ink-muted); }
.prompt-line b { font-weight: 700; }
.prompt-line .pl-rule { color: var(--ak-accent); font-weight: 700; }

/* Blank paper with no idea yet: one big way in, in the middle of where the drawing goes. */
.paper-start {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
}
.paper-idea {
  pointer-events: auto;
  min-height: 64px;
  padding: 0 26px;
  border-color: var(--ak-btn-fill);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-weight: 400;
  font-size: min(28px, 7vw);
  rotate: -2deg;
}
.paper-idea svg { width: 28px; height: 28px; }
.paper-start-note {
  margin: 0;
  color: var(--ak-ink-muted);
  font-size: 16px;
}

/* The brief: a slim caption along the paper's top edge the moment an idea is dealt, until the first
   mark. It is words on the paper, not a card over it, so the sheet below stays open to draw on. */
.brief {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 16px 0;
  text-align: left;
  pointer-events: none;
}
.brief p { margin: 0; }
.brief-kicker {
  color: var(--ak-ink-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.brief-thing {
  font-family: var(--ak-font-display);
  font-size: min(6.4vw, 4dvh, 28px);
  line-height: 1.1;
  color: var(--ak-ink);
}
.brief-thing em { font-style: normal; color: var(--ak-accent); }
.brief-rule {
  color: var(--ak-accent);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
/* Just dealt: the kicker says so in tangerine, so the tap plainly did something. */
.brief.is-dealt .brief-kicker { color: var(--ak-accent); }
/* A short sheet keeps the caption to what to draw and the rule. */
@container (max-height: 200px) {
  .brief { padding-top: 10px; }
  .brief-kicker { display: none; }
}

/* A counted rule keeps its count in the paper's corner. */
.tally {
  position: absolute;
  left: 10px;
  bottom: 8px;
  padding: 2px 8px;
  background: var(--nw-paper);
  color: var(--ak-ink);
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
}
.prompt-row #to-street { flex: none; }

/* Teaching: solid white note with the step, and a Hint for the whole first round. */
.coach {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border: 2px solid var(--ak-btn-fill);
  border-radius: var(--nw-wobble-2);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
}
.coach-text {
  flex: 1 1 auto;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}
.chip-hint {
  flex: none;
  background: var(--ak-btn-ink);
  border-color: var(--ak-btn-ink);
  color: var(--ak-ink);
  rotate: 2deg;
}

.is-coached {
  outline: 4px solid var(--ak-accent);
  outline-offset: 5px;
}

.coach-arrow {
  position: fixed;
  z-index: 25;
  width: 34px;
  height: 48px;
  pointer-events: none;
}
.coach-arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--ak-accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.coach-arrow.is-down { rotate: 180deg; }

/* The night paper: a deeper navy sheet pinned at two corners. */
.paper-well {
  grid-area: paper;
  position: relative;
  min-width: 0;
  min-height: 0;
}
.paper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid color-mix(in srgb, var(--ak-ink) 75%, transparent);
  border-radius: 6px 3px 7px 4px / 3px 7px 4px 6px;
  background: var(--nw-paper);
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  /* The brief sizes itself to the sheet, so a short sideways sheet never cuts it off. */
  container-type: size;
}
.ink,
.dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.dust { pointer-events: none; }
/* The sheet's tooth: a faint paper grain over the night paper and the marks on it, so a stroke reads
   as marker dragged over real paper. It is never saved; a kept sketch stays a clean stroke list. */
.grain {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* The marker is down: the sheet's edge lights tangerine until it lifts. */
.paper.is-drawing { border-color: var(--ak-accent); box-shadow: 0 0 0 2px var(--ak-accent); }
/* Done before the first mark: still there to tap (it says what it needs), but plainly not ready. */
.chip-done.is-waiting { opacity: 0.55; }
.pin {
  position: absolute;
  top: -7px;
  width: 16px;
  height: 16px;
  border: 3px solid var(--ak-ink);
  border-radius: 50%;
  background: var(--ak-accent);
  pointer-events: none;
}
.pin-l { left: 10px; }
.pin-r { right: 10px; }
.pen {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid var(--ak-accent);
  border-radius: 50%;
  pointer-events: none;
}
.pen.is-down { background: color-mix(in srgb, var(--ak-accent) 45%, transparent); }
.kept-mark {
  position: absolute;
  right: 10px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 4px;
  background: var(--nw-paper);
  color: var(--ak-ink-muted);
  font-size: 13px;
  pointer-events: none;
}
.kept-mark svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ak-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The tool row: one row of tilted paper chips along the bottom edge. */
.tools {
  grid-area: tools;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tools-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
/* Shows how much of the row is in view when it is wider than the phone. */
.tools-rail {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--ak-outline);
  pointer-events: none;
}
.tools-rail i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rail-at, 0%);
  width: var(--rail-share, 100%);
  border-radius: 2px;
  background: var(--ak-ink);
}
.tools-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.tools-scroll::-webkit-scrollbar { display: none; }
.tools-scroll > * { scroll-snap-align: start; flex: none; }
.tools-pinned {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 6px 2px;
}

.tool-set,
.brush-set {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* The tools sit in a paper tray, cut and taped like the cards above, so they belong to the sketchbook. */
.tools,
.tools-track,
.tools-pinned { position: relative; }
@media (orientation: portrait) {
  .tools {
    padding: 4px 0 2px;
    border: 2px solid var(--ak-outline);
    border-radius: var(--nw-wobble-2);
    background: var(--ak-surface);
  }
  .tools::before {
    content: '';
    position: absolute;
    top: -13px;
    left: 22%;
    width: 58px;
    height: 14px;
    background: color-mix(in srgb, var(--ak-accent) 80%, var(--ak-bg));
    rotate: -3deg;
    pointer-events: none;
  }
}
@media (orientation: landscape) {
  .tools-track,
  .tools-pinned {
    border: 2px solid var(--ak-outline);
    border-radius: var(--nw-wobble-2);
    background: var(--ak-surface);
  }
  .tools-track { padding: 0 4px; }
  .tools-pinned { padding: 4px 6px; }
}

/* Upright: two rows. The eight colours have the top row to themselves, a cap to each eighth of the
   width; the brush, eraser and Clear sit under them on the left, Undo and Done apart on the right. */
@media (orientation: portrait) {
  .tools {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-inline: -10px;
  }
  .tools-pinned { padding-inline: 4px; }
  .tools-scroll { overflow: visible; padding: 0; }
  .caps {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    width: 100%;
    gap: 0;
  }
  .caps .cap { width: 100%; }
  .tools-pinned { gap: 6px; padding: 0 4px 2px; }
  .tools-pinned #undo { margin-left: auto; }
  .tools-pinned .chip-done { flex: 0 1 150px; min-width: 0; padding: 0 12px; }
}
/* A short phone upright: the cards and the idea line give a little height back to the paper. */
@media (orientation: portrait) and (max-height: 700px) {
  .strip { --card-h: min(calc((100vw - 2 * var(--nw-edge) - 84px) / 3.05), 13dvh, 128px); }
  .prompt-line { font-size: 15px; line-height: 1.25; }
  .caps .cap { height: 44px; }
}
/* The narrowest phones: every chip at its 44px least, Done keeps its word and lets the tick go. */
@media (orientation: portrait) and (max-width: 400px) {
  .tools-pinned { gap: 4px; }
  .brush-set .tool,
  .tools-pinned .tool { width: 44px; min-width: 44px; }
  .tools-pinned .tool-word { width: auto; padding: 0 5px; font-size: 13px; }
  .tools-pinned .chip-done { padding: 0 8px; font-size: 17px; }
  .tools-pinned .chip-done svg { display: none; }
}
.tool { padding: 0; width: 48px; }
.tool-word { width: auto; padding: 0 12px; }
.tool[aria-pressed="true"],
.size[aria-checked="true"] {
  background: var(--ak-btn-fill);
  border-color: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
}

.size {
  width: 44px;
  min-width: 44px;
  min-height: 48px;
  padding: 0;
}
.size i {
  display: block;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: currentColor;
}

/* Marker caps: round, each in its own colour, the picked one lifted with a white ring. */
.cap {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
.cap i {
  display: block;
  width: 32px;
  height: 32px;
  border: 3px solid color-mix(in srgb, var(--cap) 70%, var(--ak-bg));
  border-radius: 50%;
  background: var(--cap);
  box-sizing: border-box;
}
.cap i::after {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  margin: 7px auto 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cap) 75%, var(--ak-bg));
}
.cap.is-dark i { border-color: var(--ak-ink-muted); }
/* Set aside by the rule: faded with a chalk slash, still there to pick. */
.cap.is-aside i { opacity: 0.35; }
.cap.is-aside::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 38px;
  border-radius: 2px;
  background: var(--ak-ink);
  translate: -50% -50%;
  rotate: 45deg;
  pointer-events: none;
}
.cap[aria-checked="true"] i {
  outline: 3px solid var(--ak-ink);
  outline-offset: 3px;
  translate: 0 -3px;
}

/* ---------- The street ---------- */

.street {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 1180px;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.street-head {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 22dvh;
}
/* Upright, the street scrolls as one; nothing in it is squeezed, so NIGHT never slides under the status bar. */
.street > * { flex-shrink: 0; }
/* Poster: one huge word, flat, part of the picture. */
.street-word {
  margin: 0;
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight);
  font-size: min(27vw, 26dvh, 240px);
  line-height: 0.86;
  letter-spacing: -0.01em;
  color: var(--ak-ink);
}
.street-count {
  align-self: flex-start;
  margin: 6px 0 0;
  padding-bottom: 4px;
  border-bottom: 5px solid var(--ak-accent);
  border-radius: 0 0 40% 10% / 0 0 6px 3px;
  font-family: var(--ak-font-display);
  font-size: min(26px, 6.4vw);
  line-height: 1.15;
  color: var(--ak-ink);
}

/* The row building up: fourteen small windows, solid lemon once lit, an empty chalk frame while dark. */
.street-meter {
  display: flex;
  gap: 5px;
  margin-top: 12px;
}
.street-meter i {
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid var(--ak-ink-muted);
  border-radius: 1px;
}
.street-meter i.is-lit {
  border-color: var(--nw-lemon);
  background: var(--nw-lemon);
}
.street-walk {
  margin: 8px 0 0;
  color: var(--ak-ink);
  font-size: 16px;
  font-weight: 700;
}
/* The rule climb: three small pennants, tangerine once kept, then the lamps the climb has lit. */
.street-climb {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.climb-marks {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.climb-marks li {
  padding: 3px 9px 5px;
  border: 2px solid var(--ak-ink-muted);
  border-radius: var(--nw-wobble-2);
  color: var(--ak-ink-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
}
.climb-marks li:nth-child(2) { rotate: 1.5deg; }
.climb-marks li:nth-child(odd) { rotate: -1.5deg; }
.climb-marks li.is-done {
  border-color: var(--ak-accent);
  background: var(--ak-accent);
  color: var(--ak-btn-ink);
}
.lamps {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  color: var(--ak-ink);
  font-size: 14px;
}
.lamps b { margin-left: 4px; padding-bottom: 2px; font-weight: 700; }
.lamp svg {
  width: 24px;
  height: 35px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lamp:not(.is-on) { color: var(--ak-ink-muted); }
.lamp-pool { fill: none; stroke: none; }
.lamp.is-on .lamp-head { fill: var(--nw-lemon); stroke: var(--nw-lemon); }
.lamp.is-on .lamp-pool { fill: color-mix(in srgb, var(--nw-lemon) 45%, transparent); }
.climb-line {
  margin: 6px 0 0;
  color: var(--ak-ink);
  font-size: 15px;
}
/* A lamp just lit: its news, in tangerine, where the walk line sits. */
.street-walk.is-news { color: var(--ak-accent); }
.tonight {
  position: absolute;
  top: 38%;
  left: 50%;
  translate: -50% 0;
  padding: 1px 6px;
  border-radius: var(--nw-wobble-2);
  background: var(--ak-accent);
  color: var(--ak-btn-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.street-rows {
  --house-w: clamp(72px, calc((100vw - 2 * var(--nw-edge)) / 4.15), 108px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.street-row-name {
  margin: 0 0 4px;
  color: var(--ak-ink-muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* The gallery's own caption over the first row: what this is and how to open a sketch again. */
.street-row-name.is-gallery {
  color: var(--ak-ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}
/* A row longer than the screen wraps into terraces of whole houses, never cut at the edge. */
.houses {
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
  padding-bottom: 4px;
}
.house {
  flex: none;
  width: var(--house-w);
}
.house-art {
  position: relative;
  width: 100%;
  aspect-ratio: 96 / 342;
  background-image: url("art/house-row.png");
  background-repeat: no-repeat;
  background-size: 400% 100%;
}
.house-art[data-slice="0"] { background-position: 0% 0; }
.house-art[data-slice="1"] { background-position: 33.333% 0; }
.house-art[data-slice="2"] { background-position: 66.667% 0; }
.house-art[data-slice="3"] { background-position: 100% 0; }

/* Each house's own window, drawn over the painted one: dark when empty, lemon when it holds a sketch. */
.window {
  position: absolute;
  top: 53.2%;
  left: var(--wx, 18%);
  width: 64%;
  height: 18%;
  padding: 0;
  border: 3px solid var(--ak-ink);
  border-radius: 2px;
  background: var(--nw-window);
  transition: background-color 1.4s ease, border-color 1.4s ease;
}
.window.is-empty::before,
.window.is-empty::after {
  content: '';
  position: absolute;
  background: var(--ak-ink);
}
.window.is-empty::before { left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; }
.window.is-empty::after { top: calc(50% - 1px); left: 0; right: 0; height: 2px; }
.window.is-lit {
  border-color: var(--nw-lemon);
  background: var(--nw-lemon);
  cursor: pointer;
}
.window canvas {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  background: var(--nw-paper);
  opacity: 1;
  transition: opacity 1.4s ease;
}
.window.is-off { background: var(--nw-window); border-color: var(--ak-ink); }
.window.is-off canvas { opacity: 0; }

.house-label {
  min-height: 38px;
  margin: 4px 2px 0;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  color: var(--ak-ink);
  overflow-wrap: anywhere;
}
.house-label b {
  display: block;
  font-family: var(--ak-font-display);
  font-weight: 400;
  font-size: 17px;
  color: var(--ak-accent);
}

.street-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 6px;
}
.where-line {
  margin: 0;
  color: var(--ak-ink-muted);
  font-size: 14px;
}
.where-line.is-error { color: var(--ak-ink); border-left: 4px solid var(--ak-accent); padding-left: 8px; }
.street-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- In-page sheet: a taped note, never a browser pop-up ---------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 36;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ak-bg) 82%, transparent);
}
.sheet-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(100%, 440px);
  max-height: 100%;
  overflow-y: auto;
  padding: 26px 20px 18px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--nw-wobble);
  background: var(--ak-surface);
  color: var(--ak-ink);
  rotate: -1deg;
}
.sheet-tape {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 72px;
  height: 18px;
  background: color-mix(in srgb, var(--ak-accent) 88%, var(--ak-bg));
  translate: -50% 0;
  rotate: 3deg;
}
.sheet-title {
  margin: 0;
  font-family: var(--ak-font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
}
.sheet-body { font-size: 17px; line-height: 1.4; }
.sheet-body p { margin: 0 0 6px; }
.sheet-body .muted { color: var(--ak-ink-muted); font-size: 15px; }
.sheet-view {
  display: block;
  width: 100%;
  max-height: 46dvh;
  margin: 4px 0 8px;
  object-fit: contain;
  border: 6px solid var(--nw-lemon);
  background: var(--nw-paper);
}
.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.sheet-actions .is-quiet { background: var(--ak-bg); }

/* The kept sketch on its way into a window. */
.flyer {
  position: fixed;
  z-index: 28;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  border: 2px solid var(--ak-ink);
  pointer-events: none;
}

/* The chrome's ending, worn as a poster: the feeling word huge under the pinned print. */
#activity-chrome-ending.ac-chrome.site-inspicacity .ac-verdict { order: 0; }
#activity-chrome-ending.ac-chrome.site-inspicacity .ac-work { order: 1; }
#activity-chrome-ending.ac-chrome.site-inspicacity .ac-number {
  order: 2;
  margin: 6px 0 0;
  font-family: var(--ak-font-display);
  font-size: min(84px, 19vw, 14dvh);
  line-height: 0.95;
  color: var(--ak-accent);
  overflow-wrap: anywhere;
}
#activity-chrome-ending.ac-chrome.site-inspicacity .ac-lines { order: 3; }
#activity-chrome-ending.ac-chrome.site-inspicacity .ac-fill,
#activity-chrome-ending.ac-chrome.site-inspicacity .ac-actions { order: 4; }
#activity-chrome-ending.ac-chrome.site-inspicacity .ac-work img { max-height: 34dvh; }
/* A poster taller than the screen scrolls from its top instead of being cut off at both ends. It
   takes over the whole board, so no half-hidden street or unusable button shows behind it. */
#activity-chrome-ending.ac-chrome.site-inspicacity {
  justify-content: safe center;
  background-color: var(--ak-bg);
  background-image: var(--ak-bg-art);
  background-size: var(--ak-bg-size);
  padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
#activity-chrome-ending.ac-chrome.site-inspicacity .ac-card { flex: none; padding: 26px 20px 18px; }

/* Sideways the whole poster is one card, the taped print on its left and the words beside it, kept
   clear of the help button in the top corner. The print is bounded by what is left of the screen once
   the words, the gaps, the card and the print's white frame are counted, and its frame grows with it
   (the frame's own cap is lifted), so the whole print always sits inside its frame and on screen. */
@media (orientation: landscape) {
  #activity-chrome-ending.ac-chrome.site-inspicacity {
    --nw-end-words: clamp(220px, 36vw, 360px);
    --nw-end-print-w: calc(100vw - var(--nw-end-words) - 240px - env(safe-area-inset-left) - env(safe-area-inset-right));
    --nw-end-print-h: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    align-items: center;
    padding: max(10px, env(safe-area-inset-top)) calc(env(safe-area-inset-right) + 68px) max(10px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-card {
    display: grid;
    grid-template-columns: auto var(--nw-end-words);
    grid-template-areas: "work verdict" "work number" "work lines" "work actions";
    align-content: center;
    align-items: center;
    justify-items: center;
    column-gap: 28px;
    row-gap: 8px;
    width: auto;
    max-width: 100%;
    padding: 20px 20px 16px 34px;
  }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-verdict { grid-area: verdict; font-size: clamp(22px, 7dvh, 32px); line-height: 1.1; }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-number { grid-area: number; margin: 0; font-size: min(60px, 6.5vw, 13dvh); }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-lines { grid-area: lines; font-size: 17px; line-height: 1.35; }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-actions { grid-area: actions; margin-top: 6px; }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-actions button { min-height: 52px; font-size: 18px; }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-work { grid-area: work; max-width: none; margin: 16px 0 6px; }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-work img {
    width: auto;
    height: auto;
    max-width: var(--nw-end-print-w);
    max-height: var(--nw-end-print-h);
  }
  /* The card is pinned with a gentler tilt sideways, so its corners stay on a short screen. */
  :root:not(.ac-still) #activity-chrome-ending.ac-chrome.site-inspicacity .ac-card { animation-name: nw-pin-flat; }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-card { transform: rotate(-0.6deg); }
}
@keyframes nw-pin-flat {
  from { opacity: 0; transform: translateY(-24px) rotate(-4deg); }
  to { opacity: 1; transform: rotate(-0.6deg); }
}
/* A short phone sideways: the words set a little tighter, still at a size that reads at arm's length. */
@media (orientation: landscape) and (max-height: 430px) {
  #activity-chrome-ending.ac-chrome.site-inspicacity {
    --nw-end-words: clamp(230px, 40vw, 360px);
    --nw-end-print-h: calc(100dvh - 118px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding-top: 6px;
    padding-bottom: 6px;
  }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-card { row-gap: 5px; padding: 16px 16px 12px 32px; }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-verdict { font-size: 22px; }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-number { font-size: min(48px, 6.5vw, 12dvh); }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-lines { font-size: 16px; line-height: 1.3; }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-line { margin-bottom: 2px; }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-actions { gap: 8px; }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-actions button { min-height: 48px; font-size: 17px; }
  #activity-chrome-ending.ac-chrome.site-inspicacity .ac-work { margin: 14px 0 4px; }
}

/* ---------- Sideways: the paper on one side, the idea and status on the other ---------- */

@media (orientation: landscape) {
  /* Sideways: the colours run under the paper; sizes, Undo and Done sit under the idea column,
     on the same bottom edge, so neither half is crowded. */
  .studio {
    grid-template-columns: minmax(0, 1fr) minmax(264px, 37%);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "coach deal" "paper deal" "track finish";
    column-gap: 16px;
    row-gap: 6px;
  }
  .tools { display: contents; }
  /* The first round's teaching note sits above the paper, so the idea column keeps its room. */
  .studio > .coach { grid-area: coach; padding-top: 6px; padding-bottom: 6px; }
  .tools-track { grid-area: track; align-self: end; }
  .tools-scroll { justify-content: space-between; gap: 8px; }
  .tools-pinned { grid-area: finish; justify-content: space-between; gap: 6px; padding: 4px 6px; }
  .tools-pinned .tool-set { gap: 2px; }
  .tools-pinned .chip-done { flex: 1 1 auto; max-width: 140px; min-width: 0; padding: 0 10px; }
  .tools-scroll { gap: 4px; }
  /* A narrow phone sideways: the eraser and Clear join the brush in a second row by Undo and Done,
     which reaches up beside the paper's foot, so the paper keeps its height. */
  .studio.is-snug {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 37%);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "coach deal" "paper deal" "paper finish" "track finish";
  }
  .studio.is-snug .tools-pinned { flex-wrap: wrap; align-content: end; row-gap: 4px; }
  .studio.is-snug .tools-pinned #undo { margin-left: auto; }
  .studio.is-snug .strip { --card-h: min(calc((max(248px, 37vw - 16px) - 90px) / 3.05), 24dvh, 120px); }
  /* The colours alone under the paper: a cap to each eighth of its width. */
  .studio.is-snug .tools-scroll { padding-inline: 0; }
  .studio.is-snug .tools-track { padding-inline: 0; }
  .studio.is-snug .caps { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); width: 100%; gap: 0; }
  .studio.is-snug .caps .cap { width: 100%; }
  .deal {
    overflow-y: auto;
    scrollbar-width: none;
  }
  .strip {
    /* From the idea column's real width (37% of the row, never under 264px), less the two chips. */
    --card-h: min(calc((max(264px, 37vw - 16px) - 90px) / 3.05), 24dvh, 120px);
  }
  .prompt-row { flex-wrap: wrap; }
  .prompt-line { font-size: 16px; }
  .coach-text { font-size: 18px; }

  .street {
    display: grid;
    /* The left column is as wide as the word NIGHT; the tip and buttons wrap under it. */
    grid-template-columns: min-content minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "head rows" "foot rows";
    column-gap: 24px;
    overflow-y: hidden;
  }
  /* The head sits from the top, so a tall column can never push NIGHT up under the status bar;
     the buttons below take what is left and scroll on their own if a phone is very short. */
  .street-head { grid-area: head; min-height: 0; justify-content: flex-start; }
  .street-word { font-size: min(14vw, 30dvh, 240px); }
  .street-foot { grid-area: foot; align-self: start; max-width: 340px; max-height: 100%; overflow-y: auto; scrollbar-width: none; }
  .street-row-name { margin-bottom: 2px; font-size: 13px; }
  /* The header already names the first row; sideways it needs the height for the labels. */
  .street-row-name.is-gallery { font-size: 14px; line-height: 1.25; }
  /* Sideways the sky is cropped down to the chimney pots, so the houses are as wide as the height
     allows and their labels need fewer lines. */
  .house-art {
    aspect-ratio: 96 / 242;
    background-size: 400% 141.32%;
  }
  .house-art[data-slice] { background-position-y: 100%; }
  .window { top: 34.7%; height: 24.8%; }
  .tonight { top: 13%; }
  .house-label { min-height: 0; margin: 4px 2px 0; font-size: 15px; line-height: 1.15; overflow-wrap: normal; }
  .house-label b { font-family: var(--ak-font-body); font-weight: 700; font-size: 16px; }
  .street-rows {
    grid-area: rows;
    /* Room under each house for a three-line label; the window stays a 44px tap or more. */
    --house-w: clamp(70px, calc((100dvh - var(--nw-top) - var(--nw-safe-b) - 96px) * 96 / 242), 112px);
    height: 100%;
    overflow-y: auto;
    min-width: 0;
  }
}

/* Sideways, a street that runs below the screen's foot: a round arrow in the gutter kept clear on the
   right of the houses walks down one terrace. */
.rows-more {
  grid-area: rows;
  align-self: end;
  justify-self: end;
  z-index: 1;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  padding: 0;
  border-color: var(--ak-accent);
  border-radius: 50%;
  background: var(--ak-accent);
  color: var(--ak-btn-ink);
  rotate: 0deg;
}
.rows-more svg { width: 26px; height: 26px; }

/* A narrow phone sideways: Done keeps its word and lets the tick go, so it never runs off the edge. */
@media (orientation: landscape) and (max-width: 720px) {
  .tools-pinned .chip-done svg { display: none; }
  .tools-pinned { gap: 4px; }
}

/* Short phones turned sideways keep the idea column tight. */
@media (orientation: landscape) and (max-height: 480px) {
  .deal { gap: 4px; }
  .prompt-row { min-height: 0; }
  .prompt-line { font-size: 15px; padding: 2px 8px; }
  .coach { padding: 6px 6px 6px 10px; }
  .street-word { font-size: min(14vw, 19dvh); }
  .street-count { font-size: 18px; }
  .street-meter { margin-top: 8px; }
  .street-walk { margin-top: 6px; font-size: 15px; }
  /* Short sideways, the lit windows are plainly buttons; the tip gives its room to the way back to the paper.
     The row of fourteen already shows the dark windows, so the walk line gives its room to the climb. */
  /* The status bar's meter already shows the climb, so its sentence gives its room to the streak. */
  .climb-line { display: none; }
  .street-climb { margin-top: 8px; gap: 8px; }
  .climb-marks li { font-size: 13px; padding: 2px 7px 4px; }
  .climb-line { margin-top: 4px; font-size: 14px; line-height: 1.25; }
  /* The lamp keeps to the pennants' line; its count is in its name for anyone who can't see it. */
  .lamps b { display: none; }
}
/* Very short: the status chip already counts the lights, so the head keeps NIGHT, the row and the walk. */
@media (orientation: landscape) and (max-height: 400px) {
  .street-count { display: none; }
  .street-climb { margin-top: 6px; }
  .climb-line { font-size: 13px; }
}
/* The shortest phones sideways: NIGHT a little smaller, so both buttons sit on screen. */
@media (orientation: landscape) and (max-height: 340px) {
  .street-word { font-size: min(14vw, 15dvh); }
  .street-meter { margin-top: 6px; }
}

/* The shortest phones sideways: the same label sizes, set tighter. The climb keeps its named pennants
   and its lamp; its sentence is said on every ending, so it gives its room to Close for tonight. */
@media (orientation: landscape) and (max-height: 380px) {
  .climb-line { display: none; }
  .house-label { margin-top: 2px; line-height: 1.08; }
  .house-label b { line-height: 1.05; }
  .houses { padding-bottom: 0; }
}

/* ---------- Motion: slow and quiet, only when wanted ---------- */

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .card.is-dropping {
    animation: nw-drop 620ms var(--nw-ease) both;
    animation-delay: var(--delay, 0ms);
  }
  :root:not(.ac-still) .is-coached { animation: nw-ring 1.8s ease-in-out infinite; }
  :root:not(.ac-still) .coach-arrow { animation: nw-nudge 1.8s ease-in-out infinite; }
  :root:not(.ac-still) .dust.is-dusting { animation: nw-dust 700ms ease-out both; }
  :root:not(.ac-still) .kept-mark:not([hidden]) { animation: nw-settle 900ms ease-out both; }
  :root:not(.ac-still) .studio.is-entering,
  :root:not(.ac-still) .street.is-entering { animation: nw-settle 420ms ease-out both; }
  :root:not(.ac-still) .flyer { transition: transform 620ms var(--nw-ease), opacity 620ms ease; }
  :root:not(.ac-still) .prompt-line.is-fresh { animation: nw-wash 1.4s ease-out both; }
  :root:not(.ac-still) .brief:not([hidden]) { animation: nw-settle 700ms ease-out both; }
  /* A fresh deal lands at once, then settles, so the tap answers in the same moment. */
  :root:not(.ac-still) .brief.is-dealt:not([hidden]) { animation: nw-deal 520ms var(--nw-ease) both; }
  /* A lamp the climb has just lit comes on like a light down the road. */
  :root:not(.ac-still) .lamp.is-coming-on .lamp-head { animation: nw-lamp 1.6s ease-in both; }
  /* The first mark wakes Done with one small lift. */
  :root:not(.ac-still) .chip-done.is-waking { animation: nw-wake 520ms var(--nw-ease) both; }
}

:root.ac-still .window,
:root.ac-still .window canvas { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .window,
  .window canvas { transition: none; }
}

@keyframes nw-wake {
  0% { opacity: 0.55; transform: none; }
  45% { opacity: 1; transform: translateY(-5px) scale(1.06); }
  100% { opacity: 1; transform: none; }
}
@keyframes nw-lamp {
  0%, 30% { fill: transparent; stroke: var(--ak-ink-muted); }
  45% { fill: var(--nw-lemon); }
  55% { fill: transparent; }
  100% { fill: var(--nw-lemon); stroke: var(--nw-lemon); }
}
@keyframes nw-drop {
  0% { opacity: 0; transform: translateY(-36px) rotate(-5deg); }
  60% { opacity: 1; transform: translateY(3px) rotate(1.5deg); }
  80% { transform: translateY(-1px) rotate(-0.6deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes nw-ring {
  0%, 100% { outline-offset: 4px; outline-color: var(--ak-accent); }
  50% { outline-offset: 9px; outline-color: color-mix(in srgb, var(--ak-accent) 45%, transparent); }
}
@keyframes nw-nudge {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
@keyframes nw-dust {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to { opacity: 0; transform: translateY(-10px); filter: blur(2px); }
}
@keyframes nw-wash {
  from { background-color: color-mix(in srgb, var(--ak-accent) 40%, var(--ak-bg)); }
  to { background-color: var(--ak-bg); }
}
@keyframes nw-deal {
  0% { opacity: 0.55; transform: translateY(-14px) scale(0.96); }
  60% { opacity: 1; transform: translateY(2px) scale(1.01); }
  100% { opacity: 1; transform: none; }
}
@keyframes nw-settle {
  from { opacity: 0; }
  to { opacity: 1; }
}