.demo{width:min(100%,780px);margin-inline:auto;position:relative}.demo-glow{z-index:-1;pointer-events:none;background:radial-gradient(38% 42% at 22% 38%, color-mix(in srgb, var(--en) calc(var(--glow) * 100%), transparent), transparent 70%), radial-gradient(40% 46% at 55% 30%, color-mix(in srgb, #5847e0 calc(var(--glow) * 110%), transparent), transparent 70%), radial-gradient(34% 40% at 82% 62%, color-mix(in srgb, var(--he) calc(var(--glow) * 90%), transparent), transparent 70%);filter:blur(28px);position:absolute;inset:-12% -18% 8%}.demo-window{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-window);text-align:start;border-radius:14px;overflow:hidden}.demo-titlebar{border-bottom:1px solid var(--line);background:var(--bg-2);justify-content:space-between;align-items:center;height:44px;padding-inline:16px 6px;font-size:13.5px;font-weight:600;display:flex}.demo-title{align-items:center;gap:10px;display:inline-flex}.demo-avatar{background:color-mix(in srgb, var(--he) 18%, var(--card));width:24px;height:24px;color:var(--he);border-radius:50%;place-items:center;font-size:12px;font-weight:700;display:inline-grid}.demo-caption{color:var(--muted);display:inline-flex}.demo-caption svg{box-sizing:content-box;padding:6px 14px}.demo-messages{background:linear-gradient(var(--card), transparent 30%), var(--card);flex-direction:column;justify-content:flex-end;gap:8px;height:216px;padding:14px 20px 8px;display:flex;overflow:hidden}.demo-day{color:var(--faint);align-self:center;margin-bottom:auto;font-size:12px;font-weight:500}.demo-bubble-row{justify-content:flex-end;display:flex}.demo-bubble{background:var(--accent);color:#fff;unicode-bidi:plaintext;border-radius:18px 18px 6px;max-width:78%;padding:8px 14px;font-size:16px;line-height:1.45}@media (prefers-color-scheme:dark){.demo-bubble{background:#5847e0}}.demo-compose{border-top:1px solid var(--line);align-items:flex-end;gap:10px;padding:12px 14px 14px 20px;display:flex;position:relative}.demo-box{border:1px solid var(--line);background:var(--bg);cursor:default;border-radius:12px;outline:none;flex:1;min-width:0;min-height:64px;padding:12px 16px 28px;font-size:18px;line-height:1.4;transition:border-color .15s,box-shadow .15s;position:relative}.demo-box.is-live,.demo-box.is-tryable{cursor:text}.demo-box.is-live:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.demo-line{white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext}.demo-fixed{animation:fixed-glow 1.8s var(--ease-out);border-radius:5px}@keyframes fixed-glow{0%,30%{background:color-mix(in srgb, var(--accent) 22%, transparent)}to{background:0 0}}.demo-caret{vertical-align:-.2em;background:var(--text);width:2px;height:1.2em;margin-inline:1px;animation:1.1s step-end infinite caret;display:inline-block;position:relative}.demo-caret.is-idle{background:0 0}@keyframes caret{50%{background:0 0}}.demo-badge{z-index:1;background:0 0;border:0;padding:0;line-height:0;animation:none;position:absolute;top:calc(100% + 3px);left:3px}.demo-badge>span{border-radius:6px;display:inline-block;box-shadow:0 2px 6px #0000002e}.demo-placeholder{color:var(--faint);pointer-events:none;position:absolute;inset:12px 16px auto}.demo-send{background:var(--accent);color:#fff;border-radius:50%;flex-shrink:0;place-items:center;width:40px;height:40px;margin-bottom:12px;display:grid}.demo-toast{z-index:2;background:var(--card);border:1px solid var(--line);white-space:nowrap;border-radius:12px;align-items:center;gap:12px;padding:8px 14px;font-size:15px;display:inline-flex;position:absolute;bottom:calc(100% + 10px);left:20px;box-shadow:0 8px 24px -8px #14120f38}.demo-toast-undo{color:var(--muted);align-items:center;gap:6px;font-size:13.5px;display:inline-flex}.demo-controls{margin-top:18px}.demo-controls:has(.demo-chips){align-items:center;gap:12px;display:flex}.demo-chips{scrollbar-width:none;flex:1;gap:6px;min-width:0;padding:2px;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 88%,#0000);mask-image:linear-gradient(90deg,#000 88%,#0000)}.demo-chips::-webkit-scrollbar{display:none}.demo-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.chip{cursor:pointer;height:34px;color:var(--muted);background:0 0;border:1px solid #0000;border-radius:10px;flex-shrink:0;align-items:center;gap:8px;padding:0 12px 0 8px;font-size:14px;font-weight:500;transition:background .15s,color .15s,border-color .15s;display:inline-flex;position:relative;overflow:hidden}.chip:hover{background:var(--hover);color:var(--text)}.chip.is-active{background:var(--card);color:var(--text);border-color:var(--line);box-shadow:var(--shadow-1)}.chip-progress{background:var(--accent);transform-origin:0;height:2px;position:absolute;bottom:0;left:0;right:0}.icon-btn{border:1px solid var(--line);background:var(--card);width:34px;height:34px;color:var(--muted);cursor:pointer;border-radius:10px;place-items:center;display:grid}.icon-btn:hover{color:var(--text);background:var(--hover)}.btn-small{border-radius:10px;gap:8px;height:34px;padding:0 12px;font-size:14px}.demo-try{text-align:start;gap:14px;display:grid}.demo-try-langs{flex-wrap:wrap;gap:6px;display:flex}.demo-try-hint{color:var(--muted);font-size:15px;line-height:1.9}.demo-try-hint b{color:var(--text)}.demo-try-hint .kbd{margin-inline:1px}.demo-loading{color:var(--faint)}.demo-try-foot{justify-content:space-between;align-items:center;gap:16px;display:flex}.demo-try-foot p{color:var(--faint);font-size:13px}@media (width<=640px){.demo-messages{height:200px;padding-inline:14px}.demo-compose{padding-left:14px}.demo-box{font-size:17px}.demo-toast{left:14px}.demo-caption svg{padding-inline:10px}.demo-try-foot{flex-direction:column;align-items:flex-start}}.demo-try-keys{white-space:nowrap;vertical-align:.05em;gap:3px;display:inline-flex}.header{z-index:50;transition:background .25s,box-shadow .25s,-webkit-backdrop-filter .25s,backdrop-filter .25s;position:sticky;top:0}.header.is-scrolled{background:color-mix(in srgb, var(--bg) 78%, transparent);-webkit-backdrop-filter:saturate(1.6)blur(16px);box-shadow:0 1px 0 var(--line)}.header-inner{align-items:center;gap:24px;height:68px;display:flex}.brand{font-family:var(--font-display);letter-spacing:-.02em;align-items:center;gap:10px;font-size:17px;font-weight:700;text-decoration:none;display:inline-flex}.brand img{border-radius:8px}.nav{gap:4px;margin-inline:auto;display:flex}.nav a{color:var(--muted);border-radius:9px;padding:7px 12px;font-size:15px;font-weight:500;text-decoration:none;transition:color .15s,background .15s}.nav a:hover{color:var(--text);background:var(--hover)}.header-actions{align-items:center;gap:8px;display:flex}.header-github{width:38px;height:38px;color:var(--muted);border-radius:10px;place-items:center;transition:color .15s,background .15s;display:grid}.header-github:hover{color:var(--text);background:var(--hover)}.header-download{border-radius:10px;gap:8px;height:38px;padding:0 14px;font-size:14.5px}@media (width<=860px){.nav{display:none}.header-actions{margin-left:auto}}@media (width<=420px){.brand span{display:none}}.hero{padding-block:clamp(40px,7vw,88px) 0;overflow-x:clip}.hero-inner{text-align:center;flex-direction:column;align-items:center;display:flex}.hero-pill{border:1px solid var(--line);background:var(--card);color:var(--muted);box-shadow:var(--shadow-1);border-radius:999px;align-items:center;gap:9px;padding:6px 14px 6px 10px;font-size:14px;font-weight:500;display:inline-flex}.hero-pill-dot{background:var(--he);width:8px;height:8px;box-shadow:0 0 0 3px color-mix(in srgb, var(--he) 22%, transparent);border-radius:50%}.hero h1{letter-spacing:-.028em;max-width:14.5em;margin-top:24px;font-size:clamp(38px,5.4vw,68px);font-weight:680;line-height:1.04}.hero-lede{max-width:620px;color:var(--muted);margin-top:26px;font-size:clamp(17px,1.9vw,20px);line-height:1.6}.hero-lede .fixpair b{color:var(--text)}.hero .download{margin-top:34px}.hero-demo{width:100%;margin-top:clamp(48px,6vw,72px)}.steps{counter-reset:step;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none;display:grid}.step li{flex-direction:column;height:100%;display:flex}.step-visual{border-radius:var(--radius-lg);background:var(--bg-2);border:1px solid var(--line);place-items:center;height:132px;margin-bottom:22px;font-size:20px;display:grid}.step-num{color:var(--faint);margin-bottom:6px;font-size:13.5px;font-weight:600}.step h3{letter-spacing:-.02em;margin-bottom:10px;font-size:23px;line-height:1.15}.step p:last-child{color:var(--muted)}.step-keys{align-items:center;gap:5px;display:inline-flex}.step-keys .badge{margin-left:8px}.step-space .kbd{border-bottom-width:4px;border-radius:10px;width:180px;height:48px;font-size:16px}.step-fixed{font-size:30px;font-family:var(--font-display);letter-spacing:-.01em;align-items:center;gap:10px;display:inline-flex}.step-fixed b{font-weight:650}.tiles{grid-template-columns:repeat(2,1fr);gap:20px;display:grid}.tile{border-radius:var(--radius-lg);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-1);padding:28px}.tile h3{letter-spacing:-.02em;margin-bottom:10px;font-size:24px;line-height:1.15}.tile p{color:var(--muted)}.tile-visual{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;place-items:center;height:176px;margin:-8px -8px 24px;display:grid;overflow:hidden}.undo-visual{align-content:center;gap:22px}.undo-row{font-size:26px;font-family:var(--font-display)}.undo-keys{justify-content:center;align-items:center;gap:6px;font-size:17px;display:flex}.undo-or,.undo-plus{color:var(--faint);margin-inline:4px;font-size:14px}.cursor-field{background:var(--card);border:1px solid var(--line);border-radius:12px;align-items:center;width:min(86%,340px);height:64px;padding:0 18px;font-size:22px;display:flex}.cursor-text{text-align:start;unicode-bidi:plaintext;width:100%}.cursor-caret{vertical-align:-.18em;background:var(--text);width:2px;height:1.15em;margin-inline:2px;display:inline-block;position:relative}.cursor-badge{line-height:0;position:absolute;top:calc(100% + 3px);left:3px}.tile-context{grid-column:1/-1;grid-template-columns:1fr 1.15fr;align-items:center;gap:40px;display:grid}.context-body h3{font-size:28px}.context-table{border-collapse:collapse;width:100%;font-size:18px}.context-table th{text-align:start;color:var(--faint);font-size:13px;font-weight:600;font-family:var(--font-body);padding:0 16px 10px}.context-table td{border-top:1px solid var(--line);vertical-align:baseline;padding:14px 16px}.context-typed{color:var(--muted);unicode-bidi:isolate}.context-table b{unicode-bidi:isolate;font-weight:650}.context-note{color:var(--accent);background:color-mix(in srgb, var(--accent) 11%, transparent);white-space:nowrap;border-radius:6px;margin-inline-start:10px;padding:2px 8px;font-size:12.5px;font-weight:600}.small-features{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px 28px;margin:56px 0 0;padding:0;list-style:none;display:grid}.small-icon{background:var(--accent-soft);width:40px;height:40px;color:var(--accent);border-radius:11px;place-items:center;margin-bottom:16px;display:grid}.small-features h3{letter-spacing:-.01em;font-size:18px;font-family:var(--font-body);margin-bottom:6px;font-weight:650}.small-features p{color:var(--muted);font-size:15.5px;line-height:1.55}@media (width<=900px){.steps,.tiles{grid-template-columns:1fr}.tile-context{grid-template-columns:1fr;gap:24px}}@media (width<=640px){.tile{padding:20px}.tile-visual{margin:-4px -4px 20px}.context-table{font-size:16px}.context-table td,.context-table th{padding-inline:8px}}.langs{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:0;padding:0;list-style:none;display:grid}.lang{background:var(--card);border:1px solid var(--line);border-radius:16px;align-items:center;gap:14px;padding:14px 16px;transition:border-color .2s,box-shadow .2s;display:flex}.lang:hover{border-color:color-mix(in srgb, var(--text) 16%, var(--line));box-shadow:var(--shadow-1)}.lang>span:first-child{display:inline-flex}.lang-names{flex-direction:column;min-width:0;display:flex}.lang-native{font-size:18px;font-weight:600;line-height:1.3}.lang-name{color:var(--muted);align-items:center;gap:8px;font-size:14px;display:inline-flex}.lang-beta{color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);border-radius:6px;padding:1px 7px;font-size:11px;font-weight:600}.lang-notes{color:var(--muted);grid-template-columns:repeat(3,1fr);gap:28px;margin:36px 0 0;font-size:15px;display:grid}.lang-notes dt{color:var(--text);margin-bottom:4px;font-weight:650}.lang-notes dd{margin:0;line-height:1.55}@media (width<=760px){.lang-notes{grid-template-columns:1fr;gap:18px}}@media (width<=480px){.langs{grid-template-columns:1fr 1fr}.lang{flex-direction:column;align-items:flex-start;gap:10px}}.screens-tabs{background:var(--bg-2);border:1px solid var(--line);scrollbar-width:none;border-radius:13px;gap:2px;max-width:100%;margin-bottom:28px;padding:4px;display:inline-flex;overflow-x:auto}.screens-tab{cursor:pointer;white-space:nowrap;height:36px;color:var(--muted);background:0 0;border:0;border-radius:10px;padding:0 16px;font-size:15px;font-weight:500;position:relative}.screens-tab:hover,.screens-tab.is-active{color:var(--text)}.screens-tab-bg{background:var(--card);box-shadow:var(--shadow-1), 0 0 0 1px var(--line);border-radius:10px;position:absolute;inset:0}.screens-tab-label{position:relative}.screens-stage{justify-content:center;display:flex}.win{border:1px solid var(--line);background:var(--bg);box-shadow:var(--shadow-window);border-radius:10px;overflow:hidden}.win-bar{background:var(--bg-2);height:36px;font-family:"Segoe UI", var(--font-body);color:var(--text);justify-content:space-between;align-items:center;padding-left:12px;font-size:12px;display:flex}.win-title{white-space:nowrap;align-items:center;gap:10px;display:inline-flex}.win-title img{border-radius:3px}.win-caption{color:var(--muted);display:inline-flex}.win-caption svg{box-sizing:content-box;padding:10px 16px}.win-body{position:relative;overflow:hidden}.win-body picture,.win-body img{width:100%;height:100%;position:absolute;inset:0}.win-body img{object-fit:cover;object-position:top left}@media (width<=640px){.win-caption svg{padding-inline:10px}}
