/* Individual screen compositions from the eleven approved boards. */
:root { --design-serif:'Lora',Georgia,serif; --design-display:'Cormorant Garamond',Georgia,serif; --design-mono:'Courier New',monospace; }
html:not([data-app-theme="classic"]) { --tabs-h:72px; }
html:not([data-app-theme="classic"]) .tabs { min-height:72px; padding:7px 8px calc(7px + env(safe-area-inset-bottom)); gap:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; }
html:not([data-app-theme="classic"]) .tab { font-size:10px; gap:5px; color:var(--text); opacity:.75; }
html:not([data-app-theme="classic"]) .tab.on { opacity:1; color:var(--green); font-weight:700; }
html:not([data-app-theme="classic"]) .tab.on::after { display:none; }
html:not([data-app-theme="classic"]) .tab.on svg { fill:currentColor; stroke-width:1.2; }
html:not([data-app-theme="classic"]) .tab.on svg path { stroke:var(--cream); }
html:not([data-app-theme="classic"]) :is(.btn,.input,.search-box) { border-radius:var(--app-radius); }
html:not([data-app-theme="classic"]) :is(.topbar,.reader-head) { box-shadow:none; }
.design-home,.design-reader,.design-journal,.design-support { --d-space:20px; color:var(--text); }
.design-home h1,.design-journal h1,.design-support h1 { margin:0; font:500 46px/.98 var(--design-display); letter-spacing:-.025em; }
.design-masthead { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; }
.design-logo { display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit; font:500 28px/1 var(--design-display); white-space:nowrap; }
.design-mast-actions { display:flex; align-items:center; gap:5px; }
.design-masthead .avatar-btn { width:35px; height:35px; font:500 21px var(--design-display); background:var(--sand); color:var(--text); }
.design-leaf { width:26px; height:36px; flex:none; }
.design-change { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:44px; min-height:44px; text-decoration:none; color:inherit; font:500 10px/1 var(--sans); }
.design-mast-actions .design-change span { display:none; }
.design-date { display:block; font:500 9px/1.7 var(--sans); text-transform:uppercase; letter-spacing:.21em; }
.design-intro .design-date { margin-bottom:12px; }
.design-intro p { font:400 14px/1.4 var(--design-serif); margin:10px 0 0; }
.design-art { margin:0; overflow:hidden; }
.design-art img { display:block; width:100%; height:100%; object-fit:cover; }
.design-home { padding:9px 20px 22px; display:flex; flex-direction:column; gap:15px; }
.design-home > .design-art { aspect-ratio:1.65; }
.design-verse { position:relative; display:flex; flex-direction:column; gap:14px; padding:18px; background:var(--sand); border-radius:var(--app-radius); }
.design-quote { display:flex; flex-direction:column; gap:6px; }
.design-quote .votd-home-text { display:block; font:400 27px/1.18 var(--design-display); color:inherit; }
.design-quote .votd-home-ref { font:400 12px/1.5 var(--design-serif); letter-spacing:0; text-transform:none; color:inherit; }
.design-verse-kicker { display:none; font:500 9px var(--sans); text-transform:uppercase; letter-spacing:.28em; }
.design-cta { min-height:44px; display:flex; align-items:center; justify-content:center; gap:12px; border:1px solid currentColor; border-radius:var(--app-radius); padding:10px 14px; color:inherit; background:transparent; text-decoration:none; font:500 13px/1.4 var(--sans); cursor:pointer; }
.design-quick { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.design-quick a { display:flex; min-height:64px; align-items:center; gap:10px; padding:12px 10px; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:var(--app-radius); }
.design-quick a > span:not(.quick-index):not(.quick-icon) { flex:1; min-width:0; }
.design-quick b { display:block; font:500 11px/1.4 var(--sans); }
.design-quick small { display:block; font:400 9px/1.5 var(--sans); margin-top:3px; opacity:.85; }
.design-quick a > svg { width:12px; flex:none; }
.quick-index { display:none; }
.quick-icon { display:flex; flex:none; }
.design-community-link { display:flex; align-items:center; gap:14px; padding:13px; border-radius:12px; background:#E6F0F7; color:#203B4B; text-decoration:none; font:500 13px var(--sans); }
.design-community-link span { flex:1; }
.design-ornament { display:flex; align-items:center; justify-content:center; gap:9px; font:400 22px var(--design-display); margin:0 25px; color:inherit; }
.design-ornament span { height:1px; background:currentColor; opacity:.45; flex:1; }
.design-home-more { border-top:1px solid var(--line); margin:0 20px 25px; }
.design-home-more > summary { cursor:pointer; padding:17px 0; font:500 16px var(--design-serif); }
.design-home-more > summary span { display:block; padding-top:6px; font:400 11px var(--sans); color:var(--muted); }
.design-home-rest .section { padding-left:0; padding-right:0; }
.design-original-access { padding:0 16px; display:flex; justify-content:flex-end; }

/* 01: open, square-cornered editorial folio. */
.design-home-quiet { gap:17px; }
.design-home-quiet .design-verse { padding:0; background:none; border-radius:0; }
.design-home-quiet .design-verse-kicker { display:block; }
.design-home-quiet .design-quote { max-width:95%; }
.design-home-quiet .votd-home-text { font-size:32px; }
.design-home-quiet .votd-home-ref { font:500 9px var(--sans); letter-spacing:.23em; text-transform:uppercase; }
.design-home-quiet .design-cta { border-radius:0; }
.design-home-quiet .design-quick { border-top:1px solid var(--line-2); padding-top:12px; gap:0; }
.design-home-quiet .design-quick a { border:0; border-radius:0; min-height:50px; padding:0 10px 0 0; }
.design-home-quiet .design-quick a + a { border-left:1px solid var(--line-2); padding-left:18px; }
.design-home-quiet .quick-icon { display:none; }
.design-home-quiet .design-quick b { font:400 15px var(--design-display); }
.design-home-quiet .design-quick small { font-size:8px; text-transform:uppercase; letter-spacing:.12em; }
/* 02: gold-engraved sanctuary with live text inside the arch. */
.design-home-emerald { text-align:center; gap:13px; color:#F4E8C8; }
.design-home-emerald .design-logo { font:400 15px var(--design-serif); letter-spacing:.22em; }
.design-home-emerald .design-masthead { min-height:58px; }
.sanctuary-frame { background:#143930 url('../images/designs/emerald-v2.webp') center/100% 100% no-repeat; min-height:560px; padding:110px 36px 170px; display:flex; flex-direction:column; gap:22px; }
.sanctuary-frame h1 { font-size:39px; }
.sanctuary-frame .design-date { display:none; }
.sanctuary-frame .design-verse { background:none; padding:0; border-radius:0; }
.sanctuary-frame .votd-home-text { font-size:26px; font-style:italic; }
.sanctuary-frame .design-cta { border-radius:0; font-family:var(--design-serif); }
.design-home-emerald .design-quick a { border:0; border-radius:0; }
.design-home-emerald .design-quick a + a { border-left:1px solid #cfba8270; }
.design-home-emerald .quick-icon { display:none; }
.design-home-emerald .design-quick b { font:400 14px var(--design-display); }
/* 03: architectural photo, black verse block, numbered ruled rows. */
.design-home-stone { gap:8px; padding:8px 15px 20px; }
.design-home-stone .design-logo { font:400 16px var(--design-mono); letter-spacing:.08em; }
.design-home-stone .design-masthead .avatar-btn { display:none; }
.design-home-stone .design-intro { padding:12px 7px 8px; }
.design-home-stone .design-intro h1 { font:500 34px/1.1 var(--sans); letter-spacing:-.05em; }
.design-home-stone .design-date { font-family:var(--design-mono); }
.design-home-stone .design-verse { background:#202020; color:#fff; padding:22px; border-radius:0; }
.design-home-stone .votd-home-text { font:400 23px/1.3 var(--sans); }
.design-home-stone .votd-home-ref { font:400 10px var(--design-mono); letter-spacing:.1em; }
.design-home-stone .design-cta { align-self:flex-end; border-radius:0; font:400 12px var(--design-mono); }
:is(.design-home-stone,.design-home-peach) .design-quick { display:flex; flex-direction:column; gap:0; }
:is(.design-home-stone,.design-home-peach) .design-quick a { border:0; border-bottom:1px solid var(--line-2); border-radius:0; min-height:60px; }
:is(.design-home-stone,.design-home-peach) .quick-index { display:block; font:400 12px var(--design-mono); padding-right:8px; }
.design-home-stone .quick-icon,.design-home-stone .design-quick small { display:none; }
.design-home-stone .design-quick b { font:400 12px var(--design-mono); }
/* 04: immersive midnight cover, champagne rules, pale-blue journal sheet. */
.design-home-sapphire { padding:0 16px 22px; gap:14px; color:#F0D8AC; }
.evening-cover { position:relative; margin:0 -16px; padding:8px 22px 185px; min-height:360px; overflow:hidden; }
.evening-cover > .design-art { position:absolute; inset:0; z-index:0; }
.evening-cover > .design-art img { object-position:center 70%; }
.evening-cover .design-masthead,.evening-cover .design-intro { position:relative; z-index:1; }
.evening-cover .design-intro { text-align:center; margin-top:34px; }
.evening-cover .design-date { display:none; }
.evening-cover h1 { font-size:43px; }
.evening-cover .design-intro p { font:400 8px var(--sans); text-transform:uppercase; letter-spacing:.28em; color:#fff; }
.design-home-sapphire .design-verse { background:none; padding:0 15px 5px; text-align:center; }
.design-home-sapphire .votd-home-text { font-size:31px; }
.design-home-sapphire .design-cta { align-self:center; padding-inline:23px; border-radius:3px; font-family:var(--design-serif); }
.design-home-sapphire .design-quick a { background:#1B3C5E; border-color:#385D7B; color:#F8F3E8; border-radius:5px; }
/* 05: asymmetrical wine-and-rose cover, then blush interiors. */
html[data-app-theme="burgundy"][data-design-screen="home"] .app { background:#641F35; color:#FFF0EF; }
html[data-app-theme="burgundy"][data-design-screen="home"] :is(.tabs,.design-home-more) { background:#641F35; color:#FFF0EF; --text:#FFF0EF; --green:#FFF0EF; --cream:#641F35; --muted:#F2D5DC; --line:#97586A; }
.design-home-burgundy { color:#FFF0EF; gap:16px; }
.design-home-burgundy .design-masthead { position:relative; z-index:2; }
.atelier-cover { position:relative; min-height:490px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:25px; }
.atelier-cover > .design-art { position:absolute; z-index:0; width:55%; top:-30px; bottom:0; right:-20px; border-radius:140px 0 0 0; }
.atelier-cover > .design-art::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#641F35 0%,transparent 40%),linear-gradient(0deg,#641F35,transparent 24%); }
.atelier-cover .design-intro,.atelier-cover .design-verse { position:relative; z-index:1; }
.atelier-cover .design-intro { width:55%; }
.atelier-cover h1 { font-size:65px; line-height:.84; letter-spacing:-.04em; }
.atelier-cover .design-date { display:none; }
.atelier-cover .design-intro p { font:400 8px/1.8 var(--sans); text-transform:uppercase; letter-spacing:.25em; margin-top:18px; }
.atelier-cover .design-verse { width:68%; background:none; padding:0; border-radius:0; }
.atelier-cover .design-quote { background:linear-gradient(90deg,#641F35 65%,transparent); padding:8px 0; }
.atelier-cover .votd-home-text { font-size:24px; }
.atelier-cover .design-cta { border:0; border-radius:99px; background:#F6DCE1; color:#581D30; font-family:var(--design-serif); }
.design-home-burgundy .design-quick { border-top:1px solid #A06374; padding-top:16px; }
.design-home-burgundy .design-quick a { border-color:#A06374; border-radius:13px; }
/* 06: soft contemporary headings paired with a literary reading face. */
html[data-app-theme="lavender"] .design-home { background:#F7F3FF; }
.design-home-lavender { gap:9px; }
.design-home-lavender .design-intro { padding:10px 8px 4px; }
:is(.design-home-lavender,.journal-lavender,.support-lavender) h1 { font:400 37px/1.05 var(--sans); letter-spacing:-.05em; }
.design-home-lavender .design-art { border-radius:19px; }
.design-home-lavender .design-verse { background:#3C2548; color:#FFF5FF; border-radius:20px; }
.design-home-lavender .design-cta { background:#DCD1FF; color:#291F4D; border:0; border-radius:99px; }
.design-home-lavender .design-quick a { border:0; border-radius:19px; background:#ECE4FA; }
/* 07: sunlit clay cover and peach paper. */
html[data-app-theme="terracotta"] .app { background:#F8DFCB; }
.design-home-terracotta { padding:0 18px 16px; gap:17px; background:#F8DFCB; }
.clay-cover { margin:0 -18px; background:#A84E33; color:#FFF2DE; }
.clay-cover .design-masthead { padding:10px 20px 0; }
.clay-cover .design-logo { font:400 11px var(--sans); letter-spacing:.25em; }
.clay-cover .design-intro { padding:20px 23px 16px; }
.clay-cover h1 { font:600 45px/1 var(--design-display); }
.clay-cover .design-intro p { font:400 8px var(--sans); text-transform:uppercase; letter-spacing:.3em; margin-top:15px; }
.clay-cover .design-art { aspect-ratio:1.6; }
.design-home-terracotta .design-verse { background:none; text-align:center; padding:0; }
.design-home-terracotta .design-cta { color:#91432E; border-radius:4px; }
.design-home-terracotta .design-quick { border-top:1px solid #C8A186; padding-top:12px; gap:0; }
.design-home-terracotta .design-quick a { border:0; border-radius:0; }
.design-home-terracotta .design-quick a+a { border-left:1px solid #C8A186; }
/* 08: open ocean and blue controls. */
.design-home-sky { gap:14px; }
.design-home-sky .design-logo { font-size:28px; letter-spacing:.025em; }
.design-home-sky h1 { font-size:37px; }
.design-home-sky .design-art { border-radius:11px; aspect-ratio:1.8; }
.design-home-sky .design-verse { padding:15px 9px 10px; text-align:center; background:#E2F3FD; border-radius:12px; }
.design-home-sky .votd-home-text { font-size:27px; }
.design-home-sky .design-cta { background:#287BAA; color:white; border:0; border-radius:10px; }
.design-home-sky .design-quick a { border-radius:10px; }
/* 09: olive still life, stacked actions and community banner. */
.design-home-mint { gap:13px; }
.design-home-mint .design-logo { color:#16452D; font-size:29px; }
.design-home-mint .design-verse { background:#E1F4DF url('../images/designs/mint-v2.webp') top right/100% auto no-repeat; padding:25px 16px 15px; border-radius:13px; color:#163E2C; }
.design-home-mint .design-verse-kicker { display:flex; height:30px; align-items:center; margin-bottom:3px; }
.design-home-mint .design-quote { padding-right:48px; }
.design-home-mint .votd-home-text { font-size:33px; }
.design-home-mint .design-cta { background:#164B2E; color:white; border:0; border-radius:13px; }
.design-home-mint .design-quick { display:flex; flex-direction:column; gap:0; }
.design-home-mint .design-quick a { border:0; border-top:1px solid var(--line); border-radius:0; }
.design-home-mint .quick-icon { padding:10px; border-radius:50%; background:#E3F0DF; }
.design-home-mint .design-quick b { font-size:13px; }
.design-home-mint .design-quick small { font-size:11px; }
/* 10: centered masthead, calm neutral panels and sunny pills. */
.design-home-butter .design-logo { font:500 13px var(--sans); letter-spacing:.17em; margin:auto; }
.design-home-butter .design-masthead { position:relative; }
.design-home-butter .design-mast-actions { position:absolute; inset:0; justify-content:space-between; pointer-events:none; }
.design-home-butter .design-mast-actions a { pointer-events:auto; }
.design-home-butter .design-mast-actions .avatar-btn { order:-1; }
.design-home-butter .design-intro { text-align:center; }
.design-home-butter h1 { font-size:42px; }
.design-home-butter .design-art { border-radius:14px; }
.design-home-butter .design-verse { text-align:center; border-radius:16px; }
.design-home-butter .design-cta { border:0; background:#F7E731; color:#252623; border-radius:99px; }
.design-home-butter .design-quick a { background:#F4F4F1; border:0; border-radius:12px; }
html[data-app-theme="butter"] .tab.on svg { fill:#F7E731; stroke:#414332; }
/* 11: crisp sans-serif opening, still-life photography and numbered rows. */
.design-home-peach .design-logo { font:500 14px var(--sans); letter-spacing:.17em; }
.design-home-peach h1 { font:500 36px/1.08 var(--sans); letter-spacing:-.045em; }
.design-home-peach .design-art { border-radius:12px; }
.design-home-peach .design-verse { text-align:center; background:#FFF0E4; border-radius:14px; }
.design-home-peach .design-cta { border-radius:99px; }

/* Real reader controls and verses, with each board's typography and hierarchy. */
.design-screen-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:67px; padding:9px 17px; font:500 25px var(--design-display); border-bottom:1px solid var(--line); }
.design-screen-head > span { min-width:0; }
.design-reading-intro { padding:20px 22px 6px; display:flex; flex-direction:column; gap:20px; }
.design-edition { display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; font:500 9px/1.6 var(--sans); letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:inherit; min-height:28px; }
.design-chapter-heading { display:flex; align-items:center; gap:18px; }
.design-chapter-heading h1 { font:500 51px/1.1 var(--design-display); letter-spacing:-.025em; margin:0 0 10px; }
.design-reader-tools { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.design-book { display:flex; align-items:center; gap:12px; padding:9px 14px; border-radius:var(--app-radius); background:var(--sand); color:inherit; text-decoration:none; font:400 13px var(--design-serif); min-height:40px; }
.design-font-sizes { display:flex; justify-content:flex-end; gap:0; }
.design-font-sizes button { min-width:32px; min-height:38px; border:0; background:transparent; color:inherit; padding:5px; font-family:var(--design-serif); border-radius:5px; }
.design-font-sizes button[aria-pressed="true"] { background:var(--sand); }
.design-reader .chapter { padding:28px 25px 16px; }
.design-reader .chapter.size-s { font-size:18px; }
.design-reader .chapter.size-m { font-size:22px; }
.design-reader .chapter.size-l { font-size:25px; }
.design-reader .chapter.size-xl { font-size:29px; }
.design-reader .chapter p { line-height:1.6; }
.design-reader .v { display:block; position:relative; padding-inline-start:29px; margin:0 0 26px; border-radius:4px; }
.design-reader .v sup { position:absolute; inset-inline-start:0; top:4px; margin:0; font:500 .58em/1.6 var(--sans); }
.design-reader .vnote { display:none; } /* Study content remains available through each verse and the chapter panel. */
.design-reader .reader-art { margin:0 20px 25px; aspect-ratio:1.8; }
.design-study { border-top:1px solid var(--line); margin:22px 20px 0; }
.design-study summary { cursor:pointer; padding:15px 0; font:500 13px var(--sans); }
.design-study .study-card { margin:0; }
.design-reader .chapter-nav { padding:15px 20px; }
.reader-endnote { text-align:center; font:400 8px var(--sans); text-transform:uppercase; letter-spacing:.3em; padding:10px 20px 20px; }
.reader-quiet .design-edition { justify-content:flex-start; border-bottom:1px solid var(--line-2); padding-bottom:9px; }
.reader-quiet .design-reader-tools { border-bottom:1px solid var(--line); padding-bottom:8px; }
.reader-quiet .design-book { padding-left:0; background:none; border-radius:0; }
.reader-emerald .design-chapter-heading { justify-content:center; text-align:center; border-block:1px solid #BFA87480; padding-block:18px; }
.reader-emerald .design-chapter-heading h1 { color:#F3E2B5; }
.reader-emerald .reader-engraving { height:165px; margin:10px 20px; background:url('../images/designs/emerald-v2.webp') center bottom/100% auto; }
.reader-stone .chapter-numeral { font:400 75px/1 var(--sans); border-right:1px solid var(--line-2); padding-right:19px; }
.reader-stone .design-chapter-heading { border-bottom:1px solid #888; padding:12px 0 25px; }
.reader-stone .design-chapter-heading h1 { font:400 15px var(--design-mono); text-transform:uppercase; letter-spacing:.1em; }
.reader-stone .design-date { font-family:var(--design-mono); }
.reader-stone .chapter { font-family:var(--sans); }
.reader-sapphire .design-chapter-heading { justify-content:center; text-align:center; color:#F0D8AC; }
.reader-sapphire .design-book { background:none; border:1px solid #6483A3; border-radius:2px; flex:1; }
.reader-sapphire .design-edition::before,.reader-sapphire .design-edition::after { content:''; height:1px; width:35px; background:#DECAA3; }
.reader-burgundy .design-book { background:#641F35; color:#FFF0EF; border-radius:99px; }
.reader-burgundy .v sup { color:#A65170; }
.reader-epilogue { font:italic 25px/1.2 var(--design-display); margin:22px auto; padding:22px 0; border-block:1px solid #B66D82; text-align:center; width:max-content; }
.reader-lavender .design-reading-intro { gap:16px; }
.reader-lavender .design-chapter-heading { margin-top:10px; }
.reader-lavender .chapter { font-family:var(--design-serif); }
.reader-lavender .design-book { border-radius:99px; }
.reader-terracotta .design-chapter-heading h1 { font-size:54px; }
.reader-terracotta .design-edition { justify-content:flex-start; }
.reader-terracotta .design-reader-tools { padding:12px 0; border-block:1px solid #D8B69C; }
.reader-terracotta .design-book { border:1px solid #BA9275; background:none; border-radius:4px; }
.reader-terracotta .reader-art { width:48%; margin-left:auto; aspect-ratio:.95; border-radius:100px 0 0 0; }
.reader-sky .design-book { font:400 28px var(--design-display); border-radius:99px; padding:11px 24px; }
.reader-sky .design-reading-intro { gap:26px; }
.reader-mint .design-edition { background:#EDF5ED; padding:12px; border-radius:10px; }
.mint-chapter-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mint-chapter-nav > a:not(.icon-btn) { font:500 39px var(--design-display); color:inherit; text-decoration:none; }
.reader-butter .design-book { background:#FFF6B8; border-radius:99px; }
.reader-butter .chapter,.reader-peach .chapter { font-family:var(--sans); }
.reader-peach .design-edition { background:#FFF0E4; align-self:center; border-radius:99px; padding:8px 14px; }
.reader-peach .design-book { background:none; font:600 20px var(--sans); padding-left:0; }
.reader-peach .v { border-bottom:1px solid var(--line); padding-bottom:24px; }

/* Functional writing surfaces; the existing journal library follows below. */
.design-journal { min-height:calc(100dvh - 72px); }
.design-journal-tools { display:flex; align-items:center; }
.design-journal-body { display:flex; flex-direction:column; padding:22px; gap:20px; position:relative; }
.design-journal h1 { font-size:43px; }
.design-journal-prompt { margin:0; font:400 16px/1.5 var(--design-serif); }
.journal-helper { margin:0; font:400 13px/1.6 var(--sans); }
.design-writing-area { display:block; }
.design-writing-area > .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.design-writing-area textarea { display:block; width:100%; min-height:310px; resize:vertical; padding:16px; border:1px solid var(--line-2); border-radius:var(--app-radius); background:transparent; color:inherit; font:400 19px/1.8 var(--design-serif); outline-offset:4px; }
.design-writing-area textarea::placeholder { color:inherit; opacity:.78; font-size:16px; }
.design-new-entry { width:100%; }
.design-journal-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px; padding:0 22px 15px; font:400 10px var(--sans); }
.design-journal-footer button { border:0; background:transparent; color:inherit; padding:12px 0; text-decoration:underline; }
.design-journal-library { border-top:1px solid var(--line); }
.design-journal-library > summary { cursor:pointer; padding:20px; font:500 14px var(--sans); }
.design-journal-library .jcover h1 { font-family:var(--serif); }
.journal-sheet,.journal-frame,.journal-cloud,.journal-blush-body,.journal-margin-content { display:flex; flex-direction:column; gap:20px; min-width:0; }
.design-recent { display:block; text-decoration:none; color:inherit; padding:16px; border:1px solid var(--line); border-radius:var(--app-radius); }
.design-recent p { margin:10px 0 0; font:400 21px/1.4 var(--design-display); }
.design-character-count { text-align:right; font:400 11px var(--sans); color:var(--muted); margin-top:-15px; }
:is(.journal-quiet,.journal-stone,.journal-terracotta,.journal-mint,.journal-peach) textarea { background:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,var(--line-2) 35px,var(--line-2) 36px); line-height:36px; padding:0 10px; }
:is(.journal-quiet,.journal-stone,.journal-terracotta) textarea { border:0; border-radius:0; padding:0; min-height:310px; }
.journal-quiet .design-journal-body { gap:24px; }
.journal-quiet .design-journal-prompt { border-top:1px solid var(--line-2); padding-top:22px; font:400 16px/1.4 var(--sans); }
.journal-quiet .design-cta { border-radius:0; }
.journal-quiet textarea { font-family:'Caveat',cursive; font-size:25px; }
.journal-emerald .journal-frame { padding:50px 30px 30px; background:url('../images/designs/emerald-journal-v2.webp') center/100% 100%; text-align:center; }
.journal-emerald .design-journal-prompt { font-size:20px; }
.journal-emerald textarea { background:#143930; border-color:#BDA366; border-radius:0; min-height:230px; }
.journal-emerald .design-cta { border-radius:0; background:#143930; }
.journal-stone h1 { font:500 29px var(--sans); letter-spacing:-.04em; padding-bottom:16px; border-bottom:1px solid #777; }
.journal-stone .design-date { text-align:center; font-family:var(--design-mono); padding-bottom:15px; border-bottom:1px solid var(--line-2); }
.journal-stone .design-journal-prompt { font-family:var(--sans); }
.journal-stone .design-cta { border-radius:0; background:#202020; color:white; font-family:var(--design-mono); }
.journal-sapphire .design-journal-body { padding:12px; }
.journal-sapphire .journal-sheet { background:#C4D8F2; color:#102844; border-radius:6px; padding:24px; text-align:center; }
.journal-sapphire h1 { font:400 26px/1.2 var(--design-display); }
.journal-sapphire .design-journal-prompt { font-size:14px; }
.journal-sapphire textarea { background:#E1EEFC; color:#102844; border:0; border-radius:5px; min-height:290px; text-align:left; }
.journal-sapphire .design-cta { border-radius:3px; }
.journal-burgundy .design-screen-head { background:#641F35; color:#FFF0EF; border:0; }
.journal-burgundy .design-journal-body { padding:0; gap:0; }
.journal-wine-heading { position:relative; background:#641F35; color:#FFF0EF; padding:12px 24px 26px; }
.journal-wine-heading h1 { max-width:85%; font-size:43px; }
.journal-wine-heading .design-leaf { position:absolute; right:19px; top:20px; width:47px; height:76px; opacity:.65; }
.journal-wine-heading .design-date { padding-top:14px; }
.journal-blush-body { padding:22px; gap:15px; }
.journal-burgundy .design-journal-prompt { font:500 23px/1.2 var(--design-display); }
.journal-burgundy textarea { min-height:110px; }
.journal-burgundy .design-cta { border-radius:99px; }
.journal-burgundy .design-recent p { font:400 29px/1.25 'Caveat',cursive; }
.journal-lavender { background:#EDE6FB; }
.journal-lavender .design-journal-body { padding:20px 17px; gap:18px; }
.journal-lavender .design-date { align-self:flex-start; padding:6px 12px; background:#F8F4FF; border-radius:99px; letter-spacing:.12em; }
.journal-lavender h1 { font-size:38px; padding-inline:5px; }
.journal-lavender .journal-sheet { background:#FDFBFF; border-radius:22px; padding:18px; gap:15px; }
.journal-lavender .design-journal-prompt { font:400 12px var(--sans); }
.journal-lavender textarea { border:0; padding:0; min-height:120px; font-family:var(--sans); }
.journal-lavender .design-recent { border:0; border-block:1px solid #DCD2F4; border-radius:0; padding:16px 0; }
.journal-lavender .design-recent .design-date { padding:0; background:none; font-size:8px; }
.journal-lavender .design-cta { background:#D6C8FF; color:#291B4B; border:0; border-radius:99px; }
.journal-terracotta .design-journal-body { padding:0; display:grid; grid-template-columns:64px minmax(0,1fr); gap:0; }
.journal-terracotta .design-screen-head { padding-left:82px; }
.journal-margin { grid-column:1; background:#A64F34; color:#FFF1DF; padding:26px 14px; display:flex; flex-direction:column; gap:33px; }
.journal-margin span { font:400 7px/2.4 var(--sans); text-transform:uppercase; letter-spacing:.15em; word-spacing:20px; }
.journal-margin span:last-child { margin-top:auto; }
.journal-margin-content { padding:23px 18px; gap:22px; }
.journal-terracotta h1 { font-size:35px; }
.journal-terracotta .design-date { font-size:8px; }
.journal-terracotta .design-journal-prompt { font:400 12px/1.7 var(--sans); }
.journal-terracotta textarea { min-height:320px; font-size:17px; }
.journal-terracotta .design-cta { border-radius:4px; }
.journal-sky { background:#E1F3FD; }
.journal-sky .design-journal-body { padding:12px; }
.journal-sky .journal-sheet { background:#FFFEFA; border-radius:17px; padding:24px 16px 16px; text-align:center; }
.journal-sky h1 { font-size:37px; }
.journal-sky .design-journal-prompt { font:400 13px/1.5 var(--sans); color:#506678; }
.journal-sky textarea { min-height:270px; text-align:left; border-color:#DDD9D0; border-radius:11px; }
.journal-sky .design-cta { background:#287BAA; color:white; border:0; border-radius:10px; }
.journal-mint .design-journal-body { padding:18px; gap:15px; }
.journal-mint-prompt { position:relative; background:#E5F4E5; padding:18px; border-radius:12px; }
.journal-mint-prompt h1 { font:400 23px/1.2 var(--design-display); padding-right:24px; margin-top:12px; }
.journal-mint-prompt .design-leaf { position:absolute; right:14px; top:28px; color:#698B68; }
.journal-mint textarea { min-height:340px; padding:6px 15px; background-origin:content-box; border:1px solid var(--line); border-radius:12px; }
.journal-mint .design-cta { background:#164B2E; color:white; border:0; border-radius:12px; }
.journal-butter .design-date { align-self:center; background:#FFF5BA; border-radius:99px; padding:7px 15px; }
.journal-butter h1 { text-align:center; font-size:37px; }
.journal-butter textarea { background:#F4F4F1; border:0; border-radius:18px; min-height:330px; }
.journal-butter .design-cta { background:#F7E731; color:#252623; border:0; border-radius:99px; }
.journal-peach .design-date { text-align:center; }
.journal-peach .journal-cloud { background:#F5F5F3; padding:20px; border-radius:18px; }
.journal-peach h1 { font:500 22px/1.35 var(--sans); letter-spacing:-.02em; }
.journal-peach textarea { background-color:white; min-height:320px; border:0; padding:8px; background-origin:content-box; border-radius:6px; }
.journal-peach .design-cta { border-radius:99px; }
.jpage[data-custom-paper="true"] .design-journal-body { background:transparent; }

/* Extend each composition to the other main app screens. */
.design-support-cover { position:relative; display:flex; flex-direction:column; }
.design-support-cover > .design-art { aspect-ratio:2.5; order:2; margin:0 20px 18px; }
.design-support-copy { padding:23px 23px 20px; }
.design-support-copy h1 { font-size:43px; margin-top:12px; }
.design-support-copy p { font:400 13px/1.6 var(--sans); margin:14px 0 0; max-width:42ch; }
.design-support-content { padding-top:10px!important; }
.design-feelings { gap:12px; }
.design-feelings .card { position:relative; padding:18px!important; min-height:112px!important; }
.design-row-arrow { display:block; margin-top:8px; }
.design-support-content > .card-link { position:relative; }
.support-quiet .design-art { order:0; margin-top:20px; }
.support-quiet .design-support-copy { padding-top:0; }
.support-list-quiet :is(.design-feelings,.card-link) { border-radius:0; }
.support-list-quiet .design-feelings { grid-template-columns:1fr; }
.support-list-quiet .design-feelings a { border:0; border-bottom:1px solid var(--line-2); min-height:72px!important; display:grid; grid-template-columns:1fr auto; }
.support-list-quiet .design-row-arrow { grid-column:2; grid-row:1/3; }
.support-emerald .design-support-cover { background:url('../images/designs/emerald-v2.webp') center/100% 100%; padding:70px 23px 90px; text-align:center; }
.support-emerald .design-art { display:none; }
.support-list-emerald .card { border:1px solid #B79F6870; border-radius:0; background:none; }
.support-list-emerald .design-feelings { grid-template-columns:1fr; }
.support-stone .design-support-copy h1 { font:500 35px/1.1 var(--sans); letter-spacing:-.05em; }
.support-stone .design-art { margin:0; }
.support-list-stone .design-feelings { grid-template-columns:1fr; gap:0; }
.support-list-stone .card-link { border:0; border-bottom:1px solid #777; border-radius:0; padding-left:50px!important; background:none; }
.support-list-stone .card-link::before { content:attr(data-design-index); position:absolute; left:12px; top:20px; font:400 11px var(--design-mono); }
.support-list-stone .post { border:1px solid #777; border-radius:0!important; }
.support-sapphire .design-support-cover { min-height:390px; text-align:center; justify-content:flex-start; color:#F0D8AC; }
.support-sapphire .design-art { position:absolute; inset:0; margin:0; aspect-ratio:auto; }
.support-sapphire .design-art img { object-position:50% 70%; }
.support-sapphire .design-support-copy { position:relative; z-index:1; padding-top:35px; }
.support-sapphire .design-support-copy p { color:#EFF4FC; }
.support-list-sapphire .card { background:#1B3C5E; border:1px solid #385D7B; }
.support-burgundy .design-support-cover { background:#641F35; color:#FFF0EF; min-height:345px; }
.support-burgundy .design-art { position:absolute; right:0; top:25px; bottom:0; width:46%; margin:0; border-radius:140px 0 0 0; aspect-ratio:auto; }
.support-burgundy .design-support-copy { position:relative; z-index:1; width:75%; padding-bottom:35px; background:linear-gradient(90deg,#641F35 65%,transparent); }
.support-burgundy .design-support-copy p { max-width:23ch; }
.support-list-burgundy .design-feelings a { background:#FFF8F8; border-radius:18px; }
.support-lavender .design-support-cover { background:#F0EAFB; margin:14px; border-radius:24px; overflow:hidden; }
.support-lavender .design-art { border-radius:18px; }
.support-list-lavender .card { background:#EEEBFA; border:0; border-radius:22px; }
.support-terracotta .design-support-copy { background:#A64F34; color:#FFF1DF; }
.support-terracotta .design-art { margin:0; }
.support-list-terracotta .design-feelings { grid-template-columns:1fr; }
.support-list-terracotta .card-link { border:0; border-left:5px solid #A64F34; border-radius:0; background:#FBE8D8; }
.support-sky .design-art { border-radius:14px; }
.support-list-sky .card { background:#E8F5FE; border-radius:14px; border-color:#BDDFEE; }
.support-mint .design-support-cover { background:#E1F4DF url('../images/designs/mint-v2.webp') right top/100% auto no-repeat; border-radius:14px; margin:17px; }
.support-mint .design-art { display:none; }
.support-mint .design-support-copy { padding-top:68px; }
.support-list-mint .design-feelings { grid-template-columns:1fr; }
.support-list-mint .card-link { border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; }
.support-list-mint .design-row-arrow { color:#164B2E; }
.support-butter .design-support-copy { text-align:center; }
.support-butter .design-art { border-radius:18px; }
.support-list-butter .card { background:#F3F3F0; border:0; border-radius:18px; }
.support-list-butter .design-row-arrow { background:#F7E731; width:35px; height:28px; display:grid; place-items:center; border-radius:99px; }
.support-peach .design-support-copy h1 { font:500 36px/1.05 var(--sans); letter-spacing:-.04em; }
.support-peach .design-art { border-radius:15px; }
.support-list-peach .design-feelings { grid-template-columns:1fr; }
.support-list-peach .card-link { border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; padding-left:52px!important; }
.support-list-peach .card-link::before { content:attr(data-design-index); position:absolute; left:12px; top:20px; font:500 17px var(--sans); color:#976A4B; }
.design-sample-post h2 { font:500 28px var(--design-display); margin:10px 0; }
.design-sample-post p { font:400 13px/1.6 var(--sans); }

/* Chooser contains reference boards and live previews of all six main screens. */
.design-board-thumbnail { display:block; width:100%; aspect-ratio:1.5; object-fit:contain; border-radius:8px; }
.ap-layout-thumbnail { display:block; width:100%; overflow:hidden; }
.design-original-thumb { display:flex; flex-direction:column; justify-content:space-around; background:#FBF9F2; color:#18392E; min-height:135px; padding:13px; font:500 12px var(--design-display); }
.design-original-thumb strong { font-size:22px; line-height:1; }
.design-original-thumb > span { font:400 8px var(--sans); }
.design-live-preview { width:100%; max-width:375px; height:640px; margin:0 auto; border:1px solid var(--line-2); border-radius:16px; overflow:hidden; background:var(--cream); }
.design-live-preview iframe { display:block; width:100%; height:100%; border:0; pointer-events:auto; }
.ap-screen-tabs { display:grid; grid-template-columns:repeat(3,1fr); max-width:none; }
.appearance-showcase { padding:12px 8px; }
.design-preview-detail { display:grid; gap:7px; font:400 12px/1.6 var(--sans); padding:6px 10px; }
.design-preview-detail strong { font:500 21px var(--design-display); }
.design-concept-reference { margin:15px 8px; font:400 12px var(--sans); }
.design-concept-reference summary { cursor:pointer; padding:8px 0; }
.design-concept-reference img { display:block; width:100%; border-radius:8px; }
.design-preview-jump { background:none; border:0; color:inherit; text-decoration:underline; padding:4px 0; font:400 10px var(--sans); }
html[data-design-preview="true"] .design-change,html[data-design-preview="true"] .design-home-more,html[data-design-preview="true"] .design-journal-footer,html[data-design-preview="true"] .design-journal-library { display:none; }
@media(min-width:480px) { .design-home { --d-space:26px; } .design-home h1 { font-size:54px; } .design-home-peach h1,.design-home-lavender h1 { font-size:43px; } .design-home-stone h1 { font-size:41px; } .atelier-cover h1 { font-size:78px; } .design-home .votd-home-text { font-size:34px; } .design-home-sapphire .evening-cover { min-height:420px; } }
@media(max-width:350px) { .design-home { padding-inline:15px; } .design-logo { font-size:24px; } .design-home h1 { font-size:39px; } .design-home-stone h1,.design-home-peach h1,.design-home-lavender h1 { font-size:30px; } .atelier-cover h1 { font-size:58px; } .design-quick a { gap:6px; padding:10px 7px; } .quick-icon svg { width:19px; } .design-font-sizes button { min-width:27px; } .design-reading-intro { padding-inline:17px; } .sanctuary-frame { padding-inline:29px; } .sanctuary-frame h1 { font-size:33px; } .design-journal-body { padding-inline:17px; } .journal-margin-content { padding-inline:13px; } .design-mast-actions .design-change { min-width:35px; } }
@media(prefers-reduced-motion:reduce) { .design-journal-library { scroll-behavior:auto; } }
.design-support-content:is(.support-list-quiet,.support-list-stone,.support-list-mint,.support-list-peach,.support-list-terracotta) .card-link { border-radius:0; }
.design-support-content.support-list-emerald .card { border-radius:0; }
.design-support-content.support-list-sapphire .card { border-radius:5px; }
.design-support-content.support-list-lavender .card { border-radius:22px; }
html:not([data-app-theme="classic"]) .tab.on[href="#/hope"] svg path { stroke:currentColor; fill:none; }
html[data-app-theme="butter"] .tab.on svg path { stroke:#414332; }
@media(max-width:350px) { .design-home-sapphire { padding-inline:16px; } .design-home-terracotta { padding-inline:18px; } .atelier-cover > .design-art { right:-15px; } }