# presentation/styles/learning.style.css

> 100 lines of code and 0 definitions.

Tree: Site tree
Language: css
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-styles-learning-style-css
Source text: https://banes-lab.com/assets/sources/source.b56c596637407253f6800da358c241fb9bd6fcade64be7cc7a0bf28bebadb205.generated.txt

## Source

```css
.learning-card {
    background: var(--card-bg);
    border: var(--border-s) solid var(--white-alpha-border);
    border-radius: var(--radius-md);
    justify-self: center;
    margin: 0;
    max-width: var(--learning-max-width);
    overflow: hidden;
    padding: 0;
    width: var(--percent-full);
}

.learning-map {
    contain: layout paint;
    height: var(--learning-height);
    overflow: hidden;
    padding: 0;
    position: relative;
}

.learning-vector {
    display: block;
    height: var(--percent-full);
    width: var(--percent-full);
}

.learning-tone-head {
    stop-color: var(--accent-tone, var(--banes-lab-accent));
    stop-opacity: var(--learning-tone-head);
}

.learning-tone-tail {
    stop-color: var(--accent-tone, var(--banes-lab-accent));
    stop-opacity: var(--learning-tone-tail);
}

.learning-block {
    stroke: var(--overlay-subtle);
    stroke-width: var(--learning-stroke);
}

.learning-tag {
    fill: var(--banes-lab-ground-sink);
    stroke: var(--accent-tone, var(--white-alpha-border));
    stroke-opacity: var(--learning-tag-stroke);
    stroke-width: var(--learning-stroke);
}

.learning-icon {
    fill: var(--accent-tone, var(--banes-lab-accent));
    font-family: var(--font-family-icon);
    font-size: var(--learning-icon-size);
}

.learning-label {
    fill: var(--accent-tone, var(--banes-lab-accent));
    font-family: var(--font-family-heading);
    font-size: var(--learning-label-size);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--home-letter-stat);
}

.learning-jump {
    cursor: pointer;
}

.learning-stop rect {
    fill: var(--learning-stop-fill);
    stroke: var(--white-alpha-border);
    stroke-width: var(--learning-stroke);
    transition:
        fill var(--transition-base),
        stroke var(--transition-base);
}

.learning-stop text {
    fill: var(--white-alpha-muted);
    font-family: var(--font-family-mono);
    font-size: var(--learning-stop-size);
    transition: fill var(--transition-base);
}

.learning-stop.lit rect {
    fill: var(--learning-lit-fill);
    stroke: var(--hex-call-bright);
    stroke-width: var(--learning-lit-stroke);
}

.learning-stop.lit text {
    fill: var(--white-alpha-tertiary);
}

.learning-stop.focused rect {
    fill: var(--learning-lit-fill);
}

.learning-stop.required rect {
    stroke: var(--hex-call-bright);
    stroke-width: var(--learning-lit-stroke);
}

.learning-stop.required text {
    fill: var(--white-alpha-tertiary);
}

.learning-rail {
    fill: none;
    stroke: var(--overlay-subtle);
    stroke-width: var(--learning-rail-stroke);
}

.learning-trace {
    fill: none;
    stroke: var(--hex-call-bright);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: var(--learning-trace-stroke);
}
```