.chronos-pathway[hidden], .chronos-toolbar .chronos-modes[hidden], .chronos-stage__meta[hidden], .chronos-stage__bottom[hidden], .chronos-explorer__footer[hidden] { display: none !important; }
.chronos-pathway { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; overflow: hidden; color: #f9f1e7; background: radial-gradient(circle at 82% 12%, #66486980, transparent 37%), radial-gradient(circle at 12% 80%, #315b4270, transparent 44%), #10231c; }
.chronos-pathway__head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex: 0 0 auto; padding: 20px clamp(18px, 3vw, 42px); border-bottom: 1px solid #eac99d32; background: #10251fe8; }
.chronos-pathway__head > div:first-child { max-width: 680px; }
.chronos-pathway__eyebrow, .chronos-prophetic__label { color: #f3b987; font-size: .61rem; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.chronos-pathway__head h2 { margin: 4px 0 6px; color: #fff8e9; font: 700 clamp(1.7rem, 3vw, 2.9rem)/1.08 "Fraunces", Georgia, serif; letter-spacing: -.03em; }
.chronos-pathway__head p { margin: 0; color: #d2dece; font-size: .76rem; line-height: 1.5; }
.chronos-pathway__switch { display: inline-flex; flex: 0 0 auto; gap: 4px; padding: 4px; border: 1px solid #f8d5ad5c; border-radius: 12px; background: #20382bc9; }
.chronos-pathway__switch button { min-height: 38px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: #e5dacb; font-size: .72rem; font-weight: 800; white-space: nowrap; cursor: pointer; }
.chronos-pathway__switch button:hover { background: #ffffff20; }
.chronos-pathway__switch button[aria-pressed="true"] { background: #f6dfbd; color: #233b2d; box-shadow: 0 5px 15px #07140b88; }
.chronos-lineage__layout { display: grid; grid-template-columns: minmax(310px, 1.15fr) minmax(280px, .85fr); flex: 1; min-height: 0; width: min(1250px, 100%); margin: 0 auto; }
.chronos-lineage__rail-wrap { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #f1cea242; }
.chronos-lineage__rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 22px 8px; color: #c5d9c7; font-size: .67rem; }
.chronos-lineage__rail-head span:first-child { color: #ffe0b8; font-weight: 900; }
.chronos-lineage__rail { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 5px 22px 38px 35px; scrollbar-color: #ad9874 #163126; overscroll-behavior: contain; }
.chronos-lineage__rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50px; width: 2px; background: linear-gradient(#f2bd84, #c3cfad, #cba0d8); box-shadow: 0 0 12px #e7b68588; }
.chronos-lineage__group { position: relative; display: flex; align-items: center; gap: 9px; width: fit-content; max-width: 100%; margin: 18px 0 11px; padding: 7px 13px; border: 1px solid #ecd3ac6e; border-radius: 30px; background: #243b2e; color: #fff1d9; box-shadow: 0 6px 16px #0917108f; }
.chronos-lineage__group:first-child { margin-top: 2px; }
.chronos-lineage__group span { color: #edb780; font-size: .58rem; font-weight: 900; }
.chronos-lineage__group strong { font-size: .72rem; }
.chronos-lineage__person { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: calc(100% - 13px); min-height: 55px; margin: 0 0 7px 13px; padding: 7px 13px 7px 10px; border: 1px solid #f4d3aa38; border-radius: 11px; background: #254233a1; color: #f9f0e1; text-align: left; box-shadow: 0 5px 13px #08170e36; cursor: pointer; transition: transform .24s ease, border-color .24s ease, background .24s ease; }
.chronos-lineage__person:hover, .chronos-lineage__person.is-selected { transform: translateX(4px); border-color: #f4cb9e; background: #365b43; }
.chronos-lineage__person.is-selected { box-shadow: 0 0 0 2px #f3bf8591, 0 12px 20px #08170e80; }
.chronos-lineage__person-number { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #f2bd858c; border-radius: 50%; background: #192c23; color: #efc79a; font-size: .61rem; font-weight: 900; }
.chronos-lineage__person strong { overflow: hidden; color: #fff6e8; font: 700 .97rem/1.15 "Fraunces", Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.chronos-lineage__person small { color: #c3d6bf; font-size: .57rem; font-weight: 700; white-space: nowrap; }
.chronos-lineage__inspector { min-height: 0; overflow-y: auto; padding: 23px clamp(18px, 3vw, 36px) 34px; scrollbar-color: #b19678 #162c22; }
.chronos-lineage__artwork { position: relative; height: clamp(155px, 25vh, 270px); overflow: hidden; border: 1px solid #f1d4af6b; border-radius: 17px; background: #304837; box-shadow: 0 20px 42px #06140b8f; }
.chronos-lineage__artwork img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) sepia(.12); }
.chronos-lineage__artwork::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, #0d221bd4); }
.chronos-lineage__artwork span { position: absolute; z-index: 1; right: 12px; bottom: 10px; color: #f8e6d1; font-size: .56rem; font-weight: 800; }
.chronos-lineage__inspector-copy { padding: 19px 3px 0; }
.chronos-lineage__index, .chronos-prophetic__detail-kicker { color: #efbb89; font-size: .62rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.chronos-lineage__inspector h3 { margin: 5px 0; font: 700 clamp(2rem, 4vw, 3.2rem)/1 "Fraunces", Georgia, serif; }
.chronos-lineage__period { margin: 0 0 15px; color: #aecaad; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.chronos-lineage__description { margin: 0 0 16px; color: #e9e7db; font-size: .85rem; line-height: 1.66; }
.chronos-lineage__relations { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid #e7d4b242; border-bottom: 1px solid #e7d4b242; color: #ead5ba; font-size: .69rem; font-weight: 800; }
.chronos-pathway__links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.chronos-pathway__source, .chronos-pathway__jump { display: inline-flex; align-items: center; min-height: 33px; padding: 7px 10px; border: 1px solid #eac49571; border-radius: 8px; background: #f1d9b5; color: #263b2b; font-size: .63rem; font-weight: 900; text-decoration: none; cursor: pointer; }
.chronos-pathway__source:hover, .chronos-pathway__jump:hover { background: #fff0d3; }
.chronos-pathway__jump { background: #2c503d; color: #f4e9d7; }
.chronos-pathway__jump:hover { background: #3a654e; }
.chronos-prophetic__scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-color: #b59a7c #142b22; overscroll-behavior: contain; }
.chronos-prophetic__content { display: grid; grid-template-columns: minmax(225px, .72fr) minmax(0, 1.28fr); gap: clamp(17px, 2vw, 30px); width: min(1240px, 100%); min-height: 100%; margin: 0 auto; padding: clamp(16px, 2.4vw, 30px); }
.chronos-prophetic__intro { align-self: start; position: sticky; top: 12px; padding: clamp(20px, 2.6vw, 36px); border: 1px solid #f4c99a5c; border-radius: 19px; background: radial-gradient(circle at 90% 0, #a06b6070, transparent 42%), #274335; box-shadow: 0 18px 42px #06130d78; }
.chronos-prophetic__intro--times { background: radial-gradient(circle at 90% 0, #7b62a470, transparent 44%), #27394a; }
.chronos-prophetic__intro h3 { margin: 13px 0; font: 700 clamp(2rem, 3.8vw, 3.5rem)/1.06 "Fraunces", Georgia, serif; }
.chronos-prophetic__intro p { margin: 0; color: #e5e8d9; font-size: .82rem; line-height: 1.7; }
.chronos-prophetic__formula { display: grid; gap: 7px; margin-top: 23px; }
.chronos-prophetic__formula span { display: block; padding: 10px 13px; border: 1px solid #efcfac65; border-radius: 9px; background: #122c235e; color: #ffe3bd; font-size: .73rem; font-weight: 900; }
.chronos-prophetic__graphic { min-width: 0; padding: clamp(17px, 2vw, 27px); border: 1px solid #e8cba671; border-radius: 19px; background: #f8efe2; color: #213728; box-shadow: 0 20px 45px #07150c8c; }
.chronos-prophetic__graphic-title { margin-bottom: 16px; color: #6a5945; font-size: .72rem; font-weight: 900; letter-spacing: .03em; }
.chronos-prophetic__scale { position: relative; display: flex; height: 25px; overflow: hidden; border: 2px solid #314634; border-radius: 20px; background: #203c2b; }
.chronos-prophetic__segment { flex-basis: 0; border-right: 2px solid #fff9e8; background: #d4ac77; }
.chronos-prophetic__segment:nth-child(2) { background: #8aaf9b; }.chronos-prophetic__segment:nth-child(3) { border-right: 0; background: #aa83b7; }
.chronos-prophetic__progress { position: absolute; top: 0; bottom: 0; left: 0; width: 1%; border-right: 4px solid #fbf7e8; box-shadow: 0 0 12px 4px #fff9f1; transition: width .58s cubic-bezier(.18,.8,.27,1); pointer-events: none; }
.chronos-prophetic__segment-legend { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; }
.chronos-prophetic__segment-legend span { display: grid; gap: 2px; }
.chronos-prophetic__segment-legend strong { font-size: .61rem; }.chronos-prophetic__segment-legend small { color: #695f55; font-size: .57rem; }
.chronos-prophetic__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 24px; }
.chronos-prophetic__step { display: grid; align-content: start; gap: 4px; min-height: 112px; padding: 9px; border: 1px solid #c7b7a2; border-radius: 10px; background: #fffaf1; color: #3e463a; text-align: left; cursor: pointer; transition: transform .24s ease, background .24s ease, box-shadow .24s ease; }
.chronos-prophetic__step:hover, .chronos-prophetic__step.is-active { transform: translateY(-3px); border-color: #a8693b; background: #f5e1c8; box-shadow: 0 7px 17px #57361e29; }
.chronos-prophetic__step span { color: #ae6b3b; font-size: .55rem; font-weight: 900; }.chronos-prophetic__step strong { font-size: .68rem; }.chronos-prophetic__step small { color: #6b675c; font-size: .56rem; line-height: 1.35; }
.chronos-prophetic__lens { display: grid; gap: 3px; margin-top: 22px; padding: 15px 17px; border-left: 4px solid #9c6aa8; border-radius: 0 11px 11px 0; background: #ede1ed; }
.chronos-prophetic__lens .chronos-prophetic__label { color: #694575; }.chronos-prophetic__lens strong { color: #533968; font: 700 1.28rem "Fraunces", Georgia, serif; }.chronos-prophetic__lens p { margin: 0; color: #595266; font-size: .67rem; line-height: 1.45; }
.chronos-prophetic__detail { margin-top: 17px; padding: 17px; border: 1px solid #c7b8a4; border-radius: 12px; background: #fffcf6; }
.chronos-prophetic__detail-kicker { color: #93593c; }.chronos-prophetic__detail-date { display: block; margin: 8px 0 3px; color: #945b30; font-size: .82rem; }.chronos-prophetic__detail h3 { margin: 0 0 8px; color: #263a2a; font: 700 1.35rem/1.2 "Fraunces", Georgia, serif; }.chronos-prophetic__detail p { margin: 0; color: #484a40; font-size: .75rem; line-height: 1.6; }
.chronos-prophetic__detail .chronos-pathway__source { margin-top: 12px; }
.chronos-prophetic__endpoints { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 19px; }
.chronos-prophetic__endpoints div { max-width: 140px; color: #654d7f; font: 700 1.15rem/1.15 "Fraunces", Georgia, serif; }.chronos-prophetic__endpoints div:last-child { text-align: right; }.chronos-prophetic__endpoints span { color: #6b685b; font-size: .61rem; font-weight: 800; text-align: center; }
.chronos-prophetic__times { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 3px; overflow: hidden; padding: 4px; border-radius: 13px; background: #2b3c37; }
.chronos-prophetic__time { display: grid; align-content: center; gap: 5px; min-height: 98px; padding: 5px 3px; border: 1px solid #dfc3e27a; border-radius: 9px; background: linear-gradient(#876993, #504869); color: #fff9ef; text-align: center; cursor: pointer; transition: transform .25s ease, background .25s ease; }
.chronos-prophetic__time:hover, .chronos-prophetic__time.is-active { transform: translateY(-3px); background: linear-gradient(#bd8fbd, #705377); }
.chronos-prophetic__time span { color: #ead6ee; font-size: .54rem; font-weight: 900; }.chronos-prophetic__time strong { font-size: .62rem; }.chronos-prophetic__time small { color: #f4e3f3; font-size: .53rem; }
.chronos-prophetic__time-lower { display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: stretch; gap: 15px; margin-top: 21px; }
.chronos-prophetic__time-lower .chronos-prophetic__detail { margin: 0; }
.chronos-prophetic__tree { position: relative; min-height: 225px; overflow: hidden; border-radius: 13px; background: radial-gradient(circle at 50% 35%, #b8a4cd, #403f59 60%, #182d30); }
.chronos-prophetic__tree::before { content: ""; position: absolute; inset: 12% 10% 19%; border: 1px solid #d9beef7d; border-radius: 50%; transform: scale(calc(.55 + var(--tree-progress, .14) * .5)); box-shadow: 0 0 0 15px #dfc4ef13, 0 0 0 30px #dfc4ef0d; transition: transform .6s ease; }
.chronos-prophetic__tree-crown { position: absolute; z-index: 1; left: 25%; top: 17%; width: 50%; height: 44%; border-radius: 48% 52% 44% 50%; background: radial-gradient(circle at 42% 30%, #d7d8aa, #87a37d 56%, #597b67); box-shadow: 0 0 30px #ced0b073; transform: scale(calc(.7 + var(--tree-progress, .14) * .3)); transition: transform .6s ease; }
.chronos-prophetic__tree-trunk { position: absolute; z-index: 2; left: 47%; top: 53%; width: 7%; height: 31%; border-radius: 6px; background: linear-gradient(90deg,#704c3e,#b28a6a,#654638); }.chronos-prophetic__tree-roots { position: absolute; left: 25%; bottom: 11%; width: 50%; height: 4px; border-radius: 50%; background: #b39981; box-shadow: 0 0 16px #cbb590; }
.chronos-prophetic__caveat { margin: 15px 0 0; padding: 12px; border: 1px solid #ad9ac2; border-radius: 9px; background: #f0eaf5; color: #544562; font-size: .69rem; line-height: 1.55; }
@media (max-width: 1050px) { .chronos-pathway__head { align-items: flex-start; flex-direction: column; gap: 11px; padding: 12px 20px; }.chronos-pathway__head h2 { font-size: 1.85rem; }.chronos-pathway__head p { font-size: .69rem; }.chronos-pathway__switch button { min-height: 31px; padding: 6px 10px; }.chronos-prophetic__content { grid-template-columns: 1fr; }.chronos-prophetic__intro { position: static; }.chronos-prophetic__intro h3 { margin: 8px 0; font-size: 2rem; }.chronos-prophetic__formula { display: flex; flex-wrap: wrap; margin-top: 12px; }.chronos-prophetic__formula span { padding: 7px; font-size: .65rem; } }
@media (max-width: 700px) { .chronos-views { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }.chronos-views button { min-width: 0; white-space: normal; font-size: .64rem; }.chronos-pathway__head { padding: 10px 12px; }.chronos-pathway__head h2 { font-size: 1.45rem; }.chronos-pathway__head p { display: none; }.chronos-pathway__switch { width: 100%; }.chronos-pathway__switch button { flex: 1; min-width: 0; white-space: normal; font-size: .61rem; }.chronos-lineage__layout { grid-template-columns: 1fr; grid-template-rows: minmax(195px, 1fr) minmax(185px, .85fr); }.chronos-lineage__rail-wrap { border-right: 0; border-bottom: 1px solid #f1cea242; }.chronos-lineage__rail-head { padding: 7px 12px 4px; font-size: .55rem; }.chronos-lineage__rail { padding: 4px 12px 20px 25px; }.chronos-lineage__rail::before { left: 40px; }.chronos-lineage__person { min-height: 44px; margin-bottom: 5px; }.chronos-lineage__person strong { font-size: .82rem; }.chronos-lineage__person small { display: none; }.chronos-lineage__inspector { padding: 10px 12px 20px; }.chronos-lineage__artwork { height: 96px; }.chronos-lineage__inspector-copy { padding-top: 9px; }.chronos-lineage__inspector h3 { font-size: 1.6rem; }.chronos-lineage__description { font-size: .72rem; }.chronos-prophetic__content { gap: 9px; padding: 9px; }.chronos-prophetic__intro, .chronos-prophetic__graphic { padding: 13px; border-radius: 12px; }.chronos-prophetic__intro h3 { font-size: 1.55rem; }.chronos-prophetic__intro p { font-size: .67rem; }.chronos-prophetic__formula span { font-size: .55rem; }.chronos-prophetic__steps { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 15px; }.chronos-prophetic__step { min-height: 65px; }.chronos-prophetic__step:last-child { grid-column: 1 / -1; }.chronos-prophetic__times { gap: 2px; }.chronos-prophetic__time { min-height: 70px; }.chronos-prophetic__time strong { font-size: .52rem; }.chronos-prophetic__time small { display: none; }.chronos-prophetic__time-lower { grid-template-columns: 90px minmax(0,1fr); gap: 8px; }.chronos-prophetic__tree { min-height: 190px; }.chronos-prophetic__endpoints div { font-size: .79rem; }.chronos-prophetic__endpoints span { font-size: .5rem; } }
@media (prefers-reduced-motion: reduce) { .chronos-lineage__person, .chronos-prophetic__step, .chronos-prophetic__time, .chronos-prophetic__tree::before, .chronos-prophetic__tree-crown, .chronos-prophetic__progress { transition: none; } }
