*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--red: #C41E3A;--gold: #C99B3C;--cream: #F0EBE0;--callout-bg: #F5F1E8;--bezel: #111111;--font-ui: "Inter", -apple-system, sans-serif;--font-display: "EB Garamond", Georgia, serif}html,body,#root{height:100%}body{background:var(--cream);font-family:var(--font-ui);color:var(--red);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:var(--font-ui);cursor:pointer;border:none;background:none}.appShell{min-height:100vh;display:grid;grid-template-rows:auto 1fr;padding-bottom:16px}.guideStage{min-height:0;display:flex;align-items:center;justify-content:center}.guideHeader{position:relative;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 28px 8px}.menuToggle{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--red);transition:opacity .15s}.menuToggle:hover{opacity:.65}.menuToggle svg{transition:transform .2s}.menuToggle[aria-expanded=true] svg{transform:rotate(180deg)}.navCluster{display:flex;align-items:center;gap:16px;justify-self:end}.guideContext{justify-self:center;min-width:0;max-width:360px;text-align:center}.guideContextSection{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#c41e3a7a;line-height:1.2}.guideContextTitle{margin-top:2px;font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.1;color:var(--red);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.navBtn{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--red);transition:opacity .15s}.navBtn:hover:not(:disabled){opacity:.65}.navBtn:disabled{opacity:.28;cursor:default}.pageCounter{font-size:13px;font-weight:400;letter-spacing:.04em;color:var(--red);min-width:52px;text-align:center}.guideMenuWrapper{position:absolute;top:calc(100% + 6px);left:32px;z-index:50}.guideMenu{background:#fff;border:1px solid rgba(196,30,58,.18);border-radius:6px;box-shadow:0 8px 32px #00000024;padding:8px 0;min-width:260px;max-width:320px}.menuSection{padding:0;display:grid;grid-template-columns:1fr 36px;align-items:stretch}.menuSection+.menuSection{border-top:1px solid rgba(196,30,58,.1)}.menuSectionBtn{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;width:100%;padding:9px 18px;color:var(--red);text-align:left;transition:background .12s}.menuExpandBtn{display:grid;place-items:center;color:var(--red);border-left:1px solid rgba(196,30,58,.08);transition:background .12s}.menuExpandBtn:hover{background:#c41e3a0d}.menuExpandBtn svg{transition:transform .16s ease}.menuSection.expanded .menuExpandBtn svg{transform:rotate(90deg)}.menuSectionBtn:hover,.menuSection.active .menuSectionBtn{background:#c41e3a0d}.menuSectionTitle{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}.menuSectionMeta{font-size:10px;letter-spacing:.04em;color:#c41e3a73;white-space:nowrap}.menuStepList{grid-column:1 / -1;padding:0 0 8px}.menuSubsectionList{grid-column:1 / -1;padding:2px 0 8px}.menuSubsection+.menuSubsection{margin-top:2px}.menuSubsectionBtn{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;width:100%;padding:6px 18px 6px 24px;color:var(--red);text-align:left;font-size:11px;font-weight:600;letter-spacing:.04em;transition:background .12s}.menuSubsectionBtn:hover,.menuSubsection.active .menuSubsectionBtn{background:#c41e3a0b}.menuStepBtn{display:flex;align-items:center;gap:10px;width:100%;padding:5px 18px 5px 34px;font-size:12px;font-weight:400;color:var(--red);text-align:left;transition:background .12s}.menuStepBtn:hover{background:#c41e3a0d}.menuStepBtn.active{font-weight:500}.menuStepNum{font-size:10px;opacity:.5;min-width:18px}.menuActiveDot{width:5px;height:5px;border-radius:50%;background:var(--red);flex-shrink:0;margin-left:auto}.deviceWrap{position:relative;width:min(96vw,960px,calc((100svh - 64px) * 902 / 1317));aspect-ratio:902 / 1317}.deviceWrap.introStep{animation:deviceIntroIn 1.2s cubic-bezier(.22,1,.36,1) both}.deviceWrap.step-open-home-assistant{animation:deviceIntroIn 1.3s cubic-bezier(.22,1,.36,1) both}.screenSlot{position:absolute;left:7.32%;top:11.01%;width:81.04%;height:73.73%;overflow:hidden;z-index:1;background:#000}.screenImg{width:100%;height:100%;object-fit:fill;display:block}.deviceWrap.step-roon-01 .screenImg{animation:screenSoftIn .56s ease both}.frameOverlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3;display:block}.overlayLayer{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.overlayLayer:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:#0000;pointer-events:none}.overlayLayer.showIntroDim:before{animation:introDimIn .77s ease .98s both}.step-roon-03 .overlayLayer:before{background:#00000057}.step-roon-01 .overlayLayer:before{animation:roonDimFade 6.5s ease both}.step-top-lights-strip .overlayLayer:before{background:#00000047}.highlight{position:absolute;transform:translate(-50%,-50%);border:2.5px solid var(--red);box-shadow:0 0 0 9999px #0000006b;animation:highlightBreathe 2.6s ease-in-out infinite}.highlight.circle{border-radius:50%}.highlight.roundedRect{border-radius:10px}.highlight.subtle{border-color:#c41e3ae6;box-shadow:0 0 0 2px #f5f1e83d;animation:none}.highlight.gold{border-color:var(--gold);box-shadow:0 0 0 2px #c99b3c29;animation:goldHighlightPulse 3.2s ease-in-out infinite}.highlight.temporary{box-shadow:0 0 0 2px #f5f1e83d;animation:temporaryHighlight var(--highlight-duration, 2.6s) ease both}.highlight.temporaryGold{border-color:#c99b3c9e;box-shadow:0 0 0 1px #c99b3c1f;animation:temporaryGoldHighlight var(--highlight-duration, 4.2s) ease both}.highlightMount.softFade{animation:highlightMountFade .95s ease both}.frameHighlightLayer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none}.frameHighlightLayer .highlight{box-shadow:0 0 0 2px #f5f1e833;pointer-events:auto;cursor:pointer}.frameHighlightLayer .highlight.gold{box-shadow:0 0 0 2px #c99b3c29}.gestureCue{position:absolute;z-index:2;pointer-events:none;opacity:0}.gestureCue.swipe-down{width:2px;height:52px;background:linear-gradient(to bottom,rgba(196,30,58,0),var(--red));transform:translate(-50%,-10%);animation:swipeDownCue 1.8s cubic-bezier(.22,1,.36,1) .9s 5 both}.gestureCue.swipe-down:after{content:"";position:absolute;left:50%;bottom:-2px;width:13px;height:13px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:translate(-50%) rotate(45deg)}.callout{position:absolute;pointer-events:auto;background:var(--callout-bg);border:1.5px solid var(--red);border-radius:4px;padding:8px 12px 10px;box-shadow:0 4px 24px #0000002e;width:42%;z-index:2;animation:calloutSoftIn .63s ease 294ms both}.callout.intro{padding:13px 15px 15px;width:62%;box-shadow:0 14px 40px #00000052;opacity:0;animation:calloutIntroIn .91s cubic-bezier(.22,1,.36,1) 1.26s both}.callout.info{width:52%}.callout.secondaryNote{padding:9px 11px;border-color:#c41e3a9e;background:#f5f1e8f2;box-shadow:0 3px 18px #00000024}.callout.secondaryNote .calloutTitle{font-size:14px}.callout.secondaryNote .calloutBody{font-size:10.5px;line-height:1.42}.step-roon-01 .callout.secondaryNote{padding:7px 10px}.step-roon-01 .callout.secondaryNote .calloutBody,.step-dsp-settings .calloutBody{font-size:12px;line-height:1.25}.step-atmos-step-05 .callout,.step-dsp-settings .callout{padding:10px 12px}.step-atmos-step-05 .calloutBody,.step-dsp-settings .calloutBody{font-family:var(--font-display);font-size:16px;font-weight:700;line-height:1.15}.step-atmos-step-10 .callout.secondaryNote .calloutAction{display:flex;width:fit-content;margin-left:auto;margin-right:auto}.step-atmos-step-10 .frameHighlightLayer .highlight.gold{border:none;background:radial-gradient(circle,#c99b3c85,#c99b3c5c 42%,#c41e3a29 68%,#c41e3a00);filter:blur(1.5px);box-shadow:0 0 18px #c99b3c52;animation:doubleClickHighlight 1.85s ease-in-out infinite}.callout.exiting{animation:calloutSoftOut .54s ease both}.calloutLabel{font-size:8px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:3px;font-family:var(--font-ui)}.calloutTitle{font-size:17px;font-weight:700;color:var(--red);font-family:var(--font-display);line-height:1.15;margin-bottom:5px}.callout.intro .calloutTitle{font-size:24px}.calloutBody{font-size:11px;line-height:1.5;color:var(--red);font-family:var(--font-ui);font-weight:400}.callout.intro .calloutBody{font-size:11.5px;line-height:1.48}.calloutAction{display:inline-flex;align-items:center;justify-content:center;margin-top:12px;min-width:76px;min-height:28px;padding:6px 13px;border-radius:3px;background:var(--red);color:var(--callout-bg);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:background .28s ease,transform .28s ease}.calloutAction.secondary{display:flex;width:fit-content;max-width:100%;margin-top:10px;background:transparent;color:var(--red);border:1px solid rgba(196,30,58,.42)}.calloutAction.secondary:hover{background:#c41e3a14}.calloutAction:hover{background:#a81930;transform:translateY(-1px)}.calloutAction:focus-visible{outline:2px solid var(--callout-bg);outline-offset:-4px}.callout[data-arrow=bottom]:before,.callout[data-arrow=bottom]:after,.callout[data-arrow=top]:before,.callout[data-arrow=top]:after,.callout[data-arrow=left]:before,.callout[data-arrow=left]:after,.callout[data-arrow=right]:before,.callout[data-arrow=right]:after{content:"";position:absolute;pointer-events:none}.callout[data-arrow=bottom]:before,.callout[data-arrow=bottom]:after,.callout[data-arrow=top]:before,.callout[data-arrow=top]:after{left:var(--arrow-x)}.callout[data-arrow=bottom]:before{bottom:-9px;width:16px;height:9px;transform:translate(-50%);background:var(--red);clip-path:polygon(0 0,100% 0,50% 100%)}.callout[data-arrow=bottom]:after{bottom:-7px;width:12px;height:7px;transform:translate(-50%);background:var(--callout-bg);clip-path:polygon(0 0,100% 0,50% 100%)}.callout[data-arrow=top]:before{top:-9px;width:16px;height:9px;transform:translate(-50%);background:var(--red);clip-path:polygon(50% 0,100% 100%,0 100%)}.callout[data-arrow=top]:after{top:-7px;width:12px;height:7px;transform:translate(-50%);background:var(--callout-bg);clip-path:polygon(50% 0,100% 100%,0 100%)}.callout[data-arrow=left]:before{left:-9px;top:var(--arrow-x);width:9px;height:16px;transform:translateY(-50%);background:var(--red);clip-path:polygon(100% 0,100% 100%,0 50%)}.callout[data-arrow=left]:after{left:-7px;top:var(--arrow-x);width:7px;height:12px;transform:translateY(-50%);background:var(--callout-bg);clip-path:polygon(100% 0,100% 100%,0 50%)}.callout[data-arrow=right]:before{right:-9px;top:var(--arrow-x);width:9px;height:16px;transform:translateY(-50%);background:var(--red);clip-path:polygon(0 0,100% 50%,0 100%)}.callout[data-arrow=right]:after{right:-7px;top:var(--arrow-x);width:7px;height:12px;transform:translateY(-50%);background:var(--callout-bg);clip-path:polygon(0 0,100% 50%,0 100%)}.step-open-home-assistant .callout{animation:calloutHomeIn .98s cubic-bezier(.22,1,.36,1) 1.47s both}.step-open-home-assistant .highlight{animation:homeHighlightIn .49s ease 1.05s both,homeHighlightPulse 1.7s ease-in-out 1.54s infinite}.calloutToggle{justify-self:center;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#c41e3a73;border:1px solid rgba(196,30,58,.22);border-radius:3px;padding:3px 10px;transition:color .15s,border-color .15s}.calloutToggle:hover{color:var(--red);border-color:#c41e3a80}.calloutToggle.calloutHidden{color:#c41e3a47;border-color:#c41e3a24}.coordDot{position:absolute;width:10px;height:10px;border-radius:50%;background:gold;border:1.5px solid rgba(0,0,0,.7);transform:translate(-50%,-50%);z-index:10;pointer-events:none}.coordPanel{position:fixed;bottom:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;background:#000000e0;border:1px solid rgba(255,215,0,.25);border-radius:6px;padding:8px 14px;z-index:200;font-family:monospace}.coordAxis{display:flex;align-items:center;gap:6px}.coordAxisLabel{font-size:11px;font-weight:700;color:#ffd7008c;letter-spacing:.06em;text-transform:uppercase;width:10px}.coordVal{font-size:13px;font-weight:700;color:gold;min-width:38px;text-align:center}.nudgeBtn{font-size:12px;color:#ffd700b3;padding:2px 6px;border-radius:3px;transition:background .1s,color .1s;font-family:monospace}.nudgeBtn:hover{background:#ffd70026;color:gold}.coordDivider{width:1px;height:20px;background:#ffd70026;flex-shrink:0}.coordCopy{font-size:11px;color:#ffd70099;white-space:nowrap;-webkit-user-select:all;user-select:all}.coordCopyBtn{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#ffd7008c;border:1px solid rgba(255,215,0,.2);border-radius:3px;padding:3px 8px;font-family:var(--font-ui);transition:color .1s,border-color .1s}.coordCopyBtn:hover{color:gold;border-color:#ffd70080}.modeToggle{display:flex;gap:4px}.modeBtn{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#ffd70066;border:1px solid rgba(255,215,0,.15);border-radius:3px;padding:4px 8px;font-family:var(--font-ui);transition:color .15s,border-color .15s,background .15s}.modeBtn:hover{color:#ffd700b3;border-color:#ffd7004d}.modeBtn.active{color:gold;background:#ffd70026;border-color:#ffd70080}.devBadge{position:fixed;bottom:12px;right:12px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:#c41e3a1f;color:var(--red);border:1px solid rgba(196,30,58,.3);border-radius:4px;padding:4px 8px;pointer-events:none;z-index:100}@keyframes deviceIntroIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes introDimIn{0%{background:#0000}to{background:#0000005c}}@keyframes calloutIntroIn{0%{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes calloutSoftIn{0%{opacity:0}to{opacity:1}}@keyframes calloutSoftOut{0%{opacity:1}to{opacity:0}}@keyframes screenSoftIn{0%{opacity:0}to{opacity:1}}@keyframes calloutHomeIn{0%{opacity:0;transform:translate(-50%,-44%)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes highlightBreathe{0%,to{box-shadow:0 0 0 9999px #0000006b,0 0 #c41e3a57}50%{box-shadow:0 0 0 9999px #0000006b,0 0 0 10px #c41e3a00}}@keyframes highlightMountFade{0%{opacity:0}to{opacity:1}}@keyframes temporaryHighlight{0%{opacity:0;transform:translate(-50%,-50%) scale(.98)}18%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.98)}}@keyframes goldHighlightPulse{0%,to{opacity:.48;transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 1px #c99b3c14,0 0 10px #c99b3c14}50%{opacity:.72;transform:translate(-50%,-50%) scale(1.01);box-shadow:0 0 0 3px #c99b3c0d,0 0 14px #c99b3c24}}@keyframes doubleClickHighlight{0%,to{opacity:.26;transform:translate(-50%,-50%) scale(1);box-shadow:0 0 12px #c99b3c2e}14%{opacity:.78;transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 20px #c99b3c6b}28%{opacity:.28;transform:translate(-50%,-50%) scale(1)}42%{opacity:.78;transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 20px #c99b3c6b}58%{opacity:.26;transform:translate(-50%,-50%) scale(1)}}@keyframes returnHomeNoteFade{0%{opacity:0;transform:translateY(-4px)}12%,62%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2px)}}@keyframes roonDimFade{0%,68%{background:#00000057}to{background:#0000}}@keyframes temporaryGoldHighlight{0%{opacity:0;transform:translate(-50%,-50%) scale(.99)}24%,72%{opacity:.68;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.99)}}@keyframes swipeDownCue{0%{opacity:0;transform:translate(-50%,-30%) translateY(-18px)}18%,70%{opacity:1}to{opacity:0;transform:translate(-50%,-30%) translateY(38px)}}@keyframes homeHighlightIn{0%{opacity:0;box-shadow:0 0 0 9999px #0000004d,0 0 #c41e3a00}to{opacity:1;box-shadow:0 0 0 9999px #0000006b,0 0 0 9px #c41e3a52}}@keyframes homeHighlightPulse{0%,to{box-shadow:0 0 0 9999px #0000006b,0 0 0 5px #c41e3a61,0 0 22px #c41e3a6b}50%{box-shadow:0 0 0 9999px #0000006b,0 0 0 18px #c41e3a00,0 0 34px #c41e3a8a}}@media (prefers-reduced-motion: reduce){.deviceWrap.introStep,.deviceWrap.step-open-home-assistant,.overlayLayer.showIntroDim:before,.callout,.callout.intro,.step-open-home-assistant .callout,.highlight,.gestureCue.swipe-down{animation-duration:1ms;animation-delay:0ms;animation-iteration-count:1}}@media (max-width: 760px){.appShell{min-height:100svh;padding-bottom:10px}.guideHeader{grid-template-columns:1fr;gap:8px;padding:10px 16px 8px}.guideContext,.navCluster{justify-self:stretch}.guideContext{max-width:none}.guideContextTitle{white-space:normal}.navCluster{justify-content:center;gap:14px}.guideMenuWrapper{left:0}.guideStage{align-items:flex-start;padding-top:8px}.deviceWrap{width:min(96vw,calc((100svh - 112px) * 902 / 1317))}}