:root{
  --bg:#12141b;
  --surface:#1b1e28;
  --text:#ece8e1;
  --text-2:#c9c5bd;
  --muted:#8b8fa0;
  --dim:#6d7182;
  --line:rgba(236,232,225,.14);
  --faint:#3a3d4a;
  --accent:#f2a7b8;
  --g-red:#ff4d7a;
  --g-cyan:#4de1ff;
  --av:196px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100svh;
  background:var(--bg);color:var(--text);
  font-family:"M PLUS Rounded 1c",system-ui,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,p,ul{margin:0}
ul{padding:0;list-style:none}

/* ---------- layout (mobile first) ---------- */
.wrap{
  position:relative;z-index:1;
  max-width:440px;margin:0 auto;min-height:100vh;min-height:100svh;
  padding:max(32px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:28px;
}
.top{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  font-family:"Unbounded",sans-serif;font-size:10px;letter-spacing:3px;color:var(--dim);
}
.top .jp{display:none}
.online{display:flex;align-items:center}
.hero{width:100%;display:flex;flex-direction:column;align-items:center;gap:28px}
.info{width:100%;display:flex;flex-direction:column;gap:28px}
.name{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
h1{font-family:"Unbounded",sans-serif;font-weight:600;font-size:30px;line-height:1.1;letter-spacing:-.3px}
.sub{font-size:14px;font-weight:500;color:var(--muted)}
.accent{color:var(--accent)}

.about{display:flex;flex-direction:column;gap:10px;padding:0 4px}
.label{display:flex;align-items:center;gap:10px;font-family:"Unbounded",sans-serif;font-weight:400;font-size:10px;letter-spacing:3px;color:var(--accent)}
.label span{width:18px;height:1px;background:var(--accent)}
.about p{font-size:15px;line-height:1.65;color:var(--text-2)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips li{padding:5px 12px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--text-2)}
.chips .muted{color:var(--muted)}

.links{display:flex;flex-direction:column;gap:10px}
.link{
  position:relative;width:100%;min-height:60px;padding:10px 18px 10px 12px;
  display:grid;grid-template-columns:40px 1fr 18px;align-items:center;gap:14px;
  text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
  animation:rise .9s cubic-bezier(.2,.8,.2,1) backwards;
  -webkit-tap-highlight-color:transparent;
}
.link:hover,.link:focus-visible{transform:translateY(-2px);border-color:var(--accent);background:rgba(255,255,255,.05);outline:none}
.link:active{transform:translateY(1px)}
.ico{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.05);color:var(--accent);display:flex;align-items:center;justify-content:center}
.ico svg,.arrow{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.arrow{width:18px;height:18px;color:var(--dim);transition:transform .25s ease,color .25s ease}
.link:hover .arrow,.link:focus-visible .arrow{transform:translateX(4px);color:var(--accent)}
.txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.txt b{font-size:15px;font-weight:700}
.txt small{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.foot{margin-top:auto;display:flex;justify-content:center;width:100%;font-size:11px;letter-spacing:4px;color:#4a4e5c}
.jpf{font-family:"Dela Gothic One",sans-serif}
.copy{display:none;letter-spacing:3px}
.vert{display:none}

/* ---------- avatar ---------- */
.avatar{position:relative;width:calc(var(--av)*1.327);height:calc(var(--av)*1.327);margin-top:8px}
.float{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;animation:float 6s ease-in-out infinite}
.ring{position:absolute;width:calc(var(--av)*1.173);height:calc(var(--av)*1.173);left:50%;top:50%;margin:calc(var(--av)*-.5865) 0 0 calc(var(--av)*-.5865);fill:none;stroke:var(--faint);stroke-width:1;overflow:visible}
.rg{opacity:0;stroke-width:1.5}
.rg1{stroke:var(--g-red);animation:r1 4s steps(1) 2s infinite}
.rg2{stroke:var(--g-cyan);animation:r2 4s steps(1) 2s infinite}
.photo{position:relative;width:var(--av);height:var(--av);border-radius:50%;overflow:hidden;background:var(--surface);border:1px solid rgba(236,232,225,.16);isolation:isolate}
.pj{position:absolute;inset:0;animation:pjolt 4s steps(1) 2s infinite}
.pimg{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
.ps1,.ps2{clip-path:inset(100% 0 0 0)}
.ps1{animation:p1 4s steps(1) 2s infinite}
.ps2{animation:p2 4s steps(1) 2s infinite}
.pbar{position:absolute;left:0;top:0;height:0;width:100%;mix-blend-mode:screen;opacity:0}
.pbar1{background:var(--g-red);animation:b1 4s steps(1) 2s infinite}
.pbar2{background:var(--g-cyan);animation:b2 4s steps(1) 2s infinite}
.scan{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);opacity:.45;pointer-events:none}

/* ---------- name glitch ---------- */
.glitch{position:relative;display:inline-block;animation:gskew 4s steps(1) infinite}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;background:var(--bg);clip-path:inset(100% 0 0 0);pointer-events:none}
.glitch::before{text-shadow:-.07em 0 var(--g-red);animation:g1 4s steps(1) infinite}
.glitch::after{text-shadow:.07em 0 var(--g-cyan);animation:g2 4s steps(1) infinite}

/* ---------- small animated bits ---------- */
.rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) backwards}
.d1{animation-delay:.05s}.d2{animation-delay:.2s}.d3{animation-delay:.35s}.d4{animation-delay:.5s}.d5{animation-delay:.65s}.d6{animation-delay:.78s}.d7{animation-delay:.9s}
.caret{display:inline-block;margin-left:2px;color:var(--accent);animation:blink 1.1s steps(1) infinite}
.pulse{position:relative;display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:ping 2s ease-out infinite}
.petals{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.petals i{position:absolute;top:0;width:var(--s);height:var(--s);background:var(--accent);border-radius:150% 0 150% 0;opacity:0;animation:fall var(--t) linear var(--d) infinite}

.toast{
  position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:10;
  transform:translate(-50%,20px);opacity:0;pointer-events:none;
  padding:10px 18px;border-radius:999px;background:var(--surface);border:1px solid var(--accent);
  font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;
  transition:opacity .25s ease,transform .25s ease;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- desktop ---------- */
@media (min-width:900px){
  :root{--av:300px}
  .wrap{max-width:1240px;padding:56px 64px 48px;gap:40px}
  .top{font-size:11px;letter-spacing:4px}
  .top .jp{display:inline}
  .hero{flex:1;flex-direction:row;justify-content:center;gap:clamp(56px,7vw,120px)}
  .avatar{flex-shrink:0;margin:0}
  .info{max-width:600px;gap:36px}
  .name{align-items:flex-start;text-align:left;gap:14px}
  h1{font-size:clamp(44px,4.4vw,60px);line-height:1.05;letter-spacing:-1px}
  .sub{font-size:18px}
  .about{padding:0;gap:12px}
  .label{font-size:11px;letter-spacing:4px;gap:12px}
  .label span{width:24px}
  .about p{font-size:18px;line-height:1.7}
  .chips li{padding:6px 14px;font-size:13px}
  .links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .link{grid-template-columns:1fr auto;grid-template-areas:"ico arrow" "txt txt";gap:18px 8px;padding:18px;border-radius:16px;min-height:0}
  .link:hover,.link:focus-visible{transform:translateY(-3px)}
  .ico{grid-area:ico;width:42px;height:42px}
  .arrow{grid-area:arrow}
  .txt{grid-area:txt}
  .txt b{font-size:16px}
  .foot{justify-content:space-between;font-size:12px;letter-spacing:3px}
  .copy{display:inline}
  .vert{display:block;position:fixed;right:40px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:"Dela Gothic One",sans-serif;font-size:15px;letter-spacing:14px;color:var(--faint);pointer-events:none}
}
@media (min-width:1200px){:root{--av:340px}}

/* ---------- keyframes ---------- */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes blink{50%{opacity:0}}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}
@keyframes fall{0%{transform:translate(0,-30px) rotate(0);opacity:0}12%{opacity:.55}100%{transform:translate(var(--dx),110vh) rotate(420deg);opacity:0}}
@keyframes g1{0%{clip-path:inset(20% 0 60% 0);transform:translate(-.1em,0)}2%{clip-path:inset(70% 0 5% 0);transform:translate(.1em,0)}4%{clip-path:inset(40% 0 42% 0);transform:translate(-.07em,0)}6%{clip-path:inset(5% 0 80% 0);transform:translate(.13em,0)}8%{clip-path:inset(58% 0 22% 0);transform:translate(-.13em,0)}10%,100%{clip-path:inset(100% 0 0 0);transform:none}}
@keyframes g2{0%{clip-path:inset(65% 0 10% 0);transform:translate(.1em,0)}2%{clip-path:inset(10% 0 72% 0);transform:translate(-.1em,0)}4%{clip-path:inset(50% 0 30% 0);transform:translate(.13em,0)}6%{clip-path:inset(80% 0 3% 0);transform:translate(-.07em,0)}8%{clip-path:inset(28% 0 55% 0);transform:translate(.07em,0)}10%,100%{clip-path:inset(100% 0 0 0);transform:none}}
@keyframes gskew{0%{transform:skewX(-6deg)}2%{transform:skewX(5deg) translateX(.03em)}4%{transform:translateX(-.05em)}6%{transform:skewX(-3deg)}8%{transform:translateX(.03em)}10%,100%{transform:none}}
@keyframes pjolt{0%{transform:translate(1.5%,0);filter:contrast(1.3) saturate(1.5)}3%{transform:translate(-1.5%,.5%)}6%{transform:translate(1%,-.5%);filter:contrast(1.2) hue-rotate(20deg)}9%,100%{transform:none;filter:none}}
@keyframes p1{0%{clip-path:inset(15% 0 70% 0);transform:translateX(-4%)}2%{clip-path:inset(55% 0 30% 0);transform:translateX(5%)}4%{clip-path:inset(30% 0 55% 0);transform:translateX(-2.5%)}6%{clip-path:inset(75% 0 8% 0);transform:translateX(3.5%)}8%{clip-path:inset(5% 0 85% 0);transform:translateX(-5%)}10%,100%{clip-path:inset(100% 0 0 0);transform:none}}
@keyframes p2{0%{clip-path:inset(62% 0 25% 0);transform:translateX(4%)}2%{clip-path:inset(8% 0 78% 0);transform:translateX(-3%)}4%{clip-path:inset(45% 0 42% 0);transform:translateX(5%)}6%{clip-path:inset(22% 0 66% 0);transform:translateX(-4%)}8%{clip-path:inset(82% 0 6% 0);transform:translateX(2.5%)}10%,100%{clip-path:inset(100% 0 0 0);transform:none}}
@keyframes b1{0%{opacity:.5;top:22%;height:5%}3%{top:61%;height:2.5%}6%{top:38%;height:7%}9%,100%{opacity:0}}
@keyframes b2{0%{opacity:.45;top:70%;height:3%}3%{top:12%;height:6%}6%{top:52%;height:2%}9%,100%{opacity:0}}
@keyframes r1{0%{opacity:.85;transform:translate(-2%,.5%)}4%{transform:translate(1.5%,-1%)}8%{transform:translate(-1%,0)}10%,100%{opacity:0;transform:none}}
@keyframes r2{0%{opacity:.85;transform:translate(2%,-.5%)}4%{transform:translate(-1.5%,1%)}8%{transform:translate(1%,0)}10%,100%{opacity:0;transform:none}}

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