:root {
  --ink: #171816;
  --ink-soft: #484a45;
  --ink-hover: #30312d;
  --paper: #f4f5f3;
  --paper-deep: #e8ebe8;
  --card: #fcfcfb;
  --surface: #fff;
  --surface-soft: #eef0ed;
  --line: rgba(23, 24, 22, 0.13);
  --border-strong: #8f918a;
  --acid: #d7fb4f;
  --acid-dark: #bddf38;
  --wine: #6e173a;
  --wine-soft: #f5edf0;
  --gold: #edc878;
  --muted-text: #62645e;
  --muted-light: #6d6f68;
  --on-dark: #fff;
  --on-dark-muted: #c4c5bf;
  --success: #667526;
  --success-soft: #edf2dc;
  --danger: #8b343a;
  --danger-soft: #f6e8e8;
  --warning: #775d17;
  --warning-soft: #f5f0df;
  --shadow: 0 24px 80px rgba(31, 28, 21, 0.14);
  --serif: "Newsreader", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --button-height: 44px;
  --button-height-large: 48px;
  --button-radius: 8px;
  --button-focus: var(--wine);
  --field-focus: rgba(110, 23, 58, .08);
  --template-cover-title-size: clamp(22px, 9cqi, 36px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
.auth-pending .header-actions { visibility: hidden; }
.auth-pending #dashboardView,
.auth-pending #projectsView,
.auth-pending #settingsView,
.auth-pending #billingView,
.auth-pending.create-route #landingView { visibility: hidden; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.editable-layer:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }
.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  height: 88px;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 5vw;
  background: linear-gradient(180deg,rgba(244,245,243,.94),rgba(244,245,243,.74) 72%,rgba(244,245,243,0));
  backdrop-filter: blur(8px);
}
.brand { display: inline-flex; align-items: center; width: max-content; }
.brand-logo { display: block; width: 155px; height: auto; }
.brand-mobile-mark { display: none; width: 30px; height: 30px; }
.brand-mark-image { display: block; width: 27px; height: 27px; object-fit: contain; }
.top-nav { display: flex; align-items: center; gap: 38px; color: #55564f; font-size: 15px; font-weight: 600; }
.top-nav a { transition: color .2s; }
.top-nav a:hover { color: var(--ink); }
.top-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--wine); text-underline-offset: 6px; }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
.header-projects-link { color: #55564f; font-size: 13px; font-weight: 700; white-space: nowrap; }
.header-projects-link:hover { color: var(--wine); }
.text-button { border: 0; background: transparent; font-weight: 700; font-size: 15px; padding: 10px; white-space: nowrap; }
.pill-button { border: 0; background: var(--ink); color: #fff; border-radius: var(--button-radius); padding: 13px 20px; font-size: 15px; font-weight: 700; white-space: nowrap; transition: transform .2s, background .2s; }
#openAuth { min-height: var(--button-height); border: 1px solid rgba(23,24,22,.3); border-radius: var(--button-radius); padding: 0 17px; background: rgba(255,255,255,.9); color: var(--ink); box-shadow: 0 5px 18px rgba(23,24,22,.06); }
#openAuth:hover { border-color: var(--ink); background: var(--surface); }
.pill-button:hover { transform: translateY(-2px); background: #31322e; }
.account-menu { position: relative; }
.account-menu-trigger { height: 44px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 0 11px 0 5px; background: rgba(255,255,255,.62); }
.account-menu-trigger > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--wine); color: #fff; font-size: 12px; font-weight: 800; }
.account-menu-trigger b { font-size: 12px; }
.account-menu-trigger svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.account-menu-popover { position: absolute; top: calc(100% + 9px); right: 0; z-index: 40; width: 230px; max-height: calc(100svh - 76px); overflow-x: hidden; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 7px; background: #fff; box-shadow: 0 18px 50px rgba(24,23,20,.16); }
.account-menu-popover > div { padding: 10px 11px 12px; border-bottom: 1px solid var(--line); }
.account-menu-popover > div strong, .account-menu-popover > div span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-popover > div strong { font-size: 12px; }.account-menu-popover > div span { margin-top: 3px; color: var(--muted-text); font-size: 12px; }
.account-menu-popover button, .account-menu-popover > a[role="menuitem"] { width: 100%; height: 44px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 6px; padding: 0 10px; background: transparent; text-align: left; font-size: 12px; font-weight: 700; }
.account-menu-popover button:hover, .account-menu-popover > a[role="menuitem"]:hover { background: #f1eee7; }.account-menu-popover button svg, .account-menu-popover > a[role="menuitem"] svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.landing-view {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 53% 47%;
  padding: 130px 6vw 74px;
  background:
    linear-gradient(90deg, rgba(245,241,233,.98) 0%, rgba(245,241,233,.9) 49%, rgba(235,230,218,.4) 100%),
    radial-gradient(circle at 85% 20%, #f3dbc8 0, transparent 29%),
    var(--paper);
}
.ambient { position: absolute; border-radius: 50%; filter: blur(10px); pointer-events: none; }
.ambient-one { width: 400px; height: 400px; background: rgba(209, 232, 113, .16); left: -230px; top: 35%; }
.ambient-two { width: 280px; height: 280px; background: rgba(121, 43, 73, .12); right: 5%; top: 8%; }
.hero-copy { position: relative; z-index: 2; max-width: 640px; }
.create-page-intro { display: none; }
.eyebrow { display: flex; align-items: center; gap: 11px; font-size: 12px; font-weight: 700; letter-spacing: 1.35px; text-transform: uppercase; color: #62645d; }
h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(58px, 5.2vw, 86px); line-height: .94; letter-spacing: -.028em; margin: 30px 0 22px; }
h1 em { font-weight: 400; color: inherit; }
.hero-subcopy { max-width: 570px; margin: 0 0 34px; font-size: 17px; line-height: 1.6; color: #5d5f58; }
.idea-card { max-width: 585px; padding: 25px 27px 27px; border: 1px solid rgba(27,27,25,.14); border-radius: 16px; background: rgba(255,255,255,.75); box-shadow: 0 22px 55px rgba(45,41,32,.1); backdrop-filter: blur(16px); }
.create-route .landing-view { min-height: 100svh; display: block; padding: 132px max(28px,calc((100vw - 650px)/2)) 80px; overflow: visible; background: radial-gradient(circle at 50% 5%,rgba(215,251,79,.14),transparent 28%),var(--paper); }
.create-route .hero-copy { width: 100%; max-width: 650px; margin: 0 auto; }
.create-route .create-page-intro { display: block; margin-bottom: 25px; }
.create-route .create-page-intro h1 { margin: 0 0 10px; font-size: clamp(46px,5vw,64px); line-height: .95; letter-spacing: -2px; }
.create-route .create-page-intro p { margin: 0; color: var(--muted-text); font-size: 15px; line-height: 1.55; }
.create-route .hero-copy > h1:not(#createPageTitle), .create-route .hero-copy > .hero-subcopy, .create-route .home-template-heading, .create-route .home-template-gallery, .create-route .home-trust, .create-route .home-proof, .create-route .home-process, .create-route .home-capabilities, .create-route .home-comparison, .create-route .format-showcase, .create-route .home-journal, .create-route .home-final-cta, .create-route .ambient { display: none; }
.create-route .idea-card { width: 100%; max-width: none; }
.field-label { display: block; margin-bottom: 7px; color: #63655f; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.optional-field { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; }.optional-field span { color: #979891; font-size: 12px; letter-spacing: .5px; text-transform: none; }
.idea-card input, .idea-card select {
  width: 100%; height: 47px; border: 1px solid rgba(25,26,24,.17); border-radius: 8px; outline: 0; background: #fff; color: var(--ink); padding: 0 14px; font-size: 14px; transition: border .2s, box-shadow .2s;
}
.idea-card input:focus, .idea-card select:focus { border-color: #6e173a; box-shadow: 0 0 0 3px rgba(110,23,58,.08); }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 13px; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; padding-right: 36px; }
.select-wrap svg, .font-select-wrap svg, .project-name svg { position: absolute; right: 12px; top: 50%; width: 17px; transform: translateY(-50%); fill: none; stroke: currentColor; stroke-width: 1.5; }
.genre-insight { display: flex; align-items: center; gap: 11px; min-height: 48px; margin: 13px 0; padding: 8px 12px; background: #eef0ed; border-radius: 8px; color: #62635e; }
.genre-insight[hidden] { display: none; }
#genreInsight[hidden] + .generate-button { margin-top: 18px; }
.insight-icon { display: grid; place-items: center; flex: 0 0 29px; height: 29px; border-radius: 50%; background: #e2e5e1; color: var(--wine); }.insight-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.genre-insight div { display: flex; flex-direction: column; gap: 2px; }
.genre-insight strong { color: #30312e; font-size: 12px; }
.genre-insight span:last-child { font-size: 12px; }
.generate-button { position: relative; width: 100%; height: 50px; border: 0; border-radius: 8px; display: flex; justify-content: center; align-items: center; gap: 13px; overflow: hidden; background: var(--ink); color: var(--on-dark); font-size: 13px; font-weight: 700; transition: background .2s, transform .2s; }
.generate-button:hover { background: var(--ink-hover); transform: translateY(-1px); }
.spinner { display: none; width: 17px; height: 17px; border-radius: 50%; border: 2px solid rgba(255,255,255,.28); border-top-color: #fff; animation: spin .7s linear infinite; }
.generate-button.loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.cover-art,
.mini-cover,
.wrap-front,
.wrap-back,
.phone-cover,
.modal-book,
.featured-book { isolation: isolate; }
.cover-art { color: #ead08b; }
.cover-art::before, .mini-cover::before, .wrap-front::before, .wrap-back::before, .phone-cover::before, .modal-book::before, .featured-book::before { content: ""; position: absolute; inset: 0; z-index: -2; transform: scale(var(--art-zoom,1)); transform-origin: var(--art-position,50% 50%); transition: transform .2s, background-position .2s; }
.cover-art::after, .mini-cover::after, .wrap-front::after, .wrap-back::after, .phone-cover::after, .modal-book::after, .featured-book::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--art-overlay,linear-gradient(transparent,transparent)),linear-gradient(180deg, rgba(2,0,1,.15), transparent 40%, rgba(5,0,3,.55)); }
.art-crown::before {
  background-image: url("assets/cover-art/arcane-heirloom.jpg");
  background-size: cover;
  background-position: var(--art-position,center);
}
.art-forest::before {
  background-image: url("assets/cover-art/enchanted-wilds.jpg");
  background-size: cover;
  background-position: var(--art-position,center);
}
.art-ember::before {
  background-image: url("assets/cover-art/blood-and-gold.jpg");
  background-size: cover;
  background-position: var(--art-position,center);
}
.art-moon::before {
  background-image: url("assets/cover-art/celestial-court.jpg");
  background-size: cover;
  background-position: var(--art-position,center);
}
.generated-art::before {
  background-image: var(--generated-art-source);
  background-size: cover;
  background-position: var(--art-position,center);
}
.cover-kicker { position: absolute; top: 9%; width: 100%; text-align: center; font: 600 12px/1 var(--sans); letter-spacing: 4px; }
.cover-title { position: absolute; z-index: 1; top: 16%; width: 100%; text-align: center; white-space: nowrap; font: 600 42px/.82 "Playfair Display", serif; letter-spacing: -1.5px; text-shadow: 0 2px 15px rgba(10,2,6,.6); }
.title-emphasis { font-size: 1.22em; font-style: italic; }
.arc-title-line { display: flex; align-items: flex-start; justify-content: center; width: 100%; padding-top: .28em; white-space: nowrap; }
.arc-glyph { display: inline-block; flex: 0 0 auto; min-width: .16em; font-size: .72em; font-style: normal; transform: translateY(var(--arc-offset)) rotate(var(--arc-rotation)); transform-origin: center 2.8em; }
.cover-ornament { position: absolute; bottom: 18%; width: 100%; text-align: center; font-size: 24px; }
.cover-author { position: absolute; bottom: 9%; width: 100%; text-align: center; font: 600 12px/1 var(--sans); letter-spacing: 4.5px; }
.replica-layer { position: absolute; z-index: 3; display: block; transform-origin: center; }
.design-accent { position: absolute; inset: 0; z-index: 1; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; }
.home-template-heading { grid-column: 1 / -1; margin: 42px 0 14px; font: 400 36px/.98 var(--serif); }
.home-template-gallery { grid-column: 1 / -1; position: relative; z-index: 3; margin: 0 0 40px; padding: 25px; border: 1px solid rgba(38,35,30,.12); border-radius: 16px; background: rgba(255,255,255,.56); box-shadow: 0 20px 50px rgba(42,35,26,.08); backdrop-filter: blur(12px); }.home-template-controls { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; align-items: end; }.home-template-controls select { height: 42px; border: 1px solid #d4d0c8; border-radius: 6px; outline: 0; padding: 0 10px; background: #fff; color: var(--ink); font-size: 14px; }
.home-template-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-top: 19px; }.home-template-card { min-width: 0; content-visibility: auto; contain-intrinsic-size: auto 430px; border: 1px solid #ded8ce; border-radius: 8px; padding: 0; overflow: hidden; background: #fff; color: var(--ink); text-align: left; transition: transform .18s, box-shadow .18s, border-color .18s; }.home-template-card:hover { transform: translateY(-2px); border-color: #b4aa9e; box-shadow: 0 12px 25px rgba(38,28,29,.12); }.home-template-cover { position: relative; aspect-ratio: 5/8; overflow: hidden; background:#25211f; }.home-template-cover > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.home-template-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(4,3,5,.14),rgba(5,3,5,.04) 45%,rgba(5,3,5,.58)); }.home-template-cover > small, .home-template-cover > strong, .home-template-cover > span { position: absolute; z-index: 1; display: block; }.home-template-cover > small { top: 7%; color: #f5eee0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 1px; }.home-template-cover > strong { color: #fff; font-size: clamp(12px,1.35vw,18px); font-weight: 600; line-height: .88; white-space: pre-line; text-shadow: 0 2px 12px rgba(0,0,0,.3); transform-origin: center; text-wrap: balance; }.home-template-cover > span { color: #fff4ed; font-size: 12px; font-weight: 700; letter-spacing: .8px; }.home-template-card > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 8px 9px; }.home-template-card > div:last-child strong { overflow: hidden; font: 400 14px/1 var(--serif); text-overflow: ellipsis; white-space: nowrap; }.home-template-card > div:last-child span { flex: 0 0 auto; color: var(--wine); font-size: 12px; font-weight: 800; }.home-template-gallery footer { display: flex; justify-content: space-between; margin-top: 13px; color: #898a83; font-size: 12px; }.home-template-gallery footer span:first-child { color: #73872a; font-weight: 800; }
.home-template-gallery footer a { color: var(--wine); font-weight: 800; }
.home-template-gallery footer { justify-content: flex-end; }

.home-proof { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); margin: 24px 0 78px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.home-proof > div { min-width: 0; padding: 24px 18px; border-left: 1px solid var(--line); }.home-proof > div:first-child { border-left: 0; }.home-proof strong { display: block; font: 400 35px/1 var(--serif); }.home-proof span { display: block; margin-top: 6px; color: #72746d; font-size: 12px; }
.home-process { grid-column: 1/-1; max-width: 1160px; width: 100%; margin: 0 auto 90px; }.home-process > header { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }.home-process h2, .home-journal h2, .home-final-cta h2 { margin: 0; font: 400 clamp(36px,4vw,58px)/.98 var(--serif); letter-spacing: -1.5px; }.home-process > header p { max-width: 470px; margin: 0; color: #666860; font-size: 14px; line-height: 1.6; }.home-process > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.home-process article { position: relative; min-height: 270px; border: 1px solid var(--line); border-radius: 13px; padding: 24px; background: rgba(255,255,255,.5); }.home-process h3 { margin: 0 0 10px; font: 400 25px/1 var(--serif); }.home-process article p { margin: 0; color: #6d6f68; font-size: 14px; line-height: 1.58; }
.home-journal { grid-column: 1/-1; max-width: 1160px; width: 100%; margin: 0 auto 88px; }.home-journal > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }.home-journal header a { color: var(--wine); font-size: 12px; font-weight: 800; }.home-journal > div { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }.home-journal article { padding: 25px 28px 10px 0; border-right: 1px solid var(--line); }.home-journal article + article { padding-left: 28px; }.home-journal article:last-child { border-right: 0; }.home-journal article span { color: var(--wine); font-size: 12px; font-weight: 800; letter-spacing: .8px; }.home-journal h3 { margin: 16px 0 11px; font: 400 26px/1.05 var(--serif); }.home-journal article p { margin: 0; color: #6c6e67; font-size: 14px; line-height: 1.55; }
.home-journal h3 a { color: inherit; text-decoration: none; }.home-journal h3 a:hover { color: var(--wine); }
.home-final-cta { grid-column: 1/-1; max-width: 1160px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 35px; margin: 0 auto; border-radius: 16px; padding: 38px 42px; background: #ded4c2; }.home-final-cta h2 { max-width: 680px; font-size: clamp(35px,4vw,52px); }.home-final-cta p { margin: 12px 0 0; color: #666860; font-size: 14px; }.home-final-cta button { flex: 0 0 auto; min-height: 47px; border: 0; border-radius: 999px; padding: 0 21px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; }
.home-template-cover > small, .template-cover small { line-height: 1.12; text-wrap: balance; }
.home-template-cover[data-design-style="editorial"]::after, .template-cover[data-design-style="editorial"]::after { border-left: 3px solid currentColor; background: linear-gradient(90deg,rgba(8,4,7,.64),transparent 65%); }
.home-template-cover[data-design-style="minimal"]::after, .template-cover[data-design-style="minimal"]::after { inset: 4%; border-top: 1px solid rgba(255,255,255,.72); border-bottom: 1px solid rgba(255,255,255,.72); background: rgba(8,6,7,.18); }
.home-template-cover[data-design-style="type-led"]::after, .template-cover[data-design-style="type-led"]::after { background: linear-gradient(180deg,rgba(7,4,6,.2) 0 21%,rgba(7,4,6,.74) 21% 62%,rgba(7,4,6,.28) 62%); }
.home-template-cover[data-design-style="image-led"]::after, .template-cover[data-design-style="image-led"]::after { background: linear-gradient(180deg,transparent 0 48%,rgba(7,4,6,.88) 78%); }
.home-template-cover[data-design-style="ornamental"]::after, .home-template-cover[data-design-style="framed"]::after, .template-cover[data-design-style="ornamental"]::after, .template-cover[data-design-style="framed"]::after { inset: 4%; border: 1px solid rgba(255,255,255,.68); box-shadow: inset 0 0 0 5px rgba(255,255,255,.08); background: linear-gradient(180deg,rgba(4,3,5,.2),transparent 45%,rgba(5,3,5,.55)); }
.home-template-cover[data-design-style="diagonal"]::after, .template-cover[data-design-style="diagonal"]::after { background: linear-gradient(155deg,rgba(4,3,5,.14) 0 43%,rgba(7,4,6,.75) 43.5% 60%,rgba(4,3,5,.2) 60.5%); }
.home-template-cover[data-design-style="graphic"]::after, .template-cover[data-design-style="graphic"]::after { inset: 13% 7% 39%; background: rgba(8,5,7,.75); box-shadow: 7px 7px 0 rgba(215,251,79,.42); }
.home-template-cover[data-design-style="masthead"]::after, .template-cover[data-design-style="masthead"]::after { inset: 4% 7% auto; height: 19%; border-top: 3px solid rgba(255,255,255,.8); border-bottom: 1px solid rgba(255,255,255,.55); background: rgba(7,4,6,.28); }
.home-template-cover[data-design-style="split"]::after, .template-cover[data-design-style="split"]::after { background: linear-gradient(180deg,rgba(4,3,5,.15) 0 38%,rgba(8,4,7,.78) 38% 73%,rgba(4,3,5,.28) 73%); }
.home-template-cover[data-design-style="emblem"]::after, .template-cover[data-design-style="emblem"]::after { inset: 46% 34% 22%; border: 1px solid rgba(255,255,255,.65); transform: rotate(45deg); background: rgba(8,5,7,.25); }

/* Signed-in workspace */
body.workspace-route {
  --wine: var(--ink);
  --wine-soft: var(--surface-soft);
  --button-focus: var(--ink);
  --field-focus: rgba(23,24,22,.08);
}
.workspace-route .site-header { position: fixed; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); background: rgba(244,245,243,.92); backdrop-filter: blur(14px); }.workspace-route .top-nav, .workspace-route .header-projects-link, .workspace-route #headerCreate { display: none; }
.workspace-nav { position: fixed; z-index: 15; left: 24px; top: 108px; bottom: 28px; width: 220px; display: flex; flex-direction: column; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; padding: 17px; background: rgba(255,255,255,.56); box-shadow: 0 16px 45px rgba(31,27,23,.06); }
.workspace-nav[hidden], body:has(.studio-view.visible) .workspace-nav { display: none !important; }
.workspace-nav-heading { padding: 5px 5px 18px; border-bottom: 1px solid var(--line); }
.workspace-nav-heading span, .dashboard-header > div > span, .dashboard-section-heading > div > span, .templates-page-header > div > span, .settings-header > span, .billing-header > div > span { display: block; color: var(--wine); font-size: 12px; font-weight: 800; letter-spacing: .75px; text-transform: uppercase; }
.workspace-nav-heading strong { display: block; font: 400 22px/1 var(--serif); }
.workspace-nav nav { display: grid; gap: 4px; margin-top: 14px; }
.workspace-nav nav a { min-height: 44px; display: flex; align-items: center; border-radius: 7px; padding: 0 11px; color: #62645e; font-size: 14px; font-weight: 700; }
.workspace-nav nav a:hover { background: #efebe3; color: var(--ink); }
.workspace-nav nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.workspace-account { display: none; }
.workspace-account > span { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--wine); color: #fff; font-size: 12px; font-weight: 800; }
.workspace-account div { min-width: 0; }.workspace-account strong, .workspace-account small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.workspace-account strong { font-size: 13px; }.workspace-account small { margin-top: 3px; color: var(--muted-text); font-size: 12px; }
.workspace-view { min-height: 100svh; }
.dashboard-view, .settings-view, .billing-view { padding: 132px 42px 82px; background: radial-gradient(circle at 88% 0,rgba(110,23,58,.08),transparent 25%), var(--paper); }
.workspace-route .workspace-view { padding-left: 282px; }
.dashboard-shell, .settings-shell, .billing-shell { max-width: 1180px; margin: 0 auto; }
.workspace-auth-gate { min-height: 520px; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; }
.workspace-auth-gate[hidden] { display: none; }.workspace-auth-gate h1 { margin: 0; font: 400 clamp(43px,5vw,66px)/.95 var(--serif); letter-spacing: -1.5px; }.workspace-auth-gate p { max-width: 480px; margin: 0; color: #686a63; font-size: 15px; line-height: 1.55; }.workspace-auth-gate button { min-height: 44px; margin-top: 7px; border: 0; border-radius: 999px; padding: 0 18px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; }
.workspace-primary-action { min-height: 45px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 0 19px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; }.workspace-primary-action span { margin-left: 9px; color: inherit; font-size: 16px; }
.dashboard-header, .billing-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); padding-bottom: 28px; }
.dashboard-header h1, .templates-page-header h1, .settings-header h1, .billing-header h1 { margin: 0; font: 400 clamp(48px,5vw,68px)/.92 var(--serif); letter-spacing: -2px; }
.dashboard-header p, .templates-page-header p, .settings-header p, .billing-header p { margin: 13px 0 0; color: #666861; font-size: 15px; line-height: 1.55; }
.dashboard-section, .dashboard-continue { margin-top: 38px; }
.dashboard-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 17px; }
.dashboard-section-heading h2 { margin: 0; font: 400 32px/1 var(--serif); }.dashboard-section-heading a { color: var(--wine); font-size: 13px; font-weight: 800; }
.dashboard-continue-content { min-height: 255px; }.dashboard-featured-project { min-height: 255px; display: grid; grid-template-columns: 174px minmax(0,1fr) auto; align-items: center; gap: 26px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; padding: 18px 22px 18px 18px; background: rgba(255,255,255,.7); box-shadow: 0 18px 45px rgba(31,27,23,.06); }.dashboard-featured-preview { width: 174px; aspect-ratio: 2/3; overflow: hidden; display: grid; place-items: center; border-radius: 7px; background: linear-gradient(145deg,#d9d0c1,#afa18f); background-position: center; background-size: cover; }.dashboard-featured-preview canvas { width: 100%; height: 100%; display: block; object-fit: cover; }.dashboard-featured-preview > span { width: 76%; color: rgba(255,255,255,.8); font: 400 22px/.95 var(--serif); text-align: center; }.dashboard-featured-copy h3 { margin: 0; font: 400 34px/1 var(--serif); }.dashboard-featured-copy p { margin: 8px 0 0; color: #5f615b; font-size: 15px; }.dashboard-featured-copy time { display: block; margin-top: 14px; color: var(--muted-text); font-size: 12px; }.dashboard-featured-copy .project-card-tags { margin-top: 14px; }.dashboard-featured-project > button { min-height: 43px; border: 0; border-radius: 999px; padding: 0 17px; background: var(--wine); color: #fff; font-size: 13px; font-weight: 800; }
.dashboard-project-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: start; gap: 15px; }.dashboard-project-grid .project-card-copy { min-height: 148px; }.dashboard-project-grid .project-open-button { margin-bottom: 15px; }
.dashboard-template-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(180px,100%),1fr)); gap: 12px; }.dashboard-template-grid .home-template-cover > strong { font-size: var(--template-cover-title-size); }

/* Dedicated template library */
.templates-page { min-height: 100svh; padding: 132px max(24px,calc((100vw - 1320px)/2)) 86px; background: var(--paper); }
.workspace-route .templates-page { padding-right: 42px; padding-left: 282px; }
.workspace-route.create-route .landing-view { padding-right: 42px; padding-left: 282px; }
.templates-page-shell { max-width: 1320px; margin: 0 auto; }.templates-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; border-bottom: 1px solid var(--line); padding-bottom: 28px; }.templates-page-header > div { max-width: 800px; }.templates-page-toolbar { display: grid; grid-template-columns: minmax(260px,1fr) repeat(3,minmax(150px,210px)); gap: 10px; margin-top: 26px; }.templates-page-toolbar label { display: grid; gap: 7px; color: #666861; font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }.templates-page-toolbar input, .templates-page-toolbar select { width: 100%; height: 44px; border: 1px solid #cbc7bd; border-radius: 8px; outline: 0; padding: 0 13px; background: rgba(255,255,255,.82); color: var(--ink); font-size: 14px; text-transform: none; }.templates-page-toolbar input:focus, .templates-page-toolbar select:focus { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(110,23,58,.08); }.templates-page-meta { display: flex; align-items: center; justify-content: space-between; margin: 17px 0; color: var(--muted-text); font-size: 13px; }.templates-page-meta button { border: 0; padding: 5px 0; background: transparent; color: var(--wine); font-size: 13px; font-weight: 800; }.templates-page-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(210px,100%),1fr)); gap: 14px; }.templates-page-grid .home-template-cover > strong { font-size: var(--template-cover-title-size); }.templates-page-empty { grid-column: 1/-1; min-height: 300px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px dashed #cfcac0; border-radius: 13px; color: #6e7069; font-size: 14px; text-align: center; }.templates-page-empty strong { color: var(--ink); font: 400 28px var(--serif); }

/* Profile and billing */
.settings-header { border-bottom: 1px solid var(--line); padding-bottom: 27px; }.settings-header p { max-width: 620px; }.settings-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 28px; }.settings-card, .billing-card { border: 1px solid var(--line); border-radius: 14px; padding: 25px; background: rgba(255,255,255,.66); }.settings-card-heading { margin-bottom: 24px; }.settings-card-heading h2, .billing-card-heading h2 { margin: 0; font: 400 28px/1 var(--serif); }.settings-card-heading p { margin: 8px 0 0; color: var(--muted-text); font-size: 14px; line-height: 1.5; }.settings-card > label { display: grid; gap: 7px; margin-top: 15px; color: #64665f; font-size: 13px; font-weight: 700; }.settings-card input { width: 100%; height: 44px; border: 1px solid #cbc7bd; border-radius: 8px; padding: 0 12px; background: #fff; color: var(--ink); font-size: 14px; }.settings-card input[readonly] { background: #f1eee7; color: #686a63; }.settings-meta { margin: 15px 0 0; color: var(--muted-text); font-size: 12px; }.settings-card-actions { display: flex; align-items: center; gap: 13px; margin-top: 24px; }.settings-card-actions button { min-height: 41px; border: 0; border-radius: 999px; padding: 0 16px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; }.settings-card-actions output { color: #5f6e24; font-size: 13px; }.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding: 18px 0; }.settings-row:first-of-type { border-top: 0; }.settings-row strong, .settings-row span { display: block; }.settings-row strong { font-size: 14px; }.settings-row span { margin-top: 4px; color: var(--muted-text); font-size: 13px; line-height: 1.4; }.settings-row button, .settings-row a { flex: 0 0 auto; border: 0; padding: 7px 0; background: transparent; color: var(--wine); font-size: 13px; font-weight: 800; }
.billing-header > div { max-width: 760px; }.billing-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 27px; }.billing-summary > div { min-height: 105px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: rgba(255,255,255,.6); }.billing-summary strong, .billing-summary span { display: block; }.billing-summary strong { font: 400 27px/1 var(--serif); }.billing-summary span { margin-top: 6px; color: var(--muted-text); font-size: 13px; }.billing-card { margin-top: 20px; }.billing-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 18px; }.billing-card-heading a { color: var(--wine); font-size: 13px; font-weight: 800; }.billing-list-state { min-height: 240px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted-text); font-size: 14px; text-align: center; }.billing-list-state strong { color: var(--ink); font: 400 27px/1 var(--serif); }.billing-purchase { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(170px,.8fr) auto; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); padding: 20px 0; }.billing-purchase:last-child { border-bottom: 0; }.billing-purchase h3 { margin: 0; font: 400 22px/1 var(--serif); }.billing-purchase p { margin: 6px 0 0; color: #666861; font-size: 14px; }.billing-purchase time, .billing-purchase span, .billing-purchase small { display: block; }.billing-purchase time, .billing-purchase small { color: var(--muted-text); font-size: 12px; }.billing-purchase span { margin-top: 5px; font-size: 13px; font-weight: 700; }.billing-purchase a { border: 1px solid #c8c3b9; border-radius: 999px; padding: 9px 13px; font-size: 12px; font-weight: 800; }

/* Projects */
.projects-view { min-height: 100svh; padding: 132px max(24px,calc((100vw - 1240px)/2)) 86px; background: radial-gradient(circle at 85% 5%,rgba(110,23,58,.08),transparent 26%), var(--paper); }
.workspace-route .projects-view { padding-right: 42px; }
.projects-shell { width: 100%; max-width: 1240px; margin: 0 auto; }
.projects-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); padding-bottom: 28px; }
.projects-page-header h1 { margin: 0; font: 400 clamp(48px,5.2vw,68px)/.9 var(--serif); letter-spacing: -2px; }
.projects-page-header p { margin: 13px 0 0; color: #666861; font-size: 15px; }
.projects-new-button { min-height: 45px; flex: 0 0 auto; border: 0; border-radius: 999px; padding: 0 19px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; }
.projects-new-button span { margin-left: 9px; color: inherit; font-size: 16px; }
.projects-workspace { margin-top: 26px; }
.projects-toolbar { display: grid; grid-template-columns: minmax(260px,1fr) 210px auto; align-items: end; gap: 12px; margin-bottom: 24px; }
.projects-toolbar label { display: grid; gap: 7px; color: #666861; font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.projects-toolbar input, .projects-toolbar select { width: 100%; height: 44px; border: 1px solid #cbc7bd; border-radius: 8px; outline: 0; padding: 0 13px; background: rgba(255,255,255,.82); color: var(--ink); font-size: 14px; text-transform: none; }
.projects-toolbar input:focus, .projects-toolbar select:focus { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(110,23,58,.08); }
.projects-toolbar output { min-width: 82px; padding: 0 0 13px; color: #74766f; font-size: 13px; text-align: right; }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); align-items: start; gap: 23px; }
.project-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.76); box-shadow: 0 12px 35px rgba(31,27,23,.05); transition: transform .2s, box-shadow .2s, border-color .2s; }
.project-card:hover { transform: translateY(-3px); border-color: rgba(110,23,58,.28); box-shadow: 0 20px 45px rgba(31,27,23,.1); }
.project-card-preview { position: relative; aspect-ratio: 2/3; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg,#d9d0c1,#afa18f); background-position: center; background-size: cover; }
.project-card-preview::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); pointer-events: none; }
.project-card-preview > span { width: 72%; color: rgba(255,255,255,.76); font: 400 24px/.95 var(--serif); text-align: center; text-wrap: balance; }
.project-preview-canvas { width: 100%; height: 100%; display: block; object-fit: cover; }
.project-preview-fallback { background-position: center; background-size: cover; }
.project-card-copy { min-height: 156px; padding: 17px 17px 13px; }
.project-card-copy h2 { overflow: hidden; margin: 0; font: 400 23px/1.02 var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.project-card-copy p { min-height: 40px; margin: 7px 0 12px; overflow: hidden; color: #6b6d66; font-size: 14px; line-height: 1.42; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.project-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.project-card-tags span { border-radius: 999px; padding: 5px 8px; background: #eeebe4; color: #5e605a; font-size: 12px; line-height: 1; }
.project-card-copy time { display: block; margin-top: 12px; color: var(--muted-text); font-size: 12px; }
.project-open-button { width: calc(100% - 34px); height: 40px; margin: 0 17px 17px; border: 1px solid #c9c5bb; border-radius: 7px; background: transparent; color: var(--wine); font-size: 13px; font-weight: 800; }
.project-open-button:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.project-card-manage { min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -9px 17px 13px; }
.project-card-manage > button { min-height: 44px; border: 0; padding: 0; background: transparent; color: var(--wine); font-size: 12px; font-weight: 800; }
.project-card-manage .project-delete-button { color: #8a2c2c; }
.project-card-manage .project-delete-button[data-confirming="true"] { border-radius: 999px; padding: 0 10px; background: #f4dede; }
.project-card-rename { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 6px; }
.project-card-rename input { min-width: 0; height: 34px; border: 1px solid #bfb9ae; border-radius: 6px; padding: 0 8px; background: #fff; font-size: 12px; }
.project-card-rename button { min-height: 34px; border: 0; border-radius: 6px; padding: 0 8px; background: #eeeae2; color: var(--ink); font-size: 12px; font-weight: 800; }
.project-card-rename button[type="submit"] { background: var(--wine); color: #fff; }
.projects-state { grid-column: 1/-1; min-height: 330px; display: grid; place-items: center; align-content: center; gap: 9px; border: 1px dashed #cfcac0; border-radius: 13px; padding: 30px; background: rgba(255,255,255,.45); text-align: center; }
.projects-state > strong { font: 400 28px/1 var(--serif); }
.projects-state > span { max-width: 380px; color: #70726b; font-size: 14px; line-height: 1.5; }
.projects-state > button, .projects-auth-gate > button { min-height: 42px; margin-top: 8px; border: 0; border-radius: 999px; padding: 0 17px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; }
.projects-loading > i { width: 22px; height: 22px; border: 2px solid #cbc7bd; border-top-color: var(--wine); border-radius: 50%; animation: spin .75s linear infinite; }
.projects-auth-gate { min-height: 460px; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; }
.projects-auth-gate[hidden] { display: none; }
.projects-auth-mark { margin-bottom: 10px; }
.projects-auth-mark .brand-mark-image { width: 42px; height: 42px; }
.projects-auth-gate h2 { margin: 0; font: 400 34px/1 var(--serif); }
.projects-auth-gate p { margin: 0; color: #70726b; font-size: 14px; }
.project-route-loading .projects-grid { grid-template-columns: 1fr; }

/* Studio */
.studio-view { min-height: 100svh; display: none; background: #ece9e2; }
.studio-view.visible { display: block; animation: studioIn .65s ease both; }
@keyframes studioIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
.studio-header { height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 22px; background: #faf9f6; border-bottom: 1px solid var(--line); }
.studio-brand-wrap { display: flex; align-items: center; gap: 17px; }
.studio-brand-wrap .brand { font-size: 18px; }
.project-divider { height: 24px; width: 1px; background: var(--line); }
.project-name { position: relative; border: 0; background: transparent; padding: 6px 28px 6px 0; font-size: 12px; font-weight: 600; }
.project-name svg { right: 5px; width: 14px; }
.studio-steps { display: flex; align-items: center; gap: 10px; }
.studio-steps > i { width: 40px; height: 1px; background: #d0cec7; }
.step { display: flex; align-items: center; gap: 7px; color: #9a9993; }
.step span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #cdcbc4; font-size: 12px; }
.step b { font-size: 12px; letter-spacing: .4px; text-transform: uppercase; }
.step.active { color: var(--ink); }
.step.active span { border-color: var(--ink); background: var(--ink); color: white; }
.studio-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.saved-state { margin-right: 8px; color: #898a84; font-size: 12px; }
.outline-button, .dark-button, .studio-projects-button { height: 36px; border-radius: 6px; padding: 0 16px; font-size: 12px; font-weight: 700; }
.outline-button { border: 1px solid #ccc9c1; background: transparent; }
.studio-projects-button { border: 1px solid #ccc9c1; background: transparent; }
.studio-projects-button:hover { border-color: var(--ink); }
.dark-button { border: 1px solid var(--ink); background: var(--ink); color: white; }
.studio-layout { height: calc(100svh - 72px); display: grid; grid-template-columns: 272px minmax(450px, 1fr) 290px; overflow: hidden; }
.studio-layout.directions-collapsed { grid-template-columns: 56px minmax(450px,1fr) 290px; }.directions-panel.collapsed { padding: 24px 13px; }.directions-panel.collapsed .panel-topline { justify-content: center; }.directions-panel.collapsed .panel-topline h2, .directions-panel.collapsed > :not(.panel-topline) { display: none; }
.directions-panel, .controls-panel { overflow-y: auto; background: #f9f8f4; }
.directions-panel { padding: 24px 21px; border-right: 1px solid var(--line); }
.controls-panel { border-left: 1px solid var(--line); }
.panel-topline { display: flex; justify-content: space-between; gap: 10px; }
.directions-panel h2 { margin: 6px 0 0; font: 400 26px/1 var(--serif); letter-spacing: -.6px; }
.directions-panel > p { margin: 12px 0 18px; color: #777872; font-size: 12px; line-height: 1.5; }
.directions-panel > p strong { color: #555751; }
.icon-button { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: #777; }.icon-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }.icon-button[aria-expanded="false"] svg { transform: rotate(180deg); }
.direction-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.direction-card { position: relative; min-width: 0; display: grid; grid-template-columns: 86px minmax(0,1fr); grid-template-rows: 1fr auto; column-gap: 12px; align-items: center; border: 1px solid #dedad2; border-radius: 7px; padding: 8px; background: #fff; text-align: left; transition: border-color .18s, background .18s; }
.direction-card:hover { border-color: #b9b1a7; }
.direction-card.selected { border-color: var(--wine); background: #f4f2ec; }
.mini-cover { position: relative; grid-row: 1 / 3; overflow: hidden; width: 86px; aspect-ratio: 2/3; border-radius: 3px; color: var(--direction-text-color,#f6f1df); box-shadow: 0 7px 17px rgba(22,18,14,.12); transition: transform .2s, box-shadow .2s; }
.mini-cover::after { background: var(--direction-overlay,linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.2) 55%,rgba(0,0,0,.58))); }
.mini-cover .mini-kicker, .mini-cover strong, .mini-cover small { z-index: 1; text-shadow: var(--direction-text-shadow,0 2px 5px rgba(0,0,0,.88)); }
.mini-cover.contrast-fallback { --direction-text-color: #fff; --direction-overlay: linear-gradient(rgba(0,0,0,.58),rgba(0,0,0,.42) 55%,rgba(0,0,0,.68)); }
.direction-card:hover .mini-cover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(22,18,14,.18); }
.direction-card.selected .mini-cover { outline: 2px solid var(--ink); outline-offset: 2px; }
.mini-cover .mini-kicker { position: absolute; top: 7%; left: 7%; overflow: hidden; width: 86%; max-height: 2.4em; text-align: center; font-size: 12px; line-height: 1.15; letter-spacing: .7px; }
.mini-cover .mini-kicker:empty { display: none; }
.mini-cover strong { position: absolute; top: 24%; left: 7%; overflow: hidden; width: 86%; max-height: 54%; text-align: center; font: 600 12px/.95 "Playfair Display", serif; }
.mini-cover strong em { font-size: 1.18em; }
.mini-cover small { position: absolute; bottom: 6%; left: 7%; overflow: hidden; width: 86%; text-align: center; font-size: 12px; letter-spacing: .6px; text-overflow: ellipsis; white-space: nowrap; }
.direction-card > span { display: block; align-self: end; margin: 0; font-size: 14px; font-weight: 700; line-height: 1.25; }
.direction-card > i { display: none; align-self: start; margin-top: 3px; color: #667526; font-size: 12px; font-style: normal; }
.direction-card.selected > i { display: block; }
.remix-button { width: 100%; height: 36px; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #d3d0c9; border-radius: 6px; background: transparent; color: #555650; font-size: 12px; font-weight: 700; }
.remix-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.panel-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 18px 0 14px; padding: 3px; border-radius: 6px; background: #ebe8e1; }
.panel-mode-tabs button { height: 29px; border: 0; border-radius: 4px; background: transparent; color: #868780; font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.panel-mode-tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.panel-mode-content { display: none; }
.panel-mode-content.active { display: block; animation: panelModeIn .2s ease both; }
@keyframes panelModeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.panel-mode-content > p { margin: 0 0 18px; color: #777872; font-size: 12px; line-height: 1.5; }
.panel-mode-content > p strong { color: #555751; }
.refine-button { width: 100%; height: 39px; margin-top: 18px; border: 1px solid var(--ink); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 800; transition: background .2s; }
.refine-button:hover { background: var(--surface-soft); }
.browse-editor-templates { width: 100%; min-height: 36px; margin-top: 8px; border: 1px solid var(--ink); border-radius: 6px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 800; }
.add-layer-actions { position: relative; z-index: 12; display: grid; grid-template-columns: .9fr 1.1fr; gap: 7px; margin-bottom: 9px; }
.add-text-layer { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; border: 1px solid var(--ink); border-radius: 6px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 750; }
.add-text-layer span { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid rgba(255,255,255,.45); border-radius: 4px; font: 600 12px var(--serif); }
.add-text-layer[hidden] { display: none; }
.add-graphic-menu { position: relative; }
.add-graphic-menu[hidden] { display: none; }
.add-graphic-menu > summary { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--ink); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 750; list-style: none; }
.add-graphic-menu > summary::-webkit-details-marker { display: none; }
.add-graphic-menu > summary span { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #cfcbc3; border-radius: 4px; color: var(--wine); font: 600 14px var(--serif); }
.add-graphic-menu[open] > summary { background: var(--surface-soft); }
.graphic-picker { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; width: 214px; display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; border: 1px solid #c9c6bf; border-radius: 8px; padding: 7px; background: #fff; box-shadow: 0 12px 28px rgba(28,22,20,.18); }
.graphic-picker button { min-width: 0; min-height: 60px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; border: 1px solid transparent; border-radius: 5px; padding: 4px 2px; background: transparent; color: var(--ink); }
.graphic-picker button:hover, .graphic-picker button:focus-visible { border-color: #d4d0c8; background: var(--surface-soft); }
.graphic-picker button span { color: var(--wine); font: 500 21px/1 var(--serif); }
.graphic-picker button b { font-size: 12px; font-weight: 700; }
.layers-help { margin: 0 0 9px; color: var(--muted-text); font-size: 12px; line-height: 1.4; }
.add-layer-actions[hidden], .shape-kind-control[hidden], #layerTextLabel[hidden], #layerTextInput[hidden], #alignmentLabel[hidden], .font-select-wrap[hidden] { display: none; }
.layers-list { border: 1px solid #dedbd4; border-radius: 7px; overflow: hidden; background: #fff; }
.layer-row { min-height: 49px; display: grid; grid-template-columns: minmax(0,1fr) 42px 42px; align-items: stretch; border-bottom: 1px solid #ece9e3; }
.layer-row:last-child { border-bottom: 0; }
.layer-row:has(.layer-main.active) { background: #f3f5ea; }
.layer-main { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: 0; background: transparent; text-align: left; }
.layer-main > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.layer-main b { font-size: 12px; }
.layer-main small { overflow: hidden; color: #91918b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.layer-icon { display: grid; place-items: center; flex: 0 0 27px; height: 27px; border: 1px solid #dcd8d0; border-radius: 5px; background: #f5f2eb; color: #6f2441; font: 400 13px var(--serif); }
.layer-icon.small { font-size: 12px; }.layer-icon.image-icon { color: #70726a; font: 400 12px var(--sans); }.layer-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.layer-eye, .layer-lock, .layer-delete { display: grid; place-items: center; border: 0; border-left: 1px solid #eeeae4; background: transparent; color: #8f918a; font-size: 12px; }
.layer-eye:not(.visible) { color: #c8c8c3; text-decoration: line-through; }.layer-lock.locked { color: var(--wine); }
.layer-delete { color: #8f918a; }.layer-delete svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }.layer-delete:hover, .layer-delete:focus-visible { background: #f8ecef; color: var(--wine); }
.layer-row:has(.layer-status), .layer-row:has(.layer-main-static) { grid-template-columns: minmax(0,1fr) 58px; }
.custom-layer-row { grid-template-rows: minmax(49px,auto) auto; }
.custom-layer-row .custom-layer-actions { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; border-top: 1px solid #ece9e3; background: #ece9e3; }
.custom-layer-actions button { min-width: 0; min-height: 30px; border: 0; background: #fff; color: #666861; padding: 4px 2px; font-size: 12px; font-weight: 700; }
.custom-layer-actions button:hover { background: var(--surface-soft); color: var(--ink); }
.custom-layer-actions .delete-layer { color: #8d2949; }
.spine-width-warning { margin-top: 10px; border: 1px solid #dfc77b; border-radius: 6px; padding: 10px 11px; background: #fff8dc; color: #5d501f; font-size: 12px; line-height: 1.45; }
.spine-width-warning[hidden] { display: none; }
.layer-transform { margin-top: 15px; }
.layer-transform > span { color: #8c8d87; font-size: 12px; font-weight: 700; letter-spacing: .8px; }
.layer-transform > div { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-top: 7px; }
.layer-transform button { min-width: 0; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #d9d6cf; border-radius: 5px; background: #fff; color: var(--ink); font-size: 12px; }
.layer-transform button:hover { border-color: #aaa79f; background: var(--surface-soft); }
.layer-transform button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.layer-transform button span { line-height: 1; }
.layer-transform button[data-rotate="0"] { color: var(--ink-soft); }

.canvas-area { min-width: 0; display: flex; flex-direction: column; background: #e8e5de; }
.canvas-toolbar { flex: 0 0 51px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); background: #f2f0eb; }
.editing-tools { display: flex; align-items: center; gap: 4px; justify-self: start; }
.editing-tools button { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #777871; font-size: 12px; }
.editing-tools button:hover:not(:disabled), .editing-tools button.active { border-color: #d2cfc8; background: #fff; color: var(--ink); }
.editing-tools button:disabled { opacity: .3; cursor: default; }
.editing-tools span { width: 1px; height: 17px; margin: 0 3px; background: #d4d1ca; }
.editing-tools .guides-on { color: var(--wine); }
.view-select { position: relative; justify-self: center; width: 176px; }
.zoom-controls { justify-self: end; }
.view-select select { width: 100%; height: 34px; appearance: none; border: 1px solid #cfcdc6; border-radius: 6px; padding: 0 36px 0 12px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; }
.view-select svg { position: absolute; top: 50%; right: 11px; width: 16px; height: 16px; pointer-events: none; transform: translateY(-50%); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.view-select select:hover { border-color: #92938d; }
.view-select select:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.zoom-controls { display: flex; align-items: center; gap: 7px; color: #6c6d67; }
.zoom-controls button { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #cfcdc6; border-radius: 4px; padding: 0; background: #f7f6f2; color: #4f504c; }
.zoom-controls button:hover { border-color: #92938d; background: #fff; color: var(--ink); }
.zoom-controls span { min-width: 31px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.zoom-controls .fit-button { margin-left: 4px; }
.canvas-workspace { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; background-image: radial-gradient(#d1cec6 1px, transparent 1px); background-size: 16px 16px; }
.rendering-status { position: absolute; top: 17px; left: 19px; display: flex; align-items: center; gap: 7px; color: #85867f; font-size: 12px; }
.cover-preview-wrap { position: relative; transform-origin: center; transition: transform .25s; filter: drop-shadow(0 19px 20px rgba(29,22,20,.2)); }
.main-cover { position: relative; overflow: hidden; width: min(31vw, 326px); aspect-ratio: 5/8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: width .3s; }
.main-cover .cover-title { top: 17%; }
.main-cover .cover-author { bottom: 8%; }
.main-cover .cover-kicker, .wrap-front .cover-kicker { font-size: 12px; line-height: 1.15; }
.trim { position: absolute; z-index: 5; width: 11px; height: 11px; border-color: rgba(255,255,255,.65); border-style: solid; }
.trim-tl { top: 7px; left: 7px; border-width: 1px 0 0 1px; }.trim-tr { top: 7px; right: 7px; border-width: 1px 1px 0 0; }.trim-bl { bottom: 7px; left: 7px; border-width: 0 0 1px 1px; }.trim-br { bottom: 7px; right: 7px; border-width: 0 1px 1px 0; }
.editable-layer { z-index: 3; transform-origin: center; }
.custom-text-layer, .custom-graphic-layer { position: absolute; margin: 0; transform-origin: center; }
.studio-view.editor-active .editable-layer { cursor: move; user-select: none; touch-action: none; }
.studio-view.editor-active .editable-layer:hover { text-shadow: 0 0 14px currentColor; }
.editor-grid { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s; }
.editor-grid::before, .editor-grid::after, .editor-grid i { content: ""; position: absolute; background: rgba(215,251,79,.42); }
.editor-grid::before { left: 50%; top: 4%; bottom: 4%; width: 1px; }.editor-grid::after { top: 50%; left: 4%; right: 4%; height: 1px; }
.editor-grid i:first-child { left: 33.333%; top: 4%; bottom: 4%; width: 1px; opacity: .38; }.editor-grid i:last-child { left: 66.666%; top: 4%; bottom: 4%; width: 1px; opacity: .38; }
.studio-view.editor-active.guides-visible .editor-grid { opacity: 1; }
.selection-box { position: absolute; z-index: 9; display: none; border: 1px solid var(--acid); pointer-events: auto; cursor: move; touch-action: none; box-shadow: 0 0 0 1px rgba(19,20,18,.35); }
.studio-view.editor-active .selection-box.visible { display: block; }
.selection-box .handle { position: absolute; width: 7px; height: 7px; border: 1px solid #20211e; background: var(--acid); pointer-events: auto; }
.selection-box .tl { left: -4px; top: -4px; cursor: nwse-resize; }.selection-box .tr { right: -4px; top: -4px; cursor: nesw-resize; }.selection-box .bl { left: -4px; bottom: -4px; cursor: nesw-resize; }.selection-box .br { right: -4px; bottom: -4px; cursor: nwse-resize; }
.selection-label { position: absolute; left: -1px; top: -17px; padding: 3px 5px; border-radius: 3px 3px 0 0; background: var(--acid); color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .7px; }
.main-cover.guides-hidden .trim { opacity: 0; }
.art-hotspot { position: absolute; z-index: 7; right: 10px; top: 57%; min-height: 30px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; padding: 0 9px; background: rgba(18,10,14,.68); color: #fff; backdrop-filter: blur(5px); font-size: 12px; font-weight: 750; transition: background .2s, transform .2s; }
.art-hotspot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.art-hotspot:hover { background: rgba(18,10,14,.9); transform: translateY(-1px); }
.shape-kind-control { display: grid; gap: 6px; margin-bottom: 13px; }
.shape-kind-control select { width: 100%; height: 40px; border: 1px solid #d1cec7; border-radius: 6px; padding: 0 10px; background: #fff; color: var(--ink); font-size: 14px; }
.delete-selected-layer { width: 100%; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; border: 1px solid #d8bfc7; border-radius: 6px; background: #fff; color: var(--wine); font-size: 13px; font-weight: 800; }
.delete-selected-layer svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.delete-selected-layer:hover { border-color: var(--wine); background: #f8ecef; }
.delete-selected-layer[hidden] { display: none; }
.wrap-preview { position: relative; display: none; width: min(65vw, 730px); height: min(43vw, 486px); filter: drop-shadow(0 18px 24px rgba(28,22,18,.22)); transform-origin: center; transition: transform .25s; }
.wrap-preview.visible { display: flex; }
.wrap-preview.hardcover { outline: 10px solid rgba(63,37,49,.3); outline-offset: 0; }
.wrap-preview.hardcover .wrap-back { box-shadow: inset -20px 0 18px -18px rgba(4,2,4,.85); }
.wrap-preview.hardcover .wrap-front { box-shadow: inset 20px 0 18px -18px rgba(4,2,4,.85); }
.wrap-back, .wrap-front, .wrap-spine { position: relative; height: 100%; overflow: hidden; color: #eacb83; }
.wrap-back, .wrap-front { min-width: 0; flex: 1 1 0; }
.wrap-back { padding: 20% 0 8%; }
.wrap-back h3 { margin: 0 0 7%; text-align: center; font: italic 400 clamp(17px,2vw,28px)/1 var(--serif); }
.wrap-back p { max-width: 79%; margin: 0 auto; text-align: center; font: 400 clamp(12px,.7vw,12px)/1.55 var(--sans); color: rgba(245,226,183,.85); }
.back-flourish { position: absolute; top: 13%; width: 86%; text-align: center; font-size: 19px; }
.barcode { position: absolute; bottom: 6%; right: 7%; width: 17%; height: 10%; padding: 5px; display: flex; gap: 2px; align-items: stretch; background: #f7f3e9; }
.barcode i { flex: 1; background: #20201e; }
.barcode i:nth-child(2n) { flex: .4; }
.wrap-spine { flex: 0 0 34px; z-index: 4; background: linear-gradient(90deg,#1a0912,#6f203d,#1a0912); display: flex; flex-direction: column; align-items: center; box-shadow: inset 2px 0 rgba(255,255,255,.08), inset -2px 0 rgba(0,0,0,.2); }
.wrap-spine span { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 clamp(12px,.7vw,12px)/1 "Playfair Display", serif; letter-spacing: 1px; }
.spine-title { margin-top: 12%; }.spine-author { margin-top: auto; margin-bottom: 12%; font-family: var(--sans) !important; }
.wrap-spine .spine-mark { margin: auto 0; font-family: var(--sans); font-weight: 750; }
.wrap-spine.spine-text-disabled span { display: none; }
.wrap-front .cover-title { line-height: .84; }
.wrap-front .cover-author, .wrap-front .cover-kicker { font-size: clamp(12px,.8vw,12px); }
.bleed-label { position: absolute; bottom: -22px; left: 0; color: #777871; font-size: 12px; }
.bleed-label::before { content: ""; display: inline-block; width: 22px; height: 1px; background: #777; vertical-align: middle; margin-right: 6px; }
.phone-preview { position: relative; display: none; width: 250px; height: 505px; padding: 12px; border: 7px solid #20211f; border-radius: 30px; background: #fff; box-shadow: 0 20px 40px rgba(0,0,0,.22); color: #23231f; transform-origin: center; transition: transform .25s; }
.phone-preview.visible { display: block; }
.phone-top { display: flex; justify-content: space-between; padding: 2px 9px 11px; font-size: 12px; font-weight: 700; }
.phone-top i { width: 45px; height: 11px; position: absolute; left: 50%; top: 3px; transform: translateX(-50%); background: #20211f; border-radius: 0 0 9px 9px; }
.amazon-row { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; background: #eef0f0; border-radius: 5px; font-size: 12px; }
.storefront-icon { width: 17px; height: 17px; display: grid; place-items: center; color: #353731; }.storefront-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.result-card { display: grid; grid-template-columns: 80px 1fr; gap: 11px; padding: 18px 5px; }
.phone-cover { position: relative; overflow: hidden; height: 128px; color: #ead08b; box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.cover-stage { position: absolute; z-index: 3; top: 50%; left: 50%; width: 320px; height: var(--cover-stage-height,512px); transform: translate(-50%,-50%) scale(var(--cover-stage-scale,1)); transform-origin: center; }
.cover-stage .cover-kicker, .cover-stage .cover-author { font-size: 13.4px; line-height: 1.15; }
.cover-stage .cover-title { font-size: 46.4px; line-height: .84; }
.cover-stage .title-emphasis { font-size: 1.14em; font-style: var(--title-emphasis-style,italic); }
.cover-stage .cover-ornament { font-size: 26.8px; }
.result-card p { margin: 3px 0 2px; font: 400 13px/1.1 var(--serif); }.result-card div > span { color: #777; font-size: 12px; }.result-card div > small { display: block; margin-top: 7px; color: #999; font-size: 12px; }
.result-ghost { height: 72px; margin: 5px; border-radius: 4px; background: linear-gradient(90deg,#eee 0 28%,transparent 28% 32%,#eee 32% 90%,transparent 90%); opacity: .7; }.result-ghost.short { height: 55px; opacity: .45; }

.control-section { padding: 20px; border-bottom: 1px solid var(--line); }
.inspector-tabs { position: sticky; z-index: 8; top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--card); }
.inspector-tabs button { min-height: 38px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted-text); font-size: 14px; font-weight: 750; }
.inspector-tabs button:hover { background: var(--surface-soft); color: var(--ink); }
.inspector-tabs button.active { border-color: var(--ink); background: var(--ink); color: var(--on-dark); box-shadow: inset 0 -2px var(--acid); }
.inspector-tabs button:focus-visible { outline: 3px solid var(--button-focus); outline-offset: 1px; }
.inspector-panel { animation: inspectorPanelIn .18s ease both; }
@keyframes inspectorPanelIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.section-heading { display: flex; align-items: center; justify-content: space-between; }
.section-heading > div { display: flex; align-items: center; gap: 8px; }
.section-number { color: #a2a19b; font-size: 12px; }
.section-heading h3 { margin: 0; font: 400 20px/1 var(--serif); }
.type-heading { margin-bottom: 17px; }
.type-heading > div { flex-direction: column; align-items: flex-start; gap: 4px; }
.type-heading > div > span { color: #888981; font-size: 12px; font-weight: 650; }
.pro-badge, .ready-badge { padding: 4px 6px; border-radius: 3px; background: #f0e8cb; color: #72612c; font-size: 12px; font-weight: 800; letter-spacing: .7px; }
.ready-badge { background: #edf2dc; color: #5d6c27; }
.layer-properties { display: none; margin: 0 0 18px; }
.studio-view.editor-active .layer-properties { display: block; }
.type-section .field-label { display: block; color: #6f716a; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.layer-properties textarea { width: 100%; min-height: 54px; resize: vertical; margin: 7px 0 14px; border: 1px solid #d5d2cb; border-radius: 5px; outline: 0; padding: 10px; background: #fff; color: var(--ink); font: 500 14px/1.4 var(--sans); }
.layer-properties textarea:focus { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(110,23,58,.07); }
.no-layer-selected { margin: 18px 0; border: 1px dashed var(--border-strong); border-radius: 8px; padding: 18px; background: var(--paper); }
.no-layer-selected strong, .no-layer-selected span { display: block; }
.no-layer-selected strong { font-size: 15px; }
.no-layer-selected span { margin-top: 5px; color: var(--muted-text); font-size: 14px; line-height: 1.45; }
.type-section.no-selection > :not(.section-heading):not(.no-layer-selected):not(.editor-upgrade-card) { display: none !important; }
.layer-case-control { display: grid; grid-template-columns: 1fr minmax(125px,auto); align-items: center; gap: 12px; margin: -4px 0 16px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.layer-case-control select { height: 36px; border: 1px solid var(--border-strong); border-radius: 5px; padding: 0 10px; background: white; color: var(--ink); font-size: 13px; }
.editor-upgrade-card { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 18px; border: 1px solid var(--wine); border-radius: 8px; padding: 13px; background: var(--wine-soft); }
.editor-upgrade-card div, .editor-upgrade-card strong, .editor-upgrade-card span { display: block; }
.editor-upgrade-card strong { font-size: 14px; }
.editor-upgrade-card span { margin-top: 3px; color: var(--ink-soft); font-size: 13px; line-height: 1.35; }
.editor-upgrade-card button { width: 100%; min-height: 40px; border: 0; border-radius: 5px; padding: 0 14px; background: var(--ink); color: white; font-size: 12px; font-weight: 800; }
.editor-upgrade-card.has-access { border-color: var(--success); background: var(--success-soft); }
.property-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.text-shadow-controls { padding-bottom: 16px; }.text-shadow-controls.disabled { opacity: .45; pointer-events: none; }.text-shadow-heading { display: flex; align-items: center; justify-content: space-between; }.text-shadow-heading output { color: var(--ink); font-size: 12px; font-weight: 800; }.text-shadow-presets { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin-top: 8px; }.text-shadow-presets button { min-height: 31px; border: 1px solid #d4d0c8; border-radius: 4px; padding: 3px; background: #fff; color: #666861; font-size: 12px; font-weight: 700; }.text-shadow-presets button.active { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: inset 0 -2px var(--acid); }.text-shadow-controls input[type="range"] { width: 100%; margin-top: 11px; }
.alignment-buttons { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; margin-top: 7px; }
.alignment-buttons button { height: 31px; display: grid; place-items: center; border: 1px solid #d8d5ce; border-radius: 4px; background: #fff; color: #777871; line-height: 1; }
.alignment-buttons button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.alignment-buttons button.active { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: inset 0 -2px var(--acid); }
.color-controls { display: flex; align-items: center; gap: 5px; margin-top: 9px; }
.color-swatch, .custom-color { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #ccc9c1; border-radius: 50%; background: var(--swatch); }
.color-swatch.active::after { content: ""; position: absolute; inset: -4px; border: 1px solid var(--ink); border-radius: 50%; }
.custom-color { overflow: hidden; background: conic-gradient(#ec6565,#e5d75d,#78cf72,#6cc8dc,#9f74dd,#ec6565); color: white; font-size: 12px; }
.custom-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }.custom-color span { z-index: 1; pointer-events: none; text-shadow: 0 1px 3px #000; }
.mini-label, .range-label label { display: block; color: #6f716a; font-size: 13px; font-weight: 700; }
.font-select-wrap { position: relative; display: flex; align-items: center; height: 43px; margin: 7px 0 15px; border: 1px solid #d6d3cc; border-radius: 6px; background: #fff; }
.font-preview { display: grid; place-items: center; width: 42px; height: 100%; border-right: 1px solid #e3e1db; font: 400 18px var(--serif); }
.font-select-wrap select { flex: 1; min-width: 0; height: 100%; appearance: none; border: 0; outline: 0; background: transparent; padding: 0 27px 0 12px; font-size: 14px; }
.font-select-wrap svg { width: 14px; right: 9px; }
.advanced-type-controls { border-top: 1px solid #ddd9d1; border-bottom: 1px solid #ddd9d1; }
.advanced-type-controls > summary { position: relative; min-height: 49px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 24px 8px 0; cursor: pointer; list-style: none; }
.advanced-type-controls > summary::-webkit-details-marker { display: none; }
.advanced-type-controls > summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--ink); font-size: 18px; }
.advanced-type-controls[open] > summary::after { content: "−"; }
.advanced-type-controls > summary > span { color: var(--ink); font-size: 14px; font-weight: 750; }
.advanced-type-body { padding: 15px 0 17px; border-top: 1px solid #e4e1da; }
#titleCompositionControls[hidden] { display: none; }
.title-layout-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 1px; }.title-layout-heading button { border: 0; background: transparent; color: var(--ink); font-size: 12px; font-weight: 800; }
.title-layout-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 9px; }.title-layout-grid button { min-width: 0; min-height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid #d8d5ce; border-radius: 6px; padding: 7px; background: #fff; color: #6f716a; }.title-layout-grid button.active { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: inset 0 -2px var(--acid); }.title-layout-grid i { min-height: 29px; display: grid; place-items: center; font: 600 18px/.88 var(--serif); font-style: normal; }.title-layout-grid .arc-icon { font-size: 17px; letter-spacing: .5px; }.title-layout-grid span { max-width: 100%; font-size: 12px; font-weight: 700; line-height: 1.15; white-space: normal; }
.title-fit-note { margin: 6px 0 13px; color: #8b8c85; font-size: 12px; line-height: 1.35; }.title-fit-note.manual { color: #8a5d2a; }
.range-label { display: flex; justify-content: space-between; margin-top: 12px; }
.range-label output { color: #777871; font-size: 12px; }
.range-input { --range-progress:50%; width: 100%; height: 16px; margin: 6px 0 0; appearance: none; border: 0; background: transparent; }
.range-input::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: linear-gradient(90deg,var(--ink) 0 var(--range-progress),#d5d3cd var(--range-progress) 100%); }
.range-input::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border: 2px solid white; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.range-input::-moz-range-track { height: 3px; border-radius: 999px; background: #d5d3cd; }
.range-input::-moz-range-progress { height: 3px; border-radius: 999px; background: var(--ink); }
.range-input::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid white; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.thumbnail-score { margin-top: 16px; padding: 11px 0 0; display: flex; align-items: center; gap: 9px; }
.thumbnail-score[hidden] { display: none; }
.score-ring { display: grid; place-items: center; width: 31px; height: 27px; border-radius: 5px; background: #e8edd8 !important; color: #5f7126; }
.score-ring::after { display: none; }.score-ring span { font-size: 12px; font-weight: 800; }
.thumbnail-score > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 2px; }.thumbnail-score strong { font-size: 12px; }.thumbnail-score span { color: #7e8077; font-size: 12px; }.thumbnail-score #thumbnailDetail { display: none; }.thumbnail-score button { border: 0; background: transparent; color: #667422; font-size: 12px; font-weight: 700; }
.editor-mockups-button { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; background: var(--surface); color: var(--ink); text-align: left; }
.editor-mockups-button strong { font-size: 13px; }
.editor-mockups-button span { color: var(--muted-text); font-size: 12px; }
.editor-mockups-button:hover { border-color: var(--ink); }
.two-control-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.two-control-fields label { color: #898a84; font-size: 12px; font-weight: 700; letter-spacing: .6px; }
.two-control-fields input, .two-control-fields select { width: 100%; height: 40px; margin-top: 6px; border: 1px solid #d5d2cb; border-radius: 5px; background: #fff; padding: 0 9px; outline: 0; color: var(--ink); font-size: 14px; }
.page-count-field small { display: block; margin-top: 6px; color: var(--muted-text); font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.4; }
.print-field { display: block; margin-top: 9px; color: #898a84; font-size: 12px; font-weight: 700; letter-spacing: .6px; }
.print-field select, .print-field textarea, .print-field input { width: 100%; margin-top: 6px; border: 1px solid #d5d2cb; border-radius: 5px; outline: 0; background: #fff; color: var(--ink); font: 500 12px/1.45 var(--sans); }
.print-field select, .print-field input { height: 40px; padding: 0 9px; font-size: 14px; }.print-field textarea { min-height: 58px; resize: vertical; padding: 8px 9px; }
.print-field select:focus, .print-field textarea:focus, .print-field input:focus, .two-control-fields input:focus, .two-control-fields select:focus { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(110,23,58,.06); }
.print-section { padding: 20px; }
.print-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.print-panel-heading > div { min-width: 0; }
.print-panel-heading h3 { margin: 0; font: 400 24px/1 var(--serif); }
.print-panel-heading p { margin: 8px 0 0; color: var(--muted-text); font-size: 14px; line-height: 1.45; }
.print-panel-heading .ready-badge { flex: 0 0 auto; }
.print-primary-fields { display: grid; gap: 14px; padding: 18px 0; }
.print-primary-fields .print-field { margin: 0; color: var(--ink-soft); font-size: 13px; letter-spacing: 0; }
.print-primary-fields .print-field > span { display: block; }
.print-primary-fields .print-field select,
.print-primary-fields .print-field input { height: 44px; margin-top: 7px; border-color: var(--border-strong); border-radius: 6px; font-size: 14px; }
.print-result-summary { display: grid; grid-template-columns: minmax(0,1fr) auto 42px; align-items: center; gap: 8px; border-radius: 7px; padding: 12px; background: var(--surface-soft); }
.print-result-summary > span { color: var(--muted-text); font-size: 13px; }
.print-result-summary > strong { font-size: 14px; }
.print-result-summary .spine-visual { justify-self: end; }
.print-technical-details { margin-top: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.print-technical-details > summary { position: relative; min-height: 50px; display: grid; grid-template-columns: minmax(0,1fr) auto 18px; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.print-technical-details > summary::-webkit-details-marker { display: none; }
.print-technical-details > summary::after { content: "+"; color: var(--ink); font-size: 18px; }
.print-technical-details[open] > summary::after { content: "−"; }
.print-technical-details > summary span { font-size: 14px; font-weight: 750; }
.print-technical-details > summary b { color: var(--muted-text); font-size: 12px; }
.print-technical-details[open] > summary { border-bottom: 1px solid var(--line); }
.print-technical-details[open] { padding-bottom: 12px; }
.spine-result { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; padding: 10px; background: #f0eee9; border-radius: 5px; }
.spine-result > div:first-child { display: flex; flex-direction: column; gap: 2px; }.spine-result span { color: #898a84; font-size: 12px; }.spine-result strong { font-size: 12px; }
.spine-visual { display: flex; align-items: center; justify-content: center; width: 42px; height: 28px; border-right: 1px solid #aaa79f; border-left: 1px solid #aaa79f; }.spine-visual i { display: block; width: 16px; height: 23px; background: var(--wine); transition: width .25s; }
.sheet-result { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }.sheet-result > div { display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid #e0ddd6; border-radius: 5px; background: #faf9f6; }.sheet-result span { color: #92938d; font-size: 12px; }.sheet-result strong { font-size: 12px; }
.preflight-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; color: #7f8079; font-size: 12px; font-weight: 800; letter-spacing: .8px; }.preflight-heading b { color: #75882f; font-size: 12px; }
.preflight-list { max-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; margin: 7px 0 0; padding: 0; list-style: none; }
.preflight-list li { display: grid; grid-template-columns: 17px 1fr; align-items: start; gap: 7px; padding: 7px; border-radius: 5px; background: #f0f2e8; }.preflight-list li > span { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #dfe8bc; color: #536323; font-size: 12px; font-weight: 800; }.preflight-list li div { display: flex; flex-direction: column; gap: 2px; }.preflight-list strong { color: #575951; font-size: 12px; }.preflight-list small { color: #84867d; font-size: 12px; line-height: 1.4; }.preflight-list li.warning { background: #f5f0df; }.preflight-list li.warning > span { background: #eadca7; color: #775d17; }.preflight-list li.error { background: #f6e8e8; }.preflight-list li.error > span { background: #e6bcbc; color: #852e35; }
.ready-badge.has-errors { background: #f1dddd; color: #8b343a; }
.wrap-button { width: 100%; min-height: 44px; margin-top: 14px; border: 0; border-radius: 6px; background: var(--ink); color: white; font-size: 14px; font-weight: 750; }.wrap-button span { margin-right: 7px; color: var(--acid); }.wrap-button:disabled { cursor: not-allowed; opacity: .42; }
.print-note { margin: 9px 0 0; text-align: center; color: var(--muted-text); font-size: 13px; line-height: 1.4; }
.copyright-note { display: flex; gap: 10px; padding: 16px 20px; color: #7c7e76; }.copyright-note > span { font-size: 17px; color: var(--wine); }.copyright-note strong { color: #555650; font-size: 12px; }.copyright-note p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; }

.home-template-controls label { min-width: 0; }
.home-template-controls select { width: 100%; min-width: 0; }

/* Simplified editor shell */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.studio-header { grid-template-columns: minmax(0,1fr) auto; }
.studio-home-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; color: var(--ink); }
.studio-home-mark:hover { background: #efede7; }
.studio-home-mark .brand-mark-image { width: 25px; height: 25px; }
.project-name { max-width: min(42vw,430px); min-height: 40px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 6px; font-size: 14px; font-weight: 650; line-height: 1.2; text-align: left; }
.project-name:hover { background: #efede7; }
.project-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-name svg { position: static; width: 18px; height: 18px; flex: 0 0 18px; display: block; transform: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.project-rename { display: flex; align-items: center; gap: 6px; }
.project-rename[hidden], .project-name[hidden] { display: none; }
.project-rename input { width: min(34vw,330px); height: 34px; border: 1px solid #aaa69d; border-radius: 5px; padding: 0 10px; background: #fff; color: var(--ink); font-size: 14px; }
.project-rename button { height: 34px; border: 0; border-radius: 5px; padding: 0 11px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 750; }

.layer-row[hidden] { display: none; }
.layer-eye { display: grid; place-items: center; }
.layer-eye svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.layer-eye .eye-slash { display: block; }
.layer-eye.visible .eye-slash { display: none; }
.layer-status { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-left: 1px solid #eeeae4; color: #85877f; font-size: 12px; }
.layer-status svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.layer-status > span { font-size: 12px; }
.layer-main-static { cursor: default; }
.layer-main-static .layer-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }

.editing-tools button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.zoom-controls button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.back-cover-editor { position: relative; overflow: hidden; width: min(31vw,326px); aspect-ratio: 5/8; color: #ead08b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.back-cover-editor[hidden] { display: none; }
.spine-cover-editor { position: relative; overflow: hidden; width: min(55vw,620px); aspect-ratio: 8/1; color: #ead08b; background-position: center; background-size: cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.spine-cover-editor[hidden] { display: none; }
.spine-cover-editor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(10,8,9,.45),rgba(20,7,13,.2),rgba(10,8,9,.5)); pointer-events: none; }
.spine-editor-stage { position: absolute; inset: 0; z-index: 2; }
.spine-editor-title, .spine-editor-author, .spine-editor-mark { position: absolute; line-height: 1; white-space: nowrap; }
.spine-editor-title { font-family: var(--serif); font-weight: 650; }
.spine-editor-author { font-family: var(--sans); font-weight: 650; }
.spine-editor-mark { font-family: var(--sans); font-weight: 750; }
.cover-preview-wrap.spine-mode { filter: drop-shadow(0 15px 18px rgba(29,22,20,.22)); }
.back-editor-stage { position: absolute; inset: 0; z-index: 3; }
.back-editor-ornament, .back-editor-tagline, .back-editor-blurb { position: absolute; transform-origin: center; }
.back-editor-ornament { font: 400 27px/1 var(--serif); }
.back-editor-tagline { font: italic 400 clamp(23px,2.5vw,34px)/1.05 var(--serif); }
.back-editor-blurb { font: 500 14px/1.55 var(--sans); }
.back-editor-barcode { right: 7%; bottom: 6%; width: 35%; height: 12%; display: grid; place-items: center; padding: 0; border: 1px solid rgba(45,43,40,.25); background: rgba(250,248,241,.94); color: #77736b; font-size: 12px; font-weight: 750; }
.cover-preview-wrap.back-mode { filter: drop-shadow(0 19px 20px rgba(29,22,20,.2)); }
.wrap-back [data-back-replica-layer] { position: absolute; margin: 0; transform-origin: center; }
.wrap-back #backTaglinePreview { font-style: italic; line-height: 1.05; }
.wrap-back #backBlurbPreview { max-width: none; line-height: 1.55; }
.wrap-back #backOrnamentPreview { text-align: center; }

.primary-size-control { margin: 3px 0 15px; border: 1px solid #d8d4cb; border-radius: 7px; padding: 10px 12px 11px; background: #f3f1eb; }
.primary-size-control .range-label { margin-top: 0; }
.primary-size-control .range-label label { color: var(--ink); font-size: 14px; }
.primary-size-control .range-label output { color: var(--ink); font-weight: 750; }
.primary-size-control .range-input { margin-bottom: 0; }

.export-print-slot { margin: 14px 0; }
.export-print-slot .print-section { border: 1px solid #d9d4c9; border-radius: 8px; background: #f7f4ed; }
.export-print-slot .print-section > summary { min-height: 54px; padding: 14px; }
.export-print-slot .print-section > :not(summary) { margin-right: 14px; margin-left: 14px; }
.export-print-slot .print-section > :last-child { margin-bottom: 14px; }

/* Author library */
.library-drawer { position: fixed; inset: 0; z-index: 55; visibility: hidden; pointer-events: none; }
.library-drawer.visible { visibility: visible; pointer-events: auto; }
.library-scrim { position: absolute; inset: 0; background: rgba(20,19,16,.42); opacity: 0; backdrop-filter: blur(3px); transition: opacity .28s; }
.library-drawer.visible .library-scrim { opacity: 1; }
.library-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(410px, calc(100vw - 24px)); display: flex; flex-direction: column; padding: 30px 28px 22px; background: #f8f6f1; box-shadow: -25px 0 70px rgba(20,18,14,.18); transform: translateX(102%); transition: transform .32s ease; }
.library-drawer.visible .library-panel { transform: translateX(0); }
.library-panel header { display: flex; align-items: flex-start; justify-content: space-between; }
.library-panel header span { color: #8a8b84; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; }
.library-panel h2 { margin: 7px 0 0; font: 400 36px/.95 var(--serif); }
.library-panel header button { width: 32px; height: 32px; border: 1px solid #d4d1ca; border-radius: 50%; background: transparent; color: #777871; font-size: 20px; }
.library-panel > p { margin: 17px 0 20px; color: #74766e; font-size: 12px; line-height: 1.55; }
.library-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 3px; }
.library-loading, .library-empty { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 10px; border: 1px dashed #d7d3ca; border-radius: 9px; color: #8d8e87; text-align: center; font-size: 12px; }
.library-loading i { width: 17px; height: 17px; border: 2px solid #d3d0c8; border-top-color: var(--wine); border-radius: 50%; animation: spin .75s linear infinite; }
.library-empty strong { color: #555650; font: 400 21px var(--serif); }.library-empty span { max-width: 220px; line-height: 1.5; }
.library-card { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 13px; min-height: 102px; padding: 11px; margin-bottom: 9px; border: 1px solid #dedbd3; border-radius: 9px; background: #fff; transition: transform .2s, box-shadow .2s; }
.library-card:hover { transform: translateY(-1px); box-shadow: 0 9px 25px rgba(30,27,21,.08); }
.library-thumb { width: 58px; aspect-ratio: 5/8; overflow: hidden; border-radius: 2px; background-size: cover; background-position: center; box-shadow: 0 5px 12px rgba(0,0,0,.16); }
.library-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.library-card-copy strong { overflow: hidden; font: 400 17px/1.05 var(--serif); text-overflow: ellipsis; white-space: nowrap; }.library-card-copy span { color: #85867f; font-size: 12px; }.library-card-copy small { margin-top: 5px; color: #a0a19a; font-size: 12px; }
.library-card > button { height: 33px; border: 1px solid #d6d3cc; border-radius: 999px; padding: 0 11px; background: #f7f5f0; color: var(--wine); font-size: 12px; font-weight: 800; }
.library-card > button:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.all-projects-link { min-height: 42px; display: flex; align-items: center; justify-content: space-between; margin-top: 13px; border-top: 1px solid #d9d5cd; padding: 13px 2px 0; color: var(--wine); font-size: 13px; font-weight: 800; }
.new-project-button { height: 42px; margin-top: 14px; border: 1px solid #cecac2; border-radius: 7px; background: transparent; font-size: 12px; font-weight: 700; }.new-project-button span { margin-right: 6px; font-size: 12px; }
.library-panel footer { padding-top: 16px; color: #92938c; text-align: center; font-size: 12px; }.library-panel footer span { margin-right: 5px; color: #83972e; }

/* Account authentication */
.auth-modal { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; }
.auth-modal.visible { visibility: visible; opacity: 1; }
.auth-scrim { position: absolute; inset: 0; background: rgba(20,19,16,.56); backdrop-filter: blur(6px); }
.auth-card { position: relative; z-index: 1; width: min(430px, calc(100vw - 30px)); max-height: calc(100svh - 24px); overflow-y: auto; padding: 39px 40px 32px; border-radius: 15px; background: #faf8f3; box-shadow: 0 28px 90px rgba(0,0,0,.28); }
.auth-close { position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; border: 1px solid #d9d5cc; border-radius: 50%; background: transparent; color: #7e7f78; font-size: 20px; }
.auth-mark { margin-bottom: 25px; }.auth-mark .brand-mark-image { width: 40px; height: 40px; }
.auth-kicker { color: #718326; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; }
.auth-card h2 { margin: 12px 0 10px; font: 400 38px/.95 var(--serif); letter-spacing: -1px; }
.auth-card p { margin: 0 0 23px; color: #73756e; font-size: 12px; line-height: 1.55; }
.auth-card label { display: block; color: #686963; font-size: 12px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.auth-card input { width: 100%; height: 44px; margin: 7px 0 10px; border: 1px solid #d2cfc7; border-radius: 6px; outline: 0; padding: 0 12px; background: #fff; font-size: 12px; }.auth-card input:focus { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(110,23,58,.08); }
.auth-card .auth-name-note { margin: -3px 0 14px; color: var(--muted-text); text-align: left; font-size: 12px; line-height: 1.4; }
.auth-send, .auth-library-button { width: 100%; height: 45px; border: 0; border-radius: 6px; background: var(--ink); color: white; font-size: 12px; font-weight: 700; }.auth-send:disabled { opacity: .65; cursor: wait; }
.auth-google { width: 100%; min-height: 47px; display: flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid #c9c6be; border-radius: 6px; background: #fff; color: #252621; font-size: 14px; font-weight: 700; }.auth-google svg { flex: 0 0 auto; width: 18px; height: 18px; }.auth-google:hover { border-color: #8f8b82; background: #fdfcf9; }.auth-google:disabled { opacity: .65; cursor: wait; }.auth-google:focus-visible, .auth-send:focus-visible, .auth-close:focus-visible, .auth-signout:focus-visible, .auth-library-button:focus-visible { outline: 3px solid rgba(110,23,58,.2); outline-offset: 2px; }
.auth-divider { position: relative; height: 39px; display: grid; place-items: center; color: #8a8b84; font-size: 12px; }.auth-divider::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: #dfdcd4; }.auth-divider span { position: relative; padding: 0 10px; background: #faf8f3; }
.auth-card p.auth-error { margin: 11px 0 0; border-radius: 6px; padding: 10px 11px; background: #f6e7e9; color: #751d35; font-size: 14px; line-height: 1.45; }.auth-error[hidden] { display: none; }
.auth-card > div > small { display: block; margin-top: 11px; color: #9a9b94; text-align: center; font-size: 12px; }
.auth-sent { margin-top: 13px; padding: 12px; display: grid; grid-template-columns: 22px 1fr; gap: 8px; border: 1px solid #cfd7af; border-radius: 7px; background: #f1f4e6; }.auth-sent[hidden] { display: none; }.auth-sent > span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #dce9ad; color: #50601e; font-size: 12px; font-weight: 800; }.auth-sent strong { font-size: 12px; }.auth-sent p { margin: 2px 0 0; font-size: 12px; line-height: 1.45; }.auth-sent a { grid-column: 1/-1; padding: 9px; border-radius: 5px; background: #fff; color: #5c6c23; text-align: center; font-size: 12px; font-weight: 700; }
.signed-in-view[hidden] { display: none; }
.account-chip { display: flex; align-items: center; gap: 11px; margin: 21px 0 15px; padding: 11px; border: 1px solid #ddd9d1; border-radius: 8px; background: #fff; }.account-chip > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wine); color: white; font: 400 15px var(--serif); }.account-chip div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }.account-chip strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.account-chip small { color: #95968f; font-size: 12px; }
.auth-signout { width: 100%; margin-top: 12px; border: 0; background: transparent; color: #8a8b84; font-size: 12px; text-decoration: underline; }
.export-auth-prompt { margin-top: 16px; border-top: 1px solid #e1e1dc; padding-top: 16px; }.export-auth-prompt[hidden] { display: none; }.export-auth-prompt > small { display: block; margin-top: 8px; color: #777971; text-align: center; font-size: 13px; }

/* Template library */
.template-modal { position: fixed; inset: 0; z-index: 64; display: grid; place-items: center; visibility: hidden; opacity: 0; transition: opacity .24s, visibility .24s; }
.template-modal.visible { visibility: visible; opacity: 1; }
.template-scrim { position: absolute; inset: 0; background: rgba(17,15,13,.7); backdrop-filter: blur(7px); }
.template-library-panel { position: relative; z-index: 1; width: min(1180px,calc(100vw - 30px)); height: min(900px,93svh); display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #f7f4ed; box-shadow: 0 32px 100px rgba(0,0,0,.34); }
.template-library-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 27px 32px 23px; border-bottom: 1px solid #ddd8ce; background: linear-gradient(110deg,#f8f4eb,#efeadf); }.template-library-header > div > span { color: #7a8d31; font-size: 12px; font-weight: 800; letter-spacing: 1.3px; }.template-library-header h2 { margin: 7px 0 5px; font: 400 31px/.98 var(--serif); }.template-library-header p { margin: 0; color: #74756e; font-size: 12px; }.template-library-header > button { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid #d2cdc2; border-radius: 50%; background: transparent; color: #777871; font-size: 21px; }
.template-toolbar { display: grid; grid-template-columns: minmax(240px,1fr) 170px 150px 145px auto; align-items: end; gap: 11px; padding: 14px 32px; border-bottom: 1px solid #e2ddd4; background: #fbf9f4; }.template-toolbar label { color: #85867f; font-size: 12px; font-weight: 800; letter-spacing: .7px; }.template-search { position: relative; display: block; }.template-search > span { position: absolute; z-index: 1; left: 12px; bottom: 9px; width: 15px; height: 15px; color: #8b8c85; }.template-search > span svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.template-toolbar input, .template-toolbar select { width: 100%; height: 36px; margin-top: 5px; border: 1px solid #d7d2c8; border-radius: 6px; outline: 0; background: #fff; color: var(--ink); font-size: 12px; }.template-toolbar input { padding: 0 12px 0 34px; }.template-toolbar select { padding: 0 10px; }.template-toolbar input:focus, .template-toolbar select:focus { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(110,23,58,.06); }.template-toolbar > div { min-width: 80px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-bottom: 3px; }.template-toolbar > div strong { font-size: 12px; }.template-toolbar > div span { color: #91928b; font-size: 12px; }
.template-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); align-items: start; gap: 16px; padding: 23px 32px 30px; }.template-card { min-width: 0; content-visibility:auto; contain-intrinsic-size:auto 360px; overflow: hidden; border: 1px solid #ddd8ce; border-radius: 9px; background: #fff; transition: transform .18s, box-shadow .18s, border-color .18s; }.template-card:hover { transform: translateY(-2px); border-color: #b8ad9e; box-shadow: 0 12px 26px rgba(36,27,29,.12); }.template-cover { position: relative; aspect-ratio: 5/8; overflow: hidden; background:#25211f; }.template-cover > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.template-cover::after { content: ""; position: absolute; inset: 0; background:linear-gradient(180deg,rgba(4,3,5,.18),rgba(5,3,5,.05) 45%,rgba(5,3,5,.58)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); pointer-events: none; }.template-cover small { position: absolute; z-index: 1; top: 6.5%; left: 15%; width: 70%; color: #f5eee0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 1px; }.template-cover strong { position: absolute; z-index: 1; display: block; color: white; font-size: clamp(12px,1.1vw,17px); font-weight: 600; line-height: .88; white-space: pre-line; transform-origin: center; text-wrap: balance; }.template-cover > span { position: absolute; z-index: 1; display: block; font-size: 12px; font-weight: 700; letter-spacing: .8px; }.template-save-button { position: absolute; z-index: 2; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: rgba(21,17,18,.38); color: #fff4ed; font-size: 15px; line-height: 1; backdrop-filter: blur(4px); }.template-save-button[aria-pressed="true"] { border-color: var(--acid); background: var(--acid); color: var(--wine); }.template-save-button:hover { transform: scale(1.08); }
.template-card-copy { display: flex; min-height: 100px; flex-direction: column; align-items: flex-start; padding: 9px 10px 10px; }.template-card-copy > small { color: #87983c; font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }.template-card-copy > strong { margin-top: 4px; font: 400 15px/1 var(--serif); }.template-card-copy > span { margin-top: 4px; overflow: hidden; width: 100%; color: #99958d; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.template-card-copy button { width: 100%; height: 27px; margin-top: auto; border: 0; border-radius: 4px; background: #f0ede5; color: var(--wine); font-size: 12px; font-weight: 800; }.template-card-copy button:hover { background: var(--ink); color: white; }
.template-empty { grid-column: 1/-1; min-height: 280px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px dashed #d3cec4; border-radius: 10px; text-align: center; }.template-empty strong { font: 400 25px var(--serif); }.template-empty span { color: #888982; font-size: 12px; }


/* Artwork workshop */
.artwork-modal { position: fixed; inset: 0; z-index: 58; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.artwork-modal.visible { opacity: 1; visibility: visible; }
.artwork-scrim { position: absolute; inset: 0; background: rgba(18,16,14,.62); backdrop-filter: blur(7px); }
.artwork-workshop { position: relative; z-index: 1; width: min(940px,calc(100vw - 30px)); height: min(690px,calc(100svh - 34px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #f8f6f1; box-shadow: 0 35px 110px rgba(0,0,0,.34); }
.artwork-workshop-header { flex: 0 0 83px; display: flex; align-items: center; justify-content: space-between; padding: 0 27px; border-bottom: 1px solid #dedbd3; }
.artwork-workshop-header > div:first-child { display: flex; flex-direction: column; gap: 6px; }.artwork-workshop-header > div:first-child > span { color: #7c7e76; font-size: 12px; font-weight: 800; letter-spacing: 1.3px; }.artwork-workshop-header h2 { margin: 0; font: 400 28px/.95 var(--serif); }
.artwork-header-actions { display: flex; align-items: center; gap: 15px; }.artwork-header-actions > button { width: 33px; height: 33px; border: 1px solid #d3d0c8; border-radius: 50%; background: transparent; color: #777871; font-size: 20px; }.provider-state { padding: 7px 9px; border-radius: 999px; background: #eff2e4; color: #657425; font-size: 12px; font-weight: 800; letter-spacing: .5px; }.provider-state.offline { background: #efede7; color: #86877f; }
.artwork-workshop-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 48% 52%; }
.artwork-stage-column { min-height: 0; display: grid; place-items: center; align-content: center; gap: 14px; padding: 25px; background: radial-gradient(circle at 50% 40%,#76516a,#21131b 70%); }.artwork-stage-column > p { max-width: 330px; margin: 0; color: rgba(255,255,255,.67); text-align: center; font-size: 12px; line-height: 1.45; }
.artwork-edit-stage { position: relative; width: min(275px,70%); aspect-ratio: 2/3; overflow: hidden; cursor: crosshair; touch-action: none; background: #28151e; box-shadow: 15px 21px 35px rgba(0,0,0,.35); }.artwork-edit-stage img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; user-select: none; }
.artwork-region { position: absolute; left: 30%; top: 34%; width: 40%; height: 28%; border: 1.5px solid var(--acid); background: rgba(215,251,79,.08); box-shadow: 0 0 0 999px rgba(10,7,9,.36); pointer-events: none; }.artwork-region > span { position: absolute; left: -1px; top: -17px; padding: 3px 5px; background: var(--acid); color: #22231f; font-size: 12px; font-weight: 800; letter-spacing: .7px; }.artwork-region i { position: absolute; width: 6px; height: 6px; border: 1px solid #24251f; background: var(--acid); }.artwork-region i:nth-of-type(1) { left:-4px;top:-4px; }.artwork-region i:nth-of-type(2) { right:-4px;top:-4px; }.artwork-region i:nth-of-type(3) { left:-4px;bottom:-4px; }.artwork-region i:nth-of-type(4) { right:-4px;bottom:-4px; }.artwork-edit-stage.full-mode { cursor: default; }.artwork-edit-stage.full-mode .artwork-region { display: none; }
.artwork-stage-tip { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: max-content; max-width: 90%; padding: 6px 8px; border-radius: 999px; background: rgba(15,12,14,.72); color: #e7e3db; backdrop-filter: blur(5px); font-size: 12px; }
.artwork-controls { min-height: 0; overflow-y: auto; padding: 25px 28px; }.artwork-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 6px; background: #eae7e0; }.artwork-mode-tabs button { height: 31px; border: 0; border-radius: 4px; background: transparent; color: #82837c; font-size: 12px; font-weight: 700; }.artwork-mode-tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.09); }
.artwork-swap-panel { padding: 15px; border: 1px solid #d9d4c9; border-radius: 9px; background: #f2f1e9; }.artwork-swap-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.artwork-swap-heading > div { display: flex; flex-direction: column; gap: 4px; }.artwork-swap-heading span, .artwork-choice-label { color: #7a8d31; font-size: 12px; font-weight: 800; letter-spacing: .8px; }.artwork-swap-heading strong { font: 400 19px/1.05 var(--serif); }.artwork-swap-heading b { flex: 0 0 auto; color: var(--wine); font-size: 12px; }.artwork-choice-label { display: block; margin: 14px 0 6px; color: #777970; }.artwork-choice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }.artwork-choice-grid button { min-height: 32px; border: 1px solid #d3cfc6; border-radius: 5px; padding: 4px 6px; background: #fff; color: #686a63; font-size: 12px; font-weight: 700; }.artwork-choice-grid button.active { border-color: var(--wine); background: var(--ink); color: #fff; box-shadow: inset 0 -2px var(--acid); }.artwork-choice-grid.subject-grid { grid-template-columns: repeat(5,1fr); }.artwork-swap-actions { display: grid; grid-template-columns: 1fr 1.15fr; gap: 7px; margin-top: 12px; }.artwork-swap-actions button { min-height: 38px; border-radius: 6px; font-size: 12px; font-weight: 800; }.artwork-swap-actions button:first-child { border: 1px solid #c9c4ba; background: #fff; color: var(--ink); }.artwork-swap-actions button:last-child { border: 0; background: var(--ink); color: #fff; }.artwork-swap-actions button:last-child span { float: right; color: var(--acid); }.artwork-edit-divider { position: relative; height: 37px; display: grid; place-items: center; color: #8b8c84; font-size: 12px; font-weight: 700; }.artwork-edit-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #dfdcd5; }.artwork-edit-divider span { position: relative; padding: 0 9px; background: #f8f6f1; }
.artwork-upload-zone { width: 100%; min-height: 58px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; margin-top: 14px; border: 1px dashed #bdb7aa; border-radius: 7px; padding: 8px 10px; background: rgba(255,255,255,.72); color: var(--ink); text-align: left; }.artwork-upload-zone.dragging { border-color: var(--wine); background: #fff; box-shadow: 0 0 0 3px rgba(110,23,58,.07); }.artwork-upload-zone > span:first-child { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--ink); color: var(--acid); font-size: 17px; }.artwork-upload-zone > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }.artwork-upload-zone strong { font-size: 14px; }.artwork-upload-zone small { color: #85867f; font-size: 12px; }.artwork-upload-zone b { color: var(--wine); font-size: 12px; }.artwork-upload-zone:disabled { cursor: wait; opacity: .62; }
.artwork-direction-options { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 4px; }
.artwork-direction-options > summary, .artwork-adjustment-group > summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; color: var(--ink); font-size: 14px; font-weight: 800; list-style: none; }
.artwork-direction-options > summary::-webkit-details-marker, .artwork-adjustment-group > summary::-webkit-details-marker { display: none; }
.artwork-direction-options > summary::after, .artwork-adjustment-group > summary::after { content: "+"; color: var(--wine); font-size: 18px; font-weight: 500; }
.artwork-direction-options[open] > summary::after, .artwork-adjustment-group[open] > summary::after { content: "−"; }
.artwork-direction-options-body { padding-bottom: 5px; }
.artwork-adjustment-group > summary > span, .artwork-adjustment-group > summary output { margin-left: auto; color: var(--muted-text); font-size: 12px; font-weight: 700; }
.artwork-adjustment-group[open] > summary { margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.artwork-edit-tools { margin-top: 10px; border: 1px solid #ddd8ce; border-radius: 9px; padding: 3px 15px 15px; background: #fff; }
.artwork-crop-panel { margin-top: 10px; border: 1px solid #ddd8ce; border-radius: 9px; padding: 13px 15px 15px; background: #fff; }.artwork-crop-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }.artwork-crop-heading strong { font: 400 18px var(--serif); }.artwork-crop-heading button { border: 0; background: transparent; color: var(--wine); font-size: 12px; font-weight: 800; }.artwork-crop-panel label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; color: #777970; font-size: 12px; font-weight: 800; letter-spacing: .7px; }.artwork-crop-panel output { color: var(--wine); font-size: 12px; }.artwork-crop-panel input[type="range"] { grid-column: 1/-1; width: 100%; margin: 3px 0 0; accent-color: var(--wine); }.artwork-position-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.artwork-overlay-panel { margin-top: 10px; border: 1px solid #ddd8ce; border-radius: 9px; padding: 13px 15px 15px; background: #fff; }.artwork-overlay-panel .artwork-crop-heading output { color: var(--wine); font-size: 12px; font-weight: 800; }.artwork-overlay-presets { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }.artwork-overlay-presets button { min-height: 31px; border: 1px solid #d4d0c8; border-radius: 5px; background: #fff; color: #71736b; font-size: 12px; font-weight: 700; }.artwork-overlay-presets button.active { border-color: var(--wine); background: var(--ink); color: #fff; box-shadow: inset 0 -2px var(--acid); }.artwork-overlay-custom { display: grid; grid-template-columns: 84px 1fr; gap: 12px; margin-top: 12px; }.artwork-overlay-custom label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; color: #777970; font-size: 12px; font-weight: 800; letter-spacing: .7px; }.artwork-overlay-custom input[type="color"] { width: 30px; height: 25px; border: 0; padding: 0; background: transparent; }.artwork-overlay-custom input[type="range"] { grid-column: 1/-1; width: 100%; accent-color: var(--wine); }
.artwork-instruction-copy { display: flex; flex-direction: column; gap: 3px; margin: 17px 0 10px; }.artwork-instruction-copy strong { font: 400 18px var(--serif); }.artwork-instruction-copy span { color: #82837c; font-size: 12px; }
.artwork-prompt-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 13px; }.artwork-prompt-chips button { min-height: 25px; border: 1px solid #d6d3cc; border-radius: 999px; padding: 0 9px; background: #fff; color: #686a63; font-size: 12px; }.artwork-prompt-chips button:hover { border-color: var(--wine); color: var(--wine); }
.artwork-controls > label, #artworkEditTools > label { display: block; color: #85867f; font-size: 12px; font-weight: 800; letter-spacing: .8px; }.artwork-controls textarea { width: 100%; min-height: 78px; margin-top: 7px; resize: vertical; border: 1px solid #d4d1ca; border-radius: 6px; outline: 0; padding: 10px; background: #fff; color: var(--ink); font: 500 12px/1.45 var(--sans); }.artwork-controls textarea:focus { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(110,23,58,.07); }
.artwork-action-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 7px; margin-top: 9px; }.artwork-action-row button { height: 40px; border-radius: 6px; font-size: 12px; font-weight: 700; }.artwork-apply { border: 0; background: var(--ink); color: #fff; }.artwork-apply span { float: right; color: var(--acid); }.artwork-variation { border: 1px solid #ccc9c2; background: #fff; color: #555650; }.artwork-action-row button:disabled { cursor: wait; opacity: .55; }
.artwork-version-heading { margin-top: 20px; padding-top: 14px; border-top: 1px solid #dfdcd5; }.artwork-version-heading > div { display: flex; align-items: center; justify-content: space-between; }.artwork-version-heading span { color: #7d7f77; font-size: 12px; font-weight: 800; letter-spacing: .9px; }.artwork-version-heading b { color: var(--wine); font-size: 12px; }.artwork-version-heading small { display: block; margin-top: 3px; color: #999a94; font-size: 12px; }
.artwork-versions { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-top: 10px; }.artwork-version { position: relative; aspect-ratio: 2/3; overflow: hidden; border: 1px solid #d5d2ca; border-radius: 5px; background-position: center; background-size: cover; }.artwork-version::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%,rgba(12,9,11,.7)); }.artwork-version span { position: absolute; z-index: 1; left: 6px; right: 6px; bottom: 6px; overflow: hidden; color: white; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.artwork-version.active { border: 2px solid var(--acid); box-shadow: 0 0 0 1px #22231f; }.artwork-version.active::before { content: "✓"; position: absolute; z-index: 2; right: 5px; top: 5px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--acid); color: var(--ink); font-size: 12px; font-weight: 900; }
.artwork-workshop > footer { flex: 0 0 38px; display: flex; align-items: center; gap: 7px; padding: 0 27px; border-top: 1px solid #dedbd3; color: #888a82; }.artwork-workshop > footer > span { color: var(--wine); }.artwork-workshop > footer p { margin: 0; font-size: 12px; }.artwork-workshop > footer strong { color: #62645d; }
.remix-spinner { display: inline-block; width: 10px; height: 10px; border: 1.5px solid #c9c6be; border-top-color: var(--wine); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }

/* Overlays */
.preview-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 35%,#514940,#161815 72%); color: white; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.preview-overlay.visible { opacity: 1; visibility: visible; }
.overlay-close, .modal-close { position: absolute; top: 24px; right: 28px; z-index: 3; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(0,0,0,.2); color: white; font-size: 24px; }
.shelf-label { position: absolute; top: 9%; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #bdb9b0; }
.shelf-books { position: absolute; top: 21%; width: min(1000px,88vw); height: 51%; display: flex; align-items: flex-end; justify-content: center; gap: 35px; }
.shelf-book { position: relative; width: 17%; aspect-ratio: 2/3; box-shadow: 10px 16px 20px rgba(0,0,0,.35); }
.ghost-book { filter: blur(3px) saturate(.45); opacity: .5; background: linear-gradient(145deg,#39435a,#171a21); }.ghost-book.two { background: linear-gradient(145deg,#7a5b3f,#22180f); height: 90%; }.ghost-book.three { background: linear-gradient(145deg,#5b2839,#1d0d12); height: 95%; }.ghost-book.four { background: linear-gradient(145deg,#53664d,#171e15); height: 85%; }
.featured-book { overflow: hidden; width: 20%; color: #edcf83; transform: translateY(-10px); }
.featured-book small, .featured-book strong, .featured-book > span { position: absolute; width: 100%; text-align: center; }.featured-book small { top: 9%; font-size: 12px; letter-spacing: 3px; }.featured-book strong { top: 18%; font: 600 clamp(18px,2.6vw,37px)/.87 "Playfair Display",serif; }.featured-book > span { bottom: 9%; font-size: 12px; letter-spacing: 3px; }
.wood-shelf { position: absolute; top: 72%; width: 100%; height: 20px; background: linear-gradient(#654e3b,#35291f); box-shadow: 0 15px 35px #000; }
.preview-overlay > p { position: absolute; bottom: 8%; font: 400 28px var(--serif); }.preview-overlay > p span { color: var(--acid); font-style: italic; }
.export-modal, .purchase-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: .25s; }
.export-modal.visible, .purchase-modal.visible { opacity: 1; visibility: visible; }
.modal-scrim { position: absolute; inset: 0; background: rgba(20,19,16,.6); backdrop-filter: blur(6px); }
.modal-card { position: relative; z-index: 1; width: min(920px, calc(100vw - 30px)); max-height: 92svh; min-height: 540px; display: grid; grid-template-columns: 40% 60%; overflow: hidden; border-radius: 16px; background: #faf8f3; box-shadow: 0 30px 100px rgba(0,0,0,.3); }
.export-modal .modal-card { width: min(860px,calc(100vw - 30px)); height: min(700px,calc(100svh - 30px)); min-height: 0; grid-template-columns: 190px minmax(0,1fr); }
.export-modal .export-preview-shell > img { width: 136px; }
.export-modal .modal-content { overflow: hidden; padding: 26px 28px 22px; }
.export-modal .modal-content h2 { margin: 4px 0 5px; font-size: 34px; }
.export-modal .export-files-view > p { margin-bottom: 10px; }
.purchase-card { position: relative; z-index: 1; width: min(560px, calc(100vw - 30px)); max-height: 90svh; overflow-y: auto; border-radius: 16px; padding: 34px; background: var(--card); box-shadow: 0 30px 100px rgba(0,0,0,.3); }
.purchase-card h2 { margin: 0 45px 8px 0; font: 400 38px/.98 var(--serif); letter-spacing: -1px; }
.purchase-card > p { margin: 0; color: var(--muted-text); font-size: 14px; line-height: 1.5; }
.modal-close { top: 15px; right: 15px; color: #777; border-color: #ddd8d0; background: transparent; }
.modal-art { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%,#86516a,#2c121f); }
.export-preview-shell { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 540px; }
.export-preview-shell > img { width: 205px; aspect-ratio: 5/8; object-fit: cover; border-radius: 2px; box-shadow: 18px 23px 34px rgba(0,0,0,.38); }
.export-preview-shell > img[hidden] { display: none; }
.export-preview-loading { position: absolute; left: 50%; bottom: 25px; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: rgba(18,12,15,.68); color: #eee8dd; backdrop-filter: blur(7px); font-size: 12px; }
.export-preview-loading[hidden] { display: none; }
.export-preview-loading i, .export-spinner { display: inline-block; width: 11px; height: 11px; border: 1.5px solid rgba(255,255,255,.3); border-top-color: var(--acid); border-radius: 50%; animation: spin .7s linear infinite; }
.modal-book { position: relative; width: 175px; aspect-ratio: 5/8; overflow: hidden; color: #ecd18a; box-shadow: 18px 23px 30px rgba(0,0,0,.35); transform: rotate(-3deg); }
.modal-book[hidden] { display: none; }
.modal-book small, .modal-book strong, .modal-book > span { position: absolute; width: 100%; text-align: center; }.modal-book small { top: 9%; font-size: 12px; letter-spacing: 2px; }.modal-book strong { top: 20%; font: 600 23px/.86 "Playfair Display",serif; }.modal-book > span { bottom: 8%; font-size: 12px; letter-spacing: 2px; }
.modal-content { overflow-y: auto; padding: 34px 38px 30px; }
.modal-kicker { color: #788c2e; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; }
.modal-content h2 { margin: 13px 0 10px; font: 400 38px/.94 var(--serif); letter-spacing: -1.2px; }.modal-content > p { margin: 0 0 18px; color: #74756e; font-size: 12px; line-height: 1.55; }
.export-format-card { min-height: 58px; display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #cbd1a9; border-radius: 7px; background: #f2f4e8; }
.format-check { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #dbe9a7; color: #42501d; font-size: 12px; font-weight: 800; }
.export-format-card > div { display: flex; flex-direction: column; gap: 2px; }.export-format-card strong { font-size: 12px; }.export-format-card div span { color: #777a6e; font-size: 12px; }.export-format-card div b { color: #56594d; font-weight: 600; }
.export-format-option + .export-format-option { margin-top: 12px; }
.export-option-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.export-option-actions > button { margin-top: 8px; }
.export-format-option > .download-print-button { margin-top: 8px; }
.print-export-card { border-color: #ded9ca; background: #f5f2e8; }.format-ready.error { background: #f1d9d9; color: #8f3037; }
.acx-export-card { margin-top: 8px; border-color: #d7d0df; background: #f3eff5; }.format-square-preview { position: relative; width: 27px; height: 27px; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: #2a1721; color: var(--acid); }.format-square-preview > span { display: grid; place-items: center; }.format-square-preview svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }.format-square-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.format-square-preview img[hidden] { display: none; }
.format-ready.locked { background: #ede8dc; color: #777164; }
.format-ready { padding: 4px 6px; border-radius: 3px; background: #e4ebca; color: #586a20; font-size: 12px; font-weight: 800; letter-spacing: .7px; }
.export-more-options { margin-top: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.export-more-options > summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; color: var(--ink); font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; }
.export-more-options > summary::-webkit-details-marker { display: none; }
.export-more-options > summary::after { content: "+"; color: var(--wine); font-size: 18px; font-weight: 500; }
.export-more-options[open] > summary::after { content: "−"; }
.export-more-options > div { border-top: 1px solid var(--line); padding: 8px; }
.export-more-options .acx-export-card { margin-top: 0; }
.export-files-view[hidden] { display: none; }
.export-files-view > p { margin: 0 0 18px; color: #74756e; font-size: 14px; line-height: 1.5; }
.download-cover-button { width: 100%; height: 47px; margin-top: 11px; border: 0; border-radius: 6px; background: var(--ink); color: white; font-size: 12px; font-weight: 700; }.download-cover-button:hover { background: #30312d; }.download-cover-button:disabled { cursor: wait; opacity: .78; }.download-cover-button > span:last-child { float: right; color: var(--acid); font-size: 15px; }.download-cover-button .export-spinner { margin-right: 8px; vertical-align: -2px; }
.export-format-upgrade { width: 100%; min-height: 43px; margin-top: 7px; border: 1px solid var(--ink); border-radius: 6px; background: transparent; color: var(--ink); font-size: 12px; font-weight: 750; }.export-format-upgrade:hover { background: var(--ink); color: var(--on-dark); }.export-format-upgrade[hidden] { display: none; }
.download-print-button { width: 100%; height: 43px; margin-top: 7px; border: 1px solid var(--ink); border-radius: 6px; background: transparent; color: var(--ink); font-size: 12px; font-weight: 700; }.download-print-button > span:last-child { float: right; color: var(--wine); font-size: 14px; }.download-print-button:disabled { cursor: not-allowed; opacity: .42; }.download-print-button .export-spinner { border-color: rgba(30,31,28,.25); border-top-color: var(--wine); margin-right: 8px; vertical-align: -2px; }
.acx-download-button { border-color: #75647b; color: #4c3a52; }
.locked-export { border-style: dashed; background: #f4f0e8; }
body:not(.checkout-enabled) #downloadRevealCard.locked { display: none; }
.download-reveal-button { width: 100%; min-height: 51px; margin-top: 7px; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 7px; border: 1px solid #d8d1c0; border-radius: 6px; padding: 7px 11px; background: #fff; color: var(--ink); text-align: left; }.download-reveal-button .reveal-icon { display: grid; place-items: center; color: var(--wine); }.download-reveal-button .reveal-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }.download-reveal-button > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }.download-reveal-button strong { font-size: 12px; }.download-reveal-button small { color: #8a867d; font-size: 12px; }.download-reveal-button b { color: #74852d; font-size: 12px; letter-spacing: .5px; }.download-reveal-button:disabled { cursor: wait; opacity: .72; }
.purchase-panel { margin-top: 14px; border: 1px solid #d9d9d5; border-radius: 10px; padding: 16px; background: #fff; transition: border-color .2s, box-shadow .2s; }.purchase-panel.unlocked { border-color: #b9c987; background: #f3f5e8; }.purchase-heading { display: grid; grid-template-columns: 27px 1fr; align-items: start; gap: 10px; }.purchase-lock { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--ink); color: var(--acid); }.purchase-lock svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.purchase-heading > div { display: flex; flex-direction: column; gap: 3px; }.purchase-heading strong { font-size: 14px; }.purchase-heading small { color: #72746e; font-size: 14px; line-height: 1.45; }
.product-grid { display: grid; gap: 8px; margin-top: 16px; }.product-card { min-height: 76px; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 4px 16px; border: 1px solid #d6d7d2; border-radius: 8px; padding: 12px 14px; background: #fff; color: var(--ink); text-align: left; transition: transform .18s, border-color .18s, box-shadow .18s; }.product-card:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--ink); box-shadow: 0 7px 18px rgba(57,36,44,.08); }.product-card > span { min-width: 0; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 3px; }.product-card strong { font-size: 14px; }.product-card small { color: #72746e; font-size: 13px; line-height: 1.4; }.product-card > b { grid-column: 2; grid-row: 1; align-self: end; color: var(--ink); font: 600 18px var(--serif); }.product-card em { grid-column: 2; grid-row: 2; align-self: start; color: var(--wine); font-size: 12px; font-style: normal; font-weight: 800; }.product-card.purchased { border-color: #b7c58e; background: #f2f5e8; }.product-card:disabled { cursor: default; opacity: .72; }.product-card.attention { animation: productAttention 1.2s ease; }
.product-card.launch { min-height: 76px; border-color: #d6d7d2; background: #fff; }
.purchase-panel.checkout-disabled .product-grid, .purchase-panel.checkout-disabled .digital-consent { display: none; }
.purchase-pricing-link { display: none; min-height: 42px; align-items: center; justify-content: center; margin-top: 12px; border: 1px solid var(--ink); border-radius: 6px; color: var(--ink); font-size: 13px; font-weight: 800; }
.purchase-panel.checkout-disabled .purchase-pricing-link { display: flex; }
.purchase-pricing-link:hover { background: var(--ink); color: white; }
.digital-consent { display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 10px; margin-top: 14px; border-top: 1px solid #e1e1dc; padding-top: 14px; color: #5f615c; font-size: 14px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; }.digital-consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
@keyframes productAttention { 0%,100% { box-shadow: none; } 35% { border-color: var(--wine); box-shadow: 0 0 0 4px rgba(110,23,58,.13); transform: translateY(-2px); } }
.license-row { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #d9ddc8; padding-top: 8px; }.license-row[hidden] { display: none; }.license-row > span { color: #77786e; font-size: 12px; letter-spacing: .5px; }.license-row > span strong { color: var(--ink); }.license-row button { border: 0; padding: 3px 0; background: transparent; color: var(--wine); font-size: 12px; font-weight: 700; }.checkout-notice { display: block; margin-top: 7px; color: #99958d; font-size: 12px; line-height: 1.35; }
.modal-content label { display: block; color: #62635d; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }.modal-content input { width: 100%; height: 45px; margin: 7px 0 10px; border: 1px solid #d4d1c9; border-radius: 6px; outline: 0; padding: 0 13px; background: white; font-size: 12px; }.modal-content input:focus { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(110,23,58,.08); }
.modal-content .digital-consent { display: grid; grid-template-columns: 18px 1fr; align-items: start; color: #5f615c; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.45; text-transform: none; }
.modal-content .digital-consent input { width: 18px; height: 18px; margin: 1px 0 0; padding: 0; }
.export-modal .export-files-view { height: 100%; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto auto; }
#acxPreviewImage { display: none !important; }
.export-format-selector { min-height: 0; display: grid; gap: 7px; overflow-y: auto; margin: 0; border: 0; padding: 0 3px 0 0; }
.modal-content .export-format-choice { min-height: 54px; display: grid; grid-template-columns: 22px minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 12px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; background: #fff; color: var(--ink); cursor: pointer; letter-spacing: 0; text-transform: none; transition: border-color .16s, background .16s, box-shadow .16s; }
.modal-content .export-format-choice:hover { border-color: #999b94; }
.modal-content .export-format-choice.selected { border-color: var(--ink); background: #f7f7f4; box-shadow: inset 3px 0 0 var(--ink); }
.modal-content .export-format-choice.owned { background: #f4f6ec; }
.modal-content .export-format-choice input { grid-row: 1 / 3; width: 20px; height: 20px; margin: 0; padding: 0; accent-color: var(--ink); }
.export-format-choice > span { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.export-format-choice > span strong { font-size: 15px; line-height: 1.2; }
.export-format-choice > span small { color: var(--muted-text); font-size: 13px; font-weight: 400; line-height: 1.35; }
.export-format-choice .export-format-price { grid-column: 3; grid-row: 1 / 3; align-self: center; font: 600 19px/1 var(--serif); }
.export-format-choice .format-ready { display: none; }
.export-format-choice.owned .format-ready { color: #5d7021; }
.export-requirement { margin-top: 12px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid #d6a16f; border-radius: 9px; padding: 12px 13px; background: #fff8ed; }
.export-requirement[hidden] { display: none; }
.export-requirement > div { display: flex; flex-direction: column; gap: 3px; }
.export-requirement strong { font-size: 14px; }
.export-requirement span { color: #705a47; font-size: 13px; line-height: 1.4; }
.export-requirement button { min-height: 38px; border: 1px solid var(--ink); border-radius: 6px; padding: 0 12px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 750; }
.purchase-panel.export-checkout { position: static; margin-top: 12px; padding: 13px 14px 14px; }
.export-order-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; }
.export-order-summary > div { display: flex; flex-direction: column; gap: 3px; }
.export-order-summary strong { font-size: 15px; }
.export-order-summary small { overflow: hidden; color: var(--muted-text); font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.export-order-summary > b { font: 600 25px/1 var(--serif); }
.export-primary-action { width: 100%; min-height: 48px; margin-top: 13px; border: 1px solid var(--ink); border-radius: 7px; background: var(--ink); color: var(--on-dark); font-size: 15px; font-weight: 800; }
.export-primary-action:hover:not(:disabled) { background: #30312d; }
.export-primary-action:disabled { cursor: not-allowed; opacity: .48; }
.export-secondary-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 5px; border-top: 1px solid var(--line); }
.export-draft-action, .export-canva-link { width: 100%; min-height: 38px; border: 0; background: transparent; color: var(--ink); font-size: 13px; font-weight: 700; }
.export-canva-link { border-left: 1px solid var(--line); color: var(--wine); }
.magic-button { width: 100%; height: 47px; border: 0; border-radius: 6px; background: var(--ink); color: white; font-size: 12px; font-weight: 700; }.modal-content > small { display: block; margin-top: 10px; color: #999a94; text-align: center; font-size: 12px; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translate(-50%,20px); min-width: 260px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 8px; background: #1e201d; color: white; box-shadow: 0 15px 40px rgba(0,0,0,.25); opacity: 0; visibility: hidden; transition: .25s; }.toast.visible { transform: translate(-50%,0); opacity: 1; visibility: visible; }.toast > span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--acid); color: var(--ink); font-size: 12px; font-weight: 800; }.toast p { margin: 0; font-size: 12px; }

/* Legibility and template collision pass */
:root { --text-floor: 12px; --text-body: 14px; }
.hero-subcopy, .genre-insight span:last-child, .directions-panel > p,
.panel-mode-content > p, .layers-intro, .editor-tip p, .direction-note p,
.title-fit-note, .thumbnail-score span, .print-note, .copyright-note p,
.library-panel > p, .library-card-copy span, .library-empty span,
.auth-card p, .auth-sent p, .artwork-stage-column > p, .artwork-instruction-copy span,
.artwork-workshop > footer p, .modal-content > p, .purchase-heading small,
.checkout-notice, .template-empty span { font-size: var(--text-body); line-height: 1.5; }
input, select, textarea, button { font-size: max(var(--text-floor), 1em); }
.optional-field span { font-size: 12px; }
.home-template-controls label { font-size: 12px; }.home-template-controls select { font-size: 14px; }
.home-template-controls .home-template-filter { min-width: 0; display: flex; flex-direction: column; gap: 5px; }.home-template-filter > span { color: #85867f; font-size: 12px; font-weight: 800; letter-spacing: .7px; }.home-template-controls .home-template-filter select { width: 100%; margin: 0; }
.home-template-cover > small, .home-template-cover > span { font-size: 12px; line-height: 1.25; text-shadow: 0 1px 5px rgba(0,0,0,.75); }
.home-template-cover > strong { font-size: var(--template-cover-title-size); line-height: 1.05; }
.home-template-cover > small, .template-cover small { display: -webkit-box; overflow: hidden; max-height: 2.5em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-template-cover > span, .template-cover > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-template-card > div:last-child span, .home-template-gallery footer { font-size: 12px; }

.template-grid { grid-auto-rows: max-content; grid-template-columns: repeat(4,minmax(0,1fr)); align-content: start; }
.template-card { align-self: start; display: flex; flex-direction: column; }
.template-cover { flex: 0 0 auto; width: 100%; }
.template-library-header > div > span { font-size: 12px; }
.template-library-header p { font-size: 12px; line-height: 1.45; }
.template-toolbar label { font-size: 12px; }
.template-toolbar input, .template-toolbar select { font-size: 12px; }
.template-toolbar > div strong { font-size: 12px; }
.template-toolbar > div span { font-size: 12px; }
.template-cover small, .template-cover > span { font-size: 12px; line-height: 1.25; text-shadow: 0 1px 5px rgba(0,0,0,.8); }
.template-cover strong { font-size: var(--template-cover-title-size); line-height: 1.05; }
.template-card-copy { min-height: 112px; padding: 11px 12px 12px; }
.template-card-copy > small { font-size: 12px; }
.template-card-copy > strong { font-size: 17px; }
.template-card-copy > span { margin-top: 6px; font-size: 12px; }
.template-card-copy button { min-height: 32px; font-size: 12px; }

/* Publication families */
.publication-picker { min-width: 0; margin: 0 0 19px; }
.publication-picker .field-label { margin-bottom: 7px; }
.publication-picker select { height: 48px; }
.home-template-controls { grid-template-columns: repeat(3,minmax(0,1fr)); }
.template-toolbar { grid-template-columns: minmax(210px,1fr) 150px 150px 135px 125px auto; gap: 10px; }

/* Marketing pages */
.marketing-page { min-height: 100svh; padding: 135px max(5vw,28px) 90px; }
.marketing-page[hidden] { display: none; }
.marketing-page-header { max-width: 1160px; margin: 0 auto 48px; }
.marketing-page-header > span { display: block; margin-top: 45px; color: var(--wine); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; }
.marketing-page-header h1 { max-width: 900px; margin: 20px 0 22px; font-size: clamp(55px,7vw,96px); }
.marketing-page-header p { max-width: 680px; margin: 0; color: #656760; font-size: 16px; line-height: 1.65; }
.page-back { display: inline-flex; align-items: center; color: #656760; font-size: 12px; font-weight: 700; }

.pricing-section.pricing-page { margin: 0; border-radius: 0; background: var(--paper); color: var(--ink); }
.pricing-page-grid { max-width: 1160px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0 auto; }
.pricing-page-grid article { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; padding: 24px; background: rgba(255,255,255,.58); }
.pricing-page-grid article.featured { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: inset 0 4px var(--acid); }
.pricing-page-grid article > div > span { color: var(--wine); font-size: 12px; font-weight: 800; letter-spacing: 1px; }.pricing-page-grid article.featured > div > span { color: var(--acid); }
.pricing-page-grid h2 { margin: 18px 0 0; font: 400 31px/1 var(--serif); }
.pricing-page-grid article > div > strong { display: inline-block; margin-top: 18px; font: 400 46px/1 var(--serif); }
.pricing-page-grid article > div > small { margin-left: 8px; color: #85877f; font-size: 12px; }.pricing-page-grid article.featured > div > small { color: #aaa9a3; }
.pricing-page-grid article > p { min-height: 44px; margin: 18px 0 10px; color: #6d6f68; font-size: 14px; line-height: 1.5; }.pricing-page-grid article.featured > p { color: #c7c6c0; }
.pricing-page-grid ul { flex: 1; margin: 8px 0 22px; padding: 0; list-style: none; }
.pricing-page-grid li { position: relative; margin: 10px 0; padding-left: 21px; color: #50524d; font-size: 14px; line-height: 1.4; }.pricing-page-grid li::before { content: "✓"; position: absolute; left: 0; color: #667526; font-weight: 800; }.pricing-page-grid article.featured li { color: #e2e1db; }.pricing-page-grid article.featured li::before { color: var(--acid); }
.pricing-page-grid a { min-height: 43px; display: grid; place-items: center; border-radius: 7px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; }.pricing-page-grid article.featured a { background: var(--acid); color: var(--ink); }
.pricing-explainer { max-width: 1160px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; margin: 70px auto; padding: 56px; border-radius: 16px; background: #e9e2d6; }
.pricing-explainer > div:first-child > span { color: var(--wine); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; }.pricing-explainer h2, .comparison-section h2, .pricing-faq h2 { margin: 13px 0 15px; font: 400 36px/1.05 var(--serif); }.pricing-explainer p { margin: 0; color: #60625c; font-size: 14px; line-height: 1.65; }
.pricing-steps { display: grid; gap: 8px; }.pricing-steps article { display: grid; grid-template-columns: 38px 110px 1fr; align-items: center; gap: 10px; border-bottom: 1px solid rgba(23,24,22,.12); padding: 13px 0; }.pricing-steps b { color: var(--wine); font-size: 12px; }.pricing-steps strong { font-size: 14px; }.pricing-steps span { color: #696b64; font-size: 12px; line-height: 1.45; }
.comparison-section, .pricing-faq { max-width: 1160px; margin: 0 auto 70px; }
.comparison-table { overflow: hidden; margin-top: 25px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.48); }
.comparison-row { min-height: 54px; display: grid; grid-template-columns: minmax(220px,2fr) repeat(4,minmax(72px,1fr)); align-items: center; border-top: 1px solid var(--line); }.comparison-row:first-child { border-top: 0; background: var(--ink); color: #fff; }.comparison-row > * { padding: 10px 16px; text-align: center; font-size: 12px; }.comparison-row > strong { text-align: left; font-size: 13px; }.comparison-row span { color: #667526; font-weight: 800; }.comparison-head span { color: var(--acid); }
.pricing-faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: 70px; }.pricing-faq details { border-top: 1px solid var(--line); padding: 16px 0; }.pricing-faq summary { font-size: 14px; font-weight: 750; cursor: pointer; }.pricing-faq p { margin: 10px 0 0; color: #666860; font-size: 14px; line-height: 1.55; }

.blog-page { background: linear-gradient(180deg,#f4f5f3 0,#e8ebe8 100%); }
.blog-featured { max-width: 1160px; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; margin: 0 auto 18px; border-radius: 16px; background: var(--ink); color: #fff; }
.blog-featured-art { position: relative; min-height: 430px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 30%,#78415b 0,transparent 38%),linear-gradient(135deg,#170f14,#492033); }.blog-featured-art > span { position: absolute; left: 24px; top: 22px; color: #e5d7b7; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; }
.blog-spine-demo { width: min(340px,72%); display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; filter: drop-shadow(0 20px 28px rgba(0,0,0,.3)); }.blog-spine-demo i { height: 255px; border: 1px solid rgba(255,255,255,.25); background: linear-gradient(150deg,#d9c9b1,#9e7e64); }.blog-spine-demo i:last-child { background: linear-gradient(150deg,#8d284c,#27131d); }.blog-spine-demo b { height: 255px; display: grid; place-items: center; background: #171816; color: var(--gold); font: 600 16px var(--serif); writing-mode: vertical-rl; }
.blog-featured, .blog-grid > a { transition: transform .2s, box-shadow .2s; }.blog-featured:hover, .blog-grid > a:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(33,27,23,.12); }
.blog-featured article { display: flex; flex-direction: column; justify-content: center; padding: 48px; }.blog-featured article > span, .blog-grid article > span { color: var(--acid); font-size: 12px; font-weight: 800; letter-spacing: .9px; }.blog-featured h2 { margin: 18px 0; font: 400 42px/1.04 var(--serif); }.blog-featured p { margin: 0; color: #c9c8c2; font-size: 14px; line-height: 1.65; }.blog-featured article > b { margin-top: 24px; color: var(--acid); font-size: 12px; }
.blog-grid { max-width: 1160px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0 auto 70px; }.blog-grid > a { display: block; min-width: 0; }.blog-grid article { min-width: 0; height: 100%; padding: 14px 14px 24px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.55); }.blog-card-art { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 20px; border-radius: 8px; background: #ddd4c4; }.blog-card-art b { font: 400 64px/1 var(--serif); }.blog-card-art span { margin-top: 8px; font-size: 12px; }.rights-art { background: #d9e3be; }.rights-art b { display: grid; place-items: center; width: 68px; height: 68px; border: 2px solid var(--ink); border-radius: 50%; font-family: var(--sans); font-size: 29px; }.genre-art { background: #4c1730; color: var(--gold); }
.blog-grid article > span { color: var(--wine); }.blog-grid h2 { margin: 12px 0; font: 400 27px/1.05 var(--serif); }.blog-grid p { margin: 0; color: #696b64; font-size: 14px; line-height: 1.55; }.blog-grid article > strong { display: block; margin-top: 20px; color: var(--wine); font-size: 12px; }
.blog-article[hidden] { display: none; }.blog-article { max-width: 1160px; margin: 0 auto; }.blog-article > header { max-width: 850px; margin: 0 auto 45px; padding-top: 10px; }.blog-article > header > a { color: #676961; font-size: 12px; font-weight: 700; }.blog-article > header > span { display: block; margin-top: 52px; color: var(--wine); font-size: 12px; font-weight: 800; letter-spacing: 1px; }.blog-article > header h1 { margin: 18px 0 22px; font-size: clamp(58px,7vw,92px); }.blog-article > header p { max-width: 700px; margin: 0; color: #696b64; font-size: 17px; line-height: 1.6; }
.blog-article-hero { min-height: 400px; display: grid; place-items: center; overflow: hidden; border-radius: 16px; }.print-article-hero { background: radial-gradient(circle at 50% 25%,#84506a,transparent 38%),#25151c; }.print-article-hero > div { width: min(760px,80%); height: 260px; display: grid; grid-template-columns: 1fr 20px 58px 20px 1fr; align-items: center; color: #fff; filter: drop-shadow(0 24px 28px rgba(0,0,0,.35)); }.print-article-hero span { height: 100%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); background: linear-gradient(145deg,#cbb99e,#7e304d); font: 400 23px var(--serif); }.print-article-hero span:last-child { background: linear-gradient(145deg,#242522,#743047); }.print-article-hero i { height: 100%; background: #4d2234; }.print-article-hero b { height: 100%; display: grid; place-items: center; background: #171816; color: var(--gold); font: 600 14px var(--serif); writing-mode: vertical-rl; }
.type-article-hero { grid-template-columns: 1.6fr .8fr .35fr; gap: 30px; padding: 45px; background: #d7fb4f; color: #171816; }.type-scale { overflow: hidden; font-family: var(--serif); font-weight: 600; line-height: .82; }.type-scale.large { font-size: 95px; }.type-scale.medium { font-size: 44px; }.type-scale.small { font-size: 19px; }
.rights-article-hero { background: #d9e3be; }.rights-article-hero > div { display: flex; align-items: center; gap: 25px; }.rights-article-hero span { min-width: 150px; height: 90px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 9px; background: rgba(255,255,255,.4); font-size: 12px; font-weight: 800; letter-spacing: 1px; }.rights-article-hero b { font: 400 29px var(--serif); }
.blog-article-body { display: grid; grid-template-columns: 210px minmax(0,680px); justify-content: center; gap: 70px; padding: 65px 0 25px; }.blog-article-body aside { position: sticky; top: 110px; align-self: start; display: flex; flex-direction: column; gap: 11px; border-left: 2px solid var(--wine); padding-left: 16px; }.blog-article-body aside strong { margin-bottom: 5px; font-size: 12px; }.blog-article-body aside a { color: #73756d; font-size: 12px; }.blog-article-body > div > p, .blog-article-body li { color: #4f514c; font: 400 17px/1.75 Georgia,serif; }.blog-article-body .article-lede { margin-top: 0; color: var(--ink); font: 400 23px/1.5 var(--serif); }.blog-article-body h2 { margin: 56px 0 14px; font: 400 37px/1.05 var(--serif); }.blog-article-body blockquote, .article-callout { margin: 30px 0; border-left: 3px solid var(--wine); padding: 18px 22px; background: rgba(255,255,255,.52); }.blog-article-body blockquote { color: #555751; font-size: 14px; line-height: 1.6; }.article-callout { display: flex; flex-direction: column; gap: 6px; }.article-callout strong { font-size: 14px; }.article-callout span { color: #666860; font-size: 14px; line-height: 1.5; }.article-cta { min-height: 44px; display: inline-flex; align-items: center; margin-top: 35px; border-radius: 999px; padding: 0 19px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; }
.blog-newsletter { max-width: 1160px; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 50px; margin: 0 auto; border-top: 1px solid var(--line); padding-top: 36px; }.blog-newsletter span { color: var(--wine); font-size: 12px; font-weight: 800; letter-spacing: 1px; }.blog-newsletter h2 { max-width: 500px; margin: 10px 0 0; font: 400 34px/1.05 var(--serif); }.blog-newsletter form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }.blog-newsletter input { min-width: 0; height: 45px; border: 1px solid var(--line); border-radius: 7px; padding: 0 13px; background: #fff; font-size: 14px; }.blog-newsletter button { border: 0; border-radius: 7px; padding: 0 18px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; }

.step-label, .direction-card > i, .direction-note p, .panel-mode-tabs button,
.layer-transform button, .editor-tip p, .rendering-status,
.bleed-label, .print-note, .copyright-note p { font-size: 12px; }
.layer-main small, .layer-transform > span, .editable-badge, .selection-label,
.selected-layer-label span, .mini-label, .range-label label, .title-layout-grid span,
.title-fit-note, .thumbnail-score span, .two-control-fields label, .print-field,
.spine-result span, .sheet-result span, .preflight-heading, .preflight-list small { font-size: 12px; }
.pro-badge, .ready-badge, .preflight-heading b, .format-ready { font-size: 12px; }
.library-card-copy span, .library-card-copy small, .library-panel footer,
.auth-card > div > small, .auth-sent p, .account-chip small, .artwork-stage-column > p,
.artwork-prompt-chips button, .artwork-controls > label, .artwork-version-heading span,
.artwork-version-heading b, .artwork-version-heading small, .artwork-version span,
.artwork-workshop > footer p, .export-format-card div span, .download-reveal-button small,
.product-card small, .product-card em, .checkout-notice, .license-row > span,
.license-row button, .modal-content > small { font-size: 12px; }

/* Legal, trust, support and service status */
.policy-page { min-height: 100svh; background: var(--paper); }
.policy-shell { width: min(1160px,100%); display: grid; grid-template-columns: 220px minmax(0,760px); gap: 72px; margin: 0 auto; }
.policy-nav { position: sticky; top: 112px; align-self: start; display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 13px; }
.policy-nav a { border-radius: 6px; padding: 10px 12px; color: #686a64; font-size: 14px; }
.policy-nav a:hover, .policy-nav a[aria-current="page"] { background: #ece7de; color: var(--ink); font-weight: 750; }
.policy-content article > header { border-bottom: 1px solid var(--line); padding-bottom: 26px; }
.policy-content article > header > span { color: var(--wine); font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.policy-content h1 { margin: 16px 0 9px; font: 400 58px/.98 var(--serif); letter-spacing: -2px; }
.policy-content article > header p { margin: 0; color: #76786f; font-size: 14px; }
.policy-content .policy-lede { margin: 32px 0 38px; color: #3e403b; font: 400 23px/1.45 var(--serif); }
.policy-content h2 { margin: 34px 0 10px; font: 600 24px/1.18 var(--serif); }
.policy-content p, .policy-content li { color: #555852; font-size: 15px; line-height: 1.72; }
.policy-content ul { padding-left: 22px; }
.policy-content a { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; }
.policy-choice { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 32px; border: 1px solid var(--line); border-radius: 10px; padding: 19px; background: #fff; }
.policy-choice div { display: grid; gap: 4px; }.policy-choice strong { font-size: 15px; }.policy-choice span { color: #70726b; font-size: 14px; }
.policy-choice button, .support-form button { min-height: 42px; border: 0; border-radius: 7px; padding: 0 16px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; }
.support-form { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin-top: 30px; border: 1px solid var(--line); border-radius: 12px; padding: 24px; background: rgba(255,255,255,.66); }
.support-form label { display: grid; gap: 7px; color: #51534e; font-size: 14px; font-weight: 700; }.support-form label:nth-of-type(n+3), .support-form > p, .support-form output { grid-column: 1/-1; }.support-form label span { color: #85877f; font-size: 12px; font-weight: 500; }
.support-form input, .support-form select, .support-form textarea { width: 100%; border: 1px solid #cbc8c0; border-radius: 7px; padding: 11px 12px; background: #fff; color: var(--ink); font: 400 14px/1.45 var(--sans); }.support-form textarea { resize: vertical; }
.support-form > p { margin: -2px 0 0; color: #777970; font-size: 12px; }.support-form button { justify-self: start; }.support-form output { min-height: 20px; color: #52621e; font-size: 14px; font-weight: 700; }
.status-summary { display: flex; align-items: center; justify-content: space-between; margin: 30px 0 14px; border-radius: 10px; padding: 18px; background: #e6ebcf; }.status-summary strong { font-size: 18px; }.status-summary span { color: #5f6259; font-size: 14px; }
.status-summary.degraded { background: #f3e5cc; }.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.status-grid div { display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #fff; }.status-grid strong, .status-grid span { font-size: 14px; }.status-grid span { color: #64675f; text-align: right; }.policy-note { margin-top: 25px; border-left: 2px solid var(--wine); padding-left: 16px; }
.site-footer { position: relative; z-index: 3; display: grid; grid-template-columns: 1.6fr repeat(3,1fr); gap: 36px; border-top: 1px solid var(--line); padding: 45px max(24px,calc((100vw - 1160px)/2)) 24px; background: #e9ece9; }
.site-footer[hidden] { display: none; }
.site-footer > div p { margin: 14px 0 0; color: #696b64; font-size: 14px; }.site-footer nav { display: grid; align-content: start; gap: 9px; }.site-footer nav strong { margin-bottom: 4px; font-size: 14px; }.site-footer nav a, .site-footer nav button { width: fit-content; border: 0; padding: 0; background: transparent; color: #62645e; font: 400 14px/1.4 var(--sans); text-align: left; }.site-footer nav a:hover, .site-footer nav button:hover { color: var(--wine); }.site-footer > small { grid-column: 1/-1; border-top: 1px solid rgba(23,24,22,.1); padding-top: 18px; color: #777970; font-size: 12px; }
body:has(.studio-view.visible) .site-footer { display: none; }
.consent-banner { position: fixed; z-index: 180; right: 18px; bottom: 18px; width: min(620px,calc(100vw - 36px)); display: grid; grid-template-columns: 1fr auto; gap: 22px; border: 1px solid #ccc7bc; border-radius: 13px; padding: 20px; background: #fffdf9; box-shadow: 0 20px 60px rgba(20,17,18,.22); }.consent-banner[hidden] { display: none; }.consent-banner strong { font-size: 16px; }.consent-banner p { margin: 6px 0; color: #62645e; font-size: 14px; line-height: 1.5; }.consent-banner a { color: var(--wine); font-size: 12px; font-weight: 750; }.consent-banner > div:last-child { display: flex; align-items: center; gap: 7px; }.consent-banner button { min-height: 40px; border: 1px solid var(--ink); border-radius: 7px; padding: 0 13px; background: transparent; color: var(--ink); font-size: 12px; font-weight: 800; }.consent-banner #acceptAnalytics { background: var(--ink); color: #fff; }

/* Book mockup studio */
.mockup-modal { position: fixed; z-index: 105; inset: 0; display: none; place-items: center; padding: 24px; }.mockup-modal.visible { display: grid; }.mockup-card { position: relative; z-index: 1; width: min(1120px,calc(100vw - 42px)); max-height: calc(100svh - 42px); display: grid; grid-template-columns: 1.22fr .78fr; overflow: hidden; border-radius: 18px; background: #f7f3eb; box-shadow: 0 35px 90px rgba(16,12,14,.35); }.mockup-preview-column { min-width: 0; min-height: 600px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 34px; background: #ded8cd; }.mockup-preview-column canvas { width: auto; max-width: 100%; max-height: min(690px,calc(100svh - 145px)); height: auto; border-radius: 12px; box-shadow: 0 18px 45px rgba(25,18,20,.16); }.mockup-preview-column > span { color: #656760; font-size: 12px; }.mockup-controls { overflow-y: auto; padding: 40px 36px 32px; }.mockup-controls h2 { margin: 12px 0 12px; font: 400 43px/.98 var(--serif); }.mockup-controls > p { margin: 0 0 22px; color: #686a63; font-size: 14px; line-height: 1.55; }.mockup-controls fieldset { margin: 0 0 18px; border: 0; padding: 0; }.mockup-controls legend, .mockup-depth { display: block; margin-bottom: 9px; color: #64665f; font-size: 12px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }.mockup-scene-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.mockup-scene-grid button { min-height: 64px; display: flex; align-items: center; gap: 10px; border: 1px solid #d6d1c7; border-radius: 8px; padding: 10px; background: #fff; color: #555750; font-size: 12px; font-weight: 700; }.mockup-scene-grid button.active { border-color: var(--wine); background: #f1e5e9; color: var(--wine); box-shadow: inset 0 0 0 1px var(--wine); }.mockup-scene-grid svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }.mockup-palette { display: flex; gap: 9px; }.mockup-palette button { width: 37px; height: 37px; border: 2px solid #fff; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px #c9c4ba; }.mockup-palette button:nth-child(1) { --swatch:#e7ded1; }.mockup-palette button:nth-child(2) { --swatch:#f5efe5; }.mockup-palette button:nth-child(3) { --swatch:#6e173a; }.mockup-palette button:nth-child(4) { --swatch:#171a19; }.mockup-palette button.active { box-shadow: 0 0 0 2px var(--wine); }.mockup-depth input { width: 100%; display: block; margin-top: 9px; }.mockup-depth output { float: right; color: var(--ink); letter-spacing: 0; }.mockup-controls .download-cover-button { margin-top: 20px; }.mockup-controls > small { display: block; margin-top: 13px; color: #7b7d75; font-size: 12px; line-height: 1.45; }.mockup-studio-button { border-style: solid; }
.mockup-format-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.mockup-format-grid button { min-height: 48px; display: grid; place-items: center; align-content: center; gap: 1px; border: 1px solid #d6d1c7; border-radius: 8px; padding: 7px; background: #fff; color: #555750; font: 700 12px var(--sans); }
.mockup-format-grid button small { color: #85867f; font-size: 12px; font-weight: 600; }
.mockup-format-grid button.active { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: inset 0 -2px var(--acid); }
.mockup-format-grid button.active small { color: #d8d9d3; }
.mockup-range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.mockup-preview-column canvas { background-color: transparent; }
.mockup-preview-column canvas.transparent-background { background-color: #f8f8f6; background-image: linear-gradient(45deg,#deded9 25%,transparent 25%),linear-gradient(-45deg,#deded9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#deded9 75%),linear-gradient(-45deg,transparent 75%,#deded9 75%); background-position: 0 0,0 10px,10px -10px,-10px 0; background-size: 20px 20px; }
.mockup-background-controls { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.82fr); gap: 8px; }
.mockup-color-control, .mockup-transparent-control { min-height: 48px; display: flex; align-items: center; gap: 9px; border: 1px solid #d6d1c7; border-radius: 8px; padding: 7px 10px; background: #fff; color: #555750; font-size: 14px; font-weight: 700; }
.mockup-color-control.active, .mockup-transparent-control.active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.mockup-color-control > input[type="color"] { flex: 0 0 auto; width: 30px; height: 30px; overflow: hidden; border: 0; border-radius: 50%; padding: 0; background: transparent; cursor: pointer; }
.mockup-color-control > input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.mockup-color-control > input[type="color"]::-webkit-color-swatch { border: 1px solid #aaa69d; border-radius: 50%; }
.mockup-color-control > span { white-space: nowrap; }
.mockup-color-control > input[type="text"] { min-width: 0; width: 72px; height: 30px; margin-left: auto; border: 0; border-radius: 4px; padding: 0 5px; background: #f2f0eb; color: #5f615b; font: 700 12px var(--sans); text-transform: uppercase; }
.mockup-color-control > input[type="text"]:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.mockup-color-control > input[type="text"][aria-invalid="true"] { outline: 2px solid #a23d3d; }
.mockup-transparent-control { justify-content: center; }
.mockup-transparent-control > span { width: 25px; height: 25px; border: 1px solid #aaa69d; border-radius: 4px; background-color: #fff; background-image: linear-gradient(45deg,#d8d8d3 25%,transparent 25%),linear-gradient(-45deg,#d8d8d3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d8d8d3 75%),linear-gradient(-45deg,transparent 75%,#d8d8d3 75%); background-position: 0 0,0 6px,6px -6px,-6px 0; background-size: 12px 12px; }

@media (max-width: 1150px) {
  .dashboard-project-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .landing-view { grid-template-columns: 56% 44%; padding-left: 4vw; padding-right: 4vw; }
  .workspace-route .templates-page-toolbar { grid-template-columns: 1fr 1fr; }
  .workspace-route .templates-page-search { grid-column: 1/-1; }
  .cover-title { font-size: 36px; }
  .studio-layout { grid-template-columns: 245px minmax(390px,1fr) 270px; }
  .studio-steps > i { width: 18px; }
  .saved-state { display: none; }
  .main-cover { width: min(31vw,280px); }
}
@media (max-width: 900px) {
  .workspace-nav { left: 0; right: 0; top: 88px; bottom: auto; width: auto; height: 54px; display: block; overflow-x: auto; overflow-y: hidden; border-width: 0 0 1px; border-radius: 0; padding: 6px 24px; background: rgba(244,245,243,.96); box-shadow: none; scrollbar-width: none; }.workspace-nav::-webkit-scrollbar { display: none; }.workspace-nav-heading, .workspace-account { display: none; }.workspace-nav nav { width: max-content; display: flex; gap: 4px; margin: 0; }.workspace-nav nav a { min-height: 41px; padding: 0 13px; white-space: nowrap; }
  .workspace-route .workspace-view { padding: 168px 24px 70px; }
  .dashboard-project-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.dashboard-featured-project { grid-template-columns: 150px minmax(0,1fr); }.dashboard-featured-preview { grid-row: 1/3; width: 150px; }.dashboard-featured-project > button { grid-column: 2; justify-self: start; }.settings-layout { grid-template-columns: 1fr; }
  .templates-page, .workspace-route .templates-page { padding: 168px 24px 70px; }.templates-page-toolbar { grid-template-columns: 1fr 1fr; }.templates-page-search { grid-column: 1/-1; }
  .create-route .landing-view, .workspace-route.create-route .landing-view { padding: 168px max(24px,calc((100vw - 650px)/2)) 70px; }
  .projects-view { padding-right: 24px; padding-left: 24px; }.projects-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }.project-card-copy { min-height: 165px; padding: 14px 14px 11px; }.project-open-button { width: calc(100% - 28px); margin-right: 14px; margin-left: 14px; }
  .policy-shell { grid-template-columns: 1fr; gap: 30px; }.policy-nav { position: static; display: flex; overflow-x: auto; padding: 10px 0; }.policy-nav a { flex: 0 0 auto; }.site-footer { grid-template-columns: 1.5fr repeat(3,1fr); gap: 24px; }
  .mockup-card { grid-template-columns: 1fr; overflow-y: auto; }.mockup-preview-column { min-height: 430px; padding: 24px; }.mockup-preview-column canvas { max-width: 560px; }.mockup-controls { overflow: visible; padding: 34px 30px; }
  .site-header { grid-template-columns: 1fr 1fr; padding: 0 24px; }.top-nav { display: none; }
  .landing-view { display: block; padding: 120px 24px 80px; }.hero-copy { max-width: 680px; margin: 0 auto; }.home-template-heading, .home-template-gallery { max-width: 680px; margin-right: auto; margin-left: auto; }.home-template-heading { margin-top: 55px; margin-bottom: 14px; }.home-template-gallery { margin-top: 0; margin-bottom: 45px; }.home-template-controls { width: 100%; }.home-template-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .home-proof, .home-process, .home-journal, .home-final-cta { max-width: 680px; margin-left: auto; margin-right: auto; }.home-proof { grid-template-columns: 1fr 1fr; }.home-proof > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }.home-proof > div:nth-child(4) { border-top: 1px solid var(--line); }.home-process > header { align-items: flex-start; flex-direction: column; }.home-process > div { grid-template-columns: 1fr; }.home-process article { min-height: 230px; }.home-journal > div { grid-template-columns: 1fr; }.home-journal article, .home-journal article + article { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 0; }.home-journal article:last-child { border-bottom: 0; }
  .marketing-page { padding: 115px 24px 70px; }.pricing-page-grid, .blog-grid { grid-template-columns: 1fr; }.pricing-explainer { grid-template-columns: 1fr; gap: 30px; padding: 36px; }.pricing-faq { grid-template-columns: 1fr; gap: 15px; }.blog-featured { grid-template-columns: 1fr; }.blog-featured-art { min-height: 340px; }.blog-newsletter { grid-template-columns: 1fr; align-items: start; }
  .blog-article-body { grid-template-columns: 1fr; gap: 30px; }.blog-article-body aside { position: static; display: grid; grid-template-columns: repeat(4,1fr); border-left: 0; border-top: 2px solid var(--wine); padding: 15px 0 0; }.blog-article-body aside strong { grid-column: 1/-1; }.type-scale.large { font-size: 72px; }.rights-article-hero > div { gap: 12px; }.rights-article-hero span { min-width: 125px; }
  .studio-header { grid-template-columns: 1fr auto; }.studio-steps { display: none; }.studio-actions #previewButton { display: none; }
  .studio-layout { height: auto; min-height: calc(100svh - 72px); grid-template-columns: 220px 1fr; grid-template-areas: "directions canvas" "controls controls"; overflow: visible; }.directions-panel { grid-area: directions; max-height: calc(100svh - 72px); }.canvas-area { grid-area: canvas; min-height: calc(100svh - 72px); }.controls-panel { grid-area: controls; display: block; border: 0; border-top: 1px solid var(--line); }.copyright-note { padding-top: 25px; }.main-cover, .back-cover-editor { width: min(44vw,330px); }
  .editing-tools button { width: 24px; }.canvas-toolbar { padding: 0 10px; }
  .artwork-workshop { height: min(760px,calc(100svh - 24px)); }.artwork-workshop-body { grid-template-columns: 44% 56%; }.artwork-stage-column { padding: 20px 12px; }.artwork-edit-stage { width: min(250px,84%); }.artwork-controls { padding: 22px; }
  .template-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .template-toolbar { grid-template-columns: minmax(190px,1.4fr) repeat(2,minmax(120px,1fr)); }
  .template-toolbar > div { align-items: flex-start; }
}
@media (max-width: 650px) {
  :root { --template-cover-title-size: clamp(22px,9cqi,36px); }
  .export-option-actions { grid-template-columns: 1fr; gap: 0; }
  .workspace-nav { top: 70px; padding: 6px 12px; }.workspace-route .workspace-view { padding: 145px 17px 55px; }
  .dashboard-header, .billing-header, .templates-page-header { align-items: flex-start; flex-direction: column; gap: 18px; }.dashboard-header h1, .templates-page-header h1, .settings-header h1, .billing-header h1 { font-size: 45px; letter-spacing: -1.5px; }.dashboard-header .workspace-primary-action, .billing-header .workspace-primary-action, .templates-page-header .workspace-primary-action { width: 100%; }.dashboard-section, .dashboard-continue { margin-top: 30px; }.dashboard-section-heading { align-items: flex-start; }.dashboard-section-heading h2 { font-size: 28px; }.dashboard-featured-project { min-height: 0; grid-template-columns: 100px minmax(0,1fr); gap: 15px; padding: 12px; }.dashboard-featured-preview { width: 100px; }.dashboard-featured-copy h3 { font-size: 26px; }.dashboard-featured-copy p { font-size: 13px; }.dashboard-featured-project > button { min-height: 39px; padding: 0 13px; }.dashboard-project-grid { grid-template-columns: 1fr; gap: 12px; }.dashboard-template-grid, .templates-page-grid { grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr)); gap: 14px; }.dashboard-template-grid .home-template-cover > strong, .templates-page-grid .home-template-cover > strong { font-size: var(--template-cover-title-size); }
  .templates-page, .workspace-route .templates-page { padding: 145px 17px 55px; }.templates-page-toolbar { grid-template-columns: 1fr; }.templates-page-search { grid-column: auto; }.settings-card, .billing-card { padding: 20px 17px; }.settings-row { align-items: flex-start; flex-direction: column; gap: 5px; }.billing-summary { grid-template-columns: 1fr; }.billing-summary > div { min-height: 86px; }.billing-purchase { grid-template-columns: 1fr; gap: 10px; }.billing-purchase a { justify-self: start; }
  .create-route .landing-view, .workspace-route.create-route .landing-view { padding: 145px 17px 55px; }
  .projects-view { padding: 100px 17px 55px; }.workspace-route .projects-view { padding-top: 145px; }.projects-page-header { align-items: flex-start; flex-direction: column; gap: 16px; padding-bottom: 21px; }.projects-page-header h1 { font-size: 45px; letter-spacing: -1.5px; }.projects-page-header p { margin-top: 9px; font-size: 14px; }.projects-new-button { width: 100%; min-height: 42px; padding: 0 14px; }.projects-toolbar { grid-template-columns: 1fr 1fr; }.projects-search { grid-column: 1/-1; }.projects-toolbar output { min-width: 0; align-self: center; padding: 0; text-align: left; }.projects-grid { grid-template-columns: 1fr; gap: 12px; }.project-card { display: grid; grid-template-columns: 92px minmax(0,1fr); grid-template-rows: auto auto auto; padding: 10px; }.project-card:hover { transform: none; }.project-card-preview { grid-row: 1/3; width: 92px; align-self: stretch; border-radius: 4px; }.project-card-preview > span { font-size: 15px; }.project-card-copy { min-height: 0; padding: 4px 5px 9px 14px; }.project-card-copy h2 { font-size: 21px; }.project-card-copy p { min-height: 0; margin: 5px 0 9px; font-size: 13px; }.project-card-tags { gap: 4px; }.project-card-tags span { padding: 4px 6px; }.project-card-copy time { margin-top: 8px; }.project-open-button { width: auto; height: 37px; margin: 0 5px 0 14px; }.project-card-manage { grid-column: 2; margin: 5px 5px 0 14px; }.projects-state { min-height: 270px; padding: 24px 16px; }.projects-auth-gate { min-height: 390px; }
  .policy-content h1 { font-size: 45px; }.policy-content .policy-lede { font-size: 20px; }.support-form { grid-template-columns: 1fr; padding: 18px; }.support-form label { grid-column: 1/-1; }.status-grid { grid-template-columns: 1fr; }.status-summary { align-items: flex-start; flex-direction: column; gap: 5px; }.site-footer { grid-template-columns: 1fr 1fr; }.site-footer > div { grid-column: 1/-1; }.site-footer > small { grid-column: 1/-1; }.consent-banner { grid-template-columns: 1fr; }.consent-banner > div:last-child { justify-content: stretch; }.consent-banner button { flex: 1; }
  .mockup-modal { padding: 8px; }.mockup-card { width: calc(100vw - 16px); max-height: calc(100svh - 16px); border-radius: 12px; }.mockup-preview-column { min-height: 300px; padding: 16px; }.mockup-preview-column canvas { max-height: 270px; }.mockup-preview-column > span { text-align: center; }.mockup-controls { padding: 28px 18px 30px; }.mockup-controls h2 { font-size: 35px; }.mockup-scene-grid { grid-template-columns: 1fr 1fr; }.mockup-scene-grid button { min-height: 62px; padding: 8px; }.mockup-range-grid { gap: 12px; }
  .mockup-background-controls { grid-template-columns: 1fr; }
  .site-header { height: 70px; padding: 0 16px; }.brand-primary .brand-logo { display: none; }.brand-primary .brand-mobile-mark { display: block; }.header-actions { gap: 8px; }.header-actions .text-button { display: block; padding: 8px 4px; }.header-actions .text-button[hidden], .header-projects-link, .account-menu[hidden] { display: none; }.workspace-route #headerCreate { display: none; }.pill-button { padding: 11px 13px; }.account-menu-trigger b { display: none; }.account-menu-trigger { padding-right: 5px; }.account-menu-popover { position: fixed; top: 62px; right: 12px; }
  .landing-view { padding: 100px 17px 70px; }
  .hero-copy h1 { font-size: 55px; letter-spacing: -.028em; }
  .hero-subcopy { font-size: 14px; }
  .idea-card { padding: 20px 17px; }
  .two-fields { grid-template-columns: 1fr; }
  .home-template-heading { margin-top: 35px; margin-bottom: 14px; font-size: 32px; }
  .home-template-gallery { margin: 0 0 42px; padding: 18px 13px; }
  .home-template-controls { grid-template-columns: 1fr; }
  .home-template-controls select { height: 44px; font-size: 16px; }
  .home-template-grid { grid-template-columns: 1fr; gap: 14px; }
  .home-template-cover > strong { font-size: var(--template-cover-title-size); }
  .home-template-card > div:last-child strong { font-size: 15px; }
  .home-template-gallery footer { gap: 8px; line-height: 1.35; }
  .home-proof { margin-bottom: 55px; }.home-proof > div { padding: 18px 12px; }.home-proof strong { font-size: 29px; }.home-process, .home-journal { margin-bottom: 60px; }.home-process h2, .home-journal h2, .home-final-cta h2 { font-size: 38px; }.home-process article { min-height: 0; padding: 20px; }.home-process h3 { margin-top: 0; }.home-journal > header { align-items: flex-start; flex-direction: column; }.home-final-cta { align-items: flex-start; flex-direction: column; padding: 28px 20px; }.home-final-cta button { width: 100%; }
  .marketing-page { padding: 96px 17px 55px; }.marketing-page-header { margin-bottom: 32px; }.marketing-page-header > span { margin-top: 28px; }.marketing-page-header h1 { font-size: 52px; letter-spacing: -2px; }.marketing-page-header p { font-size: 14px; }.pricing-section.pricing-page { margin: 0; padding: 96px 17px 55px; }.pricing-page-grid article { padding: 21px; }.pricing-explainer { margin: 45px auto; padding: 25px 20px; }.pricing-explainer h2, .comparison-section h2, .pricing-faq h2 { font-size: 31px; }.pricing-steps article { grid-template-columns: 30px 88px 1fr; }.comparison-table { overflow-x: auto; }.comparison-row { min-width: 620px; }.comparison-row > * { padding: 10px 12px; }.blog-featured-art { min-height: 280px; }.blog-featured article { padding: 28px 22px; }.blog-featured h2 { font-size: 35px; }.blog-grid { margin-bottom: 48px; }.blog-card-art { min-height: 190px; }.blog-newsletter form { grid-template-columns: 1fr; }.blog-newsletter button { height: 43px; }
  .blog-article > header > span { margin-top: 30px; }.blog-article > header h1 { font-size: 52px; letter-spacing: -2px; }.blog-article > header p { font-size: 14px; }.blog-article-hero { min-height: 270px; border-radius: 11px; }.print-article-hero > div { width: 90%; height: 190px; grid-template-columns: 1fr 10px 38px 10px 1fr; }.print-article-hero span { font-size: 16px; }.type-article-hero { grid-template-columns: 1fr; gap: 14px; padding: 28px 20px; }.type-scale.large { font-size: 52px; }.type-scale.medium { font-size: 30px; }.type-scale.small { font-size: 16px; }.rights-article-hero > div { flex-direction: column; gap: 8px; }.rights-article-hero span { width: 190px; height: 50px; }.rights-article-hero b { transform: rotate(90deg); }.blog-article-body { padding-top: 35px; }.blog-article-body aside { grid-template-columns: 1fr 1fr; }.blog-article-body > div > p { font-size: 16px; }.blog-article-body .article-lede { font-size: 21px; }.blog-article-body h2 { margin-top: 42px; font-size: 32px; }
  .studio-header { padding: 0 12px; }.studio-brand-wrap .project-divider { display: none; }.project-name { max-width: 34vw; }.project-rename input { width: 34vw; }.studio-actions { gap: 6px; }.studio-actions .studio-projects-button { display: none; }.dark-button, .studio-projects-button { padding: 0 10px; }
  .studio-layout { display: flex; flex-direction: column; }.directions-panel { order: 2; max-height: none; border: 0; padding: 20px 16px; }.direction-grid { grid-template-columns: repeat(4,150px); overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }.direction-grid::-webkit-scrollbar { display:none; }.direction-card { display: block; border: 0; padding: 0; background: transparent; }.direction-card.selected { background: transparent; }.direction-card .mini-cover { width: 150px; }.direction-card > span { margin-top: 8px; }.direction-card.selected > i { display: block; }.canvas-area { order: 1; position: sticky; top: 0; z-index: 12; flex: 0 0 360px; min-height: 360px; max-height: 360px; border-bottom: 1px solid var(--line); box-shadow: 0 8px 22px rgba(25,20,19,.14); }.canvas-toolbar { flex: 0 0 82px; height: 82px; grid-template-columns: 1fr auto; grid-template-areas: "tools zoom" "views views"; gap: 5px; padding: 6px 10px; }.editing-tools { grid-area: tools; }.zoom-controls { grid-area: zoom; }.view-toggle { grid-area: views; width: 100%; display: grid; grid-template-columns: repeat(5,1fr); }.view-toggle button { padding: 0 3px; font-size: 12px; }.main-cover, .back-cover-editor { width: min(42vw,164px); }.spine-cover-editor { width: min(88vw,520px); }.controls-panel { order: 3; display: block; }.control-section { padding: 22px 18px; }.copyright-note { padding: 18px; }.wrap-preview { width: 93vw; height: min(60vw,268px); }.wrap-spine { flex-basis: 23px; }.phone-preview { zoom: .52; }
  .view-select { grid-area: views; width: 100%; }
  .panel-mode-tabs { margin-top: 14px; }.layers-list { max-width: 100%; }.property-row { gap: 20px; }.selection-box .handle { width: 10px; height: 10px; }.selection-box .tl { left:-5px; top:-5px; }.selection-box .tr { right:-5px; top:-5px; }.selection-box .bl { left:-5px; bottom:-5px; }.selection-box .br { right:-5px; bottom:-5px; }
  .modal-card { grid-template-columns: 1fr; max-height: 92svh; overflow-y: auto; }.modal-art { min-height: 260px; }.export-preview-shell { min-height: 260px; padding: 22px; }.export-preview-shell > img { width: 120px; }.modal-book { width: 120px; }.modal-content { overflow: visible; padding: 32px 25px; }.modal-content h2 { font-size: 34px; }.featured-book { width: 40%; }.ghost-book { display:none; }.shelf-books { top: 20%; }.preview-overlay > p { font-size: 22px; }
  .purchase-card { width: calc(100vw - 20px); max-height: calc(100svh - 20px); padding: 28px 18px 22px; border-radius: 12px; }.purchase-card h2 { font-size: 34px; }.purchase-card .product-card { padding: 11px; }
  .library-panel { padding: 24px 18px 18px; }.library-panel h2 { font-size: 32px; }
  .auth-card { padding: 34px 24px 26px; }.auth-card h2 { font-size: 34px; }
  .artwork-workshop { height: calc(100svh - 16px); width: calc(100vw - 16px); overflow-y: auto; }.artwork-workshop-header { flex: 0 0 auto; align-items: flex-start; padding: 18px; }.artwork-workshop-header h2 { max-width: 240px; font-size: 23px; }.provider-state { display: none; }.artwork-header-actions { gap: 6px; }.artwork-workshop-body { flex: 0 0 auto; min-height: auto; display: block; overflow: visible; }.artwork-stage-column { min-height: 440px; }.artwork-edit-stage { width: 235px; }.artwork-controls { overflow: visible; padding: 22px 18px; }.artwork-choice-grid { grid-template-columns: repeat(2,1fr); }.artwork-choice-grid.subject-grid { grid-template-columns: repeat(3,1fr); }.artwork-swap-actions, .artwork-action-row { grid-template-columns: 1fr; }.artwork-versions { grid-template-columns: repeat(4,1fr); }.artwork-workshop > footer { flex: 0 0 auto; min-height: 45px; padding: 8px 18px; }
  .template-library-panel { width: 100vw; height: 100svh; border-radius: 0; }
  .template-library-header { padding: 19px 17px 16px; }.template-library-header h2 { max-width: 280px; font-size: 25px; }.template-library-header p { max-width: 290px; line-height: 1.45; }
  .template-toolbar { grid-template-columns: 1fr 118px; gap: 8px; padding: 11px 17px; }.template-toolbar > div { grid-column: 1/-1; flex-direction: row; align-items: center; justify-content: space-between; padding: 0; }
  .template-grid { grid-template-columns: 1fr; gap: 16px; padding: 16px 17px 22px; }.template-cover strong { font-size: var(--template-cover-title-size); }.template-card-copy { min-height: 112px; }
}

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

/* Shared CTA system. Option cards and compact editor utilities keep their own controls. */
:is(
  .pill-button, .generate-button, .home-final-cta button,
  .workspace-auth-gate button, .workspace-primary-action,
  .dashboard-featured-project > button, .projects-new-button,
  .projects-state > button, .projects-auth-gate > button,
  .settings-card-actions button, .auth-send, .auth-library-button,
  .article-cta, .support-form button, .policy-choice button,
  .dark-button, .download-cover-button, .magic-button, .blog-newsletter button
), #acceptAnalytics {
  min-height: var(--button-height);
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--ink);
  border-radius: var(--button-radius);
  padding: 0 16px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}

:is(
  .auth-google,
  .project-open-button, .billing-purchase a, .new-project-button,
  .library-card > button, .download-print-button, .refine-button,
  .browse-editor-templates, .studio-projects-button, .outline-button,
  .pricing-page-grid a
), #rejectAnalytics {
  min-height: var(--button-height);
  height: auto;
  border: 1px solid var(--ink);
  border-radius: var(--button-radius);
  padding: 0 16px;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}

.pricing-page-grid article.featured a {
  border: 1px solid #fff;
  background: #fff;
  color: var(--ink);
}

:is(
  .text-button, .home-template-gallery footer a,
  .format-showcase header a, .home-journal header a,
  .dashboard-section-heading a, .templates-page-meta button,
  .settings-row button, .settings-row a, .billing-card-heading a,
  .all-projects-link, .auth-signout, .license-row button
) {
  min-height: var(--button-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--button-radius);
  padding: 0 4px;
  background: transparent;
  color: var(--wine);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.all-projects-link { width: 100%; justify-content: flex-start; }
.generate-button, .home-final-cta button { min-height: var(--button-height-large); padding-inline: 20px; font-size: 15px; }

:is(
  .pill-button, .generate-button, .home-final-cta button,
  .workspace-auth-gate button, .workspace-primary-action,
  .dashboard-featured-project > button, .projects-new-button,
  .projects-state > button, .projects-auth-gate > button,
  .settings-card-actions button, .auth-send, .auth-library-button,
  .article-cta, .support-form button, .policy-choice button,
  .dark-button, .download-cover-button, .magic-button, .blog-newsletter button
):hover:not(:disabled), #acceptAnalytics:hover:not(:disabled) {
  border-color: #30312d;
  background: #30312d;
  color: #fff;
  transform: none;
}

:is(
  .auth-google,
  .project-open-button, .billing-purchase a, .new-project-button,
  .library-card > button, .download-print-button, .refine-button,
  .browse-editor-templates, .studio-projects-button, .outline-button,
  .pricing-page-grid a
):hover:not(:disabled), #rejectAnalytics:hover:not(:disabled) {
  border-color: var(--ink);
  background: #f0ece4;
  color: var(--ink);
  transform: none;
}

button:focus-visible, a[href]:focus-visible {
  outline: 3px solid var(--button-focus);
  outline-offset: 2px;
}

button:disabled, [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .52;
  transform: none;
}

@media (max-width: 650px) {
  :is(.generate-button, .home-final-cta button, .workspace-primary-action, .projects-new-button) { width: 100%; }
}

/* One synchronized cover shown across each export format. */
.format-showcase {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto 90px;
  border-radius: 18px;
  padding: 40px;
  background: linear-gradient(145deg, var(--ink), var(--ink-hover));
  color: var(--on-dark);
}
.format-showcase > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.format-showcase > header > div { max-width: 760px; }
.format-showcase h2 {
  max-width: none;
  margin: 0;
  color: var(--on-dark);
  font: 400 clamp(42px, 4vw, 56px)/.96 var(--serif);
  letter-spacing: -1.4px;
  text-wrap: balance;
}
.format-showcase header p {
  max-width: 650px;
  margin: 13px 0 0;
  color: var(--on-dark-muted);
  font-size: 15px;
  line-height: 1.55;
}
.format-showcase header a {
  flex: 0 0 auto;
  min-height: var(--button-height);
  border: 1px solid rgba(255,255,255,.34);
  padding: 0 14px;
  color: var(--on-dark);
  white-space: nowrap;
}
.format-showcase header a:hover { border-color: var(--on-dark); background: var(--on-dark); color: var(--ink); }
.format-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  margin-top: 30px;
}
.format-showcase-grid article { min-width: 0; }
.format-showcase-grid article > strong,
.format-showcase-grid article > span { display: block; }
.format-showcase-grid article > strong { margin-top: 14px; color: var(--on-dark); font-size: 15px; }
.format-showcase-grid article > span { margin-top: 5px; color: var(--on-dark-muted); font-size: 13px; line-height: 1.4; }
.format-visual {
  position: relative;
  height: 230px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  padding: 22px;
  background: radial-gradient(circle at 50% 35%, #454842, #292b28 70%);
}
.showcase-cover,
.showcase-front,
.showcase-back,
.showcase-audio-cover,
.showcase-book-mockup,
.showcase-release-card {
  position: relative;
  overflow: hidden;
  background: #101720;
}
.showcase-cover > img,
.showcase-front > img,
.showcase-back > img,
.showcase-audio-cover > img,
.showcase-book-mockup > img,
.showcase-release-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.showcase-cover::after,
.showcase-front::after,
.showcase-audio-cover::after,
.showcase-book-mockup::after,
.showcase-release-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,9,16,.74), rgba(4,9,16,.04) 48%, rgba(4,9,16,.76));
}
.showcase-cover-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 9px 10px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.48);
}
.showcase-cover-copy strong {
  font: 600 17px/.9 var(--serif);
  letter-spacing: -.35px;
  text-wrap: balance;
}
.showcase-cover-copy span {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.ebook-visual { display: grid; place-items: center; }
.showcase-cover { width: 112px; height: 168px; border-radius: 4px; box-shadow: 0 18px 32px rgba(0,0,0,.38); }
.ebook-visual .showcase-cover > img { width: 100%; height: 100%; aspect-ratio: auto; }
.print-visual { display: grid; grid-template-columns: 1fr; place-items: center; padding: 22px; }
.showcase-wrap {
  width: 100%;
  max-width: 240px;
  height: 150px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 14px minmax(0,1fr);
  filter: drop-shadow(0 17px 22px rgba(0,0,0,.32));
}
.showcase-back,
.showcase-front { min-width: 0; height: 100%; }
.showcase-back > img,
.showcase-front > img { width: 100%; height: 100%; }
.showcase-back > img { opacity: .48; object-position: 20% center; transform: scale(1.08); }
.showcase-back::after { content: ""; position: absolute; inset: 0; background: rgba(6,13,21,.42); }
.showcase-back-lines { position: absolute; z-index: 2; left: 13px; right: 13px; top: 26px; display: grid; gap: 6px; }
.showcase-back-lines i { height: 2px; border-radius: 2px; background: rgba(255,255,255,.66); }
.showcase-back-lines i:nth-child(2) { width: 88%; }
.showcase-back-lines i:nth-child(3) { width: 94%; }
.showcase-back-lines i:nth-child(4) { width: 66%; }
.showcase-back > b {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  width: 25px;
  height: 19px;
  border: 3px solid #fff;
  background: repeating-linear-gradient(90deg, #131313 0 1px, #fff 1px 3px);
}
.showcase-spine { position: relative; background: linear-gradient(90deg, #121923, #273441 50%, #101720); }
.showcase-spine span { position: absolute; left: 6px; top: 16%; bottom: 16%; width: 2px; border-radius: 2px; background: rgba(255,255,255,.62); }
.showcase-front .showcase-cover-copy { padding: 11px 7px 8px; }
.showcase-front .showcase-cover-copy strong { font-size: 15px; }
.showcase-front .showcase-cover-copy span { font-size: 12px; letter-spacing: .4px; }
.audio-visual { display: grid; place-items: center; }
.showcase-audio-cover { width: 158px; height: 158px; border-radius: 5px; box-shadow: 0 17px 30px rgba(0,0,0,.34); }
.audio-visual .showcase-audio-cover > img { width: 100%; height: 100%; object-position: center 66%; }
.showcase-audio-cover .showcase-cover-copy { padding: 15px 13px 11px; }
.showcase-audio-cover .showcase-cover-copy strong { max-width: 115px; font-size: 21px; }
.social-visual { display: grid; place-items: center; }
.showcase-launch { position: relative; width: 196px; height: 170px; }
.showcase-release-card {
  position: absolute;
  left: 7px;
  top: 17px;
  width: 108px;
  height: 140px;
  border-radius: 5px;
  box-shadow: 0 13px 24px rgba(0,0,0,.28);
  transform: rotate(-5deg);
}
.showcase-release-card > img { width: 100%; height: 100%; object-position: center 65%; }
.showcase-release-card > span {
  position: absolute;
  z-index: 2;
  left: 9px;
  bottom: 9px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.showcase-book-mockup {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 91px;
  height: 148px;
  border-left: 7px solid #111924;
  border-radius: 3px 5px 5px 3px;
  box-shadow: 13px 19px 26px rgba(0,0,0,.42);
  transform: perspective(400px) rotateY(-8deg) rotate(2deg);
}
.showcase-book-mockup > img { width: 100%; height: 100%; object-position: center; }
.showcase-book-mockup .showcase-cover-copy { padding: 11px 6px 8px; }
.showcase-book-mockup .showcase-cover-copy strong { font-size: 14px; }
.showcase-book-mockup .showcase-cover-copy span { font-size: 12px; letter-spacing: .25px; }

@media (max-width: 900px) {
  .format-showcase { max-width: 680px; margin-right: auto; margin-left: auto; padding: 36px; }
  .format-showcase-grid { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
}

@media (max-width: 650px) {
  .format-showcase { margin-bottom: 60px; padding: 28px 18px; }
  .format-showcase > header { align-items: flex-start; flex-direction: column; }
  .format-showcase h2 { font-size: 38px; }
  .format-showcase header a { width: 100%; }
  .format-showcase-grid { grid-template-columns: 1fr; gap: 24px; }
  .format-visual { height: 240px; }
}

/* Semantic colour roles shared by marketing, workspace, and editor chrome. */
input::placeholder, textarea::placeholder { color: var(--muted-light); opacity: 1; }

:is(
  .top-nav, .header-projects-link, .field-label,
  .workspace-nav nav a, .templates-page-toolbar label,
  .settings-card > label, .projects-toolbar label,
  .directions-panel > p strong, .panel-mode-content > p strong,
  .remix-button, .copyright-note strong
) { color: var(--ink-soft); }

:is(
  .eyebrow, .hero-subcopy, .genre-insight,
  .home-process > header p, .home-process article p,
  .home-journal article p, .home-final-cta p,
  .workspace-auth-gate p, .dashboard-header p,
  .templates-page-header p, .settings-header p, .billing-header p,
  .dashboard-featured-copy p, .dashboard-start button span,
  .templates-page-empty, .billing-purchase p,
  .projects-page-header p, .project-card-copy p,
  .projects-state > span, .projects-auth-gate p,
  .directions-panel > p, .panel-mode-content > p,
  .copyright-note, .print-note
) { color: var(--muted-text); }

:is(
  .optional-field span, .stage-caption,
  .home-proof span,
  .workspace-account small, .dashboard-featured-copy time,
  .projects-toolbar output, .project-card-copy time,
  .saved-state, .layer-main small, .layer-status,
  .layer-transform > span, .rendering-status,
  .bleed-label, .section-number, .type-heading > div > span,
  .title-fit-note, .range-label output,
  .two-control-fields label, .print-field,
  .print-section > summary > div > span,
  .spine-result span, .sheet-result span,
  .preflight-heading, .print-note
) { color: var(--muted-light); }

:is(
  .account-menu-popover, .home-template-card,
  .direction-card, .layers-list,
  .layer-transform button,
  .browse-editor-templates, .layer-properties textarea,
  .text-shadow-presets button, .alignment-buttons button,
  .font-select-wrap, .title-layout-grid button,
  .two-control-fields input, .two-control-fields select,
  .print-field select, .print-field textarea, .print-field input,
  .settings-card input, .projects-toolbar input, .projects-toolbar select,
  .templates-page-toolbar input, .templates-page-toolbar select,
  .project-card-rename input
) { background-color: var(--surface); }

:is(
  .idea-card input, .idea-card select,
  .templates-page-toolbar input, .templates-page-toolbar select,
  .settings-card input, .projects-toolbar input, .projects-toolbar select,
  .project-card-rename input, .layer-properties textarea,
  .text-shadow-presets button, .alignment-buttons button,
  .font-select-wrap, .title-layout-grid button,
  .two-control-fields input, .two-control-fields select,
  .print-field select, .print-field textarea, .print-field input,
  .layer-transform button
) { border-color: var(--border-strong); }

.account-menu-popover button:hover,
.account-menu-popover > a[role="menuitem"]:hover,
.workspace-nav nav a:hover,
.project-card-rename button,
.panel-mode-tabs,
.spine-result { background-color: var(--surface-soft); }

.studio-view, .canvas-area { background-color: var(--paper-deep); }
.studio-header, .directions-panel, .controls-panel { background-color: var(--card); }
.canvas-toolbar { background-color: var(--paper); }

.direction-card.selected,
.layer-row:has(.layer-main.active) { background-color: var(--surface-soft); }
.title-layout-grid button.active { background-color: var(--ink); }

.direction-card > i,
.settings-card-actions output,
.thumbnail-score button,
.preflight-heading b { color: var(--success); }
.ready-badge { background: var(--success-soft); color: var(--success); }

.project-card-manage .project-delete-button,
.ready-badge.has-errors { color: var(--danger); }
.project-card-manage .project-delete-button[data-confirming="true"],
.ready-badge.has-errors,
.preflight-list li.error { background: var(--danger-soft); }

:is(
  .idea-card input, .idea-card select,
  .templates-page-toolbar input, .templates-page-toolbar select,
  .settings-card input, .projects-toolbar input, .projects-toolbar select,
  .project-card-rename input, .layer-properties textarea,
  .two-control-fields input, .two-control-fields select,
  .print-field select, .print-field textarea, .print-field input
):focus {
  border-color: var(--wine);
  box-shadow: 0 0 0 3px var(--field-focus);
}

:is(
  .text-shadow-presets button.active,
  .artwork-choice-grid button.active,
  .artwork-overlay-presets button.active,
  .mockup-scene-grid button.active
) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-dark);
  box-shadow: inset 0 -2px var(--acid);
}
.artwork-version.active { border-color: var(--wine); box-shadow: 0 0 0 1px var(--wine); }
.artwork-version.active::before { background: var(--wine); color: var(--on-dark); }

.preflight-list li.warning { background: var(--warning-soft); }
.preflight-list li.warning > span { color: var(--warning); }

.pill-button:hover { background: var(--ink-hover); }
:is(
  .pill-button, .generate-button, .home-final-cta button,
  .workspace-auth-gate button, .workspace-primary-action,
  .dashboard-featured-project > button, .projects-new-button,
  .projects-state > button, .projects-auth-gate > button,
  .settings-card-actions button, .auth-send, .auth-library-button,
  .article-cta, .support-form button, .policy-choice button,
  .dark-button, .download-cover-button, .magic-button, .blog-newsletter button
):hover:not(:disabled), #acceptAnalytics:hover:not(:disabled) {
  border-color: var(--ink-hover);
  background: var(--ink-hover);
  color: var(--on-dark);
}

:is(
  .library-panel, .auth-card, .template-library-panel,
  .artwork-workshop, .modal-card, .purchase-card, .mockup-card
) { background-color: var(--card); }
:is(
  .library-card, .template-card, .account-chip,
  .artwork-crop-panel, .artwork-overlay-panel,
  .artwork-choice-grid button, .artwork-prompt-chips button,
  .artwork-controls textarea, .artwork-swap-actions button:first-child,
  .mockup-scene-grid button, .policy-choice, .status-grid div
) { background-color: var(--surface); }
.template-library-header { background: var(--paper); }
.template-toolbar, .artwork-controls { background-color: var(--card); }

:is(
  .library-panel header span, .library-panel > p,
  .library-card-copy span, .library-card-copy small,
  .library-panel footer, .auth-card p, .auth-card label,
  .auth-divider, .auth-card > div > small, .account-chip small,
  .template-library-header p, .template-toolbar label,
  .template-toolbar > div span, .template-card-copy > span,
  .template-empty span, .artwork-workshop-header > div:first-child > span,
  .artwork-edit-divider, .artwork-upload-zone small,
  .artwork-crop-panel label, .artwork-overlay-custom label,
  .artwork-instruction-copy span, .artwork-controls > label,
  #artworkEditTools > label, .artwork-version-heading span,
  .artwork-version-heading small, .artwork-workshop > footer,
  .mockup-preview-column > span, .mockup-controls > p,
  .mockup-controls legend, .mockup-depth, .mockup-controls > small
) { color: var(--muted-text); }

:is(
  .auth-kicker, .template-library-header > div > span,
  .template-card-copy > small, .artwork-swap-heading span,
  .artwork-choice-label
) { color: var(--wine); }
.provider-state, .library-panel footer span { color: var(--success); }
.provider-state { background: var(--success-soft); }
.provider-state.offline { background: var(--surface-soft); color: var(--muted-text); }

.auth-card p.auth-error { background: var(--danger-soft); color: var(--danger); }
.auth-sent { border-color: var(--success); background: var(--success-soft); }
.auth-sent > span { background: var(--success); color: var(--on-dark); }
.auth-sent a { color: var(--success); }

:is(
  .auth-card input, .auth-google,
  .template-toolbar input, .template-toolbar select,
  .artwork-upload-zone, .artwork-choice-grid button,
  .artwork-controls textarea, .artwork-prompt-chips button,
  .artwork-swap-actions button:first-child,
  .artwork-overlay-presets button, .mockup-scene-grid button,
  .support-form input, .support-form select, .support-form textarea,
  .blog-newsletter input
) { border-color: var(--border-strong); }
:is(
  .auth-card input, .template-toolbar input, .template-toolbar select,
  .artwork-controls textarea, .support-form input,
  .support-form select, .support-form textarea, .blog-newsletter input
):focus {
  border-color: var(--wine);
  box-shadow: 0 0 0 3px var(--field-focus);
  outline: 0;
}

.auth-google:focus-visible,
.auth-send:focus-visible,
.auth-close:focus-visible,
.auth-signout:focus-visible,
.auth-library-button:focus-visible {
  outline: 3px solid var(--button-focus);
  outline-offset: 2px;
}
.format-showcase a[href]:focus-visible,
.pricing-page-grid article.featured a[href]:focus-visible,
.blog-featured a[href]:focus-visible {
  outline-color: var(--acid);
}

/* Canva handoff */
body.modal-open { overflow: hidden; }
.canva-export-button { grid-template-columns: 52px 1fr auto; }
.canva-wordmark { display: grid; place-items: center; width: 45px; height: 29px; border-radius: 999px; background: var(--wine-soft); color: var(--wine); font: italic 650 14px/1 var(--serif); letter-spacing: -.2px; }
.canva-modal { position: fixed; z-index: 108; inset: 0; display: none; place-items: center; padding: 24px; }
.canva-modal.visible { display: grid; }
.canva-card { position: relative; z-index: 1; width: min(1040px,calc(100vw - 42px)); max-height: calc(100svh - 42px); display: grid; grid-template-columns: minmax(330px,.82fr) minmax(460px,1.18fr); overflow: hidden; border-radius: 18px; background: var(--card); box-shadow: 0 35px 90px rgba(16,12,14,.35); }
.canva-preview-column { min-width: 0; min-height: 650px; display: grid; place-items: center; align-content: center; gap: 15px; padding: 36px; background: var(--surface-soft); }
.canva-preview-frame { position: relative; width: min(280px,90%); aspect-ratio: 5/8; display: grid; place-items: center; overflow: hidden; background: #d9d2c6; box-shadow: 0 20px 45px rgba(25,18,20,.18); transition: aspect-ratio .2s,width .2s; }
.canva-modal[data-target="acx"] .canva-preview-frame { width: min(330px,92%); aspect-ratio: 1; }
.canva-modal[data-target="reveal"] .canva-preview-frame { width: min(300px,92%); aspect-ratio: 4/5; }
.canva-preview-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
.canva-preview-frame img[hidden] { display: none; }
.canva-preview-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 20px; background: var(--surface-soft); color: var(--muted-text); font-size: 13px; }
.canva-preview-loading[hidden] { display: none; }
.canva-preview-column > p { margin: 0; color: var(--muted-text); font-size: 13px; }
.canva-controls { min-width: 0; overflow-y: auto; padding: 50px 44px 38px; }
.canva-controls h2 { margin: 0; font: 400 45px/.98 var(--serif); letter-spacing: -1px; }
.canva-controls > p { margin: 13px 0 24px; color: var(--muted-text); font-size: 14px; line-height: 1.55; }
.canva-connection { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; background: var(--surface); }
.canva-connection > div { min-width: 0; }
.canva-connection strong, .canva-connection span { display: block; }
.canva-connection strong { font-size: 14px; }
.canva-connection span { margin-top: 4px; color: var(--muted-text); font-size: 12px; line-height: 1.4; }
.canva-connection button { flex: 0 0 auto; min-height: 36px; border: 0; padding: 0 3px; background: transparent; color: var(--wine); font-size: 13px; font-weight: 800; }
.canva-fieldset { min-width: 0; margin: 25px 0 0; border: 0; padding: 0; }
.canva-options { margin-top: 20px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.canva-options > summary { min-height: 54px; display: grid; grid-template-columns: 1fr auto 18px; align-items: center; gap: 10px; padding: 0 14px; cursor: pointer; list-style: none; }
.canva-options > summary::-webkit-details-marker { display: none; }
.canva-options > summary span { font-size: 13px; font-weight: 800; }
.canva-options > summary strong { color: var(--muted-text); font-size: 12px; font-weight: 700; text-transform: capitalize; }
.canva-options > summary::after { content: "+"; color: var(--wine); font-size: 18px; }
.canva-options[open] > summary::after { content: "−"; }
.canva-options > div { border-top: 1px solid var(--line); padding: 0 14px 16px; }
.canva-options .canva-fieldset { margin-top: 17px; }
.canva-fieldset legend { margin-bottom: 10px; color: var(--ink-soft); font-size: 12px; font-weight: 800; letter-spacing: .65px; text-transform: uppercase; }
.canva-target-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.canva-choice { min-width: 0; min-height: 104px; display: grid; grid-template-columns: 18px minmax(0,1fr); align-content: start; gap: 9px 7px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 12px 10px; background: var(--surface); cursor: pointer; }
.canva-choice:has(input:checked), .canva-mode-choice:has(input:checked) { border-color: var(--wine); background: var(--wine-soft); box-shadow: inset 0 0 0 1px var(--wine); }
.canva-choice input, .canva-mode-choice input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--wine); }
.canva-choice > span, .canva-mode-choice > span { min-width: 0; }
.canva-choice strong, .canva-choice small, .canva-mode-choice strong, .canva-mode-choice small { display: block; }
.canva-choice strong, .canva-mode-choice strong { font-size: 13px; }
.canva-choice small, .canva-mode-choice small { margin-top: 4px; color: var(--muted-text); font-size: 12px; line-height: 1.35; }
.canva-choice > b { grid-column: 1/-1; align-self: end; color: var(--wine); font-size: 12px; letter-spacing: .35px; }
.canva-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.canva-mode-choice { min-height: 70px; display: grid; grid-template-columns: 18px 1fr; gap: 8px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 11px; background: var(--surface); cursor: pointer; }
.canva-mode-choice.unavailable { cursor: not-allowed; opacity: .48; }
.canva-mode-fieldset > p { margin: 9px 0 0; color: var(--muted-text); font-size: 12px; line-height: 1.45; }
.canva-progress { min-height: 45px; display: flex; align-items: center; gap: 9px; margin-top: 17px; border-radius: 7px; padding: 10px 12px; background: var(--surface-soft); color: var(--ink-soft); font-size: 13px; }
.canva-progress[hidden] { display: none; }
.canva-result { display: grid; gap: 5px; margin-top: 17px; border-left: 3px solid var(--success); padding: 9px 12px; background: var(--success-soft); }
.canva-result[hidden] { display: none; }
.canva-result strong { font-size: 14px; }
.canva-result span { color: var(--muted-text); font-size: 12px; line-height: 1.45; }
.canva-result a { width: max-content; min-height: 36px; display: inline-flex; align-items: center; margin-top: 4px; border-radius: var(--button-radius); padding: 0 12px; background: var(--ink); color: var(--on-dark); font-size: 13px; font-weight: 800; }
.canva-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 22px; }
.canva-actions button { min-height: 46px; border-radius: var(--button-radius); padding: 0 14px; font-family: var(--sans); font-size: 14px; font-weight: 800; }
.canva-primary-action { border: 1px solid var(--ink); background: var(--ink); color: var(--on-dark); }
.canva-secondary-action { border: 1px solid var(--ink); background: var(--surface); color: var(--ink); }
.canva-secondary-action.full-width { grid-column: 1/-1; }
.canva-actions button:hover:not(:disabled) { border-color: var(--ink-hover); background: var(--ink-hover); color: var(--on-dark); }
.canva-actions button:disabled { cursor: wait; }
.canva-print-note { margin: 13px 0 0 !important; color: var(--muted-text) !important; font-size: 12px !important; line-height: 1.45 !important; }
.connected-apps-card { grid-column: 1/-1; }
.canva-settings-row { padding-bottom: 0; }

@media (max-width: 900px) {
  .canva-card { grid-template-columns: minmax(240px,.7fr) minmax(430px,1.3fr); }
  .canva-preview-column { min-height: 590px; padding: 24px; }
  .canva-controls { padding: 42px 30px 34px; }
}

@media (max-width: 760px) {
  .canva-modal { padding: 8px; }
  .canva-card { width: calc(100vw - 16px); max-height: calc(100svh - 16px); display: block; overflow-y: auto; border-radius: 12px; }
  .canva-preview-column { min-height: 260px; padding: 25px 16px 18px; }
  .canva-preview-frame { width: 125px; }
  .canva-modal[data-target="acx"] .canva-preview-frame { width: 155px; }
  .canva-modal[data-target="reveal"] .canva-preview-frame { width: 140px; }
  .canva-preview-column > p { font-size: 12px; }
  .canva-controls { overflow: visible; padding: 30px 17px 28px; }
  .canva-controls h2 { font-size: 36px; }
  .canva-connection { align-items: flex-start; }
  .canva-target-grid { grid-template-columns: 1fr; }
  .canva-choice { min-height: 76px; grid-template-columns: 18px minmax(0,1fr) auto; align-items: start; }
  .canva-choice > b { grid-column: 3; grid-row: 1; align-self: start; }
  .canva-mode-grid, .canva-actions { grid-template-columns: 1fr; }
  .canva-secondary-action.full-width { grid-column: auto; }
}

/* Landing page editorial refresh */
body:not(.create-route) .landing-view {
  display: block;
  overflow: hidden;
  padding: 0 0 64px;
  background: var(--paper);
}
.home-hero {
  position: relative;
  isolation: isolate;
  min-height: 0;
  display: block;
  padding: 138px 28px 92px;
}
.hero-backdrop {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: min(820px,90svh);
  min-height: 720px;
  overflow: hidden;
  background: #e8ebe8;
}
.hero-backdrop img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  filter: saturate(.96) contrast(1.02);
}
.hero-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,rgba(244,245,243,.84) 0%,rgba(244,245,243,.68) 42%,rgba(244,245,243,.1) 72%,rgba(244,245,243,.03) 100%),
    linear-gradient(180deg,rgba(244,245,243,.08) 0 70%,var(--paper) 100%);
}
.home-hero > .ambient { display: none; }
.home-hero .hero-copy { position: relative; z-index: 2; width: 100%; max-width: 760px; margin: 0 auto; text-align: center; }
.home-hero h1 { max-width: 760px; margin: 13px 0 20px; }
.home-hero .hero-subcopy { max-width: 610px; margin-bottom: 26px; color: var(--ink-soft); font-size: 18px; line-height: 1.55; }
.home-hero .idea-card {
  width: 100%;
  max-width: 680px;
  margin-right: auto;
  margin-left: auto;
  border-color: rgba(23,24,22,.18);
  padding: 23px 25px 25px;
  background: rgba(255,255,255,.93);
  box-shadow: 0 18px 50px rgba(28,32,29,.13);
  backdrop-filter: blur(10px);
  text-align: left;
}
.home-hero .hero-subcopy { margin-right: auto; margin-left: auto; }
.home-hero .idea-card input,
.home-hero .idea-card select { font-size: 15px; }
.home-hero .field-label,
.home-hero .publication-picker label { font-size: 14px; letter-spacing: .75px; }
.home-hero .optional-field span { font-size: 14px; }
.home-hero .genre-insight strong { font-size: 15px; }
.home-hero .genre-insight span:last-child { font-size: 14px; }
.top-nav,
.header-projects-link,
.text-button { font-size: 15px; }

body:not(.create-route) :is(
  .home-template-heading,
  .home-template-gallery,
  .home-trust,
  .home-proof,
  .home-process,
  .home-capabilities,
  .home-comparison,
  .format-showcase,
  .home-journal,
  .home-final-cta
) { width: calc(100% - 56px); max-width: 1360px; margin-right: auto; margin-left: auto; }
body:not(.create-route) :is(
  .home-trust,
  .home-proof,
  .home-process,
  .home-capabilities,
  .home-comparison,
  .format-showcase,
  .home-final-cta
) { max-width: 1360px; }
body:not(.create-route) .home-template-heading { margin-top: 50px; margin-bottom: 18px; text-align: center; }
body:not(.create-route) .home-template-gallery { margin-top: 0; margin-bottom: 64px; padding: 24px; }
body:not(.create-route) .home-trust { margin-top: 0; margin-bottom: 80px; }
.home-trust-card { overflow: hidden; border: 1px solid #2c2d29; border-radius: 20px; background: var(--ink); color: var(--on-dark); box-shadow: 0 26px 70px rgba(23,24,22,.14); }
.home-trust-card > header { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(270px,.5fr); align-items: end; gap: 54px; padding: 42px 44px 38px; }
.home-trust-intro > span, .home-publishers > div > span { color: var(--acid); font-size: 12px; font-weight: 800; letter-spacing: 1.8px; }
.home-trust-intro h2 { max-width: 670px; margin: 13px 0 15px; font: 400 clamp(40px,4.5vw,60px)/.94 var(--serif); letter-spacing: -1.8px; }
.home-trust-intro p { max-width: 650px; margin: 0; color: #c9cac4; font-size: 16px; line-height: 1.55; }
.home-rating { border-left: 1px solid rgba(255,255,255,.17); padding-left: 34px; }
.home-author-community { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.home-author-community > span { max-width: 82px; color: #aaaca5; font-size: 12px; font-weight: 700; line-height: 1.35; }
.home-author-portraits { display: flex; align-items: center; padding-left: 2px; }
.home-author-portrait { width: 42px; height: 42px; display: block; overflow: hidden; margin-left: -10px; border: 2px solid var(--ink); border-radius: 50%; background: #d8d3c8; box-shadow: 0 5px 14px rgba(0,0,0,.24); transition: transform .25s ease; }
.home-author-portrait:first-child { margin-left: 0; }
.home-author-portrait:nth-child(2) { transform: rotate(2deg); }
.home-author-portrait:nth-child(3) { transform: rotate(-2deg); }
.home-author-portrait:hover { position: relative; z-index: 2; transform: translateY(-3px) rotate(0); }
.home-author-portrait svg { width: 100%; height: 100%; display: block; }
.home-rating-stars { color: var(--acid); font-size: 24px; letter-spacing: 5px; line-height: 1; }
.home-rating > strong { display: block; margin-top: 13px; font: 400 48px/.9 var(--serif); letter-spacing: -1px; }
.home-rating > strong span { display: inline; margin-left: 3px; color: #aaaca5; font: 700 20px/1 var(--sans); }
.home-rating p { max-width: 240px; margin: 12px 0 0; color: #aaaca5; font-size: 14px; line-height: 1.45; }
.home-trust .home-proof { width: 100%; max-width: none; display: grid; grid-template-columns: repeat(3,1fr); margin: 0; border-top: 1px solid rgba(255,255,255,.17); border-bottom: 0; }
.home-trust .home-proof > div { min-width: 0; border-left: 1px solid rgba(255,255,255,.17); padding: 26px 44px 29px; }
.home-trust .home-proof > div:first-child { border-left: 0; }
.home-trust .home-proof strong { color: var(--on-dark); font: 400 38px/1 var(--serif); }
.home-trust .home-proof span { margin-top: 8px; color: #aaaca5; font-size: 14px; line-height: 1.4; }
.home-publishers { display: grid; grid-template-columns: minmax(230px,.8fr) minmax(0,1.7fr); align-items: center; gap: 34px; margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 23px 27px; background: rgba(255,255,255,.55); }
.home-publishers > div > span { color: var(--wine); }
.home-publishers p { margin: 7px 0 0; color: var(--muted-text); font-size: 14px; line-height: 1.45; }
.home-publishers ul { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.home-publishers li { position: relative; border-left: 1px solid var(--line); padding: 8px 6px 8px 18px; color: var(--ink); font-size: 14px; font-weight: 800; line-height: 1.25; }
.home-publishers li::before { content: ""; position: absolute; top: 50%; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--wine); transform: translateY(-50%); }

body:not(.create-route) .home-process { margin-bottom: 80px; }
.home-process > header { display: block; margin-bottom: 22px; }
.home-process > header p { max-width: 620px; margin: 13px 0 0; font-size: 16px; line-height: 1.55; }
.home-process article { min-height: 225px; padding: 22px; }
.home-process svg { width: 46px; height: 46px; }
.home-process h3 { margin: 27px 0 10px; font-size: 27px; }
.home-process article p { font-size: 15px; line-height: 1.58; }

body:not(.create-route) .home-capabilities { margin-bottom: 80px; }
.home-capabilities > header { display: grid; grid-template-columns: minmax(190px,.45fr) minmax(0,1.35fr); gap: 40px; align-items: start; margin-bottom: 27px; }
.home-capabilities > header > span, .capability-copy > span, .capability-card > span { color: var(--wine); font-size: 12px; font-weight: 800; letter-spacing: 1.7px; }
.home-capabilities > header > span { padding-top: 10px; }
.home-capabilities > header h2 { max-width: 820px; margin: 0; font: 400 clamp(42px,4.7vw,62px)/.96 var(--serif); letter-spacing: -1.9px; }
.home-capabilities > header p { max-width: 670px; margin: 16px 0 0; color: var(--muted-text); font-size: 16px; line-height: 1.55; }
.home-capabilities-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 12px; }
.home-capabilities-grid article { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; }
.capability-lead { grid-column: span 7; grid-row: span 2; min-height: 500px; display: grid; grid-template-rows: auto 1fr; position: relative; padding: 34px 34px 0; background: var(--ink); color: var(--on-dark); }
.capability-copy { position: relative; z-index: 2; max-width: 560px; }
.capability-copy > span { color: var(--acid); }
.capability-copy h3 { max-width: 500px; margin: 12px 0 13px; font: 400 39px/1 var(--serif); letter-spacing: -1px; }
.capability-copy p { max-width: 540px; margin: 0; color: #c5c7c0; font-size: 15px; line-height: 1.55; }
.capability-copy ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 19px 0 0; padding: 0; list-style: none; }
.capability-copy li { border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 7px 10px; color: #d9dad5; font-size: 12px; font-weight: 700; }
.capability-wrap-demo { align-self: end; width: min(93%,610px); height: 230px; display: grid; grid-template-columns: 1fr 34px 1fr; margin: 35px auto 0; transform: perspective(900px) rotateX(5deg); transform-origin: bottom; filter: drop-shadow(0 24px 26px rgba(0,0,0,.34)); }
.capability-wrap-back, .capability-wrap-front { position: relative; overflow: hidden; background: #dadbd5; }
.capability-wrap-back { display: grid; align-content: center; gap: 9px; padding: 36px; background: linear-gradient(145deg,#dfe1db,#b9bcb5); }
.capability-wrap-back i { display: block; width: 80%; height: 3px; background: rgba(23,24,22,.24); }
.capability-wrap-back b { position: absolute; right: 18px; bottom: 18px; width: 42px; height: 30px; background: repeating-linear-gradient(90deg,#181916 0 2px,transparent 2px 4px); }
.capability-wrap-spine { position: relative; z-index: 2; display: grid; place-items: center; background: #242925; box-shadow: 0 0 18px rgba(0,0,0,.2); }
.capability-wrap-spine span { color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; transform: rotate(90deg); }
.capability-wrap-front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.capability-wrap-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.1) 48%,rgba(0,0,0,.66)); }
.capability-wrap-front strong, .capability-wrap-front span { position: absolute; z-index: 2; left: 23px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.capability-wrap-front strong { top: 23px; font: 700 27px/.9 var(--serif); }
.capability-wrap-front span { bottom: 20px; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.capability-card { grid-column: span 5; min-height: 244px; display: flex; flex-direction: column; padding: 28px; background: rgba(255,255,255,.58); }
.capability-card h3 { margin: 11px 0 10px; font: 400 28px/1.05 var(--serif); letter-spacing: -.5px; }
.capability-card p { margin: 0; color: var(--muted-text); font-size: 14px; line-height: 1.52; }
.capability-artwork > div, .capability-formats > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 20px; }
.capability-artwork b, .capability-formats b { border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 9px; color: #706d65; font-size: 12px; letter-spacing: .4px; }
.capability-layers { background: #e3e6e2; }
.capability-layers > div { display: grid; grid-template-columns: repeat(4,43px); gap: 8px; margin-top: auto; padding-top: 18px; }
.capability-layers i { height: 43px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(255,255,255,.5); color: var(--ink); font: 700 14px/1 var(--sans); font-style: normal; }
.capability-checks, .capability-formats, .capability-records { grid-column: span 4; min-height: 238px; }
.capability-checks { background: #f1eee7; }
.capability-checks ul { display: grid; gap: 8px; margin: auto 0 0; padding: 18px 0 0; list-style: none; }
.capability-checks li { position: relative; padding-left: 20px; color: #69675f; font-size: 13px; font-weight: 700; }
.capability-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--wine); }
.capability-formats { background: var(--ink); color: var(--on-dark); }
.capability-formats > span { color: var(--acid); }
.capability-formats p { color: #b8bab3; }
.capability-formats b { border-color: rgba(255,255,255,.18); color: #d9dad5; }
.capability-records { background: #dfe4df; }

body:not(.create-route) .home-comparison { margin-bottom: 80px; }
.home-comparison > header { display: grid; grid-template-columns: minmax(0,.55fr) minmax(0,1.15fr); gap: 18px 44px; margin-bottom: 26px; }
.home-comparison > header > span { align-self: start; padding-top: 9px; color: var(--wine); font-size: 12px; font-weight: 800; letter-spacing: 1.8px; }
.home-comparison > header h2 { max-width: 760px; margin: 0; font: 400 clamp(40px,4.5vw,58px)/.98 var(--serif); letter-spacing: -1.7px; }
.home-comparison > header p { grid-column: 2; max-width: 650px; margin: 0; color: var(--muted-text); font-size: 16px; line-height: 1.55; }
.home-comparison-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 20px; background: #f6f5f1; box-shadow: 0 22px 60px rgba(23,24,22,.1); }
.home-comparison-grid article { min-width: 0; padding: 35px 38px 34px; }
.comparison-coverfairy { border-left: 1px solid rgba(255,255,255,.17); background: var(--ink); color: var(--on-dark); }
.comparison-card-heading > span { color: #8b887f; font-size: 12px; font-weight: 800; letter-spacing: 1.7px; }
.comparison-coverfairy .comparison-card-heading > span { color: var(--acid); }
.comparison-card-heading h3 { margin: 10px 0 0; font: 400 34px/1.05 var(--serif); letter-spacing: -.7px; }
.home-comparison-grid ul { display: grid; gap: 0; margin: 30px 0 33px; padding: 0; list-style: none; }
.home-comparison-grid li { position: relative; display: grid; grid-template-columns: minmax(105px,.42fr) minmax(0,1fr); gap: 18px; border-top: 1px solid var(--line); padding: 16px 0 16px 25px; }
.home-comparison-grid li:last-child { border-bottom: 1px solid var(--line); }
.home-comparison-grid li::before { content: "—"; position: absolute; top: 16px; left: 0; color: #aaa69c; font-weight: 800; }
.comparison-coverfairy li { border-color: rgba(255,255,255,.15); }
.comparison-coverfairy li::before { content: "✓"; color: var(--acid); }
.home-comparison-grid li strong { font-size: 14px; line-height: 1.45; }
.home-comparison-grid li span { color: #747169; font-size: 14px; line-height: 1.45; }
.comparison-coverfairy li span { color: #b8bab3; }
.home-comparison-grid footer { display: grid; gap: 9px; }
.home-comparison-grid footer > span { color: #8b887f; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; }
.comparison-coverfairy footer > span { color: var(--acid); }
.home-comparison-grid footer strong { font: 400 29px/1 var(--serif); }
.home-comparison-grid footer small { color: #b8bab3; font: 700 14px/1.3 var(--sans); }

body:not(.create-route) .format-showcase { margin-bottom: 80px; padding: 38px; }
.format-showcase-grid article > strong { font-size: 16px; }
.format-showcase-grid article > span { font-size: 14px; }

body:not(.create-route) .home-final-cta {
  margin-bottom: 0;
  border: 1px solid var(--line);
  padding: 34px 38px;
  background: #e2e6e2;
}
.home-final-cta p { font-size: 15px; }

.create-route .home-hero { min-height: 0; display: block; padding: 0; }
.create-route .hero-backdrop { display: none; }
.create-route .home-hero .hero-copy { max-width: 650px; text-align: left; }

@media (max-width: 1150px) {
  .home-hero {
    padding: 126px 24px 76px;
  }
}

@media (max-width: 900px) {
  .home-hero { min-height: 0; display: block; padding: 112px 24px 64px; }
  .hero-backdrop::after {
    background:
      linear-gradient(90deg,rgba(244,245,243,.88),rgba(244,245,243,.58)),
      linear-gradient(180deg,rgba(244,245,243,.1) 0 74%,var(--paper) 100%);
  }
  .home-hero .hero-copy { max-width: 680px; margin-right: auto; margin-left: auto; }
  body:not(.create-route) :is(
    .home-template-heading,
    .home-template-gallery,
    .home-trust,
    .home-proof,
    .home-process,
    .home-capabilities,
    .home-comparison,
    .format-showcase,
    .home-journal,
    .home-final-cta
  ) { width: calc(100% - 48px); max-width: 680px; }
  body:not(.create-route) .home-template-gallery { margin-bottom: 58px; }
  .home-trust-card > header { grid-template-columns: 1fr; gap: 28px; padding: 36px; }
  .home-rating { border-top: 1px solid rgba(255,255,255,.17); border-left: 0; padding: 26px 0 0; }
  .home-rating p { max-width: none; }
  .home-trust .home-proof { width: 100%; max-width: none; }
  .home-trust .home-proof > div { padding: 23px 28px 25px; }
  .home-publishers { grid-template-columns: 1fr; gap: 20px; }
  .home-publishers ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body:not(.create-route) .home-trust,
  body:not(.create-route) .home-proof,
  body:not(.create-route) .home-process,
  body:not(.create-route) .home-capabilities,
  body:not(.create-route) .home-comparison,
  body:not(.create-route) .format-showcase { margin-bottom: 68px; }
  .home-comparison > header { grid-template-columns: 1fr; gap: 13px; }
  .home-comparison > header > span { padding-top: 0; }
  .home-comparison > header p { grid-column: 1; }
  .home-comparison-grid { grid-template-columns: 1fr; }
  .comparison-coverfairy { border-top: 1px solid var(--line-strong); border-left: 0; }
  .home-capabilities > header { grid-template-columns: 1fr; gap: 13px; }
  .home-capabilities > header > span { padding-top: 0; }
  .capability-lead { grid-column: 1/-1; min-height: 480px; }
  .capability-card { grid-column: span 6; }
}

@media (max-width: 650px) {
  body:not(.create-route) .landing-view { padding-bottom: 48px; }
  .home-hero { padding: 98px 17px 44px; }
  .hero-backdrop { height: min(760px,90svh); min-height: 650px; }
  .hero-backdrop img { object-position: 69% center; }
  .hero-backdrop::after {
    background:
      linear-gradient(90deg,rgba(244,245,243,.91),rgba(244,245,243,.7)),
      linear-gradient(180deg,rgba(244,245,243,.12) 0 74%,var(--paper) 100%);
  }
  .home-hero h1 { margin-top: 8px; font-size: 52px; }
  .home-hero .hero-subcopy { font-size: 16px; }
  .home-hero .idea-card { padding: 19px 16px 20px; }
  body:not(.create-route) :is(
    .home-template-heading,
    .home-template-gallery,
    .home-trust,
    .home-proof,
    .home-process,
    .home-capabilities,
    .home-comparison,
    .format-showcase,
    .home-journal,
    .home-final-cta
  ) { width: calc(100% - 34px); }
  body:not(.create-route) .home-template-heading { margin-top: 38px; }
  .home-trust-card { border-radius: 15px; }
  .home-trust-card > header { gap: 24px; padding: 28px 22px; }
  .home-trust-intro h2 { font-size: 40px; letter-spacing: -1.3px; }
  .home-trust-intro p { font-size: 15px; }
  .home-rating > strong { font-size: 43px; }
  .home-trust .home-proof { grid-template-columns: 1fr; }
  .home-trust .home-proof > div, .home-trust .home-proof > div:first-child { border-top: 1px solid rgba(255,255,255,.17); border-left: 0; padding: 21px 22px 23px; }
  .home-trust .home-proof > div:first-child { border-top: 0; }
  .home-publishers { border-radius: 11px; padding: 21px 19px; }
  .home-publishers ul { gap: 8px; }
  .home-publishers li { padding-left: 14px; font-size: 13px; }
  body:not(.create-route) .home-template-gallery,
  body:not(.create-route) .home-trust,
  body:not(.create-route) .home-proof,
  body:not(.create-route) .home-process,
  body:not(.create-route) .home-capabilities,
  body:not(.create-route) .home-comparison,
  body:not(.create-route) .format-showcase { margin-bottom: 54px; }
  .home-comparison > header h2 { font-size: 40px; letter-spacing: -1.3px; }
  .home-comparison > header p { font-size: 15px; }
  .home-comparison-grid { border-radius: 15px; }
  .home-comparison-grid article { padding: 28px 22px 27px; }
  .comparison-card-heading h3 { font-size: 30px; }
  .home-comparison-grid ul { margin: 24px 0 27px; }
  .home-comparison-grid li { grid-template-columns: 1fr; gap: 5px; padding: 14px 0 14px 23px; }
  .home-comparison-grid li::before { top: 14px; }
  .home-capabilities > header h2 { font-size: 40px; letter-spacing: -1.3px; }
  .home-capabilities > header p { font-size: 15px; }
  .home-capabilities-grid { gap: 9px; }
  .home-capabilities-grid article { border-radius: 15px; }
  .capability-lead { min-height: 540px; padding: 28px 22px 0; }
  .capability-copy h3 { font-size: 34px; }
  .capability-copy ul { gap: 6px; }
  .capability-wrap-demo { width: 110%; height: 205px; grid-template-columns: 1fr 27px 1fr; margin-left: -5%; }
  .capability-wrap-back { padding: 24px; }
  .capability-card { grid-column: 1/-1; min-height: 216px; padding: 24px 22px; }
  .home-process article { padding: 20px; }
  .home-process > header p { font-size: 15px; }
  body:not(.create-route) .home-final-cta { padding: 27px 20px; }
}

/* Template discovery uses card-relative type and a consistent four-column rhythm. */
.home-template-cover,
.template-cover { container-type: inline-size; }
.canonical-template-cover::after { display: none; }
.canonical-template-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.home-template-cover > strong,
.template-cover strong { font-size: var(--template-cover-title-size); line-height: 1.05; }
.home-template-cover > small,
.home-template-cover > span,
.template-cover small,
.template-cover > span { font-size: clamp(12px,4cqi,15px); }
.templates-page-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }

@media (max-width: 1050px) {
  .templates-page-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .home-template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .templates-page-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workspace-nav a[data-workspace-link="settings"],
  .workspace-nav a[data-workspace-link="billing"] { display: none; }
  .dashboard-recommendations .dashboard-section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .dashboard-template-grid {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    margin-right: -17px;
    padding: 0 17px 8px 0;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .dashboard-template-grid::-webkit-scrollbar { display: none; }
  .dashboard-template-grid .home-template-card {
    flex: 0 0 min(72vw,250px);
    scroll-snap-align: start;
  }
}

@media (max-width: 650px) {
  .home-template-grid { grid-template-columns: 1fr; }
  .export-modal .modal-card { min-height: 0; grid-template-columns: 1fr; }
  .export-modal .modal-art { display: none; }
  .export-modal .modal-content { overflow-y: auto; padding: 24px 16px 18px; }
  .export-modal .modal-content h2 { margin-top: 5px; padding-right: 38px; }
  .modal-content .export-format-choice { grid-template-columns: 20px minmax(0,1fr) auto; gap: 3px 9px; padding: 9px 10px; }
  .export-format-choice > span strong { font-size: 14px; }
  .export-format-choice > span small { font-size: 12px; }
  .export-requirement { grid-template-columns: 1fr; }
  .export-requirement button { width: 100%; }
  .purchase-panel.export-checkout { margin-right: -4px; margin-left: -4px; }
  .export-secondary-actions { grid-template-columns: 1fr; }
  .export-canva-link { border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 520px) {
  .templates-page-grid { grid-template-columns: 1fr; }
}

/* Workspace copy and actions stay readable without reintroducing accent colours. */
.workspace-route .account-menu-popover button,
.workspace-route .account-menu-popover > a[role="menuitem"],
.workspace-route .home-template-card > div:last-child span,
.workspace-route .project-card-manage > button { font-size: 14px; }
.workspace-route .home-template-card > div:last-child { min-height: 44px; }

/* Mockup scene selection uses the same explicit black active state as the editor. */
.mockup-scene-grid button.active { border-color: var(--ink); background-color: var(--ink); color: var(--on-dark); box-shadow: inset 0 -2px var(--acid); }

/* Landing motion keeps the editorial layout calm while making the page feel alive. */
html.landing-motion-enabled .landing-motion-hero-item {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(24px);
  transition:
    opacity .72s cubic-bezier(.2,.7,.2,1),
    filter .72s cubic-bezier(.2,.7,.2,1),
    transform .72s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--motion-delay,0ms);
}
html.landing-motion-enabled .site-header.landing-motion-hero-item { transform: translateY(-14px); }
html.landing-motion-enabled .landing-motion-hero-item.is-visible {
  opacity: 1;
  filter: none;
  transform: translateY(0);
}
html.landing-motion-enabled .landing-motion-section {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity .78s cubic-bezier(.2,.7,.2,1),
    transform .78s cubic-bezier(.2,.7,.2,1);
}
html.landing-motion-enabled .landing-motion-section.is-visible { opacity: 1; transform: translateY(0); }
html.landing-motion-enabled .landing-motion-stagger {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition:
    opacity .62s cubic-bezier(.2,.7,.2,1),
    transform .62s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--motion-delay,0ms);
}
html.landing-motion-enabled .landing-motion-stagger.is-visible { opacity: 1; transform: translateY(0) scale(1); }
html.landing-motion-enabled body:not(.create-route) .hero-backdrop img {
  animation: landingBackdropDrift 16s ease-in-out infinite alternate;
  will-change: transform;
}
html.landing-motion-enabled .home-capabilities.is-visible .capability-wrap-demo {
  animation: landingWrapSettle .95s cubic-bezier(.2,.75,.2,1) .3s both;
}
.home-template-cover > img,
.home-template-cover > canvas { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.home-template-card:hover .home-template-cover > img,
.home-template-card:hover .home-template-cover > canvas { transform: scale(1.035); }

@keyframes landingBackdropDrift {
  from { transform: scale(1.025) translate3d(-.35%,0,0); }
  to { transform: scale(1.055) translate3d(.45%,-.35%,0); }
}
@keyframes landingWrapSettle {
  from { opacity: .35; transform: perspective(900px) rotateX(17deg) translateY(28px); }
  to { opacity: 1; transform: perspective(900px) rotateX(5deg) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html.landing-motion-enabled .landing-motion-hero-item,
  html.landing-motion-enabled .landing-motion-section,
  html.landing-motion-enabled .landing-motion-stagger {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  html.landing-motion-enabled body:not(.create-route) .hero-backdrop img,
  html.landing-motion-enabled .home-capabilities.is-visible .capability-wrap-demo { animation: none !important; }
}