:root{--bg:#080b12;--bg2:#0d1320;--panel:#111927;--ink:#f5ead4;--muted:#8f9aab;--gold:#d9aa5b;--orange:#d66f45;--blue:#4e91b8;--violet:#8870b8;--green:#5d9e85;--line:rgba(235,210,169,.16);--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 70% 4%,rgba(72,112,154,.16),transparent 30%),linear-gradient(180deg,#080b12,#0a1019 60%,#070a10);color:var(--ink);font-family:"Segoe UI",Tahoma,Arial,sans-serif;overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;z-index:100;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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");opacity:.22}.topbar{height:70px;padding:0 max(20px,calc((100vw - 1440px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(8,11,18,.82);backdrop-filter:blur(18px);position:sticky;top:0;z-index:50}.topbar a{color:#b9c0cc;text-decoration:none;font-size:12px}.brand{display:flex;align-items:center;gap:10px!important;color:var(--ink)!important}.brand-mark{width:38px;height:38px;border:1px solid rgba(217,170,91,.4);display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 20px rgba(217,170,91,.08)}.brand b,.brand small{display:block}.brand b{font-size:14px}.brand small{font-size:8px;letter-spacing:2px;color:#7f8997;margin-top:3px}.hero{width:min(1440px,100%);min-height:calc(100vh - 70px);margin:auto;padding:80px max(24px,6vw);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;left:3%;right:3%;bottom:58px;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}.hero-copy{position:relative;z-index:3}.eyebrow{color:var(--gold);font-size:13px;letter-spacing:.5px;margin:0 0 22px}.hero h1{font-size:clamp(54px,7vw,108px);line-height:1.03;margin:0;font-weight:300;letter-spacing:-4px}.hero h1 span{font-weight:800;background:linear-gradient(120deg,#fff2d6,#cf9b50);-webkit-background-clip:text;background-clip:text;color:transparent}.intro{max-width:650px;color:#9aa5b5;font-size:clamp(15px,1.5vw,19px);line-height:2;margin:28px 0}.enter-btn{border:0;background:linear-gradient(135deg,#d29d4a,#a9662f);color:#16100a;padding:0 22px 0 0;height:56px;min-width:190px;border-radius:28px;display:inline-flex;align-items:center;justify-content:space-between;font:700 14px inherit;cursor:pointer;box-shadow:0 15px 40px rgba(179,116,45,.22);transition:.35s var(--ease)}.enter-btn i{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-style:normal;font-size:22px}.enter-btn:hover{transform:translateY(-4px);box-shadow:0 20px 55px rgba(179,116,45,.35)}.time-core{width:min(42vw,530px);aspect-ratio:1;justify-self:center;position:relative;display:grid;place-items:center}.core-ring{position:absolute;border-radius:50%;border:1px solid rgba(217,170,91,.25)}.ring-1{inset:4%;animation:spin 35s linear infinite}.ring-1:before,.ring-2:before,.ring-3:before{content:"";position:absolute;top:50%;left:-5px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 18px var(--gold)}.ring-2{inset:18%;border-style:dashed;animation:spinReverse 25s linear infinite}.ring-3{inset:31%;animation:spin 18s linear infinite}.core-center{width:32%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,#28364c,#101722 68%);border:1px solid rgba(255,228,179,.35);box-shadow:0 0 90px rgba(78,145,184,.22),inset 0 0 35px rgba(217,170,91,.12)}.core-center b{font-size:clamp(48px,6vw,82px);line-height:.9;font-weight:300}.core-center small{color:var(--gold);font-size:13px;margin-top:9px}.spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff1cd;box-shadow:0 0 18px #fff1cd}.s1{top:13%;left:25%;animation:blink 2.5s infinite}.s2{top:70%;right:8%;animation:blink 3.2s infinite}.s3{bottom:9%;left:36%;animation:blink 4s infinite}.s4{top:30%;right:14%;animation:blink 2.8s infinite}.hero-scale{position:absolute;bottom:36px;left:6%;right:6%;display:flex;direction:ltr;align-items:center;gap:15px;color:#657080;font-size:10px;letter-spacing:2px}.hero-scale i{height:1px;flex:1;background:repeating-linear-gradient(90deg,rgba(217,170,91,.5) 0 1px,transparent 1px 40px)}
.explorer{width:min(1440px,calc(100% - 30px));margin:0 auto 100px;scroll-margin-top:85px}.control-deck{padding:35px clamp(20px,4vw,55px);background:linear-gradient(145deg,rgba(20,29,43,.97),rgba(12,17,27,.97));border:1px solid var(--line);border-radius:28px 28px 0 0;display:grid;grid-template-columns:minmax(220px,.7fr) minmax(420px,1.8fr);gap:28px;align-items:center}.section-title span{color:var(--gold);font-size:10px;letter-spacing:2px}.section-title h2{font-size:clamp(21px,2vw,30px);font-weight:500;margin:7px 0}.era-gates{display:flex;align-items:stretch;gap:8px;overflow-x:auto;scrollbar-width:none}.era-gates::-webkit-scrollbar{display:none}.era-gate{min-width:130px;flex:1;border:1px solid rgba(218,190,145,.15);background:rgba(255,255,255,.025);color:#aab2bf;padding:13px 12px;border-radius:13px;cursor:pointer;text-align:right;transition:.3s var(--ease)}.era-gate i{font-style:normal;font-size:18px;display:block;margin-bottom:9px}.era-gate b{font-size:12px;display:block}.era-gate small{font-size:9px;color:#697586}.era-gate:hover,.era-gate.active{border-color:rgba(217,170,91,.55);color:#fff0d0;background:linear-gradient(145deg,rgba(217,170,91,.12),rgba(255,255,255,.02));transform:translateY(-3px)}.tools{grid-column:2;display:flex;gap:9px}.search-box{height:42px;flex:1;display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:#090e17;border-radius:22px;padding:0 15px;color:#788493}.search-box input{width:100%;border:0;outline:0;background:transparent;color:#e9e1d5;font:12px inherit}.tool-btn{border:1px solid var(--line);background:transparent;color:#8793a3;border-radius:21px;padding:0 16px;cursor:pointer;font:10px inherit}.tool-btn[aria-pressed="true"]{color:var(--gold);border-color:rgba(217,170,91,.4)}.time-stage{background:#090e17;border:1px solid var(--line);border-top:0;border-radius:0 0 28px 28px;padding:28px 0 18px;min-height:560px;position:relative;overflow:hidden}.time-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,rgba(64,102,139,.09),transparent 40%);pointer-events:none}.stage-head{padding:0 clamp(25px,5vw,65px) 20px;display:flex;justify-content:space-between;align-items:flex-end}.stage-head div span,.stage-head div b{display:block}.stage-head span{font-size:11px;color:#7f8998}.stage-head b{font-size:21px;margin-top:4px}.stage-head p{font-size:10px;color:#657181}.century-ruler{height:36px;margin:0 60px;direction:ltr;display:flex;position:relative;border-top:1px solid var(--line)}.century-ruler span{flex:1;font-size:8px;color:#596573;padding-top:8px;position:relative}.century-ruler span:before{content:"";position:absolute;left:0;top:-5px;width:1px;height:9px;background:#4c5765}.track-shell{position:relative}.track-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;direction:ltr;padding:20px 70px 45px;outline:0;scroll-behavior:smooth}.track-viewport::-webkit-scrollbar{display:none}.track-viewport.dragging{cursor:grabbing;scroll-behavior:auto}.timeline-track{height:350px;min-width:max-content;position:relative;padding:0 100px}.track-line{position:absolute;left:50px;right:50px;top:175px;height:2px;background:linear-gradient(90deg,transparent,#406582 4%,#d9aa5b 48%,#7b668f 76%,transparent);box-shadow:0 0 18px rgba(78,145,184,.18)}.events{display:flex;align-items:center;height:100%;gap:44px}.event-node{width:185px;height:100%;position:relative;border:0;background:transparent;color:inherit;cursor:pointer;text-align:center;font-family:inherit;padding:0;flex:none}.event-node .stem{position:absolute;left:50%;width:1px;height:74px;background:linear-gradient(var(--event-color),rgba(255,255,255,.07));top:101px}.event-node:nth-child(even) .stem{top:175px;background:linear-gradient(rgba(255,255,255,.07),var(--event-color))}.event-node .point{position:absolute;left:calc(50% - 9px);top:166px;width:18px;height:18px;border-radius:50%;background:#0a1019;border:4px solid var(--event-color);box-shadow:0 0 0 7px rgba(10,16,25,.95),0 0 22px var(--event-color);transition:.3s var(--ease)}.event-node .event-card{position:absolute;left:0;right:0;top:10px;min-height:91px;border:1px solid rgba(220,200,167,.13);border-radius:15px;padding:13px 12px;background:linear-gradient(145deg,rgba(25,35,50,.96),rgba(13,19,29,.96));direction:rtl;transition:.35s var(--ease)}.event-node:nth-child(even) .event-card{top:249px}.event-year{display:block;color:var(--event-color);font-size:17px;font-weight:800}.event-name{display:block;font-size:12px;margin-top:5px;line-height:1.5}.event-card small{display:block;color:#667283;font-size:8px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-node:hover .event-card,.event-node.active .event-card{transform:translateY(-8px);border-color:var(--event-color);box-shadow:0 18px 40px rgba(0,0,0,.32)}.event-node:nth-child(even):hover .event-card,.event-node:nth-child(even).active .event-card{transform:translateY(8px)}.event-node:hover .point,.event-node.active .point{background:var(--event-color);transform:scale(1.2)}.event-node.hidden{display:none}.empty-track{width:70vw;text-align:center;color:#6f7a89;font-size:13px}.nav-arrow{position:absolute;top:142px;width:48px;height:66px;z-index:5;border:1px solid var(--line);background:rgba(9,14,23,.85);backdrop-filter:blur(8px);color:#bac2cd;font-size:28px;cursor:pointer}.nav-arrow.prev{right:12px;border-radius:24px 8px 8px 24px}.nav-arrow.next{left:12px;border-radius:8px 24px 24px 8px}.nav-arrow:hover{color:var(--gold);border-color:rgba(217,170,91,.4)}.drag-hint{text-align:center;color:#566170;font-size:9px;letter-spacing:1px}.drag-hint span{font-size:16px;color:#9c7a43;margin-left:6px}.story-panel{position:fixed;z-index:80;top:0;right:0;width:min(520px,100%);height:100dvh;background:linear-gradient(165deg,#171e28,#0c1119 72%);border-left:1px solid rgba(217,170,91,.22);transform:translateX(105%);transition:.45s var(--ease);overflow-y:auto;box-shadow:-35px 0 90px rgba(0,0,0,.45)}.story-panel.open{transform:none}.panel-backdrop{position:fixed;inset:0;z-index:70;background:rgba(2,4,8,.72);backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:.3s}.panel-backdrop.open{opacity:1;pointer-events:auto}.panel-close{position:sticky;top:18px;right:calc(100% - 54px);z-index:3;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#101722;color:#cbd1d8;font-size:24px;cursor:pointer}.panel-inner{padding:15px clamp(25px,5vw,48px) 55px}.panel-era{font-size:10px;color:var(--gold);letter-spacing:1px}.panel-year{font-size:clamp(52px,10vw,82px);font-weight:200;line-height:1;color:#e6c68d;margin:22px 0 10px}.panel-inner h2{font-size:clamp(28px,5vw,43px);line-height:1.35;margin:0 0 22px}.panel-hook{font-size:16px;line-height:1.9;color:#c3c9d0;border-right:2px solid var(--gold);padding-right:16px}.panel-story{color:#8e99a7;line-height:2.1;font-size:13px;margin-top:28px;white-space:pre-line}.impact{margin-top:30px;padding:20px;border:1px solid rgba(217,170,91,.18);border-radius:16px;background:rgba(217,170,91,.06)}.impact b{color:#dfbd7d;font-size:11px}.impact p{color:#9da6b2;line-height:1.9;font-size:12px}.panel-empty{text-align:center;color:#64707e;padding-top:35vh}.loading-state{position:fixed;inset:70px 0 0;z-index:45;background:#080b12;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:17px;color:#818c9a;font-size:11px}.loading-state.hide{opacity:0;pointer-events:none;transition:.5s}.loader-ring{width:54px;height:54px;border:1px solid rgba(217,170,91,.2);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}.error-state{position:fixed;z-index:90;left:20px;bottom:20px;background:#471f1f;border:1px solid #824242;padding:14px 18px;border-radius:12px;color:#ffd9d9;font-size:12px}.motion-off *{animation-play-state:paused!important;scroll-behavior:auto!important}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinReverse{to{transform:rotate(-360deg)}}@keyframes blink{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.4)}}
@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:auto;padding-top:65px;padding-bottom:100px}.hero-copy{text-align:center}.intro{margin-left:auto;margin-right:auto}.time-core{position:absolute;width:450px;opacity:.18;left:-150px;top:50px}.control-deck{grid-template-columns:1fr}.era-gates,.tools{grid-column:1}.stage-head p{display:none}.hero h1{font-size:clamp(50px,14vw,82px);letter-spacing:-2px}.explorer{width:calc(100% - 18px)}}
@media(max-width:620px){.topbar{height:61px}.brand small{display:none}.hero{min-height:calc(100vh - 61px);padding:55px 20px 90px}.hero h1{font-size:15vw}.intro{font-size:14px}.control-deck{padding:25px 16px}.era-gate{min-width:115px}.tools{flex-wrap:wrap}.search-box{flex-basis:100%}.time-stage{min-height:650px}.stage-head{padding:0 20px 15px}.century-ruler{display:none}.track-viewport{overflow:visible;padding:20px 16px 50px;cursor:default}.timeline-track{height:auto;min-width:0;padding:0 0 0 0}.track-line{left:auto;right:25px;top:12px;bottom:15px;width:2px;height:auto;background:linear-gradient(#4e91b8,#d9aa5b,#8870b8)}.events{height:auto;display:flex;flex-direction:column;gap:14px;align-items:stretch;direction:rtl}.event-node{width:100%;height:auto;min-height:95px;text-align:right;padding-right:58px}.event-node .stem{display:none}.event-node .point{left:auto;right:17px;top:31px}.event-node .event-card,.event-node:nth-child(even) .event-card{position:relative;inset:auto;min-height:85px;text-align:right}.event-node:hover .event-card,.event-node.active .event-card,.event-node:nth-child(even):hover .event-card,.event-node:nth-child(even).active .event-card{transform:translateX(-5px)}.nav-arrow,.drag-hint{display:none}.story-panel{top:auto;bottom:0;width:100%;height:min(88dvh,760px);border-left:0;border-top:1px solid rgba(217,170,91,.22);border-radius:25px 25px 0 0;transform:translateY(105%)}.story-panel.open{transform:none}.panel-close{right:calc(100% - 54px)}.panel-inner{padding-top:0}.panel-year{font-size:48px}.loading-state{inset:61px 0 0}}