:root {
  --ink: #fffaf3;
  --muted: rgba(255, 250, 243, 0.67);
  --soft: rgba(255, 250, 243, 0.14);
  --border: rgba(255, 255, 255, 0.22);
  --accent: #ffca8a;
  --shadow: rgba(15, 11, 34, 0.38);
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: #17142f;
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}

button, a { color: inherit; font: inherit; }
button { cursor: pointer; }

.sky-backdrop {
  position: fixed;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(28, 17, 63, 0.7), rgba(34, 24, 55, 0.09) 60%, rgba(12, 15, 39, 0.75)),
    url("https://images.unsplash.com/photo-1499346030926-9a72daac6c63?auto=format&fit=crop&w=2400&q=85") center / cover;
  background-position: center;
  background-size: cover;
  transition: background-image 1.1s ease;
}

.grain {
  position: fixed;
  z-index: -2;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

.site-header, .site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1200px, calc(100% - 96px));
  margin: auto;
}

.site-header { padding-top: 37px; animation: rise-in .8s .05s both; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; letter-spacing: -0.02em; }
.brand-mark { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--border); border-radius: 50%; color: var(--accent); font-size: 15px; }
.header-meta, .eyebrow, .section-label, .card-kicker, .site-footer { font-size: 10px; letter-spacing: 0.17em; }
.header-meta { display: flex; align-items: center; gap: 9px; color: var(--muted); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }

.page-shell { width: min(1200px, calc(100% - 96px)); margin: 0 auto; padding: 116px 0 80px; }
.intro { max-width: 680px; }
.eyebrow { color: var(--accent); font-weight: 600; animation: rise-in .8s .2s both; }
.eyebrow span { margin: 0 8px; color: rgba(255,255,255,.48); }
h1 { margin: 23px 0 19px; font-family: "Playfair Display", serif; font-size: clamp(58px, 8vw, 105px); font-weight: 500; line-height: 0.96; letter-spacing: -0.065em; animation: rise-in 1s .3s both; }
h1 em { color: #ffd8ac; font-weight: 500; }
.intro-copy { max-width: 365px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; animation: rise-in .8s .48s both; }

.sky-picker { margin-top: 91px; animation: rise-in .8s .65s both; }
.section-label { display: flex; align-items: center; gap: 17px; color: rgba(255,255,255,.64); font-weight: 600; }
.line { width: 47px; height: 1px; background: var(--border); }
.sky-options { display: flex; gap: 25px; margin-top: 19px; }
.sky-option { display: flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none; color: rgba(255,255,255,.52); font-size: 12px; transition: color .35s ease, transform .35s ease; }
.sky-option:hover { transform: translateY(-3px); }
.sky-option:hover, .sky-option.active { color: var(--ink); }
.sky-swatch { display: block; width: 27px; height: 27px; border: 2px solid transparent; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transition: border .25s ease, transform .25s ease; }
.sky-option.active .sky-swatch { border-color: var(--ink); transform: scale(1.12); }
.sky-swatch.dawn { background: linear-gradient(135deg, #f8b58c, #cc799e); }
.sky-swatch.day { background: linear-gradient(135deg, #d6eff2, #5c9db8); }
.sky-swatch.twilight { background: linear-gradient(135deg, #ffbe88, #725d9b); }
.sky-swatch.night { background: linear-gradient(135deg, #1d285b, #10152e); }

.reflection-card { width: min(580px, 100%); margin: 45px 0 0 auto; padding: 29px 32px 25px; border: 1px solid var(--border); border-radius: 4px; background: linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.05)); box-shadow: 0 22px 70px var(--shadow); backdrop-filter: blur(13px); animation: card-in 1s .8s both; transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease; }
.reflection-card:hover { transform: translateY(-6px) rotateX(1deg); box-shadow: 0 30px 85px var(--shadow); }
.card-topline, .card-footer { display: flex; align-items: center; justify-content: space-between; }
.card-kicker { color: rgba(255,255,255,.55); }
.card-kicker span { margin: 0 6px; color: var(--accent); }
.sun-icon { color: var(--accent); font-size: 22px; animation: sun-spin 12s linear infinite; }
blockquote { margin: 34px 0 42px; font-family: "Playfair Display", serif; font-size: clamp(24px, 3vw, 32px); line-height: 1.28; letter-spacing: -0.025em; }
.card-footer { gap: 20px; color: var(--muted); font-size: 11px; }
.shuffle-btn { display: flex; align-items: center; gap: 12px; padding: 10px 0 10px 14px; border: 1px solid var(--border); border-radius: 30px; background: rgba(255,255,255,.04); color: var(--ink); font-size: 11px; transition: .25s ease; }
.shuffle-btn:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.shuffle-icon { display: grid; place-items: center; width: 29px; height: 29px; margin-right: 3px; border-radius: 50%; background: var(--accent); color: #322143; font-size: 16px; }

.mood-row { display: flex; align-items: center; gap: 25px; margin-top: 53px; animation: rise-in .8s 1s both; }
.mood-label { color: var(--muted); font-size: 12px; }
.mood-buttons { display: flex; gap: 9px; }
.mood-button { padding: 9px 13px; border: 1px solid var(--border); border-radius: 30px; background: rgba(255,255,255,.03); color: rgba(255,255,255,.7); font-size: 11px; transition: .25s ease; }
.mood-button span { margin-left: 5px; color: var(--accent); }
.mood-button:hover, .mood-button.selected { border-color: var(--accent); background: rgba(255,202,138,.12); color: var(--ink); }
.explore-section { margin-top: 116px; animation: rise-in .8s 1.15s both; }
.explore-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; margin-top: 20px; }
.explore-card { position: relative; isolation: isolate; min-height: 330px; padding: 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; background: rgba(18,16,46,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 45px rgba(8,7,28,.2); backdrop-filter: blur(16px) saturate(.85); transition: transform .4s ease, border-color .4s ease, background .4s ease; }
.explore-card > * { position: relative; z-index: 1; }
.explore-card::after { position: absolute; right: -60px; bottom: -100px; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; content: ""; pointer-events: none; }
.explore-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.48); background-color: rgba(22,19,55,.8); }
.breath-card { background: linear-gradient(145deg, rgba(103,59,61,.82), rgba(18,16,46,.76)); }
.journal-card { background: linear-gradient(145deg, rgba(69,53,98,.84), rgba(18,16,46,.76)); }
.star-card { display: grid; grid-column: 1 / -1; grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 18px; align-items: start; min-height: 190px; background: linear-gradient(100deg, rgba(40,61,99,.84), rgba(18,16,46,.78)); }
.explore-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 12px; color: var(--accent); font-size: 19px; }
.explore-icon span { display: block; transform: translateY(-1px); }
.explore-kicker { margin: 28px 0 18px; color: var(--accent); font-size: 9px; font-weight: 600; letter-spacing: .16em; }
.star-card .explore-icon { grid-row: 1 / span 2; }
.star-card .explore-kicker { grid-column: 2 / -1; margin: 4px 0 12px; }
.explore-kicker span { margin-left: 7px; color: rgba(255,255,255,.48); }
.explore-card h2 { margin: 0; color: #fffdf8; font-family: "Playfair Display", serif; font-size: 27px; font-weight: 500; line-height: 1.05; letter-spacing: -.04em; text-shadow: 0 2px 18px rgba(0,0,0,.24); }
.explore-card h2 em { color: #ffd8ac; font-weight: 500; }
.explore-copy { min-height: 60px; margin: 17px 0 20px; color: rgba(255,250,243,.84); font-size: 12px; line-height: 1.65; text-shadow: 0 1px 10px rgba(0,0,0,.22); }
.explore-action, .save-action { padding: 9px 13px; border: 1px solid var(--border); border-radius: 22px; background: rgba(255,255,255,.05); color: var(--ink); font-size: 11px; transition: .25s ease; }
.explore-action:hover, .save-action:hover { border-color: var(--accent); background: rgba(255,255,255,.12); }
.explore-action span { margin-left: 12px; color: var(--accent); font-size: 16px; }
.save-action span { margin-left: 6px; color: var(--accent); font-size: 14px; }
.breath-status { min-height: 20px; margin-top: 13px; color: var(--accent); font-size: 11px; }
.journal-card textarea { display: block; width: 100%; height: 56px; padding: 11px; resize: none; border: 1px solid rgba(255,255,255,.28); border-radius: 3px; outline: none; background: rgba(8,7,27,.38); color: var(--ink); font: inherit; font-size: 11px; }
.journal-card textarea:focus { border-color: var(--accent); }
.journal-card textarea::placeholder { color: rgba(255,255,255,.4); }
.journal-card.releasing textarea { animation: release-note .8s ease forwards; }
.journal-card.releasing .save-action { opacity: .5; pointer-events: none; }
.journal-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; color: rgba(255,255,255,.4); font-size: 10px; }
.star-fact { grid-column: 2; min-height: 0; margin: 0; max-width: 700px; font-family: "Playfair Display", serif; font-size: 23px; line-height: 1.28; letter-spacing: -.02em; }
.star-card .explore-action { align-self: end; grid-column: 3; grid-row: 2; }
.site-footer { padding-bottom: 27px; color: rgba(255,255,255,.41); }
.footer-mark { color: var(--accent); font-size: 23px; }
.toast { position: fixed; right: 30px; bottom: 30px; padding: 13px 18px; border: 1px solid var(--border); border-radius: 4px; background: rgba(27,22,53,.85); box-shadow: 0 10px 35px var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; font-size: 12px; transition: .3s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes card-in {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes sun-spin {
  to { transform: rotate(360deg); }
}

@keyframes release-note {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  45% { opacity: .8; transform: translateY(-10px) rotate(-1deg); }
  100% { opacity: 0; transform: translateY(-28px) rotate(2deg); }
}

body[data-sky="dawn"] .sky-backdrop { background-image: linear-gradient(110deg, rgba(93, 43, 76, .35), rgba(245, 160, 127, .08) 60%, rgba(42, 28, 63, .42)), url("https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=2400&q=85"); }
body[data-sky="day"] .sky-backdrop { background-image: linear-gradient(110deg, rgba(26, 72, 108, .22), rgba(35, 122, 147, .04) 60%, rgba(29, 61, 93, .3)), url("https://images.unsplash.com/photo-1499346030926-9a72daac6c63?auto=format&fit=crop&w=2400&q=85"); }
body[data-sky="night"] .sky-backdrop { background-image: linear-gradient(110deg, rgba(9, 10, 37, .82), rgba(26, 22, 75, .32) 60%, rgba(4, 6, 25, .88)), url("https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=2400&q=85"); }
body[data-sky="day"] { --accent: #d3f0e9; }
body[data-sky="night"] { --accent: #b6c8ff; }
body[data-sky="dawn"] { --accent: #ffd0a5; }

@media (max-width: 700px) {
  .site-header, .site-footer, .page-shell { width: calc(100% - 40px); }
  .site-header { padding-top: 25px; }
  .header-meta { display: none; }
  .page-shell { padding-top: 82px; padding-bottom: 55px; }
  h1 { font-size: clamp(55px, 16vw, 82px); }
  .sky-picker { margin-top: 70px; }
  .sky-options { justify-content: space-between; gap: 4px; }
  .reflection-card { margin-top: 38px; padding: 23px 20px 20px; }
  blockquote { margin: 28px 0 35px; font-size: 25px; }
  .card-footer { align-items: flex-start; flex-direction: column; gap: 14px; }
  .shuffle-btn { align-self: flex-end; }
  .mood-row { align-items: flex-start; flex-direction: column; gap: 14px; margin-top: 39px; }
  .site-footer { font-size: 8px; }
  .explore-section { margin-top: 82px; }
  .explore-grid { grid-template-columns: 1fr; }
  .explore-card { min-height: auto; }
  .star-card { display: block; }
  .star-card .explore-icon { margin-bottom: 27px; }
  .star-card .explore-kicker { margin: 0 0 18px; }
  .star-fact { margin: 0 0 25px; }
}

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