/*
 * Dynamips Workbook Content Design System v1
 *
 * Shared by:
 * - public Workbook pages
 * - the in-Dashboard Workbook reader
 * - the Gutenberg editor for dynamips_workbook
 */

.dyn-workbook-content,
.editor-styles-wrapper {
    --dyn-wb-text: #202631;
    --dyn-wb-heading: #161b22;
    --dyn-wb-muted: #66717d;
    --dyn-wb-line: #dfe3e8;
    --dyn-wb-soft: #f7f8fa;
    --dyn-wb-link: #263d67;
    --dyn-wb-accent: #f14700;
    --dyn-wb-accent-soft: #fff0e7;
    --dyn-wb-note-bg: #edf9f2;
    --dyn-wb-note-border: #bce9cd;
    --dyn-wb-note-icon: #08a64f;
    --dyn-wb-warning-bg: #fff8e8;
    --dyn-wb-warning-border: #f0d79a;
    --dyn-wb-warning-icon: #a66b00;
    --dyn-wb-tip-bg: #eef7ff;
    --dyn-wb-tip-border: #c9e1f5;
    --dyn-wb-tip-icon: #2776aa;
    --dyn-wb-important-bg: #f5f1ff;
    --dyn-wb-important-border: #d9cdf9;
    --dyn-wb-important-icon: #6c4fc8;
    --dyn-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dyn-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --dyn-type-h2-size: 26px;
    --dyn-type-h3-size: 22px;
    --dyn-type-h4-size: 19px;
    --dyn-type-h5-size: 17px;
    font-family: var(--dyn-font-sans);
    color: var(--dyn-wb-text);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.68;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.dyn-workbook-content {
    width: min(100%, 1000px);
    margin-inline: auto;
}

.dyn-workbook-content > :first-child,
.editor-styles-wrapper > :first-child {
    margin-top: 0;
}

.dyn-workbook-content > :last-child,
.editor-styles-wrapper > :last-child {
    margin-bottom: 0;
}

/* Headings */
.dyn-workbook-content h2,
.dyn-workbook-content h3,
.dyn-workbook-content h4,
.dyn-workbook-content h5,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5 {
    color: var(--dyn-wb-heading);
    font-weight: 700;
    letter-spacing: -.02em;
}

.dyn-workbook-content h2,
.editor-styles-wrapper h2 {
    margin: 48px 0 18px;
    font-size: var(--dyn-type-h2-size);
    line-height: 1.28;
}

.dyn-workbook-content h3,
.editor-styles-wrapper h3 {
    margin: 38px 0 15px;
    font-size: var(--dyn-type-h3-size);
    font-weight: 650;
    line-height: 1.32;
}

.dyn-workbook-content h4,
.editor-styles-wrapper h4 {
    margin: 30px 0 12px;
    font-size: var(--dyn-type-h4-size);
    font-weight: 650;
    line-height: 1.38;
}

.dyn-workbook-content h5,
.editor-styles-wrapper h5 {
    margin: 26px 0 10px;
    font-size: var(--dyn-type-h5-size);
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: -.01em;
}

/* Body copy */
.dyn-workbook-content p,
.editor-styles-wrapper p {
    margin: 0 0 20px;
    color: var(--dyn-wb-text);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.68;
}

.dyn-workbook-content strong,
.editor-styles-wrapper strong {
    color: #151a21;
    font-weight: 760;
}

.dyn-workbook-content a,
.editor-styles-wrapper a {
    color: var(--dyn-wb-link);
    font-weight: 650;
    text-decoration-line: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    text-decoration-color: #7d8ba4;
}

.dyn-workbook-content a:hover {
    color: #e75e2b;
    text-decoration-color: currentColor;
}

.dyn-workbook-content em,
.editor-styles-wrapper em {
    color: #485463;
}

/* Quotation / editorial emphasis */
.dyn-workbook-content blockquote,
.dyn-workbook-content .wp-block-quote,
.editor-styles-wrapper blockquote,
.editor-styles-wrapper .wp-block-quote {
    margin: 28px 0;
    padding: 3px 0 3px 26px;
    border: 0;
    border-left: 4px solid #ccd3dd;
    background: transparent;
    color: #455162;
}

.dyn-workbook-content blockquote p,
.dyn-workbook-content .wp-block-quote p,
.editor-styles-wrapper blockquote p,
.editor-styles-wrapper .wp-block-quote p {
    margin-bottom: 12px;
    color: inherit;
    font-size: 18px;
    font-style: italic;
    line-height: 1.62;
}

.dyn-workbook-content blockquote cite,
.editor-styles-wrapper blockquote cite {
    color: var(--dyn-wb-muted);
    font-size: 14px;
    font-style: normal;
}

/* Unordered lists */
.dyn-workbook-content ul,
.editor-styles-wrapper ul {
    margin: 22px 0 28px;
    padding: 0;
    list-style: none;
}

.dyn-workbook-content ul > li,
.editor-styles-wrapper ul > li {
    position: relative;
    margin: 0 0 13px;
    padding-left: 20px;
    color: var(--dyn-wb-text);
    font-size: 18px;
    line-height: 1.58;
}

.dyn-workbook-content ul > li::before,
.editor-styles-wrapper ul > li::before {
    content: "";
    position: absolute;
    top: .72em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dyn-wb-accent);
}

.dyn-workbook-content ul ul,
.editor-styles-wrapper ul ul {
    margin: 12px 0 6px;
}

.dyn-workbook-content ul ul > li::before,
.editor-styles-wrapper ul ul > li::before {
    width: 6px;
    height: 6px;
    border: 1.5px solid var(--dyn-wb-accent);
    background: transparent;
}

/* Ordered lists: numbered circle step treatment */
.dyn-workbook-content ol,
.editor-styles-wrapper ol {
    counter-reset: dyn-workbook-step;
    margin: 26px 0 32px;
    padding: 0;
    list-style: none;
}

.dyn-workbook-content ol > li,
.editor-styles-wrapper ol > li {
    counter-increment: dyn-workbook-step;
    position: relative;
    min-height: 28px;
    margin: 0 0 14px;
    padding: 1px 0 0 40px;
    color: var(--dyn-wb-text);
    font-size: 18px;
    line-height: 1.52;
}

.dyn-workbook-content ol > li::before,
.editor-styles-wrapper ol > li::before {
    content: counter(dyn-workbook-step);
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dyn-wb-accent-soft);
    color: var(--dyn-wb-accent);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

.dyn-workbook-content ol ol,
.editor-styles-wrapper ol ol {
    counter-reset: none;
    margin: 14px 0 5px;
}

.dyn-workbook-content ol ol > li,
.editor-styles-wrapper ol ol > li {
    counter-increment: none;
    min-height: 0;
    margin-bottom: 10px;
    padding: 0 0 0 22px;
}

.dyn-workbook-content ol ol > li::before,
.editor-styles-wrapper ol ol > li::before {
    content: "–";
    width: auto;
    height: auto;
    display: block;
    border-radius: 0;
    background: transparent;
    color: #a2abb5;
    font-family: inherit;
    font-size: 18px;
    line-height: 1.5;
}

/* Code and CLI */
.dyn-workbook-content code:not(pre code),
.editor-styles-wrapper code:not(pre code) {
    padding: .08em .28em;
    border-radius: 4px;
    background: var(--dyn-wb-accent-soft);
    color: #233047;
    font-family: var(--dyn-font-mono);
    font-size: .88em;
    font-weight: 620;
}

.dyn-workbook-content pre,
.dyn-workbook-content .wp-block-code,
.editor-styles-wrapper pre,
.editor-styles-wrapper .wp-block-code {
    position: relative;
    overflow-x: auto;
    margin: 26px 0 32px;
    padding: 48px 24px 22px;
    border: 1px solid #dfe4ea;
    border-radius: 14px;
    background: #f7f8fa;
    color: #273145;
    box-shadow:
        0 1px 2px rgba(25, 33, 43, .025),
        inset 0 1px 0 rgba(255, 255, 255, .8);
    tab-size: 4;
}

.dyn-workbook-content pre::before,
.dyn-workbook-content .wp-block-code::before,
.editor-styles-wrapper pre::before,
.editor-styles-wrapper .wp-block-code::before {
    content: "CLI";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-bottom: 1px solid #e2e6eb;
    background: rgba(255, 255, 255, .68);
    color: #8a95a2;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.dyn-workbook-content pre.dyn-workbook-code--cisco::before,
.editor-styles-wrapper pre.dyn-workbook-code--cisco::before,
.dyn-workbook-content pre:has(code.language-cisco)::before,
.editor-styles-wrapper pre:has(code.language-cisco)::before {
    content: "Cisco IOS";
}

.dyn-workbook-content pre.dyn-workbook-code--terminal::before,
.editor-styles-wrapper pre.dyn-workbook-code--terminal::before,
.dyn-workbook-content pre:has(code.language-terminal)::before,
.editor-styles-wrapper pre:has(code.language-terminal)::before {
    content: "Terminal";
}

.dyn-workbook-content pre[data-title]::before,
.editor-styles-wrapper pre[data-title]::before {
    content: attr(data-title);
    text-transform: none;
}

.dyn-workbook-content pre code,
.dyn-workbook-content .wp-block-code code,
.editor-styles-wrapper pre code,
.editor-styles-wrapper .wp-block-code code {
    display: block;
    min-width: max-content;
    padding: 0;
    background: transparent;
    color: inherit;
    font-family: var(--dyn-font-mono);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.66;
    white-space: pre;
}

.dyn-workbook-content .dyn-code-highlight,
.editor-styles-wrapper .dyn-code-highlight {
    margin: 0 -2px;
    padding: 1px 2px;
    border-radius: 3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    color: #172033;
    font-weight: 650;
}

.dyn-workbook-content .dyn-code-highlight--yellow,
.editor-styles-wrapper .dyn-code-highlight--yellow {
    background: #fff0a6;
}

.dyn-workbook-content .dyn-code-highlight--green,
.editor-styles-wrapper .dyn-code-highlight--green {
    background: #d9f4e2;
    color: #164c2b;
}

.dyn-workbook-content .dyn-code-highlight--cyan,
.editor-styles-wrapper .dyn-code-highlight--cyan {
    background: #d9f2f7;
    color: #174b59;
}

.dyn-workbook-content .dyn-code-highlight--purple,
.editor-styles-wrapper .dyn-code-highlight--purple {
    background: #eadcff;
    color: #4b2a73;
}

.dyn-workbook-content .dyn-code-highlight--red,
.editor-styles-wrapper .dyn-code-highlight--red {
    background: #fde2e2;
    color: #7f1d1d;
}

.dyn-workbook-content .dyn-code-highlight--blue,
.editor-styles-wrapper .dyn-code-highlight--blue {
    background: #dcecff;
    color: #1e4f8a;
}

.dyn-workbook-content .dyn-code-highlight--orange,
.editor-styles-wrapper .dyn-code-highlight--orange {
    background: #ffe5cc;
    color: #7a3d00;
}

.dyn-workbook-content .dyn-code-highlight--pink,
.editor-styles-wrapper .dyn-code-highlight--pink {
    background: #f9ddec;
    color: #7a244f;
}

/* Gutenberg CLI block style */
.dyn-workbook-content .wp-block-code.is-style-dynamips-cli,
.editor-styles-wrapper .wp-block-code.is-style-dynamips-cli {
    border-color: #d8dee6;
    background: #f5f7fa;
}

/* Imported workbook page markers become a quiet editorial divider. */
.dyn-workbook-content .dyn-workbook-page-break,
.editor-styles-wrapper .dyn-workbook-page-break {
    position: relative;
    width: 100%;
    margin: 54px 0;
    border: 0;
    border-top: 1px solid #dde2e7;
}

.dyn-workbook-content .dyn-workbook-page-break::after,
.editor-styles-wrapper .dyn-workbook-page-break::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 6px;
    height: 6px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #c8cfd6;
}

/* Images and captions */
.dyn-workbook-content figure,
.editor-styles-wrapper figure {
    margin: 30px 0 34px;
}

.dyn-workbook-content img,
.editor-styles-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.dyn-workbook-content .wp-block-image img,
.editor-styles-wrapper .wp-block-image img {
    display: block;
}

.dyn-workbook-content figcaption,
.dyn-workbook-content .wp-element-caption,
.editor-styles-wrapper figcaption,
.editor-styles-wrapper .wp-element-caption {
    margin-top: 10px;
    color: var(--dyn-wb-muted);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

/* Tables */
.dyn-workbook-content .wp-block-table,
.editor-styles-wrapper .wp-block-table {
    overflow-x: auto;
    margin: 28px 0 34px;
}

.dyn-workbook-content table,
.editor-styles-wrapper table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--dyn-wb-line);
    border-radius: 12px;
    background: #fff;
    font-size: 15.5px;
}

.dyn-workbook-content th,
.editor-styles-wrapper th {
    padding: 13px 15px;
    border: 0;
    border-bottom: 1px solid var(--dyn-wb-line);
    background: #f6f7f8;
    color: #4e5965;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .045em;
    text-align: left;
    text-transform: uppercase;
}

.dyn-workbook-content td,
.editor-styles-wrapper td {
    padding: 14px 15px;
    border: 0;
    border-bottom: 1px solid #e8ebee;
    color: #28313b;
    line-height: 1.5;
    vertical-align: top;
}

.dyn-workbook-content tr:last-child td,
.editor-styles-wrapper tr:last-child td {
    border-bottom: 0;
}

/* Separators */
.dyn-workbook-content hr,
.dyn-workbook-content .wp-block-separator,
.editor-styles-wrapper hr,
.editor-styles-wrapper .wp-block-separator {
    width: 100%;
    margin: 42px 0;
    border: 0;
    border-top: 1px solid var(--dyn-wb-line);
}

/* Dynamips callouts.
 * Editors use a Group block and choose Note / Warning / Tip / Important.
 * Legacy [!NOTE] markup is normalized to the same classes at render time.
 */
.dyn-workbook-content .dyn-workbook-callout,
.dyn-workbook-content .wp-block-group.is-style-dynamips-note,
.dyn-workbook-content .wp-block-group.is-style-dynamips-warning,
.dyn-workbook-content .wp-block-group.is-style-dynamips-tip,
.dyn-workbook-content .wp-block-group.is-style-dynamips-important,
.editor-styles-wrapper .wp-block-group.is-style-dynamips-note,
.editor-styles-wrapper .wp-block-group.is-style-dynamips-warning,
.editor-styles-wrapper .wp-block-group.is-style-dynamips-tip,
.editor-styles-wrapper .wp-block-group.is-style-dynamips-important {
    position: relative;
    margin: 26px 0 30px;
    padding: 18px 22px 18px 70px;
    border: 1px solid var(--dyn-wb-note-border);
    border-radius: 18px;
    background: var(--dyn-wb-note-bg);
    color: var(--dyn-wb-text);
}

.dyn-workbook-content .dyn-workbook-callout::before,
.dyn-workbook-content .wp-block-group.is-style-dynamips-note::before,
.dyn-workbook-content .wp-block-group.is-style-dynamips-warning::before,
.dyn-workbook-content .wp-block-group.is-style-dynamips-tip::before,
.dyn-workbook-content .wp-block-group.is-style-dynamips-important::before,
.editor-styles-wrapper .wp-block-group.is-style-dynamips-note::before,
.editor-styles-wrapper .wp-block-group.is-style-dynamips-warning::before,
.editor-styles-wrapper .wp-block-group.is-style-dynamips-tip::before,
.editor-styles-wrapper .wp-block-group.is-style-dynamips-important::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 22px;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    background: var(--dyn-wb-note-icon);
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.1V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E")
        center / contain no-repeat;
    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.1V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.dyn-workbook-content .dyn-workbook-callout--warning,
.dyn-workbook-content .wp-block-group.is-style-dynamips-warning,
.editor-styles-wrapper .wp-block-group.is-style-dynamips-warning {
    border-color: var(--dyn-wb-warning-border);
    background: var(--dyn-wb-warning-bg);
}

.dyn-workbook-content .dyn-workbook-callout--warning::before,
.dyn-workbook-content .wp-block-group.is-style-dynamips-warning::before,
.editor-styles-wrapper .wp-block-group.is-style-dynamips-warning::before {
    background: var(--dyn-wb-warning-icon);
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")
        center / contain no-repeat;
    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.dyn-workbook-content .dyn-workbook-callout--tip,
.dyn-workbook-content .wp-block-group.is-style-dynamips-tip,
.editor-styles-wrapper .wp-block-group.is-style-dynamips-tip {
    border-color: var(--dyn-wb-tip-border);
    background: var(--dyn-wb-tip-bg);
}

.dyn-workbook-content .dyn-workbook-callout--tip::before,
.dyn-workbook-content .wp-block-group.is-style-dynamips-tip::before,
.editor-styles-wrapper .wp-block-group.is-style-dynamips-tip::before {
    background: var(--dyn-wb-tip-icon);
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M8.5 14.5A6 6 0 1 1 15.5 14.5c-.9.7-1.5 1.6-1.5 2.5h-4c0-.9-.6-1.8-1.5-2.5Z'/%3E%3C/svg%3E")
        center / contain no-repeat;
    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M8.5 14.5A6 6 0 1 1 15.5 14.5c-.9.7-1.5 1.6-1.5 2.5h-4c0-.9-.6-1.8-1.5-2.5Z'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.dyn-workbook-content .dyn-workbook-callout--important,
.dyn-workbook-content .wp-block-group.is-style-dynamips-important,
.editor-styles-wrapper .wp-block-group.is-style-dynamips-important {
    border-color: var(--dyn-wb-important-border);
    background: var(--dyn-wb-important-bg);
}

.dyn-workbook-content .dyn-workbook-callout--important::before,
.dyn-workbook-content .wp-block-group.is-style-dynamips-important::before,
.editor-styles-wrapper .wp-block-group.is-style-dynamips-important::before {
    background: var(--dyn-wb-important-icon);
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E")
        center / contain no-repeat;
    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

/* Opt-in editorial quote style */
.dyn-workbook-content .wp-block-quote.is-style-dynamips-quote,
.editor-styles-wrapper .wp-block-quote.is-style-dynamips-quote {
    padding-left: 30px;
    border-left-color: #b9c2cf;
}

/* A little more breathing room around major content sections. */
.dyn-workbook-content > .wp-block-heading + p,
.editor-styles-wrapper > .wp-block-heading + p {
    margin-top: 0;
}

@media (max-width: 760px) {
    .dyn-workbook-content,
    .editor-styles-wrapper {
        font-size: 16px;
    }

    .dyn-workbook-content p,
    .dyn-workbook-content ul > li,
    .dyn-workbook-content ol > li,
    .editor-styles-wrapper p,
    .editor-styles-wrapper ul > li,
    .editor-styles-wrapper ol > li {
        font-size: 16px;
    }

    .dyn-workbook-content h2,
    .editor-styles-wrapper h2 {
        margin-top: 38px;
        font-size: 24px;
    }

    .dyn-workbook-content h3,
    .editor-styles-wrapper h3 {
        margin-top: 31px;
        font-size: 21px;
    }

    .dyn-workbook-content h4,
    .editor-styles-wrapper h4 {
        font-size: 18px;
    }

    .dyn-workbook-content h5,
    .editor-styles-wrapper h5 {
        font-size: 16px;
    }

    .dyn-workbook-content ol > li,
    .editor-styles-wrapper ol > li {
        min-height: 28px;
        padding-top: 1px;
        padding-left: 40px;
    }

    .dyn-workbook-content ol > li::before,
    .editor-styles-wrapper ol > li::before {
        width: 28px;
        height: 28px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
    }

    .dyn-workbook-content .dyn-workbook-callout,
    .dyn-workbook-content .wp-block-group.is-style-dynamips-note,
    .dyn-workbook-content .wp-block-group.is-style-dynamips-warning,
    .dyn-workbook-content .wp-block-group.is-style-dynamips-tip,
    .dyn-workbook-content .wp-block-group.is-style-dynamips-important,
    .editor-styles-wrapper .wp-block-group.is-style-dynamips-note,
    .editor-styles-wrapper .wp-block-group.is-style-dynamips-warning,
    .editor-styles-wrapper .wp-block-group.is-style-dynamips-tip,
    .editor-styles-wrapper .wp-block-group.is-style-dynamips-important {
        padding: 17px 17px 17px 59px;
        border-radius: 14px;
    }

    .dyn-workbook-content .dyn-workbook-callout::before,
    .dyn-workbook-content .wp-block-group.is-style-dynamips-note::before,
    .dyn-workbook-content .wp-block-group.is-style-dynamips-warning::before,
    .dyn-workbook-content .wp-block-group.is-style-dynamips-tip::before,
    .dyn-workbook-content .wp-block-group.is-style-dynamips-important::before,
    .editor-styles-wrapper .wp-block-group.is-style-dynamips-note::before,
    .editor-styles-wrapper .wp-block-group.is-style-dynamips-warning::before,
    .editor-styles-wrapper .wp-block-group.is-style-dynamips-tip::before,
    .editor-styles-wrapper .wp-block-group.is-style-dynamips-important::before {
        left: 17px;
        width: 25px;
        height: 25px;
    }

    .dyn-workbook-content pre,
    .dyn-workbook-content .wp-block-code,
    .editor-styles-wrapper pre,
    .editor-styles-wrapper .wp-block-code {
        padding: 46px 18px 18px;
        border-radius: 10px;
    }
}