@charset "UTF-8";
:root { color-scheme: light; --paper:#f6f5f1; --ink:#222622; --muted:#62685f; --line:#dadcd2; --orange:#ec6034; --dark:#222822; --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:30px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button { font:inherit; cursor:pointer; }
button:disabled { cursor:default; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:3px solid #9868b3; outline-offset:5px; }
code { font-family:var(--mono); font-size:.88em; }
p { line-height:1.65; }
.wrap { width:min(1160px,calc(100% - 80px)); margin-inline:auto; }
.skip { position:absolute; top:-80px; left:20px; padding:12px; z-index:10; background:var(--ink); color:white; }
.skip:focus { top:12px; }
.site-header { min-height:104px; display:flex; justify-content:space-between; align-items:center; gap:25px; border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:23px; display:inline-flex; align-items:center; gap:8px; text-decoration:none; letter-spacing:-1px; }
.brand-mark { font-size:37px; line-height:1; font-weight:400; color:var(--orange); margin-right:2px; }
.brand-note { font:11px var(--mono); letter-spacing:0; margin-left:18px; color:var(--muted); }
.site-header nav { display:flex; gap:30px; font-size:13px; }
.site-header nav a { text-decoration:none; }
.site-header nav a:hover,.site-footer a:hover { color:#b54421; }
.hero { padding-top:68px; }
.eyebrow { display:block; font:10px/1.5 var(--mono); font-weight:500; letter-spacing:1.7px; color:var(--muted); }
.little-dot { display:inline-block; height:7px; width:7px; background:var(--orange); border-radius:50%; margin-right:9px; }
.hero-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:center; margin-top:24px; }
h1 { font-size:clamp(62px,7.5vw,100px); font-weight:600; letter-spacing:-6px; line-height:1.02; margin:0; }
.tab-word { color:var(--orange); }
.cursor { font-family:var(--mono); letter-spacing:-14px; margin-right:12px; }
.hero-aside { padding-top:13px; max-width:410px; }
.hero-intro { font-size:23px; font-weight:500; letter-spacing:-.6px; line-height:1.4; margin:0 0 15px; }
.hero-aside > p:not(.hero-intro) { font-size:15px; color:var(--muted); margin:0; }
.text-link { display:inline-flex; align-items:center; gap:20px; margin-top:25px; text-decoration:none; font-size:13px; font-weight:600; }
.text-link span { color:var(--orange); font-size:20px; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:65px; }
.principles article { border-top:1px solid var(--line); padding-top:18px; }
.number { font:10px var(--mono); letter-spacing:1px; color:var(--muted); }
.principles h2 { font-size:17px; letter-spacing:-.4px; margin:15px 0 8px; font-weight:600; }
.principles p { font-size:13px; color:var(--muted); margin:0; max-width:315px; }
.playground-section { padding-top:88px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:26px; }
.section-heading h2 { font-size:36px; letter-spacing:-1.5px; margin:9px 0 0; font-weight:550; }
.mode-switch { display:flex; padding:4px; border:1px solid #d5d7cd; border-radius:8px; gap:3px; }
.mode-switch button { background:transparent; border:0; border-radius:5px; padding:10px 15px; font-size:12px; color:var(--muted); min-height:39px; }
.mode-switch button[aria-pressed="true"] { background:var(--ink); color:#f6f5f1; box-shadow:0 1px 3px #0002; }
.playground { padding:29px 30px 0; background:var(--dark); border-radius:16px; color:#f1f2e9; overflow:hidden; background-image:radial-gradient(#75807120 1px,transparent 1px); background-size:17px 17px; }
.canvas-heading { display:flex; justify-content:space-between; gap:18px; font:9px var(--mono); letter-spacing:1.2px; color:#b1b9aa; margin-bottom:25px; }
.live-dot { display:inline-block; width:6px; height:6px; background:#a1ba8f; border-radius:50%; margin-right:7px; }
.simulation-label { color:#a4ad9b; }
.replicas { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; position:relative; z-index:1; }
.replica { border:1px solid #59634f; border-radius:8px; background:#2d342a; overflow:hidden; transition:border-color .25s,box-shadow .25s; }
.replica.changed { border-color:#f28a65; box-shadow:0 0 0 1px #f28a6515; }
.replica.conflict { border-color:#dbae76; }
.browser-chrome { display:flex; align-items:center; gap:10px; padding:12px; background:#363e31; font-size:10px; border-bottom:1px solid #46503f; white-space:nowrap; }
.window-dots { display:flex; gap:3px; }
.window-dots i { height:4px; width:4px; border-radius:50%; background:#8e9986; }
.copy-id { margin-left:auto; font:8px var(--mono); letter-spacing:.3px; color:#b7c0af; }
.repo-body { padding:16px 17px 13px; }
.repo-path { font:10px var(--mono); color:#b9c2b0; margin-bottom:15px; }
.file-row { display:flex; align-items:center; gap:8px; font:11px var(--mono); min-height:25px; }
.file-note { margin-left:auto; color:#bcc4b4; font-size:9px; }
.file-icon,.folder-icon { color:#bdc5b4; font-size:15px; min-width:12px; }
.muted { color:#b5bdae; }
.commit-line { display:flex; align-items:center; min-height:43px; margin-top:5px; }
.commit-dot { height:9px; width:9px; border-radius:50%; border:2px solid #a2b393; flex:none; }
.commit-track { height:2px; width:20px; background:#8e9c80; display:none; }
.new-commit { height:9px; width:9px; border-radius:50%; background:#f49a73; display:none; flex:none; }
.changed .commit-track,.changed .new-commit { display:block; }
.head-label { font:10px var(--mono); color:#e4e8d9; margin-left:9px; }
.replica-status { color:#bdcbb0; font:9px var(--mono); border-top:1px solid #4b5542; padding-top:11px; min-height:23px; }
.changed .replica-status { color:#f6b095; }
.conflict .replica-status { color:#f5cb94; }
.connections { display:block; width:100%; height:49px; }
.connections path { stroke:#637058; stroke-width:1.2; fill:none; transition:stroke .2s; }
[data-phase="2"] .connections path,[data-phase="4"] .connections path { stroke:#ed9c78; }
.api-node { width:max-content; max-width:100%; min-height:43px; margin:auto; border:1px solid #667358; background:#35412d; border-radius:7px; display:flex; align-items:center; gap:12px; padding:9px 13px; font-size:11px; }
.function-symbol { font:24px/1 var(--mono); color:#bfd0a9; }
.api-node strong { font-weight:500; }
.api-node > span:not(.function-symbol) { font:9px var(--mono); color:#c5d0ba; }
.api-node .api-tag { font-size:8px!important; border-left:1px solid #728060; padding-left:12px; color:#c3d1b3; }
.vertical-link { height:24px; width:1px; margin:auto; background:#68785b; }
.bucket { background:#323b2b; border:1px solid #738362; border-radius:9px; }
.bucket-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid #556346; }
.bucket-heading > div { display:flex; align-items:center; gap:10px; }
.bucket-icon { color:#e7b188; font-size:22px; }
.bucket h3 { font-size:14px; font-weight:500; margin:0; }
.bucket-caption { color:#bdc8b2; font:9px var(--mono); margin-left:5px; }
.revision { font:9px var(--mono); color:#d8e3c8; background:#49583b; padding:5px 8px; border-radius:4px; }
.bucket-files { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:18px 20px; gap:20px; }
.object-block { display:flex; flex-direction:column; align-items:start; gap:9px; }
.object-block + .object-block { border-left:1px solid #58684b; padding-left:20px; }
.object-label { font:8px var(--mono); letter-spacing:1px; color:#bfcab3; }
.object-block code { font-size:11px; color:#eef2e5; }
.object-block > span:last-child { font:9px var(--mono); color:#c3cfb5; line-height:1.5; }
.manifest > span:last-child { color:#f8b591; }
.bucket-rule { display:flex; align-items:center; gap:8px; font:9px/1.6 var(--mono); padding:11px 20px; border-top:1px solid #536145; color:#d0dbc2; }
.rule-dot { background:#e2b28b; width:5px; height:5px; border-radius:50%; flex:none; }
.step-panel { display:grid; grid-template-columns:1fr auto; align-items:center; gap:40px; padding:28px 0 25px; min-height:174px; }
.step-count { font:9px var(--mono); letter-spacing:1px; color:#c1c9b9; }
.step-copy h3 { margin:10px 0 7px; font-size:21px; font-weight:500; letter-spacing:-.4px; }
.step-copy p { color:#bac4b0; font-size:12px; margin:0; max-width:675px; line-height:1.6; }
.step-actions { display:flex; flex-direction:column; align-items:center; gap:7px; }
.primary-button { display:flex; justify-content:space-between; align-items:center; gap:22px; min-height:43px; min-width:205px; padding:12px 16px; border:1px solid #f49b6d; border-radius:6px; background:#f49b6d; color:#242822; font-size:12px; font-weight:600; transition:background .15s; }
.primary-button:hover { background:#ffaf82; }
.primary-button span { font-size:17px; line-height:1; }
.reset-button { border:0; padding:9px; background:none; color:#c5cfbb; font-size:10px; }
.reset-button:disabled { opacity:.45; }
.step-progress { display:flex; gap:4px; margin-inline:-30px; height:3px; }
.step-progress span { background:#546247; flex:1; transition:background .3s; }
.step-progress span.done { background:#f49b6d; }
.demo-note { font:10px/1.7 var(--mono); color:var(--muted); text-align:center; margin:16px 0 0; }
.under-hood { display:grid; grid-template-columns:.95fr 1.2fr; gap:85px; padding-top:100px; }
.hood-intro h2,.commit-point h2,.details h2 { font-size:36px; font-weight:550; letter-spacing:-1.5px; line-height:1.18; margin:18px 0; }
.hood-intro p { color:var(--muted); font-size:14px; max-width:320px; }
.stack-list article { display:flex; gap:22px; padding:24px 0; border-top:1px solid var(--line); }
.stack-list article:first-child { padding-top:0; border-top:0; }
.stack-list article:last-child { padding-bottom:0; }
.stack-index { font:11px var(--mono); color:#a45435; margin-top:4px; }
.stack-list h3 { font-size:15px; font-weight:600; letter-spacing:-.25px; margin:0 0 8px; }
.stack-list h3 span { font:9px var(--mono); color:var(--muted); display:block; margin-top:7px; letter-spacing:.3px; }
.stack-list p { font-size:13px; color:var(--muted); margin:0; }
.commit-point { display:grid; grid-template-columns:.9fr 1.2fr; gap:95px; border-top:1px solid var(--line); margin-top:80px; padding-top:65px; align-items:center; }
.commit-point h2 { font-size:43px; margin:20px 0; }
.commit-point p { color:var(--muted); font-size:14px; max-width:360px; }
.commit-point .small-copy { font-size:12px; }
.code-window { min-width:0; border:1px solid #d3d7ca; border-radius:9px; overflow:hidden; background:#ecede5; }
.code-heading { display:flex; justify-content:space-between; padding:13px 20px; border-bottom:1px solid #d4d8ca; color:#606953; font:9px var(--mono); }
.code-window pre { padding:22px 20px; margin:0; overflow:auto; font:11px/1.9 var(--mono); }
.code-window code { font-size:inherit; }
.code-comment { color:#617055; }
.code-purple { color:#73528b; }
.code-orange { color:#9a4a2b; }
.code-green { color:#3a6738; }
.code-foot { border-top:1px solid #d4d8ca; font:9px/1.5 var(--mono); padding:13px 20px; color:#58634d; }
.details { padding-top:85px; }
.details h2 { margin-top:12px; font-size:30px; }
.details-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; margin-top:32px; }
.details-grid article { border-top:1px solid var(--line); padding-top:17px; }
.details-grid h3 { font-size:13px; line-height:1.5; font-weight:600; margin:0 0 8px; }
.details-grid p { font-size:12px; color:var(--muted); margin:0; }
.site-footer { margin-top:80px; padding-block:28px 36px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:35px; align-items:center; }
.site-footer .brand { font-size:18px; }
.site-footer .brand-mark { font-size:28px; }
.site-footer p { font-size:11px; color:var(--muted); margin:7px 0 0; }
.site-footer nav { display:flex; flex-wrap:wrap; justify-content:end; gap:15px 23px; max-width:520px; font-size:10px; color:var(--muted); }
.site-footer nav a { text-decoration:none; }
@media(min-width:1450px) { .hero { padding-top:83px; } }
@media(max-width:1000px) { .wrap { width:calc(100% - 48px); } .hero-grid { gap:40px; } h1 { font-size:78px; } .brand-note { display:none; } .principles { gap:22px; } .playground { padding:24px 22px 0; } .replicas { gap:13px; } .repo-body { padding:14px 12px 12px; } .copy-id { display:none; } .file-note { font-size:8px; } .browser-chrome { padding:11px; } .bucket-caption { display:none; } .under-hood,.commit-point { gap:45px; } .details-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .step-progress { margin-inline:-22px; } }
@media(max-width:720px) { .wrap { width:calc(100% - 36px); } .site-header { min-height:78px; } .site-header nav { gap:17px; font-size:11px; } .hero { padding-top:43px; } .hero-grid { grid-template-columns:1fr; gap:25px; margin-top:20px; } h1 { font-size:76px; letter-spacing:-5px; } .hero-aside { max-width:470px; padding:0; } .hero-intro { font-size:22px; } .hero-aside > p:not(.hero-intro) { font-size:14px; } .principles { margin-top:40px; grid-template-columns:1fr; gap:21px; } .principles h2 { margin-top:9px; font-size:18px; } .principles p { max-width:none; } .playground-section { padding-top:56px; } .section-heading { align-items:start; flex-direction:column; gap:19px; margin-bottom:20px; } .section-heading h2 { font-size:33px; } .mode-switch { align-self:start; } .playground { padding:20px 15px 0; border-radius:12px; } .canvas-heading { font-size:8px; letter-spacing:.6px; gap:10px; margin-bottom:18px; flex-wrap:wrap; } .replicas { grid-template-columns:1fr; gap:12px; } .replica { display:grid; grid-template-columns:110px minmax(0,1fr); } .browser-chrome { flex-direction:column; justify-content:center; align-items:start; gap:9px; padding:13px; white-space:normal; border-bottom:0; border-right:1px solid #46503f; font-size:10px; } .window-dots { display:none; } .copy-id { display:block; margin-left:0; } .repo-body { padding:12px 13px; } .repo-path { font-size:9px; margin-bottom:6px; } .file-row { min-height:21px; font-size:10px; } .file-note { font-size:8px; } .commit-line { min-height:29px; margin-top:2px; } .head-label { font-size:9px; } .replica-status { padding-top:7px; font-size:8px; } .connections { height:27px; } .connections path { d:path("M480 0 V55"); } .api-node { flex-wrap:wrap; justify-content:center; column-gap:8px; row-gap:5px; padding:10px; width:100%; } .api-node #api-description { width:100%; text-align:center; order:3; font-size:8px; line-height:1.6; } .api-node .api-tag { font-size:7px!important; margin-left:3px; } .function-symbol { font-size:21px; } .vertical-link { height:19px; } .bucket-heading { padding:12px; } .bucket h3 { font-size:12px; } .bucket-files { grid-template-columns:1fr; padding:0 12px; gap:0; } .object-block { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:7px; padding:12px 0; } .object-block + .object-block { border-left:0; border-top:1px solid #58684b; padding:12px 0; } .object-label { grid-column:1/-1; font-size:7px; } .object-block code { font-size:9px; } .object-block > span:last-child { text-align:right; font-size:8px; } .bucket-rule { padding:10px 12px; font-size:8px; } .step-panel { grid-template-columns:1fr; gap:20px; padding:24px 0 17px; min-height:280px; } .step-copy h3 { font-size:20px; line-height:1.3; } .step-copy p { font-size:12px; } .step-actions { flex-direction:row; justify-content:space-between; } .primary-button { min-width:0; flex:1; max-width:270px; font-size:11px; min-height:44px; } .reset-button { min-height:44px; padding-inline:14px; } .step-progress { margin-inline:-15px; } .demo-note { font-size:9px; text-align:left; } .under-hood { padding-top:65px; grid-template-columns:1fr; gap:28px; } .hood-intro h2 { font-size:33px; } .hood-intro p { max-width:none; } .stack-list article:first-child { border-top:1px solid var(--line); padding-top:22px; } .commit-point { margin-top:55px; padding-top:43px; grid-template-columns:1fr; gap:20px; } .commit-point h2 { font-size:39px; } .commit-point p { max-width:none; } .code-window pre { font-size:10px; padding:17px 12px; } .code-heading,.code-foot { padding-inline:12px; font-size:8px; } .details { padding-top:53px; } .details-grid { gap:25px 22px; margin-top:25px; } .site-footer { margin-top:55px; flex-direction:column; align-items:start; gap:22px; } .site-footer nav { justify-content:start; gap:16px 23px; } }
@media(max-width:380px) { .site-header nav a:last-child { display:none; } h1 { font-size:67px; } .replica { grid-template-columns:88px minmax(0,1fr); } .file-note { display:none; } .head-label { font-size:8px; } .details-grid { grid-template-columns:1fr; } .canvas-heading { font-size:7px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }