*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Principle/Apple/Figma-derived premium easing tokens ── */
  --ease:          cubic-bezier(0.23, 1, 0.32, 1);        /* legacy — keep for compat  */
  --ease-enter:    cubic-bezier(0.22, 1, 0.36, 1);        /* expo-out — elements arriving */
  --ease-exit:     cubic-bezier(0.55, 0, 1, 0.45);        /* expo-in  — elements leaving  */
  --ease-move:     cubic-bezier(0.4, 0, 0.2, 1);          /* M3 standard — position shifts */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);     /* overshoot ~5% — snap/pop     */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);        /* GSAP expo.out — scroll-driven */
  /* ── Duration ladder ── */
  --dur-instant:   80ms;
  --dur-fast:      150ms;
  --dur-default:   250ms;
  --dur-moderate:  380ms;
  --dur-slow:      520ms;
  --dur-cinematic: 800ms;
}

html { scroll-behavior: auto; }

body {
  background: #000;
  color: #fff;
  font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-x: none;
  /* Don't use overflow-x:hidden or touch-action restrictions on
     html/body — both break position:sticky descendants, which the
     scroll-driver stage relies on for the iPhone scrub. */
}

/* ── Scroll driver: tall container that pins the stage ─── */
.scroll-driver {
  /* 300vh Phase 1 (video scrub) + 300vh Phase 2 (phone reveal) + 100vh stage + 100vh reading buffer */
  height: 700vh;
  position: relative;
  /* No z-index here — would create a stacking context that traps every
     .pw-panel inside it below sibling sections like .s3-triptych. Rule:
     ALL PANELS OVER ALL CONTENT. Panels enforce that via their own
     z-index in the body's stacking context. */
}

/* ── Sticky stage ─────────────────────────────────────── */
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
}

/* ── Full-bleed scroll-scrubbed video ────────────────── */
.stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ── Lens vignette overlay ───────────────────────────── */
.lens-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  /* radial gradient: transparent center → black edges */
  background: radial-gradient(ellipse at center,
    transparent 0%,
    transparent 30%,
    rgba(0,0,0,0.6) 70%,
    rgba(0,0,0,0.95) 100%
  );
  filter: blur(8px);
}

/* ── Lock-up text ─────────────────────────────────────── */
.lockup {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

.lockup__super {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.72);
  margin-bottom: 12px;
}

.lockup__headline {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
}

/* ── Scroll hint ─────────────────────────────────────── */
.scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 4;
  opacity: 1;
  transition: opacity 0.4s var(--ease);
}

.scroll-hint span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.scroll-hint__line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,.4), transparent);
  animation: scrollPulse 2s var(--ease) infinite;
}

@keyframes scrollPulse {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}

/* ── Phone crossfade + scroll-up section ─────────────── */
.phone-section {
  height: 350vh;
  position: relative;
  background: #000;
}

.phone-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Headline revealed as phone scrolls up */
.phone-headline {
  position: absolute;
  top: 38%;
  left: 0;
  right: 0;
  padding: 0 60px;
  text-align: center;
  z-index: 1;
  opacity: 0;
}

.phone-headline__h2 {
  font-size: clamp(48px, 6.5vw, 96px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 auto 24px;
  max-width: 820px;
}

.phone-headline__body {
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255,255,255,.65);
  max-width: 540px;
  margin: 0 auto 32px;
}

.phone-headline__ctas {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
}

.phone-headline__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.022em;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.phone-headline__cta:hover { opacity: 0.72; }

.phone-headline__cta::after {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border: 1.5px solid rgba(255,255,255,0.7);
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolyline points='3.5,2 7,5 3.5,8' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* Phone wrapper — JS targets this for width / transform / opacity.
   drop-shadow lives here so it is computed AFTER the inner img's mask:
   the shadow follows the phone silhouette, not the bounding box. */
.phone-image {
  position: absolute;
  width: 72vw;            /* no-JS fallback only; JS overrides with px value */
  left: 0;
  top: 0;
  z-index: 2;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 48px 96px rgba(0, 0, 0, 0.60));
}

/* Inner img — mask applied here. Width fills wrapper; height follows natural ratio. */
.phone-image__img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: url('assets/phone_endframe_mask.svg');
          mask-image: url('assets/phone_endframe_mask.svg');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* ═══════════════════════════════════════════════════════════
   PANEL SYSTEM — Swiss minimalist glass with chromatic refraction
   ═══════════════════════════════════════════════════════════ */

/* ── Shared panel shell ─────────────────────────────────── */
/* RULE: ALL PANELS OVER ALL CONTENT. .pw-panel always paints
   above every page section, modal, and overlay. Don't introduce
   any z-index >= this value on page content. */
.pw-panel {
  position: fixed;
  top: 64px;
  right: 20px;
  z-index: 2147483000;  /* near max int — guarantees on top of everything */
  width: 320px;
  border-radius: 14px;
  overflow: hidden;
  /* Glass base */
  background: rgba(7, 8, 13, 0.72);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  /* Chromatic border: gradient edge simulates refracted light */
  border: 0.5px solid rgba(255,255,255,0.12);
  box-shadow:
    0 0 0 0.5px rgba(110, 140, 255, 0.15),
    0 2px 1px rgba(0,0,0,0.5),
    0 20px 60px rgba(0,0,0,0.7),
    inset 0 0.5px 0 rgba(255,255,255,0.14);
  /* Transitions removed — panel states are scroll-driven (CSS transition lags scroll) */
}

/* Chromatic refraction pseudo-border */
.pw-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(
    130deg,
    rgba(100, 150, 255, 0.07) 0%,
    rgba(255,255,255,0.02) 35%,
    rgba(255,80,180,0.03) 70%,
    rgba(60,220,255,0.05) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Mouse-tracked glass rim — same hot-spot treatment as AI bar */
.pw-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  background: radial-gradient(
    ellipse 160px 80px at var(--rim-x, 50%) var(--rim-y, 50%),
    rgba(210, 248, 255, 0.38) 0%,
    rgba(56,  210, 255, 0.18) 28%,
    rgba(120, 80,  255, 0.07) 52%,
    transparent 72%
  );
  padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.pw-panel--hovered::after { opacity: 1; }

/* Panel switch — opacity/pointer-events only; transform driven by JS */
.pw-panel--hidden {
  opacity: 0;
  pointer-events: none;
}

/* WebGL chromatic glass canvas inside the panel */
.pw-panel__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.55;
  mix-blend-mode: screen;
  border-radius: 14px;
  pointer-events: none;
}

/* Inner wrapper sits above WebGL canvas */
.pw-panel__inner {
  position: relative;
  z-index: 2;
}

/* ── Panel header ───────────────────────────────────────── */
.pw-panel__hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px 10px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.pw-panel__hdr:active { cursor: grabbing; }

.pw-panel__title {
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
/* Editable asset-name title — looks like a label until you click the pen */
.pw-panel__title--input {
  background: transparent;
  border: 0.5px solid transparent;
  border-radius: 4px;
  padding: 2px 4px;
  outline: none;
  max-width: 180px;
  text-overflow: ellipsis;
}
.pw-panel__title--input[readonly] {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.pw-panel__title--input:not([readonly]) {
  background: rgba(255,255,255,0.06);
  border-color: rgba(56,210,255,0.42);
  color: #fff;
  cursor: text;
}
/* Pen icon — sits next to the title, click to enter edit mode */
.pw-panel__edit {
  width: 18px; height: 18px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.32);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.pw-panel__edit:hover { color: rgba(56,210,255,0.95); background: rgba(255,255,255,0.05); }

.pw-icon-btn {
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  color: rgba(255,255,255,0.3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.pw-icon-btn:hover { color: rgba(255,255,255,0.8); }

/* ── Panel body ─────────────────────────────────────────── */
.pw-panel__body {
  padding: 8px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pw-panel__body.hidden { display: none; }

/* Alignment panel body — direct padding (no pw-sec wrapper) */
#tweakBody {
  padding: 8px 14px 36px;
  gap: 0;
}
#tweakBody .pw-row {
  margin-bottom: 4px;
  min-height: 26px;
}
#tweakBody .pw-debug {
  margin-top: 6px;
  padding: 5px 0 2px;
}
#tweakBody .pw-actions {
  margin-top: 6px;
}
/* Non-alignment panel bodies don't carry horizontal padding. The
   actions row gets its own inset matching the row content above —
   8px on each side so the Reset/Copy pair has the same width
   proportionality as the rest of the panel rows. */
#ctrlBody .pw-actions,
#shadowBody .pw-actions,
#seqBody .pw-actions {
  padding: 6px 14px 20px;
  margin-top: 6px;
}

/* Scrollable content panel body */
.pw-panel__body--scroll {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
  /* Bottom padding keeps actions buttons above the corner-hatch zone */
  padding-bottom: 36px;
}
.pw-panel__body--scroll::-webkit-scrollbar { width: 3px; }
.pw-panel__body--scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* ── Section ────────────────────────────────────────────── */
.pw-sec {
  padding: 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.pw-sec:last-of-type { border-bottom: none; }

/* Section header — always visible, acts as collapse toggle */
.pw-sec__hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px 6px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.pw-sec__hdr:hover .pw-sec__label { color: rgba(255,255,255,0.45); }

.pw-sec__label {
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.22);
  transition: color 0.15s;
}

/* Section toggle chevron */
.pw-sec__tog {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 9px;
  color: rgba(255,255,255,0.18);
  transition: color 0.15s, transform 0.2s;
  flex-shrink: 0;
}
.pw-sec--collapsed .pw-sec__tog { transform: rotate(-90deg); color: rgba(255,255,255,0.12); }
.pw-sec__hdr:hover .pw-sec__tog { color: rgba(255,255,255,0.4); }

/* Section collapsible body */
.pw-sec__body {
  padding: 0 14px 10px;
  overflow: hidden;
  max-height: 400px;  /* CSS default for open state — no JS measurement needed */
  transition: max-height 0.25s cubic-bezier(0.23,1,0.32,1),
              opacity    0.2s  cubic-bezier(0.23,1,0.32,1),
              padding    0.2s  cubic-bezier(0.23,1,0.32,1);
}
.pw-sec--collapsed .pw-sec__body {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

/* Comp-selection → panel section flash */
@keyframes pw-sec-flash {
  0%   { background: rgba(56, 210, 255, 0.13); }
  55%  { background: rgba(56, 210, 255, 0.06); }
  100% { background: transparent; }
}
.pw-sec--focused .pw-sec__hdr {
  animation: pw-sec-flash 1.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.pw-sec--focused .pw-sec__label {
  color: rgba(56, 210, 255, 0.70) !important;
  text-shadow: 0 0 10px rgba(56, 210, 255, 0.35);
}

/* Comp element selection ring */
.comp-selected {
  outline: 1.5px solid rgba(56, 210, 255, 0.72);
  outline-offset: 5px;
  border-radius: 3px;
}

/* Direct inline editing on phone overlay */
[contenteditable="true"].comp-selected {
  outline: 1.5px solid rgba(255, 200, 80, 0.85);
  outline-offset: 4px;
  cursor: text;
  caret-color: rgba(255, 200, 80, 0.9);
}

/* ── Row (slider + label + value + copy) ────────────────── */
/* Unified 6-col grid so SLIDER (1fr), NUM, UNIT, COPY, KF
   line up across every row regardless of which controls are present. */
.pw-row {
  display: grid;
  grid-template-columns: 52px 1fr 44px 22px 22px 18px;
  /*                    KEY  CTRL NUM  UNIT CP   KF  */
  align-items: center;
  position: relative;
  gap: 0 6px;
  min-height: 22px;
  margin-bottom: 4px;
}
.pw-row:last-child { margin-bottom: 0; }
/* Variants: SELECT/INPUT/SEG fill the SLIDER+NUM+UNIT span so COPY+KF still align */
.pw-row--select > .pw-select,
.pw-row--text   > .pw-textinput { grid-column: 2 / 5; }
.pw-row--seg    > .pw-seg       { grid-column: 2 / 6; }

.pw-key {
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.32);
  white-space: nowrap;
  text-transform: uppercase;
}

.pw-slider-wrap {
  display: flex;
  align-items: center;
}

.pw-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  border-radius: 100px;
  background: rgba(255,255,255,0.07);
  border: 0.5px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.35),
    inset 0 -0.5px 0 rgba(255,255,255,0.05);
  outline: none;
  cursor: pointer;
}
/* Round track caps */
.pw-range::-webkit-slider-runnable-track {
  border-radius: 100px;
}
.pw-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.97);
  box-shadow:
    0 2px 7px rgba(0,0,0,0.55),
    0 0 0 0.5px rgba(255,255,255,0.28),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.10);
  cursor: pointer;
  /* Rolloff: slow spring — hover-in overrides with snappy timing */
  transition:
    transform 0.55s cubic-bezier(0.16,1,0.3,1),
    background 0.50s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.50s cubic-bezier(0.16,1,0.3,1),
    backdrop-filter 0.50s;
}
/* Glass refraction hover — transparent lens, track brightens through it */
.pw-range::-webkit-slider-thumb:hover {
  background:
    radial-gradient(ellipse 58% 48% at 36% 30%,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.10) 45%,
      rgba(255,255,255,0.00) 70%),
    rgba(255,255,255,0.05);
  backdrop-filter: brightness(1.85) saturate(2.2) contrast(1.12);
  -webkit-backdrop-filter: brightness(1.85) saturate(2.2) contrast(1.12);
  box-shadow:
    0 3px 14px rgba(0,0,0,0.65),
    0 0 0 0.5px rgba(255,255,255,0.40),
    inset 0 1.5px 0 rgba(255,255,255,0.72),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    inset 0 0 9px rgba(255,255,255,0.06);
  transform: scale(1.06);
  /* Snappy hover-in — rolloff uses slower spring from base state */
  transition:
    transform 0.18s cubic-bezier(0.23,1,0.32,1),
    background 0.16s,
    box-shadow 0.16s,
    backdrop-filter 0.16s;
}
.pw-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,0.97);
  border: none; cursor: pointer;
}
/* Track fill — background-image gradient set by JS; rounded ends come from border-radius */
.pw-range { background-image: linear-gradient(to right, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0.07) 0%); }

.pw-num {
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  text-align: right;
  white-space: nowrap;
  width: 100%;
}

.pw-unit {
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  font-size: 8.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.25);
  white-space: nowrap;
  text-align: left;
}

/* Copy icon button — explicit column so it lines up across all row types */
.pw-cp {
  grid-column: 5 / 6;
  justify-self: center;
  background: none;
  border: none;
  color: rgba(255,255,255,0.18);
  cursor: pointer;
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.pw-cp:hover {
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.08);
}
.pw-cp.copied { color: #4fd185; }

/* Select */
.pw-select {
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  color: rgba(255,255,255,0.75);
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  font-size: 9.5px;
  padding: 3px 6px;
  cursor: pointer;
  width: 100%;
  outline: none;
}
.pw-select option { background: #12131a; }

/* Text input */
.pw-textinput {
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  color: rgba(255,255,255,0.8);
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 11px;
  padding: 4px 8px;
  outline: none;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.pw-textinput:focus {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
}

/* Segmented control */
.pw-seg {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 2px;
}
.pw-seg__btn {
  flex: 1;
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  color: rgba(255,255,255,0.3);
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 4px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s;
}
.pw-seg__btn:not(.pw-seg__btn--on):hover { color: rgba(255,255,255,0.68); }
.pw-seg__btn--on {
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.9);
}

/* Debug readout */
.pw-debug {
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  font-size: 9px;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.04em;
  padding: 6px 0 2px;
  border-top: 0.5px solid rgba(255,255,255,0.06);
  margin-top: 4px;
}

/* Actions row (alignment panel) */
.pw-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.pw-btn {
  flex: 1;
  padding: 7px 10px;
  background: rgba(255,255,255,0.07);
  border: 0.5px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  color: rgba(255,255,255,0.5);
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.10em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.25);
  text-transform: uppercase;
}
.pw-btn:hover {
  background: rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.9);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.3);
}
.pw-btn--primary { color: rgba(255,255,255,0.82); }

/* ── Editable text preview ───────────────────────────────── */
.pw-editable-wrap {
  position: relative;
  margin-bottom: 8px;
}
.pw-editable {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: text;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  min-height: 36px;
  word-break: break-word;
}
.pw-editable--sm {
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
}
.pw-editable[contenteditable="true"] {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.07);
  cursor: text;
  caret-color: #fff;
}
.pw-editable:hover { border-color: rgba(255,255,255,0.16); }
.pw-editable__hint {
  display: block;
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 7.5px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.15);
  margin-top: 4px;
  padding-left: 2px;
}

/* ── Copy deck drop zone ─────────────────────────────────── */
.pw-sec--upload { padding-bottom: 12px; }

.pw-drop { }
.pw-drop__zone {
  border: 0.5px dashed rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: rgba(255,255,255,0.02);
}
.pw-drop__zone:hover,
.pw-drop__zone.drag-over {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.05);
}
.pw-drop__icon {
  color: rgba(255,255,255,0.25);
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
}
.pw-drop__label {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 10.5px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.pw-drop__browse {
  background: none;
  border: 0.5px solid rgba(255,255,255,0.18);
  border-radius: 5px;
  color: rgba(255,255,255,0.55);
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pw-drop__browse:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Progress bar */
.pw-drop__progress { padding: 8px 0; }
.pw-drop__bar-track {
  height: 1.5px;
  background: rgba(255,255,255,0.08);
  border-radius: 1px;
  overflow: hidden;
  margin-bottom: 6px;
}
.pw-drop__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(100,160,255,0.8), rgba(255,100,200,0.8));
  border-radius: 1px;
  transition: width 0.3s ease;
}
.pw-drop__status {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 8.5px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.1em;
}

/* Parsed text area */
.pw-parsed { margin-top: 8px; }
.pw-parsed__text {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 10.5px;
  line-height: 1.55;
  padding: 8px 10px;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.pw-parsed__text:focus { border-color: rgba(255,255,255,0.22); }

.pw-parsed__row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.pw-parsed__apply {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  color: rgba(255,255,255,0.55);
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pw-parsed__apply:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ── Footer ─────────────────────────────────────────────── */
.pw-footer {
  display: flex;
  gap: 6px;
  padding: 10px 14px 28px;
  border-top: 0.5px solid rgba(255,255,255,0.06);
}
.pw-footer__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: rgba(255,255,255,0.45);
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pw-footer__btn:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
.pw-footer__btn--primary { color: rgba(255,255,255,0.7); }

/* ── Slider fill track (JS sets inline style) ────────────── */
/* Handled via JS by updating background-image gradient */

/* ═══════════════════════════════════════════════════════════
   SCOPE MODAL — copy deck scope picker
   ═══════════════════════════════════════════════════════════ */
.scope-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.scope-modal[hidden] { display: none; }

.scope-modal__card {
  position: relative;
  width: 400px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(8, 9, 15, 0.88);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,0.12);
  box-shadow:
    0 0 0 0.5px rgba(100,140,255,0.2),
    0 40px 120px rgba(0,0,0,0.9),
    inset 0 0.5px 0 rgba(255,255,255,0.18);
}

.scope-modal__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  mix-blend-mode: screen;
  pointer-events: none;
}

.scope-modal__inner {
  position: relative;
  z-index: 1;
  padding: 36px 32px 28px;
}

.scope-modal__q {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.scope-modal__choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.scope-choice {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 18px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.scope-choice:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
}

.scope-choice__n {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.18);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.scope-choice__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.scope-choice__label {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  letter-spacing: -0.02em;
}

.scope-choice__sub {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  letter-spacing: -0.01em;
}

.scope-modal__cancel {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: rgba(255,255,255,0.2);
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
}
.scope-modal__cancel:hover { color: rgba(255,255,255,0.5); }

/* ═══════════════════════════════════════════════════════════
   MODE TOGGLE — Pro / Light pill
   ═══════════════════════════════════════════════════════════ */
.mode-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10001;
  display: flex;
  align-items: center;
  background: rgba(7, 8, 13, 0.72);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 0.5px solid rgba(255,255,255,0.12);
  box-shadow:
    0 0 0 0.5px rgba(110,140,255,0.15),
    0 4px 20px rgba(0,0,0,0.65),
    inset 0 0.5px 0 rgba(255,255,255,0.14);
  border-radius: 100px;
  padding: 3px;
}

.mode-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: linear-gradient(
    130deg,
    rgba(100,150,255,0.14) 0%,
    rgba(255,255,255,0.03) 40%,
    rgba(255,80,180,0.07) 70%,
    rgba(60,220,255,0.10) 100%
  );
  pointer-events: none;
}

.mode-toggle__pill {
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  width: calc(50% - 3px);
  background: rgba(255,255,255,0.13);
  border-radius: 100px;
  border: 0.5px solid rgba(255,255,255,0.2);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.18), 0 1px 4px rgba(0,0,0,0.4);
  transition: left 0.25s cubic-bezier(0.23,1,0.32,1);
  pointer-events: none;
}
.mode-toggle--light .mode-toggle__pill {
  left: calc(50%);
}

.mode-toggle__icon {
  width: 13px;
  height: 13px;
  display: block;
  pointer-events: none;
}

.mode-toggle__opt {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.25);
  padding: 5px 15px;
  cursor: pointer;
  border-radius: 100px;
  transition: color 0.2s;
  white-space: nowrap;
  text-transform: uppercase;
  min-width: 56px;
  text-align: center;
}
.mode-toggle__opt:hover:not(.mode-toggle__opt--on) { color: rgba(255,255,255,0.58); }
.mode-toggle__opt--on { color: rgba(255,255,255,0.88); }

/* ═══════════════════════════════════════════════════════════
   PUBLISH BUTTON — inside pub-cluster
   ═══════════════════════════════════════════════════════════ */
.publish-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px 0 12px;
  height: 36px;
  border: none;
  border-radius: 100px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14) inset,
    0 2px 12px rgba(0,0,0,0.28);
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.publish-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.03) 60%);
  pointer-events: none;
}
.publish-btn:hover {
  background: rgba(255,255,255,0.13);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.22) inset,
    0 4px 20px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}
.publish-btn:active { transform: translateY(0) scale(0.97); }

/* Pulsing green live dot */
.publish-btn__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.8);
  flex-shrink: 0;
  animation: publish-pulse 2s ease-in-out infinite;
}
@keyframes publish-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(74,222,128,0.8); }
  50%       { opacity: 0.55; box-shadow: 0 0 10px rgba(74,222,128,0.4); }
}

.publish-btn__label {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
  line-height: 1;
}

/* Success state */
.publish-btn--live .publish-btn__dot {
  background: #4ade80;
  animation: none;
  box-shadow: 0 0 10px rgba(74,222,128,1);
}
.publish-btn--live .publish-btn__label {
  color: #4ade80;
}
.publish-btn--live {
  background: rgba(74,222,128,0.12);
  box-shadow:
    0 0 0 1px rgba(74,222,128,0.35) inset,
    0 4px 20px rgba(74,222,128,0.15);
}

/* Push Live state — amber, ready to ship */
.publish-btn--pushlive .publish-btn__dot {
  background: #f59e0b;
  animation: none;
  box-shadow: 0 0 8px rgba(245,158,11,0.9);
}
.publish-btn--pushlive .publish-btn__label { color: #f59e0b; }
.publish-btn--pushlive {
  background: rgba(245,158,11,0.10);
  box-shadow: 0 0 0 1px rgba(245,158,11,0.30) inset, 0 4px 16px rgba(245,158,11,0.12);
}

/* Push Live button — separate from publish, amber accent */
.pushlive-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px 0 12px;
  height: 36px;
  border: none;
  border-radius: 100px;
  background: rgba(245,158,11,0.10);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow:
    0 0 0 1px rgba(245,158,11,0.28) inset,
    0 2px 12px rgba(0,0,0,0.28);
  cursor: pointer;
  position: relative;
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.pushlive-btn:hover {
  background: rgba(245,158,11,0.18);
  box-shadow:
    0 0 0 1px rgba(245,158,11,0.45) inset,
    0 4px 20px rgba(245,158,11,0.18);
  transform: translateY(-1px);
}
.pushlive-btn:active { transform: translateY(0) scale(0.97); }
.pushlive-btn__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245,158,11,0.9);
  flex-shrink: 0;
}
.pushlive-btn__label {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: #f59e0b;
  text-transform: uppercase;
  line-height: 1;
}
/* Live confirmation state */
.pushlive-btn--live .pushlive-btn__dot {
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74,222,128,1);
}
.pushlive-btn--live .pushlive-btn__label { color: #4ade80; }
.pushlive-btn--live {
  background: rgba(74,222,128,0.12);
  box-shadow:
    0 0 0 1px rgba(74,222,128,0.35) inset,
    0 4px 20px rgba(74,222,128,0.15);
}
/* Error state */
.pushlive-btn--error .pushlive-btn__dot { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.9); }
.pushlive-btn--error .pushlive-btn__label { color: #ef4444; }

/* ═══════════════════════════════════════════════════════════
   SEQUENCE panel body
   ═══════════════════════════════════════════════════════════ */
#seqBody {
  padding: 8px 14px 36px;
  gap: 0;
}
#seqBody .pw-row {
  margin-bottom: 4px;
  min-height: 26px;
}

/* Cards panel body — same padding rhythm as seq/shadow/tweak */
#cardsBody {
  padding: 8px 14px 36px;
  gap: 0;
}
#cardsBody .pw-row {
  margin-bottom: 4px;
  min-height: 26px;
}
#cardsBody .pw-actions {
  padding: 6px 14px 20px;
  margin-top: 6px;
}

/* Camera panel body — explicit padding; rows are direct children (no pw-sec wrapper) */
#cameraBody {
  padding: 8px 14px 36px;
  gap: 0;
}
#cameraBody .pw-row {
  margin-bottom: 4px;
  min-height: 26px;
}
#cameraBody .pw-actions {
  padding: 6px 0 20px;
  margin-top: 6px;
}
#s6Body {
  padding: 8px 0 36px;
  gap: 0;
}
#s6Body .pw-row {
  margin-bottom: 4px;
  min-height: 26px;
}
#s6Body .pw-actions {
  padding: 6px 14px 20px;
  margin-top: 6px;
}
#seqBody .pw-debug {
  margin-top: 6px;
  padding: 5px 0 2px;
}

/* ═══════════════════════════════════════════════════════════
   AI CALLOUT — bare hung-quote typographic treatment
   ═══════════════════════════════════════════════════════════ */
/* ── Asset name field — replaces the old AI callout ─────────
   Editable name that surfaces in the timeline as the asset label. */
.pw-asset-name {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 12px 14px;
  margin: 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.pw-asset-name__key {
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.32);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.pw-asset-name__input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  color: rgba(255,255,255,0.88);
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 4px 8px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.pw-asset-name__input:hover {
  border-color: rgba(255,255,255,0.18);
}
.pw-asset-name__input:focus {
  border-color: rgba(56,210,255,0.40);
  background: rgba(255,255,255,0.06);
  color: #ffffff;
}

.pw-ai-callout {
  padding: 10px 0 13px 0;
  margin: 0;
  position: relative;
  background: none;
  border: none;
  box-shadow: none;
}
/* contentPanel body has no body-level horizontal padding — callout provides its own */
#ctrlBody .pw-ai-callout { padding: 10px 16px 13px 14px; }

.pw-ai-callout__text {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 13.75px;
  font-weight: 700;
  line-height: 1.39;
  letter-spacing: -0.015em;
  text-align: left;
  word-break: break-word;
  overflow-wrap: break-word;
  /* background-clip: text — glow paints ON the letters, never behind them */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-image: linear-gradient(90deg, rgba(218,243,255,0.88), rgba(218,243,255,0.88));
  transition: background-image 0s;
}
/* Quote marks — hidden */
.pw-ai-callout__q,
.pw-ai-callout__qc { display: none; }

/* ── Panel icon + title left group ─────────────────────── */
.pw-panel__hdr-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.pw-panel__ico {
  color: rgba(255,255,255,0.28);
  flex-shrink: 0;
  display: block;
}

/* ── Panel resize handles — lower-right and lower-left ──── */
.pw-panel__resize {
  position: absolute;
  top: 0;
  bottom: 24px; /* stop above the corner-hatch zone */
  width: 8px;
  cursor: ew-resize;
  z-index: 100;
  user-select: none;
  -webkit-user-select: none;
}
.pw-panel__resize--right { right: 0; }
.pw-panel__resize--left  { left: 0; }

/* Glow edge — visible line that appears on hover to signal the drag edge */
.pw-panel__resize::after {
  content: '';
  position: absolute;
  top: 15%;
  bottom: 15%;
  width: 2px;
  border-radius: 1px;
  background: rgba(56, 210, 255, 0);
  transition: background 0.18s;
  pointer-events: none;
}
.pw-panel__resize--right::after { right: 1px; }
.pw-panel__resize--left::after  { left: 1px; }
.pw-panel__resize:hover::after,
.pw-panel--resizing .pw-panel__resize::after {
  background: rgba(56, 210, 255, 0.55);
  box-shadow: 0 0 6px rgba(56, 210, 255, 0.35);
}

/* ── Corner hatches — bottom-left + bottom-right only ──────────── */
.pw-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 50;
}
.pw-corner--bl {
  bottom: 10px; left: 10px;
  border-bottom: 1px solid rgba(210,212,218,0.30);
  border-left:   1px solid rgba(210,212,218,0.30);
}
.pw-corner--br {
  bottom: 10px; right: 10px;
  border-bottom: 1px solid rgba(210,212,218,0.30);
  border-right:  1px solid rgba(210,212,218,0.30);
}

/* ── Header right cluster — badge + rec + close stay together ── */
.pw-panel__hdr-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ═══════════════════════════════════════════════════════════
   SECTION DIVIDER — subheader inside merged panels (e.g. SHADOW
   block under PHONE controls). Same visual treatment as the
   panel header's left-side icon + label.
   ═══════════════════════════════════════════════════════════ */
.pw-section-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 8px;
  padding: 8px 0 0;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  user-select: none;
  -webkit-user-select: none;
}
.pw-section-divider__ico {
  color: rgba(255,255,255,0.28);
  flex-shrink: 0;
  display: block;
}
.pw-section-divider span {
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — panel chrome flips to frosted white glass
   ═══════════════════════════════════════════════════════════ */
html.theme-light .pw-panel {
  background: rgba(242,245,252,0.95);
  border: 0.5px solid rgba(0,0,0,0.12);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.06),
    0 4px 12px rgba(0,0,0,0.09),
    0 16px 48px rgba(0,0,0,0.14),
    inset 0 0.5px 0 rgba(255,255,255,1);
}
html.theme-light .pw-panel::before {
  background: linear-gradient(
    130deg,
    rgba(0,102,255,0.10) 0%,
    rgba(255,255,255,0.55) 35%,
    rgba(255,60,180,0.05) 70%,
    rgba(0,200,255,0.08) 100%
  );
}
html.theme-light .pw-panel__title      { color: rgba(0,0,0,0.72); }
html.theme-light .pw-panel__hdr        { border-bottom: 0.5px solid rgba(0,0,0,0.10); }
html.theme-light .pw-panel__title--input:not([readonly]) {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,102,255,0.50);
  color: #1d1d1f;
}
html.theme-light .pw-icon-btn          { color: rgba(0,0,0,0.45); }
html.theme-light .pw-icon-btn:hover    { color: rgba(0,0,0,0.88); }
html.theme-light .pw-panel__edit       { color: rgba(0,0,0,0.40); }
html.theme-light .pw-panel__edit:hover { color: rgba(0,102,255,1); background: rgba(0,102,255,0.06); }
html.theme-light .pw-cp               { color: rgba(0,0,0,0.38); }
html.theme-light .pw-cp:hover         { color: rgba(0,0,0,0.82); background: rgba(0,0,0,0.06); }
html.theme-light .pw-kf-snap          { color: rgba(0,0,0,0.30); }
html.theme-light .pw-kf-snap:hover    { color: rgba(0,102,255,0.90); }
html.theme-light .pw-kf-snap--has     { color: rgba(0,102,255,0.55); }
html.theme-light .pw-kf-snap--has:hover { color: rgba(0,102,255,1); }
html.theme-light .pw-kf-snap--here    { color: rgba(0,102,255,1); }
html.theme-light .pw-kf-del--visible  { color: rgba(200,30,30,0.55); }
html.theme-light .pw-kf-del--visible:hover { color: rgba(200,30,30,1); }
html.theme-light .pw-section-divider            { border-top: 0.5px solid rgba(0,0,0,0.10); }
html.theme-light .pw-section-divider__ico       { color: rgba(0,0,0,0.38); }
html.theme-light .pw-section-divider span       { color: rgba(0,0,0,0.52); }
html.theme-light .pw-sec               { border-bottom: 0.5px solid rgba(0,0,0,0.08); }
html.theme-light .pw-sec__label        { color: rgba(0,0,0,0.52); }
html.theme-light .pw-sec__hdr:hover .pw-sec__label { color: rgba(0,0,0,0.75); }
html.theme-light .pw-sec__tog          { color: rgba(0,0,0,0.35); }
html.theme-light .pw-sec__hdr:hover .pw-sec__tog   { color: rgba(0,0,0,0.65); }
html.theme-light .pw-key               { color: rgba(0,0,0,0.55); }
html.theme-light .pw-num               { color: rgba(0,0,0,0.90); }
html.theme-light .pw-unit              { color: rgba(0,0,0,0.42); }
html.theme-light .pw-range {
  background: rgba(0,0,0,0.08);
  border: 0.5px solid rgba(0,0,0,0.12);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.12), inset 0 -0.5px 0 rgba(255,255,255,0.6);
  background-image: linear-gradient(to right, rgba(0,102,255,0.75) 0%, rgba(0,102,255,0.75) 0%, rgba(0,0,0,0.08) 0%);
}
html.theme-light .pw-range::-webkit-slider-thumb {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 0.5px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,1);
}
html.theme-light .pw-select {
  background: rgba(255,255,255,0.70);
  border: 0.5px solid rgba(0,0,0,0.14);
  color: rgba(0,0,0,0.80);
}
html.theme-light .pw-select option { background: #fff; color: #1d1d1f; }
html.theme-light .pw-textinput {
  background: rgba(255,255,255,0.70);
  border: 0.5px solid rgba(0,0,0,0.14);
  color: rgba(0,0,0,0.88);
}
html.theme-light .pw-textinput:focus {
  border-color: rgba(0,102,255,0.55);
  background: rgba(255,255,255,0.90);
}
html.theme-light .pw-seg             { background: rgba(0,0,0,0.06); }
html.theme-light .pw-seg__btn        { color: rgba(0,0,0,0.40); }
html.theme-light .pw-seg__btn:not(.pw-seg__btn--on):hover { color: rgba(0,0,0,0.70); }
html.theme-light .pw-seg__btn--on    { background: rgba(255,255,255,0.85); color: rgba(0,0,0,0.88); }
html.theme-light .pw-btn {
  background: rgba(255,255,255,0.65);
  border: 0.5px solid rgba(0,0,0,0.14);
  color: rgba(0,0,0,0.62);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(0,0,0,0.10);
}
html.theme-light .pw-btn:hover {
  background: rgba(255,255,255,0.90);
  color: rgba(0,0,0,0.90);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,1), 0 2px 8px rgba(0,0,0,0.14);
}
html.theme-light .pw-debug {
  color: rgba(0,0,0,0.30);
  border-top: 0.5px solid rgba(0,0,0,0.08);
}
html.theme-light .pw-editable {
  color: rgba(0,0,0,0.85);
  background: rgba(255,255,255,0.60);
  border: 0.5px solid rgba(0,0,0,0.10);
}
html.theme-light .pw-panel__body--scroll {
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}
html.theme-light .pw-panel__body--scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
/* Toggle flips to match */
html.theme-light .mode-toggle {
  background: rgba(242,245,252,0.95);
  border: 0.5px solid rgba(0,0,0,0.12);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.07),
    0 4px 16px rgba(0,0,0,0.10),
    inset 0 0.5px 0 rgba(255,255,255,1);
}
html.theme-light .mode-toggle::before { background: none; }
html.theme-light .mode-toggle__pill {
  background: rgba(255,255,255,0.85);
  border: 0.5px solid rgba(0,0,0,0.12);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,1), 0 1px 4px rgba(0,0,0,0.12);
}
html.theme-light .mode-toggle__opt    { color: rgba(0,0,0,0.40); }
html.theme-light .mode-toggle__opt:hover:not(.mode-toggle__opt--on) { color: rgba(0,0,0,0.68); }
html.theme-light .mode-toggle__opt--on { color: rgba(0,0,0,0.90); }

/* ── Light mode: top-left nav chrome ── */
html.theme-light .undo-btn {
  background: rgba(242,245,252,0.92);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.04) inset, 0 2px 14px rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.50);
}
html.theme-light .undo-btn:not(:disabled):hover {
  color: rgba(0,0,0,0.88);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08) inset, 0 4px 20px rgba(0,0,0,0.14);
}
html.theme-light .pub-cluster {
  background: rgba(242,245,252,0.92);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.04) inset, 0 2px 14px rgba(0,0,0,0.10);
}
html.theme-light .pub-cluster:hover {
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08) inset, 0 6px 30px rgba(0,0,0,0.14);
}
html.theme-light .pub-ham { color: rgba(0,0,0,0.50); }
html.theme-light .pub-cluster:hover .pub-ham { color: rgba(0,0,0,0.82); }

/* ── Light mode: dock circles ── */
html.theme-light .panel-tog,
html.theme-light .fx-knob,
html.theme-light .tl-tog,
html.theme-light .comment-tog {
  background: rgba(242,245,252,0.92);
  border: 0.5px solid rgba(0,0,0,0.10);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.08),
    0 8px 28px rgba(0,0,0,0.10),
    inset 0 0.5px 0 rgba(255,255,255,1);
  color: rgba(0,0,0,0.55);
}
html.theme-light .panel-tog:hover,
html.theme-light .fx-knob:hover,
html.theme-light .tl-tog:hover,
html.theme-light .comment-tog:hover {
  border-color: rgba(0,0,0,0.18);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.10),
    0 10px 32px rgba(0,0,0,0.13),
    inset 0 0.5px 0 rgba(255,255,255,1);
}
html.theme-light .tl-tog--on {
  border-color: rgba(0,102,255,0.45);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.10),
    0 10px 32px rgba(0,0,0,0.13),
    inset 0 0.5px 0 rgba(255,255,255,1);
}
html.theme-light .comment-tog--on {
  border-color: rgba(255,159,10,0.55);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.10),
    0 10px 32px rgba(0,0,0,0.13),
    inset 0 0.5px 0 rgba(255,255,255,1);
}
html.theme-light .panel-tog__plate,
html.theme-light .tl-tog__plate,
html.theme-light .comment-tog__plate {
  background: rgba(0,0,0,0.06);
  border: 0.5px solid rgba(0,0,0,0.10);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.8), 0 1px 4px rgba(0,0,0,0.06);
}
html.theme-light .fx-knob__plate {
  background: rgba(0,0,0,0.06);
  border: 0.5px solid rgba(0,0,0,0.10);
}

/* ── Light mode: timeline panel ── */
html.theme-light {
  --tl-bg:       #f0f3f8;
  --tl-bg-alt:   #e8ecf2;
  --tl-border:   rgba(0,0,0,0.08);
  --tl-rule:     rgba(0,0,0,0.05);
  --tl-section:  rgba(0,0,0,0.35);
  --tl-asset:    rgba(0,0,0,0.80);
  --tl-value:    rgba(0,0,0,0.88);
  --tl-input-bg: rgba(255,255,255,0.70);
  --tl-dot:      #0066ff;
  --tl-line:     rgba(0,102,255,0.30);
  --tl-playhead: #ff3a30;
}
html.theme-light .tl-panel {
  background: var(--tl-bg);
  border-top: 1px solid var(--tl-border);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.10);
}
html.theme-light .tl-panel::before {
  background: var(--tl-bg);
  border: 1px solid var(--tl-border);
}
html.theme-light .tl-axis__btn {
  color: rgba(0,0,0,0.35);
  border: 0.5px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
}
html.theme-light .tl-icon-btn:hover    { color: var(--tl-value); background: rgba(0,0,0,0.06); }
html.theme-light .tl-row-add {
  border-color: rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.55);
}
html.theme-light .tl-row-add:hover {
  color: rgba(0,102,255,1);
  background: rgba(0,102,255,0.10);
  border-color: rgba(0,102,255,0.35);
}
html.theme-light .tl-publish {
  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.35);
}
html.theme-light .tl-publish:not(:disabled) { background: #0066ff; color: #fff; }
html.theme-light .tl-axis__btn--on {
  background: rgba(0,102,255,0.12);
  color: #0066ff;
  border-color: rgba(0,102,255,0.30);
}

/* ── Light mode: vp-tag ── */
html.theme-light .vp-tag {
  background: rgba(242,245,252,0.88);
  border: 0.5px solid rgba(0,0,0,0.10);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08), inset 0 0.5px 0 rgba(255,255,255,0.9);
  color: rgba(0,0,0,0.60);
}

/* ═══════════════════════════════════════════════════════════
   5TH DOCK CIRCLE — Comment / Annotation toggle
   ═══════════════════════════════════════════════════════════ */
.comment-tog {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0.5px solid rgba(255,255,255,0.12);
  background: rgba(7, 8, 13, 0.84);
  backdrop-filter: blur(32px) saturate(1.8);
  -webkit-backdrop-filter: blur(32px) saturate(1.8);
  box-shadow:
    0 0 0 0.5px rgba(110,140,255,0.18),
    0 12px 48px rgba(0,0,0,0.75),
    inset 0 0.5px 0 rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.22s, border-color 0.22s, box-shadow 0.22s;
  padding: 0;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
}
.comment-tog:hover { opacity: 1; }
.comment-tog--on {
  opacity: 1;
  border-color: rgba(255,159,10,0.55);
  box-shadow:
    0 0 0 0.5px rgba(255,159,10,0.35),
    0 16px 56px rgba(0,0,0,0.80),
    0 0 48px rgba(255,159,10,0.14),
    inset 0 0.5px 0 rgba(255,255,255,0.22);
}
.comment-tog__plate {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 0.5px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.14), 0 1px 4px rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.comment-tog--on .comment-tog__plate {
  background: rgba(255,159,10,0.16);
  border-color: rgba(255,159,10,0.30);
}

/* ═══════════════════════════════════════════════════════════
   COMMENT PANEL — left-side, amber accent
   ═══════════════════════════════════════════════════════════ */
.comment-panel {
  left: 20px;
  right: auto;
}

/* Tool palette */
.ann-tools {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 10px 12px 8px;
}

/* Draw color picker row — hidden by default; JS shows only for draw tool */
.ann-colors {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 0 12px 8px;
}
.ann-colors.ann-colors--on { display: flex; }
.ann-color-swatch {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  padding: 0; flex-shrink: 0;
  transition: transform 0.1s, border-color 0.1s;
}
.ann-color-swatch:hover  { transform: scale(1.18); }
.ann-color-swatch--on    { border-color: rgba(255,255,255,0.85); transform: scale(1.12); }
.ann-color-custom {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: conic-gradient(#ff3b30,#ff9500,#ffcc00,#30d158,#0066ff,#bf5af2,#ff3b30);
  border: 2px solid rgba(255,255,255,0.30);
  cursor: pointer; flex-shrink: 0; overflow: hidden; position: relative;
}
.ann-color-custom input[type="color"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.ann-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 2px 7px;
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.40);
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.ann-tool:hover { color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.08); }
.ann-tool--on {
  background: rgba(255,159,10,0.15);
  border-color: rgba(255,159,10,0.40);
  color: rgba(255,159,10,0.95);
}

/* Annotation list */
.ann-list {
  padding: 0 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ann-empty {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 9px;
  color: rgba(255,255,255,0.22);
  text-align: center;
  padding: 14px 8px;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.ann-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.ann-card:hover { background: rgba(255,255,255,0.08); }
.ann-card--selected {
  background: rgba(255,159,10,0.10);
  border-color: rgba(255,159,10,0.30);
}
.ann-card__badge {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.70);
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 8px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ann-card--selected .ann-card__badge {
  background: rgba(255,159,10,0.30);
  color: rgba(255,159,10,1);
}
.ann-card__type {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 7px;
  font-weight: 700;
  color: rgba(255,255,255,0.22);
  letter-spacing: 0.12em;
  flex-shrink: 0;
}
.ann-card__text {
  flex: 1;
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,0.50);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ann-card__del {
  background: none; border: none;
  color: rgba(255,255,255,0.15);
  font-size: 11px; cursor: pointer;
  padding: 0 2px; line-height: 1;
  transition: color 0.12s;
  flex-shrink: 0;
}
.ann-card__del:hover { color: rgba(255,70,70,0.85); }

/* Detail section */
.ann-detail-sec .pw-sec__body { padding: 4px 12px 8px; }
.ann-detail-body { display: flex; flex-direction: column; gap: 4px; }
.ann-comment-ta  { width: 100%; resize: none; min-height: 80px; }

/* Section dividers between attach / figma / jira / slack groups */
.ann-int-row--figma  { margin-top: 6px; }
.ann-int-row + .ann-int-row { margin-top: 0; }
.ann-slack-group     { margin-top: 2px; display: flex; flex-direction: column; gap: 3px; }
.ann-ticket-link     { margin-top: -2px; margin-bottom: 2px; }

/* Combined Slack + recipient */
.ann-recipient-wrap {
  position: relative;
  padding-left: 41px; /* align with select (36px label + 5px gap) */
}
.ann-recipient-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 9px;
  height: 24px;
  padding: 0 8px;
}
.ann-recipient-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 41px; right: 0;
  background: rgba(28,28,36,0.97);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  overflow: hidden;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.ann-recipient-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  font-family: 'SF Mono','Menlo',monospace;
  font-size: 9px;
  color: rgba(255,255,255,0.70);
  cursor: pointer;
  transition: background 0.10s;
}
.ann-recipient-item:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.95); }
.ann-recipient-item--add  { color: rgba(255,159,10,0.85); }
.ann-recipient-item--add:hover { background: rgba(255,159,10,0.10); color: rgba(255,159,10,1); }
.ann-recipient-del {
  background: none; border: none; color: rgba(255,255,255,0.25);
  font-size: 9px; cursor: pointer; padding: 0 0 0 6px; line-height: 1;
}
.ann-recipient-del:hover { color: rgba(239,68,68,0.85); }

/* Attach row */
.ann-attach-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ann-attach-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  color: rgba(255,255,255,0.45);
  font-family: 'SF Mono','Menlo',monospace;
  font-size: 8px; letter-spacing: 0.06em;
  cursor: pointer; white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.ann-attach-btn:hover { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.80); }

.ann-thumbs { display: flex; flex-wrap: wrap; gap: 4px; }
.ann-thumb {
  width: 34px; height: 34px;
  border-radius: 4px;
  object-fit: cover;
  border: 0.5px solid rgba(255,255,255,0.14);
  cursor: pointer;
  position: relative;
}
.ann-thumb-wrap {
  position: relative; display: inline-block;
}
.ann-thumb-del {
  position: absolute; top: -4px; right: -4px;
  width: 13px; height: 13px;
  background: rgba(30,30,30,0.90);
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: rgba(255,255,255,0.70);
  font-size: 7px; line-height: 13px; text-align: center;
  cursor: pointer; display: none;
}
.ann-thumb-wrap:hover .ann-thumb-del { display: block; }

/* Figma frame */
.ann-figma-frame {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 0.5px solid rgba(255,255,255,0.12);
}
.ann-figma-frame iframe {
  width: 100%; height: 220px; display: block; border: none;
}
.ann-figma-close {
  position: absolute; top: 5px; right: 5px;
  background: rgba(0,0,0,0.55);
  border: none; border-radius: 4px;
  color: rgba(255,255,255,0.80);
  font-size: 9px; padding: 3px 5px;
  cursor: pointer; line-height: 1;
}
.ann-int-btn--figma:hover { background: rgba(0,180,120,0.15); color: rgba(0,220,140,1); border-color: rgba(0,180,120,0.35); }

/* Draw SVG layer — background transparent to clicks, strokes clickable */
.draw-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; /* SVG bg passes through; individual strokes override */
  overflow: visible;
}
.draw-svg polyline, .draw-svg path {
  pointer-events: stroke;
  cursor: pointer;
}
.draw-svg [data-selected="true"] { filter: drop-shadow(0 0 3px rgba(255,255,255,0.6)); }

.ann-int-row {
  display: grid;
  grid-template-columns: 36px 1fr 24px;
  align-items: center;
  gap: 5px;
}
.ann-int-btn {
  background: rgba(255,255,255,0.07);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  color: rgba(255,255,255,0.45);
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  padding: 0; flex-shrink: 0;
}
.ann-int-btn:hover           { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.80); }
.ann-int-btn:disabled        { opacity: 0.45; cursor: not-allowed; }
.ann-int-btn--jira:hover     { background: rgba(0,102,255,0.18); color: rgba(80,160,255,1); border-color: rgba(0,102,255,0.35); }
.ann-int-btn--slack:hover    { background: rgba(100,60,220,0.18); color: rgba(160,120,255,1); border-color: rgba(100,60,220,0.35); }

.ann-select {
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  font-size: 9px;
  background: rgba(255,255,255,0.07);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  color: rgba(255,255,255,0.70);
  padding: 0 6px;
  height: 24px;
  cursor: pointer;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='rgba(255,255,255,0.4)' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 20px;
}
.ann-select--error { border-color: rgba(239,68,68,0.70) !important; }

.ann-ticket-link {
  display: block;
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  font-size: 9px;
  font-weight: 600;
  color: rgba(80,160,255,0.90);
  padding: 3px 0 1px 40px;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.ann-ticket-link:hover { color: rgba(80,160,255,1); text-decoration: underline; }

/* Footer */
.ann-footer { padding: 4px 12px 12px; }

/* ── Light mode: annotation panel elements ────────────────────────────────── */
html.theme-light .ann-select {
  background-color: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.75);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='rgba(0,0,0,0.4)' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
html.theme-light .ann-int-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.45);
}
html.theme-light .ann-int-btn:hover         { background: rgba(0,0,0,0.07); color: rgba(0,0,0,0.80); }
html.theme-light .ann-int-btn--jira:hover   { background: rgba(0,102,255,0.10); color: rgba(0,80,220,1); border-color: rgba(0,102,255,0.30); }
html.theme-light .ann-int-btn--slack:hover  { background: rgba(80,40,180,0.10); color: rgba(80,40,180,1); border-color: rgba(80,40,180,0.30); }
html.theme-light .ann-ticket-link           { color: rgba(0,80,200,0.90); }
html.theme-light .ann-ticket-link:hover     { color: rgba(0,80,200,1); }
html.theme-light .ann-attach-btn            { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.10); color: rgba(0,0,0,0.45); }
html.theme-light .ann-attach-btn:hover      { background: rgba(0,0,0,0.07); color: rgba(0,0,0,0.80); }
html.theme-light .ann-thumb                 { border-color: rgba(0,0,0,0.14); }
html.theme-light .ann-thumb-del             { background: rgba(240,240,240,0.95); color: rgba(0,0,0,0.60); border-color: rgba(0,0,0,0.15); }
html.theme-light .ann-figma-frame           { border-color: rgba(0,0,0,0.12); }
html.theme-light .ann-figma-close           { background: rgba(255,255,255,0.80); color: rgba(0,0,0,0.60); }
html.theme-light .ann-color-swatch--on      { border-color: rgba(0,0,0,0.60); }
html.theme-light .ann-color-custom          { border-color: rgba(0,0,0,0.20); }
html.theme-light .ann-recipient-dropdown    { background: rgba(248,249,252,0.98); border-color: rgba(0,0,0,0.12); }
html.theme-light .ann-recipient-item        { color: rgba(0,0,0,0.70); }
html.theme-light .ann-recipient-item:hover  { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.90); }
html.theme-light .ann-recipient-del         { color: rgba(0,0,0,0.25); }

/* ── Light mode: annotation tool palette ── */
html.theme-light .ann-tool {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.38);
}
html.theme-light .ann-tool:hover {
  background: rgba(0,0,0,0.07);
  color: rgba(0,0,0,0.72);
}
html.theme-light .ann-tool--on {
  background: rgba(255,149,0,0.10);
  border-color: rgba(255,149,0,0.40);
  color: rgba(200,100,0,0.95);
}

/* ── Light mode: annotation list ── */
html.theme-light .ann-empty { color: rgba(0,0,0,0.28); }
html.theme-light .ann-card {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}
html.theme-light .ann-card:hover { background: rgba(0,0,0,0.06); }
html.theme-light .ann-card--selected {
  background: rgba(255,149,0,0.08);
  border-color: rgba(255,149,0,0.30);
}
html.theme-light .ann-card__badge {
  background: rgba(0,0,0,0.08);
  color: rgba(0,0,0,0.60);
}
html.theme-light .ann-card--selected .ann-card__badge {
  background: rgba(255,149,0,0.20);
  color: rgba(180,80,0,1);
}
html.theme-light .ann-card__type  { color: rgba(0,0,0,0.28); }
html.theme-light .ann-card__text  { color: rgba(0,0,0,0.55); }
html.theme-light .ann-card__del   { color: rgba(0,0,0,0.18); }

/* ── Light mode: dock AI send button (the + FAB) ── */
/* Light mode: the collapsed glass shell needs to match other dock circles */
html.theme-light .ai-bar--collapsed .ai-bar__glass {
  background: rgba(242,245,252,0.92);
  border-color: rgba(0,0,0,0.10);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.08),
    0 8px 28px rgba(0,0,0,0.10),
    inset 0 0.5px 0 rgba(255,255,255,1);
}
html.theme-light .ai-bar__send {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.55);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.8), 0 1px 4px rgba(0,0,0,0.06);
}
html.theme-light .ai-bar__send:hover:not(:disabled) {
  background: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.88);
}

/* ═══════════════════════════════════════════════════════════
   ANNOTATION OVERLAY + DOTS
   ═══════════════════════════════════════════════════════════ */
.ann-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000; /* above page content, below tl-panel dock (9999) and pw-panels (2147483000) */
  cursor: crosshair;
}
.ann-overlay[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════
   GRAB TOOL — direct-manipulation selection + scale handles
   z-index: 9500 (above ann-overlay 9000, below pw-panels)
   ══════════════════════════════════════════════════════════ */
.pw-grab-btn {
  /* size inherits from pw-icon-btn */
  transition: color 0.15s, background 0.15s;
}
.pw-grab-btn--on {
  color: rgba(255, 200, 0, 1) !important;
  background: rgba(255, 200, 0, 0.16) !important;
  border-radius: 5px;
}

/* Inline section-level grab buttons — always visible, subtle at rest */
.pw-sec-grab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  margin-left: 4px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.18);
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.pw-sec-grab-btn:hover { color: rgba(255, 200, 0, 1); background: rgba(255, 200, 0, 0.12); }
.pw-sec-grab-btn--on { color: rgba(255, 200, 0, 1) !important; background: rgba(255, 200, 0, 0.15) !important; }

/* Section grab button position — between label and toggle, push toggle to the right */
.pw-sec__hdr { gap: 4px; }
.pw-sec__tog { margin-left: auto; }

/* Global cursor override while grab mode is active */
html.grab-tool-active,
html.grab-tool-active * { cursor: crosshair !important; }
html.grab-tool-active .pw-panel,
html.grab-tool-active .pw-panel * { cursor: default !important; }
html.grab-tool-active .pw-grab-sel__body { cursor: grab !important; }
html.grab-tool-active.grab-dragging .pw-grab-sel__body { cursor: grabbing !important; }
html.grab-tool-active .pw-grab-handle { cursor: inherit !important; }

/* Disable CSS transitions while actively dragging for zero latency */
html.grab-dragging .s3-triptych__card img { transition: none !important; }

/* Selection box */
.pw-grab-sel {
  position: fixed;
  pointer-events: none;
  z-index: 9500;
  border: 1.5px solid rgba(255, 200, 0, 0.9);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
}
.pw-grab-sel[hidden] { display: none; }

/* Invisible padding around the box so clicks near the border hit the body */
.pw-grab-sel__body {
  position: absolute;
  inset: -6px;
  pointer-events: all;
}

/* Scale handles — 9×9 white squares at corners/edge midpoints */
.pw-grab-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #fff;
  border: 1.5px solid rgba(255, 200, 0, 0.9);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  pointer-events: all;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.pw-grab-handle--tl { top: 0;    left: 0;    cursor: nwse-resize; }
.pw-grab-handle--tc { top: 0;    left: 50%;  cursor: ns-resize;   }
.pw-grab-handle--tr { top: 0;    left: 100%; cursor: nesw-resize; }
.pw-grab-handle--ml { top: 50%;  left: 0;    cursor: ew-resize;   }
.pw-grab-handle--mr { top: 50%;  left: 100%; cursor: ew-resize;   }
.pw-grab-handle--bl { top: 100%; left: 0;    cursor: nesw-resize; }
.pw-grab-handle--bc { top: 100%; left: 50%;  cursor: ns-resize;   }
.pw-grab-handle--br { top: 100%; left: 100%; cursor: nwse-resize; }

.ann-dot {
  position: absolute;
  pointer-events: all;
  cursor: pointer;
}
/* Pin */
.ann-dot--pin {
  width: 24px; height: 24px;
  transform: translate(-50%, -100%);
}
.ann-dot--pin .ann-badge {
  position: absolute; top: 0; left: 0;
  width: 24px; height: 24px;
  background: var(--ann-color, rgba(255,159,10,0.95));
  border-radius: 50%;
}
.ann-dot--pin .ann-badge::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--ann-color, rgba(255,159,10,0.95));
}
/* Box */
.ann-dot--box {
  border: 2px dashed var(--ann-color, rgba(255,159,10,0.75));
  border-radius: 2px;
  background: color-mix(in srgb, var(--ann-color, rgba(255,159,10,1)) 8%, transparent);
  pointer-events: all;
}
.ann-dot--drawing { pointer-events: none; border-style: dotted; opacity: 0.6; }
.ann-dot--box .ann-badge {
  position: absolute; top: -12px; left: -12px;
  width: 20px; height: 20px; font-size: 8px;
}
/* Text */
.ann-dot--text {
  transform: translate(-50%, -50%);
  min-width: 60px;
}
.ann-dot--text .ann-badge {
  position: absolute; top: -10px; left: -10px;
  width: 20px; height: 20px; font-size: 8px;
}
/* Image */
.ann-dot--image {
  width: 24px; height: 24px;
  transform: translate(-50%, -100%);
}
.ann-dot--image .ann-badge {
  position: absolute; top: 0; left: 0;
  width: 24px; height: 24px;
}

/* Shared badge */
.ann-badge {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,159,10,0.95);
  color: rgba(0,0,0,0.80);
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  pointer-events: none;
  flex-shrink: 0;
  user-select: none;
}
.ann-dot--selected .ann-badge {
  background: rgba(255,220,0,1);
  box-shadow: 0 0 0 2px rgba(255,220,0,0.4), 0 2px 8px rgba(0,0,0,0.4);
}
.ann-dot--selected.ann-dot--box {
  border-color: rgba(255,220,0,0.9);
  background: rgba(255,220,0,0.06);
}

/* ── Flag wiggle — badge pivots from base like a waving flag ── */
@keyframes ann-flag-wave {
  0%, 100% { transform: rotate(-7deg); }
  50%       { transform: rotate( 7deg); }
}
.ann-dot--wiggle .ann-badge {
  animation: ann-flag-wave 0.45s cubic-bezier(.36,.07,.19,.97) infinite;
  transform-origin: center bottom;
}

/* ── Move mode — triple-click to grab ── */
.ann-dot--moving {
  cursor: grab !important;
  z-index: 10;
}
.ann-dot--moving .ann-badge {
  animation: none;
  box-shadow:
    0 0 0 3px var(--ann-color, rgba(255,159,10,0.95)),
    0 0 14px var(--ann-color, rgba(255,159,10,0.45)),
    0 2px 8px rgba(0,0,0,0.4);
}
.ann-dot--grabbing,
.ann-dot--grabbing * {
  cursor: grabbing !important;
}

/* Image thumbnail on pin */
.ann-thumb {
  display: block;
  width: 40px; height: 40px;
  object-fit: cover;
  border-radius: 5px;
  border: 1.5px solid rgba(255,159,10,0.7);
  margin-top: 2px;
  margin-left: -8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* ── Back button ── */
/* ── Undo button — glass circle matching pub-cluster at rest ── */
.undo-btn {
  position: fixed;
  top: 20px;
  left: 68px;
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(18,18,22,0.90);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.06) inset,
    0 2px 14px rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.50);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, opacity 0.2s, box-shadow 0.15s, transform 0.12s;
}
.undo-btn:not(:disabled):hover {
  color: rgba(255,255,255,0.88);
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.14) inset,
    0 4px 20px rgba(0,0,0,0.55);
}
.undo-btn:not(:disabled):active { transform: scale(0.88); }
.undo-btn:disabled { opacity: 0.30; cursor: default; }

/* ═══════════════════════════════════════════════════════════
   PUBLISH CLUSTER — pub btn + history btn side by side
   ═══════════════════════════════════════════════════════════ */
/* ── Pub cluster: circle → rounded-rect morph on hover ── */
.pub-cluster {
  position: fixed;
  top: 20px;
  left: 116px;
  z-index: 9999;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50px;
  background: rgba(18,18,22,0.90);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.06) inset,
    0 2px 14px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
  transition:
    width  0.36s cubic-bezier(0.34,1.56,0.64,1),
    height 0.40s cubic-bezier(0.34,1.56,0.64,1),
    border-radius 0.32s ease,
    box-shadow 0.22s ease;
}
.pub-cluster:hover {
  width: 152px;
  height: 164px;
  border-radius: 20px;
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.13) inset,
    0 6px 30px rgba(0,0,0,0.55);
}

/* Hamburger row — always at top of container */
.pub-ham {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.50);
  background: none;
  border: none;
  padding: 0;
  pointer-events: none;
  transition: color 0.20s;
}
.pub-cluster:hover .pub-ham {
  color: rgba(255,255,255,0.82);
}

/* Pills container — always in DOM, clipped by overflow:hidden when collapsed */
.pub-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 7px 7px;
  pointer-events: none;
}
.pub-cluster:hover .pub-menu {
  pointer-events: auto;
}

/* Pill cascade — staggered slide-up + fade */
.pub-menu .publish-btn,
.pub-menu .pushlive-btn,
.pub-menu .history-btn {
  opacity: 0;
  transform: translateY(-7px) scale(0.95);
  transition:
    opacity  0.24s ease,
    transform 0.30s cubic-bezier(0.34,1.56,0.64,1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  width: 100%;
  box-sizing: border-box;
}
.pub-cluster:hover .pub-menu .publish-btn {
  opacity: 1;
  transform: none;
  transition-delay: 0.13s;
}
.pub-cluster:hover .pub-menu .pushlive-btn {
  opacity: 1;
  transform: none;
  transition-delay: 0.20s;
}
.pub-cluster:hover .pub-menu .history-btn {
  opacity: 1;
  transform: none;
  transition-delay: 0.27s;
}

/* History button — same glass pill language as publish btn */
.history-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 11px;
  height: 36px;
  border: none;
  border-radius: 100px;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12) inset,
    0 2px 12px rgba(0,0,0,0.25);
  cursor: pointer;
  color: rgba(255,255,255,0.55);
  transition: background 0.18s, color 0.18s, transform 0.12s;
  position: relative;
}
.history-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.02) 60%);
  pointer-events: none;
}
.history-btn:hover {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  transform: translateY(-1px);
}
.history-btn:active { transform: translateY(0) scale(0.97); }
.history-btn svg { flex-shrink: 0; }
.history-btn__label {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   TIME MACHINE OVERLAY
   ═══════════════════════════════════════════════════════════ */
.tm-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tm-overlay[hidden] { display: none !important; }

/* Blurred dark background */
.tm-bg {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 8, 0.92);
  backdrop-filter: blur(30px) saturate(1.2);
  -webkit-backdrop-filter: blur(30px) saturate(1.2);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.tm-overlay--open .tm-bg { opacity: 1; }

/* Header */
.tm-header {
  position: relative;
  z-index: 200;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 28px 36px 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s 0.1s ease, transform 0.3s 0.1s ease;
}
.tm-overlay--open .tm-header { opacity: 1; transform: translateY(0); }

.tm-title {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.30em;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
}
.tm-sub {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.30);
}
.tm-close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.tm-close:hover { background: rgba(255,255,255,0.16); color: rgba(255,255,255,0.9); }

/* 3D stage — wheel-driven, no CSS scroll */
.tm-stage {
  position: relative;
  flex: 1;
  overflow: visible;
  touch-action: none;
}

/* Card stack — fills stage, cards are absolute within */
.tm-stack {
  position: relative;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

/* Individual version card */
.tm-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 620px;
  max-width: 84vw;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  transform-origin: center center;
  will-change: transform, opacity, filter;
  transition: filter 0.2s, box-shadow 0.2s;
  pointer-events: auto;
  cursor: default;
  box-shadow: 0 32px 100px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.10);
}

/* Full-bleed face — dark gradient base */
.tm-card__face {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, rgba(18,20,30,1) 0%, rgba(10,11,18,1) 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Left accent strip */
.tm-card__accent {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  opacity: 0.9;
}

/* Main body area */
.tm-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 32px 16px 36px;
  gap: 14px;
}

/* Headline preview */
.tm-card__hl {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: rgba(255,255,255,0.90);
  max-width: 400px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Metric pills */
.tm-card__pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tm-card__pill {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  padding: 3px 10px;
}

/* Footer row */
.tm-card__foot {
  padding: 12px 32px 16px 36px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.tm-card__ts {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.tm-card__diff {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 9px;
  font-weight: 400;
  color: rgba(255,255,255,0.28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Screenshot thumbnail — full-bleed behind card content */
.tm-card__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  z-index: 0;
}
/* Overlay gradient so text stays legible over thumbnail */
.tm-card__body--over {
  position: relative;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(6,8,16,0.96) 0%,
    rgba(6,8,16,0.70) 60%,
    rgba(6,8,16,0.30) 100%);
}
.tm-card__foot--over {
  position: relative;
  z-index: 1;
  background: rgba(4,5,12,0.80);
}

/* Seed / test card — blank neon outline */
.tm-card__face--seed {
  background: rgba(8,9,14,0.95);
  border: 1px solid var(--neon, #5b8fff);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--neon, #5b8fff) 25%, transparent),
    inset 0 0 40px color-mix(in srgb, var(--neon, #5b8fff) 6%, transparent);
}

/* Version badge — top right, colored to match accent */
.tm-card__ver {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Restore button — appears on hover of receded cards */
.tm-card__restore {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  padding: 8px 20px;
  border: none;
  border-radius: 100px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset;
  color: rgba(255,255,255,0.80);
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s, background 0.15s;
}
.tm-card--hovered .tm-card__restore {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.tm-card__restore:hover { background: rgba(255,255,255,0.20); }

/* Front card — full opacity, no blur */
.tm-card--front {
  z-index: 100;
  cursor: default;
}

/* Hovered receded card — nudge forward */
.tm-card--hovered {
  box-shadow:
    0 32px 100px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.14);
}

/* Prev / Next nav arrows */
.tm-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14) inset;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.tm-nav:hover {
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.95);
  transform: translateY(-50%) scale(1.08);
}
.tm-nav:active { transform: translateY(-50%) scale(0.95); }
.tm-nav--prev { left: 24px; }
.tm-nav--next { right: 24px; }

/* Empty state */
.tm-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s 0.2s;
}
.tm-overlay--open .tm-empty { opacity: 1; }
.tm-empty__icon {
  font-size: 36px;
  opacity: 0.15;
  margin-bottom: 14px;
}
.tm-empty__msg {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.30);
}
.tm-empty__sub {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.18);
  margin-top: 6px;
  letter-spacing: 0.03em;
}

/* Confirmation modal */
.tm-confirm {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tm-confirm[hidden] { display: none !important; }
.tm-confirm__box {
  background: rgba(24,24,30,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 28px 32px 24px;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.tm-confirm__msg {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  margin: 0 0 8px;
}
.tm-confirm__sub {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  margin: 0 0 24px;
  line-height: 1.5;
}
.tm-confirm__btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.tm-confirm__cancel {
  padding: 9px 22px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 100px;
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.tm-confirm__cancel:hover { border-color: rgba(255,255,255,0.30); color: rgba(255,255,255,0.8); }
.tm-confirm__ok {
  padding: 9px 22px;
  border: none;
  border-radius: 100px;
  background: rgba(74,222,128,0.18);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,0.35);
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.tm-confirm__ok:hover { background: rgba(74,222,128,0.30); }

/* ═══════════════════════════════════════════════════════════
   AI PROMPT BAR — centered glass pill, bottom of viewport
   ═══════════════════════════════════════════════════════════ */
.ai-bar {
  position: relative;            /* lives inside .app-dock now */
  z-index: 1;
  width: 56px;                   /* collapsed = circle; expands when open */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: width 0.44s cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-bar--expanded {
  width: min(720px, calc(100vw - 96px));
}

/* X close button on the LEFT of the expanded chat bar. Absolute-positioned
   so it never steals layout space from the collapsed circle (which would
   clip the glass mask). Hidden when collapsed; fades + scales in once the
   bar opens. Click → closeBar(). */
.ai-bar__close {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 28px; height: 28px;
  border: none;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 3;
  opacity: 0;
  transform: translateY(-50%) scale(0.5);
  pointer-events: none;
  transition: opacity 0.20s ease 0.10s,
              transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1) 0.10s,
              color 0.18s, background 0.18s;
}
.ai-bar--expanded .ai-bar__close {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}
.ai-bar__close:hover {
  color: #fff;
  background: rgba(255,80,80,0.18);
}
/* Expanded chat bar: tighten vertical padding so buttons sit centered
   inside the 44px bar, and reserve left room for the close X. */
.ai-bar--expanded .ai-bar__glass {
  padding: 6px 8px 6px 46px;
}

.ai-bar__glass {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: rgba(7, 8, 13, 0.84);
  backdrop-filter: blur(32px) saturate(1.8);
  -webkit-backdrop-filter: blur(32px) saturate(1.8);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 28px;
  padding: 10px 10px 10px 20px;
  box-shadow:
    0 0 0 0.5px rgba(110,140,255,0.18),
    0 12px 48px rgba(0,0,0,0.75),
    inset 0 0.5px 0 rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
  z-index: 1;
  transform-origin: center bottom;
  transition:
    width         0.44s cubic-bezier(0.16, 1, 0.3, 1),
    height        0.40s cubic-bezier(0.16, 1, 0.3, 1),
    padding       0.40s cubic-bezier(0.16, 1, 0.3, 1),
    border-color  0.22s,
    box-shadow    0.22s,
    transform     0.48s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Collapsed appearance — CSS handles geometry, no JS spring */
.ai-bar--collapsed .ai-bar__glass {
  width: 56px;
  height: 56px;
  padding: 0;
  gap: 0;
  justify-content: center;
  cursor: pointer;
}
/* Make collapsed send button match the 36px inner-plate size of other dock circles */
.ai-bar--collapsed .ai-bar__send {
  width: 36px;
  height: 36px;
}

/* Morph icon — geometry animated by JS spring, no CSS transitions on d */
.ai-bar__glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: linear-gradient(
    130deg,
    rgba(100,150,255,0.10) 0%,
    rgba(255,255,255,0.02) 40%,
    rgba(255,80,180,0.06) 70%,
    rgba(60,220,255,0.10) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Mouse-tracked glass light rim — hot spot follows cursor around the stroke */
.ai-bar__glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  /* Radial glow at mouse position, clipped to 1.5px ring via mask */
  background: radial-gradient(
    ellipse 200px 56px at var(--rim-x, 50%) var(--rim-y, 50%),
    rgba(210, 248, 255, 0.48) 0%,
    rgba(56,  210, 255, 0.28) 22%,
    rgba(120, 80,  255, 0.10) 45%,
    transparent 68%
  );
  padding: 1.5px;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.ai-bar--hovered .ai-bar__glass::after { opacity: 1; }

.ai-bar__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.88);
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 13.75px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.39;
  resize: none;
  outline: none;
  overflow-y: auto;
  max-height: 140px;
  caret-color: rgba(255,255,255,0.8);
  position: relative;
  z-index: 1;
  scrollbar-width: none;
  text-align: center;
  transform-origin: center center;
  transition: opacity 0.28s, transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.ai-bar__input::-webkit-scrollbar { display: none; }
.ai-bar__input::placeholder {
  color: rgba(255,255,255,0.20);
  transition: color 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.ai-bar--collapsed .ai-bar__input {
  flex: 0 0 0px;
  max-width: 0;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  padding: 0;
}
.ai-bar--expanded .ai-bar__input {
  flex: 1;
  transition-delay: 0.26s;
}

.ai-bar__send {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 0.5px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.14);
  transition: background 0.15s, color 0.15s, opacity 0.28s,
              transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-bar__send:hover:not(:disabled) {
  background: rgba(255,255,255,0.18);
  color: #fff;
  transform: scale(1.08);
}
.ai-bar__send:active { transform: scale(0.94); }
.ai-bar__send:disabled { opacity: 0.35; cursor: not-allowed; }
/* send button is always visible (it IS the FAB in collapsed state) */

/* Morph icon ↔ spinner swap */
.ai-bar__spinner { display: none; }
.ai-bar--loading .ai-bar__morph-icon { display: none; }
.ai-bar--loading .ai-bar__spinner    { display: block; animation: ai-spin 0.9s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* State borders */
.ai-bar--loading .ai-bar__glass {
  border-color: rgba(100,160,255,0.35);
  box-shadow: 0 0 0 0.5px rgba(100,160,255,0.22), 0 12px 48px rgba(0,0,0,0.75), inset 0 0.5px 0 rgba(100,160,255,0.14);
}
.ai-bar--success .ai-bar__glass {
  border-color: rgba(74,222,128,0.40);
  box-shadow: 0 0 0 0.5px rgba(74,222,128,0.22), 0 12px 48px rgba(0,0,0,0.75);
}
.ai-bar--error .ai-bar__glass {
  border-color: rgba(251,113,133,0.45);
  box-shadow: 0 0 0 0.5px rgba(251,113,133,0.25), 0 12px 48px rgba(0,0,0,0.75);
}

/* Full-screen mouse glow canvas */
#globalCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9986;
  mix-blend-mode: screen;
}

/* Particle canvas — behind glass so backdrop-filter frosts particles behind pill */
.ai-bar__canvas {
  position: absolute;
  inset: -80px;
  pointer-events: none;
  z-index: 0;
}

/* Progress bar — replaced by perimeter comet stroke during loading */
.ai-bar__prog-wrap { display: none; }

/* Full-screen hue overlay — mix-blend-mode: screen so it tints without blocking */
.ai-dust-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9989;
  background: radial-gradient(
    ellipse 160% 90% at 50% 110%,
    rgba(40,210,255,0.07) 0%,
    rgba(120,60,220,0.055) 38%,
    rgba(30,30,65,0.035) 65%,
    transparent 100%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.ai-dust-overlay--on { opacity: 1; }

/* Hover: subtle scale grow + chromatic glow + brighter rim. The
   wrapper height also grows 44 → 48px (and --tl-tag-h grows 76 →
   84px so the bump base plate follows), so the scale here is
   additive softness, not a fake size change. transform-origin at
   the bottom-center so the bar grows up into the bump space rather
   than spilling out of it. */
.ai-bar--hovered .ai-bar__glass {
  transform: scale(1.018);
  transform-origin: 50% 100%;
  border-color: rgba(56,210,240,0.40);
  box-shadow:
    0 0 0 0.5px rgba(56,210,240,0.28),
    0 16px 56px rgba(0,0,0,0.80),
    0 0 64px rgba(56,210,240,0.10),
    0 0 120px rgba(120,80,255,0.07),
    inset 0 0.5px 0 rgba(255,255,255,0.28);
  transition:
    width         0.44s cubic-bezier(0.16, 1, 0.3, 1),
    height        0.40s cubic-bezier(0.16, 1, 0.3, 1),
    padding       0.40s cubic-bezier(0.16, 1, 0.3, 1),
    transform     0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color  0.80s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow    0.80s cubic-bezier(0.23, 1, 0.32, 1);
}
.ai-bar--hovered .ai-bar__input {
  color: rgba(255,255,255,1.0);
  transition: color 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.ai-bar--hovered .ai-bar__input::placeholder {
  color: rgba(255,255,255,0.38);
  transition: color 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ═══════════════════════════════════════════════════════════
   SHADOW COLOR CHIP — colored square in the panel row
   ═══════════════════════════════════════════════════════════ */
.pw-row--color {
  grid-template-columns: 52px auto auto 1fr 22px 18px;
  align-items: center;
  gap: 8px;
}
.pw-color-chip {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.20);
  background: #000000;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.5),
    0 2px 6px rgba(0,0,0,0.4);
  position: relative;
}
/* Checkerboard pattern shows through transparent colors */
.pw-color-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.08) 75%);
  background-size: 6px 6px;
  background-position: 0 0, 0 3px, 3px -3px, -3px 0;
  z-index: -1;
}
.pw-color-chip:hover { border-color: rgba(255,255,255,0.45); transform: scale(1.08); }
.pw-color-chip__hex {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════
   COLOR PICKER POPOVER — Figma-style floating panel
   ═══════════════════════════════════════════════════════════ */
.pw-cpicker {
  position: fixed;
  z-index: 99999;
  width: 240px;
  border-radius: 12px;
  background: rgba(16, 16, 22, 0.97);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.09) inset,
    0 12px 48px rgba(0,0,0,0.75),
    0 2px 8px rgba(0,0,0,0.5);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pw-cpicker[hidden] { display: none !important; }

/* SV gradient canvas */
.pw-cpicker__sv-wrap {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  cursor: crosshair;
  flex-shrink: 0;
  touch-action: none;
}
.pw-cpicker__sv {
  display: block;
  width: 100%;
  height: 130px;
}
.pw-cpicker__sv-cursor {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
  top: 0;
  left: 0;
  will-change: transform, top, left;
}

/* Hue rainbow slider */
.pw-cpicker__hue {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(to right,
    hsl(0,100%,50%), hsl(30,100%,50%), hsl(60,100%,50%),
    hsl(90,100%,50%), hsl(120,100%,50%), hsl(150,100%,50%),
    hsl(180,100%,50%), hsl(210,100%,50%), hsl(240,100%,50%),
    hsl(270,100%,50%), hsl(300,100%,50%), hsl(330,100%,50%),
    hsl(360,100%,50%));
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.pw-cpicker__hue-thumb {
  position: absolute;
  top: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 2px 5px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
  left: 0;
  will-change: left;
  transition: transform 0.18s cubic-bezier(0.23,1,0.32,1),
              background 0.18s, box-shadow 0.18s, border-color 0.18s;
}
/* Glass refraction on hue picker hover */
.pw-cpicker__hue:hover .pw-cpicker__hue-thumb {
  background:
    radial-gradient(ellipse 58% 48% at 36% 30%,
      rgba(255,255,255,0.52) 0%,
      rgba(255,255,255,0.08) 48%,
      rgba(255,255,255,0.00) 70%),
    rgba(255,255,255,0.04);
  backdrop-filter: brightness(1.9) saturate(2.5) contrast(1.1);
  -webkit-backdrop-filter: brightness(1.9) saturate(2.5) contrast(1.1);
  border-color: rgba(255,255,255,0.60);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.35),
    0 2px 10px rgba(0,0,0,0.55),
    inset 0 1.5px 0 rgba(255,255,255,0.70),
    inset 0 -1px 0 rgba(0,0,0,0.12);
  transform: translate(-50%, -50%) scale(1.10);
}

/* Footer: preview swatch + hex input */
.pw-cpicker__footer {
  display: flex;
  align-items: center;
  gap: 7px;
}
.pw-cpicker__preview {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
}
.pw-cpicker__hash {
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,0.30);
  flex-shrink: 0;
  user-select: none;
}
.pw-cpicker__hex {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  color: rgba(255,255,255,0.82);
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 8px;
  outline: none;
  text-transform: uppercase;
  caret-color: rgba(255,255,255,0.6);
}
.pw-cpicker__hex:focus {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.10);
}

/* ═══════════════════════════════════════════════════════════
   APP DOCK — single bottom-center pill containing the four
   tool circles: Eye (panels), Chat (AI bar), Sparkle (FX knob),
   Timeline. Slides up to clear the bottom timeline panel when
   it's open, so the tools never disappear behind it.
   ═══════════════════════════════════════════════════════════ */
.app-dock {
  /* Dock lives INSIDE .tl-panel__tag. Tighter spacing so the bump
     can hug the four circles without extra padding around them. */
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border-radius: 999px;
  z-index: 1;
  overflow: visible;
  transition: gap 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Explicit overflow:visible on every dock child so nothing clips the
   AI bar's sparkle canvas, which extends 80px past the bar edge. */
.app-dock > .panel-tog,
.app-dock > .ai-bar,
.app-dock > .fx-knob,
.app-dock > .tl-tog,
.app-dock > .comment-tog { overflow: visible; }
/* The AI bar GLASS still needs its own clip for the morph icon mask
   and the inner pill background. */
.ai-bar__glass { overflow: hidden; }
/* Outer glass tray — subtle but clearly readable behind the 4 circles */
/* No backing on the dock — the timeline's bump pseudo provides the
   single rounded shape that wraps around the four circles. The
   .app-dock element is invisible itself (no bg, no border, no
   pseudo). Just a flex layout container. */

/* Snap collapse: non-eye children animate to width 0 with a spring
   easing while fading + scaling. The pill auto-shrinks around the
   lone eye and stays centered. NB: overflow stays visible so the
   FX knob's piano-cascade canvas (which intentionally overflows the
   56px circle) doesn't get masked. */
.app-dock > :not(.panel-tog) {
  flex-shrink: 0;
  transform-origin: center;
  transition: width     0.34s cubic-bezier(0.34, 1.56, 0.64, 1),
              max-width 0.34s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity   0.18s ease,
              transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* AI bar wrapper stays overflow:visible so its sparkle canvas can
   extend past the 56px circle. The .ai-bar__glass keeps its own
   overflow:hidden internally for the morph icon mask. */
.app-dock > .ai-bar { overflow: visible; }
.ai-bar__canvas {
  overflow: visible;
  pointer-events: none;
}
.app-dock--collapsed { gap: 0; }
.app-dock--collapsed > :not(.panel-tog) {
  width: 0;
  max-width: 0;
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}

/* Chat mode: when the AI bar is expanded, hide the eye / sparkle /
   timeline circles so the chat input has the dock's full attention.
   Same snap-spring as the eye-collapse path. */
.app-dock--chat-mode > .panel-tog,
.app-dock--chat-mode > .fx-knob,
.app-dock--chat-mode > .tl-tog,
.app-dock--chat-mode > .comment-tog {
  width: 0;
  max-width: 0;
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}
.app-dock--chat-mode { gap: 0; }

/* AI bar width tiers — collapsed circle (default), expanded chat,
   eye-collapsed (0). Specificity high enough that the chat-mode
   sibling-shrink rules above don't override the expanded width. */
.app-dock > .ai-bar              { width: 56px;  max-width: 56px; height: 56px; }
.app-dock > .ai-bar.ai-bar--expanded {
  width:     min(820px, calc(100vw - 64px));
  max-width: min(820px, calc(100vw - 64px));
  height:    44px;
  transition: width 0.44s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Housing grows in lockstep with the bar's own hover state and with
   the send/close button hovers so the wrapper always fully encases
   its contents. */
.app-dock > .ai-bar.ai-bar--expanded.ai-bar--hovered,
.app-dock > .ai-bar.ai-bar--expanded:has(.ai-bar__send:hover:not(:disabled)),
.app-dock > .ai-bar.ai-bar--expanded:has(.ai-bar__close:hover) {
  height: 48px;
}
.app-dock--collapsed > .ai-bar   { width: 0;     max-width: 0; }
/* Glass tracks the wrapper exactly when expanded — no auto growth. */
.app-dock > .ai-bar.ai-bar--expanded .ai-bar__glass {
  width: 100%;
  height: 100%;
}

/* ── Shared glass-circle base — panel-tog + fx-knob ──── */
.panel-tog,
.fx-knob {
  position: relative;       /* lives inside .app-dock now */
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0.5px solid rgba(255,255,255,0.12);
  background: rgba(7, 8, 13, 0.84);
  backdrop-filter: blur(32px) saturate(1.8);
  -webkit-backdrop-filter: blur(32px) saturate(1.8);
  box-shadow:
    0 0 0 0.5px rgba(110,140,255,0.18),
    0 12px 48px rgba(0,0,0,0.75),
    inset 0 0.5px 0 rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.22s, border-color 0.22s, box-shadow 0.22s;
  padding: 0;
}
.panel-tog:hover,
.fx-knob:hover,
.fx-knob--dragging {
  opacity: 1;
  border-color: rgba(56,210,240,0.38);
  box-shadow:
    0 0 0 0.5px rgba(56,210,240,0.22),
    0 16px 56px rgba(0,0,0,0.80),
    0 0 48px rgba(56,210,240,0.07),
    inset 0 0.5px 0 rgba(255,255,255,0.22);
}
.panel-tog--panels-hidden { opacity: 0.72; }

/* ── Balaclava panel toggle ───────────────────────────── */
.panel-tog {
  cursor: pointer;
  color: rgba(255,255,255,0.85);
}

/* Inner glass plate — matches AI bar send button */
.panel-tog__plate {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 0.5px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.14), 0 1px 4px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   FX KNOB — 56px glass circle, bottom-right, piano cascade
   ═══════════════════════════════════════════════════════════ */
.fx-knob {
  cursor: ns-resize;
  user-select: none;
  -webkit-user-select: none;
  overflow: visible;
  opacity: 0.85;
  color: rgba(255,255,255,0.85);
}
.fx-knob:hover { opacity: 1; }
.fx-knob__icon {
  position: relative;
  z-index: 2;          /* above .fx-knob__canvas particles */
  pointer-events: none;
}

/* Inner glass plate on knob — canvas draws ticks on top of it */
.fx-knob__plate {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 0.5px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.10), 0 1px 4px rgba(0,0,0,0.3);
  pointer-events: none;
  z-index: 0;
  /* Center the sparkle SVG inside the plate */
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-knob__canvas {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════
   TIMELINE — bottom slide-up panel + 4th dock circle (trigger)
   Design tokens (from spec):
     --tl-bg:        #0d0d14   (panel bg, cool blue-black)
     --tl-bg-alt:    #0a0a12   (track area, slightly darker for depth)
     --tl-border:    rgba(255,255,255,0.08)
     --tl-rule:      rgba(255,255,255,0.06)   (row separator)
     --tl-section:   #4a4a6a   (muted blue-gray micro labels)
     --tl-asset:     #ebebf5   (asset row label)
     --tl-value:     #ffffff
     --tl-input-bg:  #1a1a2e
     --tl-dot:       #0a84ff   (KF dot)
     --tl-line:      rgba(10,132,255,0.35)
     --tl-playhead:  #ff453a
   ═══════════════════════════════════════════════════════════ */
:root {
  --tl-bg:       #0d0d14;
  --tl-bg-alt:   #0a0a12;
  --tl-border:   rgba(255,255,255,0.08);
  --tl-rule:     rgba(255,255,255,0.06);
  --tl-section:  #4a4a6a;
  --tl-asset:    #ebebf5;
  --tl-value:    #ffffff;
  --tl-input-bg: #1a1a2e;
  --tl-dot:      #0a84ff;
  --tl-line:     rgba(10,132,255,0.35);
  --tl-playhead: #ff453a;
}

/* ── 4th dock circle — timeline trigger + inner build-marker eye ── */
.tl-tog {
  position: relative;          /* lives inside .app-dock now */
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0.5px solid rgba(255,255,255,0.12);
  background: rgba(7, 8, 13, 0.84);
  backdrop-filter: blur(32px) saturate(1.8);
  -webkit-backdrop-filter: blur(32px) saturate(1.8);
  box-shadow:
    0 0 0 0.5px rgba(110,140,255,0.18),
    0 12px 48px rgba(0,0,0,0.75),
    inset 0 0.5px 0 rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.22s, border-color 0.22s, box-shadow 0.22s;
  padding: 0;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
}
.tl-tog:hover { opacity: 1; }
.tl-tog--on   { opacity: 1; border-color: rgba(10,132,255,0.45); box-shadow:
    0 0 0 0.5px rgba(10,132,255,0.30),
    0 16px 56px rgba(0,0,0,0.80),
    0 0 48px rgba(10,132,255,0.10),
    inset 0 0.5px 0 rgba(255,255,255,0.22); }

.tl-tog__plate {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 0.5px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.14), 0 1px 4px rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}


/* ── Bottom slide-up timeline panel ───────────────────────── */
.tl-panel {
  --tl-tag-h: 76px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 320px;
  min-height: 120px;
  max-height: 50vh;
  background: rgba(13, 13, 20, 0.94);
  /* Top stroke runs across the header level. The bump pseudo above
     extends the same stroke up and over the dock as one continuous
     line — bump bottom shares this border so the two never read
     as separate planes. */
  border-top: 1px solid var(--tl-border);
  box-shadow: 0 -16px 48px rgba(0,0,0,0.55);
  /* Closed: panel fully off-screen below the viewport; only the tag
     (which lives ABOVE the panel via top: -tag-h on .tl-panel__tag)
     is visible. Open: panel translates to translateY(0). */
  transform: translateY(100%);
  transition: transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, 'SF Pro Text', BlinkMacSystemFont, sans-serif;
  color: var(--tl-value);
}
.tl-panel--open { transform: translateY(0); }

/* Whenever the bar itself is hovered (or send/close hovered), grow
   --tl-tag-h so the bump pseudo AND the tag area both grow vertically
   in lockstep with the bar's own height bump. The base plate keeps
   fully encasing the chat bar at every moment, never gets bypassed. */
.tl-panel:has(.ai-bar--hovered),
.tl-panel:has(.ai-bar__send:hover:not(:disabled)),
.tl-panel:has(.ai-bar__close:hover) {
  --tl-tag-h: 84px;
}

/* The bump — a wide rounded extension of the panel that lives ABOVE
   the panel's top stroke. Shares the panel's fill and stroke so the
   border line runs flat across the header level, then arches up and
   over the dock circles in the middle, then back down to flat. ONE
   line, never two planes. */
.tl-panel::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(-1 * var(--tl-tag-h));
  width: 330px;                       /* dock + ~10px each side */
  height: var(--tl-tag-h);
  /* Near-opaque fill identical to the panel so the bump and panel
     read as one solid color regardless of what page content is
     behind them. Backdrop-filter dropped — it was making each
     surface frost different content (different page Y) and that's
     what was creating the mismatch. */
  background: rgba(13, 13, 20, 0.94);
  border: 1px solid var(--tl-border);
  border-bottom: none;
  border-radius: 34px 34px 0 0;
  pointer-events: none;
  z-index: 1;
  /* Spring the bump width when the dock collapses so the bounding
     box hugs whichever circles are visible. Same easing as the dock
     itself uses. height + top spring so the bar's hover bump grows
     softly instead of snapping. */
  transition: width         0.34s cubic-bezier(0.34, 1.56, 0.64, 1),
              height        0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
              top           0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-radius 0.30s ease;
}
/* Eye-only state: bump shrinks to wrap just the eye circle with
   even padding on all sides. */
.tl-panel:has(.app-dock--collapsed)::before {
  width: 70px;
  border-radius: 35px 35px 0 0;
}
/* Chat-mode state: bump stretches to match the expanded chat bar. */
.tl-panel:has(.app-dock--chat-mode)::before {
  width: min(852px, calc(100vw - 32px));
  border-radius: 38px 38px 0 0;
}
.tl-panel[hidden] { display: flex; }   /* still rendered, just translated off */
.tl-panel--open   { transform: translateY(0); }

/* Tag area — absolute-positioned ABOVE the panel so the panel's
   top border can run flat across the header row. The tag holds the
   dock and lives in the bump's geometry. */
.tl-panel__tag {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(-1 * var(--tl-tag-h, 76px));
  width: 310px;              /* matches bump interior — hugs circles */
  height: var(--tl-tag-h, 76px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  pointer-events: auto;
  /* Spring the tag's height + offset alongside the bump so they
     stay welded as the bar's hover state grows the housing. */
  transition: height 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
              top    0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Existing tl-panel__handle kept as a no-op alias in case other code
   targets it; the tag itself handles the resize gesture now. */

/* Header ──────────────────────────────────────────────── */
.tl-panel__hdr {
  position: relative;        /* lifts above .tl-panel::after bump */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--tl-rule);
  flex-shrink: 0;
}
.tl-panel__hdr-left,
.tl-panel__hdr-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tl-panel__title,
.tl-panel__caret {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tl-section);
}
.tl-panel__caret { font-size: 9px; }

.tl-panel__divider {
  width: 1px; height: 18px;
  background: var(--tl-rule);
}

/* Y/X axis pill toggle — matches Pro/Newb pill style */
.tl-axis {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 2px;
}
.tl-axis__btn {
  border: none;
  background: transparent;
  color: var(--tl-section);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.tl-axis__btn--on {
  background: var(--tl-dot);
  color: #fff;
}

/* + ADD ASSET ghost button */
.tl-add {
  border: none;
  background: transparent;
  color: var(--tl-section);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.tl-add:hover { color: var(--tl-asset); background: rgba(255,255,255,0.04); }

/* Right-side icon buttons (history, refresh) */
.tl-icon-btn {
  width: 22px; height: 22px;
  border: none;
  background: transparent;
  color: var(--tl-section);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.tl-icon-btn:hover { color: var(--tl-value); background: rgba(255,255,255,0.05); }

/* PUBLISH pill — disabled (gray) until draft != published */
.tl-publish {
  border: none;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.32);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tl-publish:not(:disabled) {
  background: var(--tl-dot);
  color: #fff;
}
.tl-publish:disabled { cursor: not-allowed; }

/* Body: tree | tracks ───────────────────────────────────── */
.tl-panel__body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 0;     /* lets children scroll */
}

.tl-tree {
  border-right: 1px solid var(--tl-rule);
  overflow-y: auto;
  background: rgba(13, 13, 20, 0.18);   /* tint over the frosted parent */
  /* Match the 24px ruler height in the tracks pane so tree rows
     and lane rows start at the same y. Without this every dot
     appears one row lower than its label. */
  padding-top: 24px;
  box-sizing: border-box;
}

.tl-tracks {
  position: relative;
  background: rgba(7, 8, 13, 0.30);     /* slightly darker side reads as depth */
  overflow: hidden;
  cursor: ew-resize;
}
.tl-tracks--scrubbing { cursor: grabbing; }

.tl-ruler {
  position: relative;
  height: 24px;
  border-bottom: 1px solid var(--tl-rule);
  background: rgba(7, 8, 13, 0.30);
  flex-shrink: 0;
}
/* 0 / 25 / 50 / 75 / 100 marks via gradient — keeps it pure CSS for now */
.tl-ruler::before,
.tl-ruler::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--tl-rule); }
.tl-ruler::before { left: 25%; }
.tl-ruler::after  { left: 50%; }

.tl-lanes {
  position: absolute;
  top: 24px; left: 0; right: 0; bottom: 0;
  overflow-y: auto;
}

.tl-playhead {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--tl-playhead);
  pointer-events: none;
  z-index: 5;
  /* JS sets transform: translateX */
}
.tl-playhead__head {
  position: absolute;
  top: 0; left: -3px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--tl-playhead);
}

/* Empty-state hint while no asset rows are wired yet */
.tl-tree:empty::after,
.tl-tree[data-empty]::after {
  content: 'NO KEYFRAMES YET';
  display: block;
  padding: 14px;
  color: var(--tl-section);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
}

/* ── Asset (panel) header row ────────────────────────────── */
/* Row height locked to 32px (matches .tl-lane--asset) so the tree
   and the tracks pane align row-for-row — dots can't drift into a
   neighboring metric's lane. */
/* Asset row total height MUST equal .tl-lane--asset height (32px).
   border-bottom moved onto __hdr so .tl-asset's outer dimensions match
   the lane exactly — no 0.5px drift accumulating per row. */
.tl-asset {
  height: 32px;
  box-sizing: border-box;
}
.tl-asset__hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 32px;
  border-bottom: 0.5px solid var(--tl-rule);
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}
.tl-asset__caret {
  width: 10px; height: 10px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--tl-section);
  font-size: 9px;
  transition: transform 0.15s ease;
}
.tl-asset--open .tl-asset__caret { transform: rotate(90deg); }
.tl-asset__swatch {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tl-asset-color, var(--tl-dot));
  flex-shrink: 0;
}
.tl-asset__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tl-asset);
}
.tl-asset__count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tl-section);
}

/* Property sub-rows (collapsed by default, shown when --open) */
.tl-prop {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 26px;
  height: 28px;          /* match .tl-lane height so rows align across */
  border-bottom: 0.5px solid var(--tl-rule);
  box-sizing: border-box;
}
.tl-asset--open + .tl-prop,
.tl-asset--open ~ .tl-prop[data-asset-id] { display: flex; }
.tl-prop__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tl-section);
  white-space: nowrap;
}
.tl-prop__count {
  margin-left: auto;
  font-size: 10px;
  color: var(--tl-section);
}

/* ── Lane rows in the tracks pane (one per asset/property) ── */
.tl-lane {
  position: relative;
  height: 28px;
  border-bottom: 0.5px solid var(--tl-rule);
  box-sizing: border-box;
}
.tl-lane--asset {
  height: 32px;           /* match .tl-asset__hdr height in the tree */
  background: rgba(255,255,255,0.02);
}
.tl-lane--prop  { display: none; }    /* shown only when parent asset is --open */

/* Aggregate bar for collapsed assets — earliest..latest KF span */
.tl-lane__bar {
  position: absolute;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  pointer-events: none;
}
/* Per-metric segment line between consecutive KFs in a property lane.
   Tinted with the parent asset color so the connection reads at a
   glance (cyan = shadow, pink = content, etc.). */
.tl-lane__seg {
  position: absolute;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--tl-asset-color, rgba(255,255,255,0.40));
  opacity: 0.55;
  border-radius: 1px;
  pointer-events: none;
}

/* KF dot in the timeline track */
.tl-dot {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;       /* center on scrollPosition */
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--tl-asset-color, var(--tl-dot));
  border: 1.5px solid rgba(0,0,0,0.55);
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}
.tl-dot:hover { transform: scale(1.4); }

/* Hover: subtle grow only — no color change, no ✕. Hover should never
   read as "this is going to delete" because the cursor passes over a
   dot all the time during click + drag. */
.tl-dot:hover {
  transform: scale(1.4);
}
/* Selected: keep the asset color, add a clean white stroke so the
   keyframe reads as 'picked' without the alarming red. Delete is
   the row's red X-button (the + flips into ✕ when selected) or
   the Delete / Backspace key. No ✕ on the dot itself. */
.tl-dot--selected {
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border: 2px solid #ffffff;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.55),
    0 0 12px var(--tl-asset-color, rgba(255,255,255,0.45));
  z-index: 6;
}

/* Per-row + button (timeline tree side). The box stays square; only
   its inner glyph rotates so the + → ✕ flip is the icon's animation,
   not the bounding box turning into a diamond. */
.tl-row-add {
  margin-left: 8px;
  width: 18px; height: 18px;
  border: 0.5px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.55);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.20s, background 0.20s, border-color 0.20s;
}
.tl-row-add:hover {
  color: #fff;
  background: rgba(56,210,255,0.18);
  border-color: rgba(56,210,255,0.40);
}
.tl-row-add__char {
  display: inline-block;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Selected metric: button turns red, glyph rotates 45° (+ → ✕). */
.tl-row-add--delete {
  background: rgba(255,80,80,0.92);
  color: #fff;
  border-color: rgba(255,80,80,0.55);
}
.tl-row-add--delete:hover {
  background: rgba(255,80,80,1);
  border-color: rgba(255,80,80,0.85);
}
.tl-row-add--delete .tl-row-add__char {
  transform: rotate(45deg);
}

/* Color rows get a native swatch picker. Match the value-field
   styling so it reads as part of the same row group. */
.tl-prop__color {
  width: 56px;
  height: 18px;
  margin-left: auto;
  margin-right: 4px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
}
.tl-prop__color::-webkit-color-swatch-wrapper { padding: 2px; }
.tl-prop__color::-webkit-color-swatch         { border: none; border-radius: 3px; }
.tl-prop__color::-moz-color-swatch            { border: none; border-radius: 3px; }

/* Editable value field on each property row */
.tl-prop__val {
  width: 56px;
  margin-left: auto;
  margin-right: 4px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.10);
  border-radius: 4px;
  color: var(--tl-value);
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 6px;
  outline: none;
  text-align: right;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color 0.15s, background 0.15s;
}
.tl-prop__val:focus {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
  border-color: rgba(56,210,255,0.45);
  background: rgba(255,255,255,0.07);
}

/* ═══════════════════════════════════════════════════════════
   BELOW-HERO — triptych + Take a closer look
   Pure-black Apple marketing layout. No padding on outer
   container; each section spans full viewport width.
   ═══════════════════════════════════════════════════════════ */

/* lp-below + lp-tri removed — assets moved into .s3-triptych cards */



/* ══════════════════════════════════════════════════════════
   SCROLL DRIVER  —  unified growing pill → panel
   Left-edge tag: 26×56px collapsed → 258px×full open.
   Same glass/border as other design buttons.
   ══════════════════════════════════════════════════════════ */

/* ── Unified pill → panel ──────────────────────────────── */
.drv-tab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  /* Collapsed: only the 26px icon strip is visible */
  width: 26px;
  max-height: 56px;
  overflow: hidden;
  border: 0.5px solid rgba(255,255,255,0.12);
  border-left: none;
  border-radius: 0 10px 10px 0;
  background: rgba(7,8,13,0.92);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 2px 0 24px rgba(0,0,0,0.55);
  opacity: 0.60;
  font-family: -apple-system,'SF Pro Text','Helvetica Neue',sans-serif;
  -webkit-font-smoothing: antialiased;
  transition:
    width       0.34s cubic-bezier(0.23,1,0.32,1),
    max-height  0.34s cubic-bezier(0.23,1,0.32,1),
    border-radius 0.34s cubic-bezier(0.23,1,0.32,1),
    border-color  0.20s,
    opacity       0.20s,
    backdrop-filter 0.34s;
  scrollbar-width: none;
}
.drv-tab::-webkit-scrollbar { display: none; }
.drv-tab:hover { opacity: 0.88; }

/* Open state — grows to full panel */
.drv-tab--open {
  width: 258px;
  max-height: min(86vh, 640px);
  border-radius: 0 16px 16px 0;
  border-color: rgba(56,210,255,0.22);
  background: rgba(7,8,13,0.96);
  backdrop-filter: blur(48px) saturate(1.6);
  opacity: 1;
  overflow-y: auto;
}

/* ── Header row — always 258px wide; only left 26px shows when closed */
.drv-tab__hdr {
  width: 258px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 10px 0 0;
  gap: 8px;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
  box-sizing: border-box;
}

.drv-tab__icon {
  width: 26px;
  height: 56px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.drv-tab__icon:hover svg { opacity: 0.9; }

.drv-tab__mode {
  font-size: 9px; font-weight: 700; letter-spacing: 0.18em;
  color: rgba(56,210,255,0.82); flex: 1;
  white-space: nowrap;
}

.drv-tab__px {
  font-size: 9px; color: rgba(255,255,255,0.30);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.drv-tab__close {
  width: 18px; height: 18px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.45);
  font-size: 14px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; padding: 0; line-height: 1;
  flex-shrink: 0;
}
.drv-tab__close:hover { background: rgba(255,255,255,0.16); color: rgba(255,255,255,0.80); }

/* ── Body — content visible only when open (clipped otherwise) */
.drv-tab__body {
  width: 258px;
  box-sizing: border-box;
}

/* ── Global ANIMATE button ──────────────────────────────── */
.pw-animate-btn {
  position: fixed;
  bottom: 96px;
  left: 28px;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(7,8,13,0.88);
  backdrop-filter: blur(20px);
  color: rgba(255,255,255,0.55);
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.50);
  white-space: nowrap;
  overflow: hidden;
  /* pill grows/shrinks to fit content */
  max-width: 160px;
  transition:
    max-width    0.32s cubic-bezier(0.23,1,0.32,1),
    border-color 0.22s,
    color        0.22s,
    background   0.22s,
    box-shadow   0.22s;
}
.pw-animate-btn:hover {
  border-color: rgba(56,210,255,0.45);
  color: rgba(255,255,255,0.85);
}
.pw-animate-btn--on {
  max-width: 100px;
  border-color: rgba(255,80,80,0.70);
  background: rgba(18,4,4,0.92);
  color: rgba(255,120,120,1);
  box-shadow: 0 0 0 1px rgba(255,80,80,0.20), 0 4px 20px rgba(255,60,60,0.25);
}

.pw-animate-btn__diamond {
  font-size: 8px;
  color: rgba(56,210,255,0.65);
  transition: color 0.22s;
  flex-shrink: 0;
}
.pw-animate-btn--on .pw-animate-btn__diamond {
  color: rgba(255,120,120,0.90);
  animation: kwPulse 1.2s ease-in-out infinite;
}
.pw-animate-btn__label { white-space: nowrap; }

@keyframes kwPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ── RECORD icon button inside each panel header ─────────── */
.pw-panel-anim-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: none;
  color: rgba(255,255,255,0.28);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: color 0.18s;
}
.pw-panel-anim-btn:hover {
  color: rgba(255,255,255,0.65);
}
.pw-panel-anim-btn--on {
  color: rgba(255,80,80,1);
}
.pw-panel-anim-btn--on .pw-rec-dot {
  animation: rec-blink 0.75s ease-in-out infinite;
}

/* rec-dot base */
.pw-rec-dot { flex-shrink: 0; display: block; }
.pw-rec-dot__fill { transition: opacity 0.18s; }

@keyframes rec-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.1; }
}

/* ── ◆ Per-slider keyframe snap button ──────────────────── */
.pw-kf-snap {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  grid-column: 6 / 7;
  border: none;
  background: none;
  color: rgba(255,255,255,0.20);
  cursor: pointer;
  padding: 0;
  border-radius: 3px;
  transition: color 0.15s, transform 0.18s cubic-bezier(0.16,1,0.3,1);
}
.pw-kf-snap svg { display: block; }
.pw-kf-snap:hover           { color: rgba(56,210,255,0.90); transform: scale(1.25); }
.pw-kf-snap--has            { color: rgba(56,210,255,0.55); }
.pw-kf-snap--has:hover      { color: rgba(56,210,255,1); transform: scale(1.25); }
.pw-kf-snap--here           { color: rgba(56,210,255,1); transform: scale(1.1); }
.pw-kf-snap--flash          { color: rgba(56,210,255,1) !important; transform: scale(1.55) !important; }
.pw-kf-snap--here:hover     { color: rgba(56,210,255,1); transform: scale(1.25); }

/* ── ✕ Per-slider delete button — appears left of diamond when KF exists here ── */
.pw-kf-del {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: rgba(255,80,80,0);
  cursor: pointer;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  transition: color 0.15s, opacity 0.15s, transform 0.18s cubic-bezier(0.16,1,0.3,1);
  z-index: 2;
}
.pw-kf-del svg { display: block; }
.pw-kf-del--visible {
  color: rgba(255,80,80,0.55);
  opacity: 1;
  pointer-events: auto;
}
.pw-kf-del--visible:hover {
  color: rgba(255,80,80,1);
  transform: translateY(-50%) scale(1.25);
}

/* ── Selected KF dot in the sidebar ── */
.drv-overlay__dot--selected {
  background: rgba(255,220,56,0.90) !important;
  box-shadow: 0 0 0 2px rgba(255,220,56,0.40), 0 1px 3px rgba(0,0,0,0.6) !important;
}

/* ── ◆ KF count badge in each panel header ──────────────── */
.pw-anim-badge {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.22);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  border: 0.5px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  user-select: none;
  white-space: nowrap;
}
.pw-anim-badge:hover { color: rgba(255,255,255,0.50); border-color: rgba(255,255,255,0.12); }
.pw-anim-badge--active {
  color: var(--badge-color, rgba(56,210,255,1));
  border-color: var(--badge-color, rgba(56,210,255,0.35));
  text-shadow: 0 0 8px var(--badge-color, rgba(56,210,255,0.50));
}
.pw-anim-badge--bypassed {
  color: rgba(255,80,80,0.70);
  border-color: rgba(255,80,80,0.25);
  text-shadow: 0 0 8px rgba(255,80,80,0.35);
}

/* ── Right-edge keyframe sidebar — always visible ──────── */
.drv-overlay {
  position: fixed;
  top: 0;
  /* Inset from right edge so KF dots clear the browser scrollbar
     (~15-17px on Mac, up to 20px on Windows) and are clickable. */
  right: 20px;
  width: 48px;
  height: 100vh;
  z-index: 10002;
  pointer-events: none;
  opacity: 1;
}

.drv-overlay__col {
  position: absolute;
  top: 0;
  height: 100%;
  width: 2px;
  pointer-events: none;
}

/* Dim full-height track — always visible when panel has any KFs */
.drv-overlay__track {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: var(--track-color, rgba(255,255,255,0.15));
  opacity: 0.18;
  border-radius: 0;
  pointer-events: none;
}

/* Segment lines between consecutive KF dots */
.drv-overlay__line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  min-height: 4px;
  background: var(--track-color, rgba(255,255,255,0.5));
  opacity: 0.75;
  border-radius: 2px;
}
/* Canvas draws the live line during drag — hide the static divs */
.drv-overlay--dragging .drv-overlay__track,
.drv-overlay--dragging .drv-overlay__line {
  opacity: 0;
}

/* Keyframe dot — clickable circle */
.drv-overlay__dot {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--track-color, #fff);
  border: 1.5px solid rgba(0,0,0,0.70);
  box-shadow:
    0 0 8px var(--track-color, rgba(255,255,255,0.5)),
    0 0 2px rgba(0,0,0,0.5);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.15s, box-shadow 0.15s;
}
.drv-overlay__dot:hover {
  /* Hover ≠ delete. Subtle grow + glow only; cursor stays a pointer
     so click+drag reads as the primary action. */
  transform: translate(-50%, -50%) scale(1.5);
  box-shadow:
    0 0 16px var(--track-color, rgba(255,255,255,0.8)),
    0 0 4px rgba(0,0,0,0.5);
}
.drv-overlay__dot--kf-selected {
  /* Selected: red + ✕ visible. Double-click / X click / Delete key
     all remove. Single click anywhere else clears. */
  transform: translate(-50%, -50%) scale(1.8);
  background: rgba(255,80,80,0.95);
  box-shadow:
    0 0 16px rgba(255,80,80,0.55),
    0 0 4px rgba(0,0,0,0.5);
}
/* Same pattern on the build column: small ✕ badge top-right of the
   selected dot. Body of the dot keeps drag-to-move behavior. */
.drv-overlay__dot__x {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,80,80,0.98);
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  line-height: 12px;
  text-align: center;
  display: none;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.drv-overlay__dot--kf-selected .drv-overlay__dot__x { display: block; }
.drv-overlay__dot--dragging {
  transform: translate(-50%, -50%) scale(2);
  box-shadow:
    0 0 20px var(--track-color, rgba(255,255,255,1)),
    0 0 6px rgba(0,0,0,0.6);
  cursor: grabbing;
  transition: none;
  z-index: 10;
}

/* Pending dot — first KF set, waiting for second */
.drv-overlay__dot--pending {
  opacity: 0.35;
  border-style: dashed;
  box-shadow: none;
}
.drv-overlay__dot--pending:hover {
  opacity: 0.8;
  transform: translate(-50%, -50%) scale(1.4);
}

/* KF bypass toggle button */
.drv-overlay__bypass {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 18px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
  font-family: 'SF Mono','Menlo',monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  z-index: 10;
}
.drv-overlay__bypass:hover {
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.95);
}
.drv-overlay__bypass--off {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.45);
  color: #ef4444;
}
.drv-overlay__bypass--clear {
  bottom: 36px;
  width: 36px;
  border-color: rgba(239,68,68,0.35);
  color: rgba(239,68,68,0.60);
}
.drv-overlay__bypass--clear:hover {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.65);
  color: rgba(239,68,68,0.95);
}

/* Dim all tracks when bypassed */
.drv-overlay--bypassed .drv-overlay__track,
.drv-overlay--bypassed .drv-overlay__line,
.drv-overlay--bypassed .drv-overlay__dot {
  opacity: 0.25;
}

/* Clear-all KFs button */
.drv-overlay__clear {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.35);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  z-index: 10;
}
.drv-overlay__clear:hover {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.45);
  color: #ef4444;
}

/* Current scroll hairline */
.drv-overlay__hair {
  position: absolute;
  left: -6px;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.55);
  pointer-events: none;
  box-shadow: 0 0 6px rgba(255,255,255,0.28);
  z-index: 2;
}

/* Pulse on newly added dot */
@keyframes kfDotIn {
  0%   { transform: translate(-50%,-50%) scale(0.3); opacity: 0; }
  60%  { transform: translate(-50%,-50%) scale(1.8); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1);   opacity: 1; }
}
.drv-overlay__dot--new {
  animation: kfDotIn 0.35s cubic-bezier(0.16,1,0.3,1) forwards;
}

/* ── Track selector ───────────────────────────────────── */
.drv-tracks {
  padding: 8px 12px 6px;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; gap: 2px;
}
.drv-track-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 6px; cursor: pointer;
  transition: background 0.15s;
}
.drv-track-row:hover        { background: rgba(255,255,255,0.05); }
.drv-track-row--active      { background: rgba(255,255,255,0.08); }
.drv-track-dot   { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.drv-track-label { font-size: 11px; color: rgba(255,255,255,0.55); font-weight: 500; flex: 1; }
.drv-track-row--active .drv-track-label { color: rgba(255,255,255,0.92); }
.drv-track-kfc {
  font-size: 9px; color: rgba(255,255,255,0.22);
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,0.06); border-radius: 10px;
  padding: 1px 6px; min-width: 18px; text-align: center;
}
.drv-track-row--active .drv-track-kfc { color: rgba(56,210,255,0.65); background: rgba(56,210,255,0.08); }

/* ── Property sliders ─────────────────────────────────── */
.drv-props {
  padding: 8px 12px 6px;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; gap: 6px;
}
.drv-prop-row {
  display: grid; grid-template-columns: 18px 1fr 48px;
  align-items: center; gap: 8px;
}
.drv-prop-label {
  font-size: 8px; font-weight: 700; letter-spacing: 0.10em;
  color: rgba(255,255,255,0.28);
}
.drv-prop-slider {
  -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 100px; background: rgba(255,255,255,0.10);
  outline: none; cursor: pointer; width: 100%;
  padding: 0 6px; box-sizing: border-box;
  border: 0.5px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.30);
}
.drv-prop-slider::-webkit-slider-runnable-track { border-radius: 100px; }
.drv-prop-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(56,210,255,0.90); cursor: pointer;
  box-shadow: 0 0 6px rgba(56,210,255,0.50), 0 1px 4px rgba(0,0,0,0.4);
  transition: transform 0.18s cubic-bezier(0.23,1,0.32,1), background 0.18s, box-shadow 0.18s;
}
.drv-prop-slider::-webkit-slider-thumb:hover {
  background:
    radial-gradient(ellipse 58% 48% at 36% 30%,
      rgba(255,255,255,0.52) 0%,
      rgba(56,210,255,0.06) 52%,
      rgba(56,210,255,0.00) 72%),
    rgba(56,210,255,0.06);
  backdrop-filter: brightness(1.85) saturate(2.4) contrast(1.12);
  -webkit-backdrop-filter: brightness(1.85) saturate(2.4) contrast(1.12);
  box-shadow:
    0 0 14px rgba(56,210,255,0.55),
    0 0 0 0.5px rgba(56,210,255,0.48),
    inset 0 1.5px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(0,0,0,0.12);
  transform: scale(1.15);
}
.drv-prop-val {
  font-size: 9px; color: rgba(255,255,255,0.40);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ── KF action bar ────────────────────────────────────── */
.drv-kf-bar {
  padding: 8px 12px; display: flex; gap: 7px; align-items: center;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}
.drv-kf-set {
  flex: 1; height: 28px; border-radius: 6px;
  border: 0.5px solid rgba(56,210,255,0.35);
  background: rgba(56,210,255,0.07);
  color: rgba(56,210,255,0.85); font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.drv-kf-set:hover          { background: rgba(56,210,255,0.14); border-color: rgba(56,210,255,0.60); }
.drv-kf-set--flash         { background: rgba(56,210,255,0.28) !important; box-shadow: 0 0 14px rgba(56,210,255,0.40); }
.drv-kf-clear {
  height: 28px; padding: 0 9px; border-radius: 6px;
  border: 0.5px solid rgba(255,255,255,0.09); background: transparent;
  color: rgba(255,255,255,0.22); font-size: 8px; font-weight: 600;
  letter-spacing: 0.08em; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.drv-kf-clear:hover { color: rgba(255,80,80,0.70); border-color: rgba(255,80,80,0.28); }

/* ── KF list ──────────────────────────────────────────── */
.drv-kf-list {
  padding: 5px 12px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.drv-kf-empty {
  font-size: 9px; color: rgba(255,255,255,0.20);
  text-align: center; padding: 10px 0;
  line-height: 1.6;
}
.drv-kf-row {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 6px; border-radius: 5px;
  background: rgba(255,255,255,0.025);
  cursor: pointer;
  transition: background 0.12s;
}
.drv-kf-row:hover { background: rgba(255,255,255,0.055); }
.drv-kf-dot  { font-size: 7px; width: 12px; text-align: center; flex-shrink: 0; }
.drv-kf-pct  {
  font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.60);
  min-width: 44px; font-variant-numeric: tabular-nums;
}
.drv-kf-vals {
  font-size: 8px; color: rgba(255,255,255,0.28); flex: 1;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drv-kf-del {
  width: 15px; height: 15px; border: none; background: transparent;
  color: rgba(255,255,255,0.18); font-size: 11px; cursor: pointer;
  border-radius: 3px; display: flex; align-items: center;
  justify-content: center; padding: 0; flex-shrink: 0;
}
.drv-kf-del:hover { color: rgba(255,80,80,0.70); background: rgba(255,80,80,0.07); }

/* ── Three-circle orb animations (tab + knob) ─────────── */
@keyframes kOrb1 { 0%,100%{transform:translate(-1.8px, 0.5px)} 50%{transform:translate(1.2px,-0.8px)} }
@keyframes kOrb2 { 0%,100%{transform:translate(1.5px,-0.5px)} 50%{transform:translate(-1.0px, 1.0px)} }
@keyframes kOrb3 { 0%,100%{transform:translate(0px, 1.2px)} 50%{transform:translate(0.5px,-1.5px)} }
.kOrb1 { animation: kOrb1 2.8s ease-in-out infinite; }
.kOrb2 { animation: kOrb2 3.3s ease-in-out infinite; }
.kOrb3 { animation: kOrb3 2.1s ease-in-out infinite; }


/* ═══════════════════════════════════════════════════════
   SECTION 3 — TRIPTYCH
   ═══════════════════════════════════════════════════════ */
.s3-triptych {
  position: relative;
  z-index: 3;
  background: #111;
  width: 100%;
}

.s3-triptych__grid {
  display: flex;
  gap: 30px;
  padding: 30px;
  box-sizing: border-box;
  height: 100vh;
  max-height: 780px;
  background: #111;
}

.s3-triptych__card {
  position: relative;
  overflow: hidden;
  background: #000;
  flex: 1;
  /* No border-radius — Apple original uses hard corners */
}

/* ── Overshoot wraps — parallax target, sizes to image content ── */
.s3-triptych__wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
}

/* Right (330×654): contained — phone floats with generous inset. */
.s3-triptych__card--right .s3-triptych__wrap {
  height: calc(100% + 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  box-sizing: border-box;
}

/* Left + center: full natural-aspect-ratio — wrap auto-sizes to image height,
   card overflow:hidden clips it. Use panel --tx/--ty/--scale to reposition. */
.s3-triptych__card--left img,
.s3-triptych__card--center img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  object-fit: unset;
}

/* Right: phone silhouette floats contained, centered */
.s3-triptych__card--right img {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  max-width: 265px;
  max-height: 100%;
  object-fit: contain;
}

/* Panel CSS vars still drive per-card transform on all images.
   --grab-sx / --grab-sy: set by grab tool for non-uniform scale.
   When not set they fall back to --scale (uniform). */
.s3-triptych__card img {
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transform: translate(var(--tx, 0%), var(--ty, 0%))
             scaleX(var(--grab-sx, var(--scale, 1)))
             scaleY(var(--grab-sy, var(--scale, 1)))
             rotate(var(--rot, 0deg));
  opacity: var(--opa, 1);
  transition: transform 0.12s ease, opacity 0.12s ease;
}

/* Cards panel goes on the LEFT — keeps Card C unobscured */
.pw-panel--cards {
  right: auto;
  left: 20px;
}

.pw-panel--camera {
  right: auto;
  left: 20px;
}

/* ── Alignment picker — 5-dot quincunx (4 corners + center).
   Lives INLINE in the SCALE row alongside copy + KF icons.
   data-target-x / data-target-y are legacy hooks the JS uses
   to identify which card the picker drives. */
.pw-row--scale {
  /* Extra column at index 6 holds the picker, KF-del / KF land
     in implicit cols 7+8. NUM/UNIT/CP slimmed to 18px each so
     the slider keeps reasonable width. */
  grid-template-columns: 52px 1fr 38px 18px 18px 18px 18px !important;
}
.pw-row--scale .pw-align-picker {
  width: 14px;
  height: 14px;
  display: grid;
  grid-template-columns: 4px 4px 4px;
  grid-template-rows:    4px 4px 4px;
  gap: 1px;
  align-self: center;
  justify-self: center;
}
.pw-align-picker__cell {
  width: 4px;
  height: 4px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.26);
  cursor: pointer;
  padding: 0;
  transition: background 0.14s, box-shadow 0.14s, transform 0.14s;
  -webkit-appearance: none;
  appearance: none;
}
.pw-align-picker__cell--tl { grid-column: 1; grid-row: 1; }
.pw-align-picker__cell--tr { grid-column: 3; grid-row: 1; }
.pw-align-picker__cell--c  { grid-column: 2; grid-row: 2; }
.pw-align-picker__cell--bl { grid-column: 1; grid-row: 3; }
.pw-align-picker__cell--br { grid-column: 3; grid-row: 3; }
.pw-align-picker__cell:hover {
  background: rgba(56,210,255,0.65);
  transform: scale(1.35);
}
.pw-align-picker__cell--active {
  background: #38d2ff;
  box-shadow: 0 0 6px rgba(56,210,255,0.65);
}

/* ── Asset-drop row — standard pw-row grid; drop spans cols 2–6 ── */
.pw-row--asset {
  min-height: 28px;
}
.pw-row--asset .pw-asset-drop {
  grid-column: 2 / 7;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: rgba(255,255,255,0.04);
  border: 0.5px dashed rgba(255,255,255,0.18);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  font-family: inherit;
  color: rgba(255,255,255,0.50);
  height: 26px;
}
.pw-asset-drop:hover {
  background: rgba(56,210,255,0.06);
  border-color: rgba(56,210,255,0.45);
  color: rgba(255,255,255,0.78);
}
.pw-asset-drop--dragover {
  background: rgba(56,210,255,0.14);
  border-color: rgba(56,210,255,0.75);
  border-style: solid;
  color: rgba(255,255,255,0.95);
}
.pw-asset-drop__thumb {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
  background: #000;
  flex-shrink: 0;
  pointer-events: none;
}
.pw-asset-drop__hint {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}

@media (max-width: 734px) {
  .s3-triptych__grid {
    flex-direction: column;
    height: auto;
    max-height: none;
    gap: 4px;
    padding: 4px 0;
  }
  .s3-triptych__card {
    height: 50vw;
    flex: none;
    width: 100%;
  }
  .s3-triptych__card--right {
    height: 70vw;
  }
}

/* ═══════════════════════════════════════════════════════
   SECTION 4 — TAKE A CLOSER LOOK
   ═══════════════════════════════════════════════════════ */
.s4-closer {
  position: relative;
  z-index: 4;
  background: #000;
  width: 100%;
}
.s4-closer__grid {
  display: grid;
  grid-template-columns: 35fr 65fr;
  height: 75vh;
}
.s4-closer__text {
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 48px;
  padding-right: 40px;
}
.s4-closer__headline {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  text-align: left;
  margin: 0;
  letter-spacing: -0.02em;
}
.s4-closer__descriptor {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 12px;
  line-height: 1.5;
  max-width: 28ch;
}
.s4-closer__cta {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  font-size: 14px;
  border-radius: 20px;
  padding: 8px 18px;
  margin-top: 24px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-move),
              border-color var(--dur-fast) var(--ease-move);
}
.s4-closer__cta:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.65);
}
.s4-closer__image {
  overflow: hidden;
  position: relative;
}
.s4-closer__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

@media (max-width: 768px) {
  .s4-closer__grid {
    grid-template-columns: 1fr;
    height: auto;
  }
  .s4-closer__text {
    padding: 48px 24px;
  }
  .s4-closer__headline {
    font-size: 32px;
  }
  .s4-closer__image {
    height: 60vw;
  }
}

/* ═══════════════════════════════════════════════════════════
   SECTION 5 — PRO CAMERA SYSTEM
   z-index: 2 sits BEHIND triptych (z-index:3). Triptych scrolls
   over it, revealing camera beneath. Section height provides
   exactly the scroll travel for triptych to exit cleanly:
     height = 100vh (visible) + min(100vh,780px) (scroll travel)
     margin-top = -min(100vh,780px)  (overlap triptych)
   Net page contribution = 100vh. Scroll ends when triptych exits.
   ═══════════════════════════════════════════════════════════ */

.s5-camera {
  position: relative;
  z-index: 2;
  background: #000;
  height: calc(400vh + min(100vh, 780px));
  margin-top: max(-100vh, -780px);
}

/* ── s6 phone-360 sequence — lives inside s5-camera__sticky ── */
.s6-scrim {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.s6-phone-canvas {
  position: absolute;
  z-index: 5;
  /* intrinsic 9:16 aspect (540×960 source frames) — CSS scales it */
  height: 72vh;
  width: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 60vh);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Sticky viewport — lenses overflow clipped here. */
.s5-camera__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* Depth vignette — overlays cluster, z-index 3 so it paints above lenses */
.s5-camera__shadow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 110% 75% at 60% 50%, transparent 30%, rgba(0,0,0,0.6) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, transparent 18%, transparent 78%, rgba(0,0,0,0.38) 100%);
}

/* ── Lens cluster ─────────────────────────────────────────── */
/* Covers entire sticky viewport; clips lenses at edges */
.s5-camera__cluster {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* Layout: centered in the sticky viewport.
   Explicit width from aspect-ratio avoids width:auto ambiguity on abs elements.
   JS panel X/Y/SCALE apply an additional transform on top. */
.s5-camera__layout {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  height: 88vh;
  width: calc(88vh * 1507 / 1627);
}

/* Background static composite — aspect ratio matches layout exactly,
   so object-fit:fill fills without distortion.
   Brightness boost: the source image is near-black rings on black;
   3× makes the housing structure legible on the dark bg. */
.s5-camera__bg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  filter: brightness(3) contrast(1.1);
}

/* Rotation target: JS sets transform-origin to triangle centroid,
   scroll drives rotate(±15deg). translate is on .layout above
   so we can modify transform here without fighting CSS. */
.s5-camera__centroid {
  position: relative;
  width: 100%;
  height: 100%;
  will-change: transform;
}

/* ── Lenses: pixel-locked to camera_hero_static.jpg (1507×1627).
   All coords use factor = 88vh/1627 so they track the bg image exactly.
   clip-path circle = SVG circular mask; counter-rotation happens on .lens-inner
   so the clip stays fixed while the lens content rotates inside it. */
.s5-camera__lens {
  position: absolute;
  clip-path: circle(50% at 50% 50%);
}

/* Top lens  — bg image center (364, 366)px, radius 354px */
.s5-camera__lens--top {
  width:  calc(88vh * 708 / 1627);
  height: calc(88vh * 708 / 1627);
  top:    calc(88vh *  12 / 1627);
  left:   calc(88vh *  10 / 1627);
}

/* Middle lens — bg image center (1121, 745)px, radius 375px */
.s5-camera__lens--middle {
  width:  calc(88vh * 750 / 1627);
  height: calc(88vh * 750 / 1627);
  top:    calc(88vh * 370 / 1627);
  left:   calc(88vh * 746 / 1627);
}

/* Bottom lens — bg image center (380, 985)px, radius 355px */
.s5-camera__lens--bottom {
  width:  calc(88vh * 710 / 1627);
  height: calc(88vh * 710 / 1627);
  top:    calc(88vh * 630 / 1627);
  left:   calc(88vh *  25 / 1627);
}

/* Inner: counter-rotates around own center so each lens spins in place */
.s5-camera__lens-inner {
  width: 100%;
  height: 100%;
  transform-origin: center;
  will-change: transform;
}

.s5-camera__lens-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Images are square JPEGs with circular lens content on dark bg —
     no border-radius needed; dark corners blend with #111 bg */
}

/* ── Copy overlay ─────────────────────────────────────────── */
.s5-camera__copy {
  position: absolute;
  bottom: 80px;
  left: max(60px, 8vw);
  max-width: min(560px, 44vw);
  opacity: 0;
  will-change: transform, opacity;
  z-index: 2;
  pointer-events: none;
}

.s5-camera__eyebrow {
  color: rgba(255, 255, 255, 0.56);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 6px;
}

.s5-camera__headline {
  color: #f5f5f7;
  font-size: clamp(40px, 4.8vw, 76px);
  font-weight: 700;
  letter-spacing: -0.026em;
  line-height: 1.05;
  margin-bottom: 20px;
}

.s5-camera__body {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .s5-camera__copy {
    bottom: 52px;
    left: 24px;
    max-width: calc(100vw - 48px);
  }
  .s5-camera__eyebrow { font-size: 15px; }
  .s5-camera__headline { font-size: 36px; }
  .s5-camera__body { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════
   VIEWPORT TAG — live size + breakpoint chip (bottom-right)
   ═══════════════════════════════════════════════════════════ */
.vp-tag {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 11000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(7, 8, 13, 0.78);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  box-shadow:
    0 6px 20px rgba(0,0,0,0.6),
    inset 0 0.5px 0 rgba(255,255,255,0.10);
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.78);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none; /* never blocks clicks */
}
.vp-tag__size {
  font-variant-numeric: tabular-nums;
}
.vp-tag__tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(56,210,255,0.18);
  border: 0.5px solid rgba(56,210,255,0.42);
  color: #cdf2ff;
  font-size: 9.5px;
  letter-spacing: 0.16em;
}
.vp-tag__tier--s { background: rgba(255,158,80,0.18);  border-color: rgba(255,158,80,0.42);  color: #ffd9b8; }
.vp-tag__tier--m { background: rgba(196,255,96,0.16);  border-color: rgba(196,255,96,0.40);  color: #e9ffc6; }
.vp-tag__tier--l { background: rgba(56,210,255,0.18);  border-color: rgba(56,210,255,0.42);  color: #cdf2ff; }

/* ── Asset Click System ──────────────────────────────── */
/* Phone and headline start invisible (CSS opacity:0) but lack pointer-events:none,
   so they would swallow clicks on the video below them.
   Make them non-interactive by default; JS re-enables when scroll makes them visible. */
.phone-image   { pointer-events: none; }
.phone-headline { pointer-events: none; }

.pw-asset-target { cursor: pointer; }
.pw-asset-target--hover {
  filter: drop-shadow(0 0 18px rgba(255, 200, 0, 0.65));
  transition: filter 0.15s ease;
}

/* Triptych cards have overflow:hidden — use box-shadow (not clipped by own overflow) */
.s3-triptych__card.pw-asset-target--hover {
  filter: none;
  box-shadow: 0 0 0 2px rgba(255, 200, 0, 0.8), 0 0 24px rgba(255, 200, 0, 0.28);
}

/* Camera lenses have clip-path:circle — brightness shows within clip; drop-shadow may extend outside */
.s5-camera__lens.pw-asset-target--hover {
  filter: brightness(1.18) drop-shadow(0 0 14px rgba(255, 200, 0, 0.6));
  transition: filter 0.15s ease;
}

/* Panel entrance fade in asset-click mode */
.pw-panel { transition: opacity 0.2s ease; }

/* Floating asset label tag */
.pw-asset-tag {
  position: fixed;
  z-index: 2147483000;
  font: 500 10px/1 'SF Mono', ui-monospace, monospace;
  letter-spacing: 0.05em;
  color: rgba(255, 200, 0, 1);
  background: rgba(12, 12, 14, 0.92);
  padding: 4px 8px 5px;
  border-radius: 4px;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.pw-asset-tag--on { opacity: 1; }
.vp-tag__tier--xl{ background: rgba(255,94,176,0.18);  border-color: rgba(255,94,176,0.42);  color: #ffd0e6; }