.work { border:var(--bd) solid var(--line); border-left-color:var(--tone);
        background:var(--bg1); margin:0 0 var(--s3); }
.work.think { --tone:var(--yellow); }
.work summary { list-style:none; cursor:pointer; padding:var(--s2) var(--s3);
                color:var(--tone); display:flex; align-items:center; gap:var(--s2); }
.work summary::-webkit-details-marker { display:none; }
.work summary::after { content:"▾"; margin-left:auto; color:var(--faint); }
.work[open] summary::after { content:"▴"; }
.work .tt { font:var(--fs-micro) var(--mono); color:var(--faint); text-transform:none; }
.think .tk { padding:0 var(--s3) var(--s3); font:var(--fs-code)/1.6 var(--mono); color:var(--muted);
             white-space:pre-wrap; max-height:280px; overflow:auto; }

.stack .tools { display:contents; }

.pic { margin:0 0 var(--s3); width:min(100%, 512px); border:var(--bd) solid var(--line2);
       background:var(--bg1); box-shadow:var(--shadow); }
.pic img { display:block; width:100%; height:auto; cursor:zoom-in; }
.pic figcaption { display:flex; align-items:center; gap:var(--s3);
                  padding:var(--s2) var(--s3); border-top:var(--bd) solid var(--line); }
.pic .cost { font:var(--fs-micro) var(--mono); color:var(--muted); }
.pic .save, .viewer .save { margin-left:auto; font:var(--fs-micro) var(--mono); color:var(--acc);
             text-decoration:none; }
.pic .save:hover, .viewer .save:hover { text-decoration:underline; }

.pic .num { font:var(--fs-micro) var(--mono); color:var(--muted); }
.pic .use { margin-left:auto; padding:0; border:0; background:none; cursor:pointer;
            font:var(--fs-micro) var(--mono); color:var(--acc); }
.pic .use:hover { text-decoration:underline; }
.pic .use + .save { margin-left:0; }
.pic .ph { aspect-ratio:1; display:flex; align-items:center; justify-content:center; gap:var(--s2);
           padding:var(--s4); color:var(--muted); text-align:center; }
.pic.failed .ph, .pic.stopped .ph { aspect-ratio:auto; color:var(--faint); }
.pic.failed { border-left-color:var(--red); box-shadow:none; }
.pic.stopped { box-shadow:none; }
.pic.gone img, .pic.gone .save { display:none; }
.pic .gone-note { color:var(--faint); font:var(--fs-micro) var(--mono); }

.pics { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s2);
        width:min(100%, 768px); margin:0 0 var(--s3); }
.pics .pic { width:auto; margin:0; }
.pics > .ph { grid-column:1 / -1; color:var(--faint); }

.msg.user .ups { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--s2);
                 margin:0 0 var(--s2); }
.msg.user .ups .pic { width:160px; margin:0; }
.msg.user .body:empty { display:none; }

.pic.running, .vid-stage { position:relative; container-type:inline-size; }
.draw { display:grid; grid-template-columns:repeat(var(--cols),1fr);
        grid-template-rows:repeat(var(--rows),1fr); aspect-ratio:var(--ratio, 1); padding:2%;
        font-family:var(--mono); }
.draw .cell { position:relative; overflow:hidden; display:flex; justify-content:center;
              font-style:normal; }
.draw .g, .draw .col { font-size:calc(96cqi / var(--cols)); line-height:1; font-weight:400; }
.draw .col { display:flex; flex-direction:column; align-items:center; width:100%; }
.draw .col s { display:block; height:1em; text-decoration:none; }

.draw.tiles .g { --fade:3.6s; transform:scaleX(1.7); opacity:0;
                 animation:drawFade var(--fade) ease-in-out infinite;
                 animation-delay:calc(var(--at) * -1 * var(--fade)); }
.draw.decoding .col { animation:drawStep var(--dur) steps(var(--k)) infinite;
                      animation-delay:var(--d); }
@keyframes drawFade { 0%,100% { opacity:0; } 45%,60% { opacity:1; } }
@keyframes drawStep { to { transform:translateY(calc(var(--k) * -1em)); } }

@media (prefers-reduced-motion:reduce) { .draw * { animation-play-state:paused; } }
.pic .since { position:absolute; left:var(--s2); bottom:var(--s2); padding:5px 7px;
              font:600 var(--fs-micro)/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
              color:var(--muted); background:rgba(var(--bg1-rgb),.86); border:1px solid var(--line2);
              font-variant-numeric:tabular-nums; }
.pic .since b { font-weight:600; }

.vid { border:var(--bd) solid var(--line); border-left-color:var(--acc); background:var(--bg1);
       margin:0 0 var(--s3); padding:var(--s2) var(--s3); display:flex; flex-direction:column;
       gap:var(--s2); }
.vid-h { color:var(--acc); display:flex; align-items:baseline; gap:var(--s2); min-width:0; }
.vid-h .tt { font:var(--fs-micro) var(--mono); color:var(--faint); text-transform:none;
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.vid-sum { display:flex; flex-direction:column; gap:2px; padding-left:var(--s2);
           border-left:1px dashed var(--line2); }
.vid-sum .micro { color:var(--faint); }
.vid-sum p { margin:0; color:var(--muted); font-size:var(--fs-ui); font-style:italic;
             overflow-wrap:anywhere; }
.vid-acts { display:flex; flex-wrap:wrap; gap:var(--s2); }
.vid-note { color:var(--faint); font-variant-numeric:tabular-nums; }
.vid-link { background:none; border:0; padding:0; font:inherit; color:var(--acc); cursor:pointer; }
.vid-link:hover { text-decoration:underline; }
.vid.failed { border-left-color:var(--red); }
.vid.declined, .vid.gone { border-left-color:var(--line2); }

.vid-fig { width:min(100%, 512px, calc(66vh * var(--ratio))); }
.vid-fig video { display:block; width:100%; aspect-ratio:var(--ratio); object-fit:contain;
                 background:#000; }
.vid-fig figcaption { min-width:0; }
.vid-cap { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
           font:var(--fs-micro) var(--ui); color:var(--muted); font-style:italic; }

.viewer .box { width:auto; max-width:min(92vw, 1254px); max-height:none; overflow:visible;
               margin:0; padding:0; border:var(--bd) solid var(--line2); }
.viewer img { display:block; max-width:100%; max-height:82vh; width:auto; height:auto;
              object-fit:contain; cursor:zoom-out; }
.viewer figcaption { display:flex; align-items:center; gap:var(--s3); padding:var(--s2) var(--s3);
                     border-top:var(--bd) solid var(--line); background:var(--bg1); }
.caret { width:7px; height:15px; vertical-align:-3px; background:var(--acc); }

.msg .body { --phosphor:#B8FFE0; }
.msg .body .caret { background:var(--phosphor);
                    box-shadow:0 0 12px 3px rgba(var(--acc-rgb),.7); }
.msg .body .caret.moving { animation:none; }