/* The interactive Slack demo (dark window, narrated by Redstone). Extracted unchanged from the dark site; see .demo-card in styles.css for the page-level colours it expects. */
/* ───── Redstone demo (#coordinate): Slack-style window, dark theme, narrated by Redstone ───── */
/* Showcase layout: steps rail on the left, a wide Slack window on the right */
.ax-show{position:relative;left:50%;transform:translateX(-50%);width:min(1340px,calc(100vw - 32px));display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start;margin:8px 0 18px}
.ax-rail{position:sticky;top:16px}
.ax-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.ax-top .roadmap{margin:0}
.ax-play{font:400 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border:1px solid var(--line2);background:transparent;color:var(--mut);cursor:pointer}
.ax-play:hover{color:#f3ead6;border-color:var(--cream)}
.ax-beats{list-style:none;display:flex;flex-direction:column;gap:2px;margin:0;padding:0}
.ax-beats li{position:relative;padding:9px 0 9px 14px;border-left:2px solid var(--line)}
.ax-beats li::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .3s}
.ax-beats li.on::before{transform:scaleY(1)}
.ax-beats button{display:flex;align-items:baseline;gap:10px;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:var(--mut)}
.ax-beats .n{font:400 11px var(--mono);color:var(--line2);min-width:14px}
.ax-beats .t{font:500 15px/1.3 var(--ui)}
.ax-beats button:hover .t{color:#f3ead6}
.ax-beats li.done .n::before{content:"✓";color:var(--red)}.ax-beats li.done .n{font-size:0}.ax-beats li.done .n::before{font-size:12px}
.ax-beats li.done .t{color:#cfc5ad}
.ax-beats li.on .n{color:var(--red)}.ax-beats li.on .t{color:#f3ead6;font-weight:700}
.ax-beats li>i{display:block;height:2px;width:0;background:var(--red);margin:8px 0 0 24px;max-width:calc(100% - 24px)}
.ax-beats li:not(.on)>i{display:none}
.ax-say{margin:8px 0 2px 24px;font:400 14.5px/1.45 var(--ui);color:#e6dcc4;padding:10px 12px;background:rgba(239,230,210,.05);border:1px solid var(--line);border-left:2px solid var(--red)}
.ax-say:empty{display:none}
.ax-say.in{animation:axSay .4s ease-out}
.ax-say b{color:#f3ead6}
@keyframes axSay{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ax-stage{min-width:0}

.sk{--sk-bg:#1a1d21;--sk-side:#121016;--sk-top:#0d0b10;--sk-act:#1164a3;--sk-txt:#d1d2d3;--sk-hi:#f8f8f8;--sk-mut:#9a9b9d;--sk-line:#2c2e33;--sk-link:#1d9bd1;
  position:relative;border-radius:10px;overflow:hidden;background:var(--sk-bg);color:var(--sk-txt);font:15px/1.46 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(239,230,210,.14);margin-bottom:14px;user-select:none}
.sk code{font:12px/1 ui-monospace,Menlo,Consolas,monospace;background:#232529;border:1px solid #35373b;color:#e8912d;padding:2px 4px;border-radius:3px}
.sk-top{height:38px;background:var(--sk-top);display:flex;align-items:center;gap:14px;padding:0 12px;border-bottom:1px solid var(--sk-line)}
.sk-dots{display:flex;gap:6px}.sk-dots i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.sk-dots i:nth-child(2){background:#febc2e}.sk-dots i:nth-child(3){background:#28c840}
.sk-search{flex:1;max-width:460px;margin:0 auto;height:24px;border-radius:6px;background:#26282d;color:var(--sk-mut);font-size:12.5px;display:flex;align-items:center;justify-content:center}
.sk-body{display:grid;grid-template-columns:210px minmax(0,1fr) 0;height:clamp(460px,calc(100vh - 150px),640px);transition:grid-template-columns .5s cubic-bezier(.2,.8,.2,1)}
.sk.th-open .sk-body{grid-template-columns:210px minmax(0,1fr) minmax(0,340px)}
.sk-side{background:var(--sk-side);color:var(--sk-mut);padding:10px 0;font-size:14.5px;overflow:hidden}
.sk-ws{color:var(--sk-hi);font-weight:800;font-size:17px;padding:4px 16px 12px;border-bottom:1px solid var(--sk-line);margin-bottom:10px}
.sk-ws small{font-size:11px;opacity:.7}
.sk-sec{font-size:13px;padding:8px 16px 4px}
.sk-side a{display:flex;align-items:center;gap:6px;padding:4px 16px;margin:0 8px;border-radius:6px;white-space:nowrap;cursor:default;transition:background .25s,color .25s}
.sk-side a.on{background:var(--sk-act);color:#fff;font-weight:700}
.sk-badge{margin-left:auto;background:#e01e5a;color:#fff;font:700 11px/1 system-ui;padding:3px 6px;border-radius:9px;font-style:normal}
.sk-app{font-weight:600;color:var(--sk-txt)}.sk-app .sk-av{width:18px;height:18px;border-radius:4px}
.sk-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border-left:1px solid var(--sk-line);position:relative}
.sk-ch{display:flex;align-items:baseline;gap:10px;padding:10px 18px;border-bottom:1px solid var(--sk-line);white-space:nowrap;overflow:hidden}
.sk-ch b{font-size:17px;font-weight:900;color:var(--sk-hi)}.sk-ch span{font-size:13px;color:var(--sk-mut);overflow:hidden;text-overflow:ellipsis}
.sk-feed{position:relative;flex:1;min-height:0;overflow-y:auto;padding:8px 0 6px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#3a3c41 transparent}
.sk-feed[hidden]{display:none}
.sk-compose{margin:0 16px 14px;border:1px solid #3a3c41;border-radius:8px;padding:10px 12px;color:#76777a;font-size:14px}
.sk-thread{display:flex;flex-direction:column;min-width:0;min-height:0;border-left:1px solid var(--sk-line);overflow:hidden;background:var(--sk-bg)}
.sk-thread header{display:flex;align-items:baseline;gap:8px;padding:12px 16px;border-bottom:1px solid var(--sk-line);white-space:nowrap}
.sk-thread header b{font-size:17px;font-weight:900;color:var(--sk-hi)}.sk-thread header small{color:var(--sk-mut);font-size:13px}.sk-thread header span{margin-left:auto;color:var(--sk-mut)}
.sk-msg{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;padding:6px 18px}
.sk-msg.in{animation:skIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes skIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sk-av{width:36px;height:36px;border-radius:6px;display:grid;place-items:center;font:700 15px system-ui;color:#fff;background:#666;flex:none;font-style:normal}
.sk-av.bot{background:#0a0a0a url("brand/redstone-mascot-head.svg") center/contain no-repeat;image-rendering:pixelated;box-shadow:0 0 0 1px #2c2e33}
.sk-av.a{background:#c77d2e}.sk-av.r{background:#2e7d6b}.sk-av.s{background:#7b4fb0}.sk-av.v{background:#2a6cb3}
.sk-who{display:flex;align-items:baseline;gap:6px;line-height:1.3}
.sk-who b{font-weight:900;font-size:15px;color:var(--sk-hi)}.sk-t{font-size:12px;color:var(--sk-mut)}
.sk-appt{font:700 10px/1 system-ui;background:#2c2e33;color:var(--sk-mut);padding:2px 3px;border-radius:2px}
.sk-mb p{margin:0}
.sk-mb b{color:var(--sk-hi)}
.sk-at{color:#1d9bd1;background:rgba(29,155,209,.14);padding:0 2px;border-radius:3px;font-weight:500}
.sk-card{margin-top:4px;border-left:4px solid #e8321e;padding:2px 0 2px 12px;max-width:560px}
.sk-cn{font-weight:900;font-size:16px!important;color:var(--sk-hi)}.sk-ch2{color:var(--sk-mut);font-size:14px}
.sk-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 14px;margin:6px 0;font-size:14px}
.sk-f b{display:block;font-weight:700;font-size:13px}
.sk-sum{font-size:14.5px}
.sk-links a{color:var(--sk-link)}
.sk-ctx{font-size:12.5px;color:var(--sk-mut);margin-top:4px!important}
.sk-recall{margin-top:6px!important;padding:6px 10px;background:rgba(232,145,45,.1);border:1px solid rgba(232,145,45,.4);border-radius:6px;font-size:13.5px}
.sk-dec{margin-top:6px!important;font-size:14px}.sk-rs{color:var(--sk-mut);font-size:13px}
.sk-btns,.sk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sk-btns span,.sk-chips span{font:700 13px/1 system-ui;padding:8px 12px;border:1px solid #565856;border-radius:6px;background:transparent;color:var(--sk-txt);transition:transform .12s,box-shadow .15s,background .2s}
.sk-btns .p{background:#007a5a;border-color:#007a5a;color:#fff}.sk-btns .d{background:#e01e5a;border-color:#e01e5a;color:#fff}
.sk .press{transform:scale(.93);box-shadow:0 0 0 3px rgba(29,155,209,.45)}
.sk .spot{position:relative;border-radius:6px;box-shadow:0 0 0 2px #f2c94c,0 0 18px 2px rgba(242,201,76,.35);transition:box-shadow .3s}
.sk-input{margin-top:8px;min-height:44px;border:1px solid #565856;border-radius:6px;padding:8px 10px;font-size:14.5px;color:var(--sk-hi);background:#222529}
.sk-input::after{content:"";display:inline-block;width:1px;height:1em;background:var(--sk-hi);vertical-align:-2px;margin-left:1px;animation:skDot 1s infinite}
.sk-chips .p{background:#007a5a;border-color:#007a5a;color:#fff}
.sk-eph{font-size:12.5px!important;color:var(--sk-mut)}
.sk-msg.eph{background:rgba(29,155,209,.07)}
.sk-rep{display:flex;align-items:center;gap:4px;margin-top:6px!important;font-size:13px;color:var(--sk-link);font-weight:700}
.sk-rep .sk-av{width:20px;height:20px;font-size:10px;border-radius:4px}
.sk-file{display:flex;align-items:center;gap:10px;margin-top:6px;border:1px solid var(--sk-line);border-radius:8px;padding:8px 12px;max-width:300px;background:#222529}
.sk-file b{background:#e01e5a;color:#fff;font-size:11px;padding:8px 6px;border-radius:4px}
.sk-file span{display:flex;flex-direction:column;font-weight:700;font-size:14px;color:var(--sk-hi)}.sk-file small{font-weight:400;color:var(--sk-mut);font-size:12px}
.sk-sys{color:var(--sk-mut);font-size:14px}.sk-sys a{color:var(--sk-link)}
.sk-day{display:flex;align-items:center;gap:10px;margin:10px 18px;font:700 12.5px system-ui;color:var(--sk-hi)}
.sk-day::before,.sk-day::after{content:"";flex:1;height:1px;background:var(--sk-line)}
.sk-list{margin:4px 0 4px 20px;font-size:14.5px}.sk-mut{color:var(--sk-mut);font-size:13.5px}
.sk-typing{display:flex;gap:4px;padding:8px 0}.sk-typing span{width:7px;height:7px;border-radius:50%;background:#77787b;animation:skDot 1s infinite}
.sk-typing span:nth-child(2){animation-delay:.15s}.sk-typing span:nth-child(3){animation-delay:.3s}
@keyframes skDot{0%,100%{opacity:.3}50%{opacity:1}}
.sk-toast{position:absolute;top:50px;right:14px;width:min(340px,calc(100% - 28px));background:#fff;color:#1d1c1d;border-radius:10px;padding:12px 14px;box-shadow:0 12px 34px rgba(0,0,0,.5);font-size:13.5px;line-height:1.4;opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .35s,transform .4s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:3}
.sk-toast.on{opacity:1;transform:none}
.sk-toast p{margin-bottom:3px}.sk-toast b{color:#1d1c1d}.sk-tt{font-size:12px;color:#616061;font-weight:700}.sk-tm{font-size:12.5px;color:#616061}
.sk-toast code{background:#f3f3f3;border-color:#e0e0e0;color:#c01343}
.sk-send{display:inline-block;margin-top:6px;background:#1a73e8;color:#fff;font-weight:700;font-size:13px;padding:6px 14px;border-radius:16px;transition:transform .12s}
/* Redstone's guide bubble: only on narrow screens (the steps rail carries her words on desktop). Sits above the window, never over it */
@media (min-width:1181px){.sk-guide{display:none!important}}
.sk-guide{position:relative;display:flex;gap:12px;align-items:center;min-height:74px;max-width:760px;margin:0 0 16px;padding:12px 16px;border-radius:12px;
  background:#fdf8ee;color:#1d1c1d;box-shadow:0 0 0 2px #e8321e;opacity:.35;transform:translateY(4px);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.sk-guide::after{content:"";position:absolute;left:34px;bottom:-9px;width:16px;height:16px;background:#fdf8ee;transform:rotate(45deg);box-shadow:2px 2px 0 0 #e8321e}
.sk-guide.on{opacity:1;transform:none}
.sk-guide .sk-av{width:40px;height:40px;border-radius:8px;flex:none}
.sk-guide b{font:800 11.5px system-ui;letter-spacing:.06em;text-transform:uppercase;color:#e8321e}
.sk-guide p{margin:2px 0 0;font:500 16.5px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:#1d1c1d}
.sk-guide p b{font:inherit;font-weight:800;text-transform:none;letter-spacing:0;color:#1d1c1d}
.sk-cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:6;pointer-events:none;opacity:0;transform:translate(300px,200px);transition:transform .8s cubic-bezier(.3,.7,.2,1),opacity .3s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-7 1 4 8-3 1-4-8-5 5z' fill='%23fff' stroke='%23111' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/contain no-repeat}
.sk-cursor.on{opacity:1}
.sk-cursor::after{content:"";position:absolute;left:-9px;top:-9px;width:22px;height:22px;border-radius:50%;background:rgba(242,201,76,.5);transform:scale(0);opacity:0}
.sk-cursor.click::after{animation:skClick .45s ease-out}
@keyframes skClick{from{transform:scale(.2);opacity:1}to{transform:scale(1.7);opacity:0}}
#coordinate .sb2{margin:8px 0 0}
@media (max-width:1180px){
  .ax-show{grid-template-columns:1fr;gap:10px}
  .ax-rail{position:static}
  .ax-beats{flex-direction:row;gap:4px;margin-bottom:10px}
  .ax-beats li{flex:1;border:0;padding:0;height:14px;background:linear-gradient(var(--line2),var(--line2)) center/100% 3px no-repeat}
  .ax-beats li::before,.ax-beats .ax-say,.ax-beats button span{display:none}
  .ax-beats button{height:14px}
  .ax-beats li>i{display:block!important;margin:-8px 0 0;height:3px;max-width:none}
  .sk-body{height:clamp(440px,calc(100vh - 260px),560px)}
}
@media (max-width:760px){
  .sk-body{grid-template-columns:0 minmax(0,1fr) 0;height:clamp(440px,calc(100vh - 230px),520px)}
  .sk.th-open .sk-body{grid-template-columns:0 0 minmax(0,1fr)}
  .sk-side{padding:0}
  .sk-ch span{display:none}
  .sk-f{grid-template-columns:1fr 1fr}
  .sk-btns span:nth-child(n+4){display:none}
  .sk-msg{padding:6px 12px}
  .sk-guide{min-height:88px;padding:10px 12px}.sk-guide p{font-size:14.5px}.sk-guide .sk-av{width:32px;height:32px}
  .ax-beats{gap:3px}.ax-beats button span{display:none}
}


/* ───── Split demo: inside Slack (left) and outside Slack (right) ───── */
.ax-show{grid-template-columns:240px minmax(0,1fr);gap:22px}
.ax-split{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:stretch}
.ax-col{min-width:0;display:flex;flex-direction:column}
.ax-cap{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:600 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#f3ead6}
.ax-cap i{width:8px;height:8px;background:var(--red)}
.ax-cap small{font:inherit;color:var(--mut);letter-spacing:.06em}
.ax-col:last-child .ax-cap i{background:#2e7d6b}
/* Slack gives up its sidebar while the thread is open, so the two panes fit side by side */
.sk-body{grid-template-columns:150px minmax(0,1fr) 0}
.sk.th-open .sk-body{grid-template-columns:0 minmax(0,1fr) minmax(0,260px)}
.sk-side{font-size:13.5px}.sk-side a{padding:4px 12px}.sk-ws{padding:4px 12px 12px;font-size:15px}.sk-sec{padding:8px 12px 4px}
.sk-f{grid-template-columns:repeat(2,minmax(0,1fr))}
.sk-btns span:nth-child(n+4){display:none}

.os{flex:1;display:flex;flex-direction:column;min-height:0;height:clamp(460px,calc(100vh - 150px),640px);border-radius:10px;overflow:hidden;background:#15130f;color:#d9d1bd;
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(239,230,210,.14);font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ax-col:last-child{justify-content:flex-start}
.os-h{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid #2b2621;background:#0d0b09;height:58px;flex:none}
.os-h canvas{image-rendering:pixelated;flex:none}
.os-h b{display:block;font-size:14px;color:#f3ead6}
.os-h small{display:block;font-size:12px;color:#a3977e;transition:color .3s}
.os-h small.live{color:#7fd1a8}
.os-tabs{display:flex;gap:4px;padding:8px 12px 0;border-bottom:1px solid #2b2621;flex:none}
.os-tabs span{font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#7d735f;padding:7px 10px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .25s,border-color .25s}
.os-tabs span.on{color:#f3ead6;border-color:#e8321e}
.os-body{flex:1;min-height:0;overflow-y:auto;padding:14px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#3a352c transparent;background:#1c1914}
.os-idle{color:#7d735f;text-align:center;margin-top:30%;font-size:13.5px}
.os-f{flex:none;display:flex;align-items:center;gap:8px;padding:9px 14px;border-top:1px solid #2b2621;background:#0d0b09;font-size:12px;color:#a3977e}
.os-soon{font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:#e8321e;color:#fff;padding:3px 6px;border-radius:3px}
.os-it{margin-bottom:10px}
.os-it.in{animation:skIn .45s cubic-bezier(.2,.8,.2,1)}
/* text messages */
.os-top{font:600 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#7d735f;text-align:center;margin:0 0 10px}
.os-b{max-width:84%;padding:9px 12px;border-radius:16px;font-size:14px;line-height:1.4}
.os-b.rs{background:#efe6d2;color:#1d1c1d;border-bottom-left-radius:4px;margin-right:auto}
.os-b.cd{background:#2e7d6b;color:#fff;border-bottom-right-radius:4px;margin-left:auto}
.os-b small{display:block;margin-top:4px;font-size:11px;opacity:.65}
.os-who{font:600 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#7d735f;margin:0 0 3px 4px}
.os-who.r{text-align:right;margin:0 4px 3px 0}
/* email */
.os-mail{background:#fff;color:#1d1c1d;border-radius:10px;padding:12px 14px;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.os-mail .m-h{font-size:12px;color:#616061;border-bottom:1px solid #e5e5e5;padding-bottom:7px;margin-bottom:8px}
.os-mail .m-h b{color:#1d1c1d}
.os-mail p{margin:0 0 7px;font-size:13.5px}
.os-mail .m-s{font-weight:700;font-size:14px;margin-bottom:7px}
.os-mail .m-t{display:inline-block;font:700 11px/1 system-ui;background:#e7f4ee;color:#0b6b4b;border-radius:10px;padding:4px 8px;margin-top:2px}
.os-mail .m-lock{font-size:12px;color:#616061;margin:6px 0 0}
.os-mail ul{margin:0 0 7px 18px;padding:0;font-size:13.5px}
.os-ok{color:#7fd1a8;font:600 12px var(--mono);letter-spacing:.04em;margin:-2px 0 12px 4px}
/* calendar */
.os-cal{background:#fff;color:#1d1c1d;border-radius:10px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.os-cal .c-h{display:flex;justify-content:space-between;padding:9px 12px;background:#f3f3f3;border-bottom:1px solid #e5e5e5;font-size:12.5px;font-weight:700}
.os-cal .c-h span{font-weight:400;color:#616061}
.os-cal .c-row{display:grid;grid-template-columns:54px 1fr;border-bottom:1px solid #eee;min-height:38px;font-size:12px;color:#8a8a8a}
.os-cal .c-row>span{padding:8px 0 0 10px}
.os-cal .c-row>div{padding:4px 8px}
.os-cal .c-ev{border-left:3px solid #9aa0a6;background:#eef0f2;color:#3c4043;border-radius:4px;padding:4px 8px;font-size:12.5px}
.os-cal .c-ev.new{border-color:#e8321e;background:#fde8e4;color:#7a1b10;font-weight:700;animation:skIn .5s cubic-bezier(.2,.8,.2,1)}
.os-cal .c-ev.new small{display:block;font-weight:400;color:#8a3a2e}
.os-note{font-size:12.5px;color:#a3977e;margin:10px 2px 0}
.sk-sys b{color:inherit}
.ax-beats .soon{font:700 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:#e8321e;color:#fff;border-radius:3px;padding:2px 5px;margin-left:6px;vertical-align:2px}
.after-mascot{display:flex;justify-content:center;margin-top:22px}
.after-mascot + .after-demo{margin-top:12px}
.hero-mascot canvas{image-rendering:pixelated}

@media (max-width:1180px){
  .ax-show{grid-template-columns:1fr}
  .ax-split{grid-template-columns:1fr}
  .os{height:auto;min-height:340px}
  .sk-body{grid-template-columns:200px minmax(0,1fr) 0}
  .sk.th-open .sk-body{grid-template-columns:200px minmax(0,1fr) minmax(0,320px)}
}
@media (max-width:980px){.ax-split{gap:20px}.ax-cap{margin-top:4px}}
@media (max-width:760px){
  .sk-body,.sk.th-open .sk-body{grid-template-columns:0 minmax(0,1fr) 0}
  .sk.th-open .sk-body{grid-template-columns:0 0 minmax(0,1fr)}
  .os{min-height:320px}
}

/* voice-first: a person from the team calls */
.sk-av.h{background:#d6537a}
.os-callcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:26px 14px;border-radius:12px;background:#0d0b09;border:1px solid #2b2621}
.os-ca{width:64px;height:64px;border-radius:50%;background:#d6537a;color:#fff;display:grid;place-items:center;font:700 26px system-ui;font-style:normal;box-shadow:0 0 0 6px rgba(214,83,122,.18)}
.os-callcard b{font-size:18px;color:#f3ead6;margin-top:8px}
.os-callcard span{font-size:12.5px;color:#a3977e}
.os-cs{margin:10px 0 0;font:600 13px var(--mono);color:#7fd1a8}
.os-wave{display:flex;align-items:center;gap:4px;height:34px;margin-top:10px}
.os-wave u{display:block;width:4px;border-radius:2px;background:#7fd1a8;height:8px;animation:osW 1s ease-in-out infinite}
.os-wave u:nth-child(2){animation-delay:.12s}.os-wave u:nth-child(3){animation-delay:.25s}.os-wave u:nth-child(4){animation-delay:.37s}.os-wave u:nth-child(5){animation-delay:.5s}.os-wave u:nth-child(6){animation-delay:.62s}.os-wave u:nth-child(7){animation-delay:.75s}
@keyframes osW{0%,100%{height:8px}50%{height:30px}}
@media (prefers-reduced-motion:reduce){.os-wave u{animation:none;height:18px}}
.os-tabs{overflow-x:auto;scrollbar-width:none}.os-tabs span{white-space:nowrap;padding:7px 8px}

/* ───── Scroll-driven chapters (replaces the single rail) ───── */
.ax-show{display:block;gap:0}
.ax-chapters{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:34px;align-items:start}
.ax-text{position:relative;padding-left:38px}
.ax-wire{position:absolute;left:10px;top:12px;bottom:12px;width:2px;background:var(--line2);border-radius:2px;overflow:hidden}
.ax-wire b{display:block;width:100%;height:0;background:linear-gradient(#a4200f,#e8321e 70%,#ff8a73);box-shadow:0 0 14px 2px rgba(232,50,30,.55);position:relative}
.ax-wire b::after{content:"";position:absolute;left:-2px;bottom:-3px;width:6px;height:6px;background:#ff8a73;border-radius:50%;box-shadow:0 0 12px 4px rgba(255,138,115,.8);animation:wirePulse 1.4s ease-in-out infinite}
@keyframes wirePulse{50%{transform:scale(1.5);opacity:.7}}
.chap{position:relative;min-height:74vh;padding:30px 0 40px;opacity:.38;transition:opacity .45s}
.chap.on{opacity:1}
.chap::before{content:"";position:absolute;left:-34px;top:42px;width:12px;height:12px;background:#161310;border:2px solid var(--line2);border-radius:2px;transition:background .3s,border-color .3s,box-shadow .3s}
.chap.on::before{background:var(--red);border-color:#ff8a73;box-shadow:0 0 14px 3px rgba(232,50,30,.6)}
.chap-n{font:600 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.chap-n span{color:var(--red);margin-right:8px}
.chap-n .soon{font-style:normal;font:700 9.5px/1 var(--mono);letter-spacing:.08em;background:#e8321e;color:#fff;border-radius:3px;padding:2px 5px;margin-left:6px;vertical-align:1px}
.chap h3{font:400 clamp(24px,2.4vw,32px)/1.18 var(--serif);color:#f3ead6;margin-bottom:12px;letter-spacing:-.01em}
.chap-p{font:400 15px/1.55 var(--ui);color:#cfc5ad;margin-bottom:18px}
.chap-cat{position:absolute;right:0;top:4px;display:block;opacity:0;transform:translateY(8px) scale(.9);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.chap.on .chap-cat{opacity:1;transform:none}
.chap-cat canvas{image-rendering:pixelated}
.chap-beats{list-style:none;margin:0 0 16px;padding:0}
.chap-beats li{position:relative;padding:7px 0 7px 18px;border-left:2px solid var(--line2);transition:border-color .3s}
.chap-beats li.on{border-color:var(--red)}
.chap-beats button{display:block;width:100%;text-align:left;font:500 14px/1.35 var(--ui);color:#8c826c;transition:color .25s}
.chap-beats li.on button{color:#f3ead6;font-weight:700}
.chap-beats li.done button{color:#cfc5ad}
.chap-beats li.done button::before{content:"✓ ";color:var(--red)}
.chap-beats button:hover{color:#f3ead6}
.chap-beats li>i{display:block;height:2px;width:0;background:var(--red);margin-top:6px}
.cap-say{font:400 14.5px/1.5 var(--ui);color:#e6dcc4;padding:11px 13px;background:rgba(239,230,210,.05);border:1px solid var(--line);border-left:2px solid var(--red)}
.cap-say:empty{display:none}
.chap:not(.on) .cap-say{display:none}
.cap-say.in{animation:axSay .4s ease-out}
.cap-say b{color:#f3ead6}

.ax-stagecol{position:sticky;top:78px}
.ax-stagecol .ax-top{margin-bottom:12px}
.ax-stage{position:relative;padding:14px;border-radius:12px;background:
  radial-gradient(circle at 1px 1px,rgba(239,230,210,.07) 1px,transparent 0) 0 0/18px 18px,#100e0b;border:1px solid var(--line)}
.reg{position:absolute;width:10px;height:10px;border-color:#6b6155;border-style:solid;border-width:0;pointer-events:none}
.reg.tl{left:5px;top:5px;border-left-width:1px;border-top-width:1px}.reg.tr{right:5px;top:5px;border-right-width:1px;border-top-width:1px}
.reg.bl{left:5px;bottom:5px;border-left-width:1px;border-bottom-width:1px}.reg.br{right:5px;bottom:5px;border-right-width:1px;border-bottom-width:1px}
/* the outside pane only exists in chapter 2; elsewhere Slack takes the whole stage */
.ax-split{display:grid;grid-template-columns:minmax(0,1fr) 0;gap:0;transition:grid-template-columns .6s cubic-bezier(.2,.8,.2,1),gap .6s}
.ax-stage[data-ch="1"] .ax-split{grid-template-columns:minmax(0,1fr) 330px;gap:16px}
.ax-col-out{overflow:hidden;min-width:0;opacity:0;transition:opacity .4s}
.ax-stage[data-ch="1"] .ax-col-out{opacity:1}
.ax-col-out .os{width:330px}
.sk-body{grid-template-columns:170px minmax(0,1fr) 0}
.sk.th-open .sk-body{grid-template-columns:0 minmax(0,1fr) minmax(0,300px)}
.ax-stage[data-ch="1"] .sk-body{grid-template-columns:150px minmax(0,1fr) 0}
.ax-stage[data-ch="1"] .sk.th-open .sk-body{grid-template-columns:0 minmax(0,1fr) minmax(0,260px)}
.sk-f{grid-template-columns:repeat(3,minmax(0,1fr))}
.ax-stage[data-ch="1"] .sk-f{grid-template-columns:repeat(2,minmax(0,1fr))}
.sk-co{margin-top:6px!important;padding:6px 10px;background:rgba(232,50,30,.08);border:1px solid rgba(232,50,30,.35);border-radius:6px;font-size:13.5px}
.sk-co .sk-mut{display:block;font-size:12px}
.os.hot{box-shadow:0 0 0 2px #f2c94c,0 0 24px 2px rgba(242,201,76,.3),0 24px 60px rgba(0,0,0,.5)}
.ax-tabs{display:none}
.hl{font-style:italic;color:var(--red)}

/* section reveal on scroll */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

@media (max-width:1180px){
  .ax-chapters{display:block}
  .ax-text{padding-left:0}
  .ax-wire,.chap::before,.chap-cat{display:none}
  .ax-tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;scrollbar-width:none}
  .ax-tabs button{flex:none;font:600 12px var(--mono);letter-spacing:.04em;padding:8px 12px;border:1px solid var(--line2);border-radius:20px;color:var(--mut)}
  .ax-tabs button.on{background:var(--red);border-color:var(--red);color:#fff}
  .chap{display:none;min-height:0;padding:0 0 14px;opacity:1}
  .chap.on{display:block}
  .chap h3{font-size:22px}.chap-p{font-size:14px}
  .chap-beats,.cap-say{display:none}
  .ax-stagecol{position:static}
  .ax-split,.ax-stage[data-ch="1"] .ax-split{grid-template-columns:1fr;gap:16px}
  .ax-col-out{display:none;opacity:1}
  .ax-stage[data-ch="1"] .ax-col-out{display:flex}
  .ax-col-out .os{width:auto}
  .ax-stage{padding:10px}
  .sk-body{grid-template-columns:200px minmax(0,1fr) 0}
  .sk.th-open .sk-body,.ax-stage[data-ch="1"] .sk.th-open .sk-body{grid-template-columns:200px minmax(0,1fr) minmax(0,320px)}
  .ax-stage[data-ch="1"] .sk-body{grid-template-columns:200px minmax(0,1fr) 0}
}
@media (max-width:760px){
  .sk-body,.ax-stage[data-ch="1"] .sk-body{grid-template-columns:0 minmax(0,1fr) 0}
  .sk.th-open .sk-body,.ax-stage[data-ch="1"] .sk.th-open .sk-body{grid-template-columns:0 0 minmax(0,1fr)}
  .ax-stage[data-ch="1"] .sk-f,.sk-f{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.ax-wire b::after{animation:none}}

/* chapter 2: the sidebar shrinks to icons so the Slack window and the outside pane both have room */
.ax-stage[data-ch="1"] .sk-body{grid-template-columns:54px minmax(0,1fr) 0}
.ax-stage[data-ch="1"] .sk.th-open .sk-body{grid-template-columns:54px minmax(0,1fr) 0}
.ax-stage[data-ch="1"] .sk-side{font-size:0;padding-top:6px}
.ax-stage[data-ch="1"] .sk-side a{display:block;text-align:center;padding:6px 0;margin:2px 6px;font-size:0;position:relative}
.ax-stage[data-ch="1"] .sk-side a::first-letter{font-size:16px}
.ax-stage[data-ch="1"] .sk-side .sk-badge{position:absolute;right:-2px;top:-2px;font-size:10px;padding:2px 5px}
.ax-stage[data-ch="1"] .sk-side .sk-ws,.ax-stage[data-ch="1"] .sk-side .sk-sec,.ax-stage[data-ch="1"] .sk-side .sk-app{display:none}
.ax-stage[data-ch="1"] .sk-thread{display:none}
@media (max-width:1180px){.ax-stage[data-ch="1"] .sk-side{font-size:14px}.ax-stage[data-ch="1"] .sk-side a{display:flex;text-align:left;font-size:inherit;justify-content:flex-start;padding:4px 16px}.ax-stage[data-ch="1"] .sk-side .sk-ws,.ax-stage[data-ch="1"] .sk-side .sk-sec,.ax-stage[data-ch="1"] .sk-side .sk-app{display:flex}.ax-stage[data-ch="1"] .sk-side a::first-letter{font-size:inherit}.ax-stage[data-ch="1"] .sk-side .sk-badge{position:static}.ax-stage[data-ch="1"] .sk-body{grid-template-columns:200px minmax(0,1fr) 0}.ax-stage[data-ch="1"] .sk-thread{display:flex}}
@media (max-width:760px){
  .ax-stage[data-ch="1"] .sk-body,.ax-stage .sk-body{grid-template-columns:0 minmax(0,1fr) 0!important}
  .ax-stage .sk.th-open .sk-body{grid-template-columns:0 0 minmax(0,1fr)!important}
}

/* ───── Scroll is the clock: each chapter is as tall as its story is long ───── */
.chap{height:calc(var(--dur) * 5.6vh);min-height:0;padding:0}
.chap-in{position:sticky;top:96px;padding:6px 0 30px}
.chap::before{display:none}
.chap-in::before{content:"";position:absolute;left:-34px;top:12px;width:12px;height:12px;background:#161310;border:2px solid var(--line2);border-radius:2px;transition:background .3s,border-color .3s,box-shadow .3s}
.chap.on .chap-in::before{background:var(--red);border-color:#ff8a73;box-shadow:0 0 14px 3px rgba(232,50,30,.6)}
.chap-cat{top:-2px}
.ax-text{padding-bottom:6vh}
.ax-hint{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.ax-hint b{display:inline-block;color:var(--red);animation:hintBob 1.4s ease-in-out infinite}
@keyframes hintBob{50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.ax-hint b{animation:none}}

@media (max-width:1180px){
  .ax-chapters{display:flex;flex-direction:column}
  .ax-stagecol{order:-1;position:sticky;top:58px;z-index:6;background:#161310;padding:6px 0 8px}
  .ax-stagecol .ax-top{margin-bottom:6px}
  .ax-stage{padding:8px}
  .ax-cap{display:none}
  .chap{display:block;height:calc(var(--dur) * 4.4vh);opacity:.5}
  .chap.on{opacity:1}
  .chap-in{position:static;padding:14px 0}
  .chap-in::before{display:none}
  .chap-beats,.cap-say{display:none}
  .sk-body,.ax-stage[data-ch="1"] .sk-body{height:clamp(280px,calc(100vh - 330px),400px)}
  .os{height:clamp(280px,calc(100vh - 330px),400px);min-height:0}
  .sk-guide{min-height:0;margin:0 0 8px;padding:8px 10px}
  .sk-guide p{font-size:13.5px}.sk-guide .sk-av{width:28px;height:28px}
  .ax-stage[data-ch="1"].os-live .ax-col-slack{display:none}
  .ax-stage[data-ch="1"]:not(.os-live) .ax-col-out{display:none}
}