:root{--bg:#fffafd;--surface:#fff;--surface2:#fff5fa;--text:#18182b;--muted:#696579;--pink:#f65da4;--pink2:#ffe5f0;--purple:#7456e8;--line:#eee8f1;--shadow:0 14px 40px rgba(74,44,91,.10);color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Nunito,system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:16px}body.dark{--bg:#0d1024;--surface:#171a36;--surface2:#11142b;--text:#fff;--muted:#c7c3d2;--pink2:#34213f;--line:#ffffff0c;--shadow:0 18px 45px #0005;color-scheme:dark;background:radial-gradient(circle at 80% 28%,#4d17454a,transparent 26%),#0d1024}a{color:inherit}.nav{height:72px;position:sticky;top:0;z-index:40;display:grid;grid-template-columns:220px 1fr 220px;align-items:center;padding:0 4vw;background:#ffffffee;border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}body.dark .nav{background:#0b0f24ed}.brand{text-decoration:none;font-size:20px;font-weight:900}.nav nav{display:flex;justify-content:center;gap:4px}.nav nav a{text-decoration:none;font-size:13px;font-weight:800;padding:10px 13px;border-radius:999px}.nav nav a:first-child,.nav nav a:hover{background:linear-gradient(135deg,#ffdce9,#efdfff);color:#66345f}body.dark .nav nav a:first-child,body.dark .nav nav a:hover{background:linear-gradient(135deg,#6d315d,#382c69);color:#fff}.nav-actions{display:flex;justify-content:flex-end;gap:8px}.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface2);color:var(--text);cursor:pointer;font-size:17px}.heart{color:var(--pink)}.hamburger{display:none}
.hero{position:relative;overflow:hidden;min-height:390px;display:grid;grid-template-columns:1fr 1fr;align-items:center;color:#1a1930;background:linear-gradient(100deg,#f4eaffbb,#ffdce9a0),linear-gradient(180deg,#e9ddff,#f8d7e8)}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 68% 112%,#ee9bc7 0 8%,transparent 30%),radial-gradient(ellipse at 22% 110%,#b8a5dd 0 9%,transparent 31%),linear-gradient(165deg,transparent 63%,#bea4dc66 64% 65%,transparent 66%);pointer-events:none}.hero:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:34px 34px;opacity:.34;pointer-events:none}body.dark .hero{color:#fff;background:radial-gradient(circle at 65% 48%,#6d285d88,transparent 30%),linear-gradient(112deg,#101a4a,#281646 56%,#4b193f)}body.dark .hero:before{background:radial-gradient(ellipse at 70% 112%,#b32f7988 0 6%,transparent 28%),radial-gradient(ellipse at 25% 110%,#3d2d7a88 0 9%,transparent 31%)}.hero-copy,.hero-spotify{position:relative;z-index:2}.hero-copy{padding:55px 4vw 55px max(7vw,70px)}.hero h1{font:900 clamp(38px,4vw,58px)/1 Nunito;margin:0 0 18px}.hero h1 span{color:var(--pink);font-size:1.1em}.hero-copy p{font-size:17px;line-height:1.55;margin:0;color:#5d5870}body.dark .hero-copy p{color:#e1ddea}.hero-spotify{padding:45px max(7vw,70px) 45px 3vw}.spotify-card{max-width:520px;margin-left:auto;padding:20px 22px;border-radius:22px;background:#ffffffd9;border:1px solid #fff;box-shadow:0 20px 60px #744a7622;backdrop-filter:blur(16px)}body.dark .spotify-card{background:#171a39e8;border-color:#ffffff12;box-shadow:0 20px 60px #0005}.spotify-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.spotify-head small{font-size:12px;font-weight:900}.spotify-dot{color:#1ed760}.spotify-dot.off{color:var(--muted)}.spotify-head a{text-decoration:none;border:1px solid #d9bdd0;border-radius:999px;padding:6px 10px;font-size:10px;font-weight:900;white-space:nowrap}body.dark .spotify-head a{border-color:#704064}.spotify-main{display:grid;grid-template-columns:82px 1fr;gap:16px;align-items:center}.spotify-cover{width:82px;height:82px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#1c245d,#ef68a4);color:#fff;font-size:30px;box-shadow:0 8px 22px #0002}.spotify-cover img{width:100%;height:100%;object-fit:cover}.spotify-info{min-width:0}.spotify-info b,.spotify-info>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spotify-info b{font-size:15px}.spotify-info>span{font-size:12px;color:var(--muted);margin-top:4px}.spotify-progress{height:7px;margin-top:12px;background:#e5dfeb;border-radius:999px;overflow:hidden}body.dark .spotify-progress{background:#2a2e50}.spotify-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f5539f,#ff80bd);border-radius:inherit;transition:width .5s linear}.spotify-times{display:flex;justify-content:space-between;margin-top:5px;font-size:10px;color:var(--muted)}
.quick{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:18px 4vw;background:var(--bg)}.quick a{display:flex;align-items:center;gap:12px;min-width:0;padding:16px 18px;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.quick b{font-size:22px;color:var(--pink)}.quick span{min-width:0}.quick strong,.quick small{display:block}.quick strong{font-size:13px}.quick small{margin-top:2px;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.section{max-width:1240px;margin:auto;padding:44px 4vw}.tint{max-width:none;background:linear-gradient(180deg,#fff5fa,#fffafd)}body.dark .tint{background:#11142b}.section-title{display:flex;align-items:center;gap:12px;margin-bottom:22px}.section-title>span{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#ffd7e8,#eadfff);color:var(--pink);font-size:20px}.section-title h2{margin:0;font-size:24px}.section-title p{margin:2px 0 0;color:var(--muted);font-size:12px}.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.about-grid{display:grid;grid-template-columns:210px minmax(0,1fr) 260px;gap:18px}.about-photo{padding:16px}.polaroid{background:#fff;padding:10px 10px 15px;transform:rotate(-3deg);box-shadow:0 8px 24px #4a2c4325;color:#493b49}.fake-photo{height:190px;display:grid;place-items:center;text-align:center;border-radius:4px;background:linear-gradient(160deg,#1b245c,#6c3a91 50%,#ef6aa5);font-size:50px;color:#fff}.fake-photo span{font-size:30px}.polaroid p{text-align:center;font:18px 'Patrick Hand',cursive;margin:10px 0 0}.about-text{padding:24px}.about-text h3{margin:0 0 10px}.about-text p{color:var(--muted);line-height:1.65;margin:0 0 14px}.tags{display:flex;flex-wrap:wrap;gap:7px}.tags span{font-size:11px;padding:5px 9px;border-radius:999px;background:#ffe5f0;color:#a23b70;font-weight:800}body.dark .tags span{background:#352142;color:#f4a0c6}.now{padding:16px}.quote{height:100%;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:14px;background:linear-gradient(145deg,#ffe4f0,#f7e5ff)}body.dark .quote{background:linear-gradient(145deg,#482044,#2b2049)}.quote b{font:18px/1.35 'Patrick Hand',cursive}.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.game-card{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:20px;padding:24px;box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:inherit;transition:.2s}.game-card:hover{transform:translateY(-4px)}.game-card i{font-style:normal;font-size:38px}.game-card b{font-size:17px}.game-card small{color:var(--muted)}.game-card em{font-style:normal;background:var(--pink);color:#fff;border-radius:18px;padding:8px 36px;margin-top:7px;font-weight:900}.gallery{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}.gallery button{border:0;min-height:110px;border-radius:18px;font-size:42px;background:linear-gradient(145deg,#ffd6e8,#b7a7e8);cursor:pointer}.gallery button:nth-child(2n){background:linear-gradient(145deg,#d6ccff,#ffdbbc)}.tech-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}.tech-grid article{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 10px;text-align:center;box-shadow:var(--shadow)}.tech-grid b{display:grid;place-items:center;margin:0 auto 10px;width:46px;height:46px;border-radius:13px;background:var(--pink2);font-size:20px}.tech-grid strong,.tech-grid small{display:block}.tech-grid small{font-size:10px;color:var(--muted);margin-top:5px}.html{color:#e44d26}.css{color:#1572b6}.js{color:#111;background:#f7df1e!important}.contact{max-width:none;display:flex;justify-content:space-between;align-items:center;padding-left:7vw;padding-right:7vw;background:linear-gradient(110deg,#281f50,#6c285d);color:#fff}.contact h2{margin:0}.contact p{color:#ddd5e6}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:12px 22px;text-decoration:none;font-weight:900;cursor:pointer}.primary{background:linear-gradient(135deg,#f65da4,#ff82b9);color:#fff;box-shadow:0 8px 24px #f65da444}footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px 6vw;background:#090c1c;color:#eee8f2}footer span{font-size:12px;color:#bdb7c8}footer>a{justify-self:end;text-decoration:none;color:#fff}.dev-credit{font-style:normal;margin-left:10px;color:#ff9ac4;font-weight:900}
.modal,.surprise{position:fixed;inset:0;z-index:70;display:none;place-items:center;padding:20px;background:#0c0a18c7}.modal.show,.surprise.show{display:grid}.modal-box,.surprise>div{width:min(520px,100%);max-height:90vh;overflow:auto;position:relative;padding:28px;border-radius:24px;text-align:center;background:var(--surface);color:var(--text);box-shadow:0 30px 80px #0006}.surprise>div{background:linear-gradient(145deg,#fff,#fff0f7);border:1px solid #ffd1e5}body.dark .surprise>div{background:linear-gradient(145deg,#171a36,#2c1934);border-color:#ff8ab744}.surprise span{font-size:60px}.surprise h2{color:var(--pink)}.close{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:var(--pink2);color:var(--text);font-size:22px;cursor:pointer}.ttt{display:grid;grid-template-columns:repeat(3,80px);justify-content:center;gap:7px;margin:20px}.ttt button{width:80px;height:80px;border:0;border-radius:15px;background:var(--pink2);font-size:32px}.memory{display:grid;grid-template-columns:repeat(4,70px);justify-content:center;gap:8px;margin:20px}.memory button{width:70px;height:70px;border:0;border-radius:12px;background:var(--purple);font-size:0}.memory button.open{font-size:28px;background:var(--pink2)}.rps button,.quiz button{font-size:35px;margin:10px;border:0;background:var(--pink2);color:var(--text);padding:15px;border-radius:15px;cursor:pointer}.quiz button{font-size:15px;display:block;width:100%;margin:8px 0}.quiz button.correct{background:#c8f4d8!important;color:#175b35}.quiz button.wrong{background:#ffd2d6!important;color:#7b1e28}.quiz-review{text-align:left;display:grid;gap:12px;margin:18px 0}.quiz-review article{padding:14px;border-radius:15px;background:var(--pink2)}.quiz-review article.ok{border-left:5px solid #36c978}.quiz-review article.bad{border-left:5px solid #ef5c67}#confetti{position:fixed;inset:0;pointer-events:none;z-index:100}.confetti-piece{position:absolute;top:-20px;animation:fall 2.8s linear forwards}@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.2}}
@media(max-width:900px){.nav{grid-template-columns:1fr auto;padding:0 18px}.nav nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;padding:14px;background:var(--surface);border-bottom:1px solid var(--line)}.nav nav.open{display:flex}.hamburger{display:inline-block}.hero{grid-template-columns:1fr}.hero-copy{padding:46px 7vw 20px}.hero-spotify{padding:12px 7vw 44px}.hero-spotify .spotify-card{max-width:none;margin:0}.quick{grid-template-columns:1fr 1fr}.quick a:last-child{grid-column:1/-1}.about-grid{grid-template-columns:1fr}.about-photo{display:none}.game-grid{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:repeat(4,1fr)}.tech-grid{grid-template-columns:repeat(3,1fr)}footer{grid-template-columns:1fr auto;gap:8px}footer span{grid-column:1/-1;grid-row:2}.dev-credit{display:block;margin:4px 0 0}}
@media(max-width:520px){.hero h1{font-size:38px}.hero-copy p{font-size:15px}.spotify-main{grid-template-columns:64px 1fr}.spotify-cover{width:64px;height:64px}.quick{padding:12px}.quick a{padding:13px}.quick small{display:none}.section{padding:38px 16px}.game-grid{gap:10px}.game-card{padding:18px 8px}.game-card i{font-size:30px}.gallery{grid-template-columns:repeat(3,1fr)}.gallery button{min-height:85px}.tech-grid{grid-template-columns:repeat(2,1fr)}.contact{flex-direction:column;text-align:center;gap:15px}.ttt{grid-template-columns:repeat(3,65px)}.ttt button{width:65px;height:65px}.memory{grid-template-columns:repeat(4,55px)}.memory button{width:55px;height:55px}}

/* VISUAL MATCH V3 — authoritative hero/Spotify layout */
.hero{min-height:300px!important;grid-template-columns:minmax(0,1fr) minmax(420px,560px)!important;grid-template-areas:"copy spotify"!important;column-gap:54px!important;padding:30px max(5vw,54px)!important;align-items:center!important}
.hero-copy{grid-area:copy!important;padding:0!important;justify-self:start!important;width:min(560px,100%)!important}
.hero-spotify{grid-area:spotify!important;padding:0!important;justify-self:end!important;width:100%!important}
.hero h1{font-size:clamp(40px,4vw,58px)!important;margin-bottom:16px!important}.hero-copy p{font-size:17px!important;line-height:1.55!important}
.spotify-card{width:100%!important;max-width:560px!important;margin:0!important;padding:22px 24px!important;border-radius:22px!important;min-height:178px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
.spotify-head{margin-bottom:16px!important}.spotify-head small{font-size:13px!important}.spotify-head a{font-size:11px!important;padding:7px 12px!important}
.spotify-main{grid-template-columns:92px minmax(0,1fr)!important;gap:18px!important}.spotify-cover{width:92px!important;height:92px!important;border-radius:13px!important}.spotify-info b{font-size:17px!important}.spotify-info>span{font-size:13px!important}.spotify-progress{height:8px!important;margin-top:15px!important}.spotify-times{font-size:11px!important;margin-top:7px!important}
@media(max-width:900px){.hero{grid-template-columns:1fr!important;grid-template-areas:"copy" "spotify"!important;gap:24px!important;padding:44px 7vw!important}.hero-copy,.hero-spotify{justify-self:stretch!important;width:100%!important}.spotify-card{max-width:none!important}}
@media(max-width:520px){.hero{padding:36px 18px!important}.spotify-card{padding:17px!important;min-height:auto!important}.spotify-main{grid-template-columns:70px minmax(0,1fr)!important;gap:13px!important}.spotify-cover{width:70px!important;height:70px!important}.spotify-info b{font-size:14px!important}.spotify-info>span{font-size:11px!important}}

.contact-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.contact-links .btn{white-space:nowrap}@media(max-width:900px){.contact{gap:20px;align-items:flex-start;flex-direction:column}.contact-links{justify-content:flex-start}.contact-links .btn{width:100%;box-sizing:border-box}}