/* FRUITCODE Pastel Theme — v1.0 */
:root{
  --bg-1:#FFF9FF; --bg-2:#F5EFFF; --bg-3:#F2FBFF;
  --ink:#2E224E; --muted:#5f5780;
  --pink:#FF7DA7; --yellow:#F9F871; --purple:#C8A2FF; --blue:#9FD8FF; --green:#8EF0C1;
  --card:#FFFFFF; --shadow: 0 10px 30px rgba(200,162,255,.25);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family: Nunito,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--ink);
background: linear-gradient(180deg,var(--bg-1),var(--bg-2) 50%,var(--bg-3) 100%); line-height:1.6;}
.container{max-width:1200px;margin:0 auto;padding: clamp(16px, 3vw, 32px);} .grid{display:grid;gap:clamp(16px,2vw,24px);}
.grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}
.header{position:sticky; top:0; z-index:50; background: rgba(255,255,255,.75); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(200,162,255,.4);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family: Poppins, system-ui, sans-serif; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);}
.nav a{color:var(--ink); text-decoration:none; font-weight:700; font-family:Poppins,system-ui,sans-serif; padding:10px 12px; border-radius:12px;}
.nav a.active, .nav a:hover{ background: linear-gradient(90deg,var(--pink),var(--purple)); color:#fff; box-shadow: 0 6px 18px rgba(255,125,167,.35);}
.menu-toggle{display:none;background:none;border:2px solid var(--purple);padding:8px 12px;border-radius:10px}
@media(max-width:840px){.menu-toggle{display:block} .links{display:none;flex-direction:column;align-items:flex-start;background:rgba(255,255,255,.95);padding:12px;border-radius:14px;box-shadow:var(--shadow);} .links.show{display:flex}}
.hero{padding: clamp(48px, 8vw, 96px) 0; text-align:center;
background: radial-gradient(60% 60% at 50% 20%, rgba(255,125,167,.25), transparent 60%), radial-gradient(60% 60% at 20% 80%, rgba(201,162,255,.25), transparent 60%), radial-gradient(60% 60% at 80% 80%, rgba(159,216,255,.25), transparent 60%);}
h1,h2,h3{font-family:Poppins,system-ui,sans-serif;margin:0 0 .4em} h1{font-size: clamp(36px, 6vw, 64px);} h2{font-size: clamp(26px, 4vw, 40px);} .lead{font-size: clamp(16px, 2.2vw, 20px); color: var(--muted)}
.btn{display:inline-block; padding:12px 18px; border-radius:16px; background: linear-gradient(90deg,var(--pink),var(--purple)); color:#fff; text-decoration:none; font-weight:800; letter-spacing:.02em; box-shadow: var(--shadow);} .btn:hover{filter:brightness(1.05)}
.btn-outline{background:#fff; color:var(--ink); border:2px solid var(--pink);} .btn-outline:hover{background:linear-gradient(90deg,var(--yellow),#fff);}
.card{background:var(--card); border-radius:20px; box-shadow: var(--shadow); overflow:hidden; border:1px solid rgba(200,162,255,.35);} .card img{width:100%; display:block; aspect-ratio:1/1; object-fit:cover} .card .pad{padding:16px}
.section{padding: clamp(32px, 6vw, 72px) 0;} .section .header-line{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:clamp(16px,3vw,24px);}
.badge{display:inline-block; padding:6px 10px; border-radius:999px; font-weight:800; font-size:.85rem; background:linear-gradient(90deg,var(--yellow),var(--green)); color:#233;}
.footer{background: var(--bg-2); border-top:1px solid rgba(200,162,255,.4); padding:32px 0; color:#3a2d60;} .footer a{color:inherit;text-decoration:none} .footer .socials a{margin-right:10px}
.center{text-align:center} .stack{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center} .kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; background:#fff;border:1px solid #ddd;border-bottom-width:2px;padding:2px 6px;border-radius:6px}
.table{width:100%;border-collapse:collapse;font-size:15px} .table tr{border-bottom:1px solid rgba(200,162,255,.35)} .table th,.table td{text-align:left;padding:10px 6px}