jwt-playground{--jwt-bg:#f8fafc;--jwt-input:#fff;--jwt-text:#172033;--jwt-muted:#475569;--jwt-border:#94a3b8;--jwt-header:#8b3d15;--jwt-payload:#156157;--jwt-signature:#684196;border:1px solid var(--jwt-border);background:var(--jwt-bg);color:var(--jwt-text);overflow-wrap:anywhere;color-scheme:light;border-radius:.75rem;margin-block:2rem;padding:clamp(1rem,3vw,1.5rem);font-size:1rem;line-height:1.6;display:block}.dark jwt-playground{--jwt-bg:#20252d;--jwt-input:#171b22;--jwt-text:#f1f5f9;--jwt-muted:#cbd5e1;--jwt-border:#64748b;--jwt-header:#f6b08b;--jwt-payload:#83d6c8;--jwt-signature:#d0b2f2;color-scheme:dark}jwt-playground [hidden]{display:none!important}jwt-playground .jwt-warning{border-left:3px solid var(--jwt-header);margin:0 0 1rem;padding-left:.75rem;font-weight:600}jwt-playground .jwt-note{color:var(--jwt-muted);margin-block:.75rem;font-size:.875rem}jwt-playground label{font-weight:600;display:block}jwt-playground textarea{box-sizing:border-box;border:1px solid var(--jwt-border);background:var(--jwt-input);width:100%;color:var(--jwt-text);resize:vertical;border-radius:.375rem;min-height:8rem;margin-top:.5rem;padding:.75rem;font:.875rem/1.6 monospace;display:block}jwt-playground fieldset{border:0;min-width:0;margin-top:1rem;padding:0}jwt-playground legend{font-size:.875rem}jwt-playground .jwt-controls{flex-wrap:wrap;gap:.5rem;margin-block:.5rem;display:flex}jwt-playground button{border:1px solid var(--jwt-border);background:var(--jwt-input);min-height:44px;color:var(--jwt-text);cursor:pointer;border-radius:.375rem;padding:.5rem .75rem;font-size:.875rem}jwt-playground button:hover:not(:disabled){border-color:var(--jwt-text)}jwt-playground button:disabled{opacity:.5;cursor:not-allowed}jwt-playground :is(button,textarea,pre,[data-segment]):focus-visible{outline:2px solid var(--jwt-payload);outline-offset:3px}jwt-playground .jwt-status{min-height:3rem;font-size:.875rem}jwt-playground .jwt-segments{gap:.75rem;display:grid}jwt-playground .jwt-segment{border-left:3px solid;min-width:0;padding-left:.75rem}jwt-playground .jwt-part-0{color:var(--jwt-header)}jwt-playground .jwt-part-1{color:var(--jwt-payload)}jwt-playground .jwt-part-2{color:var(--jwt-signature)}jwt-playground code{color:inherit;font:.8rem/1.65 monospace}jwt-playground code:before,jwt-playground code:after{content:none}jwt-playground [data-segment]{overflow-wrap:anywhere;max-height:8rem;display:block;overflow-y:auto}jwt-playground .jwt-json-grid{gap:1rem;margin-top:1.25rem;display:grid}jwt-playground .jwt-json-panel{min-width:0}jwt-playground .jwt-panel-title{justify-content:space-between;align-items:center;gap:.5rem;font-size:.875rem;display:flex}jwt-playground pre{background:var(--jwt-input);max-height:24rem;color:var(--jwt-text);scrollbar-width:thin;scrollbar-color:var(--jwt-border) var(--jwt-input);border-radius:.375rem;margin-block:.5rem;padding:1rem;overflow:auto}jwt-playground .jwt-copy{place-items:center;min-width:44px;padding:0;display:grid}jwt-playground .jwt-check-icon,jwt-playground [data-copied] .jwt-copy-icon{display:none}jwt-playground [data-copied] .jwt-check-icon{display:initial}jwt-playground .jwt-times{margin-block:1rem;font-size:.875rem}jwt-playground dt{margin-top:.75rem;font-weight:700}jwt-playground dd{margin:.25rem 0}@media (width>=768px){jwt-playground .jwt-segments{grid-template-columns:1fr 1.6fr 1fr}jwt-playground .jwt-json-grid{grid-template-columns:1fr 1.6fr}}