@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{--green:#28694f;--ink:#203e35;--muted:#7a8b80;--line:#dde5da;--paper:#f6f8f4;--mint:#e3eee0}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:15px 'DM Sans',system-ui,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid #72ae89;outline-offset:5px}p{line-height:1.8}.container{max-width:1200px;margin:0 auto;padding-inline:32px}header{height:92px;background:#ffffffec;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:32px}.brand{display:flex;align-items:center;gap:12px;color:var(--green)}.brand-mark{width:42px;height:42px}.brand>span{font:800 27px/.9 'Manrope',sans-serif;letter-spacing:-1px;color:var(--ink)}.brand small{display:block;font:700 8px 'DM Sans';letter-spacing:2px;margin-top:10px}.nav-links{display:flex;gap:30px;color:#7a8d7e;font-size:13px}.nav-links a:hover,.text-link:hover,.builder-links a:hover{color:#245e44;text-decoration:underline;text-underline-offset:5px}.nav-github{display:flex;align-items:center;gap:22px;font-size:13px;font-weight:600;border:1px solid var(--line);border-radius:8px;padding:10px 15px;background:white}.hero{padding-top:87px;padding-bottom:96px;display:grid;grid-template-columns:1.05fr 1fr;gap:66px;align-items:center}.eyebrow{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:700;letter-spacing:2px;color:#81947f}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#70a184}h1,h2,h3{font-family:'Manrope',sans-serif}h1{font-size:clamp(48px,5.4vw,70px);font-weight:750;line-height:1.08;letter-spacing:-3.5px;margin:26px 0 24px}h1 em{font-style:normal;color:#4b805a}.lead{font-size:19px;line-height:1.65;letter-spacing:-.3px;color:#5a7564;margin:0 0 18px}.hero-description{font-size:14px;color:var(--muted);max-width:455px;margin:0 0 29px}.actions{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.button{padding:14px 19px;border-radius:9px;font-size:12px;font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:16px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.primary{background:var(--green);color:#fff;box-shadow:0 3px 5px #224b3112}.primary:hover{background:#20583f}.secondary{background:#fff;border:1px solid var(--line);color:#6f846f}.hero-note{display:flex;align-items:center;gap:10px;font-size:9px;color:#96a18f;margin-top:24px}.hero-note i{height:3px;width:3px;border-radius:50%;background:#bdc8b7}.loop-preview{background:#fff;border:1px solid #d8e3d4;border-radius:17px;padding:23px 26px;box-shadow:0 25px 65px #435a3710;position:relative;margin-bottom:55px}.preview-top{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #e7ece1;padding-bottom:19px;font-size:8px;letter-spacing:1.3px;color:#809578}.preview-top>span:first-child{display:flex;align-items:center;gap:8px}.outline-tag{font-size:8px;letter-spacing:1px;font-weight:600;color:#7e9470;border:1px solid #e0e8da;border-radius:5px;padding:5px 7px;white-space:nowrap}.preview-title{display:flex;align-items:center;gap:14px;padding:25px 0 10px}.signal-icon{width:41px;height:41px;background:#edf4e8;border-radius:11px;display:grid;place-items:center;color:#7a9d65;font-size:28px}.muted-label{font-size:8px;letter-spacing:1px;color:#9aa88d}.preview-title h2{font-size:16px;margin:5px 0;letter-spacing:-.4px}.preview-flow{list-style:none;padding:0;margin:10px 0 24px}.preview-flow li{display:flex;gap:14px;align-items:center;padding:17px 0;position:relative}.preview-flow li:not(:last-child):after{content:'';position:absolute;left:16px;top:54px;height:20px;width:1px;background:#dbe6d6}.step-icon{width:34px;height:34px;border:1px solid #dce8d5;border-radius:9px;display:grid;place-items:center;color:#80a170;font-size:10px;flex:none}.preview-flow strong{font-size:12px;font-weight:600}.preview-flow p{font-size:10px;color:#96a38b;margin:5px 0 0}.step-arrow{margin-left:auto;color:#9cb08d;font-size:20px}.preview-bottom{padding-top:17px;border-top:1px solid #e7ece1;font-size:9px;color:#8ca17b;display:flex;align-items:center;gap:7px}.tiny-pulse{width:5px;height:5px;background:#9ab988;border-radius:50%}.small-card{position:absolute;right:18px;left:28px;bottom:-69px;background:#ecf3e8;box-shadow:0 12px 24px #35582509;border:1px solid #d6e5cb;border-radius:12px;padding:18px;display:flex;align-items:center;gap:14px}.small-card-icon{font-size:25px;color:#729d60}.small-card strong{font-size:12px;font-weight:600}.small-card p{font-size:10px;color:#86a075;margin:5px 0 0}.integrations{border-block:1px solid var(--line);background:#f0f4ed;padding:25px 0 28px}.integrations .eyebrow{justify-content:center;font-size:8px;letter-spacing:2px}.tool-list{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:25px;color:#72866c;font-family:'Manrope';font-size:18px;font-weight:650}.tool-list b{font-weight:450;font-size:13px}.section{padding-top:88px;padding-bottom:88px}.section-heading{display:flex;justify-content:space-between;gap:80px;align-items:flex-end;margin-bottom:40px}.section-heading h2,.demo-layout h2,.builder h2{font-size:38px;line-height:1.23;letter-spacing:-1.6px;font-weight:700;margin:17px 0 0}.section-heading>p{max-width:350px;color:var(--muted);font-size:13px;margin:0 0 3px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.feature-grid article{padding:24px 0;border-top:1px solid #cfdcc8}.feature-number{font-size:9px;letter-spacing:1.5px;color:#86a077;font-weight:600}.feature-grid h3{font-size:18px;letter-spacing:-.5px;margin:22px 0 12px}.feature-grid p{font-size:13px;color:var(--muted);margin:0}.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:29px}.more-grid article{display:flex;gap:18px;background:white;border:1px solid var(--line);border-radius:12px;padding:24px}.feature-symbol{font-size:25px;color:#85a475;flex:none}.more-grid h3{font-size:14px;margin:2px 0 9px}.more-grid p{font-size:12px;color:#8a9981;margin:0}.demo-section{background:#eaf1e4;border-block:1px solid #dae5d2;padding:61px 0}.demo-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:62px;align-items:center}.demo-layout h2{font-size:30px}.demo-layout p{font-size:13px;color:#819173;margin:18px 0 22px}.text-link{font-size:12px;font-weight:650;color:#426e3e}.video-frame{aspect-ratio:16/9;background:#dfe9d7;border:1px solid #cbdcbe;border-radius:14px;overflow:hidden;box-shadow:0 15px 35px #354f2910}.video-frame iframe{width:100%;height:100%;border:0}.video-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:25px;text-align:center;background:radial-gradient(ellipse at center,#edf3e7,#dce8d3)}.play-icon{height:56px;width:56px;display:grid;place-items:center;border:1px solid #bdd0af;border-radius:50%;font-size:32px;color:#7d9a6d;margin-bottom:7px}.video-placeholder strong{font-size:14px;color:#5c7d4b}.video-placeholder>span:not(.play-icon){font-size:11px;color:#8ba07b}.video-placeholder>a{font-size:11px;text-decoration:underline;text-underline-offset:4px;color:#5c7d4b}.example-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.example-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:29px;display:flex;flex-direction:column}.example-top{display:flex;justify-content:space-between;align-items:center}.example-icon{display:grid;place-items:center;background:#eef4e9;color:#6e935a;width:42px;height:42px;border-radius:11px;font-size:23px}.example-card h3{font-size:23px;letter-spacing:-.7px;margin:25px 0 9px}.example-card>p{color:var(--muted);font-size:13px;margin:0 0 22px}.example-detail{border-top:1px solid #e4ebde;padding-top:17px;color:#96a18c;font-size:11px;line-height:1.8;margin-top:auto}.example-card .text-link{margin-top:24px}.section-foot{font-size:10px;color:#94a087;margin:22px 0 0}.section-foot a{margin-left:10px;color:#658152}.resources-section{background:#edf2e8;border-block:1px solid #dce5d6;padding:72px 0}.resource-list{border-top:1px solid #d5e0cc}.resource-list>a{display:flex;align-items:center;gap:22px;border-bottom:1px solid #d5e0cc;padding:25px 5px}.resource-list>a:hover{background:#e5eddd}.resource-icon{font-size:25px;color:#82a06d;width:40px;text-align:center}.resource-list h3{font-size:16px;margin:0 0 5px}.resource-list p{font-size:12px;color:#8a9d7c;margin:0}.resource-list>a>span:last-child{margin-left:auto;font-size:11px;color:#66864f;white-space:nowrap}.setup-note{display:flex;align-items:center;gap:24px;margin-top:30px}.setup-note p{font-size:11px;color:#879a77;flex:1}.setup-note strong{color:#678353;font-weight:600}.setup-note .text-link{white-space:nowrap}.builder{display:grid;grid-template-columns:230px 1fr;gap:75px;max-width:1000px;align-items:center}.builder-portrait{position:relative;width:210px;max-width:100%}.builder-portrait img{display:block;width:100%;height:auto;aspect-ratio:543/642;object-fit:cover;border-radius:100px 100px 24px 24px;border:1px solid #d4dfcb;box-shadow:0 14px 35px #354f2912}.builder-portrait>span{position:absolute;bottom:12px;right:-9px;width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:#f5f8f1;border:1px solid #d6e2cb;font-size:24px;color:#87a875}.builder h2{font-size:36px}.builder p{font-size:13px;color:var(--muted);max-width:550px}.builder strong{font-weight:600;color:#617958}.builder .actions{margin-top:24px;gap:22px}.builder-links{display:flex;gap:23px;font-size:10px;color:#9aa68e;margin-top:25px}footer{border-top:1px solid var(--line);padding:25px 0}.footer-inner{display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#9aa58f}.skip{position:absolute;left:20px;top:-100px;z-index:20;padding:15px;background:white}.skip:focus{top:12px}@media(max-width:950px){.hero{gap:35px;padding-top:65px}.hero-note{flex-wrap:wrap}.nav-links{gap:20px}.tool-list{flex-wrap:wrap;justify-content:center;font-size:16px}.section-heading{gap:35px}.demo-layout{gap:35px}.builder{gap:40px}}@media(max-width:700px){.container{padding-inline:22px}header{height:77px}.nav{gap:15px}.nav-links{display:none}.brand>span{font-size:24px}.brand-mark{width:37px}.nav-github{padding:9px 12px}.hero{grid-template-columns:1fr;padding-top:48px;padding-bottom:60px;gap:46px}.hero h1{font-size:56px}.hero-description{max-width:100%}.hero .loop-preview{margin-bottom:55px}.lead{font-size:17px}.hero-note{font-size:9px}.loop-preview{padding:20px}.preview-flow p{font-size:11px}.preview-top{font-size:7px}.integrations{padding:24px 0}.tool-list{gap:20px 28px}.section{padding-top:57px;padding-bottom:57px}.section-heading{display:block;margin-bottom:28px}.section-heading h2,.builder h2{font-size:31px}.section-heading>p{margin-top:20px;max-width:100%}.feature-grid,.more-grid,.example-grid,.demo-layout{grid-template-columns:1fr}.feature-grid{gap:5px}.feature-grid article{padding-top:20px}.more-grid{margin-top:20px;gap:15px}.demo-section{padding:44px 0}.demo-layout{gap:28px}.video-placeholder{gap:9px;padding:18px}.play-icon{height:42px;width:42px;font-size:25px;margin:0}.video-placeholder strong{font-size:12px}.resources-section{padding:48px 0}.resource-list>a{gap:14px;align-items:flex-start;flex-wrap:wrap;padding:22px 0}.resource-icon{width:28px}.resource-list>a>div{flex:1}.resource-list>a>span:last-child{margin-left:42px;flex-basis:100%}.setup-note{align-items:flex-start;flex-wrap:wrap;gap:14px}.setup-note p{margin:0}.setup-note .text-link{margin-left:39px}.builder{grid-template-columns:1fr;gap:26px}.builder-portrait{width:150px}.builder-portrait img{border-radius:72px 72px 20px 20px}.builder-portrait>span{height:32px;width:32px;font-size:18px;bottom:8px}.builder-links{flex-wrap:wrap;gap:17px}.footer-inner{flex-wrap:wrap;line-height:1.8}.footer-inner>span:nth-child(2){display:none}html{scroll-padding-top:95px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

.builder-profile{margin:0;width:210px;max-width:100%}.builder-profile figcaption{margin-top:20px;text-align:center;font:700 20px/1.4 Manrope,system-ui,sans-serif;color:var(--ink)}@media(max-width:700px){.builder-profile{width:150px}.builder-profile figcaption{font-size:17px;margin-top:16px}}
/* Architecture: SVG keeps the flow crisp and the connectors deliberate. */
.architecture-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:#f8faf6;margin:32px 0 0;scrollbar-color:#a7bca0 #edf2e8}.repair-architecture{display:block;width:100%;min-width:920px;height:auto;font-family:'DM Sans',system-ui,sans-serif}.diagram-node>rect{fill:white;stroke:#d9e3d3}.diagram-core>rect{fill:#234e3e}.diagram-label{font-size:10px;letter-spacing:1.2px;font-weight:700;fill:#788c79}.diagram-title{font-family:Manrope,system-ui,sans-serif;font-size:20px;font-weight:700;letter-spacing:-.65px;fill:#203e35}.diagram-copy{font-size:11px;fill:#768778}.diagram-core .diagram-label{fill:#c7dbab}.diagram-core .diagram-title,.diagram-core .diagram-copy{fill:white}.diagram-edge-label{font-size:11px;fill:#7b9079}.diagram-note{font-size:17px;fill:#5c795f;font-weight:500;letter-spacing:-.2px}.diagram-service{font-size:13px;fill:#33533b;font-weight:700}.diagram-caption{display:flex;justify-content:space-between;gap:16px;font-size:11px;color:#7e9079;margin:14px 0}.diagram-mobile-hint{display:none}.architecture-details{font-size:12px;line-height:1.8;color:#7a8b80;border-bottom:1px solid var(--line);padding:0 0 20px;margin-bottom:35px}.architecture-details summary{cursor:pointer;color:#42684e}.architecture-details p{max-width:880px}.architecture-details a{text-decoration:underline;text-underline-offset:3px}
/* Sponsor credit and a small, informal event album. */
.sponsors-section{padding:76px 0;background:#eef3e9;border-block:1px solid #dce5d6}.sponsor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.sponsor-card{background:#fff;border:1px solid #dbe4d3;border-radius:14px;padding:28px;display:flex;flex-direction:column}.sponsor-brand{display:flex;align-items:center;gap:12px;width:fit-content}.sponsor-brand img{object-fit:contain;flex:none}.sponsor-brand h3{font:700 23px Manrope,system-ui,sans-serif;letter-spacing:-.8px;margin:0}.sponsor-brand:hover h3{text-decoration:underline;text-underline-offset:5px}.sponsor-role{font-size:9px;letter-spacing:1.1px;color:#719063;font-weight:700;margin:25px 0 6px}.sponsor-card p{font-size:13px;color:#758672;margin:8px 0 24px}.sponsor-foot{font-size:11px;line-height:1.7;padding-top:17px;margin-top:auto;border-top:1px solid #e6ebdf;color:#8a9c7c}.community-thanks{display:flex;align-items:center;justify-content:space-between;gap:35px;margin:29px 0 37px}.community-thanks p{max-width:760px;color:#798b70;font-size:13px;margin:0}.community-thanks strong{color:#4b6d44}.community-thanks>a{white-space:nowrap}.build-credits{border-top:1px solid #d6e0cf;padding-top:25px}.credit-logos{display:flex;align-items:center;gap:29px;flex-wrap:wrap;margin:20px 0 12px}.credit-logos>span{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:#50684a}.credit-logos img{object-fit:contain;opacity:.75}.credit-logos small{font-size:10px;font-weight:400}.build-credits>p{font-size:11px;color:#87957d;max-width:800px}.photo-section{padding-bottom:65px}.photo-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:start;padding:16px 0 10px}.photo-strip figure{margin:0;padding:8px 8px 13px;background:white;border:1px solid #e1e6dc;box-shadow:0 6px 16px #253d2910;transform:rotate(-2deg)}.photo-strip figure:nth-child(2){transform:rotate(2deg);margin-top:13px}.photo-strip figure:nth-child(3){transform:rotate(-1deg);margin-top:3px}.photo-strip figure:nth-child(4){transform:rotate(2deg);margin-top:17px}.photo-strip figure:nth-child(5){transform:rotate(-2deg);margin-top:6px}.photo-strip img{display:block;width:100%;height:auto;aspect-ratio:1.45;object-fit:cover;border-radius:2px}.photo-strip figcaption{font-size:10px;text-align:center;color:#85917e;padding:13px 1px 0;line-height:1.5}.photo-section+.builder{border-top:1px solid var(--line)}
@media(max-width:1050px){.diagram-mobile-hint{display:inline}.sponsor-card{padding:22px}.sponsor-brand h3{font-size:21px}.nav-links{gap:20px}}@media(max-width:700px){.architecture-scroll{border-radius:13px;margin-top:24px}.repair-architecture{min-width:960px}.diagram-caption{flex-direction:column;gap:5px}.sponsors-section{padding:50px 0}.sponsor-grid{grid-template-columns:1fr}.community-thanks{display:block}.community-thanks>a{display:inline-block;margin-top:18px}.photo-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:480px;margin-inline:auto}.photo-strip figure:last-child{grid-column:1/-1;width:calc(50% - 10px);justify-self:center}.credit-logos{gap:18px 24px}.photo-section .section-heading h2{font-size:31px}.nav-links{display:none}}

.quickstart{padding-bottom:66px;scroll-margin-top:15px}.quickstart-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:27px}.quickstart-heading h2{font-size:30px;line-height:1.3;letter-spacing:-1px;margin:12px 0 0}.quickstart-heading>p{max-width:390px;font-size:13px;color:var(--muted);margin:0}.quickstart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.quickstart-card{background:white;border:1px solid var(--line);border-radius:13px;padding:24px;min-width:0}.quickstart-number{font-size:9px;font-weight:700;letter-spacing:1.3px;color:#809678}.quickstart-card h3{font-size:17px;margin:16px 0 10px;letter-spacing:-.4px}.quickstart-card p{font-size:12px;color:var(--muted);line-height:1.75}.quickstart code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.92em;overflow-wrap:anywhere}.command-heading{display:flex;align-items:center;justify-content:space-between;background:#eaf1e7;padding:10px 12px;border-radius:8px 8px 0 0;font-size:10px;color:#6d8265;margin-top:20px}.copy-command{background:white;border:1px solid #cfddc8;border-radius:5px;color:#3b6649;font:600 10px 'DM Sans',sans-serif;padding:5px 9px;cursor:pointer}.quickstart pre{background:#f4f7f1;color:#335e45;border:1px solid #e3ebdd;border-top:0;margin:0;padding:16px 12px;border-radius:0 0 8px 8px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;font-size:11px}.quickstart-card .quickstart-note{font-size:11px;margin-bottom:0}.quickstart-note a{color:var(--green);text-decoration:underline}.quickstart-ports{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;font-weight:600;margin-top:16px;color:var(--green)}.quickstart-details{margin-top:20px;padding:20px 24px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12px;color:var(--muted);line-height:1.8}.quickstart-details summary{font-size:13px;font-weight:600;color:var(--green);cursor:pointer}.quickstart-details li{margin:12px 0;padding-left:6px}.quickstart-details strong{color:var(--ink)}.quickstart-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;font-size:11px;line-height:1.8;color:#809078;padding:20px 0 0}.quickstart-footer a{color:var(--green)}.copy-status{display:block;font-size:11px;color:var(--green);min-height:18px;margin-top:8px}@media(max-width:950px){.quickstart-grid{grid-template-columns:1fr}.quickstart-heading{display:block}.quickstart-heading>p{max-width:620px;margin-top:15px}}@media(max-width:700px){.quickstart{padding-bottom:45px}.quickstart-heading h2{font-size:25px}.quickstart-card{padding:20px}.quickstart-details{padding:18px}.quickstart-details ol{padding-left:19px}}

/* The screenshot tour preserves the original PNGs in the full-size viewer. */
.screenshot-section{border-top:1px solid var(--line)}
.gallery-intro{display:flex;align-items:center;gap:24px;margin:-12px 0 30px}
.gallery-intro p{font-size:13px;color:var(--muted);margin:0;max-width:510px}
.gallery-intro button{font-family:inherit;border:0;cursor:pointer;flex-shrink:0}
.gallery-intro button[hidden]{display:none}
.screenshot-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px}
.slide-thumb{display:block;border:1px solid var(--line);border-radius:12px;background:white;overflow:hidden;transition:box-shadow .2s,transform .2s}
.slide-thumb:hover{transform:translateY(-3px);box-shadow:0 12px 28px #203e3515}
.slide-crop{display:block;aspect-ratio:1.75;overflow:hidden;background:#eef1ed}
.slide-crop img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transform-origin:50% 47%}
.slide-label{display:flex;align-items:baseline;gap:10px;padding:14px 12px;min-height:66px;font-size:12px;line-height:1.5}
.slide-number{color:var(--green);font-size:10px;font-weight:700;font-variant-numeric:tabular-nums}
body.slideshow-open{position:fixed;width:100%;overflow:hidden}
.slide-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;inset:0;margin:0;padding:18px 24px 12px;border:0;color:var(--ink);background:#f3f5f1;overflow:hidden}
.slide-dialog[open]{display:flex;flex-direction:column;gap:10px}
.slide-dialog::backdrop{background:#203e35e8}
.slide-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-shrink:0}
.slide-toolbar h2{font-size:18px;margin:6px 0 0;letter-spacing:-.3px}
.slide-toolbar .eyebrow{font-size:9px;letter-spacing:1.5px}
.slide-control{width:44px;height:44px;border:1px solid #cbd9cd;border-radius:50%;background:white;color:var(--green);font:22px system-ui;cursor:pointer;flex-shrink:0}
.slide-control:hover{background:var(--mint)}
.slide-control[aria-disabled="true"]{opacity:.35;cursor:default}
.slide-close{font-size:18px}
.slide-stage{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;min-width:0;touch-action:pan-y pinch-zoom;user-select:none}
.slide-stage img{display:block;width:100%;height:100%;object-fit:contain;filter:none}
.slide-footer{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;flex-shrink:0}
#slide-counter{min-width:68px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
#slide-original{font-size:12px;text-decoration:underline;text-underline-offset:4px}
#slide-help{text-align:center;font-size:11px;color:#637669;line-height:1.5;margin:0}
@media(min-width:1600px){.slide-dialog{padding-inline:4vw}}
@media(max-width:900px){.screenshot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.screenshot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}.gallery-intro{align-items:flex-start;flex-direction:column;gap:14px}.slide-label{font-size:11px;padding:10px;gap:7px;min-height:60px}.slide-dialog{padding:16px 8px max(12px,env(safe-area-inset-bottom));gap:8px}.slide-toolbar{padding:0 8px}.slide-toolbar h2{font-size:16px}.slide-toolbar .eyebrow{font-size:8px;letter-spacing:1px}.slide-footer{gap:12px}#slide-original{flex-basis:100%;text-align:center}}
@media(max-height:500px){.slide-dialog{padding:8px 16px;gap:4px}.slide-toolbar h2{font-size:14px;margin:0}.slide-toolbar .eyebrow,#slide-help{display:none}.slide-control{height:36px;width:36px}.slide-footer{gap:12px}#slide-original{flex-basis:auto}}
@media(prefers-reduced-motion:reduce){.slide-thumb{transition:none}}

/* A large selected screenshot and a thumbnail strip are the default tour. */
.inline-slideshow[hidden]{display:none}
.inline-slideshow{border:1px solid var(--line);border-radius:18px;background:#f0f3ee;padding:20px 24px 16px}
.inline-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}
.inline-heading h3{font-size:18px;margin:0}
.inline-heading button{font-family:inherit;cursor:pointer;flex-shrink:0}
.inline-stage{height:min(62vw,660px);display:flex;align-items:center;justify-content:center;touch-action:pan-y pinch-zoom;user-select:none;padding:12px;min-width:0}
.inline-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.inline-controls{display:flex;align-items:center;justify-content:center;gap:20px}
.inline-controls span{min-width:60px;text-align:center;font-variant-numeric:tabular-nums;font-size:13px}
.screenshot-grid.filmstrip,.slide-filmstrip{display:flex;list-style:none;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;padding:12px 4px 18px;margin:12px 0 0;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#9bac9b transparent}
.filmstrip li,.slide-filmstrip li{flex:0 0 152px;scroll-snap-align:center}
.filmstrip .slide-label{min-height:55px;font-size:11px;padding:9px}
.slide-thumb[aria-current="true"]{outline:2px solid var(--green);outline-offset:2px;background:#e6efe2}
.slide-dialog .slide-stage{padding:10px 24px;overflow:visible}
.slide-dialog .slide-stage img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;filter:none}
.slide-filmstrip{flex-shrink:0;margin:0 auto;width:min(100%,1200px);padding-block:7px 10px}
.slide-filmstrip li{flex-basis:100px}
.slide-filmstrip .slide-label{display:none}
.slide-filmstrip .slide-thumb{border-radius:6px}
@media(max-width:600px){.inline-slideshow{padding:14px 6px 12px}.inline-heading{padding:0 8px}.inline-heading h3{font-size:14px}.inline-heading button{padding:10px;font-size:10px}.inline-stage{height:62vw;padding:4px}.filmstrip li{flex-basis:124px}.slide-dialog .slide-stage{padding:8px 0}.slide-filmstrip li{flex-basis:78px}.slide-filmstrip{gap:9px}}
@media(max-height:500px){.slide-filmstrip li{flex-basis:64px}.slide-filmstrip{padding-block:3px 5px}.slide-dialog .slide-stage{padding:0 16px}}

/* Fade the source PNGs' abruptly cropped translucent shadow, then cast a soft alpha shadow. */
.inline-stage img,.slide-dialog .slide-stage img{filter:url(#screenshot-shadow);overflow:visible}