/* ==========================================================
   Arky 全站暗色 UI（由 /book 页面视觉抽出）
   - .ark-dark：暗色主题变量与基础排版，挂在页面根容器上
   - 玻璃卡 .ark-glass、按钮 .ark-btn、分区 .ark-sec、入场 .js-reveal
   - Hero：.ark-hero（取景框 / HUD / 写实相机 / 温哥华天际线）
   配套脚本：/static/scripts/ark-fx.js
   ========================================================== */

.ark-dark {
    --bg: #070a12;
    --bg2: #0a0f1c;
    --ink: #eef2f8;
    --text: #b8c1d2;
    --mute: #7c879c;
    --line: rgba(255,255,255,.08);
    --line2: rgba(255,255,255,.14);
    --glass: rgba(255,255,255,.03);
    --glass2: rgba(255,255,255,.055);
    --cyan: #2fd3c0;
    --blue: #6d9af8;
    --magenta: #d45cf0;
    --amber: #f2b860;
    --green: #2fd3a0;
    --serif: 'Cormorant Garamond', 'Noto Serif SC', 'Songti SC', serif;
    --sans: 'Noto Sans SC', '微软雅黑', 'PingFang SC', sans-serif;
    --mono: 'IBM Plex Mono', Consolas, monospace;
    --ease: cubic-bezier(.2,.7,.3,1);
    color: var(--text);
    background: var(--bg);
    font-family: var(--sans);
    font-weight: 400;
    overflow-x: clip;
}
/* 防横向滚动用 clip 而不是 hidden：hidden 会让子元素的 position: sticky 失效 */
body { overflow-x: clip; }
.ark-dark h1, .ark-dark h2, .ark-dark h3, .ark-dark h4, .ark-dark b, .ark-dark strong, .ark-dark dd { color: var(--ink); }
.ark-dark a { color: var(--blue); }
.ark-dark a:hover { color: #9dbcff; text-decoration: none; }


/* ---------- 通用排版 ---------- */
.ark-kicker, .ark-en { font-family: 'Cormorant Garamond', 'Times New Roman', serif; }
.ark-mono { font-family: 'IBM Plex Mono', Consolas, monospace; }
.ark-kicker {
    letter-spacing: 0.28em;
    font-size: 0.78rem;
    color: var(--blue);
    margin-bottom: 0.8rem;
}
.ark-mono { color: var(--blue); display: block; font-size: 0.8rem; letter-spacing: 0.12em; }

/* ---------- 按钮基础 ---------- */
.ark-btn {
    display: inline-block;
    border: 1px solid transparent;
    padding: 0.7rem 1.4rem;
    text-decoration: none;
    background: none;
    cursor: pointer;
    font-size: 0.95rem;
}
.ark-btn--primary { background: var(--blue); color: #fff; }
.ark-btn--ghost { border-color: var(--blue); color: var(--blue); }
.ark-btn--line { border-color: var(--ink); color: var(--ink); }
.ark-btn:hover { opacity: 0.88; text-decoration: none; color: inherit; }

/* 暗色主题按钮：胶囊 + 描边光晕 */
.ark-dark .ark-btn {
    border-radius: 999px;
    padding: 0.72rem 1.45rem;
    font-weight: 500;
    letter-spacing: .02em;
    transition: transform .25s var(--ease), box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.ark-dark .ark-btn span { display: inline-block; transition: transform .25s var(--ease); }
.ark-dark .ark-btn:hover { opacity: 1; transform: translateY(-2px); }
.ark-dark .ark-btn:hover span { transform: translateX(3px); }
.ark-dark .ark-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.ark-dark .ark-btn--primary {
    background: linear-gradient(135deg, #7aa5ff, #5b84f0);
    color: #061026;
    border-color: rgba(157,188,255,.6);
    box-shadow: 0 0 0 1px rgba(109,154,248,.25), 0 10px 30px -8px rgba(109,154,248,.65);
}
.ark-dark .ark-btn--primary:hover { color: #061026; box-shadow: 0 0 0 1px rgba(157,188,255,.6), 0 14px 40px -6px rgba(109,154,248,.85); }
.ark-dark .ark-btn--ghost {
    border-color: var(--line2);
    color: var(--ink);
    background: rgba(255,255,255,.03);
}
.ark-dark .ark-btn--ghost:hover { border-color: var(--blue); color: #fff; box-shadow: 0 0 22px -6px rgba(109,154,248,.7); }
.ark-dark .ark-btn--line { border-color: var(--line2); color: var(--mute); }
.ark-dark .ark-btn--pill {
    border-color: color-mix(in srgb, var(--tone, var(--blue)) 55%, transparent);
    color: var(--ink);
    background: color-mix(in srgb, var(--tone, var(--blue)) 10%, transparent);
    box-shadow: 0 0 0 0 transparent;
}
.ark-dark .ark-btn--pill:hover,
.ark-dark .ark-btn--pill.is-on {
    color: #fff;
    border-color: var(--tone, var(--blue));
    background: color-mix(in srgb, var(--tone, var(--blue)) 22%, transparent);
    box-shadow: 0 0 26px -6px var(--tone, var(--blue));
}

/* ---------- 玻璃卡 ---------- */
.ark-glass {
    --tone: var(--blue);
    --mx: 50%;
    --my: 50%;
    --rx: 0deg;
    --ry: 0deg;
    position: relative;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: 14px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    isolation: isolate;
}
.ark-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--tone) 16%, transparent), transparent 60%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.ark-glass:hover::before { opacity: 1; }
[data-tone="0"] { --tone: var(--cyan); }
[data-tone="1"] { --tone: var(--blue); }
[data-tone="2"] { --tone: var(--magenta); }
[data-tone="3"] { --tone: var(--amber); }
.ark-dark .js-tilt.is-tilting {
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px);
}

/* ---------- 分区通用 ---------- */
.ark-sec {
    position: relative;
    padding: 5.5rem 0;
    background: var(--bg);
    overflow: hidden;
}
.ark-sec--alt { background: var(--bg2); }
.ark-sec::before {
    content: "";
    position: absolute;
    width: 60vw;
    height: 60vw;
    max-width: 820px;
    max-height: 820px;
    left: -18vw;
    top: -10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47,211,192,.09), transparent 62%);
    transform: translate3d(0, calc(var(--scroll, 0) * -80px), 0);
    pointer-events: none;
}
.ark-sec--alt::before {
    left: auto;
    right: -20vw;
    background: radial-gradient(circle, rgba(109,154,248,.10), transparent 62%);
}
.ark-sec > .container { position: relative; z-index: 1; }
.ark-section-head { margin: 0 0 2.4rem; }
.ark-eyebrow {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .2em;
    color: var(--cyan);
    margin: 0 0 .9rem;
}
.ark-eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.ark-dark .ark-section-head h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    letter-spacing: .01em;
    margin-bottom: .5rem;
}
.ark-dark .ark-en { color: var(--mute); letter-spacing: 0.08em; font-size: 1.05rem; font-style: italic; }

/* ---------- 入场 reveal ---------- */
.js-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s var(--ease); }
.js-reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================
   Hero
   ========================================================== */
.ark-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    background: #04060c;
    color: #f4f7fc;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
}
.ark-hero__ambient {
    position: absolute;
    z-index: -5;
    inset: 0;
    overflow: hidden;
}
.ark-hero__ambient img {
    position: absolute;
    left: -60px; top: -60px;
    width: calc(100% + 120px);
    height: calc(100% + 120px);
    object-fit: cover;
    filter: blur(40px) saturate(1.15) brightness(.6);
    opacity: 0;
    transition: opacity 2.2s ease;
}
.ark-hero__ambient img.is-active { opacity: .6; }
.ark-hero__fx {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 0 1px rgba(0,0,0,.65));
}
.ark-hero__shade {
    position: absolute;
    z-index: -3;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(4,6,12,.9) 0%, rgba(4,6,12,.72) 38%, rgba(4,6,12,.45) 62%, rgba(4,6,12,.7) 100%),
        linear-gradient(0deg, rgba(7,10,18,1) 0%, rgba(7,10,18,.5) 24%, transparent 50%),
        radial-gradient(60% 50% at 12% 20%, rgba(47,211,192,.10), transparent 70%),
        radial-gradient(50% 40% at 60% 90%, rgba(212,92,240,.10), transparent 70%);
}
.ark-hero__grid {
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: .14;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 85%);
    mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 85%);
}

/* 取景器舞台：3:4 完整展示作品，HUD 环绕 */
.ark-hero__stage {
    position: relative;
    width: clamp(300px, 29vw, 440px);
    padding: 0 22px;
    color: #9fbbff;
    font-family: var(--mono);
    text-shadow: 0 0 14px rgba(109,154,248,.24);
}
.ark-hero__stage::before, .ark-hero__stage::after {
    content: "";
    position: absolute;
    width: 44px; height: 44px;
    border-color: #8fb2ff;
    border-style: solid;
    pointer-events: none;
}
.ark-hero__stage::before { left: 8px; top: 18px; border-width: 2px 0 0 2px; }
.ark-hero__stage::after { right: 8px; bottom: 18px; border-width: 0 2px 2px 0; }
.ark-hero__frame {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 4px;
    background: #0b1222;
    border: 1px solid rgba(159,187,255,.22);
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.95), 0 0 70px -20px rgba(109,154,248,.45);
}
.ark-hero__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent calc(33.333% - 1px), rgba(255,255,255,.14) 33.333%, transparent calc(33.333% + 1px), transparent calc(66.666% - 1px), rgba(255,255,255,.14) 66.666%, transparent calc(66.666% + 1px)),
        linear-gradient(0deg, transparent calc(33.333% - 1px), rgba(255,255,255,.14) 33.333%, transparent calc(33.333% + 1px), transparent calc(66.666% - 1px), rgba(255,255,255,.14) 66.666%, transparent calc(66.666% + 1px)),
        radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(4,6,12,.45) 100%);
}
.ark-hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.95) contrast(1.05);
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 2s ease, transform 8s ease;
    will-change: opacity, transform;
}
.ark-hero__slide.is-active { opacity: 1; transform: scale(1); }
.ark-hud__corner { position: absolute; z-index: 3; width: 22px; height: 22px; border-color: rgba(220,232,255,.85); border-style: solid; pointer-events: none; }
.ark-hud__corner.is-a { right: 10px; top: 10px; border-width: 1.5px 1.5px 0 0; }
.ark-hud__corner.is-b { left: 10px; bottom: 10px; border-width: 0 0 1.5px 1.5px; }
.ark-hud__focus {
    position: absolute;
    z-index: 3;
    left: 50%; top: 50%;
    width: 76px; height: 50px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(220,232,255,.8);
    animation: hudFocus 4s cubic-bezier(.5,0,.25,1) infinite;
}
.ark-hud__focus::before, .ark-hud__focus::after { content: ""; position: absolute; background: #dce8ff; }
.ark-hud__focus::before { width: 14px; height: 1px; left: 30px; top: 24px; }
.ark-hud__focus::after { width: 1px; height: 14px; left: 37px; top: 18px; }
.ark-hud__top, .ark-hud__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    font-size: 9px;
    letter-spacing: .12em;
    white-space: nowrap;
}
.ark-hud__top { margin: 0 0 12px; }
.ark-hud__bottom { margin: 12px 0 0; }
.ark-hud__mode { color: #fff; font-size: 10px; }
.ark-hud__level { display: flex; gap: 4px; align-items: flex-end; }
.ark-hud__level i { display: block; width: 3px; background: #8fb2ff; opacity: .35; }
.ark-hud__level i:nth-child(1), .ark-hud__level i:nth-child(7) { height: 6px; }
.ark-hud__level i:nth-child(2), .ark-hud__level i:nth-child(6) { height: 10px; }
.ark-hud__level i:nth-child(3), .ark-hud__level i:nth-child(5) { height: 14px; }
.ark-hud__level i:nth-child(4) { height: 18px; opacity: 1; }
.ark-hud__geo {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-size: 8px;
    letter-spacing: .18em;
    opacity: .75;
}
.ark-hud__scan {
    position: absolute;
    z-index: 3;
    left: 0; right: 0; top: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(190,210,255,.9), transparent);
    box-shadow: 0 0 18px rgba(109,154,248,.75);
    animation: hudScan 5.5s ease-in-out infinite alternate;
}

/* 写实单反 */
.ark-cam {
    --cx: 0px;
    --cy: 0px;
    position: relative;
    width: 140px;
    height: 98px;
    margin: 0 0 2.6rem;
    color: var(--blue);
    pointer-events: none;
    transform: translate3d(var(--cx), var(--cy), 0);
    transition: transform .18s cubic-bezier(.2,.75,.2,1);
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(109,154,248,.16));
}
.ark-cam svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ark-cam__body { fill: url(#camBody); stroke: rgba(143,178,255,.55); stroke-width: 1; }
.ark-cam__prism { fill: url(#camPrism); stroke: rgba(143,178,255,.5); stroke-width: 1; stroke-linejoin: round; }
.ark-cam__grip { fill: url(#camGrip); stroke: rgba(143,178,255,.3); stroke-width: .8; }
.ark-cam__lug, .ark-cam__metal { fill: #2b3347; stroke: rgba(215,225,240,.45); stroke-width: .7; }
.ark-cam__shutter { fill: #c8d2e4; stroke: #fff; stroke-width: .4; }
.ark-cam__knurl { stroke: rgba(215,225,240,.5); stroke-width: .6; }
.ark-cam__line { fill: none; stroke: rgba(215,225,240,.28); stroke-width: .7; }
.ark-cam__rec { fill: #ff4f5e; filter: drop-shadow(0 0 4px #ff4f5e); animation: camRec 1.6s ease-in-out infinite; }
.ark-cam__mount { fill: #0d111b; stroke: rgba(215,225,240,.5); stroke-width: 1; }
.ark-cam__focus-ring { fill: #141925; stroke: rgba(143,178,255,.5); stroke-width: .8; }
.ark-cam__knurl-ring { fill: none; stroke: #2f374a; stroke-width: 5; stroke-dasharray: 1 1.6; }
.ark-cam__ap-ring { fill: #0a0e17; stroke: rgba(215,225,240,.35); stroke-width: .6; }
.ark-cam__ticks { fill: none; stroke: rgba(230,236,248,.75); stroke-width: 2.4; stroke-dasharray: .5 5.3; transform-origin: 100px 86px; animation: camSpin 14s linear infinite; }
.ark-cam__glass { fill: url(#camGlass); stroke: #000; stroke-width: 1; }
.ark-cam__inner { fill: none; stroke: rgba(159,192,255,.35); stroke-width: .6; }
.ark-cam__coat { fill: none; stroke: url(#camCoat); stroke-width: 3; stroke-linecap: round; }
.ark-cam__flare { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.4; stroke-linecap: round; }
.ark-cam__spot { fill: rgba(255,255,255,.85); }
.ark-cam__brackets { transform-origin: 100px 86px; animation: camLock 3.2s cubic-bezier(.5,0,.25,1) infinite; }
.ark-cam__dot { animation: camBlink 3.2s ease infinite; }
.ark-cam__readout {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    display: flex;
    gap: 8px;
    align-items: center;
    color: #c8d5e4;
    font: 8px var(--mono);
    letter-spacing: .12em;
    white-space: nowrap;
}
.ark-cam__readout i { width: 24px; height: 1px; background: currentColor; }
.ark-cam__readout b { color: var(--blue); font-weight: 500; }
.ark-cam__readout em { font-style: normal; color: #ff7a85; }

/* 温哥华天际线 */
.ark-skyline {
    position: absolute;
    z-index: 0;
    left: 0; right: 0; bottom: -2px;
    height: clamp(150px, 16.25vw, 260px);
    pointer-events: none;
    color: #8fb2ff;
}
.ark-skyline svg { display: block; width: 100%; height: 100%; overflow: visible; }
@media (min-width: 1846px) {
    .ark-skyline { height: 300px; }
    .ark-skyline::before {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 58px;
        background: linear-gradient(#0d1730, #04060c);
        border-top: 1px solid rgba(143,178,255,.35);
    }
    .ark-skyline svg {
        position: relative;
        width: 1846px;
        margin: 0 auto;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    }
}
.sky-mtn-back { fill: url(#skMtnBack); opacity: .55; }
.sky-mtn-front { fill: url(#skMtnFront); stroke: rgba(109,154,248,.25); stroke-width: 1; stroke-linejoin: round; }
.sky-edge { fill: none; stroke: rgba(159,187,255,.38); stroke-width: .7; }
.sky-draw {
    fill: none;
    stroke: #b5ccff;
    stroke-width: 1;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 100;
    opacity: .7;
    animation: skyDraw 7s cubic-bezier(.2,.8,.25,1) infinite alternate;
}
.sky-draw--sail { stroke: #ffffff; stroke-width: .8; }
.sky-sail { filter: drop-shadow(0 0 5px rgba(255,214,170,.45)); }
.sky-beacon { fill: #ff5a3c; filter: drop-shadow(0 0 3px #ff5a3c); animation: skyBlink 2.4s ease-in-out infinite; }
.sky-beacon--white { fill: #f4f8ff; filter: drop-shadow(0 0 3px #bcd2ff); animation-duration: 3.2s; }
.sky-cp .sky-beacon:nth-of-type(even) { animation-delay: -1.2s; }
.sky-ring { fill: none; stroke: #ffe2a8; stroke-width: 1.4; stroke-dasharray: .1 3.2; stroke-linecap: round; filter: drop-shadow(0 0 2px #ffcf8a); animation: skyFlow 14s linear infinite; }
.sky-lift { animation: skyWindow 4s ease-in-out infinite; }
.sky-lamps { fill: none; stroke: #ffd98a; stroke-width: 1.6; stroke-dasharray: .1 6; stroke-linecap: round; filter: drop-shadow(0 0 2px #ffb85c); }
.sky-bulbs { fill: none; stroke: #ffe6b0; stroke-width: 1.5; stroke-dasharray: .1 5; stroke-linecap: round; filter: drop-shadow(0 0 2px #ffcf8a); animation: skyFlow 20s linear infinite; }
.sky-pier { fill: none; stroke: rgba(255,226,170,.5); stroke-width: .6; }
.sky-led { fill: none; stroke: url(#skLed); stroke-width: 3; filter: drop-shadow(0 0 4px rgba(212,92,240,.7)); animation: skyLed 6s ease-in-out infinite; }
.sky-ground { fill: none; stroke: rgba(143,178,255,.45); stroke-width: .8; }
.sky-shimmer { fill: none; stroke: #ffd98a; stroke-width: 1.2; stroke-dasharray: 3 7; opacity: .45; animation: skyFlow 9s linear infinite; }
.sky-water { fill: none; stroke: rgba(109,154,248,.3); stroke-width: .8; stroke-dasharray: 90 18; animation: skyFlow 12s linear infinite; }
.sky-scan { fill: url(#skScan); opacity: .2; mix-blend-mode: screen; transform-box: fill-box; animation: skyScan 26s cubic-bezier(.45,0,.55,1) infinite alternate; }
.sky-boat { transform: translate(150px, 190px); animation: boatSail 70s linear infinite; }
.sky-boat__bob { transform-box: fill-box; transform-origin: 30% 80%; animation: boatBob 4.2s ease-in-out infinite; }
.sky-boat__wake { fill: none; stroke: rgba(170,215,255,.55); stroke-width: .8; stroke-linecap: round; stroke-dasharray: 6 5; animation: skyFlow 6s linear infinite reverse; }
.sky-boat__tag { font: 500 9px var(--mono); letter-spacing: .08em; fill: #9fdcff; paint-order: stroke; stroke: rgba(4,6,12,.7); stroke-width: 2px; }
.ark-skyline__label {
    position: absolute;
    right: clamp(16px, 4vw, 60px);
    bottom: 14px;
    color: #c8d5e4;
    font: 8px var(--mono);
    letter-spacing: .16em;
}
.ark-skyline__label b { color: var(--cyan); font-weight: 500; }

/* 文案层 */
.ark-hero__inner {
    position: relative;
    z-index: 2;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 5vw, 6rem);
    align-content: center;
    align-items: center;
    padding-top: 100px;
    padding-bottom: clamp(150px, 14.4vw, 215px);
}
@media (min-width: 1400px) {
    .ark-hero > .container { max-width: 1280px; }
}
.ark-hero__copy { max-width: 40rem; }
.ark-hero .ark-kicker { color: var(--cyan); display: flex; align-items: center; gap: .9rem; font-family: var(--mono); font-size: .72rem; }
.ark-hero .ark-kicker::before { content: ""; width: 40px; height: 1px; background: currentColor; }
.ark-hero__title {
    font-family: var(--sans);
    font-size: clamp(2.3rem, 5.2vw, 4.4rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: #fff !important;
    margin: 0 0 1.2rem;
    text-wrap: balance;
}
.ark-hero__title .is-outline {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1.2px rgba(255,255,255,.78);
}
.ark-hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); margin: 0 0 .5rem; color: #e3e9f4; }
.ark-hero__lead { color: #a9b4c8; max-width: 36rem; line-height: 1.8; font-weight: 300; }
.ark-hero__reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s ease, transform .7s ease;
}
.ark-hero__reveal.is-in { opacity: 1; transform: none; }
.ark-crumb { margin-top: 1rem; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--mute); }
.ark-crumb a { color: #dfe6f3; border-bottom: 1px solid var(--blue); }
.ark-crumb span { margin: 0 0.4rem; color: #556; }
.ark-hero__actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }

.ark-promises {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    grid-column: 1 / -1;
    margin-top: 2.6rem;
}
.ark-promise {
    padding: 1.1rem 1.2rem 1.15rem;
    background: rgba(8,12,24,.55);
    transition: border-color .3s ease, transform .3s var(--ease);
}
.ark-promise:hover { border-color: color-mix(in srgb, var(--tone) 50%, transparent); }
.ark-promise .ark-mono { color: var(--tone); font-size: .78rem; }
.ark-promise p { margin: .45rem 0 0; font-size: .93rem; line-height: 1.65; color: #d3dbe8; }


/* ---------- Hero 扩展：宽画幅 / 多段文案 / 进度指示 ---------- */
.ark-hero--wide .ark-hero__stage { width: clamp(360px, 44vw, 660px); }
.ark-hero--wide .ark-hero__frame { aspect-ratio: 16 / 9; }
video.ark-hero__slide { background: #0b1222; }
.ark-hero__texts { display: grid; }
.ark-hero__text {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .7s ease, transform .7s var(--ease), visibility 0s linear .7s;
}
.ark-hero__text.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .15s, .15s, 0s; }
.ark-hero__text .ark-hero__title a { color: inherit; text-decoration: none; }
.ark-hero__text .ark-hero__title a:hover { color: #fff; text-shadow: 0 0 24px rgba(109,154,248,.6); }
.ark-hero__text .ark-hero__lead { margin-bottom: 1.6rem; }
.ark-hero__text + .ark-hero__text { pointer-events: none; }
.ark-hero__text.is-active { pointer-events: auto; }
.ark-hero__dots {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 2.6rem;
}
.ark-hero__dots button {
    position: relative;
    overflow: hidden;
    text-align: left;
    padding: 1rem 1.15rem 1.1rem;
    background: rgba(8,12,24,.55);
    color: #d3dbe8;
    cursor: pointer;
    transition: border-color .3s ease, background .3s ease;
}
.ark-hero__dots button:nth-child(3n+1) { --tone: var(--cyan); }
.ark-hero__dots button:nth-child(3n+2) { --tone: var(--blue); }
.ark-hero__dots button:nth-child(3n+3) { --tone: var(--magenta); }
.ark-hero__dots .ark-mono { color: var(--tone); font-size: .76rem; }
.ark-hero__dots b { display: block; margin-top: .35rem; font-size: .98rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ark-hero__dots small { display: block; color: var(--mute); font: .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ark-hero__dots i {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--tone), #fff);
    box-shadow: 0 0 10px var(--tone);
    transform: scaleX(0);
    transform-origin: left center;
}
.ark-hero__dots button:hover { border-color: color-mix(in srgb, var(--tone) 45%, transparent); }
.ark-hero__dots button.is-active { border-color: color-mix(in srgb, var(--tone) 60%, transparent); background: rgba(12,18,34,.75); }
.ark-hero__dots button.is-active i { animation: arkDot var(--dur, 7000ms) linear forwards; }

/* ==========================================================
   内页通用：页头 / 面包屑 / 标签 / 分页 / 正文 / 灯箱
   ========================================================== */
.ark-pagehead {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #04060c;
    min-height: calc(100vw * 500 / 1440);
    padding: 150px 0 clamp(170px, 17vw, 270px);
}
.ark-pagehead__bg {
    position: absolute;
    z-index: -3;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center 35%;
    background-size: cover;
    filter: saturate(1.05) brightness(.72);
}
.ark-pagehead::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(4,6,12,.92) 0%, rgba(4,6,12,.6) 55%, rgba(4,6,12,.35) 100%),
        linear-gradient(0deg, var(--bg) 0%, rgba(7,10,18,.4) 40%, transparent 70%),
        radial-gradient(50% 60% at 10% 20%, rgba(47,211,192,.12), transparent 70%);
}
.ark-pagehead::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .12;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(to right, #000, transparent 75%);
    mask-image: linear-gradient(to right, #000, transparent 75%);
}
.ark-pagehead__inner { position: relative; z-index: 2; }
.ark-pagehead h1 {
    margin: 0 0 1rem;
    max-width: 22ch;
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    line-height: 1.15;
    color: #fff !important;
    text-wrap: balance;
}
.ark-pagehead__lead { max-width: 46rem; color: #c3cde0; font-size: 1.02rem; line-height: 1.85; margin: 0 0 1.4rem; }
.ark-crumbs { margin: 0 0 1.6rem; }
.ark-crumbs ol { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; font-size: .82rem; color: var(--mute); }
.ark-crumbs li + li::before { content: "/"; margin-right: .3rem; color: #4b5568; }
.ark-crumbs a { color: #dfe6f3; border-bottom: 1px solid rgba(109,154,248,.6); }
.ark-crumbs a:hover { color: #fff; }
.ark-crumbs [aria-current] { color: #9aa6bb; }
.ark-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.ark-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--line2);
    background: rgba(255,255,255,.04);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #d3dbe8;
    font-size: .84rem;
    line-height: 1.2;
    transition: border-color .25s ease, color .25s ease, box-shadow .25s ease, background .25s ease;
}
.ark-chip i { color: var(--cyan); }
a.ark-chip:hover, .ark-chip.is-on { color: #fff; border-color: var(--blue); background: rgba(109,154,248,.14); box-shadow: 0 0 20px -6px rgba(109,154,248,.8); text-decoration: none; }
.ark-chip small { font: .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }

/* 分页（PageHelper 输出 .pager-nav .pagination） */
.ark-dark .pager-nav { display: flex; justify-content: center; margin-top: 3rem; }
.ark-dark .pagination { gap: .45rem; flex-wrap: wrap; justify-content: center; margin: 0; }
.ark-dark .pagination .page-link {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .8rem;
    border-radius: 999px !important;
    border: 1px solid var(--line2);
    background: rgba(255,255,255,.03);
    color: #c6d0e2;
    font-family: var(--mono);
    font-size: .86rem;
    transition: border-color .25s ease, color .25s ease, box-shadow .25s ease, background .25s ease;
}
.ark-dark .pagination a.page-link:hover { color: #fff; border-color: var(--blue); background: rgba(109,154,248,.12); box-shadow: 0 0 20px -6px rgba(109,154,248,.8); }
.ark-dark .pagination .active .page-link { color: #061026; border-color: #9dbcff; background: linear-gradient(135deg, #7aa5ff, #5b84f0); box-shadow: 0 0 22px -6px rgba(109,154,248,.9); }
.ark-dark .pagination .disabled .page-link { opacity: .35; background: transparent; }

/* 正文排版 */
.ark-prose { color: var(--text); font-size: 1rem; line-height: 1.95; }
.ark-prose p { margin: 0 0 1.1em; }
/* 从 Word / Google Docs 粘贴的正文自带黑色与字体内联样式，暗色页面下统一覆盖 */
.ark-dark .ark-prose :is(p, span, font, div, li, td, th, strong, b, em, i, u, h1, h2, h3, h4, h5, h6) {
    color: inherit !important;
    background-color: transparent !important;
    font-family: inherit !important;
}
.ark-dark .ark-prose :is(h1, h2, h3, h4, h5, h6) { color: var(--ink) !important; }
.ark-dark .ark-prose a, .ark-dark .ark-prose a * { color: var(--blue) !important; }
.ark-prose h2, .ark-prose h3, .ark-prose h4 { color: var(--ink); margin: 1.6em 0 .7em; line-height: 1.4; }
.ark-prose a { color: var(--blue); border-bottom: 1px solid rgba(109,154,248,.4); }
.ark-prose img { max-width: 100%; height: auto; border-radius: 10px; margin: .6rem 0; }
.ark-prose blockquote { margin: 1.2rem 0; padding: .8rem 1.1rem; border-left: 3px solid var(--cyan); background: rgba(47,211,192,.06); border-radius: 0 10px 10px 0; color: #d3dbe8; }
.ark-prose ul, .ark-prose ol { padding-left: 1.3rem; }
.ark-prose table { width: 100%; border-collapse: collapse; }
.ark-prose th, .ark-prose td { border: 1px solid var(--line2); padding: .5rem .7rem; }

/* 灯箱（ark-fx.js：[data-lightbox] 分组） */
.ark-lightbox { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; font-family: 'Noto Sans SC', '微软雅黑', sans-serif; }
.ark-lightbox.is-on { display: flex; animation: arkFade .2s ease both; }
.ark-lightbox__mask { position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 50%, rgba(14,20,38,.95), rgba(3,5,10,.98)); cursor: zoom-out; }
.ark-lightbox__stage { position: relative; z-index: 1; margin: 0; max-width: 94vw; max-height: 94vh; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.ark-lightbox__img { max-width: 94vw; max-height: 80vh; object-fit: contain; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 60px -20px rgba(109,154,248,.5); }
.ark-lightbox__stage figcaption { max-width: 60rem; color: #fff; text-align: center; display: flex; flex-direction: column; gap: .25rem; padding: 0 1rem; }
.ark-lightbox__title { font-weight: 600; }
.ark-lightbox__sub { color: #2fd3c0; font: .78rem 'IBM Plex Mono', Consolas, monospace; letter-spacing: .1em; }
.ark-lightbox__count { color: #6d9af8; font: .78rem 'IBM Plex Mono', Consolas, monospace; letter-spacing: .12em; }
.ark-lightbox__btn { position: absolute; z-index: 2; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.ark-lightbox__btn:hover { background: rgba(109,154,248,.4); border-color: #9dbcff; box-shadow: 0 0 24px -4px rgba(109,154,248,.8); }
.ark-lightbox__close { top: 1.2rem; right: 1.4rem; width: 44px; height: 44px; border-radius: 50%; font-size: 1.6rem; line-height: 1; }
.ark-lightbox__nav { top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; font-size: 1.8rem; line-height: 1; }
.ark-lightbox__nav--prev { left: 1rem; }
.ark-lightbox__nav--next { right: 1rem; }
body.is-locked { overflow: hidden; }
@media (max-width: 767.98px) {
    .ark-pagehead { padding-top: 110px; }
    .ark-lightbox__nav { top: auto; bottom: 1.2rem; margin-top: 0; }
}

/* ==========================================================
   AI Page：/post/detail/{slug}（模板 AI Page），正文为整页 HTML
   ========================================================== */
.ai-page { display: block; min-height: 60vh; padding-top: 60px; overflow-x: clip; }
.ai-page > .ark-dark:first-child, .ai-page > .ark-hero:first-child { margin-top: -60px; }
.ai-page img, .ai-page video { max-width: 100%; height: auto; }
.ai-page-preview-bar {
    position: fixed; z-index: 1100; left: 50%; bottom: 18px; transform: translateX(-50%);
    display: flex; gap: 1rem; align-items: center;
    padding: .55rem 1.1rem; border-radius: 999px;
    background: rgba(10,14,26,.9); border: 1px solid rgba(242,184,96,.5);
    color: #f6c77a; font: 500 .82rem 'Noto Sans SC', sans-serif;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,.9);
}
.ai-page-preview-bar a { color: #9dbcff; }

/* ==========================================================
   动画
   ========================================================== */
@keyframes arkDot { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes arkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hudScan { from { top: 8%; } to { top: 92%; } }
@keyframes hudFocus { 0%, 20%, 100% { transform: translate(-50%, -50%) scale(1); } 40%, 70% { transform: translate(-50%, -50%) scale(.8); } }
@keyframes camSpin { to { transform: rotate(360deg); } }
@keyframes camLock { 0%, 16%, 100% { transform: scale(1); } 38%, 72% { transform: scale(.72); } }
@keyframes camBlink { 0%, 35%, 55%, 100% { opacity: .2; } 42%, 48% { opacity: 1; } }
@keyframes camRec { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes skyDraw { 0% { stroke-dashoffset: 100; opacity: .35; } 55%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes skyFlow { to { stroke-dashoffset: -216; } }
@keyframes skyWindow { 0%, 100% { opacity: .15; } 48% { opacity: .95; } }
@keyframes skyScan { from { transform: translateX(-60%); } to { transform: translateX(580%); } }
@keyframes boatSail { 0% { transform: translate(24px, 190px); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translate(296px, 190px); opacity: 0; } }
@keyframes boatBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-1.4px) rotate(-2.5deg); } }
@keyframes skyBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes skyLed { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* ==========================================================
   响应式
   ========================================================== */
@media (max-width: 991.98px) {
    .ark-hero__stage { width: 36vw; padding: 0 14px; }
    .ark-hero__title { font-size: clamp(2rem, 4.6vw, 2.6rem); }
    .ark-hud__top span:last-child, .ark-hud__level, .ark-hud__geo { display: none; }
}
@media (max-width: 767.98px) {
    .ark-hero__shade {
        background:
            linear-gradient(0deg, rgba(7,10,18,1) 0%, rgba(4,6,12,.8) 40%, rgba(4,6,12,.55) 100%),
            radial-gradient(60% 50% at 12% 20%, rgba(47,211,192,.12), transparent 70%);
    }
    .ark-hero__grid { display: none; }
    .ark-hero__stage { order: -1; justify-self: center; width: min(78vw, 320px); margin-bottom: 2rem; }
    .ark-cam { display: none; }
    .ark-skyline { height: 140px; }
    .ark-skyline__label { right: 14px; bottom: 8px; font-size: 7px; }
    .ark-hero__inner { grid-template-columns: 1fr; padding-top: 84px; padding-bottom: 128px; }
    .ark-hero__copy { max-width: none; }
    .ark-hero__title { font-size: clamp(2rem, 10vw, 2.8rem); }
    .ark-promises { grid-template-columns: 1fr; gap: .7rem; margin-top: 2rem; }
    .ark-sec { padding: 4rem 0; }
    .ark-hero--wide .ark-hero__stage { width: 100%; }
    .ark-hero__dots { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .6rem; margin-top: 1.8rem; }
    .ark-hero__dots button { padding: .7rem .8rem .8rem; }
    .ark-hero__dots small { display: none; }
    .ark-hero__dots b { font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ark-hero__reveal, .js-reveal { opacity: 1; transform: none; transition: none; }
    .ark-hero__fx { display: none; }
    .ark-hero__slide { transition: none; }
    .ark-hero__text { transition: none; }
    .ark-hero__dots button.is-active i { animation: none; transform: scaleX(1); }
    .ark-hud__scan { animation: none; top: 50%; }
    .ark-hud__focus, .ark-cam__ticks, .ark-cam__brackets, .ark-cam__dot, .ark-cam__rec,
    .sky-draw, .sky-beacon, .sky-ring, .sky-boat, .sky-boat__bob, .sky-boat__wake, .sky-lift, .sky-bulbs, .sky-led, .sky-shimmer, .sky-water, .sky-scan { animation: none !important; }
    .sky-draw { stroke-dashoffset: 0; }
    .ark-cam, .ark-btn, .ark-glass, .ark-chip { transition: none !important; }
    .ark-lightbox.is-on { animation: none; }
}