/* Interactive pieces for tnsmarthome.com (house demo, scenes, top banner, video, sliders,
   automation library, planner, AI agent demo). Everything is scoped under .ix so it can't
   touch the rest of the site. Built Oct 14, 2026 from the approved preview. */
html{overflow-x:clip}
.ix{color:var(--text);font-family:var(--f-body);line-height:1.65}
.ix *,.ix *::before,.ix *::after{box-sizing:border-box}
.ix-sec{padding-block:64px}
.ix-band{background:linear-gradient(180deg,rgba(15,36,64,.55),rgba(15,36,64,.2))}
.ix .sec-head{display:grid;gap:12px;margin-bottom:28px;max-width:72ch}
.ix .sec-head .eyebrow{margin:0}
.ix .topbar a{color:inherit;text-decoration:none}
.ix .topbar a:hover{text-decoration:underline}
.ix .ba-grid.one{grid-template-columns:minmax(0,560px)}
.ix .ba-grid.one.wide{grid-template-columns:minmax(0,820px)}
.ix .talk.mini .thread.static{height:auto;max-height:none;overflow:visible}
.ix .hero-cta a.muted:hover{color:var(--text)}
@media (max-width:560px){.ix .nav-links a{display:none}}
.ix{
  color-scheme: dark;
  --bg:#0b0d12; --surface:#14171f; --surface-2:#1a1f2b; --navy:#0F2440; --text:#F7F7F5; --muted:#9aa4b5;
  --line:rgba(247,247,245,.09); --amber:#F5A623; --cyan:#2BB8D6; --ok:#3ecf8e;
  --f-head:var(--font-heading);
  --f-body:var(--font-body);
  --f-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r:12px; --wrap:1160px;
}
.ix h1,.ix h2,.ix h3{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.02em;line-height:1.1;margin:0;text-wrap:balance}
.ix h1{font-size:clamp(34px,4.6vw,58px)}
.ix h2{font-size:clamp(22px,2.8vw,32px)}
.ix h3{font-size:15px;letter-spacing:.04em}
.ix p{margin:0}
.ix a{color:var(--cyan)}
.ix .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}
@media (max-width:520px){.ix .wrap{padding-inline:16px}}
.ix .muted{color:var(--muted)}
.ix .btn{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--f-head);letter-spacing:.02em;color:var(--amber);background:transparent;border:1.5px solid var(--amber);border-radius:8px;padding:12px 22px;cursor:pointer;text-decoration:none;transition:background .15s}
.ix .btn:hover{background:rgba(245,166,35,.12)}
.ix .btn.small{padding:8px 14px;font-size:13px}
.ix .btn.ghost{color:var(--text);border-color:var(--line)}
.ix .btn.ghost:hover{border-color:var(--cyan);background:rgba(43,184,214,.08)}
.ix button{font:inherit;color:inherit}
.ix :focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.ix .eyebrow{font:600 12px/1.2 var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.ix .topbar{background:linear-gradient(90deg,#1aa6c4,#36c6e2,#1aa6c4);color:#08202a;font:600 13.5px/1.3 var(--f-head);letter-spacing:.03em;text-align:center;padding:9px 16px;position:relative;min-height:38px;display:grid;place-items:center}
.ix .topbar .msg{transition:opacity .4s, transform .4s}
.ix .topbar .msg.out{opacity:0;transform:translateY(-4px)}
.ix .topbar .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#08202a;margin-right:8px;vertical-align:1px}
.ix .topbar .ai{display:inline-block;font:700 10px/1 var(--f-head);letter-spacing:.14em;background:#08202a;color:#5fe0f5;border-radius:999px;padding:4px 8px 4px 7px;margin-right:9px;vertical-align:1px}
.ix .topbar .ai::before{content:"\2726";margin-right:5px}
.ix .hero{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:56px;align-items:start;padding-block:48px 72px}
@media (min-width:981px){.ix .hero-copy{padding-top:28px}}
.ix .hero-copy{display:grid;gap:24px;align-content:center}
.ix .hero-copy h1 span{color:var(--amber)}
.ix .hero-copy p{font-size:17px;color:color-mix(in srgb,var(--text) 84%,transparent);max-width:46ch}
.ix .hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ix .hero-side{display:grid;gap:16px}
@media (max-width:980px){.ix .hero{grid-template-columns:1fr;gap:40px}}
.ix .demo{position:relative;z-index:70;background:linear-gradient(180deg,#171c27,#10141c);border:1px solid rgba(247,247,245,.08);border-radius:20px;padding:20px;display:grid;gap:16px;box-shadow:0 40px 80px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05)}
@media (max-width:520px){.ix .demo{padding:14px;border-radius:16px;gap:12px}}
.ix .d-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ix .live{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--f-head);letter-spacing:.12em;text-transform:uppercase}
.ix .live i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(62,207,142,.55)}70%{box-shadow:0 0 0 8px rgba(62,207,142,0)}100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}}
.ix .d-head .right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ix .pill{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--f-mono);color:var(--muted);background:#0c1017;border:1px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap}
.ix .pill svg{width:14px;height:14px;color:var(--amber)}
.ix .switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:500 12px var(--f-mono);color:var(--muted);user-select:none;white-space:nowrap}
.ix .switch input{appearance:none;width:32px;height:18px;border-radius:999px;background:#2a3140;position:relative;cursor:pointer;margin:0;transition:background .2s;flex:none}
.ix .switch input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text);transition:transform .2s}
.ix .switch input:checked{background:var(--cyan)}
.ix .switch input:checked::after{transform:translateX(14px)}
.ix .dn span{transition:color .3s}
.ix .dn input{background:rgba(245,166,35,.55)}
.ix .dn input:checked{background:#3a5a9a}
.ix .dn:has(input:not(:checked)) .d{color:var(--amber)}
.ix .dn:has(input:checked) .n{color:var(--text)}
.ix .d-log{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;border-top:1px solid var(--line);padding-top:12px}
.ix .d-log .lh{font:600 10.5px/2 var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ix .rows{display:grid;height:66px;overflow:hidden;align-content:start}
.ix .rows div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;font:400 12px/22px var(--f-mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ix .rows div span{overflow:hidden;text-overflow:ellipsis}
.ix .rows div:first-child span{color:var(--text)}
.ix .rows time{color:var(--cyan)}
.ix .rows .new{animation:logIn .5s ease}
@keyframes logIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ix .hstage{position:relative;isolation:isolate}
.ix .stage-bg{position:absolute;top:-1px;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
.ix .stage-bg>*{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.ix .sk-day{background:linear-gradient(180deg,#24528a 0%,#4a76a6 42%,#9c8a6a 78%,#c88a45 100%)}
.ix .stage-bg>.sk-sun{inset:-60% 0 0 0}
.ix .sk-sun{background:radial-gradient(560px 400px at 82% 41.25%,rgba(255,222,150,.85),rgba(255,180,80,.28) 42%,transparent 72%);transform:translateY(22%);transition:opacity 1.6s ease,transform 2.4s cubic-bezier(.2,.7,.2,1)}
.ix .sk-night{background:linear-gradient(180deg,#040a1c,#0a1634 62%,#0f1c38)}
.ix .sk-moon{background:radial-gradient(300px 220px at 85% 14%,rgba(205,220,255,.32),transparent 70%)}
.ix .sk-dark{background:#020306}
.ix .sk-tv{background:radial-gradient(900px 520px at 72% 55%,rgba(60,120,255,.26),rgba(150,70,220,.14) 45%,transparent 75%)}
.ix .stars i{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 4px rgba(255,255,255,.8);animation:tw var(--d) ease-in-out var(--dl) infinite alternate}
@keyframes tw{from{opacity:.12}to{opacity:1}}
.ix .shoot{inset:auto!important;top:10%;left:8%;width:140px;height:2px;background:linear-gradient(90deg,transparent,#fff);border-radius:2px}
@keyframes shoot{0%,62%{opacity:0;transform:translate(0,0) rotate(18deg)}64%{opacity:1}72%{opacity:0;transform:translate(560px,180px) rotate(18deg)}100%{opacity:0}}
.ix .shoot.s2{top:24%;left:36%;width:110px}
.ix .sk-scan{inset:auto 0 auto 0!important;top:0;height:3px;background:var(--cyan);box-shadow:0 0 26px 7px rgba(43,184,214,.6)}
@keyframes scan{0%{top:0;opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.ix .lights{opacity:1!important}
.ix .lt{position:absolute;top:0;width:360px;height:440px;transform:translateX(-50%);background:radial-gradient(ellipse 50% 60% at 50% 0,var(--lc),transparent 75%);opacity:var(--on,1);transition:opacity .7s ease var(--dl,0s),background 1.2s ease}
.ix .lt::before{content:"";position:absolute;left:50%;top:0;width:34px;height:5px;margin-left:-17px;border-radius:0 0 6px 6px;background:var(--fx,#F5A623);box-shadow:0 0 18px 4px var(--fx,#F5A623);transition:background 1.2s,box-shadow 1.2s}
.ix .hstage{--lc:rgba(245,166,35,.13);--fx:rgba(245,166,35,.7)}
.ix .hero-copy{transition:filter 1.3s ease}
.ix .hero-copy h1 span{transition:color 1.2s ease,text-shadow 1.2s ease}
.ix .hstage.s-morning .sk-day{opacity:1}
.ix .hstage.s-morning .sk-sun{opacity:1;transform:none}
.ix .hstage.s-morning{--lc:rgba(255,236,200,.22);--fx:#fff4dc}
.ix .hstage.s-morning .hero-copy h1 span{text-shadow:0 0 30px rgba(245,166,35,.7)}
.ix .hstage.s-morning .hero-copy{filter:saturate(1.25)}
.ix .hstage.s-movie .sk-dark{opacity:.9}
.ix .hstage.s-movie .sk-tv{opacity:1;animation:tvGlow 1.7s infinite steps(1)}
@keyframes tvGlow{0%{opacity:.6}30%{opacity:1}55%{opacity:.4}80%{opacity:.85}}
.ix .hstage.s-movie{--lc:rgba(120,90,255,.2);--fx:#7a5cff}
.ix .hstage.s-movie .lt{--on:0}
.ix .hstage.s-movie .lt:nth-child(4){--on:.7}
.ix .hstage.s-movie .nav{filter:grayscale(.9) brightness(.5)}
@property --lb{syntax:'<length>';inherits:false;initial-value:0px}
.ix .hstage::after{content:"";position:absolute;top:-1px;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;pointer-events:none;--lb:0px;background:linear-gradient(transparent 0 calc(100% - var(--lb)),#000 calc(100% - var(--lb)));transition:--lb .9s cubic-bezier(.6,0,.2,1)}
.ix .hstage.s-movie::after{--lb:clamp(36px,7vh,64px)}
.ix .shade{position:absolute;top:-1px;left:calc(50% - 50vw);right:calc(50% - 50vw);height:0;background:#000;z-index:75;pointer-events:none;transition:height .9s cubic-bezier(.6,0,.2,1);box-shadow:0 6px 18px rgba(0,0,0,.6)}
.ix .hstage.s-movie .shade{height:var(--navh,96px)}
.ix .hero-extra{display:grid;gap:22px;margin-top:8px;padding-top:24px;border-top:1px solid var(--line)}
.ix .trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font:600 12px var(--f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.ix .trust li{display:flex;align-items:center;gap:8px}
.ix .trust svg{width:16px;height:16px;color:var(--amber);flex:none}
.ix .works{display:grid;gap:10px}
.ix .works .k{font:500 11px var(--f-mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.ix .works ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ix .works li{font:500 12.5px var(--f-body);border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:color-mix(in srgb,var(--text) 85%,transparent);background:rgba(11,13,18,.35)}
.ix .hstage.s-morning .hero-cta .muted,.ix .hstage.s-morning .works .k{color:#fff}
.ix .hstage.s-morning .works li{background:rgba(11,13,18,.45);color:#fff}
.ix .hstage.s-morning .hero-copy,.ix .hstage.s-morning .nav{text-shadow:0 1px 10px rgba(6,14,30,.55)}
.ix .hstage.s-morning .nav-brand span span:last-child{color:#fff}
.ix .hero-copy>*{transition:filter 1.2s ease,opacity 1.2s ease}
.ix .hstage.s-movie .hero-copy>*:not(h1):not(.nowshowing){filter:grayscale(.9) brightness(.45)}
.ix .hstage.s-movie .hero-copy h1,.ix .hstage.s-movie .hero-copy h1 span{color:#eef3ff;text-shadow:0 0 18px rgba(90,140,255,.6),0 0 46px rgba(150,90,255,.4)}
.ix .hstage.s-movie .hero-copy h1{animation:projector 2.4s infinite steps(1)}
@keyframes projector{0%,100%{opacity:1}11%{opacity:.82}13%{opacity:1}52%{opacity:.9}55%{opacity:1}78%{opacity:.94}}
.ix .nowshowing{display:none;align-items:center;gap:6px;justify-self:start;font:600 11px var(--f-head);letter-spacing:.22em;text-transform:uppercase;color:#ffd27a;border:1px solid rgba(255,210,122,.45);border-radius:6px;padding:6px 12px 6px 10px;background:rgba(0,0,0,.35)}
.ix .nowshowing i{width:5px;height:5px;border-radius:50%;background:#ffd27a;opacity:.25;animation:bulbs 1.2s infinite}
.ix .nowshowing i:nth-child(2){animation-delay:.4s}
.ix .nowshowing i:nth-child(3){animation-delay:.8s;margin-right:6px}
@keyframes bulbs{0%,60%,100%{opacity:.25}20%{opacity:1;box-shadow:0 0 6px #ffd27a}}
.ix .hstage.s-movie .nowshowing{display:inline-flex;animation:nsIn .8s ease both}
.ix .hstage.s-movie .hero-copy .eyebrow{display:none}
@keyframes nsIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.ix .hstage.s-movie .hero-copy h1{animation:none}}
.ix .hstage.s-away .sk-dark{opacity:.95}
.ix .hstage.s-away .lt{--on:0}
.ix .hstage.s-away .lt:nth-child(1){--dl:.1s}
.ix .hstage.s-away .lt:nth-child(2){--dl:.35s}
.ix .hstage.s-away .lt:nth-child(3){--dl:.6s}
.ix .hstage.s-away .lt:nth-child(4){--dl:.85s}
.ix .hstage.s-away .lt:nth-child(5){--dl:1.1s}
.ix .hstage.s-away .sk-scan.go{animation:scan 1.6s cubic-bezier(.5,0,.3,1) both}
.ix .hstage.s-away .hero-copy,.ix .hstage.s-away .nav{filter:grayscale(1) brightness(.5)}
.ix .hstage.s-night .sk-night,.ix .hstage.s-night .sk-moon,.ix .hstage.s-night .stars{opacity:1}
.ix .hstage.s-night .shoot{animation:shoot 7s linear 1s infinite}
.ix .hstage.s-eve .sk-day{transition:opacity 2.5s ease}
.ix .hstage.s-eve .sk-sun{transition:opacity 1.6s ease,transform 0s linear 2s}
.ix .hstage.s-eve .sk-night{opacity:1;transition:opacity 2.5s ease}
.ix .hstage.s-eve .sk-moon,.ix .hstage.s-eve .stars{opacity:1;transition:opacity 2s ease 1.2s}
.ix .hstage.s-eve .shoot{animation:shoot 7s linear 3s infinite}
.ix .hstage.s-night .shoot.s2{animation:shoot 9.5s linear 5.2s infinite}
.ix .hstage.s-eve .shoot.s2{animation:shoot 9.5s linear 6.4s infinite}
.ix .hstage.s-eve{--lc:rgba(245,166,35,.22);--fx:#F5A623}
.ix .hstage.s-eve .hero-copy h1 span{text-shadow:0 0 26px rgba(245,166,35,.55)}
.ix .hstage.s-night .lt{--on:0}
.ix .hstage.s-night .lt:nth-child(1){--on:.5}
.ix .hstage.s-night{--lc:rgba(245,166,35,.08)}
.ix .hstage.s-night .hero-copy,.ix .hstage.s-night .nav{filter:saturate(.5) brightness(.88)}
.ix .scap{position:absolute;left:0;bottom:22px;display:flex;gap:10px;align-items:center;font:500 13px var(--f-body);color:var(--text);background:rgba(11,13,18,.72);border:1px solid rgba(245,166,35,.4);border-radius:999px;padding:8px 16px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s;max-width:100%}
.ix .scap b{font:600 10.5px var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.ix .scap.on{opacity:1;transform:none}
@media (max-width:980px){.ix .scap{position:static;margin:0 0 24px;width:max-content}}
.ix section.blk{padding-block:72px;display:grid;gap:32px}
@media (max-width:520px){.ix section.blk{padding-block:56px}}
.ix .blk-head{display:grid;gap:12px;max-width:760px}
.ix .band{background:radial-gradient(900px 420px at 85% -40%, rgba(43,184,214,.10), transparent 64%), var(--navy)}
.ix .vid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:48px;align-items:center}
@media (max-width:820px){.ix .vid{grid-template-columns:1fr;gap:32px}}
.ix .vid-frame{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5;max-width:100%;background:#000;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.ix .vid-frame video{width:100%;height:100%;object-fit:cover;display:block}
.ix .vid-cap{position:absolute;left:12px;bottom:12px;right:12px;font:600 13px var(--f-head);letter-spacing:.03em;background:rgba(8,12,18,.8);border-radius:8px;padding:9px 12px;backdrop-filter:blur(4px)}
.ix .vid-play{position:absolute;top:12px;right:12px;font:500 11px var(--f-mono);background:rgba(8,12,18,.8);border:1px solid var(--line);color:var(--text);border-radius:6px;padding:5px 9px;cursor:pointer}
.ix .chapters{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ix .chapters li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:10px 12px;border-radius:8px;border-left:2px solid transparent;color:var(--muted);transition:background .3s,color .3s,border-color .3s;cursor:pointer}
.ix .chapters li time{font:500 12px/1.65 var(--f-mono);color:inherit}
.ix .chapters li.on{background:rgba(255,255,255,.05);color:var(--text);border-left-color:var(--amber)}
.ix .vs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ix .vs>div{border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:grid;gap:6px;font-size:13.5px;color:var(--muted);align-content:start;opacity:.6;transition:border-color .3s,background .3s,opacity .3s,color .3s}
.ix .vs>div.on{opacity:1;color:var(--text);border-color:rgba(245,166,35,.7);background:rgba(245,166,35,.07)}
.ix .vs ul{margin:0;padding-left:16px;display:grid;gap:3px}
.ix .vs li::marker{color:var(--amber)}
.ix .vs strong{font:600 12px var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.ix .vs>div.on strong{color:var(--amber)}
@media (max-width:480px){.ix .vs{grid-template-columns:1fr}}
.ix .ba-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:24px;align-items:start}
@media (max-width:880px){.ix .ba-grid{grid-template-columns:1fr}}
.ix .ba{display:grid;gap:10px;margin:0}
.ix .ba-box{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000;user-select:none;touch-action:pan-y;max-width:100%}
.ix .ba-box.door{aspect-ratio:4/5}
.ix .ba-box.apps{aspect-ratio:4/3}
.ix .ba-layer{position:absolute;inset:0}
.ix .ba-layer img{width:100%;height:100%;object-fit:cover;display:block}
.ix .ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ix .ba-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--amber);transform:translateX(-1px);pointer-events:none}
.ix .ba-line::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;border-radius:50%;transform:translate(-50%,-50%);background:var(--bg);border:2px solid var(--amber);box-shadow:0 0 0 4px rgba(245,166,35,.15)}
.ix .ba-box input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ix .ba-lab{position:absolute;top:10px;font:600 11px var(--f-head);letter-spacing:.12em;text-transform:uppercase;background:rgba(8,12,18,.82);border-radius:6px;padding:5px 8px;pointer-events:none}
.ix .ba-lab.l{left:10px}
.ix .ba-lab.r{right:10px;color:var(--amber)}
.ix .ba figcaption{font-size:13px;color:var(--muted)}
.ix .homescreen{position:absolute;inset:0;background:linear-gradient(160deg,#1c2433,#0e131c);display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:min-content;gap:7% 6%;padding:9% 9% 0;align-content:start}
.ix .app{display:grid;gap:6px;justify-items:center;font:600 clamp(8px,1.1vw,11px) var(--f-body);color:#d8dde6}
.ix .app i{width:min(64px,100%);aspect-ratio:1;border-radius:22%;display:grid;place-items:center;font:700 clamp(12px,1.8vw,20px) var(--f-head);font-style:normal;color:#fff}
.ix .badge{position:absolute;left:10px;bottom:10px;font:500 12px var(--f-mono);background:rgba(8,12,18,.82);border-radius:6px;padding:5px 9px;pointer-events:none}
.ix .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:10px;align-content:start;transition:border-color .2s}
.ix .card:hover,.ix .card:focus-within{border-color:rgba(245,166,35,.55)}
.ix .card p{font-size:14px;color:color-mix(in srgb,var(--text) 76%,transparent)}
.ix .ico{width:40px;height:40px;color:var(--cyan)}
.ix .ico *{transition:all .5s ease;transform-box:fill-box}
.ix .card:hover .bulb-glow,.ix .card:focus .bulb-glow{opacity:1}
.ix .card:hover .bulb-fill,.ix .card:focus .bulb-fill{fill:var(--amber);stroke:var(--amber)}
.ix .slats{transform:scaleY(.25);transform-origin:top}
.ix .card:hover .slats,.ix .card:focus .slats{transform:scaleY(1)}
.ix .card:hover .shackle,.ix .card:focus .shackle{transform:translateY(3px)}
.ix .card:hover .lockbody,.ix .card:focus .lockbody{stroke:var(--ok)}
.ix .card:hover .spark,.ix .card:focus .spark{transform:rotate(90deg) scale(1.12);transform-origin:center;stroke:var(--amber)}
.ix .wave{opacity:0}
.ix .card:hover .wave,.ix .card:focus .wave{opacity:1}
.ix .tnum{font:600 9px var(--f-mono);fill:currentColor}
.ix .planner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media (max-width:900px){.ix .planner{grid-template-columns:1fr}}
.ix .pl-q{padding:28px;display:grid;gap:20px;align-content:start;border-right:1px solid var(--line)}
@media (max-width:900px){.ix .pl-q{border-right:0;border-bottom:1px solid var(--line)}}
@media (max-width:520px){.ix .pl-q,.ix .pl-r{padding:20px}}
.ix .steps{display:flex;gap:6px}
.ix .steps span{height:4px;flex:1;border-radius:4px;background:#2a3140;transition:background .3s}
.ix .steps span.on{background:var(--amber)}
.ix .pl-k{font:500 12px var(--f-mono);color:var(--muted)}
.ix .pl-q h3{font-size:19px;text-transform:none;letter-spacing:0}
.ix .opts{display:flex;flex-wrap:wrap;gap:8px}
.ix .opt{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:8px 14px;font-size:13.5px;cursor:pointer;transition:all .15s;text-align:left}
.ix .opt:hover{border-color:rgba(245,166,35,.6)}
.ix .opt[aria-pressed="true"]{border-color:var(--amber);background:rgba(245,166,35,.12);color:var(--text)}
.ix .pl-nav{display:flex;gap:16px;align-items:center}
.ix .pl-top{display:grid;gap:12px}
.ix .pl-modes{display:flex;gap:18px;justify-content:flex-end}
.ix .demo-flag{border:1px dashed rgba(245,166,35,.7);background:rgba(245,166,35,.08);border-radius:10px;padding:10px 12px;font-size:13.5px;line-height:1.5}
.ix .demo-flag b{font:700 11px var(--f-head);letter-spacing:.14em;color:var(--amber);margin-right:6px}
.ix .opt.selall{border-style:dashed}
.ix .linkbtn{background:none;border:0;color:var(--muted);cursor:pointer;text-decoration:underline;padding:0;font-size:14px}
.ix .pl-r{padding:28px;display:grid;gap:18px;align-content:start;background:linear-gradient(180deg,rgba(15,36,64,.55),transparent)}
.ix .pl-r .ex{font:500 12px var(--f-mono);color:var(--muted)}
.ix .pl-r h3{font-size:18px;text-transform:none;letter-spacing:0}
.ix .pl-r ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ix .pl-r li{background:rgba(11,13,18,.6);border:1px solid var(--line);border-radius:10px;padding:11px 13px;display:grid;gap:2px}
.ix .pl-r li strong{font:600 13.5px var(--f-head)}
.ix .pl-r li span{font-size:13px;color:var(--muted)}
.ix .facts{display:grid;gap:8px;margin:0}
.ix .facts div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;font-size:13.5px}
.ix .facts dt{font:600 10.5px/1.9 var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ix .facts dd{margin:0}
.ix .qf{display:grid;gap:8px;background:#0e121a;border:1px solid var(--line);border-radius:10px;padding:14px}
.ix .qf label{font:600 11px var(--f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ix .qf textarea{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;color:var(--text);font:13px/1.5 var(--f-body);padding:8px 10px;min-height:150px;resize:vertical}
.ix .qf .hint{font-size:12px;color:var(--muted)}
.ix .lib-tools{display:grid;gap:12px}
.ix .lib-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ix .search{flex:1 1 280px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--text);font:14px var(--f-body);padding:11px 14px}
.ix .count{font:500 12px var(--f-mono);color:var(--muted)}
.ix .opt .n{font:500 11px var(--f-mono);color:var(--muted);margin-left:6px}
.ix .lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.ix .auto{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:10px;align-content:start}
.ix .auto[hidden]{display:none}
.ix .auto.mine{border-color:rgba(245,166,35,.32)}
.ix .auto.ai{border-color:rgba(43,184,214,.5);box-shadow:0 0 0 3px rgba(43,184,214,.08)}
.ix .auto .top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.ix .auto .cat{font:600 10.5px var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.ix .auto .own{font:500 10.5px var(--f-mono);color:var(--amber);border:1px solid rgba(245,166,35,.4);border-radius:5px;padding:1px 6px;white-space:nowrap}
.ix .auto .own.aib{color:var(--cyan);border-color:rgba(43,184,214,.5)}
.ix .auto h3{font-size:15.5px;text-transform:none;letter-spacing:0}
.ix .flow{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 10px;font-size:13.5px;margin:0}
.ix .flow dt{font:600 10.5px/1.9 var(--f-mono);text-transform:uppercase;color:var(--muted)}
.ix .flow dd{margin:0;color:color-mix(in srgb,var(--text) 86%,transparent)}
.ix .gear{display:flex;flex-wrap:wrap;gap:6px}
.ix .gear span{font:500 11px var(--f-mono);color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.ix .lib-body{display:flex;flex-direction:column;gap:24px}
.ix .lib-body:not(.open) .lib{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.ix .lib-body:not(.open) .lib{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ix .lib-body:not(.open) .lib{grid-template-columns:1fr}}
.ix .more{flex:none}
.ix .empty{color:var(--muted);font-size:14px}
.ix .talk{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px;align-items:start}
@media (max-width:900px){.ix .talk{grid-template-columns:1fr}}
.ix .chat{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:grid}
.ix .chat-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:#121621}
.ix .chat-h .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),#1f6f8a);color:#05202a;flex:none}
.ix .chat-h .av svg{width:16px;height:16px}
.ix .chat-h strong{font:600 13px var(--f-head);letter-spacing:.04em;display:block}
.ix .chat-h small{font:500 11px var(--f-mono);color:var(--muted)}
.ix .chat-h .ai-pill{margin-left:auto;font:600 10.5px var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(43,184,214,.5);border-radius:999px;padding:4px 9px}
.ix .thread{display:grid;gap:12px;height:440px;overflow-y:auto;align-content:start;padding:16px}
.ix .msg-u,.ix .msg-a{max-width:88%;border-radius:12px;padding:10px 13px;font-size:14px;line-height:1.55}
.ix .msg-u{justify-self:end;background:rgba(43,184,214,.14);border:1px solid rgba(43,184,214,.3)}
.ix .msg-a{justify-self:start;background:var(--surface-2);border:1px solid var(--line);display:grid;gap:10px}
.ix .msg-a .who{font:600 10px var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.ix .msg-a .did{display:flex;flex-wrap:wrap;gap:6px}
.ix .msg-a .did span{font:500 11px var(--f-mono);color:var(--ok);border:1px solid rgba(62,207,142,.35);border-radius:5px;padding:2px 7px}
.ix .built{background:#0e121a;border:1px solid rgba(43,184,214,.4);border-radius:10px;padding:12px;display:grid;gap:8px}
.ix .built .bh{font:600 10.5px var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.ix .built h4{margin:0;font:600 14px var(--f-head)}
.ix .built .acts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ix .built .saved{font:500 12px var(--f-mono);color:var(--ok)}
.ix .typing{display:inline-flex;gap:4px}
.ix .typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}
.ix .typing i:nth-child(2){animation-delay:.15s}
.ix .typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.ix .prompts{display:grid;gap:10px;padding:14px 16px;border-top:1px solid var(--line);background:#121621}
.ix .prompts .pg{font:600 10.5px var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ix .prompts .pr{display:flex;flex-wrap:wrap;gap:8px}
.ix .prompts button{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:7px 12px;font-size:13px;cursor:pointer;text-align:left}
.ix .prompts button:hover{border-color:var(--cyan)}
.ix .prompts button.used{opacity:.5}
.ix .prompts button:disabled{cursor:default}
.ix .how{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.ix .how li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;font-size:14px;color:color-mix(in srgb,var(--text) 82%,transparent);align-items:center}
.ix .how li::before{counter-increment:s;content:counter(s);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--f-head);color:var(--cyan);border:1px solid rgba(43,184,214,.5)}
.ix .bars{display:grid;gap:12px}
.ix .bar{display:grid;grid-template-columns:120px minmax(0,1fr) 72px;gap:12px;align-items:center;font-size:13px}
.ix .bar .track{height:14px;border-radius:4px;background:#1f2533;overflow:hidden}
.ix .bar .fill{height:100%;border-radius:4px;display:block}
.ix .bar .n{font:500 12.5px var(--f-mono);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:480px){.ix .bar{grid-template-columns:96px minmax(0,1fr) 62px}}

/* ---- animated service icons (.sx): each acts out its automation; plays while on screen ---- */
.sx{flex:none;display:inline-grid;place-items:center;width:var(--sx,60px);height:var(--sx,60px);border-radius:16px;color:#2BB8D6;
  background:radial-gradient(circle at 30% 20%,rgba(43,184,214,.16),rgba(43,184,214,.04));border:1px solid rgba(43,184,214,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.sx.sm{--sx:46px;border-radius:13px}
.sx-ico{width:74%;height:74%;overflow:visible}
.sx .rays,.sx .glow{opacity:0}
.sx .glow{fill:#F5A623}
.sx.on .glow{animation:sxGlow 7s ease-in-out infinite}
.sx.on .rays{animation:sxRays 7s ease-in-out infinite}
@keyframes sxGlow{0%,6%{opacity:0;fill:#F5A623}14%,34%{opacity:.6;fill:#F5A623}44%,58%{opacity:.55;fill:#5ccae1}68%,82%{opacity:.6;fill:#9b7bff}92%,100%{opacity:0;fill:#F5A623}}
@keyframes sxRays{0%,8%{opacity:0;color:#F5A623}14%,34%{opacity:1;stroke:#F5A623}44%,58%{opacity:1;stroke:#5ccae1}68%,82%{opacity:1;stroke:#9b7bff}92%,100%{opacity:0}}
.sx .arc{stroke:#F5A623;stroke-dasharray:100;stroke-dashoffset:30;transform:rotate(-90deg);transform-origin:24px 25px}
.sx .n{opacity:0}.sx .n0{opacity:1}
.sx.on .arc{animation:sxArc 6s ease-in-out infinite}
@keyframes sxArc{0%,8%{stroke-dashoffset:30;stroke:#F5A623}80%,92%{stroke-dashoffset:62;stroke:#5ccae1}100%{stroke-dashoffset:30;stroke:#F5A623}}
.sx.on .n{animation:sxNum 6s steps(1) infinite}
.sx.on .n0{animation-delay:0s}.sx.on .n1{animation-delay:-4.8s}.sx.on .n2{animation-delay:-3.6s}.sx.on .n3{animation-delay:-2.4s}.sx.on .n4{animation-delay:-1.2s}
@keyframes sxNum{0%{opacity:1}20%,100%{opacity:0}}
.sx .flake{transform-origin:41px 8px}
.sx.on .flake{animation:sxSpin 6s linear infinite}
@keyframes sxSpin{to{transform:rotate(360deg)}}
.sx .sun{fill:#F5A623}.sx .moon{fill:#dfe8ff;opacity:0}
.sx .blind{fill:rgba(43,184,214,.28);stroke:currentColor;stroke-width:1.2;transform:scaleY(0);transform-origin:24px 7px}
.sx.on .blind{animation:sxBlind 7s ease-in-out infinite}
.sx.on .sun{animation:sxSun 7s ease-in-out infinite}
.sx.on .moon{animation:sxMoon 7s ease-in-out infinite}
@keyframes sxBlind{0%,18%{transform:scaleY(0)}48%,82%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
@keyframes sxSun{0%,14%{transform:translateY(0);opacity:1}46%{transform:translateY(26px);opacity:.3}47%,90%{opacity:0;transform:translateY(26px)}100%{transform:translateY(0);opacity:1}}
@keyframes sxMoon{0%,50%{opacity:0}58%,80%{opacity:1}88%,100%{opacity:0}}
.sx .shackle{transform:translateY(-5px)}
.sx .tick{stroke:#3ecf8e;stroke-dasharray:20;stroke-dashoffset:20}
.sx .rec{fill:#ff5d5d;opacity:.25}
.sx.on .shackle{animation:sxShackle 5s ease-in-out infinite}
.sx.on .lock-body,.sx.on .sx-lock .body{animation:sxBody 5s ease-in-out infinite}
.sx.on .sx-lock .kh{animation:sxKh 5s ease-in-out infinite}
.sx.on .sx-lock .tick{animation:sxTick 5s ease-in-out infinite}
.sx.on .rec{animation:sxRec 1.4s steps(1) infinite}
@keyframes sxShackle{0%,20%{transform:translateY(-5px)}32%,84%{transform:translateY(0)}96%,100%{transform:translateY(-5px)}}
@keyframes sxBody{0%,30%{stroke:currentColor}36%,84%{stroke:#3ecf8e}92%,100%{stroke:currentColor}}
@keyframes sxKh{0%,32%{opacity:1}38%,84%{opacity:0}92%,100%{opacity:1}}
@keyframes sxTick{0%,36%{stroke-dashoffset:20}50%,84%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:20}}
@keyframes sxRec{0%{opacity:1}50%{opacity:.2}}
.sx-ai .tick{stroke:#3ecf8e;stroke-dasharray:20;stroke-dashoffset:20}
.sx .spark{fill:#F5A623;transform-origin:42px 6px;opacity:.5}
.sx.on .sx-ai .d{animation:sxDot 6s ease-in-out infinite}
.sx.on .sx-ai .d2{animation-delay:.15s}.sx.on .sx-ai .d3{animation-delay:.3s}
.sx.on .sx-ai .tick{animation:sxAiTick 6s ease-in-out infinite}
.sx.on .spark{animation:sxSpark 6s ease-in-out infinite}
@keyframes sxDot{0%,4%{transform:translateY(0);opacity:1}8%{transform:translateY(-3px)}12%{transform:translateY(0)}16%{transform:translateY(-3px)}20%{transform:translateY(0)}24%{transform:translateY(-3px)}28%,40%{transform:translateY(0);opacity:1}46%,88%{opacity:0}96%,100%{opacity:1}}
@keyframes sxAiTick{0%,46%{stroke-dashoffset:20}60%,86%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:20}}
@keyframes sxSpark{0%,52%{transform:scale(.6);opacity:.4}60%{transform:scale(1.25) rotate(45deg);opacity:1}72%,100%{transform:scale(.6);opacity:.4}}
.sx .pulse{stroke:#2BB8D6;stroke-dasharray:100;stroke-dashoffset:0}
.sx .ok{fill:#3ecf8e}.sx .okr{fill:none;stroke:#3ecf8e;stroke-width:1.5;opacity:0;transform-origin:38px 15px}
.sx.on .pulse{animation:sxPulse 2.4s linear infinite}
.sx.on .okr{animation:sxPing 2.4s ease-out infinite}
@keyframes sxPulse{0%{stroke-dashoffset:100}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes sxPing{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(2.6);opacity:0}}
a:hover .sx,.svc-row:hover .sx{border-color:rgba(245,166,35,.6)}
@media (prefers-reduced-motion: reduce){.sx *{animation:none!important}.sx .glow,.sx .rays{opacity:.6}.sx .shackle{transform:none}.sx .tick{stroke-dashoffset:0}}

.ix .hstage .hero-copy h1 span.h1-kicker{display:block;color:var(--amber);font:600 12px/1.2 var(--f-head);letter-spacing:.12em;text-shadow:none;animation:none;margin:0 0 14px}
.ix .hstage.s-movie .hero-copy h1 span.h1-kicker{display:none}

/* website-service message in the homepage top bar (Oct 20) */
.ix .topbar .new{display:inline-block;font:700 10px/1 var(--f-head);letter-spacing:.14em;background:#08202a;color:#ffc35a;border-radius:999px;padding:4px 8px;margin-right:9px;vertical-align:1px}
.ix .topbar .sm{display:none}
@media (max-width:640px){ .ix .topbar .lg{display:none} .ix .topbar .sm{display:inline} }
.ix .topbar .x{background:none;border:0;color:#08202a;font-size:18px;line-height:1;padding:2px 6px;margin-left:10px;cursor:pointer;border-radius:4px;opacity:.75;vertical-align:-1px}
.ix .topbar .x:hover,.ix .topbar .x:focus-visible{opacity:1;background:rgba(8,32,42,.12)}

/* test-house notification (Oct 20; sits over the house component since Oct 22) */
.ix .hdemo .notif{position:absolute;top:10px;left:50%;z-index:6;width:min(88%,340px);display:grid;grid-template-columns:30px 1fr;column-gap:10px;align-items:center;padding:9px 12px 10px;border-radius:14px;background:rgba(22,26,34,.82);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);color:#f3f5f7;box-shadow:0 10px 30px -10px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08);font:13px/1.35 var(--f-body);opacity:0;transform:translate(-50%,-130%);transition:transform .5s cubic-bezier(.2,.9,.25,1.15),opacity .3s;pointer-events:none}
.ix .hdemo .notif.show{opacity:1;transform:translate(-50%,0)}
.ix .hdemo .notif .ni{grid-row:1 / span 2;width:30px;height:30px;border-radius:8px;background:linear-gradient(180deg,#ffc35a,#f5a623);color:#2a1a00;display:grid;place-items:center}
.ix .hdemo .notif .ni svg{width:18px;height:18px}
.ix .hdemo .notif .nh{display:flex;justify-content:space-between;font:600 11px/1.2 var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:rgba(243,245,247,.65)}
.ix .hdemo .notif .nh b{color:rgba(243,245,247,.9);font-weight:600}
.ix .hdemo .notif .nh time{text-transform:none;letter-spacing:0}
.ix .hdemo .notif .nm{font-weight:500}
@media (max-width:520px){.ix .hdemo .notif{top:7px;padding:7px 10px 8px;font-size:12px;grid-template-columns:26px 1fr;column-gap:8px}.ix .hdemo .notif .ni{width:26px;height:26px}}
@media (prefers-reduced-motion:reduce){.ix .hdemo .notif{transition:opacity .2s;transform:translate(-50%,0)}}
.ix .hdemo{position:relative;min-width:0}
/* Oct 22: softer, smaller day sun so the hero eyebrow and logo stay readable */
.ix .hstage .sk-sun{background:radial-gradient(440px 300px at 88% 36%,rgba(255,222,150,.5),rgba(255,180,80,.14) 45%,transparent 70%)}
@media (max-width:700px){.ix .hstage .sk-sun{background:radial-gradient(260px 200px at 96% 38%,rgba(255,222,150,.38),rgba(255,180,80,.1) 45%,transparent 70%)}}

/* Oct 22: wide diagrams are unreadable on phones; show a cropped phone version or hide */
.dg-phone{display:none}
@media (max-width:600px){.dg-wide{display:none!important}.dg-phone{display:block}}