:root{color-scheme:dark;--ink:#fff0e2;--muted:#c3b2bb;--line:rgba(255,226,211,.16);--accent:#ffd0a7}
    *{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#150f21}
    body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;color:var(--ink)}
    button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
    canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#ocean{touch-action:pan-y}
    .vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,transparent 34%,rgba(8,5,18,.35) 100%)}
    .header{position:absolute;top:36px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;transition:opacity .5s}
    .identity{display:flex;align-items:center;gap:18px}.symbol{font-family:"Songti SC","Noto Serif CJK SC",serif;font-size:36px;font-weight:400;line-height:1;border-right:1px solid var(--line);padding-right:18px}
    h1{font-size:18px;font-weight:400;letter-spacing:.38em;margin:0 0 7px}.kicker{font-size:12px;letter-spacing:.19em;opacity:.6}
    .edition{text-align:right;font-size:12px;letter-spacing:.17em;line-height:1.9;color:var(--muted)}.edition b{font-weight:400;color:var(--ink);font-size:14px;letter-spacing:.08em}
    .caption{position:absolute;left:42px;bottom:140px;pointer-events:none;transition:opacity .5s}.caption p{font-family:"Songti SC",serif;font-size:18px;letter-spacing:.18em;margin:0 0 10px;text-shadow:0 1px 12px #0e071b}.caption span{font-size:12px;color:var(--muted);letter-spacing:.08em}
    .controls{position:absolute;left:42px;right:42px;bottom:30px;display:flex;align-items:center;gap:28px;border-top:1px solid var(--line);padding-top:22px;transition:opacity .5s;isolation:isolate;z-index:1}
    .control-surface{position:absolute;left:-42px;right:-42px;top:-35px;bottom:-30px;z-index:-1;background:linear-gradient(transparent,rgba(12,9,22,.87));pointer-events:none}
    .icon-button{flex-shrink:0;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:rgba(22,13,31,.36);transition:background .2s,border-color .2s}
    .icon-button:hover{background:rgba(255,219,197,.1);border-color:rgba(255,226,211,.45)}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
    .themes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));flex-shrink:0;gap:3px;padding:4px;background:rgba(23,14,31,.43);border:1px solid var(--line);border-radius:30px}.theme{border:0;border-radius:24px;background:transparent;padding:10px 12px;font-size:14px;white-space:nowrap;color:var(--muted);transition:color .2s,background .2s}.theme[aria-pressed=true]{background:rgba(255,221,197,.13);color:var(--ink)}.theme:hover{color:var(--ink)}
    .range-group{display:flex;align-items:center;gap:13px}.range-group label{font-size:14px;color:var(--muted);white-space:nowrap}.range-group output{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:28px;text-align:right}input[type=range]{width:108px;height:20px;appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(255,232,218,.25)}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);height:9px;width:9px;border-radius:50%;margin-top:-3.5px;box-shadow:0 0 10px #ffc59b44}input[type=range]::-moz-range-track{height:2px;background:rgba(255,232,218,.25)}input[type=range]::-moz-range-thumb{background:var(--accent);border:0;height:9px;width:9px;border-radius:50%}
    .tools{margin-left:auto;display:flex;gap:10px}.plain-button{border:0;background:transparent;display:flex;gap:8px;align-items:center;padding:11px 12px;color:var(--muted);font-size:14px}.plain-button:hover{color:var(--ink)}.plain-button[aria-pressed=false]{opacity:.45}
    .restore{position:absolute;bottom:28px;right:30px;opacity:0;visibility:hidden;transition:opacity .5s}.immersive .header,.immersive .caption,.immersive .controls{opacity:0;visibility:hidden}.immersive .restore{opacity:.6;visibility:visible}.restore:hover{opacity:1}
    .error{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;background:#150f21;padding:30px;z-index:3}.error p{max-width:400px;line-height:1.8}
    @media(max-width:1150px){.controls{gap:18px;flex-wrap:wrap}.themes{order:-1;flex:1 1 100%;width:100%}.range-group{gap:8px;flex:1}input[type=range]{width:75px;flex:1;min-width:30px}.tools{margin-left:auto}.plain-button span{display:none}.plain-button{padding:10px}.caption{bottom:195px}}
    @media(max-width:700px){.header{top:26px;left:24px;right:24px}.identity{gap:12px}.symbol{font-size:30px;padding-right:12px}h1{font-size:16px}.kicker{font-size:10px}.edition{font-size:10px}.edition b{font-size:12px}.caption{left:24px;bottom:225px}.caption p{font-size:16px}.caption span{font-size:11px}.controls{left:24px;right:24px;bottom:max(22px,env(safe-area-inset-bottom));gap:14px;padding-top:18px}.control-surface{left:-24px;right:-24px;bottom:-24px}.theme{padding:9px 3px;font-size:13px}.range-group{order:3;flex:1 1 calc(50% - 14px);gap:9px}.range-group label{font-size:13px}input[type=range]{flex:1;width:50px}.range-group output{font-size:11px;min-width:25px}.tools{gap:0}.tools .icon-button{width:36px;height:36px}.plain-button{padding:9px}.controls>.icon-button{width:38px;height:38px}.restore{right:22px;bottom:24px}}
    @media(max-width:380px){.controls{gap:9px}.themes{gap:1px;padding:3px}.edition{display:none}.tools{gap:0}.plain-button{padding:8px}.caption p{font-size:15px}}

    /* Two backgrounds share one scheduler; only the visible scene keeps rendering. */
    #sea-scene{position:absolute;inset:0}
    #passage{opacity:0;visibility:hidden;background:#080c14;touch-action:pan-y}
    .scene-transition #sea-scene,.scene-transition #passage{will-change:opacity}
    #scene-veil{position:absolute;inset:0;pointer-events:none;opacity:0;background:#030813}
    #dive-shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(#102e43,#06131f 45%,#020711)}
    .journal{position:absolute;right:42px;top:23%;width:300px;transition:opacity .4s,transform .4s}
    .journal-label{font-size:10px;letter-spacing:.24em;color:#fff0e2a0;margin-bottom:12px}
    .story-link{width:100%;display:flex;align-items:center;gap:17px;padding:17px 0;text-align:left;border:0;border-bottom:1px solid #ffede428;background:transparent;text-shadow:0 1px 12px #150f21}
    .story-link:hover .story-title{transform:translateX(5px)}.story-number{font-size:10px;opacity:.5;font-variant-numeric:tabular-nums}.story-title{flex:1;font-family:"Songti SC",serif;font-size:17px;letter-spacing:.07em;transition:transform .25s}.story-link svg{width:15px;opacity:.6}
    .friends-entry{margin-top:18px;border:0;background:transparent;padding:10px 0;display:flex;align-items:center;gap:12px;color:#ffe2c5;font-size:12px;letter-spacing:.12em}.friends-entry svg{width:16px}.friends-entry:hover{color:#fff6e9}
    #friends-shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(transparent 32%,#07142366 58%,#07101bcc)}
    #beacons{pointer-events:none}
    .friends-view{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0}.friends-view[hidden]{display:none}
    .friends-view .passage-nav{z-index:2}.friends-intro{position:absolute;left:42px;top:119px;pointer-events:none;text-shadow:0 2px 18px #091321}
    .friends-eyebrow{font-size:10px;letter-spacing:.3em;color:#e7d3bd99;margin:0 0 15px}.friends-intro h1{font-family:"Songti SC",serif;font-size:32px;letter-spacing:.2em;margin-bottom:16px}.friends-intro>p:last-child{font-size:12px;letter-spacing:.13em;color:#e6d5c8b3}
    .friend-link{position:absolute;display:flex;gap:13px;align-items:center;width:208px;min-height:64px;padding:6px 10px;color:#f3e9de;text-decoration:none;pointer-events:auto;border-radius:12px;background:linear-gradient(90deg,#091524bd,#09152440 75%,transparent);transition:background .25s,color .25s;opacity:0}
    .friend-link:hover,.friend-link:focus-visible{color:#fffaf1;background:linear-gradient(90deg,#152b3be6,#152b3b60 80%,transparent)}.friend-link:focus-visible{outline:1px solid var(--lamp);outline-offset:5px}
    .friend-avatar{width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;border:1px solid color-mix(in srgb,var(--lamp) 45%,transparent);background:#102233a3;color:var(--lamp);box-shadow:0 0 24px color-mix(in srgb,var(--lamp) 12%,transparent)}.friend-avatar svg{width:20px;height:20px}
    .friend-copy{display:block;min-width:0;line-height:1}.friend-name{display:block;font-family:"Songti SC",serif;font-size:17px;letter-spacing:.08em;line-height:1.3;margin-bottom:4px}.friend-note{display:block;font-size:10px;letter-spacing:.05em;color:#c8d3d9cc;line-height:1.6}.friend-number{font-size:9px;color:var(--lamp);opacity:.65;letter-spacing:.15em;margin-right:6px}
    #friends-heading:focus{outline:0}
    .friends-foot{position:absolute;left:42px;bottom:112px;color:#d4dce08c;font-size:10px;letter-spacing:.13em;pointer-events:none}
    .friends-mode .header,.friends-mode .caption,.friends-mode .journal{opacity:0;visibility:hidden;pointer-events:none}
    .immersive .friends-view{opacity:0!important;visibility:hidden}.immersive .friends-view *{pointer-events:none}
    @media(max-width:1150px){.friends-foot{bottom:166px}}
    @media(max-width:1150px),(max-height:650px){.friends-intro{top:96px;left:28px}.friends-intro h1{font-size:26px;margin-bottom:12px}.friends-intro>p:last-child{font-size:11px}.friend-list{position:absolute;top:230px;bottom:215px;left:24px;right:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:12px;overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;scrollbar-width:thin;padding:8px 4px 20px}.friend-link{position:relative!important;left:auto!important;top:auto!important;width:100%;min-height:72px;background:linear-gradient(90deg,#091524cc,#09152477)}.friend-name{font-size:16px}.friend-note{font-size:10px}.friends-foot{bottom:185px;left:28px;font-size:9px}.friends-view .passage-nav{left:24px;right:24px}.friends-eyebrow{margin-bottom:12px}}
    @media(max-width:440px){.friend-list{gap:8px;left:18px;right:18px;top:221px}.friend-link{gap:8px;padding:9px 7px;min-height:78px}.friend-avatar{width:30px;height:30px}.friend-avatar svg{width:17px;height:17px}.friend-name{font-size:15px}.friend-note{font-size:9px}.friends-intro{left:24px}.friends-intro h1{font-size:28px}.friends-view .passage-name{display:none}}
    @media(max-height:650px){.friends-intro{top:82px}.friends-intro h1{font-size:24px}.friends-intro>p:last-child{display:none}.friend-list{top:166px;bottom:170px}.friends-foot{bottom:147px}.friends-eyebrow{margin-bottom:10px}}
    .article-view{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0}.article-view[hidden]{display:none}
    .passage-nav{position:absolute;left:42px;right:42px;top:30px;display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:auto}
    .passage-back{display:flex;align-items:center;gap:10px;background:#080e1980;border:1px solid #a5bfd52b;border-radius:24px;padding:11px 16px;font-size:12px;letter-spacing:.12em;color:#c4d3df}
    .passage-back:hover{background:#182434aa}.passage-name{font-size:10px;letter-spacing:.3em;color:#aebecdc0}.passage-tools{display:flex;gap:10px}.passage-tools .icon-button{width:38px;height:38px;background:#080e1970;border-color:#a5bfd52b}
    .article-scroll{position:absolute;top:115px;bottom:54px;left:50%;transform:translateX(-50%);width:min(520px,46vw);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a5bfd533 transparent;pointer-events:auto;mask-image:linear-gradient(transparent,#000 25px,#000 calc(100% - 30px),transparent);padding:28px 26px 80px;background:linear-gradient(90deg,transparent,#070d16e6 14%,#070d16e6 86%,transparent)}
    .article-text{color:#d4dee6;font-size:15px;line-height:2.15;letter-spacing:.035em}.article-meta{font-size:10px;letter-spacing:.18em;color:#8295a8;margin-bottom:22px}.article-text h1{font-family:"Songti SC",serif;font-size:34px;font-weight:400;line-height:1.55;letter-spacing:.13em;color:#f0f3f3;margin:0 0 28px}.article-text h1:focus{outline:0}.article-lead{color:#a8b9c9;font-size:16px;margin-bottom:35px}.article-text h2{font-family:"Songti SC",serif;font-size:20px;letter-spacing:.1em;font-weight:400;margin:38px 0 17px;color:#e5edf1}.article-text p{margin:0 0 24px}.article-text blockquote{margin:30px 0;padding:8px 0 8px 20px;border-left:1px solid #a5bfd547;color:#b4c8d8;font-family:"Songti SC",serif}.article-end{font-size:11px;letter-spacing:.25em;color:#7e94a7;margin-top:45px}.passage-foot{position:absolute;bottom:23px;left:0;right:0;text-align:center;color:#8fa4b566;font-size:10px;letter-spacing:.22em;pointer-events:none}
    .article-mode .header,.article-mode .caption,.article-mode .controls,.article-mode .journal{opacity:0;visibility:hidden;pointer-events:none}
    .immersive .journal,.immersive .article-view{opacity:0!important;visibility:hidden;pointer-events:none}.immersive .article-view *{pointer-events:none}.restore{z-index:4}.scene-transition .journal,.scene-transition .controls{pointer-events:none}
    @media(max-width:1150px){.journal{width:260px;top:21%}.article-scroll{width:min(500px,51vw)}}
    @media(max-width:700px){.journal{left:24px;right:24px;top:19%;width:auto}.journal-label{margin-bottom:2px}.story-link{padding:13px 0}.story-title{font-size:16px}.journal .story-link:nth-of-type(3){display:none}.passage-nav{left:18px;right:18px;top:22px;gap:10px}.passage-back{font-size:11px;padding:10px 12px}.passage-name{display:none}.passage-tools{gap:7px}.article-scroll{top:85px;bottom:44px;width:calc(100% - 86px);padding:27px 10px 60px}.article-text{font-size:14px;line-height:2}.article-text h1{font-size:27px}.article-lead{font-size:14px}.article-meta{font-size:9px;letter-spacing:.12em}.article-text h2{font-size:18px}.passage-foot{font-size:9px;bottom:18px;letter-spacing:.12em}}
    @media(max-height:620px){.journal{top:20%;width:260px}.story-link{padding:10px 0}.journal .story-link:nth-of-type(3){display:none}.article-scroll{top:82px;bottom:35px;padding-top:24px}.passage-nav{top:20px}}
    @media(prefers-reduced-motion:reduce){*{transition:none!important}}