@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#050c12;--ink:#e9f2f0;--mint:#99efdf;--muted:#91a7ae;--px:0;--py:0}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Space Grotesk',system-ui,sans-serif;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:7px}#neurons{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}.grain{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}header{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:30px 4vw}.brand{display:flex;gap:12px;align-items:center}.brand b{font-size:46px;line-height:1;font-weight:400;color:var(--mint)}.brand span{font-size:19px;letter-spacing:3px}.brand small{display:block;font-size:10px;letter-spacing:2px;margin-top:5px}.header-right{display:flex;align-items:center;gap:28px}.edition{font-size:12px;letter-spacing:2px;color:var(--muted)}#motion{border:1px solid #52696b;background:#07131988;border-radius:30px;padding:10px 16px;font-size:13px}.chapters{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:8;display:grid;gap:23px}.chapters a{font-size:11px;color:#758d96;position:relative;padding:8px}.chapters a.active{color:var(--mint)}.chapters a.active:after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:var(--mint);right:-7px;top:12px;box-shadow:0 0 12px var(--mint)}.scene{position:relative;min-height:100svh}.hero{height:110svh;min-height:780px;display:grid;place-items:center;isolation:isolate;overflow:hidden}.hero-halo{position:absolute;inset:8% 10%;background:radial-gradient(ellipse,#1e535c22,transparent 66%);z-index:-1}.hero-copy{position:relative;z-index:3;text-align:center;padding:0 20px;margin-top:-6vh}.eyebrow{font-size:12px;letter-spacing:4px;color:var(--mint);margin-bottom:25px}.hero h1{font-family:'Noto Serif TC',serif;font-weight:400;font-size:clamp(36px,4.4vw,70px);line-height:1.55;letter-spacing:2px;margin:0;text-shadow:0 2px 28px #000}.hero h1 span{color:var(--mint)}.lede{font-size:16px;color:#a5babf;line-height:1.9;margin:24px 0 36px}.primary{background:#b4f3e4;color:#0b2428;border:0;border-radius:2px;padding:18px 26px;min-width:218px;font-weight:600;box-shadow:0 0 55px #72dec71a}.primary span{margin-left:28px}.primary:hover{background:#d1ffef;transform:translateY(-2px)}.hero-people{position:absolute;inset:0;z-index:1;pointer-events:none}.portrait{background-image:url('assets/portraits.webp');background-repeat:no-repeat;background-size:300% 100%;height:100%;width:100%;mix-blend-mode:screen;mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);filter:saturate(.35);transform:translate3d(calc(var(--px)*12px),calc(var(--py)*8px),0)}.portrait-e{background-position:0% 50%}.portrait-s{background-position:50% 50%}.portrait-c{background-position:100% 50%}.hero-people .portrait{position:absolute;height:65vh;max-height:670px;width:35vw;max-width:510px;opacity:.75}.mini-e{left:-9%;bottom:0;rotate:-7deg}.mini-c{right:-8%;bottom:3%;rotate:7deg}.hero-people .mini-s{width:20vw;height:40vh;right:10%;top:3%;opacity:.26;mask-image:linear-gradient(#000,transparent)}.floating{position:absolute;z-index:4;border:0;background:transparent;color:#a5d4d6;font-family:'Noto Serif TC',serif;font-size:16px;padding:15px;animation:drift 8s ease-in-out infinite;text-shadow:0 0 18px #88ffed66}.floating:before{content:'·';color:var(--mint);margin-right:12px}.floating:hover{color:white}.q1{top:22%;left:9%;font-size:14px}.q2{bottom:24%;right:23%}.q3{top:25%;right:8%;animation-delay:-3s}.scroll-cue{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;z-index:4}.scroll-cue span{font-size:10px;letter-spacing:4px;color:var(--muted)}.scroll-cue i{height:52px;width:1px;background:linear-gradient(var(--mint),transparent)}.coordinates{position:absolute;bottom:7%;left:4%;font-size:11px;letter-spacing:3px;color:var(--muted)}.chapter{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:8vh 11vw 8vh 7vw;gap:4vw;min-height:115svh}.chapter-art{height:78vh;max-height:800px;position:relative;transform:translateY(calc(var(--reveal,0)*-30px)) scale(calc(.94 + var(--reveal,0)*.06));transition:opacity .7s;opacity:calc(.28 + var(--reveal,0)*.72)}.chapter-art .portrait{position:relative;z-index:1}.orbit{position:absolute;width:85%;aspect-ratio:1;border:1px solid #72d1d529;border-radius:50%;top:15%;left:5%;transform:rotateX(55deg) rotate(-30deg);box-shadow:0 0 80px #48c4d008,inset 0 0 80px #48c4d008}.art-label{position:absolute;bottom:4%;left:10%;font-size:11px;letter-spacing:3px;color:#719ba5;z-index:2}.chapter-copy{position:relative;z-index:2}.person{font-size:11px;letter-spacing:2px;color:var(--muted);margin:38px 0 18px}.person span{display:block;font-size:17px;letter-spacing:5px;color:#d4e6e7;margin-top:12px}h2{font-family:'Noto Serif TC',serif;font-size:clamp(32px,3.3vw,54px);font-weight:400;line-height:1.6;letter-spacing:1px;margin:22px 0}h2 em{font-style:normal;color:var(--mint)}.chapter-copy>p:not(.eyebrow):not(.person){font-size:16px;line-height:2.2;color:#9fb7be}.text-button{background:none;border:0;border-bottom:1px solid #567779;padding:18px 0;margin-top:20px;font-size:16px;min-width:225px;text-align:left}.text-button span{float:right;color:var(--mint)}.text-button:hover{color:var(--mint)}.reverse .chapter-art{order:2}.reverse{padding-left:12vw;padding-right:7vw}.ambient-word{position:absolute;bottom:4%;left:10%;font-size:clamp(18px,4vw,65px);letter-spacing:9px;color:#7aa0a00b;pointer-events:none}.ocean{padding:18vh 10vw 12vh;text-align:center;min-height:100svh}.question-cloud{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;max-width:900px;margin:60px auto 36px}.question-cloud button{font-family:'Noto Serif TC',serif;background:#09202b70;border:1px solid #4b848342;padding:20px 25px;border-radius:40px;font-size:18px;transition:.25s}.question-cloud button:nth-child(even){transform:translateY(16px)}.question-cloud button:hover{border-color:var(--mint);background:#153a3c;box-shadow:0 0 35px #76ebce19}.ocean-note{color:var(--muted);font-size:14px;margin-top:55px}footer{padding:35px 6vw;display:flex;justify-content:space-between;border-top:1px solid #92c5c41a;align-items:center;gap:30px}footer>a{font-size:16px;letter-spacing:3px}footer p{font-size:12px;line-height:1.9;color:#81979d}dialog{border:1px solid #638c89;background:linear-gradient(140deg,#102a30,#081219);color:var(--ink);padding:52px;max-width:660px;width:calc(100% - 36px);box-shadow:0 30px 150px #000b}dialog::backdrop{background:#020a10cc;backdrop-filter:blur(12px)}dialog h2{font-size:29px;line-height:1.7;margin:20px 0 30px}.close{position:absolute;right:14px;top:12px;background:none;border:0;font-size:28px;padding:5px 12px}#choices{display:grid;gap:12px}#choices button{border:1px solid #4f797d;background:#143039;padding:17px;text-align:left;font-size:16px;line-height:1.5}#choices button:hover{border-color:var(--mint)}#response{border-left:2px solid var(--mint);padding:0 0 0 20px;font-size:17px;line-height:1.9}#response b{display:block;color:var(--mint);font-size:13px;letter-spacing:2px;margin-bottom:10px}.dialog-actions{display:flex;justify-content:space-between;gap:18px;margin-top:25px}.dialog-actions button{background:none;border:0;color:var(--mint);padding:10px 0;font-size:15px}.disclosure{font-size:12px;color:#8a9da2;margin:30px 0 0}[hidden]{display:none!important}@keyframes drift{50%{transform:translateY(-15px)}}body.paused *,body.paused *:before{animation-play-state:paused!important}body.paused .portrait{transform:none}body.paused{scroll-behavior:auto}@media(max-width:700px){header{padding:22px}.brand b{font-size:34px}.brand span{font-size:15px}.brand small{font-size:8px}.edition{display:none}.header-right{gap:0}#motion{font-size:12px;padding:9px 11px}.chapters{right:8px;gap:13px}.chapters a{font-size:9px}.hero{min-height:760px;height:100svh}.hero-copy{margin-top:-15vh;padding:0 32px}.hero h1{font-size:32px;letter-spacing:0}.eyebrow{font-size:10px;letter-spacing:3px}.lede{font-size:14px;max-width:270px;margin:18px auto 28px}.primary{padding:15px 20px;font-size:15px}.hero-people .portrait{width:60vw;height:40vh;max-height:380px}.mini-e{left:-14%;bottom:3%}.mini-c{right:-14%;bottom:3%}.hero-people .mini-s{display:none}.q1{top:17%;left:3%;font-size:12px}.q2{bottom:22%;right:17%;font-size:14px}.q3{top:20%;right:4%;font-size:13px}.scroll-cue{bottom:3%;}.coordinates{display:none}.chapter,.reverse{grid-template-columns:1fr;padding:6vh 35px 12vh;gap:0;min-height:110svh}.chapter-art{height:48vh;max-height:460px;width:85%;margin:auto}.reverse .chapter-art{order:0}.chapter-copy{margin-top:-25px}.chapter-copy h2{font-size:32px}.person{margin:22px 0 12px}.chapter-copy>p:not(.eyebrow):not(.person){font-size:15px}.chapter-copy .eyebrow{margin:0}.ambient-word{font-size:22px;bottom:4%}.ocean{padding:14vh 30px 10vh}.ocean h2{font-size:32px}.question-cloud{gap:12px;margin-top:40px}.question-cloud button{font-size:14px;padding:15px}.question-cloud button:nth-child(even){transform:none}footer{flex-direction:column;align-items:flex-start;padding:28px}dialog{padding:38px 25px}dialog h2{font-size:24px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before{animation:none!important;transition:none!important}.portrait,.chapter-art{transform:none!important}}