.prose .learning-example{border-block:1px solid var(--color-border);margin-block:2rem;margin-inline:0;padding-block:1.5rem;font-size:1.0625rem;line-height:1.7}.prose .learning-example figcaption{color:var(--color-text);text-align:start;margin:0 0 .5rem;font-size:1.0625rem;font-weight:650;line-height:1.6}.prose .learning-example p{margin:0}.learning-example [hidden]{display:none!important}.learning-example .learning-controls[hidden]{visibility:hidden;display:flex!important}.learning-feedback{display:grid}.learning-feedback>p{grid-area:1/1}.learning-example .learning-feedback>[hidden]{visibility:hidden;display:block!important}.prose .learning-example .learning-intro{color:var(--color-text-soft)}.learning-controls{flex-wrap:wrap;gap:.5rem;margin-block:1rem 1.25rem;display:flex}.learning-controls button{border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-bg);min-height:44px;color:var(--color-text);font:inherit;cursor:pointer;padding:.5rem .875rem;font-size:1.0625rem;line-height:1.5}.learning-controls button:hover:not(:disabled){background:var(--color-surface)}.learning-controls button[aria-pressed=true]{border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-accent-strong);font-weight:650}.learning-controls button:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}.learning-controls button:disabled{border-color:var(--color-border);color:var(--color-text-soft);cursor:default}.learning-controls button[aria-disabled=true]{color:var(--color-text-soft);cursor:default}.learning-controls button[aria-disabled=true]:hover{background:var(--color-bg)}.learning-scenario-stage{display:grid}.learning-scenario-state{grid-area:1/1;min-width:0}.learning-example .learning-scenario-state[hidden]{visibility:hidden;pointer-events:none;display:block!important}.learning-feedback>.learning-scenario-reserve{visibility:hidden;pointer-events:none}.learning-lanes{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;display:grid}.learning-lane{border-block:1px solid var(--dg-line-strong);min-width:0;padding-block:.75rem}.learning-lane strong{overflow-wrap:anywhere;margin-block:.5rem;font-size:1.125rem;line-height:1.5;display:block}.learning-lane-accent{border-color:var(--dg-accent-strong)}.learning-lane-accent strong{color:var(--dg-accent-strong)}.learning-scene-label{color:var(--dg-ink-soft)}.prose .learning-route{counter-reset:learning-step;gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.prose .learning-route li{border-bottom:1px solid var(--dg-line-strong);counter-increment:learning-step;grid-template-columns:1.25rem minmax(0,1fr) minmax(0,1.2fr);gap:.75rem;margin:0;padding:0 0 .75rem;display:grid}.learning-route li:before{content:counter(learning-step);color:var(--dg-ink-soft)}.learning-route strong{color:var(--dg-accent-strong);overflow-wrap:anywhere}.learning-distribution{gap:1rem;display:grid}.learning-task-slots{flex-wrap:wrap;gap:.5rem;margin-top:1rem;display:flex}.learning-task-slots span{border:1px solid var(--dg-line-strong);padding:.5rem}.learning-task-slots .learning-task-extra{color:var(--dg-accent-strong);border-style:dashed}.prose .learning-example .learning-scene-context{margin-bottom:1rem}.learning-tag-timeline{gap:.75rem;display:grid}.learning-months{grid-template-columns:repeat(6,minmax(0,1fr));gap:.25rem;display:grid}.learning-months span{border-bottom:1px solid var(--dg-line-strong);text-align:center;padding-block:.5rem;font-size:.875rem}.learning-months .learning-month-active{color:var(--dg-accent-strong);background:var(--dg-accent-soft)}.learning-series-dots{grid-template-columns:repeat(8,1fr);gap:.5rem;margin-top:1rem;display:grid}.learning-series-dots span{background:var(--dg-accent-strong);height:.75rem}.learning-mini-page{border:1px solid var(--dg-line-strong);height:13rem;margin-top:.75rem;position:relative;overflow:hidden}.learning-mini-image{border:1px dashed var(--dg-line-strong);place-items:center;height:3rem;font-size:.875rem;display:grid;position:absolute;inset:.75rem .75rem auto}.learning-image-arrived .learning-mini-image{background:var(--dg-accent-soft);color:var(--dg-accent-strong);border-style:solid}.prose .learning-example .learning-mini-text{top:.75rem;position:absolute;inset-inline:.75rem}.learning-space-reserved .learning-mini-text,.learning-image-arrived .learning-mini-text{transform:translateY(4.25rem)}.learning-colour-sample{gap:1rem;padding-block:1rem;display:grid}.learning-colour-sample>span{align-items:center;gap:.5rem;display:flex}.learning-status-dot{background:var(--dg-ink-soft);border-radius:50%;flex:0 0 1rem;width:1rem;height:1rem;display:inline-block}.learning-dot-approved{background:var(--dg-accent-strong)}.learning-colour-removed .learning-status-dot{background:var(--dg-ink-soft)}@media (width<=540px){.learning-lanes{gap:.75rem}.prose .learning-route li{gap:.5rem}}.learning-stage{font-variant-numeric:tabular-nums;margin-block:1.5rem}.learning-cache{gap:1.5rem;display:grid}.prose .learning-example .learning-label{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1rem;display:flex}.learning-label strong{font-size:1.125rem;font-weight:650}.learning-bar{width:100%;height:8px;margin-top:.5rem;display:block}.learning-bar-track{fill:var(--color-muted)}.learning-bar-value{fill:var(--color-accent)}.learning-bar-value,.learning-pixel-area [data-pixel-area]{transform-origin:0 0;transition:transform .22s var(--ease-out)}.learning-replica{text-align:center;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);align-items:center;gap:1rem;display:grid}.learning-replica>div{gap:.5rem;display:grid}.learning-replica strong{font-size:1.25rem;font-weight:650}.learning-replica small{color:var(--color-text-soft);font-size:.875rem}.learning-transfer{width:48px;color:var(--color-border-strong);display:block}[data-replication-pending] [data-primary-name]{color:var(--color-accent)}.learning-container{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;display:grid}.learning-container-lane{text-align:center;grid-template-rows:auto 6.5rem 1.5rem 4rem auto;min-width:0;display:grid}.prose .learning-example .learning-storage-label{padding-bottom:.75rem;font-size:1.0625rem;font-weight:650}.learning-container-box{isolation:isolate;align-content:center;justify-items:center;gap:.875rem;min-width:0;padding:.75rem;display:grid;position:relative}.learning-container-outline{z-index:-1;width:100%;height:100%;position:absolute;inset:0}.learning-container-outline rect{fill:var(--dg-surface);stroke:var(--dg-line-strong)}.learning-container-name,.learning-container-reader{color:var(--dg-ink-soft);font-size:.875rem}.learning-stored-file{min-height:28px;color:var(--dg-ink);justify-content:center;align-items:center;gap:.5rem;display:flex}.learning-stored-file strong{font-size:1.0625rem;font-weight:650}.learning-file-icon{flex:none;width:20px;height:24px}.learning-volume-connection{width:24px;height:24px;color:var(--dg-accent-strong);justify-self:center}.learning-container-volume{border:1px solid var(--dg-accent-strong);border-radius:var(--radius-md);background:var(--dg-accent-soft);align-content:center;gap:.125rem;display:grid}.learning-volume-label{color:var(--dg-accent-strong);font-size:.875rem}.prose .learning-example .learning-container-outcome{grid-row:5;padding-top:.75rem;font-size:.875rem;font-weight:650}.learning-volume-outcome{color:var(--dg-accent-strong)}[data-container-replaced] .learning-container-outline rect{stroke:var(--dg-accent-strong)}[data-container-replaced] .learning-local-file{color:var(--dg-ink-soft)}[data-container-replaced] .learning-local-file .learning-file-icon{display:none}.learning-pixels{grid-template-columns:200px minmax(0,1fr);align-items:center;gap:2rem;display:grid}.learning-pixels>div{gap:1rem;display:grid}.learning-pixel-area{width:200px;height:150px;display:block}.learning-pixel-boundary{fill:var(--color-surface);stroke:var(--color-border-strong);stroke-dasharray:4 4}.learning-pixel-area [data-pixel-area]{fill:var(--color-accent)}.prose .learning-example .learning-status{min-block-size:3.4em}.prose .learning-example .learning-note{color:var(--color-text-soft);margin-top:.75rem;font-size:.875rem}@media (width<=540px){.learning-container{gap:.75rem}.learning-container-box{padding-inline:.5rem}.learning-stored-file{gap:.375rem}.learning-pixels{grid-template-columns:minmax(0,1fr);gap:1.25rem}.learning-pixel-area{justify-self:center}.learning-replica{grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:.5rem}.learning-transfer{width:32px}.prose .learning-example .learning-status{min-block-size:5.1em}}@media (prefers-reduced-motion:reduce){.learning-scenario,.learning-scenario *,.learning-scenario :before,.learning-scenario :after{transition:none;animation:none}[data-learning-example=container] *,.learning-bar-value,.learning-pixel-area [data-pixel-area]{transition:none}}
