/* Framed sheet · shared visual layer. Existing content, controls and scripts remain intact. */
@import url('/fonts/plex.css');
:root {
  --bg:#f3f6f3; --surface:#ffffff; --raised:#f5f7f5; --border:#e2e8e2;
  --border-strong:#a4b3a7; --text:#17211c; --text-dim:#526157; --text-faint:#59685e;
  --muted:#526157; --accent:#285c45; --accent-soft:#edf4ee; --ok:#285c45;
  --ok-soft:#edf4ee; --err:#a62432; --sans:'IBM Plex Sans',Arial,sans-serif;
  --mono:'IBM Plex Mono',Consolas,monospace;
  font-family:var(--sans); color:var(--text); background:var(--bg); font-synthesis:none;
}
html { scroll-behavior:auto; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 var(--sans); }
* { box-sizing:border-box; }
/* At 1440: 1200px sheet + two 120px margins; inside: 1120px + two 40px gutters. */
body>main,body>.wrap {
  width:calc(100% - 48px); max-width:1200px; margin:24px auto; padding:0 40px 32px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  min-width:0; box-shadow:none;
}
main>header:not(:has(h1)),.wrap>header:not(:has(h1)) {
  min-height:80px; padding:20px 0; border:0; gap:20px; display:flex;
  justify-content:space-between; align-items:center; flex-wrap:wrap;
}
header .brand {font:600 15px/1.4 var(--sans);letter-spacing:.025em;color:var(--text);text-decoration:none;}
header a {font-size:14px;color:var(--accent);text-underline-offset:4px;}
.local {font-size:12px;color:var(--accent);background:var(--accent-soft);padding:6px 10px;border-radius:4px;}
.title {padding:24px 0 28px;}
body h1,.title h1,.legal h1,.daily-article h1,.wrap>header h1 {
  color:var(--text);font:600 28px/1.22 var(--sans);letter-spacing:-.025em;margin:8px 0 14px;
  overflow-wrap:anywhere;
}
body h1 span,body h1 .kw {color:inherit;font:inherit;}
body h2,.daily-article h2 {font:600 21px/1.35 var(--sans);letter-spacing:-.015em;text-transform:none;color:var(--text);margin:32px 0 14px;}
body h3 {font:600 17px/1.4 var(--sans);letter-spacing:0;color:var(--text);}
.privacy,.sub,.hint,.formats,.filemeta,.message,.affiliate-disclosure,.sponsored-note,figcaption {color:var(--text-dim);}
.eyebrow,.pastehint {color:var(--text-dim);font:400 13px/1.6 var(--sans);letter-spacing:0;}
.privacy {font-size:16px;max-width:75ch;line-height:1.6;margin:0;}
.workspace {display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:stretch;}
.workspace>* {min-width:0;}
.workspace>.input.panel {display:flex;flex-direction:column;}
.workspace>.input.panel>.drop {flex:1;}
.workspace>.result.panel {display:flex;flex-direction:column;}
.workspace>.result.panel>.codearea {flex:1;display:flex;flex-direction:column;}
.workspace>.result.panel>.codearea textarea {flex:1;min-height:220px;}
.panel,.tool .box,.decoder {border:1px solid var(--border);border-radius:8px;background:white;box-shadow:none;padding:24px;}
.sectionhead {margin:0 0 20px;min-height:32px;gap:12px;}
.sectionhead h2 {font-size:16px;line-height:1.4;letter-spacing:0;text-transform:none;margin:0;}
.sectionhead span {font-size:12px;color:var(--text-dim);}
button,input,select,textarea {font-family:var(--sans);}
button {min-height:44px;padding:10px 16px;border:1px solid transparent;border-radius:6px;background:var(--accent);color:white;font-size:14px;font-weight:500;line-height:1.4;box-shadow:none;transition:background-color .15s,border-color .15s;}
button:hover:not(:disabled) {background:#1d4433;}
button:active:not(:disabled) {transform:translateY(1px);}
button.secondary,button.quiet,button#sample,button#example {background:var(--raised);color:var(--text);border-color:var(--border);}
button.secondary:hover:not(:disabled),button.quiet:hover:not(:disabled),button#sample:hover,button#example:hover {background:#e6ede6;}
button.quiet {padding:6px 12px;min-height:36px;font-size:13px;}
button:disabled {opacity:1;background:#edf0ed;color:#626c65;border-color:#e2e7e2;cursor:not-allowed;}
fieldset:disabled {opacity:1;color:var(--text-dim);}
input:disabled,select:disabled {opacity:1;color:#59645d;background:#f1f4f1;}
input,select,textarea {max-width:100%;min-width:0;}
select,input[type=number],input[type=text],input[type=search] {font-size:14px;line-height:1.5;min-height:44px;border:1px solid var(--border-strong);border-radius:6px;padding:10px 12px;color:var(--text);background:white;}
textarea {font:13px/1.75 var(--mono);color:var(--text);background:#f6f8f6;border:1px solid var(--border-strong);border-radius:6px;padding:16px;max-width:100%;resize:vertical;}
textarea::placeholder,input::placeholder {color:#59685e;opacity:1;}
input[type=range],input[type=checkbox],input[type=radio] {accent-color:var(--accent);}
input[type=range] {min-height:44px;}
input[type=file] {font-size:14px;max-width:100%;}
input::file-selector-button {font:500 14px var(--sans);min-height:44px;border:1px solid var(--border-strong);border-radius:6px;background:var(--raised);color:var(--text);padding:8px 12px;margin-right:10px;cursor:pointer;}
.drop {background:#f4f7f4;border:1px dashed #849b89;border-radius:6px;padding:28px 16px;gap:8px;min-height:214px;justify-content:center;}
.drop:hover,.drop.drag {background:#eaf2eb;border-color:var(--accent);}
.drop strong {font-size:18px;font-weight:500;}
.drop .uploadicon {font-size:28px;color:var(--accent);}
.drop span:not(.uploadicon),.drop small {font-size:13px;color:var(--text-dim);}
.formats,.hint {font-size:13px;line-height:1.65;}
.formats {margin:12px 0 20px;}
.controls {border-top:1px solid var(--border);padding-top:16px;margin-top:20px;}
.optional-settings summary {font-size:14px;line-height:1.6;font-weight:500;min-height:44px;cursor:pointer;}
.optional-settings summary span {font-size:13px;color:var(--text-dim);margin-left:8px;}
.toggle,.controlrow,.rangeLabel {font-size:14px;}
.outputcontrols {grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;margin-bottom:20px;}
.outputcontrols label {font-size:13px;font-weight:500;}
.outputcontrols small {font-size:12px;color:var(--text-dim);line-height:1.5;}
.codearea {border:1px solid var(--border);border-radius:6px;background:#f6f8f6;}
.codebar {font:400 12px/1.5 var(--sans);letter-spacing:0;background:#eaf0eb;color:#3f5548;padding:10px 14px;gap:12px;flex-wrap:wrap;}
.codearea textarea {border:0;border-radius:0;height:220px;display:block;}
.actions {gap:10px;flex-wrap:wrap;}
.actions button {max-width:100%;white-space:normal;}
.stats {gap:20px;flex-wrap:wrap;border-color:var(--border);margin-top:20px;padding-top:16px;}
.stats span,.stats strong {font-size:13px;color:var(--text-dim);}
.stats strong {color:var(--text);font-weight:500;}
.filemeta {font-size:12px;flex-wrap:wrap;}
.filemeta span {white-space:normal;}
.message {font-size:13px;line-height:1.6;overflow-wrap:anywhere;}
.preview {background:#edf2ed;border-radius:6px;}
.tool-directory {margin:48px 0 32px;}
.tool-directory>h2 {font-size:21px;margin-bottom:20px;}
.tool-groups {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start;}
.tool-group {border:0;background:transparent;border-radius:0;padding:0;}
.tool-group h3 {font-size:16px;margin:0 0 10px;}
.tool-group li+li {border:0;}
.tool-group a {font-size:14px;color:var(--accent);padding:9px 0;line-height:1.5;overflow-wrap:anywhere;}
body a {color:var(--accent);text-underline-offset:3px;}
body a:hover {text-decoration:underline;}
body :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {outline:3px solid #285c45;outline-offset:3px;box-shadow:none;}
.codearea:focus-within {outline:2px solid #285c45;outline-offset:2px;}
.sponsored-placement {margin:28px 0;padding:20px;background:#f5f7f5;border:0;border-radius:8px;}
.sponsored-label {font-size:12px;font-weight:500;letter-spacing:0;}
.affiliate-disclosure,.sponsored-note {font-size:14px;}
.daily-article {max-width:880px;font:400 16px/1.8 var(--sans);padding:12px 0;}
.daily-article section {min-width:0;}
.daily-article .daily-answer {background:#edf4ee;border:0;border-radius:6px;padding:16px 20px;}
.daily-article .decoder {padding:24px;margin:24px 0;}
.daily-article :is(pre,code),pre,code {font-family:var(--mono);}
pre {max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;}
.daily-article pre {background:#f0f4f0;border-radius:6px;font-size:13px;color:var(--text);}
.daily-article figure {border:0;border-radius:6px;background:#f5f7f5;margin:28px 0;padding:16px;}
img,video,canvas,iframe,svg {max-width:100%;}
img {height:auto;}
figcaption {font-size:14px;line-height:1.6;}
table {max-width:100%;font-size:14px;line-height:1.6;border-collapse:collapse;}
td,th {overflow-wrap:anywhere;}
.daily-comparison {gap:24px;}
.daily-comparison>div {border:1px solid var(--border);border-radius:8px;box-shadow:none;min-width:0;}
.legal {max-width:760px;line-height:1.8;}
.legal p {color:var(--text);}
footer {border-top:1px solid var(--border);margin-top:40px;padding-top:24px;font:400 13px/1.8 var(--sans);color:var(--text-dim);gap:14px;}
footer nav a {font-size:13px;line-height:1.8;padding:8px 2px;}
footer p,footer span {color:var(--text-dim);}
.wrap>header:has(h1) {padding:32px 0 16px;border:0;}
.wrap .tool .box {padding:0;}
.wrap .ref {min-width:0;overflow-x:auto;}
.wrap .ref h2 {font-size:21px;}
.decode-options {background:#f5f7f5;border-color:var(--border);}
.decode-options label {color:var(--text);font-weight:500;}
.wrap .tool #input {color:var(--text);background:#fff;}
.wrap .tool #input::placeholder {color:#59685e;}
.wrap .tool .bar {background:#f5f7f5;}
.wrap .box:focus-within {box-shadow:none;}
.wrap .counter {color:var(--text-dim);}
.wrap .tool .bar button.primary {box-shadow:none;background:var(--accent);border-color:var(--accent);}
.wrap .tool .bar button.primary:hover {box-shadow:none;background:#1d4433;border-color:#1d4433;}
.wrap button.chip {min-height:44px;background:var(--raised);color:var(--text);border:1px solid var(--border);border-radius:6px;box-shadow:none;}
.wrap button.chip:hover {background:var(--accent-soft);border-color:var(--accent);}
.wrap :is(th,.grp td,.card-h,.conf,.meta-k,.tag) {font-size:13px;text-transform:none;letter-spacing:0;}
@media(max-width:1000px) {
 body>main,body>.wrap {width:calc(100% - 32px);padding:0 24px 28px;margin:16px auto;}
 .workspace {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;}
 .panel {padding:20px;}
 .outputcontrols {grid-template-columns:1fr;}
 .tool-groups {gap:24px;}
}
@media(max-width:760px) {
 body>main,body>.wrap {width:100%;margin:0;padding:0 20px 28px;border:0;border-radius:0;}
 body {background:#fff;font-size:15px;}
 main>header:not(:has(h1)) {min-height:72px;padding:16px 0;gap:12px;}
 header .brand {font-size:14px;letter-spacing:0;}
 .local {font-size:12px;padding:5px 8px;}
 .title {padding:18px 0 24px;}
 body h1,.title h1,.legal h1,.daily-article h1,.wrap>header h1 {font-size:24px;line-height:1.3;letter-spacing:-.025em;}
 .privacy {font-size:15px;}
 .workspace {grid-template-columns:1fr;gap:20px;}
 .panel,.daily-article .decoder {padding:18px;}
 .drop {min-height:190px;padding:22px 12px;}
 .outputcontrols {grid-template-columns:1fr;}
 .codearea textarea {height:200px;}
 .tool-groups {grid-template-columns:1fr;gap:28px;}
 .tool-group a {min-height:44px;}
 .daily-article {font-size:15px;line-height:1.8;}
 body h2,.daily-article h2 {font-size:20px;line-height:1.4;}
 .daily-article figure {padding:10px;margin:24px 0;}
 .daily-comparison,.pair {grid-template-columns:1fr;}
 .actions {gap:8px;}
 .actions button {flex:1 1 auto;}
 .filemeta {gap:4px;}
 footer {margin-top:32px;}
 td,th {font-size:13px;}
 .wrap>header:has(h1) {padding-top:24px;}
}
/* Homepage compact revision: natural panel heights; never stretch the upload target to match output. */
main:has(.optional-settings)>header {min-height:72px;padding:16px 0;}
main:has(.optional-settings)>.title {padding:16px 0 20px;}
main:has(.optional-settings)>.title h1 {margin:0 0 10px;}
.workspace:has(.optional-settings) {align-items:start;gap:20px;}
.workspace:has(.optional-settings)>.panel {padding:20px;}
.workspace:has(.optional-settings) .sectionhead {margin-bottom:14px;}
.workspace:has(.optional-settings)>.input.panel>.drop {flex:0 0 auto;min-height:184px;padding:18px 14px;gap:6px;}
.workspace:has(.optional-settings) .uploadicon {font-size:24px;line-height:1;}
.workspace:has(.optional-settings) .drop small {margin-top:0;}
.workspace:has(.optional-settings) .formats {margin:10px 0 16px;}
.workspace:has(.optional-settings) .optional-settings {margin-top:12px;padding-top:12px;}
.workspace:has(.optional-settings) .outputcontrols {margin-bottom:14px;gap:12px;}
.workspace:has(.optional-settings)>.result.panel>.codearea {flex:0 0 auto;}
.workspace:has(.optional-settings)>.result.panel>.codearea textarea {flex:0 0 auto;height:160px;min-height:160px;}
.workspace:has(.optional-settings) .actions {margin-top:12px;}
.workspace:has(.optional-settings) .message {margin:8px 0;}
.workspace:has(.optional-settings)>.result>.hint {margin:12px 0 0;}
@media(max-width:760px) {
 main:has(.optional-settings)>header {min-height:60px;padding:12px 0;}
 main:has(.optional-settings)>.title {padding:12px 0 16px;}
 .workspace:has(.optional-settings) {gap:16px;}
 .workspace:has(.optional-settings)>.panel {padding:14px;}
 .workspace:has(.optional-settings) .sectionhead {margin-bottom:12px;}
 .workspace:has(.optional-settings) .quiet {min-height:44px;}
 .workspace:has(.optional-settings)>.input.panel>.drop {min-height:152px;padding:12px 10px;}
 .workspace:has(.optional-settings) .uploadicon {font-size:22px;}
 .workspace:has(.optional-settings) .drop strong {font-size:17px;line-height:1.4;}
 .workspace:has(.optional-settings) .formats {margin:10px 0 12px;}
 .workspace:has(.optional-settings) .optional-settings {margin-top:10px;padding-top:8px;}
 .workspace:has(.optional-settings) .outputcontrols {gap:12px;}
 .workspace:has(.optional-settings)>.result.panel>.codearea textarea {height:150px;min-height:150px;}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important;transition:none!important;animation:none!important;}}

/* JWT inspector only: prevent the first action shrinking to one character. 2026-11-03 */
article:has(textarea#token) .actions>button{flex:0 0 auto;display:block;width:auto;min-width:max-content;white-space:nowrap;overflow-wrap:normal;word-break:normal;}
@media(max-width:480px){article:has(textarea#token) .actions>button{flex:1 1 100%;width:100%;min-width:0;min-height:48px;}}