@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=DM+Sans:wght@400;500;600&display=swap');

:root {
    --bg: #fff9f5; --bg-soft: #f8eee8; --surface: rgba(255,255,255,.76); --card: #fffdfb;
    --ink: #342623; --muted: #846e69; --accent: #bd6e70; --accent-dark: #884b50;
    --accent-soft: #f4d9d6; --line: rgba(102,69,64,.14); --shadow: 0 24px 70px rgba(92,52,48,.12);
    --journal-bg-start:#3b2633; --journal-bg-end:#6b3e52; --journal-glow:rgba(224,133,151,.32); --journal-text:#fff5f4; --journal-muted:#dbc0c5; --journal-accent:#f0b4be; --journal-accent-ink:#4c2933; --journal-panel:rgba(255,244,242,.075); --journal-panel-hover:rgba(255,244,242,.12); --journal-border:rgba(255,225,229,.16); --journal-moon:#ffd9ad; --journal-cloud:rgba(255,220,224,.09); --journal-shadow:rgba(58,24,39,.28);
    --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'DM Sans', Arial, sans-serif;
}

[data-theme="moon"] { --bg:#111226; --bg-soft:#191a32; --surface:rgba(31,32,57,.82); --card:#20213c; --ink:#f5efff; --muted:#bbb3cf; --accent:#c09be6; --accent-dark:#e0c8fa; --accent-soft:#332c52; --line:rgba(226,210,255,.13); --shadow:0 25px 70px rgba(0,0,0,.3); --journal-bg-start:#17172f; --journal-bg-end:#222044; --journal-glow:rgba(142,119,202,.34); --journal-text:#f7f2ff; --journal-muted:#bbb5d2; --journal-accent:#d9c8f4; --journal-accent-ink:#2c2548; --journal-panel:rgba(255,255,255,.065); --journal-panel-hover:rgba(255,255,255,.095); --journal-border:rgba(227,218,255,.12); --journal-moon:#f3dcad; --journal-cloud:rgba(203,196,239,.07); --journal-shadow:rgba(24,20,52,.28); }
[data-theme="garden"] { --bg:#f5f7ee; --bg-soft:#e8eddd; --surface:rgba(255,255,249,.78); --card:#fffef8; --ink:#28352b; --muted:#68776a; --accent:#728c6a; --accent-dark:#466144; --accent-soft:#dfe9d9; --line:rgba(54,83,58,.14); --shadow:0 24px 70px rgba(48,71,47,.13); --journal-bg-start:#20352d; --journal-bg-end:#49624c; --journal-glow:rgba(142,176,125,.3); --journal-text:#f5f8ed; --journal-muted:#c5d2c1; --journal-accent:#bed7ae; --journal-accent-ink:#263b2b; --journal-panel:rgba(246,255,238,.07); --journal-panel-hover:rgba(246,255,238,.12); --journal-border:rgba(223,241,210,.15); --journal-moon:#f4e2ae; --journal-cloud:rgba(211,233,200,.08); --journal-shadow:rgba(25,49,35,.27); }
[data-theme="hearth"] { --bg:#fbf3e7; --bg-soft:#f1dfca; --surface:rgba(255,250,241,.8); --card:#fffaf2; --ink:#412d24; --muted:#856b5c; --accent:#c9794f; --accent-dark:#8b4b31; --accent-soft:#f2d5bd; --line:rgba(112,72,49,.15); --shadow:0 24px 70px rgba(111,65,38,.14); --journal-bg-start:#3a241e; --journal-bg-end:#774330; --journal-glow:rgba(237,139,78,.36); --journal-text:#fff6e9; --journal-muted:#dfc6b2; --journal-accent:#f2b37d; --journal-accent-ink:#4d2b1e; --journal-panel:rgba(255,239,218,.075); --journal-panel-hover:rgba(255,239,218,.12); --journal-border:rgba(255,218,181,.16); --journal-moon:#ffd79a; --journal-cloud:rgba(255,208,164,.08); --journal-shadow:rgba(59,29,17,.3); }
[data-theme="lavender"] { --bg:#faf7ff; --bg-soft:#eee8f7; --surface:rgba(255,253,255,.8); --card:#fffefe; --ink:#352d43; --muted:#766c87; --accent:#9a7fba; --accent-dark:#665183; --accent-soft:#e7dcf2; --line:rgba(79,62,103,.14); --shadow:0 24px 70px rgba(86,64,111,.13); --journal-bg-start:#302842; --journal-bg-end:#65537b; --journal-glow:rgba(189,158,220,.34); --journal-text:#fbf6ff; --journal-muted:#d3c6df; --journal-accent:#d9bfea; --journal-accent-ink:#3d3150; --journal-panel:rgba(252,243,255,.07); --journal-panel-hover:rgba(252,243,255,.115); --journal-border:rgba(237,216,255,.15); --journal-moon:#f4ddb9; --journal-cloud:rgba(229,207,244,.08); --journal-shadow:rgba(39,28,56,.29); }
[data-theme="sunset"] { --bg:#fff7eb; --bg-soft:#f9dfc9; --surface:rgba(255,252,244,.8); --card:#fffdf8; --ink:#4b302a; --muted:#896d62; --accent:#dc8067; --accent-dark:#a34f43; --accent-soft:#f8d1c2; --line:rgba(132,76,62,.14); --shadow:0 24px 70px rgba(139,76,54,.13); --journal-bg-start:#4c2934; --journal-bg-end:#a05249; --journal-glow:rgba(255,178,103,.4); --journal-text:#fff7ee; --journal-muted:#f0cbbd; --journal-accent:#ffc38e; --journal-accent-ink:#542e2d; --journal-panel:rgba(255,242,223,.08); --journal-panel-hover:rgba(255,242,223,.13); --journal-border:rgba(255,222,191,.17); --journal-moon:#ffe0a6; --journal-cloud:rgba(255,215,185,.1); --journal-shadow:rgba(69,28,35,.29); }
[data-theme="ocean"] { --bg:#f0f8f8; --bg-soft:#dceced; --surface:rgba(250,255,255,.8); --card:#fbffff; --ink:#243b40; --muted:#647d80; --accent:#5a9da0; --accent-dark:#356f74; --accent-soft:#cfe7e7; --line:rgba(48,102,107,.14); --shadow:0 24px 70px rgba(42,98,105,.12); --journal-bg-start:#17343e; --journal-bg-end:#286b70; --journal-glow:rgba(91,193,186,.32); --journal-text:#f1ffff; --journal-muted:#bad7d7; --journal-accent:#91d6cf; --journal-accent-ink:#173f43; --journal-panel:rgba(232,255,254,.07); --journal-panel-hover:rgba(232,255,254,.12); --journal-border:rgba(195,241,238,.15); --journal-moon:#e9e1b8; --journal-cloud:rgba(182,230,229,.08); --journal-shadow:rgba(16,54,61,.3); }
[data-theme="snowfall"] { --bg:#f6f9fc; --bg-soft:#e7eef5; --surface:rgba(255,255,255,.82); --card:#ffffff; --ink:#2d3a4a; --muted:#6e7d8d; --accent:#8ba8c2; --accent-dark:#55758f; --accent-soft:#dce8f2; --line:rgba(72,96,121,.13); --shadow:0 24px 70px rgba(60,88,116,.12); --journal-bg-start:#263746; --journal-bg-end:#526d82; --journal-glow:rgba(183,214,237,.34); --journal-text:#f8fcff; --journal-muted:#cfdae4; --journal-accent:#c4dcef; --journal-accent-ink:#2c4355; --journal-panel:rgba(247,252,255,.075); --journal-panel-hover:rgba(247,252,255,.13); --journal-border:rgba(222,239,252,.17); --journal-moon:#fff0ca; --journal-cloud:rgba(225,240,250,.1); --journal-shadow:rgba(31,52,69,.28); }
[data-theme="blossom"] { --bg:#fff7fa; --bg-soft:#f8e5ec; --surface:rgba(255,253,254,.82); --card:#fffefe; --ink:#412d37; --muted:#856c78; --accent:#d887a5; --accent-dark:#9d526f; --accent-soft:#f4d5e1; --line:rgba(119,68,88,.13); --shadow:0 24px 70px rgba(123,65,89,.12); --journal-bg-start:#402936; --journal-bg-end:#815064; --journal-glow:rgba(234,150,181,.36); --journal-text:#fff6fb; --journal-muted:#e5c5d2; --journal-accent:#f0b4cc; --journal-accent-ink:#4c2c39; --journal-panel:rgba(255,241,247,.075); --journal-panel-hover:rgba(255,241,247,.125); --journal-border:rgba(255,217,232,.16); --journal-moon:#f9deb2; --journal-cloud:rgba(244,204,221,.09); --journal-shadow:rgba(59,29,43,.28); }
[data-theme="aurora"] { --bg:#101d24; --bg-soft:#172b32; --surface:rgba(26,47,54,.82); --card:#1b3038; --ink:#f1fff9; --muted:#aac8bf; --accent:#77d6b6; --accent-dark:#b5f1dc; --accent-soft:#244b48; --line:rgba(194,244,226,.13); --shadow:0 25px 70px rgba(0,10,15,.32); --journal-bg-start:#142b35; --journal-bg-end:#274f52; --journal-glow:rgba(126,231,192,.3); --journal-text:#f2fff9; --journal-muted:#b8d6cc; --journal-accent:#91e1c5; --journal-accent-ink:#183c3b; --journal-panel:rgba(226,255,245,.065); --journal-panel-hover:rgba(226,255,245,.11); --journal-border:rgba(200,250,233,.14); --journal-moon:#e6e4bd; --journal-cloud:rgba(172,230,213,.08); --journal-shadow:rgba(7,34,39,.32); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--sans); min-width: 280px; transition: color .35s, background .35s; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.eyebrow, .dialog-kicker, .hero-kicker { color: var(--accent-dark); font-size: .7rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; }

/* Welcome */
.welcome-page { min-height: 100svh; overflow-x: hidden; background: #fdf7f3; color: #3f2c2a; }
.welcome-shell { position: relative; display: grid; place-items: center; min-height: 100svh; padding: 54px 24px 32px; isolation: isolate; }
.welcome-shell::before { content:""; position:absolute; inset:0; z-index:-3; opacity:.45; background-image:radial-gradient(#d8aaa5 1px, transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom, #000, transparent 78%); }
.ambient { position:absolute; z-index:-2; border-radius:50%; filter:blur(8px); opacity:.72; }
.ambient-one { width:50vw; height:50vw; min-width:300px; min-height:300px; left:-15vw; top:-18vw; background:radial-gradient(circle, #f4c9c5, transparent 68%); }
.ambient-two { width:45vw; height:45vw; min-width:280px; min-height:280px; right:-14vw; bottom:-18vw; background:radial-gradient(circle, #f2d8bd, transparent 68%); }
.stars { position:absolute; inset:8% 8% auto; display:flex; justify-content:space-between; color:#c9988e; opacity:.65; font-size:clamp(.8rem, 1.5vw, 1.5rem); animation: drift 6s ease-in-out infinite; }
.welcome-content { width:min(100%, 940px); text-align:center; }
.welcome-content .eyebrow { display:inline-flex; align-items:center; gap:10px; margin-bottom:20px; }
.welcome-content h1 { margin:0; font:600 clamp(4rem, 10vw, 8.5rem)/.75 var(--serif); letter-spacing:-.055em; }
.welcome-content h1 em { color:#b96d70; font-weight:500; }
.welcome-copy { width:min(100%, 570px); margin:36px auto 42px; color:#806c68; line-height:1.75; }
.notice { display:inline-block; padding:10px 18px; margin:-20px auto 24px; border:1px solid #e9cbc6; border-radius:99px; color:#875d5a; background:#fff9f7; font-size:.85rem; }
.person-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; text-align:left; }
.person-card { position:relative; display:flex; align-items:center; gap:18px; min-height:132px; padding:22px; overflow:hidden; border:1px solid rgba(121,76,71,.12); border-radius:26px; background:rgba(255,255,255,.73); box-shadow:0 16px 45px rgba(112,68,62,.08); cursor:pointer; transition:transform .25s, box-shadow .25s, border-color .25s; backdrop-filter:blur(14px); }
.person-card:hover { transform:translateY(-6px) rotate(-.3deg); border-color:rgba(185,109,112,.45); box-shadow:0 24px 55px rgba(112,68,62,.14); }
.person-him:hover { transform:translateY(-6px) rotate(.3deg); }
.person-symbol { display:grid; place-items:center; flex:0 0 96px; width:96px; height:96px; aspect-ratio:1; overflow:hidden; border:5px solid rgba(255,255,255,.45); border-radius:50%; color:white; background:linear-gradient(145deg,#d99a9b,#a95e62); font:600 2.65rem var(--serif); line-height:0; box-shadow:0 9px 24px rgba(112,68,62,.18); }
.person-symbol img, .person-symbol video { display:block; width:100%; height:100%; min-width:100%; min-height:100%; border-radius:50%; object-fit:cover; object-position:center; }
.person-him .person-symbol { background:linear-gradient(145deg,#9b9bb6,#5f607c); }
.person-info { display:flex; flex-direction:column; min-width:0; }
.person-info small { color:#ad817c; font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; }
.person-info strong { margin:2px 0; font:600 1.85rem var(--serif); }
.person-info span { color:#86716d; font-size:.78rem; }
.person-arrow { margin-left:auto; font-size:1.3rem; color:#a76568; transition:transform .2s; }
.person-card:hover .person-arrow { transform:translateX(4px); }
.welcome-footnote { margin:32px 0 0; color:#a78b86; font:500 .9rem var(--serif); letter-spacing:.06em; }
.welcome-footnote span { margin-left:8px; color:#b96d70; }

/* Dialogs and forms */
dialog { width:min(calc(100vw - 32px), 520px); max-width:calc(100vw - 32px); max-height:calc(100svh - 32px); padding:42px; overflow:auto; border:1px solid var(--line); border-radius:30px; color:var(--ink); background:var(--card); box-shadow:0 35px 100px rgba(45,25,25,.3); }
dialog::backdrop { background:rgba(35,24,25,.5); backdrop-filter:blur(7px); }
dialog[open] { animation:dialogIn .3s ease-out; }
.dialog-close { position:absolute; top:16px; right:18px; width:36px; height:36px; border:0; border-radius:50%; color:var(--muted); background:var(--bg-soft); font-size:1.4rem; cursor:pointer; }
.dialog-icon { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 22px; border-radius:50%; color:white; background:var(--accent); font-size:1.8rem; box-shadow:0 10px 25px color-mix(in srgb, var(--accent) 35%, transparent); }
.secret-dialog { text-align:center; }
dialog h2 { margin:4px 0 6px; font:600 2.6rem/1 var(--serif); }
dialog > p:not(.dialog-kicker) { margin:0 0 26px; color:var(--muted); font-size:.9rem; }
.secret-form, .dream-form { display:flex; flex-direction:column; text-align:left; }
.secret-change-dialog .secret-form label:not(:first-of-type) { margin-top:16px; }
form label { margin:0 0 8px; font-size:.75rem; font-weight:600; letter-spacing:.05em; }
form label small { float:right; color:var(--muted); font-weight:400; }
input[type="password"], input[type="text"], textarea { width:100%; border:1px solid var(--line); border-radius:14px; outline:0; color:var(--ink); background:var(--bg); transition:border .2s, box-shadow .2s; }
input[type="password"], input[type="text"] { height:54px; padding:0 72px 0 16px; }
textarea { min-height:120px; padding:15px; resize:vertical; line-height:1.6; }
input:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent); }
.secret-input-wrap { position:relative; }
.reveal-code { position:absolute; right:8px; top:8px; height:38px; padding:0 12px; border:0; color:var(--accent-dark); background:transparent; cursor:pointer; font-size:.75rem; font-weight:600; }
.eye-button { width:38px; padding:0; border-radius:50%; font-size:1rem; opacity:.62; }
.eye-button:hover, .eye-button.is-visible { opacity:1; background:var(--accent-soft); }
.field-error { margin:7px 0 0; color:#b23b48; font-size:.76rem; line-height:1.4; }
.primary-button, .secondary-button, .add-dream-button { border:0; border-radius:99px; cursor:pointer; font-weight:600; transition:transform .2s, box-shadow .2s; }
.primary-button { display:flex; justify-content:center; gap:12px; width:100%; margin-top:20px; padding:16px 22px; color:white; background:var(--accent-dark); box-shadow:0 12px 26px color-mix(in srgb, var(--accent) 25%, transparent); }
.primary-button:hover, .secondary-button:hover, .add-dream-button:hover { transform:translateY(-2px); }
button[type="submit"].is-submitting { display:inline-flex; align-items:center; justify-content:center; cursor:wait; pointer-events:none; opacity:.78; transform:none; }
button[type="submit"].is-submitting:hover { transform:none; }
.submit-spinner { flex:0 0 17px; width:17px; height:17px; margin-left:3px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:submitButtonSpin .65s linear infinite; }

/* Dreams page */
.dreams-page { min-height:100svh; background:var(--bg); }
.dreams-shell { position:relative; min-height:100svh; overflow:hidden; }
.dreams-shell::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 90% 8%, var(--accent-soft), transparent 24%), radial-gradient(circle at 2% 48%, var(--bg-soft), transparent 24%); opacity:.8; }
.site-header, .dreams-main, .site-footer { position:relative; z-index:1; }
.site-header { z-index:40; }
.theme-ambience { position:fixed; z-index:0; inset:0; overflow:hidden; pointer-events:none; }
.theme-ambience i { position:absolute; display:block; opacity:0; }
.theme-ambience i:nth-child(1) { left:5%; top:10%; }.theme-ambience i:nth-child(2) { left:16%; top:72%; }.theme-ambience i:nth-child(3) { left:27%; top:31%; }.theme-ambience i:nth-child(4) { left:39%; top:87%; }.theme-ambience i:nth-child(5) { left:48%; top:14%; }.theme-ambience i:nth-child(6) { left:58%; top:60%; }.theme-ambience i:nth-child(7) { left:67%; top:38%; }.theme-ambience i:nth-child(8) { left:76%; top:82%; }.theme-ambience i:nth-child(9) { left:85%; top:19%; }.theme-ambience i:nth-child(10) { left:93%; top:68%; }.theme-ambience i:nth-child(11) { left:34%; top:53%; }.theme-ambience i:nth-child(12) { left:71%; top:6%; }
[data-theme="rose"] .theme-ambience i, [data-theme="blossom"] .theme-ambience i { width:13px; height:22px; border-radius:80% 20% 75% 25%; background:color-mix(in srgb,var(--accent) 38%,transparent); animation:petalWaltz 9s ease-in-out infinite; }
[data-theme="rose"] .theme-ambience i:nth-child(3n), [data-theme="blossom"] .theme-ambience i:nth-child(3n) { width:9px; height:16px; animation-delay:-4s; animation-duration:12s; }
[data-theme="moon"] .theme-ambience i { width:4px; height:4px; border-radius:50%; background:var(--accent-dark); box-shadow:0 0 12px var(--accent); animation:cosmicTwinkle 3.2s ease-in-out infinite; }
[data-theme="moon"] .theme-ambience i:nth-child(3n) { width:34px; height:34px; border:1px solid color-mix(in srgb,var(--accent) 26%,transparent); background:transparent; animation:orbitBreathe 7s ease-in-out infinite; }
[data-theme="garden"] .theme-ambience i { width:12px; height:25px; border-radius:100% 0 100% 0; background:color-mix(in srgb,var(--accent) 32%,transparent); transform-origin:bottom left; animation:leafDrift 8s ease-in-out infinite; }
[data-theme="garden"] .theme-ambience i:nth-child(even) { width:9px; height:19px; animation-delay:-3.5s; }
[data-theme="hearth"] .theme-ambience i { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 16px color-mix(in srgb,var(--accent) 80%,transparent); animation:emberRise 6s ease-out infinite; }
[data-theme="hearth"] .theme-ambience i:nth-child(odd) { width:4px; height:4px; animation-delay:-2.8s; animation-duration:8s; }
[data-theme="lavender"] .theme-ambience i { width:7px; height:28px; border-radius:99px; background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 12%,transparent)); box-shadow:5px 5px 0 -2px color-mix(in srgb,var(--accent) 35%,transparent),-4px 10px 0 -2px color-mix(in srgb,var(--accent) 28%,transparent); animation:lavenderSway 7s ease-in-out infinite; transform-origin:bottom; }
[data-theme="lavender"] .theme-ambience i:nth-child(3n) { animation-delay:-4s; }
[data-theme="sunset"] .theme-ambience i { width:54px; height:18px; border-radius:50%; background:color-mix(in srgb,var(--accent) 13%,transparent); filter:blur(3px); animation:sunsetCloud 12s ease-in-out infinite alternate; }
[data-theme="sunset"] .theme-ambience i:nth-child(4n) { width:28px; height:28px; border-radius:50%; background:color-mix(in srgb,#f5b85d 22%,transparent); filter:none; animation:sunPulse 6s ease-in-out infinite; }
[data-theme="ocean"] .theme-ambience i { width:16px; height:16px; border:1px solid color-mix(in srgb,var(--accent) 42%,transparent); border-radius:50%; box-shadow:inset 3px 3px 7px color-mix(in srgb,#fff 55%,transparent); animation:bubbleRise 9s ease-in infinite; }
[data-theme="ocean"] .theme-ambience i:nth-child(3n) { width:28px; height:28px; animation-delay:-5s; }
[data-theme="snowfall"] .theme-ambience i { color:color-mix(in srgb,var(--accent-dark) 42%,transparent); font-style:normal; animation:snowDance 10s linear infinite; }.theme-ambience i::before { content:""; }[data-theme="snowfall"] .theme-ambience i::before { content:"✦"; font-size:14px; }
[data-theme="snowfall"] .theme-ambience i:nth-child(even) { animation-delay:-5s; animation-duration:13s; }
[data-theme="blossom"] .theme-ambience i { background:color-mix(in srgb,#e99ab7 42%,transparent); animation-name:blossomFall; }
[data-theme="aurora"] .theme-ambience i { width:190px; height:46px; border-radius:50%; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,#c68be3 16%,transparent),transparent); filter:blur(12px); animation:auroraWave 9s ease-in-out infinite alternate; }
[data-theme="aurora"] .theme-ambience i:nth-child(even) { width:130px; animation-delay:-5s; animation-duration:12s; }
.site-header { display:flex; justify-content:space-between; align-items:center; width:min(100% - 48px, 1240px); margin:auto; padding:24px 0; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:white; background:var(--accent); font-size:1.25rem; }
.brand > span:last-child { display:flex; flex-direction:column; }
.brand strong { font:600 1.22rem var(--serif); }
.brand small { color:var(--muted); font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; }
.header-actions, .profile-pill { display:flex; align-items:center; }
.header-actions { gap:14px; }
.profile-pill { gap:10px; }
.profile-pill { padding:0; border:0; color:inherit; background:transparent; cursor:pointer; text-align:left; }
.profile-pill > span { display:grid; place-items:center; flex:0 0 50px; width:50px; height:50px; aspect-ratio:1; overflow:hidden; border:3px solid color-mix(in srgb, var(--accent) 42%, var(--card)); border-radius:50%; color:var(--accent-dark); background:var(--accent-soft); box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 20%, transparent); font:600 1.3rem var(--serif); line-height:0; }
.profile-pill > span img, .profile-pill > span video { display:block; width:100%; height:100%; min-width:100%; min-height:100%; border-radius:50%; object-fit:cover; object-position:center; }
.profile-pill div { display:flex; flex-direction:column; }
.profile-pill small { color:var(--muted); font-size:.56rem; text-transform:uppercase; letter-spacing:.1em; }
.profile-pill strong { font-size:.78rem; }
.text-button, .icon-button { border:0; background:transparent; cursor:pointer; }
.text-button { padding:8px; color:var(--muted); font-size:.76rem; }
.icon-button { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; color:var(--accent-dark); background:var(--surface); cursor:pointer; }
.theme-switcher { position:relative; }
.theme-menu { position:absolute; z-index:20; top:50px; right:0; width:255px; max-height:min(520px,calc(100svh - 88px)); padding:12px; overflow:auto; visibility:hidden; opacity:0; transform:translateY(-8px); border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:var(--shadow); transition:.2s; scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
.theme-menu.is-open { visibility:visible; opacity:1; transform:none; }
.theme-menu p { margin:5px 8px 10px; color:var(--muted); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; }
.theme-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 8px; border:0; border-radius:10px; color:var(--ink); background:transparent; cursor:pointer; text-align:left; font-size:.78rem; }
.theme-menu button:hover, .theme-menu button.is-active { background:var(--bg-soft); }.theme-menu button.is-active { color:var(--accent-dark); font-weight:600; }
.theme-dot { width:15px; height:15px; border-radius:50%; }
.rose-dot { background:#d99a9b; }.moon-dot { background:#7774a7; }.garden-dot { background:#7d9c72; }.hearth-dot { background:#c9794f; }.lavender-dot { background:#9a7fba; }.sunset-dot { background:linear-gradient(135deg,#f1b45e,#d96f6d); }.ocean-dot { background:#5a9da0; }.snowfall-dot { background:#a9c2d8; }.blossom-dot { background:#d887a5; }.aurora-dot { background:linear-gradient(135deg,#77d6b6,#ae80cb); }
.dreams-main { width:min(100% - 48px, 1240px); margin:auto; }
.hanging-picture { position:relative; flex:0 1 420px; width:min(43%,420px); height:var(--hanging-initial-height,365px); filter:drop-shadow(0 20px 17px color-mix(in srgb,var(--ink) 18%,transparent)); }
.picture-hook { position:absolute; z-index:3; top:14px; left:50%; width:22px; height:22px; transform:translateX(-50%); border:5px solid color-mix(in srgb,#a27a55 78%,var(--ink)); border-radius:50%; background:radial-gradient(circle at 35% 30%,#f1d3a9,#8c6446 70%); box-shadow:0 3px 5px rgba(50,30,18,.28); }
.picture-string { position:absolute; z-index:1; top:31px; left:50%; width:2px; height:var(--string-initial-length,145px); transform-origin:top center; background:linear-gradient(90deg,#816348,#d3b58d,#6d513b); box-shadow:0 0 2px rgba(63,43,28,.22); }
.picture-string-left { transform:rotate(var(--string-left-initial-angle,53deg)); }
.picture-string-right { transform:rotate(var(--string-right-initial-angle,-53deg)); }
.wooden-frame { position:absolute; z-index:2; top:116px; left:50%; width:min(100%,var(--frame-initial-width,350px)); aspect-ratio:var(--frame-ratio,4/3); padding:16px; border:0; background:repeating-linear-gradient(102deg,#755035 0 5px,#a87951 6px 13px,#8d6141 14px 21px,#bc8d63 22px 27px); box-shadow:inset 0 0 0 3px rgba(65,36,18,.35),inset 0 0 0 7px rgba(255,224,184,.15),0 16px 28px rgba(54,33,20,.25); cursor:pointer; transform:translateX(-50%); }
.wooden-frame::before { content:""; position:absolute; inset:9px; border:2px solid rgba(245,215,173,.42); box-shadow:inset 0 0 8px rgba(39,20,10,.55); pointer-events:none; }
.wooden-frame:hover { transform:translateX(-50%); }
.frame-inner { position:relative; display:grid; place-items:center; width:100%; height:100%; overflow:hidden; border:8px solid #eee2cf; background:linear-gradient(145deg,#efe6d8,#d8c6ac); box-shadow:inset 0 0 16px rgba(52,36,23,.22); }
.frame-inner img, .frame-inner video { position:relative; z-index:1; display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; object-position:center; background:#e9ddcb; }
.frame-shine { position:absolute; inset:26px; background:linear-gradient(135deg,rgba(255,255,255,.24),transparent 33%); pointer-events:none; }
.empty-frame { display:flex; align-items:center; flex-direction:column; color:#8c725d; text-align:center; }
.empty-frame b { margin-bottom:8px; color:var(--accent); font:500 2.6rem var(--serif); }
.empty-frame strong { font:600 1.3rem var(--serif); }
.empty-frame small { margin-top:5px; font-size:.62rem; }
.wall-photo-dialog { text-align:center; }
.wall-photo-dialog-icon { background:linear-gradient(145deg,#b58a60,#765139); }
.wall-photo-form { display:flex; flex-direction:column; margin-top:20px; text-align:left; }
.wall-photo-picker { display:flex; align-items:center; flex-direction:column; margin:0; padding:17px; border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent); border-radius:22px; background:var(--bg); cursor:pointer; }
.wall-photo-picker input { position:absolute; width:1px; height:1px; opacity:0; }
.wall-photo-preview-shell { position:relative; display:grid; place-items:center; width:100%; max-width:100%; aspect-ratio:var(--wall-preview-ratio,4/3); margin:0 auto 14px; overflow:hidden; border:10px solid #9b6c48; background:#e9ddcb; box-shadow:inset 0 0 0 5px #eee2cf,0 12px 25px rgba(55,35,22,.15); }
.wall-photo-picker .wall-photo-preview-shell > img, .wall-photo-picker .wall-photo-preview-shell > video { display:block; width:100%; height:100%; min-width:0; min-height:0; padding:5px; object-fit:contain; object-position:center; background:#e9ddcb; }
.wall-photo-preview-shell img:not([src]) { display:none; }
.wall-photo-preview-shell > span { display:flex; align-items:center; flex-direction:column; color:var(--muted); }
.wall-photo-preview-shell > span b { color:var(--accent); font-size:2rem; }
.wall-photo-preview-shell > span strong { font:600 1.2rem var(--serif); }
.wall-photo-picker > strong { color:var(--accent-dark); font-size:.78rem; }
.wall-photo-picker > small { margin-top:4px; color:var(--muted); font-size:.63rem; }
.hero { display:flex; justify-content:space-between; align-items:center; gap:clamp(28px,6vw,80px); min-height:470px; padding:42px 4vw 64px; }
.hero-copy { flex:1 1 520px; min-width:0; }
.hero-kicker { margin:0 0 15px; }.hero-kicker span { margin-left:8px; }
.hero h1 { margin:0; font:600 clamp(3.4rem, 7vw, 6.4rem)/.8 var(--serif); letter-spacing:-.04em; }
.hero h1 em { color:var(--accent); font-weight:500; }
.hero > div:first-child > p:last-child { max-width:530px; margin:28px 0 0; color:var(--muted); line-height:1.7; }
.collection { padding:0 0 90px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:28px; }
.section-heading .eyebrow { margin:0 0 7px; }
.section-heading h2 { margin:0; font:600 clamp(2rem, 4vw, 3.2rem)/1 var(--serif); }
.heading-with-count { display:flex; align-items:flex-end; gap:13px; }
.collection-count { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; margin-bottom:3px; padding:7px 11px; border:1px solid var(--line); border-radius:99px; color:var(--muted); background:var(--surface); font-size:.61rem; letter-spacing:.04em; white-space:nowrap; }
.collection-count strong { color:var(--accent-dark); font:600 1rem/1 var(--serif); }
.collection-actions { display:flex; align-items:center; gap:12px; }
.layout-picker { display:flex; align-items:center; gap:4px; padding:4px; border:1px solid var(--line); border-radius:99px; background:var(--surface); box-shadow:0 8px 24px color-mix(in srgb, var(--ink) 5%, transparent); backdrop-filter:blur(12px); }
.layout-picker button { display:flex; align-items:center; gap:6px; height:38px; padding:0 12px; border:0; border-radius:99px; color:var(--muted); background:transparent; cursor:pointer; transition:color .2s, background .2s, box-shadow .2s; }
.layout-picker button span { font-size:1rem; line-height:1; }
.layout-picker button small { font-size:.64rem; font-weight:600; }
.layout-picker button:hover { color:var(--accent-dark); }
.layout-picker button.is-active { color:var(--accent-dark); background:var(--accent-soft); box-shadow:0 5px 13px color-mix(in srgb, var(--ink) 8%, transparent); }
.add-dream-button { display:flex; align-items:center; gap:9px; padding:13px 20px; color:white; background:var(--accent-dark); box-shadow:0 12px 25px color-mix(in srgb, var(--accent) 22%, transparent); }
.add-dream-button span { font-size:1.1rem; }
.empty-state { display:grid; place-items:center; min-height:420px; padding:55px 20px; border:1px dashed color-mix(in srgb, var(--accent) 36%, transparent); border-radius:32px; text-align:center; background:var(--surface); }
.empty-orbit { display:grid; place-items:center; width:90px; height:90px; margin-bottom:20px; border:1px solid var(--accent-soft); border-radius:50%; animation:float 4s ease-in-out infinite; }
.empty-orbit span { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; color:white; background:var(--accent); font-size:1.7rem; }
.empty-state .eyebrow { margin:0; }.empty-state h3 { margin:2px 0 8px; font:600 2.2rem var(--serif); }.empty-state > p:not(.eyebrow) { max-width:450px; margin:0 0 20px; color:var(--muted); line-height:1.6; }
.secondary-button { padding:13px 20px; color:var(--accent-dark); background:var(--accent-soft); }
.dream-grid { columns:3 280px; column-gap:24px; }
.dream-card { position:relative; display:inline-block; width:100%; margin:0 0 24px; overflow:hidden; break-inside:avoid; border:1px solid var(--line); border-radius:22px; background:var(--card); box-shadow:0 12px 35px color-mix(in srgb, var(--ink) 7%, transparent); transition:transform .3s, box-shadow .3s; }
.dream-card[data-edit-wish], .journal-entry[data-edit-journal] { cursor:pointer; touch-action:manipulation; }
.dream-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.dream-image-wrap { position:relative; overflow:hidden; margin:10px 10px 0; border-radius:15px; }
.dream-image-wrap img { display:block; width:100%; max-height:520px; object-fit:cover; transition:transform .5s; }
.dream-card:hover img { transform:scale(1.025); }
.image-sheen { position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.2), transparent 35%); pointer-events:none; }
.dream-card-content { padding:22px; }
.dream-description { margin:0 0 24px; white-space:pre-line; font:500 1.32rem/1.4 var(--serif); }
.image-caption { color:var(--muted); font-style:italic; font-size:1.08rem; }
.dream-card footer { display:flex; align-items:center; gap:7px; padding-top:15px; border-top:1px solid var(--line); color:var(--muted); font-size:.66rem; }
.creator-initial { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:var(--accent-dark); background:var(--accent-soft); font:600 .85rem var(--serif); }
.dream-card footer time { margin-left:auto; }
.card-decoration { display:flex; justify-content:space-around; padding:42px 25px 10px; color:var(--accent); opacity:.7; font-size:1rem; }
.card-decoration span:nth-child(2) { display:grid; place-items:center; width:70px; height:70px; border:1px solid var(--accent-soft); border-radius:50%; font-size:2rem; }

/* Floating constellation */
.dream-grid[data-dream-layout="float"] { position:relative; display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:30px 22px; padding:42px 24px 86px; columns:auto; isolation:isolate; }
.dream-grid[data-dream-layout="float"]::before { content:"✦  ·  ♡  ·  ✧  ·  ✦"; position:absolute; inset:3% 3% auto; z-index:-1; color:var(--accent); opacity:.16; font:500 clamp(2rem, 7vw, 5.5rem) var(--serif); letter-spacing:clamp(1rem, 5vw, 5rem); white-space:nowrap; }
.dream-grid[data-dream-layout="float"] .dream-card { grid-column:span 4; margin:0; rotate:-.7deg; animation:dreamFloat 6s ease-in-out infinite; }
.dream-grid[data-dream-layout="float"] .dream-card:nth-child(3n+2) { translate:0 54px; rotate:1.1deg; animation-delay:-2s; }
.dream-grid[data-dream-layout="float"] .dream-card:nth-child(3n) { translate:0 14px; rotate:-.2deg; animation-delay:-4s; }
.dream-grid[data-dream-layout="float"] .dream-card:nth-child(5n+1) { grid-column:span 5; }
.dream-grid[data-dream-layout="float"] .dream-card:nth-child(5n+2) { grid-column:span 3; }
.dream-grid[data-dream-layout="float"] .dream-card:hover { animation-play-state:paused; rotate:0deg; }

/* Alternating relationship story */
.dream-grid[data-dream-layout="trail"] { position:relative; display:flex; flex-direction:column; width:min(100%, 980px); margin:20px auto 0; padding:28px 0 70px; columns:auto; }
.dream-grid[data-dream-layout="trail"]::before { content:""; position:absolute; top:0; bottom:20px; left:50%; width:1px; background:linear-gradient(transparent, var(--accent), var(--accent-soft), transparent); }
.dream-grid[data-dream-layout="trail"]::after { content:"♡"; position:absolute; top:-18px; left:50%; display:grid; place-items:center; width:40px; height:40px; translate:-50% 0; border-radius:50%; color:white; background:var(--accent); box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent); }
.dream-grid[data-dream-layout="trail"] .dream-card { width:calc(50% - 38px); margin:0 0 -12px; overflow:visible; align-self:flex-start; }
.dream-grid[data-dream-layout="trail"] .dream-card:nth-child(even) { align-self:flex-end; }
.dream-grid[data-dream-layout="trail"] .dream-card::before { content:""; position:absolute; top:52px; right:-45px; width:12px; height:12px; border:3px solid var(--bg); border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.dream-grid[data-dream-layout="trail"] .dream-card:nth-child(even)::before { right:auto; left:-45px; }
.dream-grid[data-dream-layout="trail"] .dream-image-wrap, .dream-grid[data-dream-layout="trail"] .dream-card-content { overflow:hidden; }
/* Romantic scrapbook */
.dream-grid[data-dream-layout="scrapbook"] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 24px; padding:25px 14px 60px; columns:auto; }
.dream-grid[data-dream-layout="scrapbook"] .dream-card { display:block; margin:0; overflow:visible; rotate:-1.2deg; border-radius:8px; box-shadow:7px 12px 0 color-mix(in srgb,var(--accent-soft) 62%,transparent),0 20px 40px color-mix(in srgb,var(--ink) 9%,transparent); }
.dream-grid[data-dream-layout="scrapbook"] .dream-card:nth-child(3n+2) { translate:0 20px; rotate:1.4deg; }.dream-grid[data-dream-layout="scrapbook"] .dream-card:nth-child(3n) { rotate:-.3deg; }
.dream-grid[data-dream-layout="scrapbook"] .dream-card::after { content:""; position:absolute; top:-10px; left:50%; width:65px; height:19px; translate:-50% 0; rotate:-2deg; background:color-mix(in srgb,var(--accent-soft) 78%,transparent); box-shadow:0 2px 5px color-mix(in srgb,var(--ink) 8%,transparent); }
.dream-grid[data-dream-layout="scrapbook"] .dream-image-wrap { border-radius:3px; }
/* Horizontal memory shelf */
.dream-grid[data-dream-layout="shelf"] { display:flex; gap:20px; margin-inline:calc(50% - 50vw); padding:28px max(24px,calc((100vw - 1240px)/2)) 58px; overflow-x:auto; columns:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
.dream-grid[data-dream-layout="shelf"] .dream-card { display:block; flex:0 0 clamp(270px,31vw,390px); margin:0; scroll-snap-align:center; }
.dream-grid[data-dream-layout="shelf"]::after { content:""; flex:0 0 1px; }
.site-footer { display:flex; align-items:center; justify-content:center; gap:14px; padding:30px 20px 36px; border-top:1px solid var(--line); color:var(--muted); font:500 .95rem var(--serif); }
.site-footer i { color:var(--accent); font-style:normal; }.site-footer small { margin-left:20px; font:400 .65rem var(--sans); }
.toast { position:fixed; z-index:50; top:90px; left:50%; padding:12px 18px; transform:translateX(-50%); border:1px solid var(--line); border-radius:99px; color:var(--accent-dark); background:var(--card); box-shadow:var(--shadow); font-size:.78rem; transition:.35s; }
.toast-leave { opacity:0; transform:translate(-50%, -10px); }
.mobile-add { display:none; }

/* Shared music player */
.music-control { position:fixed; z-index:35; left:18px; bottom:calc(18px + env(safe-area-inset-bottom)); display:flex; align-items:center; flex-direction:column; gap:7px; width:74px; padding:7px 6px; border:1px solid var(--line); border-radius:32px; color:var(--muted); background:color-mix(in srgb, var(--card) 90%, transparent); box-shadow:0 10px 30px color-mix(in srgb, var(--ink) 12%, transparent); backdrop-filter:blur(14px); transition:transform .2s, color .2s, background .2s; }
.music-control:hover { transform:translateY(-2px); color:var(--accent-dark); }
.music-mobile-tab { display:none; }
.music-library-button { display:flex; align-items:center; flex-direction:column; gap:5px; width:100%; padding:3px; border:0; color:inherit; background:transparent; cursor:pointer; text-align:center; }
.music-note { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border-radius:50%; color:white; background:var(--accent); font-size:1rem; }
.music-bars { display:flex; align-items:end; gap:2px; height:13px; }
.music-bars i { display:block; width:2px; height:5px; border-radius:2px; background:var(--accent); transform-origin:bottom; }
.music-bars i:nth-child(2) { height:10px; }.music-bars i:nth-child(3) { height:7px; }
.music-control.is-playing .music-bars i { animation:musicBar .8s ease-in-out infinite alternate; }
.music-control.is-playing .music-bars i:nth-child(2) { animation-delay:-.45s; }.music-control.is-playing .music-bars i:nth-child(3) { animation-delay:-.2s; }
.music-current { display:flex; align-items:center; flex-direction:column; min-width:0; width:100%; }.music-current small { font-size:.48rem; letter-spacing:.06em; text-transform:uppercase; }.music-current strong { overflow:hidden; width:58px; font-size:.58rem; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.volume-control { display:flex; align-items:center; flex-direction:column; gap:5px; margin:1px 0; color:var(--accent-dark); }
.volume-icon { display:grid; place-items:center; width:22px; height:22px; color:var(--accent-dark); }.volume-icon svg { display:block; width:17px; height:17px; }.volume-control input { width:4px; height:82px; padding:0; border:0; border-radius:99px; outline:0; accent-color:var(--accent); cursor:pointer; direction:rtl; writing-mode:vertical-lr; }.volume-control small { width:auto; color:var(--muted); font-size:.5rem; text-align:center; }
.music-toggle { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border:0; border-radius:50%; color:var(--accent-dark); background:var(--accent-soft); cursor:pointer; font-size:.78rem; font-weight:700; }
.music-toggle:disabled { cursor:not-allowed; opacity:.42; }

.music-dialog { width:min(calc(100% - 32px), 650px); text-align:center; }
.audio-upload-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; text-align:left; }
.audio-file-picker { grid-column:1 / -1; display:flex; align-items:center; flex-direction:column; padding:22px; border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius:18px; color:var(--accent-dark); background:var(--bg); cursor:pointer; text-align:center; }
.audio-file-picker input { position:absolute; width:1px; height:1px; opacity:0; }.audio-file-picker > span { display:grid; place-items:center; width:42px; height:42px; margin-bottom:8px; border-radius:50%; color:white; background:var(--accent); font-size:1.2rem; }.audio-file-picker strong { font-size:.78rem; }.audio-file-picker small { margin-top:4px; color:var(--muted); font-size:.62rem; }
.audio-upload-form > label:not(.audio-file-picker), .audio-upload-form > input, .audio-upload-form > .field-error { grid-column:1 / -1; }.audio-upload-form .form-note { grid-column:1 / -1; margin-top:0; }.audio-upload-form .primary-button { grid-column:1 / -1; margin-top:2px; }
.audio-library { margin-top:28px; padding-top:22px; border-top:1px solid var(--line); text-align:left; }
.audio-library-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }.audio-library-heading strong { font:600 1.25rem var(--serif); }.audio-library-heading span { color:var(--muted); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }
.audio-track { display:flex; align-items:center; gap:11px; width:100%; margin-bottom:7px; padding:10px; border:1px solid transparent; border-radius:14px; color:var(--ink); background:var(--bg); cursor:pointer; text-align:left; transition:border .2s, transform .2s, background .2s; }.audio-track:hover { transform:translateX(3px); border-color:var(--line); }.audio-track.is-selected { border-color:color-mix(in srgb, var(--accent) 35%, transparent); background:var(--accent-soft); }
.track-play { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border-radius:50%; color:var(--accent-dark); background:var(--card); font-size:.7rem; }.track-copy { display:flex; flex-direction:column; min-width:0; }.track-copy strong { overflow:hidden; font-size:.76rem; text-overflow:ellipsis; white-space:nowrap; }.track-copy small { margin-top:2px; color:var(--muted); font-size:.6rem; }.track-selected { margin-left:auto; color:var(--accent-dark); font-size:.6rem; font-weight:600; }
.audio-empty { display:grid; place-items:center; padding:28px; border:1px dashed var(--line); border-radius:16px; color:var(--muted); text-align:center; }.audio-empty span { color:var(--accent); font-size:1.6rem; }.audio-empty p { margin:7px 0 0; font-size:.72rem; line-height:1.5; }

/* The dreams we see while sleeping */
.night-journal { position:relative; margin:10px 0 100px; padding:64px clamp(22px, 5vw, 68px); overflow:hidden; border:1px solid var(--journal-border); border-radius:38px; color:var(--journal-text); background:radial-gradient(circle at 82% 12%, var(--journal-glow), transparent 27%), linear-gradient(145deg,var(--journal-bg-start),var(--journal-bg-end) 58%,var(--journal-bg-start)); box-shadow:0 28px 80px var(--journal-shadow); isolation:isolate; transition:color .35s, background .35s, border-color .35s, box-shadow .35s; }
.journal-sky { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }.journal-moon { position:absolute; top:32px; right:7%; color:var(--journal-moon); font:500 5rem/1 var(--serif); filter:drop-shadow(0 0 18px color-mix(in srgb,var(--journal-moon) 35%,transparent)); animation:moonFloat 5s ease-in-out infinite; }.journal-sky i { position:absolute; width:4px; height:4px; border-radius:50%; background:var(--journal-text); box-shadow:0 0 10px var(--journal-text); animation:starBlink 2.8s ease-in-out infinite; }.journal-sky i:nth-of-type(1) { top:17%; left:12%; }.journal-sky i:nth-of-type(2) { top:30%; left:56%; animation-delay:-1s; }.journal-sky i:nth-of-type(3) { top:72%; right:9%; animation-delay:-2s; }.journal-sky b { position:absolute; width:260px; height:72px; border-radius:50%; background:var(--journal-cloud); filter:blur(17px); animation:cloudDrift 16s ease-in-out infinite alternate; }.journal-sky b:nth-of-type(1) { top:24%; left:-8%; }.journal-sky b:nth-of-type(2) { right:-10%; bottom:9%; animation-delay:-7s; }
.journal-heading { position:relative; display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:36px; }.journal-heading .eyebrow { margin:0 0 8px; color:var(--journal-accent); }.journal-heading h2 { margin:0; font:600 clamp(2.6rem, 6vw, 4.7rem)/.9 var(--serif); }.journal-heading p:last-child { max-width:530px; margin:18px 0 0; color:var(--journal-muted); line-height:1.65; }
.journal-count { border-color:var(--journal-border); color:var(--journal-muted); background:var(--journal-panel); }.journal-count strong { color:var(--journal-accent); }
.journal-actions { display:flex; align-items:flex-end; flex-direction:column; flex-shrink:0; gap:12px; }.night-journal .layout-picker { border-color:var(--journal-border); background:var(--journal-panel); box-shadow:0 8px 24px var(--journal-shadow); }.night-journal .layout-picker button { color:var(--journal-muted); }.night-journal .layout-picker button:hover { color:var(--journal-text); }.night-journal .layout-picker button.is-active { color:var(--journal-accent-ink); background:var(--journal-accent); box-shadow:0 5px 13px var(--journal-shadow); }
.journal-add-button { display:flex; align-items:center; gap:8px; flex-shrink:0; padding:13px 19px; border:1px solid var(--journal-border); border-radius:99px; color:var(--journal-accent-ink); background:var(--journal-accent); cursor:pointer; font-weight:600; box-shadow:0 12px 30px var(--journal-shadow); transition:transform .2s, box-shadow .2s, background .35s; }.journal-add-button:hover { transform:translateY(-3px); box-shadow:0 17px 36px var(--journal-shadow); }
.journal-empty { display:grid; place-items:center; min-height:280px; padding:35px; border:1px dashed var(--journal-border); border-radius:26px; text-align:center; background:var(--journal-panel); }.sleeping-moon { color:var(--journal-moon); font:500 4rem/1 var(--serif); animation:moonFloat 4s ease-in-out infinite; }.journal-empty h3 { margin:8px 0 4px; font:600 1.9rem var(--serif); }.journal-empty p { max-width:430px; margin:0 0 18px; color:var(--journal-muted); line-height:1.6; }.journal-empty button { padding:11px 17px; border:0; border-radius:99px; color:var(--journal-accent-ink); background:var(--journal-accent); cursor:pointer; font-weight:600; }
.journal-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.journal-entry { position:relative; display:flex; gap:15px; min-height:145px; padding:20px; border:1px solid var(--journal-border); border-radius:22px; background:var(--journal-panel); box-shadow:0 12px 35px var(--journal-shadow); backdrop-filter:blur(10px); animation:journalEntryIn .6s both; transition:transform .25s, background .25s, border-color .35s; }.journal-entry:nth-child(2n) { animation-delay:.1s; }.journal-entry:hover { transform:translateY(-5px); background:var(--journal-panel-hover); }.journal-entry-star { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border-radius:50%; color:var(--journal-accent-ink); background:var(--journal-accent); box-shadow:0 0 25px color-mix(in srgb,var(--journal-accent) 24%,transparent); }.journal-entry-body { display:flex; flex:1; flex-direction:column; min-width:0; }.journal-entry-body > p { margin:2px 0 20px; color:var(--journal-text); font:500 1.22rem/1.45 var(--serif); white-space:pre-line; }.journal-entry-body .voice-label { color:var(--journal-muted); font-style:italic; }.journal-entry audio { width:100%; height:38px; margin:0 0 16px; }.journal-entry footer { display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:12px; border-top:1px solid var(--journal-border); color:var(--journal-muted); font-size:.62rem; }.journal-entry footer strong { color:var(--journal-accent); }.journal-entry footer time { white-space:nowrap; }
.journal-list[data-journal-layout="float"] { grid-template-columns:repeat(12,minmax(0,1fr)); gap:28px 18px; padding:26px 12px 55px; }.journal-list[data-journal-layout="float"] .journal-entry { grid-column:span 6; rotate:-.6deg; animation:journalEntryIn .6s both,dreamFloat 7s ease-in-out infinite; }.journal-list[data-journal-layout="float"] .journal-entry:nth-child(3n+2) { translate:0 26px; rotate:1deg; animation-delay:.1s,-2.5s; }.journal-list[data-journal-layout="float"] .journal-entry:nth-child(5n) { grid-column:2 / span 6; }
.journal-list[data-journal-layout="trail"] { position:relative; display:flex; flex-direction:column; gap:5px; width:min(100%,950px); margin:auto; padding:28px 0 45px; }.journal-list[data-journal-layout="trail"]::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:linear-gradient(transparent,var(--journal-accent),transparent); }.journal-list[data-journal-layout="trail"] .journal-entry { width:calc(50% - 34px); align-self:flex-start; }.journal-list[data-journal-layout="trail"] .journal-entry:nth-child(even) { align-self:flex-end; }.journal-list[data-journal-layout="trail"] .journal-entry::after { content:""; position:absolute; top:42px; right:-42px; width:11px; height:11px; border:3px solid var(--journal-bg-start); border-radius:50%; background:var(--journal-accent); }.journal-list[data-journal-layout="trail"] .journal-entry:nth-child(even)::after { right:auto; left:-42px; }
.journal-list[data-journal-layout="scrapbook"] { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 18px; padding:24px 8px 45px; }.journal-list[data-journal-layout="scrapbook"] .journal-entry { min-height:190px; rotate:-1.1deg; border-radius:9px; box-shadow:6px 9px 0 color-mix(in srgb,var(--journal-accent) 13%,transparent),0 16px 32px var(--journal-shadow); }.journal-list[data-journal-layout="scrapbook"] .journal-entry:nth-child(3n+2) { translate:0 18px; rotate:1.2deg; }.journal-list[data-journal-layout="scrapbook"] .journal-entry::after { content:""; position:absolute; top:-9px; left:50%; width:58px; height:17px; translate:-50%; rotate:-2deg; background:color-mix(in srgb,var(--journal-accent) 28%,transparent); }
.journal-list[data-journal-layout="shelf"] { display:flex; gap:18px; margin-inline:calc(0px - clamp(22px,5vw,68px)); padding:26px clamp(22px,5vw,68px) 45px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--journal-accent) transparent; }.journal-list[data-journal-layout="shelf"] .journal-entry { flex:0 0 clamp(280px,38vw,430px); min-height:210px; scroll-snap-align:center; }

.journal-dialog { width:min(calc(100% - 32px), 620px); text-align:center; }.moon-dialog-icon { background:linear-gradient(145deg,#8970bd,#50437c); }.journal-form { display:flex; flex-direction:column; margin-top:24px; text-align:left; }.journal-type-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:20px; }.journal-type-picker label { margin:0; cursor:pointer; }.journal-type-picker input { position:absolute; opacity:0; pointer-events:none; }.journal-type-picker span { display:flex; align-items:center; flex-direction:column; padding:16px 10px; border:1px solid var(--line); border-radius:17px; color:var(--muted); background:var(--bg); text-align:center; transition:border .2s, background .2s, transform .2s; }.journal-type-picker input:checked + span { border-color:var(--accent); color:var(--accent-dark); background:var(--accent-soft); transform:translateY(-2px); }.journal-type-picker b { font-size:1.3rem; }.journal-type-picker strong { margin-top:3px; font-size:.77rem; }.journal-type-picker small { margin-top:2px; font-size:.6rem; font-weight:400; }.journal-input-panel[hidden] { display:none; }.journal-input-panel { display:flex; flex-direction:column; }.journal-audio-picker { display:flex; align-items:center; flex-direction:column; padding:30px 18px; border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent); border-radius:18px; color:var(--accent-dark); background:var(--bg); cursor:pointer; text-align:center; }.journal-audio-picker input { position:absolute; width:1px; height:1px; opacity:0; }.journal-audio-picker b { display:grid; place-items:center; width:48px; height:48px; margin-bottom:9px; border-radius:50%; color:white; background:var(--accent); font-size:1.2rem; }.journal-audio-picker strong { font-size:.78rem; }.journal-audio-picker small { margin-top:4px; color:var(--muted); font-size:.61rem; }
.journal-input-panel > audio { width:100%; height:40px; margin:0 0 12px; }

/* Add dream */
.dream-dialog { width:min(calc(100% - 32px), 600px); text-align:center; }
.dream-form { gap:0; margin-top:24px; }
.image-picker { position:relative; display:grid; place-items:center; min-height:190px; margin:0 0 22px; overflow:hidden; border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius:20px; color:var(--accent-dark); background:var(--bg); cursor:pointer; }
.image-picker input { position:absolute; width:1px; height:1px; opacity:0; }
.image-placeholder { display:flex; align-items:center; flex-direction:column; }
.image-placeholder b { display:grid; place-items:center; width:46px; height:46px; margin-bottom:10px; border-radius:50%; color:white; background:var(--accent); font-size:1.2rem; }
.image-placeholder strong { font-size:.82rem; }.image-placeholder small { margin-top:4px; color:var(--muted); font-size:.65rem; }
.image-picker img { display:none; width:100%; max-height:280px; object-fit:cover; }
.image-picker .change-image { display:none; position:absolute; right:12px; bottom:12px; padding:7px 11px; border-radius:99px; color:white; background:rgba(20,15,15,.65); font-size:.65rem; }
.image-picker.has-preview { border-style:solid; }.image-picker.has-preview .image-placeholder { display:none; }.image-picker.has-preview img, .image-picker.has-preview .change-image { display:block; }
.form-note { display:flex; align-items:center; gap:8px; margin-top:14px; padding:12px 14px; border-radius:12px; color:var(--muted); background:var(--bg-soft); font-size:.69rem; }.form-note span { color:var(--accent); font-size:1rem; }

/* Profile picture */
.profile-dialog { text-align:center; }
.profile-form { display:flex; flex-direction:column; margin-top:22px; }
.profile-picture-picker { display:flex; align-items:center; flex-direction:column; margin:0; padding:24px; border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius:22px; background:var(--bg); cursor:pointer; }
.profile-picture-picker input { position:absolute; width:1px; height:1px; opacity:0; }
.profile-preview-shell { position:relative; display:grid; place-items:center; flex:0 0 174px; width:174px; height:174px; aspect-ratio:1; margin-bottom:18px; overflow:hidden; border:6px solid var(--card); border-radius:50%; color:white; background:linear-gradient(145deg, var(--accent), var(--accent-dark)); box-shadow:0 14px 36px color-mix(in srgb, var(--accent) 28%, transparent); font:600 4rem var(--serif); line-height:0; }
.profile-preview-shell img, .profile-preview-shell video { display:block; width:100%; height:100%; min-width:100%; min-height:100%; border-radius:50%; object-fit:cover; object-position:center; }
.profile-preview-shell img:not([src]) { display:none; }
.profile-picture-picker > strong { color:var(--accent-dark); font-size:.82rem; }.profile-picture-picker > small { margin-top:5px; color:var(--muted); font-size:.65rem; }

/* Reactions */
.reaction-area { position:relative; margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); }
.reaction-actions { position:relative; }
.reaction-trigger { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:99px; color:var(--accent-dark); background:var(--bg-soft); cursor:pointer; font-size:.66rem; font-weight:600; transition:transform .2s, background .2s; }
.reaction-trigger:hover, .reaction-trigger[aria-expanded="true"] { transform:translateY(-1px); background:var(--accent-soft); }
.reaction-trigger span { font:600 1rem var(--serif); }
.reaction-picker { margin-top:9px; padding:12px; border:1px solid var(--line); border-radius:16px; background:var(--bg); box-shadow:0 14px 35px color-mix(in srgb,var(--ink) 10%,transparent); animation:reactionPickerIn .2s ease-out; }
.reaction-picker[hidden] { display:none; }
.reaction-emoji-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; max-height:156px; overflow-x:hidden; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior:contain; }
.reaction-emoji-grid::-webkit-scrollbar { display:none; width:0; height:0; }
.reaction-emoji-grid button { display:grid; place-items:center; aspect-ratio:1; min-width:0; padding:0; border:0; border-radius:9px; background:transparent; cursor:pointer; font-size:1.15rem; transition:transform .15s, background .15s; }
.reaction-emoji-grid button:hover, .reaction-emoji-grid button:focus-visible { transform:scale(1.14); background:var(--accent-soft); outline:0; }
.reaction-emoji-grid button:disabled { opacity:.45; cursor:wait; }
.reaction-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }.reaction-list.is-empty { display:none; }
.reaction-chip { display:inline-flex; align-items:center; gap:4px; min-height:29px; padding:3px 9px; border:1px solid var(--line); border-radius:99px; color:var(--ink); background:var(--surface); box-shadow:0 4px 10px color-mix(in srgb,var(--ink) 5%,transparent); }
.reaction-chip.is-mine { border-color:color-mix(in srgb,var(--accent) 52%,transparent); background:var(--accent-soft); }
.reaction-chip b { font-size:1rem; font-weight:400; }.reaction-chip small { color:var(--muted); font-size:.58rem; font-weight:600; }
.journal-entry .reaction-area { border-color:var(--journal-border); }
.journal-entry .reaction-trigger { border-color:var(--journal-border); color:var(--journal-accent); background:var(--journal-panel); }
.journal-entry .reaction-trigger:hover, .journal-entry .reaction-trigger[aria-expanded="true"] { background:var(--journal-panel-hover); }
.journal-entry .reaction-picker { border-color:var(--journal-border); background:color-mix(in srgb,var(--journal-bg-start) 86%,black); box-shadow:0 14px 35px var(--journal-shadow); }
.journal-entry .reaction-emoji-grid button:hover, .journal-entry .reaction-emoji-grid button:focus-visible { background:var(--journal-panel-hover); }
.journal-entry .reaction-chip { border-color:var(--journal-border); color:var(--journal-text); background:var(--journal-panel); }.journal-entry .reaction-chip.is-mine { background:color-mix(in srgb,var(--journal-accent) 20%,transparent); }.journal-entry .reaction-chip small { color:var(--journal-muted); }

@keyframes dialogIn { from { opacity:0; transform:translateY(12px) scale(.97); } }
@keyframes reactionPickerIn { from { opacity:0; transform:translateY(-5px) scale(.98); } }
@keyframes float { 50% { transform:translateY(-8px); } }
@keyframes drift { 50% { transform:translateY(8px); } }
@keyframes dreamFloat { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes musicBar { from { transform:scaleY(.45); } to { transform:scaleY(1); } }
@keyframes moonFloat { 50% { transform:translateY(-9px) rotate(3deg); } }
@keyframes starBlink { 50% { opacity:.25; transform:scale(.6); } }
@keyframes cloudDrift { to { transform:translateX(70px); } }
@keyframes journalEntryIn { from { opacity:0; transform:translateY(18px) scale(.98); } }
@keyframes petalWaltz { 0%,100% { opacity:.08; transform:translate3d(-8px,-18px,0) rotate(0); } 45% { opacity:.55; } 70% { transform:translate3d(28px,55px,0) rotate(145deg); } }
@keyframes cosmicTwinkle { 0%,100% { opacity:.12; transform:scale(.65); } 50% { opacity:.75; transform:scale(1.35); } }
@keyframes orbitBreathe { 0%,100% { opacity:.08; transform:scale(.7) rotate(0); } 50% { opacity:.35; transform:scale(1.2) rotate(90deg); } }
@keyframes leafDrift { 0%,100% { opacity:.08; transform:translate(-8px,-12px) rotate(-20deg); } 45% { opacity:.45; transform:translate(12px,17px) rotate(12deg); } 75% { transform:translate(28px,40px) rotate(48deg); } }
@keyframes emberRise { 0% { opacity:0; transform:translateY(45px) scale(.5); } 25% { opacity:.72; } 100% { opacity:0; transform:translate(25px,-95px) scale(1.2); } }
@keyframes lavenderSway { 0%,100% { opacity:.1; transform:rotate(-9deg) translateY(4px); } 50% { opacity:.48; transform:rotate(11deg) translateY(-13px); } }
@keyframes sunsetCloud { 0% { opacity:.08; transform:translateX(-28px); } 50% { opacity:.34; } 100% { opacity:.12; transform:translateX(55px); } }
@keyframes sunPulse { 0%,100% { opacity:.1; transform:scale(.75); } 50% { opacity:.4; transform:scale(1.18); } }
@keyframes bubbleRise { 0% { opacity:0; transform:translateY(70px) scale(.65); } 30% { opacity:.4; } 100% { opacity:0; transform:translate(18px,-110px) scale(1.12); } }
@keyframes snowDance { 0% { opacity:0; transform:translate(-15px,-55px) rotate(0); } 25% { opacity:.55; } 100% { opacity:0; transform:translate(34px,125px) rotate(230deg); } }
@keyframes blossomFall { 0%,100% { opacity:.08; transform:translate(-15px,-35px) rotate(10deg); } 35% { opacity:.5; } 70% { transform:translate(35px,72px) rotate(210deg); } }
@keyframes auroraWave { 0% { opacity:.06; transform:translate(-45px,-15px) rotate(-8deg) scaleX(.75); } 50% { opacity:.36; } 100% { opacity:.1; transform:translate(65px,28px) rotate(9deg) scaleX(1.15); } }

@media (min-width: 761px) and (max-width: 1100px) {
    .layout-picker button small { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
    .layout-picker button { width:38px; justify-content:center; padding:0; }
    .dream-grid[data-dream-layout="scrapbook"], .journal-list[data-journal-layout="scrapbook"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (min-width: 761px) and (max-width: 980px) {
    .dream-grid[data-dream-layout="float"] { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .dream-grid[data-dream-layout="float"] .dream-card, .dream-grid[data-dream-layout="float"] .dream-card:nth-child(5n+1), .dream-grid[data-dream-layout="float"] .dream-card:nth-child(5n+2) { grid-column:span 1; }
}

@media (max-width: 760px) {
    .welcome-shell { padding:42px 16px 28px; align-items:start; }
    .welcome-content h1 { font-size:clamp(3.7rem, 18vw, 5.5rem); }
    .welcome-copy { margin:28px auto 30px; font-size:.88rem; }
    .person-grid { grid-template-columns:1fr; gap:12px; }
    .person-card { min-height:108px; padding:16px; border-radius:21px; }
    .person-symbol { flex-basis:76px; width:76px; height:76px; font-size:2rem; }.person-info strong { font-size:1.55rem; }
    dialog { position:fixed; right:max(10px, env(safe-area-inset-right)); left:max(10px, env(safe-area-inset-left)); width:auto; max-width:none; max-height:calc(100svh - 20px); margin-block:auto; margin-inline:0; padding:38px 18px 24px; border-radius:24px; }
    .secret-dialog[open] { position:fixed; inset:auto; top:50%; left:50%; right:auto; bottom:auto; width:min(calc(100% - 32px), 340px); max-width:calc(100% - 32px); height:auto; max-height:calc(100svh - 32px); margin:0; padding:28px 18px 20px; transform:translate(-50%,-50%); animation:none; }
    .secret-dialog .secret-form, .secret-dialog .secret-input-wrap { min-width:0; width:100%; }
    .secret-dialog input, .secret-dialog .primary-button { max-width:100%; }
    .secret-dialog .dialog-close { top:11px; right:11px; width:32px; height:32px; font-size:1.15rem; }
    .secret-dialog .dialog-icon { width:48px; height:48px; margin-bottom:14px; font-size:1.45rem; }
    .secret-dialog .dialog-kicker { margin-block:0 10px; font-size:.6rem; }
    .secret-dialog h2 { margin-bottom:4px; font-size:2rem; }
    .secret-dialog > p:not(.dialog-kicker) { margin-bottom:18px; font-size:.78rem; }
    .secret-dialog form label { margin-bottom:6px; font-size:.68rem; }
    .secret-dialog input[type="password"], .secret-dialog input[type="text"] { height:48px; padding-left:14px; font-size:.82rem; }
    .secret-dialog .reveal-code { top:5px; }
    .secret-dialog .primary-button { margin-top:15px; padding:13px 16px; font-size:.75rem; }
    .site-header, .dreams-main { width:calc(100% - 28px); }
    .hanging-picture { align-self:center; flex:0 0 clamp(150px,34vw,230px); width:clamp(150px,34vw,230px); height:var(--hanging-mobile-initial-height,245px); margin:0; }
    .picture-hook { top:12px; width:19px; height:19px; border-width:4px; }
    .picture-string { top:27px; height:var(--string-mobile-initial-length,86px); }
    .picture-string-left { transform:rotate(var(--string-mobile-left-initial-angle,var(--string-left-initial-angle,53deg))); }
    .picture-string-right { transform:rotate(var(--string-mobile-right-initial-angle,var(--string-right-initial-angle,-53deg))); }
    .wooden-frame { top:79px; width:min(100%,var(--frame-mobile-initial-width,210px)); padding:9px; transform-origin:50% -53px; }
    .wooden-frame::before { inset:5px; }
    .frame-inner { border-width:4px; }
    .frame-shine { inset:14px; }
    .site-header { padding:16px 0; }.brand small, .profile-pill div { display:none; }.brand strong { font-size:1rem; }.header-actions { gap:8px; }
    .text-button { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 10px; border:1px solid var(--line); border-radius:99px; background:var(--surface); font-size:.68rem; }
    .hero { display:flex; align-items:center; flex-direction:row; gap:10px; min-height:315px; padding:38px 4px 44px; }.hero-copy { flex:1 1 auto; min-width:0; }.hero-kicker { font-size:.56rem; letter-spacing:.12em; }.hero h1 { font-size:clamp(2.45rem,8.5vw,3.7rem); }.hero > div:first-child > p:last-child { margin-top:20px; font-size:.74rem; line-height:1.55; }
    .section-heading { align-items:flex-end; }.section-heading h2 { font-size:2.1rem; }.heading-with-count { align-items:flex-start; flex-direction:column; gap:7px; }.collection-count { margin:0; padding:5px 9px; }.add-dream-button { display:none; }
    .collection-actions { flex-shrink:0; }.layout-picker { gap:2px; padding:3px; }.layout-picker button { width:36px; height:34px; justify-content:center; padding:0; }.layout-picker button small { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
    .collection { padding-bottom:70px; }.empty-state { min-height:390px; border-radius:24px; }
    .night-journal { margin-bottom:75px; padding:46px 18px 28px; border-radius:27px; }.journal-moon { top:22px; right:5%; font-size:3.8rem; }.journal-heading { display:block; margin-bottom:25px; }.journal-heading h2 { font-size:3.2rem; }.journal-heading p:last-child { max-width:80%; font-size:.8rem; }.journal-actions { align-items:flex-start; margin-top:20px; }.journal-add-button { margin-top:0; }.journal-list { grid-template-columns:1fr; }.journal-entry { padding:16px; }.journal-entry footer { flex-direction:column; gap:4px; }.journal-type-picker { grid-template-columns:1fr 1fr; }.journal-dialog { padding-left:17px; padding-right:17px; }
    .dream-grid { columns:1; }.dream-card { margin-bottom:17px; }.dream-description { font-size:1.25rem; }
    .dream-grid[data-dream-layout="float"] { display:flex; flex-direction:column; gap:4px; padding:28px 4px 55px; }
    .dream-grid[data-dream-layout="float"] .dream-card, .dream-grid[data-dream-layout="float"] .dream-card:nth-child(3n+2), .dream-grid[data-dream-layout="float"] .dream-card:nth-child(3n) { width:calc(100% - 18px); margin:0 0 14px; translate:0 0; rotate:-.5deg; align-self:flex-start; }
    .dream-grid[data-dream-layout="float"] .dream-card:nth-child(even) { align-self:flex-end; rotate:.5deg; }
    .dream-grid[data-dream-layout="trail"] { padding:32px 0 50px; }
    .dream-grid[data-dream-layout="trail"]::before { left:15px; }.dream-grid[data-dream-layout="trail"]::after { left:15px; }
    .dream-grid[data-dream-layout="trail"] .dream-card, .dream-grid[data-dream-layout="trail"] .dream-card:nth-child(even) { width:calc(100% - 42px); margin:0 0 20px; align-self:flex-end; }
    .dream-grid[data-dream-layout="trail"] .dream-card::before, .dream-grid[data-dream-layout="trail"] .dream-card:nth-child(even)::before { top:44px; right:auto; left:-34px; }
    .dream-grid[data-dream-layout="scrapbook"] { grid-template-columns:1fr; gap:25px; padding-inline:8px; }.dream-grid[data-dream-layout="scrapbook"] .dream-card:nth-child(3n+2) { translate:0; }
    .dream-grid[data-dream-layout="shelf"] { margin-inline:calc(50% - 50vw); padding-inline:14px; }.dream-grid[data-dream-layout="shelf"] .dream-card { flex-basis:min(84vw,340px); }
    .journal-list[data-journal-layout="float"] { display:flex; flex-direction:column; gap:14px; padding:18px 3px 35px; }.journal-list[data-journal-layout="float"] .journal-entry, .journal-list[data-journal-layout="float"] .journal-entry:nth-child(3n+2), .journal-list[data-journal-layout="float"] .journal-entry:nth-child(5n) { width:calc(100% - 12px); translate:0; align-self:flex-start; }.journal-list[data-journal-layout="float"] .journal-entry:nth-child(even) { align-self:flex-end; }
    .journal-list[data-journal-layout="trail"]::before { left:14px; }.journal-list[data-journal-layout="trail"] .journal-entry, .journal-list[data-journal-layout="trail"] .journal-entry:nth-child(even) { width:calc(100% - 40px); align-self:flex-end; }.journal-list[data-journal-layout="trail"] .journal-entry::after, .journal-list[data-journal-layout="trail"] .journal-entry:nth-child(even)::after { right:auto; left:-34px; }
    .journal-list[data-journal-layout="scrapbook"] { grid-template-columns:1fr; gap:24px; padding-inline:4px; }.journal-list[data-journal-layout="scrapbook"] .journal-entry:nth-child(3n+2) { translate:0; }
    .journal-list[data-journal-layout="shelf"] { margin-inline:-18px; padding-inline:18px; }.journal-list[data-journal-layout="shelf"] .journal-entry { flex-basis:min(82vw,350px); }
    .mobile-add { position:fixed; z-index:15; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); display:grid; place-items:center; width:58px; height:58px; border:0; border-radius:50%; color:white; background:var(--accent-dark); box-shadow:0 14px 35px color-mix(in srgb, var(--accent) 45%, transparent); font-size:1.5rem; }
    .site-footer { padding-bottom:90px; }.site-footer small { display:none; }
    .music-control { left:12px; bottom:calc(14px + env(safe-area-inset-bottom)); gap:0; width:52px; height:52px; padding:5px; overflow:hidden; border-radius:50%; }
    .music-control:hover { transform:none; }
    .music-mobile-tab { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border:0; border-radius:50%; color:white; background:var(--accent); cursor:pointer; font-size:1rem; box-shadow:0 7px 16px color-mix(in srgb,var(--accent) 30%,transparent); }
    .music-control > .music-library-button, .music-control > .volume-control, .music-control > .music-toggle { display:none; }
    .music-control.is-mobile-open { gap:6px; width:64px; height:auto; padding:7px 6px; overflow:visible; border-radius:28px; }
    .music-control.is-mobile-open .music-mobile-tab { flex-basis:30px; width:30px; height:30px; color:var(--accent-dark); background:var(--accent-soft); box-shadow:none; font-size:.82rem; }
    .music-control.is-mobile-open > .music-library-button { display:flex; }
    .music-control.is-mobile-open > .volume-control { display:flex; }
    .music-control.is-mobile-open > .music-toggle { display:grid; }
    .music-bars { display:none; }.music-current strong { width:50px; }.volume-control input { width:4px; height:62px; }.volume-control small { display:block; }
    .profile-pill > span { flex-basis:46px; width:46px; height:46px; }
    .profile-preview-shell { flex-basis:154px; width:154px; height:154px; }
}

@media (max-width: 360px) {
    .brand strong { font-size:.88rem; }.hero h1 { font-size:2.2rem; }.hero { gap:7px; }.hanging-picture { flex-basis:140px; width:140px; height:225px; }.profile-pill { display:none; }.site-header { width:calc(100% - 22px); }.dreams-main { width:calc(100% - 20px); }
}

@media (max-width: 480px) {
    .brand > span:last-child { display:none; }
}

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

@keyframes submitButtonSpin { to { transform:rotate(360deg); } }

@media (max-width:760px) {
    .reaction-emoji-grid { grid-template-columns:repeat(6,minmax(0,1fr)); max-height:178px; }
    .reaction-picker { padding:10px; }
}

/* Installable app and private partner notifications */
.notification-button { position:relative; }
.notification-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.notification-button > i { position:absolute; top:7px; right:7px; width:7px; height:7px; border:2px solid var(--card); border-radius:50%; background:var(--muted); transition:background .2s, box-shadow .2s; }
.notification-button > i.is-active { background:#70b98b; box-shadow:0 0 0 3px color-mix(in srgb,#70b98b 20%,transparent); }
.notification-dialog { width:min(calc(100% - 32px),620px); text-align:center; }
.notification-dialog-icon { background:linear-gradient(145deg,var(--accent),var(--accent-dark)); }
.pwa-setting-card { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:13px; margin-top:12px; padding:14px; border:1px solid var(--line); border-radius:18px; background:var(--bg); text-align:left; }
.pwa-setting-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:var(--accent-dark); background:var(--accent-soft); font:600 1.25rem var(--serif); }
.pwa-setting-card div { display:flex; flex-direction:column; min-width:0; }
.pwa-setting-card strong { color:var(--ink); font-size:.76rem; }
.pwa-setting-card small { margin-top:3px; color:var(--muted); font-size:.63rem; line-height:1.35; }
.compact-button { width:auto; min-width:78px; margin:0; padding:10px 13px; font-size:.67rem; white-space:nowrap; }
.compact-button[hidden] { display:none; }
.compact-button:disabled { opacity:.5; cursor:not-allowed; }
.pwa-privacy-note { margin:15px 8px 0 !important; color:var(--muted); font-size:.62rem !important; }

@media (max-width:560px) {
    .pwa-setting-card { grid-template-columns:44px minmax(0,1fr); }
    .pwa-setting-icon { width:44px; height:44px; }
    .pwa-setting-card .compact-button { grid-column:1 / -1; width:100%; }
}