:root{--mute-l:#626158;--chat-bg:var(--paper2);--chat-bubble:var(--white);--chat-key:var(--paper);--portfolio-border:var(--mute-l)}


.staging{padding:12px 16px;background:var(--lime);color:var(--ink);font-size:var(--f1);text-align:center}
section.wrap{padding-top:48px;padding-bottom:48px}.intro{display:grid;gap:24px}.intro h1{max-width:24ch}.intro .lead{max-width:65ch}.project-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;border-top:1px solid var(--ink)}.project-row>div{display:grid;gap:24px;align-content:start}.project-row .btn{justify-self:start}.cover{display:block;background:var(--paper2);padding:24px;text-align:center;border-radius:var(--r2)}.cover img{width:min(100%,360px);height:auto;display:block;margin:auto;border:1px solid var(--portfolio-border);border-radius:var(--r)}.byline,.caption,figcaption{font-size:var(--f1);color:var(--mute-l)}.case-title{font-size:var(--f5)}.case-copy{max-width:70ch;display:grid;gap:24px}.intro>.btn{justify-self:start}.screens{background:var(--paper2)}.screens .caption{max-width:72ch;margin:24px 0 32px}.screen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.screen-grid figure{margin:0;min-width:0}.screen-grid img{width:100%;height:auto;display:block;border:1px solid var(--portfolio-border);border-radius:var(--r)}figcaption{padding-top:12px}.closing{max-width:1240px}.closing p{max-width:68ch}.closing .go{margin-top:24px}.demo-intro{display:grid;gap:24px}.demo-intro p{max-width:78ch}.tools{display:flex;gap:12px;flex-wrap:wrap}.demo-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px}.demo-layout h2{font:700 var(--f4)/1.25 var(--sans);margin-bottom:16px}.telegram{background:var(--chat-bg);border:1px solid var(--portfolio-border);border-radius:var(--r);padding:16px;min-height:240px}.telegram .bubble{background:var(--chat-bubble);padding:16px;border-radius:var(--r);font-size:var(--f2);overflow-wrap:anywhere;white-space:pre-line}.telegram blockquote{margin:12px 0;padding-left:12px;border-left:2px solid var(--ink)}.tg-buttons{display:grid;gap:8px;margin-top:8px}.tg-row{display:flex;gap:8px}.tg-row button{flex:1;min-width:0;min-height:44px;border:1px solid var(--portfolio-border);border-radius:var(--r);background:var(--chat-key);color:var(--ink);font-size:var(--f1);padding:8px;cursor:pointer}.tg-row button:hover{background:var(--lime)}.tg-row button:active{transform:translateY(1px)}.tg-row button:disabled{opacity:.6;cursor:wait}.empty{font-size:var(--f2);color:var(--mute-l)}.group-title{margin-top:32px!important}#status{min-height:24px}.telegram .bubble+.bubble{margin-top:12px}.shot{width:480px;height:660px;padding:16px;background:var(--paper);overflow:hidden}.shot-chat{height:560px;padding:0;overflow:hidden}.tg-head{padding:16px;background:var(--ink);color:var(--paper);font-size:var(--f3);font-weight:700}.tg-head small{display:block;font-size:var(--f1);font-weight:500;color:var(--mute-d)}#shot-content{padding:16px}.shot-note{font-size:var(--f1);line-height:1.4;margin-top:12px;color:var(--mute-l)}.shot .telegram .bubble{font-size:var(--f2)}
@media(max-width:1024px){.screen-grid{grid-template-columns:repeat(2,1fr)}.project-row{gap:32px}}
@media(max-width:768px){.project-row,.demo-layout{grid-template-columns:1fr}.project-row{gap:24px}.cover{max-width:480px}.intro h1{font-size:32px}.intro h1.case-title{font-size:var(--f5)}.demo-layout{padding-top:0!important}}
@media(max-width:480px){section.wrap{padding-top:32px;padding-bottom:32px}.intro h1{font-size:28px;line-height:1.2}.intro h1.case-title{font-size:22px}.screen-grid{grid-template-columns:1fr;gap:32px}.screen-grid figure{max-width:480px}.cover{padding:16px}.tools{display:grid}.tools .btn{width:100%}.screens{padding:32px 0}.intro{gap:16px}.case-copy{gap:16px}.staging{text-align:left}.demo-intro h1{font-size:28px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.existing-demos{display:grid;gap:12px;margin-top:24px}