/* Impara: il percorso e la guida dentro la scena.
   Stessi token del resto dell'applicazione; nessun colore nuovo. */

/* --- Pagina del percorso --------------------------------------------------- */
/* Il percorso e le schede si leggono anche su tablet e telefono: come la home,
   non ereditano la larghezza minima dello Studio. */
html[data-view="learn"] body { min-width: 0; }
.learn-view { max-width: 1180px; }
.learn-hero { max-width: 760px; padding: 12px 0 28px; }
.learn-hero h1 { margin: 0; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.04; letter-spacing: -.045em; font-weight: 700; color: var(--ink); }
.learn-hero h1 em { font-style: normal; color: var(--accent); }
.learn-intro { max-width: 56ch; margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.learn-start { margin-top: 26px; padding: 14px 22px; border-radius: 18px; font-size: 15px; }
.learn-complete { margin-top: 22px; color: var(--ink-soft); }
.learn-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.learn-lesson { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: color-mix(in srgb, var(--paper-raised) 70%, transparent); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 550; cursor: pointer; transition: border-color var(--dur-tap) var(--ease), background-color var(--dur-tap) var(--ease), transform var(--dur-tap) var(--ease); }
.learn-lesson:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--paper-raised); }
.learn-lesson:active { transform: scale(.99); }
.learn-lesson small { font-size: 12px; font-weight: 450; color: var(--ink-soft); white-space: nowrap; }
.learn-lesson-mark { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 12px; color: var(--on-brand); }
.learn-lesson.is-done .learn-lesson-mark { background: var(--success); border-color: var(--success); }
.learn-lesson.is-next { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.learn-lesson.is-next .learn-lesson-mark { border-color: var(--accent); }
.learn-side-title { margin: 22px 0 6px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 650; }

/* --- La guida: indice e capitolo ------------------------------------------- */
/* L'indice del libro resta accanto al capitolo: si cambia capitolo senza
   scorrere. I capitoli si annunciano con il titolo; niente pillole. */
.learn-book { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 48px; align-items: start; }
.learn-toc { position: sticky; top: 20px; }
.learn-toc ol, .learn-refs { list-style: none; margin: 0; padding: 0; }
.learn-toc-item { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; text-align: left; padding: 9px 0 9px 14px; border: 0; border-left: 2px solid color-mix(in srgb, var(--line) 80%, transparent); background: none; color: var(--ink-soft); font: inherit; cursor: pointer; transition: color var(--dur-tap) var(--ease), border-color var(--dur-tap) var(--ease); }
.learn-toc-item small { grid-column: 1; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 650; }
.learn-toc-item b { grid-column: 1; font-size: 14.5px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.learn-toc-count { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12px; white-space: nowrap; }
.learn-toc-item:hover b { color: var(--accent); }
.learn-toc-item.is-done .learn-toc-count { color: var(--success); }
.learn-toc-item.is-shown { border-left-color: var(--accent); }
.learn-toc-item.is-shown small, .learn-toc-item.is-shown b { color: var(--accent); }
.learn-refs { display: grid; gap: 2px; }
.learn-refs button { padding: 4px 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink-soft) 45%, transparent); text-underline-offset: 3px; }
.learn-refs button:hover { color: var(--accent); text-decoration-color: currentColor; }
.learn-reading { max-width: 760px; min-width: 0; }
.learn-reading > .eyebrow { margin: 0; }
.learn-reading h2 { margin: 6px 0 0; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -.03em; color: var(--ink); outline: none; }
.learn-chapter-summary { margin: 10px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
.learn-ideas { margin-top: 18px; display: grid; gap: 10px; }
.learn-ideas p { margin: 0; max-width: 68ch; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.learn-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.learn-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; align-content: start; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.learn-list-mark { grid-row: span 2; font-size: 13px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.learn-list b { font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.learn-list li > span:last-child { margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.learn-list.is-long { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.learn-try-title { margin: 28px 0 10px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 650; }
.learn-next-chapter { margin-top: 26px; display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 6px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.learn-next-chapter small { grid-column: 1 / -1; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 650; color: var(--ink-soft); }
.learn-next-chapter:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Schede e attivita' ---------------------------------------------------- */
.learn-sheet { max-width: 880px; padding-top: 8px; }
.learn-back { margin: 0 0 26px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); background: color-mix(in srgb, var(--paper-raised) 60%, transparent); color: var(--ink-soft); font: inherit; font-size: 13px; cursor: pointer; }
.learn-back:hover { color: var(--ink); background: var(--paper-raised); }
.learn-back svg { vertical-align: -2px; margin-right: 4px; }
.learn-sheet h1 { margin: 6px 0 0; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.04em; line-height: 1.08; color: var(--ink); outline: none; }
.learn-lead { max-width: 64ch; margin: 16px 0 28px; font-size: 17px; line-height: 1.6; color: var(--ink); }
.learn-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.learn-columns section { padding: 20px 22px; border-radius: 18px; background: color-mix(in srgb, var(--paper-raised) 72%, transparent); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.learn-columns h2 { margin: 0 0 10px; font-size: 18px; color: var(--ink); }
.learn-columns ul { margin: 0; padding-left: 18px; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.learn-note { margin: 24px 0 0; font-size: 14px; color: var(--ink-soft); }
.learn-questions { margin: 0; padding: 0; list-style: none; counter-reset: q; display: grid; gap: 12px; }
.learn-questions li { counter-increment: q; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 16px 18px; border-radius: 18px; background: color-mix(in srgb, var(--paper-raised) 72%, transparent); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.learn-questions li::before { content: counter(q); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--on-brand); background: var(--accent); }
.learn-questions b { font-size: 16.5px; color: var(--ink); }
.learn-questions span { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

.learn-sort { display: grid; gap: 18px; }
.learn-sort-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.learn-sort-item { width: 100%; min-height: 54px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); background: color-mix(in srgb, var(--paper-raised) 80%, transparent); color: var(--ink); font: inherit; font-size: 15px; font-weight: 550; cursor: pointer; transition: transform var(--dur-tap) var(--ease-grab), border-color var(--dur-tap) var(--ease), background-color var(--dur-move) var(--ease); }
.learn-sort-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.learn-sort-item.is-picked { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 16%, transparent); }
.learn-sort-item.is-placed { cursor: default; opacity: 1; border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.learn-sort-item.is-placed.stock { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.learn-sort-item.is-placed.flow { border-color: color-mix(in srgb, var(--success) 55%, transparent); background: color-mix(in srgb, var(--success) 9%, var(--paper-raised)); }
.learn-sort-item small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 450; color: var(--ink-soft); }
.learn-bins { display: grid; grid-template-columns: repeat(var(--bins, 2), minmax(0, 1fr)); gap: 14px; }
.learn-bin { display: grid; justify-items: center; gap: 4px; padding: 18px; border-radius: 18px; border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--paper-raised) 60%, transparent); color: var(--ink); font: inherit; cursor: pointer; transition: background-color var(--dur-tap) var(--ease), transform var(--dur-tap) var(--ease-grab); }
.learn-bin:hover { background: var(--paper-raised); }
.learn-bin:active { transform: scale(.98); }
.learn-bin b { font-size: 17px; }
.learn-bin small { font-size: 12px; color: var(--ink-soft); letter-spacing: .12em; text-transform: uppercase; }
.learn-bin.is-wrong { animation: learn-shake 360ms var(--ease); }
.learn-bin-icon { width: 54px; height: 34px; margin-bottom: 4px; }
.learn-bin-icon.stock { border: 2px solid var(--accent); border-radius: 8px; background: linear-gradient(transparent 45%, color-mix(in srgb, var(--accent) 30%, transparent) 45%); }
.learn-bin-icon.flow { height: 12px; margin: 11px 0 15px; border-radius: 8px; background: repeating-linear-gradient(90deg, var(--success) 0 10px, color-mix(in srgb, var(--success) 35%, transparent) 10px 16px); }
.learn-bin-icon.loop { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 2.5px solid var(--accent); border-right-color: transparent; rotate: 45deg; font-weight: 750; font-size: 15px; color: var(--accent-strong); }
.learn-bin-icon.loop i { rotate: -45deg; font-style: normal; }
.learn-bin[data-bin="B"] .learn-bin-icon.loop { border-color: var(--success); border-right-color: transparent; color: var(--success); }
.learn-sort-items.is-long { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.learn-sort-item.is-placed.R { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.learn-sort-item.is-placed.B { border-color: color-mix(in srgb, var(--success) 55%, transparent); background: color-mix(in srgb, var(--success) 9%, var(--paper-raised)); }
.learn-sort-feedback { min-height: 24px; margin: 0; font-size: 15px; color: var(--ink); }
.learn-sort-end { margin-top: 26px; display: grid; gap: 16px; }
.learn-end-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@keyframes learn-shake { 25% { translate: -5px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }

.learn-remember { padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--accent-soft) 75%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.learn-remember .eyebrow { margin: 0 0 6px; }
.learn-remember p:last-child { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }

.learn-shape .learn-axis, .lesson-reveal .learn-axis { fill: none; stroke: color-mix(in srgb, var(--ink-soft) 40%, transparent); stroke-width: 1; }
.learn-shape .learn-curve { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* --- Home --------------------------------------------------------------------- */
.home-learn { display: inline-flex; gap: 6px; align-items: baseline; margin: 6px 4px 0; font-size: 14px; color: var(--ink-soft); text-decoration: none; }
.home-learn b { color: var(--accent); font-weight: 650; }
.home-learn:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* --- La guida dentro la scena ---------------------------------------------- */
.lesson-guide { position: fixed; z-index: 22; left: 32px; top: 188px; width: 320px; max-height: calc(100svh - 296px); overflow-y: auto; display: grid; gap: 12px; align-content: start; padding: 18px 18px 16px; border-radius: 28px; border: 1px solid color-mix(in srgb, var(--paper-raised) 85%, transparent); background: color-mix(in srgb, var(--paper-raised) 86%, transparent); backdrop-filter: blur(22px); box-shadow: 0 18px 45px rgb(33 68 120 / 10%); color: var(--ink); animation: lesson-enter var(--dur-enter) var(--ease); }
.lesson-guide.hidden { display: none; }
.workspace-view { position: relative; }
.workspace-view.in-lesson .canvas-pane { margin-left: 352px; }
.workspace-view.in-lesson.is-immersive .workspace-identity > div { padding-left: 340px; }
/* Nel capitolo 5 si costruisce nello Studio: la guida prende il posto a
   sinistra e le tre colonne dello Studio si stringono accanto. */
.workspace-view.in-lesson.is-building .canvas-pane { margin-left: 0; }
.workspace-view.in-lesson.is-building .studio-layout { margin-left: 336px; grid-template-columns: 168px minmax(0, 1fr) 260px; }
.workspace-view.in-lesson.is-building .workspace-identity > div { padding-left: 0; }
.lesson-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.lesson-head .eyebrow { margin: 4px 0 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.lesson-close { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-size: 17px; line-height: 1; cursor: pointer; }
.lesson-close:hover { color: var(--ink); background: var(--paper-raised); }
.lesson-title { margin: -4px 0 0; font-size: 19px; line-height: 1.25; letter-spacing: -.02em; outline: none; }
.lesson-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; }
.lesson-dots li { flex: 1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--line) 80%, transparent); transition: background-color var(--dur-move) var(--ease); }
.lesson-dots li.is-past { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.lesson-dots li.is-current { background: var(--accent); }
.lesson-body { display: grid; gap: 12px; }
.lesson-body > * { margin: 0; animation: lesson-enter var(--dur-enter) var(--ease) both; }
.lesson-say, .lesson-after { font-size: 14.5px; line-height: 1.55; }
.lesson-after { padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--success) 9%, transparent); border-left: 3px solid var(--success); }
.lesson-ask { font-size: 16px; line-height: 1.4; font-weight: 650; }
.lesson-choices { display: grid; gap: 8px; }
.lesson-choice { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; text-align: left; padding: 6px 12px 6px 6px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: color-mix(in srgb, var(--paper-raised) 80%, transparent); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: border-color var(--dur-tap) var(--ease), background-color var(--dur-tap) var(--ease), transform var(--dur-tap) var(--ease-grab); }
.lesson-choice:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.lesson-choice:active { transform: scale(.98); }
.lesson-choice.is-chosen { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.lesson-choice svg { width: 84px; height: 44px; border-radius: 8px; background: color-mix(in srgb, var(--paper) 70%, transparent); }
.lesson-hint { font-size: 12px; color: var(--ink-soft); }
.lesson-task { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 11px 12px; border-radius: 14px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-size: 14.5px; line-height: 1.45; }
.lesson-task-mark { width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--accent); display: grid; place-items: center; font-size: 11px; color: var(--on-brand); animation: lesson-wait 1.6s var(--ease-inout) infinite; }
.lesson-task.is-done { background: color-mix(in srgb, var(--success) 9%, transparent); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.lesson-task.is-done .lesson-task-mark { background: var(--success); border-color: var(--success); animation: none; }
.lesson-word { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--paper) 70%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.lesson-word b { font-size: 18px; letter-spacing: -.01em; color: var(--accent-strong); }
.lesson-word span { font-size: 14.5px; line-height: 1.5; }
.lesson-reveal { padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--paper) 70%, transparent); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.lesson-reveal svg { display: block; width: 100%; height: auto; max-height: 96px; }
.lesson-reveal-guess { fill: none; stroke: var(--ink-soft); stroke-width: 2.2; stroke-dasharray: 5 5; stroke-linecap: round; }
.lesson-reveal-real { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lesson-reveal p { margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lesson-reveal .lesson-verdict { font-size: 13.5px; color: var(--ink); }
.lesson-legend { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; white-space: nowrap; }
.lesson-key { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--accent); }
.lesson-key.guess { border-top: 2.5px dashed var(--ink-soft); }
.lesson-foot { position: sticky; bottom: -16px; margin: 0 -18px -16px; padding: 10px 18px 16px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; background: linear-gradient(transparent, color-mix(in srgb, var(--paper-raised) 92%, transparent) 30%); }
.lesson-foot:empty { display: none; }
.lesson-foot.is-column { flex-direction: column; align-items: stretch; }
.lesson-next { padding: 10px 18px; border-radius: 14px; }
.lesson-skip { padding: 6px 4px; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lesson-skip:hover { color: var(--ink); }

/* La cosa di cui si parla si accende sulla mappa. */
.canvas-svg .node.lesson-glow .node-shape { stroke: var(--accent-strong); stroke-width: 3; animation: lesson-glow 1.8s var(--ease-inout) infinite; }
@keyframes lesson-glow { 0%, 100% { filter: drop-shadow(0 0 0 color-mix(in srgb, var(--accent) 0%, transparent)); } 50% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent)); } }
@keyframes lesson-wait { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); } }
@keyframes lesson-enter { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

/* --- Atlante ----------------------------------------------------------------- */
.learn-sheet:has(.learn-atlas-grid) { max-width: 1120px; }
.learn-atlas-title { margin: 34px 0 14px; font-size: 22px; letter-spacing: -.02em; color: var(--ink); }
.learn-atlas-intro { max-width: 64ch; margin: -4px 0 16px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.learn-atlas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.learn-atlas-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border-radius: 18px; background: color-mix(in srgb, var(--paper-raised) 74%, transparent); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.learn-atlas-card.is-planned { background: transparent; border-style: dashed; }
.learn-atlas-curve { width: 100%; height: 64px; }
.learn-atlas-card h3 { margin: 2px 0 0; font-size: 17px; letter-spacing: -.01em; color: var(--ink); }
.learn-atlas-look { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.learn-atlas-card dl { margin: 0; display: grid; gap: 2px; font-size: 13.5px; line-height: 1.5; }
.learn-atlas-card dt { margin-top: 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 650; }
.learn-atlas-card dd { margin: 0; color: var(--ink-soft); }
.learn-atlas-go { margin-top: auto; align-self: start; padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: transparent; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.learn-atlas-go:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.learn-atlas-soon { margin: auto 0 0; padding-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); font-style: italic; }

/* --- Schermi piu' stretti -------------------------------------------------------- */
@media (max-width: 1100px) {
  .learn-book { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
  .learn-list.is-long { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-guide { left: 16px; width: 272px; }
  .workspace-view.in-lesson .canvas-pane { margin-left: 292px; }
  .workspace-view.in-lesson.is-immersive .workspace-identity > div { padding-left: 290px; }
  .workspace-view.in-lesson.parameters-open .canvas-pane { margin-right: 300px; }
  .workspace-view.in-lesson.is-building .studio-layout { margin-left: 288px; grid-template-columns: minmax(0, 1fr) 250px; }
  html .workspace-view.in-lesson.is-building .studio-layout.inspector-idle { grid-template-columns: minmax(0, 1fr); }
}
/* In verticale la scena ha altezza e non larghezza: la guida scende sotto la
   barra del tempo e la mappa le lascia il posto, senza coprire il grafico. */
@media (max-width: 900px) {
  .lesson-guide { left: 12px; right: 12px; top: auto; bottom: 10px; width: auto; max-height: 34svh; position: fixed; }
  .workspace-view.in-lesson .canvas-pane { margin-left: 0; }
  .workspace-view.in-lesson.is-immersive .canvas-pane { height: calc(66svh - 264px); min-height: 300px; }
  .workspace-view.in-lesson.is-immersive .simulation-bar { bottom: calc(34svh + 18px); }
  .workspace-view.in-lesson.is-immersive .workspace-identity > div { padding-left: 0; }
  .workspace-view.in-lesson.is-building .studio-layout { margin-left: 0; padding-bottom: 36svh; }
  .lesson-choices { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 860px) {
  .learn-book { grid-template-columns: 1fr; gap: 20px; }
  .learn-toc { position: static; }
  .learn-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}
@media (max-width: 720px) {
  .learn-columns, .learn-bins, .learn-list, .learn-list.is-long { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lesson-guide, .lesson-body > *, .lesson-task-mark, .canvas-svg .node.lesson-glow .node-shape, .learn-bin.is-wrong { animation: none; }
}

/* --- Telefono ---------------------------------------------------------------- */
/* La barra in alto si stringe come nella home. */
@media (max-width: 760px) {
  html[data-view="learn"] .topbar { padding-inline: 16px; gap: 12px; }
  html[data-view="learn"] .topbar nav a[data-route="workspace"], html[data-view="learn"] .theme-toggle { display: none; }
  html[data-view="learn"] .topbar nav { margin-left: auto; gap: 0; }
  html[data-view="learn"] .topbar nav a { padding-inline: 8px; font-size: 12px; }
}
@media (max-width: 600px) {
  .learn-view { padding-left: 16px; padding-right: 16px; }
  .learn-hero { padding-top: 8px; }
  .learn-lesson { font-size: 14px; padding: 11px 12px; }
  .learn-atlas-grid { grid-template-columns: 1fr; }
  .learn-sort-items { grid-template-columns: 1fr; }
  .lesson-guide { padding: 14px 14px 12px; border-radius: 18px; gap: 9px; }
  .lesson-foot { margin: 0 -14px -12px; padding: 8px 14px 12px; bottom: -12px; }
  /* Alla fine della lezione i tre pulsanti non restano incollati sopra il
     «Da ricordare»: si scorre e li si trova in fondo. */
  .lesson-foot.is-column { position: static; background: none; }
  .lesson-choices { grid-template-columns: 1fr; gap: 6px; }
  .lesson-choice { grid-template-columns: 64px 1fr; gap: 10px; padding: 4px 10px 4px 4px; font-size: 13.5px; }
  .lesson-choice svg { width: 64px; height: 34px; }
  .lesson-say, .lesson-task, .lesson-after { font-size: 14px; }
}

/* In lezione la domanda e' quella della scheda: la domanda del sistema e lo
   stato del salvataggio non si mostrano. */
.workspace-view.in-lesson:not(.is-building) .workspace-hint, .workspace-view.in-lesson .save-state { visibility: hidden; }
.workspace-view.in-lesson.is-building .studio-layout.inspector-idle { grid-template-columns: 168px minmax(0, 1fr); }

/* Rimandi di testo, non pillole: «Impara» per tornare, «Simulalo» nell'Atlante. */
.learn-back, .learn-back:hover { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.learn-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.learn-atlas-go { padding: 0; border: 0; border-radius: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.learn-atlas-go:hover { background: none; text-decoration-thickness: 2px; }

/* --- La guida viva: riquadri dei capitoli e idee una alla volta ------------- */
/* Ogni riquadro ha la curva del suo capitolo, che si disegna da sola in un
   ciclo lento e sfalsato. Le figure delle idee si muovono davvero: le
   calcola learn-figures.js. */
.guide-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.guide-tile { width: 100%; height: 100%; display: grid; grid-template-rows: auto auto auto 1fr; gap: 4px; align-content: start; text-align: left; padding: 14px 16px 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: color-mix(in srgb, var(--paper-raised) 72%, transparent); color: var(--ink); font: inherit; cursor: pointer; transition: border-color var(--dur-tap) var(--ease), background-color var(--dur-tap) var(--ease), transform var(--dur-tap) var(--ease-grab); }
.guide-tile:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--paper-raised); transform: translateY(-2px); }
.guide-tile small { margin-top: 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 650; color: var(--ink-soft); }
.guide-tile.is-done small { color: var(--success); }
.guide-tile b { font-size: 16.5px; line-height: 1.25; letter-spacing: -.01em; }
.guide-tile span { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.guide-curve { display: block; width: 100%; height: auto; overflow: visible; }
.guide-curve-line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: guide-draw 6s var(--ease-inout) infinite; animation-delay: var(--delay, 0s); }
.guide-curve-line.is-second { stroke: var(--success); }
.guide-tile:hover .guide-curve-line { animation-duration: 3s; }
@keyframes guide-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 45% { stroke-dashoffset: 0; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.guide-refs { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.guide-refs .learn-side-title { margin: 0; }
.guide-refs .learn-refs { display: flex; flex-wrap: wrap; gap: 4px 20px; }

.guide-chapter { max-width: 1120px; }
.guide-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.guide-pager { display: flex; gap: 18px; }
.guide-pager button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: 13px; cursor: pointer; }
.guide-pager button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.guide-chapter > h1 { margin: 4px 0 0; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.04em; color: var(--ink); outline: none; }
.guide-stage { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr); gap: 28px; align-items: start; padding: 20px; border-radius: 24px; background: color-mix(in srgb, var(--paper-raised) 70%, transparent); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.guide-figure { min-width: 0; display: grid; gap: 12px; }
.guide-text { display: grid; gap: 12px; align-content: start; }
.guide-text h2 { margin: 4px 0 0; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.guide-text p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.guide-text p:last-of-type { color: var(--ink-soft); }
.guide-step-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.guide-step-nav button { padding: 10px 18px; border-radius: 14px; }
.guide-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-series .guide-curve { max-height: 240px; }
.guide-series .guide-curve-line { animation-duration: 5s; }
.fig-caption-line { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-soft); }

.fig-svg { display: block; width: 100%; height: auto; }
/* La scena di Tinker accanto al grafico: dentro Icaro la molla e la vasca vengono dal suo mondo 3D. */
.fig-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.fig-scene { display: grid; gap: 6px; }
.fig-tinker { display: block; width: 100%; aspect-ratio: 1 / 1; max-height: 320px; border: 0; border-radius: 14px; background: var(--paper-raised); }
.fig-readout { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.fig-readout b { color: var(--ink); font-weight: 650; }
.fig-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 18px; }
.fig-sliders { display: contents; }
.fig-slider { display: grid; gap: 2px; min-width: 180px; flex: 1; font-size: 12.5px; color: var(--ink-soft); }
.fig-slider b { font-weight: 650; color: var(--ink); }
.fig-button { padding: 8px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent-soft) 70%, transparent); color: var(--accent-strong); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.fig-button:hover { background: var(--accent-soft); }
.fig-choices { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.fig-choices button { padding: 4px 0 4px 22px; position: relative; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
.fig-choices button::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -7px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.fig-choices button[aria-checked="true"] { color: var(--ink); font-weight: 600; }
.fig-choices button[aria-checked="true"]::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 3px, transparent 3.5px); }
.fig-axis { fill: none; stroke: color-mix(in srgb, var(--ink-soft) 40%, transparent); stroke-width: 1; }
.fig-guide { stroke: color-mix(in srgb, var(--ink-soft) 35%, transparent); stroke-dasharray: 4 4; }
.fig-curve { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.fig-caption { font-size: 12px; fill: var(--ink-soft); }
.fig-value { font-size: 13px; font-weight: 650; fill: #ffffff; stroke: rgba(10, 30, 60, .35); stroke-width: 2.5px; paint-order: stroke; }
/* Materiali delle figure: colori di oggetti veri, appena smorzati nel tema scuro. */
.m-steel-dark { stop-color: #69737d; } .m-steel-mid { stop-color: #b9c2ca; } .m-steel-light { stop-color: #f3f6f8; }
.m-iron-light { stop-color: #5d6874; } .m-iron { stop-color: #39424c; } .m-iron-dark { stop-color: #20262c; }
.m-wood-light { stop-color: #c99a68; } .m-wood { stop-color: #a87a4c; } .m-wood-dark { stop-color: #7f5733; }
.m-skin-light { stop-color: #f6d3b5; } .m-skin { stop-color: #e9b994; } .m-skin-dark { stop-color: #d39d78; }
.m-water-top { stop-color: #8cc7f0; } .m-water { stop-color: #4f9ad8; stop-opacity: .85; } .m-water-deep { stop-color: #2f6fb4; stop-opacity: .92; }
.m-glass { stop-color: #ffffff; stop-opacity: 0; } .m-glass-shine { stop-color: #ffffff; stop-opacity: .38; } .m-glass-edge { stop-color: #ffffff; stop-opacity: .12; }
.m-grass-a { fill: #6aa85a; } .m-grass-b { fill: #5f9c50; }
:root[data-theme="studio"] .m-grass-a, :root[data-theme="dark"] .m-grass-a, :root[data-theme="notte"] .m-grass-a { fill: #3f7442; }
:root[data-theme="studio"] .m-grass-b, :root[data-theme="dark"] .m-grass-b, :root[data-theme="notte"] .m-grass-b { fill: #39693c; }
.m-grain { fill: none; stroke: #7f5733; stroke-width: .8; opacity: .45; }
.m-screw { fill: #5d6874; }
.m-shine { fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; opacity: .22; }
.m-skin-line { stroke: #b98062; stroke-width: 1; fill-opacity: 1; }
path.m-skin-line:not([fill]) { fill: none; opacity: .6; }
.fig-coil { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.fig-coil.is-back { stroke: #59626b; stroke-width: 2.6; }
.fig-hook { fill: none; stroke: #8d98a3; stroke-width: 2.4; stroke-linecap: round; }
.fig-ring { fill: none; stroke: #39424c; stroke-width: 3; }
.fig-engraved { font-size: 12px; font-weight: 700; fill: #8d98a3; letter-spacing: .04em; }
.fig-pitch-line { fill: none; stroke: #ffffff; stroke-width: 1.8; opacity: .8; }
.fig-pitch-line .is-spot { fill: #ffffff; }
.fig-net { fill: rgba(255, 255, 255, .12); stroke: #ffffff; stroke-width: .8; opacity: .85; }
.fig-shadow { fill: #000000; opacity: .2; }
.fig-head { fill: #e9b994; stroke: #b98062; stroke-width: .6; }
.fig-hair { fill: #3a2a20; }
.fig-arm { fill: #e9b994; }
.fig-shirt { stroke: rgba(0, 0, 0, .25); stroke-width: .8; }
.fig-kit-0 .fig-shirt { fill: #d6453a; } .fig-kit-1 .fig-shirt { fill: #2f6fd0; } .fig-kit-2 .fig-shirt { fill: #f0c234; }
.fig-ball { fill: #ffffff; stroke: #2a2f35; stroke-width: .8; }
.fig-ball-mark { fill: #2a2f35; }
.fig-pipe { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.fig-valve { stroke: #69737d; stroke-width: 1; }
.fig-glass-back { fill: color-mix(in srgb, #9fd0f0 12%, transparent); }
.fig-glass { stroke: color-mix(in srgb, var(--ink-soft) 55%, transparent); stroke-width: 1.6; }
.fig-glass-rim { fill: color-mix(in srgb, #ffffff 55%, var(--ink-soft)); opacity: .7; }
.fig-surface { fill: none; stroke: #d6efff; stroke-width: 1.4; opacity: .8; }
.fig-bubble { fill: #ffffff; opacity: .7; }
.m-sky-top { stop-color: #a9d2f3; } .m-sky { stop-color: #e4f1fb; }
.m-wall-light { stop-color: #f1e4d2; } .m-wall { stop-color: #dcc7aa; }
.m-meadow-light { stop-color: #8cc46e; } .m-meadow { stop-color: #5f9c50; }
.m-carton-light { stop-color: #dcb27c; } .m-carton { stop-color: #b98a52; }
.m-earth-light { stop-color: #b48a62; } .m-earth { stop-color: #8c6544; } .m-earth-dark { stop-color: #5e4230; }
.m-oil-light { stop-color: #4a4038; } .m-oil { stop-color: #1d1814; }
.m-sea-top { stop-color: #5fb0dc; } .m-sea { stop-color: #2f7fb8; } .m-sea-deep { stop-color: #1d4f82; }
:root[data-theme="studio"] .m-sky-top, :root[data-theme="dark"] .m-sky-top, :root[data-theme="notte"] .m-sky-top { stop-color: #23406a; }
:root[data-theme="studio"] .m-sky, :root[data-theme="dark"] .m-sky, :root[data-theme="notte"] .m-sky { stop-color: #3b5f8c; }
.fig-snow { fill: #ffffff; transition: opacity .4s; }
.fig-ground { fill: #f4f7fa; opacity: .85; }
.fig-room { fill: #f3b46f; }
.fig-window-bar { fill: none; stroke: #8a6a48; stroke-width: 2; }
.fig-heat { fill: none; stroke: #e0763c; stroke-width: 2; stroke-linecap: round; }
.fig-glow { fill: #ff9a4d; filter: blur(8px); }
.fig-thermo { fill: #ffffff; stroke: #9aa6b2; stroke-width: 1; }
.fig-thermo-bulb, .fig-mercury { fill: #d8453b; }
.fig-goal-mark { stroke: var(--accent-strong); stroke-width: 2; }
.fig-caption.is-strong { font-weight: 650; fill: var(--ink); }
.fig-tuft { fill: none; stroke: #4c8a3e; stroke-width: 1.4; stroke-linecap: round; }
.fig-bunny-body { fill: #e9e1d6; stroke: #b7aa98; stroke-width: .6; }
.fig-bunny-ear { fill: #e9e1d6; stroke: #b7aa98; stroke-width: .6; }
.fig-bunny-tail { fill: #ffffff; }
.fig-bunny-eye { fill: #2a2f35; }
.fig-tape { stroke: #f1dcb8; stroke-width: 3; }
.fig-rig { fill: none; stroke: #4a5560; stroke-width: 1; }
.fig-rig-body { stroke: #69737d; stroke-width: .8; }
.fig-rig-base { fill: #39424c; }
.fig-pipe-thin { stroke: #39424c; stroke-width: 1.2; }
.fig-wave { fill: none; stroke: #cfe9f7; stroke-width: 1.6; }
.fig-fish { fill: #f0b048; stroke: #b9782a; stroke-width: .6; }
.fig-hull { fill: #c9553f; }
.fig-mast { stroke: #5e4230; stroke-width: 1.4; }
.fig-sail { fill: #ffffff; }
.fig-loop { fill: none; stroke: var(--accent-strong); stroke-width: 2; stroke-dasharray: 5 4; }

@media (max-width: 1100px) {
  .guide-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .guide-stage { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .guide-tiles, .guide-lessons { grid-template-columns: 1fr; }
  .guide-stage { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-curve-line { animation: none; stroke-dashoffset: 0; }
}
.guide-top .learn-back { margin: 0; }

/* Stile delle figure: illustrazione scientifica, colori smorzati, linee sottili. */
.ed-hatch { stroke: color-mix(in srgb, var(--ink-soft) 55%, transparent); stroke-width: 1; }
.ed-section { stroke: color-mix(in srgb, var(--ink-soft) 70%, transparent); stroke-width: 1; }
.ed-panel { fill: color-mix(in srgb, var(--ink-soft) 5%, transparent); stroke: color-mix(in srgb, var(--ink-soft) 22%, transparent); }
.ed-shelf { fill: color-mix(in srgb, var(--ink-soft) 35%, var(--paper-raised)); stroke: color-mix(in srgb, var(--ink-soft) 70%, transparent); stroke-width: 1; }
.ed-pitch { fill: #7f9e78; } .ed-pitch-band { fill: #789771; }
:root[data-theme="studio"] .ed-pitch, :root[data-theme="dark"] .ed-pitch, :root[data-theme="notte"] .ed-pitch { fill: #3d5a45; }
:root[data-theme="studio"] .ed-pitch-band, :root[data-theme="dark"] .ed-pitch-band, :root[data-theme="notte"] .ed-pitch-band { fill: #385440; }
.ed-pitch-line { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; }
.ed-player { stroke: rgba(255, 255, 255, .9); stroke-width: 1.4; }
.ed-trail { fill: none; stroke-width: 1.6; stroke-linecap: round; opacity: .45; }
.ed-kit-0.ed-player { fill: #b4483e; } .ed-kit-0.ed-trail { stroke: #b4483e; }
.ed-kit-1.ed-player { fill: #2f5f9e; } .ed-kit-1.ed-trail { stroke: #2f5f9e; }
.ed-kit-2.ed-player { fill: #c89a2e; } .ed-kit-2.ed-trail { stroke: #c89a2e; }
.ed-ball { fill: #ffffff; stroke: #2a2f35; stroke-width: 1; }
.ed-room { fill: #d9823f; }
.ed-glass { stroke: #7fa6c4; stroke-width: 1.2; }
.ed-flow-arrow { fill: none; stroke: #6f8fb0; stroke-linecap: butt; marker-end: none; opacity: .85; }
.ed-flow-arrow.is-warm { stroke: #c9743a; }
.ed-radiator { fill: none; stroke: color-mix(in srgb, var(--ink-soft) 80%, transparent); stroke-width: 1.2; }
.ed-scale line { stroke: color-mix(in srgb, var(--ink-soft) 70%, transparent); stroke-width: 1; }
.ed-marker { fill: var(--ink); }
.ed-goal { stroke: var(--accent-strong); stroke-width: 2.4; }
.ed-field { fill: #a9b98f; } .ed-fence { fill: #9caf83; stroke: #6d7f58; stroke-width: 1; stroke-dasharray: 3 2; }
:root[data-theme="studio"] .ed-field, :root[data-theme="dark"] .ed-field, :root[data-theme="notte"] .ed-field { fill: #3b4b36; }
:root[data-theme="studio"] .ed-fence, :root[data-theme="dark"] .ed-fence, :root[data-theme="notte"] .ed-fence { fill: #34442f; stroke: #8ea57a; }
.ed-dot { fill: #3d4752; transition: fill .6s; } .ed-dot.is-new { fill: var(--accent-strong); }
:root[data-theme="studio"] .ed-dot, :root[data-theme="dark"] .ed-dot, :root[data-theme="notte"] .ed-dot { fill: #e4e9ee; }
.ed-sky { fill: color-mix(in srgb, #9fb8cf 30%, var(--paper-raised)); }
.ed-stratum-1 { fill: #b9a68a; } .ed-stratum-2 { fill: #a08c70; } .ed-stratum-3 { fill: #8a775e; }
.ed-reservoir { fill: #2e2a26; } .ed-reservoir-edge { fill: none; stroke: #2e2a26; stroke-width: 1; stroke-dasharray: 3 3; }
.ed-well { stroke: #3a3f45; stroke-width: 1; } .ed-derrick { fill: none; stroke: #3a3f45; stroke-width: 1.2; }
.ed-water { fill: #6f93b0; } .ed-water-deep { fill: #50728f; opacity: .7; }
.ed-surface { fill: none; stroke: #d7e4ee; stroke-width: 1.2; }
.ed-fish { stroke: #e9eef2; stroke-width: 1.4; stroke-linecap: round; opacity: .85; }
.ed-boat { fill: #3a3f45; }
.ed-ground { fill: color-mix(in srgb, #a08c70 45%, var(--paper-raised)); }
.ed-profile { fill: none; stroke: color-mix(in srgb, var(--ink) 70%, transparent); stroke-width: 1.4; }
.ed-ball-heavy { fill: #3d4752; stroke: #ffffff; stroke-width: 1; }
:root[data-theme="studio"] .ed-ball-heavy, :root[data-theme="dark"] .ed-ball-heavy, :root[data-theme="notte"] .ed-ball-heavy { fill: #e4e9ee; stroke: #20262c; }
.ed-bird { fill: color-mix(in srgb, var(--ink) 80%, transparent); }
.ed-part { fill: color-mix(in srgb, var(--ink-soft) 14%, transparent); }
.ed-part.is-on { fill: color-mix(in srgb, var(--ink-soft) 70%, transparent); }
.ed-part.is-kept { fill: var(--accent); }
.fig-trace.is-muted .fig-curve { stroke: var(--ink-soft); stroke-dasharray: 4 3; }
.ed-pipe { fill: none; stroke: color-mix(in srgb, var(--ink-soft) 55%, transparent); stroke-width: 9; stroke-linejoin: round; }
.ed-pipe-water { fill: none; stroke-width: 5; stroke-linecap: butt; }
.ed-head { fill: #69737d; }
.ed-spray { stroke-width: 1; stroke-dasharray: 3 5; opacity: .75; }
.ed-valve { fill: #b9c2ca; stroke: #69737d; stroke-width: 1.2; }
.ed-knob { stroke: #39424c; stroke-width: 2.4; stroke-linecap: round; }
.ed-soil { fill: #8c6544; }
.ed-plant path { fill: none; stroke: #6d8a4a; stroke-width: 1.3; stroke-linecap: round; }
.ed-ear { fill: #c9a24a; }
.ed-gauge { fill: color-mix(in srgb, var(--ink-soft) 10%, transparent); }
.ed-gauge-fill { fill: color-mix(in srgb, var(--ink-soft) 45%, transparent); transition: width .3s; }
.ed-gauge-fill.is-short { fill: var(--accent); }
.ed-gauge-mark { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 2 2; }
.ed-road { fill: none; stroke: #8d949b; stroke-width: 11; stroke-linecap: round; }
.ed-road-line { fill: none; stroke: #f2f4f6; stroke-width: 1; stroke-dasharray: 5 5; }
.ed-town { fill: #7a6a58; }
.ed-car { fill: #2a2f35; }
.ed-bare { fill: #b8a586; }
.ed-tuft { fill: #7d9a5e; transition: opacity .4s; }
.ed-cow { stroke: rgba(255, 255, 255, .85); stroke-width: .8; }
.ed-herd-0 { fill: #3d4752; } .ed-herd-1 { fill: #7a5a3c; } .ed-herd-2 { fill: #5c6b7a; } .ed-herd-3 { fill: #8a6f52; }
.ed-crate { fill: #8f7a5e; stroke: #6d5b44; stroke-width: .6; transition: opacity .3s; }
.ed-post { fill: color-mix(in srgb, var(--ink-soft) 55%, transparent); }
.ed-bar { fill: var(--accent-strong); }