style.css

:root{
	--bg:#0f1020; --panel:#17182d; --text:#e6e8ef; --muted:#9aa0b4; --accent:#e85d75; --accent-2:#6ee7b7;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
	color:var(--text); background:linear-gradient(180deg,#0b0c1a, var(--bg));
}

.centered{min-height:100dvh; display:grid; place-items:center; text-align:center; padding:24px}
h1{margin:0 0 8px; font-weight:800; letter-spacing:.3px}
.sub{color:var(--muted); margin:0 0 24px}
.btn{appearance:none; border:1px solid #ffffff20; background:#ffffff10; color:var(--text); padding:10px 16px; border-radius:10px; cursor:pointer; transition:.2s; text-decoration:none; display:inline-block}
.btn:hover{transform:translateY(-1px); background:#ffffff18}
.btn.primary{background:var(--accent); border-color:transparent; color:#1a1020}
.btn.primary:hover{filter:brightness(1.05)}

.topbar{display:flex; align-items:center; gap:12px; padding:12px 16px; position:sticky; top:0; background:#0f1020cc; backdrop-filter:blur(6px); border-bottom:1px solid #ffffff14}
.topbar h1{font-size:18px; margin:0}

.page{margin:0; padding:0; min-height:100vh; display:grid; grid-template-rows:auto 1fr;}

.card{background:var(--panel); border:1px solid #ffffff14; border-radius:14px; padding:16px}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid label{display:grid; gap:6px; font-size:13px; color:var(--muted)}
input[type="text"], input[type="number"], input[type="color"], input[type="range"]{
	width:100%; padding:10px; border-radius:10px; border:1px solid #ffffff22; background:#0d0e1a; color:var(--text);
}
.actions{display:flex; gap:8px; margin-top:8px}

.stage{position:relative; width:100vw; height:calc(100vh - 64px); display:grid; place-items:center; padding:0; border:none; background:transparent}
canvas{display:block; width:100vw; height:100vh; background:#00000010; border:none; border-radius:0}

.foot{color:#8c92a8; text-align:center; padding:16px; font-size:12px}