.skfb-mount,
.skfb-viewer,
.skfb-library,
.skfb-grid,
.skfb-dialog,
.skfb-panel,
.skfb-admin,
.skfb-editor {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, sans-serif;
    --skfb-ink: #142232;
    --skfb-muted: #526276;
    --skfb-line: #d9e2ea;
    --skfb-accent-color: var(--skfb-accent, #175bb5);
}
.skfb-viewer *,
.skfb-library *,
.skfb-grid *,
.skfb-panel *,
.skfb-editor *,
.skfb-admin * { box-sizing: border-box; }
.skfb-mount { min-height: var(--skfb-widget-height, var(--skfb-height, 460px)); }
.skfb-mount:has(.skfb-viewer) { min-height: 0; }
.skfb-placeholder,
.skfb-empty { display: grid; place-items: center; min-height: 4rem; color: #526276; }
.skfb-mount > .skfb-placeholder {
    min-height: inherit;
    background: #e9eef3;
    border-radius: var(--skfb-radius, 14px);
}
.skfb-viewer {
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
    width: 100%;
    height: var(--skfb-widget-height, var(--skfb-height, 460px));
    min-height: 230px;
    overflow: hidden;
    border: 1px solid var(--skfb-line);
    border-radius: var(--skfb-radius, 14px);
    background: white;
    color: var(--skfb-ink);
    font-size: 14px;
    line-height: 1.4;
}
.skfb-viewer:focus-visible,
.skfb-launch:focus-visible,
.skfb-dialog-close:focus-visible {
    outline: 3px solid var(--skfb-accent-color);
    outline-offset: 2px;
}
.skfb-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 42px;
    padding: 6px 14px;
    background: #fff;
    border-bottom: 1px solid var(--skfb-line);
    order: 0;
}
.skfb-viewer-title { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skfb-status { white-space: nowrap; color: var(--skfb-muted); font-variant-numeric: tabular-nums; font-size: .86em; }
.skfb-body { position: relative; min-height: 0; display: flex; flex: 1 1 auto; order: 2; overflow: hidden; }
.skfb-stage {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
    overflow-anchor: none;
    background: var(--skfb-bg) var(--skfb-bg-image, none) center / cover;
    perspective: 1600px;
    scrollbar-width: thin;
    touch-action: pan-y pinch-zoom;
}
.skfb-calendar .skfb-stage { touch-action: pan-x pinch-zoom; }
.skfb-viewer[data-mode="reader"] .skfb-stage { touch-action: pan-y pinch-zoom; }
.skfb-canvas-area {
    display: flex;
    width: max-content;
    min-width: 100%;
    min-height: 100%;
    padding: var(--skfb-pad-t) var(--skfb-pad-r) var(--skfb-pad-b) var(--skfb-pad-l);
}
.skfb-spread { position: relative; display: flex; margin: auto; align-items: center; flex: 0 0 auto; }
.skfb-viewer[data-mode="3d"] .skfb-spread { transform: perspective(1400px) rotateX(var(--skfb-up)) rotateY(var(--skfb-left)); }
.skfb-page-surface { position: relative; flex: none; background: #fff; }
.skfb-page-surface:first-child,
.skfb-reader-slot .skfb-surface { box-shadow: 0 9px 27px #17283b26; }
.skfb-page-surface:last-child { box-shadow: 0 9px 27px #17283b26; }
.skfb-viewer:is([data-mode="2d"], [data-mode="3d"]) .skfb-page-surface { outline: 2px solid var(--skfb-paper); }
.skfb-viewer:is([data-cover="plain"], [data-cover="ridge"], [data-cover="basic"]) .skfb-cover-page .skfb-page-surface { outline: 3px solid var(--skfb-cover); }
.skfb-viewer[data-cover="ridge"] .skfb-cover-page .skfb-page-surface::after,
.skfb-booklet .skfb-page-surface::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: 12px;
    content: "";
    background: linear-gradient(90deg, #131a29a6, #131a291a, transparent);
    pointer-events: none;
}
.skfb-rtl:is([data-cover="ridge"], .skfb-booklet) .skfb-page-surface::after { inset: 0 0 0 auto; transform: scaleX(-1); }
.skfb-rounded .skfb-surface,
.skfb-rounded .skfb-page-surface { border-radius: 5px; }
.skfb-spiral .skfb-two-pages::before,
.skfb-spiral .skfb-spread:not(.skfb-two-pages)::before {
    position: absolute;
    inset: 0 auto 0 50%;
    z-index: 4;
    width: 18px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(transparent 0 12px, var(--skfb-spiral) 12px 15px, transparent 15px 23px);
    content: "";
    pointer-events: none;
}
.skfb-spiral .skfb-spread:not(.skfb-two-pages)::before { left: 0; }
.skfb-calendar.skfb-spiral .skfb-spread::before {
    inset: 0 0 auto;
    height: 16px;
    width: auto;
    transform: translateY(-50%);
    background: repeating-linear-gradient(90deg, transparent 0 12px, var(--skfb-spiral) 12px 15px, transparent 15px 23px);
}
.skfb-surface {
    position: relative;
    overflow: hidden;
    flex: none;
    background: #fff;
    direction: ltr;
}
.skfb-surface > canvas,
.skfb-surface > img,
.skfb-turn-css > :is(img, canvas) { display: block; margin: 0; border-radius: 0; max-width: none; }
.skfb-surface > img,
.skfb-turn-css > img { position: absolute; top: 0; }
.skfb-image-description { max-width: 38ch; margin: auto; padding: .4rem .65rem; overflow-wrap: anywhere; font-size: .88em; }
.skfb-reader-stack { display: grid; justify-items: center; align-content: start; gap: 12px; margin-inline: auto; }
.skfb-reader-slot { background: #ffffff65; }
.skfb-page-error, .skfb-message { padding: 1rem; }
.skfb-message {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .5rem;
    text-align: center;
    color: var(--skfb-muted);
}
.skfb-viewer [hidden], .skfb-editor [hidden], .skfb-entry [hidden] { display: none !important; }
.skfb-password { display: flex; align-items: end; gap: .6rem; flex-wrap: wrap; }
.skfb-password label { display: grid; gap: .25rem; }
.skfb-toolbar {
    --skfb-tool-size: 38px;
    --skfb-dock-ink: #e3ebf2;
    --skfb-dock-muted: #acbac7;
    --skfb-dock-fill: #18232e;
    --skfb-dock-line: #d9e9ff24;
    position: relative;
    order: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: max-content;
    max-width: calc(100% - 18px);
    margin: 0 0 9px;
    padding: 4px;
    gap: 5px;
    border: 1px solid #ffffff30;
    border-radius: 15px;
    background: var(--skfb-dock-fill);
    box-shadow: 0 7px 19px #101b2c2e, 0 2px 4px #101b2c20;
    color: var(--skfb-dock-ink);
    z-index: 6;
    direction: ltr;
}
.skfb-toolbar > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; min-width: 0; gap: 2px; }
.skfb-toolbar > div:empty,
.skfb-toolbar > div:has(> .skfb-more[hidden]:only-child) { display: none; }
.skfb-toolbar > div:not(:empty) ~ div:not(:empty) { border-left: 1px solid var(--skfb-dock-line); padding-left: 5px; }
.skfb-toolbar[data-density="small"] { --skfb-tool-size: 40px; }
.skfb-toolbar:is([data-density="narrow"], [data-density="compact"]) { --skfb-tool-size: 44px; }
.skfb-viewer[data-controls="top"] .skfb-toolbar { order: 1; margin-block: 9px; }
.skfb-floating .skfb-toolbar {
    position: absolute;
    inset: auto 0 9px;
    margin: auto;
}
.skfb-floating[data-controls="top"] .skfb-toolbar { inset: 9px 0 auto; margin: auto; }
.skfb-floating[data-controls="top"]:not(.skfb-in-dialog) .skfb-toolbar { top: 51px; }
.skfb-floating .skfb-canvas-area { padding-bottom: calc(var(--skfb-pad-b) + var(--skfb-toolbar-space, 0px)); }
.skfb-floating[data-controls="top"] .skfb-canvas-area {
    padding-bottom: var(--skfb-pad-b);
    padding-top: calc(var(--skfb-pad-t) + var(--skfb-toolbar-space, 0px));
}
.skfb-viewer button,
.skfb-viewer a.skfb-tool,
.skfb-more > summary {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font: inherit;
    color: var(--skfb-ink);
    background: #fff;
    border: 1px solid var(--skfb-line);
    border-radius: 7px;
    box-shadow: none;
    line-height: 1.2;
    padding: 6px 10px;
}
.skfb-viewer :is(button, a, input, summary):focus-visible { outline: 2px solid var(--skfb-accent-color); outline-offset: 1px; }
.skfb-viewer :is(button, a.skfb-tool, summary):hover,
.skfb-viewer button[aria-pressed="true"],
.skfb-viewer button[aria-current="page"] { color: var(--skfb-accent-color); background: #eaf3ff; }
.skfb-viewer button:disabled { cursor: default; opacity: .34; }
.skfb-viewer :is(.skfb-tool, .skfb-more > summary) {
    font-size: 1.18rem;
    border: 0;
    min-width: 34px;
    height: 35px;
    padding: 0 4px;
    flex: none;
}
.skfb-viewer .skfb-toolbar :is(.skfb-tool, .skfb-more > summary) {
    width: var(--skfb-tool-size);
    min-width: var(--skfb-tool-size);
    height: var(--skfb-tool-size);
    padding: 0;
    border-radius: 9px;
    color: var(--skfb-dock-ink);
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}
.skfb-viewer .skfb-toolbar :is(.skfb-tool, .skfb-more > summary):is(:hover, :focus-visible):not(:disabled),
.skfb-viewer .skfb-toolbar :is(.skfb-tool[aria-pressed="true"], .skfb-more[open] > summary) {
    color: #fff;
    background: #d7e8ff23;
}
.skfb-viewer .skfb-toolbar :is(.skfb-tool, summary, input):focus-visible {
    outline-color: #a1caff;
    outline-offset: -2px;
}
.skfb-tool-icon {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.skfb-tool-label { display: none; }
.skfb-viewer .skfb-counter {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px 2px 3px;
    margin-inline: 3px;
    border: 1px solid var(--skfb-dock-line);
    border-radius: 8px;
    background: #101923;
    white-space: nowrap;
    color: var(--skfb-dock-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.skfb-viewer .skfb-counter input {
    width: max(27px, calc(var(--skfb-page-digits) * 1ch + 11px));
    min-width: 0;
    height: 27px;
    padding: 1px 3px;
    border: 0;
    border-radius: 5px;
    background: #314354;
    color: #fff;
    font-weight: 650;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.skfb-viewer .skfb-counter input:hover { background: #3a5166; }
.skfb-counter input::-webkit-inner-spin-button { appearance: none; }
.skfb-viewer input {
    color: var(--skfb-ink);
    background: #fff;
    border: 1px solid var(--skfb-line);
    font: inherit;
    border-radius: 6px;
    padding: 6px;
    min-width: 0;
}
.skfb-more > summary { list-style: none; }
.skfb-more > summary::-webkit-details-marker { display: none; }
.skfb-more-options {
    display: grid;
    position: absolute;
    inset: auto 0 calc(100% + 8px) auto;
    width: max-content;
    min-width: 208px;
    max-width: min(248px, calc(100vw - 20px));
    max-height: min(380px, 54dvh, var(--skfb-menu-height, 380px));
    overflow: auto;
    overscroll-behavior: contain;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--skfb-dock-line);
    border-radius: 12px;
    background: var(--skfb-dock-fill);
    box-shadow: 0 10px 24px #101b2c4d;
}
.skfb-viewer[data-controls="top"] .skfb-more-options { inset-block: calc(100% + 8px) auto; }
.skfb-toolbar:not([data-density="wide"]) .skfb-more-options { left: 50%; right: auto; translate: -50% 0; }
.skfb-viewer .skfb-toolbar .skfb-more-options .skfb-tool { width: 100%; justify-content: start; gap: 10px; padding-inline: 9px; }
.skfb-more-options .skfb-tool-label { display: block; min-width: 0; font-size: 13px; text-align: start; overflow-wrap: anywhere; }
.skfb-sidebar { display: flex; flex-direction: column; width: min(260px, 44%); flex: 0 0 auto; background: white; border-right: 1px solid var(--skfb-line); z-index: 5; }
.skfb-sidebar-overlay .skfb-sidebar { position: absolute; inset: 0 auto 0 0; width: min(300px, 88%); box-shadow: 0 4px 16px #1528402b; }
.skfb-side-header { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: 4px 8px; border-bottom: 1px solid var(--skfb-line); }
.skfb-viewer .skfb-side-header h3 { margin: 0; font: 650 .92rem/1.3 system-ui, sans-serif; }
.skfb-side-content { overflow: auto; padding: 8px; flex: 1; min-height: 0; }
.skfb-thumbnails { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(90px, 100%), 1fr)); gap: 7px; }
.skfb-viewer .skfb-thumb-item { display: grid; text-align: center; padding: 3px; width: 100%; justify-content: stretch; gap: 4px; min-height: 88px; }
.skfb-thumb-preview { display: grid; place-items: center; overflow: hidden; min-height: 64px; background: #edf2f7; }
.skfb-outline { list-style: none; padding: 0 0 0 8px; margin: 0; }
.skfb-outline li { margin: 4px 0; }
.skfb-viewer .skfb-outline button { display: inline; text-align: start; border: 0; padding: 4px 5px; }
.skfb-search-form { display: flex; flex-wrap: wrap; gap: 4px; }
.skfb-search-form input { width: 100%; }
.skfb-search-results p { font-size: 12px; }
.skfb-viewer .skfb-search-result { display: grid; width: 100%; gap: 3px; margin: 4px 0; text-align: start; justify-content: start; }
.skfb-search-result span { font-size: .88em; overflow-wrap: anywhere; color: var(--skfb-muted); }
.skfb-viewer .skfb-share-link { width: 100%; margin-block: 4px 7px; }
.skfb-share-channels { margin-top: 10px; display: flex; gap: 6px 8px; flex-wrap: wrap; }
.skfb-viewer a:not(.skfb-tool) { color: var(--skfb-accent-color); }

.skfb-surface .skfb-text-layer {
    position: absolute;
    inset: 0;
    overflow: clip;
    line-height: 1;
    text-align: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-size-adjust: none;
    transform-origin: 0 0;
    --min-font-size: 1;
}
.skfb-text-layer :is(span, br) {
    position: absolute;
    color: transparent;
    white-space: pre;
    transform-origin: 0 0;
    user-select: text;
    cursor: text;
}
.skfb-text-layer > span:not(.markedContent),
.skfb-text-layer .markedContent span:not(.markedContent) {
    font-size: calc(var(--total-scale-factor) * var(--min-font-size) * var(--font-height, 0));
    transform: rotate(var(--rotate, 0deg)) scaleX(var(--scale-x, 1)) scale(calc(1 / var(--min-font-size)));
}
.skfb-text-layer .markedContent { display: contents; }
.skfb-text-layer ::selection { background: #2783dd55; color: transparent; }
.skfb-viewer .skfb-surface > .skfb-hotspot {
    position: absolute;
    z-index: 2;
    background: color-mix(in srgb, var(--skfb-link-bg) var(--skfb-link-opacity), transparent);
    border: 0;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
}
.skfb-viewer .skfb-surface > .skfb-hotspot:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--skfb-link) var(--skfb-link-hover), transparent);
    outline: 1px solid var(--skfb-link);
}
.skfb-webgl, .skfb-turn-css { position: absolute; z-index: 4; pointer-events: none; }
.skfb-webgl { display: block; inset: 0; }
.skfb-turn-css { overflow: hidden; background: #fff; box-shadow: 0 7px 24px #11223c35; }
.skfb-viewer:fullscreen,
.skfb-viewer.skfb-fullscreen { height: 100dvh; width: 100vw; border: 0; border-radius: 0; }
.skfb-viewer.skfb-fullscreen { position: fixed; inset: 0; z-index: 2147483600; }
.skfb-dialog {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: transparent;
    color: white;
}
.skfb-dialog::backdrop { background: var(--skfb-popup, #142232dd); }
.skfb-dialog > div { display: grid; place-items: center; height: 100%; }
.skfb-dialog .skfb-viewer { height: min(100dvh, var(--skfb-widget-height, 100dvh)); }
.skfb-dialog-close {
    position: absolute;
    z-index: 10;
    right: 11px;
    top: 11px;
    width: 38px;
    height: 38px;
    border: 1px solid #ffffff55;
    border-radius: 50%;
    background: #17283c;
    color: white;
    cursor: pointer;
    font: 25px/1 system-ui, sans-serif;
    padding: 0;
}
.skfb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(158px, 100%), 1fr));
    gap: clamp(12px, 2vw, 22px);
}
.skfb-collection { container: skfb-collection / inline-size; }
.skfb-collection > .skfb-grid {
    --skfb-columns: var(--skfb-columns-desktop, 5);
    grid-template-columns: repeat(var(--skfb-columns), minmax(0, 1fr));
}
@container skfb-collection (max-width: 850px) {
    .skfb-collection > .skfb-grid { --skfb-columns: var(--skfb-columns-tablet, 3); }
}
@container skfb-collection (max-width: 520px) {
    .skfb-collection > .skfb-grid { --skfb-columns: var(--skfb-columns-mobile, 2); }
}
.skfb-entry { min-width: 0; }
.skfb-entry button.skfb-launch,
.skfb-launch[role="button"] {
    font: 600 .92rem/1.35 system-ui, sans-serif;
    cursor: pointer;
    border: 0;
    box-shadow: none;
}
.skfb-entry button.skfb-launch-button {
    padding: .72rem 1.05rem;
    border-radius: 8px;
    background: var(--skfb-accent, #175bb5);
    color: white;
}
.skfb-entry button.skfb-launch-link { padding: 0; color: var(--skfb-accent, #175bb5); background: transparent; text-decoration: underline; }
.skfb-entry button.skfb-launch-thumb {
    display: grid;
    width: min(100%, 230px);
    padding: 0;
    gap: 0;
    text-align: start;
    background: #fff;
    color: #142232;
    overflow: hidden;
    border: 1px solid #d9e2ea;
    border-radius: 11px;
}
.skfb-grid .skfb-entry button.skfb-launch-thumb { width: 100%; height: 100%; grid-template-rows: auto 1fr; }
.skfb-card-art {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 5;
    background: radial-gradient(at 10% 0%, #4275a8, transparent 74%), linear-gradient(140deg, #203a5b, #17243a);
    overflow: hidden;
}
.skfb-card-art img { display: block; width: 100%; height: 100%; object-fit: contain; background: #ebf0f5; }
.skfb-card-format { color: white; font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: .06em; }
.skfb-card-play {
    position: absolute;
    display: grid;
    place-items: center;
    inset: auto .5rem .5rem auto;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #142232d9;
    color: white;
    font-size: 1.15rem;
}
.skfb-launch-thumb .skfb-entry-title { padding: .62rem .7rem; overflow-wrap: anywhere; }
.skfb-entry [aria-current="true"],
.skfb-entry button.skfb-launch-thumb:hover { outline: 2px solid var(--skfb-accent, #175bb5); outline-offset: 1px; }
.skfb-shelf {
    --skfb-shelf-inset: clamp(9px, 2.4cqi, 28px);
    --skfb-shelf-gap: clamp(8px, 2cqi, 24px);
    --skfb-shelf-slot: calc((100cqi - 2 * var(--skfb-shelf-inset) - (var(--skfb-columns) - 1) * var(--skfb-shelf-gap)) / var(--skfb-columns));
    --skfb-shelf-cover: clamp(50px, calc(var(--skfb-shelf-slot) * 1.27), 250px);
    --skfb-shelf-heading: 0px;
    --skfb-shelf-board: clamp(9px, 1.4cqi, 16px);
    --skfb-shelf-caption: 3.35rem;
    --skfb-shelf-top: calc(var(--skfb-shelf-heading) + var(--skfb-shelf-cover));
    --skfb-shelf-bottom: calc(var(--skfb-shelf-top) + var(--skfb-shelf-board));
    --skfb-shelf-row: calc(var(--skfb-shelf-bottom) + var(--skfb-shelf-caption));
    --skfb-shelf-row-gap: clamp(12px, 2.2cqi, 28px);
    --skfb-shelf-step: calc(var(--skfb-shelf-row) + var(--skfb-shelf-row-gap));
    position: relative;
    isolation: isolate;
    padding-inline: var(--skfb-shelf-inset);
    grid-auto-rows: var(--skfb-shelf-row);
    gap: var(--skfb-shelf-row-gap) var(--skfb-shelf-gap);
}
.skfb-shelf:has(.skfb-title-top) { --skfb-shelf-heading: var(--skfb-shelf-caption); }
.skfb-shelf::before,
.skfb-shelf::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.skfb-shelf::before {
    background-image: linear-gradient(to bottom, transparent var(--skfb-shelf-top),
        #ffefd442 var(--skfb-shelf-top), #ffe2b62b calc(var(--skfb-shelf-top) + 2px),
        #5b311a26 calc(var(--skfb-shelf-top) + 3px), #371b1059 var(--skfb-shelf-bottom), transparent var(--skfb-shelf-bottom)),
        var(--skfb-shelf-texture, repeating-linear-gradient(2deg, #b48b63 0 3px, #ae835b 4px 6px, #b9926d 7px 10px));
    background-size: 100% var(--skfb-shelf-step), auto;
    mask-image: repeating-linear-gradient(to bottom, transparent 0 var(--skfb-shelf-top),
        #000 var(--skfb-shelf-top) var(--skfb-shelf-bottom), transparent var(--skfb-shelf-bottom) var(--skfb-shelf-step));
}
.skfb-shelf::after {
    background-image: repeating-linear-gradient(to bottom, transparent 0 var(--skfb-shelf-bottom),
        #4a321d2e var(--skfb-shelf-bottom), transparent calc(var(--skfb-shelf-bottom) + 8px) var(--skfb-shelf-step));
}
.skfb-shelf .skfb-entry button.skfb-launch-thumb {
    position: relative;
    justify-items: center;
    grid-template-rows: var(--skfb-shelf-heading) var(--skfb-shelf-cover) var(--skfb-shelf-board) var(--skfb-shelf-caption);
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    text-align: center;
    text-transform: none;
    outline: none;
}
.skfb-shelf .skfb-card-art {
    grid-row: 2;
    align-self: end;
    width: max-content;
    max-width: calc(100% - 6px);
    aspect-ratio: auto;
    border-radius: 2px 4px 3px 2px;
    overflow: visible;
    box-shadow: 1px 0 #714e39, 3px 0 #e9dfcc, 5px 0 #a78260, 5px 6px 9px #3521104a;
    transition: transform .18s ease, box-shadow .18s ease;
}
.skfb-shelf .skfb-card-art::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: min(15%, 18px);
    border-radius: inherit;
    background: linear-gradient(90deg, #0d142b46, #0d142b20 26%, #fff3 33%, transparent 78%);
    pointer-events: none;
}
.skfb-shelf .skfb-card-art img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: var(--skfb-shelf-cover);
    border-radius: inherit;
    background: transparent;
}
.skfb-shelf .skfb-card-format { padding: .4rem; }
.skfb-shelf .skfb-card-art:has(.skfb-card-format) { width: min(85%, 140px); height: var(--skfb-shelf-cover); }
.skfb-shelf .skfb-card-play { width: 24px; height: 24px; inset: auto .4rem .4rem auto; font-size: .95rem; z-index: 1; }
.skfb-shelf .skfb-entry-title {
    grid-row: 4;
    align-self: start;
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 0;
    margin: .55rem .15rem 0;
    font-size: clamp(.76rem, 2.35cqi, .91rem);
    line-height: 1.28;
}
.skfb-shelf button.skfb-title-top .skfb-entry-title { grid-row: 1; align-self: center; margin-top: 0; }
.skfb-shelf .skfb-launch-thumb:focus-visible .skfb-card-art { outline: 2px solid var(--skfb-accent, #175bb5); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .skfb-shelf .skfb-launch-thumb:hover .skfb-card-art { transform: translateY(-4px); box-shadow: 1px 0 #714e39, 3px 0 #e9dfcc, 5px 0 #a78260, 6px 10px 13px #3521104a; }
}
.skfb-switcher { display: grid; gap: 1rem; }
.skfb-switcher .skfb-grid { grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr)); }
.skfb-archive { margin: 1.5rem auto; width: min(calc(100% - 2rem), 1180px); }
.skfb-single { margin: clamp(1rem, 4vw, 3rem) auto; width: min(calc(100% - 2rem), 1280px); }
.skfb-single-header { margin-bottom: 1rem; }
.skfb-single-header a { color: var(--skfb-accent, #175bb5); font-size: .875rem; }
.skfb-single-header h1 { margin: .35rem 0 0; }
.skfb-single-content > .skfb-mount + * { margin-top: 1.25rem; }
.skfb-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin: 0 0 1rem; }
.skfb-filters label { display: grid; gap: 4px; }
.skfb-filters :is(input, select, button), .skfb-panel-form button { padding: .5rem .65rem; border-radius: 6px; border: 1px solid #b9c8d8; font: inherit; }
.skfb-filters button, .skfb-panel-form button[type="submit"] { background: var(--skfb-accent-color); color: white; cursor: pointer; }
.skfb-filters > button { position: static; min-height: 2.55rem; margin: 0; }
.skfb-pagination { display: flex; justify-content: center; gap: .7rem; margin-top: 1rem; }
.skfb-panel { display: grid; grid-template-columns: minmax(150px, .37fr) minmax(0, 1fr); gap: 18px; }
.skfb-panel h2 { margin-top: 0; }
.skfb-panel-list, .skfb-panel-form {
    min-width: 0;
    border: 1px solid #d9e2ea;
    background: #fff;
    color: #142232;
    padding: clamp(10px, 2vw, 21px);
    border-radius: 10px;
}
.skfb-panel-list > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; padding: 6px 0; border-bottom: 1px solid #edf1f5; }
.skfb-panel-list small { color: #526276; }
.skfb-panel .skfb-notice { grid-column: 1 / -1; margin: 0; }
.skfb-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); align-items: end; gap: 10px 14px; margin-block: 10px; }
.skfb-field { display: grid; gap: 4px; min-width: 0; margin-block: 6px; }
.skfb-field input, .skfb-field textarea, .skfb-field select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.skfb-panel-form .skfb-field :is(input, textarea, select) { border: 1px solid #b9c8d8; padding: .4rem .6rem; border-radius: 6px; font: inherit; }
.skfb-editor details, .skfb-admin details { padding: 8px; border: 1px solid #d9e2ea; border-radius: 6px; margin-bottom: 6px; }
.skfb-editor summary, .skfb-admin summary { cursor: pointer; font-weight: 600; }

@media (max-width: 650px) {
    .skfb-viewer .skfb-sidebar { position: absolute; inset: 0 auto 0 0; width: min(245px, 72%); box-shadow: 0 4px 16px #1528402b; }
    .skfb-panel { grid-template-columns: 1fr; }
}

.skfb-viewer .skfb-inline-annotation { position: absolute; z-index: 3; overflow: auto; }
.skfb-entry button.skfb-title-top .skfb-entry-title { grid-row: 1; }
.skfb-entry button:is(.skfb-title-fixed, .skfb-title-hover) { position: relative; }
.skfb-entry button:is(.skfb-title-fixed, .skfb-title-hover) .skfb-entry-title {
    position: absolute;
    inset: auto 0 0;
    background: #142232e8;
    color: #fff;
}
@media (hover: hover) {
    .skfb-entry button.skfb-title-hover .skfb-entry-title { opacity: 0; }
    .skfb-entry button.skfb-title-hover:is(:hover, :focus-visible) .skfb-entry-title { opacity: 1; }
}
.skfb-shelf .skfb-entry button:is(.skfb-title-fixed, .skfb-title-hover) .skfb-entry-title {
    inset: auto .25rem calc(var(--skfb-shelf-caption) + var(--skfb-shelf-board) + .25rem);
    border-radius: 4px;
    padding: .3rem;
}

.skfb-viewer:is([data-mode="3d"], [data-mode="2d"]) .skfb-stage {
    background-color: var(--skfb-bg);
    background-image: var(--skfb-bg-image, radial-gradient(ellipse at 50% 36%, #ffffff65, transparent 80%));
}
.skfb-viewer:is([data-mode="3d"], [data-mode="2d"]) .skfb-spread {
    isolation: isolate;
}
.skfb-viewer:is([data-mode="3d"], [data-mode="2d"]) .skfb-page-surface {
    background: transparent;
    outline: 0;
    box-shadow: none;
}
.skfb-page-surface[data-side="left"] > .skfb-surface { margin-left: auto; }
.skfb-page-surface[data-side="right"] > .skfb-surface { margin-right: auto; }
.skfb-viewer:is([data-mode="3d"], [data-mode="2d"]) .skfb-two-pages .skfb-surface::after {
    position: absolute;
    content: "";
    inset: 0 0 0 auto;
    width: min(12%, 37px);
    z-index: 3;
    background: linear-gradient(to left, #1823306b, #1823301f 43%, transparent);
    opacity: calc(min(1, .38 + var(--skfb-shadow)) * var(--skfb-fold-exposure, 1));
    pointer-events: none;
}
.skfb-viewer:is([data-mode="3d"], [data-mode="2d"]) .skfb-two-pages [data-side="right"] .skfb-surface::after {
    inset: 0 auto 0 0;
    transform: scaleX(-1);
}
.skfb-viewer:is([data-mode="3d"], [data-mode="2d"]) .skfb-spread[data-binding-side] .skfb-page-surface::before {
    position: absolute;
    inset: auto 2px -2px;
    height: 2px;
    z-index: -1;
    content: "";
    background: linear-gradient(to bottom, color-mix(in srgb, var(--skfb-paper), #645d50 28%), transparent);
}
.skfb-paper-ground {
    position: absolute;
    inset: 0;
    border-radius: 1px;
    z-index: -2;
    opacity: var(--skfb-ground-strength, 1);
    box-shadow: 0 4px 14px #1c28342a, 0 12px 32px #1d28311f;
    pointer-events: none;
}
.skfb-page-motion .skfb-leaf-hidden > .skfb-paper-ground {
    visibility: visible;
    opacity: var(--skfb-moving-ground, var(--skfb-ground-strength, 1));
}
.skfb-viewer:is([data-mode="3d"], [data-mode="2d"]) .skfb-cover-page .skfb-page-surface { outline: none; }
.skfb-viewer:is([data-mode="3d"], [data-mode="2d"]) .skfb-canvas-area { position: relative; z-index: 1; }
.skfb-stage .skfb-turn-underlay {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.skfb-stage .skfb-turn-underlay .skfb-canvas-area { height: 100%; }
.skfb-leaf-hidden { visibility: hidden; }
.skfb-turn-viewport .skfb-webgl { z-index: 4; }
.skfb-turn-viewport .skfb-turn-shadow {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    border-radius: 38%;
    background: radial-gradient(ellipse, #10172288, #10172234 42%, transparent 73%);
    filter: blur(6px);
}
.skfb-turn-viewport .skfb-turn-css {
    overflow: visible;
    background: transparent;
    box-shadow: none;
    transform-style: preserve-3d;
}
.skfb-turn-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
}
.skfb-turn-face::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--skfb-binding-size, 0px);
    z-index: 1;
    background: linear-gradient(var(--skfb-binding-direction, to right), #1823306b, #1823301f 43%, transparent);
    opacity: var(--skfb-binding-opacity, 0);
}
.skfb-turn-face[data-binding-edge="right"]::before {
    inset: 0 0 0 auto;
    --skfb-binding-direction: to left;
}
.skfb-turn-face:is([data-binding-edge="top"], [data-binding-edge="bottom"])::before {
    inset: 0 0 auto;
    width: auto;
    height: var(--skfb-binding-size, 0px);
    --skfb-binding-direction: to bottom;
}
.skfb-turn-face[data-binding-edge="bottom"]::before {
    inset: auto 0 0;
    --skfb-binding-direction: to top;
}
.skfb-turn-face::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, #10141e, transparent 83%);
    opacity: var(--skfb-fold-tone, 0);
}
.skfb-turn-verso { transform: rotateY(180deg); }
.skfb-turn-art { position: absolute; inset: 0; margin: auto; overflow: hidden; }
.skfb-turn-art > :is(img, canvas) { position: absolute; top: 0; display: block; max-width: none; }
.skfb-viewer[data-grabbable="true"] .skfb-surface { cursor: grab; }
.skfb-viewer[data-grabbable="true"] .skfb-text-layer { cursor: grab; }
.skfb-previewing { cursor: grab; }
.skfb-grabbing, .skfb-grabbing * { cursor: grabbing !important; user-select: none !important; }

.skfb-calendar:is([data-mode="3d"], [data-mode="2d"]) .skfb-two-pages { flex-direction: column; }
.skfb-calendar:is([data-mode="3d"], [data-mode="2d"]) .skfb-two-pages .skfb-page-surface {
    display: flex;
    align-items: center;
    justify-content: center;
}
.skfb-calendar:is([data-mode="3d"], [data-mode="2d"]) .skfb-two-pages [data-side="left"] { align-items: flex-end; }
.skfb-calendar:is([data-mode="3d"], [data-mode="2d"]) .skfb-two-pages [data-side="right"] { align-items: flex-start; }
.skfb-calendar:is([data-mode="3d"], [data-mode="2d"]) .skfb-two-pages .skfb-surface { margin: 0; }
.skfb-calendar:is([data-mode="3d"], [data-mode="2d"]) .skfb-two-pages .skfb-surface::after {
    inset: auto 0 0;
    height: min(12%, 32px);
    width: auto;
    background: linear-gradient(to top, #1823306b, #1823301f 43%, transparent);
}
.skfb-calendar:is([data-mode="3d"], [data-mode="2d"]) .skfb-two-pages [data-side="right"] .skfb-surface::after {
    inset: 0 0 auto;
    transform: scaleY(-1);
}
html:has(.skfb-dialog[open]) { overflow: hidden; }
.skfb-in-dialog {
    background: var(--skfb-bg);
    border: 0;
    border-radius: 0;
}
.skfb-in-dialog .skfb-viewer-header {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}
.skfb-viewer.skfb-in-dialog button.skfb-edge-nav {
    position: absolute;
    z-index: 5;
    top: 50%;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid #ffffffc9;
    border-radius: 50%;
    background: #f8fbfcf2;
    color: #223344;
    box-shadow: 0 4px 14px #1c2c4128, 0 1px 3px #1c2c4120;
    transform: translateY(-50%);
    transition: color .16s, background-color .16s, box-shadow .16s;
}
.skfb-edge-nav .skfb-tool-icon { width: 23px; height: 23px; }
.skfb-viewer.skfb-in-dialog button.skfb-edge-nav:hover {
    background: #243545;
    color: #fff;
    box-shadow: 0 6px 18px #1c2c4144;
}
.skfb-in-dialog .skfb-edge-nav[data-edge="negative"] { left: clamp(10px, 2vw, 26px); }
.skfb-in-dialog .skfb-edge-nav[data-edge="positive"] { right: clamp(10px, 2vw, 26px); }
.skfb-calendar.skfb-in-dialog button.skfb-edge-nav {
    top: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}
.skfb-calendar.skfb-in-dialog .skfb-edge-nav[data-edge="negative"] { top: 9px; }
.skfb-calendar.skfb-in-dialog .skfb-edge-nav[data-edge="positive"] { bottom: 9px; }
.skfb-in-dialog button.skfb-edge-nav:disabled { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .skfb-viewer.skfb-in-dialog button.skfb-edge-nav { transition: none; } }
.skfb-calendar.skfb-spiral .skfb-two-pages::before { top: 50%; }
.skfb-message { z-index: 2; }
.skfb-viewer[data-fitted="true"] .skfb-stage { overflow: clip; }
.skfb-turn-plane { position: absolute; inset: 0; z-index: 4; transform-style: preserve-3d; pointer-events: none; }

.skfb-cover-window {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    perspective: 1600px;
}
.skfb-cover-contact,
.skfb-cover-joint {
    position: absolute;
    pointer-events: none;
    z-index: 3;
}
.skfb-cover-contact { z-index: 2; }
.skfb-cover-shadow-shape { position: absolute; inset: 0; background: #131d2c; }
.skfb-cover-joint {
    border-radius: 2px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--skfb-cover), #111827 35%), var(--skfb-cover) 58%, color-mix(in srgb, var(--skfb-cover), white 22%));
    box-shadow: 0 0 1px #1c263666;
}
.skfb-cover-joint.skfb-joint-horizontal {
    background: linear-gradient(180deg, color-mix(in srgb, var(--skfb-cover), #111827 35%), var(--skfb-cover) 58%, color-mix(in srgb, var(--skfb-cover), white 22%));
}
.skfb-viewer[data-cover="none"] .skfb-cover-joint { visibility: hidden; }
.skfb-viewer:not([data-cover="none"]) .skfb-spread[data-binding-side] > .skfb-page-surface::after {
    position: absolute;
    z-index: 3;
    content: "";
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(to right, #1823306b, #1823301f 43%, transparent);
    opacity: 0.7;
    pointer-events: none;
}
.skfb-viewer:not([data-cover="none"]) .skfb-spread[data-binding-side="end"] > .skfb-page-surface::after {
    inset: 0 0 0 auto;
    transform: scaleX(-1);
}
.skfb-viewer.skfb-calendar:not([data-cover="none"]) .skfb-spread[data-binding-side] > .skfb-page-surface::after {
    inset: 0 0 auto;
    width: auto;
    height: 6px;
    background: linear-gradient(to bottom, #1823306b, #1823301f 43%, transparent);
}
.skfb-viewer.skfb-calendar:not([data-cover="none"]) .skfb-spread[data-binding-side="end"] > .skfb-page-surface::after {
    inset: auto 0 0;
    transform: scaleY(-1);
}
.skfb-turn-viewport {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
    perspective: 1600px;
}
.skfb-viewer:not(.skfb-in-dialog) .skfb-viewer-header { z-index: 6; }