body{margin:0;overflow:hidden;font-family:Cinzel,Georgia,Sarabun,Noto Sans Thai,serif;background:#d4b483;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.02) 2px,rgba(0,0,0,.02) 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(0,0,0,.02) 2px,rgba(0,0,0,.02) 4px);opacity:.3;pointer-events:none;z-index:9999;mix-blend-mode:multiply}#loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#8b6f47 0%,#6b5639 50%,#4a3f2f 100%);display:flex;justify-content:center;align-items:center;z-index:10000;transition:opacity .8s ease,visibility .8s ease}#loading-screen.hidden{opacity:0;visibility:hidden}.loading-content{text-align:center;color:#f0ebe0;max-width:500px;padding:40px}.loading-title{font-size:2.5em;font-weight:700;margin:0 0 15px;text-shadow:2px 2px 4px rgba(0,0,0,.5);letter-spacing:2px}.loading-subtitle{font-size:1.2em;margin-bottom:40px;opacity:.9;letter-spacing:1px}.progress-container{width:300px;height:6px;background:rgba(0,0,0,.3);border-radius:10px;margin:20px auto;overflow:hidden;box-shadow:inset 0 2px 4px #00000080}.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#d4af37,#f4e8d0,#d4af37);border-radius:10px;transition:width .3s ease;box-shadow:0 0 10px #d4af3780;animation:shimmer 2s linear infinite}@keyframes shimmer{0%{background-position:-300px 0}to{background-position:300px 0}}.loading-percentage{font-size:1.5em;font-weight:600;margin-top:15px;letter-spacing:2px;text-shadow:0 2px 4px rgba(0,0,0,.5)}#app{width:100vw;height:100vh;position:relative;z-index:10}.navbar{position:fixed;top:0;left:50%;transform:translate(-50%);width:90%;max-width:1400px;height:70px;-webkit-backdrop-filter:blur(30px) saturate(150%);border-top:none;display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:150;color:#fff}.navbar-logo{display:flex;align-items:center;gap:15px;font-size:1.2em;font-weight:700;color:#f0ebe0;letter-spacing:1px}.navbar-logo-image{height:50px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.navbar-logo-icon{font-size:1.5em}.navbar-menu{display:flex;gap:30px;align-items:center}.navbar-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:151}.navbar-hamburger span{display:block;width:25px;height:3px;background:#f0ebe0;border-radius:3px;transition:all .3s ease}.navbar-hamburger.active span:nth-child(1){transform:rotate(45deg) translate(8px,8px)}.navbar-hamburger.active span:nth-child(2){opacity:0}.navbar-hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}.navbar-menu-item{color:#ffffffd9;text-decoration:none;font-size:.95em;font-weight:500;transition:color .3s ease;cursor:pointer}.navbar-menu-item:hover{color:#f0ebe0}#app:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.event-card{position:fixed;top:90px;right:30px;left:auto;transform:translate(50px);background:rgba(240,235,220,.95);border:2px solid rgba(139,69,19,.4);border-radius:16px;padding:24px 30px;max-width:420px;width:auto;text-align:left;box-shadow:0 8px 32px #0000004d;opacity:0;transition:all .5s cubic-bezier(.4,0,.2,1);pointer-events:none;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:100}.event-card.show{opacity:1;transform:translate(0)}.event-card-header{font-size:.7em;letter-spacing:2px;color:#8b4513;margin-bottom:8px;text-transform:uppercase;font-weight:600}.event-card-title{font-size:1.3em;margin:0 0 12px;color:#2c2416;font-weight:700;line-height:1.3}.event-card-description{font-size:.9em;line-height:1.5;color:#5a4a3a;margin:0}#timeline-container{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:100%;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.7) 25%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.3) 75%,transparent 100%);transition:height .4s cubic-bezier(.4,0,.2,1);z-index:100;overflow:hidden}.timeline-collapsed{height:180px}.timeline-expanded{height:500px}#timeline-toggle{position:absolute;top:15px;right:30px;background:rgba(139,69,19,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fffffff2;border:1px solid rgba(255,255,255,.15);padding:10px 20px;border-radius:20px;cursor:pointer;font-family:Cinzel,serif;font-size:14px;font-weight:600;transition:all .3s;z-index:101;box-shadow:0 2px 8px #0000004d}#timeline-toggle:hover{background:rgba(107,52,16,.75);transform:scale(1.05);box-shadow:0 4px 12px #0006}#lang-toggle{position:absolute;top:15px;right:196px;background:rgba(30,30,30,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fffffff2;border:1px solid rgba(255,255,255,.15);padding:10px 20px;border-radius:20px;cursor:pointer;font-family:Cinzel,serif;font-size:14px;font-weight:600;transition:all .3s;z-index:101;box-shadow:0 2px 8px #0000004d}#lang-toggle:hover{background:rgba(50,50,50,.75);transform:scale(1.05);box-shadow:0 4px 12px #0006}#timeline-content{padding:60px 40px 20px;height:100%;overflow-y:auto}.year-display{position:absolute;top:15px;left:30px;font-size:1.8em;font-weight:700;color:#fffffff2;text-shadow:0 2px 8px rgba(0,0,0,.5);font-family:Cinzel,serif}.slider-track{position:relative;margin:20px 0 10px}.timeline-dot{position:absolute;width:10px;height:10px;background:#8B4513;border:2px solid white;border-radius:50%;cursor:pointer;transition:all .2s;transform:translate(-50%);top:50%;margin-top:-5px}.timeline-dot:hover{transform:translate(-50%) scale(1.5);background:#D4AF37}.timeline-dot.active{transform:translate(-50%) scale(1.8);background:#D4AF37;box-shadow:0 0 10px #d4af3799}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}}#timeline-slider{width:100%;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,#D4AF37 0%,#8B4513 100%);outline:none;border-radius:5px;cursor:pointer}#timeline-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:rgba(139,69,19,.8);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:3px solid rgba(255,255,255,.9);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #0000004d;transition:transform .2s}#timeline-slider::-webkit-slider-thumb:hover{transform:scale(1.3)}#timeline-slider::-moz-range-thumb{width:20px;height:20px;background:rgba(139,69,19,.8);border:3px solid rgba(255,255,255,.9);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #0000004d;transition:transform .2s}#timeline-slider::-moz-range-thumb:hover{transform:scale(1.3)}.dots-container{position:relative;width:100%;height:20px;margin:15px 0}.dots-container::-webkit-scrollbar{height:4px}.dots-container::-webkit-scrollbar-track{background:transparent}.dots-container::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:2px}.dots-container::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5)}.year-labels{position:relative;height:25px;margin-top:10px}.year-label{position:absolute;font-size:12px;color:#fffc;text-shadow:0 1px 3px rgba(0,0,0,.5);transform:translate(-50%);font-family:Cinzel,serif;white-space:nowrap}.events-list-hidden{max-height:0;opacity:0;overflow:hidden;transition:all .4s ease}.events-list-visible{max-height:300px;opacity:1;overflow-y:auto;margin-top:20px;padding:10px 0;transition:all .4s ease}.event-list-item{display:flex;gap:15px;padding:12px 15px;margin:6px 0;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;transition:all .3s}.event-list-item:hover{background:rgba(255,255,255,.15);border-color:#fff3;transform:translate(5px)}.event-list-item .event-year{font-weight:700;color:#d4af37f2;text-shadow:0 1px 3px rgba(0,0,0,.5);min-width:60px}.event-list-item .event-title{flex:1;color:#ffffffe6;text-shadow:0 1px 3px rgba(0,0,0,.5)}.event-list-item:hover{background:rgba(139,69,19,.15);transform:translate(8px);border-left-width:6px}.event-year{font-weight:700;color:#8b4513;min-width:80px;flex-shrink:0;font-family:Cinzel,serif}.event-title{flex:1;color:#333;line-height:1.4}@media (max-width: 768px){.navbar{padding:0 20px;height:60px}.navbar-logo{gap:10px}.navbar-logo span{display:none}.navbar-logo-image{height:45px}.navbar-hamburger{display:flex}.navbar-menu{position:fixed;top:60px;right:-100%;width:70%;max-width:300px;height:calc(100vh - 60px);background:rgba(30,30,30,.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);flex-direction:column;gap:0;padding:20px 0;transition:right .3s ease;box-shadow:-5px 0 20px #00000080;z-index:200}.navbar-menu.active{right:0}.navbar-menu-item{width:100%;padding:18px 25px;border-bottom:1px solid rgba(255,255,255,.1);font-size:1.1em;text-align:left}.navbar-menu-item:hover{background:rgba(255,255,255,.1)}.event-card{top:75px;right:15px;left:15px;width:auto;max-width:none;padding:15px 20px;font-size:.85em;border-radius:12px;transform:translate(0) translateY(-20px)}.event-card.show{transform:translate(0) translateY(0)}.event-card-header{font-size:.65em}.event-card-title{font-size:1.1em;margin:0 0 8px}.event-card-description{font-size:.85em;line-height:1.4}#timeline-container{width:100%;max-width:100%;border-radius:15px 15px 0 0}.timeline-collapsed{height:140px}.timeline-expanded{height:60vh;max-height:450px}#timeline-content{padding:50px 15px 15px}.year-display{font-size:1.3em;left:12px;top:10px}#timeline-toggle{top:10px;right:12px;padding:8px 14px;font-size:11px}#lang-toggle{top:10px;right:100px;padding:7px 12px;font-size:10px}#timeline-slider{height:4px}#timeline-slider::-webkit-slider-thumb{width:18px;height:18px}#timeline-slider::-moz-range-thumb{width:18px;height:18px}.timeline-dot{width:7px;height:7px}.timeline-dot.active{transform:scale(1.5)}.year-label{font-size:10px}.events-list-visible{margin-top:56px}.event-list-item{padding:10px 12px;gap:10px;font-size:.9em}.event-list-item .event-year{min-width:50px;font-size:.85em}.event-list-item .event-title{font-size:.9em}}@media (max-width: 480px){.navbar{height:55px;padding:0 15px}.navbar-logo-image{height:40px}.navbar-menu{width:80%;max-width:none}.event-card{top:70px;left:10px;right:10px;padding:12px 15px;font-size:.8em}.event-card-title{font-size:1em}.event-card-header{font-size:.6em}.event-card-description{font-size:.85em;line-height:1.5}.year-display{font-size:1.1em;left:10px;top:8px}#lang-toggle{top:8px;right:127px;padding:6px 10px;font-size:9px}#timeline-toggle{right:10px;padding:6px 12px;font-size:10px}.timeline-collapsed{height:120px}.event-list-item{flex-direction:column;align-items:flex-start;gap:5px}.event-list-item .event-year{min-width:auto}}@media (max-width: 896px) and (orientation: landscape){.navbar{height:50px;padding:0 15px}.navbar-logo-image{height:35px}.navbar-logo span{font-size:.8em}.event-card{top:60px;right:15px;left:auto;max-width:350px;padding:12px 18px;font-size:.8em;transform:translate(50px)}.event-card.show{transform:translate(0)}.timeline-collapsed{height:90px}.timeline-expanded{height:70vh}#timeline-content{padding:40px 15px 10px}.year-display{font-size:1.1em;top:8px;left:12px}#timeline-toggle{top:8px;right:12px;padding:6px 12px;font-size:10px}#lang-toggle{top:8px;right:95px;padding:6px 10px;font-size:9px}}.mobile-navigation{display:none;position:absolute;top:55px;left:12px;gap:10px;z-index:102;right:12px;justify-content:space-between}.nav-btn{display:flex;align-items:center;gap:8px;background:rgba(139,69,19,.5);backdrop-filter:blur(15px) saturate(150%);-webkit-backdrop-filter:blur(15px) saturate(150%);color:#fffffff2;border:1px solid rgba(212,175,55,.4);padding:10px 20px;border-radius:25px;cursor:pointer;font-family:Cinzel,serif;font-size:13px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 3px 10px #00000059,inset 0 1px #ffffff26;min-width:110px;justify-content:center}.nav-btn:hover:not(:disabled){background:rgba(107,52,16,.7);border-color:#d4af37b3;transform:translateY(-2px) scale(1.05);box-shadow:0 6px 18px #d4af3759,inset 0 1px #fff3}.nav-btn:active:not(:disabled){transform:translateY(0) scale(.98);box-shadow:0 2px 8px #0000004d,inset 0 1px #ffffff1a}.nav-btn:disabled{opacity:.3;cursor:not-allowed;background:rgba(60,60,60,.4);border-color:#ffffff1a}.nav-btn svg{width:16px;height:16px;stroke-width:2.5;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}.prev-btn{flex-direction:row}.nav-btn-text{font-size:12px;letter-spacing:.3px;text-shadow:0 1px 2px rgba(0,0,0,.5)}@media (max-width: 768px){#timeline-container{width:100%;max-width:100%;border-radius:15px 15px 0 0}.timeline-collapsed{height:170px}.timeline-expanded{height:60vh;max-height:450px}#timeline-content{padding:50px 15px 15px}.year-display{font-size:1.3em;left:12px;top:10px}#timeline-toggle{top:10px;right:12px;padding:8px 14px;font-size:11px}#lang-toggle{top:10px;right:100px;padding:7px 12px;font-size:10px}#timeline-slider{height:4px}#timeline-slider::-webkit-slider-thumb{width:18px;height:18px}#timeline-slider::-moz-range-thumb{width:18px;height:18px}.dots-container,.year-labels{display:none!important}.mobile-navigation{display:flex!important;top:120px;right:12px;justify-content:space-between}.slider-track{position:relative;margin:0}}@media (max-width: 480px){.year-display{font-size:1.1em;left:10px;top:8px}#lang-toggle{top:8px;right:127px;padding:6px 10px;font-size:9px}#timeline-toggle{right:10px;padding:6px 12px;font-size:10px}.timeline-collapsed{height:150px}.mobile-navigation{top:84px;left:15px;gap:8px;right:12px;justify-content:space-between}.slider-track{position:relative;margin:0}.nav-btn{padding:8px 14px;font-size:11px;min-width:95px}.nav-btn svg{width:14px;height:14px}.nav-btn-text{font-size:11px}}