@layer components{.jsonpath-playground{display:grid;gap:var(--space-4);margin-block:var(--space-6)var(--space-8);padding:var(--space-5);border:1px solid var(--color-grey-20);border-radius:var(--radius-md);background-color:var(--color-card-background,var(--color-grey-10));.jsonpath-playground-toolbar{display:grid;gap:var(--space-4)}.jsonpath-playground-field{display:grid;gap:var(--space-1);min-width:0}.jsonpath-playground-field label{font-size:.875rem;font-weight:600;color:var(--color-grey-80)}.jsonpath-playground-field-header{display:flex;flex-wrap:wrap;gap:var(--space-2)var(--space-4);align-items:center;justify-content:space-between;select{width:auto;min-width:12rem;padding-block:var(--space-1);font-size:.875rem;line-height:1.25rem}}input, select, textarea{width:100%;min-width:0;margin:0;padding:var(--space-2)var(--space-3);border:1px solid var(--color-grey-30);border-radius:var(--radius-md);background-color:var(--color-white,#fff);color:var(--color-grey-90);font:inherit;font-size:1rem;font-weight:400;line-height:1.5rem}input, textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.875rem}input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--color-primary-90,currentColor);outline-offset:1px}textarea{min-height:8rem;line-height:1.5;resize:vertical;tab-size:4;white-space:pre;overflow:auto}.jsonpath-playground-verdict{margin:0;padding:var(--space-3)var(--space-4);border-left:4px solid var(--color-grey-40);border-radius:var(--radius-sm);background-color:var(--color-white,#fff);font-size:.9375rem;line-height:1.5}.jsonpath-playground-verdict strong{margin-right:var(--space-2)}&[data-state=delivered] .jsonpath-playground-verdict{border-left-color:var(--color-green-60)}&[data-state=dropped] .jsonpath-playground-verdict{border-left-color:var(--color-orange-60)}&[data-state=invalid-filter] .jsonpath-playground-verdict, &[data-state=invalid-json] .jsonpath-playground-verdict{border-left-color:var(--color-red-40)}@media(min-width:48rem){.jsonpath-playground-toolbar{grid-template-columns:minmax(0,1fr)minmax(14rem,18rem)}}}}