/* Teleprompterz · V3 "Precision" · sections below the hero (loaded after first paint on the home page) */
/* ==========================================================================
   EDITOR (src/features/editor: EditorPage, layout/TopBar + DesktopLayout + PhoneLayout,
   preview/PreviewPanel, timeline/*, panels/*, export/ExportDialog; editor.css)
   ========================================================================== */
.tzui-ed { container-type: inline-size; container-name: tzui-ed; }
.tzui-ed-root { display: flex; flex-direction: column; height: var(--tzui-ed-height, 820px); overflow: hidden; background: var(--tzui-bg-2); color: var(--tzui-text); position: relative; }
.tzui-ed-surface { background: var(--tzui-bg); border: 1px solid var(--tzui-border); }
.tzui-ed-top { display: flex; height: 56px; flex-shrink: 0; align-items: center; gap: 8px; border-bottom: 1px solid var(--tzui-border); background: var(--tzui-bg); padding: 0 12px; }
.tzui-ed-ib { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 10px; color: var(--tzui-text); }
.tzui-ed-ib--on { background: var(--tzui-primary-glow); color: var(--tzui-primary); }
.tzui-ed-title { flex: 1; min-width: 0; }
.tzui-ed-title > p { display: none; font-size: 10px; line-height: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--tzui-primary); }
.tzui-ed-title > h1, .tzui-ed-title > .kh1 { font-size: 14px; line-height: 20px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.025em; }
.tzui-ed-undo { display: none; align-items: center; }
.tzui-ed-status { display: none; max-width: 220px; font-size: 12px; line-height: 16px; color: var(--tzui-text-2); white-space: nowrap; }
.tzui-ed-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tzui-success); flex-shrink: 0; margin: 0 4px; }
.tzui-ed-top .tzui-btn { padding: 8px 12px; font-size: 12px; line-height: 16px; }
.tzui-ed-top .tzui-btn--primary { padding: 8px 16px; }
.tzui-ed-save { display: none !important; }
.tzui-ed-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tzui-ed-main { min-height: 0; padding: 8px 8px 0; display: flex; flex-direction: column; }
.tzui-ed-preview { flex: 1; min-height: 0; min-width: 0; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.tzui-ed-stagearea { position: relative; flex: 1; min-height: 0; }
.tzui-ed-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: calc(100% - 24px); aspect-ratio: var(--tzui-ed-aspect, 9 / 16); max-width: calc(100% - 24px); overflow: hidden; background: #000; container-type: inline-size; }
.tzui-ed-stage-feed { position: absolute; inset: 0; background: var(--tzui-feed) center / cover no-repeat; }
.tzui-ed-stage--portrait .tzui-ed-stage-feed { background-image: var(--tzui-feed-portrait); }
/* editor caption preset "Box": Inter 700 48px @1080 wide, #000 box at 60%, padding 12, y 0.82 */
.tzui-ed-cap { position: absolute; left: 50%; top: 82%; transform: translate(-50%, -50%); max-width: 90%; text-align: center; font-family: var(--tzui-font); font-weight: 700; font-size: calc(48 / 1080 * 100cqw); line-height: 1.2; letter-spacing: 0; color: #fff; }
.tzui-ed-cap > span { background: rgba(0, 0, 0, .6); padding: calc(12 / 1080 * 100cqw); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tzui-ed-transport { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 4px; }
.tzui-ed-play { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; background: var(--tzui-primary); color: #fff; flex-shrink: 0; }
.tzui-ed-time { padding: 0 8px; font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tzui-text-2); white-space: nowrap; letter-spacing: -0.025em; }
.tzui-ed-time > b { font-weight: 600; color: var(--tzui-text); }
.tzui-ed-tr-r { position: relative; margin-left: auto; display: flex; align-items: center; gap: 4px; }
.tzui-ed-tr-r > .tzui-ed-pop { left: 0; bottom: calc(100% + 4px); }
.tzui-ed-ratio-btn { display: none !important; }
.tzui-ed-split-v, .tzui-ed-split-h { display: flex; align-items: center; justify-content: center; flex: none; }
.tzui-ed-split-v { width: 12px; }
.tzui-ed-split-h { height: 12px; }
.tzui-ed-split-v > i, .tzui-ed-split-h > i { border-radius: 9999px; background: var(--tzui-border); }
.tzui-ed-split-v > i { width: 4px; height: 40px; }
.tzui-ed-split-h > i { width: 40px; height: 4px; }
.tzui-ed-insp { display: none; border-radius: 16px; overflow: hidden; flex-direction: column; min-height: 0; }
.tzui-ed-insp-head { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; background: var(--tzui-bg); border-bottom: 1px solid var(--tzui-border); flex-shrink: 0; }
.tzui-ed-insp-head h2 { font-size: 14px; line-height: 20px; font-weight: 700; }
.tzui-ed-insp-body { flex: 1; overflow: hidden; padding: 16px; display: flex; flex-direction: column; gap: 24px; }
.tzui-ed-act { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--tzui-border); font-size: 12px; font-weight: 600; color: var(--tzui-text); background: var(--tzui-bg); line-height: 16px; }
.tzui-ed-act--danger { color: #ef4444; }
.tzui-ed-sec { display: flex; flex-direction: column; gap: 10px; }
.tzui-ed-sec > h3, .tzui-ed-sec > .kh3 { font-size: 11px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--tzui-text-2); }
.tzui-ed-seg { display: flex; gap: 4px; border-radius: 12px; padding: 4px; background: var(--tzui-bg-2); border: 1px solid var(--tzui-border); }
.tzui-ed-seg > span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; border-radius: 8px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tzui-text-2); padding: 0 8px; white-space: nowrap; }
.tzui-ed-seg > .tzui-on { background: var(--tzui-primary-glow); color: var(--tzui-primary); }
.tzui-ed-insp-body { container-type: inline-size; container-name: tzui-edadd; }
.tzui-ed-tabs { display: flex; }
@container tzui-edadd (max-width: 640px) {
  .tzui-ed-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tzui-ed-tabs > span:last-child:nth-child(3n + 2) { grid-column: span 2; }
}
@container tzui-edadd (min-width: 641px) and (max-width: 939px) {
  .tzui-ed-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tzui-ed-tabs > span { min-height: 36px; }
.tzui-ed-chip { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px; border-radius: 9999px; border: 1px solid var(--tzui-border); background: var(--tzui-bg-2); color: var(--tzui-text-2); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.tzui-ed-chip--row { width: 100%; border-radius: 10px; }
.tzui-ed-chip--on { background: var(--tzui-primary-glow); border-color: var(--tzui-primary); color: var(--tzui-primary); }
.tzui-ed-chip > .tzui-ed-chip-ic { display: inline-flex; width: 16px; justify-content: center; flex-shrink: 0; }
.tzui-ed-chip-hint { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-left: 8px; font-size: 11px; font-weight: 500; color: var(--tzui-text-2); }
.tzui-ed-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tzui-ed-note { font-size: 12px; line-height: 16px; color: var(--tzui-text-2); font-variant-numeric: tabular-nums; }
.tzui-ed-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tzui-ed-ftile { display: block; min-width: 0; padding: 4px; border-radius: 10px; border: 1px solid var(--tzui-border); color: var(--tzui-text-2); text-align: center; }
.tzui-ed-ftile--on { background: var(--tzui-primary-glow); border-color: var(--tzui-primary); color: var(--tzui-primary); }
.tzui-ed-fsw { position: relative; display: block; width: 100%; margin-bottom: 4px; overflow: hidden; border-radius: 6px; background: #222 center / cover no-repeat; padding-top: 56.25%; }
.tzui-ed-fsw > .tzui-ed-fsw-ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .4); color: #fff; }
.tzui-ed-ftile > b { display: block; font-size: 11px; line-height: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tzui-ed-slider { display: block; }
.tzui-ed-slider > span { margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; }
.tzui-ed-slider > span > b { font-weight: 600; }
.tzui-ed-slider > span > i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--tzui-text-2); }
.tzui-ed-slider .tzui-range { margin: 3px 0; }
.tzui-ed-kind { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; color: #fff; background: #3b2a5c; flex-shrink: 0; }
.tzui-ed-cliphead { display: flex; align-items: center; gap: 10px; }
.tzui-ed-cliphead b { display: block; font-size: 14px; line-height: 20px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tzui-ed-cliphead span { display: block; font-size: 12px; line-height: 16px; color: var(--tzui-text-2); font-variant-numeric: tabular-nums; }
.tzui-ed-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* Ratio popover (timeline/Popover.jsx .ed-pop + CanvasPanel in a w-[288px] p-3 box) */
.tzui-ed-pop { position: absolute; z-index: 60; width: 296px; padding: 4px; border-radius: 12px; border: 1px solid var(--tzui-border); background: var(--tzui-bg); color: var(--tzui-text); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.tzui-ed-pop > div { padding: 12px; display: flex; flex-direction: column; gap: 20px; }
.tzui-ed-swatches { display: flex; flex-wrap: wrap; gap: 6px; }

/* timeline */
.tzui-ed-tl { background: var(--tzui-bg); border-top: 1px solid var(--tzui-border); display: flex; flex-direction: column; min-height: 0; flex: 1; user-select: none; }
.tzui-ed-tlbar { display: flex; flex-shrink: 0; align-items: center; gap: 4px; height: 52px; padding: 0 8px; border-bottom: 1px solid var(--tzui-border); }
.tzui-ed-zoom { position: relative; width: 64px; height: 16px; flex-shrink: 0; }
.tzui-ed-zoom::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--tzui-text-2) 35%, transparent); }
.tzui-ed-zoom::after { content: ""; position: absolute; left: 0; width: var(--tzui-zoom, 30%); top: 6px; height: 4px; border-radius: 2px; background: var(--tzui-primary); }
.tzui-ed-zoom > i { position: absolute; top: 0; left: calc(var(--tzui-zoom, 30%) - 8px); width: 16px; height: 16px; border-radius: 50%; background: var(--tzui-primary); }
.tzui-ed-tladd { display: inline-flex; align-items: center; gap: 2px; height: 44px; min-width: 44px; padding: 0 4px; border-radius: 10px; border: 1px solid var(--tzui-border); font-size: 12px; font-weight: 600; color: var(--tzui-text); justify-content: center; line-height: 16px; }
.tzui-ed-tladd > span { display: none; }
.tzui-ed-tlgrow { flex: 1; }
.tzui-ed-tlscroll { position: relative; flex: 1; min-height: 0; overflow: hidden; --tzui-head-w: 68px; --tzui-pps: 80px; }
.tzui-ed-ruler { position: relative; display: flex; height: 45px; background: var(--tzui-bg-2); border-bottom: 1px solid var(--tzui-border); }
.tzui-ed-ruler > .tzui-ed-head { background: var(--tzui-bg-2); border-bottom: 0; }
.tzui-ed-lane { position: relative; flex: 1; overflow: hidden; }
.tzui-ed-tick { position: absolute; bottom: 0; width: 1px; height: 5px; background: var(--tzui-border); }
.tzui-ed-tick--major { height: 10px; background: var(--tzui-text-2); }
.tzui-ed-tick > b { position: absolute; bottom: 11px; left: 3px; font-size: 10px; line-height: 12px; font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--tzui-text-2); letter-spacing: 0; }
.tzui-ed-trow { display: flex; }
.tzui-ed-head { position: relative; z-index: 15; width: var(--tzui-head-w); flex-shrink: 0; background: var(--tzui-bg); border-right: 1px solid var(--tzui-border); border-bottom: 1px solid var(--tzui-border); color: var(--tzui-text); display: flex; flex-direction: column; justify-content: center; padding: 0 6px; }
.tzui-ed-head--active { box-shadow: inset 3px 0 0 var(--tzui-primary); }
.tzui-ed-head-name { display: flex; min-width: 0; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; line-height: 11px; }
.tzui-ed-head-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tzui-ed-head-btns { display: none; align-items: center; }
.tzui-ed-head-btns > span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: var(--tzui-text-2); }
.tzui-ed-head--short .tzui-ed-head-btns > span { height: 22px; }
.tzui-ed-head-more { display: flex; align-items: center; justify-content: space-between; flex-direction: row; padding-left: 6px; }
.tzui-ed-head-more .tzui-ed-head-name { gap: 6px; }
.tzui-ed-head-more .tzui-ed-head-name > span { display: none; }
.tzui-ed-row { position: relative; flex: 1; border-bottom: 1px solid var(--tzui-border); overflow: hidden; }
.tzui-ed-row--active { background: var(--tzui-primary-light); }
.tzui-ed-clip { position: absolute; top: 4px; bottom: 4px; left: calc(16px + var(--s) * var(--tzui-pps)); width: calc(var(--d) * var(--tzui-pps)); border-radius: 8px; overflow: hidden; }
.tzui-ed-clip--video { background: var(--tzui-clip-video); }
.tzui-ed-clip--text { display: flex; align-items: center; background: var(--tzui-clip-text); color: #fff; }
.tzui-ed-clip--audio { background: var(--tzui-clip-audio); }
.tzui-ed-clip--captions { display: flex; align-items: center; background: var(--tzui-clip-captions); color: #fff; }
.tzui-ed-clip--sel { outline: 2px solid var(--tzui-primary); outline-offset: -2px; }
.tzui-ed-thumbs { position: absolute; top: 4px; left: 0; right: 0; bottom: 4px; background: var(--tzui-thumb, url("../assets/shared/product-ui/media/take-1.webp")) left center / auto 100% repeat-x; }
.tzui-ed-handle { position: absolute; top: 0; bottom: 0; width: 20px; background: var(--tzui-primary); opacity: .9; }
.tzui-ed-handle--s { left: 0; border-radius: 8px 0 0 8px; }
.tzui-ed-handle--e { right: 0; border-radius: 0 8px 8px 0; }
.tzui-ed-cliptext { padding: 0 8px; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.025em; }
.tzui-ed-captext { min-width: 0; flex: 1; overflow: hidden; padding: 0 6px; font-size: 11px; line-height: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tzui-ed-clipname { position: absolute; top: 2px; left: 6px; font-size: 10px; line-height: 12px; font-weight: 600; white-space: nowrap; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); z-index: 1; }
.tzui-ed-wave { position: absolute; left: 0; right: 0; top: 14px; bottom: 2px; }
.tzui-ed-wave > svg { display: block; width: 100%; height: 100%; }
.tzui-ed-playhead { position: absolute; top: 0; bottom: 0; left: calc(var(--tzui-head-w) + 16px + var(--tzui-t, 0) * var(--tzui-pps)); width: 2px; margin-left: -1px; background: #ef4444; z-index: 10; pointer-events: none; }
.tzui-ed-playhead::before { content: ""; position: absolute; top: 0; left: -5px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #ef4444; }
.tzui-ed-marker { position: absolute; top: 2px; bottom: 0; left: calc(var(--tzui-head-w) + 16px + var(--m) * var(--tzui-pps)); width: 0; border-left: 1px dashed rgba(245, 158, 11, .55); z-index: 5; }
.tzui-ed-marker::before { content: ""; position: absolute; top: 0; left: -1px; width: 2px; height: 43px; background: #f59e0b; }
.tzui-ed-marker::after { content: ""; position: absolute; top: 0; left: 1px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #f59e0b; }
/* phone bottom toolbar (layout/PhoneLayout.jsx) */
.tzui-ed-toolbar { display: flex; flex-shrink: 0; height: 64px; align-items: center; justify-content: space-around; border-top: 1px solid var(--tzui-border); background: var(--tzui-bg); padding: 0 8px; }
.tzui-ed-tool { display: inline-flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 44px; max-width: 76px; min-height: 52px; border-radius: 12px; color: var(--tzui-text); }
.tzui-ed-tool > span { font-size: 10px; line-height: 15px; font-weight: 600; }
/* export dialog (export/ExportDialog.jsx) */
.tzui-ed-modal { position: absolute; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .6); }
.tzui-dlg { width: 100%; display: flex; flex-direction: column; gap: 20px; border-radius: 24px 24px 0 0; border: 1px solid var(--tzui-border); background: var(--tzui-bg-2); padding: 24px; color: var(--tzui-text); }
.tzui-dlg-head { text-align: center; display: flex; flex-direction: column; gap: 12px; }
.tzui-dlg-ic { margin: 0 auto; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tzui-dlg-ic--primary { background: var(--tzui-primary-glow); color: var(--tzui-primary); }
.tzui-dlg-ic--success { background: rgba(34, 197, 94, .1); color: #22c55e; }
.tzui-dlg h2, .tzui-dlg .kh2 { font-size: 18px; line-height: 28px; font-weight: 700; }
.tzui-dlg-head > div { font-size: 14px; line-height: 20px; color: var(--tzui-text-2); }
.tzui-dlg-bar { height: 8px; width: 100%; overflow: hidden; border-radius: 9999px; background: var(--tzui-bg); }
.tzui-dlg-bar > i { display: block; height: 100%; width: var(--tzui-pct, 42%); border-radius: 9999px; background: var(--tzui-primary); }
.tzui-dlg-pct { margin-top: 8px; text-align: center; font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tzui-dlg-btns { display: flex; gap: 12px; }
.tzui-dlg-btns > * { flex: 1; }
.tzui-dlg-col { display: flex; flex-direction: column; gap: 12px; }
.tzui-dlg-link { margin: 0 auto; min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 12px; font-weight: 600; color: var(--tzui-text-2); text-decoration: underline; }
.tzui-dlg .tzui-spin { animation: tzui-spin 1s linear infinite; }

@container tzui-ed (min-width: 768px) {
  .tzui-ed-modal { align-items: center; }
  .tzui-dlg { max-width: 448px; border-radius: 24px; }
  .tzui-dlg-row { flex-direction: row; }
  .tzui-ed-status { display: block; }
  .tzui-ed-dot { display: none; }
  .tzui-ed-save { display: inline-flex !important; }
  .tzui-ed-undo { display: flex; }
  .tzui-ed-ib { min-width: 36px; min-height: 36px; }
  .tzui-ed-play { width: 40px; height: 40px; }
  .tzui-ed-ratio-btn { display: inline-flex !important; }
  .tzui-ed-main { padding: 12px 12px 0; }
  .tzui-ed-tlscroll { --tzui-head-w: 112px; }
  .tzui-ed-tlbar { height: 44px; }
  .tzui-ed-tladd { height: 32px; padding: 0 10px; gap: 4px; }
  .tzui-ed-tladd > span { display: inline; }
  .tzui-ed-tladd > .tzui-ic:nth-child(2) { display: none; }
  .tzui-ed-zoom { width: 128px; }
  .tzui-ed-ruler { height: 28px; }
  .tzui-ed-marker::before { height: 26px; }
  .tzui-ed-handle { width: 10px; }
  .tzui-ed-head-btns { display: flex; }
  .tzui-ed-head-more .tzui-ed-ib { display: none; }
  .tzui-ed-head-more { flex-direction: column; align-items: stretch; justify-content: center; padding: 0 6px; }
  .tzui-ed-head-more .tzui-ed-head-name { gap: 4px; }
  .tzui-ed-head-more .tzui-ed-head-name > span { display: inline; }
  .tzui-ed-toolbar { display: none; }
}
@container tzui-ed (min-width: 992px) {
  .tzui-ed-title > p { display: block; }
  .tzui-ed-main { flex-direction: row; flex: 1; }
  .tzui-ed-insp { display: flex; width: 40%; min-width: 300px; }
  .tzui-ed-body > .tzui-ed-tl { flex: none; height: var(--tzui-ed-tl-h, 280px); }
  .tzui-ed-split-h { display: flex; }
}
@container tzui-ed (max-width: 574px) {
  .tzui-ed-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container tzui-ed (max-width: 991px) {
  .tzui-ed-split-v { display: none; }
  .tzui-ed-main { flex: none; height: var(--tzui-ed-preview-h, 45%); }
}
@container tzui-ed (max-width: 767px) {
  .tzui-ed-main { height: var(--tzui-ed-preview-h, 38%); padding: 8px 8px 0; }
  .tzui-ed-preview { border-radius: 16px; }
  .tzui-ed-split-h { display: none; }
  .tzui-ed-tl { margin-top: 4px; border: 1px solid var(--tzui-border); border-width: 1px 0 0; }
}

/* ==========================================================================
   SCRIPT (src/pages/Script.jsx detail view, src/pages/CreateScript.jsx)
   ========================================================================== */
.tzui-sc-top { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.tzui-sc-back { display: flex; align-items: center; gap: 8px; color: var(--tzui-gray-label); font-size: 14px; line-height: 20px; font-weight: 500; }
.tzui-sc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--tzui-card); background-image: var(--tzui-card-sheen); border: 1px solid var(--tzui-border); border-radius: 12px; padding: 8px; box-shadow: var(--tzui-shadow-sm); }
.tzui-sc-tools .tzui-select { width: auto; }
.tzui-sc-div { width: 1px; height: 20px; background: var(--tzui-border); }
.tzui-sc-tool { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; padding: 12px 24px; font-size: 12px; line-height: 16px; font-weight: 600; border: 1px solid var(--tzui-border); background: transparent; color: var(--tzui-text); white-space: nowrap; }
.tzui-sc-tool--green { border-color: #10b981; color: #10b981; }
.tzui-sc-tool--primary { border-color: var(--tzui-primary); color: var(--tzui-primary); }
.tzui-sc-tool--indigo { border-color: #6366f1; color: #6366f1; }
.tzui-sc-tool--solid { border: 0; background: var(--tzui-primary); color: #fff; }
.tzui-sc-titlebar { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; border-bottom: 1px solid var(--tzui-border); padding-bottom: 16px; }
.tzui-sc-eyebrow { color: var(--tzui-primary); font-size: 12px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.tzui-sc-titlebar h1 { margin-top: 4px; font-size: 20px; line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; }
.tzui-sc-tactions { display: flex; align-items: center; gap: 16px; }
.tzui-sc-tactions > span { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tzui-primary); }
.tzui-sc-tactions > .tzui-sc-del { color: #ef4444; }
[data-tzui-theme="dark"] .tzui-sc-del { color: #f87171 !important; }
.tzui-sc-stack { display: flex; flex-direction: column; gap: 24px; }
.tzui-sc-body { box-shadow: var(--tzui-shadow-md); display: flex; flex-direction: column; gap: 24px; font-size: 14px; line-height: 20px; }
.tzui-sc-lbl { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--tzui-primary); text-transform: uppercase; margin-bottom: 8px; }
.tzui-sc-hook { color: var(--tzui-text); font-weight: 500; white-space: pre-wrap; }
.tzui-sc-points { display: flex; flex-direction: column; gap: 8px; }
.tzui-sc-points > li { color: var(--tzui-text-2); font-weight: 500; }
.tzui-sc-cta { color: var(--tzui-text); font-weight: 500; font-style: italic; }
.tzui-sc-ins { padding: 20px; }
.tzui-sc-ins-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.tzui-sc-ins-head > div { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 700; }
.tzui-sc-ins-head .tzui-ic { color: var(--tzui-primary); }
.tzui-sc-badge { font-size: 10px; line-height: 15px; padding: 2px 8px; border-radius: 9999px; background: var(--tzui-primary-glow); color: var(--tzui-primary); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.tzui-sc-field { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--tzui-border); }
.tzui-sc-field-h { display: flex; align-items: center; justify-content: space-between; }
.tzui-sc-field-h > span { font-size: 12px; line-height: 16px; color: var(--tzui-gray-label); font-weight: 500; }
.tzui-sc-field p { font-size: 14px; line-height: 20px; color: var(--tzui-text-2); }
.tzui-sc-copy { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--tzui-border); font-size: 12px; font-weight: 600; color: var(--tzui-text-2); }
/* CreateScript */
.tzui-cs-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.tzui-cs-form { border-radius: 20px; background: var(--tzui-card); background-image: var(--tzui-card-sheen); padding: 24px; box-shadow: var(--tzui-shadow-sm); border: 1px solid var(--tzui-border); display: flex; flex-direction: column; gap: 20px; }
.tzui-cs-tabs { display: flex; padding: 6px; background: var(--tzui-bg-2); border-radius: 16px; border: 1px solid var(--tzui-border); }
.tzui-cs-tabs > span { flex: 1; text-align: center; padding: 12px 0; font-size: 13px; line-height: 19.5px; font-weight: 600; border-radius: 12px; color: var(--tzui-text-2); opacity: .7; }
.tzui-cs-tabs > .tzui-on { background: var(--tzui-card); box-shadow: var(--tzui-shadow-sm); color: var(--tzui-primary); opacity: 1; }
.tzui-cs-help { font-size: 12px; line-height: 16px; color: var(--tzui-text-2); padding: 0 4px; }
.tzui-cs-lbl-caps { display: block; font-size: 10px; line-height: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .2em; color: var(--tzui-text); opacity: .6; margin-bottom: 8px; padding-left: 4px; }
.tzui-cs-lbl-caps > em { font-style: normal; color: var(--tzui-primary); }
.tzui-cs-input { width: 100%; border-radius: 12px; border: 1px solid var(--tzui-border); padding: 12px 20px; font-size: 14px; line-height: 20px; background: var(--tzui-bg-2); color: var(--tzui-text-2); }
.tzui-cs-input--focus { border-color: var(--tzui-primary); box-shadow: 0 0 0 2px var(--tzui-primary-glow); color: var(--tzui-text); }
.tzui-cs-caret { display: inline-block; width: 1px; height: 18px; margin-left: 1px; vertical-align: -3px; background: var(--tzui-text); animation: tzui-blink 1s steps(1) infinite; }
.tzui-cs-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.tzui-cs-col { display: flex; flex-direction: column; gap: 8px; }
.tzui-cs-lbl { font-size: 13px; line-height: 19.5px; font-weight: 600; opacity: .75; padding: 0 4px; }
.tzui-cs-lblrow { display: flex; align-items: center; justify-content: space-between; }
.tzui-cs-req { font-size: 11px; line-height: 16px; color: #ef4444; font-weight: 600; }
.tzui-cs-submit { height: 56px; font-size: 15px; border-radius: 12px; box-shadow: var(--tzui-shadow-sm); }
.tzui-cs-aside { border-radius: 20px; background: var(--tzui-card); background-image: var(--tzui-card-sheen); padding: 24px; box-shadow: var(--tzui-shadow-sm); border: 1px solid var(--tzui-border); }
.tzui-cs-aside h2, .tzui-cs-aside .kh2 { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: -0.015em; }
.tzui-cs-sum { margin-top: 8px; }
.tzui-cs-sum > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--tzui-border); }
.tzui-cs-sum > div:last-child { border-bottom: 0; }
.tzui-cs-sum dt { font-size: 12px; line-height: 16px; color: var(--tzui-text-2); }
.tzui-cs-sum dd { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; text-align: right; }
.tzui-cs-sum dd > small { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tzui-text-2); }
.tzui-cs-list { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.tzui-cs-list > li { display: flex; gap: 12px; }
.tzui-cs-list-ic { width: 36px; height: 36px; border-radius: 8px; background: var(--tzui-primary-glow); color: var(--tzui-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tzui-cs-list div > b { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }
.tzui-cs-list div > span { display: block; font-size: 12px; line-height: 1.625; color: var(--tzui-text-2); }
.tzui-cs-aside h2 + .tzui-cs-sum + h2 { margin-top: 20px; }
@container tzui-page (min-width: 575px) {
  .tzui-cs-form { padding: 40px; }
  .tzui-cs-aside { padding: 32px; }
  .tzui-cs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tzui-sc-titlebar { flex-direction: row; align-items: center; justify-content: space-between; }
  .tzui-sc-titlebar h1 { font-size: 24px; }
  .tzui-card--lg { padding: 32px; }
}
@container tzui-page (min-width: 992px) {
  .tzui-sc-top { flex-direction: row; align-items: center; justify-content: space-between; }
  .tzui-cs-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* ==========================================================================
   CAPTIONS (src/pages/CaptionEditor.jsx, src/components/ResponsiveCaptionOverlay.jsx)
   ========================================================================== */
.tzui-cap-head { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; margin-bottom: 32px; gap: 24px; border-bottom: 1px solid var(--tzui-border); padding-bottom: 24px; }
.tzui-cap-head-l { display: flex; align-items: center; gap: 12px; }
.tzui-cap-backbtn { padding: 10px; border-radius: 12px; border: 1px solid var(--tzui-border); color: var(--tzui-text-2); }
.tzui-cap-eyebrow { color: var(--tzui-primary); font-size: 12px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; display: flex; align-items: center; gap: 6px; }
.tzui-cap-head h1 { font-size: 24px; line-height: 1.08; font-weight: 900; letter-spacing: -0.02em; margin-top: 2px; }
.tzui-cap-head-r { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; }
.tzui-cap-head-r .tzui-btn { padding: 10px 16px; font-size: 12px; line-height: 16px; font-weight: 600; justify-content: center; }
.tzui-cap-head-r .tzui-btn--primary { border: 1px solid var(--tzui-border); box-shadow: var(--tzui-shadow-sm); }
.tzui-cap-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.tzui-cap-left, .tzui-cap-right { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.tzui-cap-player { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; box-shadow: var(--tzui-shadow-2xl); border: 1px solid var(--tzui-border); background: #000; container-type: inline-size; }
.tzui-cap-player-feed { position: absolute; inset: 0; background: var(--tzui-feed) center / contain no-repeat; }
/* ResponsiveCaptionOverlay: 20px default scaled by clamp(width/640, .65, 1.8), Arial bold, white on rgba(0,0,0,.75) */
.tzui-cap-line { position: absolute; left: 16px; right: 16px; top: var(--tzui-cap-y, 80%); transform: translateY(-50%); display: flex; align-items: center; justify-content: center; text-align: center; }
.tzui-cap-line > span { display: inline-block; max-width: 90%; padding: 6px 14px; border-radius: 8px; box-shadow: var(--tzui-shadow-lg); font-family: Arial, var(--tzui-font); font-weight: 700; line-height: 1.375; letter-spacing: .025em; color: #fff; background: rgba(0, 0, 0, .75); overflow-wrap: break-word; font-size: clamp(13px, calc(20 / 640 * 100cqw), 36px); }
.tzui-cap-line--nobox > span { background: transparent; box-shadow: none; text-shadow: 2px 2px 4px rgba(0, 0, 0, .9), -2px -2px 4px rgba(0, 0, 0, .9), 2px -2px 4px rgba(0, 0, 0, .9), -2px 2px 4px rgba(0, 0, 0, .9); }
.tzui-cap-hover { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent 50%, transparent); display: flex; align-items: flex-end; justify-content: space-between; padding: 16px; }
.tzui-cap-hover-play { padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; }
.tzui-cap-hover-time { font-size: 11px; line-height: 16px; color: rgba(255, 255, 255, .9); font-weight: 700; background: rgba(0, 0, 0, .4); padding: 4px 10px; border-radius: 9999px; }
.tzui-cap-cust { padding: 20px; display: flex; flex-direction: column; gap: 24px; box-shadow: var(--tzui-shadow-sm); }
.tzui-cap-cust-h { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--tzui-border); padding-bottom: 12px; }
.tzui-cap-cust-h .tzui-ic { color: var(--tzui-primary); }
.tzui-cap-cust-h h3 { font-size: 12px; line-height: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.tzui-cap-ctrls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tzui-cap-ctrl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tzui-cap-ctrl--wide { grid-column: span 2; border-top: 1px solid var(--tzui-border); padding-top: 12px; margin-top: 4px; }
.tzui-cap-lbl { font-size: 10px; line-height: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tzui-text-2); }
.tzui-cap-lblrow { display: flex; align-items: center; justify-content: space-between; }
.tzui-cap-lblrow > b { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--tzui-primary); }
.tzui-cap-sizerow { display: flex; align-items: center; gap: 12px; }
.tzui-cap-sizerow .tzui-range { flex: 1; }
.tzui-cap-num { width: 64px; text-align: center; font-size: 12px; line-height: 16px; font-weight: 600; background: var(--tzui-bg-2); border: 1px solid var(--tzui-border); border-radius: 12px; padding: 6px 0; }
.tzui-cap-color { display: flex; align-items: center; gap: 8px; }
.tzui-cap-color > i { height: 32px; width: 32px; border-radius: 8px; border: 1px solid var(--tzui-border); padding: 3px; background: var(--tzui-bg-2); flex-shrink: 0; }
.tzui-cap-color > i > i { display: block; width: 100%; height: 100%; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.tzui-cap-color > span { flex: 1; min-width: 0; font-size: 12px; line-height: 16px; font-weight: 600; background: var(--tzui-bg-2); border: 1px solid var(--tzui-border); border-radius: 12px; padding: 8px; text-transform: uppercase; }
.tzui-cap-boxrow { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: var(--tzui-bg-2); border-radius: 16px; border: 1px solid var(--tzui-border); }
.tzui-cap-boxrow b { display: block; font-size: 12px; line-height: 16px; font-weight: 700; }
.tzui-cap-boxrow small { display: block; font-size: 10px; line-height: 15px; color: var(--tzui-text-2); margin-top: 2px; }
.tzui-cap-sw { width: 44px; height: 24px; border-radius: 9999px; position: relative; background: #d1d5db; flex-shrink: 0; }
[data-tzui-theme="dark"] .tzui-cap-sw { background: #3f3f46; }
.tzui-cap-sw > i { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; background: #fff; border-radius: 50%; }
.tzui-cap-sw--on { background: var(--tzui-primary) !important; }
.tzui-cap-sw--on > i { left: 24px; }
.tzui-cap-cta { width: 100%; padding: 14px 24px; font-size: 14px; line-height: 20px; box-shadow: var(--tzui-shadow-lg); }
.tzui-cap-listhead { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.tzui-cap-listhead > span:first-child { font-size: 10px; line-height: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--tzui-text-2); }
.tzui-cap-listhead > span:last-child { font-size: 10px; line-height: 15px; font-weight: 500; font-style: italic; color: var(--tzui-text-2); }
.tzui-cap-list { display: flex; flex-direction: column; gap: 14px; }
.tzui-seg { padding: 16px; border-radius: 16px; border: 1px solid var(--tzui-border); background: var(--tzui-card); background-image: var(--tzui-card-sheen); display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
/* active: intended purple 30% border + purple ring; those classes have no CSS in the app, so it renders
   the glow background, Tailwind's default border #e5e7eb, shadow-md and a 1px blue-500/50 ring */
.tzui-seg--on { background: var(--tzui-primary-glow); border-color: var(--tzui-preflight-border); box-shadow: 0 0 0 1px rgba(59, 130, 246, .5), var(--tzui-shadow-md); }
.tzui-seg-badge { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--tzui-border); padding-bottom: 10px; }
.tzui-seg-badge > b { font-size: 10px; line-height: 15px; font-weight: 900; padding: 4px 8px; border-radius: 6px; letter-spacing: -0.05em; background: var(--tzui-bg-2); color: var(--tzui-text-2); }
.tzui-seg--on .tzui-seg-badge > b { background: var(--tzui-primary); color: #fff; }
.tzui-seg-ping { position: relative; width: 8px; height: 8px; }
.tzui-seg-ping::before, .tzui-seg-ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tzui-primary); }
.tzui-seg-ping::before { animation: tzui-ping 1s cubic-bezier(0, 0, .2, 1) infinite; opacity: .75; }
.tzui-seg-times { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tzui-seg-time { display: block; white-space: nowrap; }
.tzui-seg-time > small + span { margin-left: 4px; }
.tzui-seg-time > small { font-size: 8px; line-height: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tzui-text-2); }
.tzui-seg-time > span { display: inline-block; width: 94px; background: var(--tzui-bg-2); border: 1px solid var(--tzui-border); border-radius: 12px; padding: 6px 10px; font-size: 11px; line-height: 16px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -0.025em; }
.tzui-seg-arrow { color: var(--tzui-text-2); font-size: 12px; font-weight: 700; margin-top: 16px; }
.tzui-seg-text { flex: 1; min-width: 0; width: 100%; font-size: 12px; line-height: 1.625; font-weight: 600; background: var(--tzui-bg-2); border: 1px solid var(--tzui-border); border-radius: 12px; padding: 10px; min-height: 59px; }
.tzui-seg-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-shrink: 0; }
.tzui-seg-acts > span { padding: 8px; background: var(--tzui-bg-2); border: 1px solid var(--tzui-border); border-radius: 12px; color: var(--tzui-text-2); }
/* new-editor caption presets (features/editor/panels/CaptionsTab.jsx, editor.css .ed-cap-*) */
.tzui-cap-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tzui-cap-preset { display: block; min-width: 0; padding: 4px; border-radius: 10px; border: 1px solid var(--tzui-border); color: var(--tzui-text-2); font-size: 11px; line-height: 16px; font-weight: 600; text-align: center; }
.tzui-cap-preset--on { background: var(--tzui-primary-glow); border-color: var(--tzui-primary); color: var(--tzui-primary); }
.tzui-cap-sample { display: flex; align-items: center; justify-content: center; height: 40px; margin-bottom: 4px; border-radius: 6px; background: linear-gradient(135deg, #64748b, #1e293b); }
.tzui-cap-sample > span { padding: 1px 6px; border-radius: 4px; font-size: 17px; line-height: 1.25; paint-order: stroke fill; font-family: var(--tzui-font); letter-spacing: 0; }
.tzui-cap-panel { padding: 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 24px; }

@container tzui-page (min-width: 575px) {
  .tzui-cap-head { flex-direction: row; align-items: center; }
  .tzui-cap-head-r { width: auto; }
  .tzui-seg { flex-direction: row; align-items: center; }
  .tzui-seg-badge { justify-content: flex-start; gap: 12px; width: 64px; flex-shrink: 0; border-bottom: 0; padding-bottom: 0; border-right: 1px solid var(--tzui-border); padding-right: 16px; }
  .tzui-seg-acts { justify-content: flex-start; }
}
@container tzui-page (min-width: 992px) {
  .tzui-cap-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---------- Animations ---------- */
@keyframes tzui-pulse { 50% { opacity: .5; } }
@keyframes tzui-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes tzui-spin { to { transform: rotate(360deg); } }
@keyframes tzui-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tzui *, .tzui *::before, .tzui *::after { animation: none !important; }
}
.tzui-still *, .tzui-still *::before, .tzui-still *::after { animation: none !important; }


/* ==========================================================================
   HOW IT WORKS: step player (Bencho) + kit screens
   ========================================================================== */
.how-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.how-ctl { position: sticky; top: calc(var(--nav-h) + 32px); }
.spl { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; }
.spl-slab { display: flex; align-items: center; justify-content: center; background: var(--snow); box-shadow: 0 0 0 1px var(--hair); }
.spl-dots { padding: 14px; border-radius: 18px; }
.spl-track { position: relative; height: 8px; }
.spl-dot { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background: #d8d3e6; cursor: pointer; transform-origin: 50% 50%; }
.spl-dot::after { content: ""; position: absolute; inset: -12px -4px; }
.spl-ink { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background: var(--primary); }
.spl-tool { width: 36px; height: 36px; border-radius: 18px; transition: scale .16s var(--ease); }
.spl-tool:has(.spl-go:active) { scale: .96; }
.spl-go { width: 100%; height: 100%; display: grid; place-items: center; padding: 0; border: 0; border-radius: inherit; background: transparent; color: var(--ink); cursor: pointer; }
.spl-go svg { fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; overflow: visible; }
.spl-go:hover { color: var(--primary); }
.spl-count { margin-left: 8px; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.spl-count b { color: var(--ink); font-weight: 500; }

.how-ctl { position: sticky; top: calc(var(--nav-h) + 32px); }
.step-hl {
  position: absolute; left: -14px; right: -14px; top: 0; height: 0; z-index: 0; border-radius: 14px; pointer-events: none;
  background: linear-gradient(90deg, #f3eefc, #f8f5fe); box-shadow: inset 0 0 0 1px #ebe3f8;
  transition: transform .4s var(--ease), height .4s var(--ease);
}
.steps { position: relative; z-index: 1; }
.step {
  position: relative; display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 6px 0; width: 100%;
  padding: 16px 0 20px; border: 0; background: none; text-align: left; cursor: pointer; opacity: .78; transition: opacity .4s var(--ease-ui);
}
.steps li + li .step { border-top: 1px solid transparent; }
.step:hover { opacity: .92; }
.step[aria-current="step"] { opacity: 1; }
.step-n {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--hair-2);
  color: var(--mute); font-size: 10.5px; background: var(--paper); transition: background-color .4s var(--ease-ui), color .4s var(--ease-ui), border-color .4s var(--ease-ui);
}
.step-name { font: 400 21px/1.2 var(--sans); letter-spacing: -0.025em; color: var(--ink); transition: transform .4s var(--ease); }
.step-line { grid-column: 2; font-size: 16px; line-height: 1.55; color: var(--body); }
.step-fill { position: absolute; left: 46px; right: 0; bottom: 8px; height: 2px; border-radius: 2px; background: var(--primary); transform-origin: left; transform: scaleX(var(--p, 0)); opacity: 0; transition: opacity .4s var(--ease-ui); }
.step-fill::before { content: none; }
.step[aria-current="step"] .step-n { background: var(--primary); border-color: var(--primary); color: #fff; }
.step[aria-current="step"] .step-name { transform: translateX(4px); }
.step[aria-current="step"] .step-fill { opacity: 1; }
.step[aria-current="step"]::after { content: ""; position: absolute; left: 46px; right: 0; bottom: 8px; height: 2px; border-radius: 2px; background: rgba(115, 49, 189, .14); z-index: -1; }

.how-panel .fit { background: var(--snow); transition: background-color .5s; }
.how-panel .fit[data-tone="dark"] { background: #000; }
.screens { position: absolute; inset: 0; }
.screen { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.99); transition: opacity .45s var(--ease-ui), transform .6s var(--ease), visibility 0s linear .45s; }
.screen.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.screen.is-on-alt { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.scr-fill { height: 100% !important; aspect-ratio: auto !important; }

/* write */
.scr-write { background: linear-gradient(180deg, #fff 0%, #f7f3fb 100%); }
.scr-pad { padding: 28px 32px; }
.scr-write .tzui-ph { margin-bottom: 22px; flex-direction: row; }
.scr-write .tzui-cs-grid { grid-template-columns: 1.65fr 1fr; gap: 20px; }
.scr-write .tzui-cs-form { padding: 28px; gap: 18px; }
.scr-write .tzui-cs-row { grid-template-columns: 1fr 1fr; gap: 16px; }
.scr-write .tzui-cs-aside { padding: 24px; }
.scr-write .tzui-cs-list { margin-top: 16px; gap: 16px; }
.gen-btn { position: relative; transition: transform .15s var(--ease), opacity .2s; }
.gen-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; border-top-color: transparent; animation: tzui-spin .8s linear infinite; }
.scr-write.is-gen .gen-btn { transform: scale(.98); opacity: .92; }
.scr-write.is-gen .gen-ic { display: none; }
.scr-write.is-gen .gen-spin { display: inline-block; }
.is-phone .scr-write .tzui-cs-grid { grid-template-columns: 1fr; }
.is-phone .scr-write .tzui-cs-aside { display: none; }
.is-phone .scr-write .tzui-cs-row { grid-template-columns: 1fr; }
.is-phone .scr-pad { padding: 22px 18px; }

/* read (practice) + record */
.mini-scroller { height: calc(100% - 210px) !important; }
.screen.tzui-rec .tzui-rec-screen { --tzui-prompter-size: 34px; }
.is-phone .screen.tzui-rec .tzui-rec-screen { --tzui-prompter-size: 26px; }
.practice-bar {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); width: calc(100% - 32px); max-width: 672px;
  display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 16px;
  background: rgba(18, 18, 18, .8); border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pr-btn { width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #a1a1aa; }
.pr-btn--on { color: var(--tzui-primary); }
.pr-play { flex: 1; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; background: var(--tzui-primary); color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.pr-div { width: 1px; height: 28px; background: rgba(255, 255, 255, .1); }
.pr-size { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 48px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #a1a1aa; }
.pr-size b { font-size: 10px; text-transform: uppercase; color: #71717a; font-weight: 700; }
.pr-exit { padding: 0 18px; height: 48px; display: grid; place-items: center; border-radius: 8px; background: var(--tzui-primary); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.is-phone .practice-bar .pr-btn:nth-child(4), .is-phone .practice-bar .pr-div, .is-phone .practice-bar .pr-size { display: none; }
.scr-record .tzui-countdown { transition: opacity .4s; }
.scr-record .tzui-countdown.is-off { opacity: 0; pointer-events: none; }
.scr-record .tzui-countdown h2, .tzui-countdown .cd-n { animation: cd-tick .45s var(--ease) both; }

/* edit + export */
.scr-edit .tzui-ed-root { --tzui-ed-height: 100%; height: 100%; --tzui-ed-preview-h: 50%; }
.scr-edit .tzui-ed-tlscroll { --tzui-head-w: 112px; }
.ed-wave {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='32'%3E%3Cpath stroke='rgba(255,255,255,.6)' d='M1 12v8M3 9v14M5 13v6M7 7v18M9 10v12M11 14v4M13 8v16M15 11v10M17 6v20M19 12v8M21 9v14M23 15v2M25 10v12M27 7v18M29 13v6M31 9v14M33 11v10M35 6v20M37 14v4M39 10v12M41 8v16M43 12v8M45 9v14M47 13v6M49 7v18M51 11v10M53 15v2M55 9v14M57 6v20M59 12v8M61 10v12M63 14v4M65 8v16M67 11v10M69 7v18M71 13v6M73 9v14M75 12v8M77 6v20M79 10v12M81 15v2M83 8v16M85 11v10M87 7v18M89 13v6M91 9v14M93 12v8M95 6v20M97 10v12M99 14v4M101 8v16M103 11v10M105 7v18M107 13v6M109 9v14M111 12v8M113 6v20M115 10v12M117 14v4M119 9v14'/%3E%3C/svg%3E") left center / 120px 100% repeat-x;
}
.scr-edit .tzui-ed-modal { opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s; }
.scr-edit.is-export .tzui-ed-modal { opacity: 1; visibility: visible; transition-delay: 0s; }
.scr-edit .tzui-dlg { transform: translateY(24px) scale(.97); transition: transform .5s var(--ease-out); }
.scr-edit.is-export .tzui-dlg { transform: none; }
.scr-edit .tzui-dlg-bar > i { transition: width .4s ease-out; }
.scr-edit .tzui-ed-playhead { transition: none; }

/* ==========================================================================
   SEE IT IN ACTION: product tour film + minimal player
   ========================================================================== */
.film-fig { max-width: 1120px; margin: 0 auto; }
.film-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #0b0b0c; box-shadow: var(--shadow-frame); }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-stills img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity .7s var(--ease-ui); transform-origin: 50% 30%; will-change: transform, opacity; }
.film-stills img.is-on { opacity: 1; }
.film-big {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 76px; height: 76px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--ink); cursor: pointer; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5);
  opacity: 0; scale: .9; pointer-events: none; transition: opacity var(--t-ui) var(--ease-ui), scale var(--t-move) var(--ease);
}
.film-big svg { margin-left: 3px; }
.film-fig.is-paused .film-big { opacity: 1; scale: 1; pointer-events: auto; }
.film-big:hover { color: var(--primary); }
.film-chip { position: absolute; left: 16px; bottom: 16px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 10.5px; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .4); }
.film-bar { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.film-pp { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--hair-2); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color var(--t-ui) var(--ease-ui), color var(--t-ui) var(--ease-ui); }
.film-pp:hover { border-color: var(--primary-border); color: var(--primary); }
.film-pp svg { margin-left: 1px; }
.film-track { position: relative; flex: 1; height: 30px; cursor: pointer; touch-action: none; border-radius: 6px; }
.film-rail { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--hair-2); overflow: hidden; }
.film-fill { position: absolute; inset: 0; background: var(--primary); transform-origin: left; transform: scaleX(var(--p, 0)); }
.film-buf { position: absolute; inset: 0; }
.film-mk { position: absolute; top: 50%; left: calc(var(--x) * 100%); width: 1px; height: 12px; margin-top: -6px; background: var(--ink); opacity: .45; }
.film-head { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; pointer-events: none; transform: translateX(calc(var(--p, 0) * 100%)); }
.film-head::before { content: ""; position: absolute; left: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); box-shadow: 0 2px 6px rgba(30, 27, 46, .2); }
.film-tc { min-width: 150px; text-align: right; font-size: 11px; color: var(--ink); font-variant-numeric: tabular-nums; }
.film-ch { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 18px; border-top: 1px solid var(--hair); }
.film-ch button {
  position: relative; display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 14px 8px 4px 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: 400 16px/1.2 var(--sans); letter-spacing: -0.02em; color: var(--mute); transition: color var(--t-ui) var(--ease-ui);
}
.film-ch button .mono { font-size: 10px; }
.film-ch button::before { content: ""; position: absolute; left: 0; right: 8px; top: -1px; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform var(--t-move) var(--ease); }
.film-ch button:hover, .film-ch button[aria-current="true"] { color: var(--ink); }
.film-ch button[aria-current="true"]::before { transform: scaleX(1); }
.film-fig .fig-cap { margin-top: 20px; }
@media (max-width: 720px) {
  .film-bar { gap: 10px; }
  .film-tc { min-width: 0; font-size: 10px; }
  .film-ch button { font-size: 13px; padding-right: 4px; }
  .film-chip { left: 10px; bottom: 10px; }
  .film-big { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .vb::after { transition: none; }
}

/* step screens: interactive states the ghost cursor drives */
.w-topic { position: relative; display: flex; align-items: center; min-height: 46px; }
.w-typed { color: var(--tzui-text); white-space: pre; }
.w-ph { color: var(--tzui-text-2); opacity: .7; margin-left: 2px; }
.w-topic.has-text .w-ph { display: none; }
.w-topic:not(.tzui-cs-input--focus) .tzui-cs-caret { visibility: hidden; }
.w-selwrap { position: relative; }
.w-chev { transition: transform .2s var(--ease-ui); }
.tzui-select.is-focus { border-color: var(--tzui-primary); box-shadow: 0 0 0 2px var(--tzui-primary-glow); }
.tzui-select.is-focus .w-chev { transform: rotate(180deg); }
.w-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5; display: flex; flex-direction: column; padding: 6px; border-radius: 12px;
  background: var(--tzui-card); border: 1px solid var(--tzui-border); box-shadow: var(--tzui-shadow-deep), 0 10px 30px rgba(30, 27, 46, .12);
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top; pointer-events: none; transition: opacity .15s var(--ease-ui), transform .15s var(--ease-ui);
}
.scr-write.is-open .w-list { opacity: 1; transform: none; }
.w-opt { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--tzui-text); }
.w-opt svg { visibility: hidden; }
.w-opt.is-sel { background: var(--tzui-primary-glow); color: var(--tzui-primary); }
.w-opt.is-sel svg { visibility: visible; }
.w-aside { position: relative; min-height: 360px; }
.w-what, .w-result { transition: opacity .4s var(--ease-ui), transform .5s var(--ease); }
.w-result { position: absolute; inset: 24px; opacity: 0; transform: translateY(10px); pointer-events: none; }
.w-result h2, .w-result .kh2 { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.w-blk { margin-bottom: 14px; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-ui), transform .5s var(--ease); }
.w-blk .tzui-sc-hook, .w-blk .tzui-sc-points li, .w-blk .tzui-sc-cta { font-size: 13px; line-height: 1.5; }
.w-blk .tzui-sc-points { gap: 4px; padding-left: 14px; list-style: disc; }
.scr-write.is-result .w-what { opacity: 0; transform: translateY(-8px); }
.scr-write.is-result .w-result { opacity: 1; transform: none; }
.scr-write.is-result .w-blk { opacity: 1; transform: none; transition-delay: calc(.12s + var(--d) * .32s); }
.is-phone .scr-write .w-aside { display: block; position: absolute; left: 18px; right: 18px; top: 116px; bottom: 18px; min-height: 0; opacity: 0; transition: opacity .4s var(--ease-ui); z-index: 6; }
.is-phone .scr-write.is-result .w-aside { opacity: 1; }
.is-phone .scr-write .w-what { display: none; }
.pr-play { transition: background-color .3s var(--ease-ui), color .3s var(--ease-ui); }
.pr-play.is-on { background: #fff; color: #000; }
.rs-cd { opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-ui), visibility 0s linear .35s; }
.rs-cd.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.rs-cd .cd-n { animation: cd-tick .45s var(--ease) both; }
.scr-edit .tzui-ed-head-btns { display: flex; }
.scr-edit .tzui-ed-ratio-btn { display: inline-flex !important; }
.scr-edit .tzui-ed-preview { position: relative; }
.ed-stage-l, .ed-stage-p { transition: opacity .5s var(--ease-ui); }
.ed-stage-p { opacity: 0; }
.scr-edit.is-portrait .ed-stage-p { opacity: 1; }
.scr-edit.is-portrait .ed-stage-l { opacity: 0; }
.scr-edit .tzui-ed-stage-feed { overflow: hidden; }
.scr-edit.is-capoff [data-ed-caprow] .tzui-ed-clip { opacity: .3; }
.scr-edit.is-capoff .ed-cap { opacity: 0; }
.ed-cap { transition: opacity .3s var(--ease-ui); }
.ed-pop { right: 12px; bottom: 64px; width: 300px; opacity: 0; transform: translateY(6px) scale(.98); transform-origin: bottom right; pointer-events: none; transition: opacity .18s var(--ease-ui), transform .22s var(--ease); }
.scr-edit.is-pop .ed-pop { opacity: 1; transform: none; }
.ed-ratios { display: flex; flex-direction: column; gap: 6px; }
.is-phone .ed-pop { right: 8px; left: 8px; width: auto; bottom: 56px; }

/* ==========================================================================
   ALSO IN THE APP: eight live instrument panels (CSS loops, paused off screen)
   ========================================================================== */
.capg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
.capc { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.capc > p { font-size: 14.5px; line-height: 1.55; color: var(--body); }
.capc-k { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--ink); }
.capc-k h3 { display: flex; gap: 10px; color: var(--ink); font-size: 11px; }
.capc-k h3 span { color: var(--mute); }
.capc-k .sim { font-size: 9.5px; }
.capv {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; border: 1px solid var(--hair-2);
  background-color: #fcfbff; background-image: radial-gradient(circle, rgba(30, 27, 46, .1) 1px, transparent 1.2px); background-size: 14px 14px;
  font-family: var(--sans); color: var(--ink); letter-spacing: -0.01em;
}
.capg.is-paused *, .capg.is-paused *::before, .capg.is-paused *::after { animation-play-state: paused !important; }
@media (max-width: 1180px) { .capg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .capg { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 10px; scroll-padding-inline: var(--gut); scrollbar-width: thin; }
  .capc { flex: 0 0 84%; scroll-snap-align: start; }
}

/* C/01 practice */
.cv-dark { position: absolute; inset: 10px; border-radius: 9px; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; }
.cv-pill { position: absolute; top: 8px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: rgba(18, 18, 18, .8); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .5); font: 500 8px var(--mono); white-space: nowrap; }
.cv-pill b { color: #22c55e; font: 700 7.5px var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.cv-div { width: 1px; height: 8px; background: rgba(255, 255, 255, .1); }
.cv-dot { width: 5px; height: 5px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, .6); animation: pulse 1.6s infinite; }
.cv-bars { display: flex; align-items: flex-end; gap: 1px; height: 8px; width: 20px; }
.cv-bars i { flex: 1; height: 100%; border-radius: 1px; background: #22c55e; transform-origin: bottom; animation: cv-bar .5s ease-in-out infinite alternate; }
.cv-bars i:nth-child(2) { animation-delay: -.2s; } .cv-bars i:nth-child(3) { animation-delay: -.35s; } .cv-bars i:nth-child(4) { animation-delay: -.1s; } .cv-bars i:nth-child(5) { animation-delay: -.42s; }
@keyframes cv-bar { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.cv-words { max-width: 92%; text-align: center; font-weight: 300; font-size: clamp(12px, 1.2vw, 15px); line-height: 1.75; color: #fff; }
.cv-words span { animation: cv-word 7s linear infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes cv-word { 0% { color: #facc15; text-shadow: 0 0 8px rgba(251, 176, 64, .5); } 6% { color: #facc15; text-shadow: 0 0 8px rgba(251, 176, 64, .5); } 7%, 75% { color: rgba(255, 255, 255, .6); text-shadow: none; } 76%, 100% { color: #fff; } }
.cv-tag { position: absolute; bottom: 8px; padding: 2px 7px; border-radius: 4px; border: 1px dashed rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .6); font: 500 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* C/02 templates */
.cv-tcard {
  position: absolute; left: 12%; right: 12%; top: 13%; bottom: 13%; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px;
  background: #fff; border: 1px solid var(--hair); box-shadow: 0 14px 30px -18px rgba(30, 27, 46, .45);
  opacity: 0; animation: cv-card 12s var(--ease) infinite; animation-delay: calc(var(--i) * 3s);
}
@keyframes cv-card { 0% { opacity: 0; transform: translateY(14px) scale(.97); } 4%, 23% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translateY(-10px) scale(.98); } }
.cv-cat { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 7px; border-radius: 999px; border: 1px solid; font-size: 7.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cv-cat--cr { background: #faf5ff; border-color: #e9d5ff; color: #9333ea; }
.cv-cat--te { background: #f0fdfa; border-color: #99f6e4; color: #0d9488; }
.cv-cat--pa { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.cv-cat--re { background: #fff1f2; border-color: #fecdd3; color: #e11d48; }
.cv-tcard b { font-size: 13px; font-weight: 700; }
.cv-tcard p { flex: 1; font-size: 10.5px; line-height: 1.45; color: var(--body); overflow: hidden; }
.cv-tcard p i { font-style: normal; padding: 0 4px; border-radius: 4px; background: var(--primary-glow); color: var(--primary); font-weight: 700; font-size: 9.5px; }
.cv-meta { display: flex; justify-content: space-between; font: 500 8.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }

/* C/03 folders */
.cv-take { position: absolute; left: 50%; top: 12%; width: 38%; translate: -50% 0; padding: 5px; border-radius: 8px; background: #fff; border: 1px solid var(--hair); box-shadow: 0 10px 24px -14px rgba(30, 27, 46, .5); animation: cv-drop 5s var(--ease) infinite; transform-origin: 30% 100%; }
.cv-take-img { display: block; aspect-ratio: 16 / 9; border-radius: 5px; background: #000 url("../assets/shared/product-ui/media/take-1.webp") center / cover; }
.cv-take b { display: block; margin-top: 4px; font-size: 8.5px; font-weight: 800; }
@keyframes cv-drop { 0%, 10% { opacity: 0; transform: translateY(-10px); } 20%, 46% { opacity: 1; transform: none; } 66% { opacity: 0; transform: translate(-30%, 150%) scale(.25); } 100% { opacity: 0; transform: translate(-30%, 150%) scale(.25); } }
.cv-chips { position: absolute; left: 6%; right: 6%; bottom: 13%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cv-fchip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 5px 0 9px; border-radius: 999px; border: 1px solid var(--hair-2); background: #fff; font-size: 10.5px; font-weight: 600; color: var(--body); }
.cv-fchip--on { background: var(--primary); border-color: var(--primary); color: #fff; animation: cv-chip 5s var(--ease) infinite; }
@keyframes cv-chip { 0%, 60% { transform: none; } 66% { transform: scale(1.08); } 74%, 100% { transform: none; } }
.cv-count { position: relative; display: inline-grid; min-width: 19px; height: 17px; border-radius: 999px; background: var(--primary-glow); color: var(--primary); font-size: 9.5px; overflow: hidden; }
.cv-fchip--on .cv-count { background: rgba(255, 255, 255, .22); color: #fff; }
.cv-count b { grid-area: 1 / 1; display: grid; place-items: center; font-weight: 700; }
.cv-count b + b { opacity: 0; }
.cv-fchip--on .cv-count b:first-child { animation: cv-n1 5s var(--ease) infinite; }
.cv-fchip--on .cv-count b + b { animation: cv-n2 5s var(--ease) infinite; }
@keyframes cv-n1 { 0%, 62% { opacity: 1; transform: none; } 68%, 96% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: none; } }
@keyframes cv-n2 { 0%, 62% { opacity: 0; transform: translateY(100%); } 68%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(100%); } }

/* C/04 remote */
.cv-qr { position: absolute; left: 9%; top: 50%; translate: 0 -50%; width: 36%; aspect-ratio: 1; container-type: size; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid var(--hair); box-shadow: 0 10px 24px -14px rgba(30, 27, 46, .4); overflow: hidden; }
.cv-qr-code { display: block; width: 100%; height: 100%; border-radius: 4px;
  background:
    linear-gradient(#1e1b2e, #1e1b2e) 0 0 / 30% 30% no-repeat, linear-gradient(#1e1b2e, #1e1b2e) 100% 0 / 30% 30% no-repeat, linear-gradient(#1e1b2e, #1e1b2e) 0 100% / 30% 30% no-repeat,
    repeating-conic-gradient(#1e1b2e 0 25%, #fff 0 50%) 0 0 / 14% 14%;
  -webkit-mask: radial-gradient(circle at 15% 15%, transparent 4%, #000 4.5%); mask: radial-gradient(circle at 15% 15%, transparent 4%, #000 4.5%); opacity: .9; }
.cv-scan { position: absolute; left: 6px; right: 6px; top: 8px; height: 2px; background: var(--primary); box-shadow: 0 0 10px rgba(115, 49, 189, .7); animation: cv-scan 8s ease-in-out infinite; }
@keyframes cv-scan { 0% { transform: translateY(0); opacity: 1; } 15% { transform: translateY(calc(100cqh - 18px)); } 30% { transform: translateY(0); opacity: 1; } 34%, 100% { opacity: 0; } }
.cv-live { position: absolute; left: 50%; bottom: 6px; translate: -50% 0; white-space: nowrap; padding: 2px 6px; border-radius: 6px; background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .3); color: #047857; font: 800 7px var(--sans); letter-spacing: .08em; text-transform: uppercase; opacity: 0; animation: cv-on 8s var(--ease) infinite; }
@keyframes cv-on { 0%, 36% { opacity: 0; transform: translateY(4px); } 42%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.cv-link { position: absolute; left: 46%; right: 34%; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, var(--primary) 0 4px, transparent 4px 7px); transform-origin: left; animation: cv-link 8s var(--ease) infinite; }
@keyframes cv-link { 0%, 30% { transform: scaleX(0); } 38%, 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.cv-phone { position: absolute; right: 9%; top: 8%; bottom: 8%; aspect-ratio: 9 / 18; border-radius: 14px; background: #0a0a0b; border: 2px solid #26262b; overflow: hidden; color: #fff; }
.cv-ph-wait, .cv-ph-live { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px; text-align: center; }
.cv-ph-wait { font: 900 7px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); animation: cv-off 8s var(--ease) infinite; }
@keyframes cv-off { 0%, 36% { opacity: 1; } 42%, 96% { opacity: 0; } 100% { opacity: 1; } }
.cv-ph-live { opacity: 0; animation: cv-on 8s var(--ease) infinite; justify-content: space-between; padding: 8px 5px; }
.cv-mon { display: flex; align-items: center; gap: 3px; font: 900 6px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.cv-mon::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #ef4444; }
.cv-ph-live p { font-size: 8.5px; font-weight: 300; line-height: 1.6; }
.cv-cw { color: #facc15; }
.cv-ph-btn { width: 100%; padding: 5px 0; border-radius: 9px; background: #fff; color: #000; font: 900 7px var(--sans); letter-spacing: .08em; text-transform: uppercase; animation: cv-tap 8s var(--ease) infinite; }
@keyframes cv-tap { 0%, 70% { transform: none; } 73% { transform: scale(.9); } 77%, 100% { transform: none; } }

/* C/05 lenses */
.cv-cam { position: absolute; left: 50%; top: 8%; bottom: 26%; aspect-ratio: 3 / 4; translate: -50% 0; border-radius: 10px; overflow: hidden; background: #000; }
.cv-cam::before { content: ""; position: absolute; inset: 0; background: url("../assets/shared/characters/vlogger-9x16.webp") center 30% / cover; animation: cv-zoom 9s var(--ease) infinite; }
.cv-cam .feed-video { object-position: center 20%; transform-origin: 50% 30%; animation: cv-zoom 9s var(--ease) infinite; }
@keyframes cv-zoom { 0%, 78% { transform: scale(1); } 84% { transform: scale(1.18); } 90% { transform: scale(1.36); } 96% { transform: scale(1.6); } 100% { transform: scale(1); } }
.cv-cam::after { content: ""; position: absolute; inset: 0; background: radial-gradient(transparent 55%, rgba(0, 0, 0, .35)); }
.cv-face { position: absolute; left: 50%; top: 18%; width: 15%; aspect-ratio: 4 / 5; translate: -50% 0; border: 1.5px solid rgba(255, 255, 255, .0); background:
  linear-gradient(#fff, #fff) 0 0 / 8px 1.5px no-repeat, linear-gradient(#fff, #fff) 0 0 / 1.5px 8px no-repeat,
  linear-gradient(#fff, #fff) 100% 0 / 8px 1.5px no-repeat, linear-gradient(#fff, #fff) 100% 0 / 1.5px 8px no-repeat,
  linear-gradient(#fff, #fff) 0 100% / 8px 1.5px no-repeat, linear-gradient(#fff, #fff) 0 100% / 1.5px 8px no-repeat,
  linear-gradient(#fff, #fff) 100% 100% / 8px 1.5px no-repeat, linear-gradient(#fff, #fff) 100% 100% / 1.5px 8px no-repeat; opacity: .85; }
.cv-lens { position: absolute; left: 50%; top: 24%; translate: -50% 0; opacity: 0; }
.cv-lens--a { width: 12%; height: 5%; border-radius: 6px; border: 2px solid #c4a7ff; box-shadow: 0 0 10px rgba(196, 167, 255, .8); animation: cv-lensa 9s var(--ease) infinite; }
.cv-lens--b { top: 14%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(250, 204, 21, .9) 0 2px, transparent 3px), radial-gradient(circle at 70% 25%, rgba(255, 255, 255, .9) 0 1.5px, transparent 2.5px), radial-gradient(circle at 80% 70%, rgba(196, 167, 255, .9) 0 2px, transparent 3px), radial-gradient(circle at 20% 75%, rgba(255, 255, 255, .8) 0 1.5px, transparent 2.5px); animation: cv-lensb 9s var(--ease) infinite; }
@keyframes cv-lensa { 0%, 22% { opacity: 0; transform: scale(.8); } 27%, 46% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; } }
@keyframes cv-lensb { 0%, 50% { opacity: 0; transform: rotate(-20deg) scale(.8); } 55%, 74% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; } }
.cv-zoom { position: absolute; right: 6%; top: 8%; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 4px 7px; border-radius: 8px; background: #0b0b0c; color: #a1a1aa; font-size: 7px; }
.cv-zoom b { position: relative; display: grid; min-width: 28px; height: 13px; color: #fff; font-size: 10px; text-align: right; }
.cv-zoom b span { grid-area: 1 / 1; opacity: 0; animation: cv-zv 9s steps(1) infinite; }
.cv-zoom b span:nth-child(1) { animation-name: cv-z1; } .cv-zoom b span:nth-child(2) { animation-name: cv-z2; } .cv-zoom b span:nth-child(3) { animation-name: cv-z3; } .cv-zoom b span:nth-child(4) { animation-name: cv-z4; }
@keyframes cv-z1 { 0% { opacity: 1; } 78% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cv-z2 { 0% { opacity: 0; } 78% { opacity: 1; } 84% { opacity: 0; } }
@keyframes cv-z3 { 0% { opacity: 0; } 84% { opacity: 1; } 90% { opacity: 0; } }
@keyframes cv-z4 { 0% { opacity: 0; } 90% { opacity: 1; } }
.cv-strip { position: absolute; left: 50%; bottom: 6%; translate: -50% 0; display: flex; gap: 5px; padding: 4px; border-radius: 10px; background: #0b0b0c; border: 1px solid rgba(39, 39, 42, .8); }
.cv-tile { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(24, 24, 27, .8); border: 1px solid rgba(39, 39, 42, .9); color: #a1a1aa; }
.cv-tile i { width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, #bb94e8, #7331bd); }
.cv-tile:nth-child(3) i { border-radius: 50%; background: linear-gradient(135deg, #facc15, #f59e0b); }
.cv-tile:nth-child(4) i { background: linear-gradient(135deg, #60a5fa, #22c55e); }
.cv-ring { position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 7px; box-shadow: 0 0 0 2px #975adb; animation: cv-ring 9s var(--ease) infinite; }
@keyframes cv-ring { 0%, 22% { transform: translateX(0); } 27%, 48% { transform: translateX(27px); } 53%, 76% { transform: translateX(54px); } 81%, 100% { transform: translateX(0); } }

/* C/06 analysis */
.cv-analysis { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 8px 12px; padding: 12px 14px; }
.cv-metric, .cv-fill, .cv-flow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cv-metric > span, .cv-fill > span, .cv-flow > span { font: 600 7.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #6b7280; }
@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }
.cv-num { font: 700 15px/1 var(--sans); --n: 0; counter-reset: n var(--n); animation: cv-count 7s var(--ease) infinite; }
.cv-num::before { content: counter(n) " "; }
.cv-num { font-size: 0; } .cv-num::before { font-size: 15px; } .cv-num::after { content: attr(data-u); font: 600 8.5px var(--mono); letter-spacing: .04em; color: var(--mute); margin-left: 2px; }
@keyframes cv-count { 0%, 6% { --n: 0; } 30%, 92% { --n: var(--to); } 100% { --n: 0; } }
.cv-bar { position: relative; display: block; height: 5px; border-radius: 3px; background: #ede9f6; overflow: visible; }
.cv-bar::before { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--c); transform-origin: left; transform: scaleX(0); animation: cv-barw 7s var(--ease) infinite; }
@keyframes cv-barw { 0%, 6% { transform: scaleX(0); } 30%, 92% { transform: scaleX(var(--w)); } 100% { transform: scaleX(0); } }
.cv-target { position: absolute; left: 75%; top: -3px; bottom: -3px; width: 1.5px; background: var(--ink); }
.cv-fill em { align-self: flex-start; display: inline-block; margin-right: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(245, 158, 11, .14); color: #b45309; font: 700 9px var(--sans); font-style: normal; opacity: 0; animation: cv-pop 7s var(--ease) infinite; animation-delay: calc(.6s + var(--i) * .5s); }
.cv-fill { flex-direction: row; flex-wrap: wrap; align-items: center; }
.cv-fill > span { width: 100%; }
@keyframes cv-pop { 0%, 10% { opacity: 0; transform: scale(.6); } 16%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.cv-flow { grid-column: 1 / -1; }
.cv-flow div { display: flex; gap: 2px; height: 14px; }
.cv-flow i { flex: var(--g); border-radius: 3px; background: #10b981; opacity: .9; box-shadow: inset 0 -2px 0 #15803d; transform-origin: left; transform: scaleX(0); animation: cv-seg 7s var(--ease) infinite; animation-delay: calc(var(--i) * .08s); }
.cv-flow i.p { background: #f59e0b; opacity: .4; box-shadow: none; }
@keyframes cv-seg { 0%, 8% { transform: scaleX(0); } 16%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* C/07 social copy (with a CSS ghost cursor) */
.cv-social { container-type: size; }
.cv-ghost { --gx0: 58cqw; --gy0: 86cqh; --gx1: calc(91cqw - 38px); --gy1: calc(11cqh + 22px); --gx2: 64cqw; --gy2: 60cqh; }
.cv-card { position: absolute; left: 9%; right: 9%; top: 11%; bottom: 11%; display: flex; flex-direction: column; gap: 5px; padding: 11px 13px; border-radius: 12px; background: #fff; border: 1px solid var(--hair); box-shadow: 0 14px 30px -18px rgba(30, 27, 46, .45); }
.cv-field { display: flex; align-items: center; justify-content: space-between; }
.cv-lbl { font-size: 9.5px; font-weight: 500; color: #6b7280; }
.cv-copy { position: relative; display: grid; height: 22px; border-radius: 6px; border: 1px solid var(--hair-2); font-size: 9.5px; font-weight: 600; color: var(--body); animation: cv-press 8s var(--ease) infinite; }
.cv-copy > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; }
.cv-copy .b { color: #10b981; opacity: 0; animation: cv-copied 8s steps(1) infinite; }
.cv-copy .a { animation: cv-copy 8s steps(1) infinite; }
@keyframes cv-copy { 0% { opacity: 1; } 66% { opacity: 0; } 86% { opacity: 1; } }
@keyframes cv-copied { 0% { opacity: 0; } 66% { opacity: 1; } 86% { opacity: 0; } }
@keyframes cv-press { 0%, 62% { transform: none; background: #fff; } 64% { transform: scale(.94); background: var(--primary-glow); } 68%, 84% { transform: none; background: rgba(16, 185, 129, .08); border-color: rgba(16, 185, 129, .4); } 88%, 100% { background: #fff; } }
.cv-type { font-size: 11px; line-height: 1.45; color: var(--ink); clip-path: inset(0 100% 0 0); animation: cv-type 8s steps(24) infinite; }
@keyframes cv-type { 0% { clip-path: inset(0 100% 0 0); } 30%, 96% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.cv-tags { display: flex; gap: 4px; }
.cv-tags em { font-style: normal; padding: 1px 6px; border-radius: 6px; background: var(--primary-glow); color: var(--primary); font-size: 9.5px; font-weight: 600; opacity: 0; animation: cv-pop2 8s var(--ease) infinite; animation-delay: calc(var(--i) * .25s); }
@keyframes cv-pop2 { 0%, 32% { opacity: 0; transform: translateY(3px); } 36%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.cv-ghost { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; animation: cv-ghost 8s cubic-bezier(.2, .7, .2, 1.06) infinite; }
.cv-ghost svg { position: absolute; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.cv-ghost .g-arrow { left: -4.17px; top: -2.08px; color: var(--ink); animation: cv-arrow 8s steps(1) infinite; }
.cv-ghost .g-hand { left: -9.38px; top: -2.6px; visibility: hidden; animation: cv-hand 8s steps(1) infinite; }
@keyframes cv-ghost { 0%, 40% { transform: translate(var(--gx0, 60%), var(--gy0, 150px)); opacity: 0; } 44% { opacity: 1; transform: translate(var(--gx0, 60%), var(--gy0, 150px)); } 58%, 74% { transform: translate(var(--gx1), var(--gy1)); opacity: 1; } 84% { transform: translate(var(--gx2), var(--gy2)); opacity: 1; } 90%, 100% { transform: translate(var(--gx2), var(--gy2)); opacity: 0; } }
@keyframes cv-arrow { 0% { visibility: visible; } 58% { visibility: hidden; } 76% { visibility: visible; } }
@keyframes cv-hand { 0% { visibility: hidden; } 58% { visibility: visible; } 76% { visibility: hidden; } }
.cv-rip { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--primary); opacity: 0; animation: cv-rip 8s var(--ease) infinite; }
@keyframes cv-rip { 0%, 63% { opacity: 0; transform: scale(.3); } 64% { opacity: .9; transform: scale(.3); } 72%, 100% { opacity: 0; transform: scale(1.5); } }

/* C/08 shared scripts */
.cv-share { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; }
.cv-sbtn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--hair-2); background: #fff; font-size: 10.5px; font-weight: 600; animation: cv-press3 7s var(--ease) infinite; }
@keyframes cv-press3 { 0%, 8% { transform: none; } 11% { transform: scale(.93); background: var(--primary-glow); color: var(--primary); } 15%, 100% { transform: none; } }
.cv-url { position: relative; width: 74%; height: 26px; display: flex; align-items: center; padding: 0 10px; border-radius: 8px; background: var(--snow); border: 1px solid var(--hair); overflow: hidden; font: 500 9.5px var(--mono); color: var(--ink); }
.cv-url span { opacity: 0; animation: cv-url 7s var(--ease) infinite; white-space: nowrap; }
.cv-shim { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(115, 49, 189, .14), transparent); transform: translateX(-100%); animation: cv-shim 7s ease-in-out infinite; }
@keyframes cv-shim { 0%, 14% { transform: translateX(-100%); opacity: 1; } 30% { transform: translateX(100%); opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes cv-url { 0%, 30% { opacity: 0; transform: translateY(4px); } 36%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.cv-exp { font-size: 8.5px; opacity: 0; animation: cv-url 7s var(--ease) infinite; animation-delay: .3s; }
.cv-targets { display: flex; gap: 7px; }
.cv-targets i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--c); color: #fff; font: 700 9px var(--sans); font-style: normal; opacity: 0; animation: cv-pop 7s var(--ease) infinite; animation-delay: calc(2.6s + var(--i) * .12s); }

@media (prefers-reduced-motion: reduce) {
  .capv *, .capv *::before, .capv *::after { animation-delay: 0s !important; }
  .cv-tcard:first-child, .cv-ph-live, .cv-live, .cv-fill em, .cv-tags em, .cv-targets i, .cv-url span, .cv-exp, .cv-take, .cv-lens--a { opacity: 1 !important; }
  .cv-type { clip-path: none !important; }
  .cv-bar::before { transform: scaleX(var(--w)) !important; }
  .cv-flow i { transform: none !important; }
  .cv-num { --n: var(--to) !important; }
  .cv-ph-wait, .cv-ghost, .cv-shim { display: none; }
}

/* sound toggle slot (engine lands later) */
.snd { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--hair-2); background: var(--paper); color: var(--mute); cursor: pointer; transition: color var(--t-ui) var(--ease-ui), border-color var(--t-ui) var(--ease-ui); }
.snd:hover { color: var(--ink); border-color: var(--primary-border); }
.snd-eq { display: flex; align-items: center; gap: 2px; height: 14px; }
.snd-eq i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform: scaleY(.3); transition: transform .3s var(--ease); }
.snd-eq i:nth-child(2) { transform: scaleY(.55); } .snd-eq i:nth-child(3) { transform: scaleY(.4); }
.snd[aria-pressed="true"] { color: var(--primary); border-color: var(--primary-border); }
.snd[aria-pressed="true"] .snd-eq i { animation: eq 1.1s ease-in-out infinite alternate; }
.snd[aria-pressed="true"] .snd-eq i:nth-child(2) { animation-delay: -.4s; } .snd[aria-pressed="true"] .snd-eq i:nth-child(3) { animation-delay: -.7s; } .snd[aria-pressed="true"] .snd-eq i:nth-child(4) { animation-delay: -.2s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* ==========================================================================
   PAGES: contact, privacy, terms
   ========================================================================== */
.page-hero { padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--hair); background: linear-gradient(180deg, #fff, #fbfaff); }
.page-h1 { font: 300 clamp(40px, 5vw, 68px)/1.02 var(--sans); letter-spacing: -0.045em; color: var(--ink); text-wrap: balance; max-width: 16ch; }
.page-hero .lede { max-width: 40em; }
.page-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; font-size: 10.5px; }
.page-meta a { color: var(--primary-deep); text-underline-offset: 3px; }
.legal-grid { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); padding-block: clamp(48px, 6vw, 88px); align-items: start; }
.toc { position: sticky; top: calc(var(--nav-h) + 28px); max-height: calc(100vh - var(--nav-h) - 56px); overflow: auto; }
.toc-h { margin-bottom: 14px; color: var(--ink); font-size: 10.5px; }
.toc ol { border-left: 1px solid var(--hair-2); }
.toc a { position: relative; display: flex; gap: 10px; padding: 7px 0 7px 14px; font-size: 14px; color: var(--mute); text-decoration: none; transition: color var(--t-ui) var(--ease-ui); }
.toc a .mono { font-size: 10px; padding-top: 2px; }
.toc a::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--primary); transform: scaleY(0); transition: transform .35s var(--ease); }
.toc a:hover { color: var(--ink); }
.toc a.is-on { color: var(--ink); }
.toc a.is-on::before { transform: scaleY(1); }
.legal-body { max-width: 68ch; }
.lsec { padding: 0 0 36px; margin-bottom: 36px; border-bottom: 1px solid var(--hair); scroll-margin-top: calc(var(--nav-h) + 24px); }
.lsec h2 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; font: 400 clamp(22px, 2vw, 28px)/1.2 var(--sans); letter-spacing: -0.03em; color: var(--ink); }
.lsec h2 .mono { font-size: 11px; color: var(--primary-deep); }
.lsec p, .lsec li { font-size: 16.5px; line-height: 1.7; color: var(--body); }
.lsec p + p, .lsec ul + p, .lsec p + ul { margin-top: 14px; }
.lsec ul { display: flex; flex-direction: column; gap: 8px; padding-left: 0; }
.lsec li { position: relative; padding-left: 22px; }
.lsec li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 8px; height: 1px; background: var(--primary); }
.lsec strong { color: var(--ink); font-weight: 600; }
.lsec a, .legal-back a { color: var(--primary-deep); text-underline-offset: 3px; }
.legal-back { font-size: 10.5px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact .page-h1 { max-width: 12ch; }
.channel { display: flex; gap: 14px; margin-top: 36px; padding: 18px; border: 1px solid var(--hair-2); border-radius: 14px; background: #fff; text-decoration: none; color: var(--body); transition: border-color var(--t-ui) var(--ease-ui), transform var(--t-move) var(--ease); }
.channel:hover { border-color: var(--primary-border); transform: translateY(-1px); }
.channel-ic { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--primary-glow); color: var(--primary); }
.channel b { display: block; color: var(--ink); font-weight: 600; }
.channel span span { display: block; font-size: 14px; }
.channel em { display: block; margin-top: 4px; font-style: normal; font-weight: 600; color: var(--primary-deep); }
.qa { margin-top: 40px; }
.qa-h { margin-bottom: 10px; color: var(--ink); font-size: 10.5px; }
.form-card { position: relative; padding: clamp(24px, 3.4vw, 44px); border: 1px solid var(--hair-2); background: #fff; box-shadow: 0 30px 70px -40px rgba(30, 27, 46, .35); }
.cform-h { font: 400 26px/1.2 var(--sans); letter-spacing: -0.03em; color: var(--ink); }
.cform-sub { margin: 6px 0 22px; font-size: 14px; }
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 7px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.field input, .field textarea, .field select {
  display: block; width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--hair-2); background: var(--snow);
  font: 400 16px/1.4 var(--sans); color: var(--ink); transition: border-color var(--t-ui) var(--ease-ui), box-shadow var(--t-ui) var(--ease-ui), background-color var(--t-ui) var(--ease-ui);
}
.field textarea { resize: vertical; min-height: 128px; }
.field input::placeholder, .field textarea::placeholder { color: #8a84a3; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(115, 49, 189, .14); }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select-wrap .ic { position: absolute; right: 14px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--mute); }
.field.is-bad input, .field.is-bad textarea { border-color: #b91c1c; background: #fff; }
.err { margin-top: 6px; font-size: 13.5px; font-weight: 500; color: #b91c1c; }
.err::before { content: "! "; font-weight: 700; }
.field-foot { display: flex; justify-content: space-between; gap: 12px; }
.field-foot .count { margin-left: auto; margin-top: 6px; font-size: 10px; }
.consent { margin: 4px 0 20px; font-size: 14px; }
.consent a { color: var(--primary-deep); text-underline-offset: 3px; }
.cform-submit { width: 100%; }
.proto { margin-top: 14px; font-size: 10px; text-align: center; }
.cform-done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; outline: none; animation: done-in .5s var(--ease) both; }
.cform-done[hidden] { display: none; }
.cform-done h2 { font: 400 30px/1.15 var(--sans); letter-spacing: -0.03em; color: var(--ink); }
.done-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(16, 185, 129, .12); color: #047857; }
@keyframes done-in { from { opacity: 0; transform: translateY(10px); } }
.form-card .reg-tl { left: -9px; top: -9px; } .form-card .reg-br { right: -9px; bottom: -9px; }
@media (max-width: 960px) {
  .legal-grid, .contact-grid { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; }
  .toc ol { display: grid; grid-template-columns: 1fr 1fr; border-left: 0; gap: 0 16px; }
  .toc a::before { display: none; }
  .toc a { padding-left: 0; border-bottom: 1px solid var(--hair); }
}
@media (max-width: 520px) { .toc ol { grid-template-columns: 1fr; } }
@media print {
  .nav, .sheet, .skip, .foot, .toc, .snd, .page-meta, .legal-back, .sprite { display: none !important; }
  body { color: #000; background: #fff; }
  .page-hero { padding: 0 0 16px; background: none; border: 0; }
  .legal-grid { display: block; padding: 0; }
  .legal-body { max-width: none; }
  .lsec { break-inside: avoid-page; border-color: #ccc; }
  .lsec a[href^="http"]::after, .lsec a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* How it works: the live panel sits in a drawing frame (FIG. 02) with crop marks and a title block */
.dwg { position: relative; padding: 18px 18px 0; border: 1px solid var(--ink); background:
  linear-gradient(to right, var(--grid-minor) 1px, transparent 1px) 0 0 / 16px 16px,
  linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px) 0 0 / 16px 16px, #fff; }
.crop { position: absolute; width: 22px; height: 22px; pointer-events: none; }
.crop::before, .crop::after { content: ""; position: absolute; background: var(--ink); }
.crop::before { width: 22px; height: 1px; } .crop::after { width: 1px; height: 22px; }
.crop-tl { left: -30px; top: -30px; } .crop-tl::before { left: 0; bottom: 0; } .crop-tl::after { right: 0; top: 0; }
.crop-tr { right: -30px; top: -30px; } .crop-tr::before { right: 0; bottom: 0; } .crop-tr::after { left: 0; top: 0; }
.crop-bl { left: -30px; bottom: -30px; } .crop-bl::before { left: 0; top: 0; } .crop-bl::after { right: 0; bottom: 0; }
.crop-br { right: -30px; bottom: -30px; } .crop-br::before { right: 0; top: 0; } .crop-br::after { left: 0; bottom: 0; }
.dwg-head { display: flex; align-items: center; gap: 14px; margin: -4px 0 14px; font-size: 11px; color: var(--ink); }
.dwg-fig { padding: 3px 8px; border: 1px solid var(--ink); }
.dwg-rule { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--anno-soft) 0 18px, transparent 18px 23px, var(--anno-soft) 23px 26px, transparent 26px 31px); opacity: .7; }
.dwg-block { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr auto; margin: 18px -18px 0; border-top: 1px solid var(--ink); font-size: 11px; color: var(--ink); }
.dwg-block > span { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 10px 14px; border-left: 1px solid var(--ink); min-width: 0; }
.dwg-block > span:first-child { border-left: 0; }
.dwg-block em { font-style: normal; font-size: 9.5px; color: var(--mute); }
.dwg-block b { font-weight: 500; text-transform: none; letter-spacing: .02em; }
.dwg-block .sim { flex-direction: row; align-items: center; color: var(--mute); }
@media (max-width: 720px) {
  .dwg { padding: 12px 12px 0; }
  .crop { display: none; }
  .dwg-block { grid-template-columns: 1fr 1fr; margin: 12px -12px 0; }
  .dwg-block > span:nth-child(3) { border-left: 0; }
  .dwg-block > span:nth-child(n+3) { border-top: 1px solid var(--ink); }
}

/* ==========================================================================
   F/01 PROMPTER: "the instrument" (dial + vernier driving a 1:2 preview)
   ========================================================================== */
.inst-sec { background: linear-gradient(180deg, #fff 0%, #fbfaff 100%); }
.inst-grid { display: grid; grid-template-columns: minmax(230px, 2.7fr) minmax(0, 9.3fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.inst-copy .sec-title { font-size: clamp(32px, 3.2vw, 46px); }
.inst-text { margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--body); }
.inst-spec { margin-top: 28px; border-top: 1px solid var(--ink); font-size: 11px; }
.inst-spec div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair-2); }
.inst-spec dt { color: var(--mute); }
.inst-spec dd { color: var(--ink); text-align: right; }
.inst-sim { margin-top: 18px; }

.inst {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) 132px minmax(0, 1fr); gap: 32px; align-items: stretch;
  padding: 40px 44px 40px; border: 1px solid var(--hair-2); border-radius: 22px;
  background: radial-gradient(120% 100% at 22% 0%, #ffffff 0%, #f6f3fc 70%, #f1edf9 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(30, 27, 46, .05), 0 40px 80px -48px rgba(30, 27, 46, .4);
}
.screw { position: absolute; width: 13px; height: 13px; border-radius: 50%; border: 1px solid #c4bcd8; background: radial-gradient(circle at 35% 30%, #fff 0%, #ddd6ec 80%); }
.screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1.5px; margin-top: -.75px; background: #a79cc2; transform: rotate(var(--r, 35deg)); }
.screw-tl { left: 14px; top: 14px; } .screw-tr { right: 14px; top: 14px; --r: -20deg; } .screw-bl { left: 14px; bottom: 14px; --r: 70deg; } .screw-br { right: 14px; bottom: 14px; --r: 10deg; }
.inst-lbl { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 11px; color: var(--ink); }
.inst-lbl b { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--ink); font-weight: 500; }

/* A · dial */
.inst-dial { min-width: 0; display: flex; flex-direction: column; }
.inst-dial .dial { margin-block: auto; }
.dial { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.dial:active { cursor: grabbing; }
.dial-svg { width: 100%; height: 100%; overflow: visible; }
.dial-cl line { stroke: var(--anno-soft); stroke-width: 1; stroke-dasharray: 18 5 3 5; opacity: .45; }
.dial-bezel { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.dial-face { fill: #fff; stroke: var(--hair-2); stroke-width: 1; }
.dial-dimarc { fill: none; stroke: var(--anno-soft); stroke-width: 1; stroke-dasharray: 2 4; }
.tk { stroke: var(--ink); stroke-width: 1; }
.tk-major { stroke-width: 2.2; }
.tk-n { font: 500 15px var(--mono); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.dial-track { fill: none; stroke: var(--hair); stroke-width: 6; stroke-linecap: round; }
.dial-arc { fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round; }
.dial-needle line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.dial-needle-tip { fill: var(--primary); }
.dial-hub { fill: var(--ink); }
.dial-hub-in { fill: #fff; }
.dial-grip {
  position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  border: 2px solid var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(115, 49, 189, .12), 0 3px 8px rgba(115, 49, 189, .35); pointer-events: none;
}
.dial-read { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.roll { display: inline-flex; align-items: flex-start; height: 1em; font: 300 clamp(40px, 3.6vw, 54px)/1 var(--sans); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.roll-col { display: inline-block; height: 1em; overflow: hidden; }
.roll-strip { display: flex; flex-direction: column; transition: transform .7s var(--ease); }
.roll-strip span { display: block; height: 1em; }
.roll-x { margin-left: .06em; color: var(--primary); }
.dial-px { font-size: 11px; color: var(--mute); }
.dial-px b { color: var(--ink); font-weight: 500; }

/* B · vernier */
.inst-vern { align-self: stretch; display: flex; flex-direction: column; }
.vern { position: relative; flex: 1; min-height: 300px; cursor: ns-resize; touch-action: none; -webkit-user-select: none; user-select: none; border-radius: 6px; }
.vern-scale { position: absolute; left: 46px; top: 14px; bottom: 14px; width: 20px; border-right: 1.5px solid var(--ink); }
.vt { position: absolute; right: 0; top: calc(var(--f) * 100%); width: 9px; height: 1px; background: var(--ink); }
.vt-major { width: 18px; height: 2px; margin-top: -.5px; }
.vt b { position: absolute; right: 24px; top: -8px; font: 500 12px/16px var(--mono); color: var(--ink); }
.vern-dim { position: absolute; left: 4px; top: 14px; bottom: 14px; width: 12px; color: var(--anno); }
.vern-dim i { position: absolute; left: 5px; top: 0; bottom: 0; width: 1.25px; background: currentColor; }
.vern-dim i::before, .vern-dim i::after { content: ""; position: absolute; left: -3.4px; width: 8px; height: 9px; background: currentColor; }
.vern-dim i::before { top: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.vern-dim i::after { bottom: 0; clip-path: polygon(50% 100%, 100% 0, 0 0); }
.vern-dim b { position: absolute; left: 6px; top: 50%; translate: -50% -50%; rotate: -90deg; padding: 2px 6px; background: #f6f3fc; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.vern-car {
  position: absolute; left: 66px; top: calc(14px + var(--f, .667) * (100% - 28px)); width: 66px; height: 54px; margin-top: -27px;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
  border: 1.5px solid var(--primary); border-left-width: 0; border-radius: 0 10px 10px 0; background: #fff;
  box-shadow: 0 8px 18px -10px rgba(115, 49, 189, .55); transition: box-shadow .2s;
}
.vern-car::before { content: ""; position: absolute; left: -9px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-right: 9px solid var(--primary); border-left: 0; }
.vern-fine { position: absolute; left: 0; top: 50%; width: 10px; height: 36px; margin-top: -18px; display: flex; flex-direction: column; justify-content: space-between; }
.vern-fine i { display: block; height: 1px; width: 7px; background: var(--primary); }
.vern-fine i:nth-child(3) { width: 12px; height: 2px; }
.vern-out { font-size: 10.5px; color: var(--mute); text-align: right; line-height: 1.2; }
.vern-out b { display: block; font: 300 22px/1 var(--sans); letter-spacing: -0.02em; color: var(--ink); }

/* C · prompter preview (always dark, auto mode) */
.inst-prev { min-width: 0; }
.iscr {
  --tzui-reading-line: .5; --tzui-primary: #975adb; --fs: 16px;
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px;
  background: radial-gradient(60% 40% at 22% 88%, rgba(59, 130, 246, .12), transparent 70%), #121019;
  box-shadow: 0 0 0 1px rgba(30, 27, 46, .5), 0 26px 50px -26px rgba(30, 27, 46, .6);
}
.iscr-top { position: absolute; left: 0; right: 0; top: 12px; z-index: 3; display: flex; justify-content: center; }
.iscr-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(18, 18, 18, .8); border: 1px solid rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .55); font: 500 11px var(--mono); }
.iscr-col { position: absolute; inset: 0; transition: transform .6s var(--ease); }
.iscr-text { position: absolute; left: 10%; right: 10%; top: 50%; text-align: center; font-weight: 300; font-size: var(--fs); line-height: 1.9; letter-spacing: -0.02em; color: #fff; will-change: transform; transition: font-size .25s var(--ease-ui); }
.iscr-text p { margin: 0; }
.iscr-text .tzui-w-label { display: block; margin: 1.6em 0 .8em; padding-bottom: .5em; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: .5em; font-weight: 700; letter-spacing: .3em; color: rgba(255, 255, 255, .3); }
.iscr-copy:first-child .tzui-w-label:first-child { margin-top: 0; }
.iscr-line { z-index: 2; }
.iscr-mirror { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.iscr-mirror .mono { flex-basis: 100%; font-size: 10.5px; }
.ichip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--hair-2);
  background: #fff; color: var(--ink); font: 500 14px/1 var(--sans); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s;
}
.ichip:hover { border-color: var(--primary-border); }
.ichip[aria-pressed="true"] { border-color: var(--primary); color: var(--primary-deep); background: var(--primary-glow); }
.ichip.gh-active, .ichip:active { transform: scale(.97); }

@media (max-width: 1180px) {
  .inst-grid { grid-template-columns: 1fr; }
  .inst-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; align-items: end; }
  .inst-copy .inst-spec { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}
@media (max-width: 760px) {
  .inst-copy { display: block; }
  .inst-copy .inst-spec { margin-top: 24px; }
}
@media (max-width: 900px) {
  .inst { grid-template-columns: 112px minmax(0, 1fr); gap: 22px 16px; padding: 28px 18px 24px; border-radius: 18px; }
  .inst-dial { grid-column: 1 / -1; }
  .inst-vern { grid-row: 2; }
  .vern { min-height: 0; }
  .vern-scale { left: 40px; }
  .vern-car { left: 60px; width: 52px; padding-right: 6px; }
  .vern-out b { font-size: 18px; }
}
@media (max-width: 760px) { .screw { display: none; } }
@media (min-width: 641px) and (max-width: 900px) { .inst { grid-template-columns: 132px minmax(0, 1fr); padding: 36px 40px; } .inst-dial .dial { max-width: 420px; } }
/* product tour lightbox (opens from the hero's "Watch the tour (0:24)") */
.tour { width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; background: transparent; overflow: visible; color: var(--body); }
.tour::backdrop { background: rgba(20, 16, 32, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tour-in { position: relative; padding: 20px 22px 18px; border: 1px solid var(--ink); background: #fff; overflow: auto; max-height: calc(100dvh - 32px); }
.tour-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.tour-title { font: 300 28px/1.1 var(--sans); letter-spacing: -0.035em; color: var(--ink); }
.tour-x { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--hair-2); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; }
.tour-x:hover { border-color: var(--primary-border); color: var(--primary-deep); }
.tour .film-frame { box-shadow: 0 0 0 1px rgba(30, 27, 46, .35); }
@media (max-width: 640px) { .tour-in { padding: 14px 12px; } .tour-title { font-size: 22px; } }
/* ==========================================================================
   F/02 RECORDING: exploded assembly drawing + parts list
   ========================================================================== */
.xpl-sec { background: #fff; }
.xpl-head { max-width: 760px; margin: 0 auto clamp(20px, 3vw, 36px); text-align: center; }
.xpl-head .sec-idx { justify-content: center; }
.xpl-head .sec-idx::after { display: none; }
.xpl-lede { margin: 16px auto 0; max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--body); }
.xpl-draw {
  position: relative; height: clamp(460px, 44vw, 620px); border-block: 1px solid var(--ink);
  background-image: linear-gradient(to right, var(--grid-minor) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px);
  background-size: 16px 16px; overflow: hidden;
}
.xpl-iso {
  position: absolute; left: 50%; top: 57%; width: min(520px, 60%); aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-36deg); transform-style: preserve-3d;
}
.xpl-pl {
  --z: 0; position: absolute; inset: 0; border-radius: 12px; transform: translateZ(calc(var(--z) * var(--gap, 0px)));
  transition: transform 1.2s var(--ease), background-color .6s var(--ease-ui), box-shadow .4s var(--ease-ui);
}
.xpl-pl[data-pl="2"] { --z: 1; } .xpl-pl[data-pl="3"] { --z: 2; } .xpl-pl[data-pl="4"] { --z: 3; }
.xpl.is-ex .xpl-pl { --gap: clamp(46px, 5.6vw, 78px); }
.xpl.is-ex .xpl-pl[data-pl="2"], .xpl.is-ex .xpl-pl[data-pl="3"], .xpl.is-ex .xpl-pl[data-pl="4"] { box-shadow: 0 0 0 1px rgba(115, 49, 189, .7); }
.xpl-pl--feed { overflow: hidden; background: #241c33; box-shadow: 0 0 0 1px rgba(30, 27, 46, .6), 0 30px 50px -20px rgba(30, 27, 46, .55); }
.xpl-feed { position: absolute; inset: 0; background: #241c33 var(--tzui-feed) center / cover no-repeat; transform: scaleX(-1); transition: transform 1s var(--ease); }
.xpl-feed .feed-video { object-position: 50% 35%; }
.xpl.is-zoom .xpl-feed { transform: scaleX(-1) scale(1.35); }
.xpl-pl--script { background: transparent; }
.xpl.is-ex .xpl-pl--script { background: rgba(22, 18, 32, .82); }
.xpl-script { position: absolute; left: 12%; right: 12%; top: 16%; text-align: center; color: #fff; font: 300 14px/1.65 var(--sans); letter-spacing: -0.01em; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.xpl-script p { margin: 0; }
.xpl-lbl { display: block; margin: 6px 0 4px; font: 700 7px var(--sans); letter-spacing: .3em; color: rgba(255, 255, 255, .4); }
.xpl-pl--line { --tzui-reading-line: .5; --tzui-primary: #975adb; }
.xpl.is-ex .xpl-pl--line { background: rgba(22, 18, 32, .55); }
.xpl-word { position: absolute; left: 50%; top: 50%; translate: -50% -125%; color: #facc15; font: 300 17px var(--sans); filter: drop-shadow(0 0 8px rgba(251, 176, 64, .5)); }
.xpl.is-ex .xpl-pl--ctl { background: rgba(255, 255, 255, .28); }
.xpl-dock {
  position: absolute; left: 5%; right: 5%; bottom: 6%; height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 10px;
  border-radius: 11px; background: #0b0b0c; border: 1px solid rgba(63, 63, 70, .8); color: #fff; font-size: 11px;
}
.xpl-timer { font: 700 14px var(--mono); }
.xpl-play { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border-radius: 8px; background: #fff; color: #000; }
.xpl-zoom { display: grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 8px; border: 1px solid rgba(63, 63, 70, .8); font: 500 10px var(--mono); color: #a1a1aa; transition: background-color .3s, color .3s, border-color .3s; }
.xpl-zoom.is-on { background: rgba(151, 90, 219, .2); border-color: #975adb; color: #d5bdfa; }
.xpl-lens { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(63, 63, 70, .8); color: #a1a1aa; }
.xpl-fin { padding: 6px 10px; border-radius: 7px; background: #975adb; font: 700 9px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.xpl-cd { position: absolute; inset: 0 0 20%; display: grid; place-items: center; opacity: 0; transition: opacity .3s var(--ease-ui); }
.xpl-cd.is-on { opacity: 1; }
.xpl-cd b { font: 900 italic 64px/1 var(--sans); color: #fff; filter: drop-shadow(0 0 20px rgba(255, 255, 255, .5)); }
.xpl-pl.is-hl { box-shadow: 0 0 0 2px var(--primary), 0 0 36px rgba(115, 49, 189, .45) !important; }
.xpl-a { position: absolute; width: 1px; height: 1px; }
.xpl-pl[data-pl="1"] .xpl-a { left: 3%; top: 70%; }
/* each lower plane only shows a band along its local left and bottom edges (the planes above cover the rest),
   so 2 and 3 sit inside those bands, clear of the edge; 2 used to sit on its hidden top-right, under 3 and 4 */
.xpl-pl[data-pl="2"] .xpl-a { left: 72%; top: 88%; }
.xpl-pl[data-pl="3"] .xpl-a { left: 4%; top: 55%; }
.xpl-pl[data-pl="4"] .xpl-a { right: 8%; top: 82%; }
.xpl-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.xb { opacity: 0; transition: opacity .3s var(--ease-ui); }
.xpl.is-ex .xb { opacity: 1; transition-delay: .9s; }
.xb-l, .xb-h { fill: none; stroke-dashoffset: var(--len, 400); transition: stroke-dashoffset .7s var(--ease); }
.xpl.is-ex .xb-l, .xpl.is-ex .xb-h { stroke-dashoffset: 0; transition-delay: .9s; }
.xb-h { stroke: rgba(255, 255, 255, .85); stroke-width: 3.5; }
.xb-l { stroke: var(--anno); stroke-width: 1.25; }
.xb-dot { fill: var(--anno); stroke: #fff; stroke-width: 1.5; }
.xb-c { fill: #fff; stroke: var(--anno); stroke-width: 1.25; transition: fill .25s; }
.xb-t { fill: var(--anno); font: 600 12px var(--mono); text-anchor: middle; dominant-baseline: central; transition: fill .25s; }
.xb-n { fill: var(--ink); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; dominant-baseline: central; }
.xb.is-hl .xb-c { fill: var(--anno); } .xb.is-hl .xb-t { fill: #fff; }
.xpl-dim { position: absolute; left: 18px; top: 16px; padding: 3px 8px; border: 1px solid var(--ink); background: #fff; font-size: 10.5px; color: var(--ink); }

.bom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: end; margin-top: 28px; }
.bom-t { width: 100%; border-collapse: collapse; border: 1px solid var(--ink); background: #fff; }
.bom-t caption { caption-side: top; text-align: left; padding-bottom: 10px; font-size: 11px; color: var(--ink); }
.bom-t caption { display: table-caption; }
.bom-t caption .sim { float: right; }
.bom-t thead th { padding: 9px 14px; border-bottom: 1px solid var(--ink); background: #faf8fe; font-size: 10.5px; text-align: left; color: var(--ink); font-weight: 500; }
.bom-t tbody td, .bom-t tbody th { padding: 11px 14px; border-top: 1px solid var(--hair-2); font-size: 16px; line-height: 1.45; text-align: left; vertical-align: middle; color: var(--body); transition: background-color .3s; }
.bom-t tbody th { font-weight: 500; color: var(--ink); white-space: nowrap; }
.bom-t tbody td:first-child { width: 64px; }
.bom-t tr.is-hl td, .bom-t tr.is-hl th { background: var(--primary-tint); }
.bom-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.25px solid var(--anno); background: #fff; color: var(--anno); font: 600 12px var(--mono); cursor: pointer; transition: background-color .2s, color .2s; }
.bom-n[aria-pressed="true"] { background: var(--anno); color: #fff; }
.bom-ctl { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bom-note { font-size: 10.5px; }

/* ==========================================================================
   F/03 CAPTIONS: oscilloscope
   ========================================================================== */
.scope-sec { background: #fff; }
.scope-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.scope-lede { font-size: 18px; line-height: 1.55; color: var(--body); max-width: 30em; }
.scope-bezel {
  position: relative; padding: 16px 18px 18px; border-radius: 24px; border: 1px solid #0d0b13;
  background: linear-gradient(180deg, #2b2638 0%, #1c1826 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 80px -44px rgba(30, 27, 46, .7);
}
.scope-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding: 0 6px 12px; font-size: 11px; color: rgba(255, 255, 255, .7); }
.scope-bar span { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.scope-led { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.scope-screen {
  position: relative; height: clamp(200px, 21vw, 300px); overflow: hidden; border-radius: 12px; background-color: #0d0b14;
  background-image:
    linear-gradient(to right, rgba(186, 130, 248, .16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(186, 130, 248, .16) 1px, transparent 1px),
    linear-gradient(to right, rgba(186, 130, 248, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(186, 130, 248, .06) 1px, transparent 1px);
  background-size: 10% 12.5%, 10% 12.5%, 2% 2.5%, 2% 2.5%;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.scope-screen::before, .scope-screen::after { content: ""; position: absolute; background: rgba(186, 130, 248, .3); pointer-events: none; }
.scope-screen::before { left: 0; right: 0; top: 50%; height: 1px; }
.scope-screen::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.scope-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.scope-marks { position: absolute; left: 0; right: 0; bottom: 8px; height: 40px; pointer-events: none; }
.scope-marks li { position: absolute; bottom: 0; left: calc(var(--s) * 100%); width: calc(var(--d) * 100%); height: 7px; border: 1px solid rgba(186, 130, 248, .7); border-top: 0; opacity: .18; transition: opacity .25s var(--ease-ui); }
.scope-marks li span { position: absolute; left: 0; bottom: 10px; font: 500 10px var(--mono); color: #e9ddff; white-space: nowrap; opacity: 0; transition: opacity .25s var(--ease-ui); }
.scope-marks li:nth-child(even) span { bottom: 23px; }
.scope-marks li.is-on { opacity: 1; }
.scope-marks li.is-on span { opacity: 1; }
.scope-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; margin-top: 16px; }
.cap-out { display: grid; place-items: center; min-height: 104px; padding: 16px; border-radius: 12px; background: radial-gradient(80% 120% at 50% 100%, #3a3150, #15121d); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.cap-line { max-width: 32ch; text-align: center; font: 700 clamp(19px, 1.9vw, 27px)/1.35 var(--sans); color: #fff; letter-spacing: -0.01em; }
.cap-line .cw { display: inline-block; opacity: 0; transform: translateY(6px); transition: opacity .2s var(--ease-ui), transform .35s var(--ease); }
.cap-line .cw.is-on { opacity: 1; transform: none; }
.cap-line[data-preset="box"] .cw { padding: 1px .22em; margin: 2px 0; background: rgba(0, 0, 0, .78); }
.cap-line[data-preset="pop"] .cw { font-weight: 900; text-transform: uppercase; text-shadow: 0 3px 0 #7331bd, 0 0 18px rgba(151, 90, 219, .5); }
.cap-line[data-preset="pop"] .cw.is-on { animation: cw-pop .35s var(--ease); }
@keyframes cw-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } }
.cap-line[data-preset="minimal"] .cw { font-weight: 500; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.cap-line[data-preset="outline"] .cw { font-weight: 900; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000; }
.scope-ctl { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.scope-ctl .sim { color: rgba(255, 255, 255, .62); }
.tgl-group { display: flex; gap: 6px; padding: 10px 10px 8px; border-radius: 14px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.tgl { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 62px; padding: 2px 4px; border: 0; border-radius: 8px; background: none; color: rgba(255, 255, 255, .7); cursor: pointer; }
.tgl-sw { position: relative; display: block; width: 26px; height: 46px; border-radius: 8px; background: linear-gradient(#100d16, #2a2436); border: 1px solid #000; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .08); }
.tgl-sw i { position: absolute; left: 3px; right: 3px; top: 22px; height: 19px; border-radius: 5px; background: linear-gradient(#ece8f6, #aea6c4); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); transition: top .25s var(--ease), background .25s; }
.tgl[aria-checked="true"] .tgl-sw i { top: 3px; background: linear-gradient(#e1cbff, #975adb); box-shadow: 0 0 10px rgba(151, 90, 219, .7), 0 2px 3px rgba(0, 0, 0, .5); }
.tgl-l { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tgl[aria-checked="true"] .tgl-l { color: #fff; }
.push {
  display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(#8f5bd6, #7331bd); color: #fff; font: 600 14px var(--sans); box-shadow: 0 3px 0 #4a1d80, 0 10px 20px -8px rgba(115, 49, 189, .7);
  transition: transform .1s var(--ease-ui), box-shadow .1s;
}
.push:active { transform: translateY(2px); box-shadow: 0 1px 0 #4a1d80; }
.push:disabled { opacity: .75; cursor: progress; }
.push-cap { width: 9px; height: 9px; border-radius: 50%; background: #e9ddff; box-shadow: 0 0 6px #e9ddff; }
.scope.is-gen .push-cap { animation: pulse 1s infinite; }

/* ==========================================================================
   F/04 EDITOR: track diagram (schematic)
   ========================================================================== */
.sch-sec { background: #fbfaff; }
.sch {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); grid-template-areas: "title spec" "board board" "foot foot";
  border: 1px solid var(--ink); background-color: #fff;
  background-image: linear-gradient(to right, var(--grid-minor) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px); background-size: 16px 16px;
}
.sch-title { grid-area: title; padding: 28px 32px 26px; border-bottom: 1px solid var(--ink); background: rgba(255, 255, 255, .9); }
.sch-lede { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--body); max-width: 34em; }
.sch-spec { grid-area: spec; padding: 18px 22px; border-left: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: rgba(255, 255, 255, .9); font-size: 11px; }
.sch-spec div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hair-2); }
.sch-spec div:last-child { border-bottom: 0; }
.sch-spec dt { color: var(--mute); }
.sch-spec dd { color: var(--ink); text-align: right; }
.sch-board { --lab: 150px; grid-area: board; position: relative; padding: 18px 32px 22px; cursor: col-resize; touch-action: none; }
.sch-ruler { position: relative; height: 30px; margin-left: var(--lab); border-bottom: 1px solid var(--ink); }
.rt { position: absolute; bottom: 0; left: calc(var(--s) / 12 * 100%); width: 1px; height: 6px; background: var(--ink); }
.rt-major { height: 12px; }
.rt b { position: absolute; bottom: 14px; left: 0; translate: -50% 0; font: 500 10.5px var(--mono); color: var(--ink); }
.sch-lanes { position: relative; }
.sch-lanes::before { content: ""; position: absolute; left: calc(var(--lab) - 8px); top: 0; bottom: 0; width: 1px; background: var(--ink); }
.lane { display: grid; grid-template-columns: 44px calc(var(--lab) - 44px) minmax(0, 1fr); align-items: center; height: 42px; }
.lane--main { height: 54px; }
.lane-k { justify-self: start; padding: 2px 6px; border: 1px solid var(--ink); background: #fff; font-size: 10.5px; color: var(--ink); }
.lane-n { font-size: 14px; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 14px; }
.lane-w { position: relative; height: 100%; }
.lane-w::before { content: ""; position: absolute; left: -8px; right: 0; top: 50%; height: 1px; background: var(--ink); }
.lane-w::after { content: ""; position: absolute; left: -11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ink); }
.clip {
  position: absolute; top: 50%; left: calc(var(--s) / 12 * 100%); width: calc(var(--d) / 12 * 100%); height: 24px; translate: 0 -50%;
  padding: 0 8px; overflow: hidden; border: 1.25px solid var(--ink); border-radius: 3px; background: #fff;
  font: normal 500 10.5px/22px var(--mono); letter-spacing: .02em; color: var(--ink); white-space: nowrap; text-overflow: ellipsis;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.c-vid { height: 32px; line-height: 30px; background: repeating-linear-gradient(135deg, #fff 0 5px, #efe8fa 5px 6px); }
.c-text { border-style: dashed; }
.c-fx { border-color: var(--anno); color: var(--primary-deep); }
.c-pip { border-width: 3px; border-style: double; line-height: 18px; }
.c-cc { background: #f5f3ff; }
.c-stk { border-radius: 12px; }
.c-aud { background: repeating-linear-gradient(90deg, #fff 0 3px, #f1edf9 3px 4px); }
.clip.is-live { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(115, 49, 189, .14); }
.kf { position: absolute; top: 50%; left: calc(var(--s) / 12 * 100%); z-index: 2; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: #fff; border: 1.5px solid var(--primary); transform: rotate(45deg); }
.kf.is-hit { animation: kf-hit .7s var(--ease); }
@keyframes kf-hit { 35% { transform: rotate(45deg) scale(1.9); background: var(--primary); box-shadow: 0 0 0 6px rgba(115, 49, 189, .15); } }
.kf-ease { font-style: normal; position: absolute; top: 1px; left: calc(var(--s) / 12 * 100%); translate: -50% 0; font-size: 9.5px; color: var(--primary-deep); white-space: nowrap; }
.xf { position: absolute; top: 50%; left: calc(var(--s) / 12 * 100%); z-index: 3; translate: -50% -50%; display: grid; justify-items: center; }
.xf svg { display: block; }
.xf path { fill: #fff; stroke: var(--anno); stroke-width: 1.5; stroke-linejoin: round; }
.xf b { font-style: normal; position: absolute; top: calc(100% + 1px); font-size: 9.5px; font-weight: 500; color: var(--primary-deep); white-space: nowrap; }
.xf.is-live path { fill: var(--anno); }
.sch-ph { position: absolute; top: 18px; bottom: 22px; left: calc(32px + var(--lab) + var(--t, 0) * (100% - 64px - var(--lab))); z-index: 5; width: 2px; margin-left: -1px; background: var(--rec); pointer-events: none; }
.sch-ph b { position: absolute; top: -2px; left: 50%; translate: -50% -100%; padding: 2px 6px; border-radius: 3px; background: var(--rec); color: #fff; font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
.sch-foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding: 18px 32px; border-top: 1px solid var(--ink); background: rgba(255, 255, 255, .92); }
.sch-transport { display: flex; align-items: center; gap: 14px; flex: 1 1 320px; min-width: 0; }
.sch-play { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: 1.25px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
.sch-scrub { position: relative; flex: 1; height: 24px; cursor: pointer; touch-action: none; }
.sch-scrub::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--hair); }
.sch-scrub i { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; width: calc(var(--t, 0) * 100%); border-radius: 2px; background: var(--primary); }
.sch-scrub i::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); }
.plates { display: flex; flex-wrap: wrap; gap: 12px; }
.plate { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 9px 22px; border: 1.5px solid #3b3550; border-radius: 4px; background: linear-gradient(180deg, #f6f4fa 0%, #e2ddeb 100%); box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(30, 27, 46, .12); }
.plate::before, .plate::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #8e86a3); }
.plate::before { left: 7px; } .plate::after { right: 7px; }
.plate b { font: 300 30px/1 var(--sans); letter-spacing: -0.03em; color: var(--ink); }
.plate span { font-size: 10.5px; color: var(--ink); }

/* ==========================================================================
   F/05 EXPORT: blueprint to render
   ========================================================================== */
.bp-sec { background: #fff; }
.bp-row { --h: clamp(150px, 18.6vw, 272px); display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 28px clamp(24px, 3.2vw, 46px); padding-top: 34px; }
.bp { position: relative; flex: none; width: calc(var(--h) * var(--ar)); margin: 0; }
.bp-frame { position: relative; display: block; width: 100%; height: var(--h); padding: 0; border: 0; background: none; cursor: pointer; }
.bp-blue {
  position: absolute; inset: 0; border: 1.5px dashed var(--anno-soft);
  background-image: linear-gradient(to right, var(--grid-minor) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px); background-size: 12px 12px;
}
.bp-x { position: absolute; inset: 0; background:
  linear-gradient(to top right, transparent calc(50% - .6px), rgba(138, 82, 207, .45) 50%, transparent calc(50% + .6px)),
  linear-gradient(to top left, transparent calc(50% - .6px), rgba(138, 82, 207, .45) 50%, transparent calc(50% + .6px)); }
.bp-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; clip-path: inset(0 0 100% 0); transition: clip-path 1.4s cubic-bezier(.4, 0, .2, 1); }
.bp.is-render .bp-img { clip-path: inset(0 0 0 0); }
.bp:not(.is-render) .bp-img { transition-duration: .45s; }
.bp-scan { z-index: 2; position: absolute; left: -6px; right: -6px; top: 0; height: 2px; background: var(--primary); box-shadow: 0 0 12px rgba(115, 49, 189, .8); opacity: 0; pointer-events: none; }
.bp.is-render:not(.is-done) .bp-scan { animation: bp-scan 1.4s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes bp-scan { from { transform: translateY(0); opacity: 1; } 96% { opacity: 1; } to { transform: translateY(var(--h)); opacity: 0; } }
.bp-frame:focus-visible { outline-offset: 4px; }
.bp-dim { position: absolute; color: var(--anno); pointer-events: none; }
.bp-dim i { position: absolute; background: currentColor; }
.bp-dim i::before, .bp-dim i::after { content: ""; position: absolute; background: currentColor; }
.bp-dim b { position: absolute; padding: 0 5px; background: #fff; font: 500 10.5px/14px var(--mono); letter-spacing: .06em; white-space: nowrap; }
.bp-dim-w { left: 0; right: 0; top: -22px; height: 14px; }
.bp-dim-w i { left: 0; right: 0; top: 7px; height: 1.25px; }
.bp-dim-w i::before, .bp-dim-w i::after { top: -3.4px; width: 8px; height: 8px; }
.bp-dim-w i::before { left: 0; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.bp-dim-w i::after { right: 0; clip-path: polygon(100% 50%, 0 0, 0 100%); }
.bp-dim-w b { left: 50%; top: 0; translate: -50% 0; }
.bp-dim-h { left: -18px; top: 0; width: 14px; height: var(--h); }
.bp-dim-h i { top: 0; bottom: 0; left: 6px; width: 1.25px; }
.bp-dim-h i::before, .bp-dim-h i::after { left: -3.4px; width: 8px; height: 8px; }
.bp-dim-h i::before { top: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bp-dim-h i::after { bottom: 0; clip-path: polygon(50% 100%, 100% 0, 0 0); }
.bp-dim-h b { left: 6px; top: 50%; translate: -50% -50%; rotate: -90deg; }
.bp figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 12px; font-size: 10.5px; }
.bp figcaption b { color: var(--ink); font-weight: 500; }
.bp-ok { font-style: normal; color: #047857; opacity: 0; transition: opacity .3s; }
.bp.is-done .bp-ok { opacity: 1; }
.bp-note { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 56px; align-items: start; margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--ink); }
.bp-lede { font-size: 18px; line-height: 1.55; color: var(--body); }
.bp-status { display: inline-flex; align-items: center; gap: 9px; margin: 18px 12px 0 0; padding: 7px 14px; border: 1px solid var(--hair-2); border-radius: 999px; font-size: 11px; color: var(--ink); }
.bp-status i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--hair-2); border-top-color: var(--primary); animation: spin 1s linear infinite; }
.bp-status.is-done { border-color: rgba(16, 185, 129, .5); color: #047857; }
.bp-status.is-done i { border: 0; background: #10b981; animation: none; box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }

/* ==========================================================================
   F/06 SESSION ANALYSIS: instrument cluster
   ========================================================================== */
.clu-sec { background: linear-gradient(180deg, #fbfaff, #fff); }
.clu-grid { display: grid; grid-template-columns: minmax(0, 8.3fr) minmax(0, 3.7fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.clu {
  position: relative; padding: 24px 28px 22px; border-radius: 30px 30px 22px 22px; border: 1px solid #0b0a10; color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #2c2639 0%, #18151f 62%, #110f18 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 44px 80px -44px rgba(17, 15, 24, .85);
}
.clu-title { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 11px; color: rgba(255, 255, 255, .66); }
.clu-gauges { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, .62fr) minmax(0, .85fr); gap: 18px; align-items: end; }
.gg { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.gg-svg { display: block; width: 100%; height: auto; overflow: visible; }
.gg-conf .gg-svg { max-width: 170px; }
.gt { stroke: rgba(255, 255, 255, .38); stroke-width: 1.2; }
.gt-major { stroke: #fff; stroke-width: 2.2; }
.gt-n { fill: rgba(255, 255, 255, .78); font: 500 12px var(--mono); text-anchor: middle; dominant-baseline: central; }
.gt-target { fill: #c49bf7; }
.gt-tl { fill: #d9c4fb; font: 600 11px var(--mono); text-anchor: middle; dominant-baseline: central; }
.gg-track { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 6; }
.gg-arc { fill: none; stroke: #975adb; stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(151, 90, 219, .7)); }
.gg-needle line { stroke: #fff; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .5)); }
.gg-hub { fill: #fff; }
.gg-ring-bg { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 12; }
.gg-ring { fill: none; stroke: #10b981; stroke-width: 12; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 80px 80px; filter: drop-shadow(0 0 6px rgba(16, 185, 129, .55)); }
.gg-read { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 6px; }
.gg-read b { font: 300 32px/1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.gg-read .mono { font-size: 11px; color: rgba(255, 255, 255, .62); }
.gg-wpm .gg-read { position: absolute; left: 50%; bottom: 30px; translate: -50% 0; margin: 0; }
.gg-wpm .gg-read b { font-size: 34px; }
.gg-read--c { position: absolute; left: 50%; top: calc(50% - 22px); translate: -50% -50%; margin: 0; }
.gg-l { margin-top: 10px; font-size: 11px; color: rgba(255, 255, 255, .78); line-height: 1.45; }
.gg-l span { color: rgba(255, 255, 255, .5); }
.ent { display: flex; flex-direction: column-reverse; gap: 4px; width: 34px; height: 140px; }
.ent i { flex: 1; border-radius: 3px; background: rgba(139, 92, 246, .16); transition: background-color .25s, box-shadow .25s; }
.ent i.is-on { background: #8b5cf6; box-shadow: 0 0 10px rgba(139, 92, 246, .6); }
.odo { display: inline-flex; height: 1.2em; padding: .1em .32em; border-radius: 10px; background: #0b0a10; border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 4px 10px rgba(0, 0, 0, .6); font: 300 58px/1 var(--sans); overflow: hidden; }
.odo-col { display: inline-block; height: 1em; overflow: hidden; }
.odo-strip { display: flex; flex-direction: column; transition: transform 1.1s var(--ease); }
.odo-strip span { display: block; height: 1em; }
.fill-chips { display: flex; gap: 6px; margin-top: 8px; font-size: 10.5px; }
.fill-chips span { padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(245, 158, 11, .55); color: #fcd34d; }
.clu-strip { margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.strip-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 11px; color: rgba(255, 255, 255, .78); }
.strip-badge { padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(245, 158, 11, .55); color: #fcd34d; }
.strip { display: flex; gap: 2px; height: 34px; margin: 12px 0; padding: 4px; border-radius: 10px; background-color: rgba(0, 0, 0, .25); background-image: linear-gradient(to right, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 10% 100%; }
.strip i { flex: var(--g) 1 0; min-width: 0; border-radius: 4px; background: #10b981; opacity: .9; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.strip i.p { background: rgba(245, 158, 11, .45); }
.strip.is-on i { transform: scaleX(1); }
.strip i:nth-child(2) { transition-delay: .08s; } .strip i:nth-child(3) { transition-delay: .16s; } .strip i:nth-child(4) { transition-delay: .24s; } .strip i:nth-child(5) { transition-delay: .32s; }
.strip i:nth-child(6) { transition-delay: .4s; } .strip i:nth-child(7) { transition-delay: .48s; } .strip i:nth-child(8) { transition-delay: .56s; } .strip i:nth-child(9) { transition-delay: .64s; }
.strip-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 10.5px; }
.strip-stats div { display: flex; flex-direction: column; gap: 2px; }
.strip-stats dt { color: rgba(255, 255, 255, .62); }
.strip-stats dd { font: 300 20px/1.1 var(--sans); letter-spacing: -0.02em; color: #fff; text-transform: none; }
.clu-lamp { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .5); transition: color .4s; }
.clu-lamp i { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: #1c3a2a; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); transition: background-color .4s, box-shadow .4s; }
.clu-lamp.is-on { color: #fff; }
.clu-lamp.is-on i { background: #22c55e; box-shadow: 0 0 14px #22c55e; }
.clu-lamp b { font-weight: 600; }
.clu-lede { margin-top: 18px; font-size: 18px; line-height: 1.55; color: var(--body); }
.clu-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 14px; }
.ana-pop { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--ink); background: #faf8fe; font-size: 12px; line-height: 1.6; color: var(--ink); text-transform: none; white-space: pre; }
.ana-toast { min-height: 18px; margin-bottom: 10px; font-size: 10.5px; color: var(--primary-deep); opacity: 0; transition: opacity .3s; }
.ana-toast.is-on { opacity: 1; }

/* ==========================================================================
   ALSO IN THE APP: a parts sheet of details (B1–B9)
   ========================================================================== */
.dsheet { background: #fff; }
.dsheet .capg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 48px; padding: 14px 4px 0; }
.dtl { position: relative; }
.dtl .crop { width: 14px; height: 14px; }
.dtl .crop::before { width: 14px; } .dtl .crop::after { height: 14px; }
.dtl .crop-tl { left: -12px; top: 18px; } .dtl .crop-tr { right: -12px; top: 18px; }
.dtl .crop-bl { left: -12px; bottom: -14px; } .dtl .crop-br { right: -12px; bottom: -14px; }
.dtl-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 10.5px; color: var(--ink); }
.dtl-tag b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 50%; border: 1.25px solid var(--anno); color: var(--anno); font-weight: 600; }
.dtl > p { font-size: 16px; }
.dtl-scale { display: inline-flex; align-items: center; gap: 8px; font-size: 9.5px; color: var(--mute); }
.dtl-scale i { width: 64px; height: 6px; border: 1px solid var(--ink); background: linear-gradient(90deg, var(--ink) 0 25%, #fff 25% 50%, var(--ink) 50% 75%, #fff 75%); }
.cv-off { position: absolute; left: 50%; top: 46%; translate: -50% -100%; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(18, 18, 18, .8); border: 1px solid rgba(255, 255, 255, .1); font: 700 7px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); opacity: 0; animation: cv-off 8s steps(1) infinite; }
.cv-off::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(250, 204, 21, .7); }
@keyframes cv-off { 0%, 62% { opacity: 0; } 63%, 86% { opacity: 1; } 87%, 100% { opacity: 0; } }
.cv-refine { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.cv-diff { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: 9px; background: #fff; border: 1px solid var(--hair-2); box-shadow: 0 8px 20px -14px rgba(30, 27, 46, .35); }
.cv-diff-h { font: 700 10px var(--sans); color: var(--ink); }
.cv-diff-g { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: 1; }
.cv-diff-g > div { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 6px; border: 1px solid var(--hair-2); }
.cv-o { opacity: .7; }
.cv-r { background: rgba(16, 185, 129, .05); border-color: rgba(16, 185, 129, .25) !important; }
.cv-diff-g em { font: normal 600 7.5px var(--sans); color: var(--mute); display: flex; align-items: center; gap: 4px; }
.cv-diff-g em b { padding: 0 4px; border-radius: 999px; background: #10b981; color: #fff; font-size: 6.5px; }
.cv-diff-g i { height: 4px; border-radius: 2px; background: #e4def2; }
.cv-diff-g i.s { width: 60%; }
.cv-r i { background: rgba(16, 185, 129, .35); transform-origin: left; animation: cv-ref 6s var(--ease) infinite; }
.cv-r i:nth-of-type(2) { animation-delay: .2s; } .cv-r i:nth-of-type(3) { animation-delay: .4s; }
@keyframes cv-ref { 0%, 12% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }
.cv-diff-b { display: flex; justify-content: flex-end; gap: 6px; }
.cv-diff-b span { padding: 3px 7px; border-radius: 5px; font: 600 7.5px var(--sans); }
.cv-undo { border: 1px solid #ef4444; color: #ef4444; }
.cv-keep { background: var(--primary); color: #fff; animation: cv-keep 6s steps(1) infinite; }
@keyframes cv-keep { 0%, 74% { box-shadow: none; } 75%, 88% { box-shadow: 0 0 0 3px rgba(115, 49, 189, .25); } }
.cv-more { display: flex; gap: 6px; }
.cv-more span { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--primary-border); color: var(--primary-deep); font: 600 8px var(--sans); }

/* ==========================================================================
   PRICING: spec sheet with a title block
   ========================================================================== */
.spec-sec { background: #fbfaff; }
.spec-grid { display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.spec-lede { margin-top: 18px; font-size: 18px; color: var(--body); }
.spec { position: relative; border: 1px solid var(--ink); background: #fff; }
.spec-t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.spec-t th, .spec-t td { padding: 16px 22px; border-bottom: 1px solid var(--hair-2); text-align: left; vertical-align: middle; font-size: 17px; color: var(--ink); transition: background-color .45s var(--ease-ui); }
.spec-t thead th { padding-block: 22px; border-bottom: 1px solid var(--ink); vertical-align: bottom; font-weight: 400; }
.spec-t thead th .mono { display: block; margin-bottom: 8px; color: var(--ink); }
.spec-t th + th, .spec-t td { border-left: 1px solid var(--hair-2); }
.spec-t tbody th { font-size: 11px; color: var(--mute); font-weight: 500; }
.spec-t thead th:first-child { width: 28%; }
.spec-price { display: flex; align-items: baseline; gap: 4px; font: 300 clamp(44px, 4.4vw, 64px)/1 var(--sans); letter-spacing: -0.045em; color: var(--ink); }
.spec-price .cur { font-size: .45em; align-self: flex-start; margin-top: .25em; }
.spec-price .per { margin-left: 6px; font: 400 15px var(--sans); letter-spacing: 0; color: var(--mute); }
.spec-t .is-pro { background-color: rgba(115, 49, 189, .035); }
.spec-t thead .is-pro { box-shadow: inset 0 3px 0 var(--primary); }
.spec-t tr.is-scan th, .spec-t tr.is-scan td { background-color: rgba(115, 49, 189, .09); }
.spec-cta th, .spec-cta td { border-bottom: 0; }
.spec-cta .btn { width: 100%; }
.tb { display: flex; flex-wrap: wrap; border-top: 1px solid var(--ink); font-size: 10.5px; color: var(--ink); }
.tb > span { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border-right: 1px solid var(--ink); }
.tb > span:last-child { border-right: 0; margin-left: auto; }
.tb em { font-style: normal; font-size: 9.5px; color: var(--mute); }
.spec-note { padding: 10px 14px; border-top: 1px solid var(--hair-2); font-size: 10.5px; }

/* ==========================================================================
   FAQ: smooth accordion, each question pinned by a callout balloon
   ========================================================================== */
.faq-sec { background: #fff; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.faq-head { position: sticky; top: calc(var(--nav-h) + 32px); }
.faq-lede { margin-top: 18px; font-size: 18px; color: var(--body); }
.faq-lede a { color: var(--primary-deep); text-underline-offset: 3px; }
.acc { position: relative; padding-left: 64px; }
.acc::before { content: ""; position: absolute; left: 17px; top: 30px; bottom: 30px; width: 1px; background: repeating-linear-gradient(180deg, var(--anno-soft) 0 6px, transparent 6px 10px); }
.acc-item { position: relative; border-bottom: 1px solid var(--hair-2); }
.acc-item:first-child { border-top: 1px solid var(--ink); }
.acc-item summary { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 4px; cursor: pointer; list-style: none; }
.acc-item summary::-webkit-details-marker { display: none; }
.acc-bl { position: absolute; left: -64px; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; border: 1.25px solid var(--anno); background: #fff; color: var(--anno); font-size: 12px; font-weight: 600; transition: background-color .25s, color .25s; }
.acc-bl::after { content: ""; position: absolute; left: 100%; top: 50%; width: 30px; height: 1.25px; background: var(--anno); }
.acc-item[open] .acc-bl { background: var(--anno); color: #fff; }
.acc-q { flex: 1; font: 400 clamp(18px, 1.5vw, 21px)/1.35 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.acc-x { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--hair-2); color: var(--ink); transition: transform .4s var(--ease), border-color .2s; }
.acc-x svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.acc-item[open]:not(.is-closing) .acc-x { transform: rotate(45deg); border-color: var(--primary-border); }
.acc-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--ease); }
.acc-body > div { overflow: hidden; }
.acc-item.is-opening .acc-body, .acc-item.is-closing .acc-body { grid-template-rows: 0fr; }
.acc-body p { padding: 0 48px 24px 4px; font-size: 17px; line-height: 1.65; color: var(--body); }

/* ==========================================================================
   FINAL CTA: a dial with dimension lines pointing to the button
   ========================================================================== */
.cta-sec { position: relative; overflow: clip; padding: clamp(96px, 11vw, 168px) 0; border-bottom: 1px solid var(--hair); background: #fff; isolation: isolate; text-align: center; }
.cta-dial { position: absolute; left: 50%; top: 50%; z-index: -1; width: min(800px, 120vw); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.cta-svg { width: 100%; height: 100%; overflow: visible; }
.cta-cl line { stroke: var(--anno-soft); stroke-width: 1; stroke-dasharray: 18 5 3 5; opacity: .45; }
.cta-r { fill: none; stroke: rgba(115, 49, 189, .28); stroke-width: 1; }
.cta-r1 { stroke-dasharray: 4 6; }
.cta-r3 { stroke: rgba(30, 27, 46, .14); }
.cta-ticks { transform-origin: 400px 400px; animation: spin 120s linear infinite; }
.cta-sec.is-paused .cta-ticks { animation-play-state: paused; }
.ct { stroke: rgba(30, 27, 46, .35); stroke-width: 1; }
.ct-major { stroke: var(--anno); stroke-width: 1.6; }
.ct-n { fill: var(--anno); font: 500 11px var(--mono); text-anchor: middle; dominant-baseline: central; }
.cta-in { position: relative; display: flex; flex-direction: column; align-items: center; }
.cta-idx { justify-content: center; }
.cta-idx::after { display: none; }
.cta-title { max-width: 15ch; margin: 0 auto; font: 300 clamp(40px, 5vw, 76px)/1.02 var(--sans); letter-spacing: -0.045em; color: var(--ink); text-wrap: balance; }
.cta-target { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 40px; }
.cta-btn { position: relative; z-index: 1; height: 58px; padding: 0 30px; font-size: 17px; box-shadow: 0 0 0 8px rgba(115, 49, 189, .08), 0 0 0 9px rgba(115, 49, 189, .2); }
.cta-dim { display: flex; align-items: center; gap: 10px; font-size: 10.5px; color: var(--anno); white-space: nowrap; }
.cta-dim i { position: relative; width: clamp(40px, 7vw, 110px); height: 1.25px; background: currentColor; }
.cta-dim--l i::after, .cta-dim--r i::before { content: ""; position: absolute; top: -3.4px; width: 9px; height: 8px; background: currentColor; }
.cta-dim--l i::after { right: 6px; clip-path: polygon(100% 50%, 0 0, 0 100%); }
.cta-dim--r i::before { left: 6px; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.cta-dim--l { padding-right: 6px; } .cta-dim--r { padding-left: 6px; }
.cta-sub { margin-top: 28px; font-size: 16px; color: var(--body); }
.cta-sub a { color: var(--primary-deep); text-underline-offset: 3px; }

/* ==========================================================================
   FOOTER: the drawing's title block
   ========================================================================== */
.foot { padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 3vw, 40px); background: #fff; }
.tbf { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(4, minmax(0, 1fr)); border: 1.5px solid var(--ink); }
.tbf > * { min-width: 0; }
.tbf-brand { padding: 24px; border-right: 1px solid var(--ink); }
.tbf-brand img { width: 160px; height: auto; }
.tbf-brand p { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--body); max-width: 28em; }
.tbf-mail a { color: var(--primary-deep); font-weight: 500; text-underline-offset: 3px; }
.tbf-col { padding: 22px 20px; border-right: 1px solid var(--ink); }
.tbf-col:nth-child(5) { border-right: 0; }
.tbf-col h2 { margin-bottom: 14px; font-size: 10.5px; color: var(--ink); }
.tbf-col ul { display: flex; flex-direction: column; gap: 10px; }
.tbf-col a { font-size: 15px; color: var(--body); text-decoration: none; }
.tbf-col a:hover { color: var(--primary-deep); text-decoration: underline; text-underline-offset: 3px; }
.tbf-note { grid-column: 1 / -1; padding: 12px 24px; border-top: 1px solid var(--ink); font-size: 14px; color: var(--body); }
.tbf-cells { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 2.6fr 1fr 1fr; border-top: 1px solid var(--ink); font-size: 10.5px; color: var(--ink); }
.tbf-cells > span { display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; border-right: 1px solid var(--ink); min-width: 0; }
.tbf-cells > span:last-child { border-right: 0; }
.tbf-cells em { font-style: normal; font-size: 9.5px; color: var(--mute); }
.tbf-cells a { color: var(--ink); text-underline-offset: 3px; }
.tbf-cells .heart { display: inline-block; vertical-align: -1px; color: var(--rec); }

/* ==========================================================================
   PHASE B · responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .clu-grid, .spec-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-head { position: static; }
  .clu-copy { max-width: 640px; }
  .dsheet .capg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tbf-brand { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--ink); }
  .tbf-col:nth-child(5) { border-right: 0; }
}
@media (max-width: 900px) {
  .scope-head, .bp-note { grid-template-columns: minmax(0, 1fr); }
  .scope-foot { grid-template-columns: minmax(0, 1fr); }
  .scope-ctl { align-items: flex-start; }
  .sch { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "spec" "board" "foot"; }
  .sch-spec { border-left: 0; }
  .bom { grid-template-columns: minmax(0, 1fr); }
  .clu-gauges { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gg-wpm { grid-column: 1 / -1; max-width: 360px; justify-self: center; width: 100%; }
}
@media (max-width: 720px) {
  .dsheet .capg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; overflow: visible; margin: 0; padding: 14px 10px 0; }
  .dsheet .capc { flex: none; }
}
@media (max-width: 640px) {
  .xpl-draw { height: 380px; }
  .xpl-iso { width: 72%; top: 62%; }
  .xpl.is-ex .xpl-pl { --gap: 40px; }
  .xpl-script { font-size: 9px; } .xpl-word { font-size: 11px; } .xpl-dock { height: 28px; gap: 5px; padding: 0 6px; font-size: 8px; } .xpl-cd b { font-size: 40px; }
  .xpl-timer { font-size: 10px; } .xpl-play { width: 20px; height: 20px; } .xpl-zoom, .xpl-lens { height: 20px; min-width: 22px; width: auto; } .xpl-fin { display: none; }
  .bom-t thead { display: none; }
  .bom-t tbody tr { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
  .bom-t tbody td, .bom-t tbody th { border-top: 0; }
  .bom-t tbody tr { border-top: 1px solid var(--hair-2); }
  .bom-t tbody td:last-child { grid-column: 2; padding-top: 0; font-size: 15px; }
  .bom-t tbody td:first-child { grid-row: span 2; }
  .tgl-group { width: 100%; justify-content: space-between; }
  .tgl { min-width: 0; flex: 1; }
  .scope-marks li span { display: none; }
  .sch-title, .sch-spec, .sch-foot { padding-inline: 18px; }
  .sch-board { --lab: 44px; padding-inline: 12px; }
  .lane { grid-template-columns: 44px minmax(0, 1fr); }
  .lane-n { display: none; }
  .clip { font-size: 9px; padding: 0 4px; }
  .kf-ease, .xf b { display: none; }
  .sch-ph { left: calc(12px + var(--lab) + var(--t, 0) * (100% - 24px - var(--lab))); }
  .plate { padding: 8px 18px; } .plate b { font-size: 24px; }
  .bp-row { --h: 112px; gap: 34px 26px; }
  .bp-dim b { font-size: 9px; }
  .clu { padding: 18px 16px; border-radius: 22px; }
  .clu-title span:last-child { display: none; }
  .spec-t th, .spec-t td { padding: 12px 12px; font-size: 15px; }
  .spec-t tbody th { width: 28%; font-size: 10px; }
  .spec-price { font-size: 38px; }
  .spec-price .per { display: block; margin: 4px 0 0; font-size: 12px; }
  .spec-price { flex-wrap: wrap; }
  .acc { padding-left: 46px; }
  .acc-bl { left: -46px; width: 30px; height: 30px; margin-top: -15px; }
  .acc-bl::after { width: 14px; }
  .acc::before { left: 15px; }
  .acc-body p { padding-right: 8px; }
  .cta-target { flex-direction: column; gap: 14px; }
  .cta-dim i { width: 1.25px; height: 26px; }
  .cta-dim { flex-direction: column; gap: 6px; }
  .cta-dim--l { flex-direction: column; padding: 0; }
  .cta-dim--r { flex-direction: column-reverse; padding: 0; }
  .cta-dim--l i::after { right: auto; left: -3.4px; top: auto; bottom: 0; width: 8px; height: 9px; clip-path: polygon(50% 100%, 0 0, 100% 0); }
  .cta-dim--r i::before { left: -3.4px; top: 0; width: 8px; height: 9px; clip-path: polygon(50% 0, 0 100%, 100% 100%); }
  .tbf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tbf-col { border-bottom: 1px solid var(--ink); }
  .tbf-col:nth-child(3), .tbf-col:nth-child(5) { border-right: 0; }
  .tbf-note { border-top: 0; }
  .tbf-cells { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tbf-cells > span:nth-child(2) { border-right: 0; }
  .tbf-cells > span:nth-child(n+3) { border-top: 1px solid var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-ticks { animation: none; }
  .bp-img { transition: none; }
}

/* C/06 keyboard shortcuts: the app's "?" overlay, rows lighting in turn */
.cv-keys { display: grid; place-items: center; }
.cv-kpanel { display: flex; flex-direction: column; gap: 3px; width: 84%; padding: 10px 12px; border-radius: 10px; background: rgba(18, 18, 18, .94); border: 1px solid rgba(255, 255, 255, .08); color: #fff; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .7); }
.cv-kh { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font: 700 9.5px var(--sans); }
.cv-krow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 5px; border-radius: 4px; font: 500 8.5px var(--sans); color: rgba(255, 255, 255, .78); animation: cv-krow 7.2s steps(1) infinite; animation-delay: calc(var(--i) * 1.2s); }
.cv-krow kbd { margin-left: 3px; padding: 1px 4px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); font: 600 7.5px var(--mono); }
@keyframes cv-krow { 0% { background: rgba(151, 90, 219, .38); color: #fff; } 16%, 100% { background: transparent; color: rgba(255, 255, 255, .78); } }
.gg-l span { display: block; }
.bp-frame { outline: 1px solid transparent; }
.bp.is-done .bp-frame { box-shadow: 0 0 0 1px rgba(30, 27, 46, .25); }
@media (max-width: 640px) { .ct-n { display: none; } }
@media (max-width: 640px) {
  .spec-t th, .spec-t td { padding: 12px 10px; overflow-wrap: anywhere; }
  .spec-t thead th:first-child { width: 26%; }
  .spec-cta .btn { height: 44px; padding: 0 8px; font-size: 14px; }
  .tb > span:last-child { margin-left: 0; }
}

/* ==========================================================================
   PAGES (contact, privacy, terms, compare): drawing-sheet touches
   ========================================================================== */
.page-hero { position: relative; overflow: clip; isolation: isolate; background: #fff; }
.page-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page-bg .bp-grid { -webkit-mask-image: radial-gradient(70% 100% at 85% 30%, #000 25%, transparent 85%); mask-image: radial-gradient(70% 100% at 85% 30%, #000 25%, transparent 85%); }
.page-bg .reg-tl { left: 18px; top: 18px; } .page-bg .reg-tr { right: 18px; top: 18px; }
.page-meta { display: inline-flex; flex-wrap: wrap; padding: 7px 12px; border: 1px solid var(--ink); background: #fff; }
.lsec h2 .mono { display: inline-grid; place-items: center; flex-shrink: 0; min-width: 32px; height: 32px; padding: 0 4px; border-radius: 50%; border: 1.25px solid var(--anno); color: var(--anno); font-size: 11px; }
.form-card { border: 1px solid var(--ink); }
.form-card .reg { width: 18px; height: 18px; }

/* compare: a spec table with a sticky header and first column */
.cmp-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: end; }
.cmp-h1 { max-width: 18ch; }
.cmp-hero .lede a { color: var(--primary-deep); text-underline-offset: 3px; }
.cmp-tb { border: 1px solid var(--ink); background: #fff; }
.cmp-tb > span:last-child { margin-left: 0; }
.cmp-sec { background: #fff; padding-top: clamp(48px, 6vw, 88px); }
.cmp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin-bottom: 24px; }
.cmp-note { font-size: 16px; color: var(--body); }
.cmp-key { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 16px; font-size: 10.5px; }
.cmp-key li { display: inline-flex; align-items: center; gap: 8px; }
.cmp-scroll { display: none; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 10.5px; color: var(--primary-deep); }
.cmp-scroll i { position: relative; width: 36px; height: 1.25px; background: currentColor; }
.cmp-scroll i::after { content: ""; position: absolute; right: 0; top: -3.4px; width: 8px; height: 8px; background: currentColor; clip-path: polygon(100% 50%, 0 0, 0 100%); }
.cmp-frame { position: relative; overflow: auto; max-height: calc(100vh - 110px); border: 1px solid var(--ink); background: #fff; }
.cmp-frame:focus-visible { outline-offset: 3px; }
.cmp-t { width: 100%; min-width: 1060px; border-collapse: separate; border-spacing: 0; }
.cmp-t th, .cmp-t td { padding: 12px 14px; border-bottom: 1px solid var(--hair-2); border-left: 1px solid var(--hair-2); text-align: left; vertical-align: top; font-size: 15px; color: var(--ink); background: #fff; transition: background-color .45s var(--ease-ui); }
.cmp-t thead th { position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--ink); background: #faf8fe; font-size: 14px; font-weight: 600; white-space: nowrap; }
.cmp-t thead th a { color: var(--ink); text-decoration: none; }
.cmp-t thead th a:hover { color: var(--primary-deep); text-decoration: underline; }
.cmp-t thead th.c-tz { background: var(--primary); color: #fff; }
.cmp-t th:first-child { position: sticky; left: 0; z-index: 1; width: 250px; min-width: 210px; border-left: 0; border-right: 1px solid var(--ink); }
.cmp-t thead th:first-child { z-index: 3; font-size: 10.5px; font-weight: 500; }
.cmp-t tbody th { display: table-cell; font-weight: 500; }
.cmp-t tbody th > span:last-child { display: block; }
.rn { display: block; margin-bottom: 2px; font-size: 10px; color: var(--anno); }
.cmp-t td.c-tz { background: rgba(115, 49, 189, .05); }
.cmp-t tr.is-scan th, .cmp-t tr.is-scan td { background-color: #f1eafb; }
.cv { display: inline-flex; align-items: center; min-height: 24px; font-size: 14px; font-weight: 500; }
.cv-y { justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(16, 185, 129, .12); color: #047857; font-weight: 700; }
.c-tz .cv-y { background: var(--primary); color: #fff; }
.cv-p { padding: 0 8px; border-radius: 999px; border: 1px solid #d4a72c; color: #8a5a00; font-size: 12.5px; }
.cv-n { color: var(--mute); font-size: 13px; }
.cv-no { padding: 0 8px; border-radius: 999px; border: 1px solid #b91c1c; color: #b91c1c; font-size: 12.5px; }
.fns { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.fn { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 9px; border: 1px solid var(--hair-2); font: 500 10px var(--mono); color: var(--primary-deep); text-decoration: none; }
.fn:hover { border-color: var(--primary); }
.cmp-voice { margin-top: 16px; font-size: 16px; color: var(--body); }
.one-sec { background: #fbfaff; }
.one-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px 64px; align-items: start; }
.one-lede { margin-top: 16px; font-size: 18px; color: var(--body); }
.one-list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ink); background: #fff; }
.one-list li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; border-right: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); }
.one-list li:nth-child(3n) { border-right: 0; }
.one-list li:nth-child(n+4) { border-bottom: 0; }
.one-list b { font: 400 21px/1.2 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.one-list span:last-child { font-size: 16px; line-height: 1.5; color: var(--body); }
.one-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.25px solid var(--anno); color: var(--anno); font-size: 11px; }
.one-out { background: var(--primary-tint); }
.notes-sec { background: #fff; }
.notes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; }
.notes-h { margin: 24px 0 12px; font-size: 11px; color: var(--ink); }
.tz-notes li, .src-list li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.5; color: var(--body); scroll-margin-top: calc(var(--nav-h) + 20px); }
.tz-notes li > .mono, .src-list li > .mono { flex-shrink: 0; min-width: 30px; font-size: 10.5px; color: var(--anno); padding-top: 3px; }
.tz-notes b { color: var(--ink); font-weight: 500; }
.src-list a { color: var(--primary-deep); text-underline-offset: 3px; overflow-wrap: anywhere; }
.src-list em { font-style: normal; color: var(--mute); font-size: 13.5px; }
.tz-notes li:target, .src-list li:target { background: var(--primary-tint); }
.disc { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--ink); background: #faf8fe; font-size: 15px; line-height: 1.6; color: var(--body); scroll-margin-top: calc(var(--nav-h) + 20px); }
.disc b { color: var(--ink); }
.disc a { color: var(--primary-deep); text-underline-offset: 3px; }
.cmp-cta { padding: clamp(72px, 8vw, 120px) 0; }
@media (max-width: 960px) {
  .cmp-hero-in, .cmp-head, .one-grid, .notes-grid { grid-template-columns: minmax(0, 1fr); }
  .cmp-scroll { display: inline-flex; }
}
@media (max-width: 640px) {
  .cmp-t { min-width: 860px; }
  .cmp-t th:first-child { width: 150px; min-width: 150px; }
  .cmp-t th, .cmp-t td { padding: 10px; font-size: 14px; }
  .one-list { grid-template-columns: minmax(0, 1fr); }
  .one-list li { border-right: 0; border-bottom: 1px solid var(--hair-2) !important; }
  .one-list li:last-child { border-bottom: 0 !important; }
}
/* the practice screen has no camera: lift its dark with the app's two glow blobs so it never reads as black */
.scr-read .tzui-rec-feed--off { background: radial-gradient(55% 45% at 22% 86%, rgba(59, 130, 246, .34), transparent 72%), radial-gradient(50% 46% at 78% 20%, rgba(151, 90, 219, .42), transparent 72%), #1c1727; }
.scr-read .tzui-rec-feed--off::after { background: none; }
.iscr { background: radial-gradient(60% 40% at 22% 88%, rgba(59, 130, 246, .22), transparent 70%), radial-gradient(60% 40% at 80% 12%, rgba(151, 90, 219, .26), transparent 70%), #17131f; }
.how { overflow-x: clip; }
@media (max-width: 960px) { .step-hl { left: -8px; right: -8px; } }
@media (min-width: 641px) and (max-width: 900px) { .iscr { aspect-ratio: 4 / 3; } }


/* contrast: no label below 4.5:1 */
.sch-ph { background: #c81e1e; }
.sch-ph b { background: #c81e1e; }
.cv-o { opacity: 1; }
.cv-o em, .cv-diff-g em { color: #5f5978; }
.cv-r em b { background: #047857; }
.cv-undo { border-color: #c81e1e; color: #c81e1e; }

/* contrast: no label below 4.5:1 */
.step { opacity: 1; }
.step-name { color: var(--body); }
.step[aria-current="step"] .step-name { color: var(--ink); }
.step:hover .step-name { color: var(--ink); }
.step-line { color: var(--mute); }
.tzui-cs-tabs > span { opacity: 1; color: #5f5978; }
.tzui-cs-tabs > .tzui-on { color: var(--tzui-primary); }
.tzui-cs-lbl-caps { opacity: 1; color: #5f5978; }
.w-ph { opacity: 1; color: #625d78; }
.tzui-cs-req { color: #c81e1e; }
.cv-o { opacity: 1; }
.cv-o em, .cv-diff-g em { color: #5f5978; }
.cv-tags em { color: #5b22a0; }

/* How it works, narrow screens (kept after the How rules so they win the cascade) */
@media (max-width: 960px) {
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .how-ctl { position: static; }
  .step-line { display: none; }
  .step[aria-current="step"] .step-line { display: block; }
  .steps { margin-bottom: 8px; }
  .step-hl { left: -8px; right: -8px; }
}

/* ==========================================================================
   AI CAST in the demos (stills until each character's clip lands)
   ========================================================================== */
/* the caption output is a whole 16:9 frame (it was a 168px strip that cropped the podcaster to her eyes) */
.scope-foot { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; }
.cap-out { position: relative; overflow: hidden; aspect-ratio: 16 / 9; min-height: 0; place-items: end center; padding-bottom: 18px; }
.cap-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cap-out .feed-video { object-position: 50% 30%; }
.cap-out::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(10, 8, 16, 0) 55%, rgba(10, 8, 16, .5)); }
.cap-line { position: relative; z-index: 3; }
@media (max-width: 900px) { .scope-foot { grid-template-columns: minmax(0, 1fr); } }
.sch-side { grid-area: spec; display: flex; flex-direction: column; border-left: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: rgba(255, 255, 255, .92); }
.sch-side .sch-spec { grid-area: auto; border: 0; background: none; }
.sch-prev { position: relative; margin: 18px 22px 0; border: 1px solid var(--ink); background: #1b1626; }
.sch-prev-media { position: relative; display: block; }
.sch-prev img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: 50% 30%; }
.sch-prev .feed-video { object-position: 50% 30%; }
.sch-prev figcaption { display: flex; justify-content: space-between; padding: 5px 8px; border-top: 1px solid var(--ink); background: #fff; font-size: 10.5px; color: var(--ink); }
.sch-prev figcaption b { font-weight: 500; color: #c81e1e; }
.clu-take { display: inline-flex !important; align-items: center; gap: 8px; }
.clu-take img { width: 64px; height: 36px; object-fit: cover; object-position: 50% 30%; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .25); }
.cv-practice .cv-who { position: absolute; left: 10px; top: 10px; width: calc(34% - 12px); height: calc(100% - 20px); object-fit: cover; object-position: 50% 25%; border-radius: 9px; }
.cv-practice .cv-dark { left: calc(34% + 4px); }
.cv-ph-live .cv-mon-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; opacity: .5; }
.cv-ph-live > :not(.cv-mon-img) { position: relative; z-index: 1; }
@media (max-width: 900px) { .sch-side { border-left: 0; } }
@media (max-width: 640px) { .clu-take > span { display: none; } }

/* ==========================================================================
   SPECIMEN SHEET: ten plates, one spotlit at a time
   ========================================================================== */
.cast-sec { background: #fff; }
.cast-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; margin-bottom: 28px; }
.cast-lede { font-size: 18px; line-height: 1.55; color: var(--body); max-width: 30em; }
.cast-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; font-size: 11px; color: var(--ink); }
.cast-bar b { font-weight: 500; color: var(--primary-deep); }
.cast-prog { position: relative; flex: 1; height: 2px; background: var(--hair); }
.cast-prog b { position: absolute; inset: 0; background: var(--primary); transform-origin: left; transform: scaleX(var(--p, 0)); }
.spcs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 30px; padding: 14px 12px 0; }
.spc { position: relative; min-width: 0; }
.spc-btn { position: relative; display: flex; flex-direction: column; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.spc-btn:focus-visible { outline: 2px solid var(--primary-ring); outline-offset: 6px; }
.spc-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--ink); background: #e9e5f5; transition: box-shadow .35s var(--ease-ui); }
.spc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; filter: saturate(.8) brightness(.94); transition: transform 4.5s linear, filter .4s var(--ease-ui); }
.spc-media .feed-video { object-position: 50% 26%; }
.spc.is-on .spc-media { box-shadow: 0 0 0 2px var(--primary), 0 20px 40px -20px rgba(115, 49, 189, .65); }
.spc.is-on .spc-media img { transform: scale(1.07); filter: none; }
.spc .crop { width: 12px; height: 12px; }
.spc .crop::before { width: 12px; } .spc .crop::after { height: 12px; }
.spc .crop-tl { left: -10px; top: -10px; } .spc .crop-tr { right: -10px; top: -10px; }
.spc .crop-bl { left: -10px; bottom: -10px; } .spc .crop-br { right: -10px; bottom: -10px; }
.spc-n { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 2px 6px; border: 1px solid var(--ink); background: #fff; font-size: 10px; color: var(--ink); transition: background-color .3s, color .3s; }
.spc.is-on .spc-n { border-color: var(--primary); background: var(--primary); color: #fff; }
.spc-lbl { display: flex; flex-direction: column; border: 1px solid var(--ink); border-top: 0; background: #fff; font-size: 10.5px; color: var(--ink); }
.spc-lbl > span { display: flex; flex-direction: column; gap: 2px; padding: 6px 9px; border-top: 1px solid var(--hair-2); line-height: 1.35; }
.spc-lbl > span:first-child { border-top: 0; }
.spc-lbl em { font-style: normal; font-size: 9.5px; color: var(--mute); }
.cast-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 26px; font-size: 10.5px; }
.cast-scale { display: inline-flex; align-items: center; gap: 8px; }
.cast-scale i { width: 80px; height: 6px; border: 1px solid var(--ink); background: linear-gradient(90deg, var(--ink) 0 25%, #fff 25% 50%, var(--ink) 50% 75%, #fff 75%); }
@media (max-width: 1180px) { .spcs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 18px; } .spc-lbl { font-size: 9.5px; } }
@media (max-width: 900px) { .cast-head { grid-template-columns: minmax(0, 1fr); } .spcs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .spcs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; padding-inline: 8px; } .spc .crop { display: none; } }
@media (prefers-reduced-motion: reduce) { .spc-media img { transition: none; } .spc.is-on .spc-media img { transform: none; } }
/* compare: footnote links meet the 24 px target-size spacing rule */
.fns { gap: 6px; }
.fn { min-width: 24px; height: 24px; border-radius: 12px; }

/* ==========================================================================
   ON YOUR PHONE: the iOS and Android apps as a drawing sheet. Five phone elevations; the active one carries the
   390 x 844 dimensions (the export section's .bp-dim), lifts, and times itself on a scale bar; a title block below.
   ========================================================================== */
.mob-sec { border-top: 1px solid var(--hair); }
.mob { display: grid; gap: clamp(36px, 4vw, 56px); }
.mob-row { list-style: none; margin: 0; padding: 30px 0 0 22px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); }
.mob-ph { display: grid; justify-items: start; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mob-ph:focus-visible { outline: 2px solid var(--primary); outline-offset: 6px; border-radius: 6px; }
.mob-frame { --h: 100%; position: relative; display: block; width: 100%; transition: transform var(--t-move) var(--ease), opacity var(--t-move) var(--ease-ui); }
.mob-frame img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(30, 27, 46, .22)); }
.mob-ph[aria-pressed="false"] .mob-frame { opacity: .55; }
.mob-ph[aria-pressed="false"]:hover .mob-frame { opacity: .8; }
.mob-ph[aria-pressed="true"] .mob-frame { transform: translateY(-10px); }
.mob-ph .bp-dim { opacity: 0; transition: opacity var(--t-ui) var(--ease-ui); }
.mob-ph[aria-pressed="true"] .bp-dim { opacity: 1; }
.mob-k { display: flex; align-items: baseline; gap: 8px; color: var(--ink); }
.mob-k span { color: var(--mute); }
.mob-ph[aria-pressed="true"] .mob-k, .mob-ph[aria-pressed="true"] .mob-k span { color: var(--primary-deep); }
.mob-d { font-size: 14px; line-height: 1.45; color: var(--body); }
.mob-bar { display: block; width: 100%; height: 3px; overflow: hidden; background: var(--hair); }
.mob-bar i { display: block; height: 100%; background: var(--primary); transform: scaleX(var(--p, 0)); transform-origin: left; }
.mob-ph[aria-pressed="false"] .mob-bar i { transform: scaleX(0); }
.mob-tb { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: 24px clamp(24px, 3vw, 48px); align-items: center; padding: 22px 24px; border: 1px solid var(--ink); background: var(--paper); }
.mob-spec { width: 100%; border-collapse: collapse; font-size: 14px; }
.mob-spec caption { margin-bottom: 8px; text-align: left; color: var(--ink); }
.mob-spec th { width: 7.5em; padding: 7px 12px 7px 0; border-top: 1px solid var(--hair); text-align: left; vertical-align: top; }
.mob-spec td { padding: 7px 0; border-top: 1px solid var(--hair); color: var(--ink); }
.mob-badges, .tbf-apps { display: flex; flex-wrap: wrap; gap: 10px; }
.tbf-apps { margin-top: 14px; }
.mob-store { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border: 1px solid var(--ink); border-radius: 10px; background: var(--ink); color: #fff; text-decoration: none; transition: background-color var(--t-ui) var(--ease-ui), border-color var(--t-ui) var(--ease-ui), transform var(--t-ui) var(--ease-ui); }
.mob-store:hover { background: var(--primary-deep); border-color: var(--primary-deep); transform: translateY(-1px); }
.mob-store:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.mob-store span { display: grid; font: 600 16px/1.1 var(--sans); letter-spacing: -.01em; }
.mob-store small { font: 500 10px/1.3 var(--sans); color: #cfc8e6; }
.mob-store--sm { height: 42px; gap: 8px; padding: 0 12px 0 10px; }
.mob-store--sm span { font-size: 13.5px; }
.mob-store--sm small { font-size: 9px; }
.mob-qr { display: flex; align-items: center; gap: 12px; margin: 0; }
.mob-qr img { width: 96px; height: 96px; border: 1px solid var(--hair-2); }
.mob-qr figcaption { max-width: 11em; }
@media (max-width: 1100px) { .mob-tb { grid-template-columns: minmax(0, 1fr) auto; } .mob-spec { grid-column: 1 / -1; } }
@media (max-width: 900px) {
  .mob-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(190px, 52vw); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .mob-row > li { scroll-snap-align: start; }
  .mob-tb { grid-template-columns: minmax(0, 1fr); }
}

/* on a phone the visitor is already on the phone: the store buttons are enough, no QR code */
@media (max-width: 700px) { .mob-qr { display: none; } }