:root {
  --page: #faf8f5;
  --raised: #ffffff;
  --ink: #1c1917;
  --ink-2: #57534e;
  --ink-3: #a8a29e;
  --ink-4: #c9c4be;
  --hairline: #e7e2dc;
  --hover: #f0ece6;
  --teal: #0f766e;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--page); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.5;
  display: flex; justify-content: center; padding: 24px 16px 48px;
}
.card {
  width: 100%; max-width: 640px;
  background: var(--raised);
  border: 1px solid var(--hairline); border-radius: 20px;
  padding: 28px 24px; display: flex; flex-direction: column; gap: 24px;
  box-shadow: 0 1px 2px rgba(28,25,23,0.04);
}
@media (min-width: 768px) { .card { padding: 40px 36px; } }

.head h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 34px; }
.fact { color: var(--ink-2); margin-top: 6px; font-size: 18px; }
.intro { color: var(--ink); margin: 14px 0 0; }

.demo { display: flex; flex-direction: column; gap: 14px; }
.input {
  width: 100%; font: inherit; font-size: 17px; color: var(--ink);
  background: var(--page);
  border: 1px solid var(--hairline); border-radius: 12px;
  padding: 13px 16px; outline: none;
}
.input:focus { border-color: var(--ink-3); }
.input::placeholder { color: var(--ink-4); }
.ghost { min-height: 20px; }
.caption { color: var(--ink-2); font-size: 13px; margin: 0; }
.foot { color: var(--ink-2); font-size: 13px; border-top: 1px solid var(--hairline); padding-top: 16px; }

.widget {
  border: 1px solid var(--hairline); border-radius: 14px;
  background: var(--page);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.widget-label { font-size: 12px; color: var(--ink-3); }
.big { font-size: 30px; font-weight: 600; }
.big-sub { font-size: 15px; font-weight: 400; color: var(--ink-3); }

.rows { display: flex; flex-direction: column; gap: 10px; }
.field { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-2); }
.num {
  font: inherit; color: var(--ink); text-align: right; width: 110px;
  border: 1px solid var(--hairline); border-radius: 8px; padding: 6px 10px; background: var(--raised);
}
.stepper { display: inline-flex; align-items: center; gap: 12px; }
.stepper-value { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink); }
.icon-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hairline);
  background: var(--raised); color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer;
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--raised); color: var(--ink-2); cursor: pointer;
}
.chip.is-on { background: var(--ink); color: var(--raised); border-color: var(--ink); }
.total-line { font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--hairline); padding-top: 10px; }

.clock { font-size: 40px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
.clock.is-done { font-size: 28px; }
.actions { display: flex; gap: 8px; justify-content: center; }
.btn {
  font: inherit; font-size: 14px; padding: 8px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: var(--raised);
}
.btn.is-quiet { background: transparent; color: var(--ink); border-color: var(--hairline); }

.poll-title { font-size: 16px; font-weight: 600; }
.poll { display: flex; flex-direction: column; gap: 6px; }
.poll-row {
  position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center;
  font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--raised); color: var(--ink); text-align: left;
}
.poll-row.is-mine { border-color: var(--ink-3); }
.poll-fill { position: absolute; inset: 0 auto 0 0; background: var(--hover); transition: width 240ms ease; }
.poll-name, .poll-pct { position: relative; }
.poll-pct { color: var(--ink-3); font-variant-numeric: tabular-nums; }

.todo { display: flex; flex-direction: column; gap: 4px; }
.todo-row {
  display: flex; align-items: center; gap: 10px; font: inherit; font-size: 15px; padding: 8px 4px;
  border: none; background: none; color: var(--ink); cursor: pointer; text-align: left;
}
.todo-row.is-done { color: var(--ink-4); text-decoration: line-through; }
.check {
  width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--hairline);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none;
}
.progress { height: 3px; border-radius: 2px; background: var(--hover); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--teal); transition: width 240ms ease; }

.event-title { font-size: 20px; font-weight: 600; }
.event-when { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  font-size: 13px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--hairline); color: var(--ink-2); background: var(--raised);
}

.count { display: flex; gap: 18px; justify-content: center; }
.count > div { display: flex; flex-direction: column; align-items: center; }
.count b { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.count span { font-size: 11px; color: var(--ink-3); }

.hint { font-size: 12px; color: var(--ink-3); }
.widget-label { color: #78716c; }
.hint { color: #78716c; }
.widget { overflow-wrap:anywhere; }
.edit-field { display:flex; flex-direction:column; gap:5px; }
.editor { width:100%; min-width:0; font:inherit; font-size:15px; background:var(--raised); color:var(--ink); border:1px solid var(--hairline); border-radius:8px; padding:9px 10px; }
textarea.editor { resize:vertical; min-height:110px; }
select.editor { min-height:42px; }
button:focus-visible,a:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.cal-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.day-name { text-align:center; font-size:12px; color:var(--ink-2); }
.day { border:1px solid transparent; background:transparent; color:var(--ink); aspect-ratio:1; min-width:0; border-radius:50%; font:inherit; font-size:14px; cursor:pointer; }
.day:hover { background:var(--hover); }
.day.today { background:var(--teal); color:white; }
.day.selected { outline:2px solid var(--ink); outline-offset:-2px; }
.habit-week { display:flex; gap:5px; justify-content:space-between; }
.habit-week .chip { padding:7px 0; flex:1; }
.swatch { height:110px; border:1px solid var(--hairline); border-radius:10px; }
.clock-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.clock-list strong { font-size:24px; font-variant-numeric:tabular-nums; }
a.btn { display:block; text-align:center; text-decoration:none; }
.examples { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.examples .chip { font-size:12px; }
.catalog { margin-top:10px; }
.catalog summary { cursor:pointer; font-size:13px; color:var(--ink-2); }
@media (max-width:360px) { .card { padding:22px 16px; } .widget { padding:12px; } .chip { padding:5px 7px; } .clock-list strong { font-size:21px; } }
.builder-panel { border-top:1px solid var(--hairline); padding-top:18px; display:flex; flex-direction:column; gap:12px; }
.btn:disabled { opacity:.55; cursor:wait; }
.preview-head h2 { font:500 26px Georgia,serif; margin:8px 0 14px; }
.generated:empty { display:none; }
.generated { display:flex; flex-direction:column; gap:14px; }
.gen-block { border:1px solid var(--hairline); border-radius:14px; padding:20px 16px; overflow-wrap:anywhere; }
.gen-block h3 { font:500 24px Georgia,serif; line-height:1.2; margin:8px 0 10px; }
.gen-block p { font-size:14px; color:var(--ink-2); margin:8px 0; }
.gen-block h4 { font-size:16px; margin:4px 0; }
.gen-hero { background:#e8efea; }
.gen-hero h3 { font-size:30px; }
.gen-items { display:grid; gap:10px; }
.gen-item { padding:12px; background:var(--page); border-radius:8px; }
.carousel-nav { display:flex; align-items:center; justify-content:space-between; gap:5px; margin-top:16px; }
.carousel-nav .btn { padding:8px 10px; font-size:12px; }
.slide { background:var(--page); padding:20px 14px; border-radius:10px; min-height:150px; }
.faq-row { padding:12px 0; border-top:1px solid var(--hairline); }
.faq-row summary { cursor:pointer; font-size:14px; }
/* Pagecraft's own visual language, inspired by prompt-first design canvases. */
:root { --page:#101114; --raised:#191a20; --ink:#f4f3f8; --ink-2:#c3c1cd; --ink-3:#9996a8; --ink-4:#777382; --hairline:#35343e; --hover:#2e2b3a; --teal:#b5a2e9; }
body { display:block; min-height:100vh; padding:0 24px 48px; background-color:#101114; background-image:radial-gradient(ellipse at 18% 45%,#44385935,transparent 50%),radial-gradient(ellipse at 86% 55%,#35375340,transparent 48%); background-size:auto,auto; }
.topbar { max-width:1440px; margin:auto; padding:24px 8px; display:flex; align-items:center; justify-content:space-between; }
.wordmark { font-size:24px; font-weight:600; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:12px; letter-spacing:-1px; }
.preview-badge { font-size:9px; letter-spacing:1px; font-weight:500; border:1px solid #66616e; border-radius:20px; padding:3px 7px; color:var(--ink-2); }
.topbar-note { color:var(--ink-3); font-size:12px; }
.card { display:flex; margin:48px auto 0; width:100%; max-width:880px; border:0; box-shadow:none; background:transparent; padding:0; gap:26px; }
.head { text-align:center; margin-bottom:7px; }
.eyebrow { color:#aba3bd; font-size:10px; font-weight:600; letter-spacing:2px; margin-bottom:20px; }
.head h1 { font-family:inherit; font-size:68px; line-height:1.05; letter-spacing:-3.5px; font-weight:450; }
.fact { margin-top:20px; color:var(--ink-3); font-size:14px; }
.intro { font-size:17px; color:var(--ink-2); line-height:1.55; margin:12px 0 16px; }
.demo { gap:14px; }
.input { resize:vertical; min-height:150px; padding:22px 24px; background:linear-gradient(115deg,#24202e,#1a1b23 65%,#222032); border-radius:22px; border-color:#4d455f; font-size:19px; line-height:1.5; box-shadow:0 12px 60px #0003; }
.input:focus { border-color:#baabdf; box-shadow:0 0 0 3px #b5a2e911; }
.input::placeholder { color:#a6a0b5; }
.prompt-shortcuts { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.chip { color:var(--ink-2); background:#202027; border-color:#3b3745; padding:7px 12px; }
.chip:hover { background:#302b3b; border-color:#746a86; }
.chip.is-on { background:#c4b3ee; color:#211a2f; }
#ghost { text-align:center; min-height:0; }
#ghost .caption { font-size:12px; color:var(--ink-3); }
#stage { width:100%; max-width:640px; margin:auto; }
.widget { background:#1b1b21; border-color:#3a3545; padding:22px; border-radius:20px; }
.widget-label { color:#afa7bf; letter-spacing:.4px; }
.editor,.num { background:#24232c; color:var(--ink); color-scheme:dark; }
.hint { color:#aba6b7; }
.btn { background:#c9b7f4; color:#261b3b; border-color:#c9b7f4; font-weight:500; }
.btn:hover { filter:brightness(1.08); }
.btn.is-quiet { background:transparent; color:var(--ink-2); border-color:#494151; }
.icon-btn { color:var(--ink); background:#2b2635; }
.day.today { background:#c9b7f4; color:#241831; }
.day.selected { outline-color:#f4f3f8; }
.catalog { text-align:center; }
.catalog .examples { justify-content:center; }
.builder-panel { border:0; background:#191820; border-radius:20px; padding:18px 22px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px 20px; }
.builder-panel>.widget-label { grid-column:1; }
.builder-panel>.caption { grid-column:1; font-size:12px; line-height:1.5; }
.builder-panel>.btn { grid-column:2; grid-row:1 / span 2; min-height:44px; }
.builder-panel>.hint { grid-column:1 / -1; font-size:11px; }
.generated { margin-top:0; padding:26px; border:1px solid #3d3649; background:#17171d; border-radius:24px; }
.preview-head h2 { font-family:inherit; font-weight:500; color:var(--ink); }
.gen-block { background:#212029; border-color:#41394c; padding:26px; }
.gen-block h3 { font-family:inherit; font-weight:500; letter-spacing:-.7px; }
.gen-hero { background:linear-gradient(120deg,#43384f,#252b3d); }
.gen-hero h3 { font-size:34px; }
.gen-items { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.gen-item,.slide { background:#19181f; }
.gen-block .widget-label { font-size:10px; text-transform:uppercase; letter-spacing:1px; }
.carousel-nav .btn { font-size:12px; }
.foot { max-width:640px; align-self:center; text-align:center; color:#97909f; border-color:#37303f; margin-top:4px; font-size:11px; }
@media(min-width:768px) { .card { padding:0; } }
@media(max-width:600px) { body { padding:0 16px 12px; } .topbar { padding:20px 2px; } .topbar-note { display:none; } .card { margin-top:34px; gap:20px; } .head h1 { font-size:46px; letter-spacing:-2px; } .eyebrow { font-size:9px; margin-bottom:16px; } .intro { font-size:15px; } .fact { margin-top:16px; font-size:13px; } .input { padding:18px; font-size:17px; min-height:145px; border-radius:18px; } .prompt-shortcuts { gap:6px; } .prompt-shortcuts .chip { font-size:11px; padding:7px 10px; } .widget { padding:17px; } .builder-panel { display:flex; padding:18px; align-items:stretch; } .builder-panel .btn { width:100%; } .builder-panel .widget-label { font-size:11px; } .generated { padding:14px; border-radius:20px; } .gen-block { padding:18px 14px; } .gen-hero h3 { font-size:29px; } .carousel-nav .btn { padding:8px; font-size:11px; } .gen-items { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }
.stock-photo { margin:14px 0 0; min-width:0; }
.stock-photo img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:12px; background:#25232b; }
.stock-photo figcaption { font-size:9px; color:#ada6b5; line-height:1.5; padding-top:5px; }
.stock-photo a { color:inherit; text-underline-offset:2px; }
.slide .stock-photo { margin:0 0 14px; }
.visual-examples { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:12px 0; }
.visual-example { min-width:0; border:1px solid #3c3547; border-radius:16px; background:#1d1a24; padding:10px; }
.visual-example .stock-photo { margin:0; }
.visual-example .stock-photo img { aspect-ratio:4/3; border-radius:10px; }
.visual-example .stock-photo figcaption { font-size:8px; }
.example-prompt { border:0; padding:10px 0 2px; background:none; color:var(--ink); font:inherit; font-size:12px; text-align:left; cursor:pointer; }
@media(max-width:600px) { .visual-examples { gap:8px; } .visual-example { padding:7px; border-radius:12px; } .visual-example .stock-photo img { aspect-ratio:1; } .visual-example .stock-photo figcaption { font-size:7px; } .example-prompt { font-size:10px; line-height:1.4; } }

/* Real-webpage generated preview */
.preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.preview-note { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:#ada6b5; }
.browser-frame { border-radius:14px; overflow:hidden; border:1px solid #3d3649; background:#fff; }
.browser-chrome { display:flex; align-items:center; gap:12px; background:#eceaf1; padding:9px 14px; }
.chrome-dots { flex:none; width:40px; height:10px; background:radial-gradient(circle at 6px 50%, #e0655f 4px, transparent 4.6px),radial-gradient(circle at 20px 50%, #e6b84a 4px, transparent 4.6px),radial-gradient(circle at 34px 50%, #5fbf6e 4px, transparent 4.6px); }
.chrome-address { flex:1; min-width:0; background:#fff; border-radius:7px; font-size:11px; color:#6b6474; padding:5px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.webpage { background:var(--pg-bg,#fff); color:var(--pg-ink,#1c1a22); font-size:15px; line-height:1.6; }
.site-nav { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:18px; padding:13px 28px; background:rgba(255,255,255,.94); border-bottom:1px solid #eceaf1; }
.site-brand { font-weight:650; font-size:16px; color:#1c1a22; text-decoration:none; letter-spacing:-.3px; }
.site-links { display:flex; gap:16px; margin-left:auto; }
.site-links a { color:#575163; font-size:13px; text-decoration:none; }
.site-cta { display:inline-block; background:var(--pg-accent,#7c6cf0); color:#fff !important; text-decoration:none; border-radius:999px; padding:9px 18px; font-size:13px; font-weight:550; }
.site-block { padding:52px 28px; border-bottom:1px solid #f0eef4; }
.site-wrap { max-width:980px; margin:0 auto; }
.site-block h2 { font-size:29px; letter-spacing:-.8px; line-height:1.15; margin:0 0 10px; }
.block-lead { color:#575163; max-width:60ch; margin:0 0 26px; }
.site-hero { background:linear-gradient(160deg,#f4f1ff,#eef2fb); }
.site-hero .site-wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center; }
.hero-text h2 { font-size:40px; }
.hero-text p { color:#575163; margin:12px 0 22px; }
.hero-cta { padding:12px 24px; font-size:14px; }
.site-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.site-grid.count-2 { grid-template-columns:repeat(2,1fr); }
.site-grid.count-3 { grid-template-columns:repeat(3,1fr); }
.site-cell { background:#f7f6fa; border:1px solid #eceaf1; border-radius:14px; padding:22px 20px; }
.site-cell h3 { font-size:16px; margin:0 0 6px; }
.site-cell p { color:#575163; font-size:13px; margin:0; }
.site-cell.is-featured { border-color:var(--pg-accent,#7c6cf0); box-shadow:0 10px 26px rgba(124,108,240,.2); }
.webpage .slide { background:#f7f6fa; padding:0; overflow:hidden; border-radius:16px; min-height:0; }
.webpage .slide .stock-photo { margin:0; }
.webpage .slide .stock-photo img { aspect-ratio:16/8; border-radius:0; }
.webpage .slide .stock-photo figcaption { padding:6px 24px 0; }
.slide-copy { padding:16px 24px 24px; }
.slide-copy h3 { margin:0 0 6px; font-size:18px; }
.slide-copy p { margin:0; color:#575163; font-size:14px; }
.webpage .carousel-nav .btn { background:#fff; border:1px solid #d9d4e4; color:#1c1a22; border-radius:999px; }
.webpage .carousel-nav .caption { color:#8a8496; }
.webpage .faq-row { border-top:1px solid #eceaf1; padding:14px 2px; }
.webpage .faq-row summary { font-weight:550; font-size:15px; }
.webpage .faq-row p { color:#575163; font-size:14px; }
.webpage .stock-photo figcaption { color:#8a8496; }
.site-footer { padding:26px 28px; background:#f7f6fa; display:flex; flex-direction:column; gap:4px; }
.site-footer p { font-size:12px; color:#8a8496; margin:0; }
@media(max-width:600px) {
 .site-links { display:none; }
 .site-nav { padding:11px 16px; }
 .site-block { padding:36px 16px; }
 .site-hero .site-wrap { grid-template-columns:1fr; gap:22px; }
 .hero-text h2 { font-size:29px; }
 .site-block h2 { font-size:24px; }
 .site-grid.count-2,.site-grid.count-3 { grid-template-columns:1fr; }
 .browser-chrome { padding:8px 10px; }
}

/* live-build skeleton while a page generates */
.sk-nav{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(15,23,42,.08)}
.sk-hero{padding:48px 18px 28px;display:grid;gap:12px;max-width:640px}
.sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px 18px 36px}
.sk-block{background:linear-gradient(100deg,#e9e5f6 40%,#f5f2fc 50%,#e9e5f6 60%);background-size:200% 100%;animation:skmove 1.1s linear infinite;border-radius:8px}
@keyframes skmove{0%{background-position:120% 0}100%{background-position:-120% 0}}
.sk-pill{height:20px;width:110px;border-radius:999px}
.sk-pill.is-short{width:70px}
.sk-line{height:14px;width:100%}
.sk-line.is-big{height:26px;width:75%}
.sk-line.is-short{width:55%}
.sk-cell{height:86px}
@media (max-width:560px){.sk-grid{grid-template-columns:1fr}}

/* v10: brand kit row + branded preview bits */
.input-wrap { position:relative; width:100%; }
.input-wrap .input { padding-bottom:52px; }
.brand-plus { position:absolute; left:12px; bottom:12px; width:30px; height:30px; border-radius:50%; border:1px solid var(--hairline); background:var(--raised); color:var(--ink-3); font:inherit; font-size:17px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 1px; }
.brand-plus:hover { color:var(--ink); border-color:var(--ink-3); }
.brand-menu { position:absolute; left:8px; bottom:50px; background:var(--raised); border:1px solid var(--hairline); border-radius:12px; padding:5px; flex-direction:column; min-width:172px; z-index:30; box-shadow:0 8px 28px #0009; }
.brand-mi { background:none; border:0; color:var(--ink-2); font:inherit; font-size:13px; text-align:left; padding:8px 10px; border-radius:8px; cursor:pointer; width:100%; }
.brand-mi:hover { background:var(--page); color:var(--ink); }
.brand-row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.brand-link { background:none; border:0; padding:2px 0; font:inherit; font-size:13px; color:var(--ink-3); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.brand-link:hover { color:var(--ink-2); }
.brand-chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--hairline); border-radius:999px; padding:4px 12px; font-size:12px; color:var(--ink-2); background:var(--raised); max-width:100%; }
.brand-chip button { background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:15px; line-height:1; padding:0 0 0 4px; }
.brand-chip button:hover { color:var(--ink); }
.brand-site { display:inline-flex; gap:8px; flex:1 1 260px; }
.brand-site input { flex:1; min-width:0; background:var(--raised); border:1px solid var(--hairline); border-radius:12px; color:var(--ink); padding:8px 12px; font:inherit; font-size:13px; }
.brand-site input:focus { outline:none; border-color:var(--ink-3); }
.brand-site .btn { padding:8px 14px; font-size:13px; }
.brand-status { flex-basis:100%; font-size:12px; color:var(--ink-3); min-height:0; }
.brand-status:empty { display:none; }
.webpage .site-logo { max-height:26px; max-width:150px; object-fit:contain; display:inline-block; vertical-align:middle; }

/* v12: full width layout + publish UI */
.topbar { max-width:none; }
.card { max-width:none; }
/* v15: prompt bar centered at a comfortable width; results/preview keep the full width. */
.head { max-width:760px; margin-left:auto; margin-right:auto; }
.demo > .input, .demo > #ghost, .demo > .brand-row, .demo > .hint { width:100%; max-width:760px; margin-left:auto; margin-right:auto; }
.demo > .generated { width:100%; max-width:none; }
/* v15b: once a build is on screen, the headline block steps out of the way. */
.card:has(.generated:not(:empty)) .head { display:none; }

/* v23: friendlier first run + touch targets */
.chips { flex:none; display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; }
.chip { border:1px solid rgba(255,255,255,.14); background:transparent; color:#b9b3c7; border-radius:999px; padding:8px 14px; font-size:12.5px; font-family:inherit; cursor:pointer; }
.chip:hover { color:#ece9f2; border-color:rgba(255,255,255,.3); }
@media(max-width:600px) { .chip { min-height:44px; padding:10px 16px; } .btn { min-height:44px; } .thumb { min-height:64px; } }

/* v20b: animated hero words (CSS only) */
.wanim { display:inline-block; opacity:0; transform:translateY(.4em); animation:wup .55s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes wup { to { opacity:1; transform:none; } }

/* v20: per-design style variants (Futuristic / Traditional / Minimalistic) */
.webpage.font-serif h2, .webpage.font-serif h3, .webpage.font-serif .site-brand { font-family:Georgia,'Times New Roman',serif; letter-spacing:-.2px; }
.webpage.font-rounded { font-family:'Trebuchet MS','Segoe UI',system-ui,sans-serif; }
.webpage.hero-centered .site-hero .site-wrap { grid-template-columns:1fr; text-align:center; }
.webpage.hero-centered .hero-text p { max-width:56ch; margin-left:auto; margin-right:auto; }
.webpage.hero-band .site-hero .site-wrap { grid-template-columns:1fr; }
.webpage.r-sharp .site-cell, .webpage.r-sharp .stock-photo img, .webpage.r-sharp .slide, .webpage.r-sharp .site-cta { border-radius:3px; }
.webpage.r-round .site-cell { border-radius:22px; }
.webpage.r-round .stock-photo img { border-radius:20px; }
.webpage.theme-dark { color:#ece9f2; }
.webpage.theme-dark .site-nav { background:rgba(18,16,24,.92); border-bottom-color:#2a2733; }
.webpage.theme-dark .site-links a { color:#cfcadb; }
.webpage.theme-dark .site-block { border-bottom-color:#26232e; }
.webpage.theme-dark .site-hero { background:linear-gradient(160deg,#221e35,#13111c); }
.webpage.theme-dark .site-cell { background:#1d1a26; border-color:#2c2937; }
.webpage.theme-dark .site-cell p, .webpage.theme-dark .hero-text p, .webpage.theme-dark .block-lead, .webpage.theme-dark .faq-row p { color:#b3adc2; }
.webpage.theme-dark .slide { background:#1d1a26; }
.webpage.theme-dark .carousel-nav .btn { background:#1d1a26; border-color:#3a3646; color:#e8e5f0; }
.webpage.theme-dark .faq-row { border-top-color:#2a2733; }
.webpage.theme-dark .site-footer { background:#16141d; }

/* v19: one-viewport app shell - chat bar pinned below the scrolling results */
html, body { height:100%; }
body { display:flex; flex-direction:column; height:100dvh; padding:0 24px 16px; overflow:hidden; }
.topbar { flex:none; }
.card { flex:1; min-height:0; display:flex; flex-direction:column; margin-top:18px; }
.demo { flex:1; min-height:0; display:flex; flex-direction:column; }
.demo > .generated { flex:1; min-height:0; overflow-y:auto; }
.demo > .input, .demo > .brand-row, .demo > #ghost, .demo > .hint { flex:none; }
.thumb.is-pending { pointer-events:none; border-style:dashed; }
.thumb.is-pending .thumb-scale { background:#f2f0f7; }
.pick-layout.is-single { grid-template-columns:1fr; }
@media(max-height:640px) { body { overflow:auto; } }

/* v17: main preview + design thumbnails on the side */
.pick-layout { display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:14px; align-items:start; }
.pick-main { min-width:0; }
.thumb-rail { display:flex; flex-direction:column; gap:10px; }
.thumb { display:flex; flex-direction:column; gap:6px; border:1px solid #3d3649; background:#141318; border-radius:12px; padding:8px; cursor:pointer; text-align:left; font:inherit; color:inherit; }
.thumb.is-active { border-color:#b5a2e9; outline:2px solid #b5a2e955; }
.thumb-scale { display:block; height:110px; overflow:hidden; border-radius:8px; pointer-events:none; background:#fff; }
.thumb-inner { display:block; width:1200px; transform:scale(.15); transform-origin:top left; }
.thumb-label { font-size:11px; color:var(--ink-2); }
@media(max-width:900px) { .pick-layout { grid-template-columns:1fr; } .thumb-rail { flex-direction:row; order:-1; overflow-x:auto; } .thumb { flex:1; min-width:0; } .thumb-inner { transform:scale(.085); } .thumb-scale { height:62px; } .thumb-label { font-size:10px; } }
.pub-wrap { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pub-label { font-size:12px; color:var(--ink-2); }
.pub-input { background:var(--raised); border:1px solid var(--hairline); border-radius:10px; color:var(--ink); padding:7px 10px; font:inherit; font-size:13px; width:190px; }
.pub-input:focus { outline:none; border-color:var(--ink-3); }
.pub-err { font-size:12px; color:#e0655f; flex-basis:100%; }
.pub-err:empty { display:none; }
.pub-live { font-size:12px; color:var(--ink-2); }
.pub-link { font-size:12px; color:var(--teal); word-break:break-all; }
/* v24: Lovable-style split - chat left, preview right with domain bar, thumbs above */
.chat-log{display:none;flex-direction:column;gap:12px;flex:1 1 0;min-height:0;overflow-y:auto;padding:2px}
.chat-log:not(:empty){display:flex}
.msg{background:var(--raised);border:1px solid var(--hairline);border-radius:14px;padding:11px 15px;font-size:14px;line-height:1.55;color:var(--ink);max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.msg+.msg{margin-top:0}
.msg.is-user{background:transparent;border-style:dashed;color:var(--ink-2);font-size:13px}
.msg .msg-meta{margin-top:5px;font-size:11px;color:var(--ink-3)}
body:has(.generated:not(:empty)) .panel{overflow:hidden}
.panel { display:flex; flex-direction:column; gap:14px; flex:none; width:100%; max-width:760px; margin:0 auto; }
.panel .input, .panel .brand-row, .panel #ghost, .panel .hint, .panel .chips { width:100%; margin:0; flex:none; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.topbar-actions { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
body:has(.generated:not(:empty)) .demo { flex-direction:row-reverse; gap:20px; }
body:has(.generated:not(:empty)) .panel { width:350px; flex:none; max-width:none; margin:0; overflow-y:auto; padding-top:4px; }
body:has(.generated:not(:empty)) .panel .input { min-height:110px; font-size:15px; padding:16px 18px; }
body:has(.generated:not(:empty)) .demo > .generated { flex:1 1 0; min-width:0; min-height:0; overflow:hidden; padding:14px; }
.pick-layout { display:flex; flex-direction:column; gap:12px; flex:1; min-height:0; width:100%; }
.pick-main { flex:1 1 auto; min-height:0; min-width:0; overflow-y:auto; }
.thumb-rail { flex-direction:row; order:-1; overflow-x:auto; flex:none; }
.thumb { width:170px; flex:none; }
@media(max-width:600px) {
 body:has(.generated:not(:empty)) .demo { flex-direction:column; gap:12px; }
 body:has(.generated:not(:empty)) .demo > .generated { order:-1; flex:1; }
 body:has(.generated:not(:empty)) .panel { width:100%; max-height:44dvh; }
 body:has(.generated:not(:empty)) .panel .input { min-height:72px; font-size:14px; padding:12px 14px; }
 .thumb { width:130px; }
}

/* v24b: fix split sizing */
.generated > * { max-width:100%; }

/* v24c: stage is legacy chrome, keep it out of the split; constrain the rail */
#stage { display:none; }
.pick-layout { min-width:0; }
.thumb-rail { width:100%; min-width:0; }

/* v25: standalone image mode */
.imagine-card { display:flex; flex-direction:column; gap:14px; }
.imagine-img { width:100%; height:auto; border-radius:16px; display:block; background:#25232b; }
.imagine-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* v26: generating-image shimmer */
.gen-shimmer { aspect-ratio:16/10; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#9a93a8; font-size:12px; background:linear-gradient(100deg,#221f2c 30%,#322e42 45%,#221f2c 60%); background-size:200% 100%; animation:shim 1.4s linear infinite; }
.gen-shimmer.is-large { min-height:300px; border-radius:16px; font-size:14px; }
@keyframes shim { to { background-position:-200% 0; } }
/* v35: browser-use live view */
.browse-card{display:flex;flex-direction:column;gap:10px}
.browse-shot{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.08);display:block}
.browse-result .browse-shot{height:300px;object-fit:cover;object-position:top}
@media(max-width:600px){.browse-result .browse-shot{height:200px}}
.browse-log{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto}
.browse-step{font-size:12px;color:var(--mut,#8b8b95);font-family:ui-monospace,monospace}
.browse-result{display:flex;flex-direction:column;gap:12px}
.browse-answer{font-size:16px;line-height:1.5;color:var(--ink,#eee)}
.browse-meta{font-size:12px;color:var(--mut,#8b8b95)}

.input::placeholder{transition:color .35s ease}
.input.ph-fade::placeholder{color:transparent}