/* ==========================================================================
   SoGoCode: app demo recreations (CSS-drawn iPhone and Mac windows).
   Used by the homepage story and the product pages. The phone scales from
   --pw (set by the page layout); Mac windows scale with their container.
   ========================================================================== */

/* Margin notes: the daybook's handwriting next to the demos (decorative, inside role="img"). */
.callout {
  position: absolute; z-index: 4;
  max-width: 13em; padding: 8px 14px 9px;
  border-radius: 14px;
  background: var(--scrim-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--hair);
  box-shadow: 0 16px 36px -24px rgba(40, 20, 60, .55);
  font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.12; color: var(--ink);
  text-wrap: balance;
  opacity: 0; pointer-events: none;
  will-change: opacity, transform;
}
.callout::before {
  content: ""; position: absolute; width: 26px; height: 1px; background: var(--ink-3); top: 50%;
}
/* --------------------------------------------------------------------------
   iPhone + Time Tabulator (CSS-drawn; sizes in em, scaled from the phone width)
   -------------------------------------------------------------------------- */
.phone {
  --tt-bg: #f3f4f8; --tt-ink: #151519; --tt-ink2: #62626c; --tt-card: #e8ecf4; --tt-row: #f7f8fb;
  --tt-green: #2c9a52; --tt-orange: #e46d17; --tt-blue: #2d6ef0;
  --tt-glass: rgba(255, 255, 255, .8); --tt-edge: rgba(255, 255, 255, .95); --tt-lift: 0 .35em 1em -.35em rgba(24, 34, 70, .22);
  position: relative; flex: none;
  width: var(--pw); aspect-ratio: 9 / 18.5;
  container: phone / inline-size;
}
.phone.is-dark {
  --tt-bg: #0a0a0d; --tt-ink: #f3f3f6; --tt-ink2: #9d9da9; --tt-card: #1b1c22; --tt-row: #25262d;
  --tt-green: #4cc676; --tt-orange: #ff9b4a; --tt-blue: #6b97ff;
  --tt-glass: rgba(58, 58, 68, .72); --tt-edge: rgba(255, 255, 255, .14); --tt-lift: 0 .35em 1em -.35em rgba(0, 0, 0, .6);
}
.phone-frame {
  position: absolute; inset: 0;
  padding: 3.1cqi;
  border-radius: 15.5cqi;
  background: linear-gradient(150deg, #45454c 0%, #16161a 22%, #0e0e11 60%, #2b2b31 100%);
  box-shadow:
    inset 0 0 0 .5cqi rgba(255, 255, 255, .07),
    0 44px 90px -44px rgba(34, 18, 56, .7),
    0 18px 40px -26px rgba(34, 18, 56, .6);
}
.phone-frame::before, .phone-frame::after {
  content: ""; position: absolute; width: 1.1cqi; border-radius: 1cqi; background: #26262c;
}
.phone-frame::before { left: -.8cqi; top: 20%; height: 7%; box-shadow: 0 9cqi 0 #26262c, 0 20cqi 0 #26262c; }
.phone-frame::after { right: -.8cqi; top: 27%; height: 12%; }
.phone-screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 12.6cqi;
  background: var(--tt-bg); color: var(--tt-ink);
  font-family: var(--font-device); font-size: 4.2cqi; line-height: 1.25; letter-spacing: -.01em;
  contain: layout paint;
  transition: background-color .5s, color .5s;
}
.phone svg { width: 1em; height: 1em; flex: none; }

.ios-bar {
  position: relative; height: 3.75em;
  display: flex; align-items: center; justify-content: space-between;
  padding: .55em 2.05em 0 2.35em;
  font-weight: 650; font-size: 1.02em; font-variant-numeric: tabular-nums;
}
.ios-island { position: absolute; left: 50%; top: .78em; width: 7.4em; height: 2.15em; margin-left: -3.7em; border-radius: 2em; background: #050506; }
.ios-sys { display: flex; align-items: center; gap: .32em; }
.ios-sig { width: 1.05em; height: .72em; background: linear-gradient(90deg, currentColor 0 19%, transparent 0 27%, currentColor 0 46%, transparent 0 54%, currentColor 0 73%, transparent 0 81%, currentColor 0); clip-path: polygon(0 72%, 19% 72%, 19% 52%, 46% 52%, 46% 30%, 73% 30%, 73% 0, 100% 0, 100% 100%, 0 100%); }
.ios-wifi { width: .95em; height: .72em; background: currentColor; clip-path: polygon(50% 100%, 0 28%, 12% 14%, 30% 4%, 50% 0, 70% 4%, 88% 14%, 100% 28%); }
.ios-batt { position: relative; width: 1.55em; height: .74em; border-radius: .22em; box-shadow: inset 0 0 0 .09em currentColor; opacity: .95; }
.ios-batt::before { content: ""; position: absolute; inset: .14em; right: .3em; border-radius: .1em; background: currentColor; }
.ios-batt::after { content: ""; position: absolute; right: -.14em; top: .24em; width: .1em; height: .26em; border-radius: 0 .1em .1em 0; background: currentColor; }

.tt-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 3.5em; padding: 0 1.1em; }
/* The list scrolls beneath a translucent header, as in the app. */
.ios-bar, .tt-head, .tt-nav {
  position: relative; z-index: 2;
  background: color-mix(in srgb, var(--tt-bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  transition: background-color .5s;
}
.glass {
  display: inline-flex; align-items: center; justify-content: center; gap: .75em;
  height: 2.75em; border-radius: 2em;
  background: var(--tt-glass);
  box-shadow: inset 0 0 0 1px var(--tt-edge), var(--tt-lift);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--tt-ink);
  transition: background-color .5s, box-shadow .5s, color .5s;
}
.glass svg { width: 1.3em; height: 1.3em; }
.glass--round { width: 2.75em; }
.glass--pair { padding: 0 .95em; }
.tt-sunbtn { color: #f39a2d; }
.tt-title { text-align: center; font-size: 1.1em; font-weight: 650; }
.tt-nav { display: flex; align-items: center; justify-content: space-between; height: 3.1em; padding: 0 1.45em; color: var(--tt-ink2); }
.tt-nav > svg { width: 1.2em; height: 1.2em; }
.tt-blue { color: var(--tt-blue); }
.tt-date { height: 2.3em; padding: 0 .95em; gap: .45em; border-radius: .75em; font-size: .98em; font-weight: 620; }
.tt-date svg { width: 1.1em; height: 1.1em; }

.tt-scroll { --n: var(--max); position: relative; padding: .8em 1.05em; will-change: transform; }
.tt-card { border-radius: 1.25em; background: var(--tt-card); padding: .95em 1.05em 1em; transition: background-color .5s; }
.tt-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.tt-day { display: flex; align-items: center; gap: .32em; font-size: 1.4em; font-weight: 660; letter-spacing: -.012em; }
.tt-check { width: .72em !important; height: .72em !important; color: #58c27d; }
.tt-meta { display: flex; align-items: center; gap: 1em; margin-top: .22em; }
.tt-hrs { color: var(--tt-green); font-size: 1.12em; font-variant-numeric: tabular-nums; transition: color .5s; }
.tt-brk { display: inline-flex; align-items: center; gap: .28em; color: var(--tt-orange); }
.tt-brk svg { width: 1.05em; height: 1.05em; }
.tt-tools svg { width: 1.55em; height: 1.55em; color: var(--tt-ink2); }
.tt-today { clip-path: inset(0 0 calc((var(--max) - var(--n)) * 3.75em) 0 round 1.25em); }
.tt-entries { position: relative; height: calc(var(--max) * 3.75em - .45em); margin-top: .75em; }
.tt-entry {
  position: absolute; left: 0; right: 0; top: 0;
  height: 3.3em; padding: .5em .85em;
  border-radius: .85em; background: var(--tt-row);
  transform: translateY(calc(var(--slot) * 3.75em));
  transition: background-color .5s;
}
.tt-e1 { display: flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: .8em; color: var(--tt-ink2); }
.tt-dot { width: .62em; height: .62em; border-radius: 50%; background: var(--c); }
.tt-dur { margin-left: auto; padding: .05em .6em; border-radius: 1em; background: var(--tt-card); }
.tt-e2 { display: flex; align-items: center; gap: .5em; margin-top: .2em; font-size: 1.02em; }
.tt-e2 svg { width: 1.05em; height: 1.05em; color: var(--c); }
.tt-entry--start { --c: #37b35d; --slot: 1; }
.tt-entry--break { --c: #ef8a2c; --slot: 0; }
.tt-entry--end { --c: #e5484d; --slot: 0; }
[data-phone="evening"] .tt-entry--break { --slot: 1; }
[data-phone="evening"] .tt-entry--start { --slot: 2; }
[data-phone="morning"] .tt-check[data-check] { opacity: 0; }
.tt-past { display: grid; gap: .8em; margin-top: .8em; transform: translateY(calc((var(--n) - var(--max)) * 3.75em)); }
.tt-week { transform: translateY(calc((var(--n) - var(--max)) * 3.75em)); }
.tt-card--past .tt-day { font-size: 1.26em; }

.tt-fab { position: absolute; right: 1.2em; bottom: 2.7em; width: 10em; height: 3.3em; }
.fab {
  position: absolute; right: 0; top: 0; height: 100%;
  display: inline-flex; align-items: center; gap: .5em;
  padding: 0 1.3em 0 1.1em; border-radius: 2em; white-space: nowrap;
  font-size: 1.04em; font-weight: 660; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 .7em 1.5em -.6em rgba(30, 120, 64, .6);
  opacity: 0; transform: scale(.94);
  transition: opacity .35s, transform .35s var(--ease);
}
.fab svg { width: 1.05em; height: 1.05em; }
.fab--start, .fab--resume { background: linear-gradient(180deg, #4dc476, #2fa95b); }
.fab--end { background: linear-gradient(180deg, #f06268, #d4434a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 .7em 1.5em -.6em rgba(190, 50, 60, .6); }
.tt-fab[data-fab="start"] .fab--start,
.tt-fab[data-fab="end"] .fab--end,
.tt-fab[data-fab="resume"] .fab--resume { opacity: 1; transform: none; }

.tap {
  position: absolute; right: 2.2em; top: 50%;
  width: 3.4em; height: 3.4em; margin-top: -1.7em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 28%, rgba(255, 255, 255, .4) 29% 58%, rgba(255, 255, 255, 0) 60%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .75);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.ios-home { position: absolute; left: 50%; bottom: .6em; width: 9.6em; height: .32em; margin-left: -4.8em; border-radius: 1em; background: var(--tt-ink); opacity: .85; z-index: 3; }

/* Week summary (evening phone) */
.tt-week { margin-top: .8em; padding: 1em 1.05em 1.1em; border-radius: 1.25em; background: #e6f0e9; }
.tt-week-h { font-size: 1.3em; font-weight: 660; letter-spacing: -.01em; }
.tt-week-r { color: var(--tt-ink2); }
.tt-week-stats { display: flex; justify-content: space-between; align-items: flex-start; margin-top: .8em; padding-top: .8em; border-top: 1px solid rgba(90, 110, 100, .2); }
.tt-cap { font-size: .8em; letter-spacing: .03em; color: var(--tt-ink2); }
.tt-total { font-size: 2.6em; font-weight: 740; line-height: 1.05; letter-spacing: -.025em; color: #3daa5f; font-variant-numeric: tabular-nums; }
.tt-week-side p { display: flex; align-items: center; justify-content: flex-end; gap: .35em; margin-top: .2em; font-size: .92em; color: var(--tt-ink2); }
.tt-week-side b { color: var(--tt-ink); font-variant-numeric: tabular-nums; }
.tt-week-side svg { width: 1em; height: 1em; }
.tt-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: .28em; height: 7.4em; margin-top: .7em; }
.tt-bar { position: relative; height: 100%; }
.tt-bar-f {
  position: absolute; left: 0; right: 0; bottom: 1.45em; height: 4.6em;
  border-radius: .3em .3em .12em .12em;
  background: linear-gradient(180deg, #86d69a, #5dc17b);
  transform-origin: 50% 100%; transform: scaleY(var(--k, 1));
}
.tt-bar-v {
  position: absolute; left: 0; right: 0; bottom: 2.6em; text-align: center;
  font-size: .64em; color: var(--tt-ink2); font-variant-numeric: tabular-nums;
  transform: translateY(calc(var(--k, 1) * -7.19em));
}
.tt-bar-d { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: .72em; color: var(--tt-ink2); }
.tt-bar-v { opacity: var(--o, 1); }
.tt-bar[data-bar="0"] .tt-bar-v { opacity: 0; }
.tt-sec { display: flex; align-items: center; gap: .45em; margin-top: 1em; font-size: .78em; letter-spacing: .03em; color: var(--tt-ink2); }
.tt-sec svg { width: 1.25em; height: 1.25em; }
.tt-sec--ev svg { color: #5b5bd6; }
.tt-sec--br svg { color: #ef8a2c; }
.tt-mini { display: flex; justify-content: space-between; align-items: center; margin-top: .45em; padding: .7em .9em; border-radius: .9em; background: rgba(255, 255, 255, .7); }
.tt-mini b { font-weight: 620; }
.tt-mini span { font-size: .85em; color: var(--tt-ink2); }
.tt-mini em { font-style: normal; font-weight: 700; font-size: 1.1em; color: #5b5bd6; }
.tt-mini--br em { color: #e46d17; }

.tt-dim { position: absolute; inset: 0; z-index: 4; background: rgba(8, 8, 18, .32); pointer-events: none; }
.tt-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: 9%; z-index: 5;
  padding: .55em 1.35em 1em;
  border-radius: 1.7em 1.7em 0 0;
  background: #f5f5f7; color: #121216;
  box-shadow: 0 -.5em 2em -1em rgba(0, 0, 0, .35);
  will-change: transform;
}
.tt-grab { display: block; width: 2.8em; height: .3em; margin: 0 auto .6em; border-radius: 1em; background: rgba(0, 0, 0, .18); }
.tt-sheet-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.tt-sheet .glass { --tt-glass: #fff; --tt-edge: rgba(0, 0, 0, .04); --tt-ink: #121216; }
.tt-close { height: 2.5em; padding: 0 1em; font-size: .95em; }
.tt-sheet-t { text-align: center; font-weight: 660; }
.tt-rep-t { margin-top: .85em; font-size: 1.72em; font-weight: 760; line-height: 1.08; letter-spacing: -.025em; }
.tt-rep-s { margin-top: .25em; font-size: 1.08em; color: #4b4b55; }
.tt-rep-h { margin-top: .95em; font-size: 1.1em; font-weight: 720; }
.tt-rep-rows p { display: flex; justify-content: space-between; padding: .26em 0; color: #3d3d46; }
.tt-rep-rows p span:last-child { font-family: var(--font-mono); color: #121216; }
.tt-rep-day { margin-top: .45em; font-weight: 700; }
.tt-rep-rows--sub p { padding-left: 1em; }

/* Home Screen widget */
.widget {
  position: absolute; z-index: 3;
  width: calc(var(--pw) * .56);
  will-change: transform, opacity;
}
.widget-card {
  container-type: inline-size;
  aspect-ratio: 1; display: flex; flex-direction: column;
  padding: 12% 12% 11%;
  border-radius: 22%;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 30px 60px -30px rgba(30, 30, 80, .6), 0 10px 24px -16px rgba(30, 30, 80, .4);
  color: #16161a; font-family: var(--font-device);
  transition: background-color .5s, color .5s, box-shadow .5s;
}
.widget-top { display: flex; align-items: center; gap: 6cqi; font-size: 10.5cqi; font-weight: 660; }
.widget-top img { width: 17cqi; height: 17cqi; border-radius: 22.5%; }
.widget-hours { display: flex; align-items: baseline; gap: 4cqi; margin-top: auto; font-size: 28cqi; font-weight: 740; line-height: 1; letter-spacing: -.035em; color: #2c9a52; font-variant-numeric: tabular-nums; }
.widget-hours small { font-size: 10.5cqi; font-weight: 620; letter-spacing: 0; color: #5a616b; }
.widget-sub { margin-top: 5cqi; font-size: 9.5cqi; color: #5a616b; }
.widget.is-dark .widget-card { background: rgba(28, 28, 34, .78); color: #f3f3f6; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -30px rgba(0, 0, 0, .7); }
.widget.is-dark .widget-hours { color: #4cc676; }
.widget.is-dark .widget-hours small, .widget.is-dark .widget-sub { color: #a3a8b3; }
.widget-cap { display: table; margin: 12px auto 0; padding: 3px 10px; border-radius: 99px; background: var(--scrim); text-align: center; font-size: 13px; font-weight: 640; color: var(--ink-2); white-space: nowrap; }


/* --------------------------------------------------------------------------
   Mac windows (CSS-drawn). Text scales with the window via container units.
   -------------------------------------------------------------------------- */
.mac { position: relative; flex: none; width: min(880px, 100%, calc((100svh - 250px) * 1.55)); container: mac / inline-size; }
.mac svg { width: 1em; height: 1em; flex: none; }
.mac-ui {
  position: relative; aspect-ratio: 1.55;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 12px;
  font-family: var(--font-device); font-size: clamp(8.6px, 1.36cqi, 12.5px); line-height: 1.3;
  background: var(--mac-bg); color: var(--mac-ink);
  box-shadow: 0 0 0 1px var(--mac-edge), 0 54px 110px -48px rgba(22, 10, 44, .7), 0 22px 44px -28px rgba(22, 10, 44, .5);
}
.ct .mac-ui { font-size: clamp(9px, 1.46cqi, 13px); }
.mac--dark {
  --mac-bg: #1e1e21; --mac-bar: #2b2b2f; --mac-side: #26262a; --mac-list: #222225; --mac-card: #2a2a2f;
  --mac-ink: #ececf0; --mac-ink2: #b1b1ba; --mac-ink3: #9a9aa4; --mac-line: rgba(255, 255, 255, .08); --mac-edge: rgba(255, 255, 255, .14);
  --mac-blue: #0a84ff;
}
.mac--light {
  --mac-bg: #ffffff; --mac-bar: #f6f6f8; --mac-card: #f5f6f8;
  --mac-ink: #1d1d1f; --mac-ink2: #55555d; --mac-ink3: #6a6a73; --mac-line: rgba(0, 0, 0, .08); --mac-edge: rgba(0, 0, 0, .14);
  --mac-blue: #0b6cf0;
}
.mac-bar { position: relative; flex: none; height: 2.7em; display: flex; align-items: center; gap: 1.3em; padding: 0 1.1em; background: var(--mac-bar); border-bottom: 1px solid var(--mac-line); }
.lights { display: flex; gap: .62em; }
.lights i { width: 1.05em; height: 1.05em; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .15); }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.mac-title { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 650; color: var(--mac-ink2); }

/* Contacts Toolkit */
.ct-body { position: relative; flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: 15.5% 25.5% minmax(0, 1fr); }
.ct-side { position: relative; padding: 1em .7em; background: var(--mac-side); border-right: 1px solid var(--mac-line); }
.ct-side-h { padding: 0 .6em .55em; font-size: .84em; font-weight: 650; color: var(--mac-ink3); }
.ct-side-hl { position: absolute; left: .7em; right: .7em; top: 2.6em; height: 2.3em; border-radius: .5em; background: rgba(10, 132, 255, .24); transform: translateY(calc(var(--i, 0) * 2.3em)); will-change: transform; }
.ct-nav { position: relative; display: flex; align-items: center; gap: .6em; height: 2.3em; padding: 0 .6em; }
.ct-nav svg { width: 1.15em; height: 1.15em; color: var(--mac-blue); }
.ct-badge { margin-left: auto; font-size: .82em; color: var(--mac-ink3); font-variant-numeric: tabular-nums; }
.ct-list { position: relative; display: flex; flex-direction: column; padding: .9em .75em; background: var(--mac-list); border-right: 1px solid var(--mac-line); overflow: hidden; }
.ct-search { display: flex; align-items: center; gap: .5em; height: 2.2em; padding: 0 .7em; border-radius: .5em; background: rgba(255, 255, 255, .06); color: var(--mac-ink3); }
.ct-list-h { margin-top: .9em; font-size: 1.12em; font-weight: 700; }
.ct-group { display: flex; align-items: center; margin-top: .6em; font-size: .86em; font-weight: 650; color: var(--mac-ink2); }
.ct-items { position: relative; margin-top: .45em; }
.ct-sel { position: absolute; left: 0; right: 0; top: 0; height: 4.6em; border-radius: .6em; background: rgba(10, 132, 255, .16); box-shadow: inset 0 0 0 1.5px rgba(10, 132, 255, .85); transform: translateY(calc(var(--i, 0) * 4.6em)); will-change: transform, opacity; }
.ct-item { position: relative; display: flex; gap: .6em; height: 4.6em; padding: .55em .6em; }
.ct-item svg { width: 1.2em; height: 1.2em; margin-top: .1em; color: var(--mac-ink2); }
.ct-item p { display: flex; flex-direction: column; min-width: 0; }
.ct-item b, .ct-item span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ct-item b { font-weight: 650; }
.ct-item span { font-size: .84em; color: var(--mac-ink2); }
.risk { font-style: normal; font-size: .8em; font-weight: 650; color: #ff9f0a; }
.risk--med { color: var(--mac-ink2); }

.ct-detail { position: relative; min-width: 0; min-height: 0; }
.ct-pane { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--mac-bg); will-change: opacity; }
.ct-pane--notes, .ct-pane--history { opacity: 0; }
.ct-pane-body { flex: 1; min-height: 0; padding: 1.25em 1.5em 0; overflow: hidden; }
.ct-name { display: flex; align-items: center; gap: .6em; font-size: 1.5em; font-weight: 700; letter-spacing: -.012em; }
.ct-evidence { display: flex; flex-wrap: wrap; gap: .45em; margin-top: .55em; }
.chip {
  display: inline-flex; align-items: center; height: 1.95em; padding: 0 .8em; border-radius: 1em;
  font-size: .88em; color: var(--mac-ink2); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.chip.is-lit { color: #d6e8ff; background: rgba(10, 132, 255, .24); box-shadow: inset 0 0 0 1px rgba(10, 132, 255, .95), 0 0 0 3px rgba(10, 132, 255, .2); }
.ct-countline { margin-top: .85em; transition: color .3s; }
.ct-countline.is-lit { color: #7fc1ff; }
.ct-caution { display: flex; gap: .55em; margin-top: .45em; font-size: .86em; line-height: 1.35; color: var(--mac-ink2); }
.ct-caution svg { width: 1.2em; height: 1.2em; color: #ff9f0a; }
.ct-choose { margin-top: .75em; padding: .65em .85em; border-radius: .7em; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--mac-line); transition: box-shadow .3s; }
.ct-choose.is-lit { box-shadow: inset 0 0 0 1.5px rgba(48, 209, 88, .8); }
.ct-choose-h { font-size: .88em; font-weight: 650; }
.ct-choose-row { display: flex; align-items: center; gap: 1.4em; margin-top: .4em; font-size: .88em; color: var(--mac-ink2); }
.ct-select { display: inline-flex; align-items: center; gap: .5em; height: 1.9em; padding: 0 .55em 0 .75em; border-radius: .45em; background: #3a3a40; color: var(--mac-ink); }
.ct-select svg { width: .85em; height: .85em; transform: rotate(90deg); }
.ct-compare { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin-top: .8em; }
.ct-card { padding: .7em .8em; border-radius: .7em; background: var(--mac-card); box-shadow: inset 0 0 0 1px var(--mac-line); will-change: transform, opacity; }
.ct-card[data-card="a"], .ct-card[data-card="b"] { opacity: .22; }
.ct-card-h { display: flex; align-items: center; gap: .45em; margin-bottom: .35em; font-size: .8em; color: var(--mac-ink3); }
.ct-card-h svg { width: 1.1em; height: 1.1em; color: #30d158; }
.f { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: .5em; padding: .26em .4em; border-radius: .35em; font-size: .9em; white-space: nowrap; transition: background-color .3s, box-shadow .3s; }
.f > span:first-child { color: var(--mac-ink3); }
.f.is-hl { background: rgba(10, 132, 255, .2); box-shadow: inset 0 0 0 1px rgba(10, 132, 255, .65); }
.f--keep.is-hl { background: rgba(48, 209, 88, .16); box-shadow: inset 0 0 0 1px rgba(48, 209, 88, .65); }
.ct-card--merged { position: absolute; left: 50%; top: 0; width: 62%; margin-left: -31%; background: #22262e; box-shadow: inset 0 0 0 1.5px rgba(10, 132, 255, .75), 0 1.2em 2.6em -1em rgba(0, 0, 0, .65); }
.swap { display: inline-grid; }
.swap > b { grid-area: 1 / 1; font-weight: inherit; transition: opacity .35s, color .35s; }
.swap > b:last-child { opacity: 0; color: #6ad0ff; }
.swap.is-done > b:first-child { opacity: 0; }
.swap.is-done > b:last-child { opacity: 1; }
.ct-actions { flex: none; display: flex; align-items: center; gap: .5em; height: 3.3em; padding: 0 1.2em; border-top: 1px solid var(--mac-line); }
.ct-btn { position: relative; display: inline-flex; align-items: center; gap: .4em; height: 2.1em; padding: 0 .85em; border-radius: .5em; font-size: .9em; font-weight: 560; white-space: nowrap; background: rgba(255, 255, 255, .08); transition: box-shadow .3s, background-color .3s; }
.ct-btn--primary { background: var(--mac-blue); color: #fff; }
.ct-btn.is-lit { background: rgba(255, 255, 255, .16); box-shadow: 0 0 0 2px rgba(255, 159, 10, .8); }
.ct-btn .tap { right: 50%; margin-right: -1.7em; }
.ct-spacer { flex: 1; }
.ct-new { display: inline-flex; align-items: center; height: 1.55em; padding: 0 .6em; border-radius: 1em; background: linear-gradient(90deg, #ffb340, #ff7a45); color: #2a1404; font-size: .56em; font-weight: 760; letter-spacing: .01em; }

.ct-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin-top: .9em; }
.ct-col-h { margin-bottom: .5em; font-size: .8em; font-weight: 650; color: var(--mac-ink3); }
.ct-notes .note, .ct-notes .ct-hint { font-size: 1.02em; }
.note { position: relative; margin-bottom: .55em; padding: .55em .75em .6em; border-radius: .6em; background: var(--mac-card); box-shadow: inset 0 0 0 1px var(--mac-line); font-size: .92em; line-height: 1.35; will-change: transform, opacity; transition: background-color .3s, box-shadow .3s; }
.note > span { display: block; margin-bottom: .1em; font-size: .82em; color: var(--mac-ink3); }
.note.is-same { background: rgba(10, 132, 255, .13); box-shadow: inset 0 0 0 1.5px rgba(10, 132, 255, .85); }
.note.is-diff { background: rgba(255, 159, 10, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 159, 10, .8); }
.note--merged { min-height: 7em; background: #1e2922; box-shadow: inset 0 0 0 1.5px rgba(48, 209, 88, .6); }
.nl--gap { display: flex; align-items: center; height: 1.4em; }
.nl--gap span { padding: 0 .45em; border-radius: .3em; font-size: .72em; letter-spacing: .03em; color: var(--mac-ink3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ct-hint { display: flex; align-items: center; gap: .4em; margin-top: .4em; font-size: .82em; color: #7fe0a0; }
.ct-hint svg { width: 1em; height: 1em; }

.ct-sub { margin-top: .3em; font-size: .9em; color: var(--mac-ink2); }
.ct-hist { display: grid; gap: .5em; margin-top: 1em; }
.ct-hist li { display: flex; align-items: center; gap: .7em; padding: .75em .9em; border-radius: .6em; background: var(--mac-card); box-shadow: inset 0 0 0 1px var(--mac-line); font-size: .95em; }
.ct-hist b { flex: 1; min-width: 0; font-weight: 560; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ct-hist svg { width: 1.2em; height: 1.2em; }
.ok-i { color: #30d158; }
.sep-i { color: #bf5af2; }
.ok { font-size: .86em; color: #30d158; }
.ct-btn--small { height: 1.9em; font-size: .84em; }

.ct-dim { position: absolute; inset: 0; z-index: 4; background: rgba(0, 0, 0, .42); opacity: 0; pointer-events: none; }
.ct-sheet {
  position: absolute; left: 50%; top: 0; z-index: 5;
  width: min(40em, 70%);
  padding: 1.15em 1.4em 0;
  border-radius: 0 0 1em 1em;
  background: #2c2c31;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 2em 4em -1em rgba(0, 0, 0, .75);
  transform: translate(-50%, -104%);
  will-change: transform;
}
.ct-sheet-title { font-size: 1.28em; font-weight: 700; }
.ct-sheet-sub { margin-top: .35em; font-size: .86em; color: var(--mac-ink2); }
.ct-sheet-tools { display: flex; align-items: center; gap: .5em; margin-top: .75em; font-size: .88em; }
.ct-sheet-cols { display: grid; grid-template-columns: 1fr 1fr; margin: .8em 0 .25em; padding-left: 6.1em; font-size: .78em; color: var(--mac-ink3); }
.ct-rows { padding-top: .2em; border-top: 1px solid var(--mac-line); }
.ct-who { display: flex; align-items: center; gap: .6em; margin-top: .55em; font-size: .95em; font-weight: 650; }
.cb { display: grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: .3em; box-shadow: inset 0 0 0 1.5px var(--mac-ink3); }
.cb.is-on { background: var(--mac-blue); box-shadow: none; }
.cb svg { width: .9em; height: .9em; color: #fff; }
.ct-num { display: grid; grid-template-columns: 4em minmax(0, 1fr) 1.2em minmax(0, 1fr); align-items: center; gap: .45em; padding: .28em 0 .28em 1.9em; font-size: .92em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-num .lbl { font-size: .84em; color: var(--mac-ink3); }
.ct-num .arr { width: 1em; height: 1em; color: var(--mac-ink3); }
.ct-num .pro { color: #6ad0ff; }
.ct-num--off, .ct-who--off { opacity: .55; }
.ct-sheet-foot { display: flex; align-items: center; gap: .5em; margin: .8em -1.4em 0; padding: .75em 1.4em; border-top: 1px solid var(--mac-line); }
.ct-src { font-size: .8em; color: var(--mac-ink3); }

/* LocalSnip */
.ls .mac-ui { aspect-ratio: 1.47; }
.mac-bar--tools { gap: 1.7em; }
.ls-tools { display: flex; gap: 1.15em; color: var(--mac-ink2); }
.ls-tools svg { width: 1.3em; height: 1.3em; }
.ls-proj { margin-left: auto; font-size: .9em; font-weight: 620; color: var(--mac-ink2); white-space: nowrap; }
.ls-body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 30.5%; gap: .85em; padding: .85em; background: #f1f1f4; }
.ls-main { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .65em; }
.ls-player { flex: none; padding: .65em .65em .2em; border-radius: .9em; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); }
.ls-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .5em; background: #16161c; container: vid / inline-size; }
.ls-controls { display: flex; align-items: center; gap: .8em; height: 2.3em; padding: 0 .3em; font-family: var(--font-mono); font-size: .88em; color: var(--mac-ink2); }
.ls-controls svg { width: 1.05em; height: 1.05em; color: #1d1d1f; }
.ls-scrub { position: relative; flex: 1; height: .36em; border-radius: 1em; background: #e2e2e8; overflow: hidden; }
.ls-scrub i { position: absolute; inset: 0; background: var(--mac-blue); transform-origin: 0 50%; transform: scaleX(.083); }
.ls-timeline { flex: none; padding: 0 .3em; }
.ls-ruler { display: flex; justify-content: space-between; padding-bottom: .25em; border-bottom: 1px solid rgba(0, 0, 0, .1); font-family: var(--font-mono); font-size: .7em; color: var(--mac-ink3); }
.ls-track { position: relative; height: 2.5em; margin-top: .4em; border-radius: .4em; background: #e6e6ec; overflow: hidden; }
.ls-block {
  position: absolute; top: .28em; bottom: .28em;
  left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%);
  display: flex; align-items: center; gap: .4em; padding: 0 .4em;
  border-radius: .35em; background: #82d193; box-shadow: inset 0 0 0 1px rgba(20, 110, 50, .25);
  color: #0f3f1d; font-size: .76em; font-weight: 620; white-space: nowrap; overflow: hidden;
  transform-origin: 50% 100%; will-change: transform, opacity;
}
.ls-block b { flex: none; display: grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: .3em; background: #2d9a4b; color: #fff; font-size: .92em; }
.ls-block[data-block="8"] b { background: #d17a1f; }
.ls-block[data-block="7"] b { background: #e0661d; }
.ls-block > span { overflow: hidden; text-overflow: ellipsis; }
.ls-block--manual { justify-content: center; background: #8dbbff; box-shadow: inset 0 0 0 1px rgba(11, 108, 240, .45); color: #0a2d6b; transform: none !important; }
.b-man { display: inline-flex; align-items: center; height: 1.55em; padding: 0 .55em; border-radius: 1em; background: #dbe8ff; color: #0a3a8c; font-size: .8em; font-weight: 720; }
.ls-card--manual { padding-bottom: .6em; }
.ls-scan { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(11, 108, 240, 0) 0%, rgba(11, 108, 240, 0) 60%, rgba(11, 108, 240, .28) 94%, rgba(11, 108, 240, .85) 100%); transform: translateX(-100%); opacity: 0; will-change: transform, opacity; }
.ls-playhead { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform: translateX(46%); will-change: transform; }
.ls-playhead::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--mac-blue); }
.ls-playhead::after { content: ""; position: absolute; left: -.38em; top: -.1em; width: .76em; height: .76em; border-radius: 50%; background: var(--mac-blue); }
.ls-transcript { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: .9em; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); transition: opacity .35s; }
.ls-tr-h { flex: none; display: flex; align-items: center; justify-content: space-between; padding: .5em .9em; border-bottom: 1px solid rgba(0, 0, 0, .06); font-size: .95em; }
.ls-auto { display: inline-flex; align-items: center; gap: .5em; font-size: .9em; color: var(--mac-ink2); }
.ls-toggle { position: relative; width: 2.2em; height: 1.25em; border-radius: 1em; background: var(--mac-blue); }
.ls-toggle::after { content: ""; position: absolute; right: .15em; top: .15em; width: .95em; height: .95em; border-radius: 50%; background: #fff; }
.ls-lines-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ls-lines { padding: .3em .45em; will-change: transform; }
.ls-line { display: grid; grid-template-columns: 3.3em minmax(0, 1fr); gap: .35em; padding: .36em .5em; border-radius: .45em; font-size: .95em; line-height: 1.34; color: #45454d; transition: background-color .25s, color .25s; }
.ls-line .ts { padding-top: .12em; font-family: var(--font-mono); font-size: .8em; color: var(--mac-ink3); }
.ls-line.is-on { background: #e7efff; color: #111114; font-weight: 560; }
.ls-line .w.is-on { color: var(--mac-blue); }
.ls-clips { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .55em; padding: .65em; border-radius: .9em; background: #e9e9ee; overflow: hidden; transition: opacity .35s; }
.ls-clips-h { display: flex; align-items: center; justify-content: space-between; padding: .05em .2em; }
.ls-count { display: grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .45em; border-radius: 1em; background: #d9d9e0; font-size: .82em; color: var(--mac-ink2); }
.ls-status { position: absolute; left: .65em; right: .65em; top: 2.75em; z-index: 1; display: flex; align-items: center; gap: .5em; padding: .5em .6em; opacity: 0; border-radius: .6em; background: #fff; font-size: .82em; color: var(--mac-ink2); white-space: nowrap; }
.ls-status svg { width: 1.1em; height: 1.1em; color: var(--mac-blue); }
.ls-status > span { overflow: hidden; text-overflow: ellipsis; }
.ls-prog { flex: 1; min-width: 2em; height: .3em; border-radius: 1em; background: #e2e2e8; overflow: hidden; }
.ls-prog i { display: block; height: 100%; background: var(--mac-blue); transform-origin: 0 50%; }
.ls-card { padding: .65em .75em .7em; border-radius: .7em; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 .3em .8em -.4em rgba(0, 0, 0, .2); will-change: transform, opacity; transition: box-shadow .3s; }
.ls-card.is-sel { box-shadow: 0 0 0 1.5px var(--mac-blue), 0 .3em .8em -.4em rgba(0, 0, 0, .2); }
.ls-card-top { display: flex; align-items: center; gap: .35em; }
.b-ai, .b-fire { display: inline-flex; align-items: center; gap: .25em; height: 1.55em; padding: 0 .5em; border-radius: 1em; font-size: .8em; font-weight: 720; color: #fff; }
.b-ai { background: #3478f6; }
.b-fire { background: #e8513f; }
.b-ai svg, .b-fire svg { width: 1em; height: 1em; }
.ls-dur { margin-left: auto; font-family: var(--font-mono); font-size: .8em; color: var(--mac-ink2); }
.ls-range { margin-top: .3em; font-family: var(--font-mono); font-size: .74em; color: var(--mac-ink3); }
.ls-title { margin-top: .2em; font-size: .92em; font-weight: 660; line-height: 1.25; }
.ls-ex { margin-top: .25em; font-size: .8em; line-height: 1.3; color: var(--mac-ink2); }
.ls-export { display: inline-flex; align-items: center; gap: .35em; height: 1.95em; margin-top: .5em; padding: 0 .85em; border-radius: 1em; background: var(--mac-blue); color: #fff; font-size: .8em; font-weight: 660; }
.ls-export svg { width: 1em; height: 1em; }

/* Crop / export preview inside the video frame */
.ls-crop {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 2;
  width: 31.64%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 100vmax rgba(10, 10, 16, .64);
  outline: 2px solid rgba(255, 255, 255, .95); outline-offset: -2px;
  border-radius: 3px;
}
.ls-crop.is-full { outline-color: transparent; }
.ls-third { position: absolute; background: rgba(255, 255, 255, .42); transition: opacity .3s; }
.ls-crop.is-full .ls-third { opacity: 0; }
.ls-third--v1, .ls-third--v2 { top: 0; bottom: 0; width: 1px; }
.ls-third--v1 { left: 33.33%; }
.ls-third--v2 { left: 66.66%; }
.ls-third--h1, .ls-third--h2 { left: 0; right: 0; height: 1px; }
.ls-third--h1 { top: 33.33%; }
.ls-third--h2 { top: 66.66%; }
.ls-cap {
  position: absolute; left: 7%; right: 7%; bottom: 8%;
  text-align: center; font-size: max(9px, 3.3cqi); font-weight: 820; line-height: 1.12; letter-spacing: -.01em;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .55);
  transition: opacity .3s;
}
.ls-cap .is-on { color: #ffd23f; }
.ls-ratio {
  position: absolute; left: .7em; top: .7em; z-index: 3;
  display: flex; flex-direction: column; padding: .45em .7em;
  border-radius: .5em; background: rgba(18, 18, 24, .74);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: .84em; line-height: 1.25;
  transition: opacity .3s;
}
.ls-ratio span { font-size: .82em; color: rgba(255, 255, 255, .78); }

/* Scene: a fictional neighborhood podcast recorded in a bakery at night */
.ls-scene { position: absolute; inset: 0; }
.ls-scene > * { position: absolute; display: block; }
.sc-wall { inset: 0; background: radial-gradient(120% 95% at 50% 18%, #f8d7a1 0%, #eab36e 46%, #b8743d 100%); }
.sc-window {
  left: 6%; top: 9%; width: 24%; height: 44%;
  border-radius: 45% 45% 0 0 / 22% 22% 0 0;
  background:
    radial-gradient(circle at 22% 30%, rgba(255, 255, 255, .95) 0 1.3%, transparent 1.6%) 0 0 / 34% 28%,
    radial-gradient(circle at 70% 64%, rgba(255, 255, 255, .8) 0 1.1%, transparent 1.4%) 0 0 / 26% 24%,
    linear-gradient(180deg, #1d2a57 0%, #34487f 100%);
  box-shadow: 0 0 0 .55cqi #6d4322;
}
.sc-window::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: .5cqi; margin-left: -.25cqi; background: #6d4322; }
.sc-window::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: .5cqi; background: #6d4322; }
.sc-shelf { right: 5%; width: 31%; height: 16%; }
.sc-shelf--a { top: 11%; }
.sc-shelf--b { top: 31%; }
.sc-shelf {
  background:
    radial-gradient(ellipse 10% 34% at 12% 60%, #c9894a 0 92%, transparent 96%),
    radial-gradient(ellipse 9% 30% at 31% 64%, #b67338 0 92%, transparent 96%),
    radial-gradient(ellipse 11% 34% at 51% 60%, #d09354 0 92%, transparent 96%),
    radial-gradient(ellipse 9% 30% at 70% 64%, #b67338 0 92%, transparent 96%),
    radial-gradient(ellipse 10% 34% at 88% 60%, #c9894a 0 92%, transparent 96%),
    linear-gradient(transparent 84%, #6d4322 84%);
}
.sc-lamp { left: 47.5%; top: -3%; width: 5%; height: 12%; border-radius: 0 0 50% 50% / 0 0 60% 60%; background: #2d2824; box-shadow: 0 1cqi 7cqi 2.5cqi rgba(255, 216, 150, .55); }
.sc-host { bottom: 21%; width: 17%; height: 40%; border-radius: 46% 46% 8% 8% / 36% 36% 5% 5%; background: var(--shirt); }
.sc-host::before { content: ""; position: absolute; left: 50%; top: -36%; width: 56%; aspect-ratio: 1; margin-left: -28%; border-radius: 50%; background: var(--skin); }
.sc-host::after { content: ""; position: absolute; left: 50%; top: -41%; width: 62%; height: 21%; margin-left: -31%; border-radius: 50% 50% 34% 34%; background: var(--hair); }
.sc-host--l { left: 28%; --shirt: #2f5d50; --skin: #8a5a3c; --hair: #231913; }
.sc-host--r { left: 55%; --shirt: #b3503a; --skin: #efc29e; --hair: #b9772f; }
.sc-table { left: 0; right: 0; bottom: 0; height: 25%; background: linear-gradient(180deg, #8d5d36 0 13%, #6b4326 13% 100%); }
.sc-mic { bottom: 21%; width: 2.9%; height: 12%; border-radius: 40% 40% 22% 22%; background: linear-gradient(180deg, #34343a, #101013); }
.sc-mic--l { left: 37%; }
.sc-mic--r { left: 61%; }
.sc-loaf { left: 45.4%; bottom: 20%; width: 9.2%; height: 7%; border-radius: 50% 50% 34% 34% / 72% 72% 28% 28%; background: radial-gradient(ellipse at 50% 30%, #e3a75c, #b5712e 72%); box-shadow: inset 0 -.4cqi 0 rgba(0, 0, 0, .15); }
.sc-mug { left: 72%; bottom: 20%; width: 3.2%; height: 6.4%; border-radius: 0 0 32% 32%; background: #f3eee4; }
.sc-bug { left: 3%; bottom: 5%; padding: .4cqi 1.1cqi; border-radius: .6cqi; background: rgba(0, 0, 0, .42); color: #ffe7bd; font: 700 1.8cqi/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }

.ls-offline {
  position: absolute; left: 50%; bottom: 7%; z-index: 6;
  display: flex; align-items: center; gap: 1em;
  padding: .9em 1.5em .9em 1.1em;
  border-radius: 1.2em;
  background: rgba(16, 20, 42, .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 1.6em 3.2em -1em rgba(0, 0, 0, .55);
  color: #fff; font-size: clamp(11px, 1.7cqi, 16px); white-space: nowrap;
  transform: translateX(-50%); opacity: 0;
  will-change: transform, opacity;
}
.ls-offline .ls-cloud { width: 3.6em; height: 2.7em; }
html:not(.live) .ls-offline { opacity: 1; }
.ls-cloud .cl { fill: none; stroke: #a8c6ff; stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ls-cloud .sl { fill: none; stroke: #ff907c; stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ls-offline b { display: block; font-size: 1.2em; font-weight: 740; }
.ls-offline span { color: rgba(255, 255, 255, .82); }

@container mac (max-width: 560px) {
  .mac-ui, .ct .mac-ui { aspect-ratio: .9; font-size: clamp(9px, 2.95cqi, 12px); }
  .ls .mac-ui { aspect-ratio: .72; }
  .ct-body { grid-template-columns: minmax(0, 1fr); }
  .ct-side, .ct-list { display: none; }
  .ct-pane-body { padding: 1em 1.1em 0; }
  .ct-sheet { width: 94%; }
  .ct-actions { padding: 0 .9em; gap: .4em; }
  .ct-actions .ct-btn:first-child { display: none; }
  .ls-tools svg:nth-child(n+4), .ls-proj { display: none; }
  .ls-body {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "player" "timeline" "bottom"; gap: .6em; padding: .6em;
  }
  .ls-main { display: contents; }
  .ls-player { grid-area: player; padding: .5em .5em .1em; }
  .ls-timeline { grid-area: timeline; }
  .ls-ruler { display: none; }
  .ls-track { margin-top: 0; }
  .ls-transcript { grid-area: bottom; }
  .ls-clips { grid-area: bottom; flex-direction: row; align-items: stretch; gap: .55em; padding: .55em; opacity: 0; }
  .ls-clips-h, .ls-status { display: none; }
  .ls-card { flex: 0 0 70%; padding: .55em .65em; }
  .ls-card .ls-export { display: none; }
  .ls.is-clips .ls-clips { opacity: 1; }
  .ls.is-clips .ls-transcript { opacity: 0; }
  .ls-offline { font-size: 3.2cqi; }
}


/* --------------------------------------------------------------------------
   Product pages: the demos play on their own timeline beside the copy.
   -------------------------------------------------------------------------- */
.p-demo--phone { --pw: min(300px, 72vw, calc((100svh - 150px) * .486)); padding: 12px 0; }
.p-demo .widget { right: calc(50% + var(--pw) * .5 - 34px); bottom: 12%; }
.p-demo--mac { width: 100%; }
.p-demo--mac .mac { width: min(100%, 880px); }
@media (max-width: 760px) {
  .p-demo--phone { --pw: min(264px, 66vw); }
  .p-demo .widget { right: calc(50% + var(--pw) * .5 - var(--pw) * .3); bottom: 6%; width: calc(var(--pw) * .5); }
  .p-demo .widget-cap { font-size: 11px; margin-top: 6px; padding: 2px 8px; }
}