:root {
    --warm-bg: #18110d;
    --warm-bg-2: #251a14;
    --ink: #110d0a;
    --paper: #f6ead4;
    --paper-soft: #ead8b7;
    --glass: rgba(21, 15, 11, 0.84);
    --glass-strong: rgba(15, 11, 8, 0.95);
    --accent: #c79a61;
    --accent-2: #dfbf83;
    --sage: #7d8b6d;
    --sage-deep: #2f352d;
    --sage-soft: #c8c3a5;
    --clay: #ad614d;
    --text-main: #f6ead4;
    --text-muted: #c8c3a5;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --font-body: 'Cormorant Garamond', Georgia, serif;
    --font-ui: 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    font-family: var(--font-ui);
    color: var(--text-main);
    background:
        radial-gradient(circle at 18% 10%, rgba(156, 175, 136, 0.22), transparent 34rem),
        radial-gradient(circle at 84% 20%, rgba(215, 165, 111, 0.18), transparent 32rem),
        linear-gradient(160deg, var(--warm-bg), var(--warm-bg-2) 46%, #17261d);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.focus-mode .hero,
body.focus-mode .stats-grid,
body.focus-mode .leaderboard,
body.focus-mode .feed,
body.focus-mode footer { display: none; }

body.focus-mode main { max-width: 880px; }
body.focus-mode .writing-zone textarea { min-height: 62vh; }
body.focus-mode #focusBtn::after { content: " on"; }

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.64; }

input, textarea, select {
    width: 100%;
    border: 1px solid rgba(215, 165, 111, 0.42);
    border-radius: var(--radius-sm);
    background: rgba(7, 5, 3, 0.28);
    color: var(--text-main);
    padding: 0.85rem 1rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--accent-2);
    box-shadow: 0 0 0 4px rgba(215, 165, 111, 0.16);
    background: rgba(7, 5, 3, 0.42);
}

textarea { resize: vertical; }
select option { color: #1f140e; }

::placeholder { color: rgba(255, 241, 212, 0.52); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hidden { display: none !important; }
.full-width { width: 100%; }
.subtext { color: #7e6a55; font-style: italic; }

.video-background, .overlay, .page-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.video-background { z-index: -3; background: #140d09; }
.video-background video { width: 100%; height: 100%; object-fit: cover; opacity: 0.18; filter: saturate(0.8) blur(1px); }
.overlay { z-index: -2; background: rgba(15, 10, 6, 0.65); backdrop-filter: blur(2px); }
.page-glow {
    z-index: -1;
    background:
        radial-gradient(circle at 12% 8%, rgba(156, 175, 136, 0.22), transparent 28rem),
        radial-gradient(circle at 82% 16%, rgba(242, 201, 141, 0.14), transparent 26rem);
}

main {
    max-width: 980px;
    margin: 0 auto;
    padding: 116px 20px 80px;
    min-height: 80vh;
}

.card {
    background: linear-gradient(145deg, rgba(27, 19, 13, 0.88), rgba(18, 13, 9, 0.94));
    border: 1px solid rgba(255, 241, 212, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.eyebrow {
    color: var(--sage-soft);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
}

.eyebrow.dark { color: #738052; }

h1, h2, h3 { line-height: 1.1; }
h1, h2 { font-weight: 800; }

.btn-primary, .btn-secondary, .btn-ghost, .btn-delete, .btn-delete-final, .btn-tiny, .auth-tab, .tab-btn, .text-link {
    border: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
    color: #1d130d;
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    border: 1px solid rgba(255, 245, 223, 0.34);
    border-radius: 999px;
    padding: 0.85rem 1.25rem;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(215, 165, 111, 0.22);
}

.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(215, 165, 111, 0.28); }
.btn-primary.large, .btn-ghost.large { padding: 0.95rem 1.45rem; font-size: 1.02rem; }

.btn-secondary, .btn-ghost {
    border-radius: 999px;
    padding: 0.78rem 1.05rem;
    font-weight: 800;
}

.btn-secondary {
    color: var(--accent-2);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(215, 165, 111, 0.52);
}
.btn-secondary:hover { background: rgba(215, 165, 111, 0.11); border-color: var(--accent-2); }

.btn-ghost {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(220, 229, 201, 0.2);
}
.btn-ghost:hover { color: var(--text-main); background: rgba(156, 175, 136, 0.16); }

.btn-primary.small, .btn-secondary.small, .btn-delete.small { padding: 0.6rem 0.9rem; font-size: 0.88rem; }

.btn-tiny {
    white-space: nowrap;
    padding: 0.44rem 0.7rem;
    border-radius: 999px;
    background: rgba(156, 175, 136, 0.18);
    color: var(--sage-soft);
    border: 1px solid rgba(220, 229, 201, 0.18);
    font-size: 0.8rem;
    font-weight: 800;
}
.btn-tiny:hover { background: rgba(156, 175, 136, 0.27); }

.btn-delete, .btn-delete-final {
    color: white;
    background: #b84b38;
    border-radius: 999px;
    font-weight: 800;
}
.btn-delete { padding: 0.6rem 0.85rem; }
.btn-delete-final { padding: 0.85rem 1rem; }
.btn-delete:hover, .btn-delete-final:hover { background: #933827; }

.text-link {
    background: none;
    color: var(--accent-2);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 800;
}

/* Branding */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--accent-2);
    font-weight: 900;
    letter-spacing: -0.02em;
}

.brand-lockup.big { flex-direction: column; gap: 1rem; font-size: clamp(2rem, 7vw, 4rem); color: var(--paper); }
.brand-lockup.big .brand-mark { transform: scale(1.4); margin-bottom: 0.2rem; }

.brand-mark {
    position: relative;
    width: 38px;
    height: 34px;
    display: inline-block;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
}
.brand-mark span {
    position: absolute;
    width: 23px;
    height: 28px;
    border-radius: 5px 6px 4px 5px;
    border: 1px solid rgba(255, 255, 255, 0.45);
}
.brand-mark span:nth-child(1) { left: 1px; top: 4px; background: #f3c879; transform: rotate(-7deg); }
.brand-mark span:nth-child(2) { left: 9px; top: 0; background: #9caf88; transform: rotate(4deg); }
.brand-mark span:nth-child(3) { left: 16px; top: 7px; background: #b481d9; transform: rotate(8deg); }

/* Navigation */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 18px 42px;
    background: linear-gradient(180deg, rgba(16, 11, 8, 0.92), rgba(16, 11, 8, 0.72));
    border-bottom: 1px solid rgba(255, 241, 212, 0.1);
    backdrop-filter: blur(18px);
    transition: padding 0.25s ease, box-shadow 0.25s ease;
}

.site-nav.scrolled { padding-block: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3); }
.nav-logo { background: none; border: 0; font-size: 1.32rem; }
.nav-actions, .nav-group { display: flex; align-items: center; gap: 0.9rem; }
.save-prompt { color: var(--sage-soft); font-size: 0.92rem; font-style: italic; white-space: nowrap; }
.profile-trigger {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.3rem 0.35rem 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(215, 165, 111, 0.26);
    background: rgba(255, 255, 255, 0.04);
    color: var(--accent-2);
    font-weight: 900;
}
.profile-trigger:hover { background: rgba(215, 165, 111, 0.11); }
.avatar-small, .feed-avatar-img, .avatar-large {
    object-fit: cover;
    border-radius: 50%;
    background: var(--sage-deep);
}
.avatar-small { width: 38px; height: 38px; border: 2px solid var(--accent); }

/* Welcome */
.welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 40000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background:
        radial-gradient(circle at top left, rgba(156, 175, 136, 0.24), transparent 27rem),
        linear-gradient(150deg, #1b110c, #223629 62%, #160e0a);
    transition: opacity 0.65s ease, visibility 0.65s ease;
}
.welcome-overlay.is-leaving { opacity: 0; visibility: hidden; }
.welcome-card {
    width: min(680px, 100%);
    padding: clamp(2rem, 6vw, 4rem);
    text-align: center;
    background: rgba(15, 11, 8, 0.7);
    border: 1px solid rgba(255, 241, 212, 0.16);
    border-radius: 34px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(20px);
}
.weekly-quote {
    margin: 1.75rem auto;
    max-width: 520px;
    color: var(--text-muted);
    font: italic 1.25rem/1.65 var(--font-body);
}
.weekly-quote footer { margin-top: 0.75rem; color: var(--accent); font: 800 0.9rem/1 var(--font-ui); }
.welcome-actions { display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap; }

/* Hero */
.hero { padding: clamp(1rem, 3.6vw, 2rem); margin-bottom: 1.25rem; }
.hero-copy, .section-heading.split {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); max-width: 640px; color: var(--paper); }
.info-icon, .info-icon-small {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(220, 229, 201, 0.45);
    background: rgba(156, 175, 136, 0.12);
    color: var(--sage-soft);
    font-weight: 900;
}
.info-icon:hover, .info-icon-small:hover { background: rgba(156, 175, 136, 0.22); }
.prompt-strip {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.8rem;
    margin: 1.35rem 0;
    padding: 0.9rem;
    border-radius: 18px;
    color: var(--sage-soft);
    background: linear-gradient(135deg, rgba(32, 55, 42, 0.58), rgba(54, 37, 23, 0.5));
    border: 1px solid rgba(220, 229, 201, 0.12);
}
.prompt-label { color: var(--accent-2); font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.74rem; }
.prompt-strip p { font-family: var(--font-body); font-size: 1.1rem; }
.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 241, 212, 0.1);
}
.video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
.stat-card {
    padding: 1.1rem;
    border-radius: var(--radius-md);
    background: rgba(32, 55, 42, 0.52);
    border: 1px solid rgba(220, 229, 201, 0.12);
    box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}
.stat-card strong { display: block; font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--accent-2); }
.stat-card span { color: var(--sage-soft); font-size: 0.9rem; }

/* Writing */
.writing-zone { padding: clamp(1rem, 3.4vw, 2rem); margin-bottom: 1.25rem; }
.section-heading { margin-bottom: 1.1rem; }
.section-heading h2 { font-size: clamp(1.45rem, 3.5vw, 2.2rem); color: var(--paper); }
.heading-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
.writing-zone textarea {
    min-height: 330px;
    border: 1px solid rgba(255, 241, 212, 0.09);
    background:
        linear-gradient(rgba(255, 245, 223, 0.035), rgba(255, 245, 223, 0.035)),
        rgba(0, 0, 0, 0.18);
    color: var(--paper);
    font: 1.35rem/1.7 var(--font-body);
    border-radius: 22px;
}
.writer-tools, .action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.char-meter { display: flex; align-items: center; gap: 0.75rem; color: var(--text-muted); font-size: 0.9rem; }
.char-track { width: min(230px, 48vw); height: 8px; border-radius: 999px; background: rgba(255, 241, 212, 0.12); overflow: hidden; }
.char-track span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sage), var(--accent)); transition: width 0.2s ease; }
.draft-status { color: rgba(220, 229, 201, 0.76); font-size: 0.88rem; }
#guestPenName { max-width: 220px; }

/* Stories */
.leaderboard, .feed { padding: clamp(1rem, 3vw, 1.6rem); margin-bottom: 1.25rem; }
.top-stories-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}
.feed-toolbar {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.feed-list-container { display: grid; gap: 0.85rem; }
.story-card {
    position: relative;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: rgba(255, 241, 212, 0.055);
    border: 1px solid rgba(255, 241, 212, 0.1);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.story-card:hover { transform: translateY(-2px); background: rgba(255, 241, 212, 0.08); border-color: rgba(215, 165, 111, 0.35); }
.story-card.is-mini { min-height: 170px; background: linear-gradient(145deg, rgba(32, 55, 42, 0.55), rgba(255, 241, 212, 0.05)); }
.story-card.clickable { cursor: pointer; }
.story-header-row { display: flex; align-items: center; gap: 0.72rem; margin-bottom: 0.7rem; }
.feed-avatar-img, .feed-avatar-placeholder { width: 42px; height: 42px; flex: 0 0 42px; }
.feed-avatar-img { border: 2px solid var(--accent); }
.feed-avatar-placeholder {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sage), var(--accent));
    color: #1d130d;
    font-weight: 900;
    border: 2px solid rgba(255, 241, 212, 0.26);
}
.story-author { color: var(--accent-2); font-weight: 900; }
.story-date { color: rgba(220, 229, 201, 0.65); font-size: 0.78rem; }
.story-preview {
    color: var(--paper);
    font: 1.18rem/1.55 var(--font-body);
    white-space: pre-wrap;
}
.story-card.is-mini .story-preview {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1rem;
}
.story-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 0.95rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 241, 212, 0.1);
}
.actions-left { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.btn-action-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 0.48rem 0.7rem;
    font-weight: 800;
    font-size: 0.88rem;
}
.btn-action-icon:hover { color: var(--accent-2); background: rgba(215, 165, 111, 0.1); }
.action-column { position: relative; }
.menu-trigger {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 241, 212, 0.1);
    border-radius: 50%;
    background: rgba(255,255,255,0.035);
    color: var(--text-muted);
    font-size: 1.35rem;
    line-height: 1;
}
.menu-trigger:hover { color: var(--accent-2); }
.menu-dropdown {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 5;
    min-width: 150px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(215, 165, 111, 0.3);
    background: var(--glass-strong);
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    display: none;
}
.menu-dropdown.show { display: block; }
.menu-dropdown button {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 0;
    background: none;
    color: var(--text-main);
    text-align: left;
}
.menu-dropdown button:hover { background: rgba(215, 165, 111, 0.12); }
.text-red { color: #ffb1a1 !important; }
.load-more { margin-top: 1rem; }
.empty-state, .loading-state {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed rgba(220, 229, 201, 0.24);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.025);
}

/* Modals */
.modal {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(10, 7, 5, 0.78);
    backdrop-filter: blur(8px);
}
.modal-content {
    position: relative;
    width: min(92vw, 720px);
    max-height: min(86vh, 900px);
    overflow-y: auto;
    box-shadow: var(--shadow);
}
.modal-content.narrow {
    width: min(92vw, 430px);
    padding: 2rem;
    border-radius: 28px;
    text-align: center;
}
.cozy-panel {
    color: var(--text-main);
    background: linear-gradient(145deg, rgba(32, 55, 42, 0.96), rgba(45, 30, 20, 0.96));
    border: 1px solid rgba(255, 241, 212, 0.16);
}
.modal-brand { justify-content: center; margin-bottom: 0.8rem; }
.close-modal {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    background: rgba(0,0,0,0.08);
    border-radius: 50%;
    color: inherit;
    font-size: 1.7rem;
    line-height: 1;
}
.close-modal:hover { background: rgba(0,0,0,0.16); }
.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    padding: 0.35rem;
    margin: 1rem 0;
    border-radius: 999px;
    background: rgba(0,0,0,0.18);
}
.auth-tab {
    padding: 0.65rem 0.85rem;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-weight: 900;
}
.auth-tab.active { background: var(--accent); color: #20150f; }
.auth-form-container { display: grid; gap: 0.78rem; }
.auth-helper-row { display: flex; justify-content: space-between; gap: 0.8rem; margin-top: 1rem; font-size: 0.9rem; }
.error-text { min-height: 1.2rem; color: #ffb1a1; font-weight: 800; }
.modal-intro { color: var(--text-muted); line-height: 1.5; margin-bottom: 1rem; }

.book-style, .passport-guide-style {
    color: var(--ink);
    background:
        radial-gradient(circle at 10% 0%, rgba(215, 165, 111, 0.18), transparent 16rem),
        linear-gradient(135deg, #fff6df, #f3e3c5);
    border: 1px solid rgba(139, 94, 60, 0.28);
    border-radius: 28px;
    padding: clamp(1.2rem, 4vw, 2.4rem);
    font-family: var(--font-ui);
}
.book-style h2, .book-style h3, .passport-guide-style h2, .passport-guide-style h3 { color: #5c3d25; }
.book-style input, .book-style textarea, .book-style select,
.passport-guide-style input, .passport-guide-style textarea, .passport-guide-style select {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.56);
    border-color: rgba(139, 94, 60, 0.28);
}
.book-style ::placeholder { color: rgba(65, 44, 28, 0.54); }
.profile-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.avatar-wrapper { position: relative; width: 96px; height: 96px; flex: 0 0 96px; }
.avatar-large { width: 100%; height: 100%; border: 4px solid var(--accent); }
.avatar-edit-hint {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.46);
    color: white;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
    font-size: 1.45rem;
}
.avatar-wrapper:hover .avatar-edit-hint { opacity: 1; }
.avatar-wrapper.no-click:hover .avatar-edit-hint { opacity: 0; }
.profile-info h2 { font-size: 2rem; }
.passport-section, .settings-section, .delete-section {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255,255,255,0.35);
    border: 1px dashed rgba(139, 94, 60, 0.28);
}
.passport-header-row, .settings-grid { display: flex; align-items: center; gap: 0.8rem; }
.passport-header-row { justify-content: space-between; }
.settings-grid { margin-top: 0.8rem; flex-wrap: wrap; }
.settings-grid input { flex: 1 1 210px; }
.flair-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    min-height: 100px;
}
.flair-item {
    position: relative;
    border: 0;
    background: transparent;
    font-family: var(--font-ui);
    display: grid;
    justify-items: center;
    gap: 0.42rem;
    text-align: center;
    color: #6a533d;
    font-size: 0.78rem;
    font-weight: 900;
}
.flair-item.unlocked { cursor: pointer; }
.flair-item.locked { opacity: 0.42; filter: grayscale(1); }
.flair-preview, .guide-badge, .admin-badge-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    flex-shrink: 0;
}
.flair-item.selected .flair-preview { outline: 4px solid rgba(156, 175, 136, 0.55); transform: scale(1.05); }
.my-badge-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 0.4rem 0.58rem;
    border-radius: 8px;
    background: #2c1e16;
    color: var(--text-main);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    font-size: 0.72rem;
}
.flair-item:hover .my-badge-tooltip { opacity: 1; }
.frame-locked { border: 2px dashed #af9d88; background: rgba(0,0,0,0.04); }
.frame-wood { border: 4px solid #8b5a2b; background: repeating-linear-gradient(45deg, #8b5a2b, #6d4320 10px); box-shadow: inset 0 0 10px #3e230b; }
.frame-copper { border: 4px solid #b87333; background: radial-gradient(circle at 30% 30%, #cd7f32, #8b4513); box-shadow: inset 0 0 5px #5e3b1f; }
.frame-stone { border: 4px solid #7a7a7a; background: #9e9e9e; box-shadow: inset 0 0 5px #333, 0 2px 5px rgba(0,0,0,0.5); }
.frame-iron { border: 4px solid #4a4a4a; background: linear-gradient(145deg, #5a5a5a, #2a2a2a); box-shadow: inset 0 0 5px #000, 0 0 5px #4a4a4a; }
.frame-gold { border: 4px solid #ffd700; background: radial-gradient(circle, #fff8dc, #daa520); box-shadow: inset 0 0 10px #daa520; }
.frame-diamond { border: 4px solid #b9f2ff; background: radial-gradient(circle, #e0ffff, #00ced1); box-shadow: inset 0 0 10px #fff; }

.my-stories-container {
    max-height: 310px;
    overflow-y: auto;
    padding: 0.8rem;
    border: 1px solid rgba(139, 94, 60, 0.28);
    border-radius: 18px;
    background: rgba(255,255,255,0.4);
}
.story-accordion {
    overflow: hidden;
    margin-bottom: 0.65rem;
    border: 1px solid rgba(139,94,60,0.16);
    border-radius: 14px;
    background: rgba(255,255,255,0.68);
}
.story-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.85rem;
    list-style: none;
    cursor: pointer;
    font-weight: 900;
}
.story-summary::-webkit-details-marker { display: none; }
.story-content-preview {
    padding: 0.95rem;
    border-top: 1px dashed rgba(139,94,60,0.22);
    font-family: var(--font-body);
    font-size: 1.05rem;
    white-space: pre-wrap;
}
.btn-delete-small {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #b84b38;
    color: white;
    font-weight: 900;
    flex: 0 0 28px;
}

.passport-guide-style { width: min(92vw, 560px); }
.guide-title, .guide-desc { text-align: center; }
.guide-desc { color: #806a50; margin: 0.4rem 0 1.2rem; }
.badge-guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.guide-item { display: flex; align-items: center; gap: 0.8rem; font-size: 0.9rem; }
.guide-item .guide-badge { width: 50px; height: 50px; }
.guide-item small { color: #806a50; }

/* Admin */
.admin-title { text-align: center; margin-bottom: 1rem; color: #88402d !important; }
.admin-tabs { display: flex; gap: 0.6rem; border-bottom: 1px solid rgba(139,94,60,0.2); padding-bottom: 0.75rem; margin-bottom: 1rem; }
.tab-btn { padding: 0.6rem 0.8rem; border-radius: 999px; background: transparent; color: #6a533d; font-weight: 900; }
.tab-btn.active { color: #1d130d; background: rgba(156,175,136,0.32); }
.admin-user-list { display: grid; gap: 0.75rem; margin-top: 0.9rem; max-height: 450px; overflow-y: auto; }
.admin-user-card { padding: 0.9rem; border-radius: 16px; background: rgba(255,255,255,0.52); border: 1px solid rgba(139,94,60,0.18); }
.admin-user-header { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; }
.admin-badge-controls { display: flex; gap: 0.55rem; flex-wrap: wrap; padding-top: 0.75rem; margin-top: 0.75rem; border-top: 1px dashed rgba(139,94,60,0.18); }
.admin-badge-btn { width: 38px; height: 38px; border-width: 3px; opacity: 0.36; }
.admin-badge-btn.owned { opacity: 1; outline: 3px solid rgba(32,55,42,0.38); }
.winner-input-group { padding: 0.9rem; margin-bottom: 0.85rem; border-radius: 16px; background: rgba(255,255,255,0.48); }
.winner-input-group label { display: block; font-weight: 900; margin-bottom: 0.55rem; }
.winner-input-group div { display: flex; gap: 0.55rem; }

/* Read modal */
.read-modal-layout { display: flex; flex-direction: column; }
.read-header { display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid rgba(139,94,60,0.3); }
.read-icon { font-size: 2rem; }
.story-text-styled {
    margin: 1.3rem 0;
    color: #2c1e16;
    font: 1.3rem/1.8 var(--font-body);
    white-space: pre-wrap;
}
.modal-actions { border-top-color: rgba(139,94,60,0.18); }
.modal-actions .btn-action-icon { background: rgba(139,94,60,0.08); color: #5c3d25; }
.comments-section-wrapper {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px dashed rgba(139,94,60,0.28);
    background: rgba(255,255,255,0.4);
}
.comments-section-wrapper h3 { margin-bottom: 0.85rem; }
.comments-list { display: grid; gap: 0.65rem; max-height: 370px; overflow-y: auto; }
.comment-item {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.85rem;
    border-radius: 14px;
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(139,94,60,0.12);
}
.comment-item .comment-copy { flex: 1; }
.comment-item strong { color: #5c3d25; }
.comment-input-area { display: flex; gap: 0.65rem; margin-top: 0.9rem; flex-wrap: wrap; }
.input-compact { flex: 0 0 150px; }
.input-wide { flex: 1 1 230px; }

/* Toast */
.toast-region {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 50000;
    display: grid;
    gap: 0.6rem;
    width: min(360px, calc(100vw - 2rem));
}
.toast {
    padding: 0.85rem 1rem;
    border-radius: 16px;
    color: var(--text-main);
    background: rgba(32, 55, 42, 0.96);
    border: 1px solid rgba(220, 229, 201, 0.2);
    box-shadow: 0 18px 38px rgba(0,0,0,0.34);
    animation: toastIn 0.18s ease both;
}
.toast.error { background: rgba(91, 37, 28, 0.96); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Footer */
footer {
    padding: 1.2rem 20px 2rem;
    background: rgba(18, 12, 8, 0.74);
    border-top: 1px solid rgba(255, 241, 212, 0.1);
}
.footer-content {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--text-muted);
}
.footer-brand { color: var(--accent-2); }
.footer-links { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.footer-links button { background: none; border: 0; color: var(--text-muted); font-weight: 800; }
.footer-links button:hover { color: var(--accent-2); }

/* Mobile */
@media (max-width: 760px) {
    main { padding: 96px 14px 64px; }
    .site-nav { padding: 14px 16px; }
    .site-nav.scrolled { padding-block: 10px; }
    .nav-logo { font-size: 1.05rem; }
    .brand-mark { width: 32px; height: 30px; }
    .brand-mark span { width: 20px; height: 25px; }
    .save-prompt, #navUsername { display: none; }
    .hero-copy, .section-heading.split { flex-direction: column; align-items: stretch; }
    .heading-actions { justify-content: stretch; }
    .heading-actions > button { flex: 1 1 140px; }
    .prompt-strip { grid-template-columns: 1fr; text-align: left; }
    .stats-grid, .top-stories-container { grid-template-columns: 1fr; }
    .feed-toolbar { grid-template-columns: 1fr; }
    .writing-zone textarea { min-height: 300px; font-size: 1.2rem; }
    .action-bar > * { width: 100%; max-width: none !important; }
    .writer-tools { align-items: flex-start; }
    .char-meter { width: 100%; justify-content: space-between; }
    .char-track { width: 58vw; }
    .modal { padding: 0.8rem; align-items: start; overflow-y: auto; }
    .modal-content { max-height: none; margin: 1rem 0; }
    .profile-header { flex-direction: column; text-align: center; }
    .badge-guide-grid { grid-template-columns: 1fr; }
    .comment-input-area > * { flex-basis: 100%; }
    .winner-input-group div { flex-wrap: wrap; }
    .winner-input-group input { flex-basis: 100%; }
    .footer-content { justify-content: center; text-align: center; }
}

@media (max-width: 420px) {
    .btn-primary, .btn-secondary, .btn-ghost { padding-inline: 0.9rem; }
    .nav-logo span:last-child { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .modal-content.narrow { padding: 1.5rem 1rem; }
    .auth-helper-row { flex-direction: column; align-items: center; }
}


/* === Revision: cleaner focus room, aligned tools, quieter palette === */
body {
    background:
        radial-gradient(circle at 20% 10%, rgba(125, 139, 109, 0.12), transparent 34rem),
        radial-gradient(circle at 82% 18%, rgba(199, 154, 97, 0.16), transparent 30rem),
        linear-gradient(160deg, var(--warm-bg), var(--warm-bg-2) 50%, #1d211c);
}

.compact-inspiration {
    padding: clamp(0.9rem, 2.6vw, 1.35rem);
}

.compact-inspiration .prompt-strip {
    margin-top: 0;
}

.prompt-strip {
    grid-template-columns: 1fr auto;
    background: linear-gradient(135deg, rgba(30, 25, 20, 0.72), rgba(50, 38, 27, 0.52));
    border-color: rgba(223, 191, 131, 0.14);
    color: var(--paper-soft);
}

.prompt-strip p {
    font-size: clamp(1.08rem, 2.4vw, 1.28rem);
    line-height: 1.42;
}

.stat-card {
    background: rgba(52, 43, 33, 0.56);
    border-color: rgba(223, 191, 131, 0.14);
}

.stat-card strong {
    color: var(--accent-2);
}

.stat-card span {
    color: rgba(246, 234, 212, 0.76);
}

.info-icon {
    display: none !important;
}

.writing-zone {
    position: relative;
}

.focus-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    border: 1px solid rgba(223, 191, 131, 0.28);
    background: rgba(16, 12, 9, 0.72);
    color: var(--accent-2);
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
    display: none;
    place-items: center;
    z-index: 3;
}

.focus-close:hover {
    background: rgba(223, 191, 131, 0.14);
}

body.focus-mode .focus-close {
    display: grid;
}

.writer-tools {
    margin-top: 0.85rem;
}

.writer-action-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid rgba(246, 234, 212, 0.1);
    padding-top: 1rem;
}

.writing-actions-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}

.clear-draft-link {
    color: var(--accent-2);
    padding: 0.65rem 0.2rem;
    white-space: nowrap;
}

.candle-toggle {
    border: 1px solid rgba(223, 191, 131, 0.28);
    border-radius: 999px;
    padding: 0.72rem 1rem;
    background: rgba(223, 191, 131, 0.1);
    color: var(--accent-2);
    font-weight: 800;
    cursor: pointer;
}

.candle-toggle[aria-pressed="true"] {
    color: #2a2119;
    background: linear-gradient(135deg, #f3dcaa, #c79a61);
}

body.focus-mode .hero,
body.focus-mode .leaderboard,
body.focus-mode footer,
body.focus-mode .ribbon-panel {
    display: none !important;
}

body.focus-mode main {
    max-width: 900px;
}

body.focus-mode .writing-zone {
    margin-top: min(8vh, 60px);
    border-color: rgba(223, 191, 131, 0.24);
}

body.focus-mode .writing-zone textarea {
    min-height: 62vh;
}

body.focus-mode.candle-lit {
    --text-main: #271f18;
    --text-muted: #6a5844;
    --paper: #271f18;
    background:
        radial-gradient(circle at 50% 8%, rgba(255, 220, 148, 0.42), transparent 26rem),
        linear-gradient(160deg, #f1e4c9, #d7bc85 62%, #b8915b);
}

body.focus-mode.candle-lit .overlay {
    background: rgba(255, 244, 220, 0.24);
    backdrop-filter: blur(1px);
}

body.focus-mode.candle-lit .page-glow {
    background: radial-gradient(circle at 50% 15%, rgba(255, 214, 120, 0.38), transparent 28rem);
}

body.focus-mode.candle-lit .writing-zone {
    color: #271f18;
    background: linear-gradient(145deg, rgba(255,248,230,0.97), rgba(238,218,178,0.96));
    border-color: rgba(80,55,38,0.2);
}

body.focus-mode.candle-lit .writing-zone .eyebrow,
body.focus-mode.candle-lit .writing-zone h2,
body.focus-mode.candle-lit .char-meter {
    color: #3d3024;
}

body.focus-mode.candle-lit .writing-zone textarea,
body.focus-mode.candle-lit #guestPenName {
    color: #271f18;
    background: rgba(255, 252, 241, 0.82);
    border-color: rgba(80,55,38,0.2);
}

body.focus-mode.candle-lit .writing-zone textarea::placeholder {
    color: rgba(39,31,24,0.48);
}

body.focus-mode.candle-lit .focus-close {
    background: rgba(255, 252, 241, 0.8);
    color: #3d3024;
    border-color: rgba(80,55,38,0.22);
}

.edit-story-input {
    min-height: 380px;
    resize: vertical;
    font: 1.25rem/1.65 var(--font-body);
    color: #2b2119 !important;
    background: rgba(255, 252, 241, 0.72) !important;
}

.modal-actions {
    align-items: center;
}

.modal-actions .actions-right {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

#adminTabSettings label {
    display: block;
    margin: 0.9rem 0 0.35rem;
    font-weight: 800;
    color: #4b382a;
}

#adminTabSettings textarea,
#adminTabSettings input {
    color: #2b2119;
    background: rgba(255,255,255,0.62);
}

@media (max-width: 760px) {
    .writer-action-line {
        align-items: stretch;
    }

    .writing-actions-left,
    .writer-action-line {
        width: 100%;
    }

    .writing-actions-left > *,
    .writer-action-line > #publishBtn {
        width: 100%;
        max-width: none !important;
    }

    .focus-close {
        top: 0.75rem;
        right: 0.75rem;
    }
}

/* === Revision 3: ribbon menu, clean focus header, single-line writing controls === */
#welcomeOverlay,
.welcome-overlay {
    display: none !important;
}

body.focus-mode .site-nav {
    display: none !important;
}

.nav-actions {
    position: relative;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
}

.bookmark-menu-shell {
    position: relative;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding-right: 0.7rem;
}

.bookmark-ribbon {
    position: relative;
    width: 34px;
    height: 54px;
    margin-top: -2px;
    border: 0;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(180deg, #d9b370, #a86f42);
    box-shadow: 0 10px 22px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.28);
    transform-origin: top center;
    transition: transform 0.22s ease, filter 0.22s ease;
}

.bookmark-ribbon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    margin: auto;
    width: 0;
    height: 0;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-bottom: 15px solid var(--glass-strong);
}

.bookmark-ribbon span {
    position: absolute;
    inset: 9px 13px 18px;
    border-radius: 999px;
    background: rgba(45, 31, 20, 0.36);
}

.bookmark-ribbon:hover,
.bookmark-ribbon[aria-expanded="true"] {
    transform: translateY(4px);
    filter: brightness(1.08);
}

.ribbon-panel {
    position: absolute;
    top: 60px;
    right: 0;
    min-width: min(310px, calc(100vw - 28px));
    padding: 1rem;
    border: 1px solid rgba(223, 191, 131, 0.24);
    border-radius: 0 0 24px 24px;
    background: linear-gradient(180deg, rgba(244, 226, 190, 0.98), rgba(219, 188, 135, 0.96));
    color: #271f18;
    box-shadow: 0 22px 48px rgba(0,0,0,0.42);
    transform-origin: top center;
    animation: unrollPapyrus 260ms ease both;
    z-index: 21000;
}

.ribbon-panel::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 14px;
    width: 64px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #8c5c35, #c79a61, #8c5c35);
    box-shadow: 0 5px 12px rgba(0,0,0,0.22);
}

@keyframes unrollPapyrus {
    from { opacity: 0; transform: scaleY(0.72) translateY(-8px); }
    to { opacity: 1; transform: scaleY(1) translateY(0); }
}

.ribbon-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    margin-bottom: 0.8rem;
}

.ribbon-stats div {
    padding: 0.65rem 0.5rem;
    border-radius: 16px;
    background: rgba(84, 59, 38, 0.1);
    border: 1px solid rgba(84, 59, 38, 0.13);
    text-align: center;
}

.ribbon-stats strong {
    display: block;
    font: 800 1.35rem/1 var(--font-ui);
    color: #6e4328;
}

.ribbon-stats span {
    display: block;
    margin-top: 0.22rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(39,31,24,0.68);
}

.ribbon-links {
    display: grid;
    gap: 0.45rem;
}

.ribbon-links button {
    width: 100%;
    border: 0;
    border-radius: 14px;
    padding: 0.72rem 0.85rem;
    background: rgba(39,31,24,0.08);
    color: #271f18;
    text-align: left;
    font-weight: 900;
}

.ribbon-links button:hover {
    background: rgba(39,31,24,0.14);
}

.writer-action-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center !important;
    gap: 0.8rem;
}

.writing-actions-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem;
    flex-wrap: nowrap !important;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

#guestPenName {
    width: clamp(150px, 24vw, 220px) !important;
    flex: 0 0 auto;
}

.candle-toggle,
.clear-draft-link,
#publishBtn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.clear-draft-link {
    border: 1px solid rgba(223, 191, 131, 0.26);
    border-radius: 999px;
    padding: 0.72rem 1rem;
    background: rgba(255,255,255,0.035);
    text-decoration: none;
}

#publishBtn {
    justify-self: end;
    min-width: 148px;
}

body.focus-mode main {
    padding-top: clamp(18px, 4vh, 42px) !important;
}

@media (max-width: 760px) {
    .site-nav {
        align-items: flex-start;
    }

    .nav-actions {
        gap: 0.35rem;
    }

    .save-prompt {
        display: none;
    }

    .bookmark-menu-shell {
        padding-right: 0.2rem;
    }

    .ribbon-panel {
        right: -4px;
        top: 56px;
    }

    .writer-action-line {
        grid-template-columns: minmax(0, 1fr) auto !important;
        overflow-x: auto;
        padding-bottom: 0.2rem;
    }

    .writing-actions-left,
    .writer-action-line {
        width: auto !important;
    }

    .writing-actions-left > *,
    .writer-action-line > #publishBtn {
        width: auto !important;
        max-width: none !important;
    }

    #guestPenName {
        min-width: 148px;
    }

    .candle-toggle,
    .clear-draft-link,
    #publishBtn {
        padding-inline: 0.9rem;
    }
}

/* === Final pass: ribbon menu + focus nav + exact writing-control alignment === */
body.focus-mode .site-nav {
    display: none !important;
}

body.focus-mode .ribbon-panel {
    display: none !important;
}

.writer-action-line {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: thin;
}

.writer-action-line .writing-actions-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: thin;
}

.writer-action-line #guestPenName,
.writer-action-line .candle-toggle,
.writer-action-line .clear-draft-link,
.writer-action-line #publishBtn {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

.writer-action-line #guestPenName {
    width: clamp(150px, 22vw, 220px) !important;
}

.writer-action-line #publishBtn {
    margin-left: auto !important;
    justify-self: auto !important;
    min-width: 148px !important;
}

.bookmark-menu-shell {
    display: flex !important;
}

@media (max-width: 760px) {
    .writer-action-line {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        overflow-x: auto;
    }

    .writer-action-line .writing-actions-left {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
    }

    .writer-action-line #publishBtn {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }
}

/* === Final 05: sober header, minimal logo, restrained palette, focus ambient controls === */
:root {
    --warm-bg: #0d0907;
    --warm-bg-2: #21160f;
    --ink: #0b0705;
    --paper: #f3e3c8;
    --paper-soft: #d8b989;
    --glass: rgba(17, 11, 8, 0.9);
    --glass-strong: rgba(12, 8, 6, 0.98);
    --accent: #87a96b;
    --accent-2: #d0a76f;
    --sage: #87a96b;
    --sage-deep: #17110d;
    --sage-soft: #cdb387;
    --text-main: #f4e6ce;
    --text-muted: #c5ad84;
}

body {
    background:
        radial-gradient(circle at 15% 8%, rgba(208, 167, 111, 0.16), transparent 31rem),
        radial-gradient(circle at 85% 16%, rgba(123, 74, 38, 0.16), transparent 28rem),
        linear-gradient(160deg, #090604, #17100b 44%, #281a12);
}

.page-glow {
    background:
        radial-gradient(circle at 16% 10%, rgba(208, 167, 111, 0.16), transparent 29rem),
        radial-gradient(circle at 82% 16%, rgba(150, 90, 47, 0.16), transparent 26rem);
}

.video-background { background: #090604; }
.video-background video { opacity: 0.14; filter: saturate(0.7) blur(1px); }
.overlay { background: rgba(10, 7, 5, 0.68); }

.btn-primary {
    color: #0b0705;
    background: linear-gradient(135deg, #a8c58d, var(--accent));
    border-color: rgba(226, 244, 206, 0.38);
    box-shadow: 0 10px 24px rgba(135, 169, 107, 0.18);
}
.btn-primary:hover { box-shadow: 0 16px 32px rgba(135, 169, 107, 0.24); }
.btn-secondary, .btn-ghost, .clear-draft-link {
    color: var(--accent-2);
    border-color: rgba(208, 167, 111, 0.46);
}
.btn-secondary:hover, .btn-ghost:hover, .clear-draft-link:hover {
    color: var(--paper);
    background: rgba(208, 167, 111, 0.1);
}
.btn-tiny {
    background: rgba(208, 167, 111, 0.12);
    color: var(--paper-soft);
    border-color: rgba(208, 167, 111, 0.18);
}
.btn-tiny:hover { background: rgba(208, 167, 111, 0.18); }
.text-link { color: var(--accent-2); }
.eyebrow { color: var(--paper-soft); }
.eyebrow.dark { color: #8b5f39; }

.brand-lockup {
    color: var(--accent-2);
    letter-spacing: 0.01em;
}
.brand-logo-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: inline-block;
    filter: drop-shadow(0 7px 13px rgba(0, 0, 0, 0.28));
}
.nav-logo .brand-logo-img { width: 36px; height: 36px; }
.footer-brand .brand-logo-img, .modal-brand .brand-logo-img { width: 32px; height: 32px; }
.brand-mark { display: none; }

.site-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 40px !important;
    min-height: 78px;
    background: rgba(13, 9, 7, 0.94) !important;
    border-bottom: 1px solid rgba(208, 167, 111, 0.18) !important;
    box-shadow: none;
}
.site-nav.scrolled {
    padding: 12px 40px !important;
    min-height: 62px;
    background: rgba(10, 7, 5, 0.97) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}
.nav-logo {
    color: var(--accent-2);
    font-size: 1.42rem;
    font-family: var(--font-body);
    font-weight: 800;
}
.nav-actions {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.9rem !important;
}
.nav-group { flex-direction: row !important; gap: 0.85rem !important; }
.save-prompt { color: var(--text-muted); }
.profile-trigger {
    border-color: rgba(208, 167, 111, 0.28);
    color: var(--accent-2);
    background: rgba(255, 255, 255, 0.035);
}
.profile-trigger:hover { background: rgba(208, 167, 111, 0.1); }
.avatar-small, .feed-avatar-img, .avatar-large { background: #2b1b10; }
.avatar-small { border-color: var(--accent-2); }

.bookmark-menu-shell {
    position: absolute !important;
    right: 40px !important;
    bottom: 0 !important;
    transform: translateY(100%);
    width: auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 20001;
}
.bookmark-ribbon {
    width: 38px;
    height: 52px;
    margin: 0 !important;
    border-radius: 0 0 7px 7px;
    background: linear-gradient(180deg, #d3ab73, #8a5631) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.22);
}
.bookmark-ribbon::after {
    border-left-width: 19px;
    border-right-width: 19px;
    border-bottom-color: #0d0907;
}
.bookmark-ribbon span { background: rgba(25, 15, 9, 0.42); }
.ribbon-panel {
    top: 32px !important;
    right: 0 !important;
    background: linear-gradient(180deg, rgba(236, 214, 176, 0.98), rgba(202, 163, 106, 0.98)) !important;
    border-color: rgba(92, 57, 30, 0.2);
    color: #21160f;
}
.ribbon-stats { margin-bottom: 0.35rem !important; }
.ribbon-stats div { background: rgba(50, 31, 18, 0.08); border-color: rgba(50, 31, 18, 0.12); }
.ribbon-stats strong { color: #5b371f; }
.ribbon-note {
    margin-top: 0.4rem;
    color: rgba(33, 22, 15, 0.7);
    font-size: 0.84rem;
    text-align: center;
    font-style: italic;
}
.ribbon-links { display: none !important; }

.cozy-panel {
    background: linear-gradient(145deg, rgba(22, 14, 9, 0.98), rgba(45, 29, 18, 0.97)) !important;
    border: 1px solid rgba(208, 167, 111, 0.18) !important;
}
.auth-tab.active { background: var(--accent); color: #0b0705; }
.auth-tabs { background: rgba(0,0,0,0.24); }

#writingZoneSection .section-heading h2.sr-only { margin: 0; }

.focus-ambient-controls,
.focus-effects-master,
.ambient-menu {
    display: none;
}
body.focus-mode .focus-ambient-controls,
body.focus-mode .focus-effects-master {
    display: flex;
}
.focus-ambient-controls {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    gap: 0.45rem;
    align-items: center;
    z-index: 7;
}
.focus-mini-btn,
.focus-effects-master {
    border: 1px solid rgba(208, 167, 111, 0.24);
    background: rgba(14, 9, 6, 0.56);
    color: var(--paper-soft);
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.16);
}
.focus-mini-btn {
    padding: 0.44rem 0.75rem;
}
.focus-mini-btn[aria-expanded="true"],
.focus-effects-master[aria-pressed="true"] {
    color: #10100a;
    background: linear-gradient(135deg, #a8c58d, var(--accent));
    border-color: rgba(226, 244, 206, 0.34);
}
.focus-effects-master {
    position: absolute;
    top: 1rem;
    right: 4.2rem;
    padding: 0.45rem 0.76rem;
    z-index: 8;
}
.focus-effects-master[aria-pressed="false"] {
    color: rgba(244, 230, 206, 0.7);
    background: rgba(14, 9, 6, 0.48);
}
body.focus-mode .ambient-menu:not(.hidden) {
    display: grid;
}
.ambient-menu {
    position: absolute;
    top: 3.85rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(330px, calc(100vw - 32px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.7rem;
    border-radius: 20px;
    border: 1px solid rgba(208, 167, 111, 0.2);
    background: rgba(16, 10, 7, 0.94);
    color: var(--paper);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 50px rgba(0,0,0,0.36);
    z-index: 9;
}
.ambient-menu button {
    border: 1px solid rgba(208, 167, 111, 0.15);
    border-radius: 14px;
    padding: 0.6rem 0.72rem;
    color: var(--paper-soft);
    background: rgba(255,255,255,0.035);
    font-size: 0.84rem;
    font-weight: 750;
    text-align: left;
}
.ambient-menu button:hover { background: rgba(208, 167, 111, 0.1); }
.ambient-menu button[aria-pressed="true"] {
    color: #0b0705;
    background: linear-gradient(135deg, #a8c58d, var(--accent));
    border-color: rgba(226, 244, 206, 0.32);
}

body.focus-mode.effects-off .page-glow,
body.focus-mode.effects-off .overlay {
    filter: grayscale(0.25);
    opacity: 0.45;
}
body.focus-mode.light-fireplace-glow .page-glow {
    background: radial-gradient(circle at 50% 72%, rgba(211, 104, 48, 0.42), transparent 30rem), radial-gradient(circle at 44% 14%, rgba(208, 167, 111, 0.2), transparent 34rem);
    animation: focusFireGlow 4.4s ease-in-out infinite;
}
body.focus-mode.light-rain-ambience .page-glow {
    background: linear-gradient(115deg, rgba(145, 160, 172, 0.12), transparent 45%), radial-gradient(circle at 70% 18%, rgba(90, 117, 130, 0.24), transparent 30rem);
}
body.focus-mode.light-wind .page-glow {
    background: linear-gradient(105deg, transparent 15%, rgba(230, 219, 198, 0.11) 45%, transparent 72%), radial-gradient(circle at 20% 14%, rgba(208, 167, 111, 0.14), transparent 28rem);
    animation: focusWindDrift 7s ease-in-out infinite;
}
body.focus-mode.light-thunder-flashes .page-glow {
    background: radial-gradient(circle at 70% 16%, rgba(190, 205, 224, 0.22), transparent 28rem), linear-gradient(180deg, rgba(20, 20, 32, 0.3), transparent);
    animation: focusThunderFlash 8s steps(1, end) infinite;
}
body.focus-mode.light-summer-daylight .page-glow {
    background: radial-gradient(circle at 50% 8%, rgba(247, 205, 118, 0.26), transparent 34rem), radial-gradient(circle at 78% 22%, rgba(208, 167, 111, 0.14), transparent 26rem);
}
body.focus-mode.light-twilight .page-glow {
    background: radial-gradient(circle at 34% 12%, rgba(122, 79, 128, 0.2), transparent 32rem), radial-gradient(circle at 80% 26%, rgba(208, 118, 70, 0.18), transparent 30rem);
}
body.focus-mode.light-lamplight .page-glow {
    background: radial-gradient(circle at 52% 18%, rgba(228, 183, 105, 0.34), transparent 28rem), radial-gradient(circle at 52% 74%, rgba(92, 57, 30, 0.22), transparent 32rem);
}
body.focus-mode.light-moonlit-desk .page-glow {
    background: radial-gradient(circle at 70% 12%, rgba(177, 193, 211, 0.22), transparent 32rem), linear-gradient(145deg, rgba(12, 17, 26, 0.28), transparent 70%);
}

@keyframes focusFireGlow {
    0%, 100% { opacity: 0.72; filter: saturate(0.95); }
    45% { opacity: 1; filter: saturate(1.2); }
}
@keyframes focusWindDrift {
    0%, 100% { transform: translateX(-1.5%); }
    50% { transform: translateX(1.5%); }
}
@keyframes focusThunderFlash {
    0%, 88%, 93%, 100% { opacity: 0.55; }
    89%, 91% { opacity: 1; filter: brightness(1.85); }
}

body.focus-mode .writing-zone {
    padding-top: 4.8rem;
}
body.focus-mode .writing-zone textarea {
    min-height: 61vh;
}
body.focus-mode .site-nav,
body.focus-mode .ribbon-panel { display: none !important; }

@media (max-width: 760px) {
    .site-nav {
        padding: 14px 16px !important;
        min-height: 66px;
    }
    .site-nav.scrolled {
        padding: 10px 16px !important;
        min-height: 58px;
    }
    .nav-actions { gap: 0.55rem !important; }
    .bookmark-menu-shell { right: 16px !important; }
    .bookmark-ribbon { width: 34px; height: 48px; }
    .bookmark-ribbon::after { border-left-width: 17px; border-right-width: 17px; }
    .ribbon-panel { top: 48px !important; }
    .nav-logo { font-size: 1.12rem; }
    .nav-logo .brand-logo-img { width: 31px; height: 31px; }
    .focus-ambient-controls { top: 0.9rem; gap: 0.35rem; }
    .focus-effects-master { top: 0.9rem; right: 3.75rem; max-width: 78px; overflow: hidden; text-overflow: ellipsis; }
    .ambient-menu { top: 3.55rem; grid-template-columns: 1fr; max-height: 58vh; overflow-y: auto; }
    body.focus-mode .writing-zone { padding-top: 4.6rem; }
}

/* === Final 06: pullable bookmark ribbon menu === */
.site-nav {
    overflow: visible !important;
}

.nav-actions {
    position: static !important;
}

.bookmark-menu-shell {
    position: absolute !important;
    right: 40px !important;
    bottom: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 20010 !important;
}

.bookmark-ribbon {
    --pull-distance: 0px;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 42px !important;
    height: 56px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 0 9px 9px !important;
    background: linear-gradient(180deg, #d7a96d 0%, #9b653d 72%, #704122 100%) !important;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255,255,255,0.26) !important;
    cursor: grab !important;
    touch-action: none;
    user-select: none;
    transform: translate3d(0, var(--pull-distance), 0) !important;
    transform-origin: top center !important;
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease !important;
    z-index: 4 !important;
}

.bookmark-ribbon:active,
.bookmark-ribbon.is-dragging {
    cursor: grabbing !important;
    filter: brightness(1.08);
    transition: none !important;
}

.bookmark-ribbon:hover,
.bookmark-ribbon[aria-expanded="true"] {
    filter: brightness(1.06);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

.bookmark-ribbon.pulled-once {
    animation: ribbonPullOnce 420ms cubic-bezier(.2,.8,.22,1) both;
}

.bookmark-ribbon::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 16px;
    height: 24px;
    border-left: 2px solid rgba(25, 15, 9, 0.32);
    border-right: 2px solid rgba(255, 236, 190, 0.18);
    border-radius: 999px;
    transform: translateX(-50%);
    opacity: 0.78;
}

.bookmark-ribbon::after {
    border-left-width: 21px !important;
    border-right-width: 21px !important;
    border-bottom-width: 16px !important;
    border-bottom-color: #0d0907 !important;
}

.bookmark-ribbon span {
    display: none !important;
}

.ribbon-panel.hidden {
    display: none !important;
}

.ribbon-panel {
    position: absolute !important;
    top: 0 !important;
    right: -2px !important;
    min-width: min(318px, calc(100vw - 28px)) !important;
    padding: 4.55rem 1rem 1rem !important;
    border-radius: 0 0 24px 24px !important;
    border: 1px solid rgba(82, 52, 31, 0.22) !important;
    border-top: 0 !important;
    background:
        linear-gradient(180deg, rgba(247, 229, 194, 0.99) 0%, rgba(226, 195, 142, 0.99) 52%, rgba(193, 147, 89, 0.98) 100%) !important;
    color: #21160f !important;
    box-shadow: 0 30px 54px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.55) !important;
    z-index: 2 !important;
    overflow: hidden !important;
    transform-origin: top center !important;
    will-change: transform, clip-path, opacity;
}

.ribbon-panel::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: 15px !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(13, 9, 7, 0.62), rgba(13, 9, 7, 0)) !important;
    box-shadow: none !important;
}

.ribbon-panel.is-open {
    animation: ribbonUnrollFromHeader 360ms cubic-bezier(.19,1,.22,1) both !important;
}

.ribbon-panel.is-closing {
    animation: ribbonRollBehindHeader 220ms ease both !important;
    pointer-events: none !important;
}

.ribbon-stats {
    position: relative;
    z-index: 1;
}

.ribbon-note {
    position: relative;
    z-index: 1;
}

body.focus-mode .bookmark-menu-shell,
body.focus-mode .ribbon-panel {
    display: none !important;
}

@keyframes ribbonPullOnce {
    0% { transform: translate3d(0, 0, 0); }
    42% { transform: translate3d(0, 18px, 0); }
    72% { transform: translate3d(0, 7px, 0); }
    100% { transform: translate3d(0, 10px, 0); }
}

@keyframes ribbonUnrollFromHeader {
    0% {
        opacity: 0;
        clip-path: inset(0 0 100% 0 round 0 0 24px 24px);
        transform: translate3d(0, -10px, 0) scaleY(0.16);
    }
    58% {
        opacity: 1;
        clip-path: inset(0 0 12% 0 round 0 0 24px 24px);
        transform: translate3d(0, 2px, 0) scaleY(1.03);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 0 0 24px 24px);
        transform: translate3d(0, 0, 0) scaleY(1);
    }
}

@keyframes ribbonRollBehindHeader {
    from {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 0 0 24px 24px);
        transform: translate3d(0, 0, 0) scaleY(1);
    }
    to {
        opacity: 0;
        clip-path: inset(0 0 100% 0 round 0 0 24px 24px);
        transform: translate3d(0, -12px, 0) scaleY(0.12);
    }
}

@media (max-width: 760px) {
    .bookmark-menu-shell {
        right: 16px !important;
    }
    .bookmark-ribbon {
        width: 38px !important;
        height: 52px !important;
    }
    .bookmark-ribbon::after {
        border-left-width: 19px !important;
        border-right-width: 19px !important;
    }
    .ribbon-panel {
        min-width: min(294px, calc(100vw - 20px)) !important;
        padding-top: 4.3rem !important;
    }
}

/* === Final 07: wine-red pull-cord ribbon + publish glow fix === */
.site-nav {
    overflow: visible !important;
    isolation: isolate;
}

.nav-actions {
    position: static !important;
    overflow: visible !important;
}

.bookmark-menu-shell {
    --ribbon-open-distance: 158px;
    --ribbon-cord-width: 18px;
    --ribbon-wine-1: #7f1d2d;
    --ribbon-wine-2: #5f1422;
    --ribbon-wine-3: #3b0c16;
    position: absolute !important;
    right: clamp(34px, 4.8vw, 64px) !important;
    bottom: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: 20020 !important;
    transform: none !important;
}

.bookmark-menu-shell::before {
    content: "";
    position: absolute;
    top: 0;
    right: 14px;
    width: var(--ribbon-cord-width);
    height: 58px;
    border-radius: 0 0 999px 999px;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.16), transparent 28%, rgba(0,0,0,0.22) 78%),
        linear-gradient(180deg, var(--ribbon-wine-1), var(--ribbon-wine-2) 58%, var(--ribbon-wine-3));
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.32),
        inset 1px 0 0 rgba(255, 231, 216, 0.18),
        inset -2px 0 0 rgba(0, 0, 0, 0.22);
    transform-origin: top center;
    transition:
        height 620ms cubic-bezier(.18,.86,.21,1),
        filter 240ms ease;
    z-index: 4;
    pointer-events: none;
}

.bookmark-menu-shell.is-open::before {
    height: calc(var(--ribbon-open-distance) + 76px);
    filter: brightness(1.03);
}

.bookmark-ribbon {
    --pull-distance: 0px;
    position: absolute !important;
    top: 0 !important;
    right: 4px !important;
    width: 38px !important;
    height: 68px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(15% 0, 85% 0, 96% 78%, 50% 100%, 4% 78%);
    background:
        radial-gradient(circle at 34% 18%, rgba(255, 224, 202, 0.22), transparent 30%),
        linear-gradient(90deg, rgba(255,255,255,0.14), transparent 27%, rgba(0,0,0,0.18) 74%),
        linear-gradient(180deg, #8f2336 0%, #681727 60%, #3f0d17 100%) !important;
    box-shadow:
        0 18px 32px rgba(0, 0, 0, 0.36),
        inset 1px 0 0 rgba(255, 231, 216, 0.2),
        inset -2px 0 0 rgba(0, 0, 0, 0.22) !important;
    cursor: grab !important;
    touch-action: none;
    user-select: none;
    transform: translate3d(0, var(--pull-distance), 0) !important;
    transform-origin: top center !important;
    transition:
        transform 620ms cubic-bezier(.18,.86,.21,1),
        filter 180ms ease,
        box-shadow 180ms ease !important;
    z-index: 5 !important;
}

.bookmark-ribbon::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 9px;
    height: 43px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03), rgba(0,0,0,0.2));
    transform: translateX(-50%);
    opacity: 0.8;
}

.bookmark-ribbon::after {
    display: none !important;
}

.bookmark-ribbon span {
    display: none !important;
}

.bookmark-ribbon:hover,
.bookmark-ribbon[aria-expanded="true"] {
    filter: brightness(1.08) saturate(1.04);
    box-shadow:
        0 20px 38px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 218, 185, 0.12),
        inset 1px 0 0 rgba(255, 231, 216, 0.24),
        inset -2px 0 0 rgba(0, 0, 0, 0.24) !important;
}

.bookmark-ribbon:active,
.bookmark-ribbon.is-dragging {
    cursor: grabbing !important;
    transition: none !important;
}

.bookmark-ribbon.pulled-once {
    animation: none !important;
}

.bookmark-menu-shell.is-open .bookmark-ribbon {
    transform: translate3d(0, var(--ribbon-open-distance), 0) !important;
}

.ribbon-panel.hidden {
    display: none !important;
}

.ribbon-panel {
    position: absolute !important;
    top: 0 !important;
    right: -20px !important;
    width: min(322px, calc(100vw - 30px)) !important;
    min-width: 0 !important;
    min-height: var(--ribbon-open-distance) !important;
    padding: 1.1rem 4.65rem 1rem 1rem !important;
    border-radius: 0 0 24px 24px !important;
    border: 1px solid rgba(92, 57, 30, 0.24) !important;
    border-top: 0 !important;
    color: #21160f !important;
    background:
        linear-gradient(180deg, rgba(243, 225, 192, 0.99), rgba(215, 181, 128, 0.99) 58%, rgba(184, 137, 78, 0.98)) !important;
    box-shadow:
        0 34px 58px rgba(0,0,0,0.46),
        inset 0 1px 0 rgba(255,255,255,0.54) !important;
    overflow: visible !important;
    transform: translate3d(0, -105%, 0) scaleY(0.72) !important;
    transform-origin: top center !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        transform 620ms cubic-bezier(.18,.86,.21,1),
        opacity 280ms ease,
        visibility 0s linear 620ms !important;
    z-index: 3 !important;
    will-change: transform, opacity;
    animation: none !important;
}

.ribbon-panel::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 16px !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(13, 9, 7, 0.5), rgba(13, 9, 7, 0)) !important;
    box-shadow: none !important;
    pointer-events: none;
}

.ribbon-panel.is-open {
    transform: translate3d(0, 0, 0) scaleY(1) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        transform 620ms cubic-bezier(.18,.86,.21,1),
        opacity 240ms ease,
        visibility 0s linear 0s !important;
    animation: none !important;
}

.ribbon-panel.is-closing {
    transform: translate3d(0, -105%, 0) scaleY(0.72) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
    animation: none !important;
}

.ribbon-stats,
.ribbon-note {
    position: relative;
    z-index: 1;
}

.ribbon-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.48rem !important;
}

.ribbon-stats div {
    background: rgba(50, 31, 18, 0.08) !important;
    border-color: rgba(50, 31, 18, 0.13) !important;
}

.ribbon-stats strong { color: #5b371f !important; }

.ribbon-note {
    margin: 0.42rem 0 0 !important;
    color: rgba(33, 22, 15, 0.7) !important;
}

body.focus-mode .bookmark-menu-shell,
body.focus-mode .ribbon-panel {
    display: none !important;
}

/* Let the publish glow breathe instead of clipping into a rectangle. */
.writing-zone,
.writer-tools,
.writer-action-line,
.writing-actions-left,
.action-bar {
    overflow: visible !important;
}

.writer-action-line {
    padding: 1rem 0.35rem 0.35rem !important;
    margin-left: -0.35rem;
    margin-right: -0.35rem;
}

#publishBtn {
    position: relative;
    z-index: 2;
    overflow: visible !important;
    box-shadow:
        0 0 0 4px rgba(135, 169, 107, 0.13),
        0 16px 38px rgba(135, 169, 107, 0.28) !important;
}

#publishBtn:hover {
    box-shadow:
        0 0 0 5px rgba(135, 169, 107, 0.16),
        0 20px 46px rgba(135, 169, 107, 0.34) !important;
}

@media (max-width: 760px) {
    .bookmark-menu-shell {
        --ribbon-open-distance: 150px;
        right: 18px !important;
    }

    .bookmark-menu-shell::before {
        right: 13px;
        width: 16px;
    }

    .bookmark-ribbon {
        right: 4px !important;
        width: 36px !important;
        height: 64px !important;
    }

    .ribbon-panel {
        right: -10px !important;
        width: min(300px, calc(100vw - 18px)) !important;
        padding-right: 4.25rem !important;
    }

    .writer-action-line,
    .writing-actions-left {
        overflow: visible !important;
    }

    .writer-action-line {
        gap: 0.55rem !important;
    }
}

/* === Final 08: polished classic page-marker ribbon + coordinated dropdown motion === */
.bookmark-menu-shell {
    --ribbon-open-distance: 166px;
    --ribbon-cord-width: 24px;
    --ribbon-width: 48px;
    --ribbon-height: 78px;
    --ribbon-ease: cubic-bezier(.17,.84,.24,1);
    --ribbon-duration: 760ms;
    --ribbon-wine-1: #8b2438;
    --ribbon-wine-2: #641827;
    --ribbon-wine-3: #3b0b15;
    right: clamp(22px, 3.4vw, 48px) !important;
    bottom: 0 !important;
    z-index: 20030 !important;
}

.bookmark-menu-shell::before {
    right: 8px !important;
    width: var(--ribbon-cord-width) !important;
    height: 64px !important;
    border-radius: 0 0 14px 14px !important;
    background:
        linear-gradient(90deg, rgba(255, 239, 226, 0.18) 0%, rgba(255,255,255,0.05) 20%, rgba(0,0,0,0.18) 78%, rgba(0,0,0,0.25) 100%),
        linear-gradient(180deg, var(--ribbon-wine-1) 0%, var(--ribbon-wine-2) 58%, var(--ribbon-wine-3) 100%) !important;
    box-shadow:
        0 14px 26px rgba(0,0,0,0.34),
        inset 2px 0 0 rgba(255, 230, 212, 0.14),
        inset -2px 0 0 rgba(0,0,0,0.24) !important;
    transition:
        height var(--ribbon-duration) var(--ribbon-ease),
        filter 260ms ease !important;
}

.bookmark-menu-shell.is-open::before {
    height: calc(var(--ribbon-open-distance) + var(--ribbon-height) + 18px) !important;
}

.bookmark-ribbon {
    right: -4px !important;
    width: var(--ribbon-width) !important;
    height: var(--ribbon-height) !important;
    border-radius: 0 0 5px 5px !important;
    clip-path: polygon(3% 0, 97% 0, 97% 82%, 50% 100%, 3% 82%) !important;
    background:
        linear-gradient(90deg, rgba(255, 236, 220, 0.18) 0%, rgba(255,255,255,0.06) 18%, rgba(0,0,0,0.16) 72%, rgba(0,0,0,0.24) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #92263a 0%, #6c1a2a 58%, #3e0c16 100%) !important;
    box-shadow:
        0 18px 34px rgba(0,0,0,0.36),
        inset 2px 0 0 rgba(255, 230, 212, 0.15),
        inset -2px 0 0 rgba(0,0,0,0.22) !important;
    transition:
        transform var(--ribbon-duration) var(--ribbon-ease),
        filter 220ms ease,
        box-shadow 220ms ease !important;
}

.bookmark-ribbon::before {
    top: 8px !important;
    left: 50% !important;
    width: 13px !important;
    height: 51px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.14), rgba(255,255,255,0.025) 47%, rgba(0,0,0,0.2)) !important;
    box-shadow: inset 1px 0 0 rgba(255, 238, 224, 0.1) !important;
    opacity: 0.72 !important;
}

.bookmark-ribbon:hover,
.bookmark-ribbon[aria-expanded="true"] {
    filter: brightness(1.06) saturate(1.03) !important;
}

.bookmark-menu-shell.is-open .bookmark-ribbon {
    transform: translate3d(0, var(--ribbon-open-distance), 0) !important;
}

.ribbon-panel {
    right: -14px !important;
    width: min(322px, calc(100vw - 30px)) !important;
    min-height: var(--ribbon-open-distance) !important;
    padding: 4.35rem 1rem 1rem !important;
    overflow: visible !important;
    border-radius: 0 0 24px 24px !important;
    transform: translate3d(0, -106%, 0) scaleY(0.62) !important;
    transform-origin: top center !important;
    clip-path: inset(0 0 100% 0 round 0 0 24px 24px) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        transform var(--ribbon-duration) var(--ribbon-ease),
        clip-path var(--ribbon-duration) var(--ribbon-ease),
        opacity 360ms ease,
        visibility 0s linear var(--ribbon-duration) !important;
    will-change: transform, clip-path, opacity;
}

.ribbon-panel::before {
    height: 18px !important;
    background: linear-gradient(180deg, rgba(13, 9, 7, 0.52), rgba(13, 9, 7, 0)) !important;
}

.ribbon-panel.is-open {
    transform: translate3d(0, 0, 0) scaleY(1) !important;
    clip-path: inset(0 0 0 0 round 0 0 24px 24px) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        transform var(--ribbon-duration) var(--ribbon-ease),
        clip-path var(--ribbon-duration) var(--ribbon-ease),
        opacity 360ms ease,
        visibility 0s linear 0s !important;
    animation: none !important;
}

.ribbon-panel.is-closing {
    transform: translate3d(0, -106%, 0) scaleY(0.62) !important;
    clip-path: inset(0 0 100% 0 round 0 0 24px 24px) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
    transition:
        transform 620ms cubic-bezier(.42,0,.18,1),
        clip-path 620ms cubic-bezier(.42,0,.18,1),
        opacity 260ms ease,
        visibility 0s linear 620ms !important;
    animation: none !important;
}

.ribbon-stats {
    margin-bottom: 0.8rem !important;
}

.ribbon-note {
    margin-top: 0 !important;
}

@media (max-width: 760px) {
    .bookmark-menu-shell {
        --ribbon-open-distance: 156px;
        --ribbon-width: 44px;
        --ribbon-height: 72px;
        --ribbon-cord-width: 22px;
        right: 15px !important;
    }

    .bookmark-menu-shell::before {
        right: 7px !important;
    }

    .bookmark-ribbon {
        right: -4px !important;
    }

    .ribbon-panel {
        right: -9px !important;
        width: min(300px, calc(100vw - 18px)) !important;
        padding: 4.1rem 0.9rem 0.95rem !important;
    }
}

/* === Final 09: continuous classic page-marker ribbon polish === */
.bookmark-menu-shell {
    --ribbon-open-distance: 196px !important;
    --ribbon-width: 46px !important;
    --ribbon-height: 82px !important;
    --ribbon-cord-width: 46px !important;
    --ribbon-ease: cubic-bezier(.17,.84,.24,1) !important;
    --ribbon-duration: 780ms !important;
    --ribbon-wine-1: #8f2336 !important;
    --ribbon-wine-2: #681727 !important;
    --ribbon-wine-3: #3f0d17 !important;
    right: clamp(12px, 2.2vw, 30px) !important;
}

.bookmark-menu-shell::before {
    right: 0 !important;
    width: var(--ribbon-width) !important;
    height: 68px !important;
    border-radius: 0 0 4px 4px !important;
    background:
        linear-gradient(90deg, rgba(255, 239, 226, 0.16) 0%, rgba(255,255,255,0.05) 22%, rgba(0,0,0,0.18) 74%, rgba(0,0,0,0.25) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.026) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, var(--ribbon-wine-1) 0%, var(--ribbon-wine-2) 60%, var(--ribbon-wine-3) 100%) !important;
    box-shadow:
        0 16px 30px rgba(0,0,0,0.34),
        inset 2px 0 0 rgba(255, 230, 212, 0.14),
        inset -2px 0 0 rgba(0,0,0,0.24) !important;
    transition:
        height var(--ribbon-duration) var(--ribbon-ease),
        filter 260ms ease !important;
}

.bookmark-menu-shell.is-open::before {
    height: calc(var(--ribbon-open-distance) + var(--ribbon-height) + 22px) !important;
}

.bookmark-ribbon {
    right: 0 !important;
    width: var(--ribbon-width) !important;
    height: var(--ribbon-height) !important;
    border-radius: 0 0 4px 4px !important;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%) !important;
    background:
        linear-gradient(90deg, rgba(255, 239, 226, 0.16) 0%, rgba(255,255,255,0.05) 22%, rgba(0,0,0,0.18) 74%, rgba(0,0,0,0.25) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.026) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, var(--ribbon-wine-1) 0%, var(--ribbon-wine-2) 60%, var(--ribbon-wine-3) 100%) !important;
    box-shadow:
        0 20px 38px rgba(0,0,0,0.38),
        inset 2px 0 0 rgba(255, 230, 212, 0.14),
        inset -2px 0 0 rgba(0,0,0,0.24) !important;
    transition:
        transform var(--ribbon-duration) var(--ribbon-ease),
        filter 220ms ease,
        box-shadow 220ms ease !important;
}

.bookmark-ribbon::before {
    top: 9px !important;
    width: 12px !important;
    height: 54px !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.025) 48%, rgba(0,0,0,0.18)) !important;
    opacity: 0.72 !important;
}

.bookmark-menu-shell.is-open .bookmark-ribbon {
    transform: translate3d(0, var(--ribbon-open-distance), 0) !important;
}

.ribbon-panel {
    right: 0 !important;
    width: min(322px, calc(100vw - 24px)) !important;
    min-height: 166px !important;
    padding: 4.35rem 1rem 1rem !important;
    transform: translate3d(0, -106%, 0) scaleY(0.62) !important;
    clip-path: inset(0 0 100% 0 round 0 0 24px 24px) !important;
    transition:
        transform var(--ribbon-duration) var(--ribbon-ease),
        clip-path var(--ribbon-duration) var(--ribbon-ease),
        opacity 360ms ease,
        visibility 0s linear var(--ribbon-duration) !important;
}

.ribbon-panel.is-open {
    transform: translate3d(0, 0, 0) scaleY(1) !important;
    clip-path: inset(0 0 0 0 round 0 0 24px 24px) !important;
    transition:
        transform var(--ribbon-duration) var(--ribbon-ease),
        clip-path var(--ribbon-duration) var(--ribbon-ease),
        opacity 360ms ease,
        visibility 0s linear 0s !important;
}

.ribbon-panel.is-closing {
    transform: translate3d(0, -106%, 0) scaleY(0.62) !important;
    clip-path: inset(0 0 100% 0 round 0 0 24px 24px) !important;
}

@media (max-width: 760px) {
    .bookmark-menu-shell {
        --ribbon-open-distance: 184px !important;
        --ribbon-width: 42px !important;
        --ribbon-height: 76px !important;
        --ribbon-cord-width: 42px !important;
        right: 10px !important;
    }

    .bookmark-menu-shell::before,
    .bookmark-ribbon {
        right: 0 !important;
    }

    .ribbon-panel {
        right: 0 !important;
        width: min(300px, calc(100vw - 16px)) !important;
        padding: 4.1rem 0.9rem 0.95rem !important;
    }
}

/* === Final 10: ribbon body only extends to meet the top flat of the tip === */
.bookmark-menu-shell {
    --ribbon-width: 46px !important;
    --ribbon-cord-width: var(--ribbon-width) !important;
}

.bookmark-menu-shell::before {
    right: 0 !important;
    width: var(--ribbon-width) !important;
    height: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(90deg, rgba(255, 239, 226, 0.16) 0%, rgba(255,255,255,0.05) 22%, rgba(0,0,0,0.18) 74%, rgba(0,0,0,0.25) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.026) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, var(--ribbon-wine-1) 0%, var(--ribbon-wine-2) 60%, var(--ribbon-wine-3) 100%) !important;
    box-shadow:
        0 16px 30px rgba(0,0,0,0.28),
        inset 2px 0 0 rgba(255, 230, 212, 0.14),
        inset -2px 0 0 rgba(0,0,0,0.24) !important;
}

.bookmark-menu-shell.is-open::before {
    /* The body ends exactly where the tip begins, with a 1px overlap to hide any seam. */
    height: calc(var(--ribbon-open-distance) + 1px) !important;
}

.bookmark-ribbon {
    right: 0 !important;
    width: var(--ribbon-width) !important;
    background:
        linear-gradient(90deg, rgba(255, 239, 226, 0.16) 0%, rgba(255,255,255,0.05) 22%, rgba(0,0,0,0.18) 74%, rgba(0,0,0,0.25) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.026) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, var(--ribbon-wine-1) 0%, var(--ribbon-wine-2) 60%, var(--ribbon-wine-3) 100%) !important;
}

@media (max-width: 760px) {
    .bookmark-menu-shell {
        --ribbon-width: 42px !important;
        --ribbon-cord-width: var(--ribbon-width) !important;
    }
}

/* === Final 11: nudge the full bookmark ribbon 5px right === */
.bookmark-menu-shell {
    transform: translateX(5px) !important;
}

/* === Final 14: precise polish requested === */
.hero .weekly-prompt-heading {
    margin: 0 0 0.9rem;
}

.hero .weekly-prompt-heading h2 {
    margin: 0;
}

/* Keep the ribbon where it is, but move only the dropdown panel left. */
.ribbon-panel {
    right: 50px !important;
}

/* Darker wine-red cloth shared by both ribbon body and tip. */
.bookmark-menu-shell {
    --ribbon-wine-1: #5c1222 !important;
    --ribbon-wine-2: #3f0b17 !important;
    --ribbon-wine-3: #26060d !important;
}

.bookmark-menu-shell::before,
.bookmark-ribbon {
    background:
        linear-gradient(90deg, rgba(255, 225, 210, 0.13) 0%, rgba(255,255,255,0.04) 22%, rgba(0,0,0,0.20) 74%, rgba(0,0,0,0.28) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.024) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, var(--ribbon-wine-1) 0%, var(--ribbon-wine-2) 62%, var(--ribbon-wine-3) 100%) !important;
}

/* Subtle, centered publish glow. No downward-heavy shadow. */
#publishBtn {
    overflow: visible !important;
    box-shadow:
        0 0 0 3px rgba(135, 169, 107, 0.09),
        0 0 22px 3px rgba(135, 169, 107, 0.13) !important;
}

#publishBtn:hover {
    box-shadow:
        0 0 0 3px rgba(135, 169, 107, 0.12),
        0 0 26px 4px rgba(135, 169, 107, 0.17) !important;
}

@media (max-width: 760px) {
    .ribbon-panel {
        right: 0 !important;
    }
}

/* === Final 16: make Weekly Prompt match the visible section label style used by Writing Desk and Reader Favorites === */
.hero .weekly-prompt-heading #weeklyPromptTitle {
    font-family: var(--font-ui) !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
    color: var(--paper-soft) !important;
    margin: 0 0 0.45rem !important;
}


/* === Final 17: unified compact section titles and lighter prompt text === */
.section-heading .section-label-title,
.hero .weekly-prompt-heading #weeklyPromptTitle,
#topStoriesTitle,
#feedTitle {
    display: block !important;
    font-family: var(--font-ui) !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
    color: var(--paper-soft) !important;
    margin: 0 0 0.45rem !important;
}

#weeklyPromptText {
    color: var(--paper) !important;
}

.prompt-strip p {
    color: var(--paper) !important;
}



/* =========================================================
   Final 18: left storybook bookmark archive menu
   - compact vertical paper pages
   - ribbon trigger flush left
   - tactile slide/unfold animation
   ========================================================= */

.nav-actions {
    overflow: visible !important;
}

.bookmark-menu-shell {
    --story-ribbon-width: 38px;
    --story-ribbon-height: 78px;
    --story-ribbon-open: 128px;
    --story-ribbon-top: 18px;
    --story-ribbon-1: #54111d;
    --story-ribbon-2: #3a0b14;
    --story-ribbon-3: #21060b;
    --story-ribbon-texture:
        linear-gradient(90deg, rgba(255, 226, 214, 0.14) 0%, rgba(255,255,255,0.045) 24%, rgba(0,0,0,0.16) 72%, rgba(0,0,0,0.30) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, var(--story-ribbon-1) 0%, var(--story-ribbon-2) 62%, var(--story-ribbon-3) 100%);

    position: fixed !important;
    top: var(--story-ribbon-top) !important;
    left: 0 !important;
    right: auto !important;
    width: min(340px, 96vw) !important;
    height: 360px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    transform: none !important;
    z-index: 20080 !important;
    pointer-events: none !important;
}

.bookmark-menu-shell::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: var(--story-ribbon-width) !important;
    height: 42px !important;
    background: var(--story-ribbon-texture) !important;
    border-radius: 0 0 7px 0 !important;
    box-shadow:
        12px 18px 28px rgba(0, 0, 0, 0.24),
        inset -1px 0 0 rgba(255, 232, 220, 0.10),
        inset -5px 0 9px rgba(0, 0, 0, 0.16) !important;
    transform-origin: top left !important;
    transition:
        height 620ms cubic-bezier(.18,.88,.18,1),
        filter 260ms ease !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.bookmark-menu-shell.is-open::before {
    height: calc(var(--story-ribbon-open) + 1px) !important;
    filter: brightness(1.035) saturate(1.02) !important;
}

.bookmark-ribbon {
    --pull-distance: 0px;
    position: absolute !important;
    top: 34px !important;
    left: 0 !important;
    right: auto !important;
    width: var(--story-ribbon-width) !important;
    height: var(--story-ribbon-height) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 0 5px 0 !important;
    background: var(--story-ribbon-texture) !important;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%) !important;
    box-shadow:
        14px 20px 32px rgba(0,0,0,0.30),
        inset -1px 0 0 rgba(255, 232, 220, 0.12),
        inset -6px 0 10px rgba(0,0,0,0.18) !important;
    cursor: grab !important;
    transform: translate3d(0, var(--pull-distance), 0) !important;
    transform-origin: top left !important;
    transition:
        transform 640ms cubic-bezier(.18,.88,.18,1),
        filter 220ms ease,
        box-shadow 220ms ease !important;
    z-index: 4 !important;
    pointer-events: auto !important;
}

.bookmark-ribbon::before {
    content: "" !important;
    position: absolute !important;
    top: 8px !important;
    left: 50% !important;
    width: 10px !important;
    height: 48px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025) 48%, rgba(0,0,0,0.20)) !important;
    transform: translateX(-50%) !important;
    opacity: 0.72 !important;
}

.bookmark-ribbon::after,
.bookmark-ribbon span {
    display: none !important;
}

.bookmark-ribbon:hover,
.bookmark-ribbon[aria-expanded="true"] {
    filter: brightness(1.075) saturate(1.04) !important;
}

.bookmark-ribbon:active,
.bookmark-ribbon.is-dragging {
    cursor: grabbing !important;
    transition: none !important;
}

.bookmark-menu-shell.is-open .bookmark-ribbon {
    transform: translate3d(0, var(--story-ribbon-open), 0) !important;
}

.ribbon-panel.hidden {
    display: none !important;
}

.ribbon-panel {
    position: absolute !important;
    top: 56px !important;
    left: calc(var(--story-ribbon-width) - 1px) !important;
    right: auto !important;
    width: min(272px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0.92rem 0.72rem 0.78rem !important;
    border-radius: 0 22px 22px 0 !important;
    border: 1px solid rgba(91, 62, 39, 0.16) !important;
    border-left: 0 !important;
    background:
        linear-gradient(90deg, rgba(110, 76, 47, 0.16), rgba(110, 76, 47, 0.02) 20%, transparent 42%),
        radial-gradient(circle at 24% 0%, rgba(255,255,255,0.52), transparent 11rem),
        repeating-linear-gradient(0deg, rgba(70, 45, 26, 0.025) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, rgba(246, 231, 198, 0.985), rgba(221, 194, 145, 0.975)) !important;
    color: #24170f !important;
    box-shadow:
        24px 28px 54px rgba(0,0,0,0.34),
        inset 1px 0 0 rgba(255,255,255,0.34),
        inset 0 1px 0 rgba(255,255,255,0.42) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(-30px, -4px, 0) scaleX(0.84) scaleY(0.98) !important;
    transform-origin: left top !important;
    clip-path: inset(0 100% 0 0 round 0 22px 22px 0) !important;
    transition:
        transform 640ms cubic-bezier(.18,.88,.18,1),
        clip-path 640ms cubic-bezier(.18,.88,.18,1),
        opacity 280ms ease,
        visibility 0s linear 640ms !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

.ribbon-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 18px !important;
    height: auto !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, rgba(58, 34, 18, 0.20), rgba(58, 34, 18, 0)) !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

.ribbon-panel.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) scaleX(1) scaleY(1) !important;
    clip-path: inset(0 0 0 0 round 0 22px 22px 0) !important;
    pointer-events: auto !important;
    transition:
        transform 680ms cubic-bezier(.18,.88,.18,1),
        clip-path 680ms cubic-bezier(.18,.88,.18,1),
        opacity 320ms ease,
        visibility 0s linear 0s !important;
}

.ribbon-panel.is-closing {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(-26px, -3px, 0) scaleX(0.84) scaleY(0.98) !important;
    clip-path: inset(0 100% 0 0 round 0 22px 22px 0) !important;
    pointer-events: none !important;
}

.storybook-menu-note {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 0 0.72rem !important;
    padding: 0 0.3rem 0.68rem !important;
    border-bottom: 1px solid rgba(82, 50, 28, 0.15) !important;
    color: rgba(36, 23, 15, 0.72) !important;
    font-family: var(--font-body) !important;
    font-size: 1.02rem !important;
    line-height: 1.35 !important;
    font-style: italic !important;
}

.storybook-menu-pages {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    gap: 0.48rem !important;
}

.storybook-page-link {
    position: relative !important;
    width: 100% !important;
    display: grid !important;
    gap: 0.16rem !important;
    padding: 0.72rem 0.78rem 0.68rem 0.92rem !important;
    border: 1px solid rgba(83, 54, 32, 0.13) !important;
    border-radius: 3px 14px 14px 3px !important;
    background:
        linear-gradient(90deg, rgba(99, 66, 37, 0.10), rgba(255,255,255,0.20) 9%, rgba(255,255,255,0.05)),
        linear-gradient(180deg, rgba(255, 248, 232, 0.78), rgba(230, 203, 154, 0.56)) !important;
    color: #2a1a10 !important;
    text-align: left !important;
    font-family: var(--font-ui) !important;
    box-shadow:
        0 5px 12px rgba(64, 39, 21, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.48) !important;
    cursor: pointer !important;
    transform-origin: left center !important;
    transition:
        transform 170ms cubic-bezier(.2,.7,.2,1),
        box-shadow 170ms ease,
        background 170ms ease,
        border-color 170ms ease !important;
}

.storybook-page-link::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 4px !important;
    border-radius: 0 999px 999px 0 !important;
    background: rgba(84, 17, 29, 0.34) !important;
}

.storybook-page-link:nth-child(2) {
    margin-left: 0.18rem !important;
}

.storybook-page-link:nth-child(3) {
    margin-left: 0.08rem !important;
}

.storybook-page-link:nth-child(4) {
    margin-left: 0.24rem !important;
}

.storybook-page-link:hover,
.storybook-page-link:focus-visible {
    transform: translateX(5px) rotate(-0.25deg) !important;
    border-color: rgba(84, 17, 29, 0.28) !important;
    box-shadow:
        0 8px 18px rgba(64, 39, 21, 0.15),
        inset 0 1px 0 rgba(255,255,255,0.58) !important;
    outline: none !important;
}

.storybook-page-link:active {
    transform: translateX(3px) rotate(-0.12deg) scale(0.992) !important;
    box-shadow:
        0 3px 8px rgba(64, 39, 21, 0.12),
        inset 0 1px 3px rgba(64,39,21,0.12) !important;
}

.page-link-title {
    display: block !important;
    color: #24170f !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
}

.page-link-desc {
    display: block !important;
    color: rgba(36, 23, 15, 0.62) !important;
    font-family: var(--font-body) !important;
    font-size: 0.93rem !important;
    line-height: 1.22 !important;
    font-style: italic !important;
}

body.focus-mode .bookmark-menu-shell,
body.focus-mode .ribbon-panel {
    display: none !important;
}

@media (max-width: 760px) {
    .bookmark-menu-shell {
        --story-ribbon-width: 34px;
        --story-ribbon-height: 72px;
        --story-ribbon-open: 118px;
        --story-ribbon-top: 14px;
        width: min(318px, 98vw) !important;
    }

    .ribbon-panel {
        top: 52px !important;
        width: min(258px, calc(100vw - 42px)) !important;
        padding: 0.82rem 0.62rem 0.68rem !important;
    }

    .storybook-page-link {
        padding: 0.66rem 0.68rem 0.62rem 0.82rem !important;
    }

    .page-link-desc {
        font-size: 0.88rem !important;
    }
}


/* =========================================================
   Final 19: unified left bookmark ribbon extension
   The ribbon body stays flush with the header top, then extends
   as one continuous cloth piece until the dropdown bottom.
   Only the pointed tip passes below the dropdown.
   ========================================================= */

.bookmark-menu-shell {
    --story-ribbon-width: 38px !important;
    --story-ribbon-height: 78px !important;
    --story-ribbon-tip-top: 34px !important;
    --story-ribbon-open: 0px;
    --story-ribbon-top: 0px !important;
    top: 0 !important;
    left: 0 !important;
    width: min(340px, 96vw) !important;
    height: 520px !important;
    transform: none !important;
}

/* This is the continuous fabric body. It begins at the header top
   and grows down until it meets the flat top of the tip. */
.bookmark-menu-shell::before {
    top: 0 !important;
    left: 0 !important;
    width: var(--story-ribbon-width) !important;
    height: calc(var(--story-ribbon-tip-top) + 1px) !important;
    border-radius: 0 !important;
    background: var(--story-ribbon-texture) !important;
    box-shadow:
        12px 18px 28px rgba(0, 0, 0, 0.24),
        inset -1px 0 0 rgba(255, 232, 220, 0.10),
        inset -5px 0 9px rgba(0, 0, 0, 0.16) !important;
    transition:
        height 720ms cubic-bezier(.18,.88,.18,1),
        filter 260ms ease !important;
}

/* When open, the body reaches the end of the dropdown panel.
   The pointed tip sits just beneath it, so only the tip passes the panel. */
.bookmark-menu-shell.is-open::before {
    height: calc(var(--story-ribbon-tip-top) + var(--story-ribbon-open) + 1px) !important;
}

/* The pointed end keeps the same cloth texture and width as the body. */
.bookmark-ribbon {
    top: var(--story-ribbon-tip-top) !important;
    left: 0 !important;
    width: var(--story-ribbon-width) !important;
    height: var(--story-ribbon-height) !important;
    border-radius: 0 0 5px 0 !important;
    background: var(--story-ribbon-texture) !important;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%) !important;
    transform: translate3d(0, var(--pull-distance), 0) !important;
    transition:
        transform 720ms cubic-bezier(.18,.88,.18,1),
        filter 220ms ease,
        box-shadow 220ms ease !important;
}

/* The tip travels exactly to the bottom edge of the dropdown panel. */
.bookmark-menu-shell.is-open .bookmark-ribbon {
    transform: translate3d(0, var(--story-ribbon-open), 0) !important;
}

.ribbon-panel {
    top: 56px !important;
    left: calc(var(--story-ribbon-width) - 1px) !important;
}

/* Keep the mobile version unified too. */
@media (max-width: 760px) {
    .bookmark-menu-shell {
        --story-ribbon-width: 34px !important;
        --story-ribbon-height: 72px !important;
        --story-ribbon-tip-top: 32px !important;
        --story-ribbon-top: 0px !important;
        top: 0 !important;
    }

    .ribbon-panel {
        top: 52px !important;
        left: calc(var(--story-ribbon-width) - 1px) !important;
    }
}


/* =========================================================
   Final 20: header-hanging ribbon tip + larger hanging logo
   ========================================================= */

/* Make the logo feel physically attached to the header, with about
   one quarter of the mark hanging below the bar. */
.nav-brand,
.logo-wrap,
.logo-lockup {
    overflow: visible !important;
}

.nav-logo,
.brand-logo,
.site-logo,
.logo-img,
.logo-image,
#siteLogo {
    width: 92px !important;
    height: 92px !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: translateY(22px) !important;
    filter: drop-shadow(0 14px 22px rgba(0,0,0,0.38)) !important;
}

/* Keep text aligned nicely next to the larger hanging logo. */
.nav-brand {
    align-items: center !important;
}

/* The bookmark system remains flush-left, but the clickable tip is now
   visibly hanging from underneath the header when closed instead of sitting
   on top of the header. */
.bookmark-menu-shell {
    --header-drop-start: 76px !important;
    --story-ribbon-width: 38px !important;
    --story-ribbon-height: 78px !important;
    --story-ribbon-tip-top: var(--header-drop-start) !important;
    --story-ribbon-open: 0px;
    top: 0 !important;
    left: 0 !important;
    overflow: visible !important;
}

/* Continuous body begins at the top of the header and reaches the flat
   top of the visible tip. This makes the closed tip look like it is
   hanging from beneath the header, while preserving the one-piece illusion. */
.bookmark-menu-shell::before {
    top: 0 !important;
    left: 0 !important;
    width: var(--story-ribbon-width) !important;
    height: calc(var(--story-ribbon-tip-top) + 1px) !important;
    background: var(--story-ribbon-texture) !important;
    border-radius: 0 !important;
    transition:
        height 720ms cubic-bezier(.18,.88,.18,1),
        filter 260ms ease !important;
}

.bookmark-menu-shell.is-open::before {
    height: calc(var(--story-ribbon-tip-top) + var(--story-ribbon-open) + 1px) !important;
}

/* Entire tip remains visible below the header when closed. */
.bookmark-ribbon {
    top: var(--story-ribbon-tip-top) !important;
    left: 0 !important;
    width: var(--story-ribbon-width) !important;
    height: var(--story-ribbon-height) !important;
    background: var(--story-ribbon-texture) !important;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%) !important;
    transform: translate3d(0, var(--pull-distance), 0) !important;
    z-index: 6 !important;
}

.bookmark-menu-shell.is-open .bookmark-ribbon {
    transform: translate3d(0, var(--story-ribbon-open), 0) !important;
}

/* Keep dropdown opening to the right of the ribbon and starting under
   the header, so the ribbon feels tucked behind the logo/header area. */
.ribbon-panel {
    top: var(--header-drop-start) !important;
    left: calc(var(--story-ribbon-width) - 1px) !important;
}

/* Give the page a little breathing room so the larger hanging logo does
   not visually collide with the content below the fixed header. */
main {
    padding-top: max(132px, var(--main-top-space, 132px)) !important;
}

@media (max-width: 760px) {
    .nav-logo,
    .brand-logo,
    .site-logo,
    .logo-img,
    .logo-image,
    #siteLogo {
        width: 74px !important;
        height: 74px !important;
        transform: translateY(18px) !important;
    }

    .bookmark-menu-shell {
        --header-drop-start: 68px !important;
        --story-ribbon-width: 34px !important;
        --story-ribbon-height: 72px !important;
        --story-ribbon-tip-top: var(--header-drop-start) !important;
    }

    .ribbon-panel {
        top: var(--header-drop-start) !important;
        left: calc(var(--story-ribbon-width) - 1px) !important;
    }

    main {
        padding-top: max(120px, var(--main-top-space, 120px)) !important;
    }
}


/* =========================================================
   Final 21: larger top-left hanging logo + ribbon tucked below logo
   ========================================================= */

/* Header gets enough left padding for the larger fixed logo while keeping
   the rest of the header layout stable. */
.site-nav {
    min-height: 92px !important;
    padding: 18px 40px 18px 168px !important;
    overflow: visible !important;
}

.site-nav.scrolled {
    min-height: 84px !important;
    padding: 12px 40px 12px 158px !important;
    overflow: visible !important;
}

/* IMPORTANT:
   The nav button is the logo container. Keep the button itself normal-sized
   in behavior, but position it at the top-left and let the image become the
   large hanging mark. */
#navLogo.brand-lockup.nav-logo {
    position: fixed !important;
    top: 4px !important;
    left: 16px !important;
    z-index: 22050 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 0.72rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    transform: none !important;
    overflow: visible !important;
    filter: none !important;
}

#navLogo.brand-lockup.nav-logo .brand-logo-img {
    width: 120px !important;
    height: 120px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    transform: none !important;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.42)) !important;
}

/* Keep the wordmark beside the big logo, not underneath it. */
#navLogo.brand-lockup.nav-logo span {
    display: inline-block !important;
    transform: translateY(25px) !important;
    white-space: nowrap !important;
    font-family: var(--font-body) !important;
    font-size: 1.46rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--accent-2) !important;
    text-shadow: 0 8px 18px rgba(0,0,0,0.34) !important;
}

/* Undo the older broad logo override for non-nav locations. */
.footer-brand .brand-logo-img,
.modal-brand .brand-logo-img,
.welcome-card .brand-logo-img {
    width: 32px !important;
    height: 32px !important;
    transform: none !important;
    filter: drop-shadow(0 7px 13px rgba(0,0,0,0.28)) !important;
}

/* Ribbon is now centered beneath the larger logo.
   Closed state:
   - body is tucked behind the header/logo
   - the full clickable tip begins just below the hanging logo
   Open state:
   - the same one-piece ribbon extends down to the bottom of the dropdown
   - only the pointed tip passes below the menu */
.bookmark-menu-shell {
    --story-ribbon-width: 42px !important;
    --story-ribbon-height: 82px !important;
    --story-ribbon-tip-top: 124px !important; /* logo top 4px + 120px height */
    --story-ribbon-open: 0px;
    position: fixed !important;
    top: 0 !important;
    left: 55px !important; /* centered under the 120px logo */
    width: var(--story-ribbon-width) !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    justify-content: initial !important;
    overflow: visible !important;
    z-index: 19990 !important; /* beneath header/logo, above page content */
    pointer-events: none !important;
}

/* Continuous fabric body. It lives behind the header/logo while closed,
   so the user only sees the tip hanging below the larger logo. */
.bookmark-menu-shell::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--story-ribbon-width) !important;
    height: calc(var(--story-ribbon-tip-top) + 1px) !important;
    border-radius: 0 !important;
    background: var(--story-ribbon-texture) !important;
    box-shadow:
        12px 18px 28px rgba(0, 0, 0, 0.24),
        inset -1px 0 0 rgba(255, 232, 220, 0.10),
        inset -5px 0 9px rgba(0, 0, 0, 0.16) !important;
    transition:
        height 720ms cubic-bezier(.18,.88,.18,1),
        filter 260ms ease !important;
    pointer-events: none !important;
}

.bookmark-menu-shell.is-open::before {
    height: calc(var(--story-ribbon-tip-top) + var(--story-ribbon-open) + 1px) !important;
}

/* The visible/clickable tip. In closed state it sits below the large logo,
   not on top of the header. */
.bookmark-ribbon {
    position: absolute !important;
    top: var(--story-ribbon-tip-top) !important;
    left: 0 !important;
    width: var(--story-ribbon-width) !important;
    height: var(--story-ribbon-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 0 6px 6px !important;
    background: var(--story-ribbon-texture) !important;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%) !important;
    transform: translate3d(0, var(--pull-distance), 0) !important;
    transform-origin: top center !important;
    transition:
        transform 720ms cubic-bezier(.18,.88,.18,1),
        filter 220ms ease,
        box-shadow 220ms ease !important;
    box-shadow:
        12px 18px 28px rgba(0, 0, 0, 0.24),
        inset -1px 0 0 rgba(255, 232, 220, 0.10),
        inset -5px 0 9px rgba(0, 0, 0, 0.16) !important;
    z-index: 3 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.bookmark-menu-shell.is-open .bookmark-ribbon {
    transform: translate3d(0, var(--story-ribbon-open), 0) !important;
}

/* Dropdown begins to the right of the ribbon and just under the hanging logo. */
.ribbon-panel {
    top: var(--story-ribbon-tip-top) !important;
    left: calc(var(--story-ribbon-width) - 1px) !important;
    right: auto !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* Extra space so the larger logo and lowered ribbon do not collide
   with the main content. */
main {
    padding-top: max(150px, var(--main-top-space, 150px)) !important;
}

@media (max-width: 760px) {
    .site-nav {
        min-height: 82px !important;
        padding: 14px 16px 14px 118px !important;
    }

    .site-nav.scrolled {
        min-height: 76px !important;
        padding: 10px 16px 10px 112px !important;
    }

    #navLogo.brand-lockup.nav-logo {
        top: 5px !important;
        left: 10px !important;
    }

    #navLogo.brand-lockup.nav-logo .brand-logo-img {
        width: 92px !important;
        height: 92px !important;
    }

    #navLogo.brand-lockup.nav-logo span {
        display: none !important;
    }

    .bookmark-menu-shell {
        --story-ribbon-width: 36px !important;
        --story-ribbon-height: 74px !important;
        --story-ribbon-tip-top: 98px !important; /* mobile logo top + height */
        left: 38px !important;
    }

    .ribbon-panel {
        top: var(--story-ribbon-tip-top) !important;
        left: calc(var(--story-ribbon-width) - 1px) !important;
    }

    main {
        padding-top: max(132px, var(--main-top-space, 132px)) !important;
    }
}


/* =========================================================
   Final 22: larger logo + ribbon flush with header bottom
   ========================================================= */

/* Larger top-left logo: 50% bigger than the prior 120px version. */
.site-nav {
    min-height: 84px !important;
    padding: 16px 40px 16px 238px !important;
    overflow: visible !important;
}

.site-nav.scrolled {
    min-height: 78px !important;
    padding: 12px 40px 12px 226px !important;
    overflow: visible !important;
}

#navLogo.brand-lockup.nav-logo {
    position: fixed !important;
    top: 2px !important;
    left: 14px !important;
    z-index: 22050 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 0.78rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    transform: none !important;
    overflow: visible !important;
    filter: none !important;
}

#navLogo.brand-lockup.nav-logo .brand-logo-img {
    width: 180px !important;
    height: 180px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    transform: none !important;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.46)) !important;
}

#navLogo.brand-lockup.nav-logo span {
    display: inline-block !important;
    transform: translateY(30px) !important;
    white-space: nowrap !important;
    font-family: var(--font-body) !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--accent-2) !important;
    text-shadow: 0 8px 18px rgba(0,0,0,0.34) !important;
}

/* Move the ribbon to the absolute left edge and make its visible tip begin
   exactly under the header, not on top of it. */
.bookmark-menu-shell {
    --story-ribbon-width: 42px !important;
    --story-ribbon-height: 82px !important;
    --story-ribbon-tip-top: 84px !important; /* flush with header bottom */
    --story-ribbon-open: 0px;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--story-ribbon-width) !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    overflow: visible !important;
    z-index: 19990 !important;
    pointer-events: none !important;
}

/* The ribbon body no longer sits over the header. Closed: body is hidden.
   Open: body grows downward from the header bottom, so the ribbon is one
   continuous piece with the tip. */
.bookmark-menu-shell::before {
    content: "" !important;
    position: absolute !important;
    top: var(--story-ribbon-tip-top) !important;
    left: 0 !important;
    width: var(--story-ribbon-width) !important;
    height: 0 !important;
    border-radius: 0 !important;
    background: var(--story-ribbon-texture) !important;
    box-shadow:
        12px 18px 28px rgba(0, 0, 0, 0.24),
        inset -1px 0 0 rgba(255, 232, 220, 0.10),
        inset -5px 0 9px rgba(0, 0, 0, 0.16) !important;
    transition:
        height 720ms cubic-bezier(.18,.88,.18,1),
        filter 260ms ease !important;
    pointer-events: none !important;
}

.bookmark-menu-shell.is-open::before {
    height: calc(var(--story-ribbon-open) + 1px) !important;
}

/* The clickable ribbon tip hangs under the header when closed,
   then drops with the extending body when opened. */
.bookmark-ribbon {
    position: absolute !important;
    top: var(--story-ribbon-tip-top) !important;
    left: 0 !important;
    width: var(--story-ribbon-width) !important;
    height: var(--story-ribbon-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 0 6px 6px !important;
    background: var(--story-ribbon-texture) !important;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%) !important;
    transform: translate3d(0, var(--pull-distance), 0) !important;
    transform-origin: top center !important;
    transition:
        transform 720ms cubic-bezier(.18,.88,.18,1),
        filter 220ms ease,
        box-shadow 220ms ease !important;
    box-shadow:
        12px 18px 28px rgba(0, 0, 0, 0.24),
        inset -1px 0 0 rgba(255, 232, 220, 0.10),
        inset -5px 0 9px rgba(0, 0, 0, 0.16) !important;
    z-index: 3 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.bookmark-menu-shell.is-open .bookmark-ribbon {
    transform: translate3d(0, var(--story-ribbon-open), 0) !important;
}

/* Dropdown begins under the header and opens to the right of the edge ribbon. */
.ribbon-panel {
    top: var(--story-ribbon-tip-top) !important;
    left: calc(var(--story-ribbon-width) - 1px) !important;
    right: auto !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* Preserve breathing room for the enlarged hanging logo. */
main {
    padding-top: max(170px, var(--main-top-space, 170px)) !important;
}

@media (max-width: 760px) {
    .site-nav {
        min-height: 76px !important;
        padding: 12px 16px 12px 168px !important;
    }

    .site-nav.scrolled {
        min-height: 72px !important;
        padding: 10px 16px 10px 158px !important;
    }

    #navLogo.brand-lockup.nav-logo {
        top: 4px !important;
        left: 10px !important;
    }

    #navLogo.brand-lockup.nav-logo .brand-logo-img {
        width: 138px !important;
        height: 138px !important;
    }

    #navLogo.brand-lockup.nav-logo span {
        display: none !important;
    }

    .bookmark-menu-shell {
        --story-ribbon-width: 36px !important;
        --story-ribbon-height: 74px !important;
        --story-ribbon-tip-top: 76px !important;
        left: 0 !important;
    }

    .ribbon-panel {
        top: var(--story-ribbon-tip-top) !important;
        left: calc(var(--story-ribbon-width) - 1px) !important;
    }

    main {
        padding-top: max(150px, var(--main-top-space, 150px)) !important;
    }
}


/* =========================================================
   Final 23: requested logo placement + closed ribbon tip only
   ========================================================= */

/* Desktop logo: 200px x 200px, shifted up and nearly flush left. */
#navLogo.brand-lockup.nav-logo {
    top: -30px !important;
    left: 1px !important;
}

#navLogo.brand-lockup.nav-logo .brand-logo-img {
    width: 200px !important;
    height: 200px !important;
}

/* Keep header contents from overlapping the larger logo. */
.site-nav {
    padding-left: 260px !important;
}

.site-nav.scrolled {
    padding-left: 250px !important;
}

/* Ribbon: far-left edge, closed state shows ONLY the clickable tip
   directly under the header. The body is invisible until opened. */
.bookmark-menu-shell {
    --story-ribbon-width: 42px !important;
    --story-ribbon-height: 82px !important;
    --story-ribbon-tip-top: 84px !important;
    left: 0 !important;
    top: 0 !important;
}

/* Closed ribbon body stays hidden. */
.bookmark-menu-shell::before {
    top: var(--story-ribbon-tip-top) !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Open ribbon body extends from the header downward. */
.bookmark-menu-shell.is-open::before {
    height: calc(var(--story-ribbon-open) + 1px) !important;
    opacity: 1 !important;
}

/* Tip remains visible and clickable just under the header when closed. */
.bookmark-ribbon {
    top: var(--story-ribbon-tip-top) !important;
    left: 0 !important;
}

/* When opened, the tip drops while the body extends behind it. */
.bookmark-menu-shell.is-open .bookmark-ribbon {
    transform: translate3d(0, var(--story-ribbon-open), 0) !important;
}

/* Dropdown still starts under the header to the right of the ribbon. */
.ribbon-panel {
    top: var(--story-ribbon-tip-top) !important;
    left: calc(var(--story-ribbon-width) - 1px) !important;
}

/* Extra room for the bigger hanging logo. */
main {
    padding-top: max(190px, var(--main-top-space, 190px)) !important;
}

@media (max-width: 760px) {
    #navLogo.brand-lockup.nav-logo {
        top: -18px !important;
        left: 1px !important;
    }

    #navLogo.brand-lockup.nav-logo .brand-logo-img {
        width: 150px !important;
        height: 150px !important;
    }

    .site-nav {
        padding-left: 170px !important;
    }

    .site-nav.scrolled {
        padding-left: 160px !important;
    }

    .bookmark-menu-shell {
        --story-ribbon-tip-top: 76px !important;
        left: 0 !important;
    }

    .bookmark-menu-shell::before {
        height: 0 !important;
        opacity: 0 !important;
    }

    .bookmark-menu-shell.is-open::before {
        height: calc(var(--story-ribbon-open) + 1px) !important;
        opacity: 1 !important;
    }

    main {
        padding-top: max(160px, var(--main-top-space, 160px)) !important;
    }
}


/* =========================================================
   Final 24: logo placement, right nav repair, clickable ribbon fix
   ========================================================= */

/* Keep the header controls anchored on the right side of the screen. */
.site-nav {
    justify-content: flex-end !important;
    padding-left: 190px !important;
    padding-right: 40px !important;
}

.site-nav.scrolled {
    padding-left: 184px !important;
    padding-right: 40px !important;
}

.nav-actions {
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 22100 !important;
}

.nav-group {
    justify-content: flex-end !important;
}

/* Logo: 200px square, moved 30px off the left edge and 30px upward. */
#navLogo.brand-lockup.nav-logo {
    top: -30px !important;
    left: -30px !important;
    z-index: 22050 !important;
}

#navLogo.brand-lockup.nav-logo .brand-logo-img {
    width: 200px !important;
    height: 200px !important;
}

/* Keep the wordmark from pushing the right-side login controls around. */
#navLogo.brand-lockup.nav-logo span {
    transform: translate(196px, 48px) !important;
}

/* Ribbon:
   - starts at the far-left edge
   - closed state shows only the clickable tip under the    - no body is visible until the menu opens
   - z-index is above the logo/header hitbox so the tip is actually clickable */
.bookmark-menu-shell {
    --story-ribbon-width: 42px !important;
    --story-ribbon-height: 82px !important;
    --story-ribbon-tip-top: 84px !important;
    left: 0 !important;
    top: 0 !important;
    width: var(--story-ribbon-width) !important;
    height: 100vh !important;
    z-index: 23000 !important;
    pointer-events: none !important;
    overflow: visible !important;
}

/* Closed body hidden completely. */
.bookmark-menu-shell::before {
    top: var(--story-ribbon-tip-top) !important;
    left: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Open body extends only after the user opens the menu. */
.bookmark-menu-shell.is-open::before {
    height: calc(var(--story-ribbon-open) + 1px) !important;
    opacity: 1 !important;
}

/* The tip is the only closed visible/clickable part. */
.bookmark-ribbon {
    top: var(--story-ribbon-tip-top) !important;
    left: 0 !important;
    z-index: 23002 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Dropdown stays connected to the ribbon, beneath the header. */
.ribbon-panel {
    top: var(--story-ribbon-tip-top) !important;
    left: calc(var(--story-ribbon-width) - 1px) !important;
    right: auto !important;
    z-index: 23001 !important;
    pointer-events: auto !important;
}

/* Let the big logo breathe without pushing the login group out of place. */
main {
    padding-top: max(190px, var(--main-top-space, 190px)) !important;
}

@media (max-width: 760px) {
    .site-nav {
        justify-content: flex-end !important;
        padding-left: 118px !important;
        padding-right: 16px !important;
    }

    .site-nav.scrolled {
        padding-left: 112px !important;
        padding-right: 16px !important;
    }

    .nav-actions {
        margin-left: auto !important;
        justify-content: flex-end !important;
    }

    #navLogo.brand-lockup.nav-logo {
        top: -18px !important;
        left: -24px !important;
    }

    #navLogo.brand-lockup.nav-logo .brand-logo-img {
        width: 150px !important;
        height: 150px !important;
    }

    #navLogo.brand-lockup.nav-logo span {
        display: none !important;
    }

    .bookmark-menu-shell {
        --story-ribbon-width: 36px !important;
        --story-ribbon-height: 74px !important;
        --story-ribbon-tip-top: 76px !important;
        left: 0 !important;
        z-index: 23000 !important;
    }

    .bookmark-ribbon {
        z-index: 23002 !important;
    }

    .ribbon-panel {
        z-index: 23001 !important;
    }
}


/* =========================================================
   Final 25: logo above ribbon + larger logo + tighter wordmark
   ========================================================= */

/* Logo sits visually ABOVE the ribbon. Pointer events pass through the
   transparent logo area so the ribbon tip can still be clicked. */
#navLogo.brand-lockup.nav-logo {
    top: -30px !important;
    left: -30px !important;
    z-index: 24000 !important;
    gap: 10px !important;
    pointer-events: none !important;
}

/* 10% larger than the previous 200px logo. */
#navLogo.brand-lockup.nav-logo .brand-logo-img {
    width: 220px !important;
    height: 220px !important;
    pointer-events: none !important;
}

/* Keep The Story Nook text close to the logo and vertically centered in
   the header, instead of floating far to the right/up. */
#navLogo.brand-lockup.nav-logo span {
    transform: translateY(58px) !important;
    margin-left: 0 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

/* The ribbon remains flush-left and visually underneath the logo. */
.bookmark-menu-shell {
    left: 0 !important;
    z-index: 23000 !important;
}

.bookmark-ribbon {
    z-index: 23002 !important;
    pointer-events: auto !important;
}

/* Keep the dropdown under the logo layer but still clickable. */
.ribbon-panel {
    z-index: 23001 !important;
    pointer-events: auto !important;
}

/* Keep header controls on the right. */
.nav-actions {
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: flex-end !important;
    z-index: 24500 !important;
}

.site-nav {
    justify-content: flex-end !important;
    padding-left: 210px !important;
    padding-right: 40px !important;
}

.site-nav.scrolled {
    padding-left: 200px !important;
    padding-right: 40px !important;
}

/* More room for the larger hanging logo. */
main {
    padding-top: max(205px, var(--main-top-space, 205px)) !important;
}

@media (max-width: 760px) {
    #navLogo.brand-lockup.nav-logo {
        top: -24px !important;
        left: -24px !important;
        gap: 8px !important;
        pointer-events: none !important;
    }

    #navLogo.brand-lockup.nav-logo .brand-logo-img {
        width: 165px !important;
        height: 165px !important;
        pointer-events: none !important;
    }

    #navLogo.brand-lockup.nav-logo span {
        display: none !important;
    }

    .site-nav {
        padding-left: 126px !important;
        padding-right: 16px !important;
    }

    .site-nav.scrolled {
        padding-left: 118px !important;
        padding-right: 16px !important;
    }

    main {
        padding-top: max(170px, var(--main-top-space, 170px)) !important;
    }
}


/* =========================================================
   Final 26: smaller logo, same top/left anchor, always above menu
   ========================================================= */

/* Keep the same top/left margins from final_25, but shrink the logo
   by 20% from its bottom/right side: 220px -> 176px. */
#navLogo.brand-lockup.nav-logo {
    top: -30px !important;
    left: -30px !important;
    z-index: 26000 !important;
    pointer-events: none !important;
}

#navLogo.brand-lockup.nav-logo .brand-logo-img {
    width: 176px !important;
    height: 176px !important;
    pointer-events: none !important;
}

/* Re-center the text beside the smaller logo while keeping it close. */
#navLogo.brand-lockup.nav-logo span {
    transform: translateY(48px) !important;
    margin-left: 0 !important;
    pointer-events: none !important;
}

/* Keep ribbon and dropdown visually behind the logo. */
.bookmark-menu-shell {
    z-index: 23000 !important;
}

.bookmark-ribbon {
    z-index: 23002 !important;
    pointer-events: auto !important;
}

.ribbon-panel {
    z-index: 22950 !important;
    pointer-events: auto !important;
}

/* Right-side controls remain above the menu as normal navigation. */
.nav-actions {
    z-index: 27000 !important;
}

/* Header no longer needs as much reserved left space after shrinking logo. */
.site-nav {
    padding-left: 176px !important;
}

.site-nav.scrolled {
    padding-left: 168px !important;
}

main {
    padding-top: max(185px, var(--main-top-space, 185px)) !important;
}

@media (max-width: 760px) {
    #navLogo.brand-lockup.nav-logo {
        top: -24px !important;
        left: -24px !important;
        z-index: 26000 !important;
        pointer-events: none !important;
    }

    #navLogo.brand-lockup.nav-logo .brand-logo-img {
        width: 132px !important;
        height: 132px !important;
        pointer-events: none !important;
    }

    .site-nav {
        padding-left: 112px !important;
    }

    .site-nav.scrolled {
        padding-left: 106px !important;
    }

    main {
        padding-top: max(154px, var(--main-top-space, 154px)) !important;
    }
}


/* =========================================================
   Final 27: force logo above ribbon/dropdown with stacking isolation
   ========================================================= */

/* Create a stable root stacking context and prevent clipping. */
body {
    isolation: isolate !important;
}

.site-nav,
#mainNav {
    overflow: visible !important;
    z-index: 21000 !important;
    isolation: isolate !important;
}

/* Put the left bookmark menu below the logo layer. */
.bookmark-menu-shell {
    z-index: 22000 !important;
}

.bookmark-menu-shell::before {
    z-index: 0 !important;
}

.ribbon-panel {
    z-index: 1 !important;
}

.bookmark-ribbon {
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* Force the whole logo button and everything inside it into the top visual layer.
   pointer-events:none lets the ribbon still be clickable where the transparent
   logo image overlaps it. */
#navLogo,
#navLogo.brand-lockup,
#navLogo.brand-lockup.nav-logo {
    position: fixed !important;
    top: -30px !important;
    left: -30px !important;
    z-index: 999999 !important;
    isolation: isolate !important;
    overflow: visible !important;
    pointer-events: none !important;
}

/* The image itself must also be explicitly above all pseudo-elements. */
#navLogo .brand-logo-img,
#navLogo.brand-lockup.nav-logo .brand-logo-img {
    position: relative !important;
    z-index: 1000000 !important;
    width: 176px !important;
    height: 176px !important;
    max-width: none !important;
    max-height: none !important;
    pointer-events: none !important;
}

/* Keep the wordmark above the dropdown too. */
#navLogo span,
#navLogo.brand-lockup.nav-logo span {
    position: relative !important;
    z-index: 1000000 !important;
    transform: translateY(48px) !important;
    pointer-events: none !important;
}

/* Keep regular nav controls above the menu, but below the logo. */
.nav-actions,
.user-controls {
    position: relative !important;
    z-index: 999998 !important;
}

/* If any old transform/filter on parent elements created an unexpected stacking
   context, this keeps the logo independent by being fixed to the viewport. */
@media (max-width: 760px) {
    #navLogo,
    #navLogo.brand-lockup,
    #navLogo.brand-lockup.nav-logo {
        top: -24px !important;
        left: -24px !important;
        z-index: 999999 !important;
        pointer-events: none !important;
    }

    #navLogo .brand-logo-img,
    #navLogo.brand-lockup.nav-logo .brand-logo-img {
        width: 132px !important;
        height: 132px !important;
        z-index: 1000000 !important;
        pointer-events: none !important;
    }
}


/* =========================================================
   Final 30: reverted to final_27, logo moved to -20px left
   ========================================================= */

#navLogo,
#navLogo.brand-lockup,
#navLogo.brand-lockup.nav-logo {
    left: -20px !important;
}

@media (max-width: 760px) {
    #navLogo,
    #navLogo.brand-lockup,
    #navLogo.brand-lockup.nav-logo {
        left: -20px !important;
    }
}


/* =========================================================
   Final 31: wordmark adjustment + flipped right-side ribbon menu
   ========================================================= */

/* Move The Story Nook text 20px down and 10px left from the final_30 position. */
#navLogo span,
#navLogo.brand-lockup.nav-logo span {
    transform: translate(-10px, 68px) !important;
}

/* Move the bookmark/ribbon system to the right edge.
   Closed state keeps only the tip visible under the header.
   Open state mirrors the previous left-side behavior: the dropdown opens left. */
.bookmark-menu-shell {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: var(--story-ribbon-width, 42px) !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    overflow: visible !important;
    z-index: 22000 !important;
    pointer-events: none !important;
}

/* Ribbon body anchored to the right edge, hidden until opened. */
.bookmark-menu-shell::before {
    top: var(--story-ribbon-tip-top, 84px) !important;
    right: 0 !important;
    left: auto !important;
    width: var(--story-ribbon-width, 42px) !important;
    height: 0 !important;
    opacity: 0 !important;
    transform-origin: top right !important;
    pointer-events: none !important;
}

/* Body extends downward only when open. */
.bookmark-menu-shell.is-open::before {
    height: calc(var(--story-ribbon-open, 160px) + 1px) !important;
    opacity: 1 !important;
}

/* Clickable ribbon tip sits flush against the right edge. */
.bookmark-ribbon {
    top: var(--story-ribbon-tip-top, 84px) !important;
    right: 0 !important;
    left: auto !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Dropdown panel opens to the LEFT of the right-edge ribbon. */
.ribbon-panel {
    top: var(--story-ribbon-tip-top, 84px) !important;
    right: calc(var(--story-ribbon-width, 42px) - 1px) !important;
    left: auto !important;
    width: min(272px, calc(100vw - 48px)) !important;
    border-radius: 22px 0 0 22px !important;
    border-left: 1px solid rgba(91, 62, 39, 0.16) !important;
    border-right: 0 !important;
    transform-origin: top right !important;
    z-index: 1 !important;
    pointer-events: auto !important;
}

/* Flip the subtle paper-shadow strip so it feels tucked behind the right ribbon. */
.ribbon-panel::before {
    inset: 0 0 0 auto !important;
    width: 18px !important;
    background: linear-gradient(270deg, rgba(58, 34, 18, 0.20), rgba(58, 34, 18, 0)) !important;
}

/* Opening/closing animation mirrors the previous left-side page reveal. */
.ribbon-panel.is-open {
    transform: translate3d(0, 0, 0) scaleX(1) scaleY(1) !important;
    clip-path: inset(0 0 0 0 round 22px 0 0 22px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.ribbon-panel.is-closing,
.ribbon-panel:not(.is-open):not(.hidden) {
    transform: translate3d(26px, -3px, 0) scaleX(0.84) scaleY(0.98) !important;
    clip-path: inset(0 0 0 100% round 22px 0 0 22px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Keep the logo visually above the right-side dropdown too. */
#navLogo,
#navLogo.brand-lockup,
#navLogo.brand-lockup.nav-logo {
    z-index: 999999 !important;
}

#navLogo .brand-logo-img,
#navLogo.brand-lockup.nav-logo .brand-logo-img,
#navLogo span,
#navLogo.brand-lockup.nav-logo span {
    z-index: 1000000 !important;
}

/* Mobile mirror of the same right-side behavior. */
@media (max-width: 760px) {
    #navLogo span,
    #navLogo.brand-lockup.nav-logo span {
        transform: translate(-10px, 60px) !important;
    }

    .bookmark-menu-shell {
        right: 0 !important;
        left: auto !important;
        width: var(--story-ribbon-width, 36px) !important;
    }

    .bookmark-menu-shell::before,
    .bookmark-ribbon {
        right: 0 !important;
        left: auto !important;
    }

    .ribbon-panel {
        right: calc(var(--story-ribbon-width, 36px) - 1px) !important;
        left: auto !important;
        width: min(258px, calc(100vw - 42px)) !important;
        border-radius: 20px 0 0 20px !important;
    }

    .ribbon-panel.is-open {
        clip-path: inset(0 0 0 0 round 20px 0 0 20px) !important;
    }

    .ribbon-panel.is-closing,
    .ribbon-panel:not(.is-open):not(.hidden) {
        clip-path: inset(0 0 0 100% round 20px 0 0 20px) !important;
    }
}


/* =========================================================
   Final 32: clickable logo, header scroll polish, quote, refined orbs
   ========================================================= */

/* Logo click behavior: keep the logo visually on top, but allow clicking
   the image/text while preserving ribbon clickability around it. */
#navLogo,
#navLogo.brand-lockup,
#navLogo.brand-lockup.nav-logo {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* The actual logo image/text should accept clicks and return to top. */
#navLogo .brand-logo-img,
#navLogo.brand-lockup.nav-logo .brand-logo-img,
#navLogo span,
#navLogo.brand-lockup.nav-logo span {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Move the text logo another 10px left from final_31 and keep it lower. */
#navLogo span,
#navLogo.brand-lockup.nav-logo span {
    transform: translate(-20px, 68px) !important;
    transition:
        transform 320ms cubic-bezier(.22,.72,.24,1),
        font-size 320ms cubic-bezier(.22,.72,.24,1),
        opacity 260ms ease !important;
}

/* Make both image and text subtly respond when the header contracts. */
#navLogo .brand-logo-img,
#navLogo.brand-lockup.nav-logo .brand-logo-img {
    transition:
        width 320ms cubic-bezier(.22,.72,.24,1),
        height 320ms cubic-bezier(.22,.72,.24,1),
        transform 320ms cubic-bezier(.22,.72,.24,1),
        filter 260ms ease !important;
}

.site-nav.scrolled #navLogo .brand-logo-img,
.site-nav.scrolled #navLogo.brand-lockup.nav-logo .brand-logo-img,
#mainNav.scrolled #navLogo .brand-logo-img,
#mainNav.scrolled #navLogo.brand-lockup.nav-logo .brand-logo-img {
    width: 150px !important;
    height: 150px !important;
    transform: translate(0, 2px) !important;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.38)) !important;
}

.site-nav.scrolled #navLogo span,
.site-nav.scrolled #navLogo.brand-lockup.nav-logo span,
#mainNav.scrolled #navLogo span,
#mainNav.scrolled #navLogo.brand-lockup.nav-logo span {
    transform: translate(-20px, 56px) !important;
    font-size: 1.28rem !important;
}

/* Quote of the day replaces the sign-in nudge without disrupting spacing. */
.quote-of-day {
    max-width: 390px;
    margin-right: 0.15rem;
    text-align: right;
    color: var(--paper-soft);
    line-height: 1.12;
}

.quote-of-day p {
    margin: 0;
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(0.78rem, 1vw, 0.94rem);
    letter-spacing: 0.01em;
    color: rgba(248, 233, 207, 0.88);
}

.quote-of-day cite {
    display: block;
    margin-top: 0.18rem;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(216, 189, 146, 0.74);
}

/* Refined slow ambient orbs: lighter upper-left, darker lower-right.
   Slightly faster than before, still quiet. */
.page-glow {
    overflow: hidden !important;
}

.page-glow::before,
.page-glow::after {
    content: "";
    position: fixed;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(52px);
    mix-blend-mode: screen;
    will-change: transform;
}

.page-glow::before {
    width: 54vw;
    height: 54vw;
    left: -18vw;
    top: -12vh;
    opacity: 0.18;
    background: radial-gradient(circle, rgba(179, 121, 67, 0.42), rgba(143, 87, 43, 0.15) 45%, transparent 72%);
    animation: storyOrbTopLeft 34s ease-in-out infinite alternate;
}

.page-glow::after {
    width: 48vw;
    height: 48vw;
    right: -17vw;
    bottom: -16vh;
    opacity: 0.14;
    background: radial-gradient(circle, rgba(88, 47, 25, 0.46), rgba(67, 34, 18, 0.18) 48%, transparent 74%);
    animation: storyOrbBottomRight 43s ease-in-out infinite alternate;
}

@keyframes storyOrbTopLeft {
    0% { transform: translate3d(-4vw, -2vh, 0) scale(0.96); }
    28% { transform: translate3d(9vw, 6vh, 0) scale(1.05); }
    58% { transform: translate3d(3vw, 13vh, 0) scale(1.02); }
    82% { transform: translate3d(-8vw, 5vh, 0) scale(1.08); }
    100% { transform: translate3d(7vw, -5vh, 0) scale(0.98); }
}

@keyframes storyOrbBottomRight {
    0% { transform: translate3d(4vw, 3vh, 0) scale(1.02); }
    24% { transform: translate3d(-8vw, -4vh, 0) scale(0.96); }
    54% { transform: translate3d(-13vw, -10vh, 0) scale(1.08); }
    78% { transform: translate3d(-3vw, -14vh, 0) scale(1.01); }
    100% { transform: translate3d(6vw, -2vh, 0) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .page-glow::before,
    .page-glow::after {
        animation: none !important;
    }
}

@media (max-width: 760px) {
    #navLogo span,
    #navLogo.brand-lockup.nav-logo span {
        transform: translate(-20px, 60px) !important;
    }

    .site-nav.scrolled #navLogo .brand-logo-img,
    .site-nav.scrolled #navLogo.brand-lockup.nav-logo .brand-logo-img,
    #mainNav.scrolled #navLogo .brand-logo-img,
    #mainNav.scrolled #navLogo.brand-lockup.nav-logo .brand-logo-img {
        width: 112px !important;
        height: 112px !important;
    }

    .site-nav.scrolled #navLogo span,
    .site-nav.scrolled #navLogo.brand-lockup.nav-logo span,
    #mainNav.scrolled #navLogo span,
    #mainNav.scrolled #navLogo.brand-lockup.nav-logo span {
        transform: translate(-20px, 50px) !important;
    }

    .quote-of-day {
        display: none;
    }

    .page-glow::before {
        width: 86vw;
        height: 86vw;
        left: -48vw;
        top: -8vh;
    }

    .page-glow::after {
        width: 80vw;
        height: 80vw;
        right: -46vw;
        bottom: -12vh;
    }
}


/* =========================================================
   Final 33: subtle header scroll + focus-only writing controls
   ========================================================= */

/* Make the logo/header scroll response less dramatic and more refined. */
#navLogo .brand-logo-img,
#navLogo.brand-lockup.nav-logo .brand-logo-img,
#navLogo span,
#navLogo.brand-lockup.nav-logo span {
    transition:
        width 420ms cubic-bezier(.2,.78,.22,1.04),
        height 420ms cubic-bezier(.2,.78,.22,1.04),
        transform 420ms cubic-bezier(.2,.78,.22,1.04),
        filter 300ms ease,
        font-size 420ms cubic-bezier(.2,.78,.22,1.04),
        opacity 260ms ease !important;
}

/* Desktop: reduce image shrink from 176 -> 150 down to 176 -> 166.
   Keep it cozy: almost breathing, not jumping. */
.site-nav.scrolled #navLogo .brand-logo-img,
.site-nav.scrolled #navLogo.brand-lockup.nav-logo .brand-logo-img,
#mainNav.scrolled #navLogo .brand-logo-img,
#mainNav.scrolled #navLogo.brand-lockup.nav-logo .brand-logo-img {
    width: 166px !important;
    height: 166px !important;
    transform: translate(0, 1px) !important;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.36)) !important;
}

/* Desktop: reduce text movement from 68px -> 56px down to 68px -> 63px. */
.site-nav.scrolled #navLogo span,
.site-nav.scrolled #navLogo.brand-lockup.nav-logo span,
#mainNav.scrolled #navLogo span,
#mainNav.scrolled #navLogo.brand-lockup.nav-logo span {
    transform: translate(-20px, 63px) !important;
    font-size: 1.36rem !important;
}

/* Main page cleanup: candle and clear draft are focus-mode tools only. */
body:not(.focus-mode) #candleBtn,
body:not(.focus-mode) #clearDraftBtn {
    display: none !important;
}

body.focus-mode #candleBtn,
body.focus-mode #clearDraftBtn {
    display: inline-flex !important;
}

/* Keep the writing action line balanced when the two focus-only controls
   are hidden on the main page. */
body:not(.focus-mode) .writing-actions-left {
    gap: 0.75rem !important;
}

/* Mobile: preserve the title moving toward top-center, but reduce the amount
   of movement and shrink so it feels smooth and controlled. */
@media (max-width: 760px) {
    #navLogo .brand-logo-img,
    #navLogo.brand-lockup.nav-logo .brand-logo-img,
    #navLogo span,
    #navLogo.brand-lockup.nav-logo span {
        transition:
            width 400ms cubic-bezier(.2,.78,.22,1.04),
            height 400ms cubic-bezier(.2,.78,.22,1.04),
            transform 400ms cubic-bezier(.2,.78,.22,1.04),
            font-size 400ms cubic-bezier(.2,.78,.22,1.04),
            filter 260ms ease !important;
    }

    .site-nav.scrolled #navLogo .brand-logo-img,
    .site-nav.scrolled #navLogo.brand-lockup.nav-logo .brand-logo-img,
    #mainNav.scrolled #navLogo .brand-logo-img,
    #mainNav.scrolled #navLogo.brand-lockup.nav-logo .brand-logo-img {
        width: 124px !important;
        height: 124px !important;
        transform: translate(0, 1px) !important;
    }

    /* Keep the original mobile idea: the title lifts toward top-center,
       just with a smaller, calmer motion. */
    .site-nav.scrolled #navLogo span,
    .site-nav.scrolled #navLogo.brand-lockup.nav-logo span,
    #mainNav.scrolled #navLogo span,
    #mainNav.scrolled #navLogo.brand-lockup.nav-logo span {
        transform: translate(-20px, 55px) !important;
        font-size: clamp(0.96rem, 4.6vw, 1.26rem) !important;
        max-width: 52vw !important;
    }
}


/* =========================================================
   Final 34: polished about copy, footer, and logged-in prompt vote
   ========================================================= */

.about-nook-copy {
    display: grid;
    gap: 0.95rem;
}

.about-nook-copy p {
    margin: 0;
    line-height: 1.72;
    color: #2f2118;
}

.about-nook-copy strong {
    color: #1c120c;
}

/* Footer: organized, warm closing section. */
.site-footer {
    padding: 2rem 20px 2.2rem !important;
    background:
        linear-gradient(180deg, rgba(18, 12, 8, 0.62), rgba(14, 9, 6, 0.88)),
        rgba(18, 12, 8, 0.78) !important;
    border-top: 1px solid rgba(255, 241, 212, 0.12) !important;
}

.footer-content-polished {
    max-width: 1040px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1.1fr) minmax(280px, 1.6fr) auto !important;
    gap: 1.2rem 1.35rem !important;
    align-items: center !important;
    color: var(--text-muted) !important;
}

.footer-main {
    display: grid;
    gap: 0.45rem;
}

.footer-brand {
    color: var(--accent-2) !important;
}

.footer-brand .brand-logo-img {
    width: 38px !important;
    height: 38px !important;
}

.footer-note,
.footer-legal {
    margin: 0;
    color: rgba(216, 189, 146, 0.72);
    font-size: 0.92rem;
    line-height: 1.35;
}

.footer-legal {
    grid-column: 1 / -1;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 241, 212, 0.08);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(216, 189, 146, 0.54);
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 0.35rem 0.9rem;
    flex-wrap: wrap;
}

.footer-nav a,
.footer-nav button {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(248, 233, 207, 0.76);
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 0.88rem;
    line-height: 1;
    text-decoration: none;
    padding: 0.5rem 0.42rem;
    border-radius: 999px;
    transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.footer-nav a:hover,
.footer-nav button:hover {
    color: var(--accent-2);
    background: rgba(255, 241, 212, 0.06);
    transform: translateY(-1px);
}

.footer-owl-link {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.52rem;
    border: 1px solid rgba(215, 165, 111, 0.28);
    border-radius: 999px;
    background: rgba(7, 5, 3, 0.22);
    color: var(--text-main);
    padding: 0.62rem 0.78rem 0.62rem 0.68rem;
    box-shadow: 0 10px 24px rgba(0,0,0,0.16);
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.footer-owl-link:hover {
    border-color: rgba(215, 165, 111, 0.48);
    background: rgba(215, 165, 111, 0.08);
    transform: translateY(-1px);
}

.footer-owl-icon {
    font-size: 1.42rem;
    line-height: 1;
}

.footer-mail-icon {
    display: inline-grid;
    place-items: center;
    width: 1.78rem;
    height: 1.78rem;
    border-radius: 50%;
    background: rgba(215, 165, 111, 0.13);
    color: var(--accent-2);
    font-size: 0.92rem;
    line-height: 1;
}

.footer-owl-text {
    font-weight: 800;
    white-space: nowrap;
}

.storybook-page-link.logged-in-only {
    border-color: rgba(123, 38, 56, 0.20) !important;
}

.storybook-page-link.logged-in-only .page-link-title::after {
    content: " ↗";
    font-size: 0.82em;
    opacity: 0.68;
}

/* Keep old footer class from affecting the polished footer. */
.footer-content-polished .footer-links {
    display: none !important;
}

@media (max-width: 820px) {
    .footer-content-polished {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        justify-items: center !important;
    }

    .footer-nav {
        justify-content: center;
    }

    .footer-owl-link {
        justify-self: center;
    }

    .footer-brand {
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .footer-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 0.35rem;
    }

    .footer-nav a,
    .footer-nav button {
        width: 100%;
        padding: 0.62rem 0.5rem;
        background: rgba(255, 241, 212, 0.035);
    }

    .footer-owl-link {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================
   Final 35: ribbon/dropdown follows the contracting header
   ========================================================= */

/* The ribbon/menu now uses the same "header breathing" motion as the nav.
   When the header contracts, the ribbon tip, extended body, and panel all
   lift slightly and shrink subtly so they stay visually attached. */
.bookmark-menu-shell {
    --story-ribbon-tip-top: 84px !important;
    --story-ribbon-width: 42px !important;
    --story-ribbon-height: 82px !important;
    transition:
        top 420ms cubic-bezier(.2,.78,.22,1.04),
        width 420ms cubic-bezier(.2,.78,.22,1.04) !important;
}

.bookmark-menu-shell::before,
.bookmark-ribbon,
.ribbon-panel {
    transition:
        top 420ms cubic-bezier(.2,.78,.22,1.04),
        right 420ms cubic-bezier(.2,.78,.22,1.04),
        width 420ms cubic-bezier(.2,.78,.22,1.04),
        height 420ms cubic-bezier(.2,.78,.22,1.04),
        transform 720ms cubic-bezier(.18,.88,.18,1),
        clip-path 720ms cubic-bezier(.18,.88,.18,1),
        opacity 240ms ease,
        filter 260ms ease !important;
}

/* Contracted header state. Because the menu is inside .site-nav, this stays
   attached to the header without changing the overall layout. */
.site-nav.scrolled .bookmark-menu-shell,
#mainNav.scrolled .bookmark-menu-shell {
    --story-ribbon-tip-top: 72px !important;
    --story-ribbon-width: 38px !important;
    --story-ribbon-height: 74px !important;
}

.site-nav.scrolled .bookmark-ribbon,
#mainNav.scrolled .bookmark-ribbon {
    width: var(--story-ribbon-width) !important;
    height: var(--story-ribbon-height) !important;
}

.site-nav.scrolled .bookmark-menu-shell::before,
#mainNav.scrolled .bookmark-menu-shell::before {
    width: var(--story-ribbon-width) !important;
}

.site-nav.scrolled .ribbon-panel,
#mainNav.scrolled .ribbon-panel {
    top: var(--story-ribbon-tip-top) !important;
    right: calc(var(--story-ribbon-width) - 1px) !important;
}

/* Keep the right-edge flipped layout intact while allowing the contracted
   dimensions to affect the panel location cleanly. */
.bookmark-ribbon {
    top: var(--story-ribbon-tip-top) !important;
    right: 0 !important;
}

.bookmark-menu-shell::before {
    top: var(--story-ribbon-tip-top) !important;
    right: 0 !important;
}

.ribbon-panel {
    top: var(--story-ribbon-tip-top) !important;
    right: calc(var(--story-ribbon-width) - 1px) !important;
}

/* Mobile version: the header already contracts less dramatically, so the
   ribbon follows with an even smaller adjustment. */
@media (max-width: 760px) {
    .bookmark-menu-shell {
        --story-ribbon-tip-top: 76px !important;
        --story-ribbon-width: 36px !important;
        --story-ribbon-height: 74px !important;
    }

    .site-nav.scrolled .bookmark-menu-shell,
    #mainNav.scrolled .bookmark-menu-shell {
        --story-ribbon-tip-top: 68px !important;
        --story-ribbon-width: 34px !important;
        --story-ribbon-height: 70px !important;
    }

    .site-nav.scrolled .ribbon-panel,
    #mainNav.scrolled .ribbon-panel {
        right: calc(var(--story-ribbon-width) - 1px) !important;
    }
}


/* =========================================================
   Final 36: lower contracted ribbon position by 5px
   ========================================================= */

.site-nav.scrolled .bookmark-menu-shell,
#mainNav.scrolled .bookmark-menu-shell {
    --story-ribbon-tip-top: 77px !important;
}

@media (max-width: 760px) {
    .site-nav.scrolled .bookmark-menu-shell,
    #mainNav.scrolled .bookmark-menu-shell {
        --story-ribbon-tip-top: 73px !important;
    }
}


/* =========================================================
   Final 37: move image logo 10px right
   ========================================================= */

#navLogo,
#navLogo.brand-lockup,
#navLogo.brand-lockup.nav-logo {
    left: -10px !important;
}

@media (max-width: 760px) {
    #navLogo,
    #navLogo.brand-lockup,
    #navLogo.brand-lockup.nav-logo {
        left: -10px !important;
    }
}


/* =========================================================
   Final 38: contracted ribbon + menu 2px lower, instant ribbon reset
   ========================================================= */

/* In the contracted/scrolled header state, sit 2px lower than final_37. */
.site-nav.scrolled .bookmark-menu-shell,
#mainNav.scrolled .bookmark-menu-shell {
    --story-ribbon-tip-top: 79px !important;
}

@media (max-width: 760px) {
    .site-nav.scrolled .bookmark-menu-shell,
    #mainNav.scrolled .bookmark-menu-shell {
        --story-ribbon-tip-top: 75px !important;
    }
}

/* When the dropdown is closing, the ribbon snaps back immediately while
   the paper/menu can still keep its soft close animation. */
.bookmark-menu-shell.ribbon-snap-back .bookmark-ribbon,
.bookmark-menu-shell.ribbon-snap-back::before {
    transition: none !important;
}

.bookmark-menu-shell.ribbon-snap-back .bookmark-ribbon {
    transform: translate3d(0, 0, 0) !important;
}

.bookmark-menu-shell.ribbon-snap-back::before {
    height: 0 !important;
    opacity: 0 !important;
}


/* =========================================================
   Final 39: contracted menu 1px higher + stronger ribbon snap-back
   ========================================================= */

/* Move the contracted/scrolled ribbon + dropdown up 1px from final_38. */
.site-nav.scrolled .bookmark-menu-shell,
#mainNav.scrolled .bookmark-menu-shell {
    --story-ribbon-tip-top: 78px !important;
}

@media (max-width: 760px) {
    .site-nav.scrolled .bookmark-menu-shell,
    #mainNav.scrolled .bookmark-menu-shell {
        --story-ribbon-tip-top: 74px !important;
    }
}

/* While closing, keep the ribbon tip parked directly under the header
   with no return animation. */
.bookmark-menu-shell.ribbon-snap-back .bookmark-ribbon {
    transition: none !important;
    transform: translate3d(0, 0, 0) !important;
    top: var(--story-ribbon-tip-top) !important;
}

.bookmark-menu-shell.ribbon-snap-back::before {
    transition: none !important;
    height: 0 !important;
    opacity: 0 !important;
    top: var(--story-ribbon-tip-top) !important;
}


/* =========================================================
   Final 41: ambient sound toggle reliability + ocean option
   ========================================================= */

.sound-menu [data-sound][aria-pressed="true"] {
    filter: saturate(1.08);
}


/* =========================================================
   Final 42: center Story Nook text logo on narrow/mobile screens
   ========================================================= */

/* When the screen gets narrow, detach the wordmark from the left logo
   visually and let it slide into the center of the header. */
@media (max-width: 900px) {
    #navLogo span,
    #navLogo.brand-lockup.nav-logo span {
        display: inline-block !important;
        position: fixed !important;
        top: 42px !important;
        left: 50vw !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        max-width: 42vw !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: center !important;
        font-size: clamp(1.02rem, 3.2vw, 1.34rem) !important;
        line-height: 1 !important;
        z-index: 1000000 !important;
        pointer-events: auto !important;
        transition:
            top 400ms cubic-bezier(.2,.78,.22,1.04),
            left 400ms cubic-bezier(.2,.78,.22,1.04),
            transform 400ms cubic-bezier(.2,.78,.22,1.04),
            font-size 400ms cubic-bezier(.2,.78,.22,1.04),
            opacity 260ms ease !important;
    }

    .site-nav.scrolled #navLogo span,
    .site-nav.scrolled #navLogo.brand-lockup.nav-logo span,
    #mainNav.scrolled #navLogo span,
    #mainNav.scrolled #navLogo.brand-lockup.nav-logo span {
        top: 36px !important;
        left: 50vw !important;
        transform: translate(-50%, -50%) !important;
        font-size: clamp(0.98rem, 3vw, 1.24rem) !important;
    }
}

/* Phone sizing: keep it centered, readable, and away from the right controls. */
@media (max-width: 520px) {
    #navLogo span,
    #navLogo.brand-lockup.nav-logo span {
        top: 39px !important;
        left: 50vw !important;
        transform: translate(-50%, -50%) !important;
        max-width: 46vw !important;
        font-size: clamp(0.95rem, 4.2vw, 1.16rem) !important;
        letter-spacing: 0.01em !important;
    }

    .site-nav.scrolled #navLogo span,
    .site-nav.scrolled #navLogo.brand-lockup.nav-logo span,
    #mainNav.scrolled #navLogo span,
    #mainNav.scrolled #navLogo.brand-lockup.nav-logo span {
        top: 34px !important;
        left: 50vw !important;
        transform: translate(-50%, -50%) !important;
        font-size: clamp(0.9rem, 3.9vw, 1.08rem) !important;
    }
}


/* =========================================================
   Final 44: focus-mode YouTube audio fallback + mute button
   ========================================================= */

.focus-audio-mute {
    display: inline-grid;
    place-items: center;
    width: 2.05rem;
    height: 2.05rem;
    padding: 0;
    border: 1px solid rgba(208, 167, 111, 0.24);
    background: rgba(14, 9, 6, 0.56);
    color: var(--paper-soft);
    border-radius: 50%;
    font-size: 0.95rem;
    line-height: 1;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.16);
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease;
}

.focus-audio-mute:hover {
    transform: translateY(-1px);
    border-color: rgba(208, 167, 111, 0.38);
    background: rgba(34, 22, 14, 0.66);
}

.focus-audio-mute[aria-pressed="true"] {
    color: rgba(244, 230, 206, 0.78);
    background: rgba(14, 9, 6, 0.48);
    border-color: rgba(208, 167, 111, 0.18);
    box-shadow: 0 8px 18px rgba(0,0,0,0.13);
}

@media (max-width: 520px) {
    .focus-audio-mute {
        width: 1.92rem;
        height: 1.92rem;
        font-size: 0.88rem;
    }
}


/* =========================================================
   Final 45: YouTube background audio default + clearer mute button states
   ========================================================= */

.focus-audio-mute {
    display: inline-grid;
    place-items: center;
    width: 2.05rem;
    height: 2.05rem;
    padding: 0;
    border: 1px solid rgba(123, 151, 93, 0.56);
    background: linear-gradient(135deg, var(--sage-soft), var(--sage));
    color: #0d0d0b;
    border-radius: 50%;
    font-size: 0.96rem;
    line-height: 1;
    backdrop-filter: blur(10px);
    box-shadow:
        0 8px 18px rgba(0,0,0,0.16),
        0 0 0 3px rgba(139, 162, 99, 0.08);
    cursor: pointer;
    transition:
        background 180ms ease,
        border-color 180ms ease,
        transform 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease;
}

.focus-audio-mute:hover {
    transform: translateY(-1px);
    border-color: rgba(146, 170, 103, 0.72);
    box-shadow:
        0 10px 22px rgba(0,0,0,0.18),
        0 0 0 4px rgba(139, 162, 99, 0.10);
}

/* Muted/off: visually matches the quiet Sound/Light controls. */
.focus-audio-mute.is-muted,
.focus-audio-mute[aria-pressed="false"] {
    color: var(--paper-soft);
    background: rgba(14, 9, 6, 0.56);
    border-color: rgba(208, 167, 111, 0.24);
    box-shadow: 0 8px 18px rgba(0,0,0,0.14);
}

.focus-audio-mute.is-muted:hover,
.focus-audio-mute[aria-pressed="false"]:hover {
    background: rgba(34, 22, 14, 0.66);
    border-color: rgba(208, 167, 111, 0.38);
}

@media (max-width: 520px) {
    .focus-audio-mute {
        width: 1.92rem;
        height: 1.92rem;
        font-size: 0.88rem;
    }
}


/* =========================================================
   Final 46: simplified Focus Mode controls for mobile
   ========================================================= */

/* Only Sound + Light stay in the top control row. */
.focus-effects-master {
    display: none !important;
}

.focus-ambient-controls {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.62rem !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

.focus-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.42rem !important;
    min-width: 7.2rem !important;
}

.focus-icon-btn > span:first-child {
    font-size: 1.08rem;
    line-height: 1;
}

/* Mute + candle now live inside their menus, not in the top row. */
.ambient-menu-feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.52rem 0.52rem 0.68rem;
    margin-bottom: 0.42rem;
    border-bottom: 1px solid rgba(215, 165, 111, 0.16);
}

.ambient-feature-label {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(248, 233, 207, 0.72);
}

.sound-menu .focus-audio-mute,
.lighting-menu .candle-icon-toggle {
    flex: 0 0 auto;
}

/* Candle becomes a compact icon-only control inside the Light menu. */
.candle-icon-toggle {
    display: inline-grid !important;
    place-items: center;
    width: 2.05rem;
    height: 2.05rem;
    padding: 0 !important;
    min-width: 0 !important;
    border-radius: 50%;
    border: 1px solid rgba(208, 167, 111, 0.24);
    background: rgba(14, 9, 6, 0.56);
    color: var(--paper-soft);
    font-size: 1rem;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(0,0,0,0.14);
}

.candle-icon-toggle[aria-pressed="true"] {
    background: linear-gradient(135deg, rgba(239, 205, 143, 0.92), rgba(215, 165, 111, 0.84));
    color: #130d09;
    border-color: rgba(239, 205, 143, 0.60);
    box-shadow:
        0 8px 18px rgba(0,0,0,0.16),
        0 0 22px rgba(215, 165, 111, 0.22);
}

/* Clear draft is removed from the focus/mobile writing controls. */
#clearDraftBtn {
    display: none !important;
}

/* Keep the writing action line clean after removing the extra controls. */
.writing-actions-left {
    min-width: min(100%, 18rem);
}

.writer-action-line {
    overflow: visible !important;
}

/* Mobile: make Sound + Light smaller and prevent overlap. */
@media (max-width: 640px) {
    .focus-ambient-controls {
        top: 1.05rem !important;
        gap: 0.46rem !important;
        width: auto !important;
        max-width: calc(100vw - 6.75rem) !important;
    }

    .focus-mini-btn.focus-icon-btn {
        min-width: 5.35rem !important;
        padding: 0.55rem 0.78rem !important;
        font-size: 0.82rem !important;
        border-radius: 999px !important;
    }

    .focus-icon-btn > span:first-child {
        font-size: 0.96rem;
    }

    .focus-close {
        top: 0.82rem !important;
        right: 0.82rem !important;
        width: 2.7rem !important;
        height: 2.7rem !important;
    }

    .ambient-menu {
        max-width: min(86vw, 18rem) !important;
    }

    .writer-action-line {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
    }

    .writing-actions-left,
    #publishBtn {
        width: 100% !important;
    }
}

@media (max-width: 390px) {
    .focus-ambient-controls {
        gap: 0.36rem !important;
        max-width: calc(100vw - 5.8rem) !important;
    }

    .focus-mini-btn.focus-icon-btn {
        min-width: 4.85rem !important;
        padding: 0.5rem 0.58rem !important;
        font-size: 0.76rem !important;
    }
}


/* =========================================================
   Final 47: Sound/Light controls available on main page too
   ========================================================= */

/* Show the same Sound + Light controls on the main Writing Desk card
   as well as in Focus Mode. */
#writingZoneSection .focus-ambient-controls {
    display: inline-flex !important;
}

#writingZoneSection .ambient-menu:not(.hidden) {
    display: grid !important;
}

/* On the main page, keep the controls gently tucked above the Writing Desk
   without changing the rest of the layout. */
body:not(.focus-mode) #writingZoneSection {
    padding-top: 4.4rem;
}

body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
    top: 1.05rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9;
}

body:not(.focus-mode) #writingZoneSection .ambient-menu {
    top: 3.8rem;
    z-index: 20;
}

/* Keep the focus version compact and consistent. */
body.focus-mode #writingZoneSection .focus-ambient-controls {
    display: inline-flex !important;
}

/* Candle mode now works globally, not only in Focus Mode. */
body.candle-lit:not(.focus-mode) {
    --text-main: #271f18;
    --text-muted: #6a5844;
    --paper: #271f18;
    background:
        radial-gradient(circle at 50% 8%, rgba(255, 220, 148, 0.42), transparent 26rem),
        linear-gradient(160deg, #f1e4c9, #d7bc85 62%, #b8915b) !important;
}

body.candle-lit:not(.focus-mode) .overlay {
    background: rgba(255, 244, 220, 0.24) !important;
    backdrop-filter: blur(1px);
}

body.candle-lit:not(.focus-mode) .page-glow {
    background: radial-gradient(circle at 50% 15%, rgba(255, 214, 120, 0.38), transparent 28rem) !important;
}

body.candle-lit:not(.focus-mode) .card,
body.candle-lit:not(.focus-mode) .story-card,
body.candle-lit:not(.focus-mode) .writing-zone {
    color: #271f18;
    background: linear-gradient(145deg, rgba(255,248,230,0.97), rgba(238,218,178,0.96)) !important;
    border-color: rgba(80,55,38,0.2) !important;
}

body.candle-lit:not(.focus-mode) .section-heading,
body.candle-lit:not(.focus-mode) .section-heading *,
body.candle-lit:not(.focus-mode) .eyebrow,
body.candle-lit:not(.focus-mode) .char-meter,
body.candle-lit:not(.focus-mode) .story-author,
body.candle-lit:not(.focus-mode) .story-preview,
body.candle-lit:not(.focus-mode) #weeklyPromptText {
    color: #3d3024 !important;
}

body.candle-lit:not(.focus-mode) textarea,
body.candle-lit:not(.focus-mode) input,
body.candle-lit:not(.focus-mode) select {
    color: #271f18 !important;
    background: rgba(255, 252, 241, 0.82) !important;
    border-color: rgba(80,55,38,0.2) !important;
}

body.candle-lit:not(.focus-mode) textarea::placeholder,
body.candle-lit:not(.focus-mode) input::placeholder {
    color: rgba(39,31,24,0.48) !important;
}

/* Sound and Light overwrite each other inside their own categories:
   this class treatment keeps the active state clear without adding clutter. */
.ambient-menu button[aria-pressed="true"],
.candle-icon-toggle[aria-pressed="true"] {
    outline: 2px solid rgba(226, 244, 206, 0.22);
    outline-offset: 2px;
}

/* Mobile: the main-page controls stay compact and do not crowd the card. */
@media (max-width: 640px) {
    body:not(.focus-mode) #writingZoneSection {
        padding-top: 4.15rem;
    }

    body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
        top: 0.92rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .ambient-menu {
        top: 3.55rem;
    }
}


/* =========================================================
   Final 48: main-page light effects + focus feather slider
   ========================================================= */

:root {
    --focus-zone-alpha: 0.88;
    --focus-zone-alpha-2: 0.93;
    --focus-textarea-alpha: 0.26;
    --focus-zone-blur: 14px;
    --ambient-depth-blur: 3px;
    --ambient-texture: none;
    --ambient-texture-opacity: 0;
}

/* The Light menu is now where the focus-only writing-window slider lives. */
.focus-only-control {
    display: none !important;
}

body.focus-mode .focus-only-control {
    display: flex !important;
}

.ambient-slider-feature {
    grid-column: 1 / -1;
    align-items: center;
}

.focus-visibility-slider {
    display: grid;
    grid-template-columns: auto minmax(100px, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    width: min(100%, 16rem);
}

.focus-visibility-slider input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.slider-soft-label {
    font-size: 0.68rem;
    font-weight: 800;
    color: rgba(248, 233, 207, 0.58);
}

/* Smaller focus header area: less empty space above the Writing Desk. */
body.focus-mode .writing-zone {
    margin-top: min(4vh, 32px) !important;
    padding-top: 3.25rem !important;
    background:
        linear-gradient(145deg,
            rgba(27, 19, 13, var(--focus-zone-alpha)),
            rgba(18, 13, 9, var(--focus-zone-alpha-2))) !important;
    backdrop-filter: blur(var(--focus-zone-blur));
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 241, 212, 0.04);
}

body.focus-mode .writing-zone textarea {
    background:
        linear-gradient(rgba(255, 245, 223, 0.035), rgba(255, 245, 223, 0.035)),
        rgba(0, 0, 0, var(--focus-textarea-alpha)) !important;
}

body.focus-mode .focus-ambient-controls {
    top: 0.72rem !important;
}

body.focus-mode .ambient-menu {
    top: 3.15rem !important;
}

body.focus-mode .focus-close {
    top: 0.68rem !important;
    right: 0.72rem !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
}

/* Shared ambient-light engine.
   Later, real-life light assets can be dropped into --ambient-texture as a
   low-opacity image layer without adding heavy DOM or video effects. */
body.light-fireplace-glow,
body.light-rain-ambience,
body.light-wind,
body.light-thunder-flashes,
body.light-summer-daylight,
body.light-twilight,
body.light-lamplight,
body.light-moonlit-desk {
    --ambient-edge: rgba(215, 165, 111, 0.16);
    --ambient-card-glow: rgba(0, 0, 0, 0.30);
    --ambient-video-filter: saturate(0.88) blur(var(--ambient-depth-blur));
    background: var(--ambient-body-bg) !important;
}

body.light-fireplace-glow { 
    --ambient-body-bg:
        radial-gradient(circle at 46% 74%, rgba(168, 78, 38, 0.18), transparent 32rem),
        linear-gradient(160deg, #1b100b, #28170f 52%, #130b08);
    --ambient-page-glow:
        radial-gradient(circle at 54% 72%, rgba(211, 104, 48, 0.43), transparent 31rem),
        radial-gradient(circle at 42% 14%, rgba(208, 167, 111, 0.20), transparent 34rem);
    --ambient-overlay-bg: rgba(26, 12, 7, 0.56);
    --ambient-card-glow: rgba(199, 91, 42, 0.12);
    --ambient-animation: focusFireGlow 4.6s ease-in-out infinite;
}

body.light-rain-ambience {
    --ambient-body-bg:
        linear-gradient(160deg, #101419, #182126 52%, #0f1114);
    --ambient-page-glow:
        linear-gradient(115deg, rgba(145, 160, 172, 0.16), transparent 45%),
        radial-gradient(circle at 72% 18%, rgba(90, 117, 130, 0.28), transparent 30rem);
    --ambient-overlay-bg: rgba(10, 14, 18, 0.62);
    --ambient-edge: rgba(145, 160, 172, 0.18);
    --ambient-card-glow: rgba(120, 148, 160, 0.10);
    --ambient-depth-blur: 4px;
}

body.light-wind {
    --ambient-body-bg:
        linear-gradient(160deg, #16130f, #252015 52%, #11100c);
    --ambient-page-glow:
        linear-gradient(105deg, transparent 12%, rgba(230, 219, 198, 0.14) 43%, transparent 74%),
        radial-gradient(circle at 20% 14%, rgba(208, 167, 111, 0.14), transparent 28rem);
    --ambient-overlay-bg: rgba(18, 14, 10, 0.60);
    --ambient-card-glow: rgba(230, 219, 198, 0.08);
    --ambient-animation: focusWindDrift 7s ease-in-out infinite;
}

body.light-thunder-flashes {
    --ambient-body-bg:
        linear-gradient(160deg, #0d0d15, #171720 52%, #09090e);
    --ambient-page-glow:
        radial-gradient(circle at 70% 16%, rgba(190, 205, 224, 0.26), transparent 28rem),
        linear-gradient(180deg, rgba(20, 20, 32, 0.35), transparent);
    --ambient-overlay-bg: rgba(6, 6, 10, 0.66);
    --ambient-edge: rgba(190, 205, 224, 0.16);
    --ambient-card-glow: rgba(190, 205, 224, 0.10);
    --ambient-animation: focusThunderFlash 8s steps(1, end) infinite;
    --ambient-depth-blur: 4px;
}

body.light-summer-daylight {
    --ambient-body-bg:
        radial-gradient(circle at 54% 5%, rgba(247, 205, 118, 0.16), transparent 33rem),
        linear-gradient(160deg, #23180d, #3b2a15 54%, #1a1109);
    --ambient-page-glow:
        radial-gradient(circle at 50% 8%, rgba(247, 205, 118, 0.30), transparent 34rem),
        radial-gradient(circle at 78% 22%, rgba(208, 167, 111, 0.16), transparent 26rem);
    --ambient-overlay-bg: rgba(28, 16, 6, 0.48);
    --ambient-card-glow: rgba(247, 205, 118, 0.10);
}

body.light-twilight {
    --ambient-body-bg:
        radial-gradient(circle at 34% 12%, rgba(122, 79, 128, 0.15), transparent 31rem),
        linear-gradient(160deg, #160f18, #2b1b24 53%, #110b12);
    --ambient-page-glow:
        radial-gradient(circle at 34% 12%, rgba(122, 79, 128, 0.24), transparent 32rem),
        radial-gradient(circle at 80% 26%, rgba(208, 118, 70, 0.20), transparent 30rem);
    --ambient-overlay-bg: rgba(15, 9, 16, 0.58);
    --ambient-edge: rgba(185, 128, 151, 0.16);
    --ambient-card-glow: rgba(208, 118, 70, 0.10);
}

body.light-lamplight {
    --ambient-body-bg:
        radial-gradient(circle at 52% 18%, rgba(228, 183, 105, 0.16), transparent 28rem),
        linear-gradient(160deg, #1c120a, #302012 55%, #150d08);
    --ambient-page-glow:
        radial-gradient(circle at 52% 18%, rgba(228, 183, 105, 0.36), transparent 28rem),
        radial-gradient(circle at 52% 74%, rgba(92, 57, 30, 0.24), transparent 32rem);
    --ambient-overlay-bg: rgba(25, 14, 7, 0.54);
    --ambient-card-glow: rgba(228, 183, 105, 0.11);
}

body.light-moonlit-desk {
    --ambient-body-bg:
        linear-gradient(160deg, #0b0f16, #151b26 54%, #090b10);
    --ambient-page-glow:
        radial-gradient(circle at 70% 12%, rgba(177, 193, 211, 0.26), transparent 32rem),
        linear-gradient(145deg, rgba(12, 17, 26, 0.30), transparent 70%);
    --ambient-overlay-bg: rgba(6, 8, 12, 0.66);
    --ambient-edge: rgba(177, 193, 211, 0.16);
    --ambient-card-glow: rgba(177, 193, 211, 0.09);
    --ambient-depth-blur: 4px;
}

body.light-fireplace-glow .page-glow,
body.light-rain-ambience .page-glow,
body.light-wind .page-glow,
body.light-thunder-flashes .page-glow,
body.light-summer-daylight .page-glow,
body.light-twilight .page-glow,
body.light-lamplight .page-glow,
body.light-moonlit-desk .page-glow {
    background: var(--ambient-page-glow) !important;
    animation: var(--ambient-animation, none);
    opacity: 1;
}

body.light-fireplace-glow .overlay,
body.light-rain-ambience .overlay,
body.light-wind .overlay,
body.light-thunder-flashes .overlay,
body.light-summer-daylight .overlay,
body.light-twilight .overlay,
body.light-lamplight .overlay,
body.light-moonlit-desk .overlay {
    background: var(--ambient-overlay-bg) !important;
    backdrop-filter: blur(var(--ambient-depth-blur));
}

body.light-fireplace-glow .video-background video,
body.light-rain-ambience .video-background video,
body.light-wind .video-background video,
body.light-thunder-flashes .video-background video,
body.light-summer-daylight .video-background video,
body.light-twilight .video-background video,
body.light-lamplight .video-background video,
body.light-moonlit-desk .video-background video {
    filter: var(--ambient-video-filter);
    opacity: 0.20;
}

/* Optional future texture layer: set --ambient-texture to a lightweight image
   or gradient and it will feather into the background without new markup. */
body.light-fireplace-glow .page-glow::before,
body.light-rain-ambience .page-glow::before,
body.light-wind .page-glow::before,
body.light-thunder-flashes .page-glow::before,
body.light-summer-daylight .page-glow::before,
body.light-twilight .page-glow::before,
body.light-lamplight .page-glow::before,
body.light-moonlit-desk .page-glow::before {
    content: "";
    position: fixed;
    inset: -8%;
    pointer-events: none;
    background: var(--ambient-texture);
    background-size: cover;
    background-position: center;
    opacity: var(--ambient-texture-opacity);
    filter: blur(18px);
    mix-blend-mode: screen;
}

body.light-fireplace-glow .card,
body.light-rain-ambience .card,
body.light-wind .card,
body.light-thunder-flashes .card,
body.light-summer-daylight .card,
body.light-twilight .card,
body.light-lamplight .card,
body.light-moonlit-desk .card {
    border-color: var(--ambient-edge) !important;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.24),
        0 0 52px var(--ambient-card-glow) !important;
}

/* Mobile: keep focus header compact and menus reachable. */
@media (max-width: 640px) {
    body.focus-mode .writing-zone {
        margin-top: min(3vh, 22px) !important;
        padding-top: 3rem !important;
    }

    body.focus-mode .focus-ambient-controls {
        top: 0.62rem !important;
    }

    body.focus-mode .ambient-menu {
        top: 3rem !important;
    }
}


/* =========================================================
   Final 49: full main-page candle mode, header/footer preserved
   ========================================================= */

/* Candle is available as an icon-only control in the Light popup. */
.candle-icon-toggle {
    display: inline-grid !important;
    place-items: center !important;
    width: 2.05rem !important;
    height: 2.05rem !important;
    padding: 0 !important;
    min-width: 0 !important;
    border-radius: 50% !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

/* Main-page candle mode:
   brighten the page and content sections like Focus Mode candle,
   while keeping the header, footer, and their controls visually unchanged. */
body.candle-lit:not(.focus-mode) {
    background:
        radial-gradient(circle at 50% 8%, rgba(255, 220, 148, 0.42), transparent 26rem),
        linear-gradient(160deg, #f1e4c9, #d7bc85 62%, #b8915b) !important;
}

body.candle-lit:not(.focus-mode) .overlay {
    background: rgba(255, 244, 220, 0.24) !important;
    backdrop-filter: blur(1px);
}

body.candle-lit:not(.focus-mode) .page-glow {
    background: radial-gradient(circle at 50% 15%, rgba(255, 214, 120, 0.38), transparent 28rem) !important;
}

/* Keep the fixed header and footer in the dark Story Nook styling. */
body.candle-lit:not(.focus-mode) .site-nav,
body.candle-lit:not(.focus-mode) #mainNav,
body.candle-lit:not(.focus-mode) .site-footer,
body.candle-lit:not(.focus-mode) footer {
    color: var(--text-main) !important;
}

body.candle-lit:not(.focus-mode) .site-nav,
body.candle-lit:not(.focus-mode) #mainNav {
    background: rgba(11, 7, 4, 0.74) !important;
    border-bottom-color: rgba(255, 241, 212, 0.12) !important;
}

body.candle-lit:not(.focus-mode) .site-footer,
body.candle-lit:not(.focus-mode) footer {
    background:
        linear-gradient(180deg, rgba(18, 12, 8, 0.62), rgba(14, 9, 6, 0.88)),
        rgba(18, 12, 8, 0.78) !important;
    border-top-color: rgba(255, 241, 212, 0.12) !important;
}

/* Lighten the main content cards/sections to match focus-mode candle. */
body.candle-lit:not(.focus-mode) main .card,
body.candle-lit:not(.focus-mode) main .welcome-card,
body.candle-lit:not(.focus-mode) main .story-card,
body.candle-lit:not(.focus-mode) main .stat-card,
body.candle-lit:not(.focus-mode) main .my-stories-container,
body.candle-lit:not(.focus-mode) main .story-accordion,
body.candle-lit:not(.focus-mode) main .comments-section-wrapper,
body.candle-lit:not(.focus-mode) main .comment-item,
body.candle-lit:not(.focus-mode) main .writing-zone {
    color: #271f18 !important;
    background: linear-gradient(145deg, rgba(255,248,230,0.97), rgba(238,218,178,0.96)) !important;
    border-color: rgba(80,55,38,0.20) !important;
    box-shadow:
        0 24px 70px rgba(93, 61, 34, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.36) !important;
}

/* Main content typography in candle mode. */
body.candle-lit:not(.focus-mode) main,
body.candle-lit:not(.focus-mode) main p,
body.candle-lit:not(.focus-mode) main span,
body.candle-lit:not(.focus-mode) main h1,
body.candle-lit:not(.focus-mode) main h2,
body.candle-lit:not(.focus-mode) main h3,
body.candle-lit:not(.focus-mode) main h4,
body.candle-lit:not(.focus-mode) main label,
body.candle-lit:not(.focus-mode) main .eyebrow,
body.candle-lit:not(.focus-mode) main .section-label-title,
body.candle-lit:not(.focus-mode) main .section-heading,
body.candle-lit:not(.focus-mode) main .section-heading *,
body.candle-lit:not(.focus-mode) main .char-meter,
body.candle-lit:not(.focus-mode) main .story-author,
body.candle-lit:not(.focus-mode) main .story-preview,
body.candle-lit:not(.focus-mode) main #weeklyPromptText,
body.candle-lit:not(.focus-mode) main #feedTitle,
body.candle-lit:not(.focus-mode) main #topStoriesTitle {
    color: #3d3024 !important;
}

body.candle-lit:not(.focus-mode) main .story-meta,
body.candle-lit:not(.focus-mode) main .muted,
body.candle-lit:not(.focus-mode) main small {
    color: rgba(61, 48, 36, 0.70) !important;
}

/* Writing/input surfaces in main candle mode. */
body.candle-lit:not(.focus-mode) main textarea,
body.candle-lit:not(.focus-mode) main input,
body.candle-lit:not(.focus-mode) main select {
    color: #271f18 !important;
    background: rgba(255, 252, 241, 0.82) !important;
    border-color: rgba(80,55,38,0.20) !important;
}

body.candle-lit:not(.focus-mode) main textarea::placeholder,
body.candle-lit:not(.focus-mode) main input::placeholder {
    color: rgba(39,31,24,0.48) !important;
}

/* Buttons on main content stay readable against the lighter cards. */
body.candle-lit:not(.focus-mode) main .btn-secondary,
body.candle-lit:not(.focus-mode) main .btn-ghost,
body.candle-lit:not(.focus-mode) main .btn-tiny,
body.candle-lit:not(.focus-mode) main .focus-mini-btn,
body.candle-lit:not(.focus-mode) main .text-link {
    color: #3d3024 !important;
    background: rgba(255, 252, 241, 0.56) !important;
    border-color: rgba(80,55,38,0.22) !important;
}

/* Keep publish button accent treatment clear and intentional. */
body.candle-lit:not(.focus-mode) main #publishBtn,
body.candle-lit:not(.focus-mode) main .btn-primary {
    color: #10100a !important;
}

/* Candle-on icon styling inside the Light popup. */
.candle-icon-toggle[aria-pressed="true"] {
    background: linear-gradient(135deg, rgba(239, 205, 143, 0.96), rgba(215, 165, 111, 0.88)) !important;
    color: #130d09 !important;
    border-color: rgba(239, 205, 143, 0.66) !important;
    box-shadow:
        0 8px 18px rgba(0,0,0,0.16),
        0 0 22px rgba(215, 165, 111, 0.24) !important;
}


/* =========================================================
   Final 50: candle affects panels/windows only, not page background
   ========================================================= */

/* Candle should NOT replace the site background. Keep the main/focus
   background, overlay, and ambient glow in the regular Story Nook mood. */
body.candle-lit,
body.candle-lit:not(.focus-mode),
body.focus-mode.candle-lit {
    background:
        radial-gradient(circle at 18% 10%, rgba(156, 175, 136, 0.22), transparent 34rem),
        radial-gradient(circle at 84% 20%, rgba(215, 165, 111, 0.18), transparent 32rem),
        linear-gradient(160deg, var(--warm-bg), var(--warm-bg-2) 46%, #17261d) !important;
}

body.candle-lit .overlay,
body.candle-lit:not(.focus-mode) .overlay,
body.focus-mode.candle-lit .overlay {
    background: rgba(18, 10, 5, 0.58) !important;
    backdrop-filter: blur(2px) !important;
}

body.candle-lit .page-glow,
body.candle-lit:not(.focus-mode) .page-glow,
body.focus-mode.candle-lit .page-glow {
    background:
        radial-gradient(circle at 18% 10%, rgba(156, 175, 136, 0.18), transparent 34rem),
        radial-gradient(circle at 84% 20%, rgba(215, 165, 111, 0.14), transparent 32rem) !important;
}

/* Header and footer always remain unchanged/dark. */
body.candle-lit .site-nav,
body.candle-lit #mainNav,
body.candle-lit .site-footer,
body.candle-lit footer {
    color: var(--text-main) !important;
}

body.candle-lit .site-nav,
body.candle-lit #mainNav {
    background: rgba(11, 7, 4, 0.74) !important;
    border-bottom-color: rgba(255, 241, 212, 0.12) !important;
}

body.candle-lit .site-footer,
body.candle-lit footer {
    background:
        linear-gradient(180deg, rgba(18, 12, 8, 0.62), rgba(14, 9, 6, 0.88)),
        rgba(18, 12, 8, 0.78) !important;
    border-top-color: rgba(255, 241, 212, 0.12) !important;
}

/* Candle lights up only the main content windows/cards and popups. */
body.candle-lit main .card,
body.candle-lit main .welcome-card,
body.candle-lit main .story-card,
body.candle-lit main .stat-card,
body.candle-lit main .my-stories-container,
body.candle-lit main .story-accordion,
body.candle-lit main .comments-section-wrapper,
body.candle-lit main .comment-item,
body.candle-lit main .writing-zone,
body.candle-lit .modal-content.book-style,
body.candle-lit .modal-content.narrow,
body.candle-lit .passport-guide-style,
body.candle-lit .ambient-menu {
    color: #271f18 !important;
    background:
        linear-gradient(145deg, rgba(255,248,230,0.97), rgba(238,218,178,0.96)) !important;
    border-color: rgba(80,55,38,0.20) !important;
    box-shadow:
        0 24px 70px rgba(93, 61, 34, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.36) !important;
}

/* Focus mode candle: only the writing window changes, not the page background. */
body.focus-mode.candle-lit .writing-zone {
    color: #271f18 !important;
    background:
        linear-gradient(145deg, rgba(255,248,230,0.97), rgba(238,218,178,0.96)) !important;
    border-color: rgba(80,55,38,0.20) !important;
    box-shadow:
        0 28px 80px rgba(93, 61, 34, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.36) !important;
}

/* Dark readable text inside candle-lit windows. */
body.candle-lit main .card *,
body.candle-lit main .writing-zone *,
body.candle-lit main .story-card *,
body.candle-lit main .stat-card *,
body.candle-lit .modal-content.book-style *,
body.candle-lit .modal-content.narrow *,
body.candle-lit .passport-guide-style *,
body.candle-lit .ambient-menu *,
body.focus-mode.candle-lit .writing-zone * {
    color: #271f18 !important;
}

body.candle-lit main .eyebrow,
body.candle-lit main .section-label-title,
body.candle-lit main .story-meta,
body.candle-lit main .muted,
body.candle-lit main small,
body.candle-lit .modal-content.book-style small,
body.candle-lit .ambient-feature-label,
body.focus-mode.candle-lit .char-meter {
    color: rgba(61, 48, 36, 0.72) !important;
}

/* Inputs/textareas inside candle-lit windows. */
body.candle-lit main textarea,
body.candle-lit main input,
body.candle-lit main select,
body.candle-lit .modal-content.book-style input,
body.candle-lit .modal-content.book-style textarea,
body.candle-lit .modal-content.narrow input,
body.candle-lit .modal-content.narrow textarea,
body.focus-mode.candle-lit .writing-zone textarea,
body.focus-mode.candle-lit .writing-zone input {
    color: #271f18 !important;
    background: rgba(255, 252, 241, 0.82) !important;
    border-color: rgba(80,55,38,0.20) !important;
}

body.candle-lit main textarea::placeholder,
body.candle-lit main input::placeholder,
body.candle-lit .modal-content.book-style textarea::placeholder,
body.candle-lit .modal-content.book-style input::placeholder,
body.focus-mode.candle-lit .writing-zone textarea::placeholder {
    color: rgba(39,31,24,0.48) !important;
}

/* Keep buttons legible on the lighter panels. */
body.candle-lit main .btn-secondary,
body.candle-lit main .btn-ghost,
body.candle-lit main .btn-tiny,
body.candle-lit main .focus-mini-btn,
body.candle-lit main .text-link,
body.candle-lit .ambient-menu button:not(.focus-audio-mute):not(.candle-icon-toggle) {
    color: #3d3024 !important;
    background: rgba(255, 252, 241, 0.56) !important;
    border-color: rgba(80,55,38,0.22) !important;
}

/* Keep primary buttons accented and readable. */
body.candle-lit main .btn-primary,
body.candle-lit main #publishBtn {
    color: #10100a !important;
}

/* Keep close button and focus controls visually clear. */
body.focus-mode.candle-lit .focus-close,
body.candle-lit .focus-audio-mute,
body.candle-lit .candle-icon-toggle {
    color: #130d09 !important;
}


/* =========================================================
   Final 51: Feather/Ink slider works on main page + candle mode
   ========================================================= */

/* The Feather / Ink slider is no longer focus-only. It appears in the Light
   popup on both the main Writing Desk and Focus Mode. */
.focus-only-control {
    display: flex !important;
}

/* Shared "window visibility" surface. The slider controls these variables
   globally, so it works with normal, light-effect, and candle states. */
#writingZoneSection,
body.focus-mode #writingZoneSection,
body.candle-lit #writingZoneSection {
    background:
        linear-gradient(145deg,
            rgba(27, 19, 13, var(--focus-zone-alpha)),
            rgba(18, 13, 9, var(--focus-zone-alpha-2))) !important;
    backdrop-filter: blur(var(--focus-zone-blur));
}

/* Main page writing area becomes more/less transparent with Feather / Ink. */
body:not(.focus-mode):not(.candle-lit) #writingZoneSection textarea,
body:not(.focus-mode):not(.candle-lit) #writingZoneSection input {
    background:
        linear-gradient(rgba(255, 245, 223, 0.035), rgba(255, 245, 223, 0.035)),
        rgba(0, 0, 0, var(--focus-textarea-alpha)) !important;
}

/* Candle mode keeps its warm paper look, but Feather / Ink now controls
   how solid or translucent that paper window feels. */
body.candle-lit #writingZoneSection,
body.focus-mode.candle-lit #writingZoneSection {
    color: #271f18 !important;
    background:
        linear-gradient(145deg,
            rgba(255,248,230, var(--focus-zone-alpha)),
            rgba(238,218,178, var(--focus-zone-alpha-2))) !important;
    border-color: rgba(80,55,38,0.20) !important;
    box-shadow:
        0 28px 80px rgba(93, 61, 34, 0.20),
        inset 0 1px 0 rgba(255,255,255,0.36) !important;
}

/* Candle mode textarea/input also respond to Feather / Ink. */
body.candle-lit #writingZoneSection textarea,
body.candle-lit #writingZoneSection input,
body.focus-mode.candle-lit #writingZoneSection textarea,
body.focus-mode.candle-lit #writingZoneSection input {
    color: #271f18 !important;
    background:
        rgba(255, 252, 241, calc(var(--focus-textarea-alpha) + 0.42)) !important;
    border-color: rgba(80,55,38,0.20) !important;
}

/* Light effects on the main page now share the same writing-window treatment
   used in Focus Mode: the background mood changes, while Feather / Ink controls
   how strongly the writing window floats above it. */
body.light-fireplace-glow #writingZoneSection,
body.light-rain-ambience #writingZoneSection,
body.light-wind #writingZoneSection,
body.light-thunder-flashes #writingZoneSection,
body.light-summer-daylight #writingZoneSection,
body.light-twilight #writingZoneSection,
body.light-lamplight #writingZoneSection,
body.light-moonlit-desk #writingZoneSection {
    border-color: var(--ambient-edge) !important;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.30),
        0 0 52px var(--ambient-card-glow) !important;
}

/* Keep the Light popup slider compact on the main page and mobile. */
.ambient-slider-feature {
    display: flex !important;
}

body:not(.focus-mode) .ambient-slider-feature {
    padding-top: 0.48rem;
}

@media (max-width: 640px) {
    .focus-visibility-slider {
        grid-template-columns: auto minmax(92px, 1fr) auto;
        gap: 0.45rem;
    }

    .slider-soft-label {
        font-size: 0.64rem;
    }
}


/* =========================================================
   Final 52: site-wide volume slider in Sound popup
   ========================================================= */

.audio-slider-feature {
    grid-column: 1 / -1;
}

.site-volume-slider {
    display: grid;
    grid-template-columns: auto minmax(118px, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    width: min(100%, 16rem);
}

.site-volume-slider input[type="range"] {
    width: 100%;
    padding: 0;
    accent-color: var(--accent);
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Keep the slider compact on phones. */
@media (max-width: 640px) {
    .site-volume-slider {
        grid-template-columns: auto minmax(92px, 1fr) auto;
        gap: 0.45rem;
    }
}


/* =========================================================
   Final 53: candle button visible in Light popup + centered icon
   ========================================================= */

/* The candle row appears in the Light popup on both the main page and Focus Mode. */
.candle-menu-feature {
    display: flex !important;
}

/* Make the candle button a true centered icon circle. */
#candleBtn.candle-icon-toggle,
.candle-icon-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.08rem !important;
    height: 2.08rem !important;
    min-width: 2.08rem !important;
    min-height: 2.08rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 0 !important; /* prevents emoji baseline drift */
}

#candleBtn.candle-icon-toggle span,
.candle-icon-toggle span {
    display: block !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
    font-size: 1.05rem !important;
    transform: translateY(-0.02em) !important;
    text-align: center !important;
}

/* If the browser renders the emoji slightly tall, this keeps it visually centered. */
#candleBtn.candle-icon-toggle::before,
.candle-icon-toggle::before {
    content: none !important;
}

/* Keep the centered circle consistent on small screens. */
@media (max-width: 640px) {
    #candleBtn.candle-icon-toggle,
    .candle-icon-toggle {
        width: 2rem !important;
        height: 2rem !important;
        min-width: 2rem !important;
        min-height: 2rem !important;
    }

    #candleBtn.candle-icon-toggle span,
    .candle-icon-toggle span {
        font-size: 1rem !important;
    }
}


/* =========================================================
   Final 54: candle button visibility + centered icon + no focus exit
   ========================================================= */

/* Earlier rules hid #candleBtn outside focus mode. Override that so the
   candle row is visible inside the main-page Light popup too. */
body:not(.focus-mode) #lightingEffectsMenu #candleBtn,
body:not(.focus-mode) #lightingEffectsMenu .candle-icon-toggle,
body:not(.focus-mode) #lightingEffectsMenu .candle-menu-feature {
    display: inline-flex !important;
}

body:not(.focus-mode) #lightingEffectsMenu .candle-menu-feature {
    display: flex !important;
}

/* Make sure the main-page Light popup can show its full contents when open. */
body:not(.focus-mode) #writingZoneSection #lightingEffectsMenu:not(.hidden),
body:not(.focus-mode) #writingZoneSection #soundEffectsMenu:not(.hidden) {
    display: grid !important;
}

/* Center the candle glyph precisely inside the round button.
   The emoji's visual center skews right, so this nudges it very slightly left. */
#candleBtn.candle-icon-toggle,
.candle-icon-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.08rem !important;
    height: 2.08rem !important;
    min-width: 2.08rem !important;
    min-height: 2.08rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    text-align: center !important;
    font-size: 0 !important;
    overflow: visible !important;
}

#candleBtn .candle-glyph,
.candle-icon-toggle .candle-glyph {
    display: block !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
    font-size: 1.05rem !important;
    text-align: center !important;
    transform: translate(-0.075em, -0.025em) !important;
    pointer-events: none !important;
}

/* Keep the same centering on mobile. */
@media (max-width: 640px) {
    #candleBtn.candle-icon-toggle,
    .candle-icon-toggle {
        width: 2rem !important;
        height: 2rem !important;
        min-width: 2rem !important;
        min-height: 2rem !important;
    }

    #candleBtn .candle-glyph,
    .candle-icon-toggle .candle-glyph {
        font-size: 1rem !important;
        transform: translate(-0.075em, -0.025em) !important;
    }
}


/* =========================================================
   Final 55: nudge candle glyph 3px farther left
   ========================================================= */

#candleBtn .candle-glyph,
.candle-icon-toggle .candle-glyph {
    transform: translate(calc(-0.075em - 3px), -0.025em) !important;
}

@media (max-width: 640px) {
    #candleBtn .candle-glyph,
    .candle-icon-toggle .candle-glyph {
        transform: translate(calc(-0.075em - 3px), -0.025em) !important;
    }
}


/* =========================================================
   Final 56: mobile Focus Mode writing-first layout
   ========================================================= */

/* Desktop/main page behavior remains unchanged. Mobile Focus Mode becomes
   writing-first: title + X, then the writing area above the keyboard.
   Sound/Light stay available from the main page only on phones. */
@media (max-width: 760px) {
    body.focus-mode {
        overflow-x: hidden !important;
    }

    body.focus-mode main {
        max-width: 100% !important;
        padding: 76px 10px 36px !important;
    }

    body.focus-mode #writingZoneSection {
        min-height: calc(100svh - 88px) !important;
        margin-top: 0 !important;
        padding: 3.05rem 0.82rem 0.86rem !important;
        border-radius: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.62rem !important;
        scroll-margin-top: 72px !important;
    }

    /* Hide the Focus Mode Sound/Light controls on mobile.
       Users can change these from the main Writing Desk before/after focus. */
    body.focus-mode #writingZoneSection .focus-ambient-controls,
    body.focus-mode #writingZoneSection .ambient-menu {
        display: none !important;
    }

    /* Show the Writing Desk title in mobile Focus Mode. */
    body.focus-mode #writingZoneSection .section-heading {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 3.1rem 0.1rem 0 !important;
        padding: 0 !important;
        min-height: 1.35rem !important;
    }

    body.focus-mode #writingZoneSection .section-heading .eyebrow {
        display: block !important;
        font-size: 0.78rem !important;
        letter-spacing: 0.12em !important;
        line-height: 1 !important;
    }

    body.focus-mode #writeTitle {
        position: static !important;
        width: auto !important;
        height: auto !important;
        clip: auto !important;
        overflow: visible !important;
        white-space: normal !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        font-family: var(--font-ui) !important;
        font-size: 1.05rem !important;
        line-height: 1.1 !important;
        color: var(--paper) !important;
    }

    body.focus-mode #writingZoneSection .section-heading .eyebrow + #writeTitle {
        display: none !important;
    }

    body.focus-mode .focus-close {
        display: grid !important;
        top: 0.64rem !important;
        right: 0.66rem !important;
        width: 2.34rem !important;
        height: 2.34rem !important;
        z-index: 12 !important;
    }

    /* Put the text area first and keep it tall enough to be usable above the keyboard. */
    body.focus-mode #mainStoryInput {
        flex: 1 1 auto !important;
        min-height: min(58svh, 430px) !important;
        max-height: none !important;
        font-size: 1rem !important;
        line-height: 1.55 !important;
        padding: 0.9rem !important;
        resize: none !important;
        scroll-margin-bottom: 42vh !important;
    }

    body.focus-mode .writer-tools {
        margin-top: 0 !important;
        flex: 0 0 auto !important;
    }

    /* When the user scrolls down, pen name and Publish sit side-by-side. */
    body.focus-mode .writer-action-line {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 0.55rem !important;
        padding-top: 0.62rem !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    body.focus-mode .writing-actions-left {
        width: auto !important;
        min-width: 0 !important;
        display: block !important;
    }

    body.focus-mode #guestPenName {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0.72rem 0.78rem !important;
        font-size: 0.92rem !important;
    }

    body.focus-mode #publishBtn {
        width: auto !important;
        min-width: 6.25rem !important;
        padding: 0.72rem 0.92rem !important;
        white-space: nowrap !important;
        align-self: stretch !important;
    }
}

@media (max-width: 390px) {
    body.focus-mode #writingZoneSection {
        padding-left: 0.68rem !important;
        padding-right: 0.68rem !important;
    }

    body.focus-mode .writer-action-line {
        gap: 0.42rem !important;
    }

    body.focus-mode #publishBtn {
        min-width: 5.6rem !important;
        padding-left: 0.72rem !important;
        padding-right: 0.72rem !important;
        font-size: 0.88rem !important;
    }

    body.focus-mode #guestPenName {
        font-size: 0.88rem !important;
    }
}


/* =========================================================
   Final 57: Weekly Prompt feather-to-write button
   ========================================================= */

.prompt-write-btn {
    display: inline-grid !important;
    place-items: center !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-width: 2.25rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
}

.prompt-write-btn span {
    display: block;
    transform: translateY(-0.02em) rotate(-8deg);
    pointer-events: none;
}

.prompt-write-btn:hover span {
    transform: translateY(-0.05em) rotate(-13deg);
}

@media (max-width: 640px) {
    .prompt-write-btn {
        width: 2.12rem !important;
        height: 2.12rem !important;
        min-width: 2.12rem !important;
        font-size: 1rem !important;
    }
}


/* =========================================================
   Final 58: UI sound polish
   - paper sound on Focus Mode open/close
   - publish success sound
   - owl/wing sound on footer contact
   ========================================================= */


/* =========================================================
   Final 59: spacing, ribbon, mobile writing flow refinements
   ========================================================= */

/* 1. Ribbon width + edge position.
   The bookmark stays on the screen edge side it currently uses, but is wider
   and sits 5px from the edge. The dropdown opens slightly farther left. */
.bookmark-menu-shell {
    --story-ribbon-width: 52px !important;
    width: var(--story-ribbon-width) !important;
    right: 5px !important;
}

.bookmark-menu-shell::before,
.bookmark-ribbon {
    width: var(--story-ribbon-width) !important;
}

.ribbon-panel {
    right: calc(var(--story-ribbon-width) + 10px) !important;
}

.site-nav.scrolled .bookmark-menu-shell,
#mainNav.scrolled .bookmark-menu-shell {
    --story-ribbon-width: 48px !important;
}

.site-nav.scrolled .ribbon-panel,
#mainNav.scrolled .ribbon-panel {
    right: calc(var(--story-ribbon-width) + 10px) !important;
}

@media (max-width: 760px) {
    .bookmark-menu-shell {
        --story-ribbon-width: 46px !important;
        width: var(--story-ribbon-width) !important;
        right: 5px !important;
    }

    .bookmark-menu-shell::before,
    .bookmark-ribbon {
        width: var(--story-ribbon-width) !important;
    }

    .ribbon-panel {
        right: calc(var(--story-ribbon-width) + 10px) !important;
    }

    .site-nav.scrolled .bookmark-menu-shell,
    #mainNav.scrolled .bookmark-menu-shell {
        --story-ribbon-width: 44px !important;
    }
}

/* 2. Weekly Prompt window 20px upward, with balanced following spacing. */
.compact-inspiration[aria-labelledby="weeklyPromptTitle"] {
    margin-top: -20px !important;
    margin-bottom: 1.15rem !important;
}

@media (max-width: 760px) {
    .compact-inspiration[aria-labelledby="weeklyPromptTitle"] {
        margin-top: -20px !important;
        margin-bottom: 1rem !important;
    }
}

/* 3. Main Writing Desk header spacing: tighter and cleaner. */
body:not(.focus-mode) #writingZoneSection {
    padding-top: 3.05rem !important;
}

body:not(.focus-mode) #writingZoneSection .section-heading {
    margin: 0 0 0.62rem !important;
    min-height: 1.65rem !important;
    align-items: center !important;
}

body:not(.focus-mode) #writingZoneSection .section-heading .eyebrow {
    line-height: 1 !important;
}

body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
    top: 0.78rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

body:not(.focus-mode) #writingZoneSection .ambient-menu {
    top: 3.05rem !important;
}

/* Mobile: Sound/Light sit to the right of the Writing Desk title. */
@media (max-width: 760px) {
    body:not(.focus-mode) #writingZoneSection {
        padding-top: 1.15rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .section-heading {
        min-height: 2.15rem !important;
        margin: 0 9.1rem 0.52rem 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
        top: 0.86rem !important;
        right: 0.82rem !important;
        left: auto !important;
        transform: none !important;
        gap: 0.38rem !important;
        max-width: 8.7rem !important;
        justify-content: flex-end !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-mini-btn.focus-icon-btn {
        min-width: 4.15rem !important;
        padding: 0.48rem 0.54rem !important;
        font-size: 0.74rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-icon-btn > span:first-child {
        font-size: 0.88rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .ambient-menu {
        top: 3.15rem !important;
    }
}

/* 4. Mobile Writing Desk footer: pen name and publish align horizontally. */
@media (max-width: 640px) {
    #writingZoneSection .writer-action-line {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: stretch !important;
        gap: 0.48rem !important;
        padding-top: 0.62rem !important;
        margin-top: 0.35rem !important;
    }

    #writingZoneSection .writing-actions-left {
        width: auto !important;
        min-width: 0 !important;
        display: block !important;
    }

    #writingZoneSection #guestPenName {
        height: 2.72rem !important;
        padding: 0.68rem 0.72rem !important;
        font-size: 0.88rem !important;
    }

    #writingZoneSection #publishBtn {
        width: auto !important;
        min-width: 5.9rem !important;
        height: 2.72rem !important;
        padding: 0.64rem 0.76rem !important;
        font-size: 0.86rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        align-self: stretch !important;
    }
}

/* 6. Mobile Focus Mode: compact header, title left, X always easy to reach. */
@media (max-width: 760px) {
    body.focus-mode main {
        padding: 64px 8px 28px !important;
    }

    body.focus-mode #writingZoneSection {
        min-height: calc(100svh - 70px) !important;
        margin-top: 0 !important;
        padding: 2.52rem 0.76rem 0.76rem !important;
        border-radius: 18px !important;
        scroll-margin-top: 62px !important;
        gap: 0.5rem !important;
    }

    body.focus-mode #writingZoneSection .focus-ambient-controls,
    body.focus-mode #writingZoneSection .ambient-menu {
        display: none !important;
    }

    body.focus-mode #writingZoneSection .section-heading {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        min-height: 1.1rem !important;
        margin: 0 2.85rem 0.12rem 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    body.focus-mode #writingZoneSection .section-heading .eyebrow {
        display: block !important;
        font-size: 0.74rem !important;
        letter-spacing: 0.11em !important;
        line-height: 1 !important;
        text-align: left !important;
    }

    body.focus-mode .focus-close {
        top: 0.46rem !important;
        right: 0.5rem !important;
        width: 2.18rem !important;
        height: 2.18rem !important;
        z-index: 14 !important;
    }

    body.focus-mode #mainStoryInput {
        flex: 1 1 auto !important;
        min-height: min(56svh, 420px) !important;
        max-height: none !important;
        font-size: 1rem !important;
        line-height: 1.55 !important;
        padding: 0.86rem !important;
        resize: none !important;
        scroll-margin-bottom: 42vh !important;
    }

    body.focus-mode .writer-tools {
        margin-top: 0 !important;
        flex: 0 0 auto !important;
    }

    body.focus-mode .writer-action-line {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: stretch !important;
        gap: 0.45rem !important;
        padding-top: 0.54rem !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    body.focus-mode .writing-actions-left {
        width: auto !important;
        min-width: 0 !important;
        display: block !important;
    }

    body.focus-mode #guestPenName,
    body.focus-mode #publishBtn {
        height: 2.58rem !important;
    }

    body.focus-mode #guestPenName {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0.62rem 0.68rem !important;
        font-size: 0.86rem !important;
    }

    body.focus-mode #publishBtn {
        width: auto !important;
        min-width: 5.75rem !important;
        padding: 0.62rem 0.72rem !important;
        font-size: 0.84rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 380px) {
    body:not(.focus-mode) #writingZoneSection .section-heading {
        margin-right: 8.35rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
        max-width: 8rem !important;
        gap: 0.28rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-mini-btn.focus-icon-btn {
        min-width: 3.8rem !important;
        padding-left: 0.46rem !important;
        padding-right: 0.46rem !important;
    }

    body.focus-mode #publishBtn,
    #writingZoneSection #publishBtn {
        min-width: 5.3rem !important;
        padding-left: 0.58rem !important;
        padding-right: 0.58rem !important;
        font-size: 0.8rem !important;
    }
}


/* =========================================================
   Final 60: ribbon connection + compact headers polish
   ========================================================= */

/* Weekly Prompt: move the whole window another 20px upward. */
.compact-inspiration[aria-labelledby="weeklyPromptTitle"] {
    margin-top: -40px !important;
    margin-bottom: 1.08rem !important;
}

@media (max-width: 760px) {
    .compact-inspiration[aria-labelledby="weeklyPromptTitle"] {
        margin-top: -40px !important;
        margin-bottom: 0.95rem !important;
    }
}

/* Ribbon: no visual gap between ribbon and dropdown.
   Desktop keeps the 5px edge offset. Mobile sits flush with the right edge. */
.bookmark-menu-shell {
    --story-ribbon-width: 52px !important;
    right: 5px !important;
    width: var(--story-ribbon-width) !important;
}

.bookmark-menu-shell::before,
.bookmark-ribbon {
    width: var(--story-ribbon-width) !important;
    right: 0 !important;
}

.ribbon-panel {
    right: calc(var(--story-ribbon-width) + 5px) !important;
}

.site-nav.scrolled .bookmark-menu-shell,
#mainNav.scrolled .bookmark-menu-shell {
    --story-ribbon-width: 48px !important;
    right: 5px !important;
}

.site-nav.scrolled .ribbon-panel,
#mainNav.scrolled .ribbon-panel {
    right: calc(var(--story-ribbon-width) + 5px) !important;
}

@media (max-width: 760px) {
    .bookmark-menu-shell,
    .site-nav.scrolled .bookmark-menu-shell,
    #mainNav.scrolled .bookmark-menu-shell {
        right: 0 !important;
        left: auto !important;
        --story-ribbon-width: 46px !important;
        width: var(--story-ribbon-width) !important;
    }

    .bookmark-menu-shell::before,
    .bookmark-ribbon {
        right: 0 !important;
        left: auto !important;
        width: var(--story-ribbon-width) !important;
    }

    .ribbon-panel,
    .site-nav.scrolled .ribbon-panel,
    #mainNav.scrolled .ribbon-panel {
        right: var(--story-ribbon-width) !important;
        left: auto !important;
    }
}

/* Writing Desk main header: title left, controls centered/right, less headroom. */
body:not(.focus-mode) #writingZoneSection {
    padding-top: 2.55rem !important;
}

body:not(.focus-mode) #writingZoneSection .section-heading {
    min-height: 1.25rem !important;
    margin: 0 8.8rem 0.46rem 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

body:not(.focus-mode) #writingZoneSection .section-heading .eyebrow {
    margin: 0 !important;
    line-height: 1 !important;
}

body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
    top: 0.62rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

body:not(.focus-mode) #writingZoneSection .ambient-menu {
    top: 2.78rem !important;
}

/* Focus Mode: title sits left and aligns visually with the X button row. */
body.focus-mode #writingZoneSection {
    padding-top: 2.75rem !important;
}

body.focus-mode #writingZoneSection .section-heading {
    margin: 0 3.15rem 0.42rem 0 !important;
    min-height: 1.35rem !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

body.focus-mode #writingZoneSection .section-heading .eyebrow {
    margin: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
}

body.focus-mode .focus-close {
    top: 0.48rem !important;
    right: 0.62rem !important;
}

/* Reader Favorites and Latest Submissions: consistent title headroom. */
.leaderboard.card,
.feed.card {
    padding-top: 1.18rem !important;
}

.leaderboard.card .section-heading,
.feed.card .section-heading {
    min-height: 1.25rem !important;
    margin: 0 0 0.76rem !important;
    padding: 0 !important;
    align-items: center !important;
}

.feed.card .section-heading.split {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
}

.leaderboard.card .section-heading h2,
.feed.card .section-heading h2,
#topStoriesTitle,
#feedTitle {
    margin: 0 !important;
    line-height: 1 !important;
}

.feed.card #refreshFeedBtn {
    align-self: center !important;
}

/* Mobile versions: keep everything compact and aligned, with Sound/Light to title's right. */
@media (max-width: 760px) {
    body:not(.focus-mode) #writingZoneSection {
        padding-top: 0.95rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .section-heading {
        min-height: 1.95rem !important;
        margin: 0 8.75rem 0.42rem 0 !important;
        padding: 0 !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
        top: 0.66rem !important;
        right: 0.68rem !important;
        left: auto !important;
        transform: none !important;
        max-width: 8.4rem !important;
        gap: 0.32rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-mini-btn.focus-icon-btn {
        min-width: 3.95rem !important;
        padding: 0.46rem 0.5rem !important;
        font-size: 0.72rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .ambient-menu {
        top: 2.78rem !important;
    }

    body.focus-mode main {
        padding-top: 58px !important;
    }

    body.focus-mode #writingZoneSection {
        min-height: calc(100svh - 64px) !important;
        padding: 2.28rem 0.72rem 0.72rem !important;
        scroll-margin-top: 56px !important;
    }

    body.focus-mode #writingZoneSection .section-heading {
        min-height: 1rem !important;
        margin: 0 2.65rem 0.12rem 0 !important;
        padding: 0 !important;
    }

    body.focus-mode .focus-close {
        top: 0.38rem !important;
        right: 0.46rem !important;
        width: 2.08rem !important;
        height: 2.08rem !important;
    }

    .leaderboard.card,
    .feed.card {
        padding-top: 1.02rem !important;
    }

    .leaderboard.card .section-heading,
    .feed.card .section-heading {
        min-height: 1.15rem !important;
        margin-bottom: 0.62rem !important;
    }

    .feed.card .section-heading.split {
        gap: 0.58rem !important;
    }
}

@media (max-width: 380px) {
    body:not(.focus-mode) #writingZoneSection .section-heading {
        margin-right: 8rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
        max-width: 7.8rem !important;
        gap: 0.24rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-mini-btn.focus-icon-btn {
        min-width: 3.65rem !important;
        padding-left: 0.42rem !important;
        padding-right: 0.42rem !important;
    }
}


/* =========================================================
   Final 61: main-page header alignment + Writing Desk controls
   ========================================================= */

/* All main-page section headers: titles stay anchored to the left.
   If a header has a button, the button sits on the right. */
main .section-heading,
main .section-heading.split,
main .weekly-prompt-heading {
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

main .section-heading.split {
    justify-content: space-between !important;
}

main .section-heading > div,
main .section-heading h2,
main .section-heading p,
main .section-label-title,
main .eyebrow {
    text-align: left !important;
    margin-left: 0 !important;
}

/* Desktop Writing Desk:
   keep the title at the left and move Sound/Light down about 20px.
   The extra top space is balanced so the controls feel centered in the header area. */
body:not(.focus-mode) #writingZoneSection {
    padding-top: 3.82rem !important;
}

body:not(.focus-mode) #writingZoneSection .section-heading {
    margin: 0 9rem 0.62rem 0 !important;
    min-height: 1.35rem !important;
    justify-content: flex-start !important;
}

body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
    top: 1.88rem !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

body:not(.focus-mode) #writingZoneSection .ambient-menu {
    top: 4.05rem !important;
}

/* Reader Favorites / Latest Submissions stay consistent and left-aligned. */
.leaderboard.card .section-heading,
.feed.card .section-heading,
.feed.card .section-heading.split {
    justify-content: flex-start !important;
    text-align: left !important;
}

.feed.card .section-heading.split {
    justify-content: space-between !important;
}

.feed.card .section-heading.split > div {
    min-width: 0 !important;
}

/* Mobile:
   Writing Desk title remains at the far left.
   Sound/Light move to the right of the header without pushing the title over. */
@media (max-width: 760px) {
    main .section-heading,
    main .section-heading.split,
    main .weekly-prompt-heading {
        justify-content: flex-start !important;
        text-align: left !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    main .section-heading.split {
        justify-content: space-between !important;
    }

    body:not(.focus-mode) #writingZoneSection {
        padding-top: 2.95rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .section-heading {
        margin: 0 8.7rem 0.52rem 0 !important;
        min-height: 1.7rem !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding-left: 0 !important;
    }

    body:not(.focus-mode) #writingZoneSection .section-heading .eyebrow {
        margin-left: 0 !important;
        transform: none !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
        top: 1.36rem !important;
        right: 0.68rem !important;
        left: auto !important;
        transform: none !important;
        max-width: 8.35rem !important;
        justify-content: flex-end !important;
    }

    body:not(.focus-mode) #writingZoneSection .ambient-menu {
        top: 3.58rem !important;
    }

    /* Mobile Focus Mode: title stays hard-left, X remains right. */
    body.focus-mode #writingZoneSection .section-heading {
        margin: 0 2.7rem 0.12rem 0 !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding-left: 0 !important;
    }

    body.focus-mode #writingZoneSection .section-heading .eyebrow {
        margin-left: 0 !important;
        transform: none !important;
        text-align: left !important;
    }

    .leaderboard.card .section-heading,
    .feed.card .section-heading,
    .feed.card .section-heading.split {
        justify-content: flex-start !important;
        text-align: left !important;
        padding-left: 0 !important;
    }

    .feed.card .section-heading.split {
        justify-content: space-between !important;
    }
}

@media (max-width: 380px) {
    body:not(.focus-mode) #writingZoneSection .section-heading {
        margin-right: 8.05rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
        right: 0.52rem !important;
        max-width: 7.75rem !important;
    }
}


/* =========================================================
   Final 62: locked-left section titles and balanced Writing Desk controls
   ========================================================= */

/* Main-page headers: titles lock to the left edge of their own card.
   Headers with buttons keep the button on the right; headers without buttons
   simply stay left. */
main .section-heading,
main .weekly-prompt-heading {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

main .section-heading.split {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

main .section-heading > div {
    margin-left: 0 !important;
    padding-left: 0 !important;
    min-width: 0 !important;
}

main .section-heading h2,
main .section-heading p,
main .section-heading .eyebrow,
main .section-label-title {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    transform: none !important;
}

/* Desktop Writing Desk:
   Keep title in its original left position. Sound/Light are absolute controls,
   lowered about 20px from the earlier desktop position and vertically balanced
   in the header space. */
body:not(.focus-mode) #writingZoneSection {
    position: relative !important;
    padding-top: 3.72rem !important;
}

body:not(.focus-mode) #writingZoneSection .section-heading {
    width: calc(100% - 9.25rem) !important;
    max-width: calc(100% - 9.25rem) !important;
    margin: 0 0 0.58rem 0 !important;
    padding: 0 !important;
    min-height: 1.3rem !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
}

body:not(.focus-mode) #writingZoneSection .section-heading .eyebrow {
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    text-align: left !important;
}

body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
    position: absolute !important;
    top: 1.72rem !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
}

body:not(.focus-mode) #writingZoneSection .ambient-menu {
    top: 3.92rem !important;
}

/* Reader Favorites and Latest Submissions share the same headroom rhythm. */
.leaderboard.card,
.feed.card {
    padding-top: 1.12rem !important;
}

.leaderboard.card .section-heading,
.feed.card .section-heading,
.feed.card .section-heading.split {
    margin: 0 0 0.72rem 0 !important;
    padding: 0 !important;
    min-height: 1.25rem !important;
}

.feed.card .section-heading.split > div {
    flex: 1 1 auto !important;
}

.feed.card #refreshFeedBtn {
    flex: 0 0 auto !important;
}

/* Mobile:
   Writing Desk title remains at the original far-left position.
   Sound/Light float to the right of the header without moving the title. */
@media (max-width: 760px) {
    body:not(.focus-mode) #writingZoneSection {
        position: relative !important;
        padding-top: 2.86rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .section-heading {
        width: calc(100% - 8.65rem) !important;
        max-width: calc(100% - 8.65rem) !important;
        margin: 0 0 0.48rem 0 !important;
        padding: 0 !important;
        min-height: 1.72rem !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: left !important;
    }

    body:not(.focus-mode) #writingZoneSection .section-heading .eyebrow {
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        text-align: left !important;
        line-height: 1 !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
        position: absolute !important;
        top: 1.18rem !important;
        right: 0.68rem !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        gap: 0.32rem !important;
        max-width: 8.25rem !important;
        justify-content: flex-end !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-mini-btn.focus-icon-btn {
        min-width: 3.92rem !important;
        padding: 0.46rem 0.5rem !important;
        font-size: 0.72rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .ambient-menu {
        top: 3.32rem !important;
    }

    /* Main-page headers on mobile: title left, optional button right. */
    main .section-heading,
    main .weekly-prompt-heading {
        margin-left: 0 !important;
        padding-left: 0 !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    main .section-heading.split {
        justify-content: space-between !important;
    }

    .leaderboard.card,
    .feed.card {
        padding-top: 1rem !important;
    }

    .leaderboard.card .section-heading,
    .feed.card .section-heading,
    .feed.card .section-heading.split {
        margin-bottom: 0.62rem !important;
        min-height: 1.18rem !important;
    }

    /* Mobile Focus Mode: title stays left; X owns the right side. */
    body.focus-mode #writingZoneSection .section-heading {
        width: calc(100% - 2.8rem) !important;
        max-width: calc(100% - 2.8rem) !important;
        margin: 0 0 0.12rem 0 !important;
        padding: 0 !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    body.focus-mode #writingZoneSection .section-heading .eyebrow {
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        text-align: left !important;
    }
}

@media (max-width: 380px) {
    body:not(.focus-mode) #writingZoneSection .section-heading {
        width: calc(100% - 8rem) !important;
        max-width: calc(100% - 8rem) !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
        right: 0.52rem !important;
        max-width: 7.7rem !important;
        gap: 0.24rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-mini-btn.focus-icon-btn {
        min-width: 3.62rem !important;
        padding-left: 0.42rem !important;
        padding-right: 0.42rem !important;
    }
}


/* =========================================================
   Final 63: persistent prompt placeholder + eraser clear control
   ========================================================= */

/* The Weekly Prompt now stays as the textarea example text whenever the
   writing area is empty. This wrapper lets the eraser sit inside the field. */
.story-input-wrap {
    position: relative;
    width: 100%;
}

.story-input-wrap #mainStoryInput {
    display: block;
    padding-right: 3.25rem !important;
}

.textarea-eraser {
    position: absolute;
    right: 0.78rem;
    bottom: 0.78rem;
    display: inline-grid;
    place-items: center;
    width: 2.18rem;
    height: 2.18rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(223, 191, 131, 0.26);
    background: rgba(14, 9, 6, 0.50);
    color: var(--paper-soft);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
    backdrop-filter: blur(8px);
    z-index: 5;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.textarea-eraser:hover {
    transform: translateY(-1px);
    background: rgba(223, 191, 131, 0.12);
    border-color: rgba(223, 191, 131, 0.42);
}

.textarea-eraser svg {
    width: 1.08rem;
    height: 1.08rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.clear-story-modal {
    text-align: center;
}

.clear-story-icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    color: var(--accent-2);
    background: rgba(215, 165, 111, 0.10);
    border: 1px solid rgba(215, 165, 111, 0.24);
}

.clear-story-icon svg {
    width: 1.42rem;
    height: 1.42rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.clear-story-modal .modal-actions-row {
    justify-content: center;
    margin-top: 1rem;
}

body.candle-lit .textarea-eraser {
    color: #3d3024 !important;
    background: rgba(255, 252, 241, 0.58);
    border-color: rgba(80,55,38,0.22);
}

@media (max-width: 760px) {
    .story-input-wrap #mainStoryInput {
        padding-right: 3rem !important;
    }

    .textarea-eraser {
        right: 0.62rem;
        bottom: 0.62rem;
        width: 2.04rem;
        height: 2.04rem;
    }

    .textarea-eraser svg {
        width: 1rem;
        height: 1rem;
    }
}


/* =========================================================
   Final 64: ambient sound repair
   ========================================================= */


/* =========================================================
   Final 65: feather prompt button glow + glass shine
   ========================================================= */

/* Make the feather prompt button more inviting on desktop without changing
   the weekly prompt layout too much. */
.prompt-write-btn {
    position: relative !important;
    overflow: hidden !important;
    width: 2.65rem !important;
    height: 2.65rem !important;
    min-width: 2.65rem !important;
    border-radius: 50% !important;
    isolation: isolate;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.18),
        0 0 0 3px rgba(215, 165, 111, 0.08),
        0 0 24px rgba(215, 165, 111, 0.16) !important;
    animation: featherInvitePulse 4.8s ease-in-out infinite;
}

.prompt-write-btn::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.32), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.20), transparent 42%);
    opacity: 0.72;
    pointer-events: none;
    z-index: 0;
}

.prompt-write-btn::after {
    content: "";
    position: absolute;
    top: -45%;
    left: -85%;
    width: 58%;
    height: 190%;
    transform: rotate(28deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.12),
        rgba(255,255,255,0.52),
        rgba(255,255,255,0.10),
        transparent
    );
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: featherGlassShine 5.4s ease-in-out infinite;
}

.prompt-write-btn span {
    position: relative;
    z-index: 2;
    font-size: 1.18rem;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.18));
    transition: transform 180ms ease, filter 180ms ease;
}

.prompt-write-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.22),
        0 0 0 4px rgba(215, 165, 111, 0.10),
        0 0 34px rgba(215, 165, 111, 0.22) !important;
}

.prompt-write-btn:hover span {
    transform: translateY(-0.07em) rotate(-15deg) scale(1.06);
}

.prompt-write-btn:active {
    transform: translateY(0) scale(0.98);
}

@keyframes featherGlassShine {
    0%, 58% {
        left: -85%;
        opacity: 0;
    }
    66% {
        opacity: 0.8;
    }
    78% {
        left: 128%;
        opacity: 0;
    }
    100% {
        left: 128%;
        opacity: 0;
    }
}

@keyframes featherInvitePulse {
    0%, 100% {
        box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.18),
            0 0 0 3px rgba(215, 165, 111, 0.08),
            0 0 24px rgba(215, 165, 111, 0.16);
    }
    50% {
        box-shadow:
            0 12px 26px rgba(0, 0, 0, 0.20),
            0 0 0 4px rgba(215, 165, 111, 0.10),
            0 0 30px rgba(215, 165, 111, 0.22);
    }
}

/* Keep it slightly smaller on mobile so the prompt row stays tidy. */
@media (max-width: 640px) {
    .prompt-write-btn {
        width: 2.26rem !important;
        height: 2.26rem !important;
        min-width: 2.26rem !important;
    }

    .prompt-write-btn span {
        font-size: 1.04rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prompt-write-btn,
    .prompt-write-btn::after {
        animation: none !important;
    }
}


/* =========================================================
   Final 66: locked-left main titles, stable Writing Desk title
   ========================================================= */

/* Main-page box titles: same left anchor, same basic behavior.
   Latest Submissions/feed is intentionally excluded per request. */
main > section:not(.feed) > .section-heading,
main > section:not(.feed) > .weekly-prompt-heading,
main > section:not(.feed) > .section-heading.split {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

main > section:not(.feed) > .section-heading > div,
main > section:not(.feed) > .section-heading h2,
main > section:not(.feed) > .section-heading p,
main > section:not(.feed) > .section-heading .eyebrow,
main > section:not(.feed) > .section-label-title {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    transform: none !important;
}

/* Writing Desk: lock the title to the left edge of the content area.
   Do not reserve right-side space in the title row; the Sound/Light controls
   float independently, so they cannot push or visually center the title. */
body:not(.focus-mode) #writingZoneSection {
    position: relative !important;
    padding-top: 4.35rem !important;
}

body:not(.focus-mode) #writingZoneSection > .section-heading,
body:not(.focus-mode) #writingZoneSection > .section-heading.split {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 0 0.58rem 0 !important;
    padding: 0 !important;
    min-height: 1.28rem !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    transform: none !important;
}

body:not(.focus-mode) #writingZoneSection > .section-heading > div {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    transform: none !important;
}

body:not(.focus-mode) #writingZoneSection > .section-heading .eyebrow {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
    transform: none !important;
    white-space: nowrap !important;
}

/* Desktop controls: lower Sound/Light about 20px from the earlier placement,
   with comfortable top/bottom breathing room inside the Writing Desk header. */
body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
    position: absolute !important;
    top: 2.08rem !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
}

/* Keep their popups attached to the lowered controls. */
body:not(.focus-mode) #writingZoneSection .ambient-menu {
    top: 4.32rem !important;
}

/* Reader Favorites should match the left-title behavior. Do not touch
   Latest Submissions/feed title or its refresh button layout. */
.leaderboard.card > .section-heading {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 0.72rem 0 !important;
    padding: 0 !important;
    min-height: 1.25rem !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
}

.leaderboard.card > .section-heading h2 {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    transform: none !important;
    line-height: 1 !important;
}

/* Mobile/narrow: the Writing Desk title stays hard-left.
   Sound/Light move to the right of that header without changing title layout. */
@media (max-width: 760px) {
    main > section:not(.feed) > .section-heading,
    main > section:not(.feed) > .weekly-prompt-heading,
    main > section:not(.feed) > .section-heading.split {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    body:not(.focus-mode) #writingZoneSection {
        padding-top: 3.02rem !important;
    }

    body:not(.focus-mode) #writingZoneSection > .section-heading,
    body:not(.focus-mode) #writingZoneSection > .section-heading.split {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 0.48rem 0 !important;
        padding: 0 !important;
        min-height: 1.64rem !important;
        justify-content: flex-start !important;
        text-align: left !important;
        transform: none !important;
    }

    body:not(.focus-mode) #writingZoneSection > .section-heading > div,
    body:not(.focus-mode) #writingZoneSection > .section-heading .eyebrow {
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        transform: none !important;
        white-space: nowrap !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
        position: absolute !important;
        top: 1.28rem !important;
        right: 0.68rem !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        max-width: 8.3rem !important;
        justify-content: flex-end !important;
        gap: 0.32rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-mini-btn.focus-icon-btn {
        min-width: 3.92rem !important;
        padding: 0.46rem 0.5rem !important;
        font-size: 0.72rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .ambient-menu {
        top: 3.48rem !important;
    }

    /* Focus Mode mobile: title still locked left, X controls the right edge. */
    body.focus-mode #writingZoneSection > .section-heading,
    body.focus-mode #writingZoneSection > .section-heading.split {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 0.12rem 0 !important;
        padding: 0 !important;
        justify-content: flex-start !important;
        text-align: left !important;
        transform: none !important;
    }

    body.focus-mode #writingZoneSection > .section-heading > div,
    body.focus-mode #writingZoneSection > .section-heading .eyebrow {
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        transform: none !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 380px) {
    body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
        right: 0.52rem !important;
        max-width: 7.7rem !important;
        gap: 0.24rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-mini-btn.focus-icon-btn {
        min-width: 3.62rem !important;
        padding-left: 0.42rem !important;
        padding-right: 0.42rem !important;
    }
}


/* =========================================================
   Final 67: feather button enters mobile Focus Mode
   ========================================================= */


/* =========================================================
   Final 68: dropdown sits flush against ribbon
   ========================================================= */

/* Move the dropdown panel toward the ribbon so there is no visible gap.
   A tiny 2px overlap prevents shadows/borders from creating a hairline seam. */
.ribbon-panel,
.site-nav.scrolled .ribbon-panel,
#mainNav.scrolled .ribbon-panel {
    right: calc(var(--story-ribbon-width) - 2px) !important;
}

@media (max-width: 760px) {
    .ribbon-panel,
    .site-nav.scrolled .ribbon-panel,
    #mainNav.scrolled .ribbon-panel {
        right: calc(var(--story-ribbon-width) - 2px) !important;
    }
}


/* =========================================================
   Final 69: structural Writing Desk header + mobile YouTube pause respect
   ========================================================= */

/* New structure:
   .writing-desk-title and .writing-desk-controls are siblings, so controls
   can never push the title toward the center. */
#writingZoneSection .writing-desk-header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 3.25rem !important;
    margin: 0 0 0.65rem 0 !important;
    padding: 0 !important;
}

#writingZoneSection .writing-desk-title {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    transform: none !important;
    min-width: 0 !important;
    z-index: 2 !important;
}

#writingZoneSection .writing-desk-title .eyebrow {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    transform: none !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

/* Desktop: Sound/Light stay in the familiar centered header position,
   moved down within the larger header space, without affecting title layout. */
#writingZoneSection .writing-desk-controls.focus-ambient-controls {
    grid-column: 2 !important;
    justify-self: center !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.62rem !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    z-index: 7 !important;
}

body:not(.focus-mode) #writingZoneSection {
    padding-top: 1.45rem !important;
}

body:not(.focus-mode) #writingZoneSection .ambient-menu {
    top: 4.65rem !important;
}

/* Focus mode uses the same separate header; X owns the right side. */
body.focus-mode #writingZoneSection .writing-desk-header {
    grid-template-columns: 1fr auto 2.75rem !important;
    min-height: 2.55rem !important;
    margin-bottom: 0.42rem !important;
}

body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls {
    grid-column: 2 !important;
}

/* Kill old Writing Desk section-heading rules inside this card.
   The title now lives in .writing-desk-title. */
#writingZoneSection > .section-heading,
#writingZoneSection > .section-heading.split {
    display: none !important;
}

/* Mobile and narrow desktop:
   Title stays hard-left. Controls sit on the right side of the same header
   and never reserve/move the title. */
@media (max-width: 760px) {
    #writingZoneSection .writing-desk-header {
        grid-template-columns: minmax(0, 1fr) auto !important;
        min-height: 2.35rem !important;
        margin-bottom: 0.48rem !important;
    }

    #writingZoneSection .writing-desk-title {
        grid-column: 1 !important;
        justify-self: start !important;
        text-align: left !important;
        max-width: calc(100vw - 12rem) !important;
    }

    #writingZoneSection .writing-desk-controls.focus-ambient-controls {
        grid-column: 2 !important;
        justify-self: end !important;
        gap: 0.32rem !important;
        max-width: 8.3rem !important;
    }

    #writingZoneSection .writing-desk-controls .focus-mini-btn.focus-icon-btn {
        min-width: 3.92rem !important;
        padding: 0.46rem 0.5rem !important;
        font-size: 0.72rem !important;
    }

    body:not(.focus-mode) #writingZoneSection {
        padding-top: 1rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .ambient-menu {
        top: 3.5rem !important;
    }

    /* In mobile Focus Mode, remove Sound/Light from the top so the writing
       area and X stay clean above the keyboard. */
    body.focus-mode #writingZoneSection .writing-desk-header {
        grid-template-columns: 1fr 2.6rem !important;
        min-height: 1.55rem !important;
        margin-bottom: 0.16rem !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls,
    body.focus-mode #writingZoneSection .ambient-menu {
        display: none !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-title {
        max-width: calc(100vw - 5.5rem) !important;
    }
}

@media (max-width: 380px) {
    #writingZoneSection .writing-desk-title {
        max-width: calc(100vw - 11.2rem) !important;
    }

    #writingZoneSection .writing-desk-controls.focus-ambient-controls {
        max-width: 7.7rem !important;
        gap: 0.24rem !important;
    }

    #writingZoneSection .writing-desk-controls .focus-mini-btn.focus-icon-btn {
        min-width: 3.62rem !important;
        padding-left: 0.42rem !important;
        padding-right: 0.42rem !important;
    }
}


/* =========================================================
   Final 70: tighter card headroom + centered Writing Desk controls
   ========================================================= */

/* Use Reader Favorites as the spacing model for the main cards. 
   Latest Submissions keeps its existing internal layout/refresh behavior. */
main > section.card {
    padding-top: 1.12rem !important;
}

main > section.card > .section-heading,
main > section.card > .weekly-prompt-heading {
    min-height: 1.25rem !important;
    margin: 0 0 0.72rem 0 !important;
    padding: 0 !important;
    align-items: center !important;
}

/* Writing Desk: compact header like Reader Favorites, with the title left
   and Sound/Light vertically centered on the same header line. */
body:not(.focus-mode) #writingZoneSection {
    padding-top: 1.12rem !important;
}

#writingZoneSection .writing-desk-header {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    min-height: 2.45rem !important;
    margin: 0 0 0.72rem 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#writingZoneSection .writing-desk-title {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

#writingZoneSection .writing-desk-title .eyebrow {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    transform: none !important;
}

/* Desktop controls sit centered in the header row, not below it. */
body:not(.focus-mode) #writingZoneSection .writing-desk-controls.focus-ambient-controls {
    grid-column: 2 !important;
    position: static !important;
    justify-self: center !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.62rem !important;
    margin: 0 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
}

body:not(.focus-mode) #writingZoneSection .ambient-menu {
    top: 3.85rem !important;
}

/* Keep Reader Favorites and similar headers consistent. */
.leaderboard.card {
    padding-top: 1.12rem !important;
}

.leaderboard.card > .section-heading {
    min-height: 1.25rem !important;
    margin: 0 0 0.72rem 0 !important;
}

/* Mobile: title remains left; Sound/Light sit on the same header line at right. */
@media (max-width: 760px) {
    main > section.card {
        padding-top: 1rem !important;
    }

    main > section.card > .section-heading,
    main > section.card > .weekly-prompt-heading {
        min-height: 1.18rem !important;
        margin-bottom: 0.62rem !important;
    }

    body:not(.focus-mode) #writingZoneSection {
        padding-top: 1rem !important;
    }

    #writingZoneSection .writing-desk-header {
        grid-template-columns: minmax(0, 1fr) auto !important;
        min-height: 2.25rem !important;
        margin-bottom: 0.62rem !important;
    }

    #writingZoneSection .writing-desk-title {
        grid-column: 1 !important;
        justify-self: start !important;
        max-width: calc(100vw - 11rem) !important;
    }

    body:not(.focus-mode) #writingZoneSection .writing-desk-controls.focus-ambient-controls {
        grid-column: 2 !important;
        position: static !important;
        justify-self: end !important;
        align-self: center !important;
        max-width: 8.35rem !important;
        gap: 0.32rem !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }

    body:not(.focus-mode) #writingZoneSection .writing-desk-controls .focus-mini-btn.focus-icon-btn {
        min-width: 3.92rem !important;
        padding: 0.46rem 0.5rem !important;
        font-size: 0.72rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .ambient-menu {
        top: 3.55rem !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-header {
        min-height: 1.55rem !important;
        margin-bottom: 0.16rem !important;
    }
}

@media (max-width: 380px) {
    #writingZoneSection .writing-desk-title {
        max-width: calc(100vw - 10.4rem) !important;
    }

    body:not(.focus-mode) #writingZoneSection .writing-desk-controls.focus-ambient-controls {
        max-width: 7.7rem !important;
        gap: 0.24rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .writing-desk-controls .focus-mini-btn.focus-icon-btn {
        min-width: 3.62rem !important;
        padding-left: 0.42rem !important;
        padding-right: 0.42rem !important;
    }
}


/* =========================================================
   Final 71: feather focus entry does not auto-play YouTube
   ========================================================= */


/* =========================================================
   Final 72: mobile Focus Mode duplicate title + compact header
   ========================================================= */

/* The visible title is the small <p class="eyebrow">Writing desk</p>.
   Keep the hidden h2 hidden everywhere; older mobile focus rules were making
   it visible again and creating the doubled title. */
#writingZoneSection #writeTitle {
    display: none !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* Compact the mobile focus header so the writing area starts closer to the top. */
@media (max-width: 760px) {
    body.focus-mode main {
        padding-top: 48px !important;
    }

    body.focus-mode #writingZoneSection {
        padding-top: 1.72rem !important;
        min-height: calc(100svh - 54px) !important;
        scroll-margin-top: 48px !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-header {
        min-height: 1.08rem !important;
        margin: 0 0 0.08rem 0 !important;
        padding: 0 !important;
        grid-template-columns: 1fr 2.2rem !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-title {
        align-self: center !important;
        justify-self: start !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: calc(100vw - 4.9rem) !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-title .eyebrow {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.11em !important;
        text-align: left !important;
        transform: none !important;
        white-space: nowrap !important;
    }

    body.focus-mode .focus-close {
        top: 0.28rem !important;
        right: 0.38rem !important;
        width: 1.95rem !important;
        height: 1.95rem !important;
        font-size: 1.15rem !important;
        z-index: 20 !important;
    }

    body.focus-mode #mainStoryInput {
        min-height: min(60svh, 440px) !important;
        padding-top: 0.82rem !important;
    }
}

@media (max-width: 380px) {
    body.focus-mode #writingZoneSection {
        padding-top: 1.62rem !important;
    }

    body.focus-mode .focus-close {
        top: 0.24rem !important;
        right: 0.34rem !important;
        width: 1.88rem !important;
        height: 1.88rem !important;
    }
}


/* =========================================================
   Final 73: Sound/Light flush right and raised in Writing Desk
   ========================================================= */

/* Main Writing Desk only:
   Sound/Light now sit flush against the right edge of the Writing Desk box,
   on the title/header line, and raised about 30px from the prior position. */
body:not(.focus-mode) #writingZoneSection {
    position: relative !important;
    padding-top: 1rem !important;
}

body:not(.focus-mode) #writingZoneSection .writing-desk-header {
    position: relative !important;
    display: block !important;
    min-height: 2.1rem !important;
    margin: 0 0 0.58rem 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

body:not(.focus-mode) #writingZoneSection .writing-desk-title {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: auto !important;
    max-width: calc(100% - 9.4rem) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    transform: none !important;
}

body:not(.focus-mode) #writingZoneSection .writing-desk-title .eyebrow {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
    transform: none !important;
    white-space: nowrap !important;
}

/* Raised and right-flush controls. */
body:not(.focus-mode) #writingZoneSection .writing-desk-controls.focus-ambient-controls {
    position: absolute !important;
    top: -0.34rem !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.46rem !important;
    width: auto !important;
    max-width: 9rem !important;
    margin: 0 !important;
    z-index: 8 !important;
}

/* Keep popups attached to the raised/right controls. */
body:not(.focus-mode) #writingZoneSection .ambient-menu {
    top: 2.55rem !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
}

/* Narrow/mobile: same rule, still flush right, title remains left. */
@media (max-width: 760px) {
    body:not(.focus-mode) #writingZoneSection {
        padding-top: 0.92rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .writing-desk-header {
        min-height: 2rem !important;
        margin-bottom: 0.52rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .writing-desk-title {
        max-width: calc(100% - 8.6rem) !important;
    }

    body:not(.focus-mode) #writingZoneSection .writing-desk-controls.focus-ambient-controls {
        top: -0.28rem !important;
        right: 0 !important;
        left: auto !important;
        transform: none !important;
        max-width: 8.25rem !important;
        gap: 0.3rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .writing-desk-controls .focus-mini-btn.focus-icon-btn {
        min-width: 3.9rem !important;
        padding: 0.46rem 0.5rem !important;
        font-size: 0.72rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .ambient-menu {
        top: 2.48rem !important;
        right: 0 !important;
        left: auto !important;
        transform: none !important;
    }
}

@media (max-width: 380px) {
    body:not(.focus-mode) #writingZoneSection .writing-desk-title {
        max-width: calc(100% - 7.95rem) !important;
    }

    body:not(.focus-mode) #writingZoneSection .writing-desk-controls.focus-ambient-controls {
        max-width: 7.7rem !important;
        gap: 0.22rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .writing-desk-controls .focus-mini-btn.focus-icon-btn {
        min-width: 3.6rem !important;
        padding-left: 0.42rem !important;
        padding-right: 0.42rem !important;
    }
}


/* =========================================================
   Final 74: weekly prompt title lowered slightly
   ========================================================= */

.weekly-prompt-heading,
.compact-inspiration .weekly-prompt-heading {
    transform: translateY(10px) !important;
}

.compact-inspiration .prompt-strip {
    margin-top: 0.75rem !important;
}

@media (max-width: 760px) {
    .weekly-prompt-heading,
    .compact-inspiration .weekly-prompt-heading {
        transform: translateY(10px) !important;
    }

    .compact-inspiration .prompt-strip {
        margin-top: 0.72rem !important;
    }
}


/* =========================================================
   Final 75: prompt top trim + writing title nudge + no focus autoplay
   ========================================================= */

/* Shorten Weekly Prompt box from the top by about 15px. */
.compact-inspiration[aria-labelledby="weeklyPromptTitle"] {
    padding-top: 0.45rem !important;
}

/* Keep the title itself in its slightly lowered position from the previous pass. */
.weekly-prompt-heading,
.compact-inspiration .weekly-prompt-heading {
    transform: translateY(10px) !important;
}

/* Writing Desk title: keep locked left, but nudge the text down 5px
   so it sits more visually centered against the Sound/Light controls. */
#writingZoneSection .writing-desk-title .eyebrow {
    position: relative !important;
    top: 5px !important;
}

/* Keep the overall Writing Desk header compact after the title nudge. */
#writingZoneSection .writing-desk-header {
    min-height: 2.24rem !important;
}

@media (max-width: 760px) {
    .compact-inspiration[aria-labelledby="weeklyPromptTitle"] {
        padding-top: 0.42rem !important;
    }

    #writingZoneSection .writing-desk-title .eyebrow {
        top: 5px !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-title .eyebrow {
        top: 3px !important;
    }
}


/* =========================================================
   Final 76: archive ribbon/dropdown + compact Focus Mode header
   ========================================================= */

/*
   ARCHIVED FOR LATER:
   The storybook ribbon/dropdown menu code is intentionally preserved in
   index.html/script.js/style.css for possible future use, but hidden for now.
   To restore later, remove this block and revisit the bookmark menu styles.
*/
.bookmark-menu-shell,
.ribbon-panel,
.bookmark-ribbon,
#bookmarkMenuShell,
#ribbonPanel {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Focus Mode desktop/tablet:
   Bring the top of the outer writing box down tighter, then align the X button
   to the same visual level as Sound/Light. The header area now uses the same
   breathing room above the buttons as below them before the writing box starts. */
body.focus-mode #writingZoneSection {
    padding-top: 1.05rem !important;
}

body.focus-mode #writingZoneSection .writing-desk-header {
    min-height: 2.35rem !important;
    margin: 0 0 0.72rem 0 !important;
    padding: 0 !important;
    align-items: center !important;
}

body.focus-mode #writingZoneSection .writing-desk-title {
    align-self: center !important;
}

body.focus-mode #writingZoneSection .writing-desk-title .eyebrow {
    top: 0 !important;
    line-height: 1 !important;
}

/* Sound/Light remain centered in the header row. */
body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls {
    align-self: center !important;
    transform: none !important;
    margin: 0 !important;
}

/* X button aligned to Sound/Light row instead of floating high in the corner. */
body.focus-mode .focus-close {
    top: 1.05rem !important;
    right: 1.05rem !important;
    width: 2.28rem !important;
    height: 2.28rem !important;
    line-height: 1 !important;
    z-index: 20 !important;
}

/* Popups stay attached to the adjusted Focus Mode header. */
body.focus-mode #writingZoneSection .ambient-menu {
    top: 3.8rem !important;
}

/* Mobile Focus Mode keeps the compact header and X close to the writing area. */
@media (max-width: 760px) {
    body.focus-mode #writingZoneSection {
        padding-top: 0.82rem !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-header {
        min-height: 1.28rem !important;
        margin: 0 0 0.18rem 0 !important;
        padding: 0 !important;
    }

    body.focus-mode .focus-close {
        top: 0.72rem !important;
        right: 0.72rem !important;
        width: 1.95rem !important;
        height: 1.95rem !important;
    }

    body.focus-mode #mainStoryInput {
        min-height: min(62svh, 455px) !important;
    }
}


/* =========================================================
   Final 77: YouTube autoplay fully disabled
   ========================================================= */

/*
   YouTube no longer auto-plays after focus mode, X close, outside clicks,
   ambient sound changes, or volume changes. Playback is now user-controlled
   from the embedded YouTube player.
*/


/* =========================================================
   Final 78: active Sound/Light states + spacing refinements
   ========================================================= */

/* Sound/Light match the X button height and stay visually consistent. */
#writingZoneSection .writing-desk-controls .focus-mini-btn.focus-icon-btn,
#writingZoneSection .focus-mini-btn.focus-icon-btn {
    height: 2.28rem !important;
    min-height: 2.28rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
}

/* Active sound or light selection keeps the parent trigger green until cleared. */
#soundEffectsBtn.has-active-effect,
#lightingEffectsBtn.has-active-effect,
#soundEffectsBtn[aria-pressed="true"],
#lightingEffectsBtn[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--sage-soft), var(--sage)) !important;
    color: #0d0d0b !important;
    border-color: rgba(146, 170, 103, 0.78) !important;
    box-shadow:
        0 8px 18px rgba(0,0,0,0.16),
        0 0 0 3px rgba(139, 162, 99, 0.10),
        0 0 24px rgba(139, 162, 99, 0.16) !important;
}

#soundEffectsBtn.has-active-effect span,
#lightingEffectsBtn.has-active-effect span,
#soundEffectsBtn[aria-pressed="true"] span,
#lightingEffectsBtn[aria-pressed="true"] span {
    color: #0d0d0b !important;
}

/* Writing Desk title on main page: move down 5px while staying left. */
body:not(.focus-mode) #writingZoneSection .writing-desk-title .eyebrow {
    position: relative !important;
    top: 5px !important;
}

/* Latest Submissions outside box: shorten from top by about 5px. */
.feed.card {
    padding-top: 0.82rem !important;
}

/* Footer contents move up 5px while the footer box itself stays put. */
.footer-content-polished,
.footer-content {
    transform: translateY(-5px) !important;
}

/* Mobile sizes keep same relationship with X button. */
@media (max-width: 760px) {
    #writingZoneSection .writing-desk-controls .focus-mini-btn.focus-icon-btn,
    #writingZoneSection .focus-mini-btn.focus-icon-btn {
        height: 1.95rem !important;
        min-height: 1.95rem !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body:not(.focus-mode) #writingZoneSection .writing-desk-title .eyebrow {
        top: 5px !important;
    }

    .feed.card {
        padding-top: 0.70rem !important;
    }
}


/* =========================================================
   Final 79: Weekly Prompt + Writing Desk micro-spacing
   ========================================================= */

/* Weekly Prompt outside box: expand top by about 3px. */
.compact-inspiration[aria-labelledby="weeklyPromptTitle"] {
    padding-top: calc(0.45rem + 3px) !important;
}

@media (max-width: 760px) {
    .compact-inspiration[aria-labelledby="weeklyPromptTitle"] {
        padding-top: calc(0.42rem + 3px) !important;
    }
}

/* Weekly Prompt text on main page: move up about 5px. */
#weeklyPromptText {
    position: relative !important;
    top: -5px !important;
}

/* Writing Desk title text on main page: move 3px farther down. */
body:not(.focus-mode) #writingZoneSection .writing-desk-title .eyebrow {
    position: relative !important;
    top: 8px !important;
}

@media (max-width: 760px) {
    body:not(.focus-mode) #writingZoneSection .writing-desk-title .eyebrow {
        top: 8px !important;
    }
}


/* =========================================================
   Final 80: Weekly Prompt text raised 3px more
   ========================================================= */

#weeklyPromptText {
    position: relative !important;
    top: -8px !important;
}


/* =========================================================
   Final 81: main page content raised 15px
   ========================================================= */

/* Move all main-page boxes/elements up together without changing the header/footer. */
main {
    margin-top: -15px !important;
}

@media (max-width: 760px) {
    main {
        margin-top: -15px !important;
    }
}


/* =========================================================
   Final 82: Weekly Prompt text raised 3px more
   ========================================================= */

#weeklyPromptText {
    position: relative !important;
    top: -11px !important;
}


/* =========================================================
   Final 83: raise Sound/Light/X 3px + Weekly Prompt text 3px
   ========================================================= */

/* Weekly Prompt text up another 3px. */
#weeklyPromptText {
    position: relative !important;
    top: -14px !important;
}

/* Main Writing Desk Sound/Light controls up about 3px. */
body:not(.focus-mode) #writingZoneSection .writing-desk-controls.focus-ambient-controls {
    top: calc(-0.34rem - 3px) !important;
}

/* Focus Mode Sound/Light controls up about 3px when visible on desktop/tablet. */
body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls {
    position: relative !important;
    top: -3px !important;
}

/* X button up about 3px. */
body.focus-mode .focus-close {
    top: calc(1.05rem - 3px) !important;
}

@media (max-width: 760px) {
    body:not(.focus-mode) #writingZoneSection .writing-desk-controls.focus-ambient-controls {
        top: calc(-0.28rem - 3px) !important;
    }

    body.focus-mode .focus-close {
        top: calc(0.72rem - 3px) !important;
    }
}

@media (max-width: 380px) {
    body.focus-mode .focus-close {
        top: calc(0.24rem - 3px) !important;
    }
}


/* =========================================================
   Final 84: correct focus-only button lift + prompt title/text correction
   ========================================================= */

/* Revert the accidental main-page Writing Desk Sound/Light movement.
   Keep the main Writing Desk controls exactly where they were before Final 83. */
body:not(.focus-mode) #writingZoneSection .writing-desk-controls.focus-ambient-controls {
    top: -0.34rem !important;
}

@media (max-width: 760px) {
    body:not(.focus-mode) #writingZoneSection .writing-desk-controls.focus-ambient-controls {
        top: -0.28rem !important;
    }
}

/* Focus Mode only: Sound/Light and X stay raised about 3px. */
body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls {
    position: relative !important;
    top: -3px !important;
}

body.focus-mode .focus-close {
    top: calc(1.05rem - 3px) !important;
}

@media (max-width: 760px) {
    body.focus-mode .focus-close {
        top: calc(0.72rem - 3px) !important;
    }
}

@media (max-width: 380px) {
    body.focus-mode .focus-close {
        top: calc(0.24rem - 3px) !important;
    }
}

/* Weekly Prompt main prompt text: move down 9px from the accidental Final 83 position. */
#weeklyPromptText {
    position: relative !important;
    top: -5px !important;
}

/* Weekly Prompt title text: this was the part meant to move up 3px. */
.weekly-prompt-heading,
.compact-inspiration .weekly-prompt-heading {
    transform: translateY(7px) !important;
}

@media (max-width: 760px) {
    .weekly-prompt-heading,
    .compact-inspiration .weekly-prompt-heading {
        transform: translateY(7px) !important;
    }
}


/* =========================================================
   Final 85: layered candle + revised ambient lighting moods
   ========================================================= */

/* Candle now layers with one selected lower light effect instead of replacing it. */
body.candle-lit.light-fireplace-glow .page-glow,
body.candle-lit.light-rain-ambience .page-glow,
body.candle-lit.light-wind .page-glow,
body.candle-lit.light-thunder-flashes .page-glow,
body.candle-lit.light-summer-daylight .page-glow,
body.candle-lit.light-twilight .page-glow,
body.candle-lit.light-lamplight .page-glow,
body.candle-lit.light-moonlit-desk .page-glow {
    box-shadow: inset 0 0 0 9999px rgba(255, 205, 120, 0.035);
}

/* Summer daylight: sky blue field, soft blue orb, and sun from top-right. */
body.light-summer-daylight {
    --ambient-body-bg:
        radial-gradient(circle at 83% 8%, rgba(255, 225, 96, 0.42), transparent 19rem),
        radial-gradient(circle at 36% 24%, rgba(159, 218, 255, 0.36), transparent 34rem),
        linear-gradient(160deg, #8dbfe3 0%, #4f8fc1 46%, #1b4268 100%) !important;
    --ambient-page-glow:
        radial-gradient(circle at 84% 8%, rgba(255, 235, 120, 0.58), transparent 18rem),
        radial-gradient(circle at 36% 26%, rgba(178, 225, 255, 0.42), transparent 32rem),
        radial-gradient(circle at 63% 70%, rgba(71, 151, 210, 0.16), transparent 34rem) !important;
    --ambient-overlay-bg: rgba(32, 90, 130, 0.24) !important;
    --ambient-edge: rgba(205, 234, 255, 0.32) !important;
    --ambient-card-glow: rgba(255, 226, 115, 0.12) !important;
    --ambient-video-filter: saturate(1.04) blur(2px) brightness(1.05) !important;
}

/* Lamplight: yellow light from one side, surrounded by deep blue/black. */
body.light-lamplight {
    --ambient-body-bg:
        radial-gradient(circle at 8% 52%, rgba(255, 205, 92, 0.34), transparent 20rem),
        radial-gradient(circle at 70% 35%, rgba(18, 42, 86, 0.28), transparent 34rem),
        linear-gradient(145deg, #03050b 0%, #07101e 54%, #000103 100%) !important;
    --ambient-page-glow:
        radial-gradient(circle at 4% 52%, rgba(255, 211, 102, 0.50), transparent 22rem),
        radial-gradient(circle at 64% 36%, rgba(23, 57, 113, 0.34), transparent 30rem),
        radial-gradient(circle at 92% 82%, rgba(0, 0, 0, 0.28), transparent 28rem) !important;
    --ambient-overlay-bg: rgba(3, 6, 12, 0.68) !important;
    --ambient-edge: rgba(255, 211, 102, 0.20) !important;
    --ambient-card-glow: rgba(255, 205, 92, 0.11) !important;
}

/* Fireplace glow: subtle campfire feeling with green top/bottom and moving red/yellow orbs. */
body.light-fireplace-glow {
    --ambient-body-bg:
        radial-gradient(circle at 50% 58%, rgba(245, 34, 22, 0.20), transparent 18rem),
        linear-gradient(180deg, #14381e 0%, #0f2717 34%, #241207 59%, #0b2f15 100%) !important;
    --ambient-page-glow:
        radial-gradient(circle at 50% 58%, rgba(255, 28, 22, 0.45), transparent 15rem),
        radial-gradient(circle at 43% 64%, rgba(255, 202, 70, 0.24), transparent 9rem),
        radial-gradient(circle at 58% 66%, rgba(255, 164, 42, 0.22), transparent 11rem),
        radial-gradient(circle at 50% 6%, rgba(64, 169, 88, 0.24), transparent 27rem),
        radial-gradient(circle at 46% 96%, rgba(42, 133, 65, 0.26), transparent 30rem) !important;
    --ambient-overlay-bg: rgba(7, 22, 11, 0.54) !important;
    --ambient-card-glow: rgba(255, 77, 36, 0.11) !important;
    --ambient-edge: rgba(95, 180, 104, 0.18) !important;
    --ambient-animation: storyNookCampfireRed 6.8s ease-in-out infinite !important;
}

body.light-fireplace-glow .page-glow::after {
    content: "";
    position: fixed;
    inset: -10%;
    pointer-events: none;
    background:
        radial-gradient(circle at 41% 61%, rgba(255, 213, 74, 0.24), transparent 8rem),
        radial-gradient(circle at 59% 66%, rgba(255, 177, 55, 0.22), transparent 7rem),
        radial-gradient(circle at 48% 70%, rgba(255, 238, 112, 0.16), transparent 6rem);
    filter: blur(12px);
    mix-blend-mode: screen;
    opacity: 0.58;
    animation: storyNookCampfireYellow 2.15s ease-in-out infinite;
}

/* Thunder: keep the existing dark storm feel, add a second subtle side flash. */
body.light-thunder-flashes {
    --ambient-body-bg:
        linear-gradient(160deg, #080812, #151622 52%, #05060b) !important;
    --ambient-page-glow:
        radial-gradient(circle at 78% 18%, rgba(190, 205, 224, 0.26), transparent 28rem),
        radial-gradient(circle at 13% 30%, rgba(160, 181, 214, 0.16), transparent 26rem),
        linear-gradient(180deg, rgba(20, 20, 32, 0.35), transparent) !important;
    --ambient-overlay-bg: rgba(6, 6, 10, 0.68) !important;
    --ambient-animation: storyNookSubtleThunderRight 10.8s ease-in-out infinite !important;
}

body.light-thunder-flashes .page-glow::after {
    content: "";
    position: fixed;
    inset: -8%;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 32%, rgba(196, 211, 235, 0.30), transparent 24rem),
        linear-gradient(110deg, rgba(206, 222, 248, 0.16), transparent 44%);
    opacity: 0.22;
    filter: blur(8px);
    mix-blend-mode: screen;
    animation: storyNookSubtleThunderLeft 13.4s ease-in-out infinite;
}

/* Replace Wind with "Under the covers": dark edges and flashlight focused in the middle. */
body.light-wind {
    --ambient-body-bg:
        radial-gradient(circle at 50% 48%, rgba(255, 237, 168, 0.18), transparent 20rem),
        radial-gradient(circle at 50% 50%, rgba(10, 18, 30, 0.36), transparent 32rem),
        linear-gradient(145deg, #010204 0%, #080c13 45%, #000000 100%) !important;
    --ambient-page-glow:
        radial-gradient(circle at 50% 47%, rgba(255, 237, 168, 0.46), transparent 18rem),
        radial-gradient(circle at 50% 50%, rgba(19, 26, 40, 0.32), transparent 30rem),
        radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0.38), transparent 24rem),
        radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.46), transparent 26rem) !important;
    --ambient-overlay-bg: rgba(1, 2, 4, 0.72) !important;
    --ambient-card-glow: rgba(255, 237, 168, 0.10) !important;
    --ambient-edge: rgba(255, 237, 168, 0.16) !important;
    --ambient-animation: storyNookUnderCovers 8s ease-in-out infinite !important;
}

@keyframes storyNookCampfireRed {
    0%, 100% {
        opacity: 0.78;
        filter: saturate(1.05) brightness(0.96);
        transform: translate3d(0, 0, 0) scale(1);
    }
    42% {
        opacity: 1;
        filter: saturate(1.28) brightness(1.08);
        transform: translate3d(0.4%, -0.3%, 0) scale(1.012);
    }
    70% {
        opacity: 0.88;
        filter: saturate(1.14) brightness(1.0);
        transform: translate3d(-0.25%, 0.25%, 0) scale(1.004);
    }
}

@keyframes storyNookCampfireYellow {
    0%, 100% {
        opacity: 0.42;
        transform: translate3d(-0.6%, 0.4%, 0) scale(0.99);
    }
    35% {
        opacity: 0.72;
        transform: translate3d(1.1%, -0.8%, 0) scale(1.018);
    }
    62% {
        opacity: 0.54;
        transform: translate3d(-0.9%, -0.3%, 0) scale(1.006);
    }
}

@keyframes storyNookSubtleThunderRight {
    0%, 58%, 68%, 100% {
        opacity: 0.54;
        filter: brightness(0.88);
    }
    61% {
        opacity: 0.82;
        filter: brightness(1.28);
    }
    63% {
        opacity: 0.64;
        filter: brightness(1.02);
    }
    87% {
        opacity: 0.74;
        filter: brightness(1.16);
    }
}

@keyframes storyNookSubtleThunderLeft {
    0%, 45%, 55%, 100% {
        opacity: 0.16;
        filter: brightness(0.9);
    }
    48% {
        opacity: 0.44;
        filter: brightness(1.22);
    }
    51% {
        opacity: 0.22;
        filter: brightness(1);
    }
    79% {
        opacity: 0.34;
        filter: brightness(1.12);
    }
}

@keyframes storyNookUnderCovers {
    0%, 100% {
        transform: scale(1) translate3d(0, 0, 0);
        filter: brightness(0.98);
    }
    50% {
        transform: scale(1.012) translate3d(0.25%, -0.2%, 0);
        filter: brightness(1.05);
    }
}


/* =========================================================
   Final 86: softer brighter artistic ambient light refinements
   ========================================================= */

/* General artistic softening for ambient light moods:
   brighter light, softer edges, less "perfect orb" definition. */
body.light-fireplace-glow .page-glow,
body.light-rain-ambience .page-glow,
body.light-wind .page-glow,
body.light-summer-daylight .page-glow,
body.light-lamplight .page-glow {
    filter: blur(18px) saturate(1.08) brightness(1.08);
}

/* Fireplace Glow:
   deep blue top, dark brown bottom, red ember base, and soft flame shapes above. */
body.light-fireplace-glow {
    --ambient-body-bg:
        radial-gradient(ellipse at 50% 78%, rgba(214, 28, 18, 0.38), transparent 24rem),
        radial-gradient(ellipse at 48% 68%, rgba(255, 119, 32, 0.22), transparent 19rem),
        linear-gradient(180deg, #071227 0%, #0b1424 34%, #21140f 68%, #2a150b 100%) !important;
    --ambient-page-glow:
        radial-gradient(ellipse at 50% 82%, rgba(231, 22, 16, 0.62), transparent 20rem),
        radial-gradient(ellipse at 45% 63%, rgba(255, 182, 52, 0.34), transparent 9rem),
        radial-gradient(ellipse at 53% 59%, rgba(255, 92, 34, 0.36), transparent 10rem),
        radial-gradient(ellipse at 60% 66%, rgba(255, 214, 75, 0.24), transparent 8rem),
        radial-gradient(ellipse at 50% 18%, rgba(34, 61, 120, 0.30), transparent 34rem) !important;
    --ambient-overlay-bg: rgba(6, 8, 18, 0.52) !important;
    --ambient-card-glow: rgba(255, 82, 38, 0.16) !important;
    --ambient-edge: rgba(255, 154, 61, 0.20) !important;
    --ambient-animation: storyNookFireBase 7.6s ease-in-out infinite !important;
}

body.light-fireplace-glow .page-glow::after {
    content: "";
    position: fixed;
    inset: -14%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 44% 57%, rgba(255, 223, 91, 0.36), transparent 7rem),
        radial-gradient(ellipse at 52% 52%, rgba(255, 129, 34, 0.34), transparent 8rem),
        radial-gradient(ellipse at 58% 58%, rgba(255, 238, 122, 0.24), transparent 6.5rem),
        radial-gradient(ellipse at 49% 69%, rgba(235, 24, 12, 0.34), transparent 14rem);
    filter: blur(22px) saturate(1.22) brightness(1.12);
    mix-blend-mode: screen;
    opacity: 0.78;
    animation: storyNookFireFlames 3.4s ease-in-out infinite;
}

/* Summer Daylight:
   brighter, sunnier, mixed blue-white-gold artistic light. */
body.light-summer-daylight {
    --ambient-body-bg:
        radial-gradient(ellipse at 82% 8%, rgba(255, 239, 121, 0.74), transparent 23rem),
        radial-gradient(ellipse at 58% 28%, rgba(255, 255, 255, 0.34), transparent 21rem),
        radial-gradient(ellipse at 30% 18%, rgba(190, 233, 255, 0.54), transparent 34rem),
        radial-gradient(ellipse at 18% 78%, rgba(255, 255, 255, 0.22), transparent 26rem),
        linear-gradient(160deg, #bfe6ff 0%, #79c4f4 45%, #3b91d0 100%) !important;
    --ambient-page-glow:
        radial-gradient(ellipse at 82% 8%, rgba(255, 245, 148, 0.82), transparent 20rem),
        radial-gradient(ellipse at 58% 27%, rgba(255, 255, 255, 0.46), transparent 18rem),
        radial-gradient(ellipse at 28% 18%, rgba(199, 235, 255, 0.62), transparent 34rem),
        radial-gradient(ellipse at 18% 74%, rgba(255, 255, 255, 0.26), transparent 22rem),
        radial-gradient(ellipse at 70% 74%, rgba(99, 188, 245, 0.20), transparent 30rem) !important;
    --ambient-overlay-bg: rgba(63, 145, 202, 0.18) !important;
    --ambient-edge: rgba(232, 248, 255, 0.38) !important;
    --ambient-card-glow: rgba(255, 244, 164, 0.18) !important;
    --ambient-video-filter: saturate(1.12) blur(2px) brightness(1.12) !important;
    --ambient-animation: storyNookSummerBreath 9.5s ease-in-out infinite !important;
}

/* Lamplight:
   yellow lamp source moved to top-left, with dark blue/black surrounding field. */
body.light-lamplight {
    --ambient-body-bg:
        radial-gradient(ellipse at 11% 10%, rgba(255, 218, 99, 0.52), transparent 24rem),
        radial-gradient(ellipse at 32% 28%, rgba(255, 182, 70, 0.18), transparent 20rem),
        radial-gradient(ellipse at 74% 44%, rgba(18, 42, 86, 0.32), transparent 34rem),
        linear-gradient(145deg, #02040a 0%, #07101f 56%, #000103 100%) !important;
    --ambient-page-glow:
        radial-gradient(ellipse at 10% 8%, rgba(255, 220, 106, 0.70), transparent 22rem),
        radial-gradient(ellipse at 28% 24%, rgba(255, 192, 82, 0.22), transparent 22rem),
        radial-gradient(ellipse at 70% 42%, rgba(23, 57, 113, 0.38), transparent 32rem),
        radial-gradient(ellipse at 94% 84%, rgba(0, 0, 0, 0.36), transparent 28rem) !important;
    --ambient-overlay-bg: rgba(3, 6, 12, 0.66) !important;
    --ambient-edge: rgba(255, 211, 102, 0.22) !important;
    --ambient-card-glow: rgba(255, 205, 92, 0.13) !important;
}

/* Under the Covers:
   stronger, wider yellow flashlight glow in center with dark edges. */
body.light-wind {
    --ambient-body-bg:
        radial-gradient(ellipse at 50% 48%, rgba(255, 238, 158, 0.34), transparent 28rem),
        radial-gradient(ellipse at 50% 48%, rgba(255, 223, 118, 0.18), transparent 39rem),
        radial-gradient(ellipse at 50% 50%, rgba(10, 18, 30, 0.38), transparent 36rem),
        linear-gradient(145deg, #000102 0%, #070a12 48%, #000000 100%) !important;
    --ambient-page-glow:
        radial-gradient(ellipse at 50% 47%, rgba(255, 241, 164, 0.68), transparent 25rem),
        radial-gradient(ellipse at 50% 48%, rgba(255, 206, 91, 0.28), transparent 33rem),
        radial-gradient(ellipse at 50% 50%, rgba(19, 26, 40, 0.26), transparent 34rem),
        radial-gradient(ellipse at 0% 0%, rgba(0, 0, 0, 0.46), transparent 28rem),
        radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 0.54), transparent 30rem) !important;
    --ambient-overlay-bg: rgba(1, 2, 4, 0.70) !important;
    --ambient-card-glow: rgba(255, 237, 168, 0.14) !important;
    --ambient-edge: rgba(255, 237, 168, 0.18) !important;
    --ambient-animation: storyNookUnderCoversWide 9s ease-in-out infinite !important;
}

/* Rain Ambience:
   subtle angled rain lines drifting right-to-left. */
body.light-rain-ambience {
    --ambient-body-bg:
        linear-gradient(160deg, #0e1319, #18232a 52%, #0b0e13) !important;
    --ambient-page-glow:
        linear-gradient(115deg, rgba(190, 204, 213, 0.18), transparent 48%),
        radial-gradient(ellipse at 70% 18%, rgba(116, 145, 160, 0.32), transparent 32rem),
        radial-gradient(ellipse at 22% 72%, rgba(178, 194, 204, 0.14), transparent 27rem) !important;
    --ambient-overlay-bg: rgba(9, 13, 17, 0.64) !important;
    --ambient-edge: rgba(168, 188, 198, 0.20) !important;
    --ambient-card-glow: rgba(145, 170, 182, 0.12) !important;
}

body.light-rain-ambience .page-glow::after {
    content: "";
    position: fixed;
    inset: -22%;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            108deg,
            transparent 0 18px,
            rgba(255, 255, 255, 0.00) 18px 27px,
            rgba(255, 255, 255, 0.18) 27px 29px,
            rgba(255, 255, 255, 0.00) 29px 56px
        );
    filter: blur(0.8px);
    opacity: 0.18;
    mix-blend-mode: screen;
    animation: storyNookRainLines 12s linear infinite;
}

/* Animation refinements. */
@keyframes storyNookFireBase {
    0%, 100% {
        opacity: 0.82;
        filter: blur(18px) saturate(1.08) brightness(1.00);
        transform: translate3d(0, 0, 0) scale(1);
    }
    45% {
        opacity: 1;
        filter: blur(20px) saturate(1.24) brightness(1.10);
        transform: translate3d(0.25%, -0.15%, 0) scale(1.008);
    }
    72% {
        opacity: 0.90;
        filter: blur(19px) saturate(1.15) brightness(1.04);
        transform: translate3d(-0.2%, 0.18%, 0) scale(1.004);
    }
}

@keyframes storyNookFireFlames {
    0%, 100% {
        opacity: 0.58;
        transform: translate3d(-0.25%, 0.4%, 0) scale(0.985);
    }
    34% {
        opacity: 0.86;
        transform: translate3d(0.55%, -1.2%, 0) scale(1.025);
    }
    67% {
        opacity: 0.70;
        transform: translate3d(-0.45%, -0.5%, 0) scale(1.006);
    }
}

@keyframes storyNookSummerBreath {
    0%, 100% {
        opacity: 0.86;
        transform: translate3d(0,0,0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate3d(-0.3%, 0.25%, 0) scale(1.012);
    }
}

@keyframes storyNookUnderCoversWide {
    0%, 100% {
        transform: scale(1) translate3d(0, 0, 0);
        filter: blur(18px) brightness(1.02);
    }
    50% {
        transform: scale(1.018) translate3d(0.18%, -0.16%, 0);
        filter: blur(20px) brightness(1.12);
    }
}

@keyframes storyNookRainLines {
    0% {
        transform: translate3d(7%, -7%, 0);
    }
    100% {
        transform: translate3d(-7%, 7%, 0);
    }
}


/* =========================================================
   Final 87: breathing ambient orbs + fire pyramid + refined lamplight
   ========================================================= */

/* Give the ambient light fields a gentle living motion.
   Faster/flickery effects are reserved for fire and thunder; calmer effects
   breathe slowly so they stay atmospheric rather than distracting. */
body.light-summer-daylight {
    --ambient-animation: storyNookOrbBreathSunny 10s ease-in-out infinite !important;
}

body.light-rain-ambience {
    --ambient-animation: storyNookOrbBreathRain 12s ease-in-out infinite !important;
}

body.light-lamplight {
    --ambient-animation: storyNookLampBreath 9.5s ease-in-out infinite !important;
}

body.light-wind {
    --ambient-animation: storyNookUnderCoversWide 9s ease-in-out infinite !important;
}

body.light-twilight,
body.light-moonlit-desk {
    --ambient-animation: storyNookOrbBreathSlow 13s ease-in-out infinite !important;
}

/* Fire: blue/dark background stays, light structure becomes more like a small
   pyramid of flame: large red ember base below, yellow/red flame glows above. */
body.light-fireplace-glow {
    --ambient-body-bg:
        radial-gradient(ellipse at 50% 86%, rgba(220, 18, 14, 0.42), transparent 25rem),
        linear-gradient(180deg, #071227 0%, #0b1424 34%, #21140f 68%, #2a150b 100%) !important;
    --ambient-page-glow:
        radial-gradient(ellipse at 50% 87%, rgba(225, 18, 12, 0.74), transparent 22rem),
        radial-gradient(ellipse at 50% 69%, rgba(255, 184, 45, 0.42), transparent 11rem),
        radial-gradient(ellipse at 43% 74%, rgba(255, 64, 24, 0.34), transparent 10rem),
        radial-gradient(ellipse at 57% 74%, rgba(255, 64, 24, 0.34), transparent 10rem),
        radial-gradient(ellipse at 50% 59%, rgba(255, 231, 92, 0.34), transparent 8rem),
        radial-gradient(ellipse at 50% 18%, rgba(34, 61, 120, 0.30), transparent 34rem) !important;
    --ambient-overlay-bg: rgba(6, 8, 18, 0.52) !important;
    --ambient-card-glow: rgba(255, 82, 38, 0.16) !important;
    --ambient-edge: rgba(255, 154, 61, 0.20) !important;
    --ambient-animation: storyNookFireRedBase 7.2s ease-in-out infinite !important;
}

/* Fast yellow flame layer, arranged above the red base. */
body.light-fireplace-glow .page-glow::after {
    content: "";
    position: fixed;
    inset: -14%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 57%, rgba(255, 241, 104, 0.46), transparent 6.5rem),
        radial-gradient(ellipse at 46% 65%, rgba(255, 196, 52, 0.38), transparent 7.5rem),
        radial-gradient(ellipse at 54% 65%, rgba(255, 196, 52, 0.38), transparent 7.5rem),
        radial-gradient(ellipse at 50% 75%, rgba(255, 74, 28, 0.30), transparent 12rem);
    filter: blur(21px) saturate(1.26) brightness(1.18);
    mix-blend-mode: screen;
    opacity: 0.82;
    animation: storyNookFireYellowFlicker 1.85s ease-in-out infinite;
}

/* Lamplight: small white lamp source in the top-left corner, connected to a
   larger warm yellow glow beside it. */
body.light-lamplight {
    --ambient-body-bg:
        radial-gradient(ellipse at 4% 5%, rgba(255, 255, 232, 0.62), transparent 11rem),
        radial-gradient(ellipse at 18% 16%, rgba(255, 216, 98, 0.52), transparent 27rem),
        radial-gradient(ellipse at 74% 44%, rgba(18, 42, 86, 0.32), transparent 34rem),
        linear-gradient(145deg, #02040a 0%, #07101f 56%, #000103 100%) !important;
    --ambient-page-glow:
        radial-gradient(ellipse at 4% 5%, rgba(255, 255, 238, 0.82), transparent 10rem),
        radial-gradient(ellipse at 18% 16%, rgba(255, 214, 91, 0.66), transparent 29rem),
        radial-gradient(ellipse at 30% 24%, rgba(255, 176, 58, 0.16), transparent 23rem),
        radial-gradient(ellipse at 70% 42%, rgba(23, 57, 113, 0.38), transparent 32rem),
        radial-gradient(ellipse at 94% 84%, rgba(0, 0, 0, 0.36), transparent 28rem) !important;
    --ambient-overlay-bg: rgba(3, 6, 12, 0.66) !important;
    --ambient-edge: rgba(255, 221, 128, 0.24) !important;
    --ambient-card-glow: rgba(255, 210, 95, 0.15) !important;
}

body.light-lamplight .page-glow::after {
    content: "";
    position: fixed;
    inset: -10%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 5% 5%, rgba(255, 255, 250, 0.40), transparent 8rem),
        radial-gradient(ellipse at 19% 16%, rgba(255, 220, 115, 0.34), transparent 22rem);
    filter: blur(18px) brightness(1.08);
    mix-blend-mode: screen;
    opacity: 0.58;
    animation: storyNookLampConnectedGlow 8.5s ease-in-out infinite;
}

/* Calm breathing motions for softer artistic orbs. */
@keyframes storyNookOrbBreathSunny {
    0%, 100% {
        opacity: 0.88;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(18px) saturate(1.08) brightness(1.08);
    }
    50% {
        opacity: 1;
        transform: translate3d(-0.45%, 0.28%, 0) scale(1.022);
        filter: blur(20px) saturate(1.14) brightness(1.16);
    }
}

@keyframes storyNookOrbBreathRain {
    0%, 100% {
        opacity: 0.78;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(18px) saturate(1.02) brightness(1.0);
    }
    50% {
        opacity: 0.92;
        transform: translate3d(0.35%, -0.22%, 0) scale(1.016);
        filter: blur(20px) saturate(1.08) brightness(1.08);
    }
}

@keyframes storyNookOrbBreathSlow {
    0%, 100% {
        opacity: 0.74;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(18px) brightness(1);
    }
    50% {
        opacity: 0.90;
        transform: translate3d(0.25%, -0.18%, 0) scale(1.014);
        filter: blur(20px) brightness(1.08);
    }
}

@keyframes storyNookLampBreath {
    0%, 100% {
        opacity: 0.84;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(18px) saturate(1.06) brightness(1.04);
    }
    50% {
        opacity: 1;
        transform: translate3d(0.18%, 0.16%, 0) scale(1.018);
        filter: blur(20px) saturate(1.12) brightness(1.14);
    }
}

@keyframes storyNookLampConnectedGlow {
    0%, 100% {
        opacity: 0.48;
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        opacity: 0.68;
        transform: translate3d(0.25%, 0.15%, 0) scale(1.022);
    }
}

/* Fire red base moves/expands more slowly than the upper yellow flame. */
@keyframes storyNookFireRedBase {
    0%, 100% {
        opacity: 0.82;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(19px) saturate(1.12) brightness(1.02);
    }
    45% {
        opacity: 1;
        transform: translate3d(0.12%, -0.18%, 0) scale(1.018);
        filter: blur(21px) saturate(1.26) brightness(1.10);
    }
    72% {
        opacity: 0.90;
        transform: translate3d(-0.10%, 0.12%, 0) scale(1.006);
        filter: blur(20px) saturate(1.16) brightness(1.04);
    }
}

/* Yellow flame layer: quicker flicker/contract/expand, still subtle. */
@keyframes storyNookFireYellowFlicker {
    0%, 100% {
        opacity: 0.58;
        transform: translate3d(0, 0.25%, 0) scale(0.985);
        filter: blur(21px) saturate(1.18) brightness(1.06);
    }
    26% {
        opacity: 0.88;
        transform: translate3d(0.18%, -0.85%, 0) scale(1.038);
        filter: blur(23px) saturate(1.38) brightness(1.22);
    }
    48% {
        opacity: 0.64;
        transform: translate3d(-0.20%, -0.28%, 0) scale(1.006);
        filter: blur(20px) saturate(1.2) brightness(1.12);
    }
    72% {
        opacity: 0.82;
        transform: translate3d(0.15%, -0.62%, 0) scale(1.024);
        filter: blur(22px) saturate(1.32) brightness(1.18);
    }
}


/* =========================================================
   Final 88: fireplace flame orbs centered triangular formation
   ========================================================= */

/* Remove the off-left yellow flicker and keep three flame orbs centered:
   one top yellow orb, two lower yellow/orange orbs in a triangular stack. */
body.light-fireplace-glow .page-glow::after {
    content: "";
    position: fixed;
    inset: -14%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 55%, rgba(255, 244, 120, 0.50), transparent 6.4rem),
        radial-gradient(ellipse at 46.5% 66%, rgba(255, 199, 56, 0.40), transparent 7.4rem),
        radial-gradient(ellipse at 53.5% 66%, rgba(255, 184, 48, 0.40), transparent 7.4rem),
        radial-gradient(ellipse at 50% 76%, rgba(255, 70, 28, 0.24), transparent 12rem);
    filter: blur(21px) saturate(1.26) brightness(1.18);
    mix-blend-mode: screen;
    opacity: 0.82;
    animation: storyNookFireYellowFlicker 1.85s ease-in-out infinite;
}


/* =========================================================
   Final 89: fireplace yellow glow centered + slow red base blink
   ========================================================= */

/* Keep the fireplace yellow flicker centered in the page/flame area.
   This removes the side-looking yellow glow and tightens the three-orb
   triangle around the middle. */
body.light-fireplace-glow .page-glow::after {
    content: "";
    position: fixed;
    inset: -14%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 54%, rgba(255, 244, 120, 0.52), transparent 6.3rem),
        radial-gradient(ellipse at 48.8% 65%, rgba(255, 199, 56, 0.42), transparent 7.1rem),
        radial-gradient(ellipse at 51.2% 65%, rgba(255, 184, 48, 0.42), transparent 7.1rem),
        radial-gradient(ellipse at 50% 76%, rgba(255, 70, 28, 0.22), transparent 12rem);
    filter: blur(21px) saturate(1.26) brightness(1.18);
    mix-blend-mode: screen;
    opacity: 0.82;
    animation: storyNookFireYellowFlicker 1.85s ease-in-out infinite;
}

/* Red base orb: slower breathing/blinking than the yellow flame layer. */
body.light-fireplace-glow {
    --ambient-animation: storyNookFireRedSlowBlink 9.2s ease-in-out infinite !important;
}

@keyframes storyNookFireRedSlowBlink {
    0%, 100% {
        opacity: 0.76;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(19px) saturate(1.08) brightness(0.96);
    }
    38% {
        opacity: 0.96;
        transform: translate3d(0.08%, -0.12%, 0) scale(1.014);
        filter: blur(21px) saturate(1.22) brightness(1.10);
    }
    68% {
        opacity: 0.84;
        transform: translate3d(-0.06%, 0.10%, 0) scale(1.005);
        filter: blur(20px) saturate(1.14) brightness(1.02);
    }
}


/* =========================================================
   Final 90: fireplace glow red base only
   ========================================================= */

/* Remove the blinking yellow flame orb layer from Fireplace Glow.
   Keep only the slower red glow/base from the main page-glow layer. */
body.light-fireplace-glow .page-glow::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    background: none !important;
}

/* Keep the bottom red glow slow and subtle. */
body.light-fireplace-glow {
    --ambient-animation: storyNookFireRedSlowBlink 9.2s ease-in-out infinite !important;
}


/* =========================================================
   Final 91: Under the Covers brighter center + wider yellow spread
   ========================================================= */

/* Under the Covers: brighter white center, with a wider warm yellow gradient
   spreading outward while keeping the dark blanket-like edges. */
body.light-wind {
    --ambient-body-bg:
        radial-gradient(ellipse at 50% 47%, rgba(255, 255, 245, 0.58), transparent 18rem),
        radial-gradient(ellipse at 50% 48%, rgba(255, 235, 142, 0.42), transparent 34rem),
        radial-gradient(ellipse at 50% 50%, rgba(255, 205, 92, 0.20), transparent 44rem),
        radial-gradient(ellipse at 50% 50%, rgba(10, 18, 30, 0.38), transparent 38rem),
        linear-gradient(145deg, #000102 0%, #070a12 48%, #000000 100%) !important;
    --ambient-page-glow:
        radial-gradient(ellipse at 50% 47%, rgba(255, 255, 248, 0.82), transparent 17rem),
        radial-gradient(ellipse at 50% 49%, rgba(255, 236, 145, 0.52), transparent 31rem),
        radial-gradient(ellipse at 50% 51%, rgba(255, 205, 91, 0.28), transparent 42rem),
        radial-gradient(ellipse at 50% 50%, rgba(19, 26, 40, 0.24), transparent 36rem),
        radial-gradient(ellipse at 0% 0%, rgba(0, 0, 0, 0.48), transparent 28rem),
        radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 0.56), transparent 30rem) !important;
    --ambient-overlay-bg: rgba(1, 2, 4, 0.66) !important;
    --ambient-card-glow: rgba(255, 240, 175, 0.18) !important;
    --ambient-edge: rgba(255, 241, 185, 0.22) !important;
    --ambient-animation: storyNookUnderCoversBrighter 9s ease-in-out infinite !important;
}

@keyframes storyNookUnderCoversBrighter {
    0%, 100% {
        transform: scale(1) translate3d(0, 0, 0);
        filter: blur(18px) brightness(1.08) saturate(1.04);
    }
    50% {
        transform: scale(1.02) translate3d(0.18%, -0.16%, 0);
        filter: blur(21px) brightness(1.22) saturate(1.08);
    }
}


/* =========================================================
   Final 92: logo-inspired main background orbs
   ========================================================= */

/* Main site background: warmer cream/brown/gold with a deep blue accent.
   Kept soft and slow so it feels like atmosphere rather than a busy effect. */
body:not(.focus-mode):not(.candle-lit):not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) {
    background:
        radial-gradient(ellipse at 14% 9%, rgba(225, 174, 72, 0.28), transparent 28rem),
        radial-gradient(ellipse at 31% 32%, rgba(246, 226, 187, 0.20), transparent 38rem),
        radial-gradient(ellipse at 87% 13%, rgba(18, 36, 73, 0.34), transparent 34rem),
        radial-gradient(ellipse at 83% 88%, rgba(105, 63, 32, 0.28), transparent 36rem),
        linear-gradient(160deg, #1a100a 0%, #2d1b10 42%, #162034 100%) !important;
}

/* Match the soft orb layer to the new logo-inspired direction. */
body:not(.focus-mode):not(.candle-lit):not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) .page-glow {
    background:
        radial-gradient(ellipse at 15% 9%, rgba(236, 185, 77, 0.34), transparent 27rem),
        radial-gradient(ellipse at 32% 33%, rgba(250, 231, 194, 0.24), transparent 36rem),
        radial-gradient(ellipse at 88% 12%, rgba(20, 44, 91, 0.40), transparent 34rem),
        radial-gradient(ellipse at 84% 88%, rgba(120, 72, 36, 0.30), transparent 36rem) !important;
    opacity: 1 !important;
    animation: storyNookMainOrbs 18s ease-in-out infinite;
}

/* Keep the overall contrast cozy and readable over the brighter cream/gold orbs. */
body:not(.focus-mode):not(.candle-lit):not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) .overlay {
    background: rgba(16, 9, 5, 0.50) !important;
    backdrop-filter: blur(2px);
}

@keyframes storyNookMainOrbs {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0px) saturate(1) brightness(1);
    }
    45% {
        transform: translate3d(-0.45%, 0.35%, 0) scale(1.018);
        filter: blur(1px) saturate(1.08) brightness(1.06);
    }
    72% {
        transform: translate3d(0.32%, -0.25%, 0) scale(1.008);
        filter: blur(0.5px) saturate(1.04) brightness(1.03);
    }
}


/* =========================================================
   Final 93 Variant: Sandstone + Navy complementary orb background
   ========================================================= */

/*
   Background concept:
   - one solid cozy base background color
   - three complementary, subtle orbs
   - slow movement / contraction / expansion
   This overrides the earlier main-background orb experiment only when no
   selected light/candle/focus mode is active.
*/
body:not(.focus-mode):not(.candle-lit):not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) {
    background:
        radial-gradient(ellipse at 18% 18%, rgba(218, 190, 148, 0.18), transparent 34rem),
        radial-gradient(ellipse at 82% 14%, rgba(8, 20, 46, 0.26), transparent 36rem),
        radial-gradient(ellipse at 78% 86%, rgba(74, 43, 28, 0.22), transparent 38rem),
        #17100c !important;
}

body:not(.focus-mode):not(.candle-lit):not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) .page-glow {
    background:
        radial-gradient(ellipse at 18% 18%, rgba(218, 190, 148, 0.24), transparent 34rem),
        radial-gradient(ellipse at 82% 14%, rgba(8, 20, 46, 0.28), transparent 36rem),
        radial-gradient(ellipse at 78% 86%, rgba(74, 43, 28, 0.24), transparent 38rem) !important;
    opacity: 1 !important;
    filter: blur(1px) saturate(1.02) brightness(1.01);
    animation: storyNookThreeOrbBreath_sandstone_navy 20s ease-in-out infinite !important;
}

body:not(.focus-mode):not(.candle-lit):not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) .overlay {
    background: rgba(14, 8, 5, 0.54) !important;
    backdrop-filter: blur(2px);
}

@keyframes storyNookThreeOrbBreath_sandstone_navy {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(1px) saturate(1.00) brightness(1.00);
    }
    42% {
        transform: translate3d(-0.32%, 0.24%, 0) scale(1.012);
        filter: blur(2px) saturate(1.04) brightness(1.04);
    }
    72% {
        transform: translate3d(0.24%, -0.18%, 0) scale(1.006);
        filter: blur(1.5px) saturate(1.02) brightness(1.02);
    }
}


/* =========================================================
   Final 94 Variant: Sandstone + Dark Petroleum Teal
   ========================================================= */

/*
   Based on Sandstone + Navy, but the navy orb is shifted into a deeper
   petroleum teal: still dark/subtle, but warmer and more complementary.
*/
body:not(.focus-mode):not(.candle-lit):not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) {
    background:
        radial-gradient(ellipse at 18% 18%, rgba(218, 190, 148, 0.18), transparent 34rem),
        radial-gradient(ellipse at 82% 14%, rgba(5, 43, 48, 0.28), transparent 36rem),
        radial-gradient(ellipse at 78% 86%, rgba(62, 38, 27, 0.24), transparent 38rem),
        #17100c !important;
}

body:not(.focus-mode):not(.candle-lit):not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) .page-glow {
    background:
        radial-gradient(ellipse at 18% 18%, rgba(218, 190, 148, 0.22), transparent 34rem),
        radial-gradient(ellipse at 82% 14%, rgba(7, 55, 61, 0.30), transparent 36rem),
        radial-gradient(ellipse at 78% 86%, rgba(62, 38, 27, 0.26), transparent 38rem) !important;
    opacity: 1 !important;
    filter: blur(1px) saturate(1.02) brightness(1.01);
    animation: storyNookThreeOrbBreath_sandstone_petroleum 20s ease-in-out infinite !important;
}

body:not(.focus-mode):not(.candle-lit):not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) .overlay {
    background: rgba(14, 8, 5, 0.54) !important;
    backdrop-filter: blur(2px);
}

@keyframes storyNookThreeOrbBreath_sandstone_petroleum {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(1px) saturate(1.00) brightness(1.00);
    }
    42% {
        transform: translate3d(-0.32%, 0.24%, 0) scale(1.012);
        filter: blur(2px) saturate(1.05) brightness(1.04);
    }
    72% {
        transform: translate3d(0.24%, -0.18%, 0) scale(1.006);
        filter: blur(1.5px) saturate(1.03) brightness(1.02);
    }
}


/* =========================================================
   Final 95 Variant: Sandstone + Header Color
   ========================================================= */

/*
   Same Sandstone base, but the former petroleum teal orb now uses the same
   dark warm color family as the site header: rgba(16, 11, 8, ...).
*/
body:not(.focus-mode):not(.candle-lit):not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) {
    background:
        radial-gradient(ellipse at 18% 18%, rgba(218, 190, 148, 0.18), transparent 34rem),
        radial-gradient(ellipse at 82% 14%, rgba(16, 11, 8, 0.34), transparent 36rem),
        radial-gradient(ellipse at 78% 86%, rgba(62, 38, 27, 0.24), transparent 38rem),
        #17100c !important;
}

body:not(.focus-mode):not(.candle-lit):not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) .page-glow {
    background:
        radial-gradient(ellipse at 18% 18%, rgba(218, 190, 148, 0.22), transparent 34rem),
        radial-gradient(ellipse at 82% 14%, rgba(16, 11, 8, 0.40), transparent 36rem),
        radial-gradient(ellipse at 78% 86%, rgba(62, 38, 27, 0.26), transparent 38rem) !important;
    opacity: 1 !important;
    filter: blur(1px) saturate(1.02) brightness(1.01);
    animation: storyNookThreeOrbBreath_sandstone_header_color 20s ease-in-out infinite !important;
}

body:not(.focus-mode):not(.candle-lit):not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) .overlay {
    background: rgba(14, 8, 5, 0.54) !important;
    backdrop-filter: blur(2px);
}

@keyframes storyNookThreeOrbBreath_sandstone_header_color {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(1px) saturate(1.00) brightness(1.00);
    }
    42% {
        transform: translate3d(-0.32%, 0.24%, 0) scale(1.012);
        filter: blur(2px) saturate(1.04) brightness(1.03);
    }
    72% {
        transform: translate3d(0.24%, -0.18%, 0) scale(1.006);
        filter: blur(1.5px) saturate(1.02) brightness(1.02);
    }
}


/* =========================================================
   Final 94: refined Summer Daylight sky + brighter pulsing sun
   ========================================================= */

/* Summer Daylight: clearer sky gradient from bright sky blue at top
   into deeper horizon blue, with a brighter slow-pulsing sun orb. */
body.light-summer-daylight {
    --ambient-body-bg:
        radial-gradient(ellipse at 84% 9%, rgba(255, 247, 156, 0.88), transparent 21rem),
        radial-gradient(ellipse at 83% 10%, rgba(255, 220, 70, 0.36), transparent 30rem),
        radial-gradient(ellipse at 52% 30%, rgba(255, 255, 255, 0.24), transparent 24rem),
        radial-gradient(ellipse at 28% 22%, rgba(210, 241, 255, 0.36), transparent 34rem),
        linear-gradient(180deg, #bfeaff 0%, #8fd1f7 38%, #4c9bd3 72%, #24689e 100%) !important;
    --ambient-page-glow:
        radial-gradient(ellipse at 84% 9%, rgba(255, 250, 170, 1), transparent 18rem),
        radial-gradient(ellipse at 84% 9%, rgba(255, 218, 67, 0.48), transparent 30rem),
        radial-gradient(ellipse at 53% 30%, rgba(255, 255, 255, 0.32), transparent 22rem),
        radial-gradient(ellipse at 26% 22%, rgba(215, 244, 255, 0.42), transparent 32rem),
        radial-gradient(ellipse at 58% 82%, rgba(55, 139, 204, 0.24), transparent 34rem) !important;
    --ambient-overlay-bg: rgba(39, 121, 184, 0.16) !important;
    --ambient-edge: rgba(232, 248, 255, 0.40) !important;
    --ambient-card-glow: rgba(255, 242, 152, 0.20) !important;
    --ambient-video-filter: saturate(1.10) blur(2px) brightness(1.12) !important;
    --ambient-animation: storyNookSummerSunPulse 11.5s ease-in-out infinite !important;
}

/* Separate sun layer so the sun itself can breathe brighter and slower
   without making the whole sky feel like it is flashing. */
body.light-summer-daylight .page-glow::after {
    content: "";
    position: fixed;
    inset: -10%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 84% 9%, rgba(255, 255, 225, 0.72), transparent 9rem),
        radial-gradient(ellipse at 84% 9%, rgba(255, 226, 88, 0.34), transparent 22rem);
    filter: blur(16px) saturate(1.08) brightness(1.08);
    mix-blend-mode: screen;
    opacity: 0.78;
    animation: storyNookSunOrbSlowPulse 7.8s ease-in-out infinite;
}

@keyframes storyNookSummerSunPulse {
    0%, 100% {
        opacity: 0.88;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(18px) saturate(1.06) brightness(1.08);
    }
    50% {
        opacity: 0.98;
        transform: translate3d(-0.18%, 0.14%, 0) scale(1.010);
        filter: blur(20px) saturate(1.10) brightness(1.14);
    }
}

@keyframes storyNookSunOrbSlowPulse {
    0%, 100% {
        opacity: 0.68;
        transform: scale(0.98);
        filter: blur(16px) brightness(1.04);
    }
    50% {
        opacity: 0.95;
        transform: scale(1.06);
        filter: blur(18px) brightness(1.28);
    }
}


/* =========================================================
   Final 95: sound menu label changed to Coffee shop
   ========================================================= */

/*
   The former "Night by the lake" sound option is now "Coffee shop".
   When real audio files are added later, use:
   /assets/audio/coffee-shop.mp3
*/


/* =========================================================
   Final 96: sound menu label changed to Wind storm
   ========================================================= */

/*
   The former "Coffee shop" sound option is now "Wind storm".
   When real audio files are added later, use:
   /assets/audio/wind-storm.mp3
*/


/* =========================================================
   Final 97: real ambient sound files
   ========================================================= */

/*
   Real MP3 loops are now stored in:
   /assets/audio/

   Current sound categories:
   - Relaxing rain
   - Fireplace
   - Ocean waves
   - Morning birds
   - Relaxing storm
   - Day at the park
   - Far away thunder
   - Humming
   - Brown noise
*/


/* =========================================================
   Final 98: ambient sound mixer
   ========================================================= */

/* Mixer design:
   Each sound tile can stay active at the same time. When active, its label
   feathers upward and a small volume slider appears underneath, like a tucked
   control panel inside the paper button. */
.sound-menu {
    gap: 0.46rem !important;
}

.sound-mix-option {
    position: relative;
    display: grid;
    grid-template-rows: auto 0fr;
    align-items: center;
    min-height: 2.34rem;
    width: 100%;
    border: 1px solid rgba(215, 165, 111, 0.22);
    border-radius: 15px;
    background: rgba(12, 8, 5, 0.50);
    color: var(--paper-soft);
    padding: 0.58rem 0.72rem;
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    transition:
        grid-template-rows 190ms ease,
        min-height 190ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 160ms ease;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
}

.sound-mix-option:hover {
    transform: translateX(2px);
    border-color: rgba(215, 165, 111, 0.36);
    background: rgba(18, 12, 8, 0.58);
}

.sound-mix-option:focus-visible {
    outline: 2px solid rgba(215, 165, 111, 0.58);
    outline-offset: 2px;
}

.sound-mix-label {
    display: block;
    line-height: 1.1;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    transition:
        transform 190ms ease,
        opacity 190ms ease,
        color 180ms ease,
        font-size 190ms ease;
}

.sound-mix-slider-wrap {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    align-items: center;
    gap: 0.48rem;
    min-height: 0;
    opacity: 0;
    transform: translateY(-0.16rem);
    pointer-events: none;
    transition: opacity 180ms ease, transform 190ms ease;
}

.sound-mix-volume-value {
    font-size: 0.68rem;
    color: rgba(255, 241, 212, 0.68);
    font-variant-numeric: tabular-nums;
}

.sound-mix-slider {
    width: 100%;
    accent-color: var(--sage);
    cursor: pointer;
}

.sound-mix-option[aria-pressed="true"] {
    grid-template-rows: auto 1fr;
    min-height: 3.6rem;
    background:
        linear-gradient(135deg, rgba(135, 158, 96, 0.28), rgba(28, 42, 24, 0.42)),
        rgba(12, 8, 5, 0.60);
    border-color: rgba(146, 170, 103, 0.58);
    box-shadow:
        0 10px 22px rgba(0,0,0,0.16),
        0 0 0 3px rgba(139, 162, 99, 0.08),
        0 0 24px rgba(139, 162, 99, 0.10);
}

.sound-mix-option[aria-pressed="true"] .sound-mix-label {
    transform: translateY(-0.08rem);
    opacity: 0.72;
    color: rgba(255, 241, 212, 0.78);
    font-size: 0.76rem;
}

.sound-mix-option[aria-pressed="true"] .sound-mix-slider-wrap {
    opacity: 1;
    transform: translateY(0.18rem);
    pointer-events: auto;
}

body.candle-lit .sound-mix-option {
    color: #3d3024;
    background: rgba(255, 252, 241, 0.46);
    border-color: rgba(80,55,38,0.18);
}

body.candle-lit .sound-mix-option[aria-pressed="true"] {
    background:
        linear-gradient(135deg, rgba(139, 162, 99, 0.25), rgba(255, 252, 241, 0.64));
    border-color: rgba(104, 125, 78, 0.42);
}

body.candle-lit .sound-mix-volume-value,
body.candle-lit .sound-mix-option[aria-pressed="true"] .sound-mix-label {
    color: rgba(61, 48, 36, 0.74);
}

@media (max-width: 640px) {
    .sound-mix-option {
        min-height: 2.22rem;
        padding: 0.54rem 0.64rem;
        border-radius: 14px;
    }

    .sound-mix-option[aria-pressed="true"] {
        min-height: 3.44rem;
    }

    .sound-mix-label {
        font-size: 0.84rem;
    }

    .sound-mix-option[aria-pressed="true"] .sound-mix-label {
        font-size: 0.72rem;
    }
}

/* =========================================================
   Slider polish: mixer sliders reach the full available space
   ========================================================= */

/* Range controls should not inherit the normal text-input box treatment.
   This removes the extra padding/border that was shortening the mixer track. */
input[type="range"],
.site-volume-slider input[type="range"],
.focus-visibility-slider input[type="range"],
.sound-mix-slider {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    height: 1rem;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    cursor: pointer;
}

.sound-mix-slider-wrap {
    width: 100%;
    min-width: 0;
}

/* WebKit / Chromium range track */
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.32rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 241, 212, 0.22);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.92rem;
    height: 0.92rem;
    margin-top: -0.30rem;
    border: 1px solid rgba(255, 241, 212, 0.72);
    border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

/* Firefox range track */
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 0.32rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 241, 212, 0.22);
}

input[type="range"]::-moz-range-progress {
    height: 0.32rem;
    border-radius: 999px;
    background: var(--accent);
}

input[type="range"]::-moz-range-thumb {
    width: 0.92rem;
    height: 0.92rem;
    border: 1px solid rgba(255, 241, 212, 0.72);
    border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 2px solid rgba(223, 191, 131, 0.52);
    outline-offset: 3px;
}

input[type="range"]:focus-visible::-moz-range-thumb {
    outline: 2px solid rgba(223, 191, 131, 0.52);
    outline-offset: 3px;
}

/* Keep the mixer-specific sliders visually tucked in without a surrounding box. */
.sound-mix-slider {
    accent-color: var(--sage);
}

.sound-mix-slider::-webkit-slider-runnable-track {
    background: rgba(255, 241, 212, 0.20);
}

.sound-mix-slider::-moz-range-track {
    background: rgba(255, 241, 212, 0.20);
}

.sound-mix-slider::-moz-range-progress {
    background: var(--sage);
}

body.candle-lit input[type="range"]::-webkit-slider-runnable-track,
body.candle-lit .sound-mix-slider::-webkit-slider-runnable-track {
    background: rgba(61, 48, 36, 0.22);
}

body.candle-lit input[type="range"]::-moz-range-track,
body.candle-lit .sound-mix-slider::-moz-range-track {
    background: rgba(61, 48, 36, 0.22);
}

/* =========================================================
   Final 96: circular responsive background orbs
   =========================================================
   Keeps every ambient background orb circular from phone widths through
   widescreen by using circle radial gradients with vmin-based responsive
   stop sizes. Also mirrors the main-page default orb background into the
   default focus-mode writing background when no candle/light effect is active.
*/
:root {
    --nook-orb-xs: clamp(6rem, 16vmin, 10rem);
    --nook-orb-sm: clamp(8rem, 20vmin, 14rem);
    --nook-orb-md: clamp(12rem, 28vmin, 22rem);
    --nook-orb-lg: clamp(16rem, 36vmin, 30rem);
    --nook-orb-xl: clamp(20rem, 44vmin, 38rem);
}

/* Default page + default Focus Mode share the same circular orb background. */
body:not(.candle-lit):not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) {
    background:
        radial-gradient(circle at 18% 18%, rgba(218, 190, 148, 0.18) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 82% 14%, rgba(16, 11, 8, 0.34) 0, transparent var(--nook-orb-xl)),
        radial-gradient(circle at 78% 86%, rgba(62, 38, 27, 0.24) 0, transparent var(--nook-orb-xl)),
        #17100c !important;
}

body:not(.candle-lit):not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) .page-glow {
    background:
        radial-gradient(circle at 18% 18%, rgba(218, 190, 148, 0.22) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 82% 14%, rgba(16, 11, 8, 0.40) 0, transparent var(--nook-orb-xl)),
        radial-gradient(circle at 78% 86%, rgba(62, 38, 27, 0.26) 0, transparent var(--nook-orb-xl)) !important;
    opacity: 1 !important;
    filter: blur(1px) saturate(1.02) brightness(1.01);
    animation: storyNookThreeOrbBreath_circular_default 20s ease-in-out infinite !important;
}

body:not(.candle-lit):not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) .overlay {
    background: rgba(14, 8, 5, 0.54) !important;
    backdrop-filter: blur(2px);
}

@keyframes storyNookThreeOrbBreath_circular_default {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(1px) saturate(1.00) brightness(1.00);
    }
    42% {
        transform: translate3d(-0.32%, 0.24%, 0) scale(1.012);
        filter: blur(2px) saturate(1.04) brightness(1.03);
    }
    72% {
        transform: translate3d(0.24%, -0.18%, 0) scale(1.006);
        filter: blur(1.5px) saturate(1.02) brightness(1.02);
    }
}

/* Fireplace Glow: circular red ember field only. */
body.light-fireplace-glow {
    --ambient-body-bg:
        radial-gradient(circle at 50% 86%, rgba(220, 18, 14, 0.42) 0, transparent var(--nook-orb-md)),
        linear-gradient(180deg, #071227 0%, #0b1424 34%, #21140f 68%, #2a150b 100%) !important;
    --ambient-page-glow:
        radial-gradient(circle at 50% 87%, rgba(225, 18, 12, 0.74) 0, transparent var(--nook-orb-md)),
        radial-gradient(circle at 50% 18%, rgba(34, 61, 120, 0.30) 0, transparent var(--nook-orb-lg)) !important;
    --ambient-overlay-bg: rgba(6, 8, 18, 0.52) !important;
    --ambient-card-glow: rgba(255, 82, 38, 0.16) !important;
    --ambient-edge: rgba(255, 154, 61, 0.20) !important;
    --ambient-animation: storyNookFireRedSlowBlink 9.2s ease-in-out infinite !important;
}

body.light-fireplace-glow .page-glow::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    background: none !important;
}

/* Rain Ambience: circular cool glow orbs plus the rain-line texture. */
body.light-rain-ambience {
    --ambient-body-bg:
        linear-gradient(160deg, #0e1319, #18232a 52%, #0b0e13) !important;
    --ambient-page-glow:
        linear-gradient(115deg, rgba(190, 204, 213, 0.18), transparent 48%),
        radial-gradient(circle at 70% 18%, rgba(116, 145, 160, 0.32) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 22% 72%, rgba(178, 194, 204, 0.14) 0, transparent var(--nook-orb-md)) !important;
    --ambient-overlay-bg: rgba(9, 13, 17, 0.64) !important;
    --ambient-edge: rgba(168, 188, 198, 0.20) !important;
    --ambient-card-glow: rgba(145, 170, 182, 0.12) !important;
    --ambient-animation: storyNookOrbBreathRain 12s ease-in-out infinite !important;
}

/* Under the Covers: circular center glow and circular dark corner fields. */
body.light-wind {
    --ambient-body-bg:
        radial-gradient(circle at 50% 47%, rgba(255, 255, 245, 0.58) 0, transparent var(--nook-orb-md)),
        radial-gradient(circle at 50% 48%, rgba(255, 235, 142, 0.42) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 50% 50%, rgba(255, 205, 92, 0.20) 0, transparent var(--nook-orb-xl)),
        radial-gradient(circle at 50% 50%, rgba(10, 18, 30, 0.38) 0, transparent var(--nook-orb-xl)),
        linear-gradient(145deg, #000102 0%, #070a12 48%, #000000 100%) !important;
    --ambient-page-glow:
        radial-gradient(circle at 50% 47%, rgba(255, 255, 248, 0.82) 0, transparent var(--nook-orb-md)),
        radial-gradient(circle at 50% 49%, rgba(255, 236, 145, 0.52) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 50% 51%, rgba(255, 205, 91, 0.28) 0, transparent var(--nook-orb-xl)),
        radial-gradient(circle at 50% 50%, rgba(19, 26, 40, 0.24) 0, transparent var(--nook-orb-xl)),
        radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0.48) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.56) 0, transparent var(--nook-orb-lg)) !important;
    --ambient-overlay-bg: rgba(1, 2, 4, 0.66) !important;
    --ambient-card-glow: rgba(255, 240, 175, 0.18) !important;
    --ambient-edge: rgba(255, 241, 185, 0.22) !important;
    --ambient-animation: storyNookUnderCoversBrighter 9s ease-in-out infinite !important;
}

/* Thunder: circular side flashes. */
body.light-thunder-flashes {
    --ambient-body-bg:
        linear-gradient(160deg, #080812, #151622 52%, #05060b) !important;
    --ambient-page-glow:
        radial-gradient(circle at 78% 18%, rgba(190, 205, 224, 0.26) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 13% 30%, rgba(160, 181, 214, 0.16) 0, transparent var(--nook-orb-md)),
        linear-gradient(180deg, rgba(20, 20, 32, 0.35), transparent) !important;
    --ambient-overlay-bg: rgba(6, 6, 10, 0.68) !important;
    --ambient-animation: storyNookSubtleThunderRight 10.8s ease-in-out infinite !important;
}

body.light-thunder-flashes .page-glow::after {
    content: "";
    position: fixed;
    inset: -8%;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 32%, rgba(196, 211, 235, 0.30) 0, transparent var(--nook-orb-md)),
        linear-gradient(110deg, rgba(206, 222, 248, 0.16), transparent 44%);
    opacity: 0.22;
    filter: blur(8px);
    mix-blend-mode: screen;
    animation: storyNookSubtleThunderLeft 13.4s ease-in-out infinite;
}

/* Summer Daylight: circular sun and sky glows. */
body.light-summer-daylight {
    --ambient-body-bg:
        radial-gradient(circle at 84% 9%, rgba(255, 247, 156, 0.88) 0, transparent var(--nook-orb-md)),
        radial-gradient(circle at 83% 10%, rgba(255, 220, 70, 0.36) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 52% 30%, rgba(255, 255, 255, 0.24) 0, transparent var(--nook-orb-md)),
        radial-gradient(circle at 28% 22%, rgba(210, 241, 255, 0.36) 0, transparent var(--nook-orb-lg)),
        linear-gradient(180deg, #bfeaff 0%, #8fd1f7 38%, #4c9bd3 72%, #24689e 100%) !important;
    --ambient-page-glow:
        radial-gradient(circle at 84% 9%, rgba(255, 250, 170, 1) 0, transparent var(--nook-orb-md)),
        radial-gradient(circle at 84% 9%, rgba(255, 218, 67, 0.48) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 53% 30%, rgba(255, 255, 255, 0.32) 0, transparent var(--nook-orb-md)),
        radial-gradient(circle at 26% 22%, rgba(215, 244, 255, 0.42) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 58% 82%, rgba(55, 139, 204, 0.24) 0, transparent var(--nook-orb-lg)) !important;
    --ambient-overlay-bg: rgba(39, 121, 184, 0.16) !important;
    --ambient-edge: rgba(232, 248, 255, 0.40) !important;
    --ambient-card-glow: rgba(255, 242, 152, 0.20) !important;
    --ambient-video-filter: saturate(1.10) blur(2px) brightness(1.12) !important;
    --ambient-animation: storyNookSummerSunPulse 11.5s ease-in-out infinite !important;
}

body.light-summer-daylight .page-glow::after {
    content: "";
    position: fixed;
    inset: -10%;
    pointer-events: none;
    background:
        radial-gradient(circle at 84% 9%, rgba(255, 255, 225, 0.72) 0, transparent var(--nook-orb-sm)),
        radial-gradient(circle at 84% 9%, rgba(255, 226, 88, 0.34) 0, transparent var(--nook-orb-md));
    filter: blur(16px) saturate(1.08) brightness(1.08);
    mix-blend-mode: screen;
    opacity: 0.78;
    animation: storyNookSunOrbSlowPulse 7.8s ease-in-out infinite;
}

/* Twilight: circular violet and ember fields. */
body.light-twilight {
    --ambient-body-bg:
        radial-gradient(circle at 34% 12%, rgba(122, 79, 128, 0.15) 0, transparent var(--nook-orb-lg)),
        linear-gradient(160deg, #160f18, #2b1b24 53%, #110b12) !important;
    --ambient-page-glow:
        radial-gradient(circle at 34% 12%, rgba(122, 79, 128, 0.24) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 80% 26%, rgba(208, 118, 70, 0.20) 0, transparent var(--nook-orb-lg)) !important;
    --ambient-overlay-bg: rgba(15, 9, 16, 0.58) !important;
    --ambient-edge: rgba(185, 128, 151, 0.16) !important;
    --ambient-card-glow: rgba(208, 118, 70, 0.10) !important;
    --ambient-animation: storyNookOrbBreathSlow 13s ease-in-out infinite !important;
}

/* Lamplight: circular lamp source and circular glow. */
body.light-lamplight {
    --ambient-body-bg:
        radial-gradient(circle at 4% 5%, rgba(255, 255, 232, 0.62) 0, transparent var(--nook-orb-sm)),
        radial-gradient(circle at 18% 16%, rgba(255, 216, 98, 0.52) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 74% 44%, rgba(18, 42, 86, 0.32) 0, transparent var(--nook-orb-lg)),
        linear-gradient(145deg, #02040a 0%, #07101f 56%, #000103 100%) !important;
    --ambient-page-glow:
        radial-gradient(circle at 4% 5%, rgba(255, 255, 238, 0.82) 0, transparent var(--nook-orb-sm)),
        radial-gradient(circle at 18% 16%, rgba(255, 214, 91, 0.66) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 30% 24%, rgba(255, 176, 58, 0.16) 0, transparent var(--nook-orb-md)),
        radial-gradient(circle at 70% 42%, rgba(23, 57, 113, 0.38) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 94% 84%, rgba(0, 0, 0, 0.36) 0, transparent var(--nook-orb-md)) !important;
    --ambient-overlay-bg: rgba(3, 6, 12, 0.66) !important;
    --ambient-edge: rgba(255, 221, 128, 0.24) !important;
    --ambient-card-glow: rgba(255, 210, 95, 0.15) !important;
    --ambient-animation: storyNookLampBreath 9.5s ease-in-out infinite !important;
}

body.light-lamplight .page-glow::after {
    content: "";
    position: fixed;
    inset: -10%;
    pointer-events: none;
    background:
        radial-gradient(circle at 5% 5%, rgba(255, 255, 250, 0.40) 0, transparent var(--nook-orb-sm)),
        radial-gradient(circle at 19% 16%, rgba(255, 220, 115, 0.34) 0, transparent var(--nook-orb-md));
    filter: blur(18px) brightness(1.08);
    mix-blend-mode: screen;
    opacity: 0.58;
    animation: storyNookLampConnectedGlow 8.5s ease-in-out infinite;
}

/* Moonlit Desk: circular moon glow. */
body.light-moonlit-desk {
    --ambient-body-bg:
        linear-gradient(160deg, #0b0f16, #151b26 54%, #090b10) !important;
    --ambient-page-glow:
        radial-gradient(circle at 70% 12%, rgba(177, 193, 211, 0.26) 0, transparent var(--nook-orb-lg)),
        linear-gradient(145deg, rgba(12, 17, 26, 0.30), transparent 70%) !important;
    --ambient-overlay-bg: rgba(6, 8, 12, 0.66) !important;
    --ambient-edge: rgba(177, 193, 211, 0.16) !important;
    --ambient-card-glow: rgba(177, 193, 211, 0.09) !important;
    --ambient-depth-blur: 4px;
    --ambient-animation: storyNookOrbBreathSlow 13s ease-in-out infinite !important;
}

/* Candle-only mode keeps its glow circular too. */
body.candle-lit:not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) {
    background:
        radial-gradient(circle at 50% 8%, rgba(255, 220, 148, 0.42) 0, transparent var(--nook-orb-md)),
        linear-gradient(160deg, #f1e4c9, #d7bc85 62%, #b8915b) !important;
}

body.candle-lit:not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) .page-glow {
    background: radial-gradient(circle at 50% 15%, rgba(255, 214, 120, 0.38) 0, transparent var(--nook-orb-lg)) !important;
}

/* =========================================================
   Final 97: progressive candle brightness slider
   =========================================================
   Replaces the instant candle button with a Dim → Bright slider. The far-right
   value recreates the former fully lit candle look, while every value between
   is a gradual step toward that warmer, clearer room.
*/
:root {
    --candle-level: 0;
    --candle-ease: 0;
    --candle-page-alpha: 0;
    --candle-glow-alpha: 0;
    --candle-overlay-alpha: 0.54;
    --candle-panel-alpha-1: 0.12;
    --candle-panel-alpha-2: 0.10;
    --candle-border-alpha: 0.12;
    --candle-input-alpha: 0.18;
    --candle-control-alpha: 0.05;
    --candle-track-alpha: 0.12;
    --candle-text-color: var(--text-main);
    --candle-muted-color: var(--text-muted);
}

.candle-brightness-feature {
    gap: 0.65rem;
}

.candle-brightness-slider {
    display: grid;
    grid-template-columns: auto minmax(150px, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-width: 0;
}

.candle-brightness-slider input[type="range"] {
    width: 100%;
    min-width: 0;
}

/* No old candle icon box remains in the Light popup. */
.lighting-menu .candle-icon-toggle,
.candle-toggle,
#candleBtn {
    display: none !important;
}

body.candle-brightness-active {
    transition: background 0.24s ease;
}

/* No selected ambient light: slider progressively brightens into the former
   candle-on page background. */
body.candle-brightness-active:not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) {
    background:
        radial-gradient(circle at 50% 8%, rgba(255, 220, 148, var(--candle-glow-alpha)) 0, transparent var(--nook-orb-md)),
        linear-gradient(160deg,
            rgba(241, 228, 201, var(--candle-page-alpha)),
            rgba(215, 188, 133, var(--candle-page-alpha)) 62%,
            rgba(184, 145, 91, var(--candle-page-alpha))),
        radial-gradient(circle at 18% 18%, rgba(218, 190, 148, 0.18) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 82% 14%, rgba(16, 11, 8, 0.34) 0, transparent var(--nook-orb-xl)),
        radial-gradient(circle at 78% 86%, rgba(62, 38, 27, 0.24) 0, transparent var(--nook-orb-xl)),
        #17100c !important;
}

body.candle-brightness-active:not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) .page-glow {
    background:
        radial-gradient(circle at 50% 15%, rgba(255, 214, 120, var(--candle-glow-alpha)) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 18% 18%, rgba(218, 190, 148, 0.22) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 82% 14%, rgba(16, 11, 8, 0.40) 0, transparent var(--nook-orb-xl)),
        radial-gradient(circle at 78% 86%, rgba(62, 38, 27, 0.26) 0, transparent var(--nook-orb-xl)) !important;
    opacity: 1 !important;
}

body.candle-brightness-active .overlay {
    background: rgba(18, 10, 5, var(--candle-overlay-alpha)) !important;
    backdrop-filter: blur(2px) !important;
}

/* When a lower ambient light is selected, keep that mood and simply layer the
   candle warmth into it based on the slider level. */
body.candle-brightness-active.light-fireplace-glow .page-glow,
body.candle-brightness-active.light-rain-ambience .page-glow,
body.candle-brightness-active.light-wind .page-glow,
body.candle-brightness-active.light-thunder-flashes .page-glow,
body.candle-brightness-active.light-summer-daylight .page-glow,
body.candle-brightness-active.light-twilight .page-glow,
body.candle-brightness-active.light-lamplight .page-glow,
body.candle-brightness-active.light-moonlit-desk .page-glow {
    box-shadow: inset 0 0 0 9999px rgba(255, 205, 120, calc(0.035 * var(--candle-ease))) !important;
}

/* Main content windows, the writing desk, modals, and ambient menus brighten
   progressively instead of jumping straight to the clear candle state. */
body.candle-brightness-active main .card,
body.candle-brightness-active main .welcome-card,
body.candle-brightness-active main .story-card,
body.candle-brightness-active main .stat-card,
body.candle-brightness-active main .my-stories-container,
body.candle-brightness-active main .story-accordion,
body.candle-brightness-active main .comments-section-wrapper,
body.candle-brightness-active main .comment-item,
body.candle-brightness-active main .writing-zone,
body.candle-brightness-active .modal-content.book-style,
body.candle-brightness-active .modal-content.narrow,
body.candle-brightness-active .passport-guide-style,
body.candle-brightness-active .ambient-menu,
body.focus-mode.candle-brightness-active #writingZoneSection {
    color: var(--candle-text-color) !important;
    background:
        linear-gradient(145deg,
            rgba(255, 248, 230, var(--candle-panel-alpha-1)),
            rgba(238, 218, 178, var(--candle-panel-alpha-2))),
        linear-gradient(145deg,
            rgba(27, 19, 13, var(--focus-zone-alpha)),
            rgba(18, 13, 9, var(--focus-zone-alpha-2))) !important;
    border-color: rgba(80, 55, 38, var(--candle-border-alpha)) !important;
    box-shadow:
        0 24px 70px rgba(93, 61, 34, calc(0.18 * var(--candle-ease))),
        inset 0 1px 0 rgba(255, 255, 255, calc(0.36 * var(--candle-ease))) !important;
}

body.candle-brightness-active main .card *,
body.candle-brightness-active main .writing-zone *,
body.candle-brightness-active main .story-card *,
body.candle-brightness-active main .stat-card *,
body.candle-brightness-active .modal-content.book-style *,
body.candle-brightness-active .modal-content.narrow *,
body.candle-brightness-active .passport-guide-style *,
body.candle-brightness-active .ambient-menu *,
body.focus-mode.candle-brightness-active .writing-zone * {
    color: var(--candle-text-color) !important;
}

body.candle-brightness-active main .eyebrow,
body.candle-brightness-active main .section-label-title,
body.candle-brightness-active main .story-meta,
body.candle-brightness-active main .muted,
body.candle-brightness-active main small,
body.candle-brightness-active .modal-content.book-style small,
body.candle-brightness-active .ambient-feature-label,
body.focus-mode.candle-brightness-active .char-meter,
body.candle-brightness-active .slider-soft-label {
    color: var(--candle-muted-color) !important;
}

body.candle-brightness-active main textarea,
body.candle-brightness-active main input:not([type="range"]),
body.candle-brightness-active main select,
body.candle-brightness-active .modal-content.book-style input:not([type="range"]),
body.candle-brightness-active .modal-content.book-style textarea,
body.candle-brightness-active .modal-content.narrow input:not([type="range"]),
body.candle-brightness-active .modal-content.narrow textarea,
body.focus-mode.candle-brightness-active .writing-zone textarea,
body.focus-mode.candle-brightness-active .writing-zone input:not([type="range"]) {
    color: var(--candle-text-color) !important;
    background: rgba(255, 252, 241, var(--candle-input-alpha)) !important;
    border-color: rgba(80, 55, 38, var(--candle-border-alpha)) !important;
}

body.candle-brightness-active main textarea::placeholder,
body.candle-brightness-active main input::placeholder,
body.candle-brightness-active .modal-content.book-style textarea::placeholder,
body.candle-brightness-active .modal-content.book-style input::placeholder,
body.focus-mode.candle-brightness-active .writing-zone textarea::placeholder {
    color: rgba(39, 31, 24, 0.42) !important;
}

body.candle-brightness-active main .btn-secondary,
body.candle-brightness-active main .btn-ghost,
body.candle-brightness-active main .btn-tiny,
body.candle-brightness-active main .focus-mini-btn,
body.candle-brightness-active main .text-link,
body.candle-brightness-active .ambient-menu button:not(.focus-audio-mute) {
    color: var(--candle-text-color) !important;
    background: rgba(255, 252, 241, var(--candle-control-alpha)) !important;
    border-color: rgba(80, 55, 38, var(--candle-border-alpha)) !important;
}

body.candle-brightness-active main .btn-primary,
body.candle-brightness-active main #publishBtn {
    color: #10100a !important;
}

body.candle-brightness-active input[type="range"]::-webkit-slider-runnable-track {
    background: rgba(61, 48, 36, var(--candle-track-alpha)) !important;
}

body.candle-brightness-active input[type="range"]::-moz-range-track {
    background: rgba(61, 48, 36, var(--candle-track-alpha)) !important;
}

body.candle-brightness-active input[type="range"]::-moz-range-progress {
    background: rgba(125, 139, 109, calc(0.45 + (0.18 * var(--candle-ease)))) !important;
}

@media (max-width: 560px) {
    .candle-brightness-slider {
        grid-template-columns: auto minmax(92px, 1fr) auto;
        gap: 0.45rem;
    }
}

/* =========================================================
   Final 98: default background image + depth-of-field layer
   =========================================================
   The new cozy reading-room artwork now sits on the fixed background layer.
   It is intentionally scaled and softly blurred so it feels behind the UI,
   while the overlay and circular glows keep text/cards readable from mobile
   through widescreen.
*/
:root {
    --story-room-bg: url("story-nook-default-background.jpg");
    --story-room-bg-position: center center;
    --story-room-bg-scale: 1.045;
    --story-room-bg-blur: 3.8px;
    --story-room-bg-brightness: 0.72;
    --story-room-bg-saturation: 0.92;
    --story-room-bg-opacity: 0.96;
    --story-room-vignette: rgba(7, 4, 3, 0.58);
}

html,
body {
    background-color: #0f0906 !important;
}

.video-background {
    overflow: hidden !important;
    background: #0f0906 !important;
    isolation: isolate;
}

.video-background::before {
    content: "";
    position: absolute;
    inset: calc(-1 * max(18px, 1.4vw));
    z-index: -2;
    pointer-events: none;
    background-image: var(--story-room-bg);
    background-size: cover;
    background-position: var(--story-room-bg-position);
    background-repeat: no-repeat;
    opacity: var(--story-room-bg-opacity);
    filter:
        blur(var(--story-room-bg-blur))
        saturate(var(--story-room-bg-saturation))
        brightness(var(--story-room-bg-brightness));
    transform: scale(var(--story-room-bg-scale));
    transform-origin: center;
    will-change: transform, filter;
}

.video-background::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 44%, transparent 0, rgba(5, 3, 2, 0.16) 48%, var(--story-room-vignette) 100%),
        linear-gradient(180deg, rgba(8, 5, 3, 0.18), rgba(8, 5, 3, 0.34));
}

/* The generated room image replaces the old fireplace video layer. Keeping the
   selector prevents any optional local video file from loading visually over it. */
.video-background video,
#bgVideo {
    display: none !important;
    opacity: 0 !important;
}

/* Default page and default Focus Mode now use the image as the foundation;
   circular glows remain as subtle atmosphere instead of the whole background. */
body:not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) {
    background: #0f0906 !important;
}

body:not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) .page-glow {
    background:
        radial-gradient(circle at 17% 16%, rgba(255, 220, 148, 0.18) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 78% 21%, rgba(120, 66, 34, 0.16) 0, transparent var(--nook-orb-xl)),
        radial-gradient(circle at 76% 86%, rgba(12, 7, 4, 0.28) 0, transparent var(--nook-orb-xl)) !important;
    opacity: 1 !important;
    filter: blur(1px) saturate(1.02) brightness(1.01);
    animation: storyNookThreeOrbBreath_circular_default 20s ease-in-out infinite !important;
}

body:not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) .overlay {
    background: rgba(12, 7, 4, 0.40) !important;
    backdrop-filter: blur(1.2px) saturate(0.96);
}

/* Ambient light effects now tint the same distant room image instead of
   replacing it with flat gradients. The circular light fields still come from
   the existing --ambient-page-glow values. */
body.light-fireplace-glow,
body.light-rain-ambience,
body.light-wind,
body.light-thunder-flashes,
body.light-summer-daylight,
body.light-twilight,
body.light-lamplight,
body.light-moonlit-desk {
    background: #0f0906 !important;
}

body.light-fireplace-glow { --story-room-bg-brightness: 0.58; --story-room-bg-saturation: 1.00; --story-room-bg-blur: 4.2px; --story-room-vignette: rgba(9, 3, 2, 0.66); }
body.light-rain-ambience { --story-room-bg-brightness: 0.50; --story-room-bg-saturation: 0.62; --story-room-bg-blur: 4.8px; --story-room-vignette: rgba(4, 7, 10, 0.70); }
body.light-wind { --story-room-bg-brightness: 0.46; --story-room-bg-saturation: 0.70; --story-room-bg-blur: 5px; --story-room-vignette: rgba(1, 2, 4, 0.72); }
body.light-thunder-flashes { --story-room-bg-brightness: 0.42; --story-room-bg-saturation: 0.54; --story-room-bg-blur: 5.2px; --story-room-vignette: rgba(3, 3, 9, 0.76); }
body.light-summer-daylight { --story-room-bg-brightness: 0.90; --story-room-bg-saturation: 0.95; --story-room-bg-blur: 3.2px; --story-room-vignette: rgba(36, 20, 8, 0.34); }
body.light-twilight { --story-room-bg-brightness: 0.54; --story-room-bg-saturation: 0.72; --story-room-bg-blur: 4.6px; --story-room-vignette: rgba(11, 5, 13, 0.70); }
body.light-lamplight { --story-room-bg-brightness: 0.64; --story-room-bg-saturation: 1.02; --story-room-bg-blur: 4px; --story-room-vignette: rgba(4, 3, 6, 0.70); }
body.light-moonlit-desk { --story-room-bg-brightness: 0.43; --story-room-bg-saturation: 0.50; --story-room-bg-blur: 5px; --story-room-vignette: rgba(2, 4, 8, 0.78); }

body.light-fireplace-glow .overlay,
body.light-rain-ambience .overlay,
body.light-wind .overlay,
body.light-thunder-flashes .overlay,
body.light-summer-daylight .overlay,
body.light-twilight .overlay,
body.light-lamplight .overlay,
body.light-moonlit-desk .overlay {
    backdrop-filter: blur(1.5px) saturate(0.96) !important;
}

/* Candle slider: brighten the UI and add candle warmth without covering the
   room image with a solid gradient. */
body.candle-brightness-active:not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) {
    background: #0f0906 !important;
    --story-room-bg-brightness: calc(0.72 + (0.18 * var(--candle-ease)));
    --story-room-bg-saturation: calc(0.92 + (0.12 * var(--candle-ease)));
    --story-room-bg-blur: calc(3.8px - (0.8px * var(--candle-ease)));
}

body.candle-brightness-active:not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) .page-glow {
    background:
        radial-gradient(circle at 50% 15%, rgba(255, 214, 120, var(--candle-glow-alpha)) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 17% 16%, rgba(255, 220, 148, 0.18) 0, transparent var(--nook-orb-lg)),
        radial-gradient(circle at 78% 21%, rgba(120, 66, 34, 0.16) 0, transparent var(--nook-orb-xl)),
        radial-gradient(circle at 76% 86%, rgba(12, 7, 4, 0.28) 0, transparent var(--nook-orb-xl)) !important;
}

body.candle-brightness-active .overlay {
    background: rgba(12, 7, 4, calc(0.40 - (0.12 * var(--candle-ease)))) !important;
    backdrop-filter: blur(1.2px) saturate(calc(0.96 + (0.10 * var(--candle-ease)))) !important;
}

/* Make the writing surface feel closer than the background room. */
#writingZoneSection,
body.focus-mode #writingZoneSection {
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 241, 212, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

body.focus-mode #writingZoneSection {
    backdrop-filter: blur(var(--focus-zone-blur)) saturate(1.04) !important;
}

@media (max-width: 760px) {
    :root {
        --story-room-bg-position: 58% center;
        --story-room-bg-scale: 1.07;
        --story-room-bg-blur: 4.6px;
        --story-room-bg-brightness: 0.62;
    }

    body:not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) .overlay {
        background: rgba(10, 6, 4, 0.48) !important;
    }
}

@media (min-width: 1500px) {
    :root {
        --story-room-bg-scale: 1.035;
        --story-room-bg-blur: 3.2px;
    }
}

/* =========================================================
   Final 99: candle slider polish + full Feather/Ink integration
   ========================================================= */
:root {
    --focus-ink-factor: 0.833;
    --range-track-height: 0.24rem;
    --range-thumb-size: 0.86rem;
}

/* Keep every range input visually lean. The clickable range area still works,
   but the transparent hit area no longer shows up as a thick ghost bar on
   bright candle backgrounds. */
input[type="range"],
.site-volume-slider input[type="range"],
.focus-visibility-slider input[type="range"],
.candle-brightness-slider input[type="range"],
.sound-mix-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 0.92rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

input[type="range"]::-webkit-slider-runnable-track,
.sound-mix-slider::-webkit-slider-runnable-track {
    height: var(--range-track-height) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

input[type="range"]::-webkit-slider-thumb,
.sound-mix-slider::-webkit-slider-thumb {
    width: var(--range-thumb-size) !important;
    height: var(--range-thumb-size) !important;
    margin-top: calc((var(--range-track-height) - var(--range-thumb-size)) / 2) !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.24) !important;
}

input[type="range"]::-moz-range-track,
.sound-mix-slider::-moz-range-track,
input[type="range"]::-moz-range-progress,
.sound-mix-slider::-moz-range-progress {
    height: var(--range-track-height) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

body.candle-brightness-active input[type="range"],
body.candle-brightness-active .site-volume-slider input[type="range"],
body.candle-brightness-active .focus-visibility-slider input[type="range"],
body.candle-brightness-active .candle-brightness-slider input[type="range"],
body.candle-brightness-active .sound-mix-slider {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

body.candle-brightness-active input[type="range"]::-webkit-slider-runnable-track,
body.candle-brightness-active .sound-mix-slider::-webkit-slider-runnable-track {
    height: var(--range-track-height) !important;
    background: rgba(61, 48, 36, var(--candle-track-alpha)) !important;
    box-shadow: none !important;
}

body.candle-brightness-active input[type="range"]::-moz-range-track,
body.candle-brightness-active .sound-mix-slider::-moz-range-track {
    height: var(--range-track-height) !important;
    background: rgba(61, 48, 36, var(--candle-track-alpha)) !important;
    box-shadow: none !important;
}

body.candle-brightness-active input[type="range"]::-moz-range-progress,
body.candle-brightness-active .sound-mix-slider::-moz-range-progress {
    height: var(--range-track-height) !important;
    background: rgba(125, 139, 109, var(--candle-range-progress-alpha)) !important;
}

/* Stronger selector for the Writing Desk so candle brightness affects it on the
   main page and in Focus Mode. Feather/Ink continues to control how solid the
   writing surface feels while the candle slider is active. */
body.candle-brightness-active #writingZoneSection {
    color: var(--candle-text-color) !important;
    background:
        linear-gradient(145deg,
            rgba(255, 248, 230, var(--candle-panel-alpha-1)),
            rgba(238, 218, 178, var(--candle-panel-alpha-2))),
        linear-gradient(145deg,
            rgba(27, 19, 13, var(--focus-zone-alpha)),
            rgba(18, 13, 9, var(--focus-zone-alpha-2))) !important;
    border-color: rgba(80, 55, 38, var(--candle-border-alpha)) !important;
    backdrop-filter: blur(var(--focus-zone-blur)) saturate(1.04) !important;
    box-shadow:
        0 28px 84px rgba(0, 0, 0, var(--candle-focus-shadow-alpha)),
        0 18px 60px rgba(93, 61, 34, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, var(--candle-focus-inset-alpha)) !important;
}

body.candle-brightness-active #writingZoneSection textarea,
body.focus-mode.candle-brightness-active #writingZoneSection textarea {
    color: var(--candle-text-color) !important;
    background:
        linear-gradient(rgba(255, 252, 241, var(--candle-input-alpha)), rgba(255, 252, 241, var(--candle-input-alpha))),
        rgba(0, 0, 0, var(--focus-textarea-alpha)) !important;
    border-color: rgba(80, 55, 38, var(--candle-border-alpha)) !important;
}

body.candle-brightness-active #writingZoneSection textarea::placeholder {
    color: rgba(39, 31, 24, 0.42) !important;
}

/* Make the Focus Mode X match the Sound/Light control treatment at high candle
   brightness instead of turning into a flat gray button. */
body.focus-mode.candle-brightness-active .focus-close {
    color: var(--candle-text-color) !important;
    background: rgba(255, 252, 241, var(--candle-control-alpha)) !important;
    border-color: rgba(80, 55, 38, var(--candle-border-alpha)) !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, var(--candle-focus-inset-alpha)) !important;
    backdrop-filter: blur(10px) !important;
}

body.focus-mode.candle-brightness-active .focus-close:hover {
    background: rgba(255, 252, 241, var(--candle-control-hover-alpha)) !important;
}

/* Word-count meter stays readable in bright Focus Mode and uses the same sage
   family as the active Sound/Light controls. */
body.candle-brightness-active #writingZoneSection .char-track {
    background: rgba(61, 48, 36, var(--candle-char-track-alpha)) !important;
    border: 1px solid rgba(80, 55, 38, var(--candle-char-border-alpha)) !important;
}

body.candle-brightness-active #writingZoneSection .char-track span {
    background: linear-gradient(90deg, var(--sage-soft), var(--sage)) !important;
    box-shadow: 0 0 14px rgba(125, 139, 109, var(--candle-char-glow-alpha)) !important;
}

/* Final 99 safeguards for browsers that do not support multiplied CSS calc(). */
body.candle-brightness-active:not(.light-fireplace-glow):not(.light-rain-ambience):not(.light-wind):not(.light-thunder-flashes):not(.light-summer-daylight):not(.light-twilight):not(.light-lamplight):not(.light-moonlit-desk) {
    --story-room-bg-brightness: var(--story-room-candle-brightness) !important;
    --story-room-bg-saturation: var(--story-room-candle-saturation) !important;
    --story-room-bg-blur: var(--story-room-candle-blur) !important;
}

body.candle-brightness-active .overlay {
    background: rgba(12, 7, 4, var(--candle-room-overlay-alpha)) !important;
    backdrop-filter: blur(1.2px) saturate(var(--candle-room-overlay-saturation)) !important;
}

:root {
    --candle-range-progress-alpha: 0.42;
    --candle-control-hover-alpha: 0.13;
    --candle-focus-inset-alpha: 0;
    --candle-focus-shadow-alpha: 0.28;
    --candle-char-track-alpha: 0.14;
    --candle-char-border-alpha: 0.12;
    --candle-char-glow-alpha: 0.16;
    --candle-room-overlay-alpha: 0.40;
    --candle-room-overlay-saturation: 0.96;
    --story-room-candle-brightness: 0.72;
    --story-room-candle-saturation: 0.92;
    --story-room-candle-blur: 3.8px;
}

/* =========================================================
   Final 100: matching main/focus writing fields
   =========================================================
   The main-page writing textarea and guest pen-name field now use the
   same writing-surface color recipe as the Focus Mode desk in both the
   normal dark state and the candle-brightened state.
*/
#writingZoneSection #mainStoryInput,
#writingZoneSection #guestPenName,
body.focus-mode #writingZoneSection #mainStoryInput,
body.focus-mode #writingZoneSection #guestPenName {
    color: var(--paper) !important;
    background:
        linear-gradient(rgba(255, 245, 223, 0.035), rgba(255, 245, 223, 0.035)),
        rgba(0, 0, 0, var(--focus-textarea-alpha)) !important;
    border-color: rgba(255, 241, 212, 0.09) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

#writingZoneSection #mainStoryInput::placeholder,
#writingZoneSection #guestPenName::placeholder,
body.focus-mode #writingZoneSection #mainStoryInput::placeholder,
body.focus-mode #writingZoneSection #guestPenName::placeholder {
    color: rgba(255, 241, 212, 0.52) !important;
}

#writingZoneSection #mainStoryInput:focus,
#writingZoneSection #guestPenName:focus,
body.focus-mode #writingZoneSection #mainStoryInput:focus,
body.focus-mode #writingZoneSection #guestPenName:focus {
    border-color: var(--accent-2) !important;
    box-shadow:
        0 0 0 4px rgba(215, 165, 111, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

body.candle-brightness-active #writingZoneSection #mainStoryInput,
body.candle-brightness-active #writingZoneSection #guestPenName,
body.focus-mode.candle-brightness-active #writingZoneSection #mainStoryInput,
body.focus-mode.candle-brightness-active #writingZoneSection #guestPenName {
    color: var(--candle-text-color) !important;
    background:
        linear-gradient(rgba(255, 252, 241, var(--candle-input-alpha)), rgba(255, 252, 241, var(--candle-input-alpha))),
        rgba(0, 0, 0, var(--focus-textarea-alpha)) !important;
    border-color: rgba(80, 55, 38, var(--candle-border-alpha)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, var(--candle-focus-inset-alpha)) !important;
}

body.candle-brightness-active #writingZoneSection #mainStoryInput::placeholder,
body.candle-brightness-active #writingZoneSection #guestPenName::placeholder,
body.focus-mode.candle-brightness-active #writingZoneSection #mainStoryInput::placeholder,
body.focus-mode.candle-brightness-active #writingZoneSection #guestPenName::placeholder {
    color: rgba(39, 31, 24, 0.42) !important;
}

body.candle-brightness-active #writingZoneSection #mainStoryInput:focus,
body.candle-brightness-active #writingZoneSection #guestPenName:focus,
body.focus-mode.candle-brightness-active #writingZoneSection #mainStoryInput:focus,
body.focus-mode.candle-brightness-active #writingZoneSection #guestPenName:focus {
    border-color: rgba(80, 55, 38, calc(var(--candle-border-alpha) + 0.12)) !important;
    box-shadow:
        0 0 0 4px rgba(125, 139, 109, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, var(--candle-focus-inset-alpha)) !important;
}


/* Phase 1 polish: weekly inspiration CTA, collapsible video, and writing desk invitation */
.compact-inspiration .weekly-prompt-heading .section-label-title,
#weeklyPromptTitle {
    letter-spacing: 0.14em;
}

.compact-inspiration .prompt-strip {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.prompt-write-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 142px;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(215, 165, 111, 0.2);
}

.prompt-write-btn span:last-child {
    display: inline;
}

.video-toggle-wrapper {
    margin-top: 0.85rem;
}

.video-toggle-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    padding: 0.78rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(220, 229, 201, 0.18);
    background: rgba(255, 241, 212, 0.045);
    color: var(--sage-soft);
    font-weight: 900;
    letter-spacing: 0.01em;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.video-toggle-btn:hover,
.video-toggle-btn[aria-expanded="true"] {
    color: var(--accent-2);
    background: rgba(215, 165, 111, 0.12);
    border-color: rgba(215, 165, 111, 0.36);
    transform: translateY(-1px);
}

.video-dropdown {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-10px);
    overflow: hidden;
    margin-top: 0;
    transition: grid-template-rows 0.44s ease, opacity 0.32s ease, transform 0.44s ease, margin-top 0.32s ease;
}

.video-dropdown.open {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
    margin-top: 0.85rem;
}

.video-dropdown > .video-wrapper {
    min-height: 0;
}

.writing-desk-invite {
    animation: writingDeskInvite 2.25s ease both;
}

@keyframes writingDeskInvite {
    0% {
        border-color: rgba(255, 241, 212, 0.12);
        box-shadow: var(--shadow);
        transform: translateY(0);
    }
    36% {
        border-color: rgba(223, 191, 131, 0.48);
        box-shadow: var(--shadow), 0 0 0 1px rgba(223, 191, 131, 0.18), 0 0 34px rgba(223, 191, 131, 0.18);
        transform: translateY(-2px);
    }
    100% {
        border-color: rgba(255, 241, 212, 0.12);
        box-shadow: var(--shadow);
        transform: translateY(0);
    }
}

@media (max-width: 720px) {
    .compact-inspiration .prompt-strip {
        grid-template-columns: 1fr;
    }

    .prompt-write-btn {
        width: 100%;
    }
}

/* =========================================================
   Final 104: full-project weekly inspiration bottom trim
   ========================================================= */
/* Keep the collapsed Weekly Inspiration card compact: the bottom edge
   now sits about 30px below the Tap for video inspiration button. */
.compact-inspiration[aria-labelledby="weeklyPromptTitle"] {
    padding-bottom: 30px !important;
}

.compact-inspiration[aria-labelledby="weeklyPromptTitle"] .video-toggle-wrapper {
    margin-bottom: 0 !important;
}

/* When the video is closed, fully collapse the embedded player surface so
   its aspect-ratio padding cannot leave invisible blank space. */
.compact-inspiration[aria-labelledby="weeklyPromptTitle"] .video-dropdown:not(.open) {
    margin-top: 0 !important;
    max-height: 0 !important;
}

.compact-inspiration[aria-labelledby="weeklyPromptTitle"] .video-dropdown:not(.open) > .video-wrapper {
    padding-bottom: 0 !important;
    border-width: 0 !important;
}

.compact-inspiration[aria-labelledby="weeklyPromptTitle"] .video-dropdown.open > .video-wrapper {
    padding-bottom: 56.25% !important;
    border-width: 1px !important;
}

@media (max-width: 760px) {
    .compact-inspiration[aria-labelledby="weeklyPromptTitle"] {
        padding-bottom: 30px !important;
    }
}


/* =========================================================
   Final 105: feather prompt button + warmer main writing page
   ========================================================= */
/* Bring back the feather CTA inside Weekly Inspiration and make it
   about 20% larger, while keeping the full accessible label for screen readers. */
.compact-inspiration .prompt-strip {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.prompt-write-btn.feather-prompt-btn {
    width: 3.85rem !important;
    min-width: 3.85rem !important;
    height: 3.85rem !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-grid !important;
    place-items: center !important;
    font-size: 1.55rem !important;
    line-height: 1 !important;
    box-shadow:
        0 12px 28px rgba(215, 165, 111, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.prompt-write-btn.feather-prompt-btn span {
    display: inline-block !important;
    transform: rotate(-8deg);
    transition: transform 0.22s ease;
}

.prompt-write-btn.feather-prompt-btn:hover span {
    transform: rotate(-8deg) translateY(-1px) scale(1.08);
}

@media (max-width: 720px) {
    .prompt-write-btn.feather-prompt-btn {
        width: 4.1rem !important;
        min-width: 4.1rem !important;
        height: 4.1rem !important;
        justify-self: end;
    }
}

/* Make the main-page writing surface feel more like an old, creamy page.
   Focus Mode keeps its immersive prompt-aware surface. */
body:not(.focus-mode) #writingZoneSection #mainStoryInput {
    color: #2c1d12 !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 252, 239, 0.86), transparent 20rem),
        linear-gradient(145deg, #fbefd5 0%, #f1dcb2 52%, #dfc492 100%) !important;
    border-color: rgba(116, 78, 44, 0.34) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.64),
        inset 0 0 44px rgba(116, 78, 44, 0.10),
        0 16px 34px rgba(0, 0, 0, 0.18) !important;
}

body:not(.focus-mode) #writingZoneSection #mainStoryInput::placeholder {
    color: rgba(62, 43, 27, 0.52) !important;
    font-style: italic;
}

body:not(.focus-mode) #writingZoneSection #mainStoryInput:focus {
    border-color: rgba(147, 98, 54, 0.58) !important;
    box-shadow:
        0 0 0 4px rgba(215, 165, 111, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.70),
        inset 0 0 44px rgba(116, 78, 44, 0.09),
        0 18px 38px rgba(0, 0, 0, 0.20) !important;
}

/* Keep candle-brightness blending with the creamy page instead of snapping
   back to the darker writing surface on the main page. */
body.candle-brightness-active:not(.focus-mode) #writingZoneSection #mainStoryInput {
    color: #24170f !important;
    background:
        linear-gradient(rgba(255, 252, 241, calc(var(--candle-input-alpha) * 0.58)), rgba(255, 252, 241, calc(var(--candle-input-alpha) * 0.58))),
        radial-gradient(circle at 12% 8%, rgba(255, 252, 239, 0.9), transparent 20rem),
        linear-gradient(145deg, #fff2d6 0%, #f4ddb0 54%, #e2c692 100%) !important;
    border-color: rgba(96, 64, 36, calc(var(--candle-border-alpha) + 0.12)) !important;
}

/* =========================================================
   Footer + feedback polish
   ========================================================= */
#feedbackModal .modal-intro {
    margin-top: 5px;
}

.footer-info-modal .footer-modal-intro {
    margin-top: 0.45rem;
}

.footer-modal-list {
    display: grid;
    gap: 0.72rem;
    margin-top: 1rem;
    text-align: left;
}

.footer-modal-list p {
    margin: 0;
    color: rgba(246, 234, 212, 0.84);
    line-height: 1.5;
}

.footer-modal-list strong {
    color: var(--accent-2);
}


/* =========================================================
   Final 107: writing desk focus toggle + balanced candle slider
   ========================================================= */

/* Replace the old Focus Mode X with a single circular expand/retract button
   that lives with Sound + Light on both the main desk and Focus Mode. */
#exitFocusBtn {
    display: none !important;
}

.focus-mode-toggle {
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(208, 167, 111, 0.28) !important;
    background: rgba(14, 9, 6, 0.58) !important;
    color: var(--paper-soft) !important;
    font-weight: 900 !important;
    font-size: 1.08rem !important;
    line-height: 1 !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.focus-mode-toggle:hover,
.focus-mode-toggle[aria-pressed="true"] {
    color: #10100a !important;
    background: linear-gradient(135deg, #a8c58d, var(--accent)) !important;
    border-color: rgba(226, 244, 206, 0.34) !important;
    transform: translateY(-1px);
}

.focus-mode-toggle-icon {
    display: inline-block;
    transform: translateY(-0.02rem);
}

body.focus-mode .focus-mode-toggle-icon {
    transform: translate(-0.02rem, 0.02rem);
}

/* Let the main page Writing Desk be a true writing space instead of a
   focus-only trigger. It grows by about one-third and keeps the main-page
   surface warm/dark like the Weekly Inspiration strip, with a creamy corner. */
#writingZoneSection #mainStoryInput,
body.focus-mode #writingZoneSection #mainStoryInput {
    min-height: 440px !important;
    color: var(--paper) !important;
    background:
        radial-gradient(circle at 10% 6%, rgba(255, 248, 222, 0.26) 0, rgba(255, 248, 222, 0.12) 11rem, transparent 24rem),
        linear-gradient(135deg, rgba(32, 55, 42, 0.64), rgba(54, 37, 23, 0.59) 54%, rgba(18, 13, 9, 0.72)),
        rgba(0, 0, 0, var(--focus-textarea-alpha)) !important;
    border-color: rgba(220, 229, 201, 0.15) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        inset 0 0 44px rgba(6, 4, 2, 0.10),
        0 18px 40px rgba(0, 0, 0, 0.20) !important;
}

body.focus-mode #writingZoneSection #mainStoryInput {
    min-height: 72vh !important;
}

#writingZoneSection #mainStoryInput::placeholder,
body.focus-mode #writingZoneSection #mainStoryInput::placeholder {
    color: rgba(255, 241, 212, 0.58) !important;
    font-style: italic;
}

#writingZoneSection #mainStoryInput:focus,
body.focus-mode #writingZoneSection #mainStoryInput:focus {
    border-color: rgba(223, 191, 131, 0.44) !important;
    box-shadow:
        0 0 0 4px rgba(215, 165, 111, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 44px rgba(6, 4, 2, 0.10),
        0 20px 46px rgba(0, 0, 0, 0.24) !important;
}

/* Keep the guest pen-name field related to the writing page without making it
   as visually heavy as the story surface. */
#writingZoneSection #guestPenName {
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 248, 222, 0.18), transparent 14rem),
        linear-gradient(135deg, rgba(32, 55, 42, 0.44), rgba(54, 37, 23, 0.40)) !important;
    color: var(--paper) !important;
    border-color: rgba(220, 229, 201, 0.14) !important;
}

#writingZoneSection.is-writing-active {
    border-color: rgba(223, 191, 131, 0.24) !important;
}

/* Candle slider balance:
   50% is the default mood.
   Below 50% darkens toward the pop-up-window atmosphere.
   Above 50% brightens the writing paper toward white while preserving the
   existing warm candle behavior for the rest of the page. */
body.candle-brightness-active .overlay {
    background: rgba(12, 7, 4, var(--candle-room-overlay-alpha)) !important;
    backdrop-filter: blur(1.2px) saturate(var(--candle-room-overlay-saturation)) !important;
}

body.candle-brightness-active main .card,
body.candle-brightness-active main .story-card,
body.candle-brightness-active main .stat-card,
body.candle-brightness-active main .writing-zone,
body.candle-brightness-active .ambient-menu,
body.candle-brightness-active .modal-content.book-style,
body.candle-brightness-active .modal-content.narrow,
body.candle-brightness-active .passport-guide-style {
    color: var(--candle-text-color) !important;
    background:
        linear-gradient(rgba(0, 0, 0, var(--candle-panel-dim-alpha)), rgba(0, 0, 0, var(--candle-panel-dim-alpha))),
        linear-gradient(145deg,
            rgba(255, 248, 230, var(--candle-panel-alpha-1)),
            rgba(238, 218, 178, var(--candle-panel-alpha-2))),
        linear-gradient(145deg,
            rgba(27, 19, 13, var(--focus-zone-alpha)),
            rgba(18, 13, 9, var(--focus-zone-alpha-2))) !important;
}

/* Main and Focus Mode writing surfaces use the same candle behavior. */
body.candle-brightness-active #writingZoneSection #mainStoryInput,
body.focus-mode.candle-brightness-active #writingZoneSection #mainStoryInput {
    color: var(--candle-text-color) !important;
    background:
        linear-gradient(rgba(0, 0, 0, var(--candle-writing-dim-alpha)), rgba(0, 0, 0, var(--candle-writing-dim-alpha))),
        linear-gradient(rgba(255, 255, 252, var(--candle-paper-alpha)), rgba(255, 255, 252, var(--candle-paper-alpha))),
        radial-gradient(circle at 10% 6%, rgba(255, 248, 222, calc(0.26 + (0.50 * var(--candle-ease)))) 0, rgba(255, 248, 222, calc(0.12 + (0.32 * var(--candle-ease)))) 11rem, transparent 24rem),
        linear-gradient(135deg, rgba(32, 55, 42, 0.64), rgba(54, 37, 23, 0.59) 54%, rgba(18, 13, 9, 0.72)) !important;
    border-color: rgba(80, 55, 38, var(--candle-border-alpha)) !important;
    box-shadow:
        0 0 0 4px rgba(125, 139, 109, calc(0.04 + (0.08 * var(--candle-ease)))),
        inset 0 1px 0 rgba(255, 255, 255, var(--candle-focus-inset-alpha)),
        inset 0 0 44px rgba(6, 4, 2, calc(0.10 + (0.06 * var(--candle-dim)))),
        0 20px 48px rgba(0, 0, 0, calc(0.22 + (0.18 * var(--candle-dim)))) !important;
}

body.candle-brightness-active #writingZoneSection #guestPenName {
    color: var(--candle-text-color) !important;
    background:
        linear-gradient(rgba(0, 0, 0, calc(var(--candle-writing-dim-alpha) * 0.75)), rgba(0, 0, 0, calc(var(--candle-writing-dim-alpha) * 0.75))),
        linear-gradient(rgba(255, 255, 252, calc(var(--candle-paper-alpha) * 0.78)), rgba(255, 255, 252, calc(var(--candle-paper-alpha) * 0.78))),
        radial-gradient(circle at 8% 0%, rgba(255, 248, 222, 0.18), transparent 14rem),
        linear-gradient(135deg, rgba(32, 55, 42, 0.44), rgba(54, 37, 23, 0.40)) !important;
    border-color: rgba(80, 55, 38, var(--candle-border-alpha)) !important;
}

body.candle-brightness-active #writingZoneSection #mainStoryInput::placeholder,
body.focus-mode.candle-brightness-active #writingZoneSection #mainStoryInput::placeholder,
body.candle-brightness-active #writingZoneSection #guestPenName::placeholder {
    color: color-mix(in srgb, var(--candle-text-color) 58%, transparent) !important;
}

/* Make the circular focus button behave like the other controls on bright or
   dim candle settings. */
body.candle-brightness-active .focus-mode-toggle {
    color: var(--candle-text-color) !important;
    background: rgba(255, 252, 241, var(--candle-control-alpha)) !important;
    border-color: rgba(80, 55, 38, var(--candle-border-alpha)) !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, calc(0.16 + (0.12 * var(--candle-dim)))),
        inset 0 1px 0 rgba(255, 255, 255, var(--candle-focus-inset-alpha)) !important;
}

body.candle-brightness-active .focus-mode-toggle:hover,
body.candle-brightness-active .focus-mode-toggle[aria-pressed="true"] {
    background: rgba(255, 252, 241, var(--candle-control-hover-alpha)) !important;
}

/* Mobile keeps the bigger writing surface, but avoids making it taller than
   the visible screen once the keyboard appears. */
@media (max-width: 760px) {
    #writingZoneSection #mainStoryInput {
        min-height: 58vh !important;
    }

    body.focus-mode #writingZoneSection #mainStoryInput {
        min-height: 68vh !important;
    }

    .focus-mode-toggle {
        width: 2.55rem !important;
        height: 2.55rem !important;
        min-width: 2.55rem !important;
    }
}

/* =========================================================
   Final 108: simplified light menu + polished desk spacing
   =========================================================
   Candle brightness is paused for now. The Light popup keeps the ambient
   lighting choices and the Feather/Ink window slider only, and the Writing
   Desk control row is aligned on the right so the round focus button sits
   where the old close button belonged in Focus Mode.
*/
:root {
    --nook-section-gap: 1.25rem;
    --nook-control-height: 2.75rem;
    --nook-control-gap: 0.55rem;
    --nook-card-top-gap: 98px;
}

/* Keep top spacing between the fixed header and first card visually consistent
   with the spacing between the main content boxes. */
main {
    padding-top: var(--nook-card-top-gap) !important;
}

main > .card,
main > section.card {
    margin-bottom: var(--nook-section-gap) !important;
}

main > section.card:last-child {
    margin-bottom: 0 !important;
}

.site-footer {
    margin-top: var(--nook-section-gap) !important;
}

/* The candle slider has been removed from the Light popup; hide any fallback
   remnants if an older browser cache keeps a stale fragment alive. */
.candle-brightness-feature,
.candle-brightness-slider,
#candleBrightnessSlider {
    display: none !important;
}

/* Control row polish: Sound + Light + round Focus toggle share one visual
   height and sit comfortably in the Writing Desk corner. */
#writingZoneSection .writing-desk-header {
    position: relative;
    align-items: flex-start !important;
    min-height: var(--nook-control-height);
    margin-bottom: 1.05rem !important;
}

#writingZoneSection .writing-desk-title {
    padding-top: 0.24rem;
    padding-right: min(42vw, 18rem);
}

#writingZoneSection .focus-ambient-controls {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--nook-control-gap) !important;
    width: auto !important;
    max-width: none !important;
    left: auto !important;
    right: clamp(1rem, 2.4vw, 1.45rem) !important;
    top: 0.72rem !important;
    transform: none !important;
    z-index: 12 !important;
}

#soundEffectsBtn { order: 1; }
#lightingEffectsBtn { order: 2; }
#focusModeToggleBtn { order: 3; }

#writingZoneSection .focus-mini-btn.focus-icon-btn,
#writingZoneSection .focus-mode-toggle {
    height: var(--nook-control-height) !important;
    min-height: var(--nook-control-height) !important;
    border-radius: 999px !important;
    line-height: 1 !important;
}

#writingZoneSection .focus-mini-btn.focus-icon-btn {
    min-width: 6.7rem !important;
    padding: 0 1rem !important;
    font-size: 0.84rem !important;
}

#writingZoneSection .focus-mode-toggle {
    width: var(--nook-control-height) !important;
    min-width: var(--nook-control-height) !important;
    font-size: 1.08rem !important;
}

/* Pull the main-page buttons up slightly without crowding the Writing Desk
   title. The card still has enough top padding for the right-corner controls. */
body:not(.focus-mode) #writingZoneSection {
    padding-top: 3.95rem !important;
}

body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
    top: 0.72rem !important;
}

/* In Focus Mode, the round retract/close button sits where the old X lived;
   Sound and Light line up immediately to its left. */
body.focus-mode #writingZoneSection {
    padding-top: 3.95rem !important;
}

body.focus-mode #writingZoneSection .focus-ambient-controls {
    top: 0.68rem !important;
    right: 0.72rem !important;
    left: auto !important;
    transform: none !important;
}

body.focus-mode #writingZoneSection .focus-mini-btn.focus-icon-btn,
body.focus-mode #writingZoneSection .focus-mode-toggle {
    height: var(--nook-control-height) !important;
    min-height: var(--nook-control-height) !important;
}

body.focus-mode #writingZoneSection .focus-mode-toggle {
    width: var(--nook-control-height) !important;
    min-width: var(--nook-control-height) !important;
}

/* Right-align the popups to the controls instead of the center of the desk,
   which keeps the menu visually attached to Sound/Light and gives the Light
   popup a better size now that the candle slider is gone. */
#writingZoneSection .ambient-menu,
body:not(.focus-mode) #writingZoneSection .ambient-menu,
body.focus-mode #writingZoneSection .ambient-menu {
    left: auto !important;
    right: clamp(1rem, 2.4vw, 1.45rem) !important;
    transform: none !important;
    top: 3.85rem !important;
    width: min(340px, calc(100vw - 32px)) !important;
    max-height: min(72vh, 470px) !important;
    overflow-y: auto !important;
}

body.focus-mode #writingZoneSection .ambient-menu {
    right: 0.72rem !important;
    top: 3.8rem !important;
}

#writingZoneSection .lighting-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
}

#writingZoneSection .lighting-menu .ambient-slider-feature {
    margin-bottom: 0.22rem !important;
    padding-bottom: 0.58rem !important;
}

#writingZoneSection .lighting-menu button,
#writingZoneSection .sound-menu button {
    min-height: 2.55rem;
}

/* Slightly tighter and more consistent spacing inside the Writing Desk now that
   the top controls are in a stable right-corner row. */
#writingZoneSection .story-input-wrap {
    margin-top: 0.1rem !important;
}

#writingZoneSection .writer-tools {
    margin-top: 0.95rem !important;
}

#writingZoneSection .writer-action-line {
    margin-top: 0.75rem !important;
}

/* Keep the Weekly Inspiration card visually separated from the fixed header by
   the same rhythm used between cards. */
.compact-inspiration[aria-labelledby="weeklyPromptTitle"] {
    margin-top: 0 !important;
    margin-bottom: var(--nook-section-gap) !important;
}

/* Mobile/tablet: keep the controls comfortable, wrap only when necessary, and
   let the popups return toward center so they do not hang off-screen. */
@media (max-width: 760px) {
    :root {
        --nook-card-top-gap: 104px;
        --nook-control-height: 2.55rem;
        --nook-control-gap: 0.38rem;
    }

    #writingZoneSection .writing-desk-header {
        min-height: calc(var(--nook-control-height) * 2 + 0.55rem);
    }

    #writingZoneSection .writing-desk-title {
        padding-right: 0;
    }

    #writingZoneSection .focus-ambient-controls,
    body:not(.focus-mode) #writingZoneSection .focus-ambient-controls,
    body.focus-mode #writingZoneSection .focus-ambient-controls {
        top: 0.72rem !important;
        right: 0.85rem !important;
        left: auto !important;
        transform: none !important;
        flex-wrap: wrap !important;
        max-width: calc(100% - 1.7rem) !important;
    }

    #writingZoneSection .focus-mini-btn.focus-icon-btn {
        min-width: 5.35rem !important;
        padding: 0 0.78rem !important;
        font-size: 0.8rem !important;
    }

    body:not(.focus-mode) #writingZoneSection,
    body.focus-mode #writingZoneSection {
        padding-top: 5.25rem !important;
    }

    #writingZoneSection .ambient-menu,
    body:not(.focus-mode) #writingZoneSection .ambient-menu,
    body.focus-mode #writingZoneSection .ambient-menu {
        top: 4.45rem !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(92vw, 340px) !important;
    }
}

@media (max-width: 430px) {
    :root {
        --nook-card-top-gap: 112px;
    }

    #writingZoneSection .focus-mini-btn.focus-icon-btn {
        min-width: 4.9rem !important;
        padding: 0 0.62rem !important;
        font-size: 0.76rem !important;
    }
}

/* =========================================================
   Final 109: tighter Writing Desk top + lower inspiration card
   =========================================================
   - Weekly Inspiration now sits about 25px lower from the fixed header.
   - Writing Desk top padding is pulled back down so the header/control area
     feels closer to the earlier compact layout.
*/
:root {
    --nook-card-top-gap: 123px;
}

/* Keep the larger top gap from the header to the first card only. */
main {
    padding-top: var(--nook-card-top-gap) !important;
}

/* Main-page Writing Desk: reduce the extra blank area above the title/input. */
body:not(.focus-mode) #writingZoneSection {
    padding-top: clamp(1.35rem, 2.7vw, 2.05rem) !important;
}

body:not(.focus-mode) #writingZoneSection .writing-desk-header {
    min-height: var(--nook-control-height) !important;
    margin-bottom: 0.72rem !important;
}

body:not(.focus-mode) #writingZoneSection .writing-desk-title {
    padding-top: 0.1rem !important;
}

body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
    top: 0.55rem !important;
}

body:not(.focus-mode) #writingZoneSection .ambient-menu {
    top: 3.55rem !important;
}

body:not(.focus-mode) #writingZoneSection .story-input-wrap {
    margin-top: 0 !important;
}

/* Focus Mode keeps the corner controls, but trims the empty top area slightly
   so it visually matches the main Writing Desk more closely. */
body.focus-mode #writingZoneSection {
    padding-top: 3.35rem !important;
}

body.focus-mode #writingZoneSection .writing-desk-header {
    margin-bottom: 0.72rem !important;
}

body.focus-mode #writingZoneSection .focus-ambient-controls {
    top: 0.56rem !important;
}

body.focus-mode #writingZoneSection .ambient-menu {
    top: 3.55rem !important;
}

@media (max-width: 760px) {
    :root {
        --nook-card-top-gap: 129px;
    }

    body:not(.focus-mode) #writingZoneSection,
    body.focus-mode #writingZoneSection {
        padding-top: 4.65rem !important;
    }

    body:not(.focus-mode) #writingZoneSection .ambient-menu,
    body.focus-mode #writingZoneSection .ambient-menu {
        top: 4.25rem !important;
    }
}

@media (max-width: 430px) {
    :root {
        --nook-card-top-gap: 137px;
    }
}

/* =========================================================
   Final 110: lower Writing Desk card slightly
   =========================================================
   Adds 10px of breathing room above the main-page Writing Desk
   so the card sits a touch lower without changing Focus Mode.
*/
body:not(.focus-mode) #writingZoneSection {
    margin-top: 10px !important;
}


/* =========================================================
   Final 111: quiet Focus Mode + tighter Writing Desk headers
   =========================================================
   - Focus Mode no longer plays a page/open/close sound.
   - Main Writing Desk top/header space is trimmed another 10px.
   - Focus Mode controls are balanced so the space above the buttons
     visually matches the space below them before the writing area starts.
*/

/* Main page Writing Desk: pull the header/content area up by about 10px
   while leaving the whole card position from Final 110 intact. */
body:not(.focus-mode) #writingZoneSection {
    padding-top: calc(clamp(1.35rem, 2.7vw, 2.05rem) - 10px) !important;
}

body:not(.focus-mode) #writingZoneSection .writing-desk-header {
    margin-bottom: 0.58rem !important;
}

body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
    top: calc(0.55rem - 10px) !important;
}

body:not(.focus-mode) #writingZoneSection .ambient-menu {
    top: calc(3.55rem - 10px) !important;
}

/* Focus Mode desktop/tablet: keep Sound/Light/Close in the same row, but
   center the row inside the header band so there is even breathing room above
   and below before the writing surface begins. */
body.focus-mode #writingZoneSection {
    padding-top: 3.35rem !important;
}

body.focus-mode #writingZoneSection .writing-desk-header {
    margin-bottom: 0.58rem !important;
}

body.focus-mode #writingZoneSection .focus-ambient-controls {
    top: 0.30rem !important;
}

body.focus-mode #writingZoneSection .ambient-menu {
    top: 3.25rem !important;
}

/* Keep the round close/retract button visually aligned with Sound/Light. */
body.focus-mode #writingZoneSection .focus-mode-toggle {
    align-self: center !important;
}

@media (max-width: 760px) {
    body:not(.focus-mode) #writingZoneSection {
        padding-top: calc(4.65rem - 10px) !important;
    }

    body:not(.focus-mode) #writingZoneSection .focus-ambient-controls {
        top: calc(0.72rem - 10px) !important;
    }

    body:not(.focus-mode) #writingZoneSection .ambient-menu {
        top: calc(4.25rem - 10px) !important;
    }

    body.focus-mode #writingZoneSection {
        padding-top: calc(4.65rem - 10px) !important;
    }

    body.focus-mode #writingZoneSection .focus-ambient-controls {
        top: calc(0.72rem - 10px) !important;
    }

    body.focus-mode #writingZoneSection .ambient-menu {
        top: calc(4.25rem - 10px) !important;
    }
}

/* =========================================================
   Final 112: Focus Mode mirrors main Writing Desk header
   =========================================================
   Focus Mode now uses the same Writing Desk header rhythm as the main page:
   title locked left, Sound/Light/close controls in the same right-corner row,
   matching button heights, matching popup attachment, and the same top/bottom
   breathing room before the writing surface.
*/

/* Desktop/tablet Focus Mode: copy the main Writing Desk spacing model. */
body.focus-mode #writingZoneSection {
    padding-top: calc(clamp(1.35rem, 2.7vw, 2.05rem) - 10px) !important;
}

body.focus-mode #writingZoneSection .writing-desk-header {
    position: relative !important;
    align-items: flex-start !important;
    min-height: var(--nook-control-height) !important;
    margin: 0 0 0.58rem 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

body.focus-mode #writingZoneSection .writing-desk-title {
    padding-top: 0.1rem !important;
    padding-right: min(42vw, 18rem) !important;
    margin: 0 !important;
    text-align: left !important;
    max-width: none !important;
}

body.focus-mode #writingZoneSection .writing-desk-title .eyebrow {
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
}

body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls,
body.focus-mode #writingZoneSection .focus-ambient-controls {
    display: inline-flex !important;
    position: absolute !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--nook-control-gap) !important;
    width: auto !important;
    max-width: none !important;
    top: calc(0.55rem - 10px) !important;
    right: clamp(1rem, 2.4vw, 1.45rem) !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 12 !important;
}

body.focus-mode #writingZoneSection .focus-mini-btn.focus-icon-btn,
body.focus-mode #writingZoneSection .focus-mode-toggle {
    height: var(--nook-control-height) !important;
    min-height: var(--nook-control-height) !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    align-self: center !important;
}

body.focus-mode #writingZoneSection .focus-mini-btn.focus-icon-btn {
    min-width: 6.7rem !important;
    padding: 0 1rem !important;
    font-size: 0.84rem !important;
}

body.focus-mode #writingZoneSection .focus-mode-toggle {
    width: var(--nook-control-height) !important;
    min-width: var(--nook-control-height) !important;
    font-size: 1.08rem !important;
}

body.focus-mode #writingZoneSection .ambient-menu {
    top: calc(3.55rem - 10px) !important;
    right: clamp(1rem, 2.4vw, 1.45rem) !important;
    left: auto !important;
    transform: none !important;
    width: min(340px, calc(100vw - 32px)) !important;
    max-height: min(72vh, 470px) !important;
    overflow-y: auto !important;
}

/* Mobile Focus Mode: match the main-page stacked/right-corner control layout
   instead of hiding Sound/Light. */
@media (max-width: 760px) {
    body.focus-mode #writingZoneSection {
        padding-top: calc(4.65rem - 10px) !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-header {
        min-height: calc(var(--nook-control-height) * 2 + 0.55rem) !important;
        margin: 0 0 0.58rem 0 !important;
        padding: 0 !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-title {
        padding-top: 0.1rem !important;
        padding-right: 0 !important;
        max-width: calc(100vw - 11rem) !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-title .eyebrow {
        top: 0 !important;
        font-size: 0.76rem !important;
        letter-spacing: 0.11em !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls,
    body.focus-mode #writingZoneSection .focus-ambient-controls {
        display: inline-flex !important;
        position: absolute !important;
        top: calc(0.72rem - 10px) !important;
        right: 0.85rem !important;
        left: auto !important;
        transform: none !important;
        flex-wrap: wrap !important;
        max-width: calc(100% - 1.7rem) !important;
        justify-content: flex-end !important;
        gap: var(--nook-control-gap) !important;
        margin: 0 !important;
    }

    body.focus-mode #writingZoneSection .focus-mini-btn.focus-icon-btn {
        min-width: 5.35rem !important;
        height: var(--nook-control-height) !important;
        min-height: var(--nook-control-height) !important;
        padding: 0 0.78rem !important;
        font-size: 0.8rem !important;
    }

    body.focus-mode #writingZoneSection .focus-mode-toggle {
        width: var(--nook-control-height) !important;
        min-width: var(--nook-control-height) !important;
        height: var(--nook-control-height) !important;
        min-height: var(--nook-control-height) !important;
    }

    body.focus-mode #writingZoneSection .ambient-menu {
        display: grid !important;
        top: calc(4.25rem - 10px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(92vw, 340px) !important;
    }
}

@media (max-width: 430px) {
    body.focus-mode #writingZoneSection .focus-mini-btn.focus-icon-btn {
        min-width: 4.9rem !important;
        padding: 0 0.62rem !important;
        font-size: 0.76rem !important;
    }
}

/* =========================================================
   Final 113: Focus Mode slight lower placement + button nudge
   =========================================================
   Move the Focus Mode card down a touch and shift the Focus Mode
   Sound/Light/retract controls about 30px to the right.
*/

body.focus-mode #writingZoneSection {
    margin-top: calc(min(4vh, 32px) + 10px) !important;
}

body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls,
body.focus-mode #writingZoneSection .focus-ambient-controls {
    transform: translateX(30px) !important;
}

body.focus-mode #writingZoneSection .ambient-menu {
    transform: translateX(30px) !important;
}

@media (max-width: 760px) {
    body.focus-mode #writingZoneSection {
        margin-top: 10px !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls,
    body.focus-mode #writingZoneSection .focus-ambient-controls {
        transform: translateX(30px) !important;
    }

    body.focus-mode #writingZoneSection .ambient-menu {
        transform: translateX(calc(-50% + 30px)) !important;
    }
}

@media (max-width: 430px) {
    body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls,
    body.focus-mode #writingZoneSection .focus-ambient-controls {
        transform: translateX(18px) !important;
    }

    body.focus-mode #writingZoneSection .ambient-menu {
        transform: translateX(calc(-50% + 18px)) !important;
    }
}

/* =========================================================
   Final 114: Focus Mode header vertical balance + right nudge
   =========================================================
   The Focus Mode title/control row is visually centered within the
   header band between the card top and the writing surface. Controls
   also move another 10px to the right from Final 113.
*/
:root {
    --nook-focus-header-balance-lift: 10px;
    --nook-focus-control-right-nudge: 40px;
}

body.focus-mode #writingZoneSection .writing-desk-header {
    transform: translateY(calc(-1 * var(--nook-focus-header-balance-lift))) !important;
    margin-bottom: calc(0.58rem + var(--nook-focus-header-balance-lift)) !important;
}

body.focus-mode #writingZoneSection .writing-desk-title,
body.focus-mode #writingZoneSection .writing-desk-title .eyebrow {
    transform: none !important;
}

body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls,
body.focus-mode #writingZoneSection .focus-ambient-controls {
    transform: translateX(var(--nook-focus-control-right-nudge)) !important;
}

body.focus-mode #writingZoneSection .ambient-menu {
    top: calc(3.55rem - 20px) !important;
    transform: translateX(var(--nook-focus-control-right-nudge)) !important;
}

@media (max-width: 760px) {
    :root {
        --nook-focus-header-balance-lift: 8px;
        --nook-focus-control-right-nudge: 40px;
    }

    body.focus-mode #writingZoneSection .writing-desk-header {
        transform: translateY(calc(-1 * var(--nook-focus-header-balance-lift))) !important;
        margin-bottom: calc(0.58rem + var(--nook-focus-header-balance-lift)) !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls,
    body.focus-mode #writingZoneSection .focus-ambient-controls {
        transform: translateX(var(--nook-focus-control-right-nudge)) !important;
    }

    body.focus-mode #writingZoneSection .ambient-menu {
        top: calc(4.25rem - 18px) !important;
        transform: translateX(calc(-50% + var(--nook-focus-control-right-nudge))) !important;
    }
}

@media (max-width: 430px) {
    :root {
        --nook-focus-control-right-nudge: 28px;
    }
}

/* =========================================================
   Final 116: Focus Mode writing surface lift correction
   =========================================================
   Lift only the focus-mode writing surface upward by 22px and
   add that space back into its height, so the header/buttons stay
   exactly where they are while the writing area visually expands
   into the available space.
*/
body.focus-mode #writingZoneSection textarea#mainStoryInput,
body.focus-mode #writingZoneSection .writing-zone textarea,
body.focus-mode #writingZoneSection textarea {
    position: relative !important;
    top: -22px !important;
    min-height: calc(62vh + 22px) !important;
}

@media (max-width: 640px) {
    body.focus-mode #writingZoneSection textarea#mainStoryInput,
    body.focus-mode #writingZoneSection textarea {
        top: -22px !important;
        min-height: calc(300px + 22px) !important;
    }
}

/* =========================================================
   Final 117: Focus Mode writing surface correction + control alignment
   =========================================================
   Lower the focus-mode writing surface 5px from the previous 22px lift
   and align the right edge of the focus/retract control with the right
   edge of the writing surface.
*/
body.focus-mode #writingZoneSection textarea#mainStoryInput,
body.focus-mode #writingZoneSection .writing-zone textarea,
body.focus-mode #writingZoneSection textarea {
    top: -17px !important;
    min-height: calc(62vh + 17px) !important;
}

body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls,
body.focus-mode #writingZoneSection .focus-ambient-controls {
    right: 0 !important;
    transform: none !important;
}

body.focus-mode #writingZoneSection .ambient-menu {
    right: 0 !important;
    transform: none !important;
}

@media (max-width: 760px) {
    body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls,
    body.focus-mode #writingZoneSection .focus-ambient-controls {
        right: 0 !important;
        transform: none !important;
    }

    body.focus-mode #writingZoneSection .ambient-menu {
        left: auto !important;
        right: 0 !important;
        transform: none !important;
    }
}

@media (max-width: 640px) {
    body.focus-mode #writingZoneSection textarea#mainStoryInput,
    body.focus-mode #writingZoneSection textarea {
        top: -17px !important;
        min-height: calc(300px + 17px) !important;
    }
}

/* =========================================================
   Final 118: main-page Sound/Light height match
   =========================================================
   Match the main-page Sound and Light pill heights to the circular
   Enter Focus Mode button without shifting their placement.
*/
body:not(.focus-mode) #writingZoneSection #soundEffectsBtn,
body:not(.focus-mode) #writingZoneSection #lightingEffectsBtn {
    height: var(--nook-control-height) !important;
    min-height: var(--nook-control-height) !important;
    max-height: var(--nook-control-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* =========================================================
   Final 119: identical old-paper writing surface in Focus Mode
   =========================================================
   The focus-mode textarea was still inheriting older transparent/dark rules.
   This locks the main page and Focus Mode writing surfaces to the same
   opaque old-page treatment, so Focus Mode no longer looks dim or see-through.
*/
#writingZoneSection #mainStoryInput,
body:not(.focus-mode) #writingZoneSection #mainStoryInput,
body.focus-mode #writingZoneSection #mainStoryInput,
body.candle-brightness-active #writingZoneSection #mainStoryInput,
body.focus-mode.candle-brightness-active #writingZoneSection #mainStoryInput {
    opacity: 1 !important;
    color: #2c1d12 !important;
    background-color: #f1dcb2 !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 252, 239, 0.92) 0, rgba(255, 252, 239, 0.60) 10rem, transparent 24rem),
        linear-gradient(145deg, #fbefd5 0%, #f1dcb2 52%, #dfc492 100%) !important;
    border-color: rgba(116, 78, 44, 0.34) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.66),
        inset 0 0 44px rgba(116, 78, 44, 0.10),
        0 16px 34px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#writingZoneSection #mainStoryInput::placeholder,
body:not(.focus-mode) #writingZoneSection #mainStoryInput::placeholder,
body.focus-mode #writingZoneSection #mainStoryInput::placeholder,
body.candle-brightness-active #writingZoneSection #mainStoryInput::placeholder,
body.focus-mode.candle-brightness-active #writingZoneSection #mainStoryInput::placeholder {
    color: rgba(62, 43, 27, 0.52) !important;
    font-style: italic !important;
}

#writingZoneSection #mainStoryInput:focus,
body:not(.focus-mode) #writingZoneSection #mainStoryInput:focus,
body.focus-mode #writingZoneSection #mainStoryInput:focus,
body.candle-brightness-active #writingZoneSection #mainStoryInput:focus,
body.focus-mode.candle-brightness-active #writingZoneSection #mainStoryInput:focus {
    border-color: rgba(147, 98, 54, 0.58) !important;
    box-shadow:
        0 0 0 4px rgba(215, 165, 111, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        inset 0 0 44px rgba(116, 78, 44, 0.09),
        0 18px 38px rgba(0, 0, 0, 0.20) !important;
}

/* Preserve the current Focus Mode placement from Final 117 while changing
   only the surface treatment. */
body.focus-mode #writingZoneSection textarea#mainStoryInput,
body.focus-mode #writingZoneSection .writing-zone textarea,
body.focus-mode #writingZoneSection textarea {
    top: -17px !important;
}

/* =========================================================
   Final 120: Feather / Ink affects the writing paper itself
   =========================================================
   The Light menu's Feather <-> Ink slider now also feathers the textarea
   parchment on both the main page and Focus Mode. Moving toward Feather makes
   the old-paper surface translucent so the room/background shows through;
   once the slider passes the middle toward Feather, the writing switches to
   light ink for readability.
*/
:root {
    --nook-writing-paper-alpha: 1;
    --nook-writing-highlight-alpha: 0.92;
    --nook-writing-glow-alpha: 0.38;
    --nook-writing-border-alpha: 0.34;
    --nook-writing-shadow-alpha: 0.18;
    --nook-writing-paper-blur: 0.15px;
    --nook-writing-text-color: #2c1d12;
    --nook-writing-placeholder-color: rgba(62, 43, 27, 0.52);
    --nook-writing-caret-color: #2c1d12;
    --nook-writing-text-shadow: none;
}

#writingZoneSection #mainStoryInput,
body:not(.focus-mode) #writingZoneSection #mainStoryInput,
body.focus-mode #writingZoneSection #mainStoryInput,
body.candle-brightness-active #writingZoneSection #mainStoryInput,
body.focus-mode.candle-brightness-active #writingZoneSection #mainStoryInput {
    opacity: 1 !important;
    color: var(--nook-writing-text-color) !important;
    caret-color: var(--nook-writing-caret-color) !important;
    text-shadow: var(--nook-writing-text-shadow) !important;
    background-color: rgba(241, 220, 178, var(--nook-writing-paper-alpha)) !important;
    background:
        radial-gradient(circle at 12% 8%,
            rgba(255, 252, 239, var(--nook-writing-highlight-alpha)) 0,
            rgba(255, 252, 239, calc(var(--nook-writing-highlight-alpha) * 0.64)) 10rem,
            rgba(255, 252, 239, 0) 24rem),
        linear-gradient(145deg,
            rgba(251, 239, 213, var(--nook-writing-paper-alpha)) 0%,
            rgba(241, 220, 178, calc(var(--nook-writing-paper-alpha) * 0.96)) 52%,
            rgba(223, 196, 146, calc(var(--nook-writing-paper-alpha) * 0.88)) 100%) !important;
    border-color: rgba(116, 78, 44, var(--nook-writing-border-alpha)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, calc(var(--nook-writing-highlight-alpha) * 0.72)),
        inset 0 0 44px rgba(116, 78, 44, calc(var(--nook-writing-glow-alpha) * 0.28)),
        0 16px 34px rgba(0, 0, 0, var(--nook-writing-shadow-alpha)) !important;
    backdrop-filter: blur(var(--nook-writing-paper-blur)) !important;
    -webkit-backdrop-filter: blur(var(--nook-writing-paper-blur)) !important;
    transition:
        color 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        backdrop-filter 0.22s ease,
        -webkit-backdrop-filter 0.22s ease !important;
}

#writingZoneSection #mainStoryInput::placeholder,
body:not(.focus-mode) #writingZoneSection #mainStoryInput::placeholder,
body.focus-mode #writingZoneSection #mainStoryInput::placeholder,
body.candle-brightness-active #writingZoneSection #mainStoryInput::placeholder,
body.focus-mode.candle-brightness-active #writingZoneSection #mainStoryInput::placeholder {
    color: var(--nook-writing-placeholder-color) !important;
    text-shadow: var(--nook-writing-text-shadow) !important;
    font-style: italic !important;
}

#writingZoneSection #mainStoryInput:focus,
body:not(.focus-mode) #writingZoneSection #mainStoryInput:focus,
body.focus-mode #writingZoneSection #mainStoryInput:focus,
body.candle-brightness-active #writingZoneSection #mainStoryInput:focus,
body.focus-mode.candle-brightness-active #writingZoneSection #mainStoryInput:focus {
    border-color: rgba(147, 98, 54, calc(var(--nook-writing-border-alpha) + 0.18)) !important;
    box-shadow:
        0 0 0 4px rgba(215, 165, 111, calc(0.10 + (var(--nook-writing-ink-factor, 1) * 0.10))),
        inset 0 1px 0 rgba(255, 255, 255, calc(var(--nook-writing-highlight-alpha) * 0.78)),
        inset 0 0 44px rgba(116, 78, 44, calc(var(--nook-writing-glow-alpha) * 0.24)),
        0 18px 38px rgba(0, 0, 0, calc(var(--nook-writing-shadow-alpha) + 0.02)) !important;
}

/* When the paper is feathered enough for light text, give selection/readability
   a darker highlight so white writing remains comfortable over the room image. */
body.writing-paper-feathered #writingZoneSection #mainStoryInput::selection {
    color: #fffaf0 !important;
    background: rgba(0, 0, 0, 0.42) !important;
}


/* Story Nook 121: basic writing tools */
:root {
    --writing-user-font-family: 'Cormorant Garamond', Georgia, serif;
    --writing-user-font-size: 1.42rem;
    --writing-user-font-weight: 500;
    --writing-user-font-style: normal;
}

.typing-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin: 0.72rem 0 0.22rem;
    padding: 0.58rem 0.68rem;
    border-radius: 18px;
    border: 1px solid rgba(220, 229, 201, 0.16);
    background:
        radial-gradient(circle at 12% 0%, rgba(246, 234, 212, 0.12), transparent 13rem),
        linear-gradient(135deg, rgba(32, 55, 42, 0.46), rgba(54, 37, 23, 0.34));
    box-shadow: inset 0 1px 0 rgba(255, 241, 212, 0.08), 0 10px 24px rgba(0, 0, 0, 0.14);
}

.typing-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.typing-toolbar-selects { flex: 1 1 320px; }

.typing-control {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--sage-soft);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.typing-control select {
    width: auto;
    min-width: 132px;
    height: 40px;
    padding: 0.42rem 2.1rem 0.42rem 0.78rem;
    border-radius: 999px;
    color: var(--paper);
    background: rgba(13, 9, 6, 0.44);
    border: 1px solid rgba(215, 165, 111, 0.28);
    box-shadow: none;
}

.typing-control select:focus {
    border-color: rgba(223, 191, 131, 0.78);
    box-shadow: 0 0 0 3px rgba(215, 165, 111, 0.14);
}

.typing-format-toggles {
    justify-content: flex-end;
    margin-left: auto;
}

.typing-tool-btn {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: var(--sage-soft);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(220, 229, 201, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 241, 212, 0.08);
    font: 900 1rem/1 var(--font-ui);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.typing-tool-btn:hover {
    transform: translateY(-1px);
    color: var(--paper);
    background: rgba(156, 175, 136, 0.18);
    border-color: rgba(220, 229, 201, 0.32);
}

.typing-tool-btn[aria-pressed="true"] {
    color: #1d130d;
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    border-color: rgba(255, 245, 223, 0.48);
    box-shadow: 0 8px 18px rgba(215, 165, 111, 0.20);
}

#writingZoneSection #mainStoryInput,
body:not(.focus-mode) #writingZoneSection #mainStoryInput,
body.focus-mode #writingZoneSection #mainStoryInput,
body.candle-brightness-active #writingZoneSection #mainStoryInput,
body.focus-mode.candle-brightness-active #writingZoneSection #mainStoryInput {
    font-family: var(--writing-user-font-family) !important;
    font-size: var(--writing-user-font-size) !important;
    font-weight: var(--writing-user-font-weight) !important;
    font-style: var(--writing-user-font-style) !important;
    line-height: 1.72 !important;
}

body.focus-mode .typing-toolbar {
    margin-top: 0.62rem;
    margin-bottom: 0.16rem;
}

@media (max-width: 720px) {
    .typing-toolbar {
        align-items: stretch;
        padding: 0.68rem;
    }

    .typing-toolbar-group,
    .typing-toolbar-selects,
    .typing-format-toggles {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    .typing-control {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .typing-control select {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* =========================================================
   Final 122: mobile Focus Mode header alignment polish
   =========================================================
   On small screens, Focus Mode now mirrors the desktop header rhythm:
   Writing Desk stays left, Sound/Light/retract stay together on one clean
   right-aligned row, and the writing paper sits below with intentional space.
*/
@media (max-width: 760px) {
    body.focus-mode main {
        padding-top: 54px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body.focus-mode #writingZoneSection {
        padding: 1.18rem 1rem 0.9rem !important;
        min-height: calc(100svh - 66px) !important;
        border-radius: 20px !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.72rem !important;
        width: 100% !important;
        min-height: var(--nook-control-height) !important;
        margin: 0 0 1rem 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-title {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        align-self: center !important;
        justify-self: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-title .eyebrow {
        top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        font-size: 0.76rem !important;
        letter-spacing: 0.12em !important;
        white-space: nowrap !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls,
    body.focus-mode #writingZoneSection .focus-ambient-controls {
        position: static !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 0.46rem !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }

    body.focus-mode #writingZoneSection .focus-mini-btn.focus-icon-btn {
        height: var(--nook-control-height) !important;
        min-height: var(--nook-control-height) !important;
        min-width: 5.05rem !important;
        padding: 0 0.72rem !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.focus-mode #writingZoneSection .focus-icon-btn > span:first-child {
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    body.focus-mode #writingZoneSection .focus-mode-toggle {
        width: var(--nook-control-height) !important;
        min-width: var(--nook-control-height) !important;
        height: var(--nook-control-height) !important;
        min-height: var(--nook-control-height) !important;
        margin: 0 !important;
    }

    body.focus-mode #writingZoneSection .ambient-menu {
        top: 4.05rem !important;
        right: 1rem !important;
        left: auto !important;
        transform: none !important;
        width: min(92vw, 340px) !important;
    }

    body.focus-mode #writingZoneSection #mainStoryInput,
    body.focus-mode #writingZoneSection textarea#mainStoryInput,
    body.focus-mode #writingZoneSection textarea {
        top: 0 !important;
        min-height: min(64svh, 470px) !important;
    }
}

@media (max-width: 430px) {
    body.focus-mode #writingZoneSection {
        padding-left: 0.82rem !important;
        padding-right: 0.82rem !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-header {
        gap: 0.52rem !important;
        margin-bottom: 0.88rem !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-title .eyebrow {
        font-size: 0.72rem !important;
        letter-spacing: 0.105em !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls,
    body.focus-mode #writingZoneSection .focus-ambient-controls {
        gap: 0.34rem !important;
    }

    body.focus-mode #writingZoneSection .focus-mini-btn.focus-icon-btn {
        min-width: 4.52rem !important;
        padding: 0 0.56rem !important;
        font-size: 0.74rem !important;
    }
}

@media (max-width: 370px) {
    body.focus-mode #writingZoneSection .writing-desk-header {
        gap: 0.4rem !important;
    }

    body.focus-mode #writingZoneSection .focus-mini-btn.focus-icon-btn {
        min-width: 4.18rem !important;
        padding: 0 0.46rem !important;
        font-size: 0.7rem !important;
    }

    body.focus-mode #writingZoneSection .writing-desk-title .eyebrow {
        font-size: 0.68rem !important;
        letter-spacing: 0.095em !important;
    }
}


/* =========================================================
   Final 124: mobile writing tools layout polish
   ========================================================= */
@media (max-width: 720px) {
    .typing-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: start !important; gap: 0.58rem 0.62rem !important; padding: 0.64rem 0.68rem !important; }
    .typing-toolbar-selects { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 0.58rem !important; width: 100% !important; flex: none !important; margin: 0 !important; }
    .typing-control { width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.32rem !important; flex: none !important; }
    .typing-control span { padding-left: 0.14rem !important; line-height: 1 !important; }
    .typing-control select { width: 100% !important; min-width: 0 !important; height: 40px !important; padding-left: 0.7rem !important; padding-right: 1.75rem !important; }
    .typing-format-toggles { grid-column: 1 / 2 !important; display: inline-flex !important; width: auto !important; justify-content: flex-start !important; align-items: center !important; gap: 0.42rem !important; margin: 0 !important; padding: 0 !important; }
    .typing-tool-btn { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; }
}
@media (max-width: 380px) {
    .typing-toolbar { gap: 0.52rem 0.5rem !important; padding: 0.58rem !important; }
    .typing-toolbar-selects { gap: 0.48rem !important; }
    .typing-control { font-size: 0.66rem !important; letter-spacing: 0.075em !important; }
    .typing-control select { height: 38px !important; padding-left: 0.58rem !important; padding-right: 1.5rem !important; font-size: 0.78rem !important; }
    .typing-tool-btn { width: 36px !important; height: 36px !important; flex-basis: 36px !important; }
}


/* =========================================================
   Final 125: mobile Writing Desk header balance
   =========================================================
   Mobile desk headers now match the desktop rhythm: Writing Desk title on the
   left, Sound / Light / Focus controls side-by-side on the right, and a compact
   even margin before the writing paper. This shared mobile block is the spacing
   model to preserve for future iterations.
*/
@media (max-width: 760px) {
    :root { --nook-mobile-control-height: 2.46rem; --nook-mobile-control-gap: 0.34rem; }
    body.focus-mode main { padding-top: 48px !important; padding-left: 10px !important; padding-right: 10px !important; }
    body:not(.focus-mode) #writingZoneSection, body.focus-mode #writingZoneSection { padding: 1.08rem 1rem 1rem !important; border-radius: 24px !important; }
    body.focus-mode #writingZoneSection { min-height: calc(100svh - 60px) !important; }
    #writingZoneSection .writing-desk-header, body:not(.focus-mode) #writingZoneSection .writing-desk-header, body.focus-mode #writingZoneSection .writing-desk-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.66rem !important; width: 100% !important; min-height: var(--nook-mobile-control-height) !important; margin: 0 0 0.72rem 0 !important; padding: 0 !important; position: relative !important; transform: none !important; }
    #writingZoneSection .writing-desk-title, body:not(.focus-mode) #writingZoneSection .writing-desk-title, body.focus-mode #writingZoneSection .writing-desk-title { flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; align-self: center !important; text-align: left !important; }
    #writingZoneSection .writing-desk-title .eyebrow, body:not(.focus-mode) #writingZoneSection .writing-desk-title .eyebrow, body.focus-mode #writingZoneSection .writing-desk-title .eyebrow { margin: 0 !important; padding: 0 !important; line-height: 1 !important; top: 0 !important; transform: none !important; white-space: nowrap !important; font-size: 0.74rem !important; letter-spacing: 0.105em !important; }
    #writingZoneSection .writing-desk-controls.focus-ambient-controls, #writingZoneSection .focus-ambient-controls, body:not(.focus-mode) #writingZoneSection .writing-desk-controls.focus-ambient-controls, body:not(.focus-mode) #writingZoneSection .focus-ambient-controls, body.focus-mode #writingZoneSection .writing-desk-controls.focus-ambient-controls, body.focus-mode #writingZoneSection .focus-ambient-controls { position: static !important; display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: var(--nook-mobile-control-gap) !important; width: auto !important; max-width: none !important; margin: 0 0 0 auto !important; padding: 0 !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; z-index: 12 !important; }
    #writingZoneSection .focus-mini-btn.focus-icon-btn, body:not(.focus-mode) #writingZoneSection .focus-mini-btn.focus-icon-btn, body.focus-mode #writingZoneSection .focus-mini-btn.focus-icon-btn { height: var(--nook-mobile-control-height) !important; min-height: var(--nook-mobile-control-height) !important; min-width: 4.78rem !important; padding: 0 0.62rem !important; border-radius: 999px !important; font-size: 0.74rem !important; line-height: 1 !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.28rem !important; flex: 0 0 auto !important; }
    #writingZoneSection .focus-icon-btn > span:first-child, body.focus-mode #writingZoneSection .focus-icon-btn > span:first-child { font-size: 0.94rem !important; line-height: 1 !important; }
    #writingZoneSection .focus-mode-toggle, body:not(.focus-mode) #writingZoneSection .focus-mode-toggle, body.focus-mode #writingZoneSection .focus-mode-toggle { width: var(--nook-mobile-control-height) !important; min-width: var(--nook-mobile-control-height) !important; height: var(--nook-mobile-control-height) !important; min-height: var(--nook-mobile-control-height) !important; margin: 0 !important; flex: 0 0 var(--nook-mobile-control-height) !important; display: inline-grid !important; place-items: center !important; border-radius: 50% !important; }
    #writingZoneSection .story-input-wrap, body.focus-mode #writingZoneSection .story-input-wrap { margin-top: 0 !important; }
    body.focus-mode #writingZoneSection #mainStoryInput, body.focus-mode #writingZoneSection textarea#mainStoryInput, body.focus-mode #writingZoneSection textarea { top: 0 !important; min-height: min(64svh, 470px) !important; }
    #writingZoneSection .ambient-menu, body:not(.focus-mode) #writingZoneSection .ambient-menu, body.focus-mode #writingZoneSection .ambient-menu { top: calc(1.08rem + var(--nook-mobile-control-height) + 0.45rem) !important; left: auto !important; right: 1rem !important; transform: none !important; width: min(92vw, 340px) !important; max-width: calc(100vw - 2rem) !important; }
}
@media (max-width: 430px) {
    :root { --nook-mobile-control-height: 2.38rem; --nook-mobile-control-gap: 0.28rem; }
    body:not(.focus-mode) #writingZoneSection, body.focus-mode #writingZoneSection { padding-left: 0.82rem !important; padding-right: 0.82rem !important; }
    #writingZoneSection .writing-desk-header, body.focus-mode #writingZoneSection .writing-desk-header { gap: 0.46rem !important; margin-bottom: 0.66rem !important; }
    #writingZoneSection .writing-desk-title .eyebrow, body.focus-mode #writingZoneSection .writing-desk-title .eyebrow { font-size: 0.70rem !important; letter-spacing: 0.095em !important; }
    #writingZoneSection .focus-mini-btn.focus-icon-btn, body.focus-mode #writingZoneSection .focus-mini-btn.focus-icon-btn { min-width: 4.32rem !important; padding: 0 0.48rem !important; font-size: 0.70rem !important; gap: 0.23rem !important; }
    #writingZoneSection .focus-icon-btn > span:first-child, body.focus-mode #writingZoneSection .focus-icon-btn > span:first-child { font-size: 0.88rem !important; }
    #writingZoneSection .ambient-menu, body:not(.focus-mode) #writingZoneSection .ambient-menu, body.focus-mode #writingZoneSection .ambient-menu { right: 0.82rem !important; max-width: calc(100vw - 1.64rem) !important; }
}
@media (max-width: 370px) {
    #writingZoneSection .writing-desk-header, body.focus-mode #writingZoneSection .writing-desk-header { gap: 0.34rem !important; }
    #writingZoneSection .focus-mini-btn.focus-icon-btn, body.focus-mode #writingZoneSection .focus-mini-btn.focus-icon-btn { min-width: 3.96rem !important; padding: 0 0.38rem !important; font-size: 0.66rem !important; }
    #writingZoneSection .focus-icon-btn > span:first-child, body.focus-mode #writingZoneSection .focus-icon-btn > span:first-child { display: none !important; }
    #writingZoneSection .writing-desk-title .eyebrow, body.focus-mode #writingZoneSection .writing-desk-title .eyebrow { font-size: 0.66rem !important; letter-spacing: 0.08em !important; }
}


/* =========================================================
   Final 126: mobile ambient popup stability fix
   =========================================================
   The Sound/Light menus must never appear unless their buttons explicitly
   remove .hidden. This overrides older responsive display rules that could
   leave a menu visible during mobile Focus Mode resize/keyboard changes.
*/
#writingZoneSection .ambient-menu,
body:not(.focus-mode) #writingZoneSection .ambient-menu,
body.focus-mode #writingZoneSection .ambient-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#writingZoneSection .ambient-menu:not(.hidden),
body:not(.focus-mode) #writingZoneSection .ambient-menu:not(.hidden),
body.focus-mode #writingZoneSection .ambient-menu:not(.hidden) {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#writingZoneSection .ambient-menu.hidden,
body:not(.focus-mode) #writingZoneSection .ambient-menu.hidden,
body.focus-mode #writingZoneSection .ambient-menu.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 760px) {
    #writingZoneSection .ambient-menu:not(.hidden),
    body:not(.focus-mode) #writingZoneSection .ambient-menu:not(.hidden),
    body.focus-mode #writingZoneSection .ambient-menu:not(.hidden) {
        top: calc(1.08rem + var(--nook-mobile-control-height) + 0.45rem) !important;
        right: 1rem !important;
        left: auto !important;
        transform: none !important;
        z-index: 30 !important;
    }
}

/* =========================================================
   Final 127: writing tools select arrow alignment
   =========================================================
   Moves the Font and Size dropdown arrows inward so they feel centered
   inside the rounded controls on both the main page and Focus Mode.
*/
#writingZoneSection .typing-control select,
body.focus-mode #writingZoneSection .typing-control select {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 2.85rem !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23dfbf83' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1.35rem center !important;
    background-size: 0.82rem 0.82rem !important;
}

#writingZoneSection .typing-control select::-ms-expand {
    display: none !important;
}

@media (max-width: 720px) {
    #writingZoneSection .typing-control select,
    body.focus-mode #writingZoneSection .typing-control select {
        padding-right: 2.65rem !important;
        background-position: right 1.22rem center !important;
    }
}

/* =========================================================
   Final 128: nudge writing tools select arrows slightly right
   =========================================================
   The previous inset was a touch too far left. This moves the custom
   Font and Size dropdown arrows 4px back toward the right edge on both
   the main page and Focus Mode without changing the layout.
*/
#writingZoneSection .typing-control select,
body.focus-mode #writingZoneSection .typing-control select {
    background-position: right 1.10rem center !important;
}

@media (max-width: 720px) {
    #writingZoneSection .typing-control select,
    body.focus-mode #writingZoneSection .typing-control select {
        background-position: right 0.97rem center !important;
    }
}

/* =========================================================
   Final 129: Focus Mode desktop eraser placement
   =========================================================
   In Focus Mode, the writing surface is lifted upward while the eraser
   stays positioned inside the wrapper. This pulls the eraser back up into
   the paper and nudges it slightly right so it matches the main-page feel.
*/
@media (min-width: 761px) {
    body.focus-mode #writingZoneSection .textarea-eraser {
        right: 0.58rem !important;
        bottom: calc(0.78rem + 17px) !important;
        z-index: 8 !important;
    }

    body.focus-mode #writingZoneSection .textarea-eraser:hover {
        transform: translateY(-1px) !important;
    }
}


/* Story Nook 130: micro polish + publish moment + draft persistence cues */
#writingZoneSection #mainStoryInput,
body.focus-mode #writingZoneSection #mainStoryInput {
    caret-color: #8f5f34 !important;
    transition:
        background 0.25s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.24s ease,
        filter 0.2s ease !important;
}

body.writing-paper-feathered #writingZoneSection #mainStoryInput,
body.writing-paper-feathered.focus-mode #writingZoneSection #mainStoryInput {
    caret-color: rgba(255, 249, 233, 0.94) !important;
}

#writingZoneSection #mainStoryInput::placeholder,
body.focus-mode #writingZoneSection #mainStoryInput::placeholder {
    transition: color 0.28s ease, opacity 0.28s ease, transform 0.28s ease !important;
}

#writingZoneSection #mainStoryInput:focus::placeholder,
body.focus-mode #writingZoneSection #mainStoryInput:focus::placeholder {
    opacity: 0.42 !important;
    color: rgba(91, 66, 42, 0.36) !important;
}

body.writing-has-content #writingZoneSection #mainStoryInput::placeholder,
body.writing-has-content.focus-mode #writingZoneSection #mainStoryInput::placeholder {
    opacity: 0 !important;
    transform: translateY(-2px) !important;
}

.typing-sound-toggle {
    min-width: 2.55rem;
}

.typing-tool-btn.active,
.typing-tool-btn[aria-pressed="true"].typing-sound-toggle {
    color: #2a1a10 !important;
    background: linear-gradient(135deg, rgba(223, 191, 131, 0.96), rgba(199, 154, 97, 0.92)) !important;
    border-color: rgba(255, 246, 223, 0.72) !important;
    box-shadow: 0 10px 22px rgba(143, 95, 52, 0.22) !important;
}

.publish-moment-modal {
    background:
        radial-gradient(circle at 50% 42%, rgba(223, 191, 131, 0.14), transparent 18rem),
        rgba(10, 7, 5, 0.72) !important;
}

.publish-moment-card {
    overflow: hidden;
    transform-origin: center;
    animation: publishMomentEnter 0.42s cubic-bezier(.2, .8, .2, 1) both;
    border-color: rgba(223, 191, 131, 0.34) !important;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.44),
        0 0 44px rgba(223, 191, 131, 0.16) !important;
}

.publish-moment-card::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto;
    height: 70%;
    background: radial-gradient(circle, rgba(255, 244, 214, 0.22), transparent 62%);
    pointer-events: none;
}

.publish-moment-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 0.8rem;
    border-radius: 999px;
    background: rgba(255, 244, 214, 0.14);
    border: 1px solid rgba(255, 244, 214, 0.28);
    font-size: 2rem;
    box-shadow: inset 0 0 22px rgba(223, 191, 131, 0.14);
}

.publish-moment-card h2 {
    color: var(--paper);
    font-size: clamp(1.55rem, 5vw, 2.15rem);
    margin-bottom: 0.5rem;
}

.publish-moment-card .modal-intro {
    margin-bottom: 0;
    color: rgba(246, 234, 212, 0.78);
}

@keyframes publishMomentEnter {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 620px) {
    .typing-sound-toggle {
        min-width: 2.35rem;
    }

    .publish-moment-card {
        width: min(92vw, 390px) !important;
    }
}


/* =========================================================
   Final 35: steady header on scroll + centered mobile wordmark
   ========================================================= */

/* Stop the header/logo from contracting, bouncing, or changing spacing on scroll. */
.site-nav,
#mainNav {
    transition: none !important;
}

.site-nav.scrolled,
#mainNav.scrolled {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    padding-left: 176px !important;
    padding-right: 40px !important;
    min-height: unset !important;
    box-shadow: none !important;
}

/* Keep the desktop logo image and wordmark identical whether scrolling or not. */
.site-nav.scrolled #navLogo .brand-logo-img,
.site-nav.scrolled #navLogo.brand-lockup.nav-logo .brand-logo-img,
#mainNav.scrolled #navLogo .brand-logo-img,
#mainNav.scrolled #navLogo.brand-lockup.nav-logo .brand-logo-img {
    width: 176px !important;
    height: 176px !important;
    transform: none !important;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.42)) !important;
}

.site-nav.scrolled #navLogo span,
.site-nav.scrolled #navLogo.brand-lockup.nav-logo span,
#mainNav.scrolled #navLogo span,
#mainNav.scrolled #navLogo.brand-lockup.nav-logo span {
    transform: translate(-20px, 68px) !important;
    font-size: 1.46rem !important;
    max-width: none !important;
    opacity: 1 !important;
}

/* Remove scroll-related logo/header transitions so the header stays visually still. */
#navLogo,
#navLogo.brand-lockup,
#navLogo.brand-lockup.nav-logo,
#navLogo .brand-logo-img,
#navLogo.brand-lockup.nav-logo .brand-logo-img,
#navLogo span,
#navLogo.brand-lockup.nav-logo span,
.nav-actions,
.nav-group,
.quote-of-day,
#navLoginBtn {
    transition: none !important;
}

/* Mobile: keep header steady and center the text wordmark in the header. */
@media (max-width: 760px) {
    .site-nav,
    #mainNav,
    .site-nav.scrolled,
    #mainNav.scrolled {
        min-height: 82px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        padding-left: 112px !important;
        padding-right: 16px !important;
        box-shadow: none !important;
        transition: none !important;
    }

    .site-nav.scrolled #navLogo .brand-logo-img,
    .site-nav.scrolled #navLogo.brand-lockup.nav-logo .brand-logo-img,
    #mainNav.scrolled #navLogo .brand-logo-img,
    #mainNav.scrolled #navLogo.brand-lockup.nav-logo .brand-logo-img,
    #navLogo .brand-logo-img,
    #navLogo.brand-lockup.nav-logo .brand-logo-img {
        width: 132px !important;
        height: 132px !important;
        transform: none !important;
    }

    #navLogo span,
    #navLogo.brand-lockup.nav-logo span,
    .site-nav.scrolled #navLogo span,
    .site-nav.scrolled #navLogo.brand-lockup.nav-logo span,
    #mainNav.scrolled #navLogo span,
    #mainNav.scrolled #navLogo.brand-lockup.nav-logo span {
        display: block !important;
        position: fixed !important;
        left: 50% !important;
        top: 31px !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        max-width: 48vw !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: center !important;
        font-size: clamp(1rem, 4.5vw, 1.24rem) !important;
        line-height: 1 !important;
        z-index: 1000000 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .quote-of-day {
        display: none !important;
    }
}


/* =========================================================
   Final 36: completely disable scroll-shrinking header
   ========================================================= */

/* The header should look exactly the same at rest and while scrolling. */
#mainNav,
.site-nav {
    transition: none !important;
}

#mainNav.scrolled,
.site-nav.scrolled {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Neutralize any scroll-only changes on every visible header element. */
#mainNav.scrolled *,
.site-nav.scrolled *,
#mainNav *,
.site-nav * {
    transition-property: color, background-color, border-color, box-shadow, opacity !important;
}

/* Keep the logo image, wordmark, quote, login/profile controls, and menu steady. */
#mainNav.scrolled #navLogo,
#mainNav.scrolled .nav-logo,
#mainNav.scrolled .brand-logo-img,
#mainNav.scrolled #navLogo span,
#mainNav.scrolled .quote-of-day,
#mainNav.scrolled #navLoginBtn,
#mainNav.scrolled #loggedOutNav,
#mainNav.scrolled #loggedInNav,
#mainNav.scrolled .nav-actions,
#mainNav.scrolled .nav-group,
#mainNav.scrolled .bookmark-menu-shell,
#mainNav.scrolled #bookmarkMenuBtn {
    transform: none !important;
    scale: 1 !important;
    opacity: 1 !important;
    margin-top: inherit;
    margin-bottom: inherit;
}

/* Restore the original nav padding and logo placement if any scrolled class appears. */
@media (min-width: 761px) {
    #mainNav.scrolled,
    .site-nav.scrolled {
        padding-left: 42px !important;
        padding-right: 42px !important;
    }

    #mainNav.scrolled #navLogo .brand-logo-img,
    .site-nav.scrolled #navLogo .brand-logo-img {
        width: 176px !important;
        height: 176px !important;
    }

    #mainNav.scrolled #navLogo span,
    .site-nav.scrolled #navLogo span {
        transform: none !important;
        font-size: inherit !important;
        max-width: inherit !important;
    }
}

/* Mobile stays steady too, with only the wordmark centered as requested. */
@media (max-width: 760px) {
    #mainNav,
    .site-nav,
    #mainNav.scrolled,
    .site-nav.scrolled {
        transition: none !important;
        transform: none !important;
        box-shadow: none !important;
    }

    #mainNav.scrolled #navLogo,
    #mainNav.scrolled .nav-actions,
    #mainNav.scrolled .nav-group,
    #mainNav.scrolled #navLoginBtn,
    #mainNav.scrolled .brand-logo-img {
        transform: none !important;
        scale: 1 !important;
        opacity: 1 !important;
    }

    #navLogo span,
    #navLogo.brand-lockup.nav-logo span,
    #mainNav.scrolled #navLogo span,
    #mainNav.scrolled #navLogo.brand-lockup.nav-logo span {
        position: fixed !important;
        left: 50% !important;
        top: 31px !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        z-index: 1000000 !important;
    }
}
/* =========================================================
   Backend/Profile phase 1 polish: profile home + stats
   ========================================================= */
.profile-info { min-width: 0; }
.profile-bio-display {
    max-width: 440px;
    margin-top: 0.35rem;
    color: #7b634a;
    font: italic 1.02rem/1.45 var(--font-body);
}
.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0.95rem 0 1rem;
}
.profile-stat-card {
    padding: 0.8rem 0.65rem;
    border-radius: 16px;
    text-align: center;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(238, 218, 182, 0.72));
    border: 1px solid rgba(139, 94, 60, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.profile-stat-card strong {
    display: block;
    color: #5c3d25;
    font-size: 1.25rem;
    line-height: 1;
}
.profile-stat-card span {
    display: block;
    margin-top: 0.32rem;
    color: #806a50;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.profile-settings-fields {
    display: grid;
    gap: 0.58rem;
    margin-top: 0.75rem;
}
.profile-field-label {
    color: #5c3d25;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.profile-placeholder-picker {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.avatar-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
    gap: 0.55rem;
}
.avatar-placeholder-choice {
    width: 100%;
    aspect-ratio: 1;
    padding: 3px;
    border: 2px solid rgba(169, 201, 143, 0.3);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.34);
    cursor: pointer;
    overflow: hidden;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.avatar-placeholder-choice:hover {
    transform: translateY(-2px);
    border-color: rgba(169, 201, 143, 0.72);
    box-shadow: 0 8px 18px rgba(38, 22, 13, 0.16);
}
.avatar-placeholder-choice[aria-pressed="true"] {
    border-color: #a9c98f;
    background: #a9c98f;
    box-shadow: 0 0 0 3px rgba(169, 201, 143, 0.24), 0 10px 20px rgba(38, 22, 13, 0.18);
}
.avatar-placeholder-choice img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.avatar-placeholder-choice.is-saving {
    opacity: 0.65;
    pointer-events: none;
}
.placeholder-avatar-empty {
    margin: 0;
    color: #806a50;
    font-size: 0.9rem;
}
.profile-bio-input {
    min-height: 92px;
    resize: vertical;
    line-height: 1.45;
}
.password-settings-grid { margin-top: 0.9rem; }
.profile-stats-error {
    grid-column: 1 / -1;
    color: #806a50;
    background: rgba(255, 255, 255, 0.45);
}
@media (max-width: 640px) {
    .profile-header { align-items: flex-start; }
    .profile-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-bio-display { font-size: 0.98rem; }
}

/* =========================================================
   Box shape and width polish
   ========================================================= */
main {
    max-width: 1120px !important;
    width: min(100% - 36px, 1120px) !important;
}

main > .card,
main > section.card,
.writing-zone.card,
.leaderboard.card,
.feed.card,
.compact-inspiration[aria-labelledby="weeklyPromptTitle"] {
    border-radius: 14px !important;
}

.compact-inspiration[aria-labelledby="weeklyPromptTitle"] {
    background: linear-gradient(145deg, rgba(42, 27, 18, 0.95), rgba(28, 18, 12, 0.93)) !important;
    border-color: rgba(226, 185, 125, 0.28) !important;
}

.leaderboard.card {
    background: linear-gradient(145deg, rgba(42, 27, 18, 0.95), rgba(28, 18, 12, 0.93)) !important;
    border-color: rgba(226, 185, 125, 0.28) !important;
}

#writingZoneSection.writing-zone,
.feed.card {
    background: linear-gradient(145deg, rgba(24, 15, 10, 0.96), rgba(12, 8, 6, 0.94)) !important;
    border-color: rgba(226, 185, 125, 0.19) !important;
}

.compact-inspiration .prompt-strip,
.story-card,
.top-story-card,
.feed-toolbar {
    border-radius: 12px !important;
}

@media (max-width: 760px) {
    main {
        width: min(100% - 24px, 1120px) !important;
    }

    main > .card,
    main > section.card,
    .writing-zone.card,
    .leaderboard.card,
    .feed.card,
    .compact-inspiration[aria-labelledby="weeklyPromptTitle"] {
        border-radius: 13px !important;
    }
}

/* Header lower edge adjustment */
.site-nav,
#mainNav.site-nav {
    padding-bottom: 22px !important;
}

.site-nav.scrolled,
#mainNav.site-nav.scrolled {
    padding-bottom: 12px !important;
}

#loggedOutNav,
#loggedInNav,
.quote-of-day,
#navLoginBtn {
    transform: translateY(1px) !important;
}

#navLogo .brand-logo-img,
#navLogo.brand-lockup.nav-logo .brand-logo-img {
    width: 150px !important;
    height: 130px !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: translate(15px, 30px) !important;
}

/* Weekly Inspiration premium gold treatment */
.compact-inspiration[aria-labelledby="weeklyPromptTitle"] {
    background:
        linear-gradient(145deg, rgba(255, 249, 230, 0.96), rgba(220, 192, 134, 0.94) 58%, rgba(170, 126, 67, 0.92)) !important;
    border-color: rgba(243, 214, 151, 0.58) !important;
    box-shadow:
        0 22px 54px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        inset 0 -1px 0 rgba(94, 58, 24, 0.16) !important;
}

.compact-inspiration .weekly-prompt-heading .section-label-title,
.compact-inspiration #weeklyPromptTitle {
    color: #4c2f17 !important;
    text-shadow: 0 1px 0 rgba(255, 248, 224, 0.52) !important;
}

.compact-inspiration .prompt-strip {
    position: relative !important;
    overflow: hidden !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    background:
        radial-gradient(circle at 88% 50%, rgba(235, 188, 91, 0.36), rgba(174, 114, 38, 0.18) 18%, transparent 38%),
        linear-gradient(90deg, rgba(18, 12, 8, 0.96) 0%, rgba(31, 20, 12, 0.96) 54%, rgba(82, 54, 23, 0.94) 100%) !important;
    border: 1px solid rgba(236, 196, 108, 0.34) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 182, 0.14),
        inset -34px 0 68px rgba(219, 163, 67, 0.12),
        0 14px 30px rgba(39, 21, 9, 0.2) !important;
}

.compact-inspiration .prompt-strip::after {
    content: "" !important;
    position: absolute !important;
    right: -42px !important;
    top: 50% !important;
    width: 210px !important;
    height: 210px !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle, rgba(236, 193, 104, 0.28), rgba(173, 111, 41, 0.12) 42%, transparent 68%) !important;
    opacity: 0.82 !important;
    pointer-events: none !important;
}

.compact-inspiration #weeklyPromptText {
    position: relative !important;
    z-index: 1 !important;
    color: rgba(255, 244, 219, 0.95) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28) !important;
}

.compact-inspiration .prompt-write-btn.feather-prompt-btn,
#copyPromptBtn.prompt-write-btn.feather-prompt-btn {
    position: relative !important;
    z-index: 2 !important;
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(246, 217, 144, 0.5) !important;
    background:
        radial-gradient(circle at 46% 42%, rgba(49, 34, 21, 0.96) 0 32%, rgba(23, 15, 10, 0.94) 58%, rgba(11, 7, 5, 0.96) 100%) !important;
    box-shadow:
        0 0 0 8px rgba(217, 165, 79, 0.08),
        0 0 24px rgba(222, 171, 77, 0.2),
        inset 0 0 0 1px rgba(255, 235, 174, 0.16),
        inset 0 12px 24px rgba(255, 220, 142, 0.06) !important;
}

.compact-inspiration .prompt-write-btn.feather-prompt-btn::before,
#copyPromptBtn.prompt-write-btn.feather-prompt-btn::before {
    content: "" !important;
    position: absolute !important;
    inset: 10px !important;
    border-radius: inherit !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(226, 170, 72, 0.2), transparent 58%) !important;
    opacity: 1 !important;
}

.compact-inspiration .prompt-write-btn.feather-prompt-btn::after,
#copyPromptBtn.prompt-write-btn.feather-prompt-btn::after {
    display: none !important;
    content: none !important;
}

.compact-inspiration .prompt-write-btn.feather-prompt-btn span,
#copyPromptBtn.prompt-write-btn.feather-prompt-btn span {
    position: relative !important;
    z-index: 2 !important;
    display: inline-block !important;
    color: #e0a85e !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 8px rgba(232, 174, 77, 0.26)) !important;
    transform: rotate(-10deg) !important;
}

.compact-inspiration .prompt-write-btn.feather-prompt-btn span:first-child,
#copyPromptBtn.prompt-write-btn.feather-prompt-btn span:first-child {
    display: inline-grid !important;
    place-items: center !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 0 !important;
}

.compact-inspiration .prompt-write-btn.feather-prompt-btn span:first-child::before,
#copyPromptBtn.prompt-write-btn.feather-prompt-btn span:first-child::before {
    content: "🪶" !important;
    display: block !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
}

.compact-inspiration .prompt-write-btn.feather-prompt-btn span:last-child,
#copyPromptBtn.prompt-write-btn.feather-prompt-btn span:last-child {
    display: none !important;
}

.compact-inspiration .video-toggle-btn {
    background: rgba(35, 22, 13, 0.72) !important;
    border-color: rgba(236, 196, 108, 0.34) !important;
    color: rgba(255, 239, 205, 0.92) !important;
}

.compact-inspiration .video-toggle-text {
    color: rgba(255, 239, 205, 0.92) !important;
}

.compact-inspiration .prompt-write-btn.feather-prompt-btn span:first-child,
#copyPromptBtn.prompt-write-btn.feather-prompt-btn span:first-child {
    display: inline-grid !important;
}

@media (max-width: 760px) {
    .compact-inspiration .prompt-strip {
        grid-template-columns: 1fr auto !important;
        gap: 0.9rem !important;
    }

    .compact-inspiration .prompt-write-btn.feather-prompt-btn,
    #copyPromptBtn.prompt-write-btn.feather-prompt-btn {
        width: 66px !important;
        height: 66px !important;
        min-width: 66px !important;
    }
}

/* Weekly Inspiration sage + creamy gold revision */
.compact-inspiration[aria-labelledby="weeklyPromptTitle"] {
    background:
        linear-gradient(100deg, rgba(28, 42, 32, 0.94) 0%, rgba(24, 31, 22, 0.94) 34%, rgba(19, 15, 10, 0.96) 74%, rgba(12, 8, 6, 0.98) 100%) !important;
    border-color: rgba(199, 154, 90, 0.42) !important;
    box-shadow:
        0 22px 54px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(241, 219, 169, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28) !important;
}

.compact-inspiration .weekly-prompt-heading .section-label-title,
.compact-inspiration #weeklyPromptTitle {
    color: rgba(255, 239, 189, 0.9) !important;
    text-shadow: 0 1px 0 rgba(23, 32, 21, 0.48) !important;
}

.compact-inspiration .prompt-strip {
    background:
        radial-gradient(circle at 86% 50%, rgba(218, 162, 53, 0.34), rgba(245, 221, 159, 0.42) 19%, transparent 39%),
        linear-gradient(105deg, rgba(254, 247, 226, 0.98) 0%, rgba(238, 213, 157, 0.98) 62%, rgba(190, 137, 58, 0.96) 100%) !important;
    border-color: rgba(102, 91, 54, 0.25) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset -34px 0 70px rgba(156, 99, 31, 0.12),
        0 14px 30px rgba(22, 31, 20, 0.22) !important;
}

.compact-inspiration .prompt-strip::after {
    background:
        radial-gradient(circle, rgba(163, 108, 35, 0.2), rgba(208, 163, 69, 0.16) 42%, transparent 68%) !important;
    opacity: 0.74 !important;
}

.compact-inspiration #weeklyPromptText {
    color: #1e1710 !important;
    text-shadow: 0 1px 0 rgba(255, 252, 237, 0.62) !important;
}

.compact-inspiration .prompt-write-btn.feather-prompt-btn,
#copyPromptBtn.prompt-write-btn.feather-prompt-btn {
    border-color: rgba(248, 224, 155, 0.62) !important;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 229, 154, 0.24), transparent 20%),
        radial-gradient(circle at 58% 68%, rgba(98, 56, 22, 0.58), transparent 34%),
        linear-gradient(145deg, rgba(58, 36, 20, 0.98) 0%, rgba(25, 17, 12, 0.98) 48%, rgba(9, 8, 7, 0.99) 100%) !important;
    box-shadow:
        0 14px 24px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(255, 235, 174, 0.18),
        inset 0 12px 24px rgba(255, 220, 142, 0.09),
        inset 0 -14px 26px rgba(0, 0, 0, 0.32) !important;
}

.compact-inspiration .video-toggle-btn {
    background: rgba(51, 64, 45, 0.74) !important;
    border-color: rgba(232, 207, 139, 0.36) !important;
    color: rgba(255, 239, 205, 0.95) !important;
}


/* Final override: replace the nav text wordmark with image 2.png and tuck it closer to the main logo. */
#navLogo.brand-lockup.nav-logo {
    gap: 0 !important;
}

#navLogo.brand-lockup.nav-logo .brand-title-img {
    width: clamp(220px, 25vw, 430px) !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin-left: -22px !important;
    transform: translateY(52px) !important;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.42)) !important;
    pointer-events: none !important;
}

#navLogo.brand-lockup.nav-logo span {
    display: none !important;
}

@media (max-width: 760px) {
    #navLogo.brand-lockup.nav-logo .brand-title-img {
        display: none !important;
    }
}

/* Nav wordmark cleanup: hide missing image 2.png and place text beside the logo. */
#navLogo.brand-lockup.nav-logo .brand-title-img {
    display: none !important;
}

#navLogo.brand-lockup.nav-logo span {
    display: block !important;
    position: fixed !important;
    left: 184px !important;
    top: 30px !important;
    transform: none !important;
    margin: 0 !important;
    color: #d7a86a !important;
    font-size: clamp(1.55rem, 2vw, 2rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    z-index: 1000000 !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) !important;
}

@media (max-width: 760px) {
    #navLogo.brand-lockup.nav-logo span {
        left: 138px !important;
        top: 35px !important;
        font-size: 1.05rem !important;
    }
}

/* Nav wordmark image: use story-nook-logo2.png and keep it near the header bottom. */
#navLogo.brand-lockup.nav-logo .brand-title-img {
    display: block !important;
    position: fixed !important;
    left: 105px !important;
    top: -30px !important;
    bottom: auto !important;
    width: auto !important;
    height: 196px !important;
    object-fit: contain !important;
    margin: 0 !important;
    transform: none !important;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.38)) !important;
    pointer-events: none !important;
    z-index: 1000001 !important;
}

#navLogo.brand-lockup.nav-logo span,
#navLogo.brand-lockup.nav-logo .brand-title-text {
    display: none !important;
}

@media (max-width: 760px) {
    #navLogo.brand-lockup.nav-logo .brand-title-img {
        left: 86px !important;
        top: 36px !important;
        bottom: auto !important;
        width: auto !important;
        height: 96px !important;
    }
}

/* Mobile logo pairing: keep the main mark and wordmark side-by-side. */
@media (max-width: 760px) {
    #navLogo .brand-logo-img,
    #navLogo.brand-lockup.nav-logo .brand-logo-img {
        width: 120px !important;
        height: 120px !important;
        transform: translate(14px, 19px) !important;
    }

    #navLogo.brand-lockup.nav-logo .brand-title-img {
        left: 95px !important;
        top: -20px !important;
        height: 180px !important;
    }
}

@media (max-width: 390px) {
    #navLogo .brand-logo-img,
    #navLogo.brand-lockup.nav-logo .brand-logo-img {
        width: 90px !important;
        height: 90px !important;
        transform: translate(12px, 22px) !important;
    }

    #navLogo.brand-lockup.nav-logo .brand-title-img {
        left: 112px !important;
        top: 18px !important;
        height: 68px !important;
    }
}

/* Continuous main-page gradient: one shared wash from header to footer. */
:root {
    --nook-page-gradient:
        linear-gradient(180deg,
            #070403 0%,
            #1b110b 18%,
            #26170e 36%,
            #352113 55%,
            #51341d 76%,
            #74512f 100%);
    --nook-panel-border: rgba(218, 190, 126, 0.24);
    --nook-panel-highlight: rgba(255, 245, 216, 0.09);
}

html,
body {
    background: #140d09 !important;
    background-attachment: scroll !important;
}

body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -10 !important;
    pointer-events: none !important;
    background:
        linear-gradient(rgba(10, 7, 5, 0.58), rgba(10, 7, 5, 0.7)),
        url("story-nook-default-background.jpg") center / cover no-repeat !important;
}

.video-background,
.overlay,
.page-glow {
    display: block !important;
}

.video-background {
    background:
        linear-gradient(rgba(10, 7, 5, 0.58), rgba(10, 7, 5, 0.7)),
        url("story-nook-default-background.jpg") center / cover no-repeat !important;
}

.overlay,
.page-glow {
    display: none !important;
}

.site-nav,
#mainNav.site-nav,
.site-nav.scrolled,
#mainNav.site-nav.scrolled,
footer,
.site-footer,
main > .card,
main > section.card,
.hero.card,
.writing-zone.card,
.leaderboard.card,
.feed.card,
.compact-inspiration[aria-labelledby="weeklyPromptTitle"],
#writingZoneSection.writing-zone {
    background: var(--nook-page-gradient) fixed !important;
    border-color: var(--nook-panel-border) !important;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 var(--nook-panel-highlight) !important;
}

.site-nav,
#mainNav.site-nav,
footer,
.site-footer {
    box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 245, 216, 0.06) !important;
}

.compact-inspiration .prompt-strip,
.writing-zone textarea,
.feed-toolbar,
.story-card,
.top-story-card,
.stat-card {
    background: rgba(8, 10, 12, 0.24) !important;
    border-color: rgba(218, 190, 126, 0.18) !important;
}

.compact-inspiration .prompt-strip::after {
    opacity: 0.28 !important;
}

/* Dormant header menu: keep the future ribbon code, but disable pull/drop behavior for now. */
.site-nav,
#mainNav.site-nav,
.site-nav.scrolled,
#mainNav.site-nav.scrolled {
    align-items: center !important;
}

.nav-actions {
    position: relative !important;
    align-items: center !important;
}

.bookmark-menu-shell {
    display: none !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.bookmark-menu-shell::before,
.bookmark-menu-shell::after,
.bookmark-ribbon::before,
.bookmark-ribbon::after {
    display: none !important;
    content: none !important;
}

.bookmark-ribbon,
.bookmark-ribbon:hover,
.bookmark-ribbon:active,
.bookmark-ribbon.is-dragging,
.bookmark-ribbon.pulled-once,
.bookmark-ribbon[aria-expanded="true"] {
    position: relative !important;
    inset: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    transform: none !important;
    transition: background 0.18s ease, border-color 0.18s ease !important;
    animation: none !important;
}

.ribbon-panel,
.ribbon-panel.is-open,
.ribbon-panel.is-closing {
    position: absolute !important;
    top: calc(100% + 0.75rem) !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    transform-origin: top right !important;
}

.ribbon-panel.hidden,
.ribbon-panel:not(.is-open) {
    display: none !important;
}

/* Premium marble feather button */
.compact-inspiration {
    --feather-icon-size: 1.9rem;
    --feather-icon-x: -7px;
    --feather-icon-y: -1px;
    --feather-icon-rotation: -10deg;
    --feather-icon-hover-x: 2px;
    --feather-icon-hover-y: -2px;
    --feather-icon-hover-scale: 1.08;
    --feather-icon-hover-rotation: -16deg;
}

.compact-inspiration .prompt-write-btn.feather-prompt-btn,
#copyPromptBtn.prompt-write-btn.feather-prompt-btn {
    overflow: hidden !important;
    border-color: rgba(204, 155, 76, 0.56) !important;
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 229, 158, 0.3), transparent 18%),
        radial-gradient(circle at 63% 70%, rgba(129, 76, 30, 0.66), transparent 32%),
        linear-gradient(145deg, #4b2f1b 0%, #24170f 48%, #080706 100%) !important;
    box-shadow:
        0 13px 22px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 236, 183, 0.26),
        inset 0 -16px 28px rgba(0, 0, 0, 0.38) !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.compact-inspiration .prompt-write-btn.feather-prompt-btn::before,
#copyPromptBtn.prompt-write-btn.feather-prompt-btn::before {
    content: "" !important;
    position: absolute !important;
    inset: 5px !important;
    border-radius: inherit !important;
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 244, 203, 0.34), transparent 22%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 34%, rgba(255, 209, 118, 0.08) 68%, transparent) !important;
    opacity: 0.68 !important;
    pointer-events: none !important;
}

.compact-inspiration .prompt-write-btn.feather-prompt-btn::after,
#copyPromptBtn.prompt-write-btn.feather-prompt-btn::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: -45% !important;
    left: -80% !important;
    width: 46% !important;
    height: 190% !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 244, 207, 0.64), transparent) !important;
    transform: rotate(26deg) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: featherMarbleShine 6.8s ease-in-out infinite !important;
}

.compact-inspiration .prompt-write-btn.feather-prompt-btn:hover,
#copyPromptBtn.prompt-write-btn.feather-prompt-btn:hover {
    transform: translateY(-2px) scale(1.035) !important;
    border-color: rgba(239, 191, 99, 0.78) !important;
    box-shadow:
        0 17px 28px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 240, 195, 0.34),
        inset 0 -16px 28px rgba(0, 0, 0, 0.36) !important;
}

.compact-inspiration .prompt-write-btn.feather-prompt-btn:hover span:first-child,
#copyPromptBtn.prompt-write-btn.feather-prompt-btn:hover span:first-child {
    transform:
        translate(var(--feather-icon-hover-x), var(--feather-icon-hover-y))
        rotate(var(--feather-icon-hover-rotation))
        scale(var(--feather-icon-hover-scale)) !important;
}

.compact-inspiration .prompt-write-btn.feather-prompt-btn span:first-child::before,
#copyPromptBtn.prompt-write-btn.feather-prompt-btn span:first-child::before {
    font-size: var(--feather-icon-size) !important;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.42)) !important;
    transform:
        translate(var(--feather-icon-x), var(--feather-icon-y))
        rotate(var(--feather-icon-rotation)) !important;
}

@keyframes featherMarbleShine {
    0%,
    66% {
        left: -80%;
        opacity: 0;
    }
    72% {
        opacity: 0.78;
    }
    82% {
        left: 132%;
        opacity: 0;
    }
    100% {
        left: 132%;
        opacity: 0;
    }
}

/* Header login button: same warm premium family as the feather button, without shine. */
#navLoginBtn.btn-secondary {
    min-height: 54px !important;
    padding: 0.85rem 1.35rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(204, 155, 76, 0.58) !important;
    color: rgba(255, 226, 166, 0.96) !important;
    background:
        radial-gradient(circle at 34% 22%, rgba(255, 224, 142, 0.16), transparent 28%),
        linear-gradient(145deg, rgba(63, 39, 22, 0.98) 0%, rgba(31, 20, 13, 0.98) 54%, rgba(12, 8, 6, 0.99) 100%) !important;
    box-shadow:
        0 12px 22px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 232, 174, 0.22),
        inset 0 -12px 22px rgba(0, 0, 0, 0.28) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42) !important;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease !important;
}

#navLoginBtn.btn-secondary:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(235, 184, 95, 0.8) !important;
    color: rgba(255, 237, 191, 0.98) !important;
    background:
        radial-gradient(circle at 34% 22%, rgba(255, 224, 142, 0.2), transparent 30%),
        linear-gradient(145deg, rgba(75, 47, 27, 0.98) 0%, rgba(36, 24, 15, 0.98) 54%, rgba(12, 8, 6, 0.99) 100%) !important;
    box-shadow:
        0 15px 26px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 235, 183, 0.28),
        inset 0 -12px 22px rgba(0, 0, 0, 0.3) !important;
}

/* Video inspiration button: premium brown/gold style without an icon. */
.compact-inspiration .video-toggle-btn,
#toggleVideoBtn.video-toggle-btn {
    justify-content: center !important;
    gap: 0 !important;
    min-height: 54px !important;
    padding: 0.85rem 1.45rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(204, 155, 76, 0.58) !important;
    color: rgba(255, 226, 166, 0.96) !important;
    background:
        radial-gradient(circle at 34% 22%, rgba(255, 224, 142, 0.16), transparent 28%),
        linear-gradient(145deg, rgba(63, 39, 22, 0.98) 0%, rgba(31, 20, 13, 0.98) 54%, rgba(12, 8, 6, 0.99) 100%) !important;
    box-shadow:
        0 12px 22px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 232, 174, 0.22),
        inset 0 -12px 22px rgba(0, 0, 0, 0.28) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42) !important;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease !important;
}

.compact-inspiration .video-toggle-btn > span[aria-hidden="true"],
#toggleVideoBtn.video-toggle-btn > span[aria-hidden="true"] {
    display: none !important;
}

.compact-inspiration .video-toggle-text,
#toggleVideoBtn .video-toggle-text {
    color: inherit !important;
    text-align: center !important;
}

.compact-inspiration .video-toggle-btn:hover,
.compact-inspiration .video-toggle-btn[aria-expanded="true"],
#toggleVideoBtn.video-toggle-btn:hover,
#toggleVideoBtn.video-toggle-btn[aria-expanded="true"] {
    transform: translateY(-1px) !important;
    border-color: rgba(235, 184, 95, 0.8) !important;
    color: rgba(255, 237, 191, 0.98) !important;
    background:
        radial-gradient(circle at 34% 22%, rgba(255, 224, 142, 0.2), transparent 30%),
        linear-gradient(145deg, rgba(75, 47, 27, 0.98) 0%, rgba(36, 24, 15, 0.98) 54%, rgba(12, 8, 6, 0.99) 100%) !important;
    box-shadow:
        0 15px 26px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 235, 183, 0.28),
        inset 0 -12px 22px rgba(0, 0, 0, 0.3) !important;
}

/* Softer radial button finish: warm center, darker brown edge. */
#navLoginBtn.btn-secondary,
.compact-inspiration .video-toggle-btn,
#toggleVideoBtn.video-toggle-btn {
    background: #7d5430 !important;
}

#navLoginBtn.btn-secondary:hover,
.compact-inspiration .video-toggle-btn:hover,
.compact-inspiration .video-toggle-btn[aria-expanded="true"],
#toggleVideoBtn.video-toggle-btn:hover,
#toggleVideoBtn.video-toggle-btn[aria-expanded="true"] {
    background: #8b6138 !important;
}

/* Weekly Inspiration dream page */
.compact-inspiration .prompt-strip {
    background:
        linear-gradient(135deg, rgba(255, 251, 236, 0.98), rgba(232, 213, 171, 0.96)) !important;
    border-color: rgba(179, 141, 82, 0.34) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        inset 0 -24px 44px rgba(143, 103, 45, 0.12),
        0 14px 30px rgba(28, 16, 9, 0.18) !important;
}

.compact-inspiration .prompt-strip::after {
    opacity: 0.16 !important;
}

.compact-inspiration #weeklyPromptText {
    color: #15100b !important;
    text-shadow: 0 1px 0 rgba(255, 255, 248, 0.72) !important;
}

/* Readable storybook text for focus writing and weekly prompt sample. */
body.focus-mode #writingZoneSection #mainStoryInput,
body.focus-mode #writingZoneSection textarea#mainStoryInput,
.compact-inspiration #weeklyPromptText {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    color: #15100b !important;
    line-height: 1.48 !important;
    text-shadow: none !important;
}

body.focus-mode #writingZoneSection #mainStoryInput,
body.focus-mode #writingZoneSection textarea#mainStoryInput {
    font-size: clamp(1.45rem, 2vw, 1.85rem) !important;
}

.compact-inspiration #weeklyPromptText {
    font-size: clamp(1.2rem, 1.7vw, 1.42rem) !important;
}

/* Writing Desk glass toolbar and mint active states */
#writingZoneSection.writing-zone {
    position: relative !important;
    overflow: hidden !important;
    background: var(--nook-page-gradient) fixed !important;
}

#writingZoneSection.writing-zone::before {
    display: none !important;
    content: none !important;
}

#writingZoneSection.writing-zone > * {
    position: relative !important;
    z-index: 1 !important;
}

#writingZoneSection #mainStoryInput,
body.focus-mode #writingZoneSection #mainStoryInput {
    background:
        linear-gradient(135deg, rgba(255, 251, 236, 0.98), rgba(232, 213, 171, 0.96)) !important;
}

#writingZoneSection .typing-toolbar,
body.focus-mode #writingZoneSection .typing-toolbar {
    border: 1px solid rgba(207, 235, 194, 0.22) !important;
    background: rgba(211, 233, 202, 0.1) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 14px 28px rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(18px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

#writingZoneSection .typing-control select,
body.focus-mode #writingZoneSection .typing-control select,
#writingZoneSection .typing-format-toggles button,
#writingZoneSection .writing-desk-controls .focus-mini-btn,
#writingZoneSection .focus-mode-toggle {
    background: rgba(22, 15, 10, 0.72) !important;
    border-color: rgba(201, 222, 174, 0.28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 241, 204, 0.16),
        0 8px 18px rgba(0, 0, 0, 0.2) !important;
}

.compact-inspiration .video-toggle-btn[aria-expanded="true"],
#toggleVideoBtn.video-toggle-btn[aria-expanded="true"] {
    background: #a9c98f !important;
    border-color: rgba(220, 240, 190, 0.78) !important;
    color: #18200f !important;
    text-shadow: 0 1px 0 rgba(255, 255, 238, 0.36) !important;
}

#loggedInNav .profile-trigger,
#navProfileBtn.profile-trigger {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    border: 3px solid #a9c98f !important;
    background: rgba(169, 201, 143, 0.16) !important;
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 238, 0.28) !important;
}

#loggedInNav #navUsername {
    display: none !important;
}

#loggedInNav .avatar-small,
#navProfileBtn .avatar-small {
    width: 54px !important;
    height: 54px !important;
    border: 0 !important;
    border-radius: 50% !important;
}

/* Final repair: restore Sound/Light dropdown behavior and compact header sizing. */
.site-nav,
#mainNav.site-nav,
.site-nav.scrolled,
#mainNav.site-nav.scrolled {
    padding-top: 8px !important;
    padding-bottom: 10px !important;
    min-height: 82px !important;
}

#navLogo .brand-logo-img,
#navLogo.brand-lockup.nav-logo .brand-logo-img {
    width: 108px !important;
    height: 108px !important;
    transform: translate(15px, 25px) !important;
}

#navLogo.brand-lockup.nav-logo .brand-title-img {
    left: 91px !important;
    top: -22px !important;
    height: 176px !important;
}

#navLoginBtn.btn-secondary {
    min-height: 46px !important;
    padding: 0.68rem 1.12rem !important;
    font-size: 0.95rem !important;
}

#writingZoneSection.writing-zone {
    overflow: visible !important;
}

#writingZoneSection .ambient-menu,
body:not(.focus-mode) #writingZoneSection .ambient-menu,
body.focus-mode #writingZoneSection .ambient-menu {
    position: absolute !important;
    z-index: 9999 !important;
}

#writingZoneSection .ambient-menu:not(.hidden),
body:not(.focus-mode) #writingZoneSection .ambient-menu:not(.hidden),
body.focus-mode #writingZoneSection .ambient-menu:not(.hidden) {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#soundEffectsBtn.has-active-effect,
#lightingEffectsBtn.has-active-effect,
#soundEffectsBtn[aria-expanded="true"],
#lightingEffectsBtn[aria-expanded="true"],
#soundEffectsBtn[aria-pressed="true"],
#lightingEffectsBtn[aria-pressed="true"] {
    background: #a9c98f !important;
    border-color: rgba(220, 240, 190, 0.78) !important;
    color: #18200f !important;
    text-shadow: 0 1px 0 rgba(255, 255, 238, 0.34) !important;
}

#loggedInNav .profile-trigger,
#navProfileBtn.profile-trigger {
    width: 57px !important;
    height: 57px !important;
    min-width: 57px !important;
}

#loggedInNav .avatar-small,
#navProfileBtn .avatar-small {
    width: 51px !important;
    height: 51px !important;
}

@media (max-width: 760px) {
    .site-nav,
    #mainNav.site-nav,
    .site-nav.scrolled,
    #mainNav.site-nav.scrolled {
        min-height: 76px !important;
        padding-top: 7px !important;
        padding-bottom: 9px !important;
    }

    #navLogo .brand-logo-img,
    #navLogo.brand-lockup.nav-logo .brand-logo-img {
        width: 88px !important;
        height: 88px !important;
        transform: translate(12px, 13px) !important;
    }

    #navLogo.brand-lockup.nav-logo .brand-title-img {
        left: 100px !important;
        top: 9px !important;
        height: 74px !important;
    }

    #navLoginBtn.btn-secondary {
        min-height: 42px !important;
        padding: 0.58rem 0.9rem !important;
        font-size: 0.88rem !important;
    }

    #loggedInNav .profile-trigger,
    #navProfileBtn.profile-trigger {
        width: 51px !important;
        height: 51px !important;
        min-width: 51px !important;
    }

    #loggedInNav .avatar-small,
    #navProfileBtn .avatar-small {
        width: 45px !important;
        height: 45px !important;
    }
}

/* Unified mint active state for Writing Desk controls. */
#soundEffectsBtn.has-active-effect,
#lightingEffectsBtn.has-active-effect,
#soundEffectsBtn[aria-expanded="true"],
#lightingEffectsBtn[aria-expanded="true"],
#soundEffectsBtn[aria-pressed="true"],
#lightingEffectsBtn[aria-pressed="true"],
#focusModeToggleBtn[aria-pressed="true"],
#writingBoldBtn[aria-pressed="true"],
#writingBoldBtn.active,
#writingItalicBtn[aria-pressed="true"],
#writingItalicBtn.active,
#typingSoundToggleBtn[aria-pressed="true"],
#typingSoundToggleBtn.active,
#writingZoneSection .typing-tool-btn[aria-pressed="true"],
#writingZoneSection .typing-tool-btn.active,
#writingZoneSection .ambient-menu button[aria-pressed="true"],
#writingZoneSection .sound-mix-option[aria-pressed="true"],
#writingZoneSection [data-lighting][aria-pressed="true"] {
    background: #a9c98f !important;
    border-color: rgba(220, 240, 190, 0.82) !important;
    color: #18200f !important;
    text-shadow: 0 1px 0 rgba(255, 255, 238, 0.34) !important;
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 238, 0.44) !important;
}

#soundEffectsBtn.has-active-effect *,
#lightingEffectsBtn.has-active-effect *,
#soundEffectsBtn[aria-expanded="true"] *,
#lightingEffectsBtn[aria-expanded="true"] *,
#soundEffectsBtn[aria-pressed="true"] *,
#lightingEffectsBtn[aria-pressed="true"] *,
#focusModeToggleBtn[aria-pressed="true"] *,
#writingBoldBtn[aria-pressed="true"] *,
#writingBoldBtn.active *,
#writingItalicBtn[aria-pressed="true"] *,
#writingItalicBtn.active *,
#typingSoundToggleBtn[aria-pressed="true"] *,
#typingSoundToggleBtn.active *,
#writingZoneSection .typing-tool-btn[aria-pressed="true"] *,
#writingZoneSection .typing-tool-btn.active *,
#writingZoneSection .ambient-menu button[aria-pressed="true"] *,
#writingZoneSection .sound-mix-option[aria-pressed="true"] *,
#writingZoneSection [data-lighting][aria-pressed="true"] * {
    color: #18200f !important;
}

/* Highest-specificity active controls: beat the dark Writing Desk button skin. */
#writingZoneSection #soundEffectsBtn.has-active-effect,
#writingZoneSection #lightingEffectsBtn.has-active-effect,
#writingZoneSection #soundEffectsBtn[aria-expanded="true"],
#writingZoneSection #lightingEffectsBtn[aria-expanded="true"],
#writingZoneSection #soundEffectsBtn[aria-pressed="true"],
#writingZoneSection #lightingEffectsBtn[aria-pressed="true"],
#writingZoneSection #focusModeToggleBtn[aria-pressed="true"],
#writingZoneSection #writingBoldBtn[aria-pressed="true"],
#writingZoneSection #writingBoldBtn.active,
#writingZoneSection #writingItalicBtn[aria-pressed="true"],
#writingZoneSection #writingItalicBtn.active,
#writingZoneSection #typingSoundToggleBtn[aria-pressed="true"],
#writingZoneSection #typingSoundToggleBtn.active,
body #writingZoneSection .ambient-menu button[aria-pressed="true"],
body #writingZoneSection .sound-mix-option[aria-pressed="true"],
body #writingZoneSection [data-lighting][aria-pressed="true"] {
    background: #a9c98f !important;
    border-color: rgba(220, 240, 190, 0.82) !important;
    color: #18200f !important;
    text-shadow: 0 1px 0 rgba(255, 255, 238, 0.34) !important;
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 238, 0.44) !important;
}

#writingZoneSection #soundEffectsBtn.has-active-effect *,
#writingZoneSection #lightingEffectsBtn.has-active-effect *,
#writingZoneSection #soundEffectsBtn[aria-expanded="true"] *,
#writingZoneSection #lightingEffectsBtn[aria-expanded="true"] *,
#writingZoneSection #soundEffectsBtn[aria-pressed="true"] *,
#writingZoneSection #lightingEffectsBtn[aria-pressed="true"] *,
#writingZoneSection #focusModeToggleBtn[aria-pressed="true"] *,
#writingZoneSection #writingBoldBtn[aria-pressed="true"] *,
#writingZoneSection #writingBoldBtn.active *,
#writingZoneSection #writingItalicBtn[aria-pressed="true"] *,
#writingZoneSection #writingItalicBtn.active *,
#writingZoneSection #typingSoundToggleBtn[aria-pressed="true"] *,
#writingZoneSection #typingSoundToggleBtn.active *,
body #writingZoneSection .ambient-menu button[aria-pressed="true"] *,
body #writingZoneSection .sound-mix-option[aria-pressed="true"] *,
body #writingZoneSection [data-lighting][aria-pressed="true"] * {
    color: #18200f !important;
}

/* Header profile picture: clean borderless circle. */
#loggedInNav .profile-trigger,
#navProfileBtn.profile-trigger {
    width: 77px !important;
    height: 77px !important;
    min-width: 77px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    outline: 0 !important;
}

#loggedInNav .avatar-small,
#navProfileBtn .avatar-small {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    box-shadow: none !important;
    outline: 0 !important;
    background: transparent !important;
}

#loggedInNav .profile-trigger:hover,
#navProfileBtn.profile-trigger:hover,
#loggedInNav .profile-trigger:focus,
#navProfileBtn.profile-trigger:focus {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}

@media (max-width: 760px) {
    #loggedInNav .profile-trigger,
    #navProfileBtn.profile-trigger {
        width: 69px !important;
        height: 69px !important;
        min-width: 69px !important;
    }

    #loggedInNav .avatar-small,
    #navProfileBtn .avatar-small {
        width: 100% !important;
        height: 100% !important;
    }
}

/* Header independence: avatar/logo sizes should never resize the header. */
#mainNav.site-nav,
.site-nav {
    box-sizing: border-box !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
    overflow: visible !important;
}

#mainNav .nav-actions,
.site-nav .nav-actions {
    align-items: center !important;
    max-height: 82px !important;
}

#navProfileBtn.profile-trigger,
#loggedInNav .profile-trigger {
    flex: 0 0 auto !important;
}

@media (max-width: 760px) {
    #mainNav.site-nav,
    .site-nav {
        height: 76px !important;
        min-height: 76px !important;
        max-height: 76px !important;
    }

    #mainNav .nav-actions,
    .site-nav .nav-actions {
        max-height: 76px !important;
    }
}

/* Avatar picker modal and future prize profile pictures. */
.avatar-picker-modal {
    width: min(92vw, 560px) !important;
    text-align: left !important;
}

.avatar-picker-modal h2,
.avatar-picker-modal .modal-intro {
    text-align: center;
}

.avatar-picker-modal .avatar-placeholder-grid {
    grid-template-columns: repeat(auto-fill, 92px);
    justify-content: center;
    gap: 0.85rem;
    margin: 0.75rem 0 1rem;
}

.avatar-picker-modal .avatar-placeholder-choice {
    position: relative;
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
    max-width: 92px !important;
    max-height: 92px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 4px !important;
    flex: 0 0 92px !important;
    display: block !important;
}

.avatar-picker-modal .avatar-placeholder-choice img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
}

@media (max-width: 520px) {
    .avatar-picker-modal .avatar-placeholder-grid {
        grid-template-columns: repeat(auto-fill, 76px);
        gap: 0.7rem;
    }

    .avatar-picker-modal .avatar-placeholder-choice {
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
        min-height: 76px !important;
        max-width: 76px !important;
        max-height: 76px !important;
        flex-basis: 76px !important;
    }
}

.avatar-placeholder-choice.is-prize:not(.is-locked)::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 2px solid rgba(236, 196, 111, 0.62);
    pointer-events: none;
}

.avatar-placeholder-choice.is-locked {
    cursor: not-allowed;
    filter: grayscale(1);
    opacity: 0.58;
}

.avatar-placeholder-choice.is-locked img {
    filter: blur(1px) brightness(0.72);
}

.avatar-lock-label,
.avatar-prize-label {
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
    max-width: calc(100% - 10px);
    padding: 0.18rem 0.42rem;
    border-radius: 999px;
    background: rgba(18, 12, 8, 0.76);
    color: #fff4d0;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avatar-prize-label {
    background: rgba(169, 201, 143, 0.92);
    color: #18200f;
}

/* Guest pen name: match the Writing Desk writing surface. */
#writingZoneSection #guestPenName,
#writingZoneSection .writer-action-line #guestPenName,
body.focus-mode #writingZoneSection #guestPenName {
    color: #15100b !important;
    caret-color: #8f5f34 !important;
    background:
        linear-gradient(135deg, rgba(255, 251, 236, 0.98), rgba(232, 213, 171, 0.96)) !important;
    border: 1px solid rgba(147, 98, 54, 0.38) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        inset 0 -18px 32px rgba(143, 103, 45, 0.08),
        0 8px 18px rgba(28, 16, 9, 0.12) !important;
    text-shadow: none !important;
}

#writingZoneSection #guestPenName::placeholder,
body.focus-mode #writingZoneSection #guestPenName::placeholder {
    color: rgba(62, 43, 27, 0.52) !important;
    font-style: italic !important;
}

#writingZoneSection #guestPenName:focus,
body.focus-mode #writingZoneSection #guestPenName:focus {
    border-color: rgba(147, 98, 54, 0.58) !important;
    box-shadow:
        0 0 0 4px rgba(215, 165, 111, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        inset 0 -18px 32px rgba(143, 103, 45, 0.08) !important;
}

/* Profile modal picture: force every placeholder into the same clean circle. */
#profileModal .avatar-wrapper {
    width: 112px !important;
    height: 112px !important;
    min-width: 112px !important;
    flex: 0 0 112px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: transparent !important;
}

#profileModal #profileAvatar.avatar-large,
#profileModal .avatar-wrapper #profileAvatar {
    display: block !important;
    width: 112px !important;
    height: 112px !important;
    min-width: 112px !important;
    min-height: 112px !important;
    max-width: 112px !important;
    max-height: 112px !important;
    aspect-ratio: 1 / 1 !important;
    border: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: transparent !important;
    box-shadow: none !important;
}

#profileModal .avatar-edit-hint {
    border-radius: 50% !important;
}

@media (max-width: 640px) {
    #profileModal .avatar-wrapper,
    #profileModal #profileAvatar.avatar-large,
    #profileModal .avatar-wrapper #profileAvatar {
        width: 100px !important;
        height: 100px !important;
        min-width: 100px !important;
        min-height: 100px !important;
        max-width: 100px !important;
        max-height: 100px !important;
        flex-basis: 100px !important;
    }
}