:root { --k: 1; }
html, body { min-height: 100%; }
body { overflow-x: hidden; }
.card { box-shadow: var(--shadow-card-tool); }   
.label { font-size: var(--t-14); line-height: var(--lh-ui); color: var(--text-2); }
.link { color: var(--text-2); text-decoration: none; }
.link:hover, .link[aria-current] { color: var(--text); }
.quiet, .quiet-row { color: var(--text-2); }
.num { font-variant-numeric: tabular-nums; }
.sep { margin: 0 var(--s-4); }
.ico { width: var(--s-16); height: var(--s-16); flex: none; fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
[data-focus]:focus { outline: none; }
.demo-head { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: var(--hairline) solid var(--line); }
.head-actions .for { display: none; align-items: center; gap: var(--s-24); }
html[data-screen="worklist"] .for[data-for~="worklist"], html[data-screen="summary"] .for[data-for~="summary"],
html[data-screen="cohort"] .for[data-for~="cohort"], html[data-screen="finding"] .for[data-for~="finding"],
html[data-screen="measures"] .for[data-for~="measures"], html[data-screen="report"] .for[data-for~="report"] { display: flex; }
.done-row { display: flex; align-items: center; gap: var(--s-20); opacity: 0; transition: opacity calc(var(--k) * var(--t-screen)) var(--ease-out); }
.done-row.on { opacity: 1; }
button.plain { all: unset; cursor: pointer; font-size: var(--t-14); color: var(--text-2); }
button.plain:hover { color: var(--text); }
button.plain:focus-visible, .tabs button:focus-visible, .toggle:focus-visible, .more:focus-visible { outline: var(--rule) solid var(--focus); outline-offset: var(--s-2); }
.stage { position: relative; padding-bottom: var(--s-96); }
.scene { display: none; opacity: 0; transition: opacity calc(var(--k) * var(--t-screen)) var(--ease-out); }
.scene.on { display: block; opacity: 1; }
@starting-style { .scene.on { opacity: 0; } }
.demo-h1 { font-weight: var(--w-semibold); font-size: var(--t-h2); line-height: var(--lh-heading); letter-spacing: var(--track-h2); }
.sub { margin: var(--s-12) 0 var(--s-32); font-size: var(--t-16); line-height: var(--lh-body); color: var(--text-2); }
#worklist .wrap, #measures .wrap, #cohort .wrap { padding-top: var(--s-56); }
.tcard { border-radius: var(--r-12); overflow: hidden; }
.row { position: relative; transition: background calc(var(--k) * var(--t-screen)) var(--ease-out), transform var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out); }
.row.hi, .row.pressed { background: var(--grad-row-selected); }
.lift:hover { background: var(--grad-row-hover); }
.foot-note { margin-top: var(--s-24); white-space: normal; }
.arr { color: var(--new); }
.who .signed { display: inline-flex; align-items: center; gap: var(--s-4); color: var(--text); }
.wl .thead, .wl .wl-row { grid-template-columns: var(--row-who-demo) minmax(0, 1fr) var(--row-when) var(--chevron); gap: var(--s-24); }
.wl .wl-when { font-size: var(--t-13); }
.wl .row.arriving { opacity: 0; transform: translateY(calc(-1 * var(--s-24))); }
.wl .row.done .who-name, .wl .row.done .wl-what { color: var(--text-2); }
#summary .wrap { padding-top: var(--s-48); }
.su-head { align-items: end; margin-bottom: var(--s-32); }
.su-copy { grid-column: span 8; }
.su-act { grid-column: span 4; display: flex; justify-content: flex-end; }
.compared { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); margin-top: var(--s-16); }
.compared .mono-label { margin-right: var(--s-4); }
.flist .thead, .flist .f-row { grid-template-columns: var(--col-status-demo) minmax(0, 1fr) var(--col-visits-demo) var(--thumb) var(--chevron); gap: var(--s-24); }
.flist .f-row { padding-block: var(--s-14); }
.more { all: unset; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; gap: var(--s-16); padding: var(--s-16) var(--s-24);
  font-size: var(--t-14); color: var(--text-2); cursor: pointer; }
.more:hover { color: var(--text); }
.lr { display: flex; align-items: center; gap: var(--s-24); margin-top: var(--s-16); }
.sugg-card { padding: var(--s-16); border-radius: var(--r-12); }
.sugg-card .mono-label { margin-bottom: var(--s-4); }
.sugg-card p:last-child { font-size: var(--t-16); }
#finding .wrap { padding-top: var(--s-32); }
.fv-grid { align-items: start; }
.fv-aside { grid-column: span 3; position: sticky; top: calc(var(--demo-header-h) + var(--s-16)); }
.fv-aside > .mono-label { margin-bottom: var(--s-8); }
.tabs { display: flex; flex-direction: column; gap: var(--s-4); max-height: calc(var(--frame-h-demo) * 2.2); overflow-y: auto; scrollbar-width: thin; }
.tabs .item { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: var(--s-12); padding: var(--s-12) var(--s-16);
  border-radius: var(--r-8); border: var(--hairline) solid transparent; font-size: var(--t-14); line-height: var(--lh-ui); color: var(--text-2); cursor: pointer;
  transition: border-color var(--t-hover) var(--ease-out), background var(--t-hover) var(--ease-out); }
.tabs .item:hover { border-color: var(--line-3); }
.tabs .item.on { background: var(--surface-2); border-color: var(--line-3); color: var(--text); }
.item-name { display: flex; flex-direction: column; min-width: 0; }
.item-size { font: var(--w-regular) var(--t-12)/var(--lh-ui) var(--font-mono); color: var(--text-3); }
.fv-main { grid-column: span 9; min-width: 0; }
.fv-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-8) var(--s-24); margin-bottom: var(--s-20); }
.fv-title { display: flex; align-items: center; gap: var(--s-12); font-weight: var(--w-semibold); font-size: var(--t-demo-1); line-height: var(--lh-heading); letter-spacing: var(--track-demo); }
.fv { transition: opacity calc(var(--k) * var(--t-screen)) var(--ease-out); }
.fv.swap { opacity: 0; }
.pane .vp { height: var(--frame-h-demo); }
.vp { position: relative; overflow: hidden; container-type: size; }
.vp .z { position: absolute; inset: 0; transition: transform calc(var(--k) * var(--t-curve)) var(--ease-out); }
.vp img { position: absolute; left: 50%; top: 50%; width: max(100cqw, 100cqh); height: max(100cqw, 100cqh); max-width: none; translate: -50% -50%; }
.vp img.ov { transition: opacity var(--t-hover) var(--ease-out); }
.outlines-off .vp img.ov { opacity: 0; }
.pane.wait:not(.has) .vp::before { content: "Loading\2026"; position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--t-14); color: var(--text-3); }
.frame-label.cur { color: var(--text); }
.ms .off { color: var(--text-2); }
.scrub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12) var(--s-24); margin-top: var(--s-16); }
.scrub .label { font-size: var(--t-13); }
.scrub #scrub-window { margin-left: auto; }
.track { position: relative; flex: none; width: var(--track-w); height: var(--s-16); display: flex; align-items: center; }
.track input { -webkit-appearance: none; appearance: none; width: 100%; height: var(--rule); margin: 0; border-radius: var(--r-4);
  background: var(--line-3); accent-color: var(--new); }
.track input::-webkit-slider-thumb { -webkit-appearance: none; width: var(--s-16); height: var(--s-16); border-radius: var(--r-round); background: var(--grad-primary); box-shadow: var(--shadow-primary); }
.track input::-moz-range-thumb { width: var(--s-16); height: var(--s-16); border: 0; border-radius: var(--r-round); background: var(--grad-primary); box-shadow: var(--shadow-primary); }
.track .tick { position: absolute; top: calc(-1 * var(--s-4)); width: var(--rule); height: var(--s-12); left: calc(var(--s-8) + (100% - var(--s-16)) * var(--at, 0)); background: var(--text-2); }
.toggle { all: unset; display: inline-flex; align-items: center; gap: var(--s-8); padding: var(--s-4) var(--s-12); border-radius: var(--r-pill); cursor: pointer;
  background: var(--grad-secondary); box-shadow: var(--shadow-secondary); font-size: var(--t-13); color: var(--text-2); }
.toggle b { min-width: var(--s-24); color: var(--new); font-weight: var(--w-medium); }
.toggle kbd { display: inline-grid; place-items: center; min-width: var(--s-20); height: var(--s-20); font: var(--w-regular) var(--t-12)/var(--lh-tight) var(--font-mono);
  color: var(--text-2); border: var(--hairline) solid var(--line-3); border-radius: var(--r-4); }
.key { display: inline-flex; align-items: center; white-space: nowrap; color: var(--text-3); }
.key .k { width: var(--s-20); height: var(--s-4); margin: 0 var(--s-8) 0 var(--s-16); fill: none; stroke: var(--text-2); stroke-width: var(--rule); }
.key .k:first-child { margin-left: 0; }
.key.chg .k.solid { stroke: var(--growth); }
.fv-data { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--s-32); align-items: start; }
.m-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--s-16); padding: var(--s-10) 0; border-bottom: var(--hairline) solid var(--line);
  font: var(--w-regular) var(--t-13)/var(--lh-ui) var(--font-mono); }
.m-head { font-size: var(--t-12); color: var(--text-3); text-transform: uppercase; }
.m-when { color: var(--text-2); font-family: var(--font-sans); font-size: var(--t-14); }
.m-none { grid-column: span 3; color: var(--text-3); }
.mtable { grid-column: span 5; }
.fv-cards { grid-column: span 4; display: flex; flex-direction: column; gap: var(--s-12); }
.fv-note { margin-top: var(--s-24); max-width: calc(var(--container) * 0.66); font-size: var(--t-14); line-height: var(--lh-body); color: var(--text-2); }
.mlist .thead, .mlist .f-row { grid-template-columns: var(--col-status-demo) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.mgrid { margin-top: var(--s-16); }
.mgrid .thead, .mgrid .f-row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mgrid .cell { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
#report .wrap { padding-top: var(--s-32); }
.rep { align-items: start; }
.doc { grid-column: span 7; padding: var(--s-32); border-radius: var(--r-16); }
.doc-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-16); margin-bottom: var(--s-16); }
.draft { display: inline-flex; align-items: center; gap: var(--s-8); transition: opacity var(--t-hover) var(--ease-out); }
.draft.signed, .draft.editing { color: var(--new); }
.doc-body { display: flex; flex-direction: column; gap: var(--s-4); }
.doc-body .comp { padding: 0 var(--s-16) var(--s-8); font-size: var(--t-15); color: var(--text-2); }
.doc-body .comp b { color: var(--text); font-weight: var(--w-medium); }
.doc-body .h { margin: var(--s-16) 0 var(--s-8); padding-inline: var(--s-16); font-weight: var(--w-semibold); font-size: var(--t-demo-2); line-height: var(--lh-heading); letter-spacing: var(--track-demo); color: var(--text); }
.doc-body .h:first-of-type { margin-top: var(--s-8); }
.doc-body .sentence { cursor: default; transition: background var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out); }
.doc-body .sentence[data-fid] { color: var(--text); }
.doc-body .sentence[data-fid]:hover { border-color: var(--line-3); cursor: pointer; }
.doc-body ol { display: flex; flex-direction: column; gap: var(--s-4); }
.doc-body li { display: grid; grid-template-columns: var(--s-28) minmax(0, 1fr); padding: var(--s-8) var(--s-16); border-radius: var(--r-8);
  border: var(--hairline) solid transparent; font-size: var(--t-16); line-height: var(--lh-report); }
.doc-body li[data-fid] > span:last-child { cursor: pointer; }
.doc-body .hl:not(.sentence) { background: var(--surface-2); border-color: var(--line-3); }
.doc-body .edited { text-decoration: underline dotted var(--text-3); text-underline-offset: var(--s-4); }
.ins, .sugg { display: inline-block; white-space: pre; overflow: hidden; vertical-align: bottom;
  transition: max-width calc(var(--k) * var(--t-frame)) var(--ease-out), opacity var(--t-hover) var(--ease-out), background calc(var(--k) * var(--t-curve)) var(--ease-out); }
.ins { opacity: 0; border-radius: var(--r-4); background: var(--edit-fill); }
.ins.on { opacity: 1; }
.ins.settled { background: transparent; }
.sugg { color: var(--text-2); }
.sugg.gone { max-width: 0 !important; opacity: 0; }
#doc[contenteditable="true"] { outline: none; border-radius: var(--r-8); box-shadow: var(--shadow-secondary); caret-color: var(--new); }
.doc-sugg { margin-top: var(--s-24); padding-top: var(--s-20); border-top: var(--hairline) solid var(--line); }
.doc-sugg:empty { display: none; }
.doc-sugg .mono-label { margin-bottom: var(--s-4); }
.side { grid-column: span 5; display: flex; flex-direction: column; gap: var(--s-12); position: sticky; top: calc(var(--demo-header-h) + var(--s-32)); }
.side-f { display: flex; flex-direction: column; gap: var(--s-12); transition: opacity calc(var(--k) * var(--t-screen)) var(--ease-out); }
.sf-name { display: flex; align-items: center; gap: var(--s-12); font-weight: var(--w-medium); }
.side-frame { height: var(--frame-h-side); }
.side-frame img { width: 100%; height: 100%; object-fit: cover; }
.visits .frame-ms { margin-top: var(--s-8); font-size: var(--t-12); color: var(--text); }
.visits .frame-ms.past { color: var(--text-2); }
.side-note { margin-top: var(--s-12); font-size: var(--t-13); line-height: var(--lh-report); color: var(--text-3); }
.cohort .thead, .cohort .co-row { grid-template-columns: var(--row-who-demo) minmax(0, 1fr) auto var(--chevron); gap: var(--s-24); align-items: start; }
.co-row { display: grid; padding: var(--s-20) var(--s-24); border-bottom: var(--hairline) solid var(--line); text-decoration: none; color: var(--text); }
.co-row:last-child { border-bottom: 0; }
.co-list { display: flex; flex-direction: column; gap: var(--s-8); }
.co-list li { display: grid; grid-template-columns: var(--col-status-demo) minmax(0, 1fr) auto; gap: var(--s-16); align-items: center; }
.strip { display: flex; gap: var(--s-8); justify-content: flex-end; }
.strip-cap { margin-top: var(--s-8); text-align: right; }
.cursor { position: absolute; left: 0; top: 0; z-index: 50; pointer-events: none; opacity: 0; will-change: transform;
  transition: opacity calc(var(--k) * var(--t-screen)) var(--ease-out); filter: var(--shadow-cursor); }
.cursor.on { opacity: 1; }
.cursor svg { display: block; width: var(--s-40); height: var(--s-40); }
.cursor path { fill: var(--text); stroke: var(--bg); stroke-width: var(--hairline); stroke-linejoin: round; }
.live .cursor { display: none; }
.ripple { position: absolute; z-index: 49; pointer-events: none; width: var(--s-40); height: var(--s-40); margin: calc(-1 * var(--s-20)) 0 0 calc(-1 * var(--s-20));
  border-radius: var(--r-round); border: var(--rule) solid var(--text); opacity: 0; transform: scale(.3);
  animation: ripple calc(var(--k) * var(--t-frame)) var(--ease-out) forwards; }
@keyframes ripple { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }
.caption { position: fixed; left: 50%; bottom: var(--s-24); z-index: 40; transform: translateX(-50%); max-width: calc(100% - 2 * var(--side));
  padding: var(--s-8) var(--s-16); border-radius: var(--r-pill); background: var(--surface-2); border: var(--hairline) solid var(--line-3);
  pointer-events: none; font-size: var(--t-14); line-height: var(--lh-ui); color: var(--text-2); opacity: 0;
  transition: opacity calc(var(--k) * var(--t-frame)) var(--ease-out); }
.caption.on { opacity: 1; }
.caption.out { opacity: 0; transition: opacity calc(var(--k) * var(--t-hover)) var(--ease-out); }
html.recorded body { width: calc(var(--container) * 1.2); overflow: hidden; }
html.recorded .caption { position: absolute; font-size: var(--t-18); color: var(--text); }
.live .caption { position: relative; left: auto; bottom: auto; transform: none; display: table; margin: calc(-1 * var(--s-64)) auto var(--s-32); }
html.small .banner, html.small .demo-head, html.small .stage, html.small .caption, html.small .cursor { display: none !important; }
.small .wrap { display: flex; flex-direction: column; gap: var(--s-24); padding-block: var(--s-40) var(--s-32); }
.small .logo img { height: var(--logo-h-demo); }
.small .demo-h1 { font-size: var(--t-demo-1); }
.small .sub { margin: 0; }
.small video { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-12); background: var(--ct-bg); }
.small .mono-label { white-space: normal; }
@media (max-width: 899px) { #open-anyway { display: none; } }
@media (max-width: 1023px) {
  .head-actions { gap: var(--s-12); }
  .su-copy, .su-act { grid-column: 1 / -1; }
  .su-act { justify-content: flex-start; margin-top: var(--s-20); }
  .wl .thead, .wl .wl-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto var(--chevron); }
  .flist .thead, .flist .f-row { grid-template-columns: var(--col-status) minmax(0, 1fr) minmax(0, 1fr) var(--thumb) var(--chevron); gap: var(--s-16); }
  .fv-aside, .fv-main { grid-column: 1 / -1; }
  .fv-aside { position: static; margin-bottom: var(--s-24); }
  .tabs { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: var(--s-4); }
  .tabs .item { flex: none; }
  .fv-data { grid-template-columns: minmax(0, 1fr); }
  .mtable, .fv-cards { grid-column: 1 / -1; }
  .doc, .side { grid-column: 1 / -1; }
  .side { position: static; margin-top: var(--s-32); }
  .cohort .thead, .cohort .co-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) var(--chevron); }
  .cohort .strip-wrap { display: none; }
}
@media (max-width: 639px) {
  .crumbs ol { display: none; }
}