:root {
    --ink: #173b38;
    --muted: #677772;
    --green: #24735f;
    --orange: #c86f31;
    --paper: rgba(255, 253, 248, .96);
    --line: rgba(23, 59, 56, .16);
    --shadow: 0 16px 42px rgba(25, 45, 41, .18);
    --sans: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--ink); font-family: var(--sans); background: #e8e7e2; }
button, a { color: inherit; font: inherit; }
a { text-decoration: none; }
[hidden] { display: none !important; }

.viewer { position: fixed; inset: 0; overflow: hidden; background: #e8e7e2; }
.note-viewport {
    position: absolute;
    inset: 0;
    overflow: auto;
    contain: layout paint size;
    background: #fff;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    overflow-anchor: none;
    cursor: grab;
    scroll-behavior: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.note-viewport.custom-touch {
    touch-action: none;
    -webkit-overflow-scrolling: auto;
}
.note-viewport::-webkit-scrollbar { display: none; }
.note-viewport.mouse-dragging { cursor: grabbing; }
.note-surface { position: relative; min-width: 100%; min-height: 100%; overflow: hidden; overflow-anchor: none; }
.note-scene {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    transform-origin: 0 0;
    background: #fff;
    user-select: none;
    -webkit-user-select: none;
    contain: layout style paint;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.note-scene.is-zooming { will-change: transform; }
.note-preview,
.reading-strip,
.detail-tile {
    position: absolute;
    display: block;
    max-width: none;
    margin: 0;
    border: 0;
    pointer-events: none;
    -webkit-user-drag: none;
}
.note-preview { z-index: 0; left: 0; top: 0; object-fit: fill; opacity: 0; }
.reading-layer, .detail-layer { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.detail-layer { z-index: 2; }
.reading-strip, .detail-tile { opacity: 0; transition: opacity .08s linear; }
.note-preview.is-loaded, .reading-strip.is-loaded, .detail-tile.is-loaded { opacity: 1; }
.note-switcher {
    position: fixed;
    z-index: 20;
    top: max(14px, env(safe-area-inset-top));
    left: max(14px, env(safe-area-inset-left));
}
.switcher-button {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 15px 5px 7px;
    color: var(--ink);
    border: 1px solid rgba(23, 59, 56, .18);
    border-radius: 999px;
    background: var(--paper);
    box-shadow: var(--shadow);
    cursor: pointer;
}
.switcher-button:focus-visible, .zoom-controls button:focus-visible, .note-menu button:focus-visible, .note-menu a:focus-visible { outline: 3px solid rgba(200, 111, 49, .45); outline-offset: 2px; }
.menu-mark { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--green); font-weight: 700; }
.note-menu {
    width: min(340px, calc(100vw - 28px));
    max-height: min(72vh, 620px);
    margin-top: 10px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}
.menu-heading { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.menu-heading strong, .menu-heading span { display: block; }
.menu-heading strong { font-size: 1.05rem; }
.menu-heading span { margin-top: 4px; color: var(--muted); font-size: .78rem; }
.note-list { padding: 8px; }
.menu-section + .menu-section { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.menu-section h3 { margin: 4px 10px 8px; color: var(--orange); font-size: .76rem; letter-spacing: .08em; }
.menu-chapter h4 { margin: 10px 10px 4px; color: var(--muted); font-size: .75rem; font-weight: 600; }
.note-option { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 11px 12px; text-align: left; border: 0; border-radius: 13px; background: transparent; cursor: pointer; }
.note-option:hover { background: rgba(36, 115, 95, .08); }
.note-option.active { color: #fff; background: var(--green); }
.note-option strong { display: block; }
.note-option strong { font-size: .92rem; line-height: 1.5; }
.note-option .current-dot { align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); opacity: 0; }
.note-option.active .current-dot { opacity: 1; background: #ffd49c; }
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.menu-actions button, .menu-actions a { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-size: .78rem; }

.zoom-controls {
    position: fixed;
    z-index: 15;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    display: flex;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    box-shadow: var(--shadow);
    opacity: 1;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease;
}
.zoom-controls.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
.zoom-controls button { height: 44px; min-width: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; font-size: 1.2rem; }
.zoom-controls button:hover { background: rgba(36, 115, 95, .08); }
.zoom-controls .zoom-value { min-width: 58px; padding: 0 10px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); color: var(--green); font-size: .78rem; font-weight: 700; }

.loading-panel, .error-panel {
    position: fixed;
    z-index: 10;
    top: 50%;
    left: 50%;
    width: min(360px, calc(100% - 40px));
    padding: 26px;
    transform: translate(-50%, -50%);
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: var(--shadow);
}
.loading-panel p, .error-panel p { margin: 12px 0 0; color: var(--muted); line-height: 1.65; }
.loader { width: 32px; height: 32px; display: inline-block; border: 3px solid #deded9; border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
.error-panel button { min-height: 40px; display: inline-flex; align-items: center; margin-top: 16px; padding: 0 18px; color: #fff; border: 0; border-radius: 999px; background: var(--green); cursor: pointer; }
.gesture-tip { position: fixed; z-index: 12; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); padding: 9px 14px; transform: translateX(-50%); color: #fff; border-radius: 999px; background: rgba(23, 59, 56, .82); box-shadow: 0 8px 24px rgba(23, 59, 56, .2); font-size: .76rem; pointer-events: none; transition: opacity .3s ease; }
.gesture-tip.dismissed { opacity: 0; }
.asset-status { position: fixed; z-index: 18; top: max(14px, env(safe-area-inset-top)); left: 50%; min-height: 38px; padding: 0 14px; transform: translateX(-50%); color: #fff; border: 0; border-radius: 999px; background: rgba(173, 74, 38, .92); box-shadow: var(--shadow); cursor: pointer; font-size: .78rem; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
    .note-switcher { top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); }
    .switcher-button { min-height: 44px; padding-right: 12px; font-size: .88rem; }
    .menu-mark { width: 30px; height: 30px; }
    .note-menu { max-height: min(68vh, 560px); }
    .zoom-controls { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); }
    .zoom-controls button { height: 42px; min-width: 42px; }
    .gesture-tip { bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .loader { animation: spin 1s linear infinite !important; }
}