:root {
    --widgets-size: var(--global-widget-size-normal);
    --widgets-gap: calc(35 / 24 * var(--global-widget-size-normal));
    --widgets-top: 0;
    --widgets-right: calc(13 / 12 * var(--global-widget-size-normal));
    --widgets-cnt: 9;
    --widgets-popup-width: calc(25 / 3 * var(--global-widget-size-normal));
    --widgets-popup-height: calc(145 / 24 * var(--global-widget-size-normal));
    --widgets-hide-transform-length: 62.5rem;
    --widgets-hsl-s: 66%;
    --widgets-hsl-l: 78%;
    --widgets-disappear-times: 2.5;
}

@media print {

    .page-right-widgets-container,
    .sakura {
        display: none;
    }

    #canvas {
        transform: translate(var(--widgets-hide-transform-length), 0);
    }
}

@media screen and (max-width:768px) {
    :root {
        --widgets-right: calc(10 / 12 * var(--global-widget-size-normal));
    }
}

.page-right-tools-widgets-span-disappear {
    transform: translate(calc(var(--widgets-disappear-times) * var(--widgets-right)), 0);
}

.page-right-tools-widgets-span {
    z-index: 999;
    transition-duration: var(--global-transition-duration);
    width: var(--widgets-size);
    height: var(--widgets-size);
    border-radius: var(--global-widget-border-radius);
    cursor: pointer;
    position: fixed;
    right: var(--widgets-right);
    top: calc(var(--widgets-top) + (100vh - var(--widgets-gap) * var(--widgets-cnt)) / 2 + var(--widgets-gap) * var(--widgets-index, 0));
}

.page-right-tools-widgets-span:hover {
    transform: scale(var(--global-transform-ratio-normal));
    background-color: var(--global-theme-color-blur);
}

.page-right-tools-widgets-span>svg {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--theme-color);
}

.page-right-popups {
    position: fixed;
    z-index: 998;
    transition-duration: var(--global-transition-duration-slow);
    right: calc(var(--widgets-right) + var(--widgets-gap));
    top: calc(var(--widgets-top) + (100vh - var(--widgets-gap) * var(--widgets-cnt)) / 2 + var(--widgets-gap) * var(--widgets-index, 0));
}

.page-right-popups-div {
    border: var(--global-border) var(--theme-color);
    border-radius: var(--global-el-border-radius);
    background-color: var(--global-theme-color-blur);
    backdrop-filter: var(--global-backdrop-filter);
    padding: calc(3 / 4 * var(--global-widget-size-normal));
    width: var(--widgets-popup-width);
}

.page-right-popups-disappear {
    transform: translate(calc(var(--widgets-disappear-times) * var(--widgets-gap) + var(--widgets-popup-width)), 0);
}

/* 主题切换 */
.theme-picker-preset-color-list-div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4375rem;
}

.theme-picker-preset-color-btn-div {
    width: 100%;
    aspect-ratio: var(--global-aspect-ratio-square);
    border-radius: var(--global-icon-border-radius);
    overflow: hidden;
    cursor: pointer;
    border: var(--global-border) var(--border-color);
    transition-duration: var(--global-transition-duration);
    position: relative;
    background: linear-gradient(135deg,
            var(--light-color) 0 50%,
            var(--dark-color) 50% 100%);
}

.theme-picker-preset-color-btn-div:hover,
.theme-picker-preset-color-btn-div.is-active {
    border-color: var(--theme-color);
    transform: scale(var(--global-transform-ratio-small));
}

.theme-picker-pattern-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.theme-picker-pattern-layer-dark {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.theme-picker-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    aspect-ratio: var(--global-aspect-ratio-square);
    pointer-events: none;
}

.theme-picker-dot-layer {
    position: absolute;
    border-radius: 50%;
}

.theme-picker-dot-glow-left {
    inset: 0;
    clip-path: inset(0 50% 0 0);
    background: var(--l-soft);
}

.theme-picker-dot-glow-right {
    inset: 0;
    clip-path: inset(0 0 0 50%);
    background: var(--d-soft);
}

.theme-picker-dot-core-left {
    inset: 7%;
    clip-path: inset(0 50% 0 0);
    background: var(--l);
}

.theme-picker-dot-core-right {
    inset: 7%;
    clip-path: inset(0 0 0 50%);
    background: var(--d);
}

/* 页面主题色 */
.color-picker-popup-div {
    height: var(--widgets-popup-height);
    text-align: center;
    padding: 0;
}

.color-picker-slider {
    width: 80%;
    margin-top: calc(5 / 12 * var(--global-widget-size-normal));
    border-radius: var(--global-el-border-radius);
    appearance: none;
    height: 0.3125rem;
    background-color: var(--theme-color);
}

.color-picker-preset-color-list-div {
    padding-bottom: 0.625rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4375rem;
    margin: calc(3 / 4 * var(--global-widget-size-normal)) calc(3 / 4 * var(--global-widget-size-normal)) 0;
}

.color-picker-preset-color-btn-div {
    width: 100%;
    aspect-ratio: var(--global-aspect-ratio-tall);
    border-radius: var(--global-icon-border-radius);
    cursor: pointer;
    border: var(--global-border) var(--border-color);
    transition-duration: var(--global-transition-duration);
    background-color: hsl(var(--widgets-hsl-h), var(--widgets-hsl-s), var(--widgets-hsl-l));
}

@supports (background: hsl(calc(attr(data-hue type(<number>)) * 1deg), 66%, 78%)) {
    .color-picker-preset-color-btn-div {
        background-color: hsl(calc(attr(data-hue type(<number>)) * 1deg), var(--widgets-hsl-s), var(--widgets-hsl-l));
    }
}

.color-picker-preset-color-btn-div:hover,
.color-picker-preset-color-btn-div.is-active {
    border-color: var(--theme-color);
    transform: scale(var(--global-transform-ratio-small));
}

/* 字号切换 */
.font-picker-preset-size-list-div {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4375rem;
}

.font-picker-preset-size-btn-div {
    width: 100%;
    padding-top: 0.2rem;
    aspect-ratio: var(--global-aspect-ratio-square);
    border-radius: var(--global-icon-border-radius);
    border: var(--global-border) var(--border-color);
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--theme-color);
    line-height: 1;
    font-weight: 600;
    transition-duration: var(--global-transition-duration);
}

.font-picker-preset-size-btn-div:hover,
.font-picker-preset-size-btn-div.is-active {
    background-color: var(--global-theme-color-blur);
    border-color: var(--theme-color);
    transform: scale(var(--global-transform-ratio-small));
}

/* Live 2d 小人 */
.canvas-hide {
    transform: translate(var(--widgets-hide-transform-length), 0);
}

/* 进度条 */
.read-progress {
    --p: 0;
    --thickness: 0.2rem;
    --ring-border: var(--theme-color);
    --bw: 1px;

    display: grid;
    place-items: center;
    flex: none;
    cursor: pointer;
    border-radius: var(--global-widget-border-radius);
    width: var(--widgets-size);
    height: var(--widgets-size);
}

@media screen and (max-width:768px) {
    .read-progress {
        --thickness: 0.15rem;
    }
}

.read-progress::before {
    cursor: pointer;
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        /* 外描边 */
        radial-gradient(farthest-side,
            transparent calc(100% - var(--bw)),
            var(--ring-border) calc(100% - var(--bw)),
            var(--ring-border) 100%),
        /* 内描边 */
        radial-gradient(farthest-side,
            transparent calc(100% - var(--thickness)),
            var(--ring-border) calc(100% - var(--thickness)),
            var(--ring-border) calc(100% - var(--thickness) + var(--bw)),
            transparent calc(100% - var(--thickness) + var(--bw))),
        /* 进度 + 轨道 */
        conic-gradient(var(--theme-color) calc(var(--p) * 1%), transparent 0);
    mask: radial-gradient(farthest-side,
            #0000 calc(100% - var(--thickness)),
            #000 calc(100% - var(--thickness)));
}

.read-progress .num {
    position: relative;
    font-size: 0.75rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    cursor: pointer;
    color: var(--theme-color);
}

.progress-num-hide {
    right: calc(-1 * var(--widgets-hide-transform-length));
}

/* 回顶部 */
#scroll-to-top-span {
    display: none;
}

#scroll-to-top-span.is-visible {
    display: block;
}

/* ==== 预设值 ==== */

:root {
    --widgets-preset-line-width-thin: 0.375rem;
    --widgets-preset-line-width-light: 0.5rem;
    --widgets-preset-line-gap: 1.875rem;
    --widgets-preset-svg-size: 0.75rem;
}

/* 主题切换 */
.theme-picker-preset-color-btn-div[data-theme="calligraphy"] .theme-picker-pattern-layer:not(.theme-picker-pattern-layer-dark) {
    background-image:
        linear-gradient(rgba(120, 160, 200, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 160, 200, .18) 1px, transparent 1px);
    background-size: var(--widgets-preset-line-width-thin) var(--widgets-preset-line-width-thin);
}

.theme-picker-preset-color-btn-div[data-theme="calligraphy"] .theme-picker-pattern-layer-dark {
    background-image:
        linear-gradient(rgba(120, 160, 200, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 160, 200, .1) 1px, transparent 1px);
    background-size: var(--widgets-preset-line-width-thin) var(--widgets-preset-line-width-thin);
}

.theme-picker-preset-color-btn-div[data-theme="typography"] .theme-picker-pattern-layer:not(.theme-picker-pattern-layer-dark) {
    background-image: radial-gradient(circle, rgba(180, 200, 220, .12) .7px, transparent 1.1px);
    background-size: var(--widgets-preset-line-width-thin) var(--widgets-preset-line-width-thin);
}

.theme-picker-preset-color-btn-div[data-theme="typography"] .theme-picker-pattern-layer-dark {
    background-image: radial-gradient(circle, rgba(80, 100, 120, .25) .7px, transparent 1.1px);
    background-size: var(--widgets-preset-line-width-thin) var(--widgets-preset-line-width-thin);
}

.theme-picker-preset-color-btn-div[data-theme="misty"] .theme-picker-pattern-layer:not(.theme-picker-pattern-layer-dark) {
    background-image:
        linear-gradient(rgba(120, 160, 200, .32) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 160, 200, .32) 1px, transparent 1px),
        linear-gradient(rgba(120, 160, 200, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 160, 200, .18) 1px, transparent 1px);
    background-size: var(--widgets-preset-line-gap) var(--widgets-preset-line-gap), var(--widgets-preset-line-gap) var(--widgets-preset-line-gap), var(--widgets-preset-line-width-thin) var(--widgets-preset-line-width-thin), var(--widgets-preset-line-width-thin) var(--widgets-preset-line-width-thin);
}

.theme-picker-preset-color-btn-div[data-theme="misty"] .theme-picker-pattern-layer-dark {
    background-image:
        linear-gradient(rgba(120, 160, 200, .20) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 160, 200, .20) 1px, transparent 1px),
        linear-gradient(rgba(120, 160, 200, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 160, 200, .10) 1px, transparent 1px);
    background-size: var(--widgets-preset-line-gap) var(--widgets-preset-line-gap), var(--widgets-preset-line-gap) var(--widgets-preset-line-gap), var(--widgets-preset-line-width-thin) var(--widgets-preset-line-width-thin), var(--widgets-preset-line-width-thin) var(--widgets-preset-line-width-thin);
}

.theme-picker-preset-color-btn-div[data-theme="sunlit"] .theme-picker-pattern-layer:not(.theme-picker-pattern-layer-dark) {
    background-image: repeating-linear-gradient(to bottom, transparent 0 var(--widgets-preset-line-width-light), rgba(180, 160, 130, .22) var(--widgets-preset-line-width-light) calc(var(--widgets-preset-line-width-light) + 1px));
}

.theme-picker-preset-color-btn-div[data-theme="sunlit"] .theme-picker-pattern-layer-dark {
    background-image: repeating-linear-gradient(to bottom, transparent 0 var(--widgets-preset-line-width-light), rgba(200, 180, 150, .10) var(--widgets-preset-line-width-light) calc(var(--widgets-preset-line-width-light) + 1px));
}

.theme-picker-preset-color-btn-div[data-theme="linen"] .theme-picker-pattern-layer:not(.theme-picker-pattern-layer-dark) {
    background-image:
        repeating-linear-gradient(45deg, rgba(160, 140, 110, .12) 0 1px, transparent 1px var(--widgets-preset-line-width-thin)),
        repeating-linear-gradient(-45deg, rgba(160, 140, 110, .12) 0 1px, transparent 1px var(--widgets-preset-line-width-thin));
}

.theme-picker-preset-color-btn-div[data-theme="linen"] .theme-picker-pattern-layer-dark {
    background-image:
        repeating-linear-gradient(45deg, rgba(180, 160, 120, .08) 0 1px, transparent 1px var(--widgets-preset-line-width-thin)),
        repeating-linear-gradient(-45deg, rgba(180, 160, 120, .08) 0 1px, transparent 1px var(--widgets-preset-line-width-thin));
}

.theme-picker-preset-color-btn-div[data-theme="cross"] .theme-picker-pattern-layer:not(.theme-picker-pattern-layer-dark) {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20d%3D%22M6%204v4M4%206h4%22%20fill%3D%22none%22%20stroke%3D%22%236a8aaa%22%20stroke-opacity%3D%220.30%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E");
    background-size: var(--widgets-preset-svg-size) var(--widgets-preset-svg-size);
}

.theme-picker-preset-color-btn-div[data-theme="cross"] .theme-picker-pattern-layer-dark {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20d%3D%22M6%204v4M4%206h4%22%20fill%3D%22none%22%20stroke%3D%22%237a9abb%22%20stroke-opacity%3D%220.26%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E");
    background-size: var(--widgets-preset-svg-size) var(--widgets-preset-svg-size);
}

/* 页面主题色：预设，兜底 */
.color-picker-preset-color-btn-div[data-hue="0"] {
    --widgets-hsl-h: 0deg;
}

.color-picker-preset-color-btn-div[data-hue="30"] {
    --widgets-hsl-h: 30deg;
}

.color-picker-preset-color-btn-div[data-hue="60"] {
    --widgets-hsl-h: 60deg;
}

.color-picker-preset-color-btn-div[data-hue="90"] {
    --widgets-hsl-h: 90deg;
}

.color-picker-preset-color-btn-div[data-hue="180"] {
    --widgets-hsl-h: 180deg;
}

.color-picker-preset-color-btn-div[data-hue="250"] {
    --widgets-hsl-h: 250deg;
}

.color-picker-preset-color-btn-div[data-hue="270"] {
    --widgets-hsl-h: 270deg;
}

.color-picker-preset-color-btn-div[data-hue="300"] {
    --widgets-hsl-h: 300deg;
}

.color-picker-preset-color-btn-div[data-hue="330"] {
    --widgets-hsl-h: 330deg;
}

.color-picker-preset-color-btn-div[data-hue="345"] {
    --widgets-hsl-h: 345deg;
}

/* 字号切换：预设 */
.font-picker-preset-size-btn-div[data-size-index="0"] {
    font-size: 0.625rem;
}

.font-picker-preset-size-btn-div[data-size-index="1"] {
    font-size: 0.75rem;
}

.font-picker-preset-size-btn-div[data-size-index="2"] {
    font-size: 0.875rem;
}

.font-picker-preset-size-btn-div[data-size-index="3"] {
    font-size: 1rem;
}

.font-picker-preset-size-btn-div[data-size-index="4"] {
    font-size: 1.125rem;
}