:root{color-scheme:dark;--ink-1: #f2f3f6;--ink-2: #c8cedc;--ink-3: #919aaf;--panel-1: rgba(18, 23, 36, .86);--panel-2: rgba(11, 15, 24, .96);--line: rgba(181, 193, 220, .24)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Avenir Next,Segoe UI,Helvetica Neue,Arial,sans-serif;color:var(--ink-1);background:radial-gradient(1100px 700px at 18% 8%,#2a3346 0%,transparent 55%),radial-gradient(900px 620px at 88% 95%,#222836 0%,transparent 52%),linear-gradient(160deg,#080a10,#111827 52%,#171f30);display:grid;place-items:center;padding:20px}.app-shell{width:min(860px,96vw);border-radius:20px;border:1px solid var(--line);background:linear-gradient(140deg,var(--panel-1),var(--panel-2));box-shadow:0 16px 48px #05080eb8;padding:18px}h1{margin:0;font-size:clamp(1.2rem,2.1vw,1.8rem);letter-spacing:.03em;text-transform:uppercase}.subtitle{margin-top:8px;margin-bottom:12px;color:var(--ink-2);font-size:.95rem}.label{color:var(--ink-2);display:block;margin-bottom:8px;font-size:.92rem}textarea{width:100%;resize:vertical;min-height:58px;border-radius:10px;border:1px solid var(--line);background:#0d1320;color:var(--ink-1);padding:10px 12px;outline:none;font-size:.95rem}textarea:focus{border-color:#d2dcf585;box-shadow:0 0 0 3px #c6d6ff1f}.meta{margin-top:10px;display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:.84rem}.meta code{-webkit-user-select:all;user-select:all;background:#080c14e6;border:1px solid var(--line);border-radius:8px;padding:6px 8px;color:#dde4f6}.traits-grid{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}.trait-card{border:1px solid rgba(181,193,220,.18);border-radius:10px;padding:8px 10px;background:#0a0e18b3;display:grid;gap:3px}.trait-label{font-size:.74rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em}.trait-value{font-size:.9rem;color:var(--ink-1);font-weight:600}.canvas-wrap{margin-top:16px;min-height:560px;border-radius:14px;overflow:hidden;border:1px solid rgba(181,193,220,.18);display:grid;place-items:center;background:radial-gradient(circle at 30% 18%,rgba(255,255,255,.07),transparent 42%),radial-gradient(circle at 75% 74%,rgba(255,255,255,.05),transparent 40%),linear-gradient(155deg,#0a0e16,#111a2b 56%,#181f2f)}canvas{width:min(670px,96%);height:min(540px,95%);border-radius:10px;filter:contrast(1.03) saturate(.9)}@media(max-width:720px){.app-shell{padding:14px}.canvas-wrap{min-height:420px}canvas{width:98%;height:min(420px,95%)}}