/* Calm palettes. Accent buttons use dark ink for accessible contrast. */
[data-theme="white"]{
  --bg:#FAFAF8;--bg2:#EBECE8;--card:#FFFFFF;--ink:#272B29;--muted:#717371;
  --line:#DCDDDB;--accent:#66736A;--accent-ink:#FFFFFF;--blush:#D4D7D3;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="milk"]{
  --bg:#F9F7F1;--bg2:#ECE8DD;--card:#FFFDF8;--ink:#302C25;--muted:#76736C;
  --line:#DDDBD4;--accent:#8C7957;--accent-ink:#0D100D;--blush:#DDD6C9;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="ivory"]{
  --bg:#F7F4E9;--bg2:#EAE5D4;--card:#FFFDF5;--ink:#302D23;--muted:#767368;
  --line:#DBD8CD;--accent:#89804E;--accent-ink:#0D100D;--blush:#DAD6C1;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="linen"]{
  --bg:#F6F3EF;--bg2:#E9E2D9;--card:#FFFCF9;--ink:#302A25;--muted:#75706C;
  --line:#DAD7D3;--accent:#8C7867;--accent-ink:#0D100D;--blush:#DAD3CC;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="pearl"]{
  --bg:#F7F7F9;--bg2:#E7E7EC;--card:#FFFFFF;--ink:#2A2B31;--muted:#727277;
  --line:#DADADD;--accent:#787E93;--accent-ink:#0D100D;--blush:#D6D8DE;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="night"]{
  --bg:#141412;--bg2:#1A1A17;--card:#1F1F1B;--ink:#F0EEE6;--muted:#A3A29C;
  --line:#333330;--accent:#C9B276;--accent-ink:#0D100D;--blush:#433D2C;
  --shadow:0 30px 60px -30px #0009;color-scheme:dark;
}
[data-theme="graphite"]{
  --bg:#202123;--bg2:#292B2E;--card:#303235;--ink:#F1F0EC;--muted:#A8A8A6;
  --line:#3D3E3F;--accent:#B5B9B1;--accent-ink:#0D100D;--blush:#474948;
  --shadow:0 30px 60px -30px #0009;color-scheme:dark;
}
[data-theme="chocolate"]{
  --bg:#29231F;--bg2:#352D27;--card:#3C332D;--ink:#F1EAE1;--muted:#ABA49D;
  --line:#453F3A;--accent:#C3AC91;--accent-ink:#0D100D;--blush:#51473D;
  --shadow:0 30px 60px -30px #0009;color-scheme:dark;
}
[data-theme="emerald"]{
  --bg:#1C2824;--bg2:#24352E;--card:#2B3D35;--ink:#EAF0E7;--muted:#A2AAA3;
  --line:#39443F;--accent:#ABBDA3;--accent-ink:#0D100D;--blush:#414F45;
  --shadow:0 30px 60px -30px #0009;color-scheme:dark;
}
[data-theme="midnight"]{
  --bg:#1E2531;--bg2:#273140;--card:#2D394A;--ink:#EDF0F3;--muted:#A5A9AF;
  --line:#3B414C;--accent:#A7B7CA;--accent-ink:#0D100D;--blush:#424B59;
  --shadow:0 30px 60px -30px #0009;color-scheme:dark;
}
[data-theme="sage"]{
  --bg:#F1F1EA;--bg2:#E6E8DD;--card:#FBFBF7;--ink:#232822;--muted:#6B6E68;
  --line:#D4D5CE;--accent:#7C8B6A;--accent-ink:#0D100D;--blush:#D3D6C9;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="mustard"]{
  --bg:#F3F1E7;--bg2:#E9E5D5;--card:#FBFAF5;--ink:#2A2720;--muted:#706E66;
  --line:#D7D5CB;--accent:#A3873F;--accent-ink:#0D100D;--blush:#DED5BB;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="straw"]{
  --bg:#F5F3EA;--bg2:#ECE7D4;--card:#FCFBF6;--ink:#2B2820;--muted:#726F67;
  --line:#D9D7CE;--accent:#A08A4B;--accent-ink:#0D100D;--blush:#DFD8C1;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="olive"]{
  --bg:#F0F0E8;--bg2:#E4E5D8;--card:#FAFAF5;--ink:#262721;--muted:#6D6D67;
  --line:#D4D4CC;--accent:#8E8B4F;--accent-ink:#0D100D;--blush:#D7D6C0;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="powder"]{
  --bg:#F3EFEC;--bg2:#E9E2DE;--card:#FBF9F7;--ink:#2B2527;--muted:#716C6C;
  --line:#D7D3D0;--accent:#99838C;--accent-ink:#0D100D;--blush:#DCD3D3;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="lavender"]{
  --bg:#F0EFF1;--bg2:#E4E2E8;--card:#FAF9FB;--ink:#25232A;--muted:#6C6A70;
  --line:#D4D2D5;--accent:#8D86A6;--accent-ink:#0D100D;--blush:#D6D4DE;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="mist"]{
  --bg:#EEF0F1;--bg2:#E1E5E8;--card:#F9FAFB;--ink:#22262A;--muted:#696D70;
  --line:#D1D4D5;--accent:#748C9D;--accent-ink:#0D100D;--blush:#CED6DB;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="mocha"]{
  --bg:#F2EFEB;--bg2:#E7E1DA;--card:#FBF9F6;--ink:#29241F;--muted:#6F6B66;
  --line:#D6D3CE;--accent:#9A8069;--accent-ink:#0D100D;--blush:#DBD2C9;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="mint"]{
  --bg:#EDF2EC;--bg2:#DEE9DE;--card:#F8FCF7;--ink:#25302A;--muted:#6B746E;
  --line:#D1D7D1;--accent:#708B77;--accent-ink:#0D100D;--blush:#CCD7CE;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="peach"]{
  --bg:#F5EFE7;--bg2:#ECE0D2;--card:#FCF8F2;--ink:#322A23;--muted:#766F68;
  --line:#DAD3CC;--accent:#A08368;--accent-ink:#0D100D;--blush:#DFD3C6;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="sand"]{
  --bg:#F1EEE5;--bg2:#E6DFCF;--card:#FBF8EF;--ink:#302C24;--muted:#747068;
  --line:#D6D3CA;--accent:#948365;--accent-ink:#0D100D;--blush:#D9D2C4;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="lilac"]{
  --bg:#F1EDF3;--bg2:#E5DDE9;--card:#FAF7FC;--ink:#2D2732;--muted:#726C76;
  --line:#D6D1D8;--accent:#93809F;--accent-ink:#0D100D;--blush:#D9D1DD;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="butter"]{
  --bg:#F5F3E6;--bg2:#ECE8CC;--card:#FCFAF0;--ink:#302D20;--muted:#757265;
  --line:#D9D7CA;--accent:#918449;--accent-ink:#0D100D;--blush:#DBD6BD;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="champagne"]{
  --bg:#F4F0E8;--bg2:#EAE1D4;--card:#FCF9F2;--ink:#302B25;--muted:#757069;
  --line:#D9D4CD;--accent:#9A8262;--accent-ink:#0D100D;--blush:#DDD3C5;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}
[data-theme="blueberry"]{
  --bg:#EEEFF4;--bg2:#DEE1EB;--card:#F8F9FC;--ink:#252A35;--muted:#6B6F78;
  --line:#D2D3D9;--accent:#7B85A4;--accent-ink:#0D100D;--blush:#D0D3DF;
  --shadow:0 30px 60px -30px #25282040;color-scheme:light;
}

/* Font variables are scoped to the root and to each picker sample. */
[data-font="modern"]{--display:"Unbounded",sans-serif;--text-serif:"Cormorant Garamond",Georgia,serif;--em-font:"Unbounded",sans-serif}
[data-font="city"]{--display:"Montserrat",sans-serif;--text-serif:"Cormorant Garamond",Georgia,serif;--em-font:"Montserrat",sans-serif}
[data-font="air"]{--display:"Raleway",sans-serif;--text-serif:"Cormorant Garamond",Georgia,serif;--em-font:"Raleway",sans-serif}
[data-font="soft"]{--display:"Comfortaa",sans-serif;--text-serif:"Cormorant Garamond",Georgia,serif;--em-font:"Comfortaa",sans-serif}
[data-font="atelier"]{--display:"Jost",sans-serif;--text-serif:"Cormorant Garamond",Georgia,serif;--em-font:"Jost",sans-serif}
[data-font="journal"]{--display:"Playfair Display",Georgia,serif;--text-serif:"Playfair Display",Georgia,serif;--em-font:"Playfair Display",Georgia,serif}
[data-font="glam"]{--display:"Yeseva One",Georgia,serif;--text-serif:"Cormorant Garamond",Georgia,serif;--em-font:"Yeseva One",Georgia,serif}
[data-font="novel"]{--display:"Lora",Georgia,serif;--text-serif:"Lora",Georgia,serif;--em-font:"Lora",Georgia,serif}
[data-font="poetry"]{--display:"EB Garamond",Georgia,serif;--text-serif:"EB Garamond",Georgia,serif;--em-font:"EB Garamond",Georgia,serif}
[data-font="classic"]{--display:"PT Serif",Georgia,serif;--text-serif:"PT Serif",Georgia,serif;--em-font:"PT Serif",Georgia,serif}
[data-font="script"]{--display:"Cormorant Garamond",Georgia,serif;--text-serif:"Cormorant Garamond",Georgia,serif;--em-font:"Great Vibes",cursive}
[data-font="letter"]{--display:"Cormorant Garamond",Georgia,serif;--text-serif:"Cormorant Garamond",Georgia,serif;--em-font:"Marck Script",cursive}
[data-font="diary"]{--display:"Cormorant Garamond",Georgia,serif;--text-serif:"Cormorant Garamond",Georgia,serif;--em-font:"Bad Script",cursive}
[data-font="sketch"]{--display:"Cormorant Garamond",Georgia,serif;--text-serif:"Cormorant Garamond",Georgia,serif;--em-font:"Caveat",cursive}
[data-font="flourish"]{--display:"Cormorant Garamond",Georgia,serif;--text-serif:"Cormorant Garamond",Georgia,serif;--em-font:"Comforter",cursive}

/* Each family has its own optical size; narrow screens keep the whole name visible. */
html[data-font="journal"] .hero h1{font-size:clamp(62px,min(9.4vw,13.5vh),136px);font-weight:400;letter-spacing:-.025em}
html:is([data-font="modern"],[data-font="city"],[data-font="air"],[data-font="soft"],[data-font="atelier"]) .hero h1{font-size:clamp(40px,5.8vw,88px);font-weight:400;letter-spacing:-.04em;line-height:1.03}
html[data-font="modern"] .hero h1{font-weight:500;text-transform:uppercase;font-size:clamp(32px,5.8vw,88px)}
html[data-font="city"] .hero h1{font-size:clamp(49px,7.3vw,108px);font-weight:500}
html[data-font="air"] .hero h1{font-size:clamp(53px,8.2vw,118px);font-weight:400}
html[data-font="soft"] .hero h1{font-size:clamp(43px,6.7vw,100px);letter-spacing:-.06em}
html[data-font="atelier"] .hero h1{font-size:clamp(60px,9vw,128px);font-weight:400}
html:is([data-font="modern"],[data-font="city"],[data-font="air"],[data-font="soft"],[data-font="atelier"]) :is(.hero h1 em,.head h2 em,.contact h3 em,.logo){font-style:normal}
html:is([data-font="modern"],[data-font="city"],[data-font="air"],[data-font="soft"],[data-font="atelier"]) .head h2{font-size:clamp(30px,4.4vw,62px);font-weight:400;letter-spacing:-.03em}
html:is([data-font="modern"],[data-font="city"],[data-font="air"],[data-font="soft"],[data-font="atelier"]) .contact h3{font-size:30px;font-weight:400;letter-spacing:-.02em}
html:is([data-font="modern"],[data-font="city"],[data-font="air"],[data-font="soft"],[data-font="atelier"]) .logo{font-size:20px;font-weight:500}
html[data-font="modern"] .logo{font-size:15px;text-transform:uppercase}
html:is([data-font="modern"],[data-font="city"],[data-font="air"],[data-font="soft"],[data-font="atelier"]) .stats b{font-size:30px;font-weight:400}
html:is([data-font="modern"],[data-font="city"],[data-font="air"],[data-font="soft"],[data-font="atelier"]) .fact b{font-size:19px;font-weight:500}
html:is([data-font="modern"],[data-font="city"],[data-font="air"],[data-font="soft"],[data-font="atelier"]) .svc i{font-size:20px}
html:is([data-font="modern"],[data-font="city"],[data-font="air"],[data-font="soft"],[data-font="atelier"]) .since b{font-size:16px}
html[data-font="glam"] .hero h1{font-size:clamp(53px,8.4vw,122px);letter-spacing:-.01em;line-height:.98}
html[data-font="glam"] :is(.hero h1 em,.head h2 em,.contact h3 em,.logo){font-style:normal}
html[data-font="novel"] .hero h1{font-size:clamp(61px,9vw,130px);letter-spacing:-.04em}
html[data-font="poetry"] .hero h1{font-size:clamp(70px,10.5vw,150px);letter-spacing:-.025em}
html[data-font="classic"] .hero h1{font-size:clamp(58px,8.7vw,125px);letter-spacing:-.04em}
html:is([data-font="script"],[data-font="letter"],[data-font="diary"],[data-font="sketch"],[data-font="flourish"]) .hero h1{font-size:clamp(52px,6.8vw,100px);text-transform:uppercase;letter-spacing:.04em;font-weight:500;line-height:1}
html:is([data-font="script"],[data-font="letter"],[data-font="diary"],[data-font="sketch"],[data-font="flourish"]) .hero h1 em{display:inline-block;font-style:normal;text-transform:none;letter-spacing:0;font-size:1.5em;line-height:1.2}
html[data-font="letter"] .hero h1 em{font-size:1.28em}
html[data-font="diary"] .hero h1 em{font-size:1.13em;line-height:1.4}
html[data-font="sketch"] .hero h1 em{font-size:1.5em}
html[data-font="flourish"] .hero h1 em{font-size:1.6em}
html:is([data-font="script"],[data-font="letter"],[data-font="diary"],[data-font="sketch"],[data-font="flourish"]) :is(.head h2 em,.contact h3 em){font-style:normal;font-size:1.15em}

/* Compact appearance control; the admin owns the contents of its empty slot. */
.switch{position:fixed;right:20px;bottom:max(20px,env(safe-area-inset-bottom));z-index:60;font:13px/1.4 var(--sans);color:var(--ink)}
.switch button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.design-toggle{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 19px;border:1px solid var(--line);border-radius:999px;background:var(--card);box-shadow:0 8px 30px #00000012;font-weight:600!important}
.design-toggle::before{content:"";width:16px;height:16px;border:1px solid var(--line);border-radius:50%;background:linear-gradient(135deg,var(--bg) 50%,var(--accent) 50%)}
.design-panel{position:absolute;right:0;bottom:58px;width:360px;max-height:min(740px,calc(100dvh - 100px));overflow-y:auto;overscroll-behavior:contain;padding:22px;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);scrollbar-width:thin}
.design-panel[hidden]{display:none}
.design-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;gap:12px}
.design-heading h2{font:600 17px var(--sans);letter-spacing:-.03em}
.design-close{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:20px!important}
.design-section+.design-section{margin-top:19px;padding-top:17px;border-top:1px solid var(--line)}
.design-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.design-section-title h3{font:600 14px var(--sans)}
.design-current{color:var(--muted);font-size:12px;text-align:right}
.design-group+.design-group{margin-top:12px}
.design-group-label{display:block;color:var(--muted);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.11em;margin-bottom:7px}
.design-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.design-swatch{display:grid;place-items:center;width:100%;aspect-ratio:1;border:0;border-radius:50%;background:transparent;padding:4px}
.design-swatch::before{content:"";width:100%;height:100%;border:1px solid #00000020;border-radius:50%;background:linear-gradient(135deg,var(--s1) 50%,var(--s2) 50%)}
.design-swatch[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--ink)}
.design-swatch:hover{background:var(--bg2)}
.design-fonts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.design-font{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-width:0;min-height:55px;padding:7px 2px;border:1px solid var(--line);border-radius:10px;background:transparent}
.design-font-sample{font:400 14px/1.3 var(--em-font);max-width:100%}
.design-font[data-font="modern"] .design-font-sample{font-size:9px;letter-spacing:-.04em}
.design-font[data-font="soft"] .design-font-sample{font-size:11px}
.design-font[data-font="city"] .design-font-sample{font-size:12px}
.design-font[data-font="glam"] .design-font-sample{font-size:12px}
.design-font[data-group="script"] .design-font-sample{font-size:17px}
.design-font[data-font="letter"] .design-font-sample{font-size:16px}
.design-font[data-font="diary"] .design-font-sample{font-size:15px}
.design-font-name{font:9px/1.2 var(--sans);color:var(--muted)}
.design-font:hover{background:var(--bg2)}
.design-font[aria-pressed="true"]{border-color:var(--ink);background:var(--bg2);box-shadow:inset 0 0 0 .5px var(--ink)}
.design-note{color:var(--muted);font-size:10px;line-height:1.5;margin-top:17px}
#design-admin-slot:not(:empty){border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.viewer.open~.switch{display:none}
@media(max-width:620px){
  .switch{right:12px;bottom:max(12px,env(safe-area-inset-bottom))}
  .design-toggle{min-height:44px;padding:0 16px;font-size:12px!important}
  .design-panel{position:fixed;left:8px;right:8px;bottom:calc(66px + env(safe-area-inset-bottom));width:auto;max-height:70dvh;max-height:70vh;padding:18px;border-radius:22px}
  .design-heading{position:sticky;top:-18px;z-index:1;padding-top:6px;padding-bottom:10px;margin-top:-6px;margin-bottom:8px;background:var(--card)}
  .design-swatches{grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
  .design-fonts{gap:5px}
  html[data-font="journal"] .hero h1{font-size:clamp(54px,15.5vw,88px)}
  html[data-font="glam"] .hero h1{font-size:clamp(48px,14.7vw,84px)}
  html[data-font="novel"] .hero h1,html[data-font="classic"] .hero h1{font-size:clamp(52px,15vw,88px)}
  html[data-font="poetry"] .hero h1{font-size:clamp(64px,18vw,100px)}
  html[data-font="modern"] .hero h1{font-size:clamp(30px,8.6vw,50px)}
  html[data-font="city"] .hero h1{font-size:clamp(42px,12.5vw,74px)}
  html[data-font="soft"] .hero h1{font-size:clamp(40px,11.7vw,68px)}
  html[data-font="air"] .hero h1{font-size:clamp(48px,14vw,80px)}
  html[data-font="atelier"] .hero h1{font-size:clamp(53px,15vw,90px)}
}