:root {
  color-scheme: light;
  --bg: #fffaf6;
  --bg-soft: #fff4f2;
  --surface: #ffffff;
  --surface-soft: #fff7f4;
  --ink: #5c4651;
  --ink-strong: #493641;
  --muted: #907b85;
  --muted-soft: #b09ba4;
  --pink: #d88fa5;
  --pink-deep: #b96f8a;
  --pink-light: #f4dce4;
  --lavender: #eae2f6;
  --peach: #fbe9df;
  --mint: #e1f0e8;
  --line: #f0e1df;
  --shadow: 0 18px 50px rgba(124, 82, 99, .10);
  --shadow-small: 0 8px 24px rgba(124, 82, 99, .08);
  --radius: 26px;
  --font-body: 'Nunito', 'Trebuchet MS', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  --container: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.7 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
body, button, input { font-family: var(--font-body); }
button, input { font-size: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { display: block; max-width: 100%; }
::selection { color: var(--ink-strong); background: #f4ceda; }
:focus-visible { outline: 3px solid #c9809a; outline-offset: 4px; }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.section { position: relative; padding: 112px 0; }
.section-shell { position: relative; overflow: clip; }
.skip-link { position: absolute; z-index: 9999; top: 8px; left: 12px; padding: 10px 15px; transform: translateY(-150%); border-radius: 12px; background: var(--ink-strong); color: #fff; }
.skip-link:focus { transform: translateY(0); }
.top-ribbon { min-height: 32px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 5px 16px; background: #f4dce4; color: #956276; font-size: 10px; letter-spacing: .13em; text-align: center; text-transform: uppercase; }
.ribbon-sparkle { color: #b97690; font-size: 13px; }
.site-header { position: sticky; z-index: 100; top: 0; border-bottom: 1px solid rgba(238, 222, 221, .82); background: rgba(255, 250, 246, .88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.nav-wrap { display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; min-width: max-content; align-items: center; gap: 11px; }
.brand-avatar { width: 49px; height: 49px; flex: 0 0 auto; overflow: hidden; border: 2px solid #fff; border-radius: 18px; background: var(--pink-light); box-shadow: 0 4px 12px rgba(153, 91, 116, .15); transform: rotate(-4deg); }
.brand-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 45%; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.18; }
.brand-copy strong { color: var(--ink-strong); font: 900 22px/1.05 var(--font-display); letter-spacing: -.04em; }
.brand-copy small { margin-top: 4px; color: var(--muted); font: 600 11px/1.25 var(--font-body); letter-spacing: .01em; }
.primary-nav { display: flex; align-items: center; gap: clamp(16px, 2.7vw, 35px); }
.primary-nav > a { position: relative; color: #7c6671; font-size: 12px; font-weight: 700; white-space: nowrap; transition: color .2s ease; }
.primary-nav > a::after { position: absolute; right: 0; bottom: -7px; left: 0; height: 2px; border-radius: 3px; background: var(--pink); content: ''; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.primary-nav > a:hover { color: var(--pink-deep); }
.primary-nav > a:hover::after { transform: scaleX(1); }
.theme-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid #efdde3; border-radius: 999px; background: #fff; color: #9c6e82; cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; transition: transform .2s ease, background .2s ease; }
.theme-toggle:hover { transform: translateY(-2px); background: #fff0f4; }
.theme-icon { font-size: 16px; line-height: 1; }
.nav-toggle { display: none; }

.hero-section { padding: 72px 0 88px; background: radial-gradient(ellipse at 80% 25%, rgba(248, 224, 228, .72), transparent 34%), radial-gradient(ellipse at 12% 78%, rgba(255, 231, 215, .6), transparent 32%), var(--bg); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr); align-items: center; gap: clamp(42px, 7vw, 100px); }
.hero-copy { padding: 28px 0 18px; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 9px; color: var(--pink-deep); font-size: 10px; font-weight: 800; letter-spacing: .16em; line-height: 1.5; }
.eyebrow { width: fit-content; margin-bottom: 22px; padding: 9px 13px; border: 1px solid #f3dce4; border-radius: 999px; background: rgba(255,255,255,.66); }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #d58ba4; box-shadow: 0 0 0 4px #f9e7ed; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink-strong); font-family: var(--font-display); }
.hero-copy h1 { margin-bottom: 3px; font-size: clamp(45px, 5.15vw, 72px); font-weight: 900; line-height: 1.08; letter-spacing: -.065em; }
.hero-copy h1 > span:first-of-type { position: relative; display: inline-block; color: var(--pink-deep); }
.title-heart { display: inline-block; margin-left: 8px; color: #df9db1; font-size: .55em; vertical-align: top; transform: rotate(12deg); }
.hero-subtitle { margin-bottom: 18px; color: #b28b9a; font: 700 clamp(15px, 1.8vw, 20px)/1.4 var(--font-display); letter-spacing: .015em; }
.hero-description { max-width: 515px; margin-bottom: 27px; color: #806e77; font-size: 15px; line-height: 1.9; }
.hero-description > span { color: var(--pink-deep); white-space: nowrap; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.button { display: inline-flex; min-height: 49px; align-items: center; justify-content: center; gap: 10px; padding: 13px 20px; border: 1px solid transparent; border-radius: 15px; cursor: pointer; font-size: 12px; font-weight: 800; line-height: 1.2; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: #d990a7; color: #fff; box-shadow: 0 8px 20px rgba(196, 115, 143, .23); }
.button-primary:hover { background: #c87e98; box-shadow: 0 12px 25px rgba(196, 115, 143, .3); }
.button-soft { border-color: #f0dfe2; background: rgba(255,255,255,.75); color: #8e6575; }
.button-soft:hover { background: #fff0f4; box-shadow: var(--shadow-small); }
.hero-signature { display: flex; align-items: center; gap: 10px; margin-top: 27px; color: #aa929c; font-size: 11px; font-style: italic; }
.signature-doodle { color: #d38ca4; font-size: 25px; line-height: 1; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.hero-chips span { padding: 6px 10px; border: 1px solid #f0e3e1; border-radius: 999px; background: rgba(255,255,255,.56); color: #9b808b; font-size: 10px; font-weight: 700; }
.hero-art-wrap { position: relative; width: min(100%, 510px); justify-self: end; padding: 0 20px 15px 0; }
.hero-art-backdrop { position: absolute; inset: 6% 2% 2% 7%; border-radius: 42% 44% 28% 40% / 31% 32% 45% 40%; background: #f7dce3; transform: rotate(4deg); }
.hero-image-frame { position: relative; overflow: hidden; border: 9px solid rgba(255,255,255,.9); border-radius: 36% 36% 25px 25px / 27% 27% 25px 25px; background: #f5e3dd; box-shadow: 0 25px 60px rgba(133, 92, 102, .18); transform: rotate(-1.5deg); }
.hero-image { width: 100%; aspect-ratio: 1 / 1.04; object-fit: cover; object-position: 50% 50%; }
.image-sticker { position: absolute; z-index: 2; padding: 8px 12px; border: 1px solid rgba(255,255,255,.8); border-radius: 999px; background: rgba(255,250,246,.87); box-shadow: 0 5px 15px rgba(116,78,86,.09); color: #a96e84; font-family: var(--font-display); font-size: 12px; font-weight: 900; }
.sticker-top { top: 15px; right: 15px; transform: rotate(7deg); }
.sticker-bottom { bottom: 17px; left: 15px; transform: rotate(-8deg); }
.floating-note { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: 1px solid rgba(241,224,225,.9); border-radius: 17px; background: rgba(255,255,255,.9); box-shadow: 0 12px 35px rgba(127, 85, 101, .13); backdrop-filter: blur(12px); }
.floating-note > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.floating-note strong { color: #715462; font: 800 12px/1.2 var(--font-display); }
.floating-note small { color: #ab909b; font-size: 9px; }
.note-top { top: 12%; left: -48px; transform: rotate(-4deg); }
.note-bottom { right: -20px; bottom: 8%; transform: rotate(3deg); }
.note-icon { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 11px; background: #edf0f9; color: #978cbf; font-size: 21px; }
.note-icon-pink { background: #fff0f4; color: #d28ca5; }
.mood-face { display: grid; width: 27px; height: 27px; margin-left: 4px; place-items: center; border-radius: 50%; background: #f6e4d8; color: #bd8b79; font-size: 17px; }
.orbit { position: absolute; z-index: -1; border: 1px dashed rgba(204,149,166,.52); border-radius: 50%; }
.orbit-one { inset: -15px 5px 15px -13px; transform: rotate(-13deg); }
.orbit-two { inset: 8px -14px 0 12px; transform: rotate(15deg); }
.hero-decoration { position: absolute; z-index: 0; color: #d99caf; pointer-events: none; }
.decor-star { font-size: 32px; }
.decor-star-one { top: 14%; left: 4%; transform: rotate(-13deg); }
.decor-star-two { right: 46%; bottom: 13%; font-size: 23px; }
.decor-heart { top: 24%; right: 4%; font-size: 37px; transform: rotate(10deg); }
.hero-bottom-wave { position: absolute; right: -2%; bottom: -35px; left: -2%; height: 70px; border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: var(--bg); }
.welcome-strip { position: relative; z-index: 2; padding: 17px 0; background: #f7e6e7; }
.welcome-strip-inner, .closing-note-inner { display: flex; align-items: center; justify-content: center; gap: 15px; color: #956d7d; text-align: center; }
.welcome-strip-inner p, .closing-note-inner p { margin: 0; font: 700 12px/1.6 var(--font-display); letter-spacing: .01em; }
.welcome-strip-inner > span, .closing-note-inner > span { color: #c9829c; font-size: 20px; }

.section-about { background: var(--bg); }
.about-grid { display: grid; grid-template-columns: minmax(300px, .86fr) minmax(0, 1.14fr); align-items: center; gap: clamp(56px, 9vw, 125px); }
.about-visual { position: relative; max-width: 450px; padding: 10px 16px 32px 0; }
.about-photo-card { position: relative; padding: 12px 12px 48px; border: 1px solid #f0e1df; border-radius: 15px; background: #fff; box-shadow: var(--shadow); transform: rotate(-3deg); }
.about-photo-card img { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; object-fit: cover; object-position: 50% 50%; }
.photo-caption { position: absolute; right: 12px; bottom: 13px; left: 12px; color: #a98b97; font: italic 600 12px var(--font-display); text-align: center; }
.about-doodle { position: absolute; z-index: 2; color: #d58ca4; pointer-events: none; }
.doodle-heart { top: 0; right: -8px; font-size: 62px; transform: rotate(15deg); }
.doodle-flower { bottom: 20px; left: -25px; font-size: 52px; transform: rotate(-12deg); }
.mini-note { position: absolute; right: -32px; bottom: 0; display: flex; align-items: center; gap: 9px; max-width: 255px; padding: 12px 16px; border: 1px solid #eee0da; border-radius: 13px; background: #fff4df; box-shadow: var(--shadow-small); color: #8f716d; font: 700 11px/1.5 var(--font-display); transform: rotate(3deg); }
.mini-note-check { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border: 1px solid #e1c6b5; border-radius: 6px; color: #ae8b71; }
.section-kicker { margin-bottom: 16px; }
.section-title { margin-bottom: 17px; font-size: clamp(34px, 4.1vw, 50px); font-weight: 900; line-height: 1.14; letter-spacing: -.05em; }
.section-title span { color: var(--pink-deep); }
.section-lead { max-width: 690px; margin-bottom: 17px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.about-copy .section-lead { color: #7c6973; }
.about-detail { margin-bottom: 25px; color: #a18d96; font-size: 12px; line-height: 1.95; }
.personality-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 27px 0 24px; }
.personality-item { display: flex; align-items: center; gap: 9px; padding: 12px 10px; border: 1px solid #f0e2e2; border-radius: 14px; background: rgba(255,255,255,.6); }
.personality-emoji { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: #f8e6eb; color: #c48098; font-size: 18px; }
.personality-item:nth-child(2) .personality-emoji { background: #eee7f9; color: #9a86c7; }
.personality-item:nth-child(3) .personality-emoji { background: #fceadd; color: #c38f72; }
.personality-item span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.personality-item strong { color: var(--ink); font: 800 11px var(--font-display); }
.personality-item small { margin-top: 3px; color: #a58e98; font-size: 9px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: var(--pink-deep); cursor: pointer; font-size: 12px; font-weight: 800; transition: gap .2s ease; }
.text-link:hover { gap: 13px; }

.section-features { overflow: hidden; background: #fff1f1; }
.section-heading { margin-bottom: 48px; }
.section-heading.centered { text-align: center; }
.section-heading.centered .section-kicker { justify-content: center; }
.section-heading .section-lead { margin-inline: auto; }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
.feature-card { position: relative; min-height: 280px; overflow: hidden; padding: 25px 22px 23px; border: 1px solid rgba(255,255,255,.9); border-radius: 21px; background: var(--surface); box-shadow: 0 12px 30px rgba(146, 103, 117, .055); transition: transform .25s ease, box-shadow .25s ease; }
.feature-card:hover { transform: translateY(-7px); box-shadow: 0 17px 35px rgba(146,103,117,.12); }
.feature-peach { background: #fff9f1; }
.feature-lavender { background: #f7f3ff; }
.feature-mint { background: #f1fbf5; }
.feature-rose { background: #fff5f7; }
.feature-icon { display: grid; width: 52px; height: 52px; margin-bottom: 24px; place-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 17px; background: rgba(255,255,255,.8); box-shadow: 0 5px 15px rgba(128, 88, 103, .06); color: #c5819a; font-size: 27px; }
.feature-lavender .feature-icon { color: #9d88c8; }
.feature-mint .feature-icon { color: #75a68b; }
.feature-number { display: block; margin-bottom: 6px; color: #b39ba5; font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.feature-card h3 { margin-bottom: 9px; font-size: 19px; font-weight: 900; letter-spacing: -.03em; }
.feature-card p { min-height: 65px; margin-bottom: 15px; color: #917e87; font-size: 11px; line-height: 1.8; }
.feature-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; color: #b36f87; font-size: 10px; font-weight: 800; }
.feature-link:hover { color: #8e4f68; }
.feature-doodle { position: absolute; right: 12px; bottom: 7px; color: rgba(209, 143, 165, .22); font-size: 58px; transform: rotate(12deg); pointer-events: none; }
.features-footnote { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 25px; color: #a38b95; font-size: 10px; text-align: center; }
.features-footnote span { color: #c9839a; font-size: 17px; }

.section-commands { background: var(--bg); }
.commands-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 36px; }
.commands-heading .section-title { margin-bottom: 12px; }
.commands-heading .section-lead { margin-bottom: 0; }
.command-book-stamp { display: flex; min-width: 138px; flex-direction: column; align-items: center; justify-content: center; padding: 17px 15px; border: 1px dashed #d7a7b5; border-radius: 50%; color: #ae8091; font-size: 8px; font-weight: 800; letter-spacing: .14em; line-height: 1.6; transform: rotate(8deg); }
.command-book-stamp strong { color: #bd7992; font: 900 16px var(--font-display); letter-spacing: -.03em; }
.command-toolbar { display: grid; gap: 17px; margin-bottom: 25px; }
.command-search { display: flex; min-height: 58px; align-items: center; gap: 13px; padding: 0 19px; border: 1px solid #efdfdf; border-radius: 17px; background: #fff; box-shadow: 0 7px 20px rgba(140, 101, 113, .045); color: #cb8ba0; }
.command-search > span { font-size: 27px; line-height: 1; transform: rotate(-20deg); }
.command-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink-strong); font-size: 12px; }
.command-search input::placeholder { color: #b5a1a9; }
.command-search:focus-within { border-color: #dca2b4; box-shadow: 0 0 0 4px rgba(216,143,165,.12); }
.command-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { min-height: 35px; padding: 8px 15px; border: 1px solid #efdfdf; border-radius: 999px; background: #fff; color: #9a828d; cursor: pointer; font-size: 10px; font-weight: 800; transition: color .2s ease, background .2s ease, border .2s ease, transform .2s ease; }
.filter-chip:hover { transform: translateY(-2px); border-color: #e0b0bd; }
.filter-chip.is-active { border-color: #d991a8; background: #d991a8; color: #fff; }
.command-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.command-card { display: flex; min-width: 0; flex-direction: column; padding: 20px; border: 1px solid #f0e3e1; border-radius: 20px; background: #fff; box-shadow: 0 9px 24px rgba(134, 92, 106, .05); animation: card-pop .35s both; animation-delay: calc(var(--card-index, 0) * 25ms); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.command-card:hover { transform: translateY(-4px); border-color: #e9c9d3; box-shadow: 0 14px 30px rgba(134, 92, 106, .1); }
.command-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.command-icon { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 14px; background: #fbebef; color: #c8839a; font-size: 22px; }
.command-card:nth-child(3n + 2) .command-icon { background: #f0eafa; color: #9a86c7; }
.command-card:nth-child(3n) .command-icon { background: #eaf5ed; color: #77a48b; }
.command-badge { padding: 5px 7px; border-radius: 6px; background: #fbf4f0; color: #b09a91; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.command-category { display: block; margin-bottom: 3px; color: #b28b9a; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.command-card h3 { margin-bottom: 7px; font-size: 19px; font-weight: 900; letter-spacing: -.035em; }
.command-card-content p { min-height: 42px; margin-bottom: 16px; color: #927f88; font-size: 11px; line-height: 1.75; }
.command-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 13px; border-top: 1px solid #f5e9e7; }
.command-card code { overflow: hidden; color: #836a76; font: 700 10px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.copy-command { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid #efdce2; border-radius: 9px; background: #fff7f9; color: #b7758e; cursor: pointer; font-size: 9px; font-weight: 800; transition: background .2s ease, transform .2s ease; }
.copy-command:hover { transform: translateY(-1px); background: #f9e5eb; }
.copy-command span:first-child { font-size: 14px; }
.command-empty { padding: 50px 15px; border: 1px dashed #e9ccd5; border-radius: 20px; background: #fff7f7; text-align: center; }
.command-empty[hidden] { display: none; }
.command-empty > span { display: block; margin-bottom: 13px; color: #d08aa2; font-size: 30px; }
.command-empty strong { display: block; color: var(--ink-strong); font: 900 20px var(--font-display); }
.command-empty p { margin: 7px 0 20px; color: var(--muted); font-size: 12px; }
.commands-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.commands-bottom > span { color: #a18b94; font-size: 10px; }
.commands-bottom > span span { color: #d18ba3; font-size: 17px; vertical-align: middle; }
.commands-bottom .text-link { flex: 0 0 auto; font-size: 10px; }
.command-note { margin: 15px 0 0; color: #b3a0a7; font-size: 9px; line-height: 1.7; }

.section-diary { background: #fff4f0; }
.diary-grid { display: grid; grid-template-columns: 1.13fr 1fr 1fr; align-items: stretch; gap: 18px; }
.diary-card { overflow: hidden; border: 1px solid rgba(235,218,216,.8); border-radius: 22px; background: #fff; box-shadow: 0 10px 28px rgba(135, 97, 104, .055); transition: transform .25s ease, box-shadow .25s ease; }
.diary-card:hover { transform: translateY(-5px); box-shadow: 0 15px 32px rgba(135, 97, 104, .1); }
.diary-art { position: relative; display: flex; min-height: 205px; overflow: hidden; flex-direction: column; justify-content: center; padding: 24px; }
.diary-card-large .diary-art { min-height: 225px; }
.diary-art-peach { background: #f8e2d5; color: #a67a76; }
.diary-art-lavender { background: #e9e1f6; color: #887ab0; }
.diary-art-mint { background: #e1eee4; color: #6d9a84; }
.diary-art-label { position: absolute; bottom: 17px; left: 22px; color: currentColor; font-size: 7px; font-weight: 900; letter-spacing: .15em; opacity: .75; }
.diary-art-message { position: relative; z-index: 1; align-self: center; color: currentColor; font: 900 clamp(30px, 3.3vw, 40px)/1.06 var(--font-display); letter-spacing: -.06em; text-align: center; transform: rotate(-4deg); }
.diary-art-message-small { font-size: clamp(25px, 2.4vw, 30px); }
.diary-art-sun { position: absolute; top: 8px; right: 24px; color: #d49c88; font-size: 51px; opacity: .75; }
.diary-art-heart { position: absolute; top: 23px; left: 23px; font-size: 28px; transform: rotate(-15deg); }
.diary-art-flower { position: absolute; right: 22px; bottom: 23px; font-size: 44px; opacity: .4; transform: rotate(15deg); }
.diary-moon { position: absolute; top: 15px; right: 23px; font-size: 47px; }
.diary-stars { position: absolute; top: 34px; left: 18px; font-size: 15px; }
.diary-cloud { position: absolute; top: 12px; right: 25px; font-size: 49px; opacity: .65; }
.diary-sparkle { position: absolute; top: 30px; left: 20px; font-size: 20px; }
.diary-body { padding: 20px 22px 22px; }
.diary-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; color: #b49ba5; font-size: 9px; }
.diary-tag { padding: 5px 9px; border-radius: 999px; background: #fff0f3; color: #bc8195; font-weight: 800; }
.diary-body h3 { margin-bottom: 8px; font-size: 18px; font-weight: 900; line-height: 1.35; letter-spacing: -.035em; }
.diary-body p { margin-bottom: 15px; color: #95828c; font-size: 11px; line-height: 1.85; }
.diary-date { color: #bba5ae; font-size: 7px; font-weight: 900; letter-spacing: .12em; }

.section-community { padding-top: 94px; padding-bottom: 90px; background: var(--bg); }
.community-card { position: relative; overflow: hidden; padding: 53px 24px 57px; border: 1px solid #f0dfe2; border-radius: 30px; background: radial-gradient(ellipse at 18% 20%, #fbe7de 0, transparent 34%), radial-gradient(ellipse at 86% 75%, #eadff7 0, transparent 32%), #fff4f3; text-align: center; }
.community-avatar { width: 95px; height: 95px; overflow: hidden; margin: 0 auto 19px; border: 5px solid rgba(255,255,255,.9); border-radius: 32px; background: #f2dce3; box-shadow: 0 9px 25px rgba(139, 91, 108, .14); transform: rotate(-5deg); }
.community-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 46%; }
.community-card .section-kicker { justify-content: center; margin-bottom: 11px; }
.community-card h2 { max-width: 650px; margin: 0 auto 13px; font-size: clamp(29px, 4vw, 43px); font-weight: 900; line-height: 1.17; letter-spacing: -.05em; }
.community-card h2 span { color: var(--pink-deep); }
.community-card > p:not(.section-kicker) { max-width: 510px; margin: 0 auto 23px; color: #917b86; font-size: 12px; line-height: 1.9; }
.community-cloud, .community-sparkle { position: absolute; color: rgba(198, 136, 158, .45); pointer-events: none; }
.community-cloud { font-size: 65px; }
.cloud-left { top: 28px; left: 8%; }
.cloud-right { right: 8%; bottom: 25px; }
.community-sparkle { font-size: 35px; }
.sparkle-left { top: 46%; left: 15%; }
.sparkle-right { top: 17%; right: 17%; }

.section-faq { background: #fff4f0; }
.faq-grid { display: grid; grid-template-columns: minmax(270px, .8fr) minmax(0, 1.2fr); gap: clamp(45px, 8vw, 110px); }
.faq-intro .section-title { font-size: clamp(34px, 3.8vw, 47px); }
.faq-doodle { margin-top: 27px; color: #ce94a6; font: 800 20px var(--font-display); letter-spacing: .05em; }
.faq-list { border-top: 1px solid #ead9d9; }
.faq-item { border-bottom: 1px solid #ead9d9; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 21px 0; color: var(--ink-strong); cursor: pointer; font: 800 14px/1.5 var(--font-display); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border: 1px solid #eddae0; border-radius: 50%; color: #bd7d94; font-size: 17px; transition: transform .2s ease, background .2s ease; }
.faq-item[open] .faq-plus { transform: rotate(45deg); background: #f9e3e9; }
.faq-item p { max-width: 600px; margin: -2px 42px 21px 0; color: #95818b; font-size: 12px; line-height: 1.9; }
.closing-note { padding: 20px 0; background: #f6e2e5; }
.site-footer { padding: 38px 0 0; background: var(--bg); }
.footer-main { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 30px; }
.footer-brand .brand-avatar { width: 43px; height: 43px; border-radius: 15px; }
.footer-brand .brand-copy strong { font-size: 20px; }
.footer-line { margin: 0 auto 0 25px; color: #a08c96; font-size: 10px; font-style: italic; }
.footer-top-link { color: #b7758d; font-size: 10px; font-weight: 800; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 17px; padding-bottom: max(22px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: #b29da6; font-size: 9px; }
.footer-bottom strong { color: #8e6b7b; font-weight: 800; }
.toast { position: fixed; z-index: 300; right: 22px; bottom: max(22px, env(safe-area-inset-bottom)); max-width: min(360px, calc(100% - 32px)); padding: 13px 18px; border: 1px solid #f1d9e1; border-radius: 15px; background: rgba(255,255,255,.96); box-shadow: 0 14px 35px rgba(105, 67, 82, .18); color: #765261; font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

html[data-theme="night"] { color-scheme: dark; --bg: #27232f; --bg-soft: #312936; --surface: #342d3b; --surface-soft: #302936; --ink: #eadde5; --ink-strong: #fff2f7; --muted: #c0aab7; --muted-soft: #aa93a2; --line: #493b4a; --shadow: 0 18px 50px rgba(0,0,0,.2); --shadow-small: 0 8px 24px rgba(0,0,0,.16); }
html[data-theme="night"] body { background: var(--bg); color: var(--ink); }
html[data-theme="night"] .site-header { border-bottom-color: #4a3949; background: rgba(39,35,47,.89); }
html[data-theme="night"] .brand-copy strong, html[data-theme="night"] h1, html[data-theme="night"] h2, html[data-theme="night"] h3 { color: var(--ink-strong); }
html[data-theme="night"] .primary-nav > a { color: #d1bdc9; }
html[data-theme="night"] .theme-toggle { border-color: #584355; background: #3a3040; color: #f0c8d8; }
html[data-theme="night"] .hero-section { background: radial-gradient(ellipse at 80% 25%, rgba(118, 81, 111, .28), transparent 34%), radial-gradient(ellipse at 12% 78%, rgba(135, 91, 88, .16), transparent 32%), var(--bg); }
html[data-theme="night"] .hero-bottom-wave { background: var(--bg); }
html[data-theme="night"] .eyebrow, html[data-theme="night"] .hero-chips span { border-color: #584352; background: rgba(54,45,59,.75); color: #dab8c9; }
html[data-theme="night"] .hero-description, html[data-theme="night"] .about-copy .section-lead, html[data-theme="night"] .about-detail, html[data-theme="night"] .section-lead { color: #c2aeba; }
html[data-theme="night"] .welcome-strip, html[data-theme="night"] .closing-note { background: #3e2f3f; }
html[data-theme="night"] .welcome-strip-inner, html[data-theme="night"] .closing-note-inner { color: #e0b7c9; }
html[data-theme="night"] .section-about, html[data-theme="night"] .section-commands, html[data-theme="night"] .section-community, html[data-theme="night"] .site-footer { background: var(--bg); }
html[data-theme="night"] .about-photo-card, html[data-theme="night"] .mini-note, html[data-theme="night"] .personality-item, html[data-theme="night"] .feature-card, html[data-theme="night"] .command-search, html[data-theme="night"] .filter-chip, html[data-theme="night"] .command-card, html[data-theme="night"] .diary-card, html[data-theme="night"] .faq-item summary, html[data-theme="night"] .toast { border-color: #514050; background: var(--surface); color: var(--ink); }
html[data-theme="night"] .photo-caption, html[data-theme="night"] .mini-note, html[data-theme="night"] .personality-item small, html[data-theme="night"] .feature-card p, html[data-theme="night"] .command-card-content p, html[data-theme="night"] .command-card code, html[data-theme="night"] .diary-body p, html[data-theme="night"] .faq-item p, html[data-theme="night"] .footer-line { color: #c7b2c0; }
html[data-theme="night"] .personality-item strong, html[data-theme="night"] .command-card h3, html[data-theme="night"] .diary-body h3, html[data-theme="night"] .faq-item summary { color: var(--ink-strong); }
html[data-theme="night"] .section-features, html[data-theme="night"] .section-diary, html[data-theme="night"] .section-faq { background: #302835; }
html[data-theme="night"] .feature-peach { background: #3b3037; }
html[data-theme="night"] .feature-lavender { background: #342e42; }
html[data-theme="night"] .feature-mint { background: #2f3937; }
html[data-theme="night"] .feature-rose { background: #3c2d3a; }
html[data-theme="night"] .command-search input { color: var(--ink-strong); }
html[data-theme="night"] .command-card-bottom, html[data-theme="night"] .commands-bottom, html[data-theme="night"] .footer-bottom { border-color: #4a3a49; }
html[data-theme="night"] .command-empty { border-color: #584252; background: #342b39; }
html[data-theme="night"] .filter-chip.is-active { border-color: #bd7d97; background: #bd7d97; color: #fff; }
html[data-theme="night"] .copy-command { border-color: #5b4251; background: #433340; color: #edb6cb; }
html[data-theme="night"] .community-card { border-color: #564251; background: radial-gradient(ellipse at 18% 20%, #4c3941 0, transparent 34%), radial-gradient(ellipse at 86% 75%, #3f3650 0, transparent 32%), #332a37; }
html[data-theme="night"] .community-card > p:not(.section-kicker) { color: #c8b2c1; }
html[data-theme="night"] .faq-list, html[data-theme="night"] .faq-item { border-color: #51404d; }
html[data-theme="night"] .footer-bottom { color: #b6a1af; }
html[data-theme="night"] .footer-bottom strong { color: #e0b6c9; }
html[data-theme="night"] .button-soft { border-color: #594253; background: #3b303f; color: #edc3d2; }
html[data-theme="night"] .button-soft:hover { background: #4a3545; }
html[data-theme="night"] .command-badge { background: #44353e; color: #d6b8c3; }
html[data-theme="night"] .diary-tag { background: #493540; color: #e3b5c6; }
html[data-theme="night"] .command-book-stamp { border-color: #80566b; color: #d5a6b9; }
html[data-theme="night"] .command-book-stamp strong { color: #e2a9c0; }
html[data-theme="night"] .about-photo-card { background: #382f3b; }
html[data-theme="night"] .mini-note { background: #443540; }

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