:root{color-scheme:dark;--ink:#ecf3ef;--muted:#b8c7c7;--line:#b7c9c052;--green:#61efab;--gold:#e8c982;--violet:#bea4f3}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#080e16;color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,.map-viewport:focus-visible{outline:2px solid #a1f6c8;outline-offset:3px}[hidden]{display:none!important}
.site-nav{min-height:62px;padding:0 clamp(18px,3vw,50px);border-bottom:1px solid #d6e2db34;background:#0a1017;display:flex;align-items:center;justify-content:space-between;gap:18px;position:relative;z-index:10}.brand{display:inline-flex;align-items:center;white-space:nowrap;color:#d8e9df;font-size:12px;font-weight:700;letter-spacing:.16em}.brand:hover,.brand:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:5px}.site-links{display:flex;align-items:stretch;gap:clamp(12px,2.8vw,48px);white-space:nowrap}.site-links a,.site-links span{position:relative;display:inline-flex;align-items:center;min-height:62px;font-family:Georgia,serif;font-size:11px;letter-spacing:.22em;color:#c3c9c6}.site-links a:hover{color:#fff}.site-links span{color:#f3f4ed}.site-links span:after{content:"";height:2px;background:#66ecc0;box-shadow:0 0 11px #66ecc0;position:absolute;left:0;right:0;bottom:0}
.map-shell{height:calc(100svh - var(--tree-nav-height,62px));min-height:0;position:relative;overflow:hidden;background:#050c15;isolation:isolate}.map-shell::before{content:'';position:absolute;inset:-5%;background:url('/assets/world-tree-complete.webp') center/cover no-repeat;filter:blur(24px) brightness(.50);opacity:.9;pointer-events:none}.map-viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;z-index:1;user-select:none}.map-viewport:active{cursor:grabbing}.map-world{position:absolute;left:0;top:0;width:1670px;height:941px;transform-origin:0 0;will-change:transform;pointer-events:none}.map-world img{width:100%;height:100%;display:block;pointer-events:none}.shards{position:absolute;inset:0;pointer-events:none}.shard{--light:#c5ffdb;--dark:#37bc81;position:absolute;width:48px;height:48px;border:0;background:none;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:auto;filter:drop-shadow(0 0 7px var(--light));z-index:2}.shard:before{content:"";width:19px;height:28px;background:linear-gradient(135deg,#fff 0%,var(--light) 27%,var(--dark) 58%,#121a24 100%);clip-path:polygon(50% 0,100% 38%,77% 100%,21% 100%,0 38%);box-shadow:0 0 20px var(--light)}.shard span{position:absolute;font-size:20px;line-height:1;color:#fff8;pointer-events:none}.shard.gold{--light:#ffda91;--dark:#d39842}.shard.violet{--light:#e0bdff;--dark:#8156c9}.shard.silver{--light:#f5f5f5;--dark:#91abb0}.shard:hover,.shard.selected,.shard:focus-visible{filter:drop-shadow(0 0 14px var(--light)) drop-shadow(0 0 16px var(--light))}.shard.selected:after{content:"";position:absolute;width:43px;height:43px;border:1px solid var(--light);border-radius:50%;box-shadow:0 0 15px var(--light)}
.map-scrim{position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,#050b1375,transparent 24%),linear-gradient(180deg,#050b1338,transparent 20%)}.hero-copy{position:absolute;left:clamp(16px,2.2vw,36px);top:clamp(16px,2vw,32px);z-index:3;max-width:320px;pointer-events:none;text-shadow:0 4px 26px #000}.eyebrow{font-size:11px;letter-spacing:.26em;font-weight:700;color:#bdc5c7}.eyebrow span{color:#7c9b8c}.hero-copy h1{font:normal clamp(28px,3vw,46px)/1 Georgia,'Times New Roman',serif;letter-spacing:.12em;margin:8px 0 8px;border-bottom:1px solid #aeb7b497;padding-bottom:8px;white-space:nowrap}.hero-copy>p:last-child{font-size:12px;line-height:1.45;color:#d1dbd4;max-width:240px}.legend{position:absolute;bottom:clamp(20px,3vw,44px);left:clamp(22px,3vw,55px);z-index:3;background:#090f17e9;border:1px solid #acbec56b;box-shadow:0 16px 40px #0009,inset 0 1px #ffffff20;border-radius:12px;padding:16px 19px;min-width:280px;backdrop-filter:blur(10px);pointer-events:none}.legend>p{margin:0 0 12px;color:#c3d5cd;letter-spacing:.23em;font-size:10px}.legend>div{display:grid;grid-template-columns:43px 76px 1fr;align-items:center;gap:10px;margin:10px 0}.legend strong{font:13px Georgia,serif;letter-spacing:.13em}.legend span{font:12px Georgia,serif;color:#b6c4c5}.line{display:block;height:3px;border-radius:4px}.line.sacred{background:#62efaa;box-shadow:0 0 11px #56e2a7}.line.living{background:#efd186;box-shadow:0 0 11px #e2b753}.line.dormant{background:#a86153;box-shadow:0 0 7px #a86153}
.map-controls{position:absolute;bottom:clamp(22px,3vw,45px);right:clamp(22px,3vw,55px);z-index:4;display:flex;background:#070d16d9;border:1px solid #b7c7c06a;border-radius:9px;overflow:hidden;box-shadow:0 10px 32px #0008}.map-controls button{width:49px;height:48px;border:0;border-right:1px solid #b7c7c04b;background:transparent;color:#f4f8f5;font-size:26px;line-height:1}.map-controls button:last-child{border:0;font-size:27px}.map-controls button:hover{background:#314c47}.map-status{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:3;color:#d8e8e4;font-size:10px;font-weight:700;letter-spacing:.19em;text-align:center;white-space:nowrap;text-shadow:0 2px 10px #000;pointer-events:none}
.detail{position:absolute;z-index:6;right:clamp(20px,3vw,55px);top:22%;width:min(380px,31vw);max-height:calc(100% - 170px);overflow:auto;background:linear-gradient(150deg,#0c1922f5,#09101bec);border:1px solid #aec6c580;border-radius:14px;box-shadow:0 24px 75px #000b,inset 0 1px #ffffff24;backdrop-filter:blur(18px);padding:17px 20px 22px}.detail-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#c0d0cb;font-size:10px;letter-spacing:.13em;font-weight:700}.close-detail{color:#f0f5f1;border:0;background:#ffffff15;width:36px;height:36px;border-radius:4px;font-size:25px;line-height:1}.close-detail:hover{background:#ffffff33}.detail-art{height:112px;margin-top:13px;border:1px solid #a1b2b067;background:radial-gradient(circle at 54% 50%,#60f2b89e,transparent 25%),linear-gradient(130deg,#172c35,#0d1b29 75%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.detail-art.gold{background:radial-gradient(circle at 54% 50%,#efc8799e,transparent 25%),linear-gradient(130deg,#263031,#0d1b29 75%)}.detail-art.violet{background:radial-gradient(circle at 54% 50%,#b99aef9e,transparent 25%),linear-gradient(130deg,#212336,#0d1b29 75%)}.detail-art.silver{background:radial-gradient(circle at 54% 50%,#d5e0e9a0,transparent 25%),linear-gradient(130deg,#223038,#0d1b29 75%)}.detail-art>span{font-size:76px;line-height:1;color:#eefaf0;text-shadow:0 0 22px #ccffd4}.detail-art small{position:absolute;bottom:8px;left:10px;font-size:10px;letter-spacing:.14em;color:#d8e4e0}.detail-era{color:#b7d0c9;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin:16px 0 9px}.detail h2{font:normal 31px/1.06 Georgia,serif;letter-spacing:.09em;text-transform:uppercase;margin:0 0 14px}.detail-lead,.detail-copy{font-size:14px;line-height:1.53;color:#e0e8e5;margin:0 0 11px}.detail-copy{color:#bccbc8}.detail-links{display:grid;gap:7px;margin:20px 0}.detail-links>span{font-size:10px;letter-spacing:.16em;color:#aabbb6;font-weight:700}.detail-links a{display:block;padding:9px 10px;border:1px solid #b8c5c067;font-size:11px;letter-spacing:.08em;font-weight:700}.detail-links a:hover{background:#274039;border-color:#dcf4e8}.detail-actions{display:flex;gap:9px}.detail-actions button{flex:1;min-height:38px;padding:8px;border:1px solid #aac4b680;background:#142621;color:#e1eee4;font-size:10px;font-weight:700;letter-spacing:.08em}.detail-actions button:hover{background:#2b4c3f}
.index{max-width:1460px;margin:auto;padding:75px clamp(20px,5vw,78px) 60px}.index-head{display:flex;justify-content:space-between;align-items:end;gap:35px;border-bottom:1px solid var(--line);padding-bottom:28px}.index-head h2{font:normal clamp(40px,5vw,76px)/1 Georgia,serif;letter-spacing:.13em;margin:12px 0 0}.index-head>p{font-size:15px;line-height:1.6;color:var(--muted);max-width:455px}.filters{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0}.filters button{background:#111d21;border:1px solid #9ab0a670;color:#d3e1db;padding:12px 16px;min-height:43px;font-size:11px;letter-spacing:.12em;font-weight:700}.filters button[aria-pressed=true]{background:#2c5847;color:#fff;border-color:#93e4bc}.filters button:hover{border-color:#d4f3e3}.event-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.event-list li{min-width:0}.event-list button{width:100%;height:100%;min-height:132px;display:flex;align-items:flex-start;gap:19px;text-align:left;padding:19px 22px;background:linear-gradient(130deg,#14212a,#0e171d);border:1px solid #a5bdb05c;color:#eaf2ee;transition:border-color .2s,transform .2s}.event-list button:hover{border-color:#8fe6ba;transform:translateY(-2px)}.number{font:20px Georgia,serif;color:#d5bd8b}.event-text{display:grid;gap:8px;min-width:0}.event-text small{font-size:10px;letter-spacing:.13em;color:#b9c6bd;text-transform:uppercase}.event-text strong{font:normal 24px Georgia,serif;letter-spacing:.035em}.event-text>span{font-size:13px;line-height:1.4;color:#afc1b6}.list-arrow{margin-left:auto;color:#b4d6c4}.continuity{margin:38px 0 0;max-width:940px;font-size:14px;line-height:1.65;color:#b8c8c1}.continuity a{text-decoration:underline;text-underline-offset:3px;color:#e6d2a1}.footer{padding:28px clamp(20px,5vw,78px) 46px;border-top:1px solid var(--line);display:flex;gap:22px;justify-content:space-between;color:#c4d3ca;font-size:11px;font-weight:700;letter-spacing:.15em}.footer a:hover{text-decoration:underline}
@media(max-width:900px){.site-nav{flex-wrap:wrap;padding:12px 20px 0;gap:7px}.site-links{width:100%;justify-content:space-between;gap:9px}.site-links a,.site-links span{min-height:42px;font-size:10px;letter-spacing:.08em}.detail{width:min(350px,42vw);top:21%}.map-status{display:none}}
@media(max-width:700px){.site-links{overflow-x:auto;justify-content:flex-start;gap:22px}.site-links a,.site-links span{flex:none;font-size:10px}.hero-copy{top:20px;left:18px;max-width:calc(100% - 36px)}.hero-copy h1{font-size:32px;letter-spacing:.09em;margin:6px 0;padding-bottom:6px}.hero-copy .eyebrow{font-size:9px}.hero-copy>p:last-child{font-size:12px;margin:0;max-width:240px}.legend{bottom:14px;left:14px;min-width:0;padding:10px 11px;border-radius:8px}.legend>p{font-size:9px;margin-bottom:6px}.legend>div{grid-template-columns:20px 62px;gap:7px;margin:7px 0}.legend span{display:none}.legend strong{font-size:10px}.map-controls{bottom:14px;right:14px}.map-controls button{width:41px;height:43px}.detail{left:12px;right:12px;bottom:72px;top:auto;width:auto;max-height:min(66%,570px);padding:13px 16px 17px}.detail-art{height:80px}.detail h2{font-size:24px}.detail-copy{font-size:13px}.detail-lead{font-size:13px}.index{padding:50px 20px}.index-head{display:block}.index-head>p{font-size:14px}.index-head h2{font-size:40px}.event-list{grid-template-columns:1fr}.event-list button{min-height:105px}.footer{flex-wrap:wrap;padding:25px 20px}.footer span{display:none}}
@media(max-width:380px){.hero-copy h1{font-size:28px}.legend{left:9px}.map-controls{right:9px}.map-controls button{width:37px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.event-list button{transition:none}}
.back-tree{position:absolute;top:24px;right:clamp(22px,3vw,55px);z-index:5;background:#0a171ce9;border:1px solid #b5d8c1a0;color:#eaf4eb;padding:11px 16px;font-size:11px;font-weight:700;letter-spacing:.12em;box-shadow:0 10px 30px #0008}.back-tree:hover{background:#245240}
@media(max-width:700px){.back-tree{top:111px;right:14px;font-size:10px;padding:9px}}
.map-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.index-jump{position:absolute;z-index:5;bottom:clamp(28px,3vw,54px);left:50%;transform:translateX(-50%);padding:11px 16px;border:1px solid #c8d8cc86;background:#091218d9;color:#e2ece5;font-size:10px;letter-spacing:.16em;font-weight:700;white-space:nowrap;box-shadow:0 10px 30px #0009}.index-jump:hover{border-color:#79ecc0;background:#234535}
@media(max-width:700px){.index-jump{bottom:83px;font-size:10px}}
/* High-detail art appears only when zooming; feathered tile edges reveal the exact overview beneath. */
.map-world{width:1670px;height:942px}
.timeline-links{position:absolute;inset:0;width:1670px;height:942px;overflow:visible;pointer-events:none;z-index:1}
.timeline-links path{fill:none;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.52}
.timeline-links .sacred{stroke:#6ff4a6}.timeline-links .offshoot{stroke:#92b99d}.timeline-links .living{stroke:#f0c773}.timeline-links .far{stroke:#a5774d}.timeline-links .dormant{stroke:#c9675e}
.map-world .overview-art{width:1670px;height:942px}
.map-world .detail-tile{position:absolute;display:block;width:auto;height:auto;opacity:0;pointer-events:none;will-change:opacity;mask-image:radial-gradient(ellipse at center,#000 57%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse at center,#000 57%,transparent 100%);transition:opacity .28s ease}
.map-world.detailed .detail-tile[src]{opacity:1}
.map-world .crown-left{left:0;top:0;width:867px;height:502px}
.map-world .crown-right{left:803px;top:0;width:868px;height:502px}
.map-world .roots-left{left:0;top:438px;width:867px;height:503px}
.map-world .roots-right{left:803px;top:438px;width:868px;height:503px}
/* Shards keep a fixed touch target as the artwork scales, with a bright facet and readable name. */
.shard{width:64px;height:64px;isolation:isolate;filter:drop-shadow(0 0 10px var(--light)) drop-shadow(0 0 4px var(--light))}
.shard:before{width:27px;height:39px;box-shadow:none;filter:drop-shadow(0 0 16px var(--light));background:linear-gradient(132deg,#fff 0%,var(--light) 23%,var(--dark) 66%,#16282b 100%)}
.shard:after{content:"";position:absolute;width:56px;height:56px;border:1px solid var(--light);border-radius:50%;opacity:.72;box-shadow:0 0 16px var(--light),inset 0 0 10px var(--light);z-index:-1}
.shard.selected:after{width:64px;height:64px;border-width:2px;opacity:1;box-shadow:0 0 23px var(--light),inset 0 0 14px var(--light)}
.shard:hover,.shard:focus-visible{filter:drop-shadow(0 0 21px var(--light)) drop-shadow(0 0 10px var(--light));z-index:4}
.shard .shard-glyph{font-size:23px;color:#fff;line-height:1}
.shard .shard-label{position:absolute;top:61px;left:50%;transform:translateX(-50%);opacity:0;pointer-events:none;display:block;width:max-content;max-width:150px;padding:7px 9px;color:#f3fff7;background:#061017e9;border:1px solid color-mix(in srgb,var(--light),transparent 25%);box-shadow:0 7px 22px #000c,0 0 11px color-mix(in srgb,var(--light),transparent 55%);font:700 10px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.11em;text-shadow:none;white-space:nowrap;transition:opacity .2s}
.shard.show-label .shard-label,.shard:hover .shard-label,.shard:focus-visible .shard-label{opacity:1}
.branch-detail{position:absolute;transform:translate(-50%,-50%);z-index:3;pointer-events:auto;display:grid;gap:4px;min-width:164px;max-width:196px;padding:11px 14px;text-align:left;color:#effdf5;background:linear-gradient(130deg,#071517ed,#0b1c23ee);border:1px solid #7de9acb2;box-shadow:0 13px 32px #000b,0 0 19px #3be69340;backdrop-filter:blur(8px)}
.branch-detail.gold{border-color:#e5c777b2;box-shadow:0 13px 32px #000b,0 0 19px #e5c77740}.branch-detail.violet{border-color:#be9cf5b2;box-shadow:0 13px 32px #000b,0 0 19px #be9cf540}.branch-detail.silver{border-color:#d1e6eab2}.branch-detail strong{font-size:11px;letter-spacing:.13em}.branch-detail small{font-size:10px;letter-spacing:.07em;color:#bbd6ca}.branch-detail:hover,.branch-detail:focus-visible{border-color:#fff;transform:translate(-50%,-50%) scale(1.05)}
.mini-map{position:absolute;right:clamp(22px,3vw,55px);bottom:112px;z-index:4;width:171px;height:96px;padding:0;border:1px solid #d0e3d0a3;background:#08131a;box-shadow:0 13px 35px #000b;overflow:hidden}.mini-map img{width:100%;height:100%;object-fit:cover;opacity:.74;display:block}.mini-map span{position:absolute;left:0;top:0;width:100%;height:100%;border:2px solid #b7fbd2;box-shadow:0 0 13px #9ce3bc,inset 0 0 12px #9ce3bc5c;pointer-events:none}.mini-map:hover{border-color:#fff}
.event-beats{margin:18px 0;border-top:1px solid #b0c5b85b;border-bottom:1px solid #b0c5b85b;padding:13px 0}.event-beats>span{font-size:10px;font-weight:700;letter-spacing:.15em;color:#e1c991}.event-beats ol{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:9px}.event-beats li{display:flex;align-items:baseline;gap:10px;color:#cfddd3;font-size:12px;line-height:1.45}.event-beats b{color:#a9f1c7;font-size:10px}
@media(max-width:900px){.mini-map{width:132px;height:75px;bottom:89px}}
@media(max-width:700px){.mini-map{display:none}.shard{width:58px;height:58px}.shard:before{width:25px;height:35px}.shard:after{width:50px;height:50px}.shard .shard-label{display:none}.branch-detail{min-width:122px;max-width:145px;padding:8px 10px}.branch-detail strong{font-size:9px}.branch-detail small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.map-world .detail-tile,.shard .shard-label{transition:none}}

/* Full-viewport map: the complete tree stays fitted while the same sky and cloud scene bleeds to every screen edge. */
.map-shell{height:calc(100dvh - var(--tree-nav-height,62px));min-height:0}
.map-shell::before{filter:blur(7px) brightness(.68);opacity:1;transform:scale(1.025)}
.map-world .overview-art{-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent)}
.map-scrim{background:linear-gradient(90deg,#050b1382,transparent 20%),linear-gradient(180deg,#050b133b,transparent 18%)}
/* Faceted time jewels: compact center, high-contrast metal rim, no large coffin-shaped facet. */
.shard{width:46px;height:46px;filter:drop-shadow(0 0 9px var(--light)) drop-shadow(0 0 3px #fff9);transition:filter .18s ease,transform .18s ease}
.shard::before{content:'';position:absolute;inset:auto;width:31px;height:31px;border:1px solid var(--light);border-radius:50%;clip-path:none;background:radial-gradient(circle at 38% 28%,#ffffff5c,transparent 38%),linear-gradient(145deg,#34444d,#09131c 72%);box-shadow:inset 0 0 8px var(--dark),0 0 14px var(--light);filter:none}
.shard::after{content:'';position:absolute;width:39px;height:39px;border:1px solid color-mix(in srgb,var(--light),transparent 18%);border-radius:50%;opacity:.82;box-shadow:0 0 13px var(--light),inset 0 0 10px color-mix(in srgb,var(--light),transparent 35%);z-index:-1}
.shard-icon{position:relative;width:24px;height:24px;z-index:2;overflow:visible;filter:drop-shadow(0 0 4px var(--light))}
.shard-facet{fill:var(--dark);stroke:#f6fff8;stroke-width:1.6;stroke-linejoin:round}
.shard-cut{fill:none;stroke:var(--light);stroke-width:1.5;opacity:.94}
.shard-core{fill:#fff;filter:drop-shadow(0 0 4px #fff)}
.shard.selected::after{width:44px;height:44px;border-width:2px;opacity:1;box-shadow:0 0 20px var(--light),inset 0 0 12px var(--light)}
.shard:hover,.shard:focus-visible{filter:drop-shadow(0 0 16px var(--light)) drop-shadow(0 0 8px #fff);transform:translate(-50%,-50%) scale(1.14)}
.shard .shard-label{top:43px;padding:6px 8px;font-size:9px;letter-spacing:.07em}
.zone-label{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:1;text-align:center;white-space:nowrap;padding:6px 9px;background:#071019a6;border-top:1px solid #bdeddb75;text-shadow:0 2px 8px #000;box-shadow:0 3px 16px #0009}
.zone-label strong,.zone-label small{display:block;font:700 10px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.15em;color:#e4f3e9}
.zone-label small{font-size:8px;margin-top:3px;color:#b9cfc2}
.branch-detail{min-width:142px;max-width:178px;padding:8px 11px}
.branch-detail strong{font-size:10px}.branch-detail small{font-size:9px}
@media(max-width:700px){.shard{width:43px;height:43px}.shard::before{width:29px;height:29px}.shard::after{width:36px;height:36px}.shard-icon{width:22px;height:22px}.branch-detail{min-width:115px;max-width:135px;padding:7px 8px}}
@media(prefers-reduced-motion:reduce){.shard{transition:none}}

/* The artwork fills the desktop map edge to edge with no blurred duplicate or masked frame. */
.map-shell::before{inset:0;transform:none;filter:none;opacity:1;background-position:center;background-size:cover}
.map-world .overview-art{-webkit-mask-image:none;mask-image:none}
.map-scrim{background:linear-gradient(90deg,#050b136a,transparent 16%),linear-gradient(180deg,#050b1336,transparent 16%)}
.route-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;mix-blend-mode:screen}
.route-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.route-line.sacred{stroke:#60ffc0;stroke-width:5;opacity:.72;filter:drop-shadow(0 0 7px #20ed8d)}
.route-line.living{stroke:#f3cd6b;stroke-width:3.6;opacity:.68;filter:drop-shadow(0 0 6px #f0aa4b)}
.route-line.dormant{stroke:#b55f4b;stroke-width:3;opacity:.66;filter:drop-shadow(0 0 4px #c86547)}
.shard.ember{--light:#ffd2a6;--dark:#9c483e}
.shard.sacred{--light:#9affcf;--dark:#168e63}
.shard.living{--light:#ffe09b;--dark:#ab7935}
.shard.dormant{--light:#ffb899;--dark:#8a3d38}
.branch-detail.ember{border-color:#c47558bc;box-shadow:0 13px 32px #000b,0 0 19px #bf65475c}
.detail-art.ember{background:radial-gradient(circle at 54% 50%,#d889669e,transparent 25%),linear-gradient(130deg,#2b2329,#0d1b29 75%)}
.route-chip{display:inline-block;font:800 9px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.1em;padding:2px 5px;margin-right:5px;border:1px solid #9decc399;color:#b7fbd6;background:#1a4e3b5c;vertical-align:middle;font-style:normal}
.route-chip.living{border-color:#dbbd73a8;color:#ffdfa0;background:#5a3e1e70}
.route-chip.dormant{border-color:#bd7969a8;color:#ffc3a9;background:#68352c70}
@media(max-width:700px){.map-shell::before{opacity:.5;filter:brightness(.5)}.route-line{opacity:.9}}

/* Exact-position zoom tiles add three times the native source density; edge feathering hides independent tile joins. */
.map-world .detail-tile{position:absolute;display:block;opacity:0;pointer-events:none;mask-image:radial-gradient(ellipse 50% 50% at center,#000 60%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 50% 50% at center,#000 60%,transparent 100%);transition:opacity .32s ease}
.map-world.detailed .detail-tile[src]{opacity:.76}
.zone-label{pointer-events:auto;cursor:pointer;border:1px solid #bdeddb75;min-height:42px;display:grid;align-content:center;z-index:4;color:#e4f3e9;transition:border-color .18s,background .18s}
.zone-label:hover,.zone-label:focus-visible{border-color:#e3fff1;background:#164132e8;outline:2px solid #9af2c7;outline-offset:2px}
@media(max-width:700px){.zone-label{max-width:120px;white-space:normal;min-height:40px;padding:5px 7px}.zone-label strong{font-size:8px}.zone-label small{font-size:7px}}
@media(prefers-reduced-motion:reduce){.map-world .detail-tile,.zone-label{transition:none}}
/* Distance from the central MCU route is a navigational cue, not a canonical color code. */
.legend{min-width:326px;bottom:16px;padding:12px 16px}
.legend>p{margin-bottom:8px}
.legend>div{grid-template-columns:39px 87px 1fr;gap:9px;margin:7px 0}
.legend strong{font:700 11px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.09em}
.legend span{font:11px/1.25 Arial,Helvetica,sans-serif}
.line.offshoot{background:#3ac18e;box-shadow:0 0 10px #239e77}
.line.far{background:#ba8164;box-shadow:0 0 10px #a65d40}
.line.dormant{background:#ad6955;box-shadow:0 0 8px #ad6955}
.shard.offshoot{--light:#70d6a7;--dark:#176a50}
.shard.far,.shard.bronze{--light:#dba480;--dark:#754533}
.shard.dormant,.shard.ember{--light:#c79179;--dark:#66362f}
.route-chip.offshoot{border-color:#58c29ba8;color:#a7e7c5;background:#17453470}
.route-chip.far{border-color:#b98467a8;color:#eac0a4;background:#53372370}
.route-chip.dormant{border-color:#a76a59a8;color:#ddb09b;background:#442b2970}
.detail-art.bronze{background:radial-gradient(circle at 54% 50%,#ba866a99,transparent 25%),linear-gradient(130deg,#33262c,#0d1b29 75%)}
@media(max-width:700px){.legend{min-width:0;bottom:10px;left:10px;padding:10px 11px}.legend>div{grid-template-columns:17px 82px;gap:6px;margin:5px 0}.legend strong{font-size:9px}.legend span{display:none}}
/* Additional chapters use compact jewels, keeping their clickable targets while zoomed. */
.shard.new-event{width:40px;height:40px}
.shard.new-event::before{width:25px;height:25px}
.shard.new-event::after{width:34px;height:34px}
.shard.new-event .shard-icon{width:19px;height:19px}
.shard.new-event .shard-label{top:38px}
@media(max-width:700px){.shard.new-event{width:40px;height:40px}}
/* The hovered shard's name floats above its jewel; edge cases stay on screen. */
.shard .shard-label,.shard.new-event .shard-label{top:auto;bottom:calc(100% + 5px);left:50%;right:auto;transform:translateX(-50%);z-index:5;pointer-events:none}
.shard.label-below .shard-label,.shard.new-event.label-below .shard-label{top:calc(100% + 5px);bottom:auto}
.shard.label-left .shard-label{left:0;right:auto;transform:none}
.shard.label-right .shard-label{left:auto;right:0;transform:none}
.shard .shard-brief{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:210px;max-width:min(210px,55vw);padding:8px 10px;border:1px solid color-mix(in srgb,var(--light),transparent 35%);background:#06131be9;color:#e7f4eb;font:11px/1.35 Arial,Helvetica,sans-serif;letter-spacing:0;text-align:left;text-shadow:none;box-shadow:0 8px 22px #000b;pointer-events:none}
.shard .shard-brief strong{display:block;color:var(--light);font-size:10px;line-height:1.3;letter-spacing:.07em;text-transform:uppercase;margin-bottom:3px}
.shard.show-brief .shard-brief,.shard:hover .shard-brief,.shard:focus-visible .shard-brief{display:block}
.shard.label-left .shard-brief{left:0;transform:none}
.shard.label-right .shard-brief{left:auto;right:0;transform:none}
@media(max-width:700px){.shard.show-label .shard-label{display:block;max-width:125px;white-space:normal}.shard .shard-brief{max-width:155px;font-size:10px}}
/* A clean artwork view keeps the camera controls while hiding map annotations. */
.map-shell.clean-view .branch-detail,.map-shell.clean-view .zone-label,.map-shell.clean-view .shard-label,.map-shell.clean-view .shard-brief,.map-shell.clean-view .timeline-links,.map-shell.clean-view .legend,.map-shell.clean-view .hero-copy,.map-shell.clean-view .detail,.map-shell.clean-view .mini-map,.map-shell.clean-view .back-tree,.map-shell.clean-view .index-jump{display:none!important}
.map-controls .overlay-toggle{width:auto;min-width:126px;padding:0 12px;font-size:10px;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.map-controls .overlay-toggle[aria-pressed="true"]{background:#2d5444;color:#fff}
@media(max-width:700px){.map-controls .overlay-toggle{min-width:82px;padding:0 7px;font-size:9px;letter-spacing:.03em}}