:root {
  --ink: #5a315b;
  --deep: #7d4a82;
  --pink: #ff86bd;
  --hot-pink: #ed4d9a;
  --blush: #ffd5e8;
  --cream: #fffaf3;
  --yellow: #ffe68b;
  --mint: #bdebdc;
  --blue: #bfe2f5;
  --lavender: #d8c8f2;
  --line: #7d4a82;
  --shadow: 5px 5px 0 rgba(125, 74, 130, .18);
  --pixel: 'DotGothic16', monospace;
  --hand: 'Gaegu', cursive;
  --round: 'Kosugi Maru', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--round);
  background-color: #ffe4f0;
  background-image:
    radial-gradient(circle at 10px 10px, rgba(255,255,255,.85) 1.5px, transparent 1.5px),
    linear-gradient(135deg, rgba(255,255,255,.28) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.28) 75%);
  background-size: 20px 20px, 40px 40px;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .12;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #8b5687 4px);
  mix-blend-mode: multiply;
}
button, input, textarea { font: inherit; }
a { color: inherit; }
button { color: inherit; }
::selection { background: var(--hot-pink); color: white; }
.skip-link {
  position: fixed;
  z-index: 500;
  top: 10px;
  left: 10px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 11px 14px;
  border: 2px solid var(--line);
  color: white;
  background: var(--hot-pink);
  box-shadow: 3px 3px 0 var(--ink);
  font: 12px var(--pixel);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .15s;
}
.skip-link:focus { transform: translateY(0); }
:where(a, button, input, textarea):focus-visible {
  outline: 3px solid var(--hot-pink);
  outline-offset: 3px;
}

.sky-decor { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.cloud { position: absolute; color: #fff; opacity: .75; filter: drop-shadow(3px 4px 0 rgba(184,116,159,.12)); font-size: 90px; animation: cloud-drift 25s linear infinite; }
.cloud-one { top: 8%; left: -120px; }
.cloud-two { top: 57%; left: -180px; font-size: 130px; animation-duration: 37s; animation-delay: -12s; }
.star { position: absolute; color: #fff; text-shadow: 2px 2px var(--pink); animation: twinkle 2s steps(2) infinite; }
.star-one { top: 11%; left: 8%; font-size: 30px; }
.star-two { top: 24%; right: 5%; font-size: 42px; animation-delay: .7s; }
.star-three { top: 80%; left: 4%; font-size: 55px; animation-delay: 1.2s; }

.page-shell {
  position: relative;
  width: min(1180px, calc(100% - 28px));
  margin: 28px auto;
  background: rgba(255, 250, 243, .94);
  border: 3px solid var(--line);
  box-shadow: 12px 12px 0 rgba(125,74,130,.22), inset 0 0 0 5px #fff;
}
.ticker { overflow: hidden; background: var(--ink); color: #fff; border-bottom: 3px solid var(--line); font: 13px var(--pixel); letter-spacing: 1px; padding: 7px 0; white-space: nowrap; }
.ticker-track { display: inline-block; min-width: max-content; animation: ticker 24s linear infinite; }

.masthead {
  min-height: 174px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(145deg, var(--blush), #fff6f9 48%, var(--blue));
  background-size: 16px 16px, 16px 16px, auto;
}
.logo-wrap { position: relative; z-index: 2; text-align: center; padding: 22px; }
.eyebrow { margin: 0 0 -5px; font: 15px var(--round); letter-spacing: 5px; color: var(--deep); }
h1 { margin: 0; line-height: 1; font: 700 clamp(50px, 8vw, 86px) var(--hand); letter-spacing: -4px; color: white; -webkit-text-stroke: 3px var(--line); text-shadow: 4px 5px 0 var(--pink), 7px 8px 0 rgba(125,74,130,.2); transform: rotate(-2deg); }
h1 span { color: #fff; }
h1 b { display: inline-block; color: var(--yellow); font-size: .75em; animation: twinkle 1.3s steps(2) infinite; }
.tagline { display: inline-block; margin: 8px 0 0; padding: 3px 14px; color: var(--ink); background: var(--yellow); font: 700 19px var(--hand); transform: rotate(1.5deg); box-shadow: 2px 2px 0 var(--line); }

.sticker-btn { position: absolute; z-index: 3; border: 0; background: none; cursor: pointer; }
.heart-sticker { left: 6%; top: 41px; width: 92px; height: 81px; background: var(--hot-pink); clip-path: polygon(50% 23%,61% 6%,79% 2%,94% 12%,100% 30%,96% 46%,50% 93%,4% 46%,0 30%,6% 12%,21% 2%,39% 6%); transform: rotate(-12deg); filter: drop-shadow(4px 5px 0 rgba(125,74,130,.3)); transition: transform .2s; }
.heart-sticker:hover { transform: rotate(4deg) scale(1.08); }
.heart-sticker span { color: white; font: 14px/1 var(--pixel); text-shadow: 1px 1px var(--ink); }
.mascot { position: absolute; right: 7%; top: 37px; width: 102px; height: 100px; }
.bunny-face { position: absolute; top: 25px; width: 100%; height: 74px; display: flex; align-items: center; justify-content: center; gap: 13px; border: 3px solid var(--line); border-radius: 48% 48% 44% 44%; background: white; box-shadow: 4px 4px 0 var(--pink); font: 18px var(--round); }
.ear { position: absolute; top: -2px; width: 29px; height: 55px; border: 3px solid var(--line); border-radius: 70% 70% 30% 30%; background: linear-gradient(90deg,#fff 30%,#ffc3dc 31% 66%,#fff 67%); }
.left-ear { left: 17px; transform: rotate(-12deg); }
.right-ear { right: 17px; transform: rotate(12deg); }
.mouth { color: var(--hot-pink); transform: translateY(10px); }
.mascot-note { position: absolute; width: 110px; bottom: -20px; left: 0; text-align: center; font: 700 15px var(--hand); transform: rotate(5deg); }

.main-nav { display: flex; justify-content: center; gap: 0; border-top: 3px solid var(--line); border-bottom: 3px solid var(--line); background: white; }
.main-nav a { min-width: 130px; min-height: 44px; display: grid; place-items: center; padding: 11px 18px; border-right: 2px dashed #dfacce; text-align: center; text-decoration: none; font: 15px var(--pixel); transition: .15s; }
.main-nav a:first-child { border-left: 2px dashed #dfacce; }
.main-nav a:hover, .main-nav a.active { background: var(--pink); color: #fff; text-shadow: 1px 1px var(--deep); }

.layout { display: grid; grid-template-columns: 215px minmax(0, 1fr) 215px; gap: 18px; padding: 20px; background-image: radial-gradient(#e3bad5 1px, transparent 1px); background-size: 15px 15px; }
.left-column, .right-column, .center-column { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.window { border: 2px solid var(--line); background: white; box-shadow: var(--shadow); }
.window-title { min-height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; border-bottom: 2px solid var(--line); background: repeating-linear-gradient(135deg, var(--blush) 0 6px, #fff 6px 12px); font: 13px var(--pixel); }
.window-dots { letter-spacing: 2px; color: var(--hot-pink); font-size: 10px; }
.window-body { padding: 14px; }

.profile-card .window-body { text-align: center; }
.avatar-frame { position: relative; width: 122px; height: 122px; margin: 1px auto 12px; padding: 6px; background: white; border: 2px solid var(--line); border-radius: 50%; box-shadow: 3px 3px 0 var(--lavender); }
.avatar-sky { height: 100%; overflow: hidden; position: relative; border-radius: 50%; background: linear-gradient(#bce3ef 50%, #fbd4e4 51%); }
.avatar-sky::before, .avatar-sky::after { content: '✦'; position: absolute; color: white; top: 14px; left: 16px; }
.avatar-sky::after { content: '☁'; top: 2px; left: 67px; font-size: 26px; }
.avatar-hair { position: absolute; z-index: 1; width: 78px; height: 86px; bottom: -6px; left: 16px; background: #5e405a; border-radius: 48% 48% 30% 30%; border: 2px solid var(--line); }
.avatar-face { position: absolute; z-index: 2; width: 61px; height: 62px; padding-top: 24px; bottom: 0; left: 24px; border-radius: 46% 46% 40% 40%; color: #7c4663; background: #ffe8de; font: 11px var(--round); }
.avatar-bow { position: absolute; z-index: 3; top: 21px; left: 11px; color: var(--hot-pink); font: 35px var(--round); transform: rotate(-24deg); }
.profile-card h2 { margin: 0; font: 700 25px var(--hand); }
.profile-card h2 span { color: var(--hot-pink); }
.jp-name { margin: 2px 0 9px; font: 12px var(--pixel); color: #a36e9e; }
.profile-card p:not(.jp-name) { font: 15px/1.45 var(--hand); margin: 8px 0; }
.mini-facts { margin: 14px 0 0; border-top: 1px dashed #d89bc3; }
.mini-facts div { display: flex; justify-content: space-between; border-bottom: 1px dashed #d89bc3; padding: 7px 0; font-size: 11px; }
.mini-facts dt { color: #a2709c; }
.mini-facts dd { margin: 0; font-weight: bold; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #62c693; box-shadow: 0 0 0 2px #c3f0d9; animation: pulse 1.5s infinite; }
.button-stack { display: flex; flex-direction: column; gap: 7px; }
.button-stack a { min-height: 44px; display: flex; align-items: center; padding: 7px 9px; border: 1px solid var(--line); text-decoration: none; background: #fff7fb; box-shadow: 2px 2px 0 var(--blush); font: 13px var(--pixel); transition: transform .15s, background .15s; }
.button-stack a:hover { transform: translateX(4px); background: var(--yellow); }
.button-stack span { display: inline-block; width: 21px; color: var(--hot-pink); }
.tiny-widget { text-align: center; padding: 13px 8px; border: 2px dashed var(--line); background: var(--yellow); transform: rotate(-1.5deg); box-shadow: 4px 4px 0 white, 6px 6px 0 var(--line); }
.tiny-widget p { margin: 0 0 5px; font: 11px var(--pixel); }
.tiny-widget strong { display: inline-block; padding: 3px 7px; letter-spacing: 4px; color: #ff98be; background: #3f3046; border: 2px inset #fff; font: 16px monospace; }
.tiny-widget small { display: block; margin-top: 6px; font: 13px var(--hand); }

.hero-card { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; min-height: 335px; overflow: hidden; border: 2px solid var(--line); background: linear-gradient(150deg, #fffdf5 10%, #ffe3ef 58%, #cce8f1); box-shadow: var(--shadow); }
.hero-card::after { content: ''; position: absolute; inset: 7px; border: 1px dashed rgba(125,74,130,.45); pointer-events: none; }
.hero-copy { position: relative; z-index: 3; padding: 48px 10px 35px 35px; }
.new-badge { position: absolute; top: 16px; left: 23px; padding: 3px 8px; color: #fff; background: var(--hot-pink); font: 10px var(--pixel); transform: rotate(-5deg); }
.hero-kicker { margin: 0 0 7px; color: var(--hot-pink); font: 12px var(--pixel); letter-spacing: 2px; }
.hero-copy h2 { margin: 0; font: 700 clamp(34px, 5vw, 49px)/.89 var(--hand); letter-spacing: -2px; }
.hero-copy h2 em { color: var(--hot-pink); font-style: normal; text-decoration: underline wavy var(--yellow) 4px; }
.hero-copy > p:not(.hero-kicker) { max-width: 390px; margin: 19px 0; font: 16px/1.42 var(--hand); }
.sparkle-link { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 13px; color: white; background: var(--ink); text-decoration: none; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--pink); font: 13px var(--pixel); transition: .2s; }
.sparkle-link:hover { color: var(--ink); background: var(--yellow); transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--pink); }
.hero-sparkles { position: absolute; z-index: 2; top: 13px; right: 17px; color: white; text-shadow: 1px 1px var(--pink); }
.hero-art { position: relative; min-height: 100%; overflow: hidden; }
.sun { position: absolute; z-index: 2; top: 42px; right: 42px; width: 67px; height: 67px; padding-top: 17px; border-radius: 50%; text-align: center; color: var(--hot-pink); background: var(--yellow); box-shadow: 0 0 0 10px rgba(255,230,139,.32); font-size: 26px; animation: float 3s ease-in-out infinite; }
.rainbow { position: absolute; z-index: 1; width: 180px; height: 120px; left: 0; top: 83px; overflow: hidden; }
.rainbow i { position: absolute; border-style: solid; border-radius: 100% 100% 0 0; border-bottom: 0; }
.rainbow i:nth-child(1) { inset: 0; border-width: 15px; border-color: #f299bf; }
.rainbow i:nth-child(2) { inset: 15px; border-width: 15px; border-color: #ffe589; }
.rainbow i:nth-child(3) { inset: 30px; border-width: 15px; border-color: #9cd9c5; }
.rainbow i:nth-child(4) { inset: 45px; border-width: 15px; border-color: #b7cfea; }
.hill { position: absolute; bottom: -38px; border-radius: 50% 50% 0 0; transform: rotate(-7deg); }
.hill-back { z-index: 1; width: 310px; height: 180px; left: -55px; background: #c8e4d1; }
.hill-front { z-index: 2; width: 310px; height: 132px; right: -87px; background: #f2b8cf; transform: rotate(11deg); }
.tiny-house { position: absolute; z-index: 4; left: 70px; bottom: 57px; width: 78px; height: 67px; border: 3px solid var(--line); background: #fff4c7; box-shadow: 4px 4px rgba(125,74,130,.18); }
.tiny-house::before { content: ''; position: absolute; left: -12px; top: -39px; border-left: 49px solid transparent; border-right: 49px solid transparent; border-bottom: 40px solid var(--pink); filter: drop-shadow(0 -3px var(--line)); }
.tiny-house b { position: absolute; bottom: 0; left: 9px; width: 23px; height: 35px; background: #c2dcee; border: 2px solid var(--line); }
.tiny-house span { position: absolute; right: 12px; top: 17px; color: var(--hot-pink); }
.pixel-flower { position: absolute; z-index: 5; color: white; text-shadow: 1px 1px var(--hot-pink); }
.flower-one { bottom: 23px; left: 28px; font-size: 29px; }
.flower-two { right: 24px; bottom: 52px; font-size: 22px; }
.tape { position: absolute; z-index: 6; width: 70px; height: 19px; background: rgba(255,245,188,.75); border: 1px dashed rgba(125,74,130,.35); transform: rotate(38deg); }
.tape-one { right: -20px; top: 4px; }

.diary-page { display: grid; grid-template-columns: 92px 1fr; gap: 16px; background: repeating-linear-gradient(#fff 0 26px, #f5dce9 27px); }
.date-card { width: 86px; height: 74px; display: grid; grid-template-columns: 50px 32px; align-items: center; justify-content: center; border: 2px solid var(--line); background: white; box-shadow: 3px 3px var(--blush); }
.date-card b { display: grid; place-items: center; align-self: stretch; font: 32px var(--hand); color: var(--hot-pink); }
.date-card span { display: grid; place-items: center; align-self: stretch; padding: 0 2px; border-left: 1px solid var(--line); text-align: center; font: 8px/1.5 var(--pixel); }
.diary-meta { margin: 1px 0 7px; font: 9px var(--pixel); color: #a8779c; letter-spacing: .5px; }
.diary-page h2 { margin: 0 0 6px; font: 700 27px var(--hand); }
.diary-page p:not(.diary-meta):not(.signature) { margin: 0 0 7px; font: 15px/1.55 var(--hand); }
.text-button { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px dashed var(--hot-pink); color: var(--hot-pink); background: transparent; cursor: pointer; font: 12px var(--pixel); }
.diary-more { margin-top: 10px; }
.signature { text-align: right; color: var(--hot-pink); font: 19px var(--hand); }

.gallery-section { padding: 4px 4px 12px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 3px 5px 13px; }
.section-heading span { font: 10px var(--pixel); letter-spacing: 2px; color: var(--hot-pink); }
.section-heading h2 { margin: -2px 0 0; font: 700 33px var(--hand); }
.section-heading p { margin: 0 0 6px; font: 14px var(--hand); color: #a36d98; }
.polaroid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.polaroid { appearance: none; padding: 8px 8px 12px; border: 1px solid #d2b8c9; color: var(--ink); background: #fff; box-shadow: 4px 5px 0 rgba(125,74,130,.17); cursor: pointer; transition: .2s; }
.polaroid:hover { z-index: 2; transform: rotate(0) scale(1.06); box-shadow: 7px 9px 0 rgba(125,74,130,.2); }
.tilt-left { transform: rotate(-2.5deg); }
.tilt-right { transform: rotate(2.5deg); }
.tilt-left-small { transform: rotate(-1deg); }
.photo { position: relative; display: block; height: 128px; overflow: hidden; border: 1px solid #a57799; }
.caption { display: block; padding-top: 8px; text-align: center; font: 16px var(--hand); }
.strawberry-photo { background: linear-gradient(#bce2ef 45%, #dce9c5 46%); }
.check-cloth { position: absolute; right: -12px; bottom: -21px; width: 120px; height: 77px; transform: rotate(-13deg); background: conic-gradient(#fff 25%,#f68cad 0 50%,#fff 0 75%,#f68cad 0) 0/18px 18px; border: 2px solid #98617e; }
.berry { position: absolute; z-index: 2; color: #ed4f70; font-size: 33px; text-shadow: 1px 1px #823951; font-style: normal; transform: rotate(180deg); }
.berry::after { content: '✦'; position: absolute; color: #5ba66d; font-size: 12px; left: 8px; top: -2px; }
.berry-a { left: 20px; bottom: 20px; }
.berry-b { left: 70px; bottom: 9px; font-size: 27px; }
.berry-c { right: 16px; top: 15px; font-size: 24px; }
.city-photo { background: linear-gradient(#37325d, #85517e 65%, #f5a2b7); }
.city-photo .moon { position: absolute; left: 15px; top: 10px; color: #fff6c8; font-size: 38px; font-style: normal; }
.tower { position: absolute; width: 20px; height: 90px; background: #4b304f; bottom: 0; left: 50%; box-shadow: -36px 24px 0 7px #523451, 45px 34px 0 13px #49324e; }
.tower::before { content: ''; position: absolute; left: -8px; top: -21px; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 23px solid #4b304f; }
.city-photo em, .city-photo small { position: absolute; z-index: 2; color: #ff9fc8; font: 14px var(--pixel); text-shadow: 0 0 5px #ff9fc8; font-style: normal; }
.city-photo em { right: 10px; top: 13px; writing-mode: vertical-rl; }
.city-photo small { left: 13px; bottom: 10px; color: #9ff5e0; }
.cloud-photo { background: linear-gradient(#9fcbe8, #eecde2); }
.cloud-photo i { position: absolute; color: white; font-style: normal; filter: drop-shadow(2px 3px #c9a6c2); }
.cloud-photo i:nth-child(1) { font-size: 59px; top: 3px; left: 9px; }
.cloud-photo i:nth-child(2) { font-size: 70px; top: 37px; right: 5px; }
.cloud-photo i:nth-child(3) { font-size: 39px; top: 4px; right: 8px; }
.cloud-photo b { position: absolute; left: 40%; top: 44%; color: var(--yellow); font-size: 31px; text-shadow: 1px 1px var(--pink); }

.guestbook-intro { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.guestbook-intro .envelope { display: grid; place-items: center; flex: 0 0 54px; height: 43px; border: 2px solid var(--line); background: var(--blush); box-shadow: 3px 3px var(--yellow); font-size: 25px; }
.guestbook-intro h2 { margin: 0; font: 700 25px var(--hand); }
.guestbook-intro p { margin: -3px 0 0; font: 13px var(--hand); }
#guestbook-form { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 8px; align-items: end; }
#guestbook-form label { font: 10px var(--pixel); }
#guestbook-form input, #guestbook-form textarea { display: block; width: 100%; min-height: 44px; margin-top: 4px; padding: 9px; border: 1px solid var(--line); border-radius: 0; color: var(--ink); background: #fff8fb; outline: none; resize: vertical; font: 14px var(--hand); }
#guestbook-form textarea { height: 44px; }
#guestbook-form input:focus, #guestbook-form textarea:focus { box-shadow: 0 0 0 2px var(--blush); }
#guestbook-form button { min-height: 44px; padding: 8px 12px; border: 2px solid var(--line); color: white; background: var(--pink); box-shadow: 2px 2px var(--line); cursor: pointer; font: 11px var(--pixel); }
#guestbook-form button:hover { background: var(--hot-pink); }
.guestbook-messages { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.guest-note { padding: 7px 10px; border-left: 3px solid var(--pink); background: #fff4f9; font: 14px var(--hand); }
.guest-note b { color: var(--hot-pink); }

.album-art { position: relative; height: 130px; overflow: hidden; border: 2px solid var(--line); background: linear-gradient(165deg, transparent 0 60%, rgba(115,70,113,.18) 61% 63%, transparent 64%), linear-gradient(#f8a9c9 0 56%, #ffc071 57%); isolation: isolate; }
.album-art::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .38; background-image: linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px); background-size: 13px 13px; transform: rotate(-5deg) scale(1.2); }
.album-art::after { content: '୨୧'; position: absolute; left: 12px; top: 33px; color: #fff7df; font: 31px var(--round); text-shadow: 2px 2px 0 var(--hot-pink); transform: rotate(-12deg); }
.album-sparkles { position: absolute; z-index: 2; top: 6px; left: 10px; color: white; font: 11px var(--pixel); text-shadow: 1px 1px 0 var(--hot-pink); }
.orange-slice { position: absolute; z-index: 1; top: 14px; right: 12px; width: 91px; height: 91px; display: grid; place-items: center; border: 4px solid #fff7df; border-radius: 50%; outline: 2px solid var(--line); background: repeating-conic-gradient(from 7deg, #ff9a35 0 27deg, #ffe6ac 28deg 32deg); box-shadow: 5px 6px 0 rgba(91,49,91,.2); transform: rotate(8deg); }
.orange-slice i { width: 25px; height: 25px; border: 3px solid #fff7df; border-radius: 50%; background: #ffc663; }
.album-art b { position: absolute; z-index: 3; left: 8px; bottom: 26px; padding: 4px 7px; border: 1px solid var(--line); color: white; background: var(--hot-pink); box-shadow: 2px 2px 0 var(--line); font: 13px var(--pixel); transform: rotate(-4deg); }
.album-art em { position: absolute; z-index: 3; right: 8px; bottom: 6px; color: var(--ink); font: 8px var(--pixel); font-style: normal; letter-spacing: .5px; }
.album-art small { position: absolute; z-index: 3; left: 8px; bottom: 7px; color: var(--ink); font: 11px var(--hand); }
.track-info { display: flex; flex-direction: column; margin-top: 10px; text-align: center; }
.track-info b { font: 16px var(--pixel); }
.track-info span { min-height: 35px; margin-top: 2px; font: 14px/1.2 var(--hand); color: #9a6b96; }
.youtube-engine { position: fixed; left: -10000px; top: 0; width: 200px; height: 200px; overflow: hidden; opacity: .001; pointer-events: none; }
.music-player input[type="range"] { appearance: none; height: 44px; padding: 0; border: 0; background: transparent; accent-color: var(--hot-pink); cursor: pointer; }
.music-player input[type="range"]::-webkit-slider-runnable-track { height: 4px; border: 1px solid var(--line); border-radius: 3px; background: #f6deeb; }
.music-player input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -7px; border: 2px solid white; border-radius: 50%; background: var(--deep); box-shadow: 0 0 0 1px var(--line); }
.music-player input[type="range"]::-moz-range-track { height: 4px; border: 1px solid var(--line); border-radius: 3px; background: #f6deeb; }
.music-player input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid white; border-radius: 50%; background: var(--deep); box-shadow: 0 0 0 1px var(--line); }
.progress { width: 100%; margin: -3px 0 1px; }
.player-controls { display: flex; align-items: center; justify-content: center; gap: 18px; font: 11px var(--pixel); }
.player-controls button { width: 44px; height: 44px; border: 2px solid var(--line); border-radius: 50%; color: white; background: var(--hot-pink); cursor: pointer; box-shadow: 2px 2px var(--line); }
.volume-control { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 4px; margin: 2px 0 -7px; }
.volume-control label { color: var(--hot-pink); font: 9px var(--pixel); }
.volume-control span { color: #a982a5; font: 11px var(--pixel); }
.volume-control input { width: 100%; min-width: 0; }
.equalizer { height: 22px; display: flex; justify-content: center; align-items: end; gap: 3px; margin-top: 8px; }
.equalizer i { width: 4px; height: 3px; background: var(--pink); }
.equalizer.playing i { animation: equalize .75s ease-in-out infinite alternate; }
.equalizer.playing i:nth-child(2), .equalizer.playing i:nth-child(6) { animation-delay: -.2s; }
.equalizer.playing i:nth-child(3), .equalizer.playing i:nth-child(5) { animation-delay: -.55s; }
.equalizer.playing i:nth-child(4) { animation-delay: -.35s; }
.player-note { display: block; margin-top: 5px; text-align: center; color: #a982a5; font: 11px var(--hand); }
.currently-card ul { list-style: none; padding: 0; margin: 0; }
.currently-card li { display: flex; flex-direction: column; padding: 8px 4px; border-bottom: 1px dashed #dfb3cf; }
.currently-card li:last-child { border: 0; }
.currently-card li span { color: var(--hot-pink); font: 9px var(--pixel); }
.currently-card li b { padding-top: 2px; font: 16px var(--hand); }
.clock-card .window-body { text-align: center; background: linear-gradient(135deg,#4d3a63,#745273); color: white; }
#clock { display: block; letter-spacing: 2px; font: 24px var(--pixel); text-shadow: 2px 2px var(--hot-pink); }
.clock-card small { font: 12px var(--hand); }
.web-club { padding: 13px; text-align: center; border: 2px solid var(--line); background: var(--mint); box-shadow: var(--shadow); }
.club-seal { width: 110px; height: 110px; margin: 0 auto 8px; padding-top: 23px; border: 3px double var(--line); border-radius: 50%; outline: 2px dashed var(--hot-pink); outline-offset: 4px; background: var(--cream); font: 9px/1.7 var(--pixel); transform: rotate(4deg); }
.club-seal b { color: var(--hot-pink); font-size: 13px; }
.web-club p { margin: 9px 0 0; font: 13px var(--hand); }
.web-club > strong { font: 12px var(--pixel); }
.web-club > small { display: block; margin-top: 5px; font: 10px/1.3 var(--hand); }
.link-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.link-badges span { display: grid; place-items: center; min-height: 31px; padding: 3px; text-align: center; border: 2px outset #fff; color: white; background: #8f6090; text-shadow: 1px 1px #563a62; font: 8px var(--pixel); }
.link-badges span:nth-child(2) { background: var(--hot-pink); }
.link-badges span:nth-child(3) { color: var(--ink); background: var(--yellow); }
.link-badges span:nth-child(4) { color: var(--ink); background: var(--blue); }

footer { border-top: 3px solid var(--line); text-align: center; background: #fff6fa; }
.footer-ribbon { padding: 9px; color: white; background: var(--ink); font: 12px var(--pixel); }
footer p { margin: 10px 0 3px; font: 13px var(--hand); }
footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--hot-pink); }
footer .resolution { margin: 2px 0 12px; font: 8px var(--pixel); color: #9d789b; }

#gallery-dialog { width: min(390px, calc(100% - 30px)); padding: 28px; border: 3px solid var(--line); color: var(--ink); background: #fff8fb; box-shadow: 9px 9px 0 var(--pink); text-align: center; }
#gallery-dialog::backdrop { background: rgba(61,37,69,.68); backdrop-filter: blur(4px); }
.dialog-close { position: absolute; right: 5px; top: 4px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; font: 22px var(--pixel); }
.dialog-art { width: 120px; height: 120px; margin: 0 auto 15px; display: grid; place-items: center; border: 2px dashed var(--line); border-radius: 50%; color: white; background: repeating-radial-gradient(circle,#ffd7e8 0 10px,#c9e7ef 11px 21px,#ffe795 22px 31px); text-shadow: 2px 2px var(--hot-pink); font-size: 50px; animation: spin-slow 12s linear infinite; }
.dialog-kicker { margin: 0; font: 9px var(--pixel); color: var(--hot-pink); letter-spacing: 2px; }
#gallery-dialog h2 { margin: 5px 0; font: 700 31px var(--hand); }
#gallery-dialog > p:not(.dialog-kicker) { font: 17px var(--hand); }
#gallery-dialog > span { font: 9px var(--pixel); color: #a67da0; }
#love-toast { position: fixed; z-index: 200; left: 50%; bottom: -80px; transform: translateX(-50%); padding: 12px 19px; border: 2px solid var(--line); color: white; background: var(--hot-pink); box-shadow: 4px 4px 0 var(--ink); font: 12px var(--pixel); transition: bottom .35s cubic-bezier(.2,.8,.2,1.2); }
#love-toast.show { bottom: 28px; }
.cursor-spark { position: fixed; z-index: 300; pointer-events: none; color: var(--hot-pink); text-shadow: 1px 1px white; animation: sparkle-fall .8s ease-out forwards; }

@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 300px)); } }
@keyframes twinkle { 50% { opacity: .4; transform: scale(.8); } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes float { 50% { transform: translateY(-7px) rotate(6deg); } }
@keyframes equalize { from { height: 3px; } to { height: 21px; } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes sparkle-fall { to { transform: translateY(25px) rotate(90deg) scale(0); opacity: 0; } }

@media (max-width: 980px) {
  .layout { grid-template-columns: 190px minmax(0,1fr); }
  .right-column { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,1fr); align-items: start; }
  .right-column .music-player { grid-row: span 2; }
  .right-column .link-badges { grid-column: span 2; }
  .right-column .web-club { grid-row: span 2; }
}
@media (max-width: 720px) {
  .page-shell { width: calc(100% - 14px); margin: 7px auto; box-shadow: 5px 5px 0 rgba(125,74,130,.2); }
  .masthead { min-height: 145px; }
  .heart-sticker { left: 2%; top: 36px; width: 68px; height: 61px; }
  .heart-sticker span { font-size: 10px; }
  .mascot { right: 1%; transform: scale(.72); transform-origin: top right; }
  .eyebrow { font-size: 10px; letter-spacing: 2px; }
  h1 { font-size: clamp(45px,15vw,65px); -webkit-text-stroke-width: 2px; }
  .tagline { font-size: 15px; }
  .main-nav { overflow-x: auto; justify-content: flex-start; }
  .main-nav a { min-width: 114px; font-size: 12px; }
  .layout { grid-template-columns: 1fr; padding: 12px; }
  .left-column { display: grid; grid-template-columns: 1fr 1fr; }
  .tiny-widget { grid-column: 1 / -1; }
  .hero-card { grid-template-columns: 1fr; }
  .hero-copy { padding: 45px 27px 25px; }
  .hero-art { min-height: 210px; }
  .polaroid-grid { gap: 5px; }
  .photo { height: 100px; }
  .caption { font-size: 12px; }
  .right-column { grid-template-columns: 1fr 1fr; }
  .right-column .music-player, .right-column .web-club { grid-row: auto; }
  #guestbook-form { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .heart-sticker { display: none; }
  .mascot { opacity: .55; right: -16px; }
  .logo-wrap { transform: translateX(-11px); }
  .main-nav { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; }
  .main-nav a { min-width: 0; border: 1px dashed #dfacce; }
  .left-column, .right-column { display: flex; }
  .profile-card .window-body { display: grid; grid-template-columns: 100px 1fr; column-gap: 10px; align-items: center; text-align: left; }
  .avatar-frame { grid-row: span 4; width: 96px; height: 96px; }
  .mini-facts { grid-column: 1 / -1; width: 100%; }
  .avatar-hair { left: 10px; }
  .avatar-face { left: 18px; }
  .polaroid-grid { grid-template-columns: 1fr 1fr; }
  .polaroid:last-child { grid-column: 1 / -1; width: 60%; justify-self: center; }
  .diary-page { grid-template-columns: 1fr; }
  .date-card { width: 100%; height: 48px; grid-template-columns: 52px 38px; justify-content: center; }
  .section-heading p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}