/* ==========================================
   BASE: TOKENS, SCENE, CARDS
========================================== */
:root {
    /* ─── 主题颜色 ─── */
    --text-main:    #000;
    --text-dim:     #333;
    --accent-blue:  #0088FF;
    --window-bg:    #E0E0E0;
    --window-border:#000;
    --card-width: 440px;
    --card-height: 468px;
    --card-half-width: -220px;
    --card-half-height: -234px;
    --card-topbar-font-size: 22px;
    --alch-video-ratio: 1 / 1;

    /* --- 弹窗键盘 --- 尺寸 & 外观（所有布局可调项在这里） --- */
    --modal-margin-left:    80px;   /* 弹窗距左边界的间距 */
    --modal-margin-bottom:   -50px;   /* 🔧 弹窗距底部的间距（正数→向上推，0=完全居中） */
    --modal-width:          60vw;   /* 弹窗宽度（配合 JS SPLIT_MODE.offsetX，加起来 ≤ 100%） */
    --modal-min-width:     450px;   /* 弹窗最小宽度 */
    --modal-max-width:    1000px;   /* 弹窗最大宽度 */
    --modal-height:         85vh;   /* 弹窗高度 */
    --modal-max-height:    900px;   /* 弹窗最大高度 */
    --modal-bg:           rgba(255, 251, 251, 0.373); /* 和主页窗口一致的毛玻璃底 */
    --modal-blur:            5px;   /* 和主页窗口一致 */
    --modal-anim-dur:        0.4s;  /* 入场动画时长 */
}

body {
    margin: 0; padding: 0;
    font-family: 'VT323', monospace;
    background: #fff;
    color: var(--text-main);
    overflow: hidden;
}

::-webkit-scrollbar { width: 0; }

.floating-header {
    position: absolute; top: 40px; left: 40px; z-index: 50; pointer-events: none;
}
/* Raised Win-style control: matches .control-btn grays, no box-shadow */
.back-link {
    font-family: 'VT323', monospace;
    color: var(--text-main);
    text-decoration: none;
    font-size: 16px;
    margin-bottom: 20px;
    display: inline-block;
    padding: 2px 10px;
    pointer-events: auto;
    font-weight: normal;
    box-shadow: none;
    background: linear-gradient(to bottom, #f0f0f0, #d0d0d0);
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-sizing: border-box;
}
.back-link:hover {
    background: linear-gradient(to bottom, #f7f7f7, #e0e0e0);
    color: var(--text-main);
}
.back-link:active {
    border-color: #808080 #ffffff #ffffff #808080;
    background: linear-gradient(to bottom, #d0d0d0, #e8e8e8);
}
.back-link:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}
.logo { 
    font-family: 'Bitcount Grid Single', 'Share Tech Mono', sans-serif; 
    font-size: 80px; margin: 0; font-weight: normal; 
    letter-spacing: 2px; text-transform: uppercase;
    color: #fff; text-shadow: 4px 4px 0px #000; /* Brutalist shadow on cloud background */
}

/* Fullscreen Scene synced with the site Cloud BG */
.scene-panel {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden; z-index: 10;
    background: url('../assets/bg/cloud.jpeg') center center / cover;
}

.scene {
    position: absolute; width: 100%; height: 100%;
    /* 🔧 perspective: 透视距离（px）。越小透视越夸张，越大越平。建议 800~2000。改这里同步改 JS 的 performHitTest 中 perspective_scale 的分子 1400 */
    perspective: 1400px;
    transform-style: preserve-3d;
}

.carousel {
    position: absolute;
    /* 位置由 JS 全程接管（render()内carousel.style.top / .left）。
       这里的初始值只在页面首帧帧生效，中心坐标由 JS 中 NORMAL_MODE.offsetX / offsetY 决定。 */
    top: 60%; left: 35%;
    width: 0; height: 0; transform-style: preserve-3d;
}

/* 卡片尺寸 — 改了宽高还需同步改 JS 中 performHitTest 的 440 / 468 */
.card {
    position: absolute;
    width: var(--card-width);
    height: var(--card-height);
    left: var(--card-half-width);
    top: var(--card-half-height); /* 居中偏移 = 宽/高 ÷ 2 取负 */
    background: transparent;
    border: 2px dashed var(--accent-blue);
    cursor: pointer;
    transform-origin: center center;
    will-change: transform, opacity;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.card.is-hovered {
    border-color: #000;
}

.card.is-hovered .handle {
    border-color: #000; background: #000;
}

/* Rectangular Scale Handles */
.handle {
    position: absolute;
    width: 12px; height: 12px;
    background: #fff;
    border: 2px solid var(--accent-blue);
    box-sizing: border-box;
    z-index: 6; pointer-events: none;
    transition: all 0.2s;
    /* center: margin offsets half the total (border-inclusive) size */
    margin: -6px 0 0 -6px;
}

/* Exact Top/Left coordinate plotting bounding against padding edge */
.tl { top: -1px; left: -1px; }
.mt { top: -1px; left: 50%; }
.tr { top: -1px; left: calc(100% + 1px); }

.ml { top: 50%; left: -1px; }
.mr { top: 50%; left: calc(100% + 1px); }

.bl { top: calc(100% + 1px); left: -1px; }
.mb { top: calc(100% + 1px); left: 50%; }
.br { top: calc(100% + 1px); left: calc(100% + 1px); }

/* Content wrapper behind the X */
.card-content-wrapper {
    position: absolute; inset: 12px;
    display: flex; flex-direction: column;
    z-index: 1; /* Under cross */
    background: #fff;
    border: 2px solid #000; 
    overflow: hidden;
}

.card-topbar {
    border-bottom: 2px solid #000; padding: 4px 8px;
    display: flex; justify-content: space-between; align-items: center;
    background: #E0E0E0; font-family: 'VT323', monospace; font-size: var(--card-topbar-font-size);  
    color: #000; font-weight: normal;
}

.card-preview { flex: 1; position: relative; overflow: hidden; }
.card-preview img,
.card-preview video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
/* Poster overlay: stays visible until the video actually begins playing,
   so there's no black/empty flash while the video buffers. */
.card-preview .card-poster {
    position: absolute; inset: 0;
    z-index: 2;
    transition: opacity 180ms ease;
}
.card-preview video {
    position: absolute; inset: 0;
    z-index: 1;
}
.card-preview.is-video-playing .card-poster {
    opacity: 0;
}
/* Brutalist Gradient Placeholders */
.bg-p-0 { background: repeating-linear-gradient(45deg, #111, #111 10px, #222 10px, #222 20px); }
.bg-p-1 { background: repeating-linear-gradient(45deg, #d4d0c8, #d4d0c8 10px, #fff 10px, #fff 20px); }
.bg-p-2 { background: repeating-linear-gradient(45deg, #008080, #008080 10px, #000 10px, #000 20px); }

/* ==========================================
   MODAL SHARED
   分屏模式 — 左侧弹窗面板布局
========================================== */

/* 全屏遮罩层（透明背景，只负责定位） */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: transparent; z-index: 100;
    display: flex; justify-content: flex-start; align-items: center;
    padding-left: var(--modal-margin-left);
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.modal-overlay.active { opacity: 1; pointer-events: none; }

/* 弹窗窗体 */
.modal-content.window {
    background:      var(--modal-bg);
    backdrop-filter: blur(var(--modal-blur));
    border: 2px solid #000;
    border-radius: 4px;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.3),
        inset -1px -1px 0 rgba(0,0,0,0.18),
        2px 2px 5px rgba(0,0,0,0.3);
    width:         var(--modal-width);
    min-width:     var(--modal-min-width);
    max-width:     var(--modal-max-width);
    height:        var(--modal-height);
    max-height:    var(--modal-max-height);
    margin-bottom: var(--modal-margin-bottom);
    pointer-events: auto;
    transform: translateX(-150%);
    transition: transform var(--modal-anim-dur) cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 可换成 ease-out */
    display: flex; flex-direction: column; overflow: hidden;
    box-sizing: border-box;
}
.modal-overlay.active .modal-content.window { transform: translateX(0); }

.window-header {
    background: #2a7a46;
    color: white;
    padding: 2px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 24px;
    font-family: 'VT323', monospace;
    font-size: 18px;
    font-weight: normal;
    line-height: 1;
    border-bottom: 2px solid #000;
}

.close-btn {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    background: #1d1c1c;
    border: none;
    color: white;
    font-family: monospace;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    appearance: none;
}
.close-btn:hover { background: #a13434; }
.close-btn:active { border: 1px inset #C0C0C0; }
.close-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.window-content {
    padding: 10px;
    background: rgba(255,255,255,0);
    position: relative;
    height: calc(100% - 25px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.modal-meta { display: flex; gap: 16px; margin-bottom: 12px; font-family: 'VT323', monospace; font-size: 16px; color: #666; }
.project-description { font-family: 'VT323', monospace; font-size: 18px; color: #333; line-height: 1.2; margin-bottom: 20px; }

.modal-media {
    height: 250px; border: 2px solid #000; background-size: cover; background-position: center; margin-bottom: 20px;
}

.control-btn {
    background: linear-gradient(to bottom, #f0f0f0, #d0d0d0);
    border: 1px solid #808080;
    color: #000;
    font-family: 'VT323', monospace;
    font-size: 18px;
    padding: 6px 16px;
    cursor: pointer;
    font-weight: normal;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.7);
}
.control-btn:hover { background: linear-gradient(to bottom, #f7f7f7, #e0e0e0); transform: translateY(-1px); }
.control-btn:active { box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2); transform: translateY(0); }
.control-btn:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* ==========================================
   PROJECT SHARED: LATENT APPARITION
   （Latent Apparition 项目共用样式）
========================================== */

.infinite-gallery {
    /* Latent Apparition 全端画框/舞台：只改这里即可（桌面画布、平板/手机归档与放大卡片共用） */
    --latent-stage-bg: #050505;
    --latent-frame-border-color: #1d1d1d;
    --latent-frame-surface-bg: #101010;
    --latent-frame-border-hover: #777;
    --latent-viewport-border-width: 2px;
    --latent-card-border-width: 1px;

    padding: 0;
    flex: 1 1 auto; /* Stretch to fill modal alongside header */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    background: var(--latent-stage-bg);
}

.canvas-viewport {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
    cursor: grab;
    background-color: var(--latent-stage-bg);
    border: var(--latent-viewport-border-width) solid var(--latent-frame-border-color);
    
    --bg-scale: 1;
    --bg-x: 0px;
    --bg-y: 0px;
    --bg-opacity: 1;
}

.canvas-viewport::before {
    content: "";
    position: absolute;
    inset: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='10' y='11' width='4' height='2' fill='%23333'/%3E%3Crect x='11' y='10' width='2' height='4' fill='%23333'/%3E%3C/svg%3E");
    background-size: calc(24px * var(--bg-scale)) calc(24px * var(--bg-scale));
    background-position: var(--bg-x) var(--bg-y);
    opacity: var(--bg-opacity);
}

.canvas-viewport:active {
    cursor: grabbing;
}

.canvas-world {
    position: absolute;
    width: 4000px;
    height: 4000px;
    transform-origin: 0 0;
    /* transition is removed for direct dragging performance */
}

/* 平板 / 手机归档区共用：十字星底纹铺满滚动区域（调密集度须同步改 svg 尺寸与 background-size） */
.latent-tablet-archive,
.latent-mobile-archive {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background-color: var(--latent-stage-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect x='7' y='8' width='4' height='2' fill='%23333'/%3E%3Crect x='8' y='7' width='2' height='4' fill='%23333'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-repeat: repeat;
    background-attachment: local;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

.latent-tablet-archive {
    padding: 18px 16px 24px;
}

.latent-mobile-archive {
    padding: 16px 14px 24px;
}

/* Shared chrome for Latent archive cards on touch layouts */
.latent-tablet-statement,
.latent-mobile-statement {
    position: relative;
    z-index: 1;
    padding: 8px 6px 6px;
    border: var(--latent-card-border-width) solid var(--latent-frame-border-color);
    border-radius: 8px;
    background: var(--latent-frame-surface-bg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
    box-sizing: border-box;
}

.latent-tablet-statement .canvas-meta,
.latent-mobile-statement .canvas-meta {
    width: auto;
    min-width: 0;
    overflow: visible;
    text-overflow: initial;
}

.latent-tablet-item,
.latent-mobile-item {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    padding: 8px 6px 6px;
    border: var(--latent-card-border-width) solid var(--latent-frame-border-color);
    border-radius: 8px;
    background: var(--latent-frame-surface-bg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
    box-sizing: border-box;
    cursor: zoom-in;
}

.latent-tablet-item .canvas-meta,
.latent-mobile-item .canvas-meta {
    width: auto;
    min-width: 0;
}

.latent-tablet-item .canvas-media,
.latent-mobile-item .canvas-media {
    width: 100%;
}

.latent-tablet-item img,
.latent-tablet-item video,
.latent-mobile-item img,
.latent-mobile-item video {
    display: block;
    width: 100%;
    height: auto;
    background: transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.latent-tablet-item:focus-visible,
.latent-mobile-item:focus-visible {
    outline: 2px solid #d6d6d6;
    outline-offset: 2px;
}

.latent-tablet-statement {
    margin-bottom: 18px;
}

/* Archive statement: placeholder meta is only for parity with grid cards; hide to save vertical space */
.latent-tablet-statement > .canvas-meta,
.latent-mobile-statement > .canvas-meta {
    display: none;
}

.latent-tablet-statement .statement-content,
.latent-mobile-statement .statement-content {
    padding: 12px 18px 18px;
}

.latent-tablet-grid {
    position: relative;
    z-index: 1;
    column-count: 4;
    column-gap: 14px;
    opacity: 1;
    transition: opacity 160ms ease;
}

.latent-tablet-grid.is-preparing {
    opacity: 0;
    pointer-events: none;
}

.latent-tablet-item {
    margin: 0 0 12px;
}

.latent-tablet-focus {
    position: absolute;
    inset: 0;
    z-index: 9;
    background: rgba(5, 5, 5, 0.56);
    background: color-mix(in srgb, var(--latent-stage-bg) 56%, transparent);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.latent-tablet-focus.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.latent-tablet-focus-frame {
    min-height: 100%;
    padding: 28px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.latent-tablet-focus-card {
    position: relative;
    width: min(100%, 512px);
    margin: 0;
    box-shadow: 0 22px 48px rgba(0,0,0,0.58);
    cursor: default;
    transform-origin: center;
    will-change: transform, opacity;
}

.latent-tablet-focus-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.latent-tablet-focus-dismiss {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border: 1px solid #555;
    border-radius: 2px;
    background: rgba(18, 18, 18, 0.92);
    color: #f2f2f2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.latent-tablet-focus-dismiss:focus-visible {
    outline: 2px solid #d6d6d6;
    outline-offset: 1px;
}

.latent-tablet-focus-topbar .canvas-meta {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-bottom: 0;
}

.latent-tablet-focus-card .canvas-media {
    display: block;
    line-height: 0;
    background: transparent;
    overflow: hidden;
}

.latent-tablet-focus-card img,
.latent-tablet-focus-card video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    margin: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.latent-mobile-archive::before {
    content: none;
}

.latent-mobile-statement {
    margin-bottom: 16px;
}

.latent-mobile-grid {
    position: relative;
    z-index: 1;
    column-count: 2;
    column-gap: 14px;
}

.latent-mobile-item {
    margin: 0 0 10px;
}

.latent-mobile-focus {
    position: absolute;
    inset: 0;
    z-index: 8;
    background: rgba(5, 5, 5, 0.46);
    background: color-mix(in srgb, var(--latent-stage-bg) 46%, transparent);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.latent-mobile-focus.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.latent-mobile-focus-frame {
    min-height: 100%;
    padding: 24px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.latent-mobile-focus-card {
    position: relative;
    width: min(100%, 520px);
    margin: 0;
    box-shadow: 0 18px 42px rgba(0,0,0,0.55);
    cursor: default;
    transform-origin: center;
    will-change: transform, opacity;
}

.latent-mobile-focus-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.latent-mobile-focus-dismiss {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border: 1px solid #555;
    border-radius: 2px;
    background: rgba(18, 18, 18, 0.9);
    color: #f2f2f2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.latent-mobile-focus-dismiss:focus-visible {
    outline: 2px solid #d6d6d6;
    outline-offset: 1px;
}

.latent-mobile-focus-topbar .canvas-meta {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-bottom: 0;
}

.latent-mobile-focus-card .canvas-media {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.latent-mobile-focus-card img,
.latent-mobile-focus-card video {
    width: auto;
    max-width: 100%;
    max-height: min(72dvh, 780px);
    object-fit: contain;
    margin: 0 auto;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* Pinboard items - matching reference design */
.canvas-statement {
    position: absolute;
    width: 600px;
    z-index: 9999; /* 永远置顶，不会被覆盖 */
    pointer-events: none; /* 让拖拽依然可以穿透文本进行 */
    cursor: default;
    
    /* 完美复刻 canvas-item 媒体画框的物理结构与排版机制 */
    padding: 8px 6px 6px 6px;
    border: var(--latent-card-border-width) solid var(--latent-frame-border-color);
    border-radius: 8px;
    background: var(--latent-frame-surface-bg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}

.statement-content {
    background: #000;
    padding: 24px;
    color: #ccc;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    /* 强制覆盖继承自 canvas-media 的 line-height: 0 以及异常缩放缩进 */
    line-height: 1.6 !important; 
    white-space: normal !important;
}

.statement-content p {
    margin-bottom: 20px;
}

.statement-content p:last-child {
    margin-bottom: 0;
}

.canvas-item {
    position: absolute;
    /* Tighter wrapper padding closer to the reference */
    padding: 8px 6px 6px 6px;
    border: var(--latent-card-border-width) solid var(--latent-frame-border-color);
    border-radius: 8px; /* Outer bevel allowed */
    background: var(--latent-frame-surface-bg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.5s ease;
    user-select: none;
    -webkit-user-drag: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    width: max-content;
}
.canvas-item:hover {
    transform: scale(1.05);
    border-color: var(--latent-frame-border-hover);
    box-shadow: 0 10px 20px rgba(0,0,0,0.8);
    z-index: 100 !important;
}

.canvas-meta {
    font-family: 'Share Tech Mono', 'VT323', monospace;
    font-size: 13px;
    color: #e0e0e0;
    /* Closer to the image component */
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* ensure text doesn't stretch parent frame wider than media */
    width: 0;
    min-width: 100%;
}

.canvas-media {
    border-radius: 0; /* Hard corners for inside media, no bevel */
    overflow: hidden;
    background: #000;
    line-height: 0; /* remove ghost space under images */
}

.canvas-item img,
.canvas-item video {
    display: block;
    width: auto;
    height: auto;
    pointer-events: none; 
    background: transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* ==========================================
   PROJECT SHARED: THE ALCHEMIST
========================================== */

.alchemist-detail {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}

.alchemist-detail::-webkit-scrollbar { width: 6px; }
.alchemist-detail::-webkit-scrollbar-track { background: transparent; }
.alchemist-detail::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

/* ── Top row: Statement + Video side by side ── */
.alch-top-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* ── Statement (left column, 40%) ── */
.alch-statement {
    flex: 0 0 40%;
    padding: 12px;
    border: 2px solid #000000;
    background: #ffffff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.alch-title {
    font-family: 'VT323', monospace;
    font-size: 36px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 8px;
}

.alch-description {
    flex: 1;
}

.alch-description p {
    font-family: 'VT323', monospace;
    font-size: 18px;
    line-height: 1.2;
    color: #333;
    margin: 0 0 10px 0;
}

.alch-description p:last-child { margin-bottom: 0; }

/* ── Video (right column, 60%, 1:1) ── */
.alch-hero {
    flex: 0 0 60%;
    box-sizing: border-box;
    min-width: 0;
}

.alch-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: var(--alch-video-ratio);
    background: #000;
    overflow: hidden;
    border: 1px solid #808080;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.alch-video-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

/* ── Gallery Section (2×2) ── */
.alch-gallery-section {
    padding: 0 16px 20px;
}

.alch-gallery-header {
    font-family: 'VT323', monospace;
    font-size: 15px;
    color: #888;
    letter-spacing: 2px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.alch-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.alch-gallery-item {
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.15);
    background: #111;
    cursor: default;
    aspect-ratio: 1 / 1;
}

.alch-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* ==========================================
   PROJECT SHARED: SYNTHETIC BESTIARY
========================================== */

.synthetic-bestiary-detail {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}

.synthetic-bestiary-detail::-webkit-scrollbar { width: 6px; }
.synthetic-bestiary-detail::-webkit-scrollbar-track { background: transparent; }
.synthetic-bestiary-detail::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

.synthetic-bestiary-top-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.synthetic-bestiary-top-row > .synthetic-bestiary-meta:only-child {
    flex: 0 1 min(100%, 760px);
    width: min(100%, 760px);
    margin-inline: auto;
}

.synthetic-bestiary-statement,
.synthetic-bestiary-meta {
    border: 2px solid #000;
    background: rgba(255,255,255,0.92);
    box-sizing: border-box;
}

.synthetic-bestiary-statement {
    flex: 0 0 56%;
    padding: 12px;
}

.synthetic-bestiary-title {
    font-family: 'VT323', monospace;
    font-size: 36px;
    font-weight: bold;
    color: #000;
    margin-bottom: 8px;
}

.synthetic-bestiary-description p,
.synthetic-bestiary-meta-copy {
    font-family: 'VT323', monospace;
    font-size: 18px;
    line-height: 1.2;
    color: #333;
    margin: 0 0 10px 0;
}

.synthetic-bestiary-description p:last-child,
.synthetic-bestiary-meta-copy:last-child {
    margin-bottom: 0;
}

.synthetic-bestiary-meta {
    flex: 0 0 44%;
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #f6fbff;
    border: 3px solid #111;
    box-shadow: none;
    overflow: visible;
}

.synthetic-bestiary-meta-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 0 12px;
    border-bottom: 2px solid #111;
}

.synthetic-bestiary-meta-label,
.synthetic-bestiary-meta-id {
    font-family: 'VT323', monospace;
    font-size: 15px;
    color: #888;
    letter-spacing: 2px;
}

.synthetic-bestiary-meta-label {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border: 2px solid #111;
    background: #111;
    color: #f6f8fb;
    box-shadow: none;
}

.synthetic-bestiary-meta-id {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border: 2px solid #111;
    color: #111;
    background: #fff;
    white-space: nowrap;
    box-shadow: none;
}

.synthetic-bestiary-meta-copy {
    margin: 0;
    padding: 18px 20px;
    color: #151515;
    border: 2px solid #111;
    background: #fff;
    box-shadow: none;
}

.synthetic-bestiary-stats {
    display: grid;
    gap: 10px;
}

.synthetic-bestiary-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0 0;
    border-top: 2px solid #111;
}

.synthetic-bestiary-stat span,
.synthetic-bestiary-card-meta {
    font-family: 'VT323', monospace;
    letter-spacing: 1px;
}

.synthetic-bestiary-stat span {
    font-size: 14px;
    color: #111;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 2px solid #111;
    background: #fff;
}

.synthetic-bestiary-stat strong {
    font-family: 'VT323', monospace;
    font-size: 17px;
    font-weight: 400;
    color: #111;
    text-align: right;
    letter-spacing: 1px;
}

.synthetic-bestiary-gallery-section {
    padding: 16px 16px 20px;
    border-top: 2px solid #111;
}

.synthetic-bestiary-gallery {
    column-count: var(--synthetic-bestiary-gallery-columns, 2);
    column-gap: 12px;
}

.synthetic-bestiary-card {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 0 0 12px;
    padding: 8px;
    border: 2px solid #111;
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.98) 0%, rgba(236, 244, 252, 0.96) 100%);
    box-sizing: border-box;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.12);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.synthetic-bestiary-card:hover {
    transform: translateY(-2px);
    border-color: #2e95e6;
    background: linear-gradient(180deg, rgba(240, 248, 255, 1) 0%, rgba(226, 240, 252, 0.98) 100%);
    box-shadow: 4px 4px 0 rgba(46, 149, 230, 0.24);
}

.synthetic-bestiary-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 7px;
    border-bottom: 2px solid #111;
    font-family: 'VT323', monospace;
    font-size: 14px;
    letter-spacing: 1px;
}

.synthetic-bestiary-card-tag,
.synthetic-bestiary-card-code {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 6px;
    border: 1px solid #111;
}

.synthetic-bestiary-card-tag {
    background: #111;
    color: #fff;
}

.synthetic-bestiary-card-code {
    background: rgba(255,255,255,0.85);
    color: #111;
}

.synthetic-bestiary-card-frame {
    aspect-ratio: var(--synthetic-bestiary-card-aspect, 5 / 7);
    overflow: hidden;
    background: #0a0a0a;
    border: 2px solid #111;
    line-height: 0;
}

.synthetic-bestiary-card-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0a0a0a;
    filter: saturate(1.04) contrast(1.02);
}

.synthetic-bestiary-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 7px;
    margin-top: 8px;
    border-top: 2px solid #111;
    font-size: 14px;
    color: #111;
}

.synthetic-bestiary-card-index {
    color: #111;
    font-size: 17px;
    letter-spacing: 1.4px;
}

.synthetic-bestiary-card-meta::after {
    content: "";
    flex: 0 0 34px;
    height: 10px;
    border: 1px solid #111;
    background:
        linear-gradient(
            90deg,
            #111 0 18%,
            transparent 18% 28%,
            #111 28% 46%,
            transparent 46% 56%,
            #111 56% 100%
        );
}


/* ==========================================
   PROJECT SHARED: RECURSIVE FEEDBACK
========================================== */

.recursive-detail {
    padding: 24px 20px 18px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
    min-height: 0;
}

.recursive-detail::-webkit-scrollbar { width: 0px; }

/* ── Statement Panel (Top) ── */
.recursive-project-header {
    background: rgba(255,255,255,0);
    padding: 16px 22px 12px;
    border-bottom: 1px solid #808080;
    max-width: 720px;
    width: min(100%, 720px);
    margin: 0 auto;
    border: 2px solid #000;
    box-sizing: border-box;
    flex-shrink: 0;
}

.recursive-project-title {
    font-size: 36px;
    font-weight: bold;
    color: #000;
    margin-bottom: 8px;
    text-align: center;
}

.recursive-project-meta {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
    text-align: center;
}

.recursive-description {
    font-family: 'VT323', monospace;
    font-size: 18px;
    line-height: 1.2;
    color: #111;
    margin: 0;
    text-align: left;
}

/* ── Main Video view (Middle) ── */
.recursive-main-view {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: transparent;
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
}

.recursive-video-wrapper {
    --recursive-video-ratio: 1.7778;
    --recursive-video-max-height: clamp(320px, 50vh, 580px);
    width: min(100%, calc(var(--recursive-video-max-height) * var(--recursive-video-ratio)));
    max-width: 100%;
    max-height: var(--recursive-video-max-height);
    aspect-ratio: var(--recursive-video-ratio);
    background: transparent;
    border: 1px solid #808080;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    line-height: 0;
    overflow: hidden;
    flex-shrink: 0;
}

.recursive-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    background: transparent;
}

/* ── Gallery Nav (Bottom) ── */
.recursive-gallery-nav {
    padding: 0;
    background: transparent;
    border-top: none;
    flex-shrink: 0;
    width: 100%;
}

.nav-header {
    font-family: 'VT323', monospace;
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.nav-item {
    appearance: none;
    background: linear-gradient(to bottom, #f0f0f0, #d7d7d7);
    border: 1px solid #8a8a8a;
    padding: 7px 10px;
    font-family: 'VT323', monospace;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    user-select: none;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.7),
        1px 1px 0 rgba(0,0,0,0.08);
    text-transform: uppercase;
    color: #111;
    letter-spacing: 0.5px;
}

.nav-item:hover {
    background: linear-gradient(to bottom, #f7f7f7, #e5e5e5);
    transform: translateY(-1px);
}

.nav-item:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.nav-item.active {
    background: #2a7a46;
    color: #fff;
    border-color: #000;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.18);
    transform: none;
}

/* ==========================================
   PROJECT SHARED: FILM VFX ARCHIVE
========================================== */

.film-vfx-detail {
    padding: 14px 16px 20px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
    box-sizing: border-box;
    background: transparent;
}

.film-vfx-detail::-webkit-scrollbar { width: 6px; }
.film-vfx-detail::-webkit-scrollbar-track { background: transparent; }
.film-vfx-detail::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

.film-vfx-detail .modal-meta {
    flex-shrink: 0;
    margin: 0;
    padding: 10px 0 0;
    font-family: 'VT323', monospace;
    font-size: 15px;
    color: #888;
    letter-spacing: 1.5px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.film-vfx-detail .film-vfx-video-wrapper {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid #808080;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    line-height: 0;
}

.film-vfx-detail .film-vfx-video-wrapper video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.film-vfx-detail .project-description {
    margin: 0;
    padding: 15px;
    border: 2px solid #000000;
    background: transparent;
    box-sizing: border-box;
    flex-shrink: 0;
    font-family: 'VT323', monospace;
    font-size: 18px;
    line-height: 1.2;
    color: #333;
}

.film-vfx-detail .film-vfx-workflow {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-sizing: border-box;
}

.film-vfx-detail .film-vfx-workflow-label {
    font-family: 'VT323', monospace;
    font-size: 20px;
    color: #888;
    letter-spacing: 2px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.film-vfx-detail .film-vfx-workflow img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
}

/* ==========================================
   TABLET OVERRIDES
========================================== */
body.is-tablet .scene-panel,
body.is-tablet .scene,
body.is-tablet .carousel,
body.is-tablet .card {
    touch-action: none;
}

body.is-tablet {
    --modal-margin-left: 28px;
    --modal-margin-bottom: -12px;
    --modal-width: min(58vw, 700px);
    --modal-min-width: 520px;
    --modal-max-width: 700px;
    --modal-height: min(88vh, 960px);
    --modal-max-height: 960px;
}

body.is-tablet .floating-header {
    top: 24px;
    left: 24px;
}

body.is-tablet .back-link {
    font-size: 18px;
    padding: 3px 10px;
}

body.is-tablet .window-header {
    gap: 10px;
}

body.is-tablet .window-header span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.is-tablet .close-btn {
    flex-shrink: 0;
}

body.is-tablet .window-content {
    padding: 14px;
}

body.is-tablet .modal-meta {
    flex-wrap: wrap;
    gap: 10px 12px;
}

body.is-tablet .project-description {
    font-size: 20px;
    line-height: 1.2;
}

body.is-tablet .modal-media {
    height: min(34vh, 280px);
}

body.is-tablet .infinite-gallery,
body.is-tablet .alchemist-detail,
body.is-tablet .synthetic-bestiary-detail,
body.is-tablet .recursive-detail {
    flex: 1 1 auto;
    min-height: 0;
}

body.is-tablet .film-vfx-detail {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px 18px 22px;
    gap: 16px;
}

body.is-tablet .film-vfx-detail .modal-meta {
    padding: 10px 0 0;
    font-size: 16px;
    letter-spacing: 1.5px;
}

body.is-tablet .film-vfx-detail .project-description {
    padding: 14px;
    font-size: 22px;
    line-height: 1.18;
}

body.is-tablet .film-vfx-detail .film-vfx-workflow {
    padding: 0;
}

body.is-tablet .film-vfx-detail .film-vfx-workflow-label {
    font-size: 22px;
    margin-bottom: 12px;
}

body.is-tablet .infinite-gallery {
    padding: 0;
    overflow: hidden;
    background: var(--latent-stage-bg);
}

body.is-tablet .canvas-viewport,
body.is-tablet .latent-mobile-archive,
body.is-tablet .latent-mobile-focus {
    display: none;
}

body.is-tablet .latent-tablet-archive {
    display: block;
}

body.is-tablet .alchemist-detail {
    padding: 0;
    background: transparent;
}

body.is-tablet .alch-top-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px 18px 14px;
}

body.is-tablet .alch-statement {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    padding: 14px;
}

body.is-tablet .alch-title {
    font-size: 40px;
    margin-bottom: 10px;
}

body.is-tablet .alch-description p {
    font-size: 22px;
    line-height: 1.18;
    margin-bottom: 12px;
}

body.is-tablet .alch-hero {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
}

body.is-tablet .alch-gallery-section {
    padding: 0 18px 22px;
}

body.is-tablet .alch-gallery-header {
    font-size: 17px;
    margin-bottom: 12px;
}

body.is-tablet .alch-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.is-tablet .synthetic-bestiary-detail {
    padding: 0;
    background: transparent;
}

body.is-tablet .synthetic-bestiary-top-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px 18px 14px;
}

body.is-tablet .synthetic-bestiary-statement,
body.is-tablet .synthetic-bestiary-meta {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    padding: 16px;
}

body.is-tablet .synthetic-bestiary-title {
    font-size: 40px;
    margin-bottom: 10px;
}

body.is-tablet .synthetic-bestiary-description p,
body.is-tablet .synthetic-bestiary-meta-copy {
    font-size: 22px;
    line-height: 1.18;
    margin-bottom: 12px;
}

body.is-tablet .synthetic-bestiary-meta-header {
    gap: 12px;
}

body.is-tablet .synthetic-bestiary-meta-label,
body.is-tablet .synthetic-bestiary-meta-id {
    font-size: 17px;
}

body.is-tablet .synthetic-bestiary-meta-copy {
    padding: 16px;
}

body.is-tablet .synthetic-bestiary-gallery-section {
    padding: 16px 18px 22px;
}

body.is-tablet .synthetic-bestiary-gallery {
    column-count: 3;
    column-gap: 10px;
}

body.is-tablet .synthetic-bestiary-card {
    margin-bottom: 10px;
    padding: 7px;
}

body.is-tablet .synthetic-bestiary-card-topline {
    margin-bottom: 7px;
    padding-bottom: 6px;
    font-size: 15px;
}

body.is-tablet .synthetic-bestiary-card-meta {
    font-size: 16px;
}

body.is-tablet .synthetic-bestiary-stat strong {
    font-size: 20px;
}

body.is-tablet .recursive-detail {
    padding: 18px 18px 20px;
    gap: 16px;
}

body.is-tablet .recursive-project-header {
    width: min(100%, 780px);
    max-width: 780px;
    padding: 18px 20px 14px;
}

body.is-tablet .recursive-description {
    font-size: 22px;
    line-height: 1.18;
}

body.is-tablet .recursive-video-wrapper {
    --recursive-video-max-height: clamp(320px, 42vh, 520px);
    border-width: 2px;
}

body.is-tablet .recursive-gallery-nav {
    width: 100%;
}

body.is-tablet .nav-header {
    font-size: 18px;
    margin-bottom: 10px;
}

body.is-tablet .nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.is-tablet .nav-item {
    min-height: 46px;
    font-size: 18px;
}

@media (orientation: portrait) {
    body.is-tablet {
        --modal-margin-left: 18px;
        --modal-margin-bottom: 0px;
        --modal-width: min(68vw, 700px);
        --modal-min-width: 480px;
        --modal-max-width: 700px;
        --modal-height: min(90vh, 1120px);
        --modal-max-height: 1120px;
    }

    body.is-tablet .floating-header {
        top: 20px;
        left: 18px;
    }

    body.is-tablet .window-content {
        padding: 16px;
    }

    body.is-tablet .infinite-gallery {
        padding: 0;
    }

    body.is-tablet .latent-tablet-grid {
        column-count: 3;
    }

    body.is-tablet .recursive-detail {
        gap: 14px;
    }

    body.is-tablet .recursive-project-header {
        width: 100%;
        max-width: none;
    }

    body.is-tablet .nav-grid {
        grid-template-columns: 1fr;
    }

    body.is-tablet .film-vfx-detail {
        padding: 16px 16px 22px;
        gap: 14px;
    }
}

@media (orientation: portrait) and (max-width: 900px) {
    body.is-tablet .latent-tablet-grid {
        column-count: 2;
    }
}

/* ==========================================
   MOBILE OVERRIDES
========================================== */
@media (max-width: 767px) {
    body.is-mobile .scene-panel,
    body.is-mobile .scene,
    body.is-mobile .carousel,
    body.is-mobile .card {
        touch-action: none;
    }

    body.is-mobile .floating-header {
        top: max(16px, env(safe-area-inset-top));
        left: 16px;
        z-index: 40;
    }

    body.is-mobile .back-link {
        font-size: 18px;
        padding: 4px 10px;
    }

    body.is-mobile .modal-overlay {
        z-index: 160;
        justify-content: stretch;
        align-items: stretch;
        padding-left: 0;
    }

    body.is-mobile .modal-overlay.active {
        background: rgba(0, 0, 0, 0.08);
        pointer-events: auto;
    }

    body.is-mobile .modal-content.window {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 100dvh;
        max-height: none;
        margin-bottom: 0;
        border-width: 0;
        border-radius: 0;
        box-shadow: none;
        background: rgba(255, 251, 251, 0.94);
        backdrop-filter: blur(10px);
        transform: none;
        transition: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    body.is-mobile .modal-overlay.active .modal-content.window {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.is-mobile .window-header {
        position: sticky;
        top: 0;
        z-index: 5;
        padding: calc(env(safe-area-inset-top) + 4px) 12px 4px;
        min-height: 22px;
        font-size: 17px;
        line-height: 1;
        gap: 12px;
        border-bottom: 0;
    }

    body.is-mobile .window-header span {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.is-mobile .close-btn {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        font-size: 16px;
        flex-shrink: 0;
    }

    body.is-mobile .window-content {
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
        padding: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    body.is-mobile .modal-meta {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    body.is-mobile .project-description {
        font-size: 22px;
        line-height: 1.25;
    }

    body.is-mobile .modal-media {
        height: min(42dvh, 320px);
    }

    body.is-mobile .infinite-gallery,
    body.is-mobile .alchemist-detail,
    body.is-mobile .synthetic-bestiary-detail,
    body.is-mobile .recursive-detail {
        flex: 1 1 auto;
        min-height: 0;
    }

    body.is-mobile .film-vfx-detail {
        flex: 1 1 auto;
        min-height: 0;
        padding: 14px 16px max(24px, env(safe-area-inset-bottom));
        gap: 14px;
    }

    body.is-mobile .film-vfx-detail .modal-meta {
        padding: 8px 0 0;
        font-size: 15px;
    }

    body.is-mobile .film-vfx-detail .film-vfx-video-wrapper {
        border-width: 2px;
        box-shadow: none;
        aspect-ratio: 16 / 9;
        max-height: min(52dvh, 560px);
    }

    body.is-mobile .film-vfx-detail .project-description {
        padding: 14px;
        font-size: 22px;
        line-height: 1.22;
    }

    body.is-mobile .film-vfx-detail .film-vfx-workflow {
        padding: 0;
    }

    body.is-mobile .film-vfx-detail .film-vfx-workflow-label {
        font-size: 22px;
        letter-spacing: 1px;
        margin-bottom: 12px;
    }

    /* Latent Apparition 的 mobile 视图要让十字星背景铺满整个弹窗内容区，
       所以这里单独取消 .window-content 的通用 padding。 */
    body.is-mobile .infinite-gallery {
        padding: 0;
        overflow: hidden;
    }

    body.is-mobile .canvas-viewport {
        display: none;
    }

    body.is-mobile .latent-mobile-archive {
        display: block;
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }

    body.is-mobile .latent-mobile-grid {
        column-gap: 16px;
    }

    body.is-mobile .latent-mobile-item {
        margin-bottom: 12px;
    }

    body.is-mobile .alchemist-detail {
        padding: 0;
        gap: 0;
        background: transparent;
    }

    body.is-mobile .alch-top-row {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px 16px 12px;
    }

    body.is-mobile .alch-statement,
    body.is-mobile .alch-hero {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
    }

    body.is-mobile .alch-statement {
        padding: 14px;
    }

    body.is-mobile .alch-title {
        font-size: 34px;
        margin-bottom: 10px;
    }

    body.is-mobile .alch-description p {
        font-size: 22px;
        line-height: 1.22;
        margin-bottom: 12px;
    }

    body.is-mobile .alch-video-wrapper {
        aspect-ratio: var(--alch-video-ratio);
        border-width: 2px;
        box-shadow: none;
    }

    body.is-mobile .alch-gallery-section {
        padding: 0 16px max(24px, env(safe-area-inset-bottom));
    }

    body.is-mobile .alch-gallery-header {
        font-size: 18px;
        letter-spacing: 1px;
        margin-bottom: 12px;
    }

    body.is-mobile .alch-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    body.is-mobile .synthetic-bestiary-detail {
        padding: 0;
        gap: 0;
        background: transparent;
    }

    body.is-mobile .synthetic-bestiary-top-row {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px 16px 12px;
    }

    body.is-mobile .synthetic-bestiary-statement,
    body.is-mobile .synthetic-bestiary-meta {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        padding: 12px;
    }

    body.is-mobile .synthetic-bestiary-title {
        font-size: 34px;
        margin-bottom: 10px;
    }

    body.is-mobile .synthetic-bestiary-description p,
    body.is-mobile .synthetic-bestiary-meta-copy {
        font-size: 22px;
        line-height: 1.22;
        margin-bottom: 12px;
    }

    body.is-mobile .synthetic-bestiary-meta-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding-bottom: 10px;
    }

    body.is-mobile .synthetic-bestiary-meta-label,
    body.is-mobile .synthetic-bestiary-meta-id {
        font-size: 18px;
        letter-spacing: 1px;
    }

    body.is-mobile .synthetic-bestiary-meta-copy {
        padding: 14px;
    }

    body.is-mobile .synthetic-bestiary-stat {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    body.is-mobile .synthetic-bestiary-stat span {
        min-height: 26px;
        padding: 0 8px;
    }

    body.is-mobile .synthetic-bestiary-stat strong {
        text-align: left;
    }

    body.is-mobile .synthetic-bestiary-gallery-section {
        padding: 14px 16px max(24px, env(safe-area-inset-bottom));
    }

    body.is-mobile .synthetic-bestiary-gallery {
        column-count: 2;
        column-gap: 10px;
    }

    body.is-mobile .synthetic-bestiary-card {
        margin-bottom: 10px;
        padding: 6px;
    }

    body.is-mobile .synthetic-bestiary-card-topline {
        margin-bottom: 6px;
        padding-bottom: 6px;
        font-size: 13px;
    }

    body.is-mobile .synthetic-bestiary-card-tag,
    body.is-mobile .synthetic-bestiary-card-code {
        min-height: 20px;
        padding: 0 5px;
    }

    body.is-mobile .synthetic-bestiary-card-meta {
        gap: 8px;
        font-size: 14px;
        margin-top: 6px;
        padding-top: 6px;
    }

    body.is-mobile .synthetic-bestiary-card-index {
        font-size: 15px;
    }

    body.is-mobile .synthetic-bestiary-card-meta::after {
        flex-basis: 26px;
        height: 8px;
    }

    body.is-mobile .synthetic-bestiary-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    body.is-mobile .synthetic-bestiary-stat span {
        font-size: 15px;
    }

    body.is-mobile .synthetic-bestiary-stat strong {
        font-size: 18px;
        text-align: left;
    }

    body.is-mobile .recursive-detail {
        padding: 16px 16px max(24px, env(safe-area-inset-bottom));
        gap: 14px;
    }

    body.is-mobile .recursive-project-header {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 14px;
        border-bottom: 2px solid #000;
    }

    body.is-mobile .recursive-description {
        font-size: 22px;
        line-height: 1.22;
    }

    body.is-mobile .recursive-main-view {
        justify-content: stretch;
        margin-top: 8px;
    }

    body.is-mobile .recursive-video-wrapper {
        width: 100%;
        max-height: none;
        border-width: 2px;
        box-shadow: none;
    }

    body.is-mobile .recursive-gallery-nav {
        width: 100%;
    }

    body.is-mobile .nav-header {
        font-size: 18px;
        margin-bottom: 10px;
    }

    body.is-mobile .nav-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    body.is-mobile .nav-item {
        min-height: 48px;
        padding: 10px 12px;
        font-size: 18px;
    }

    body.is-mobile.mobile-detail-open {
        overflow: hidden;
    }

    body.is-mobile.mobile-detail-open .scene-panel,
    body.is-mobile.mobile-detail-open .floating-header {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}