.ehead { display: flex; flex-direction: column; align-items: stretch; gap: var(--s5); padding: var(--s1) 0 2px; margin-top: var(--s5); }
.ehead h1 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.015em; }
.esub { margin-top: var(--s1); color: var(--muted); max-width: 68ch; }
.echoose { display: flex; align-items: flex-end; gap: var(--s3) var(--s4); flex-wrap: wrap; }
.echoose .ekind { margin-right: auto; }
.efield { display: grid; gap: var(--s2); }
.efield label { font-weight: 500; font-size: var(--fs-small); color: var(--muted); }
#cardN { width: 112px; height: var(--control-height); padding: 0 var(--s3); border: 1px solid var(--control); border-radius: var(--round); background: var(--field); color: var(--text); font-variant-numeric: tabular-nums; }

.seg { display: inline-flex; margin: 0; padding: 3px; border: 0; border-radius: var(--round); background: var(--panel); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { height: 30px; padding: 0 var(--s4); display: grid; place-items: center; border-radius: var(--round); color: var(--muted); font-weight: 500; cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.seg label:hover { color: var(--text); }
.seg input:checked + label { background: var(--active); color: var(--text); }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }

#noCard { margin-top: var(--s4); }
.erow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5) var(--col-gap); margin-top: var(--s5); align-items: start; }
.ehead + .erow, .ehead + .notice + .erow { margin-top: var(--s5); }
.etext { min-width: 0; display: flex; flex-direction: column; }
.etext h2 { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; }
.etext > .note { margin-top: var(--s1); max-width: 72ch; }
.etext .note.small { margin-top: var(--s3); font-size: var(--fs-small); line-height: var(--lh-small); }
.snip-h { margin-top: var(--s4); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; color: var(--muted); }
.snip { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s2); }
.snip-h + .snip { margin-top: var(--s2); }
.etext > .note + .snip { margin-top: var(--s3); }
.snip pre { flex: 1; min-width: 0; margin: 0; padding: var(--s3); border-radius: var(--radius-nested); background: var(--panel); overflow-x: auto; }
.snip code { font-family: var(--mono); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.snip .text-btn { flex: none; color: var(--text); }

.eprev { margin: 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--s3); padding: var(--s4); border-radius: var(--radius-nested); background: var(--raised); }
.eprev figcaption, .eprev .cap { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.eprev.img img { width: 100%; height: auto; border-radius: var(--radius-small); display: block; }
.eprev.badgeprev { align-items: flex-start; }
.eprev.badgeprev img { display: block; height: 20px; width: auto; max-width: 100%; }
.eprev.live { justify-content: center; }
.w-wrap { container: widget / inline-size; height: 200px; border-radius: var(--radius-card); overflow: hidden; }

@media (max-width: 960px) {
  .erow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .echoose { width: 100%; }
  .snip { flex-direction: column; align-items: flex-start; }
}

.where { margin-top: var(--s2); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); max-width: 72ch; }
.snip .text-btn.done { color: var(--pill-positive-ink); text-decoration: none; }

.snip .text-btn { min-width: 48px; text-align: left; }
:root:lang(it) .snip .text-btn { min-width: 52px; }
.snip code:empty::before { content: "\200b"; }