:root{--bg-1:#cfe4ff;--bg-2:#94c8ff;--text:#0f1220;--muted:#596272;--glass: rgba(255,255,255,.5);--glass-strong: rgba(255,255,255,.72);--glass-card: rgba(255,255,255,.44);--border: rgba(255,255,255,.8);--accent:#49bcff;--glow-outer: rgba(73,188,255,.7);--glow-inner: rgba(73,188,255,.34);--shadow-lg: 0 22px 50px rgba(15,48,85,.18);--shadow-md: 0 12px 28px rgba(15,48,85,.14);--icon-bg:#fff;--fx-wash: rgba(255,255,255,.92);--fx-streak: rgba(73,188,255,.55);--heart-off: rgba(15,18,32,.22);--heart-on: #ff3355;--hair-color: #caa36b;--hair-highlight: #e4c79a;--hair-color-pink: #f4a8c1;--hair-highlight-pink: #ffdce6;--skin-color: #f8dede;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 40px;--radius-input: 14px;--radius-card: 26px;--fs-h2: clamp(28px, 5.5vw, 48px);--fs-subtitle: clamp(15px, 2.6vw, 19px);--ease-standard: cubic-bezier(.2, .8, .2, 1);--ease-decel: cubic-bezier(.2, .8, 0, 1);--ease-accel: cubic-bezier(.4, 0, 1, 1);--dur-fast: .16s;--dur-med: .3s;--dur-slow: .7s}:root[data-theme=dark]{--bg-1:#0a0a0a;--bg-2:#0f0f0f;--text:#f5f5f5;--muted:#aaaaaa;--glass: rgba(0,0,0,.55);--glass-strong: rgba(0,0,0,.68);--glass-card: rgba(0,0,0,.58);--border: rgba(255,255,255,.16);--accent:#ff3355;--glow-outer: rgba(255,51,85,.48);--glow-inner: rgba(255,51,85,.26);--shadow-lg: 0 22px 50px rgba(0,0,0,.4);--shadow-md: 0 12px 28px rgba(0,0,0,.34);--icon-bg:#141414;--heart-off: rgba(255,255,255,.28);--heart-on:#ff3355;--hair-color: #7a5237;--hair-highlight: #977754;--hair-color-pink: #b85c7d;--hair-highlight-pink: #d1839f;--skin-color: #5a3e44}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}a{color:inherit;text-decoration:none}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--text);background:radial-gradient(1200px 900px at 10% 12%,#f4faff,transparent 58%),radial-gradient(1100px 800px at 90% 78%,#e9f5ff,transparent 58%),linear-gradient(135deg,var(--bg-1),var(--bg-2));background-size:240% 240%;animation:gradientShift 10s ease-in-out infinite alternate}:root[data-perf=lite] body{background:linear-gradient(135deg,var(--bg-1),var(--bg-2));background-size:cover;animation:none}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(50% 50% at 20% 10%,rgba(255,255,255,.16),transparent 60%),radial-gradient(40% 40% at 80% 85%,rgba(255,255,255,.1),transparent 60%);mix-blend-mode:soft-light;opacity:.5}.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:112px 12px 64px;gap:24px}.bg-drift{position:fixed;inset:-10%;z-index:0}.bg-noise{position:fixed;inset:0;z-index:1;pointer-events:none}.bg-blobs{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;display:none!important}.nav-wrap{position:fixed;top:12px;left:0;right:0;display:flex;justify-content:center;z-index:100}.hero{position:relative;z-index:50}.bg-drift{background:radial-gradient(1100px 700px at 20% 28%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 60%),radial-gradient(900px 600px at 82% 74%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 55%);filter:blur(10px);animation:orbDrift 8s ease-in-out infinite alternate;pointer-events:none;will-change:transform}.bg-noise{background:conic-gradient(from 0deg at 30% 40%,rgba(255,255,255,.06),transparent 40%),conic-gradient(from 180deg at 70% 60%,rgba(255,255,255,.05),transparent 45%);mix-blend-mode:soft-light;opacity:.65;animation:swirlA 21s ease-in-out infinite,swirlB 34s ease-in-out infinite reverse,pulseOpacity 7s ease-in-out infinite;will-change:transform,opacity}@media (min-width: 1400px) and (min-height: 900px){:root:not([data-perf=lite]) .bg-noise{opacity:.48}:root:not([data-perf=lite]) .bg-drift{filter:blur(8px)}}@keyframes pulseOpacity{0%,to{opacity:.58}40%{opacity:.74}70%{opacity:.64}}@keyframes swirlA{0%{transform:translate3d(-1.2%,-.8%,0) rotate(0) scale(1)}50%{transform:translate3d(1.9%,1.4%,0) rotate(31deg) scale(1.04)}to{transform:translate3d(-.7%,-1%,0) rotate(0) scale(1)}}@keyframes swirlB{0%{transform:translate3d(1%,.7%,0) rotate(0) scale(1)}50%{transform:translate3d(-2%,-1.2%,0) rotate(-34deg) scale(1.05)}to{transform:translate3d(.9%,.8%,0) rotate(0) scale(1)}}:root[data-perf=lite] .bg-noise{display:none}:root[data-perf=lite] .bg-drift{display:block;background-image:url(/bg-soft.png);background-size:cover;background-position:center;animation:none;filter:blur(14px)}:root[data-theme=dark][data-perf=lite] .bg-drift{background-image:url(/bg-soft-dark.png);background-size:cover;background-position:center;animation:none;filter:blur(14px)}@keyframes hueRotateLight{0%,to{filter:hue-rotate(0deg)}50%{filter:hue-rotate(15deg)}}@keyframes hueRotateDark{0%,to{filter:hue-rotate(0deg)}50%{filter:hue-rotate(-12deg)}}:root[data-perf=lite] .blob{stroke:none;filter:none;animation:none!important}:root[data-perf=lite] body:before{display:none}@media (max-width: 420px){body:before{display:none}.bg-noise{display:none}}.blob{vector-effect:non-scaling-stroke;stroke:url(#neonStroke);stroke-width:1.6;stroke-linejoin:round;fill-opacity:.82;filter:drop-shadow(0 0 8px var(--glow-inner))}.blob-a{animation:floatA 7.5s ease-in-out infinite alternate}.blob-b{animation:floatB 6.4s ease-in-out infinite alternate}.blob-c{animation:floatC 8.6s ease-in-out infinite alternate}@keyframes floatA{0%{transform:translate3d(-3%,-1%,0) rotate(-1deg)}to{transform:translate3d(3%,1%,0) rotate(1deg)}}@keyframes floatB{0%{transform:translate3d(2%,-2%,0) rotate(.8deg)}to{transform:translate3d(-2%,2%,0) rotate(-.8deg)}}@keyframes floatC{0%{transform:translate3d(-2%,2%,0) rotate(.6deg)}to{transform:translate3d(2%,-2%,0) rotate(-.6deg)}}.nav{display:flex;gap:12px;padding:8px;border-radius:999px;background:color-mix(in srgb,var(--glass) 96%,transparent);border:1px solid var(--border);box-shadow:var(--shadow-md),inset 0 1px #ffffff73,inset 0 -1px #0000000f;position:relative;max-width:calc(100% - 16px);overflow:hidden}.nav:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 1px color-mix(in srgb,white 16%,transparent);pointer-events:none}.nav-item{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;min-width:90px;border-radius:999px;font-weight:700;letter-spacing:.2px;color:var(--text);background:linear-gradient(180deg,color-mix(in srgb,#fff 76%,transparent),color-mix(in srgb,#fff 60%,transparent));border:1px solid color-mix(in srgb,white 74%,transparent);box-shadow:0 8px 20px #0f305524,inset 0 1px #ffffff9e,inset 0 -1px #0000000f;transition:transform .14s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background-color .2s ease;flex:0 0 auto}.nav-item:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 28px var(--glow-outer),inset 0 1px #ffffffb3}:root[data-theme=dark] .nav-item.is-active{color:#0a0a0a;background:linear-gradient(180deg,#fff,#ffffffd1);box-shadow:0 16px 32px #00000057,inset 0 1px #ffffffe6}:root:not([data-theme=dark]) .nav-item.is-active{background:linear-gradient(180deg,#fff,#ffffffd1);box-shadow:0 14px 28px var(--glow-outer),inset 0 1px #ffffffe6}.login-btn{position:fixed;top:var(--space-3);right:var(--space-3);z-index:var(--z-nav)}@media (max-width: 720px){.login-btn{top:var(--space-2);right:var(--space-2)}}.hero{width:min(960px,92vw);padding:40px 26px;border-radius:26px;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--glass-card) 85%,transparent),color-mix(in srgb,var(--glass-card) 95%,transparent));border:1px solid var(--border);box-shadow:var(--shadow-lg),inset 0 1px #ffffff8c,inset 0 -1px #00000014;animation:heroIntro .6s cubic-bezier(.2,.8,.2,1) both;position:relative;contain:paint}.hero:before{content:"";position:absolute;left:6%;right:6%;top:0;height:16px;border-radius:0 0 16px 16px;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);pointer-events:none}.title{font-size:clamp(34px,6.2vw,58px);font-weight:800;letter-spacing:-.02em}.subtitle{margin-top:10px;color:var(--muted);font-size:clamp(15px,2.6vw,19px)}.controls{position:absolute;right:12px;bottom:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;max-width:min(100%,80vw)}.icon-toggle{width:36px;height:36px;border-radius:999px;border:0;display:grid;place-items:center;cursor:pointer;background:var(--icon-bg);box-shadow:0 6px 16px #00000029,inset 0 1px #ffffff80,inset 0 -1px #0000000f;transition:transform .12s ease,box-shadow .2s ease,background-color .2s ease}.icon-toggle:active{transform:translateY(1px) scale(.98)}.ico{font-size:16px;line-height:1}.perf-menu{display:inline-flex;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--glass) 100%,transparent);border:1px solid var(--border);box-shadow:0 6px 16px #0000001f}.perf-btn{appearance:none;border:0;background:transparent;padding:6px 10px;border-radius:999px;font:700 11px/1 Inter,system-ui,sans-serif;color:var(--text);cursor:pointer;white-space:nowrap}.perf-btn.is-active{background:var(--glass-strong);box-shadow:0 0 0 1px color-mix(in srgb,white 80%,transparent)}.fps{position:fixed;right:10px;bottom:10px;z-index:120;background:#0000008c;color:#fff;font:700 12px/1 Inter,system-ui,sans-serif;padding:6px 8px;border-radius:8px;box-shadow:0 6px 18px #0000004d,inset 0 0 0 1px #ffffff0f}.fps:after{content:attr(data-val) " fps"}.fx{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:0;transform:translateZ(0);will-change:transform,opacity}.fx-wash{background:radial-gradient(120vmax 120vmax at 50% 50%,var(--fx-wash),transparent 65%)}.fx-streak{background:linear-gradient(to right,transparent 0%,var(--fx-streak) 45%,var(--fx-streak) 55%,transparent 100%);filter:blur(10px);transform:translate3d(-120%,0,0) rotate(8deg);mix-blend-mode:screen}.fx-bokeh{background:radial-gradient(160px 160px at 20% 60%,rgba(255,255,255,.22),transparent 60%),radial-gradient(120px 120px at 75% 35%,rgba(255,255,255,.18),transparent 60%),radial-gradient(100px 100px at 55% 80%,rgba(255,255,255,.16),transparent 60%);mix-blend-mode:screen;filter:blur(2px);transform:translateZ(0) scale(1)}.fx-on .fx-wash{animation:fxWash .7s cubic-bezier(.2,.8,.2,1) both}.fx-on .fx-streak{animation:fxStreak .7s cubic-bezier(.2,.8,.2,1) both}.fx-on .fx-bokeh{animation:fxBokeh .7s cubic-bezier(.2,.8,.2,1) both}.fx-scene .hero,.fx-scene .nav{transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .7s ease;transform:scale(.985);filter:saturate(.98) contrast(.98)}@keyframes fxWash{0%{opacity:0;transform:scale(1.05)}15%{opacity:.85}60%{opacity:.85}to{opacity:0;transform:scale(1)}}@keyframes fxStreak{0%{opacity:0;transform:translate3d(-120%,0,0) rotate(8deg)}25%{opacity:.9}70%{opacity:.7;transform:translate3d(130%,0,0) rotate(8deg)}to{opacity:0;transform:translate3d(160%,0,0) rotate(8deg)}}@keyframes fxBokeh{0%{opacity:0;transform:translateZ(0) scale(1)}35%{opacity:.75}70%{opacity:.65;transform:translate3d(1.2%,-1.2%,0) scale(1.03)}to{opacity:0;transform:translate3d(1.6%,-1.6%,0) scale(1.04)}}.views{position:relative;width:100%;display:flex;align-items:center;justify-content:center}.page-view{width:100%;display:flex;align-items:center;justify-content:center}.page-view.enter{animation:viewIn .5s cubic-bezier(.2,.8,.2,1) both}.page-view.leave{animation:viewOut .5s cubic-bezier(.2,.8,.2,1) both}@keyframes viewIn{0%{opacity:0;transform:translateY(16px) scale(.992)}to{opacity:1;transform:none}}@keyframes viewOut{0%{opacity:1;transform:none}to{opacity:0;transform:translateY(-12px) scale(.992)}}.hero-alt .title{font-size:clamp(28px,5.5vw,48px)}.cp-topbar{margin-top:10px;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.tabs{display:inline-flex;gap:8px;padding:6px;border-radius:999px;background:color-mix(in srgb,var(--glass) 96%,transparent);border:1px solid var(--border);box-shadow:var(--shadow-md)}.tab{appearance:none;border:0;background:transparent;padding:8px 14px;border-radius:999px;font:800 12px/1 Inter,system-ui,sans-serif;color:var(--text);cursor:pointer}.tab.is-active{background:var(--glass-strong);box-shadow:inset 0 1px #fff9}.favfirst{display:inline-flex;gap:8px;align-items:center;font:700 12px/1 Inter,system-ui,sans-serif;color:var(--muted)}.favfirst input{width:14px;height:14px;accent-color:var(--accent)}.cp-compose{margin-top:16px;display:grid;gap:10px}.cp-input{width:100%;min-height:120px;resize:vertical;padding:12px 14px;border-radius:14px;outline:none;border:1px solid var(--border);background:color-mix(in srgb,var(--glass-card) 92%,transparent);color:var(--text);box-shadow:inset 0 1px #ffffff73,inset 0 -1px #0000000d}.cp-actions{display:flex;gap:10px;justify-content:flex-end}.btn{appearance:none;border:1px solid color-mix(in srgb,white 70%,transparent);background:linear-gradient(180deg,color-mix(in srgb,#fff 80%,transparent),color-mix(in srgb,#fff 66%,transparent));color:var(--text);padding:10px 14px;border-radius:999px;font-weight:800;letter-spacing:.02em;cursor:pointer;box-shadow:0 8px 16px #0000001f,inset 0 1px #fff9;transition:transform .12s ease,box-shadow .2s ease,background-color .2s ease}.btn-primary{background:linear-gradient(180deg,#fff,#ffffffd9);box-shadow:0 12px 28px var(--glow-outer),inset 0 1px #ffffffe6}.btn-ghost{background:color-mix(in srgb,var(--glass) 88%,transparent)}.btn-ghost.danger{border-color:color-mix(in srgb,#ff3355 40%,transparent)}.cp-list{margin-top:16px;display:grid;gap:10px;list-style:none}.cp-empty{color:var(--muted);padding:8px 0}.cp-item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--glass-card) 92%,transparent);border:1px solid var(--border);box-shadow:0 12px 26px #0000001a,inset 0 1px #ffffff73}.cp-item.is-fav{box-shadow:0 14px 30px var(--glow-outer),inset 0 1px #ffffff8c}.cp-text{max-height:8lh;overflow:auto;-webkit-overflow-scrolling:touch;white-space:pre-wrap;word-wrap:break-word;font-size:14px;line-height:1.45}.cp-item-actions{display:flex;gap:8px;align-items:center}.btn.icon{width:36px;height:36px;padding:0;border-radius:999px;display:grid;place-items:center;background:color-mix(in srgb,var(--glass) 88%,transparent)}.heart-svg{color:var(--heart-off);transition:color .16s ease}.heart-svg.is-on{color:var(--heart-on)}.cp-list.list-out .cp-item{animation:itemOut .22s cubic-bezier(.2,.8,.2,1) both}.cp-list.list-in .cp-item{animation:itemIn .36s cubic-bezier(.2,.8,.2,1) both}@keyframes itemOut{0%{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px) scale(.995)}}@keyframes itemIn{0%{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}@keyframes gradientShift{0%{background-position:0% 0%}to{background-position:100% 100%}}@keyframes orbDrift{0%{transform:translate3d(-7%,2.2%,0)}to{transform:translate3d(7%,-2.2%,0)}}@keyframes heroIntro{0%{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}@keyframes hueRotateLight{0%{filter:blur(14px) hue-rotate(0deg)}50%{filter:blur(14px) hue-rotate(6deg)}to{filter:blur(14px) hue-rotate(0deg)}}@keyframes hueRotateDark{0%{filter:blur(14px) hue-rotate(0deg)}50%{filter:blur(14px) hue-rotate(-6deg)}to{filter:blur(14px) hue-rotate(0deg)}}.hero-login{position:relative;max-width:420px;width:min(92vw,420px);--mascot-size: 190px;--hair-color: var(--hair-color-pink);--hair-highlight: var(--hair-highlight-pink);padding-top:calc(var(--mascot-size) / 2 + var(--space-6))}.hero-login .title{font-size:clamp(28px,5.5vw,48px)}.hero-login .subtitle{margin-top:6px;font-size:clamp(15px,2.6vw,19px);color:var(--muted)}@keyframes armWiggle{0%,to{transform:rotate(0) translate(0) translateY(0)}25%{transform:rotate(-6deg) translate(-2px) translateY(1px)}50%{transform:rotate(4deg) translate(1px) translateY(-2px)}75%{transform:rotate(-3deg) translate(-1px) translateY(1px)}}@keyframes blink{0%,88%,to{transform:scaleY(1)}92%{transform:scaleY(.15)}}@keyframes headIdle{0%,to{transform:rotate(0) translateY(0)}50%{transform:rotate(-3deg) translateY(-3px)}}.login-form{width:100%;display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-3);align-items:stretch}.input-label{font-size:14px;font-weight:600;text-align:left;color:var(--muted)}.login-input{width:100%;padding:12px 14px;border-radius:var(--radius-input);border:1px solid var(--border);background:color-mix(in srgb,var(--glass-card) 92%,transparent);color:var(--text);box-shadow:inset 0 1px #ffffff73,inset 0 -1px #0000000d;font-size:15px}.password-wrap{position:relative;display:flex;align-items:center}.password-wrap .login-input{flex:1;padding-right:44px}.show-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted);padding:4px;line-height:1}.login-submit{margin-top:var(--space-4)}.login-mascot{position:absolute;top:calc(-1 * var(--mascot-size) / 2);left:50%;transform:translate(-50%);width:var(--mascot-size);height:var(--mascot-size);margin:0;display:flex;justify-content:center;align-items:center;pointer-events:none}.mascot-hair{display:none}.mascot-head{position:relative;width:140px;height:140px;border-radius:50%;background:transparent;box-shadow:0 0 0 4px var(--border),var(--shadow-md);display:flex;justify-content:center;align-items:center;overflow:hidden}.mascot-head.expr-happy{animation:headSmile .6s var(--ease-standard)}.mascot-head.expr-shocked{animation:headShock .6s var(--ease-standard)}@keyframes headSmile{0%{transform:scale(1)}25%{transform:scale(1.05) rotate(2deg)}50%{transform:scale(1.03) rotate(-2deg)}to{transform:scale(1)}}@keyframes headShock{0%{transform:scale(1)}20%{transform:scale(1.08) rotate(-4deg)}40%{transform:scale(1.04) rotate(4deg)}to{transform:scale(1)}}.mascot-eye{position:absolute;top:42%;width:28px;height:20px;border-radius:14px 14px 12px 12px;background:var(--icon-bg);border:2px solid var(--border);display:flex;justify-content:center;align-items:center;overflow:hidden;animation:blink 5s linear infinite}.mascot-eye.left{left:35%;transform:translate(-50%,-50%)}.mascot-eye.right{right:35%;transform:translate(50%,-50%)}.mascot-pupil{width:10px;height:10px;border-radius:50%;background:var(--text);transition:transform .2s ease-out}.mascot-mouth{position:absolute;bottom:28%;left:50%;transform:translate(-50%);width:32px;height:8px;border-radius:6px;background:var(--text);transition:height var(--dur-fast) ease,width var(--dur-fast) ease,border-radius var(--dur-fast) ease}.mascot-mouth.expr-happy{width:44px;height:14px;border-radius:10px}.mascot-mouth.expr-shocked{width:18px;height:18px;border-radius:50%}.mascot-medal{position:absolute;bottom:-14px;left:50%;transform:translate(-50%);padding:4px 8px;border-radius:8px;background:var(--accent);color:var(--bg-1);font-size:10px;font-weight:700;box-shadow:0 4px 8px #00000029}.mascot-arm{position:absolute;width:70px;height:20px;border-radius:20px;background:var(--accent);top:62%;z-index:-1}.mascot-arm.left{left:0%;transform-origin:left center;animation:armWiggle 8s ease-in-out infinite}.mascot-arm.right{right:0%;transform-origin:right center}.mascot-img{width:100%;height:100%;object-fit:cover;border-radius:50%}@media (max-width: 900px){.nav{gap:10px;padding:8px}.nav-item{min-width:auto;padding:9px 12px}}@media (max-width: 720px){.page{padding:96px 10px 56px}.hero{padding:24px 16px;border-radius:22px}.controls{right:8px;bottom:8px;gap:8px;max-width:100%}.perf-btn{padding:6px 8px;font-size:10px}}@media (max-width: 480px){.controls{position:static;margin-top:14px;justify-content:center}}@media (max-width: 480px){.hero-login{--mascot-size: 140px;padding-top:calc(var(--mascot-size) / 2 + var(--space-5))}}@media (max-width: 360px){.nav{overflow-x:auto;-webkit-overflow-scrolling:touch}.nav::-webkit-scrollbar{display:none}.nav-item{min-width:84px;padding:8px 10px}}@media (prefers-reduced-motion: reduce){.nav-item,.hero{transition:none;animation:none}body,.bg-drift,.blob,.bg-noise,.fx,.page-view,.cp-list{animation:none!important}}