:root {
  --pink: #FFA6C9;
  --pink-deep: #F178AD;
  --pink-soft: #FFD8E8;
  --pink-mist: #FFF0F5;
  --blue: #A2D2FF;
  --blue-deep: #75B5F3;
  --blue-soft: #DCEEFF;
  --accent: #FFF9C4;
  --paper: #FFF8FB;
  --paper-warm: #FFF4F8;
  --text: #8B6C7B;
  --text-soft: #A88998;
  --warm-gray: #66615F;
  --shadow-pink: 0 12px 32px rgba(255, 166, 201, .34);
  --shadow-blue: 0 12px 30px rgba(162, 210, 255, .32);
  --font-main: "Arial Rounded MT Bold", "Microsoft YaHei", "YouYuan", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--pink-mist); font-family: var(--font-main); font-weight: 650; line-height: 1.72; overflow-x: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img, video, canvas { max-width: 100%; }
button { color: var(--text); }

.page-pattern { position: fixed; inset: 0; z-index: -5; background-image: linear-gradient(45deg, rgba(255,166,201,.075) 25%, transparent 25%, transparent 75%, rgba(255,166,201,.075) 75%), linear-gradient(45deg, rgba(162,210,255,.07) 25%, transparent 25%, transparent 75%, rgba(162,210,255,.07) 75%); background-position: 0 0, 22px 22px; background-size: 44px 44px; }
.page-pattern::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 16% 12%, rgba(255,249,196,.42), transparent 25%), radial-gradient(circle at 85% 24%, rgba(162,210,255,.25), transparent 28%), radial-gradient(circle at 58% 84%, rgba(255,166,201,.2), transparent 30%); }
.shell { width: min(1180px, calc(100% - 44px)); margin: 0 auto; }
.section { position: relative; padding: 110px 0; }
.section-soft { background: rgba(255, 246, 250, .62); }

.site-header { position: fixed; top: 18px; left: 50%; z-index: 80; display: flex; align-items: center; justify-content: space-between; width: min(1180px, calc(100% - 36px)); min-height: 68px; padding: 9px 12px 9px 18px; transform: translateX(-50%); border: 4px solid rgba(255,248,251,.94); border-radius: 28px; background: rgba(255, 244, 248, .9); box-shadow: 0 12px 30px rgba(255,166,201,.24); backdrop-filter: blur(14px); }
.site-header::after { content: ""; position: absolute; inset: 7px; z-index: -1; border: 2px dashed rgba(255,166,201,.4); border-radius: 20px; pointer-events: none; }
.mini-brand { display: inline-flex; align-items: center; gap: 9px; min-width: 190px; padding: 8px 12px; border-radius: 18px; color: var(--text); }
.brand-dot { display: grid; place-items: center; width: 30px; height: 30px; border: 3px solid var(--paper); border-radius: 50%; background: var(--pink); color: var(--paper); box-shadow: 0 5px 13px rgba(255,166,201,.26); }
.mini-brand strong { font-size: .96rem; letter-spacing: .02em; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a { position: relative; padding: 10px 12px; border-radius: 999px; font-size: .82rem; transition: .2s ease; }
.site-nav a:hover { background: var(--pink-soft); transform: translateY(-2px); }
.site-nav .nav-live { padding-inline: 16px; background: var(--blue-soft); border: 3px solid var(--paper); box-shadow: var(--shadow-blue); }
.menu-toggle { display: none; width: 46px; height: 46px; border: 3px solid var(--paper); border-radius: 16px; background: var(--pink-soft); cursor: pointer; }
.menu-toggle span { display: block; width: 21px; height: 3px; margin: 4px auto; border-radius: 99px; background: var(--text); }

.hero { min-height: 100vh; padding: 118px 0 72px; display: flex; align-items: center; }
.hero-shell { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 50px; min-height: 750px; }
.hero-copy { position: relative; z-index: 4; padding: 40px 0 30px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 4px solid var(--paper); border-radius: 999px; background: var(--accent); box-shadow: 0 7px 20px rgba(255,249,196,.45); color: var(--text); font-size: .82rem; transform: rotate(-1deg); }
.hero-title { margin: 26px 0 0; color: var(--pink-deep); font-size: clamp(3rem, 5.4vw, 5.8rem); line-height: 1.05; letter-spacing: -.035em; -webkit-text-stroke: 2px #FFFDFE; paint-order: stroke fill; text-shadow: 0 7px 0 rgba(162,210,255,.23), 0 16px 24px rgba(255,166,201,.26); }
.hero-title em { display: inline-block; margin-top: 9px; color: var(--blue-deep); font-style: normal; transform: rotate(-1deg); }
.hero-desc { max-width: 560px; margin: 28px 0 0; color: var(--warm-gray); font-size: 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.pill-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 58px; padding: 12px 22px; border: 5px solid var(--paper); border-radius: 999px; font-weight: 900; box-shadow: var(--shadow-pink); transition: .22s ease; overflow: visible; }
.pill-btn::before, .pill-btn::after { content: "✦"; position: absolute; opacity: 0; color: #E4C84C; transition: .2s ease; pointer-events: none; }
.pill-btn::before { left: 12%; top: -12px; }
.pill-btn::after { right: 8%; bottom: -14px; }
.pill-btn:hover { transform: scale(1.055) translateY(-2px); filter: saturate(1.08); box-shadow: 0 14px 36px rgba(255,166,201,.5); }
.pill-btn:hover::before, .pill-btn:hover::after { opacity: 1; transform: scale(1.25) rotate(16deg); }
.pill-btn--pink { background: var(--pink); }
.pill-btn--blue { background: var(--blue); box-shadow: var(--shadow-blue); }
.hero-mini-notes { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.hero-mini-notes span { padding: 7px 12px; border: 3px solid var(--paper); border-radius: 999px; background: rgba(255,248,251,.83); box-shadow: 0 6px 16px rgba(255,166,201,.14); font-size: .76rem; }
.hero-note-card { position: relative; width: min(470px, 92%); margin-top: 30px; padding: 18px 22px 18px 56px; border: 4px solid var(--paper); border-radius: 24px 32px 26px 30px; background: linear-gradient(135deg, rgba(255,216,232,.75), rgba(220,238,255,.78)); box-shadow: 0 10px 24px rgba(162,210,255,.18); transform: rotate(.7deg); }
.hero-note-card strong { display: block; color: var(--pink-deep); }
.hero-note-card p { margin: 3px 0 0; color: var(--warm-gray); font-size: .82rem; }
.note-pin { position: absolute; left: 16px; top: 18px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #C9AC37; }

.hero-character-wrap { position: relative; min-height: 720px; display: grid; place-items: end center; perspective: 1200px; }
.character-halo { position: absolute; left: 50%; border-radius: 50%; transform: translateX(-50%); }
.halo-one { width: min(620px, 92%); height: 620px; bottom: 52px; border: 6px solid rgba(255,248,251,.9); background: linear-gradient(145deg, rgba(162,210,255,.56), rgba(255,216,232,.58)); box-shadow: 0 18px 42px rgba(255,166,201,.23); }
.halo-two { width: min(510px, 78%); height: 570px; bottom: 72px; border: 5px dashed rgba(255,166,201,.62); background: transparent; }
.character-dots { position: absolute; left: 50%; bottom: 78px; width: min(560px, 86%); height: 520px; transform: translateX(-50%); border-radius: 48%; background-image: radial-gradient(circle, rgba(255,249,196,.95) 0 4px, transparent 5px); background-size: 67px 67px; opacity: .88; }
.live2d-shell { position: relative; z-index: 4; width: min(610px, 100%); height: 700px; overflow: visible; }
#live2d-canvas { display: none; width: 100%; height: 100%; }
.hero-character-fallback { position: absolute; left: 50%; bottom: 24px; width: min(520px, 92%); max-height: 680px; object-fit: contain; transform: translateX(-50%); transform-origin: 50% 85%; filter: drop-shadow(0 18px 22px rgba(255,166,201,.24)); animation: characterFloat 4s ease-in-out infinite; }
.hero-badge { position: absolute; z-index: 7; display: grid; place-items: center; min-width: 112px; min-height: 84px; padding: 10px 14px; border: 6px solid var(--paper); border-radius: 26px 30px 24px 28px; text-align: center; line-height: 1.4; font-size: .82rem; box-shadow: var(--shadow-pink); animation: stickerFloat 5s ease-in-out infinite; }
.badge-left { left: -1%; top: 30%; background: var(--accent); transform: rotate(-6deg); }
.badge-right { right: -1%; top: 39%; background: var(--blue-soft); transform: rotate(5deg); animation-delay: -2.2s; }
.hero-ribbon { position: absolute; z-index: 8; bottom: 4px; left: 50%; width: 72%; padding: 10px 18px; transform: translateX(-50%); border: 5px solid var(--paper); border-radius: 999px; background: var(--paper-warm); box-shadow: 0 7px 18px rgba(255,166,201,.18); color: var(--pink-deep); text-align: center; letter-spacing: .5em; }
.scroll-hint { position: absolute; left: 50%; bottom: 20px; display: inline-flex; align-items: center; gap: 7px; transform: translateX(-50%); color: var(--text-soft); font-size: .78rem; }
.scroll-hint span { animation: bounce 1.7s ease-in-out infinite; }

.section-heading { width: min(760px, 100%); margin: 0 auto 46px; text-align: center; }
.section-heading--left { margin-left: 0; text-align: left; }
.section-kicker { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-deep); font-size: .78rem; }
.sticker-title { margin: 10px 0 5px; color: var(--pink-deep); font-size: clamp(2.35rem, 4vw, 4rem); line-height: 1.15; -webkit-text-stroke: 2px #FFFDFE; paint-order: stroke fill; text-shadow: 0 5px 0 rgba(162,210,255,.2), 0 10px 20px rgba(255,166,201,.2); }
.section-heading p { margin: 8px auto 0; color: var(--warm-gray); }
.section-heading--left p { margin-left: 0; }

.journal-book { position: relative; display: grid; grid-template-columns: 1fr 12px 1fr; padding: 16px; border: 7px solid var(--paper); border-radius: 42px; background: linear-gradient(90deg, #FFE1EC, #EDF6FF); box-shadow: var(--shadow-pink); }
.journal-page { position: relative; min-height: 610px; padding: 44px 42px; border: 2px dashed rgba(255,166,201,.55); background: var(--paper-warm); overflow: hidden; }
.profile-page { border-radius: 30px 12px 12px 30px; }
.schedule-page { border-radius: 12px 30px 30px 12px; }
.journal-spine { border-radius: 999px; background: linear-gradient(90deg, rgba(255,166,201,.16), rgba(139,108,123,.12), rgba(162,210,255,.16)); }
.book-ring { position: absolute; z-index: 7; left: 50%; width: 38px; height: 13px; transform: translateX(-50%); border-radius: 999px; background: var(--pink-deep); box-shadow: 0 4px 0 rgba(255,248,251,.9); }
.book-ring.r1 { top: 21%; } .book-ring.r2 { top: 49%; } .book-ring.r3 { top: 77%; }
.tape { position: absolute; width: 124px; height: 32px; top: 8px; background: repeating-linear-gradient(135deg, rgba(255,248,251,.72) 0 10px, transparent 10px 20px); opacity: .88; transform: rotate(-4deg); }
.tape--pink { left: 38px; background-color: rgba(255,166,201,.68); }
.tape--blue { right: 38px; background-color: rgba(162,210,255,.72); transform: rotate(4deg); }
.profile-top { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 26px; }
.profile-polaroid { padding: 12px 12px 18px; border: 6px solid var(--paper); border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-pink); transform: rotate(-3deg); text-align: center; }
.profile-polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 20px; background: var(--blue-soft); }
.profile-polaroid p { margin: 10px 0 0; font-size: .75rem; }
.profile-summary h3 { margin: 0; color: var(--pink-deep); font-size: 2rem; }
.hand-note { margin: 10px 0 0; padding: 13px 16px; border-radius: 18px; background: var(--accent); color: var(--warm-gray); transform: rotate(1deg); }
.profile-list { display: grid; gap: 12px; margin: 30px 0 0; }
.profile-list div { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 12px 16px; border: 3px solid var(--paper); border-radius: 18px; background: var(--pink-soft); }
.profile-list div:nth-child(even) { background: var(--blue-soft); }
.profile-list dt { color: var(--pink-deep); font-weight: 900; }
.profile-list dd { margin: 0; color: var(--warm-gray); }
.corner-sticker { position: absolute; right: 24px; bottom: 16px; color: var(--blue-deep); font-size: 2.2rem; transform: rotate(7deg); }
.page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.page-title-row h3 { margin: 2px 0 0; color: var(--pink-deep); font-size: 1.75rem; }
.small-label { color: var(--blue-deep); font-size: .72rem; }
.tiny-calendar { display: grid; place-items: center; width: 66px; height: 66px; border: 5px solid var(--paper); border-radius: 22px; background: var(--blue-soft); text-align: center; font-size: .68rem; line-height: 1.25; transform: rotate(4deg); }
.tiny-calendar b { color: var(--pink-deep); font-size: 1.1rem; }
.schedule-list { display: grid; gap: 9px; margin-top: 25px; }
.schedule-row { display: grid; grid-template-columns: 64px 1fr 76px; align-items: center; gap: 10px; min-height: 49px; padding: 6px 12px; border: 4px solid var(--paper); border-radius: 18px; background: var(--pink-soft); box-shadow: 0 5px 13px rgba(255,166,201,.12); }
.schedule-row:nth-child(even) { background: var(--blue-soft); }
.schedule-day { color: var(--pink-deep); font-weight: 900; }
.schedule-topic { color: var(--warm-gray); font-size: .82rem; }
.schedule-time { justify-self: end; padding: 5px 9px; border-radius: 999px; background: rgba(255,248,251,.72); font-size: .72rem; }
.schedule-note { margin: 18px 0 0; padding: 12px 15px; border-radius: 16px; background: var(--accent); color: var(--warm-gray); font-size: .76rem; }

.media-section { background: linear-gradient(180deg, rgba(220,238,255,.34), rgba(255,240,245,.3)); }
.clip-layout { display: grid; grid-template-columns: 1.55fr .75fr; gap: 30px; align-items: stretch; }
.stitched-card { position: relative; border: 7px solid var(--paper); border-radius: 36px; box-shadow: var(--shadow-pink); }
.stitched-card::after { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(255,166,201,.45); border-radius: 25px; pointer-events: none; }
.tv-card { padding: 35px 30px 26px; background: linear-gradient(145deg, var(--pink), #FBC7DD); }
.tv-antenna { position: absolute; left: 50%; top: -35px; display: flex; gap: 56px; transform: translateX(-50%); }
.tv-antenna i { width: 6px; height: 50px; border-radius: 99px; background: var(--blue-deep); transform-origin: bottom; }
.tv-antenna i:first-child { transform: rotate(-28deg); } .tv-antenna i:last-child { transform: rotate(28deg); }
.tv-screen { position: relative; z-index: 2; overflow: hidden; aspect-ratio: 16 / 9; border: 10px solid var(--paper); border-radius: 34px; background: #F7EAF0; box-shadow: inset 0 0 0 4px rgba(162,210,255,.34); }
.tv-screen video { display: block; width: 100%; height: 100%; object-fit: cover; background: #F7EAF0; }
.tv-bottom { position: relative; z-index: 2; display: grid; grid-template-columns: 74px 1fr 76px; align-items: center; gap: 16px; padding-top: 19px; }
.speaker-dots { width: 68px; height: 42px; background-image: radial-gradient(circle, var(--blue-deep) 0 3px, transparent 4px); background-size: 14px 14px; opacity: .68; }
.tv-caption strong, .tv-caption span { display: block; }
.tv-caption strong { color: var(--warm-gray); }
.tv-caption span { color: var(--text); font-size: .75rem; }
.tv-knobs { display: flex; gap: 8px; }
.tv-knobs span { width: 29px; height: 29px; border: 5px solid var(--paper); border-radius: 50%; background: var(--blue); }
.tv-heart { position: absolute; right: -18px; top: 28px; display: grid; place-items: center; width: 58px; height: 58px; border: 5px solid var(--paper); border-radius: 50%; background: var(--accent); color: var(--pink-deep); font-size: 1.5rem; }
.clip-shelf { padding: 34px 26px; background: var(--paper-warm); }
.clip-shelf h3 { position: relative; z-index: 2; margin: 0; color: var(--pink-deep); font-size: 1.5rem; }
.shelf-bow { position: absolute; right: 24px; top: 18px; z-index: 3; color: var(--blue-deep); font-size: 2rem; transform: rotate(8deg); }
.clip-list { position: relative; z-index: 3; display: grid; gap: 12px; margin-top: 20px; }
.clip-item { display: grid; grid-template-columns: 86px 1fr; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 4px solid var(--paper); border-radius: 20px; background: var(--blue-soft); text-align: left; cursor: pointer; transition: .2s ease; }
.clip-item:nth-child(even) { background: var(--pink-soft); }
.clip-item:hover, .clip-item.is-active { transform: translateX(4px) rotate(-.5deg); box-shadow: 0 7px 17px rgba(255,166,201,.18); }
.clip-item img { width: 86px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }
.clip-item strong, .clip-item small { display: block; }
.clip-item strong { color: var(--warm-gray); }
.clip-item small { margin-top: 3px; color: var(--text-soft); font-size: .68rem; }
.shelf-note { position: relative; z-index: 2; margin-top: 18px; padding: 12px; border-radius: 16px; background: var(--accent); font-size: .74rem; }

.music-section { background: rgba(255,246,250,.62); }
.music-tabs { display: flex; justify-content: center; gap: 10px; margin: -18px auto 30px; }
.music-tabs button { min-width: 150px; padding: 10px 16px; border: 4px solid var(--paper); border-radius: 999px; background: var(--blue-soft); box-shadow: var(--shadow-blue); cursor: pointer; transition: .2s ease; }
.music-tabs button.is-active { background: var(--pink); box-shadow: var(--shadow-pink); transform: translateY(-2px); }
.music-panel { display: none; }
.music-panel.is-active { display: block; }
.walkman, .request-book { width: min(880px, 100%); margin: 0 auto; padding: 36px; background: linear-gradient(145deg, #FBE0EC, #EAF5FF); }
.walkman-topline, .request-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.walkman-topline h3, .request-head h3 { margin: 2px 0 0; color: var(--pink-deep); font-size: 1.65rem; }
.cassette-icon { display: grid; place-items: center; width: 56px; height: 56px; border: 5px solid var(--paper); border-radius: 18px; background: var(--accent); color: var(--pink-deep); font-size: 1.4rem; transform: rotate(6deg); }
.now-playing { position: relative; z-index: 2; display: grid; grid-template-columns: 210px 1fr; align-items: center; gap: 30px; margin-top: 28px; padding: 24px; border: 5px solid var(--paper); border-radius: 30px; background: rgba(255,248,251,.72); }
.album-art { position: relative; padding: 10px; border: 5px solid var(--paper); border-radius: 28px; background: var(--pink-soft); box-shadow: var(--shadow-pink); transform: rotate(-2deg); }
.album-art img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 20px; }
.album-spark { position: absolute; right: -15px; top: -15px; display: grid; place-items: center; width: 42px; height: 42px; border: 4px solid var(--paper); border-radius: 50%; background: var(--accent); color: #C9AC37; }
.track-meta small, .track-meta strong, .track-meta > span { display: block; }
.track-meta small { color: var(--blue-deep); }
.track-meta strong { margin-top: 4px; color: var(--warm-gray); font-size: 1.8rem; }
.track-meta > span { color: var(--text-soft); }
.progress-shell { height: 12px; margin-top: 22px; overflow: hidden; border: 3px solid var(--paper); border-radius: 999px; background: var(--blue-soft); cursor: pointer; }
.progress-shell span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--pink); }
.time-row { display: flex; justify-content: space-between; margin-top: 6px; color: var(--text-soft); font-size: .68rem; }
.player-controls { position: relative; z-index: 2; display: flex; justify-content: center; gap: 14px; margin: 25px 0 18px; }
.player-controls button { display: grid; place-items: center; width: 50px; height: 50px; border: 5px solid var(--paper); border-radius: 50%; background: var(--blue); cursor: pointer; transition: .2s ease; }
.player-controls .play-main { width: 64px; height: 64px; background: var(--pink); box-shadow: var(--shadow-pink); }
.player-controls button:hover { transform: scale(1.08); }
.playlist { position: relative; z-index: 2; display: grid; gap: 8px; }
.playlist-item { display: grid; grid-template-columns: 48px 1fr 34px; align-items: center; width: 100%; padding: 10px 14px; border: 3px solid var(--paper); border-radius: 18px; background: rgba(255,248,251,.75); text-align: left; cursor: pointer; }
.playlist-item.is-active { background: var(--accent); }
.track-number { color: var(--pink-deep); }
.track-name small { display: block; color: var(--text-soft); }
.track-length { color: var(--blue-deep); }
.request-book { width: min(1050px, 100%); }
.request-search-wrap { position: relative; width: min(350px, 100%); }
.request-search-wrap input { width: 100%; padding: 12px 42px 12px 16px; border: 4px solid var(--paper); border-radius: 999px; outline: 0; background: var(--paper); }
.request-search-wrap span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--pink-deep); font-size: 1.2rem; }
.request-song-list { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 25px; }
.request-song { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 92px; padding: 15px 16px; border: 4px solid var(--paper); border-radius: 22px; background: var(--pink-soft); }
.request-song:nth-child(even) { background: var(--blue-soft); }
.request-song strong, .request-song span, .request-song small { display: block; }
.request-song strong { color: var(--pink-deep); }
.request-song span { color: var(--warm-gray); font-size: .8rem; }
.request-song small { color: var(--text-soft); font-size: .68rem; }
.request-song button { flex: 0 0 auto; padding: 9px 12px; border: 4px solid var(--paper); border-radius: 999px; background: var(--accent); cursor: pointer; transition: .2s ease; font-size: .75rem; }
.request-song button:hover { transform: scale(1.05) rotate(-1deg); box-shadow: 0 8px 18px rgba(255,166,201,.22); }
.request-bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding: 14px 18px; border-radius: 20px; background: rgba(255,248,251,.7); }
.request-bottom p { margin: 0; color: var(--warm-gray); font-size: .78rem; }
.tiny-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 7px 14px; border: 4px solid var(--paper); border-radius: 999px; background: var(--blue-soft); box-shadow: var(--shadow-blue); white-space: nowrap; transition: .2s ease; }
.tiny-pill:hover { transform: scale(1.05); }
.empty-state { padding: 28px; border: 3px dashed rgba(255,166,201,.45); border-radius: 22px; background: rgba(255,248,251,.72); text-align: center; color: var(--text-soft); }

.gallery-section { background: linear-gradient(180deg, rgba(220,238,255,.24), rgba(255,240,245,.44)); }
.perks-strip { display: flex; align-items: center; gap: 20px; padding: 22px 26px; background: var(--paper-warm); }
.perks-strip::after { inset: 8px; border-radius: 23px; }
.perks-title { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; min-width: 160px; }
.perks-title > span { color: var(--pink-deep); font-size: 2rem; }
.perks-title strong { display: block; color: var(--pink-deep); }
.perk-chips { position: relative; z-index: 2; display: flex; flex: 1; flex-wrap: wrap; gap: 8px; }
.perk-chip { padding: 7px 10px; border: 3px solid var(--paper); border-radius: 999px; background: var(--accent); font-size: .72rem; }
.gallery-wall { columns: 3 280px; column-gap: 24px; margin-top: 38px; }
.polaroid { --tilt: -2deg; break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 26px; padding: 14px 14px 24px; border: 7px solid var(--paper); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow-pink); transform: rotate(var(--tilt)); transition: .25s ease; }
.polaroid:hover { transform: rotate(0deg) translateY(-5px) scale(1.015); }
.polaroid img { display: block; width: 100%; max-height: 430px; object-fit: cover; border-radius: 15px; background: var(--blue-soft); }
.polaroid figcaption { padding: 12px 6px 0; }
.polaroid strong, .polaroid span { display: block; }
.polaroid strong { color: var(--pink-deep); }
.polaroid span { color: var(--text-soft); font-size: .72rem; }

.mailbox-section { background: rgba(255,246,250,.72); }
.mailbox-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 54px; align-items: center; }
.mailbox-copy p { max-width: 480px; color: var(--warm-gray); }
.mail-rules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.mail-rules span { padding: 7px 11px; border: 3px solid var(--paper); border-radius: 999px; background: var(--blue-soft); font-size: .74rem; }
.mailbox-card { padding: 34px; background: linear-gradient(145deg, #FFE1EC, #EAF5FF); }
.mailbox-card label { position: relative; z-index: 2; display: grid; gap: 7px; margin-bottom: 14px; }
.mailbox-card input, .mailbox-card textarea { width: 100%; border: 4px solid var(--paper); outline: 0; border-radius: 18px; background: var(--paper-warm); padding: 12px 14px; resize: vertical; }
.mailbox-card input:focus, .mailbox-card textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 5px rgba(255,166,201,.15); }
.check-row { grid-template-columns: 20px 1fr !important; align-items: center; }
.check-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--pink-deep); }
.mailbox-submit { border: 5px solid var(--paper); cursor: pointer; }
.mailbox-status { position: relative; z-index: 2; margin: 11px 0 0; color: var(--text-soft); font-size: .72rem; }
.honeypot { position: absolute !important; left: -99999px !important; opacity: 0 !important; pointer-events: none !important; }

.site-footer { position: relative; padding: 45px 20px 55px; border-top: 7px solid var(--paper); background: #FADDEA; text-align: center; }
.footer-stitches { position: absolute; left: 0; right: 0; top: 10px; border-top: 2px dashed rgba(255,166,201,.56); }
.site-footer p { margin: 2px 0; }
.footer-small { color: var(--text-soft); font-size: .75rem; }
.site-footer a { display: inline-block; margin-top: 12px; color: var(--blue-deep); font-size: .78rem; }

.float-sticker { position: fixed; z-index: -1; color: rgba(255,166,201,.52); font-size: 2rem; animation: stickerFloat 7s ease-in-out infinite, stickerSpin 14s linear infinite; pointer-events: none; }
.float-sticker.s1 { left: 3vw; top: 18vh; } .float-sticker.s2 { right: 4vw; top: 14vh; color: rgba(162,210,255,.58); animation-duration: 8s, 18s; } .float-sticker.s3 { left: 7vw; top: 72vh; color: rgba(255,249,196,.8); animation-duration: 9s, 20s; } .float-sticker.s4 { right: 8vw; top: 68vh; animation-duration: 6s, 15s; } .float-sticker.s5 { left: 48vw; top: 8vh; color: rgba(162,210,255,.48); animation-duration: 10s, 22s; } .float-sticker.s6 { right: 30vw; bottom: 4vh; color: rgba(255,249,196,.75); animation-duration: 7.5s, 19s; }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 150; max-width: min(520px, calc(100% - 30px)); padding: 12px 18px; transform: translate(-50%, 30px); border: 4px solid var(--paper); border-radius: 999px; background: var(--accent); box-shadow: var(--shadow-pink); opacity: 0; pointer-events: none; transition: .25s ease; text-align: center; font-size: .8rem; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.admin-trigger { display: none; position: fixed; right: 22px; bottom: 22px; z-index: 90; min-width: 62px; height: 62px; padding: 0 16px; border: 5px solid var(--paper); border-radius: 999px; background: var(--pink); box-shadow: 0 10px 26px rgba(255,166,201,.4); cursor: pointer; font-weight: 900; }
.admin-trigger.is-visible { display: block; }
.admin-layer { position: fixed; inset: 0; z-index: 120; display: none; justify-content: flex-end; }
.admin-layer.is-open { display: flex; }
.admin-backdrop { position: absolute; inset: 0; background: rgba(139,108,123,.28); backdrop-filter: blur(8px); }
.admin-panel { position: relative; z-index: 2; width: min(780px, 100%); height: 100%; overflow-y: auto; padding: 26px 28px 38px; border-left: 8px solid var(--paper); background: var(--paper-warm); box-shadow: -20px 0 50px rgba(255,166,201,.28); }
.admin-panel::before { content: ""; position: absolute; inset: 12px; border: 2px dashed rgba(255,166,201,.35); border-radius: 28px; pointer-events: none; }
.admin-head, .cloud-login, .admin-tabs, .admin-form, .admin-actions, .admin-status { position: relative; z-index: 2; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.admin-head span { color: var(--blue-deep); font-size: .76rem; }
.admin-head h2 { margin: 0; color: var(--pink-deep); font-size: 2rem; }
.admin-close { width: 44px; height: 44px; border: 4px solid var(--paper); border-radius: 50%; background: var(--blue-soft); cursor: pointer; font-size: 1.35rem; }
.cloud-login { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border: 4px solid var(--paper); border-radius: 22px; background: var(--blue-soft); }
.cloud-login > div:first-child { display: grid; gap: 2px; }
.cloud-login strong { color: var(--pink-deep); }
.cloud-login span { color: var(--text-soft); font-size: .72rem; }
.cloud-login-fields { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 8px; }
.cloud-login-fields input { min-width: 0; border: 3px solid var(--paper); border-radius: 14px; background: var(--paper); padding: 9px 10px; outline: 0; }
.cloud-login-fields button, .admin-inline-btn, .mail-admin-toolbar button, .editor-toolbar button, .upload-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 14px; border: 3px solid var(--paper); border-radius: 999px; background: var(--pink); box-shadow: 0 5px 13px rgba(255,166,201,.18); cursor: pointer; }
.admin-tabs { display: flex; gap: 7px; margin-top: 20px; padding-bottom: 7px; overflow-x: auto; scrollbar-width: thin; }
.admin-tabs button { flex: 0 0 auto; padding: 8px 11px; border: 3px solid var(--paper); border-radius: 14px; background: var(--blue-soft); cursor: pointer; font-size: .75rem; }
.admin-tabs button.is-active { background: var(--pink); box-shadow: var(--shadow-pink); }
.admin-form { margin-top: 18px; }
.admin-page { display: none; }
.admin-page.is-active { display: grid; gap: 14px; }
.admin-form label { display: grid; gap: 6px; font-size: .8rem; }
.admin-form input, .admin-form textarea, .admin-form select, .schedule-edit-row input, .item-editor input, .item-editor textarea { width: 100%; border: 3px solid var(--pink-soft); outline: 0; border-radius: 14px; background: #FFF8FB; padding: 10px 11px; resize: vertical; }
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus, .schedule-edit-row input:focus, .item-editor input:focus, .item-editor textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255,166,201,.14); }
.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.schedule-editor { display: grid; gap: 8px; }
.schedule-edit-row { display: grid; grid-template-columns: 80px 1fr 100px; gap: 8px; }
.editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.editor-toolbar h3 { margin: 0; color: var(--pink-deep); }
.editor-toolbar p { margin: 2px 0 0; color: var(--text-soft); font-size: .72rem; }
.item-editor-list { display: grid; gap: 12px; }
.item-editor { position: relative; display: grid; gap: 10px; padding: 14px; border: 4px solid var(--paper); border-radius: 20px; background: var(--blue-soft); }
.item-editor:nth-child(even) { background: var(--pink-soft); }
.item-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.item-editor .wide { grid-column: 1 / -1; }
.item-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.item-editor-actions label, .item-editor-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 12px; border: 3px solid var(--paper); border-radius: 999px; background: var(--accent); cursor: pointer; font-size: .72rem; }
.item-editor-actions button.remove { margin-left: auto; background: #FFD0D8; }
.item-editor-actions input[type="file"], .upload-button input { display: none; }
.item-preview { display: flex; align-items: center; gap: 10px; }
.item-preview img { width: 74px; height: 74px; object-fit: cover; border: 4px solid var(--paper); border-radius: 16px; background: var(--paper); }
.item-preview audio, .item-preview video { max-width: 100%; }
.upload-box { display: grid; gap: 8px; padding: 16px; border: 4px solid var(--paper); border-radius: 20px; background: var(--blue-soft); }
.upload-box strong { color: var(--pink-deep); }
.upload-box p, .upload-box span { margin: 0; color: var(--text-soft); font-size: .72rem; }
.upload-button { width: fit-content; background: var(--pink); }
.model-status-card { display: flex; justify-content: space-between; gap: 14px; padding: 13px 15px; border: 4px solid var(--paper); border-radius: 18px; background: var(--accent); }
.model-status-card span { color: var(--warm-gray); font-size: .76rem; text-align: right; }
.mail-admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mail-admin-toolbar span { color: var(--text-soft); font-size: .72rem; }
.mail-admin-list { display: grid; gap: 10px; }
.mail-admin-card { padding: 14px; border: 4px solid var(--paper); border-radius: 18px; background: var(--pink-soft); }
.mail-admin-card:nth-child(even) { background: var(--blue-soft); }
.mail-admin-card > div { display: flex; justify-content: space-between; gap: 10px; }
.mail-admin-card time, .mail-admin-card span { color: var(--text-soft); font-size: .68rem; }
.mail-admin-card p { margin: 8px 0; color: var(--warm-gray); word-break: break-word; }
.admin-export-row { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-export-row button, .file-import { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 7px 14px; border: 3px solid var(--paper); border-radius: 999px; background: var(--blue-soft); cursor: pointer; }
.file-import input { display: none; }
.admin-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.admin-actions button { min-width: 120px; padding: 10px 16px; border: 4px solid var(--paper); border-radius: 999px; cursor: pointer; }
.admin-actions .ghost { background: var(--blue-soft); }
.admin-actions .save { background: var(--pink); box-shadow: var(--shadow-pink); font-weight: 900; }
.admin-status { margin: 12px 0 0; text-align: right; color: var(--text-soft); font-size: .72rem; }
.admin-open { overflow: hidden; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes characterFloat { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } }
@keyframes stickerFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes stickerSpin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

@media (max-width: 1050px) {
  .site-nav a { padding-inline: 9px; font-size: .76rem; }
  .hero-shell { grid-template-columns: 1fr; gap: 10px; padding-top: 30px; }
  .hero-copy { text-align: center; }
  .hero-desc, .hero-note-card { margin-inline: auto; }
  .hero-actions, .hero-mini-notes { justify-content: center; }
  .hero-character-wrap { min-height: 650px; margin-top: -30px; }
  .journal-book { grid-template-columns: 1fr; gap: 14px; }
  .journal-spine, .book-ring { display: none; }
  .profile-page, .schedule-page { border-radius: 28px; }
  .clip-layout { grid-template-columns: 1fr; }
  .mailbox-layout { grid-template-columns: 1fr; }
  .mailbox-copy { text-align: center; }
  .mailbox-copy p { margin-inline: auto; }
  .mail-rules { justify-content: center; }
}

@media (max-width: 820px) {
  .site-header { top: 12px; min-height: 62px; }
  .site-nav { position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: none; padding: 12px; border: 5px solid var(--paper); border-radius: 24px; background: var(--paper-warm); box-shadow: var(--shadow-pink); }
  .site-nav.is-open { display: grid; grid-template-columns: 1fr 1fr; }
  .site-nav a { text-align: center; }
  .menu-toggle { display: block; }
  .hero { padding-top: 106px; }
  .hero-title { font-size: clamp(2.8rem, 11vw, 4.6rem); }
  .hero-character-wrap { min-height: 580px; }
  .live2d-shell { height: 570px; }
  .halo-one { width: min(520px, 94vw); height: 520px; }
  .halo-two { width: min(430px, 80vw); height: 470px; }
  .character-dots { width: min(470px, 86vw); height: 450px; }
  .journal-page { min-height: auto; padding: 38px 26px; }
  .profile-top { grid-template-columns: 150px 1fr; }
  .clip-layout { gap: 24px; }
  .request-song-list { grid-template-columns: 1fr; }
  .request-head { align-items: stretch; flex-direction: column; }
  .request-search-wrap { width: 100%; }
  .perks-strip { flex-wrap: wrap; }
  .perk-chips { flex-basis: 100%; }
  .cloud-login-fields { grid-template-columns: 1fr 1fr; }
  .item-editor-grid { grid-template-columns: 1fr; }
  .item-editor .wide { grid-column: auto; }
}

@media (max-width: 620px) {
  .shell { width: min(100% - 24px, 1180px); }
  .section { padding: 78px 0; }
  .site-header { width: calc(100% - 20px); padding-left: 10px; }
  .mini-brand { min-width: 0; padding-left: 6px; }
  .mini-brand strong { font-size: .82rem; }
  .site-nav.is-open { grid-template-columns: 1fr; }
  .hero-shell { min-height: 0; }
  .hero-copy { padding-top: 20px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .pill-btn { min-height: 54px; padding-inline: 13px; font-size: .82rem; }
  .hero-note-card { width: 100%; padding-left: 48px; }
  .hero-character-wrap { min-height: 500px; margin-top: -10px; }
  .live2d-shell { height: 500px; }
  .halo-one { height: 450px; bottom: 34px; }
  .halo-two { height: 405px; bottom: 48px; }
  .character-dots { height: 380px; bottom: 58px; }
  .hero-character-fallback { width: min(390px, 92%); max-height: 480px; }
  .hero-badge { min-width: 88px; min-height: 66px; border-width: 4px; font-size: .66rem; }
  .badge-left { left: -2px; top: 30%; }
  .badge-right { right: -2px; top: 39%; }
  .hero-ribbon { width: 86%; letter-spacing: .25em; }
  .sticker-title { font-size: clamp(2.1rem, 9vw, 3.2rem); }
  .journal-book { padding: 9px; border-width: 5px; }
  .journal-page { padding: 34px 18px; }
  .profile-top { grid-template-columns: 1fr; text-align: center; }
  .profile-polaroid { width: 180px; margin: 0 auto; }
  .profile-list div { grid-template-columns: 86px 1fr; padding-inline: 11px; }
  .schedule-row { grid-template-columns: 54px 1fr 62px; gap: 6px; padding-inline: 8px; }
  .schedule-topic { font-size: .72rem; }
  .schedule-time { font-size: .64rem; }
  .tv-card { padding: 28px 16px 20px; }
  .tv-bottom { grid-template-columns: 1fr; text-align: center; }
  .speaker-dots, .tv-knobs { display: none; }
  .walkman, .request-book { padding: 25px 16px; }
  .now-playing { grid-template-columns: 1fr; padding: 18px; }
  .album-art { width: 190px; margin: 0 auto; }
  .track-meta { text-align: center; }
  .request-song { align-items: stretch; flex-direction: column; }
  .request-song button { width: 100%; }
  .request-bottom { align-items: stretch; flex-direction: column; }
  .request-bottom .tiny-pill { width: 100%; }
  .gallery-wall { columns: 1; }
  .mailbox-card { padding: 26px 16px; }
  .admin-trigger { right: 12px; bottom: 12px; min-width: 54px; height: 54px; }
  .admin-panel { padding: 18px 12px 28px; border-left: 0; }
  .admin-two-col, .schedule-edit-row { grid-template-columns: 1fr; }
  .editor-toolbar { align-items: stretch; flex-direction: column; }
  .editor-toolbar button { width: 100%; }
  .admin-actions { flex-direction: column-reverse; }
  .admin-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-character-fallback { animation: none; }
}