:root{
  --paper:#fff8fbcc;
  --paper2:#f4e8f1cc;
  --rose:#e3bfce;
  --lav:#ddd7f4;
  --ink:#45323d;
  --muted:#7c6873;
  --line:rgba(69,50,61,.12);
  --shadow:0 14px 34px rgba(88,60,77,.13);
  --shadow-soft:0 6px 16px rgba(88,60,77,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--ink);
  font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
  background:#f8eef2; overflow-x:hidden; position:relative;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text x='4' y='22' font-size='20'>♡</text></svg>") 6 6, auto;
}
a, button, .nav a, .gallery-controls button{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text x='3' y='22' font-size='20'>✦</text></svg>") 8 8, pointer;
}
body::before{
  content:""; position:fixed; inset:0;
  background:linear-gradient(rgba(248,240,234,.23), rgba(248,240,234,.38)), url("background.jpg") center center / cover no-repeat;
  z-index:-5; transform:scale(1.02);
}
body::after{
  content:""; position:fixed; inset:0;
  background:
    radial-gradient(circle at 10% 12%, rgba(255,255,255,.45), transparent 20%),
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.3), transparent 16%),
    radial-gradient(circle at 84% 78%, rgba(255,255,255,.28), transparent 18%);
  z-index:-4; pointer-events:none;
}
.sparkle-layer{position:fixed; inset:0; pointer-events:none; z-index:1;}
.sparkle{
  position:absolute; width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.95);
  box-shadow:0 0 12px rgba(255,255,255,.9), 0 0 20px rgba(255,220,240,.55);
  animation:twinkle 4.8s infinite ease-in-out;
}
.sparkle.s2{width:5px;height:5px;animation-delay:1.2s}
.sparkle.s3{width:6px;height:6px;animation-delay:2.3s}
@keyframes twinkle{
  0%,100%{opacity:.18; transform:scale(.65)}
  50%{opacity:.98; transform:scale(1.18)}
}
img{display:block;max-width:100%;transition:.25s ease}
img:hover{transform:scale(1.02);filter:brightness(1.04)}
a{text-decoration:none;color:inherit}
p{line-height:1.8;margin:.72rem 0}
h1,h2,h3,h4{margin:0 0 .65rem;line-height:1.08;font-weight:700}
.page{position:relative; z-index:2; width:min(1180px, calc(100% - 28px)); margin:18px auto 38px;}
.panel,.top,.footer-box,.post{
  border-radius:28px; background:linear-gradient(180deg,var(--paper),var(--paper2));
  border:1px solid rgba(255,255,255,.72); box-shadow:var(--shadow); backdrop-filter:blur(12px); position:relative;
}
.panel-inner,.top-inner,.footer-inner,.post-inner{
  margin:10px; border-radius:20px; border:1px solid var(--line); background:rgba(255,255,255,.22);
}
.top-inner{padding:14px 16px}
.panel-inner,.post-inner{padding:18px}
.footer-box{margin-top:18px}
.footer-inner{padding:16px 20px; text-align:center; color:var(--muted); font-size:.95rem; white-space:normal; overflow-wrap:anywhere;}
.topbar{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:12px}
.brand-badge{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:1.4rem;
  background:linear-gradient(135deg,var(--rose),var(--lav));
  border:1px solid rgba(255,255,255,.8); box-shadow:inset 0 1px 8px rgba(255,255,255,.8), var(--shadow-soft);
}
.brand h1{font-size:1.46rem;letter-spacing:.03em}
.brand .sub{font-size:.8rem;color:var(--muted)}
.subtitle{font-size:.8rem;color:var(--muted);margin-top:4px;opacity:.9}
.nav{display:flex;flex-wrap:wrap;gap:8px}
.nav a{
  padding:9px 13px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.48);box-shadow:var(--shadow-soft);font-size:.9rem;transition:.2s ease;
}
.nav a:hover,.nav a.active{transform:translateY(-1px);background:rgba(255,255,255,.72)}
.marquee{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px;color:var(--muted);font-size:.85rem}
.layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;margin-top:18px}
.sidebar,.main{display:grid;gap:18px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.hero-title{font-size:clamp(2.2rem, 5vw, 4rem);letter-spacing:-.02em}
.kicker{font-size:.8rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin-bottom:10px}
.hero p{max-width:42ch}
.chips,.mood-grid,.charm-row,.pixel-bar{display:flex;flex-wrap:wrap;gap:8px}
.chip,.mood{
  padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.46);font-size:.83rem;
}
.section-head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px dashed var(--line);
}
.section-head h2,.section-head h3{font-size:1.25rem;margin:0}
.mini{font-size:.82rem;color:var(--muted)}
.soft-grid,.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stamp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stamp,.cardlet,.note-item,.link-row,.badge-box div,.mini-window,.tiny-sticker,.guest-line{
  border:1px solid var(--line); background:rgba(255,255,255,.42); border-radius:16px;
}
.stamp{min-height:70px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-size:.8rem;}
.cardlet,.mini-window{padding:12px 14px}
.cardlet strong,.mini-window strong{display:block;margin-bottom:4px}
.cardlet small,.mini-window small{color:var(--muted)}
.side-photo{margin-top:12px;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.side-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.side-note{margin-top:12px;padding:12px;border-radius:16px;border:1px dashed var(--line);background:rgba(255,255,255,.26);font-size:.9rem;}
.polaroid{padding:12px;border-radius:18px;background:rgba(255,255,255,.5);border:1px solid var(--line)}
.polaroid img{border-radius:12px;aspect-ratio:4/5;object-fit:cover}
.polaroid .cap{text-align:center;color:var(--muted);font-size:.86rem;padding-top:8px}
.float-card{
  width:180px;float:right;margin:0 0 12px 16px;padding:8px;border-radius:16px;
  background:rgba(255,255,255,.54);border:1px solid var(--line);box-shadow:var(--shadow-soft);transform:rotate(2deg);
}
.float-card.left{float:left;margin:2px 16px 12px 0;transform:rotate(-2deg)}
.float-card img{border-radius:12px;aspect-ratio:4/5;object-fit:cover}
.float-card .cap{text-align:center;color:var(--muted);font-size:.78rem;padding-top:6px}
.ribbon{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ribbon img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow-soft);}
.ribbon img:nth-child(odd){transform:rotate(-1.5deg)}
.ribbon img:nth-child(even){transform:rotate(1.5deg)}
.profile{display:grid;grid-template-columns:.88fr 1.12fr;gap:18px}
.profile-pic{padding:12px;border-radius:18px;background:rgba(255,255,255,.42);border:1px solid var(--line)}
.profile-pic img{border-radius:14px;aspect-ratio:4/5;object-fit:cover}
.fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.fact{padding:12px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.4)}
.fact strong{display:block;margin-bottom:4px}
.post-list,.note-list,.badge-box,.sticker-stack,.guestbook,.link-stack{display:grid;gap:10px}
.post h2{font-size:1.7rem}
.meta{color:var(--muted);font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px}
.gallery-stage{overflow:hidden;border-radius:16px;border:1px solid var(--line)}
.gallery-stage img{width:100%;aspect-ratio:16/10;object-fit:cover}
.gallery-controls{display:flex;justify-content:center;gap:10px;margin-top:14px}
.gallery-controls button{
  border:none;border-radius:999px;padding:10px 14px;font-family:inherit;
  background:rgba(255,255,255,.68);border:1px solid var(--line);box-shadow:var(--shadow-soft);color:var(--ink);
}
.gallery-caption{text-align:center;color:var(--muted);margin-top:10px;font-size:.9rem}
.note-item{padding:12px 14px}
.note-item small{display:block;margin-top:4px;color:var(--muted)}
.link-row{padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.link-row span{color:var(--muted);font-size:.86rem}
.divider{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:14px 0 12px;color:#a78f9c;font-size:.95rem;text-align:center;
}
.divider::before,.divider::after{
  content:"";height:1px;flex:1;background:linear-gradient(to right, transparent, rgba(126,105,117,.35), transparent);
}
.badge-box div{padding:7px 9px}
.music-player{
  padding:12px;border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(240,230,239,.82));
  border:1px solid var(--line);box-shadow:var(--shadow-soft);
}
.music-player .title{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:8px;}
.music-player .song{font-size:.86rem;padding:6px 0;border-top:1px dashed rgba(126,105,117,.2);}
.music-player .song:first-of-type{border-top:none;padding-top:0}
.music-player small{color:var(--muted)}
.corner-ribbon{
  position:absolute;top:14px;right:-6px;background:#f0d8e5;color:#7f6673;padding:4px 11px;font-size:.72rem;
  transform:rotate(8deg);border-radius:8px;border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow-soft);
}
.tiny-sticker{
  padding:8px 10px;text-align:center;font-size:.72rem;background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(236,225,234,.8));box-shadow:var(--shadow-soft);
}
.pixel{width:16px;height:10px;border-radius:4px;background:linear-gradient(180deg,#fff,#efd8e5);border:1px solid rgba(69,50,61,.08);}
.mini-window{background:linear-gradient(180deg, rgba(255,255,255,.56), rgba(239,230,239,.72))}
.orb{
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, #f2d9e5 65%, #ddc6f0);
  border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow-soft);
}
.guest-line{padding:10px 12px;font-size:.85rem}
.guest-line small{display:block;color:var(--muted);margin-top:3px}
.progress{margin-top:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.34);overflow:hidden;border:1px solid var(--line);}
.progress span{display:block;height:100%;width:62%;background:linear-gradient(90deg,#f0d8e5,#ddd7f4)}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;font-size:.74rem;text-align:center;}
.calendar-grid div{padding:6px 0;border-radius:10px;background:rgba(255,255,255,.3);border:1px solid rgba(69,50,61,.06);}
.calendar-grid .day{background:rgba(240,216,229,.56)}
@media (max-width:980px){
  .layout,.hero,.soft-grid,.two-col,.profile{grid-template-columns:1fr}
  .ribbon{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .page{width:min(100%, calc(100% - 12px));margin:10px auto 24px}
  .float-card,.float-card.left{float:none;width:100%;margin:12px 0;transform:none}
  .fact-grid{grid-template-columns:1fr}
}


.comment-box{
  display:grid;
  gap:10px;
}
.comment-box label{
  font-size:.84rem;
  color:var(--muted);
}
.comment-box input,.comment-box textarea{
  width:100%;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.58);
  padding:11px 12px;
  font:inherit;
  color:var(--ink);
}
.comment-box textarea{
  min-height:120px;
  resize:vertical;
}
.comment-box button{
  border:none;
  border-radius:999px;
  padding:10px 14px;
  font:inherit;
  color:var(--ink);
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.inline-ribbon{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px;
}
.inline-ribbon img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.post-image-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}
.post-image-row img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.float-mini{
  width:140px;
  float:right;
  margin:0 0 10px 14px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.float-mini.left{
  float:left;
  margin:0 14px 10px 0;
}
.float-mini img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}
@media (max-width:720px){
  .inline-ribbon,.post-image-row{grid-template-columns:1fr}
  .float-mini,.float-mini.left{
    float:none;
    width:100%;
    margin:12px 0;
  }
}