/* ivanoff.app — v2: text-first home (after benji.org), dark */
:root {
  --bg: #080808;
  --fg: rgba(255, 255, 255, .9);
  --muted: rgba(255, 255, 255, .42);
  --faint: rgba(255, 255, 255, .22);
  --line: rgba(255, 255, 255, .075);
  --ul: rgba(255, 255, 255, .2);
  --ul-hover: rgba(255, 255, 255, .6);
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 430;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(255, 255, 255, .16); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--muted); outline-offset: 3px; border-radius: 3px; }

html[data-lang="ru"] .en, html[data-lang="en"] .ru { display: none !important; }

.page { max-width: 582px; margin: 0 auto; padding: 80px 16px 48px; }
.muted { color: var(--muted); }

/* header */
.head { display: flex; align-items: center; gap: 12px; }
.ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; filter: grayscale(.2); }
.who { display: flex; flex-direction: column; min-width: 0; }
h1 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 520; }
.lang {
  margin-left: auto; align-self: flex-start;
  appearance: none; background: none; border: 0; padding: 0 0 0 12px; cursor: pointer;
  font: inherit; color: var(--muted); transition: color .2s;
}
.lang:hover { color: var(--fg); }

/* about */
.about { margin-top: 12px; }
.about p { margin: 0; padding-top: 16px; }
.u { position: relative; white-space: nowrap; }
.u::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--ul); transition: background .2s;
}
.u:hover::before { background: var(--ul-hover); }

/* lists */
.list { margin-top: 64px; }
.list h2 { margin: 0; padding-bottom: 8px; font-size: 14px; line-height: 20px; font-weight: 430; }
.list ul { list-style: none; margin: 0; padding: 0; }
.grp { display: grid; grid-template-columns: 108px minmax(0, 1fr); border-top: 1px solid var(--line); }
.yr { padding: 10px 0; color: var(--muted); font-variant-numeric: tabular-nums; transition: opacity .14s; }
.grp > ul > li + li { border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; transition: opacity .14s; }
.nm { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mk { width: 14px; height: 14px; object-fit: contain; flex: none; opacity: .5; transition: opacity .2s; align-self: center; }
.ext { color: var(--faint); margin-left: 4px; font-size: 12px; transition: color .2s; }
.mt { color: var(--muted); text-align: right; flex: none; }
a.row:hover .mk { opacity: 1; }
a.row:hover .ext { color: var(--muted); }
@media (hover: hover) and (min-width: 520px) {
  .list > ul:hover .row, .list > ul:hover .yr { opacity: .3; }
  .list > ul .row:hover { opacity: 1; }
}

/* footer */
.foot {
  margin-top: 64px; padding-top: 32px; position: relative;
  display: flex; align-items: center; gap: 10px; color: var(--muted);
}
.foot::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 1px; background: var(--line); }
#clock { font-variant-numeric: tabular-nums; }
.face { font-family: var(--mono); font-size: 13px; color: var(--muted); position: relative; letter-spacing: -.04em; }
.face.sleep::after {
  content: "z"; position: absolute; left: 100%; top: -6px; margin-left: 2px; font-size: 10px;
  animation: doze 2.4s var(--ease) infinite;
}
@keyframes doze { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -8px); } }

/* hover preview */
.float {
  position: fixed; left: 0; top: 0; z-index: 10; pointer-events: none;
  display: flex; opacity: 0; will-change: transform, opacity;
  transition: opacity .2s var(--ease);
}
.float.on { opacity: 1; }
.float img {
  display: block; object-fit: cover; object-position: top; flex: none;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9);
  transform: scale(.94); transition: transform .35s var(--ease);
}
.float.on img { transform: none; }
.float.wide img { width: 176px; height: 112px; }
.float.wide img + img { margin-left: -128px; }
.float.tall img { width: 78px; height: 160px; }
.float.tall img + img { margin-left: -44px; }
.float img:nth-child(1) { rotate: -4deg; z-index: 1; }
.float img:nth-child(2) { rotate: 2deg; z-index: 2; margin-top: 6px; }
.float img:nth-child(3) { rotate: -1deg; z-index: 3; margin-top: 2px; }

@media (max-width: 519px) {
  .page { padding: 48px 20px 40px; }
  .grp { grid-template-columns: 64px minmax(0, 1fr); }
  .row { flex-direction: column; align-items: flex-start; gap: 0; }
  .mt { text-align: left; padding-left: 22px; }
  .u { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── case pages ─────────────────────────────────────────────────────────── */
:root { --acc: #ff9f2e; --spring: cubic-bezier(.34, 1.36, .64, 1);
}
.back { display: inline-block; margin-bottom: 32px; color: var(--muted); transition: color .2s; }
.back:hover { color: var(--fg); }
.chead .appicon { width: 40px; height: 40px; flex: none; padding: 9px; border-radius: 11px; background: #151515; border: 1px solid rgba(255, 255, 255, .08); }
h2.sec { display: flex; align-items: center; gap: 12px; margin: 56px 0 0; font-size: 14px; line-height: 20px; font-weight: 520; }
h2.sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.case .about { margin-top: 0; }
.fig { margin: 32px 0 0; }
.fig.hero { margin-top: 28px; }
.frame { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #0c0c0c; }
figcaption { max-width: 560px; margin: 12px auto 0; padding: 0 24px; text-align: center; font-size: 12px; line-height: 18px; color: var(--muted); }
.shots3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.shots3 img, .shots3 video { display: block; width: 100%; aspect-ratio: 480 / 1042; object-fit: cover; border-radius: 12px; background: #111; }
.badge { display: inline-block; margin-top: 20px; opacity: .9; transition: opacity .2s; }
.badge:hover { opacity: 1; }
.badge img { display: block; height: 40px; width: auto; }

@media (max-width: 519px) {
  .shots3 { gap: 8px; padding: 10px; }
  .shots3 img, .shots3 video { border-radius: 8px; }
  h2.sec { margin-top: 48px; }
}

/* ── scheme: an ordinary ai chat vs Memory AI ────────────────────────────── */
@media (min-width: 900px) { .fig.wide { margin-left: -115px; margin-right: -115px; } }
.sframe { padding: 36px 24px 20px; }
.duo { display: flex; justify-content: center; gap: 48px; }
.scheme.stack .duo { flex-direction: column; align-items: center; gap: 20px; }
.scheme.stack .pwrap { height: calc(640px * var(--k, .8)); }
/* on a phone screen the ordinary chat shrinks to a slice — its whole story is one question and one paragraph */
.scheme.stack .side:first-child .pwrap {
  height: calc(390px * var(--k, .8));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 84%, transparent 100%);
}
.scheme.stack .side:first-child .phone { top: calc(-196px * var(--k, .8)); }
.side { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.slabel { font-size: 13px; color: var(--muted); }
.slabel.mem { color: var(--fg); }
.pwrap {
  position: relative; overflow: hidden; width: calc(390px * var(--k, .8)); height: calc(700px * var(--k, .8));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 79%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 79%, transparent 100%);
}
.phone {
  position: absolute; left: 0; top: 0; width: 390px; height: 760px; overflow: hidden;
  transform: scale(var(--k, .8)); transform-origin: 0 0;
  border-radius: 60px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", var(--sans);
  letter-spacing: -.01em; -webkit-font-smoothing: antialiased;
}
.phone.mem { background: #1a1814; color: #fff; }          /* Color.appBackground, dark */
.phone.gen { background: #212121; color: #ececec; }
.island { position: absolute; z-index: 6; top: 11px; left: 50%; width: 126px; height: 37px; margin-left: -63px; border-radius: 20px; background: #000; }
.sbar { position: absolute; z-index: 6; top: 20px; left: 50px; font-size: 17px; font-weight: 600; line-height: 1; }

.mhead {                                   /* name pill: 16 bold / 12 at .5, padding 22×8, glass capsule */
  position: absolute; top: 64px; left: 50%; z-index: 2; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 22px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14), inset 0 .5px 0 rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
}
.mhead b { font-size: 16px; font-weight: 700; line-height: 19px; color: #fff; }
.mhead span { font-size: 12px; line-height: 14px; color: rgba(255, 255, 255, .5); }
.phone .feed {
  position: absolute; left: 0; right: 0; top: 0; bottom: 306px; padding: 0 16px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; overflow: hidden;
  /* the chat scrolls under the status bar and the name pill and dissolves, like the app's top fade */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 92px, #000 178px);
          mask-image: linear-gradient(to bottom, transparent 0, transparent 92px, #000 178px);
  transition: opacity .6s var(--ease);
}
.phone .feed > * { flex: none; }
.scheme.out .phone .feed { opacity: 0; }

/* Memory AI — UserBubble, AI prose, ThinkingLabel, EventCardView */
.mu {
  align-self: flex-end; max-width: 304px; padding: 11px 16px; border-radius: 20px;
  background: #fff; color: #1a1814; font-size: 17px; line-height: 22px;
}
.ma { align-self: flex-start; font-size: 17px; line-height: 26px; color: rgba(255, 255, 255, .92); }
.mthink span {
  font-size: 16px; font-weight: 600; line-height: 22px; color: transparent;
  background: linear-gradient(90deg, rgba(255,255,255,.22) 0 30%, rgba(255,255,255,.95) 48%, rgba(247,143,10,.7) 62%, rgba(255,255,255,.22) 78% 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; animation: mthink 1.4s ease-in-out infinite;
}
@keyframes mthink { from { background-position: 100% 0; } to { background-position: -60% 0; } }
.evcard {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .075);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .22), inset 0 0 0 .5px rgba(255, 255, 255, .1), 0 12px 30px -14px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
}
.evimg { width: 46px; height: 46px; flex: none; overflow: hidden; border-radius: 13px; background: rgba(255, 255, 255, .06); }
.evimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.evtxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.evtitle { font-size: 16px; font-weight: 600; line-height: 20px; color: #fff; }
.evwhen { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; line-height: 16px; color: rgba(235, 235, 245, .6); }
.evwhen svg { width: 13px; height: 13px; flex: none; }
.evgrow { flex: 1; }
.evcheck { position: relative; width: 22px; height: 22px; flex: none; color: rgba(48, 209, 88, .8); }
.evcheck svg { display: block; width: 22px; height: 22px; transform: scale(0); transition: transform .5s var(--spring); }
.evcheck::before {   /* circle.dotted — the draft state before the backend confirms */
  content: ""; position: absolute; inset: 1px; border-radius: 50%; border: 2px dotted rgba(255, 255, 255, .3);
  transition: opacity .2s, transform .3s var(--ease);
}
.evchev { width: 12px; height: 12px; flex: none; color: rgba(255, 255, 255, .25); opacity: 0; transition: opacity .3s .15s; }
.evchev svg { display: block; width: 12px; height: 12px; }
.evcard.done .evcheck svg { transform: scale(1); }
.evcard.done .evcheck::before { opacity: 0; transform: scale(.6); }
.evcard.done .evchev { opacity: 1; }

.mcomp {
  position: absolute; left: 16px; right: 16px; bottom: 198px; border-radius: 24px;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.mfield { min-height: 38px; padding: 14px 16px 4px; font-size: 17px; line-height: 20px; }
.mph { color: rgba(235, 235, 245, .3); }
.phone.has .mph { display: none; }
.mrow { display: flex; align-items: center; padding: 4px 12px 12px; }
.mbtn { width: 36px; height: 36px; display: grid; place-items: center; color: rgba(255, 255, 255, .72); }
.mbtn.plus { color: rgba(255, 255, 255, .75); }
.mbtn.mic { color: rgba(255, 255, 255, .7); }
.mbtn svg { width: 21px; height: 21px; }
.mgrow { flex: 1; }
.msend { display: none; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #fff; color: #1a1814; transition: transform .14s var(--ease); }
.msend svg { width: 17px; height: 17px; }
.phone.has .msend { display: grid; }
.phone.has [data-mic] { display: none; }
.msend.press { transform: scale(.88); }

/* the ordinary chat */
.gu { align-self: flex-end; max-width: 300px; padding: 10px 16px; border-radius: 22px; background: #303030; color: #ececec; font-size: 16px; line-height: 24px; }
.ga { align-self: flex-start; font-size: 16px; line-height: 26px; color: #ececec; }
.gdot { width: 12px; height: 12px; border-radius: 50%; background: #ececec; animation: gpulse 1.1s ease-in-out infinite; }
@keyframes gpulse { 50% { transform: scale(.7); opacity: .6; } }
.gcomp {
  position: absolute; left: 14px; right: 14px; bottom: 206px; min-height: 56px; padding: 10px 8px 10px 10px;
  display: flex; align-items: center; gap: 6px; border-radius: 28px; background: #303030; font-size: 16px; line-height: 22px; color: #9b9b9b;
}
.gplus, .gmic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; color: #ececec; }
.gplus svg, .gmic svg { width: 22px; height: 22px; }
.gtxt { flex: 1; }
.gtyped { display: none; flex: 1; color: #ececec; }
.phone.has .gtxt { display: none; }
.phone.has .gtyped { display: block; }
.gvoice { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #000; }
.gvoice svg { width: 20px; height: 20px; }

/* entrance */
.mu, .gu { opacity: 0; transform: translateY(16px) scale(.96); transform-origin: bottom right; transition: opacity .3s var(--ease), transform .55s var(--spring); }
.mthink, .gdot { opacity: 0; transition: opacity .25s; }
.evcard { opacity: 0; transform: translateY(14px) scale(.97); transform-origin: top left; transition: opacity .35s var(--ease), transform .6s var(--spring); }
.mu.in, .gu.in, .evcard.in { opacity: 1; transform: none; }
.mthink.in, .gdot.in { opacity: 1; }

/* TaskCardView — 46pt tile (accent .16) · 16 semibold · repeat 13 medium · body 13 at .45 */
.tkcard {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .075);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .22), inset 0 0 0 .5px rgba(255, 255, 255, .1), 0 12px 30px -14px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
}
.tkicon { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 13px; background: rgba(247, 143, 10, .16); color: rgb(247, 143, 10); }
.tkicon svg { width: 25px; height: 25px; }
.tktxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tktitle { font-size: 16px; font-weight: 600; line-height: 20px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkwhen { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; line-height: 16px; color: rgba(235, 235, 245, .6); }
.tkwhen svg { width: 13px; height: 13px; flex: none; }
.tkbody { font-size: 13px; line-height: 16px; color: rgba(255, 255, 255, .45); }
.evchev.on { opacity: 1; }

/* AutomationRunNotice — centred capsule: bolt 11 · name 13 semibold .85 · "· started" 13 secondary */
.runrow { display: flex; justify-content: center; padding: 4px 0; }
.runpill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 13px; line-height: 16px; white-space: nowrap; }
.runpill svg { width: 11px; height: 11px; color: rgb(247, 143, 10); }
.runpill b { font-weight: 600; color: rgba(255, 255, 255, .85); }
.runpill span { color: rgba(235, 235, 245, .6); }

/* TimestampLabel — footnote, secondary, centred */
.stamp { align-self: stretch; text-align: center; font-size: 13px; line-height: 18px; color: rgba(235, 235, 245, .6); }

/* AgendaCard — corner 18 glass; label 11 semibold +0.6; headline 16 semibold; rows 9×14 */
.agenda {
  border-radius: 18px; overflow: hidden;
  background: rgba(255, 255, 255, .075);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .22), inset 0 0 0 .5px rgba(255, 255, 255, .1), 0 12px 30px -14px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
}
.aghead { display: flex; align-items: flex-start; justify-content: space-between; padding: 14px; }
.aglabel { font-size: 11px; font-weight: 600; letter-spacing: .6px; line-height: 13px; text-transform: uppercase; color: rgba(235, 235, 245, .6); }
.agline { margin-top: 2px; font-size: 16px; font-weight: 600; line-height: 20px; color: #fff; }
.agicon { width: 22px; height: 22px; color: rgba(247, 143, 10, .9); }
.agicon svg { width: 22px; height: 22px; }
.agsep { height: .5px; background: rgba(255, 255, 255, .08); }
.agsep.in { background: rgba(255, 255, 255, .06); margin-left: 70px; }
.agrow { display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px; }
.agtime { width: 46px; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif; font-variant-numeric: tabular-nums; }
.agtime b { font-size: 13px; font-weight: 600; line-height: 16px; color: rgba(255, 255, 255, .85); }
.agtime span { font-size: 11px; line-height: 13px; color: rgba(235, 235, 245, .42); }
.agbar { width: 2.5px; min-height: 30px; align-self: stretch; flex: none; border-radius: 2px; background: rgb(92, 140, 240); }
.agtx { flex: 1; min-width: 0; }
.agtitle { font-size: 15px; font-weight: 600; line-height: 19px; color: #fff; }
.aghint { flex: none; margin-left: 6px; padding: 3px 7px; border-radius: 999px; font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif; font-size: 11.5px; font-weight: 600; line-height: 14px; background: rgba(255, 255, 255, .06); color: rgba(235, 235, 245, .6); }
.agglyph { flex: none; margin-left: 6px; padding-top: 3px; color: rgba(235, 235, 245, .36); }
.agglyph svg { display: block; width: 13px; height: 13px; }
.agrow.hot .agtime b { color: rgb(247, 143, 10); }
.agrow.hot .agbar { background: rgb(247, 143, 10); }
.agrow.hot .aghint { background: rgba(247, 143, 10, .14); color: rgb(247, 143, 10); }
.agpad { height: 6px; }

.tkcard, .agenda, .stamp, .runrow { opacity: 0; transform: translateY(14px) scale(.97); transform-origin: top left; transition: opacity .35s var(--ease), transform .6s var(--spring); }
.stamp, .runrow { transform: translateY(8px); transform-origin: center; }
.tkcard.in, .agenda.in, .stamp.in, .runrow.in { opacity: 1; transform: none; }

/* time-lapse between the two phones */
.sframe { position: relative; }
.lapse {
  position: absolute; left: 50%; top: 18px; z-index: 3; transform: translate(-50%, -6px);
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: #151515; border: 1px solid rgba(255, 255, 255, .1); color: var(--fg); font-size: 12px; white-space: nowrap;
  opacity: 0; transition: opacity .35s var(--ease), transform .45s var(--spring);
}
.lapse.in { opacity: 1; transform: translate(-50%, 0); }
.lapseic { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; position: relative; }
.lapseic::after { content: ""; position: absolute; left: 50%; top: 1px; width: 1.5px; height: 4.5px; margin-left: -.75px; background: currentColor; transform-origin: 50% 100%; animation: hand .9s linear infinite; }
@keyframes hand { to { transform: rotate(360deg); } }
.scheme.ff .phone .feed { filter: blur(1.5px); opacity: .55; transition: filter .3s, opacity .3s; }

/* composer: the "@" button turns accent while the menu is open; MentionChip row above the field */
.mbtn.at.on { color: rgb(247, 143, 10); }
.mbtn.press { transform: scale(.86); transition: transform .14s var(--ease); }
.mchips { display: none; padding: 10px 12px 0; }
.phone.haschip .mchips { display: block; }
.mchip { display: inline-flex; align-items: center; gap: 6px; padding-left: 4px; font-size: 14px; font-weight: 500; line-height: 18px; color: rgb(247, 143, 10); white-space: nowrap; }
.mchip img { width: 17px; height: 17px; border-radius: 4px; }
.mchip i { width: 26px; height: 26px; display: grid; place-items: center; color: rgba(247, 143, 10, .7); }
.mchip i svg { width: 11px; height: 11px; }
.phone.haschip .mfield { padding-top: 6px; }

/* MentionMenu on GlassMenuBG (corner 18, hairline .10) — floats above the composer */
.mmenu {
  position: absolute; left: 16px; right: 16px; bottom: 300px; z-index: 4; overflow: hidden; border-radius: 18px;
  background: rgba(44, 41, 36, .78); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .1), 0 18px 40px -16px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  opacity: 0; transform: translateY(8px) scale(.98); transform-origin: bottom center; transition: opacity .15s ease-out, transform .25s var(--ease);
}
.mmenu.in { opacity: 1; transform: none; }
.mmhead { display: flex; align-items: center; gap: 6px; padding: 6px 8px; min-height: 52px; }
.mmtitle { flex: 1; padding-left: 8px; font-size: 16px; font-weight: 600; color: rgba(235, 235, 245, .6); }
.mmtitle.strong { padding-left: 0; color: #fff; }
.mmx, .mmback { width: 40px; height: 40px; display: grid; place-items: center; color: rgba(255, 255, 255, .7); }
.mmx svg { width: 13px; height: 13px; }
.mmback svg { width: 15px; height: 15px; }
.mmdiv { height: .5px; background: rgba(255, 255, 255, .1); }
.mmrow, .mmverb { display: flex; align-items: center; gap: 11px; padding: 12px 14px; transition: background .15s; }
.mmverb { padding: 11px 14px; }
.mmrow.hl, .mmverb.hl { background: rgba(255, 255, 255, .08); }
.mmrow img { width: 26px; height: 26px; border-radius: 6px; flex: none; }
.mmrow.off img { opacity: .45; }
.mmtx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 16px; line-height: 20px; color: #fff; }
.mmrow.off .mmtx > div { color: rgba(255, 255, 255, .5); }
.mmtx small { font-size: 12px; line-height: 15px; color: rgba(235, 235, 245, .6); }
.mmverb .mmtx small { font-size: 12.5px; }
.mmchev { color: rgba(235, 235, 245, .3); }
.mmchev svg { display: block; width: 12px; height: 12px; }
.mmvi { width: 26px; flex: none; display: grid; place-items: center; color: rgb(247, 143, 10); }
.mmvi svg { width: 17px; height: 17px; }

/* UserBubble with the mention above it: 14pt icon · 12.5 medium secondary, 8pt to the bubble */
.muw { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 304px;
       opacity: 0; transform: translateY(16px) scale(.96); transform-origin: bottom right; transition: opacity .3s var(--ease), transform .55s var(--spring); }
.muw.in { opacity: 1; transform: none; }
.mulabel { display: flex; align-items: center; gap: 5px; padding-right: 2px; font-size: 12.5px; font-weight: 500; line-height: 16px; color: rgba(235, 235, 245, .6); }
.mulabel img { width: 14px; height: 14px; border-radius: 3px; }

/* TweetPreviewCard — primary .05 fill, .09 stroke, corner 16, padding 14 */
.tweet {
  padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  opacity: 0; transform: translateY(14px) scale(.97); transform-origin: top left; transition: opacity .35s var(--ease), transform .6s var(--spring);
}
.tweet.in { opacity: 1; transform: none; }
.twhead { display: flex; align-items: flex-start; gap: 10px; }
.twav { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, rgb(247, 143, 10), rgb(255, 77, 128)); color: #fff; font-size: 13px; font-weight: 700; }
.twwho { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.twwho b { font-size: 15px; font-weight: 600; line-height: 18px; color: #fff; }
.twwho span { font-size: 14px; line-height: 17px; color: rgba(235, 235, 245, .6); }
.twx { font-size: 18px; font-weight: 500; line-height: 20px; color: rgba(255, 255, 255, .8); }
.twtext { padding-top: 8px; font-size: 16px; line-height: 21px; color: #fff; }
.twstatus { display: none; align-items: center; gap: 8px; padding-top: 10px; font-size: 12.5px; font-weight: 500; line-height: 16px; }
.twposted { display: inline-flex; align-items: center; gap: 5px; color: rgb(48, 209, 88); }
.twposted svg { width: 14px; height: 14px; color: rgb(48, 209, 88); }
.twopen { color: rgb(247, 143, 10); }
.twdraft { padding-top: 10px; overflow: hidden; max-height: 190px; transition: max-height .45s var(--ease), opacity .25s; }
.twrow { display: flex; align-items: center; padding-top: 12px; color: rgba(235, 235, 245, .39); font-size: 13px; }
.twrow > span { flex: 1; display: inline-flex; align-items: center; gap: 5px; }
.twrow > span svg { width: 14px; height: 14px; }
.twrow i { font-style: normal; }
.twrow .twbm { flex: none; padding-right: 18px; }
.twrow .twsh { flex: none; }
.twdiv { height: .5px; margin: 12px 0; background: rgba(255, 255, 255, .1); }
.twbtns { display: flex; gap: 8px; }
.twbtn {
  flex: 1; min-width: 0; height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 12px;
  border-radius: 11px; font-size: 14px; font-weight: 600; white-space: nowrap; color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .1);
  transition: transform .15s var(--ease);
}
.twbtn svg { width: 12px; height: 12px; flex: none; }
.twbtn em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* Text.lineLimit(1) truncates the tail */
.twbtn.fill { color: rgb(247, 143, 10); background: rgba(247, 143, 10, .18); box-shadow: inset 0 0 0 1px rgba(247, 143, 10, .35); }
.twbtn.press { transform: scale(.94); }
.twbtns.stack { flex-wrap: wrap; }                       /* ViewThatFits fallback: VStack(8) { main; HStack(8) { two } } */
.twbtns.stack .twbtn.fill { flex-basis: 100%; }
.tweet.posted .twdraft { max-height: 0; opacity: 0; padding-top: 0; }
.tweet.posted .twstatus { display: flex; animation: twin .4s var(--ease); }
@keyframes twin { from { opacity: 0; transform: translateY(4px); } }

/* MeetingQuotesCard on Paper (dark): sheet #25221D, ink #EEE6D6, soft #A29887, rule ink .14 */
.qcard {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px;
  background: rgb(37, 34, 29); box-shadow: inset 0 0 0 1px rgba(238, 230, 214, .14);
  opacity: 0; transform: translateY(14px) scale(.97); transform-origin: top left; transition: opacity .35s var(--ease), transform .6s var(--spring);
}
.qcard.in { opacity: 1; transform: none; }
.qhead { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; color: rgb(162, 152, 135); }
.qhead svg { width: 13px; height: 13px; }
.qtext { font-family: "New York", ui-serif, "Iowan Old Style", Georgia, serif; font-size: 18px; line-height: 24px; letter-spacing: 0; color: rgb(238, 230, 214); }
.qrow { display: flex; align-items: center; gap: 8px; }
.qwho { padding: 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 16px; color: rgb(140, 179, 217); background: rgba(140, 179, 217, .13); }
.qat { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: rgb(162, 152, 135); }
.qlisten { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: rgb(238, 230, 214); color: #1a1814; font-size: 14px; font-weight: 600; }
.qlisten svg { width: 11px; height: 11px; }
.qstatus { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; line-height: 16px; color: rgb(162, 152, 135); }
.qstatus i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* MeetingRecorderView — a full-screen sheet on Paper (ground #1A1814, sheet #25221D, ink #EEE6D6, soft #A29887) */
.rec {
  position: absolute; inset: 0; z-index: 5; background: rgb(26, 24, 20);
  transform: translateY(100%); transition: transform .5s cubic-bezier(.32, .72, 0, 1);
}
.rec.in { transform: none; }
.recnav { position: absolute; left: 16px; top: 56px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
          background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14); color: rgb(238, 230, 214); }
.recnav svg { width: 17px; height: 17px; }
.recbody { position: absolute; left: 22px; right: 22px; top: 112px; }
.recmeta { display: flex; gap: 8px; }
.pchip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 16px;
         color: rgb(162, 152, 135); background: rgb(37, 34, 29); box-shadow: inset 0 0 0 1px rgba(238, 230, 214, .14); white-space: nowrap; }
.pchip svg { width: 11px; height: 11px; }
.rectitle { margin-top: 12px; font-family: "New York", ui-serif, "Iowan Old Style", Georgia, serif; font-size: 32px; line-height: 38px; letter-spacing: 0; color: rgb(238, 230, 214); }
.recrule { height: 1px; margin: 16px 0 6px; background: rgba(238, 230, 214, .14); }
.recnotes { display: flex; align-items: baseline; gap: 8px; padding: 8px 0 0 5px; font-size: 17px; line-height: 23px; color: rgba(162, 152, 135, .85); }
.recnotes svg { width: 15px; height: 15px; flex: none; position: relative; top: 2px; }
.recbottom { position: absolute; left: 12px; right: 12px; bottom: 198px; display: flex; flex-direction: column; gap: 10px; }
.pnotice { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 17px;
           color: rgb(162, 152, 135); background: rgb(37, 34, 29); box-shadow: inset 0 0 0 1px rgba(238, 230, 214, .14); }
.pnotice svg { width: 15px; height: 15px; flex: none; }
.recdock { position: relative; border-radius: 28px; background: rgb(48, 45, 40); box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.recctl { display: flex; align-items: center; gap: 14px; padding: 10px; transition: opacity .25s; }
.recpause { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; transition: transform .14s var(--ease); }
.recpause svg { width: 17px; height: 17px; }
.rec.paused .recpause svg { display: none; }
.rec.paused .recpause::after { content: ""; margin-left: 4px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; }
.recmid { display: flex; flex-direction: column; gap: 3px; }
.recline { display: flex; align-items: center; gap: 10px; }
.bars { display: flex; align-items: center; gap: 3px; height: 26px; }
.bars i { width: 3.5px; height: 5px; border-radius: 2px; background: rgb(247, 143, 10); transition: height .12s ease-out, background .2s; }
.rec.paused .bars i { background: rgba(255, 255, 255, .3); }
.recclock { font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif; font-size: 21px; font-weight: 600; line-height: 26px; font-variant-numeric: tabular-nums; color: #fff; }
.recstate { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 15px; color: rgba(255, 255, 255, .55); }
.recdot { width: 7px; height: 7px; border-radius: 50%; background: rgb(219, 69, 54); animation: recdot .9s ease-in-out infinite alternate; }
.rec.paused .recdot { display: none; }
@keyframes recdot { to { opacity: .35; } }
.recstop { width: 86px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 999px; background: rgb(219, 69, 54); color: #fff; transition: transform .14s var(--ease); }
.recstop svg { width: 17px; height: 17px; }
.recpause.press, .recstop.press { transform: scale(.9); }
.recsaving { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 0 28px; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .85); opacity: 0; transition: opacity .25s; pointer-events: none; }
.rec.saving .recctl { opacity: 0; }
.rec.saving .recsaving { opacity: 1; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: spin .8s linear infinite; }

/* iOS 26 floating tab bar (Liquid Glass): Chat · Today · Tasks · Profile */
.tabbar {
  position: absolute; left: 16px; right: 16px; bottom: 128px; z-index: 7; height: 62px; padding: 4px; display: flex; border-radius: 31px;
  background: rgba(44, 41, 36, .72); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12), inset 0 .5px 0 rgba(255, 255, 255, .18), 0 12px 30px -12px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
}
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 27px; color: rgba(255, 255, 255, .9); transition: background .25s, color .25s, transform .14s var(--ease); }
.tab svg { width: 25px; height: 25px; }
.tab i { font-style: normal; font-size: 10px; font-weight: 500; line-height: 12px; }
.tab.on { background: rgba(255, 255, 255, .1); color: rgb(247, 143, 10); }
.tab.press { transform: scale(.92); }

/* Today tab */
.calv { position: absolute; inset: 0; z-index: 4; background: rgb(26, 24, 20); opacity: 0; transition: opacity .3s var(--ease); }
.calv.in { opacity: 1; }
.calhead { position: absolute; left: 20px; right: 20px; top: 62px; display: flex; align-items: center; gap: 8px; }
.calmonth { flex: none; white-space: nowrap; font-family: "New York", ui-serif, Georgia, serif; font-size: 30px; font-weight: 700; line-height: 36px; color: #fff; }
.caltoday { display: none; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 16px; color: rgb(247, 143, 10); background: rgba(247, 143, 10, .12); }
.calv.offday .caltoday { display: inline-block; animation: pop .3s var(--spring); }
@keyframes pop { from { opacity: 0; transform: scale(.8); } }
.calmode { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 14px; font-weight: 600; line-height: 17px; }
.calmode svg:first-child { width: 13px; height: 13px; }
.calmode svg:last-child { width: 9px; height: 9px; opacity: .45; }
.calweek { position: absolute; left: 16px; right: 16px; top: 116px; display: flex; gap: 6px; }
.dpill { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: transform .14s var(--ease); }
.dpill i { font-style: normal; font-size: 10px; font-weight: 500; line-height: 12px; color: rgba(255, 255, 255, .35); }
.dpill b { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-family: "New York", ui-serif, Georgia, serif; font-size: 19px; font-weight: 400; color: rgba(255, 255, 255, .8); transition: background .25s, color .25s; }
.dpill.today b { font-weight: 700; color: rgb(247, 143, 10); }
.dpill u { width: 4px; height: 4px; border-radius: 50%; }
.dpill.dot u { background: rgba(255, 255, 255, .3); }
.dpill.sel i { color: #fff; }
.dpill.sel b { font-weight: 700; background: #fff; color: rgb(26, 24, 20); }
.dpill.sel.today b { background: rgb(247, 143, 10); color: rgb(26, 24, 20); }
.dpill.sel u { background: transparent; }
.dpill.press { transform: scale(.9); }
.callist { position: absolute; left: 16px; right: 16px; top: 192px; display: flex; flex-direction: column; gap: 10px; }
.dcard {
  display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease), transform .5s var(--spring);
}
.dcard.in { opacity: 1; transform: none; }
.dface { width: 64px; height: 64px; flex: none; overflow: hidden; border-radius: 15px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.dface img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dtx { flex: 1; min-width: 0; }
.dtime { font-size: 14px; font-weight: 500; line-height: 17px; color: rgba(255, 255, 255, .38); }
.dtitle { margin-top: 4px; font-size: 16px; font-weight: 600; line-height: 20px; color: #fff; }
.dchips { display: flex; gap: 5px; height: 26px; margin-top: 4px; overflow: hidden; }
.dchips span { flex: none; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .09); font-size: 13px; font-weight: 600; line-height: 18px; color: rgba(255, 255, 255, .7); white-space: nowrap; }
.dchev { color: rgba(255, 255, 255, .15); }
.dchev svg { display: block; width: 11px; height: 11px; }
.calfab { position: absolute; right: 20px; bottom: 204px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: rgb(247, 143, 10); color: rgb(26, 24, 20); box-shadow: 0 4px 12px rgba(255, 255, 255, .15); }
.calfab svg { width: 22px; height: 22px; }

/* gallery — real screens in the same fading silhouettes */
.gframe { padding: 32px 28px 26px; }
.ggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; }
.gitem { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gphone {
  position: relative; width: 100%; aspect-ratio: 402 / 780; overflow: hidden; border-radius: 13.5% / 6.9%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 80%, transparent 100%);
  transition: transform .45s var(--ease);
}
.gphone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gphone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .15); pointer-events: none; }
.gitem:hover .gphone { transform: translateY(-4px); }
.gcap { max-width: 220px; text-align: center; font-size: 12.5px; line-height: 17px; color: var(--muted); }
@media (max-width: 719px) {
  .gframe { padding: 24px 0 20px; }
  .ggrid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 66%; gap: 18px; overflow-x: auto; padding: 0 17%; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ggrid::-webkit-scrollbar { display: none; }
  .gitem { scroll-snap-align: center; }
}

/* ReminderCard — VStack 12 · 46pt watercolour r12 · title 16 semibold · when 13 secondary ·
   bell.fill 12 accent + kind 13.5 medium .75 · "Open event" 15 semibold, 42 tall, r13 at .08 · calm glass r18 */
.rmcard {
  display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 18px;
  background: rgba(255, 255, 255, .075);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .22), inset 0 0 0 .5px rgba(255, 255, 255, .1), 0 12px 30px -14px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
}
.rmtop { display: flex; align-items: center; gap: 12px; }
.rmimg { width: 46px; height: 46px; flex: none; overflow: hidden; border-radius: 12px; }
.rmimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rmwhen { font-size: 13px; line-height: 16px; color: rgba(235, 235, 245, .6); white-space: nowrap; }
.rmkind { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; line-height: 17px; color: rgba(255, 255, 255, .75); }
.rmkind svg { width: 12px; height: 12px; flex: none; color: rgb(247, 143, 10); }
.rmbtn { height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(255, 255, 255, .08); font-size: 15px; font-weight: 600; color: #fff; }

/* ── design system: card anatomy, inspected ─────────────────────────────── */
.dsframe { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 40px; align-items: center; padding: 32px 36px 32px 28px; }
.dscol { min-width: 0; }
.dsw { position: relative; width: calc(390px * var(--k, 1)); height: calc(var(--bh, 520px) * var(--k, 1)); margin: 0 auto; }
.dsboard {
  position: absolute; left: 0; top: 0; width: 390px; padding: 26px 16px 24px;
  transform: scale(var(--k, 1)); transform-origin: 0 0;
  border-radius: 28px; background: #1a1814; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", var(--sans);
  letter-spacing: -.01em; color: #fff; -webkit-font-smoothing: antialiased;
}
.dsitem + .dsitem { margin-top: 22px; }
.dsname { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 12px; margin: 0 2px 8px; font-family: var(--mono); font-size: 11px; line-height: 14px; letter-spacing: 0; color: rgba(255, 255, 255, .36); }
.dsname > span { padding: 0 4px; margin: 0 -4px; background: #1a1814; }   /* the labels knock the guides out */
.dsval { color: rgb(247, 143, 10); opacity: 0; transition: opacity .25s var(--ease); }
.dsval.in { opacity: 1; }
.dsov { position: absolute; inset: 0; pointer-events: none; }
.ov { position: absolute; opacity: 0; transition: opacity .3s var(--ease); }
.ov.in { opacity: 1; }
.ov.box { box-shadow: inset 0 0 0 1px rgb(247, 143, 10); background: rgba(247, 143, 10, .08); }
.ov.pad { box-shadow: inset 0 0 0 14px rgba(247, 143, 10, .24), inset 0 0 0 1px rgba(247, 143, 10, .7); }
.ov.fill { background: rgba(247, 143, 10, .42); }
.ov.guide { border-left: 1px dashed rgba(247, 143, 10, .6); }
.dshead { margin-bottom: 10px; font-family: var(--mono); font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.dsspec { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dsspec li {
  position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0 9px 16px; border-bottom: 1px solid var(--line); cursor: pointer; color: var(--muted); transition: color .2s;
}
.dsspec li::before {
  content: ""; position: absolute; left: 1px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: rgb(247, 143, 10); transform: scale(0); transition: transform .35s var(--spring);
}
.dsspec li.on { color: var(--fg); }
.dsspec li.on::before { transform: none; }
.dsv { font-family: var(--mono); font-size: 12px; letter-spacing: -.02em; white-space: nowrap; }
.dstok { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; font-size: 12px; line-height: 16px; color: var(--muted); }
.dstok > span { display: flex; align-items: center; gap: 9px; }
.dstok i { width: 12px; height: 12px; flex: none; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.dstok b { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: -.02em; color: var(--fg); }
@media (max-width: 719px) {
  .dsframe { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 20px 16px 22px; }
}

/* the watercolour set */
.wcframe { padding: 30px 28px 28px; }
.wcgrid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 22px 12px; }
.wct { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.wci { width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 28%; background: #1a1814; box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .9); transition: transform .35s var(--ease); }
.wci img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wct:hover .wci { transform: translateY(-3px); }
.wct > span { font-family: var(--mono); font-size: 10px; line-height: 14px; letter-spacing: -.02em; color: rgba(255, 255, 255, .32); white-space: nowrap; transition: color .2s; }
.wct:hover > span { color: var(--fg); }
.wcn b { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 28%; box-shadow: inset 0 0 0 1px var(--line); font-size: 26px; font-weight: 500; letter-spacing: -.03em; color: var(--fg); }
@media (max-width: 719px) {
  .wcframe { padding: 22px 16px 20px; }
  .wcgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 12px; }
}

/* ── the agent: the chat in front, the server's conversation with Claude behind it ──
   The backstage is built as the phone's twin: same height and ground, a name pill where
   the phone has "Luna", the conversation on the same baseline, a status bar where the
   composer is. Sizes that mirror the phone are in iOS points × --k. */
.aframe { padding: 46px 22px 20px; }
.astage { display: flex; justify-content: center; align-items: flex-start; gap: 32px; }
.astage .side { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.agent .slabel { color: var(--muted); }
.bsside { width: 384px; }
.bswrap {
  position: relative; width: 100%; height: calc(700px * var(--k, .76));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 79%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 79%, transparent 100%);
}
.bspanel {
  position: absolute; left: 0; right: 0; top: 0; height: calc(760px * var(--k, .76)); overflow: hidden;
  border-radius: calc(44px * var(--k, .76)); background: #1a1814;              /* Color.appBackground, as the phone */
  box-shadow: inset 0 0 0 calc(2px * var(--k, .76)) rgba(255, 255, 255, .13);
}
.bshead {                                   /* the twin of the name pill: 16 bold / 12 at .5, 22×8, glass */
  position: absolute; z-index: 2; left: 50%; top: calc(64px * var(--k, .76)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(1px * var(--k, .76));
  padding: calc(8px * var(--k, .76)) calc(22px * var(--k, .76)); border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14), inset 0 .5px 0 rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", var(--sans); letter-spacing: -.01em;
}
.bshead b { font-size: calc(16px * var(--k, .76)); font-weight: 700; line-height: 1.2; color: #fff; }
.bshead span { font-size: calc(12px * var(--k, .76)); line-height: 1.2; color: rgba(255, 255, 255, .5); }
.bsfeed {
  position: absolute; left: 0; right: 0; top: 0; height: calc(454px * var(--k, .76)); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(92px * var(--k, .76)), #000 calc(178px * var(--k, .76)));
          mask-image: linear-gradient(to bottom, transparent 0, transparent calc(92px * var(--k, .76)), #000 calc(178px * var(--k, .76)));
}
.bs { position: absolute; left: 14px; right: 14px; bottom: 6px; display: flex; flex-direction: column; gap: 10px; transition: opacity .6s var(--ease); }
.bsbar {                                    /* the twin of the composer: 16 from the edges, radius 24, fill .08 + ring .12 */
  position: absolute; left: calc(16px * var(--k, .76)); right: calc(16px * var(--k, .76));
  top: calc(472px * var(--k, .76)); height: calc(90px * var(--k, .76));
  display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 0 14px; border-radius: calc(24px * var(--k, .76));
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .08);
  font-size: 12.5px; line-height: 16px; color: rgba(238, 230, 214, .88);
}
.bsline { display: flex; align-items: center; gap: 10px; padding-left: 2px; }
.bssteps { display: flex; align-items: center; gap: 5px; }
.bssteps em {
  padding: 2px 8px 3px; border-radius: 999px; font-style: normal; font-size: 10.5px; line-height: 14px;
  color: rgba(238, 230, 214, .42); background: rgba(238, 230, 214, .06); transition: color .3s, background .3s;
}
.bssteps em.on { color: rgb(247, 143, 10); background: rgba(247, 143, 10, .16); }            /* the accent tile of TaskCardView */
.bssteps b { font-weight: 400; font-size: 11px; color: rgba(238, 230, 214, .25); }
.bsbar i { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: rgba(238, 230, 214, .3); transition: background .3s; }
.bsbar.work i { background: rgb(247, 143, 10); }
.bsbar.work i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(247, 143, 10, .6); animation: bsping 1.2s ease-out infinite; }
.bsbar.done i { background: rgb(48, 209, 88); }
@keyframes bsping { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.bsline span { transition: opacity .2s var(--ease), transform .3s var(--ease); }
.bsline span.swap { opacity: 0; transform: translateY(4px); }
.bsrow {
  flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  opacity: 0; transform: translateY(12px) scale(.97); transform-origin: 0 100%;
  transition: opacity .3s var(--ease), transform .55s var(--spring);
}
.bsrow.me { align-items: flex-end; transform-origin: 100% 100%; }
.bsrow.in { opacity: 1; transform: none; }
.bswho { padding: 0 6px; font-size: 10.5px; line-height: 13px; color: rgba(238, 230, 214, .38); }
.bsslip {
  max-width: 92%; padding: 10px 12px 11px; border-radius: 16px;
  background: rgb(37, 34, 29); color: rgb(238, 230, 214);                      /* Paper.sheet / Paper.ink */
  box-shadow: inset 0 0 0 1px rgba(238, 230, 214, .08);
  transition: background .3s var(--ease), padding .3s var(--ease);
}
.bsrow.me .bsslip { max-width: 100%; background: rgb(48, 45, 40); }             /* Paper.dock */
.bsrow.me.typing .bsslip { padding: 11px 13px; }
.bsdots { display: flex; gap: 4px; }
.bsdots i { width: 6px; height: 6px; border-radius: 50%; background: rgb(162, 152, 135); animation: bsdot 1.1s ease-in-out infinite; }
.bsdots i:nth-child(2) { animation-delay: .15s; }
.bsdots i:nth-child(3) { animation-delay: .3s; }
@keyframes bsdot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.bsjson { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 16px; letter-spacing: -.01em; white-space: pre-wrap; word-break: break-word; color: rgb(238, 230, 214); }
.bsjson span { opacity: 0; transition: opacity .16s linear; }
.bsjson span.on { opacity: 1; }
.bsjson .k { color: rgb(162, 152, 135); }
.bsjson .p { color: rgba(238, 230, 214, .38); }
.bsjson .n { color: rgb(247, 143, 10); }
.bsnote { margin: 0; font-size: 12.5px; line-height: 17px; }
.bsnote + .bsjson { margin-top: 7px; }
.bsctx h5, .bsfound b { display: block; margin: 0; font-family: "New York", ui-serif, "Iowan Old Style", Georgia, serif; font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: 0; }
.bsctx h5 { margin-bottom: 7px; }
.bsctx .r {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 5px 0;
  border-top: 1px solid rgba(238, 230, 214, .12); font-size: 11.5px; line-height: 15px;
  opacity: 0; transform: translateY(4px); transition: opacity .25s var(--ease), transform .35s var(--ease);
}
.bsctx .r.in { opacity: 1; transform: none; }
.bsctx .r b { font-weight: 500; color: rgb(162, 152, 135); }
.bsfound code { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 10.5px; line-height: 14px; color: rgb(162, 152, 135); }
.bsfound span { display: block; margin-top: 3px; font-size: 12px; line-height: 16px; }
.afly {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", var(--sans);
  letter-spacing: -.01em; color: #fff; -webkit-font-smoothing: antialiased;
}
.afly > * { position: absolute; transform-origin: 0 0; will-change: transform, opacity; }
.agent.ff .phone .feed, .agent.ff .bs { filter: blur(1.5px); opacity: .55; transition: filter .3s, opacity .3s; }
.agent.out .phone .feed, .agent.out .bs { opacity: 0; }
/* on a phone screen: a slice of the chat, the backstage under it */
.agent.stack .astage { flex-direction: column; align-items: center; gap: 26px; }
.agent.stack .bsside { width: 100%; }
.agent.stack .bswrap { height: 372px; -webkit-mask-image: none; mask-image: none; }
.agent.stack .bsjson { font-size: 10px; line-height: 15px; }
.agent.stack .bs { left: 10px; right: 10px; }
.agent.stack .bspanel { height: 100%; border-radius: 30px; }
.agent.stack .bshead { top: 12px; }
.agent.stack .bsfeed { top: 0; bottom: 84px; height: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 44px, #000 96px); mask-image: linear-gradient(to bottom, transparent 0, transparent 44px, #000 96px); }
.agent.stack .bsbar { top: auto; bottom: 12px; height: 62px; left: 12px; right: 12px; border-radius: 20px; gap: 7px; }
.agent.stack .pwrap {
  height: calc(384px * var(--k, .8));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 88%, transparent 100%);
}
.agent.stack .phone { top: calc(-150px * var(--k, .8)); }
@media (max-width: 599px) { .aframe { padding: 46px 12px 16px; } }

/* ── HFLabs: the table component, dark and minimal ─────────────────────────
   Behaviour and metrics are the prototype's (13px text, per-column filter,
   chips in the toolbar, the floating bulk bar); the palette is the site's,
   with the product's teal as the one accent. */
.hf {
  --acc2: #47c2d1; --accbg: rgba(71, 194, 209, .13); --accbd: rgba(71, 194, 209, .38);
  --line1: rgba(255, 255, 255, .12); --line2: rgba(255, 255, 255, .06);
  --ink: rgba(255, 255, 255, .92); --ink2: rgba(255, 255, 255, .55); --ink3: rgba(255, 255, 255, .3);
}
.hfframe { padding: 30px 26px 22px; }
.hfstage { position: relative; }
.hf-app { position: relative; font-size: 13px; line-height: 1.5; color: var(--ink); }
.hf-h1 { font-size: 13.5px; font-weight: 520; line-height: 18px; color: var(--ink); }
.hf-bar { display: flex; align-items: center; gap: 6px; margin: 14px 0 10px; }
.hf-btn { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px; color: var(--ink3); transition: background .2s, color .2s, transform .12s; }
.hf-btn svg { width: 15px; height: 15px; }
.hf-btn.on { background: var(--accbg); color: var(--acc2); }
.hf-btn.press, .hf-chip i.press, .hf-box.press, .hf-fun.press { transform: scale(.88); }
.hf-grow { flex: 1; }
.hf-count { font-family: var(--mono); font-size: 11px; letter-spacing: -.02em; color: var(--ink3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hf-chips { display: flex; align-items: center; gap: 6px; }
.hf-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--accbg); box-shadow: inset 0 0 0 1px var(--accbd); color: var(--acc2); font-size: 12px; animation: hfchip .3s var(--ease); }
.hf-chip i { display: grid; place-items: center; width: 11px; height: 11px; opacity: .8; transition: transform .12s; }
.hf-chip svg { width: 11px; height: 11px; }
.hf-chip b { font-weight: 500; }
.hf-chip em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes hfchip { from { opacity: 0; transform: translateX(-8px); } }

.hf-table { position: relative; }
.hf-head, .hf-row { display: grid; grid-template-columns: var(--tpl, 30px minmax(0, 1.6fr) 96px minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1fr)); align-items: center; transition: grid-template-columns .001s; }
.hf-head { height: 27px; border-bottom: 1px solid var(--line1); }
.hf-head .hf-cell { height: 27px; display: flex; align-items: center; gap: 5px; padding: 0 10px; font-size: 12.5px; color: var(--ink2); transition: color .25s; }
.hf-head .hf-cell b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-head .hf-cell .hf-arrow { width: 0; opacity: 0; overflow: hidden; display: grid; place-items: center; transition: opacity .25s, width .25s; }
.hf-head .hf-cell .hf-arrow svg { width: 12px; height: 12px; }
.hf-head .hf-cell.on { color: var(--acc2); }
.hf-head .hf-cell.on .hf-arrow { width: 12px; opacity: 1; }
.hf-head .hf-fun { margin-left: auto; display: grid; place-items: center; color: rgba(255, 255, 255, .16); transition: color .2s, transform .12s; }
.hf-head .hf-fun svg { width: 12px; height: 12px; }
.hf-head .hf-cell.filtered .hf-fun { color: var(--acc2); }

.hf-body { position: relative; min-height: 312px; }   /* twelve rows: filtering must not make the frame jump */
.hf-row { height: 26px; border-bottom: 1px solid var(--line2); transition: background .2s; }
.hf-row:last-child { border-bottom: 0; }
.hf-row.sel { background: var(--accbg); }
.hf-cell { min-width: 0; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-row .c0 { color: var(--ink); }
.hf-row .c1 { font-variant-numeric: tabular-nums; }
.hf-row .c1, .hf-row .c2, .hf-row .c3, .hf-row .c4 { color: var(--ink2); }
.hf-pick { position: relative; display: flex; align-items: center; padding: 0 0 0 8px; color: var(--ink3); }
.hf-pick em { font-style: normal; font-family: var(--mono); font-size: 10.5px; transition: opacity .2s; }
.hf-box { width: 14px; height: 14px; flex: none; display: grid; place-items: center; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #0b0b0b; transition: background .2s, box-shadow .2s, transform .12s; }
.hf-box svg { width: 11px; height: 11px; }
.hf-box.on { background: var(--acc2); box-shadow: inset 0 0 0 1px var(--acc2); }
.hf-row .hf-box, .hf-row .hf-grip { position: absolute; left: 8px; opacity: 0; transition: opacity .2s; }
.hf-row .hf-grip { left: 6px; display: grid; place-items: center; width: 16px; height: 16px; color: rgba(255, 255, 255, .35); }
.hf-row .hf-grip svg { width: 14px; height: 14px; }
.hf-row.sel .hf-box, .hf-row.hover .hf-grip, .hf-row.drag .hf-grip { opacity: 1; }
.hf-row.sel .hf-pick em, .hf-row.hover .hf-pick em, .hf-row.drag .hf-pick em { opacity: 0; }
.hf-row.hover { background: rgba(255, 255, 255, .03); }
.hf-row.drag {
  position: relative; z-index: 3; border-radius: 8px; border-bottom-color: transparent; background: #181818;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 34px -14px rgba(0, 0, 0, .95);
  transition: background .2s, box-shadow .2s;
}
/* where the row will land */
.hf-line { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--acc2); opacity: 0; transition: opacity .2s var(--ease), top .25s var(--ease); }
.hf-line::before { content: ""; position: absolute; left: -1px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--acc2); }
.hf-line.in { opacity: 1; }

/* the date filter: periods on the left, the calendar next to them */
.hf-menu.wide { width: auto; }
.hf-dates { display: flex; }
.hf-presets { display: flex; flex-direction: column; min-width: 168px; padding: 2px 6px 4px; border-right: 1px solid var(--line2); }
.hf-presets span { display: flex; align-items: center; height: 26px; padding: 0 8px; border-radius: 7px; font-size: 12.5px; color: var(--ink2); transition: background .2s, color .2s; }
.hf-presets span.hl { background: var(--accbg); color: var(--acc2); }
.hf-presets .hf-sub { justify-content: space-between; }
.hf-presets .hf-sub svg { width: 12px; height: 12px; transform: rotate(-90deg); opacity: .5; }
.hf-presets .hf-sep { height: 1px; margin: 5px 8px; padding: 0; background: var(--line2); }
.hf-presets .hf-reset { margin-top: 5px; color: var(--acc2); }
.hf-cal { padding: 6px 10px 10px; }
.hf-calhd { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 26px; font-size: 12.5px; color: var(--ink); }
.hf-calhd i { display: grid; place-items: center; width: 18px; height: 18px; color: var(--ink3); }
.hf-calhd i svg { width: 12px; height: 12px; }
.hf-calhd i:first-child svg { transform: rotate(90deg); }
.hf-calhd i:last-child svg { transform: rotate(-90deg); }
.hf-caldays, .hf-calgrid { display: grid; grid-template-columns: repeat(7, 26px); gap: 2px; }
.hf-caldays i { display: grid; place-items: center; height: 20px; font-style: normal; font-size: 10.5px; color: var(--ink3); }
.hf-calgrid i { display: grid; place-items: center; height: 24px; border-radius: 7px; font-style: normal; font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; transition: background .2s, color .2s; }
.hf-calgrid i.inr { background: var(--accbg); color: var(--acc2); border-radius: 0; }
.hf-calgrid i.edge { background: var(--acc2); color: #0b0b0b; }
.hf-calgrid i.off { visibility: hidden; }

/* the column set: what is shown and in what order */
.hf-cols {
  position: absolute; left: 0; top: 46px; z-index: 5; width: 210px; padding: 6px; border-radius: 12px;
  background: #151515; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 48px -20px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: 0 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .28s var(--ease);
}
.hf-cols.in { opacity: 1; transform: none; }
.hf-colshd { padding: 4px 8px 8px; font-size: 11px; color: var(--ink3); }
.hf-colrow { position: relative; display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: 8px; font-size: 12.5px; color: var(--ink); background: transparent; transition: color .25s, background .2s, box-shadow .2s; }
.hf-colrow .hf-grip { display: grid; place-items: center; width: 14px; height: 14px; color: rgba(255, 255, 255, .28); }
.hf-colrow .hf-grip svg { width: 14px; height: 14px; }
.hf-colrow.off { color: var(--ink3); }
.hf-colrow.lift { background: #1e1e1e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 30px -12px rgba(0, 0, 0, .95); z-index: 2; }

.hf-menu {
  position: absolute; top: 27px; z-index: 3; width: 190px; padding: 6px 0; border-radius: 12px;
  background: #151515; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 48px -20px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: 50% 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .28s var(--ease);
}
.hf-menu.in { opacity: 1; transform: none; }
.hf-search { display: flex; align-items: center; gap: 7px; height: 28px; margin: 2px 8px 6px; padding: 0 9px; border-radius: 7px; background: rgba(255, 255, 255, .05); color: var(--ink3); font-size: 12px; }
.hf-search svg { width: 12px; height: 12px; }
.hf-opt { display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 12px; font-size: 12.5px; color: var(--ink2); }
.hf-opt .hf-box { flex: none; }
.hf-all { margin-bottom: 4px; padding-bottom: 4px; height: 32px; border-bottom: 1px solid var(--line2); color: var(--ink); }
.hf-opts {
  max-height: 140px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

.hf-bulk { position: absolute; left: 50%; bottom: 10px; z-index: 4; transform: translate(-50%, 14px); opacity: 0; transition: opacity .3s var(--ease), transform .5s var(--spring); }
.hf-bulk.in { opacity: 1; transform: translate(-50%, 0); }
.hf-bulkin {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 999px; white-space: nowrap; font-size: 12.5px; color: var(--ink);
  background: rgba(30, 30, 30, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 40px -18px rgba(0, 0, 0, .95);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
}
.hf-del, .hf-act { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 999px; }
.hf-del { color: #ff7a86; background: rgba(255, 122, 134, .12); }
.hf-act { color: var(--acc2); background: var(--accbg); }
.hf-del svg, .hf-act svg { width: 12px; height: 12px; }
.hf-bulkin > i { display: grid; place-items: center; width: 22px; height: 22px; color: var(--ink3); }
.hf-bulkin > i svg { width: 12px; height: 12px; }

/* what the component is doing right now, and the four steps it goes through */
.hf-steps { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line2); }
.hf-status { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 12.5px; color: var(--ink2); }
.hf-status i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--acc2); }
.hf-status span { transition: opacity .2s var(--ease), transform .3s var(--ease); }
.hf-status span.swap { opacity: 0; transform: translateY(4px); }
.hf-flow { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.hf-flow em { padding: 3px 9px 4px; border-radius: 999px; font-style: normal; font-size: 10.5px; line-height: 14px; color: var(--ink3); background: rgba(255, 255, 255, .05); transition: color .3s, background .3s; }
.hf-flow em.on { color: var(--acc2); background: var(--accbg); }
.hf-flow b { font-weight: 400; font-size: 11px; color: rgba(255, 255, 255, .18); }

@media (max-width: 719px) {
  .hfframe { padding: 20px 14px 16px; }
  .hf-head, .hf-row { grid-template-columns: 28px minmax(0, 1.5fr) 88px minmax(0, 1.1fr); }
  .hf-head .c3, .hf-head .c4, .hf-row .c3, .hf-row .c4 { display: none; }
  .hf-steps { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hf-flow { margin-left: 0; flex-wrap: wrap; }
}

/* HFLabs: screens from the products, in the same fading frames */
.shots { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.shots img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .08); }
@media (max-width: 719px) { .shots { padding: 12px; gap: 10px; } }

/* HFLabs: the row taken apart — the table magnified next to its metrics */
.cellframe { padding: 30px 26px 26px; }
.cellwrap { display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 34px; align-items: center; }
.cellcol { min-width: 0; }
.cellboard { position: relative; transform: scale(1.45); transform-origin: 0 50%; width: calc(100% / 1.45); }
.cellboard .hf-body { min-height: 0; }
.cellboard .hf-row.sel .hf-pick em { opacity: 0; }
.hf .dsspec li { cursor: pointer; }
.hf .ov.box { box-shadow: inset 0 0 0 1px var(--acc2); background: rgba(71, 194, 209, .1); }
.hf .ov.fill { background: rgba(71, 194, 209, .34); }
.hf .ov.guide { border-left: 1px dashed rgba(71, 194, 209, .7); }
.hf .dstok i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.hf .dsspec li::before { background: var(--acc2); }
@media (max-width: 719px) {
  .cellframe { padding: 18px 14px 16px; }
  .cellwrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cellboard { transform: none; width: 100%; }
}

@media (max-width: 719px) {
  /* the date menu has to live inside a 343px frame */
  .hf-menu.wide { left: 0 !important; }
  .hf-presets { min-width: 130px; padding: 2px 4px 4px; }
  .hf-presets span { height: 24px; padding: 0 6px; font-size: 11.5px; }
  .hf-cal { padding: 4px 6px 8px; }
  .hf-caldays, .hf-calgrid { grid-template-columns: repeat(7, 22px); }
  .hf-calgrid i { height: 22px; font-size: 11px; }
  #dates .hf-body { min-height: 372px; }
}