:root { color-scheme:light dark; --bg:#f8fafb; --paper:#fff; --ink:#172b36; --muted:#526774; --line:#d8e2e7; --accent:#087f92; --accent-soft:#e8f4f6; --button:#0c7383; --sidebar:#f3f6f8; }
@media(prefers-color-scheme:dark) { :root { --bg:#0c1216; --paper:#141e24; --ink:#e9f3f6; --muted:#a0b1bb; --line:#2a3a43; --accent:#5dd5e1; --accent-soft:#1a333c; --button:#086679; --sidebar:#101a20; } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.wrap { width:min(1160px,calc(100% - 64px)); margin-inline:auto; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:10; padding:8px 16px; background:var(--paper); border:1px solid var(--accent); }
.skip-link:focus { top:12px; }
.brand { display:inline-flex; align-items:center; gap:8px; font-size:18px; font-weight:750; letter-spacing:-.5px; white-space:nowrap; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:92px; border-bottom:1px solid var(--line); }
.site-header nav { display:flex; align-items:center; gap:28px; font-size:14px; }
.site-header nav > a:not(.button),.site-footer nav a { color:var(--muted); }
.site-header nav > a:hover,.site-footer nav a:hover { color:var(--accent); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:44px; padding:11px 19px; border:1px solid var(--button); border-radius:6px; background:var(--button); color:#fff; font-size:14px; font-weight:650; line-height:1.35; white-space:nowrap; transition:background-color .15s ease; }
.button:hover { background:color-mix(in srgb,var(--button) 88%,#000); }
.button.secondary { min-height:40px; padding:9px 15px; background:transparent; color:var(--ink); border-color:var(--line); }
.button.secondary:hover { background:var(--accent-soft); }
.text-link { color:var(--accent); font-size:14px; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.text-link:hover { text-decoration-thickness:2px; }
.hero { display:grid; grid-template-columns:.88fr 1.12fr; align-items:center; gap:54px; padding-block:74px 76px; }
.hero-copy { padding-bottom:25px; }
h1 { margin:0 0 26px; font-size:clamp(46px,5.3vw,68px); font-weight:720; line-height:1.07; letter-spacing:-.055em; }
h1 em { color:var(--accent); font-style:normal; }
.lead { max-width:420px; margin:0; color:var(--muted); font-size:18px; line-height:1.7; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:30px; }
.preview { min-width:0; margin:0; }
.app-preview { overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 20px #0c28320a; }
.preview-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; border-bottom:1px solid var(--line); font-size:12px; font-weight:650; }
.preview-topbar > span:first-child { display:flex; align-items:center; gap:7px; }
.preview-state { color:var(--muted); font-size:11px; font-weight:400; }
.preview-body { display:grid; grid-template-columns:151px minmax(0,1fr); }
.preview-tree { padding:20px 9px; background:var(--sidebar); border-right:1px solid var(--line); color:var(--muted); font-size:11px; }
.preview-tree > span { display:block; padding:5px 8px; white-space:nowrap; }
.preview-tree .tree-caption { padding-bottom:13px; color:var(--muted); font-size:10px; letter-spacing:.02em; }
.preview-tree .tree-folder { margin-top:5px; color:var(--ink); font-weight:550; }
.tree-folder > span { display:inline-block; width:11px; color:var(--muted); }
.preview-tree .tree-indent { padding-left:17px; }
.preview-tree .tree-note { padding-left:30px; }
.preview-tree .active { border-radius:4px; color:var(--accent); background:var(--accent-soft); font-weight:600; }
.preview-note { min-width:0; padding:22px 25px 29px; font-size:12px; line-height:1.65; }
.preview-path { margin-bottom:23px; overflow-wrap:anywhere; color:var(--muted); font:9px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.preview-note h2 { margin:0; font-size:25px; letter-spacing:-.04em; font-weight:650; line-height:1.3; }
.preview-note p { margin:12px 0; }
.preview-note .note-date { margin:5px 0 20px; color:var(--muted); font-size:10px; }
.preview-note h3 { margin:22px 0 0; font-size:13px; font-weight:650; }
.preview-note code { display:inline-block; padding:1px 4px; background:var(--sidebar); border:1px solid var(--line); border-radius:3px; font-size:10px; }
.preview-note ul { margin:14px 0 0; padding-left:17px; }
.preview-note li + li { margin-top:5px; }
.note-reminder { margin-top:24px; padding-left:12px; border-left:2px solid var(--line); color:var(--muted); font-size:11px; }
.note-reminder strong { color:var(--ink); font-weight:600; }
.note-reminder p { margin:5px 0 0; }
.preview figcaption { margin-top:12px; color:var(--muted); font-size:11px; line-height:1.6; }
.features-section { padding-block:48px 68px; border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:32px; margin-bottom:37px; }
.section-heading h2,.files-copy h2,.start-section h2 { margin:0; font-size:28px; font-weight:650; line-height:1.25; letter-spacing:-.035em; }
.section-heading > p { max-width:370px; margin:0; color:var(--muted); font-size:14px; }
.features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:40px; row-gap:30px; }
.feature { padding-top:18px; border-top:1px solid var(--line); }
.feature h3 { margin:0 0 10px; font-size:15px; font-weight:650; }
.feature p { margin:0; color:var(--muted); font-size:14px; line-height:1.75; }
kbd { display:inline-block; padding:0 4px; border:1px solid var(--line); border-radius:3px; font:11px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:nowrap; }
.files-section { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding-block:58px 70px; border-top:1px solid var(--line); }
.file-extension { display:block; margin-bottom:20px; color:var(--accent); font:24px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:-.06em; }
.files-copy h2 { max-width:360px; font-size:32px; }
.files-copy p { margin-block:20px; color:var(--muted); font-size:15px; line-height:1.75; }
.details-list { margin:0; }
.details-list > div { padding-bottom:22px; }
.details-list > div + div { padding-top:22px; border-top:1px solid var(--line); }
.details-list > div:last-child { padding-bottom:0; }
.details-list dt { margin-bottom:6px; font-size:15px; font-weight:650; }
.details-list dd { margin:0; color:var(--muted); font-size:14px; line-height:1.75; }
.start-section { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:30px 34px; background:var(--accent-soft); border-radius:6px; margin-bottom:68px; }
.start-section h2 { font-size:24px; }
.start-section p { max-width:570px; margin:8px 0 0; color:var(--muted); font-size:14px; }
.start-section .button { flex-shrink:0; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:28px 32px; border-top:1px solid var(--line); }
.site-footer .brand { font-size:15px; }
.site-footer p { margin:7px 0 0; color:var(--muted); font-size:12px; }
.site-footer nav { display:flex; gap:24px; font-size:13px; }
@media(max-width:1000px) { .hero { gap:32px; grid-template-columns:.8fr 1.2fr; }.preview-body { grid-template-columns:126px minmax(0,1fr); }.preview-tree { font-size:10px; padding-inline:6px; }.preview-tree .tree-indent { padding-left:12px; }.preview-tree .tree-note { padding-left:24px; }.preview-note { padding-inline:18px; }.files-section { gap:56px; } }
@media(max-width:780px) { .wrap { width:calc(100% - 40px); }.site-header { min-height:76px; }.site-header nav { gap:20px; }.features-link { display:none; }.hero { grid-template-columns:1fr; gap:40px; padding-block:48px 50px; }.hero-copy { padding-bottom:0; }h1 { font-size:56px; }.lead { max-width:540px; }.preview { width:100%; max-width:600px; }.preview-body { grid-template-columns:151px minmax(0,1fr); }.preview-tree { font-size:11px; }.preview-note { padding:22px 25px 28px; }.section-heading { display:block; }.section-heading > p { max-width:100%; margin-top:13px; }.features { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }.files-section { gap:32px; }.files-copy h2 { font-size:28px; }.start-section { align-items:flex-start; flex-direction:column; gap:22px; } }
@media(max-width:480px) { .wrap { width:calc(100% - 32px); }.site-header { gap:12px; }.site-header .docs-link { display:none; }.hero { padding-top:40px; }h1 { font-size:49px; }.lead { font-size:17px; }.hero-actions { gap:18px; }.hero-actions .text-link { font-size:13px; }.preview-body { grid-template-columns:102px minmax(0,1fr); }.preview-topbar { padding-inline:12px; }.preview-tree { padding-inline:3px; font-size:9px; }.preview-tree > span { padding-inline:5px; }.preview-tree .tree-indent { padding-left:9px; }.preview-tree .tree-note { padding-left:16px; }.preview-note { padding:18px 14px 22px; font-size:11px; }.preview-note h2 { font-size:21px; }.preview-note h3 { font-size:12px; }.preview-path { font-size:8px; margin-bottom:17px; }.preview-note code { font-size:9px; }.note-reminder { font-size:10px; }.features-section { padding-block:36px 44px; }.section-heading h2 { font-size:26px; }.features { grid-template-columns:1fr; gap:23px; }.files-section { grid-template-columns:1fr; gap:32px; padding-block:40px 44px; }.start-section { padding:26px 22px; margin-bottom:44px; }.site-footer { align-items:flex-start; flex-direction:column; gap:20px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.button { transition:none; } }