@font-face{font-family:'Slack-Lato';src:url('/brand-assets/slack/lato-regular-d9ce515.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Slack-Lato';src:url('/brand-assets/slack/lato-black-b64f5e4.woff2') format('woff2');font-weight:900;font-display:swap}
.home-demo-page{--demo-ink:#273022;--demo-muted:#626e58;--demo-line:#d7deca;--demo-panel:#fff;--demo-soft:#edf1e4;--demo-stage:#dce4d0;--demo-accent:#d7fa64}
html[data-interface-theme=dark] .home-demo-page{--demo-ink:#e9eff9;--demo-muted:#a4b0c3;--demo-line:#263044;--demo-panel:#0b111c;--demo-soft:#151d2b;--demo-stage:#141c29}
.home-demo-page .puppet-theatre{height:182px}.home-demo-page .puppet-word{top:55px;font-size:clamp(66px,8.4vw,96px)}
.demo-intro{max-width:1180px;margin:5px auto 32px;padding:0 30px;display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.demo-intro h1{font-size:clamp(50px,6.2vw,80px);font-weight:750;letter-spacing:-.055em;line-height:1;margin:0;color:var(--demo-ink)}
.demo-intro>p{font-size:16px;line-height:1.6;max-width:450px;color:var(--demo-muted);margin:0 0 3px}
.home-playground{max-width:1120px;margin:0 auto 64px;border:1px solid var(--demo-line);border-radius:20px;background:var(--demo-panel);color:var(--demo-ink);overflow:hidden;scroll-margin-top:20px}
.home-playground button,.home-playground input,.home-playground textarea{font:inherit;color:inherit}.home-playground button{cursor:pointer}
.home-playground button:focus-visible,.home-playground a:focus-visible,.home-playground input:focus-visible,.home-playground textarea:focus-visible{outline:3px solid #8ba740;outline-offset:3px}
.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--demo-line)}
.demo-modes{display:flex;gap:4px;min-width:0}.demo-modes button{display:flex;align-items:center;gap:8px;border:0;border-radius:8px;padding:12px 16px;background:transparent;font-size:14px;font-weight:600;white-space:nowrap}
.demo-modes button[aria-pressed=true]{background:var(--demo-soft)}.demo-modes button:hover{background:var(--demo-soft)}.demo-modes button span{font-size:19px}
.demo-free{font-size:12px;color:var(--demo-muted)}
.demo-split{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr)}.home-playground [hidden]{display:none!important}
.demo-controls{padding:28px 30px;min-width:0}.demo-kicker{font-size:12px;color:var(--demo-muted);margin:0 0 12px}.demo-controls h2{font-size:30px;line-height:1.1;letter-spacing:-1.1px;font-weight:700;margin:0 0 23px}
.demo-scenes{display:flex;gap:7px;margin:0 0 23px}.demo-scenes button{background:var(--demo-panel);border:1px solid var(--demo-line);border-radius:9px;flex:1;min-width:0;padding:11px 6px;font-size:11px;font-weight:650;line-height:1.3;text-align:center}.demo-scenes button small{display:block;font-size:10px;font-weight:400;color:var(--demo-muted);margin-top:4px}
.demo-scenes button[aria-pressed=true]{border-color:var(--demo-ink);background:var(--demo-soft)}.demo-scenes button:hover{border-color:var(--demo-ink)}
.demo-field{display:block;margin:0 0 16px;color:var(--demo-ink)}.demo-field>span{display:block;font-size:12px;font-weight:550;margin-bottom:7px}.demo-field input,.demo-field textarea{display:block;width:100%;min-width:0;border:1px solid var(--demo-line);background:var(--demo-panel);border-radius:8px;padding:11px 12px;font-size:14px;line-height:1.5}.demo-field textarea{resize:vertical;min-height:104px;max-height:220px}.demo-field input{height:42px}
.demo-actions{display:flex;gap:14px;align-items:center;margin-bottom:20px}.twist-button{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--demo-soft);border:1px solid var(--demo-line);border-radius:8px;min-height:44px;padding:10px 15px;font-size:13px!important;font-weight:600!important}.twist-button svg{width:18px;height:18px;fill:currentColor}.twist-button:hover{border-color:var(--demo-ink)}
.demo-reset{border:0;background:transparent;color:var(--demo-muted)!important;padding:11px 5px;font-size:12px!important;text-decoration:underline;text-underline-offset:3px}
.demo-primary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 17px;min-height:48px;border-radius:9px;background:var(--demo-accent);color:#273022;text-decoration:none;font-size:14px;font-weight:700}.demo-primary:hover{background:#cbed54}.demo-primary span{font-size:20px}
.demo-access{color:var(--demo-muted);font-size:11px;line-height:1.7;margin:12px 0 0}.demo-access a{text-underline-offset:3px}
.demo-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:var(--demo-stage);padding:22px 34px 18px;border-left:1px solid var(--demo-line);min-width:0}
.demo-stage-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--demo-muted);width:100%;margin-bottom:18px}.demo-live{display:flex;align-items:center;gap:6px}.demo-live i{width:6px;height:6px;border-radius:50%;background:#688a39}
.demo-preview-wrap{width:100%;max-width:430px;flex:1;display:flex;align-items:center;justify-content:center;min-width:0}.demo-preview-wrap>div{width:100%;border:1px solid #bbc4b2;border-radius:18px;background:#fff;overflow:hidden;box-shadow:6px 7px 0 #28322213;min-height:360px}
.demo-preview-note{font-size:12px;line-height:1.5;margin:20px 0 7px;color:var(--demo-ink);text-align:center}.demo-fiction{font-size:10px;color:var(--demo-muted);line-height:1.5;text-align:center}
.demo-loading{color:#626e58;padding:32px;font-size:15px}.did-twist{animation:demo-twist 250ms ease-out}@keyframes demo-twist{from{transform:translateY(4px) rotate(-.4deg)}to{transform:none}}
.demo-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.example-editable{cursor:pointer;outline:2px dashed transparent;outline-offset:4px}.example-editable:hover,.example-editable:focus-visible{outline-color:#8ba740}.example-website h3.example-editable{cursor:text}
.extension-explainer{font-size:14px;line-height:1.65;color:var(--demo-muted);margin:-8px 0 24px}.extension-tools{display:flex;gap:8px;margin:16px 0 28px}.extension-tools button{flex:1;min-height:44px;padding:9px 12px;border:1px solid var(--demo-line);border-radius:8px;font-size:12px;background:var(--demo-panel)}.extension-tools button[aria-pressed=true]{background:var(--demo-soft);border-color:var(--demo-ink)}
.example-browser{width:100%;max-width:530px;overflow:hidden;border:1px solid #c9c8bd;border-radius:12px;background:#fff9ec;color:#32332c;color-scheme:light;box-shadow:6px 7px 0 #28322213}.example-browser-bar{background:#fff;padding:11px 13px;display:flex;align-items:center;gap:14px;font-size:10px;border-bottom:1px solid #dfddd4;color:#676b62}.browser-dots{display:flex;gap:4px}.browser-dots i{height:7px;width:7px;border-radius:50%;background:#d8dacf}.browser-example{margin-left:auto;font-size:9px}.example-website{padding:22px 24px}.coffee-brand{display:flex;align-items:center;gap:5px;font-size:19px;font-weight:750;letter-spacing:-.6px}.coffee-brand>span{font-size:29px;color:#647c43;line-height:1}.coffee-brand small{margin-left:auto;font-size:9px;letter-spacing:0;font-weight:400;color:#686f5f}
.example-website h3{font-size:clamp(26px,3vw,35px);line-height:1.1;letter-spacing:-1.3px;font-weight:750;margin:23px 0 11px;overflow-wrap:anywhere}.example-website>p{font-size:12px;line-height:1.5;color:#60675a}.example-website>img{display:block;width:100%;height:190px;object-fit:contain;background:#d2def2;border-radius:13px;margin:20px 0}.example-website>img.is-duck{background:#d8c9f0}.coffee-review{font-size:10px;line-height:1.5}.coffee-review p{font-size:13px;margin:0 0 6px}.coffee-review>span{color:#686f5f;display:inline-block}.is-blurred{filter:blur(5px);user-select:none}
.demo-next{max-width:1120px;margin:0 auto 64px;padding:8px 30px 36px;display:flex;justify-content:space-between;align-items:center;gap:36px;border-bottom:1px solid var(--demo-line);color:var(--demo-ink)}.demo-next h2{font-size:32px;letter-spacing:-1px;line-height:1.1;margin:0 0 12px;font-weight:650}.demo-next>div>p{font-size:14px;color:var(--demo-muted);line-height:1.6;margin:0}.demo-next .signin-card{margin:0;width:310px;flex:none}.demo-next .agreement{margin-bottom:0}
@media(max-width:1180px){.home-playground{margin-left:30px;margin-right:30px}.demo-intro h1{font-size:64px}.demo-stage{padding:22px 24px}.demo-controls{padding:26px 24px}}
@media(max-width:850px){.demo-intro{display:block}.demo-intro>p{margin-top:17px;max-width:none}.demo-split{grid-template-columns:minmax(250px,310px) minmax(0,1fr)}.demo-stage{padding:20px 16px}.demo-controls{padding:24px 20px}.demo-free{display:none}.demo-controls h2{font-size:27px}.demo-scenes{gap:5px}.demo-next h2{font-size:28px}}
@media(max-width:650px){.home-demo-page .puppet-theatre{height:126px}.home-demo-page .puppet-word{top:40px;font-size:clamp(40px,13.2vw,72px)}.demo-intro{padding:0 20px;margin-bottom:24px}.demo-intro h1{font-size:54px}.demo-intro>p{font-size:14px}.demo-intro br{display:none}.home-playground{margin:0 12px 40px;border-radius:16px}.demo-toolbar{padding:10px;justify-content:center}.demo-modes{width:100%;justify-content:space-between}.demo-modes button{flex:1;justify-content:center;padding:12px 8px;font-size:12px;gap:5px}.demo-split{display:flex;flex-direction:column}.demo-controls{padding:22px 20px}.demo-controls h2{font-size:28px}.demo-controls h2 br{display:none}.demo-kicker{margin-bottom:8px}.demo-scenes button{font-size:12px;padding:12px 6px}.demo-field textarea{min-height:96px}.demo-stage{border-left:0;border-top:1px solid var(--demo-line);padding:20px 16px}.demo-preview-wrap{max-width:430px}.demo-next{display:block;margin-bottom:40px;padding:0 24px 28px}.demo-next .signin-card{width:100%;max-width:360px;margin-top:24px}.example-website{padding:20px}.coffee-brand small{max-width:80px;text-align:right}.example-website>img{height:180px}.demo-preview-note{margin-top:17px}}
@media(prefers-reduced-motion:reduce){.did-twist{animation:none}}