.site-header{border-bottom:1px solid var(--r-border);background:var(--r-bg)}.brand{font-size:calc(1.4rem * var(--r-font-scale));font-weight:800;letter-spacing:-.06em;text-decoration:none}.brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;background:var(--r-accent);color:var(--r-on-accent);border-radius:8px;margin-right:calc(.4rem * var(--r-density));font-family:Consolas,monospace;letter-spacing:-.15em}.site-nav a{text-decoration:none;font-size:calc(.875rem * var(--r-font-scale));color:var(--r-muted)}.site-nav a:hover{color:var(--r-text)}.eyebrow{font-family:Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;font-size:calc(.75rem * var(--r-font-scale));color:var(--r-muted)}.hero{padding-block:calc(6rem * var(--r-density)) calc(4rem * var(--r-density));display:grid;grid-template-columns:1.1fr 1fr;gap:calc(4rem * var(--r-density));align-items:center}.hero h1{font-size:clamp(calc(3.2rem * var(--r-font-scale)),6.6vw,calc(6rem * var(--r-font-scale)));letter-spacing:-.075em;line-height:1.02;font-weight:750;margin-block:calc(1.6rem * var(--r-density))}.hero h1 span{color:var(--r-muted)}.hero-description{max-width:460px;font-size:calc(1.1rem * var(--r-font-scale));color:var(--r-muted)}.workbench{background:var(--r-subtle);border:1px solid var(--r-border);border-radius:18px;padding:calc(1.5rem * var(--r-density));transform:rotate(-2deg)}.workbench>div{transform:rotate(2deg)}.window-head{padding-bottom:calc(1rem * var(--r-density));font-family:Consolas,monospace;font-size:calc(.75rem * var(--r-font-scale));color:var(--r-muted)}.specimen{background:var(--r-bg);padding:calc(1.5rem * var(--r-density));border-radius:12px}.specimen h3{font-size:calc(1.7rem * var(--r-font-scale));letter-spacing:-.04em}.avatar{width:42px;height:42px;display:grid;place-items:center;background:var(--r-accent);color:var(--r-on-accent);border-radius:50%;font-weight:700}.code-block{background:#10150d;color:#c8ddaf;padding:calc(1.3rem * var(--r-density));border-radius:10px;font-size:calc(.8rem * var(--r-font-scale));line-height:1.8}.metric-strip{border-block:1px solid var(--r-border);display:grid;grid-template-columns:repeat(3,1fr);padding-block:calc(1.5rem * var(--r-density))}.metric-strip strong{display:block;font-size:calc(1.4rem * var(--r-font-scale));font-weight:650;letter-spacing:-.04em}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:calc(2rem * var(--r-density));margin-bottom:calc(2rem * var(--r-density))}.section-heading h2{font-size:clamp(calc(2rem * var(--r-font-scale)),4vw,calc(3rem * var(--r-font-scale)));letter-spacing:-.055em;line-height:1.1;margin-top:calc(.5rem * var(--r-density))}.section-heading p{max-width:380px;color:var(--r-muted)}.sample-area{min-height:160px;display:flex;align-items:center;flex-wrap:wrap;gap:calc(.75rem * var(--r-density));padding-block:calc(1.5rem * var(--r-density))}.component-title{display:flex;justify-content:space-between;gap:calc(1rem * var(--r-density));align-items:center}.component-title span{font:calc(.7rem * var(--r-font-scale)) Consolas,monospace;color:var(--r-muted)}.section-line{border-top:1px solid var(--r-border)}.swatch{height:64px;border-radius:8px;padding:calc(.4rem * var(--r-density)) calc(.6rem * var(--r-density));font:calc(.7rem * var(--r-font-scale)) Consolas,monospace}.roadmap{counter-reset:phase}.roadmap article{border-top:1px solid var(--r-border);padding-block:calc(1.5rem * var(--r-density))}.roadmap article:before{counter-increment:phase;content:'0' counter(phase);font-family:Consolas,monospace;color:var(--r-muted);display:block;margin-bottom:calc(1rem * var(--r-density))}.skip-link{position:absolute;left:calc(1rem * var(--r-density));top:calc(-6rem * var(--r-density));padding:calc(.6rem * var(--r-density));background:var(--r-accent);color:var(--r-on-accent);z-index:10}.skip-link:focus{top:calc(1rem * var(--r-density))}.footer{border-top:1px solid var(--r-border);padding-block:calc(2rem * var(--r-density))}.install-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:calc(3rem * var(--r-density))}.stage-tag{border:1px solid var(--r-border);padding:calc(.3rem * var(--r-density)) calc(.6rem * var(--r-density));border-radius:5px;font:calc(.7rem * var(--r-font-scale)) Consolas,monospace}.demo-form{width:100%}.demo-form output{display:block;margin-top:calc(.75rem * var(--r-density));font-size:calc(.875rem * var(--r-font-scale));color:var(--r-muted)}@media(max-width:850px){.hero{grid-template-columns:1fr;padding-block:calc(3rem * var(--r-density));gap:calc(3rem * var(--r-density))}.workbench{transform:none}.workbench>div{transform:none}.install-grid{grid-template-columns:1fr;gap:calc(1rem * var(--r-density))}.section-heading{align-items:start;flex-direction:column;gap:calc(1rem * var(--r-density))}.site-nav{gap:calc(.75rem * var(--r-density))}.site-nav a{display:none}}@media(max-width:450px){.r-container{width:calc(100% - calc(2rem * var(--r-density)))}.metric-strip{gap:calc(.5rem * var(--r-density))}.metric-strip strong{font-size:calc(1.05rem * var(--r-font-scale))}.metric-strip p{font-size:calc(.75rem * var(--r-font-scale))}.hero h1{font-size:calc(3.2rem * var(--r-font-scale))}.workbench{padding:calc(.75rem * var(--r-density))}}
/* Expressive editorial presentation */
body{background-image:radial-gradient(var(--r-border) .65px,transparent .65px);background-size:26px 26px}
.site-header{background:var(--r-surface);border-bottom:1px solid var(--r-border)}
.hero{position:relative;isolation:isolate}
.hero h1{font-weight:800;letter-spacing:-.07em}
.hero h1 span{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:500;letter-spacing:-.06em;color:var(--r-text);text-decoration:underline;text-decoration-color:var(--r-accent);text-decoration-thickness:.08em;text-underline-offset:.12em}
.hero .r-badge{background:var(--r-accent);color:var(--r-on-accent);border-color:var(--r-accent);transform:rotate(-3deg);letter-spacing:.08em}
.hero:before{content:'✳';position:absolute;right:38%;top:calc(2.8rem * var(--r-density));font:calc(6rem * var(--r-font-scale)) Georgia;color:var(--r-focus,var(--r-accent));z-index:-1;line-height:1;animation:demo-emblem 24s linear infinite}
.workbench{border-radius:36px 36px 8px 36px;border:1px solid var(--r-border);box-shadow:10px 12px 0 var(--r-accent);position:relative}
.workbench:after{content:'BUILT TO BE YOURS';position:absolute;right:calc(-.6rem * var(--r-density));bottom:calc(1.5rem * var(--r-density));transform:rotate(-8deg);background:var(--r-text);color:var(--r-bg);border-radius:99px;padding:calc(.6rem * var(--r-density)) calc(1rem * var(--r-density));font:calc(.65rem * var(--r-font-scale)) Consolas,monospace;letter-spacing:.08em}
.specimen{border-radius:22px 22px 6px 22px}.specimen h3{font-family:Georgia,serif;font-style:italic;font-weight:500;font-size:calc(2.2rem * var(--r-font-scale));line-height:1.1}
.hero .r-button{border-radius:99px}.hero .r-button-primary{box-shadow:0 4px 0 color-mix(in srgb,var(--r-text) 30%,transparent)}
.metric-strip{background:var(--r-surface);padding:calc(1.8rem * var(--r-density));border-radius:20px;border:1px solid var(--r-border);gap:calc(1rem * var(--r-density))}
.metric-strip strong{font-family:Georgia,serif;font-style:italic;font-size:calc(1.55rem * var(--r-font-scale));font-weight:500}
.section-heading h2{font-family:Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(calc(2.5rem * var(--r-font-scale)),4.5vw,calc(4rem * var(--r-font-scale)))}
#komponenten>.grid>.r-card{border-radius:22px 22px 5px 22px;box-shadow:0 5px 0 color-mix(in srgb,var(--r-border) 35%,transparent)}
#komponenten>.grid>.r-card:nth-child(2n){border-radius:5px 22px 22px 22px}
.component-title>span{display:grid;place-items:center;border:1px solid var(--r-border);border-radius:50%;width:calc(2rem * var(--r-density));height:calc(2rem * var(--r-density))}
.footer{background:var(--r-surface)}
@keyframes demo-emblem{to{transform:rotate(360deg)}}
@media(max-width:850px){.hero:before{right:0;top:calc(1.6rem * var(--r-density));font-size:calc(4rem * var(--r-font-scale))}.workbench{margin-inline-end:10px}.workbench:after{right:0;bottom:calc(1rem * var(--r-density))}.metric-strip{padding:calc(1rem * var(--r-density))}.metric-strip strong{font-size:calc(1.15rem * var(--r-font-scale))}}
@media(prefers-reduced-motion:reduce){.hero:before{animation:none}}