:root {
  --bg: #fbfaf8; --panel: #ffffff; --ink: #17171a; --dim: #6b6b74; --faint: #9a9aa3;
  --line: #ebe9e4; --line2: #dedbd4; --soft: #f4f2ee;
  --accent: #ffb020; --accent-ink: #3a2500; --glow: #ffd36b;
  --bad: #d4382c; --good: #1f9d55;
  --r: 12px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 14px/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
       -webkit-font-smoothing: antialiased; }
a { color: inherit; }
code, pre, .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.muted { color: var(--dim); }

button, .btn { font: inherit; cursor: pointer; border-radius: 10px; border: 1px solid transparent;
  padding: 7px 13px; background: var(--soft); color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .12s, border-color .12s, transform .06s; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: default; }
.primary { background: var(--ink); color: #fff; }
.primary:hover { background: #2c2c31; }
.outline { background: var(--panel); border-color: var(--line2); }
.outline:hover { border-color: var(--ink); }
.ghost { background: transparent; color: var(--dim); }
.ghost:hover { color: var(--ink); background: var(--soft); }
.ghost.on { color: var(--ink); background: var(--soft); }
.danger { color: var(--bad); }
.tiny { padding: 3px 8px; font-size: 12px; }
.wide { width: 100%; }
input, textarea { font: inherit; color: inherit; }

/* ---------------- top bar ---------------- */
.top { height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 18px;
       border-bottom: 1px solid transparent; position: relative; z-index: 3; }
body.in-work .top { border-bottom-color: var(--line); background: var(--panel); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px;
         letter-spacing: -.01em; text-decoration: none; }
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sep { color: var(--line2); font-size: 18px; }
.name { border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 5px 8px;
        font-weight: 550; width: 260px; max-width: 34vw; outline: none; text-overflow: ellipsis; }
.name:hover { border-color: var(--line); }
.name:focus { border-color: var(--line2); background: var(--panel); }
.spacer { flex: 1; }
.tools { display: flex; align-items: center; gap: 6px; }
.work-only { display: none !important; }
body.in-work .work-only { display: flex !important; }
.seg { display: flex; background: var(--soft); border-radius: 10px; padding: 2px; margin-right: 6px; }
.seg button { padding: 5px 9px; background: transparent; color: var(--faint); border-radius: 8px; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.account { display: flex; align-items: center; gap: 8px; min-width: 32px; justify-content: flex-end; }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 99px; padding: 0; overflow: hidden; background: var(--ink);
          color: #fff; font-weight: 600; font-size: 13px; border: 2px solid var(--panel);
          box-shadow: 0 0 0 1px var(--line2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.badge { font-size: 11px; font-weight: 650; padding: 3px 8px; border-radius: 99px; background: var(--soft); color: var(--dim); }
.badge.pro { background: var(--accent); color: var(--accent-ink); }

.menu { position: fixed; top: 52px; right: 12px; z-index: 20; background: var(--panel); border: 1px solid var(--line);
        border-radius: var(--r); box-shadow: 0 16px 40px rgba(20,20,30,.14); padding: 6px; min-width: 240px; }
.menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu .who b { display: block; overflow: hidden; text-overflow: ellipsis; }
.menu .usage { margin-top: 8px; height: 5px; background: var(--soft); border-radius: 9px; overflow: hidden; }
.menu .usage i { display: block; height: 100%; background: var(--accent); }
.menu button { width: 100%; justify-content: flex-start; background: transparent; padding: 8px 10px; }
.menu button:hover { background: var(--soft); }
.menu .legal { display: flex; gap: 14px; padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 12px; }
.menu .legal a { color: var(--faint); text-decoration: none; }
.menu .legal a:hover { color: var(--ink); }

/* ---------------- home ---------------- */
.home { min-height: 100vh; margin-top: -54px; padding: 54px 20px 80px; position: relative; overflow: hidden; isolation: isolate; }
.home::before { content: ""; position: absolute; inset: -260px -10% auto; height: 980px; z-index: -1;
  background: radial-gradient(40% 50% at 50% 55%, rgba(255, 196, 61, .42), transparent 70%),
              radial-gradient(30% 40% at 30% 40%, rgba(255, 128, 92, .22), transparent 70%),
              radial-gradient(30% 40% at 72% 42%, rgba(255, 99, 160, .18), transparent 70%);
  filter: blur(10px); }
.hero { max-width: 720px; margin: 0 auto; padding-top: 14vh; text-align: center; }
.hero h1 { font-size: clamp(34px, 5.4vw, 56px); line-height: 1.04; letter-spacing: -.035em; margin: 0 0 12px; font-weight: 720; }
.lede { color: var(--dim); font-size: 17px; margin: 0 0 30px; }

.prompt-box { text-align: left; background: var(--panel); border: 1px solid var(--line2); border-radius: 18px;
  padding: 14px 14px 10px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 50px rgba(120, 80, 0, .10);
  transition: border-color .15s, box-shadow .15s; }
.prompt-box:focus-within { border-color: #c9c4b8; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 60px rgba(120, 80, 0, .16); }
.prompt-box textarea { width: 100%; border: 0; outline: 0; resize: none; background: transparent; font-size: 16px; line-height: 1.5; min-height: 52px; }
.prompt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.quota { font-size: 12px; color: var(--faint); }
.send { width: 36px; height: 36px; border-radius: 99px; padding: 0; background: var(--ink); color: #fff; flex: none; }
.send:hover { background: #33333a; }
.busy .send { opacity: .35; pointer-events: none; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.chip { background: rgba(255,255,255,.7); border: 1px solid var(--line); color: var(--dim); font-size: 13px; padding: 6px 12px; border-radius: 99px; }
.chip:hover { color: var(--ink); border-color: var(--line2); background: var(--panel); }

.recent { max-width: 1080px; margin: 12vh auto 0; }
.recent h2 { font-size: 15px; font-weight: 650; margin: 0 0 14px; }
.landing .hero { padding-top: 9vh; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; }
.cta { font-size: 16px; font-weight: 650; padding: 13px 26px; border-radius: 99px; box-shadow: 0 10px 30px -10px rgba(23, 23, 26, .45); }
.cta-note { color: var(--dim); font-size: 14px; }
.demo { max-width: 1120px; margin: 6vh auto 0; }
.demo video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; background: #0b0b0e;
              border: 1px solid var(--line2); box-shadow: 0 30px 80px -30px rgba(23, 23, 26, .35); }
.demo-note { color: var(--faint); font-size: 13px; text-align: center; margin: 12px 0 0; }
.points { max-width: 1040px; margin: 9vh auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.points h3 { font-size: 16px; font-weight: 680; letter-spacing: -.01em; margin: 0 0 6px; }
.points p { color: var(--dim); font-size: 14.5px; margin: 0; }
.why, .faq { max-width: 1040px; margin: 11vh auto 0; }
.why h2, .faq h2 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -.025em; font-weight: 720; margin: 0 0 22px; }
.reasons { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: why; }
.reasons li { counter-increment: why; }
.reasons li::before { content: counter(why); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 99px;
                      background: var(--accent); color: var(--accent-ink); font-weight: 750; font-size: 13px; margin-bottom: 10px; }
.reasons h3 { font-size: 16px; font-weight: 680; margin: 0 0 6px; }
.reasons p { color: var(--dim); font-size: 14.5px; margin: 0; }
.race { margin: 40px 0 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px 18px; }
.race figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.race figcaption b { font-size: 16px; }
.race figcaption span { color: var(--dim); font-size: 13.5px; }
.race ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.race li { display: grid; grid-template-columns: 250px 1fr 52px; align-items: center; gap: 14px; font-size: 14px; color: var(--dim); }
.race li.us { color: var(--ink); font-weight: 650; }
.race .track { height: 12px; }
.race .track i { display: block; height: 100%; min-width: 6px; border-radius: 0 4px 4px 0; background: #d6d1c6; }
.race li.us .track i { background: var(--ink); }
.race .t { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.race .fine { color: var(--faint); font-size: 12px; text-align: left; margin: 16px 0 0; }
.race .fine a { color: inherit; }
.faq h3 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 26px 0 6px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 14px 28px 14px 0; font-weight: 600; font-size: 15.5px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 11px; font-size: 20px; font-weight: 400; color: var(--faint); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--dim); font-size: 14.5px; margin: 0 0 16px; max-width: 720px; }
.cta-end { text-align: center; margin: 11vh auto 0; }
.cta-end h2 { font-size: clamp(26px, 3.6vw, 36px); letter-spacing: -.03em; font-weight: 720; margin: 0 0 18px; }
.site-foot { max-width: 1040px; margin: 11vh auto 0; padding: 20px 0 8px; border-top: 1px solid var(--line);
             display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--faint); }
.site-foot a { color: var(--dim); text-decoration: none; }
.site-foot a:hover { color: var(--ink); }
@media (max-width: 720px) {
  .points, .reasons { grid-template-columns: 1fr; gap: 20px; }
  .race { padding: 18px 16px 14px; }
  .race li { grid-template-columns: 1fr 52px; row-gap: 6px; }
  .race .who { grid-column: 1 / -1; }
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
        cursor: pointer; text-decoration: none; transition: border-color .12s, transform .12s, box-shadow .12s; display: block; }
.card:hover { border-color: var(--line2); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.card .swatch { height: 104px; display: grid; place-items: center; font-size: 30px; font-weight: 700; color: rgba(255,255,255,.92); letter-spacing: -.03em; }
.card .meta { padding: 10px 12px 12px; }
.card .meta b { display: block; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card .meta span { color: var(--faint); font-size: 12px; }
.card .del { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0; border-radius: 99px;
             background: rgba(0,0,0,.28); color: #fff; opacity: 0; font-size: 15px; }
.card:hover .del { opacity: 1; }
.card .live { position: absolute; top: 9px; left: 9px; font-size: 10.5px; font-weight: 650; background: rgba(255,255,255,.9);
              border-radius: 99px; padding: 2px 7px; color: var(--good); }

/* ---------------- workspace ---------------- */
.work { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; height: calc(100vh - 54px); }
.chat { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--panel); }
.log { flex: 1; overflow: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 94%; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.msg.user { align-self: flex-end; background: var(--soft); padding: 9px 13px; border-radius: 14px 14px 4px 14px; }
.msg.assistant { align-self: flex-start; padding: 2px 2px; }
.msg.system { align-self: center; color: var(--faint); font-size: 12px; }
.msg.error { align-self: stretch; background: #fff4f2; border: 1px solid #f6d3cd; color: #8c2b20; padding: 9px 12px; border-radius: 10px;
             font-family: ui-monospace, monospace; font-size: 12px; }
.msg .meta { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--faint); }
.ver { font: 600 11px/1 ui-sans-serif, system-ui; padding: 4px 8px; border-radius: 99px; background: var(--soft); color: var(--dim); border: 1px solid var(--line); }
.ver:hover { border-color: var(--line2); color: var(--ink); }
.ver.current { background: #fff6dd; border-color: #f4d58a; color: var(--accent-ink); cursor: default; }
.msg .fix { margin-top: 8px; font-family: ui-sans-serif, system-ui; }
.thinking { color: var(--dim); }
.thinking .tail { margin-top: 4px; font-size: 12px; color: var(--faint); font-style: italic; max-height: 3.2em; overflow: hidden; }
.dots::after { content: ''; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

.composer { margin: 8px 12px 12px; display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--line2);
            border-radius: 16px; padding: 8px 8px 8px 14px; background: var(--panel); }
.composer:focus-within { border-color: #c9c4b8; }
.composer textarea { flex: 1; border: 0; outline: 0; resize: none; background: transparent; max-height: 200px; line-height: 1.45; padding: 5px 0; }
.composer.busy { opacity: .6; }

.stage { display: flex; flex-direction: column; min-width: 0; background: var(--soft); }
.frame-wrap { position: relative; flex: 1; min-height: 0; margin: 12px; }
.frame-mount { position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; background: #fff;
               box-shadow: 0 0 0 1px var(--line), 0 6px 24px rgba(0,0,0,.05); transition: width .2s, left .2s; }
.frame-wrap.mobile .frame-mount { width: 390px; left: calc(50% - 195px); right: auto; border-radius: 26px;
               box-shadow: 0 0 0 8px #1d1d21, 0 20px 50px rgba(0,0,0,.18); top: 10px; bottom: 10px; }
.preview-iframe { width: 100%; height: 100%; border: 0; display: block; }
.empty-state { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); pointer-events: none;
               background: var(--panel); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); }

.building { position: absolute; inset: 0; border-radius: var(--r); pointer-events: none; overflow: hidden;
            background: linear-gradient(180deg, rgba(251,250,248,.55), rgba(251,250,248,.92)); backdrop-filter: blur(3px);
            display: flex; flex-direction: column; justify-content: flex-end; }
.building.fresh { background: var(--panel); backdrop-filter: none; box-shadow: 0 0 0 1px var(--line); }
.building.fresh pre { color: #a19d93; }
.building-label { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px;
                  background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px; font-weight: 550;
                  box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.pulse { width: 9px; height: 9px; border-radius: 99px; background: var(--accent); box-shadow: 0 0 0 0 rgba(255,176,32,.6); animation: pulse 1.3s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(255,176,32,0); } 100% { box-shadow: 0 0 0 0 rgba(255,176,32,0); } }
.building pre { margin: 0; padding: 18px 22px; font-size: 11.5px; line-height: 1.55; color: #8d8a82; white-space: pre; overflow: hidden;
                -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%); max-height: 60%; }

.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 55%); z-index: 4; display: flex; flex-direction: column;
          background: #16161a; border-radius: var(--r); box-shadow: -20px 0 60px rgba(0,0,0,.25); overflow: hidden; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; color: #c9c9d1; font-size: 12px; }
.drawer .ghost { color: #9a9aa6; }
.drawer .ghost:hover { background: #26262c; color: #fff; }
.code { flex: 1; overflow: auto; margin: 0; padding: 4px 14px 14px; font-size: 12px; line-height: 1.55; color: #dedee6; white-space: pre; }

.stats { padding: 0 16px 8px; color: var(--faint); font-size: 11.5px; font-family: ui-monospace, monospace; min-height: 22px; text-align: right; }

/* ---------------- dialogs, toast ---------------- */
.dlg { border: 1px solid var(--line); border-radius: 18px; padding: 26px; width: min(400px, calc(100vw - 32px));
       box-shadow: 0 30px 80px rgba(20,20,30,.25); color: var(--ink); }
.dlg::backdrop { background: rgba(20, 18, 14, .32); backdrop-filter: blur(2px); }
.dlg h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.01em; }
.dlg p { margin: 0 0 16px; }
.dlg-x { position: absolute; top: 12px; right: 12px; }
.dlg-x button { width: 30px; height: 30px; padding: 0; background: transparent; font-size: 20px; color: var(--faint); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row2 button { padding: 10px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; margin: 16px 0; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack input, .share-row input { border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; outline: none; background: var(--panel); }
.stack input:focus, .share-row input:focus { border-color: var(--ink); }
.stack .primary { padding: 10px; }
.fine { font-size: 12px; color: var(--faint); margin-top: 14px !important; margin-bottom: 0 !important; text-align: center; }
.otp { width: 100%; text-align: center; font: 600 28px/1 ui-monospace, monospace; letter-spacing: .5em; padding: 12px 0 12px .5em;
       border: 1px solid var(--line2); border-radius: 12px; outline: none; }
.otp:focus { border-color: var(--ink); }
.err { color: var(--bad); font-size: 13px; margin: 12px 0 0 !important; }
.perks { padding: 0; margin: 0 0 20px; list-style: none; display: grid; gap: 8px; }
.perks li::before { content: '✓'; color: var(--good); font-weight: 700; margin-right: 9px; }
/* add credit */
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.pack { flex-direction: column; gap: 2px; padding: 12px 8px; background: var(--accent); color: var(--accent-ink); border-radius: 12px; }
.pack:hover:not(:disabled) { background: #ffbd3f; }
.pack:disabled { opacity: .6; cursor: progress; }
.pack b { font-size: 20px; font-weight: 700; }
.pack span { font-size: 12px; font-weight: 550; }
.share-row { display: flex; gap: 8px; }
.share-row input { flex: 1; min-width: 0; font-size: 13px; }
.share-actions { display: flex; gap: 8px; margin-top: 12px; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 50; background: var(--ink); color: #fff;
         padding: 10px 16px; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.25); max-width: min(520px, 90vw); }

@media (max-width: 820px) {
  .work { grid-template-columns: 1fr; grid-template-rows: 1fr 46%; }
  .chat { border-right: 0; border-top: 1px solid var(--line); order: 2; }
  .tools .seg, #btn-download { display: none; }
  .name { width: 140px; }
  .hero { padding-top: 8vh; }
}

.mark { display: block; height: 24px; width: auto; flex: none; }

/* credit */
.add-credit { background: var(--accent); color: var(--accent-ink); font-weight: 650; }
.add-credit:hover { background: #ffbd3f; }
.credit-pill { flex: none; font-variant-numeric: tabular-nums; font-weight: 650; font-size: 13px; padding: 5px 11px; border-radius: 99px;
               background: var(--soft); color: var(--ink); }
.credit-pill:hover { background: var(--line); }
.credit-pill.low { background: #fff1d1; color: var(--accent-ink); }
.credit-pill.empty { background: #ffe4dc; color: #a3361a; }
.price { margin: -2px 0 8px !important; font-size: 15px; font-weight: 600; }
.menu .credit-line { margin-top: 3px; font-variant-numeric: tabular-nums; }
.usage-hint { margin: 0 14px; padding: 7px 10px; border-radius: 10px; background: #fff6dd; color: var(--accent-ink); font-size: 12px; cursor: pointer; }
.usage-hint:hover { background: #ffefc4; }
.msg.notice { align-self: stretch; background: #fff8e6; border: 1px solid #f4d58a; color: var(--accent-ink); padding: 10px 12px; border-radius: 10px; }

/* phones: the workspace header keeps the name, Share, the balance and the avatar */
@media (max-width: 520px) {
  .top { gap: 6px; padding: 0 10px 0 12px; }
  body.in-work .brand span { display: none; }
  body.in-work .spacer { display: none; }
  .crumbs { flex: 1 1 auto; }
  .tools, .account { flex: none; }
  .name { width: 100%; max-width: none; min-width: 0; }
  #btn-code { display: none; }
  .credit-pill { padding: 5px 9px; }
}