/* EmbroidAI: shared layout and component design, after the generated utilities. */
:root { --brand: #22634c; --ink: #233d35; --muted: #65716a; --line: #d9dfd5; --paper: #faf8f3; }
html { scroll-padding-top: 90px; }
body { background: var(--paper); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, summary, a { touch-action: manipulation; }
button:disabled { opacity: .5; }
input, select, textarea { max-width: 100%; }
img { max-width: 100%; }
input[type=number] { font-variant-numeric: tabular-nums; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #5eaa8d; outline-offset: 4px; }
::selection { background: #cbe7d4; color: #142822; }
.wrap { width: 100%; }
header.nav { background: #faf8f3f2; border-color: var(--line); }
header.nav > .wrap { height: 82px; max-width: 1280px; }
header.nav nav a::after { background: var(--brand); }
header.nav .font-display { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -.8px; }
#navLinksMobile a, #appNavMobile a { min-height: 44px; display: flex; align-items: center; }
#navLinksMobile > .wrap, #appNavMobile > .wrap { padding: 18px 24px; }
.landing-wrap { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.landing-hero { padding: 76px 0 80px; overflow: clip; }
.hero-layout { display: grid; grid-template-columns: 1.06fr 1fr; gap: 64px; align-items: center; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; line-height: 1.7; text-transform: uppercase; color: var(--brand); }
.tiny-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #79a384; flex-shrink: 0; }
.hero-copy h1 { margin: 24px 0; font: 500 clamp(46px, 5.2vw, 74px)/1.03 'Newsreader', Georgia, serif; letter-spacing: -2.6px; }
.hero-copy h1 em { color: var(--brand); font-weight: 400; }
.hero-copy > p { max-width: 440px; font-size: 15px; line-height: 1.9; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button-primary, .button-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 50px; padding: 13px 23px; border-radius: 8px; font-size: 13px; font-weight: 700; transition: background .2s, transform .2s; text-decoration: none; }
.button-primary { color: white; background: var(--brand); border: 1px solid var(--brand); }
.button-primary:hover { background: #184d3b; transform: translateY(-2px); }
.button-secondary { color: var(--ink); border: 1px solid var(--line); background: transparent; }
.button-secondary:hover { background: #e9eee8; }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 22px; font-size: 11px; color: var(--muted); }
.hero-note .material-symbols-outlined { font-size: 16px; color: var(--brand); }
.hero-art { position: relative; padding: 13px; background: #eeeadf; border: 1px solid #deddd1; border-radius: 16px; transform: rotate(1.5deg); }
.art-caption { display: flex; justify-content: space-between; font-size: 8px; letter-spacing: 1.3px; font-weight: 700; padding: 5px 4px 15px; }
.hero-art > img { width: 100%; height: 350px; object-fit: cover; border-radius: 9px; }
.art-footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 3px 3px; font-size: 10px; }
.art-footer > div { display: flex; align-items: center; gap: 7px; }
.thread-colors { display: flex; gap: 4px; }
.thread-colors i { width: 14px; height: 14px; border-radius: 50%; background: #c39343; border: 1px solid #0001; }
.thread-colors i:nth-child(2) { background: #faf5de; }.thread-colors i:nth-child(3) { background: #476852; }.thread-colors i:nth-child(4) { background: #202c40; }
.art-tag { display: flex; align-items: center; gap: 12px; position: absolute; left: -26px; bottom: 70px; padding: 15px 20px; background: #fffefa; border: 1px solid #e2e5da; border-radius: 10px; box-shadow: 0 10px 30px #14282214; transform: rotate(-1.5deg); }
.art-tag > span { color: var(--brand); font-size: 30px; }
.art-tag b, .art-tag div > span { display: block; font-size: 11px; }.art-tag div > span { font-size: 10px; color: var(--muted); margin-top: 4px; }
.format-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-block: 1px solid var(--line); padding-block: 25px; }
.format-strip > span { font-size: 9px; font-weight: 700; letter-spacing: 1.4px; color: var(--muted); }
.format-strip > div { display: flex; gap: 24px; align-items: center; font-family: monospace; font-size: 18px; letter-spacing: 2px; }.format-strip i { font-style: normal; color: #aebbb0; font-size: 13px; }
.format-strip > a { font-size: 11px; font-weight: 700; }
.landing-section { padding-block: 86px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 36px; }
.section-heading h2, .closing-cta h2 { font: 500 46px/1.07 'Newsreader', Georgia, serif; letter-spacing: -1px; margin-top: 15px; }
.section-heading > p { font-size: 13px; line-height: 1.9; color: var(--muted); }
.process-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.process-grid article { position: relative; padding: 30px; border: 1px solid var(--line); border-radius: 12px; background: #fffdf8; }
.step-number { position: absolute; right: 24px; top: 24px; color: #92a098; font-size: 11px; font-family: monospace; }
.process-icon { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; background: #eaf0e7; color: var(--brand); margin-bottom: 26px; }
.process-grid h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }.process-grid p { font-size: 12px; line-height: 1.9; color: var(--muted); }
.inspiration-section { padding-block: 72px; background: #f0eee6; border-block: 1px solid #e5e4da; }
.inspiration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.inspiration-grid a { border-radius: 12px; overflow: hidden; background: var(--paper); border: 1px solid #e2e1d7; }
.inspiration-grid img { width: 100%; height: 290px; object-fit: cover; transition: transform .3s; }.inspiration-grid a:hover img { transform: scale(1.02); }
.inspiration-grid a > div { padding: 22px; }.inspiration-grid h3 { font-size: 16px; font-weight: 600; }.inspiration-grid span { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.closing-cta { text-align: center; padding: 84px 20px; }.closing-cta .eyebrow { justify-content: center; }.closing-cta h2 { font-size: 54px; margin-bottom: 26px; }.closing-cta em { color: var(--brand); }.closing-cta p { font-size: 11px; color: var(--muted); margin-top: 18px; }
footer.site { background: #142822; }footer.site .wrap { max-width: 1280px; padding-top: 56px; }
/* Studio and authenticated pages share a quiet, high-contrast work surface. */
.app { background: #142822; color-scheme: dark; }
.app .font-display { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -.5px; }
.app .app-inner { background: #12231ef5; border-bottom: 1px solid #ffffff14; }
.app .topnav { max-width: 1440px; height: 76px; }
.app main.wrap { max-width: 1360px; padding-top: 36px; padding-bottom: 72px; }
.app .text-primary { color: #a3d9b7; }.app .bg-primary { background: #a3d9b7; color: #142822; }.app .hover\:bg-primary-container:hover { background: #c0e7ce; color: #142822; }
.app button, .app a[class*="bg-primary"] { border-radius: 8px; }.app button { min-height: 42px; }
.app input:not([type=checkbox]):not([type=range]):not([type=color]), .app select, .app textarea { background: #10231d; border-color: #ffffff29; border-radius: 8px; min-height: 44px; font-size: 13px; color: #edf3ef; }
.app input::placeholder, .app textarea::placeholder { color: #92a69b; }.app select { padding-right: 28px; }.app option { background: #142822; color: white; }
.app #navPop { background: #20392f; border: 1px solid #496153; }
.app .panel { margin: 0; border: 1px solid #ffffff1f; background: #1b3028; border-radius: 12px; padding: 26px; min-width: 0; }
.studio-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }.studio-heading .eyebrow { color: #a3d9b7; font-size: 9px; }.studio-heading h1 { font-size: clamp(24px,3vw,32px); font-weight: 600; letter-spacing: -1px; margin: 8px 0 10px; }.studio-heading p { color: #a5b6ac; font-size: 13px; }.studio-back { flex-shrink: 0; font-size: 12px; color: #a5b6ac; border: 1px solid #ffffff26; border-radius: 8px; padding: 10px 15px; }
.studio-steps { display: flex; margin-bottom: 28px; border-block: 1px solid #ffffff17; padding-block: 18px; gap: 38px; }.studio-steps li { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #a5b6ac; }.studio-steps b { display: grid; place-items: center; border: 1px solid #ffffff26; border-radius: 50%; width: 26px; height: 26px; font: 10px monospace; }.studio-steps li:first-child { color: #c5e9d1; }.studio-steps li:first-child b { background: #a3d9b7; color: #142822; border-color: #a3d9b7; }
.studio-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); gap: 24px; align-items: start; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }.panel-heading .eyebrow { color: #a3d9b7; font-size: 9px; }.panel-heading h2 { font-size: 20px; margin-top: 5px; font-weight: 600; }.panel-heading > span { color: #a3d9b7; }
#prompt { min-height: 132px; resize: vertical; line-height: 1.7; }
.create-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }.create-controls input { width: 100%; }.create-controls button { grid-column: 1/-1; width: 100%; min-height: 46px; font-size: 12px; }.create-controls #file { display: none; }
#createPanel details { padding: 15px; }#createPanel summary { font-size: 12px; }#genStatus:empty { display: none; }
.studio-empty { min-width: 0; }.canvas-pattern { min-height: 440px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; background-color: #192e26; background-image: radial-gradient(#91b39b25 .8px,transparent .8px); background-size: 16px 16px; border: 1px solid #ffffff1f; border-radius: 12px; }.empty-hoop { display: grid; place-items: center; width: 100px; height: 100px; border: 5px double #789580; outline: 1px solid #78958044; outline-offset: 8px; border-radius: 50%; margin-bottom: 34px; }.empty-hoop span { color: #a3d9b7; font-size: 45px; }.canvas-pattern h2 { font: 500 26px 'Newsreader', Georgia,serif; }.canvas-pattern p { font-size: 12px; color: #a5b6ac; max-width: 260px; line-height: 1.8; margin-top: 12px; }.canvas-label { color: #8da696; font-size: 8px; letter-spacing: 1.8px; margin-top: 32px; }.studio-tip { display: flex; align-items: flex-start; gap: 12px; padding: 20px 4px; }.studio-tip > span { color: #a3d9b7; font-size: 20px; }.studio-tip p { font-size: 11px; color: #a5b6ac; line-height: 1.8; }.studio-tip b { display: block; color: #c6d6ca; font-size: 12px; margin-bottom: 3px; }
.studio-workspace:has(#reviewPanel:not(.hide)) .studio-empty { display: none; }
#reviewPanel > div:first-child { flex-wrap: wrap; gap: 8px; }#reviewPanel > div:first-child > span { font-size: 12px; line-height: 1.7; }
#finalPanel { grid-column: 1/-1; }#finalPanel h3 { font-size: 20px; }#finalPanel .chip { min-height: 42px; }#finalPanel .chip:focus-within { outline: 2px solid #a3d9b7; outline-offset: 3px; }
.app table { min-width: 560px; }.app :has(> table) { overflow-x: auto; }
.app .vcard, .app .pcard { overflow: hidden; }
@media (max-width: 1100px) {
  .hero-layout { gap: 36px; }.hero-copy h1 { font-size: 56px; }.hero-art > img { height: 320px; }.hero-note { flex-wrap: wrap; }.format-strip { flex-wrap: wrap; }.studio-steps { gap: 24px; }
}
@media (max-width: 767px) {
  header.nav > .wrap { height: 68px; }.landing-wrap { width: calc(100% - 40px); }.landing-hero { padding: 42px 0; }.hero-layout { grid-template-columns: 1fr; gap: 44px; }.hero-copy h1 { font-size: 54px; letter-spacing: -2px; }.hero-copy > p { font-size: 14px; }.eyebrow { font-size: 9px; letter-spacing: 1.4px; }.hero-art { margin: 0 5px; transform: none; }.hero-art > img { height: 280px; }.art-tag { left: -6px; bottom: 64px; transform: none; padding: 12px; }.hero-actions { gap: 10px; }.button-primary,.button-secondary { padding: 12px 17px; font-size: 12px; min-height: 48px; }.format-strip { justify-content: center; padding-block: 22px; gap: 18px; text-align: center; }.format-strip > div { gap: 16px; font-size: 16px; }.format-strip > span { width: 100%; }.format-strip > a { display: none; }.landing-section { padding-block: 54px; }.section-heading { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 26px; }.section-heading h2 { font-size: 36px; }.section-heading > p br { display: none; }.process-grid { grid-template-columns: 1fr; gap: 14px; }.process-grid article { padding: 24px; }.process-icon { margin-bottom: 18px; }.inspiration-section { padding-block: 48px; }.inspiration-grid { grid-template-columns: 1fr; gap: 20px; }.inspiration-grid img { height: 250px; }.closing-cta { padding: 56px 0; }.closing-cta h2 { font-size: 42px; }footer.site .wrap { padding-top: 36px; }
  .app .topnav { height: 68px; gap: 12px; }.app main.wrap { padding: 26px 16px 48px; }.studio-heading { align-items: flex-start; flex-direction: column; gap: 16px; }.studio-heading h1 { font-size: 26px; }.studio-heading p { line-height: 1.8; }.studio-back { font-size: 11px; }.studio-steps { gap: 12px; justify-content: space-between; }.studio-steps li { flex-direction: column; align-items: flex-start; font-size: 9px; gap: 8px; }.studio-workspace { grid-template-columns: 1fr; gap: 20px; }.app .panel { padding: 20px; }.canvas-pattern { min-height: 300px; padding: 30px 20px; }.canvas-pattern h2 { font-size: 23px; }.empty-hoop { width: 72px; height: 72px; margin-bottom: 25px; }.empty-hoop span { font-size: 32px; }.studio-tip { padding-bottom: 0; }#finalPanel > div:first-child button { width: 100%; }.app .min-w-\[220px\] { min-width: 0; width: 100%; }.app .min-w-\[200px\] { min-width: 0; }.app input,.app select,.app textarea { font-size: 16px !important; }#createPanel details > div { gap: 12px; }#createPanel details > div > div { min-width: 0; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }.button-primary:hover,.inspiration-grid a:hover img { transform: none; }
}

.auth-layout { min-height: calc(100vh - 82px); }
.auth-layout > aside { background: #193b2d; }
.auth-layout > div { padding-block: 54px; }
.auth-layout h1 { font-size: 40px; }
.auth-layout form + p { margin-top: 24px; }
@media(max-width:767px) { .auth-layout { min-height: calc(100vh - 68px); } .auth-layout > div { padding: 32px 24px; } }

#finalPanel > label { flex-wrap: wrap; }
#finalPanel > label > select { min-width: 0; max-width: 100%; flex: 1 1 180px; }
#variants { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
#variants img { object-fit: contain; background: #f4f1e8; }
#variants .card:focus-visible { outline: 3px solid #a3d9b7; outline-offset: 3px; }