:root{--paper:oklch(98% .006 250);--ink:oklch(23% .025 253);--muted:oklch(46% .025 253);--blue:oklch(48% .21 263);--line:oklch(87% .016 250);--stage:oklch(90% .049 256)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.skip{position:absolute;left:20px;top:-80px;background:var(--paper);padding:12px;z-index:10}.skip:focus{top:10px}header,footer{max-width:1440px;margin:auto;padding:28px 5%;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:10px;align-items:center;font-size:20px;letter-spacing:-.8px;font-weight:600}.brand img{border-radius:10px;object-fit:cover}.brand b{color:var(--blue)}nav{display:flex;gap:32px;font-size:14px;font-weight:700}nav a:hover{text-decoration:underline;text-underline-offset:6px}.hero{max-width:1440px;margin:auto;display:grid;grid-template-columns:1fr 1fr;min-height:620px;padding:35px 5% 65px;align-items:center;gap:4%}.eyebrow{font-size:14px;font-weight:700;margin:0 0 25px;color:var(--blue)}h1{font-size:clamp(42px,5.2vw,78px);letter-spacing:-.065em;line-height:1.07;font-weight:600;margin:0 0 26px}.lede{font-size:19px;line-height:1.7;color:var(--muted);max-width:410px;margin:0 0 30px}.button{display:inline-flex;gap:32px;align-items:center;padding:17px 22px;background:var(--blue);color:var(--paper);border-radius:6px;font-size:15px;font-weight:700;transition:transform .2s}.button:hover{transform:translateY(-2px)}.caption{font-size:12px;margin-top:18px;color:var(--muted)}.showcase{background:var(--stage);min-height:510px;border-radius:50% 50% 8px 8px;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;padding:60px 25px 25px;overflow:hidden}.device{width:min(100%,415px);padding:19px 20px 12px;background:oklch(33% .023 250);border-radius:15px;box-shadow:0 3px 0 oklch(17% .015 250),0 14px 22px oklch(25% .025 250 / .18),inset 0 1px 1px oklch(65% .02 250);transform:rotate(-5deg);position:relative;z-index:2}.bezel{background:oklch(18% .01 250);border:7px solid oklch(19% .014 250);border-radius:5px;overflow:hidden;aspect-ratio:250/122}.bezel img{width:100%;height:100%;display:block;image-rendering:pixelated}.device-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;margin-top:12px;color:oklch(78% .014 250);font-weight:600}.stand{height:55px;width:100px;transform:skewX(-8deg);background:oklch(28% .023 250);margin-top:-8px;z-index:1}.shadow{width:65%;height:15px;background:oklch(40% .04 250 / .2);filter:blur(9px);margin-top:-8px;border-radius:50%}.demo-controls{margin-top:40px;display:flex;align-items:center;gap:18px;font-size:13px;font-weight:600;z-index:3}.toggle{display:flex;padding:4px;background:oklch(96% .013 250 / .65);border-radius:30px}.toggle button{border:0;background:none;border-radius:25px;padding:8px 16px;color:var(--muted);cursor:pointer;font-size:13px}.toggle button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.demo-note{font-size:11px;margin:17px 0 0;color:var(--muted);text-align:center}.strip{background:var(--blue);color:var(--paper);padding:30px 5%;display:flex;align-items:center;justify-content:center;gap:45px}.strip span{font-size:20px;font-weight:600;letter-spacing:-.5px}.strip p{font-size:14px;line-height:1.7;margin:0;max-width:390px}.how,.build{max-width:1296px;margin:auto;padding:100px 5%;display:grid;grid-template-columns:1fr 1fr;gap:9%}h2{font-size:clamp(33px,3.6vw,50px);font-weight:600;letter-spacing:-.05em;line-height:1.15;margin:0 0 22px}.section-intro,.build-heading>p:not(.eyebrow){font-size:17px;line-height:1.8;color:var(--muted);max-width:360px}.how ol{list-style:none;padding:0;margin:0}.how li{display:flex;gap:24px;padding:0 0 30px}.how li:last-child{padding-bottom:0}.step{font-size:14px;color:var(--blue);font-weight:700;padding-top:5px}h3{margin:0 0 10px;font-size:20px;font-weight:700;letter-spacing:-.6px}.how li p{font-size:15px;line-height:1.8;margin:0;color:var(--muted)}.build{border-top:1px solid var(--line);padding-top:75px;padding-bottom:80px}.prototype{display:inline-block;margin-top:15px;border:1px solid var(--line);padding:9px 12px;border-radius:5px;font-size:13px;font-weight:600}dl{margin:0}dl>div{padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:120px 1fr;gap:15px}dl>div:first-child{padding-top:0}dt{font-size:13px;color:var(--muted)}dd{font-size:15px;margin:0;font-weight:600;line-height:1.6}dd small{font-size:12px;font-weight:400;color:var(--muted)}.availability{font-size:13px;line-height:1.8;color:var(--muted);margin-top:24px}footer .brand{font-size:16px}footer p{font-size:12px;color:var(--muted)}@media(min-width:1450px){.hero{min-height:710px}.showcase{min-height:560px}}@media(max-width:800px){header{padding:20px 6%}nav{gap:20px;font-size:12px}.brand{font-size:18px}.hero{grid-template-columns:1fr;padding:35px 6% 45px;gap:32px}.lede{max-width:470px;font-size:17px}h1{font-size:clamp(45px,9vw,70px)}.showcase{min-height:430px;border-radius:8px;padding:40px 28px 20px}.device{max-width:370px}.strip{display:block;padding:28px 6%}.strip p{margin-top:10px}.how,.build{grid-template-columns:1fr;gap:35px;padding:60px 6%}.how ol{max-width:520px}footer{padding:24px 6%}footer p{max-width:115px;text-align:right;line-height:1.6}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}@media(max-width:380px){nav a:first-child{display:none}.device-label{font-size:8px}.demo-controls{gap:10px}dl>div{grid-template-columns:90px 1fr}.showcase{padding-inline:18px}}
.secondary-link{display:inline-block;font-size:14px;font-weight:700;margin:16px 0;color:var(--blue)}.product-photo{margin:0;min-width:0}.product-photo>img{display:block;width:100%;height:500px;object-fit:cover;object-position:center 42%;border-radius:10px}.product-photo figcaption{font-size:13px;line-height:1.65;color:var(--muted);margin-top:13px}.availability a,.guide a:not(.button),.caption a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}.guide{max-width:1120px;margin:auto;padding:45px 5% 70px}.guide-heading{max-width:790px;padding-bottom:35px}.guide-heading .lede{max-width:650px}.release-note{border-left:3px solid var(--blue);padding-left:18px;font-size:14px;line-height:1.8;max-width:670px;color:var(--muted);margin-top:28px}.guide-nav{display:flex;flex-wrap:wrap;gap:16px 28px;border-block:1px solid var(--line);padding:22px 0}.guide-section{display:grid;grid-template-columns:190px minmax(0,1fr);gap:35px;padding:65px 0;border-bottom:1px solid var(--line);scroll-margin-top:25px}.guide-label{font-size:14px;font-weight:700;color:var(--blue);padding-top:8px}.guide-section h2{font-size:38px}.guide-section p,.guide-section li{font-size:16px;line-height:1.85;color:var(--muted)}.guide-section ol{padding-left:22px}.guide-section li{padding-left:5px;margin-bottom:12px}.parts-list{list-style:none;margin:25px 0;padding:0}.parts-list li{padding:18px 0;border-bottom:1px solid var(--line);margin:0}.parts-list strong{display:block;color:var(--ink);font-size:17px}.parts-list span{display:block;margin-top:5px;font-size:15px}.guide-note{background:var(--stage);padding:16px 20px;border-radius:6px}.guide pre{background:oklch(94% .012 250);border:1px solid var(--line);border-radius:6px;padding:18px;overflow-x:auto;max-width:100%;line-height:1.85;font-size:13px}.guide code{font-family:ui-monospace,monospace;overflow-wrap:anywhere}.guide pre code{overflow-wrap:normal}.guide details{border-bottom:1px solid var(--line);padding:18px 0}.guide summary{font-size:17px;font-weight:600;cursor:pointer;line-height:1.5}.guide summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.guide h3{margin-top:32px}@media(max-width:800px){.product-photo>img{height:380px}.guide{padding:30px 6% 40px}.guide-section{grid-template-columns:1fr;gap:16px;padding:40px 0}.guide-section h2{font-size:32px}.guide-nav{font-size:13px;gap:14px 20px}.guide-heading h1{font-size:48px}}
.intro .secondary-link{margin-left:16px}@media(max-width:430px){.intro .secondary-link{display:block;margin-left:0}}
