.site-main{flex:1;align-content:start;gap:clamp(2rem,5vw,3.5rem);width:100%;max-width:72rem;margin-inline:auto;padding:clamp(1.5rem,4vw,3.5rem) 1rem 4rem;display:grid}body{background-color:var(--background);background-image:radial-gradient(var(--grid-dot) 1px, transparent 1px);background-size:24px 24px}html{scroll-padding-top:5rem}:focus-visible{outline:2px solid var(--signal);outline-offset:2px}a,button,label,input,summary{touch-action:manipulation}.skip-link{z-index:50;background:var(--foreground);color:var(--background);border-radius:.375rem;padding:.5rem .75rem;position:absolute;top:-4rem;left:1rem}.skip-link:focus-visible{top:1rem}.site-header{z-index:20;border-bottom:1px solid var(--border);background:color-mix(in oklab, var(--background) 86%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0}.site-header-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.5rem;max-width:72rem;margin-inline:auto;padding:.75rem 1rem;display:flex}.brand{font-family:var(--font-display), serif;letter-spacing:-.01em;align-items:center;gap:.5rem;font-size:1.5rem;display:inline-flex}.brand-mark{background:conic-gradient(from 200deg, var(--lake), var(--signal), var(--lake));width:.9rem;height:.9rem;box-shadow:0 0 0 3px color-mix(in oklab, var(--signal) 18%, transparent);border-radius:999px}.site-nav ul{flex-wrap:wrap;gap:.25rem;display:flex}.site-nav a{color:var(--muted-foreground);border-radius:.375rem;padding:.375rem .625rem;font-size:.875rem;transition:color .15s,background-color .15s;display:inline-block}.site-nav a:hover{color:var(--foreground);background:var(--muted)}.site-nav a[aria-current=page]{color:var(--foreground);background:var(--muted);box-shadow:inset 0 -2px 0 var(--signal)}.site-footer{border-top:1px solid var(--border);text-align:center;justify-items:center;gap:.25rem;padding:1.5rem 1rem 2rem;font-size:.8125rem;display:grid}.page-header{gap:1rem;max-width:48rem;display:grid}.eyebrow{font-family:var(--font-code), ui-monospace, monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground);font-size:.75rem}.display-title{font-family:var(--font-display), serif;letter-spacing:-.02em;text-wrap:balance;font-size:clamp(2.5rem,7vw,4.75rem);font-weight:400;line-height:.98}.display-title em{color:var(--signal);font-style:italic}.lede{color:var(--muted-foreground);text-wrap:pretty;max-width:42rem;font-size:clamp(1rem,1.6vw,1.175rem);line-height:1.6}.lede code,.docs-section code,.page-header code{font-family:var(--font-code), ui-monospace, monospace;font-size:.9em}.section-title{font-family:var(--font-display), serif;letter-spacing:-.01em;font-size:clamp(1.5rem,3vw,2rem);font-weight:400;line-height:1.1}.panel{background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:.75rem;align-content:start;gap:1rem;min-width:0;padding:clamp(1rem,3vw,1.5rem);display:grid}.notice{border-left:3px solid var(--signal);background:color-mix(in oklab, var(--signal) 7%, var(--card));border-radius:0 .5rem .5rem 0;max-width:48rem;padding:.75rem 1rem;font-size:.875rem;line-height:1.55}.empty-state{border:1px dashed var(--border);color:var(--muted-foreground);border-radius:.75rem;justify-items:start;gap:.75rem;padding:1.5rem;font-size:.9375rem;display:grid}.host-chip{font-family:var(--font-code), ui-monospace, monospace;color:var(--signal-foreground);background:color-mix(in oklab, var(--signal) 12%, transparent);border:1px solid color-mix(in oklab, var(--signal) 35%, transparent);white-space:nowrap;border-radius:999px;align-items:center;gap:.375rem;padding:.125rem .5rem;font-size:.6875rem;display:inline-flex}.host-chip-dot{background:var(--signal);border-radius:999px;width:.375rem;height:.375rem}.flow{border:1px solid var(--border);background:var(--card);border-radius:.75rem;gap:.75rem;padding:clamp(1rem,3vw,1.75rem);display:grid}.flow-lane{grid-template-columns:minmax(7rem,10rem) 1fr;align-items:center;gap:1rem;padding-block:.75rem;display:grid}.flow-lane+.flow-lane{border-top:1px dashed var(--border)}.flow-lane-label{gap:.125rem;display:grid}.flow-lane[data-lane=write] .flow-lane-label>:first-child{color:var(--lake)}.flow-lane[data-lane=read] .flow-lane-label>:first-child{color:var(--signal)}.flow-steps{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.flow-step{font-family:var(--font-code), ui-monospace, monospace;align-items:center;gap:.5rem;font-size:.8125rem;display:inline-flex}.flow-step:not(:last-child):after{content:"";opacity:.35;background:currentColor;width:clamp(1.25rem,4vw,3rem);height:1px;-webkit-mask:linear-gradient(90deg,#000 70%,#0000);mask:linear-gradient(90deg,#000 70%,#0000)}.flow-lane[data-lane=read] .flow-step:last-child{color:var(--signal-foreground);font-weight:500}.flow figcaption{padding-top:.25rem}@media (max-width:40rem){.flow-lane{grid-template-columns:1fr;gap:.5rem}}.home{gap:clamp(2rem,5vw,3rem);display:grid}.destination-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.75rem;display:grid}.destination{border:1px solid var(--border);background:var(--card);border-radius:.75rem;gap:.375rem;height:100%;padding:1.25rem 2.5rem 1.25rem 1.25rem;transition:border-color .15s,transform .15s;display:grid;position:relative}.destination:hover{border-color:var(--foreground)}.destination:active{transform:scale(.99)}.destination-title{font-family:var(--font-display), serif;font-size:1.5rem}.destination-arrow{transition:transform .15s;position:absolute;top:1.25rem;right:1.25rem}.destination:hover .destination-arrow{transform:translate(3px)}.primitives dl{border-top:1px solid var(--border);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));margin-top:1rem;display:grid}.primitives dl>div{border-bottom:1px solid var(--border);gap:.25rem;padding:1rem 1rem 1rem 0;display:grid}.passcode{max-width:32rem}.passcode-form{gap:.5rem;display:grid}.field{gap:.375rem;display:grid}.field-label{font-size:.875rem;font-weight:500}.field-error{min-height:1.25rem;color:var(--destructive);font-size:.875rem}.playground{gap:clamp(1.5rem,4vw,2.5rem);display:grid}.playground-top{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));align-items:start;gap:1rem;display:grid}.playground-skeleton-card{min-height:12rem}.profile{grid-template-columns:auto 1fr;align-items:center;gap:1.25rem}.profile-avatar{background:var(--muted);width:8rem;height:8rem;box-shadow:0 0 0 1px var(--border), 0 0 0 6px var(--card), 0 0 0 7px color-mix(in oklab, var(--signal) 40%, transparent);border-radius:999px;overflow:hidden}.avatar-swap,.avatar-image{width:100%;height:100%}.avatar-image{object-fit:cover}.avatar-empty{width:100%;height:100%;font-family:var(--font-display), serif;color:var(--muted-foreground);place-items:center;font-size:2.5rem;display:grid}.profile-meta{gap:.5rem;min-width:0;display:grid}.profile-name{overflow-wrap:anywhere;font-size:1rem;font-weight:500}.profile-facts{gap:.375rem;font-size:.8125rem;display:grid}.profile-facts>div{grid-template-columns:4.5rem 1fr;align-items:baseline;gap:.5rem;display:grid}.profile-facts dt{color:var(--muted-foreground)}@media (max-width:30rem){.profile{grid-template-columns:1fr;justify-items:start}}.upload-head{gap:.25rem;display:grid}.file-trigger{border:1px dashed var(--foreground);cursor:pointer;border-radius:.5rem;justify-content:center;align-items:center;min-height:2.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:background-color .15s;display:inline-flex}.file-trigger:hover{background:var(--muted)}.peer:focus-visible+.file-trigger{outline:2px solid var(--signal);outline-offset:2px}.file-trigger[aria-disabled=true]{opacity:.5;cursor:not-allowed}.upload-preview{width:fit-content;max-width:100%;position:relative}.upload-preview-image{border:1px solid var(--border);border-radius:.5rem;width:auto;max-width:100%;max-height:12rem}.upload-preview-tag{background:color-mix(in oklab, var(--foreground) 80%, transparent);color:var(--background);border-radius:.25rem;padding:.125rem .375rem;font-size:.625rem;position:absolute;bottom:.5rem;left:.5rem}.upload-error{border:1px solid color-mix(in oklab, var(--destructive) 40%, transparent);background:color-mix(in oklab, var(--destructive) 8%, transparent);border-radius:.5rem;justify-items:start;gap:.75rem;padding:.75rem 1rem;font-size:.875rem;display:grid}.upload-progress{gap:.5rem;display:grid}.progress-track{background:var(--muted);border-radius:999px;height:.5rem;position:relative;overflow:hidden}.progress-fill{transform-origin:0;background:var(--lake);transition:transform .2s cubic-bezier(.23,1,.32,1);position:absolute;inset:0}.progress-track[data-processing]:after{content:"";background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--signal) 75%, transparent), transparent);width:40%;animation:1.4s cubic-bezier(.45,0,.55,1) infinite processing-sweep;position:absolute;inset:0}.upload-result{gap:.75rem;display:grid}.result-json,.code-block{border:1px solid var(--border);background:var(--code-background);color:var(--code-foreground);border-radius:.5rem;overflow:hidden}.result-json summary{cursor:pointer;border-bottom:1px solid var(--border);padding:.5rem .75rem}.result-json pre,.code-block pre{font-family:var(--font-code), ui-monospace, monospace;max-height:22rem;padding:.75rem;font-size:.75rem;line-height:1.6;overflow-x:auto}.code-block figcaption{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:.5rem;padding:.375rem .375rem .375rem .75rem;display:flex}.matrix{gap:1rem;display:grid}.matrix-head{gap:.375rem;max-width:44rem;display:grid}.matrix-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:1rem;display:grid}.matrix-cell{border:1px solid var(--border);background:var(--card);min-width:0;animation:.42s cubic-bezier(.23,1,.32,1) both matrix-reveal;animation-delay:calc(var(--index,0) * 70ms);border-radius:.75rem;align-content:start;gap:.75rem;padding:.75rem;display:grid}.matrix-frame{aspect-ratio:4/3;background:linear-gradient(45deg, var(--muted) 25%, transparent 25%, transparent 75%, var(--muted) 75%), linear-gradient(45deg, var(--muted) 25%, transparent 25%, transparent 75%, var(--muted) 75%);background-position:0 0,8px 8px;background-size:16px 16px;border-radius:.5rem;place-items:center;display:grid;overflow:hidden}.matrix-frame img{object-fit:contain;border-radius:.25rem;width:auto;max-width:100%;height:auto;max-height:100%}.matrix-caption{gap:.25rem;min-width:0;display:grid}.matrix-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding-top:.25rem;display:flex}.network-proof{border:1px solid var(--border);background:var(--code-background);color:var(--code-foreground);border-radius:.75rem;gap:.5rem;max-width:32rem;padding:1rem;display:grid}.network-hosts{gap:.25rem;font-size:.8125rem;display:grid}.network-hosts li{justify-content:space-between;gap:1rem;display:flex}.network-hosts li[data-app-origin]{color:var(--destructive)}.network-proof [data-clean]{color:var(--signal-foreground);font-weight:500}.live-page{gap:clamp(1.5rem,4vw,2.5rem);display:grid}.live{gap:1.25rem;display:grid}.live-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:end;gap:.75rem;display:flex}.live-controls{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.live-pill{border:1px solid var(--border);font-family:var(--font-code), ui-monospace, monospace;border-radius:999px;align-items:center;gap:.5rem;padding:.25rem .625rem;font-size:.75rem;display:inline-flex}.live-dot{background:var(--signal);border-radius:999px;width:.5rem;height:.5rem;position:relative}.live-pill[data-mode=live] .live-dot:after{content:"";border-radius:inherit;background:var(--signal);animation:2s ease-out infinite live-pulse;position:absolute;inset:0}.live-pill[data-mode=fallback] .live-dot{background:var(--muted-foreground)}.live-grid{grid-template-columns:repeat(auto-fill,minmax(min(45%,11rem),1fr));gap:.75rem;display:grid}.live-tile{border:1px solid var(--border);background:var(--card);border-radius:.75rem;gap:.5rem;min-width:0;padding:.5rem;animation:.36s cubic-bezier(.23,1,.32,1) both tile-arrive;display:grid}.live-frame{aspect-ratio:1;background:var(--muted);border-radius:.5rem;overflow:hidden}.live-frame img{object-fit:cover;width:100%;height:100%}.live-meta{gap:.375rem;min-width:0;display:grid}.skeleton .live-frame,.skeleton .matrix-frame,.skeleton.panel,.skeleton-line{background:var(--muted);animation:1.4s ease-in-out infinite skeleton-pulse}.skeleton-line{border-radius:999px;width:70%;height:.75rem;display:block}.architecture,.docs{gap:clamp(2rem,5vw,3rem);display:grid}.architecture section{gap:1rem;display:grid}.option-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:.75rem;display:grid}.option[data-chosen]{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal)}.option-title{font-family:var(--font-display), serif;font-size:1.5rem;font-weight:400}.plain-list{gap:.5rem;max-width:48rem;padding-left:1.25rem;list-style:outside;display:grid}.limitations{gap:.5rem;max-width:48rem;padding-left:1.5rem;font-size:.9375rem;line-height:1.55;list-style:decimal;display:grid}.limitations li::marker{font-family:var(--font-code), ui-monospace, monospace;color:var(--muted-foreground)}.docs-toc ol{flex-wrap:wrap;gap:.5rem;display:flex}.docs-toc a{border:1px solid var(--border);border-radius:999px;padding:.25rem .625rem;font-size:.8125rem;display:inline-block}.docs-toc a:hover{border-color:var(--foreground)}.docs-section{gap:.75rem;max-width:52rem;scroll-margin-top:5rem;display:grid}.error-panel{max-width:40rem}.avatar-swap{transition:opacity .4s,transform .4s cubic-bezier(.23,1,.32,1)}@starting-style{.avatar-swap{opacity:0;transform:scale(1.06)}}@keyframes matrix-reveal{0%{opacity:0;transform:translateY(8px)}}@keyframes tile-arrive{0%{opacity:0;transform:scale(.96)}}@keyframes processing-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@keyframes live-pulse{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(2.8)}}@keyframes skeleton-pulse{50%{opacity:.55}}@media (prefers-reduced-motion:reduce){.matrix-cell,.live-tile{animation:none}.avatar-swap{transition:opacity .15s linear}@starting-style{.avatar-swap{transform:none}}.progress-fill{transition:none}.progress-track[data-processing]:after,.live-pill[data-mode=live] .live-dot:after,.skeleton .live-frame,.skeleton .matrix-frame,.skeleton.panel,.skeleton-line{animation:none}.destination,.destination-arrow{transition:none}}
