/* GENERATED by scripts/sync-owner-template.mjs from AI-Scaling marketing a0251af7a80d. Do not edit; edit the source and re-run. */
@font-face{font-family:'Aeonik';font-weight:300;font-style:normal;font-display:swap;src:url('/owner/fonts/aeonik-light.woff2') format('woff2');unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB-02DB,U+02DD-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+27C0-FEFE,U+FF00-FFFC,U+FFFE-10FFFF}
@font-face{font-family:'Aeonik';font-weight:300;font-style:normal;font-display:swap;src:url('/owner/fonts/aeonik-light-latin-be4f6ec93a33.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-27BF,U+FEFF,U+FFFD}
@font-face{font-family:'Aeonik';font-weight:400;font-style:normal;font-display:swap;src:url('/owner/fonts/aeonik-regular.woff2') format('woff2');unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB-02DB,U+02DD-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+27C0-FEFE,U+FF00-FFFC,U+FFFE-10FFFF}
@font-face{font-family:'Aeonik';font-weight:400;font-style:normal;font-display:swap;src:url('/owner/fonts/aeonik-regular-latin-815cdeb2203a.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-27BF,U+FEFF,U+FFFD}
@font-face{font-family:'Aeonik';font-weight:500;font-style:normal;font-display:swap;src:url('/owner/fonts/aeonik-medium.woff2') format('woff2');unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB-02DB,U+02DD-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+27C0-FEFE,U+FF00-FFFC,U+FFFE-10FFFF}
@font-face{font-family:'Aeonik';font-weight:500;font-style:normal;font-display:swap;src:url('/owner/fonts/aeonik-medium-latin-b400248edbe5.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-27BF,U+FEFF,U+FFFD}
@font-face{font-family:'Aeonik';font-weight:700;font-style:normal;font-display:swap;src:url('/owner/fonts/aeonik-bold.woff2') format('woff2');unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB-02DB,U+02DD-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+27C0-FEFE,U+FF00-FFFC,U+FFFE-10FFFF}
@font-face{font-family:'Aeonik';font-weight:700;font-style:normal;font-display:swap;src:url('/owner/fonts/aeonik-bold-latin-e11a73d8779f.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-27BF,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-weight:300 600;font-style:italic;font-display:swap;src:url('/owner/fonts/fraunces-italic-var.woff2') format('woff2');unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB-02DB,U+02DD-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+27C0-FEFE,U+FF00-FFFC,U+FFFE-10FFFF}
@font-face{font-family:'Fraunces';font-weight:300 600;font-style:italic;font-display:swap;src:url('/owner/fonts/fraunces-italic-var-latin-deb84beca792.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-27BF,U+FEFF,U+FFFD}
/* src/styles/home-vision.css */
/* Home vision v4 (2026-10-07). Scoped to .hv. Dark hero and chapters (the brand's night scene), white product canvas,
   one electric-blue accent. Product UI lives in hv-ui.css. */
/* Size-matched fallbacks: Arial/Georgia scaled to Aeonik/Fraunces widths (measured in the browser 2026-10-08),
   so text wraps the same before and after the web fonts swap in. Without them the mobile headline lost a line
   on swap and shifted the whole hero (CLS 0.14). Overrides are divided by size-adjust, which scales them. */
@font-face{font-family:'Aeonik Fallback';font-weight:300;src:local('Arial'),local('ArialMT');size-adjust:97.1%;ascent-override:95.8%;descent-override:23.7%;line-gap-override:0%}
@font-face{font-family:'Aeonik Fallback';font-weight:400;src:local('Arial'),local('ArialMT');size-adjust:99.7%;ascent-override:93.3%;descent-override:23.1%;line-gap-override:0%}
@font-face{font-family:'Aeonik Fallback';font-weight:500;src:local('Arial'),local('ArialMT');size-adjust:101.9%;ascent-override:91.3%;descent-override:22.6%;line-gap-override:0%}
@font-face{font-family:'Aeonik Fallback';font-weight:600 700;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:97.2%;ascent-override:95.7%;descent-override:23.7%;line-gap-override:0%}
@font-face{font-family:'Fraunces Fallback';font-style:italic;src:local('Georgia Italic'),local('Georgia-Italic');size-adjust:79.6%;ascent-override:123.1%;descent-override:32.7%;line-gap-override:0%}
.hv{
  --bg:#FFFFFF;--bg-2:#F6F7F9;--ln:#E7EAEF;--ln-2:#D6DCE5;
  --tx:#0B1220;--tx-2:#414C5F;--tx-3:#667085;
  --navy:#050A17;--navy-2:#09132A;--navy-3:#10224A;
  --dk-tx:#F2F5FB;--dk-tx2:#AEB8CC;--dk-tx3:#8592AB;--dk-ln:rgba(160,185,235,.14);
  --blue:#2F6BFF;--blue-d:#1D55E6;--blue-l:#EDF2FF;--blue-br:#7FA6FF;--cyan:#6AD2FF;
  --green:#0E8A5C;--green-l:#E4F5EC;--amber:#A8650A;
  --sh:0 0 0 1px rgba(11,18,32,.06),0 1px 2px rgba(11,18,32,.04),0 16px 36px -22px rgba(11,18,32,.28);
  --sh-lg:0 0 0 1px rgba(11,18,32,.07),0 2px 6px rgba(11,18,32,.04),0 40px 80px -36px rgba(11,18,32,.38);
  --ease:cubic-bezier(.16,1,.3,1);
  position:relative;isolation:isolate;background:var(--bg);color:var(--tx);caret-color:var(--blue);accent-color:var(--blue);
  font-family:Aeonik,'Aeonik Fallback',system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
.hv *{box-sizing:border-box}
.hv ::selection{background:rgba(47,107,255,.22)}
.hv ul,.hv ol,.hv dl,.hv dd{list-style:none;margin:0;padding:0}
.hv h1,.hv h2,.hv h3,.hv h4,.hv p,.hv figure,.hv blockquote{margin:0}
.hv a{color:inherit;text-decoration:none}
.hv img{display:block;max-width:100%;height:auto}
.hv :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
.hv .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hv .wrap{width:min(1200px,100% - 48px);margin:0 auto}
.hv em{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
.hv .ic{width:16px;height:16px;flex:none}
.hv output{font:600 15px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tx);font-variant-numeric:tabular-nums}

/* buttons + fields */
.hv .btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 20px;border-radius:12px;font:500 15.5px Aeonik,system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:background .2s,transform .25s var(--ease),box-shadow .2s,color .2s}
.hv .btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.hv .btn.sm{height:36px;padding:0 14px;font-size:14.5px;border-radius:10px}
.hv .btn.pri{background:var(--blue);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(29,85,230,.45),0 10px 24px -12px rgba(47,107,255,.85)}
.hv .btn.pri:hover{background:var(--blue-d);transform:translateY(-1px)}
.hv .btn.pri:active{transform:translateY(0) scale(.98)}
.hv .btn.gh{color:inherit;opacity:.82}.hv .btn.gh:hover{opacity:1}
.hv .btn.glass{color:#fff;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.hv .btn.glass:hover{background:rgba(255,255,255,.12)}
.hv .signup{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;width:100%}
.hv .field{display:flex;align-items:center;height:56px;width:min(440px,100%);padding:0 5px 0 18px;background:#fff;border-radius:14px;box-shadow:0 0 0 1px var(--ln-2),0 2px 8px rgba(11,18,32,.05);transition:box-shadow .2s;cursor:text}
.hv .field:focus-within{box-shadow:0 0 0 1.5px var(--blue),0 0 0 6px rgba(47,107,255,.16)}
.hv .field input{all:unset;flex:1;min-width:0;font:16px Aeonik,system-ui,sans-serif;color:var(--tx);text-align:left}
.hv .field input::placeholder{color:var(--tx-3)}
.hv .field .btn{height:46px}
.hv .signup.dk .field{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.hv .signup.dk .field:focus-within{box-shadow:inset 0 0 0 1.5px var(--blue-br),0 0 0 6px rgba(47,107,255,.22)}
.hv .signup.dk .field input{color:#fff}
.hv .signup.dk .field input::placeholder{color:#8E9AB2}
.hv .hear{height:56px;border-radius:14px;padding:0 20px 0 14px}
.hv .pl{width:28px;height:28px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center}
.hv .pl .ic{width:11px;height:11px;margin-left:2px}
.hv .lnk{display:inline-flex;align-items:center;gap:4px;color:var(--blue);font-weight:500;font-size:15.5px}
.hv .lnk .ic{width:15px;height:15px;transition:transform .2s var(--ease)}
.hv .lnk:hover .ic{transform:translateX(3px)}

/* slots: things only Daniel can supply */
.hv .slot{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#8A4B00;background:#FFF5E0;border:1px dashed #E2AD52;border-radius:7px;padding:5px 10px;white-space:normal}
.hv .slot.dk{color:#FFD08A;background:rgba(255,190,90,.07);border-color:rgba(255,190,90,.38)}
.hv .slot:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* announcement + nav */
.hv .annc{position:relative;z-index:61;display:flex;justify-content:center;align-items:center;gap:10px;height:40px;padding:0 16px;background:#02050D;color:#C9D4EA;font-size:14px;border-bottom:1px solid var(--dk-ln)}
.hv .annc .new{font-size:11.5px;font-weight:600;color:#fff;background:var(--blue);border-radius:6px;padding:2px 7px}
.hv .annc-l{display:inline-flex;align-items:center;gap:2px;color:#fff;font-weight:500}
.hv .annc-l .ic{width:14px;height:14px;transition:transform .2s var(--ease)}
.hv .annc:hover .annc-l .ic{transform:translateX(3px)}
.hv-nav{position:sticky;top:0;z-index:60;color:#fff;transition:background .3s,color .3s,box-shadow .3s}
.hv-nav .nav{display:flex;align-items:center;gap:40px;height:66px}
.hv-nav .logo{display:flex;flex:none}
.hv-nav .lb{display:none}
.hv-nav .menu{display:flex;gap:30px;font-size:15px}
.hv-nav .menu a{opacity:.78;transition:opacity .2s}
.hv-nav .menu a:hover{opacity:1}
.hv-nav .r{margin-left:auto;display:flex;align-items:center;gap:6px}
.hv-nav.s,.hv-nav.open{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.8) blur(16px);-webkit-backdrop-filter:saturate(1.8) blur(16px);color:var(--tx);box-shadow:0 1px 0 var(--ln)}
.hv-nav.s .lw,.hv-nav.open .lw{display:none}.hv-nav.s .lb,.hv-nav.open .lb{display:block}
.hv .burger{all:unset;display:none;width:40px;height:40px;border-radius:10px;cursor:pointer;position:relative}
.hv .burger span{position:absolute;left:11px;right:11px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .3s var(--ease)}
.hv .burger span:first-child{top:16px}.hv .burger span:last-child{top:23px}
.hv-nav.open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
.hv-nav.open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.hv .sheet{display:grid;gap:2px;padding:8px 20px 22px;background:#fff;box-shadow:0 1px 0 var(--ln),0 24px 40px -24px rgba(11,18,32,.3)}
.hv .sheet[hidden]{display:none}
.hv .sheet a:not(.btn){display:flex;align-items:center;height:48px;font-size:17px;border-bottom:1px solid var(--ln)}
.hv .sheet .btn{margin-top:14px}

/* hero */
.hv .hero{position:relative;isolation:isolate;margin-top:-66px;padding:136px 0 0;background:var(--navy);color:var(--dk-tx);overflow:hidden}
.hv .hero-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(55% 38% at 50% 0%,rgba(47,107,255,.34),transparent 72%),
  radial-gradient(50% 30% at 50% 58%,rgba(76,130,255,.22),transparent 70%),
  linear-gradient(180deg,var(--navy) 0%,#071026 60%,var(--navy) 100%)}
.hv .hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
.hv h1{max-width:980px;font-weight:700;font-size:clamp(42px,6.2vw,86px);line-height:1;letter-spacing:-.032em;text-wrap:balance;color:#fff}
.hv h1 em{color:var(--blue-br)}
.hv .hero .sub{max-width:600px;margin-top:24px;font-size:20px;line-height:1.5;color:var(--dk-tx2);text-wrap:balance}
.hv .hero .signup{margin-top:34px}
.hv .picker{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:26px}
.hv .pk-l{font-size:14px;color:var(--dk-tx3);margin-right:4px}
.hv .picker button{all:unset;cursor:pointer;height:32px;padding:0 13px;border-radius:999px;font-size:14px;color:#C4CDDF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background .2s,color .2s,box-shadow .2s}
.hv .picker button:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.hv .picker button.on{background:#fff;color:var(--navy);box-shadow:none;font-weight:500}
.hv .picker button:focus-visible{outline:2px solid var(--blue-br);outline-offset:2px}
.hv .hero .stage{margin-top:56px;position:relative}
.hv .hero .stage:before{content:"";position:absolute;inset:-60px 6% auto;height:70%;z-index:-1;background:radial-gradient(closest-side,rgba(76,130,255,.32),transparent);filter:blur(20px)}
.hv .hero .stage .ui-fit{border-radius:14px;box-shadow:0 0 0 1px rgba(150,180,255,.18),0 50px 120px -30px rgba(29,85,230,.55),0 30px 60px -30px rgba(0,0,0,.9);animation:rise 1.1s var(--ease) .15s both}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}
.hv .logos{padding:52px 0 64px;display:grid;gap:20px;justify-items:center}
.hv .logos p{font-size:14px;color:var(--dk-tx3)}
.hv .logos ul{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 36px}
.hv .logos li{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:500;color:rgba(232,238,250,.62)}
.hv .logos svg{width:20px;height:20px;fill:currentColor}

/* sections */
.hv .sec{padding:128px 0}
.hv h2{font-weight:700;font-size:clamp(34px,4.4vw,58px);line-height:1.04;letter-spacing:-.028em;text-wrap:balance}
.hv h2 em{color:var(--blue)}
.hv .head{max-width:760px}
.hv .head.center{margin:0 auto;text-align:center}
.hv .head>p{margin-top:18px;font-size:19px;color:var(--tx-2);text-wrap:balance}
.hv .split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.hv .split.top{align-items:start}
.hv .dark{background:var(--navy);color:var(--dk-tx)}
.hv .dark h2{color:#fff}
.hv .dark h2 em{color:var(--blue-br)}
.hv .dark .head>p{color:var(--dk-tx2)}

/* product */
.hv .tabs-wrap{display:flex;justify-content:center;margin-top:48px}
.hv .tabs{display:flex;gap:2px;padding:4px;border-radius:14px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--ln);max-width:100%;overflow-x:auto;scrollbar-width:none}
.hv .tabs::-webkit-scrollbar{display:none}
.hv .tabs button{all:unset;flex:none;cursor:pointer;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:10px;font-size:14.5px;font-weight:500;color:var(--tx-2);transition:background .25s,color .25s,box-shadow .25s}
.hv .tabs button .ic{width:15px;height:15px;color:var(--tx-3);transition:color .25s}
.hv .tabs button:hover{color:var(--tx)}
.hv .tabs button.on{background:#fff;color:var(--tx);box-shadow:0 1px 2px rgba(11,18,32,.08),0 0 0 1px var(--ln)}
.hv .tabs button.on .ic{color:var(--blue)}
.hv .tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.hv .panes{margin-top:44px}
.hv .pane[hidden]{display:none}
.hv .pane.on{animation:paneIn .6s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}}
.hv .pane-copy{display:grid;grid-template-columns:1.1fr .9fr;gap:24px 64px;align-items:end;margin-bottom:32px}
.hv .pane-copy h3{grid-column:1;font-size:clamp(26px,2.6vw,36px);line-height:1.1;letter-spacing:-.022em;font-weight:700}
.hv .pane-copy p{grid-column:1;font-size:17.5px;color:var(--tx-2);max-width:560px}
.hv .pts{grid-column:2;grid-row:1/span 2;display:grid;gap:10px;align-self:end}
.hv .pts li{display:flex;align-items:center;gap:10px;font-size:15.5px;color:var(--tx-2);padding-bottom:10px;border-bottom:1px solid var(--ln)}
.hv .pts li:last-child{border:0;padding-bottom:0}
.hv .pts .ic{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--blue-l);color:var(--blue);stroke-width:2.6}
.hv .screen .ui-fit{border-radius:12px;box-shadow:var(--sh-lg)}

/* hear otto */
.hv .talk{background:radial-gradient(70% 60% at 50% 0%,var(--navy-3) 0%,var(--navy-2) 42%,var(--navy) 100%)}
.hv .talk-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;margin-top:60px}
.hv .talk-grid>*,.hv .math-grid>*,.hv .twin>*,.hv .split>*{min-width:0}
.hv .call,.hv .night{padding:26px;border-radius:22px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--dk-ln)}
.hv .call-top{display:flex;align-items:center;justify-content:space-between}
.hv .who{display:flex;align-items:center;gap:12px}
.hv .who b{font-weight:500}
.hv .who small{display:block;font-size:13px;color:var(--dk-tx3)}
.hv .who .otto-live{border-radius:50%;box-shadow:0 0 0 1px rgba(106,210,255,.3),0 0 22px rgba(47,107,255,.45)}
.hv .tm{font:500 15px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dk-tx3);font-variant-numeric:tabular-nums}
.hv .biz-in{display:flex;align-items:center;gap:12px;margin-top:20px;padding:7px 7px 7px 16px;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--dk-ln);cursor:text}
.hv .biz-in:focus-within{box-shadow:inset 0 0 0 1.5px var(--blue-br)}
.hv .biz-in span{font-size:13px;color:var(--dk-tx3);white-space:nowrap}
.hv .biz-in input{all:unset;flex:1;min-width:0;font-size:16px;color:#fff}
.hv .biz-in input::placeholder{color:#6F7C97}
.hv .biz-in .btn .ic{width:11px;height:11px}
.hv .wave{display:flex;align-items:center;justify-content:center;gap:3px;height:52px;margin:18px 0 10px;overflow:hidden}
.hv .wave i{width:3px;height:4px;border-radius:2px;background:linear-gradient(var(--cyan),var(--blue));opacity:.35;transition:opacity .3s}
.hv .call.live .wave i{opacity:1;animation:wv .9s ease-in-out infinite;animation-delay:var(--d)}
@keyframes wv{50%{height:40px}}
.hv .ctx{display:flex;flex-direction:column;gap:8px;min-height:400px}
.hv .ctx li{max-width:84%;padding:11px 15px;border-radius:16px;font-size:15px;line-height:1.45;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.hv .ctx li.on{opacity:1;transform:none}
.hv .ctx li[data-who=otto]{background:rgba(47,107,255,.2);box-shadow:inset 0 0 0 1px rgba(127,166,255,.26);border-bottom-left-radius:5px}
.hv .ctx li[data-who=cust]{align-self:flex-end;background:rgba(255,255,255,.08);border-bottom-right-radius:5px}
.hv .result{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:14px 16px;border-radius:16px;background:#fff;color:var(--tx);opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hv .result.on{opacity:1;transform:none}
.hv .result .ok{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--green-l);color:var(--green)}
.hv .result .ok .ic{stroke-width:2.6}
.hv .result b{font-size:15px;font-weight:500}.hv .result small{display:block;font-size:13px;color:var(--tx-3)}
.hv .result .tag{margin-left:auto;font-size:12px;font-weight:500;color:var(--green);background:var(--green-l);padding:4px 9px;border-radius:6px}
.hv .night{display:flex;flex-direction:column}
.hv .night h3{font-size:20px;font-weight:600;color:#fff}
.hv .night ol{margin-top:22px;position:relative;display:grid;gap:20px}
.hv .night ol:before{content:"";position:absolute;left:69px;top:8px;bottom:8px;width:1px;background:var(--dk-ln)}
.hv .night li{display:grid;grid-template-columns:70px 1fr;gap:22px;position:relative}
.hv .night li:after{content:"";position:absolute;left:65px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px var(--navy-2)}
.hv .night li.g:after{background:#34D399}.hv .night li.a:after{background:#FBBF5A}
.hv .night time{font-size:13px;color:var(--dk-tx3);padding-top:1px;font-variant-numeric:tabular-nums}
.hv .night b{font-size:15.5px;font-weight:500;color:#fff}
.hv .night p{font-size:14px;color:var(--dk-tx2);margin-top:2px}
.hv .dial{margin-top:auto;padding-top:28px;display:grid;gap:14px}
.hv .dial-t{font-size:15px;color:var(--dk-tx2)}
.hv .dial-ph{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;color:var(--dk-tx2);transition:color .2s}
.hv .dial-ph:hover{color:#fff}
.hv .dial-ph .ic{width:15px;height:15px}

/* build */
.hv .build{position:relative;isolation:isolate;background:radial-gradient(60% 40% at 50% 30%,rgba(47,107,255,.2),transparent 70%),linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 50%,var(--navy) 100%)}
.hv .b-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:36px}
.hv .b-chips button{all:unset;cursor:pointer;display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;font-size:15px;font-weight:500;color:#C4CDDF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .2s,color .2s,box-shadow .2s}
.hv .b-chips button:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.hv .b-chips button.on{background:#fff;color:var(--navy)}
.hv .b-chips button:focus-visible{outline:2px solid var(--blue-br);outline-offset:2px}
.hv .build-stage{margin-top:36px}
.hv .build-stage .ui-fit{border-radius:14px;box-shadow:0 0 0 1px rgba(150,180,255,.2),0 50px 120px -40px rgba(29,85,230,.6),0 30px 60px -30px rgba(0,0,0,.8)}
/* platform */
.hv .platform{background:var(--bg)}
.hv .feat{margin-top:104px}
.hv .head+.feat{margin-top:72px}
.hv .feat .screen .ui-fit{border-radius:12px;box-shadow:var(--sh-lg)}

/* control */
.hv .control{background:var(--bg-2)}
.hv .twin{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:56px}
.hv .tw h3{font-size:22px;font-weight:600;letter-spacing:-.01em}
.hv .tw p{margin-top:10px;font-size:16.5px;color:var(--tx-2);max-width:500px}
.hv .tw-ui{margin-top:28px}
.hv .tw-ui .ui-fit{border-radius:14px;box-shadow:var(--sh-lg)}

/* before / after */
.hv .ba-table{margin-top:56px;border-radius:20px;overflow:hidden;box-shadow:var(--sh)}
.hv .ba-row{display:grid;grid-template-columns:.8fr 1fr 1.15fr;border-top:1px solid var(--ln)}
.hv .ba-row span{padding:20px 26px;font-size:16px}
.hv .ba-row>span:first-child{font-weight:500}
.hv .ba-row>span:nth-child(2){color:var(--tx-3);background:var(--bg-2)}
.hv .ba-row>span:nth-child(3){position:relative;padding-left:56px;background:#F7F9FF}
.hv .ba-row>span:nth-child(3):before{content:"";position:absolute;left:26px;top:22px;width:18px;height:18px;border-radius:50%;background:var(--blue) center/11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E")}
.hv .ba-row.hd{border:0}
.hv .ba-row.hd span{font-size:13px;font-weight:600;color:var(--tx-3);padding:15px 26px}
.hv .ba-row.hd span:nth-child(3){color:var(--blue);padding-left:26px}
.hv .ba-row.hd span:nth-child(3):before{display:none}

/* math */
.hv .math{background:var(--bg-2)}
.hv .math-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;margin-top:56px}
.hv .calc,.hv .stack{padding:34px;border-radius:22px;background:#fff;box-shadow:var(--sh)}
.hv .calc{display:grid;gap:22px;align-content:start}
.hv .calc label{display:grid;gap:12px}
.hv .calc label>span{display:flex;justify-content:space-between;align-items:baseline;font-size:15.5px;color:var(--tx-2)}
.hv input[type=range]{--p:50%;appearance:none;-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--blue) var(--p),var(--ln) var(--p));cursor:pointer}
.hv input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(11,18,32,.12),0 2px 6px rgba(11,18,32,.25);transition:transform .15s}
.hv input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.hv input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 1px rgba(11,18,32,.12),0 2px 6px rgba(11,18,32,.25)}
.hv input[type=range]:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.hv .out{padding:24px;border-radius:16px;background:radial-gradient(120% 140% at 100% 0%,var(--navy-3),var(--navy));color:#fff}
.hv .out small{font-size:13px;color:var(--dk-tx3)}
.hv .out div{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.hv .out b{font:600 clamp(38px,4.2vw,54px) ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.hv .out div span{color:var(--dk-tx2)}
.hv .out p{margin-top:8px;font-size:14.5px;color:var(--dk-tx2)}
.hv .src{font-size:12.5px;color:var(--tx-3)}
.hv .stack h3{font-size:21px;font-weight:600}
.hv .stack>p{margin-top:6px;font-size:14px;color:var(--tx-3)}
.hv .stack ul{margin-top:18px}
.hv .stack li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--ln);font-size:15px}
.hv .stack li img{width:20px;height:20px;object-fit:contain;border-radius:4px}
.hv .stack li small{color:var(--tx-3);font-size:13px}
.hv .stack li b{margin-left:auto;font:500 14.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tx-2);font-variant-numeric:tabular-nums}
.hv .tot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:15px;color:var(--tx-2)}
.hv .tot b{font:600 24px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tx);text-decoration:line-through;text-decoration-color:#E5484D;text-decoration-thickness:2px}
.hv .tot.ours{margin-top:10px;padding:14px 16px;border-radius:12px;background:var(--blue-l);color:var(--blue-d);font-weight:500}
.hv .tot.ours b{text-decoration:none;color:var(--blue);font:600 17px Aeonik,system-ui,sans-serif}

/* switching */
.hv .steps4{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:64px}
.hv .steps4:before{content:"";position:absolute;left:7px;right:12%;top:7px;height:2px;background:linear-gradient(90deg,var(--blue),rgba(47,107,255,.15))}
.hv .steps4 li{position:relative}
.hv .steps4 .node{display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px var(--blue),0 0 0 6px var(--bg)}
.hv .steps4 h3{margin-top:24px;font-size:19px;font-weight:600}
.hv .steps4 p{margin-top:8px;font-size:15.5px;color:var(--tx-2);max-width:260px}
.hv .center-slot{display:flex;justify-content:center;margin-top:44px}

/* owners */
.hv .owners{background:radial-gradient(70% 60% at 0% 0%,var(--navy-3) 0%,var(--navy) 70%)}
.hv .owners-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;margin-top:56px}
.hv .founder{padding:40px;border-radius:24px;background:#fff;color:var(--tx);display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.hv .founder blockquote{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;font-style:italic;font-size:clamp(22px,2.2vw,28px);line-height:1.38;letter-spacing:-.01em}
.hv .founder figcaption{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hv .fa{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--navy-2);color:#fff;font-weight:600}
.hv .founder b{font-weight:500}
.hv .founder small{display:block;color:var(--tx-3);font-size:13.5px}
.hv .founder .slot.dk{color:#8A4B00;background:#FFF5E0;border-color:#E2AD52}
.hv .stories{display:grid;gap:20px}
.hv .story{position:relative;padding:24px;border-radius:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;min-height:220px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px var(--dk-ln)}
.hv .sv{position:absolute;top:24px;right:24px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff}
.hv .sv .ic{width:22px;height:22px}
.hv .story:has(.sv){padding-top:96px} /* the badge sits top-right; on phones the title used to run under it */
/* operator proof: three published testimonials, their numbers, their videos */
.hv .ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.hv .op{display:flex;flex-direction:column;gap:22px;padding:28px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px var(--dk-ln)}
.hv .op blockquote{font-size:18px;line-height:1.45;color:#fff;letter-spacing:-.005em;flex:1}
.hv .op blockquote:before{content:"\201C"}.hv .op blockquote:after{content:"\201D"}
.hv .op-n{display:flex;align-items:baseline;gap:10px;padding-top:18px;border-top:1px solid var(--dk-ln)}
.hv .op-n b{font-size:28px;font-weight:600;color:#fff;letter-spacing:-.02em}
.hv .op-n small{font-size:13.5px;color:var(--dk-tx3)}
.hv .op-f{display:flex;align-items:center;gap:12px}
.hv .op-f img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.hv .op-f div{flex:1;min-width:0}
.hv .op-f b{display:block;font-weight:500;color:#fff;font-size:15px}
.hv .op-f small{display:block;font-size:13px;color:var(--dk-tx3)}
.hv .op-play{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px 0 10px;border-radius:999px;border:0;background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:13px;cursor:pointer}
.hv .op-play:hover{background:rgba(255,255,255,.18)}
.hv .op-play .ic{width:14px;height:14px}
.hv .op-dlg{padding:0;border:0;border-radius:18px;background:#000;width:min(960px,92vw);overflow:visible}
.hv .op-dlg::backdrop{background:rgba(2,5,13,.78)}
.hv .op-dlg video{display:block;width:100%;border-radius:18px}
.hv .op-x{position:absolute;top:-44px;right:0;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1;cursor:pointer}
@media (max-width:900px){.hv .ops{grid-template-columns:1fr}}
.hv .story h3{font-size:20px;font-weight:600;color:#fff;letter-spacing:-.01em;max-width:340px}
.hv .story p{font-size:15.5px;color:var(--dk-tx2);max-width:420px}
.hv .sv img{width:32px;height:auto}
.hv .sv.o{background:none;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 10px 30px rgba(47,107,255,.4)}
.hv .sv.o img{width:52px;height:52px}

/* shipped */
.hv .log{margin-top:34px}
.hv .log li{display:grid;grid-template-columns:72px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--ln);font-size:16px}
.hv .log time{font-size:13.5px;font-weight:500;color:var(--blue);padding-top:1px}
.hv .vision{position:relative;padding:40px 40px 182px;border-radius:24px;background:radial-gradient(100% 100% at 100% 0%,var(--navy-3),var(--navy));color:#fff;overflow:hidden;min-height:400px}
.hv .vision h3{font-size:clamp(24px,2.4vw,30px);line-height:1.15;letter-spacing:-.02em;max-width:420px}
.hv .vision p{margin-top:16px;font-size:16px;color:var(--dk-tx2);max-width:340px}
.hv .vision .v-otto{position:absolute;right:-8px;bottom:-30px;filter:drop-shadow(0 0 30px rgba(106,210,255,.28))}
@media (max-width:600px){.hv .vision .v-otto{width:176px}}

/* trust */
.hv .trust-sec{background:var(--bg-2)}
.hv .lede{margin:18px 0 22px;font-size:18px;color:var(--tx-2);max-width:440px}
.hv .trust-list{display:grid}
.hv .trust-list div{padding:22px 0;border-top:1px solid var(--ln-2)}
.hv .trust-list div:last-child{border-bottom:1px solid var(--ln-2)}
.hv .trust-list dt{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600}
.hv .trust-list dt .ic{width:20px;height:20px;color:var(--blue)}
.hv .trust-list dd{margin-top:6px;padding-left:30px;font-size:16px;color:var(--tx-2)}

/* pricing */
.hv .plan{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;max-width:1040px;margin:56px auto 0;padding:48px;border-radius:28px;background:#fff;box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.hv .plan:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.hv .plan-l{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hv .plan-l h3{font-size:21px;font-weight:600}
.hv .price{display:flex;align-items:baseline;gap:10px}
.hv .price b{font-size:44px;font-weight:700;letter-spacing:-.03em}
.hv .price span{color:var(--tx-3)}
.hv .plan-l p{font-size:15.5px;color:var(--tx-2)}
.hv .plan-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.hv .plan-cta .btn.alt{background:#fff;color:var(--tx);box-shadow:0 0 0 1px var(--ln-2)}
.hv .plan-cta .btn.alt:hover{box-shadow:0 0 0 1px var(--tx-3)}
.hv .plan-cta .ic{width:15px;height:15px}
.hv .plan-r{display:grid;gap:12px;align-content:center}
.hv .plan-r li{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--tx-2)}
.hv .plan-r .ic{width:20px;height:20px;padding:4px;border-radius:50%;background:var(--blue-l);color:var(--blue);stroke-width:2.6}

/* faq */
.hv .faq{background:var(--bg-2)}
.hv .qs details{border-bottom:1px solid var(--ln-2)}
.hv .qs details:first-child{border-top:1px solid var(--ln-2)}
.hv .qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:18.5px;font-weight:500}
.hv .qs summary::-webkit-details-marker{display:none}
.hv .qs summary .ic{width:20px;height:20px;color:var(--tx-3);transition:transform .3s var(--ease)}
.hv .qs details[open] summary .ic{transform:rotate(45deg);color:var(--blue)}
.hv .qs summary:focus-visible{outline-offset:-2px}
.hv .qs p{padding:0 0 24px;font-size:16.5px;color:var(--tx-2);max-width:620px}

/* final */
.hv .final{position:relative;isolation:isolate;padding:140px 0;text-align:center;background:var(--navy);color:#fff;overflow:hidden}
.hv .final .hero-glow{background:radial-gradient(50% 60% at 50% 100%,rgba(47,107,255,.4),transparent 70%),var(--navy)}
.hv .final-in{display:flex;flex-direction:column;align-items:center}
.hv .final .f-otto{filter:drop-shadow(0 0 44px rgba(106,210,255,.32))}
.hv .final h2{margin-top:22px;font-size:clamp(42px,5.8vw,78px);color:#fff}
.hv .final h2 em{color:var(--blue-br)}
.hv .final p{margin-top:16px;font-size:19px;color:var(--dk-tx2);max-width:540px}
.hv .final .signup{margin-top:34px}

/* footer */
.hv-foot{background:#02050D;color:var(--dk-tx3);font-size:14.5px;padding:72px 0 30px}
.hv-foot .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px}
.hv-foot .foot-l{display:flex;flex-wrap:wrap;gap:8px 22px}
.hv-foot .fb p{margin-top:14px;max-width:260px}
.hv-foot h4{color:#fff;font-size:14px;font-weight:500;margin:0 0 14px}
.hv-foot .foot-grid>div:not(.fb){display:flex;flex-direction:column;gap:10px}
.hv-foot a{transition:color .2s}.hv-foot a:hover{color:#fff}
.hv-foot .foot-b{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--dk-ln)}

/* responsive */
@media (max-width:1100px){
  .hv .owners-grid{grid-template-columns:1fr}
  .hv .stories{grid-template-columns:1fr 1fr}
  .hv .twin{gap:40px}
}
@media (max-width:900px){
  .hv-nav .menu,.hv-nav .btn.gh{display:none}
  .hv .burger{display:block}
  .hv .sec{padding:96px 0}
  .hv .split,.hv .talk-grid,.hv .twin,.hv .math-grid,.hv .plan{grid-template-columns:1fr}
  .hv .feat{margin-top:80px}
  .hv .split{gap:48px}
  .hv .tabs-wrap{justify-content:flex-start;margin-inline:-24px;padding-inline:24px;-webkit-mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 40px),transparent);mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 40px),transparent)}
  .hv .pane-copy{grid-template-columns:1fr;gap:14px}
  .hv .pts{grid-column:1;grid-row:auto;margin-top:6px}
  .hv .steps4{grid-template-columns:1fr 1fr;row-gap:44px}
  .hv .steps4:before{display:none}
  .hv .plan{padding:32px 26px;gap:32px}
  .hv-foot .foot-grid{grid-template-columns:1fr 1fr}
  .hv-foot .fb{grid-column:1/-1}
}
@media (max-width:600px){
  .hv{font-size:16px}
  .hv .wrap{width:calc(100% - 32px)}
  .hv .annc{font-size:13px}.hv .annc-t{display:none}
  .hv .hero{padding-top:112px}
  .hv .hero .sub{font-size:17.5px}
  .hv .signup{flex-direction:column}
  .hv .field,.hv .hear,.hv .signup .btn.glass{width:100%}
  .hv .picker{gap:6px}
  .hv .pk-l{width:100%;margin:0 0 4px}
  .hv .picker button{height:34px}
  .hv .b-chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin-inline:-16px;padding:0 16px;scrollbar-width:none}
  .hv .b-chips::-webkit-scrollbar{display:none}
  .hv .b-chips button{flex:none}
  .hv .hero .stage{margin-top:40px}
  .hv .logos{padding:40px 0 48px}
  .hv .logos ul{gap:12px 22px}
  .hv .logos li span{display:none}
  .hv .logos svg{width:24px;height:24px}
  .hv .sec{padding:80px 0}
  .hv .tabs-wrap{margin-inline:-16px;padding-inline:16px}
  .hv .call,.hv .night,.hv .calc,.hv .stack{padding:20px}
  .hv .biz-in{flex-wrap:wrap;padding:12px}
  .hv .biz-in span{width:100%}
  .hv .biz-in .btn{width:100%}
  .hv .ctx{min-height:520px}
  .hv .ctx li{font-size:14.5px;max-width:92%}
  .hv .night li{grid-template-columns:62px 1fr;gap:18px}
  .hv .night ol:before{left:61px}.hv .night li:after{left:57px}
  .hv .ba-row{grid-template-columns:1fr}
  .hv .ba-row.hd{display:none}
  .hv .ba-row span{padding:10px 18px}
  .hv .ba-row>span:first-child{padding-top:18px}
  .hv .ba-row>span:nth-child(2):before{content:attr(data-l) ": ";font-weight:500}
  .hv .ba-row>span:nth-child(3){padding:10px 18px 18px 46px}
  .hv .ba-row>span:nth-child(3):before{left:18px;top:12px}
  .hv .steps4{grid-template-columns:1fr;row-gap:28px;padding-left:28px}
  .hv .steps4:before{display:block;left:7px;right:auto;top:8px;bottom:8px;width:2px;height:auto;background:linear-gradient(var(--blue),rgba(47,107,255,.15))}
  .hv .steps4 .node{position:absolute;left:-28px;top:4px}
  .hv .steps4 h3{margin-top:0}
  .hv .stories{grid-template-columns:1fr}
  .hv .founder{padding:28px}
  .hv .vision{padding:28px 28px 168px;min-height:0}
  .hv .price b{font-size:36px}
  .hv-foot .foot-b{flex-direction:column;align-items:flex-start}
}
@media (max-width:400px){
  .hv-nav .logo img{width:108px;height:auto}
  .hv-nav .r{gap:2px}
  .hv-nav .r .btn.pri{padding:0 12px;font-size:14px}
  .hv h1{font-size:38px}
  .hv .annc .new{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hv *,.hv *:before{animation:none!important;transition:none!important}
}

/* src/styles/hv-ui.css */
/* Product UI kit for /home-vision. Designed at 1200px, scaled to fit by .ui-fit (JS sets --s).
   Two themes from one token set: light (default) and .dk (hero). */
.ui-fit{--s:1;--uw:1200;position:relative;width:100%;height:calc(var(--uh) * var(--s) * 1px);overflow:hidden;contain:layout paint}
.ui-fit>.ui{position:absolute;left:0;top:0;width:calc(var(--uw) * 1px);transform:scale(var(--s));transform-origin:0 0}

.ui{
  --c-bg:#FFFFFF;--c-side:#F7F8FA;--c-sub:#F9FAFB;--c-hover:#F1F3F5;--c-sel:#ECEEF2;--c-card:#FFFFFF;--c-chrome:#F3F4F6;
  --c-ln:#ECEEF1;--c-ln2:#DEE1E6;--c-tx:#11151F;--c-tx2:#4A5162;--c-tx3:#878E9C;
  --c-acc:#2F6BFF;--c-acc-tx:#2453D4;--c-acc-bg:#EEF2FF;--c-acc-ln:rgba(47,107,255,.32);
  --c-g:#16855A;--c-g-bg:#E6F5ED;--c-a:#A5600A;--c-a-bg:#FCF2E1;--c-r:#BF3F2C;--c-r-bg:#FBECE9;--c-p:#6A4ED4;--c-p-bg:#F1EDFD;
  --c-card-sh:0 0 0 1px var(--c-ln),0 1px 2px rgba(17,21,31,.04);
  --c-pop-sh:0 0 0 1px rgba(17,21,31,.06),0 12px 32px -8px rgba(17,21,31,.22),0 2px 6px rgba(17,21,31,.06);
  --c-btn:#FFFFFF;--c-btn-sh:0 0 0 1px var(--c-ln2),0 1px 1px rgba(17,21,31,.04);
  --c-ink-btn:#11151F;--c-ink-btn-tx:#FFFFFF;
  position:relative;display:flex;flex-direction:column;background:var(--c-bg);color:var(--c-tx);
  font:13px/1.45 Aeonik,system-ui,sans-serif;font-variant-numeric:tabular-nums;text-align:left;-webkit-font-smoothing:antialiased;
  border-radius:12px;overflow:hidden;
}
.ui.dk{
  --c-bg:#0E1322;--c-side:#0A0E1B;--c-sub:#0C1120;--c-hover:#151B2E;--c-sel:#1A2136;--c-card:#131A2C;--c-chrome:#090D18;
  --c-ln:#1C2337;--c-ln2:#283149;--c-tx:#E8ECF5;--c-tx2:#A2ABBF;--c-tx3:#6C768C;
  --c-acc:#4C82FF;--c-acc-tx:#93B4FF;--c-acc-bg:rgba(76,130,255,.14);--c-acc-ln:rgba(108,150,255,.45);
  --c-g:#52D69C;--c-g-bg:rgba(82,214,156,.12);--c-a:#F2B55A;--c-a-bg:rgba(242,181,90,.13);--c-r:#FF8B75;--c-r-bg:rgba(255,139,117,.12);--c-p:#B8A6FF;--c-p-bg:rgba(184,166,255,.13);
  --c-card-sh:0 0 0 1px var(--c-ln);
  --c-pop-sh:0 0 0 1px rgba(150,175,230,.14),0 18px 40px -10px rgba(0,0,0,.6);
  --c-btn:#171E31;--c-btn-sh:0 0 0 1px var(--c-ln2);
  --c-ink-btn:#E8ECF5;--c-ink-btn-tx:#0E1322;
}
.ui *{box-sizing:border-box}
.ui p,.ui h3,.ui h4,.ui h5,.ui h6,.ui ul,.ui ol,.ui dl,.ui dd,.ui blockquote{margin:0;padding:0;list-style:none}
.ui b{font-weight:500}
.ui em{font-family:inherit;letter-spacing:normal}
.ui small{font-size:11.5px;color:var(--c-tx3)}
.ui .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:-.01em}
.ui .ic{width:16px;height:16px;flex:none;stroke-width:1.5}
.ui img{display:inline-block}
.ui .g{color:var(--c-g)}

/* window chrome */
.ui-chrome{display:flex;align-items:center;height:38px;padding:0 14px;background:var(--c-chrome);border-bottom:1px solid var(--c-ln);flex:none}
.ui-chrome .lights{display:flex;gap:8px;flex:none}
.ui-chrome .lights i{width:12px;height:12px;border-radius:50%;background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.ui-chrome .lights i:nth-child(2){background:#FEBC2E}.ui-chrome .lights i:nth-child(3){background:#28C840}
.ui-chrome .url{margin:0 auto;display:flex;align-items:center;gap:7px;height:24px;padding:0 64px;border-radius:7px;background:var(--c-bg);box-shadow:0 0 0 1px var(--c-ln);font-size:12px;color:var(--c-tx3)}
.ui-chrome .url .ic{width:12px;height:12px}
.ui-chrome .sp{width:52px}
.ui-win{flex:1;min-height:0;display:flex}

/* avatars */
.ui .av{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;font-size:10.5px;font-weight:600;color:#fff;letter-spacing:.02em}
.ui .av.sm{width:24px;height:24px;font-size:9.5px}.ui .av.xs{width:20px;height:20px;font-size:8.5px}.ui .av.lg{width:40px;height:40px;font-size:13px}
.ui .a1{background:#5470E8}.ui .a2{background:#E07B3F}.ui .a3{background:#2A9D78}.ui .a4{background:#9A63D6}.ui .a5{background:#D9962B}.ui .a6{background:#2E98B3}.ui .a7{background:#D45B8B}

/* chips + status */
.ui .chip{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:500;white-space:nowrap;background:var(--c-hover);color:var(--c-tx2);transition:background .4s,color .4s}
.ui .chip .ic{width:12px;height:12px}
.ui .chip img{width:13px;height:auto}
.ui .chip.g{background:var(--c-g-bg);color:var(--c-g)}.ui .chip.a{background:var(--c-a-bg);color:var(--c-a)}.ui .chip.b{background:var(--c-acc-bg);color:var(--c-acc-tx)}.ui .chip.r{background:var(--c-r-bg);color:var(--c-r)}.ui .chip.p{background:var(--c-p-bg);color:var(--c-p)}
.ui .chip.lg{height:26px;padding:0 10px;font-size:12px}
.ui .st{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;font-size:11.5px;font-weight:500}
.ui .st:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ui .st.b{background:var(--c-acc-bg);color:var(--c-acc-tx)}.ui .st.p{background:var(--c-p-bg);color:var(--c-p)}.ui .st.a{background:var(--c-a-bg);color:var(--c-a)}.ui .st.g{background:var(--c-g-bg);color:var(--c-g)}.ui .st.n{background:var(--c-hover);color:var(--c-tx2)}

/* buttons */
.ui .btn-p,.ui .btn-g{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:8px;font-size:12.5px;font-weight:500;white-space:nowrap;transition:background .25s,box-shadow .25s,transform .2s}
.ui .btn-p{background:var(--c-acc);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(20,60,180,.35)}
.ui .btn-g{background:var(--c-btn);color:var(--c-tx);box-shadow:var(--c-btn-sh)}
.ui .btn-p .ic,.ui .btn-g .ic{width:14px;height:14px}
.ui .sm.btn-p,.ui .sm.btn-g{height:26px;padding:0 10px;font-size:12px}
.ui .btn-p.full{width:100%;height:36px}
.ui .btn-p.done{background:var(--c-g)}
.ui .btn-p.press{transform:scale(.96)}
.ui kbd{font:10.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--c-tx3);background:var(--c-bg);box-shadow:0 0 0 1px var(--c-ln2);border-radius:4px;padding:0 5px;line-height:17px}

/* sidebar */
.ui-side{width:232px;flex:none;background:var(--c-side);border-right:1px solid var(--c-ln);display:flex;flex-direction:column;padding:10px 8px 8px}
.ui .ws{display:flex;align-items:center;gap:8px;height:34px;padding:0 6px;border-radius:7px}
.ui .ws b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui .ws>.ic{width:13px;height:13px;color:var(--c-tx3)}
.ui .ws .cmp{margin-left:auto;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--c-btn);box-shadow:var(--c-btn-sh);color:var(--c-tx2);flex:none}
.ui .ws .cmp .ic{width:14px;height:14px}
.ui .ws-logo{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;flex:none;background:linear-gradient(150deg,#2B5BD9,#173A93);color:#fff;font-size:9.5px;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.ui .ws-logo.sm{width:28px;height:28px;font-size:10.5px;border-radius:8px}
.ui .sq{display:flex;align-items:center;gap:8px;height:28px;padding:0 8px;margin:6px 0 10px;border-radius:7px;color:var(--c-tx3);font-size:12.5px;background:var(--c-bg);box-shadow:0 0 0 1px var(--c-ln)}
.ui .sq .ic{width:14px;height:14px}
.ui .sq kbd{margin-left:auto}
.ui-side nav{display:grid;gap:1px}
.ui-side nav span{display:flex;align-items:center;gap:9px;height:28px;padding:0 8px;border-radius:7px;color:var(--c-tx2);font-size:13px}
.ui-side nav span .ic{color:var(--c-tx3)}
.ui-side nav span.on{background:var(--c-sel);color:var(--c-tx);font-weight:500}
.ui-side nav span.on .ic{color:var(--c-tx)}
.ui-side nav em{margin-left:auto;font-style:normal;font-size:11px;color:var(--c-tx3)}
.ui-side nav em.n{color:#fff;background:var(--c-acc);border-radius:9px;padding:0 6px;line-height:17px;font-weight:600;font-size:10.5px}
.ui-side nav .otto img{width:16px;height:auto}
.ui-side nav .live{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--c-g);box-shadow:0 0 0 3px var(--c-g-bg)}
.ui .grp{display:flex;align-items:center;justify-content:space-between;margin:14px 8px 4px;font-size:11.5px;font-weight:500;color:var(--c-tx3)}
.ui .grp .ic{width:12px;height:12px}
.ui-side nav.fav i{width:8px;height:8px;border-radius:3px;flex:none;margin:0 4px}
.ui .side-ft{margin-top:auto;display:grid;gap:6px}
.ui .on-call{display:flex;align-items:center;gap:8px;padding:8px;border-radius:9px;background:var(--c-bg);box-shadow:0 0 0 1px var(--c-ln);font-size:12px}
.ui .on-call img{width:20px;height:auto}
.ui .on-call b{display:block;font-size:12px}.ui .on-call small{display:block;font-size:11px}
.ui .mini-wv{margin-left:auto;display:flex;align-items:center;gap:2px;height:16px}
.ui .mini-wv i{width:2px;border-radius:1px;background:var(--c-acc);animation:mw 1s ease-in-out infinite;animation-delay:var(--d)}
@keyframes mw{0%,100%{height:4px}50%{height:14px}}
.ui .me{display:flex;align-items:center;gap:8px;height:34px;padding:0 6px}
.ui .me b{font-size:12.5px}
.ui .me .ic{margin-left:auto;color:var(--c-tx3);width:14px}

/* main column */
.ui-main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.ui-top{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-bottom:1px solid var(--c-ln);flex:none}
.ui .crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--c-tx3)}
.ui .crumb b{color:var(--c-tx);font-weight:500}
.ui .crumb .ic{width:12px;height:12px}
.ui .tb-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.ui .ask-otto{display:flex;align-items:center;gap:7px;height:28px;padding:0 6px 0 9px;border-radius:8px;background:var(--c-btn);box-shadow:var(--c-btn-sh);font-size:12px;color:var(--c-tx2)}
.ui .ask-otto img{width:15px;height:auto}
.ui .faces{display:flex}
.ui .faces .av{box-shadow:0 0 0 2px var(--c-bg);margin-left:-6px}
.ui .tb-ic{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:7px;color:var(--c-tx2)}
.ui .tb-ic i{position:absolute;top:5px;right:6px;width:6px;height:6px;border-radius:50%;background:#EF4D4D;box-shadow:0 0 0 2px var(--c-bg)}
.ui-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.ui-ov{position:absolute;inset:0;pointer-events:none;z-index:5}

/* list column */
.ui .list{width:296px;flex:none;border-right:1px solid var(--c-ln);display:flex;flex-direction:column;background:var(--c-bg)}
.ui .seg{display:flex;gap:2px;padding:10px 10px 8px}
.ui .seg span{display:flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:7px;font-size:12px;color:var(--c-tx3)}
.ui .seg span.on{background:var(--c-sel);color:var(--c-tx);font-weight:500}
.ui .seg i{font-style:normal;font-size:11px;color:var(--c-tx3)}
.ui .seg i.amb{color:var(--c-a);font-weight:600}
.ui .list ul{padding:0 6px}
.ui .list li{display:flex;gap:10px;padding:10px 10px 11px;border-radius:9px;position:relative}
.ui .list li+li:before{content:"";position:absolute;left:48px;right:10px;top:0;height:1px;background:var(--c-ln)}
.ui .list li.on{background:var(--c-acc-bg)}
.ui .list li.on:before,.ui .list li.on+li:before{display:none}
.ui .list li>div{flex:1;min-width:0}
.ui .l1{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ui .l1 b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui .l1 time{font-size:11px;color:var(--c-tx3);flex:none}
.ui .list li p{display:flex;align-items:center;gap:5px;margin:2px 0 7px;color:var(--c-tx2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui .list li p .ic{width:13px;height:13px;color:var(--c-tx3)}
.ui .ci{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;flex:none}
.ui .ci .ic{width:15px;height:15px}
.ui .ci.g{background:var(--c-g-bg);color:var(--c-g)}.ui .ci.b{background:var(--c-acc-bg);color:var(--c-acc)}.ui .ci.a{background:var(--c-a-bg);color:var(--c-a)}.ui .ci.r{background:var(--c-r-bg);color:var(--c-r)}

/* thread */
.ui .inbox,.ui .calls,.ui .why-s,.ui .rec,.ui .pb{display:flex;flex:1;min-height:0}
.ui .thread{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--c-bg)}
.ui .th-head{display:flex;align-items:center;gap:10px;height:58px;padding:0 18px;border-bottom:1px solid var(--c-ln);flex:none}
.ui .th-head b{display:block;font-size:14px}.ui .th-head small{display:block}
.ui .th-act{margin-left:auto;display:flex;gap:6px}
.ui .msgs{flex:1;min-height:0;padding:18px 22px;display:flex;flex-direction:column;gap:12px;background:var(--c-sub)}
.ui .day{align-self:center;font-size:11px;color:var(--c-tx3);padding:0 10px}
.ui .m{max-width:76%}
.ui .m p{padding:10px 13px;border-radius:14px;font-size:13px}
.ui .m.in p{background:var(--c-card);box-shadow:var(--c-card-sh);border-bottom-left-radius:5px}
.ui .m.out{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end}
.ui .m.out p{background:var(--c-acc);color:#fff;border-bottom-right-radius:5px}
.ui .m small{display:block;margin:5px 4px 0}
.ui .sys{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--c-tx3)}
.ui .sys img{width:18px;height:auto}
.ui .sys b{color:var(--c-tx2)}
.ui .draft{align-self:flex-end;width:90%;padding:13px 15px;border-radius:14px;background:var(--c-card);box-shadow:0 0 0 1px var(--c-acc-ln),0 14px 30px -16px rgba(47,107,255,.5);position:relative}
.ui .d-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;height:20px}
.ui .d-head img{width:18px;height:auto}
.ui .d-head b{font-size:12.5px;color:var(--c-acc-tx)}
.ui .d-head .t{font-size:11.5px;color:var(--c-tx3)}
.ui .d-head .why{margin-left:auto;font-size:12px;color:var(--c-tx2);text-decoration:underline;text-decoration-color:var(--c-ln2);text-underline-offset:3px}
.ui .d-head .why.on{color:var(--c-acc-tx);text-decoration-color:var(--c-acc)}
.ui .draft>p{font-size:13.5px;line-height:1.5;min-height:60px}
.ui .caret{display:inline-block;width:2px;height:15px;margin-left:1px;vertical-align:-2px;background:var(--c-acc);animation:blinkc 1s steps(1) infinite}
@keyframes blinkc{50%{opacity:0}}
.ui .d-src{display:flex;gap:6px;margin-top:10px}
.ui .d-src span{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;background:var(--c-hover);font-size:11px;color:var(--c-tx2);white-space:nowrap}
.ui .d-src .ic{width:12px;height:12px}
.ui .d-act{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:12px}
.ui .d-act.l{justify-content:flex-start}
.ui .d-act .hint{margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;color:var(--c-a);white-space:nowrap}
.ui .d-act .hint.ok{color:var(--c-g)}
.ui .composer{display:flex;align-items:center;gap:6px;margin:0 16px 14px;padding:6px 6px 6px 8px;border-radius:12px;background:var(--c-card);box-shadow:0 0 0 1px var(--c-ln2),0 2px 6px rgba(17,21,31,.04);flex:none}
.ui .composer .ch{display:flex;align-items:center;gap:5px;height:26px;padding:0 8px;border-radius:7px;font-size:12px;color:var(--c-tx3)}
.ui .composer .ch.on{background:var(--c-sel);color:var(--c-tx)}
.ui .composer .ch .ic{width:13px;height:13px}
.ui .composer .ph{margin-left:6px;color:var(--c-tx3);font-size:12.5px}
.ui .snd{margin-left:auto;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--c-acc);color:#fff}
.ui .snd .ic{width:14px;height:14px}

/* right panel */
.ui .side{width:272px;flex:none;border-left:1px solid var(--c-ln);padding:16px;display:flex;flex-direction:column;gap:14px;background:var(--c-bg)}
.ui .cust{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--c-ln)}
.ui .cust b{display:block;font-size:14px}.ui .cust small{display:block}
.ui .kv{display:grid;grid-template-columns:72px 1fr;gap:10px 8px;font-size:12.5px;align-items:center}
.ui .kv dt{color:var(--c-tx3)}
.ui h5{font-size:11.5px;font-weight:500;color:var(--c-tx3);margin-top:2px}
.ui .nx{display:grid;gap:4px}
.ui .nx li{display:flex;align-items:center;gap:9px;height:30px;padding:0 8px;border-radius:8px;font-size:12.5px;color:var(--c-tx2)}
.ui .nx li i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--c-ln2);font-style:normal;flex:none;color:#fff}
.ui .nx li i .ic{width:11px;height:11px;stroke-width:2.6;opacity:0}
.ui .nx li.on{background:var(--c-a-bg);color:var(--c-tx);font-weight:500}
.ui .nx li.on i{box-shadow:inset 0 0 0 1.5px var(--c-a)}
.ui .nx li.dn{color:var(--c-tx3);text-decoration:line-through;text-decoration-color:var(--c-ln2);background:none}
.ui .nx li.dn i{background:var(--c-g);box-shadow:none}
.ui .nx li.dn i .ic{opacity:1}
.ui .nx li small{margin-left:auto;color:var(--c-a);font-weight:500;text-decoration:none}
.ui .nx li.dn small{display:none}

/* notifications (hero) */
.ui .toasts{position:absolute;bottom:16px;right:16px;width:300px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.ui .toast{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:12px;background:var(--c-card);box-shadow:var(--c-pop-sh);opacity:0;transform:translateY(10px) scale(.98);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.ui .toast.in{opacity:1;transform:none}
.ui .toast .ti{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--c-acc-bg);color:var(--c-acc)}
.ui .toast .ti.g{background:var(--c-g-bg);color:var(--c-g)}
.ui .toast .ti img{width:20px;height:auto}
.ui .toast b{display:block;font-size:12.5px}
.ui .toast small{display:block;font-size:11.5px;color:var(--c-tx2)}
.ui .toast time{margin-left:auto;font-size:11px;color:var(--c-tx3);flex:none}
.ui .cursor{position:absolute;left:0;top:0;width:22px;height:22px;opacity:0;transition:transform 1.1s cubic-bezier(.65,0,.35,1),opacity .3s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.ui .cursor.on{opacity:1}

/* calls */
.ui .call-d{flex:1;min-width:0;padding:18px 22px;display:flex;flex-direction:column;gap:16px}
.ui .cd-head{display:flex;align-items:center;gap:12px}
.ui .cd-head b{display:block;font-size:15px}
.ui .cd-head .chip{margin-left:auto}
.ui .player{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--c-sub);box-shadow:inset 0 0 0 1px var(--c-ln)}
.ui .pp{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c-ink-btn);color:var(--c-ink-btn-tx);flex:none}
.ui .pp .ic{width:12px;height:12px;margin-left:2px}
.ui .wv{flex:1;display:flex;align-items:center;gap:2px;height:34px}
.ui .wv i{flex:1;border-radius:2px;background:var(--c-ln2)}
.ui .wv i.p{background:var(--c-acc)}
.ui .tx{display:grid;gap:9px}
.ui .tx p{display:grid;grid-template-columns:56px 1fr;gap:10px;font-size:13px;color:var(--c-tx2);padding:2px 0}
.ui .tx p b{font-size:12px;color:var(--c-tx)}
.ui .tx p b.o{color:var(--c-acc-tx)}
.ui .tx p.hl{background:var(--c-a-bg);border-radius:8px;padding:6px 8px;margin:0 -8px}
.ui .acts{display:grid;gap:12px}
.ui .acts li{display:flex;gap:10px;align-items:center}
.ui .acts b{display:block;font-size:12.5px}.ui .acts small{display:block}
.ui .sum{font-size:12.5px;color:var(--c-tx2);background:var(--c-sub);border-radius:10px;padding:10px 12px;box-shadow:inset 0 0 0 1px var(--c-ln)}

/* why */
.ui .why-s .thread{border-right:1px solid var(--c-ln)}
.ui .why-s .draft{width:88%}
.ui .kbd{align-self:flex-end;display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--c-tx3)}
.ui .kbd kbd{margin-left:8px}
.ui .why-p{width:356px;flex:none;padding:16px 20px;display:flex;flex-direction:column;gap:8px;background:var(--c-bg)}
.ui .wp-head{display:flex;justify-content:space-between;align-items:center;height:30px;margin-bottom:4px}
.ui .wp-head b{font-size:14px}
.ui h6{font-size:11.5px;font-weight:500;color:var(--c-tx3);margin-top:8px}
.ui .why-p>p{font-size:13px;color:var(--c-tx2)}
.ui .kn{display:grid;gap:6px}
.ui .kn li{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;background:var(--c-sub);box-shadow:inset 0 0 0 1px var(--c-ln)}
.ui .kn .ic{color:var(--c-acc)}
.ui .kn b{display:block;font-size:12.5px}.ui .kn small{display:block}
.ui .chk{display:grid;gap:8px}
.ui .chk li{display:flex;align-items:center;gap:8px;font-size:12.5px}
.ui .chk .ic{width:16px;height:16px;padding:3px;border-radius:50%;background:var(--c-g-bg);color:var(--c-g);stroke-width:2.6}

/* toolbars */
.ui .board-top,.ui .tbl-top,.ui .cal-top{display:flex;align-items:center;gap:12px;height:50px;padding:0 16px;border-bottom:1px solid var(--c-ln);flex:none}
.ui .vt{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--c-hover)}
.ui .vt span{display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:6px;font-size:12px;color:var(--c-tx2)}
.ui .vt span.on{background:var(--c-bg);color:var(--c-tx);font-weight:500;box-shadow:0 1px 2px rgba(17,21,31,.08),0 0 0 1px var(--c-ln)}
.ui .vt .ic{width:13px;height:13px}
.ui .sum-b{font-size:12px;color:var(--c-tx3)}
.ui .sum-b b{color:var(--c-tx);margin-left:4px}
.ui .board-top .btn-p,.ui .tbl-top .btn-g,.ui .cal-top .btn-p{margin-left:auto}
.ui .tbl-top .btn-p{margin-left:0}

/* pipeline */
.ui .board{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:14px;background:var(--c-sub)}
.ui .col{display:flex;flex-direction:column;gap:8px}
.ui .col-h{display:flex;align-items:center;gap:7px;height:24px;padding:0 4px;font-size:12.5px}
.ui .col-h .cd{width:8px;height:8px;border-radius:50%;flex:none}
.ui .col-h i{font-style:normal;font-size:11.5px;color:var(--c-tx3)}
.ui .col-h span{margin-left:auto;color:var(--c-tx3);font-size:11.5px}
.ui .card{display:flex;flex-direction:column;gap:8px;padding:11px;border-radius:10px;background:var(--c-card);box-shadow:var(--c-card-sh)}
.ui .card>b{font-size:12.5px}
.ui .c2{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--c-tx2)}
.ui .c2 .v{margin-left:auto;color:var(--c-tx);font-size:12px}
.ui .card .chip{align-self:flex-start}
.ui .card.hov{box-shadow:0 0 0 1px var(--c-acc-ln),0 14px 28px -12px rgba(17,21,31,.35);transform:rotate(-1.5deg) translateY(-3px)}

/* record + paper */
.ui .tl{flex:1;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--c-ln)}
.ui .rec-head{display:flex;align-items:center;gap:12px;padding:16px 20px 12px}
.ui .rec-head b{display:block;font-size:15px}
.ui .tabs-s{display:flex;gap:18px;padding:0 20px;border-bottom:1px solid var(--c-ln);font-size:12.5px;color:var(--c-tx3)}
.ui .tabs-s span{padding:9px 0}
.ui .tabs-s span.on{color:var(--c-tx);font-weight:500;box-shadow:inset 0 -2px 0 var(--c-tx)}
.ui .time{padding:18px 20px;display:grid;gap:16px;position:relative}
.ui .time:before{content:"";position:absolute;left:33px;top:30px;bottom:30px;width:1px;background:var(--c-ln2)}
.ui .time li{display:flex;gap:12px;align-items:center;position:relative}
.ui .time .dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c-bg);box-shadow:0 0 0 1px var(--c-ln2);color:var(--c-tx3);flex:none}
.ui .time .dot .ic{width:13px;height:13px}
.ui .time li.g .dot{background:var(--c-g-bg);color:var(--c-g);box-shadow:0 0 0 3px var(--c-bg)}
.ui .time li.b .dot{background:var(--c-acc-bg);color:var(--c-acc);box-shadow:0 0 0 3px var(--c-bg)}
.ui .time b{display:block;font-size:13px}.ui .time small{display:block}
.ui .docv{width:430px;flex:none;padding:22px;background:var(--c-sub);display:flex;flex-direction:column;gap:12px}
.ui .paper{padding:22px;border-radius:10px;background:#fff;color:#11151F;box-shadow:0 0 0 1px var(--c-ln),0 18px 36px -20px rgba(17,21,31,.3)}
.ui .pp-h{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid #ECEEF1}
.ui .pp-h b{display:block;font-size:14px}.ui .pp-h small{display:block}
.ui .pp-h .chip{margin-left:auto}
.ui .pp-lines{display:grid;gap:7px;padding:14px 0}
.ui .pp-lines i{height:6px;border-radius:3px;background:#F1F3F5}
.ui .pp-lines i.s{width:62%}
.ui .pp-t{width:100%;border-collapse:collapse;font-size:12.5px}
.ui .pp-t td{padding:7px 0;border-top:1px solid #ECEEF1}
.ui .pp-t td:last-child{text-align:right}
.ui .pp-t tr.tot td{font-weight:600;border-top:1.5px solid #11151F}
.ui .sig{margin-top:18px;padding-top:6px;border-top:1px dashed #DEE1E6}
.ui .script{display:block;font-family:'Fraunces','Fraunces Fallback',Georgia,serif;font-style:italic;font-size:28px;color:#1F3A8A;transform:rotate(-3deg);transform-origin:left;margin-bottom:2px}
.ui .paid{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--c-card);box-shadow:var(--c-card-sh)}
.ui .paid b{display:block;font-size:13px}.ui .paid small{display:block}
.ui .pbar{width:100%;height:5px;border-radius:3px;background:var(--c-hover)}
.ui .pbar span{display:block;height:100%;border-radius:3px;background:var(--c-g)}

/* calendar */
.ui .calv{flex:1;display:flex;flex-direction:column;position:relative}
.ui .crew{display:flex;align-items:center;font-size:12px;color:var(--c-tx2)}
.ui .crew .av{margin-right:-5px;box-shadow:0 0 0 2px var(--c-bg)}
.ui .crew .av:last-of-type{margin-right:8px}
.ui .week{flex:1;display:grid;grid-template-columns:52px repeat(5,1fr)}
.ui .hrs{display:flex;flex-direction:column;padding-top:34px}
.ui .hrs span{height:54px;font-size:10.5px;color:var(--c-tx3);text-align:right;padding-right:8px;transform:translateY(-6px)}
.ui .day-c{border-left:1px solid var(--c-ln)}
.ui .dh{height:34px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--c-tx2);border-bottom:1px solid var(--c-ln)}
.ui .dh b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:11.5px;font-weight:500}
.ui .dh.today{color:var(--c-acc-tx)}
.ui .dh.today b{background:var(--c-acc);color:#fff}
.ui .slots{position:relative;height:594px;background:repeating-linear-gradient(var(--c-bg) 0 53px,var(--c-ln) 53px 54px)}
.ui .ev{position:absolute;left:4px;right:4px;padding:6px 8px 6px 12px;border-radius:7px;font-size:11.5px;overflow:hidden}
.ui .ev:before{content:"";position:absolute;left:4px;top:5px;bottom:5px;width:3px;border-radius:2px;background:currentColor;opacity:.6}
.ui .ev b{display:block;font-size:12px}.ui .ev small{display:block;font-size:11px;color:inherit;opacity:.75}
.ui .ev.c1{background:#EAF0FF;color:#22408F}.ui .ev.c2{background:#E5F5EC;color:#0D5C3E}
.ui .ev.c3{background:#FFF0E3;color:#8A3A10}.ui .ev.c4{background:#F0ECFE;color:#4A33A0}.ui .ev.c5{background:#F1F3F5;color:#4A5162}
.ui .ob{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:10px;font-weight:500;background:rgba(255,255,255,.8);border-radius:4px;padding:1px 5px}
.ui .ob img{width:12px;height:auto}
.ui .now{position:absolute;left:0;right:0;height:2px;background:#EF4D4D;z-index:2}
.ui .now:before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#EF4D4D}
.ui .bk{position:absolute;right:22px;bottom:22px;width:300px;padding:16px;border-radius:14px;background:var(--c-card);box-shadow:var(--c-pop-sh);display:grid;gap:12px;z-index:3}
.ui .bk-h{display:flex;align-items:center;gap:10px}
.ui .bk-h b{display:block;font-size:13.5px}.ui .bk-h small{display:block}
.ui .bk-d,.ui .bk-t{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ui .bk-t{grid-template-columns:repeat(2,1fr)}
.ui .bk-d span,.ui .bk-t span{display:grid;place-items:center;height:32px;border-radius:8px;font-size:12px;box-shadow:0 0 0 1px var(--c-ln2)}
.ui .bk-d span.on,.ui .bk-t span.on{box-shadow:0 0 0 1.5px var(--c-acc);background:var(--c-acc-bg);color:var(--c-acc-tx);font-weight:500}
.ui .bk-n{text-align:center}

/* tables */
.ui .grid{flex:1;display:flex;flex-direction:column;font-size:12.5px}
.ui .gr{display:grid;grid-template-columns:40px 1.45fr 1.1fr .95fr .9fr .9fr .75fr 2fr;align-items:center;min-height:42px;border-bottom:1px solid var(--c-ln)}
.ui .gr>span{padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui .gr>span:first-child{padding:0 0 0 16px;color:var(--c-tx3);font-size:11.5px}
.ui .gr.hd{min-height:34px;background:var(--c-sub);font-size:11.5px;color:var(--c-tx3);font-weight:500}
.ui .gr.pick{background:var(--c-acc-bg)}
.ui .gr .r{text-align:right}
.ui .gr .j{font-weight:500}
.ui .ai{display:flex!important;align-items:center;gap:6px;color:var(--c-acc-tx)!important}
.ui .ai img{width:15px;height:auto}
.ui .ai-c{color:var(--c-tx2)}
.ui .tc{display:flex!important;align-items:center;gap:7px}
.ui .gr.ft{background:var(--c-sub);color:var(--c-tx3);border:0}
.ui .gr.ft .mono{color:var(--c-tx);font-weight:600}
.ui .mini{display:flex!important;gap:2px;height:6px;padding:0!important;margin:0 12px;border-radius:3px;overflow:hidden}
.ui .mini i{display:block}
.ui .mini .b{background:#2F6BFF}.ui .mini .p{background:#6A4ED4}.ui .mini .a{background:#E59A1A}.ui .mini .n{background:#A5AEBD}.ui .mini .g{background:#16855A}

/* playbooks */
.ui .pb-doc{flex:1;min-width:0;padding:26px 48px;overflow:hidden}
.ui .pb-meta{display:flex;align-items:center;gap:10px}
.ui .by{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--c-tx3)}
.ui .by img{width:16px;height:auto}
.ui .pb-doc h3{margin-top:18px;font-size:26px;font-weight:700;letter-spacing:-.02em}
.ui .lead-p{margin-top:6px;font-size:14px;color:var(--c-tx2)}
.ui .pb-doc h4{margin-top:22px;font-size:14px;font-weight:600}
.ui .cl{display:grid;gap:9px;margin-top:10px}
.ui .cl li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--c-tx2)}
.ui .cl i{display:grid;place-items:center;width:17px;height:17px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--c-ln2);flex:none;color:#fff}
.ui .cl li.dn i{background:var(--c-acc);box-shadow:none}
.ui .cl li.dn{color:var(--c-tx3);text-decoration:line-through;text-decoration-color:var(--c-ln2)}
.ui .cl .ic{width:11px;height:11px;stroke-width:2.6}
.ui .sp{display:grid;gap:10px;margin-top:10px;counter-reset:n}
.ui .sp li{display:flex;gap:12px;font-size:13.5px;color:var(--c-tx2);counter-increment:n}
.ui .sp li:before{content:counter(n);display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--c-hover);font-size:11px;font-weight:600;color:var(--c-tx2);flex:none}
.ui mark{background:#FFF0C2;color:#11151F;border-radius:3px;padding:0 2px}
.ui .pb-side{width:330px;flex:none;border-left:1px solid var(--c-ln);padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--c-sub)}
.ui .pb-side blockquote{display:flex;gap:10px;padding:12px;border-radius:12px;background:var(--c-card);box-shadow:var(--c-card-sh)}
.ui .pb-side blockquote p{font-size:12.5px;color:var(--c-tx)}
.ui .pb-side blockquote small{display:block;margin-top:4px}
.ui .sugg{margin-top:auto;padding:14px;border-radius:12px;background:var(--c-card);box-shadow:0 0 0 1px var(--c-acc-ln),0 12px 24px -14px rgba(47,107,255,.5)}
.ui .sg-h{display:flex;align-items:center;gap:7px}
.ui .sg-h img{width:18px;height:auto}
.ui .sg-h b{font-size:12.5px;color:var(--c-acc-tx)}
.ui .sugg p{margin-top:8px;font-size:12.5px;color:var(--c-tx2)}
.ui ins{text-decoration:none;background:var(--c-g-bg);color:var(--c-g);border-radius:3px;padding:0 3px}

/* chat */
.ui .chat{flex:1;display:flex;flex-direction:column;gap:14px;padding:22px 120px 0;background:var(--c-sub)}
.ui .cm{display:flex;gap:10px}
.ui .cm.me{align-self:flex-end;flex-direction:column;align-items:flex-end}
.ui .cm.me p{padding:9px 13px;border-radius:14px;border-bottom-right-radius:5px;background:var(--c-ink-btn);color:var(--c-ink-btn-tx);font-size:13px}
.ui .cm.me small{margin-top:4px}
.ui .cav{width:28px;height:auto;align-self:flex-start}
.ui .cb{flex:1;padding:14px 16px;border-radius:14px;border-top-left-radius:5px;background:var(--c-card);box-shadow:var(--c-card-sh);display:grid;gap:10px;font-size:13px}
.ui .stats{display:grid;grid-template-columns:repeat(4,1fr);border-radius:10px;box-shadow:inset 0 0 0 1px var(--c-ln)}
.ui .stats div{padding:10px 12px}
.ui .stats div+div{border-left:1px solid var(--c-ln)}
.ui .stats b{display:block;font-size:18px;font-weight:600}
.ui .bl{display:grid;gap:4px}
.ui .bl li{position:relative;padding-left:14px;color:var(--c-tx2)}
.ui .bl li:before{content:"";position:absolute;left:2px;top:8px;width:4px;height:4px;border-radius:50%;background:var(--c-tx3)}
.ui .wait{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--c-a-bg)}
.ui .wait p{flex:1;font-size:12.5px;color:var(--c-tx)}
.ui .q{padding:10px 12px;border-radius:10px;background:var(--c-sub);color:var(--c-tx2);box-shadow:inset 0 0 0 1px var(--c-ln)}
.ui .ask-in{margin-top:auto;padding:14px 0 18px}
.ui .sugs{display:flex;gap:6px;margin-bottom:8px}
.ui .sugs span{height:26px;display:flex;align-items:center;padding:0 10px;border-radius:13px;background:var(--c-card);box-shadow:0 0 0 1px var(--c-ln2);font-size:12px;color:var(--c-tx2)}
.ui .ai-box{display:flex;align-items:center;padding:8px 8px 8px 16px;border-radius:14px;background:var(--c-card);box-shadow:0 0 0 1px var(--c-ln2),0 6px 16px -10px rgba(17,21,31,.25);color:var(--c-tx3)}

/* widgets */
.ui.wd{padding:20px;gap:14px;border-radius:14px}
.ui .wd-h{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--c-ln)}
.ui .wd-h b{font-size:15px;font-weight:600}
.ui .rules{display:grid}
.ui .rules li{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--c-ln)}
.ui .rules li:last-child{border:0}
.ui .rules b{display:block;font-size:13.5px}.ui .rules small{display:block}
.ui .sw{margin-left:auto;width:34px;height:20px;border-radius:10px;background:var(--c-ln2);position:relative;flex:none}
.ui .sw i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.ui .sw.on{background:var(--c-g)}
.ui .sw.on i{left:16px}
.ui .sel{margin-left:auto;display:flex;align-items:center;gap:4px;height:28px;padding:0 8px 0 10px;border-radius:8px;box-shadow:var(--c-btn-sh);font-size:12px;font-weight:500;color:var(--c-tx);background:var(--c-btn)}
.ui .sel:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-a);margin-right:2px}
.ui .sel.n:before{background:var(--c-r)}
.ui .sel .ic{width:13px;height:13px;color:var(--c-tx3)}
.ui .kp{display:grid;grid-template-columns:repeat(3,1fr);border-radius:12px;box-shadow:inset 0 0 0 1px var(--c-ln)}
.ui .kp div{padding:12px 14px}
.ui .kp div+div{border-left:1px solid var(--c-ln)}
.ui .kp small{display:block}
.ui .kp b{display:block;font-size:22px;font-weight:600;margin-top:2px}
.ui .up{font-size:11px;font-weight:600;color:var(--c-g)}
.ui .chart{flex:1;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--c-ln);display:flex;flex-direction:column}
.ui .ch-l{display:flex;justify-content:space-between;align-items:center}
.ui .ch-l span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--c-tx2)}
.ui .ch-l i{width:8px;height:8px;border-radius:2px}
.ui i.o{background:var(--c-acc)}.ui i.t{background:#C3CEEA}
.ui .bars{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:14px;align-items:end;padding-top:12px}
.ui .bc{display:flex;flex-direction:column;align-items:center;gap:6px}
.ui .stk{display:flex;flex-direction:column-reverse;width:100%;max-width:30px;gap:2px}
.ui .stk i{display:block;width:100%;border-radius:3px}

/* phones: focused crop of the main pane */
.ui-fit.nar .ui-side,.ui-fit.nar .list,.ui-fit.nar .inbox .side,.ui-fit.nar .calls .side,.ui-fit.nar .why-p,.ui-fit.nar .pb-side,.ui-fit.nar .tl,.ui-fit.nar .bk,.ui-fit.nar .ui-chrome .url,.ui-fit.nar .faces,.ui-fit.nar .ask-otto{display:none}
.ui-fit.nar .docv{width:100%}
.ui-fit.nar .chat{padding:20px 18px 0}
.ui-fit.nar .board{grid-template-columns:repeat(5,200px)}
.ui-fit.nar .gr{grid-template-columns:0 1.5fr 1fr 1fr 0 0 .8fr 0}
.ui-fit.nar .draft,.ui-fit.nar .why-s .draft{width:94%}
.ui-fit.nar .m{max-width:90%}
.ui-fit.nar .toasts{right:12px;bottom:66px;width:260px}
.ui-fit.nar #hx-t1,.ui-fit.nar #hx-t3{display:none}
.ui-fit.nar .th-act{display:none}
.ui-fit.nar .tb-r .tb-ic{display:none}

/* shared helpers */
.ui .dim{color:var(--c-tx3)}
.ui .r.mono{text-align:right}
.ui .neg{color:var(--c-r)}
.ui .ag{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none;font-size:12.5px;font-weight:600;color:#fff}
.ui .ag .ic{width:15px;height:15px}
.ui .ag.otto{background:none;border-radius:50%}
.ui .ag.otto img,.ui .ag.otto.sm img{width:100%;height:100%}
.ui .a-rec{background:#5470E8}.ui .a-col{background:#16855A}.ui .a-rev{background:#D9962B}.ui .a-rea{background:#9A63D6}.ui .a-plan{background:#D45B8B}

/* payments */
.ui .pay{display:flex;flex:1;min-height:0}
.ui .pay-main{flex:1;min-width:0;display:flex;flex-direction:column}
.ui .kp4{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--c-ln)}
.ui .kp4 div{padding:14px 18px}
.ui .kp4 div+div{border-left:1px solid var(--c-ln)}
.ui .kp4 small{display:block}
.ui .kp4 b{display:block;margin:3px 0 1px;font-size:21px;font-weight:600}
.ui .kp4 b span{font-size:12px;color:var(--c-tx3);font-weight:400}
.ui .kp4 .dim,.ui .kp4 .up{font-size:11.5px}
.ui .inv{display:flex;flex-direction:column;font-size:12.5px}
.ui .iv{display:grid;grid-template-columns:.62fr 1.4fr 1.3fr .85fr .62fr 1.45fr;align-items:center;min-height:44px;border-bottom:1px solid var(--c-ln)}
.ui .iv>span{padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui .iv>span:first-child{padding-left:18px}
.ui .iv.hd{min-height:34px;background:var(--c-sub);font-size:11.5px;color:var(--c-tx3);font-weight:500}
.ui .iv.pick{background:var(--c-acc-bg)}
.ui .iv .r{text-align:right}
.ui .st.r{background:var(--c-r-bg);color:var(--c-r)}
.ui .pay-side{width:300px;gap:12px;background:var(--c-sub)}
.ui .charge{display:grid;gap:9px;padding:14px;border-radius:12px;background:var(--c-card);box-shadow:var(--c-card-sh)}
.ui .charge h5{margin:0 0 2px}
.ui .fld{display:grid;gap:3px;padding:8px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--c-ln2);font-size:12.5px}
.ui .fld small{font-size:10.5px}
.ui .agent-mini{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:var(--c-card);box-shadow:var(--c-card-sh)}
.ui .agent-mini b{display:block;font-size:12.5px}.ui .agent-mini small{display:block}
.ui .agent-mini>.mono,.ui .agent-mini>.chip{margin-left:auto}

/* build: flow builder (bare window) */
.ui .bld{display:flex;flex:1;min-height:0}
.ui .bld-chat{width:330px;flex:none;display:flex;flex-direction:column;gap:14px;padding:18px;border-right:1px solid var(--c-ln);background:var(--c-sub)}
.ui .bc-me{align-self:flex-end;max-width:94%}
.ui .bc-me p{padding:10px 13px;border-radius:14px;border-bottom-right-radius:5px;background:var(--c-ink-btn);color:var(--c-ink-btn-tx);font-size:13px;min-height:40px}
.ui .bc-otto{display:flex;gap:10px}
.ui .bc-otto>img{width:26px;height:auto;align-self:flex-start}
.ui .bc-body{flex:1;padding:12px 14px;border-radius:14px;border-top-left-radius:5px;background:var(--c-card);box-shadow:var(--c-card-sh)}
.ui .bc-body>b{font-size:12.5px;color:var(--c-acc-tx)}
.ui .bc-sum{margin-top:6px;font-size:12.5px;color:var(--c-tx2);min-height:18px}
.ui .bsteps{display:grid;gap:8px;margin-top:10px}
.ui .bsteps li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--c-tx2);opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s,color .3s}
.ui .bsteps li.in{opacity:1;transform:none}
.ui .bsteps li i{position:relative;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px var(--c-ln2)}
.ui .bsteps li.run{color:var(--c-tx)}
.ui .bsteps li.run i{box-shadow:none;background:conic-gradient(var(--c-acc) 0 30%,var(--c-ln2) 30% 100%);-webkit-mask:radial-gradient(circle,transparent 5.5px,#000 6px);mask:radial-gradient(circle,transparent 5.5px,#000 6px);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ui .bsteps li.ok i{background:var(--c-g);box-shadow:none}
.ui .bsteps li.ok i:after{content:"";width:7px;height:4px;border:solid #fff;border-width:0 0 1.6px 1.6px;transform:translateY(-1px) rotate(-45deg)}
.ui .bc-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:var(--c-card);box-shadow:var(--c-card-sh)}
.ui .bc-note{flex:1;font-size:11.5px;color:var(--c-tx3)}
.ui #b-go{opacity:.45;transition:opacity .3s,background .3s,transform .2s}
.ui #b-go.ready{opacity:1}
.ui .bld-canvas{flex:1;min-width:0;display:flex;flex-direction:column}
.ui .cv-top{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;border-bottom:1px solid var(--c-ln);flex:none}
.ui .cv-top>b{font-size:14px}
.ui .cv-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.ui .zoom{display:flex;align-items:center;gap:10px;height:28px;padding:0 10px;border-radius:8px;box-shadow:0 0 0 1px var(--c-ln2);font-size:11.5px;color:var(--c-tx2)}
.ui .zoom i{font-style:normal;color:var(--c-tx3)}
.ui .cv-body{flex:1;min-height:0;display:flex}
.ui .flow{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:22px 16px;background:var(--c-sub) radial-gradient(circle,var(--c-ln2) 1px,transparent 1.3px) 0 0/16px 16px;overflow:hidden}
.ui .fw{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:22px;opacity:0;transition:opacity .4s}
.ui .fw:first-child{padding-top:0}
.ui .fw.in{opacity:1}
.ui .fw:not(:first-child):before{content:"";position:absolute;top:0;left:50%;width:2px;height:22px;margin-left:-1px;background:var(--c-ln2);transform-origin:top;transform:scaleY(0);transition:transform .35s}
.ui .fw.in:before{transform:none}
.ui .fw.lit:before{background:var(--c-acc)}
.ui .fn{position:relative;display:flex;align-items:center;gap:10px;width:330px;padding:10px 12px;border-radius:12px;background:var(--c-card);box-shadow:var(--c-card-sh);transform:translateY(6px) scale(.98);transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.ui .fw.in .fn{transform:none}
.ui .fn .fi{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none;color:var(--tc,var(--c-acc));background:color-mix(in srgb,var(--tc,var(--c-acc)) 12%,transparent)}
.ui .fn .fi .ic{width:15px;height:15px}
.ui .fn>div{flex:1;min-width:0}
.ui .fn em{display:block;font-style:normal;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--c-tx3)}
.ui .fn b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui .fn small{display:block;font-size:11.5px;color:var(--c-tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui .fn .fc{flex:none;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--c-acc-bg);color:var(--c-acc-tx);opacity:0;transform:scale(.8);transition:opacity .35s,transform .35s cubic-bezier(.16,1,.3,1)}
.ui .fn.live .fc{opacity:1;transform:none}
.ui .fn.pulse{box-shadow:0 0 0 2px var(--c-acc),0 10px 24px -12px rgba(47,107,255,.6)}
.ui .fn.k-trigger{box-shadow:0 0 0 1px rgba(22,133,90,.35),0 1px 2px rgba(17,21,31,.04)}
.ui .fn.k-trigger em{color:var(--c-g)}
.ui .fn.k-agent{background:linear-gradient(150deg,#13285A,#0B1735);color:#fff;box-shadow:0 0 0 1px rgba(120,160,255,.35),0 12px 26px -14px rgba(20,50,140,.7)}
.ui .fn.k-agent small{color:#B6C4E2}.ui .fn.k-agent em{color:#8FB0FF}
.ui .fn.k-agent .fi{color:#9CC0FF;background:rgba(120,160,255,.16)}
.ui .fn.k-agent .fc{background:rgba(120,160,255,.2);color:#CFE0FF}
.ui .fn.k-approve{background:var(--c-a-bg);box-shadow:inset 0 0 0 1.5px rgba(165,96,10,.4)}
.ui .fn.k-approve em{color:var(--c-a)}
.ui .fn.k-approve .fc{background:rgba(165,96,10,.14);color:var(--c-a)}
.ui .fbr{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:22px}
.ui .fbr:before{content:"";position:absolute;top:10px;left:25%;right:25%;height:12px;border:2px solid var(--c-ln2);border-bottom:0;border-radius:10px 10px 0 0}
.ui .fbr .fn{width:272px}
.ui .fbr .tag{position:absolute;top:-1px;font-size:10px;font-weight:600;color:var(--c-tx3);background:var(--c-sub);padding:0 4px}
.ui .fw.lit .fbr:before{border-color:var(--c-acc)}
.ui .rail{width:262px;flex:none;border-left:1px solid var(--c-ln);display:flex;flex-direction:column;background:var(--c-bg)}
.ui .rail-h{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 14px;border-bottom:1px solid var(--c-ln);font-size:12.5px}
.ui .pieces{display:grid;gap:2px;padding:8px}
.ui .pieces li{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;opacity:0;transform:translateX(8px);transition:opacity .4s,transform .4s cubic-bezier(.16,1,.3,1),background .6s}
.ui .pieces li.in{opacity:1;transform:none}
.ui .pieces li.new{background:var(--c-acc-bg)}
.ui .pieces .pi{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;flex:none;color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,transparent)}
.ui .pieces .pi .ic{width:14px;height:14px}
.ui .pieces b{display:block;font-size:12.5px}.ui .pieces small{display:block;font-size:11px}
.ui .rail .feed{display:none;gap:2px;padding:8px}
.ui .rail.live .pieces{display:none}
.ui .rail.live .feed{display:grid}
.ui .feed li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:9px 8px;border-radius:9px;opacity:0;transform:translateY(6px);transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1),background .6s}
.ui .feed li.in{opacity:1;transform:none}
.ui .feed li.new{background:var(--c-acc-bg)}
.ui .feed .fi{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--c-hover);color:var(--c-tx2)}
.ui .feed .fi.g{background:var(--c-g-bg);color:var(--c-g)}.ui .feed .fi.b{background:var(--c-acc-bg);color:var(--c-acc)}.ui .feed .fi.a{background:var(--c-a-bg);color:var(--c-a)}
.ui .feed .fi .ic{width:14px;height:14px}
.ui .feed b{display:block;font-size:12.5px}.ui .feed small{display:block;font-size:11px;color:var(--c-tx3)}
.ui .feed time{display:block;font-size:10.5px;color:var(--c-tx3);margin-top:2px}

/* tables: equipment */
.ui .tools{margin-left:auto;display:flex;gap:6px}
.ui .tool{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;font-size:12px;color:var(--c-tx2);box-shadow:0 0 0 1px var(--c-ln2);background:var(--c-btn);white-space:nowrap}
.ui .tool .ic{width:13px;height:13px;color:var(--c-tx3)}
.ui .tool i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--c-acc-tx);background:var(--c-acc-bg);border-radius:5px;padding:0 5px}
.ui .tbl-top .btn-p{margin-left:0}
.ui .xt{flex:1;display:flex;flex-direction:column;font-size:12.5px;position:relative}
.ui .xr{display:grid;grid-template-columns:36px 1.45fr 1.3fr .6fr 1fr .72fr .86fr 1.92fr;align-items:center;min-height:40px;border-bottom:1px solid var(--c-ln)}
.ui .xr>span{padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ui .xr>span:first-child{padding-left:14px;font-size:11px}
.ui .xh{min-height:34px;background:var(--c-sub);font-size:11.5px;color:var(--c-tx3);font-weight:500}
.ui .xh>span{display:flex;align-items:center;gap:6px}
.ui .xh .ic{width:12px;height:12px}
.ui .ft{display:inline-grid;place-items:center;min-width:16px;height:16px;border-radius:4px;background:var(--c-hover);font:600 9.5px ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;color:var(--c-tx2)}
.ui .aih{color:var(--c-acc-tx)!important;background:var(--c-acc-bg);align-self:stretch;transition:opacity .5s}
.ui .xt.arm:not(.col) .aih{opacity:0}
.ui .aih img{width:15px;height:auto}
.ui .aib{font-style:normal;font-size:9.5px;font-weight:700;color:#fff;background:var(--c-acc);border-radius:4px;padding:0 4px}
.ui .xg{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;background:var(--c-bg);border-bottom:1px solid var(--c-ln);font-size:12px}
.ui .xg .ic{width:13px;height:13px;color:var(--c-tx3)}
.ui .unit{display:flex!important;align-items:center;gap:9px;font-weight:500}
.ui .thumb{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;flex:none;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.ui .thumb .ic{width:12px;height:12px}
.ui .lk{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px 0 3px;border-radius:999px;background:var(--c-acc-bg);color:var(--c-acc-tx);font-size:12px;max-width:100%;overflow:hidden}
.ui .ro{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--c-ln2);font-size:11.5px;color:var(--c-tx2)}
.ui .xr .due{color:var(--c-r);font-weight:600}
.ui .aic{position:relative}
.ui .aic .chip{transition:opacity .35s,transform .35s}
.ui .xt.arm .aic .chip{opacity:0;transform:translateX(-4px)}
.ui .xt.arm .aic.on .chip{opacity:1;transform:none}
.ui .aic:before{content:"";position:absolute;left:10px;right:24px;top:50%;height:8px;margin-top:-4px;border-radius:4px;background:linear-gradient(90deg,var(--c-hover),var(--c-acc-bg),var(--c-hover));background-size:200% 100%;opacity:0;transition:opacity .3s}
.ui .xt.arm.col .aic:not(.on):before{opacity:1;animation:shim 1.2s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.ui .xt.col .xr:not(.xh):not(.xf)>span:last-child{background:color-mix(in srgb,var(--c-acc-bg) 45%,transparent);align-self:stretch;display:flex;align-items:center}
.ui .xf{background:var(--c-sub);color:var(--c-tx3);border:0;font-size:11.5px}
.ui .ai-bar{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-bottom:1px solid var(--c-ln);background:linear-gradient(90deg,var(--c-acc-bg),var(--c-bg) 70%);flex:none}
.ui .ai-bar img{width:18px;height:auto}
.ui .ab-l{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--c-acc-tx)}
.ui .ab-q{font-size:13px;font-weight:500;color:var(--c-tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui .ab-st{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12px;color:var(--c-tx2);white-space:nowrap;flex:none}
.ui .ab-st i{width:7px;height:7px;border-radius:50%;background:var(--c-g);box-shadow:0 0 0 3px var(--c-g-bg)}
.ui .ab-st.run i{background:var(--c-acc);box-shadow:0 0 0 3px var(--c-acc-bg);animation:blinkc 1s steps(1) infinite}

/* dashboard */
.ui .db-top{display:flex;align-items:center;gap:8px;height:50px;padding:0 16px;border-bottom:1px solid var(--c-ln);flex:none}
.ui .from{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--c-tx3)}
.ui .from .lk{padding:0 8px;font-size:11px}
.ui .db{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto minmax(0,1.2fr) minmax(0,1fr);gap:12px;padding:14px;background:var(--c-sub);min-height:0}
.ui .kpis4{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ui .kc,.ui .dc{padding:14px 16px;border-radius:12px;background:var(--c-card);box-shadow:var(--c-card-sh);min-width:0}
.ui .dc{display:flex;flex-direction:column;min-height:0}
.ui .kc{position:relative}
.ui .kc small{display:block}
.ui .kc b{display:block;font-size:21px;font-weight:600;margin-top:3px}
.ui .spk{position:absolute;right:14px;bottom:14px;display:flex;align-items:flex-end;gap:2px;height:26px}
.ui .spk i{width:4px;height:var(--h);border-radius:1px;background:var(--c-acc);opacity:.35}
.ui .spk i:last-child{opacity:1}
.ui .dc.big{grid-column:span 2}
.ui .dch{display:flex;align-items:center;justify-content:space-between;height:20px;margin-bottom:12px;font-size:12.5px;flex:none}
.ui .dch img{width:18px;height:auto}
.ui .lgd{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--c-tx2)}
.ui .lgd i{width:8px;height:8px;border-radius:2px}
.ui .lgd i.t{background:none;border-top:2px dashed var(--c-tx3);height:0;border-radius:0}
.ui .wbars{flex:1;min-height:0;display:grid;grid-template-columns:repeat(8,1fr);gap:14px;align-items:end;padding:0 4px}
.ui .wb{display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.ui .wb .val{position:relative;z-index:1;font-size:10.5px;color:var(--c-tx3);background:var(--c-card);padding:0 4px;border-radius:4px}
.ui .wb .col{position:relative;width:100%;max-width:38px;height:var(--h,auto);display:flex;align-items:flex-end}
.ui .wb .bar{display:block;width:100%;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#4C82FF,#2F6BFF);transform-origin:bottom}
.ui .wb:last-child .bar{background:linear-gradient(180deg,#6AD2FF,#2F6BFF)}
.ui .wb .tg{position:absolute;left:-5px;right:-5px;height:0;border-top:1.5px dashed var(--c-tx3);opacity:.55}
.ui .wb small{font-size:10.5px}
.ui .hbars{flex:1;display:grid;align-content:space-evenly;gap:8px}
.ui .hbars li{display:grid;grid-template-columns:96px 1fr 48px;align-items:center;gap:8px;font-size:12px}
.ui .hb{height:10px;border-radius:5px;background:var(--c-hover);overflow:hidden}
.ui .hb i{display:block;height:100%;width:var(--w);border-radius:5px;background:var(--c);transform-origin:left}
.ui .hbars .mono{text-align:right;font-size:11.5px}
.ui .note{display:flex;align-items:center;gap:7px;margin-top:10px;flex:none;padding:8px 10px;border-radius:9px;background:var(--c-acc-bg);font-size:11.5px;color:var(--c-acc-tx)}
.ui .note img{width:16px;height:auto}
.ui .techs{flex:1;display:grid;align-content:space-between}
.ui .techs li{display:grid;grid-template-columns:20px 48px 1fr 26px 52px;align-items:center;gap:10px;font-size:12.5px}
.ui .techs li.th{font-size:10.5px;color:var(--c-tx3);font-weight:500}
.ui .techs li.th span:nth-child(n+4){text-align:right}
.ui .techs .mono{text-align:right;font-size:12px}
.ui .donut-w{flex:1;display:flex;align-items:center;gap:16px}
.ui .donut{width:112px;height:112px;flex:none;transform:rotate(-90deg)}
.ui .donut text{transform:rotate(90deg);transform-origin:21px 21px;font:600 4.6px Aeonik,system-ui,sans-serif;fill:var(--c-tx)}
.ui .leg{display:grid;gap:7px;flex:1;font-size:12px}
.ui .leg li{display:flex;align-items:center;gap:7px}
.ui .leg i{width:8px;height:8px;border-radius:2px}
.ui .leg .mono{margin-left:auto;font-size:11.5px;color:var(--c-tx2)}
.ui .otto-dc{background:linear-gradient(150deg,#13285A,#0B1735);color:#fff;box-shadow:0 0 0 1px rgba(120,160,255,.3)}
.ui .ostats{flex:1;display:grid;align-content:space-between}
.ui .ostats li{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:8px;border-bottom:1px solid rgba(160,185,235,.14);font-size:12px;color:#B6C4E2}
.ui .ostats li:last-child{border:0;padding-bottom:0}
.ui .ostats b{font-size:16px;color:#fff;font-weight:600}
.ui-fit.seen .wb .bar{animation:growY .9s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d)}
.ui-fit.seen .hb i{animation:growX .9s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes growY{from{transform:scaleY(0)}}
@keyframes growX{from{transform:scaleX(0)}}

/* agent profile */
.ui .agp{display:flex;flex:1;min-height:0}
.ui .ag-list{width:236px;flex:none;border-right:1px solid var(--c-ln);display:flex;flex-direction:column;padding:10px 8px;background:var(--c-bg)}
.ui .agl-h{display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 6px;margin-bottom:6px;font-size:13px}
.ui .agl-h .cmp{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;box-shadow:var(--c-btn-sh);color:var(--c-tx2)}
.ui .agl-h .cmp .ic{width:14px;height:14px}
.ui .ag-list ul{display:grid;gap:2px}
.ui .ag-list li{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:9px}
.ui .ag-list li.on{background:var(--c-sel)}
.ui .ag-list li>div{flex:1;min-width:0}
.ui .ag-list b{display:block;font-size:13px}.ui .ag-list small{display:block;font-size:11px}
.ui .sd{width:7px;height:7px;border-radius:50%;background:var(--c-tx3);flex:none}
.ui .sd.g{background:var(--c-g);box-shadow:0 0 0 3px var(--c-g-bg)}
.ui .new-ag{margin-top:auto;display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border-radius:10px;box-shadow:0 0 0 1px var(--c-acc-ln);font-size:12px;color:var(--c-tx3)}
.ui .new-ag img{width:16px;height:auto}
.ui .ag-main{flex:1;min-width:0;display:flex;flex-direction:column}
.ui .ag-head{display:flex;align-items:center;gap:12px;padding:16px 20px 12px}
.ui .ag-head b{display:block;font-size:16px;font-weight:600}
.ui .ag.lg{width:42px;height:42px;border-radius:12px;font-size:17px}
.ui .ag-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.ui .chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.ui .ag-grid{flex:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:14px;padding:16px 20px;background:var(--c-sub);min-height:0}
.ui .ag-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.ui .ag-col>.blk:last-child{flex:1}
.ui .blk{padding:13px 14px;border-radius:12px;background:var(--c-card);box-shadow:var(--c-card-sh)}
.ui .blk h6{margin:0 0 8px}
.ui .blk.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ui .instr{font-size:13px;line-height:1.55;color:var(--c-tx)}
.ui .instr mark{background:var(--c-acc-bg);color:var(--c-acc-tx);padding:0 3px;border-radius:4px}
.ui .toolset{display:flex;flex-wrap:wrap;gap:6px}
.ui .toolset span{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--c-ln2);font-size:12px;color:var(--c-tx2)}
.ui .toolset .ic{width:13px;height:13px;color:var(--c-acc)}
.ui .ml{display:grid;gap:7px}
.ui .ml li{display:flex;align-items:center;gap:8px;font-size:12.5px}
.ui .ml .ic{width:13px;height:13px;color:var(--c-acc)}
.ui .ml.amb .ic{color:var(--c-a)}
.ui .am{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ui .am div{padding:10px;border-radius:10px;background:var(--c-sub);box-shadow:inset 0 0 0 1px var(--c-ln)}
.ui .am b{display:block;font-size:19px;font-weight:600}
.ui .rw{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.ui .rw li{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px}
.ui .rw li.wt{background:var(--c-a-bg)}
.ui .rw li>div{flex:1;min-width:0}
.ui .rw b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui .rw small{display:block;font-size:11px}
.ui .rw .fi{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;flex:none;background:var(--c-hover);color:var(--c-tx2)}
.ui .rw .fi.g{background:var(--c-g-bg);color:var(--c-g)}.ui .rw .fi.b{background:var(--c-acc-bg);color:var(--c-acc)}.ui .rw .fi.a{background:rgba(165,96,10,.14);color:var(--c-a)}
.ui .rw .fi .ic{width:14px;height:14px}

/* activity log widget */
.ui .flt{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--c-hover)}
.ui .flt span{display:flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;font-size:11.5px;color:var(--c-tx2)}
.ui .flt span.on{background:var(--c-bg);color:var(--c-tx);font-weight:500;box-shadow:0 1px 2px rgba(17,21,31,.08)}
.ui .tabs-s i{font-style:normal}
.ui .rw .btn-p{flex:none}
.ui .alog{display:grid}
.ui .alog li{display:flex;gap:11px;align-items:flex-start;padding:10px 2px;border-bottom:1px solid var(--c-ln)}
.ui .alog li:last-child{border:0}
.ui .alog p{font-size:13px;color:var(--c-tx2)}
.ui .alog p b{color:var(--c-tx)}
.ui .alog small{display:block;margin-top:2px}
.ui .ag.sm{width:24px;height:24px;border-radius:7px;font-size:10.5px}
.ui .ag.sm img{width:17px}

/* phones */
.ui-fit.nar .bld-chat,.ui-fit.nar .rail,.ui-fit.nar .zoom,.ui-fit.nar .ag-list,.ui-fit.nar .pay-side,.ui-fit.nar .tools,.ui-fit.nar .from{display:none}
.ui-fit.nar .fw{width:100%}.ui-fit.nar .fn{width:min(320px,100%)}.ui-fit.nar .fbr{gap:10px;width:100%}.ui-fit.nar .fbl{min-width:0}.ui-fit.nar .fbr .fn{width:100%}.ui-fit.nar .fbr .tag{font-size:9.5px}
.ui-fit.nar .kp4{grid-template-columns:1fr 1fr}
.ui-fit.nar .iv{grid-template-columns:1.4fr .9fr 1.3fr}
.ui-fit.nar .iv>span:nth-child(1),.ui-fit.nar .iv>span:nth-child(3),.ui-fit.nar .iv>span:nth-child(5){display:none}
.ui-fit.nar .xr{grid-template-columns:1.3fr .5fr 1.6fr}
.ui-fit.nar .xr>span:nth-child(1),.ui-fit.nar .xr>span:nth-child(3),.ui-fit.nar .xr>span:nth-child(5),.ui-fit.nar .xr>span:nth-child(6),.ui-fit.nar .xr>span:nth-child(7){display:none}
.ui-fit.nar .ab-st{display:none}
.ui-fit.nar .xr>span:nth-child(2){padding-left:14px}
.ui-fit.nar .db{grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr)}
.ui-fit.nar .kpis4{grid-template-columns:1fr 1fr}
.ui-fit.nar .dc.big{grid-column:1/-1}
.ui-fit.nar .dc.dpl,.ui-fit.nar .dc.dtk,.ui-fit.nar .dc.ddn,.ui-fit.nar .otto-dc{display:none}
.ui-fit.nar .ag-grid{grid-template-columns:1fr}
.ui-fit.nar .b-tools,.ui-fit.nar .b-runs{display:none}
.ui-fit.nar .ag-col>.blk:last-child{flex:none}
.ui-fit.nar .am{grid-template-columns:repeat(4,1fr)}
.ui-fit.nar .rw li:nth-child(n+4){display:none}

/* tablets: drop the sidebar, keep the full layout */
.ui-fit.mid .ui-side,.ui-fit.mid .bld-chat{display:none}

/* src/components/hv/Otto.astro <style> */
.otto-live{position:relative;display:block;width:var(--w);flex:none}
  .otto-live img{display:block;width:100%;height:auto}
  .otto-live svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
  .otto-live path{fill:none;stroke-linecap:round}
  .o-glow{opacity:.85}
  .o-lid{transform-box:fill-box;transform-origin:50% 60%;animation:o-blink 6.4s var(--bd) infinite}
  @keyframes o-blink{0%,92%,100%{transform:scaleY(1)}94.5%{transform:scaleY(.08)}}
  .o-look{transition:opacity .18s;animation:o-look 14s ease-in-out var(--bd) infinite}
  @keyframes o-look{0%,30%,86%,100%{transform:translate(0,0)}36%,50%{transform:translate(calc(var(--gx) * -1px),0)}57%,78%{transform:translate(calc(var(--gx) * 1px),calc(var(--gx) * -.4px))}}
  .otto-live.float{animation:o-float 6s ease-in-out infinite}
  @keyframes o-float{50%{transform:translateY(-9px)}}
  .o-bars{opacity:0;transition:opacity .18s}
  .o-bars rect{transform-box:fill-box;transform-origin:center;animation:o-bar .6s ease-in-out infinite alternate}
  @keyframes o-bar{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
  .speaking .o-look{opacity:0}
  .speaking .o-bars{opacity:1}
  @media (prefers-reduced-motion:reduce){.o-lid,.o-look,.otto-live.float,.o-bars rect{animation:none}}