:root{--jwt-header:#b45309;--jwt-payload:#6d28d9;--jwt-signature:#0369a1}[data-resolved-theme=dark]{--jwt-header:#fbbf24;--jwt-payload:#c4b5fd;--jwt-signature:#7dd3fc}.segment-panel,.claims-panel{min-height:240px}.workspace__pane--token{flex-direction:column;gap:.75rem;display:flex}.workspace__pane--token>.text-panel{background-color:var(--color-surface);border-radius:var(--radius-lg);box-shadow:0 0 0 1px var(--color-border-subtle), var(--shadow-sm);overflow:hidden}.token-panel{flex:55%;min-height:12rem}.signature-panel{flex:0 auto;min-height:0}.workspace__compact>.workspace__pane--token{box-shadow:none;background-color:#0000;overflow:auto}.workspace__compact .token-panel{flex:none;min-height:40vh;max-height:60vh}.workspace__compact .signature-panel{flex:none}.token-panel__input{flex-direction:column;flex:auto;min-height:6rem;display:flex;position:relative}.token-panel__choice{letter-spacing:0;text-transform:none;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:500;display:flex}.token-panel__choice .select{min-height:1.9rem}.token-panel__example{letter-spacing:0;text-transform:none;min-height:1.9rem;font-size:.8125rem}.token-mark--header{color:var(--jwt-header)}.token-mark--payload{color:var(--jwt-payload)}.token-mark--signature{color:var(--jwt-signature)}.token-legend{border-top:1px solid var(--color-border-subtle);flex-wrap:wrap;flex:none;gap:.15rem;padding:.3rem .5rem;display:flex}.token-legend__segment{box-shadow:none;color:var(--color-foreground);background:0 0;border-color:#0000;gap:.4rem;min-height:1.75rem;padding:0 .5rem;font-size:.75rem}.token-legend__segment:hover:not(:disabled){background-color:var(--color-surface-2);box-shadow:none;border-color:#0000}.token-legend__swatch{background-color:var(--jwt-signature);border-radius:50%;width:.5rem;height:.5rem}.token-legend__segment[data-segment=header] .token-legend__swatch{background-color:var(--jwt-header)}.token-legend__segment[data-segment=payload] .token-legend__swatch{background-color:var(--jwt-payload)}.token-legend__length{color:var(--color-secondary);font-family:var(--font-mono)}.token-legend__length:before{content:"· "}.workspace-status[data-tone=success]{--status-color:var(--color-success);--status-surface:var(--color-success-soft)}.workspace-status[data-tone=warning]{--status-color:var(--color-warning);--status-surface:var(--color-warning-soft)}.workspace-status[data-tone=error]{--status-color:var(--color-error);--status-surface:var(--color-error-soft)}.workspace-status__chips{flex-wrap:wrap;gap:.4rem;display:flex}.chip{--chip-color:var(--color-secondary);--chip-surface:var(--color-surface);background-color:var(--chip-surface);border:1px solid color-mix(in srgb, var(--chip-color) 40%, transparent);border-radius:var(--radius-pill);color:var(--color-foreground);align-items:center;gap:.35rem;min-height:1.6rem;padding:0 .6rem;font-size:.75rem;font-weight:500;line-height:1;display:inline-flex}.chip>svg{color:var(--chip-color);width:.8125rem;height:.8125rem}.chip[data-tone=success]{--chip-color:var(--color-success);--chip-surface:var(--color-success-soft);color:var(--chip-color)}.chip[data-tone=warning]{--chip-color:var(--color-warning);--chip-surface:var(--color-warning-soft);color:var(--chip-color)}.chip[data-tone=error]{--chip-color:var(--color-error);--chip-surface:var(--color-error-soft);color:var(--chip-color)}.workspace__details{flex-direction:column;flex:auto;min-width:0;min-height:0;display:flex}.panel__header--tabs{gap:.5rem;padding-top:.25rem;padding-bottom:.25rem}.segment__actions{letter-spacing:0;text-transform:none;flex:none;margin-left:auto}.signature__actions{flex-wrap:wrap;flex:none;gap:.4rem;display:flex}.segment__view{flex-direction:column;flex:auto;min-height:0;display:flex;position:relative}.segment__view[hidden]{display:none}.claims-panel__body,.signature-panel__body{flex-direction:column;flex:auto;gap:.75rem;min-height:0;padding:.6rem .9rem .9rem;display:flex;overflow:auto}.warnings{background-color:var(--color-warning-soft);border:1px solid color-mix(in srgb, var(--color-warning) 40%, transparent);border-radius:var(--radius-md);padding:.45rem .7rem;font-size:.8125rem}.warnings__heading{color:var(--color-warning);align-items:center;gap:.4rem;margin:0 0 .2rem;font-weight:600;display:flex}.warnings__heading svg{flex:none;width:.9rem;height:.9rem}.warnings ul{flex-direction:column;gap:.2rem;margin:0;padding:0;list-style:none;display:flex}.warnings li{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.warnings code{font-family:var(--font-mono);margin-left:.4rem}.warnings button{min-height:1.9rem;margin-left:auto;padding:0 .5rem;font-size:.8125rem}.claims{border-collapse:collapse;width:100%;font-size:.8125rem}.claims caption{color:var(--color-secondary);letter-spacing:.04em;text-align:left;text-transform:uppercase;padding:.25rem 0;font-size:.75rem}.claims th,.claims td{border-top:1px solid var(--color-border-subtle);text-align:left;vertical-align:top;padding:.35rem .5rem}.claims thead th{color:var(--color-secondary);border-top:0;font-weight:500}.claims tbody th{width:44%;font-weight:600}.claims__description{color:var(--color-secondary);margin-top:.15rem;font-size:.75rem;font-weight:400;display:block}.claims code,.claims pre{font-family:var(--font-mono);overflow-wrap:anywhere;white-space:pre-wrap;word-break:break-word;margin:0;font-size:.75rem}.claims__expansion{flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.3rem;display:flex}.claims__time{flex-direction:column;gap:.1rem;margin-top:.15rem;display:flex}.claims__absolute{color:var(--color-secondary);font-size:.75rem}.claims__note,.signature__note{color:var(--color-secondary);margin:0;font-size:.8125rem}.signature__facts{color:var(--color-secondary);font-family:var(--font-mono);letter-spacing:0;text-transform:none;flex-wrap:wrap;gap:.35rem;margin:0;font-size:.6875rem;font-weight:500;display:flex}.signature__facts div{display:contents}.signature__facts dd{margin:0}.signature__facts div+div dd:before{content:"· "}.signature__form{flex-direction:column;gap:.5rem;display:flex}.signature__field{flex-direction:column;gap:.25rem;font-size:.8125rem;display:flex}.signature__row{gap:.5rem;display:flex}.signature__field--grow{flex:auto;min-width:0}.signature__banner{background-color:var(--color-neutral-soft);border:1px solid color-mix(in srgb, var(--color-secondary) 40%, transparent);border-radius:var(--radius-md);color:var(--color-foreground);align-items:center;gap:.5rem;padding:.5rem .7rem;display:flex}.signature__banner>svg{flex:none;width:1rem;height:1rem}.signature__banner[data-tone=success]{background-color:var(--color-success-soft);border-color:color-mix(in srgb, var(--color-success) 40%, transparent);color:var(--color-success)}.signature__banner[data-tone=error]{background-color:var(--color-error-soft);border-color:color-mix(in srgb, var(--color-error) 40%, transparent);color:var(--color-error)}.signature__key{font-family:var(--font-mono);resize:vertical;padding:.4rem .6rem;font-size:.75rem;line-height:1.5}.signature__actions{padding:0}.signature__result{margin:0;font-size:.875rem;font-weight:500}.signature__banner .signature__note{margin-top:.15rem}@media (width>=768px) and (width<=1023px){.token-panel__example,.token-panel__choice .select,.token-legend__segment,.signature__row .text-input,.signature__row .select,.warnings button{min-height:44px}}