#gallery{padding-top:32px}.gallery-header{max-width:820px;margin:0 auto 36px}.gallery-header h1{font-size:17px;font-weight:500;margin:0}.gallery-figure{margin-bottom:64px}#detailBackdrop{position:fixed;inset:0;z-index:11;background:#00000024;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}#card.detail-overlay{width:min(640px,calc(100% - 32px))!important}.tool-event{display:flex;align-items:flex-start;gap:10px;color:var(--text);opacity:.66;font-size:12px;line-height:1.6;margin:0 0 0 2px;padding:0}.tool-event>svg{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.tool-event span{display:block}.tool-event small{display:block;font-size:11px;margin-top:3px}.gallery-retry{border:1px solid var(--line);border-radius:8px;padding:12px 22px}.prompt-section>h3{margin-bottom:24px!important}
@media(max-width:720px){#gallery{padding-top:24px;padding-bottom:30px}.gallery-header{margin-bottom:28px}.gallery-header h1{font-size:16px}.gallery-figure{margin-bottom:40px}#card.detail-overlay{width:100%!important}#detailBackdrop{backdrop-filter:none;-webkit-backdrop-filter:none}.tool-event{margin-left:0}}
.agent-run{margin:17px 0 16px;padding:15px 16px;background:#88888805;border:1px solid var(--line);border-radius:10px;color:var(--text)}.agent-run-head{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:11px;font-weight:500;line-height:1.5;opacity:.72}.agent-run-state{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:400;white-space:nowrap}.agent-run-state svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.agent-steps{list-style:none;padding:0;margin:14px 0 0}.agent-steps li{position:relative;padding:0 0 17px 13px;border-left:1px solid var(--line)}.agent-steps li:last-child{padding-bottom:0}.agent-steps li:before{position:absolute;content:"";left:-3px;top:6px;width:5px;height:5px;border-radius:50%;background:var(--text);opacity:.35}.agent-step-line{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;font-size:11px;line-height:1.5;opacity:.78}.agent-tool{display:inline-flex;align-items:center;gap:4px;font-size:10px;white-space:nowrap}.agent-tool svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}.agent-steps li>p{font-size:12px;line-height:1.65;margin:5px 0 0;opacity:.74}.agent-duration{display:block;margin-top:12px;font-size:10px;opacity:.65}.turn .agent-followup{margin-top:16px}.turn-ai:has(.agent-run){padding-right:0}
@media(max-width:720px){.agent-run{padding:14px 13px}.agent-run-head{gap:9px}.agent-step-line{gap:5px 8px}}
.code-always-visible{margin-top:38px;padding-top:28px;border-top:1px solid var(--line)}.agent-plan{margin:0 0 18px;padding:0 0 0 14px;border-left:2px solid var(--line)}.agent-plan-title{font-size:11px;font-weight:500;opacity:.7}.agent-plan ol{list-style:none;counter-reset:plan;display:grid;gap:8px;margin:12px 0 0;padding:0}.agent-plan li{counter-increment:plan;display:flex;gap:10px;font-size:12px;line-height:1.6;opacity:.8}.agent-plan li:before{content:counter(plan);flex:none;width:17px;height:17px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:9px;margin-top:2px}.agent-output{margin-top:22px;border:1px solid var(--line);border-radius:11px;overflow:hidden}.agent-output summary{list-style:none;display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer}.agent-output summary::-webkit-details-marker{display:none}.agent-output summary>svg{flex:none;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.1;opacity:.65}.agent-output summary>div{min-width:0;flex:1}.agent-output small{display:block;font-size:10px;opacity:.6;margin-bottom:3px}.agent-output summary span:not(.output-expand){font-size:12px;font-weight:500}.turn .agent-output summary p{font-size:11px;line-height:1.5;opacity:.7;margin:5px 0 0}.output-expand{font-size:20px;font-weight:300;opacity:.6}.agent-output[open] .output-expand{rotate:45deg}.agent-output>img{display:block;width:100%;height:auto;background:#fff;border-top:1px solid var(--line)}.agent-output summary:focus-visible{outline:1px solid var(--focus);outline-offset:-3px}
.agent-files{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:14px}.agent-files>span{display:inline-flex;gap:5px;align-items:center;padding:5px 7px;border:1px solid var(--line);border-radius:5px;max-width:100%;min-width:0;opacity:.72}.agent-files>span>span{font-size:10px;overflow-wrap:anywhere}.agent-files svg{flex:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.1}.agent-files>small{font-size:10px;opacity:.65}.agent-phase{font-size:9px;border:1px solid var(--line);padding:1px 5px;border-radius:4px;line-height:1.5}

/* Gallery: image first, quiet numbering, readable captions. */
:root{--ground:#fff;--card:#fff;--text:#202020;--line:#e6e6e6;--focus:#555;background:var(--ground);font-family:Arial,Helvetica,sans-serif}
#gallery{padding:0 28px 80px}
.gallery-header{position:sticky;top:0;z-index:5;max-width:860px;margin:0 auto 40px;padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--ground);border-bottom:1px solid var(--line)}
.gallery-header h1{font-size:20px;letter-spacing:-.5px;font-weight:400}
.chapter-filter{position:relative;max-width:75%}
.chapter-filter select{appearance:none;-webkit-appearance:none;width:100%;min-height:44px;padding:10px 40px 10px 16px;border:1px solid var(--line);border-radius:24px;background:var(--card);color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.chapter-filter svg{position:absolute;right:14px;top:14px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.25;pointer-events:none}
.chapter-filter select:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
#galleryList{max-width:860px}
.gallery-figure{margin:0 0 58px;padding:0 0 36px;border-bottom:1px solid var(--line);scroll-margin-top:110px}
.gallery-caption{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;margin:20px 0 0;font-size:16px;line-height:1.6;font-weight:400;letter-spacing:-.1px}
.gallery-caption span{opacity:1;color:var(--text);font-weight:400}
.gallery-caption .gallery-number{font-size:12px;line-height:2.1;color:var(--text);opacity:.58;white-space:nowrap;letter-spacing:0}
.gallery-open{border-radius:10px;border:1px solid #ededed;transition:border-color .18s,box-shadow .18s}
.gallery-open:hover,.gallery-open:focus-visible,.gallery-open.active{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px #88888815}
#detailBackdrop{background:#00000030;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
#card.detail-overlay{width:min(740px,calc(100% - 48px))!important;right:24px;top:24px!important;bottom:24px;border-radius:22px;border:1px solid var(--line);box-shadow:0 18px 90px #00000020}
.detail-head{padding:28px 72px 26px 36px}
#figureCode{font-size:12px;font-weight:400;opacity:.55;margin-bottom:13px}
#card h2{display:block;font-size:23px;font-weight:400;letter-spacing:-.5px;line-height:1.4;overflow:visible;max-height:none;-webkit-line-clamp:unset}
#close{top:17px;right:17px;border:1px solid var(--line);border-radius:50%;color:var(--text);background:var(--card)}
#close:hover{background:#88888810}
#detailBody{padding:34px 36px 48px}
.prompt-section>h3{font-size:14px!important;font-weight:400!important;margin-bottom:28px!important;opacity:.62}
.conversation{gap:34px}
.turn-role{font-size:12px;font-weight:400;margin-bottom:13px}
.turn p{font-size:14px;line-height:1.8}
.turn-user{margin-left:28px;padding:20px 22px;border:0;border-radius:18px;background:#f4f4f4}
.turn-ai{padding-right:0}
.agent-run{background:transparent;border-radius:12px;padding:18px;margin:21px 0}
.agent-run-head{opacity:1;font-weight:400;font-size:12px}
.agent-run-state{opacity:.6}
.agent-plan{padding-left:18px;margin-bottom:22px}
.agent-plan-title{font-weight:400;font-size:12px}
.code-always-visible{margin-top:44px;padding-top:30px}
.code-frame{border-radius:14px}
@media(prefers-color-scheme:dark){:root{--ground:#161616;--card:#1e1e1e;--text:#eee;--line:#353535;--focus:#999}.gallery-open{border-color:#393939}.turn-user{background:#292929}.gallery-header{background:var(--ground)}}
@media(max-width:720px){
 #gallery{padding:0 18px 40px}.gallery-header{padding:14px 0;margin-bottom:26px;gap:12px}.gallery-header h1{font-size:19px}.chapter-filter select{font-size:12px;padding-left:13px;padding-right:34px}.chapter-filter svg{right:11px}
 .gallery-figure{margin-bottom:34px;padding-bottom:28px;scroll-margin-top:90px}.gallery-caption{grid-template-columns:1fr;gap:5px;margin-top:16px;font-size:15px;line-height:1.6}.gallery-caption .gallery-number{font-size:11px;line-height:1.5}.gallery-open{border-radius:7px}
 #card.detail-overlay{inset:0!important;width:100%!important;border-radius:0;border:0}
 .detail-head{padding:calc(66px + env(safe-area-inset-top)) 24px 24px}
 #figureCode{position:absolute;top:calc(25px + env(safe-area-inset-top));left:68px;margin:0;font-size:12px}
 #close{top:calc(13px + env(safe-area-inset-top));left:17px;right:auto;width:38px;height:38px}
 #card h2{font-size:21px;letter-spacing:-.35px;line-height:1.4;max-height:24dvh;overflow:auto}
 #detailBody{padding:28px 24px calc(40px + env(safe-area-inset-bottom))}
 .turn-user{margin-left:12px;padding:18px}.conversation{gap:30px}.agent-run{padding:15px}.turn p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.gallery-open{transition:none}}
.gallery-detail{display:flex;align-items:center;justify-content:center;width:fit-content;min-height:44px;margin:17px 0 0 128px;padding:10px 18px;border:1px solid var(--line);border-radius:24px;font-size:12px;font-weight:400;background:var(--card);color:var(--text)}
.gallery-detail:hover{border-color:var(--focus);background:#88888808}
.prompt-section>h3{display:flex;align-items:center;gap:6px;opacity:1}
.prompt-info{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:12px;border-radius:50%;color:var(--text);opacity:.58;margin:-12px 0}
.prompt-info svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round}
.prompt-info:hover,.prompt-info[aria-expanded=true]{opacity:1;background:#8888880b}
.prompt-info-note{margin:-8px 0 28px;padding:15px 17px;border:1px solid var(--line);border-radius:12px;font-size:12px;line-height:1.75;color:var(--text);background:#88888805;max-width:64ch}
@media(max-width:720px){.gallery-detail{margin-left:0;margin-top:15px}}
.turn-attachments{display:flex;flex-wrap:nowrap;gap:8px;margin:0 0 18px;max-width:100%;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity;scrollbar-width:thin;overscroll-behavior-x:contain}
.turn-attachment{flex:0 0 auto;scroll-snap-align:start;display:flex;align-items:center;gap:9px;min-width:0;max-width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.turn-attachment>svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.15;opacity:.6}
.turn-attachment>div{min-width:0}.turn-attachment span{display:block;font-size:12px;line-height:1.5;font-weight:400;white-space:nowrap}
.turn-attachment small{display:block;font-size:10px;line-height:1.5;opacity:.55;margin-top:2px;overflow-wrap:anywhere}

.turn-attachments:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}
.detail-preview{margin:0 0 32px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.detail-preview img{display:block;width:100%;height:auto;object-fit:contain;background:#fff}
@media(max-width:720px){.detail-preview{margin-bottom:28px;padding:8px}}