/* Match the supplied desktop reference at the visitor's actual viewport. */
@media(min-width:951px){
 body{--desktop-scale:clamp(.55,calc(100vw / 1728px),1.5);--desktop-header:69px}
 body #main .section.examples{padding-block:0}
 body #main .examples-sticky{width:min(1800px,69%);top:var(--desktop-header);min-height:calc(100svh - var(--desktop-header));padding-block:clamp(30px,4.4svh,48px) 30px;justify-content:flex-start}
 body #main .examples-head{width:100%;max-width:none;margin-bottom:calc(24px * var(--desktop-scale))}
 body #main .examples-head h2{font-size:clamp(26px,2.45vw,63px);line-height:1.2;white-space:nowrap}
 body #main .examples-head>p:last-child{max-width:none;font-size:calc(18px * var(--desktop-scale));margin-top:calc(22px * var(--desktop-scale))}
 body #main .role-tabs{gap:calc(7px * var(--desktop-scale));margin-bottom:calc(26px * var(--desktop-scale))}
 body #main .role-tabs button{font-size:calc(14px * var(--desktop-scale));padding:calc(6px * var(--desktop-scale)) calc(12px * var(--desktop-scale));min-height:calc(32px * var(--desktop-scale))}
 body #main .uploaded-example .fc-uc{zoom:var(--desktop-scale);width:auto;display:grid;grid-template-columns:340px minmax(0,1fr);align-items:start;gap:44px}
 body #main .uploaded-example .fc-uc-left{width:auto;max-width:none;display:flex;gap:30px;padding-top:46px}
 body #main .uploaded-example .fc-ctx{font-size:18px;line-height:1.5}
 body #main .uploaded-example .fc-ask p{font-size:16px;line-height:1.55}
 body #main .uploaded-example .fc-pick{font-size:15px}
 body #main .uploaded-example .fc{zoom:1;width:100%;--fc-height:clamp(450px,calc((100svh - 250px * var(--desktop-scale) - 60px) / var(--desktop-scale)),740px)}
 body #main .uploaded-example .fc-uc-right{width:auto;min-width:0}
}

@media(min-width:1920px){
 body #main .uploaded-example .fc{--fc-height:clamp(450px,calc(100svh / var(--desktop-scale) - 320px),740px)}
}
/* One desktop composition, scaled as a whole at every screen width. */
body #main .uploaded-example .fc-uc{
 width:1360px;zoom:calc(100cqw / 1360px);
 display:grid;grid-template-columns:400px 920px;gap:40px;align-items:start;
}
body #main .uploaded-example .fc-uc-left{
 width:auto;max-width:none;display:flex;flex-direction:column;gap:30px;padding-top:46px;
}
body #main .uploaded-example .fc-uc-right{width:920px;min-width:0}
body #main .uploaded-example .fc{
 width:1000px;height:auto;aspect-ratio:16 / 10;zoom:.92;border-radius:16px;
}
body #main .uploaded-example .fc-ctx{font-size:18px;line-height:1.5}
body #main .uploaded-example .fc-ask{padding:16px 10px 10px 20px;gap:14px;border-radius:28px}
body #main .uploaded-example .fc-ask p{font-size:16px;line-height:1.55}
body #main .uploaded-example .fc-pick{font-size:15px}
body #main .uploaded-example .fc-top{padding:0 20px 0 24px}
body #main .uploaded-example .fc-dock{padding:10px 24px 14px}
body #main .uploaded-example .fc-app{zoom:.8}
body #main .uploaded-example .fc-body{padding:16px;gap:14px}
body #main .uploaded-example .fc-card{padding:18px 20px 20px;gap:16px}
body #main .uploaded-example .fc-body > .fc-card:first-child{padding:12px 14px;gap:10px}
body #main .uploaded-example .fc-body > .fc-stats:first-child{grid-template-columns:repeat(4,minmax(0,1fr));padding:12px 0;gap:0}
body #main .uploaded-example .fc-stat{padding:0 14px;gap:4px}
body #main .uploaded-example .fc-stat .v,
body #main .uploaded-example .fc-meter .v{font-size:23px}
body #main .uploaded-example .fc-meters{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:22px;row-gap:16px;padding:0 6px}
body #main .uploaded-example .fc-meter .l{font-size:14px;white-space:normal}
body #main .uploaded-example .fc-meter .f{display:flex;font-size:12.5px;line-height:1.4}
/* The introductory prompt uses the same scale before the full example appears. */
body #main .example-panels{container-type:inline-size}
body #main .example-intro .fc-ask{
 width:510px;zoom:calc(100cqw / 1360px);
 padding:16px 10px 10px 20px;gap:14px;border-radius:28px;
}
body #main .example-intro .fc-ask p{font-size:16px;line-height:1.55}
body #main .example-intro .fc-pick{font-size:15px}
/* Tighter ChatGPT chrome with quieter labels and more sidebar separation. */
body #main .uploaded-example .fc-top{height:48px;padding-inline:16px}
body #main .uploaded-example .fc-model{font-size:16px;gap:6px}
body #main .uploaded-example .fc-model svg{width:11px;height:11px}
body #main .uploaded-example .fc-share{font-size:12.5px;gap:6px;padding:5px 6px}
body #main .uploaded-example .fc-share svg{width:16px;height:16px}
body #main .uploaded-example .fc-thread{max-width:none;padding:4px 16px 76px}
body #main .uploaded-example .fc-dock{padding:8px 16px 10px}
body #main .uploaded-example .fc-composer{max-width:none}
body #main .uploaded-example .fc-rail{gap:8px}
/* Match the ChatGPT header's system typography without compressed tracking. */
body #main .uploaded-example .fc-model{
 font:650 16px/32px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 letter-spacing:normal;font-stretch:normal;white-space:nowrap;flex-shrink:0;
 align-items:center;gap:8px;
}
body #main .uploaded-example .fc-share{letter-spacing:normal;line-height:1.5;font-weight:500}
