/* ============================================================================
   PICTURE LOCK — the product.

   Three modes, because that is what this actually is:
     CREATE   drop media / clone a link / scan a site → chat → finished videos
     EDIT     a real timeline editor for when you want your hands on it
     CONNECT  an API and credits, so agents drive it instead of a person

   Plus the library that makes it compound: styles cloned off real videos, the
   hook engine, the brand kit, the content plan.

   Dark because it is a tool, not a page. Tungsten amber because that is the
   light in an edit suite — and deliberately not the near-black-plus-acid-green
   that every AI-built tool currently ships with. Green is a pass state only.
   ========================================================================= */

:root {
  --bg:      #100F0E;
  --rail:    #171614;
  --panel:   #1B1A18;
  --panel-2: #222120;
  --raised:  #2B2926;
  --line:    #2C2A27;
  --line-2:  #3B3834;

  --text:    #F1EDE5;
  --text-2:  #B9B3A8;
  --mut:     #7F7A71;

  --amber:   #DFA24B;
  --amber-d: #B47F33;
  --amber-t: rgba(223,162,75,.12);
  --pass:    #6FBF7A;
  --live:    #E0705F;
  --blue:    #7BA3C9;

  --display: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --sans:    'Familjen Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --s--2: .66rem; --s--1: .77rem; --s-0: .9rem;
  --s-1: 1.08rem; --s-2: 1.45rem; --s-3: 2.1rem; --s-4: 2.9rem;

  --ease-out: cubic-bezier(.23,1,.32,1);
  --t-fast: 150ms; --t-mid: 240ms;
  --r: 7px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: var(--s-0); line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
h1,h2,h3,h4 { margin: 0; font-weight: 500; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
         transition: transform var(--t-fast) var(--ease-out); }
button:active { transform: scale(.97); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 9px; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lbl  { font-family: var(--mono); font-size: var(--s--2); letter-spacing:.14em;
        text-transform: uppercase; color: var(--mut); }
.dim  { color: var(--mut); }

/* ════════════════════════════════════════════════════════════════ shell ═══ */

.app { display: grid; grid-template-columns: 216px 1fr; min-height: 100dvh; }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } }

.side {
  background: var(--rail); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; padding: 14px 10px;
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
}
@media (max-width: 900px) {
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap;
          align-items: center; overflow-x: auto; }
  .side .sgroup { display: none; }
  .side .brand { width: 100%; }
}

.brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 14px; }
.brand b { font-size: 1.04rem; font-weight: 600; letter-spacing: -.01em; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }
.brand .lbl { font-size: 0.66rem; }

.sgroup { padding: 14px 8px 6px; }
.nav { display: grid; gap: 2px; }
.nav button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--r); font-size: var(--s--1); color: var(--text-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.nav button svg { flex: none; opacity: .75; }
.nav button[aria-current="true"] { background: var(--raised); color: var(--text); }
.nav button[aria-current="true"] svg { opacity: 1; color: var(--amber); }
@media (hover:hover) and (pointer:fine) { .nav button:hover { background: var(--panel); color: var(--text); } }
.nav .n { margin-left: auto; font-family: var(--mono); font-size: var(--s--2); color: var(--mut); }

.credits { margin-top: auto; padding: 12px 10px; border-top: 1px solid var(--line); }
.credits .bar { height: 4px; background: var(--line); border-radius: 8px; overflow: hidden; margin: 8px 0 7px; }
.credits .bar i { display: block; height: 100%; width: 38%; background: var(--amber); }

/* ══════════════════════════════════════════════════════════════════ main ══ */

.main { min-width: 0; display: flex; flex-direction: column; }
.top {
  display: flex; align-items: center; gap: 14px; padding: 0 20px; height: 54px;
  border-bottom: 1px solid var(--line); background: var(--panel); flex: none;
}
.top h1 { font-size: var(--s-0); font-weight: 500; margin-right: auto; }
.top h1 span { color: var(--mut); font-weight: 400; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 8px 14px; border-radius: var(--r); font-size: var(--s--1);
  border: 1px solid var(--line-2); color: var(--text); white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.btn--go { background: var(--amber); color: #17130C; border-color: var(--amber); font-weight: 600; }
.btn--sm { padding: 6px 11px; font-size: var(--s--2); }
@media (hover:hover) and (pointer:fine) {
  .btn:hover { border-color: var(--text-2); background: var(--raised); }
  .btn--go:hover { background: var(--amber-d); border-color: var(--amber-d); }
}

.screen { display: none; padding: 22px 20px 60px; flex: 1; min-width: 0; }
.screen[data-on="1"] { display: block; }
.screen--flush { padding: 0; }

.head { margin-bottom: 20px; }
.head h2 { font-size: var(--s-2); letter-spacing: -.02em; margin: 6px 0 6px; }
.head p { color: var(--text-2); max-width: 62ch; font-size: var(--s--1); }

.card { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.card-hd { display: flex; align-items: center; gap: 9px; padding: 10px 13px;
           border-bottom: 1px solid var(--line); background: var(--panel-2); }
.card-hd .lbl { margin-right: auto; }
.card-b { padding: 13px; }

.pill { font-family: var(--mono); font-size: var(--s--2); letter-spacing:.08em;
        text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.pill--pass { color: var(--pass); border:1px solid color-mix(in srgb,var(--pass) 40%,transparent); background: color-mix(in srgb,var(--pass) 12%,transparent); }
.pill--amber{ color: var(--amber); border:1px solid color-mix(in srgb,var(--amber) 42%,transparent); background: var(--amber-t); }
.pill--free { color: var(--mut); border:1px solid var(--line-2); }

/* ═══════════════════════════════════════════════════════════════ CREATE ═══ */

.create { display: grid; gap: 18px; min-width: 0; }
@media (min-width: 1100px) { .create { grid-template-columns: minmax(0,420px) minmax(0,1fr); gap: 26px; align-items: start; } }

/* the source chooser — the four ways in */
.sources { display: grid; gap: 9px; grid-template-columns: repeat(2,1fr); margin-bottom: 16px; }
.src {
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel);
  padding: 12px; text-align: left; display: grid; gap: 5px;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.src b { font-size: var(--s--1); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.src b svg { color: var(--amber); flex: none; }
.src span { font-size: var(--s--2); color: var(--mut); line-height: 1.45; }
@media (hover:hover) and (pointer:fine) { .src:hover { border-color: var(--amber); background: var(--panel-2); } }
.src[aria-pressed="true"] { border-color: var(--amber); background: var(--amber-t); }

/* the conversation */
.chat { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.chat-log { padding: 14px; display: grid; gap: 14px; max-height: 460px; overflow-y: auto; }
.msg { display: grid; gap: 6px; }
.msg-who { font-family: var(--mono); font-size: var(--s--2); letter-spacing:.12em; text-transform: uppercase; color: var(--mut); }
.msg--you .msg-b { background: var(--raised); border-color: var(--line-2); }
.msg-b { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font-size: var(--s--1); line-height: 1.55; color: var(--text-2); }
.msg-b b { color: var(--text); font-weight: 500; }
.msg--ai .msg-who { color: var(--amber); }
.msg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tick { display: flex; align-items: flex-start; gap: 8px; font-size: var(--s--1); color: var(--text-2); padding: 3px 0; }
.tick svg { color: var(--pass); flex: none; margin-top: 4px; }

.composer { border-top: 1px solid var(--line); padding: 11px 12px; background: var(--panel-2); }
.composer-in { display: flex; align-items: center; gap: 9px; background: var(--bg);
               border: 1px solid var(--line-2); border-radius: var(--r); padding: 9px 11px; }
.composer-in input { flex: 1; min-width: 0; background: none; border: 0; font-size: var(--s--1); }
.composer-in input:focus { outline: none; }
.composer-in input::placeholder { color: var(--mut); }
.icob { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.icob--go { background: var(--amber); color: #17130C; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.chip { font-size: var(--s--2); padding: 5px 10px; border-radius: 999px;
        border: 1px solid var(--line-2); color: var(--text-2); background: var(--panel); }
@media (hover:hover) and (pointer:fine) { .chip:hover { border-color: var(--amber); color: var(--text); } }

/* the results */
.outs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.out { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.out-v { position: relative; aspect-ratio: 9/16; background: #000; }
.out-v video, .out-v img { width: 100%; height: 100%; object-fit: cover; }
.out-b { padding: 9px 10px; display: grid; gap: 5px; }
.out-t { font-size: var(--s--2); line-height: 1.4; color: var(--text-2);
         display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.out-m { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: var(--s--2); color: var(--mut); }
.out-badge { position: absolute; left: 7px; top: 7px; }
.out-play { position: absolute; inset: 0; display: grid; place-items: center; }
.out-play span { width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.5);
                 backdrop-filter: blur(4px); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); }

/* ═════════════════════════════════════════════════════════════════ EDIT ═══ */

.editor { display: grid; grid-template-rows: minmax(0,1fr) auto; height: calc(100dvh - 54px); }
@media (max-width: 900px) { .editor { height: auto; } }
.ed-top { display: grid; min-height: 0; }
@media (min-width: 1000px) { .ed-top { grid-template-columns: 190px minmax(0,1fr) 260px; } }

.ed-tools { border-right: 1px solid var(--line); background: var(--rail); overflow-y: auto; padding: 10px; }
.ed-grp { margin-bottom: 12px; }
.ed-grp .lbl { display: block; padding: 4px 6px 6px; }
.ed-tool { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
           padding: 6px 8px; border-radius: 8px; font-size: var(--s--1); color: var(--text-2); }
.ed-tool .t { flex: 1; }
@media (hover:hover) and (pointer:fine) { .ed-tool:hover { background: var(--panel); color: var(--text); } }

/* min-height:0 AND overflow:hidden are both needed. A grid item defaults to
   min-height:auto, so the 9:16 video refused to shrink and spilled straight over
   the timeline below it — the player covered the tracks entirely. */
/* `max-height: 100%` needs a DEFINITE containing block to resolve against. The
   stage is an auto-height grid item, so the percentage resolved to nothing, the
   9:16 video took its height from the column width, and the player ran 295px
   over the timeline. Absolute positioning inside a relative parent gives the
   definite box the percentage needs. */
.ed-stage { position: relative; background: #0B0A0A; min-height: 0; overflow: hidden; }
.ed-stage video {
  position: absolute; inset: 16px; margin: auto;
  max-height: calc(100% - 32px); max-width: calc(100% - 32px);
  height: 100%; width: auto; aspect-ratio: 9/16;
  border-radius: 8px; background: #000; object-fit: contain;
}

.ed-insp { border-left: 1px solid var(--line); background: var(--rail); overflow-y: auto; padding: 12px; }
@media (max-width: 999px) { .ed-tools, .ed-insp { border: 0; border-top: 1px solid var(--line); } }
.ed-field { display: grid; gap: 6px; margin-bottom: 13px; }
.ed-field .lbl { font-size: 0.66rem; }
.ed-in { background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 9px; font-size: var(--s--1); }
.ed-row { display: flex; align-items: center; gap: 8px; }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: var(--line-2); border-radius: 8px; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--amber); cursor: pointer; }
.seg { display: flex; gap: 2px; background: var(--bg); padding: 2px; border-radius: 8px; }
/* ⚠️ `flex: 1` MEANS `flex-basis: 0`, so these buttons ignored their own text entirely and
   split the container equally. On the signup gate that gave each one 72px, and "Create
   account" wrapped to THREE lines inside a 42px pill — on the first screen every customer
   sees, before they have an account. `1 1 auto` starts each button at its content width and
   shares only the space left over, and nowrap says a label is one line or the control is too
   small, rather than quietly folding. */
.seg button { flex: 1 1 auto; white-space: nowrap; padding: 5px 6px; font-size: var(--s--2); border-radius: 8px; color: var(--mut); }
.seg button[aria-pressed="true"] { background: var(--raised); color: var(--text); }

/* the timeline */
.tl { border-top: 1px solid var(--line); background: var(--panel); padding: 10px 14px 14px; }
.tl-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tl-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; background: var(--panel-2); }
.tl-time { font-family: var(--mono); font-size: var(--s--2); color: var(--mut); }
.tl-zoom { margin-left: auto; display: flex; align-items: center; gap: 7px; }

.tracks { display: grid; gap: 4px; position: relative; }
.track { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: center; }
.track-n { font-family: var(--mono); font-size: var(--s--2); color: var(--mut); text-align: right; }
.track-b { position: relative; height: 34px; background: var(--bg); border-radius: 8px; overflow: hidden; }
.clip { position: absolute; top: 3px; bottom: 3px; border-radius: 8px; display: flex; align-items: center;
        padding: 0 7px; font-size: var(--s--2); color: #17130C; overflow: hidden; white-space: nowrap; }
.clip--v { background: linear-gradient(90deg, #C79552, #9E7539); }
.clip--a { background: #3A5D63; color: #DCEDEF; }
.clip--c { background: #4A4270; color: #E4E0F5; }
.clip--g { background: #6B4147; color: #F3DEDF; }
.playhead { position: absolute; top: 0; bottom: 0; width: 1.5px; background: var(--live); left: 38%; z-index: 3; }
.playhead::before { content:''; position: absolute; top:-3px; left:-4px; width:9px; height:9px; border-radius:8px; background: var(--live); }

/* ══════════════════════════════════════════════════════════════ CONNECT ═══ */

.conn { display: grid; gap: 18px; }
@media (min-width: 1000px) { .conn { grid-template-columns: minmax(0,1fr) 330px; gap: 26px; align-items: start; } }
/* min() so a 230px track can still shrink below 230 on a 320px screen —
   a bare minmax(230px,1fr) is wider than the viewport once padding is counted,
   and that is what pushed Connect sideways at 320 and 390. */
.conns { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(230px,100%),1fr)); }
/* A grid/flex item's min-width defaults to AUTO, so the <pre> of unwrappable
   code refused to shrink below its longest line and widened the whole page at
   320 and 390 — its own overflow-x never got the chance to scroll. */
.conn-c, .card, .conn > div, .card-b { min-width: 0; }
.code { max-width: 100%; min-width: 0; overflow-x: auto; }
.conn-c { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 13px; display: grid; gap: 7px; }
.conn-c h4 { font-size: var(--s--1); display: flex; align-items: center; gap: 8px; }
.conn-c h4 .badge { width: 22px; height: 22px; border-radius: 8px; display: grid; place-items: center;
                    background: var(--raised); font-family: var(--mono); font-size: 0.66rem; color: var(--amber); flex: none; }
.conn-c p { font-size: var(--s--2); color: var(--mut); line-height: 1.5; }
.conn-c .foot { display: flex; align-items: center; gap: 8px; margin-top: 3px; }

.key { display: flex; align-items: center; gap: 9px; background: var(--bg); border: 1px solid var(--line-2);
       border-radius: var(--r); padding: 9px 11px; font-family: var(--mono); font-size: var(--s--2); }
.key span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }

.usage { display: grid; gap: 0; }
.use { display: flex; align-items: baseline; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--s--1); }
.use:last-child { border-bottom: 0; }
.use-n { flex: 1; color: var(--text-2); }
.use-v { font-family: var(--mono); color: var(--text); }
.use-c { font-family: var(--mono); font-size: var(--s--2); color: var(--amber); }

.code { background: #0B0A0A; border: 1px solid var(--line); border-radius: var(--r);
        padding: 12px 13px; font-family: var(--mono); font-size: var(--s--2); line-height: 1.7;
        color: var(--text-2); overflow-x: auto; }
.code .k { color: var(--amber); } .code .s { color: var(--pass); } .code .c { color: var(--mut); }

/* ═══════════════════════════════════════════════════════════ LIBRARY ═══ */

/* styles cloned off a link — the compounding asset */
.styles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); }
.style { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.style-t { padding: 11px 12px 9px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 9px; }
.style-t b { font-size: var(--s--1); font-weight: 500; flex: 1; }
.style-b { padding: 11px 12px; display: grid; gap: 7px; }
.attr { display: flex; align-items: baseline; gap: 8px; font-size: var(--s--2); }
.attr-n { color: var(--mut); flex: 1; }
.attr-v { font-family: var(--mono); color: var(--text-2); }
.style-f { padding: 9px 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; background: var(--panel-2); }

.linkbar { display: flex; gap: 9px; align-items: center; background: var(--panel); border: 1px solid var(--line-2);
           border-radius: var(--r); padding: 10px 12px; margin-bottom: 16px; }
.linkbar input { flex: 1; min-width: 0; background: none; border: 0; font-size: var(--s--1); }
.linkbar input:focus { outline: none; }
.linkbar input::placeholder { color: var(--mut); }

/* hooks */
.niches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.hooks { display: grid; gap: 9px; }
.hook { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 11px 13px; display: grid; gap: 6px; }
.hook-t { font-size: var(--s--1); line-height: 1.5; }
.hook-m { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-family: var(--mono); font-size: var(--s--2); color: var(--mut); }
.hook-s { color: var(--amber); }
.hook-f { font-size: var(--s--2); color: var(--mut); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 6px; }
.hook-f b { color: var(--text-2); font-weight: 400; }

/* plan */
.plan { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); }
.day { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 12px; display: grid; gap: 8px; }
.day-h { display: flex; align-items: baseline; gap: 8px; }
.day-h b { font-size: var(--s--1); }
.day-t { font-size: var(--s--2); color: var(--text-2); line-height: 1.5; }
.day-f { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* brand */
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.sw { width: 52px; height: 52px; border-radius: 8px; border: 1px solid var(--line-2); display: grid; align-content: end; padding: 5px; }
.sw span { font-family: var(--mono); font-size: 0.66rem; color: rgba(255,255,255,.75); }

.grid2 { display: grid; gap: 14px; }
@media (min-width: 900px) { .grid2 { grid-template-columns: 1fr 1fr; } }

.note { font-size: var(--s--2); color: var(--mut); line-height: 1.6; margin-top: 10px; }
.note b { color: var(--text-2); font-weight: 500; }

@media (max-width: 560px) {
  .sources { grid-template-columns: 1fr; }
  .screen { padding: 16px 14px 50px; }
}

/* ═══════════════════════════════════════════════ MOTION GRAPHICS SHOWCASE ═══
   ⚠️ POSTER-FIRST BY DESIGN. Four 9:16 renders are ~20 MB together. The card shows a still
   until it is pressed, and only then is a <video> created — so arriving on the Styles screen
   costs four JPEGs, not twenty megabytes, and nothing autoplays at anyone. */
.mg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1000px){.mg{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.mg{grid-template-columns:1fr}}

.mg-c{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
      overflow:hidden;display:flex;flex-direction:column}
.mg-s{position:relative;aspect-ratio:9/16;background:var(--bg);overflow:hidden;
      border:0;padding:0;cursor:pointer;display:block;width:100%;color:inherit;
      transition:transform var(--t-fast) var(--ease-out)}
.mg-s:active{transform:scale(.97)}
.mg-s img,.mg-s video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mg-s:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}

/* the press target — never animated from scale(0) */
.mg-play{position:absolute;left:10px;bottom:10px;width:34px;height:34px;border-radius:50%;
         background:rgba(16,15,14,.66);backdrop-filter:blur(7px);
         border:1px solid rgba(241,237,229,.3);display:grid;place-items:center;
         color:#F1EDE5;transform:scale(.95);opacity:0;
         transition:opacity var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.mg-s .mg-play{opacity:1;transform:scale(1)}
@media (hover:hover) and (pointer:fine){
  .mg-s:hover .mg-play{transform:scale(1.08)}
}
.mg-s[data-playing] .mg-play{opacity:0;pointer-events:none}

.mg-t{padding:11px 12px 13px;border-top:1px solid var(--line)}
.mg-t b{display:block;font-size:var(--s-0);font-weight:600;letter-spacing:-.01em}
.mg-t s{display:block;text-decoration:none;color:var(--mut);font:500 var(--s--2)/1.5 var(--mono);
        margin-top:3px}
.mg-t ul{margin:9px 0 0;padding:0;list-style:none;display:grid;gap:5px}
.mg-t li{font-size:var(--s--1);color:var(--text-2);display:grid;grid-template-columns:auto 1fr;
         gap:7px;line-height:1.45}
.mg-t li i{font-style:normal;color:var(--amber);line-height:1.2}

.mg-e{padding:10px 12px;color:var(--live);font-size:var(--s--1)}

@media (prefers-reduced-motion: reduce){
  .mg-s,.mg-play{transition-duration:.01ms}
}

/* ⚠️ THE TWO LINKS APP REVIEW ACTUALLY TAPS. The consent line's "terms" and "privacy policy"
   measured 33x16 and 76x16 on a phone — the smallest targets in the whole app, on the one
   control a reviewer is guaranteed to try, and the sentence they sit in is what every new
   account agrees to. Padding expands the hit area and the equal negative margin keeps the
   sentence exactly where it was, so nothing reflows. (These already survived being 404s once:
   both paths are rewritten to the API, which is the single source of the text.) */
.gate-terms a{padding:9px 3px;margin:-9px -3px;position:relative;display:inline-block}