/* Data Tools: shared styles (uses the site's colour tokens, so light and dark mode follow automatically) */
.tl-hero{background:#000;color:#f5f5f7;text-align:center;padding:84px 0 150px;position:relative;overflow:hidden}
.tl-hero::before{content:"";position:absolute;width:900px;height:900px;left:50%;top:-520px;transform:translateX(-50%);background:radial-gradient(circle,rgba(61,123,255,.28),rgba(138,108,255,.1) 45%,transparent 70%);pointer-events:none}
.tl-hero .kick{position:relative;display:inline-flex;align-items:center;gap:8px;background:#1d1d1f;color:#d2d2d7;border-radius:980px;padding:6px 14px;font-size:14px;font-weight:600}
.tl-hero .kick svg{width:15px;height:15px}
.tl-hero h1{position:relative;font-size:clamp(2.8rem,7vw,5.2rem);line-height:1.02;letter-spacing:-.045em;font-weight:700;margin-top:20px;background:var(--grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em;animation:shimmer 9s ease-in-out infinite}
.tl-hero .sub{position:relative;color:#a1a1a6;font-size:clamp(1.1rem,2vw,1.4rem);max-width:34em;margin:18px auto 0;line-height:1.42;font-weight:500}
.tl-chips{position:relative;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.tl-chips span{display:inline-flex;align-items:center;gap:7px;border:1px solid #3a3a3c;border-radius:980px;padding:7px 15px;font-size:14px;font-weight:600;color:#d2d2d7}
.tl-chips svg{width:14px;height:14px;color:#34c77b}
.tl-app{background:var(--grey);padding:0 0 100px}
.tl-app>.wrap{position:relative;margin-top:-104px}

/* Drop zone */
.tl-drop{background:var(--surface);border-radius:30px;padding:54px 30px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.14);border:2px dashed transparent;cursor:pointer;transition:border-color .25s,transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;outline:none}
.tl-drop:hover,.tl-drop:focus-visible{transform:translateY(-3px);box-shadow:0 36px 90px rgba(0,0,0,.18)}
.tl-drop.over{border-color:var(--blue);transform:scale(1.01)}
.tl-drop .ic{width:66px;height:66px;margin:0 auto;border-radius:20px;background:var(--grad);display:grid;place-items:center;box-shadow:0 14px 30px rgba(61,123,255,.35);animation:tl-float 4s ease-in-out infinite}
.tl-drop .ic svg{width:30px;height:30px}
.tl-drop h2{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.03em;margin-top:22px;font-weight:700}
.tl-drop p{color:var(--muted);margin-top:8px}
.tl-drop .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.tl-drop input{display:none}
.tl-note{display:flex;gap:10px;align-items:center;justify-content:center;color:var(--muted);font-size:14px;margin-top:22px}
.tl-note svg{width:16px;height:16px;color:#34c77b;flex:none}
@keyframes tl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Buttons and controls */
.tl-btn{font:inherit;font-size:15px;font-weight:600;border:0;border-radius:980px;padding:10px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s,transform .15s,box-shadow .2s;white-space:nowrap;text-decoration:none}
.tl-btn:active{transform:scale(.97)}
.tl-btn.primary{background:var(--blue);color:#fff}.tl-btn.primary:hover{background:var(--blue-hover,#1f47d6);text-decoration:none}
.tl-btn.soft{background:var(--line2);color:var(--ink)}.tl-btn.soft:hover{background:var(--line);text-decoration:none}
.tl-btn.ghost{background:transparent;color:var(--blue)}
.tl-btn svg{width:16px;height:16px}
.tl-btn[disabled]{opacity:.45;pointer-events:none}
.tl-in,.tl-sel{font:inherit;font-size:15px;color:var(--ink);background:var(--grey);border:1px solid transparent;border-radius:12px;padding:9px 12px;outline:none;min-width:0;transition:border-color .2s,background .2s}
.tl-in:focus,.tl-sel:focus{border-color:var(--blue);background:var(--surface)}
.tl-sel{appearance:none;-webkit-appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2386868b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.tl-x{background:none;border:0;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:8px}
.tl-x:hover{color:#e0453a;background:var(--line2)}
.tl-seg{display:inline-flex;background:var(--line2);border-radius:980px;padding:4px;gap:2px}
.tl-seg button{font:inherit;font-size:15px;font-weight:600;border:0;background:transparent;color:var(--muted);padding:9px 20px;border-radius:980px;cursor:pointer;transition:all .25s}
.tl-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.tl-chip{font:inherit;font-size:13.5px;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:980px;padding:7px 13px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;transition:all .2s}
.tl-chip:hover{border-color:var(--ink)}
.tl-chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tl-chip .ty{font-size:11px;opacity:.65;font-family:ui-monospace,Menlo,monospace}

/* Switch */
.tl-sw{position:relative;width:46px;height:28px;flex:none}
.tl-sw input{opacity:0;width:0;height:0;position:absolute}
.tl-sw span{position:absolute;inset:0;background:var(--line);border-radius:28px;transition:background .25s;cursor:pointer}
.tl-sw span::after{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.tl-sw input:checked+span{background:#34c77b}
.tl-sw input:checked+span::after{transform:translateX(18px)}
.tl-sw input:focus-visible+span{box-shadow:0 0 0 3px rgba(61,123,255,.4)}

/* Workspace */
.tl-ws{display:none}
.tl-ws.on{display:block;animation:tl-rise .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes tl-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.tl-card{background:var(--surface);border-radius:26px;padding:28px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.tl-card+.tl-card{margin-top:18px}
.tl-card h3{font-size:1.25rem;letter-spacing:-.02em;font-weight:700}
.tl-card .hint{color:var(--muted);font-size:14.5px;margin-top:4px}
.tl-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tl-files{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.tl-file{display:flex;align-items:center;gap:10px;background:var(--grey);border-radius:16px;padding:10px 12px 10px 14px;animation:tl-pop .5s cubic-bezier(.3,1.5,.5,1) both}
.tl-file b{font-size:14.5px}.tl-file small{color:var(--muted);font-size:13px;display:block}
.tl-file .tb{font:600 12px ui-monospace,Menlo,monospace;background:var(--surface);border-radius:8px;padding:3px 8px;color:var(--blue)}
@keyframes tl-pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.tl-steps{display:grid;gap:12px;margin-top:18px}
.tl-step{background:var(--grey);border-radius:20px;overflow:hidden;transition:box-shadow .25s}
.tl-step>summary{list-style:none;display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;font-weight:600}
.tl-step>summary::-webkit-details-marker{display:none}
.tl-step>summary .n{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.tl-step>summary .t{flex:1}
.tl-step>summary .t small{display:block;color:var(--muted);font-weight:500;font-size:13.5px;margin-top:1px}
.tl-step>summary .on{font-size:12px;font-weight:700;color:#0f7a45;background:#e3f6ec;border-radius:980px;padding:3px 9px;display:none}
.tl-step.used>summary .on{display:inline-block}
.tl-step>summary::after{content:"+";color:var(--muted);font-size:1.4rem;transition:transform .25s}
.tl-step[open]>summary::after{transform:rotate(45deg)}
.tl-step .body{padding:0 18px 18px;display:grid;gap:10px;animation:tl-rise .35s ease both}
.tl-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tl-row>.tl-in,.tl-row>.tl-sel{flex:1 1 140px}
.tl-colgrid{display:flex;flex-wrap:wrap;gap:8px}
.tl-code{position:relative;background:#1d1d1f;color:#e5e5ea;border-radius:20px;padding:18px 20px;font:13.5px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace;white-space:pre;overflow:auto;max-height:340px}
.tl-code textarea{width:100%;min-height:180px;background:transparent;border:0;color:#e5e5ea;font:inherit;resize:vertical;outline:none}
.tl-code .hljs{background:transparent;padding:0}
.tl-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.tl-kpi{background:var(--grey);border-radius:18px;padding:16px 18px}
.tl-kpi b{display:block;font-size:1.7rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tl-kpi span{font-size:13.5px;color:var(--muted);font-weight:600}
.tl-kpi.g b{color:#16a34a}.tl-kpi.r b{color:#e0453a}.tl-kpi.y b{color:#d97706}.tl-kpi.b b{color:var(--blue)}
.tl-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.tl-err{background:#ffeceb;color:#a3261d;border-radius:14px;padding:12px 16px;font-weight:500;margin-top:12px}
.tl-ok{color:var(--muted);font-size:14px;font-weight:600}
.tl-ok b{color:var(--ink)}
.tl-run{position:relative;overflow:hidden}
.tl-run.busy::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:tl-sweep 1s linear infinite}
@keyframes tl-sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* Tables */
.dt-tablewrap{overflow:auto;max-height:520px;border-radius:16px;border:1px solid var(--line);margin-top:14px;background:var(--surface)}
.dt-table{border-collapse:separate;border-spacing:0;width:100%;font:13.5px/1.4 -apple-system,BlinkMacSystemFont,"InterVariable","Inter","Segoe UI",sans-serif;font-variant-numeric:tabular-nums}
.dt-table th{position:sticky;top:0;z-index:1;background:var(--grey);text-align:left;font-weight:600;color:var(--ink2);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.dt-table td{padding:9px 14px;border-bottom:1px solid var(--line2);white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis}
.dt-table tbody tr:hover td{background:rgba(61,123,255,.05)}
.dt-table tbody tr{animation:tl-rowin .4s ease both}
.dt-table tbody tr:nth-child(-n+12){animation-delay:calc(var(--i,0) * 1ms)}
@keyframes tl-rowin{from{opacity:0}to{opacity:1}}
.dt-null{color:var(--muted);font-style:italic;font-size:12px;opacity:.7}
.dt-more{color:var(--muted);font-size:13.5px;margin-top:10px}
.dt-rl{font-weight:700;font-size:12px}
td.chg{background:rgba(245,183,11,.18)!important;box-shadow:inset 0 0 0 1px rgba(217,119,6,.25)}
tr.add td{background:rgba(52,199,123,.12)}
tr.del td{background:rgba(224,69,58,.10);text-decoration:line-through;text-decoration-color:rgba(224,69,58,.5)}
tr.chg td.dt-rl{color:#d97706}tr.add td.dt-rl{color:#16a34a}tr.del td.dt-rl{color:#e0453a}

/* Info sections on every tool page */
.tl-why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tl-why div{background:var(--surface);border-radius:24px;padding:28px}
.sec:not(.grey) .tl-why div{background:var(--grey)}
.tl-why .ic2{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px}
.tl-why .ic2 svg{width:24px;height:24px}
.tl-why h3{font-size:1.15rem;letter-spacing:-.02em}
.tl-why p{color:var(--muted);margin-top:6px;font-size:15.5px}
.tl-ex{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center}
.tl-ex .side{background:var(--surface);border-radius:24px;padding:22px;overflow:auto}
.sec:not(.grey) .tl-ex .side{background:var(--grey)}
.tl-ex .side h4{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:10px;text-transform:none}
.tl-ex .arrow{width:52px;height:52px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;box-shadow:0 10px 24px rgba(61,123,255,.35)}
.tl-ex .arrow svg{width:22px;height:22px}
.tl-ex table{border-collapse:collapse;font:13px/1.4 ui-monospace,Menlo,monospace;width:100%}
.tl-ex td,.tl-ex th{padding:6px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tl-ex th{color:var(--muted);font-weight:600}
.tl-ex .ask{font-size:14.5px;color:var(--ink2);margin-top:12px;background:var(--line2);border-radius:12px;padding:10px 12px}
.tl-safe{background:#000;color:#f5f5f7;border-radius:32px;padding:56px;display:grid;grid-template-columns:1fr 1.3fr;gap:50px;align-items:center}
.tl-safe .lock{width:120px;height:120px;border-radius:34px;background:linear-gradient(135deg,#0f2e1e,#103a2a);display:grid;place-items:center;margin-bottom:24px;box-shadow:0 0 0 1px rgba(52,199,123,.25),0 30px 60px rgba(52,199,123,.15)}
.tl-safe .lock svg{width:56px;height:56px;color:#34c77b}
.tl-safe h2{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.04em;line-height:1.05}
.tl-safe p.l{color:#a1a1a6;margin-top:12px;font-size:1.1rem}
.tl-safe ul{list-style:none;display:grid;gap:14px}
.tl-safe li{display:flex;gap:14px;background:#161617;border-radius:18px;padding:16px 18px;border:1px solid #232325}
.tl-safe li svg{width:22px;height:22px;color:#34c77b;flex:none;margin-top:2px}
.tl-safe li b{display:block}
.tl-safe li span{color:#a1a1a6;font-size:14.5px}
.tl-family{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tl-family a{background:var(--surface);border-radius:22px;padding:24px;color:var(--ink);display:flex;gap:16px;align-items:center;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.sec:not(.grey) .tl-family a{background:var(--grey)}
.tl-family a:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.08);text-decoration:none}
.tl-family a[aria-current]{outline:2px solid var(--blue)}
.tl-family .fi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none}
.tl-family .fi svg{width:22px;height:22px}
.tl-family b{display:block;font-size:1.05rem}.tl-family small{color:var(--muted);font-size:14px}

.dt-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(16px);opacity:0;background:rgba(28,28,30,.96);color:#fff;padding:12px 20px;border-radius:980px;font-weight:600;z-index:95;transition:all .3s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.dt-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-color-scheme:dark){
  .tl-drop{box-shadow:0 30px 80px rgba(0,0,0,.5)}
  .tl-step>summary .on{background:#0f2e1e;color:#5fd99a}
  .tl-err{background:#3a1512;color:#ffb4ab}
  .tl-sw span::after{background:#f5f5f7}
}
@media (max-width:900px){
  .tl-why,.tl-family{grid-template-columns:1fr}
  .tl-ex{grid-template-columns:1fr}.tl-ex .arrow{transform:rotate(90deg);margin:0 auto}
  .tl-safe{grid-template-columns:1fr;padding:32px 24px;gap:30px}
  .tl-kpis{grid-template-columns:1fr 1fr}
  .tl-card{padding:20px}
  .tl-hero{padding:64px 0 130px}
}
@media (prefers-reduced-motion:reduce){
  .tl-drop .ic,.tl-hero h1,.tl-ws.on,.tl-file,.tl-step .body,.dt-table tbody tr{animation:none}
  .tl-run.busy::after{display:none}
}

/* ===== v2 visual layer: hero previews, richer drop zone, capability tiles, app windows ===== */
.tl-hero{padding:84px 0 0}
.tl-hero .sub{margin-bottom:0}
.tl-app>.wrap{margin-top:0;padding-top:64px}
.hv{position:relative;max-width:1020px;margin:56px auto 0;border-radius:22px 22px 0 0;background:#1c1c1e;border:1px solid #2c2c2e;border-bottom:0;box-shadow:0 -10px 80px rgba(61,123,255,.18);overflow:hidden;text-align:left}
.hv-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #2c2c2e;font:600 12.5px -apple-system,BlinkMacSystemFont,"InterVariable",sans-serif;color:#86868b}
.hv-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.hv-bar i:nth-child(2){background:#febc2e}.hv-bar i:nth-child(3){background:#28c840}
.hv-bar span{margin-left:10px}
.hv-body{display:grid;grid-template-columns:1.05fr auto 1fr auto 1.15fr;gap:14px;align-items:center;padding:24px 22px 30px}
.hv-col h5{font:700 11.5px -apple-system,BlinkMacSystemFont,"InterVariable",sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#86868b;margin-bottom:10px}
.hv-grid{display:grid;gap:4px;font:12px/1 ui-monospace,"SF Mono",Menlo,monospace;color:#d2d2d7}
.hv-grid div{display:grid;grid-template-columns:repeat(var(--c,4),1fr);gap:4px}
.hv-grid span{background:#2a2a2d;border-radius:6px;padding:7px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-grid .h span{background:transparent;color:#86868b;padding:4px 8px}
.hv-pipe{width:34px;height:2px;background:repeating-linear-gradient(90deg,#3a3a3c 0 5px,transparent 5px 10px);position:relative}
.hv-pipe::after{content:"";position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:#3d7bff;box-shadow:0 0 12px #3d7bff;animation:hv-pk 1.6s linear infinite}
@keyframes hv-pk{from{left:-4px;opacity:0}20%{opacity:1}80%{opacity:1}to{left:30px;opacity:0}}
.hv-pick{display:grid;gap:8px}
.hv-pick span{display:flex;align-items:center;gap:8px;background:#2a2a2d;border-radius:12px;padding:10px 12px;font:600 13px -apple-system,BlinkMacSystemFont,"InterVariable",sans-serif;color:#f5f5f7;opacity:.35;animation:hv-pick 9s ease infinite}
.hv-pick span b{width:18px;height:18px;border-radius:50%;background:#3a3a3c;display:grid;place-items:center;font-size:11px;color:#fff;transition:background .3s}
.hv-pick span:nth-child(2){animation-delay:.7s}.hv-pick span:nth-child(3){animation-delay:1.4s}
@keyframes hv-pick{0%,6%{opacity:.35;transform:none;box-shadow:none}12%,88%{opacity:1;transform:translateX(4px);box-shadow:inset 0 0 0 1.5px #3d7bff}100%{opacity:.35}}
.hv-pick span b::after{content:"✓";opacity:0;animation:hv-tick 9s ease infinite;animation-delay:inherit}
@keyframes hv-tick{0%,8%{opacity:0}14%,88%{opacity:1}100%{opacity:0}}
.hv-code{font:12px/1.65 ui-monospace,"SF Mono",Menlo,monospace;color:#e5e5ea;background:#141416;border-radius:12px;padding:10px 12px;margin-bottom:10px}
.hv-code div{white-space:nowrap;overflow:hidden;width:0;animation:hv-type 9s steps(30) infinite}
.hv-code div:nth-child(2){animation-delay:.5s}.hv-code div:nth-child(3){animation-delay:1s}
.hv-code b{color:#ff7ab2;font-weight:600}
@keyframes hv-type{0%,22%{width:0}34%,90%{width:100%}100%{width:0}}
.hv-res span{animation:hv-cell 9s ease infinite;opacity:0}
.hv-res div:nth-child(2) span{animation-delay:.15s}.hv-res div:nth-child(3) span{animation-delay:.3s}.hv-res div:nth-child(4) span{animation-delay:.45s}
.hv-res .hi{background:linear-gradient(135deg,rgba(61,123,255,.35),rgba(24,183,160,.35))!important;color:#fff}
@keyframes hv-cell{0%,40%{opacity:0;transform:scale(.85)}48%,90%{opacity:1;transform:none}100%{opacity:0}}
/* Clean & Compare hero */
.hv-clean{grid-template-columns:1.5fr auto 1fr}
.cx{position:relative;display:block;height:28px}
.cx>em,.cx>s{position:absolute;inset:0;display:flex;align-items:center;padding:0 8px;border-radius:6px;font-style:normal;text-decoration:none;white-space:nowrap;overflow:hidden}
.cx>em{background:rgba(255,95,87,.16);color:#ffb4ab;animation:cx-bad 8s ease infinite}
.cx>s{background:rgba(52,199,123,.18);color:#a8f0c6;opacity:0;animation:cx-good 8s ease infinite}
.hv-grid .cxr span{padding:0;background:transparent}
.c1>*{animation-delay:.2s!important}.c2>*{animation-delay:.9s!important}.c3>*{animation-delay:1.6s!important}
@keyframes cx-bad{0%,12%{opacity:1;transform:none}20%,92%{opacity:0;transform:translateY(-6px)}100%{opacity:1}}
@keyframes cx-good{0%,14%{opacity:0;transform:translateY(6px)}22%,90%{opacity:1;transform:none}100%{opacity:0}}
.dup{animation:dup 8s ease infinite}
@keyframes dup{0%,30%{opacity:1;max-height:40px}38%{opacity:.25;filter:grayscale(1)}46%,92%{opacity:0;max-height:0;margin-top:-4px}100%{opacity:1;max-height:40px}}
.hv-stats{display:grid;gap:8px}
.hv-stat{display:flex;align-items:center;gap:10px;background:#2a2a2d;border-radius:12px;padding:10px 12px;font:600 13px -apple-system,BlinkMacSystemFont,"InterVariable",sans-serif;color:#f5f5f7;opacity:0;animation:hv-st 8s ease infinite}
.hv-stat:nth-child(2){animation-delay:.4s}.hv-stat:nth-child(3){animation-delay:.8s}.hv-stat:nth-child(4){animation-delay:1.2s}
.hv-stat i{font-style:normal;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:800}
.hv-stat .g{background:rgba(52,199,123,.2);color:#5fd99a}.hv-stat .r{background:rgba(255,95,87,.2);color:#ff8a80}.hv-stat .y{background:rgba(245,183,11,.2);color:#ffd166}.hv-stat .b{background:rgba(61,123,255,.25);color:#9db8ff}
@keyframes hv-st{0%,40%{opacity:0;transform:translateX(10px)}50%,92%{opacity:1;transform:none}100%{opacity:0}}

/* Drop zone, v2 */
.tl-drop{position:relative;overflow:hidden;padding:60px 30px 46px}
.tl-drop::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:linear-gradient(120deg,#8a6cff,#3d7bff,#18b7a0,#8a6cff);background-size:300% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.0;transition:opacity .4s;animation:tri-flow 6s linear infinite;pointer-events:none}
.tl-drop:hover::before,.tl-drop.over::before{opacity:1}
.tl-drop .fl{position:absolute;font:800 11px ui-monospace,Menlo,monospace;letter-spacing:.04em;padding:8px 10px;border-radius:10px;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.15);animation:tl-float 5s ease-in-out infinite}
.tl-drop .fl.a{left:9%;top:26%;background:#1f6f43;transform:rotate(-8deg)}.tl-drop .fl.b{right:10%;top:20%;background:#2b5cff;animation-delay:1.2s}.tl-drop .fl.c{left:15%;bottom:18%;background:#7c3aed;animation-delay:.6s}.tl-drop .fl.d{right:14%;bottom:24%;background:#d97706;animation-delay:1.8s}
.tl-howto{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px;position:relative}
.tl-howto>div{display:flex;gap:14px;align-items:center;background:var(--surface);border-radius:20px;padding:18px 20px}
.tl-howto b{display:block;font-size:15.5px}.tl-howto small{color:var(--muted);font-size:13.5px}
.tl-howto .k{width:38px;height:38px;border-radius:12px;background:var(--grad);color:#fff;font-weight:800;display:grid;place-items:center;flex:none}
/* Capability tiles */
.tl-intro{margin-top:56px}
.tl-intro>h2{text-align:center;font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.04em;font-weight:700}
.tl-intro>p{text-align:center;color:var(--muted);font-size:1.15rem;margin:10px auto 0;max-width:34em}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.cap{background:var(--surface);border-radius:26px;padding:22px 22px 26px;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.cap:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.09)}
.cap .art{height:128px;border-radius:18px;background:#161617;position:relative;overflow:hidden;display:grid;place-items:center;margin-bottom:18px;font:12.5px/1.2 ui-monospace,"SF Mono",Menlo,monospace;color:#e5e5ea}
.cap h3{font-size:1.15rem;letter-spacing:-.02em}
.cap p{color:var(--muted);font-size:15px;margin-top:6px}
.ba{display:grid;gap:10px;justify-items:center}
.ba .from{color:#ff8a80;background:rgba(255,95,87,.14);padding:7px 12px;border-radius:9px;white-space:pre;animation:ba-from 5s ease infinite}
.ba .to{color:#7ee2a8;background:rgba(52,199,123,.16);padding:7px 12px;border-radius:9px;animation:ba-to 5s ease infinite}
.ba .ar{color:#86868b;font-family:-apple-system,sans-serif;animation:ba-ar 5s ease infinite}
@keyframes ba-from{0%,20%{opacity:1;transform:none}40%,90%{opacity:.35;transform:scale(.94)}100%{opacity:1}}
@keyframes ba-to{0%,25%{opacity:0;transform:translateY(8px)}40%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ba-ar{0%,20%{opacity:.2}35%,90%{opacity:1}100%{opacity:.2}}
.mrows{display:grid;gap:6px;width:72%}
.mrows i{height:14px;border-radius:5px;background:#2c2c30;display:block}
.mrows.filter i:nth-child(2n){animation:mr-out 5s ease infinite}
@keyframes mr-out{0%,25%{opacity:1;height:14px}45%,85%{opacity:0;height:0;margin-top:-6px}100%{opacity:1;height:14px}}
.mrows.dupe i:nth-child(3){background:#ff5f57;animation:mr-dup 5s ease infinite}
@keyframes mr-dup{0%,25%{opacity:1;height:14px}35%{opacity:.4}50%,85%{opacity:0;height:0;margin-top:-6px}100%{opacity:1;height:14px}}
.mchips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:86%}
.mchips span{border:1px solid #3a3a3c;border-radius:980px;padding:6px 10px;font:600 12px -apple-system,BlinkMacSystemFont,"InterVariable",sans-serif;color:#a1a1a6;animation:mc 6s ease infinite}
.mchips span:nth-child(1){animation-delay:0s}.mchips span:nth-child(3){animation-delay:1s}.mchips span:nth-child(4){animation-delay:2s}
.mchips span:nth-child(2),.mchips span:nth-child(5){animation:none;opacity:.5}
@keyframes mc{0%,10%{background:transparent;color:#a1a1a6;border-color:#3a3a3c}20%,85%{background:#f5f5f7;color:#1d1d1f;border-color:#f5f5f7}100%{background:transparent}}
.mbars{display:flex;align-items:flex-end;gap:10px;height:84px}
.mbars i{width:24px;border-radius:6px 6px 3px 3px;background:linear-gradient(#18b7a0,#3d7bff);transform-origin:bottom;animation:cv-bar 5s cubic-bezier(.2,.8,.2,1) infinite}
.mbars i:nth-child(1){height:40%}.mbars i:nth-child(2){height:80%;animation-delay:.15s}.mbars i:nth-child(3){height:55%;animation-delay:.3s}.mbars i:nth-child(4){height:95%;animation-delay:.45s}
.mpiv{display:grid;grid-template-columns:repeat(3,26px);gap:6px}
.mpiv i{width:26px;height:20px;border-radius:5px;background:#2c2c30;display:block}
.mpiv i:nth-child(3n+1){background:#3a3a3c}
.mpiv.rot{animation:mp-rot 6s cubic-bezier(.5,0,.2,1) infinite}
.mpiv.rot i:nth-child(n+4){background:linear-gradient(135deg,#3d7bff,#8a6cff)}
@keyframes mp-rot{0%,25%{transform:rotate(0)}45%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
.mpiv.unr{grid-template-columns:repeat(2,26px);animation:mp-unr 6s cubic-bezier(.5,0,.2,1) infinite}
.mpiv.unr i:nth-child(2n){background:linear-gradient(135deg,#18b7a0,#3d7bff)}
@keyframes mp-unr{0%,25%{transform:rotate(-90deg)}45%,85%{transform:rotate(0)}100%{transform:rotate(-90deg)}}
.mjoin{display:flex;gap:6px;align-items:center}
.mjoin .t{display:grid;gap:5px}
.mjoin .t i{width:46px;height:14px;border-radius:5px;background:#2c2c30;display:block}
.mjoin .t.l i:first-child,.mjoin .t.r i:first-child{background:#3d7bff}
.mjoin .t.l{animation:mj-l 5s ease infinite}.mjoin .t.r{animation:mj-r 5s ease infinite}
.mjoin .t.r i:first-child{background:#18b7a0}
@keyframes mj-l{0%,25%{transform:translateX(-14px)}45%,85%{transform:translateX(3px)}100%{transform:translateX(-14px)}}
@keyframes mj-r{0%,25%{transform:translateX(14px)}45%,85%{transform:translateX(-3px)}100%{transform:translateX(14px)}}
.mdiff{display:grid;gap:6px;width:76%}
.mdiff i{display:flex;align-items:center;gap:8px;height:20px;border-radius:6px;background:#2c2c30;font:800 11px -apple-system,sans-serif;font-style:normal;padding-left:8px;color:transparent;animation:md 6s ease infinite}
.mdiff i:nth-child(2){animation-name:md-g;animation-delay:.3s}.mdiff i:nth-child(3){animation-name:md-r;animation-delay:.6s}.mdiff i:nth-child(4){animation-name:md-y;animation-delay:.9s}
@keyframes md-g{0%,20%{background:#2c2c30;color:transparent}35%,85%{background:rgba(52,199,123,.28);color:#7ee2a8}100%{background:#2c2c30}}
@keyframes md-r{0%,20%{background:#2c2c30;color:transparent}35%,85%{background:rgba(255,95,87,.25);color:#ff8a80}100%{background:#2c2c30}}
@keyframes md-y{0%,20%{background:#2c2c30;color:transparent}35%,85%{background:rgba(245,183,11,.25);color:#ffd166}100%{background:#2c2c30}}
@keyframes md{0%,100%{opacity:1}}
.tl-ws.on~.tl-intro,.tl-ws.on~.tl-howto{display:none}
/* Example as app windows */
.tl-ex .side{padding:0;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.08)}
.tl-ex .side h4{display:flex;align-items:center;gap:7px;margin:0;padding:12px 14px;background:var(--line2);font-size:12.5px}
.tl-ex .side h4::before{content:"";width:10px;height:10px;border-radius:50%;background:#ff5f57;box-shadow:16px 0 0 #febc2e,32px 0 0 #28c840;margin-right:38px}
.tl-ex .side table{margin:0}
.tl-ex th{background:var(--grey)}
.tl-ex td,.tl-ex th{padding:9px 14px}
.tl-ex tr:nth-child(even) td{background:rgba(127,127,127,.04)}
.tl-ex .side:last-child td{animation:ex-in .6s ease both}
.tl-ex .ask{margin:12px 14px 16px}
.tl-ex .arrow{animation:ex-pulse 2.4s ease-in-out infinite}
@keyframes ex-pulse{0%,100%{box-shadow:0 10px 24px rgba(61,123,255,.35)}50%{box-shadow:0 10px 34px rgba(61,123,255,.6),0 0 0 8px rgba(61,123,255,.12)}}
@keyframes ex-in{from{opacity:0}}
.tl-why div{position:relative;overflow:hidden;padding:30px}
.tl-why div::after{content:"";position:absolute;right:-40px;bottom:-60px;width:160px;height:160px;border-radius:50%;background:var(--grad);opacity:.07}
.tl-why .ic2{width:54px;height:54px;border-radius:16px;box-shadow:0 12px 26px rgba(0,0,0,.12)}
/* Workspace windows */
.tl-card.win{padding:0;overflow:hidden}
.tl-card.win>.wbar{display:flex;align-items:center;gap:7px;padding:12px 18px;border-bottom:1px solid var(--line2);font-size:13px;font-weight:600;color:var(--muted)}
.tl-card.win>.wbar::before{content:"";width:10px;height:10px;border-radius:50%;background:#ff5f57;box-shadow:16px 0 0 #febc2e,32px 0 0 #28c840;margin-right:40px}
.tl-card.win>.wbody{padding:22px 24px 24px}
@media (prefers-color-scheme:dark){.cap,.tl-howto>div{background:var(--surface)}.tl-drop .fl{box-shadow:none}}
@media (max-width:900px){
  .hv-body{grid-template-columns:1fr;padding:18px}.hv-pipe{display:none}
  .hv-clean{grid-template-columns:1fr}
  .hv{margin-top:40px;border-radius:18px 18px 0 0}
  .caps,.tl-howto{grid-template-columns:1fr}
  .tl-drop .fl{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hv *,.cap *,.tl-drop .fl,.tl-drop::before,.tl-ex .arrow{animation:none!important}
  .hv-code div{width:100%}.hv-res span,.hv-stat,.cx>s{opacity:1}.cx>em{opacity:0}.hv-pick span{opacity:1}
}

.dup .cx>em{animation:none;background:rgba(255,95,87,.28);color:#ffb4ab}
.hv-grid .cxr{gap:4px}
.dup{overflow:hidden}
.dup .cx{height:28px}
.hv-clean{align-items:start}.hv-clean .hv-col:first-child{min-height:178px}.hv-clean .hv-pipe{margin-top:90px}