.gr-controls{flex-wrap:wrap;gap:16px;margin-bottom:14px;display:flex}.gr-field{min-width:140px}.gr-select,.gr-num{border:1px solid var(--border);background:var(--bg-surface);color:var(--text);border-radius:4px;padding:6px 10px;font-size:.95rem}.gr-num{width:70px}.gr-step-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.gr-step-label{color:var(--text-dim);font-size:.95rem;font-weight:600}.gr-canvas-wrap{margin-bottom:16px}.gr-result-grid{grid-template-columns:auto auto;gap:4px 16px;margin-top:6px;display:grid}.gr-toolbar{align-items:center;gap:6px;margin-bottom:12px;display:flex}.gr-nav{border:1px solid var(--border);background:var(--bg-surface);width:32px;height:32px;color:var(--text-dim);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;font-size:16px;transition:color .1s,background .1s,border-color .1s;display:inline-flex}.gr-nav:hover{color:var(--text);background:var(--bg-hover);border-color:var(--accent)}.gr-play{border:1px solid var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);height:32px;color:var(--accent);cursor:pointer;border-radius:6px;align-items:center;gap:6px;padding:0 14px;font-size:.85rem;font-weight:500;transition:background .15s,color .15s,border-color .15s;display:flex}.gr-play:hover{background:color-mix(in srgb, var(--accent) 22%, transparent)}.gr-play.playing{color:#86efac;background:#14532d;border-color:#22c55e}.gr-play.playing:hover{background:#166534}.gr-pi{font-size:11px}.gr-hint{color:var(--text-dim);background:color-mix(in srgb, var(--border) 20%, transparent);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;margin-bottom:16px;padding:8px 12px;font-size:.9rem;line-height:1.4}