/* Shared site composition. The renderers keep their own portable styles. */
:root{--site-sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--site-line:color-mix(in srgb,var(--ink) 13%,transparent)}
body{background:var(--paper)}
.topbar{position:relative;background:var(--paper);border-bottom:1px solid var(--site-line);box-shadow:none;backdrop-filter:none}
.topbar__in{max-width:1360px;min-height:76px;padding-inline:36px}
.topnav{gap:30px;font:500 13px var(--site-sans)}
.topnav a{padding-block:10px}
.topnav .nav-open{border:1px solid var(--site-line);border-radius:6px;padding:10px 16px;color:var(--ink)}
.brand__name{font:650 16px var(--site-sans);letter-spacing:-.5px}
.brand__to{color:var(--acc)}
.eyebrow{font:550 11px/1.5 var(--site-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:24px}
.opening{width:100%;background:var(--paper-2);border-bottom:1px solid var(--site-line)}
.opening-inner{max-width:1288px;margin:auto;padding:72px 36px 68px}
.opening h1{font:500 clamp(76px,11vw,156px)/.95 var(--font-serif);letter-spacing:-.065em;margin:0 0 26px}
.opening h1 em{font-weight:400;color:var(--acc)}
.opening-line{font:400 clamp(25px,3vw,39px)/1.15 var(--font-serif);letter-spacing:-.025em;margin-bottom:18px}
.opening-description{max-width:460px;font:15px/1.7 var(--site-sans);color:var(--ink-2)}
.opening-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:30px}
.action-primary{display:inline-flex;align-items:center;gap:30px;background:var(--acc);color:white;font:550 13px var(--site-sans);padding:15px 21px;border-radius:5px;text-decoration:none;transition:background .18s,transform .18s}
.action-primary:hover{background:color-mix(in srgb,var(--acc) 85%,black);transform:translateY(-2px)}
.text-link{font:550 13px/1.5 var(--site-sans);text-decoration:none;color:var(--ink);border-bottom:1px solid var(--site-line);padding-bottom:5px}
.text-link:hover{border-color:var(--acc);color:var(--acc)}
.home-demo{max-width:1288px;margin:0 auto;padding:36px 36px 0}
.demo-heading{display:flex;justify-content:space-between;gap:24px;margin-bottom:18px;font:500 13px/1.5 var(--site-sans)}
.demo-heading span:last-child{color:var(--ink-3);font-weight:400}
.home-demo .demo__grid{grid-template-columns: minmax(0,.85fr) minmax(0,1.4fr);gap:0;border:1px solid var(--site-line);border-radius:8px;overflow:hidden;box-shadow:none}
.home-demo :is(.plate,.well){border-radius:0;box-shadow:none;border:0}
.home-demo .plate__bar,.home-demo .well__bar{border-radius:0;min-height:48px}
.home-demo .board{min-height:300px;padding:20px;gap:12px}
.home-demo .card{border-radius:5px;box-shadow:0 1px 2px #0001}
.home-demo .md{font-size:11px;line-height:1.8;padding:24px}
.home-demo .plate__meta{display:none}
.home-section{max-width:1288px;margin:auto;padding:110px 36px;display:grid;grid-template-columns:1fr 1.3fr;gap:80px}
.section-intro h2,.portable-section h2,.home-ending h2{font:400 clamp(36px,4vw,56px)/1.04 var(--font-serif);letter-spacing:-.035em;margin:0 0 30px}
.format-link{display:flex;align-items:center;gap:24px;text-decoration:none;padding:25px 0;border-bottom:1px solid var(--site-line);transition:padding .2s,color .2s}
.format-link:first-child{border-top:1px solid var(--site-line)}
.format-link:hover{padding-left:10px;color:var(--acc)}
.format-symbol{font:12px var(--site-sans);color:var(--ink-3)}
.format-link strong{display:block;font:500 23px var(--font-serif);color:var(--ink)}
.format-link small{display:block;font:13px/1.5 var(--site-sans);color:var(--ink-3);margin-top:6px}
.link-arrow{margin-left:auto;font:20px var(--site-sans);color:var(--ink-3)}
.portable-section{background:var(--paper-3);border-block:1px solid var(--site-line)}
.portable-inner{max-width:1288px;margin:auto;padding:86px 36px;position:relative}
.portable-inner>p:not(.eyebrow){max-width:480px;font:15px/1.8 var(--site-sans);color:var(--ink-2);margin-bottom:24px}
.portable-flow{position:absolute;right:36px;top:110px;width:42%;display:flex;align-items:center;gap:22px;padding:50px 0;font:22px/2.5 var(--font-serif)}
.portable-flow code{flex:none;font:13px var(--font-mono);padding:25px 16px;background:var(--paper);border:1px solid var(--site-line);border-radius:4px;transform:rotate(-4deg)}
.flow-line{height:1px;background:var(--ink-3);flex:1;min-width:20px}
.toolkit>a{display:flex;align-items:center;gap:24px;border-top:1px solid var(--site-line);padding:24px 0;text-decoration:none}
.toolkit>a>span{font:12px var(--site-sans);color:var(--ink-3)}
.toolkit>a>span:last-child{margin-left:auto}
.toolkit h3{font:500 24px var(--font-serif);margin:0 0 7px}
.toolkit p,.small-note{font:13px/1.6 var(--site-sans);color:var(--ink-3)}
.agent-prompt{border-top:1px solid var(--site-line);margin:0 0 16px}
.agent-prompt summary{font:550 13px var(--site-sans);cursor:pointer;padding:22px 0}
.agent-prompt pre{white-space:pre-wrap;max-height:380px;overflow:auto;font:12px/1.7 var(--font-mono);padding:24px;color:var(--plate-fg)}
.home-ending{border-top:1px solid var(--site-line);padding:80px 24px;text-align:center}
.home-ending h2{margin-bottom:28px}
.site-footer{display:flex;align-items:center;flex-wrap:wrap;gap:24px;max-width:1288px;margin:auto;padding:30px 36px;border-top:1px solid var(--site-line);font:12px/1.5 var(--site-sans);color:var(--ink-3)}
.site-footer>a:first-child{font-weight:650;color:var(--ink)}
.site-footer>a{color:inherit;text-decoration:none}
.site-footer>span:nth-child(2){margin-right:auto}
.draft-note{font-size:11px}
/* Format library */
.catalog-main{max-width:1180px;margin:auto;padding:64px 36px 80px}
.catalog-intro{max-width:620px;margin-bottom:70px}
.catalog-intro h1{font:400 clamp(46px,6vw,72px)/1.04 var(--font-serif);letter-spacing:-.04em;margin:0 0 24px}
.catalog-intro>p:last-child{font:15px/1.8 var(--site-sans);color:var(--ink-2);max-width:530px}
.catalog-group{display:grid;grid-template-columns:180px minmax(0,1fr);gap:40px;margin-bottom:48px}
.catalog-group>h2{font:500 12px var(--site-sans);color:var(--ink-3);padding-top:28px;text-transform:uppercase;letter-spacing:.1em}
.catalog-row{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--site-line);padding:24px 0}
.catalog-row h3{font:500 25px var(--font-serif);margin:0 0 5px}.catalog-row h3 a{text-decoration:none}
.catalog-row p{font:13px/1.6 var(--site-sans);color:var(--ink-3)}
.catalog-row nav{display:flex;gap:18px;align-items:center;flex:none;font:12px var(--site-sans)}
.catalog-row nav a{text-decoration:none}.catalog-row nav a:hover{color:var(--acc)}
.catalog-try{border:1px solid var(--site-line);padding:8px 12px;border-radius:5px}
.catalog-reference{border-top:1px solid var(--site-line);margin-top:20px}
.catalog-reference>summary{padding:20px 0;font:500 13px var(--site-sans);cursor:pointer}
.catalog-all{display:flex;flex-wrap:wrap;gap:20px;font:13px var(--site-sans)}
.catalog-end{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding-top:30px;border-top:1px solid var(--site-line);font:13px var(--site-sans);color:var(--ink-3)}
.catalog-page .section__in{display:block;padding:20px 0}.catalog-page .section__no{display:none}
/* Documentation stays detailed, but drops the ornamental chrome. */
.cropmark{display:none}.colophon{padding-top:44px;padding-bottom:32px}.colophon__id{font-size:clamp(38px,5vw,64px)}
.colophon__line{font-size:17px;max-width:720px}.facts{font-size:12px}.contents{position:relative;box-shadow:none}.contents__in{font-size:11px;gap:20px}
.section__no{font-family:var(--site-sans);font-size:11px}.section__lede{font-size:17px}
.skill-top{font-family:var(--site-sans)}.skill-actions{border-radius:5px;box-shadow:none}
/* Developer guide */
.developer-main{max-width:1000px;margin:auto;padding:64px 36px 90px}
.developer-main h1{font:400 clamp(42px,6vw,68px)/1.03 var(--font-serif);letter-spacing:-.04em;margin-bottom:24px}
.developer-main .intro{font:16px/1.8 var(--site-sans);color:var(--ink-2);max-width:620px;margin-bottom:48px}
.developer-section{display:grid;grid-template-columns:180px minmax(0,1fr);gap:45px;border-top:1px solid var(--site-line);padding:35px 0}
.developer-section>h2{font:550 15px var(--site-sans)}
.developer-section p{font:14px/1.8 var(--site-sans);color:var(--ink-2);margin:0 0 20px}
.developer-section pre{font:12px/1.8 var(--font-mono);background:var(--paper-2);border:1px solid var(--site-line);border-radius:6px;padding:20px;overflow:auto;margin:20px 0}
.developer-section h3{font:550 15px var(--site-sans);margin:28px 0 12px}
.developer-section .plate{background:transparent;box-shadow:none;border:0}.developer-section .copy{color:var(--ink);border:1px solid var(--site-line);float:right;margin:10px}
@media(prefers-reduced-motion:no-preference){.opening-inner>*{animation:site-in .65s both}.opening-inner>:nth-child(2){animation-delay:.06s}.opening-inner>:nth-child(3){animation-delay:.12s}.opening-inner>:nth-child(4){animation-delay:.18s}.opening-inner>:nth-child(5){animation-delay:.24s}@keyframes site-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}
@media(max-width:900px){.home-section{gap:40px}.portable-flow{position:static;width:100%;max-width:500px;padding:35px 0 0}.home-demo .demo__grid{grid-template-columns:1fr}.home-demo .plate--source{display:none}.catalog-group{grid-template-columns:100px minmax(0,1fr);gap:20px}.catalog-row{align-items:start;flex-direction:column}.catalog-row nav{gap:22px}.topnav{gap:18px}.topbar__in{padding-inline:24px}}
@media(max-width:600px){.topbar__in{padding-inline:18px;min-height:64px}.brand__name{font-size:14px}.topnav{gap:16px;font-size:12px}.topnav a:nth-child(2),.topnav a:nth-child(3){display:none}.topnav .nav-open{padding:8px 10px}.opening-inner{padding:52px 24px}.opening h1{font-size:clamp(66px,14vw,90px)}.opening-line{font-size:29px}.opening-description{font-size:14px}.opening-actions{gap:20px}.home-demo{padding:24px 16px 0}.demo-heading{flex-direction:column;gap:3px}.home-demo .board{padding:12px;gap:8px}.home-section{display:block;padding:64px 24px}.section-intro{margin-bottom:36px}.portable-inner{padding:58px 24px}.portable-flow{font-size:20px;gap:14px}.site-footer{padding:24px;gap:18px}.site-footer .draft-note{width:100%}.catalog-main,.developer-main{padding:40px 24px 60px}.catalog-group,.developer-section{grid-template-columns:1fr;gap:12px}.catalog-group{margin-bottom:35px}.catalog-group>h2{padding-top:0}.catalog-intro{margin-bottom:40px}.catalog-row{padding:20px 0}.developer-section pre{font-size:11px}.home-ending{padding:60px 24px}}
@media(max-width:600px){.topnav{display:flex}}
@media(max-width:600px){.topnav a{display:block}.topnav a:nth-child(2),.topnav a:nth-child(3){display:none}.topnav .nav-open{display:block}}
@media(max-width:720px){.topbar .topnav{display:flex}.topbar .topnav a{display:block}.topbar .topnav a:nth-child(2),.topbar .topnav a:nth-child(3){display:none}.topbar .topnav .nav-open{display:block}}

.topbar .topnav .nav-account{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 16px;border-radius:6px;background:var(--acc);color:white;white-space:nowrap}.topbar .topnav .nav-account:hover{filter:brightness(.92)}
@media(max-width:600px){.topbar .topnav .nav-open{display:none}.topbar .topnav .nav-account{display:inline-flex;padding:8px 12px}}