#main-title {
    position: absolute;
    bottom: 7.2rem;
    left: 50%;
    transform: translateX(-50%);
}


#page1-title {
    display: none;
    text-align: right;
    width: 90rem;
    position: absolute;
    right: calc(var(--toolbar-inset-right) + var(--toolbar-button-size) + var(--toolbar-copy-gap));
}

#page1-info {
    display: none;
    position: absolute;
    right: calc(var(--toolbar-inset-right) + var(--toolbar-button-size) + var(--toolbar-copy-gap));
    width: 63rem;
    font-size: 3.2rem;
}

#page1-info>div {
    margin-bottom: 4.2rem;
}

#page1-lunpan {
    --bend-scale: 1;
    --bend-accent: var(--annotation-accent);
    --bend-track: #d8dde6;
    --bend-muted: #69707d;
    --bend-indicator-border: #ffffff;
    --bend-surface: #ffffff;
    --bend-surface-opacity: 0.94;
    --bend-value-size: 26px;
    --bend-label-size: 12px;
    display: none;
    position: absolute;
    top: calc(50% - 140px * var(--bend-scale));
    left: calc(-24px * var(--bend-scale));
    width: calc(216px * var(--bend-scale));
    height: calc(280px * var(--bend-scale));
}

.lunpan {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    user-select: none;
    touch-action: none;
    cursor: grab;
}

.lunpan.is-dragging {
    cursor: grabbing;
}

.bend-gauge {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.bend-background {
    fill: var(--bend-surface);
    fill-opacity: var(--bend-surface-opacity);
}

.bend-track,
.bend-active,
.bend-ticks {
    fill: none;
    stroke: var(--bend-track);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.bend-track,
.bend-active {
    stroke-linecap: round;
}

.bend-active {
    stroke: var(--bend-accent);
    stroke-width: 3;
}

.bend-ticks,
.bend-ticks line {
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.bend-dot {
    fill: var(--bend-accent);
    stroke: var(--bend-indicator-border);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    r: calc(5px / var(--bend-scale));
}

.bend-limit,
.bend-zero {
    fill: var(--bend-muted);
    font-size: calc(var(--bend-label-size) / var(--bend-scale));
    font-variant-numeric: tabular-nums;
}

.bend-zero {
    text-anchor: middle;
}

.bend-reading {
    position: absolute;
    top: calc(50% + 16px * var(--bend-scale));
    left: calc(36px * var(--bend-scale));
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.bend-reading output {
    font-size: var(--bend-value-size);
    font-weight: 500;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bend-reading span {
    color: var(--bend-muted);
    font-size: var(--bend-label-size);
}

.bend-input {
    position: absolute;
    top: calc(32px * var(--bend-scale));
    left: calc(24px * var(--bend-scale));
    width: calc(136px * var(--bend-scale));
    height: calc(216px * var(--bend-scale));
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    writing-mode: vertical-lr;
    direction: ltr;
    background: transparent;
    touch-action: none;
    pointer-events: none;
    cursor: grab;
}

.lunpan.is-dragging .bend-input {
    cursor: grabbing;
}

.bend-input::-webkit-slider-runnable-track {
    width: 100%;
    height: 100%;
    background: transparent;
}

.bend-input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: calc(136px * var(--bend-scale));
    height: 16px;
    border: 0;
    background: transparent;
}

.bend-input::-moz-range-track {
    background: transparent;
}

.bend-input::-moz-range-thumb {
    width: calc(136px * var(--bend-scale));
    height: 16px;
    border: 0;
    background: transparent;
}

.bend-input:focus,
.bend-input:focus-visible {
    outline: none;
}

.lunpan:has(.bend-input:focus-visible):not(.is-pointer-focused) .bend-track {
    stroke: var(--toolbar-color);
    stroke-width: 3;
}

.page2-info {
    display: none;
    position: absolute;
    right: calc(var(--toolbar-inset-right) + var(--toolbar-button-size) + var(--toolbar-copy-gap));
    width: 62rem;
    font-size: 3.2rem;
}

.pages .page2 #page2-title {
    display: none;
    width: 90rem;
    position: absolute;
    top: calc(var(--product-logo-top) + var(--product-logo-height) + var(--product-logo-title-gap));
    left: 4rem;
}

.page2-info>div {
    margin-bottom: 4.2rem;
}

.color-blue {
    color: #3055BF;
}


#page3-title {
    display: none;
    width: 90rem;
    position: absolute;
    text-align: right;
    right: calc(var(--toolbar-inset-right) + var(--toolbar-button-size) + var(--toolbar-copy-gap));
}

.page3-info {
    display: none;
    position: absolute;
    left: 10rem;
    width: 60rem;
    font-size: 3.2rem;
}
.page3-info>div {
    margin-bottom: 4.2rem;
}