:root{
  --bg:#F2F3FA; --bg2:#E4E6F6; --glass:rgba(255,255,255,.62); --glass-b:rgba(24,28,70,.10); --glass-hi:rgba(255,255,255,.9);
  --ink:#12152E; --muted:#5B6185; --field:rgba(24,28,70,.045);
  --c1:#00A9B8; --c2:#6B4DFF; --c3:#E5468A; --on-grad:#0A0D1F; --shadow:0 30px 80px -30px rgba(40,30,120,.28);
  --good:#0E9F6E; --warn:#D17A00; --bad:#D63B4F;
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#060917; --bg2:#0C1130; --glass:rgba(255,255,255,.045); --glass-b:rgba(255,255,255,.10); --glass-hi:rgba(255,255,255,.16);
    --ink:#EEF1FF; --muted:#98A1C8; --field:rgba(255,255,255,.06);
    --c1:#5CE1E6; --c2:#9B7BFF; --c3:#FF7EB6; --shadow:0 40px 100px -40px rgba(0,0,0,.8);
    --good:#43D69A; --warn:#FFB547; --bad:#FF6B81; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#060917; --bg2:#0C1130; --glass:rgba(255,255,255,.045); --glass-b:rgba(255,255,255,.10); --glass-hi:rgba(255,255,255,.16);
  --ink:#EEF1FF; --muted:#98A1C8; --field:rgba(255,255,255,.06);
  --c1:#5CE1E6; --c2:#9B7BFF; --c3:#FF7EB6; --shadow:0 40px 100px -40px rgba(0,0,0,.8);
  --good:#43D69A; --warn:#FFB547; --bad:#FF6B81; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 90px); background:var(--bg)}
body{margin:0; color:var(--ink); background:var(--bg); font-family:Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size:16px; line-height:1.6; overflow-x:hidden}
body::after{content:""; position:fixed; inset:-20vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40vmax 30vmax at 85% 10%, color-mix(in srgb,var(--c2) 26%,transparent), transparent 70%),
    radial-gradient(35vmax 28vmax at 5% 35%, color-mix(in srgb,var(--c1) 18%,transparent), transparent 70%),
    radial-gradient(30vmax 25vmax at 60% 95%, color-mix(in srgb,var(--c3) 14%,transparent), transparent 70%);
  filter:blur(10px)}
h1,h2{font-family:Unbounded, Manrope, system-ui, sans-serif; line-height:1.08; margin:0; letter-spacing:-.025em}
a{color:inherit}
:focus-visible{outline:2px solid var(--c2); outline-offset:3px; border-radius:8px}
button,input,select,textarea{font:inherit; color:inherit}

.top{max-width:1280px; margin:0 auto; padding:22px 24px 0; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.mark{width:34px; height:34px; border-radius:11px; background:conic-gradient(from 200deg, var(--c1), var(--c2), var(--c3), var(--c1)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 8px 24px -8px var(--c2)}
.brand b{font-family:Unbounded,sans-serif; font-weight:700; font-size:1.35rem; letter-spacing:-.03em}
.brand span{color:var(--muted); font-size:.9rem; display:none}
@media (min-width:900px){.brand span{display:inline; padding-left:12px; border-left:1px solid var(--glass-b)}}
.lang{display:flex; padding:4px; gap:2px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-b); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px)}
.lang button{border:0; background:none; padding:6px 14px; border-radius:999px; cursor:pointer; font-weight:700; font-size:.85rem; color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}

/* HERO */
.hero{max-width:1280px; margin:0 auto; padding:10px 24px 0; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center; min-height:460px}
.hero h1{font-size:clamp(2.1rem,5.2vw,4.3rem); font-weight:800; max-width:13ch}
.hero p{color:var(--muted); font-size:clamp(1rem,1.4vw,1.15rem); max-width:44ch; margin:22px 0 0}
.hero-copy > *{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.hero-copy > p{animation-delay:.12s}
@keyframes rise{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
.scene{position:relative; height:460px; margin-right:-24px}
.scene canvas{position:absolute; inset:0; width:100%!important; height:100%!important; display:block}
.scene.fallback::before{content:""; position:absolute; left:50%; top:50%; width:min(62%,320px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff 0 4%, transparent 30%), conic-gradient(from 90deg, var(--c1), var(--c2), var(--c3), var(--c1)); filter:blur(.5px); box-shadow:0 40px 120px -20px var(--c2)}

/* DOCK */
.dock{position:sticky; top:0; z-index:20; padding:calc(10px + env(safe-area-inset-top,0px)) 24px 10px; margin-top:-8px}
.dock::before{content:""; position:absolute; inset:0; background:linear-gradient(var(--bg) 40%, transparent); opacity:.85; pointer-events:none}
.tools{position:relative; max-width:1280px; margin:0 auto; display:flex; gap:6px; padding:6px; overflow-x:auto; scrollbar-width:none;
  background:var(--glass); border:1px solid var(--glass-b); border-radius:20px; backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4); box-shadow:var(--shadow)}
.tools::-webkit-scrollbar{display:none}
.tag{flex:1 0 auto; display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 12px; border-radius:14px; text-decoration:none; white-space:nowrap; font-weight:600; font-size:.88rem; color:var(--muted); transition:background .2s, color .2s}
.tag svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none}
.tag:hover{color:var(--ink); background:var(--field)}
.tag[aria-current="page"]{color:var(--on-grad); background:linear-gradient(120deg,var(--c1),var(--c2)); box-shadow:0 10px 30px -10px var(--c2), inset 0 1px 0 rgba(255,255,255,.45)}

.ad{display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted); font-size:.78rem; letter-spacing:.02em;
  border:1px dashed var(--glass-b); border-radius:16px; background:var(--glass)}
.ad-top{max-width:1232px; margin:14px auto 0; min-height:90px; width:calc(100% - 48px)}

.shell{max-width:1280px; margin:0 auto; padding:24px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start}
.panel{position:relative; overflow:hidden; background:var(--glass); border:1px solid var(--glass-b); border-radius:28px; padding:clamp(22px,3.5vw,44px);
  backdrop-filter:blur(26px) saturate(1.3); -webkit-backdrop-filter:blur(26px) saturate(1.3); box-shadow:var(--shadow), inset 0 1px 0 var(--glass-hi)}
.panel::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:var(--spot,0); transition:opacity .4s;
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--c2) 14%,transparent), transparent 60%)}
.panel > *{position:relative}
.panel h1{font-size:clamp(1.6rem,3.2vw,2.5rem); font-weight:700}
.lead{color:var(--muted); margin:10px 0 28px; max-width:60ch}
.about{margin-top:34px; padding-top:24px; border-top:1px solid var(--glass-b); color:var(--muted); max-width:66ch}
.about h2{font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:8px}
.ad-mid{min-height:110px; margin-top:24px}
.side{position:sticky; top:96px}
.ad-side{min-height:600px}

.field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.field label{font-weight:700; font-size:.88rem}
.row{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end}
.row > .field{flex:1 1 150px}
input[type=text],input[type=date],input[type=number],select,textarea{width:100%; padding:13px 15px; border:1px solid var(--glass-b); border-radius:14px; background:var(--field); font-size:1rem; transition:border-color .2s, box-shadow .2s}
select option{background:var(--bg); color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--c2); box-shadow:0 0 0 4px color-mix(in srgb,var(--c2) 22%,transparent)}
textarea{min-height:180px; resize:vertical}
.inline{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:18px 0; border-bottom:1px solid var(--glass-b); font-weight:600}
.inline input{width:120px}
.inline .res{margin-left:auto; font-family:Unbounded,sans-serif; font-weight:700; font-size:1.45rem; letter-spacing:-.02em}
.btn{border:1px solid var(--glass-b); background:var(--field); border-radius:12px; padding:10px 16px; cursor:pointer; font-weight:700; font-size:.9rem; transition:transform .15s, background .2s}
.btn:hover{background:var(--glass-hi)}
.btn:active{transform:scale(.97)}
.btn.primary{border-color:transparent; color:var(--on-grad); background:linear-gradient(120deg,var(--c1),var(--c2)); box-shadow:0 12px 30px -12px var(--c2)}
.btn[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.btns{display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 18px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:10px}
.stat{border:1px solid var(--glass-b); border-radius:20px; padding:18px; background:var(--field); transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.stat:hover{transform:translateY(-3px)}
.stat b{display:block; font-family:Unbounded,sans-serif; font-size:1.75rem; font-weight:700; letter-spacing:-.03em; line-height:1.15; word-break:break-word}
.stat span{color:var(--muted); font-size:.86rem; font-weight:600}
.stat.hl{border-color:transparent; color:var(--on-grad); background:linear-gradient(135deg,var(--c1),var(--c2) 60%,var(--c3)); box-shadow:0 20px 50px -20px var(--c2)}
.stat.hl span{color:var(--on-grad); opacity:.75}
.pw{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:1.3rem; word-break:break-all; padding:20px; border-radius:18px; background:var(--field); border:1px solid var(--glass-b); margin-bottom:14px}
.meter{height:6px; border-radius:3px; background:var(--field); overflow:hidden; margin:8px 0 18px}
.meter i{display:block; height:100%; border-radius:3px; transition:width .3s}
.check{display:flex; align-items:center; gap:10px; margin:8px 0; cursor:pointer; font-weight:600}
.check input{width:18px; height:18px; accent-color:var(--c2)}
input[type=range]{width:100%; accent-color:var(--c2)}
.note{color:var(--muted); font-size:.9rem}
.prose p{max-width:66ch; color:var(--muted)}
.prose h1{margin-bottom:18px}
.toast{z-index:60; position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,10px); background:var(--ink); color:var(--bg); padding:11px 20px; border-radius:999px; font-weight:700; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s}
.toast.on{opacity:1; transform:translate(-50%,0)}
footer{max-width:1280px; margin:0 auto; padding:28px 24px 48px; color:var(--muted); font-size:.88rem; display:flex; gap:22px; flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

@media (max-width:1080px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .ad-side{min-height:250px}
}
@media (max-width:760px){
  .top{padding:16px 16px 0}
  .hero{grid-template-columns:1fr; min-height:0; padding:0 16px; text-align:left}
  .scene{order:-1; height:270px; margin:0 -16px}
  .hero p{margin-top:14px}
  .dock{padding-left:12px; padding-right:12px; margin-top:12px}
  .tag{flex:0 0 auto}
  .ad-top{width:calc(100% - 24px); min-height:60px}
  .shell{padding:14px 12px}
  .panel{border-radius:22px}
  .inline .res{margin-left:0; width:100%}
}
/* ---- v3 additions ---- */
.bar{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:color-mix(in srgb,var(--bg) 72%,transparent); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid var(--glass-b)}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:31; background:color-mix(in srgb,var(--bg) 72%,transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)}
.bar .top{padding:12px 24px}
.right{display:flex; align-items:center; gap:14px}
.right > a{text-decoration:none; font-weight:700; font-size:.9rem; color:var(--muted)}
.right > a:hover{color:var(--ink)}
.search{max-width:1280px; margin:6px auto 0; padding:0 24px}
.search label{display:flex; align-items:center; gap:12px; background:var(--glass); border:1px solid var(--glass-b); border-radius:22px; padding:4px 10px 4px 20px; backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); box-shadow:var(--shadow); transition:border-color .2s, box-shadow .2s}
.search label:focus-within{border-color:var(--c2); box-shadow:var(--shadow), 0 0 0 4px color-mix(in srgb,var(--c2) 20%,transparent)}
.search svg{width:22px; height:22px; flex:none; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round}
.search input[type=search]{flex:1; border:0; background:none; padding:16px 0; font-size:1.08rem; outline:none; box-shadow:none; min-width:0}
.cats{max-width:1280px; margin:0 auto; padding:0 24px 24px}
.cat{margin-top:44px}
.cat h2{font-size:1.15rem; font-weight:700; margin-bottom:16px; display:flex; align-items:baseline; gap:10px}
.cat h2 small{color:var(--muted); font-family:Manrope,sans-serif; font-weight:600; font-size:.85rem; letter-spacing:0}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px}
.card{display:flex; gap:14px; align-items:flex-start; padding:18px; border-radius:20px; background:var(--glass); border:1px solid var(--glass-b); text-decoration:none; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s}
.card:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--c2) 55%,transparent); box-shadow:0 22px 44px -26px var(--c2)}
.card b{display:block; font-weight:700; margin-bottom:2px; line-height:1.3}
.card span span{color:var(--muted); font-size:.88rem; line-height:1.45; display:block}
.ic{flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:var(--ink); background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 26%,transparent),color-mix(in srgb,var(--c2) 26%,transparent)); border:1px solid var(--glass-b)}
.ic svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.empty{color:var(--muted); padding:30px 0}
.ad-home{max-width:1232px; margin:28px auto 0; min-height:90px; width:calc(100% - 48px)}
#toolview .ad-top{margin-top:18px}
.back{display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; color:var(--muted); text-decoration:none; font-weight:700; font-size:.9rem}
.back:hover{color:var(--ink)}
.ptitle{display:flex; align-items:center; gap:16px}
.ptitle .ic{width:54px; height:54px; border-radius:17px}
.ptitle .ic svg{width:27px; height:27px}
.related{margin-top:32px}
.related h2{font-size:1.05rem; margin-bottom:14px}
.drop{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:36px 20px; border:1.5px dashed color-mix(in srgb,var(--c2) 50%,var(--glass-b)); border-radius:22px; background:var(--field); cursor:pointer; transition:background .2s, border-color .2s; margin-bottom:18px}
.drop:hover,.drop.over{background:color-mix(in srgb,var(--c2) 10%,transparent); border-color:var(--c2)}
.drop svg{width:32px; height:32px; fill:none; stroke:var(--c2); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.drop span{color:var(--muted); font-size:.88rem}
.flist{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:8px}
.flist li{display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--glass-b); border-radius:14px; background:var(--field)}
.flist .fn{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.flist small{color:var(--muted); white-space:nowrap}
.mini{border:1px solid var(--glass-b); background:none; border-radius:9px; width:34px; height:34px; cursor:pointer; display:grid; place-items:center; font-weight:700; flex:none}
.mini:hover{background:var(--glass-hi)}
.preview{max-width:100%; max-height:360px; border-radius:16px; border:1px solid var(--glass-b); display:block; margin:0 0 16px; background:repeating-conic-gradient(var(--field) 0 25%, transparent 0 50%) 0 0/20px 20px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
.msg{padding:12px 14px; border-radius:12px; background:var(--field); border:1px solid var(--glass-b); color:var(--muted); font-size:.92rem; margin:10px 0}
.msg.err{color:var(--bad); border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.issues{list-style:none; padding:0; margin:12px 0; display:flex; flex-direction:column; gap:8px}
.issues li{padding:12px 14px; border-radius:14px; border:1px solid var(--glass-b); background:var(--field)}
.issues del{color:var(--bad)}
.issues ins{color:var(--good); text-decoration:none; font-weight:700}
.issues p{margin:4px 0 0; color:var(--muted); font-size:.9rem}
.big{font-family:Unbounded,sans-serif; font-weight:700; font-size:clamp(2.6rem,10vw,5.2rem); letter-spacing:-.03em; text-align:center; font-variant-numeric:tabular-nums; margin:8px 0 22px}
.center{display:flex; justify-content:center; gap:10px; flex-wrap:wrap}
.laps{list-style:none; padding:0; margin:18px auto 0; max-width:380px; font-variant-numeric:tabular-nums}
.laps li{display:flex; justify-content:space-between; gap:10px; padding:9px 4px; border-bottom:1px solid var(--glass-b)}
.laps li span:first-child{color:var(--muted)}
.wheelbox{position:relative; max-width:420px; margin:10px auto 16px}
.wheelbox canvas{width:100%; height:auto; display:block; border-radius:50%; box-shadow:var(--shadow); cursor:pointer}
.wheelbox::after{content:""; position:absolute; left:50%; top:-8px; transform:translateX(-50%); border:14px solid transparent; border-top:26px solid var(--ink); filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.winner{text-align:center; font-family:Unbounded,sans-serif; font-weight:700; font-size:1.5rem; min-height:2.2em}
.swatch{height:120px; border-radius:22px; border:1px solid var(--glass-b); margin-bottom:18px; transition:background .2s}
.shades{display:grid; grid-template-columns:repeat(11,1fr); gap:4px; margin:8px 0 6px}
.shades button{height:42px; border:0; border-radius:9px; cursor:pointer}
.kv{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--glass-b)}
.kv span{color:var(--muted); width:48px; font-weight:700}
.kv code{flex:1; font-size:1.02rem; overflow-wrap:anywhere}
.zones{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; margin-top:6px}
.zone{padding:14px; border-radius:16px; border:1px solid var(--glass-b); background:var(--field)}
.zone b{display:block; font-family:Unbounded,sans-serif; font-size:1.45rem; font-variant-numeric:tabular-nums; margin:2px 0}
.zone span{color:var(--muted); font-size:.84rem}
.chart{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; font-size:.88rem; font-variant-numeric:tabular-nums}
.chart div{padding:8px 10px; border-radius:10px; background:var(--field); display:flex; justify-content:space-between}
.qrbox{display:flex; justify-content:center; margin:6px 0 16px}
.qrbox canvas{width:280px; max-width:100%; height:auto; border-radius:14px; image-rendering:pixelated; box-shadow:var(--shadow)}
.grow{display:grid; grid-template-columns:1fr 1fr auto; gap:8px; margin-bottom:8px; align-items:center}
.grow.note{margin-bottom:4px; font-weight:700}
.seg{display:inline-flex; padding:4px; gap:2px; border-radius:14px; background:var(--field); border:1px solid var(--glass-b); margin-bottom:18px; flex-wrap:wrap}
.seg button{border:0; background:none; padding:8px 14px; border-radius:10px; cursor:pointer; font-weight:700; color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
input:disabled{opacity:.55}
.hidden{display:none!important}
.tri > .field{flex:1 1 0; min-width:0}
em.pro{font-style:normal; font-size:.66rem; font-weight:800; letter-spacing:.04em; padding:2px 7px; border-radius:999px; vertical-align:2px; color:var(--on-grad); background:linear-gradient(120deg,var(--c1),var(--c2))}
.pronote{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.locked{text-align:center; padding:34px 20px; border-radius:22px; border:1px solid var(--glass-b); background:var(--field)}
.locked b{font-family:Unbounded,sans-serif; font-size:1.2rem; display:block; margin-bottom:8px}
.locked p{color:var(--muted); max-width:44ch; margin:0 auto 18px}
#proBtn{padding:8px 14px; font-size:.85rem}
.app .ad{display:none!important}
[hidden]{display:none!important}
@media (max-width:760px){
  .bar .top{padding:10px 16px}
  .right > a{display:none}
  .search,.cats{padding-left:16px; padding-right:16px}
  .ad-home{width:calc(100% - 32px)}
  .two{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr; gap:10px}
  .card{flex-direction:column; gap:10px; padding:14px}
  .card span span{font-size:.82rem}
  .ptitle .ic{width:44px; height:44px}
  .shades button{height:32px}
}
/* ---- assistant ---- */
.ai-fab{position:fixed; z-index:40; right:calc(18px + env(safe-area-inset-right,0px)); bottom:calc(18px + env(safe-area-inset-bottom,0px)); width:62px; height:62px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; color:#0A0D1F;
  background:conic-gradient(from 200deg,var(--c1),var(--c2),var(--c3),var(--c1)); box-shadow:0 18px 40px -12px var(--c2), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -6px 14px rgba(0,0,0,.18); transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ai-fab:hover{transform:scale(1.06)}
.ai-fab svg{width:28px; height:28px; fill:currentColor}
.ai-fab::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid color-mix(in srgb,var(--c2) 55%,transparent); animation:aipulse 2.8s ease-out infinite; pointer-events:none}
@keyframes aipulse{0%{transform:scale(.9); opacity:.8}100%{transform:scale(1.25); opacity:0}}
.ai-on .ai-fab{display:none}
.ai-panel{position:fixed; z-index:45; right:calc(18px + env(safe-area-inset-right,0px)); bottom:calc(18px + env(safe-area-inset-bottom,0px)); width:min(400px,calc(100vw - 36px)); height:min(640px,calc(100vh - 120px)); display:flex; flex-direction:column;
  background:color-mix(in srgb,var(--bg) 82%,transparent); border:1px solid var(--glass-b); border-radius:26px; box-shadow:var(--shadow), 0 30px 80px -30px var(--c2); backdrop-filter:blur(28px) saturate(1.4); -webkit-backdrop-filter:blur(28px) saturate(1.4); overflow:hidden; animation:aiin .3s cubic-bezier(.2,.8,.2,1)}
@keyframes aiin{from{opacity:0; transform:translateY(16px) scale(.98)}to{opacity:1; transform:none}}
.ai-head{display:flex; align-items:center; gap:12px; padding:14px 14px 12px 16px; border-bottom:1px solid var(--glass-b)}
.ai-head > div{flex:1; min-width:0}
.ai-head b{display:block; font-family:Unbounded,sans-serif; font-size:.98rem}
.ai-head small{color:var(--muted); font-size:.8rem}
.ai-orb{width:34px; height:34px; border-radius:50%; flex:none; background:conic-gradient(from 200deg,var(--c1),var(--c2),var(--c3),var(--c1)); box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.ai-head .mini svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ai-head .mini[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.ai-log{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain}
.ai-msg{max-width:88%; padding:11px 14px; border-radius:18px; line-height:1.5; font-size:.95rem; overflow-wrap:anywhere}
.ai-msg.bot{align-self:flex-start; background:var(--field); border:1px solid var(--glass-b); border-bottom-left-radius:6px}
.ai-msg.me{align-self:flex-end; color:var(--on-grad); background:linear-gradient(120deg,var(--c1),var(--c2)); border-bottom-right-radius:6px}
.ai-msg.sys{align-self:stretch; max-width:none; background:var(--field); border:1px dashed var(--glass-b); color:var(--muted); font-size:.9rem}
.ai-msg.sys b{color:var(--ink)}
.ai-msg.sys p{margin:6px 0 12px}
.ai-msg.sys .btns{margin:0}
.ai-msg code{font-size:.9em}
.ai-acts{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.ai-acts .btn{padding:7px 12px; font-size:.84rem; text-decoration:none}
.ai-tools{display:flex; gap:4px; margin-top:8px; flex-wrap:wrap}
.ai-tiny{border:0; background:none; color:var(--muted); font-size:.78rem; font-weight:700; padding:4px 6px; border-radius:8px; cursor:pointer}
.ai-tiny:hover{color:var(--ink); background:var(--glass-hi)}
.ai-dots{display:inline-flex; gap:4px; padding:4px 0}
.ai-dots i{width:7px; height:7px; border-radius:50%; background:var(--muted); animation:aidot 1.2s infinite}
.ai-dots i:nth-child(2){animation-delay:.15s}.ai-dots i:nth-child(3){animation-delay:.3s}
@keyframes aidot{0%,80%,100%{opacity:.3; transform:translateY(0)}40%{opacity:1; transform:translateY(-3px)}}
.ai-sugg{display:flex; gap:6px; flex-wrap:wrap; padding:0 16px 10px}
.ai-sugg:empty{display:none}
.ai-sugg button{border:1px solid var(--glass-b); background:var(--field); border-radius:999px; padding:7px 12px; font-size:.84rem; font-weight:600; cursor:pointer; text-align:left}
.ai-sugg button:hover{border-color:var(--c2)}
.ai-input{display:flex; align-items:flex-end; gap:8px; padding:10px 12px 6px; border-top:1px solid var(--glass-b)}
.ai-input textarea{flex:1; min-height:46px; max-height:140px; resize:none; padding:12px 14px; border-radius:16px; font-size:16px; line-height:1.4}
.ai-btn{width:46px; height:46px; flex:none; border-radius:50%; border:1px solid var(--glass-b); background:var(--field); cursor:pointer; display:grid; place-items:center; color:var(--ink)}
.ai-btn svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ai-btn.primary{border:0; color:var(--on-grad); background:linear-gradient(120deg,var(--c1),var(--c2))}
.ai-btn:disabled{opacity:.45; cursor:default}
.ai-btn.rec{border-color:transparent; color:#fff; background:var(--bad); animation:airec 1.2s ease-in-out infinite}
@keyframes airec{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 55%,transparent)}50%{box-shadow:0 0 0 10px transparent}}
.ai-foot{margin:0; padding:2px 16px 12px; color:var(--muted); font-size:.74rem; text-align:center}
.ask-ai{margin-top:12px}
@media (max-width:760px){
  .ai-panel{inset:0; width:auto; height:auto; border-radius:0; border:0; background:var(--bg); padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
  .ai-on body{overflow:hidden}
}
/* ===================== v5 · premium layer ===================== */
:root{
  --bg:#F4F4F8; --bg2:#E9EAF3; --glass:rgba(255,255,255,.66); --glass-b:rgba(18,20,48,.09); --glass-hi:rgba(255,255,255,.95);
  --ink:#0E1024; --muted:#5D6283; --field:rgba(18,20,48,.04);
  --c1:#0BB5C4; --c2:#6A4BFF; --c3:#E0458B; --hair:rgba(18,20,48,.1);
  --shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 30px 60px -36px rgba(40,30,120,.35);
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#05060E; --bg2:#0B0E22; --glass:rgba(255,255,255,.035); --glass-b:rgba(255,255,255,.08); --glass-hi:rgba(255,255,255,.12);
    --ink:#F2F3FF; --muted:#8F97BF; --field:rgba(255,255,255,.045); --hair:rgba(255,255,255,.08);
    --c1:#5CE1E6; --c2:#9B7BFF; --c3:#FF7EB6;
    --shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 40px 80px -40px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --bg:#05060E; --bg2:#0B0E22; --glass:rgba(255,255,255,.035); --glass-b:rgba(255,255,255,.08); --glass-hi:rgba(255,255,255,.12);
  --ink:#F2F3FF; --muted:#8F97BF; --field:rgba(255,255,255,.045); --hair:rgba(255,255,255,.08);
  --c1:#5CE1E6; --c2:#9B7BFF; --c3:#FF7EB6;
  --shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 40px 80px -40px rgba(0,0,0,.9);
}
body{font-size:16.5px; letter-spacing:-.005em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility}
body::after{background:
  radial-gradient(42vmax 32vmax at 82% 4%, color-mix(in srgb,var(--c2) 22%,transparent), transparent 70%),
  radial-gradient(36vmax 28vmax at 6% 28%, color-mix(in srgb,var(--c1) 13%,transparent), transparent 70%),
  radial-gradient(30vmax 24vmax at 55% 100%, color-mix(in srgb,var(--c3) 10%,transparent), transparent 70%); filter:blur(14px)}
.grain{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3{font-weight:600}
::selection{background:color-mix(in srgb,var(--c2) 35%,transparent)}

/* header pill */
.bar{background:none; border:0; backdrop-filter:none; -webkit-backdrop-filter:none; padding:14px 16px 0}
body::before{display:none}
.pill{max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:18px; padding:8px 8px 8px 18px; border-radius:999px;
  background:color-mix(in srgb,var(--bg) 62%,transparent); border:1px solid var(--glass-b); backdrop-filter:blur(22px) saturate(1.6); -webkit-backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:0 1px 0 var(--glass-hi) inset, 0 18px 40px -28px rgba(0,0,0,.45)}
.brand b{font-weight:700; font-size:1.18rem; letter-spacing:-.04em}
.mark{width:26px; height:26px; border-radius:9px}
.links{display:flex; gap:4px; margin-left:8px}
.links a,.links .link{border:0; background:none; cursor:pointer; text-decoration:none; color:var(--muted); font-weight:600; font-size:.92rem; padding:8px 12px; border-radius:999px; transition:color .2s, background .2s}
.links a:hover,.links .link:hover{color:var(--ink); background:var(--field)}
.pill .right{margin-left:auto; display:flex; align-items:center; gap:8px}
.langwrap{position:relative}
.langbtn{display:flex; align-items:center; gap:7px; border:1px solid var(--glass-b); background:var(--field); color:var(--ink); border-radius:999px; padding:8px 14px 8px 11px; cursor:pointer; font-weight:700; font-size:.82rem; letter-spacing:.02em}
.langbtn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7}
.langmenu{position:absolute; right:0; top:calc(100% + 10px); min-width:200px; padding:6px; border-radius:18px; z-index:50;
  background:color-mix(in srgb,var(--bg) 90%,transparent); border:1px solid var(--glass-b); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:0 30px 60px -20px rgba(0,0,0,.5); animation:aiin .22s var(--ease)}
.langmenu button{display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; border:0; background:none; color:var(--ink); padding:10px 12px; border-radius:12px; cursor:pointer; font-weight:600; font-size:.95rem; text-align:left}
.langmenu button small{color:var(--muted); font-weight:700; font-size:.72rem; letter-spacing:.06em}
.langmenu button:hover,.langmenu button:focus-visible{background:var(--field)}
.langmenu button[aria-checked="true"]{background:linear-gradient(120deg,color-mix(in srgb,var(--c1) 18%,transparent),color-mix(in srgb,var(--c2) 20%,transparent))}

/* hero */
.hero{max-width:1240px; min-height:min(760px,calc(100vh - 80px)); padding:40px 28px 10px; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:10px}
.hero h1{font-size:clamp(2.7rem,6.6vw,5.9rem); font-weight:600; letter-spacing:-.052em; line-height:.98; max-width:11ch;
  background:linear-gradient(180deg,var(--ink) 35%,color-mix(in srgb,var(--ink) 52%,transparent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{font-size:clamp(1.02rem,1.35vw,1.18rem); line-height:1.6; margin-top:26px; max-width:46ch}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px}
.btn.xl{padding:15px 24px; border-radius:999px; font-size:1rem; text-decoration:none; display:inline-flex; align-items:center}
.btn.primary{position:relative; overflow:hidden}
.btn.primary::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); transform:translateX(-120%); transition:transform .8s var(--ease)}
.btn.primary:hover::after{transform:translateX(120%)}
.btn.ghost{background:transparent; border:1px solid var(--glass-b); color:var(--ink)}
.btn.ghost:hover{background:var(--field)}
.btn.sm{padding:8px 14px; font-size:.84rem; border-radius:999px; display:inline-flex; align-items:center; gap:7px}
.btn.sm svg{width:15px; height:15px; fill:currentColor}
.proof{list-style:none; padding:0; margin:30px 0 0; display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--muted); font-size:.9rem; font-weight:600}
.proof li{display:flex; align-items:center; gap:7px}
.proof svg{width:16px; height:16px; fill:none; stroke:var(--c1); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.hero-copy > *{animation:rise 1.1s var(--ease) both}
.hero-copy > p{animation-delay:.08s}.hero-copy > .cta{animation-delay:.16s}.hero-copy > .proof{animation-delay:.24s}
.scene{height:min(640px,72vh); margin-right:-28px}

/* marquee */
.marquee{position:relative; overflow:hidden; padding:18px 0; margin:6px 0 0; border-block:1px solid var(--hair);
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex; gap:38px; width:max-content; animation:marq 70s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track span{display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:600; font-size:.95rem; white-space:nowrap}
.track svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.8}
@keyframes marq{to{transform:translateX(-50%)}}

/* bento */
.bento{max-width:1232px; margin:56px auto 0; padding:0 24px; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:250px; gap:16px}
.bcard{position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; text-align:left; text-decoration:none; color:var(--ink); cursor:pointer;
  padding:22px; border-radius:28px; background:var(--glass); border:0; overflow:hidden; font:inherit; transition:transform .5s var(--ease)}
.bcard:hover{transform:translateY(-4px)}
.bcard::before,.card::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(150deg,color-mix(in srgb,var(--ink) 18%,transparent),transparent 38%,transparent 62%,color-mix(in srgb,var(--c2) 45%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.bcard::after,.card::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--c2) 16%,transparent),transparent 60%)}
.bcard:hover::after,.card:hover::after{opacity:1}
.b-ai{grid-column:span 2; grid-row:span 2; background:radial-gradient(120% 90% at 80% 0%,color-mix(in srgb,var(--c2) 22%,transparent),transparent 60%),var(--glass)}
.btxt b{display:block; font-family:Unbounded,sans-serif; font-weight:600; font-size:1.06rem; letter-spacing:-.02em; margin-bottom:4px}
.b-ai .btxt b{font-size:clamp(1.4rem,2.3vw,2rem); line-height:1.1}
.btxt span{color:var(--muted); font-size:.92rem; line-height:1.45; display:block; max-width:40ch}
.bviz{flex:1; position:relative; display:flex; align-items:center; justify-content:center; min-height:0}
.chat{flex-direction:column; align-items:stretch; justify-content:center; gap:10px; padding:10px 6px}
.chat .orb{position:absolute; right:6%; top:6%; width:120px; height:120px; border-radius:50%; background:conic-gradient(from 200deg,var(--c1),var(--c2),var(--c3),var(--c1)); filter:blur(.3px); box-shadow:0 30px 80px -10px var(--c2), inset 0 2px 0 rgba(255,255,255,.6), inset 0 -18px 30px rgba(0,0,0,.25); animation:float 7s ease-in-out infinite}
.bub{max-width:72%; padding:12px 16px; border-radius:18px; font-size:.95rem; line-height:1.45; position:relative}
.bub.me{align-self:flex-end; color:var(--on-grad); background:linear-gradient(120deg,var(--c1),var(--c2)); border-bottom-right-radius:6px; margin-right:24%}
.bub.bot{align-self:flex-start; background:color-mix(in srgb,var(--bg) 70%,transparent); border:1px solid var(--glass-b); border-bottom-left-radius:6px; backdrop-filter:blur(10px)}
@keyframes float{50%{transform:translateY(-10px) rotate(6deg)}}
.words{flex-direction:column; gap:2px; font-family:Unbounded,sans-serif; font-weight:600; letter-spacing:-.03em}
.words span{font-size:1.25rem; opacity:calc(1 - var(--i) * .15); transform:translateX(calc(var(--i) * 6px))}
.words span:first-child{font-size:1.6rem; background:linear-gradient(120deg,var(--c1),var(--c2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.pages i{position:absolute; width:86px; height:112px; border-radius:10px; background:linear-gradient(180deg,var(--glass-hi),var(--field)); border:1px solid var(--glass-b); box-shadow:0 18px 30px -18px rgba(0,0,0,.5); transition:transform .6s var(--ease)}
.pages i:nth-child(1){transform:translateX(-46px) rotate(-10deg)}
.pages i:nth-child(2){transform:translateX(0) rotate(-1deg)}
.pages i:nth-child(3){transform:translateX(46px) rotate(9deg); background:linear-gradient(160deg,color-mix(in srgb,var(--c1) 40%,transparent),color-mix(in srgb,var(--c2) 40%,transparent))}
.bcard:hover .pages i:nth-child(1){transform:translateX(-14px) rotate(-3deg)}
.bcard:hover .pages i:nth-child(3){transform:translateX(14px) rotate(3deg)}
.qrg{display:grid; grid-template-columns:repeat(9,1fr); gap:3px; width:116px; padding:10px; border-radius:14px; background:#fff; box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.qrg i{aspect-ratio:1; border-radius:2px}
.qrg i.on{background:#0E1024}
.digits{font-family:Unbounded,sans-serif; font-weight:600; font-size:3.4rem; letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.digits em{font-style:normal; color:var(--c2); animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}

/* search + categories */
.search{max-width:1232px; margin:56px auto 0; padding:0 24px}
.search label{border-radius:999px; padding:6px 10px 6px 24px; box-shadow:var(--shadow)}
.search input[type=search]{padding:18px 0; font-size:1.1rem}
.cat{margin-top:64px}
.cat h2{font-size:clamp(1.3rem,2.2vw,1.7rem); letter-spacing:-.035em; padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid var(--hair); justify-content:space-between}
.cat h2 small{font-size:.9rem}
.grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.card{position:relative; isolation:isolate; overflow:hidden; border:0; border-radius:22px; padding:20px; background:var(--glass); transition:transform .5s var(--ease)}
.card:hover{transform:translateY(-3px); box-shadow:none; border:0}
.card b{font-size:1rem; letter-spacing:-.01em}
.ic{border-radius:14px; background:linear-gradient(140deg,color-mix(in srgb,var(--c1) 22%,transparent),color-mix(in srgb,var(--c2) 26%,transparent)); border:1px solid var(--glass-b); box-shadow:inset 0 1px 0 var(--glass-hi)}

/* tool page */
.crumbs{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:.88rem; font-weight:600; margin-bottom:18px}
.crumbs a{text-decoration:none; color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.ptitle{flex-wrap:wrap}
.ptitle h1{font-size:clamp(1.8rem,3.6vw,2.8rem); letter-spacing:-.045em; flex:1; min-width:0}
.panel{border-radius:32px; border:1px solid var(--glass-b); box-shadow:var(--shadow)}
#toolview .shell{padding-top:28px}

/* footer */
.foot{max-width:1232px; margin:110px auto 0; padding:56px 24px 0; border-top:1px solid var(--hair); display:block; overflow:hidden}
.fcols{display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:28px}
.fbrand p{color:var(--muted); margin:14px 0 0; max-width:24ch}
.fcol h3{font-family:Manrope,sans-serif; font-size:.82rem; font-weight:800; color:var(--ink); margin-bottom:12px}
.fcol ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px}
.fcol a{color:var(--muted); text-decoration:none; font-size:.88rem}
.fcol a:hover,.flegal a:hover{color:var(--ink)}
.flegal{display:flex; gap:22px; flex-wrap:wrap; margin-top:48px; color:var(--muted); font-size:.85rem}
.flegal a{color:var(--muted); text-decoration:none}
.wordmark{font-family:Unbounded,sans-serif; font-weight:700; font-size:clamp(4.5rem,19vw,17rem); letter-spacing:-.07em; line-height:.8; text-align:center; margin:40px 0 -0.08em; user-select:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 14%,transparent),transparent 85%); -webkit-background-clip:text; background-clip:text; color:transparent}

/* view transitions */
::view-transition-old(root),::view-transition-new(root){animation-duration:.38s; animation-timing-function:var(--ease)}

@media (max-width:1080px){ .fcols{grid-template-columns:repeat(3,1fr)} .fbrand{grid-column:1/-1} }
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr); grid-auto-rows:220px}
  .hero{grid-template-columns:1fr; min-height:0}
  .scene{order:-1; height:340px; margin:0 -28px}
}
@media (max-width:760px){
  .bar{padding:10px 10px 0}
  .pill{gap:8px; padding:6px 6px 6px 14px}
  .links{display:none}
  .hero{padding:10px 18px 0}
  .scene{height:280px; margin:0 -18px}
  .hero h1{max-width:none}
  .btn.xl{padding:14px 20px; flex:1; justify-content:center}
  .bento{padding:0 14px; gap:10px; grid-auto-rows:190px; margin-top:36px}
  .b-ai{grid-row:span 2}
  .bcard{padding:16px; border-radius:22px}
  .digits{font-size:2.4rem}
  .pages i{width:60px; height:80px}
  .qrg{width:92px}
  .chat .orb{width:80px; height:80px}
  .bub{font-size:.85rem; max-width:88%}
  .bub.me{margin-right:0}
  .search{padding:0 14px; margin-top:36px}
  .cats{padding:0 14px 24px}
  .grid{grid-template-columns:1fr 1fr; gap:10px}
  .card{flex-direction:column; gap:10px; padding:16px; border-radius:20px}
  .cta{flex-direction:column}
  .words span{font-size:1rem}
  .words span:first-child{font-size:1.25rem}
  .words span:nth-child(n+4){display:none}
  .btxt b{font-size:.95rem}
  .btxt span{font-size:.82rem}
  .bento .bcard:not(.b-ai) .btxt span{display:none}
  .fcols{grid-template-columns:1fr 1fr}
  .foot{margin-top:70px; padding:40px 18px 0}
}
/* ===================== v6 · motion layer ===================== */
@keyframes aurora{0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}33%{transform:translate3d(-5%,4%,0) rotate(6deg) scale(1.08)}66%{transform:translate3d(4%,-3%,0) rotate(-5deg) scale(.96)}}
body::after{animation:aurora 30s ease-in-out infinite; will-change:transform}
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:70; transform-origin:0 50%; transform:scaleX(var(--p,0)); background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3)); pointer-events:none}
.glow{position:fixed; left:0; top:0; width:640px; height:640px; margin:-320px 0 0 -320px; border-radius:50%; pointer-events:none; z-index:0; opacity:0; transition:opacity .6s;
  background:radial-gradient(circle,color-mix(in srgb,var(--c2) 14%,transparent),transparent 62%); transform:translate3d(var(--gx,-999px),var(--gy,-999px),0)}
.glow.on{opacity:1}
#home,#toolview,.foot{position:relative; z-index:1}

/* headline: words rise out of blur */
.hero h1{background:none; color:var(--ink)}
.hero h1 .w{display:inline-block; padding-bottom:.08em; margin-bottom:-.08em; opacity:0; transform:translateY(.55em) rotate(3deg); filter:blur(12px);
  background:linear-gradient(180deg,var(--ink) 30%,color-mix(in srgb,var(--ink) 55%,transparent)); -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:wordin 1s var(--ease) forwards; animation-delay:calc(var(--i) * 75ms + 120ms)}
.hero h1 .w.acc{background:linear-gradient(110deg,var(--c1),var(--c2) 45%,var(--c3) 80%,var(--c1)); background-size:250% 100%; -webkit-background-clip:text; background-clip:text;
  animation:wordin 1s var(--ease) forwards, sheen 6s linear 1.4s infinite; animation-delay:calc(var(--i) * 75ms + 120ms), 1.4s}
@keyframes wordin{to{opacity:1; transform:none; filter:blur(0)}}
@keyframes sheen{to{background-position:-250% 0}}
.hero-copy > p{animation-delay:.55s}.hero-copy > .cta{animation-delay:.68s}.hero-copy > .proof{animation-delay:.8s}
.scene{animation:scenein 1.6s var(--ease) both .2s}
@keyframes scenein{from{opacity:0; transform:scale(.88) translateY(30px)}to{opacity:1; transform:none}}

/* scroll reveal */
.rv{opacity:0; transform:translateY(34px) scale(.97); transition:opacity .9s var(--ease), transform 1s var(--ease); transition-delay:calc(var(--d,0) * 55ms)}
.rv.in{opacity:1; transform:none}
.cat h2{position:relative}
.cat h2::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,var(--c1),var(--c2),transparent); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.4s var(--ease) .15s}
.cat h2.seen::after{transform:scaleX(1)}

/* cards: tilt + icon pop */
.card,.bcard{transform-style:preserve-3d; will-change:transform}
.card .ic,.bcard .btxt{transition:transform .5s var(--ease)}
.card:hover .ic{transform:translateZ(30px) scale(1.06)}
.card:hover .ic svg{animation:icpop .7s var(--ease)}
@keyframes icpop{30%{transform:scale(1.25) rotate(-10deg)}60%{transform:scale(.95) rotate(4deg)}}
.btn.xl,.ai-fab{transition:transform .35s var(--ease)}

/* bento loops */
.words span,.words span:first-child{font-size:1.25rem; color:var(--ink); background:none; -webkit-background-clip:border-box; background-clip:border-box; opacity:.28; transform:none;
  animation:wcycle 6.4s var(--ease) infinite; animation-delay:calc(var(--i) * 1.6s)}
@keyframes wcycle{0%{opacity:.28; transform:none}6%,22%{opacity:1; transform:translateX(10px) scale(1.12); color:var(--c2)}30%,100%{opacity:.28; transform:none}}
.chat .bub{animation:bubin 7s var(--ease) infinite}
.chat .bub.bot{animation-name:bubin2}
@keyframes bubin{0%,4%{opacity:0; transform:translateY(14px) scale(.96)}10%,86%{opacity:1; transform:none}94%,100%{opacity:0; transform:translateY(-6px)}}
@keyframes bubin2{0%,26%{opacity:0; transform:translateY(14px) scale(.96)}34%,86%{opacity:1; transform:none}94%,100%{opacity:0; transform:translateY(-6px)}}
.pages i{animation:fan 5s var(--ease) infinite}
.pages i:nth-child(1){--t:translateX(-46px) rotate(-10deg)}
.pages i:nth-child(2){--t:translateX(0) rotate(-1deg)}
.pages i:nth-child(3){--t:translateX(46px) rotate(9deg)}
@keyframes fan{0%,100%{transform:var(--t)}45%,60%{transform:translateX(0) rotate(0) scale(.96)}}
.qrg{position:relative; overflow:hidden}
.qrg::after{content:""; position:absolute; left:0; right:0; top:-30%; height:30%; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c1) 55%,transparent),transparent); animation:scan 2.6s ease-in-out infinite}
@keyframes scan{to{top:100%}}
.qrg i.on{animation:qrpop 2.6s ease-in-out infinite; animation-delay:calc(var(--q) * 18ms)}
@keyframes qrpop{0%,100%{opacity:1}50%{opacity:.55}}
.digits span{display:inline-block; min-width:1.2ch; text-align:center}
.digits .tick{animation:tick .45s var(--ease)}
@keyframes tick{from{transform:translateY(-35%); opacity:.2; filter:blur(4px)}to{transform:none; opacity:1; filter:none}}
.chat .orb{animation:float 7s ease-in-out infinite, hue 12s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}

/* marquee: second direction on hover row feel */
.track span{transition:color .3s}
.track span:hover{color:var(--ink)}

/* tool page entrance */
.panel.enter{animation:panelin .8s var(--ease) both}
@keyframes panelin{from{opacity:0; transform:translateY(26px) scale(.985); filter:blur(6px)}to{opacity:1; transform:none; filter:none}}
.panel.enter .ptitle .ic{animation:icin .9s var(--ease) both .1s}
@keyframes icin{from{transform:scale(.4) rotate(-30deg); opacity:0}to{transform:none; opacity:1}}
.stat b{transition:color .3s}
.stat.flash b{animation:flash .5s var(--ease)}
@keyframes flash{from{transform:translateY(-4px); opacity:.4}to{transform:none; opacity:1}}

/* wordmark shimmer */
.wordmark{background:linear-gradient(100deg,color-mix(in srgb,var(--ink) 12%,transparent) 30%,color-mix(in srgb,var(--c2) 40%,transparent) 50%,color-mix(in srgb,var(--ink) 12%,transparent) 70%); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sheen 9s linear infinite}

@media (hover:none){ .glow{display:none} }
/* ===================== v7 · new tools & features ===================== */
.fcols{grid-template-columns:1.3fr repeat(6,1fr)}
.subh{font-size:1rem; margin:22px 0 12px; letter-spacing:-.02em}
.sigpad{width:100%; height:auto; aspect-ratio:3/1; border-radius:18px; background:#fff; border:1px dashed var(--glass-b); touch-action:none; cursor:crosshair; display:block; margin-bottom:10px}
.sgprev{position:relative; align-self:start; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); background:#fff}
.sgprev canvas{display:block; cursor:copy; max-width:100%}
.sgprev img{position:absolute; display:none; pointer-events:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.calc{max-width:520px}
.cdisp{padding:18px; border-radius:20px; background:var(--field); border:1px solid var(--glass-b); margin-bottom:14px; text-align:right}
.cexp{color:var(--muted); min-height:1.3em; font-size:.92rem; overflow-wrap:anywhere}
.cdisp input{width:100%; border:0!important; background:none!important; box-shadow:none!important; text-align:right; font-size:1.25rem; padding:6px 0!important}
.cres{font-family:Unbounded,sans-serif; font-size:clamp(1.8rem,6vw,2.6rem); font-weight:600; letter-spacing:-.03em; overflow-wrap:anywhere}
.ckeys{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.ck{border:1px solid var(--glass-b); background:var(--field); color:var(--ink); border-radius:14px; padding:14px 0; font-weight:700; font-size:.95rem; cursor:pointer; transition:transform .12s, background .2s}
.ck:hover{background:var(--glass-hi)} .ck:active{transform:scale(.94)}
.ck.n{background:var(--glass-hi); font-size:1.1rem}
.ck.op{color:var(--c2); font-size:1.15rem}
.ck.eq{background:linear-gradient(120deg,var(--c1),var(--c2)); color:var(--on-grad); border:0; font-size:1.2rem}
.weeks div{flex-direction:column; gap:2px}
.weeks div b{font-family:Unbounded,sans-serif}
.weeks div span{color:var(--muted); font-size:.8rem}
.weeks div.cur{background:linear-gradient(120deg,color-mix(in srgb,var(--c1) 30%,transparent),color-mix(in srgb,var(--c2) 30%,transparent))}
.cdname{font-family:Unbounded,sans-serif; font-size:1.1rem; text-align:center; margin:24px 0 8px}
.cdgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.cdgrid div{text-align:center; padding:20px 6px; border-radius:20px; background:var(--field); border:1px solid var(--glass-b)}
.cdgrid b{display:block; font-family:Unbounded,sans-serif; font-weight:600; font-size:clamp(1.8rem,7vw,3.4rem); letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.cdgrid span{color:var(--muted); font-size:.85rem; font-weight:600}
.irow{display:grid; grid-template-columns:3fr .8fr 1.3fr .9fr auto; gap:8px; margin-bottom:8px; align-items:center}
.cvblock{padding:14px; border-radius:16px; border:1px solid var(--glass-b); margin-bottom:10px}
.swt{width:38px; height:38px; border-radius:50%; border:3px solid transparent; cursor:pointer; box-shadow:0 0 0 1px var(--glass-b)}
.swt[aria-pressed="true"]{border-color:var(--bg); box-shadow:0 0 0 2px var(--ink)}
.tywords{height:132px; overflow:hidden; padding:16px; border-radius:18px; background:var(--field); border:1px solid var(--glass-b); font-size:1.25rem; line-height:1.6; margin:16px 0 12px; position:relative}
.tywords span{border-radius:6px; padding:0 2px; transition:color .15s}
.tywords .cur{background:color-mix(in srgb,var(--c2) 22%,transparent)}
.tywords .cur.wrong{background:color-mix(in srgb,var(--bad) 25%,transparent)}
.tywords .ok{color:var(--good)} .tywords .bad{color:var(--bad); text-decoration:line-through}
#tyi{font-size:1.15rem}
.mine{max-width:1232px; margin:40px auto 0; padding:0 24px; display:flex; flex-direction:column; gap:18px}
.mrow h2{font-size:.85rem; font-family:Manrope,sans-serif; font-weight:800; color:var(--muted); letter-spacing:.02em; margin-bottom:10px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; text-decoration:none; color:var(--ink); background:var(--glass); border:1px solid var(--glass-b); font-weight:600; font-size:.9rem; transition:transform .3s var(--ease), border-color .3s}
.chip:hover{transform:translateY(-2px); border-color:var(--c2)}
.chip svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.favbtn[aria-pressed="true"]{color:var(--c2); border-color:var(--c2)}
.palbtn kbd,.palin kbd{font:600 .7rem Manrope,sans-serif; padding:2px 6px; border-radius:6px; border:1px solid var(--glass-b); color:var(--muted)}
.pal{position:fixed; inset:0; z-index:80; background:rgba(5,6,14,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; justify-content:center; align-items:flex-start; padding:12vh 16px 16px}
.pal[hidden]{display:none!important}
.palbox{width:min(620px,100%); border-radius:22px; overflow:hidden; background:color-mix(in srgb,var(--bg) 92%,transparent); border:1px solid var(--glass-b); box-shadow:0 40px 100px -30px rgba(0,0,0,.7); animation:aiin .25s var(--ease)}
.palin{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--hair)}
.palin svg{width:20px; height:20px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round}
.palin input{flex:1; border:0!important; background:none!important; box-shadow:none!important; font-size:1.1rem; padding:6px 0!important}
#pall{list-style:none; margin:0; padding:8px; max-height:60vh; overflow:auto}
#pall li{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; cursor:pointer}
#pall li[aria-selected="true"],#pall li:hover{background:var(--field)}
#pall li b{display:block; font-size:.95rem} #pall li small{color:var(--muted); font-size:.82rem}
#pall .ic{width:34px; height:34px; border-radius:10px} #pall .ic svg{width:17px; height:17px}
.faqh{margin-top:26px!important}
.faq{border-top:1px solid var(--hair); padding:12px 0}
.faq summary{cursor:pointer; font-weight:700; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::after{content:"+"; color:var(--c2); font-weight:800; transition:transform .3s var(--ease)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{margin:8px 0 0}
@media (max-width:1080px){ .fcols{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){
  .ckeys{gap:6px} .ck{padding:12px 0; font-size:.88rem}
  .irow{grid-template-columns:1fr 1fr; } .irow input:first-child{grid-column:1/-1}
  .cdgrid{gap:6px} .cdgrid div{padding:14px 2px}
  .palbtn kbd{display:none}
  .mine{padding:0 14px; margin-top:28px}
  .fcols{grid-template-columns:1fr 1fr}
}

/* ===================== v8 · tool pack 3 ===================== */
.fcols{grid-template-columns:1.2fr repeat(7,1fr); gap:22px}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace!important; font-size:.92rem!important}
.thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin:14px 0}
.thumbs figure{margin:0; border:1px solid var(--glass-b); border-radius:16px; overflow:hidden; background:var(--field)}
.thumbs img{width:100%; display:block; background:#fff}
.thumbs figcaption{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:8px; font-size:.82rem; color:var(--muted); flex-wrap:wrap}
.org .pthumb{aspect-ratio:3/4; display:grid; place-items:center; background:#fff; overflow:hidden}
.org .pthumb img{max-width:92%; max-height:92%; width:auto; transition:transform .35s var(--ease); box-shadow:0 4px 12px rgba(0,0,0,.15)}
.org figcaption{justify-content:center}
.org figcaption b{width:100%; text-align:center; color:var(--ink)}
.teamgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-top:16px}
.team{padding:16px; border-radius:18px; background:var(--field); border:1px solid var(--glass-b); animation:panelin .6s var(--ease) both; animation-delay:calc(var(--d)*70ms)}
.team b{font-family:Unbounded,sans-serif; font-size:.95rem; color:var(--c2)}
.team ul{margin:8px 0 0; padding-left:18px}
.pomo{position:relative; width:min(300px,80vw); aspect-ratio:1; margin:6px auto 20px}
.ring{width:100%; height:100%; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:6; stroke:var(--field)}
.ring #pmr{stroke:url(#none); stroke:var(--c2); stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .3s linear}
.pomoc{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px}
.pomoc b{font-family:Unbounded,sans-serif; font-size:clamp(2.6rem,10vw,3.6rem); font-weight:600; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.pomoc span{font-weight:700; color:var(--c2)} .pomoc small{color:var(--muted)}
.dicbtn{width:96px; height:96px; border-radius:50%; border:0; cursor:pointer; color:var(--on-grad); background:conic-gradient(from 200deg,var(--c1),var(--c2),var(--c3),var(--c1)); box-shadow:0 20px 50px -16px var(--c2); display:grid; place-items:center; margin:8px 0}
.dicbtn svg{width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.dicbtn.rec{animation:airec 1.2s ease-in-out infinite; background:var(--bad); color:#fff}
.dicbtn:disabled{opacity:.4}
@media (max-width:1080px){ .fcols{grid-template-columns:repeat(4,1fr)} }
@media (max-width:760px){ .fcols{grid-template-columns:1fr 1fr} .thumbs{grid-template-columns:1fr 1fr} }

/* web Pro */
.pro .ad{display:none!important}
.wp{padding:28px 24px 22px; text-align:center}
.wp .ai-orb{display:block; width:56px; height:56px; margin:0 auto 12px}
.wp h2{font-size:1.6rem; margin-bottom:6px}
.wp .proof{justify-content:center; margin:14px 0 20px}
.plans{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px}
.plan{border:1px solid var(--glass-b); background:var(--field); color:var(--ink); border-radius:18px; padding:18px 12px; cursor:pointer; display:flex; flex-direction:column; gap:4px; transition:transform .3s var(--ease), border-color .3s}
.plan:hover{transform:translateY(-2px); border-color:var(--c2)}
.plan:first-child{background:linear-gradient(140deg,color-mix(in srgb,var(--c1) 22%,transparent),color-mix(in srgb,var(--c2) 26%,transparent)); border-color:color-mix(in srgb,var(--c2) 50%,transparent)}
.plan b{font-family:Unbounded,sans-serif; font-size:1.25rem} .plan small{font-family:Manrope,sans-serif; font-size:.8rem; color:var(--muted)} .plan span{color:var(--muted); font-size:.85rem; font-weight:600}

/* ===================== v9 · mobile motion ===================== */
.ripple{position:absolute; border-radius:50%; pointer-events:none; transform:scale(0); opacity:.35; background:radial-gradient(circle,rgba(255,255,255,.9),color-mix(in srgb,var(--c2) 40%,transparent) 45%,transparent 70%); animation:ripple .7s var(--ease) forwards; z-index:0}
@keyframes ripple{to{transform:scale(1); opacity:0}}
.rippling{overflow:hidden; isolation:isolate}
.btn:active,.card:active,.bcard:active,.chip:active,.plan:active{transform:scale(.965)!important; transition:transform .12s}
@media (hover:none){
  .card,.bcard{transition:transform .25s linear}
  .card:active::after,.bcard:active::after{opacity:1}
  body::after{animation-duration:16s}
  .hero h1 .w.acc{animation:wordin 1s var(--ease) forwards, sheen 4s linear 1.4s infinite}
  .track{animation-duration:45s}
  .marquee .track span:nth-child(3n){animation:pulse 3s ease-in-out infinite}
  @keyframes pulse{50%{color:var(--ink)}}
  .ai-fab{animation:fabfloat 4s ease-in-out infinite}
  @keyframes fabfloat{50%{transform:translateY(-5px)}}
}

/* ===================== v10 · everything moves ===================== */
@property --ang{syntax:"<angle>"; inherits:false; initial-value:0deg}
@keyframes spinang{to{--ang:360deg}}
@keyframes breathe{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(8deg)}}
@keyframes shineX{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
@keyframes letterin{from{opacity:0; transform:translateY(.6em) rotate(8deg); filter:blur(6px)}to{opacity:1; transform:none; filter:none}}
@keyframes lettercolor{0%,70%,100%{color:var(--ink)}80%{color:var(--c1)}88%{color:var(--c2)}}
@keyframes letterhop{30%{transform:translateY(-.28em) rotate(-6deg)}60%{transform:translateY(.05em)}}
@keyframes gradshift{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes icidle{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-2px) rotate(-6deg)}60%{transform:translateY(1px) rotate(4deg)}}
@keyframes orbmove1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18vw,22vh) scale(1.25)}}
@keyframes orbmove2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-22vw,-14vh) scale(.85)}}
@keyframes orbmove3{0%,100%{transform:translate(0,0)}50%{transform:translate(10vw,-26vh) scale(1.2)}}
@keyframes orbglow{from{opacity:.25}to{opacity:.6}}
@keyframes splashout{0%,70%{opacity:1; visibility:visible}100%{opacity:0; visibility:hidden}}
@keyframes splashmark{0%{transform:scale(.3) rotate(-90deg); opacity:0}45%{transform:scale(1.15) rotate(10deg); opacity:1}65%,100%{transform:none}}
@keyframes toastin{0%{transform:translate(-50%,30px) scale(.9)}60%{transform:translate(-50%,-4px) scale(1.02)}100%{transform:translate(-50%,0) scale(1)}}

/* logo */
.mark{position:relative; overflow:hidden; background:conic-gradient(from var(--ang),var(--c1),var(--c2),var(--c3),var(--c1)); animation:spinang 5s linear infinite, breathe 4s ease-in-out infinite}
.mark::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%); animation:shineX 3.6s ease-in-out infinite}
.brand b .l{padding:0!important; border:0!important; font-size:inherit; display:inline-block; animation:letterin .8s var(--ease) both, lettercolor 7s ease-in-out infinite; animation-delay:calc(var(--i)*70ms + .1s), calc(var(--i)*.18s + 1.5s)}
.brand:hover b .l{animation:letterhop .6s var(--ease), lettercolor 7s ease-in-out infinite; animation-delay:calc(var(--i)*45ms), calc(var(--i)*.18s)}
.ai-orb{background:conic-gradient(from var(--ang),var(--c1),var(--c2),var(--c3),var(--c1)); animation:spinang 4s linear infinite}

/* header pill: a light runs around its border */
.pill{position:relative}
.pill::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0 72%,var(--c1) 82%,var(--c2) 90%,var(--c3) 96%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:spinang 6s linear infinite}
.links a,.links .link,.langbtn{position:relative}
.links a::after,.links .link::after{content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--c1),var(--c2)); transform:scaleX(0); transition:transform .35s var(--ease)}
.links a:hover::after,.links .link:hover::after{transform:scaleX(1)}
.langbtn svg{animation:globe 12s linear infinite}
@keyframes globe{to{transform:rotate(360deg)}}

/* living background orbs */
.orbs{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.orbs i{position:absolute; width:42vmax; height:42vmax; border-radius:50%; filter:blur(70px); opacity:.45}
.orbs i:nth-child(1){left:-10vmax; top:-10vmax; background:radial-gradient(circle,color-mix(in srgb,var(--c2) 55%,transparent),transparent 65%); animation:orbmove1 22s ease-in-out infinite}
.orbs i:nth-child(2){right:-14vmax; top:30vh; background:radial-gradient(circle,color-mix(in srgb,var(--c1) 45%,transparent),transparent 65%); animation:orbmove2 26s ease-in-out infinite}
.orbs i:nth-child(3){left:20vw; bottom:-20vmax; background:radial-gradient(circle,color-mix(in srgb,var(--c3) 40%,transparent),transparent 65%); animation:orbmove3 30s ease-in-out infinite}
.bar{z-index:30}

/* buttons, icons, headings */
.btn.primary,.ai-btn.primary,.tag[aria-current="page"],.stat.hl,.ck.eq{background-size:220% 220%!important; animation:gradshift 5s ease-in-out infinite alternate}
.btn.primary,.ai-btn.primary,.ck.eq{background-image:linear-gradient(120deg,var(--c1),var(--c2),var(--c3),var(--c1))}
.stat.hl{background-image:linear-gradient(135deg,var(--c1),var(--c2) 45%,var(--c3),var(--c1))}
.ic{background:conic-gradient(from var(--ang),color-mix(in srgb,var(--c1) 30%,transparent),color-mix(in srgb,var(--c2) 30%,transparent),color-mix(in srgb,var(--c3) 22%,transparent),color-mix(in srgb,var(--c1) 30%,transparent)); animation:spinang 9s linear infinite}
.card .ic svg,.chip svg,.track svg{animation:icidle 5s ease-in-out infinite}
.card:nth-child(3n+1) .ic svg{animation-delay:-1.7s} .card:nth-child(3n+2) .ic svg{animation-delay:-3.3s}
.ptitle .ic{animation:spinang 6s linear infinite, breathe 5s ease-in-out infinite}
.cat h2{background:linear-gradient(90deg,var(--ink) 35%,var(--c2) 50%,var(--ink) 65%); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sheen 9s linear infinite}
.cat h2 small{-webkit-text-fill-color:var(--muted)}
.panel h1,.about h2,.related h2,.mrow h2{background:linear-gradient(90deg,var(--ink) 40%,var(--c2) 50%,var(--ink) 60%); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sheen 10s linear infinite}
.fcol a{position:relative; display:inline-block; transition:color .3s, transform .3s var(--ease)}
.fcol a:hover{transform:translateX(4px)}
.toast.on{animation:toastin .5s var(--ease)}
.stat{animation:panelin .7s var(--ease) both}
.stat:nth-child(2){animation-delay:.06s}.stat:nth-child(3){animation-delay:.12s}.stat:nth-child(4){animation-delay:.18s}.stat:nth-child(5){animation-delay:.24s}

/* search: animated border + typing placeholder */
.search label{position:relative}
.search label::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; pointer-events:none; opacity:.55;
  background:conic-gradient(from var(--ang),transparent 0 60%,var(--c1),var(--c2),var(--c3),transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:spinang 5s linear infinite}
.search label:focus-within::before{opacity:1}
input:focus,select:focus,textarea:focus{animation:focusglow 2.4s ease-in-out infinite}
@keyframes focusglow{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--c2) 14%,transparent)}}

/* splash intro (once per visit) */
#splash{position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--bg); animation:splashout 1.5s var(--ease) forwards; pointer-events:none}
#splash .in{display:flex; align-items:center; gap:14px}
#splash .mark{width:58px; height:58px; border-radius:18px; animation:splashmark 1.1s var(--ease) both, spinang 2s linear infinite}
#splash b{font-family:Unbounded,sans-serif; font-weight:700; font-size:2.3rem; letter-spacing:-.04em; display:flex}
#splash b span{display:inline-block; animation:letterin .7s var(--ease) both; animation-delay:calc(var(--i)*55ms + .25s)}

/* gentle version when "Reduce motion" is on: colours and light keep moving, big movements stop */
@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
  .orbs i{animation:orbglow 7s ease-in-out infinite alternate!important}
  .hero h1 .w{transform:none!important}
  .scene{animation-name:fadein!important}
  @keyframes fadein{from{opacity:0}to{opacity:1}}
  .rv{transform:none!important}
  .pages i{animation:none} .chat .orb{animation:hue 12s linear infinite}
  .track{animation-duration:150s}
  .mark{animation:spinang 5s linear infinite} .ptitle .ic{animation:spinang 6s linear infinite}
  .glow{display:none}
}

/* ===================== v11 · logo ===================== */
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes ringglow{0%,100%{box-shadow:0 0 10px -2px var(--c2),0 0 0 0 transparent}50%{box-shadow:0 0 18px 1px var(--c1),0 0 26px 2px color-mix(in srgb,var(--c3) 45%,transparent)}}
@keyframes ringtilt{0%,100%{transform:rotateY(0) rotateX(0)}25%{transform:rotateY(28deg) rotateX(8deg)}75%{transform:rotateY(-28deg) rotateX(-8deg)}}
@keyframes lettercolor2{0%,100%{color:var(--ink)}25%{color:var(--c1)}50%{color:var(--c2)}75%{color:var(--c3)}}
.brand{gap:11px; perspective:300px}
.mark{width:32px!important; height:32px!important; border-radius:50%!important; overflow:visible!important; flex:none;
  border:6px solid transparent; box-sizing:border-box;
  background:linear-gradient(var(--bg),var(--bg)) padding-box, conic-gradient(from var(--ang),#5CE1E6,#9B7BFF,#FF7EB6,#FFC857,#5CE1E6) border-box!important;
  animation:spinang 2.4s linear infinite, ringglow 3s ease-in-out infinite, ringtilt 6s ease-in-out infinite!important}
.mark::after{content:""!important; position:absolute; inset:-6px!important; border-radius:50%; transform:none;
  background:radial-gradient(circle at 50% 3px,#fff 0 2.6px,transparent 3.6px)!important; animation:orbit 1.8s linear infinite!important; filter:drop-shadow(0 0 3px #fff)}
.brand b{font-family:Manrope,system-ui,sans-serif!important; font-weight:800!important; font-size:1.32rem!important; letter-spacing:-.015em!important; line-height:1}
.brand b .l{animation:letterin .8s var(--ease) both, lettercolor2 4.5s linear infinite!important; animation-delay:calc(var(--i)*70ms + .1s), calc(var(--i)*-.35s)!important}
.brand:hover b .l{animation:letterhop .6s var(--ease), lettercolor2 4.5s linear infinite!important; animation-delay:calc(var(--i)*45ms), calc(var(--i)*-.35s)!important}
#splash .mark{width:64px!important; height:64px!important; border-width:11px!important; animation:splashmark 1.1s var(--ease) both, spinang 1.6s linear infinite, ringglow 2s ease-in-out infinite!important}
#splash .mark::after{inset:-11px!important; background:radial-gradient(circle at 50% 5px,#fff 0 4.5px,transparent 6px)!important}
#splash b{font-family:Manrope,system-ui,sans-serif!important; font-weight:800!important; font-size:2.4rem!important; letter-spacing:-.015em!important}
#splash b span{animation:letterin .7s var(--ease) both, lettercolor2 3s linear infinite!important; animation-delay:calc(var(--i)*55ms + .25s), calc(var(--i)*-.3s)!important}
.fbrand .mark{width:38px!important; height:38px!important; border-width:7px}
@media (prefers-reduced-motion:reduce){ .mark{animation:spinang 2.4s linear infinite, ringglow 3s ease-in-out infinite!important} }