.form-wrapper{margin-bottom:var(--space-xl)}#input,#output{font-family:var(--font-family-mono);font-size:var(--font-size-s);max-height:150rem;min-height:16rem}.encoder__modes{display:flex;gap:var(--space-s);margin-bottom:var(--space-l)}.encoder__mode{font-weight:700}.encoder__controls{align-items:flex-end;display:flex;gap:var(--space-m);margin-bottom:var(--space-l)}.encoder__controls .form-row{flex:1 1 auto;margin-bottom:0}.encoder__control-buttons{display:flex;flex:0 0 auto;gap:var(--space-s)}@media only screen and (max-width:600px){.encoder__controls{flex-wrap:wrap}.encoder__control-buttons{width:100%}.encoder__control-buttons .button{flex:1 1 auto}}.encoder__detect{color:var(--text-secondary);font-size:var(--font-size-s);margin-top:var(--space-s)}.encoder__detect-button{appearance:none;background:0 0;border:0;color:var(--colour-accent);cursor:pointer;font-family:inherit;font-size:inherit;padding:0;text-decoration:underline;text-underline-offset:3px}.encoder__message{border-radius:var(--border-radius);font-family:var(--font-family-mono);font-size:var(--font-size-s);margin-bottom:var(--space-l);padding:var(--space-m)}.encoder__message--error{background:color-mix(in srgb,var(--colour-error) 10%,transparent);border:1px solid var(--colour-error);color:var(--colour-error)}.encoder__message--info{background:color-mix(in srgb,var(--colour-accent) 8%,transparent);border:1px solid var(--panel-border);color:var(--text-secondary)}#encoder-settings{margin-bottom:var(--space-l)}.encoder__settings-panel{border-top:1px solid var(--panel-border);padding:var(--space-l)}.encoder__opt:last-child,.encoder__settings-panel .checkbox-label:last-child,.encoder__settings-panel .form-row:last-child{margin-bottom:0}.encoder__opt{margin-bottom:var(--space-m)}.encoder__opt>label{display:block;font-size:var(--font-size-s);margin-bottom:var(--space-xs)}.encoder__opt .select-box{width:auto}.encoder__number{max-width:10rem}.drop-zone,.encoder__jwt-part-title h3,.encoder__settings-panel .form-row{margin-bottom:0}.drop-zone{background:var(--panel-background);border:2px dashed var(--colour-neutral-550);border-radius:var(--border-radius);cursor:pointer;display:block;padding:var(--space-xl) var(--space-l);text-align:center;transition:150ms background ease-in-out,150ms border-color ease-in-out}.drop-zone:focus-within,.drop-zone:hover{border-color:var(--colour-accent)}.drop-zone.highlight{background:var(--colour-neutral-500);border-color:var(--colour-accent);border-style:solid}.drop-zone__icon{color:var(--colour-accent);display:block;font-size:var(--font-size-xxl);margin-bottom:var(--space-m)}.drop-zone__title{font-size:var(--font-size-l);font-weight:700;margin-bottom:var(--space-xs)}.drop-zone__title em{color:var(--colour-accent);font-style:normal;text-decoration:underline;text-underline-offset:3px}.drop-zone__meta{color:var(--text-secondary);font-size:var(--font-size-s);margin-bottom:0}.drop-zone input[type=file]{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.output-wrapper{margin-bottom:var(--space-xl)}.encoder__output-actions{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-m);justify-content:space-between;margin-top:var(--space-s)}.encoder__stats{color:var(--text-secondary);font-size:var(--font-size-s);margin:0}.encoder__output-buttons{display:flex;gap:var(--space-s)}.encoder__jwt{display:flex;flex-direction:column;gap:var(--space-l);margin-bottom:var(--space-xl)}.encoder__jwt-part{padding:var(--space-l)}.encoder__jwt-part-title{align-items:baseline;display:flex;gap:var(--space-s);margin-bottom:var(--space-m)}.encoder__jwt-part-hint{color:var(--text-secondary);font-size:var(--font-size-s)}.encoder__jwt-code{background:color-mix(in srgb,black 24%,transparent);border-radius:var(--border-radius);font-family:var(--font-family-mono);font-size:var(--font-size-s);margin:0;overflow-x:auto;padding:var(--space-m);white-space:pre}.encoder__jwt-claims{margin-top:var(--space-m)}.encoder__jwt-claims td:first-child{color:var(--text-secondary);white-space:nowrap;width:1%}.encoder__jwt-flag{border-radius:var(--border-radius);font-family:var(--font-family-body);font-size:var(--font-size-xs);font-weight:700;margin-left:var(--space-s);padding:.2rem .8rem;text-transform:uppercase;white-space:nowrap}.encoder__jwt-flag--ok{background:color-mix(in srgb,var(--colour-success) 18%,transparent);color:var(--colour-success)}.encoder__jwt-flag--bad{background:color-mix(in srgb,var(--colour-error) 18%,transparent);color:var(--colour-error)}.encoder__jwt-signature{overflow-wrap:anywhere;white-space:pre-wrap}