/* RafaBox home page demos: the workbench cursor, and the Collect, Scoop and Palette scenes.
   Kept out of site.css so other pages don't load it. The site-wide reduced-motion rule in
   site.css (transition/animation none !important) still applies to everything here. */

/* ---------- Workbench demo: a cursor searches, picks and pastes ---------- */

.bench-window { position: relative; }
.bench-ph { color: var(--ink-400); }
.bench-q { color: var(--ink); font-weight: 500; }
.bench-q:empty { display: none; }
.bench-caret { display: none; width: 1.5px; height: 1em; background: var(--violet); }
.bench-window.is-typing .bench-caret { display: inline-block; animation: sc-blink 1s steps(1) infinite; }
.bench-window.has-query .bench-ph { display: none; }
.bench-window.is-typing .bench-search { box-shadow: inset 0 0 0 1.5px var(--violet), 0 0 0 3px var(--violet-softer); }

/* Tools that don't match the search fold away, and their group label with them. */
.bench-list > li { max-height: 80px; transition: max-height 0.35s var(--ease), opacity 0.25s var(--ease), margin 0.35s var(--ease); }
.bench-list > li.is-filtered { max-height: 0; opacity: 0; margin-top: -6px; overflow: hidden; pointer-events: none; }

/* The clipboard arrives with a violet wash before the result streams in. */
.bench-window.is-loading .bench-pane:first-child pre { animation: bench-paste 0.45s var(--ease); }
.bench-window.is-loading .bench-out { opacity: 0.25; }
.bench-out { transition: opacity 0.2s; }
@keyframes bench-paste { 0% { background: rgba(127, 60, 232, 0.16); } 100% { background: transparent; } }
.bench-btn-paste { transition: transform 0.15s var(--ease), box-shadow 0.15s; }
.bench-btn-paste.is-pressed { transform: scale(0.94); box-shadow: 0 0 0 4px var(--violet-softer); }

.demo-cursor, .bench-cursor {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
  transform: translate(var(--x, 60%), var(--y, 60%));
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.25, 1);
  filter: drop-shadow(0 2px 3px rgba(6, 1, 15, 0.35));
}
.bench-cursor { display: none; }
.bench-window.is-demo .bench-cursor { display: block; }
.demo-cursor svg, .bench-cursor svg { width: 100%; height: 100%; fill: var(--ink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.demo-cursor.is-down svg, .bench-cursor.is-down svg { transform: scale(0.86); transform-origin: 20% 10%; }
.demo-ripple, .bench-ripple {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 2px solid var(--violet-bright);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--x, 0), var(--y, 0)) scale(0.3);
}
.demo-ripple.is-on, .bench-ripple.is-on { animation: demo-ripple 0.6s var(--ease); }
@keyframes demo-ripple {
  0% { opacity: 1; transform: translate(var(--x), var(--y)) scale(0.3); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.3); }
}
.bench-toast {
  position: absolute;
  z-index: 6;
  right: 24px;
  bottom: 70px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 14px 30px -12px rgba(6, 1, 15, 0.55);
  transform: translateY(16px) scale(0.92);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.2s;
  pointer-events: none;
}
.bench-toast b { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mint); font-size: 0.75rem; }
.bench-toast.is-on { transform: none; opacity: 1; }
@media (max-width: 719px) {
  .bench-toast { right: 12px; bottom: 64px; }
}

/* ---------- "Watch it work": three scenes on one stage (scenes.js) ---------- */

.scenes-head { margin-inline: auto; text-align: center; }
.scene-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto clamp(20px, 3vw, 32px);
}
.scene-tab {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1px;
  min-width: 170px;
  padding: 10px 16px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font: inherit;
  text-align: left;
  color: var(--ink-700);
  cursor: pointer;
  transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.scene-tab b { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.scene-tab span { font-size: 0.8rem; color: var(--ink-500); }
.scene-tab:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.scene-tab.is-current { background: var(--ink); box-shadow: 0 10px 26px -12px rgba(127, 60, 232, 0.6); }
.scene-tab.is-current b { color: #fff; }
.scene-tab.is-current span { color: var(--violet-soft); }
.scene-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--violet-bright);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  opacity: 0;
}
.scene-tab.is-current .scene-progress { opacity: 1; }

.scene-screen {
  container-type: inline-size;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(6px, 1vw, 12px);
  border-radius: clamp(14px, 2vw, 24px);
  background: linear-gradient(160deg, #1B1433, var(--ink));
  box-shadow: 0 50px 120px -40px rgba(146, 81, 247, 0.55);
}
.scene-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: clamp(8px, 1.4vw, 14px);
  font-size: 10px;
  font-size: 1.6cqw;
  line-height: 1.35;
  color: var(--ink-800);
  user-select: none;
  background:
    radial-gradient(40% 55% at 18% 30%, rgba(201, 184, 255, 0.95), rgba(201, 184, 255, 0) 70%),
    radial-gradient(45% 60% at 85% 75%, rgba(169, 200, 255, 0.95), rgba(169, 200, 255, 0) 70%),
    linear-gradient(160deg, #EFE2F9, #DCE6FF);
}
.scene-stage * { box-sizing: border-box; }
.scene-stage p { margin: 0; }
.scene {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s ease, visibility 0s 0.45s;
}
.scene.is-current { visibility: visible; opacity: 1; transition: opacity 0.45s ease; }
.scene-screen.is-instant * { transition: none !important; }
.scene-caption { max-width: 1040px; margin: 18px auto 0; text-align: center; font-size: var(--step--1); color: var(--ink-700); min-height: 3.2em; }

.scene-keys { position: absolute; z-index: 8; left: 50%; bottom: 1.4em; display: flex; gap: 0.4em; transform: translateX(-50%); }
.scene-keys span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4em;
  height: 2.4em;
  padding: 0 0.6em;
  border-radius: 0.6em;
  background: rgba(6, 1, 15, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 1.05em;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0.8em 1.6em -0.6em rgba(6, 1, 15, 0.6);
  animation: scene-key 0.35s var(--ease) both;
}
.scene-keys span:nth-child(2) { animation-delay: 0.07s; }
.scene-keys span:nth-child(3) { animation-delay: 0.14s; }
@keyframes scene-key { 0% { transform: translateY(0.6em) scale(0.6); } 60% { transform: translateY(-0.1em) scale(1.04); } 100% { transform: none; } }
.scene-stage .demo-cursor { width: 1.5em; height: 1.5em; z-index: 9; }
.scene-stage .demo-ripple { z-index: 8; }
/* Crosshair while Scoop is selecting. */
.demo-cursor.is-cross svg { opacity: 0; }
.demo-cursor.is-cross::before, .demo-cursor.is-cross::after { content: ""; position: absolute; background: var(--ink); box-shadow: 0 0 0 1px #fff; }
.demo-cursor.is-cross::before { left: -0.6em; right: -0.6em; top: 0; height: 1.5px; }
.demo-cursor.is-cross::after { top: -0.6em; bottom: -0.6em; left: 0; width: 1.5px; }
.demo-cursor.is-hidden { opacity: 0; }

/* Shared window chrome inside scenes. */
.cl-app, .sp-slide, .pl-page {
  position: absolute;
  overflow: hidden;
  border-radius: 0.8em;
  background: #fff;
  box-shadow: 0 0.2em 0.6em rgba(6, 1, 15, 0.08), 0 2em 4em -1.5em rgba(61, 90, 241, 0.35);
}
.cl-bar { display: flex; align-items: center; gap: 0.45em; height: 2em; padding: 0 0.9em; background: #F4F5F8; border-bottom: 1px solid var(--hairline); font-size: 0.75em; color: var(--ink-500); }
.cl-bar i { width: 0.75em; height: 0.75em; border-radius: 50%; background: #FF5F57; }
.cl-bar i:nth-child(2) { background: #FEBC2E; }
.cl-bar i:nth-child(3) { background: #28C840; }
.cl-bar span { margin-left: 0.6em; }
.cl-url { flex: 1; margin-right: 2em; padding: 0.2em 0.8em; border-radius: 0.5em; background: #fff; text-align: center; }

/* Collect */
.cl-world {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200%;
  transform: translateX(var(--pan, 0));
  transition: transform 1s cubic-bezier(0.65, 0, 0.25, 1);
}
.cl-app { top: 3em; width: 25em; height: 27em; }
.cl-article { left: 3em; }
.cl-browser { left: 31em; }
.cl-photos { left: 59em; }
.cl-body { padding: 1.3em 1.5em; display: grid; gap: 0.7em; }
.cl-kicker { font-size: 0.75em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet); }
.cl-h { font-family: var(--font-display); font-weight: 700; font-size: 1.5em; line-height: 1.1; color: var(--ink); }
.cl-line { height: 0.55em; border-radius: 0.3em; background: #ECEEF4; }
.cl-line.short { width: 60%; }
.cl-pick { position: relative; justify-self: start; padding: 0.15em 0.3em; font-size: 1.1em; font-weight: 600; color: var(--ink); }
.cl-link { font-family: var(--font-mono); font-size: 0.85em; font-weight: 500; color: #2F6FD6; }
.cl-sel { position: absolute; inset: 0; z-index: -1; border-radius: 0.2em; background: rgba(127, 60, 232, 0.24); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.7s cubic-bezier(0.45, 0, 0.55, 1); }
.cl-pick { isolation: isolate; }
.cl-pick.is-on .cl-sel, .cl-hex.is-on .cl-sel { transform: scaleX(1); }
.cl-hero { height: 8em; border-radius: 0.6em; background: linear-gradient(135deg, #7F3CE8, #B89CD8); }
.cl-chips { display: flex; align-items: center; gap: 0.6em; }
.cl-swatch { width: 2em; height: 2em; border-radius: 0.5em; background: #7F3CE8; box-shadow: inset 0 0 0 1px rgba(6, 1, 15, 0.1); }
.cl-hex { position: relative; isolation: isolate; padding: 0.15em 0.3em; font-family: var(--font-mono); font-size: 0.95em; font-weight: 600; color: var(--ink); }
.cl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; padding: 1em; }
.cl-grid span { aspect-ratio: 1; border-radius: 0.5em; background: linear-gradient(135deg, #DDE4F2, #F1F3F8); transition: box-shadow 0.3s; }
.cl-grid span:nth-child(4) { background: linear-gradient(135deg, #F4E4C8, #C99A55); }
.cl-grid span:nth-child(6) { background: linear-gradient(135deg, #DBF3E6, #6FCFA1); }
.cl-photo { background: url("/assets/media/films/colours-640.jpg") center / cover !important; }
.cl-photo.is-on { box-shadow: 0 0 0 0.25em var(--violet-bright); }

.cl-stack {
  position: absolute;
  z-index: 3;
  top: 1.6em;
  right: 1.6em;
  bottom: 1.6em;
  width: 16em;
  padding: 0.9em;
  border-radius: 1.2em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(247, 249, 252, 0.4));
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 0.5px rgba(6, 1, 15, 0.12), 0 1.6em 3.6em -1.4em rgba(6, 1, 15, 0.38);
}
.cl-stack-head { display: flex; align-items: center; gap: 0.4em; margin-bottom: 0.7em !important; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.cl-stack-head b { margin-left: auto; min-width: 1.6em; padding: 0.1em 0.5em; border-radius: 999px; background: var(--violet); color: #fff; font-size: 0.8em; text-align: center; transition: transform 0.25s var(--ease); }
.cl-stack-head b.is-bump { transform: scale(1.3); }
.cl-mark { width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0.5em rgba(127, 60, 232, 0.6); }
.cl-cards { display: grid; gap: 0.5em; margin: 0; padding: 0; list-style: none; }
.cl-card {
  display: grid;
  gap: 0.2em;
  padding: 0.55em 0.65em;
  border-radius: 0.7em;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hairline), 0 0.3em 0.8em -0.4em rgba(6, 1, 15, 0.2);
  animation: cl-drop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.cl-card small { font-size: 0.7em; font-weight: 700; color: var(--violet); }
.cl-card span { font-size: 0.8em; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-card .cl-dot { display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.35em; vertical-align: -0.1em; border-radius: 0.2em; background: #7F3CE8; }
.cl-card .cl-thumb { height: 3.2em; border-radius: 0.4em; background: url("/assets/media/films/colours-640.jpg") center / cover; }
@keyframes cl-drop { 0% { transform: translateY(-1.2em) scale(0.9); opacity: 0; } 100% { transform: none; opacity: 1; } }

.cl-shelf {
  position: absolute;
  z-index: 6;
  left: 1.2em;
  right: 1.2em;
  bottom: 1.2em;
  padding: 1em 1.2em 1.2em;
  border-radius: 1.4em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(247, 249, 252, 0.35));
  -webkit-backdrop-filter: blur(18px) saturate(185%);
  backdrop-filter: blur(18px) saturate(185%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 0.5px rgba(6, 1, 15, 0.14), 0 1.6em 3.6em -1.4em rgba(6, 1, 15, 0.38);
  transform: translateY(130%);
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.cl-shelf.is-on { transform: none; }
.cl-shelf-kc { display: inline-block; margin-bottom: 0.7em; padding: 0.15em 0.5em; border-radius: 0.3em; background: var(--violet-wash); box-shadow: inset 0 0 0 1px var(--violet-soft); font-family: var(--font-mono); font-size: 0.75em; color: var(--violet); }
.cl-shelf-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8em; }
.cl-shelf-row .cl-card { min-height: 5em; align-content: start; }
.cl-shelf-row .cl-card:first-child { box-shadow: inset 0 0 0 1.5px var(--violet), 0 0.6em 1.4em -0.6em rgba(127, 60, 232, 0.6); }
.cl-shelf-row .cl-card:nth-child(2) { animation-delay: 0.06s; }
.cl-shelf-row .cl-card:nth-child(3) { animation-delay: 0.12s; }
.cl-shelf-row .cl-card:nth-child(4) { animation-delay: 0.18s; }

/* Scoop */
.sp-slide { left: 50%; top: 50%; width: 46em; height: 28em; transform: translate(-50%, -54%); padding: 2.6em 3em; display: grid; align-content: center; gap: 1.6em; }
.sp-eyebrow { font-size: 0.85em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet); }
.sp-title { font-family: var(--font-display); font-weight: 700; font-size: 2.3em; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); justify-self: start; }
.sp-row { display: flex; align-items: center; gap: 1.4em; }
.sp-qr { width: 7em; height: 7em; border-radius: 0.6em; box-shadow: 0 0 0 1px var(--hairline), 0 0.6em 1.4em -0.8em rgba(6, 1, 15, 0.35); }
.sp-caption { font-size: 1em; color: var(--ink-500); }
.sp-dim { position: absolute; inset: 0; z-index: 2; background: rgba(6, 1, 15, 0.28); opacity: 0; transition: opacity 0.35s; }
.sp-dim.is-on { opacity: 1; }
.sp-box {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: var(--w, 0);
  height: var(--h, 0);
  transform: translate(var(--x, 0), var(--y, 0));
  border: 2px solid var(--violet-bright);
  border-radius: 0.3em;
  background: rgba(146, 81, 247, 0.08);
  box-shadow: 0 0 0 9999px rgba(6, 1, 15, 0.12);
  opacity: 0;
  overflow: hidden;
  transition: width 0.7s cubic-bezier(0.65, 0, 0.25, 1), height 0.7s cubic-bezier(0.65, 0, 0.25, 1), opacity 0.25s;
}
.sp-box.is-on { opacity: 1; }
.sp-box.is-done { border-color: var(--mint); background: rgba(0, 148, 64, 0.1); }
.sp-scan { position: absolute; left: 0; right: 0; top: 0; height: 0.25em; background: linear-gradient(90deg, rgba(146, 81, 247, 0), var(--violet-bright), rgba(146, 81, 247, 0)); box-shadow: 0 0 1em var(--violet-bright); opacity: 0; }
.sp-box.is-scanning .sp-scan { opacity: 1; animation: sp-scan 0.75s ease-in-out; }
@keyframes sp-scan { from { top: 0; } to { top: calc(100% - 0.25em); } }
.sp-hud {
  position: absolute;
  z-index: 4;
  right: 1.6em;
  bottom: 1.6em;
  width: 24em;
  padding: 0.9em 1em;
  border-radius: 1em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(247, 249, 252, 0.55));
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 0.5px rgba(6, 1, 15, 0.14), 0 1.6em 3.6em -1.4em rgba(6, 1, 15, 0.38);
  transform: translateY(calc(100% + 2em));
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.sp-hud.is-on { transform: none; }
.sp-hud-head { display: flex; justify-content: space-between; margin-bottom: 0.4em !important; font-size: 0.8em; color: var(--ink-500); }
.sp-hud-head b { color: var(--ink); }
.sp-hud-head span { color: var(--mint-ink); font-weight: 600; }
.sp-hud-text { white-space: pre-wrap; font-size: 0.95em; font-weight: 500; color: var(--ink); }
.sp-hud-text .is-new { animation: rv-fade 0.4s var(--ease) both; color: var(--violet-press); }

/* Palette */
.pl-page { left: 2.4em; top: 4.5em; width: 34em; display: flex; flex-direction: column; }
.pl-photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pl-loupe {
  position: absolute;
  z-index: 9;
  left: 0;
  top: 0;
  width: 6.4em;
  height: 6.4em;
  margin: -3.2em 0 0 -3.2em;
  border-radius: 50%;
  background: var(--c, #fff);
  box-shadow: 0 0 0 0.25em #fff, 0 0 0 0.35em rgba(6, 1, 15, 0.2), 0 1em 2em -0.6em rgba(6, 1, 15, 0.5);
  transform: translate(var(--x, 0), var(--y, 0)) scale(0.4);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.25, 1), opacity 0.25s, background-color 0.25s;
}
.pl-loupe.is-on { opacity: 1; transform: translate(var(--x, 0), var(--y, 0)); }
.pl-grid { position: absolute; inset: 0; border-radius: 50%; background-image: linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px); background-size: 0.8em 0.8em; }
.pl-grid::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.8em; height: 0.8em; margin: -0.4em 0 0 -0.4em; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(6, 1, 15, 0.5); }
.pl-hex { position: absolute; left: 50%; top: calc(100% + 0.6em); padding: 0.15em 0.5em; border-radius: 0.4em; background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: 0.75em; white-space: nowrap; transform: translateX(-50%); }
.pl-panel {
  position: absolute;
  z-index: 3;
  top: 1.6em;
  right: 1.6em;
  bottom: 1.6em;
  width: 23em;
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  border-radius: 1.2em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(247, 249, 252, 0.45));
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 0.5px rgba(6, 1, 15, 0.12), 0 1.6em 3.6em -1.4em rgba(6, 1, 15, 0.38);
}
.pl-name { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-weight: 700; font-size: 1.2em; color: var(--ink); }
.pl-name span { font-family: var(--font-body); font-size: 0.65em; font-weight: 500; color: var(--ink-500); }
.pl-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5em; min-height: 6.6em; }
.pl-swatch { display: grid; gap: 0.25em; animation: cl-drop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.pl-swatch i { height: 4em; border-radius: 0.6em; background: var(--c); box-shadow: inset 0 0 0 1px rgba(6, 1, 15, 0.1); }
.pl-swatch b { font-size: 0.75em; color: var(--ink); }
.pl-swatch span { font-family: var(--font-mono); font-size: 0.65em; color: var(--ink-500); }
.pl-contrast {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1em 0.7em;
  align-items: center;
  padding: 0.6em 0.7em;
  border-radius: 0.8em;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 0.85em;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.35s, transform 0.35s var(--ease);
}
.pl-contrast.is-on { opacity: 1; transform: none; }
.pl-pair { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 2.6em; height: 2.6em; border-radius: 0.5em; background: #F7DF92; }
.pl-pair i { display: none; }
.pl-pair b { color: #6C60C3; font-family: var(--font-display); font-size: 1.2em; }
.pl-contrast em { font-style: normal; font-weight: 600; color: var(--mint-ink); }
.pl-code {
  flex: 1;
  margin: 0;
  padding: 0.7em 0.8em;
  border-radius: 0.8em;
  background: var(--ink);
  color: #D9CAFE;
  font-family: var(--font-mono);
  font-size: 0.8em;
  line-height: 1.55;
  white-space: pre;
  overflow: hidden;
}
.pl-code:empty { background: transparent; }

/* Phones: the stage turns portrait and each scene stacks. */
@container (max-width: 600px) {
  .scene-stage { aspect-ratio: 4 / 5; font-size: 2.5cqw; }
  .cl-app { top: 1.6em; width: 22em; height: 20em; }
  .cl-article { left: 1.6em; }
  .cl-browser { left: 26em; }
  .cl-photos { left: 50.4em; }
  .cl-stack { top: auto; left: 1.2em; right: 1.2em; bottom: 1.2em; width: auto; height: 15em; }
  .cl-cards { grid-template-columns: repeat(2, 1fr); }
  .cl-shelf-row { grid-template-columns: repeat(2, 1fr); }
  .sp-slide { width: 34em; height: auto; top: 40%; padding: 2em; }
  .sp-title { font-size: 1.9em; }
  .sp-hud { left: 1.2em; right: 1.2em; width: auto; bottom: 1.2em; }
  .pl-page { left: 1.4em; right: 1.4em; top: 1.4em; width: auto; }
  .pl-panel { top: auto; left: 1.2em; right: 1.2em; bottom: 1.2em; width: auto; height: 17.5em; }
  .pl-code { display: none; }
}
@media (max-width: 600px) {
  .scene-tab { min-width: 0; flex: 1 1 30%; padding: 8px 10px 10px; }
  .scene-tab span { display: none; }
}

/* ---------- Rewrite scene: chat -> ✨ Make Technical -> doc ---------- */

.rw-chat, .rw-doc {
  position: absolute;
  overflow: hidden;
  border-radius: 0.8em;
  background: #fff;
  box-shadow: 0 0.2em 0.6em rgba(6, 1, 15, 0.08), 0 2em 4em -1.5em rgba(61, 90, 241, 0.35);
}
.rw-chat { left: 2.5em; top: 2.4em; width: 30em; height: 21em; }
.rw-doc { left: 34.5em; top: 4.6em; width: 25.5em; height: 22em; }
.rw-chat-body { display: grid; gap: 1.1em; padding: 1.1em 1.3em; }
.rw-channel { font-weight: 700; font-size: 0.9em; color: var(--ink); padding-bottom: 0.6em !important; border-bottom: 1px solid var(--hairline-2); }
.rw-msg { display: flex; gap: 0.8em; align-items: flex-start; }
.rw-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 0.5em;
  background: #2F6FD6;
  color: #fff;
  font-weight: 700;
  font-size: 0.9em;
}
.rw-avatar.is-raf { background: var(--violet); }
.rw-who { font-size: 0.8em; color: var(--ink-500); }
.rw-who b { color: var(--ink); margin-right: 0.3em; }
.rw-said, .rw-reply { font-size: 0.95em; line-height: 1.45; color: var(--ink-800); }
.rw-said { position: relative; isolation: isolate; padding: 0.1em 0.2em; margin-left: -0.2em !important; }
.rw-said.is-on .cl-sel { transform: scaleX(1); }

.rw-doc-body { display: grid; gap: 0.75em; padding: 1.4em 1.6em; }
.rw-doc-h { font-family: var(--font-display); font-weight: 700; font-size: 1.6em; line-height: 1.1; color: var(--ink); }
.rw-doc-h2 { font-weight: 700; font-size: 0.95em; color: var(--ink); margin-top: 0.4em !important; }
.rw-doc-slot {
  position: relative;
  min-height: 1.5em;
  padding: 0.25em 0.4em;
  margin: 0 -0.4em !important;
  border-radius: 0.35em;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--ink);
  transition: background-color 1.2s var(--ease);
}
.rw-doc-slot::before { content: "\2022"; margin-right: 0.5em; color: var(--ink-400); }
.rw-doc-slot.is-flash { background: rgba(127, 60, 232, 0.18); transition: none; }
.rw-caret { display: none; width: 1.5px; height: 1.1em; vertical-align: -0.2em; background: var(--violet); animation: sc-blink 1s steps(1) infinite; }
.rw-doc-slot.is-focus:not(.is-filled) .rw-caret { display: inline-block; }

.rw-shelf {
  position: absolute;
  z-index: 5;
  left: 1.5em;
  right: 1.5em;
  bottom: 1.2em;
  height: 18em;
  padding: 0.9em 1.2em 1.1em;
  border-radius: 1.2em;
  transform: translateY(120%);
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.rw-shelf.is-on { transform: none; }
.rw-shelf-head { display: flex; align-items: center; gap: 0.45em; margin-bottom: 0.8em !important; font-family: var(--font-display); font-weight: 700; font-size: 0.95em; color: var(--ink); }
.rw-kc { margin-left: auto; padding: 0.1em 0.5em; border-radius: 0.3em; background: var(--violet-wash); box-shadow: inset 0 0 0 1px var(--violet-soft); font-family: var(--font-mono); font-size: 0.75em; font-weight: 500; color: var(--violet); }
.rw-row { display: flex; gap: 1em; align-items: stretch; }
.rw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 17em;
  height: 14em;
  flex: none;
  padding: 0.8em;
  border-radius: 0.9em;
  background: #EFE7FD;
  box-shadow: inset 0 0 0 1.5px var(--violet), 0 0.6em 1.4em -0.6em rgba(127, 60, 232, 0.55);
  transition: background-color 0.3s;
}
.rw-card.is-muted { width: 14em; background: #F5F2FB; box-shadow: inset 0 0 0 1px var(--hairline); opacity: 0.85; }
.rw-card-head { display: flex; align-items: center; gap: 0.4em; }
.rw-tag { padding: 0.2em 0.6em; border-radius: 999px; background: rgba(102, 110, 136, 0.12); font-size: 0.7em; font-weight: 700; color: var(--ink-500); }
.rw-tag.is-link { background: rgba(47, 111, 214, 0.1); color: #2F6FD6; }
.rw-tag.is-colour { background: rgba(91, 75, 214, 0.1); color: #5B4BD6; }
.rw-icons { margin-left: auto; display: flex; gap: 0.2em; }
.rw-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  font-size: 0.8em;
  color: var(--ink-500);
}
.rw-wand { background: var(--violet-soft); }
.rw-text {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0.45em 0.55em;
  border-radius: 0.5em;
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.8em;
  line-height: 1.4;
  color: var(--ink);
}
.rw-text .cl-dot { display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.35em; vertical-align: -0.1em; border-radius: 0.2em; background: #7F3CE8; }
.rw-working, .rw-note { display: none; font-size: 0.7em; color: var(--violet-press); font-weight: 600; }
.rw-spark { display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.4em; border-radius: 50%; background: var(--violet-bright); animation: soon-pulse 0.9s ease-in-out infinite; vertical-align: -0.05em; }
.rw-actions { display: flex; gap: 0.4em; }
.rw-actions-edit { display: none; }
.rw-btn { padding: 0.45em 0.85em; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--hairline); font-size: 0.72em; font-weight: 600; color: var(--ink); white-space: nowrap; }
.rw-btn small { font-family: var(--font-mono); opacity: 0.7; }
.rw-btn.is-ink { background: var(--ink); color: #fff; box-shadow: none; }

/* Editing: the card becomes the editor, the text gets a violet frame, Save replaces Paste. */
.rw-card.is-editing { background: #fff; }
.rw-card.is-editing .rw-text { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(127, 60, 232, 0.55); }
.rw-card.is-editing .rw-actions-clip { display: none; }
.rw-card.is-editing .rw-actions-edit { display: flex; }
.rw-card.is-working .rw-working { display: block; }
.rw-card.is-working .rw-text { color: var(--ink-400); }
.rw-card.is-done .rw-note { display: block; }
.rw-card.is-editing .rw-icons { visibility: hidden; }

/* The ✨ menu, as the app lists it (dividers after Expand and Make Technical). */
.rw-menu {
  position: absolute;
  z-index: 6;
  /* In the menu's own em (0.8 of the stage): just right of the card's ✨, opening upward. */
  left: 22.6em;
  bottom: 13.9em;
  width: 15em;
  padding: 0.4em;
  border-radius: 0.7em;
  display: grid;
  font-size: 0.8em;
  visibility: hidden;
  transform: scale(0.6);
  transform-origin: 0 100%;
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2), visibility 0s 0.18s;
}
.rw-menu.is-on { visibility: visible; transform: none; transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2), visibility 0s; }
.rw-menu span { padding: 0.25em 0.6em; border-radius: 0.35em; color: var(--ink); }
.rw-menu span.is-hover { background: var(--violet); color: #fff; }
.rw-menu hr { margin: 0.25em 0.5em; border: 0; border-top: 1px solid rgba(6, 1, 15, 0.12); }
.rw-menu em { padding: 0.2em 0.6em; font-style: normal; font-size: 0.85em; color: var(--ink-500); }

@container (max-width: 600px) {
  .rw-chat { left: 1.4em; right: 1.4em; top: 1.4em; width: auto; height: 17.5em; }
  .rw-doc { left: 1.4em; right: 1.4em; top: 20.4em; width: auto; height: 13em; }
  .rw-shelf { left: 1em; right: 1em; bottom: 1em; height: 19em; }
  .rw-card { width: auto; flex: 1 1 60%; height: 14.5em; }
  .rw-card.is-muted { flex: 1 1 35%; width: auto; }
  .rw-hide-sm { display: none; }
  .rw-menu { left: auto; right: 0.5em; bottom: 9em; }
}

/* Four tabs fit on one row on phones. */
@media (max-width: 600px) {
  .scene-tab { flex: 1 1 22%; padding-inline: 6px; }
  .scene-tab b { font-size: 0.92rem; }
}

/* ---------- Workflows window demo (#workflows): the app's editor, Smart cleaner recipe ---------- */

.workflows-demo { overflow: hidden; isolation: isolate; padding-block: clamp(64px, 8vw, 96px); border-top: 1px solid rgba(217, 202, 254, 0.1); }
.wf-window {
  position: relative;
  max-width: 1120px;
  margin: clamp(40px, 5vw, 56px) auto 0;
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink-800);
  box-shadow: 0 50px 120px -40px rgba(146, 81, 247, 0.65), 0 0 0 1px rgba(217, 202, 254, 0.18);
  overflow: hidden;
}
.wf-window .wf-cursor { display: block; }
.wf-body { display: flex; min-height: 0; }
.wf-side { flex: 0 0 236px; padding: 16px; background: var(--surface-2); border-right: 1px solid var(--hairline); }
.wf-recipes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wf-recipe {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: box-shadow 0.2s;
}
.wf-recipe.is-picked { box-shadow: inset 0 0 0 1.5px var(--violet); }
.wf-recipe.is-hover { box-shadow: inset 0 0 0 1px var(--violet-soft); }
.wf-when { font-size: 0.7rem; color: var(--ink-500); }

.wf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--hairline-2); }
.wf-head > div { display: flex; align-items: center; gap: 10px; }
.wf-head h3 { margin: 0; font-size: 1.1rem; color: var(--ink); letter-spacing: -0.01em; }
.wf-chip { padding: 3px 9px; border-radius: 999px; background: #FFF4E5; color: #9A5B00; font-size: 0.7rem; font-weight: 700; }
.wf-chip.is-on { background: var(--mint-wash); color: var(--mint-ink); }
.wf-onoff { font-size: 0.75rem; color: var(--ink-500); }
.wf-toggle { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #D5D9E3; transition: background-color 0.25s; }
.wf-toggle i { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(6, 1, 15, 0.3); transition: transform 0.25s var(--ease); }
.wf-toggle.is-on { background: var(--mint); }
.wf-toggle.is-on i { transform: translateX(14px); }
.wf-test { padding: 7px 14px; border-radius: 8px; background: var(--violet); color: #fff; font-size: 0.8rem; font-weight: 600; transition: transform 0.15s, box-shadow 0.15s; }
.wf-test.is-pressed { transform: scale(0.94); box-shadow: 0 0 0 4px var(--violet-softer); }
.wf-review {
  max-height: 0;
  margin: 0 !important;
  padding: 0 20px;
  overflow: hidden;
  background: #FFF8EC;
  border-bottom: 1px solid transparent;
  font-size: 0.8rem;
  color: #7A4A00;
  transition: max-height 0.4s var(--ease), padding 0.4s var(--ease), border-color 0.4s;
}
.wf-review.is-on { max-height: 60px; padding: 9px 20px; border-bottom-color: #F5DDB1; }
.wf-samples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 20px 0; }
.wf-samples-label { margin-right: 4px; font-size: 0.72rem; color: var(--ink-500); }
.wf-pill { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--hairline); font-size: 0.72rem; font-weight: 500; color: var(--ink); }
.wf-pill.is-on { background: var(--violet-soft); box-shadow: inset 0 0 0 1px rgba(127, 60, 232, 0.35); color: var(--violet); font-weight: 700; }

/* The canvas is 72 x 36 of its own ems, so blocks keep their places at any width. */
.wf-canvas {
  container-type: inline-size;
  position: relative;
  margin: 10px 14px 0;
  aspect-ratio: 2 / 1;
  border-radius: 12px;
  background-color: var(--canvas);
  background-image: radial-gradient(circle, var(--hairline) 1px, transparent 1.2px);
  background-size: 16px 16px;
  overflow: hidden;
}
.wf-canvas > * { font-size: calc(100cqw / 72); }
.wf-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--ink-400); font-size: calc(100cqw / 52) !important; transition: opacity 0.3s; }
.wf-canvas.is-built .wf-empty { opacity: 0; }
.wf-wires { position: absolute; left: 1em; top: 1em; width: 70em; height: 34em; overflow: visible; }
.wf-wires path {
  fill: none;
  stroke: #B9BFCF;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.5s var(--ease), opacity 0.3s, stroke 0.3s;
}
.wf-wires path.is-in { stroke-dashoffset: 0; }
/* The dash "draw-in" doesn't hold with non-scaling strokes, so wires are hidden until their blocks are in. */
.wf-wires path { opacity: 0; }
.wf-wires path.is-in { opacity: 1; }
.wf-wires path.is-run { stroke: var(--violet-bright); stroke-width: 3; stroke-dasharray: 0.03 0.02; animation: wf-march 0.6s linear infinite; }
.wf-wires path.is-dim { opacity: 0.3; }
@keyframes wf-march { to { stroke-dashoffset: -0.05; } }

.wf-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.7em;
  width: 13em;
  height: 4.4em;
  padding: 0 0.8em;
  border-radius: 0.9em;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hairline), 0 0.3em 0.9em -0.4em rgba(61, 90, 241, 0.35);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.3s;
}
.wf-node.is-in { opacity: 1; transform: none; }
.wf-node.is-run { box-shadow: inset 0 0 0 0.15em var(--violet), 0 0.6em 1.4em -0.5em rgba(127, 60, 232, 0.6); }
.wf-node.is-dim { opacity: 0.4; }
.wf-ic {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 0.6em;
  background: var(--violet-softer);
  color: var(--violet);
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 700;
}
.is-trigger .wf-ic { background: rgba(47, 111, 214, 0.12); color: #2F6FD6; }
.is-split .wf-ic { background: rgba(102, 110, 136, 0.14); color: var(--ink-700); }
.is-action .wf-ic { background: var(--mint-wash); color: var(--mint-ink); }
.wf-node-text { display: grid; min-width: 0; }
.wf-node-text b { font-size: 0.95em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-node-text small { font-family: var(--font-mono); font-size: 0.78em; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.3em; }
.wf-node-text small.is-new { color: var(--violet-press); }
.wf-port { position: absolute; top: 50%; width: 0.75em; height: 0.75em; margin-top: -0.375em; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 0.15em #B9BFCF; }
.wf-in { left: -0.375em; }
.wf-out { right: -0.375em; }
.is-trigger .wf-in, .is-action .wf-out { display: none; }

/* Positions (canvas ems), matching the wire paths in index.html plus the 1 em inset. */
[data-wf-node="trigger"] { left: 2em; top: 16.5em; }
[data-wf-node="split"] { left: 17.5em; top: 15em; height: 7.5em; width: 15em; align-items: flex-start; padding-top: 0.7em; }
[data-wf-node="json"] { left: 35.5em; top: 5em; width: 16.5em; }
[data-wf-node="link"] { left: 35.5em; top: 16.5em; width: 16.5em; }
[data-wf-node="text"] { left: 35.5em; top: 28em; width: 16.5em; }
[data-wf-node="replace"] { left: 55em; top: 16.5em; width: 15em; }

.is-split .wf-node-text { width: 8.2em; }
.wf-branches { position: absolute; right: 0; top: 0.6em; width: 5.4em; display: grid; }
.wf-branches span {
  position: relative;
  height: 2.1em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.9em;
  font-size: 0.72em;
  font-weight: 600;
  color: var(--ink-500);
  transition: color 0.3s;
}
.wf-branches span::after { content: ""; position: absolute; right: -0.52em; top: 50%; width: 1.04em; height: 1.04em; margin-top: -0.52em; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 0.2em #B9BFCF; }
.wf-branches span.is-taken { color: var(--violet); }
.wf-branches span.is-taken::after { box-shadow: inset 0 0 0 0.2em var(--violet); background: var(--violet-soft); }

.wf-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 14px; }
.wf-safe { font-size: 0.75rem; font-weight: 600; color: var(--mint-ink); }

/* Phones: the same recipe laid out top to bottom (trigger, split, the three branches side by side,
   then the action) on a portrait canvas 36 ems wide, so every block is readable and nothing is cut
   off. workflows-demo.js swaps the wires' paths to match. */
.wf-scroll { overflow: hidden; }
@media (max-width: 760px) {
  .wf-side { display: none; }
  .wf-head { padding: 12px 14px; }
  .wf-samples { padding-inline: 14px; }
  .wf-hide-sm { display: none; }
  .wf-onoff { display: none; }
  .wf-canvas { margin-inline: 8px; aspect-ratio: 36 / 39.5; }
  .wf-canvas > * { font-size: calc(100cqw / 36); }
  .wf-empty { font-size: calc(100cqw / 26) !important; padding: 0 2em; text-align: center; }
  .wf-wires { left: 0; top: 0; width: 36em; height: 39.5em; }
  .wf-port { display: none; }
  .wf-node { height: 4.4em; padding: 0 0.7em; gap: 0.55em; }
  [data-wf-node="trigger"] { left: 8em; top: 1.5em; width: 20em; }
  [data-wf-node="split"] { left: 4em; top: 9.5em; width: 28em; height: 7.6em; align-items: flex-start; padding-top: 0.8em; }
  .is-split .wf-node-text { width: auto; }
  .wf-branches { left: 0; right: 0; top: auto; bottom: 0.55em; width: auto; grid-template-columns: repeat(3, 1fr); text-align: center; }
  .wf-branches span { position: relative; font-size: 0.8em; }
  .wf-branches span::after { right: auto; left: 50%; top: auto; bottom: -0.95em; margin: 0 0 0 -0.52em; }
  .is-tool { flex-direction: column; justify-content: center; align-items: flex-start; height: 7em; gap: 0.2em; padding: 0.6em 0.7em; }
  .is-tool .wf-ic { width: 1.9em; height: 1.9em; font-size: 0.7em; }
  .is-tool .wf-node-text { width: 100%; }
  .is-tool .wf-node-text b { white-space: normal; font-size: 0.85em; line-height: 1.15; }
  [data-wf-node="json"] { left: 1em; top: 21em; width: 10.6em; }
  [data-wf-node="link"] { left: 12.7em; top: 21em; width: 10.6em; }
  [data-wf-node="text"] { left: 24.4em; top: 21em; width: 10.6em; }
  [data-wf-node="replace"] { left: 8em; top: 33em; width: 20em; }
}
.wf-window.is-instant *, .wf-window.is-instant *::after { transition: none !important; }

/* Phones: Collect shows one app at a time, centred, and crossfades between them. */
@container (max-width: 600px) {
  .cl-world { transform: none; transition: none; width: 100%; }
  .cl-app { left: 1.6em !important; right: 1.6em; width: auto; opacity: 0; transition: opacity 0.45s ease; }
  .cl-app.is-active { opacity: 1; }
}