.css-grid-generator{--cgg-line:#e3e7ed;--cgg-border:#dce4ee;--cgg-muted:#7a8ca6;--cgg-accent:#615cf2;width:calc(100% - 48px);max-width:1400px;margin:0 auto;padding-bottom:30px;color:#263247}.css-grid-layout{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:20px;align-items:start}.css-grid-controls{display:flex;flex-direction:column;gap:14px;min-width:0}.css-grid-section{padding:15px 16px;background:#fff;border:1px solid var(--cgg-border);border-radius:12px;box-shadow:0 2px 4px #1f2d400e}.css-grid-section h2{margin:0 0 12px;color:#1f2937;font-size:13px;font-weight:650}.css-grid-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.css-grid-section-head h2{margin:0}.css-grid-icon-btn{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--cgg-border);border-radius:7px;background:#f8fafc;color:#64748b}.css-grid-icon-btn:hover{background:#eef2ff;color:var(--cgg-accent)}.css-grid-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}.css-grid-preset{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--cgg-border);border-radius:9px;background:#fcfdff;color:#40536e}.css-grid-preset:hover{border-color:#c3bdfd;background:#f6f5ff}.css-grid-preset-grid{display:grid;gap:2px;width:100%;aspect-ratio:3/2}.css-grid-preset-grid i{display:block;border-radius:2px;min-height:6px}.css-grid-preset-name{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.css-grid-control-group+.css-grid-control-group{margin-top:14px;padding-top:14px;border-top:1px solid #eef1f6}.css-grid-track-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.css-grid-track-label label{color:#40536e;font:600 11px ui-monospace,SFMono-Regular,monospace}.css-grid-count{display:flex;align-items:center;gap:2px}.css-grid-count button{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--cgg-border);border-radius:6px;background:#f8fafc;color:#52647e;font-size:14px;line-height:1}.css-grid-count button:hover{background:#eef2ff;color:var(--cgg-accent)}.css-grid-count output{min-width:26px;text-align:center;color:#1f2937;font:650 13px ui-monospace,SFMono-Regular,monospace}.css-grid-tracks{display:flex;flex-wrap:wrap;gap:6px}.css-grid-tracks input{width:84px;min-width:0;padding:7px 8px;border:1px solid var(--cgg-border);border-radius:7px;background:#f8fafc;color:#1f2937;font:12px ui-monospace,SFMono-Regular,monospace}.css-grid-tracks input:focus-visible{outline:0;border-color:#a9a3fb;box-shadow:0 0 0 3px #eeedff}.css-grid-gaps{display:grid;grid-template-columns:1fr 1fr;gap:9px}.css-grid-gaps label{display:flex;align-items:center;gap:5px;color:#52647e;font-size:11px}.css-grid-gaps input{width:100%;min-width:0;padding:7px 8px;border:1px solid var(--cgg-border);border-radius:7px;background:#f8fafc;color:#1f2937;font:12px ui-monospace,SFMono-Regular,monospace}.css-grid-gaps i{color:var(--cgg-muted);font-size:11px;font-style:normal}.css-grid-btn-group{display:flex;flex-wrap:wrap;gap:5px}.css-grid-btn-group button{padding:5px 9px;border:1px solid var(--cgg-border);border-radius:6px;background:#f8fafc;color:#64748b;font:11px ui-monospace,SFMono-Regular,monospace}.css-grid-btn-group button:hover{border-color:#c3bdfd;color:var(--cgg-accent)}.css-grid-btn-group button[aria-pressed=true]{border-color:var(--cgg-accent);background:var(--cgg-accent);color:#fff}.css-grid-area-list{display:flex;flex-direction:column;gap:5px}.css-grid-area-item{display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid transparent;border-radius:7px}.css-grid-area-item.is-active{border-color:#c3bdfd;background:#f6f5ff}.css-grid-area-pick{display:flex;align-items:center;gap:7px;flex:1 1;min-width:0;padding:3px;border:0;background:transparent;color:#334155;font-size:12px;text-align:left}.css-grid-area-pick i{flex:none;width:11px;height:11px;border-radius:3px}.css-grid-area-pick span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px ui-monospace,SFMono-Regular,monospace}.css-grid-area-delete{display:grid;place-items:center;flex:none;width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:#9aa7b8}.css-grid-area-delete:hover{background:#fee2e2;color:#dc2626}.css-grid-area-hint{margin:11px 0 0;color:var(--cgg-muted);font-size:11px;line-height:1.7}.css-grid-right{display:flex;flex-direction:column;gap:14px;min-width:0}.css-grid-preview{padding:15px 16px;background:#fff;border:1px solid var(--cgg-border);border-radius:12px;box-shadow:0 2px 4px #1f2d400e;min-width:0}.css-grid-preview h2{margin:0 0 12px;color:#1f2937;font-size:13px;font-weight:650}.css-grid-canvas{display:grid;min-height:300px;padding:12px;border-radius:10px;background:#f8fafc;background-image:linear-gradient(45deg,#eef1f6 25%,transparent 0),linear-gradient(-45deg,#eef1f6 25%,transparent 0),linear-gradient(45deg,transparent 75%,#eef1f6 0),linear-gradient(-45deg,transparent 75%,#eef1f6 0);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;touch-action:none;overflow:auto}.css-grid-cell{display:grid;place-items:center;min-height:38px;border:1px dashed var(--cgg-border);border-radius:8px;background:rgba(255,255,255,.6);color:#94a3b8;font-size:11px;-webkit-user-select:none;user-select:none;cursor:pointer}.css-grid-cell.is-painted{border-style:solid;font-weight:600}.css-grid-cell span{max-width:100%;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.css-grid-preview-hint{margin:12px 0 0;color:var(--cgg-muted);font-size:11px;line-height:1.8}.css-grid-warning{display:flex;align-items:flex-start;gap:6px;margin:10px 0 0;padding:9px 11px;border-radius:8px;background:#fff4e6;color:#8a5300;font-size:11px;line-height:1.7}.css-grid-warning svg{flex:none;margin-top:2px}.css-grid-warning b{font-weight:650}.css-grid-warning code{padding:1px 4px;border-radius:4px;background:#ffe6c2;font:10px ui-monospace,SFMono-Regular,monospace}.css-grid-output{background:#fff;border:1px solid var(--cgg-border);border-radius:12px;box-shadow:0 2px 4px #1f2d400e;overflow:hidden}.css-grid-output-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--cgg-line)}.css-grid-tabs{display:flex;gap:2px;padding:3px;border-radius:7px;background:#f1f5f9}.css-grid-tabs button{padding:5px 12px;border:0;border-radius:5px;background:transparent;color:#64748b;font-size:12px}.css-grid-tabs button[aria-pressed=true]{background:#fff;color:#334155;box-shadow:0 1px 3px #00000012}.css-grid-copy{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--cgg-border);border-radius:7px;background:#fff;color:#52647e;font-size:12px}.css-grid-copy:hover{border-color:#c3bdfd;color:var(--cgg-accent)}.css-grid-code{margin:0;padding:16px;overflow:auto;max-height:420px;color:#334155;font:12px/22px ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre}.css-grid-notice{min-height:16px;margin:10px 0 0;color:#367c55;font-size:11px}@media(max-width:1000px){.css-grid-layout{grid-template-columns:1fr}.css-grid-canvas{min-height:240px}}@media(max-width:700px){.css-grid-generator{width:calc(100% - 28px)}.css-grid-section{padding:13px 12px}.css-grid-tracks input{width:calc(50% - 3px)}.css-grid-gaps{grid-template-columns:1fr}.css-grid-canvas{min-height:200px;padding:8px}.css-grid-code{max-height:320px;font-size:11px}.css-grid-preview-hint{font-size:10px}}