:root { color-scheme: light dark; --bg:#0f1115; --fg:#e8e8e8; --muted:#9da5b4; --card:#171b22; --line:#2b3240; --accent:#8fd3ff; }
@media (prefers-color-scheme: light) { :root { --bg:#fbfaf7; --fg:#1e2329; --muted:#64707d; --card:#fff; --line:#e6e2d9; --accent:#1463a3; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.65 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
.wrap { width:min(920px, calc(100% - 40px)); margin:7vh auto; }
.kicker { color:var(--accent); text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; }
h1 { font-size:clamp(2.4rem, 7vw, 5.5rem); line-height:.95; margin:.15em 0; }
.lead { color:var(--muted); font-size:1.15rem; max-width:620px; }
.menu { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin:42px 0; }
.card { border:1px solid var(--line); border-radius:22px; padding:20px; background:var(--card); transition:.16s transform, .16s border-color; min-height:170px; display:flex; flex-direction:column; gap:10px; }
.card:hover { transform:translateY(-2px); border-color:var(--accent); }
.card strong { font-size:1.25rem; }
.card small { color:var(--muted); }
.emoji { font-size:1.7rem; }
.terminal { border:1px solid var(--line); border-radius:22px; padding:18px; background:var(--card); overflow:auto; }
pre { margin:0; font:14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:var(--muted); }
button, input, select { font:inherit; }
button { border:1px solid var(--line); border-radius:999px; padding:10px 16px; background:var(--fg); color:var(--bg); cursor:pointer; }
button.secondary { background:transparent; color:var(--fg); }
button:disabled { opacity:.45; cursor:not-allowed; }
.panel { border:1px solid var(--line); border-radius:22px; padding:20px; background:var(--card); margin:18px 0; }
.row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.status { color:var(--muted); white-space:pre-wrap; }
.canvas-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:18px; }
canvas, img.preview { max-width:100%; border:1px solid var(--line); border-radius:16px; background:#111; }