:root{--sky:#0d1330;--sky-raised:#151c42;--sky-deep:#080c22;--text:#eaf0ff;--muted:#9ba5ca;--line:#eaf0ff1f;--brand:#7b93ff;--glow:#ffbc87;--on-glow:#2b1405;--focus:#a9b9ff;--screen-shadow:0 50px 90px -50px #000000e6;--serif:"Songti SC", "Noto Serif SC", "Source Han Serif SC", "Noto Serif CJK SC", STSong, serif;--sans:-apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--gutter:clamp(20px, 5vw, 72px);--measure:34em;--radius-screen:14px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root:lang(en){--serif:ui-serif, "New York", "Iowan Old Style", Charter, Georgia, "Songti SC", serif;--measure:36em}.translating body{visibility:hidden}[data-appearance=light]{--sky:#edf1f8;--sky-raised:#fff;--sky-deep:#dfe5f1;--text:#111838;--muted:#58628a;--line:#1118381f;--brand:#3453e0;--glow:#111838;--on-glow:#f4f6ff;--focus:#3453e0;--screen-shadow:0 50px 90px -50px #1e285a8c;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{background:var(--sky);color:var(--text);font:17px/1.75 var(--sans);-webkit-font-smoothing:antialiased;margin:0;transition:background-color .8s,color .8s}a{color:inherit}:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip-link{z-index:10000;background:var(--sky-raised);color:var(--text);border-radius:8px;padding:8px 14px;position:absolute;top:-60px;left:12px}.skip-link:focus{top:40px}h1,h2,h3{font-family:var(--serif);letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;margin:0;font-weight:900}code,pre{font-family:var(--mono)}.button{border-radius:999px;align-items:center;gap:8px;min-height:44px;padding:0 22px;font-size:16px;font-weight:600;text-decoration:none;transition:transform .2s,background-color .2s,box-shadow .2s;display:inline-flex}.button:active{transform:scale(.97)}.button-primary{background:var(--glow);color:var(--on-glow);box-shadow:0 10px 30px -12px color-mix(in srgb, var(--glow) 70%, transparent)}.button-primary:hover{box-shadow:0 14px 36px -10px color-mix(in srgb, var(--glow) 90%, transparent)}.button-glass{color:#fff;-webkit-backdrop-filter:blur(16px)saturate(1.4);background:#ffffff24;box-shadow:inset 0 0 0 1px #ffffff47}.button-glass:hover{background:#ffffff38}.button-quiet{color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}.button-quiet:hover{background:var(--sky-raised)}.button-large{min-height:54px;padding:0 32px;font-size:18px}.controls{flex-wrap:wrap;gap:14px 36px;margin-top:28px;display:flex}.choice{border:0;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;display:flex}.choice legend,.choice .legend{float:left;color:var(--muted);margin-right:10px;padding:0;font-size:15px}.choice label{position:relative}.choice input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.choice label span,.chip{box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:5px 14px;font-size:15px;line-height:1.6;transition:background-color .2s,color .2s,box-shadow .2s;display:inline-block}.choice label:hover span,.chip:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 40%, transparent)}.choice input:checked+span,.chip[aria-pressed=true],.chip[aria-checked=true]{background:var(--text);color:var(--sky);box-shadow:none}.choice input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}.aside{max-width:var(--measure);color:var(--muted);margin:18px 0 0;font-size:15px;line-height:1.7}.de-screen{touch-action:pan-y;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.de-window{opacity:0;pointer-events:none;transition:opacity .9s,scale .6s cubic-bezier(.2,.9,.3,1.2);position:absolute;top:0;left:0}.de-window[data-type=widget],.de-window[data-type=overlay]{scale:.9}.de-window.is-shown{opacity:1;scale:1}.de-window[data-type=desktop]{transition-duration:1.4s}.de-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.hero{padding:0;position:relative}.desk{color:#fff;background:#10162c url(/horizon.jpg) 50%/cover no-repeat;height:100svh;min-height:600px;max-height:1100px;position:relative}[data-appearance=light] .desk{background-image:url(/horizon-day.jpg)}.menubar{z-index:5000;-webkit-backdrop-filter:blur(24px)saturate(1.6);text-shadow:0 1px 2px #00000040;background:#0e122847;justify-content:space-between;align-items:center;height:30px;padding:0 10px 0 14px;font-size:13.5px;line-height:1;display:flex;position:absolute;inset:0 0 auto}[data-appearance=light] .menubar{color:#111838;text-shadow:none;background:#f6f8ff80}.menubar-menus,.menubar-status{align-items:center;gap:2px;height:100%;display:flex}.menubar a,.status-item,.menubar-clock{height:24px;color:inherit;font:inherit;white-space:nowrap;background:0 0;border:0;border-radius:5px;align-items:center;gap:7px;padding:0 9px;text-decoration:none;display:inline-flex}.menubar a:hover,.status-item:hover,.status-item[aria-expanded=true]{background:#fff3}[data-appearance=light] .menubar a:hover,[data-appearance=light] .status-item:hover,[data-appearance=light] .status-item[aria-expanded=true]{background:#1118381a}.menubar-app{font-weight:700}.status-item{cursor:default}.menubar-clock{font-variant-numeric:tabular-nums;cursor:default}@media (width<=420px){.menubar-date{display:none}}.language-glyph{border:1.5px solid;border-radius:4px;place-items:center;min-width:18px;height:16px;padding:0 3px;font-size:10.5px;font-weight:700;line-height:1;display:inline-grid}.icon-sun{display:none}[data-appearance=light] .icon-sun{display:block}[data-appearance=light] .icon-moon{display:none}.menu{z-index:5001;overscroll-behavior:contain;-webkit-backdrop-filter:blur(30px)saturate(1.8);color:#fff;min-width:232px;max-width:calc(100% - 16px);max-height:calc(100% - 43px);text-shadow:none;background:#262a42b8;border-radius:11px;padding:5px;font-size:13.5px;position:absolute;top:35px;overflow-y:auto;box-shadow:inset 0 0 0 .5px #ffffff40,0 0 0 .5px #00000080,0 18px 50px #0006}[data-appearance=light] .menu{color:#111838;background:#f6f7fccc;box-shadow:inset 0 0 0 .5px #fff9,0 0 0 .5px #0000002e,0 18px 50px #141e4640}.menu-label{color:#ffffff80;padding:6px 10px 3px;font-size:12px;font-weight:600}[data-appearance=light] .menu-label{color:#11183880}.menu-item{width:100%;height:24px;color:inherit;font:inherit;text-align:left;cursor:default;background:0 0;border:0;border-radius:5px;align-items:center;gap:6px;padding:0 10px 0 6px;display:flex}.menu-item:before{content:"";text-align:center;width:14px;font-size:12px}.menu-item[aria-checked=true]:before{content:"✓"}.menu-item:hover,.menu-item:focus-visible{color:#fff;background:#3a67f0;outline:none}@media (pointer:coarse){.menu{border-radius:14px;min-width:248px;padding:6px}.menu-item{border-radius:8px;height:40px;padding-right:14px;font-size:16px}.menu-item:before{width:18px}.menu-label{padding:10px 10px 4px;font-size:13px}}.menu-separator{background:#ffffff24;height:1px;margin:5px 10px}[data-appearance=light] .menu-separator{background:#1118381a}.desk-copy{left:var(--gutter);z-index:1500;max-width:min(640px, calc(100% - 2 * var(--gutter)));pointer-events:none;text-shadow:0 1px 3px #080c224d,0 2px 30px #080c2273;position:absolute;bottom:max(33%,200px)}[data-appearance=light] .desk-copy{text-shadow:0 1px 3px #10245a73,0 2px 30px #10245a80}[data-appearance=light] .button-glass{background:#111e503d;box-shadow:inset 0 0 0 1px #fff6}.desk-copy h1{letter-spacing:-.02em;font-size:clamp(58px,9.4vw,138px);line-height:1.02}:lang(en) .desk-copy h1{letter-spacing:-.03em;font-size:clamp(50px,6.6vw,100px);line-height:.98}:lang(en) .desk-copy{max-width:min(720px, calc(100% - 2 * var(--gutter)))}.lede{opacity:.92;max-width:24em;margin:22px 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.65}.desk-actions{pointer-events:auto;flex-wrap:wrap;gap:12px;margin-top:30px;display:flex}.desk-hint{right:var(--gutter);z-index:1500;-webkit-backdrop-filter:blur(14px);color:#ffffffdb;pointer-events:none;background:#080c2257;border-radius:10px;max-width:26em;margin:0;padding:8px 14px;font-size:13.5px;line-height:1.6;position:absolute;bottom:18px}@media (prefers-reduced-motion:no-preference){.desk-copy>*,.menubar,.desk-hint{animation:1s cubic-bezier(.2,.8,.2,1) both arrive}.menubar{animation-name:drop;animation-duration:.7s}.desk-copy h1{animation-delay:.35s}.lede{animation-delay:.55s}.desk-actions{animation-delay:.7s}.desk-hint{animation-delay:2.4s}}@keyframes arrive{0%{opacity:0;filter:blur(6px);translate:0 18px}}@keyframes drop{0%{translate:0 -100%}}main{overflow-x:clip}.chapter{max-width:1320px;padding:clamp(100px, 12vw, 160px) var(--gutter) 0;margin:0 auto}.chapter-head h2{max-width:12em;font-size:clamp(40px,5.8vw,80px);line-height:1.08}:lang(en) .chapter-head h2{max-width:14em;font-size:clamp(36px,4.6vw,66px);line-height:1.04}:lang(en) .chapter-download h2{font-size:clamp(40px,6vw,84px)}.chapter-head p{max-width:var(--measure);color:var(--muted);margin:26px 0 0;font-size:clamp(17px,1.4vw,19px)}.chapter-head p+p{margin-top:14px}@media (width>=1100px){.chapter>.chapter-head,.chapter-pets>.chapter-head{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end;column-gap:clamp(40px,6vw,96px);display:grid}.chapter>.chapter-head>p,.chapter-pets>.chapter-head>p{grid-column:2;margin-top:0}.chapter-pets>.chapter-head>h2{grid-row:span 2;align-self:end}}.screen{margin:clamp(44px,6vw,72px) 0 0;padding-bottom:34px;position:relative}.screen:after{content:"";opacity:.85;background:linear-gradient(90deg,#3ec6d0,#4a6cf7 55%,#7b52ea);border-radius:999px;width:clamp(80px,12%,180px);height:8px;position:absolute;bottom:0;left:50%;translate:-50%;box-shadow:0 -16px 40px 6px #4a6cf74d}.screen-glass{aspect-ratio:16/9;border-radius:var(--radius-screen);box-shadow:0 0 0 1px var(--line), 0 0 0 7px var(--sky-deep), 0 0 0 8px var(--line), var(--screen-shadow);background:#05060d 50%/cover no-repeat;transition:box-shadow .8s;position:relative}.screen-wide .screen-glass{aspect-ratio:2.2}#nebula-screen,#power-screen{background-image:url(/nebula.jpg)}#widgets-screen{background-image:url(/horizon.jpg)}[data-appearance=light] #nebula-screen,[data-appearance=light] #power-screen{background-image:url(/nebula-light.jpg)}[data-appearance=light] #widgets-screen{background-image:url(/horizon-day.jpg)}.screen-fixed{aspect-ratio:auto;transform-origin:0 0}.screen:has(.screen-fixed){overflow:visible}.monitors{grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,32px);display:grid}.monitors .screen-glass{aspect-ratio:16/10}.widget-stage .notes{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(24px,4vw,56px);margin:40px 0 0;display:grid}.notes dt,.rules dt{font-weight:700}.notes dd,.rules dd{color:var(--muted);margin:4px 0 0;font-size:15.5px;line-height:1.7}.chapter-pets{max-width:none;padding-inline:0}.chapter-pets .chapter-head{max-width:1320px;padding-inline:var(--gutter);margin:0 auto}.pet-strip{border-bottom:1px solid var(--line);height:210px;margin-top:8px}.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:clamp(40px,6vw,96px);display:grid}.rules{max-width:var(--measure);gap:18px;margin:32px 0 0;display:grid}.rules>div{border-left:2px solid var(--line);padding-left:16px}.power-demo .screen{margin-top:0}.power-readout{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-top:22px;display:flex}.fps{color:var(--muted);margin:0;font-size:15px}.fps output{min-width:2ch;color:var(--text);font-family:var(--serif);font-variant-numeric:tabular-nums;text-align:right;font-size:34px;font-weight:900;display:inline-block}.playground{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start;gap:clamp(20px,3vw,40px);margin-top:clamp(44px,6vw,72px);display:grid}.editor{box-shadow:0 0 0 1px var(--line), var(--screen-shadow);color:#d9e1ff;background:#0a0f28;border-radius:12px;overflow:hidden}.editor-bar{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;height:40px;padding:0 10px 0 16px;font-size:13px;display:flex}.editor-file{color:#d9e1ff99;font-family:var(--mono)}.editor-reset{color:inherit;font:inherit;cursor:pointer;background:#ffffff14;border:0;border-radius:6px;padding:3px 10px}.editor-reset:hover{background:#ffffff24}.editor-body{height:520px;position:relative;overflow:auto}.editor-highlight,.editor-body textarea{font:13px/1.65 var(--mono);tab-size:2;white-space:pre;overflow-wrap:normal;border:0;margin:0;padding:16px 18px 40px}.editor-layer{width:max-content;min-width:100%;min-height:100%;position:relative}.editor-highlight{pointer-events:none}.editor-body textarea{resize:none;color:#0000;caret-color:#fff;background:0 0;outline:none;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.editor-body textarea::selection{background:#7b93ff59}.editor-body:focus-within{box-shadow:inset 0 0 0 2px var(--focus)}.tok-comment{color:#6e7aa8;font-style:italic}.tok-string{color:#ffc998}.tok-number{color:#ff9eb8}.tok-keyword{color:#a8b8ff}.tok-api{color:#7ee0d6}.preview .screen{margin-top:0}#editor-screen .de-window{transition:none}.terminal{height:172px;box-shadow:0 0 0 1px var(--line);color:#c9d2f5;white-space:pre-wrap;word-break:break-word;background:#060918;border-radius:12px;margin:18px 0 0;padding:14px 16px;font-size:12.5px;line-height:1.7;overflow:auto}.terminal .dim{color:#6c77a3}.terminal .ok{color:#8be0a4}.terminal .error{color:#ff8a8a}.aside code{background:var(--sky-raised);border-radius:5px;padding:1px 6px;font-size:.92em}.steps{counter-reset:step;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);margin:clamp(72px,9vw,120px) 0 0;padding:0;list-style:none;display:grid}.steps li{counter-increment:step;min-width:0}.steps h3{align-items:baseline;gap:12px;font-size:30px;display:flex}.steps h3:before{content:counter(step);color:var(--brand);font-size:18px}.steps pre{background:var(--sky-raised);box-shadow:inset 0 0 0 1px var(--line);border-radius:10px;margin:16px 0 0;padding:12px 14px;font-size:13px;line-height:1.6;overflow-x:auto}.steps p{color:var(--muted);margin:14px 0 0;font-size:15.5px;line-height:1.7}.developer-links{flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:clamp(48px,6vw,72px);display:flex}.developer-links code{color:var(--muted);font-size:14px}.chapter-download{text-align:center;flex-direction:column;align-items:center;padding-bottom:clamp(110px,14vw,180px);display:flex}.download-icon{filter:drop-shadow(0 24px 40px #4a6cf759);width:128px;height:128px}.chapter-download h2{margin-top:28px;font-size:clamp(44px,7vw,96px);line-height:1.05}.chapter-download>p{max-width:30em;color:var(--muted);margin:24px 0 36px}.chapter-download .aside{margin-top:22px}.footer{max-width:1320px;padding:28px var(--gutter) 40px;border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;margin:0 auto;font-size:14px;display:flex}.footer-brand{color:var(--text);align-items:center;gap:10px;font-weight:700;display:flex}.footer nav{flex-wrap:wrap;gap:10px 22px;display:flex}.footer a{text-decoration:none}.footer a:hover{color:var(--text)}.footer p{margin:0}@media (width<=960px){.split,.playground,.widget-stage .notes,.steps{grid-template-columns:minmax(0,1fr)}.editor-body{height:420px}}@media (width<=720px){.menubar-menus a:not(.menubar-app){display:none}.desk-copy{bottom:max(31%,180px)}.desk-hint{display:none}.screen-wide .screen-glass{aspect-ratio:4/3}.monitors{gap:10px}.monitors .screen:after{height:5px}.pet-strip{height:200px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.de-window,.button,body{transition:none}.de-window[data-type=widget],.de-window[data-type=overlay]{scale:1}}