:root{--pink:#ff8fd0;--lav:#b9a4ff;--sun:#ffd400;--bt:#ffe98a;--card:rgba(34,25,40,.88);--row:rgba(56,43,64,.94);--txt:#f6e8f0;--grey:#dcdcdc;--ease:cubic-bezier(.34,1.56,.64,1);--soft:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box;margin:0;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
html{overflow-x:hidden;background:#160c35}
body{min-height:100dvh;overflow-x:hidden;background:#160c35;color:var(--txt);font-family:'Comfortaa',system-ui,sans-serif;font-weight:500;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%}
img{-webkit-user-drag:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;-webkit-user-drag:none}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.rb{background:linear-gradient(90deg,#ffb36b,#ffe98a,#8ff0cf,#8fb4ff,#d58fff,#ff8fd0,#ffb36b);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rb 6s linear infinite}
@keyframes rb{to{background-position:300% 0}}

/* яблочные эмодзи */
img.e{display:inline-block;width:1em;height:1em;vertical-align:-.14em;pointer-events:none}

/* ===== прелоадер ===== */
#pre{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:radial-gradient(ellipse at 50% 45%,#6a2a6e,#160c35 70%);transition:opacity .5s ease,transform .5s ease,visibility 0s .5s}
#pre.out{opacity:0;transform:scale(1.1);visibility:hidden;pointer-events:none}
.pface{width:clamp(120px,38vw,180px);border-radius:50%;box-shadow:0 0 0 5px #fff,0 0 0 10px var(--pink),0 12px 28px rgba(0,0,0,.5);animation:pdance 1.3s ease-in-out infinite}
@keyframes pdance{0%{transform:rotate(-14deg) scale(1,1)}25%{transform:translateY(-22px) rotate(0) scale(.92,1.1)}50%{transform:rotate(14deg) scale(1.1,.9)}75%{transform:translateY(-22px) rotate(0) scale(.92,1.1)}100%{transform:rotate(-14deg) scale(1,1)}}
.ptxt{font:400 clamp(30px,9vw,42px)/1.1 'Pacifico',cursive;display:flex}
.ptxt span{display:inline-block;color:var(--bt);animation:hop .9s ease-in-out infinite;animation-delay:calc(var(--i)*.07s)}
@keyframes hop{0%,60%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-14px) scale(1.2,.85)}}
.pbar{width:min(70vw,300px);height:20px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.pbar i{display:block;height:100%;width:0;border-radius:999px;background:repeating-linear-gradient(45deg,#ffd400 0 12px,#ff8fd0 12px 24px);background-size:34px 34px;animation:stripe .6s linear infinite}
@keyframes stripe{to{background-position:34px 0}}
.ppct{font-weight:700;font-size:20px;color:var(--bt);margin-top:-12px}

/* переход между страницами: круг расползается */
#wipe{position:fixed;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:linear-gradient(135deg,#ffd400,#ff8fd0);z-index:90;transform:scale(0);transition:transform .45s ease-in;pointer-events:none}
body.leaving #wipe{transform:scale(180)}

/* ===== смайл «верити» ===== */
.smw{position:absolute;display:block;aspect-ratio:1;filter:drop-shadow(0 5px 8px rgba(0,0,0,.45));pointer-events:none}
.sm{display:block;width:100%;height:100%;object-fit:contain;animation:roll 3.2s ease-in-out infinite}
@keyframes roll{0%,100%{transform:rotate(-14deg) scale(1,1)}50%{transform:rotate(14deg) scale(1.1,.9)}}

/* клики */
.pop{position:fixed;z-index:50;pointer-events:none;translate:-50% -50%;font-size:26px;animation:pp 1s ease-out forwards}
@keyframes pp{to{transform:translate(var(--dx),-80px) rotate(60deg) scale(1.5);opacity:0}}

/* ===== общий каркас ===== */
.col{position:relative;z-index:1;max-width:620px;margin:0 auto;padding:0 10px 36px}
.top{margin:max(10px,env(safe-area-inset-top)) 0 0;border:2px solid #8a8a8a;background:var(--grey);color:#333;display:grid;place-items:center;padding:12px 8px}
.ttl{font:400 clamp(22px,6.8vw,32px)/1.25 'Pacifico',cursive;text-align:center}
.ttl span{display:inline-block;color:hsl(calc(var(--i)*22),85%,52%);animation:letter 2.2s ease-in-out infinite;animation-delay:calc(var(--i)*.09s)}
@keyframes letter{0%,70%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-6px) rotate(-8deg)}40%{transform:translateY(2px) rotate(6deg)}}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.tab{display:block;padding:15px 8px;text-align:center;text-decoration:none;border-radius:999px;background:var(--row);font-weight:700;font-size:clamp(17px,5vw,21px);transition:transform .3s var(--ease)}
.tab:active{transform:scale(.9) rotate(-3deg)}
.tab.on{background:linear-gradient(#ff8fd0,#d85fb0);box-shadow:0 5px 0 #8e2f72;color:#fff;animation:wig 2.4s ease-in-out infinite}
@keyframes wig{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) scale(1.04)}}

/* появление: один «выскок» при загрузке */
.pin{opacity:0}
body.ready .pin{animation:pin .7s var(--ease) both;animation-delay:calc(var(--i)*.12s)}
@keyframes pin{from{opacity:0;transform:translateY(40px) scale(.7) rotate(-5deg)}to{opacity:1;transform:none}}

/* «боинг» по тапу */
.boing.go-boing{animation:boing .6s var(--ease)!important}
@keyframes boing{0%{transform:scale(1)}25%{transform:scale(1.1,.8) rotate(-2deg)}55%{transform:scale(.92,1.12) translateY(-8px) rotate(2deg)}100%{transform:scale(1)}}

/* ===== главная ===== */
.ban{position:relative;margin-top:10px;height:clamp(88px,13vh,110px);border:2px solid #0b0a1a;display:flex;align-items:center;justify-content:flex-end;padding:0 14px;overflow:hidden;background:radial-gradient(circle at 18% 60%,#1c2a63,transparent 60%),#0c1038}
.ban::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.2px 1.2px at 12px 18px,#fff,transparent),radial-gradient(1px 1px at 60px 50px,#bde,transparent),radial-gradient(1.4px 1.4px at 100px 10px,#ffd,transparent),radial-gradient(1px 1px at 30px 70px,#fff,transparent);background-size:120px 90px;animation:tw 4s ease-in-out infinite alternate}
@keyframes tw{to{opacity:.35}}
.bsm{left:12px;top:50%;translate:0 -50%;width:clamp(54px,16vw,78px)}
.ban p{position:relative;max-width:58%;text-align:right;font:italic 400 clamp(16px,4.8vw,22px)/1.15 Georgia,'Times New Roman',serif;color:#ffe34d;text-decoration:underline;animation:bw 2.4s ease-in-out infinite alternate}
@keyframes bw{to{transform:rotate(-2deg) scale(1.05)}}
.mq{margin-top:8px;overflow:hidden;border:2px solid #0b0a1a;background:#2a1450;color:var(--bt);font-size:13px;font-weight:700;padding:5px 0;white-space:nowrap}
.mq span{display:inline-block;padding-left:100%;animation:mq 24s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}

.stage{position:relative;margin-top:10px;padding:34px 0 40px;display:flex;flex-direction:column;align-items:center;gap:22px;overflow:hidden;border-radius:34px;background:radial-gradient(ellipse at 50% 50%,rgba(214,90,160,.85),rgba(120,48,120,.6) 45%,rgba(50,24,92,.35) 75%,transparent)}
.stage .s1{left:5%;top:8%;width:clamp(40px,13vw,58px)}
.stage .s2{right:5%;top:46%;width:clamp(36px,11vw,50px)}
.avw,.nick{position:relative;z-index:2}
.avw{width:min(58vw,280px);aspect-ratio:1;cursor:pointer;animation:jelly 3.6s ease-in-out infinite;filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))}
.avw.bonk{animation:spin .9s var(--ease)}
@keyframes jelly{0%,100%{transform:scale(1,1)}25%{transform:scale(1.07,.93)}50%{transform:scale(.94,1.07) translateY(-10px)}75%{transform:scale(1.04,.96)}}
@keyframes spin{0%{transform:scale(1)}30%{transform:scale(.8,1.2) rotate(-12deg)}100%{transform:scale(1) rotate(360deg)}}
.rim,.pic{position:absolute;clip-path:var(--wA)}
.rim{inset:0;background:linear-gradient(135deg,#fff,#ffc9ea 60%,#c9b8ff)}
.pic{inset:3.6%;overflow:hidden}
.pic img{width:100%;height:100%;object-fit:cover;object-position:75% 50%;display:block}
.crown{position:absolute;top:-13%;left:50%;font-size:clamp(34px,10vw,52px);transform:translateX(-50%) rotate(-12deg);animation:cw 1.8s ease-in-out infinite alternate}
@keyframes cw{from{transform:translateX(-50%) rotate(-16deg)}to{transform:translateX(-50%) rotate(12deg) translateY(-6px)}}
.nick{font:400 clamp(40px,12vw,58px)/1 'Pacifico',cursive;padding:2px 22px 12px;border:3px dashed rgba(255,255,255,.55);border-radius:28px;animation:rb 6s linear infinite,dp 2.6s ease-in-out infinite}
@keyframes dp{0%,100%{transform:rotate(-2deg) scale(1)}50%{transform:rotate(2deg) scale(1.06);border-color:#fff}}

/* приведение */
.ghostw{position:absolute;left:3%;bottom:3%;width:clamp(64px,20vw,92px);z-index:3;animation:gdrift 7s ease-in-out infinite}
.ghost{display:block;width:100%;image-rendering:pixelated;cursor:pointer;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4));animation:gbob 1.4s ease-in-out infinite}
.ghost.boo{animation:gboo .7s var(--ease)}
@keyframes gdrift{0%,100%{transform:translate(0,0)}25%{transform:translate(34px,-26px)}50%{transform:translate(8px,-48px)}75%{transform:translate(-4px,-14px)}}
@keyframes gbob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(6deg) scale(1.06,.95)}}
@keyframes gboo{0%{transform:scale(1)}30%{transform:translateY(-30px) scale(1.3,.8) scaleX(-1)}100%{transform:scale(1)}}
.gsay{position:absolute;left:60%;bottom:92%;white-space:nowrap;background:#fff;color:#3a1830;padding:6px 12px;border-radius:14px 14px 14px 2px;font-weight:700;font-size:13px;box-shadow:0 3px 0 rgba(0,0,0,.25);opacity:0;transform:scale(.4);transform-origin:0 100%;transition:opacity .15s,transform .3s var(--ease)}
.gsay.show{opacity:1;transform:scale(1)}

.card{position:relative;background:var(--card);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:34px;padding:20px 16px;margin-top:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.3)}
.card h3{display:flex;align-items:center;gap:16px;font-size:clamp(26px,7vw,32px);font-weight:700;margin-bottom:16px}
.ico{flex:none;width:64px;aspect-ratio:1;background:linear-gradient(135deg,var(--sun),var(--pink));clip-path:var(--wB);display:grid;place-items:center;font-size:30px;line-height:1}
.bio-t{color:#ead3e1;line-height:1.75;font-size:16px;margin-bottom:6px}
.rowi{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--row);margin-top:12px;font-weight:700;font-size:clamp(17px,5vw,21px)}
.rowi>b{flex:none;width:60px;aspect-ratio:1;display:grid;place-items:center;font-size:30px;line-height:1;background:linear-gradient(135deg,var(--pink),var(--lav));clip-path:var(--wB)}
.rowi small{display:block;font-size:12px;font-weight:500;color:#c9afc0;margin-top:2px}
.corner{width:64px;right:-6px;top:-26px;transform:rotate(14deg);z-index:3}
.corner.c2{right:auto;top:auto;left:-6px;bottom:-24px;transform:rotate(-12deg)}

.go{display:block;margin-top:26px;padding:20px 14px;border-radius:999px;background:linear-gradient(#ff8fd0,#d85fb0);box-shadow:0 7px 0 #8e2f72;text-align:center;text-decoration:none;font-weight:700;font-size:clamp(20px,6vw,26px);color:#fff}
.go:active{transform:translateY(6px) scale(.97);box-shadow:0 1px 0 #8e2f72}
body.ready .go{animation:pin .7s var(--ease) both,jig 2.8s ease-in-out 1.2s infinite;animation-delay:calc(var(--i)*.12s),1.4s}
@keyframes jig{0%,70%,100%{transform:none}78%{transform:rotate(-3deg) scale(1.05)}86%{transform:rotate(3deg) scale(1.05)}94%{transform:rotate(-2deg)}}
.foot{text-align:center;color:#b296a9;font-size:14px;margin-top:26px}
.foot b{color:var(--bt);font-family:monospace;letter-spacing:.1em}

/* ===== проекты ===== */
.sky{position:relative;margin-top:16px;height:104px;overflow:hidden;border-radius:30px;border:2px solid #0b0a1a;background:radial-gradient(circle at 20% 60%,#1c2a63,transparent 60%),#0c1038}
.sky::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.4px 1.4px at 12px 18px,#fff,transparent),radial-gradient(1px 1px at 60px 50px,#bde,transparent),radial-gradient(1.6px 1.6px at 100px 10px,#ffd,transparent),radial-gradient(1px 1px at 30px 80px,#fff,transparent);background-size:110px 100px;animation:tw 1.6s ease-in-out infinite alternate}
.sky img{position:absolute;top:50%;left:-70%;width:min(62%,260px);margin-top:-27px;image-rendering:pixelated;animation:cross 5.5s linear infinite,nbob .5s ease-in-out infinite alternate}
@keyframes cross{to{left:112%}}
@keyframes nbob{from{translate:0 -9px}to{translate:0 9px}}
.pj{display:block;text-decoration:none;color:inherit;background:var(--row);border:1px solid #3d3540;border-radius:30px;padding:18px;margin-top:12px}
.pj .t{display:flex;justify-content:space-between;align-items:center}
.ar{width:54px;aspect-ratio:1;border-radius:50%;background:var(--pink);color:#2a1020;display:grid;place-items:center;font-size:26px;font-weight:700}
.pj h4{font-size:26px;margin:14px 0 6px}
.pj p{color:#d3b9ca;line-height:1.5;font-size:15px}
.tg{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tg span{padding:6px 14px;border-radius:999px;background:rgba(32,24,38,.9);color:var(--pink);font-weight:700;font-size:13px}
.soc{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.soc a{display:grid;justify-items:center;gap:8px;text-decoration:none;color:var(--txt);font-size:14px;font-weight:700}
.soc i{width:min(84px,100%);aspect-ratio:1;background:linear-gradient(135deg,var(--pink),var(--lav));clip-path:var(--wB);display:grid;place-items:center;color:#3a1830}
.soc svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* летящий нян-кет по тапу на аватарку */
.nyan-fly{position:fixed;left:0;width:min(72vw,380px);z-index:40;pointer-events:none;image-rendering:pixelated;animation:fly 3.2s linear forwards}
@keyframes fly{from{transform:translateX(-105%)}to{transform:translateX(100vw)}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.pin{opacity:1}}