@media screen and (min-width: 981px) {

    /* typography tokens */
    #cbcn-dom-container {
        /* PC */
        /* number */
        --semantic-font-size-head-0: 97px;
        --semantic-font-size-head-1: 71px;
        --semantic-font-size-head-2: 58px;
        --semantic-font-size-head-3: 48px;
        --semantic-font-size-subhead: 28px;
        --semantic-font-size-highlight-1: 71px;
        --semantic-font-size-highlight-2: 57px;
        --semantic-font-size-highlight-3: 42px;
        --semantic-font-size-highlight-4: 36px;
        --semantic-font-size-highlight-5: 28px;
        --semantic-font-size-highlight-6: 25px;
        --semantic-font-size-body-1: 21px;
        --semantic-font-size-body-2: 19px;
        --semantic-font-size-body-3: 17px;
        --semantic-font-size-body-4: 15px;
        --semantic-font-size-body-5: 12px;
        --semantic-font-size-footnote-1: 13px;
        --semantic-font-size-footnote-2: 11px;
        --semantic-font-line-height-head-0: 119.588%;
        --semantic-font-line-height-head-1: 119.718%;
        --semantic-font-line-height-head-2: 118.966%;
        --semantic-font-line-height-head-3: 118.75%;
        --semantic-font-line-height-subhead: 117.857%;
        --semantic-font-line-height-highlight-1: 129.577%;
        --semantic-font-line-height-highlight-2: 129.825%;
        --semantic-font-line-height-highlight-3: 128.571%;
        --semantic-font-line-height-highlight-4: 127.778%;
        --semantic-font-line-height-highlight-5: 128.571%;
        --semantic-font-line-height-highlight-6: 128%;
        --semantic-font-line-height-body-1: 147.619%;
        --semantic-font-line-height-body-2: 147.368%;
        --semantic-font-line-height-body-3: 147.059%;
        --semantic-font-line-height-body-4: 146.667%;
        --semantic-font-line-height-body-5: 150%;
        --semantic-font-line-height-footnote-0: 150%;
        --semantic-font-line-height-footnote-1: 153.846%;
        --semantic-font-line-height-footnote-2: 154.545%;
        --semantic-corner-primary: 30px;
        --semantic-corner-secondary: 16px;
        --semantic-corner-tertiary: 8px;
        --primitives-spacing-4: 4px;
        --primitives-spacing-8: 8px;
        --primitives-spacing-12: 12px;
        --primitives-spacing-16: 16px;
        --primitives-spacing-20: 20px;
        --primitives-spacing-24: 24px;
        --primitives-spacing-32: 32px;
        --primitives-spacing-36: 36px;
        --primitives-spacing-48: 48px;
        --primitives-spacing-60: 60px;
        --primitives-spacing-64: 64px;
        --primitives-spacing-68: 68px;
        --primitives-spacing-80: 80px;
        --primitives-spacing-100: 100px;
        --primitives-spacing-120: 120px;
        --primitives-spacing-160: 160px;
        --primitives-spacing-200: 200px;
        --component-label-on-surface---1-background-blur: 30px;
        --component-label-on-surface---2-background-blur: 30px;

        --title-gap-1: var(--primitives-spacing-48);
        --title-gap-2: var(--primitives-spacing-36);
        --title-gap-3: var(--primitives-spacing-32);
        --title-gap-4: var(--primitives-spacing-24);
        --title-gap-5: var(--primitives-spacing-20);
        --title-gap-6: var(--primitives-spacing-16);
        --title-gap-7: var(--primitives-spacing-8);
    }
}


@media screen and (max-width: 980px) {
    /* typography tokens */
    #cbcn-dom-container {
        --semantic-font-size-head-0: 1.8em;
        --semantic-font-size-head-1: 1.8em;
        --semantic-font-size-head-2: 1.8em;
        --semantic-font-size-head-3: 1.6em;
        --semantic-font-size-subhead: 0.95em;
        --semantic-font-size-highlight-1: 1.8em;
        --semantic-font-size-highlight-2: 1.8em;
        --semantic-font-size-highlight-3: 1.4em;
        --semantic-font-size-highlight-4: 1.25em;
        --semantic-font-size-highlight-5: 1.05em;
        --semantic-font-size-highlight-6: 1.05em;
        --semantic-font-size-body-1: 0.85em;
        --semantic-font-size-body-2: 0.85em;
        --semantic-font-size-body-3: 0.7em;
        --semantic-font-size-body-4: 0.6em;
        --semantic-font-size-body-5: 0.6em;
        --semantic-font-size-footnote-1: 0.65em;
        --semantic-font-size-footnote-2: 0.55em;
        --semantic-font-line-height-head-0: 119.444%;
        --semantic-font-line-height-head-1: 119.444%;
        --semantic-font-line-height-head-2: 119.444%;
        --semantic-font-line-height-head-3: 118.75%;
        --semantic-font-line-height-subhead: 115.789%;
        --semantic-font-line-height-highlight-1: 127.778%;
        --semantic-font-line-height-highlight-2: 127.778%;
        --semantic-font-line-height-highlight-3: 128.571%;
        --semantic-font-line-height-highlight-4: 128%;
        --semantic-font-line-height-highlight-5: 128.571%;
        --semantic-font-line-height-highlight-6: 128.571%;
        --semantic-font-line-height-body-1: 147.059%;
        --semantic-font-line-height-body-2: 147.059%;
        --semantic-font-line-height-body-3: 150%;
        --semantic-font-line-height-body-4: 150%;
        --semantic-font-line-height-body-5: 150%;
        --semantic-font-line-height-footnote-1: 153.846%;
        --semantic-font-line-height-footnote-2: 154.545%;
        --semantic-corner-primary: 0.6em;
        --semantic-corner-secondary: 0.4em;
        --semantic-corner-tertiary: 0.4em;
        --primitives-spacing-4: 0.2em;
        --primitives-spacing-8: 0.4em;
        --primitives-spacing-12: 0.6em;
        --primitives-spacing-16: 0.8em;
        --primitives-spacing-20: 1em;
        --primitives-spacing-24: 1.2em;
        --primitives-spacing-32: 1.6em;
        --primitives-spacing-36: 1.8em;
        --primitives-spacing-48: 2.4em;
        --primitives-spacing-60: 3em;
        --primitives-spacing-64: 3.2em;
        --primitives-spacing-68: 3.4em;
        --primitives-spacing-80: 4em;
        --primitives-spacing-100: 5em;
        --primitives-spacing-120: 6em;
        --primitives-spacing-160: 8em;
        --primitives-spacing-200: 10em;
        --component-label-on-surface---1-background-blur: 1.5em;
        --component-label-on-surface---2-background-blur: 1.5em;

        --title-gap-1: var(--primitives-spacing-32);
        --title-gap-2: var(--primitives-spacing-32);
        --title-gap-3: var(--primitives-spacing-24);
        --title-gap-4: var(--primitives-spacing-16);
        --title-gap-5: var(--primitives-spacing-12);
        --title-gap-6: var(--primitives-spacing-8);
        --title-gap-7: var(--primitives-spacing-4);
    }
}

/* color tokens */
#cbcn-dom-container .wt {
    /* light */
    /* color */
    /* 常用 */
    --text-93a: #000000ED;
    --text-69a: #000000b0;
    --text-32a: #00000052;
    
    /* 其他 */
    --text-91a: #000000E8;
    --text-04a: #0000000A;
    --text-08a: #0000000F;
    --text-12a: #0000001F;
    --text-15a: #00000026;
    --text-46a: #00000075;
    --text-54a: #0000008A;
    --text-69a: #000000B0;
    --text-86a: #000000DB;
    --text-89a: #000000E3;
}

#cbcn-dom-container .bk {
    /* dark */
    /* color */
    /* 常用 */
    --text-93a: #FFFFFFF5;
    --text-69a: #FFFFFFAD;
    --text-32a: #FFFFFF4F;
    
    /* 其他 */
    --text-04a: #FFFFFF12;
    --text-08a: #FFFFFF17;
    --text-12a: #FFFFFF1C;
    --text-15a: #FFFFFF24;
    --text-46a: #FFFFFF75;
    --text-54a: #FFFFFF8A;
    --text-86a: #FFFFFFD9;
    --text-89a: #FFFFFFE0;
    --text-91a: #FFFFFFEB;
}