/* MOTION/LAB template viewer (v2) — the approved home's language: graphite + paper, signal lime used sparingly, Mona
   Sans + Martian Mono, the pill rail with its sliding indicator, ticking boxes, the route fold, dot-matrix charts.
   Self-contained (tokens, pills and boxes are scoped to .tv) so it also works on /library/<slug>. */
.tv, .tv-dlg {
  --tv-g0: #0b0c0e; --tv-g1: #111214; --tv-g2: #18191c; --tv-g3: #222327; --tv-line: rgba(255, 255, 255, .09); --tv-line2: rgba(255, 255, 255, .16);
  --tv-ink: #111214; --tv-paper: #f1f1ee; --tv-soft: rgba(255, 255, 255, .64); --tv-faint: rgba(255, 255, 255, .42);
  --tv-lime: #d4ff3a; --tv-good: #d4ff3a; --tv-warn: #ffc25c; --tv-bad: #ff7a66; --tv-off: rgba(255, 255, 255, .1);
  --tv-font: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --tv-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --tv-ease: cubic-bezier(.16, 1, .3, 1); --tv-press: cubic-bezier(.22, 1, .36, 1); --tv-r: 26px;
}
.tv { position: relative; display: flex; flex-direction: column; gap: 10px; color: #fff; font-family: var(--tv-font); font-size: 15px; line-height: 1.35; font-weight: 430; letter-spacing: -.012em; -webkit-font-smoothing: antialiased; }
.tv *, .tv *::before, .tv *::after { box-sizing: border-box; }
.tv :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
.tv :where(ul, ol) { list-style: none; }
.tv :where(a) { color: inherit; text-decoration: none; }
.tv :where(button) { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.tv :where(svg) { display: block; }
.tv .mono { font-family: var(--tv-mono); font-size: 10.5px; line-height: 1.45; letter-spacing: 0; font-weight: 400; }
.tv :focus-visible { outline: 2px solid var(--tv-lime); outline-offset: 2px; border-radius: 10px; }
.tv [hidden] { display: none !important; }
.tv .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tv .tone-good { color: var(--tv-good); } .tv .tone-warn { color: var(--tv-warn); } .tv .tone-bad { color: var(--tv-bad); } .tv .tone-na { color: var(--tv-faint); }
.tv .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tv-lime); flex: none; display: inline-block; }
.tv .dot--live { animation: tvLive 2.2s ease-out infinite; }
@keyframes tvLive { 0% { box-shadow: 0 0 0 0 rgba(212, 255, 58, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(212, 255, 58, 0); } }
/* the home's ticking box */
.tv .cb { position: relative; flex: none; width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .32); display: grid; place-items: center; transition: background .22s var(--tv-ease), box-shadow .22s; }
.tv .cb svg { width: 72%; height: 72%; color: var(--tv-ink); }
.tv .cb svg path { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .32s var(--tv-ease) .04s; }
.tv [aria-selected="true"] > .cb, .tv [aria-checked="true"] > .cb { background: var(--tv-ink); box-shadow: none; }
.tv [aria-selected="true"] > .cb svg, .tv [aria-checked="true"] > .cb svg { color: var(--tv-lime); }
.tv [aria-selected="true"] > .cb svg path, .tv [aria-checked="true"] > .cb svg path { stroke-dashoffset: 0; }
.tv .cb.pop { animation: tvPop .34s var(--tv-ease); }
@keyframes tvPop { 40% { transform: scale(.78); } }
/* the home's pills */
.tv .pill { position: relative; height: 48px; border-radius: 24px; display: inline-flex; align-items: center; padding: 0 22px 0 58px; isolation: isolate; white-space: nowrap; transition: scale .14s var(--tv-press), opacity .3s; user-select: none; -webkit-tap-highlight-color: transparent; }
.tv .pill:active { scale: .97; }
.tv .pill__reveal { position: absolute; left: 2px; top: 2px; height: calc(100% - 4px); width: 44px; border-radius: 22px; background: #fff; z-index: -1; transition: width .45s var(--tv-ease); }
.tv .pill__dot { position: absolute; left: 2px; top: 2px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--tv-ink); }
.tv .pill__dot svg { width: 16px; height: 14px; transition: transform .45s var(--tv-ease); }
.tv .pill__txt { display: grid; gap: 2px; text-align: left; transition: color .25s; }
.tv .pill__txt b { font-weight: 500; font-size: 15.5px; line-height: 17px; letter-spacing: -.01em; }
.tv .pill__txt small { font-size: 10.5px; line-height: 12px; opacity: .7; }
.tv .pill:hover .pill__reveal, .tv .pill:focus-visible .pill__reveal { width: calc(100% - 4px); }
.tv .pill:hover .pill__dot svg { transform: translateX(2px); }
.tv .pill--accent { background: var(--tv-lime); color: var(--tv-ink); }
.tv .pill--accent .pill__reveal { background: var(--tv-ink); }
.tv .pill--accent .pill__dot { color: var(--tv-lime); }
.tv .pill--accent:hover .pill__txt, .tv .pill--accent:focus-visible .pill__txt { color: var(--tv-lime); }
.tv .pill--accent.is-done .pill__reveal { width: calc(100% - 4px); }
.tv .pill--accent.is-done .pill__txt { color: var(--tv-lime); }
.tv .pill--accent:disabled { cursor: progress; }
.tv .pill--ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.tv .pill--ghost:hover .pill__txt, .tv .pill--ghost:focus-visible .pill__txt { color: var(--tv-ink); }
.tv .tv-mini { height: 30px; padding: 0 12px; border-radius: 15px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--tv-mono); font-size: 10px; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--tv-line2); color: #fff; transition: background .2s, color .2s; }
.tv .tv-mini:hover { background: #fff; color: var(--tv-ink); }
.tv .tv-mini:disabled { opacity: .35; pointer-events: none; }
.tv .tv-mini--lime { background: var(--tv-lime); color: var(--tv-ink); box-shadow: none; }
.tv .tv-mini--x { width: 30px; padding: 0; justify-content: center; }
.tv .tv-mini--x svg { width: 14px; height: 14px; }

/* ───── Modal shell (home) ───── */
.tv-dlg { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0 12px 12px; border: 0; background: var(--tv-g1); overflow: hidden; color: #fff; }
.tv-dlg:not([open]) { display: none; }
.tv-dlg::backdrop { background: var(--tv-g1); }
.tv-dlg > .tv { height: 100%; }
html.tv-open, html.tv-open body { overflow: hidden; }

/* ───── Top: mono status line · pill rail · close ───── */
.tv__top { flex: none; height: 68px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 0 4px 0 10px; }
.tv__status { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--tv-soft); text-transform: lowercase; }
.tv__status span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv__rail { min-width: 0; height: 48px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); overflow-x: auto; scrollbar-width: none; }
.tv__rail::-webkit-scrollbar { display: none; }
.tv__rail-in { position: relative; display: flex; gap: 2px; height: 40px; width: max-content; }
.tv__ind { position: absolute; left: 0; top: 0; height: 40px; border-radius: 999px; background: var(--tv-lime); transform: translateX(var(--x, 0)); width: var(--w, 90px); transition: transform .5s var(--tv-ease), width .5s var(--tv-ease); }
.tv__view { position: relative; z-index: 1; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: rgba(255, 255, 255, .72); white-space: nowrap; transition: color .25s; }
.tv__view:hover { color: #fff; }
.tv__view:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: -2px; border-radius: 999px; }
.tv__view[aria-selected="true"] { color: var(--tv-ink); }
.tv__view .cb { width: 15px; height: 15px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.tv__view[aria-selected="true"] .cb { background: var(--tv-ink); }
.tv__close { justify-self: end; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background .25s, color .25s, rotate .45s var(--tv-ease); }
.tv__close:hover { background: #fff; color: var(--tv-ink); rotate: 90deg; }
.tv__close svg { width: 20px; height: 20px; }
.tv__top-r { display: block; }

/* ───── Stage ───── */
.tv__stage { position: relative; flex: 1; min-height: 420px; overflow: hidden; overflow: clip; border-radius: var(--tv-r); background: var(--tv-g0); isolation: isolate; box-shadow: inset 0 0 0 1px var(--tv-line); }
.tv__layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.tv__layer.is-on { opacity: 1; visibility: visible; transition: opacity .25s; }
.tv__frame { position: absolute; inset: 0; right: 0; background: #fff; transition: right .55s var(--tv-ease); }
.tv__stage[data-mode="knobs"] .tv__frame { right: min(360px, 40%); }
.tv__stage[data-mode="mine"] .tv__frame { right: min(430px, 44%); }
.tv__iframe { display: block; border: 0; background: #fff; }
.tv__iframe--preview { position: absolute; inset: 0; width: 100%; height: 100%; }
.tv__layer--dark { background: #101113; }
.tv__layer--paper { background: #e9e9e6; }
.tv__load { position: absolute; left: 50%; top: 42%; translate: -50% -50%; z-index: 4; height: 38px; display: flex; align-items: center; padding: 0 16px; border-radius: 19px; background: rgba(25, 26, 29, .92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--tv-lime); opacity: 0; pointer-events: none; transition: opacity .3s; }
.tv__load.is-on { opacity: 1; transition-delay: .6s; }
.tv__note { position: absolute; left: 18px; top: 16px; z-index: 4; height: 28px; display: flex; align-items: center; padding: 0 12px; border-radius: 14px; background: rgba(17, 18, 20, .7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--tv-soft); pointer-events: none; text-transform: lowercase; }
.tv__stage[data-mode="preview"] .tv__note, .tv__stage[data-mode="knobs"] .tv__note, .tv__stage[data-mode="mine"] .tv__note, .tv__stage[data-mode="edit"] .tv__note { opacity: 0; }
/* the home's route fold: a window that closes to a mono status pill and opens on the next view */
.tv__fold { position: absolute; inset: 0; z-index: 9; display: none; overflow: hidden; border-radius: inherit; pointer-events: auto; }
.tv__fold.is-on { display: block; }
.tv__fold-win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: var(--tv-r); box-shadow: 0 0 0 300vmax var(--tv-g1); display: grid; place-items: center; overflow: hidden; }
.tv__fold-win::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(25, 26, 29, .96); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); opacity: 0; transition: opacity .2s; }
.tv__fold.is-on .tv__fold-win::after { opacity: 1; transition-delay: .2s; }
.tv__fold-win span { position: relative; z-index: 1; color: var(--tv-lime); white-space: nowrap; opacity: 0; }

/* device scenes (our Blender renders); the live page is mapped onto the screen quad with matrix3d */
.tv-scene { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.tv-scene__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.tv-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #000; }
.tv-screen .tv__iframe { position: absolute; left: 0; }
.tv-screen--laptop .tv__iframe { top: var(--band, 36px); width: 1440px; height: 900px; }
.tv-screen--mobile .tv__iframe { top: 47px; width: 390px; height: 797px; }
.tv-bar { position: absolute; inset: 0 0 auto 0; z-index: 2; background: #000; }
.tv-notch { position: absolute; left: 50%; top: 0; width: 186px; height: 100%; translate: -50% 0; border-radius: 0 0 14px 14px; background: #000; }
.tv-notch i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3140, #07080a 60%); box-shadow: 0 0 0 1.5px #0d0e12; }
.tv-status { position: absolute; inset: 0 0 auto 0; z-index: 2; height: 47px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px 0 44px; color: #fff; background: #000; font-family: var(--tv-font) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -.01em; }
.tv-status__r { display: flex; align-items: center; gap: 6px; }
.tv-status__r svg:first-child { width: 17px; height: 10px; }
.tv-status__r svg:last-child { width: 25px; height: 12px; }
.tv-pill { position: absolute; left: 50%; top: 11px; width: 122px; height: 35px; translate: -50% 0; border-radius: 999px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.tv-pill i { position: absolute; right: 16px; top: 50%; width: 11px; height: 11px; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #283044, #050608 62%); }
.tv-screen__glass { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .015) 30%, rgba(255, 255, 255, 0) 46%); }

/* documents: performance and SEO */
.tv__layer--doc { overflow: auto; padding: 64px clamp(18px, 3vw, 44px) 150px; background: var(--tv-g0); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .055) 1px, transparent 1.4px); background-size: 14px 14px; background-position: 7px 7px; }
.tv__layer--doc:focus-visible { outline-offset: -3px; }
.tvd-h { display: grid; gap: 8px; margin-bottom: 22px; max-width: 1180px; margin-inline: auto; }
.tvd-h > .mono { display: flex; align-items: center; gap: 8px; color: var(--tv-soft); text-transform: uppercase; }
.tvd-h h3 { font-size: clamp(26px, 2.6vw, 42px); line-height: 1; letter-spacing: -.04em; font-weight: 560; }
.tvd-src { color: var(--tv-faint); text-transform: lowercase; }
.tvd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1180px; margin: 0 auto; }
.tvc, .tvd-box { border-radius: 20px; background: rgba(17, 18, 20, .86); box-shadow: inset 0 0 0 1px var(--tv-line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tvc { padding: 18px 20px 16px; display: grid; gap: 14px; align-content: start; }
.tvc__h { display: flex; justify-content: space-between; gap: 12px; color: var(--tv-soft); text-transform: uppercase; }
.tvc__h a { display: inline-flex; align-items: center; gap: 5px; color: var(--tv-soft); transition: color .2s; }
.tvc__h a:hover { color: var(--tv-lime); }
.tvc__h a svg { width: 12px; height: 12px; }
.tvc__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.tvc__big b { font-size: clamp(30px, 2.6vw, 40px); line-height: .95; letter-spacing: -.045em; font-weight: 560; }
.tvc__big span { color: var(--tv-soft); font-size: 14px; }
.tvc__big em { font-style: normal; color: #fff; font-variant-numeric: tabular-nums; }
.tvc__wait { color: var(--tv-soft); font-size: 14px; line-height: 1.5; }
.tvc__m { color: var(--tv-faint); }
.tvc__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 12px; border-top: 1px solid var(--tv-line); }
.tvc__stats dt { color: var(--tv-faint); text-transform: uppercase; font-size: 9.5px; }
.tvc__stats dd { margin-top: 4px; font-size: 18px; color: #fff; font-variant-numeric: tabular-nums; }
.tvc__stats dd.tone-good { color: var(--tv-good); } .tvc__stats dd.tone-warn { color: var(--tv-warn); } .tvc__stats dd.tone-bad { color: var(--tv-bad); }
/* dot-matrix frame chart */
.dm-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; }
.dm-col { display: grid; justify-items: center; gap: 8px; }
.dm-v { font-size: 11px; font-variant-numeric: tabular-nums; }
.dm-v small { color: var(--tv-faint); font-size: 9px; }
.dm-dots { display: grid; grid-template-columns: repeat(3, 7px); grid-auto-rows: 7px; gap: 3px; }
.dm-dots i { border-radius: 50%; background: var(--tv-off); width: 7px; height: 7px; position: relative; }
.dm-dots i.on { background: currentColor; }
.dm-dots i.ref::after { content: ""; position: absolute; left: -22px; width: 74px; top: 3px; border-top: 1px dashed rgba(255, 255, 255, .28); }
.dm-dots i.ref--50::after { border-top-color: rgba(255, 122, 102, .5); }
.dm-col.is-over .dm-dots i:first-child { box-shadow: 0 -5px 0 -1px currentColor; }
.dm-l { color: var(--tv-soft); text-transform: uppercase; font-size: 9px; text-align: center; }
.dm-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--tv-faint); text-transform: uppercase; font-size: 9px; }
.dm-key span { display: inline-flex; align-items: center; gap: 6px; }
.dm-key i { display: inline-block; }
.k-ref { width: 16px; border-top: 1px dashed rgba(255, 255, 255, .45); }
.k-ref--50 { border-top-color: rgba(255, 122, 102, .7); }
.k-g, .k-p { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6); }
.k-p { box-shadow: 0 0 0 1.5px var(--tv-bad); }
/* SEO: waffle score, dot bars */
.tvc__score { display: flex; align-items: center; gap: 18px; }
.wf { display: grid; grid-template-columns: repeat(10, 6px); gap: 3px; flex: none; }
.wf i { width: 6px; height: 6px; border-radius: 50%; background: var(--tv-off); }
.wf i.on { background: currentColor; }
.tvc__score p { display: grid; gap: 4px; }
.tvc__score b { font-size: 46px; line-height: .9; letter-spacing: -.05em; font-weight: 560; }
.tvc__score .mono { color: var(--tv-faint); text-transform: uppercase; }
.tvc__cats { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--tv-line); }
.tvc__cats li { display: grid; grid-template-columns: 120px 1fr 32px; align-items: center; gap: 10px; text-transform: uppercase; color: var(--tv-soft); font-size: 9.5px; }
.tvc__cats b { font-weight: 400; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.db { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; max-width: 220px; }
.db i { aspect-ratio: 1; max-width: 7px; border-radius: 50%; background: var(--tv-off); position: relative; }
.db i.on { background: currentColor; }
.db--m i.g::after, .db--m i.p::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 1.2px rgba(255, 255, 255, .5); }
.db--m i.p::after { box-shadow: 0 0 0 1.2px var(--tv-bad); }
.tvd-box { max-width: 1180px; margin: 12px auto 0; padding: 8px 20px 14px; }
.tvd-box__h { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--tv-line); color: var(--tv-soft); text-transform: uppercase; }
.tvd-box__h b { font-weight: 400; }
.tvm { width: 100%; border-collapse: collapse; }
.tvm thead th { text-align: left; color: var(--tv-faint); text-transform: uppercase; font-weight: 400; padding: 10px 0; border-bottom: 1px solid var(--tv-line); }
.tvm tbody th { text-align: left; font-weight: 430; padding: 10px 14px 10px 0; white-space: nowrap; width: 30%; }
.tvm tbody th b { display: inline-block; width: 36px; font-weight: 400; color: #fff; text-transform: uppercase; }
.tvm tbody th span { color: var(--tv-soft); font-size: 13.5px; }
.tvm td { padding: 10px 18px 10px 0; }
.tvm td .tvm-v { display: inline-block; width: 64px; font-size: 12px; font-variant-numeric: tabular-nums; vertical-align: middle; }
.tvm td .db { display: inline-grid; width: calc(100% - 72px); vertical-align: middle; }
.tvm tbody tr + tr > * { border-top: 1px solid rgba(255, 255, 255, .05); }
.tvas > li + li { border-top: 1px solid rgba(255, 255, 255, .05); }
.tva summary { display: flex; align-items: center; gap: 12px; min-height: 46px; list-style: none; cursor: default; }
.tva.has-items summary { cursor: pointer; }
.tva summary::-webkit-details-marker { display: none; }
.tva .cb.is-ok { background: var(--tv-lime); box-shadow: none; }
.tva .cb.is-ok svg path { stroke-dashoffset: 0; }
.tva .cb.is-warn { box-shadow: inset 0 0 0 1.5px var(--tv-warn); color: var(--tv-warn); font-family: var(--tv-mono); font-size: 10px; }
.tva .cb b { font-weight: 400; }
.tva__t { flex: 1; }
.tva summary em { font-style: normal; color: var(--tv-soft); }
.tva__c svg { width: 14px; height: 14px; color: var(--tv-soft); transition: rotate .3s var(--tv-ease); }
.tva details[open] .tva__c svg { rotate: 90deg; }
.tva details ul { padding: 0 0 12px 28px; display: grid; gap: 6px; color: var(--tv-soft); font-size: 13.5px; }
.tva details ul li::before { content: "› "; color: var(--tv-lime); font-family: var(--tv-mono); }
.tvd-foot { max-width: 1180px; margin: 16px auto 0; color: var(--tv-faint); text-transform: lowercase; }
.tvd-empty { display: flex; gap: 16px; align-items: flex-start; max-width: 620px; margin: 0 auto; padding: 22px; border-radius: 20px; background: rgba(17, 18, 20, .86); box-shadow: inset 0 0 0 1px var(--tv-line); color: var(--tv-soft); font-size: 15px; line-height: 1.5; }
.tvd-empty b { color: #fff; font-weight: 520; }
.tvd-empty__dots { display: grid; grid-template-columns: repeat(4, 6px); gap: 4px; flex: none; margin-top: 4px; }
.tvd-empty__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--tv-off); animation: tvScan 1.6s ease-in-out infinite; }
.tvd-empty__dots i:nth-child(4n+2) { animation-delay: .15s; } .tvd-empty__dots i:nth-child(4n+3) { animation-delay: .3s; } .tvd-empty__dots i:nth-child(4n) { animation-delay: .45s; }
@keyframes tvScan { 40% { background: var(--tv-lime); } }

/* knobs (right sheet inside the stage) */
.tv__knobs { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 40%); z-index: 3; overflow: auto; padding: 16px 14px 150px; background: var(--tv-g1); box-shadow: inset 1px 0 0 var(--tv-line); transform: translateX(102%); visibility: hidden; transition: transform .55s var(--tv-ease), visibility 0s .55s; overscroll-behavior: contain; scrollbar-width: none; }
.tv__knobs.is-on { transform: none; visibility: visible; transition: transform .55s var(--tv-ease); }
.tvk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 2px 12px; }
.tvk-head .mono { display: flex; align-items: center; gap: 8px; color: var(--tv-soft); text-transform: uppercase; }
.tvk-list { display: grid; gap: 6px; }
.tvk-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 10px; padding: 11px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--tv-line); }
.tvk-l { font-size: 13.5px; }
.tvk-row--number input { grid-column: 1 / -1; grid-row: 2; width: 100%; accent-color: var(--tv-lime); height: 18px; margin: 0; }
.tvk-row output { color: var(--tv-soft); font-variant-numeric: tabular-nums; }
.tvk-row output i { font-style: normal; color: var(--tv-faint); margin-left: 2px; }
.tvk-color { display: inline-flex; align-items: center; gap: 8px; }
.tvk-color input { width: 30px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.tvk-color input::-webkit-color-swatch-wrapper { padding: 0; }
.tvk-color input::-webkit-color-swatch { border: 0; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.tvk-row--select { grid-template-columns: 1fr; }
.tvk-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.tvk-seg button, .tvk-tog { height: 30px; padding: 0 11px 0 8px; border-radius: 10px; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tv-soft); box-shadow: inset 0 0 0 1px var(--tv-line2); transition: background .2s, color .2s; }
.tvk-seg button:hover, .tvk-tog:hover { color: #fff; }
.tvk-seg button[aria-checked="true"], .tvk-tog[aria-checked="true"] { background: var(--tv-lime); color: var(--tv-ink); box-shadow: none; }
.tvk-seg .cb, .tvk-tog .cb { width: 14px; height: 14px; }
.tvk-more { display: inline-flex; align-items: center; gap: 6px; margin: 14px 4px 4px; color: var(--tv-soft); text-transform: uppercase; }
.tvk-more svg { width: 13px; height: 13px; }
.tvk-more:hover { color: var(--tv-lime); }

/* the page's own Playground inside the knobs sheet (detail page) */
.tv__knobs [data-playground] { --surface: #1d1e22; --surface-2: #26272b; --surface-3: #303136; --text: #fff; --muted: rgba(255, 255, 255, .62); --muted-2: rgba(255, 255, 255, .42); --line: rgba(255, 255, 255, .1); --line-strong: rgba(255, 255, 255, .2); --accent: #d4ff3a; --accent-ink: #111214; --accent-soft: rgba(212, 255, 58, .14);
  color: #fff; background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 4px !important; font-family: var(--tv-font); }
.tv__ssr { padding: 14px 10px; }

/* ───── Dock: the template and what you can do with it ───── */
.tv__dock { position: absolute; left: 50%; bottom: 14px; z-index: 6; translate: -50% 0; width: min(1180px, calc(100% - 28px)); display: flex; align-items: center; gap: 18px; padding: 10px 10px 10px 22px; border-radius: 24px;
  background: rgba(17, 18, 20, .78); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), 0 24px 60px -28px rgba(0, 0, 0, .7); }
.tv__id { min-width: 0; flex: 1; display: grid; gap: 3px; }
.tv__title { font-size: 22px; line-height: 1.05; letter-spacing: -.035em; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv__line { color: var(--tv-soft); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv__acts { flex: none; display: flex; align-items: center; gap: 8px; }
.tv__icons { display: flex; align-items: center; gap: 4px; padding-left: 4px; }
.tv__ic { height: 44px; min-width: 44px; padding: 0 12px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--tv-soft); background: rgba(255, 255, 255, .06); transition: background .2s, color .2s; }
.tv__ic:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.tv__ic svg { width: 18px; height: 18px; transition: rotate .45s var(--tv-ease); }
.tv__ic.is-done { background: var(--tv-lime); color: var(--tv-ink); }
.tv__ic[aria-pressed="true"] { color: #fff; }
.tv__ic[aria-pressed="true"] svg { fill: var(--tv-lime); stroke: var(--tv-lime); }
.tv__ic-l { font-family: var(--tv-mono); font-size: 10px; text-transform: uppercase; }
.tv__ic--more[aria-expanded="true"] { background: #fff; color: var(--tv-ink); }
.tv__ic--more[aria-expanded="true"] svg { rotate: 180deg; }
.tv__lock { position: absolute; right: 10px; bottom: calc(100% + 10px); width: min(420px, calc(100vw - 48px)); display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; padding: 14px; border-radius: 18px; background: var(--tv-g2); box-shadow: inset 0 0 0 1px rgba(212, 255, 58, .3), 0 20px 50px -20px rgba(0, 0, 0, .7); font-size: 13.5px; line-height: 1.45; color: var(--tv-soft); }
.tv__lock b { color: #fff; font-weight: 520; }
.tv__lock-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(212, 255, 58, .12); color: var(--tv-lime); }
.tv__lock-ic svg { width: 16px; height: 16px; }
.tv__lock-a { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ───── Details sheet: about, more like this, how to use ───── */
.tv__sheet { position: absolute; left: 14px; right: 14px; bottom: 96px; z-index: 7; max-height: calc(100% - 110px); overflow: auto; border-radius: 22px; background: var(--tv-g2); box-shadow: inset 0 0 0 1px var(--tv-line2), 0 30px 70px -30px rgba(0, 0, 0, .8); visibility: hidden; opacity: 0; pointer-events: none; overscroll-behavior: contain; scrollbar-width: none; }
.tv__sheet.is-on { visibility: visible; opacity: 1; pointer-events: auto; }
.tv__sheet-h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px 20px; background: linear-gradient(var(--tv-g2) 70%, transparent); }
.tv__sheet-h .mono { display: flex; align-items: center; gap: 8px; color: var(--tv-soft); text-transform: uppercase; }
.tv__sheet-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); grid-template-areas: "about more" "how more"; gap: 18px 28px; padding: 4px 20px 22px; }
.tv__about { grid-area: about; display: grid; gap: 12px; align-content: start; }
.tv__more { grid-area: more; min-width: 0; }
.tv__how { grid-area: how; }
.tv__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.tv__badge { height: 24px; padding: 0 9px; border-radius: 7px; display: inline-flex; align-items: center; color: var(--tv-soft); box-shadow: inset 0 0 0 1px var(--tv-line2); text-transform: uppercase; font-size: 9.5px !important; transition: color .2s, box-shadow .2s; }
a.tv__badge:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.tv__badge--lime { color: var(--tv-ink); background: var(--tv-lime); box-shadow: none; }
.tv__desc { font-size: 17px; line-height: 1.42; letter-spacing: -.015em; text-wrap: pretty; }
.tv__meta { color: var(--tv-faint); text-transform: uppercase; }
.tv__sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tv__sub h3 { font-size: 17px; font-weight: 540; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.tv__sub h3 em { font-style: normal; display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: var(--tv-soft); }
.tv__nav { display: flex; gap: 6px; }
.tv__rnav { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--tv-line2); transition: background .2s, color .2s; }
.tv__rnav:hover { background: #fff; color: var(--tv-ink); }
.tv__rnav svg { width: 15px; height: 15px; }
.tv__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, calc((100% - 24px) / 3)); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tv__row::-webkit-scrollbar { display: none; }
.tv__row > li { scroll-snap-align: start; min-width: 0; }
.tv-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 6px 6px 10px; border-radius: 16px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--tv-line); transition: background .3s, box-shadow .3s, transform .45s var(--tv-ease); }
.tv-card:hover, .tv-card:focus-visible { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--tv-line2); transform: translateY(-2px); }
.tv-card__img { position: relative; display: block; min-width: 0; aspect-ratio: 16 / 10; border-radius: 11px; overflow: hidden; background: var(--tv-g3); }
.tv-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--tv-ease); }
.tv-card:hover .tv-card__img img { transform: scale(1.035); }
.tv-card__m { display: grid; gap: 3px; padding: 0 6px; }
.tv-card__m b { font-weight: 520; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-card__m .mono { color: var(--tv-faint); text-transform: uppercase; font-size: 9.5px; }
.tv__steps { display: grid; gap: 6px; }
.tv__step { border-radius: 14px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--tv-line); }
.tv__step-t { width: 100%; min-height: 50px; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 10px; text-align: left; }
.tv__step-t .mono { display: inline-grid; place-items: center; width: 30px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .07); color: var(--tv-soft); }
.tv__step.is-open .tv__step-t .mono { background: var(--tv-lime); color: var(--tv-ink); }
.tv__step-t b { flex: 1; font-weight: 520; font-size: 14.5px; }
.tv__pm { position: relative; width: 12px; height: 12px; }
.tv__pm::before, .tv__pm::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1.6px; margin-top: -.8px; background: var(--tv-soft); border-radius: 1px; transition: rotate .4s var(--tv-ease); }
.tv__pm::after { rotate: 90deg; }
.tv__step.is-open .tv__pm::after { rotate: 0deg; }
.tv__step-b { height: 0; overflow: hidden; }
.tv__step.is-open .tv__step-b { height: auto; }
.tv__step-b p { padding: 0 16px 14px 52px; color: var(--tv-soft); line-height: 1.5; font-size: 14px; }

/* ───── Embedded on /library/<slug> ───── */
.tv-band { background: var(--tv-g1, #111214); margin-top: calc(var(--header-h, 72px) + 10px); padding: 12px 12px 12px; }
.tv-band__crumbs { display: flex; gap: 10px; align-items: center; max-width: 1840px; margin: 0 auto 4px; padding: 0 10px; font-family: "Martian Mono", ui-monospace, monospace; font-size: 10.5px; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.tv-band__crumbs a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.tv-band__crumbs a:hover { color: #d4ff3a; }
.tv--embed { max-width: 1840px; margin: 0 auto; }
.tv--embed .tv__stage { flex: none; height: clamp(520px, calc(100vh - var(--header-h, 72px) - 150px), 900px); }

/* ───── Narrow screens ───── */
@media (max-width: 1100px) {
  .tv__top { grid-template-columns: minmax(0, 1fr) auto; height: auto; padding: 10px 2px 0 8px; row-gap: 10px; }
  .tv__status { grid-column: 1; grid-row: 1; }
  .tv__close, .tv__top-r { grid-column: 2; grid-row: 1; }
  .tv__rail { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .tv__line { display: none; }
}
@media (max-width: 760px) {
  .tv-dlg { padding: 0 0 0; }
  .tv { gap: 8px; }
  .tv__top { padding: 8px 8px 0 14px; }
  .tv__close { width: 42px; height: 42px; }
  .tv__rail { margin: 0 -8px 0 -14px; border-radius: 0; background: none; box-shadow: none; padding: 0 12px; height: 44px; }
  .tv__stage { border-radius: 20px 20px 0 0; min-height: 0; }
  .tv__view { font-size: 14px; padding: 0 14px 0 10px; }
  .tv__dock { left: 8px; right: 8px; width: auto; translate: none; bottom: 8px; flex-wrap: wrap; gap: 10px; padding: 12px 10px 10px; border-radius: 20px; }
  .tv__id { flex: 1 1 100%; padding: 0 6px; }
  .tv__title { font-size: 20px; }
  .tv__acts { flex: 1 1 100%; gap: 6px; }
  .tv .tv__copy { flex: 1; min-width: 0; padding-right: 12px; }
  .tv .tv__get { display: none; }
  .tv__icons { padding: 0; gap: 4px; }
  .tv__ic { height: 44px; min-width: 40px; padding: 0 10px; }
  .tv__ic-l { display: none; }
  .tv__lock { left: 0; right: 0; width: auto; }
  .tv__sheet { left: 8px; right: 8px; bottom: auto; top: 8px; max-height: calc(100% - 16px); }
  .tv__sheet-b { grid-template-columns: 1fr; grid-template-areas: "about" "more" "how"; padding: 4px 16px 20px; }
  .tv__row { grid-auto-columns: 76%; }
  .tv__layer--doc { padding: 56px 12px 210px; }
  .tvd-grid { grid-template-columns: 1fr; }
  .tvc__cats li { grid-template-columns: 96px 1fr 28px; }
  .tvm tbody th span { display: none; }
  .tvm tbody th { width: auto; }
  .tvm td .tvm-v { width: auto; display: block; margin-bottom: 4px; }
  .tvm td .db { width: 100%; }
  .tv__knobs { width: 100%; top: auto; bottom: calc(var(--dock-h, 120px) + 16px); height: 44%; padding-bottom: 16px; border-radius: 16px 16px 0 0; box-shadow: inset 0 1px 0 var(--tv-line); transform: translateY(calc(100% + var(--dock-h, 120px) + 20px)); }
  .tv__stage[data-mode="knobs"] .tv__frame { right: 0; bottom: calc(44% + var(--dock-h, 120px) + 16px); }
  .tv__stage[data-mode="mine"] .tv__frame { right: 0; bottom: calc(54% + var(--dock-h, 120px) + 16px); }
  .tv__note { left: 10px; top: 10px; }
  .tv-band { margin-top: calc(var(--header-h, 64px) + 6px); padding: 10px 0 0; }
  .tv-band__crumbs { padding: 0 16px; }
  .tv--embed .tv__stage { height: min(calc(100svh - 120px), 720px); }
}
/* ───── "Make it mine" wizard (js/wizard.js): a drawer like Knobs, five short steps, same pills and ticking boxes ───── */
.tv__wiz { width: min(430px, 44%); bottom: calc(var(--dock-h, 90px) + 28px); padding: 0; border-radius: 0 0 0 22px; }
.tv .tv__mine { flex: none; }
.tvw { display: grid; gap: 0; }
.tvw-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; background: linear-gradient(var(--tv-g1) 78%, transparent); }
.tvw-top .mono { display: flex; align-items: center; gap: 8px; color: var(--tv-soft); text-transform: uppercase; }
.tvw-rail { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 6px; }
.tvw-s { height: 30px; padding: 0 10px 0 8px; border-radius: 15px; display: inline-flex; align-items: center; gap: 7px; font-size: 10px; text-transform: uppercase; color: var(--tv-soft); box-shadow: inset 0 0 0 1px var(--tv-line2); transition: background .2s, color .2s; white-space: nowrap; }
.tvw-s:hover { color: #fff; }
.tvw-s[aria-selected="true"] { background: var(--tv-lime); color: var(--tv-ink); box-shadow: none; }
.tvw-s .cb { width: 13px; height: 13px; }
.tvw-panel { padding: 12px 16px 6px; display: grid; gap: 12px; align-content: start; }
.tvw-h { font-size: 22px; line-height: 1.08; letter-spacing: -.035em; font-weight: 560; }
.tvw-p { color: var(--tv-soft); font-size: 13.5px; line-height: 1.45; }
.tvw-grid { display: grid; gap: 8px; }
.tvw-f { display: grid; gap: 5px; }
.tvw-f > .mono, .tvw-sub { color: var(--tv-faint); text-transform: uppercase; }
.tvw-sub { margin-top: 6px; }
.tvw-f input { height: 44px; width: 100%; padding: 0 14px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--tv-line2); color: #fff; font: inherit; font-size: 15px; letter-spacing: -.01em; transition: box-shadow .2s, background .2s; }
.tvw-f input::placeholder { color: rgba(255, 255, 255, .3); }
.tvw-f input:hover { background: rgba(255, 255, 255, .07); }
.tvw-f input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--tv-lime); background: rgba(255, 255, 255, .07); }
.tvw-logo { display: grid; gap: 10px; }
.tvw-drop { position: relative; display: grid; gap: 4px; justify-items: start; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--tv-line2); cursor: pointer; transition: background .2s, box-shadow .2s; }
.tvw-drop:hover, .tvw-drop:focus-within { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px var(--tv-lime); }
.tvw-drop .mono { color: var(--tv-lime); text-transform: uppercase; }
.tvw-drop small { color: var(--tv-faint); font-size: 12px; }
.tvw-sws { display: flex; flex-wrap: wrap; gap: 6px; }
.tvw-sw { width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); padding: 0; transition: transform .25s var(--tv-ease), box-shadow .2s; }
.tvw-sw:hover:not(.is-static) { transform: scale(1.1); }
.tvw-sw.is-on { box-shadow: 0 0 0 2px var(--tv-g1), 0 0 0 4px var(--tv-lime), inset 0 0 0 1px rgba(255, 255, 255, .28); }
.tvw-sws--s .tvw-sw { width: 24px; height: 24px; }
.tvw-list { display: grid; gap: 6px; }
.tvw-row { display: grid; gap: 8px; padding: 11px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--tv-line); }
.tvw-row-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.tvw-pick { display: inline-flex; align-items: center; gap: 8px; }
.tvw-pick input { width: 30px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.tvw-pick input::-webkit-color-swatch-wrapper { padding: 0; }
.tvw-pick input::-webkit-color-swatch { border: 0; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.tvw-pick output { color: var(--tv-soft); }
.tvw-hint { color: var(--tv-faint); font-size: 12px; line-height: 1.4; }
.tvw-seg { margin-top: 2px; }
.tvw-tones { display: grid; gap: 6px; }
.tvw-tone, .tvw-ck { display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 11px 12px; border-radius: 14px; text-align: left; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--tv-line); transition: background .2s, box-shadow .2s; }
.tvw-tone:hover, .tvw-ck:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.tvw-tone[aria-checked="true"], .tvw-ck[aria-checked="true"] { box-shadow: inset 0 0 0 1.5px var(--tv-lime); }
.tvw-tone .cb, .tvw-ck .cb { margin-top: 1px; }
.tvw-tone span, .tvw-ck span { display: grid; gap: 2px; font-size: 14px; }
.tvw-tone b { font-weight: 520; }
.tvw-tone small { color: var(--tv-soft); font-size: 12.5px; line-height: 1.35; }
.tvw-tone[aria-checked="true"] > .cb, .tvw-ck[aria-checked="true"] > .cb { background: var(--tv-lime); }
.tvw-tone[aria-checked="true"] > .cb svg, .tvw-ck[aria-checked="true"] > .cb svg { color: var(--tv-ink); }
.tvw-checks { display: grid; gap: 5px; }
.tvw-ck { align-items: center; }
.tvw-ck span { display: flex; align-items: baseline; gap: 10px; }
.tvw-ck span i { font-style: normal; color: var(--tv-faint); }
.tvw-ck:disabled { opacity: .6; cursor: default; }
.tvw-slots { display: grid; gap: 8px; }
.tvw-slot { display: flex; align-items: flex-start; gap: 14px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--tv-line); }
.tvw-slot > div { display: grid; gap: 4px; min-width: 0; }
.tvw-slot b { font-weight: 520; font-size: 14px; }
.tvw-slot small.mono { color: var(--tv-faint); }
.tvw-ar { flex: none; display: block; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 3px, transparent 3px 7px); min-width: 22px; }
.tvw-ar.is-video { box-shadow: inset 0 0 0 1.5px var(--tv-lime); }
.tvw-terms { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.tvw-term { height: 26px; padding: 0 10px; border-radius: 13px; box-shadow: inset 0 0 0 1px var(--tv-line2); color: var(--tv-soft); transition: background .2s, color .2s; }
.tvw-term:hover { background: #fff; color: var(--tv-ink); }
.tvw-term.is-done { background: var(--tv-lime); color: var(--tv-ink); box-shadow: none; }
.tvw-sum { display: grid; gap: 1px; border-radius: 14px; overflow: hidden; background: var(--tv-line); box-shadow: inset 0 0 0 1px var(--tv-line); }
.tvw-sum > div { display: grid; grid-template-columns: 82px 1fr; gap: 10px; padding: 9px 12px; background: var(--tv-g2); }
.tvw-sum dt { color: var(--tv-faint); text-transform: uppercase; }
.tvw-sum dd { color: #fff; overflow-wrap: anywhere; }
.tvw-warn { color: var(--tv-warn); }
.tv .tvw-copy { margin-top: 4px; justify-self: start; }
.tv .tvw-copy:disabled { opacity: .45; pointer-events: none; }
.tvw-msg { min-height: 16px; color: var(--tv-lime); }
.tvw-lock { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--tv-line2); font-size: 13.5px; color: var(--tv-soft); }
.tvw-lock b { color: #fff; font-weight: 520; }
.tvw-lock > div { display: flex; gap: 6px; flex-wrap: wrap; }
.tvw-reset { justify-self: start; color: var(--tv-faint); text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; margin-top: 6px; }
.tvw-reset:hover { color: #fff; }
.tvw-foot { position: sticky; bottom: 0; display: flex; gap: 8px; justify-content: space-between; padding: 12px 16px; background: linear-gradient(transparent, var(--tv-g1) 40%); margin-top: 8px; }
@media (max-width: 760px) {
  .tv__wiz { width: 100%; bottom: calc(var(--dock-h, 120px) + 16px); height: 54%; border-radius: 16px 16px 0 0; }
  .tvw-h { font-size: 20px; }
  .tvw-top { padding: 10px 16px 6px; }
  .tvw-rail { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
  .tvw-rail::-webkit-scrollbar { display: none; }
  .tvw-panel { padding-top: 8px; }
  .tvw-foot { padding: 8px 16px; margin-top: 0; }
  .tv .tv__mine { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tv *, .tv *::before, .tv *::after { transition-duration: 0s !important; animation: none !important; } }
html[data-motion="reduced"] .tv *, html.reduced-motion .tv * { transition-duration: 0s !important; animation: none !important; }

/* ───── Build steps (js/steps.js) ───── */
.tvs-top { padding: 16px 20px; display: grid; gap: 12px; }
.tvs-prog { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tvs-prog .mono { color: var(--tv-soft); } .tvs-prog b { color: var(--tv-lime); font-weight: 500; }
.tvs-bar { display: inline-flex; gap: 3px; }
.tvs-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--tv-off); transition: background .3s; }
.tvs-bar i.on { background: var(--tv-lime); }
.tvs-who { color: var(--tv-faint); } .tvs-who b { color: #fff; font-weight: 500; }
.tvs-link { color: var(--tv-soft); text-decoration: underline; text-underline-offset: 3px; font: inherit; text-transform: lowercase; }
.tvs-link:hover { color: var(--tv-lime); }
.tvs-note { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--tv-line2); font-size: 14px; color: var(--tv-soft); }
.tvs-note b { color: #fff; font-weight: 520; } .tvs-note > div { display: flex; gap: 6px; flex-wrap: wrap; }
.tvs-list { max-width: 1180px; margin: 12px auto 0; display: grid; gap: 6px; }
.tvs { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(17, 18, 20, .86); box-shadow: inset 0 0 0 1px var(--tv-line); transition: box-shadow .25s, opacity .25s; }
.tvs.is-next { box-shadow: inset 0 0 0 1.5px var(--tv-lime); }
.tvs.is-done { opacity: .62; } .tvs.is-off { opacity: .4; }
.tvs-ck { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; }
.tvs-ck .cb { width: 20px; height: 20px; }
.tvs-ck[aria-checked="true"] > .cb { background: var(--tv-lime); }
.tvs-ck[aria-checked="true"] > .cb svg { color: var(--tv-ink); }
.tvs-b { min-width: 0; display: grid; gap: 4px; }
.tvs-t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tvs-t b { font-size: 17px; font-weight: 540; letter-spacing: -.02em; }
.tvs-t i { font-style: normal; color: var(--tv-faint); } .tvs-t em { font-style: normal; color: var(--tv-faint); text-transform: uppercase; }
.tvs-see { color: var(--tv-soft); font-size: 13.5px; line-height: 1.45; }
.tvs-see .mono { display: inline-block; margin-right: 8px; color: var(--tv-lime); text-transform: uppercase; }
.tvs.is-off .tvs-see .mono { color: var(--tv-faint); }
.tvs-copy { height: 34px; padding: 0 16px; font-size: 10.5px; }
@media (max-width: 760px) { .tvs { grid-template-columns: auto 1fr; } .tvs-copy { grid-column: 2; justify-self: start; } }

.tvs-tools { padding: 14px 20px 16px; display: grid; gap: 12px; margin-top: 12px; }
.tvs-tools__h { color: var(--tv-faint); text-transform: uppercase; }
.tvs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tvs-chip { height: 34px; padding: 0 14px 0 10px; border-radius: 17px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tv-soft); box-shadow: inset 0 0 0 1px var(--tv-line2); transition: background .2s, color .2s; }
.tvs-chip:hover { color: #fff; } .tvs-chip .cb { width: 14px; height: 14px; }
.tvs-chip.is-on { background: var(--tv-lime); color: var(--tv-ink); box-shadow: none; }
.tvs-guide { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--tv-line); font-size: 14px; color: var(--tv-soft); }
.tvs-guide ol { display: grid; gap: 6px; padding-left: 20px; list-style: decimal; color: rgba(255, 255, 255, .86); }
.tvs-guide ol li::marker { color: var(--tv-lime); font-family: var(--tv-mono); font-size: 11px; }
.tvs-guide__n { color: var(--tv-faint); }
.tvs-fix { padding: 14px 20px 16px; display: grid; gap: 6px; margin-top: 12px; }
.tvs-f { border-radius: 14px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--tv-line); }
.tvs-f summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer; }
.tvs-f summary::-webkit-details-marker { display: none; }
.tvs-f summary b { font-weight: 500; font-size: 15px; }
.tvs-f .fix__pm { width: 12px; height: 12px; position: relative; flex: none; }
.tvs-f .fix__pm::before, .tvs-f .fix__pm::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; border-radius: 1px; background: var(--tv-soft); transition: rotate .3s var(--tv-ease); }
.tvs-f .fix__pm::after { rotate: 90deg; } .tvs-f[open] .fix__pm::after { rotate: 0deg; }
.tvs-f__b { display: grid; gap: 10px; padding: 0 14px 14px; color: var(--tv-soft); font-size: 14px; }
.tvs-f__p { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--tv-g0); box-shadow: inset 0 0 0 1px var(--tv-line); font-family: var(--tv-mono); font-size: 11.5px; line-height: 1.6; color: rgba(255, 255, 255, .86); white-space: pre-wrap; overflow-wrap: anywhere; }
.tvs-f__b .mono { color: var(--tv-faint); }
.tvw-a { color: var(--tv-soft); text-decoration: underline; text-underline-offset: 3px; } .tvw-a:hover { color: var(--tv-lime); }

/* ───── Edit on page (js/editor.js) ───── */
.tv__edbar { position: absolute; left: 50%; top: 14px; z-index: 7; translate: -50% 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; max-width: calc(100% - 24px); padding: 8px 8px 8px 16px; border-radius: 26px; background: rgba(17, 18, 20, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 40px -20px rgba(0, 0, 0, .7); }
.tved-t { color: var(--tv-soft); } .tved-n { color: var(--tv-lime); font-weight: 500; } .tved-m { flex: 1 1 100%; color: var(--tv-warn); padding: 0 8px 4px 0; }
.tvw-edit { display: grid; gap: 3px; text-align: left; width: 100%; padding: 12px 14px; border-radius: 14px; background: rgba(212, 255, 58, .1); box-shadow: inset 0 0 0 1px rgba(212, 255, 58, .45); transition: background .2s; }
.tvw-edit:hover { background: rgba(212, 255, 58, .18); }
.tvw-edit .mono { color: var(--tv-lime); text-transform: uppercase; } .tvw-edit small { color: var(--tv-soft); font-size: 12.5px; }
@media (max-width: 760px) { .tv__edbar { top: 8px; } .tved-t { display: none; } }

/* ───── Download files (source packages) ───── */
.tv__files { position: absolute; right: 10px; bottom: calc(100% + 10px); width: min(460px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; display: grid; gap: 10px; padding: 16px; border-radius: 22px; background: rgba(17, 18, 20, .94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 24px 60px -24px rgba(0, 0, 0, .8); z-index: 9; scrollbar-width: thin; }
.tv__files header { display: flex; align-items: center; justify-content: space-between; } .tv__files header .mono { display: flex; align-items: center; gap: 8px; color: var(--tv-soft); text-transform: uppercase; }
.tv__files h3 { font-size: 19px; line-height: 1.12; letter-spacing: -.03em; font-weight: 560; }
.tvf-p { color: var(--tv-soft); font-size: 13.5px; line-height: 1.45; }
.tvf-size { color: var(--tv-faint); } .tvf-size b { color: var(--tv-lime); font-weight: 500; }
.tvf-tree { display: grid; gap: 1px; border-radius: 14px; overflow: hidden; background: var(--tv-line); }
.tvf-tree li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--tv-g2); font-family: var(--tv-mono); font-size: 11.5px; } .tvf-tree li i { font-style: normal; color: var(--tv-faint); }
.tvf-a { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tvf-dl { height: 38px; padding: 0 18px; } .tvf-msg { min-height: 14px; color: var(--tv-lime); }
.tvf-lock { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--tv-line2); font-size: 13.5px; color: var(--tv-soft); } .tvf-lock b { color: #fff; font-weight: 520; }
@media (max-width: 760px) { .tv .tv__files-btn { display: none; } .tv__files { left: 0; right: 0; width: auto; } }

/* ───── Edit with chat (js/chat.js): a chat beside the live page in "Edit on page" ───── */
.tv__stage[data-mode="edit"] .tv__frame { right: min(380px, 40%); }
.tv__stage[data-mode="edit"] .tv__edbar { left: calc((100% - min(380px, 40%)) / 2); }
.tv__chat { width: min(380px, 40%); bottom: calc(var(--dock-h, 90px) + 28px); padding: 0; display: flex; flex-direction: column; border-radius: 0 0 0 22px; overflow: hidden; }
.tv__chat.is-drop { box-shadow: inset 0 0 0 2px var(--tv-lime); }
.tvc-h { display: grid; gap: 4px; padding: 16px 16px 12px; box-shadow: inset 0 -1px 0 var(--tv-line); }
.tvc-t { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.tvc-s { font-size: 9px; text-transform: uppercase; color: var(--tv-faint); }
.tvc-log { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; overscroll-behavior: contain; scrollbar-width: thin; }
.tvc-m { max-width: 92%; padding: 10px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.tvc-m--bot { align-self: flex-start; background: var(--tv-g2); color: rgba(255, 255, 255, .88); border-bottom-left-radius: 5px; }
.tvc-m--me { align-self: flex-end; background: var(--tv-lime); color: var(--tv-ink); border-bottom-right-radius: 5px; }
.tvc-m b { color: #fff; font-weight: 600; } .tvc-m--me b { color: var(--tv-ink); }
.tvc-m i { font-style: normal; color: var(--tv-lime); }
.tvc-list { margin: 8px 0; padding-left: 18px; display: grid; gap: 4px; }
.tvc-sent { display: block; width: 150px; border-radius: 12px; }
.tvc-m--me:has(> .tvc-sent:only-child) { padding: 0; background: none; }
.tvc-sw { display: inline-block; width: 12px; height: 12px; margin: 0 6px -1px 2px; border-radius: 3px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.tvc-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.tvc-thumb { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--tv-g3); cursor: pointer; }
.tvc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--tv-ease); }
.tvc-thumb:hover img, .tvc-thumb:focus-visible img { transform: scale(1.06); }
.tvc-thumb:focus-visible { outline: 2px solid var(--tv-lime); outline-offset: 2px; }
.tvc-thumb span { position: absolute; left: 4px; bottom: 4px; padding: 2px 5px; border-radius: 6px; background: rgba(17, 18, 20, .82); font-size: 9px; }
.tvc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.tvc-chip { height: 30px; padding: 0 11px; border: 0; border-radius: 15px; background: none; box-shadow: inset 0 0 0 1px var(--tv-line2); color: var(--tv-soft); font: 500 12px/1 var(--tv-font); cursor: pointer; text-align: left; transition: background .2s, color .2s; }
.tvc-chip:hover { background: #fff; color: var(--tv-ink); }
.tvc-form { padding: 10px 12px 14px; box-shadow: inset 0 1px 0 var(--tv-line); }
.tvc-file { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; padding: 6px; border-radius: 12px; background: var(--tv-g2); font-size: 12px; color: var(--tv-soft); }
.tvc-file[hidden] { display: none; }
.tvc-file img, .tvc-file video { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; }
.tvc-vid { display: grid; place-items: center; width: 100%; height: 100%; color: var(--tv-lime); font-style: normal; }
.tvc-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvc-x { width: 26px; height: 26px; border: 0; border-radius: 13px; background: none; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.tvc-row { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 24px; background: var(--tv-g2); box-shadow: inset 0 0 0 1px var(--tv-line2); }
.tvc-row:focus-within { box-shadow: inset 0 0 0 1px var(--tv-lime); }
.tvc-in { flex: 1; min-width: 0; height: 38px; padding: 0 6px; border: 0; background: none; color: #fff; font: 450 14px/1 var(--tv-font); outline: none; }
.tvc-in::placeholder { color: var(--tv-faint); }
.tvc-clip, .tvc-send { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 19px; cursor: pointer; }
.tvc-clip { background: none; color: var(--tv-soft); } .tvc-clip:hover { color: #fff; background: var(--tv-g3); }
.tvc-send { background: var(--tv-lime); color: var(--tv-ink); }
.tvc-clip svg, .tvc-send svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .tv__chat { width: 100%; top: auto; bottom: calc(var(--dock-h, 120px) + 16px); height: 50%; border-radius: 16px 16px 0 0; }
  .tv__stage[data-mode="edit"] .tv__frame { right: 0; bottom: calc(50% + var(--dock-h, 120px) + 16px); }
  .tv__stage[data-mode="edit"] .tv__edbar { left: 50%; }
  .tvc-thumbs { grid-template-columns: repeat(5, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .tvc-thumb img { transition: none; } }
/* chat voice: mic in the input row, speaker toggle in the header */
.tvc-t { width: 100%; }
.tvc-say { margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 15px; background: none; color: var(--tv-faint); cursor: pointer; }
.tvc-say svg { width: 17px; height: 17px; }
.tvc-say[aria-pressed="false"] .tvc-wave { opacity: .25; }
.tvc-say[aria-pressed="true"] { color: var(--tv-lime); background: rgba(212, 255, 58, .1); }
.tvc-mic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 19px; background: none; color: var(--tv-soft); cursor: pointer; }
.tvc-mic:hover { color: #fff; background: var(--tv-g3); }
.tvc-mic svg { width: 18px; height: 18px; }
.tvc-mic[aria-pressed="true"] { color: var(--tv-ink); background: var(--tv-lime); animation: tvc-rec 1.2s ease-in-out infinite; }
.tv__chat.is-listening .tvc-row { box-shadow: inset 0 0 0 1px var(--tv-lime); }
@keyframes tvc-rec { 50% { box-shadow: 0 0 0 7px rgba(212, 255, 58, .18); } }
@media (prefers-reduced-motion: reduce) { .tvc-mic[aria-pressed="true"] { animation: none; } }