/* MoonPress Chat's production CSS loads first. Studio changes color and product content. */
:root{--paper:#fff;--paper-blue:#f4f6f8;--blue:#315d49;--blue-hover:#254a39;--blue-focus:#315d49;--success:#315d49;--studio-green:#315d49;--studio-green-light:#edf4ef}
html{scroll-behavior:smooth;scroll-padding-top:90px}body{background:#fff}main section,main header.story-intro{background:#fff}.site-header{background:#fff}.button--dark,.button--dark:hover{background:var(--studio-green);color:#fff}.button--dark:hover{background:var(--blue-hover)}.brand__suffix{font-weight:450;color:var(--ink-secondary)}.brand__mark{width:32px;height:32px}.site-header__actions{justify-self:end;display:flex;align-items:center;gap:12px}.icon{width:18px;height:18px;flex:none}.menu-toggle,.menu-close{width:44px;height:44px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;background:#fff}.menu-toggle{display:none}.menu-toggle svg{width:22px;height:22px}.skip-link{position:fixed;left:20px;top:-100px;z-index:10000;padding:12px 18px;background:#fff;color:var(--ink);border:1px solid var(--ink)}.skip-link:focus{top:12px}:focus-visible{outline:2px solid var(--studio-green);outline-offset:4px}.mobile-menu{inset:0 0 auto auto;margin:0;padding:24px;width:min(420px,100%);height:100dvh;max-height:100dvh;border:0;background:#fff}.mobile-menu::backdrop{background:#0d0e1080}.mobile-menu__header{display:flex;justify-content:space-between;align-items:center;gap:12px}.mobile-menu__links{display:grid;gap:8px;margin:56px 0 32px}.mobile-menu__links a{padding:12px 0;font-size:24px}.mobile-menu>.button{background:var(--studio-green);color:#fff}
/* The same wide, three-pane preview composition as MoonPress Chat. */
.workspace__sidebar{position:relative}.workspace__brand strong{font-size:14px}.studio-sidebar{display:grid;gap:4px;margin-top:30px}.studio-sidebar span{padding:12px;border-radius:8px;font-size:13px;color:var(--ink-secondary)}.studio-sidebar .is-active{background:var(--studio-green-light);color:var(--studio-green)}.workspace__site{position:absolute;bottom:24px;left:18px;right:18px}.workspace__url,.workspace__profile,.workspace small,.workspace dt,.workspace dd,.workspace .tag,.source-chips span{font-size:13px}.workspace__conversation{min-width:0}.panel-heading small{font-size:13px}.panel-heading strong{font-size:15px}.workspace .conversation-thread{padding:40px 28px;gap:32px}.workspace .message{font-size:15px}.workspace .message p{font-size:15px;line-height:1.6}.workspace #demo-answer strong,.workspace #demo-answer span{display:block}.workspace #demo-answer strong{margin-bottom:8px}.avatar--quip{background:var(--studio-green);color:#fff}.workspace .composer{margin-top:auto;min-height:64px;justify-content:space-between;font-size:14px}.workspace .composer .studio-send{flex:0 0 32px;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--studio-green);color:#fff;font-size:20px}.workspace .context-list dd{line-height:1.7}.studio-demo-caption{margin:30px 0 12px;text-align:center;font-size:14px;color:var(--ink-secondary)}.studio-examples{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.studio-examples button{min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13px;transition:background 150ms,color 150ms}.studio-examples button[aria-pressed=true]{background:var(--studio-green-light);border-color:var(--studio-green);color:var(--studio-green)}
/* Original alternating chapter grid and window framing, with Shuttle illustrations. */
.story-chapter .ui-stage{background:#f4f6f8}.mini-window{width:100%}.mini-window__bar{min-height:52px;font-size:13px;padding:12px 18px;gap:10px}.mini-window .tag{font-size:13px;white-space:nowrap}.studio-app__body{padding:40px 28px;text-align:center}.studio-app__mark{display:grid;place-items:center;margin:0 auto 24px;width:64px;height:64px;border-radius:14px;background:var(--studio-green);color:#fff;font-size:36px}.studio-app h4,.studio-form h4{font-size:24px;font-weight:580;line-height:1.18;letter-spacing:-.03em}.studio-app p,.studio-form p{font-size:14px;line-height:1.55;color:var(--ink-secondary);margin-top:14px}.studio-file{display:grid;gap:6px;margin:32px 0 16px;padding:18px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px}.studio-file span:last-child,.studio-app small{font-size:13px;color:var(--ink-secondary)}.studio-form{padding:30px}.studio-label{display:block;margin:24px 0 8px;font-size:13px}.studio-form .field{font-size:14px;overflow-wrap:anywhere}.studio-note{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-secondary)}.studio-model{display:flex;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--line-subtle)}.studio-model strong,.studio-model small{display:block}.studio-model strong{font-size:15px;font-weight:570}.studio-model small{margin-top:4px;font-size:13px;color:var(--ink-secondary)}
/* Product family and FAQ follow the source's twelve-column section introduction. */
.studio-products{padding-block:var(--section-space);border-top:1px solid var(--line-subtle)}.studio-products__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:72px}.studio-products__grid article{display:flex;align-items:flex-start;flex-direction:column;border-top:1px solid var(--line);padding-top:26px}.studio-product-status{font-size:13px;color:var(--ink-secondary)}.studio-products__grid h3{font-size:28px;line-height:1.15;font-weight:570;letter-spacing:-.035em;margin-top:24px}.studio-products__grid p{font-size:16px;line-height:1.6;color:var(--ink-secondary);margin:18px 0 26px}.studio-products__grid a{margin-top:auto}.studio-faq{display:grid;grid-template-columns:1fr 1.1fr;gap:10%;padding-block:var(--section-space);border-block:1px solid var(--line-subtle)}.studio-faq h2{font-size:clamp(40px,5vw,72px);font-weight:570;line-height:1;letter-spacing:-.05em}.studio-faq>div>p{font-size:17px;margin-top:24px;color:var(--ink-secondary)}.faq__item{border-bottom:1px solid var(--line)}.faq__item:first-child{border-top:1px solid var(--line)}.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font-size:17px;font-weight:550;line-height:1.45}.faq__item summary::-webkit-details-marker{display:none}.faq__item summary::after{content:'+';font-size:22px;font-weight:400}.faq__item[open] summary::after{content:'−'}.faq__item p{font-size:16px;line-height:1.65;color:var(--ink-secondary);padding:0 28px 24px 0}.purchase-cta{background:#fff;color:var(--ink)}.purchase-cta__inner>p:first-of-type{color:var(--ink-secondary)}.purchase-cta__inner>.button{margin-top:32px}.site-footer .brand__suffix{color:#b8bec8}.site-footer__top nav{display:flex;gap:28px;flex-wrap:wrap}.site-footer a{min-height:44px;display:inline-flex;align-items:center;gap:8px}.site-footer__bottom{color:#b8bec8}.site-footer .text-link{font-size:14px}
@media(min-width:1600px){.workspace .message p{font-size:17px}.studio-products__grid h3{font-size:32px}}
@media(max-width:1023px){.site-header__cta{display:none}.menu-toggle{display:grid}.studio-products__grid{gap:26px}.studio-products__grid h3{font-size:24px}.studio-app__body,.studio-form{padding:24px 18px}.mini-window__bar{padding-inline:12px;flex-wrap:wrap}.studio-faq{gap:6%}.workspace__site{left:12px;right:12px}.workspace__brand strong{font-size:13px}.site-footer__top{flex-wrap:wrap}}
@media(max-width:640px){.brand{font-size:17px}.brand__mark{width:28px;height:28px}.landing-hero h1{font-size:clamp(44px,13.1vw,54px)}.workspace__url{font-size:13px}.workspace{min-height:0}.workspace__conversation{min-height:530px}.workspace .conversation-thread{padding:28px 18px;gap:24px}.workspace .panel-heading{padding:16px;gap:12px}.workspace .panel-heading small,.workspace .tag{font-size:13px}.workspace .message p{font-size:14px}.workspace .message{gap:10px}.workspace .message .avatar{width:26px;height:26px;min-width:26px}.workspace .source-chips{flex-wrap:wrap}.workspace .source-chips span{font-size:13px}.workspace .composer{font-size:13px;margin-inline:16px}.studio-demo-caption{text-align:left;line-height:1.5}.studio-examples{justify-content:flex-start}.studio-examples button{font-size:12px;padding-inline:11px}.story-chapter .ui-stage{margin-inline:0;width:100%}.studio-products__grid{grid-template-columns:1fr;gap:40px;margin-top:44px}.studio-products__grid h3{font-size:28px}.studio-faq{grid-template-columns:1fr;gap:44px}.studio-faq h2{font-size:48px}.faq__item summary{font-size:16px}.faq__item p{font-size:15px}.site-footer__top{flex-direction:column;align-items:flex-start}.site-footer__top nav{gap:20px}.site-footer__bottom{gap:20px;flex-wrap:wrap}.purchase-cta .button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.site-header{position:static}.menu-toggle,.studio-examples,.mobile-menu{display:none}.workspace,.mini-window{box-shadow:none}.story-chapter,.purchase-cta,.studio-products,.studio-faq,.story-intro{min-height:0;padding-block:36px}.site-footer{background:white;color:black}}