/* Captain site v2 — products: Messengers & Web Chat (chat exchange), Calls (voice note + border beam), results roller */
/* products, family.co "Send · Receive · Swap": three equal columns, visual on top, name, two lines */
.cols{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.col .pic{position:relative;background:var(--block);border-radius:14px;aspect-ratio:4/5;margin-bottom:18px;overflow:hidden}
.col .pic > span{position:absolute;left:14px;bottom:12px;right:14px;font:400 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--faint)}
.col b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:4px 0 8px}
.col p{margin:0;font-size:16px;line-height:1.5;color:var(--muted)}

/* ---------- voice-note illustration (from /voice-note) ---------- */
.voice-note{position: relative;isolation: isolate;margin: 0;width: 100%;max-width: 36rem;aspect-ratio: 4 / 3;overflow: hidden;border-radius: 0.75rem;background: var(--tint);color: var(--ink)}
.voice-note__glow{position: absolute;inset: 0;background:
      radial-gradient(circle at 50% 8%, rgba(255,255,255,0.9), transparent 48%),
      linear-gradient(to bottom, transparent 58%, rgba(255,255,255,0.7));pointer-events: none}
.voice-note__stage{position: absolute;inset: 0}
.voice-note__sheet{position: absolute;left: 50%;transform-origin: 50% 100%;border: 1px solid rgba(0,0,0,0.05);background: rgba(255,255,255,0.55);box-shadow: 0 10px 30px rgba(0,0,0,0.04)}
.voice-note__sheet--back{top: 13%;height: 52%;width: 46%;border-radius: 1.6rem;transform: translateX(-50%) perspective(760px) rotateX(-8deg) translateY(-7%);background: rgba(255,255,255,0.45)}
.voice-note__sheet--mid{top: 15%;height: 53%;width: 50%;border-radius: 1.7rem;transform: translateX(-50%) perspective(760px) rotateX(-7deg) translateY(-3%);background: rgba(255,255,255,0.75)}
.voice-note__card{position: absolute;top: 17%;left: 50%;height: 55%;width: 54%;transform-origin: 50% 100%;transform: translateX(-50%) perspective(760px) rotateX(-6deg);overflow: hidden;border-radius: 1.8rem;border: 1px solid rgba(0,0,0,0.06);background: var(--card);padding: 6% 6% 0;box-shadow: 0 24px 64px rgba(0,0,0,0.10);-webkit-mask-image: linear-gradient(to bottom, var(--black) 0%, var(--black) 70%, transparent 100%);mask-image: linear-gradient(to bottom, var(--black) 0%, var(--black) 70%, transparent 100%)}
.voice-note__chip{position: absolute;top: 8%;right: 9%;width: 16%;aspect-ratio: 1;display: grid;place-items: center;border-radius: 0.75rem;background: var(--tint);color: var(--ink)}
.voice-note__chip svg{width: 52%;height: 52%}
.voice-note__status{display: flex;align-items: center;gap: 0.4em;margin: 0 0 0.9em;font-size: clamp(0.5rem, 1.3vw, 0.72rem);letter-spacing: 0.02em;text-transform: uppercase;color: var(--ink-3);font-weight: 500}
.voice-note__status::before{content: "";width: 0.5em;height: 0.5em;border-radius: 50%;background: var(--ink);animation: vn-blink 1.6s ease-in-out infinite}
.voice-note[data-playing="false"] .voice-note__status::before{animation-play-state: paused;opacity: 0.35}

/* transcript */
.voice-note__transcript{position: absolute;left: 6%;right: 6%;top: 27%;bottom: 0;overflow: hidden;-webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--black) 22%);mask-image: linear-gradient(to bottom, transparent 0%, var(--black) 22%)}
.voice-note__lines{position: absolute;left: 0;right: 0;bottom: 34%;display: flex;flex-direction: column;gap: 0.7em;font-size: clamp(0.62rem, 1.8vw, 1rem);letter-spacing: -0.025em;line-height: 1.35;max-width: 88%}
.voice-note__line{margin: 0}
.voice-note__line[data-who="user"]{color: var(--ink-2)}
.voice-note__line[data-who="ai"]{color: var(--ink)}
.voice-note__who{display: block;font-size: 0.7em;letter-spacing: 0.02em;text-transform: uppercase;color: var(--ink-3);margin-bottom: 0.25em;font-weight: 500}
.voice-note__line.is-typing .voice-note__text::after{content: "";display: inline-block;width: 0.09em;height: 0.95em;margin-left: 0.12em;vertical-align: -0.12em;background: currentColor;animation: vn-blink 0.9s steps(2, end) infinite}
.voice-note__line.is-old{opacity: 0.55}

/* player */
.voice-note__player{position: absolute;z-index: 20;left: 18%;right: 18%;bottom: 15%;height: 16%;min-height: 3.5rem;display: flex;align-items: center;gap: 0.5rem;padding: 0.5rem;border-radius: 1.75rem;border: 1px solid rgba(255,255,255,0.9);background: rgba(255,255,255,0.94);box-shadow: 0 22px 54px rgba(0,0,0,0.12);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px)}
.voice-note__speaker{display: grid;place-items: center;height: 100%;aspect-ratio: 1;flex-shrink: 0;border-radius: 50%;background: var(--tint);color: var(--ink)}
.voice-note__speaker svg{width: 42%;height: 42%}
.voice-note__wave{display: flex;flex: 1;min-width: 0;align-items: center;justify-content: space-between;align-self: stretch;overflow: hidden;padding: 0 0.25rem}
.voice-note__bar{width: 2px;flex-shrink: 0;border-radius: 999px;background: var(--ink);transform-origin: 50% 50%;will-change: transform, opacity;animation: voice-note-wave 1.3s cubic-bezier(0.77, 0, 0.175, 1) infinite;animation-delay: var(--voice-delay);transition: background-color 0.4s ease}
.voice-note__bar.is-ahead{background: rgba(31,31,31,0.18)}
.voice-note[data-playing="false"] .voice-note__bar{opacity: 0.42;animation-play-state: paused;transform: scaleY(0.4)}
.voice-note__toggle{display: grid;place-items: center;height: 100%;aspect-ratio: 1;flex-shrink: 0;border: 0;border-radius: 50%;background: var(--ink);color: var(--page);cursor: pointer;transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1)}
.voice-note__toggle:active{transform: scale(0.96)}
.voice-note__toggle:focus-visible{outline: 2px solid var(--ink);outline-offset: 2px}
.voice-note__toggle svg{width: 34%;height: 34%}
.voice-note__toggle .icon-play{display: none}
.voice-note[data-playing="false"] .icon-pause{display: none}
.voice-note[data-playing="false"] .icon-play{display: block}
@keyframes voice-note-wave{
    0%, 100% { opacity: 0.54; transform: scaleY(0.4); }
    50%      { opacity: 1;    transform: scaleY(var(--voice-scale)); }
  }

/* voice-note illustration inside the Calls tile: fill the tile, fixed type sizes instead of vw */
.pic .voice-note{position:absolute;inset:0;width:auto;max-width:none;aspect-ratio:auto;border-radius:14px;--tint:var(--block);--ink-2:var(--muted);--ink-3:var(--faint)}   /* --ink, --card and --page are inherited; redefining them here as var(--x) made a cycle and blanked the waveform */
.pic .voice-note__glow{display:none}

/* the illustration's own white haze made this tile lighter than its neighbour */
.pic .voice-note__status{font-size:8px;margin-bottom:.7em;padding-right:22%;white-space:nowrap}
.pic .voice-note__transcript{top:24%}
.pic .voice-note__lines{font-size:12.5px;gap:.65em;max-width:96%;bottom:30%}
.pic .voice-note__card{top:16%;width:72%;height:54%;padding:7% 7% 0;border-radius:16px;transform:translateX(-50%);-webkit-mask-image:none;mask-image:none}

/* Safari drew the masked card twice; fade the text with a gradient instead */
.pic .voice-note__card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(to bottom,transparent,var(--card));pointer-events:none;z-index:3}
.pic .voice-note__sheet--back,.pic .voice-note__sheet--mid{border-radius:16px;transform:translateX(-50%);border-color:transparent;box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pic .voice-note__sheet--back{top:10%;width:60%;height:50%;background:rgba(255,255,255,.22);filter:blur(1.2px);opacity:.7}
.pic .voice-note__sheet--mid{top:13%;width:66%;height:52%;background:rgba(255,255,255,.45);filter:blur(.5px);opacity:.9}
.pic .voice-note__chip{top:7%;right:7%;width:12%;border-radius:8px}
.pic .voice-note__player{left:14%;right:14%;bottom:13%;height:11%;min-height:42px;padding:5px;gap:6px;border-radius:999px;border:1px solid var(--line);background:var(--card);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.pic .voice-note__bar{width:1.5px}
.pic .voice-note__toggle svg{width:44%;height:44%}
.pic .voice-note__speaker svg{width:52%;height:52%}
.pic .voice-note__chip svg{width:62%;height:62%}

/* ---------- chat-exchange (Messengers tile): rows grow in smoothly, text fades and un-blurs, one easing everywhere ---------- */
.ce{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:12% 10%;font-size:12px;line-height:1.4;color:var(--ink);overflow:hidden;--ease:cubic-bezier(.22,1,.36,1)}
.ce-row{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.ce-row.on{grid-template-rows:1fr}
.ce-row > div{min-height:0;overflow:hidden}
.ce-row.done > div{overflow:visible}
.ce-msg{display:flex;align-items:flex-end;gap:7px;max-width:92%;padding-top:9px;opacity:0;filter:blur(4px);transform:translateY(6px);transition:opacity .55s var(--ease),filter .55s var(--ease),transform .55s var(--ease)}
.ce-msg.u{margin-left:auto;justify-content:flex-end}   /* короткая реплика клиента всё равно прижата вправо, а не к левому краю 92%-блока */
.ce-msg.u .ce-b{background:var(--card);color:var(--ink);border-radius:14px;padding:8px 12px}
.ce-row.on .ce-msg{opacity:1;filter:blur(0);transform:none}
.ce-msg .ce-b{font-size:12px;line-height:1.4}
.ce-msg.a .ce-b{padding:2px 0;color:var(--ink)}
.ce-mark{display:grid;place-items:center;flex-shrink:0;width:22px;height:22px;color:var(--accent)}
.ce-mark svg{width:19px;height:19px;overflow:visible}
.ce-think{display:flex;align-items:center;height:20px;padding:0 2px;font-size:12px;font-weight:500;color:transparent;background:linear-gradient(90deg,var(--faint) 0%,var(--faint) 38%,var(--ink) 50%,var(--faint) 62%,var(--faint) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:ce-shimmer .9s linear infinite;transition:opacity .3s}
.ce-msg.thinking{align-items:center}
@keyframes ce-shimmer{0%{background-position:100% 0}100%{background-position:-120% 0}}
.ce-reply{opacity:0;filter:blur(3px);transition:opacity .5s var(--ease),filter .5s var(--ease)}
.ce-reply.on{opacity:1;filter:blur(0)}

/* car widget: thumbnail, name, meta, price, one button */
.ce-car{margin:10px 0 0 27px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;opacity:0;filter:blur(4px);transform:translateY(6px);transition:opacity .55s var(--ease),filter .55s var(--ease),transform .55s var(--ease)}
.ce-row.on .ce-car{opacity:1;filter:blur(0);transform:none}
.ce-car .top{display:flex;gap:10px;padding:10px;align-items:center}
.ce-car .th{width:56px;height:44px;border-radius:8px;background:var(--line) url(../img/car.jpg) center/cover no-repeat;flex-shrink:0}
.ce-car b{display:block;font-size:12px;font-weight:600;line-height:1.2}
.ce-car small{display:block;font-size:10.5px;color:var(--muted);margin-top:3px}
.ce-car .bot{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-top:1px solid var(--fill)}
.ce-price{font-size:10px;color:var(--muted);line-height:1.2}
.ce-price b{font-size:12px;font-weight:600;margin-top:1px}
/* комплектация: по строке на пункт, иконка Solar слева */
.ce-spec{display:flex;flex-direction:column;gap:5px;padding:0 10px 9px}
.ce-spec span{display:flex;align-items:center;gap:7px;font-size:10.5px;line-height:1.25;color:var(--muted)}
.ce-spec svg{width:13px;height:13px;flex-shrink:0;color:var(--ink);fill:none;stroke-width:1.5}
.ce-stock{font-size:10px;color:var(--muted)}
.ce-btn{background:var(--ink);color:var(--white);border-radius:999px;padding:6px 11px;font-size:11px;font-weight:500;white-space:nowrap}

/* steps */
.ce-steps{margin:8px 0 0 27px;display:flex;flex-direction:column;gap:6px;font-size:11.5px}
.ce-steps div{display:flex;align-items:center;gap:8px;color:var(--faint);opacity:0;transform:translateY(-5px);transition:opacity .45s var(--ease),transform .45s var(--ease),color .3s}
.ce-steps div.in{opacity:1;transform:none}
.ce-steps svg{width:15px;height:15px;flex-shrink:0;color:#c8c8c8;transition:color .3s}
.ce-steps .i-run,.ce-steps .i-done{display:none}
.ce-steps div.run{color:var(--ink);font-weight:500}
.ce-steps div.run .i-pend{display:none}
.ce-steps div.run .i-run{display:block;color:var(--ink)}
.ce-steps div.done{color:var(--muted)}
.ce-steps div.done .i-pend,.ce-steps div.done .i-run{display:none}
.ce-steps div.done .i-done{display:block;color:var(--muted)}

/* ---------- prompt-roller (what the business gets): a drum of facts, one at a time in the pill, Captain mark instead of a face ---------- */
.pr{position:relative;isolation:isolate;overflow:hidden;border-radius:14px;background:var(--block);aspect-ratio:4/3;margin-top:0;container-type:inline-size}
.pr-stage{position:absolute;inset:0;perspective:900px;transform-style:preserve-3d}
.pr-pill,.pr-item{position:absolute;top:50%;left:50%;height:clamp(3rem,13cqw,4.5rem);width:86cqw}
.pr-pill{z-index:35;transform:translate(-50%,-50%);display:flex;align-items:center;border-radius:999px;border:1px solid var(--rule);background:var(--card);padding:0 clamp(.75rem,3.5cqw,1.5rem)}
.pr-mark{display:grid;place-items:center;flex-shrink:0;width:clamp(2.25rem,9.5cqw,3.25rem);height:clamp(2.25rem,9.5cqw,3.25rem);color:var(--accent)}
.pr-mark svg{width:80%;height:80%;overflow:visible}
.pr-item{backface-visibility:hidden;transform-style:preserve-3d;will-change:transform,opacity;animation:pr-cycle 11.2s cubic-bezier(.77,0,.175,1) infinite;animation-delay:var(--d)}
.pr-quiet,.pr-active{position:absolute;inset:0;backface-visibility:hidden;animation:pr-active 11.2s cubic-bezier(.77,0,.175,1) infinite;animation-delay:inherit;display:flex;align-items:center;padding-left:clamp(4.5rem,17cqw,6.5rem);padding-right:clamp(.75rem,3.5cqw,1.5rem);font-size:clamp(1.05rem,4.4cqw,1.55rem);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-quiet{font-weight:500;color:var(--muted);animation-name:pr-quiet}
.pr-active{font-weight:600;color:var(--ink)}
.pr-active b,.pr-quiet b{font-weight:inherit;margin-right:.35em}
.pr-fade{position:absolute;left:0;right:0;z-index:50;height:16%;pointer-events:none}
.pr-fade.t{top:0;background:linear-gradient(to bottom,var(--block),transparent)}
.pr-fade.b{bottom:0;background:linear-gradient(to top,var(--block),transparent)}

/* eight items, one step = 12.5% of the cycle; the item passes through the centre and drops away below, re-entering from above */
@keyframes pr-cycle{
  0%,100%{opacity:1;z-index:40;transform:translate3d(-50%,-50%,54px) rotate(0) scale(1)}
  12.5%{opacity:.56;z-index:30;transform:translate3d(-57%,92%,20px) rotate(-7deg) scale(.92)}
  25%{opacity:.26;z-index:20;transform:translate(-67%,188%) rotate(-13deg) scale(.84)}
  37.5%{opacity:0;z-index:10;transform:translate(-79%,270%) rotate(-18deg) scale(.78)}
  48%{opacity:0;z-index:0;transform:translate(-86%,320%) rotate(-21deg) scale(.74)}
  52%{opacity:0;z-index:0;transform:translate(-86%,-420%) rotate(21deg) scale(.74)}
  62.5%{opacity:0;z-index:10;transform:translate(-79%,-370%) rotate(18deg) scale(.78)}
  75%{opacity:.26;z-index:20;transform:translate(-67%,-288%) rotate(13deg) scale(.84)}
  87.5%{opacity:.56;z-index:30;transform:translate3d(-57%,-192%,20px) rotate(7deg) scale(.92)}
}
@keyframes pr-active{0%,4%,96%,100%{opacity:1}10%,90%{opacity:0}}
@keyframes pr-quiet{0%,4%,96%,100%{opacity:0}10%,90%{opacity:1}}

/* border-beam v1.3.0 by Jakub Antalik (MIT) · idle state: size="pulse-inner" colorVariant="sunset" theme="light", CSS as generated by the component.
   The component drives the breathing variables from JS; here the same variables breathe from CSS keyframes. */
@property --bw1--p-{syntax:"<number>";initial-value:1;inherits:true}
@property --bh1--p-{syntax:"<number>";initial-value:1;inherits:true}
@property --bw2--p-{syntax:"<number>";initial-value:1;inherits:true}
@property --bh2--p-{syntax:"<number>";initial-value:1;inherits:true}
@property --bw3--p-{syntax:"<number>";initial-value:1;inherits:true}
@property --bh3--p-{syntax:"<number>";initial-value:1;inherits:true}
@property --bgh--p-{syntax:"<number>";initial-value:1;inherits:true}
@property --bop-tl--p-{syntax:"<number>";initial-value:1;inherits:true}
@property --bop-tr--p-{syntax:"<number>";initial-value:1;inherits:true}
@property --bop-bl--p-{syntax:"<number>";initial-value:1;inherits:true}
@property --bop-br--p-{syntax:"<number>";initial-value:1;inherits:true}
@property --bx1--p-{syntax:"<length>";initial-value:0px;inherits:true}
@property --by1--p-{syntax:"<length>";initial-value:0px;inherits:true}
@property --bx2--p-{syntax:"<length>";initial-value:0px;inherits:true}
@property --by2--p-{syntax:"<length>";initial-value:0px;inherits:true}
@property --bx3--p-{syntax:"<length>";initial-value:0px;inherits:true}
@property --by3--p-{syntax:"<length>";initial-value:0px;inherits:true}
@property --beam-opacity--p-{syntax:"<number>";initial-value:0;inherits:true}
@property --beam-hue--p-{syntax:"<angle>";initial-value:0deg;inherits:true}
[data-beam="-p-"]{position:absolute;border-radius:28px;overflow:hidden;isolation:isolate;--beam-hue-base:-22deg;animation:beam-fade-in--p- .6s ease forwards,pb1 4.3s ease-in-out infinite alternate,pb2 5.1s ease-in-out infinite alternate,pb3 6.2s ease-in-out infinite alternate,pbop 7s ease-in-out infinite alternate,pbhue 11s ease-in-out infinite alternate}
[data-beam="-p-"]::after{content:"";position:absolute;inset:0;border-radius:28px;padding:1px;clip-path:inset(0 round 28px);background:radial-gradient(ellipse calc(70px * var(--bw1--p-) * var(--pulse-glow-boost,1)) calc(40px * var(--bh1--p-) * var(--bgh--p-)) at calc(33% + var(--bx1--p-)) calc(-7.4% + var(--by1--p-)),rgba(255,80,50,var(--bop-tl--p-)),transparent),radial-gradient(ellipse calc(60px * var(--bw2--p-) * var(--pulse-glow-boost,1)) calc(35px * var(--bh2--p-) * var(--bgh--p-)) at calc(12% + var(--bx2--p-)) calc(-5% + var(--by2--p-)),rgba(255,160,40,var(--bop-tl--p-)),transparent),radial-gradient(ellipse calc(40px * var(--bw3--p-) * var(--pulse-glow-boost,1)) calc(70px * var(--bh3--p-) * var(--bgh--p-)) at calc(2.1% + var(--bx3--p-)) calc(68.3% + var(--by3--p-)),rgba(255,120,60,var(--bop-bl--p-)),transparent),radial-gradient(ellipse calc(20px * var(--bw1--p-) * var(--pulse-glow-boost,1)) calc(35px * var(--bh1--p-) * var(--bgh--p-)) at calc(2.1% + var(--bx1--p-)) calc(68.3% + var(--by1--p-)),rgba(255,200,50,var(--bop-bl--p-)),transparent),radial-gradient(ellipse calc(180px * var(--bw2--p-) * var(--pulse-glow-boost,1)) calc(32px * var(--bh2--p-) * var(--bgh--p-)) at calc(74.4% + var(--bx2--p-)) calc(100% + var(--by2--p-)),rgba(255,100,80,var(--bop-br--p-)),transparent),radial-gradient(ellipse calc(85px * var(--bw3--p-) * var(--pulse-glow-boost,1)) calc(26px * var(--bh3--p-) * var(--bgh--p-)) at calc(55% + var(--bx3--p-)) calc(100% + var(--by3--p-)),rgba(255,180,60,var(--bop-br--p-)),transparent),radial-gradient(ellipse calc(74px * var(--bw1--p-) * var(--pulse-glow-boost,1)) calc(32px * var(--bh1--p-) * var(--bgh--p-)) at calc(93.9% + var(--bx1--p-)) calc(0% + var(--by1--p-)),rgba(255,60,60,var(--bop-tr--p-)),transparent),radial-gradient(ellipse calc(26px * var(--bw2--p-) * var(--pulse-glow-boost,1)) calc(42px * var(--bh2--p-) * var(--bgh--p-)) at calc(100% + var(--bx2--p-)) calc(27.1% + var(--by2--p-)),rgba(255,140,50,var(--bop-tr--p-)),transparent),radial-gradient(ellipse calc(52px * var(--bw3--p-) * var(--pulse-glow-boost,1)) calc(48px * var(--bh3--p-) * var(--bgh--p-)) at calc(100% + var(--bx3--p-)) calc(27.1% + var(--by3--p-)),rgba(255,90,70,var(--bop-tr--p-)),transparent);-webkit-mask:linear-gradient(var(--white) 0 0) content-box,linear-gradient(var(--white) 0 0);-webkit-mask-composite:xor;mask:linear-gradient(var(--white) 0 0) content-box,linear-gradient(var(--white) 0 0);mask-composite:exclude;pointer-events:none;z-index:2;opacity:calc(var(--beam-opacity--p-) * 0.32 * var(--beam-strength,1));filter:hue-rotate(calc(var(--beam-hue-base,0deg) + var(--beam-hue--p-))) brightness(1.30) saturate(0.75)}
[data-beam="-p-"]::before{content:"";position:absolute;inset:0;border-radius:28px;clip-path:inset(0 round 28px);background:radial-gradient(ellipse calc(65px * var(--bw1--p-) * var(--pulse-glow-boost,1)) calc(35px * var(--bh1--p-) * var(--bgh--p-)) at calc(33% + var(--bx1--p-)) calc(-7.4% + var(--by1--p-)),rgba(255,80,50,var(--bop-tl--p-)),transparent),radial-gradient(ellipse calc(55px * var(--bw2--p-) * var(--pulse-glow-boost,1)) calc(30px * var(--bh2--p-) * var(--bgh--p-)) at calc(12% + var(--bx2--p-)) calc(-5% + var(--by2--p-)),rgba(255,160,40,var(--bop-tl--p-)),transparent),radial-gradient(ellipse calc(35px * var(--bw3--p-) * var(--pulse-glow-boost,1)) calc(65px * var(--bh3--p-) * var(--bgh--p-)) at calc(2.1% + var(--bx3--p-)) calc(68.3% + var(--by3--p-)),rgba(255,120,60,var(--bop-bl--p-)),transparent),radial-gradient(ellipse calc(173px * var(--bw2--p-) * var(--pulse-glow-boost,1)) calc(28px * var(--bh2--p-) * var(--bgh--p-)) at calc(74.4% + var(--bx2--p-)) calc(100% + var(--by2--p-)),rgba(255,100,80,var(--bop-br--p-)),transparent),radial-gradient(ellipse calc(80px * var(--bw3--p-) * var(--pulse-glow-boost,1)) calc(22px * var(--bh3--p-) * var(--bgh--p-)) at calc(55% + var(--bx3--p-)) calc(100% + var(--by3--p-)),rgba(255,180,60,var(--bop-br--p-)),transparent),radial-gradient(ellipse calc(69px * var(--bw1--p-) * var(--pulse-glow-boost,1)) calc(28px * var(--bh1--p-) * var(--bgh--p-)) at calc(93.9% + var(--bx1--p-)) calc(0% + var(--by1--p-)),rgba(255,60,60,var(--bop-tr--p-)),transparent),radial-gradient(ellipse calc(47px * var(--bw3--p-) * var(--pulse-glow-boost,1)) calc(44px * var(--bh3--p-) * var(--bgh--p-)) at calc(100% + var(--bx3--p-)) calc(27.1% + var(--by3--p-)),rgba(255,90,70,var(--bop-tr--p-)),transparent);-webkit-mask-image:linear-gradient(white,transparent 28px,transparent calc(100% - 28px),white),linear-gradient(to right,white,transparent 28px,transparent calc(100% - 28px),white);-webkit-mask-composite:source-over;mask-image:linear-gradient(white,transparent 28px,transparent calc(100% - 28px),white),linear-gradient(to right,white,transparent 28px,transparent calc(100% - 28px),white);mask-composite:add;pointer-events:none;z-index:1;opacity:calc(var(--beam-opacity--p-) * 0.40 * var(--beam-strength,1));filter:hue-rotate(calc(var(--beam-hue-base,0deg) + var(--beam-hue--p-))) brightness(1.30) saturate(0.75)}
@keyframes beam-fade-in--p-{to{--beam-opacity--p-:1}}
@keyframes pbhue{from{--beam-hue--p-:-14deg}to{--beam-hue--p-:14deg}}

/* border-beam v1.3.0 · playing state: size="line" colorVariant="sunset" theme="light", CSS as generated by the component */
@property --beam-x--l-{syntax:"<number>";initial-value:0;inherits:true}
@property --beam-w--l-{syntax:"<number>";initial-value:1;inherits:true}
@property --beam-h--l-{syntax:"<number>";initial-value:1;inherits:true}
@property --beam-spike--l-{syntax:"<number>";initial-value:1;inherits:true}
@property --beam-spike2--l-{syntax:"<number>";initial-value:1;inherits:true}
@property --beam-edge--l-{syntax:"<number>";initial-value:1;inherits:true}
@property --beam-opacity--l-{syntax:"<number>";initial-value:0;inherits:true}
[data-beam="-l-"]{position:absolute;border-radius:28px;overflow:hidden;--beam-hue-base:-22deg}
[data-beam="-l-"][data-active]{animation:beam-travel--l- 3.1s linear infinite,beam-edge-fade--l- 3.1s linear infinite,beam-breathe--l- 4.0s ease-in-out infinite,beam-spike--l- 4.1s ease-in-out infinite,beam-spike2--l- 5.3s ease-in-out infinite,beam-fade-in--l- 0.6s ease forwards}
[data-beam="-l-"][data-active]::after{content:"";position:absolute;inset:0;border-radius:27px;padding:1px;clip-path:inset(0 round 28px);background:radial-gradient(ellipse calc(35px * var(--beam-w--l-)) calc(28px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100%) calc(100% + 2px),rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.25) 35%,transparent 70%),radial-gradient(ellipse calc(45px * var(--beam-w--l-)) calc(36px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100%) calc(100% + 2px),rgb(220,80,40),transparent),radial-gradient(ellipse calc(35px * var(--beam-w--l-)) calc(32px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100% + 65px) calc(100%),rgb(230,150,30),transparent),radial-gradient(ellipse calc(40px * var(--beam-w--l-)) calc(28px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100% - 60px) calc(100% + 2px),rgb(210,110,50),transparent),radial-gradient(ellipse calc(35px * var(--beam-w--l-)) calc(34px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100% - 90px) calc(100%),rgb(200,60,60),transparent),radial-gradient(ellipse calc(38px * var(--beam-w--l-)) calc(30px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100% + 85px) calc(100% - 1px),rgb(220,170,40),transparent),radial-gradient(ellipse calc(50px * var(--beam-w--l-)) calc(24px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100% + 35px) calc(100% + 1px),rgb(210,100,30),transparent),radial-gradient(ellipse calc(40px * var(--beam-w--l-)) calc(22px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100% - 35px) calc(100%),rgb(230,130,60),transparent),radial-gradient(ellipse calc(35px * var(--beam-w--l-)) calc(28px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100% + 110px) calc(100% + 1px),rgb(190,70,50),transparent),radial-gradient(ellipse calc(30px * var(--beam-w--l-)) calc(30px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100% - 110px) calc(100% - 1px),rgb(180,50,50),transparent);-webkit-mask:radial-gradient(ellipse calc(78px * var(--beam-w--l-)) calc(60px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100%) 100%,white 0%,rgba(255,255,255,0.5) 45%,transparent 100%),linear-gradient(var(--white) 0 0) content-box,linear-gradient(var(--white) 0 0);-webkit-mask-composite:source-in,xor;mask:radial-gradient(ellipse calc(78px * var(--beam-w--l-)) calc(60px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100%) 100%,white 0%,rgba(255,255,255,0.5) 45%,transparent 100%),linear-gradient(var(--white) 0 0) content-box,linear-gradient(var(--white) 0 0);mask-composite:intersect,exclude;pointer-events:none;z-index:2;opacity:calc(var(--beam-opacity--l-) * var(--beam-edge--l-) * 0.16 * var(--beam-strength,1));animation:beam-hue-shift--l- 12s ease-in-out infinite}
[data-beam="-l-"][data-active]::before{content:"";position:absolute;inset:0;border-radius:28px;background:radial-gradient(ellipse calc(33px * var(--beam-w--l-)) calc(30px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100%) calc(100%),rgba(255,100,60,0.48),transparent),radial-gradient(ellipse calc(24px * var(--beam-w--l-)) calc(26px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100% + 39px) calc(100% - 3px),rgba(255,180,50,0.42),transparent),radial-gradient(ellipse calc(27px * var(--beam-w--l-)) calc(24px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100% - 36px) calc(100%),rgba(255,140,70,0.48),transparent),radial-gradient(ellipse calc(23px * var(--beam-w--l-)) calc(28px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100% - 54px) calc(100% - 2px),rgba(255,80,80,0.42),transparent),radial-gradient(ellipse calc(24px * var(--beam-w--l-)) calc(24px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100% + 51px) calc(100% - 1px),rgba(255,200,60,0.50),transparent),radial-gradient(ellipse calc(30px * var(--beam-w--l-)) calc(20px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100% + 21px) calc(100%),rgba(255,120,50,0.45),transparent),radial-gradient(ellipse calc(25px * var(--beam-w--l-)) calc(18px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100% - 21px) calc(100% - 2px),rgba(255,160,80,0.40),transparent),radial-gradient(ellipse calc(21px * var(--beam-w--l-)) calc(24px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100% + 66px) calc(100%),rgba(255,90,60,0.45),transparent),radial-gradient(ellipse calc(18px * var(--beam-w--l-)) calc(26px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100% - 66px) calc(100% - 1px),rgba(255,70,70,0.52),transparent);box-shadow:inset 0 0 9px 1px rgba(0,0,0,0.14);-webkit-mask-image:radial-gradient(ellipse calc(78px * var(--beam-w--l-)) calc(60px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100%) 100%,white 0%,rgba(255,255,255,0.5) 45%,transparent 100%),linear-gradient(white,transparent 28px,transparent calc(100% - 28px),white),linear-gradient(to right,white,transparent 28px,transparent calc(100% - 28px),white);-webkit-mask-composite:source-in,source-over;mask-image:radial-gradient(ellipse calc(78px * var(--beam-w--l-)) calc(60px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100%) 100%,white 0%,rgba(255,255,255,0.5) 45%,transparent 100%),linear-gradient(white,transparent 28px,transparent calc(100% - 28px),white),linear-gradient(to right,white,transparent 28px,transparent calc(100% - 28px),white);mask-composite:intersect,add;pointer-events:none;z-index:1;opacity:calc(var(--beam-opacity--l-) * var(--beam-edge--l-) * 0.32 * var(--beam-strength,1));clip-path:inset(0 round 28px);animation:beam-hue-shift--l- 12s ease-in-out infinite}
[data-beam="-l-"] [data-beam-bloom]{display:none;position:absolute;inset:0;border-radius:27px;clip-path:inset(0 round 28px);padding:0;-webkit-mask:radial-gradient(ellipse calc(84px * var(--beam-w--l-)) calc(110px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100%) 100%,white 0%,rgba(255,255,255,0.5) 35%,transparent 100%);mask:radial-gradient(ellipse calc(84px * var(--beam-w--l-)) calc(110px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100%) 100%,white 0%,rgba(255,255,255,0.5) 35%,transparent 100%);background:radial-gradient(ellipse calc(0.8px * var(--beam-spike--l-)) calc(92px * var(--beam-h--l-)) at 8% calc(100% - 2px),rgb(200,80,40),rgba(200,80,40,0.85) 30%,transparent 88%),radial-gradient(ellipse calc(10px * var(--beam-spike2--l-)) calc(35px * var(--beam-h--l-)) at 22% calc(100% - 4px),rgb(220,120,30),rgba(220,120,30,0.7) 50%,transparent 95%),radial-gradient(ellipse calc(2px * (2 - var(--beam-spike--l-))) calc(72px * var(--beam-h--l-)) at 36% calc(100% - 3px),rgb(200,60,30),rgba(200,60,30,0.8) 40%,transparent 90%),radial-gradient(ellipse calc(14px * var(--beam-spike2--l-)) calc(28px * var(--beam-h--l-)) at 50% calc(100% - 2px),rgba(220,100,20,0.7),rgba(220,100,20,0.46) 55%,transparent 96%),radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2--l-))) calc(85px * var(--beam-h--l-)) at 64% calc(100% - 4px),rgb(180,40,20),rgba(180,40,20,0.82) 35%,transparent 89%),radial-gradient(ellipse calc(7px * var(--beam-spike--l-)) calc(45px * var(--beam-h--l-)) at 78% calc(100% - 2px),rgb(210,80,10),rgba(210,80,10,0.7) 48%,transparent 94%),radial-gradient(ellipse calc(1px * (2 - var(--beam-spike--l-))) calc(60px * var(--beam-h--l-)) at 92% calc(100% - 3px),rgb(190,70,30),rgba(190,70,30,0.78) 42%,transparent 91%),radial-gradient(ellipse calc(50px * var(--beam-w--l-)) calc(32px * var(--beam-h--l-)) at calc(var(--beam-x--l-) * 100%) calc(100%),rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.18) 30%,rgba(0,0,0,0.03) 60%,transparent 85%);pointer-events:none;z-index:3;opacity:0}
[data-beam="-l-"][data-active] [data-beam-bloom]{display:block;opacity:calc(var(--beam-opacity--l-) * var(--beam-edge--l-) * 0.30 * var(--beam-strength,1));animation:beam-hue-shift-bloom--l- 8s ease-in-out infinite}
@keyframes beam-travel--l-{0%{--beam-x--l-:0.06;--beam-w--l-:0.5}10%{--beam-x--l-:0.15;--beam-w--l-:0.8}20%{--beam-x--l-:0.25;--beam-w--l-:1.1}30%{--beam-x--l-:0.35;--beam-w--l-:1.3}40%{--beam-x--l-:0.44;--beam-w--l-:1.45}50%{--beam-x--l-:0.5;--beam-w--l-:1.5}60%{--beam-x--l-:0.56;--beam-w--l-:1.45}70%{--beam-x--l-:0.65;--beam-w--l-:1.3}80%{--beam-x--l-:0.75;--beam-w--l-:1.1}90%{--beam-x--l-:0.85;--beam-w--l-:0.8}100%{--beam-x--l-:0.94;--beam-w--l-:0.5}}
@keyframes beam-edge-fade--l-{0%{--beam-edge--l-:0}12.5%{--beam-edge--l-:0}32.5%{--beam-edge--l-:1}67.5%{--beam-edge--l-:1}87.5%{--beam-edge--l-:0}100%{--beam-edge--l-:0}}
@keyframes beam-breathe--l-{0%,100%{--beam-h--l-:0.8}25%{--beam-h--l-:1.25}55%{--beam-h--l-:0.85}80%{--beam-h--l-:1.3}}
@keyframes beam-spike--l-{0%{--beam-spike--l-:0.8}25%{--beam-spike--l-:1.3}50%{--beam-spike--l-:0.9}75%{--beam-spike--l-:1.4}100%{--beam-spike--l-:0.8}}
@keyframes beam-spike2--l-{0%{--beam-spike2--l-:1.2}25%{--beam-spike2--l-:0.7}50%{--beam-spike2--l-:1.4}75%{--beam-spike2--l-:0.8}100%{--beam-spike2--l-:1.2}}
@keyframes beam-fade-in--l-{to{--beam-opacity--l-:1}}
@keyframes beam-hue-shift--l-{0%{filter:hue-rotate(-13deg) brightness(1.30) saturate(1.95)}50%{filter:hue-rotate(13deg) brightness(1.30) saturate(1.95)}100%{filter:hue-rotate(-13deg) brightness(1.30) saturate(1.95)}}
@keyframes beam-hue-shift-bloom--l-{0%{filter:blur(8px) hue-rotate(-23deg) brightness(1.30) saturate(1.95)}50%{filter:blur(8px) hue-rotate(23deg) brightness(1.30) saturate(1.95)}100%{filter:blur(8px) hue-rotate(-23deg) brightness(1.30) saturate(1.95)}}

/* our hooks: the player keeps its own look; the beam runs a little faster while the recording plays */
.pic .voice-note__toggle{background:var(--accent);color:var(--white)}
.pic .voice-note__toggle:hover{background:var(--accent-mid)}
.pic .voice-note__player > *{position:relative;z-index:4}
.darkmode .pic .voice-note{--tint:#1C1C1E;--card:#2C2C2E;--page:#1C1C1E;--ink:#F5F5F7;--ink-2:rgba(235,235,245,.6);--ink-3:rgba(235,235,245,.3)}
.darkmode .pic .voice-note__player{background:#2C2C2E;border-color:rgba(84,84,88,.65);box-shadow:0 10px 30px rgba(0,0,0,.5);--beam-strength:.25}
.darkmode .pic .voice-note__sheet--back{background:rgba(255,255,255,.035)}
.darkmode .pic .voice-note__sheet--mid{background:rgba(255,255,255,.07)}
.darkmode .pic .voice-note__card{border-color:rgba(255,255,255,.08);box-shadow:0 24px 64px rgba(0,0,0,.5)}
.darkmode .ce-btn{color:var(--black)}
.darkmode .voice-note__bar.is-ahead{background:rgba(255,255,255,.22)}

/* ---------- where Captain answers: the channel icons under the description (no switching, just the row) ---------- */
.col{min-width:0}
/* channel and call glyphs set into the sentence, each in its brand colour */
.col p .ic{display:inline-block;width:16px;height:16px;margin:0 4px 0 1px;vertical-align:-3px;color:var(--brand)}
.col p .ic svg{display:block;width:100%;height:100%}
.col p .nb{white-space:nowrap}


@media (max-width:640px){
  .cols{grid-template-columns:1fr;gap:40px}
  .pr{aspect-ratio:auto;height:300px;border-radius:12px}
  .pr-pill,.pr-item{width:92cqw;height:3rem}
  .pr-pill{padding:0 .5rem}
  .pr-mark{width:2.1rem;height:2.1rem}
  .pr-quiet,.pr-active{padding-left:3.4rem;padding-right:.7rem;font-size:.98rem}
}

@media (prefers-reduced-motion: reduce){
  .voice-note__bar{animation: none;opacity: 0.76;transform: scaleY(0.66)}
  .voice-note__status::before{animation: none}
  .voice-note__line.is-typing .voice-note__text::after{animation: none}
}

@media (prefers-reduced-motion:reduce){
  .ce-think{animation:none;color:var(--faint)}
  .ce-row,.ce-msg,.ce-car,.ce-reply,.ce-steps div{transition:none}
  .pr-item,.pr-quiet,.pr-active{animation:none}
  .pr-item{opacity:0}
  .pr-item:first-child{opacity:1;transform:translate(-50%,-50%)}
  .pr-item:first-child .pr-quiet{opacity:0}
  [data-beam="-p-"],[data-beam="-l-"][data-active],[data-beam="-r0-"][data-active]::before,[data-beam="-r0-"][data-active]::after,[data-beam="-r0-"][data-active] [data-beam-bloom]{animation:none;--beam-opacity--r0-:1;--beam-edge--r0-:1;--beam-x--r0-:.5}
}

/* while the phone rings there is nothing to transcribe: one word, shimmering, in the caption box */
.voice-note__calling{margin:0;display:inline-flex;align-items:center;gap:7px;font-size:13px;letter-spacing:.02em;color:var(--muted)}
.voice-note__calling svg{width:18px;height:18px;flex:none}
.voice-note__calling span{background:linear-gradient(90deg,var(--muted) 0%,var(--muted) 35%,var(--ink) 50%,var(--muted) 65%,var(--muted) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:vn-shimmer 1.8s linear infinite}
@keyframes vn-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.voice-note__calling span{animation:none;-webkit-text-fill-color:currentColor;background:none}}
/* while the recording plays, the line Captain is saying right now reads in orange; finished lines settle back to ink */
.voice-note[data-playing="true"] .voice-note__line[data-who="ai"].is-typing .voice-note__text{color:var(--accent);transition:color .3s}
.voice-note[data-playing="true"] .voice-note__line[data-who="ai"] .voice-note__text{transition:color .6s}