.portal-body *,
.portal-body *::before,
.portal-body *::after {
    box-sizing: border-box;
}

html {
    scroll-padding-top: var(--op-nav-height);
}

body.portal-body {
    min-width: 320px;
    margin: 0;
    background: var(--op-color-canvas);
    color: var(--op-color-text);
    font-family: "Source Han Sans SC", "Noto Sans SC", "Source Han Sans", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.portal-body main {
    min-height: calc(100vh - var(--op-nav-height));
}

.portal-body a,
.portal-body button,
.portal-body input,
.portal-body select,
.portal-body textarea,
.portal-body summary {
    font: inherit;
}

.portal-body button,
.portal-body [role="button"],
.portal-body summary {
    touch-action: manipulation;
}

.portal-body :focus-visible {
    outline: 2px solid var(--op-color-focus);
    outline-offset: 2px;
}

.portal-body :focus:not(:focus-visible) {
    outline: none;
}

.portal-body input:focus,
.portal-body input:focus-visible,
.portal-body textarea:focus,
.portal-body textarea:focus-visible,
.portal-body select:focus,
.portal-body select:focus-visible {
    outline: none;
    box-shadow: none;
}

.portal-body img,
.portal-body svg {
    max-width: 100%;
}

.portal-body [hidden] {
    display: none !important;
}

.op-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .portal-body *,
    .portal-body *::before,
    .portal-body *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}