/* ============================================================
   Oct 6 2026. The first screen is the owner's lock screen ("After hours"),
   and the second is the red list. Aimar picked both from three ideas.
   Every class is prefixed (ah-, rl-): styles.css already owns .face, .play,
   .mark, .wave and friends, and an unprefixed name here would restyle them.

   After hours, built from the phone's own vernacular:
   1 Full-bleed night wallpaper lit from below in our blue and cyan
   2 The visitor's real local time as the giant clock, heavy and tight
   3 The parrot stands in front of the digits, the way iOS lifts a wallpaper's subject
   4 The headline changes with the visitor's hour
   5 A frosted incoming call and the shimmering "slide to let VocoBook answer"
   6 Sliding plays the real demo call as captions; the booking lands as a banner

   The red list:
   1 White ground, two colours: missed-call red and VocoBook blue
   2 One giant word flips with the list: "Missed." becomes "Booked."
   3 A phone Recents list of seven red missed calls at rest
   4 Each row flips over in turn and comes back blue with what happened
   ============================================================ */

:root{ --nav-h:100px; }
@media (max-width:900px){ :root{ --nav-h:76px; } }

/* ---------- the nav sits on the night while the lock screen is in view ---------- */
.topnav{ transition:background-color .3s ease, box-shadow .3s ease; }
.topnav.on-dark{ background:transparent; }
.topnav.on-dark .wordmark,
.topnav.on-dark .topnav-links a{ color:#fff; }
.topnav.on-dark .topnav-links a:hover{ color:var(--cyan); }
.topnav.on-dark .topnav-cta{ color:#fff; border-color:rgba(255,255,255,.3); }
.topnav.on-dark .topnav-cta:hover{ background:#fff; color:var(--deep); border-color:#fff; }
.topnav.on-dark .mark{ box-shadow:0 8px 24px rgba(1,204,228,.25); }
.topnav-links a{ white-space:nowrap; }
@media (max-width:1120px){ .topnav-links{ display:none; } .topnav-cta{ margin-left:auto; } }

/* ---------- 1. After hours ---------- */
.ah{
  position:relative; isolation:isolate; overflow:hidden; color:#fff; background:var(--deep);
  margin-top:calc(-1 * var(--nav-h)); padding:var(--nav-h) 20px 40px;
  min-height:100vh; min-height:100svh; display:grid; grid-template-rows:1fr auto;
}
.ah-wall{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 46% at 50% 108%, rgba(0,93,230,.95), rgba(0,93,230,0) 70%),
    radial-gradient(38% 30% at 86% 96%, rgba(1,204,228,.5), rgba(1,204,228,0) 72%),
    radial-gradient(40% 36% at 10% 30%, rgba(0,93,230,.26), rgba(0,93,230,0) 70%),
    radial-gradient(30% 24% at 50% 32%, rgba(1,204,228,.12), rgba(1,204,228,0) 70%),
    linear-gradient(180deg,#050b1e 0%,#06102b 55%,#081a45 100%);
}
.ah-face{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px 0 24px; }
.ah-date{ font-family:-apple-system,BlinkMacSystemFont,var(--sans); font-size:clamp(17px,1.5vw,22px); font-weight:600; color:rgba(255,255,255,.86); }
.ah-clockwrap{ position:relative; margin-top:2px; }
.ah-clock{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",var(--sans);
  font-size:clamp(104px,17vw,250px); line-height:.92; font-weight:700; letter-spacing:-.035em;
  color:rgba(255,255,255,.95); font-variant-numeric:tabular-nums; text-shadow:0 10px 60px rgba(0,93,230,.45);
}
.ah-bird{
  position:absolute; width:54%; max-width:none; height:auto; right:-33%; bottom:-46%; pointer-events:none;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.45)); animation:ah-perch 6s ease-in-out infinite;
}
@keyframes ah-perch{ 50%{ transform:translateY(-6px) rotate(-1.5deg); } }
.ah-ctx{
  margin-top:clamp(70px,8vw,120px); max-width:24ch; font-size:clamp(22px,2.2vw,32px); line-height:1.18;
  font-weight:600; letter-spacing:-.02em; text-wrap:balance;
}
.ah-ctx span{ color:rgba(255,255,255,.72); font-weight:500; }

.ah-dock{ position:relative; width:min(440px,100%); margin:0 auto; }
.ah-card{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); border-radius:26px; padding:16px 16px 14px;
  -webkit-backdrop-filter:blur(26px) saturate(1.4); backdrop-filter:blur(26px) saturate(1.4);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
}
.ah-incoming{ animation:ah-buzz 2.6s ease-in-out infinite; }
@keyframes ah-buzz{ 0%,82%,100%{transform:none} 84%{transform:translateX(-2px)} 86%{transform:translateX(2px)} 88%{transform:translateX(-2px)} 90%{transform:translateX(2px)} 92%{transform:none} }
.ah-who{ display:flex; align-items:center; gap:12px; text-align:left; }
.ah-who b{ display:block; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.ah-who small{ font-size:13px; color:rgba(255,255,255,.72); }
.ah-av{ position:relative; flex:0 0 auto; width:44px; height:44px; border-radius:44px; background:rgba(255,255,255,.2); display:grid; place-items:center; }
.ah-av svg{ width:22px; height:22px; stroke:#fff; }
.ah-av::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(255,255,255,.5); animation:ah-ring 1.6s ease-out infinite; }
@keyframes ah-ring{ from{ transform:scale(.9); opacity:1; } to{ transform:scale(1.45); opacity:0; } }
.ah-tag{ margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--cyan); text-transform:uppercase; }

.ah-slider{ position:relative; margin-top:14px; height:62px; border-radius:31px; background:rgba(0,0,0,.28); overflow:hidden; touch-action:none; cursor:pointer; }
.ah-knob{
  position:absolute; left:4px; top:4px; z-index:2; width:54px; height:54px; border-radius:54px; border:0; padding:0; cursor:grab;
  background:linear-gradient(145deg,#14b8f4,#0b6ae8); display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.ah-knob svg{ width:17px; height:21px; fill:#fff; }
.ah-knob:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.ah-slider.is-drag .ah-knob{ cursor:grabbing; }
.ah-shimmer{
  position:absolute; inset:0; display:grid; place-items:center; padding-left:52px; font-size:17px; font-weight:500; pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.42) 40%,#fff 50%,rgba(255,255,255,.42) 60%,rgba(255,255,255,.42) 100%);
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:ah-shine 2.8s linear infinite;
}
@keyframes ah-shine{ from{ background-position:100% 0; } to{ background-position:0 0; } }
.ah-alt{ margin-top:14px; text-align:center; font-size:14px; color:rgba(255,255,255,.62); }
.ah-alt a{ font-family:var(--mono); font-size:13px; color:#fff; letter-spacing:.02em; }
.ah-alt a:hover{ color:var(--cyan); }

.ah-oncall{ display:none; }
.ah-dock.is-answered .ah-incoming{ display:none; }
.ah-dock.is-answered .ah-oncall{ display:block; }
.ah-pav{ flex:0 0 auto; width:44px; height:44px; border-radius:44px; background:#dfeaff; overflow:hidden; transition:box-shadow .08s; }
.ah-pav img{ display:block; width:100%; height:100%; object-fit:cover; }
.ah-end{ margin-left:auto; flex:0 0 auto; width:40px; height:40px; border-radius:40px; border:0; background:#ff3b30; display:grid; place-items:center; cursor:pointer; color:#fff; font:inherit; }
.ah-end svg{ width:20px; height:20px; fill:#fff; transform:rotate(135deg); }
.ah-end.is-again{ width:auto; padding:0 14px; background:#fff; color:var(--deep); font-weight:600; font-size:13px; }
.ah-lines{ margin-top:12px; min-height:84px; text-align:left; }
.ah-prev{ min-height:1.35em; font-size:14px; line-height:1.35; color:rgba(255,255,255,.5); }
.ah-cap{ margin-top:6px; font-size:19px; line-height:1.3; font-weight:600; letter-spacing:-.01em; }
.ah-cap small,.ah-prev small{ display:block; margin-bottom:3px; font-family:var(--mono); font-size:10.5px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); }
.ah-prev small{ color:rgba(255,255,255,.5); }

.ah-banner{
  position:absolute; left:50%; top:calc(var(--nav-h) + 8px); z-index:5; width:min(420px,calc(100% - 32px));
  transform:translate(-50%,-30px); opacity:0; pointer-events:none;
  transition:transform .55s cubic-bezier(.2,1.2,.3,1), opacity .3s;
  display:flex; gap:12px; align-items:flex-start; text-align:left;
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.2); border-radius:22px; padding:13px 14px;
  -webkit-backdrop-filter:blur(30px) saturate(1.6); backdrop-filter:blur(30px) saturate(1.6); box-shadow:0 18px 50px -12px rgba(0,0,0,.55);
}
.ah-banner.is-on{ transform:translate(-50%,0); opacity:1; }
.ah-app{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; background:linear-gradient(145deg,#14b8f4,#0b6ae8); display:grid; place-items:center; }
.ah-app svg{ width:16px; height:20px; fill:#fff; }
.ah-bh{ display:flex; justify-content:space-between; font-size:13px; color:rgba(255,255,255,.72); }
.ah-bh b{ color:#fff; font-weight:600; }
.ah-bt{ margin-top:2px; font-size:15px; font-weight:600; }
.ah-bs{ font-size:14px; line-height:1.35; color:rgba(255,255,255,.72); }

@media (max-width:620px){
  .ah{ padding:var(--nav-h) 16px 28px; }
  .ah-bird{ width:50%; right:-20%; bottom:-42%; }
  .ah-ctx{ margin-top:60px; font-size:22px; }
}

/* ---------- 2. The red list ---------- */
.rl{ --red:#ff3b30; background:var(--paper); padding-block:120px 130px; }
.rl-in{ display:grid; grid-template-columns:minmax(0,1.05fr) auto; gap:clamp(30px,6vw,90px); align-items:center; }
.rl-word{ position:relative; height:1em; font-size:clamp(84px,12vw,184px); line-height:1; font-weight:900; letter-spacing:-.055em; perspective:900px; }
.rl-word span{ position:absolute; left:0; top:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:transform .7s cubic-bezier(.6,0,.2,1); }
.rl-word .rl-a{ color:var(--red); }
.rl-word .rl-b{ color:var(--blue); transform:rotateX(-180deg); }
.rl.is-flipped .rl-word .rl-a{ transform:rotateX(180deg); }
.rl.is-flipped .rl-word .rl-b{ transform:rotateX(0); }
.rl-lead{ margin-top:34px; max-width:30ch; font-size:clamp(22px,2.1vw,30px); line-height:1.22; font-weight:700; letter-spacing:-.025em; color:var(--ink); }
.rl-lead em{ font-style:normal; color:var(--red); transition:color .6s; }
.rl.is-flipped .rl-lead em{ color:var(--blue); }
.rl .lede{ margin-top:18px; max-width:46ch; }
.rl-acts{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.rl-go{
  height:54px; padding:0 26px; border-radius:999px; border:0; cursor:pointer; font:inherit; font-size:16px; font-weight:700;
  display:inline-flex; align-items:center; gap:10px; background:var(--blue); color:#fff; box-shadow:0 14px 30px -14px rgba(0,93,230,.8);
  transition:background .2s, transform .1s;
}
.rl-go:hover{ background:#004fcc; }
.rl-go:active{ transform:scale(.98); }
.rl-go i{ width:8px; height:8px; border-radius:8px; background:var(--cyan); }
.rl-acts .circ-link{ font-size:clamp(1rem,1.2vw,1.15rem); }

.rl-wrap{ position:relative; }
.rl-phone{ position:relative; width:340px; height:700px; border-radius:56px; background:#0b0d12; padding:12px; box-shadow:0 40px 80px -40px rgba(11,21,48,.55), inset 0 0 0 2px #2b2f38; }
.rl-screen{ position:relative; height:100%; border-radius:44px; background:#fff; overflow:hidden; color:#111; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",var(--sans); letter-spacing:0; }
.rl-island{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:108px; height:32px; border-radius:20px; background:#0b0d12; z-index:3; }
.rl-status{ display:flex; justify-content:space-between; padding:17px 30px 0 34px; font-size:15px; font-weight:600; }
.rl-batt{ display:inline-block; width:26px; height:12px; border:1.5px solid #111; border-radius:4px; position:relative; vertical-align:-1px; }
.rl-batt::after{ content:""; position:absolute; inset:1.5px; right:5px; background:#111; border-radius:1.5px; }
.rl-seg{ margin:22px auto 0; width:180px; height:30px; border-radius:9px; background:#eeeef0; display:grid; grid-template-columns:1fr 1fr; padding:2px; font-size:13px; font-weight:600; text-align:center; }
.rl-seg span{ display:grid; place-items:center; border-radius:7px; }
.rl-seg span:first-child{ background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.rl-ttl{ display:flex; align-items:baseline; justify-content:space-between; padding:12px 18px 6px; }
.rl-ttl b{ font-size:32px; font-weight:700; letter-spacing:-.02em; }
.rl-ttl span{ font-size:13px; font-weight:600; color:var(--red); transition:color .5s; }
.rl.is-flipped .rl-ttl span{ color:var(--blue); }
.rl-list{ position:relative; perspective:700px; }
.rl-row{ position:relative; height:62px; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.6,0,.2,1); }
.rl-row.is-on{ transform:rotateX(-180deg); }
.rl-side{ position:absolute; inset:0; display:flex; align-items:center; gap:10px; padding:0 16px 0 18px; background:#fff; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.rl-side::after{ content:""; position:absolute; left:18px; right:0; bottom:0; height:1px; background:#e6e8ee; }
.rl-back{ transform:rotateX(180deg); background:#f5f9ff; }
.rl-t{ flex:1; min-width:0; }
.rl-side b{ display:block; font-size:16.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rl-side small{ font-size:13px; color:#8a8a8e; }
.rl-front b{ color:var(--red); }
.rl-back b{ color:var(--blue); }
.rl-back small{ color:#4b6a9c; }
.rl-side time{ font-size:14.5px; color:#8a8a8e; font-variant-numeric:tabular-nums; }
.rl-info{ flex:0 0 auto; width:22px; height:22px; border-radius:22px; border:1.5px solid var(--blue); color:var(--blue); display:grid; place-items:center; font:italic 700 12px Georgia,serif; }
.rl-ok{ flex:0 0 auto; width:22px; height:22px; border-radius:22px; background:var(--blue); display:grid; place-items:center; }
.rl-ok svg{ width:12px; height:12px; stroke:#fff; }
.rl-back.is-urgent b{ color:#c2410c; }
.rl-back.is-urgent .rl-ok{ background:#f97316; }
.rl-scan{ position:absolute; left:0; right:0; top:0; z-index:2; height:3px; opacity:0; background:linear-gradient(90deg,transparent,var(--cyan),transparent); box-shadow:0 0 18px var(--cyan); }
.rl-home{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:120px; height:5px; border-radius:5px; background:#111; }
.rl-perch{ position:absolute; z-index:4; width:150px; height:auto; right:-142px; top:150px; filter:drop-shadow(0 18px 22px rgba(11,21,48,.28)); transition:transform .5s; }
.rl.is-flipped .rl-perch{ transform:translateY(-8px) rotate(-3deg); }

@media (max-width:1180px){
  .rl-perch{ right:-40px; top:-92px; }
  .rl-wrap{ margin-top:70px; }
}
@media (max-width:900px){
  .rl{ padding-block:84px 96px; }
  .rl-in{ grid-template-columns:minmax(0,1fr); }
  .rl-wrap{ justify-self:center; }
}
@media (max-width:620px){
  .rl-phone{ width:300px; height:620px; border-radius:50px; padding:10px; }
  .rl-screen{ border-radius:40px; }
  .rl-perch{ width:116px; right:-10px; top:-72px; }
  .rl-side b{ font-size:15px; }
}
@media (prefers-reduced-motion:reduce){
  .ah-bird,.ah-incoming,.ah-av::after{ animation:none; }
  .ah-shimmer{ animation:none; background:none; color:#fff; }
}

/* ---------- 3. The call rail, reshaped (Oct 6). Still the black band. ----------
   Left, the five calls as a list you pick from, each with its own progress line.
   Right, a call screen: the words appear as they are said, in the caller's
   language with the English underneath, the real waveform under them, and the
   booking lights up at the second the caller says yes. */
.cr-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,80px); align-items:end; }
.cr-eye{ color:var(--cyan); margin-bottom:20px; }
.cr-head .lede{ margin-top:0; }
.cr-grid{ margin-top:64px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4.5vw,72px); align-items:start; }

.cr-list{ display:grid; gap:6px; }
.cr-lang{
  position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px;
  width:100%; padding:18px 20px 20px; border:0; border-radius:18px; background:transparent; color:rgba(255,255,255,.42);
  font:inherit; text-align:left; cursor:pointer; transition:background .25s, color .25s;
}
.cr-lang:hover{ color:rgba(255,255,255,.8); background:rgba(255,255,255,.03); }
.cr-lang.is-on{ color:#fff; background:rgba(255,255,255,.06); }
.cr-lang:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.cr-lang svg{ width:30px; height:21px; border-radius:4px; opacity:.55; transition:opacity .25s; }
.cr-lang.is-on svg,.cr-lang:hover svg{ opacity:1; }
.cr-name{ font-size:clamp(1.5rem,2.3vw,2.2rem); line-height:1.05; letter-spacing:-.035em; }
.cr-meta{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.cr-lang.is-real .cr-meta{ color:var(--cyan); }
.cr-prog{ position:absolute; left:20px; right:20px; bottom:9px; height:2px; border-radius:2px; background:rgba(255,255,255,.08); overflow:hidden; opacity:0; transition:opacity .25s; }
.cr-lang.is-on .cr-prog{ opacity:1; }
.cr-prog i{ display:block; height:100%; width:0; background:var(--cyan); }
.cr-list .footnote{ margin-top:22px; padding-inline:20px; }

.cr-phone{
  position:relative; display:flex; flex-direction:column; border-radius:30px; padding:22px;
  background:linear-gradient(180deg,#0d1220 0%,#080b14 100%); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 90px -50px rgba(0,93,230,.55);
}
.cr-top{ display:flex; align-items:center; gap:12px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.08); }
.cr-av{ flex:0 0 auto; width:46px; height:46px; border-radius:46px; background:#dfeaff; overflow:hidden; transition:box-shadow .08s; }
.cr-av img{ display:block; width:100%; height:100%; object-fit:cover; }
.cr-who b{ display:block; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.cr-who small{ font-size:13px; color:rgba(255,255,255,.55); }
.cr-status{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.cr-status i{ width:7px; height:7px; border-radius:7px; background:rgba(255,255,255,.3); }
.cr-phone.is-live .cr-status{ color:var(--cyan); }
.cr-phone.is-live .cr-status i{ background:var(--cyan); animation:cr-pulse 1.4s ease-in-out infinite; }
.cr-phone.is-booked .cr-status{ color:#7fb0ff; }
.cr-phone.is-booked .cr-status i{ background:var(--blue); animation:none; }
@keyframes cr-pulse{ 50%{ box-shadow:0 0 0 5px rgba(1,204,228,.18); } }

.cr-tx{
  height:360px; overflow-y:auto; padding:18px 4px 6px; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30px); mask-image:linear-gradient(180deg,transparent 0,#000 30px);
}
.cr-tx::-webkit-scrollbar{ display:none; }
.cr-line{ max-width:84%; padding:11px 14px 12px; border-radius:18px 18px 18px 6px; background:rgba(0,93,230,.16); border:1px solid rgba(0,93,230,.32);
  opacity:.32; transition:opacity .35s, transform .35s; transform:translateY(4px); }
.cr-line.is-caller{ align-self:flex-end; border-radius:18px 18px 6px 18px; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.1); }
.cr-line.is-said{ opacity:1; transform:none; }
.cr-line.is-now{ border-color:rgba(1,204,228,.6); }
.cr-line small{ display:block; margin-bottom:3px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#7fb0ff; }
.cr-line.is-caller small{ color:rgba(255,255,255,.5); }
.cr-line p{ font-size:15.5px; line-height:1.42; color:#fff; letter-spacing:-.01em; }
.cr-line .cr-en{ margin-top:4px; font-size:13px; line-height:1.4; color:rgba(255,255,255,.5); }

.cr-booked{ margin-top:14px; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.1); opacity:.4; transition:opacity .4s, border-color .4s, background .4s; }
.cr-booked b{ display:block; font-size:14.5px; font-weight:600; }
.cr-booked small{ font-size:12.5px; color:rgba(255,255,255,.55); }
.cr-ok{ flex:0 0 auto; width:30px; height:30px; border-radius:30px; background:rgba(255,255,255,.12); display:grid; place-items:center; transition:background .4s; }
.cr-ok svg{ width:15px; height:15px; stroke:#fff; }
.cr-phone.is-booked .cr-booked{ opacity:1; border-color:rgba(0,93,230,.6); background:rgba(0,93,230,.12); }
.cr-phone.is-booked .cr-ok{ background:var(--blue); }

.cr-bar{ margin-top:14px; display:flex; align-items:center; gap:14px; }
.cr-play{ flex:0 0 auto; width:52px; height:52px; border-radius:52px; border:0; background:#fff; color:#000; display:grid; place-items:center; cursor:pointer; transition:transform .15s, background .2s; }
.cr-play:hover{ transform:scale(1.05); background:var(--cyan); }
.cr-play svg{ width:18px; height:18px; }
.cr-play .cr-i-pause{ display:none; }
.cr-phone.is-live .cr-play .cr-i-play{ display:none; }
.cr-phone.is-live .cr-play .cr-i-pause{ display:block; }
.cr-wave{ flex:1; min-width:0; height:44px; display:flex; align-items:center; gap:2px; cursor:pointer; }
.cr-wave i{ flex:1 1 0; min-width:0; border-radius:2px; background:rgba(255,255,255,.18); transition:background .15s; }
.cr-wave i.is-past{ background:var(--cyan); }
.cr-time{ flex:0 0 auto; white-space:nowrap; text-align:right; font-size:12px; color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums; }

@media (max-width:1180px){
  .cr-grid{ grid-template-columns:minmax(0,1fr); }
  .cr-list{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
  .cr-lang{ grid-template-columns:auto minmax(0,1fr); }
  .cr-meta{ grid-column:2; }
  .cr-list .footnote{ grid-column:1/-1; }
}
@media (max-width:900px){
  .cr-head{ grid-template-columns:minmax(0,1fr); gap:20px; }
}
@media (max-width:620px){
  .cr-grid{ margin-top:40px; }
  .cr-list{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px; }
  .cr-lang{ padding:14px 14px 16px; gap:10px; }
  .cr-lang svg{ width:24px; height:17px; }
  .cr-name{ font-size:1.2rem; }
  .cr-meta{ font-size:10px; }
  .cr-prog{ left:14px; right:14px; bottom:7px; }
  .cr-list .footnote{ padding-inline:4px; }
  .cr-phone{ padding:16px; border-radius:24px; }
  .cr-tx{ height:320px; }
  .cr-line{ max-width:92%; }
  .cr-time{ font-size:11px; }
  .cr-wave{ gap:1px; }
  .cr-bar{ gap:10px; }
  .cr-meta{ grid-column:1/-1; letter-spacing:.05em; }
  .cr-who b{ font-size:15px; }
}