/* Voicely landing page: the demo as four short films of Voicely on a Mac.
   The Mac is drawn at the test machine's own size (1440×900, macOS 15 Sequoia, light mode) and
   to its measurements: 24 px menu bar, 52 px window toolbars, 12 px traffic lights 20 px apart,
   the Dock 67 px tall 5 px off the bottom, and the Voicely bar exactly as mvp/macbar.py builds it.
   It is scaled to fit (--k), so the "camera" can push in like a product film.
   Text uses the Mac's own system font where there is one (San Francisco), Inter elsewhere. */

.demo { max-width: var(--wrap); margin: clamp(40px, 4.4vw, 64px) auto 0; padding: 0 var(--gutter); }
.film-wrap { position: relative; max-width: min(100%, calc((100vh - 150px) * 16 / 10)); margin: 0 auto; }
@media (max-width: 720px) { .film-wrap { max-width: none; } }

.film {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; overflow: clip;
  border-radius: clamp(10px, 1.4vw, 18px);
  background: #0B1230;
  box-shadow: 0 0 0 1px rgba(28,28,30,.14), 0 50px 90px -50px rgba(28,28,30,.6);
  container-type: inline-size;
  cursor: pointer;
  --k: .7;
  --mac: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Inter", system-ui, sans-serif;
  --accent: #0A82FF;
  --sel: #0064E1;
}
.screen { position: absolute; inset: 0; }
.stage {
  position: absolute; left: 0; top: 0; width: 1440px; height: 900px;
  transform: scale(var(--k)); transform-origin: 0 0;
  font-family: var(--mac); font-size: 13px; line-height: 1.32; color: #1D1D1F; letter-spacing: -.003em;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
.cam { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; will-change: transform; }

/* ---------- desktop: Sequoia-style wallpaper ---------- */
.wall { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 120%, #F28A3D 0%, #C2446B 28%, #4A2A8C 52%, #10205E 75%, #071236 100%); }
.wall i { position: absolute; border-radius: 50%; filter: blur(40px); }
.wall .w1 { width: 1400px; height: 900px; left: -380px; top: 330px; background: radial-gradient(closest-side, rgba(255,170,90,.75), transparent); transform: rotate(-18deg); }
.wall .w2 { width: 1300px; height: 700px; left: 520px; top: 420px; background: radial-gradient(closest-side, rgba(255,92,120,.6), transparent); transform: rotate(14deg); }
.wall .w3 { width: 1500px; height: 520px; left: -120px; top: 120px; background: radial-gradient(closest-side, rgba(52,110,255,.55), transparent); transform: rotate(-8deg); }
.wall .w4 { width: 900px; height: 380px; left: 640px; top: -60px; background: radial-gradient(closest-side, rgba(120,90,255,.5), transparent); }

/* ---------- menu bar ---------- */
.menubar {
  position: absolute; left: 0; top: 0; right: 0; height: 24px; z-index: 40;
  display: flex; align-items: center; gap: 0; padding: 0 10px 0 16px;
  background: rgba(10,14,40,.22); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
  color: #FFF; font-size: 13px; font-weight: 500; text-shadow: 0 0 1px rgba(0,0,0,.15);
}
.menubar b, .mb-items > span { padding: 0 10px; }
.mb-items { display: flex; }
.menubar b { font-weight: 700; padding-left: 14px; }
.mb-apple { width: 14px; height: 17px; fill: #FFF; margin-top: -2px; }
.mb-right { margin-left: auto; display: flex; align-items: center; gap: 0; }
.mb-right > * { margin: 0 9px; }
.mb-ico { width: 17px; height: 15px; fill: #FFF; }
.mb-line { fill: none; stroke: #FFF; stroke-width: 1.8; stroke-linecap: round; }
.mb-knob { fill: rgba(10,14,40,.6); }
.mb-clock { margin-left: 8px !important; font-weight: 500; }

/* ---------- windows (light mode) ---------- */
.win {
  position: absolute; background: #FFF; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.28), inset 0 0 0 .5px rgba(255,255,255,.4), 0 22px 70px rgba(0,0,0,.42), 0 4px 16px rgba(0,0,0,.18);
  display: flex;
  transition: left .75s cubic-bezier(.7,0,.25,1), top .75s cubic-bezier(.7,0,.25,1), width .75s cubic-bezier(.7,0,.25,1), height .75s cubic-bezier(.7,0,.25,1);
}
.tb { flex: none; height: 52px; display: flex; align-items: center; gap: 4px; padding: 0 10px; position: relative; }
.lights { display: flex; gap: 8px; padding-left: 10px; margin-right: 14px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.lights i:nth-child(2) { background: #FEBC2E; }
.lights i:nth-child(3) { background: #28C840; }
.tb-title { font-weight: 700; font-size: 13px; color: #262626; }
.tb-title.c { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; }
.tb-stack { display: flex; flex-direction: column; line-height: 1.15; padding-left: 8px; }
.tb-stack b { font-size: 15px; font-weight: 700; }
.tb-stack small { font-size: 11px; color: #8A8A8E; }
.tb-gap { flex: 1; }
.tbi { position: relative; width: 32px; height: 28px; border-radius: 6px; display: grid; place-items: center; flex: none; transition: background-color .15s; }
.tbi svg { width: 18px; height: 18px; fill: none; stroke: #6E6E73; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.tbi svg.aa { stroke: none; fill: #6E6E73; font: 500 12px var(--mac); }
.tbi.dim svg { stroke: #C7C7CC; }
.tbi.chev { width: 14px; margin-left: -6px; } .tbi.chev svg { width: 12px; }
.tbi.press, .m-row.press { background: rgba(0,0,0,.09); }

/* Mail: sidebar, message list, message */
.w-mail { left: 140px; top: 64px; width: 980px; height: 600px; z-index: 3; }
.m-side { flex: none; width: 196px; background: rgba(233,233,236,.96); border-right: 1px solid #DADADD; display: flex; flex-direction: column; padding: 0 10px; }
.side-tb { padding: 0; margin-bottom: 4px; justify-content: space-between; }
.side-tb .lights { padding-left: 10px; }
.m-sec { font-size: 11px; font-weight: 700; color: #9A9A9E; padding: 10px 8px 4px; }
.m-item { position: relative; display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px; border-radius: 6px; font-size: 13px; }
.m-item svg { width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-width: 1.45; stroke-linejoin: round; flex: none; }
.m-item em { margin-left: auto; font-style: normal; font-size: 12px; color: #8A8A8E; }
.m-item.on { background: rgba(0,0,0,.09); }
.m-listcol { flex: none; width: 310px; display: flex; flex-direction: column; border-right: 1px solid #E3E3E6; }
.m-list { padding: 0 8px; overflow: hidden; }
.m-row {
  position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 8px;
  padding: 8px 10px 9px 22px; border-radius: 7px; font-size: 12px; line-height: 1.33; transition: background-color .2s;
}
.m-row + .m-row::before { content: ""; position: absolute; left: 22px; right: 10px; top: 0; border-top: 1px solid #E8E8EB; }
.m-row b { font-size: 13px; font-weight: 700; }
.m-row time { font-size: 12px; color: #8A8A8E; }
.m-row strong { grid-column: 1 / -1; font-weight: 400; }
.m-row span { grid-column: 1 / -1; color: #8A8A8E; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-row.unread::after { content: ""; position: absolute; left: 8px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.m-row.sel { background: var(--sel); color: #FFF; }
.m-row.sel time, .m-row.sel span { color: rgba(255,255,255,.85); }
.m-row.sel::before, .m-row.sel + .m-row::before { display: none; }
.m-viewcol { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-viewcol .tb { padding-left: 6px; }
.m-view { position: relative; flex: 1; padding: 14px 26px; overflow: hidden; border-top: 1px solid #EDEDF0; }
.m-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #B4B4B8; font-size: 20px; font-weight: 500; }
.m-msg { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.m-view.is-on .m-empty { display: none; }
.m-view.is-on .m-msg { opacity: 1; transform: none; }
.m-msg header { display: flex; gap: 11px; align-items: flex-start; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid #EDEDF0; }
.av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(#A9A9B0, #85858C); color: #FFF; display: grid; place-items: center; font-weight: 500; font-size: 17px; flex: none; }
.m-from { display: flex; flex-direction: column; flex: 1; font-size: 13px; }
.m-from b { font-size: 13px; font-weight: 700; }
.m-from small { color: #8A8A8E; font-size: 12px; }
.m-msg header time { font-size: 12px; color: #8A8A8E; }
.m-msg p { font-size: 13px; line-height: 1.55; margin-bottom: 12px; }

/* Mail: the reply */
.w-compose { left: 470px; top: 150px; width: 620px; height: 420px; z-index: 5; flex-direction: column; opacity: 0; transform: scale(.94) translateY(14px); pointer-events: none; transition: opacity .3s ease, transform .4s cubic-bezier(.2,.9,.3,1.1); }
.w-compose.is-on { opacity: 1; transform: none; }
.w-compose .tb { background: #F6F6F6; border-bottom: 1px solid #E1E1E4; }
.tbi.send svg { stroke: #8A8A8E; }
.send-note { position: relative; z-index: 2; font: 700 11px/1 var(--sans); background: var(--tag); color: var(--graphite); padding: 4px 7px; border-radius: 5px; box-shadow: inset 0 -1px 0 var(--tag-edge); opacity: 0; transform: translateX(-4px); transition: opacity .3s, transform .3s; }
.stage.sent-note .send-note { opacity: 1; transform: none; }
.c-field { display: flex; align-items: center; gap: 8px; height: 34px; margin: 0 18px; border-bottom: 1px solid #EBEBEE; font-size: 13px; }
.c-field span { color: #8A8A8E; }
.chipm { font-style: normal; color: var(--accent); }
.c-body { position: relative; flex: 1; padding: 16px 18px; font-size: 13px; line-height: 1.5; }
.c-body p { min-height: 1.5em; }
.c-quote-h { margin-top: 22px; color: #1D1D1F; }
.c-body blockquote { margin: 6px 0 0; padding-left: 10px; border-left: 2px solid var(--accent); color: var(--accent); }
.caret { display: inline-block; width: 1.5px; height: 1.15em; background: #1D1D1F; vertical-align: -.2em; margin-left: 1px; animation: blink 1s steps(1) infinite; visibility: hidden; }
.typing .caret { visibility: visible; }
@keyframes blink { 50% { opacity: 0; } }

/* Safari */
.w-web { left: 140px; top: 64px; width: 980px; height: 600px; z-index: 3; flex-direction: column; }
.s-tb { background: #F6F6F6; border-bottom: 1px solid #DCDCDF; gap: 2px; }
.s-tb .lights { margin-right: 10px; }
.addr { position: relative; flex: 0 1 300px; margin: 0 auto; height: 30px; border-radius: 8px; background: #FFF; box-shadow: inset 0 0 0 1px #E2E2E5; display: flex; align-items: center; gap: 6px; font-size: 13px; color: #1D1D1F; padding: 0 9px; white-space: nowrap; transition: box-shadow .2s; }
.addr svg { width: 15px; height: 15px; fill: none; stroke: #8A8A8E; stroke-width: 1.4; flex: none; }
.a-text { flex: 1; text-align: center; overflow: hidden; }
.addr.edit { box-shadow: 0 0 0 3.5px rgba(10,130,255,.5), inset 0 0 0 1px #8DB8F2; }
.addr.edit .a-text { text-align: left; }
.addr.edit .a-rel { opacity: 0; }
.addr.all #addrText { background: #B3D7FF; }
.web-body { position: relative; flex: 1; overflow: hidden; background: #FFF; }
.page { position: absolute; inset: 0; display: none; }
.page.is-on { display: block; }

.p-recipe { font-family: Georgia, "Times New Roman", serif; font-size: 12px; padding: 2.2em 3.4em; color: #2B2522; transition: font-size .55s cubic-bezier(.6,0,.3,1); background: #FFFCF7; }
.p-recipe.z1 { font-size: 15px; }
.p-recipe.z2 { font-size: 18px; }
.r-site { display: flex; gap: 1.6em; align-items: baseline; font-family: var(--mac); font-size: .95em; color: #8A6F5A; padding-bottom: 1.2em; border-bottom: 1px solid #EFE6DA; margin-bottom: 1.6em; }
.r-site b { color: #6B3F1F; font-size: 1.25em; margin-right: auto; }
.p-recipe h4 { font-size: 2.4em; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }
.r-meta { margin-top: .5em; color: #8A6F5A; font-family: var(--mac); font-size: .95em; }
.r-cols { display: grid; grid-template-columns: 1fr 1.5fr; gap: 2.4em; margin-top: 1.8em; }
.r-h { font-family: var(--mac); font-weight: 700; font-size: .9em; text-transform: uppercase; letter-spacing: .08em; color: #B4532A; margin-bottom: .7em; }
.r-cols li { padding: .3em 0; border-bottom: 1px dotted #E5D9C9; }
.r-cols p:not(.r-h) { line-height: 1.6; margin-bottom: .8em; }

.p-video { padding: 20px 30px; }
.p-video.is-on { display: flex; flex-direction: column; gap: 20px; }
.v-head { display: flex; align-items: center; gap: 30px; }
.v-logo { font-weight: 800; font-size: 21px; letter-spacing: -.03em; color: #C2332B; }
.v-search { position: relative; flex: 1; max-width: 440px; height: 36px; border-radius: 18px; border: 1px solid #D8D8DC; display: flex; align-items: center; padding: 0 16px; font-size: 14px; }
.v-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.v-grid.is-on { opacity: 1; transform: none; }
.v-card { position: relative; border-radius: 10px; }
.v-card p { font-weight: 600; font-size: 14px; margin-top: 8px; }
.v-card small { color: #8A8A8E; font-size: 12px; }
.thumb { position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; }
.thumb svg { width: 100%; height: 100%; }
.thumb span { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.75); color: #FFF; font-size: 11px; padding: 1px 5px; border-radius: 4px; }
.v-player { display: none; position: relative; flex: 1; border-radius: 12px; overflow: hidden; }
.v-player.is-on { display: block; animation: rise .45s cubic-bezier(.2,.9,.3,1); }
.v-player > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes rise { from { opacity: 0; transform: scale(.97); } }
.now { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 24px 20px; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #FFF; }
.now p { font-weight: 600; font-size: 17px; }
.progress { margin-top: 10px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: #FF3B30; }
.eq { position: absolute; right: 24px; top: 20px; display: flex; gap: 4px; align-items: flex-end; height: 28px; }
.eq i { width: 5px; height: 30%; background: #FFF; border-radius: 2px; animation: eq .9s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; } .eq i:nth-child(4) { animation-delay: -.15s; } .eq i:nth-child(5) { animation-delay: -.45s; }
@keyframes eq { to { height: 100%; } }

/* Notes: list and note (sidebar folded away, as in a narrow window) */
.w-notes { left: 1020px; top: 116px; width: 400px; height: 480px; z-index: 2; }
.n-list { flex: none; width: 178px; background: #F7F7F7; border-right: 1px solid #E3E3E6; display: flex; flex-direction: column; padding: 0 8px; }
.n-tb { padding: 0; gap: 2px; }
.n-tb .lights { padding-left: 10px; margin-right: 8px; }
.seg { display: flex; margin-left: 4px; background: rgba(0,0,0,.05); border-radius: 6px; padding: 2px; }
.seg span { width: 26px; height: 22px; display: grid; place-items: center; border-radius: 5px; }
.seg span.on { background: #FFF; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.seg svg { width: 14px; height: 14px; fill: none; stroke: #6E6E73; stroke-width: 1.5; stroke-linecap: round; }
.n-sec { font-size: 12px; font-weight: 700; color: #1D1D1F; padding: 10px 8px 4px; }
.n-row { padding: 8px 10px; border-radius: 6px; font-size: 12px; position: relative; }
.n-row + .n-row::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; border-top: 1px solid #E5E5E8; }
.n-row b { display: block; font-size: 13px; font-weight: 700; }
.n-row span { color: #8A8A8E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.n-row time { color: #1D1D1F; font-weight: 500; }
.n-row.on { background: #FFE38F; }
.n-row.on::before, .n-row.on + .n-row::before { display: none; }
.n-ed { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #FFF; }
.n-tb2 { gap: 0; padding: 0 6px; }
.notes { flex: 1; padding: 6px 22px; font-size: 13px; }
.n-date { text-align: center; font-size: 11px; color: #A1A1A6; margin-bottom: 12px; }
.n-h { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.notes p:not(.n-date):not(.n-h) { padding: 2px 0; line-height: 1.5; }

/* which windows each film uses */
.stage[data-scene="mail"] .w-web { display: none; }
.stage[data-scene="web"] .w-mail, .stage[data-scene="web"] .w-compose { display: none; }
/* left and right halves: the space between the menu bar and the Dock, as on the test Mac */
.stage.split-l .w-web { left: 0; top: 24px; width: 720px; height: 802px; }
.stage.split-r .w-notes { left: 720px; top: 24px; width: 720px; height: 802px; z-index: 4; }

/* ---------- Dock ---------- */
.dock {
  position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); z-index: 1;
  display: flex; align-items: center; gap: 6px; height: 67px; padding: 0 8px;
  border-radius: 18px; background: rgba(246,246,250,.36); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.55), 0 0 0 .5px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.2);
  backdrop-filter: blur(30px) saturate(1.7); -webkit-backdrop-filter: blur(30px) saturate(1.7);
}
.di { position: relative; width: 50px; height: 50px; display: grid; place-items: center; filter: drop-shadow(0 1.5px 2px rgba(0,0,0,.22)); }
.di svg { width: 50px; height: 50px; }
.di.run::after { content: ""; position: absolute; bottom: -7px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(30,30,30,.75); }
.di-cal { background: #FFF; border-radius: 11.5px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; line-height: 1; padding-top: 6px; }
.di-cal b { font-size: 9.5px; font-weight: 600; color: #FF3B30; letter-spacing: .02em; }
.di-cal i { font-style: normal; font-size: 27px; font-weight: 300; color: #1D1D1F; margin-top: 1px; }
.d-sep { width: 1px; height: 50px; background: rgba(0,0,0,.18); margin: 0 6px; }

/* ---------- the name tags Voicely reads (drawn in; not part of the Mac) ---------- */
.tg {
  position: absolute; left: 50%; top: 50%; z-index: 6;
  font-size: 13px; pointer-events: none;
  transform: translate(-50%, -50%) scale(.5); opacity: 0;
  transition: opacity .16s ease, transform .26s cubic-bezier(.3,1.5,.5,1);
  box-shadow: inset 0 -1px 0 var(--tag-edge), 0 2px 6px rgba(0,0,0,.25);
}
.tg.at-r { left: auto; right: 10px; transform: translate(0, -50%) scale(.5); transform-origin: 100% 50%; }
.tg.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tg.at-r.on { transform: translate(0, -50%) scale(1); }
.tg.pick { transform: translate(-50%, -50%) scale(1.12); }
.tg.at-r.pick { transform: translate(0, -50%) scale(1.12); }
.tg.at-l { left: 31px; transform: translate(0, -50%) scale(.5); transform-origin: 0 50%; }
.tg.at-l.on { transform: translate(0, -50%) scale(1); }
.tg.at-l.pick { transform: translate(0, -50%) scale(1.12); }
/* toolbar buttons sit close together: their tags hang below, on two staggered rows */
.tg.at-b { top: calc(100% + 4px); transform: translate(-50%, 0) scale(.5); transform-origin: 50% 0; }
.tg.at-b.b2 { top: calc(100% + 30px); }
.tg.at-b.on { transform: translate(-50%, 0) scale(1); }
.tg.at-b.pick { transform: translate(-50%, 0) scale(1.12); }
.tg.drop { opacity: 0; transition-duration: .3s; }
.picked { outline: 3px solid var(--tag); outline-offset: 1px; box-shadow: 0 0 0 7px rgba(255,212,59,.32); border-radius: 8px; z-index: 5; }

/* ---------- the Voicely voice bar, as mvp/bar.py draws it ----------
   GTK: a 600 px panel, rgba(28,28,30,.96), 16 px corners, padding 15 20 15 18, placed 170 px above
   the bottom of the work area (here the top of the Dock). Left of the words a 22 px indicator:
   five white bars that follow your voice, a spinner while it works, or a coloured mark (✓ done,
   ? asking, ! failed). Words 17 px; dim "Listening…" before any are heard; dim while working.
   It fades in when Ctrl+S is clearly held and fades away when the request is done. */
.sbar {
  position: absolute; left: 420px; top: 658px; width: 600px; z-index: 20;
  background: rgba(28,28,30,.96); border-radius: 16px; border: 1px solid rgba(0,0,0,.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 12px 28px rgba(0,0,0,.36), 0 2px 6px rgba(0,0,0,.22);
  padding: 15px 20px 15px 18px;
  font-family: var(--mac); letter-spacing: -.1px;
  opacity: 0; transition: opacity .17s linear;
}
.sbar.is-on { opacity: 1; }
.sbar.is-off { transition-duration: .25s; }
.sb-line { display: flex; align-items: center; gap: 12px; }
.sb-ind { position: relative; flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.sb-ind > * { grid-area: 1 / 1; opacity: 0; transition: opacity .14s; }
.sbar[data-mode="listening"] .sb-wave, .sbar[data-mode="working"] .sb-spin, .sbar[data-mode="done"] .sb-mark { opacity: 1; }
.sb-wave { display: flex; gap: 2px; align-items: center; height: 22px; }
.sb-wave i { width: 3px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.9); }
.sb-spin { width: 17px; height: 17px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.8); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sb-mark { width: 19px; height: 19px; border-radius: 50%; background: #30D158; color: #FFF; font: 700 12px/19px "Inter", sans-serif; text-align: center; }
.sb-words { flex: 1; min-width: 0; font-size: 17px; line-height: 1.3; color: rgba(255,255,255,.92); }
.sbar.quiet .sb-words { color: rgba(235,235,245,.42); }
.sbar[data-mode="working"] .sb-words { color: rgba(235,235,245,.6); }
.sb-note { margin: 5px 0 0 34px; font-size: 12.5px; color: rgba(235,235,245,.48); }
.sb-note:empty { display: none; }

/* ---------- keys (drawn in for the film) ---------- */
/* The person's own Control-S, held while they talk. */
.hotkeys { position: absolute; left: 720px; top: 568px; z-index: 21; display: flex; gap: 12px; transform: translateX(-50%) translateY(10px); opacity: 0; transition: opacity .25s, transform .35s cubic-bezier(.2,.9,.3,1.2); }
.hotkeys.is-on { opacity: 1; transform: translateX(-50%); }
.cap {
  position: relative; height: 58px; min-width: 58px; border-radius: 9px; background: linear-gradient(#FFF, #F1F1F4);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.25), 0 4px 0 #B9B9C2, 0 8px 18px rgba(0,0,0,.35);
  font-family: var(--mac); color: #1D1D1F; transition: transform .12s ease, box-shadow .12s ease;
}
.cap-ctrl { width: 92px; font-size: 12px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 7px 9px; }
.cap-ctrl small { align-self: flex-end; font-size: 15px; }
.cap-s { display: grid; place-items: center; font-size: 21px; font-weight: 500; }
.hotkeys.down .cap { transform: translateY(3px); box-shadow: 0 0 0 .5px rgba(0,0,0,.25), 0 1px 0 #B9B9C2, 0 3px 8px rgba(0,0,0,.25), 0 0 0 4px rgba(255,107,107,.6); }
/* The keys Voicely presses for you. */
.khint { position: absolute; left: 630px; top: 380px; z-index: 19; display: flex; gap: 8px; padding: 12px 14px; border-radius: 16px; background: rgba(28,28,30,.9); box-shadow: 0 12px 30px rgba(0,0,0,.35); transform: translate(-50%, -50%) scale(.9); opacity: 0; transition: opacity .2s, transform .3s cubic-bezier(.2,.9,.3,1.3); }
.khint.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.khint kbd { font: 500 26px/1 var(--mac); min-width: 50px; padding: 10px 12px; text-align: center; border-radius: 8px; background: #FFF; color: #1D1D1F; border: none; box-shadow: 0 3px 0 #B9B9C2; }
.khint.tap kbd { animation: tap .25s ease; }
@keyframes tap { 50% { transform: translateY(3px); box-shadow: 0 0 0 #B9B9C2; } }

/* ---------- pointer: the macOS arrow ---------- */
.mcur { position: absolute; left: 1180px; top: 700px; width: 26px; height: 26px; z-index: 30; pointer-events: none; transition: left .6s cubic-bezier(.6,0,.25,1), top .6s cubic-bezier(.6,0,.25,1); filter: drop-shadow(0 1.5px 2px rgba(0,0,0,.35)); }
.mcur svg { width: 100%; height: 100%; fill: #000; stroke: #FFF; stroke-width: 1.5; stroke-linejoin: round; }
.mcur::after { content: ""; position: absolute; left: -14px; top: -14px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,212,59,.7); opacity: 0; transform: scale(.3); }
.mcur.click::after { animation: ripple .45s ease-out; }
@keyframes ripple { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.7); } }

/* ---------- title card ---------- */
.card {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center;
  padding: 0 8cqw; background: var(--graphite); color: #FFF; pointer-events: none;
}
.card.is-off { visibility: hidden; }
.card-k { display: inline-flex; align-self: flex-start; align-items: center; gap: .55em; font: 700 max(12px, 1.5cqw)/1 var(--sans); color: var(--graphite); background: var(--tag); padding: .45em .7em; border-radius: .4em; box-shadow: inset 0 -2px 0 var(--tag-edge); }
.card-t { margin-top: .45em; font: 800 6.4cqw/1.04 var(--sans); letter-spacing: -.025em; }
.card-t .ln { display: block; }
.card-t .ln + .ln { color: var(--tag); }
.card-t .w { display: inline-block; white-space: pre; }

/* ---------- caption, laid over the film's top left (the bar and Dock are at the bottom) ---------- */
.fcap {
  position: absolute; left: clamp(12px, 2.4%, 28px); top: clamp(26px, 6%, 54px); z-index: 5; margin: 0;
  max-width: 62%; pointer-events: none;
  font: 700 clamp(16px, 2.15vw, 27px)/1.2 var(--sans); letter-spacing: -.01em; color: #FFF;
}
.fcap span { display: inline-block; padding: .42em .7em .46em; border-radius: .5em; background: rgba(20,20,22,.84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.fcap span:empty { display: none; }

/* ---------- play / pause ---------- */
.film-play {
  position: absolute; right: clamp(8px, 1.6%, 20px); top: clamp(26px, 6%, 54px); z-index: 6;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  background: rgba(20,20,22,.78); color: #FFF; display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.film-play:hover { background: #000; }
.film-play svg { width: 18px; height: 18px; fill: currentColor; }
.film-play .i-play, .film.paused .film-play .i-pause { display: none; }
.film.paused .film-play .i-play { display: block; }
.fp-label { display: none; }
.film.paused .film-play { width: auto; padding: 0 20px 0 16px; gap: 8px; grid-auto-flow: column; background: var(--tag); color: var(--graphite); border: 2px solid var(--graphite); font: 700 17px/1 var(--sans); }
.film.paused .fp-label { display: inline; }

/* ---------- the four films, under the screen ---------- */
.reel { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.reel-btn {
  position: relative; text-align: left; min-height: 56px; padding: 16px 4px 6px; border: 0; background: none; cursor: pointer;
  font-size: 16.5px; font-weight: 500; line-height: 1.25; color: var(--ink-2);
}
.reel-btn:hover { color: var(--ink); }
.reel-btn[aria-pressed="true"] { color: var(--ink); font-weight: 700; }
.reel-n { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.reel-bar { position: absolute; left: 4px; right: 4px; top: 4px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.reel-bar i { display: block; height: 100%; width: 0; background: var(--graphite); border-radius: 2px; }
.demo-fine { margin: 14px auto 0; max-width: 40em; text-align: center; font-size: 15px; color: var(--ink-2); }

@media (max-width: 720px) {
  /* phones: a square film, cropped to the action, so the Mac is big enough to read;
     the caption sits under the film, where it can be read at full size */
  .film { aspect-ratio: 1 / 1; }
  .fcap { position: static; max-width: none; margin-top: 10px; font-size: 18px; min-height: 2.6em; }
  .fcap span { background: var(--graphite); backdrop-filter: none; box-shadow: none; }
  .film-play { top: auto; bottom: 10px; width: 44px; height: 44px; }
  .reel { grid-template-columns: 1fr 1fr; gap: 4px 14px; }
  .reel-btn { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .film { cursor: default; }
}