@import url("../assets/louhos-disclosure.css?v=1");
/* Product landing layout, matching Cue and the other Louhos product pages. */
:root{--bg:#151515;--surface:#1d1d1d;--raised:#242424;--border:#333;--text:#f2f2f2;--muted:#a8a8a8;--accent:#77161d;--accent-soft:#d9898f}
*{box-sizing:border-box}
body.docs-page{background:var(--bg);font:15px/1.5 Arial,Helvetica,sans-serif}
.docs-companion :is(.section,.module-download) p a:not(.landing-btn),.docs-companion :is(.section,.module-download) p a:not(.landing-btn):visited{color:var(--accent-soft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.docs-companion :is(.section,.module-download) p a:not(.landing-btn):hover{text-decoration-thickness:2px}
.docs-companion :is(.section,.module-download) p a:not(.landing-btn):focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px;border-radius:2px}
.docs-companion .shell{position:relative;isolation:isolate;width:min(var(--louhos-width-site,1180px),calc(100% - 40px));margin:auto;padding:28px 0 48px}
.docs-companion .shell:before{content:"";position:absolute;z-index:-1;top:110px;left:5%;width:85%;height:280px;background:radial-gradient(ellipse at 30% 45%,#77161d77,transparent 65%);filter:blur(65px);pointer-events:none}
.docs-companion .connect-nav{width:100%;padding-bottom:20px}
.docs-companion .intro{display:block!important;padding:78px 0 38px!important;border:0!important}
.docs-companion .intro h1{max-width:900px;margin:14px 0 22px;font-size:clamp(3rem,8vw,6rem)!important;font-weight:600;line-height:.98;letter-spacing:-.045em}
.docs-companion .intro .lead{max-width:650px;font-size:1.1rem;line-height:1.6;color:var(--muted)}
.landing-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.landing-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid #9d2029;border-radius:5px;background:var(--accent);color:#fff;text-decoration:none;font:inherit;font-weight:400;cursor:pointer}
.landing-btn.secondary{border-color:var(--border);background:var(--raised);color:var(--text)}
.landing-btn:hover,.landing-btn:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}
.module-download{padding:28px;margin:0;border:1px solid var(--border);border-radius:7px;background:var(--surface);scroll-margin-top:24px}
.download-heading{display:flex;justify-content:space-between;align-items:center;gap:28px}.download-heading h2{margin:0;font-size:1.5rem}
.download-heading .guide-version-field{margin:0;justify-items:end;flex-shrink:0}
.module-download>p{margin:20px 0 0;color:var(--muted)}
.download-release{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:36px;margin-top:28px;padding:28px 0;border-top:1px solid var(--border)}
.download-release-copy{min-width:0}.download-release h3{margin:0;font-size:1.2rem;font-weight:600}
.download-release p{max-width:660px;margin:16px 0 0;color:var(--muted);font-size:.9rem;line-height:1.6}
.download-release .download-release-version{margin:8px 0 0;font-size:.82rem}.download-release-version strong{margin-left:6px;color:var(--text);font-weight:400;font-family:ui-monospace,monospace}
.download-release .landing-actions{margin:0;align-items:center;gap:12px}
@media(max-width:850px){.download-release{grid-template-columns:minmax(0,1fr);gap:24px}}
.step .connect-disclosure-content p{margin:0}
.release-list{list-style:none;margin:0;padding:0}.version-row{display:grid;grid-template-columns:130px minmax(0,1fr);align-items:start;gap:24px;padding:20px 0;border-top:1px solid var(--border)}.version-row:first-child{padding-top:0;border-top:0}.version-row:last-child{padding-bottom:0}.version-row>div{display:grid;align-content:start;gap:8px}.version-row strong{font:.88rem/1.6 ui-monospace,monospace;color:var(--text)}.version-row small{display:block;margin:0;color:var(--muted);font-size:.75rem;line-height:1.5}.version-row p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.6}
@media(max-width:520px){.version-row{grid-template-columns:minmax(0,1fr);gap:12px}}
@media(max-width:650px){.module-download{padding:18px}.download-heading{align-items:start;flex-direction:column;gap:24px}.download-heading .guide-version-field{justify-items:start}.download-heading h2{font-size:1.25rem}}
.landing-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 42px}
.landing-features article{padding:20px;border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:5px;background:var(--surface)}
.landing-features article:nth-child(2){border-top-color:#73ac56}.landing-features article:nth-child(3){border-top-color:var(--accent-soft)}
.landing-features h2{margin:0;font-size:1rem;font-weight:600}.landing-features p{margin:8px 0 0;color:var(--muted);font-size:.88rem}
.docs-companion .layout{display:block!important;padding-top:18px!important}.docs-companion .toc{display:none!important}
.docs-companion .section{margin:18px 0 0!important;padding:24px!important;border:1px solid var(--border)!important;border-radius:7px;background:var(--surface)}
.docs-companion .layout main>[data-language]>.section:first-child{margin-top:0!important}
.docs-companion .section h2{font-size:1.4rem;font-weight:600}.docs-companion .step:first-child{border-top:0}
/* One spacing model for all setup steps; no collapsing paragraph margins. */
.steps{display:grid;gap:0;margin-top:24px}
.step{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;padding:24px 0;border-top:1px solid var(--border)}
.step-num{padding-top:2px;color:var(--accent-soft);font:700 .78rem/1.5 ui-monospace,monospace}
.step h3{font-size:1rem}.step p{font-size:.88rem}
.docs-companion .step>div{display:grid;align-content:start;gap:12px;min-width:0}
.docs-companion .step>div>*{margin:0}
.docs-companion .step>div>.landing-actions,.docs-companion .step>div>.connect-disclosure,.docs-companion .step>div>.tutorial-shot{margin-top:12px}
.docs-companion .step>div>.landing-actions:has(>[data-connect-account-settings][hidden]){display:none}
.docs-companion code{overflow-wrap:anywhere}.setup-anchor{scroll-margin-top:90px}
@media(max-width:650px){.docs-companion .shell{width:calc(100% - 24px)}.docs-companion .intro{padding-top:52px}.docs-companion .intro h1{font-size:clamp(2.8rem,12vw,4.5rem)}.landing-features{grid-template-columns:1fr;gap:10px}.docs-companion .section{padding:18px}.docs-companion .docs-current{display:none}}
.tutorial-shot{margin:18px 0 0;max-width:780px}.tutorial-shot img{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:5px}.tutorial-shot figcaption{margin-top:8px;color:var(--muted);font-size:.78rem}
.brand-notice{margin:16px 0 0;max-width:760px;color:var(--muted);font-size:.75rem;line-height:1.5}

/* Static Companion display examples, not interactive website controls. */
.control-guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin:28px 0}
.control-guide-item,.timer-guide-item{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:20px;margin:0;padding:20px 0;border-top:1px solid var(--border)}
.control-guide h4,.timer-guide h4{margin:0;font-size:1rem;font-weight:600}
.control-guide p,.timer-guide p{margin:8px 0 0;color:var(--muted);font-size:.88rem;line-height:1.5}
.companion-key-image{display:block;width:100px;height:100px;aspect-ratio:1/1;overflow:hidden}
.guide-version-field{display:grid;justify-items:start;gap:10px;margin:24px 0 16px}
.guide-section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;margin-bottom:20px}
.guide-section-head h2{margin:0}
.guide-section-head .guide-version-field{margin:0;justify-items:end;max-width:100%}
.guide-group{margin-top:32px;padding-top:28px;border-top:1px solid var(--border)}
.guide-group>h3{margin:0 0 12px;font-size:1.15rem;font-weight:600}
.guide-group>p{margin:12px 0 0}
.guide-shared-note{margin:32px 0 0;padding-top:24px;border-top:1px solid var(--border)}
.guide-version-field>span{color:var(--text);font-size:.88rem}
.guide-version-switch{font:14px/1.45 Arial,Helvetica,sans-serif}
.guide-version-switch .btn{box-sizing:border-box;font-family:inherit;font-weight:400;line-height:inherit;cursor:pointer}
/* The docs stylesheet forces .btn surfaces with !important. Override only this
   component so its unselected/selected states retain the shared mode-switch. */
.docs-companion .guide-version-switch .btn{border:0!important;border-radius:4px!important;background:transparent!important}
.docs-companion .guide-version-switch .btn[aria-pressed="true"]{background:var(--accent)!important;color:var(--ui-primary-text,#fff)}
.guide-version-switch .btn:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}
@media(max-width:650px){.guide-section-head{grid-template-columns:minmax(0,1fr);align-items:start;gap:18px}.guide-section-head .guide-version-field{justify-self:end}}
[data-guide-version][hidden]{display:none!important}
.timer-guide-item{min-width:0}
.interval-guide{margin:0;padding:28px 24px}
.interval-guide>.control-guide-item,.interval-guide>.timer-guide-item{border:0;padding:0}
.interval-control-example{display:flex;align-items:center;gap:12px;margin-top:12px;font:.85rem/1.5 ui-monospace,monospace;color:var(--text)}
.interval-control-example span{color:var(--muted)}
.interval-control-example b{color:var(--text);font-weight:500}
@media(max-width:650px){.interval-guide{padding:24px 20px}}
.timer-demo-state{display:block;width:100px;height:100px;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.timer-demo-state:disabled{cursor:default}
.timer-demo-state:not(:disabled):hover,.timer-demo-state:focus-visible,.timer-demo-state[aria-pressed="true"]{outline:2px solid var(--accent-soft);outline-offset:5px}
.interval-demo{margin:28px 0;border:1px solid var(--border);border-radius:5px;background:var(--surface)}
.interval-demo-panel{margin:0;padding:24px;border-bottom:1px solid var(--border)}
.interval-demo-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.interval-demo-heading strong,.interval-demo-product{font-size:1rem;font-weight:600}
.interval-demo-stage{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:stretch;gap:28px;margin-top:28px}
.interval-demo-source{width:100%;max-width:320px;justify-self:center}
.interval-demo-product{display:block;line-height:1.5}
.interval-demo-link{align-self:center;justify-self:center;color:var(--muted);font-size:1.5rem}
.interval-demo-target{display:grid;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;gap:20px;text-align:center}
.interval-demo-target p{margin:0;color:var(--muted);font-size:.88rem}
.interval-demo-now{margin-top:18px}.interval-demo-kicker{color:#79b8ca;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.interval-demo-now h4{margin:7px 0 2px;font-size:1.45rem;line-height:1.2}.interval-demo-now p{margin:0;color:var(--muted);font-size:.88rem}
.interval-demo-time{display:grid;place-items:center;min-height:124px;margin-top:14px;border:1px solid #333;border-radius:4px;background:#242424;color:#f2f2f2;font-size:3.25rem;font-weight:700;line-height:1;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.interval-demo-panel[data-phase="warning"] .interval-demo-time{border-color:#d6a84c;background:#352d1b;color:#f5d884}
.interval-demo-panel[data-phase="overdue"] .interval-demo-time{border-color:#b84a52;background:#35191c;color:#f3a2a7}
.interval-demo-heading .landing-actions{margin:0;gap:12px}
.cue-demo-source{min-width:0}.cue-demo-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0 0;padding:0;list-style:none}
.cue-demo-list>[data-cue-row="first"],.cue-demo-list>[data-cue-row="last"]{grid-column:1/-1}
.cue-demo-list>:is([data-cue-row="option1"],[data-cue-row="option2"]){grid-template-columns:34px minmax(0,1fr);align-content:center;min-width:0}
.cue-demo-list>:is([data-cue-row="option1"],[data-cue-row="option2"])>strong{overflow-wrap:anywhere}
.cue-demo-list>:is([data-cue-row="option1"],[data-cue-row="option2"])>small{grid-column:2}
.cue-demo-list>:is([data-cue-row="option1"],[data-cue-row="option2"])>small:empty{display:none}
.cue-demo-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:54px;padding:12px;border:1px solid var(--border);border-left:3px solid var(--border);border-radius:4px;background:#202020}
.cue-demo-row>span{color:var(--muted);font:.75rem ui-monospace,monospace}.cue-demo-row>strong{font-size:.9rem;font-weight:600}.cue-demo-row>small{font-size:.7rem;color:var(--muted)}
.cue-demo-row[data-active="true"]{background:#243449;border-left-color:#4f8fe8;border-left-width:5px}.cue-demo-row[data-active="true"]>small{color:#8bb8ff}
.cue-demo-row[data-flash="true"]{position:relative;overflow:hidden;isolation:isolate}
.cue-demo-row[data-flash="true"]::before{content:"";position:absolute;z-index:0;inset:0;border-radius:inherit;background:#4f8fe8;opacity:.4;transform:scaleX(0);transform-origin:left center;animation:cue-demo-fill 2.4s linear both}
.cue-demo-row[data-flash="true"]>*{position:relative;z-index:1}
@keyframes cue-demo-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
[data-cue-demo][data-last-command="reset"] .cue-demo-list{animation:cue-demo-reset .32s ease-out}
@keyframes cue-demo-reset{from{opacity:.45}to{opacity:1}}
@media(prefers-reduced-motion:reduce){[data-cue-demo][data-last-command="reset"] .cue-demo-list{animation:none}}
@media(prefers-reduced-motion:reduce){.cue-demo-row[data-flash="true"]::before{animation:none;display:none}}
.cue-demo [data-cue-status]{min-height:1.5em}
.cue-demo-row[data-next="true"]{border-color:#8bb8ff;background:#202020;box-shadow:0 0 0 1px #8bb8ff}.cue-demo-row[data-next="true"]>small{color:#8bb8ff}
.demo-deck{--deck-key-size:100px;display:grid;grid-template-columns:repeat(3,var(--deck-key-size));gap:12px;align-self:center;padding:20px 20px 28px;border:1px solid #3b3b3b;border-radius:14px;background:linear-gradient(145deg,#303030,#161616 55%);box-shadow:inset 0 1px 0 #ffffff12,0 4px 0 #101010,0 14px 28px #0004}
.demo-deck .timer-demo-state,.demo-deck-display,.demo-deck-blank{position:relative;isolation:isolate;display:block;width:var(--deck-key-size,100px);height:var(--deck-key-size,100px);overflow:hidden;border-radius:9px;background:#080808;box-shadow:0 0 0 3px #080808,0 1px 0 4px #ffffff08,0 5px 7px #0009}
/* Physical keycaps sit above the unchanged Companion LCD artwork. */
.demo-deck :is(.timer-demo-state,.demo-deck-display,.demo-deck-blank)::before{content:"";position:absolute;z-index:1;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,#ffffff0d,transparent 20%,transparent 78%,#00000020);box-shadow:inset 0 1px 1px #ffffff4d,inset 1px 0 1px #ffffff21,inset -1px 0 1px #ffffff12,inset 0 -2px 2px #0009,inset 0 0 0 1px #ffffff0c}
.demo-deck :is(.timer-demo-state,.demo-deck-display,.demo-deck-blank)::after{content:"";position:absolute;z-index:2;inset:2px;border-radius:7px;pointer-events:none;background:linear-gradient(145deg,#ffffff1c 0%,#ffffff08 32%,transparent 33%,transparent 100%);box-shadow:inset 0 1px 0 #ffffff12}
.demo-deck .companion-key-image{width:var(--deck-key-size);height:var(--deck-key-size)}
.demo-deck .timer-demo-state:not(:disabled):hover,.demo-deck .timer-demo-state[aria-pressed="true"]{outline:none}
.demo-deck .timer-demo-state:focus-visible{outline:2px solid #b8b8b8;outline-offset:5px}
.demo-deck .timer-demo-state{touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform 130ms cubic-bezier(.2,.8,.3,1),box-shadow 130ms ease}
.demo-deck .timer-demo-state::before,.demo-deck .timer-demo-state::after{transition:opacity 130ms ease,box-shadow 130ms ease}
.demo-deck .timer-demo-state:not(:disabled):active{transform:translateY(3px) scale(.96);transition-duration:35ms;box-shadow:0 0 0 3px #080808,0 1px 2px #000b}
.demo-deck .timer-demo-state:not(:disabled):active::before{transition-duration:35ms;box-shadow:inset 0 2px 5px #0009,inset 0 0 0 1px #ffffff12}
.demo-deck .timer-demo-state:not(:disabled):active::after{transition-duration:35ms;opacity:.35}
@media(prefers-reduced-motion:reduce){.demo-deck .timer-demo-state,.demo-deck .timer-demo-state::before,.demo-deck .timer-demo-state::after{transition:none}.demo-deck .timer-demo-state:not(:disabled):active{transform:none}}
.demo-deck-blank{background:linear-gradient(#111,#0b0b0b)}
.comms-demo-source{width:100%;max-width:360px;justify-self:center}
.comms-guide-item{grid-column:1/-1;grid-template-columns:212px minmax(0,1fr)}
.comms-guide-preview{display:flex;gap:12px}
@media(max-width:650px){.comms-guide-item{grid-template-columns:1fr}}
.comms-demo-room{margin-top:18px;border:1px solid var(--border);border-radius:5px;padding:20px;background:var(--raised,#242424)}
.comms-demo-room h4{margin:0;font-size:1.3rem}.comms-demo-room p{margin:5px 0 0;color:var(--muted);font-size:.82rem}
.comms-demo-person{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--border)}
.comms-demo-avatar{display:grid;place-items:center;flex:0 0 40px;height:40px;border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--text);font-weight:600}
.comms-demo[data-mic-open="true"] .comms-demo-avatar{border-color:#b84a52;color:#f3a2a7;background:#35191c}
.comms-demo-source .landing-actions{gap:8px;margin-top:16px}.comms-demo-source .landing-btn{font-size:.8rem}.comms-demo-source .comms-demo-note{font-size:.78rem;color:var(--muted);margin:16px 0 0}
@media(max-width:1000px){.interval-demo-stage{grid-template-columns:minmax(0,1fr)}.interval-demo-link{transform:rotate(90deg)}.interval-demo-target{grid-template-rows:auto auto auto}}
@media(max-width:480px){.demo-deck{--deck-key-size:80px;grid-template-columns:repeat(2,var(--deck-key-size));gap:10px;padding:14px 14px 22px;border-radius:12px}}
.cue-demo .control-guide{margin:0;padding:28px 24px}
.cue-demo .control-guide-item{padding:0;border:0}
@media(max-width:650px){.cue-demo .control-guide{padding:24px 20px}.cue-demo-row{gap:8px;padding:10px}}
@media(max-width:650px){.interval-demo-stage{grid-template-columns:minmax(0,1fr);gap:24px}.interval-demo-link{transform:rotate(90deg)}.interval-demo-target{grid-template-rows:auto auto auto}.interval-demo-panel{padding:20px}}
@media(max-width:850px){.control-guide{grid-template-columns:1fr}}
@media(max-width:520px){.control-guide-item,.timer-guide-item{gap:16px}}
/* One shared frame for the live simulation and its button reference. */
[data-demo-shell] [data-demo-guide]{margin:0;padding:28px 24px}
[data-demo-shell] [data-demo-guide]>figure{margin:0;padding:0;border:0;min-width:0}
[data-demo-shell] :is(.cue-demo-source,.interval-demo-source,.comms-demo-source){width:100%;max-width:360px;min-width:0;justify-self:center}
[data-demo-shell] .interval-demo-heading .landing-btn{min-height:40px;font-size:.85rem}
[data-demo-shell] .interval-demo-heading .landing-actions{gap:10px}
@media(max-width:650px){[data-demo-shell] [data-demo-guide]{padding:24px 20px}}