:root { color-scheme: dark; }
body { margin: 0; font-family: Inter, Arial, sans-serif; background: #0d1117; color: #e6edf3; }
.layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; }
section { background: #161b22; border: 1px solid #30363d; border-radius: 10px; padding: 12px; }
textarea { width: 100%; min-height: 360px; background: #0d1117; color: #9df9c8; border: 1px solid #30363d; border-radius: 8px; padding: 8px; font-family: ui-monospace, monospace; }
.row { display: flex; gap: 8px; margin-top: 8px; }
button { background: #21262d; color: #e6edf3; border: 1px solid #30363d; border-radius: 8px; padding: 7px 10px; }
canvas { width: 100%; border: 1px solid #30363d; border-radius: 8px; background: #081018; }
pre { background: #0d1117; border: 1px solid #30363d; border-radius: 8px; padding: 8px; max-height: 180px; overflow: auto; }
@media (max-width: 1100px) { .layout { grid-template-columns: 1fr; } }