.tn-grid-page .tn-grid-workspace{--grid-paper:#faf6ee;--grid-wash:#f5efdf;--grid-ink:#1a1208;--grid-muted:#5a4a30;--grid-line:#b8a888;--grid-soft:#ddd4be;--grid-accent:#c44a00;--grid-button:#ede6d4;--grid-hover:#dfd4bb;--grid-primary:#1a1208;--grid-primary-text:#faf6ee;color:var(--grid-ink);background:var(--grid-paper);border:1px solid var(--grid-line);font:14px/1.5 -apple-system,BlinkMacSystemFont,Pretendard,"Segoe UI",system-ui,sans-serif;font-variant-numeric:lining-nums tabular-nums;min-width:0;-webkit-font-smoothing:antialiased}
.tn-grid-workspace,.tn-grid-workspace *{box-sizing:border-box}
.tn-grid-page .tn-grid-workspace :is(h2,h3,p,pre){margin:0}
.tn-grid-page .tn-grid-workspace [hidden]{display:none!important}
.tn-grid-page .tn-grid-presets{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:16px 22px;border-bottom:1px solid var(--grid-line);background:var(--grid-wash)}
.tn-grid-page .tn-grid-presets>span{font-size:12px;font-weight:700;margin-right:8px}
.tn-grid-page #tn-grid-reset{margin-left:auto}
.tn-grid-page .tn-grid-layout{display:grid;grid-template-columns:290px minmax(0,1fr)}
.tn-grid-page .tn-grid-settings{padding:22px;border-right:1px solid var(--grid-line);display:flex;flex-direction:column;gap:15px;min-width:0}
.tn-grid-page .tn-grid-result{padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.tn-grid-page .tn-grid-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.tn-grid-page .tn-grid-heading :is(h2,h3){font:800 16px/1.4 -apple-system,BlinkMacSystemFont,Pretendard,"Segoe UI",system-ui,sans-serif;letter-spacing:-.02em;color:var(--grid-ink)}
.tn-grid-page .tn-grid-heading>span{font-size:11px;font-weight:600;color:var(--grid-muted)}
.tn-grid-page .tn-grid-heading strong{margin-left:8px;color:var(--grid-accent);font-weight:800}
.tn-grid-page .tn-grid-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.tn-grid-page .tn-grid-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tn-grid-page .tn-grid-workspace label{display:block;font-size:12px;font-weight:700;line-height:1.4;margin:0 0 6px;color:var(--grid-ink)}
.tn-grid-page .tn-grid-workspace :is(input,select){display:block;width:100%;min-width:0;height:40px;margin:0;border:1px solid var(--grid-line);border-radius:0;padding:8px 10px;background:var(--grid-paper);color:var(--grid-ink);-webkit-text-fill-color:var(--grid-ink);font:600 16px/1.4 -apple-system,BlinkMacSystemFont,Pretendard,"Segoe UI",system-ui,sans-serif;font-variant-numeric:lining-nums tabular-nums;box-shadow:none}
.tn-grid-page .tn-grid-workspace select{padding-right:28px;font-size:13px}
.tn-grid-page .tn-grid-workspace input:disabled{opacity:.45;cursor:not-allowed}
.tn-grid-page .tn-grid-workspace button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;height:auto;min-width:40px;margin:0;padding:9px 12px;border:1px solid var(--grid-line);border-radius:0;background:var(--grid-button);color:var(--grid-ink);-webkit-text-fill-color:var(--grid-ink);font:700 12px/1.5 -apple-system,BlinkMacSystemFont,Pretendard,"Segoe UI",system-ui,sans-serif;letter-spacing:0;text-transform:none;box-shadow:none;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,transform .16s ease}
.tn-grid-page .tn-grid-workspace button:hover{background:var(--grid-hover)}
.tn-grid-page .tn-grid-workspace button:active{transform:scale(.96)}
.tn-grid-page .tn-grid-workspace button[aria-pressed=true]{background:var(--grid-ink);color:var(--grid-paper);-webkit-text-fill-color:var(--grid-paper);border-color:var(--grid-ink)}
.tn-grid-page .tn-grid-workspace button.tn-grid-primary{background:var(--grid-primary);color:var(--grid-primary-text);-webkit-text-fill-color:var(--grid-primary-text);border-color:var(--grid-primary)}
.tn-grid-page .tn-grid-workspace button:disabled{opacity:.45;cursor:not-allowed}
.tn-grid-page .tn-grid-workspace :is(button,input,select,pre):focus-visible{outline:2px solid var(--grid-accent);outline-offset:3px}
.tn-grid-page .tn-grid-help{font-size:12px;line-height:1.65;color:var(--grid-muted);text-wrap:pretty}
.tn-grid-page .tn-grid-selection{border-top:1px solid var(--grid-soft);padding-top:17px;display:grid;gap:12px}
.tn-grid-page .tn-grid-selection>label{margin-bottom:-6px}
.tn-grid-page .tn-grid-error{padding:12px;background:var(--grid-wash);border:1px solid var(--grid-accent);color:var(--grid-accent);font-size:12px;line-height:1.6}
.tn-grid-page .tn-grid-workspace [aria-invalid=true]{border-color:var(--grid-accent)}
.tn-grid-page :is(.tn-grid-preview-head,.tn-grid-code-head){display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.tn-grid-page :is(.tn-grid-preview-head,.tn-grid-code-head)>.tn-grid-heading{flex:1;min-width:150px}
.tn-grid-page :is(.tn-grid-widths,.tn-grid-code-tabs){display:flex;gap:4px}
.tn-grid-page .tn-grid-widths button{font-variant-numeric:lining-nums tabular-nums}
.tn-grid-page .tn-grid-preview-meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--grid-muted);font-size:11px}
.tn-grid-page .tn-grid-stage{min-width:0;display:flex;align-items:flex-start;justify-content:center;padding:12px;background:var(--grid-wash);background-image:radial-gradient(var(--grid-line) .65px,transparent .65px);background-size:10px 10px;border:1px solid var(--grid-soft);max-height:510px;overflow:auto;scrollbar-color:var(--grid-line) var(--grid-wash)}
.tn-grid-page .tn-grid-preview{display:grid;flex-shrink:0;max-width:100%;min-width:0;grid-auto-rows:minmax(84px,auto);background:var(--grid-paper);border:0;outline:1px dashed var(--grid-line);outline-offset:-1px;transition:width .22s ease;align-self:flex-start}
.tn-grid-page .tn-grid-preview button{display:flex;min-width:0;min-height:84px;width:100%;padding:8px 2px;background:var(--grid-wash);border:1px solid var(--grid-line);font-size:17px;font-weight:800;font-variant-numeric:lining-nums tabular-nums;overflow-wrap:anywhere;line-height:1.2}
.tn-grid-page .tn-grid-preview button[aria-pressed=true]{background:var(--grid-button);color:var(--grid-ink);-webkit-text-fill-color:var(--grid-ink);border-color:var(--grid-accent);box-shadow:inset 0 0 0 1px var(--grid-accent)}
.tn-grid-page .tn-grid-code-head{border-top:1px solid var(--grid-soft);padding-top:16px;margin-top:4px}
.tn-grid-page .tn-grid-result .tn-grid-code{padding:16px;max-height:250px;min-height:190px;overflow:auto;background:var(--grid-wash);border:1px solid var(--grid-soft);border-radius:0;color:var(--grid-ink);white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-color:var(--grid-line) var(--grid-wash)}
.tn-grid-page .tn-grid-code code{display:block;padding:0;border:0;background:transparent;color:var(--grid-ink);-webkit-text-fill-color:var(--grid-ink);font:12px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.tn-grid-page .tn-grid-actions{display:flex;flex-wrap:wrap;gap:8px}
.tn-grid-page .tn-grid-status{min-height:20px;color:var(--grid-accent);font-size:12px;line-height:1.6}
.tn-grid-page .tn-grid-invalid .tn-grid-stage{opacity:.4}
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-grid-workspace,html[data-scheme=dark] body:not([data-scheme=light]) .tn-grid-workspace{--grid-paper:#241d12;--grid-wash:#2c2517;--grid-ink:#efe6d2;--grid-muted:#c3b492;--grid-line:#6f6047;--grid-soft:#574a37;--grid-accent:#e8823f;--grid-button:#322a1a;--grid-hover:#44351f;--grid-primary:#322a1a;--grid-primary-text:#efe6d2;color-scheme:dark}
body:is([data-scheme=dark],[data-scheme=inverse],[data-scheme=auto][data-l=dark],[data-scheme=auto][data-d=dark]) .tn-grid-workspace button[aria-pressed=true],html[data-scheme=dark] body:not([data-scheme=light]) .tn-grid-workspace button[aria-pressed=true]{background:var(--grid-button);color:var(--grid-ink);-webkit-text-fill-color:var(--grid-ink);border-color:var(--grid-accent)}
@media(prefers-color-scheme:dark){body[data-scheme=auto] .tn-grid-workspace{--grid-paper:#241d12;--grid-wash:#2c2517;--grid-ink:#efe6d2;--grid-muted:#c3b492;--grid-line:#6f6047;--grid-soft:#574a37;--grid-accent:#e8823f;--grid-button:#322a1a;--grid-hover:#44351f;--grid-primary:#322a1a;--grid-primary-text:#efe6d2;color-scheme:dark}body[data-scheme=auto] .tn-grid-workspace button[aria-pressed=true]{background:var(--grid-button);color:var(--grid-ink);-webkit-text-fill-color:var(--grid-ink);border-color:var(--grid-accent)}}
@media(max-width:760px){.tn-grid-page .tn-grid-layout{grid-template-columns:minmax(0,1fr)}.tn-grid-page .tn-grid-settings{border-right:0;border-bottom:1px solid var(--grid-line)}.tn-grid-page :is(.tn-grid-settings,.tn-grid-result){padding:18px 16px}.tn-grid-page .tn-grid-presets{padding:14px 16px;gap:6px}.tn-grid-page .tn-grid-presets>span{flex-basis:100%}.tn-grid-page .tn-grid-presets button{padding-inline:9px}.tn-grid-page #tn-grid-reset{margin-left:0}.tn-grid-page .tn-grid-stage{padding:8px}.tn-grid-page .tn-grid-preview-head>.tn-grid-heading{min-width:135px}.tn-grid-page .tn-grid-widths button{padding-inline:8px}.tn-grid-page .tn-grid-preview button{font-size:14px}.tn-grid-page .tn-grid-result .tn-grid-code{min-height:180px;max-height:240px;padding:14px}}
@media(prefers-reduced-motion:reduce){.tn-grid-page .tn-grid-workspace button,.tn-grid-page .tn-grid-preview{transition:none}.tn-grid-page .tn-grid-workspace button:active{transform:none}}
.tn-grid-page .tn-grid-ad{width:100%;max-width:728px;min-height:90px;height:auto;max-height:none;margin-inline:auto;overflow:visible}
.tn-grid-page .tn-grid-ad--top{margin-top:54px;margin-bottom:22px}
.tn-grid-page .tn-grid-ad--bottom{margin-top:26px;margin-bottom:26px}
@media(max-width:720px){.tn-grid-page .tn-grid-ad--top{margin-top:48px}}