:root{font-family:"Microsoft JhengHei UI","Microsoft JhengHei","Noto Sans TC",sans-serif;background:#100d0d;color:#f3e5d5}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow:hidden}button{font:inherit;cursor:pointer}#world{position:relative;width:100vw;height:100dvh;min-height:570px;overflow:hidden;background:#0b090a}#world:before{content:"";position:absolute;inset:-1.5%;background:url("living-tissue-v1.png") center / cover no-repeat;transform:scale(1.025);animation:breathe 13s ease-in-out infinite alternate;filter:saturate(.82) brightness(.79)}#world:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#100b0df2 0,transparent 27%,transparent 75%,#0e0a0cd8 100%),linear-gradient(180deg,#0e0a0ce3 0,transparent 19%,transparent 73%,#0d090bc9 100%)}@keyframes breathe{to{transform:scale(1.055) translate(-.4%,.3%)}}.head{position:absolute;z-index:5;inset:0 0 auto;display:flex;align-items:start;justify-content:space-between;padding:25px 40px}.brand{font-size:21px;font-weight:400;letter-spacing:.13em;text-shadow:0 2px 20px #000}.brand small{display:block;margin-top:5px;font-size:11px;letter-spacing:.28em;color:#c9a796}.head nav{display:flex;gap:30px;margin-top:5px}.head nav a{color:#d8c0b2;text-decoration:none;font-size:14px;letter-spacing:.1em;text-shadow:0 2px 12px #000}.head nav a:hover{color:#fff}.intro{position:absolute;z-index:3;left:38%;top:24%;width:27%;text-align:center;pointer-events:none}.intro .eyebrow{color:#d3ad91;font-size:11px;letter-spacing:.28em}.intro h1{font-size:clamp(22px,2.1vw,32px);line-height:1.45;font-weight:300;letter-spacing:.2em;margin:14px 0 8px;text-shadow:0 2px 18px #000}.intro p{font-size:13px;letter-spacing:.13em;color:#d5b5a3;line-height:1.8}.veins{position:absolute;z-index:2;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;mix-blend-mode:screen}.veins path{fill:none;stroke:#e7b997;stroke-width:1.3;stroke-linecap:round;opacity:0;transition:opacity .45s}.veins path.active{opacity:.65;filter:drop-shadow(0 0 4px #d98c62)}.veins path.active.signal{stroke:#fff3d8;stroke-width:1.8;stroke-dasharray:2 14;animation:flow 1.8s linear infinite;opacity:.95}@keyframes flow{to{stroke-dashoffset:-64}}.place{position:absolute;z-index:4;padding:12px 16px 12px 22px;border:0;background:linear-gradient(90deg,#130b0dd6,#130b0d90 65%,transparent);color:#e9d9ca;text-align:left;min-width:110px;letter-spacing:.1em;text-shadow:0 1px 10px #000;transition:opacity .3s,transform .3s,background .3s}.place:before{content:"";position:absolute;left:4px;top:20px;width:12px;height:1px;background:#ecd0ad;box-shadow:0 0 8px #e9a578}.place b{display:block;font-size:clamp(16px,1.5vw,22px);font-weight:400;white-space:nowrap}.place small{display:block;margin-top:5px;font-size:11px;color:#d3a995;opacity:0;max-height:0;transition:opacity .25s,max-height .25s}.place:hover,.place:focus-visible,.place.active{color:#fff5e5;background:linear-gradient(90deg,#221313ed,#1c1010bb 70%,transparent);transform:translateX(3px);outline:none}.place:hover small,.place:focus-visible small,.place.active small{opacity:1;max-height:30px}.place.dim{opacity:.28}.place.haki{left:8%;top:20%}.place.speed{left:11%;top:62%}.place.range{left:3%;top:44%}.place.skill{left:59%;top:56%}.place.energy{left:78%;top:45%}.place.god{left:79%;top:19%}.place.stats{left:43%;top:81%}.place.field{left:81%;top:74%}.guide{position:absolute;z-index:3;left:40px;bottom:26px;color:#c7a99a;font-size:12px;letter-spacing:.1em;text-shadow:0 2px 10px #000}.readout{position:absolute;z-index:8;right:28px;bottom:28px;width:min(390px,calc(100vw - 56px));padding:28px 32px 30px;color:#f6e8d9;background:linear-gradient(140deg,#231515f2,#130e0ee9);border-left:1px solid #d9aa8170;box-shadow:0 14px 80px #0009;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .3s}.readout.open{opacity:1;transform:none;pointer-events:auto}.readout .close{position:absolute;right:13px;top:8px;border:0;color:#d5b7a3;background:none;font-size:26px}.readout .overline{font-size:11px;letter-spacing:.28em;color:#cf9b7d}.readout h2{font-size:29px;font-weight:400;letter-spacing:.15em;margin:10px 0 14px}.readout p{font-size:15px;line-height:1.9;color:#e8d4c2}.readout .links{display:block;margin-top:18px;color:#f3c096;font-size:14px;text-decoration:none}.readout .links:hover{color:#fff}.aside-note{position:absolute;z-index:3;right:34px;top:77px;font-size:11px;letter-spacing:.18em;color:#bba092;text-align:right}
@media(max-width:700px){.head{padding:14px 18px;display:block;background:linear-gradient(#100b0dd9,transparent)}.brand{font-size:17px}.brand small{font-size:9px}.head nav{gap:16px;margin-top:10px}.head nav a{font-size:12px}.intro{left:12%;top:20%;width:76%}.intro h1{font-size:24px}.intro p{font-size:11px}.place{padding:8px 10px 8px 18px;min-width:0}.place b{font-size:13px}.place:before{left:2px;top:16px;width:10px}.place small{font-size:9px}.place.haki{left:3%;top:43%}.place.speed{left:3%;top:65%}.place.range{left:2%;top:54%}.place.skill{left:55%;top:55%}.place.energy{left:61%;top:45%}.place.god{left:60%;top:35%}.place.stats{left:29%;top:77%}.place.field{left:61%;top:67%}.guide{left:16px;bottom:12px;font-size:10px}.aside-note{display:none}.readout{left:10px;right:10px;bottom:10px;width:auto;padding:20px 24px 22px}.readout h2{font-size:24px}.readout p{font-size:13px}}
@media(prefers-reduced-motion:reduce){#world:before,.veins path.active.signal{animation:none}}
/* 固定脈絡保持可見；真正移動的是沿路徑傳導的微光。 */
#world:before{filter:saturate(.77) brightness(.89) contrast(1.06)}
@keyframes tissue-drift{from{transform:translate(var(--drift-x,0px),var(--drift-y,0px)) scale(1.035)}to{transform:translate(var(--drift-x,0px),var(--drift-y,0px)) scale(1.055)}}
#world:before{animation:tissue-drift 12s ease-in-out infinite alternate}
.veins path{opacity:.17;stroke:#d4a181;stroke-width:1.5;filter:drop-shadow(0 0 3px #9d5b4b)}
.veins path.active,.veins path.active.signal{opacity:.76;stroke:#f0c7a0;stroke-width:2.4;stroke-dasharray:none;animation:none;filter:drop-shadow(0 0 4px #e4a16f) drop-shadow(0 0 12px #c46c51)}
.nerve-halo{fill:#f6bb87;filter:blur(6px);opacity:.24;transition:opacity .35s}.nerve-core{fill:#ffdeb5;opacity:.4;filter:drop-shadow(0 0 4px #eab587);transition:opacity .35s}
.nerve-halo.is-on{opacity:.85}.nerve-core.is-on{opacity:1;filter:drop-shadow(0 0 5px #fff0ca) drop-shadow(0 0 11px #de895d)}
.place,.place:hover,.place:focus-visible,.place.active{isolation:isolate;background:none;box-shadow:none;opacity:.58;padding-left:28px;text-shadow:0 2px 7px #0b0506,0 0 16px #0b0506}
.place:before{left:4px;top:19px;width:13px;height:11px;border-radius:48% 37% 52% 42%;background:#a17461;box-shadow:0 0 8px #e9a57880,0 0 20px #b6604970;transform:rotate(-18deg)}
.place:after{content:"";position:absolute;z-index:-1;left:-34px;top:-28px;width:195px;height:92px;background:radial-gradient(ellipse at 32% 54%,#e9ab7852,transparent 70%);opacity:.14;transition:opacity .45s;pointer-events:none}
.place:hover,.place:focus-visible,.place.active{opacity:1;transform:translateX(3px)}
.place.linked{opacity:.91}.place.dim{opacity:.26}.place.active:after{opacity:.82}.place.linked:after{opacity:.46}
.place.active:before,.place:hover:before,.place:focus-visible:before{background:#ffdfbb;box-shadow:0 0 8px #fff0cb,0 0 24px #e8a175,0 0 42px #bc6555}
.place.linked:before{background:#ddb08e;box-shadow:0 0 7px #f0c19c,0 0 20px #c67c64}
.place:after{border-radius:50%;filter:blur(13px);opacity:.11}.place.active:after{opacity:.72}.place.linked:after{opacity:.38}
.place.haki{left:9%;top:23%}.place.range{left:3%;top:46%}.place.speed{left:19%;top:75%}.place.stats{left:43%;top:78%}
.place.god{left:81%;top:18%}.place.energy{left:74%;top:40%}.place.skill{left:83%;top:60%}.place.field{left:71%;top:79%}
.intro{left:35%;top:18%;width:42%;text-align:left}.intro h1{font-size:clamp(29px,2.8vw,40px);font-weight:400;letter-spacing:.12em;margin:0 0 8px;line-height:1.3}.intro p{margin:0;color:#e1c5b1;font-size:14px;letter-spacing:.09em}
.readout{right:28px;top:18%;bottom:auto;width:min(520px,calc(100vw - 56px));max-height:70vh;overflow:auto;padding:35px 40px 36px;background:linear-gradient(135deg,#241716ee,#100d0dec);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);scrollbar-width:thin}
.readout.on-left{left:28px;right:auto}.readout h2{font-size:33px}.readout p{font-size:16px}.readout h3{font-size:13px;font-weight:400;letter-spacing:.16em;color:#d9ad8d;margin:23px 0 9px}.readout .question{margin:22px 0 6px;padding:14px 0;border-top:1px solid #dbb39438;border-bottom:1px solid #dbb39438}.readout .question span{font-size:11px;letter-spacing:.2em;color:#dca582}.readout .question p{margin:6px 0 0;font-size:14px}.readout .related{display:flex;flex-wrap:wrap;gap:8px}.readout .related button{border:1px solid #c396735c;background:#4f332c50;color:#f5deca;padding:8px 12px;font-size:13px}.readout .related button:hover,.readout .related button:focus-visible{border-color:#f0c297;color:#fff8e8;background:#76503a72}.readout .links{margin-top:27px}
/* 點選後，說明在中央的暗處出現，周邊傳導路徑仍可見。 */
.intro{transition:opacity .3s,transform .3s}#world.is-reading .intro{opacity:0;transform:translateY(-8px)}
.readout,.readout.on-left{isolation:isolate;left:50%;right:auto;top:13%;bottom:auto;width:min(590px,calc(100vw - 40px));height:525px;max-height:none;overflow:visible;display:flex;flex-direction:column;padding:28px 34px 30px;transform:translate(-50%,16px);border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.readout:before{content:"";position:absolute;z-index:-1;inset:-36px -42px;pointer-events:none;background:radial-gradient(ellipse 78% 78% at 50% 48%,#170e11f7 0,#170e11eb 56%,#170e1199 78%,transparent 100%);filter:blur(13px)}
.readout h2{font-size:31px;margin:7px 0 9px}.readout p{font-size:15px;line-height:1.7;margin:8px 0}.readout .question{margin:15px 0 6px;padding:10px 0}.readout .question p{font-size:14px}.readout h3{margin:15px 0 7px}.readout .links{margin-top:18px}
.readout .example{font-size:14px;color:#e5cbb5}.readout .example span:first-child{color:#dca582;letter-spacing:.12em}
.readout .key-point{font-size:19px;line-height:1.55;color:#fff0d5;text-shadow:0 0 14px #d6946b60;margin:10px 0 13px}
.readout .question{border-bottom:0;margin:11px 0 5px;padding:8px 0 0}.readout .question p{font-size:13px;color:#c3a897;line-height:1.5}
.readout .route-note{font-size:12px;color:#c9ad9c;margin:0 0 10px}.readout .related button.next{border-color:#e9bb8ea8;color:#fff2db;background:#6b473865}.readout .route-end{font-size:12px;color:#c9ad9c;align-self:center}
.readout .route-footer{margin-top:auto}.readout .related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.readout .related button{min-height:39px;white-space:nowrap}.readout .related button:disabled{opacity:.35;cursor:default;border-color:#876b5b7a;background:transparent;color:#c5a993}
.intro .origin{position:relative;display:inline-flex;align-items:center;gap:12px;margin-top:24px;padding:9px 13px 9px 8px;border:0;background:transparent;color:#ffead1;font-size:17px;letter-spacing:.16em;text-shadow:0 0 15px #d38b62;pointer-events:auto}
.intro .origin:before{content:"";width:11px;height:11px;border-radius:50%;background:#ffe6c3;box-shadow:0 0 10px #fff0cf,0 0 26px #e7a77a,0 0 55px #b9684c}.intro .origin:hover,.intro .origin:focus-visible{color:#fff;outline:1px solid #d8a98066}
.veins path[data-link^="origin-"]{opacity:.09;stroke-width:1.15}.veins path[data-link^="origin-"].active{opacity:.42}
#world.is-reading:not(.is-origin) .veins path[data-link^="origin-"]{opacity:0}
#world.is-reading .place{z-index:10}
.readout.open,.readout.on-left.open{transform:translate(-50%,0)}
@media(min-width:701px) and (max-width:1150px){.readout,.readout.on-left{width:min(470px,calc(100vw - 410px));height:520px;top:10%;padding:18px 25px}.readout p{font-size:14px;line-height:1.55}.readout h2{font-size:27px}.readout .key-point{font-size:16px}.readout .question{margin:7px 0 2px;padding:6px 0 0}.readout .route-note{display:none}.readout .related button{font-size:11px;padding:7px 4px}.place.haki{left:2%}.place.range{left:2%}.place.speed{left:6%;top:82%}.place.stats{top:88%}.place.energy{left:78%}.place.field{left:78%;top:84%}}
@media(max-width:700px){.place,.place:hover,.place:focus-visible,.place.active{padding-left:20px}.place{transition:left .25s ease,top .25s ease,opacity .3s,transform .3s}.place:before{left:0;top:13px;width:10px;height:9px}.place:after{left:-19px;top:-23px;width:120px;height:70px}}
@media(max-width:700px){.intro{left:10%;top:21%;width:80%;text-align:center}.intro h1{font-size:29px}.intro p{font-size:11px}.readout,.readout.on-left{left:10px;right:10px;top:auto;bottom:10px;width:auto;max-height:67vh;padding:22px 24px 26px}.readout h2{font-size:25px}.readout p{font-size:13px}.readout .question p{font-size:12px}}
@media(max-width:700px){.place.skill{left:55%;top:55%}.readout,.readout.on-left{left:50%;right:auto;top:47%;bottom:auto;width:calc(100vw - 28px);height:390px;max-height:none;overflow:visible;padding:12px 16px 16px;transform:translate(-50%,16px)}.readout.open,.readout.on-left.open{transform:translate(-50%,0)}.readout:before{inset:-20px -8px}.readout h2{font-size:22px;margin:4px 0 7px}.readout p{font-size:12px;line-height:1.55}.readout .question{margin:9px 0 4px;padding:7px 0}.readout .question p,.readout .example{font-size:11px}.readout h3{margin:10px 0 5px;font-size:11px}.readout .related{gap:5px}.readout .related button{padding:5px 2px;font-size:10px;min-height:28px}.readout .route-note{display:none}.readout .links{font-size:11px;margin-top:12px}
#world.is-reading .place{transition:left .25s ease,top .25s ease,opacity .3s,transform .3s}.is-reading .place.haki{left:3%;top:17%}.is-reading .place.speed{left:3%;top:25%}.is-reading .place.range{left:3%;top:33%}.is-reading .place.stats{left:3%;top:41%}.is-reading .place.god{left:54%;top:17%}.is-reading .place.energy{left:54%;top:25%}.is-reading .place.skill{left:54%;top:33%}.is-reading .place.field{left:54%;top:41%}.is-reading .place small{display:none}.is-reading .place b{font-size:12px}}
@media(max-width:700px){.place.haki{left:4%;top:39%}.place.range{left:2%;top:52%}.place.speed{left:12%;top:68%}.place.stats{left:28%;top:80%}.place.god{left:58%;top:32%}.place.energy{left:60%;top:45%}.place.skill{left:63%;top:59%}.place.field{left:56%;top:73%}.readout .key-point{font-size:14px;line-height:1.45;margin:7px 0 9px}.readout .question p{font-size:10px}}
@media(max-width:700px){#world.is-reading .guide{opacity:0}}
@media(max-width:700px) and (max-height:700px){.is-reading .place.haki,.is-reading .place.god{top:14%}.is-reading .place.speed,.is-reading .place.energy{top:20%}.is-reading .place.range,.is-reading .place.skill{top:26%}.is-reading .place.stats,.is-reading .place.field{top:32%}.readout,.readout.on-left{top:39%;height:375px;padding-top:8px;padding-bottom:8px}.readout p{line-height:1.45}}
@media(prefers-reduced-motion:reduce){#world:before{animation:none}}
/* 首頁與其他頁面沿用相同導覽高度；閱讀區仍是獨立的生命脈絡。 */
html{overflow:hidden;scrollbar-gutter:stable}
body{height:100dvh;overflow:hidden}
#world{width:100%;height:100dvh}
.head{height:74px;padding:0 max(24px,calc((100vw - 1240px)/2));align-items:center}.brand{font-size:30px;letter-spacing:.02em}.brand small{font-size:11px;letter-spacing:.02em}.head nav{margin-top:0;align-items:center;gap:clamp(12px,2.4vw,32px)}.head nav a{font-size:17px;letter-spacing:0}.head nav a.active{color:#f4cfa8}
.head{background:linear-gradient(180deg,rgba(22,14,16,.97),rgba(22,14,16,.9));border-bottom:1px solid rgba(225,174,133,.25)}
.head .brand{font:400 30px/1.2 "Microsoft JhengHei UI","Microsoft JhengHei","Noto Sans TC",sans-serif;letter-spacing:.02em}
.head a.brand{color:inherit;text-decoration:none}.head a.brand:hover{color:#f5dcc1}.head a.brand:focus-visible{outline:2px solid #dfbd72;outline-offset:6px;border-radius:2px}
.head .brand small{margin-top:5px;font:11px/1.3 "Microsoft JhengHei UI","Microsoft JhengHei","Noto Sans TC",sans-serif;letter-spacing:.02em}
.head .main-nav{height:36px;margin:0}
.head .main-nav a{display:flex;align-items:center;justify-content:center;height:36px;font:400 17px/1 "Microsoft JhengHei UI","Microsoft JhengHei","Noto Sans TC",sans-serif;padding:0}
.intro h1{font-size:clamp(26px,2.45vw,34px)}
@media(max-width:700px){.head{height:82px;padding:5px 14px;display:block}.brand{font-size:23px}.brand small{display:block;font-size:9px}.head nav{margin-top:1px;gap:16px}.head nav a{font-size:15px}.intro h1{font-size:27px}}
@media(max-width:700px){.head .brand{display:inline-block;font-size:22px;margin-top:1px}.head .brand small{font-size:9px;margin-top:0}.head .main-nav{height:26px;margin-top:1px}.head .main-nav a{height:26px;font-size:15px}}
.intro .origin{margin-top:42px;margin-left:clamp(30px,6vw,95px)}
.intro .origin:hover,.intro .origin:focus-visible{outline:none;color:#fff8e8;text-shadow:0 0 12px #ffe8c2,0 0 26px #e4a16c}
.intro .origin:hover:before,.intro .origin:focus-visible:before{background:#fff8df;box-shadow:0 0 11px #fff9e5,0 0 30px #f4c192,0 0 68px #cf7a58;transform:scale(1.22)}
.intro .origin{font-size:clamp(16px,1.5vw,22px)}
@media(max-width:700px){.intro .origin{font-size:13px}}
.intro .origin:before{transition:transform .28s ease,box-shadow .28s ease,background .28s ease}
.place.evolve{left:18%;top:50%}
.readout .related.is-network{grid-template-columns:repeat(4,minmax(0,1fr))}
.readout .related.is-network button{white-space:normal;line-height:1.35}
@media(max-width:700px){.intro .origin{margin-top:30px;margin-left:20px}.place.evolve{left:35%;top:53%}.readout .related.is-network{grid-template-columns:repeat(3,minmax(0,1fr))}.readout .related.is-network button{min-height:25px}.is-reading .place.evolve{left:3%;top:14%}.is-reading .place.haki{top:20%}.is-reading .place.speed{top:26%}.is-reading .place.range{top:32%}.is-reading .place.stats{top:38%}}
@media(max-width:700px) and (max-height:700px){.is-reading .place.evolve{top:16%}.is-reading .place.haki{top:21%}.is-reading .place.speed{top:26%}.is-reading .place.range{top:31%}.is-reading .place.stats{top:36%}}
.readout .tool-link{display:block;margin-top:8px}
.place.energy b,.place.god b,.place.field b{color:#fff2da;text-shadow:0 0 7px #713e31,0 0 16px #c67a5d,0 0 27px #9e5748}
.place.energy small,.place.god small,.place.field small{color:#ffe0c1;text-shadow:0 0 6px #67392f,0 0 14px #a45c4d}
.intro .origin:after{content:"";position:absolute;left:-10px;top:50%;width:48px;height:48px;border:1px solid rgba(255,221,181,.34);border-radius:50%;background:radial-gradient(circle,rgba(255,217,174,.18),transparent 68%);transform:translateY(-50%) scale(.55);opacity:0;pointer-events:none;animation:origin-pulse 3s ease-out infinite}
@keyframes origin-pulse{0%{transform:translateY(-50%) scale(.55);opacity:0}22%{opacity:.42}100%{transform:translateY(-50%) scale(2.5);opacity:0}}
@media(prefers-reduced-motion:reduce){.intro .origin:after{animation:none;opacity:.12;transform:translateY(-50%) scale(1)}}
.site-disclaimer{position:absolute;z-index:3;left:0;right:0;bottom:0;margin:0;padding:8px 26px;color:#c7ab9c;background:linear-gradient(transparent,#0d090bb8);font-size:11px;line-height:1.4;letter-spacing:.02em;white-space:normal;text-shadow:0 1px 8px #000;pointer-events:none}#world.is-reading .site-disclaimer{display:none}@media(max-width:700px){.site-disclaimer{padding:6px 8px;font-size:10px;letter-spacing:0;white-space:normal}}