@font-face{font-family:Switzer Variable;src:url(/fonts/Switzer-Variable.woff2)format("woff2"),url(/fonts/Switzer-Variable.ttf)format("truetype");font-weight:100 900;font-style:normal;font-display:swap}@font-face{font-family:Aktiv Grotesk Ex Trial;src:url(/fonts/AktivGroteskEx_Trial_Bd.ttf)format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Headspace Apercu;src:url(/fonts/HeadspaceApercu-Light.otf)format("opentype");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Headspace Apercu;src:url(/fonts/HeadspaceApercu-Regular.otf)format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Headspace Apercu;src:url(/fonts/HeadspaceApercu-Medium.otf)format("opentype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Headspace Apercu;src:url(/fonts/HeadspaceApercu-Bold.otf)format("opentype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Headspace Apercu;src:url(/fonts/HeadspaceApercu-ExtraBold.otf)format("opentype");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:Headspace Apercu;src:url(/fonts/HeadspaceApercu-Black.otf)format("opentype");font-weight:900;font-style:normal;font-display:swap}:root{--hs-font:"Headspace Apercu", system-ui, sans-serif;--hs-foreground:#2d2c2b;--hs-foreground-weak:#44423f;--hs-foreground-weaker:#63605d;--hs-foreground-weakest:#a8a5a0;--hs-foreground-link:#0061ef;--hs-background:#fff;--hs-background-strong:#f9f4f2;--hs-surface-strong:#f9f4f2;--hs-border:#e2ded9;--hs-page-bg:#e2ded9;--hs-space-4:4px;--hs-space-8:8px;--hs-space-12:12px;--hs-space-16:16px;--hs-space-24:24px;--hs-space-32:32px;--hs-space-48:48px;--hs-heading-4xl:80px;--hs-heading-4xl-lh:1;--hs-heading-4xl-ls:-.03em;--hs-heading-3xl:64px;--hs-heading-3xl-lh:1;--hs-heading-3xl-ls:-.03em;--hs-heading-2xl:56px;--hs-heading-2xl-lh:1.1;--hs-heading-2xl-ls:-.03em;--hs-heading-xl:48px;--hs-heading-xl-lh:1.1;--hs-heading-xl-ls:-.03em;--hs-heading-l:40px;--hs-heading-l-lh:1.2;--hs-heading-l-ls:-.03em;--hs-heading-m:32px;--hs-heading-m-lh:1.2;--hs-heading-m-ls:-.03em;--hs-heading-s:24px;--hs-heading-s-lh:1.2;--hs-heading-s-ls:-.03em;--hs-label-l:20px;--hs-label-l-lh:1.2;--hs-label-l-ls:-.03em;--hs-label-m:18px;--hs-label-m-lh:1.2;--hs-label-m-ls:-.03em;--hs-label-s:16px;--hs-label-s-lh:1.2;--hs-label-s-ls:-.03em;--hs-label-xs:14px;--hs-label-xs-lh:1.2;--hs-label-xs-ls:-.03em;--hs-label-2xs:12px;--hs-label-2xs-lh:1.2;--hs-label-2xs-ls:-.03em;--hs-body-l:20px;--hs-body-l-lh:1.5;--hs-body-m:18px;--hs-body-m-lh:1.5;--hs-body-s:16px;--hs-body-s-lh:1.5;--hs-body-xs:14px;--hs-body-xs-lh:1.5;--hs-body-2xs:12px;--hs-body-2xs-lh:1.5;--hs-utility-l:14px;--hs-utility-l-ls:.04em;--hs-utility-m:12px;--hs-utility-m-ls:.04em;--hs-utility-s:10px;--hs-utility-s-ls:.04em}*,:before,:after{box-sizing:border-box}*{margin:0}body{-webkit-font-smoothing:antialiased;line-height:1.5;font-family:var(--hs-font)}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}.device{background:#e8e8e8;justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.chassis{background:linear-gradient(#f5f5f5 0%,#e9e9e9 100%);border:1px solid #00000014;border-radius:16px;width:100%;max-width:800px;padding:24px;box-shadow:0 20px 60px #00000026,0 8px 25px #0000001a,inset 0 2px #fffc,inset 0 -1px #0000000d,inset 2px 0 #fff6,inset -2px 0 #00000008}.header{border-bottom:1px solid #0000000f;align-items:center;gap:24px;margin-bottom:24px;padding-bottom:20px;display:flex}.speaker{background:linear-gradient(145deg,#e8e8e8 0%,#d8d8d8 100%);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;display:flex;box-shadow:inset 0 2px 6px #0000001f,inset 0 1px 2px #00000014,0 1px #fff9}.speakerGrille{background:linear-gradient(145deg,#c8c8c8 0%,#b0b0b0 100%);border-radius:50%;width:48px;height:48px;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #0003,inset 0 -1px 2px #ffffff26}.speakerGrille:before{content:"";filter:drop-shadow(0 .5px #ffffff4d);background-image:radial-gradient(circle,#666 1.2px,#0000 1.2px);background-position:0 0;background-size:5px 5px;position:absolute;inset:-2px}.speakerGrille:after{content:"";border-radius:50%;position:absolute;inset:0;box-shadow:inset 0 0 10px #00000026,inset 0 2px 4px #0000001a}.screen{background:#1a1a1a;border-radius:8px;flex:1;padding:16px 20px;position:relative;box-shadow:inset 0 2px 8px #00000080,inset 0 1px 2px #0000004d,0 1px #ffffff80}.screenContent{color:#fff}.screenLabel{letter-spacing:.15em;color:#666;margin-bottom:4px;font-size:.7rem;display:block}.screen h1{letter-spacing:-.02em;margin:0;font-size:3rem;font-weight:500;line-height:1.1}.screenIndicator{background:#ff4d00;border-radius:50%;width:6px;height:6px;animation:2s ease-in-out infinite pulse;position:absolute;top:12px;right:12px;box-shadow:0 0 8px #ff4d00}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.knobRow{gap:12px;display:flex}.knob{cursor:pointer;background:linear-gradient(145deg,#fff 0%,#e8e8e8 100%);border-radius:50%;width:44px;height:44px;transition:all .15s;position:relative;box-shadow:0 4px 8px #00000026,0 2px 4px #0000001a,inset 0 -2px 4px #0000000d,inset 0 2px 4px #fffc}.knob:hover{transform:scale(1.05);box-shadow:0 6px 12px #0000002e,0 3px 6px #0000001f,inset 0 -2px 4px #0000000d,inset 0 2px 4px #fffc}.knob:after{content:"";border-radius:50%;position:absolute;inset:8px;box-shadow:inset 0 1px 2px #0000001a}.knobBlue:after{background:linear-gradient(145deg,#4a6fa5 0%,#2d4a7c 100%)}.knobCream:after{background:linear-gradient(145deg,#e8dcc4 0%,#d4c4a8 100%)}.knobOrange:after{background:linear-gradient(145deg,#ff6b35 0%,#e54d00 100%)}.knobGreen:after{background:linear-gradient(145deg,#2dd4bf 0%,#14b8a6 100%)}.buttonGrid{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;display:grid}.button{color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;background:linear-gradient(#fff 0%,#f7f7f7 50%,#f0f0f0 100%);border:1px solid #0000000f;border-radius:12px;flex-direction:column;height:100%;min-height:120px;padding:16px;text-decoration:none;transition:all .1s;display:flex;position:relative;box-shadow:0 6px 12px #00000014,0 2px 4px #0000000f,0 1px #0000000a,inset 0 1px #ffffffe6,inset 0 -1px 2px #00000005}.button:hover{background:linear-gradient(#fff 0%,#fafafa 50%,#f5f5f5 100%);transform:translateY(-2px);box-shadow:0 8px 16px #0000001a,0 3px 6px #00000014,0 1px #0000000a,inset 0 1px #fff,inset 0 -1px 2px #00000005}.button:active{background:linear-gradient(#f0f0f0 0%,#f5f5f5 50%,#fafafa 100%);transform:translateY(1px);box-shadow:0 2px 4px #0000000f,0 1px 2px #0000000a,inset 0 2px 4px #0000000a,inset 0 1px 2px #00000005}.buttonTop{align-items:center;gap:10px;margin-bottom:8px;display:flex}.indicator{border-radius:50%;flex-shrink:0;width:10px;height:10px;box-shadow:0 1px 3px #0003,inset 0 1px 2px #ffffff4d}.indicator.blue{background:linear-gradient(145deg,#4a6fa5 0%,#3d5a87 100%);box-shadow:0 1px 3px #4a6fa566,inset 0 1px 2px #ffffff4d}.indicator.orange{background:linear-gradient(145deg,#ff6b35 0%,#e54d00 100%);box-shadow:0 1px 3px #ff6b3566,inset 0 1px 2px #ffffff4d}.indicator.cream{background:linear-gradient(145deg,#e8dcc4 0%,#d4c4a8 100%);box-shadow:0 1px 3px #c8b49666,inset 0 1px 2px #ffffff4d}.indicator.red{background:linear-gradient(145deg,#dc3545 0%,#b02a37 100%);box-shadow:0 1px 3px #dc354566,inset 0 1px 2px #ffffff4d}.indicator.green{background:linear-gradient(145deg,#2dd4bf 0%,#14b8a6 100%);box-shadow:0 1px 3px #2dd4bf66,inset 0 1px 2px #ffffff4d}.button h3{color:#333;letter-spacing:.01em;margin:0;font-size:.85rem;font-weight:600}.button p{color:#888;margin:auto 0 0;font-size:.7rem;line-height:1.4}.keyRow{gap:8px;padding:16px 0;display:flex}.key{cursor:pointer;background:linear-gradient(#fff 0%,#f5f5f5 100%);border:1px solid #0000000a;border-radius:8px;flex:1;height:48px;transition:all .1s;box-shadow:0 4px 8px #00000014,0 2px 4px #0000000a,inset 0 1px #ffffffe6,inset 0 -1px 2px #00000008}.key:hover{transform:translateY(-1px);box-shadow:0 6px 12px #0000001a,0 3px 6px #0000000f,inset 0 1px #ffffffe6,inset 0 -1px 2px #00000008}.key:active{transform:translateY(2px);box-shadow:0 1px 2px #0000000f,inset 0 2px 4px #0000000a}.footer{border-top:1px solid #0000000f;justify-content:flex-end;align-items:baseline;gap:8px;padding-top:16px;display:flex}.brand{color:#333;letter-spacing:.02em;font-size:1rem;font-weight:600}.model{color:#999;letter-spacing:.05em;font-size:.75rem;font-weight:400}@media (max-width:700px){.buttonGrid{grid-template-columns:1fr}.button{min-height:auto}}
