:root{--color-bg: #000000;--color-panel: rgba(0, 0, 0, .8);--color-primary: #00d9ff;--color-secondary: #ff00ff;--color-warning: #ffa500;--color-success: #00ff88;--color-text: #e0e6ed;--color-text-dim: #8892b0;--panel-blur: blur(10px)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--color-bg);color:var(--color-text);overflow:hidden;height:100vh}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--color-bg);display:flex;align-items:center;justify-content:center;z-index:10000;transition:opacity .5s ease}.loading-screen.hidden{opacity:0;pointer-events:none}.loading-content{text-align:center}.loading-content h1{font-size:3rem;background:linear-gradient(45deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1rem}.loading-bar{width:300px;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden;margin-top:1rem}.loading-progress{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));width:0%;animation:loading 2s ease-in-out}@keyframes loading{to{width:100%}}.top-nav{position:fixed;top:0;left:0;right:0;height:60px;background:#000814cc;-webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);border-bottom:1px solid rgba(0,217,255,.2);z-index:1000}.nav-content{max-width:1400px;margin:0 auto;padding:0 2rem;height:100%;display:flex;justify-content:space-between;align-items:center}.nav-brand h1{font-size:1.5rem;background:linear-gradient(45deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.tagline{font-size:.875rem;color:var(--color-text-dim);margin-left:1rem}.nav-controls{display:flex;gap:1rem}.btn-nav{padding:.5rem 1rem;background:transparent;border:1px solid rgba(0,217,255,.3);color:var(--color-primary);border-radius:4px;cursor:pointer;transition:all .3s ease}.btn-nav:hover{background:#00d9ff1a;border-color:var(--color-primary);transform:translateY(-2px)}.main-container{position:relative;width:100%;height:100vh;padding-top:60px}#canvas{position:absolute;top:60px;left:0;width:100%;height:calc(100% - 60px);background:radial-gradient(ellipse at center,#012,#000814)}.info-panel,.timeline-panel,.elder-panel,.council-panel{position:absolute;background:var(--color-panel);-webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);border:1px solid rgba(0,217,255,.2);border-radius:8px;padding:1.5rem;box-shadow:0 8px 32px #00d9ff1a}.info-panel{top:80px;left:20px;width:350px}.info-panel h2{font-size:1.5rem;margin-bottom:1rem;color:var(--color-warning)}.highlight{font-size:1.1rem;margin:1rem 0}.critical{color:var(--color-warning);font-weight:700;font-size:1.3rem}.phase-indicator{margin-top:2rem;padding:1rem;background:#00d9ff1a;border-radius:4px}.phase-title{font-size:.875rem;color:var(--color-text-dim);margin-bottom:.5rem}.phase-name{font-size:1.25rem;color:var(--color-primary);font-weight:700}.timeline-panel{top:80px;right:20px;width:320px;max-height:400px}.timeline-panel h3{color:var(--color-primary);margin-bottom:1rem}.time-display{padding:1rem;background:#0000004d;border-radius:4px;margin-bottom:1rem}.year{font-size:1.5rem;color:var(--color-primary)}.day{font-size:.875rem;color:var(--color-text-dim)}.timeline-events{max-height:250px;overflow-y:auto}.timeline-event{padding:.75rem;margin:.5rem 0;background:#ffffff0d;border-radius:4px;border-left:3px solid var(--color-primary);font-size:.875rem}.timeline-event.elder{border-left-color:var(--color-secondary)}.timeline-event.council{border-left-color:var(--color-success)}.elder-panel{bottom:120px;left:20px;width:320px}.elder-panel h3{color:var(--color-secondary);margin-bottom:1rem}.council-panel{bottom:120px;right:20px;width:320px}.council-panel h3{color:var(--color-success);margin-bottom:1rem}.elder-list,.council-list{max-height:200px;overflow-y:auto}.elder-item,.council-item{padding:.5rem;margin:.25rem 0;background:#ffffff0d;border-radius:4px;font-size:.875rem}.elder-item{border-left:2px solid var(--color-secondary)}.council-item{border-left:2px solid var(--color-success)}.placeholder{color:var(--color-text-dim);font-style:italic}.controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:1rem;align-items:center;padding:1rem 2rem;background:var(--color-panel);-webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);border:1px solid rgba(0,217,255,.2);border-radius:8px}.btn-control{padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:all .3s ease;background:#ffffff1a;color:var(--color-text)}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff}.btn-control:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #00d9ff4d}.btn-control:disabled{opacity:.5;cursor:not-allowed}.speed-control{display:flex;align-items:center;gap:.5rem;padding:0 1rem;border-left:1px solid rgba(255,255,255,.1)}.speed-control label{color:var(--color-text-dim)}#speed-slider{width:100px}#speed-display{min-width:40px;color:var(--color-primary);font-weight:700}.decision-panel{position:absolute;bottom:80px;right:20px;width:250px;background:var(--color-panel);-webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);border-radius:12px;padding:15px;border:1px solid rgba(0,217,255,.2);display:none;z-index:100}.decision-panel h3{margin:0 0 10px;font-size:1.1em;color:var(--color-primary)}.decision-panel #decision-content{line-height:1.4}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:2000;align-items:center;justify-content:center}.modal.active{display:flex}.modal-content{background:var(--color-panel);border:1px solid rgba(0,217,255,.3);border-radius:12px;padding:2rem;max-width:600px;max-height:80vh;overflow-y:auto}.modal-content h2{color:var(--color-primary);margin-bottom:1rem}.modal-content h3{color:var(--color-secondary);margin:1.5rem 0 .5rem}.modal-content ul{margin-left:1.5rem}.modal-content li{margin:.5rem 0}.btn-modal-close{margin-top:1.5rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));border:none;border-radius:4px;color:#fff;cursor:pointer;transition:all .3s ease}.btn-modal-close:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00d9ff4d}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}::-webkit-scrollbar-thumb{background:#00d9ff4d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#00d9ff80}