@font-face{font-family:Satoshi;src:url('assets/satoshi-black.woff2') format('woff2');font-weight:900;font-display:block}
@font-face{font-family:Rubik;src:url('assets/rubik.woff2') format('woff2');font-weight:300 900;font-display:block}
:root{--navy:#0e1034;--coral:#f87565;--ink-2:rgb(14 16 52 / .72);--ink-3:rgb(14 16 52 / .5);--mist:#f2f2f7;--line:#dcdce6;--display:Satoshi,Rubik,Arial,sans-serif;--sans:Rubik,Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#fff;color:var(--navy)}
body{font:400 36px/1.35 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* A 1920×1080 canvas scaled to the window by deck.js. Backgrounds and panels bleed past it. */
.deck{position:fixed;inset:0;overflow:hidden}
.stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(var(--scale,.5))}
.screen{position:absolute;left:0;top:0;width:1920px;height:1080px;isolation:isolate;opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s;--bg:#fff}
.screen.is-active{opacity:1;visibility:visible;transition:opacity .2s}
.screen::before{content:'';position:absolute;inset:-1200px -2400px;background:var(--bg);z-index:-1}

/* Type: one display size per screen, one supporting line, nothing under 24px. */
.copy{position:absolute;left:120px;top:120px;width:1680px}
h1{font:900 120px/.95 var(--display);letter-spacing:-.045em;margin:0}
.lede{margin:40px 0 0;max-width:1100px;color:var(--ink-2)}
.split .copy{width:860px}
.logo{position:absolute;left:120px;bottom:64px;width:72px;height:72px}

/* Intro */
.s-intro h1,.s-coral h1{font-size:200px;line-height:.92;letter-spacing:-.05em}
.byline{position:absolute;left:120px;bottom:112px;margin:0;font-weight:500}
.intro-mark{position:absolute;left:1260px;top:260px;width:540px;height:540px}

/* Split screens: navy field on the right, product footage cropped inside it. */
.panel{position:absolute;left:1040px;top:-1200px;right:-2400px;bottom:-1200px;background:var(--navy)}
.window{position:absolute;overflow:hidden;border-radius:16px;background:#1b1c2c}
.window img{position:absolute;display:block;max-width:none}
.window video{display:block;width:100%;height:100%}
#agents .copy{width:700px}
#agents .panel{left:880px}
.ring{position:absolute;border:5px solid var(--coral);border-radius:12px}
#sharing .window{cursor:pointer;box-shadow:0 0 0 1px rgb(255 255 255 / .08)}

/* Voice */
.cleanup{position:absolute;left:120px;top:590px;width:1680px}
.said{margin:0;font-size:44px;color:var(--ink-3)}
.said s{text-decoration:line-through 5px var(--coral);color:rgb(14 16 52 / .3)}
.clean{margin:72px 0 0;font-size:68px;line-height:1.2;font-weight:500;letter-spacing:-.015em}

/* Basecamp, Slack and GitHub: read across everything, act in the right place. */
.bowtie{position:absolute;left:120px;top:500px;width:1680px;height:400px;overflow:visible}
.bowtie text{font:500 46px var(--sans);fill:var(--navy)}
.bowtie path{fill:none;stroke-width:5}
.bowtie .in{stroke:var(--navy)}.bowtie .out{stroke:var(--coral)}
.bowtie .in-dot{fill:var(--navy)}.bowtie .out-dot{fill:var(--coral)}
.bowtie .agent{fill:var(--navy)}
.bowtie .agent-label{fill:#fff;font-size:36px;text-anchor:middle}

/* Team feedback becomes a sourced issue. */
.band{position:absolute;left:-2400px;right:-2400px;top:640px;bottom:-1200px;background:var(--mist)}
.issue{position:absolute;left:760px;top:520px;width:1040px;padding:52px 56px 56px;background:#fff;border-radius:16px;box-shadow:0 2px 0 var(--line),0 30px 60px -30px rgb(14 16 52 / .3)}
.issue-state{margin:0;font-size:26px;color:var(--ink-2);display:flex;align-items:center;gap:14px}
.issue-state span{width:20px;height:20px;border-radius:50%;background:var(--coral)}
.issue h2{margin:14px 0 40px;font-size:48px;line-height:1.15;font-weight:500;letter-spacing:-.02em}
.issue-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;border-top:2px solid var(--line);padding-top:36px}
.issue h3{margin:0 0 14px;font-size:26px;font-weight:400;color:var(--ink-3)}
.issue ul{list-style:none;margin:0;padding:0;font-size:31px;line-height:1.55}
.sources li{text-decoration:underline 2px var(--coral);text-underline-offset:8px}
.criteria li{display:flex;gap:16px;align-items:center}
.criteria li::before{content:'';flex:none;width:26px;height:26px;border:3px solid var(--navy);border-radius:6px}

/* Scheduled check */
.timeline{position:absolute;left:120px;top:470px;width:1680px;height:420px;overflow:visible}
.timeline .track{stroke:var(--line);stroke-width:4}
.timeline .tick{fill:#fff;stroke:var(--navy);stroke-width:5}
.timeline .hit{fill:var(--coral)}
.timeline .stem{stroke:var(--coral);stroke-width:4}
.timeline text{font:400 32px var(--sans);fill:var(--ink-3);text-anchor:middle}
.timeline .cron{font:400 28px var(--sans);text-anchor:start}
.timeline .note{font-size:44px;font-weight:500;fill:var(--navy)}

/* Live demos */
.s-coral{--bg:var(--coral)}
.demo-list{position:absolute;left:120px;top:600px;margin:0;padding:0;list-style:none;counter-reset:demo;font-size:56px;line-height:1.2;font-weight:500;letter-spacing:-.015em}
.demo-list li{counter-increment:demo;display:flex;gap:40px;padding:24px 0;border-top:3px solid rgb(14 16 52 / .2)}
.demo-list li::before{content:counter(demo);font:900 56px/1.2 var(--display);width:40px}

/* Links */
.links{position:absolute;left:120px;top:360px;width:1680px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:72px 40px}
.links li{display:flex;flex-direction:column;gap:6px}
.links strong{font-size:34px;font-weight:500}
.links a,.links span{font-size:24px;line-height:1.4;color:var(--ink-2)}
.links a{text-decoration:underline 1px var(--line);text-underline-offset:6px}
.links a:hover{text-decoration-color:var(--coral)}

/* Navigation: progress line, arrows that show only when the pointer moves. */
.progress{position:fixed;left:0;right:0;bottom:0;height:5px;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--coral);transition:width .25s}
.on-coral .progress span{background:var(--navy)}
.arrows{position:fixed;right:24px;bottom:24px;display:flex;gap:12px;opacity:0;transition:opacity .3s;pointer-events:none}
.pointer .arrows{opacity:1;pointer-events:auto}
.arrows button{width:48px;height:48px;border:0;border-radius:50%;font:400 22px var(--sans);color:var(--navy);background:var(--mist);cursor:pointer}
.arrows button:last-child{background:var(--coral)}
.on-coral .arrows button:last-child{background:var(--navy);color:#fff}
.arrows button:disabled{opacity:.3;cursor:default}
button:focus-visible,a:focus-visible{outline:4px solid var(--navy);outline-offset:4px}

/* Overview (O): every screen as a thumbnail. */
.overview .deck{background:#e7e7ef}
.overview .stage{width:5952px;height:3432px}
.overview .screen{opacity:1;visibility:visible;overflow:hidden;cursor:pointer;transform:translate(calc(var(--col) * 2016px),calc(var(--row) * 1176px));box-shadow:0 0 0 3px var(--line)}
.overview .screen.is-active{box-shadow:0 0 0 16px var(--coral)}
.overview .screen *{pointer-events:none}
.overview .arrows,.overview .progress{display:none}

@media (prefers-reduced-motion:reduce){.screen,.screen.is-active,.progress span,.arrows{transition:none}}
@media print{
  @page{size:1920px 1080px;margin:0}
  html,body{height:auto;overflow:visible}
  .deck{position:static;overflow:visible}
  .stage{position:static;transform:none;width:1920px;height:auto}
  .screen,.overview .screen{position:relative;opacity:1;visibility:visible;overflow:hidden;transform:none;box-shadow:none;break-after:page}
  .screen:last-child{break-after:auto}
  body>:not(.deck){display:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Additional workflows retain Claude's canvas, type and flat compositions. */
#clis .lede,#explore .lede,#monitor .lede{max-width:1500px}
#clis .bowtie{top:560px;height:350px}
#explore .issue{top:570px}
#monitor .timeline{top:520px}
.voice-tools{position:absolute;left:120px;top:878px;margin:0;font-size:28px;color:var(--ink-2)}
.prompt-handoff{position:absolute;left:120px;top:560px;width:1680px;display:grid;grid-template-columns:600px 1fr;gap:120px}
.prompt-handoff h2,.small-app h2{margin:0 0 26px;font-size:28px;font-weight:400;color:var(--ink-3)}
.prompt-handoff p{margin:0;font-size:48px;line-height:1.3;letter-spacing:-.015em}
.prompt-handoff>div:last-child{border-left:5px solid var(--coral);padding-left:48px}
.quote-band{position:absolute;left:-2400px;right:-2400px;top:540px;bottom:-1200px;background:var(--mist)}
.request{position:absolute;left:120px;top:595px;width:1550px;margin:0;font-size:60px;line-height:1.35;letter-spacing:-.02em}
.agent-requests{position:absolute;left:120px;top:530px;width:1570px}
.agent-requests blockquote{margin:0;padding:28px 0 38px;font-size:54px;line-height:1.3;letter-spacing:-.015em}
.agent-requests blockquote+blockquote{border-top:3px solid var(--coral);padding-top:38px}
#phone .copy{width:830px}
#phone .panel{left:1080px}
.phone-capture{position:absolute;left:1230px;top:105px;height:865px;overflow:hidden;border-radius:22px}
.phone-capture img{display:block;height:100%;width:auto}
.phone-request{position:absolute;left:120px;top:580px;width:780px;margin:0;font-size:48px;line-height:1.35;letter-spacing:-.015em}
.small-app{position:absolute;left:120px;top:530px;display:grid;grid-template-columns:900px 1fr;gap:80px;width:1680px}
.small-app p{margin:0;font-size:60px;line-height:1.2;letter-spacing:-.025em}
.small-app>div:last-child p{font-family:var(--display);font-size:108px}
.build-request{position:absolute;left:120px;top:810px;max-width:1580px;margin:0;border-left:5px solid var(--coral);padding-left:36px;font-size:38px;line-height:1.35}
#sharing .lede{max-width:1680px}
.comparison-field{position:absolute;left:-2400px;right:-2400px;top:390px;bottom:-1200px;background:var(--navy)}
.iteration-pair{position:absolute;left:120px;top:430px;width:1680px;display:grid;grid-template-columns:1fr 1fr;gap:48px;color:white}
.iteration-pair figure{margin:0;min-width:0}
.iteration-pair h2{font-size:32px;font-weight:500;margin:0 0 18px}
.prototype-image{display:block;overflow:hidden;border-radius:12px}
.prototype-image img{display:block;width:100%;height:auto}
.prototype-link{display:block;margin-top:18px;font-size:27px;text-decoration-color:rgb(255 255 255 / .35);text-underline-offset:7px;white-space:nowrap}
#sharing .logo{left:1728px;top:120px;bottom:auto}
.s-links .links{top:320px;gap:42px 40px}
.s-links .links strong{font-size:30px}
.s-links .links a,.s-links .links span{font-size:24px}

/* Rebuilt around Josh's five ideas; the original left/right brand layout remains. */
h1{letter-spacing:-.04em}.s-intro h1,.s-coral h1{letter-spacing:-.04em}
#intro h1{font-size:182px}#intro .intro-mark{left:1320px;top:290px;width:440px;height:440px}
.split .copy{left:120px;top:150px;width:850px}.split h1{font-size:114px;line-height:1.02}.split .panel{left:1010px}
.spoken{position:absolute;left:120px;top:565px;width:790px;font-size:48px;line-height:1.4;letter-spacing:-.015em;margin:0}
.right-visual{position:absolute;left:1100px;top:100px;width:720px;height:840px;display:flex;align-items:center;justify-content:center;color:white}
.tool-line{position:absolute;left:220px;top:947px;width:720px;font-size:26px;line-height:1.4;color:var(--ink-2);margin:0}
.voice-demo{width:100%}.voice-demo p{margin:0;font-size:49px;line-height:1.35}.voice-demo .rough{color:#cbcbd9}.voice-demo s{text-decoration-color:var(--coral);text-decoration-thickness:4px}.voice-rule{height:1px;background:#6c6d83;margin:70px 0}.voice-demo .clean{font-size:55px;font-weight:500}
.game{width:100%;text-align:center}.basic-moves{display:flex;justify-content:center;gap:130px}.basic-moves>div{display:flex;align-items:center;flex-direction:column;gap:20px}.basic-moves span{font-size:36px}kbd{font:500 58px var(--sans);width:100px;height:100px;border:3px solid #bfc0d3;border-radius:18px;display:flex;align-items:center;justify-content:center}.combo-move{border-top:1px solid #77798d;margin-top:70px;padding-top:70px}.key-sequence{display:flex;justify-content:center;gap:24px}.key-sequence kbd{border-color:var(--coral);color:var(--coral)}.combo-move p{font-size:44px;margin:28px 0}.game-caption{font-size:29px;color:#d3d3e1;margin-top:52px}
.workflow{list-style:none;margin:0;padding:0;width:100%}.workflow li{padding:26px 0;border-top:1px solid #6c6d83}.workflow li:first-child{border:0}.workflow strong{font-size:40px;display:block;color:var(--coral);font-weight:500}.workflow span{font-size:31px;display:block;margin-top:8px;line-height:1.35}
.herdr-figure{margin:0;width:100%}.herdr-crop{width:720px;height:650px;overflow:hidden;border-radius:12px;position:relative}.herdr-crop img{position:absolute;left:0;top:0;width:1510px;height:650px;max-width:none}.herdr-figure figcaption{margin-top:28px;text-align:center;font-size:26px;color:#d3d3e1}
.routine{width:100%}.routine h2{font-size:42px;font-weight:500;margin:0 0 46px}.routine ol{margin:0;padding:0;list-style:none}.routine li{display:flex;align-items:baseline;gap:36px;padding:34px 0;border-top:1px solid #6c6d83}.routine li span{font-size:31px;color:var(--coral);font-variant-numeric:tabular-nums}.routine li div{font-size:39px;line-height:1.25}.routine>p{font-size:31px;color:#d3d3e1;margin-top:46px}
.prototype-pair{width:100%}.prototype-pair figure{margin:0 0 18px}.prototype-pair img{display:block;width:100%;height:300px;object-fit:contain;border-radius:10px}.prototype-pair figcaption{font-size:27px;margin-top:12px;color:#e7e7ef}.prototype-pair p{margin:18px 0 0;font-size:24px;color:#c9c9da}
#shift .copy{top:160px}#shift h1{font-size:145px;line-height:1.08}#shift .closing{position:absolute;left:120px;top:790px;font-size:48px;margin:0;max-width:1680px}
.resource-list{position:absolute;left:120px;top:360px;width:1680px;display:grid;grid-template-columns:1fr 1fr;gap:46px 80px;list-style:none;padding:0;margin:0}.resource-list strong{display:block;font-weight:500;font-size:38px}.resource-list a{display:block;font-size:28px;overflow-wrap:anywhere;margin-top:10px;text-underline-offset:7px}.guide-link{position:absolute;left:220px;top:957px;font-size:27px}
a:focus-visible,button:focus-visible{outline:4px solid var(--coral);outline-offset:8px}::selection{background:var(--coral);color:var(--navy)}
.tool-line{left:210px;top:935px;width:740px}.tool-strip{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}.tool-item{display:flex;align-items:center;gap:10px;font-size:23px}.tool-item img{width:36px;height:36px;object-fit:contain;background:#fff;border-radius:8px;padding:4px}
.workflow li{display:flex;align-items:center;gap:22px;padding:23px 0}.workflow-logo{width:58px;height:58px;object-fit:contain;background:#fff8ee;padding:9px;border-radius:10px}
.resource-list{top:295px;grid-template-columns:repeat(3,1fr);gap:35px 42px}.resource-list li{display:flex;gap:20px;align-items:flex-start}.resource-list li>img{width:54px;height:54px;object-fit:contain;background:#fff;border-radius:10px;padding:6px}.resource-list strong{font-size:28px}.resource-list a{font-size:21px;line-height:1.3;margin-top:8px}
.play-demo{width:100%}.arena-buttons{display:flex;gap:48px;margin-bottom:38px}.arena-buttons>span{display:flex;align-items:center;gap:15px;font-size:33px}.arena-buttons kbd{width:65px;height:65px;font-size:39px}.arena-buttons img{width:45px;height:45px;object-fit:contain;background:white;padding:5px;border-radius:8px}.arena-launch{display:block;text-decoration:none}.arena-launch>img{width:100%;border:1px solid #73829d;border-radius:10px;display:block}.arena-launch strong{display:block;text-align:center;color:#fff;font-size:34px;border:2px solid #f87565;background:#34344c;padding:20px;margin-top:25px;border-radius:8px}.arena-launch:hover strong{background:#634445}.play-demo>p{overflow-wrap:anywhere;font-size:22px;line-height:1.3;color:#c9ccde;margin-top:22px}


/* The playable arena is a complete slide, never a separate tab. */
.game-frame{position:absolute;inset:0;width:1920px;height:1080px;border:0;background:#0c1027}.s-game{--bg:#0c1027}.game-overview-hit{display:none}.overview .game-overview-hit{display:block;position:absolute;inset:0;background:#0b1026 url(wf-c2-ck1/art-keyart.jpg) center/cover no-repeat}.overview .game-frame{pointer-events:none}.on-game>.progress{display:none}


/* Brainrot mode (B): Minecraft parkour fills the right panel of the "Is everybody with me?" slide. */
.brainrot{position:absolute;left:1010px;top:0;width:910px;height:1080px;z-index:5;background:#000;overflow:hidden;opacity:0;visibility:hidden;transform:translateX(60px);transition:opacity .25s,transform .35s,visibility 0s .35s}
.brainrot-on .brainrot{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s cubic-bezier(.2,1.2,.4,1)}
.brainrot>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mc-cross{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;mix-blend-mode:difference;background:linear-gradient(#fff,#fff) center/4px 100% no-repeat,linear-gradient(#fff,#fff) center/100% 4px no-repeat}
.mc-caption{position:absolute;left:0;right:0;top:300px;text-align:center;font:900 84px/1.05 var(--display);letter-spacing:-.01em;color:#fff;-webkit-text-stroke:14px #000;paint-order:stroke fill;text-shadow:0 8px 0 rgb(0 0 0 / .35);white-space:nowrap}
.mc-caption.hot{color:#ffe23d}
.mc-caption.still{white-space:normal;font-size:50px;padding:0 40px;-webkit-text-stroke-width:9px}
.mc-hud{position:absolute;left:50%;margin-left:-182px;bottom:12px;width:364px;height:80px}
.mc-hud canvas{display:block;width:364px;height:80px;image-rendering:pixelated}
.mc-hud b{position:absolute;left:0;right:0;top:4px;text-align:center;font:700 24px/1 ui-monospace,monospace;color:#80ff20;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000}
.mc-dead{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(rgb(120 0 0 / .55),rgb(190 20 20 / .62));font:700 26px/1.2 ui-monospace,monospace;color:#fff;text-shadow:3px 3px 0 #3f3f3f;opacity:0;transition:opacity .35s}
.mc-dead.show{opacity:1}
.brainrot.dead .mc-cross,.brainrot.dead .mc-caption{visibility:hidden}
.mc-dead h2{margin:0 0 10px;font-size:64px;text-shadow:5px 5px 0 #3f3f3f}
.mc-dead p{margin:0 0 6px;text-align:center;padding:0 30px}
.mc-dead p b{color:#ffff55}
.mc-dead span{width:400px;padding:14px 0;margin-top:14px;text-align:center;font-weight:500;background:#717171;border:3px solid #000;box-shadow:inset 3px 3px 0 #aaa,inset -3px -4px 0 #555}
.overview .brainrot{display:none}
@media print{.brainrot{display:none}}

/* Talk to your computer: typing against talking. */
.voice-race{width:100%;display:flex;flex-direction:column;gap:56px}
.race-label{display:flex;justify-content:space-between;align-items:center;margin:0 0 18px;font-size:25px;color:#c9c9da}
.race-label span:first-child{display:flex;align-items:center;font-size:31px;font-weight:500;color:#fff}
.race-box{border:2px solid #6c6d83;border-radius:14px;padding:26px 30px;font-size:38px;line-height:1.35}
.typing .race-box{min-height:170px;color:#e7e7ef}
.talking .race-box{min-height:340px;border-color:var(--coral)}
.caret{display:inline-block;width:3px;height:1.05em;margin-left:3px;vertical-align:-.15em;background:var(--coral);animation:blink 1s steps(1) infinite}
.said-words span{display:inline-block;animation:fly .3s cubic-bezier(.2,1.4,.4,1) both}
.mic{display:inline-flex;align-items:center;gap:4px;height:28px;margin-right:14px}
.mic b{width:5px;height:6px;border-radius:3px;background:var(--coral)}
.talking-now .mic b{animation:mic .45s ease-in-out infinite alternate}
.mic b:nth-child(2){animation-delay:-.15s}.mic b:nth-child(3){animation-delay:-.3s}.mic b:nth-child(4){animation-delay:-.1s}.mic b:nth-child(5){animation-delay:-.25s}
@keyframes blink{50%{opacity:0}}
@keyframes fly{from{opacity:0;transform:translateY(30px) scale(1.5);filter:blur(5px)}}
@keyframes mic{to{height:26px}}
@media (prefers-reduced-motion:reduce){.caret,.said-words span,.talking-now .mic b{animation:none}}

/* Horizontal Designli wordmark bottom-left; tool strip sits above it. */
.logo{width:180px;height:auto;bottom:64px}
.tool-line{left:120px;top:900px}
.guide-link{left:120px;top:900px}

/* Demos replayed by replay.js (.play). Without .play (overview, reduced motion) they show their final state. */
.race-label{margin-bottom:14px}
.auto-race{width:100%;display:flex;flex-direction:column;gap:44px}
.approvals{display:flex;align-items:center;gap:8px}
.approvals i,.tally i{width:22px;height:22px;border:2px solid var(--coral);border-radius:5px;background:var(--coral)}
.steps{list-style:none;margin:0;padding:12px 24px;border:2px solid #6c6d83;border-radius:14px}
.auto .steps{border-color:var(--coral)}
.steps li{position:relative;height:48px;padding-left:42px;font-size:28px;line-height:48px}
.steps .spin,.steps .tick{position:absolute;left:0;top:11px;width:26px;height:26px;border-radius:50%}
.steps .spin{opacity:0;border:3px solid #4b4d75;border-top-color:var(--coral)}
.steps .tick{background:var(--coral)}
.steps .tick::after{content:'';position:absolute;left:9px;top:4px;width:6px;height:12px;border:solid var(--navy);border-width:0 3px 3px 0;transform:rotate(45deg)}
.ask{position:absolute;right:0;top:6px;display:flex;align-items:center;gap:12px;height:36px;padding:0 4px 0 14px;border-radius:9px;background:#f2f2f7;color:var(--navy);font-size:24px;line-height:1;opacity:0}
.ask b{padding:5px 14px;border-radius:6px;background:var(--navy);color:#fff;font-weight:500}
.lane{position:relative}
.clock{height:8px;margin:16px 96px 0 0;border-radius:4px;background:#2a2c52;overflow:hidden}
.clock span{display:block;height:100%;background:#9a9cc0;transform-origin:0 50%}
.auto .clock span{background:var(--coral)}
.lane .done{position:absolute;right:0;bottom:-12px;font-size:24px;line-height:32px;font-weight:500;color:var(--coral)}
.play .steps li{animation:k-show .25s var(--in) both}
.play .steps .spin{animation:k-spin .7s linear infinite,k-out .01s var(--ok) both;opacity:1}
.play .steps .tick{animation:k-pop .25s var(--ok) both}
.play .ask{animation:k-ask 1.65s var(--ask) both}
.play .ask b{animation:k-press 1.65s var(--ask) both}
.play .approvals i,.play .tally i:not(.never){animation:k-box .2s var(--at) both}
.play .clock span{animation:k-grow var(--dur) linear .4s both}
.play .lane .done{animation:k-pop .3s var(--done) both}

.parallel{width:100%}
.legend{display:flex;gap:36px;margin:0 0 34px;font-size:24px;color:#c9c9da}
.legend span{display:flex;align-items:center;gap:12px}
.legend i{width:28px;height:18px;border-radius:4px}
.you{background:var(--coral)}.agent{background:#4b4d8a}
.lanes{position:relative}
.lanes h2{margin:0 0 12px;font-size:30px;line-height:36px;font-weight:500}
.tally+h2{margin-top:44px}
.track{position:relative;height:44px;margin-bottom:12px;border-radius:8px;background:#1d1f45}
.track .fill{position:absolute;inset:0}
.track i{position:absolute;top:0;bottom:0;border:2px solid #1d1f45;border-radius:8px;padding-left:12px;font:500 24px/40px var(--sans);font-style:normal;color:#fff;white-space:nowrap;overflow:hidden}
.track b{position:absolute;top:50%;z-index:1;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#fff;color:var(--navy);font-size:19px;line-height:30px;text-align:center}
.tally{display:flex;align-items:center;gap:10px;margin:4px 0 0;font-size:24px;color:#c9c9da}
.tally i.never{background:none;border-color:#4b4d75}
.playhead{position:absolute;top:48px;bottom:36px;left:100%;width:3px;margin-left:-1.5px;background:#fff;opacity:0;z-index:2}
.play .track .fill{animation:k-reveal 10s linear .5s both}
.play .track b{animation:k-pop .3s var(--at) both}
.play .playhead{animation:k-sweep 10s linear .5s both}

@keyframes k-show{from{opacity:0;transform:translateY(8px)}}
@keyframes k-spin{to{transform:rotate(360deg)}}
@keyframes k-out{from{opacity:1}to{opacity:0}}
@keyframes k-pop{from{opacity:0;transform:scale(.4)}}
@keyframes k-ask{0%{opacity:0;transform:translateX(14px)}10%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes k-press{0%,80%{background:var(--navy);transform:none}86%{background:var(--coral);transform:scale(.88)}100%{background:var(--coral)}}
@keyframes k-box{from{background:transparent;border-color:#4b4d75}}
@keyframes k-grow{from{transform:scaleX(0)}}
@keyframes k-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes k-sweep{from{left:0;opacity:1}99%{opacity:1}to{left:100%;opacity:0}}

/* Combos: a fighting-game move list. One tool is one button; learn more and the buttons chain into combos. */
.move-list{width:720px}
.ml-tag{margin:0 0 14px;font:900 20px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:#f1c375}
.ml-moves{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ml-moves li{display:grid;grid-template-columns:56px 178px 186px 1fr;align-items:center;gap:16px;padding:8px 16px 8px 8px;border-radius:12px;background:rgb(255 255 255 / .06)}
.move-list kbd{width:56px;height:56px;font:900 30px/1 var(--display);border:3px solid var(--c);border-radius:12px;color:var(--c)}
.ml-moves b{font:900 30px/1 var(--display);font-style:italic;text-transform:uppercase;color:var(--c)}
.ml-tool{display:flex;align-items:center;gap:12px;font-size:26px}
.ml-tool img{width:36px;height:36px;object-fit:contain;background:#fff;border-radius:8px;padding:4px}
.ml-moves em{font-style:normal;font-size:23px;color:rgb(255 255 255 / .72)}
.ml-combo{margin-top:24px;padding:20px 22px;border:2px solid rgb(255 255 255 / .16);border-radius:14px}
.ml-super{border-color:rgb(248 117 101 / .65);background:rgb(248 117 101 / .08)}
.ml-seq{display:flex;align-items:center;gap:9px}
.ml-seq i{font-style:normal;font-size:20px;color:rgb(255 255 255 / .45)}
.ml-seq kbd{background:var(--c);color:var(--navy);box-shadow:0 0 22px color-mix(in srgb,var(--c) 55%,transparent)}
.ml-seq strong{margin-left:16px;font:900 36px/1 var(--display);font-style:italic;text-transform:uppercase;white-space:nowrap;color:#ffe066;text-shadow:0 3px 0 #000,0 0 24px rgb(255 160 40 / .6);transform:skewX(-8deg)}
.ml-combo>p:last-child{margin:14px 0 0;font-size:25px;color:rgb(255 255 255 / .82)}
.ml-def{margin:26px 0 0;font-size:24px;color:rgb(255 255 255 / .72)}
.ml-def b{color:#fff}
#combos.is-active .ml-moves li{animation:ml-in .45s cubic-bezier(.2,1.2,.4,1) both}
#combos.is-active .ml-moves li:nth-child(2){animation-delay:.25s}
#combos.is-active .ml-moves li:nth-child(3){animation-delay:.5s}
#combos.is-active .ml-combo{animation:ml-in .45s ease 1.1s both}
#combos.is-active .ml-super{animation-delay:2.9s}
#combos.is-active .ml-seq kbd{animation:ml-lit .32s ease var(--d) both}
#combos.is-active .ml-seq strong{animation:ml-stamp .5s cubic-bezier(.2,1.6,.4,1) var(--d) both}
#combos.is-active .ml-def{animation:ml-in .45s ease 4.8s both}
@keyframes ml-in{from{opacity:0;transform:translateX(40px)}}
@keyframes ml-lit{from{background:transparent;color:var(--c);box-shadow:none}50%{transform:scale(1.18)}}
@keyframes ml-stamp{from{opacity:0;transform:skewX(-8deg) scale(2.2)}}
@media (prefers-reduced-motion:reduce){#combos .move-list *{animation:none!important}}


/* Intro: navy keynote cover. One agent at the center, wired to the tools the talk covers. */
#intro{--bg:var(--navy);color:#fff}
#intro .copy{left:120px;top:312px;width:1020px}
#intro #intro-title{font-size:176px;line-height:.94;letter-spacing:-.045em;color:#fff}
#intro .nc-line{display:inline-block}
#intro .nc-dot{color:var(--coral)}
#intro .byline{left:120px;top:757px;bottom:auto;font-size:40px;line-height:54px;font-weight:500;color:#fff;display:flex;align-items:center;gap:28px}
#intro .byline::before{content:'';width:72px;height:6px;border-radius:3px;background:var(--coral)}
#intro .nc-wordmark{position:absolute;left:120px;bottom:64px;width:180px;height:auto}
#intro .nc-orbit{position:absolute;left:1178px;top:250px;width:640px;height:640px}
#intro .nc-lines{position:absolute;inset:0;width:640px;height:640px;overflow:visible}
#intro .nc-ring{fill:none;stroke:#fff;stroke-opacity:.2;stroke-width:3}
#intro .nc-spokes line{stroke:var(--coral);stroke-width:6;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:0}
#intro .nc-pulse{fill:none;stroke:var(--coral);stroke-width:4;opacity:0;transform-origin:320px 320px}
#intro .nc-agent{position:absolute;left:320px;top:320px;width:164px;height:164px;margin:-82px 0 0 -82px;border-radius:50%;background:var(--coral);display:grid;place-items:center}
#intro .nc-agent svg{width:108px;height:108px;margin-left:6px;fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
#intro .nc-node{position:absolute;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 9px var(--navy)}
#intro .nc-node img{width:54px;height:54px;object-fit:contain}
#intro .nc-node img[src$="slack.png"]{border-radius:12px}
#intro .nc-node img[src$="gmail.ico"]{width:58px;height:58px}

#intro.is-active .nc-line{animation:nc-rise .85s cubic-bezier(.2,.9,.25,1) both}
#intro.is-active .nc-line:nth-of-type(2){animation-delay:.12s}
#intro.is-active .byline{animation:nc-fade .6s ease .45s both}
#intro.is-active .byline::before{animation:nc-rule .6s cubic-bezier(.2,.9,.25,1) .45s both;transform-origin:left center}
#intro.is-active .nc-wordmark{animation:nc-fade .6s ease .6s both}
#intro.is-active .nc-ring{animation:nc-ring .9s cubic-bezier(.2,.9,.25,1) .2s both;transform-origin:320px 320px}
#intro.is-active .nc-agent{animation:nc-pop .6s cubic-bezier(.2,1.5,.4,1) .3s both}
#intro.is-active .nc-spokes line{animation:nc-draw .5s cubic-bezier(.4,0,.2,1) calc(.7s + var(--i) * .12s) both}
#intro.is-active .nc-node{animation:nc-pop .45s cubic-bezier(.2,1.6,.4,1) calc(1s + var(--i) * .12s) both}
#intro.is-active .nc-pulse{animation:nc-pulse 1s ease-out 1.9s both}
@keyframes nc-rise{from{opacity:0;transform:translateY(60px)}}
@keyframes nc-fade{from{opacity:0}}
@keyframes nc-rule{from{transform:scaleX(0)}}
@keyframes nc-ring{from{opacity:0;transform:scale(.6)}}
@keyframes nc-pop{from{opacity:0;transform:scale(.3)}}
@keyframes nc-draw{from{stroke-dashoffset:300}}
@keyframes nc-pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3)}}
@media (prefers-reduced-motion:reduce){#intro *{animation:none!important;transition:none!important}}

/* Call to action (last slide): post your combos in #general. Navy, like the intro, so the talk opens and closes on the same card. */
#share{--bg:var(--navy);color:#fff}
#share .copy{left:120px;top:118px;width:900px}
#share .cta-eyebrow{margin:0 0 22px;font:900 28px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--coral)}
#share #share-title{font-size:170px;line-height:.94;letter-spacing:-.045em;color:#fff}
#share .cta-dot{color:var(--coral)}
#share .cta-ask{position:absolute;left:120px;top:580px;width:880px}
#share .cta-lead{margin:0 0 32px;font-size:40px;font-weight:500;display:flex;align-items:center;flex-wrap:wrap;gap:16px}
#share .cta-channel{display:inline-flex;align-items:center;gap:12px;padding:6px 18px 6px 10px;border-radius:12px;background:#fff;color:var(--navy);font-weight:600}
#share .cta-channel img{width:40px;height:40px}
#share .cta-prompts{list-style:none;margin:0;padding:0;display:grid;gap:24px}
#share .cta-prompts li{display:grid;grid-template-columns:56px 1fr;gap:24px;align-items:start;font-size:34px;line-height:1.3}
#share .cta-prompts b{width:56px;height:56px;margin-top:-6px;border-radius:50%;background:var(--coral);color:var(--navy);display:grid;place-items:center;font:900 30px/1 var(--display)}
#share .cta-slack{position:absolute;left:1090px;top:290px;width:710px;background:#fff;color:#1d1c1d;border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgb(0 0 0 / .35)}
#share .cta-head{padding:24px 32px;border-bottom:2px solid #e8e8ec;font:700 32px/1 var(--sans)}
#share .cta-head span{color:#868686;margin-right:6px}
#share .cta-msg{display:grid;grid-template-columns:72px 1fr;gap:22px;padding:30px 32px}
#share .cta-avatar{width:72px;height:72px;border-radius:14px;background:var(--coral);color:var(--navy);display:grid;place-items:center;font:900 28px/1 var(--display);font-style:normal}
#share .cta-msg p{margin:0;font-size:30px;line-height:1.38}
#share .cta-msg .cta-who{font-weight:700;margin-bottom:6px}
#share .cta-who small{font-weight:400;font-size:24px;color:#868686;margin-left:10px}
#share .cta-compose{margin:0 32px 30px;padding:20px 24px;border:2px solid #d5d5db;border-radius:14px;font-size:28px;color:#868686;display:flex;align-items:center;gap:10px}
#share .cta-caret{width:3px;height:34px;background:#1d1c1d}
#share .cta-wordmark{position:absolute;left:120px;top:auto;bottom:64px;width:180px;height:auto}
#share.is-active .copy{animation:nc-rise .8s cubic-bezier(.2,.9,.25,1) both}
#share.is-active .cta-ask{animation:nc-fade .6s ease .35s both}
#share.is-active .cta-slack{animation:cta-in .7s cubic-bezier(.2,1.1,.3,1) .6s both}
#share.is-active .cta-msg{animation:nc-fade .5s ease 1.2s both}
#share.is-active .cta-caret{animation:cta-blink 1.1s steps(2) 1.6s infinite}
@keyframes cta-in{from{opacity:0;transform:translateX(80px)}}
@keyframes cta-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){#share *{animation:none!important;transition:none!important}}

/* Game volume (game slide only): shows with the arrows. */
.game-vol{display:none;align-items:center;gap:10px;height:48px;padding:0 16px;border-radius:24px;background:var(--mist);color:var(--navy);font:500 16px var(--sans);cursor:pointer}
.on-game .game-vol{display:flex}
.game-vol svg{width:22px;height:22px}
.game-vol input{width:130px;accent-color:var(--coral);cursor:pointer}
.game-vol output{min-width:42px;text-align:right}
/* Share slide: Copy button copies the ask for #general */
#share .cta-draft{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#share .cta-post{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border:0;border-radius:10px;background:#007a5a;color:#fff;font:700 26px/1 var(--sans);cursor:pointer;transition:transform .15s,background .2s}
#share .cta-post:hover{background:#148567;transform:translateY(-2px)}
#share .cta-post svg{width:24px;height:24px}
#share .cta-compose.is-sent .cta-draft{color:#1d1c1d}
#share .cta-compose.is-sent .cta-caret{display:none}
#share .cta-compose.is-sent .cta-post{background:var(--navy)}