*{box-sizing:border-box} :root{--ink:#39485b;--blue:#dce9f5;--paper:#f7fbff;--pink:#f4d7e2;--line:#a8bdcf;--purple:#9279bb}
html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:"Nunito",sans-serif;font-size:13px;background:#e9def8;min-height:100vh}
.sky{position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse at 14% 18%,rgba(255,255,255,.82),transparent 35%),radial-gradient(ellipse at 82% 24%,rgba(255,224,240,.82),transparent 36%),radial-gradient(ellipse at 74% 82%,rgba(193,177,238,.72),transparent 38%),linear-gradient(135deg,#e8def9 0%,#f8e5f0 52%,#d8d4f2 100%)}
.sky:after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.9) 1px,transparent 1.6px),radial-gradient(circle,rgba(164,132,206,.58) 1px,transparent 1.7px),radial-gradient(circle,rgba(255,255,255,.72) 1.4px,transparent 2px);background-size:97px 113px,151px 137px,223px 191px;background-position:12px 17px,54px 73px,109px 31px;opacity:.64;pointer-events:none}
.site-shell{max-width:1120px;margin:22px auto;padding:14px;background:rgba(246,250,255,.85);border:2px dotted white;box-shadow:0 0 0 1px #9fb6ca,0 10px 40px #42627a38;position:relative}
.topline{height:64px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px dashed #a9bfd0;margin-bottom:12px;font-family:"DotGothic16",sans-serif;font-size:12px;letter-spacing:.5px}.topline p{background:#f4f8fc;padding:8px 16px;border-radius:30px;border:1px dotted #aabed0}.mascot{position:absolute;left:12px;top:-6px;font-size:28px;color:#bc8eab;transform:rotate(-9deg)}.sparkle{position:absolute;right:16px;font-size:24px;color:#b59d67}
.layout{display:grid;grid-template-columns:220px minmax(320px,1fr) 220px;gap:12px;align-items:start}.left-column,.right-column,.center-column{display:flex;flex-direction:column;gap:12px}
.panel,.card{border:1px solid #b4c7d8;outline:1px dotted rgba(255,255,255,.95);box-shadow:0 2px 0 #b5c9d9;background:rgba(250,252,255,.93);padding:12px;border-radius:4px}
.panel{background:rgba(231,240,249,.94)}.panel h2{font-family:"DotGothic16",sans-serif;font-size:12px;font-weight:400;margin:-2px -3px 10px;padding:5px 7px;border-bottom:1px dotted #a7bdcf;background:linear-gradient(90deg,#d8e6f2,#edf4fa);display:flex;justify-content:space-between;align-items:center}.panel h2 span{color:#a6b85c}.profile-row{display:flex;gap:10px;align-items:center}.avatar{width:65px;height:65px;border-radius:9px;background:linear-gradient(140deg,#e8d7ef,#d2e7f6);border:2px solid white;box-shadow:0 0 0 1px #b7c5d7;display:grid;place-content:center;text-align:center;font-size:25px;font-weight:800;color:#8e80ae}.avatar small{font-size:10px}.profile-row p{margin:3px 0;font-size:11px}.tiny{font-size:10px;color:#7b8a9b}.pill-row{display:flex;gap:4px;flex-wrap:wrap;margin-top:10px}.pill-row span{font-size:10px;background:#f8e9ef;border:1px solid #e2c7d5;border-radius:12px;padding:3px 7px}
.calendar-head{display:flex;justify-content:space-between;align-items:center;font-size:10px;margin-bottom:7px}.calendar-head button{border:1px solid #b5c9d9;background:#f7fbff;color:#667b90;border-radius:4px;cursor:pointer}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:10px}.calendar-grid span{padding:4px 0;background:#f9fcff;border:1px solid #d1deea;border-radius:3px}.calendar-grid .weekday{background:#d9e6f2;font-weight:800}.calendar-grid .today{background:#f4dce7;border-color:#d9a9c0;font-weight:800}
.interest-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.interest-grid span{background:#f9fbfe;border:1px dashed #c2d2df;padding:6px 4px;text-align:center;font-size:10px}.note p{line-height:1.6;margin-bottom:2px}
.center-column{gap:12px}.welcome{text-align:center;background:rgba(225,237,248,.95);padding:22px 24px;position:relative}.welcome h1{font-family:"DotGothic16",sans-serif;font-weight:400;font-size:20px;margin:3px 0 14px;color:#7e8fa6;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:5px}.welcome p{line-height:1.8;max-width:560px;margin:8px auto}.sticker{position:absolute;top:10px;left:12px;color:#d6a6bf;font-size:20px}.signature{font-family:"DotGothic16",sans-serif;font-size:12px;margin:14px 0;color:#8b7ba9}.signature span{color:#b6a06b}.follow-button{display:inline-block;text-decoration:none;background:#f9fbfe;border:1px solid #aabed0;border-radius:18px;padding:7px 15px;color:#526d83;box-shadow:0 2px 0 #c3d1df}.section-heading{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 12px}.section-heading h2{font-family:"DotGothic16",sans-serif;font-weight:400;font-size:14px;margin:0;color:#7e8fa6}.section-heading span{color:#c99bb4}.about p{line-height:1.75;margin:0 0 12px}.about-facts{display:grid;grid-template-columns:1fr 1fr;gap:7px}.about-facts div{background:#f7fafe;border:1px dashed #c1d1df;padding:9px;border-radius:3px}.about-facts small{display:block;color:#8b9caf;margin-bottom:4px}.about-facts strong{font-size:11px;font-weight:700}.project{display:flex;gap:10px;padding:10px 0;border-top:1px dashed #c2d1df}.project:first-of-type{border-top:0}.project-icon{flex:0 0 37px;height:37px;display:grid;place-items:center;background:#f4e4ec;border:1px solid #e2c5d5;border-radius:7px;color:#8b759f;font-size:19px}.project h3{margin:0 0 4px;font-size:12px}.project p{margin:0;font-size:11px;line-height:1.5;color:#718297}.status{font-size:9px;font-weight:600;background:#e4efd9;color:#6e8b58;border-radius:10px;padding:3px 6px;white-space:nowrap}.updates ul{list-style:none;padding:0;margin:0}.updates li{padding:8px 0;border-bottom:1px dashed #c1d0df;line-height:1.6}.updates li:last-child{border:0}.updates time{font-family:"DotGothic16",sans-serif;color:#a07d9a;font-size:10px;margin-right:8px}
nav{display:flex;flex-direction:column;gap:6px}nav a,.links-list a{color:#536b80;text-decoration:none;border-bottom:1px dotted #b4c5d5;padding:2px 0}nav a:hover,.links-list a:hover{color:#a16f9a;padding-left:4px}.stats p{margin:6px 0;font-size:10px;color:#7c8da0}.stats b{color:#5f7488}.online-dot{display:inline-block;width:7px;height:7px;background:#9dbf85;border-radius:50%}.links-list{display:flex;flex-direction:column;gap:6px}.music-screen{background:linear-gradient(135deg,#d7e7f3,#f4e4ed);border:1px solid #c1d1df;text-align:center;padding:12px 6px}.music-screen span{font-size:26px;color:#8d7ca8}.music-screen p{margin:4px 0;font-size:11px}.music-controls{display:flex;justify-content:center;gap:10px;margin-top:8px}.music-controls button,.guestbook button{border:1px solid #aebfd0;background:#f8fbff;border-radius:5px;padding:5px 10px;color:#647a8e;cursor:pointer}.guestbook label{display:block;font-size:10px;margin:7px 0 3px}.guestbook input,.guestbook textarea{width:100%;border:1px solid #bdcddd;background:#fbfdff;padding:7px;border-radius:4px;font:inherit;font-size:11px;color:var(--ink)}.guestbook textarea{resize:vertical;min-height:55px}.guestbook button{margin-top:8px;width:100%}footer{text-align:center;font-family:"DotGothic16",sans-serif;font-size:11px;color:#71849a;padding:18px 0 5px}footer span{color:#c09bb4;margin:0 5px}
@media(max-width:850px){.site-shell{margin:10px;padding:10px}.layout{grid-template-columns:190px minmax(0,1fr)}.right-column{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.center-column{grid-column:2;grid-row:1}.left-column{grid-column:1;grid-row:1}.guestbook{grid-column:span 2}}
@media(max-width:600px){.site-shell{margin:0;padding:8px;border:0}.topline{height:58px}.topline p{font-size:10px;margin-left:25px;margin-right:20px}.mascot{font-size:20px;left:0}.sparkle{font-size:18px;right:0}.layout{display:flex;flex-direction:column}.center-column{order:0;width:100%}.left-column{order:1;width:100%;display:grid;grid-template-columns:1fr 1fr}.right-column{order:2;width:100%;display:grid;grid-template-columns:1fr 1fr}.panel,.card{padding:10px}.welcome{padding:20px 14px}.welcome h1{font-size:17px}.about-facts{grid-template-columns:1fr}.guestbook{grid-column:span 2}footer{font-size:9px}}


/* dreamy motion, lilac glow and lightweight cursor sparkles */
:root{--purple:#9c78d7;--lilac:#d9c7ff;--glow:rgba(159,117,220,.35)}
body{cursor:default;overflow-x:hidden}
.sky{filter:saturate(.9);animation:skyBreath 18s ease-in-out infinite alternate}
.sky:after{background:linear-gradient(135deg,rgba(224,207,255,.28),rgba(202,222,246,.18),rgba(250,215,235,.22))}
.site-shell{animation:siteArrive .85s cubic-bezier(.2,.8,.2,1) both;border-color:rgba(255,255,255,.85);box-shadow:0 0 0 1px #b9a7d5,0 10px 40px #644d8540,0 0 34px rgba(169,130,225,.16)}
.panel,.card{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.panel:hover,.card:hover{transform:translateY(-2px);border-color:#b6a0dc;box-shadow:0 5px 0 #cbbbe0,0 8px 22px rgba(132,98,177,.13)}
.topline p,.follow-button,.pill-row span,.project-icon{transition:transform .25s ease,box-shadow .25s ease}
.follow-button:hover{transform:translateY(-2px);box-shadow:0 4px 0 #c3d1df,0 0 16px var(--glow)}
nav a,.links-list a{transition:color .2s ease,padding-left .2s ease,text-shadow .2s ease}
nav a:hover,.links-list a:hover{text-shadow:0 0 10px rgba(156,120,215,.42)}
.sticker,.sparkle{animation:floaty 4s ease-in-out infinite}
.sparkle{animation-delay:-1.5s}
.music-caption{display:flex;align-items:center;gap:10px;padding:4px 0 10px}
.music-caption strong{font-size:11px;color:#6c5b88}
.music-caption p{margin:3px 0 0}
.music-orb{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;font-size:19px;color:#fff;background:linear-gradient(145deg,#c7a8f4,#9472ce);box-shadow:0 0 0 4px rgba(197,170,239,.22),0 0 18px rgba(156,120,215,.35);animation:orbPulse 2.8s ease-in-out infinite}
.spotify-frame{overflow:hidden;border-radius:12px;box-shadow:0 4px 18px rgba(107,79,150,.13);background:#18131f}
.spotify-frame iframe{display:block;border:0;border-radius:12px;max-width:100%}
.particle-layer{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.particle{position:absolute;left:var(--x);top:105%;color:var(--tone);font-size:var(--size);opacity:0;text-shadow:0 0 10px currentColor;animation:particleRise var(--duration) linear var(--delay) infinite}
.heart-particle{z-index:1;font-weight:800;text-shadow:0 0 6px #fff,0 0 16px currentColor;animation-name:heartRise}
body:not(.heart-motion-enabled) .heart-particle{display:none}
.heart-motion-toggle{margin:9px 0 0 7px;border:1px solid #c7afd8;border-radius:18px;padding:7px 12px;background:#fbf7ff;color:#80669e;font:inherit;font-size:11px;cursor:pointer;box-shadow:0 2px 0 #e2d5ec}
.heart-motion-toggle:hover{background:#f5eafa}
.cursor-glow{position:fixed;left:0;top:0;width:22px;height:22px;border:1px solid rgba(174,135,235,.8);border-radius:50%;pointer-events:none;z-index:20;opacity:0;transform:translate(-50%,-50%);box-shadow:0 0 14px rgba(174,135,235,.42),inset 0 0 8px rgba(174,135,235,.18);transition:opacity .2s ease;width:20px;height:20px}
.cursor-spark{position:fixed;z-index:19;pointer-events:none;color:#a987df;font-size:12px;text-shadow:0 0 9px #c7a8f4;animation:sparkPop .65s ease-out forwards}
button,a{ -webkit-tap-highlight-color:transparent }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #a989dc;outline-offset:3px}
@keyframes siteArrive{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes skyBreath{from{transform:scale(1)}to{transform:scale(1.035)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-5px) rotate(5deg)}}
@keyframes orbPulse{0%,100%{box-shadow:0 0 0 4px rgba(197,170,239,.18),0 0 14px rgba(156,120,215,.25)}50%{box-shadow:0 0 0 7px rgba(197,170,239,.12),0 0 22px rgba(156,120,215,.4)}}
@keyframes particleRise{0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}10%{opacity:.75}85%{opacity:.65}100%{transform:translate3d(var(--drift),-115vh,0) rotate(240deg);opacity:0}}
 .project-link{display:inline-block;margin-top:8px;color:#8063aa;font-size:11px;font-weight:800;text-decoration:none}.project-link:hover{text-decoration:underline;text-underline-offset:3px}
@keyframes heartRise{0%{transform:translate3d(0,0,0) rotate(-12deg) scale(.75);opacity:0}8%{opacity:1}45%{transform:translate3d(calc(var(--drift)*.45),-48vh,0) rotate(10deg) scale(1.15);opacity:.95}88%{opacity:.9}100%{transform:translate3d(var(--drift),-115vh,0) rotate(24deg) scale(.85);opacity:0}}
@keyframes sparkPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.6)}}
@media(hover:none){.cursor-glow,.cursor-spark{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.particle-layer,.cursor-glow{display:none}}
@media(prefers-reduced-motion:reduce){body.heart-motion-enabled .particle-layer{display:block}body.heart-motion-enabled .heart-particle{animation-duration:var(--duration)!important;animation-iteration-count:infinite!important}}
.reveal-ready{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.reveal-ready.is-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal-ready{opacity:1;transform:none}}