@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/fira-code-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/fira-code-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/fira-code-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/fira-code-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{ --accent:#0078D4; --accent-deep:#005A9E; --brand2:#111111;
  --bg:#FFFFFF; --ink:#111111; --text:#555555; --muted:#888888; --thead:#888888; --line:#E9E9E9; --rule:#111111;
  color-scheme:light; --sans:'Inter',Arial,sans-serif; --mono:'Fira Code',Consolas,monospace; }
:root[data-theme="dark"]{ --accent:#3B6FF5; --accent-deep:#5B8AFF; --brand2:#3B6FF5;
  --bg:#000000; --ink:#F2F4F8; --text:#B9BDC7; --muted:#7D8390; --thead:#3B6FF5; --line:#1B2338; --rule:#346FE7;
  color-scheme:dark; }

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote,table{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-deep)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mono{font-family:var(--mono)}
.doc{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;max-width:1180px;margin:0 auto;padding:0 max(24px,env(safe-area-inset-left,0px));padding-top:calc(22px + env(safe-area-inset-top,0px))}
.mast{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.mast .name{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em;text-decoration:none;display:inline-flex;align-items:center}
.mast .name img{width:14px;height:17px;margin-right:9px}
.mast .name .p{color:var(--brand2)}
.menu{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:13.5px}
.menu a{color:var(--text);text-decoration:none}
.menu a:hover{color:var(--accent);text-decoration:underline}
.menu .cur{color:var(--ink);font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:1px}
.body{flex:1;padding:22px 0 18px}
h1{font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.sub{margin-top:4px;font-size:14.5px;color:var(--text);max-width:120ch}
h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:15px;font-weight:600;color:var(--ink);margin-top:26px}
h2 .cnt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);font-weight:400}
.body .two h2{margin-top:22px}
table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13.5px;line-height:1.45}
th,td{text-align:left;vertical-align:top;padding:5px 16px 5px 0;border-bottom:1px solid var(--line)}
thead th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--thead);font-weight:400;padding-top:0;padding-bottom:7px;border-bottom:1px solid var(--rule)}
td:last-child,th:last-child{padding-right:0}
td.k{color:var(--ink);font-weight:500;white-space:nowrap}
td.r{color:var(--ink)}
td.s{color:var(--muted);font-size:12.5px}
td.v{font-family:var(--mono);font-size:15px;color:var(--ink);white-space:nowrap;font-weight:500}
table.mand td:nth-child(2){width:30%;color:var(--text)}
table.mand td:nth-child(3){width:36%}
table.mand td:nth-child(4){width:20%;white-space:nowrap}
table.refs td.k{width:15%}
table.refs td.role{width:21%;color:var(--text)}
table.refs td.q{width:53%;color:var(--ink)}
table.refs td.s{width:11%;white-space:nowrap}
table.refs tr.grp td{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--thead);padding:16px 0 5px;border-bottom:1px solid var(--rule)}
table.kpi td:nth-child(2){width:44%}
table.cmp td{color:var(--text)} table.cmp td.k{color:var(--ink)} table.cmp td.us{color:var(--ink)}
.fine{margin-top:10px;font-size:12.5px;color:var(--muted);max-width:140ch}
dl{display:grid;grid-template-columns:170px 1fr;gap:0 20px;margin-top:12px;font-size:14.5px}
dl>div{display:contents}
dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--thead);padding:8px 0;border-bottom:1px solid var(--line)}
dd{color:var(--ink);padding:8px 0;border-bottom:1px solid var(--line)}
dd .sub2{display:block;color:var(--text);font-size:13.5px;margin-top:1px}
.steps{margin-top:14px;font-family:var(--mono);font-size:13.5px;line-height:1.9;color:var(--ink)}
.steps span{color:var(--thead)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.qa div{padding:10px 0;border-bottom:1px solid var(--line)}
.qa div:last-child{border-bottom:0}
.qa h3{font-size:15px;font-weight:600;color:var(--ink)}
.qa p{margin-top:3px;font-size:14.5px;max-width:90ch}
.person{display:grid;grid-template-columns:88px 1fr;gap:24px;align-items:start;margin-top:16px}
.person img{width:88px;height:110px;object-fit:cover;object-position:top;border-radius:2px}
.person b{display:block;font-size:16px;color:var(--ink);font-weight:600}
.person .bio{font-size:14.5px;color:var(--text);margin-top:2px;max-width:80ch}
.facts{margin-top:12px;border-top:1px solid var(--line)}
.facts li{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.facts li b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.pull{margin-top:16px;font-size:15px;color:var(--ink);line-height:1.5;max-width:80ch}
.pull small{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.foot{padding:14px 0 20px;border-top:1px solid var(--rule)}
.foot .contact{font-size:14.5px;color:var(--ink)}
.foot .contact a{color:var(--ink);text-decoration:none}
.foot .contact a:hover{color:var(--accent);text-decoration:underline}
.foot .contact .mono{font-size:13.5px}
.foot .sep{color:var(--muted)}
.foot .corp{margin-top:0;font-size:13.5px;color:var(--text)}
.foot .corp a{color:var(--text);text-decoration:none}
.foot .corp a:hover{color:var(--accent);text-decoration:underline}
.foot .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;margin-top:10px;font-size:12px;color:var(--muted);line-height:1.5}
.foot .legal span:first-child{max-width:110ch}
.foot .legal a{color:var(--muted)}
.foot .legal a:hover{color:var(--ink)}
/* page 1: airy */
.index{padding-bottom:40px}
.index .hero{padding:clamp(56px,8vw,104px) 0 clamp(64px,9vw,120px);max-width:60ch}
.index h1{font-size:clamp(24px,2.6vw,32px);line-height:1.25;letter-spacing:-.015em;font-weight:600}
.index .sub{margin-top:14px;font-size:16px;line-height:1.55;color:var(--text)}
.index .block+.block{margin-top:clamp(72px,9vw,120px)}
.index .lab{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--thead);padding-bottom:12px;border-bottom:1px solid var(--rule)}
.index table{margin-top:0;font-size:15px;line-height:1.5}
.index td{padding:15px 24px 15px 0;border-bottom:1px solid var(--line)}
.index td:last-child{padding-right:0}
.index .mand td.co{width:20%;color:var(--ink);font-weight:500;white-space:nowrap}
.index .mand td.res{width:58%;color:var(--ink)}
.index .mand td.src{width:22%;color:var(--muted);font-size:13.5px;white-space:nowrap;text-align:right}
.index .mand tr.anon td.co{font-weight:400;color:var(--text);white-space:normal}
.index .refs td.who{width:26%}
.index .refs td.who b{display:block;color:var(--ink);font-weight:500}
.index .refs td.who span{display:block;color:var(--muted);font-size:13px;margin-top:1px}
.index .refs td.q{width:62%;color:var(--ink)}
.index .refs td.src{width:12%;text-align:right;white-space:nowrap;font-size:13.5px}
.index .refs .rec{color:var(--muted)}
.index .proof{margin-top:20px;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink);max-width:64ch}
.index .proof a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.index .proof a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.index .all{margin-top:22px;font-size:13.5px;color:var(--muted)}
.index .all a{color:var(--text)}
.index .all a:hover{color:var(--accent)}
.index .all .sep{margin:0 8px}
.index + .foot{margin-top:clamp(40px,6vw,72px)}
@media (max-width:860px){ .two{grid-template-columns:1fr} }
@media (max-width:700px){
  table thead{display:none} table tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)} table td{display:block;border:0;padding:1px 0;width:auto!important;white-space:normal!important;text-align:left!important}
  .index td{padding:2px 0}
  td.v{font-size:20px} table.refs tr.grp{padding:16px 0 4px} table.refs tr.grp td{padding:0}
}
@media (max-width:560px){ dl{grid-template-columns:1fr} dt{border-bottom:0;padding-bottom:0} dd{padding-top:2px} .person{grid-template-columns:1fr} .facts li{grid-template-columns:1fr;gap:1px} }

/* no viewport stretch: the foot follows the content */
.doc{min-height:0}
.menu .cur{border-bottom:0;font-weight:500}
.mright{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 28px}
.lang{font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.lang a{color:var(--muted);text-decoration:none}
.lang a:hover{color:var(--accent)}
.lang .cur{color:var(--ink)}
.lang .sep{color:var(--thead);margin:0 2px}
/* entry page */
.entry{padding-top:14px;padding-bottom:10px}
.entry .hero{padding:clamp(40px,4.6vw,56px) 0 0;max-width:none}
.entry .hero .sub{max-width:92ch;font-size:16px;line-height:1.55;margin-top:14px}
.entry .hero+.block{margin-top:clamp(48px,5.6vw,64px)}
.entry .block+.block{margin-top:clamp(34px,4vw,48px)}
.entry .steps{margin-top:16px;font-size:13.5px}
.entry .steps span{color:var(--accent)}
.entry .steps a{color:var(--ink);text-decoration:none}
.entry .steps a:hover{color:var(--accent)}
.entry+.foot{margin-top:clamp(36px,4vw,48px);max-width:880px;margin-left:auto;margin-right:auto;width:100%}
/* overview: one centred column */
.entry{width:100%;max-width:880px;margin-left:auto;margin-right:auto}
.entry .hero{text-align:center}
.entry .hero .sub{margin-left:auto;margin-right:auto}
.entry .steps{text-align:center}
.entry+.foot .corp{text-align:center}
/* brand film: 16:9, silent autoplay, own control bar */
.film{margin:clamp(32px,3.8vw,44px) auto 0;width:760px;max-width:100%;text-align:left}
.fwrap{position:relative;background:#000;border-radius:4px 4px 0 0;overflow:hidden}
.film .hvid{display:block;width:100%;aspect-ratio:16/9;height:auto;background:#000;cursor:pointer}
.fwrap:fullscreen .hvid{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
.endcta{position:absolute;left:54.2%;top:63.9%;width:29.2%;height:9.3%;display:none;border-radius:6px;background:transparent;color:transparent;font-size:0}
.endcta.show{display:block}
.ctrl{display:flex;align-items:center;gap:12px;padding:8px 10px;background:var(--line);border-radius:0 0 4px 4px;font-family:var(--mono);font-size:12.5px;color:var(--text)}
.ctrl button{font:inherit;color:var(--ink);background:none;border:0;padding:4px 6px;cursor:pointer;line-height:1}
.ctrl button:hover,.ctrl button:focus-visible{color:var(--accent)}
.ctrl [data-pp]{width:26px;text-align:center}
.ctrl .bar{position:relative;flex:1;height:14px;cursor:pointer;background:linear-gradient(var(--thead),var(--thead)) center/100% 2px no-repeat}
.ctrl .bar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ctrl .prog{position:absolute;left:0;top:6px;height:2px;width:0;background:var(--accent)}
.ctrl .prog::after{content:"";position:absolute;right:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.ctrl .time{white-space:nowrap;min-width:92px;text-align:center;color:var(--text)}
.film figcaption{margin-top:10px;font-family:var(--mono);font-size:12.5px;color:var(--muted);text-align:center}
.film figcaption .x{color:var(--muted)}
.cta{margin:22px 0 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 24px;font-family:var(--mono);font-size:13px}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;padding:12px 22px;border-radius:4px;font-family:var(--sans);font-size:15px;font-weight:500;line-height:1}
.btn:hover{background:var(--accent-deep);color:#fff}
.cta .sec{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.cta .sec:hover{color:var(--accent);border-bottom-color:var(--accent)}
.verr{margin-top:8px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.rows b{font-weight:500;color:var(--ink)}
/* mono rows: problems, entry, reference names */
.rows{margin-top:8px;font-family:var(--mono);font-size:13.5px;line-height:1.7;color:var(--ink)}
.rows>p{display:grid;grid-template-columns:200px 1fr;gap:0 18px;padding:5px 0}
.rows .who{color:var(--muted);text-decoration:none;white-space:nowrap}
.rows .who small{display:block;font-size:12px;color:var(--muted);white-space:normal;line-height:1.5;margin-top:1px}
.rows a.who:hover{color:var(--accent)}
.rows a.who:hover small{color:var(--accent)}
.rows .sep{color:var(--thead)}
.rows a.n{color:var(--ink);text-decoration:none}
.rows a.n:hover{color:var(--accent)}
.rows .x{color:var(--text)}
.rows .dt{color:var(--muted);font-size:12px}
.index .hero{max-width:none}
.index:not(.entry) .hero{padding:clamp(40px,5vw,72px) 0 clamp(8px,1vw,12px)}
.index:not(.entry) .hero .sub{margin-top:10px;font-size:15px;max-width:80ch}
.index:not(.entry) .hero+.block{margin-top:clamp(28px,3vw,40px)}
.index:not(.entry) .block+.block{margin-top:clamp(56px,7vw,96px)}
p:target{color:var(--accent)}
.active,.rows a.active,.index .mand td.co a.active{color:var(--accent)}
.index .mand td.co a{color:inherit;text-decoration:none}
.index .mand td.co a:hover{color:var(--accent)}
/* ten steps: three columns, step | before | after */
.steps10>p{grid-template-columns:232px 1fr 1fr;gap:0 28px;padding:12px 0;border-bottom:1px solid var(--line);align-items:start}
.steps10>p:last-of-type{border-bottom:0}
.steps10>p.head{padding:0 0 9px;border-bottom:1px solid var(--rule);font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.4}
.steps10>p.head span{color:var(--thead)}
.steps10 .who{color:var(--ink);white-space:normal}
.steps10 .who.ic{display:grid;grid-template-columns:20px 1fr;gap:0 11px;align-items:start}
.steps10 .ico{width:20px;height:20px;color:var(--accent);margin-top:2px}
.steps10 .who small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.steps10 .num{color:var(--accent);font-weight:500;margin-right:6px}
.steps10 .pain{color:var(--text)}
.steps10 .res{color:var(--ink)}
.steps10 .res b{color:var(--accent)}
.steps10 .tag{display:none;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--thead)}
.steps10 a.n{border-bottom:1px solid var(--line)}
.steps10 a.n:hover,.steps10 a.n.active{border-bottom-color:var(--accent)}
/* day/night switch in the foot */
.theme{display:inline-flex;align-items:center;vertical-align:-3px;background:none;border:0;padding:0 2px;margin:0;color:var(--text);cursor:pointer;line-height:1}
.theme:hover,.theme:focus-visible{color:var(--accent)}
.theme svg{display:block}
.founder{margin-top:8px}
/* inline case study */
.case{display:none;margin:6px 0 18px;padding:14px 0 6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.case.open,.case:target{display:block}
.case .k{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--muted);line-height:1.6}
.case .k .logo{flex:none;height:22px;width:auto;filter:invert(.33)}
.case .rows{margin-top:8px}
.case .rows b{font-weight:500;color:var(--accent)}
.case .rows a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.case .rows a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.cvids{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.cvid{width:min(100%,400px);margin:0}
.cvid:only-child{width:min(100%,560px)}
.cvids.talks{margin:12px 0 20px}
.cvids.talks .cvid{width:min(100%,420px)}
/* recordings mosaic: one big tile left (2×2 cells), four small ones in a 2×2 grid beside it */
.cvids.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 16px;align-items:stretch}
.cvids.mosaic .cvid{width:auto}
.cvids.mosaic .cvid.big{grid-column:1/3;grid-row:1/3;display:flex;flex-direction:column}
.cvids.mosaic .cvid.big .poster{flex:1;min-height:0}
.cvids.mosaic .cvid.big .poster img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.cvids.mosaic .cvid.big figcaption{flex:none}
.cvids.mosaic .cvid:not(.big) .poster .play{font-size:11.5px;padding:4px 8px;right:8px;top:8px}
.cvids.mosaic .cvid:not(.big) figcaption{font-size:11.5px}
.cvids.mosaic .cvid.big .poster img,.cvids.mosaic .cvid.big .hvid{border-radius:4px}
@media (max-width:860px){ .cvids.mosaic{grid-template-columns:repeat(2,minmax(0,1fr))} .cvids.mosaic .cvid.big{grid-column:1/3;grid-row:auto;display:block} .cvids.mosaic .cvid.big .poster img{position:static;height:auto;aspect-ratio:16/9} }
@media (max-width:520px){ .cvids.mosaic{grid-template-columns:1fr} .cvids.mosaic .cvid.big{grid-column:auto} .cvids.mosaic .cvid:not(.big) figcaption{font-size:12px} }
.cvid .poster{position:relative;display:block;width:100%;padding:0;border:0;background:#000;border-radius:4px;overflow:hidden;cursor:pointer;font:inherit;text-decoration:none}
.cvid .poster img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;display:block}
.cvid .poster .play{position:absolute;right:10px;top:10px;font-family:var(--mono);font-size:12.5px;color:#fff;background:rgba(0,0,0,.6);padding:5px 10px;border-radius:2px}
.cvid .poster:hover .play,.cvid .poster:focus-visible .play{background:var(--accent)}
.cvid .hvid{display:block;width:100%;aspect-ratio:16/9;height:auto;background:#000;border-radius:4px}
.cvid figcaption{margin-top:6px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.cvid figcaption .yt{color:var(--thead)}
.cvid .player{position:relative;aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden}
.cvid .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.stim{display:grid;grid-template-columns:200px 1fr;gap:0 18px;margin-top:10px;padding-top:6px}
.stim>.who{font-family:var(--mono);font-size:13.5px;color:var(--muted);padding-top:2px}
.stim .q{font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--ink);max-width:80ch;margin:0 0 10px}
.stim .q small{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:4px}
.face{width:28px;height:28px;border-radius:50%;flex:none;display:inline-block;vertical-align:middle;filter:grayscale(1);box-shadow:0 0 0 1px var(--line)}
.whob{display:grid;grid-template-columns:32px 1fr;gap:0 10px;align-items:center}
.whob .face{grid-row:1/3;width:32px;height:32px;align-self:start;margin-top:2px}
.whob b,.whob span{grid-column:2}
.whob.noface{grid-template-columns:1fr}
.whob.noface b,.whob.noface span{grid-column:1}
.x-close{margin:6px 0 0;font-family:var(--mono);font-size:12px}
.x-close a{color:var(--muted);text-decoration:none}
.x-close a:hover{color:var(--accent)}
tr.case-row td{padding:0;border-bottom:0}
tr.case-row .case{margin:0 0 10px;border-top:0}
.index .fine{margin-top:14px}
.pubs>p{padding:7px 0;border-bottom:1px solid var(--line);align-items:start}
.pubs>p:last-of-type{border-bottom:0}
.pubs .it a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.pubs .it a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* legal pages */
.legalpage .legal{max-width:80ch;margin-top:26px}
.legalpage .legal h2{font-size:15px;margin-top:0}
.legalpage .legal p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--text)}
.legalpage .legal a{color:var(--ink)}
/* assessment: one question at a time (default) or all at once */
.assess .wizhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px}
.assess .wizhead .right{letter-spacing:0;text-transform:none;font-size:12px;color:var(--muted)}
.assess .wizhead .x{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);letter-spacing:0;text-transform:none;font-size:12px;margin-left:12px}
.assess .wizhead .x:hover{color:var(--accent);border-bottom-color:var(--accent)}
.assess .pline{height:2px;background:var(--line);margin-top:-1px}
.assess .pline span{display:block;height:2px;width:0;background:var(--accent);transition:width .3s}
.assess #wiz:not(.all) .form>p{display:none}
.assess #wiz:not(.all) .form>p.cur{display:block;padding:34px 0 10px;border-bottom:0}
.assess #wiz:not(.all) .form>p.cur .who{display:block;font-family:var(--sans);font-size:clamp(20px,2.2vw,24px);font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.3;white-space:normal}
.assess #wiz:not(.all) .form>p.cur .it{display:block;margin-top:22px}
.assess #wiz:not(.all) .opt{display:flex;align-items:center;gap:14px;padding:13px 0;margin:0;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:16px;color:var(--ink);cursor:pointer}
.assess #wiz:not(.all) .opt:first-of-type{border-top:1px solid var(--line)}
.assess #wiz:not(.all) .opt:hover{color:var(--accent)}
.assess #wiz:not(.all) input[type=text]{width:min(100%,520px);font-size:17px;padding:11px 12px}
.assess #wiz:not(.all) .num input{font-size:26px;width:220px;padding:10px 12px}
.assess #wiz:not(.all) .unit{font-size:16px}
.assess #wiz.all .wnav,.assess #wiz.all .pline,.assess #wiz.all #prog,.assess #wiz.all ~ #res #edit{display:none}
.assess .optl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--thead);margin-left:10px;font-weight:400}
.assess .hint{font-family:var(--mono);font-size:12.5px;color:var(--accent);min-height:18px;margin-top:6px}
.assess .wnav{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-family:var(--mono);font-size:13px}
.assess .wnav .sec{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.assess .wnav .sec:hover{color:var(--accent);border-bottom-color:var(--accent)}
.assess .form>p{align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.assess .form>p:last-of-type{border-bottom:0}
.assess .form .who{white-space:normal}
.assess input[type=text],.assess input[type=number]{font:inherit;font-family:var(--mono);font-size:13.5px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:7px 10px;width:min(100%,360px)}
.assess input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.assess .num{display:inline-flex;align-items:center;gap:10px}
.assess .num input{width:160px}
.assess .unit{font-family:var(--mono);color:var(--muted);font-size:13px}
.assess .opt{display:inline-flex;align-items:center;gap:6px;margin:4px 18px 4px 0;color:var(--ink)}
.assess .opt input{accent-color:var(--accent);width:15px;height:15px;margin:0;flex:none}
.assess .verdict{display:flex;align-items:center;gap:14px;margin-top:16px;font-size:18px;color:var(--ink)}
.assess .verdict b{font-weight:500}
.assess .light{width:14px;height:14px;border-radius:50%;background:var(--line);flex:none}
.assess .light.green{background:var(--accent)}
.assess .light.yellow{background:var(--accent);opacity:.45}
.assess .light.red{background:var(--muted)}
.assess .why{margin-top:10px;max-width:80ch;font-size:14.5px;line-height:1.55;color:var(--text)}
.assess .why li{padding:4px 0 4px 18px;position:relative}
.assess .why li::before{content:"·";position:absolute;left:4px;color:var(--accent)}
/* projection: big number, range, twelve bars, lever */
.assess .bign{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:16px}
.assess .bign b{font-family:var(--mono);font-size:clamp(28px,3.2vw,40px);font-weight:500;color:var(--ink);letter-spacing:-.01em;line-height:1.1}
.assess .bign span{font-size:14px;color:var(--text)}
.assess .range{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:6px}
.assess .bars{display:block;width:100%;height:220px;margin-top:18px}
.assess .bars .hi{fill:var(--accent);opacity:.18}
.assess .bars .mid{fill:var(--accent)}
.assess .bars .zero{fill:var(--line)}
.assess .axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--thead);margin-top:8px}
.assess .pipe{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:10px}
.assess .lever{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--text)}
.assess .lever b{font-family:var(--mono);font-size:22px;font-weight:500;color:var(--accent)}
.assess .lever input{grid-column:1/3;width:100%;accent-color:var(--accent);margin:8px 0 0}
.assess .calc>p{grid-template-columns:320px 1fr}
.assess .calc .who{white-space:normal}
.assess .calc .it b{color:var(--accent)}
.assess .cta{justify-content:flex-start;margin-top:24px}
@media (max-width:700px){ .stim{grid-template-columns:1fr} tr.case-row{display:block} tr.case-row td{display:block} .cvid{width:100%} .ctrl .time{display:none} }
@media (max-width:700px){ .rows>p{grid-template-columns:1fr;padding:6px 0} .steps10>p{grid-template-columns:1fr;gap:2px 0;padding:10px 0} .steps10>p.head{display:none} .steps10 .tag{display:block;margin-top:6px} .assess .calc>p{grid-template-columns:1fr} }
@media (min-width:701px) and (max-width:980px){ .steps10>p{grid-template-columns:190px 1fr 1fr;gap:0 18px} }

.mast .name img{filter:none}
.case .k .logo{filter:invert(.33)}
.person img{filter:none}
.theme .sun{display:none}
.theme .moon{display:block}
:root[data-theme="dark"] .mast .name img{filter:invert(1)}
:root[data-theme="dark"] .case .k .logo{filter:invert(.74)}
:root[data-theme="dark"] .person img{filter:grayscale(1) contrast(1.05)}
:root[data-theme="dark"] .theme .moon{display:none}
:root[data-theme="dark"] .theme .moon{display:none}
:root[data-theme="dark"] .theme .sun{display:block}