:root{color-scheme:dark;--bg:#0e100f;--panel:#151817;--panel-2:#191d1a;--border:#2e342d;--muted:#90988d;--text:#f3f5f0;--accent:#c5f467;--accent-soft:#91b956;font-family:Inter,Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}.landing-shell{width:min(1320px,calc(100% - 40px));margin:0 auto}.landing-nav{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0b}.landing-nav-brand{display:flex;align-items:center;gap:12px}.landing-nav-brand img{width:34px;height:34px;object-fit:contain}.landing-nav-brand span{font-size:10px;letter-spacing:.2em;font-weight:700;color:#abb2a7}.landing-nav-actions{display:flex;align-items:center;gap:28px}.landing-nav-link{font-size:13px;color:#8e968b;transition:color .15s}.landing-nav-link:hover{color:var(--text)}.hero{padding:96px 0 0;text-align:center}.hero-copy{max-width:980px;margin:0 auto}h1{font-size:clamp(44px,5.4vw,76px);line-height:.99;letter-spacing:-.055em;font-weight:550;margin:0 auto 26px;max-width:980px}.hero-copy>p{max-width:680px;margin-inline:auto!important;color:#aab1a7;font-size:17px;line-height:1.72;margin:0}.download-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:38px auto 0;max-width:700px;text-align:left}.download-button{min-width:205px;display:flex;align-items:center;gap:12px;border-radius:9px;padding:13px 17px;border:1px solid #3b4338;background:#1a1e1b;transition:.15s}.download-button:hover{transform:translateY(-1px);border-color:#657b4c;background:#20261e}.download-button.primary{background:var(--accent);border-color:var(--accent);color:#17200f}.download-button.primary:hover{background:#d0ff6d}.download-button .material-symbols-rounded{font-size:28px}.download-button-copy{display:grid;gap:2px}.download-button-copy small{font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.65}.download-button-copy strong{font-size:14px}.release-note{display:flex;align-items:center;justify-content:center;gap:8px;color:#71796f;font-size:10px;letter-spacing:.06em;margin-top:14px}.release-note .dot{width:5px;height:5px;border-radius:50%;background:#7d9360}.section{padding:96px 0;border-top:1px solid #ffffff0b}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:28px}.section-head h2{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.04em;font-weight:560;margin:0}.section-head p{max-width:500px;color:#858d82;font-size:13px;line-height:1.65;margin:0}.workflow{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:13px;overflow:hidden;background:#141715}.workflow-step{padding:24px;min-height:150px}.workflow-step+.workflow-step{border-left:1px solid var(--border)}.workflow-step h3{font-size:15px;margin:16px 0 8px}.workflow-step p{font-size:12px;color:#858d82;line-height:1.7;margin:0}.landing-footer{border-top:1px solid #ffffff0b;padding:23px 0 32px;display:flex;justify-content:space-between;gap:20px;color:#697168;font-size:10px;letter-spacing:.06em}.landing-footer strong{color:#939b91}.landing-footer a:hover{color:var(--accent)}@media(max-width:900px){.hero{padding-top:64px}.section-head{align-items:flex-start;flex-direction:column}.workflow{grid-template-columns:1fr}.workflow-step+.workflow-step{border-left:0;border-top:1px solid var(--border)}}@media(max-width:600px){.landing-shell{width:min(100% - 28px,1320px)}.landing-nav{height:64px}.landing-nav-brand span{display:none}.hero{padding:42px 0 50px}h1{font-size:43px}.hero-copy>p{font-size:14px}.download-actions{display:grid;grid-template-columns:1fr}.download-button{width:100%}.workflow-step{min-height:0}.landing-footer{flex-direction:column}.release-note{line-height:1.5}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
/* Live demo: the desktop frontend in an iframe (demo-app/), scaled from its 1440 × 840 window (see demo.js). */
.demo-section{scroll-margin-top:16px}.demo-window [hidden]{display:none!important}
.demo-window{position:relative;border:1px solid #30382d;border-radius:14px;background:#111412;overflow:hidden;box-shadow:0 32px 90px #0008;width:100%}.demo-window iframe{position:absolute;top:0;left:0;width:1440px;height:840px;border:0;transform:scale(var(--demo-scale,1));transform-origin:0 0}
/* Hero window: live mini player driven by demo.js (same state as the full demo). */

#demo-hero.playing #demo-hero.ready 

/* Access, installation help and closing call to action. */
.release-note a{color:var(--accent);border-bottom:1px solid #c5f46755}.release-note a:hover{border-color:var(--accent)}
.start-section{scroll-margin-top:16px}#install-help{scroll-margin-top:90px}.workflow-step em{font-style:normal;color:#d3dacd}.install-steps{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px}.install-steps li{font-size:12px;line-height:1.6;color:#858d82;padding-left:12px;border-left:2px solid #3d4a33}.install-steps strong{color:#dfe4db}
.footer-links{display:flex;gap:16px}.footer-links a:hover{color:var(--accent)}
.demo-expand{display:none}
/* Phones: the editor is desktop-sized, so keep it behind a toggle; the hero player stays live. */
@media(max-width:600px){.demo-expand{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;height:46px;border:1px solid #45503e;border-radius:9px;background:#1a1e1b;color:var(--accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer}.demo-expand .material-symbols-rounded{font-size:18px}.demo-section:not(.open) .demo-window{display:none}.demo-section.open .demo-expand{margin-bottom:12px}.footer-links{order:3}}
/* Hero: animated Sample 0 snap on the bundled demo track (see demo.js). */



/* Personal note from Dezzy: plain text, no card. */
.story p{max-width:760px;margin:0 0 18px;font-size:20px;line-height:1.6;color:#d3d9cf;letter-spacing:-.01em}.story p.story-sign{margin:26px 0 0;font-size:15px;color:var(--accent);font-weight:600}
@media(max-width:600px){.story p{font-size:17px}}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.story-video{display:block;width:100%;border:1px solid #2e342d;border-radius:12px;background:#111412;aspect-ratio:16/10}
@media(max-width:900px){.story{grid-template-columns:1fr;gap:32px}}
.points h2{max-width:900px;margin:0 0 64px;font-size:clamp(30px,3.6vw,48px);line-height:1.12;letter-spacing:-.04em;font-weight:560}
.points-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.point h3{margin:0 0 12px;font-size:clamp(34px,3.6vw,52px);letter-spacing:-.045em;font-weight:600;color:var(--accent)}
.point p{margin:0;max-width:340px;font-size:19px;line-height:1.55;color:#aab1a7}
@media(max-width:900px){.points-grid{grid-template-columns:1fr;gap:36px}.points h2{margin-bottom:44px}}
@media(max-width:600px){.section{padding:64px 0}}
/* Sections fade in on scroll (class set by demo.js, so the page stays visible without JS). */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.words .w{display:inline-block;opacity:0;transform:translateY(.35em);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.words.in .w{opacity:1;transform:none}
.reveal .point{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in .point{opacity:1;transform:none}
.reveal.in .point:nth-child(1){transition-delay:.25s}.reveal.in .point:nth-child(2){transition-delay:.45s}.reveal.in .point:nth-child(3){transition-delay:.65s}
.hero-demo{margin:72px 0 0}
.hero-demo .demo-window{animation:shot-in 1.2s .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes shot-in{from{opacity:0;transform:translateY(48px) scale(.96)}}
.hero-demo-note{margin:16px auto 0;max-width:680px;font-size:13px;line-height:1.6;color:#858d82}
@media(max-width:600px){.hero{padding-top:44px}.hero-demo{margin-top:44px}}
@media(prefers-reduced-motion:reduce){.hero-demo .demo-window{animation:none}}

/* Compact DE / EN switch in the landing navigation. */
.language-switch{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid #30372e;border-radius:999px;background:#141715}
.language-switch button{min-width:34px;height:28px;padding:0 9px;border:0;border-radius:999px;background:transparent;color:#7f887d;font:inherit;font-size:10px;font-weight:700;letter-spacing:.08em;cursor:pointer;transition:background .15s,color .15s}
.language-switch button:hover{color:#dfe4db}.language-switch button.active{background:#2b3524;color:var(--accent)}.language-switch button:focus-visible{outline:2px solid #c5f46788;outline-offset:2px}
@media(max-width:600px){.landing-nav-actions{gap:14px}.language-switch button{min-width:30px;padding:0 7px}}
.workflow-link{margin:12px 0 0!important}.workflow-link a{color:var(--accent);font-weight:600}