/* LND Motion Studio: app shell (sidebar), home and the video editor. Loads after app.css and reuses its tokens. */
:root { --side: 232px; --lane: 40px; }

/* ---------- shell ---------- */
.side { position: fixed; inset: 0 auto 0 0; width: var(--side); z-index: 40; display: flex; flex-direction: column; gap: 6px; padding: 18px 12px 14px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; }
.sbrand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; font-weight: 800; letter-spacing: -.01em; text-decoration: none; color: var(--ink); }
.sbrand img { height: 24px; width: auto; } :root[data-theme="dark"] .sbrand img { filter: brightness(1.5) saturate(1.2); }
.sbrand em { font: italic 400 23px var(--serif); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 2px; }
.navg { display: grid; gap: 2px; }
.nv { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--soft); font-size: 14.5px; font-weight: 700; text-decoration: none; text-align: left; transition: background .2s, color .2s; }
.nv svg { width: 20px; height: 20px; flex: none; } .nv:hover { background: var(--fill); color: var(--ink); } .nv.on { background: var(--fill2); color: var(--ink); }
.nv.sm { height: 36px; font-size: 13.5px; font-weight: 600; } .nv .dot { width: 10px; height: 10px; border-radius: 4px; background: var(--c); flex: none; margin: 0 5px; }
.navh { margin: 18px 12px 6px; font: 800 11px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.sfoot { margin: 0; padding: 12px 10px 0; font-size: 12px; color: var(--mute); line-height: 1.5; border-top: 1px solid var(--line); }
body { padding-left: var(--side); }
body:not([data-v="templates"]) #countPill { display: none; }
.top .brand { display: none; } .top { padding: 0 24px; }
@media (min-width: 1001px) and (max-width: 1400px) {
  :root { --side: 68px; } .side { padding: 18px 10px; align-items: stretch; } .sbrand { justify-content: center; padding: 4px 0 16px; } .sbrand span, .nv span, .navh, .sfoot { display: none; } .nv { justify-content: center; padding: 0; } .nv .dot { margin: 0; width: 12px; height: 12px; }
}
@media (max-width: 1000px) {
  body { padding-left: 0; padding-bottom: 66px; }
  .side { inset: auto 0 0 0; width: auto; height: 62px; flex-direction: row; align-items: center; justify-content: space-around; gap: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); overflow: visible; height: auto; }
  .sbrand, .navh, .side .pins, .sfoot, .side .grow { display: none; } .side .navg.pins { display: none; } .tltool .btn { padding: 0 10px; flex: none; } .side .navg:not(.pins) { display: flex; width: 100%; justify-content: space-around; }
  .nv { flex-direction: column; gap: 3px; height: 50px; padding: 0 10px; font-size: 11.5px; justify-content: center; } .nv svg { width: 22px; height: 22px; }
  .top .brand { display: flex; } .top { padding: 0 16px; }
}

/* ---------- home ---------- */
#home { max-width: 1180px; margin: 0 auto; padding: 0 28px 40px; }
.hhero { padding: 56px 0 18px; text-align: center; }
.hhero h1 { margin: 0 auto; max-width: 18ch; font: 400 clamp(38px, 5vw, 62px)/1.05 var(--serif); letter-spacing: -.015em; } .hhero h1 em { font-style: italic; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .08em; }
.ask { max-width: 760px; margin: 28px auto 0; padding: 14px; text-align: left; border-radius: 22px; border: 1px solid var(--line2); background: var(--panel); box-shadow: 0 24px 50px -30px rgba(30,40,110,.5); transition: border-color .2s, box-shadow .2s; } .ask:focus-within { border-color: var(--accent); box-shadow: 0 24px 60px -28px rgba(74,99,240,.55); }
.ask textarea { width: 100%; resize: none; border: 0; outline: 0; background: transparent; font-size: 16.5px; line-height: 1.5; padding: 6px 8px; min-height: 60px; }
.askbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px 0; } .askbar .hint { font-size: 12.5px; }
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 26px auto 0; max-width: 1060px; }
.tile { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; color: var(--ink); transition: transform .25s var(--ease), border-color .2s, box-shadow .25s; }
.tile:hover { transform: translateY(-3px); border-color: var(--line2); box-shadow: var(--shadow-hover); }
.tile i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); margin-bottom: 8px; } .tile i svg { width: 20px; height: 20px; }
.tile b { font-size: 14.5px; } .tile span { font-size: 12.5px; color: var(--mute); }
.hsec { margin-top: 40px; } .hhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .hhead h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; } .hhead a { font-size: 13.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.pcard { position: relative; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s; } .pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.pcard a { display: block; color: inherit; text-decoration: none; padding: 0 0 12px; } .pth { aspect-ratio: 16 / 9; background: var(--frame) center / cover; margin-bottom: 10px; } .pcard b { display: block; padding: 0 14px; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pcard small { display: block; padding: 0 14px; color: var(--mute); font-size: 12.5px; }
.pcard > .ib { position: absolute; right: 8px; top: 8px; opacity: 0; background: var(--glass); backdrop-filter: blur(8px); } .pcard:hover > .ib, .pcard > .ib:focus-visible { opacity: 1; }
.pcard.new { display: grid; } .pcard.new a { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 160px; border: 0; } .pcard.new span { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--fill2); color: var(--accent); } .pcard.new svg { width: 22px; height: 22px; }
.hscroll { display: flex; gap: 16px; overflow-x: auto; padding: 2px 2px 14px; scroll-snap-type: x proximity; }
.fcard { flex: none; width: 250px; scroll-snap-align: start; display: block; padding: 0 0 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; color: inherit; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s; } .fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.fcard img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 10px; background: var(--fill); } .fcard b { display: block; padding: 0 14px; font-size: 14.5px; } .fcard small { display: block; padding: 0 14px; color: var(--mute); font-size: 12.5px; }

/* ---------- studio layout ---------- */
#studio { display: flex; flex-direction: column; height: calc(100vh - 60px); height: calc(100dvh - 60px); min-height: 560px; }
.sbar { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.pname { height: 38px; width: min(300px, 40vw); border: 1px solid transparent; border-radius: 10px; background: transparent; font-weight: 800; font-size: 16px; padding: 0 10px; outline: 0; } .pname:hover { background: var(--fill); } .pname:focus { border-color: var(--accent); background: var(--panel); }
.saved { font-size: 12.5px; color: var(--mute); }
.ib.flip svg { transform: scaleX(-1); } .ib:disabled { opacity: .35; cursor: default; } .ib.sm { width: 32px; height: 32px; border-radius: 9px; } .ib.sm svg { width: 15px; height: 15px; } .ib.big { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--bg); border: 0; } .ib.big:hover { background: var(--ink); filter: brightness(1.15); } .ib.big svg { width: 20px; height: 20px; }
.swork { flex: 1; min-height: 0; display: grid; grid-template-columns: 296px minmax(0, 1fr) 328px; }
.lib { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel); }
.ltabs { display: flex; padding: 8px 8px 0; gap: 2px; border-bottom: 1px solid var(--line); } .ltabs button { flex: 1; height: 38px; border: 0; background: transparent; color: var(--mute); font-weight: 700; font-size: 13px; display: inline-flex; gap: 7px; align-items: center; justify-content: center; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; } .ltabs button svg { width: 16px; height: 16px; } .ltabs button:hover { color: var(--ink); } .ltabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.lpane { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; } .lpane h4 { margin: 14px 0 8px; font: 800 11px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); } .lpane h4:first-child { margin-top: 2px; }
.chips2 { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .chips2 button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--soft); font-size: 12.5px; font-weight: 700; } .chips2 button:hover { color: var(--ink); } .chips2 button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lcard { display: grid; gap: 6px; padding: 0 0 8px; text-align: left; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); overflow: hidden; transition: transform .2s var(--ease), border-color .2s; } .lcard:hover { transform: translateY(-2px); border-color: var(--accent); } .lcard img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--fill); } .lcard span { padding: 0 9px; font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.drop.slim { padding: 16px 12px; border-radius: 14px; } .drop.slim.over { border-color: var(--accent); background: var(--fill2); }
.vo { display: flex; align-items: center; gap: 10px; margin: 12px 0; } .btn.rec { color: #e23d5a; border-color: #e23d5a; } .meter { flex: 1; height: 8px; border-radius: 8px; background: var(--fill2); overflow: hidden; } .meter i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: #e23d5a; }
.mrow, .srow { display: flex; align-items: center; gap: 9px; padding: 7px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); margin-bottom: 7px; } .mrow:hover, .srow:hover { border-color: var(--line2); }
.mth { width: 56px; height: 36px; flex: none; border-radius: 8px; background: var(--fill2) center / cover; display: grid; place-items: center; color: var(--mute); } .mth svg { width: 18px; height: 18px; } .mi, .srow > div { flex: 1; min-width: 0; } .mi b, .srow b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mi small, .srow small { color: var(--mute); font-size: 11.5px; }
.srow { cursor: grab; }

.center { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 10px; background: var(--frame); }
.pvwrap { flex: 1; min-height: 0; display: grid; place-items: center; } .pvwrap:fullscreen { background: #000; padding: 0; }
#sCanvas { display: block; max-width: 100%; max-height: 100%; border-radius: 12px; background: #fff; box-shadow: 0 30px 70px -30px rgba(10,14,50,.55), 0 0 0 1px var(--line); cursor: pointer; } .pvwrap:fullscreen #sCanvas { border-radius: 0; width: auto; height: auto; max-width: 100vw; max-height: 100vh; }
.tport { display: flex; align-items: center; gap: 10px; } .time { font: 600 13px var(--mono); color: var(--soft); min-width: 120px; }
.insp2 { min-height: 0; overflow-y: auto; padding: 14px; border-left: 1px solid var(--line); background: var(--panel); }
.ihead { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; } .ihead b { display: block; font-size: 15.5px; } .ihead small { color: var(--mute); font-size: 12.5px; } .kdot { width: 14px; height: 36px; border-radius: 6px; background: var(--k, var(--mute)); flex: none; }
.igrp { margin-bottom: 8px; border-bottom: 1px solid var(--line); } .igrp h4 { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 11px 2px; font: 800 12px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); cursor: pointer; } .igrp h4::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-right: 4px; } .igrp.collapsed h4::after { transform: rotate(-45deg); } .igrp.collapsed .ibody { display: none; } .ibody { padding: 4px 2px 6px; }
.numrow { display: flex; align-items: center; gap: 8px; } .numrow span { color: var(--mute); font-size: 13px; }
textarea.txt.ta { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; font-size: 13.5px; }
.keys { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13px; color: var(--soft); } .keys kbd, .hint kbd { font: 700 11px var(--mono); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line2); background: var(--fill); }
.logorow { display: flex; align-items: center; gap: 10px; } .logorow .mth { width: 64px; height: 40px; }

/* ---------- timeline ---------- */
.tl { flex: none; height: 316px; display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--panel); }
.tltool { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); } .zoom { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mute); } .zoom input { width: 120px; }
.tlbody { flex: 1; min-height: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr); }
.lanes-h { padding-top: 28px; border-right: 1px solid var(--line); background: var(--panel); overflow: hidden; } .lh { height: var(--lane); margin-bottom: 4px; padding: 5px 10px; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--line); } .lh b { font: 800 11px var(--mono); color: var(--soft); } .lh span { font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlscroll { overflow: auto; position: relative; background: var(--bg); } .tlinner { position: relative; min-height: 100%; }
.ruler2 { position: sticky; top: 0; z-index: 6; height: 28px; background: var(--panel); border-bottom: 1px solid var(--line); cursor: col-resize; touch-action: none; } .ruler2 span { position: absolute; top: 0; height: 100%; padding: 8px 0 0 6px; border-left: 1px solid var(--line2); font: 600 10.5px var(--mono); color: var(--mute); pointer-events: none; }
.lanes { padding-bottom: 8px; } .lane { position: relative; height: var(--lane); margin-bottom: 4px; background: repeating-linear-gradient(90deg, transparent 0 69px, var(--grid-line) 69px 70px); border-bottom: 1px solid var(--line); } .lane.snd { background-color: var(--fill); }
.playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 7; pointer-events: none; will-change: transform; } .playhead i { position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: #ee3f66; } .playhead i::before { content: ""; position: absolute; left: -6px; top: 0; border: 7px solid transparent; border-top: 10px solid #ee3f66; border-bottom: 0; }
.clip { --k: #6a74c9; position: absolute; top: 3px; bottom: 3px; border-radius: 9px; background: var(--k); color: #fff; overflow: hidden; display: flex; align-items: center; cursor: grab; touch-action: none; user-select: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 2px 6px -3px rgba(0,0,0,.4); transition: box-shadow .15s; }
.clip:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 4px 12px -4px rgba(0,0,0,.5); } .clip.sel { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 6px 16px -4px rgba(0,0,0,.5); z-index: 3; } .clip.drag { cursor: grabbing; opacity: .92; z-index: 4; } .clip.muted { filter: grayscale(.8) brightness(.8); }
.clip .cth { flex: none; width: 52px; align-self: stretch; background: center / cover; opacity: .9; mask-image: linear-gradient(90deg, #000 70%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); } .clip .cn { position: relative; padding: 0 10px 0 8px; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.4); pointer-events: none; }
.clip .wave { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; } .clip .hl, .clip .hr { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; z-index: 2; } .clip .hl { left: 0; } .clip .hr { right: 0; } .clip .hl:hover, .clip .hr:hover { background: rgba(255,255,255,.35); }
.k-infographics { --k: #4a63f0; } .k-e-learning { --k: #8a56e0; } .k-titles { --k: #e0912f; } .k-backgrounds { --k: #1f9d8c; } .k-logo { --k: #e0527c; } .k-video { --k: #2f7a5a; } .k-image { --k: #3f8fc9; } .k-audio { --k: #d9693a; } .k-sfx { --k: #c0445f; } .k-music { --k: #7a4fc4; } .k-project { --k: #8a90b6; } .kdot.k-infographics, .kdot.k-e-learning, .kdot.k-titles, .kdot.k-backgrounds, .kdot.k-logo, .kdot.k-video, .kdot.k-image, .kdot.k-audio, .kdot.k-sfx, .kdot.k-music, .kdot.k-project { background: var(--k); }

/* ---------- dialogs ---------- */
.dlg { border: 0; padding: 0; border-radius: 22px; background: var(--panel); color: var(--ink); width: min(520px, 94vw); max-height: 90vh; box-shadow: 0 40px 100px -30px rgba(10,14,50,.7), 0 0 0 1px var(--line); } .dlg::backdrop { background: var(--scrim); backdrop-filter: blur(4px); }
.dlg-in { display: grid; gap: 4px; padding: 22px; max-height: 90vh; overflow-y: auto; } .dlg-in header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .dlg-in h3 { margin: 0; font-size: 20px; letter-spacing: -.01em; } .dlg-in footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.res { width: 100%; border-radius: 14px; background: #000; margin-top: 10px; aspect-ratio: 16 / 9; }

/* ---------- smaller screens ---------- */
@media (max-width: 1320px) { .swork { grid-template-columns: 252px minmax(0, 1fr) 296px; } .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  #home { padding: 0 16px 30px; } .hhero { padding-top: 34px; } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #studio { height: auto; min-height: 0; } .swork { display: contents; } .sbar { order: 0; } .tport { flex-wrap: wrap; } .time { min-width: 0; }
  .center { order: 1; padding: 12px; } .pvwrap { flex: none; } #sCanvas { max-height: 56vh; } .tl { order: 2; height: 300px; } .insp2 { order: 3; border-left: 0; border-top: 1px solid var(--line); max-height: none; } .lib { order: 4; border-right: 0; border-top: 1px solid var(--line); } .lpane { max-height: 420px; }
  .sbar { flex-wrap: wrap; padding: 8px 12px; } .pname { width: 100%; order: -1; } .sbar .grow { display: none; } .sbar .saved { flex: 1; } .tlbody { grid-template-columns: 78px minmax(0, 1fr); } .lh span { display: none; } .tltool { overflow-x: auto; } .zoom input { width: 80px; }
}
@media (max-width: 520px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tile { padding: 12px; } .askbar .hint { display: none; } .askbar { justify-content: flex-end; } }
@media (prefers-reduced-motion: reduce) { .tile, .pcard, .fcard, .lcard { transition: none; } }

/* ---------- v4.1: effects menu, search home, library pages, brand page ---------- */
.k-motion { --k: #8a56e0; } .kdot.k-motion { background: var(--k); }
.fxnav .nv { height: 34px; font-size: 13.5px; font-weight: 600; } .fxnav .nv svg { width: 18px; height: 18px; }
.side { overflow-y: auto; }
/* preview must never run under the transport bar */
.pvwrap { position: relative; display: block; } #sCanvas { position: absolute; inset: 0; margin: auto; width: auto; height: auto; }
.pvwrap:fullscreen #sCanvas { position: static; margin: 0; }
.pvwrap:fullscreen { display: grid; place-items: center; }
.tl { height: clamp(250px, 34vh, 316px); } #studio { min-height: 520px; }
/* home search */
.ask { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 62px; border-radius: 20px; }
.ask-i { width: 22px; height: 22px; color: var(--mute); flex: none; } .ask input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 17px; } .ask input::-webkit-search-cancel-button { display: none; }
.ask kbd { font: 700 12px var(--mono); padding: 3px 8px; border-radius: 7px; border: 1px solid var(--line2); background: var(--fill); color: var(--mute); }
.hres { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; margin: 0; padding: 8px; list-style: none; text-align: left; border-radius: 18px; border: 1px solid var(--line2); background: var(--panel); box-shadow: 0 30px 70px -28px rgba(20,28,90,.55); max-height: 420px; overflow-y: auto; }
.hres li a { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; } .hres li[aria-selected="true"] a, .hres li a:hover { background: var(--fill2); }
.hres img { width: 64px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; background: var(--fill); } .ri { width: 64px; height: 36px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--fill2); color: var(--accent); } .ri svg { width: 18px; height: 18px; }
.rt b { display: block; font-size: 14.5px; } .rt small { color: var(--mute); font-size: 12.5px; } .rh { padding: 6px 10px; font: 800 11px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.hhero { padding-bottom: 6px; } .hhero::before { content: ""; position: absolute; }
/* project cards */
.pcard.new { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 190px; text-decoration: none; color: var(--ink); border: 1.5px dashed var(--line2); background: transparent; text-align: center; }
.pcard.new:hover { border-color: var(--accent); background: var(--fill); } .pcard.new span { width: 48px; height: 48px; margin-bottom: 8px; border-radius: 14px; display: grid; place-items: center; background: var(--fill2); color: var(--accent); } .pcard.new b { padding: 0; } .pcard.new small { padding: 0; }
.mcard .mc-open { display: block; width: 100%; padding: 0 0 6px; border: 0; background: transparent; text-align: left; color: inherit; } .mcard .mc-open b { padding: 0 14px; display: block; } .mcard .mc-open small { padding: 0 14px; display: block; color: var(--mute); font-size: 12.5px; }
.mc-f { display: flex; gap: 8px; align-items: center; padding: 6px 12px 12px; } .mc-f .btn { flex: 1; } .mcard > .ib { display: none; }
/* video templates row in Templates */
.packs { padding: 26px 0 6px; } .packs .hhead { align-items: baseline; gap: 14px; justify-content: flex-start; } .packs .hint { font-size: 13px; }
.pk-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pk { display: grid; gap: 12px; padding: 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; color: inherit; transition: transform .25s var(--ease), box-shadow .25s, border-color .2s; } .pk:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--line2); }
.pk-th { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; aspect-ratio: 16 / 9; } .pk-th img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; background: var(--fill); } .pk-th img:first-child { grid-row: 1 / 3; }
.pk-t b { display: block; font-size: 16px; } .pk-t small { display: block; color: var(--soft); font-size: 13px; margin: 2px 0 6px; } .pk-t span { font-size: 12px; color: var(--mute); }
/* generic page header */
.phead { max-width: 1180px; margin: 0 auto; padding: 44px 0 20px; } .phead h1 { margin: 0; font: 400 clamp(34px, 4vw, 52px)/1.06 var(--serif); letter-spacing: -.015em; } #sounds, #mine, #brandpg { max-width: 1240px; margin: 0 auto; padding: 0 28px 50px; }
/* sounds */
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.scard { display: grid; gap: 10px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); transition: border-color .2s, box-shadow .25s; } .scard:hover { border-color: var(--line2); box-shadow: var(--shadow-hover); } .scard.on { border-color: var(--accent); }
.scard canvas { width: 100%; height: 56px; color: var(--accent); border-radius: 10px; background: var(--fill); display: block; } .sc-h { display: flex; align-items: center; gap: 10px; } .sc-h > div { flex: 1; min-width: 0; } .sc-h b { display: block; font-size: 15px; } .sc-h small { color: var(--mute); font-size: 12.5px; }
.sc-h .ib { border-radius: 50%; background: var(--ink); color: var(--bg); border: 0; } .rate { display: grid; grid-template-columns: 62px 1fr 52px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--soft); font-weight: 600; } .rate output { font: 600 12px var(--mono); text-align: right; color: var(--ink); }
.sc-f { display: flex; gap: 8px; } .sc-f .btn { flex: 1; padding: 0 10px; }
.emptybox { grid-column: 1 / -1; padding: 40px 24px; border-radius: 20px; border: 1.5px dashed var(--line2); text-align: center; display: grid; gap: 8px; justify-items: center; } .emptybox p { margin: 0; max-width: 46ch; color: var(--soft); }
/* brand page */
.bwrap { display: grid; grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); gap: 28px; align-items: start; }
.bform { display: grid; gap: 14px; } .bgrp { padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); } .bgrp h3 { margin: 0 0 12px; font: 800 12px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); } .cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.bprev { position: sticky; top: 76px; display: grid; gap: 12px; justify-items: start; } .bcv { width: 100%; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--frame); } #bCanvas { display: block; width: 100%; height: auto; }
@media (max-width: 1100px) { .pk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bwrap { grid-template-columns: 1fr; } .bprev { position: static; order: -1; } }
@media (max-width: 1000px) { #sounds, #mine, #brandpg { padding: 0 16px 40px; } .phead { padding-top: 26px; } .side .fxnav, .side .navh { display: none; } .ask { height: 56px; } .ask kbd { display: none; } .pk-row { grid-template-columns: 1fr; } }
@media (min-width: 1001px) and (max-width: 1400px) { .fxnav .nv span { display: none; } .navh { display: none; } }

@media (max-width: 1000px) { .side .navg.fxnav, .side .navh { display: none !important; } }

@media (min-width: 1001px) and (max-height: 880px) { :root { --lane: 34px; } .tl { height: 276px; } .clip .cn { font-size: 11.5px; } .lh { padding: 2px 10px; } .lh span { font-size: 10px; } }

/* ---------- v4.2: effects pages stand alone, templates page = video templates ---------- */
#gallery[data-mode="templates"] .bar, #gallery[data-mode="templates"] #grid, #gallery[data-mode="templates"] .hero .chips, #gallery[data-mode="templates"] .packs .hhead { display: none; }
#gallery[data-mode="fx"] #packs, #gallery[data-mode="fx"] .hero .chips, #gallery[data-mode="fx"] #cats, #gallery[data-mode="fx"] #uses { display: none; }
#gallery[data-mode="templates"] .packs { padding-top: 6px; }
a.btn { text-decoration: none; color: inherit; } a.btn.primary { color: var(--grad-ink); }
.search.sq, .search.lsq { max-width: 520px; margin-top: 18px; } .search.lsq { margin: 0 0 8px; max-width: none; } .search.lsq input { height: 40px; font-size: 13.5px; padding-left: 40px; border-radius: 12px; } .search.lsq svg { top: 10px; left: 12px; width: 18px; height: 18px; }
#sTags { margin-top: 14px; } .empty-note { color: var(--mute); padding: 30px 4px; }
.srow .ib.sm { flex: none; } .srow.on { border-color: var(--accent); background: var(--fill2); }
/* brand page: keep the form and preview from overlapping */
.bwrap { grid-template-columns: minmax(0, 470px) minmax(0, 1fr); } .bform, .bgrp, .cgrid, .cgrid .fld { min-width: 0; } .clr { min-width: 0; } .clr input[type=text] { min-width: 0; width: 100%; } .bprev { min-width: 0; align-content: start; }

@media (max-width: 1000px) { .side { overflow: hidden; max-width: 100vw; } .side .navg:not(.pins) { min-width: 0; } .side .nv { min-width: 0; flex: 1; padding: 0 4px; text-align: center; } }
.pk { min-width: 0; } .pk-row { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .pk-th { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 6px; aspect-ratio: auto; } .pk-th img { aspect-ratio: 16 / 9; height: auto; } .pk-th img:first-child { grid-row: auto; }
@media (max-width: 1000px) { .pk-row { grid-template-columns: minmax(0, 1fr); } #gallery { max-width: 100vw; overflow-x: clip; } }

/* ---------- v4.3: favourites, folders, crop ---------- */
.fav { width: 34px; height: 34px; flex: none; border-radius: 10px; border: 0; background: transparent; color: var(--mute); display: grid; place-items: center; margin: 0; } .fav:hover { color: var(--ink); background: var(--fill2); } .fav svg { width: 19px; height: 19px; } .fav[aria-pressed="true"] { color: #f0467f; } .fav[aria-pressed="true"] svg path { fill: currentColor; } .fav.sm { width: 30px; height: 30px; } .fav.sm svg { width: 17px; height: 17px; }
.sc-h .ib.sm { flex: none; } .sc-h { gap: 6px; }
.fbar { margin-top: 16px; align-items: center; } .fchip.over { border-color: var(--accent); background: var(--fill2); outline: 2px dashed var(--accent); outline-offset: 2px; } .fnew { display: inline-flex; gap: 6px; border-style: dashed; } .fnew svg { width: 14px; height: 14px; } .fops { display: inline-flex; gap: 4px; margin-left: 6px; }
.scard[draggable="true"] { cursor: grab; } .fsel { grid-template-columns: 62px 1fr; } .fsel .sel { height: 34px; font-size: 13px; }
.lfav { height: 36px; margin: 0 0 6px; font-size: 13px; }
.dlg.wide { width: min(760px, 95vw); }
.cropwave { position: relative; height: 150px; margin: 6px 0 12px; border-radius: 14px; background: var(--fill); border: 1px solid var(--line2); overflow: hidden; touch-action: none; cursor: crosshair; user-select: none; }
.cropwave canvas { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--accent); pointer-events: none; }
.cdim { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--panel) 72%, transparent); pointer-events: none; } .cdim-l { left: 0; } .cdim-r { right: 0; }
.ch { position: absolute; top: 0; bottom: 0; width: 14px; margin-left: -7px; cursor: ew-resize; z-index: 3; outline-offset: -2px; } .ch::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--accent); } .ch::after { content: ""; position: absolute; left: 1px; top: 50%; width: 12px; height: 34px; margin-top: -17px; border-radius: 6px; background: var(--accent); box-shadow: 0 2px 8px rgba(30,40,110,.35); } .ch.drag::after, .ch:focus-visible::after { filter: brightness(1.2); transform: scaleX(1.15); }
.cph { display: none; position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ee3f66; z-index: 2; pointer-events: none; }
#cropDlg footer { align-items: center; flex-wrap: wrap; }

/* ---------- v4.4: styled dropdowns ---------- */
.dd { position: relative; display: block; min-width: 0; width: 100%; }
.dd .dd-native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; left: 0; top: 0; }
.dd-btn { width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px 0 14px; border-radius: 12px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); font-weight: 600; font-size: 14px; text-align: left; transition: border-color .2s, box-shadow .2s, background .2s; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 14px -12px rgba(30,40,110,.5); }
.dd-btn:hover { border-color: var(--mute); background: var(--fill); } .dd-btn:focus-visible, .dd.open .dd-btn { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); outline: 0; }
.dd-btn:disabled { opacity: .5; cursor: default; } .dd-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dd-t.ph { color: var(--mute); }
.dd-btn svg { width: 16px; height: 16px; flex: none; color: var(--mute); transition: transform .25s var(--ease), color .2s; } .dd.open .dd-btn svg { transform: rotate(180deg); color: var(--accent); }
.dd-list { position: fixed; z-index: 400; margin: 0; padding: 6px; list-style: none; overflow-y: auto; border-radius: 16px; border: 1px solid var(--line2); background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 28px 60px -22px rgba(20,28,90,.55), 0 0 0 1px rgba(255,255,255,.04) inset; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top; transition: opacity .16s var(--ease), transform .2s var(--ease); }
.dd-list.up { transform-origin: bottom; transform: translateY(6px) scale(.98); } .dd-list.in { opacity: 1; transform: none; }
.dd-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--soft); cursor: pointer; white-space: nowrap; }
.dd-list li.act { background: var(--fill2); color: var(--ink); } .dd-list li[aria-selected="true"] { color: var(--accent); } .dd-list li svg { width: 16px; height: 16px; flex: none; } .dd-list li.off { opacity: .4; cursor: default; }
.lfav .dd-btn, .fsel .dd-btn, .lfav.dd .dd-btn { height: 34px; font-size: 13px; border-radius: 10px; } .dd.lfav { margin: 0 0 8px; }
.numrow .dd, .row2 .dd { width: 100%; }
@media (prefers-reduced-motion: reduce) { .dd-list { transition: none; } }

/* ---------- v4.5: Playground ---------- */
.k-my { --k: #e0527c; } .kdot.k-my { background: var(--k); }
#playground { display: flex; flex-direction: column; height: calc(100vh - 60px); height: calc(100dvh - 60px); min-height: 560px; }
.pgbar { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .pgbar .dd { width: 170px; }
.pgwork { flex: 1; min-height: 0; display: grid; grid-template-columns: 276px minmax(0, 1fr) 312px; }
.pgleft { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel); }
.pgpane { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; }
.pgltool { display: flex; gap: 6px; margin-bottom: 8px; } .pgltool .ib:first-child svg { transform: rotate(90deg); } .pgltool .ib:nth-child(2) svg { transform: rotate(-90deg); }
.pglist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lrow { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 4px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; user-select: none; position: relative; } .lrow:hover { background: var(--fill); } .lrow.sel { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .lrow.off { opacity: .5; } .lrow.dragging { opacity: .4; }
.lrow.dover::before, .lrow.dunder::after { content: ""; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 3px; background: var(--accent); } .lrow.dover::before { top: -3px; } .lrow.dunder::after { bottom: -3px; }
.lgrip { color: var(--mute); font-size: 11px; letter-spacing: -2px; cursor: grab; width: 12px; text-align: center; } .lic { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--fill2); color: var(--accent); } .lic svg { width: 15px; height: 15px; } .lic.big { width: 34px; height: 34px; border-radius: 10px; } .lic.big svg { width: 19px; height: 19px; }
.lname { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lrow .txt { height: 28px; font-size: 13px; padding: 0 8px; flex: 1; min-width: 0; }
.lbtn { width: 26px; height: 26px; border: 0; background: transparent; color: var(--mute); border-radius: 7px; display: grid; place-items: center; flex: none; } .lbtn:hover { background: var(--fill2); color: var(--ink); } .lbtn svg { width: 16px; height: 16px; } .lbtn[aria-pressed="true"] { color: var(--accent); }
.lempty { padding: 24px 8px; color: var(--mute); font-size: 13px; text-align: center; }
.pgg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .pgb { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); display: grid; place-items: center; padding: 0; color: var(--ink); transition: border-color .15s, background .15s, transform .15s; } .pgb:hover { border-color: var(--accent); background: var(--fill); transform: translateY(-1px); } .pgb img { width: 70%; height: 70%; object-fit: contain; } .pgb svg { width: 26px; height: 26px; }
.pgg.ic { grid-template-columns: repeat(5, 1fr); } .pgg.ic .pgb svg { width: 22px; height: 22px; }
.pgt { display: grid; gap: 8px; } .pgt button { text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); } .pgt button:hover { border-color: var(--accent); background: var(--fill); } .pgt small { display: block; color: var(--mute); font-size: 12px; margin-top: 2px; font-weight: 500; }
.pgcenter { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--frame); }
.pgstage { flex: 1; min-height: 120px; display: grid; place-items: center; overflow: hidden; padding: 18px; }
.pgcv { position: relative; border-radius: 6px; box-shadow: 0 30px 70px -30px rgba(10,14,50,.55), 0 0 0 1px var(--line); touch-action: none; user-select: none; background: #fff; } .pgcv.clear { background: repeating-conic-gradient(#d9ddf0 0 25%, #fff 0 50%) 0 0 / 20px 20px; } #pgCanvas { display: block; width: 100%; height: 100%; cursor: default; }
.pgsel { position: absolute; border: 1.5px solid var(--accent); pointer-events: none; z-index: 3; box-sizing: border-box; } .pgsel.locked { border-style: dashed; border-color: var(--mute); } .pgsel.locked .h, .pgsel.locked .rotk { display: none; }
.pgsel .h { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #fff; border: 1.5px solid var(--accent); border-radius: 3px; pointer-events: auto; box-shadow: 0 1px 4px rgba(0,0,0,.25); } .pgsel .h[data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; } .pgsel .h[data-h="n"] { left: 50%; top: 0; cursor: ns-resize; } .pgsel .h[data-h="ne"] { left: 100%; top: 0; cursor: nesw-resize; } .pgsel .h[data-h="e"] { left: 100%; top: 50%; cursor: ew-resize; } .pgsel .h[data-h="se"] { left: 100%; top: 100%; cursor: nwse-resize; } .pgsel .h[data-h="s"] { left: 50%; top: 100%; cursor: ns-resize; } .pgsel .h[data-h="sw"] { left: 0; top: 100%; cursor: nesw-resize; } .pgsel .h[data-h="w"] { left: 0; top: 50%; cursor: ew-resize; }
.pgsel[data-type="text"] .h[data-h="n"], .pgsel[data-type="text"] .h[data-h="s"], .pgsel[data-type="text"] .h[data-h="nw"], .pgsel[data-type="text"] .h[data-h="ne"], .pgsel[data-type="text"] .h[data-h="sw"], .pgsel[data-type="text"] .h[data-h="se"] { display: none; }
.rotk { position: absolute; left: 50%; top: -28px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 1.5px solid var(--accent); cursor: grab; pointer-events: auto; box-shadow: 0 1px 4px rgba(0,0,0,.25); } .rotk::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 14px; margin-left: -.75px; background: var(--accent); }
.pgempty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; color: var(--soft); padding: 20px; } .pgempty b { font-size: 18px; color: var(--ink); } .pgempty span { font-size: 13px; color: var(--mute); } .pgq { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.pgtport { display: flex; align-items: center; gap: 10px; padding: 8px 18px; } .pgdur { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soft); } .pgdur .txt { width: 76px; height: 34px; }
.pgtl { flex: none; height: 220px; overflow: auto; background: var(--panel); border-top: 1px solid var(--line); position: relative; }
.tlh { display: flex; position: sticky; top: 0; z-index: 5; background: var(--panel); border-bottom: 1px solid var(--line); } .tlcorner { width: 150px; flex: none; padding: 7px 12px; font: 800 11px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); position: sticky; left: 0; background: var(--panel); z-index: 2; border-right: 1px solid var(--line); }
.tlruler { position: relative; height: 28px; cursor: col-resize; touch-action: none; } .tlruler span { position: absolute; top: 0; height: 100%; padding: 8px 0 0 5px; border-left: 1px solid var(--line2); font: 600 10.5px var(--mono); color: var(--mute); pointer-events: none; }
.tlrows { position: relative; min-width: min-content; } .tlrow { display: flex; height: 32px; border-bottom: 1px solid var(--line); } .tlrow.sel { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tlname { width: 150px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 12.5px; font-weight: 600; position: sticky; left: 0; background: var(--panel); border-right: 1px solid var(--line); z-index: 2; overflow: hidden; white-space: nowrap; } .tlrow.sel .tlname { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); } .tlname .lic { width: 20px; height: 20px; } .tlname .lic svg { width: 12px; height: 12px; }
.tltrack { position: relative; flex: none; cursor: crosshair; } .tlbar { position: absolute; top: 6px; height: 20px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 38%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); cursor: grab; } .tlbar u { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; } .tlbar .bl { left: -2px; } .tlbar .br { right: -2px; }
.tkf { position: absolute; top: 11px; width: 10px; height: 10px; margin-left: -5px; background: #f0a23a; transform: rotate(45deg); border-radius: 2px; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: ew-resize; z-index: 2; } .tkf.sel { background: #ee3f66; }
.tlph { position: absolute; top: 0; bottom: 0; left: 150px; width: 0; z-index: 4; pointer-events: none; } .tlph i { position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: #ee3f66; } .tlnone { padding: 18px; color: var(--mute); font-size: 13px; }
.pgright { min-height: 0; overflow-y: auto; padding: 14px; border-left: 1px solid var(--line); background: var(--panel); }
.prow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .pnum { display: grid; gap: 5px; font-size: 12px; font-weight: 700; color: var(--mute); min-width: 0; } .pnum .txt { height: 34px; font-size: 13px; padding: 0 8px; } .pnum .txt:disabled { opacity: .5; }
.pnk { display: flex; align-items: flex-end; gap: 4px; min-width: 0; } .pnk .pnum { flex: 1; } .pnk.wide { margin-bottom: 12px; align-items: flex-end; } .pnk.wide .fld { flex: 1; margin: 0; }
.kf { width: 26px; height: 34px; flex: none; border: 0; background: transparent; color: var(--line2); font-size: 15px; border-radius: 8px; } .kf:hover { background: var(--fill2); color: var(--ink); } .kf.has { color: #f0a23a; opacity: .6; } .kf.on { color: #f0a23a; opacity: 1; background: color-mix(in srgb, #f0a23a 18%, transparent); }
.psub { margin: 14px 0 8px; font: 800 11px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); } .lname-in { flex: 1; min-width: 0; height: 36px; font-weight: 700; }
.pcol .lb { display: flex; justify-content: space-between; align-items: center; } .pcol .clr.dis { opacity: .45; } .mini { display: inline-flex; } .mini input { accent-color: var(--accent); width: 16px; height: 16px; }
@media (max-width: 1320px) { .pgwork { grid-template-columns: 236px minmax(0, 1fr) 284px; } }
@media (max-width: 1000px) {
  #playground { height: auto; min-height: 0; } .pgwork { display: flex; flex-direction: column; } .pgcenter { order: 1; } .pgstage { min-height: 280px; } .pgleft { order: 3; border-right: 0; border-top: 1px solid var(--line); } .pgright { order: 2; border-left: 0; border-top: 1px solid var(--line); } .pgpane { max-height: 380px; } .pgtl { height: 200px; } .pgbar .dd { width: 100%; } .pgbar .pname { width: 100%; order: -1; }
}

.pgtport { flex-wrap: wrap; } .pgtport .time { min-width: 0; } @media (max-width: 1000px) { .pgtport .grow { display: none; } .pgdur { margin-left: auto; } }

/* ---------- v4.6: Playground collections, multi-select, grid, keyframe rows ---------- */
.pgnote { margin: 0 0 8px; font-size: 11.5px; }
.lrow.folder { background: var(--fill); font-weight: 700; } .lrow.folder.sel { background: color-mix(in srgb, var(--accent) 14%, transparent); } .lrow.folder .lname small { margin-left: 8px; font-weight: 600; color: var(--mute); font-size: 11px; } .lrow.folder .lic { color: #f0a23a; }
.lrow.infold { margin-left: 16px; position: relative; } .lrow.infold::before { content: ""; position: absolute; left: -9px; top: -2px; bottom: 50%; width: 8px; border-left: 1.5px solid var(--line2); border-bottom: 1.5px solid var(--line2); border-radius: 0 0 0 6px; }
.lrow.dinto { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: 2px dashed var(--accent); outline-offset: -2px; }
.lbtn.caret svg { transition: transform .2s var(--ease); } .lbtn.caret.open svg { transform: rotate(90deg); }
.pgsel.multi { border-color: var(--accent); border-style: solid; opacity: .85; } .pgsel.multi::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pgmarq { position: absolute; z-index: 4; border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; border-radius: 2px; }
.pggridov { position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: linear-gradient(to right, rgba(74,99,240,.28) 1px, transparent 1px), linear-gradient(to bottom, rgba(74,99,240,.28) 1px, transparent 1px); }
.pggo { display: inline-flex; align-items: center; gap: 8px; } .pggo .dd { width: 96px; } .pggo .dd-btn { height: 34px; font-size: 13px; padding: 0 10px; } .snaplab { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--soft); cursor: pointer; } .snaplab input { accent-color: var(--accent); width: 16px; height: 16px; }
.pgtlbar { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-top: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; } .pgtlbar .btn { gap: 7px; } .kfd { color: #f0a23a; margin-right: 8px; font-size: 13px; } .pgtlbar .kfd { margin: 0; } .pgtlbar .cv { width: 14px; height: 14px; color: var(--mute); margin-left: 2px; } .pgtlbar .btn:disabled { opacity: .4; }
.tzl { font-size: 12.5px; color: var(--mute); font-weight: 600; } .pgtlbar input[type=range] { width: 130px; }
.pgmenu { position: fixed; z-index: 500; min-width: 250px; max-width: 340px; padding: 6px; border-radius: 14px; border: 1px solid var(--line2); background: color-mix(in srgb, var(--panel) 96%, transparent); backdrop-filter: blur(14px); box-shadow: 0 28px 60px -22px rgba(20,28,90,.55); display: grid; gap: 1px; animation: pgm .16s var(--ease); } @keyframes pgm { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.pgmenu button { display: flex; align-items: center; text-align: left; gap: 8px; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font-size: 13.5px; font-weight: 600; } .pgmenu button:hover:not(:disabled), .pgmenu button:focus-visible { background: var(--fill2); } .pgmenu button:disabled { opacity: .4; cursor: default; } .pgmenu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; } .pgmenu .mh { padding: 6px 12px 4px; font: 800 11px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.tlcaret { width: 20px; height: 20px; flex: none; border: 0; background: transparent; color: var(--mute); border-radius: 5px; display: grid; place-items: center; padding: 0; } .tlcaret:hover { background: var(--fill2); color: var(--ink); } .tlcaret svg { width: 14px; height: 14px; transition: transform .2s var(--ease); } .tlcaret.open svg { transform: rotate(90deg); } .tlnocaret { width: 20px; flex: none; }
.tlnm { overflow: hidden; text-overflow: ellipsis; } .tlrow.sub { height: 26px; background: color-mix(in srgb, var(--fill) 60%, transparent); } .tlrow.sub .tlname { padding-left: 38px; font-weight: 600; color: var(--soft); font-size: 12px; } .sublab::before { content: "◆"; color: #f0a23a; font-size: 8px; margin-right: 7px; } .tlrow.sub .tkf { top: 8px; }
.subline { position: absolute; top: 12px; height: 2px; background: color-mix(in srgb, #f0a23a 55%, transparent); border-radius: 2px; } .tlruler .mi { width: 0; border-left: 1px solid var(--line); padding: 0; height: 8px; top: auto; bottom: 0; } .tkf.sel { box-shadow: 0 0 0 2px #ee3f66, 0 1px 3px rgba(0,0,0,.35); }
.palign { display: flex; gap: 4px; margin-bottom: 12px; } .palign .ib { flex: 1; width: auto; } .palign svg { width: 17px; height: 17px; }
@media (max-width: 1000px) { .pgtlbar { padding: 8px 12px; } .pgtlbar input[type=range] { width: 90px; } .pgtport { gap: 6px; } }

/* animation presets drawn on the timeline bars */
.tlbar { overflow: hidden; } .tlbar .pa { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: #fff; overflow: hidden; white-space: nowrap; pointer-events: none; border-radius: 6px; } .tlbar .pa b { overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.pa.in { background: #1fb89a; z-index: 2; } .pa.out { background: #e0527c; z-index: 2; } .pa.loop { background: repeating-linear-gradient(135deg, rgba(138,86,224,.55) 0 6px, rgba(138,86,224,.3) 6px 12px); z-index: 1; justify-content: center; color: #4a2c8a; } :root[data-theme="dark"] .pa.loop { color: #e4d6ff; }
.tlbar u { z-index: 3; }
.tllegend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--soft); margin-left: 6px; } .tllegend .lg { width: 14px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 6px; } .tllegend .lg.in { background: #1fb89a; } .tllegend .lg.out { background: #e0527c; } .tllegend .lg.loop { background: repeating-linear-gradient(135deg, rgba(138,86,224,.7) 0 3px, rgba(138,86,224,.35) 3px 6px); } .tllegend .lg.kf { width: auto; height: auto; background: none; color: #f0a23a; font-size: 12px; margin-left: 8px; font-style: normal; }
@media (max-width: 1100px) { .tllegend { display: none; } }

.mrow .ib.sm { text-decoration: none; color: inherit; } .mth.cr { background-color: var(--fill2); }

/* ---------- v4.7: folder tiles ---------- */
.fbar { margin: 18px 0 6px; } .fbar[hidden] { display: none; }
.ftiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.ftile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); text-align: left; color: var(--ink); cursor: pointer; font: inherit; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease), background .2s; }
.ftile:hover { transform: translateY(-2px); border-color: var(--line2); box-shadow: var(--shadow-hover); }
.ftile .fic { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, #f0a23a 16%, transparent); color: #e0912f; } .ftile .fic svg { width: 25px; height: 25px; }
.ftile.all .fic { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .ftile.none .fic { background: var(--fill2); color: var(--mute); }
.ftile .fnm { min-width: 0; display: grid; } .ftile .fnm b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ftile .fnm small { color: var(--mute); font-size: 12.5px; font-weight: 500; }
.ftile.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ftile.over { outline: 2px dashed var(--accent); outline-offset: 2px; background: var(--fill2); }
.ftile.fnew { border-style: dashed; background: transparent; } .ftile.fnew .fic { background: var(--fill2); color: var(--accent); }
.fhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 2px 4px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; } .fcur { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--soft); } .fcur svg { width: 20px; height: 20px; color: #e0912f; } .fcur b { color: var(--ink); font-size: 16px; } .fhead .fops { display: inline-flex; gap: 4px; margin: 0; }
#mBar { margin-bottom: 20px; } #fBar { margin-bottom: 18px; }
.mfs { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 8px; padding: 2px 12px 8px; font-size: 12.5px; color: var(--soft); font-weight: 600; } .mfs .dd-btn { height: 34px; font-size: 13px; border-radius: 10px; }
.pcard[draggable="true"] { cursor: grab; }

/* ---------- v4.8: project picker, push toggle, effect layers ---------- */
.plist { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; margin: 8px 0 4px; }
.prow2 { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); text-align: left; color: var(--ink); transition: border-color .15s, background .15s, transform .15s; } .prow2:hover, .prow2:focus-visible { border-color: var(--accent); background: var(--fill); transform: translateY(-1px); }
.pth2 { width: 84px; height: 48px; flex: none; border-radius: 9px; background: var(--fill2) center / cover; display: grid; place-items: center; font-size: 24px; color: var(--accent); } .prow2.new { border-style: dashed; } .pi { min-width: 0; display: grid; } .pi b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pi small { color: var(--mute); font-size: 12.5px; }
.pushl { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin-right: 14px; color: var(--soft); } .pushl input { accent-color: var(--accent); width: 16px; height: 16px; }
.pgfx { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } .pgfx button { display: grid; gap: 4px; padding: 0 0 6px; text-align: left; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); overflow: hidden; color: var(--ink); } .pgfx button:hover { border-color: var(--accent); transform: translateY(-1px); } .pgfx img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--fill); } .pgfx span { padding: 0 8px; font-size: 12px; font-weight: 700; line-height: 1.25; }
#eCustom { white-space: nowrap; }

/* preset collections (ready-made graphics opened in the Playground) */
.lrow.folder.preset { background: color-mix(in srgb, #8a56e0 10%, transparent); } .lrow.folder.preset .lic { color: #8a56e0; background: color-mix(in srgb, #8a56e0 16%, transparent); } .pbadge { font-style: normal; margin-left: 8px; padding: 2px 7px; border-radius: 999px; font: 800 9.5px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #8a56e0; vertical-align: 2px; }
.lyr { font-style: normal; display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font: 800 9px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #8a56e0; vertical-align: 1px; }

/* ---------- v4.10 ---------- */
.clip.bad { outline: 2px dashed #ee3f66; outline-offset: -2px; }
.stepper { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--soft); } .stepper span { flex: 1; } .stepper button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line2); background: var(--panel); font-size: 17px; line-height: 1; color: var(--ink); } .stepper button:hover { border-color: var(--accent); background: var(--fill); } .stepper output { min-width: 22px; text-align: center; font: 700 13px var(--mono); color: var(--ink); }
#pal button.pdef { grid-column: auto; display: flex; align-items: center; gap: 0; position: relative; padding-right: 0; } #pal button.pdef em { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 0 10px; color: var(--ink); white-space: nowrap; }

/* v4.11: limits on item counts, calmer cards */
.stepper small.lim { color: var(--mute); font-weight: 600; margin-left: 6px; font-size: 11.5px; } .stepper output.over { color: #e0527c; } .stepper button:disabled { opacity: .35; cursor: default; }
.card .num, .card .uses { opacity: 0; transition: opacity .25s var(--ease); } .card:hover .num, .card:hover .uses, .card:focus-visible .num, .card:focus-visible .uses { opacity: 1; }

/* form-style list fields */
.lf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 10px}
.lf-title{font-weight:600;font-size:13px}.lf-title .lim{font-weight:500;color:var(--mute,#6b7090);margin-left:6px}
.lf-add{white-space:nowrap}.lf-add svg{width:14px;height:14px}
.lf-rows{display:flex;flex-direction:column;gap:10px}
.lf-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:start;gap:8px;padding:10px;border:1px solid var(--line,#e3e5f1);border-radius:14px;background:var(--panel,#fff)}
.lf-row:not(:has(.lf-ic)){grid-template-columns:auto minmax(0,1fr) auto}
.lf-row.off{opacity:.45}
.lf-n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:rgba(80,100,240,.1);color:#4a63f0;margin-top:8px}
.lf-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.lf-f .txt{width:100%;box-sizing:border-box;font-size:13px;padding:8px 10px}
.lf-f textarea.txt{resize:vertical;min-height:52px;line-height:1.35}
.lf-x{margin-top:2px}.lf-x:disabled{opacity:.3;cursor:not-allowed}
.lf-ic{position:relative;width:46px;height:46px;border-radius:12px;border:1px solid var(--line,#e3e5f1);background:rgba(80,100,240,.07);color:var(--ink,#1b1d33);cursor:pointer;display:grid;place-items:center;padding:0}
.lf-ic:hover{border-color:#4a63f0}.lf-ic canvas{display:block;color:inherit}
.lf-ic i{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);font-style:normal;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--panel,#fff);color:var(--mute,#6b7090);border:1px solid var(--line,#e3e5f1);border-radius:8px;padding:0 5px}
.lf-ic i:empty{display:none}
.lf-pop{position:fixed;z-index:1000;max-height:360px;overflow:auto;background:var(--panel,#fff);color:var(--ink,#1b1d33);border:1px solid var(--line,#e3e5f1);border-radius:14px;box-shadow:0 18px 50px rgba(20,24,60,.22);padding:10px;display:flex;flex-direction:column;gap:8px}
.lf-pop .lf-find{width:100%;box-sizing:border-box}
.lf-auto{border:1px dashed var(--line,#cfd3ea);background:none;color:inherit;border-radius:10px;padding:7px 10px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;text-align:left}
.lf-auto.on,.lf-auto:hover{border-color:#4a63f0;color:#4a63f0}
.lf-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.lf-grid button{aspect-ratio:1;border:1px solid transparent;border-radius:10px;background:none;color:inherit;cursor:pointer;display:grid;place-items:center;padding:0}
.lf-grid button:hover{background:rgba(80,100,240,.1)}.lf-grid button.on{border-color:#4a63f0;background:rgba(80,100,240,.14)}
.lf-grid canvas{display:block;color:inherit}.lf-none{grid-column:1/-1;margin:6px 0;font-size:12px;color:var(--mute,#6b7090)}
.lf-ser{grid-template-columns:auto minmax(0,1fr) auto}.lf-ser .lf-f{flex-direction:row;gap:8px}.lf-ser .lf-l{flex:1 1 auto;min-width:0}.lf-ser .lf-v{flex:0 0 96px;width:96px;text-align:right}.lf-ser .lf-n,.lf-ser .lf-x{align-self:center;margin-top:0}

/* backup card */
.dcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:center;padding:20px 22px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.dtext b{font-size:16px}.dtext p{margin:6px 0 8px;color:var(--soft);font-size:14px;line-height:1.5;max-width:62ch}.dtext small{color:var(--mute);font-size:12.5px}
.dbtns{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.dbtns .btn svg{width:16px;height:16px}
.dst{grid-column:1/-1;margin:0;min-height:0;font-size:13px;color:var(--mute)}.dst:empty{display:none}
@media (max-width:700px){.dcard{grid-template-columns:1fr}.dbtns{justify-content:flex-start}}

/* docs */
.dwrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:34px;max-width:1180px;margin:0 auto;padding:28px 28px 60px}
.dnav{position:sticky;top:20px;align-self:start;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 40px)}
.dsearch{display:flex;align-items:center;gap:8px;padding:0 12px;height:42px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.dsearch svg{width:16px;height:16px;flex:none;color:var(--mute)}.dsearch input{border:0;outline:0;background:none;color:var(--ink);font:inherit;font-size:14px;min-width:0;width:100%}.dsearch:focus-within{border-color:var(--accent)}
#dList{display:flex;flex-direction:column;gap:2px;overflow:auto}#dList a{padding:9px 12px;border-radius:10px;color:var(--soft);font-size:14px;font-weight:600;text-decoration:none}#dList a:hover{background:var(--line)}#dList a.on{background:rgba(74,99,240,.12);color:var(--accent)}
.dhead h1{font:400 44px/1.05 var(--serif);margin:4px 0 8px;letter-spacing:-.01em}.dhead p:not(.eyebrow){color:var(--soft);max-width:60ch;margin:0 0 8px;font-size:16px;line-height:1.55}
.dsec{padding:26px 0 8px;border-top:1px solid var(--line);margin-top:22px;scroll-margin-top:16px}.dsec h2{font-size:26px;margin:0 0 4px;letter-spacing:-.01em}.dsum{margin:0 0 14px;color:var(--mute);font-size:15px}
.dsec h3{font-size:16px;margin:22px 0 8px}.dsec p,.dsec li,.dsec dd{color:var(--soft);line-height:1.62;font-size:15px}.dsec p{margin:0 0 10px;max-width:74ch}.dsec ul,.dsec ol{margin:0 0 12px;padding-left:22px;max-width:74ch}.dsec li{margin:5px 0}.dsec li b,.dsec dt,.dsec td:first-child{color:var(--ink)}
.dsec a{color:var(--accent);font-weight:600}.dsec code{font:600 13px var(--mono,ui-monospace,monospace);background:var(--line);padding:2px 6px;border-radius:6px;color:var(--ink)}
.dsec kbd{font:600 12px var(--mono,ui-monospace,monospace);padding:2px 7px;border:1px solid var(--line2,var(--line));border-bottom-width:2px;border-radius:7px;background:var(--panel);color:var(--ink)}
.steps{list-style:none;padding:0!important;counter-reset:st}.steps li{position:relative;padding:12px 14px 12px 52px;margin:8px 0;border:1px solid var(--line);border-radius:14px;background:var(--panel);counter-increment:st}.steps li:before{content:counter(st);position:absolute;left:14px;top:12px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;background:var(--accent)}
.tip{margin:14px 0;padding:14px 16px;border-radius:14px;border:1px solid rgba(74,99,240,.25);background:rgba(74,99,240,.07);color:var(--soft);font-size:14.5px;line-height:1.55;max-width:74ch}.tip b{display:block;color:var(--ink);margin-bottom:2px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:10px 0 6px}.dgrid>div{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.dgrid b{display:block;margin-bottom:4px;color:var(--ink)}.dgrid span{font-size:13.5px;color:var(--soft);line-height:1.5}
.dtable{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:14.5px;max-width:78ch}.dtable th,.dtable td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--soft)}.dtable th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}.dtable td:first-child{white-space:nowrap}
.dcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}.faq dt{font-weight:700;margin-top:16px;font-size:15.5px}.faq dd{margin:4px 0 0;max-width:74ch}.dnone{color:var(--mute)}
@media (max-width:900px){.dwrap{grid-template-columns:1fr;gap:14px;padding:16px 16px 90px}.dnav{position:sticky;top:0;z-index:5;background:var(--bg,var(--panel));padding:8px 0;max-height:none;margin:0 -4px}#dList{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:none}#dList a{white-space:nowrap;border:1px solid var(--line);flex:none}.dhead h1{font-size:34px}.dcols{grid-template-columns:1fr}.dtable td:first-child{white-space:normal}}
.dwrap>*{min-width:0}.dbody{overflow-wrap:anywhere}.dtable{display:block;overflow-x:auto}
@media (max-width:900px){.dsec{scroll-margin-top:84px}}

/* phones and small tablets: the preview needs its own height, and six menu items must fit */
@media (max-width:1000px){.pvwrap{flex:none;width:100%;aspect-ratio:var(--ar,16/9);max-height:56vh}}
@media (max-width:480px){.side .nv{min-width:0;padding-left:2px;padding-right:2px}.side .nv span{font-size:10.5px;letter-spacing:-.01em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media (max-width:480px){.side .nv span{font-size:10px;letter-spacing:-.02em}}

/* docs screenshots */
.shot{margin:14px 0 20px;max-width:900px}.shot a{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 44px -26px rgba(20,28,80,.45);background:var(--panel);cursor:zoom-in}.shot img{display:block;width:100%;height:auto}
.shot figcaption ol{list-style:none;counter-reset:lg;margin:10px 0 0;padding:0!important;display:grid;gap:6px;max-width:none}.shot figcaption li{counter-increment:lg;position:relative;padding-left:34px;font-size:14.5px;line-height:1.5;margin:0}
.shot figcaption li:before{content:counter(lg);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:#ff3d6e;color:#fff;font:800 13px/24px var(--ui,system-ui);text-align:center}
.figlead{margin:22px 0 4px!important;font-size:16px!important;color:var(--ink)!important}
#dZoom{position:fixed;inset:0;z-index:300;background:rgba(10,12,30,.82);display:grid;place-items:center;padding:24px;cursor:zoom-out}#dZoom img{max-width:min(96vw,1500px);max-height:92vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}#dZoom button{position:absolute;top:14px;right:18px;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:#111;font-size:26px;cursor:pointer}
@media (max-width:700px){.shot figcaption li{font-size:14px}.figlead{margin-top:18px!important}}

/* selection outline on the preview */
.selbox{position:absolute;z-index:3;pointer-events:none;border:2px solid var(--accent);border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 0 5px rgba(74,99,240,.16)}.selbox[hidden]{display:none}.selbox.off{border-style:dashed;opacity:.75}
.selbox i{position:absolute;width:10px;height:10px;background:#fff;border:2px solid var(--accent);border-radius:3px}.selbox i:nth-child(1){left:-6px;top:-6px}.selbox i:nth-child(2){right:-6px;top:-6px}.selbox i:nth-child(3){left:-6px;bottom:-6px}.selbox i:nth-child(4){right:-6px;bottom:-6px}
.selbox span{position:absolute;left:-2px;top:-30px;max-width:calc(100% + 4px);padding:3px 10px;border-radius:999px;background:var(--accent);color:#fff;font:700 12px/1.4 var(--ui,system-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selbox.in span{top:8px;left:8px}

/* colour field and picker */
.cf{display:flex;align-items:center;gap:8px}.cf-sw{position:relative;flex:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line2,var(--line));padding:0;cursor:pointer;overflow:hidden;background:var(--cf-check)}.cf-sw i{position:absolute;inset:0;display:block}.cf-sw:hover{border-color:var(--accent)}
.cf-t{flex:1 1 auto;min-width:0;height:42px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:600 13px var(--mono,ui-monospace,monospace);text-transform:lowercase}.cf-t:focus,.cf-op:focus{outline:2px solid var(--accent);outline-offset:1px}
.cf-o{display:flex;align-items:center;gap:4px;flex:none;height:42px;padding:0 10px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--mute);font-size:13px}.cf-op{width:40px;border:0;background:none;color:var(--ink);font:600 13px var(--mono,ui-monospace,monospace);text-align:right;padding:0;-moz-appearance:textfield}.cf-op::-webkit-outer-spin-button,.cf-op::-webkit-inner-spin-button{display:none}
:root{--cf-check:conic-gradient(#d9dcea 25%,#fff 0 50%,#d9dcea 0 75%,#fff 0) 0 0/12px 12px}
.cf-pop{position:fixed;z-index:1000;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--ink);box-shadow:0 22px 60px rgba(20,24,60,.28);display:flex;flex-direction:column;gap:12px}
.cf-sv{position:relative;width:100%;aspect-ratio:232/150;border-radius:10px;overflow:hidden;cursor:crosshair;touch-action:none;outline-offset:2px}.cf-sv canvas{display:block;width:100%;height:100%}.cf-sv:focus-visible{outline:2px solid var(--accent)}.cf-sv i{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);pointer-events:none}
.cf-sl{display:grid;gap:8px}.cf-sl label{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--mute)}
.cf-sl input[type=range]{-webkit-appearance:none;appearance:none;height:14px;border-radius:7px;outline-offset:3px;margin:0;width:100%}.cf-hue{background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}.cf-al{background:var(--cf-check)}
.cf-sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.3)}.cf-sl input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--accent)}
.cf-in{display:flex;align-items:flex-end;gap:8px}.cf-in label{display:grid;gap:3px;font-size:11.5px;font-weight:700;color:var(--mute)}.cf-in label:first-child{flex:1}.cf-in input{height:36px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);padding:0 10px;font:600 13px var(--mono,ui-monospace,monospace);width:100%;box-sizing:border-box}.cf-in label:nth-child(2){width:92px}.cf-eye{width:36px;height:36px;padding:0;display:grid;place-items:center}.cf-eye svg{width:18px;height:18px}
.cf-grp b{display:block;font-size:11.5px;color:var(--mute);margin-bottom:6px;font-weight:700}.cf-grp>div{display:flex;flex-wrap:wrap;gap:6px}.cf-chip{width:26px;height:26px;border-radius:8px;border:1px solid rgba(0,0,0,.14);background:linear-gradient(var(--c),var(--c)),var(--cf-check);cursor:pointer;padding:0}.cf-chip:hover{transform:scale(1.12);box-shadow:0 0 0 2px var(--accent)}

.cf-pop .cf-hue{background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)!important}

.cfw.dis{opacity:.45}.cfw.dis .cf-sw,.cfw.dis .cf-t,.cfw.dis .cf-o{pointer-events:none}

/* project file dialog, backup labels, colour field fit */
.fileopts{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}.fileopts .btn svg{width:15px;height:15px}.fnote{margin-top:8px}.opt{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:2px 8px;margin-left:8px;vertical-align:middle}
.dtag{display:inline-block;margin-left:10px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:rgba(74,99,240,.12);border-radius:999px;padding:3px 9px;vertical-align:middle}.dtext .dsub{margin-top:0;font-size:13.5px;color:var(--mute)}
.cf-t{width:0}.cf-o{padding:0 8px}.cf-op{width:34px}

.dtext p b{font-size:inherit}

/* v4.23: Studio library tabs (Templates, Media, Effects, Sounds, Music), filters, own-effect card */
.ltabs { padding: 8px 6px 0; gap: 0; } .ltabs button { flex-direction: column; gap: 3px; height: 52px; padding: 0 1px; font-size: 11px; letter-spacing: -.01em; min-width: 0; justify-content: center; } .ltabs button svg { width: 18px; height: 18px; } .ltabs button span { line-height: 1; }
.chips2 button em { font-style: normal; font-weight: 700; font-size: 11px; opacity: .55; margin-left: 6px; } .chips2 button[aria-pressed="true"] em { opacity: .75; }
.lnone { margin: 14px 2px; }
.lcard.lnew { align-content: center; justify-items: center; text-align: center; min-height: 112px; padding: 12px 8px; border-style: dashed; color: var(--ink); text-decoration: none; background: var(--fill); grid-column: 1 / -1; grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 12px; row-gap: 2px; min-height: 0; } .lcard.lnew i { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--fill2); color: var(--accent); } .lcard.lnew i svg { width: 20px; height: 20px; } .lcard.lnew span { padding: 0; align-self: end; } .lcard.lnew small { color: var(--mute); font-size: 11.5px; font-weight: 600; align-self: start; }
.lcard.cr { position: relative; padding: 0; } .lcard.cr .lpick { display: grid; gap: 6px; width: 100%; padding: 0 0 8px; border: 0; background: none; text-align: left; color: inherit; } .lcard.cr .lpick img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--fill); } .lcard.cr .lpick span { padding: 0 9px; font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.ledit { position: absolute; top: 6px; right: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--badge); color: var(--badge-ink); font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; text-decoration: none; opacity: 0; transition: opacity .15s; } .lcard.cr:hover .ledit, .ledit:focus-visible { opacity: 1; }
.own svg { color: var(--accent); }
/* v4.24: sticky filters, folded chip rows, featured Create effect */
.lhead { position: sticky; top: -12px; z-index: 4; margin: -12px -12px 10px; padding: 12px 12px 2px; background: var(--panel); box-shadow: 0 8px 10px -10px rgba(20,26,70,.35); } .lhead .chips2 { margin-bottom: 8px; } .lhead .search.lsq { margin-bottom: 8px; } .lhead .lfav { margin-bottom: 10px; } .lhead.openhead { position: static; }
.chips2.fold { max-height: 68px; overflow: hidden; transition: max-height .2s var(--ease); } .chips2.fold.open { max-height: 400px; }
.lmore { display: block; margin: -2px 0 8px; padding: 2px 4px; border: 0; background: none; color: var(--accent); font: 700 12px var(--ui); } .lmore:hover { text-decoration: underline; }
.nv.mk { position: relative; height: 44px; margin: 2px 0 0; color: #fff; background: var(--grad); box-shadow: 0 8px 20px -8px rgba(98,92,240,.7); font-weight: 800; } .nv.mk:hover { color: #fff; background: var(--grad); filter: brightness(1.06); transform: translateY(-1px); } .nv.mk.on { color: #fff; background: var(--grad); box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); } .nv.mk svg { color: #fff; } .nv.mk i { margin-left: auto; font: 800 10px var(--ui); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.25); }
.lcard.lnew { position: relative; color: #fff; border: 0; background: var(--grad); box-shadow: 0 10px 22px -12px rgba(98,92,240,.8); } .lcard.lnew:hover { transform: translateY(-2px); filter: brightness(1.05); } .lcard.lnew i { background: rgba(255,255,255,.22); color: #fff; } .lcard.lnew span { font-size: 14px; font-weight: 800; } .lcard.lnew small { color: rgba(255,255,255,.85); } .lcard.lnew em { position: absolute; top: 8px; right: 8px; font: 800 9.5px var(--ui); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.25); }
@media (min-width: 1001px) and (max-width: 1400px) { .nv.mk i { display: none; } }
.lrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; min-height: 36px; } .lrow .lmore { margin: 0; flex: none; } .lrow .dd.lfav, .lrow .lfav { margin: 0; flex: 1 1 auto; max-width: 58%; margin-left: auto; }
.lhead .lrow .lfav { margin-bottom: 0; }
.side .navg.mobonly { display: none; }
@media (max-width: 1000px) { .side .navg.mkg { width: auto !important; flex: 1; } .side .nv.mk { background: none; box-shadow: none; color: var(--accent); height: auto; margin: 0; filter: none; transform: none; } .side .nv.mk:hover, .side .nv.mk.on { background: var(--fill2); color: var(--ink); box-shadow: none; filter: none; } .side .nv.mk svg { color: var(--accent); } .side .nv.mk i { display: none; } .side .navg.mobonly { display: flex !important; width: auto !important; flex: 1; } }
@media (max-width: 1000px) { .side .navg:not(.pins):not(.fxnav) { display: contents !important; } }

/* v4.25: Home visual, clearer menu groups, animated Create effect, starter cards */
.side .navh { margin: 14px 12px 6px; padding-top: 14px; border-top: 1px solid var(--line2); color: var(--soft); }
.nv.mk { height: 56px; overflow: hidden; background-size: 220% 220%; animation: mkflow 7s ease-in-out infinite; } .nv.mk span { display: flex; flex-direction: column; line-height: 1.15; } .nv.mk small { font: 600 11px var(--ui); opacity: .88; margin-top: 2px; letter-spacing: 0; }
.nv.mk svg { width: 32px; height: 32px; padding: 6px; border-radius: 11px; background: rgba(255,255,255,.22); transition: transform .4s var(--ease); } .nv.mk:hover svg { transform: rotate(90deg) scale(1.06); }
.nv.mk::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%); transform: translateX(-130%); animation: mkshine 5.5s ease-in-out infinite; pointer-events: none; }
@keyframes mkflow { 50% { background-position: 100% 60%; } } @keyframes mkshine { 0%, 65% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.lcard.lnew { overflow: hidden; background-size: 220% 220%; animation: mkflow 7s ease-in-out infinite; } .lcard.lnew i svg { transition: transform .4s var(--ease); } .lcard.lnew:hover i svg { transform: rotate(90deg); }
.lcard.lnew::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.3) 50%, transparent 65%); transform: translateX(-130%); animation: mkshine 5.5s ease-in-out infinite; pointer-events: none; }
@media (max-width: 1000px) { .side .nv.mk small { display: none; } .side .nv.mk { height: auto; animation: none; } .side .nv.mk::after { display: none; } .side .nv.mk svg { width: 20px; height: 20px; padding: 0; background: none; } }
@media (min-width: 1001px) and (max-width: 1400px) { .nv.mk { height: 48px; } .nv.mk svg { margin: 0 auto; } }
.hhero { position: relative; isolation: isolate; }
.hhero::before { content: ""; position: absolute; inset: -30px -8% auto; height: 560px; z-index: -1; pointer-events: none; background: radial-gradient(40% 48% at 18% 32%, rgba(91,125,255,.22), transparent 70%), radial-gradient(34% 44% at 82% 18%, rgba(255,107,196,.17), transparent 70%), radial-gradient(40% 50% at 56% 88%, rgba(154,107,255,.15), transparent 70%); animation: hglow 16s ease-in-out infinite alternate; }
@keyframes hglow { to { transform: translate3d(2%, 4%, 0) scale(1.06); } }
.hshow { margin: 40px -32px 8px; padding: 10px 0 26px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.hshow-track { display: flex; gap: 16px; width: max-content; animation: hmarq 80s linear infinite; } .hshow:hover .hshow-track { animation-play-state: paused; }
.hshow img { width: 248px; height: 140px; flex: none; object-fit: cover; border-radius: 16px; background: var(--fill); border: 1px solid var(--line); box-shadow: 0 16px 30px -18px rgba(30,40,110,.5); } .hshow img:nth-child(3n+2) { margin-top: 20px; } .hshow img:nth-child(3n) { margin-top: 8px; }
@keyframes hmarq { to { transform: translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) { .hshow-track, .hhero::before, .nv.mk, .nv.mk::after, .lcard.lnew, .lcard.lnew::after { animation: none; } }
#pgQuick { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 10px; justify-content: center; margin-top: 14px; }
.pgq-card { display: grid; gap: 3px; text-align: left; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 14px; background: var(--panel); color: var(--ink); transition: .2s var(--ease); } .pgq-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(60,70,160,.55); } .pgq-card b { font-size: 13.5px; } .pgq-card span { font-size: 11.5px; color: var(--mute); font-weight: 500; }

/* v4.26: workspace tabs (iOS style: a soft capsule with a raised pill under the open tab), full screen video */
.wtabs { position: relative; z-index: 6; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 20px; height: 56px; border-bottom: 1px solid var(--line); background: var(--bg); }
.wt-cap { display: inline-flex; align-items: baseline; gap: 6px; font: 700 10.5px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-right: 2px; } .wt-cap b { color: var(--soft); font: 700 10.5px var(--ui); letter-spacing: 0; }
.wt-list { display: flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; padding: 3px; border-radius: 15px; background: var(--fill2); overflow-x: auto; scrollbar-width: none; } .wt-list::-webkit-scrollbar { display: none; }
.wt { --a: #4a63f0; position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 176px; min-width: 104px; max-width: 220px; height: 32px; padding: 0 6px 0 11px; border-radius: 12px; color: var(--soft); font: 600 13px var(--ui); text-decoration: none; white-space: nowrap; transition: background .25s var(--ease), color .2s, box-shadow .25s var(--ease), transform .2s var(--ease); }
.wt.ke { --a: #a05cf0; }
.wt:hover { color: var(--ink); background: color-mix(in srgb, var(--panel) 45%, transparent); } .wt:active { transform: scale(.975); }
.wt.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 1px rgba(20,26,70,.08), 0 6px 14px -6px rgba(20,26,70,.3), 0 0 0 .5px rgba(20,26,70,.08); }
.wt-ic { display: grid; place-items: center; font-style: normal; color: inherit; } .wt-ic svg { width: 15px; height: 15px; opacity: .7; } .wt.on .wt-ic { color: var(--a); } .wt.on .wt-ic svg { opacity: 1; }
.wt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wt-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #ff9f0a; box-shadow: 0 0 0 2px color-mix(in srgb, #ff9f0a 25%, transparent); }
.wt-x { width: 18px; height: 18px; flex: none; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 13px; line-height: 1; opacity: 0; display: grid; place-items: center; padding: 0; transition: opacity .15s, background .15s; } .wt:hover .wt-x, .wt.on .wt-x, .wt-x:focus-visible { opacity: .6; } .wt-x:hover { opacity: 1; background: var(--fill2); }
.wt.pop { animation: wtpop .38s cubic-bezier(.34, 1.56, .64, 1); } @keyframes wtpop { from { opacity: 0; transform: scale(.82); } }
.wt-new { flex: none; display: inline-flex; align-items: center; gap: 0; height: 32px; padding: 0; border-radius: 16px; background: var(--fill2); color: var(--soft); text-decoration: none; font: 600 13px var(--ui); overflow: hidden; transition: background .2s, color .2s, padding .25s var(--ease), gap .25s var(--ease); } .wt-new b { width: 32px; height: 32px; display: grid; place-items: center; font-size: 19px; font-weight: 500; line-height: 1; transition: transform .3s var(--ease); } .wt-new em { font-style: normal; max-width: 0; opacity: 0; white-space: nowrap; transition: max-width .3s var(--ease), opacity .2s, padding .3s; }
.wt-new:hover { background: var(--accent); color: #fff; } .wt-new:hover em { max-width: 110px; opacity: 1; padding-right: 14px; } .wt-new:hover b { transform: rotate(90deg); }
@media (max-width: 1000px) { .wtabs { padding: 0 12px; gap: 8px; height: 50px; } .wt-cap { display: none; } .wt { min-width: 92px; flex-basis: 140px; } }
@media (prefers-reduced-motion: reduce) { .wt.pop { animation: none; } }
.pvwrap:fullscreen { width: 100vw; height: 100vh; background: #000; } .pvwrap:fullscreen #sCanvas { width: 100vw; height: 100vh; max-width: none; max-height: none; object-fit: contain; border-radius: 0; box-shadow: none; }
.stage:fullscreen, #stage:fullscreen { background: #000; display: grid; place-items: center; } #stage:fullscreen canvas { width: 100vw; height: 100vh; max-width: none; max-height: none; object-fit: contain; }

/* v4.29: red filled hearts, slimmer timeline (audio lanes slimmer than picture lanes), compact library header */
.fav[aria-pressed="true"] { --hf: currentColor; } .fav svg { transition: transform .2s var(--ease); } .fav[aria-pressed="true"] svg { transform: scale(1.06); }
:root { --lane: 34px; --lane-s: 24px; }
.tl { height: clamp(226px, 31vh, 258px); }
.lanes-h { padding-top: 24px; } .ruler2 { height: 24px; } .ruler2 span { padding-top: 6px; font-size: 10px; }
.lane, .lh { margin-bottom: 2px; } .lane.snd, .lh.snd { height: var(--lane-s); } .lane.snd .clip { top: 2px; bottom: 2px; border-radius: 7px; } .lane.snd .clip .cn { font-size: 11px; }
.lh { padding: 2px 10px; } .lh.snd { flex-direction: row; align-items: center; gap: 8px; padding: 0 10px; } .lh.snd span { font-size: 10.5px; }
.clip { top: 2px; bottom: 2px; border-radius: 8px; } .clip .cn { font-size: 11.5px; }
.lanes { padding-bottom: 4px; }
@media (min-width: 1001px) and (max-height: 880px) { :root { --lane: 30px; --lane-s: 22px; } .tl { height: 214px; } }
@media (max-width: 1000px) { .tl { height: 236px; } }
.lhead { padding: 10px 12px 0; margin: -12px -12px 6px; }
.lsrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .lsrow .search.lsq { flex: 1; min-width: 0; margin: 0; } .lsrow .dd.lfav, .lsrow .lfav { flex: 0 0 106px; width: 106px; margin: 0; }
.lhead .search.lsq { margin-bottom: 8px; } .lsrow .search.lsq { margin-bottom: 0; }
.lhead .search.lsq input { height: 34px; padding-left: 34px; font-size: 13px; border-radius: 10px; } .lhead .search.lsq svg { top: 8px; left: 10px; width: 16px; height: 16px; }
.lsrow .dd-btn { height: 34px; font-size: 12.5px; padding: 0 8px; border-radius: 10px; } .lhead .lfav { height: 34px; }
.lhead .chips2 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 8px; padding: 0 12px; gap: 5px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); } .lhead .chips2::-webkit-scrollbar { display: none; }
.lhead .chips2 button { flex: none; height: 26px; padding: 0 10px; font-size: 12px; } .lhead .chips2 button em { margin-left: 5px; font-size: 10.5px; }
.chips2.fold { max-height: none; } .lmore { display: none !important; }
.slist .srow, .srow { padding-top: 6px; padding-bottom: 6px; } .srow .ib.sm { width: 32px; height: 32px; border-radius: 9px; }

#home { overflow-x: clip; }

/* v4.30: the top bar (Eco previews, How it works, Search) only belongs to Home; every other page gets the room, and the theme switch moves into the side menu */
body:not([data-v="home"]) .top { display: none; }
body:not([data-v="home"]) #studio, body:not([data-v="home"]) #playground { height: 100vh; height: 100dvh; }
body:not([data-v="home"]) #editor { height: 100vh; height: 100dvh; }
body:not([data-v="home"]) .bar { top: 0; }
.sidetheme { align-self: flex-start; margin: 0 0 6px 4px; width: 36px; height: 36px; }
@media (min-width: 1001px) and (max-width: 1400px) { .sidetheme { align-self: center; margin: 0 0 6px; } }
@media (max-width: 1000px) { body:not([data-v="home"]) #studio, body:not([data-v="home"]) #playground, body:not([data-v="home"]) #editor { height: auto; } .sidetheme { display: none; } }

/* v4.31: timeline header (collapse, length, push clips), aligned lane labels, end marker, nicer export progress */
.tltool { gap: 8px; align-items: center; } .tlcol { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 6px; margin-right: 4px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 800 12px var(--ui); letter-spacing: .1em; text-transform: uppercase; } .tlcol:hover { background: var(--fill2); } .tlcol svg { width: 18px; height: 18px; color: var(--mute); transition: transform .25s var(--ease); } .tlcol b { font: inherit; }
.tl.collapsed { height: auto !important; } .tl.collapsed .tlbody { display: none; } .tl.collapsed .tlcol svg { transform: rotate(-90deg); }
.lenl input { width: 64px; height: 30px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--line2); background: var(--bg); color: var(--ink); font: 700 12.5px var(--mono); text-align: right; outline: 0; } .lenl input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--fill2); } .lenl em { font-style: normal; color: var(--mute); font-size: 12px; margin-left: -2px; }
.lenl, .pushl { display: inline-flex; align-items: center; gap: 7px; }
.lh, .lh.snd, .lh.pic { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 10px; } .lh b { width: 22px; flex: none; } .lh span { font-size: 11px; }
.tlend { position: absolute; top: 0; bottom: 0; right: 0; z-index: 5; pointer-events: none; border-left: 2px solid #ee3f66; background: repeating-linear-gradient(135deg, rgba(238,63,102,.09) 0 6px, transparent 6px 12px); } .tlend span { position: absolute; top: 2px; left: 6px; font: 800 9.5px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: #ee3f66; }
.xrender { display: grid; grid-template-columns: minmax(0, 1fr) 138px; gap: 14px 16px; align-items: center; padding: 14px; margin: 4px 0 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--fill); }
.xlive { position: relative; border-radius: 12px; overflow: hidden; background: #0b0d1c; box-shadow: 0 14px 28px -16px rgba(20,26,70,.65); } .xlive canvas { display: block; width: 100%; height: auto; }
.xlivetag { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: 700 9.5px var(--ui); letter-spacing: .12em; text-transform: uppercase; } .xlivetag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff4d6d; animation: xblink 1.1s ease-in-out infinite; } @keyframes xblink { 50% { opacity: .25; } }
.xside { display: grid; gap: 12px; justify-items: center; align-content: center; }
.xring { --p: 0; position: relative; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from -90deg, #5b7dff, #9a6bff calc(var(--p) * .55%), #ff6bc4 calc(var(--p) * 1%), var(--fill2) 0); transition: background .15s; } .xring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--panel); } .xring b { position: relative; font: 800 19px var(--ui); letter-spacing: -.02em; }
.xsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; width: 100%; font: 600 11.5px var(--ui); color: var(--mute); } .xsteps li { display: flex; align-items: center; gap: 8px; } .xsteps li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line2); flex: none; }
.xsteps li.on { color: var(--ink); } .xsteps li.on::before { border-color: var(--accent); background: var(--accent); animation: xpulse 1.2s ease-out infinite; } .xsteps li.done { color: var(--soft); } .xsteps li.done::before { border-color: #1fb89a; background: #1fb89a; }
@keyframes xpulse { 0% { box-shadow: 0 0 0 0 rgba(74,99,240,.5); } 100% { box-shadow: 0 0 0 7px rgba(74,99,240,0); } }
.xbar { grid-column: 1 / -1; height: 8px; border-radius: 8px; background: var(--fill2); overflow: hidden; } .xbar i { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--grad); position: relative; transition: width .15s linear; overflow: hidden; } .xbar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); animation: xshine 1.4s linear infinite; } @keyframes xshine { to { transform: translateX(100%); } }
.xmeta { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 12px; color: var(--mute); } .xmeta b { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .xlivetag::before, .xsteps li.on::before, .xbar i::after { animation: none; } }
@media (max-width: 560px) { .xrender { grid-template-columns: 1fr; } }

/* the export box: no blur behind it while the result video plays (blur plus a playing video can show thin line artefacts on some computers) */
#exportDlg::backdrop { backdrop-filter: none; background: rgba(20,24,60,.5); }

.xsum { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; } .xsum span { padding: 4px 11px; border-radius: 999px; background: var(--fill2); color: var(--soft); font: 700 12px var(--ui); }
#exportDlg .xbusy .row2, #exportDlg .xbusy .fld, #exportDlg .xbusy #xInfo, #exportDlg .xdone .row2, #exportDlg .xdone .fld, #exportDlg .xdone #xInfo { display: none; }

/* v4.34: library filters wrap onto two lines (more room now that the header is slimmer); long lists (sound types, moods) show two lines and a Show all button */
.lhead .chips2 { flex-wrap: wrap; overflow: visible; margin: 0 0 8px; padding: 0; -webkit-mask-image: none; mask-image: none; gap: 5px; }
.lhead .chips2.fold { max-height: 57px; overflow: hidden; } .lhead .chips2.fold.open { max-height: 420px; }
.lmore { display: block !important; margin: -3px 0 8px; } .lmore[hidden] { display: none !important; }
/* v4.35: room under the filter chips, More / Less as a small capsule */
.lhead { padding-bottom: 12px; margin-bottom: 8px; } .lhead .chips2 { margin-bottom: 0; } .lhead .lmore + *, .lhead .lmore { margin-bottom: 0; }
.lmore { display: inline-flex !important; align-items: center; gap: 5px; height: 26px; margin: 8px 0 0 !important; padding: 0 12px; border: 1px solid var(--accent); border-radius: 999px; background: transparent; color: var(--accent); font: 700 12px var(--ui); text-decoration: none; } .lmore::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); } .lhead .chips2.open + .lmore::after { transform: rotate(-135deg) translateY(-1px); } .lmore:hover { background: var(--accent); color: #fff; } .lmore[hidden] { display: none !important; }

/* v4.36: length capsule, flag on the ruler, soft veil after the end; the timeline always fills the width and grows with the clips */
.lencap { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 6px 0 11px; border-radius: 999px; border: 1px solid var(--line2); background: var(--fill); color: var(--mute); font: 700 12px var(--ui); transition: .2s var(--ease); } .lencap svg { width: 15px; height: 15px; flex: none; }
.lencap input { width: 46px; height: 24px; padding: 0 2px; border: 0; background: transparent; color: var(--ink); font: 700 13px var(--mono); text-align: right; outline: 0; -moz-appearance: textfield; } .lencap input::-webkit-outer-spin-button, .lencap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .lencap input::placeholder { color: var(--mute); font-weight: 600; } .lencap em { font-style: normal; margin-left: -3px; }
.lencap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--fill2); } .lencap button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--fill2); color: var(--soft); font-size: 14px; line-height: 1; padding: 0; display: grid; place-items: center; } .lencap button:hover { background: var(--accent); color: #fff; }
.lencap.set { color: #fff; border-color: transparent; background: linear-gradient(135deg, #5b7dff, #9a6bff 60%, #c76bff); box-shadow: 0 8px 18px -10px rgba(98,92,240,.8); } .lencap.set input { color: #fff; } .lencap.set button { background: rgba(255,255,255,.25); color: #fff; } .lencap.set button:hover { background: rgba(255,255,255,.45); }
.tlend { position: absolute; top: 0; bottom: 0; right: 0; z-index: 5; pointer-events: none; border-left: 2px solid #8b6bff; background: linear-gradient(90deg, rgba(60,50,150,.16), rgba(60,50,150,.07) 160px, rgba(60,50,150,.05)); } .tlend span { display: none; }
.tlflag { position: absolute; top: 2px; z-index: 8; transform: translateX(-100%); display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 9px 0 7px; border: 0; border-radius: 11px 0 0 11px; background: linear-gradient(135deg, #5b7dff, #9a6bff 65%, #c76bff); color: #fff; font: 800 11px var(--mono); cursor: ew-resize; box-shadow: 0 6px 14px -6px rgba(98,92,240,.9); touch-action: none; } .tlflag svg { width: 12px; height: 12px; } .tlflag b { font: inherit; } .tlflag:hover, .tlflag.drag { filter: brightness(1.08); } .tlflag.drag { box-shadow: 0 0 0 3px rgba(139,107,255,.3), 0 8px 16px -6px rgba(98,92,240,.9); }

/* v4.37: the length control is plain: the word Length, a small box (Auto or seconds), an s, and a clear button */
.lencap, .lencap.set { gap: 7px; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--mute); font: 500 13px var(--ui); } .lencap:focus-within { border: 0; box-shadow: none; }
.lencap svg { display: none; } .lencap span { color: var(--mute); }
.lencap input, .lencap.set input { width: 60px; height: 30px; padding: 0 8px; border: 1px solid var(--line2); border-radius: 9px; background: var(--bg); color: var(--ink); font: 700 12.5px var(--mono); text-align: center; } .lencap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--fill2); }
.lencap em { margin-left: -2px; color: var(--mute); }
.lencap.set input { border-color: var(--accent); color: var(--accent); } .lencap.set em, .lencap.set span { color: var(--ink); }
.lencap button, .lencap.set button { width: 20px; height: 20px; background: transparent; color: var(--mute); font-size: 15px; } .lencap button:hover, .lencap.set button:hover { background: var(--fill2); color: var(--ink); }
.tlflag { height: 19px; padding: 0 8px 0 6px; border-radius: 10px 0 0 10px; background: var(--accent); box-shadow: none; font-size: 10.5px; } .tlflag svg { width: 11px; height: 11px; } .tlend { border-left: 2px solid var(--accent); background: linear-gradient(90deg, rgba(60,70,150,.14), rgba(60,70,150,.06) 140px, rgba(60,70,150,.05)); }
/* v4.38: softer Length pill and a switch for Push clips */
.lencap input, .lencap.set input { width: 74px; height: 32px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; background: linear-gradient(180deg, var(--panel), var(--fill)); color: var(--ink); font: 700 13px var(--ui); letter-spacing: .01em; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(20,26,70,.08), 0 6px 12px -8px rgba(20,26,70,.25); transition: border-color .2s, box-shadow .2s, background .2s; }
.lencap input:hover { border-color: var(--mute); }
.lencap input::placeholder { color: var(--mute); font: 600 13px var(--ui); letter-spacing: .03em; opacity: .85; }
.lencap input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--fill2), 0 6px 12px -8px rgba(20,26,70,.25); }
.lencap.set input { border-color: color-mix(in srgb, var(--accent) 45%, var(--line2)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--panel)), color-mix(in srgb, var(--accent) 12%, var(--panel))); color: var(--accent); }
.pushl .sw.sm { width: 36px; height: 22px; } .pushl .sw.sm i::after { width: 16px; height: 16px; left: 3px; top: 3px; } .pushl .sw.sm input:checked + i::after { transform: translateX(14px); } .pushl { gap: 9px; cursor: pointer; }
/* v4.39: Replace (video, picture or audio clip) */
.repbtn { width: 100%; justify-content: center; } .repbtn svg { color: var(--accent); }
#tRep:disabled { opacity: .45; cursor: not-allowed; }
.rpmenu { position: fixed; z-index: 500; min-width: 250px; max-width: 330px; max-height: 340px; overflow: auto; padding: 6px; border-radius: 14px; border: 1px solid var(--line2); background: var(--panel); box-shadow: 0 24px 50px -18px rgba(20,26,70,.5); animation: wtpop .22s var(--ease); }
.rph { margin: 8px 10px 4px; font: 800 10px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.rpi { display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; font: 600 13px var(--ui); } .rpi:hover { background: var(--fill2); } .rpi span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rpi small { color: var(--mute); font-weight: 600; font-size: 11px; }
.rpi i { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--fill2) center / cover; color: var(--mute); font-style: normal; } .rpi i svg { width: 15px; height: 15px; } .rpi.up i { background: linear-gradient(135deg, #5b7dff, #9a6bff); color: #fff; }

/* v4.40: picking a replacement from the library */
.repbar { display: flex; align-items: center; gap: 8px; margin: 8px 12px 0; padding: 7px 7px 7px 12px; border-radius: 12px; border: 1px dashed var(--accent); background: var(--fill2); color: var(--ink); font: 600 12.5px var(--ui); } .repbar span { flex: 1; min-width: 0; } .repbar[hidden] { display: none; }

/* v4.41: Low-res preview is a switch (Home bar, Studio bar, Create effect bar) */
.lrsw { display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 10px 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font: 700 12.5px var(--ui); white-space: nowrap; } .lrsw em { font-style: normal; } .lrsw:hover { color: var(--ink); }
.lrt { position: relative; width: 34px; height: 20px; flex: none; border-radius: 999px; background: var(--line2); transition: background .25s var(--ease); } .lrt::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20,26,70,.35); transition: transform .25s var(--ease); }
.lrsw[aria-checked="true"] .lrt { background: linear-gradient(135deg, #5b7dff, #9a6bff); } .lrsw[aria-checked="true"] .lrt::after { transform: translateX(14px); } .lrsw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* v4.42: the Low-res preview switch sits at the right end of the tab bar */
.wtabs .lrsw { margin-left: auto; flex: none; }

/* v4.44: one-line explanations under toggles */
.thint { margin: 6px 0 0; font: 500 11.5px/1.45 var(--ui); color: var(--mute); }

/* v4.45: clicks must reach the real checkbox under the switch picture (the picture used to sit on top and swallow them) */
.sw i { pointer-events: none; } .sw input { z-index: 1; }


/* v4.48: the Add menu; the library flashes once when it opens */
.lib.flash { animation: libflash 1s var(--ease); } @keyframes libflash { 0% { box-shadow: inset 0 0 0 2px var(--accent); } 100% { box-shadow: inset 0 0 0 2px transparent; } }

/* v4.49: many tracks, shrinkable tracks, several clips selected, a box to select them */
.lanes-h { padding-top: 0 !important; position: relative; } .lanes-h::before { content: ""; display: block; height: 24px; position: relative; z-index: 3; background: var(--panel); } .lh-in { will-change: transform; }
.lsh { margin-left: auto; width: 20px; height: 20px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--mute); opacity: 0; transition: opacity .15s, transform .2s var(--ease), background .15s; } .lsh svg { width: 12px; height: 12px; } .lh:hover .lsh, .lh.shr .lsh, .lsh:focus-visible { opacity: 1; } .lsh:hover { background: var(--fill2); color: var(--ink); } .lh.shr .lsh { transform: rotate(-90deg); }
.lane.shr, .lh.shr { height: 15px !important; margin-bottom: 2px; } .lh.shr { padding: 0 8px !important; } .lh.shr span { display: none; } .lh.shr b { font-size: 9.5px; }
.lane.shr .clip { top: 2px; bottom: 2px; border-radius: 4px; } .lane.shr .clip .cn, .lane.shr .clip .cth, .lane.shr .clip .wave, .lane.shr .clip .hl, .lane.shr .clip .hr { display: none; }
.marq { position: absolute; z-index: 9; pointer-events: none; border: 1px solid var(--accent); background: rgba(91,125,255,.14); border-radius: 4px; }
.clip.sel { z-index: 3; } .mrow2 { display: flex; flex-wrap: wrap; gap: 6px; } .btn.danger { color: #d23a5c; }
.lh { display: flex !important; transition: none !important; }


/* v4.51: After Effects style stripes: one clip per track, slim rows, plain bars, a number and the name on the left */
:root { --lane: 24px; --lane-s: 24px; }
.lane, .lh, .lane.snd, .lh.snd, .lane.pic, .lh.pic { height: 24px; } .lane .clip { top: 2px; bottom: 2px; border-radius: 6px; } .lane .clip .cth { display: none; } .lane .clip .cn { font-size: 11.5px; }
.lh b { width: 18px; text-align: right; } .lh.spare span { font-style: italic; opacity: .55; } .lh.spare b { opacity: .4; }
.pushl { display: none !important; }
.lane.spare { background-color: transparent; }

/* v4.53: the spare rows are kept out of sight; an empty timeline shows a hint and still accepts drops */
.lanes { min-height: 140px; } .tlhint { margin: 18px 20px; max-width: 420px; color: var(--mute); font: 600 13px/1.5 var(--ui); }

/* v4.54: an icon (animation, logo, background, infographic, picture, video, audio, sound, music) in front of each track instead of a number */
.lh b.kic { width: 18px; height: 18px; display: grid; place-items: center; color: var(--accent); } .lh b.kic svg { width: 16px; height: 16px; }

/* v4.58: the Media tab's drop box was overlapped by the sticky search header (its negative top margin); give it room */
#l-media .drop { margin-bottom: 14px; } #l-media .lhead { margin-top: 0; padding-top: 4px; }

/* v4.61: a transparent template shows a checkerboard behind it in the editor */
.stage.checker { background: repeating-conic-gradient(#cfd4ea 0 25%, #f6f7fd 0 50%) 0 0 / 22px 22px; }

/* v4.67: big animated page headers (effect pages, Sounds, Music, Saved favourites, Saved effects) */
.fxbadge, .fxcount, .fxart, .xart { display: none; }
.xhero { --fx: #4a63f0; --mx: 0; --my: 0; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 480px); column-gap: 24px; align-items: center; max-width: none; margin: 22px 0 10px; padding: 36px 40px; min-height: 280px; border-radius: 34px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--fx) 24%, var(--line)); background: radial-gradient(760px 340px at 92% -10%, color-mix(in srgb, var(--fx) 28%, transparent), transparent 70%), radial-gradient(520px 300px at -5% 115%, color-mix(in srgb, var(--fx) 16%, transparent), transparent 70%), var(--panel); box-shadow: 0 34px 60px -42px color-mix(in srgb, var(--fx) 70%, transparent); }
#sounds .xhero, #mine .xhero { max-width: 1180px; margin-left: auto; margin-right: auto; margin-top: 28px; }
.xhero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(color-mix(in srgb, var(--fx) 40%, transparent) 1.2px, transparent 1.5px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 95%); mask-image: linear-gradient(100deg, transparent 30%, #000 95%); opacity: .5; }
.xhero > * { grid-column: 1; } .xhero > .fxart, .xhero > .xart { display: block; grid-column: 2; grid-row: 1 / span 6; position: relative; height: 244px; transform: translate(calc(var(--mx) * 16px), calc(var(--my) * 11px)); transition: transform .4s var(--ease); }
.xhero .fxbadge { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 14px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--fx), color-mix(in srgb, var(--fx) 45%, #fff)); box-shadow: 0 16px 28px -12px var(--fx), inset 0 1px 0 rgba(255,255,255,.4); } .xhero .fxbadge svg { width: 27px; height: 27px; }
.xhero .eyebrow { display: inline-flex; align-items: center; gap: 9px; width: max-content; margin: 0; padding: 6px 13px 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--fx) 14%, transparent); color: color-mix(in srgb, var(--fx) 78%, var(--ink)); font-size: 11px; letter-spacing: .16em; } .xhero .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fx); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx) 26%, transparent); }
.xhero h1 { margin: 12px 0 0; font: 800 clamp(40px, 5vw, 70px)/.98 "Bricolage Grotesque", var(--ui); letter-spacing: -.04em; background: linear-gradient(100deg, var(--ink) 22%, color-mix(in srgb, var(--fx) 92%, var(--ink)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xhero .lede { max-width: 540px; margin: 14px 0 0; color: var(--soft); font-size: 16px; line-height: 1.55; }
.xhero .fxcount { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 16px 0 0; font: 600 13px var(--ui); color: var(--soft); } .fxcount b { font-weight: 800; color: var(--ink); } .fxcount i { width: 4px; height: 4px; border-radius: 50%; background: var(--mute); }
.xhero .chips { display: none; }
.xblob { position: absolute; inset: 4% 6%; border-radius: 42%; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--fx) 40%, transparent), transparent 70%); filter: blur(14px); animation: xblob 10s ease-in-out infinite alternate; }
.mot { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--fx); overflow: visible; }
.mot .spin, .mot .pulse, .mot .tw, .mot .arm, .mot .fan, .mot .drop { transform-box: view-box; }
.mot .spin { transform-origin: 210px 120px; animation: xspin 20s linear infinite; } .mot .spin.slow { animation-duration: 18s; }
.mot .pulse { animation: xpulse 2.6s ease-in-out infinite; } .mot .tw { animation: xtw 3.2s ease-in-out infinite; }
.mot .draw { stroke-dasharray: 1; animation: xdraw 4.8s ease-in-out infinite; }
.mot .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: xbar 2.6s ease-in-out infinite alternate; }
.mot .ring { stroke-dasharray: 100; animation: xring 3.6s ease-in-out infinite alternate; }
.mot .blob { animation: xdrift 9s ease-in-out infinite alternate; } .mot .blob.d2 { animation-name: xdrift2; } .mot .blob.d3 { animation-name: xdrift3; } .mot .blob.d4 { animation-name: xdrift4; }
.mot .wave { stroke-dasharray: 18 14; animation: xwave 3.2s linear infinite; }
.mot .eq { transform-box: fill-box; transform-origin: 50% 50%; animation: xeq 1.1s ease-in-out infinite; }
.mot .arm { transform-origin: 302px 26px; animation: xarm 6s ease-in-out infinite alternate; }
.mot .note { animation: xnote 4.4s ease-in infinite; opacity: 0; }
.mot .rise { transform-box: fill-box; transform-origin: center; animation: xrise 6s ease-in infinite; opacity: 0; }
.mot .ripple { transform-box: fill-box; transform-origin: center; animation: xripple 2.8s ease-out infinite; } .mot .ripple.r2 { animation-delay: 1.4s; }
.mot .beat { transform-box: fill-box; transform-origin: center; animation: xbeat 1.6s ease-in-out infinite; }
.mot .fan { transform-origin: 210px 200px; } .mot .fan.c1 { transform: rotate(-16deg); animation: xcard1 6s ease-in-out infinite alternate; } .mot .fan.c2 { transform: rotate(14deg); animation: xcard2 7s ease-in-out infinite alternate; } .mot .fan.c3 { animation: xcard3 5s ease-in-out infinite alternate; }
.mot .drop { animation: xdrop 5s ease-in-out infinite; }
.xcards { position: absolute; inset: 0; pointer-events: none; } .xcards img { position: absolute; width: 36%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,.55); background: var(--frame); box-shadow: 0 24px 40px -20px rgba(20,26,70,.6); animation: xfloat 7s ease-in-out infinite alternate; }
.xcards img:nth-child(1) { left: 0; bottom: 4%; --r: -7deg; transform: rotate(-7deg); } .xcards img:nth-child(2) { right: 0; top: 0; --r: 6deg; transform: rotate(6deg); animation-delay: -2s; z-index: 1; } .xcards img:nth-child(3) { right: 16%; bottom: -4%; --r: -1.5deg; transform: rotate(-1.5deg); animation-delay: -4s; z-index: 2; }
@keyframes xblob { to { transform: translate(18px, -10px) scale(1.08); } }
@keyframes xspin { to { transform: rotate(360deg); } }
@keyframes xpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes xtw { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes xdraw { 0% { stroke-dashoffset: 1; } 65%, 100% { stroke-dashoffset: 0; } }
@keyframes xbar { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes xring { from { stroke-dashoffset: 88; } to { stroke-dashoffset: 26; } }
@keyframes xdrift { to { transform: translate(34px, 20px) scale(1.1); } } @keyframes xdrift2 { to { transform: translate(-40px, 26px) scale(.9); } } @keyframes xdrift3 { to { transform: translate(30px, -28px) scale(1.12); } } @keyframes xdrift4 { to { transform: translate(-30px, -22px) scale(1.2); } }
@keyframes xwave { to { stroke-dashoffset: -64; } }
@keyframes xeq { 0%, 100% { transform: scaleY(.16); } 50% { transform: scaleY(1); } }
@keyframes xarm { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes xnote { 0% { transform: translate(0, 0) scale(var(--s, 1)); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-34px, -150px) rotate(-18deg) scale(var(--s, 1)); opacity: 0; } }
@keyframes xrise { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .85; } 100% { transform: translate(var(--x, 0), -200px); opacity: 0; } }
@keyframes xripple { from { transform: scale(1); opacity: .55; } to { transform: scale(3.4); opacity: 0; } }
@keyframes xbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
@keyframes xcard1 { to { transform: rotate(-23deg); } } @keyframes xcard2 { to { transform: rotate(21deg); } } @keyframes xcard3 { to { transform: rotate(-3deg) translateY(-6px); } }
@keyframes xdrop { 0% { transform: translateY(-80px); opacity: 0; } 22% { transform: translateY(8px); opacity: 1; } 32%, 88% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes xfloat { to { transform: translateY(-9px) rotate(calc(var(--r, 0deg) * -.4)); } }
.pctl { padding-top: 18px; }
@media (max-width: 860px) { .xhero { grid-template-columns: 1fr; padding: 26px 22px; min-height: 0; } .xhero > .fxart, .xhero > .xart { display: none; } }
@media (prefers-reduced-motion: reduce) { .mot *, .xblob, .xcards img { animation: none !important; } .mot .note, .mot .rise { opacity: .7; } }

.xcards img:nth-child(3) { display: none; } .xcards img:nth-child(1) { left: -2%; bottom: -2%; } .xcards img:nth-child(2) { right: -2%; top: -4%; }

/* v4.68: the cards in the headers keep their real shape, the effect pages share the width and side space of the audio and saved pages, and the header no longer ends in a hard edge */
.xcards img { height: auto !important; width: 40%; aspect-ratio: 16 / 9; object-fit: cover; }
.xcards img:nth-child(1) { left: 0; bottom: 2%; } .xcards img:nth-child(2) { right: 0; top: 0; }
#gallery[data-mode="fx"] { max-width: 1240px; margin: 0 auto; padding: 0 28px 50px; }
#gallery[data-mode="fx"] #galHero { margin: 28px 0 28px; box-shadow: 0 26px 40px -34px color-mix(in srgb, var(--fx) 60%, transparent); }
#sounds .xhero, #mine .xhero { max-width: none; margin: 28px 0 22px; }
#gallery[data-mode="fx"] .bar { padding-top: 6px; background: linear-gradient(var(--bg) 88%, transparent); }
@media (max-width: 1000px) { #gallery[data-mode="fx"] { padding: 0 16px 40px; } }
.xcards img { width: 47%; }


/* v4.70: cards used to lift 3 to 5 px on hover, which moved their bottom edge away from a pointer resting on it, so the hover switched off and on again (a flicker). They now grow a little instead, which keeps the pointer inside. */
.tile:hover, .pcard:hover, .fcard:hover, .lcard:hover, .pk:hover, .ftile:hover, .pgq-card:hover, .lcard.lnew:hover { transform: scale(1.018); }
.card:hover, .card:focus-visible { transform: scale(1.018); }
.card.in:hover, .card.in:focus-visible { transform: perspective(900px) scale(1.018) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.btn:hover:not(:disabled), .pgb:hover, .prow2:hover, .prow2:focus-visible, .pgfx button:hover, .nv.mk:hover { transform: none; }
/* Saved favourites: the effects you hearted, above the sounds */
.favfx { max-width: 1180px; margin: 0 auto 8px; padding: 6px 0 4px; } .favfx h2 { display: flex; align-items: baseline; gap: 10px; margin: 6px 2px 14px; font: 800 20px "Bricolage Grotesque", var(--ui); letter-spacing: -.02em; } .favfx h2 small { font: 700 13px var(--ui); color: var(--mute); }
.favfx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.ffx { border-radius: 18px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; box-shadow: 0 12px 30px -24px rgba(30,40,110,.5); transition: transform .25s var(--ease), box-shadow .25s; } .ffx:hover { transform: scale(1.02); box-shadow: var(--shadow-hover); }
.ffx-th { display: block; aspect-ratio: 16 / 9; background: var(--frame); } .ffx-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ffx-m { display: flex; align-items: center; gap: 10px; padding: 12px 14px; } .ffx-m > div { flex: 1; min-width: 0; } .ffx-m b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ffx-m small { color: var(--mute); font-size: 12.5px; }

.card:hover, .card:focus-visible { transform: scale(1.03); }
.card.in:hover, .card.in:focus-visible { transform: perspective(900px) scale(1.03) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* v4.71: the first block of a page (its top margin) used to push the whole page down 28 px through the body, which left a strip at the top where the page's soft colour glow (body::before) showed through; the body now keeps its margins inside */
body { display: flow-root; }


/* v4.73: saved effect cards line up with the sound cards: same column width, folder row inset, no overflow */
.favfx-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; } .favfx { margin-bottom: 22px; }
.ffx .fsel { padding: 0 14px 14px; grid-template-columns: 52px minmax(0, 1fr); min-width: 0; } .ffx .fsel .sel { min-width: 0; width: 100%; }
.ffx-m b, .ffx-m small { max-width: 100%; }

/* v4.77: template filters */
.pk-tags { margin: 0 0 18px; } .pk[hidden] { display: none; }

/* v4.79: template cards show three real stills from the template: one wide, two small */
.pk-th { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 6px; aspect-ratio: auto; } .pk-th img { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; border-radius: 10px; background: var(--fill); }
.pk-th img:first-child { grid-column: 1 / 3; grid-row: auto; border-radius: 12px; }