:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background:#090d18; color:#eef2ff; }
* { box-sizing:border-box; }
body { margin:0; min-width:760px; background:radial-gradient(circle at 15% 0,#1a2542 0,transparent 34rem),#090d18; }
main { max-width:1180px; margin:0 auto; padding:28px; }
header { display:flex; justify-content:space-between; gap:28px; align-items:flex-start; margin-bottom:22px; }
h1 { margin:2px 0 8px; font-size:32px; letter-spacing:-.03em; }
header p { margin:0; color:#adb7d3; }
.eyebrow { color:#83e2c2; font-weight:800; font-size:12px; letter-spacing:.18em; }
.offline { background:#123a32; color:#9cf0d1; border:1px solid #286754; padding:8px 12px; border-radius:999px; white-space:nowrap; }
.workspace { display:grid; grid-template-columns:300px 1fr; gap:20px; }
form,.preview { background:#111728; border:1px solid #26314e; border-radius:14px; box-shadow:0 18px 50px #0005; }
form { padding:18px; display:flex; flex-direction:column; gap:13px; }
label { display:flex; flex-direction:column; gap:6px; color:#cbd3ea; font-size:13px; font-weight:700; }
small { color:#8f9bbb; font-size:11px; font-weight:500; line-height:1.35; }
input,select,button { font:inherit; border:1px solid #354261; border-radius:8px; background:#0c1221; color:#f5f7ff; padding:9px 10px; }
input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid #8eacf8; outline-offset:2px; }
input:invalid { border-color:#a74d5c; }
button { cursor:pointer; font-weight:750; }
button:hover:not(:disabled) { border-color:#6e82ba; background:#18233d; }
button:disabled { opacity:.45; cursor:not-allowed; }
.primary { background:#3d67d6; border-color:#5f83e3; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.inline { display:flex; gap:8px; }
.inline input,.inline select { min-width:0; flex:1; }
.swatches { height:26px; display:flex; overflow:hidden; border:1px solid #354261; border-radius:7px; }
.swatches span { flex:1; }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:3px; }
.status { min-height:34px; margin:0; color:#9eabc9; font-size:12px; line-height:1.45; }
.status.pass { color:#8de5c6; }
.status.fail { color:#ff9ca6; }
.preview { min-width:0; padding:18px; display:flex; flex-direction:column; justify-content:center; gap:14px; overflow:hidden; }
#composite { width:100%; max-height:520px; object-fit:contain; image-rendering:pixelated; background:#070a12; border:1px solid #36415d; border-radius:8px; }
.layer-previews { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.layer-card { min-width:0; color:#9eabc9; font-size:11px; text-align:center; }
.layer-card canvas { display:block; width:100%; image-rendering:pixelated; background-color:#52545e; background-image:linear-gradient(45deg,#333640 25%,transparent 25%),linear-gradient(-45deg,#333640 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#333640 75%),linear-gradient(-45deg,transparent 75%,#333640 75%); background-size:12px 12px; background-position:0 0,0 6px,6px -6px,-6px 0; border:1px solid #354261; border-radius:5px; }
footer { margin-top:18px; color:#7f8ba9; font-size:12px; text-align:center; }
@media(max-width:850px){body{min-width:0}.workspace{grid-template-columns:1fr}.layer-previews{grid-template-columns:repeat(3,1fr)}header{flex-direction:column;gap:12px}.offline{align-self:flex-start}main{padding:18px}}
@media(max-width:480px){.pair,.actions{grid-template-columns:1fr}.layer-previews{grid-template-columns:repeat(2,1fr)}.inline{flex-wrap:wrap}.inline button{flex:1}}

.demo-note{margin:0 0 20px;padding:12px 14px;border:1px solid #3b506f;border-radius:10px;background:#101d31;color:#b9c8e9;font-size:13px;line-height:1.5}.demo-note strong{color:#eef2ff}.locked{margin-top:-8px}