/* Codice e risultato condividono lo stesso spazio: si legge, si prova, si confronta. */
.web{--tag-ink:#683681;--attr-ink:#185c92;--value-ink:#226341}
.web .lesson-step .step-body{max-width:1120px}
.web p,.web .step-body>ol,.web .step-body>ul{max-width:72ch}
.web .code-result{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:30px;margin:32px 0;align-items:start}
.code-result>div{min-width:0}
.code-result h3{margin:0 0 16px;font-size:1.15rem}
.source-pane pre{margin:0 0 12px;background:#f1edf6;border-radius:12px;padding:20px}
pre code{padding:0;background:none;border-radius:0}
.syntax-tag{color:var(--tag-ink);font-weight:700}
.syntax-attr{color:var(--attr-ink)}
.syntax-value{color:var(--value-ink)}
.syntax-legend{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.9rem;font-weight:700}
.read-tag{margin:28px 0 24px}
.tag-anatomy{display:flex;align-items:stretch;flex-wrap:wrap;gap:10px;margin:18px 0 20px}
.tag-anatomy>div{display:flex;flex-direction:column;gap:10px;justify-content:center;padding:16px 20px;background:#f1edf6;border-radius:8px}
.tag-anatomy>div:nth-child(2){background:#fbefc9}
.tag-anatomy code{background:transparent;padding:0;font-size:1.05rem}
.tag-anatomy span{font-size:.8rem}
.tag-guide{margin:26px 0 30px;max-width:900px}
.tag-guide>div{display:grid;grid-template-columns:135px 1fr;gap:20px;padding:13px 0;border-bottom:1px solid var(--line)}
.tag-guide dt{font-weight:700}.tag-guide dt code{color:var(--tag-ink);background:#f1edf6;display:inline-block;overflow-wrap:anywhere}
.tag-guide dd{margin:0;font-size:.95rem;max-width:68ch}
.result-pane{padding:22px;background:#fff;border:2px solid var(--ink);border-radius:12px}
.result-pane>p:last-child{margin-bottom:0}
.rendered-example{padding:20px 0 12px}
.rendered-example h4{font-size:1.3rem;margin:0 0 14px;line-height:1.3}
.rendered-example ol,.rendered-example ul{padding-left:26px}
.rendered-example li{padding-left:5px;margin-bottom:14px}
.rendered-example li::marker{color:var(--tag-ink);font-weight:700}
#lista-nota,#tabella-nota{font-size:.92rem;margin:18px 0;min-height:4.8em}
.figure-map{border:1px dashed var(--tag-ink);padding:14px;border-radius:8px;margin-bottom:16px;background:#f9f6fc}
.map-label{display:block;color:var(--tag-ink);font-size:.8rem;font-weight:700;margin-bottom:12px}
.image-slot{min-height:145px;background:#e8f2eb;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;padding:18px}
.image-slot code{font-size:1.2rem;background:none;color:var(--tag-ink)}
.image-slot small{font-size:.78rem}
.caption-slot{padding-top:18px}.caption-slot p{font-size:.9rem;margin-bottom:0}
.table-controls{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 22px}
.table-controls button{font-family:ui-monospace,Consolas,monospace;font-size:.85rem;min-width:48px;padding:8px 12px}
.table-demo{padding:4px}
.table-demo table{border-radius:0;overflow:visible;font-size:.85rem;table-layout:fixed}
.table-demo caption{text-align:left;font-weight:700;margin-bottom:10px;padding:5px}
.table-demo th,.table-demo td{border:1px solid #9aafa7;padding:10px;text-align:left;overflow-wrap:anywhere}
.table-demo th{background:#e4f3eb;white-space:normal}
.table-demo .tag-highlight{outline:3px solid var(--tag-ink);outline-offset:-3px;background:#f5e8fb}
.table-demo tr.tag-highlight>*{background:#f5e8fb}
.web pre{overflow-wrap:anywhere}
.web code{overflow-wrap:anywhere}
@media(max-width:850px){.web .code-result{grid-template-columns:1fr;gap:22px}.result-pane{max-width:600px}.tag-anatomy>div{padding:12px}.tag-guide>div{grid-template-columns:110px 1fr;gap:14px}}
@media(max-width:450px){.tag-guide>div{grid-template-columns:1fr;gap:7px}.result-pane{padding:16px}.source-pane pre{padding:14px}.tag-anatomy{gap:7px}.tag-anatomy code{font-size:.9rem}.table-demo th,.table-demo td{padding:8px}.table-controls{gap:6px}}
@media print{.code-result{display:block}.result-pane{margin-top:20px}.read-tag details{display:block}.tag-guide>div{break-inside:avoid}}