/* Generated by scripts/build-site-assets.py. Do not edit directly. */
/* source: styles.css */
:root{--bg:#f6f9ff;--sky:#eef2fc;--ink:#181b23;--body-c:#4c5364;--mut:#8a92a6;--line:#e8ebf2;--line-2:#f0f2f7;--blue:#3d95ff;--blue-deep:#1f86f7;--grad:linear-gradient(115deg,#2f8dff,#6bb2ff);--grad-ui:linear-gradient(115deg,#3a95ff,#6bb2ff);--sans:"Plus Jakarta Sans",system-ui,sans-serif;--disp:"Plus Jakarta Sans",system-ui,sans-serif;--mono:"Plus Jakarta Sans",system-ui,sans-serif;--ui:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--r:20px;--ease:cubic-bezier(.22,1,.36,1);--card-sh:0 1px 2px rgba(24,32,63,.04),0 6px 16px rgba(24,32,63,.05);--card-sh-hover:0 2px 4px rgba(24,32,63,.05),0 12px 28px rgba(52,86,180,.10),0 24px 56px rgba(52,86,180,.08);--dev-screen:#ffffff;--dev-row:#f5f7fc;--dev-row-bd:#e9edf5;--dev-text:#232733;--dev-mut:#8992a6}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;color-scheme:light}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,::after,::before{animation-duration:NaNs!important;animation-iteration-count:1!important;transition-duration:NaNs!important}}body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}::selection{background:var(--blue);color:#fff}::-webkit-scrollbar{width:11px}::-webkit-scrollbar-track{background:#f3f5fa}::-webkit-scrollbar-thumb{background:#c6cddd;border-radius:6px;border:3px solid #f3f5fa}::-webkit-scrollbar-thumb:hover{background:var(--blue)}img{max-width:100%}a{color:inherit}.btn:focus-visible,.theme-btn:focus-visible{outline-offset:3px}.brand{transition:opacity .18s}.brand:hover{opacity:.82}code{font-family:var(--mono);font-size:.82em;background:#f1f4fa;padding:.12em .45em;border-radius:6px;border:1px solid var(--line);color:#3d63e8}.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--disp);font-weight:700;font-size:.95rem;letter-spacing:.005em;padding:.72em 1.5em;border-radius:13px;text-decoration:none;cursor:pointer;--ripple:rgba(255,255,255,.4);transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s,color .18s,border-color .18s;user-select:none;-webkit-user-select:none;white-space:nowrap;border:1px solid transparent}.btn:active{transform:scale(.97)}.btn-ripple{position:absolute;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(0);background:var(--ripple);animation:ripple .58s var(--ease) forwards}@keyframes ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}@keyframes dlbob{0%,100%{transform:translateY(0)}45%{transform:translateY(2.5px)}}.btn-blue{--ripple:rgba(255,255,255,.5);color:#fff;background:linear-gradient(180deg,#287ded 0,#3b8fff 60%,#519efa 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(22,88,185,.4),inset 0 -5px 10px rgba(15,66,150,.3),0 1px 1px rgba(10,28,66,.4),0 4px 10px rgba(10,32,80,.38),0 14px 28px -10px rgba(14,44,100,.45);text-shadow:0 1px 1px rgba(18,70,150,.3)}.btn-blue:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.68),inset 0 0 0 1px rgba(22,88,185,.4),inset 0 -5px 10px rgba(15,66,150,.3),0 2px 3px rgba(10,28,66,.4),0 9px 18px rgba(10,32,80,.42),0 20px 38px -10px rgba(14,44,100,.5)}.btn-blue:active{transform:translateY(1px) scale(.985);background:linear-gradient(180deg,#2a7fee 0,#3b8fff 60%,#519efa 100%);box-shadow:inset 0 3px 7px rgba(11,54,126,.55),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(22,88,185,.45),0 1px 3px rgba(45,139,255,.2)}.pcard-pro .btn-blue:active{background:linear-gradient(#0b6be9 0,#3489d3 60%,#489ded 100%);box-shadow:inset 0 3px 7px rgba(11,54,126,0),inset 0 1px 0 rgba(255,255,255,0),inset 0 0 0 1px rgba(22,88,185,0),0 1px 3px rgba(45,139,255,0)}.btn-ink{--ripple:rgba(255,255,255,.32);color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.04) 40%,rgba(255,255,255,0) 56%),linear-gradient(180deg,#3f4552 0,#2b303b 52%,#161922 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(0,0,0,.45),inset 0 -5px 10px rgba(0,0,0,.32),0 1px 1px rgba(0,0,0,.38),0 4px 9px rgba(20,22,30,.32),0 12px 26px -8px rgba(20,22,30,.42);text-shadow:0 1px 1px rgba(0,0,0,.45)}.btn-ink:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(0,0,0,.45),inset 0 -5px 10px rgba(0,0,0,.32),0 2px 3px rgba(0,0,0,.38),0 8px 16px rgba(20,22,30,.38),0 18px 36px -10px rgba(20,22,30,.48)}.btn-ink:active{transform:translateY(1px) scale(.985);background:linear-gradient(180deg,#1a1d26 0,#2b303b 60%,#3a404d 100%);box-shadow:inset 0 3px 7px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.3)}.btn-lg{padding:.95em 1.9em;font-size:1.05rem;border-radius:16px}.btn-block{width:100%}.chip{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;font-weight:500;padding:.55em 1.1em;border-radius:999px;color:#fff;background:rgba(28,48,115,.28);border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-shadow:0 1px 6px rgba(20,35,90,.45);user-select:none;-webkit-user-select:none}.rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}.rv.on{opacity:1;transform:none}.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:6px 16px;color:var(--ink);border-bottom:1px solid transparent;transition:background .3s,border-color .3s,box-shadow .3s}.nav-in{max-width:1365px;margin:0 auto;height:50px;display:flex;align-items:center;gap:16px;padding:0 8px 0 12px}.nav.scrolled{background:rgba(255,255,255,.78);border-bottom-color:var(--line);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 10px 30px rgba(24,32,63,.06)}.brand{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;user-select:none;-webkit-user-select:none}.brand-word{font-family:var(--disp);font-weight:800;font-size:1.1rem;letter-spacing:-.01em;color:var(--ink)}.nav-links{flex:1;display:flex;justify-content:center}.nav-pill{display:inline-flex;align-items:center;gap:6px}.nav-links a{text-decoration:none;font-weight:600;font-size:.9rem;color:var(--body-c);padding:.45em .9em;border-radius:8px;transition:color .15s,background .15s}.nav-links a:hover{color:var(--ink);background:rgba(40,60,100,.06)}.nav-cta{display:flex;gap:8px;align-items:center}.nav-cta .btn{font-size:.86rem;padding:.6em 1.25em}.nav-cta .os-ic{width:14px;height:14px}@media (max-width:680px){.nav-cta .btn-ink{display:none}}.theme-btn{position:relative;flex:none;cursor:pointer;width:38px;height:38px;border-radius:50%;margin-left:4px;display:flex;align-items:center;justify-content:center;color:var(--body-c);border:0;background:0 0;transition:background .2s,color .2s,transform .2s var(--ease)}.theme-btn::before{content:"";position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:1px;height:20px;background:var(--line)}.theme-btn:hover{color:var(--ink);background:rgba(40,60,100,.08)}.theme-btn:active{transform:scale(.92)}.theme-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ic-sun{display:none}.hero{position:relative;margin:66px 12px 0;padding:34px 0 0;overflow:hidden;border-radius:28px;min-height:calc(100svh - 78px);display:flex;flex-direction:column;align-items:center}.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:230px;z-index:5;background:0 0;pointer-events:none}.hero-bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#5b86f0 0,#8fb1f6 9%,#d3e2fb 25%,#fff 52%,#f6f8fb 78%,#edeff3 100%)}.hero-scene{position:absolute;top:0;left:0;width:100%;height:min(100%,1150px);object-fit:cover;object-position:center top;-webkit-user-drag:none;user-select:none;-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 98%);mask-image:linear-gradient(180deg,#000 74%,transparent 98%)}.scene-dark{opacity:0}.cta-scene,.hero-scene{transition:opacity .6s var(--ease)}.hero-grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:1;-webkit-mask-image:radial-gradient(ellipse 108% 112% at 50% 42%,#000 0%,#000 66%,rgba(0,0,0,.55) 88%,transparent 100%);mask-image:radial-gradient(ellipse 108% 112% at 50% 42%,#000 0%,#000 66%,rgba(0,0,0,.55) 88%,transparent 100%);mix-blend-mode:multiply}.hero-bg::after{content:"";position:absolute;left:0;right:0;top:0;height:190px;background:0 0}.hero-fade{position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,rgba(255,255,255,0) 0,var(--bg) 94%)}.hero-in{position:relative;z-index:2;width:100%;max-width:900px;margin:auto auto 10px;padding:0 28px;display:flex;flex-direction:column;align-items:center;text-align:center}.hero-h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.9rem,6.2vw,5rem);line-height:1.02;letter-spacing:-.026em;color:var(--ink);margin-bottom:14px}.h1-grad{position:relative;display:inline-block;font-family:var(--disp);font-weight:800;font-size:.9em;letter-spacing:-.04em;color:#3d94ff}.h1-brand{font-family:var(--disp);font-weight:800;font-size:1em;letter-spacing:-.026em}@media (prefers-reduced-motion:reduce){.h1-grad{animation:none}}.hero-sub{font-size:1.16rem;line-height:1.55;color:var(--body-c);max-width:44ch;margin-bottom:18px}.hero-sub strong{color:var(--ink);font-weight:700}.hero-logos{display:contents}.hl-chip{position:absolute;z-index:0;display:flex;align-items:center;justify-content:center;border-radius:27%;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}.hl-chip::after{content:"";position:absolute;inset:-80%;z-index:-1;border-radius:50%;pointer-events:none;mix-blend-mode:screen}.hl-chip svg{width:52%;height:52%}.hl-claude{width:clamp(84px,9vw,128px);aspect-ratio:1;left:calc(231px - 25vw);top:38%;transform:translateX(-50%) rotate(14deg);animation:6.5s ease-in-out infinite floatA;background:linear-gradient(155deg,rgba(240,150,110,.82),rgba(214,110,72,.68));border-color:rgba(255,206,172,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 5px rgba(255,170,120,.85),0 0 16px rgba(250,130,80,.6),0 0 46px rgba(240,110,60,.4),0 12px 30px -10px rgba(200,88,48,.5)}.hl-claude::after{background:radial-gradient(circle at 50% 50%,rgba(255,170,110,.5),rgba(244,116,64,.2) 30%,rgba(240,100,50,.08) 45%,rgba(238,96,48,.03) 58%,transparent 70%)}.hl-claude svg{fill:#fff;filter:drop-shadow(0 1px 2px rgba(150,60,30,.4))}.hl-codex{width:clamp(84px,9vw,128px);aspect-ratio:1;left:calc(100% + 25vw - 231px);top:-20%;transform:translateX(-50%) rotate(-15deg);animation:7.5s ease-in-out infinite floatB;background:linear-gradient(155deg,#393939,rgba(0,0,0,.91));border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 5px rgba(220,235,255,.4),0 0 16px rgba(190,215,255,.25),0 0 46px rgba(160,195,255,.18),0 12px 30px -10px rgba(0,0,0,.55)}.hl-codex::after{background:radial-gradient(circle at 50% 50%,rgba(238,246,255,.5),rgba(178,208,255,.2) 30%,rgba(158,192,255,.08) 45%,rgba(155,190,255,.03) 58%,transparent 70%)}.hl-codex svg{fill:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}@keyframes floatA{0%,100%{transform:translateX(-50%) translateY(0) rotate(14deg)}50%{transform:translateX(-50%) translateY(-13px) rotate(17deg)}}@keyframes floatB{0%,100%{transform:translateX(-50%) translateY(0) rotate(-15deg)}50%{transform:translateX(-50%) translateY(-15px) rotate(-18deg)}}@media (prefers-reduced-motion:reduce){.hl-chip{animation:none}}html:not([data-theme=dark]) .hl-chip::after{display:none}html:not([data-theme=dark]) .hl-claude{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 30px -10px rgba(200,88,48,.4)}html:not([data-theme=dark]) .hl-codex{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 30px -10px rgba(0,0,0,.4)}html:not([data-theme=dark]) .hl-codex svg{filter:none}.hero-in>.hero-ctas,.hero-in>.hero-h1,.hero-in>.hero-sub{position:relative;z-index:1}@media (max-width:900px){.hl-chip{display:none}}.hero-ctas{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:8px;margin-bottom:20px}.btn-os{gap:.6em}.os-ic{width:17px;height:17px;fill:currentColor;flex:none;transition:transform .2s var(--ease)}.btn-os:hover .os-ic{animation:.9s ease-in-out infinite dlbob}.hero-device{position:relative;width:100%;max-width:1410px;margin:auto auto -140px;padding:0 28px}.device-glow{position:absolute;left:50%;top:6px;width:calc(100% - 56px);height:560px;z-index:1;transform:translate(-50%,-100%);pointer-events:none;opacity:0;animation:glowIn 1s var(--ease) .5s forwards;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 76%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 76%,transparent 100%);filter:blur(2px);background:radial-gradient(ellipse 24% 15% at 50% 100%,rgba(140,190,255,.55),rgba(140,190,255,.16) 44%,transparent 74%),radial-gradient(ellipse 52% 58% at 50% 100%,rgba(96,158,255,.3),transparent 80%),radial-gradient(ellipse 118% 124% at 50% 100%,rgba(47,105,230,.14),transparent 85%)}.device{position:relative;z-index:4;transition:transform .3s var(--ease);transform-style:preserve-3d;will-change:transform;user-select:none;-webkit-user-select:none}.device-rim{position:relative;border-radius:20px;padding:8px;background:linear-gradient(180deg,#2c2c2e,#232325 40%,#19191b);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 2px 8px rgba(0,0,0,.35),0 34px 80px rgba(0,0,0,.42)}.device-rim::before{content:"";position:absolute;left:0;right:0;top:-4px;height:16px;pointer-events:none;z-index:2;background:linear-gradient(90deg,transparent 0,rgba(120,180,255,.5) 28%,rgba(200,224,255,.9) 50%,rgba(120,180,255,.5) 72%,transparent 100%) center 4px/100% 2px no-repeat,radial-gradient(ellipse 60% 100% at 50% 22%,rgba(96,158,255,.55),rgba(96,158,255,0) 72%);filter:blur(.3px)}.hero-device .dev-title{color:#8a8b86}.hero-device .dev-dots i{background:#3a3a3d}.hero-device .dev-dots i:first-child{background:#ff6159}.hero-device .dev-dots i:nth-child(2){background:#ffbd2e}.hero-device .dev-dots i:nth-child(3){background:#28c840}.device-top{position:relative;display:flex;align-items:center;gap:12px;padding:5px 8px 12px;user-select:none;-webkit-user-select:none}.dev-dots{display:flex;gap:7px}.dev-dots i{width:11px;height:11px;border-radius:50%;background:#dfe3ec}.dev-dots i:first-child{background:#ff6159}.dev-dots i:nth-child(2){background:#ffbd2e}.dev-dots i:nth-child(3){background:#28c840}@keyframes ledpulse{0%,100%{opacity:1}50%{opacity:.35}}.dev-title{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--sans);font-size:.62rem;letter-spacing:.02em;color:var(--dev-mut)}.device-screen{background:var(--dev-screen);border-radius:13px;padding:16px;border:1px solid var(--dev-row-bd);font-family:var(--ui);font-size:.84rem;line-height:1.55;color:var(--dev-text);text-align:left}.acts{display:grid;gap:6px;margin:10px 0 2px}.caret{display:inline-block;width:2px;height:1em;border-radius:1px;background:var(--blue);vertical-align:-.15em;margin-left:.25em;animation:1.05s steps(1) infinite blink}@keyframes blink{50%{opacity:0}}.composer{margin-top:14px;background:var(--dev-row);border:1px solid var(--dev-row-bd);border-radius:12px;padding:10px 12px;user-select:none;-webkit-user-select:none}.device-screen.app-screen{display:flex;padding:0;overflow:hidden;min-height:600px;background:#1c1c1e;border-color:rgba(255,255,255,.07);box-shadow:inset 0 2px 10px rgba(0,0,0,.45);color:#e2e3df}.app-side{width:20%;flex:none;display:flex;flex-direction:column;gap:7px;padding:12px 11px;border-right:1px solid rgba(255,255,255,.07)}.app-screen .msx-seg span{font-size:.66rem}.app-screen .msx-new{font-size:.7rem}.app-screen .msx-label{font-size:.6rem}.app-screen .msx-item{font-size:.68rem}.app-screen .msx-item b{font-size:.54rem}.app-screen .msx-user{font-size:.66rem}.app-screen .msx-head b{font-size:.68rem}.app-screen .msx-eng{font-size:.66rem}.app-screen .msx-vseg i{font-size:.58rem}.app-screen .mcx-input{font-size:.68rem}.app-screen .mcx-row{font-size:.6rem}.app-chat{flex:1;min-width:0;display:flex;flex-direction:column}.app-chat .msx-comp{margin:12px 14px 14px}.ac-body{padding:16px 16px 0;flex:1;display:flex;flex-direction:column;align-items:stretch;gap:16px}.hx-user{align-self:flex-end;max-width:78%;font-size:.8rem;font-weight:460;line-height:1.6;color:#e2e3df;padding:8px 14px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.09);border-radius:15px 15px 7px;box-shadow:0 8px 22px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07)}.hx-tools{display:flex;flex-direction:column;gap:5px;padding:0 2px}.hx-tool{display:flex;align-items:baseline;gap:7px;font-size:.78rem;color:#9d9e9a;white-space:nowrap;overflow:hidden}.hxv{color:#9d9e9a;font-weight:600}.hxt{color:#e2e3df}.hxm{color:#626360;font-weight:500}.hx-tool.run .hxv{background:linear-gradient(90deg,rgba(157,158,154,.45) 0,rgba(255,255,255,.95) 50%,rgba(157,158,154,.45) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:1.6s linear infinite ms2Shimmer}.hx-tool.run .hxt{color:#fff;font-weight:700}.hx-reply{font-size:.8rem;font-weight:460;line-height:1.62;color:#e2e3df;padding:0 2px}.app-view{width:33%;flex:none;display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.07);background:#1b1b1d}.pv-tabs{display:flex;align-items:flex-end;gap:2px;padding:6px 6px 0;background:#1b1b1d}.pv-tab{font-size:.58rem;font-weight:500;color:#86877f;padding:.55em .9em;border-radius:8px 8px 0 0;white-space:nowrap;overflow:hidden;max-width:110px;text-overflow:ellipsis}.pv-tab.on{background:#2b2b2e;color:#ecede9}.pv-tab-add{color:#86877f;font-size:.9rem;padding:0 .5em .2em;align-self:center}.pv-bar{display:flex;align-items:center;gap:3px;padding:6px 8px;background:#2b2b2e}.pv-nav{width:20px;height:20px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:999px;color:#b6b7b2}.pv-nav.off{color:#54554e}.pv-nav svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.pv-omni{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:24px;margin:0 4px;padding:0 11px;border-radius:999px;background:rgba(0,0,0,.28);box-shadow:inset 0 1px 2px rgba(0,0,0,.32);font-size:.58rem;font-weight:500;color:#cdcec9;white-space:nowrap;overflow:hidden}.pv-lock{width:10px;height:10px;flex:none;fill:none;stroke:#84857f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.av-page{flex:1;margin:0;overflow:hidden;background:#fff;padding:14px 14px 0;display:flex;flex-direction:column;gap:12px}.av-page .mb-nav{gap:9px}.av-page .mb-hero-full{width:100%;flex:none;height:44%;aspect-ratio:auto;border-radius:12px}.av-page .mb-hero-full img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}.av-page .mb-hero-copy{display:flex;flex-direction:column;gap:8px}.av-page .mb-hero-copy b{font-size:1.05rem;line-height:1.05}.av-page .mb-cta{width:88px;height:22px;border-radius:999px;background:var(--grad-ui);margin-top:2px}.av-page .mb-cards{margin-top:auto;padding-bottom:14px}.av-page .mb-cards em img{height:62px}.mb-trust{display:flex;gap:7px;margin-top:6px}.mb-trust i{width:26px;height:7px;border-radius:3px;background:#dee4f0}@media (max-width:860px){.app-side,.app-view{display:none}.device-screen.app-screen{min-height:440px}}.page2{padding:110px 0}.divider{border:0;height:1px;width:min(1120px,88%);margin:0 auto;background:linear-gradient(90deg,transparent,var(--line) 16%,var(--line) 84%,transparent)}.sec-head{max-width:820px;margin:0 auto 78px;padding:0 28px;text-align:center}.sec-tag{display:inline-flex;align-items:center;gap:.55em;font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.01em;color:#fff;background:linear-gradient(180deg,#287ded 0,#3b8fff 60%,#519efa 100%);border:1px solid rgba(22,88,185,.5);padding:.5em 1.6em;border-radius:999px;margin-bottom:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(22,88,185,.4),inset 0 -4px 8px rgba(15,66,150,.3),0 1px 1px rgba(10,28,66,.4),0 4px 10px rgba(10,32,80,.38),0 10px 22px -10px rgba(14,44,100,.45);user-select:none;-webkit-user-select:none}.sec-h2{font-family:var(--disp);font-weight:800;font-size:clamp(2.2rem,3.8vw,3.2rem);line-height:1.05;letter-spacing:-.028em;color:var(--ink);margin-bottom:14px}.sec-sub{font-size:1.08rem;line-height:1.6;color:var(--body-c);max-width:56ch;margin:0 auto}.p2-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:center;max-width:1520px;margin:0 auto;padding:0 28px}.p2-visual{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:rgba(125,135,165,.06);box-shadow:0 2px 6px rgba(20,30,80,.06),0 24px 60px -18px rgba(20,30,80,.22)}.p2-visual img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}.p2-h2{font-family:var(--disp);font-weight:800;font-size:clamp(2.1rem,3.4vw,3rem);line-height:1.04;letter-spacing:-.028em;color:var(--ink);margin-bottom:18px}.p2-lead{font-size:1.06rem;line-height:1.6;color:var(--body-c);max-width:46ch;margin-bottom:34px}.p2-list{list-style:none;display:flex;flex-direction:column;gap:24px}.p2-item{display:flex;gap:16px;align-items:flex-start}.p2-ic{width:22px;height:22px;flex:none;margin-top:2px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.p2-item b{display:block;font-family:var(--disp);font-weight:700;font-size:1.02rem;color:var(--ink);margin-bottom:5px}.p2-item p{font-size:.95rem;line-height:1.55;color:var(--body-c);max-width:46ch}.p3-grid{grid-template-columns:1fr 1.35fr}@media (max-width:900px){.p2-grid{grid-template-columns:1fr;gap:40px}.p3-grid{grid-template-columns:1fr}.page2{padding:72px 0}.sec-head{margin-bottom:52px}}html.js #page2 .p2-grid,html.js #page3 .p2-grid{perspective:1500px}html.js #page2 .p2-visual,html.js #page3 .p2-visual{opacity:0;transform:translateY(64px) rotateX(9deg) scale(.93);transform-origin:50% 85%;transition:opacity .65s var(--ease),transform 1.05s cubic-bezier(.19,1,.3,1);will-change:opacity,transform}html.js #page2 .p2-copy>*,html.js #page3 .p2-copy>*{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .8s cubic-bezier(.19,1,.3,1)}html.js #page2 .p2-copy>:first-child,html.js #page3 .p2-copy>:first-child{transition-delay:.12s}html.js #page2 .p2-copy>:nth-child(2),html.js #page3 .p2-copy>:nth-child(2){transition-delay:.24s}html.js #page2 .p2-copy .p2-list li:first-child,html.js #page3 .p2-copy .p2-list li:first-child{transition-delay:.36s}html.js #page2 .p2-copy .p2-list li:nth-child(2),html.js #page3 .p2-copy .p2-list li:nth-child(2){transition-delay:.48s}html.js #page2 .p2-copy .p2-list li:nth-child(3),html.js #page3 .p2-copy .p2-list li:nth-child(3){transition-delay:.6s}html.js #page2 .p2-copy .p2-list li,html.js #page3 .p2-copy .p2-list li{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .8s cubic-bezier(.19,1,.3,1)}html.js #page2:not(.in-view) .bx,html.js #page2:not(.in-view) .bx *,html.js #page3:not(.in-view) .dz,html.js #page3:not(.in-view) .dz *{animation-play-state:paused!important}html.js #page2.in-view .p2-copy .p2-list li,html.js #page2.in-view .p2-copy>*,html.js #page2.in-view .p2-visual,html.js #page3.in-view .p2-copy .p2-list li,html.js #page3.in-view .p2-copy>*,html.js #page3.in-view .p2-visual{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.hx-tool.run .hxv{animation:none;-webkit-text-fill-color:#c8c9c5;color:#c8c9c5}html.js #page2 .p2-copy .p2-list li,html.js #page2 .p2-copy>*,html.js #page2 .p2-visual,html.js #page3 .p2-copy .p2-list li,html.js #page3 .p2-copy>*,html.js #page3 .p2-visual{opacity:1;transform:none;transition:none}}.bx{position:relative;aspect-ratio:4/3.1;overflow:hidden;container-type:size;background:linear-gradient(180deg,#2c2c2e,#232325 40%,#19191b);border-radius:19px;padding:7px;display:flex;flex-direction:column;font-family:var(--sans);user-select:none;-webkit-user-select:none}.bx-top{display:flex;align-items:center;gap:8px;padding:4px 6px 8px}.bx-dots{display:flex;gap:5px}.bx-dots i{width:8px;height:8px;border-radius:50%}.bx-dots i:first-child{background:#ff6159}.bx-dots i:nth-child(2){background:#ffbd2e}.bx-dots i:nth-child(3){background:#28c840}.bx-body{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:23.1cqw 1fr;gap:6px;background:#141416;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:6px;padding-right:calc(32cqw + 12px);overflow:clip;animation:bxBodyPad 15s var(--ease) infinite}@keyframes bxBodyPad{0%,48.8%{padding-right:6px}51.6%,89%{padding-right:calc(32cqw + 12px)}100%,94%{padding-right:6px}}.sk{display:block;height:5px;border-radius:3px;background:#2b2c30;flex:none}.w24{width:24%}.w34{width:34%}.w38{width:38%}.w40{width:40%}.w44{width:44%}.w46{width:46%}.w52{width:52%}.w55{width:55%}.w56{width:56%}.w62{width:62%}.w64{width:64%}.w86{width:86%}.w100{width:100%}.skt{width:9px;height:4px;border-radius:2px;background:#232427;flex:none;margin-left:auto}.bx-side{position:relative;background:#1c1c1e;border:1px solid rgba(255,255,255,.06);border-radius:9px;padding:6px;display:flex;flex-direction:column;gap:5px;min-height:0}.bx-seg{display:flex;background:#141416;border:1px solid rgba(255,255,255,.07);border-radius:999px;padding:5px;margin-bottom:1px}.bx-seg span{flex:1;text-align:center;font-size:.44rem;font-weight:600;color:#85868a;padding:1.05em 0;min-height:1em;border-radius:999px}.bx-seg span.on{background:#2e2e32;color:#e8e9e5;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.bx-new{font-size:.5rem;font-weight:600;color:#c8c9c5;text-align:center;background:#232326;border:1px solid rgba(255,255,255,.09);border-radius:7px;padding:.6em 0}.bx-new .sk{height:4.5px;margin:.15em auto}.bx-lab{font-family:var(--sans);font-size:.36rem;letter-spacing:.12em;text-transform:uppercase;color:#5c5d62;padding:2px 3px 0}.bx-item{display:flex;align-items:center;gap:5px;background:#202023;border-radius:6px;padding:6.5px 7px}.bx-item .sk{height:4.5px}.bx-item.it0{outline:rgba(90,150,255,.4) solid 1px;background:#22242b}.bx-user{display:flex;align-items:center;gap:5px;margin-top:auto;padding:5px 3px 1px;border-top:1px solid rgba(255,255,255,.05)}.bx-av{width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,#3d94ff,#7fb0ff);flex:none}.bx-pop{display:none;position:absolute;right:6px;bottom:calc(100% + 5px);width:58%;z-index:3;background:#232327;border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:6px;box-shadow:0 14px 30px rgba(0,0,0,.55);opacity:0;transform:scale(.94);transform-origin:bottom right}.bx-pop b{display:block;font-family:var(--sans);font-size:.38rem;letter-spacing:.14em;color:#85868a;margin:1px 0 5px 3px}.bx-opt{font-size:.52rem;padding:.5em .6em;border-radius:6px}.bx-opt .sk{height:4px;margin:.35em 0}.bx-opt.op1{color:#fff;animation:15s infinite bxOpt}@keyframes bxOpt{0%,12.72%{background:0 0}13.12%,14.24%{background:rgba(61,148,255,.4)}100%,14.4%{background:rgba(61,148,255,.18)}}.bx-chat{position:relative;display:flex;flex-direction:column;gap:6px;padding:2px 1px;min-height:0}.bx-head{display:flex;align-items:center;gap:6px;background:#1a1a1d;border:1px solid rgba(255,255,255,.06);border-radius:7px;padding:5px 7px}.bx-vseg{display:flex;margin-left:auto;background:#141416;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:1.5px}.bx-vseg i{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:.4rem;font-weight:600;font-style:normal;color:#85868a;padding:.3em .8em;border-radius:999px;min-width:3.2em;min-height:1.15em}.bx-vseg i.on{background:#2e2e32;color:#e8e9e5}.bx-x{background:#ff6159;border-radius:50%;width:9px;height:9px;flex:none}.bx-cbody{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:2px 2px 0;animation:bxCbodyOut 15s var(--ease) infinite}@keyframes bxCbodyOut{0%,89%{opacity:1;transform:none}100%,96%{opacity:0;transform:translateY(7px)}}.bx-cbody,.bx-comp{width:100%;max-width:45cqw;margin-left:auto;margin-right:auto}.bx-bubble{align-self:flex-end;max-width:88%;font-size:.53rem;color:#e2e3df;background:#26262a;border:1px solid rgba(255,255,255,.08);border-radius:8px 8px 3px;padding:.55em .8em;animation:15s infinite bxBub}@keyframes bxBub{0%,32.4%{opacity:0;transform:translateY(5px)}100%,33.6%{opacity:1;transform:none}}.bx-cbody .bx-bubble{order:10}.bx-cbody .bx-tool.t1{order:20}.bx-cbody .bx-tool.t2{order:30}.bx-cbody .bx-gen{order:40}.bx-cbody .bx-reply{order:50}.bx-think{display:flex;align-items:center;gap:5px;animation:15s infinite bxThink,15s steps(1,end) infinite bxThinkOrd}@keyframes bxThink{0%,34%{opacity:0}35.2%,58%{opacity:1}100%,59.2%{opacity:0}}@keyframes bxThinkOrd{0%,37.04%{order:15}37.12%,41.04%{order:25}41.12%,45.04%{order:35}100%,45.12%{order:45}}.bx-star{width:6px;height:6px;border-radius:50%;background:#d97757;flex:none;animation:.85s ease-in-out infinite bxStar}@keyframes bxStar{0%,100%{opacity:.4;transform:scale(.75)}50%{opacity:1;transform:scale(1.15)}}.bx-ldl{font-size:.5rem;font-weight:500;color:#85868a;line-height:1}.bx-ldm{font-style:normal;display:flex;align-items:center}.bx-ldm::after{content:"2s · 312 tokens";font-family:var(--sans);font-size:.44rem;color:#5c5d62;line-height:1;animation:15s steps(1) infinite bxLdm}@keyframes bxLdm{0%,39.2%{content:"2s · 312 tokens"}40%,45.6%{content:"5s · 1.1k tokens"}46.4%,52%{content:"8s · 2.4k tokens"}100%,52.8%{content:"12s · 3.8k tokens"}}.bx-tool{display:flex;align-items:center;gap:5px;font-family:var(--sans);font-size:.48rem;white-space:nowrap;color:#9d9e9a;padding-left:2px}.bx-tool b{font-weight:600;color:#c8c9c5}.bx-tool span{color:#85868a}.bx-tool.t1{animation:15s infinite bxT1}.bx-tool.t2{animation:15s infinite bxT2}@keyframes bxT1{0%,37.2%{opacity:0;transform:translateY(4px)}100%,38.4%{opacity:1;transform:none}}@keyframes bxT2{0%,41.2%{opacity:0;transform:translateY(4px)}100%,42.4%{opacity:1;transform:none}}@keyframes bxT3{0%,45.2%{opacity:0;transform:translateY(4px)}100%,46.4%{opacity:1;transform:none}}.bx-shim{background:linear-gradient(90deg,rgba(157,158,154,.45) 0,rgba(255,255,255,.95) 50%,rgba(157,158,154,.45) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:1.6s linear infinite ms2Shimmer}.bx-gen{align-self:flex-start;width:72%;background:rgba(0,0,0,.34);border:1px solid rgba(0,0,0,.5);border-radius:10px;padding:7px 8px 8px;box-shadow:inset 0 2px 7px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.045),0 1px 0 rgba(255,255,255,.04);animation:15s infinite bxT3}.bx-genh{display:flex;align-items:center;gap:4px;margin-bottom:6px}.bx-genh b{font-family:var(--sans);font-weight:600;font-size:.46rem;letter-spacing:.02em}.bx-wdot{width:6px;height:6px;border-radius:50%;background:#e8e9e5;flex:none;animation:1.5s ease-in-out infinite bxGhPulse}@keyframes bxGhPulse{0%,100%{opacity:.35;transform:scale(.86)}50%{opacity:1;transform:scale(1)}}.bx-glbl{display:grid}.bx-glbl b{grid-area:1/1;white-space:nowrap}.bx-glbl .g1{animation:1.6s linear infinite ms2Shimmer,15s infinite bxG1}.bx-glbl .g2{color:#c8c9c5;opacity:0;animation:15s infinite bxG2}@keyframes bxG1{0%,57.2%{opacity:1}100%,57.6%{opacity:0}}@keyframes bxG2{0%,57.2%{opacity:0}100%,57.6%{opacity:1}}.bx-dots3{font-style:normal}.bx-dots3::after{content:"";font-family:var(--sans);font-weight:600;font-size:.46rem;color:#9d9e9a;-webkit-text-fill-color:#9d9e9a;animation:1.3s steps(1) infinite bxDots}@keyframes bxDots{0%{content:""}25%{content:"."}50%{content:".."}100%,75%{content:"..."}}.bx-cell{position:relative;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:linear-gradient(150deg,#2d3038 0,#24262d 100%);box-shadow:inset 0 1px 3px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.35)}.bx-cell .bx-wdot.big{position:absolute;left:50%;top:50%;width:24%;height:24%;transform:translate(-50%,-50%);background:#dfe3ea;animation:1.9s ease-in-out infinite bxIlFade}@keyframes bxIlFade{0%,100%{opacity:.2;transform:translate(-50%,-50%) scale(.55)}50%{opacity:.82;transform:translate(-50%,-50%) scale(1.18)}}.bx-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:15s infinite bxImgIn}@keyframes bxImgIn{0%,56.4%{opacity:0}100%,58%{opacity:1}}.bx-reply{display:flex;flex-direction:column;gap:5px;animation:15s infinite bxRep}@keyframes bxRep{0%,58.8%{opacity:0;transform:translateY(4px)}100%,60%{opacity:1;transform:none}}.bx-comp{position:relative;margin-top:auto;display:flex;flex-direction:column;gap:5px;background:#1c1c1e;border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:6px 7px}.bx-cin{display:flex;align-items:center;min-height:11px;position:relative;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:4px 6px;box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}.bx-ph{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:.5rem;color:#5c5d62;white-space:nowrap;animation:15s infinite bxPh}@keyframes bxPh{0%,18.4%{opacity:1}19.2%,32.8%{opacity:0}100%,33.6%{opacity:1}}.bx-type{font-family:var(--sans);font-size:.5rem;color:#c8c9c5;white-space:nowrap;overflow:hidden;width:0;animation:15s steps(27,end) infinite bxType}@keyframes bxType{0%,20%{width:0}31.2%,32.4%{width:13em}100%,32.8%{width:0}}.bx-caret{width:1.5px;height:.8em;background:#7fb0ff;flex:none;opacity:0;animation:15s infinite bxCaret}@keyframes bxCaret{0%,18.4%{opacity:0}19.2%,20.8%{opacity:1}21.6%,23.2%{opacity:0}24%,25.6%{opacity:1}26.4%,28%{opacity:0}28.8%,32%{opacity:1}100%,32.8%{opacity:0}}.bx-crow{display:flex;align-items:center;gap:4px}.bx-cchip{display:flex;align-items:center;width:15%;background:#232326;border:1px solid rgba(255,255,255,.07);border-radius:999px;padding:3.5px 6px}.bx-cchip .sk{height:3.5px}.bx-cfill{flex:1}.bx-chip{display:flex;align-items:center;font-size:.42rem;flex:none;background:rgba(61,148,255,.14);border:1px solid rgba(61,148,255,.3);border-radius:999px;padding:.34em .8em}.bx-chip .sk{width:5.5em;height:3.5px;margin:.3em 0;background:rgba(127,176,255,.4)}.bx-ring{width:11px;height:11px;flex:none;transform:rotate(-90deg)}.bx-ring circle{fill:none;stroke-width:2.4}.bx-ring .rb{stroke:#2b2c30}.bx-ring .rf{stroke:#3d94ff;stroke-dasharray:34.5;stroke-dashoffset:26;stroke-linecap:round}.bx-send{width:13px;height:13px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(180deg,#55a2ff,#1f74e6);animation:15s infinite bxSend}@keyframes bxSend{0%,31.6%{transform:scale(1)}32.16%{transform:scale(.8)}100%,32.8%{transform:scale(1)}}.bx-prev{position:absolute;top:6px;right:6px;bottom:6px;width:32cqw;z-index:2;display:flex;flex-direction:column;background:#1c1c1e;border:1px solid rgba(255,255,255,.06);border-radius:9px;overflow:hidden;animation:bxPrevIn 15s var(--ease) infinite}@keyframes bxPrevIn{0%,48.8%{transform:translateX(calc(100% + 12px))}51.6%,89%{transform:translateX(0)}100%,94%{transform:translateX(calc(100% + 12px))}}.bx-tabs{display:flex;align-items:center;gap:3px;background:#161618;padding:4px 5px 0}.bx-tab{display:flex;align-items:center;width:30%;padding:4.5px 7px;border-radius:6px 6px 0 0}.bx-tab.on{background:#232326}.bx-tab .sk{height:4px}.bx-tabadd{font-size:.55rem;color:#85868a;padding:0 4px;line-height:1}.bx-purl{display:flex;align-items:center;gap:4px;background:#232326;padding:4px 6px}.bx-pnavb{width:10px;height:10px;border-radius:50%;background:#2b2c30;flex:none;display:grid;place-items:center;font-style:normal}.bx-pnavb svg{width:6px;height:6px;fill:none;stroke:#9d9e9a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.bx-pnavb.off{opacity:.4}.bx-omni{flex:1;display:flex;align-items:center;gap:4px;background:#141416;border:1px solid rgba(255,255,255,.07);border-radius:999px;padding:3px 7px}.bx-lockd{width:5px;height:5px;border-radius:50%;background:#28c840;flex:none}.bx-omni .sk{height:3.5px}.bx-page{flex:1;min-height:0;background:#f5f7fb;padding:9px 10px 10px;margin:5px;border-radius:7px;display:flex;flex-direction:column;gap:7px;align-items:center;overflow:hidden}.skl{display:block;height:5px;border-radius:3px;background:#dde2ec;flex:none}.w9{width:9%}.w14{width:14%}.w42{width:42%}.w48{width:48%}.w58{width:58%}.w66{width:66%}.w70{width:70%}.skl.hl{height:9px;width:58%;background:#c9d0de;border-radius:4px;margin-top:7px;animation:15s infinite bxPl1}.skl.hl2{height:9px;width:42%;background:#c9d0de;border-radius:4px;animation:15s infinite bxPl1}.skl.sub{margin-top:2px;animation:15s infinite bxPl2}.bx-pnav{display:flex;align-items:center;gap:5px;width:100%;animation:15s infinite bxPnav}.bx-pnav .skl{margin:0}.bx-pfill{flex:1}@keyframes bxPnav{0%,55.6%{opacity:0}100%,56.8%{opacity:1}}@keyframes bxPl1{0%,57.2%{opacity:0;transform:translateY(3px)}100%,58.4%{opacity:1;transform:none}}@keyframes bxPl2{0%,58%{opacity:0;transform:translateY(3px)}100%,59.2%{opacity:1;transform:none}}.bx-plogo{width:9px;height:9px;border-radius:3px;background:var(--grad-ui);flex:none}.bx-pbtn{width:12%;height:9px;border-radius:999px;background:var(--grad-ui);flex:none;margin-left:3px}.bx-pcta{width:26%;height:11px;border-radius:999px;background:var(--grad-ui);margin:2px 0 1px;box-shadow:0 2px 6px rgba(61,148,255,.35);animation:15s infinite bxPcta}@keyframes bxPcta{0%,59.6%{opacity:0;transform:translateY(3px)}100%,60.8%{opacity:1;transform:none}}.bx-phero{width:100%;aspect-ratio:16/7.6;border-radius:7px;object-fit:cover;box-shadow:0 2px 8px rgba(24,32,63,.14);animation:bxHero 15s var(--ease) infinite}@keyframes bxHero{0%,60.4%{opacity:0;transform:scale(.9)}100%,62%{opacity:1;transform:scale(1)}}.bx-pcards{display:flex;gap:7px;width:100%;margin-top:1px;animation:15s infinite bxPcd}.bx-pcards i{flex:1;border-radius:6px;background:#fff;border:1px solid #e6eaf2;box-shadow:0 1px 3px rgba(24,32,63,.06);display:flex;flex-direction:column;gap:4px;padding:7px 7px 9px}.bx-pcards i::before{content:"";width:100%;aspect-ratio:16/7;border-radius:4px;background:linear-gradient(140deg,#e4ebf8,#d5deef);margin-bottom:2px}@keyframes bxPcd{0%,63.6%{opacity:0;transform:translateY(4px)}100%,64.8%{opacity:1;transform:none}}.bx-plogos{display:flex;align-items:center;justify-content:center;gap:8px;width:88%;margin-top:1px;animation:bxPmid 15s var(--ease) infinite}.bx-plogos span{height:6px;border-radius:3px;background:#d6dcea;flex:1}.bx-psplit{display:flex;align-items:center;gap:9px;width:100%;animation:bxPmid2 15s var(--ease) infinite}.bx-pshot{width:42%;aspect-ratio:4/3.4;border-radius:6px;flex:none;background:linear-gradient(140deg,#e4ebf8,#d5deef);border:1px solid #e6eaf2;box-shadow:0 1px 3px rgba(24,32,63,.06)}.bx-ptxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}.bx-ptxt .skl{height:6px}.bx-ptxt .skl.h{height:8px;background:#c9d0de;border-radius:4px;margin-bottom:1px}.bx-ptxt .skl.sub{margin-top:2px;background:var(--grad-ui);opacity:.85}@keyframes bxPmid{0%,61.6%{opacity:0;transform:translateY(3px)}100%,62.8%{opacity:1;transform:none}}@keyframes bxPmid2{0%,62.4%{opacity:0;transform:translateY(3px)}100%,63.6%{opacity:1;transform:none}}.bx-pcta2{width:100%;border-radius:8px;padding:11px 12px;margin-top:3px;display:flex;flex-direction:column;align-items:center;gap:6px;background:linear-gradient(140deg,#eef3fc,#e2eaf8);border:1px solid #dce4f2;animation:bxPfoot 15s var(--ease) infinite}.bx-pcta2h{width:44%;height:8px;border-radius:4px;background:#c2ccdd}.bx-pcta2b{width:24%;height:11px;border-radius:999px;background:var(--grad-ui);box-shadow:0 2px 6px rgba(61,148,255,.3)}.bx-pfoot{display:flex;align-items:flex-start;gap:12px;width:100%;padding:2px 2px 0;animation:bxPfoot2 15s var(--ease) infinite}.bx-pflogo{width:16px;height:16px;border-radius:5px;background:var(--grad-ui);flex:none;margin-right:auto}.bx-pfcol{display:flex;flex-direction:column;gap:4px;width:15%}.bx-pfcol i{height:4px;border-radius:2px;background:#d6dcea}.bx-pfcol i:first-child{width:70%;background:#c2ccdd}@keyframes bxPfoot{0%,65.6%{opacity:0;transform:translateY(4px)}100%,66.8%{opacity:1;transform:none}}@keyframes bxPfoot2{0%,66.6%{opacity:0;transform:translateY(4px)}100%,67.8%{opacity:1;transform:none}}.bx *{animation-delay:-3s!important}@media (prefers-reduced-motion:reduce){.bx,.bx *{animation:none!important}.bx-caret,.bx-glbl .g1,.bx-ph,.bx-pop,.bx-think,.bx-type{display:none}.bx-glbl .g2{opacity:1}.bx-shim{-webkit-text-fill-color:#c8c9c5;color:#c8c9c5;background:0 0}}.dz{position:relative;aspect-ratio:16/10.5;overflow:hidden;background:linear-gradient(180deg,#2c2c2e,#232325 40%,#19191b);border-radius:19px;font-family:var(--sans);user-select:none;-webkit-user-select:none}.dz-scale{position:absolute;left:0;top:0;width:653px;height:429px;zoom:var(--dzs,1);padding:7px;display:flex;flex-direction:column}.dz .bx-top{padding:4px 6px 8px}.dz-body{position:relative;flex:1;min-height:0;display:flex;gap:6px}.dz-stage{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;background:#1c1c1e;border:1px solid rgba(255,255,255,.06);border-radius:9px;overflow:hidden}.dz-view{position:relative;flex:1;min-height:0;margin:5px}.dz-page{position:absolute;inset:0;overflow:hidden;background:#f5f7fb;border-radius:7px;padding:9px 10px 10px;display:flex;flex-direction:column;gap:7px;align-items:center;animation:19s steps(1) infinite dzPageBg}@keyframes dzPageBg{0%,62.8%{background:#f5f7fb}62.9%,95%{background:#fbf3f7}100%,97%{background:#f5f7fb}}.dz-page .bx-pnav{opacity:1;animation:none;margin-bottom:1px}.dz-hero{position:relative;width:100%;height:112px;min-height:112px;max-height:112px;flex:0 0 112px;border-radius:7px;overflow:hidden;box-shadow:0 2px 8px rgba(24,32,63,.14)}.dz-himg{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%;display:block;transform:translate(12px,-23px) scale(1.856);transform-origin:center center}.dz-himg2{opacity:0;animation:dzHero2 19s var(--ease) infinite}@keyframes dzHero2{0%,62.9%{opacity:0}64.4%,95%{opacity:1}100%,97%{opacity:0}}.dz-h{position:relative;font-family:var(--disp);font-weight:800;color:#1a2233;letter-spacing:-.02em;font-size:.98rem;line-height:1;margin-top:3px;animation:dzHead 19s var(--ease) infinite}@keyframes dzHead{0%,4.5%{font-size:.98rem}6.3%,95%{font-size:1.26rem}100%,97%{font-size:.98rem}}.dz-sub{margin-top:1px}.dz-cta{font-size:.5rem;font-weight:700;color:#fff;border-radius:999px;padding:.55em 1.15em;margin-top:2px;background:linear-gradient(180deg,#55a2ff,#2f7fee);box-shadow:0 3px 8px rgba(61,148,255,.4)}.dz-feats{display:flex;gap:6px;width:100%;margin-top:1px}.dz-feats i{flex:1;border-radius:6px;background:#fff;border:1px solid #e6eaf2;box-shadow:0 1px 3px rgba(24,32,63,.06);display:flex;flex-direction:column;gap:4px;padding:6px 6px 7px}.dz-feats s{width:10px;height:10px;border-radius:4px;background:linear-gradient(140deg,#55a2ff,#2f7fee);margin-bottom:2px}.dz-feats s.f2{background:linear-gradient(140deg,#34cfae,#1ba585)}.dz-feats s.f3{background:linear-gradient(140deg,#ffb054,#f0862e)}.dz-cards{position:relative;display:flex;gap:6px;width:100%;margin-top:auto}.dz-cards i{flex:1;border-radius:6px;background:#fff;border:1px solid #e6eaf2;box-shadow:0 1px 3px rgba(24,32,63,.06);display:flex;flex-direction:column;gap:4px;padding:6px 6px 8px;animation:19s steps(1) infinite dzCard}.dz-cards i::before{content:"";width:100%;aspect-ratio:16/7;border-radius:4px;background:linear-gradient(140deg,#e4ebf8,#d5deef);margin-bottom:2px;animation:19s steps(1) infinite dzCardImg}@keyframes dzCard{0%,17.7%{background:#fff;border-color:#e6eaf2}18%,95%{background:#eaf3ff;border-color:#b9d8ff}100%,97%{background:#fff;border-color:#e6eaf2}}@keyframes dzCardImg{0%,17.7%{background:linear-gradient(140deg,#e4ebf8,#d5deef)}18%,95%{background:linear-gradient(140deg,#4f9dff,#2467d6)}100%,97%{background:linear-gradient(140deg,#e4ebf8,#d5deef)}}.dz-sel{position:absolute;inset:-3px;pointer-events:none;z-index:3;border:1.5px solid #4c9aff;border-radius:3px;box-shadow:0 0 0 1px rgba(76,154,255,.2),0 6px 16px rgba(30,90,220,.28);opacity:0}.dz-sel .hd{position:absolute;width:6px;height:6px;background:#fff;border:1.5px solid #4c9aff;border-radius:1.5px}.dz-sel .nw{left:-3.5px;top:-3.5px}.dz-sel .ne{right:-3.5px;top:-3.5px}.dz-sel .sw{left:-3.5px;bottom:-3.5px}.dz-sel .se{right:-3.5px;bottom:-3.5px}.dz-tag{position:absolute;left:-1.5px;top:-15px;font-weight:700;color:#fff;font-size:.4rem;background:#4c9aff;border-radius:4px 4px 4px 0;padding:.2em .55em;line-height:1.2;white-space:nowrap}.s-h{animation:dzGizH 19s var(--ease) infinite}@keyframes dzGizH{0%,2.9%{opacity:0;transform:scale(.97)}3.4%,9.9%{opacity:1;transform:scale(1)}10.6%,100%{opacity:0;transform:scale(.99)}}.s-hero{inset:2px;border-radius:5px;animation:dzGizHero 19s var(--ease) infinite}.s-hero .nw{left:0;top:0}.s-hero .ne{right:0;top:0}.s-hero .sw{left:0;bottom:0}.s-hero .se{right:0;bottom:0}.s-hero .dz-tag{left:0;top:0;border-radius:0 4px 4px 0}@keyframes dzGizHero{0%,43%{opacity:0;transform:scale(.99)}43.8%,52.3%{opacity:1;transform:scale(1)}100%,53%{opacity:0;transform:scale(.99)}}.dz-abox{position:absolute;inset:-4px;z-index:3;pointer-events:none;border-radius:4px;border:2.5px solid #ffcf16;background:rgba(255,207,22,.22);box-shadow:0 0 0 1px rgba(0,0,0,.15),0 4px 14px rgba(190,150,0,.35);opacity:0;clip-path:inset(0 100% 100% 0);animation:dzABox 19s var(--ease) infinite}.dz-abox b{position:absolute;left:-9px;top:-9px;width:16px;height:16px;border-radius:50%;background:#ffcf16;color:#1c1c1e;font-size:.44rem;font-weight:800;box-shadow:0 2px 5px rgba(120,90,0,.5);display:flex;align-items:center;justify-content:center}@keyframes dzABox{0%,11.7%{opacity:0;clip-path:inset(0 100% 100% 0)}12%{opacity:1;clip-path:inset(0 100% 100% 0)}14.4%,18%{opacity:1;clip-path:inset(0 0 0 0)}100%,19.9%{opacity:0;clip-path:inset(0 0 0 0)}}.dz-stage{flex-direction:row}.dz-rail{flex:none;width:26px;display:flex;flex-direction:column;gap:3px;align-items:center;background:#1b1b1d;border-right:1px solid rgba(255,255,255,.07);padding:6px 0}.dz-main{flex:1;min-width:0;display:flex;flex-direction:column}.dz-tool{width:20px;height:19px;border-radius:5px;border:0;background:0 0;display:grid;place-items:center;color:#b9bab3}.dz-tool svg{width:11px;height:11px}.dz-tool.dz-ib{color:#5c5d62}.dz-rsep{width:14px;height:1px;background:rgba(255,255,255,.1);margin:2px 0}.dz-t-move{animation:19s steps(1) infinite dzTMove}.dz-t-box{animation:19s steps(1) infinite dzTBox}@keyframes dzTMove{0%,1.1%{background:0 0;color:#b9bab3}1.2%,8.8%{background:#3b82f6;color:#fff}40.9%,8.9%{background:0 0;color:#b9bab3}41%,51.6%{background:#3b82f6;color:#fff}100%,51.7%{background:0 0;color:#b9bab3}}@keyframes dzTBox{0%,9.6%{background:0 0;color:#b9bab3}19.2%,9.7%{background:#3b82f6;color:#fff}100%,19.3%{background:0 0;color:#b9bab3}}.dz-chat{flex:none;width:33%;min-width:0;display:flex;flex-direction:column;gap:6px;padding:6px;background:rgba(0,0,0,.3);border:1px solid rgba(0,0,0,.45);border-radius:9px;box-shadow:inset 0 2px 7px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.035),0 1px 0 rgba(255,255,255,.04)}.dz-cbody{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:2px 2px 0}.dz-cbody .dz-batt{order:5}.dz-cbody .dz-bubble{order:10}.dz-cbody .dz-tl{order:20}.dz-cbody .dz-reply{order:30}.dz-cbody .dz-batt2{order:50}.dz-cbody .dz-bub2{order:55}.dz-cbody .dz-genrow{order:65}.dz-bubble{align-self:flex-end;max-width:92%;font-size:.5rem;color:#e2e3df;background:#26262a;border:1px solid rgba(255,255,255,.08);border-radius:8px 8px 3px;padding:.55em .8em;opacity:0;animation:dzBub 19s var(--ease) infinite}@keyframes dzBub{0%,22.8%{opacity:0;transform:translateY(5px)}23.7%,95%{opacity:1;transform:none}100%,97%{opacity:0;transform:translateY(5px)}}.dz-bub2{animation-name:dzBub2}@keyframes dzBub2{0%,54.3%{opacity:0;transform:translateY(5px)}55.2%,95%{opacity:1;transform:none}100%,97%{opacity:0;transform:translateY(5px)}}.dz-reply{display:flex;flex-direction:column;gap:5px;padding-left:2px;opacity:0;animation:dzReply 19s var(--ease) infinite}.dz-reply .sk{height:4.5px}@keyframes dzReply{0%,29.7%{opacity:0;transform:translateY(4px)}30.5%,95%{opacity:1;transform:none}100%,97%{opacity:0;transform:translateY(4px)}}.dz-thumb{width:11px;height:11px;border-radius:3.5px;flex:none;background:linear-gradient(140deg,#e4ebf8,#c8d6ec)}.dz-thumb-img{background:url(assets/bx-hero.jpg) center/cover}.dz-batt{align-self:flex-end;margin-bottom:-2px;display:inline-flex;align-items:center;gap:4px;background:#1c1c1e;border:1px solid rgba(255,255,255,.09);border-radius:5px;padding:2.5px 5px;opacity:0;animation:dzBub 19s var(--ease) infinite}.dz-batt .sk{width:32px;height:3.5px}.dz-batt2{animation-name:dzBub2}.dz-think{display:flex;align-items:center;gap:5px;opacity:0;animation:dzThink 19s var(--ease) infinite,dzThinkOrd 19s steps(1,end) infinite}@keyframes dzThink{0%,24%{opacity:0}24.8%,28.7%{opacity:1}29.6%,58.9%{opacity:0}59.7%,64.8%{opacity:1}100%,65.9%{opacity:0}}@keyframes dzThinkOrd{0%,24.7%{order:99}24.8%,29.6%{order:25}29.7%,59.6%{order:99}59.7%,65.9%{order:60}100%,66%{order:99}}.dz-ldm{font-style:normal;display:flex;align-items:center}.dz-ldm::after{content:"3s · 512 tokens";font-family:var(--mono);font-size:.44rem;color:#5c5d62;line-height:1;animation:19s steps(1) infinite dzLdm}@keyframes dzLdm{0%,25.8%{content:"3s \00b7 512 tokens"}25.9%,27.3%{content:"5s \00b7 1.4k tokens"}27.4%,59.6%{content:"7s \00b7 2.6k tokens"}59.7%,61.9%{content:"4s \00b7 1.1k tokens"}100%,62%{content:"9s \00b7 3.4k tokens"}}.dz-tl{display:flex;align-items:center;gap:5px;font-family:var(--sans);font-size:.48rem;white-space:nowrap;padding-left:2px;opacity:0;animation:dzTl 19s var(--ease) infinite}.dz-tl b{font-weight:600;color:#c8c9c5}.dz-tl span{color:#85868a}@keyframes dzTl{0%,25.7%{opacity:0;transform:translateY(4px)}26.5%,95%{opacity:1;transform:none}100%,97%{opacity:0;transform:translateY(4px)}}.dz-genrow{display:flex;align-items:center;gap:5px;padding-left:2px;opacity:0;animation:dzGen 19s var(--ease) infinite}.dz-wdot{width:6px;height:6px;border-radius:50%;background:#e8e9e5;flex:none;animation:1.5s ease-in-out infinite bxGhPulse}.dz-gentxt{font-family:var(--sans);font-weight:600;font-size:.5rem;letter-spacing:.01em;white-space:nowrap;background:linear-gradient(90deg,rgba(157,158,154,.45) 0,rgba(255,255,255,.95) 50%,rgba(157,158,154,.45) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:1.6s linear infinite ms2Shimmer}@keyframes dzGen{0%,61.4%{opacity:0;transform:translateY(4px)}62.3%,95%{opacity:1;transform:none}100%,97%{opacity:0;transform:translateY(4px)}}.dz-comp{position:relative;margin-top:auto;display:flex;flex-direction:column;gap:5px;background:#1c1c1e;border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:6px 7px}.dz-attrow{display:flex;overflow:hidden;max-height:0;opacity:0;margin-bottom:-5px;animation:dzAttRow 19s var(--ease) infinite}@keyframes dzAttRow{0%,14.7%{max-height:0;opacity:0;margin-bottom:-5px}15.8%,22.1%{max-height:20px;opacity:1;margin-bottom:0}22.8%,44.9%{max-height:0;opacity:0;margin-bottom:-5px}46%,53.8%{max-height:20px;opacity:1;margin-bottom:0}100%,54.5%{max-height:0;opacity:0;margin-bottom:-5px}}.dz-att{display:inline-flex;align-items:center;gap:4px;padding:2.5px 6px 2.5px 3px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.09);border-radius:999px;animation:19s steps(1) infinite dzAttA}.dz-att .sk{width:32px;height:3.5px}.dz-att2{animation:19s steps(1) infinite dzAttB}@keyframes dzAttA{0%,44.2%{display:inline-flex}100%,44.3%{display:none}}@keyframes dzAttB{0%,44.2%{display:none}100%,44.3%{display:inline-flex}}.dz-atx{font-style:normal;color:#5c5d62;font-size:.42rem;line-height:1;padding:0 1px}.dz-cin{display:flex;align-items:center;min-height:11px;position:relative;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:4px 6px;box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}.dz-ph{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:.5rem;color:#5c5d62;white-space:nowrap;animation:19s infinite dzPh}@keyframes dzPh{0%,16.1%{opacity:1}16.6%,22.4%{opacity:0}23.1%,46.7%{opacity:1}47.2%,54.4%{opacity:0}100%,55.2%{opacity:1}}.dz-type{font-family:var(--mono);font-size:.5rem;color:#c8c9c5;white-space:nowrap;overflow:hidden;width:0;animation:19s steps(26,end) infinite dzTypeK}.dz-type2{animation:19s steps(27,end) infinite dzType2K}@keyframes dzType2K{0%,46.7%{width:0}53.4%,54.2%{width:33ch}100%,54.5%{width:0}}@keyframes dzTypeK{0%,16.3%{width:0}21.5%,22.5%{width:26ch}100%,22.7%{width:0}}.dz-caret{width:1.5px;height:.8em;background:#7fb0ff;flex:none;opacity:0;animation:19s infinite dzCaretK}@keyframes dzCaretK{0%,16.1%{opacity:0}16.6%,17.4%{opacity:1}17.9%,18.7%{opacity:0}19.2%,20%{opacity:1}20.6%,21.3%{opacity:0}21.8%,22.4%{opacity:1}22.7%,46.7%{opacity:0}47.2%,48%{opacity:1}48.5%,49.3%{opacity:0}49.8%,50.5%{opacity:1}51.1%,51.9%{opacity:0}52.4%,54.1%{opacity:1}100%,54.4%{opacity:0}}.dz-crow{display:flex;align-items:center;gap:4px}.dz-send{width:13px;height:13px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(180deg,#55a2ff,#1f74e6);animation:19s infinite dzSendK}@keyframes dzSendK{0%,22.3%{transform:scale(1)}22.5%{transform:scale(.8)}22.9%,54%{transform:scale(1)}54.3%{transform:scale(.8)}100%,54.7%{transform:scale(1)}}.dz-cur{position:absolute;left:0;top:0;width:15px;height:15px;z-index:6;pointer-events:none;fill:#fff;stroke:#0a0a0c;stroke-width:1.2;animation:dzCur 19s var(--ease) infinite}@keyframes dzCur{0%{transform:translate(447px,166px) scale(1)}0.7%{transform:translate(236px,70.5px) scale(1)}1.2%{transform:translate(236px,70.5px) scale(.82)}1.6%{transform:translate(236px,70.5px) scale(1)}2.4%{transform:translate(447px,211.5px) scale(1)}2.9%{transform:translate(447px,211.5px) scale(.82)}3.3%{transform:translate(447px,211.5px) scale(1)}4.1%{transform:translate(537px,222px) scale(.82)}5.9%{transform:translate(556px,230.5px) scale(.82)}6.5%{transform:translate(556px,230.5px) scale(1)}8.5%{transform:translate(236px,93.5px) scale(1)}9.6%{transform:translate(236px,93.5px) scale(.82)}10.2%{transform:translate(236px,93.5px) scale(1)}11.4%{transform:translate(268.5px,299px) scale(1)}12%{transform:translate(268.5px,299px) scale(.82)}14.4%{transform:translate(626px,396.5px) scale(.82)}15.1%{transform:translate(626px,396.5px) scale(1)}16.2%{transform:translate(102px,367.5px) scale(1)}16.6%{transform:translate(102px,367.5px) scale(.82)}17.1%,21.7%{transform:translate(102px,367.5px) scale(1)}22.3%{transform:translate(194.5px,400.5px) scale(1)}22.5%{transform:translate(194.5px,400.5px) scale(.82)}23.1%{transform:translate(194.5px,400.5px) scale(1)}25.1%,39.8%{transform:translate(447px,166px) scale(1)}40.9%{transform:translate(236px,93.5px) scale(1)}41.3%{transform:translate(236px,93.5px) scale(.82)}41.9%{transform:translate(236px,93.5px) scale(1)}43.1%{transform:translate(430px,180px) scale(1)}43.6%{transform:translate(430px,180px) scale(.82)}44.2%{transform:translate(430px,180px) scale(1)}46.7%{transform:translate(102px,367.5px) scale(1)}47.2%{transform:translate(102px,367.5px) scale(.82)}47.8%,53.6%{transform:translate(102px,367.5px) scale(1)}54%{transform:translate(194.5px,400.5px) scale(1)}54.3%{transform:translate(194.5px,400.5px) scale(.82)}54.8%{transform:translate(194.5px,400.5px) scale(1)}100%,57.5%{transform:translate(447px,166px) scale(1)}}@media (prefers-reduced-motion:reduce){.dz,.dz *{animation:none!important}.dz-abox,.dz-att,.dz-batt,.dz-bubble,.dz-caret,.dz-cur,.dz-genrow,.dz-himg2,.dz-reply,.dz-sel,.dz-think,.dz-tl,.dz-type{display:none}}.sect-in{max-width:1365px;margin:0 auto;padding:0 28px}.sect-in-narrow{max-width:860px}.sect-head{margin-bottom:52px;max-width:760px}.sect-head-c{margin-left:auto;margin-right:auto;text-align:center}.sect-h2{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,3.8vw,3.1rem);line-height:1.08;letter-spacing:-.02em;margin-bottom:18px}.sect-h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.sect-sub{font-size:1.08rem;color:var(--body-c);max-width:62ch}.sect-head-c .sect-sub{margin:0 auto}.sect-sub strong{color:var(--ink)}.bento{display:grid;gap:24px;grid-template-columns:repeat(6,1fr);grid-template-areas:"key key key gau gau gau" "dia dia ring ring per per" "ses ses str str str str"}.cell{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:36px 36px 34px;position:relative;overflow:hidden;box-shadow:var(--card-sh);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}.cell:hover{transform:translateY(-4px);box-shadow:var(--card-sh-hover)}.cell h3{font-family:var(--disp);font-weight:700;font-size:1.38rem;line-height:1.15;letter-spacing:-.012em;margin-bottom:12px}.cell p{font-size:.95rem;color:var(--body-c);line-height:1.6}.cell-ring{grid-area:ring}.gauges{display:flex;gap:18px;margin-top:26px;height:132px;align-items:flex-end;justify-content:center}.gauge{position:relative;width:44px;height:112px;background:#eef1f9;border:1px solid var(--line);border-radius:11px;overflow:visible}.gauge-fill{position:absolute;left:3px;right:3px;bottom:3px;border-radius:8px;height:4%;background:linear-gradient(180deg,#6fb2ff,#2f8dff);box-shadow:0 2px 8px rgba(61,149,255,.45);transition:height 1.1s var(--ease)}.on .gauge-fill{height:var(--h,4%)}.dial{width:128px;height:128px;position:relative;cursor:pointer}.dial-needle{position:absolute;left:50%;top:50%;width:4px;height:52px;border-radius:3px;background:linear-gradient(#6fb2ff,#2f8dff);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(-120deg);transition:transform 1.4s cubic-bezier(.34,1.3,.5,1);box-shadow:0 0 6px rgba(79,124,255,.45)}.on .dial-needle{transform:translate(-50%,-100%) rotate(120deg)}.dial-detents{display:flex;gap:10px;font-family:var(--mono);font-size:.52rem;letter-spacing:.05em;color:var(--mut);user-select:none;-webkit-user-select:none}.gauge{cursor:pointer;transition:border-color .2s,transform .2s var(--ease)}.gauge:hover{transform:translateY(-2px);border-color:#bcccf0}.gauge.sel{border-color:var(--blue)}.gauge.sel .gauge-fill{box-shadow:0 0 0 2px rgba(79,124,255,.25),0 4px 14px rgba(79,124,255,.55)}.dial-detents span{cursor:pointer;padding:.15em .3em;border-radius:5px;transition:color .2s,background .2s}.dial-detents span:hover{color:var(--blue-deep);background:rgba(79,124,255,.08)}.dial-detents span.on{color:var(--blue-deep);font-weight:700;background:rgba(79,124,255,.12)}.lever{display:flex;gap:16px}.lever-track{position:relative;width:32px;flex:none;border-radius:16px;align-self:flex-start;background:rgba(12,16,28,.42);box-shadow:inset 0 2px 5px rgba(0,0,0,.5);overflow:hidden;cursor:grab;touch-action:none}.lever-track.dragging{cursor:grabbing}.lever-track.dragging .lever-cap{cursor:grabbing}.lever-track.dragging .lever-cap,.lever-track.dragging .lever-fill{transition:background .2s var(--ease)}.lever-fill{position:absolute;left:3px;right:3px;bottom:3px;height:0;z-index:1;border-radius:10px;background:color-mix(in srgb,var(--lever-tint,#8b5cf6) 55%,transparent);transition:height .28s var(--ease),background .2s var(--ease)}.lever-cap{cursor:grab;position:absolute;left:3px;right:3px;height:32px;bottom:3px;z-index:3;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3);transition:bottom .28s var(--ease),background .2s var(--ease)}.lever-rows{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.lever-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;padding:9px 13px;border-radius:10px;border:1px solid transparent;background:0 0;font:inherit;color:var(--ink);transition:background .14s var(--ease),border-color .14s var(--ease),box-shadow .14s var(--ease)}.lever-row:hover{background:var(--ux-row)}.lever-row.active{background:linear-gradient(180deg,#fff,#eef3fc);border-color:var(--ux-bd);box-shadow:0 2px 8px -2px rgba(24,40,90,.2),inset 0 1px 0 #fff}@media (prefers-reduced-motion:reduce){.lever-cap,.lever-fill{transition:background .2s var(--ease)}}.dc-track{display:flex;align-items:center;transition:transform .55s var(--ease)}.dc-slide{flex:0 0 100%;min-width:0;display:flex;align-items:center;padding-inline:2px;opacity:0;transition:opacity .45s var(--ease)}.dc-slide.on{opacity:1}.dc-dot{position:relative;overflow:hidden;width:9px;height:9px;padding:0;border:none;cursor:pointer;border-radius:999px;background:#aab6cc;transition:width .35s var(--ease),background .3s}.dc-dot:hover{background:#8fa1c2}.dc-dot.on{width:24px;background:var(--blue)}.dc-dot.on::after{content:"";position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.4);transform-origin:left;transform:scaleX(0);animation:3.8s linear forwards dcProg}@keyframes dcProg{to{transform:scaleX(1)}}@media (prefers-reduced-motion:reduce){.dc-track{transition:none}.dc-dot.on::after{display:none}}.bigring{width:128px;height:128px;transform:rotate(-90deg)}.mb-nav{display:flex;align-items:center;gap:8px}.mb-logo{display:flex;align-items:center;gap:5px}.mb-logo::before{content:"";width:14px;height:14px;border-radius:5px;background:var(--grad-ui)}.mb-logo::after{content:"";width:32px;height:6px;border-radius:3px;background:#181b23}.mb-links{display:flex;gap:9px;margin-left:auto}.mb-links i{width:20px;height:5px;border-radius:3px;background:#d7dded}.mb-btn{width:42px;height:16px;border-radius:999px;background:var(--grad-ui)}.mb-hero-copy{flex:1;display:flex;flex-direction:column;gap:7px}.mb-hero-copy b{font-family:var(--disp);font-weight:800;font-size:1.02rem;line-height:1.02;letter-spacing:-.02em;color:#181b23}.mb-hero-copy u{display:block;width:100%;height:5px;border-radius:3px;background:#e6eaf4;text-decoration:none}.mb-hero-copy .u2{width:64%}.mb-hero-copy s{width:52px;height:17px;border-radius:999px;background:var(--grad-ui);margin-top:3px;text-decoration:none}.mb-hero-img{width:44%;aspect-ratio:5/4;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#eaf2ff,#dbe8ff)}.mb-hero-img img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}.mb-cards{display:flex;gap:10px}.mb-cards em{flex:1;border-radius:9px;overflow:hidden;border:1px solid var(--line);background:#f6f8fc;display:flex;flex-direction:column}.mb-cards em img{width:100%;height:38px;object-fit:cover;-webkit-user-drag:none}.mb-cards em i{display:block;width:58%;height:5px;border-radius:3px;background:#c7cede;margin:6px 8px 8px}@keyframes ms2Shimmer{to{background-position:200% center}}.msx-seg{display:flex;padding:3px;border-radius:999px;background:rgba(0,0,0,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.42);margin-bottom:2px}.msx-seg span{flex:1;text-align:center;font-size:.6rem;font-weight:600;color:#9d9e9a;padding:.5em 0;border-radius:999px}.msx-seg .on{color:#fff;background:rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.4)}.msx-new{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.64rem;font-weight:600;color:#e2e3df;padding:.75em;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 7px -3px rgba(0,0,0,.5);white-space:nowrap}.msx-label{font-size:.56rem;font-weight:500;color:#626360;margin:8px 4px 2px}.msx-item{position:relative;display:flex;align-items:center;gap:8px;font-size:.62rem;font-weight:500;color:#9d9e9a;padding:.55em .85em;border:1px solid transparent;border-radius:9px;white-space:nowrap;overflow:hidden}.msx-item::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;background:#626360}.msx-item.on{color:#e2e3df;font-weight:600;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 6px -3px rgba(0,0,0,.5)}.msx-item.on::before{background:#8fae96;box-shadow:0 0 4px rgba(143,174,150,.5)}.msx-item b{margin-left:auto;font-weight:500;font-size:.5rem;color:#65665f;letter-spacing:.02em}.msx-user{margin-top:auto;display:flex;align-items:center;gap:8px;padding:.8em .4em .1em;border-top:1px solid rgba(255,255,255,.07);font-size:.62rem;font-weight:500;color:#9d9e9a}.msx-avatar{width:17px;height:17px;border-radius:50%;flex:none;background:#3b82f6;color:#fff;font-size:.5rem;font-weight:700;display:flex;align-items:center;justify-content:center}.msx-head{position:relative;display:flex;align-items:center;gap:8px;padding:7px 8px 7px 13px;border-bottom:1px solid rgba(255,255,255,.13)}.msx-head b{font-size:.6rem;font-weight:500;color:#9d9e9a}.msx-eng{position:absolute;left:50%;transform:translateX(-50%);font-size:.6rem;font-weight:600;color:#b7b7b7;letter-spacing:.02em}.msx-vseg{margin-left:auto;display:flex;gap:2px;padding:2px;border-radius:999px;background:rgba(0,0,0,.3);box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}.msx-vseg i{font-style:normal;font-size:.52rem;font-weight:600;color:#626360;padding:.4em .95em;border-radius:999px;min-width:3.4em;min-height:1.25em}.msx-vseg .on{color:#e2e3df;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}.msx-x{flex:none;width:16px;height:16px;margin-left:3px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:.48rem;font-weight:700;color:#571614;background:linear-gradient(180deg,#cf676c,#bd5257);box-shadow:inset 0 .5px 0 rgba(255,255,255,.3),inset 0 0 0 .5px rgba(0,0,0,.16)}.msx-comp{margin:auto 8px 8px;padding:6px 6px 7px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.032));border:1px solid rgba(255,255,255,.1);border-radius:13px;box-shadow:0 12px 30px -14px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.07)}.mcx-input{font-size:.6rem;color:#626360;padding:.75em 1em;margin-bottom:6px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.07);border-radius:10px;box-shadow:inset 0 1px 3px rgba(0,0,0,.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mcx-row{display:flex;align-items:center;gap:6px;padding:0 3px;white-space:nowrap;overflow:hidden;font-size:.54rem;font-weight:600}.mcx-perm{flex:none;color:#ffce4f;padding:.45em .95em;border-radius:999px;background:rgba(232,195,122,.16);border:1px solid rgba(232,195,122,.4)}.mcx-dir{color:#9d9e9a;font-weight:500;overflow:hidden;text-overflow:ellipsis}.mcx-fill{flex:1}.mcx-model{flex:none;display:inline-flex;align-items:center;gap:7px;color:#e2e3df;padding:.45em .95em;border-radius:999px;background:rgba(44,44,46,.75);border:1px solid #3a3a3a;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 2px 6px -2px rgba(0,0,0,.55)}.mcx-model i{font-style:normal;color:#9d9e9a;font-weight:500}.mcx-ring{width:14px;height:14px;flex:none}.mcx-ring circle{fill:none;stroke-width:2}.mcx-ring .bg{stroke:rgba(255,255,255,.1)}.mcx-ring .fg{stroke:#82bd8e;stroke-linecap:round;stroke-dasharray:37.7;stroke-dashoffset:34.3;transform:rotate(-90deg);transform-origin:center}.workers{display:flex;flex-direction:column;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);border-radius:var(--r);overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 2px rgba(24,32,63,.04),0 14px 36px rgba(52,86,180,.11)}.ck{width:11px;height:11px;flex:none;fill:none;stroke:#37b06a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.how{padding:110px 0 60px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;position:relative}.step{display:flex;flex-direction:column;position:relative;border:1px solid var(--line);border-radius:22px;padding:30px 28px 26px;background:linear-gradient(180deg,#f5f8ff 0,#fff 42%);box-shadow:var(--card-sh);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}.step:hover{transform:translateY(-5px);box-shadow:var(--card-sh-hover);border-color:#cfdcfa}.step h3{position:relative;z-index:1;font-family:var(--disp);font-weight:700;font-size:1.34rem;margin-bottom:9px}.step p{position:relative;z-index:1;color:var(--body-c);font-size:.94rem;margin-bottom:20px}.step p em{color:var(--blue-deep);font-style:italic}.pricing{padding:100px 0 90px}.bill-toggle{display:flex;align-items:center;justify-content:center;margin:0 auto 44px}.bill-opts{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:999px;background:var(--sky);border:1px solid var(--line);box-shadow:inset 0 1px 3px rgba(24,32,63,.05)}.bill-slider{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(24,32,63,.14);transition:transform .32s var(--ease)}.bill-toggle[data-bill=monthly] .bill-slider{transform:translateX(100%)}.bill-opt{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.85em;white-space:nowrap;border:none;background:0 0;cursor:pointer;font-family:var(--disp);font-weight:600;font-size:.9rem;color:var(--mut);padding:.5em .95em;border-radius:999px;transition:color .2s}.bill-toggle[data-bill=monthly] .bill-opt[data-bill=monthly],.bill-toggle[data-bill=yearly] .bill-opt[data-bill=yearly]{color:var(--ink)}.bill-save{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.01em;color:#fff;background:linear-gradient(180deg,#287ded 0,#3b8fff 60%,#519efa 100%);border:1px solid rgba(22,88,185,.5);padding:.42em .82em;border-radius:999px;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(22,88,185,.4),inset 0 -3px 6px rgba(15,66,150,.3),0 1px 1px rgba(10,28,66,.4),0 2px 5px rgba(10,32,80,.34),0 6px 14px -6px rgba(14,44,100,.45);user-select:none;-webkit-user-select:none}.bill-save-t{font-weight:600;color:#ffffff}.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}.pcard{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:18px;padding:30px 28px;background:#fff;box-shadow:var(--card-sh);transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s var(--ease);will-change:transform}.pcard-ribbon{padding:11px 14px 5px;text-align:center;font-family:var(--sans);font-size:1rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#123a66;background:#7bb5ff;box-shadow:inset 0 1px 0 rgba(255,255,255,0),inset 0 -6px 12px rgba(30,90,170,0);user-select:none;-webkit-user-select:none}.pcard-ribbon-txt{font-size:15px;font-weight:600;font-family:Figtree,var(--sans);color:#000}.pcard-body{flex:1;display:flex;flex-direction:column;margin:5px;padding:26px 24px;background:#fff;border:1px solid var(--line);border-radius:19px}.pcard:hover{transform:translateY(-4px);box-shadow:var(--card-sh-hover);border-color:#cddcf7}.pcard-pro{padding:0;border-radius:24px;background:#468ae2;border-color:#468ae2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 0 0 1px rgba(70,138,226,.26);align-self:stretch;margin-top:-23px;margin-bottom:-23px}.pcard-pro:hover{border-color:#468ae2;box-shadow:#468ae2 0 0 0 1px}.pcard-top{position:relative;margin-bottom:24px}.pcard-name{font-family:var(--disp);font-weight:800;font-size:1.24rem;letter-spacing:-.01em;color:var(--ink);line-height:1.1}.pcard-desc{color:var(--body-c);font-size:.9rem;line-height:1.45;margin-top:7px;max-width:26ch}.pcard-price{display:flex;align-items:baseline;gap:8px;margin-bottom:22px}.pcard-price b{font-family:var(--disp);font-weight:800;font-size:3rem;line-height:1;letter-spacing:-.035em;color:var(--ink)}.pcard-per{font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--mut);letter-spacing:.01em}.price-old{font-family:var(--disp);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--mut);text-decoration:line-through;text-decoration-color:rgba(138,146,166,.75);text-decoration-thickness:2px;align-self:center}.price-old[hidden]{display:none}.pcard-cta{margin-top:28px}.pcard-feats-lead{font-family:var(--sans);font-size:18px;line-height:.8;font-weight:700;letter-spacing:-.005em;text-transform:none;color:var(--ink);padding-top:22px;border-top:1px solid var(--line-2)}.pcard-pro .pcard-feats-lead{border-top-color:rgba(61,149,255,.22)}.pcard-feats{list-style:none;display:grid;gap:13px;margin-top:16px;margin-bottom:auto}.pcard-feats li{position:relative;display:flex;align-items:flex-start;gap:10px;font-size:.9rem;line-height:1.4;color:var(--body-c)}.pcard-feats li::before{content:"";flex:none;width:17px;height:17px;margin-top:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d95ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 10 18.5 20 6'/%3E%3C/svg%3E") center/contain no-repeat}.price-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;margin-top:44px;transform:translateY(11px)}.price-trust span{display:inline-flex;align-items:center;gap:.55em;font-size:.86rem;color:var(--body-c)}.price-trust .ck{width:1em;height:1em;fill:none;stroke:#28b463;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}.faq{padding:90px 0 40px}.faq-list{display:grid}.qa{border-bottom:1px solid var(--line)}.qa:first-child{border-top:1px solid var(--line)}.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:var(--disp);font-weight:600;font-size:1.08rem;padding:22px 4px;user-select:none;-webkit-user-select:none;transition:color .15s}.qa summary:hover{color:var(--blue-deep)}.qa summary::-webkit-details-marker{display:none}.qa-x{position:relative;width:14px;height:14px;flex:none;transition:transform .4s var(--ease)}.qa-x::after,.qa-x::before{content:"";position:absolute;background:var(--blue);border-radius:2px;transition:transform .3s var(--ease)}.qa-x::before{left:0;right:0;top:6px;height:2px}.qa-x::after{top:0;bottom:0;left:6px;width:2px}.qa[open] .qa-x{transform:rotate(180deg)}.qa[open] .qa-x::after{transform:scaleY(0)}.qa[open].is-closing .qa-x{transform:none}.qa[open].is-closing .qa-x::after{transform:scaleY(1)}.qa-content{overflow:hidden}.qa p{padding:0 4px 24px;color:var(--body-c);font-size:.97rem;max-width:66ch}.qa:has(> .qa-content)>p{display:none}.cta{position:relative;overflow:hidden;text-align:center;padding:150px 28px}.cta-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:0 0}.cta-scene{position:absolute;bottom:0;left:0;width:100%;height:100%;background-position:center bottom;background-size:cover;background-repeat:no-repeat;background-color:transparent;background-blend-mode:color;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 26%,#000 58%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 26%,#000 58%)}.cta-scene.scene-dark{background-color:#9bacd3;background-blend-mode:multiply}.cta-fade{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,rgba(230,233,242,0) 0,#e6e9f2 92%)}.cta-in{position:relative}.cta-h2{font-family:var(--disp);font-weight:800;font-size:clamp(2.5rem,5.4vw,4.4rem);line-height:1.02;letter-spacing:-.025em;color:var(--ink);margin-top:4px}.cta-sub{color:#141414;font-size:1.12rem;margin:18px auto 32px;max-width:46ch}.cta-btns{display:flex;flex-direction:column;align-items:center;gap:18px}.footer{background:linear-gradient(180deg,#e6e9f2 0,#dde1ec 100%);color:var(--body-c);padding:64px 0 0}.foot-in{max-width:1365px;margin:0 auto;padding:0 28px 52px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}.brand-foot{color:var(--ink)}.foot-brand p{margin-top:16px;font-size:.92rem;line-height:1.7}.foot-col{display:grid;gap:12px;align-content:start}.foot-col b{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;color:var(--mut);margin-bottom:6px;font-weight:500;user-select:none;-webkit-user-select:none}.foot-col a{text-decoration:none;font-size:.92rem;color:var(--body-c);transition:color .15s}.foot-col a:hover{color:var(--blue-deep)}.foot-base{border-top:1px solid rgba(24,32,63,.1);max-width:1365px;margin:0 auto;padding:22px 28px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:.58rem;letter-spacing:.05em;color:var(--mut)}.foot-led{display:inline-flex;align-items:center;gap:.7em;color:#146c34;background:#fff;border-radius:999px;padding:.6em 1.1em;box-shadow:0 1px 4px rgba(24,32,63,.08);user-select:none;-webkit-user-select:none}.foot-led i{width:7px;height:7px;border-radius:50%;background:#37b06a;animation:2.4s infinite ledpulse}@media (max-width:1080px){.bento{grid-template-columns:repeat(2,1fr);grid-template-areas:"key key" "gau dia" "ring per" "ses ses" "str str"}.proof-grid,.steps{grid-template-columns:1fr 1fr}.step:not(:last-child)::after{display:none}.foot-in{grid-template-columns:1fr 1fr}}@media (max-width:900px){.nav-links{display:none}}@media (max-width:720px){.nav{padding:6px 8px}.nav-in{height:50px;padding:0 7px 0 10px;gap:14px}.theme-btn{width:36px;height:36px}.foot-col a{display:inline-block;padding:5px 0}.hero{margin:62px 8px 0;border-radius:20px;padding:44px 0 0}.hero-h1{font-size:clamp(2.1rem,9.5vw,2.8rem)}.hero-sub{font-size:1.02rem}.hero-device{margin-top:36px;margin-bottom:-70px}.device-screen{font-size:.66rem;padding:16px 14px 12px}.bento{grid-template-columns:1fr;grid-template-areas:"key" "gau" "dia" "ring" "per" "ses" "str"}.price-grid,.proof-grid,.steps{grid-template-columns:1fr}.bill-toggle{flex-wrap:wrap;margin-bottom:34px}.cta{padding:110px 22px 130px}.foot-in{grid-template-columns:1fr;gap:28px}}@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}@keyframes deviceIn{from{opacity:0;transform:translateY(46px) scale(.965)}to{opacity:1;transform:none}}@keyframes glowIn{from{opacity:0;transform:translate(-50%,calc(-100% + 46px)) scale(.965)}to{opacity:1;transform:translate(-50%,-100%)}}@keyframes tlIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.hero-ctas,.hero-h1,.hero-sub{opacity:0;animation:fadeUp .85s var(--ease) forwards}.hero-h1{animation-delay:.12s}.hero-sub{animation-delay:.26s}.hero-ctas{animation-delay:.4s}.hero-device .device{opacity:0;animation:deviceIn 1s var(--ease) .5s forwards}.hero .device-screen .hx-reply,.hero .device-screen .hx-tool,.hero .device-screen .hx-user{opacity:0;animation:tlIn .45s var(--ease) forwards}.hero .device-screen .hx-user{animation-delay:1.05s}.hero .device-screen .hx-tool:first-child{animation-delay:1.4s}.hero .device-screen .hx-tool:nth-child(2){animation-delay:1.75s}.hero .device-screen .hx-tool:nth-child(3){animation-delay:2.1s}.hero .device-screen .hx-reply{animation-delay:2.5s}.hero .device-screen .ac-body>.hx-user:nth-child(4){animation-delay:3s}.hero .device-screen .ac-body>.hx-tools:nth-child(5) .hx-tool{animation-delay:3.4s}.hero .device-screen .ac-body>.hx-reply:nth-child(6){animation-delay:3.8s}.hero .app-chat .msx-comp{opacity:0;animation:fadeUp .6s var(--ease) 2.9s forwards}@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}.hero-scene{animation:28s ease-in-out infinite alternate kenburns;will-change:transform}.cta-scene{animation:30s ease-in-out infinite alternate kenburns;will-change:transform}.hero-bg,.hero-in{will-change:transform}.cell,.price,.step{transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .6s var(--ease)}@keyframes gaugeGlow{0%,100%{box-shadow:0 2px 8px rgba(79,124,255,.35)}50%{box-shadow:0 2px 14px rgba(79,124,255,.6)}}.on .gauge-fill{animation:3.4s ease-in-out 1.3s infinite gaugeGlow}@media (prefers-reduced-motion:reduce){.hero .app-chat .msx-comp,.hero .device-screen .hx-reply,.hero .device-screen .hx-tool,.hero .device-screen .hx-user,.hero-ctas,.hero-device .device,.hero-h1,.hero-sub{opacity:1;transform:none;animation:none;transition:none}.device-glow{opacity:1;animation:none;transform:translate(-50%,-100%)}}#faq .sect-head .sec-tag{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
/* ===== dark theme (restored) ===== */
[data-theme="dark"]{
  --bg:#0e0f12;--sky:#16171c;--sky-2:#1b1d24;
  --ink:#eef1f7;--body-c:#a2aab9;--mut:#6f7686;
  --line:#23262e;--line-2:#191b21;
  --card-sh:0 1px 2px rgba(0,0,0,.3),0 10px 26px rgba(0,0,0,.28);
  --card-sh-hover:0 2px 4px rgba(0,0,0,.35),0 14px 34px rgba(0,0,0,.4),0 26px 56px rgba(0,0,0,.34);
  --dev-screen:#15161b;--dev-row:#1b1d23;--dev-row-bd:#2a2e38;--dev-text:#e6e9f0;--dev-mut:#7a8296;
}
[data-theme="dark"] .nav{color:var(--ink)}
[data-theme="dark"] .nav.scrolled{background:rgba(14,15,18,.82);border-bottom-color:rgba(255,255,255,.08);box-shadow:0 6px 24px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
[data-theme="dark"] .nav-links a{color:var(--body-c)}
[data-theme="dark"] .nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.08)}
[data-theme="dark"] .pcard{background:#15161b;border-color:rgba(255,255,255,.08);box-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 26px rgba(0,0,0,.28)}
[data-theme="dark"] .pcard:hover{border-color:#33405f}
[data-theme="dark"] .pcard-body{background:#15161b;border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .pcard-pro{background:#468ae2;border-color:#468ae2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 0 0 1px rgba(70,138,226,.26),0 27.37px 58.95px rgba(0,0,0,.5)}
[data-theme="dark"] .bill-slider{background:#2a2d36}
[data-theme="dark"] .footer{background:linear-gradient(180deg,#121317 0%,#0b0c0f 100%)}
[data-theme="dark"] .foot-led{background:transparent;color:#4bbd77;box-shadow:0 1px 4px rgba(0,0,0,.4)}
[data-theme="dark"] .foot-base{border-top-color:rgba(255,255,255,.08)}
[data-theme="dark"] .cta-fade{background:linear-gradient(180deg,rgba(18,19,23,0) 0%,#121317 92%)}
[data-theme="dark"] .sec-tag{color:#fff;border-color:rgba(22,88,185,.5);background:linear-gradient(180deg,#287ded 0,#3b8fff 60%,#519efa 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(22,88,185,.4),inset 0 -4px 8px rgba(15,66,150,.3),0 1px 1px rgba(10,28,66,.4),0 4px 10px rgba(10,32,80,.38),0 10px 22px -10px rgba(14,44,100,.45)}
[data-theme="dark"] .qa{border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .price-old{color:var(--mut)}

[data-theme="dark"] .scene-light{opacity:0}
[data-theme="dark"] .scene-dark{opacity:1}

[data-theme="dark"] .cta-sub{color:rgba(255,255,255,.82)}

/* dark hero: solid image bottom + fade overlay + lightened dot grid */
[data-theme="dark"] .hero-bg{background:linear-gradient(180deg,#101c3a 0,#0d1526 22%,#0b0d14 52%,#0e0f12 100%)}
[data-theme="dark"] .hero-scene{-webkit-mask-image:none;mask-image:none}
[data-theme="dark"] .hero-grid{mix-blend-mode:screen}
[data-theme="dark"] .hero{border:1px solid rgba(255,255,255,.08)}

/* dark P2 visual: no glow */
[data-theme="dark"] .p2-visual{box-shadow:none}

/* silver Mac download button (bottom CTA) */
.btn-silver{--ripple:rgba(0,0,0,.12);color:#262626;background:linear-gradient(#ebebeb 0px,#dadada 60%,#e0e0e0 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0),inset 0 0 0 1px rgba(0,0,0,0),inset 0 -5px 10px rgba(0,0,0,.15),0 2px 3px rgba(0,0,0,.38),0 8px 16px rgba(20,22,30,.38),0 18px 36px -10px rgba(20,22,30,.48);text-shadow:0 1px 0 rgba(255,255,255,.55)}
.btn-silver:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 0 0 1px rgba(0,0,0,.06),inset 0 -5px 10px rgba(0,0,0,.15),0 3px 5px rgba(0,0,0,.32),0 10px 20px rgba(20,22,30,.34),0 20px 40px -10px rgba(20,22,30,.44)}
.btn-silver:active{transform:translateY(1px) scale(.985);background:linear-gradient(#d6d6d6 0,#c8c8c8 60%,#a6a6a6 100%);box-shadow:inset 0 3px 7px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3)}

/* dark mode: all Mac / "Download for Mac" buttons take the silver treatment */
[data-theme="dark"] .btn-ink{--ripple:rgba(0,0,0,.12);color:#262626;background:linear-gradient(#ebebeb 0px,#dadada 60%,#e0e0e0 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0),inset 0 0 0 1px rgba(0,0,0,0),inset 0 -5px 10px rgba(0,0,0,.15),0 2px 3px rgba(0,0,0,.38),0 8px 16px rgba(20,22,30,.38),0 18px 36px -10px rgba(20,22,30,.48);text-shadow:0 1px 0 rgba(255,255,255,.55)}
[data-theme="dark"] .btn-ink:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 0 0 1px rgba(0,0,0,.06),inset 0 -5px 10px rgba(0,0,0,.15),0 3px 5px rgba(0,0,0,.32),0 10px 20px rgba(20,22,30,.34),0 20px 40px -10px rgba(20,22,30,.44)}
[data-theme="dark"] .btn-ink:active{transform:translateY(1px) scale(.985);background:linear-gradient(#d6d6d6 0,#c8c8c8 60%,#a6a6a6 100%);box-shadow:inset 0 3px 7px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3)}

/* dark mode: secondary provider chip inverts to white with dark logo */
[data-theme="dark"] .hl-codex{background:linear-gradient(155deg,#ffffff,rgba(179,179,179,.91))}
[data-theme="dark"] .hl-codex svg{fill:#212121}

/* light mode: CTA Mac button goes dark to match the other Mac buttons */
html:not([data-theme=dark]) .btn-silver{background:linear-gradient(#4a4a4a 0px,#232323 60%,#101010 100%);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.35)}
html:not([data-theme=dark]) .btn-silver:active{background:linear-gradient(#3c3c3c 0,#1c1c1c 60%,#0a0a0a 100%)}

/* light mode: pricing Download free / Talk to sales match the dark Mac button */
html:not([data-theme=dark]) .pcard-cta.btn-ink{background:linear-gradient(#4a4a4a 0px,#232323 60%,#101010 100%);color:#fff}
html:not([data-theme=dark]) .pcard-cta.btn-ink:active{background:linear-gradient(#2e2e2e 0,#1a1a1a 60%,#0a0a0a 100%)}

html:not([data-theme=dark]) .pcard-ribbon-txt{color:#fff}

/* Section 03 heading — red */
[data-theme="dark"] #page3 .p2-h2{color:#eef1f7}
.foot-led-txt{font-size:12px;font-weight:600}
/* source: overrides.css */
/* ══════════════════════════════════════════════════════════════
   overrides.css — responsive fixes, loaded AFTER styles.css
   • Mobile nav: hamburger + dropdown menu (≤900px)
   • Pricing: stack the 3 cards instead of letting them go thin
   ══════════════════════════════════════════════════════════════ */

/* ── Brand logomark ───────────────────────────────────────────────
   The supplied mark is a white-on-transparent PNG, so it's driven as a
   CSS mask: the shape stays crisp and takes the brand blue, which reads
   in both light and dark themes; the transparent center shows the page
   through, exactly as the mark is drawn. */
.brand-mark{
  flex:none;
  width:1.2em; height:1.2em;
  background-color:var(--blue);
  -webkit-mask:none;
  mask:none;
}
/* dark mode: off-white mark reads cleanly on the dark nav */
[data-theme="dark"] .brand-mark{ background-color:#eef1f7; }

/* ── Hamburger button ─────────────────────────────────────────── */
.nav-burger{
  display:none; flex:none; position:relative;
  width:38px; height:38px; margin-left:2px;
  border:0; background:0 0; border-radius:10px; cursor:pointer;
  align-items:center; justify-content:center;
  color:var(--ink); transition:background .2s;
}
.nav-burger:hover{background:rgba(40,60,100,.08)}
.nav-burger span{
  position:absolute; left:10px; right:10px; height:2px; border-radius:2px;
  background:currentColor;
  transition:transform .28s var(--ease),opacity .2s;
}
.nav-burger span:first-child{transform:translateY(-4px)}
.nav-burger span:last-child{transform:translateY(4px)}
.nav.menu-open .nav-burger span:first-child{transform:rotate(45deg)}
.nav.menu-open .nav-burger span:last-child{transform:rotate(-45deg)}

/* ── Dropdown menu panel ──────────────────────────────────────── */
.nav-menu{
  position:absolute; top:calc(100% + 4px); left:12px; right:12px; z-index:99;
  display:flex; flex-direction:column; gap:2px;
  padding:10px; border-radius:16px;
  background:rgba(255,255,255,.92); border:1px solid var(--line);
  box-shadow:0 20px 44px rgba(24,32,63,.16);
  -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  opacity:0; transform:translateY(-8px); visibility:hidden; pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
}
.nav-menu.open{opacity:1; transform:none; visibility:visible; pointer-events:auto}
.nav-menu a:not(.btn){
  display:block; font-family:var(--disp); font-weight:600; font-size:1rem;
  color:var(--ink); text-decoration:none;
  padding:.72em .8em; border-radius:11px;
  transition:background .15s,color .15s;
}
.nav-menu a:not(.btn):hover{background:rgba(40,60,100,.06); color:var(--ink)}
.nav-menu-ctas{
  display:flex; flex-direction:column; gap:9px;
  margin-top:8px; padding-top:11px; border-top:1px solid var(--line);
}

/* dark theme */
[data-theme="dark"] .nav-menu{
  background:rgba(18,19,24,.92); border-color:rgba(255,255,255,.1);
  box-shadow:0 20px 48px rgba(0,0,0,.55);
}
[data-theme="dark"] .nav-menu a:not(.btn):hover{background:rgba(255,255,255,.08)}
[data-theme="dark"] .nav-menu-ctas{border-top-color:rgba(255,255,255,.1)}

/* show the burger / hide inline nav download buttons on mobile */
@media (max-width:900px){
  .nav-burger{display:flex}
  .nav-cta>.btn-os{display:none}
  /* nav-links (the flex:1 spacer) is hidden ≤900px — pin controls right */
  .nav-cta{margin-left:auto}
  .nav.menu-open{
    background:rgba(255,255,255,.85); border-bottom-color:var(--line);
    -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  }
  [data-theme="dark"] .nav.menu-open{background:rgba(14,15,18,.9)}
}
/* the menu is a mobile-only affordance */
@media (min-width:901px){ .nav-menu{display:none} }

/* ── Nav: pill locked to page center, side groups mirror it ──────
   Three columns with equal 1fr sides pin the middle (auto) column
   onto the true page center, so the Features/Pricing/FAQ pill is
   exactly centered. The brand and CTA groups then CENTER themselves
   within their own half, so they sit symmetrically around the pill
   instead of hugging the outer edges. */
@media (min-width:901px){
  .nav-in{ display:grid; grid-template-columns:1fr auto 1fr; }
  .nav-in .brand{ justify-self:center; }
  .nav-in .nav-cta{ justify-self:center; }
}

/* ── Pricing: stack the cards instead of squeezing 3-up ───────── */
@media (max-width:900px){
  .price-grid{
    grid-template-columns:1fr;
    max-width:440px;
    margin-left:auto; margin-right:auto;
  }
  /* the Pro card's vertical "pop-out" only makes sense in a row;
     zero it out so stacked cards don't overlap */
  .pcard-pro{margin-top:0; margin-bottom:0}
}

/* ── Theme toggle: animated moon ⇄ sun swap ──────────────────────
   Both icons are stacked in the button; we crossfade + spin between
   them on theme change. Light = moon shown, Dark = sun shown.
   (Overrides styles.css `.ic-sun{display:none}` which had pinned the
   sun hidden in every theme.) */
[data-theme="dark"]{ color-scheme:dark; }

.theme-btn svg{
  position:absolute; inset:0; margin:auto; display:block;
  transition:opacity .35s var(--ease), transform .5s var(--ease);
  will-change:opacity,transform;
}
/* light mode — moon in, sun spun out */
.theme-btn .ic-moon{ opacity:1; transform:rotate(0) scale(1); }
.theme-btn .ic-sun{ opacity:0; transform:rotate(-90deg) scale(.35); }
/* dark mode — sun in, moon spun out */
[data-theme="dark"] .theme-btn .ic-moon{ opacity:0; transform:rotate(90deg) scale(.35); }
[data-theme="dark"] .theme-btn .ic-sun{ opacity:1; transform:rotate(0) scale(1); }

@media (prefers-reduced-motion:reduce){
  .theme-btn svg{ transition:opacity .12s linear; }
  .theme-btn .ic-moon,.theme-btn .ic-sun,
  [data-theme="dark"] .theme-btn .ic-moon,[data-theme="dark"] .theme-btn .ic-sun{ transform:none; }
}

/* ── Nav auth: subtle "Log In" text link + boxed "Sign Up" ───────── */
.nav-login{
  font-family:var(--disp); font-weight:600; font-size:.9rem; line-height:1;
  color:var(--body-c); text-decoration:none; white-space:nowrap;
  padding:.55em .7em; border-radius:9px;
  transition:color .18s, background .18s;
}
.nav-login:hover{ color:var(--ink); background:rgba(40,60,100,.07); }
[data-theme="dark"] .nav-login:hover{ background:rgba(255,255,255,.08); }

/* Sign Up reuses the skeuomorphic blue .btn-blue (matches the old Windows
   button); .nav-signup just makes it nav-compact and is the hook to drop it
   into the burger menu on mobile. */
.nav-cta .nav-signup{ font-size:.86rem; padding:.55em 1.15em; }

/* Desktop-only: the inline auth links live in the burger menu on mobile */
@media (max-width:900px){
  .nav-login, .nav-cta .nav-signup{ display:none; }
}

/* "Everything you need, built in." heading — dark ink in light, white in dark.
   Note: -webkit-text-fill-color overrides `color`, so BOTH must be set (that's
   why the color picker looked stuck when only `color` changed). */
#page2 .sec-h2 .sec-h2-w{ color:#181b23; -webkit-text-fill-color:#181b23; }
[data-theme="dark"] #page2 .sec-h2 .sec-h2-w{ color:#eef1f7; -webkit-text-fill-color:#eef1f7; }

/* ── Toasts (bottom-right) ─────────────────────────────────────────── */
.toast-wrap{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  display:flex; flex-direction:column; gap:10px;
  width:max-content; max-width:min(360px, calc(100vw - 36px));
  pointer-events:none;
}
.toast{
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 15px; border-radius:14px;
  font-family:var(--sans); font-size:.88rem; line-height:1.4; font-weight:500;
  color:#f2f3f5; background:#1b1e25;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 34px -10px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.3);
  transform:translateY(14px) scale(.98); opacity:0;
  transition:transform .34s var(--ease), opacity .34s var(--ease);
  pointer-events:auto; cursor:pointer;
}
.toast.is-in{ transform:none; opacity:1; }
.toast-ic{ flex:none; width:18px; height:18px; margin-top:1px; color:#8aa0ff; }
.toast-msg{ flex:1; }
.toast.is-error{ background:#241417; border-color:rgba(255,120,120,.26); }
.toast.is-error .toast-ic{ color:#ff8f8f; }
@media (prefers-reduced-motion:reduce){ .toast{ transition:opacity .2s ease; transform:none; } }

/* ── "Current Plan" — disabled/greyed pricing CTA ──────────────────── */
.pcard .pcard-cta.is-current-plan{
  background-image:linear-gradient(#505050 0px, #414141 60%, #333333 100%);
  box-shadow:rgba(255,255,255,.68) 0 1px 0 0 inset,
             rgba(110,110,110,.4) 0 0 0 1px inset,
             rgba(85,85,85,.3) 0 -5px 10px 0 inset,
             rgba(28,28,28,.4) 0 2px 3px 0,
             rgba(0,0,0,.42) 0 9px 18px 0,
             rgba(32,32,32,.5) 0 20px 38px -10px;
  color:#e9e9e9; cursor:default;
}
/* source: pages.css */
/* ══════════════════════════════════════════════════════════════
   pages.css — homepage additions + the subpage kit
   Loaded AFTER styles.css/overrides.css on every route. Everything
   here builds on the existing tokens (--bg, --ink, --line, --blue,
   --dev-* screen tokens) so light/dark re-theme for free.
   ══════════════════════════════════════════════════════════════ */

/* ── Homepage: hero platform note ─────────────────────────────── */
.hero-note{
  margin-top:18px;
  font-size:.83rem; font-weight:600; letter-spacing:.01em;
  color:var(--mut);
}
[data-theme="dark"] .hero-note{color:#8d95a8}

/* ── Homepage: miniature app-window demos (QA + parallel work) ───
   Faithful miniatures of the production application renderer: chassis metal
   (#2c2c2e→#19191b), a recessed term-col chat panel, glassy user
   bubbles (15/15/7/15), verb-gray → target-bright tool lines, dark
   inset wells, the glass composer, and the app's desaturated LED
   palette (--led-ok #8fae96, --led-busy #c9aa6e, --led-err #c97b84).
   Font: Hanken Grotesk — the app's own. Fixed dark, both themes. ── */
:where(a,button,summary):focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
}

:root{
  --motion-frame-bg:#09090b;
  --motion-frame-radius:19px;
  --motion-frame-border:rgba(255,255,255,.08);
}
.remotion-demo{
  width:100%; aspect-ratio:4/3; margin:0;
  overflow:hidden; border-radius:var(--motion-frame-radius);
  background:var(--motion-frame-bg);
  border:1px solid var(--motion-frame-border);
  box-shadow:0 24px 60px -40px rgba(0,0,0,.72);
  user-select:none; -webkit-user-select:none;
}
.remotion-video{
  width:100%; height:100%; display:block; object-fit:cover;
  pointer-events:none; -webkit-user-drag:none;
}
.mini{
  width:100%;
  aspect-ratio:4/3.1;   /* same footprint as the bx/dz demo windows */
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#2c2c2e,#232325 40%,#19191b);
  border-radius:19px; padding:9px;
  font-family:"Hanken Grotesk",var(--sans);
  user-select:none; -webkit-user-select:none;
}
.mini > .mterm, .mini > .mws{flex:1; min-height:0}
.mws .mterm{min-height:0}
.mini-top{display:flex; align-items:center; gap:8px; padding:5px 7px 10px}
.mini-dots{display:flex; gap:5px}
.mini-dots i{width:8px; height:8px; border-radius:50%}
.mini-dots i:first-child{background:#ff6159}
.mini-dots i:nth-child(2){background:#ffbd2e}
.mini-dots i:nth-child(3){background:#28c840}
.mini-fill{flex:1}
.msk{display:block; height:5px; border-radius:3px; background:#2f3033; flex:none}
.msk-hi{background:#3a3b3f}
.msk-m{margin-left:auto; opacity:.6}

/* the recessed chat panel — the app's .term-col */
.mterm{
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  border-radius:14px; overflow:hidden;
  background:rgba(0,0,0,.22);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.025);
}
.mws{display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:stretch}

/* pane header — the app's .term-head: title left, provider centered
   white, Chat/Terminal segment right */
.mth{
  flex:none; height:34px; position:relative;
  display:flex; align-items:center; gap:8px;
  padding:0 11px;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.mth-title{font-weight:500; font-size:.58rem; color:#9d9e9a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mth-model{font-weight:600; font-size:.58rem; color:#e9eae6; letter-spacing:.02em; white-space:nowrap}
.mth-model.is-c{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
.mws .mth-model{margin-left:auto}
.mth-seg{
  margin-left:auto; display:inline-flex; gap:2px; padding:2px; flex:none;
  border-radius:999px; background:rgba(0,0,0,.3);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
}
.mth-seg i{font-style:normal; font-weight:600; font-size:.42rem; color:#626360; padding:2px 7px; border-radius:999px}
.mth-seg i:empty{width:34px; height:15px; padding:0}
.mth-seg i.on{background:rgba(255,255,255,.14); color:#e9eae6}

/* messages column — like the app, the conversation lives in a centered
   MAX-WIDTH column, it never runs edge to edge */
.mmsgs{flex:1; display:flex; flex-direction:column; gap:9px; padding:12px 12px 8px}
.qa-loop .mmsgs{width:100%; max-width:76%; margin-inline:auto}
.qa-loop .mcomposer{width:76%; margin-left:auto; margin-right:auto}
/* the animation wrappers must stay flex columns so bubbles can keep
   their right-side alignment */
.mini-loop .lp{display:flex; flex-direction:column; align-items:stretch; min-width:0}

/* user bubble — glassy, tucked bottom-right, SHRINKS to its text and
   sits on the RIGHT, exactly the app's */
.mbub{
  align-self:flex-end; max-width:78%;
  font-weight:460; font-size:.66rem; line-height:1.5; color:#e2e3df;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px 12px 5px 12px;
  padding:7px 12px;
  box-shadow:0 8px 22px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
}
.mbub-sk{display:flex; flex-direction:column; gap:4px; min-width:56%; padding:8px 10px}

/* tool status line — the app's .tg-status: gray verb, bright target,
   faint meta; the verb shimmers while running */
.mtg{display:flex; align-items:baseline; gap:6px; font-weight:600; font-size:.62rem; white-space:nowrap; min-width:0}
.mtg b{color:#9d9e9a; font-weight:600; flex:none}
.mtg-t{color:#e2e3df; overflow:hidden; text-overflow:ellipsis}
.mtg-m{color:#626360; font-weight:500; flex:none}
.mtg-ok{color:#8fae96; font-weight:600; flex:none}
.mtg b.run{
  background:linear-gradient(90deg,rgba(157,158,154,.45),rgba(255,255,255,.95),rgba(157,158,154,.45));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:mshimmer 1.8s linear infinite;
}
@keyframes mshimmer{to{background-position:-200% center}}
@media (prefers-reduced-motion:reduce){.mtg b.run{animation:none; -webkit-text-fill-color:#c9c9c5; color:#c9c9c5; background:none}}

/* assistant reply = plain text (no box), skeleton at mini scale */
.mreply{display:flex; flex-direction:column; gap:6px; padding:1px 1px}
.mdone{display:flex; align-items:center; gap:6px; font-weight:600; font-size:.62rem; color:#8fae96}
.mled{flex:none; width:7px; height:7px; border-radius:50%; background:#8fae96; box-shadow:0 0 0 2px rgba(143,174,150,.14)}

/* dark inset well — the app's .now-well / gen cells */
.mwell{
  align-self:stretch; padding:10px 11px; border-radius:12px;
  background:rgba(0,0,0,.3);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.03);
}
.mwell-h{display:flex; align-items:baseline; gap:6px; margin-bottom:8px; font-weight:600; font-size:.56rem; color:#9d9e9a}
.mnow-p{font-weight:460; font-size:.62rem; line-height:1.45; color:#e2e3df; margin:1px 0 5px}
.mstop{
  margin-left:auto; flex:none; align-self:center;
  width:14px; height:14px; border-radius:5px;
  display:grid; place-items:center;
  font-style:normal; font-weight:600; font-size:.5rem; line-height:1; color:#c97b84;
  background:rgba(201,123,132,.1); border:1px solid rgba(201,123,132,.3);
}

/* composer — EXACTLY the bx demo's chatbar: dark inset input where the
   message TYPES with a caret, skeleton chips, blue model chip, blue
   ring + blue send dot */
.mcomposer{
  flex:none; margin:6px 9px 9px;
  display:flex; flex-direction:column; gap:5px;
  padding:6px 7px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.032));
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px 11px 6px 6px;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07);
}
.mcin{
  position:relative; display:flex; align-items:center;
  min-height:28px; padding:6px 9px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.06); border-radius:8px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
}
.mph{
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  font-size:.58rem; font-weight:500; color:#5c5d62; white-space:nowrap;
}
.mtype{
  font-size:.58rem; font-weight:500; color:#c8c9c5;
  white-space:nowrap; overflow:hidden; width:0; flex:none;
}
.mcaret{width:1.5px; height:.85em; background:#7fb0ff; flex:none; opacity:0}
.mcrow{display:flex; align-items:center; gap:5px}
.chip-g{
  flex:none; display:flex; align-items:center; width:16%;
  background:#232326; border:1px solid rgba(255,255,255,.07);
  border-radius:999px; padding:5px 9px;
}
.chip-g .msk{width:100%; height:4px}
.chip-b{
  flex:none; display:flex; align-items:center;
  background:rgba(61,148,255,.14); border:1px solid rgba(61,148,255,.3);
  border-radius:999px; padding:5px 10px;
}
.chip-b .msk{width:6em; height:4px; background:rgba(127,176,255,.4)}
.mring{
  flex:none; width:11px; height:11px; border-radius:50%;
  background:conic-gradient(#3d94ff 0 62%, #2b2c30 62% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent 54%,#000 56%);
  mask:radial-gradient(farthest-side,transparent 54%,#000 56%);
}
.msend{
  flex:none; width:15px; height:15px; border-radius:50%;
  background:linear-gradient(180deg,#55a2ff,#1f74e6);
}

/* the Do-this-now cell — as in the app: a SENT bubble on the right whose
   inside carries the live feed well + a quiet finish stamp */
.mnow{align-self:flex-end; max-width:82%; min-width:56%}
.mfeed{
  margin-top:8px; padding:8px 10px;
  background:rgba(0,0,0,.3); border-radius:9px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.03);
  display:flex; flex-direction:column; gap:6px;
}
.mstamp{
  display:flex; align-items:center; gap:6px;
  margin-top:7px; font-size:.54rem; font-weight:600; color:#8fae96;
}
.mstamp em{font-style:normal; color:#5c5d62; font-weight:500; margin-left:auto}

/* QA window: light page thumbnails at three viewports — the same light
   skeleton page the bx preview pane uses, sitting in the dark chrome */
.qa-shots{display:flex; gap:7px; align-items:stretch}
.qa-vp{display:flex; flex-direction:column; gap:5px; min-width:0}
.qa-vp.v1{flex:1}
.qa-vp.v2{flex:1.7}
.qa-vp.v3{flex:2.7}
.qa-shot{
  height:92px;
  background:linear-gradient(180deg,#fdfdfe,#f2f4f9);
  border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);
  padding:7px 7px 6px; display:flex; flex-direction:column; gap:4px;
  overflow:hidden;
}
.pk{display:block; height:4px; border-radius:2px; background:#dde2ec; flex:none}
.pk-nav{display:flex; align-items:center; gap:3px; margin-bottom:1px}
.pk-nav .pk-dot{width:5px; height:5px; border-radius:2px; background:var(--grad-ui); flex:none}
.pk-nav .pk{height:3px}
.pk-grow{flex:1 !important}
.pk-hero{height:20px; border-radius:4px; background:#e7ebf4}
.pk-cta{height:6px; width:38%; border-radius:3px; background:var(--grad-ui)}
.pk-cols{display:flex; gap:3px}
.pk-cols .pk{flex:1; height:13px; border-radius:3px; background:#e7ebf4}
.qa-cap{
  display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:.54rem; font-weight:600; color:#85868a;
}
.mini-ok-s{
  flex:none; width:6px; height:6px; border-radius:50%;
  background:#8fae96; box-shadow:0 0 0 2px rgba(143,174,150,.14);
}

/* Workers window: progress lanes */
.wk-prog{
  flex:1; height:4px; min-width:40px;
  border-radius:3px; background:#2b2c30; overflow:hidden;
}
.wk-prog i{display:block; height:100%; border-radius:3px; background:#28c840}
.mini-row.is-done .wk-prog i{background:#4a4b52}
.wk-pct{flex:none; font-size:.48rem; font-weight:600; color:#85868a; min-width:22px; text-align:right}

/* ── looping choreography — pure CSS on an 18s loop, the bx pattern:
      the message TYPES in the composer, sends as a bubble, work unfolds,
      then the WHOLE conversation exits in one quiet fade (no per-item
      fade tails) before the loop restarts ───────────────────────── */
.mini-loop .lp{opacity:0; animation:18s var(--ease) infinite; will-change:opacity,transform}
.mini-loop .mmsgs{animation:18s linear infinite kexit}
.mini-loop .mtype,.mini-loop .mph,.mini-loop .mcaret{animation-duration:18s; animation-iteration-count:infinite}
@keyframes kexit{0%,92%{opacity:1} 96.5%,100%{opacity:0}}

/* QA window — type → send → review → responsive well → states →
   lighthouse → reply → all-clear */
.qa-loop .mtype{animation-name:kqaT; animation-timing-function:steps(35,end)}
.qa-loop .mph{animation-name:kqaPh}
.qa-loop .mcaret{animation-name:kqaCar}
@keyframes kqaT  {0%,3%{width:0} 13%,15.5%{width:16.8em} 16%,100%{width:0}}
@keyframes kqaPh {0%,2.5%{opacity:1} 3.5%,15.9%{opacity:0} 16.5%,100%{opacity:1}}
@keyframes kqaCar{0%,2.5%{opacity:0} 3%,15.8%{opacity:1} 16.2%,100%{opacity:0}}
.qa-loop .lp1{animation-name:kqa1}   .qa-loop .lp2{animation-name:kqa2}
.qa-loop .lp3{animation-name:kqa3}   .qa-loop .lp3a{animation-name:kqa3a}
.qa-loop .lp3b{animation-name:kqa3b} .qa-loop .lp3c{animation-name:kqa3c}
.qa-loop .lp4{animation-name:kqa4}   .qa-loop .lp5{animation-name:kqa5}
.qa-loop .lp5b{animation-name:kqa5b} .qa-loop .lp6{animation-name:kqa6}
.qa-loop .lp7{animation-name:kqa7}
@keyframes kqa1 {0%,16%{opacity:0;transform:translateY(6px)} 19%,100%{opacity:1;transform:none}}
@keyframes kqa2 {0%,23%{opacity:0;transform:translateY(8px)} 27%,100%{opacity:1;transform:none}}
@keyframes kqa3 {0%,31%{opacity:0;transform:translateY(8px)} 35%,100%{opacity:1;transform:none}}
@keyframes kqa3a{0%,36%{opacity:0;transform:translateY(6px)} 40%,100%{opacity:1;transform:none}}
@keyframes kqa3b{0%,39%{opacity:0;transform:translateY(6px)} 43%,100%{opacity:1;transform:none}}
@keyframes kqa3c{0%,42%{opacity:0;transform:translateY(6px)} 46%,100%{opacity:1;transform:none}}
@keyframes kqa4 {0%,50%{opacity:0;transform:translateY(8px)} 54%,100%{opacity:1;transform:none}}
@keyframes kqa5 {0%,57%{opacity:0;transform:translateY(8px)} 61%,100%{opacity:1;transform:none}}
@keyframes kqa5b{0%,63%{opacity:0} 67%,100%{opacity:1}}
@keyframes kqa6 {0%,71%{opacity:0;transform:translateY(8px)} 75%,100%{opacity:1;transform:none}}
@keyframes kqa7 {0%,78%{opacity:0;transform:translateY(8px)} 82%,100%{opacity:1;transform:none}}

/* Parallel window — left pane types twice (the second send IS the
   Do-this-now), the secondary pane splits in and works */
.par-loop .t1{animation-name:kpT1; animation-timing-function:steps(28,end)}
.par-loop .t2{animation-name:kpT2; animation-timing-function:steps(24,end)}
.par-loop .p1 .mph{animation-name:kpPh}
.par-loop .p1 .mcaret{animation-name:kpCar}
.par-loop .t3{animation-name:kpT3; animation-timing-function:steps(23,end)}
.par-loop .p2 .mph{animation-name:kpPh3}
.par-loop .p2 .mcaret{animation-name:kpCar3}
@keyframes kpT1 {0%,2%{width:0} 9%,11%{width:13.5em} 11.5%,100%{width:0}}
@keyframes kpT2 {0%,22%{width:0} 28%,30%{width:11.5em} 30.5%,100%{width:0}}
@keyframes kpPh {0%,1.5%{opacity:1} 2.5%,10.9%{opacity:0} 12%,21.5%{opacity:1} 22.5%,29.9%{opacity:0} 31%,100%{opacity:1}}
@keyframes kpCar{0%,1.5%{opacity:0} 2%,11%{opacity:1} 11.5%,21.5%{opacity:0} 22%,30%{opacity:1} 30.5%,100%{opacity:0}}
@keyframes kpT3 {0%,46%{width:0} 52%,53.5%{width:11em} 54%,100%{width:0}}
@keyframes kpPh3{0%,45.5%{opacity:1} 46.5%,53.7%{opacity:0} 54.5%,100%{opacity:1}}
@keyframes kpCar3{0%,45.5%{opacity:0} 46%,53.8%{opacity:1} 54.3%,100%{opacity:0}}
.par-loop .pp1{animation-name:kpp1}  .par-loop .pp2{animation-name:kpp2}
.par-loop .pp3{animation-name:kpp3}  .par-loop .pp3b{animation-name:kpp3b}
.par-loop .ppst{animation-name:kppst}
.par-loop .pp5{animation-name:kpp5}  .par-loop .pp6{animation-name:kpp6}
.par-loop .pp7{animation-name:kpp7}  .par-loop .pp8{animation-name:kpp8}
.par-loop .pp9{animation-name:kpp9}
@keyframes kpp1 {0%,11.5%{opacity:0;transform:translateY(6px)} 14.5%,100%{opacity:1;transform:none}}
@keyframes kpp2 {0%,17%{opacity:0;transform:translateY(8px)} 21%,100%{opacity:1;transform:none}}
@keyframes kpp3 {0%,30.5%{opacity:0;transform:translateY(6px)} 33.5%,100%{opacity:1;transform:none}}
@keyframes kpp3b{0%,40%{opacity:0} 44%,100%{opacity:1}}
@keyframes kppst{0%,74%{opacity:0} 78%,100%{opacity:1}}
@keyframes kpp5 {0%,54%{opacity:0;transform:translateY(6px)} 57%,100%{opacity:1;transform:none}}
@keyframes kpp6 {0%,60%{opacity:0;transform:translateY(8px)} 64%,100%{opacity:1;transform:none}}
@keyframes kpp7 {0%,66%{opacity:0;transform:translateY(8px)} 70%,100%{opacity:1;transform:none}}
@keyframes kpp8 {0%,73%{opacity:0;transform:translateY(8px)} 77%,100%{opacity:1;transform:none}}
@keyframes kpp9 {0%,80%{opacity:0;transform:translateY(8px)} 84%,100%{opacity:1;transform:none}}

/* the second session SPLITS IN mid-loop, exits with the same fade */
.mws-anim{display:flex; gap:0}
.mws-anim>.mterm{flex:1; min-width:0}
.mws-p2{
  flex:0 0 0%; min-width:0; margin-left:0; overflow:hidden;
  opacity:0; display:flex;
  animation:kppPane 18s var(--ease) infinite; will-change:flex-basis,opacity;
}
.mws-p2>.mterm{flex:1; min-width:236px}
/* The pane must CLOSE as it fades, on the same beat as the message exit —
   not merely fade and keep holding its width. It used to sit at 49.5% until
   the loop wrapped, so the restart snapped it to 0% in a single frame and the
   left window jumped 286px → 582px. Ending the exit at the same values as 0%
   makes the wrap a no-op, and the close mirrors the 38→44% split-in. */
@keyframes kppPane{
  0%,38%{flex-basis:0%; opacity:0; margin-left:0}
  44%{flex-basis:49.5%; opacity:1; margin-left:8px}
  /* the close gets its OWN S-curve: the sitewide --ease is a hard ease-out
     that dumps ~70% of the travel into the first 180ms, which reads as a
     lurch even though it is continuous. Ease-in-out over the same beat as
     the message fade (92→96.5%) makes the pane glide shut. */
  92%{flex-basis:49.5%; opacity:1; margin-left:8px; animation-timing-function:cubic-bezier(.65,0,.35,1)}
  96.5%,100%{flex-basis:0%; opacity:0; margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .mini-loop .lp,.mini-loop .mmsgs{animation:none; opacity:1; transform:none}
  .mini-loop .mtype{animation:none; width:0}
  .mini-loop .mph{animation:none; opacity:1}
  .mini-loop .mcaret{animation:none; opacity:0}
  .mws-p2{animation:none; opacity:1; flex-basis:49.5%; margin-left:8px}
}

/* ── exploded-UI capability showcase — a full-bleed transparent
      asset over the page background, copy beside it on desktop ──── */
.explode{padding:20px 24px 40px}
.explode-in{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.55fr 1fr; gap:24px; align-items:center;
}
.explode-img{
  display:block; width:100%; height:auto;
  -webkit-user-drag:none;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.45));
}
.explode-h{
  font-family:var(--disp); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.1; color:var(--ink);
  margin-bottom:20px;
}
.explode-list{list-style:none; padding:0; display:grid; gap:12px}
.explode-list li{
  position:relative; padding-left:26px;
  color:var(--body-c); font-size:1rem; font-weight:600; line-height:1.5;
}
.explode-list li::before{
  content:""; position:absolute; left:0; top:.34em;
  width:15px; height:15px; border-radius:50%;
  background:rgba(61,149,255,.14); box-shadow:inset 0 0 0 1.6px var(--blue);
}
.explode-list li::after{
  content:""; position:absolute; left:4.5px; top:calc(.34em + 4.5px);
  width:5px; height:3px;
  border-left:1.7px solid var(--blue); border-bottom:1.7px solid var(--blue);
  transform:rotate(-45deg);
}
@media (max-width:900px){
  .explode-in{grid-template-columns:1fr; gap:8px}
  .explode-copy{max-width:520px; margin:0 auto}
}

/* ── the design-rail tool chips — the app's actual seven tools,
      named with their real icons; theme-aware ───────────────────── */
.dtools{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 6px}
.dtool{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:10px;
  background:var(--dev-row); border:1px solid var(--dev-row-bd);
  font-size:.82rem; font-weight:700; color:var(--dev-text);
  user-select:none;
}
.dtool svg{width:13px; height:13px; flex:none; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* the features/visual-workspace spec rows keep their own styling */
.see-row{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; margin-top:8px;
  background:var(--dev-row);
  border:1px solid var(--dev-row-bd);
  border-radius:12px;
  font-size:.83rem; line-height:1.3;
}
.see-verb{
  flex:none; font-weight:800; color:var(--blue);
  font-size:.78rem; letter-spacing:.01em; min-width:86px;
}
.see-t{color:var(--dev-text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.see-m{margin-left:auto; flex:none; color:var(--dev-mut); font-size:.76rem; font-weight:600}
.see-ok{
  flex:none; width:16px; height:16px; border-radius:50%;
  background:#3fbf77;
  position:relative;
}
.see-ok::after{
  content:""; position:absolute; left:4.5px; top:4.5px;
  width:6px; height:3.5px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}
.see-row.is-live{border-color:rgba(61,149,255,.45)}

/* ── Homepage: proof strip ────────────────────────────────────── */
.proofstrip{padding:34px 24px}
.proofstrip-in{
  max-width:1080px; margin:0 auto; list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 14px; padding:0;
}
.proofstrip-in li{
  display:inline-flex; align-items:center; min-height:44px;
  padding:8px 20px; border-radius:999px;
  border:1px solid var(--line); background:var(--dev-screen);
  color:var(--body-c); font-size:.85rem; font-weight:700;
  box-shadow:var(--card-sh);
  user-select:none;
}
.ps-plus{color:var(--blue); margin:0 .35em; font-weight:800}

/* ── Homepage: pricing teaser + FAQ preview ───────────────────── */
.price-grid-teaser{grid-template-columns:1.15fr 1fr; max-width:880px; margin-inline:auto}
.pcard .price-num{white-space:nowrap}
.pcard-price .price-txt{font-size:1.7rem !important; letter-spacing:-.01em !important}
.faq-more{display:flex; justify-content:center; margin-top:28px}

/* ═══ Homepage feature showcase — image-led alternating rows ═════
   Replaces the old animated demos. Each row pairs copy with one
   generated feature render; during design, .imgph blockouts stand
   in so placement can be judged before spending image credits. ══ */
.showcase{padding:8px 24px 24px}
.showcase-in{max-width:1120px; margin:0 auto}
.showcase-head{margin-bottom:8px}
.feat{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px);
  align-items:center; padding:clamp(40px,5vw,64px) 0;
}
.feat + .feat{border-top:1px solid var(--line)}
.feat:nth-child(even) .feat-copy{order:2}
.feat-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue); margin-bottom:12px;
}
.feat-kicker i{width:22px; height:1px; background:var(--blue); display:inline-block}
.feat-h{
  font-family:var(--disp); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.5rem,3vw,2.15rem); line-height:1.12; color:var(--ink); margin-bottom:14px;
}
.feat-p{color:var(--body-c); line-height:1.7; margin-bottom:18px; font-size:1.02rem}
.feat-list{list-style:none; padding:0; display:grid; gap:10px}
.feat-list li{position:relative; padding-left:26px; color:var(--body-c); font-size:.96rem; line-height:1.55}
.feat-list li b{color:var(--ink); font-weight:700}
.feat-list li::before{content:""; position:absolute; left:0; top:.42em; width:14px; height:14px; border-radius:50%; background:rgba(61,149,255,.14); box-shadow:inset 0 0 0 1.5px var(--blue)}
.feat-list li::after{content:""; position:absolute; left:4px; top:calc(.42em + 4.5px); width:5px; height:3px; border-left:1.6px solid var(--blue); border-bottom:1.6px solid var(--blue); transform:rotate(-45deg)}
.feat-more{margin-top:18px; display:inline-block}

/* the final image slot */
.feat-media img{display:block; width:100%; height:auto; border-radius:16px; -webkit-user-drag:none; pointer-events:none; filter:drop-shadow(0 30px 60px rgba(0,0,0,.42))}

/* ── Composed feature renders (visual-tool edits) ─────────────────
   Each render is enlarged, nudged toward its copy, edge-faded with a
   mask, and muted toward a neutral gray. Translate/scale are % of the
   image's own box and masks are % of its edges, so the composition
   holds as the column resizes. Desktop only — stacked mobile rows get
   the plain render. */
.showcase{overflow-x:clip}
.feat-copy{position:relative; z-index:1}
@media (min-width:901px){
  .feat img[src*="feat-rail"]{
    transform:translate(10.6%,33%) scale(1.83);
    filter:grayscale(1) sepia(1) hue-rotate(202deg) saturate(.3) brightness(.97) drop-shadow(0 30px 60px rgba(0,0,0,.42));
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 41%,transparent 68.9%),linear-gradient(to right,#000 0,#000 63.6%,transparent 76.2%);
    mask-image:linear-gradient(to bottom,#000 0,#000 41%,transparent 68.9%),linear-gradient(to right,#000 0,#000 63.6%,transparent 76.2%);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }
  .feat img[src*="feat-qa"]{
    transform:translate(-10.8%,11.3%) scale(1.77);
    filter:grayscale(1) sepia(1) hue-rotate(202deg) saturate(.3) brightness(.93) drop-shadow(0 30px 60px rgba(0,0,0,.42));
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 67.1%,transparent 82.2%),linear-gradient(to right,transparent 21.3%,#000 34.2%);
    mask-image:linear-gradient(to bottom,#000 0,#000 67.1%,transparent 82.2%),linear-gradient(to right,transparent 21.3%,#000 34.2%);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }
  .feat img[src*="feat-build"]{
    transform:translate(17.9%,14.7%) scale(1.85);
    filter:grayscale(1) sepia(1) hue-rotate(202deg) saturate(.3) brightness(.95) drop-shadow(0 30px 60px rgba(0,0,0,.42));
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 57.8%,transparent 80.5%),linear-gradient(to right,#000 0,#000 50.6%,transparent 70.4%);
    mask-image:linear-gradient(to bottom,#000 0,#000 57.8%,transparent 80.5%),linear-gradient(to right,#000 0,#000 50.6%,transparent 70.4%);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }
  .feat img[src*="feat-parallel"]{
    transform:translate(-32.3%,14.2%) scale(2.05);
    filter:grayscale(1) sepia(1) hue-rotate(202deg) saturate(.3) brightness(.95) drop-shadow(0 30px 60px rgba(0,0,0,.42));
    -webkit-mask-image:linear-gradient(to bottom,transparent 9.9%,#000 9.9%,#000 86.1%,transparent 86.1%),linear-gradient(to right,transparent 34.9%,#000 40%);
    mask-image:linear-gradient(to bottom,transparent 9.9%,#000 9.9%,#000 86.1%,transparent 86.1%),linear-gradient(to right,transparent 34.9%,#000 40%);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }
}

/* ROUGH-DRAFT placeholder — data-art-prototype, deleted once the real
   render lands. Shows the target aspect, position and a description so
   the composition can be approved before any image is generated. */
.imgph{
  position:relative; aspect-ratio:4/3; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,rgba(61,149,255,.05),rgba(61,149,255,.015)), var(--dev-screen);
  border:1.5px dashed rgba(61,149,255,.42);
  box-shadow:var(--card-sh);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:26px;
}
.imgph::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:linear-gradient(rgba(120,140,190,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(120,140,190,.09) 1px,transparent 1px);
  background-size:24px 24px;
}
.imgph-badge{
  position:relative; font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); background:rgba(61,149,255,.12); border:1px solid rgba(61,149,255,.3);
  border-radius:999px; padding:5px 12px; margin-bottom:14px;
}
.imgph-t{position:relative; font-family:var(--disp); font-weight:800; color:var(--ink); font-size:1.05rem; margin-bottom:7px}
.imgph-d{position:relative; color:var(--body-c); font-size:.85rem; line-height:1.55; max-width:360px}

@media (max-width:900px){
  .feat{grid-template-columns:1fr; gap:22px; padding:36px 0}
  .feat:nth-child(even) .feat-copy{order:0}
}

/* ══════════════════════════════════════════════════════════════
   SUBPAGE KIT — shared by /features/, /pricing/, /faq/, etc.
   ══════════════════════════════════════════════════════════════ */

/* page header band */
.subhero{
  padding:150px 24px 64px;
  text-align:center;
  background:
    radial-gradient(720px 340px at 50% -80px, rgba(61,149,255,.14), transparent 70%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.subhero-in{max-width:820px; margin:0 auto}
.subhero .sec-tag{margin-bottom:18px}
.subhero-h1{
  font-family:var(--disp); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(2.1rem,5.4vw,3.4rem); line-height:1.08;
  color:var(--ink); margin:14px 0 18px;
}
.subhero-sub{
  font-size:clamp(1rem,1.6vw,1.13rem); color:var(--body-c);
  max-width:640px; margin:0 auto; line-height:1.65;
}
.subhero-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px}
.subhero-note{margin-top:16px; font-size:.83rem; font-weight:600; color:var(--mut)}

/* generic page body container */
.pagebody{max-width:1080px; margin:0 auto; padding:64px 24px 20px}
.pagebody-narrow{max-width:780px}

/* feature story rows — alternating copy/visual */
.story{
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  align-items:center; padding:56px 0;
}
.story + .story{border-top:1px solid var(--line)}
.story:nth-child(even) .story-copy{order:2}
.story-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue); margin-bottom:12px;
}
.story-kicker i{width:22px; height:1px; background:var(--blue); display:inline-block}
.story-h{
  font-family:var(--disp); font-weight:800; letter-spacing:-.015em;
  font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.15; color:var(--ink);
  margin-bottom:14px;
}
.story-p{color:var(--body-c); line-height:1.7; margin-bottom:18px}
.story-list{list-style:none; padding:0; display:grid; gap:10px}
.story-list li{
  position:relative; padding-left:26px;
  color:var(--body-c); font-size:.95rem; line-height:1.55;
}
.story-list li b{color:var(--ink); font-weight:700}
.story-list li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:14px; height:14px; border-radius:50%;
  background:rgba(61,149,255,.14);
  box-shadow:inset 0 0 0 1.5px var(--blue);
}
.story-list li::after{
  content:""; position:absolute; left:4px; top:calc(.42em + 4.5px);
  width:5px; height:3px;
  border-left:1.6px solid var(--blue); border-bottom:1.6px solid var(--blue);
  transform:rotate(-45deg);
}

/* story visual: framed panel reusing the device tokens */
.story-visual{
  background:var(--dev-screen);
  border:1px solid var(--dev-row-bd); border-radius:var(--r);
  box-shadow:var(--card-sh); padding:16px;
  user-select:none;
}
.story-visual img{display:block; width:100%; height:auto; border-radius:12px; -webkit-user-drag:none}
.story-visual .see-row{margin-top:8px}
.story-visual .see-row:first-child{margin-top:0}

/* simple card grids (integrations, FAQ topics, download facts) */
.cardgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:8px 0 56px}
.cardgrid-2{grid-template-columns:repeat(2,1fr)}
.kcard{
  background:var(--dev-screen); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--card-sh);
  padding:26px 24px;
}
.kcard h3{
  font-family:var(--disp); font-weight:800; font-size:1.05rem;
  color:var(--ink); margin-bottom:8px; letter-spacing:-.01em;
}
.kcard p{color:var(--body-c); font-size:.92rem; line-height:1.65}
.kcard ul{list-style:none; padding:0; margin-top:12px; display:grid; gap:8px}
.kcard ul li{color:var(--body-c); font-size:.9rem; padding-left:20px; position:relative}
.kcard ul li::before{content:"·"; position:absolute; left:6px; color:var(--blue); font-weight:800}
.kcard .kcard-note{margin-top:12px; font-size:.8rem; color:var(--mut); font-weight:600}

/* numbered steps (how it works) */
.steps-col{display:grid; gap:0; padding-bottom:56px}
.stepx{
  display:grid; grid-template-columns:56px 1fr; gap:20px;
  padding:30px 0; border-top:1px solid var(--line);
}
.stepx:first-child{border-top:0}
.stepx-num{
  width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--dev-row); border:1px solid var(--dev-row-bd);
  color:var(--blue); font-weight:800; font-family:var(--disp);
}
.stepx h3{font-family:var(--disp); font-weight:800; color:var(--ink); font-size:1.12rem; margin-bottom:6px}
.stepx p{color:var(--body-c); line-height:1.68; font-size:.96rem}
.stepx p code{white-space:nowrap}

/* fact/spec table (pricing disclosures, security data-flow) */
.facts{
  border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; margin:8px 0 56px;
  background:var(--dev-screen); box-shadow:var(--card-sh);
}
.fact{
  display:grid; grid-template-columns:240px 1fr; gap:18px;
  padding:18px 24px; border-top:1px solid var(--line);
}
.fact:first-child{border-top:0}
.fact b{color:var(--ink); font-weight:700; font-size:.95rem}
.fact p{color:var(--body-c); font-size:.93rem; line-height:1.6}
.fact p + p{margin-top:6px}

/* prose block */
.prose{padding-bottom:40px}
.prose h2{
  font-family:var(--disp); font-weight:800; letter-spacing:-.015em;
  color:var(--ink); font-size:1.45rem; margin:40px 0 12px;
}
.prose p{color:var(--body-c); line-height:1.72; margin-bottom:14px}
.prose ul{margin:0 0 14px 20px; color:var(--body-c); line-height:1.7}
.prose li{margin-bottom:6px}
.prose a{color:var(--blue); font-weight:600; text-decoration:none}
.prose a:hover{text-decoration:underline}

/* bottom CTA band for subpages */
.subcta{
  text-align:center; padding:56px 24px 88px;
}
.subcta h2{
  font-family:var(--disp); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.6rem,3.4vw,2.3rem); color:var(--ink); margin-bottom:12px;
}
.subcta p{color:var(--body-c); margin-bottom:24px}
.subcta .hero-ctas{justify-content:center}

/* nav active state */
.nav-pill a[aria-current="page"],.nav-menu a[aria-current="page"]{color:var(--ink); font-weight:700}

/* ── Accessibility: comfortable tap targets on touch layouts ──── */
@media (max-width:900px){
  .nav-pill a,.nav-menu a,.foot-col a{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .foot-col a{padding:4px 0}
  .qa summary{min-height:44px; display:flex; align-items:center}
  .brand{min-height:44px; display:inline-flex; align-items:center}
  .nav-login{display:inline-flex; align-items:center; min-height:44px; padding-inline:10px}
  .theme-btn,.nav-burger{min-width:44px; min-height:44px}
  .btn{min-height:44px}
  .foot-base span,.foot-led{min-height:auto}
  .pv-tab,.bx-tabadd{min-height:0}
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:960px){
  .story{grid-template-columns:1fr; gap:28px; padding:44px 0}
  .story:nth-child(even) .story-copy{order:0}
  .cardgrid{grid-template-columns:1fr 1fr}
  .price-grid-teaser{grid-template-columns:1fr; max-width:520px}
}
@media (max-width:640px){
  .cardgrid,.cardgrid-2{grid-template-columns:1fr}
  .fact{grid-template-columns:1fr; gap:6px; padding:16px 18px}
  .stepx{grid-template-columns:44px 1fr; gap:14px}
  .subhero{padding:124px 20px 48px}
  .pagebody{padding:44px 20px 12px}
  .see-verb{min-width:70px}
  .see-m{display:none}
  .mtg-m{display:none}
}
/* source: dockly.css */
/* Dockly-specific identity and real product visual treatment layered over the authorized source design. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-latin.woff2?v=1") format("woff2")}
.hero-scene{background-position:center top;background-repeat:no-repeat;background-size:cover}
.hero-bg .scene-light{background-image:url("assets/hero-bg-light.jpg?v=1")}
.hero-bg .scene-dark{background-image:url("assets/hero-bg-dark.jpg?v=1")}
.scene-dark{display:none}
[data-theme="dark"] .scene-light{display:none}
[data-theme="dark"] .scene-dark{display:block}
.dockly-mark{display:inline-flex!important;align-items:flex-end!important;justify-content:center!important;gap:3px!important;width:22px!important;height:23px!important;background:none!important;border-radius:0!important;box-shadow:none!important;transform:none!important}
.dockly-mark::before,.dockly-mark::after{display:none!important}
.dockly-mark i{display:block;width:5px;border-radius:3px;background:#62e6c6;box-shadow:0 0 18px rgba(98,230,198,.22)}
.dockly-mark i:nth-child(1){height:13px}.dockly-mark i:nth-child(2){height:21px}.dockly-mark i:nth-child(3){height:16px;background:#ffb067}
.hero-logos{display:flex!important;position:relative!important;align-items:center;justify-content:center;gap:10px;margin-bottom:16px}.dockly-chip{position:relative;inset:auto!important;display:inline-flex!important;align-items:center;justify-content:center;width:44px!important;height:44px!important;padding:8px!important;border:1px solid rgba(255,255,255,.12);border-radius:13px!important;background:rgba(15,20,29,.72);box-shadow:0 12px 30px rgba(0,0,0,.24);transform:none!important;animation:none!important}.dockly-chip svg{width:25px;height:25px;fill:#ff9368!important}.dockly-chip.docker-chip svg{fill:#58a6ff!important}.hero-plus{font-size:1rem;font-weight:800;color:var(--mut)}
.github-ic{display:block;width:20px;height:20px;min-height:0;object-fit:contain;flex:0 0 20px}.hero .btn-os{gap:10px}
.dockly-device{background:#070d16}.dockly-screen{padding:0!important;overflow:hidden;background:#0d1828!important;display:block!important}.dockly-screen>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left;pointer-events:none;-webkit-user-drag:none}
.hero-device{max-width:1200px}.device-top{background:#161f2c}.dev-title{text-transform:lowercase;letter-spacing:.03em}
.feat-media{isolation:isolate}.feat-media img{border-radius:0!important;filter:drop-shadow(0 30px 60px rgba(0,0,0,.36))!important;-webkit-mask-image:none!important;mask-image:none!important;transform:none!important}
[data-theme="light"] .feat-media img{filter:drop-shadow(0 28px 52px rgba(52,72,103,.18))!important}
[data-theme="light"] .dockly-screen{background:#0d1828!important}
.pcard-price{gap:12px;align-items:baseline}.pcard-price .pcard-per{margin:0}
.price-trust span{white-space:normal}.foot-led{white-space:nowrap}
@media (min-width:901px){.feat-media img{width:114%!important;margin-left:-7%}.feat:nth-child(even) .feat-media img{margin-left:-7%}}
@media (max-width:900px){.dockly-chip{display:inline-flex!important}.hero-device{padding-inline:12px}.feat-media img{width:108%;margin-left:-4%}.nav-menu{max-height:calc(100vh - 72px);overflow:auto}}
@media (max-width:640px){.hero-h1 br{display:none}.hero-h1{max-width:12ch;margin-inline:auto}.hero-sub{max-width:32ch}.hero-note{padding-inline:20px}.dockly-screen>img{min-height:210px;object-fit:cover}.foot-led{white-space:normal}}
@media (prefers-reduced-motion:reduce){.dockly-mark i{box-shadow:none}}