/* FluffyNotes site: a soft, fully rounded page on the Thundera Shell v2 bar and footer.
   Light only (the pastel icon). The Thundera mark in the shell is currentColor: black on this light page. */
:root {
  --fn-bg: #f6eefe;
  --fn-card: #fffdf5;
  --fn-ink: #2b2140;
  --fn-mute: #5d5275;
  --fn-plum: #7a3e6b;
  --fn-tan: #f2a97e;
  --fn-pink: #f4a0b0;
  --fn-mint: #7fd8b0;
  --fn-line: rgba(43, 33, 64, 0.1);
}
html, body { background: var(--fn-bg); color: var(--fn-ink); margin: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; }
main { display: block; min-height: 70vh; }

/* Home */
.hero { max-width: 560px; margin: 0 auto; padding: 48px 24px 64px; text-align: center; }
.hero-icon { width: min(56vw, 240px); height: auto; border-radius: 48px; box-shadow: 0 18px 40px rgba(122, 62, 107, 0.18); }
.hero h1 { font-size: clamp(2.2rem, 7vw, 3rem); font-weight: 800; letter-spacing: -0.02em; margin: 24px 0 8px; }
.tagline { font-size: 1.25rem; font-weight: 600; margin: 4px 0; }
.tagline-en { color: var(--fn-mute); font-weight: 500; font-size: 1.05rem; }
.soon { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px 0 32px; padding: 8px 18px; border-radius: 999px; background: var(--fn-mint); color: var(--fn-ink); font-weight: 600; font-size: 0.95rem; }
.soon .sep { opacity: 0.6; }
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.card { display: flex; flex-direction: column; min-width: 180px; padding: 18px 24px; border-radius: 28px; background: var(--fn-card); border: 1px solid var(--fn-line); color: var(--fn-ink); text-decoration: none; box-shadow: 0 6px 18px rgba(43, 33, 64, 0.06); transition: transform 0.15s ease; }
.card:hover, .card:focus-visible { transform: translateY(-2px); }
.card strong { font-size: 1.1rem; }
.card span { color: var(--fn-mute); font-size: 0.9rem; }

/* Legal pages */
.legal-page { max-width: 760px; margin: 0 auto; padding: 40px 24px 72px; }
.legal-page h1 { font-size: clamp(1.8rem, 5vw, 2.3rem); font-weight: 800; letter-spacing: -0.01em; }
.legal-page h2 { font-size: 1.35rem; margin-top: 2.2em; }
.legal-page h3 { font-size: 1.1rem; margin-top: 1.6em; }
.legal-page h2.lang-title { font-size: 1.8rem; margin-top: 3em; padding-top: 1.2em; border-top: 2px dashed var(--fn-line); }
.legal-page section[lang="en"] h2 { color: var(--fn-ink); }
.legal-page a { color: var(--fn-plum); }
.legal-page table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 18px; overflow: hidden; background: var(--fn-card); border: 1px solid var(--fn-line); font-size: 0.92rem; margin: 1em 0; }
.legal-page th, .legal-page td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--fn-line); }
.legal-page th { background: rgba(242, 169, 126, 0.18); }
.legal-page code { background: var(--fn-card); padding: 1px 6px; border-radius: 8px; }
.legal-page ul { padding-left: 1.2em; }
.legal-page li { margin: 0.3em 0; }

/* 404 */
.not-found { max-width: 560px; margin: 0 auto; padding: 64px 24px; text-align: center; }