@font-face{font-family:Quicksand;font-weight:500;font-display:swap;src:url(/assets/quicksand-500-Dz_li2tu.woff2)format("woff2")}@font-face{font-family:Quicksand;font-weight:600;font-display:swap;src:url(/assets/quicksand-600-DZ7JKtsE.woff2)format("woff2")}@font-face{font-family:Quicksand;font-weight:700;font-display:swap;src:url(/assets/quicksand-700-BPJcYUyz.woff2)format("woff2")}@font-face{font-family:Work Sans;font-weight:400;font-display:swap;src:url(/assets/work-sans-400-CJAp3Fz3.woff2)format("woff2")}@font-face{font-family:Work Sans;font-weight:500;font-display:swap;src:url(/assets/work-sans-500-D7O8c0Is.woff2)format("woff2")}@font-face{font-family:Work Sans;font-weight:600;font-display:swap;src:url(/assets/work-sans-600-B-2u1GBV.woff2)format("woff2")}:root{--bg:#faf7f2;--surface:#fff;--muted-surface:#f1ece3;--line:#ede8de;--line-strong:#e1dacc;--text:#4a473f;--text-muted:#8a8478;--text-faint:#a39d8e;--sage:#8fb9a8;--sage-dark:#6f9e8b;--clay:#c9a99a;--bezel:#3b3934;--volume:#7fa8c9;--heading:"Quicksand", sans-serif}html,body{background:var(--bg);color:var(--text);margin:0;padding:0;font-family:Work Sans,sans-serif}button{cursor:pointer;color:var(--text);border:none;font-family:Work Sans,sans-serif}a{color:var(--sage-dark)}.brand{align-items:center;gap:9px;display:flex}.brand-name{font-family:var(--heading);letter-spacing:.5px;font-size:18px;font-weight:600}.brand-name span{color:var(--text-muted);font-weight:500}.header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:18px 32px;display:flex}.header-left{align-items:center;display:flex}.tagline{color:var(--text-muted);border-left:1px solid var(--line-strong);margin-left:14px;padding-left:14px;font-size:13px}.restart-buttons{gap:10px;display:flex}.tbtn{background:var(--muted-surface);border-radius:14px;align-items:center;gap:8px;height:40px;padding:0 16px;font-size:13px;font-weight:500;display:flex}.narrow-hint{color:#4f769a;background:#dce7f1;border-radius:12px;margin:14px 16px 0;padding:10px 14px;font-size:12.5px;font-weight:500}.narrow-actions{margin:12px 16px 0}.card-page{box-sizing:border-box;justify-content:center;align-items:center;min-height:100vh;padding:16px;display:flex}.card{box-sizing:border-box;background:var(--surface);border-radius:24px;flex-direction:column;gap:18px;width:520px;max-width:100%;padding:40px 44px;display:flex;box-shadow:0 14px 40px #4a473f1f}.card .brand-name{font-size:20px}.intro{margin:0;font-size:14.5px;line-height:1.6}.intro-detail{color:var(--text-muted);margin:0;font-size:13.5px;line-height:1.6}.intro-detail b{color:var(--text)}.primary{background:var(--sage);color:#fff;height:52px;font-family:var(--heading);border-radius:16px;margin-top:6px;font-size:16px;font-weight:600;box-shadow:0 6px 18px #8fb9a859}.primary.retry{height:48px;box-shadow:none;margin-top:0;font-size:15px}.secondary{background:var(--muted-surface);border-radius:14px;height:44px;padding:0 16px;font-size:13.5px;font-weight:500}.hint{color:var(--text-faint);text-align:center;font-size:12px}.notice{background:var(--muted-surface);border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.5}.card-title{font-family:var(--heading);font-size:16px;font-weight:600}.steps{flex-direction:column;gap:14px;margin:4px 0 0;padding:0;list-style:none;display:flex}.steps li{align-items:center;gap:12px;font-size:14px;display:flex}.steps li[data-state=pending]{color:var(--text-faint)}.step-icon{box-sizing:border-box;color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;display:flex}.step-icon.pending{border:3px solid var(--line-strong)}.step-icon.running{border:3px solid var(--line-strong);border-top-color:var(--sage-dark);border-right-color:var(--sage-dark);animation:.9s linear infinite spin}.step-icon.done{background:var(--sage)}.step-icon.failed{background:var(--clay)}@keyframes spin{to{transform:rotate(360deg)}}.demo-page{flex-direction:column;min-height:100vh;display:flex}.demo-body{flex:1;min-height:0;display:flex}.devices{flex:1;justify-content:center;align-items:flex-end;gap:56px;padding:24px 32px 40px;display:flex}.try-this{box-sizing:border-box;border-left:1px solid var(--line);width:300px;padding:28px 30px 28px 26px;font-size:13px;line-height:1.5}.try-this h2{font-family:var(--heading);margin:0 0 16px;font-size:16px;font-weight:700}.try-this ol{flex-direction:column;gap:16px;margin:0;padding:0;list-style:none;display:flex}.try-this li{align-items:flex-start;gap:12px;display:flex}.num{background:var(--sage);color:#fff;width:24px;height:24px;font-family:var(--heading);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12.5px;font-weight:700;display:flex}.stacked .demo-body{flex-direction:column}.stacked .devices{flex-direction:column;align-items:center;gap:30px;padding:22px 0}.stacked .try-this{border-left:none;width:auto;margin:0 16px 24px;padding:0}.device{flex-direction:column;align-items:center;gap:12px;display:flex;position:relative}.device-label{justify-content:space-between;align-items:center;transition:width .5s;display:flex}.device-name{font-family:var(--heading);white-space:nowrap;align-items:center;gap:10px;font-size:16px;font-weight:700;display:flex}.badge{letter-spacing:.3px;border-radius:999px;padding:3px 10px;font-family:Work Sans,sans-serif;font-size:11.5px;font-weight:600}.badge.parent{color:#4f7f6c;background:#dceae3}.badge.child{color:#4f769a;background:#dce7f1}.badge.unset{background:var(--line);color:var(--text-muted)}.pop-out{color:var(--text-muted);white-space:nowrap;background:0 0;align-items:center;gap:5px;padding:0;font-size:12px;display:flex}.bezel{background:var(--bezel);border-radius:34px;padding:14px;box-shadow:0 14px 40px #4a473f38}.bezel.landscape{border-radius:30px}.screen{background:var(--bg);border-radius:20px;transition:width .5s,height .5s;position:relative;overflow:hidden}.screen iframe{transform-origin:0 0;border:0;display:block}.placeholder{text-align:center;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;font-size:13px;display:flex;position:absolute;inset:0}.placeholder p{margin:0}.volume-overlay{box-sizing:border-box;width:44px;max-height:260px;color:var(--volume);background:#faf7f2f5;border-radius:22px;flex-direction:column;align-items:center;gap:10px;padding:12px 0;display:flex;position:absolute;top:12px;bottom:12px;right:12px;box-shadow:0 6px 22px #4a473f40}.volume-track{background:var(--line-strong);border-radius:4px;flex:1;width:8px;position:relative;overflow:hidden}.volume-level{background:var(--volume);border-radius:4px;position:absolute;bottom:0;left:0;right:0}.hw-buttons{gap:8px;display:flex}.hw{background:var(--muted-surface);border-radius:12px;align-items:center;gap:7px;height:38px;padding:0 12px;font-size:12.5px;font-weight:500;display:flex}.rotated-note{color:var(--text-muted);text-align:center;margin-top:4px;font-size:11.5px;line-height:1.45;position:absolute;top:100%}.stacked .rotated-note{margin-top:0;position:static}.single-page{flex-direction:column;min-height:100vh;display:flex}.single-page .header{padding:16px 18px}.single-body{flex:1;justify-content:center;align-items:center;padding:20px 24px;display:flex}.message{color:var(--text-muted);text-align:center;font-size:14px}