.jsc-page {
    --jsc-ink: #192131;
    --jsc-muted: #657087;
    --jsc-line: #dfe4ed;
    --jsc-soft: #f4f6fa;
    --jsc-violet: #654ee8;
    --jsc-violet-dark: #4d39ca;
    --jsc-violet-soft: #efecff;
    --jsc-cyan: #2cc7cf;
    --jsc-green: #15966d;
    --jsc-green-soft: #e8f8f1;
    --jsc-red: #d64b64;
    --jsc-red-soft: #fff0f3;
    --jsc-orange: #c87520;
    --jsc-orange-soft: #fff5e8;
    --jsc-blue: #3478d4;
    --jsc-blue-soft: #edf5ff;
    --jsc-dark: #0d121b;
    --jsc-panel: #111824;
    --jsc-panel-up: #161f2d;
    --jsc-dark-line: #263246;
    --jsc-dark-muted: #8996ac;
    width: min(1480px, calc(100% - 40px));
    margin: 0 auto;
    padding: 50px 0 0;
    color: var(--jsc-ink);
}

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

.jsc-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 42px;
    margin: 0 8px 28px;
}

.jsc-hero-copy { max-width: 980px; }

.jsc-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: #5e4bd5;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .105em;
    text-transform: uppercase;
}

.jsc-eyebrow span {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid #d3ccff;
    border-radius: 10px;
    background: var(--jsc-violet-soft);
    font: 850 .95rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.jsc-hero h1 {
    margin: 0;
    font-size: clamp(2.6rem, 5.2vw, 5.1rem);
    font-weight: 880;
    letter-spacing: -.065em;
    line-height: .94;
}

.jsc-hero p {
    max-width: 900px;
    margin: 16px 0 0;
    color: #59647a;
    font-size: clamp(1rem, 1.45vw, 1.18rem);
    line-height: 1.57;
}

.jsc-trust {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 9px;
    padding-bottom: 5px;
    color: #5f697e;
    font-size: .82rem;
    font-weight: 720;
}

.jsc-trust span { display: flex; align-items: center; gap: 9px; }
.jsc-trust i { display: grid; width: 16px; color: var(--jsc-violet); font-style: normal; font-weight: 900; place-items: center; }
.jsc-trust .jsc-comment-mark { font: 850 .58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.jsc-trust .jsc-dot { width: 9px; height: 9px; margin: 0 4px; border-radius: 50%; background: #20aa7c; }
.jsc-trust a { margin-top: 2px; color: #5d48d5; font-size: .78rem; font-weight: 800; text-decoration: none; text-underline-offset: 3px; }
.jsc-trust a:hover { color: #4430bb; text-decoration: underline; }

.jsc-app { display: grid; gap: 18px; }

.jsc-saved-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid #d9d2ff;
    border-radius: 16px;
    background: linear-gradient(135deg, #f7f5ff, #f1f8ff);
    color: #4e426f;
}

.jsc-saved-icon { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: #654ee8; color: #fff; font-weight: 900; }
.jsc-saved-banner > div { display: grid; min-width: 0; gap: 2px; }
.jsc-saved-banner strong { font-size: .8rem; }
.jsc-saved-banner div span, .jsc-saved-banner time { color: #756d89; font-size: .68rem; }
.jsc-saved-banner time { margin-left: auto; text-align: right; }

.jsc-control-deck {
    display: grid;
    grid-template-columns: minmax(350px, .78fr) minmax(520px, 1.22fr);
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--jsc-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(30, 37, 53, .07);
}

.jsc-mode-block, .jsc-options-block { min-width: 0; }
.jsc-control-label { display: block; margin: 0 0 8px 4px; color: #727c90; font-size: .69rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }

.jsc-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 5px;
    border: 1px solid #e1e5ed;
    border-radius: 14px;
    background: #f4f6f9;
}

.jsc-segmented button {
    display: flex;
    min-width: 0;
    min-height: 57px;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #657087;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: .15s ease;
}

.jsc-segmented button:hover { color: #333d51; }
.jsc-segmented button.is-active { border-color: #d9d1ff; background: #fff; color: #382b98; box-shadow: 0 4px 13px rgba(71, 55, 164, .12); }
.jsc-segmented button:focus-visible, .jsc-option input:focus-visible + .jsc-check, .jsc-button:focus-visible, .jsc-results button:focus-visible, .jsc-editor-buttons button:focus-visible, .jsc-editor-buttons label:focus-within { outline: 3px solid rgba(101, 78, 232, .28); outline-offset: 2px; }
.jsc-segmented button > span:last-child { display: grid; min-width: 0; gap: 2px; }
.jsc-segmented strong { color: inherit; font-size: .83rem; line-height: 1.1; }
.jsc-segmented small { overflow: hidden; color: #8490a5; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.jsc-mode-icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: #e8ebf0; color: #566174; font: 800 .68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.jsc-segmented .is-active .jsc-mode-icon { background: var(--jsc-violet-soft); color: var(--jsc-violet-dark); }

.jsc-mode-locked {
    display: flex;
    min-height: 68px;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border: 1px solid #d9d1ff;
    border-radius: 14px;
    background: linear-gradient(135deg, #faf9ff, #f2f5ff);
    color: #382b98;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.jsc-mode-locked .jsc-mode-icon { background: #e9e4ff; color: var(--jsc-violet-dark); }
.jsc-mode-locked > span:last-child { display: grid; min-width: 0; gap: 3px; }
.jsc-mode-locked strong { font-size: .86rem; line-height: 1.15; }
.jsc-mode-locked small { color: #7e74ad; font-size: .68rem; line-height: 1.3; }

.jsc-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 68px;
    overflow: hidden;
    border: 1px solid #e1e5ed;
    border-radius: 14px;
}

.jsc-option {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-right: 1px solid #e4e7ee;
    background: #fff;
    cursor: pointer;
    transition: background .15s ease;
}

.jsc-option:last-child { border-right: 0; }
.jsc-option:hover { background: #fafaff; }
.jsc-option:has(input:checked) { background: #f8f6ff; }
.jsc-option input { position: absolute; opacity: 0; pointer-events: none; }
.jsc-option > span:last-child { display: grid; min-width: 0; gap: 3px; }
.jsc-option strong { overflow: hidden; color: #343d50; font-size: .75rem; line-height: 1.15; text-overflow: ellipsis; }
.jsc-option small { overflow: hidden; color: #8490a5; font-size: .62rem; line-height: 1.25; text-overflow: ellipsis; }
.jsc-check { position: relative; flex: 0 0 36px; width: 36px; height: 21px; border: 1px solid #c6ccd7; border-radius: 999px; background: #e5e8ee; transition: .16s ease; }
.jsc-check::after { content: ''; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(30, 36, 48, .25); transition: .16s ease; }
.jsc-option input:checked + .jsc-check { border-color: #6752e7; background: #6752e7; }
.jsc-option input:checked + .jsc-check::after { left: 18px; }

.jsc-workspace {
    overflow: hidden;
    border: 1px solid #202b3e;
    border-radius: 22px;
    background: var(--jsc-dark);
    box-shadow: 0 28px 75px rgba(20, 27, 40, .2), 0 3px 8px rgba(20, 27, 40, .11);
    color: #eff3fa;
}

.jsc-editors { display: grid; grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr); min-height: 500px; }
.jsc-editor { position: relative; display: grid; min-width: 0; grid-template-rows: auto minmax(390px, 1fr) auto; background: var(--jsc-dark); }

.jsc-editor-head {
    display: flex;
    min-width: 0;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 15px;
    border-bottom: 1px solid #202a3b;
    background: var(--jsc-panel);
}

.jsc-editor-head > div { display: flex; min-width: 0; align-items: center; gap: 10px; }
.jsc-editor-head > div > span:last-child { display: grid; min-width: 0; gap: 3px; }
.jsc-editor-head strong { overflow: hidden; color: #f5f7fb; font-size: .87rem; text-overflow: ellipsis; white-space: nowrap; }
.jsc-editor-head small { overflow: hidden; color: var(--jsc-dark-muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.jsc-side-mark { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border: 1px solid #6653da; border-radius: 9px; background: rgba(101, 78, 232, .17); color: #b5a9ff; font: 850 .78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.jsc-side-mark-b { border-color: #267f91; background: rgba(44, 199, 207, .12); color: #77dfe4; }
.jsc-side-mark-b.is-schema { border-color: #b16a27; background: rgba(224, 140, 55, .13); color: #f0b16f; }
.jsc-validity { flex: 0 0 auto; color: #768399; font-size: .68rem; font-weight: 750; }
.jsc-validity.is-valid { color: #4bd1a2; }
.jsc-validity.is-invalid { color: #ff8295; }

.jsc-editor-body { position: relative; min-width: 0; min-height: 390px; overflow: hidden; }
.jsc-lines, .jsc-highlight, .jsc-editor textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.62;
    tab-size: 2;
}

.jsc-lines {
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 0;
    width: 51px;
    overflow: hidden;
    margin: 0;
    padding: 17px 11px;
    border-right: 1px solid #1c2635;
    color: #526077;
    background: #0b1018;
    text-align: right;
    user-select: none;
}

.jsc-line-number { display: block; height: 1.62em; padding-right: 4px; border-radius: 4px 0 0 4px; }
.jsc-line-number.is-focused { background: rgba(111, 88, 241, .22); color: #c6bbff; font-weight: 800; }
.jsc-editor[data-editor="right"] .jsc-line-number.is-focused { background: rgba(44, 199, 207, .17); color: #8ee9ed; }

.jsc-highlight {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 17px 18px 17px 66px;
    border: 0;
    background: transparent;
    color: #dce3ed;
    pointer-events: none;
    white-space: pre;
}

.jsc-highlight code { display: block; min-width: 100%; color: inherit; font: inherit; white-space: inherit; }
.jsc-code-line { display: block; width: max-content; min-width: 100%; min-height: 1.62em; }
.jsc-code-line.is-focused { background: linear-gradient(90deg, rgba(111, 88, 241, .25), rgba(111, 88, 241, .08) 72%, transparent); box-shadow: inset 3px 0 #8d7aff; }
.jsc-editor[data-editor="right"] .jsc-code-line.is-focused { background: linear-gradient(90deg, rgba(44, 199, 207, .2), rgba(44, 199, 207, .06) 72%, transparent); box-shadow: inset 3px 0 #42ced5; }
.jsc-token-key { color: #8fd8ff; }
.jsc-token-string { color: #9bdc9f; }
.jsc-token-number { color: #f2bd78; }
.jsc-token-boolean { color: #b9a5ff; }
.jsc-token-null { color: #ff9eb0; font-style: italic; }
.jsc-token-comment { color: #627086; font-style: italic; }
.jsc-token-punctuation { color: #8190a7; }
.jsc-token-invalid { color: #ff758b; text-decoration: underline wavy rgba(255, 117, 139, .7); text-underline-offset: 3px; }

.jsc-editor textarea {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    resize: none;
    overflow: auto;
    padding: 17px 18px 17px 66px;
    border: 0;
    outline: 0;
    background: transparent;
    color: transparent;
    caret-color: #9e8cff;
    -webkit-text-fill-color: transparent;
    white-space: pre;
}

.jsc-editor textarea::placeholder { color: #4f5c71; -webkit-text-fill-color: #4f5c71; }
.jsc-editor textarea::selection { background: rgba(104, 84, 232, .34); }
.jsc-editor textarea:focus { background: rgba(123, 103, 255, .015); }
.jsc-editor-body.is-dragging .jsc-drop { opacity: 1; pointer-events: auto; }
.jsc-drop { position: absolute; z-index: 5; inset: 10px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; border: 2px dashed #8a77ff; border-radius: 13px; background: rgba(12, 17, 26, .95); color: #d9d3ff; font-size: .85rem; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.jsc-drop span { font-size: 2rem; }

.jsc-editor-foot {
    position: relative;
    z-index: 3;
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px 8px 16px;
    border-top: 1px solid #1d2737;
    background: rgba(17, 24, 36, .96);
    color: #78869c;
    font-size: .68rem;
}

.jsc-editor-buttons { display: flex; align-items: center; gap: 4px; }
.jsc-editor-buttons button, .jsc-editor-buttons label { display: inline-flex; min-height: 29px; align-items: center; gap: 5px; margin: 0; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #8996aa; font: inherit; font-size: .66rem; font-weight: 750; cursor: pointer; transition: .14s ease; }
.jsc-editor-buttons button:hover, .jsc-editor-buttons label:hover { border-color: #344157; background: #1d2737; color: #eef2f8; }

.jsc-parse-error { position: absolute; z-index: 7; right: 12px; bottom: 55px; left: 63px; overflow: hidden; padding: 9px 12px; border: 1px solid #713446; border-radius: 9px; background: rgba(70, 25, 39, .96); color: #ffc4ce; font: 650 .72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }

.jsc-center-rail { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--jsc-dark-line); border-left: 1px solid var(--jsc-dark-line); background: #111825; color: #657289; }
.jsc-center-rail span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #303c50; border-radius: 50%; background: #182131; font-size: .78rem; }

.jsc-actions {
    display: flex;
    min-height: 68px;
    align-items: center;
    gap: 8px;
    padding: 12px 15px;
    border-top: 1px solid var(--jsc-dark-line);
    background: var(--jsc-panel-up);
}

.jsc-button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #344055;
    border-radius: 10px;
    background: #1b2535;
    color: #c7d0df;
    font: inherit;
    font-size: .77rem;
    font-weight: 780;
    white-space: nowrap;
    cursor: pointer;
    transition: .14s ease;
}

.jsc-button:hover { border-color: #4b5971; background: #222e40; color: #fff; }
.jsc-button:active { transform: translateY(1px); }
.jsc-button-muted { border-color: transparent; background: transparent; color: #8390a4; }
.jsc-button-primary { min-height: 42px; margin-left: 2px; padding: 0 18px; border-color: #806eff; background: #6751e7; color: #fff; box-shadow: 0 7px 20px rgba(86, 64, 214, .25); }
.jsc-button-primary:hover { border-color: #a598ff; background: #745ff0; }
.jsc-ready { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: #8794a9; font-size: .7rem; font-weight: 700; }
.jsc-ready i { width: 7px; height: 7px; border-radius: 50%; background: #526077; }
.jsc-ready.is-valid { color: #6bcfae; }
.jsc-ready.is-valid i { background: #39bf91; box-shadow: 0 0 0 4px rgba(57, 191, 145, .1); }
.jsc-ready.is-invalid { color: #f88b9d; }
.jsc-ready.is-invalid i { background: #e9637a; }
.jsc-actions kbd { padding: 5px 8px; border: 1px solid #333f53; border-bottom-width: 2px; border-radius: 7px; background: #111824; color: #758299; font: 650 .64rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }

.jsc-results {
    overflow: hidden;
    border: 1px solid var(--jsc-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(30, 37, 53, .075);
}

.jsc-results-head { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 18px; border-bottom: 1px solid #e7eaf0; }
.jsc-results-head > div:first-child { display: flex; align-items: center; gap: 10px; }
.jsc-results-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: var(--jsc-violet-soft); color: var(--jsc-violet); font-size: 1rem; }
.jsc-results h2 { margin: 0; color: #242c3b; font-size: 1rem; font-weight: 830; }
.jsc-report-actions { display: flex; align-items: center; gap: 6px; }
.jsc-report-actions button { min-height: 34px; padding: 0 10px; border: 1px solid #dce1e9; border-radius: 9px; background: #fff; color: #647086; font: inherit; font-size: .7rem; font-weight: 750; cursor: pointer; }
.jsc-report-actions button:hover:not(:disabled) { border-color: #bfc6d2; color: #303a4d; }
.jsc-report-actions button:disabled { opacity: .42; cursor: not-allowed; }

.jsc-empty { display: flex; min-height: 230px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; padding: 35px 20px; color: #7c8799; text-align: center; }
.jsc-empty > span { display: grid; width: 64px; height: 64px; margin-bottom: 5px; place-items: center; border: 1px dashed #cbc5f1; border-radius: 19px; background: #f8f7ff; color: #7966df; font: 800 1rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.jsc-empty strong { color: #333d4f; font-size: .93rem; }
.jsc-empty p { max-width: 590px; margin: 0; font-size: .78rem; line-height: 1.55; }

.jsc-verdict { display: flex; align-items: center; gap: 13px; min-height: 92px; padding: 15px 18px; border-bottom: 1px solid #dcefe7; background: var(--jsc-green-soft); }
.jsc-verdict.is-different { border-bottom-color: #f0d6dc; background: var(--jsc-red-soft); }
.jsc-verdict-mark { display: grid; flex: 0 0 43px; width: 43px; height: 43px; place-items: center; border-radius: 14px; background: #fff; color: var(--jsc-green); font-size: 1.25rem; font-weight: 900; box-shadow: 0 3px 12px rgba(21, 150, 109, .14); }
.jsc-verdict.is-different .jsc-verdict-mark { color: var(--jsc-red); box-shadow: 0 3px 12px rgba(214, 75, 100, .13); }
.jsc-verdict > div { min-width: 0; }
.jsc-verdict h3 { margin: 0 0 3px; color: #176c52; font-size: .98rem; font-weight: 850; }
.jsc-verdict.is-different h3 { color: #a52f46; }
.jsc-verdict p { margin: 0; color: #4a7768; font-size: .75rem; line-height: 1.45; }
.jsc-verdict.is-different p { color: #865461; }
.jsc-node-count { flex: 0 0 auto; margin-left: auto; padding: 6px 9px; border: 1px solid rgba(21, 150, 109, .18); border-radius: 999px; color: #3f7966; font-size: .65rem; font-weight: 750; }
.jsc-verdict.is-different .jsc-node-count { border-color: rgba(214, 75, 100, .2); color: #95606c; }

.jsc-diff-tools { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-bottom: 1px solid #e6e9ef; background: #fafbfc; }
.jsc-filters { display: flex; min-width: 0; flex-wrap: wrap; gap: 5px; }
.jsc-filters button { display: inline-flex; min-height: 30px; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid #dfe3ea; border-radius: 8px; background: #fff; color: #707b8f; font: inherit; font-size: .66rem; font-weight: 730; cursor: pointer; }
.jsc-filters button:hover { border-color: #c2c8d2; color: #384356; }
.jsc-filters button.is-active { border-color: #cfc7ff; background: #efecff; color: #4d3ac4; }
.jsc-filters b { display: grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center; border-radius: 5px; background: #eef0f4; color: #788296; font-size: .6rem; }
.jsc-filters .is-active b { background: #ddd6ff; color: #4b38bd; }
.jsc-search { display: flex; flex: 0 1 310px; min-width: 190px; height: 34px; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid #dce1e8; border-radius: 9px; background: #fff; color: #7a8497; }
.jsc-search:focus-within { border-color: #9788ee; box-shadow: 0 0 0 3px rgba(101, 78, 232, .1); }
.jsc-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #364053; font: inherit; font-size: .7rem; }
.jsc-search input::placeholder { color: #9ba3b1; }

.jsc-diff-list { display: grid; gap: 8px; padding: 14px; }
.jsc-diff-item { position: relative; overflow: hidden; border: 1px solid #e1e5ec; border-left: 4px solid #8b95a6; border-radius: 11px; background: #fff; cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.jsc-diff-item:hover { border-color: #c9c2f5; box-shadow: 0 7px 18px rgba(56, 45, 121, .09); transform: translateY(-1px); }
.jsc-diff-item:focus-visible { outline: 3px solid rgba(101, 78, 232, .24); outline-offset: 2px; }
.jsc-diff-item.is-active { border-color: #8f7def; box-shadow: 0 0 0 3px rgba(101, 78, 232, .13), 0 9px 22px rgba(56, 45, 121, .1); }
.jsc-diff-item[data-kind="missing"] { border-left-color: var(--jsc-red); background: #fffbfc; }
.jsc-diff-item[data-kind="unexpected"] { border-left-color: var(--jsc-green); background: #fbfffd; }
.jsc-diff-item[data-kind="type"] { border-left-color: var(--jsc-orange); background: #fffdf9; }
.jsc-diff-item[data-kind="value"] { border-left-color: #d246a8; background: #fffafd; }
.jsc-diff-item[data-kind="order"] { border-left-color: var(--jsc-blue); background: #fbfdff; }
.jsc-diff-item[data-kind="constraint"] { border-left-color: #8b62cb; background: #fdfbff; }
.jsc-diff-main { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; }
.jsc-kind { display: grid; flex: 0 0 27px; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: #f0f2f5; color: #687386; font-size: .72rem; font-weight: 900; }
[data-kind="missing"] .jsc-kind { background: #ffe4e9; color: #b93650; }
[data-kind="unexpected"] .jsc-kind { background: #dff6ec; color: #167b5b; }
[data-kind="type"] .jsc-kind { background: #ffebcf; color: #a65d15; }
[data-kind="value"] .jsc-kind { background: #f9ddf1; color: #a52b7f; }
[data-kind="order"] .jsc-kind { background: #e1eeff; color: #2867b8; }
[data-kind="constraint"] .jsc-kind { background: #eee4fa; color: #7443ae; }
.jsc-diff-copy { display: grid; min-width: 0; gap: 5px; }
.jsc-diff-path { overflow-wrap: anywhere; color: #2c3546; font: 760 .76rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.jsc-diff-path small { margin-left: 7px; color: #8a93a2; font: 600 .61rem/1.3 inherit; }
.jsc-diff-message { color: #697487; font-size: .7rem; line-height: 1.4; }
.jsc-type-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; padding-top: 1px; }
.jsc-type { display: inline-flex; min-height: 26px; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid #e0e4eb; border-radius: 7px; background: #f7f8fa; color: #515c70; font: 700 .64rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.jsc-value { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jsc-type-arrow { color: #9aa2af; font-size: .7rem; }
.jsc-order-detail { display: flex; gap: 12px; padding: 9px 13px 11px 51px; border-top: 1px solid #e8ebf0; background: rgba(244, 247, 251, .65); }
.jsc-order-side { min-width: 0; flex: 1; }
.jsc-order-side > span { display: block; margin-bottom: 5px; color: #8b94a4; font-size: .58rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.jsc-order-sequence { display: flex; overflow: hidden; flex-wrap: wrap; gap: 4px; }
.jsc-order-sequence code { max-width: 170px; overflow: hidden; padding: 3px 6px; border: 1px solid #dfe4eb; border-radius: 5px; background: #fff; color: #536075; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.jsc-jump { display: flex; min-height: 31px; align-items: center; justify-content: flex-end; gap: 6px; padding: 5px 12px; border-top: 1px solid rgba(225, 229, 236, .8); color: #7765d9; font-size: .64rem; font-weight: 800; }
.jsc-jump span { font-size: .78rem; }
.jsc-diff-item:hover .jsc-jump, .jsc-diff-item.is-active .jsc-jump { color: #4f3dc6; }
.jsc-truncated { margin: 0 14px 14px; padding: 9px 12px; border: 1px solid #ead5af; border-radius: 9px; background: #fff8eb; color: #95651e; font-size: .7rem; }
.jsc-no-results { padding: 28px 20px; color: #7d8799; font-size: .76rem; text-align: center; }

.jsc-info { margin: 38px 8px 0; padding: 0 0 52px; }
.jsc-info-lead { display: flex; max-width: 1020px; align-items: flex-start; gap: 16px; }
.jsc-info-lead > span { display: grid; flex: 0 0 47px; width: 47px; height: 47px; place-items: center; border: 1px solid #d7d0fb; border-radius: 14px; background: #f3f0ff; color: #6551d8; font-size: 1.3rem; font-weight: 850; }
.jsc-info h2 { margin: 0 0 8px; color: #262e3d; font-size: clamp(1.45rem, 2.4vw, 2.2rem); font-weight: 840; letter-spacing: -.035em; }
.jsc-info-lead p { margin: 0; color: #667187; font-size: .94rem; line-height: 1.65; }
.jsc-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 24px; }
.jsc-features article { padding: 18px; border: 1px solid #e2e5ec; border-radius: 15px; background: #fff; }
.jsc-features article > span { display: inline-grid; min-width: 31px; height: 31px; padding: 0 7px; place-items: center; border-radius: 8px; background: var(--jsc-violet-soft); color: var(--jsc-violet); font: 800 .69rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.jsc-features h3 { margin: 12px 0 5px; color: #303848; font-size: .88rem; font-weight: 820; }
.jsc-features p { margin: 0; color: #6b7588; font-size: .76rem; line-height: 1.55; }
.jsc-seo-text { max-width: 1120px; margin: 25px 0 0; color: #7a8394; font-size: .78rem; line-height: 1.7; }

.jss-guide {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin: 42px 8px 0;
    padding: 0 0 64px;
    scroll-behavior: smooth;
}

.jss-guide-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, .55fr);
    gap: clamp(24px, 5vw, 70px);
    align-items: end;
    padding: clamp(26px, 4vw, 48px);
    border: 1px solid #ddd8fb;
    border-radius: 24px;
    background: radial-gradient(circle at 88% 5%, rgba(101, 78, 232, .14), transparent 31%), linear-gradient(135deg, #fbfaff, #f4f7ff);
}
.jss-kicker { display: inline-block; margin-bottom: 10px; color: #6551d8; font-size: .69rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.jss-guide-hero h2 { max-width: 900px; margin: 0 0 15px; color: #252d3c; font-size: clamp(1.8rem, 3.2vw, 3.35rem); font-weight: 870; letter-spacing: -.05em; line-height: 1.02; }
.jss-guide-hero > div > p { max-width: 900px; margin: 7px 0 0; color: #606b80; font-size: .9rem; line-height: 1.7; }
.jss-guide-hero aside { padding: 17px 18px; border: 1px solid #d4cdfc; border-radius: 16px; background: rgba(255, 255, 255, .78); color: #514576; }
.jss-guide-hero aside strong { display: block; margin-bottom: 5px; color: #4935bd; font-size: .75rem; }
.jss-guide-hero aside p { margin: 0; font-size: .72rem; line-height: 1.58; }

.jss-toc { display: flex; align-items: flex-start; gap: 20px; padding: 14px 17px; border: 1px solid #e0e4ec; border-radius: 15px; background: #fff; }
.jss-toc > strong { flex: 0 0 auto; padding-top: 5px; color: #4a5365; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; }
.jss-toc > div { display: flex; min-width: 0; flex-wrap: wrap; gap: 6px; }
.jss-toc a { padding: 5px 9px; border-radius: 7px; background: #f3f1ff; color: #5845c9; font-size: .68rem; font-weight: 760; text-decoration: none; }
.jss-toc a:hover { background: #e8e3ff; color: #4430b8; }

.jss-section { min-width: 0; padding: clamp(22px, 3.3vw, 38px); border: 1px solid #e0e4eb; border-radius: 21px; background: #fff; scroll-margin-top: 24px; }
.jss-section-head { display: flex; max-width: 1060px; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.jss-section-head > span { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: #eeebff; color: #5b46d1; font: 850 .69rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.jss-section-head h2 { margin: 0; color: #2a3241; font-size: clamp(1.25rem, 2.1vw, 1.85rem); font-weight: 850; letter-spacing: -.035em; }
.jss-section-head p { margin: 7px 0 0; color: #697489; font-size: .8rem; line-height: 1.65; }
.jss-section-head.compact { margin-bottom: 19px; }
.jss-section h3 { color: #30394a; }
.jss-section > ul { display: grid; gap: 8px; margin: 18px 0 0; padding-left: 19px; color: #677286; font-size: .73rem; line-height: 1.55; }

.jss-concepts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.jss-concepts > div { min-width: 0; padding: 16px; border: 1px solid #e4e7ed; border-radius: 14px; background: #fafbfc; }
.jss-concepts code { color: #6853db; font-size: .66rem; font-weight: 800; }
.jss-concepts h3 { margin: 10px 0 5px; font-size: .84rem; }
.jss-concepts p { margin: 0; color: #707a8d; font-size: .71rem; line-height: 1.55; }

.jss-code-split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(300px, 1.05fr); gap: 18px; align-items: start; }
.jss-code { max-width: 100%; overflow: auto; margin: 0; padding: 19px; border: 1px solid #29364a; border-radius: 15px; background: #111824; color: #d7e2f2; font: 500 .72rem/1.62 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; }
.jss-keywords { display: grid; gap: 7px; margin: 0; }
.jss-keywords > div { display: grid; grid-template-columns: minmax(110px, .28fr) 1fr; gap: 12px; padding: 11px 13px; border: 1px solid #e3e6ec; border-radius: 11px; }
.jss-keywords dt, .jss-keywords dd { margin: 0; }
.jss-keywords code { color: #5d48d5; font-size: .72rem; font-weight: 800; }
.jss-keywords dd { color: #697487; font-size: .7rem; line-height: 1.5; }

.jss-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.jss-steps li { display: flex; gap: 15px; padding: 16px 0; border-top: 1px solid #e7e9ee; }
.jss-steps li:first-child { padding-top: 0; border-top: 0; }
.jss-steps li > span { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border: 1px solid #d9d2ff; border-radius: 10px; color: #614bda; font: 850 .66rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.jss-steps h3 { margin: 1px 0 5px; font-size: .88rem; }
.jss-steps p { margin: 0; color: #697487; font-size: .74rem; line-height: 1.58; }

.jss-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.jss-form-grid > div { display: flex; min-width: 0; flex-direction: column; padding: 17px; border: 1px solid #e2e5eb; border-radius: 14px; background: #fbfcfd; }
.jss-form-grid > div > span { color: #6853db; font-size: .61rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.jss-form-grid h3 { margin: 9px 0 5px; font-size: .84rem; }
.jss-form-grid p { margin: 0 0 14px; color: #707a8d; font-size: .7rem; line-height: 1.5; }
.jss-form-grid pre { max-width: 100%; overflow: auto; margin: auto 0 0; padding: 10px; border-radius: 9px; background: #171f2c; color: #dfe8f5; font: 500 .64rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }

.jss-table-wrap { overflow-x: auto; border: 1px solid #e2e5eb; border-radius: 14px; }
.jss-drafts { width: 100%; min-width: 790px; border-collapse: collapse; font-size: .7rem; line-height: 1.5; }
.jss-drafts th, .jss-drafts td { padding: 12px 13px; border-bottom: 1px solid #e7e9ee; text-align: left; vertical-align: top; }
.jss-drafts thead th { background: #f5f6f9; color: #626d80; font-size: .61rem; letter-spacing: .06em; text-transform: uppercase; }
.jss-drafts tbody th { color: #343d4d; white-space: nowrap; }
.jss-drafts tbody td { color: #6a7588; }
.jss-drafts tbody tr:last-child > * { border-bottom: 0; }
.jss-status { display: inline-flex; padding: 4px 7px; border-radius: 999px; font-size: .59rem; font-weight: 820; white-space: nowrap; }
.jss-status.good { background: #e5f7ef; color: #147c5b; }
.jss-status.neutral { background: #edf3fc; color: #42658f; }
.jss-status.warn { background: #fff0dc; color: #98601f; }

.jss-deep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.jss-deep-grid .jss-section { height: 100%; }
.jss-composition-notes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jss-composition-notes li { display: grid; grid-template-columns: 68px 1fr; gap: 12px; padding: 13px; border: 1px solid #e2e5eb; border-radius: 11px; }
.jss-composition-notes code { color: #5d48d5; font-size: .71rem; font-weight: 850; }
.jss-composition-notes span { color: #697487; font-size: .71rem; line-height: 1.5; }

.jss-coverage { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.jss-coverage > div { padding: 18px; border: 1px solid #e0e4eb; border-radius: 15px; }
.jss-coverage h3 { margin: 0 0 12px; font-size: .86rem; }
.jss-coverage ul { display: grid; gap: 8px; margin: 0; padding-left: 17px; color: #687386; font-size: .69rem; line-height: 1.55; }
.jss-coverage code { padding: 1px 3px; border-radius: 4px; background: rgba(255,255,255,.7); color: inherit; font-size: .66rem; }
.jss-coverage .supported { border-color: #cce9dc; background: #f1fbf7; }
.jss-coverage .supported h3 { color: #157454; }
.jss-coverage .partial { border-color: #e7dbb8; background: #fffaf0; }
.jss-coverage .partial h3 { color: #906321; }
.jss-coverage .value { border-color: #ead2e4; background: #fff7fc; }
.jss-coverage .value h3 { color: #9b3279; }
.jss-coverage .ignored { border-color: #ead7dc; background: #fff8fa; }
.jss-coverage .ignored h3 { color: #a33d55; }

.jss-faq { display: grid; gap: 8px; }
.jss-faq details { border: 1px solid #e1e4ea; border-radius: 12px; background: #fbfcfd; }
.jss-faq summary { padding: 13px 16px; color: #384153; font-size: .77rem; font-weight: 800; cursor: pointer; }
.jss-faq details[open] summary { border-bottom: 1px solid #e5e7ec; }
.jss-faq p { margin: 0; padding: 13px 16px 15px; color: #6c7689; font-size: .73rem; line-height: 1.6; }

.jss-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(23px, 4vw, 38px); border-radius: 21px; background: #131b28; color: #eef3fa; }
.jss-cta h2 { margin: 0 0 6px; font-size: clamp(1.2rem, 2vw, 1.7rem); letter-spacing: -.03em; }
.jss-cta p { max-width: 700px; margin: 0; color: #aab6c8; font-size: .76rem; line-height: 1.55; }
.jss-cta > div:last-child { display: flex; flex: 0 0 auto; gap: 8px; }
.jss-cta a { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid #735ff0; border-radius: 9px; background: #6751e7; color: #fff; font-size: .69rem; font-weight: 800; text-decoration: none; }
.jss-cta a.secondary { border-color: #3a4658; background: transparent; color: #c9d3e1; }
.jss-cta a:hover { filter: brightness(1.08); }

.jsc-toast { position: fixed; z-index: 10000; right: 22px; bottom: 22px; max-width: min(380px, calc(100vw - 34px)); padding: 11px 14px; border: 1px solid #344157; border-radius: 10px; background: #141c29; color: #eef2f8; box-shadow: 0 12px 32px rgba(10, 16, 26, .28); font-size: .76rem; font-weight: 700; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; }
.jsc-toast.is-visible { opacity: 1; transform: translateY(0); }

.jsc-save-dialog {
    width: min(620px, calc(100% - 28px));
    max-height: calc(100dvh - 28px);
    overflow: auto;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: transparent;
    box-shadow: 0 30px 90px rgba(12, 18, 30, .32);
}

.jsc-save-dialog::backdrop { background: rgba(12, 18, 29, .64); backdrop-filter: blur(4px); }

.jsc-save-card { margin: 0; padding: 0; border: 1px solid #e0e4eb; border-radius: 22px; background: #fff; color: #202838; }
.jsc-save-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 21px 22px 17px; border-bottom: 1px solid #e8ebf0; }
.jsc-save-card > header > div { display: flex; align-items: flex-start; gap: 12px; }
.jsc-save-card > header > div > span { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #efecff; color: #654ee8; font-size: 1.05rem; font-weight: 900; }
.jsc-save-card h2, .jsc-save-card h3 { margin: 0; color: #222a39; font-weight: 850; letter-spacing: -.025em; }
.jsc-save-card h2 { font-size: 1.12rem; }
.jsc-save-card h3 { font-size: 1.18rem; text-align: center; }
.jsc-save-card header p { margin: 4px 0 0; color: #707a8d; font-size: .75rem; line-height: 1.45; }
.jsc-dialog-close { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid #dfe3ea; border-radius: 10px; background: #fff; color: #768094; font: 400 1.35rem/1 inherit; cursor: pointer; }
.jsc-dialog-close:hover { border-color: #c8ced8; color: #30394a; }
#jscSaveChoice, .jsc-save-success { padding: 20px 22px 22px; }
.jsc-save-account { margin: 0 0 13px; padding: 9px 11px; border-radius: 9px; background: #f4f6fa; color: #657087; font-size: .71rem; overflow-wrap: anywhere; }
.jsc-visibility-options { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.jsc-visibility-options legend { margin-bottom: 8px; color: #535e71; font-size: .72rem; font-weight: 820; }
.jsc-visibility-options label { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid #dfe3eb; border-radius: 13px; cursor: pointer; transition: .15s ease; }
.jsc-visibility-options label:hover { border-color: #beb5f3; background: #faf9ff; }
.jsc-visibility-options label:has(input:checked) { border-color: #8877ed; background: #f5f2ff; box-shadow: 0 0 0 3px rgba(101, 78, 232, .09); }
.jsc-visibility-options input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: #654ee8; }
.jsc-visibility-options span { display: grid; gap: 3px; }
.jsc-visibility-options strong { color: #303849; font-size: .79rem; }
.jsc-visibility-options small { color: #758095; font-size: .69rem; line-height: 1.4; }
.jsc-save-privacy { margin: 14px 0 0; color: #788296; font-size: .67rem; line-height: 1.5; }
.jsc-save-error { margin: 13px 0 0; padding: 9px 11px; border-radius: 9px; background: #fff0f3; color: #a42f47; font-size: .72rem; }
.jsc-save-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.jsc-save-card .jsc-button { min-height: 41px; border-color: #d9dee7; background: #fff; color: #5f6a7e; text-decoration: none; }
.jsc-save-card .jsc-button:hover { border-color: #bdc5d1; background: #f8f9fb; color: #30394a; }
.jsc-save-card .jsc-button-primary { border-color: #6751e7; background: #6751e7; color: #fff; }
.jsc-save-card .jsc-button-primary:hover { border-color: #745ff0; background: #745ff0; color: #fff; }
.jsc-save-card .jsc-button:disabled { opacity: .58; cursor: wait; }
.jsc-save-success { text-align: center; }
.jsc-success-mark { display: grid; width: 54px; height: 54px; margin: 2px auto 12px; place-items: center; border-radius: 17px; background: #e8f8f1; color: #15966d; font-size: 1.4rem; font-weight: 900; }
.jsc-save-success > p { margin: 7px auto 0; max-width: 460px; color: #6d778a; font-size: .75rem; line-height: 1.5; }
.jsc-share-url { display: flex; gap: 7px; margin-top: 17px; }
.jsc-share-url input { min-width: 0; flex: 1; height: 42px; padding: 0 11px; border: 1px solid #d8dde6; border-radius: 9px; background: #f8f9fb; color: #4c566a; font: 650 .68rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; outline: none; }
.jsc-share-url input:focus { border-color: #8f7def; box-shadow: 0 0 0 3px rgba(101, 78, 232, .11); }
.jsc-share-url button { min-height: 42px; padding: 0 13px; border: 1px solid #cfc7ff; border-radius: 9px; background: #efecff; color: #4d39ca; font: inherit; font-size: .71rem; font-weight: 800; cursor: pointer; }
.jsc-share-expiry { color: #8b6a31 !important; }

.jsc-expired-card { max-width: 680px; margin: 40px auto 90px; padding: clamp(28px, 7vw, 54px); border: 1px solid #e0e4eb; border-radius: 24px; background: #fff; box-shadow: 0 18px 55px rgba(25, 33, 49, .09); text-align: center; }
.jsc-expired-card > span { display: grid; width: 62px; height: 62px; margin: 0 auto 18px; place-items: center; border-radius: 19px; background: #fff5e8; font-size: 1.65rem; }
.jsc-expired-card h1 { margin: 0; color: #252d3c; font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 870; letter-spacing: -.05em; }
.jsc-expired-card p { margin: 14px auto 23px; max-width: 520px; color: #697487; line-height: 1.65; }
.jsc-expired-card a { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 0 18px; border-radius: 11px; background: #654ee8; color: #fff; font-size: .84rem; font-weight: 800; text-decoration: none; }

@media (max-width: 1180px) {
    .jsc-control-deck { grid-template-columns: 1fr; }
    .jsc-options { grid-template-columns: 1fr 1fr; }
    .jsc-option:nth-child(2n) { border-right: 0; }
    .jsc-option:nth-child(-n+2) { border-bottom: 1px solid #e4e7ee; }
    .jsc-hero { align-items: flex-start; flex-direction: column; gap: 17px; }
    .jsc-trust { display: grid; grid-template-columns: auto auto; }
    .jsc-trust a { grid-column: 1 / -1; }
    .jsc-diff-tools { align-items: stretch; flex-direction: column; }
    .jsc-search { flex-basis: auto; width: 100%; }
}

@media (max-width: 860px) {
    .jsc-page { width: min(100% - 20px, 720px); padding-top: 30px; }
    .jsc-hero { margin-right: 4px; margin-left: 4px; }
    .jsc-editors { grid-template-columns: 1fr; }
    .jsc-center-rail { min-height: 34px; border: 0; border-top: 1px solid var(--jsc-dark-line); border-bottom: 1px solid var(--jsc-dark-line); }
    .jsc-center-rail span { transform: rotate(90deg); }
    .jsc-editor { grid-template-rows: auto minmax(330px, 1fr) auto; }
    .jsc-editor-body { min-height: 330px; }
    .jsc-actions { flex-wrap: wrap; }
    .jsc-ready { order: 5; width: 100%; margin: 2px 0 0; }
    .jsc-actions kbd { margin-left: auto; }
    .jsc-features { grid-template-columns: 1fr; }
    .jsc-order-detail { padding-left: 13px; }
    .jss-guide { margin-right: 4px; margin-left: 4px; }
    .jss-guide-hero, .jss-code-split { grid-template-columns: 1fr; }
    .jss-concepts, .jss-form-grid { grid-template-columns: 1fr 1fr; }
    .jss-coverage { grid-template-columns: 1fr; }
    .jss-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
    .jsc-page { width: 100%; padding-top: 25px; }
    .jsc-hero, .jsc-info { margin-right: 15px; margin-left: 15px; }
    .jsc-hero h1 { font-size: clamp(2.45rem, 13vw, 3.4rem); }
    .jsc-hero p { font-size: .98rem; }
    .jsc-trust { display: flex; }
    .jsc-control-deck { gap: 13px; margin: 0 10px; padding: 11px; border-radius: 16px; }
    .jsc-saved-banner { margin: 0 10px; align-items: flex-start; flex-wrap: wrap; }
    .jsc-saved-banner time { width: 100%; margin-left: 48px; text-align: left; }
    .jsc-segmented { grid-template-columns: 1fr; }
    .jsc-options { grid-template-columns: 1fr; }
    .jsc-option { min-height: 58px; border-right: 0; border-bottom: 1px solid #e4e7ee; }
    .jsc-option:last-child { border-bottom: 0; }
    .jsc-workspace, .jsc-results { border-right: 0; border-left: 0; border-radius: 0; }
    .jsc-editor { grid-template-rows: auto minmax(300px, 1fr) auto; }
    .jsc-editor-body { min-height: 300px; }
    .jsc-lines, .jsc-highlight, .jsc-editor textarea { font-size: 12px; }
    .jsc-lines { width: 43px; padding-right: 8px; }
    .jsc-highlight, .jsc-editor textarea { padding-right: 12px; padding-left: 55px; }
    .jsc-editor-head { padding-right: 11px; padding-left: 11px; }
    .jsc-validity { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .jsc-editor-foot { padding-left: 11px; }
    .jsc-parse-error { left: 50px; }
    .jsc-actions { display: flex; flex-wrap: wrap; padding: 11px; }
    .jsc-button { min-width: 0; width: auto; flex: 1 1 auto; padding-right: 8px; padding-left: 8px; font-size: .69rem; line-height: 1.2; white-space: normal; }
    #jscExample, #jscClear { flex: 1 1 calc(50% - 4px); order: 1; }
    #jscSwap { width: 100%; flex: 1 1 100%; order: 2; }
    .jsc-button-primary { width: 100%; flex-basis: 100%; margin: 0; order: 4; }
    .jsc-ready { width: 100%; flex-basis: 100%; order: 3; }
    .jsc-actions kbd { display: none; }
    .jsc-results-head { align-items: flex-start; flex-direction: column; gap: 10px; }
    .jsc-report-actions { width: 100%; }
    .jsc-report-actions button { flex: 1; }
    .jsc-verdict { align-items: flex-start; }
    .jsc-node-count { display: none; }
    .jsc-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
    .jsc-filters button { flex: 0 0 auto; }
    .jsc-diff-main { flex-wrap: wrap; }
    .jsc-diff-copy { width: calc(100% - 39px); }
    .jsc-type-pair { width: 100%; margin-left: 38px; }
    .jsc-order-detail { flex-direction: column; }
    .jsc-info { padding-bottom: 35px; }
    .jsc-info-lead > span { display: none; }
    .jsc-info-lead p { font-size: .86rem; }
    .jsc-save-card > header { padding: 17px 16px 14px; }
    #jscSaveChoice, .jsc-save-success { padding: 16px; }
    .jsc-save-actions { flex-direction: column-reverse; }
    .jsc-save-card .jsc-button { width: 100%; }
    .jsc-share-url { flex-direction: column; }
    .jsc-share-url button { width: 100%; }
    .jsc-expired-card { margin: 25px 14px 60px; }
    .jss-guide { margin: 30px 10px 0; padding-bottom: 38px; }
    .jss-guide-hero { padding: 23px 19px; border-radius: 18px; }
    .jss-toc { align-items: stretch; flex-direction: column; gap: 9px; }
    .jss-toc > div { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
    .jss-toc a { flex: 0 0 auto; }
    .jss-section { padding: 20px 16px; border-radius: 17px; }
    .jss-section-head { gap: 10px; }
    .jss-section-head > span { flex-basis: 34px; width: 34px; height: 34px; }
    .jss-concepts, .jss-form-grid, .jss-deep-grid { grid-template-columns: minmax(0, 1fr); }
    .jss-code { padding: 15px; font-size: .65rem; }
    .jss-keywords > div { grid-template-columns: 1fr; gap: 5px; }
    .jss-deep-grid { gap: 22px; }
    .jss-cta { padding: 23px 19px; }
    .jss-cta > div:last-child { width: 100%; flex-direction: column; }
    .jss-cta a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .jsc-page *, .jsc-page *::before, .jsc-page *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media (forced-colors: active) {
    .jsc-highlight { display: none; }
    .jsc-editor textarea { color: CanvasText; -webkit-text-fill-color: CanvasText; }
}