:root {
  color-scheme: light; --ink:#101820; --muted:#615873; --purple:#6400ff; --pale:#eee8ff;
  --line:#ded7ea; --paper:#fcfbff; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
* { box-sizing:border-box }
body { margin:0; color:var(--ink); background:var(--paper); font-size:14px }
button,textarea,select,input { font:inherit }
button,select { cursor:pointer }
button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible,.attach:focus-within { outline:2px solid var(--purple); outline-offset:3px }
[hidden] { display:none!important }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.topbar { height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 25px; gap:12px; border-bottom:1px solid var(--line); background:#fff }
.brand { display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:750;font-size:16px;letter-spacing:-.025em }
.brand img { flex:none }
.brand-divider { color:#a399b7;margin:0 3px;font-weight:400 }
.top-actions { display:flex; align-items:center;gap:9px }
.top-actions select { max-width:190px }
.login-card { width:min(420px,calc(100% - 32px));margin:12svh auto 0;padding:32px;background:#fff;border:1px solid var(--line);border-radius:14px }
.layout { display:grid;grid-template-columns:minmax(320px,365px) minmax(0,1fr);min-height:calc(100svh - 68px) }
.sidebar { border-right:1px solid var(--line);background:#fff;position:relative;padding:31px 25px 25px }
.sidebar h1 { margin:9px 0 9px; font-size:33px; line-height:1.03; letter-spacing:-.057em; overflow-wrap:anywhere }
.eyebrow { margin:0; color:#6146a1; font:650 10px ui-monospace,SFMono-Regular,monospace; letter-spacing:.13em }
.intro { margin:0 0 24px;color:var(--muted);line-height:1.55 }
label { display:block;font-weight:700; margin-bottom:7px }
textarea,select { width:100%;color:var(--ink);border:1px solid var(--line);background:#fbf9ff;border-radius:9px }
textarea { display:block;resize:vertical;padding:11px 12px;line-height:1.47;min-height:72px }
textarea::placeholder { color:#766c87 }
select { min-height:37px; padding:7px 9px }
#mailing-search { width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fbf9ff;color:var(--ink) }
#mailing-search:focus-visible { outline:2px solid var(--purple);outline-offset:3px }
#mailing-search-form { margin-bottom:14px }
#mailing-list { padding:4px;min-height:160px }
#mailing-list option { padding:8px 6px;white-space:normal }
#mailing-status { margin:6px 0 }
.mailing-card { overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--paper);margin-top:12px }
.mailing-card img { display:block;width:100%;max-height:165px;object-fit:cover }
.mailing-card div { padding:10px }
.mailing-card p { margin:4px 0 }
.mailing-card a { color:#5636b5;font-size:12px }
#build-mailing,.start-switch { margin-top:12px }
#start-mailing { display:block }
.label-row { display:flex;justify-content:space-between;gap:9px;align-items:baseline;margin-top:17px }
.label-row span { font-size:11px;color:var(--muted) }
.attachments { display:flex;gap:8px;margin:10px 0 14px;flex-wrap:wrap }
.attach { display:inline-block; cursor:pointer; border:1px solid var(--line);font-size:11px;font-weight:650;border-radius:6px;padding:5px 7px;margin:0 }
.attach:hover { background:var(--pale) }
.attachments:focus-within { outline:2px solid var(--purple); outline-offset:3px }
.button { display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:40px;padding:8px 13px;border-radius:8px;border:1px solid transparent;text-decoration:none;font-weight:710;font-size:13px;white-space:nowrap }
.button.primary { color:#fff;background:var(--purple);justify-content:space-between }
.button.primary:hover { background:#3f1ac1 }
.button.outline { border-color:var(--line);color:var(--ink);background:#fff }
.button.outline:hover,.button.outline[aria-pressed=true] { background:var(--pale);border-color:#c3b2f0 }
.button.small { min-height:35px;font-size:12px }
.button:disabled { opacity:.48;cursor:default }
.full { width:100% }
.text-button { padding:0;background:transparent;border:0;color:#5636b5;font-weight:650;font-size:12px }
#example { margin-top:10px }
.hint,.workspace-status { color:var(--muted);font-size:12px;line-height:1.45 }
.model-cost { margin-top:9px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-size:12px }
.model-cost summary { cursor:pointer;line-height:1.5 }
.model-cost summary strong { float:right;color:var(--ink);font-variant-numeric:tabular-nums }
.model-cost dl { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:10px 0 0 }
.model-cost dt { color:var(--muted) }
.model-cost dd { margin:2px 0 0;font-weight:650;font-variant-numeric:tabular-nums }
.model-cost p { margin:8px 0 0 }
.selection { background:var(--pale);border-left:3px solid var(--purple);padding:7px 9px;margin:0 0 7px;font-size:12px;overflow-wrap:anywhere }
.selection-actions,.text-edit-buttons { display:flex;align-items:center;gap:9px }
.text-edit-buttons .primary { flex:1;justify-content:center }
.text-button:disabled { opacity:.48;cursor:default }
#revise { margin-top:10px }
.share { padding-top:16px;margin-top:17px;border-top:1px solid var(--line) }
.job-status-card,.error { padding:10px;border:1px solid var(--line);border-radius:7px;line-height:1.45 }
.job-status-card { display:flex;align-items:flex-start;gap:9px;margin:0 0 12px;background:#f7f3ff }
.job-status-card p { margin:3px 0 0;color:var(--muted);font-size:12px }
.job-status-card[data-state="ready"] { background:#eef9f3;color:#176045;border-color:#c8e7d6 }
.job-status-card[data-state="failed"] { background:#fff1ef;color:#871b31;border-color:#f0c9ce }
.spinner { flex:none;display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:studio-spin .85s linear infinite }
.job-status-card .spinner { margin-top:3px;color:var(--purple) }
#revise:has(.spinner:not([hidden])) { opacity:1;background:#5024c6;cursor:progress }
@keyframes studio-spin { to { transform:rotate(360deg) } }
@media(prefers-reduced-motion:reduce) { .spinner { animation:none } }
.error { background:#fff1ef;color:#871b31;border-color:#f0c9ce }
.workspace { display:flex;flex-direction:column;min-width:0;background:#f2eef8 }
.workspace-bar { height:51px;display:flex;justify-content:space-between;align-items:center;padding:0 19px;background:#faf8ff;border-bottom:1px solid var(--line);gap:12px }
.preview-progress { margin:0;padding:9px 19px;color:#483579;background:#eee8ff;border-bottom:1px solid var(--line);font-size:12px;line-height:1.45 }
.workspace:has(.preview-progress:not([hidden])) #preview { height:calc(100svh - 189px) }
.workspace-name,.preview-controls,.segmented { display:flex;align-items:center;gap:8px }
.status-dot { width:8px;height:8px;flex:none;border-radius:50%;background:#a698ba }
.status-dot[data-state="working"] { background:#d58a18 }
.status-dot[data-state="ready"] { background:#248660 }
.segmented { gap:0;padding:2px;border-radius:7px;background:#eae3f3 }
.segmented button { border:0;border-radius:5px;background:transparent;color:var(--muted);font-size:11px;padding:6px 7px }
.segmented button[aria-pressed=true] { background:white;color:var(--ink);font-weight:700 }
.board { position:relative; flex:1; min-height:510px; display:grid; place-items:center; overflow:hidden; padding:16px;
  background-image:radial-gradient(#d8cde7 1px,transparent 1px);background-size:18px 18px }
.blank { text-align:center;padding:24px;max-width:420px }
.blank h2 { margin:11px 0 6px;font-size:32px;letter-spacing:-.054em;line-height:1.04 }
.blank p:last-child { color:var(--muted);line-height:1.5 }
.blank-diagram { position:relative;width:140px;height:110px;margin:0 auto 24px }
.paper { position:absolute;inset:11px 14px;border:1px solid #a98ddd;border-radius:8px;background:#fff;transform:rotate(-8deg);padding:13px 12px;text-align:left;box-shadow:5px 6px 0 #e7ddfa }
.paper span { display:block;height:4px;background:#cab7ee;border-radius:3px;width:68%;margin-bottom:6px }
.paper span:first-child { height:24px;background:#5731d1;width:100%;border-radius:4px }
.paper span:nth-child(2) { width:54%;background:#9274ce }
.corner { position:absolute;width:16px;height:16px;border:1px solid #7e58d1 }
.corner.top-left { left:1px;top:0;border-right:0;border-bottom:0 }
.corner.bottom-right { right:0;bottom:0;border-left:0;border-top:0 }
.cursor { position:absolute;width:40px;right:3px;bottom:0 }
#preview { display:block;width:100%;height:calc(100svh - 153px);min-height:470px;border:1px solid #d2c7e4;border-radius:10px;background:white;box-shadow:0 6px 18px #3e235219 }
#preview.mobile { max-width:390px }
@media(max-width:850px) { .layout { grid-template-columns:300px minmax(0,1fr) }.sidebar { padding:22px 16px }.workspace-status { display:none }.preview-controls .small { padding:5px }.workspace-bar { padding:0 10px } }
@media(max-width:680px) { .topbar { padding:0 12px }.brand span { font-size:13px }.top-actions select { max-width:95px }.layout { display:flex;flex-direction:column }.sidebar { border-right:0;border-bottom:1px solid var(--line) }.workspace { min-height:490px }.board { min-height:430px;padding:9px }.blank h2 { font-size:27px }#preview { height:65svh;min-height:410px } }
.starter-choice{display:flex;gap:16px;padding:14px;background:#f2ecff;border:1px solid #ded0f6;margin:0 0 24px;align-items:center}.starter-choice>img{width:95px;height:110px;object-fit:cover;object-position:top}.starter-choice .eyebrow{display:block;font-size:9px;margin:0 0 7px}.starter-choice strong{display:block;font-size:17px;margin-bottom:10px}.starter-choice a{display:block;font-size:12px;color:#6400ff;margin-bottom:7px}.starter-choice button{font-size:11px}.top-actions>a{text-decoration:none}@media(max-width:600px){.top-actions{flex-wrap:wrap}.topbar{height:auto;min-height:80px}.top-actions>a{font-size:10px;padding:8px}}