.grid-page{--grid-line: #404040;--grid-muted: #c0bdb9;--grid-accent: #ffb15a}.grid-container{max-width:1320px}.grid-page .grid-hero{padding:38px 0 24px;text-align:left}.grid-page .grid-hero .tools-hero-title{font-size:clamp(1.8rem,3.3vw,2.65rem);margin-bottom:10px}.grid-page .grid-hero .tools-hero-subtitle{color:#f2eee9;font-size:1.15rem;margin:0 0 8px}.grid-intro{color:var(--grid-muted);font-size:.9rem;max-width:75ch;margin:0;line-height:1.65}.grid-page .grid-workspace{padding:0 0 40px}.grid-workbench{overflow:hidden;border:1px solid var(--grid-line);border-radius:16px;background:#171717}.grid-page button,.grid-page input,.grid-page select{font:inherit}.grid-workbench button,.grid-workbench select,.grid-workbench input,.grid-handoff a{border-radius:8px}.grid-workbench button,.grid-workbench select{min-height:44px;color:#f4f0eb;background:#262626;border:1px solid #505050}.grid-workbench button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 13px;font-size:.82rem;font-weight:600;cursor:pointer}.grid-workbench button:hover:not(:disabled){background:#36322d;border-color:#a2784f}.grid-workbench button:disabled{opacity:.48;cursor:not-allowed}.grid-workbench :is(button,input,select,[tabindex]):focus-visible,.grid-handoff a:focus-visible,.grid-guide a:focus-visible{outline:2px solid var(--grid-accent);outline-offset:3px}.grid-workbench input,.grid-workbench select{width:100%;padding:9px 10px;color:#f7f4ef;background:#202020;border:1px solid #585858;font-size:.9rem;min-width:0;min-height:44px;caret-color:var(--grid-accent);color-scheme:dark}.grid-workbench input[aria-invalid=true]{border-color:#ff9b91}.grid-workbench input::placeholder{color:#b9b3aa}.grid-workbench input[type=number]{font-variant-numeric:tabular-nums}.grid-workbench ::selection{color:#171717;background:#ffbf80}.grid-workbench *{scrollbar-width:thin;scrollbar-color:#777 #202020}.grid-command-bar,.grid-preview-toolbar,.grid-code-header,.grid-export-bar{display:flex;align-items:center;justify-content:space-between;gap:14px}.grid-command-bar{padding:14px 18px;background:#222;border-bottom:1px solid var(--grid-line);flex-wrap:wrap}.grid-presets,.grid-history{display:flex;gap:8px;flex-wrap:wrap}.grid-presets button[aria-pressed=true]{background:#4d3523;color:#ffd6ac;border-color:#bd8752}.grid-editor-layout{display:grid;grid-template-columns:280px minmax(0,1fr)}.grid-mobile-switch{display:none}.grid-inspector{border-right:1px solid var(--grid-line);background:#202020;min-width:0}.grid-control-section{padding:22px 20px}.grid-control-section+.grid-control-section{border-top:1px solid var(--grid-line)}.grid-control-section h3,.grid-preview-toolbar h3{font-size:.93rem;font-weight:600;line-height:1.5;margin:0 0 18px}.grid-control-section label{display:flex;flex-direction:column;gap:7px;color:#e6e1da;font-size:.76rem;margin:0 0 14px;min-width:0;line-height:1.6}.grid-field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grid-field-pair input{margin-block-start:auto}.grid-help{color:var(--grid-muted);font-size:.73rem;line-height:1.7;margin:-3px 0 17px}.grid-control-section .grid-checkbox{display:flex;flex-direction:row;align-items:center;gap:10px;margin:17px 0 10px;cursor:pointer;min-height:44px}.grid-checkbox input{width:18px;height:18px;min-height:18px;accent-color:#ffb15a;flex:0 0 18px}.grid-control-section .grid-checkbox+.grid-help{margin-bottom:0}.grid-section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:10px}#gridSelectedNumber{color:#ffc78f;font:600 .9rem ui-monospace,monospace}.grid-item-actions{display:flex;gap:8px;margin-bottom:17px}.grid-item-actions button:first-child{flex:1}.grid-control-section .grid-help:last-child{margin-bottom:0}.grid-result{min-width:0}.grid-preview-toolbar{min-height:72px;padding:12px 22px;border-bottom:1px solid var(--grid-line);flex-wrap:wrap}.grid-preview-toolbar h3{margin:0}.grid-viewport-control{margin:0;max-width:100%}.grid-viewport-control select{min-width:190px;font-size:.8rem}.grid-preview-stage{padding:20px;min-height:340px;max-height:470px;overflow:auto;background:#121212}#gridPreviewSizer{position:relative;margin-inline:auto}#gridPreview{display:block;border:0;transform-origin:top left;color-scheme:dark}.grid-preview-caption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;min-height:36px;padding:8px 22px;color:var(--grid-muted);font-size:.7rem}#gridPreviewSize{font-variant-numeric:tabular-nums}.grid-code-header{background:#222;border-block:1px solid var(--grid-line);padding:10px 18px}.grid-code-tabs{display:flex;gap:6px}.grid-code-tabs button{min-width:60px}.grid-code-tabs button[aria-selected=true]{color:#ffce9d;background:#493523;border-color:#b88c61}#gridCodePanel{height:224px;overflow:auto;background:#191919}#gridCodePanel.grid-code-enhanced{overflow:hidden}#gridCodeEditor{height:100%;min-width:0;text-align:left}#gridCodeEditor[hidden],#gridCode[hidden]{display:none}#gridCodeEditor:focus-within{outline:2px solid var(--grid-accent);outline-offset:-2px}#gridCodeEditor ::selection{color:#f6f3f0}.grid-workbench #gridCodeEditor .cm-content:focus-visible{outline:none}.grid-code-hint{margin:0;padding:10px 20px;border-top:1px solid var(--grid-line);color:var(--grid-muted);background:#191919;font-size:.73rem;line-height:1.65}#gridCode{margin:0;padding:19px 24px;border:0;background:transparent;color:#efd8bc;font:.8rem/1.8 SFMono-Regular,Consolas,Liberation Mono,monospace;-moz-tab-size:2;tab-size:2;overflow:visible;white-space:pre;text-align:left;direction:ltr}#gridCode code{color:inherit;font:inherit}.grid-export-bar{padding:17px 20px;border-top:1px solid var(--grid-line);flex-wrap:wrap}.grid-export-bar p{flex:1 1 200px;margin:0;color:var(--grid-muted);font-size:.73rem;line-height:1.6;max-width:50ch}.grid-workbench .grid-primary,.grid-handoff .grid-primary{background:#ffb15a;border:1px solid #ffb15a;color:#211507;font-weight:700;text-decoration:none}.grid-workbench .grid-primary:hover,.grid-handoff .grid-primary:hover{background:#ffc17e;border-color:#ffc17e;color:#211507}.grid-feedback{padding:12px 20px;border-top:1px solid var(--grid-line);display:flex;flex-wrap:wrap;gap:5px 16px;align-items:center;min-height:48px;background:#222}.grid-feedback p{margin:0;font-size:.76rem;line-height:1.65}#gridError{color:#ffaea4}#gridError:empty,#gridStatus:empty{display:none}#gridStatus{color:#cce5c9}.grid-local-note{color:var(--grid-muted);display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:.7rem}.grid-handoff[hidden]{display:none}.grid-handoff{margin-top:20px;padding:24px;border-radius:12px;background:#30281f;display:flex;gap:24px;align-items:center;justify-content:space-between}.grid-handoff h2{font-size:1.05rem;line-height:1.5;margin:0 0 8px}.grid-handoff p{font-size:.85rem;line-height:1.7;margin:0;max-width:60ch;color:#e5d4c2}.grid-handoff-actions{display:flex;flex-direction:column;align-items:center;gap:12px;flex:0 0 auto}.grid-handoff a{color:#ffd0a0;font-size:.8rem;text-underline-offset:4px}.grid-handoff .grid-primary{padding:13px 18px;min-height:44px;text-align:center}.grid-page .grid-guide{padding:24px 0 48px}.grid-guide-columns{display:grid;grid-template-columns:1fr 1fr;gap:60px}.grid-guide h2{font-size:1.3rem;line-height:1.5;margin:0 0 16px}.grid-guide h3{font-size:1rem;line-height:1.6;margin:28px 0 12px}.grid-guide p,.grid-guide li{color:#ccc7bf;font-size:.88rem;line-height:1.85;max-width:75ch}.grid-guide ol{padding-left:22px}.grid-guide li{padding-left:5px;margin-bottom:10px}.grid-faq{max-width:850px;margin-top:40px;padding-top:36px;border-top:1px solid #49443e}.grid-related{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:30px}.grid-related a{color:#ffc68d;text-decoration:underline;text-underline-offset:4px}@media (max-width: 991px){.grid-editor-layout{grid-template-columns:245px minmax(0,1fr)}.grid-control-section{padding:20px 16px}.grid-command-bar{padding:12px}.grid-preview-toolbar,.grid-preview-caption{padding-inline:16px}.grid-preview-stage{padding:12px}.grid-handoff{align-items:flex-start}}@media (max-width: 700px){#gridCodeEditor>.cm-editor{font-size:16px}.grid-workbench input,.grid-workbench select{font-size:16px}.grid-mobile-switch{display:flex;padding:12px;gap:8px;border-bottom:1px solid var(--grid-line)}.grid-mobile-switch button{flex:1}.grid-mobile-switch button[aria-pressed=true]{border-color:#bd8752;color:#ffd6ac;background:#4d3523}.grid-workbench[data-mobile-panel=preview] .grid-inspector,.grid-workbench[data-mobile-panel=controls] .grid-result{display:none}.grid-page .grid-hero{padding-top:26px}.grid-editor-layout{display:flex;flex-direction:column}.grid-inspector{border-right:0;border-bottom:1px solid var(--grid-line);display:grid;grid-template-columns:1fr 1fr}.grid-control-section+.grid-control-section{border-top:0;border-left:1px solid var(--grid-line)}.grid-preview-stage{min-height:260px;max-height:430px}.grid-handoff{flex-direction:column}.grid-handoff-actions{width:100%;align-items:flex-start}.grid-guide-columns{grid-template-columns:1fr;gap:24px}.grid-local-note{margin-left:0}}@media (max-width: 480px){.grid-inspector{grid-template-columns:1fr}.grid-control-section+.grid-control-section{border-left:0;border-top:1px solid var(--grid-line)}.grid-command-bar{gap:10px}.grid-presets{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.grid-presets button{flex-direction:column;font-size:.68rem;padding:8px 4px;overflow-wrap:anywhere}.grid-history{margin-left:auto}.grid-control-section{padding:18px}.grid-preview-toolbar{gap:8px}.grid-preview-toolbar h3{font-size:.82rem}.grid-viewport-control{flex:1 1 150px}.grid-viewport-control select{min-width:0}.grid-code-header{padding:10px;gap:8px}.grid-code-tabs{gap:4px}.grid-code-tabs button{min-width:48px;padding-inline:8px}#gridCopy{padding-inline:9px}#gridCode{padding:16px}.grid-code-hint{padding-inline:16px}.grid-export-bar{padding:16px}.grid-export-bar button{width:100%}.grid-handoff{padding:20px}.grid-handoff .grid-primary{width:100%}}@media (forced-colors: active){#gridCodeEditor ::selection{color:HighlightText;background:Highlight!important}#gridCodeEditor .cm-selectionBackground{background:Highlight!important}.grid-workbench,.grid-control-section,.grid-code-header,.grid-preview-toolbar{border-color:CanvasText}.grid-presets button[aria-pressed=true],.grid-code-tabs button[aria-selected=true]{outline:2px solid Highlight}}