:root{--demo-primary:#23394b;--demo-accent:#7d3c55;--demo-tint:#f7f3f5;--demo-ink:#203338;--demo-line:#e6eaeb}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'DM Sans',sans-serif;color:var(--demo-ink);background:#f6f8f8}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.app{display:grid;grid-template-columns:246px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--demo-line);padding:32px 22px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#203338;margin:0 0 62px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#243c4b;color:white;font-size:24px}.brand strong{font:800 19px/1.1 Manrope,sans-serif;letter-spacing:-.04em}.brand small{display:block;font-size:9px;font-weight:800;letter-spacing:.16em;margin-top:5px}.sidebar-label{display:flex;justify-content:space-between;color:#89969b;font-size:10px;font-weight:800;letter-spacing:.14em;margin:0 12px 15px}.version{letter-spacing:0;color:#77878c}.sidebar nav{display:grid;gap:5px}.sidebar nav a{padding:12px 13px;border-radius:11px;font-size:13px;font-weight:700;text-decoration:none;color:#506168}.sidebar nav a:hover{background:#f5f7f7}.sidebar nav a.active{background:var(--demo-tint);color:var(--demo-primary)}.sidebar-note{margin-top:auto;background:#f6f8f8;border-radius:16px;padding:18px;font-size:12px;line-height:1.6}.sidebar-note p{margin:5px 0 0;color:#718187}.workspace{min-width:0}.toolbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,4vw,65px);background:white;border-bottom:1px solid var(--demo-line);gap:20px}.toolbar-left{display:flex;align-items:center;gap:11px;font-size:13px;color:#63737a}.toolbar-left strong{color:#203338}.toolbar-sep{color:#aab3b7}.status{display:flex;align-items:center;gap:9px;color:#718187;font-size:12px}.status-dot{width:8px;height:8px;border-radius:50%;background:#3c9a7b}.mobile-menu{display:none;border:0;background:none;font-size:24px}.intro{padding:clamp(50px,6vw,90px) clamp(24px,5vw,78px) 42px;background:#fff}.eyebrow,.overline{font-size:11px;letter-spacing:.12em;font-weight:800;color:var(--demo-accent);text-transform:uppercase}.eyebrow span{color:#b0b9bd;padding:0 5px}.intro h1{font:800 clamp(44px,5.6vw,80px)/1.05 Manrope,sans-serif;letter-spacing:-.06em;margin:22px 0}.intro h1 em{font-style:normal;color:var(--demo-accent)}.intro>p{max-width:700px;color:#5b6e75;font-size:17px;line-height:1.75}.theme-switcher{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}.theme-option{display:flex;align-items:center;gap:9px;border:1px solid #e2e8e9;background:#fff;padding:12px 16px;border-radius:100px;font-size:12px;font-weight:700;color:#41545c}.theme-option.selected{border-color:var(--demo-primary);box-shadow:0 0 0 1px var(--demo-primary);background:var(--demo-tint)}.theme-dot{width:11px;height:11px;border-radius:50%;flex:none}.planned{font-size:10px;color:#8b979b;font-weight:500}.content{max-width:1500px;padding:8px clamp(24px,5vw,78px) 100px;margin:auto}.component-section{scroll-margin-top:25px;padding-top:70px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:27px}.section-heading h2{font:800 clamp(26px,3vw,37px)/1.2 Manrope,sans-serif;letter-spacing:-.045em;margin:9px 0 0}.section-heading>p{font-size:13px;line-height:1.7;color:#6e7e83;max-width:300px;margin:0}.surface{background:#fff;border:1px solid #e7eded;border-radius:24px;overflow:hidden}.foundation-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}.type-demo,.palette{padding:clamp(24px,3vw,38px)}.display-type{font:800 clamp(32px,4vw,58px)/1.09 Manrope,sans-serif;letter-spacing:-.05em;margin:18px 0 25px}.type-rule,.divider-line{height:1px;background:#e9eded;margin:25px 0}.type-demo h3{margin:12px 0}.type-demo p{font-size:14px;color:#6b7c81;line-height:1.7}.palette-main{margin-top:18px;background:var(--demo-primary);height:150px;color:white;border-radius:15px;padding:20px;display:flex;justify-content:space-between;align-items:end}.palette-main span,.palette-small span{font-size:10px;letter-spacing:.1em;font-weight:800}.palette-main strong,.palette-small strong{font-size:12px}.palette-small{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.palette-small>div{height:92px;border-radius:14px;padding:15px;display:flex;justify-content:space-between;align-items:end;gap:4px;flex-wrap:wrap}.palette-small>div:first-child{background:var(--demo-accent);color:white}.palette-small>div:last-child{background:var(--demo-tint);color:var(--demo-primary)}.muted-small{font-size:12px;color:#748389;line-height:1.6;margin-bottom:0}.demo-stack{padding:clamp(24px,3vw,38px)}.button-line{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 6px}.r-btn{background:var(--demo-primary)!important;color:#fff!important;text-decoration:none!important}.r-btn--outline{background:transparent!important;color:var(--demo-primary)!important;border-color:var(--demo-primary)!important}.r-btn--quiet{background:var(--demo-tint)!important;color:var(--demo-primary)!important}.r-btn:disabled{opacity:.4}.cta-panel{background:var(--demo-primary);color:white;border-radius:21px;padding:clamp(24px,4vw,42px);display:flex;align-items:center;justify-content:space-between;gap:20px}.cta-kicker{font-size:10px;letter-spacing:.13em;font-weight:800;opacity:.7}.cta-panel h3{font:800 clamp(23px,3vw,36px)/1.2 Manrope;margin:13px 0 8px;letter-spacing:-.04em}.cta-panel p{margin:0;color:#e6ebed;font-size:14px}.cta-white{border:0;background:white;border-radius:100px;padding:15px 21px;font-size:13px;font-weight:800;color:var(--demo-primary);white-space:nowrap}.cta-white span{margin-left:12px}.cards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.demo-course,.demo-product,.feature-card{min-width:0;border-radius:23px;overflow:hidden}.demo-course .r-course-card__media{aspect-ratio:1.5}.demo-course .r-course-card__media img{width:100%;height:100%;object-fit:cover}.demo-course .r-course-card__body{padding:24px}.demo-course .r-course-card__title{margin:12px 0}.demo-course .r-course-card__action{color:var(--demo-accent)}.demo-product .product-visual{position:relative;background:linear-gradient(135deg,var(--demo-tint),#e4e9e9);display:grid;place-items:center;aspect-ratio:1.5}.kit-illustration{position:relative;width:150px;height:110px;filter:drop-shadow(0 15px 12px #152e3b26)}.kit-handle{position:absolute;top:0;left:54px;width:42px;height:25px;border:9px solid #253e4a;border-radius:9px}.kit-box{position:absolute;bottom:0;width:150px;height:94px;background:#fff;border:7px solid #e7eded;border-radius:15px;display:grid;place-items:center}.kit-box span{display:grid;place-items:center;background:#d94251;color:white;width:54px;height:54px;border-radius:9px;font-size:39px}.product-chip{position:absolute;top:16px;left:16px;font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--demo-primary);background:white;border-radius:50px;padding:7px 10px}.demo-product .r-product__body{padding:24px}.demo-product h3,.feature-card h3{font:800 21px/1.3 Manrope;margin:11px 0;letter-spacing:-.03em}.product-copy{font-size:13px;color:#718187;line-height:1.7}.product-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:28px;flex-wrap:wrap}.product-footer .r-price{font-size:14px;color:var(--demo-primary)}.feature-card{display:flex;flex-direction:column}.feature-card>img{width:100%;aspect-ratio:1.5;object-fit:cover}.feature-copy{padding:24px;display:flex;flex-direction:column;flex:1}.feature-copy p{font-size:13px;line-height:1.7;color:#718187}.feature-copy a{margin-top:auto;padding-top:15px;font-size:13px;font-weight:800;color:var(--demo-accent);text-decoration:none}.form-demo{padding:clamp(24px,4vw,45px);display:grid;grid-template-columns:.65fr 1.35fr;gap:40px}.form-demo h3{font:800 28px Manrope;margin:16px 0 8px}.form-demo>div>p{font-size:14px;line-height:1.7;color:#718187}.r-form-grid{gap:17px}.r-label span{color:#b53b47}.r-input,.r-select,.r-textarea{background:#fafcfc}.r-field .r-error{color:#a83a43}.form-demo form>.r-btn{margin-top:20px}.form-result{font-size:13px;font-weight:700;margin:14px 0 0;color:var(--demo-accent)}.interaction-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.interaction-panel{padding:30px}.interaction-panel .overline{margin-bottom:17px}.interaction-panel .r-accordion{font-size:14px}.interaction-panel .r-accordion__body{color:#6b7c81;line-height:1.7}.demo-tabs{display:flex;gap:6px;border-bottom:1px solid #e5eaeb;padding-bottom:10px}.demo-tabs button{border:0;background:none;padding:10px 15px;border-radius:50px;font-size:13px;font-weight:700;color:#52646b}.demo-tabs button[aria-selected=true]{background:var(--demo-primary);color:white}#tab-panel{min-height:124px;padding:18px 0}#tab-panel h3{font:800 17px Manrope;margin:0 0 8px}#tab-panel p{font-size:13px;color:#718187;line-height:1.7}.quantity-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.layout-photo{background:white;border-radius:24px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;border:1px solid #e7eded}.layout-photo>img{width:100%;height:100%;object-fit:cover;min-height:290px}.layout-photo>div{padding:clamp(25px,4vw,55px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.layout-photo h3,.edge-example h3{font:800 clamp(24px,3vw,39px)/1.15 Manrope;letter-spacing:-.04em;margin:17px 0}.layout-photo p,.edge-example p{font-size:14px;line-height:1.7;color:#6c7d83}.layout-photo .r-btn{margin-top:14px}.edge-example{background:var(--demo-primary);color:white;border-radius:24px;margin-top:22px;padding:clamp(30px,5vw,65px)}.edge-example .overline{color:#d4e1e3}.edge-example p{color:#e5ebed;max-width:520px}.edge-example.results-edge-flush{border-radius:0}.guidance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.guidance-card{padding:28px}.guidance-num{font:800 30px Manrope;color:var(--demo-accent)}.guidance-card h3{font:800 17px Manrope;margin:14px 0}.guidance-card p{font-size:13px;color:#6e7f84;line-height:1.7}.doc-note{font-size:12px;color:#6e7f84;line-height:1.7;margin-top:25px}.explorer-footer{padding:30px clamp(24px,5vw,78px);border-top:1px solid #e6ebec;display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#7d8a90;font-weight:700;letter-spacing:.06em}.close-modal{position:absolute;right:18px;top:15px;background:none;border:0;font-size:30px;color:#68777d}.r-modal__body{position:relative;padding:35px}.r-modal__body h2{font:800 30px Manrope;margin:18px 0}.r-modal__body p{font-size:14px;line-height:1.7;color:#63757c}.r-modal__body .r-btn{margin-top:15px}.r-toast{background:var(--demo-primary)}
body[data-theme=services]{--demo-primary:#176f70;--demo-accent:#103335;--demo-tint:#f0faf6}body[data-theme=public]{--demo-primary:#315e75;--demo-accent:#407d9b;--demo-tint:#f4f9fb}body[data-theme=parent]{--demo-primary:#334b5a;--demo-accent:#a36c57;--demo-tint:#f6f2ed}
@media(max-width:1180px){.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-card{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.feature-card>img{height:100%;aspect-ratio:auto}.form-demo{grid-template-columns:1fr}.foundation-grid{grid-template-columns:1fr 1fr}}
@media(max-width:930px){.app{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;transform:translateX(-110%);transition:transform .2s;box-shadow:12px 0 30px #0001}.sidebar.open{transform:translateX(0)}.mobile-menu{display:block}.intro{padding-top:55px}}
@media(max-width:650px){.toolbar{height:65px}.status,.toolbar-sep{display:none}.intro{padding:45px 20px 32px}.intro>p{font-size:15px}.theme-option{padding:10px 12px}.content{padding:0 16px 70px}.component-section{padding-top:55px}.section-heading{display:block}.section-heading>p{margin-top:12px}.foundation-grid,.cards-grid,.interaction-grid,.layout-photo,.guidance-grid{grid-template-columns:1fr}.feature-card{grid-column:auto;display:flex}.feature-card>img{height:auto;aspect-ratio:1.5}.cta-panel{align-items:flex-start;flex-direction:column}.form-demo{padding:22px}.interaction-panel{padding:22px}.layout-photo>img{min-height:200px;max-height:260px}.explorer-footer{flex-direction:column}.palette-small>div{min-width:0}.palette-small strong{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sidebar{transition:none}}