:root{--paper: #F5E6C8;--ink: #2C2C2C;--gold: #C5A059;--ancient: #8B5E3C;--medieval: #8B0000;--modern: #1E3A5F;--contemporary: #2F4F4F;--shadow: rgba(0, 0, 0, .1)}body{margin:0;padding:0;background-color:#e8d8b5;color:var(--ink);font-family:"Noto Serif SC","Source Han Serif SC",serif;overflow-x:hidden}.app-container{min-height:100vh;background:var(--paper);background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.2) 0%,transparent 100%),url(https://www.transparenttextures.com/patterns/natural-paper.png);position:relative;padding-bottom:60px}.dragon-border{position:fixed;left:0;right:0;height:12px;z-index:100;background-image:url("data:image/svg+xml,%3Csvg width='40' height='12' viewBox='0 0 40 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6c4-4 8-4 12 0s8 4 12 0 8-4 12 0' fill='none' stroke='%238B5E3C' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");background-repeat:repeat-x}.dragon-border.top{top:0}.dragon-border.bottom{bottom:0;transform:rotate(180deg)}.ink-landscape{position:fixed;bottom:0;left:0;width:100%;height:30vh;pointer-events:none;z-index:0;opacity:.6}.main-header{position:sticky;top:0;z-index:90;background:#f5e6c8e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(139,94,60,.2);padding:1rem 0}.header-content{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 20px}.logo-section{display:flex;align-items:center;gap:12px}.calligraphy-title{font-family:Ma Shan Zheng,cursive,serif;font-size:1.8rem;margin:0;color:var(--ink);letter-spacing:2px}.cloud-tag{font-size:.7rem;background:#8b5e3c1a;padding:2px 8px;border-radius:10px;color:var(--ancient)}.search-bar{display:flex;align-items:center;background:#0000000d;padding:6px 15px;border-radius:20px;width:240px;transition:all .3s}.search-bar:focus-within{background:#00000014;width:280px}.search-bar input{background:none;border:none;outline:none;margin-left:8px;width:100%;font-size:.9rem}.scroll-body{max-width:800px;margin:40px auto;background:#fff9ed;box-shadow:0 10px 30px var(--shadow);position:relative;min-height:600px;transform-origin:top;border-left:2px solid #D4C4A8;border-right:2px solid #D4C4A8}.scroll-handle{height:24px;background:linear-gradient(to right,#5d4037,#8d6e63,#5d4037);border-radius:12px;width:calc(100% + 40px);margin-left:-20px;box-shadow:0 4px 8px #0000004d;position:relative}.scroll-handle:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;height:2px;background:#ffffff1a}.timeline-line{position:relative;padding:60px 0}.timeline-line:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,var(--gold),transparent)}.event-card-wrapper{width:50%;padding:20px 40px;box-sizing:border-box;position:relative}.event-card-wrapper.left{align-self:flex-start;margin-right:50%;text-align:right}.event-card-wrapper.right{margin-left:50%;text-align:left}.timeline-dot{position:absolute;top:35px;width:12px;height:12px;border-radius:50%;z-index:2;box-shadow:0 0 0 4px var(--paper);transition:transform .3s}.left .timeline-dot{right:-6px}.right .timeline-dot{left:-6px}.event-card{background:#fff;padding:20px;border-radius:4px;box-shadow:0 4px 15px var(--shadow);transition:transform .3s,box-shadow .3s;cursor:pointer}.event-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px #00000026}.event-card:hover+.timeline-dot{transform:scale(1.5)}.event-year{font-weight:700;font-size:.9rem;display:block;margin-bottom:8px}.event-title{margin:0 0 10px;font-size:1.2rem;color:var(--ink)}.event-desc{font-size:.9rem;line-height:1.6;color:#666;margin:0}.timeline-control{max-width:800px;margin:20px auto;padding:0 20px}.slider-info{display:flex;justify-content:space-between;font-size:.8rem;color:var(--ancient);margin-bottom:10px}.current-year{font-weight:700;color:var(--ink);background:var(--gold);color:#fff;padding:2px 12px;border-radius:10px}.ancient-slider{width:100%;accent-color:var(--ancient);cursor:pointer}.side-drawer{position:fixed;top:0;right:0;bottom:0;width:300px;background:var(--paper);z-index:200;box-shadow:-10px 0 30px #0003;padding:60px 30px}.period-list{display:flex;flex-direction:column;gap:15px}.period-list button{background:#fff;border:1px solid #D4C4A8;padding:15px;text-align:left;border-radius:8px;cursor:pointer;transition:all .2s}.period-list button.active{background:var(--ancient);color:#fff;border-color:var(--ancient)}.period-list button span{display:block;font-size:.7rem;opacity:.7;margin-top:4px}@media (max-width: 768px){.event-card-wrapper{width:100%;margin:0!important;text-align:left!important;padding-left:40px}.timeline-line:before{left:20px}.timeline-dot{left:14px!important}.header-content{flex-direction:column;gap:15px}.search-bar{width:100%}}.loading-screen{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--paper)}.ink-drop{width:40px;height:40px;background:var(--ink);border-radius:50%;animation:drop 1.5s infinite}@keyframes drop{0%{transform:scale(0);opacity:1}to{transform:scale(3);opacity:0}}.fab-top{position:fixed;bottom:30px;right:30px;width:50px;height:50px;border-radius:25px;background:var(--gold);color:#fff;border:none;box-shadow:0 4px 15px #0003;cursor:pointer;z-index:100}