/* RSI Arena broadcast. A board of rounded panels: an ivory showcase for the model on screen and its trajectory,
   dark cards for its budget, training and activity, and a side column for what all agents share: the GPU
   cluster and the audience's picks. Colours follow the
   Bake AI Color System v1.0 (Ink, Warm Ivory, Frontier Moss, Ember Amber, Clay); the pastel cards use
   bakeai.inc's category tints and the guide's 200 scales, always with Ink text. Type is one geometric sans
   (Outfit where available) with mono only for commands. Sizes are in rem; the root size follows the
   viewport, so the layout keeps its proportions on one screen from 720p to 4K. */
:root{color-scheme:dark;--ink:#231a15;--ink-deep:#120d0a;--panel:#1c1511;--ink-700:#524941;--ink-500:#827a70;--ink-300:#a79e90;--ink-200:#bcb4a6;--ink-100:#d9d2c3;--ivory:#f7f0df;--paper:#f3ead8;--moss:#5d6b2c;--moss-200:#c6c5a6;--amber:#df9d49;--amber-200:#efd5af;--clay:#8b4b2e;--lavender:#dec9eb;--sky:#bdd9e6;--olive:#d3deb5;--peach:#edcdb0;--coral:#f0b7aa;--alert:#e0574a;--line:rgba(247,240,223,.1);--line-2:rgba(247,240,223,.18);--ease:cubic-bezier(.16,1,.3,1);--sans:Outfit,"Avenir Next",Avenir,"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,"Cascadia Mono",Consolas,monospace}
html{font-size:clamp(11px,min(.8333vw,1.4815vh),30px)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden}
body{color:var(--ivory);font:400 1rem/1.5 var(--sans);-webkit-font-smoothing:antialiased;background:var(--ink-deep)}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
summary{cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
::selection{background:rgba(223,157,73,.35)}
code{padding:.05em .3em;border-radius:.3rem;background:rgba(247,240,223,.1);font:.88em var(--mono)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{flex:none;width:1.1rem;height:1.1rem;fill:currentColor}
.hint{overflow:hidden;font-size:.8125rem;color:var(--ink-300);white-space:nowrap;text-overflow:ellipsis}
.title{font-size:1.05rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.icon-btn{display:grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--line-2);transition:opacity .6s,background .25s}
.icon-btn:hover{background:rgba(247,240,223,.08)}
.icon-btn.small{width:2.1rem;height:2.1rem}
.icon-btn.small .icon{width:.95rem;height:.95rem}
body.idle .fade{opacity:0;pointer-events:none}
svg text{font-family:var(--sans)}

/* The board: the showcase over three detail cards on the left; the shared side column on the right. */
/* The masthead across the top: the brand, the title and the collaborators, on the dark ground. */
.masthead{display:flex;align-items:center;gap:2rem;height:3.6rem;min-width:0;padding:0 1.9rem;color:var(--ivory)}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 33rem;grid-template-rows:minmax(0,1.55fr) minmax(0,1fr);gap:1rem;height:calc(100% - 3.6rem);padding:0 1rem 1rem}
.showcase{grid-column:1/4;grid-row:1;display:flex;flex-direction:column;min-width:0;min-height:0;padding:1.3rem 1.8rem 1.6rem;border-radius:1.75rem;background:var(--paper);color:var(--ink)}
.budget{grid-column:1;grid-row:2}
.training{grid-column:2;grid-row:2}
.activity{grid-column:3;grid-row:2}
.side{grid-column:4;grid-row:1/3;display:flex;flex-direction:column;gap:1rem;min-width:0;min-height:0}

.brand{display:flex;align-items:center;gap:.9rem}
.mascot{display:block;flex:none;width:2.8rem;height:2.8rem;margin:-.3rem -.2rem -.3rem 0}
/* The wordmark's letters sit low in its artwork; lifting it puts its baseline on the product name's and the title's. */
.wordmark{display:block;width:5rem;height:1.3rem;transform:translateY(-.2rem);background:var(--ivory);-webkit-mask:url(/assets/bake-ai-wordmark.svg) left center/contain no-repeat;mask:url(/assets/bake-ai-wordmark.svg) left center/contain no-repeat}
.brand-rule{width:1px;height:1.4rem;background:rgba(247,240,223,.25)}
.product{font-size:1.15rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
/* The showcase's head: the models on screen across the whole width; under them, what the agent on screen trains
   with, beside the live state and controls. */
.show-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem 1.6rem;min-width:0}
.models{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.25rem;min-width:0;margin:0;padding:.28rem;border-radius:1.4rem;background:var(--ink)}
/* Each institution's official mark, painted Ivory through a CSS mask like the Bake AI wordmark (the files are
   unchanged); heights differ so the marks, from about 4:1 to 14:1, carry similar weight. */
.partners{display:flex;align-items:center;gap:1.3rem;min-width:0}
.partners-label{font-size:.8125rem;color:var(--ink-300);white-space:nowrap}
/* Scale AI, the first collaborator, keeps its official lockup as it is, white on Ink: its guidelines allow no
   recolouring. At 1rem high it carries the universities' weight, and the gap is its clear space. */
.partner-logo{display:block;flex:none;width:auto;height:1rem}
.partner{display:block;flex:none;background:var(--ivory);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.partner.nd{width:5.15rem;height:1.2rem;-webkit-mask-image:url(/assets/partner-nd.svg);mask-image:url(/assets/partner-nd.svg)}
.partner.uw{width:10.4rem;height:.82rem;-webkit-mask-image:url(/assets/partner-uw.png);mask-image:url(/assets/partner-uw.png)}
.partner.stanford{width:5.1rem;height:1.15rem;-webkit-mask-image:url(/assets/partner-stanford.png);mask-image:url(/assets/partner-stanford.png)}
.model{position:relative;display:inline-flex;flex:1 1 auto;align-items:center;justify-content:center;gap:.5rem;height:2.15rem;padding:0 1.05rem 0 .85rem;overflow:hidden;border-radius:999px;font-size:.875rem;font-weight:500;color:var(--ink-200);white-space:nowrap;transition:background .5s var(--ease),color .5s var(--ease)}
/* The company's logo leads each pill, in the round badge of the GPU wall, ringed in the agent's tone. */
.model .badge{width:1.45rem;height:1.45rem;margin-left:-.35rem;box-shadow:0 0 0 .12rem var(--tone,var(--ink-200))}
.model[aria-pressed=true]{background:var(--paper);color:var(--ink)}
.models.rotating .model[aria-pressed=true]:after{content:"";position:absolute;right:0;bottom:0;left:0;height:3px;background:var(--amber);transform-origin:left;animation:turn var(--turn,20s) linear both}
/* Each fact is a key and a value in one outlined pill, the same height as the live pill beside them. */
.facts{display:flex;align-items:center;gap:.5rem;min-width:0;margin:0;padding:0;overflow:hidden;list-style:none}
.fact{display:inline-flex;flex:0 1 auto;align-items:center;gap:.4rem;min-width:0;height:2rem;padding:0 .75rem;border-radius:999px;border:1px solid rgba(35,26,21,.18);white-space:nowrap}
.fact-key{flex:none;font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500)}
.fact-value{min-width:0;overflow:hidden;font-size:.8125rem;font-weight:600;text-overflow:ellipsis}
.fact.empty .fact-value{font-weight:400;color:var(--ink-500)}
/* The method stays whole; the data list gives way. A turning label's new face rises in, like the next card of a
   deck. */
html.motion .fact.turn .fact-key,html.motion .fact.turn .fact-value{animation:fact-in .55s var(--ease) both}
@keyframes fact-in{from{opacity:0;transform:translateY(.55em)}}
.fact.method{flex-shrink:0}
.fact.data{flex-shrink:3}
/* The status group keeps fixed widths, so it looks the same live, delayed or closed, whatever the number of models
   above it. */
.head-right{display:flex;align-items:center;justify-content:flex-end;gap:.9rem}
.live{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-width:11.5rem;height:2rem;padding:0 .9rem 0 .75rem;border-radius:999px;border:1px solid rgba(35,26,21,.18);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.live-dot{position:relative;width:.45rem;height:.45rem;border-radius:50%;background:var(--ink-500)}
.live[data-state=live]{border-color:transparent;background:var(--moss);color:var(--ivory)}
.live[data-state=live] .live-dot{background:var(--amber)}
.live[data-state=live] .live-dot:after{content:"";position:absolute;inset:-.3rem;border-radius:50%;border:1px solid var(--amber);animation:ping 2.4s var(--ease) infinite}
.live[data-state=delayed]{border-color:rgba(223,157,73,.7);color:var(--clay)}
.live[data-state=delayed] .live-dot{background:var(--amber)}
.connection{width:7.5rem;overflow:hidden;font-size:.75rem;color:var(--ink-500);text-align:center;white-space:nowrap;text-overflow:ellipsis}
.connection.error{color:var(--clay)}
.clock{font-size:1rem;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.showcase .icon-btn{border-color:rgba(35,26,21,.18);color:var(--ink)}
.showcase .icon-btn:hover{background:rgba(35,26,21,.06)}

/* Showcase body: who is working and on what, beside the agent's own steps. */
.show-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:2.6rem;flex:1;min-height:0;margin-top:1.2rem}
.identity{display:flex;flex-direction:column;min-width:0;min-height:0}
.show-title{flex:1;min-width:0;margin:0;padding:.25em 0;overflow:hidden;font-size:1.4rem;font-weight:600;line-height:1.2;letter-spacing:-.02em;text-align:center;white-space:nowrap;text-overflow:ellipsis}
/* Human evaluation is the point: its words carry a slow warm sheen and an underline that draws itself in. */
.show-title em{position:relative;font-style:normal;font-weight:700;color:var(--amber);background:linear-gradient(100deg,#efd5af,#df9d49 30%,#f0b7aa 60%,#efd5af);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sheen 8s ease-in-out infinite alternate}
.show-title em:after{content:"";position:absolute;right:0;bottom:-.14em;left:0;height:.13em;border-radius:1em;background:linear-gradient(90deg,#df9d49,#f0b7aa);transform-origin:left;animation:draw-in 1.4s .8s var(--ease) both}
@keyframes sheen{to{background-position:100% 0}}
@keyframes draw-in{from{transform:scaleX(0)}}
/* Where the title was: questions for the final models, drifting right to left like bullet comments. */
/* Questions for the final models: a deck of exam cards, one question at a time. The card flips to the next; the two
   edges under it, drawn by the deck's shadows, stay put. Two lines at most, at a fixed height, so the page never moves. */
.quiz{flex:none;min-width:0}
.quiz-label{margin:0;font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);white-space:nowrap}
.quiz-deck{margin:.4rem .9rem .55rem .1rem;border-radius:.85rem;box-shadow:0 .24rem 0 -.07rem #e8d9bf,0 .46rem 0 -.16rem #dfcdae}
.quiz-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:.75rem;min-height:3.3rem;padding:.4rem .9rem .4rem .55rem;border-radius:.85rem;background:#fffaf1;box-shadow:0 .08rem .3rem rgba(35,26,21,.14);transform-origin:50% 0}
.quiz-q{display:grid;flex:none;place-items:center;width:1.55rem;height:1.55rem;border-radius:.5rem;background:var(--ink);color:var(--amber-200);font-size:.8125rem;font-weight:700}
.quiz-text{display:-webkit-box;margin:0;overflow:hidden;font-size:.875rem;font-weight:500;line-height:1.3;color:var(--ink);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.quiz-count{font-size:.6875rem;color:var(--ink-500);font-variant-numeric:tabular-nums;white-space:nowrap}
/* The audience's bullet comments fly over the ring's ropes, above the breads and under the bubbles. */
.crowd{position:absolute;top:4%;right:0;left:0;z-index:2;height:3.2rem;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 1.5rem,#000 calc(100% - 1.5rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 1.5rem,#000 calc(100% - 1.5rem),transparent)}
.dm{position:absolute;left:0;display:block;height:1.3rem;padding:0 .65rem;border-radius:999px;font-size:.75rem;font-weight:500;line-height:1.3rem;white-space:nowrap;color:var(--ink);background:var(--dm,rgba(255,250,241,.92));box-shadow:0 .06rem .3rem rgba(35,26,21,.22);will-change:transform}
/* The agent's name, and beside it its state as a baker's verb with a small drawing that acts it out. */
.agent-line{display:flex;flex:none;align-items:center;gap:.9rem;min-width:0;margin:1rem 0 0}
.agent-name{min-width:0;margin:0;overflow:hidden;font-size:2.6rem;font-weight:600;line-height:1.05;letter-spacing:-.035em;white-space:nowrap;text-overflow:ellipsis;color:var(--clay)}
.agent-status{display:inline-flex;flex:none;align-items:center;gap:.3rem;height:1.6rem;padding:0 .75rem 0 .3rem;border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;color:var(--ink);background:var(--lavender)}
.agent-status[data-state=train]{background:var(--amber-200)}
.agent-status[data-state=test]{background:var(--sky)}
.agent-status[data-state=wait]{background:var(--peach)}
.agent-status[data-state=done]{background:var(--moss-200)}
/* The drawing, in the mascot's own manner, sticks out of the pill like a sticker. Still, it shows its state at rest:
   steam up, the window warm, sparkles out. */
.bake-art-slot{flex:none;width:2.2rem;height:2.2rem;margin:-.45rem 0 -.2rem -.4rem}
.bake-art{display:block;width:100%;height:100%;overflow:visible}
.bake-art *{transform-box:fill-box}
.bk-crumb{opacity:0}
.bk-warm{opacity:.9}
.bk-coil{stroke:#ffe7b9}
.agent-task{margin:.7rem 0 0;font-size:1.35rem;color:var(--ink-700)}
.agent-task span{font-weight:600;color:var(--ink)}
.agent-task .date{font-weight:400;color:var(--ink-500)}
.agent-task .date:not(:empty):before{content:" · "}
/* The arena: two breads square off in a ring drawn in the mascot's own manner (its brown outline, flat warm
   fills), the model on screen in the left corner and the next one up in the right. A corner's pads, gloves, name
   dot and speech bubble take that agent's colour. The mascot file is unchanged; the left bread is shown mirrored
   so the two face each other, and the gloves are drawn for the page over its hands. */
.ring{--crumb:#5f320c;--canvas:#dce9ee;--canvas-edge:#c3d8e0;position:relative;display:flex;flex:1;flex-direction:column;justify-content:flex-end;gap:.8rem;min-height:12rem;max-height:19rem;margin:.9rem 0 1rem}
.says{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:end}
.say{--tail:70%;position:relative;min-width:0;padding:.45rem .7rem .5rem;border:.11rem solid var(--crumb);border-radius:.85rem;background:color-mix(in srgb,var(--tone,#fff) 42%,#fffaf1);color:var(--ink)}
.say:before{content:"";position:absolute;top:100%;left:var(--tail);width:.62rem;height:.62rem;margin:-.33rem 0 0 -.31rem;border:solid var(--crumb);border-width:0 .11rem .11rem 0;background:inherit;transform:rotate(45deg)}
.say-state{display:flex;align-items:center;gap:.3rem;margin:0;overflow:hidden;font-size:.72rem;font-weight:600;line-height:1.2;white-space:nowrap}
.say-state .i{flex:none;width:.95rem;height:.95rem;color:var(--crumb)}
.say-detail{overflow:hidden;font-weight:500;color:var(--ink-700);text-overflow:ellipsis}
.say-detail:not(:empty):before{content:"· "}
.dots{display:none;gap:.14rem;margin:0 .1rem 0 -.08rem}
.dots i{width:.2rem;height:.2rem;border-radius:50%;background:currentColor}
.say[data-state=think] .dots{display:inline-flex}
.say-words{display:-webkit-box;margin:.22rem 0 0;overflow:hidden;font-family:var(--mono);font-size:.68rem;line-height:1.38;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.say-words:empty{display:none}
/* Thinking gets a thought bubble: two small rounds lead down to the bread instead of a point. */
.say[data-state=think]:before{width:.5rem;height:.5rem;margin:.18rem 0 0 -.25rem;border-width:.11rem;border-radius:50%;transform:none}
.say[data-state=think]:after{content:"";position:absolute;top:100%;left:calc(var(--tail) + .45rem);width:.3rem;height:.3rem;margin-top:.78rem;border:.11rem solid var(--crumb);border-radius:50%;background:inherit}
.say[data-state=open]{border-style:dashed;background:transparent;color:var(--ink-500)}
.say[data-state=open]:before{border-style:dashed;background:var(--paper)}
.say[data-state=open] .say-words{font-family:inherit;font-size:.72rem}
/* The stage is drawn in a 500 × 130 box stretched to the column; strokes keep their width. */
.stage{position:relative;flex:1;min-height:7.6rem;max-height:10.5rem}
.ring-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring-art *{vector-effect:non-scaling-stroke}
.ring-art .apron{fill:var(--clay)}
.ring-art .apron-lip{fill:#a45e36}
.ring-art .apron-foot{fill:#6d391f}
.ring-art .apron-edge,.ring-art .floor-edge{fill:none;stroke:var(--crumb);stroke-width:.12rem;stroke-linejoin:round}
.ring-art .floor{fill:var(--canvas-edge)}
.ring-art .floor-in{fill:var(--canvas)}
.ring-art .floor-spot{fill:var(--canvas-edge);opacity:.55}
.ring-art path{fill:none;stroke-linecap:round}
.ring-art .apron,.ring-art .apron-lip,.ring-art .apron-foot,.ring-art .floor,.ring-art .floor-in{stroke:none}
.ring-art .post-o{stroke:var(--crumb);stroke-width:.8rem}
.ring-art .post{stroke:#fff4dc;stroke-width:.52rem}
.ring-art .rope-o{stroke:var(--crumb);stroke-width:.38rem}
.ring-art .rope{stroke:#fff4dc;stroke-width:.17rem}
.ring-art .rope.mid{stroke:#e1750a}
.ring-art .pad-o{stroke:var(--crumb);stroke-width:1.2rem}
.ring-art .pad{stroke-width:.92rem}
.ring-art .pads.a .pad{stroke:var(--tone-a,#fff4dc)}
.ring-art .pads.b .pad{stroke:var(--tone-b,#fff4dc)}
/* Each bread stands on the canvas a fixed step from the centre, sized by the stage's height with its box capped by
   the stage's width, so a taller stage never pushes the two into each other or the posts. */
.fighter{position:absolute;bottom:26%;height:78%;max-width:30%;aspect-ratio:1;transform-origin:50% 100%}
.fighter.left{right:calc(50% + 2.1rem)}
.fighter.right{left:calc(50% + 2.1rem)}
.bob{position:absolute;right:0;bottom:0;left:0;aspect-ratio:1;transform-origin:50% 100%}
.fighter img{display:block;width:100%;height:100%}
.fighter.left img{transform:scaleX(-1)}
.shade{position:absolute;right:14%;bottom:-5%;left:14%;height:13%;border-radius:50%;background:radial-gradient(closest-side,rgba(95,50,12,.34),rgba(95,50,12,0))}
/* Each glove sits over one of the hands drawn in the mascot (front hand at 7–18% across and 70–86% down the
   picture, back hand at 69–87% and 72–89%, before mirroring); a punch stretches the lead glove forward from its
   cuff, so the drawn hand stays covered. */
.glove{position:absolute;width:27%;aspect-ratio:48/40;color:var(--tone,#f0b7aa);overflow:visible}
.fighter.left .lead{top:66%;left:75%;transform-origin:12% 55%}
.fighter.left .guard{top:70.5%;left:8%;width:25%;transform:rotate(-10deg)}
.fighter.right .lead{top:66%;right:75%;transform-origin:88% 55%}
.fighter.right .guard{top:70.5%;right:8%;width:25%;transform:rotate(10deg)}
.fighter[data-state=open] .bob{opacity:.3}
.fighter[data-state=open] .glove,.fighter[data-state=open] .shade{display:none}
.vs{position:absolute;top:45%;left:50%;display:grid;place-items:center;width:2.5rem;height:2.5rem;transform:translate(-50%,-50%) rotate(-8deg)}
.vs svg,.burst svg{position:absolute;inset:0;width:100%;height:100%}
.vs path{fill:var(--amber);stroke:var(--crumb);stroke-width:4;stroke-linejoin:round}
.vs b{position:relative;font-size:.86rem;font-style:italic;font-weight:800;letter-spacing:.02em;color:var(--crumb)}
.burst{position:absolute;top:45%;left:50%;width:4.4rem;height:4.4rem;margin:-2.2rem 0 0 -2.2rem;opacity:0}
.burst path{fill:#ffe3ad;stroke:var(--crumb);stroke-width:2.2;stroke-linejoin:round}
.ring[data-bout=solo] .burst{display:none}
.apron-name{position:absolute;top:87.7%;left:50%;font-size:.56rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;color:#f6dcc0;transform:translate(-50%,-50%)}
.corner{position:absolute;top:87.7%;display:inline-flex;align-items:center;gap:.38rem;max-width:31%;overflow:hidden;font-size:.72rem;font-weight:600;color:var(--ivory);white-space:nowrap;text-overflow:ellipsis;transform:translateY(-50%)}
.corner:before{content:"";flex:none;width:.55rem;height:.55rem;border-radius:50%;background:var(--tone)}
.corner.left{left:6.5%}
.corner.right{right:6.5%}
.corner.open{font-weight:500;color:#e7c3a8}
.corner.open:before{display:none}
.showcase .hint{color:var(--ink-500)}
.exp-board{display:flex;gap:.6rem;flex:1;min-height:0;margin-top:.7rem}
.gap{align-self:center;flex:none;font-size:1.4rem;color:rgba(247,240,223,.3)}
.hour{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0;padding:.5rem .35rem 0;border-radius:1.1rem}
.hour.current{background:linear-gradient(180deg,rgba(222,201,235,.3),rgba(222,201,235,.04))}
.hour-head{display:flex;align-items:baseline;gap:.3rem;padding:0 .35rem}
.hour-num{font-size:2.5rem;font-weight:300;line-height:1;letter-spacing:-.03em;color:rgba(247,240,223,.3);font-variant-numeric:tabular-nums}
.hour.current .hour-num{font-weight:600;color:var(--ivory)}
.hour-unit{font-size:.75rem;color:var(--ink-300);white-space:nowrap}
.jobs{display:flex;flex-direction:column;gap:.45rem;min-height:0;margin-top:.75rem;overflow:hidden}
.job{position:relative;display:flex;flex-direction:column;flex:none;padding:.5rem .7rem .55rem;overflow:hidden;border-radius:.9rem;background:var(--sky);color:var(--ink)}
.job[data-purpose=train]{background:var(--lavender)}
.job[data-state=failed]{background:var(--coral)}
.job[data-state=running]{background:var(--amber-200)}
.job:after{content:"";position:absolute;right:-1.3rem;bottom:-1.7rem;width:4.2rem;height:4.2rem;border-radius:50%;background:rgba(35,26,21,.07)}
.job[data-purpose=evaluate]:after{background:none;border:.5rem solid rgba(35,26,21,.07)}
.job[data-state=failed]:after{border:0;border-radius:.7rem;background:rgba(35,26,21,.07);transform:rotate(28deg)}
.job-top{display:flex;justify-content:space-between;gap:.4rem;overflow:hidden;font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(35,26,21,.6);white-space:nowrap}
.job-id{margin-top:.1rem;font-size:1rem;font-weight:600;line-height:1.25}
.job-state{position:relative;overflow:hidden;font-size:.75rem;color:rgba(35,26,21,.72);white-space:nowrap;text-overflow:ellipsis}
.job[data-state=running] .job-state:before{content:"";display:inline-block;width:.45rem;height:.45rem;margin-right:.35rem;border-radius:50%;background:var(--amber);animation:pulse 1.6s ease-in-out infinite}
.board-empty{margin:auto;font-size:.9375rem;color:var(--ink-300)}
/* GPU cluster: a card per GPU (tinted by the job on it), then the allocation lanes. */
.exp-board.cluster{flex-direction:column;gap:.8rem}
.gpus{display:grid;grid-auto-rows:minmax(0,1fr);gap:.8rem;flex:1;min-height:0}
.gpu-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto minmax(1.2rem,1fr);gap:.45rem 1rem;min-width:0;min-height:0;padding:.75rem 1rem .8rem;overflow:hidden;border-radius:1.3rem;background:var(--paper);color:var(--ink);transition:background .8s var(--ease)}
.gpu-card:after{content:"";position:absolute;right:-3rem;bottom:-3.5rem;width:9rem;height:9rem;border-radius:50%;background:rgba(255,255,255,.25);pointer-events:none}
.gpu-card header{grid-row:1;grid-column:1/-1;display:flex;align-items:baseline;gap:.6rem;min-width:0}
.gpu-no{font-size:1.1rem;font-weight:600}
.gpu-model{overflow:hidden;font-size:.75rem;color:rgba(35,26,21,.6);white-space:nowrap;text-overflow:ellipsis}
.dial-wrap{grid-row:3;position:relative;align-self:center;width:5.8rem;height:5.8rem}
.dial{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.dial .tick{stroke:rgba(35,26,21,.22);stroke-width:1.2}
.dial-read{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dial-read b{font-size:1.65rem;font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dial-read span{margin-top:.15rem;font-size:.6875rem;color:rgba(35,26,21,.6)}
.gpu-read{grid-row:3;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:.3rem;min-width:0;margin:0}
.gpu-read div{display:flex;justify-content:space-between;gap:.6rem;font-size:.8125rem;white-space:nowrap}
.gpu-read dt{color:rgba(35,26,21,.6)}
.gpu-read dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.gpu-read .membar{display:block;height:.45rem;margin:-.1rem 0 .2rem;overflow:hidden;border-radius:999px;background:rgba(35,26,21,.1)}
.membar span{display:block;width:0;height:100%;border-radius:inherit;background:var(--ink);transition:width 1.4s var(--ease)}
.gpu-spark{grid-row:4;position:relative;z-index:1;grid-column:1/-1;display:block;width:100%;height:100%;min-height:1.6rem;overflow:visible}
.gpu-job{grid-row:2;position:relative;z-index:1;grid-column:1/-1;display:flex;align-items:center;gap:.5rem;margin:0;overflow:hidden;font-size:.8125rem;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.gpu-job:before{content:"";flex:none;width:.55rem;height:.55rem;border-radius:50%;background:rgba(35,26,21,.3)}
.gpu-card[data-state=agent] .gpu-job:before{background:var(--tone);box-shadow:0 0 0 .2rem rgba(35,26,21,.1);animation:pulse 1.6s ease-in-out infinite}
.wall{display:flex;flex:1;flex-direction:column;gap:.5rem;min-height:0}
.rack{display:flex;flex:1;flex-direction:column;gap:.3rem;min-height:0}
.rack-head{display:flex;align-items:baseline;gap:.6rem;font-size:.75rem;white-space:nowrap}
.rack-head b{font-size:.875rem;font-weight:600;color:var(--ivory)}
.rack-icon{flex:none;align-self:center;width:1.4rem;height:1.4rem;margin:-.2rem -.3rem -.2rem 0}
.rack-head span{overflow:hidden;color:var(--ink-300);text-overflow:ellipsis}
.cells{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.35rem;flex:1;min-height:0}
/* Under the cells: who holds each run of GPUs, named in the agent's colour. */
/* The holder's company logo, small and set into each GPU's top-right corner like an inlay; Xiaomi MiMo's mark
   comes on its own black ground. */
.cell-logo{position:absolute;z-index:1;top:.3rem;right:.3rem}
.cell .badge{width:1.3rem;height:1.3rem;background:#f4eadb;box-shadow:inset 0 .07rem .22rem rgba(35,26,21,.4),0 .05rem 0 rgba(255,255,255,.55)}
.badge{display:grid;flex:none;place-items:center;width:2.1rem;height:2.1rem;overflow:hidden;border-radius:50%;background:#fffaf1;box-shadow:0 0 0 .1rem rgba(35,26,21,.14),0 .15rem .45rem rgba(35,26,21,.2);font-size:.5625rem;font-weight:700;color:var(--ink)}
.badge img{display:block;width:62%;height:62%;object-fit:contain}
.badge[data-logo=mimo] img{width:100%;height:100%;object-fit:cover}
/* Kimi's mark is a white K with a blue dot, drawn for its black app icon: its badge is black too. */
.badge[data-logo=kimi],.cell .badge[data-logo=kimi]{background:#111}
.badge.small{width:1.3rem;height:1.3rem;box-shadow:none}
.cell{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.12rem;min-width:0;min-height:2.6rem;padding:.35rem .45rem;overflow:hidden;border-radius:.7rem;background:var(--paper);color:var(--ink)}
.cell-fill{position:absolute;right:0;bottom:0;left:0;height:0;background:rgba(35,26,21,.1);transition:height 1.4s var(--ease),background .8s var(--ease)}
.cell[data-state=agent] .cell-fill{background:var(--tone)}
.cell[data-state=outside] .cell-fill{background:rgba(35,26,21,.22)}
.cell-util{position:relative;z-index:1;font-size:1rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
/* The GPU's number at the top left, beside the logo; its temperature and utilization at the bottom. */
.cell-no{position:absolute;z-index:1;top:.4rem;left:.5rem;font-size:.625rem;color:rgba(35,26,21,.62);white-space:nowrap}
.cell-temp{position:relative;z-index:1;order:-1;font-size:.625rem;color:rgba(35,26,21,.62)}
/* Water: the level is the utilization; two slow turning shapes in the empty glass's colour cut its top into a
   moving surface, the back one half clear so a lighter band shows under the crest. */
.wave{position:absolute;bottom:100%;left:50%;width:var(--wave,14rem);height:var(--wave,14rem);margin:0 0 -.3rem calc(var(--wave,14rem)/-2);border-radius:43%;background:var(--paper);pointer-events:none;animation:swell 7s linear infinite;animation-delay:var(--phase,0s)}
.wave.back{margin-bottom:-.5rem;border-radius:40%;opacity:.5;animation-duration:11s}
.glass{position:absolute;inset:11%;overflow:hidden;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(35,26,21,.22)}
.glass .wave{--wave:11rem}
.glass .cell-fill{background:rgba(35,26,21,.12)}
.gpu-card[data-state=agent] .glass .cell-fill{background:var(--tone)}
.gpu-card[data-state=outside] .glass .cell-fill{background:rgba(35,26,21,.25)}
.lanes{flex:none;height:5.4rem}
/* With many GPUs the wall itself is the picture; the lanes would be hairlines, so they are left out. */
.exp-board[data-mode=wall] .lanes{display:none}
#lanes{display:block;width:100%;height:100%;overflow:visible}
#lanes .lane-track{fill:rgba(247,240,223,.07)}
#lanes .lane-label{font-weight:600;fill:var(--ink-200)}
#lanes .lane-axis{fill:var(--ink-300)}
#lanes .lane-now{stroke:var(--ivory);stroke-width:1.2}
.quiet{margin:.2rem .4rem;font-size:.75rem;color:rgba(247,240,223,.35)}

/* Detail cards */
.stat{display:flex;flex-direction:column;min-width:0;min-height:0;padding:1.2rem 1.4rem 1.2rem;border-radius:1.75rem;background:var(--ink)}
.stat header{display:flex;align-items:baseline;gap:.8rem;min-width:0}
.stat .hint{margin-left:auto}
.gauge{display:block;flex:1;width:100%;min-height:0;margin-top:.4rem}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:.7rem}
.pair>div{display:flex;flex-direction:column;min-width:0}
.big{font-size:2.5rem;font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.key{display:flex;align-items:center;gap:.45rem;margin-top:.45rem;font-size:.875rem;font-weight:500;white-space:nowrap}
.key:before{content:"";flex:none;width:.55rem;height:.55rem;border-radius:50%;background:var(--swatch,var(--ivory))}
.api .key,.loss .key{--swatch:var(--amber)}
.gpu .key{--swatch:var(--moss-200)}
.sub{margin-top:.2rem;overflow:hidden;font-size:.75rem;color:var(--ink-300);white-space:nowrap;text-overflow:ellipsis}
.loss{display:flex;align-items:baseline;gap:.9rem;margin-top:.6rem}
.loss .key{margin:0}
.plot{position:relative;flex:1;min-height:0;margin-top:.5rem}
#chart,#activity{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#activity rect.bar{transform-box:fill-box;transform-origin:50% 100%}
#activity .job-live{transform-box:fill-box;transform-origin:center;animation:breathe 2.4s ease-in-out infinite}
.chart-note{position:absolute;right:0;bottom:.3rem;left:0;margin:0;padding:0 .5rem;font-size:.8125rem;line-height:1.4;color:var(--ink-300);text-align:center}
.minis{display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;margin-top:.5rem;padding-top:.65rem;border-top:1px solid var(--line)}
.mini{display:flex;flex-direction:column;min-width:0}
.mini-value{font-size:1.3rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.mini-key{font-size:.75rem;color:var(--ink-300);white-space:nowrap}
/* Training runs as stacked cards, newest on top with its curve; earlier runs compact beneath it. */
.runs{display:flex;flex:1;flex-direction:column;gap:.45rem;min-height:0;margin:.7rem 0 0;padding:0;overflow:hidden;list-style:none;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 1.4rem),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 1.4rem),transparent)}
.runs>li.empty{margin:auto;padding:1rem;font-size:.8125rem;line-height:1.4;color:var(--ink-300);text-align:center}
.run{flex:none;display:flex;align-items:center;gap:.7rem;padding:.3rem .45rem .3rem .7rem;border:1px solid var(--line);border-radius:.85rem;background:rgba(247,240,223,.04)}
.run.now{flex:1 1 auto;flex-direction:column;align-items:stretch;gap:0;min-height:8.5rem;padding:.65rem .9rem .45rem;border-color:var(--line-2);border-radius:1rem;background:rgba(247,240,223,.07)}
.run-head{flex:1;display:flex;align-items:center;gap:.5rem;min-width:0;font-size:.75rem;color:var(--ink-200)}
.run-stage{flex:none;padding:.08rem .5rem;border-radius:999px;background:var(--amber);color:var(--ink);font-size:.625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.run-stage[data-stage=RL]{background:var(--moss-200)}
.run-stage[data-stage=SFT],.run-stage[data-stage=DPO]{background:var(--sky)}
.run-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.run-state{flex:none;margin-left:auto;color:var(--ink-300)}
.run-state:empty{display:none}
.run-state[data-state]{display:inline-flex;align-items:center;gap:.35rem;padding:.08rem .5rem;border-radius:999px;font-size:.6875rem;font-weight:600}
.run-state[data-state=live]{background:rgba(223,157,73,.18);color:var(--amber-200)}
.run-state[data-state=live]:before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--amber);animation:breathe 2.4s ease-in-out infinite}
.run-state[data-state=done]{background:rgba(198,197,166,.2);color:var(--moss-200)}
.run-state[data-state=failed]{background:rgba(240,183,170,.16);color:var(--coral)}
.run-state[data-state=stopped]{background:rgba(247,240,223,.08);color:var(--ink-300)}
.run-value{flex:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem;min-width:0}
.run-big{font-size:.95rem;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.run.now .run-head{flex:none}
.run.now .run-value{margin-top:.4rem}
.run.now .run-big{font-size:2rem;line-height:1;letter-spacing:-.03em}
.run-key,.run-step{font-size:.75rem;color:var(--ink-300);white-space:nowrap}
.run-key{display:flex;align-items:center;gap:.4rem;color:var(--ink-100)}
.run-key:before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--amber)}
.run-chart{display:block;flex:1;width:100%;min-height:4.5rem;margin-top:.25rem;overflow:visible}
.run-spark{flex:none;width:4.8rem;height:1.35rem;overflow:visible}

/* Agent trajectory, in the showcase: the agent's own steps, newest on top. Its words are set in a code face so
   they read as the agent's, not the page's. */
.trajectory{display:flex;flex-direction:column;min-width:0;min-height:0}
.trajectory>header{display:flex;align-items:center;gap:.9rem;min-width:0}
.trajectory>header .icon-btn{margin-left:auto}
.cards{display:flex;flex:1;flex-direction:column;gap:.6rem;min-height:0;margin:.8rem 0 0;padding:0;overflow:hidden;list-style:none;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 3.5rem),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 3.5rem),transparent)}
.card{position:relative;flex:none;padding:.85rem 1.05rem .9rem;overflow:hidden;border-radius:1.2rem;background:var(--tone,var(--lavender));color:var(--ink)}
.card:after{content:"";position:absolute;top:-2.6rem;right:-2.2rem;width:7.5rem;height:7.5rem;border-radius:50%;background:rgba(255,255,255,.22);pointer-events:none}
.card:nth-child(3n+2):after{top:-1rem;right:-1rem;width:5.5rem;height:5.5rem;border-radius:0 0 0 100%}
.card:nth-child(3n):after{top:auto;right:1.5rem;bottom:-3rem;width:6rem;height:6rem;background:none;border:.7rem solid rgba(255,255,255,.22)}
.card-head{position:relative;z-index:1;display:flex;align-items:center;gap:.6rem}
.meta{display:flex;gap:.7rem;min-width:0;font:500 .75rem var(--mono);color:rgba(35,26,21,.6);white-space:nowrap}
.meta .ago{color:var(--clay)}
.tag{margin-left:auto;padding:.15rem .6rem;border-radius:999px;background:var(--ink);font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory);white-space:nowrap}
.go{display:grid;place-items:center;flex:none;width:1.8rem;height:1.8rem;border-radius:50%;border:1.5px solid rgba(35,26,21,.5)}
.card-head:not(:has(.tag)) .go{margin-left:auto}
.go .icon{width:.85rem;height:.85rem;transform:rotate(-45deg)}
.note{position:relative;z-index:1;display:-webkit-box;margin:.55rem 0 0;overflow:hidden;font:500 .9375rem/1.45 var(--mono);letter-spacing:-.01em;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.card.now .note{font-size:1rem;-webkit-line-clamp:4}
.card[data-kind=news] .note{font-weight:700}
.next{position:relative;z-index:1;display:-webkit-box;margin:.45rem 0 0;overflow:hidden;font:.8125rem/1.45 var(--mono);color:rgba(35,26,21,.72);overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.card.now .next{-webkit-line-clamp:2}
.next b{margin-right:.5rem;font:700 .625rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.card-cmd{position:relative;z-index:1;margin:.6rem 0 0;padding:.35rem .75rem;overflow:hidden;border-radius:999px;background:var(--ink);font:.75rem/1.6 var(--mono);color:var(--ivory);white-space:nowrap;text-overflow:ellipsis}
.card-cmd:before{content:"$ ";color:var(--amber)}
.card code{padding:0 .2em;background:rgba(35,26,21,.1);color:var(--ink);font-size:.95em}
.cards>li.empty{padding:2.5rem 1rem;font-size:.9375rem;color:var(--ink-500);text-align:center}
.trajectory footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .2rem 0;font-size:.75rem;color:var(--ink-500);white-space:nowrap}
.trajectory footer>span{overflow:hidden;text-overflow:ellipsis}
.link{flex:none;font-size:.75rem;color:var(--clay)}
.link:hover{text-decoration:underline}

/* Side column: the GPU cluster all agents share, and the audience's picks. */
.gpu-panel{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0;padding:1.3rem 1.3rem 1.1rem;border-radius:1.75rem;background:var(--panel)}
.gpu-panel>header{display:flex;flex-direction:column;min-width:0}
.kicker{font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-300)}
h2{margin:.15rem 0 0;font-size:1.6rem;font-weight:600;line-height:1.1;letter-spacing:-.025em}
.gpu-panel .hint{margin-top:.3rem}
/* Who holds the GPUs: one chip per agent in its colour, and any use from outside the arena. */
.holders{display:flex;flex-wrap:wrap;gap:.35rem .45rem;margin:.6rem 0 0;font-size:.8125rem}
.holders>span{display:inline-flex;align-items:center;gap:.4rem;padding:.12rem .65rem .12rem .15rem;border-radius:999px;font-weight:600;white-space:nowrap;color:var(--ink);background:var(--tone)}
.holders .badge{box-shadow:none}
.holders>.outside{color:var(--ivory);background:rgba(247,240,223,.25)}
.holders>.quiet-note{padding:0;font-weight:400;color:var(--ink-300);background:none}
.gpu-panel .exp-board{margin-top:.8rem}
/* Audience picks: votes per agent, ranked, each row filled to its share like a prediction market. */
.market{display:flex;flex:none;flex-direction:column;min-width:0;padding:1rem 1.3rem .9rem;border-radius:1.75rem;background:var(--paper);color:var(--ink)}
.market header{display:flex;align-items:baseline;gap:.8rem}
.market .hint{margin-left:auto;color:var(--ink-500)}
.market-q{margin:.2rem 0 .6rem;font-size:.8125rem;color:var(--ink-700)}
.picks{display:flex;flex-direction:column;gap:.3rem;margin:0;padding:0;list-style:none}
.picks li{position:relative;display:grid;grid-template-columns:1.4rem 1.3rem minmax(0,1fr) auto 2.8rem;align-items:center;column-gap:.6rem;padding:.3rem .8rem;overflow:hidden;border-radius:.9rem;background:rgba(35,26,21,.05)}
.pick-bar{position:absolute;top:0;bottom:0;left:0;width:var(--share,0%);background:var(--tone);transition:width 1.4s var(--ease)}
.rank,.who,.pct,.count{position:relative}
.rank{font-size:.8125rem;font-weight:600;color:var(--ink-500);font-variant-numeric:tabular-nums}
.who{display:flex;align-items:baseline;gap:.5rem;min-width:0;white-space:nowrap}
.who b{font-size:.875rem;font-weight:600}
.who span{overflow:hidden;font-size:.75rem;color:rgba(35,26,21,.6);text-overflow:ellipsis}
.pct{grid-row:1;grid-column:5;font-size:1rem;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.count{grid-row:1;grid-column:4;font-size:.6875rem;color:rgba(35,26,21,.6);white-space:nowrap}
.picks .badge{position:relative;box-shadow:0 0 0 1px rgba(35,26,21,.12)}
.picks li.on-screen{box-shadow:inset 0 0 0 .1rem rgba(35,26,21,.4)}
.picks li.leader .rank,.picks li.leader .pct{color:var(--clay)}
/* A row that climbs flashes and carries an arrow by its new rank for a few seconds. */
.picks li.up .rank{color:var(--moss)}
.picks li.up .rank:before{content:"\25B2";margin-right:.1rem;font-size:.55rem;vertical-align:.12rem}
html.motion .picks li.up{animation:climb 1.6s var(--ease)}
@keyframes climb{from{background:color-mix(in srgb,var(--moss) 30%,rgba(35,26,21,.05))}}
.count:empty{display:none}
.market-foot{margin:.6rem 0 0;font-size:.75rem;color:var(--ink-500)}

/* Source dialogs */
dialog{width:min(92vw,72rem);height:86dvh;max-height:90dvh;padding:0;border-radius:1.5rem;border:1px solid var(--line-2);background:#1f1814;color:var(--ivory);box-shadow:0 2rem 6rem rgba(0,0,0,.75)}
dialog[open]{display:flex;flex-direction:column}
dialog::backdrop{background:rgba(12,9,7,.7)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.6rem;border-bottom:1px solid var(--line)}
.dialog-head h2{margin:0;font-size:1.4rem}
.btn{height:2.2rem;padding:0 1rem;border-radius:999px;border:1px solid var(--line-2);font-size:.8125rem}
.btn:hover{background:rgba(247,240,223,.08)}
.dialog-tools{display:flex;gap:.5rem;padding:.9rem 1.6rem}
.dialog-tools button{height:2.1rem;padding:0 .9rem;border-radius:999px;border:1px solid var(--line-2);font-size:.8125rem;color:var(--ink-100)}
.dialog-tools button[aria-pressed=true]{border-color:transparent;background:var(--ivory);color:var(--ink)}
.records{flex:1;min-height:0;margin:0;padding:0 1.6rem 1.6rem;overflow:auto;list-style:none}
.event{padding:1rem 0;border-bottom:1px solid var(--line)}
.event-meta{font:.75rem var(--mono);color:var(--amber-200)}
.event p{margin:.5rem 0;font-size:.875rem;line-height:1.6;color:var(--ink-100);white-space:pre-wrap;overflow-wrap:anywhere}
.event summary{padding:.3rem 0;font-size:.8125rem;color:var(--ink-100)}
.event pre{max-height:22rem;margin:.4rem 0;padding:.9rem;overflow:auto;border-radius:.6rem;border:1px solid var(--line);background:rgba(10,7,6,.6);font:.75rem/1.6 var(--mono);color:var(--ink-100);white-space:pre-wrap;overflow-wrap:anywhere}
.provenance-copy{flex:1;padding:1rem 1.6rem 1.6rem;overflow:auto;font-size:.9375rem;line-height:1.7;color:var(--ink-100)}

/* Motion: panels rise into place on load, cards drop in, GPU water levels move and settle to each reading, light
   runs along the budget gauge, the latest training point breathes, a swell crosses the activity bars, and the
   model pill fills while its turn lasts. It is decoration, never data, and stops under reduced motion. */
html.motion [data-reveal]{animation:reveal 1s var(--ease) both;animation-delay:calc(var(--i,0)*.09s)}
@keyframes reveal{from{opacity:0;transform:translateY(1.25rem)}}
@keyframes turn{from{transform:scaleX(0)}}
@keyframes ping{from{transform:scale(.5);opacity:.9}to{transform:scale(2.4);opacity:0}}
@keyframes pulse{50%{opacity:.35}}
@keyframes swell{to{transform:rotate(360deg)}}
@keyframes tickwave{0%,18%,100%{opacity:.7}9%{opacity:1}}
@keyframes breathe{50%{transform:scale(1.25);opacity:.7}}
/* The status drawing acts its state out: steam curls up from the oven while the loaf rises in its glowing window;
   the slice chews, hops and sparkles; the dial turns while the window warms and the oven looks about; the dough
   breathes and bubbles; the finished loaf steams and settles. */
html.motion .bk-wisp{opacity:0;animation:bk-steam 2.4s ease-out infinite}
html.motion .bk-wisp.w2{animation-delay:-.8s}.bk-wisp.w3{animation-delay:-1.6s}
@keyframes bk-steam{0%{opacity:0;transform:translateY(4px)}35%{opacity:1}100%{opacity:0;transform:translateY(-5px)}}
html.motion .bk-loaf{transform-origin:50% 100%;animation:bk-rise 3.2s ease-in-out infinite alternate}
@keyframes bk-rise{from{transform:scale(.92,.74)}to{transform:scale(1.04,1.06)}}
html.motion .bk-glow{animation:bk-flicker 2.2s ease-in-out infinite}
@keyframes bk-flicker{0%,100%{opacity:.78}30%{opacity:1}55%{opacity:.86}75%{opacity:.97}}
html.motion .bk-eye{transform-origin:50% 50%;animation:bk-blink 4.6s infinite}
@keyframes bk-blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.12)}}
html.motion .bk-warm{opacity:.1;animation:bk-warm 4s ease-in-out infinite}
@keyframes bk-warm{0%{opacity:.08}70%{opacity:.95}85%{opacity:.95}100%{opacity:.08}}
html.motion .bk-coil{animation:bk-coil 4s ease-in-out infinite}
@keyframes bk-coil{0%{stroke:#5f320c}70%,85%{stroke:#ffe7b9}100%{stroke:#5f320c}}
html.motion .bk-dial{transform-origin:50% 100%;animation:bk-dial 4s ease-in-out infinite}
@keyframes bk-dial{0%{transform:rotate(-70deg)}70%,85%{transform:rotate(70deg)}100%{transform:rotate(-70deg)}}
html.motion .bk-look{animation:bk-look 4s ease-in-out infinite}
@keyframes bk-look{0%,20%{transform:translateX(-1.2px)}45%,70%{transform:translateX(1.2px)}90%,100%{transform:translateX(-1.2px)}}
html.motion .bk-shimmer path{opacity:0;animation:bk-shimmer 4s ease-in-out infinite}
html.motion .bk-shimmer path+path{animation-delay:-.4s}
@keyframes bk-shimmer{0%,45%{opacity:0;transform:translateY(3px)}72%{opacity:1;transform:translateY(0)}92%,100%{opacity:0;transform:translateY(-3px)}}
html.motion .bk-chew{transform-origin:50% 50%;animation:bk-chew 3.6s ease-in-out infinite}
@keyframes bk-chew{0%,8%,16%,24%,32%,40%{transform:scaleY(1)}4%,12%,20%,28%,36%{transform:scaleY(.3)}48%,100%{transform:scale(1.15,1.2)}}
html.motion .bk-hop{transform-origin:50% 100%;animation:bk-hop 3.6s cubic-bezier(.3,0,.3,1) infinite}
@keyframes bk-hop{0%,44%{transform:translateY(0) scale(1)}50%{transform:translateY(0) scale(1.05,.93)}58%{transform:translateY(-3.5px) scale(.97,1.04)}66%{transform:translateY(0) scale(1.03,.97)}72%,100%{transform:translateY(0) scale(1)}}
html.motion .bk-sparkle{transform-origin:50% 50%;opacity:0;animation:bk-sparkle 3.6s ease-out infinite}
html.motion .bk-sparkle.s2{animation-delay:.18s}
@keyframes bk-sparkle{0%,50%{opacity:0;transform:scale(0) rotate(-30deg)}60%{opacity:1;transform:scale(1.15) rotate(0)}78%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(.4)}}
html.motion .bk-crumb{opacity:0;animation:bk-crumb 3.6s ease-out infinite}
html.motion .bk-crumb.c2{animation-delay:.12s}
@keyframes bk-crumb{0%,2%{opacity:0;transform:translate(-3px,3px)}6%{opacity:1}30%{opacity:0;transform:translate(3px,-4px)}100%{opacity:0}}
html.motion .bk-dough{transform-origin:50% 100%;animation:bk-breathe 3.4s ease-in-out infinite alternate}
@keyframes bk-breathe{from{transform:scale(1.03,.86)}to{transform:scale(.98,1.07)}}
html.motion .bk-breath{transform-origin:50% 50%;animation:bk-o 3.4s ease-in-out infinite alternate}
@keyframes bk-o{from{transform:scale(.6)}to{transform:scale(1.1)}}
html.motion .bk-bub{transform-origin:50% 50%;opacity:0;animation:bk-bubble 3.4s ease-out infinite}
html.motion .bk-bub.b2{animation-delay:-1.5s}
@keyframes bk-bubble{0%{opacity:0;transform:translateY(5px) scale(.3)}25%{opacity:1}70%{opacity:1;transform:translateY(-2px) scale(1)}78%{opacity:0;transform:translateY(-3px) scale(1.5)}100%{opacity:0}}
html.motion .bk-settle{transform-origin:50% 100%;animation:bk-settle 3.2s ease-in-out infinite}
@keyframes bk-settle{0%,60%,100%{transform:scale(1)}70%{transform:scale(1.04,.95)}80%{transform:scale(.99,1.02)}}
@keyframes ripple{0%{opacity:.75;transform:scale(.7)}100%{opacity:0;transform:scale(3.2)}}
@keyframes rise{0%,24%,100%{transform:scaleY(1)}12%{transform:scaleY(1.08)}}
#gauge .lit{animation:tickwave 5s ease-in-out infinite;animation-delay:calc(var(--k)*40ms + 1s)}
#chart .halo,.run-chart .halo{transform-box:fill-box;transform-origin:center;animation:breathe 3s ease-in-out infinite}
#chart .ripple,.run-chart .ripple{opacity:0;transform-box:fill-box;transform-origin:center;animation:ripple 3.6s ease-out infinite}
#chart .ripple.late,.run-chart .ripple.late{animation-delay:1.8s}
#activity .bar{animation:rise 6s ease-in-out infinite;animation-delay:calc(var(--k)*110ms)}
/* The bout, on a 4.8 s count: both breads bounce out of step with a little squash; the left bread lunges at 23%
   and the right at 73%, each lead glove stretching out on its lunge while the other bread rocks back, and a burst
   and the VS land on each punch. A corner with no challenger shadowboxes alone; a finished agent only bounces. */
@keyframes bob{0%,100%{transform:translateY(0) scale(1.03,.97)}50%{transform:translateY(-.32rem) scale(.985,1.015)}}
@keyframes shade{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.6}}
@keyframes lunge-l{0%,14%,34%,66%,82%,100%{transform:none}18%{transform:translateX(-.18rem) rotate(-3deg)}23%{transform:translateX(.5rem) rotate(5deg)}73%{transform:translateX(-.42rem) rotate(-6deg)}}
@keyframes lunge-r{0%,16%,32%,64%,84%,100%{transform:none}23%{transform:translateX(.42rem) rotate(6deg)}68%{transform:translateX(.18rem) rotate(3deg)}73%{transform:translateX(-.5rem) rotate(-5deg)}}
@keyframes punch-l{0%,15%,33%,100%{transform:none}18%{transform:scaleX(.88)}23%{transform:scale(1.6,.96) rotate(-3deg)}27%{transform:scaleX(1.12)}}
@keyframes punch-r{0%,65%,83%,100%{transform:none}68%{transform:scaleX(.88)}73%{transform:scale(1.6,.96) rotate(3deg)}77%{transform:scaleX(1.12)}}
@keyframes burst{0%,21%,30%,71%,80%,100%{opacity:0;transform:scale(.3) rotate(0)}23.5%,73.5%{opacity:1;transform:scale(1.08) rotate(14deg)}}
@keyframes vs-hit{0%,20%,29%,70%,79%,100%{transform:translate(-50%,-50%) rotate(-8deg) scale(1)}23.5%,73.5%{transform:translate(-50%,-50%) rotate(6deg) scale(1.22)}}
@keyframes dot{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-.14rem)}}
@keyframes say{0%{opacity:0;transform:translateY(.4rem) scale(.94)}60%{opacity:1;transform:translateY(-.08rem) scale(1.01)}100%{opacity:1;transform:none}}
html.motion .bob{animation:bob 1.1s ease-in-out infinite}
html.motion .shade{animation:shade 1.1s ease-in-out infinite}
html.motion .fighter.right .bob,html.motion .fighter.right .shade{animation-delay:-.55s}
html.motion .ring[data-bout] .fighter.left:not([data-state=done]){animation:lunge-l 4.8s var(--ease) infinite}
html.motion .ring[data-bout] .fighter.left:not([data-state=done]) .lead{animation:punch-l 4.8s var(--ease) infinite}
html.motion .ring[data-bout=on] .fighter.right:not([data-state=done]){animation:lunge-r 4.8s var(--ease) infinite}
html.motion .ring[data-bout=on] .fighter.right:not([data-state=done]) .lead{animation:punch-r 4.8s var(--ease) infinite}
html.motion .ring[data-bout=on] .fighter.left[data-state=done],html.motion .ring[data-bout=on] .fighter.right[data-state=done]{animation:none}
html.motion .ring[data-bout=on] .burst{animation:burst 4.8s ease-out infinite}
html.motion .ring[data-bout=on] .vs{animation:vs-hit 4.8s var(--ease) infinite}
html.motion .fighter[data-state=done] .bob,html.motion .fighter[data-state=done] .shade{animation-duration:2.2s}
html.motion .dots i{animation:dot 1.2s ease-in-out infinite}
html.motion .dots i:nth-child(2){animation-delay:.18s}
html.motion .dots i:nth-child(3){animation-delay:.36s}

/* Short screens keep the layout with smaller type. */
@media(max-height:760px) and (min-width:901px){
.showcase{padding:1rem 1.5rem 1.2rem}
.show-body{margin-top:1rem}
.show-title{font-size:1.15rem}
.agent-line{margin-top:.7rem}
.agent-name{font-size:2.2rem}
.agent-task{font-size:1.1rem}
.hour-num{font-size:2rem}
.big{font-size:2.1rem}
.card.now .note{-webkit-line-clamp:3}
}
@media(max-width:1200px) and (min-width:901px){
.board{grid-template-columns:repeat(3,minmax(0,1fr)) 27rem}
.connection{display:none}
.masthead{gap:1.3rem}
.show-title{display:-webkit-box;font-size:1.05rem;line-height:1.15;white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.partners{gap:.9rem}
.partners-label{display:none}
.show-row .icon-btn{display:none}
.big{font-size:2.1rem}
}

/* 960x540 and other very short screens: one lane of questions, a smaller ring, and each GPU's logo small in its corner. */
@media(max-height:600px) and (min-width:901px){
.quiz-label{display:none}
.quiz-card{min-height:2.3rem}
.quiz-text{-webkit-line-clamp:1}
.agent-line{margin-top:.45rem}
.agent-name{font-size:1.8rem}
.agent-status{height:1.35rem;font-size:.68rem}
.bake-art-slot{width:1.85rem;height:1.85rem;margin:-.4rem 0 -.15rem -.35rem}
.agent-task{margin-top:.35rem}
.ring{min-height:9.5rem;margin:.6rem 0 .7rem}
.cell-logo{top:.2rem;right:.2rem}
.cell .badge{width:1rem;height:1rem}
.cell-no,.cell-temp{display:none}
}

/* Phones and narrow windows scroll one column. */
@media(max-width:900px){
html{font-size:14px}
html,body{height:auto;min-height:100dvh;overflow:auto}
.board{display:flex;flex-direction:column;height:auto;padding:.75rem}
.masthead{flex-wrap:wrap;height:auto;gap:.7rem 1.1rem;padding:.9rem .9rem .2rem}
.show-title{order:2;flex-basis:100%;text-align:left;white-space:normal}
.partners{order:3;flex-wrap:wrap;gap:.7rem 1.1rem}
.models{width:100%}
.show-row{grid-template-columns:minmax(0,1fr)}
.facts{flex-wrap:wrap}
.connection,.clock{display:none}
.show-body{display:flex;flex-direction:column;gap:1.5rem}
.agent-line{flex-wrap:wrap}
.agent-name{font-size:2.2rem;white-space:normal}
.exp-board{min-height:16rem}
.stat{min-height:20rem}
.cards{height:40rem;flex:none}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}