/* Embedded CTF fonts keep this HTML portable. */
@font-face{font-family:"ALTMistral";font-weight:400;font-display:swap;src:url("/assets/ALTMistral-Regular.woff2") format("woff2");}
@font-face{font-family:"ALTMistral";font-weight:500;font-display:swap;src:url("/assets/ALTMistral-Medium.woff2") format("woff2");}
@font-face{font-family:"Space Mono";font-weight:400;font-display:swap;src:url("/assets/SpaceMono-Regular.woff2") format("woff2");}
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url("/assets/Inter-VariableFont.woff2") format("woff2-variations");}
/* mistral.ai site tokens (light), scoped to the embed */
.re{
--text-primary:#18181b; --text-secondary:#27272a; --text-tertiary:#6d6d78; --text-faint:#a1a1aa;
--surface-1:#fbfbf8; --surface-2:#f5f4ef; --surface-3:#ebe9e0; --white:#fff;
--border:#e4e3de; --border-2:#c9c9c4;
--action:#09090b; --action-hover:#18181b; --action-text:#fafafa;
--orange:#FA500F; --hl:#a77201; --red:#e51300; --green:#318e68;
/* step colours = the pixels of the Mistral logo */
--s0:#FFAF01; --s1:#FF8204; --s2:#FA500F; --s3:#E61300;
--s4:var(--green); /* Detect & report = the model delivering: matches the green output steps */
--font-mistral:"ALTMistral",ui-sans-serif,system-ui,sans-serif;
--font-inter:"Inter",ui-sans-serif,system-ui,sans-serif;
--font-mono:"Space Mono",ui-monospace,Menlo,monospace;
position:relative; width:min(880px, calc(100% - 32px)); margin:0 auto; padding:24px 0;
color:var(--text-primary); font-family:var(--font-inter); font-size:15px; line-height:1.5; letter-spacing:-.01em;
-webkit-font-smoothing:antialiased;
}
.re *{box-sizing:border-box;margin:0;}
body{margin:0;background:#fbfbf8;} /* demo page only */
.mono{font-family:var(--font-mono);font-size:11px;line-height:16px;text-transform:uppercase;letter-spacing:0;}
/* The header uses the CTF card's 20px outer radius and 12px inset panel. */
.triage-frame{border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--surface-2);}
.re-intro{margin:8px 8px 0;padding:12px;border:1px solid color-mix(in srgb,var(--border) 50%,transparent);
border-radius:12px;background:var(--white);display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.re-intro-text{min-width:0;}
.re-intro .btn{flex:none;min-height:40px;border-radius:6px;} /* top right, inside the header's 12px padding */
/* header */
.tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px;}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 6px;background:var(--surface-3);color:var(--text-secondary);}
.tag.brand{background:var(--orange);color:#fff;}
.re-intro h2{font-family:var(--font-mistral);font-weight:500;font-size:16px;line-height:1.25;letter-spacing:normal;margin-bottom:9px;}
.re-intro .lede{color:var(--text-primary);opacity:.75;font-size:16px;line-height:24px;letter-spacing:-.01em;max-width:460px;text-wrap:pretty;}
/* pane */
.pane{border-top:1px solid var(--border);background:var(--surface-1);}
.bar{display:flex;align-items:stretch;border-bottom:1px solid var(--border);background:var(--surface-1);}
/* info button (pixel "i") + sample hover card */
.info{appearance:none;border:none;background:none;padding:0;margin-left:-4px;cursor:pointer;width:20px;height:20px;color:var(--text-tertiary);display:grid;place-items:center;}
.info:hover,.info:focus-visible,.info[aria-expanded="true"]{color:var(--orange);outline:none;}
.info svg{width:16px;height:16px;display:block;}
.card{position:absolute;top:0;left:0;z-index:30;width:340px;background:var(--action);color:var(--action-text);padding:14px 16px 12px;
opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .12s,transform .12s;}
.card.show{opacity:1;transform:none;pointer-events:auto;}
.card h4{font-family:var(--font-mistral);font-weight:500;font-size:18px;line-height:22px;letter-spacing:0;}
.card .sub{color:#a1a1aa;margin:2px 0 10px;}
.card .truth{display:flex;flex-direction:column;gap:2px;margin:0 0 12px;padding:6px 8px;border-left:2px solid var(--orange);background:#18181b;
font-family:var(--font-mistral);font-weight:500;font-size:14px;line-height:18px;letter-spacing:0;}
.card .truth .mono{color:var(--orange);font-size:10px;}
.card dl{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:5px;margin:0 0 10px;}
.card dt{color:#a1a1aa;}
.card dd{text-transform:none;margin:0;font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:0;color:var(--action-text);overflow-wrap:anywhere;}
.card .sec{color:#a1a1aa;border-top:1px solid #31313a;padding-top:8px;margin-bottom:5px;}
.card ul{list-style:none;padding:0;margin:0 0 10px;font-family:var(--font-mono);font-size:11px;line-height:17px;letter-spacing:0;}
.card li{display:flex;justify-content:space-between;gap:8px;}
.card li .r{color:#ff6529;} .card li .w{color:#fec63a;}
.card li em{font-style:normal;color:#a1a1aa;font-size:10px;text-transform:uppercase;}
.card .str{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:0;color:#fec63a;word-break:break-all;}
.card .note{font-family:var(--font-mono);font-size:10.5px;line-height:15px;letter-spacing:0;color:#a1a1aa;margin-top:2px;}
.card .src{color:#6d6d78;border-top:1px solid #31313a;padding-top:8px;margin-top:10px;}
.bar .cell{border-left:1px solid var(--border);color:var(--text-tertiary);gap:6px;white-space:nowrap;}
.bar .cell b{font-weight:400;color:var(--text-primary);font-variant-numeric:tabular-nums;}
/* mistral.ai CTA */
.btn{appearance:none;border:none;cursor:pointer;position:relative;overflow:hidden;min-height:48px;padding:0 16px !important;display:flex;align-items:center;
gap:8px;min-width:128px;justify-content:space-between;background:var(--action);color:var(--action-text);
font-family:var(--font-mistral);font-weight:500;font-size:1rem;line-height:1.5rem;letter-spacing:.01em;transition:background-color .15s;}
.btn:hover{background:var(--action-hover);}
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;}
.btn .ico{display:inline-block;width:20px;flex:0 0 20px;transition:transform .3s cubic-bezier(.4,0,.2,1);}
.btn .ico svg{display:block;width:100%;height:auto;}
.btn .ico.in{position:absolute;left:12px;transform:translateX(-40px);}
.btn .lbl{transition:transform .3s cubic-bezier(.4,0,.2,1);}
.btn:hover .ico.in{transform:none;transition-delay:.05s;}
.btn:hover .lbl{transform:translateX(24px);}
.btn:hover .ico.out{transform:translateX(40px);}
/* turn strip: one pixel per turn, coloured by phase */
.turns{flex:1;min-width:0;display:flex;}
.strip{flex:1;display:flex;gap:1px;min-height:20px;} /* squares fill the whole bar */
.strip i{flex:1;background:var(--surface-3);position:relative;cursor:pointer;}
/* highlight = dim everything else (hovering a square, or a step in Analysis) */
.strip i{transition:opacity .15s ease;}
.strip:hover i:not(:hover),.strip.peeking i:not(.peek){opacity:.3;}
/* turn card (hover a turn pixel) */
.tcard{position:absolute;top:0;left:0;z-index:25;width:340px;background:var(--action);color:var(--action-text);padding:12px 14px 10px;
opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .12s,transform .12s;}
.tcard.show{opacity:1;transform:none;}
.tcard .hd{display:flex;justify-content:space-between;gap:8px;color:#a1a1aa;margin-bottom:8px;}
.tcard .hd b{font-weight:400;color:var(--action-text);}
.tcard .hd .km{color:var(--orange);}
.tcard .call{padding:6px 0;border-top:1px solid #31313a;}
.tcard .nm{font-family:var(--font-mono);font-size:12px;line-height:16px;letter-spacing:0;color:var(--action-text);}
.tcard .nm span{color:#a1a1aa;}
.tcard .rs{font-family:var(--font-mono);font-size:11px;line-height:15px;letter-spacing:0;color:#44ba82;margin-top:2px;word-break:break-word;}
.tcard .rs.err{color:#ff6529;}
.tcard .co-txt{font-family:var(--font-mistral);font-weight:500;font-size:14px;line-height:19px;padding:8px 0;border-top:1px solid #31313a;}
.tcard .ft{color:#6d6d78;border-top:1px solid #31313a;padding-top:6px;margin-top:2px;}
.re.seeking *,.re.seeking *::before,.re.seeking *::after,.re.measuring .f,.re.measuring .f::before{animation:none!important;transition:none!important;}
.strip i.done{background:var(--c);}
.strip i.cur::before{content:"";position:absolute;inset:0;background:var(--c);opacity:.5;}
.playing .strip i.cur::before{animation:half 1s steps(2) infinite;}
@keyframes half{50%{opacity:.15;}}
.legend{display:flex;gap:16px;padding:12px 16px 8px;color:var(--text-faint);flex-wrap:wrap;}
.legend span{display:inline-flex;align-items:center;gap:6px;transition:color .2s;}
.legend span::before{content:"";width:8px;height:8px;background:var(--c);opacity:.35;}
.legend span.on{color:var(--text-primary);}
.legend span.on::before,.legend span.past::before{opacity:1;}
.legend span.past{color:var(--text-tertiary);}
/* key-moment markers above the strip */
/* callouts: a bottom border on the turn square where each callout message starts */
.strip i.co::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--border-2);transition:height .2s,background-color .2s;}
.strip i.co.key::after{height:3px;background:var(--text-faint);} /* key moment / takeaway, not reached yet */
.strip i.co.past::after{background:var(--text-tertiary);}
.strip i.co.key.past::after{background:var(--text-primary);} /* dark ink reads on every phase colour */
.strip i.co.on::after{height:4px;background:var(--text-primary);}
/* caption bar: phase explainer, turns into a "key moment" callout */
/* sits over the top of the agent log, where older lines are already faded out */
.moment{position:absolute;top:0;left:0;right:6px;z-index:4;display:flex;align-items:flex-start;gap:10px;padding:8px 16px 0;box-sizing:border-box;background:transparent;}
.moment .sw{display:none;}
/* colour square hangs on the first line; wrapped lines stay indented */
.moment .txt{position:relative;padding-left:18px;}
.moment .txt::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;background:var(--c,var(--border-2));transition:background-color .3s;}
.moment .txt{transition:opacity .24s ease,transform .24s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform;font-family:var(--font-mistral);font-weight:500;font-size:15px;line-height:20px;letter-spacing:-.01em;color:var(--text-secondary);
flex:1;min-width:0;}
.moment .txt code{font-family:var(--font-mono);font-size:12px;letter-spacing:0;background:var(--surface-3);padding:0 4px;}
.moment .txt.out{opacity:0;transform:translateY(-8px);}
.moment .txt.pre{opacity:0;transform:translateY(8px);transition:none;}
.moment.is-key .txt{color:var(--text-primary);}
.ln.y .x{color:var(--text-secondary);padding-left:14px;white-space:pre;overflow:hidden;text-overflow:ellipsis;}
.ln.y .kw{color:var(--orange);} .ln.y .sv{color:var(--hl);} .ln.y .hx{color:var(--green);}
/* body: log | findings */
.body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);height:413px;} /* fallback; fit() sets the real height */
.col{display:flex;flex-direction:column;min-height:0;}
.col + .col{border-left:1px solid var(--border);}
.colh{display:flex;justify-content:space-between;gap:8px;padding:8px 16px 6px;border-bottom:1px solid var(--border);color:var(--text-primary);}
.colh span{color:var(--text-faint);}
/* agent log */
.log{flex:1;min-height:0;overflow-y:auto;padding:calc(var(--capmax) + 4px) 0 14px;background:var(--white);font-family:var(--font-mono);font-size:11.5px;line-height:1.6;letter-spacing:0;}
/* progressive dim at the top of the log: older lines fade out as they scroll up */
.logcol{position:relative;}
/* solid behind the callout, then fading into the log */
.logcol{--caph:32px;--capmax:52px;} /* current callout height / tallest callout (set by fit) */
.logcol::before{content:"";position:absolute;left:0;right:6px;top:0;height:calc(var(--caph) + 48px);z-index:3;pointer-events:none;
background:linear-gradient(to bottom,var(--white) 0,var(--white) var(--caph),rgba(255,255,255,.85) calc(var(--caph) + 14px),rgba(255,255,255,0) 100%);}
.log:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;}
.log::-webkit-scrollbar{width:6px;}.log::-webkit-scrollbar-thumb{background:var(--border-2);}
.ln{display:grid;grid-template-columns:58px minmax(0,1fr);padding-right:14px;animation:lin .5s cubic-bezier(.2,.7,.2,1) both;}
.ln.static{animation:none;}
@keyframes lin{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.ln .g{color:var(--text-faint);text-align:right;padding-right:12px;white-space:nowrap;}
.ln .x{white-space:pre-wrap;word-break:break-word;}
.ln.c .x{color:var(--text-primary);}
.ln.c .x::before{content:"❯ ";color:var(--orange);}
.ln.c .a{color:var(--text-tertiary);}
.ln.o .x{color:var(--text-tertiary);padding-left:14px;}
.ln.e .x{color:var(--red);padding-left:14px;}
.ln.s .x{color:var(--text-faint);padding-left:14px;}
.ln.s .x::before{content:"⋯ ";color:var(--text-faint);}
.ln .h{color:var(--hl);} .ln .k{color:var(--red);} .ln .ok{color:var(--green);}
.ln.q{margin:6px 0;}
.ln.q .x{font-family:var(--font-inter);font-size:13.5px;line-height:1.45;letter-spacing:-.01em;color:var(--text-primary);
background:var(--surface-2);border-left:2px solid var(--orange);padding:6px 10px;}
.ln.q .x code{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0;background:var(--surface-3);padding:0 4px;}
.caret{display:inline-block;width:7px;height:13px;background:var(--orange);vertical-align:-2px;margin-left:2px;animation:blk 1.1s steps(1) infinite;}
@keyframes blk{0%,60%{opacity:1;}61%,100%{opacity:0;}}
/* findings */
.finds{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;} /* still scrolls (wheel/touch), no visible bar */
.finds::-webkit-scrollbar{display:none;}
/* kill chain: numbered pixel squares on a rail, plain-English step + technical indicator */
.chain{padding:16px 16px 0;}
.f{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;position:relative;padding:0;overflow:hidden;
max-height:0;opacity:0;transform:translateY(8px);
transition:max-height .45s cubic-bezier(.2,.7,.2,1),padding .45s cubic-bezier(.2,.7,.2,1),opacity .4s ease .08s,transform .45s cubic-bezier(.2,.7,.2,1) .08s;}
.f.show{cursor:pointer;}
.f:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.f.show{max-height:84px;opacity:1;transform:none;padding-bottom:10px;}
/* rail: drawn only from a visible step down to the next visible step */
.f::before{content:"";position:absolute;left:14px;top:30px;bottom:0;width:2px;background:var(--pc,var(--text-primary));display:none;} /* rail takes the colour of the step above it */
.f.show:has(+ .f.show)::before{display:block;}
.f .n{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--border-2);background:var(--white);
font-family:var(--font-mistral);font-style:normal;font-weight:500;font-size:16px;line-height:1;letter-spacing:0;color:var(--text-faint);position:relative;z-index:1;transition:background-color .3s,color .3s,border-color .3s;}
.f.show .n{background:var(--pc,var(--text-primary));border-color:var(--pc,var(--text-primary));color:#fff;} /* phase it was found in */
/* small "Findings" label above the outputs, revealed together with the first output step */
.fh{grid-column:1/-1;text-align:right;color:var(--text-faint);padding:0 0 4px;margin-bottom:8px;border-bottom:1px dashed var(--border-2);}
.f.out.first::before{top:59px;} /* below the label (16 + 4 + 1 + 8) and the 30px square */
.f.out.first.show{max-height:124px;}
.f.gap::before{display:none!important;}
.f .t .info{display:inline-grid;vertical-align:-3px;margin-left:6px;}
.f .t{font-family:var(--font-mistral);font-weight:500;font-size:17px;line-height:21px;letter-spacing:0;transition:color .3s;}
.f .v{font-family:var(--font-mono);font-size:12px;line-height:16px;letter-spacing:0;color:var(--text-secondary);word-break:break-word;}
.f:not(.show) .v{visibility:hidden;}
/* Detail line on demand (devices that can hover): title sits centred on its square, and on hover
it slides up while the detail rises from below into place. Row height never changes. */
@media (hover:hover){
.f .t{transform:translateY(4.5px);transition:transform .28s cubic-bezier(.2,.7,.2,1);} /* (30px square − 21px line) / 2: centred on the square */
/* one detail line per step so every row is the same height; a long value scrolls sideways on hover */
.f .v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.f.show:hover .v.long,.f.show:focus-visible .v.long{text-overflow:clip;animation:vscroll var(--dur,4s) ease-in-out .6s infinite alternate both;}
@keyframes vscroll{0%,12%{text-indent:0;}88%,100%{text-indent:calc(-1 * var(--dx,0px));}}
.f .v{opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .28s cubic-bezier(.2,.7,.2,1);}
.f.show:hover .t,.f.show:focus-visible .t,.f.intro .t{transform:none;}
.f.show:hover .v,.f.show:focus-visible .v,.f.intro .v{opacity:1;transform:none;}
}
.foot{margin-top:12px !important;font-size:13px;line-height:1.25rem;color:var(--text-tertiary);}
.foot code{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);}
@media (max-width:760px){
.bar .cell.calls{display:none;}
.card,.tcard{width:auto;left:16px!important;right:16px;}
.body{grid-template-columns:1fr;height:auto;}
.col + .col{border-left:none;border-top:1px solid var(--border);}
.log{height:220px;flex:none;}
.finds{height:232px;flex:none;} /* fixed window; follows the newest step (followFind) */
.colh span{display:none;}
.moment .txt{font-size:14px;line-height:18px;}
/* title and play button share the first row; the lede runs below at most of the width */
.re-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;row-gap:8px;}
.re-intro-text{display:contents;}
.re-intro h2{margin-bottom:0;}
.re-intro .lede{grid-column:1/-1;grid-row:2;max-width:80%;}
}
/* narrow: labels sit under their colour squares so the legend stays on one line */
@media (max-width:480px){
.legend{flex-wrap:nowrap;justify-content:space-between;gap:8px;}
.legend span{flex-direction:column;align-items:flex-start;gap:4px;}
}
@media (prefers-reduced-motion:reduce){.ln,.playing .strip i.cur::before,.caret{animation:none;}}