@font-face{font-family:JetBrains Mono;src:url(/assets/jetbrains-mono.ttf)format("truetype");font-weight:100 900;font-display:swap}@font-face{font-family:Inter;src:url(/assets/inter.ttf)format("truetype");font-weight:100 900;font-display:swap}:root{--desktop:#e8e8e5;--canvas:#f7f7f5;--canvas-raised:#fbfbf9;--surface:#f0f0ee;--surface-2:#e8e8e6;--surface-3:#dededb;--ink:#2a2a28;--ink-2:#4a4a47;--muted:#7c7c77;--faint:#a2a29c;--line:#d0d0cc;--line-strong:#b9b9b4;--accent:#526fd2;--accent-soft:#dfe5fb;--green:#2e8a57;--mono:"JetBrains Mono",monospace;--sans:Inter,system-ui,sans-serif;--desktop-grid:linear-gradient(#ffffff6b 1px,transparent 1px),linear-gradient(90deg,#ffffff6b 1px,transparent 1px)}*{box-sizing:border-box}body{background:var(--desktop);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;margin:0}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}button,input{font:inherit;color:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button svg{flex-shrink:0}h1,h2,p,figure,dl,dd{margin:0}button{border:0}code{font-family:inherit}[hidden]{display:none!important}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip-link{z-index:10;background:var(--canvas);padding:10px;position:absolute;top:-60px;left:20px}.skip-link:focus{top:10px}.page{background:var(--canvas);border:1px solid var(--line-strong);border-radius:8px;max-width:1280px;margin:36px auto;overflow:hidden}.masthead{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:56px;padding:0 44px;display:flex}.brand{letter-spacing:-.02em;font-size:15px;font-weight:650}.masthead nav{color:var(--muted);align-items:center;gap:25px;font-size:12px;display:flex}.button{border:1px solid var(--line-strong);background:var(--canvas-raised);white-space:nowrap;border-radius:4px;justify-content:center;align-items:center;gap:6px;min-width:90px;height:28px;padding:0 12px;font-size:12px;display:inline-flex}.button:hover{background:var(--surface)}.button.strong{background:var(--canvas);border-color:var(--line-strong);color:var(--ink)}.button.strong:hover{background:#fff}.button:disabled:hover{background:var(--canvas)}.hero{text-align:center;flex-direction:column;align-items:center;gap:21px;padding:89px 44px 55px;display:flex}.hero h1{letter-spacing:-.045em;font-size:64px;font-weight:500;line-height:1.02}.hero p{font-family:var(--sans);color:var(--ink-2);text-wrap:pretty;max-width:520px;font-size:18px;line-height:1.6}.hero-actions{justify-content:center;align-items:center;gap:9px;max-width:100%;margin-top:9px;display:flex}.hero-download{min-width:88px;height:34px}.cli-command{background:var(--surface);border:1px solid var(--line);text-align:left;border-radius:4px;align-items:center;gap:11px;min-width:0;min-height:34px;padding:4px 9px 4px 13px;font-size:12px;display:flex}.prompt{color:var(--faint)}.command-theme{color:var(--accent)}#command-text{overflow-wrap:anywhere}.icon-button{background:0 0;border-radius:3px;flex:none;justify-content:center;align-items:center;width:24px;height:24px;padding:3px;display:flex}.icon-button:hover{background:var(--surface-3)}.app-section{padding:0 44px 89px}.app-demo{border:1px solid var(--line-strong);border-radius:11px;width:100%;font-size:12px;overflow:hidden;box-shadow:0 24px 70px #1b1b192e}.titlebar{background:var(--surface-2);border-bottom:1px solid var(--line-strong);grid-template-columns:1fr auto 1fr;align-items:center;height:40px;padding:0 11px 0 13px;display:grid}.traffic-lights{gap:7px;display:flex}.traffic-lights i{background:#ff6259;border-radius:50%;width:12px;height:12px}.traffic-lights i:nth-child(2){background:#ffbd2e}.traffic-lights i:nth-child(3){background:#28c941}.window-title{color:var(--muted)}.window-actions{justify-content:flex-end;gap:5px;display:flex}.button.small{min-width:64px;height:26px;padding:0 8px;font-size:11px}.button.small svg{width:12px;height:12px}.app-panes{grid-template-columns:350px minmax(0,1fr) 240px;height:560px;display:grid}.source-pane{background:var(--canvas-raised);border-right:1px solid var(--line);min-width:0}.source-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:34px;padding:0 11px;display:flex}.label{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:10px;font-weight:400;line-height:1.2}.pill{border:1px solid var(--line);height:20px;color:var(--muted);background:var(--surface);border-radius:4px;justify-content:center;align-items:center;padding:0 7px;font-size:10px;display:inline-flex}.source-code{padding:9px 0;font-size:10.5px;line-height:1.75;overflow:hidden}.source-line{display:flex}.source-line.highlighted{background:var(--accent-soft)}.line-number{text-align:right;width:31px;color:var(--faint);flex:none;padding-right:11px}.source-line code{white-space:pre;color:var(--ink-2)}.canvas{background-color:var(--desktop);background-image:var(--desktop-grid);background-size:14px 14px;justify-content:center;align-items:center;padding:26px;display:flex;position:relative;overflow:hidden}.preview-frame{width:100%;max-width:500px;position:relative}.preview-image{width:100%;height:auto;display:block}.handle{border:1px solid var(--accent);background:var(--canvas-raised);width:7px;height:7px;position:absolute}.top-left{top:-4px;left:-4px}.top-right{top:-4px;right:-4px}.bottom-left{bottom:-4px;left:-4px}.bottom-right{bottom:-4px;right:-4px}.canvas-info{gap:5px;display:flex;position:absolute;bottom:11px;left:11px}.inspector{background:var(--canvas-raised);border-left:1px solid var(--line);flex-direction:column;display:flex;overflow:hidden}.inspector-section{border-bottom:1px solid var(--line);flex-direction:column;gap:7px;padding:11px;display:flex}.inspector-section:last-child{border-bottom:0}.theme-search{background:var(--canvas);border:1px solid var(--line-strong);height:26px;color:var(--faint);border-radius:4px;align-items:center;gap:6px;padding:0 7px;display:flex}.theme-search svg{flex:none;width:12px;height:12px}.theme-search input{background:0 0;border:0;width:100%;min-width:0;padding:0;font-size:11px}.theme-search input::placeholder{color:var(--faint)}.theme-option{width:100%;min-height:27px;color:var(--ink-2);text-align:left;background:0 0;border-radius:4px;align-items:center;gap:9px;padding:4px 7px;font-size:12px;display:flex}.theme-option:hover{background:var(--surface)}.theme-option[aria-pressed=true]{background:var(--surface-3);color:var(--ink)}.swatch{background:var(--swatch);border:1px solid var(--line-strong);width:13px;height:13px;box-shadow:inset -5px 0 0 var(--swatch-accent);border-radius:3px;flex:none}.theme-check{color:var(--accent);opacity:0;margin-left:auto}.theme-option[aria-pressed=true] .theme-check{opacity:1}.inspector dl{flex-direction:column;gap:7px;display:flex}.inspector dl div{justify-content:space-between;gap:4px;display:flex}.inspector dt{color:var(--muted)}.green{color:var(--green)}.empty{color:var(--muted);padding:7px;font-size:11px}.showcase{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;padding:0 44px 89px;display:grid}.showcase-tile{border:1px solid var(--line);background:var(--surface);border-radius:5px;justify-content:center;align-items:center;height:250px;padding:16px;display:flex;overflow:hidden}.showcase-tile.lattice{background-color:var(--desktop);background-image:var(--desktop-grid);background-size:14px 14px}.showcase-tile img{object-fit:contain;width:100%;height:auto;max-height:100%}.showcase figcaption{color:var(--muted);justify-content:space-between;gap:8px;margin-top:9px;font-size:11px;display:flex}.showcase figcaption span:first-child{color:var(--ink)}footer{border-top:1px solid var(--line);background:var(--surface);min-height:46px;color:var(--muted);justify-content:space-between;gap:16px;padding:14px 44px;font-size:11px;display:flex}footer nav{flex-wrap:wrap;gap:16px;display:flex}.not-found{flex-direction:column;justify-content:center;align-items:center;gap:24px;min-height:100dvh;display:flex}.not-found h1{font-size:32px;font-weight:500}@media (width<=1352px){.page{margin:24px}}@media (width<=1100px){.app-panes{grid-template-columns:260px minmax(0,1fr) 220px}.source-code{font-size:9px}.source-line code{white-space:pre-wrap;overflow-wrap:anywhere}.showcase figcaption{flex-direction:column;gap:4px}.hero h1{font-size:54px}}@media (width<=850px){.page{margin:16px}.masthead{padding:0 24px}.masthead nav{gap:18px}.hero{padding:68px 24px 42px}.hero-actions{flex-wrap:wrap}.app-section{padding:0 24px 56px}.app-panes{grid-template-columns:minmax(0,1fr) 220px;height:430px}.source-pane{display:none}.showcase{padding:0 24px 56px}.showcase-tile{height:190px;padding:10px}footer{padding:14px 24px}}@media (width<=600px){.page{border-radius:6px;margin:10px}.masthead{padding:0 18px}.masthead nav{gap:13px}.masthead nav>.button{display:none}.hero{gap:20px;padding:52px 18px 35px}.hero h1{max-width:340px;font-size:clamp(34px,8.5vw,48px);line-height:1.1}.hero p{max-width:320px;font-size:16px}.hero-actions{gap:14px}.cli-command{gap:8px;font-size:10px;line-height:1.7}.app-section{padding:0 18px 40px}.window-title{font-size:10px}.window-actions{gap:4px}.window-actions .button{min-width:0;padding:0 7px}.window-actions #copy-image span{display:none}.titlebar{grid-template-columns:1fr auto 1fr;gap:5px;padding:0 8px}.traffic-lights{gap:4px}.traffic-lights i{width:9px;height:9px}.app-panes{grid-template-columns:1fr;height:auto}.canvas{min-height:260px;padding:22px}.inspector{border-left:0;border-top:1px solid var(--line)}.theme-list{grid-template-columns:1fr 1fr;gap:3px;display:grid}.theme-option{gap:6px;font-size:10px}.inspector-section{padding:12px}.typography-settings,.canvas-settings{display:none}.showcase{grid-template-columns:1fr;gap:24px;padding:0 18px 40px}.showcase-tile{height:220px;padding:16px}.showcase figcaption{flex-direction:row;font-size:10px}footer{flex-direction:column;gap:14px;padding:18px}footer nav{gap:15px;font-size:10px}}