:root { color-scheme: light; font-family: "Albert Sans", system-ui, sans-serif; color: #152218; background: #e8efe9; font-synthesis: none; }
* { box-sizing: border-box; }
html { min-width: 320px; background: #e8efe9; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
a { color: inherit; }
.demo-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(460px, 1fr); min-height: 100vh; }
.preview-pane, .code-pane { min-width: 0; padding: clamp(26px, 3.25vw, 58px); }
.preview-pane { display: flex; flex-direction: column; background: radial-gradient(circle at 15% 10%, rgba(151, 231, 168, .34), transparent 30%), #dce9df; border-right: 1px solid rgba(21, 34, 24, .12); }
.code-pane { display: flex; flex-direction: column; background: #102218; color: #f3f8f3; }
.pane-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.eyebrow { margin: 0 0 7px; color: #367146; font: 600 11px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.pane-heading h1, .pane-heading h2 { margin: 0; font-size: clamp(26px, 2.2vw, 38px); line-height: 1.02; letter-spacing: -.045em; }
.status { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; border: 1px solid rgba(21, 34, 24, .12); border-radius: 999px; background: rgba(255,255,255,.58); padding: 8px 12px; color: #34503b; font-size: 12px; font-weight: 700; }
.status span { width: 7px; height: 7px; border-radius: 50%; background: #38a957; box-shadow: 0 0 0 4px rgba(56,169,87,.12); }
.browser-frame { display: flex; flex: 1; flex-direction: column; overflow: hidden; border: 1px solid rgba(21,34,24,.14); border-radius: 20px; background: #fff; box-shadow: 0 28px 70px rgba(28,58,37,.15); }
.browser-bar { display: grid; grid-template-columns: 90px 1fr 90px; align-items: center; min-height: 45px; padding: 0 14px; background: #f2f3ef; border-bottom: 1px solid #dfe4dd; }
.browser-dots { display: flex; gap: 6px; }
.browser-dots span { width: 9px; height: 9px; border-radius: 50%; background: #c6ccc4; }
.browser-dots span:first-child { background: #ef8e7f; } .browser-dots span:nth-child(2) { background: #e5c46b; } .browser-dots span:nth-child(3) { background: #78bf80; }
.browser-address { justify-self: center; width: min(320px,100%); border: 1px solid #dfe3dd; border-radius: 7px; background: white; padding: 6px 12px; color: #758078; font: 500 10px/1 "IBM Plex Mono", monospace; text-align: center; }
.mock-site { display: flex; flex: 1; flex-direction: column; min-height: 580px; background: #faf9f5; }
.mock-header { display: flex; align-items: center; gap: 24px; padding: 18px clamp(22px,3vw,42px); border-bottom: 1px solid #e7e6df; }
.mock-logo { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; font-weight: 800; text-decoration: none; }
.mock-logo-mark { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: #183f29; color: #d7f4dc; font-size: 12px; }
.mock-header nav { display: flex; gap: 22px; } .mock-header nav a { color: #5d655f; font-size: 12px; font-weight: 600; text-decoration: none; }
.mock-button { display: inline-flex; align-items: center; justify-content: center; width: fit-content; border-radius: 9px; background: #173e28; padding: 11px 17px; color: white; font-size: 12px; font-weight: 700; text-decoration: none; }
.mock-button-small { padding: 9px 13px; }
.mock-content { display: grid; grid-template-columns: minmax(0,.92fr) minmax(270px,1.08fr); gap: clamp(24px,3vw,52px); align-items: center; flex: 1; padding: clamp(38px,5vw,78px) clamp(25px,4vw,60px); }
.mock-kicker { margin: 0 0 14px; color: #438157; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mock-hero h2 { max-width: 430px; margin: 0; font-size: clamp(35px,4.1vw,66px); line-height: .94; letter-spacing: -.06em; }
.mock-hero > p:not(.mock-kicker) { max-width: 440px; margin: 23px 0 0; color: #606a62; font-size: clamp(13px,1.05vw,16px); line-height: 1.65; }
.mock-actions { display: flex; align-items: center; gap: 20px; margin-top: 26px; }
.mock-link { color: #2e5d3d; font-size: 12px; font-weight: 800; text-decoration: none; }
.mock-visual { overflow: hidden; border: 1px solid #dce4dc; border-radius: 15px; background: white; box-shadow: 0 25px 50px rgba(34,66,43,.13); transform: rotate(1.4deg); }
.visual-toolbar { display: flex; gap: 5px; height: 32px; align-items: center; padding: 0 12px; background: #eff5ef; }
.visual-toolbar span { width: 6px; height: 6px; border-radius: 50%; background: #b7c8ba; }
.visual-layout { display: grid; grid-template-columns: 54px 1fr; min-height: 270px; }
.visual-sidebar { display: grid; align-content: start; gap: 12px; padding: 18px 13px; background: #193d28; }
.visual-sidebar i { display: block; height: 7px; border-radius: 4px; background: #50735b; }
.visual-main { padding: 22px; } .visual-title { width: 42%; height: 13px; border-radius: 5px; background: #cfdad0; }
.visual-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 20px; }
.visual-cards span { height: 84px; border-radius: 9px; background: #e5f1e7; } .visual-cards span:nth-child(2) { background: #f3ead5; } .visual-cards span:nth-child(3) { background: #e3e9f2; }
.visual-lines { display: grid; gap: 9px; margin-top: 24px; } .visual-lines i { display: block; width: 100%; height: 7px; border-radius: 4px; background: #e4e9e4; } .visual-lines i:nth-child(2) { width: 82%; } .visual-lines i:nth-child(3) { width: 61%; }
.mock-proof { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px clamp(25px,4vw,60px); border-top: 1px solid #e7e6df; color: #838a84; font-size: 10px; }
.mock-proof p { margin: 0; } .mock-proof div { display: flex; gap: clamp(14px,2vw,28px); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.eyebrow-code { color: #89dd9b; } .pane-heading-code a { color: #a9c6ae; font: 500 11px/1 "IBM Plex Mono", monospace; text-decoration: none; }
.code-intro { max-width: 650px; margin: 0 0 25px; color: #a8b9ac; font-size: 14px; line-height: 1.65; }
.code-window { overflow: hidden; border: 1px solid #34503d; border-radius: 16px; background: #09150f; box-shadow: 0 26px 60px rgba(0,0,0,.2); }
.code-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 43px; padding: 0 15px; border-bottom: 1px solid #2a3d30; background: #14271c; }
.code-toolbar > div { display: flex; gap: 6px; } .code-toolbar > div span { width: 8px; height: 8px; border-radius: 50%; background: #53685a; }
.code-toolbar p { margin: 0; color: #afbeb2; font: 500 10px/1 "IBM Plex Mono", monospace; } .code-toolbar .language { justify-self: end; color: #6f8d76; font: 600 9px/1 "IBM Plex Mono", monospace; }
pre { overflow-x: auto; margin: 0; padding: clamp(20px,2.4vw,34px); color: #c7d6ca; font: 500 clamp(10px,.84vw,13px)/1.85 "IBM Plex Mono", monospace; tab-size: 2; }
.code-comment { color: #647b69; } .code-tag { color: #79d493; } .code-attr, .code-key { color: #c4adf1; } .code-string { color: #e6c785; } .code-object { color: #83c9e4; } .code-fn { color: #a8dcba; } .code-bool { color: #ef9e87; }
.implementation-notes { display: grid; grid-template-columns: 32px 1fr; gap: 16px 12px; margin-top: 28px; }
.note-number { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #3d5d47; border-radius: 50%; color: #80be8e; font: 600 9px/1 "IBM Plex Mono", monospace; }
.implementation-notes > div:nth-child(even) { display: grid; gap: 3px; } .implementation-notes strong { font-size: 13px; } .implementation-notes span { color: #8fa395; font-size: 12px; line-height: 1.45; }
.debug-hint { margin: auto 0 0; padding-top: 28px; color: #8fa395; font-size: 12px; line-height: 1.55; }
.debug-hint span { margin-right: 7px; border-radius: 5px; background: #244832; padding: 4px 7px; color: #a4e0b1; font: 600 9px/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
@media (max-width: 1080px) { .demo-shell { grid-template-columns: 1fr; } .preview-pane { min-height: 100vh; border-right: 0; } .mock-site { min-height: 560px; } .code-pane { min-height: 100vh; } }
@media (max-width: 700px) { .preview-pane, .code-pane { padding: 22px 16px; } .pane-heading { align-items: flex-start; } .status { display: none; } .browser-bar { grid-template-columns: 62px 1fr 20px; } .mock-header nav { display: none; } .mock-content { grid-template-columns: 1fr; padding-block: 34px; } .mock-hero h2 { font-size: 48px; } .mock-visual { display: none; } .mock-proof { align-items: flex-start; flex-direction: column; } .mock-proof div { flex-wrap: wrap; } pre { font-size: 10px; } }