/* ===== Notebook Chat — Blog Theme ===== */
:root{
  --pixel:'Jersey 10','Pixelify Sans',monospace;
  --body:'Fredoka','Baloo 2',sans-serif;
  --ink:#5a5a5a;
  --page:#fffdff;
  /* accent (role) colors from the widget */
  --pink:#fa7cf9;   --pink-bg:#ffe8fe;
  --orange:#ff9f42; --orange-bg:#fff0dc;
  --blue:#5dcfeb;   --blue-bg:#dcf6ff;
  --green:#8fd94a;  --green-bg:#eafbd6;
  --purple:#b98cff;
  /* window / header gradient */
  --grad-a:#b57cf5; --grad-b:#9d5ef0;
  --paper:#f3ecff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%,#efe4ff 0,transparent 60%),
    radial-gradient(1000px 600px at 100% 0,#ffe8fe 0,transparent 55%),
    var(--paper);
  min-height:100vh;line-height:1.6;
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:920px;margin:0 auto;padding:0 20px}

/* ---------- window-style header (like the DS chat window) ---------- */
.hero{
  margin:26px auto 30px;max-width:920px;border-radius:20px;overflow:hidden;
  box-shadow:0 0 0 3px #fff,0 14px 34px rgba(120,80,180,.28),0 0 22px 2px var(--pink);
}
.titlebar{
  background:linear-gradient(180deg,var(--grad-a),var(--grad-b));
  padding:16px 20px 26px;position:relative;text-align:center;color:#fff;
}
.titlebar .dots{position:absolute;top:14px;right:16px;display:flex;gap:8px}
.titlebar .dots span{width:18px;height:18px;border-radius:6px;background:rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}
.titlebar h1{
  font-family:var(--pixel);font-size:clamp(56px,12vw,104px);line-height:.9;font-weight:400;
  letter-spacing:2px;color:#fff;
  text-shadow:0 3px 0 #ff8ff6,0 6px 0 rgba(0,0,0,.10);
}
.titlebar .tagline{font-size:18px;margin-top:6px;font-weight:500;opacity:.95}
/* bouncing chat bubbles inside the header */
.bubbles{background:linear-gradient(180deg,var(--grad-b),#8b4fe6);padding:16px 18px 22px;display:flex;
  flex-direction:column;gap:10px;align-items:flex-start}
.bubble{background:#fff;border-radius:12px;padding:7px 12px;font-size:14px;font-weight:500;color:#6a6a6a;
  box-shadow:0 0 0 2px #fff,0 0 12px 2px var(--c,var(--pink));position:relative;max-width:80%}
.bubble b{font-family:var(--pixel);font-size:17px;color:var(--c);letter-spacing:.5px;margin-right:6px;
  vertical-align:-1px}
.bubble:nth-child(2){align-self:flex-end}
.bubble .doodle{position:absolute;top:-14px;right:8px;font-size:20px;
  filter:drop-shadow(1px 2px 1px rgba(90,50,140,.3))}

/* ---------- nav ---------- */
.nav{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:-14px auto 34px}
.nav a{font-family:var(--pixel);font-size:20px;letter-spacing:.5px;color:#fff;padding:6px 16px 8px;
  border-radius:11px;background:var(--c,var(--purple));box-shadow:0 0 0 2px #fff,0 0 10px 1px var(--c,var(--purple));
  text-shadow:1px 1px 0 rgba(0,0,0,.14);transition:transform .12s}
.nav a:hover{transform:translateY(-2px) rotate(-1deg)}
.nav a.on{transform:translateY(-3px) scale(1.06);box-shadow:0 0 0 3px #fff,0 0 14px 3px var(--c,var(--purple))}

/* ---------- shared section heading ---------- */
.sec-title{font-family:var(--pixel);font-size:clamp(30px,6vw,44px);color:#8b5fe6;letter-spacing:1px;
  text-align:center;margin:6px 0 4px;text-shadow:0 2px 0 #ffd0fb}
.sec-sub{text-align:center;color:#a99fc0;font-weight:500;margin-bottom:26px}

/* ---------- generic note panel (about / contact / faves boxes) ---------- */
.note{--c:var(--pink);position:relative;background:var(--page);border-radius:16px;margin-bottom:26px;
  box-shadow:0 0 0 2px #fff,0 0 16px 2px var(--c),4px 6px 0 rgba(120,80,160,.10)}
.note .head{display:flex;align-items:flex-end;gap:8px;padding:10px 16px 0}
.note .tag{font-family:var(--pixel);font-size:22px;line-height:1;letter-spacing:.5px;padding:7px 13px 8px;
  border-radius:10px 10px 0 0;background:var(--c);color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.14);white-space:nowrap}
.note .rule{flex:1;height:2px;background:color-mix(in srgb,var(--c) 30%,#fff);border-radius:2px;margin-bottom:4px}
.note .doodle{position:absolute;top:-16px;right:16px;font-size:28px;z-index:6;
  filter:drop-shadow(1px 2px 1px rgba(90,50,140,.28));animation:bop .95s cubic-bezier(.18,1.5,.4,1) both}
.note .body{position:relative;padding:14px 20px 20px;font-size:17px;line-height:28px;color:var(--ink);
  border-radius:0 0 15px 15px;
  background:repeating-linear-gradient(180deg,transparent 0 27px,color-mix(in srgb,var(--c) 32%,#fff) 27px 28px);
  background-position:0 10px}
.note .body p{margin:0 0 14px}
.note h3{font-family:var(--body);font-weight:600;font-size:22px;color:#4a4458;margin-bottom:8px}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:24px;padding-bottom:40px}
.polaroid{--c:var(--pink);position:relative;background:#fff;border-radius:14px;padding:10px 10px 0;
  box-shadow:0 0 0 2px #fff,0 0 14px 2px var(--c),3px 5px 0 rgba(120,80,160,.10);transition:transform .16s}
.polaroid:nth-child(2n){transform:rotate(-1.5deg)}
.polaroid:nth-child(3n){transform:rotate(1.5deg)}
.polaroid:hover{transform:translateY(-4px) rotate(0)}
.polaroid .pic{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:74px;background:var(--cb,var(--pink-bg))}
.polaroid .cap{font-family:var(--body);font-weight:500;text-align:center;color:#6a5f7a;padding:9px 4px 12px;font-size:15px}
.polaroid .doodle{position:absolute;top:-14px;right:8px;font-size:24px;z-index:5;
  filter:drop-shadow(1px 2px 1px rgba(90,50,140,.28))}

/* ---------- faves / "currently" status ---------- */
.status{--c:var(--purple);display:grid;grid-template-columns:auto 1fr;gap:10px 16px;
  padding:16px 22px 22px;font-size:17px}
.status dt{font-family:var(--pixel);font-size:20px;color:var(--c);letter-spacing:.5px}
.status dd{color:var(--ink);font-weight:500}
.faves-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.faves-list li{display:flex;gap:10px;align-items:center;font-weight:500;color:#54506a}
.faves-list .em{font-size:22px}

/* ---------- links / blogroll ---------- */
.linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding-bottom:40px}
.linkbtn{--c:var(--pink);display:flex;flex-direction:column;gap:2px;background:var(--page);border-radius:13px;
  padding:14px 16px;box-shadow:0 0 0 2px #fff,0 0 12px 1px var(--c),3px 4px 0 rgba(120,80,160,.10);
  transition:transform .14s}
.linkbtn:hover{transform:translateY(-3px) rotate(-1deg)}
.linkbtn .lt{font-family:var(--pixel);font-size:22px;color:var(--c);letter-spacing:.5px}
.linkbtn .ld{font-size:14px;font-weight:500;color:#8a80a0}

/* ---------- contact form + guestbook ---------- */
.form{display:flex;flex-direction:column;gap:14px}
.form label{font-family:var(--pixel);font-size:19px;color:#8b5fe6;letter-spacing:.5px;margin-bottom:-8px}
.form input,.form textarea{font-family:var(--body);font-size:16px;color:#54506a;background:#faf6ff;
  border:2px solid #e6dcff;border-radius:12px;padding:11px 14px;outline:none;transition:border-color .15s}
.form input:focus,.form textarea:focus{border-color:var(--pink)}
.form textarea{min-height:120px;resize:vertical}
.form button{align-self:flex-start;font-family:var(--pixel);font-size:22px;color:#fff;background:var(--pink);
  border:none;padding:9px 24px 11px;border-radius:13px;letter-spacing:.5px;cursor:pointer;
  text-shadow:1px 1px 0 rgba(0,0,0,.14);box-shadow:0 0 0 2px #fff,0 0 12px 1px var(--pink);transition:transform .12s}
.form button:hover{transform:translateY(-2px)}
.guestbook{display:flex;flex-direction:column;gap:12px}
.gb{display:flex;gap:10px;align-items:flex-start;font-size:16px;color:#54506a;font-weight:500}
.gb b{font-family:var(--pixel);font-size:18px;color:var(--pink);letter-spacing:.5px;white-space:nowrap}
.social{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.social a{font-family:var(--pixel);font-size:20px;color:#fff;padding:6px 16px 8px;border-radius:11px;
  background:var(--c,var(--purple));box-shadow:0 0 0 2px #fff,0 0 10px 1px var(--c,var(--purple));
  text-shadow:1px 1px 0 rgba(0,0,0,.14)}

/* ---------- post card (notebook note) ---------- */
.grid{display:flex;flex-direction:column;gap:26px;padding-bottom:60px}
.card{
  --c:var(--pink);position:relative;background:var(--page);border-radius:16px;overflow:visible;
  box-shadow:0 0 0 2px #fff,0 0 16px 2px var(--c),4px 6px 0 rgba(120,80,160,.10);
  transition:transform .14s;
}
.card:hover{transform:translateY(-3px)}
.card .head,.article .head{display:flex;align-items:flex-end;gap:8px;padding:10px 16px 0}
.card .tag,.article .tag{font-family:var(--pixel);font-size:22px;line-height:1;letter-spacing:.5px;padding:7px 13px 8px;
  border-radius:10px 10px 0 0;background:var(--c);color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.14);
  white-space:nowrap;display:flex;align-items:center;gap:6px}
.card .rule,.article .rule{flex:1;height:2px;background:color-mix(in srgb,var(--c) 30%,#fff);border-radius:2px;margin-bottom:4px}
.card .date,.article .date{font-size:13px;font-weight:600;color:#a99fc0;margin-bottom:3px}
.card .doodle,.article .doodle{position:absolute;top:-16px;right:16px;font-size:28px;z-index:6;
  filter:drop-shadow(1px 2px 1px rgba(90,50,140,.28));
  animation:bop .95s cubic-bezier(.18,1.5,.4,1) both}
@keyframes bop{0%{transform:translateY(20px) scale(.2) rotate(-30deg);opacity:0}
  55%{transform:translateY(-6px) scale(1.18) rotate(10deg);opacity:1}
  100%{transform:translateY(0) scale(1) rotate(-9deg);opacity:1}}
.card .body{position:relative;padding:12px 18px 16px;font-size:17px;font-weight:500;line-height:28px;
  color:var(--ink);border-radius:0 0 15px 15px;
  background:repeating-linear-gradient(180deg,transparent 0 27px,color-mix(in srgb,var(--c) 34%,#fff) 27px 28px);
  background-position:0 10px}
.card h2{font-family:var(--body);font-weight:600;font-size:26px;color:#4a4458;line-height:1.15;margin-bottom:6px}
.card .excerpt{margin-bottom:12px}
.card .tags,.article .tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.card .tags span,.article .tags span{font-size:12px;font-weight:600;background:var(--cb,var(--pink-bg));color:#7a6a8a;
  padding:3px 10px;border-radius:20px}
.card .more{font-family:var(--pixel);font-size:19px;color:#fff;background:var(--c);padding:5px 15px 7px;
  border-radius:11px;display:inline-block;letter-spacing:.5px;text-shadow:1px 1px 0 rgba(0,0,0,.14)}

/* role variants */
.role-pink{--c:var(--pink);--cb:var(--pink-bg)}
.role-orange{--c:var(--orange);--cb:var(--orange-bg)}
.role-blue{--c:var(--blue);--cb:var(--blue-bg)}
.role-green{--c:var(--green);--cb:var(--green-bg)}
.role-purple{--c:var(--purple);--cb:#efe4ff}

/* ---------- single post ---------- */
.article{--c:var(--pink);background:var(--page);border-radius:18px;position:relative;margin-bottom:40px;
  box-shadow:0 0 0 2px #fff,0 0 18px 2px var(--c),4px 6px 0 rgba(120,80,160,.10)}
.article .head{padding:14px 22px 0}
.article .tag{font-family:var(--pixel);font-size:24px}
.article .content{position:relative;padding:16px 26px 30px;font-size:18px;line-height:30px;color:#54506a;
  background:repeating-linear-gradient(180deg,transparent 0 29px,color-mix(in srgb,var(--c) 30%,#fff) 29px 30px);
  background-position:0 12px}
.article h1{font-family:var(--body);font-weight:600;font-size:clamp(28px,5vw,40px);color:#443f57;
  line-height:1.12;margin:6px 0 8px}
.article .content h2{font-family:var(--pixel);font-weight:400;font-size:30px;color:var(--c);
  margin:26px 0 6px;letter-spacing:.5px}
.article .content p{margin:0 0 16px}
.article .content ul{margin:0 0 16px 22px}
.article .content li{margin-bottom:6px}
.article .content strong{color:#3f3a52}
.article .content blockquote{border-left:4px solid var(--c);background:var(--cb,var(--pink-bg));
  border-radius:0 12px 12px 0;padding:12px 18px;margin:0 0 18px;font-weight:500;color:#6a5f7a}
.article .content code{font-family:var(--pixel);font-size:19px;background:#f0e9ff;color:#8b5fe6;
  padding:1px 8px;border-radius:7px}
.back{font-family:var(--pixel);font-size:20px;color:#fff;background:var(--purple);padding:7px 18px 9px;
  border-radius:12px;display:inline-block;letter-spacing:.5px;margin:0 0 26px;
  box-shadow:0 0 0 2px #fff,0 0 10px 1px var(--purple);text-shadow:1px 1px 0 rgba(0,0,0,.14)}

/* ---------- footer ---------- */
.foot{text-align:center;padding:30px 20px 46px;color:#a99fc0;font-size:14px;font-weight:500}
.foot .pix{font-family:var(--pixel);font-size:22px;color:#b58cf0;letter-spacing:.5px}

@media(max-width:560px){
  .card h2{font-size:22px}
  .bubble{max-width:92%}
}