.gen { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 24px 0 32px; }
.gen h2 { font: 700 clamp(28px, 5vw, 44px)/1.05 var(--sans); letter-spacing: -0.03em; margin: 10px 0 8px; }
.gen-grid { display: grid; gap: 20px; margin-top: 20px; align-items: start; }
@media (min-width: 860px) { .gen-grid { grid-template-columns: minmax(0, 1fr) 360px; } }
.gen-canvas { display: block; width: 100%; max-width: 560px; height: auto; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); touch-action: none; cursor: grab; }
.gen-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 14px; }
.gen-panel h3 { font: 600 15px/1.2 var(--sans); }
.gen-panel label { display: grid; gap: 6px; font: 500 13px/1.2 var(--mono); color: var(--ink2); }
.gen-panel input[type=text] { padding: 10px 12px; border-radius: var(--rs); border: 1px solid var(--line2); font: 500 15px/1.2 var(--sans); color: var(--ink); background: var(--white); min-width: 0; }
.gen-panel input[type=range] { width: 100%; accent-color: var(--accent); }
.gen-tpl, .gen-stk { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.gen-tpl button, .gen-stk button { padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; aspect-ratio: 1 / 1; overflow: hidden; }
.gen-tpl button:hover, .gen-stk button:hover, .gen-tpl button.on { border-color: var(--accent); background: var(--accent-soft); }
.gen-tpl img, .gen-stk img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gen-stk img { object-fit: contain; }
.gen-row { display: flex; flex-wrap: wrap; gap: 8px; }
.gen-note { font: 500 12.5px/1.4 var(--mono); color: var(--muted); }
.gen-file { font: 500 13px/1.3 var(--sans); max-width: 100%; }