:root { color-scheme: light; --ink: var(--atonal-ink); --muted: var(--atonal-muted); --line: var(--atonal-line); --panel: rgba(255,255,255,.72); --orange: var(--atonal-blue); --violet: #3850ff; --green: var(--atonal-green); color: var(--ink); background: var(--atonal-paper); font-family: var(--atonal-mono); }
* { box-sizing: border-box; }
html { overflow-x: hidden; scrollbar-gutter: stable; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: linear-gradient(rgba(0,24,240,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,24,240,.035) 1px,transparent 1px),var(--atonal-paper); background-size: 40px 40px; }
button,input,textarea { font: inherit; } button,a { -webkit-tap-highlight-color: transparent; } button { color: inherit; } [hidden] { display: none !important; }
.provider-status { padding: 8px 12px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.58); font-size: 10px; white-space: nowrap; }
.provider-status b { font-weight: 700; }.provider-status span { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(22,165,111,.12); }.provider-status.offline span { background: #8c93aa; box-shadow: none; }
main { width: min(1120px,calc(100% - 48px)); margin-inline: auto; padding: 52px 0 64px; }
.intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }.eyebrow { margin: 0 0 9px; color: var(--atonal-blue); font-size: 10px; font-weight: 700; letter-spacing: .2em; }
h1 { margin: 0; color: var(--atonal-navy); font-family: var(--atonal-display); font-size: clamp(48px,6vw,76px); font-weight: 400; line-height: .95; letter-spacing: -.025em; }.model-pill { padding: 9px 12px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.62); font-size: 10px; white-space: nowrap; }
.studio { display: grid; grid-template-columns: minmax(390px,.9fr) minmax(420px,1.1fr); min-height: 650px; overflow: hidden; border: 1px solid rgba(255,255,255,.78); border-radius: 20px; background: rgba(255,255,255,.64); box-shadow: 0 28px 80px rgba(8,19,61,.14); backdrop-filter: blur(20px); }
.control-panel { display: flex; flex-direction: column; padding: 28px; border-right: 1px solid var(--line); }.field-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }.field-heading:not(:first-child) { margin-top: 19px; }.field-heading label { color: var(--atonal-navy); font-size: 11px; font-weight: 700; letter-spacing: .04em; }.field-heading label small,.field-heading span { color: var(--muted); font-size: 9px; font-weight: 400; }
.reference-drop { position: relative; display: grid; min-height: 104px; overflow: hidden; border: 1px dashed rgba(0,24,240,.28); border-radius: 12px; cursor: pointer; background: rgba(255,255,255,.42); transition: border-color .18s,background .18s; }.reference-drop:hover,.reference-drop.dragging { border-color: var(--atonal-blue); background: rgba(255,255,255,.78); }.reference-input { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.reference-empty { display: grid; place-content: center; justify-items: center; gap: 3px; color: var(--muted); text-align: center; }.reference-empty i { display: grid; width: 25px; height: 25px; margin-bottom: 3px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--atonal-blue); font-style: normal; font-size: 17px; }.reference-empty strong { color: var(--atonal-navy); font-size: 11px; }.reference-empty small { font-size: 9px; }
.reference-preview { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 13px; padding: 9px; }.reference-preview img { width: 82px; height: 82px; border-radius: 8px; object-fit: cover; background: var(--atonal-soft); }.reference-preview strong { display: block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.reference-preview small { display: block; margin-top: 5px; color: var(--green); font-size: 9px; }.reference-remove { align-self: end; margin-top: 6px; padding: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 9px; }
textarea { width: 100%; min-height: 124px; resize: vertical; padding: 15px; border: 1px solid rgba(0,24,240,.16); border-radius: 14px; outline: none; color: var(--ink); background: rgba(255,255,255,.48); line-height: 1.6; transition: border-color .2s,box-shadow .2s,background .2s; } textarea::placeholder { color: #8a91aa; } textarea:focus,input:focus { border-color: var(--atonal-blue); box-shadow: 0 0 0 4px rgba(0,24,240,.08); background: rgba(255,255,255,.82); }
.size-picker,.payment-method { margin: 18px 0 0; padding: 0; border: 0; }.size-picker legend,.payment-method legend,.field > span:first-child { margin-bottom: 9px; color: var(--atonal-navy); font-size: 11px; font-weight: 700; }.size-picker > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }.size-picker label,.payment-tabs label { position: relative; cursor: pointer; }.size-picker input,.payment-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.size-picker label > span { display: grid; min-height: 58px; place-content: center; justify-items: center; gap: 3px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.36); font-size: 9px; }.size-picker small { font-size: 8px; }.size-picker i { display: block; border: 1px solid currentColor; border-radius: 2px; }.ratio-square { width: 12px; height: 12px; }.ratio-landscape { width: 17px; height: 11px; }.ratio-portrait { width: 10px; height: 15px; }.size-picker input:checked + span { border-color: var(--atonal-blue); color: var(--atonal-blue); background: white; box-shadow: 3px 3px 0 rgba(0,24,240,.1); }.size-picker input:focus-visible + span,.payment-tabs input:focus-visible + span { outline: 2px solid var(--atonal-blue); outline-offset: 2px; }
.credential-row { margin-top: 18px; }.field { display: block; }.field > span:first-child { display: block; }.field input { width: 100%; height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--ink); background: rgba(255,255,255,.52); }.key-input { position: relative; display: block; }.key-input input { padding-right: 52px; }.key-input button { position: absolute; top: 4px; right: 4px; height: 34px; padding: 0 8px; border: 0; color: var(--atonal-blue); background: transparent; cursor: pointer; font-size: 10px; }
.payment-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.payment-tabs label > span { display: block; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.34); font-size: 10px; }.payment-tabs small { display: block; margin-top: 2px; font-size: 8px; }.payment-tabs input:checked + span { border-color: var(--green); color: #08734d; background: rgba(22,165,111,.06); }
.balance-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: center; margin-top: 7px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.34); }.balance-row button { min-height: 31px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--atonal-blue); background: rgba(255,255,255,.55); cursor: pointer; font-size: 9px; }.balance-row span { display: block; color: var(--muted); font-size: 8px; }.balance-row strong { display: block; margin-top: 2px; font-size: 10px; }.wallet-row { grid-template-columns: 1fr auto auto; }.wallet-row div { text-align: right; }
.generate-button { display: flex; width: 100%; height: 52px; align-items: center; justify-content: space-between; margin-top: 15px; padding: 0 18px; border: 1px solid var(--atonal-blue); border-radius: 11px; color: white; background: linear-gradient(100deg,#0018f0,#2446ff); box-shadow: 0 12px 28px rgba(0,24,240,.18); cursor: pointer; font-weight: 700; }.generate-button:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 rgba(0,24,240,.16); }.generate-button:disabled { cursor: wait; opacity: .62; transform: none; }.button-arrow { font-size: 20px; }
.result-panel { position: relative; display: grid; min-height: 650px; overflow: hidden; background: radial-gradient(circle at 50% 45%,rgba(56,80,255,.18),transparent 45%),var(--atonal-navy); }.result-panel::before { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; pointer-events: none; }.empty-state,.progress-state,.error-state { place-self: center; padding: 38px; color: white; text-align: center; }.empty-state p,.progress-state p { margin: 19px 0 6px; font-size: 12px; }.empty-state small,.progress-state small { color: #adb5d4; font-size: 10px; }
.frame-icon { position: relative; width: 58px; height: 58px; margin: auto; border: 1px solid rgba(255,255,255,.4); border-radius: 14px; transform: rotate(5deg); }.frame-icon span { position: absolute; inset: 17px; border-radius: 50%; background: var(--atonal-blue); box-shadow: 0 0 22px #6374ff; }.orbital { position: relative; width: 70px; height: 70px; margin: auto; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; animation: orbit 2.8s linear infinite; }.orbital::before { content: ""; position: absolute; inset: 11px; border: 1px dashed rgba(255,255,255,.4); border-radius: 50%; }.orbital span { position: absolute; top: 5px; left: 11px; width: 8px; height: 8px; border-radius: 50%; background: #62f0b6; box-shadow: 0 0 16px #62f0b6; } @keyframes orbit { to { transform: rotate(360deg); } }
.progress-track { width: 190px; height: 3px; margin: 22px auto 16px; overflow: hidden; background: rgba(255,255,255,.15); }.progress-track i { display: block; width: 24%; height: 100%; background: #62f0b6; transition: width .5s; }.progress-state button,.error-state button { border: 0; color: #c4cbea; background: transparent; cursor: pointer; font-size: 10px; text-decoration: underline; }
.image-state { position: absolute; inset: 0; background: var(--atonal-navy); }.image-state img { width: 100%; height: 100%; object-fit: contain; }.image-actions { position: absolute; right: 18px; bottom: 18px; left: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px 11px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 11px; color: white; background: rgba(8,19,61,.78); backdrop-filter: blur(16px); }.image-actions strong,.image-actions small { display: block; }.image-actions small { color: #bbc3e2; font-size: 9px; }.image-actions a { padding: 9px 12px; color: var(--atonal-blue); background: white; text-decoration: none; font-size: 10px; font-weight: 700; }.image-actions .settlement-link { display: block; margin-top: 2px; padding: 0; color: #62f0b6; background: transparent; font-size: 8px; }
.error-state div { display: grid; width: 48px; height: 48px; margin: 0 auto 17px; place-items: center; border: 1px solid #ff8d8d; border-radius: 50%; color: #ffb2b2; font-size: 22px; }.error-state p { max-width: 300px; color: #c4cbea; font-size: 10px; line-height: 1.6; }
@media (max-width:860px) { .studio { grid-template-columns:1fr; }.control-panel { border-right:0; border-bottom:1px solid var(--line); }.result-panel { min-height:540px; } }
@media (max-width:540px) { main { width:min(100% - 28px,1120px); padding-top:30px; }.provider-status { padding:7px 9px; font-size:9px; }.intro { align-items:start; flex-direction:column; gap:13px; } h1 { font-size:48px; }.control-panel { padding:21px; }.size-picker > div { grid-template-columns:repeat(2,1fr); }.payment-tabs { grid-template-columns:1fr; }.wallet-row { grid-template-columns:1fr auto; }.wallet-row button:last-child { grid-column:1 / -1; }.result-panel { min-height:min(116vw,520px); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; } }

/* Compact product layout shared with the rest of ATONAL. */
body { background: var(--atonal-paper); }
main { width:min(1120px,calc(100% - 40px)); padding:42px 0 58px; }
.intro { margin-bottom:18px; }
h1 { font-size:clamp(48px,5vw,64px); }
.studio { min-height:610px; border-color:var(--atonal-line); border-radius:12px; background:var(--atonal-white); box-shadow:none; backdrop-filter:none; }
.control-panel { padding:24px; }
.reference-drop,textarea,.size-picker label > span,.field input,.payment-tabs label > span,.balance-row,.generate-button { border-radius:8px; }
.result-panel { min-height:610px; background:var(--atonal-soft); }
.result-panel::before { border-color:var(--atonal-line); border-radius:8px; }
.empty-state,.progress-state,.error-state { color:var(--atonal-navy); }
.empty-state small,.progress-state small { color:var(--atonal-muted); }
.frame-icon { border-color:var(--atonal-line); }
.generate-button { box-shadow:none; }
@media (max-width:540px) { main { width:calc(100% - 28px); } }

/* Shared readable type scale and restrained color system. */
.provider-status,.model-pill { font-size:11px; }
.intro-meta { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.eyebrow { font-size:12px; letter-spacing:.14em; }
.field-heading label,.size-picker legend,.payment-method legend,.field > span:first-child { font-size:13px; }
.field-heading label small,.field-heading span,.reference-empty small,.reference-preview small,.reference-remove { font-size:11px; }
.reference-empty strong,.reference-preview strong { font-size:13px; }
textarea { font-size:15px; background:var(--atonal-white); }
.size-picker label > span,.payment-tabs label > span { font-size:12px; background:var(--atonal-white); }
.size-picker small,.payment-tabs small { font-size:10px; }
.key-input button,.balance-row strong,.balance-row button { font-size:11px; }
.balance-row span { font-size:10px; }
.generate-button { font-size:13px; background:var(--atonal-blue); }
.empty-state p,.progress-state p { font-size:14px; }
.empty-state small,.progress-state small,.progress-state button,.error-state button,.error-state p { font-size:12px; }

/* Shared ATONAL typography scale. */
.provider-status,.model-pill,.eyebrow,.field-heading label small,.field-heading span,
.reference-empty small,.reference-preview small,.reference-remove,.size-picker small,
.key-input button,.payment-tabs small,.balance-row span,.balance-row button,
.empty-state small,.progress-state small,.progress-state button,.error-state button,
.error-state p,.image-actions small,.image-actions a,.image-actions .settlement-link { font-size:var(--atonal-type-xs); }
.field-heading label,.reference-empty strong,.reference-preview strong,
.size-picker legend,.payment-method legend,.field > span:first-child,
.size-picker label > span,.payment-tabs label > span,.balance-row strong { font-size:var(--atonal-type-sm); }
.generate-button { font-size:var(--atonal-type-base); }
.empty-state p,.progress-state p { font-size:var(--atonal-type-base); }
.result-panel { background:var(--atonal-soft); }
@media (max-width:540px) { .intro-meta { align-items:flex-start; } }