@import"https://fonts.googleapis.com/css2?family=Allura&family=Dancing+Script:wght@400..700&family=Great+Vibes&family=Pacifico&family=Satisfy&display=swap";:root{color-scheme:dark;--bg: #11161c;--panel: #1b222a;--field: #242d37;--line: #35414e;--line-strong: #52606f;--text: #edf2f7;--muted: #aab5c1;--accent: #57a7e8;--accent-strong: #2f8fd8;--warn: #e5b757}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;padding:24px}.workspace{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:18px;max-width:1120px;margin:0 auto}.controls,.preview-area{border:1px solid var(--line);border-radius:8px;background:var(--panel)}.controls{padding:16px}.field{margin-bottom:14px}label{display:block;margin-bottom:6px;color:var(--muted);font-size:13px}input,select{width:100%;min-height:42px;border:1px solid var(--line);border-radius:6px;background:var(--field);color:var(--text)}input:not([type=range]):not([type=color]),select{padding:8px 10px}input[type=range]{accent-color:var(--accent)}input[type=color]{padding:4px}.actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;gap:8px;margin-top:18px}.actions button{display:inline-flex;min-height:42px;align-items:center;justify-content:center;gap:8px;border:1px solid var(--accent-strong);border-radius:6px;background:var(--accent-strong);color:#fff;font-weight:650;white-space:nowrap}.actions .secondary{border-color:var(--line-strong);background:var(--field)}.actions .icon-button{width:44px;padding:0}.actions button:hover{border-color:var(--accent);background:#3aa0ed}.actions .secondary:hover,.actions .icon-button:hover{background:#303b47}.status{min-height:20px;margin:12px 0 0;color:var(--muted);font-size:13px}.preview-area{display:grid;align-content:center;min-height:420px;padding:18px}canvas{display:block;width:100%;aspect-ratio:10 / 3;border:1px solid var(--line);border-radius:6px;background-color:#fff;background-image:linear-gradient(45deg,#eef1f5 25%,transparent 25%),linear-gradient(-45deg,#eef1f5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef1f5 75%),linear-gradient(-45deg,transparent 75%,#eef1f5 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px}@media(max-width:760px){.app-shell{padding:14px}.workspace{grid-template-columns:1fr}.preview-area{min-height:auto}}@media(max-width:430px){.actions{grid-template-columns:1fr 44px}.actions .secondary{grid-column:1 / -1;grid-row:2}}