:root{
  --ink:#0a0a0c; --paper:#fdfdff; --mute:#6c6884; --soft:#8c86a8;
  --cyan:#7fdcff; --cyan2:#4cc3ef; --lav:#c7a6ff; --orchid:#d18bf7; --pink:#eed3f7;
  --line:#e4d9ff; --line2:#d8c8ff;
  --disp:'Fredoka',system-ui,sans-serif; --sans:'Manrope',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --glow:linear-gradient(135deg,var(--cyan),var(--lav) 55%,var(--pink));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:1280px;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden;position:relative;-webkit-font-smoothing:antialiased}
main,.foot{position:relative;z-index:1}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
.mono{font-family:var(--mono);color:var(--soft)}
.kicker{font:500 12px/1 var(--mono);letter-spacing:.2em;color:var(--soft);margin:0 0 18px;text-transform:uppercase}
.h2{font:600 58px/1.04 var(--disp);letter-spacing:-.01em;margin:0 0 22px}
.center{text-align:center}
.lead{font:500 18px/1.65 var(--sans);color:var(--mute);margin:0;max-width:520px}
.lead.center{margin:0 auto}

/* ---------- page ribbon ---------- */
.page-ribbon{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:0;overflow:visible}
.page-ribbon path{fill:none;stroke-linecap:round}
.rib-soft{stroke:url(#ribG);stroke-width:90;opacity:.13}
.rib-core{stroke:url(#ribG);stroke-width:20;opacity:.5}
.rib-hi{stroke:#fff;stroke-width:3;opacity:.75}

/* ---------- the cat (blank head + live eyes) ---------- */
@property --blk{syntax:'<number>';inherits:true;initial-value:1}
@property --lid{syntax:'<number>';inherits:true;initial-value:1}
.cat{position:relative;container-type:inline-size;--e1:37.39%;--e2:62.65%;--ey:58.25%;--ew:9.95%;--ea:.45;--lid:1;animation:blink 6.4s var(--bd,0s) infinite;transition:--lid .35s ease;user-select:none}
.cat-in{position:relative}
.cat-in>img{display:block;width:100%;height:auto;pointer-events:none}
.eyes{position:absolute;inset:0;pointer-events:none}
.eye{position:absolute;top:var(--ey);width:var(--ew);aspect-ratio:var(--ea);background:#fff;border-radius:999px;
  translate:calc(-50% + var(--gx,0) * 42%) calc(-50% + var(--gy,0) * 15%);
  transform:scale(var(--sx,1),calc(var(--lid) * var(--blk)));transition:translate .3s cubic-bezier(.2,.8,.3,1)}
.eye.e1{left:var(--e1)}.eye.e2{left:var(--e2)}
@keyframes blink{0%,94%,100%{--blk:1}97%{--blk:.07}}
.cat.blink-now{animation:blinkOnce .32s}
@keyframes blinkOnce{50%{--blk:.07}}
.cat.focus{--lid:.5}
.cat.content{--lid:.32;--sx:1.08}
.cat.wide{--lid:1.12;--sx:1.08}
.cat.sleep{--lid:.1;--sx:1.25;animation:none}
.cat[data-mood=focus]{--lid:.5}
.cat[data-mood=wide]{--lid:1.14;--sx:1.1}
.cat[data-mood=sleep]{--lid:.1;--sx:1.25}
.cat[data-mood=content]{--lid:.32;--sx:1.08}

/* full-body stand-in: head + body + paws + tail */
.oren{position:absolute;width:var(--w);height:calc(var(--w) * 1.18)}
.oren>.cat{position:absolute;left:0;top:0;width:100%;z-index:3}
.o-body{position:absolute;z-index:1;left:19%;top:calc(var(--w) * .5);width:62%;height:calc(var(--w) * .6);border-radius:46% 46% 40% 40%;border:calc(var(--w) * .04) solid transparent;background:linear-gradient(var(--ink),var(--ink)) padding-box,var(--glow) border-box}
.o-paw{position:absolute;z-index:2;top:calc(var(--w) * 1.02);width:20%;height:calc(var(--w) * .13);border-radius:50%;background:var(--ink);border:calc(var(--w) * .025) solid #d4c3ff}
.o-paw.l{left:25%}.o-paw.r{left:55%}
.o-paw.up{top:calc(var(--w) * .62);z-index:4}
.o-paw.r.up{left:80%;rotate:-28deg;animation:pawBob 2.6s ease-in-out infinite}
.o-paw.l.up{left:0;rotate:28deg;animation:pawBob 2.6s ease-in-out infinite}
@keyframes pawBob{50%{translate:0 -8px}}
.o-tail{position:absolute;z-index:0;right:-30%;top:calc(var(--w) * .5);width:calc(var(--w) * .55);height:calc(var(--w) * .55);fill:none;stroke:var(--ink);stroke-width:10;stroke-linecap:round;filter:drop-shadow(0 0 2px #c7a6ff) drop-shadow(0 0 1px #7fdcff);transform-origin:10% 90%;animation:tail 4s ease-in-out infinite}
@keyframes tail{50%{rotate:-8deg}}
.oren.reach .o-paw.l{left:-6%;top:calc(var(--w) * .52);rotate:40deg;z-index:4;animation:reach 3.2s ease-in-out infinite}
@keyframes reach{0%,100%{translate:0 0}50%{translate:-14px -16px}}
.oren.hover .o-paw.r.up{left:86%;top:calc(var(--w) * .7);rotate:-60deg}
.oren.lie{height:calc(var(--w) * .95)}
.oren.lie>.cat{rotate:-7deg}
.oren.lie .o-body{left:52%;top:calc(var(--w) * .3);width:125%;height:calc(var(--w) * .46);border-radius:50% 45% 45% 50%}
.oren.lie .o-paw.l{left:10%;top:calc(var(--w) * .66)}.oren.lie .o-paw.r{left:34%;top:calc(var(--w) * .68)}
.oren.lie .o-tail{right:-118%;top:calc(var(--w) * .36);rotate:70deg;animation:none}
.oren.stretch .o-body{rotate:-14deg;transform-origin:0 50%;top:calc(var(--w) * .42)}
.oren.stretch .o-paw.l{left:-18%;top:calc(var(--w) * .7)}.oren.stretch .o-paw.r{left:0}
.oren.stretch .o-tail{right:-130%;top:calc(var(--w) * -.12);rotate:-30deg}
.oren.leap{rotate:-14deg;animation:leap 3s ease-in-out infinite}
.oren.leap .o-paw.l{left:84%;top:calc(var(--w) * .55);rotate:-40deg}.oren.leap .o-paw.r{left:76%;top:calc(var(--w) * .82)}
.oren.leap .o-tail{display:none}
@keyframes leap{50%{translate:10px -12px}}
.oren.crouch .o-body{top:calc(var(--w) * .46);height:calc(var(--w) * .46);width:80%;left:10%}
.oren.crouch .o-paw.l{left:56%;top:calc(var(--w) * .86)}.oren.crouch .o-paw.r{left:74%;top:calc(var(--w) * .86)}
.lens{position:absolute;z-index:5;right:-46%;top:calc(var(--w) * .08);width:calc(var(--w) * .62);aspect-ratio:1;border-radius:50%;border:calc(var(--w) * .05) solid var(--ink);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(199,166,255,.18) 40%,rgba(127,220,255,.12));box-shadow:0 0 0 3px #d8c8ff;animation:pawBob 3s ease-in-out infinite}
.lens::after{content:'';position:absolute;left:-36%;bottom:-36%;width:46%;height:16%;background:var(--ink);border-radius:9px;rotate:-45deg;transform-origin:100% 50%}

/* ---------- windows ---------- */
.win{background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px rgba(120,96,210,.14),0 2px 0 rgba(255,255,255,.9) inset}
.win-bar{height:36px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid #efe8ff}
.win-bar>i{width:9px;height:9px;border-radius:50%;background:var(--cyan)}
.win-bar>i:nth-child(2){background:var(--lav)}.win-bar>i:nth-child(3){background:var(--pink)}
.win-bar span{font:500 11px/1 var(--mono);color:var(--soft);margin-left:8px;letter-spacing:.04em}
.win-bar em{margin-left:auto;font:600 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:#9b8fd0;background:#f3eeff;border-radius:999px;padding:5px 9px}
.win-bar em.sample{background:#fff1dc;color:#b07a2a}
.win-body{padding:14px 16px}
.win.mini{position:absolute;border-radius:12px}
.win.mini .win-bar{height:22px;padding:0 9px;gap:4px}.win.mini .win-bar>i{width:6px;height:6px}
.win.mini .win-body{padding:9px 10px}
.lines i{display:block;height:6px;border-radius:4px;background:#e8e2f7;margin:5px 0}
.mc{width:100%;height:48px;display:block}
.wl{display:flex;align-items:center;gap:9px;font:500 12.5px/1 var(--mono);color:#4b4763;padding:8px 0;border-bottom:1px dashed #eee8fb}
.wl:last-child{border:0}
.wl>i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.wl .bar{margin-left:auto;width:70px;height:6px;border-radius:4px;background:#efeafb;position:relative;overflow:hidden}
.wl .bar::after{content:'';position:absolute;inset:0;width:var(--v);border-radius:4px;background:var(--glow)}
.wl.s{padding:5px 0}.wl.s .bar{width:100%}
.cl{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.4s .9s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- buttons / CA ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border-radius:999px;border:0;font:800 13px/1 var(--sans);letter-spacing:.12em;transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .25s,background .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active,.sq:active,.t-prompts button:active,.big-btn:active{transform:scale(.94)}
.btn-black{background:var(--ink);color:#fff;box-shadow:0 10px 28px rgba(127,220,255,.38),0 6px 22px rgba(199,166,255,.42)}
.btn-black:hover{box-shadow:0 14px 36px rgba(127,220,255,.5),0 8px 30px rgba(199,166,255,.55)}
.btn-soft{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn-soft:hover{box-shadow:inset 0 0 0 1.5px var(--lav),0 10px 26px rgba(199,166,255,.3)}
.btn.sm{height:42px;padding:0 20px;font-size:11.5px}
.sq{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line2);transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
.sq svg{width:17px;height:17px;fill:var(--ink)}
.sq.big{width:56px;height:56px;border-radius:17px}.sq.big svg{width:21px;height:21px}
.sq:hover{box-shadow:inset 0 0 0 1.5px var(--lav),0 8px 22px rgba(199,166,255,.35)}
.copy{min-width:178px}
.copy.done{background:#16131f}
.pawpop{position:absolute;right:16px;top:-14px;width:26px;height:26px;fill:var(--lav);opacity:0;transform:scale(.3) rotate(-20deg);transition:opacity .2s,transform .35s cubic-bezier(.3,1.8,.5,1);pointer-events:none}
.copy.done .pawpop{opacity:1;transform:scale(1) rotate(-12deg)}
.actions{display:flex;gap:12px;align-items:center;margin-top:18px}
.actions.center{justify-content:center}
.ca-panel{margin-top:30px;max-width:560px;background:#fff;border:1.5px solid var(--line2);border-radius:20px;padding:13px 20px 15px;box-shadow:0 12px 34px rgba(199,166,255,.16)}
.ca-label{display:block;font:600 10.5px/1 var(--mono);letter-spacing:.2em;color:#9d93c9;margin-bottom:8px}
.ca{display:block;font:600 15.5px/1.45 var(--mono);color:var(--ink);word-break:break-all}

/* ---------- nav ---------- */
.nav{position:fixed;z-index:50;top:14px;left:50%;translate:-50% 0;width:min(1360px,calc(100% - 48px));height:64px;display:flex;align-items:center;gap:30px;padding:0 12px 0 18px;border-radius:22px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 14px 40px rgba(120,96,210,.1)}
.brand{display:flex;align-items:center;gap:10px;font:700 20px/1 var(--disp);letter-spacing:.02em}
.brand img{width:44px;height:auto}
.tick{font:600 11px/1 var(--mono);color:#8e83c4;background:#f3eeff;padding:6px 9px;border-radius:999px;letter-spacing:.06em}
.links{display:flex;gap:26px;margin-left:12px}
.links a{font:600 14px/1 var(--sans);color:var(--mute);transition:color .2s}
.links a:hover{color:var(--ink)}
.nav-act{margin-left:auto;display:flex;gap:10px;align-items:center}

/* ---------- stars ---------- */
.star{position:absolute;width:26px;height:26px;fill:#d6b5ff;opacity:.85;transition:transform .35s cubic-bezier(.3,1.7,.5,1),filter .35s,opacity .3s;animation:twinkle 4.5s ease-in-out infinite}
.star.cy{fill:#86d9fb}
.star.spark{cursor:pointer;z-index:3}
.star:hover{opacity:1;transform:scale(1.45) rotate(15deg);filter:drop-shadow(0 0 10px rgba(199,166,255,.9)) brightness(1.08)}
.star.cy:hover{filter:drop-shadow(0 0 10px rgba(127,220,255,.95))}
@keyframes twinkle{50%{opacity:.5}}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;min-height:840px;max-height:980px;overflow:hidden}
.hero-ribbons{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rb path{fill:none;stroke-linecap:round;stroke-dasharray:1800;stroke-dashoffset:1800;animation:ribIn 2.6s cubic-bezier(.3,.7,.2,1) forwards}
.rb-b path{animation-delay:.25s}
.rb-a{animation:ribA 16s ease-in-out infinite alternate}
.rb-b{animation:ribB 19s ease-in-out infinite alternate}
@keyframes ribIn{to{stroke-dashoffset:0}}
@keyframes ribA{to{transform:translate(-36px,22px)}}
@keyframes ribB{to{transform:translate(30px,-20px)}}
.hero .s1{left:3%;top:15%}.hero .s2{left:42%;top:17%;width:20px;height:20px}.hero .s3{left:91%;top:60%;width:34px;height:34px}.hero .s4{left:46%;top:84%}.hero .s5{left:60%;top:11%;width:18px;height:18px}
.hero-in{position:relative;z-index:2;max-width:1360px;height:100%;margin:0 auto;padding:78px 40px 0;display:grid;grid-template-columns:600px 1fr;align-items:center;gap:30px}
.status{display:inline-flex;align-items:center;gap:10px;font:600 11.5px/1 var(--mono);letter-spacing:.2em;color:#7f78a6;background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:999px;padding:9px 15px 9px 12px;margin:0 0 22px;animation:fadeUp .8s .2s both}
.dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--cyan2)}
.dot::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--cyan2);animation:ping 1.9s infinite}
@keyframes ping{from{transform:scale(.5);opacity:1}to{transform:scale(1.6);opacity:0}}
.title{font:700 124px/.9 var(--disp);letter-spacing:-.015em;margin:0;animation:fadeUp .9s .3s both}
.ticker{display:inline-block;margin:16px 0 0;font:600 14px/1 var(--mono);letter-spacing:.12em;padding:9px 14px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--lav);animation:fadeUp .9s .4s both}
.headline{font:600 42px/1.08 var(--disp);margin:24px 0 14px;animation:fadeUp .9s .5s both;background:linear-gradient(90deg,var(--ink) 55%,#7d6ad6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy .lead{animation:fadeUp .9s .6s both}
.hero-copy .ca-panel,.hero-copy .actions{animation:fadeUp .9s .72s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}}
.hero-stage{position:relative;height:700px}
.hw{position:absolute}
.hw-chart{left:-10px;top:40px;width:280px;z-index:1}
.hw-chart .win-body{position:relative;padding:12px}
.spark-chart{display:block;width:100%;height:110px}
.chart-dot{position:absolute;right:12px;top:30px;width:10px;height:10px;border-radius:50%;background:var(--cyan2);box-shadow:0 0 0 5px rgba(127,220,255,.3);animation:ping2 1.8s infinite}
@keyframes ping2{50%{box-shadow:0 0 0 10px rgba(127,220,255,0)}}
.hw-search{right:-40px;top:-6px;width:270px;z-index:1}
.prompt{font:500 13px/1.4 var(--mono);margin:2px 0 10px;color:var(--ink)}
.sugg{font:400 12px/1.4 var(--mono);color:#a29cbf;margin:4px 0}
.caret{display:inline-block;width:7px;height:1.05em;background:var(--lav);vertical-align:-2px;margin-left:3px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.hw-watch{left:10px;bottom:84px;width:250px;z-index:4}
.hero-cat-wrap{position:absolute;left:50%;top:50%;width:500px;translate:-50% -54%;z-index:3;animation:rise 1.4s .2s cubic-bezier(.2,.8,.2,1) both}
.hero-cat-wrap>.cat{animation:blink 6.4s 3s infinite,float 7s 1.6s ease-in-out infinite}
@keyframes rise{from{opacity:0;transform:translateY(60px) scale(.94)}}
@keyframes float{50%{translate:0 -14px}}
.halo{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,rgba(199,166,255,.32),rgba(127,220,255,.16) 55%,transparent);z-index:-1;animation:haloP 7s ease-in-out infinite}
@keyframes haloP{50%{transform:scale(1.06);opacity:.8}}
.hero-cap{position:absolute;left:50%;bottom:72px;translate:-50% 0;z-index:5;margin:0;font:500 15px/1 var(--mono);background:rgba(255,255,255,.86);border:1px solid var(--line);padding:12px 18px;border-radius:14px;white-space:nowrap;box-shadow:0 10px 30px rgba(120,96,210,.12)}
.layer{opacity:0;translate:0 34px;transition:opacity .9s var(--d,0s),translate 1s var(--d,0s) cubic-bezier(.2,.8,.2,1)}
.layer.in{opacity:1;translate:0 0}

/* ---------- art swap ---------- */
.art-img{display:none}
.has-art .art-img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dw.has-art .art-img{object-fit:contain;background:#fdfdff}
.has-art .standin{display:none}
.standin{position:absolute;inset:0;overflow:hidden}

/* ---------- intro ---------- */
.intro{padding:140px 40px 120px}
.intro-in{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:900px 1fr;gap:56px;align-items:center}
.intro-art{position:relative;margin:0;aspect-ratio:2/1;border-radius:30px;border:1.5px solid var(--line);background:radial-gradient(ellipse at 60% 40%,#fff,#f6f2ff 70%,#eef6ff);box-shadow:0 40px 90px rgba(120,96,210,.14);overflow:hidden}
.si-rib{position:absolute;inset:0;width:100%;height:100%}
.intro-art .win.mini{z-index:1}
.desk{position:absolute;z-index:4;left:7%;right:7%;bottom:-10%;height:38%;border-radius:50% 50% 0 0/70% 70% 0 0;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(222,210,255,.55));border-top:2px solid #cfbdff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 -10px 40px rgba(127,220,255,.2)}
.cursor-float{position:absolute;z-index:6;left:36%;top:33%;width:30px;height:30px;fill:#fff;stroke:var(--ink);stroke-width:1.4;filter:drop-shadow(0 0 8px rgba(127,220,255,.95));animation:cur 7s ease-in-out infinite}
@keyframes cur{0%,100%{translate:0 0}25%{translate:-60px 20px}50%{translate:-20px -40px}75%{translate:40px 10px}}
.intro-art .oren{z-index:3}
.bubble{position:absolute;z-index:7;background:#fff;border:1.5px solid var(--line2);border-radius:18px;padding:10px 16px;font:600 17px/1.2 var(--disp);box-shadow:0 12px 30px rgba(120,96,210,.16);opacity:0;scale:.6;transition:opacity .4s var(--bd),scale .5s var(--bd) cubic-bezier(.3,1.7,.5,1)}
.bubble::after{content:'';position:absolute;bottom:-7px;left:22px;width:12px;height:12px;background:#fff;border-right:1.5px solid var(--line2);border-bottom:1.5px solid var(--line2);rotate:45deg}
.bubble.think{border-radius:999px}
.bubble.think::after{border:1.5px solid var(--line2);border-radius:50%;width:12px;height:12px;bottom:-16px;left:30px}
.b1{left:3%;top:5%;--bd:.3s}.b2{left:15%;top:23%;--bd:1.1s}.b3{left:53%;top:5%;--bd:1.9s}
.intro-art.in .bubble{opacity:1;scale:1;animation:bob 5s var(--bd) ease-in-out infinite}
@keyframes bob{50%{translate:0 -6px}}
.sticky{position:absolute;z-index:7;left:66%;top:69%;width:150px;padding:14px 14px 16px;background:#fff3b0;font:500 15px/1.25 var(--disp);color:#4b3f12;rotate:-5deg;box-shadow:0 10px 20px rgba(120,100,40,.18);border-radius:3px}
.sticky::before{content:'';position:absolute;left:50%;top:-8px;width:54px;height:16px;translate:-50% 0;background:rgba(199,166,255,.55);rotate:3deg}
.intro-copy{position:relative;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1.5px solid var(--line);border-radius:28px;padding:42px 38px}
.intro-copy .h2{font-size:46px}
.body{font:500 17px/1.7 var(--sans);color:var(--mute);margin:0}
.peek-slot{position:absolute;right:46px;top:-62px;width:100px;height:62px;overflow:hidden}
.peeker{width:100px;translate:0 100%;animation:peekUp 13s 4s ease-in-out infinite}
@keyframes peekUp{0%,74%,100%{translate:0 100%}80%,94%{translate:0 8%}}

/* ---------- desktop (sticky) ---------- */
.desk-sec{position:relative;height:430vh}
.desk-stage{position:sticky;top:0;height:100vh;min-height:760px;display:grid;grid-template-columns:380px 920px;gap:50px;align-items:center;justify-content:center;padding-top:70px}
.desk-copy{position:relative}
.dc{position:absolute;left:0;right:0;top:34px;opacity:0;translate:0 20px;transition:opacity .5s,translate .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.dc.on{opacity:1;translate:0 0;pointer-events:auto}
.desk-copy{height:330px}
.num{font:600 12px/1 var(--mono);color:var(--lav);letter-spacing:.14em}
.dc h3{font:600 46px/1.04 var(--disp);margin:14px 0 18px}
.cap{font:600 21px/1.35 var(--disp);color:#5b4bb7;margin:0 0 14px}
.note-s{font:500 14px/1.6 var(--sans);color:var(--soft);margin:0}
.paw-press{margin-top:6px}
.desk-dots{position:absolute;left:0;bottom:0;display:flex;gap:8px}
.desk-dots i{width:26px;height:6px;border-radius:4px;background:#ece6fb;transition:background .4s,width .4s}
.desk-dots i.on{background:var(--glow);width:46px}
.desktop{position:relative;width:920px;height:640px}
.dw{position:absolute;width:640px;opacity:.42;filter:saturate(.5) blur(1.2px);transform:scale(.9);transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s,filter .6s,box-shadow .6s;z-index:1}
.dw[data-i="0"]{left:0;top:0;transform-origin:0 0}.dw[data-i="1"]{right:0;top:26px;transform-origin:100% 0}
.dw[data-i="2"]{left:24px;bottom:0;transform-origin:0 100%}.dw[data-i="3"]{right:8px;bottom:22px;transform-origin:100% 100%}
.dw.on{opacity:1;filter:none;transform:scale(1);z-index:5;box-shadow:0 50px 110px rgba(120,96,210,.26),0 0 0 4px rgba(199,166,255,.18)}
.dw .win-body{position:relative;height:400px;padding:0;overflow:hidden;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#fff,#f7f3ff)}
.chips{margin-left:auto;display:flex;gap:6px}
.chips b{font:600 10px/1 var(--mono);color:#6b5fb5;background:#f3eeff;border-radius:999px;padding:5px 9px}
.guide{position:absolute;z-index:8;width:92px;left:520px;top:-56px;transition:left .9s cubic-bezier(.4,1.4,.5,1),top .9s cubic-bezier(.4,1.4,.5,1)}
.guide .cat{animation:blink 6.4s infinite,float 5s ease-in-out infinite}
/* research */
.note{position:absolute;width:150px;padding:12px 13px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px rgba(120,96,210,.12);transform:var(--s);transition:transform 1.1s cubic-bezier(.3,1.3,.5,1)}
.note b{display:block;font:600 13.5px/1.2 var(--disp);margin-bottom:8px}
.note i{display:block;height:5px;border-radius:3px;background:#e9e3f8;margin:5px 0}
.note.cy{background:#effaff}.note.lv{background:#f6f1ff}
.n1{left:300px;top:40px}.n2{left:466px;top:76px;transition-delay:.12s}.n3{left:340px;top:222px;transition-delay:.24s}.n4{left:486px;top:252px;transition-delay:.36s}
.dw.on .note{transform:none}
.trail{position:absolute;inset:0;width:100%;height:100%}
/* tokenized world */
.paths{position:absolute;inset:0;width:100%;height:100%}
.paths path{fill:none;stroke-width:3;stroke-dasharray:4 8;stroke-linecap:round;opacity:.8}
.city{position:absolute;left:24px;bottom:46px;display:flex;align-items:flex-end;gap:6px}
.city i{width:30px;height:var(--h);border-radius:8px 8px 3px 3px;background:var(--c,#e7edf8);background-image:repeating-linear-gradient(180deg,transparent 0 12px,rgba(255,255,255,.75) 12px 16px);border:1px solid #dfe4f2}
.city::after{content:'';position:absolute;left:-14px;right:-14px;bottom:-6px;height:6px;border-radius:4px;background:#e4dcff}
.tile{position:absolute;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;display:grid;place-items:center;border-radius:10px;background:#fff;border:1.5px solid var(--cyan);font:600 15px/1 var(--disp);color:#4aa9d6;box-shadow:0 6px 16px rgba(127,220,255,.3);offset-rotate:0deg;animation:fly 6s linear infinite}
.tile.lv{border-color:var(--lav);color:#9a78e8}.tile.pk{border-color:#eab2ea;color:#c477c4}
.t1{offset-path:path('M150 170C260 120 330 90 470 120')}
.t2{offset-path:path('M190 230C300 220 360 200 470 200');animation-delay:-2s}
.t3{offset-path:path('M120 280C260 300 360 290 470 270');animation-delay:-4s}
.t4{offset-path:path('M190 230C300 220 360 200 470 200');animation-delay:-5s}
@keyframes fly{0%{offset-distance:0%;opacity:0}10%,85%{opacity:1}100%{offset-distance:100%;opacity:0}}
.screen{position:absolute;right:26px;top:40px;width:130px;height:210px;border-radius:16px;background:rgba(255,255,255,.75);border:1.5px solid var(--line2);display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px;box-shadow:0 18px 40px rgba(120,96,210,.16)}
.screen i{border-radius:9px;background:linear-gradient(135deg,#e6f7ff,#f1e9ff);border:1px solid #e3dbfb}
.st-stocks .oren{z-index:3}
/* portfolio */
.links-svg{position:absolute;inset:0;width:100%;height:100%}
.pt{position:absolute;width:56px;height:56px;border-radius:14px;background:#fff;border:1.5px solid var(--line2);box-shadow:0 8px 18px rgba(120,96,210,.12);display:grid;place-items:center;align-content:center;gap:3px}
.pt svg{width:38px;height:18px}
.pt small{font:500 7.5px/1 var(--mono);color:var(--soft);white-space:nowrap}
.pt.sh::after{content:'';width:22px;height:22px;border-radius:50%;background:var(--c)}
.stray{animation:stray 8s ease-in-out infinite}
@keyframes stray{0%,35%,100%{translate:0 0;rotate:0deg}55%,80%{translate:46px -22px;rotate:16deg}}
/* action */
.review{position:absolute;right:26px;top:26px;width:200px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.85);border:1px solid var(--line)}
.review b{display:block;font:600 10px/1 var(--mono);letter-spacing:.18em;color:var(--soft);margin-bottom:10px}
.review p{display:flex;align-items:center;gap:8px;font:500 13px/1.2 var(--sans);margin:7px 0;color:#4b4763}
.review p i{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--line2)}
.review p i.ok{background:var(--glow);border-color:transparent}
.big-btn{position:absolute;left:250px;top:214px;width:270px;height:92px;border-radius:999px;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 26px/1 var(--disp);letter-spacing:.12em;cursor:pointer;box-shadow:0 0 0 6px rgba(255,255,255,.9),0 0 50px rgba(127,220,255,.55),0 10px 40px rgba(199,166,255,.5);transition:transform .18s cubic-bezier(.3,1.6,.5,1);animation:btnGlow 3s ease-in-out infinite}
@keyframes btnGlow{50%{box-shadow:0 0 0 6px rgba(255,255,255,.9),0 0 70px rgba(127,220,255,.75),0 10px 50px rgba(199,166,255,.65)}}
.st-action .oren{left:14%!important;top:24%!important}
.react{position:absolute;z-index:6;left:50%;bottom:22px;translate:-50% 14px;display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;font:600 13.5px/1 var(--sans);padding:12px 18px;border-radius:999px;opacity:0;visibility:hidden;transition:opacity .3s,translate .4s cubic-bezier(.3,1.6,.5,1),visibility .3s;white-space:nowrap}
.react svg{width:18px;height:18px;fill:var(--lav)}
.react.show{opacity:1;visibility:visible;translate:-50% 0}

/* ---------- ask ---------- */
.ask{padding:150px 40px 160px;background:radial-gradient(ellipse 60% 55% at 50% 62%,rgba(199,166,255,.32),rgba(127,220,255,.1) 60%,transparent)}
.ask-wrap{position:relative;width:920px;margin:190px auto 0}
.peek{position:absolute;left:50%;top:-186px;width:420px;height:192px;margin-left:-210px}
.peek .standin{overflow:visible}
.peek .art-wrap{display:none}
.peek.has-art .art-wrap{display:block;position:absolute;left:0;bottom:-2px;width:100%;aspect-ratio:1400/640;container-type:inline-size}
.peek.has-art .art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.peek.has-art .standin{display:none}
.eyes-only{position:absolute!important;inset:0}
.ask-cat{position:absolute;left:30px;top:-34px;width:260px;z-index:1}
.pk-paw{position:absolute;z-index:3;top:142px;width:62px;height:30px;border-radius:50%;background:var(--ink);border:4px solid #d4c3ff}
.pk-paw.l{left:4px}.pk-paw.r{right:4px}
.terminal{position:relative;z-index:2;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1.5px solid var(--line2);border-radius:30px;box-shadow:0 40px 100px rgba(150,110,240,.24),0 0 0 8px rgba(255,255,255,.5)}
.terminal .win-bar{height:46px;padding:0 22px}
.terminal .win-bar em.demo{background:var(--ink);color:#fff}
.t-log{min-height:250px;padding:26px 34px 10px;font:500 15px/1.6 var(--mono)}
.t-log p{margin:0 0 12px}
.t-sys{color:#a59fc4}
.t-you{color:#4b4763}.t-you::before{content:'› ';color:var(--lav)}
.t-cat{color:var(--ink)}.t-cat b{font-weight:600;color:#7a63de;margin-right:8px}
.t-prompts{display:flex;flex-wrap:wrap;gap:10px;padding:10px 34px 30px}
.t-prompts button{border:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line2);border-radius:999px;padding:13px 18px;font:600 14px/1 var(--sans);transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .2s,background .2s}
.t-prompts button:hover{background:#f6f1ff;box-shadow:inset 0 0 0 1.5px var(--lav)}
.t-prompts button[aria-pressed=true]{background:var(--ink);color:#fff}

/* ---------- gallery ---------- */
.gallery{padding:150px 40px 120px}
.g-grid{max-width:1360px;margin:56px auto 0;display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.g{position:relative;margin:0;grid-column:span 4;height:420px;border-radius:26px;overflow:hidden;border:1.5px solid var(--line);background:#fff;transition:translate .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,opacity .9s;outline:none}
.g-wide{grid-column:span 8}
.g-garden,.g-morning{grid-column:span 6;height:470px}
.g:hover,.g:focus-visible{translate:0 -6px;box-shadow:0 26px 60px rgba(150,120,230,.24),0 0 0 4px rgba(199,166,255,.28)}
.g.has-art{cursor:zoom-in}
.g figcaption{position:absolute;z-index:6;left:20px;bottom:20px;display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:12px 16px}
.g figcaption b{font:600 19px/1.1 var(--disp)}
.g figcaption span{font:500 14px/1.3 var(--sans);color:var(--mute);max-height:0;opacity:0;overflow:hidden;transition:max-height .4s,opacity .4s}
.g:hover figcaption span,.g:focus-visible figcaption span{max-height:30px;opacity:1}
.g-midnight{background:linear-gradient(160deg,#0e1230,#191744 60%,#251b4d)}
.g-midnight figcaption{background:rgba(20,20,48,.72);border-color:#38337a;color:#fff}.g-midnight figcaption span{color:#bfb6ee}
.gwin{position:absolute;border-radius:12px;background:linear-gradient(160deg,rgba(127,220,255,.28),rgba(127,220,255,.08));border:1.5px solid rgba(127,220,255,.7);box-shadow:0 0 50px rgba(127,220,255,.4)}
.gwin.lv{background:linear-gradient(160deg,rgba(199,166,255,.3),rgba(199,166,255,.08));border-color:rgba(199,166,255,.75);box-shadow:0 0 50px rgba(199,166,255,.4)}
.gwin.f,.gwin.w{background:rgba(255,255,255,.7);border:1.5px solid var(--line2);box-shadow:0 18px 40px rgba(120,96,210,.14)}
.night-win{position:absolute;right:4%;top:10%;width:11%;height:52%;border:3px solid #2c3168;border-radius:8px;background:#0b0e26}
.night-win i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff3c4;box-shadow:0 0 6px #fff3c4;animation:twinkle 3s ease-in-out infinite}
.night-win i:nth-child(1){left:20%;top:70%}.night-win i:nth-child(2){left:60%;top:76%;animation-delay:.5s}.night-win i:nth-child(3){left:40%;top:84%}.night-win i:nth-child(4){left:76%;top:64%;animation-delay:1s}.night-win i:nth-child(5){left:30%;top:20%;background:#cfe9ff}.night-win i:nth-child(6){left:70%;top:34%;animation-delay:1.4s}.night-win i:nth-child(7){left:50%;top:90%}.night-win i:nth-child(8){left:14%;top:50%}
.desk-line{position:absolute;left:0;right:0;bottom:0;height:24%;background:#111533;border-top:1px solid #2c3168}
.g-midnight .oren{z-index:2}
.g-midnight .o-body,.g-midnight .o-paw{filter:drop-shadow(0 0 10px rgba(127,220,255,.4))}
.g-cursor{background:linear-gradient(180deg,#fff,#f2f5ff)}
.trail-rib{position:absolute;inset:0;width:100%;height:100%}
.glow-cursor{position:absolute;right:12%;top:12%;width:44px;height:44px;fill:#fff;stroke:var(--ink);stroke-width:1.2;filter:drop-shadow(0 0 12px rgba(127,220,255,1));animation:pawBob 2s ease-in-out infinite}
.g-obs{background:linear-gradient(180deg,#261d5c,#4f40a0 55%,#b597f5)}
.dome{position:absolute;left:5%;right:5%;top:8%;bottom:-45%;border-radius:50% 50% 0 0;border:2px solid rgba(255,255,255,.35);background:repeating-linear-gradient(90deg,transparent 0 23%,rgba(255,255,255,.14) 23% 23.4%)}
.const{position:absolute;left:8%;top:6%;width:84%;height:70%}
.g-obs .standin::after{content:'';position:absolute;left:0;right:0;bottom:0;height:16%;background:#1b1546}
.g-obs .oren{z-index:2}
.g-obs figcaption{background:rgba(255,255,255,.88)}
.g-nap{background:linear-gradient(180deg,#f7f2ff,#e8dcff)}
.kb{position:absolute;left:7%;right:7%;bottom:9%;height:42%;padding:14px;border-radius:22px;background:#fcfbff;border:1.5px solid var(--line2);display:grid;grid-template-columns:repeat(12,1fr);gap:8px;box-shadow:0 20px 40px rgba(120,96,210,.16)}
.kb i{border-radius:8px;background:#fff;border:1px solid #e7defc;box-shadow:0 3px 0 #e2d7fb}
.g-nap .oren{z-index:2}
.zz{position:absolute;left:24%;top:12%;font:600 34px/1 var(--disp);color:var(--lav);animation:bob 3s ease-in-out infinite}
.zz small{font-size:22px;margin-left:4px}
.rest-chip{position:absolute;z-index:5;right:24px;top:22px;display:flex;align-items:center;gap:9px;font:500 13px/1 var(--mono);background:rgba(255,255,255,.88);border:1px solid var(--line2);border-radius:12px;padding:11px 14px}
.rest-chip i{width:9px;height:9px;border-radius:50%;background:var(--lav);animation:twinkle 2.4s ease-in-out infinite}
.g-garden{background:linear-gradient(180deg,#fff,#effaff)}
.plants{position:absolute;inset:0;width:100%;height:100%}
.sprout{position:absolute;left:64%;bottom:14%;width:4px;height:34px;background:#8fd9b5;border-radius:3px}
.sprout i{position:absolute;left:50%;top:-10px;width:16px;height:16px;translate:-50% 0;border-radius:50% 0;rotate:45deg;background:var(--cyan);box-shadow:0 0 22px 6px rgba(127,220,255,.65);animation:twinkle 2.6s ease-in-out infinite}
.g-morning{background:linear-gradient(115deg,#fff1dc,#fff 48%,#f6f1ff)}
.beam{position:absolute;left:-12%;top:-30%;width:26%;height:160%;rotate:24deg;background:linear-gradient(90deg,rgba(255,214,160,.5),rgba(255,214,160,0))}
.beam.b2{left:12%;width:12%;opacity:.7}
.m-desk{position:absolute;left:0;right:0;bottom:0;height:26%;background:#f5ede3;border-top:1.5px solid #ecdcc8}
.g-morning .oren{z-index:2}

/* ---------- pause ---------- */
.pause{padding:150px 40px 140px}
.pause-stage{position:relative;width:1200px;height:580px;margin:30px auto 0}
.pause-stage.has-art{height:auto;aspect-ratio:1600/1400;width:760px}
.pause-stage.has-art .art-img{position:relative;object-fit:contain;height:auto}
.big-rib{position:absolute;inset:0;width:100%;height:100%}
.pause .oren{top:31%!important}
.drift{position:absolute;inset:0;pointer-events:none}
.drift>*{position:absolute;left:var(--x);top:var(--y);font:600 34px/1 var(--disp);color:#c9b3ff;opacity:.6;animation:drift var(--t) ease-in-out infinite alternate}
.drift svg{width:22px;height:22px}
@keyframes drift{to{translate:-70px -50px;rotate:-12deg}}
.cy-spark{position:absolute;z-index:4;left:72%;top:14%;width:52px;height:52px;padding:10px;border:0;background:none;animation:orbit 10s ease-in-out infinite}
.cy-spark svg{width:100%;height:100%;fill:#5fd2fb;filter:drop-shadow(0 0 10px rgba(127,220,255,1)) drop-shadow(0 0 22px rgba(127,220,255,.7));transition:transform .3s cubic-bezier(.3,1.7,.5,1)}
.cy-spark:hover svg{transform:scale(1.35) rotate(20deg)}
@keyframes orbit{0%,100%{translate:0 0}25%{translate:-80px 30px}50%{translate:-30px 80px}75%{translate:60px 40px}}
.pause-line{text-align:center;font:600 58px/1.1 var(--disp);margin:20px 0 0}
.pause-line span{background:linear-gradient(90deg,var(--cyan2),#9a7cf0 60%,#de8fe0);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- finale ---------- */
.finale{padding:140px 0 70px}
.fin-h{padding:0 40px}
.fin-art{position:relative;max-width:1500px;margin:30px auto 10px}
.banner-cat{width:100%}
.banner-cat .cat-in>img{border-radius:0}
.fm{z-index:2;width:170px;transition:transform .8s var(--d) cubic-bezier(.6,-.3,.7,1),opacity .6s var(--d)}
.fin-art.in .fm{transform:scale(.2) translateY(30px);opacity:0}
.center-ca{margin:26px auto 0;text-align:center}

/* ---------- footer ---------- */
.foot{padding:40px 40px 60px;text-align:center;border-top:1px solid #f0eaff}
.rest{display:inline-flex;align-items:center;gap:16px}
.rest p{margin:0;font:500 15px/1 var(--mono)}
.fine{max-width:760px;margin:22px auto 0;font:500 12px/1.65 var(--sans);color:#a39fb8}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:100;display:grid;place-items:center;align-content:center;gap:16px;background:rgba(253,253,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:fadeIn .3s}
.lightbox[hidden]{display:none}
.lightbox img{max-width:90vw;max-height:80vh;border-radius:22px;box-shadow:0 40px 100px rgba(120,96,210,.3);border:1.5px solid var(--line)}
.lightbox p{margin:0;font:600 20px/1 var(--disp)}
.lb-x{position:absolute;right:30px;top:24px;width:52px;height:52px;border-radius:16px;border:0;background:var(--ink);color:#fff;font-size:28px;line-height:1}
@keyframes fadeIn{from{opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .layer{opacity:1;translate:none}
  .rb path{stroke-dashoffset:0}
  .cl{stroke-dashoffset:0}
  .bubble{opacity:1;scale:1}
  .peeker{translate:0 8%}
}