:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--site-fit-scale:1;--site-fit-width:100%}html,body{background:#07100e;width:100%;height:100%;margin:0}.demo-page,.landing-page{width:100%;height:100%;margin:0}.demo-page{background-color:#07111f;background-image:radial-gradient(circle at 75% 0,#123754 0,#0000 34%),none;background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;grid-template-rows:auto minmax(0,1fr);display:grid;overflow:hidden}.demo-shell{--demo-frame-scale:1;width:100%;height:100%;min-height:0;position:relative;overflow:hidden}.demo-frame-stage{width:var(--demo-base-width,1518px);height:var(--demo-base-height,801px);transform:translateX(-50%) scale(var(--demo-frame-scale));transform-origin:top;position:absolute;top:0;left:50%}.demo-frame{border:0;width:100%;height:100%;display:block}.demo-page{grid-template-rows:auto auto minmax(0,1fr)}.demo-page.has-lesson-callout{grid-template-rows:auto auto auto minmax(0,1fr)}.demo-page.has-bottom-nav{grid-template-rows:auto auto minmax(0,1fr) auto}.demo-page.has-lesson-callout.has-bottom-nav{grid-template-rows:auto auto auto minmax(0,1fr) auto}.demo-accessibility{box-sizing:border-box;width:var(--site-fit-width);zoom:var(--site-fit-scale);color:#e9f7f1;background:#091827;flex-wrap:wrap;align-items:center;gap:6px;padding:5px 12px;font:14px system-ui;display:flex}.demo-accessibility button{font:inherit;color:inherit;cursor:pointer;background:#142a40;border:1px solid #36536e;border-radius:6px;padding:4px 9px}.demo-accessibility button:disabled{opacity:.4}.demo-accessibility span:not(:first-child){margin-left:16px}.demo-shell.zoom-enabled{overflow:auto}.demo-scroll-size{width:calc(var(--demo-base-width) * var(--demo-frame-scale));height:calc(var(--demo-base-height) * var(--demo-frame-scale));margin:0 auto;position:relative}.zoom-enabled .demo-frame-stage{transform:scale(var(--demo-frame-scale));transform-origin:0 0;left:0}.demo-topbar{box-sizing:border-box;z-index:50;width:var(--site-fit-width);zoom:var(--site-fit-scale);color:#e9f7f1;background:#091827;border-bottom:1px solid #29435f;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:0 14px;font-family:system-ui,sans-serif;display:flex;position:relative}.demo-brand{color:#74efad;font-weight:850;text-decoration:none}.demo-nav{left:calc(100vw / var(--site-fit-scale) - 14px);align-items:center;gap:4px;display:flex;position:absolute;transform:translate(-100%)}.demo-nav>a,.demo-nav summary{color:#b8cad8;cursor:pointer;border-radius:7px;padding:7px 9px;font-size:12px;font-weight:800;text-decoration:none;list-style:none;display:block}.demo-lesson-callout{box-sizing:border-box;width:var(--site-fit-width);zoom:var(--site-fit-scale);color:#dce9f3;background:linear-gradient(90deg,#0b2d29,#10243a);border-bottom:1px solid #2d6e58;align-items:center;gap:18px;padding:11px 18px;font-family:system-ui,sans-serif;display:flex;position:relative}.demo-lesson-callout div{min-width:0}.demo-lesson-callout span{color:#74efad;letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:900;display:block}.demo-lesson-callout strong{color:#fff;margin-top:2px;font-size:15px;display:block}.demo-lesson-callout p{color:#b8cad8;margin:2px 0 0;font-size:12px}.demo-lesson-callout a{color:#74efad;background:#0b2d29;border:1px solid #74efad;border-radius:9px;flex:none;padding:9px 12px;font-size:12px;font-weight:900;text-decoration:none}.demo-lesson-callout a:hover,.demo-lesson-callout a:focus-visible{color:#07111f;background:#74efad;outline:none}.demo-lesson-callout.has-instructions{align-items:center;padding-top:8px;padding-bottom:8px}.demo-instructions{color:#b8cad8;gap:20px;margin:6px 0 0;padding-left:20px;font-size:11px;font-weight:750;display:flex}.demo-instructions li{white-space:nowrap;padding-left:2px}.demo-lesson-actions{left:calc(100vw / var(--site-fit-scale) - 18px);flex:none;align-items:center;gap:8px;width:max-content;display:flex;position:absolute;transform:translate(-100%)}.demo-lesson-actions a{white-space:nowrap}.demo-lesson-actions a.secondary{color:#8fd0ff;background:#10243a;border-color:#58b8ff}.demo-lesson-actions a.secondary:hover,.demo-lesson-actions a.secondary:focus-visible{color:#07111f;background:#8fd0ff}.demo-bottom-nav{box-sizing:border-box;width:var(--site-fit-width);zoom:var(--site-fit-scale);color:#b8cad8;background:#091827;border-top:1px solid #29435f;align-items:center;gap:12px;min-height:44px;padding:7px 14px;font-family:system-ui,sans-serif;display:flex;position:relative}.demo-bottom-nav a{color:#b8cad8;border:1px solid #29435f;border-radius:8px;padding:6px 9px;font-size:12px;font-weight:850;text-decoration:none}.demo-bottom-nav a:hover,.demo-bottom-nav a:focus-visible{color:#fff;background:#163049;border-color:#58b8ff;outline:none}.demo-bottom-nav a.next{left:calc(100vw / var(--site-fit-scale) - 14px);position:absolute;transform:translate(-100%)}.demo-nav summary::-webkit-details-marker{display:none}.demo-nav>a:hover,.demo-nav>a:focus-visible,.demo-nav summary:hover,.demo-nav summary:focus-visible,.demo-nav details[open] summary{color:#fff;background:#163049;outline:none}.demo-nav details{position:relative}.demo-nav-menu{background:#0b1b2b;border:1px solid #29435f;border-radius:11px;width:min(238px,100vw - 16px);padding:7px;position:absolute;top:calc(100% + 8px);left:auto;right:0;box-shadow:0 16px 38px #0009}.demo-nav-menu a{color:#b8cad8;border-radius:7px;padding:9px 10px;font-size:12px;font-weight:750;text-decoration:none;display:block}.demo-nav-menu a:hover,.demo-nav-menu a:focus-visible{color:#fff;background:#163049;outline:none}.landing-page{grid-template-rows:52px minmax(0,1fr);display:grid}.landing{color:#e9f7f1;place-content:center;gap:12px;min-height:100%;padding:24px;font-family:system-ui,sans-serif;display:grid}.landing p{color:#74efad;text-transform:uppercase;letter-spacing:.12em;margin:0;font-size:12px}.landing h1{margin:0;font-size:clamp(28px,5vw,56px)}.landing a{color:#07100e;background:#74efad;border-radius:5px;justify-self:start;padding:10px 14px;font-weight:750;text-decoration:none}.demo-links{flex-wrap:wrap;gap:10px;display:flex}