/* Nube: black, minimal, low clean lines. Michroma for the wordmark, Saira (variable width) for everything else. */
:root {
  --bg: #000;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .12);
  --line-2: rgba(255, 255, 255, .24);
  --text: #EDEFF1;
  --text-2: #A2A8AD;
  --text-3: #6C7277;
  --neon: #39D8FF;         /* electric blue: the main glow */
  --neon-2: #A35CFF;       /* violet, retro accent */
  --neon-3: #FF4FD2;       /* magenta, used sparingly */
  --glow: 0 0 6px rgba(57, 216, 255, .75), 0 0 18px rgba(57, 216, 255, .4);
  --ice: var(--neon);      /* selected / focus */
  --gold: #C9B48A;         /* 4K only */
  --danger: #E37763;
  --shade: rgba(0, 0, 0, .62);
  --r: 4px;
  --r-lg: 8px;
  --font: "Saira", ui-sans-serif, system-ui, sans-serif;
  --mark: "Michroma", "Saira", sans-serif;
  --frame: 16 / 9;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 15px; line-height: 1.55; font-weight: 400; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--text); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
a:hover { text-decoration-color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 1.5px solid var(--ice); outline-offset: 3px; border-radius: 2px; }
main { outline: none; }
h1, h2, h3 { font-weight: 500; font-stretch: 115%; letter-spacing: .01em; }
::selection { background: var(--ice); color: #000; }

/* ---------- top bar ---------- */
/* NUBE centered, the menu centered under it */
:root { --top-h: 98px; }
.top {
  position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px max(16px, env(safe-area-inset-left)) 12px max(16px, env(safe-area-inset-right));
  max-width: 1400px; margin: 0 auto; min-height: var(--top-h);
}
.brand { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; }
.brand .word { font-family: var(--mark); font-size: 15px; letter-spacing: .62em; margin-right: -.62em; line-height: 1; }
.nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 4px; }
.nav a { padding: 7px 12px; border-radius: var(--r); color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 450; }
.nav a:hover { color: var(--text); background: var(--surface); }
.nav a[aria-current="page"] { color: var(--text); }
.nav .btn { margin-left: 8px; }

/* ---------- buttons & fields ---------- */
.btn {
  appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 20px; border-radius: var(--r); text-decoration: none;
  font-size: 13.5px; font-weight: 500; font-stretch: 112%; letter-spacing: .04em;
  background: var(--text); color: #000; transition: background .15s, color .15s;
}
.btn:hover { background: #fff; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.quiet { background: var(--surface-2); color: var(--text); }
.btn.quiet:hover { background: rgba(255, 255, 255, .14); }
.btn.danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px currentColor; }
.btn.small { min-height: 32px; padding: 0 14px; font-size: 12.5px; }
.btn.big { min-height: 48px; padding: 0 28px; }
.btn.wide { width: 100%; }
.nav .btn { color: #000; }
.field { display: grid; gap: 6px; }
.field > span, fieldset.field legend { font-size: 13px; color: var(--text-2); }
.input, select.input, textarea.input {
  width: 100%; min-height: 42px; padding: 9px 12px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
select.input option, select.input optgroup { background: #111; color: var(--text); }
textarea.input { min-height: 84px; resize: vertical; }
.input:focus { outline: none; border-color: var(--ice); }
.input.big { min-height: 52px; font-size: 17px; }
.link { appearance: none; border: 0; background: none; padding: 4px 0; color: var(--text); cursor: pointer; font-size: 13.5px; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--text); }
.link:disabled { color: var(--text-3); cursor: default; text-decoration: none; }
.small { font-size: 13.5px; color: var(--text-2); }
.err { color: var(--danger); font-size: 14px; margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- search bar (rotating hint) ---------- */
.search {
  position: relative; display: flex; align-items: center; width: 100%; max-width: 760px;
  border-bottom: 1px solid var(--line-2); transition: border-color .2s;
}
.search:focus-within { border-color: var(--text); }
.search > svg { position: absolute; left: 2px; width: 20px; height: 20px; color: var(--text-3); pointer-events: none; }
.search input {
  flex: 1; min-width: 0; width: 0; border: 0; background: none; outline: none; position: relative; z-index: 1;
  padding: 16px 40px 16px 34px; font-size: 18px; font-weight: 300; font-stretch: 108%;
}
.search input::-webkit-search-cancel-button { display: none; }
.search .hint { position: absolute; left: 34px; right: 40px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-3); font-size: 18px; font-weight: 300; font-stretch: 108%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search .hint-word { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; transition: opacity .3s, transform .3s; }
.search .hint-word.out { opacity: 0; transform: translateY(-6px); }
.search .clear { position: absolute; right: 0; z-index: 2; appearance: none; border: 0; background: none; color: var(--text-2); font-size: 22px; line-height: 1; width: 36px; height: 36px; cursor: pointer; border-radius: var(--r); }
.search .clear:hover { color: var(--text); background: var(--surface); }
.search.big { max-width: 820px; }
.search.big > svg { width: 24px; height: 24px; }
.search.big input, .search.big .hint { font-size: clamp(19px, 2.2vw, 26px); font-weight: 300; }
.search.big input { padding: 20px 48px 20px 44px; }
.search.big .hint { left: 44px; }

/* ---------- library ---------- */
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 20px 96px; }
.search-band { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; padding: 36px 0 6px; }
.framebar { display: flex; justify-content: center; }
.frames { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: var(--r); padding: 3px; }
.frames button {
  appearance: none; border: 0; background: none; cursor: pointer; display: flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 11px; border-radius: 3px; color: var(--text-2);
}
.frames button i { display: block; border: 1.5px solid currentColor; border-radius: 1.5px; flex: none; }
.frames button b { font-weight: 500; font-size: 13.5px; font-stretch: 112%; color: inherit; }
.frames button small { font-size: 12.5px; color: var(--text-3); }
.frames button:hover { color: var(--text); }
.frames button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }
.frames button[aria-pressed="true"] small { color: var(--text-2); }

.lib { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 36px; }
.side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 0 8px 24px 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.side-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; }
.side-head h2 { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .08em; flex: 1; color: var(--text-2); }
.side .group { padding: 16px 0; border-top: 1px solid var(--line); }
.g-title { display: block; margin: 0 0 10px; font-size: 13px; font-weight: 500; color: var(--text); font-stretch: 110%; letter-spacing: .02em; }
.side select.input { min-height: 38px; font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  appearance: none; border: 0; cursor: pointer; padding: 5px 10px; border-radius: var(--r);
  background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px;
}
.chip:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.chip[aria-pressed="true"] { background: var(--text); color: #000; box-shadow: none; }
.chip .n { color: var(--text-3); font-size: 12px; margin-left: 3px; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .n { color: rgba(0, 0, 0, .55); }
.toggle { display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; font-size: 14px; color: var(--text-2); }
.toggle:hover { color: var(--text); }
.toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--text); flex: none; }
.toggle span:first-of-type { flex: 1; }
.toggle .n { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.result-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; min-height: 32px; color: var(--text-2); font-size: 14px; }
.result-line strong { color: var(--text); font-weight: 500; }
.active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 16px; }
.active:empty { display: none; }
.pill { appearance: none; border: 0; cursor: pointer; padding: 4px 9px 4px 11px; border-radius: var(--r); background: var(--surface-2); color: var(--text); font-size: 13px; }
.pill span { color: var(--text-2); margin-left: 3px; }
.pill:hover { background: rgba(255, 255, 255, .14); }
.filters-btn, .sheet-close, .sheet-foot { display: none !important; }

/* ---------- clip grid ---------- */
.grid { display: grid; gap: 28px 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-items: start; }
.grid.tall { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.card { position: relative; }
.card-link { display: block; color: inherit; text-decoration: none; }
.frame {
  position: relative; overflow: hidden; border-radius: var(--r); background: #0d0f11;
  aspect-ratio: var(--frame); transition: aspect-ratio .5s cubic-bezier(.3, .7, .2, 1);
}
.frame img, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame video { opacity: 0; transition: opacity .25s; }
.frame.playing video { opacity: 1; }
.frame .badge { position: absolute; top: 9px; left: 9px; }
.frame .dur { position: absolute; right: 9px; bottom: 9px; padding: 1px 7px; border-radius: 3px; background: var(--shade); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.frame .note { position: absolute; left: 9px; bottom: 9px; padding: 1px 7px; border-radius: 3px; background: var(--shade); color: var(--text-2); font-size: 12px; }
.card .meta { padding: 10px 1px 0; }
.card .meta b { display: block; font-weight: 450; font-size: 14.5px; line-height: 1.35; }
.card .meta span { color: var(--text-3); font-size: 13px; }
.card-link:hover .meta b { color: #fff; }
.card-link:hover .frame img { transform: scale(1.02); }
.frame img { transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.badge { display: inline-block; padding: 1px 7px; border-radius: 3px; font-size: 11.5px; font-weight: 600; font-stretch: 112%; letter-spacing: .04em; }
.badge.k4 { background: var(--gold); color: #1a1408; }
.badge.draft { background: var(--shade); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.save {
  appearance: none; border: 0; cursor: pointer; position: absolute; top: 7px; right: 7px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r);
  background: var(--shade); color: #fff; opacity: 0; transition: opacity .15s;
}
.save svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.save.on svg { fill: currentColor; }
.save.on { background: var(--text); color: #000; opacity: 1; }
.card:hover .save, .card:focus-within .save, .save:focus-visible { opacity: 1; }
@media (hover: none) { .save { opacity: 1; } }
.save.big { position: static; opacity: 1; width: auto; height: 38px; padding: 0 14px 0 11px; gap: 8px; display: inline-flex; align-items: center; background: var(--surface-2); color: var(--text); font-size: 13.5px; font-weight: 500; flex: none; }
.save.big.on { background: var(--text); color: #000; }
.empty { max-width: 520px; padding: 64px 0; }
.empty h2 { margin: 0 0 8px; font-size: 22px; }
.empty p { color: var(--text-2); margin: 0 0 20px; }
.empty-line { color: var(--text-2); margin: 0; padding: 18px 0; }
.more { display: flex; justify-content: center; margin-top: 36px; }
.skeleton .frame { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* ---------- clip page ---------- */
.back { display: inline-flex; margin: 10px 0 22px; color: var(--text-2); text-decoration: none; font-size: 14px; }
.back::before { content: "←"; margin-right: 8px; }
.back:hover { color: var(--text); }
.clip { display: grid; gap: 40px; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); align-items: start; }
.stage-col { display: grid; gap: 14px; }
.stage { display: grid; place-items: center; background: #050607; border-radius: var(--r-lg); padding: 20px; border: 1px solid var(--line); }
.stage .frame { width: 100%; max-height: 72vh; }
.stage.tall .frame { width: auto; height: min(72vh, 680px); }
.cuts { display: flex; gap: 0; justify-content: center; }
.cuts button { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r); background: none; color: var(--text-2); font-size: 13.5px; font-weight: 500; font-stretch: 110%; }
.cuts button i { border: 1.5px solid currentColor; border-radius: 1.5px; display: block; }
.cuts button:hover { color: var(--text); }
.cuts button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }
.clip-acts { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.btn.dl-now { height: 38px; padding: 0 14px 0 11px; gap: 8px; display: inline-flex; align-items: center; font-size: 13.5px; }
.btn.dl-now svg, .save-sheet svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.save-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.save-sheet-card { width: 100%; max-width: 440px; background: var(--surface, #0b0b0b); border: 1px solid var(--line); border-radius: 8px; padding: 20px; display: grid; gap: 12px; margin-bottom: env(safe-area-inset-bottom); }
.save-sheet-card p { margin: 0; }
.save-sheet-card p span { display: block; color: var(--text-3); font-size: 13px; margin-top: 4px; word-break: break-all; }
.save-sheet-card .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.save-sheet-links { display: flex; justify-content: space-between; }
.title-row { display: flex; align-items: flex-start; gap: 14px; justify-content: space-between; margin-bottom: 6px; }
.title-row h1, .clip h1 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; font-weight: 400; font-stretch: 118%; letter-spacing: 0; }
.clip .where { color: var(--text-2); margin: 0 0 18px; }
.desc { color: var(--text-2); margin: 0 0 22px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.facts li { padding: 2px 9px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--text-2); }
.specs { display: grid; grid-template-columns: max-content 1fr; gap: 11px 20px; margin: 0 0 26px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); align-items: baseline; }
.specs dt { color: var(--text-3); font-size: 13.5px; }
.specs dd { margin: 0; }
.dl { padding: 0; }
.dl h2 { margin: 0 0 4px; font-size: 13px; letter-spacing: .08em; color: var(--text-2); }
.dl .usage { margin: 0 0 12px; color: var(--text-2); font-size: 13.5px; }
.dl-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.dl-row .shape { justify-self: center; border: 1.5px solid var(--text-3); border-radius: 2px; }
.dl-row.on .shape { border-color: var(--text); }
.dl-row .label b { display: block; font-weight: 500; font-stretch: 110%; }
.dl-row .label span { font-size: 13px; color: var(--text-3); }
.dl-row .acts { display: flex; gap: 6px; }
.dl-note { margin: 12px 0 0; font-size: 13.5px; color: var(--text-2); }

/* ---------- account, admin, panels ---------- */
.page-title { margin: 14px 0 26px; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; font-weight: 300; font-stretch: 120%; }
.panel { background: var(--surface); border-radius: var(--r-lg); padding: 22px; border: 1px solid var(--line); margin-bottom: 16px; }
.panel h2 { margin: 0 0 12px; font-size: 13px; letter-spacing: .08em; color: var(--text-2); }
.panel p { margin: 0 0 12px; color: var(--text-2); }
.cols { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.plans { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.plan { padding: 18px; background: #000; }
.plan.current { background: #0c0e10; box-shadow: inset 0 0 0 1px var(--text); }
.plan b { display: block; font-size: 17px; font-weight: 500; font-stretch: 115%; }
.plan span { display: block; font-size: 13.5px; color: var(--text-2); }
.plan .price { color: var(--text); font-size: 14px; margin: 2px 0 8px; }
.plan .yours { margin-top: 8px; color: var(--ice); font-weight: 500; }
.meter { height: 3px; background: var(--line); overflow: hidden; margin: 8px 0 6px; }
.meter i { display: block; height: 100%; background: var(--text); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.list li:first-child { border-top: 0; }
.list li span { color: var(--text-3); white-space: nowrap; }
.row-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.row-form .field { flex: 1; min-width: 200px; }
.tabs { display: flex; gap: 0; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.tabs button { appearance: none; border: 0; cursor: pointer; padding: 10px 16px; background: none; color: var(--text-2); font-weight: 500; font-stretch: 110%; border-bottom: 1.5px solid transparent; margin-bottom: -1px; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.admin-clip { border-top: 1px solid var(--line); }
.admin-clip:first-of-type { border-top: 0; }
.admin-clip summary { display: flex; align-items: center; gap: 14px; padding: 12px 0; cursor: pointer; list-style: none; }
.admin-clip summary::-webkit-details-marker { display: none; }
.admin-clip summary .frame { --frame: 16 / 9; width: 108px; flex: none; }
.admin-clip .sum { flex: 1; min-width: 0; }
.admin-clip .sum b { display: block; font-weight: 500; }
.admin-clip .sum span { font-size: 13px; color: var(--text-3); }
.admin-clip .miss { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.admin-clip[open] summary { padding-bottom: 16px; }
.admin-clip form { display: grid; gap: 14px 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); padding: 0 0 22px; }
.admin-clip form .wide { grid-column: 1 / -1; }
.admin-clip .acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-clip .acts .sp { flex: 1; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 6px; }
.chip.check { display: inline-flex; padding: 0; overflow: hidden; }
.chip.check input { position: absolute; opacity: 0; pointer-events: none; }
.chip.check span { padding: 5px 10px; }
.chip.check:has(input:checked) { background: var(--text); color: #000; box-shadow: none; }
.chip.check:has(input:focus-visible) { outline: 1.5px solid var(--ice); outline-offset: 2px; }
.chip.static { cursor: default; }
.chip.static:hover { color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
.opt-group { padding: 14px 0; border-top: 1px solid var(--line); }
.opt-group h3 { margin: 0 0 8px; font-size: 14px; }
.opt-group .row-form { margin-top: 10px; }
.opt-group .row-form .field { max-width: 280px; }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
pre { background: #050607; padding: 12px 14px; border-radius: var(--r); overflow-x: auto; margin: 0 0 12px; border: 1px solid var(--line); color: var(--text); }
.members { width: 100%; border-collapse: collapse; font-size: 14px; }
.members th { text-align: left; font-weight: 500; color: var(--text-2); padding: 8px 8px 8px 0; }
.members td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.members select.input { min-height: 34px; padding: 4px 10px; width: auto; }
.scroll-x { overflow-x: auto; }

/* ---------- home ---------- */
.home h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 300; font-stretch: 122%; letter-spacing: .02em; margin: 0 0 22px; }
.hero { position: relative; min-height: max(540px, calc(100svh - 70px - 86px)); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden; padding: 6px 20px 28px; }
.hero-inner { position: relative; z-index: 1; width: 100%; max-width: 900px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.demo-stage { width: 100%; height: clamp(220px, 34vh, 400px); display: grid; place-items: center; }
.demo-frame {
  position: relative; overflow: hidden; border-radius: 3px; background: #05080b;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08);
  transition: width .8s cubic-bezier(.3, .7, .2, 1), height .8s cubic-bezier(.3, .7, .2, 1);
}
.demo-frame .scene, .demo-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* viewfinder corners */
.vf {
  position: absolute; inset: 10px; pointer-events: none; z-index: 1; --c: rgba(255, 255, 255, .75); --l: 16px; --w: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat;
}
.demo-ratios { display: flex; gap: 4px; margin: 18px 0 0; }
.demo-ratios button { appearance: none; border: 0; cursor: pointer; padding: 4px 10px; background: none; color: var(--text-3); font-size: 12.5px; font-weight: 500; font-stretch: 115%; letter-spacing: .06em; border-radius: 3px; font-variant-numeric: tabular-nums; }
.demo-ratios button:hover { color: var(--text-2); }
.demo-ratios button[aria-pressed="true"] { color: var(--text); background: var(--surface-2); }
.hero-q { margin: 38px 0 6px; font-size: clamp(24px, 3.1vw, 40px); font-weight: 200; font-stretch: 125%; letter-spacing: .01em; color: var(--text); text-align: center; }
.hero-sub { margin: 22px 0 0; color: var(--text-3); font-size: 14px; }
.hero-sub a { color: var(--text); }
.hero-sub { text-align: center; text-wrap: balance; }
.hero-sub .nowrap { white-space: nowrap; }
.spec-row { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 8px; padding-bottom: 8px; }
.spec-row div { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 8px 20px; }
.spec-row div + div { border-left: 1px solid var(--line); }
.spec-row b { font-weight: 400; font-size: 18px; font-stretch: 120%; letter-spacing: .02em; }
.spec-row span { color: var(--text-3); font-size: 13.5px; }
.band { padding-top: 88px; padding-bottom: 0; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.steps li { counter-increment: step; padding: 20px 24px 0 0; }
.steps li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.steps li::before { content: "0" counter(step); display: block; font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--text-3); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.steps b { display: block; font-size: 17px; font-weight: 500; font-stretch: 115%; margin-bottom: 6px; }
.steps p { margin: 0; color: var(--text-2); font-size: 14.5px; }
/* the hero video runs behind the hero and the "ready for" row, from under the top bar */
.hero-zone { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--top-h)); padding-top: var(--top-h); margin-bottom: 64px; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; background: #000; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(0,0,0,.28) 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.7) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 62%, rgba(0,0,0,.85) 92%, #000 100%);
}
/* the neon frame shows the footage at full brightness: a viewfinder onto the dimmed background */
.demo-frame.viewfinder { background: transparent; -webkit-backdrop-filter: brightness(2.1) contrast(1.06) saturate(1.2); backdrop-filter: brightness(2.1) contrast(1.06) saturate(1.2); }
.horizon { position: relative; }
.platforms {
  display: flex; align-items: center; justify-content: center; gap: 16px 40px; flex-wrap: wrap;
  padding: 26px 20px 30px; border-top: 1px solid var(--line);
  background: linear-gradient(to bottom, rgba(6, 8, 10, .72), #000);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.platforms .lead { font-size: 12.5px; color: var(--text-3); letter-spacing: .06em; white-space: nowrap; }
.platforms ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 40px; margin: 0; padding: 0; list-style: none; }
.platforms li { font-size: 19px; line-height: 1; color: #7E858A; letter-spacing: .01em; white-space: nowrap; }
.vista-bg { display: none; }
.home-plans { margin-bottom: 14px; }
.plans-note { margin: 0 0 24px; color: var(--text-3); font-size: 13.5px; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.foot { display: grid; grid-template-columns: auto 1fr auto; gap: 10px 28px; align-items: center; padding-top: 40px; padding-bottom: 40px; margin-top: 96px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 13.5px; }
.foot p { margin: 0; }
.foot nav { display: flex; gap: 18px; }
.foot nav a { color: var(--text-2); text-decoration: none; }
.foot nav a:hover { color: var(--text); }
.foot .copy { grid-column: 1 / -1; font-size: 12.5px; }

/* ---------- sign in ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 300px); justify-content: center; gap: 56px; align-items: start; padding-top: 56px; padding-bottom: 96px; }
.auth-card { padding: 0; }
.auth-card form { display: grid; gap: 18px; }
.auth-card h1 { margin: 0; font-size: clamp(26px, 3vw, 36px); font-weight: 300; font-stretch: 120%; line-height: 1.1; }
.auth-card p { margin: 0; color: var(--text-2); }
.auth-card p b { color: var(--text); font-weight: 500; }
.auth-card .code { font-size: 28px; letter-spacing: .3em; text-align: center; min-height: 60px; font-variant-numeric: tabular-nums; font-weight: 300; }
.auth-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.auth-side { padding: 22px 0 0 28px; border-left: 1px solid var(--line); }
.auth-side h2 { font-size: 13px; letter-spacing: .08em; color: var(--text-2); margin: 0 0 12px; }
.auth-side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.auth-side li { padding-left: 18px; position: relative; color: var(--text-2); font-size: 14px; }
.auth-side li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--text-2); }
.done h1 { margin: 0 0 6px; }

/* ---------- members area ---------- */
.dash-head { display: grid; gap: 22px; padding: 26px 0 32px; }
.dash-head h1 { margin: 0; font-size: clamp(30px, 4vw, 52px); font-weight: 300; font-stretch: 120%; line-height: 1.05; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.dash-grid .panel { margin: 0; }
.big-num { margin: 0 0 4px; }
.big-num b { font-size: 34px; font-weight: 300; font-stretch: 120%; color: var(--text); margin-right: 6px; }
.row-sec { margin-top: 48px; }
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.row-head h2 { margin: 0; font-size: 18px; font-weight: 400; font-stretch: 118%; }
.page-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.page-top .page-title { margin: 14px 0 0; }
.frames.compact button { padding: 6px 11px 6px 9px; }

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translate(-50%, 16px);
  background: var(--text); color: #000; padding: 11px 18px; border-radius: var(--r); font-size: 14px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); z-index: 50;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .clip { grid-template-columns: 1fr; }
  .lib { grid-template-columns: 1fr; margin-top: 22px; }
  .filters-btn { display: inline-flex !important; }
  .side { display: none; }
  body.sheet-open { overflow: hidden; }
  body.sheet-open .side { display: block; position: fixed; inset: 0; z-index: 40; max-height: none; background: #000; padding: max(18px, env(safe-area-inset-top)) 20px 0; overflow-y: auto; }
  body.sheet-open .side .sheet-close { display: inline-flex !important; }
  body.sheet-open .side .sheet-foot { display: block !important; position: sticky; bottom: 0; padding: 12px 0 max(16px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, #000 30%); }
  .sheet-foot .btn { width: 100%; }
  .steps { grid-template-columns: 1fr; border-top: 0; }
  .steps li, .steps li + li { padding: 18px 0; border-left: 0; border-top: 1px solid var(--line); }
  .auth { grid-template-columns: 1fr; gap: 28px; padding-top: 24px; }
  .auth-side { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; }
  .foot { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .brand .word { font-size: 13px; letter-spacing: .5em; margin-right: -.5em; }
  .nav a { padding: 7px 8px; font-size: 13.5px; }
  .hero { min-height: auto; padding-top: 6px; }
  .demo-stage { height: 52vw; min-height: 220px; }
  .hero-q { margin-top: 34px; }
  .spec-row { grid-template-columns: 1fr; }
  .spec-row div + div { border-left: 0; border-top: 1px solid var(--line); }
  .spec-row div { padding: 16px 0; }
  .platforms { padding: 20px 16px 24px; gap: 12px; }
  .platforms .lead { width: 100%; text-align: center; }
  .platforms ul { gap: 12px 24px; }
  .platforms li { font-size: 16px; }
  .vista.band { position: relative; overflow: hidden; isolation: isolate; padding-top: 24px; }
  .vista-bg {
    display: block; position: relative; height: 340px; z-index: -1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 70%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 70%, transparent 100%);
  }
  .vista-bg .scene { position: absolute; left: -3%; top: 0; width: 106%; height: 100%; animation: drift 45s ease-in-out infinite alternate; transform-origin: 50% 100%; }
  .vista-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.8) 100%); }
  .vista-body { position: relative; display: flex; flex-direction: column; gap: 120px; margin-top: -280px; padding-bottom: 0; }
  .vista-body h2 { margin: 0; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
  .vista .steps { border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-lg); background: rgba(4, 7, 10, .45); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); }
  .vista .steps li, .vista .steps li + li { padding: 18px 18px 20px; border-left: 0; }
  .vista .steps li:first-child { border-top: 0; }
  .vista .steps li + li { border-top: 1px solid rgba(255, 255, 255, .12); }
  .vista .steps p { color: #C3C9CE; }
  .frames { width: 100%; }
  .frames button { flex: 1; justify-content: center; flex-direction: column; gap: 4px; padding: 7px 4px; }
  .frames button small { display: none; }
  .grid, .grid.tall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .admin-clip summary .frame { width: 84px; }
  .dl-row { grid-template-columns: 26px 1fr; }
  .dl-row .acts { grid-column: 2; }
  .title-row { flex-direction: column; }
}
@keyframes drift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.05) translate3d(-1.2%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .vista-bg .scene { animation: none; }
  .frame, .demo-frame, .frame img { transition: none; }
  .skeleton .frame { animation: none; }
  #toast, .search .hint-word { transition: none; }
}


/* ===================== neon: electric blue lights, 90s edge ===================== */
a:hover { text-decoration-color: var(--neon); }
::selection { background: var(--neon); color: #000; }

/* wordmark: a neon sign that flickers on */
.brand .word {
  color: #E8FBFF;
  text-shadow: 0 0 3px rgba(57, 216, 255, .95), 0 0 10px rgba(57, 216, 255, .7), 0 0 26px rgba(57, 216, 255, .4);
  animation: flicker 2.6s linear 1 both;
}
@keyframes flicker {
  0% { opacity: .15; } 6% { opacity: 1; } 8% { opacity: .25; } 12% { opacity: 1; } 18% { opacity: .5; }
  21% { opacity: 1; } 60% { opacity: 1; } 62% { opacity: .7; } 64%, 100% { opacity: 1; }
}
.nav a[aria-current="page"] { color: #E8FBFF; text-shadow: 0 0 10px rgba(57, 216, 255, .55); }
.btn:hover { box-shadow: 0 0 0 1px rgba(57, 216, 255, .7), 0 0 22px rgba(57, 216, 255, .45); }
.btn.quiet:hover { box-shadow: inset 0 0 0 1px rgba(57, 216, 255, .55), 0 0 18px rgba(57, 216, 255, .25); }

/* hero: neon tube frame, blue-violet beam, floating shapes */
.demo-frame {
  box-shadow: 0 0 0 1px rgba(57, 216, 255, .7), 0 0 16px rgba(57, 216, 255, .45), 0 0 60px rgba(57, 216, 255, .18), 0 40px 80px -40px rgba(0, 0, 0, .9);
}
.vf { --c: #9DEBFF; filter: drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 8px rgba(57, 216, 255, .6)); }
.demo-ratios button[aria-pressed="true"] { color: #E8FBFF; background: rgba(57, 216, 255, .1); text-shadow: 0 0 8px rgba(57, 216, 255, .8); box-shadow: inset 0 0 0 1px rgba(57, 216, 255, .45); }
.hero-q { text-shadow: 0 0 28px rgba(57, 216, 255, .22); }

/* search: pink gradient outline */
.search {
  --pink: linear-gradient(90deg, #FF3EA5 0%, #FF6FD8 50%, #C86BFF 100%);
  border: 1.5px solid transparent; border-radius: 6px;
  background: linear-gradient(#050507, #050507) padding-box, var(--pink) border-box;
  box-shadow: 0 0 16px rgba(255, 62, 165, .22), 0 0 40px rgba(200, 107, 255, .12);
  transition: box-shadow .2s;
}
.search:focus-within { border-color: transparent; box-shadow: 0 0 22px rgba(255, 62, 165, .45), 0 0 56px rgba(200, 107, 255, .25); }
.search > svg { left: 16px; }
.search input { padding-left: 48px; padding-right: 48px; }
.search .hint { left: 48px; right: 48px; }
.search .clear { right: 6px; }
.search:focus-within > svg { color: #FF6FD8; }
.search.big > svg { left: 20px; }
.search.big input { padding-left: 60px; padding-right: 54px; }
.search.big .hint { left: 60px; right: 54px; }
@media (max-width: 640px) {
  .search.big input, .search.big .hint { font-size: 16px; }
  .search.big > svg { left: 14px; width: 20px; height: 20px; }
  .search.big input { padding: 18px 40px 18px 44px; }
  .search.big .hint { left: 44px; right: 40px; }
}

/* the "ready for" row gets a neon divider */
.platforms { position: relative; border-top-color: transparent; }
.platforms::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon) 25%, var(--neon-2) 75%, transparent);
  box-shadow: 0 0 10px rgba(57, 216, 255, .7), 0 0 24px rgba(163, 92, 255, .4);
}
.platforms li:hover { color: #E8FBFF; text-shadow: 0 0 10px rgba(57, 216, 255, .6); }

/* steps, specs */
.steps li::before { color: var(--neon); text-shadow: 0 0 8px rgba(57, 216, 255, .8); }
.spec-row b { text-shadow: 0 0 18px rgba(57, 216, 255, .25); }

/* selected things glow */
.frames button[aria-pressed="true"], .cuts button[aria-pressed="true"] { background: rgba(57, 216, 255, .1); color: #E8FBFF; box-shadow: inset 0 0 0 1px rgba(57, 216, 255, .5), 0 0 14px rgba(57, 216, 255, .2); }
.frames button[aria-pressed="true"] i, .cuts button[aria-pressed="true"] i { border-color: var(--neon); box-shadow: 0 0 6px rgba(57, 216, 255, .8); }
.chip[aria-pressed="true"], .chip.check:has(input:checked) { background: rgba(57, 216, 255, .12); color: #E8FBFF; box-shadow: inset 0 0 0 1px var(--neon), 0 0 12px rgba(57, 216, 255, .3); }
.chip[aria-pressed="true"] .n { color: #9DEBFF; }
.pill { box-shadow: inset 0 0 0 1px rgba(57, 216, 255, .35); }
.toggle input { accent-color: var(--neon); }
.tabs button[aria-selected="true"] { border-bottom-color: var(--neon); color: #E8FBFF; text-shadow: 0 0 10px rgba(57, 216, 255, .5); }
.tabs { box-shadow: 0 1px 0 0 var(--line); border-bottom: 0; }
.dl-row.on .shape { border-color: var(--neon); box-shadow: 0 0 8px rgba(57, 216, 255, .7); }
.plan.current { box-shadow: inset 0 0 0 1px var(--neon), 0 0 24px rgba(57, 216, 255, .18); }
.plan .yours { color: var(--neon); }
.meter i { background: linear-gradient(90deg, var(--neon), var(--neon-2)); box-shadow: 0 0 10px rgba(57, 216, 255, .7); }
.big-num b { text-shadow: 0 0 18px rgba(57, 216, 255, .35); }

/* cards light up on hover */
.card-link .frame { transition: aspect-ratio .5s cubic-bezier(.3, .7, .2, 1), box-shadow .25s; }
.card-link:hover .frame, .card-link:focus-visible .frame { box-shadow: 0 0 0 1px rgba(57, 216, 255, .8), 0 0 24px rgba(57, 216, 255, .35); }
.save.on { background: var(--neon); color: #001218; box-shadow: 0 0 14px rgba(57, 216, 255, .6); }
.save.big.on { background: var(--neon); color: #001218; }
#toast { box-shadow: 0 0 0 1px var(--neon), 0 0 26px rgba(57, 216, 255, .45); }

}
@media (prefers-reduced-motion: reduce) {
  .brand .word { animation: none; }
}

/* Admin > Upload */
.drop { display: grid; place-items: center; gap: 6px; text-align: center; padding: 38px 16px; margin: 16px 0 12px; border: 1.5px dashed var(--line-2, #333); border-radius: 6px; cursor: pointer; transition: border-color .15s, background .15s; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop b { font-weight: 500; font-size: 16px; }
.drop span { color: var(--text-3); font-size: 13.5px; }
.drop:hover, .drop.over { border-color: var(--neon, #39d8ff); background: rgba(57, 216, 255, .05); }
.up-bar { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin: 18px 0 10px; }
.up-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.up-clip { border: 1px solid var(--line); border-radius: 6px; padding: 14px; display: grid; gap: 8px; }
.up-clip p { margin: 0; }
.up-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.up-head .input { flex: 1; min-width: 0; height: 36px; }
.up-clip .meter { margin: 0; }
.small.warn { color: #F5B95A; }
.up-clip .badge { color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; flex: none; }
.up-clip .badge.ok { color: #7CE3A6; box-shadow: inset 0 0 0 1px rgba(124, 227, 166, .45); }
.up-clip .badge.bad { color: #FF8A8A; box-shadow: inset 0 0 0 1px rgba(255, 138, 138, .45); }
.up-go { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }

/* library sort + New badge */
.result-line { flex-wrap: wrap; }
.sortbar { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r); background: var(--surface); margin-left: auto; }
.sortbar button { appearance: none; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 3px; cursor: pointer; }
.sortbar button:hover { color: var(--text); }
.sortbar button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--neon, #39d8ff), 0 0 12px rgba(57, 216, 255, .25); }
.badge.new { background: var(--neon, #39d8ff); color: #001018; }
.frame .badge.new + .badge.k4 { left: 58px; }

/* signed-in greeting above the library search */
.hello-wrap { display: grid; gap: 10px; width: 100%; text-align: center; }
.ask { margin: 0; color: var(--text-2); font-size: clamp(16px, 1.6vw, 20px); font-weight: 350; font-stretch: 112%; min-height: 1.4em; transition: opacity .35s, transform .35s; }
.ask.out { opacity: 0; transform: translateY(6px); }
.hello { margin: 0; font-size: clamp(30px, 4.4vw, 54px); font-weight: 300; font-stretch: 120%; line-height: 1.05; text-align: center; }
@media (max-width: 640px) {
  .hello-wrap { text-align: center; }
  .result-line { justify-content: center; gap: 10px 12px; }
  .result-line .sortbar { margin-left: 0; }
}

/* frame pop: "9:16 STORY" over the frame you tapped */
.frame-pop {
  position: fixed; z-index: 80; pointer-events: none; white-space: nowrap;
  padding: 8px 14px; border-radius: var(--r); background: #000; color: #E8FBFF;
  font-size: 13px; font-weight: 600; font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px var(--neon, #39d8ff), 0 0 18px rgba(57, 216, 255, .45), 0 0 42px rgba(57, 216, 255, .18);
  text-shadow: 0 0 10px rgba(57, 216, 255, .7);
  opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .18s ease-out, transform .22s cubic-bezier(.2, 1.4, .4, 1);
}
.frame-pop b { color: var(--neon, #39d8ff); font-weight: 700; margin-right: 6px; }
.frame-pop.in { opacity: 1; transform: none; }
.frame-pop.gone { opacity: 0; transform: translateY(-4px); transition: opacity .35s, transform .35s; }
@media (prefers-reduced-motion: reduce) { .frame-pop { transition: opacity .2s; transform: none; } }

/* Admin > Members on phones: one card per person, nothing to scroll sideways */
@media (max-width: 720px) {
  .scroll-x:has(.members) { overflow: visible; }
  .members, .members tbody, .members tr, .members td { display: block; }
  .members thead { display: none; }
  .members tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px; margin-top: 10px; border: 1px solid var(--line); border-radius: 6px; }
  .members td { border: 0; padding: 0; min-width: 0; }
  .members td::before { content: attr(data-l); display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
  .members .m-email { grid-column: 1 / -1; overflow-wrap: anywhere; font-weight: 500; color: var(--text); }
  .members .m-email::before, .members .m-name::before { display: none; }
  .members .m-name { grid-column: 1 / -1; margin-top: -6px; color: var(--text-2); }
  .members .m-wide { grid-column: 1 / -1; font-size: 13.5px; color: var(--text); }
  .members .m-wide::before { display: inline; margin: 0 8px 0 0; }
  .members .m-joined { grid-column: 1 / -1; color: var(--text-2); font-size: 13px; }
  .members .m-joined::before { display: inline; margin: 0 6px 0 0; }
  .members select.input { width: 100%; }
}

/* locked: every download used. Previews get a Nube watermark, cards a lock */
.frame.wm-over::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='140'%3E%3Cg transform='rotate(-24 110 70)' fill='white' fill-opacity='.2' font-family='Arial, sans-serif' font-size='17' letter-spacing='7'%3E%3Ctext x='12' y='54'%3ENUBE%3C/text%3E%3Ctext x='122' y='124'%3ENUBE%3C/text%3E%3C/g%3E%3C/svg%3E"); background-size: 220px 140px;
}
.frame.wm-over::after {
  content: "NUBE"; position: absolute; inset: 0; z-index: 3; pointer-events: none; display: grid; place-items: center;
  font-family: var(--mark); font-size: clamp(18px, 9cqi, 64px); letter-spacing: .5em; text-indent: .5em;
  color: rgba(255, 255, 255, .5); text-shadow: 0 0 18px rgba(0, 0, 0, .45);
}
.frame { container-type: inline-size; }
.lock-badge { position: absolute; top: 9px; right: 52px; z-index: 4; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r); background: rgba(0, 0, 0, .65); color: #fff; }
.ico-lock { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn .ico-lock { width: 17px; height: 17px; }
.lock-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin: 4px 0 14px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--neon-3, #ff3ea5); background: rgba(255, 62, 165, .06); }
.lock-note > .ico-lock { width: 22px; height: 22px; flex: none; color: var(--neon-3, #ff3ea5); margin-top: 2px; }
.lock-note b { font-weight: 600; }
.lock-note p { margin: 4px 0 10px; color: var(--text-2); }
.dl.is-locked .dl-row { opacity: .45; }
.btn.dl-now.locked { background: var(--surface-2); color: var(--text-2); }

/* ---------- bell, slim sort row, phone tab bar ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.top-right { position: absolute; top: 14px; right: max(16px, env(safe-area-inset-right)); display: flex; gap: 8px; }
.bell { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--text); border: 1px solid var(--line-2); transition: border-color .15s, box-shadow .15s; }
.bell:hover { border-color: var(--neon, #39d8ff); box-shadow: 0 0 14px rgba(57, 216, 255, .3); }
.bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bell .dot { position: absolute; top: -4px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  font-style: normal; font-size: 11px; font-weight: 700; background: var(--neon-3, #ff3ea5); color: #fff; box-shadow: 0 0 10px rgba(255, 62, 165, .6); }

/* Popular | New | Filters: one thin, even line */
.result-line { justify-content: flex-end; gap: 0; min-height: 30px; }
.sortbar { display: inline-flex; align-items: center; gap: 0; padding: 0; background: none; margin: 0; }
.sortbar button, .result-line .filters-btn { appearance: none; border: 0; background: none; box-shadow: none; padding: 6px 2px; min-height: 0; border-radius: 0;
  font: inherit; font-size: 14px; font-weight: 450; letter-spacing: .04em; color: var(--text-3); cursor: pointer; }
.sortbar button:hover, .result-line .filters-btn:hover { color: var(--text); }
.sortbar button[aria-pressed="true"] { background: none; box-shadow: none; color: var(--text); text-shadow: 0 0 10px rgba(57, 216, 255, .55); }
.result-line .sep { display: inline-block; width: 1px; height: 14px; background: var(--line-2); margin: 0 16px; }
.result-line .filters-sep { display: none; }
@media (max-width: 900px) { .result-line .filters-sep { display: inline-block; } }

.notes-panel { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .35); }
.notes-card { position: absolute; top: 66px; right: max(16px, env(safe-area-inset-right)); width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto;
  background: rgba(14, 14, 18, .92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line-2); border-radius: 10px; padding: 14px; }
.notes-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.notes-list { display: grid; gap: 2px; }
.note-item { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 6px; color: var(--text); text-decoration: none; }
.note-item:hover { background: var(--surface); }
.note-item b { display: block; font-weight: 500; font-size: 14px; }
.note-item small { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 2px; }
.note-item.fresh small { color: var(--neon, #39d8ff); }
.note-item.warn .ni-ico { color: var(--neon-3, #ff3ea5); }
.ni-thumb { width: 54px; height: 34px; flex: none; border-radius: 3px; overflow: hidden; background: var(--surface); }
.ni-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ni-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface); }
.ni-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.tabbar { display: none; }
@media (max-width: 720px) {
  :root { --top-h: 70px; }
  .top { flex-direction: row; justify-content: center; align-items: center; padding-top: 14px; padding-bottom: 14px; }
  .top .nav { display: none; }
  .top-right { top: 50%; transform: translateY(-50%); }
  .notes-card { top: 70px; right: 16px; }
  body.has-tabbar { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body:not(.has-tabbar) .tabbar { display: none; }
  .result-line { justify-content: center; }
  .tabbar {
    display: flex; justify-content: space-around; align-items: stretch;
    position: fixed; z-index: 30; left: 14px; right: 14px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 66px; padding: 0 6px;
    border-radius: 999px; background: rgba(20, 20, 26, .5); border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-2); text-decoration: none; font-size: 11.5px; font-weight: 500; letter-spacing: .02em; }
  .tabbar .ti { height: 26px; display: grid; place-items: center; }
  .tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar a { position: relative; z-index: 1; -webkit-tap-highlight-color: transparent; }
  .tabbar a[aria-current="page"] { color: #8CC4FF; text-shadow: 0 0 10px rgba(110, 180, 255, .45); }
  .tabbar a[aria-current="page"] svg { filter: drop-shadow(0 0 5px rgba(110, 180, 255, .5)); }
  /* liquid glass bubble: the outer span glides (left/width, Web Animations), the lens inside
     carries the glass and does the squash, swell and RGB split */
  .tab-bubble { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; pointer-events: none; }
  .tb-lens {
    position: absolute; inset: 0; border-radius: 999px; display: block;
    background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 55%, rgba(140, 190, 255, .07));
    backdrop-filter: blur(3px) saturate(210%) brightness(1.18) contrast(1.06); -webkit-backdrop-filter: blur(3px) saturate(210%) brightness(1.18) contrast(1.06);
    box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .6), inset 0 -1.5px 2px rgba(255, 255, 255, .16), inset 0 0 14px rgba(255, 255, 255, .07), 0 8px 22px rgba(0, 0, 0, .4);
    transition: transform .34s cubic-bezier(.25, 1.5, .45, 1);
  }
  .tb-lens::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
    background: conic-gradient(from 210deg, rgba(255, 92, 178, .9), rgba(255, 214, 102, .65), rgba(96, 255, 205, .6), rgba(96, 176, 255, .9), rgba(186, 112, 255, .8), rgba(255, 92, 178, .9));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    opacity: .6; filter: blur(.4px); transition: opacity .3s;
  }
  .tb-lens::after {
    content: ""; position: absolute; left: 14%; right: 14%; top: 3px; height: 38%; border-radius: 999px;
    background: linear-gradient(rgba(255, 255, 255, .24), rgba(255, 255, 255, 0)); opacity: .55;
  }
  .tab-bubble.press .tb-lens { transform: scale(1.16, 1.2); }
  .tab-bubble.press .tb-lens::before { opacity: .95; }
  /* locking into place: red and cyan ghosts pull apart, then snap back together */
  .tab-bubble.split .tb-lens { animation: tb-split .48s ease-out; }
  @keyframes tb-split {
    0% { box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .6), inset 0 -1.5px 2px rgba(255, 255, 255, .16), 0 8px 22px rgba(0, 0, 0, .4), -1px 0 0 rgba(255, 40, 90, 0), 1px 0 0 rgba(40, 220, 255, 0); }
    30% { box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .6), inset 0 -1.5px 2px rgba(255, 255, 255, .16), 0 8px 22px rgba(0, 0, 0, .4), -4px 0 0 rgba(255, 40, 90, .55), 4px 0 0 rgba(40, 220, 255, .55); }
    100% { box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .6), inset 0 -1.5px 2px rgba(255, 255, 255, .16), 0 8px 22px rgba(0, 0, 0, .4), 0 0 0 rgba(255, 40, 90, 0), 0 0 0 rgba(40, 220, 255, 0); }
  }
  .tabbar a.split > span { animation: tb-split-text .48s ease-out; }
  .tabbar a.split svg, .tabbar a.split .avatar { animation: tb-split-icon .48s ease-out; }
  @keyframes tb-split-text {
    30% { text-shadow: -2px 0 rgba(255, 40, 90, .8), 2px 0 rgba(40, 220, 255, .8); }
    100% { text-shadow: 0 0 10px rgba(110, 180, 255, .45); }
  }
  @keyframes tb-split-icon {
    30% { filter: drop-shadow(-2px 0 0 rgba(255, 40, 90, .85)) drop-shadow(2px 0 0 rgba(40, 220, 255, .85)); }
    100% { filter: drop-shadow(0 0 5px rgba(110, 180, 255, .5)); }
  }
  @media (prefers-reduced-motion: reduce) { .tb-lens { transition: none; } .tab-bubble.split .tb-lens, .tabbar a.split > span, .tabbar a.split svg { animation: none; } }
  .avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12.5px; font-weight: 700; color: #000;
    background: linear-gradient(135deg, var(--neon, #39d8ff), var(--neon-2, #8b6cff)); }
  .tabbar a[aria-current="page"] .avatar { box-shadow: 0 0 0 2px #000, 0 0 0 3.5px var(--neon, #39d8ff); }
  #toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* slogan under the wordmark */
.brand { flex-direction: column; gap: 7px; text-align: center; }
.brand .tagline { font-size: 10.5px; font-weight: 500; font-stretch: 125%; letter-spacing: .32em; margin-right: -.32em; color: var(--text-3); line-height: 1.2; }
:root { --top-h: 118px; }
@media (max-width: 720px) {
  :root { --top-h: 84px; }
  .brand { gap: 6px; }
  .brand .tagline { font-size: 9.5px; letter-spacing: .28em; margin-right: -.28em; white-space: nowrap; }
  .top-right { top: 12px; transform: none; right: max(12px, env(safe-area-inset-right)); }
  .bell { width: 38px; height: 38px; }
  .bell svg { width: 18px; height: 18px; }
}
@media (max-width: 359px) { .brand .tagline { white-space: normal; max-width: calc(100vw - 130px); } }

/* every ~6 s the sign sputters like a tube going out: the whole word dips, the B nearly dies */
.brand .word i { font-style: normal; }
.brand .word { animation: flicker 2.6s linear 1 both, sign-sputter 6s linear 2.6s infinite; }
.brand .word i.tube { animation: tube-dying 6s linear 2.6s infinite; }
@keyframes sign-sputter {
  0%, 89%, 100% { opacity: 1; }
  90.67% { opacity: .55; } 91.67% { opacity: 1; } 93% { opacity: .35; } 93.83% { opacity: .95; }
  97.33% { opacity: 1; } 98% { opacity: .6; } 98.67% { opacity: 1; }
}
@keyframes tube-dying {
  0%, 89%, 100% { opacity: 1; text-shadow: inherit; }
  90% { opacity: .15; text-shadow: none; } 91% { opacity: 1; }
  92.33% { opacity: .1; text-shadow: none; } 92.83% { opacity: .7; } 93.67% { opacity: .05; text-shadow: none; }
  96.5% { opacity: .05; text-shadow: none; } 97.33% { opacity: .9; } 97.83% { opacity: .2; text-shadow: none; } 99% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .brand .word, .brand .word i.tube { animation: none; } }

/* frame buttons on phones: bigger targets with thin dividers between them */
@media (max-width: 720px) {
  .framebar { width: 100%; display: flex; justify-content: center; }
  .frames { display: flex; width: 100%; max-width: 400px; padding: 4px; gap: 0; }
  .frames button { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: 22px auto; place-items: center; align-content: center; }
  .frames button { flex: 1; min-height: 66px; padding: 10px 4px; gap: 6px; position: relative; border-radius: 4px; }
  .frames button b { font-size: 14.5px; }
  .frames button + button::before, .cuts button + button::before {
    content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--line-2); transition: opacity .2s;
  }
  .frames button[aria-pressed="true"]::before, .frames button[aria-pressed="true"] + button::before,
  .cuts button[aria-pressed="true"]::before, .cuts button[aria-pressed="true"] + button::before { opacity: 0; }
  .cuts { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; }
  .cuts button { flex: 1; justify-content: center; min-height: 50px; position: relative; font-size: 14.5px; }
}

/* never show the phone's own play button over the background clip */
.hero-video { pointer-events: none; }
.hero-video::-webkit-media-controls, .hero-video::-webkit-media-controls-start-playback-button, .hero-video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }

/* visitors' menu: hamburger on phones only (computers keep Library / Sign in under the logo) */
.menu-btn { display: none; }
.menu-btn svg { stroke-width: 1.9; }
.menu-card { padding: 10px; }
.menu-list { display: grid; margin-bottom: 10px; }
.menu-list a { padding: 13px 12px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 16px; font-weight: 450; font-stretch: 112%; letter-spacing: .02em; }
.menu-list a + a { border-top: 1px solid var(--line); }
.menu-list a:hover { background: var(--surface); }
@media (max-width: 720px) { .menu-btn { display: grid; } }

/* clip page preview: no player controls, tap to pause; a quiet play mark while paused */
.frame.tap-play { cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.frame video { -webkit-touch-callout: none; }
.stage-paused { position: absolute; z-index: 4; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; pointer-events: none;
  background: rgba(0, 0, 0, .55) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5Z' fill='white'/%3E%3C/svg%3E") center / 26px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }

.members td.m-wide { white-space: nowrap; font-size: 13.5px; color: var(--text-2); }
@media (max-width: 720px) { .members td.m-wide { white-space: normal; color: var(--text); } }

/* Admin > Upload: tagging */
.up-head { align-items: flex-start; }
.up-thumb { width: 72px; height: 48px; flex: none; border-radius: 4px; overflow: hidden; background: var(--surface); display: grid; place-items: center; }
.up-thumb img { width: 100%; height: 100%; object-fit: cover; }
.up-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.up-sum { margin: 0; }
.up-sum li.none { color: var(--text-3); background: none; box-shadow: none; padding-left: 0; }
.up-clip .tagger { display: none; }
.up-clip.open .tagger { display: grid; }
.up-clip.open .up-sum { display: none; }
.up-toggle { justify-self: start; font-size: 14px; }
.tagger { gap: 12px; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.tag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tag-row { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; align-items: start; }
.tag-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding-top: 7px; }
.tag-label i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .7; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tchip { appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; padding: 6px 11px; border-radius: 999px; color: var(--text-2);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); transition: color .12s, box-shadow .12s, background .12s; }
.tchip:hover { color: var(--text); }
.tchip[aria-pressed="true"] { color: #001018; background: var(--neon, #39d8ff); box-shadow: 0 0 12px rgba(57, 216, 255, .35); }
.tagger textarea.input { resize: vertical; min-height: 54px; }
details.bulk { margin: 0 0 12px; border: 1px solid var(--neon, #39d8ff); border-radius: 8px; padding: 12px 14px; box-shadow: 0 0 18px rgba(57, 216, 255, .1); }
details.bulk summary { cursor: pointer; display: grid; gap: 2px; list-style: none; }
details.bulk summary::-webkit-details-marker { display: none; }
details.bulk .tagger { display: grid; margin-top: 10px; }
@media (max-width: 720px) {
  .tag-row { grid-template-columns: 1fr; }
  .tag-label { padding-top: 0; }
  .tag-grid { grid-template-columns: 1fr; }
  .up-thumb { width: 56px; height: 40px; }
}

/* Upload: go-live switch */
.golive { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; cursor: pointer; max-width: 640px; }
.golive input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.golive .sw { flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); position: relative; transition: background .2s, box-shadow .2s; margin-top: 1px; }
.golive .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2); transition: transform .2s, background .2s; }
.golive input:checked + .sw { background: var(--neon, #39d8ff); box-shadow: 0 0 12px rgba(57, 216, 255, .4); }
.golive input:checked + .sw::after { transform: translateX(18px); background: #001018; }
.golive input:focus-visible + .sw { outline: 1.5px solid var(--neon, #39d8ff); outline-offset: 2px; }
.golive b { display: block; font-weight: 500; }
.golive small { display: block; color: var(--text-3); font-size: 13px; line-height: 1.45; margin-top: 2px; }
@media (max-width: 720px) {
  .up-head { flex-wrap: wrap; }
  .up-head .badge { order: 3; margin-left: 66px; white-space: normal; }
}

/* ---------- Saved: select several clips and download them together ---------- */
.saved-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pick-dot { display: none; position: absolute; z-index: 3; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85); background: rgba(0,0,0,.35); box-shadow: 0 1px 6px rgba(0,0,0,.4); }
.is-picking .pick-dot { display: block; }
.is-picking .card .save { display: none; }
.is-picking .card .frame { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.is-picking .card.picked .frame { box-shadow: 0 0 0 2px var(--neon), 0 0 18px rgba(0, 170, 255, .35); transform: scale(.97); }
.is-picking .card.picked .pick-dot { background: var(--neon); border-color: var(--neon); }
.is-picking .card.picked .pick-dot::after { content: ""; position: absolute; left: 8px; top: 3px; width: 7px; height: 13px;
  border: solid #000; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.pick-bar { position: fixed; z-index: 35; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom));
  width: min(560px, calc(100% - 28px)); padding: 12px 14px; border-radius: 10px;
  background: rgba(14, 14, 18, .82); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.pick-row { display: flex; align-items: center; gap: 12px; }
.pick-count { flex: 1; text-align: center; color: var(--text-2, #bbb); font-size: 14px; }
.pick-bar .btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: #000; }
.pick-bar .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pick-note { margin: 0; font-size: 13px; color: var(--text-3, #999); text-align: center; }
.pick-note:empty { display: none; }
.pick-note:not(:empty) { margin-top: 8px; }
body.picking .wrap { padding-bottom: 110px; }
@media (max-width: 720px) {
  .saved-tools { width: 100%; justify-content: center; }
  body.has-tabbar .pick-bar { bottom: calc(88px + env(safe-area-inset-bottom)); }
  body.picking .wrap { padding-bottom: 120px; }
}

/* Saved > Show all: every cut of every saved clip, grouped by frame, each card tagged with its ratio */
.frames button i.all-ico { display: inline-grid; grid-template-columns: 9px 5px; grid-template-rows: 5px 9px; gap: 2px; width: auto !important; height: auto !important; border: 0 !important; background: none !important; }
.all-ico s { display: block; border: 1.5px solid currentColor; border-radius: 1.5px; }
.all-ico s:nth-child(1) { grid-column: 1; grid-row: 1; }
.all-ico s:nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
.all-ico s:nth-child(3) { grid-column: 1; grid-row: 2; }
.ratio-sec + .ratio-sec { margin-top: 40px; }
.ratio-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-weight: 400; font-size: 15px; }
.ratio-head i { flex: none; border: 1.5px solid var(--neon, #39d8ff); border-radius: 2px; box-shadow: 0 0 10px rgba(57, 216, 255, .35); }
.ratio-head b { font-size: 26px; font-weight: 500; font-stretch: 116%; letter-spacing: .02em; color: var(--text); }
.ratio-head span { color: var(--neon, #39d8ff); text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; font-weight: 600; }
.ratio-head em { margin-left: auto; font-style: normal; color: var(--text-3, #888); font-size: 13px; }
.ratio-tag { position: absolute; z-index: 2; left: 9px; bottom: 9px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px 4px 8px; border-radius: 3px;
  background: rgba(0, 0, 0, .72); box-shadow: inset 0 0 0 1px rgba(57, 216, 255, .55); color: #fff; line-height: 1; }
.ratio-tag i { flex: none; border: 1.5px solid var(--neon, #39d8ff); border-radius: 1.5px; }
.ratio-tag b { font-size: 14px; font-weight: 600; letter-spacing: .03em; }
.ratio-tag small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--neon, #39d8ff); }
@media (max-width: 720px) {
  .saved-tools .frames.compact { flex-wrap: wrap; justify-content: center; }
  .ratio-head b { font-size: 22px; }
  .ratio-tag small { display: none; }
}
@container (max-width: 250px) { .ratio-tag small { display: none; } }
.card.leaving { opacity: 0; transform: scale(.94); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
@media (max-width: 720px) {
  .saved-tools .frames.compact { flex-wrap: nowrap; }
  .saved-tools .frames.compact button { padding: 7px 2px; min-width: 0; }
}

/* clip codes (NB-1006): small, monospaced-feeling, tap to copy on the clip page */
.code-copy { appearance: none; border: 0; background: rgba(57, 216, 255, .08); box-shadow: inset 0 0 0 1px rgba(57, 216, 255, .35); color: var(--text); border-radius: 3px;
  padding: 3px 8px; font: inherit; font-size: 13px; letter-spacing: .08em; font-variant-numeric: tabular-nums; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.code-copy span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--neon, #39d8ff); }
.code-copy:hover { background: rgba(57, 216, 255, .16); }
em.code, b.code { font-style: normal; font-weight: 500; font-size: .82em; letter-spacing: .08em; color: var(--neon, #39d8ff); }

/* ---------- filter panel (Nov 11, 2026): where + quick picks + folded sections ---------- */
.side .fsec { border-top: 1px solid var(--line); }
.fsec.where, .fsec.quick { padding: 16px 0; }
.fsec-label { display: block; margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3, #8a9096); }
.fold-head { appearance: none; border: 0; background: none; width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 2px; cursor: pointer; color: var(--text); text-align: left; font: inherit; }
.fold-head b { font-weight: 500; font-size: 15px; font-stretch: 110%; flex: none; }
.fold-sum { flex: 1; min-width: 0; text-align: right; font-size: 13px; color: var(--text-3, #8a9096); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold.has .fold-sum { color: var(--neon, #39d8ff); }
.chev { flex: none; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; color: var(--text-3, #8a9096); }
.fold.open .chev { transform: rotate(-135deg) translate(-2px, -2px); }
.fold-head:hover .chev, .fold-head:hover .fold-sum { color: var(--text); }
.fold-body { padding: 0 0 18px; animation: fold-in .18s ease; }
@keyframes fold-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sub-label { display: block; margin: 12px 0 8px; font-size: 12px; color: var(--text-3, #8a9096); letter-spacing: .04em; }
.fold-body .sub-label:first-child { margin-top: 2px; }
.fold-body .togs { margin-top: 12px; }
@media (max-width: 720px) {
  .fold-head { padding: 18px 2px; }
  .fold-head b { font-size: 16px; }
  .chip { min-height: 36px; }
}
.quick-head { display: flex; align-items: baseline; justify-content: space-between; }
.quick-head .fsec-label { margin-bottom: 10px; }
.quick-head .link { font-size: 13px; }
.quick-empty, .quick-help { margin: 0 0 4px; font-size: 13px; color: var(--text-3, #8a9096); }
.quick-help { margin-bottom: 10px; }
.chip.qpick { background: rgba(57, 216, 255, .12); color: #E8FBFF; box-shadow: inset 0 0 0 1px var(--neon); }
.chip.qpick span { margin-left: 4px; opacity: .8; }
.chip.qadd span { color: var(--neon, #39d8ff); margin-right: 2px; }
.fsec.quick.editing { padding-bottom: 18px; }
.quick-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.quick-foot .link { font-size: 13px; }

/* "Filter your ideas": the slim button under the search bar (opens the sheet on phones, shows the column on computers) */
.ideas-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; margin-top: -8px;
  padding: 6px 16px 6px 13px; border-radius: 999px; background: transparent; border: 1px solid rgba(57, 216, 255, .28);
  color: var(--text-2); font: inherit; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  transition: color .15s, border-color .15s, box-shadow .15s, background .15s; }
.ideas-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ideas-btn:hover, .ideas-btn[aria-expanded="true"] { color: #E8FBFF; border-color: rgba(57, 216, 255, .7); box-shadow: 0 0 14px rgba(57, 216, 255, .22); }
.ideas-btn.has { color: #E8FBFF; border-color: var(--neon, #39d8ff); background: rgba(57, 216, 255, .08); }
.ideas-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--neon, #39d8ff); color: #001018; font-size: 11px; letter-spacing: 0; display: inline-grid; place-items: center; }
.ideas-n[hidden] { display: none; }
/* computers: the filter column is off by default and slides in / out from the left with the Filter your ideas button */
@media (min-width: 901px) {
  .lib { grid-template-columns: 0px minmax(0, 1fr); column-gap: 0; overflow: clip; overflow-clip-margin: 24px;
    transition: grid-template-columns .5s cubic-bezier(.3, .7, .2, 1), column-gap .5s cubic-bezier(.3, .7, .2, 1); }
  .lib.side-on { grid-template-columns: 240px minmax(0, 1fr); column-gap: 40px; }
  .lib .side { opacity: 0; transform: translateX(-36px); visibility: hidden; min-width: 240px;
    transition: opacity .3s ease, transform .5s cubic-bezier(.3, .7, .2, 1), visibility 0s linear .5s; }
  .lib.side-on .side { opacity: 1; transform: none; visibility: visible;
    transition: opacity .4s ease .08s, transform .5s cubic-bezier(.3, .7, .2, 1), visibility 0s; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { .lib, .lib .side { transition: none !important; } }

/* library: the home page's neon divider, under "Filter your ideas" */
.neon-rule { justify-self: stretch; height: 1px; margin: 22px 0 18px;
  background: linear-gradient(90deg, transparent, var(--neon) 25%, var(--neon-2) 75%, transparent);
  box-shadow: 0 0 10px rgba(57, 216, 255, .7), 0 0 24px rgba(163, 92, 255, .4); }

/* admin bell: software update notes */
.notes-card { max-height: min(78vh, 640px); overflow-y: auto; overscroll-behavior: contain; }
.notes-sub { margin: -2px 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3, #8a9096); }
.note-item.update { align-items: flex-start; }
.note-item.update:hover { background: none; }
.note-item.update .ni-ico { color: var(--neon, #39d8ff); }
.note-item.update ul { margin: 8px 0 2px; padding-left: 16px; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.note-item.update li + li { margin-top: 3px; }
.note-item.update + .note-item.update { border-top: 1px solid var(--line); border-radius: 0; padding-top: 12px; }

/* Drone / 4K in the sort row are filters: lit in neon when on */
.sortbar button.sort-filter[aria-pressed="true"] { color: #E8FBFF; text-shadow: 0 0 10px rgba(57, 216, 255, .8); }
.sortbar button { white-space: nowrap; }
@media (max-width: 720px) {
  .result-line .sep { margin: 0 11px; }
  .sortbar button { font-size: 13.5px; letter-spacing: .02em; }
}
@media (max-width: 380px) { .result-line .sep { margin: 0 8px; } }

/* search suggestions: 4 pills that slide out under the search bar while it's focused */
.suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-height: 0; overflow: hidden; opacity: 0; margin: -14px 0 -8px;
  transition: max-height .25s ease, opacity .2s ease, margin .25s ease; }
.suggest.open { max-height: 120px; opacity: 1; margin: -6px 0 0; }
.sg-pill { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 11px; border-radius: 999px;
  background: rgba(255, 62, 165, .06); border: 1px solid rgba(255, 111, 216, .45); color: var(--text); font: inherit; font-size: 13.5px; line-height: 1;
  transition: background .15s, box-shadow .15s, transform .15s; }
.sg-pill span { color: #FF6FD8; font-weight: 600; }
.sg-pill:hover { background: rgba(255, 62, 165, .14); box-shadow: 0 0 14px rgba(255, 62, 165, .3); }
.sg-pill:active { transform: scale(.96); }
.suggest.open .sg-pill { animation: sg-in .28s ease both; }
.suggest.open .sg-pill:nth-child(2) { animation-delay: .04s; }
.suggest.open .sg-pill:nth-child(3) { animation-delay: .08s; }
.suggest.open .sg-pill:nth-child(4) { animation-delay: .12s; }
@keyframes sg-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .suggest, .suggest.open .sg-pill { transition: none; animation: none; } }

/* the library's neon line pulses: colors flow out from the middle to both ends (Nov 11, 2026) */
.neon-rule { position: relative; background: none; box-shadow: none; animation: rule-pulse 2.4s ease-in-out infinite; }
.neon-rule::before, .neon-rule::after {
  content: ""; position: absolute; top: 0; left: 50%; width: 50%; height: 1px;
  background-image: linear-gradient(90deg, #39D8FF, #A35CFF, #FF3EA5, #A35CFF, #39D8FF); background-size: 260px 1px;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent);
  filter: drop-shadow(0 0 4px rgba(57, 216, 255, .85)) drop-shadow(0 0 10px rgba(163, 92, 255, .55));
  animation: rule-flow 2.4s linear infinite;
}
/* the left half is the right half mirrored, so the colors meet in the middle and travel outward */
.neon-rule::before { left: 0; transform: scaleX(-1); }
@keyframes rule-flow { from { background-position: 0 0; } to { background-position: 260px 0; } }
@keyframes rule-pulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .neon-rule, .neon-rule::before, .neon-rule::after { animation: none; } }

/* slower, subtler pulse on the library line */
.neon-rule { animation-duration: 7s; }
.neon-rule::before, .neon-rule::after { animation-duration: 11s; }
@keyframes rule-pulse { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }

/* search bars: the same slow color flow on the outline, pink to violet moving out from the top middle */
.search { background: #050507 padding-box; }
.search::before, .search::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background-image: linear-gradient(90deg, #FF3EA5, #FF6FD8, #C86BFF, #FF6FD8, #FF3EA5); background-size: 320px 100%;
  background-position: 50% 0; animation: search-flow 11s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  clip-path: inset(-2px -2px -2px 50%);
}
/* the left half is the right half mirrored, so the colors leave the middle in both directions */
.search::before { transform: scaleX(-1); }
@keyframes search-flow { from { background-position: 50% 0; } to { background-position: calc(50% + 320px) 0; } }
.search { animation: search-glow 7s ease-in-out infinite; }
.search:focus-within { animation: none; }
@keyframes search-glow {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 62, 165, .18), 0 0 36px rgba(200, 107, 255, .1); }
  50% { box-shadow: 0 0 18px rgba(255, 62, 165, .28), 0 0 46px rgba(200, 107, 255, .16); }
}
@media (prefers-reduced-motion: reduce) { .search, .search::before, .search::after { animation: none; } }

/* Nov 11 (later): one ring instead of two mirrored halves (no seam in the middle); the colors chase
   all the way around the search bar. --sb-ang is animated 0 -> 360deg. */
@property --sb-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.search::after { content: none; display: none; }
.search::before {
  transform: none; clip-path: none; animation: search-chase 6s linear infinite;
  background-image: conic-gradient(from var(--sb-ang), #FF3EA5, #FF6FD8, #C86BFF, #8F6BFF, #C86BFF, #FF6FD8, #FF3EA5);
  background-size: 100% 100%; background-position: 0 0;
}
@keyframes search-chase { to { --sb-ang: 360deg; } }
/* a little quicker on the library line too */
.neon-rule { animation-duration: 5s; }
.neon-rule::before, .neon-rule::after { animation-duration: 7s; }
@media (prefers-reduced-motion: reduce) { .search::before, .neon-rule, .neon-rule::before, .neon-rule::after { animation: none; } }

/* the aqua dot that leads the search outline's colors (moved by chase() in app.js) */
.sb-dot { display: none; }
.sb-js .sb-dot {
  display: block; position: absolute; left: 0; top: 0; z-index: 2; width: 5px; height: 5px; margin: -3.25px 0 0 -3.25px; border-radius: 50%;
  background: #7FF3FF; box-shadow: 0 0 4px 1px #39D8FF, 0 0 10px 2px rgba(57, 216, 255, .7); pointer-events: none; will-change: transform;
}
/* with the dot running, JS sets the angle; the colors build from pink and violet to aqua right behind the dot */
.sb-js .search::before {
  animation: none;
  background-image: conic-gradient(from var(--sb-dot-ang, 0deg), #FF3EA5 0deg, #FF6FD8 70deg, #C86BFF 150deg, #8F6BFF 230deg, #5FA8FF 300deg, #39D8FF 350deg, #7FF3FF 360deg);
}
/* JB: a one-pixel dot, very slow (24 s a lap) */
.sb-js .sb-dot { width: 1px; height: 1px; margin: -0.5px 0 0 -0.5px; background: #B8FAFF; box-shadow: 0 0 2px 1px rgba(57, 216, 255, .9), 0 0 6px 1px rgba(57, 216, 255, .45); }
/* JB: 2px dot, centered on the outline; no hard edge where the colors meet at the dot */
.sb-js .sb-dot { width: 2px; height: 2px; margin: -1px 0 0 -1px; }
.sb-js .search::before {
  background-image: conic-gradient(from var(--sb-dot-ang, 0deg), #7FF3FF 0deg, #C86BFF 22deg, #FF3EA5 60deg, #FF6FD8 120deg, #C86BFF 190deg, #8F6BFF 250deg, #5FA8FF 305deg, #39D8FF 345deg, #7FF3FF 360deg);
}

/* pull to refresh (phones): the top bar and page slide down together, a neon spinner sits in the gap */
html, body { overscroll-behavior-y: none; }
body.ptr-pulling .top, body.ptr-pulling #view { will-change: transform; }
body.ptr-ease .top, body.ptr-ease #view { transition: transform .38s cubic-bezier(.2, .9, .25, 1); }
body.ptr-ease .ptr { transition: transform .38s cubic-bezier(.2, .9, .25, 1), opacity .3s ease; }
.ptr { position: fixed; z-index: 60; left: 50%; top: env(safe-area-inset-top); width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none; opacity: 0; transform: translate3d(-50%, -19px, 0);
  background: rgba(10, 10, 14, .92); border: 1px solid rgba(57, 216, 255, .3); box-shadow: 0 4px 18px rgba(0, 0, 0, .5); }
.ptr svg { width: 18px; height: 18px; fill: none; stroke: var(--text-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.ptr.armed { border-color: var(--neon, #39d8ff); box-shadow: 0 0 16px rgba(57, 216, 255, .5); }
.ptr.armed svg { stroke: #E8FBFF; }
.ptr.spin svg { animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
.haptic { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* header: NUBE CLIPS, with how to say it underneath */
.brand .word i.gap { display: inline-block; width: .55em; }
.brand .tagline.say { font-style: italic; font-stretch: 100%; letter-spacing: .14em; margin-right: -.14em; font-size: 12px; text-transform: none; }
@media (max-width: 720px) { .brand .tagline.say { font-size: 11px; letter-spacing: .12em; margin-right: -.12em; } }
/* computers: hovering a frame button shows what it's for and its HD size */
.frame-pop.dims { display: grid; justify-items: center; gap: 4px; padding: 9px 14px 10px; }
.frame-pop.dims b { margin: 0; font-size: 12px; }
.frame-pop.dims span { font-size: 15px; letter-spacing: .06em; font-stretch: 100%; font-variant-numeric: tabular-nums; text-transform: none; color: #fff; text-shadow: none; }

/* computers: never more than 4 previews per row (each column is at least a quarter of the row) */
@media (min-width: 721px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - 54px) / 4)), 1fr)); }
  .grid.tall { grid-template-columns: repeat(auto-fill, minmax(max(168px, calc((100% - 54px) / 4)), 1fr)); }
}

/* "All ratios" button above the frames, and the mixed mosaic it shows */
.allr-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; margin-bottom: -6px;
  padding: 7px 18px 7px 14px; border-radius: 999px; background: transparent; border: 1px solid var(--line-2);
  color: var(--text-2); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  transition: color .15s, border-color .15s, box-shadow .15s, background .15s; }
.allr-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.allr-btn:hover { color: var(--text); border-color: rgba(57, 216, 255, .5); }
.allr-btn[aria-pressed="true"] { color: #E8FBFF; border-color: var(--neon, #39d8ff); background: rgba(57, 216, 255, .1); box-shadow: 0 0 16px rgba(57, 216, 255, .3); }
.grid.mixed { display: grid !important; grid-template-columns: repeat(var(--mcols, 4), minmax(0, 1fr)) !important; grid-auto-rows: 4px; grid-auto-flow: row dense; column-gap: 18px; row-gap: 0; align-items: start; }
.grid.mixed .card { grid-column: span 1; }
.grid.mixed .card.wide { grid-column: span 2; }
@media (max-width: 720px) { .grid.mixed { column-gap: 12px; } }
/* "All ratios": one big button on top of the frame choices, as wide as they are */
.fr-stack { display: inline-grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 100%; }
.all-big { appearance: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  padding: 14px 18px; border-radius: var(--r, 4px); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02);
  color: var(--text-2); font: inherit; transition: color .15s, border-color .15s, box-shadow .15s, background .15s; }
.all-big svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.all-big b { font-size: 15px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.all-big small { font-size: 12.5px; color: var(--text-3); }
.all-big:hover { color: var(--text); border-color: rgba(57, 216, 255, .5); }
.all-big[aria-pressed="true"] { color: #E8FBFF; border-color: var(--neon, #39d8ff); background: rgba(57, 216, 255, .08); box-shadow: 0 0 18px rgba(57, 216, 255, .3), inset 0 0 0 1px rgba(57, 216, 255, .35); }
.all-big[aria-pressed="true"] small { color: rgba(232, 251, 255, .7); }
@media (max-width: 720px) { .fr-stack { display: grid; width: 100%; } .all-big small { display: none; } }
/* "All" sits first in the frame row */
.frames button.all-frames i.all-ico { display: inline-grid; grid-template-columns: 9px 5px; grid-template-rows: 5px 9px; gap: 2px; width: auto; height: auto; border: 0; background: none; }
.frames button.all-frames i.all-ico s { display: block; border: 1.5px solid currentColor; border-radius: 1.5px; }
.frames button.all-frames i.all-ico s:nth-child(1) { grid-column: 1; grid-row: 1; }
.frames button.all-frames i.all-ico s:nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
.frames button.all-frames i.all-ico s:nth-child(3) { grid-column: 1; grid-row: 2; }
/* computers: clip titles and subtitles stay on one line */
@media (min-width: 721px) {
  .card .meta b, .card .meta span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* members' footer: the home page's mountain panorama at the bottom of every signed-in page */
.app-foot { position: relative; overflow: hidden; isolation: isolate; margin-top: 72px; min-height: 300px; display: flex; align-items: flex-end; }
.app-foot[hidden] { display: none; }
.af-bg { position: absolute; inset: 0; z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%); mask-image: linear-gradient(to bottom, transparent 0%, #000 38%); }
.af-bg .scene { position: absolute; left: -3%; bottom: 0; width: 106%; height: 100%; animation: drift 45s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.af-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%); }
.af-body { width: 100%; display: grid; justify-items: center; gap: 14px; padding: 140px 16px 34px; text-align: center; }
.af-brand { display: grid; justify-items: center; gap: 6px; color: var(--text); text-decoration: none; }
.af-word { font-family: var(--mark); font-size: 14px; letter-spacing: .6em; margin-right: -.6em; color: #E8FBFF; text-shadow: 0 0 12px rgba(57, 216, 255, .55); }
.af-tag { font-size: 10px; font-weight: 500; font-stretch: 125%; letter-spacing: .32em; margin-right: -.32em; color: var(--text-3); }
.af-links { display: flex; gap: 22px; }
.af-links a { color: var(--text-2); text-decoration: none; font-size: 13.5px; letter-spacing: .04em; }
.af-links a:hover { color: var(--text); }
.af-copy { margin: 0; font-size: 12px; color: var(--text-3); }
body.has-tabbar .af-body { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
@media (max-width: 720px) { .app-foot { min-height: 400px; margin-top: 48px; } .af-body { padding-top: 150px; } }
@media (prefers-reduced-motion: reduce) { .af-bg .scene { animation: none; } }
body.has-tabbar.has-foot { padding-bottom: 0; }
/* JB: a skinny All ratios bar joined to the frame box below it, letters spread across its width */
.fr-stack { gap: 0; }
.fr-stack .frames { border-top-left-radius: 0; border-top-right-radius: 0; }
.all-big { padding: 6px 14px; gap: 10px; border-color: var(--line); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; }
.all-big[aria-pressed="true"] { border-bottom: 0; box-shadow: inset 0 0 0 1px rgba(57, 216, 255, .55), 0 0 16px rgba(57, 216, 255, .25); }
.all-big small { display: none; }
.all-big svg { width: 15px; height: 15px; }
.all-big b { font-size: 12.5px; letter-spacing: 1.05em; margin-right: -1.05em; }
@media (max-width: 720px) { .all-big b { letter-spacing: .8em; margin-right: -.8em; } }

/* computers: "Filter your ideas" glides to the filter column and pulses it pink */
@media (min-width: 901px) {
  .side { padding: 12px 12px 24px 14px; border-radius: 8px; transition: background .3s; }
  .side.pulse { animation: side-pulse 1.25s ease-in-out 2; }
}
@keyframes side-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 62, 165, 0), 0 0 0 rgba(255, 62, 165, 0); background: rgba(255, 62, 165, 0); }
  45% { box-shadow: 0 0 0 1px rgba(255, 111, 216, .9), 0 0 30px rgba(255, 62, 165, .45); background: rgba(255, 62, 165, .07); }
}
@media (prefers-reduced-motion: reduce) { .side.pulse { animation: none; box-shadow: 0 0 0 1px rgba(255, 111, 216, .9); } }
/* long section names wrap instead of pushing the summary and arrow out */
.fold-head b { flex: 1 1 auto; min-width: 0; }
.fold-sum { flex: 0 1 auto; max-width: 48%; }
/* JB: a bit more room in the All ratios bar */
.all-big { padding: 9px 14px; }
/* one long, subtle pink pulse on the filter column (computers) */
@media (min-width: 901px) { .side.pulse { animation: side-pulse-soft 2.6s ease-in-out 1; } }
@keyframes side-pulse-soft {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 111, 216, 0), 0 0 0 rgba(255, 62, 165, 0); background: rgba(255, 62, 165, 0); }
  40%, 60% { box-shadow: 0 0 0 1px rgba(255, 111, 216, .5), 0 0 22px rgba(255, 62, 165, .22); background: rgba(255, 62, 165, .035); }
}
.suggest { max-width: 820px; margin-left: auto; margin-right: auto; }
/* JB: the pink outline glows in, then fades away slowly over about 12 seconds */
@media (min-width: 901px) { .side.pulse { animation: side-pulse-long 12s cubic-bezier(.25, .1, .25, 1) 1 forwards; } }
@keyframes side-pulse-long {
  0% { box-shadow: 0 0 0 1px rgba(255, 111, 216, 0), 0 0 0 rgba(255, 62, 165, 0); background: rgba(255, 62, 165, 0); }
  7% { box-shadow: 0 0 0 1px rgba(255, 111, 216, .55), 0 0 22px rgba(255, 62, 165, .24); background: rgba(255, 62, 165, .04); }
  100% { box-shadow: 0 0 0 1px rgba(255, 111, 216, 0), 0 0 0 rgba(255, 62, 165, 0); background: rgba(255, 62, 165, 0); }
}

/* phones: when the filter sheet opens, a pink glow pops up quickly, then fades: 1 s at the top, 9 s at the bottom.
   openSheet() sets --g per word (by its height on screen) and --et / --eb (top / bottom) on the sheet's edge glow. */
.flash-glow { text-shadow: 0 0 calc(10px * var(--g, 0)) rgba(255, 79, 203, calc(.9 * var(--g, 0))), 0 0 calc(2px * var(--g, 0)) rgba(255, 190, 240, calc(.9 * var(--g, 0))); }
.chip.flash-glow, .btn.flash-glow, select.flash-glow { box-shadow: inset 0 0 0 1px rgba(255, 111, 216, calc(.8 * var(--g, 0))), 0 0 calc(14px * var(--g, 0)) rgba(255, 62, 165, calc(.45 * var(--g, 0))); }
.sheet-edge { position: fixed; inset: 0; z-index: 41; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 111, 216, .7), inset 0 0 60px rgba(255, 62, 165, .22);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--et, 0)), rgba(0, 0, 0, var(--eb, 0)));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--et, 0)), rgba(0, 0, 0, var(--eb, 0))); }
body:not(.sheet-open) .sheet-edge { display: none; }

/* computers: a Close button across from "Filters" slides the column back out (phones use the sheet's Done) */
.side-close { display: none; }
@media (min-width: 901px) {
  .side-close { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 0; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); transition: color .2s, text-shadow .2s; }
  .side-close span { font-size: 15px; letter-spacing: 0; line-height: 1; }
  .side-close:hover, .side-close:focus-visible { color: var(--text, #fff); text-shadow: 0 0 10px rgba(255, 79, 203, .6); outline: none; }
}

/* computers: with the filter column closed, a small filter icon sits at the top left of the results,
   right where the column slides in and out; tapping it opens the column */
.side-open { display: none; }
@media (min-width: 901px) {
  .lib-main { position: relative; }
  .side-open { display: inline-grid; place-items: center; position: absolute; left: 0; top: 0; z-index: 2; width: 32px; height: 32px; padding: 0;
    border: 1px solid var(--line-2, rgba(255, 255, 255, .16)); border-radius: 6px; background: rgba(255, 255, 255, .02); color: var(--text-2); cursor: pointer;
    opacity: 1; transform: none; transition: opacity .3s ease .35s, transform .4s cubic-bezier(.3, .7, .2, 1) .3s, color .2s, border-color .2s, box-shadow .2s; }
  .side-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .side-open:hover, .side-open:focus-visible { color: var(--text, #fff); border-color: rgba(255, 111, 216, .7); box-shadow: 0 0 12px rgba(255, 62, 165, .35); outline: none; }
  .side-open.has { color: var(--neon, #39d8ff); border-color: rgba(57, 216, 255, .5); }
  .side-open .ideas-n { position: absolute; top: -7px; right: -7px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
  .lib.side-on .side-open { opacity: 0; transform: translateX(-10px); pointer-events: none; transition: opacity .15s ease, transform .3s ease; }
}

/* computers: Popular | New sit at the left, right beside the filter icon (or flush left while the column is open) */
@media (min-width: 901px) {
  .result-line { justify-content: flex-start; min-height: 32px; padding-left: 46px; transition: padding-left .45s cubic-bezier(.3, .7, .2, 1); }
  .lib.side-on .result-line { padding-left: 0; }
}

/* a thin center line drops from the search bar and touches the Filter your ideas pill, showing they're connected
   (length --link-h is measured in viewLibrary; it fades out while the suggestion pills are open between them) */
/* the connector is one shape in the pill's own border color (--ib-line follows its hover / active states):
   a 1px line with small rounded fillets (4px) flaring into the search bar at the top and the pill at the bottom.
   The fillets are SVG masks so the curves stay crisp; the top tucks .5px under the search bar so there is never a gap. */
.ideas-btn { position: relative; --ib-line: rgba(57, 216, 255, .28); border-color: var(--ib-line); }
.ideas-btn:hover, .ideas-btn[aria-expanded="true"] { --ib-line: rgba(57, 216, 255, .7); }
.ideas-btn.has { --ib-line: var(--neon, #39d8ff); }
.ideas-btn::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 1px); width: 9px; height: calc(var(--link-h, 36px) + .5px);
  transform: translateX(-50%); pointer-events: none; background: var(--ib-line);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 4'%3E%3Cpath d='M0 0A4 4 0 0 1 4 4H5A4 4 0 0 1 9 0Z'/%3E%3C/svg%3E") center top / 9px 4px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 4'%3E%3Cpath d='M0 4A4 4 0 0 0 4 0H5A4 4 0 0 0 9 4Z'/%3E%3C/svg%3E") center bottom / 9px 4px no-repeat, linear-gradient(#000, #000) center / 1px 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 4'%3E%3Cpath d='M0 0A4 4 0 0 1 4 4H5A4 4 0 0 1 9 0Z'/%3E%3C/svg%3E") center top / 9px 4px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 4'%3E%3Cpath d='M0 4A4 4 0 0 0 4 0H5A4 4 0 0 0 9 4Z'/%3E%3C/svg%3E") center bottom / 9px 4px no-repeat, linear-gradient(#000, #000) center / 1px 100% no-repeat;
  opacity: 1; transition: opacity .3s ease .25s, background-color .15s; }
.suggest.open + .ideas-btn::before { opacity: 0; transition: opacity .12s ease; }
.search-band .search { z-index: 1; }
/* JB: hovering (or picking) All ratios outlines it all the way around: the bar has no bottom border of its
   own (it shares the frame box's top line), so a ring drawn over it, reaching 1px down onto that line, closes it */
.all-big { position: relative; z-index: 1; }
.all-big::after { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; bottom: -1px; pointer-events: none;
  border: 1px solid transparent; border-radius: var(--r) var(--r) 0 0; transition: border-color .15s; }
.all-big:hover::after { border-color: #2ca3c1; }
.all-big[aria-pressed="true"] { box-shadow: 0 0 16px rgba(57, 216, 255, .25); }
.all-big[aria-pressed="true"]::after { border-color: var(--neon, #39d8ff); }

/* Location: region chips; the picked region opens a box of its spots */
.loc-regions .chip { font-size: 13.5px; }
.loc-sub { margin-top: 12px; padding: 10px 0 2px 12px; border-left: 1px solid rgba(57, 216, 255, .45); animation: loc-in .28s ease both; }
.loc-sub-head { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 9px; }
.loc-sub .chip { font-size: 12.5px; }
@keyframes loc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .loc-sub { animation: none; } }