/* Stage: a clean screen without site header, chat, language dock or analytics. 16:9 slides scale with the viewport on
   laptops and projectors; on phones a slide is a readable block that scrolls instead of shrinking. Without JS the slides are a list. */
:root{--st-paper:#f0ede5;--st-ink:#242522;--st-muted:#55564f;--st-line:#c6c4bb;--st-accent:#8f2a1d;--st-panel:#e6e2d6}
html,body{margin:0;background:var(--st-paper);color:var(--st-ink);font-family:'Inter',sans-serif}
*{box-sizing:border-box}
a{color:inherit}
/* hidden by clipping, not by moving it off-screen: a left:-9999px link scrolls the page sideways in right-to-left languages */
.st-skip{position:absolute;inset-inline-start:8px;top:8px;background:var(--st-ink);color:var(--st-paper);padding:12px 16px;z-index:10;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.st-skip:focus{clip-path:none;width:auto;height:auto;overflow:visible}
:focus-visible{outline:3px solid var(--st-accent);outline-offset:3px}
.st-head{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:1px solid var(--st-line);font:13px/1.5 ui-monospace,'Courier New',monospace}
.st-head a{display:inline-flex;align-items:center;min-height:44px}
.st-head h1{font:inherit;margin:0}
.st-deck{list-style:none;margin:0;padding:24px;display:grid;gap:24px}
.slide{position:relative;background:var(--st-paper);border:1px solid var(--st-line);aspect-ratio:16/9;container-type:size;overflow:hidden;scroll-margin-top:12px}
.slide:focus{outline:none}
.slide:focus-visible{outline:none}
.sl{position:absolute;inset:0;padding:4.5cqh 6cqw 4cqh;display:flex;flex-direction:column;gap:3cqh}
.sl-body{margin:auto 0;display:flex;flex-direction:column;gap:3cqh;min-height:0}
.sl-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:4cqw}
.sl-mark{margin:0;font:clamp(11px,1.45cqw,26px)/1.3 ui-monospace,'Courier New',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--st-muted);max-width:70cqw}
.sl-num{margin:0 0 0 auto;font:clamp(11px,1.4cqw,24px) ui-monospace,'Courier New',monospace;color:var(--st-muted);white-space:nowrap}
.sl-src{font:clamp(11px,1.3cqw,22px)/1.35 ui-monospace,'Courier New',monospace;color:var(--st-muted);margin:0}
.slide h2{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(22px,5.4cqw,104px);line-height:1.04;margin:0;max-width:24ch;text-wrap:balance}
.slide .sl-big h2{font-size:clamp(28px,7.2cqw,140px);max-width:16ch}
.slide p.sl-lead{font-size:clamp(16px,2.5cqw,46px);line-height:1.3;max-width:42ch;margin:0}
.sl-row{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2cqw;counter-reset:r}
.sl-row li{border-top:.45cqh solid var(--st-ink);padding-top:1.6cqh;font-size:clamp(14px,2.05cqw,38px);line-height:1.25;counter-increment:r}
.sl-row.is-num li::before{content:counter(r,decimal-leading-zero);display:block;font:clamp(11px,1.3cqw,24px) ui-monospace,'Courier New',monospace;color:var(--st-muted);margin-bottom:.8cqh}
.sl-row li b{display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(16px,2.6cqw,48px);line-height:1.1;margin-bottom:.8cqh}
.sl-case{display:grid;grid-template-columns:1fr 1fr;gap:3cqh 4cqw;margin:0}
.sl-case div{border-top:.35cqh solid var(--st-line);padding-top:1.2cqh}
.sl-case dt{font:clamp(11px,1.3cqw,24px) ui-monospace,'Courier New',monospace;text-transform:uppercase;letter-spacing:.05em;color:var(--st-muted);margin:0 0 .6cqh}
.sl-case dd{margin:0;font-size:clamp(14px,2.05cqw,38px);line-height:1.25}
.sl-case div.is-key{border-top-color:var(--st-accent)}
.sl-fig{margin:0;display:flex;justify-content:center;align-items:center;min-height:0;flex:1}
.sl-fig svg{max-width:100%;max-height:56cqh;width:auto;height:auto;display:block}
.sl-calc{font-family:'Oswald',sans-serif;font-size:clamp(22px,5cqw,92px);line-height:1.15;margin:0}
.sl-calc span{color:var(--st-muted)}
.sl-qr{display:grid;grid-template-columns:auto 1fr;gap:4cqw;align-items:center}
.sl-qr svg{width:28cqh;height:28cqh;background:#fff;padding:1.4cqh}
.sl-qr p{font:clamp(13px,1.9cqw,34px)/1.35 ui-monospace,'Courier New',monospace;margin:0;word-break:break-word}
.sl-pair{display:grid;grid-template-columns:1fr 1fr;gap:4cqw}
.sl-pair figure{margin:0}
.sl-pair svg{width:100%;height:auto;display:block;max-height:46cqh}
.sl-pair figcaption{font-size:clamp(13px,1.9cqw,34px);margin-top:1.2cqh}
.st-bar,.st-reserve,.st-status,.st-controls{display:none}
.st-js .st-controls{display:block} /* without JS the controls do not exist: no empty landmark */

/* With JS: one slide at a time. */
.st-js body{overflow:hidden}
/* clean stage: the title stays for assistive tech (one h1), the header link gives way to «Выйти» in the bar */
.st-js .st-head{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.st-js .st-head a{display:none}
.st-js .st-deck{position:fixed;inset:0 0 64px 0;padding:0;display:flex;align-items:center;justify-content:center}
.st-js .slide{display:none;border:0;width:min(100vw,calc((100vh - 64px)*16/9));height:auto}
.st-js .slide.is-current{display:block}
.st-js .st-bar{display:flex;position:fixed;left:0;right:0;bottom:0;height:64px;align-items:center;gap:8px;padding:0 12px;border-top:1px solid var(--st-line);background:var(--st-paper);font:14px ui-monospace,'Courier New',monospace}
.st-bar button,.st-bar a,.st-reserve a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--st-ink);background:transparent;color:var(--st-ink);font:inherit;text-decoration:none;cursor:pointer}
.st-bar button:disabled{opacity:.45;cursor:not-allowed}
.st-bar button:hover,.st-bar a:hover{background:var(--st-panel)}
.st-bar [data-st-counter]{min-width:7ch;text-align:center}
.st-bar .st-hint{color:var(--st-muted);margin-inline-start:auto}
.st-bar .st-gap{flex:1}
.st-js .st-status{display:block;position:fixed;left:12px;bottom:72px;background:var(--st-ink);color:var(--st-paper);padding:8px 12px;font:13px ui-monospace,'Courier New',monospace;max-width:calc(100vw - 24px)}
.st-js .st-status:empty{display:none}
.st-js .st-reserve:not([hidden]){display:block;position:fixed;right:12px;bottom:72px;width:min(420px,calc(100vw - 24px));max-height:calc(100vh - 96px);overflow:auto;background:var(--st-paper);border:1px solid var(--st-ink);padding:12px}
.st-reserve h2{font:13px ui-monospace,'Courier New',monospace;text-transform:uppercase;letter-spacing:.06em;margin:4px 0 8px}
.st-reserve ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.st-reserve a{justify-content:flex-start;width:100%;text-align:start;gap:10px;padding:8px 12px;line-height:1.3}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:fullscreen .st-bar{opacity:.0;transition:opacity .2s}
:fullscreen .st-bar:hover,:fullscreen .st-bar:focus-within{opacity:1}

/* Phones and narrow windows: no shrinking. A slide is a block with readable type that scrolls. */
@media (max-width:760px),(max-height:420px) and (max-width:960px){
 .st-js body{overflow:auto}
 .st-js .st-deck{position:static;display:block;padding:0 0 80px}
 .slide,.st-js .slide{aspect-ratio:auto;width:100%;container-type:normal;overflow:visible;min-height:calc(100vh - 64px)}
 .sl{position:static;padding:32px 20px 40px;gap:20px}
 .sl-body{margin:0;gap:20px}
 .sl-foot{flex-direction:column;align-items:flex-start;gap:6px}
 .sl-mark{font-size:12px;max-width:none}
 .sl-num{font-size:12px;margin:0}
 .sl-src{font-size:12px}
 .slide h2,.slide .sl-big h2{font-size:clamp(28px,8vw,44px)}
 .slide p.sl-lead{font-size:19px}
 .sl-row{grid-auto-flow:row;gap:14px}
 .sl-row li{font-size:17px;border-top-width:2px;padding-top:8px}
 .sl-row li b{font-size:20px}
 .sl-case{grid-template-columns:1fr;gap:12px}
 .sl-case dt{font-size:13px}
 .sl-case dd{font-size:17px}
 .sl-calc{font-size:30px}
 .sl-qr{grid-template-columns:1fr}
 .sl-qr svg{width:180px;height:180px;padding:8px}
 .sl-qr p{font-size:15px}
 .sl-pair{grid-template-columns:1fr;gap:16px}
 .sl-pair figcaption{font-size:16px}
 .sl-fig svg{max-height:none}
 .st-bar .st-hint,.st-bar [data-st-fullscreen]{display:none}
 .st-js .st-bar{overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{
 .st-bar,.st-reserve,.st-status,.st-skip{display:none!important}
 .st-js body{overflow:visible}
 .st-js .st-deck,.st-deck{position:static;display:block;padding:0}
 .slide,.st-js .slide{display:block!important;width:100%;break-after:page;border:1px solid #999;margin:0 0 8mm}
}
/* clean stage (UI §3): the site build plaque that prepare_pages appends to every page stays in the no-JS list and in
   build-info.json, but is not shown over the slides while presenting */
.st-js body>#build-plaque{display:none!important}

/* Final slide: the QR code keeps a clean white quiet zone; the thin red line stands beside it, never on it. */
.sl-qr-code{display:flex;align-items:stretch;gap:2cqw}
.sl-qr-code::after{content:"";width:3px;background:#FF3B30;flex:none}


/* Revised 24.10: Runway illustration, live task table, project QR and model takeaway. */
.sl-photo{margin:0;display:grid;gap:1cqh;justify-items:center}
.sl-photo img{display:block;width:auto;max-width:100%;height:39cqh;object-fit:contain}
.sl-photo figcaption{font-size:clamp(13px,1.7cqw,30px);color:var(--st-muted)}
.slide:has(.sl-photo) .sl-body{gap:1.6cqh}
.sl-ai-table{border-collapse:collapse;width:100%;font-size:clamp(13px,1.7cqw,31px);line-height:1.25;text-align:start}
.sl-ai-table th,.sl-ai-table td{padding:1.5cqh 1cqw;border-bottom:1px solid var(--st-line);vertical-align:top;text-align:start}
.sl-ai-table thead th{font:clamp(11px,1.35cqw,24px) ui-monospace,monospace;text-transform:uppercase}
.sl-ai-table tbody th{font-family:Oswald,sans-serif;font-size:clamp(17px,2.1cqw,39px)}
.sl-project{display:grid;grid-template-columns:1fr 25cqh;gap:4cqw;align-items:center}
.sl-project p{font-size:clamp(14px,2cqw,36px);line-height:1.3;margin:0 0 1.6cqh}
.sl-project>div>a{font:clamp(12px,1.7cqw,30px) ui-monospace,monospace;overflow-wrap:anywhere}
.sl-project-qr svg{width:25cqh;height:25cqh;display:block}
.sl-takeaway{border-top:1px solid var(--st-accent);padding-top:1.4cqh;margin:0;font-size:clamp(13px,1.75cqw,32px);line-height:1.3}
.slide:has(.sl-takeaway) h2{font-size:clamp(22px,4.5cqw,86px)}
.slide:has(.sl-takeaway) .sl-body{gap:2cqh}
.slide:has(.sl-takeaway) p.sl-lead{font-size:clamp(16px,2.1cqw,38px)}
@media (max-width:760px),(max-height:420px) and (max-width:960px){
 .sl-photo img{width:100%;height:auto}.sl-photo{gap:12px}.sl-photo figcaption{font-size:15px}
 .sl-ai-table{font-size:16px;table-layout:fixed}.sl-ai-table th,.sl-ai-table td{padding:8px 4px}.sl-ai-table thead th{font-size:16px}.sl-ai-table tbody th{font-size:16px}
 .sl-project{grid-template-columns:1fr;gap:24px}.sl-project p{font-size:18px;margin-bottom:14px}.sl-project>div>a{font-size:15px}.sl-project-qr svg{width:180px;height:180px}
 .sl-takeaway{font-size:17px;padding-top:16px}.slide:has(.sl-takeaway) h2{font-size:34px}.slide:has(.sl-takeaway) p.sl-lead{font-size:18px}.slide:has(.sl-takeaway) .sl-body{gap:20px}
}

@media(max-width:760px){.sl-ai-table td,.sl-ai-table th{overflow-wrap:anywhere}}

@media(max-width:760px){.sl-project>div>a{font-size:16px;display:inline-flex;align-items:center;min-height:44px}.sl-photo figcaption{font-size:16px}}