:root{--logo-casita-color:#18BCF2;--primary-color:#00bfff;--esphome-color:#00bfff;--secondary-color:#00979d;--text-color:#111;--background-color:#fff;--sidebar-background:#f3f6f6;--mobile-width-stop:1000px;--nav-height:50px;--nav-transition-up:transform 0.3s ease;--nav-transition-down:transform 0.1s ease-out;--max-page-width:1500px;--feature-card-bg:#fff;--feature-card-text:#111;--feature-icon-color:#00bfff;--btn-primary-color:#007BBB;--btn-primary-hover-color:#0399e1;--btn-secondary-color:transparent;--btn-secondary-hover-color:rgba(3, 199, 294, 0.1);--getting-started-bg:#f3f6f6;--getting-started-text:#333;--nav-bg:#fff;--nav-text:#333;--dropdown-bg:#fff;--dropdown-text:#333;--footer-bg:#111;--footer-text:#333;--border-color:#e0e0e0;--link-accent:#007070;--component-card-bg:#fff;--component-card-text:#333;--admonition-note-bg:#e7f2fa;--admonition-note-border:#3498db;--admonition-note-title:#3498db;--admonition-tip-bg:#e8f8e5;--admonition-tip-border:#2ecc71;--admonition-tip-title:#2ecc71}[data-theme=dark]{--primary-color:#1f2937;--text-color:#f1f1f1;--background-color:#181c20;--sidebar-background:#23272e;--feature-card-bg:#242424;--feature-card-text:#ffffff;--getting-started-bg:#23272e;--getting-started-text:#f1f1f1;--nav-bg:#222b36;--nav-text:#f1f1f1;--dropdown-bg:#23272e;--dropdown-text:#f1f1f1;--footer-bg:#181c20;--footer-text:#f1f1f1;--border-color:#333;--link-accent:#00a5a5;--component-card-bg:#23272e;--component-card-text:#f1f1f1;--admonition-note-bg:#22313a;--admonition-note-border:#5dade2;--admonition-note-title:#5dade2;--admonition-tip-bg:#1d2a1d;--admonition-tip-border:#58d68d;--admonition-tip-title:#58d68d;--logo-text-color:#FFFFFF}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;margin:0;scroll-padding-top:calc(var(--nav-height) + 10px)}body{font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif;line-height:1.6;color:var(--text-color);background-color:var(--background-color)}.body{visibility:initial}a{color:var(--link-accent);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6,.footer-heading,.getting-started-heading{font-family:Figtree,system,-apple-system,".sfnstext-regular",san francisco,roboto,segoe ui,helvetica neue,lucida grande,sans-serif;font-weight:600;margin:1em 0 .5em;color:var(--text-color)}h1{font-size:2.5em}h2{font-size:2em}h3{font-size:1.5em}p{margin-bottom:1em}ul,ol{margin:0 0 1em 1.5em}code{font-family:sfmono-regular,Consolas,liberation mono,Menlo,Courier,monospace;background-color:var(--sidebar-background);border-radius:3px;font-size:.9em}pre{background-color:var(--sidebar-background);padding:1em;border-radius:5px;overflow-x:auto;margin-bottom:1em}pre code{background-color:transparent;padding:0}img{max-width:100%;max-height:800px;height:auto;width:auto}.h-100{height:100%}.w-100{width:100%}.copy-link{background:0 0;border:none;cursor:pointer;padding-top:.3em;margin-left:0;opacity:50%;width:1em;height:1em;transform-origin:center 60%;transition:transform .5s ease}.copy-link:hover{transform:scale(1.5)}@keyframes spin{to{transform:scale(1.5)rotate(360deg)}}.branch-overlay{display:block;font-size:4em;color:#ff808080;z-index:99999;position:fixed;bottom:0;right:100px}.spin-once{animation:spin .5s linear}.external-link{background:0 0;border:none;cursor:pointer;padding-top:.5em;padding-bottom:0;margin:0;width:1.5em;height:1.5em}.sidebar-content{background-color:var(--sidebar-background);padding:1.5em;border-radius:5px}.sidebar-content.scroll-trap{top:var(--nav-height);max-height:calc(100vh - var(--nav-height) - 2em);position:sticky;overflow-y:auto;overflow-x:hidden;& h3 { margin-top: 0; }}.sidebar-logo{margin-bottom:1.5em}.sidebar-logo img{height:30px}.sidebar-search{margin-bottom:1.5em}.sidebar-search input{width:100%;padding:.5em;border:1px solid var(--border-color);border-radius:4px}.sidebar-nav h3{margin-top:0;margin-bottom:.5em}.sidebar-nav ul,.sidebar-nav ol{list-style:disc;margin-top:0;margin-right:0;margin-left:0;margin-bottom:.5em;& ul { list-style: none; margin-bottom: 0; margin-left: 0.75em; } & ol { list-style: none; margin-bottom: 0; margin-left: 0.75em; }}.sidebar-nav li{margin-bottom:1em;& li { margin-bottom: 0; }}.sidebar-nav a{display:block;padding:0;color:var(--link-accent)}.sidebar-nav a.active{font-weight:700;color:var(--primary-color)}.sidebar-contact{border-top:1px solid var(--border-color);padding-top:1.5em}.sidebar-social{list-style:none;margin:0}.sidebar-social li{margin-bottom:.5em}.sidebar-social a{display:flex;align-items:center}.sidebar-social i{margin-right:.5em}.page-toc{list-style-type:none;padding-left:0;margin-bottom:1.5rem;font-size:.9rem}.page-toc ul{list-style-type:none;padding-left:1rem;margin-top:.25rem}.toc-item{margin-bottom:.25rem}.toc-level-1>a{font-weight:600}.toc-level-2>a{font-weight:500}.toc-level-3>a,.toc-level-4>a,.toc-level-5>a,.toc-level-6>a{font-weight:400}.page-toc a{color:var(--text-color);display:block;padding:.2rem 0;text-decoration:none;border-left:2px solid transparent;padding-left:.5rem;transition:all .2s ease}.page-toc a:hover{color:var(--primary-color);border-left-color:var(--primary-color);text-decoration:none}.page-toc a.active{color:var(--primary-color);border-left-color:var(--primary-color);font-weight:600}.nav-container{background-color:var(--nav-bg);box-shadow:0 2px 4px rgba(0,0,0,.1);position:fixed;top:0;width:100%;z-index:1000;transition:var(--nav-transition-down)}.nav-container.nav-scrolling-up{transition:var(--nav-transition-up)}.nav-container.nav-hidden{transform:translateY(-100%)}.sticky-nav{max-width:var(--max-page-width);display:flex;justify-content:space-between;align-items:center;padding-top:.5em;padding-right:2em;padding-left:3em;padding-bottom:.5em;margin:0 auto;background-color:var(--nav-bg);color:var(--nav-text);box-shadow:0 2px 4px rgba(0,0,0,8%)}.sticky-nav button svg{height:1.1em;width:1.1em;margin-right:.5em;& path { fill: var(--text-color); }}.nav-logo img,.nav-logo svg{height:30px;padding:0;width:fit-content}.nav-links{display:flex;align-items:center}.hamburger-button{display:none;background:0 0;border:none;cursor:pointer;z-index:1001;padding:10px}.hamburger-button span{display:block;width:25px;height:3px;background-color:var(--nav-text);margin:5px 0;transition:transform .3s ease,opacity .3s ease}.hamburger-button[aria-expanded=true] span:nth-child(1){transform:translateY(8px)rotate(45deg)}.hamburger-button[aria-expanded=true] span:nth-child(2){opacity:0}.hamburger-button[aria-expanded=true] span:nth-child(3){transform:translateY(-8px)rotate(-45deg)}.toc-button{background:0 0;border:none;cursor:pointer;padding:10px;margin-right:10px;margin-bottom:-10px;color:var(--nav-text);font-size:1.5rem;display:none}.dropdown{position:relative;margin-right:1em}.dropbtn{background-color:transparent;color:var(--nav-text);border:none;cursor:pointer;padding:.5em 1em;font-size:1em}.dropdown-content{display:none;position:absolute;background-color:var(--dropdown-bg);min-width:200px;box-shadow:0 8px 16px rgba(0,0,0,.1);z-index:1;border-radius:4px}.dropdown-content a{color:var(--link-accent);padding:.75em 1em;display:block}.dropdown-content a:hover{background-color:var(--sidebar-background);color:var(--nav-text)}.dropdown:hover .dropdown-content{display:block}.nav-search{margin-left:20px;position:relative}#nav-search-container{position:relative;display:inline-block}.nav-search .pagefind-ui__form{margin:0}.nav-search .pagefind-ui__search-input{height:36px;padding:0 36px 0 12px;border-radius:18px;border:1px solid #ddd;font-size:14px;width:180px;transition:width .3s .1s;background-color:#f5f5f5}.nav-search .pagefind-ui__search-input:focus{width:220px;outline:none;border-color:#03a9f4}.search-clear-button{position:absolute;right:10px;top:8px;background:0 0;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:#666;font-size:12px;transition:background-color .2s,color .2s;z-index:10}.search-clear-button:hover{background-color:rgba(0,0,0,.1);color:#333}.nav-search .pagefind-ui__search-clear{width:36px;height:36px;background-position:50%;background-repeat:no-repeat;background-size:14px}.nav-search .pagefind-ui__drawer{position:absolute;top:var(--nav-height);right:0;width:400px;max-height:80vh;overflow-y:auto;background:var(--sidebar-background);color:var(--text-color);border-radius:4px;box-shadow:0 8px 16px rgba(0,0,0,.1);z-index:1002;padding:15px}#nav-search-results{display:none;position:absolute;top:var(--nav-height);right:0;width:400px;max-height:80vh;overflow-y:auto;background:var(--sidebar-background);color:var(--text-color);border-radius:4px;box-shadow:0 8px 16px rgba(0,0,0,.1);z-index:1002;padding:15px}.theme-toggle{margin-right:1rem;background:0 0;border:none;color:var(--text-color);cursor:pointer;padding:.5rem;border-radius:50%;transition:all .2s ease}.theme-toggle:hover{color:var(--link-accent);background:rgba(255,255,255,.1)}.theme-toggle .sun-icon,.theme-toggle .moon-icon{display:none}[data-theme=dark] .moon-icon,[data-theme=light] .sun-icon{display:block}[data-theme=dark]{.dark-invert img { filter: invert(1); } img.dark-invert { filter: invert(1.0); } .sticky-nav { background-color: #222b36; color: #f1f1f1; box-shadow: 0 2px 4px rgba(0,0,0,0.6); } .nav-links a, .dropbtn { color: #f1f1f1; } .nav-links a:hover, .dropbtn:hover { color: #fff; } .hamburger-button span { background-color: #f1f1f1; } .toc-button { color: #f1f1f1; } .content { background: #181c20; color: #ffffff; overflow: auto; } .dropdown-content { background: #23272e; color: #f1f1f1; box-shadow: 0 8px 16px rgba(0,0,0,0.7); } .dropdown-content a { color: #99e6fc; } .dropdown-content a:hover { background: #1f2937; color: #fff; } .footer, .footer-content { background: #181c20; color: #f1f1f1; } .footer a { color: #99e6fc; } .footer a:hover { color: var(--nav-text); } code, pre { background: #43474e; color: #e0e0e0; } .note, .tip, .warning, .caution, .important { background: #23272e; color: #fff; border-color: #00979d; } .overlay { background: rgba(20,20,20,0.7); } #nav-search-results, .nav-search .pagefind-ui__drawer { background: #23272e; color: #f1f1f1; } .feature-icon { color: var(--feature-icon-color) !important; } .feature-card h2, .feature-card h3, .feature-card p { color: var(--feature-card-text) !important; } .feature-card a:hover { color: var(--link-accent) !important; } .getting-started-block, .getting-started-grid > div { background: var(--getting-started-bg) !important; color: var(--getting-started-text) !important; border-color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }}.getting-started-heading,.footer-heading{font-size:1.5em;color:#fff}.page-container{display:flex;flex-direction:column;min-height:100vh;width:100%}main{max-width:var(--max-page-width);width:100%;margin:0 auto;padding:2em;margin-top:var(--nav-height);flex:1}.content-container{display:flex;gap:2em}.sidebar{background:var(--sidebar-background);width:300px;flex-shrink:0;background:var(--sidebar-background);color:var(--text-color);border-color:var(--border-color)}.sidebar-resource svg,.sidebar-resource img{height:.8em;width:.8em;margin-right:.5em;& path { fill: var(--link-accent); }}.content{flex-grow:1;overflow:hidden}.content svg{max-width:600px}.hero-container{display:flex;align-items:center}.hero-content{flex:1;margin:1em}.hero-img{flex:1;text-align:center;max-width:800px}.casita{fill:var(--logo-casita-color,#18BCF2)}.hero-img img{max-width:100%}.cta-container{background-color:transparent;color:#fff;padding:2em;border-radius:5px;text-align:center}.cta-buttons{display:flex;justify-content:space-evenly;gap:1em;margin-top:1em}.cta-buttons a{white-space:nowrap}.btn{padding:.75em 1.5em;border-radius:4px;font-weight:700;text-align:center;cursor:pointer;transition:background-color .3s;display:flex;align-items:center;justify-content:center}.btn-primary{background-color:var(--btn-primary-color);color:#fff}.btn-primary:hover{background-color:var(--btn-primary-hover-color);text-decoration:none}.btn-secondary{background-color:var(--btn-secondary-color);color:var(--text-color);border:2px solid var(--btn-primary-color)}.btn-secondary:hover{text-decoration:none;background-color:var(--btn-secondary-hover-color)}.home-section{margin-bottom:3em}.collapse-container{border:1px solid #ddd;border-radius:4px;margin-bottom:1em}.collapse-header{background-color:#f3f6f6;padding:.75em 1em;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.collapse-container h4{margin:0}.collapse-container.active h4{margin:0;display:none}.collapse-container.active h5{margin:0;display:block}.collapse-container h5{margin:0;display:none}.collapse-content{height:0;overflow:hidden;transition:height,padding .3s ease;padding-left:1em;padding-top:0;padding-bottom:0}.collapse-container.active .collapse-content{height:auto;padding-top:1em;padding-bottom:1em}.collapse-container.active .collapse-icon{transform:rotate(45deg)}.collapse-icon{font-size:1.5em;transition:transform .3s}.admonition{margin:1.5em 0;padding-top:.2em;padding-left:1em;padding-right:1em;padding-bottom:1em;border-radius:4px;border-left:4px solid}.admonition.note{background-color:var(--admonition-note-bg);border-color:var(--admonition-note-border)}.admonition.note .admonition-title{color:var(--admonition-note-title)}.admonition.tip{background-color:var(--admonition-tip-bg);border-color:var(--admonition-tip-border)}.admonition.tip .admonition-title{color:var(--admonition-tip-title)}.admonition.warning,.admonition.caution,.admonition.important{background-color:#fef5e7;border-color:#e67e22}.admonition.warning,.admonition.caution,.admonition.important .admonition-title{color:#e67e22}.admonition-title{font-weight:700;margin:.5em 0}.option{padding-top:.2em;padding-left:1em;padding-right:1em;padding-bottom:1em}.option-title{display:block;padding-bottom:1em}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2em;margin-bottom:1em;margin-top:2em}.feature-card{background:var(--feature-card-bg);color:var(--feature-card-text);border-color:var(--border-color);box-shadow:0 4px 6px rgba(0,0,0,.1);padding:1.5em;border-radius:5px;display:flex;flex-direction:column;justify-content:space-between}.feature-icon{font-size:2em;color:var(--primary-color);margin-bottom:.5em}.feature-icon svg{height:1.5em;width:1.5em;& path { fill: var(--esphome-color); }}.feature-text{font-weight:700;margin-bottom:.5em}.getting-started-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2em}.getting-started-card{padding:1.5em;border-radius:5px;background:var(--getting-started-bg) !important;color:var(--getting-started-text) !important;border-color:var(--border-color);box-shadow:0 2px 4px rgba(0,0,0,5%)}.getting-started-card h3{margin-top:0}.getting-started-card .btn{margin-top:1em}footer{background-color:var(--footer-bg);color:var(--footer-text)}.footer-content{padding:2em 2em 1em;max-width:var(--max-page-width);margin:0 auto;display:flex;flex-wrap:wrap;gap:2em;position:relative}.footer-links{display:flex;flex-flow:row wrap;gap:2em;justify-content:center;margin-left:auto;margin-right:auto}.footer-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:2}.footer-logo img{width:220px;height:49px}.footer-content a{color:var(--esphome-color)}.footer-column h3{color:#fff;margin-top:0;margin-bottom:1em}.footer-column ul{list-style:none;margin:0}.footer-column li{margin-bottom:.5em}.footer-column svg{height:.9em;width:.9em;margin-right:.5em;& path { fill: var(--esphome-color); }}.footer-bottom{max-width:1800px;margin:2em auto 0;padding-top:1em;border-top:1px solid #555;text-align:center;color:#ccc}.push-right{margin-left:auto}.component-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,24%));gap:.5em;margin-bottom:2em}.cta-buttons{display:flex;flex-flow:row wrap;justify-content:center;gap:1em}.cta-buttons .btn{flex:1 1 200px}.component-card{background-color:var(--component-card-bg);border-radius:5px;padding:.5em;text-align:center;color:var(--component-card-text);border-color:var(--border-color);box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform .2s}.component-card a{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;position:relative}.component-card:hover{transform:translateY(-5px)}.component-icon{margin-bottom:auto;margin-top:auto}.component-icon img{min-width:80%;max-height:100%;max-width:100%}.component-name{font-weight:700;margin-bottom:.5em;margin-top:auto}.component-card h2,.component-card h3,.component-card p,.component-card a{color:var(--component-card-text) !important}.component-card a:hover{color:var(--link-accent) !important}figure{margin:2em 0;text-align:center}figure img{max-height:500px;object-fit:contain;width:auto;border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,.1)}figcaption{margin-top:.75em;font-size:.9em;color:#666;font-style:italic;line-height:1.4;max-width:80%;margin-left:auto;margin-right:auto}.center{display:block;margin-left:auto;margin-right:auto}.overlay{position:fixed;inset:0;background:rgba(20,20,20,7%);display:none}.overlay.show{display:block}@media(min-width:1001px){.overlay.show,.sidebar-mobile{display:none}}@media(max-width:1000px){.sidebar-fixed{display:none}.sidebar-mobile{margin-top:calc(var(--nav-height) + 32px)}.sticky-nav{padding:.5em 1em}.toc-button{transform-origin:40% 45%;transform:rotate(0);transition:transform .3s ease}.toc-button.open{transform:rotate(180deg)}.theme-toggle{margin-right:0}.hamburger-button{display:block}.nav-search{margin-left:auto;margin-right:10px;position:relative}.nav-links{position:absolute;top:100%;right:0;background-color:var(--nav-bg);flex-direction:column;align-items:stretch;padding:1em;box-shadow:0 4px 6px rgba(0,0,0,.1);z-index:0;display:none;height:0}.nav-links.active{display:flex;opacity:100%;z-index:1000;height:fit-content;transition:height .3s ease,opacity .3s ease}.dropdown{margin-right:0;margin-bottom:1em;width:100%}.dropbtn{width:100%;position:relative;text-align:right;padding:.75em 1em}.dropdown-content{position:absolute;top:0;right:200px;box-shadow:none;margin-top:.5em;padding-left:1em;padding-right:1em}.dropdown-content a{padding:.5em 1em}.content-container{flex-direction:column}.toc-button{display:block}.sidebar-content{position:static}.hero-container{flex-direction:column;text-align:center}.hero-content{margin-bottom:2em}.sidebar{position:fixed;top:0;left:-100%;width:80%;height:100%;transition:left .3s ease;padding:1rem;padding-left:3rem;overflow-y:auto}.sidebar.open{left:0;z-index:1}}.code-block{position:relative}.copy-button.copied .copy-feedback{opacity:1}.copy-button{position:absolute;top:.75rem;right:.75rem;padding:.5rem;background:var(--feature-card-bg);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-color);transition:all .2s ease;z-index:1}.copy-button:hover{background-color:var(--btn-secondary-hover-color)}.copy-button svg{width:16px;height:16px}.copy-feedback{position:absolute;right:calc(100% + .5rem);top:50%;transform:translateY(-50%);background:var(--text-color);color:var(--feature-card-bg);padding:.25rem .5rem;border-radius:4px;font-size:.875rem;opacity:0;pointer-events:none;transition:opacity .2s ease}.build-info{position:absolute;text-align:left;bottom:.5rem;left:.5rem}.print-button{background-color:rgba(255,255,255,.1);position:absolute;top:.5rem;left:.5rem;width:3rem;padding:.5rem}.print-button:hover{background-color:rgba(255,255,255,.2)}.build-info-button{background-color:rgba(255,255,255,.1);color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:14px;transition:background-color .3s}.build-info-button:hover{background-color:rgba(255,255,255,.2)}.build-info-popup{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.5)}.build-info-content{background-color:var(--background-color);margin:15% auto;padding:20px;border:1px solid var(--border-color);border-radius:8px;width:80%;max-width:500px;position:relative;display:flex;flex-flow:column;align-items:center}.build-info-close{color:var(--text-color);position:absolute;right:10px;top:0;font-size:28px;font-weight:700;cursor:pointer}.build-info-close:hover{color:var(--primary-color)}.build-info-content h4{margin-top:0;color:var(--text-color)}.build-info-content p{margin:10px 0}.build-info-content a{color:var(--link-accent)}@media(max-width:768px){.build-info-content{width:90%;margin:30% auto}}.build-info-grid{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:15px}.build-info-label{text-align:right;font-weight:700;padding-right:10px}.build-info-value{text-align:left}.header-print,.footer-logo-print{display:none}@media print{.nav-container,footer,.sidebar,.copy-button{display:none}[aria-hidden=true]{display:none}.footer-logo-print{display:block}.header-print{display:block;margin-left:auto;margin-right:auto;width:200px}}