/* House tokens and components from emerald_cloud_lab/demos/ecl-vision-qa/index.html; fonts self hosted (OFL). */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-garamond.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-garamond-italic.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/jetbrains-mono.woff2) format('woff2')}

:root{--bg:#F7F9FA;--panel:#FFFFFF;--tint:#EFF3F4;--ink:#212529;--secondary:#66707A;--em:#0CBD96;--em-ink:#078A6C;--em-soft:#E5F7F1;--alert:#C4453A;--alert-soft:#FBEBE9;--warn:#8a6d1f;--warn-soft:#FBF3DC;--border:#E1E6E9;--grid:rgba(33,37,41,.045);--serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',system-ui,sans-serif;--mono:'JetBrains Mono','SF Mono',monospace}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--em-ink)}
[hidden]{display:none !important}

/* ---- frame: a left sidebar nav (grouped, icons) and a content column with the grid hero */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--border);padding:20px 14px}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 22px;text-decoration:none;color:var(--ink)}
.brand .ecl{height:38px;width:38px;object-fit:contain}
.brand span{display:flex;flex-direction:column;line-height:1.25}
.brand b{font-size:14px;font-weight:700}
.brand small{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary)}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.ngroup{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--secondary);padding:18px 10px 6px}
.nl{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:6px;color:var(--secondary);font-size:14px;font-weight:600;text-decoration:none}
.nl svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nl:hover{background:var(--tint);color:var(--ink)}
.nl.on{background:var(--em-soft);color:var(--em-ink)}
.side-foot{border-top:1px solid var(--border);padding:14px 8px 0;display:flex;flex-direction:column;gap:10px}
.side-foot .who{display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:.66rem;color:var(--secondary);word-break:break-all}
.side-foot .who .role{align-self:flex-start;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:3px;background:var(--tint);color:var(--ink)}
.side-foot .btn{align-self:flex-start}
.devby{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary)}
.devby img{height:16px}
.devby b{color:var(--ink);font-weight:700}
.maincol{min-width:0;padding:0 48px 110px;max-width:1240px}
.topbar{display:flex;justify-content:flex-end;padding:18px 0 0}
.proto{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--em-ink);border:1px solid var(--em);padding:6px 14px;border-radius:999px;background:var(--em-soft);line-height:1.6}
.hero{padding:40px 0 4px;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:56px 56px}
.kicker{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--em-ink);margin-bottom:16px}
h1{font-family:var(--serif);font-weight:600;font-size:52px;line-height:1.08;letter-spacing:-.01em;max-width:820px}
h1 em{font-style:italic;color:var(--em-ink)}
.sub{color:var(--secondary);max-width:680px;margin:16px 0 42px;font-size:16px}
.fig{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary);margin-bottom:10px}
.fig.gap{margin:42px 0 10px}
h2{font-family:var(--serif);font-weight:600;font-size:32px;line-height:1.15;margin-bottom:8px}
h2 em{font-style:italic;color:var(--em-ink)}
h3{font-family:var(--serif);font-weight:600;font-size:21px;margin:26px 0 12px}
.lead{color:var(--secondary);max-width:720px;margin-bottom:30px;font-size:15.5px}
.lead b{color:var(--ink)}
.knote{font-size:13px;color:var(--secondary);margin-top:12px}
.knote b{color:var(--ink)}
.err{color:var(--alert);font-size:13.5px;margin-top:10px}
.okmsg{color:var(--em-ink);font-size:13.5px;margin-top:10px}
.mono-s{font-family:var(--mono);font-size:.72rem}

/* ---- buttons and forms */
.btn{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border:1px solid var(--border);background:var(--panel);color:var(--secondary);cursor:pointer;border-radius:3px;text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--ink);color:var(--ink)}
.btn.primary{background:var(--em-ink);border-color:var(--em-ink);color:#fff}
.btn.primary:hover{background:#056A53}
.btn.small{padding:5px 10px;font-size:.56rem}
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{font:500 13px var(--sans);padding:8px 11px;border:1px solid var(--border);border-radius:4px;background:var(--panel);color:var(--ink);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--em)}
textarea{width:100%;min-height:70px}
input[type=checkbox]{accent-color:var(--em-ink);width:15px;height:15px}
.ctl{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.ctl .btn{padding:10px 14px}
.ctl label{display:flex;flex-direction:column;gap:5px;font:600 .56rem/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--secondary)}
.filters{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.filter{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border:1px solid var(--border);background:var(--panel);color:var(--secondary);cursor:pointer;border-radius:3px;text-decoration:none}
.filter.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.filter:not(.on):hover{border-color:var(--ink);color:var(--ink)}
.mode-switch{display:inline-flex;gap:3px;padding:3px;background:var(--tint);border:1px solid var(--border);border-radius:4px;margin:0 0 22px}
.mode-button{border:0;background:transparent;color:var(--secondary);padding:9px 15px;border-radius:3px;cursor:pointer;font:600 .61rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.mode-button.on{background:var(--ink);color:#fff}

/* ---- stat cards, tables, pills */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:32px}
.stats.two{grid-template-columns:repeat(2,1fr)}
.stats.four{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--panel);padding:22px}
.stat .n{font-family:var(--serif);font-weight:600;font-size:42px;line-height:1;color:var(--em-ink)}
.stat .n.bad{color:var(--alert)}
.stat .n.hm{color:#3d5a8a}
.stat .n.ink{color:var(--ink)}
.stat .n.txt{font-size:30px}
.stat .l{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary);margin-top:8px;line-height:1.6}
.table-scroll{width:100%;overflow-x:auto;border:1px solid var(--border);background:var(--panel)}
table.events{width:100%;border-collapse:collapse;background:var(--panel);font-size:13.5px}
table.events th{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary);text-align:left;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--tint);white-space:nowrap}
table.events td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
table.events td.num,table.events th.num{text-align:right;font-variant-numeric:tabular-nums}
table.events tr.row:hover{background:var(--em-soft)}
table.events td.empty{color:var(--secondary);text-align:center;padding:30px}
.pill{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:3px;white-space:nowrap}
.pill.ok{background:var(--em-soft);color:var(--em-ink)}
.pill.bad{background:var(--alert-soft);color:var(--alert)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.na{background:var(--tint);color:var(--secondary)}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.bar{display:block;height:8px;border-radius:2px;background:var(--em)}
.bar-cell{width:220px}
.bar-track{background:var(--tint);border-radius:2px;height:8px;display:block}
.kv{display:grid;grid-template-columns:170px 1fr;border:1px solid var(--border);background:var(--panel);margin-bottom:24px}
.kv>div{padding:12px 18px;border-bottom:1px solid var(--border)}
.kv>div:nth-last-child(-n+2){border-bottom:0}
.kv .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary);background:var(--tint)}
.keybox{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.keybox code{font-family:var(--mono);font-size:13px;background:var(--tint);padding:6px 10px;border-radius:3px;word-break:break-all}
pre.code{font-family:var(--mono);font-size:12px;line-height:1.55;background:#1d2125;color:#E8EDEF;padding:16px 18px;border-radius:5px;overflow-x:auto;margin:8px 0 20px}
pre.json{font-family:var(--mono);font-size:12px;line-height:1.5;background:var(--tint);border:1px solid var(--border);padding:14px 16px;border-radius:4px;overflow-x:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:5px;padding:20px}
.steps{list-style:none;border:1px solid var(--border);border-radius:5px;background:var(--panel)}
.steps li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);font-size:13.5px}
.steps li:last-child{border-bottom:0}
.steps i{font:600 10px var(--mono);font-style:normal;background:var(--em);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center}

/* ---- login: the demo's #gate screen */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:56px 56px}
.gate .box{text-align:center;max-width:400px;width:100%;padding:30px}
.gate .logos{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:22px}
.gate .logos img.e{height:42px}
.gate .logos img.o{height:32px}
.gate .logos .sep{width:1px;height:32px;background:var(--border)}
.gate h2{font-family:var(--serif);font-size:34px;font-weight:600}
.gate .who{font-family:var(--mono);color:var(--secondary);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;margin:6px 0 28px}
.gate .hint{font-size:.8rem;line-height:1.45;color:var(--secondary);margin:-14px 0 22px;max-width:34ch;margin-inline:auto}
.gate input{width:100%;background:var(--panel);border:1px solid var(--border);border-radius:4px;color:var(--ink);padding:14px 18px;font-size:15px;margin-bottom:12px;outline:none;font-family:var(--sans);text-align:center}
.gate input:focus{border-color:var(--em)}
.gate button.go{width:100%;background:var(--em-ink);border:none;border-radius:4px;color:#fff;font-weight:700;padding:14px;font-size:14.5px;cursor:pointer;font-family:var(--sans)}
.gate button.go:hover{background:#056A53}
.gate .alt{margin-top:16px;background:none;border:0;color:var(--em-ink);font:600 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-bottom:1px solid var(--em)}
.gate .err{color:var(--alert);font-size:13px;margin-top:12px;min-height:18px}
.gate .lead{margin:0 auto 22px}
.gate #f-verify{margin-top:18px}
.gate .qr svg{display:block;width:196px;height:196px;margin:0 auto 14px;background:#fff;border:1px solid var(--border);border-radius:4px}
.gate .key{margin-bottom:16px}
.gate .key summary{cursor:pointer;color:var(--em-ink);font:600 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.gate .key code{display:block;margin-top:8px;font:13px var(--mono);letter-spacing:.06em;word-break:break-all;color:var(--ink)}

/* ---- Try a photo */
.site-pick{display:block;margin:0 0 14px;font:600 12px var(--sans);color:var(--secondary)}
.site-pick select{margin-left:8px}
.drop{display:block;border:2px dashed var(--border);border-radius:6px;background:var(--panel);padding:34px;text-align:center;color:var(--secondary);cursor:pointer;margin-bottom:24px}
.drop.over{border-color:var(--em);background:var(--em-soft)}
.drop b{display:block;font-family:var(--serif);font-size:24px;color:var(--ink);margin-bottom:4px}
.results{margin-top:6px}
tr.rc{cursor:pointer}
tr.rc.pending td{color:var(--secondary)}
tr.rc .spin{font:500 .6rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--secondary)}
tr.rc .tp{display:flex;justify-content:space-between;gap:16px;margin-bottom:7px}
tr.rc .tp b{font-weight:500;color:var(--ink);text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:13px}
tr.rc .bar{height:6px;border-radius:3px;background:var(--tint);border:1px solid var(--border);overflow:hidden}
tr.rc .bar i{display:block;height:100%;width:0;background:var(--em);transition:width .25s linear}

/* ---- photo with boxes, lightbox, popup */
.ph{position:relative;display:inline-block;max-width:100%;cursor:zoom-in;line-height:0}
.ph img{display:block;max-width:100%;max-height:62vh;border:1px solid var(--border);border-radius:4px;background:#111}
.ph svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ph rect.bx{fill:none;stroke:#0CBD96;stroke-width:2.5}
.ph.th{width:46px;height:46px}
.ph.th img{width:46px;height:46px;object-fit:cover;border-radius:3px}
.ph.th svg{display:none}
.ph.big img{max-height:70vh}
#mbox .ph.big img{max-height:48vh}
#light{position:fixed;inset:0;z-index:90;background:rgba(17,20,22,.88);display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;padding:28px;cursor:zoom-out}
#light.on{display:flex}
#light .ph{cursor:zoom-out}
#light .ph img{max-width:94vw;max-height:86vh;border:0;box-shadow:0 18px 60px rgba(0,0,0,.5)}
#light .cap{font:500 .68rem var(--mono);letter-spacing:.04em;color:#C8D0D4}
#modal{position:fixed;inset:0;background:rgba(33,37,41,.5);display:none;align-items:center;justify-content:center;z-index:60;padding:26px}
#modal.on{display:flex}
#modal .mbox{background:var(--panel);border:1px solid var(--border);border-radius:6px;max-width:1160px;width:100%;max-height:94vh;overflow:auto;box-shadow:0 24px 70px rgba(33,37,41,.25)}
.pop-top{display:flex;align-items:center;gap:12px;padding:13px 22px;border-bottom:1px solid var(--border)}
.pop-top h3{font:600 19px/1.2 var(--mono);letter-spacing:.01em;margin:0}
.pop-top .sp{flex:1}
.pop-body{padding:16px 22px 20px}
.pop-foot{padding:0 22px 18px;font:600 .6rem var(--mono);letter-spacing:.07em;text-transform:uppercase}
.inline-pop{border:1px solid var(--border);border-radius:6px;background:var(--panel);margin-top:18px}

/* ---- flask (demo task 02, v4.2 per-image results) */
.fv-scroll{overflow:auto;border:1px solid var(--border);background:var(--panel)}
table.fv{width:100%;border-collapse:collapse;background:var(--panel);font-size:12.5px;table-layout:fixed}
table.fv th{position:sticky;top:0;z-index:2;background:var(--tint);font:600 .54rem/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--secondary);text-align:left;padding:10px 8px;border-bottom:1px solid var(--border);white-space:nowrap}
table.fv td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
table.fv tr.rc{cursor:pointer}
table.fv tr.rc:hover>td{background:#F4FBF8}
table.fv .ph.th img{border:1px solid var(--border);background:var(--tint)}
.fv-id{font:500 11.5px var(--mono);color:var(--ink);max-width:236px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv-id a,.c-meta .pid a,table.cy .pid a,table.tb .pid a{color:inherit;text-decoration:none}
.fv-tags{display:flex;gap:6px;margin-top:4px;align-items:center;min-width:0}
.fv-tag{font:600 8.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:0 6px;border-radius:3px;white-space:nowrap}
.fv-tag.a{background:#E1F2F4;color:#157a83}.fv-tag.d{background:#F1EAF4;color:#6b4a7a}
.rmeta{display:block;font:500 9.5px var(--mono);color:#9aa4aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:236px;margin-top:2px}
.rmeta a{color:inherit}
.calls-set{margin:0 0 26px}
/* cylinder (demo task 06, cylinder_tab.js rowHtml) */
.cy-scroll{overflow:auto;border:1px solid var(--border);background:var(--panel)}
table.cy{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--panel)}
table.cy thead th{position:sticky;top:0;z-index:2;background:var(--tint);font:500 .62rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--secondary);text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
table.cy th.num{text-align:right}
table.cy td{padding:8px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.cy tr.rc{cursor:pointer}
table.cy tr.rc:hover td{background:var(--em-soft)}
table.cy .ph.th,table.cy .ph.th img{width:84px;height:42px}
table.cy .ph.th img{object-fit:cover;border:1px solid var(--border);border-radius:3px;background:#1E2529}
table.cy .pid{font:500 11.5px var(--mono);color:var(--secondary)}
table.cy td.rd{min-width:170px;text-align:right;background:#E7F6F0}
table.cy td.rd.miss{background:#F6D6D1;box-shadow:inset 0 0 0 1.5px rgba(184,64,47,.4)}
table.cy tr.rc:hover td.rd{box-shadow:inset 0 0 0 2px var(--em)}
table.cy td.rd .pv{font:700 13.5px var(--mono);color:#0a7f57}
table.cy td.rd.miss .pv{color:#a5331f}
table.cy td.rd .ex{display:block;font:500 9px var(--mono);letter-spacing:.03em;text-transform:uppercase;color:#7b8a84;margin-top:2px}
table.cy td.rd .why{display:block;white-space:nowrap;font:600 10px var(--sans,Manrope);color:#a5331f;margin-top:3px}
/* tablet (demo task 04, tRender) */
.tb-scroll{overflow:auto;border:1px solid var(--border)}
table.tb{border:none}
table.tb tr.rc{cursor:pointer}
table.tb tr.rc:hover{background:var(--em-soft)}
table.tb .pid{font:500 12px var(--mono)}
table.tb td.t-mod{text-align:center}
table.tb td.t-mod b{font-weight:700}
.fv-stk{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.fv-p{font:600 .56rem/1.6 var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:0 8px;border-radius:3px;white-space:nowrap}
.fv-p.p{background:var(--em-soft);color:var(--em-ink)}
.fv-p.f{background:var(--alert-soft);color:var(--alert)}
.fv-p.lean{background:#F1F3F5;color:#7b858d}
.fv-p.n{background:#F0F3F4;color:#8b959b}
.fv-cat{font:600 10.5px/1.7 var(--sans);padding:0 7px;border-radius:3px;white-space:nowrap}
.fv-cat.above{color:#9A3412;background:#FCE7DA}.fv-cat.s-above{color:#8a6d1f;background:#FBF3DC}.fv-cat.within{color:#078A6C;background:#E5F7F1}
.fv-cat.s-below{color:#157a83;background:#E1F2F4}.fv-cat.below{color:#445089;background:#EAEDF9}.fv-cat.na{color:#8b959b;background:#F0F3F4}
.fv-same{font:500 11px var(--mono);color:#b3bcc1}
.fv-g{display:flex;align-items:center;gap:6px}
.fv-g svg{display:block;flex:0 0 auto}
.fv-g span{font:600 10.5px var(--mono);color:var(--ink);white-space:nowrap}
.fv-r{font:600 .54rem/1.7 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:0 8px;border-radius:10px;white-space:nowrap;display:inline-block}
.fv-r.hm{background:#E4EAF5;color:#3d5a8a;box-shadow:inset 0 0 0 1px #c6d2e8}
.fvp-meta{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--border);background:var(--tint)}
.fvp-meta>div{padding:10px 22px 11px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:5px}
.fvp-meta .k{font:600 .52rem/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--secondary)}
.fvp-meta .v{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--secondary);white-space:nowrap}
.fvp-ims{display:grid;grid-template-columns:190px minmax(0,1fr) minmax(0,1fr);gap:14px;padding:16px 22px 0}
.fvp-ims.lone{grid-template-columns:190px}
.fvp-steps{margin:16px 22px 0;border:1px solid var(--border);border-radius:5px}
.fvp-steps>summary{padding:9px 16px;cursor:pointer;font:600 .56rem/1.45 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--secondary)}
.fvp-steps .trace{border-bottom:0;padding-top:4px}
.fvp-ims.two{grid-template-columns:190px minmax(0,1fr);padding:0 0 4px}
.fv-fig{margin:0;min-width:0}
.fv-fig .im{width:100%;height:232px;border:1px solid var(--border);border-radius:4px;background:#111;overflow:hidden;position:relative}
.fv-fig figcaption{font:500 .6rem/1.5 var(--mono);letter-spacing:.02em;color:var(--secondary);margin-top:6px}
.fv-fig .ph{display:block;width:100%;height:100%}
.fv-fig .ph img{width:100%;height:100%;max-height:none;object-fit:contain;border:0;border-radius:0;background:#111}
.ph.det{display:flex;flex-direction:column;width:100%;height:100%;background:#111;line-height:1.4}
.ph.det>svg{position:static;flex:1 1 0;min-height:0;width:100%;height:auto}
.ph.det .ohara-legend{flex:none}
.ph .ohara-legend svg{position:static;width:22px;height:12px;flex:none}
#light .ph.det{width:min(94vw,1100px);height:86vh}
.fvp-band .lg{margin-top:6px;font:500 9px/1.5 var(--mono);color:var(--secondary);align-self:stretch;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.lgm{color:#2878FF}
.fvp-mt .v small{display:block;font-size:11.5px;color:var(--secondary);margin-top:2px;line-height:1.4}
.dck-wrap{margin-top:18px}
.dck{border:1px solid var(--border);border-radius:5px;background:var(--panel);margin-top:8px}
.dck>summary{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;list-style:none}
.dck>summary::-webkit-details-marker{display:none}
.dck>summary .nm{font:600 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--secondary);min-width:150px}
.dck>summary .vd{font:700 11px var(--mono);letter-spacing:.03em}
.dck>summary .vd.ok{color:#0a7f57}.dck>summary .vd.bad{color:#b8402f}
.dck[open]>summary{border-bottom:1px solid var(--border)}
.dck>.fig{margin:12px 14px 6px}
.dck-diag{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;align-items:center;background:var(--tint);border:1px solid var(--border);border-radius:4px;padding:12px 18px;margin:12px 14px 0}
.dck-diag.one{grid-template-columns:1fr;gap:10px}
.dck-diag img{width:100%;height:auto;display:block}
.dck-diag p{font-size:14px;color:var(--ink);line-height:1.55}
.dck-im{height:300px;margin:0 14px;border:1px solid var(--border);border-radius:4px;overflow:hidden}
.dck-key{display:flex;gap:16px;margin:8px 14px 0;font:500 .58rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--secondary)}
.dck-key span{display:inline-flex;align-items:center;gap:6px}.dck-key i{width:12px;height:12px;border-radius:2px;display:inline-block;border:2px solid}
.dck-key i.ok{border-color:#0CBD96}.dck-key i.bad{border-color:#C4453A;background:rgba(196,69,58,.18)}.dck-key i.unk{border-color:#C2570E}
.dck>:last-child:not(summary){margin-bottom:14px}
.fvp-body{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:14px;padding:16px 22px 0;align-items:stretch}
.fvp-body.one{grid-template-columns:1fr}
.fvp-mt{border:1px solid var(--border);border-radius:5px;display:flex;flex-direction:column;overflow:hidden}
.fvp-mt .r{flex:1;display:grid;grid-template-columns:16px 196px minmax(0,1fr);gap:12px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--border)}
.fvp-mt .r:last-child{border-bottom:0}
.fvp-mt .k{font:600 .56rem/1.45 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--secondary)}
.fvp-mt .v{font-size:13.5px;line-height:1.4;color:var(--ink)}
.fvp-mt .v b{font-weight:700}
.fvp-mt .r.dec.ap{background:#F3FBF8}.fvp-mt .r.dec.af{background:#FDF4F3}.fvp-mt .r.dec.hm{background:#F3F6FB}
.fvp-mt .dt.ap{color:#078A6C}.fvp-mt .dt.af{color:#C4453A}.fvp-mt .dt.hm{color:#3d5a8a}
.fvp-mk{display:block;width:16px}
.fvp-band{border:1px solid var(--border);border-radius:5px;padding:10px 10px 8px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:#FBFCFC}
.fvp-band .fig{margin:0;font-size:.54rem;align-self:flex-start}

/* ---- deck (demo task 03, per-position checklist) */
.dc-legend{font-family:var(--mono);font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;color:var(--secondary);margin:0 0 12px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.dc-legend span{display:inline-flex;align-items:center;gap:7px}
.dc-legend i{width:15px;height:15px;border-radius:3px;border:1px solid var(--border);display:inline-block}
.dc-legend i.ok{background:#E7F6F0}.dc-legend i.miss{background:#F6D6D1;box-shadow:inset 0 0 0 1.5px rgba(184,64,47,.4)}.dc-legend i.na{background:#F4F6F7}
.dc-scroll{overflow:auto;border:1px solid var(--border)}
table.dc{width:100%;border-collapse:collapse;background:var(--panel);font-size:12.5px;min-width:1020px}
table.dc thead th{position:sticky;top:0;z-index:2;background:var(--tint);font-family:var(--mono);font-size:.56rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--secondary);padding:10px 8px;border-bottom:1px solid var(--border);text-align:center;white-space:nowrap}
table.dc thead th.lft{text-align:left}
table.dc td{border-bottom:1px solid var(--border);padding:0;vertical-align:middle}
table.dc tr.rc:hover .c-thumb,table.dc tr.rc:hover .c-meta{background:var(--em-soft)}
table.dc .c-thumb{padding:6px 8px;width:62px}
table.dc .c-meta{padding:6px 10px;max-width:190px}
.c-meta .pid{font:600 11.5px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.c-meta .plw{font-size:11px;color:var(--secondary)}
.dc-cell{padding:6px 8px;text-align:center;line-height:1.22;border-left:1px solid var(--grid)}
.dc-cell .pv{font-weight:600;font-size:12px;display:block;margin-top:1px}
.dc-cell .ex{font:500 8.5px var(--mono);letter-spacing:.03em;text-transform:uppercase;color:#9aa4aa;display:block}
.dc-cell.na{background:#F4F6F7}
.dc-cell.na .pv{color:#c4ccd1;font-weight:500}
.dc-cell.miss{background:#F6D6D1 !important;box-shadow:inset 0 0 0 1.5px rgba(184,64,47,.4)}
.dc-cell.miss .pv{color:#a5331f}
.dc-cell.miss .ex{color:#cc8579;margin-top:2px}
.dc-overall{text-align:center;padding:6px 10px;border-left:1px solid var(--grid)}
.dc-ok{color:#0a7f57;font-weight:700;font-size:15px}
.dc-rev{color:#b8402f;font-weight:600;font-size:9.5px;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase}
.dc-flag{color:#C2570E;font-weight:600;font-size:9.5px;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase}
.f-a1.st-correct{background:#E7F6F0;color:#0a7f57}.f-a1.st-rotated{background:#C6EADD;color:#075e46}
.f-cap.st-uncapped{background:#FBF2D8;color:#8a6d1f}.f-cap.st-capped{background:#F1DFA8;color:#6b520f}
.f-carrier.st-correct{background:#E1F2F4;color:#157a83}.f-carrier.st-rotated{background:#BFE3E8;color:#0e565d}
.f-lid.st-none{background:#ECEFF3;color:#586574}.f-lid.st-present{background:#D6DEE9;color:#3a4a5e}
.f-seal.st-none{background:#F1EAF4;color:#6b4a7a}.f-seal.st-present{background:#E0D0EA;color:#4d3660}
.f-tips.st-seated{background:#EFF3DE;color:#5f6b1f}.f-tips.st-raised{background:#DEE7BE;color:#454f0f}
.f-askew.st-seated{background:#EAEDF9;color:#445089}.f-askew.st-askew{background:#D2D9F1;color:#2f3a70}
.f-rack.st-correct{background:#F7EFE6;color:#8a5a2b}.f-rack.st-fault{background:#EBD8C3;color:#6b4220}
.dcm-status{font:700 12px var(--mono);margin:0 0 10px}
.dcm-status.pass{color:#0a7f57}.dcm-status.fail{color:#b8402f}.dcm-status.review{color:#C2570E}
.dcm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(202px,1fr));gap:10px;margin-top:16px}
.dcm-card{border:1px solid var(--border);border-left-width:3px;border-radius:5px;padding:11px 13px;background:var(--panel)}
.dcm-card.na{background:#FBFCFC;border-left-color:#D9CBA4}
.dcm-card.miss{border-color:var(--alert);background:var(--alert-soft)}
.dcm-card.k-a1{border-left-color:#C6EADD}.dcm-card.k-askew{border-left-color:#D2D9F1}.dcm-card.k-lid{border-left-color:#D6DEE9}.dcm-card.k-seal{border-left-color:#E0D0EA}
.dcm-card.k-cap{border-left-color:#F1DFA8}.dcm-card.k-carrier{border-left-color:#BFE3E8}.dcm-card.k-tips{border-left-color:#DEE7BE}.dcm-card.k-rack{border-left-color:#EBD8C3}
.dcm-card .nm{font:600 .58rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--secondary)}
.dcm-card .pair{display:flex;gap:14px;margin-top:9px;font-family:var(--mono)}
.dcm-card .pair small{display:block;font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:#9aa4aa;white-space:nowrap}
.dcm-card .what{font-size:12px;color:var(--secondary);margin-top:8px;line-height:1.45}
.dcm-chip{display:inline-block;padding:2px 8px;border-radius:4px;font:700 13px var(--mono);white-space:nowrap}
.dcm-chip.na{background:#F0F3F4;color:#8b959b}
.dcm-chip.miss{background:#F6D6D1;color:#a5331f}
.dcm-card .vd{margin-top:9px;font:700 11px var(--mono);letter-spacing:.03em}
.vd.ok{color:#0a7f57}.vd.bad{color:#b8402f}.vd.na{color:#9aa4aa}

/* ---- tablet (demo task 04) */
.ncchip{display:inline-block;font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.04em;color:#66707A;background:#EFF3F4;border:1px solid #DDE4E6;border-radius:10px;padding:1px 8px;cursor:help}
.t-count{font-family:var(--serif);font-size:22px;font-weight:600}
.t-read{display:flex;gap:30px;margin-top:16px;font-family:var(--mono);flex-wrap:wrap}
.t-read small{display:block;font-size:11px;color:#66707A;letter-spacing:.06em;text-transform:uppercase}
.t-read b{font-size:24px;font-weight:600}
.t-read b.ok{color:#0a7f57}.t-read b.nc{color:#66707A}

/* ---- docs: Stripe style reference: sticky contents, prose left, code and a real response right */
.docs{display:grid;grid-template-columns:190px 1fr;gap:36px;align-items:start}
.dtoc{position:sticky;top:20px;display:flex;flex-direction:column;gap:1px}
.dtoc .ngroup{padding:14px 8px 5px}
.dtoc a{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:5px;color:var(--secondary);font-size:13.5px;text-decoration:none}
.dtoc a:hover{background:var(--tint);color:var(--ink)}
.verb{font:700 .54rem/1 var(--mono);letter-spacing:.06em;color:var(--em-ink);background:var(--em-soft);padding:3px 5px;border-radius:3px}
.dsec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;padding:34px 0;border-top:1px solid var(--border);scroll-margin-top:16px}
.dsec:first-child{border-top:0;padding-top:4px}
.dsec.wide{grid-template-columns:1fr}
.dprose h2{font-size:28px;margin-bottom:8px}
.dprose h4{font:700 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--secondary);margin:22px 0 8px}
.dprose p{color:var(--secondary);margin-bottom:14px;font-size:15px}
.dprose code,.dnote code{font-family:var(--mono);font-size:.78rem;background:var(--tint);padding:1px 5px;border-radius:3px;color:var(--ink)}
.dnote{font-size:13.5px !important}
.dplan{border-left:3px solid var(--warn);padding:0 0 2px 14px;margin-top:22px}
.dplan h4{margin-top:4px !important}
.ep{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px}
.ep code{font-size:.85rem !important}
table.params{width:100%;border-collapse:collapse;font-size:13.5px}
table.params td{padding:10px 0;border-bottom:1px solid var(--border);vertical-align:top}
table.params td:first-child{width:42%;padding-right:14px;white-space:nowrap}
table.params .req{margin-left:7px;font:600 .54rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--warn)}
code.dec{color:var(--em-ink) !important}
.dcode{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px}
.card{background:#1d2125;border-radius:8px;overflow:hidden;border:1px solid #2b3238}
.chead{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #2b3238;font:600 .6rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#9aa6ae}
.chead .ok{color:#3FD8B2;margin-left:6px}
.ltabs{display:flex;gap:4px}
.lt,.cp{font:600 .6rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;border:0;background:transparent;color:#9aa6ae;padding:6px 9px;border-radius:4px;cursor:pointer}
.lt.on{background:#2b3238;color:#fff}
.lt:hover,.cp:hover{color:#fff}
.card pre.code{margin:0;border:0;border-radius:0;background:transparent;font-size:12px;max-height:440px}
.card pre.json{color:#cfe8df}
.dex{grid-column:1/-1;margin-top:6px}
.dex h4{font:700 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--secondary);margin:0 0 12px}
.dex-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
.dex-media{position:relative;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#000}
.dex-media img{display:block;width:100%;height:auto}
.dex-media svg{position:absolute;inset:0;width:100%;height:100%}
.dex figcaption{font-size:12.5px;color:var(--secondary);margin-top:8px}
.dex-dec{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:var(--panel);margin-bottom:12px}
.dex-dec span{font:600 .58rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--secondary)}
.dex-dec code{font-family:var(--mono);font-size:.85rem;background:var(--tint);padding:3px 8px;border-radius:4px}
ol.dsteps{list-style:none;counter-reset:s;border:1px solid var(--border);border-radius:8px;background:var(--panel)}
ol.dsteps li{counter-increment:s;display:flex;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--border);font-size:13.5px}
ol.dsteps li:last-child{border-bottom:0}
ol.dsteps li span::before{content:counter(s) ". ";color:var(--secondary);font-family:var(--mono);font-size:.72rem}
ol.dsteps em{font-style:normal;font:600 .6rem/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--em-ink);background:var(--em-soft);padding:1px 8px;border-radius:999px;white-space:nowrap}
ol.dsteps em.o-fail,ol.dsteps em.o-not_found{color:var(--alert);background:var(--alert-soft)}
ol.dsteps em.o-not_applicable{color:var(--secondary);background:var(--tint)}
.dex-dec span{color:var(--ink)}
code.bad{color:var(--alert) !important}
.dex-media{max-height:520px}
.dex-media img{max-height:520px;object-fit:contain}
/* step by step trace in a call record: input, one card per step (a crop at its box), output */
.trace{padding:16px 22px 18px;border-bottom:1px solid var(--border)}
.tr-row{display:flex;flex-wrap:nowrap;align-items:stretch;gap:6px}
.tr-card{flex:1 1 0;min-width:0;border:1px solid var(--border);border-radius:5px;background:var(--panel);padding:9px 10px;display:flex;flex-direction:column;gap:6px}
.tr-card.in,.tr-card.out{background:var(--tint)}
.tr-n{font:500 .56rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--secondary)}
.tr-nm{font-size:12.5px;font-weight:600;line-height:1.3}
.tr-im{height:104px;background:#111;border-radius:3px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tr-im img,.tr-im svg{max-width:100%;max-height:100%;display:block}
.tr-im svg{width:100%;height:100%}
.tr-bx{fill:none;stroke:#0CBD96;stroke-width:2}
.tr-card .pill{white-space:normal;align-self:flex-start;line-height:1.4}
.tr-card dl{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;font-size:11.5px;margin:0}
.tr-card dt{color:var(--secondary)}.tr-card dd{margin:0;font-weight:600}
.tr-key{font-size:13px;font-weight:600;line-height:1.35}
.tr-ar{flex:none;align-self:center;color:var(--secondary);font-size:15px}
table.events tr[data-href]{cursor:pointer}
.dex-pop{border:1px solid var(--border);border-radius:8px;background:var(--panel);overflow:hidden;padding-bottom:16px}
.dsec:has(.dex) .dcode{position:static}
.fv-key{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--secondary);margin:2px 0 4px}
.fv-key span{display:flex;align-items:center;gap:8px}

/* CSP style-src 'self' blocks inline style=: the widths and grid columns as classes (QA 10-29) */
.stats.cols-1{grid-template-columns:repeat(1,1fr)}.stats.cols-2{grid-template-columns:repeat(2,1fr)}.stats.cols-3{grid-template-columns:repeat(3,1fr)}.stats.cols-4{grid-template-columns:repeat(4,1fr)}.stats.cols-5{grid-template-columns:repeat(5,1fr)}.stats.cols-6{grid-template-columns:repeat(6,1fr)}.stats.cols-7{grid-template-columns:repeat(7,1fr)}.stats.cols-8{grid-template-columns:repeat(8,1fr)}.stats.cols-9{grid-template-columns:repeat(9,1fr)}
col.w62{width:62px}col.w250{width:250px}col.w190{width:190px}col.w210{width:210px}col.w130{width:130px}