.serializer { max-width:960px; padding-block:32px 48px; }
.serializer label { display:block; font-weight:600; margin-block:16px 8px; }
.serializer textarea,.serializer select { width:100%; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--paper); color:var(--ink); font:inherit; }
.serializer textarea { font-family:monospace; resize:vertical; }
.serializer select { min-height:48px; }
.serializer .actions { display:flex; flex-wrap:wrap; gap:10px; margin-block:16px; }
#input-help,#conversion-status { font-size:.875rem; color:var(--muted); }
#conversion-error { color:#a12b20; }
.serializer details { border-top:1px solid var(--border); margin-top:24px; padding-top:16px; }
.serializer summary { cursor:pointer; padding-block:8px; }
#copy { margin-top:12px; }

@media(min-width:720px) { .conversion-panes { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; } .output-pane { padding-top:94px; } }