:root {
    --site-rail-width: 58px;
    --site-bg: #0b0e10;
    --site-surface: rgba(16, 19, 21, 0.82);
    --site-line: rgba(242, 244, 245, 0.16);
    --site-text: #f2f4f5;
    --site-muted: rgba(242, 244, 245, 0.58);
    --site-accent: #f04434;

    /* 共通デザイン言語：無彩色のみで階調をつくり、アクセント赤はホバーの1px罫線に限定する */
    --site-soft: rgba(242, 244, 245, 0.44);
    --site-dim: rgba(242, 244, 245, 0.28);
    --site-hairline: rgba(242, 244, 245, 0.08);
    --site-rule: rgba(242, 244, 245, 0.2);
    --site-panel: rgba(15, 18, 20, 0.55);

    /* セクション見出しの共通スケール */
    --site-label-size: 0.55rem;
    --site-label-track: 0.28em;
}

html {
    color-scheme: dark;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(242, 244, 245, 0.22) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(242, 244, 245, 0.22);
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(242, 244, 245, 0.34);
    background-clip: content-box;
}

.site-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40000;
    width: 20px;
    height: 20px;
    display: none;
    border-radius: 50%;
    outline: 1px solid transparent;
    background: rgba(255, 255, 255, 0.8);
    box-shadow:
        0 0 10px 2px rgba(255, 255, 255, 0.6),
        0 0 20px 5px rgba(255, 255, 255, 0.3);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0);
    will-change: left, top, opacity;
}

@media (hover: hover) and (pointer: fine) {
    html.site-custom-cursor,
    html.site-custom-cursor *,
    html.site-custom-cursor .site-rail,
    html.site-custom-cursor .site-rail * {
        cursor: none !important;
    }

    .site-cursor {
        display: block;
    }

    body.site-shell-active #cursor {
        display: none !important;
    }
}

@media (hover: none), (pointer: coarse) {
    .site-cursor {
        display: none !important;
    }
}

.site-rail {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 30000;
    width: var(--site-rail-width);
    height: 100dvh;
    display: flex;
    align-items: center;
    border-left: 1px solid var(--site-line);
    background: rgba(10, 12, 14, 0.88);
    box-shadow: -18px 0 44px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.site-rail__link {
    position: relative;
    width: 100%;
    display: grid;
    place-items: center;
    color: rgba(242, 244, 245, 0.72);
    text-decoration: none;
    border: 0;
    background: transparent;
    transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.site-rail__links {
    display: grid;
    width: 100%;
}
.site-rail__link {
    height: 54px;
    font-size: 18px;
}

.site-rail__link::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15px;
    width: 2px;
    height: 24px;
    background: var(--site-accent);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 180ms ease;
}

.site-rail__link:hover,
.site-rail__link:focus-visible,
.site-rail__link[aria-current="page"] {
    color: var(--site-text);
    background: rgba(255, 255, 255, 0.035);
}

.site-rail__link:hover {
    transform: translateX(-2px);
}

.site-rail__link[aria-current="page"]::after {
    transform: scaleY(1);
}

.site-rail__tooltip {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translate(6px, -50%);
    padding: 6px 8px;
    color: var(--site-text);
    background: rgba(8, 10, 11, 0.94);
    border: 1px solid var(--site-line);
    border-radius: 3px;
    font: 500 10px/1.2 Inter, "Noto Sans JP", sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

.site-rail__link:hover .site-rail__tooltip,
.site-rail__link:focus-visible .site-rail__tooltip {
    opacity: 1;
    transform: translate(0, -50%);
}

body.site-shell-active > .side-nav,
body.site-shell-active > .nav,
body.site-shell-active #menu-container {
    display: none !important;
}

body.site-shell-active #logo-text {
    font-size: 13px !important;
    letter-spacing: 0 !important;
}

body.site-shell-active #logo-container {
    top: 24px !important;
    left: 24px !important;
}

body.site-shell-active .sound-shell,
body.site-shell-active .video-shell,
body.site-shell-active .lab-shell {
    padding-top: 24px !important;
    padding-left: 24px !important;
}

body.site-shell-active .sound-logo,
body.site-shell-active .video-logo,
body.site-shell-active .lab-logo {
    width: 48px !important;
    height: 30px !important;
}

body.site-shell-active .sound-header,
body.site-shell-active .video-header,
body.site-shell-active .lab-header {
    min-height: 30px;
    align-items: center;
}

body.site-shell-active .page-title h1,
body.site-shell-active .gallery-shell h1,
body.site-shell-active .header-content h1 {
    font-size: clamp(1.45rem, 2.8vw, 2.35rem) !important;
    font-weight: 300 !important;
    letter-spacing: 0.02em !important;
}

body.site-shell-active p,
body.site-shell-active .lead,
body.site-shell-active .section-note {
    font-size: min(0.86rem, 14px);
    line-height: 1.7;
}

body.site-shell-active .gallery-shell,
body.site-shell-active .app-container,
body.site-shell-active .container {
    max-width: calc(100vw - var(--site-rail-width));
}

body.site-shell-active[data-site-page="video-gallery.html"]:not(.video-page) {
    width: calc(100% - var(--site-rail-width));
}

body.site-shell-active > header {
    right: var(--site-rail-width) !important;
}

body.site-shell-active #canvas-container,
body.site-shell-active #ui-layer {
    width: calc(100% - var(--site-rail-width)) !important;
}

@media (max-width: 680px) {
    :root {
        --site-rail-width: 44px;
    }

    .sound-page.site-shell-active {
        padding-right: var(--site-rail-width);
    }

    .site-rail__link {
        height: 48px;
        font-size: 16px;
    }

    .site-rail__link::after {
        top: 14px;
        height: 20px;
    }

    .site-rail__tooltip {
        display: none;
    }

    body.site-shell-active #logo-container {
        left: 14px !important;
        top: 14px !important;
    }

    body.site-shell-active .sound-shell,
    body.site-shell-active .video-shell,
    body.site-shell-active .lab-shell {
        padding-top: 14px !important;
        padding-left: 14px !important;
    }

    body.site-shell-active #logo-text {
        display: none !important;
    }

    body.site-shell-active .gallery-shell,
    body.site-shell-active .app-container,
    body.site-shell-active .container {
        width: 100%;
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-rail *,
    .site-rail *::before,
    .site-rail *::after {
        transition: none !important;
    }
}

/* AI Lab tools: shared frame and controls. Editing canvases retain their own geometry. */
body.lab-tool {
    background: var(--site-bg); color: var(--site-text);
    font-family: Inter, "Noto Sans JP", sans-serif;
    padding-right: var(--site-rail-width); overflow-x: visible;
}
.lab-tool .bg-animation, .lab-tool #cursor { display: none; }
body.lab-tool > header {
    position: relative; inset: auto; right: auto !important; width: 100%; padding: 24px;
    background: transparent; border-bottom: 1px solid var(--site-hairline);
    backdrop-filter: none; gap: 16px;
}
.lab-tool .logo { gap: 12px; }
.lab-tool .logo-text { font-size: 13px; letter-spacing: 0; }
.lab-tool .logo-sub { font-size: 10px; letter-spacing: .18em; color: var(--site-muted); }
.lab-tool .back-btn { width: auto; height: auto; min-height: 44px; padding: 8px 12px; font-size: 11px; }
.lab-tool .back-btn-text { display: inline; }
body.lab-tool .container {
    width: 100%; max-width: 1680px; height: auto; min-height: 0;
    padding: 36px 24px 48px; margin: 0 auto; overflow: visible; display: block;
}
.lab-tool .page-title { text-align: left; margin-bottom: 28px; }
.lab-tool .page-title h1 { background: none; -webkit-text-fill-color: var(--site-text); color: var(--site-text); }
.lab-tool .page-title p { color: var(--site-muted); letter-spacing: .1em; }
.lab-tool .main-layout { gap: 16px; overflow: visible; }
.lab-tool .main-layout > *, .lab-tool .bar-group, .lab-tool .bar-setting { min-width: 0; }
.lab-tool .card, .lab-tool .sync-wave-card, .lab-tool .export-bar {
    background: var(--site-panel); border: 1px solid var(--site-line);
    border-radius: 3px; box-shadow: none; backdrop-filter: none;
}
.lab-tool .card { padding: 20px; }
.lab-tool .card-title, .lab-tool .section-label, .lab-tool .control-label, .lab-tool .step-label {
    color: var(--site-muted); font-size: 11px; font-weight: 500; letter-spacing: .14em;
}
.lab-tool .card-title i, .lab-tool .drop-zone i { color: var(--site-muted); }
.lab-tool button, .lab-tool .btn, .lab-tool .back-btn,
.lab-tool .file-upload-btn, .lab-tool .audio-upload-btn-bottom {
    background: var(--site-surface); color: var(--site-text); border: 1px solid var(--site-line);
    border-radius: 3px; box-shadow: none; font-family: inherit; min-height: 36px;
    transition: background-color 150ms ease, border-color 150ms ease; text-shadow: none;
}
.lab-tool button:not(:disabled):hover, .lab-tool .btn:not(:disabled):hover,
.lab-tool .back-btn:hover, .lab-tool .file-upload-btn:hover, .lab-tool .audio-upload-btn-bottom:hover {
    background: rgba(242,244,245,.08); border-color: var(--site-accent); transform: none; box-shadow: none;
}
.lab-tool .mode-btn.active, .lab-tool .logo-item.selected, .lab-tool .lyric-row.active {
    background: rgba(242,244,245,.08); border-color: var(--site-accent); color: var(--site-text); box-shadow: none;
}
.lab-tool :is(input, select, textarea) {
    font-family: inherit; color: var(--site-text); accent-color: var(--site-text);
}
.lab-tool :is(input[type=text], input[type=number], select, textarea) {
    background: var(--site-surface); border: 1px solid var(--site-line); border-radius: 3px;
    max-width: 100%; min-width: 0; min-height: 36px; box-shadow: none;
}
.lab-tool option { background: var(--site-bg); }
.lab-tool .tool-filename { width: 100%; padding: 8px 12px; margin-bottom: 10px; font-size: 12px; }
.lab-tool input[type=range] { background: var(--site-line); min-width: 0; }
.lab-tool input[type=range]::-webkit-slider-thumb { background: var(--site-text); box-shadow: none; }
.lab-tool input[type=range]::-moz-range-thumb { background: var(--site-text); border: 0; box-shadow: none; }
.lab-tool :disabled { opacity: .4; cursor: not-allowed; }
.lab-tool :is(a,button,input,select,textarea,[tabindex]):focus-visible {
    outline: 2px solid var(--site-text); outline-offset: 3px;
}
.lab-tool input[type=file] {
    display: block; position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.lab-tool label:has(input[type=file]:focus-visible) { outline: 2px solid var(--site-text); outline-offset: 3px; }
.lab-tool .drop-zone, .lab-tool .upload-area, .lab-tool .canvas-wrapper,
.lab-tool .waveform-container, .lab-tool .logo-item, .lab-tool .mode-toggle,
.lab-tool .lyrics-textarea, .lab-tool .lyric-row {
    border-radius: 3px; border-color: var(--site-line); box-shadow: none;
}
.lab-tool .drop-zone.dragover, .lab-tool .upload-area.dragover { border-color: var(--site-accent); background: var(--site-surface); }
.lab-tool .waveform-container { background: var(--site-bg); }
.lab-tool .bar-time, .lab-tool .time-input { font-family: Inter, "Noto Sans JP", sans-serif; font-variant-numeric: tabular-nums; }
.lab-tool .sync-screen { height: auto; min-height: 0; }
.lab-tool .lyrics-list { min-height: 220px; }
.lab-tool .main-layout .card:last-child { overflow: visible; scrollbar-width: thin; }
.lab-tool .main-layout .card:last-child::-webkit-scrollbar { display: block; }
.site-rail__link[aria-current="location"]::after { transform: scaleY(1); }
.site-rail__link:focus-visible { outline: 2px solid var(--site-text); outline-offset: -4px; }
@media (max-width: 1200px) {
    .lab-tool .main-layout { grid-template-columns: minmax(0,1fr); }
    .lab-tool #logo-card { grid-column: auto; }
    .lab-tool .logo-grid { grid-template-columns: repeat(auto-fill,minmax(80px,1fr)); }
}
@media (max-width: 680px) {
    body.lab-tool > header { padding: 14px; gap: 8px; }
    .lab-tool .logo { gap: 6px; }
    .lab-tool .logo-sub { display: none; }
    .lab-tool .back-btn { padding: 8px; font-size: 10px; }
    body.lab-tool .container { padding: 24px 12px 32px; }
    .lab-tool .card { padding: 14px; }
    .lab-tool .main-layout .card:first-child { position: relative; top: auto; }
    .lab-tool .bar-group { flex-wrap: wrap; }
    .lab-tool .canvas-wrapper { min-height: 180px; }
    .lab-tool .mode-toggle { flex-wrap: wrap; }
    .lab-tool .mode-btn { min-width: 0; }
    .lab-tool .key-hints { display: flex; flex-wrap: wrap; }
    .lab-tool .sync-header { flex-wrap: wrap; gap: 12px; }
}
@media (pointer: coarse) {
    .lab-tool button, .lab-tool .btn, .lab-tool select { min-height: 44px; }
    .lab-tool, .lab-tool * { cursor: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .lab-tool *, .lab-tool *::before, .lab-tool *::after {
        animation: none !important; transition: none !important; scroll-behavior: auto !important;
    }
}

body.lab-tool .main-layout .card { border-radius: 3px; }
body.lab-tool .page-title { margin-top: 0; }

.lab-tool .main-layout { padding: 0; }
.lab-tool .lyric-row.active-line { border-left: 1px solid var(--site-accent); }
.lab-tool .time-input.stamped { background: var(--site-surface); border-color: var(--site-rule); }
@media (max-width: 680px) {
    .lab-tool .lyric-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 12px 8px; }
    .lab-tool .lyric-row .text-input { grid-column: 1 / -1; grid-row: 2; width: 100%; }
    .lab-tool .lyric-row .time-input { margin: 0; width: 100px; }
    .lab-tool .lyric-row .actions { grid-column: 1 / -1; margin: 0; justify-content: flex-end; }
}

/* Image Splitter desktop workspace */
.splitter-tool .splitter-settings-column { min-width: 0; }
.splitter-tool .splitter-help { margin-top: 8px; color: var(--site-muted); font-size: 11px; }
.splitter-tool .splitter-help summary { cursor: pointer; min-height: 24px; }
.splitter-tool .splitter-help summary:focus-visible { outline: 2px solid var(--site-text); outline-offset: 2px; }
.splitter-tool .individual-download-label { margin-top: 10px; font-size: 11px; }
@media (min-width: 1100px) and (min-height: 480px) {
    body.splitter-tool { height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
    body.splitter-tool > header { flex: 0 0 auto; padding: 10px 20px; gap: 24px; }
    body.splitter-tool > header .page-title { margin: 0; flex: 1; }
    body.splitter-tool > header .page-title h1 { font-size: 20px !important; margin: 0; }
    body.splitter-tool > header .page-title p { display: none; }
    body.splitter-tool .container { flex: 1; min-height: 0; max-width: none; padding: 12px 16px 16px; display: flex; overflow: hidden; }
    body.splitter-tool .main-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(400px, 1fr); gap: 12px; overflow: hidden; }
    body.splitter-tool .main-layout > .card { min-height: 0; height: 100%; padding: 14px; overflow: hidden; align-self: stretch; }
    body.splitter-tool .card-title { margin-bottom: 10px; font-size: 10px; }
    body.splitter-tool .controls { display: flex; flex-direction: column; gap: 0; }
    body.splitter-tool .splitter-settings { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; padding: 3px; scrollbar-gutter: stable; }
    body.splitter-tool .control-section { margin-top: 12px; padding-top: 12px; }
    /* 各設定は枠付きカードなので、先頭でも上の余白と枠線は残す。詰めるのは列頭の外側マージンだけ。 */
    body.splitter-tool .splitter-settings-column > :first-child { margin-top: 0; }
    body.splitter-tool .section-label { margin-bottom: 7px; font-size: 10px; letter-spacing: .08em; }
    body.splitter-tool .mode-toggle { gap: 4px; padding: 3px; }
    body.splitter-tool .mode-btn { padding: 6px 3px; min-height: 32px; font-size: 11px; }
    body.splitter-tool #directionToggle .mode-btn { flex-direction: row; gap: 4px; }
    body.splitter-tool #directionToggle .mode-btn i { font-size: 13px; }
    body.splitter-tool .format-options { gap: 4px; }
    body.splitter-tool .format-btn { padding: 7px 3px; font-size: 11px; }
    body.splitter-tool .margin-mode-toggle { margin-bottom: 6px; }
    body.splitter-tool .margin-setting { gap: 6px; }
    body.splitter-tool .margin-reset-btn { margin-top: 6px; padding: 4px 8px; }
    body.splitter-tool .download-section { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; padding-top: 10px; }
    body.splitter-tool .download-section > .section-label,
    body.splitter-tool .download-options { grid-column: 1 / -1; margin: 0; }
    body.splitter-tool .download-btn { width: 100%; margin: 0; padding: 8px 4px; font-size: 11px; min-height: 36px; }
    body.splitter-tool .download-btn i { font-size: 14px; }
    body.splitter-tool .download-single-btn { padding: 5px; min-height: 32px; }
    body.splitter-tool #resetBtn { flex: 0 0 auto; margin-top: 8px; padding: 6px; min-height: 32px; }
    body.splitter-tool #noImageState { display: none !important; }
    body.splitter-tool .preview-area.active { flex: 1; min-height: 0; height: auto; gap: 10px; }
    body.splitter-tool .preview-area.active .canvas-wrapper { min-height: 0; flex: 1 1 0; }
    body.splitter-tool .preview-area.active .split-preview { min-width: 0; max-width: 100%; height: 36%; padding: 8px; border-radius: 3px; }
    body.splitter-tool .preview-area.active.layout-bottom .split-preview.cross-split { height: 46%; }
    body.splitter-tool .preview-area.active.layout-side .split-preview { flex: 0 0 43%; width: 43%; height: 100%; }
    body.splitter-tool .drop-zone { flex: 1; min-height: 0; }
}
@media (max-width: 1099px), (max-height: 479px) {
    body.splitter-tool > header { flex-wrap: wrap; }
    body.splitter-tool > header .page-title { order: 3; flex-basis: 100%; margin: 12px 0 0; }
    body.splitter-tool .main-layout { grid-template-columns: minmax(0,1fr); }
    body.splitter-tool .main-layout > .card:first-child { height: auto; }
    .splitter-tool .splitter-settings-column + .splitter-settings-column { margin-top: 20px; }
}

@media (min-width: 1100px) and (min-height: 480px) {
    body.splitter-tool .mode-btn { min-width: 0; }
    body.splitter-tool #directionToggle { display: grid; grid-template-columns: 1fr 1fr; }
    body.splitter-tool #directionToggle .cross-btn { grid-column: 1 / -1; }
    body.splitter-tool .control-section { margin-top: 5px; padding-top: 5px; }
    body.splitter-tool .splitter-help { margin-top: 4px; }
    body.splitter-tool .splitter-help summary { min-height: 18px; }
    body.splitter-tool .control-section:has(#marginInput) { display: grid; grid-template-columns: 1fr auto; gap: 5px; align-items: center; }
    body.splitter-tool .control-section:has(#marginInput) > :is(.section-label,.margin-setting,#individualMarginContainer,.splitter-help) { grid-column: 1 / -1; }
    body.splitter-tool .margin-mode-toggle { grid-row: 2; margin: 0; font-size: 11px; }
    body.splitter-tool #marginResetBtn { grid-row: 2; grid-column: 2; margin: 0; width: auto; min-height: 28px; }
}

/* One shared header across all three AI Lab tools. */
@media (min-width: 1100px) and (min-height: 480px) {
    body.lab-tool > header { padding: 10px 20px; gap: 24px; }
    body.lab-tool > header .page-title { margin: 0; flex: 1; }
    body.lab-tool > header .page-title h1 { font-size: 20px !important; margin: 0; }
    body.lab-tool > header .page-title p { display: none; }
    body.lab-tool:not(.splitter-tool) .container { padding-top: 12px; }
}
@media (max-width: 1099px), (max-height: 479px) {
    body.lab-tool > header { flex-wrap: wrap; }
    body.lab-tool > header .page-title { order: 3; flex-basis: 100%; margin: 12px 0 0; }
}
/* Sound sits in a separate section of the Gravity navigation rail. */
.site-rail--gallery .site-rail__links { position: relative; }
.gallery-sound {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 0;
    margin-top: 12px;
    padding: 8px 0 12px;
    width: 100%;
    border-top: 1px solid var(--site-line);
    color: var(--site-muted);
}
.gallery-sound__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.gallery-sound__toggle i { font-size: 17px; }
.gallery-sound__toggle[aria-pressed="true"] { color: var(--site-text); }
.gallery-sound__status { display: none; }
.gallery-sound input[type="range"] {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 44px;
    height: 76px;
    margin: 0;
    accent-color: #a6aaa9;
    cursor: pointer;
}
.gallery-sound :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gallery-sound :disabled { opacity: .4; cursor: default; }
@media (max-width: 680px) {
    body.site-shell-active[data-site-page="gravity.html"] #logo-text {
        display: flex !important;
        font-size: 12px;
        letter-spacing: 1px;
        white-space: nowrap;
    }
    body.site-shell-active[data-site-page="gravity.html"] #logo-container { gap: 10px; }
}
@media (max-height: 440px) {
    .gallery-sound {
        top: auto;
        bottom: 0;
        left: auto;
        right: 100%;
        width: 44px;
        margin: 0;
        background: var(--site-bg);
    }
    .gallery-sound input[type="range"] { height: 54px; }
}

/* Mobile volume is controlled by the device, including landscape touch screens. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    body.sound-page .volume,
    body[data-site-page="gravity.html"] .gallery-sound input[type="range"],
    body[data-site-page="gravity.html"] #volume-slider {
        display: none !important;
    }
    body.sound-page .transport {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px;
    }
    body.sound-page .player-state { display: none; }
    body[data-site-page="gravity.html"] .gallery-sound { padding-bottom: 8px; }
}

/* A fixed curtain preserves canvas geometry and fixed controls on every screen size. */
.site-page-curtain {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    background: var(--site-bg, #0b0e10);
    opacity: 1;
    pointer-events: none;
    transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-page-curtain.is-revealed { opacity: 0; }
.site-page-curtain.is-leaving {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 260ms ease;
}
@media (prefers-reduced-motion: reduce) {
    .site-page-curtain { display: none; transition: none; }
}