:root {
	--color-bg: #ffffff;
	--color-surface: #f1f0f2;
	--color-surface-alt: #f2f4f8;
	--color-text: #192943;
	--color-text-muted: #919191;
	--color-accent: #0969da;
	--color-secondary: #37527f;
	--color-border: #cccccc;

	--radius-sm: 4px;
	--radius-md: 8px;

	--font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-mono: Consolas, Menlo, Monaco, monospace;

	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.25rem;
	--text-xl: 1.5rem;
	--text-2xl: 2rem;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;

	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: #162234;
		--color-surface: #223654;
		--color-surface-alt: #223654;
		--color-text: #f0f6fc;
		--color-text-muted: #c6d0db;
		--color-accent: #5bb3f4;
		--color-secondary: #314d79;
		--color-border: #314d79;
	}
}

/* Try jsoup layout and controls. */
:root {
    --try-font-sans: system-ui, "Segoe UI", "Noto Sans", -apple-system, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
    --try-font-mono: "Roboto Mono", "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --try-font-sm: 13.125px;
    --try-font-md: 14px;
    --try-font-lg: 18px;

    --font-sans: var(--try-font-sans);
    --font-mono: var(--try-font-mono);
    --text-sm: var(--try-font-sm);
    --text-base: var(--try-font-md);
    --text-lg: var(--try-font-lg);
    --text-xl: var(--try-font-lg);

    --try-page-bg: #f0efeb;
    --try-surface: #f8f7f3;
    --try-surface-alt: #e9e7e0;
    --try-input-zone-bg: #f4f3ef;
    --try-input-zone-end: #fbfaf6;
    --try-output-zone-bg: #f3f2ed;
    --try-output-zone-end: #faf9f4;
    --try-query-zone-bg: #f4f3ef;
    --try-query-zone-end: #fbfaf6;
    --try-settings-bg: #f5f4ef;
    --try-code-bg: #f8f7f3;
    --try-code-rule: #cfcac1;
    --try-result-code-text: #243c4a;
    --try-result-code-rule: rgba(24, 35, 50, 0.18);
    --try-intro-bg: #fff7e8;
    --try-paper-edge: #d7d2c8;
    --try-text: #182332;
    --try-text-muted: #746e64;
    --try-outline: #b8b0a4;
    --try-outline-strong: #746c60;
    --try-accent: #2f687b;
    --try-accent-2: #207a5a;
    --try-intro-border: #dcc7a0;
    --try-intro-accent: #8a6f43;
    --try-intro-close-hover-bg: rgba(138, 111, 67, 0.12);
    --try-control-divider: #d8d3ca;
    --try-query-border: #c9c3b8;
    --try-result-border: rgba(24, 35, 50, 0.1);
    --try-result-token-hover-bg: rgba(255, 255, 255, 0.86);
    --try-scrollbar-thumb: rgba(24, 35, 50, 0.3);
    --try-scrollbar-thumb-hover: rgba(24, 35, 50, 0.46);

    --color-bg: var(--try-page-bg);
    --color-surface: var(--try-surface-alt);
    --color-surface-alt: var(--try-code-bg);
    --color-text: var(--try-text);
    --color-text-muted: var(--try-text-muted);
    --color-accent: var(--try-accent);
    --color-secondary: var(--try-accent-2);
    --color-border: var(--try-outline);
    --radius-sm: 4px;

    --try-navbar-bg: #24211d;
    --try-navbar-border: #332d25;
    --try-navbar-link: #faf5eb;
    --try-navbar-link-hover: #ffffff;
    --try-control-bg: #ffffff;
    --try-control-bg-readonly: rgba(245, 244, 239, 0.74);
    --try-control-border: rgba(24, 35, 50, 0.22);
    --try-control-border-focus: var(--try-outline-strong);
    --try-control-divider-focus: rgba(24, 35, 50, 0.34);
    --try-control-text: #182332;
    --try-control-addon-bg: #f1efe8;
    --try-control-placeholder: #82796c;
    --try-output-bg: rgba(255, 254, 249, 0.74);
    --try-output-border: rgba(24, 35, 50, 0.14);
    --try-output-text: #101820;
    --try-highlight-bracket: #6b7280;
    --try-highlight-tag: #1f5f8b;
    --try-highlight-attr: #8a4b16;
    --try-highlight-value: #207a5a;
    --try-highlight-comment: #77736a;
    --try-highlight-cdata: #7a4f8d;
    --try-highlight-doctype: #7c5b26;
    --try-highlight-pi: #7c5b26;
    --try-highlight-entity: #9b3f3f;
    --try-button-bg: #ffffff;
    --try-button-hover-bg: #fffaf0;
    --try-button-text: #22201c;
    --try-button-border: rgba(24, 35, 50, 0.62);
    --try-button-shadow: 2px 2px 0 rgba(24, 35, 50, 0.32);
    --try-button-shadow-active: 1px 1px 0 rgba(24, 35, 50, 0.32);
    --try-primary-bg: var(--try-accent);
    --try-primary-hover-bg: #255566;
    --try-primary-border: #255566;
    --try-primary-shadow: 2px 2px 0 rgba(24, 35, 50, 0.32);
    --try-primary-shadow-active: 1px 1px 0 rgba(24, 35, 50, 0.32);
    --try-primary-text: #ffffff;
    --try-dialog-bg: #ffffff;
    --try-dialog-footer-bg: #f3f6f1;
    --try-spinner-color: var(--try-accent);
    --try-danger-bg: #fff0ed;
    --try-danger-surface: #fff8f6;
    --try-danger-surface-end: #fffdfb;
    --try-danger-border: #c76b5d;
    --try-danger-rule: rgba(199, 107, 93, 0.28);
    --try-danger-code-rule: rgba(199, 107, 93, 0.5);
    --try-danger-text: #8f2f21;
    --try-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

@media (prefers-color-scheme: dark) {
    :root {
        --try-page-bg: #162234;
        --try-surface: #1a2a40;
        --try-surface-alt: #22334c;
        --try-input-zone-bg: #19283d;
        --try-input-zone-end: #1a2a40;
        --try-output-zone-bg: #18263a;
        --try-output-zone-end: #19283d;
        --try-query-zone-bg: #19283d;
        --try-query-zone-end: #1a2a40;
        --try-settings-bg: #1a2a40;
        --try-code-bg: #121f2d;
        --try-code-rule: rgba(188, 207, 227, 0.28);
        --try-result-code-text: #9fc5d8;
        --try-result-code-rule: rgba(159, 197, 216, 0.34);
        --try-intro-bg: #1b3149;
        --try-paper-edge: rgba(5, 10, 18, 0.68);
        --try-text: #edf3f8;
        --try-text-muted: #a1adba;
        --try-outline: rgba(188, 207, 227, 0.34);
        --try-outline-strong: #72879e;
        --try-accent: #8db4c5;
        --try-accent-2: #85b8a5;
        --try-intro-border: #49657f;
        --try-intro-accent: #9fbfce;
        --try-intro-close-hover-bg: rgba(159, 191, 206, 0.14);
        --try-control-divider: rgba(188, 207, 227, 0.2);
        --try-query-border: rgba(188, 207, 227, 0.28);
        --try-result-border: rgba(188, 207, 227, 0.14);
        --try-result-token-hover-bg: rgba(141, 180, 197, 0.14);
        --try-scrollbar-thumb: rgba(188, 207, 227, 0.34);
        --try-scrollbar-thumb-hover: rgba(188, 207, 227, 0.52);
        --color-bg: var(--try-page-bg);
        --color-surface: var(--try-surface);
        --color-surface-alt: var(--try-code-bg);
        --color-text: var(--try-text);
        --color-text-muted: var(--try-text-muted);
        --color-accent: var(--try-accent);
        --color-secondary: var(--try-accent-2);
        --color-border: var(--try-outline);
        --try-navbar-bg: #0f1721;
        --try-navbar-border: #263447;
        --try-navbar-link: #dce7f1;
        --try-navbar-link-hover: #ffffff;
        --try-control-bg: #142234;
        --try-control-bg-readonly: #22334c;
        --try-control-border: rgba(188, 207, 227, 0.28);
        --try-control-border-focus: #72879e;
        --try-control-divider-focus: rgba(188, 207, 227, 0.42);
        --try-control-text: var(--color-text);
        --try-control-addon-bg: #1c2d44;
        --try-control-placeholder: #8796a8;
        --try-output-bg: #0e1721;
        --try-output-border: rgba(188, 207, 227, 0.18);
        --try-output-text: #f5f8fb;
        --try-highlight-bracket: #8f9caf;
        --try-highlight-tag: #80c8ee;
        --try-highlight-attr: #f1b06f;
        --try-highlight-value: #94d2a8;
        --try-highlight-comment: #9aa4b2;
        --try-highlight-cdata: #d8a8ef;
        --try-highlight-doctype: #dec27c;
        --try-highlight-pi: #dec27c;
        --try-highlight-entity: #f29b9b;
        --try-button-bg: #263a56;
        --try-button-hover-bg: #304765;
        --try-button-text: var(--color-text);
        --try-button-border: rgba(188, 207, 227, 0.42);
        --try-button-shadow: 2px 2px 0 rgba(5, 10, 18, 0.72);
        --try-button-shadow-active: 1px 1px 0 rgba(5, 10, 18, 0.72);
        --try-primary-bg: #3f6f86;
        --try-primary-hover-bg: #4b7d95;
        --try-primary-border: #6f99ac;
        --try-primary-shadow: 2px 2px 0 rgba(5, 10, 18, 0.72);
        --try-primary-shadow-active: 1px 1px 0 rgba(5, 10, 18, 0.72);
        --try-primary-text: #ffffff;
        --try-dialog-bg: #1a2a40;
        --try-dialog-footer-bg: #22334c;
        --try-spinner-color: var(--try-primary-hover-bg);
        --try-danger-bg: #3b222b;
        --try-danger-surface: #2e1d27;
        --try-danger-surface-end: #241b24;
        --try-danger-border: #9f5961;
        --try-danger-rule: rgba(255, 198, 206, 0.2);
        --try-danger-code-rule: rgba(255, 198, 206, 0.42);
        --try-danger-text: #ffc6ce;
        --try-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    scrollbar-color: var(--try-scrollbar-thumb) transparent;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--try-scrollbar-thumb);
    background-clip: content-box;
    border: 2px solid transparent;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--try-scrollbar-thumb-hover);
}

.try-editor {
    scrollbar-width: thin;
}

.try-editor::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html {
    min-height: 100%;
    background-color: var(--color-bg);
    scrollbar-gutter: stable;
}

body {
    min-height: 100%;
    margin: 0;
    color: var(--color-text);
    background-color: var(--color-bg);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.48;
}

a {
    color: var(--color-accent);
}

a:visited {
    color: var(--color-accent);
}

p {
    margin: 0;
}

form {
    margin: 0;
}

button,
input,
select,
textarea {
    font: inherit;
}

label {
    color: var(--color-text);
    cursor: pointer;
}

fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    display: block;
    margin: 0 0 var(--space-1);
    padding: 0;
    color: var(--try-text-muted);
    font-size: var(--try-font-sm);
    font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--color-text);
    line-height: 1.2;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
}

.try-page {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.try-content,
.try-footer,
.try-header-inner {
    width: min(100%, 96rem);
    margin-inline: auto;
    padding-inline: clamp(var(--space-3), 2vw, var(--space-5));
}

.try-content {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding-block: var(--space-4) var(--space-5);
}

.try-header {
    background: var(--try-navbar-bg);
    border-bottom: 1px solid var(--try-navbar-border);
}

.try-header-inner {
    min-height: 3.35rem;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.try-header-primary {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    min-height: 2.32rem;
    min-width: 0;
}

.try-brand {
    flex: 0 0 auto;
    color: var(--try-navbar-link);
    font-size: 1.55rem;
    font-weight: 100;
    text-decoration: none;
    white-space: nowrap;
}

.try-brand:visited {
    color: var(--try-navbar-link);
}

.try-brand:hover,
.try-brand:focus {
    color: var(--try-navbar-link-hover);
}

.try-nav-menu {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    min-width: 0;
}

.try-nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.try-nav-links a {
    color: var(--try-navbar-link);
    font-size: 1.05rem;
    font-weight: 100;
    text-decoration: none;
}

.try-nav-links a:visited {
    color: var(--try-navbar-link);
}

.try-nav-links a:hover,
.try-nav-links a:focus {
    color: var(--try-navbar-link-hover);
}

.try-header-actions {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
}

.try-nav-toggle {
    display: none;
    margin-left: auto;
    padding: 0.42rem 0.5rem;
}

.try-intro-dismissed #tryIntro {
    display: none;
}

.try-saved-state-loading .try-workbench,
.try-saved-state-loading .try-select,
.try-saved-state-loading .try-errors {
    visibility: hidden;
}

.try-intro {
    position: relative;
    padding: var(--space-3) calc(var(--space-6) + var(--space-2)) var(--space-3) var(--space-4);
    color: var(--color-text);
    background: var(--try-intro-bg);
    border: 1px solid var(--try-intro-border);
    border-radius: var(--radius-sm);
}

.try-intro p {
    max-width: 72rem;
    font-size: var(--try-font-md);
}

.try-intro-close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: var(--try-intro-accent);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--try-font-lg);
    line-height: 1;
    padding: 0;
}

.try-intro-close:hover,
.try-intro-close:focus {
    color: var(--color-text);
    background: var(--try-intro-close-hover-bg);
}

.try-workbench {
    display: grid;
    grid-template-columns: minmax(20rem, 5fr) minmax(24rem, 7fr);
    gap: var(--space-4);
    align-items: stretch;
}

.try-panel,
.try-select,
.try-errors {
    min-width: 0;
}

.try-errors {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background:
        linear-gradient(var(--try-danger-border), var(--try-danger-border)) left / 3px 100% no-repeat,
        linear-gradient(to right, var(--try-danger-surface), var(--try-danger-surface-end));
    box-shadow: inset 0 -1px 0 var(--try-danger-rule);
}

.try-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-4);
    background: var(--try-input-zone-end);
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.try-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 1.8rem;
}

.try-panel-heading .try-button {
    flex: 0 0 auto;
}

.try-panel-heading .try-button-small {
    min-height: 1.8rem;
    padding-block: 0.2rem;
}

.try-panel-output {
    background: var(--try-output-zone-end);
}

.try-panel-title {
    color: var(--try-text);
    font-size: var(--try-font-lg);
    font-weight: 300;
}

.try-editor-form {
    min-height: 0;
    position: relative;
}

.try-panel-input .try-editor-form {
    display: flex;
    flex: 1 1 auto;
}

.try-panel-output .try-editor-form,
.try-panel-output .try-editor {
    flex: 1 1 auto;
}

.try-editor,
input[type="text"],
.try-query-input input,
select {
    color: var(--try-control-text);
    background: var(--try-control-bg);
    border: 1px solid var(--try-control-border);
    border-radius: var(--radius-sm);
}

.try-editor {
    display: block;
    width: 100%;
    min-width: 0;
    padding: var(--space-3);
    resize: vertical;
    font-family: var(--font-mono);
    font-size: var(--try-font-sm);
    line-height: 1.5;
    font-variant-ligatures: none;
    tab-size: 4;
    cursor: text;
}

#htmlInput {
    contain: layout paint;
    flex: 1 1 auto;
    min-height: 18rem;
    height: auto;
    background: var(--try-control-bg);
}

#domOutput {
    contain: layout paint;
    flex: 0 0 auto;
    min-height: 27.5rem;
    height: 27.5rem;
    overflow: auto;
    margin: 0;
    resize: vertical;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--try-output-text);
    background: var(--try-output-bg);
    border-color: var(--try-output-border);
}

#domOutput:focus {
    border-color: var(--try-output-border);
    box-shadow: none;
}

html.try-resize-hide-editors #htmlInput,
html.try-resize-hide-editors #domOutput {
    content-visibility: hidden;
    overflow-x: hidden;
}

html.try-resize-hide-results .try-result-chunk,
html.try-resize-hide-errors .try-error-chunk {
    content-visibility: hidden;
}

::highlight(try-output-bracket) {
    color: var(--try-highlight-bracket);
}

::highlight(try-output-tag) {
    color: var(--try-highlight-tag);
}

::highlight(try-output-attr) {
    color: var(--try-highlight-attr);
}

::highlight(try-output-value) {
    color: var(--try-highlight-value);
}

::highlight(try-output-comment) {
    color: var(--try-highlight-comment);
}

::highlight(try-output-cdata) {
    color: var(--try-highlight-cdata);
}

::highlight(try-output-doctype) {
    color: var(--try-highlight-doctype);
}

::highlight(try-output-pi) {
    color: var(--try-highlight-pi);
}

::highlight(try-output-entity) {
    color: var(--try-highlight-entity);
}

input[type="text"],
.try-query-input input,
select {
    min-height: 2.2rem;
    padding: 0.4rem 0.55rem;
    font-size: var(--try-font-md);
}

select {
    width: 100%;
}

input[type="radio"],
input[type="checkbox"] {
    margin: 0;
    accent-color: var(--try-accent);
}

input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--try-accent);
    outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
    select {
        appearance: none;
        -webkit-appearance: none;
        padding-right: 2rem;
        background-color: var(--try-control-bg);
        background-image:
            linear-gradient(45deg, transparent 50%, var(--try-text-muted) 50%),
            linear-gradient(135deg, var(--try-text-muted) 50%, transparent 50%);
        background-position:
            calc(100% - 0.9rem) 50%,
            calc(100% - 0.58rem) 50%;
        background-repeat: no-repeat;
        background-size: 0.34rem 0.34rem;
        color-scheme: dark;
    }

    input[type="radio"],
    input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        display: inline-grid;
        flex: 0 0 auto;
        width: 0.88rem;
        height: 0.88rem;
        place-content: center;
        color: var(--try-primary-text);
        background: var(--try-control-bg);
        border: 1px solid var(--try-control-border);
        cursor: pointer;
    }

    input[type="radio"] {
        border-radius: 50%;
    }

    input[type="checkbox"] {
        border-radius: calc(var(--radius-sm) * 0.75);
    }

    input[type="radio"]::before,
    input[type="checkbox"]::before {
        content: "";
        transform: scale(0);
    }

    input[type="radio"]::before {
        width: 0.42rem;
        height: 0.42rem;
        background: currentColor;
        border-radius: 50%;
    }

    input[type="checkbox"]::before {
        width: 0.58rem;
        height: 0.46rem;
        background: currentColor;
        clip-path: polygon(13% 45%, 0 60%, 40% 100%, 100% 16%, 84% 0, 38% 66%);
    }

    input[type="radio"]:checked,
    input[type="checkbox"]:checked {
        background: var(--try-primary-bg);
        border-color: var(--try-primary-border);
    }

    input[type="radio"]:checked::before,
    input[type="checkbox"]:checked::before {
        transform: scale(1);
    }
}

textarea:focus,
input[type="text"]:focus,
.try-query-input input:focus,
select:focus {
    border-color: var(--try-control-border-focus);
    outline: none;
    box-shadow: none;
}

input[readonly],
textarea[readonly],
select[readonly],
input[disabled],
textarea[disabled],
select[disabled] {
    color: var(--color-text-muted);
    background-color: var(--try-control-bg-readonly);
}

input::placeholder,
textarea::placeholder {
    color: var(--try-control-placeholder);
}

.try-settings {
    display: grid;
    row-gap: 0.4rem;
    padding: var(--space-2) 0 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.try-setting-line {
    display: grid;
    grid-template-columns: 3.9rem minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-2);
    min-width: 0;
    min-height: 1.8rem;
}

.try-setting-label {
    min-width: 0;
    color: var(--try-text-muted);
    font-size: var(--try-font-sm);
    font-weight: 700;
    line-height: 1.48;
    white-space: nowrap;
}

.try-setting-label::after {
    content: ":";
}

.try-setting-line > .try-control-row,
.try-setting-line > select {
    min-width: 0;
}

.try-control-select {
    font-weight: 400;
}

.try-control-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    align-items: center;
}

.try-control-output .try-control-row {
    gap: var(--space-1) var(--space-2);
}

.try-control-output .try-choice {
    white-space: normal;
}

.try-choice {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--try-font-sm);
    line-height: 1.48;
    white-space: nowrap;
}

.try-choice span {
    line-height: 1.48;
}

.try-query-type label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--try-font-sm);
    line-height: 1.48;
    white-space: nowrap;
}

.try-control-select select {
    justify-self: start;
    width: clamp(13rem, 52vw, 20rem);
    max-width: 100%;
    min-height: 1.8rem;
    padding-block: 0.25rem;
    font-size: var(--try-font-sm);
    font-weight: 400;
}

.try-select {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--try-query-zone-end);
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.try-query {
    display: grid;
    grid-template-columns: minmax(0, 30rem) auto;
    gap: var(--space-3);
    align-items: center;
    justify-content: start;
}

.try-query-input {
    flex: 1 1 24rem;
    min-width: min(100%, 18rem);
    width: min(100%, 30rem);
    position: relative;
}

.try-input-combo {
    display: flex;
    min-width: 0;
    overflow: hidden;
    background: var(--try-control-bg);
    border: 1px solid var(--try-control-border);
    border-radius: var(--radius-sm);
}

.try-input-combo:focus-within {
    border-color: var(--try-control-border-focus);
}

.try-input-combo:focus-within .try-input-addon {
    border-right-color: var(--try-control-divider-focus);
}

.try-input-combo .try-input-addon {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    padding: 0.4rem 0.6rem;
    color: var(--try-control-text);
    background: var(--try-control-addon-bg);
    border: 0;
    border-right: 1px solid var(--try-control-border);
    border-radius: 0;
    font-size: var(--try-font-md);
    font-weight: 700;
}

.try-input-combo input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.2rem;
    padding: 0.4rem 0.55rem;
    color: var(--try-control-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: var(--try-font-md);
}

.try-input-combo input:focus {
    outline: none;
    box-shadow: none;
}

.try-input-addon a {
    color: inherit;
    text-decoration: none;
}

.try-input-addon a:hover,
.try-input-addon a:focus {
    color: var(--try-accent);
    text-decoration: underline;
}

.try-query-input input {
    padding-right: calc(var(--space-3) + 1.25rem);
}

.try-query-type {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    justify-content: flex-end;
}

.try-results,
#errorOutput {
    display: grid;
    gap: 0;
}

#selectOutput.try-results-reserved {
    min-height: 11.5rem;
}

.try-result-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-block: 0 0.6rem;
    color: var(--try-text-muted);
    font-size: var(--try-font-sm);
    line-height: 1.35;
}

.try-result-page-status {
    min-width: 8rem;
    text-align: center;
}

.try-result-chunk,
.try-error-chunk {
    content-visibility: auto;
    contain: layout paint;
    min-width: 0;
}

.try-result-chunk {
    contain-intrinsic-size: 0 60rem;
}

.try-error-chunk {
    contain-intrinsic-size: 0 18rem;
}

.try-result-row,
.try-error-row {
    display: grid;
    gap: var(--space-4);
    align-items: baseline;
    min-width: 0;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--try-result-border);
}

.try-result-row:first-child,
.try-error-row:first-child {
    border-top: 0;
}

.try-results > .try-result-row:last-child,
.try-result-chunk:last-child .try-result-row:last-child,
.try-error-chunk:last-child .try-error-row:last-child {
    border-bottom: 0;
}

.try-result-row,
.try-error-row {
    grid-template-columns: 2.6rem minmax(0, 1fr) 9.5rem;
}

.try-error-row {
    grid-template-columns: 2.6rem minmax(0, 1fr) 11rem;
}

.try-error-row,
.try-error-row:first-child {
    border-color: var(--try-danger-rule);
}

.try-result-count {
    font-family: var(--font-mono);
    font-size: var(--try-font-sm);
    line-height: 1.35;
    text-align: right;
    color: var(--color-text-muted);
}

.try-result-main,
.try-error-message {
    min-width: 0;
}

.try-error-position {
    justify-self: end;
    width: 100%;
    font-family: var(--font-mono);
    font-size: var(--try-font-sm);
    line-height: 1.35;
    max-width: 11rem;
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.try-error-message {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    color: var(--try-danger-text);
    line-height: 1.35;
}

.try-result-element {
    line-height: 1.35;
}

.try-result-range {
    justify-self: end;
    line-height: 1.35;
    max-width: 9.5rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.try-result-range a,
.try-result-range .selectCursor {
    color: var(--try-text-muted);
}

.try-result-range a:hover,
.try-result-range a:focus,
.try-result-range .selectCursor:hover,
.try-result-range .selectCursor:focus {
    color: var(--try-result-code-text);
}

#selectOutput code,
#errorOutput code {
    box-sizing: border-box;
    max-width: 100%;
    display: inline-block;
    padding: 0;
    overflow-wrap: anywhere;
    color: var(--color-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: var(--try-font-sm);
    line-height: 1.35;
    text-shadow: none;
    white-space: normal;
}

#selectOutput .try-result-element code {
    color: var(--try-result-code-text);
}

.try-result-range code {
    display: block;
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#errorOutput code {
    color: var(--try-danger-text);
}

#errorOutput .try-error-position code {
    display: inline-block;
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.try-result-text {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    margin-top: 0.15rem;
    color: var(--try-text-muted);
    font-size: var(--try-font-sm);
    line-height: 1.4;
}

.errCursor,
.selectCursor {
    border-radius: calc(var(--radius-sm) * 0.5);
    color: var(--try-accent);
    cursor: pointer;
    margin-inline: -0.08em;
    padding-inline: 0.08em;
}

.errCursor:hover,
.errCursor:focus,
.selectCursor:hover,
.selectCursor:focus {
    background: var(--try-result-token-hover-bg);
}

.errCursor code,
.selectCursor code,
code.errCursor,
code.selectCursor {
    color: var(--color-accent);
}

#errorOutput code.errCursor,
#selectOutput code.selectCursor {
    margin-inline: -0.08em;
    padding-inline: 0.08em;
}

.errCursor:hover code,
.errCursor:focus code,
.selectCursor:hover code,
.selectCursor:focus code,
#errorOutput code.errCursor:hover,
#errorOutput code.errCursor:focus,
#selectOutput code.selectCursor:hover,
#selectOutput code.selectCursor:focus {
    background: var(--try-result-token-hover-bg);
}

.try-footer {
    padding-block: var(--space-4) var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--try-font-sm);
    border-top: 1px solid var(--try-outline);
}

.try-footer a {
    color: var(--color-text-muted);
}

.try-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 2.2rem;
    padding: 0.4rem 0.75rem;
    color: var(--try-button-text);
    background: var(--try-button-bg);
    border: 1px solid var(--try-button-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--try-button-shadow);
    cursor: pointer;
    font-size: var(--try-font-md);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    text-shadow: none;
}

.try-button-small {
    min-height: 2rem;
    padding-block: 0.3rem;
}

.try-button.try-nav-toggle {
    display: none;
}

.try-button:visited {
    color: var(--try-button-text);
}

.try-button:hover {
    color: var(--try-button-text);
    background: var(--try-button-hover-bg);
    text-decoration: none;
}

.try-button:active {
    transform: translate(1px, 1px);
    box-shadow: var(--try-button-shadow-active);
}

.try-button:focus {
    color: var(--try-button-text);
    outline: none;
}

.try-brand:focus-visible,
.try-nav-links a:focus-visible,
.try-intro-close:focus-visible,
.try-dialog-close:focus-visible {
    outline: 2px solid var(--try-accent);
    outline-offset: 2px;
}

.try-button:focus-visible {
    border-color: var(--try-outline-strong);
}

.try-button:disabled {
    cursor: default;
    opacity: 0.7;
}

.try-button-primary {
    color: var(--try-primary-text);
    background: var(--try-primary-bg);
    border-color: var(--try-primary-border);
    box-shadow: var(--try-primary-shadow);
}

.try-button-primary:visited,
.try-button-primary:hover,
.try-button-primary:focus {
    color: var(--try-primary-text);
}

.try-button-primary:hover {
    background: var(--try-primary-hover-bg);
    border-color: var(--try-primary-hover-bg);
}

.try-button-primary:active {
    box-shadow: var(--try-primary-shadow-active);
}

.button-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 16px 16px;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 16px 16px;
}

.button-icon-link {
    mask-image: url('/rez/ico/link@1cnR12.svg');
    -webkit-mask-image: url('/rez/ico/link@1cnR12.svg');
}

.button-icon-cloud-arrow-down {
    mask-image: url('/rez/ico/cloud-arrow-down@sLa3ME.svg');
    -webkit-mask-image: url('/rez/ico/cloud-arrow-down@sLa3ME.svg');
}

.button-icon-bars-3 {
    mask-image: url('/rez/ico/bars-3@DnbM6u.svg');
    -webkit-mask-image: url('/rez/ico/bars-3@DnbM6u.svg');
}

.try-alert {
    padding: var(--space-3);
    border: 1px solid var(--try-outline);
    border-radius: var(--radius-sm);
}

.try-alert-error {
    color: var(--try-danger-text);
    background: var(--try-danger-bg);
    border-color: var(--try-danger-border);
    text-shadow: none;
}

.try-alert-notice {
    color: var(--try-control-text);
    background: var(--try-control-bg-readonly);
}

[hidden] {
    display: none !important;
}

.try-dialog-open {
    overflow: hidden;
}

.try-dialog[hidden] {
    display: none;
}

.try-dialog {
    position: fixed;
    top: 10vh;
    left: 50%;
    z-index: 1050;
    width: min(38rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    overflow: auto;
    color: var(--color-text);
    background: var(--try-dialog-bg);
    border: 1px solid var(--try-control-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--try-shadow);
    transform: translateX(-50%);
}

.try-dialog-header,
.try-dialog-body,
.try-dialog-footer {
    padding: var(--space-4);
}

.try-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.try-dialog-header h3 {
    font-size: var(--text-lg);
}

.try-dialog-body {
    display: grid;
    gap: var(--space-3);
}

.try-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    background: var(--try-dialog-footer-bg);
}

.try-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: #000000;
    opacity: 0.42;
}

.try-dialog-close {
    display: inline-grid;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    place-items: center;
    color: var(--color-text);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--try-font-lg);
    line-height: 1;
    opacity: 0.78;
}

.try-dialog-close:hover,
.try-dialog-close:focus {
    opacity: 1;
    background: var(--color-surface-alt);
}

#dialogFetchForm {
    margin-bottom: 0;
}

.try-input-group .try-input-addon {
    flex: 0 0 7rem;
}

#fetchWait,
#saveStateWait {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    min-height: 1.75rem;
}

.wait-spinner {
    width: 24px;
    height: 24px;
    color: var(--try-spinner-color);
}

.try-pending-indicator {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--try-spinner-color);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

#inputForm .try-pending-indicator {
    top: var(--space-3);
    right: var(--space-3);
}

.try-query-input .try-pending-indicator {
    top: 50%;
    right: var(--space-2);
    margin-top: -0.625rem;
}

.try-pending-indicator.is-visible {
    opacity: 0.8;
}

.try-pending-indicator.is-hiding {
    opacity: 0;
}

.try-pending-indicator .wait-spinner {
    width: 1.25rem;
    height: 1.25rem;
}

@media (max-width: 900px) {
    .try-workbench {
        grid-template-columns: 1fr;
    }

    #htmlInput {
        min-height: 18rem;
        height: 18rem;
    }

    #domOutput {
        min-height: 20rem;
        height: 20rem;
    }

    #selectOutput.try-results-reserved {
        min-height: 21.5rem;
    }

    .try-result-row,
    .try-error-row {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .try-result-range,
    .try-error-position {
        grid-column: 2;
        justify-self: start;
        text-align: left;
    }

    .try-error-message {
        grid-column: 2;
    }
}

@media (max-width: 540px) {
    .try-header-inner {
        flex-wrap: wrap;
        gap: var(--space-3);
        padding-block: var(--space-2);
    }

    .try-header-primary {
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-3);
    }

    .try-button.try-nav-toggle {
        display: inline-flex;
    }

    .try-nav-menu {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .try-nav-menu.is-open {
        display: flex;
    }

    .try-nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .try-header-actions {
        align-self: flex-start;
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .try-query {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .try-query-input {
        min-width: 0;
    }

    .try-query-type {
        justify-content: flex-start;
        gap: var(--space-2) var(--space-3);
    }
}

@media (max-width: 480px) {
    .try-content {
        padding-block: var(--space-4);
    }

    .try-panel-title {
        font-size: var(--text-lg);
    }

    .try-intro {
        padding-left: var(--space-3);
    }

    .try-dialog-footer {
        flex-wrap: wrap;
    }
}