@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{--color-bg-dark: #0a0c10;--color-bg-panel: rgba(12, 15, 20, .92);--color-bg-panel-hover: rgba(18, 22, 30, .95);--color-border: rgba(180, 160, 120, .15);--color-border-accent: rgba(212, 175, 55, .4);--color-text-primary: #e8e4dc;--color-text-secondary: rgba(232, 228, 220, .6);--color-text-muted: rgba(232, 228, 220, .4);--color-accent-gold: #d4af37;--color-accent-bronze: #cd7f32;--color-accent-copper: #b87333;--color-era-ancient: #8b6914;--color-era-classical: #a63d40;--color-era-medieval: #e07b39;--color-era-early-modern: #d4a84b;--color-era-modern: #c23b22;--color-era-contemporary: #e85d04;--font-display: "Cinzel", serif;--font-body: "IBM Plex Sans", sans-serif;--font-mono: "IBM Plex Mono", monospace;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--shadow-panel: 0 4px 24px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .03);--shadow-glow: 0 0 20px rgba(212, 175, 55, .15);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;background:var(--color-bg-dark);color:var(--color-text-primary);font-family:var(--font-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.panel{background:var(--color-bg-panel);border:1px solid var(--color-border);border-radius:8px;box-shadow:var(--shadow-panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.panel-header{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-gold);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-sm)}.btn{font-family:var(--font-body);font-size:12px;font-weight:500;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:4px;background:transparent;color:var(--color-text-primary);cursor:pointer;transition:all var(--transition-fast)}.btn:hover{background:#d4af371a;border-color:var(--color-border-accent)}.btn.active{background:#d4af3726;border-color:var(--color-accent-gold);color:var(--color-accent-gold)}.checkbox-label{display:flex;align-items:center;gap:var(--space-sm);font-size:12px;color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast);-webkit-user-select:none;user-select:none}.checkbox-label:hover{color:var(--color-text-primary)}.checkbox-label input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border:1px solid var(--color-border-accent);border-radius:3px;background:transparent;cursor:pointer;position:relative;transition:all var(--transition-fast)}.checkbox-label input[type=checkbox]:checked{background:var(--color-accent-gold);border-color:var(--color-accent-gold)}.checkbox-label input[type=checkbox]:checked:after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--color-bg-dark);border-width:0 2px 2px 0;transform:rotate(45deg)}.input{font-family:var(--font-body);font-size:12px;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:4px;background:#0000004d;color:var(--color-text-primary);outline:none;transition:all var(--transition-fast)}.input::placeholder{color:var(--color-text-muted)}.input:focus{border-color:var(--color-border-accent);box-shadow:0 0 0 2px #d4af371a}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border-accent);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-accent-gold)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:#b4a07833;border-radius:2px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--color-accent-gold);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #0000004d;transition:transform var(--transition-fast)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--color-accent-gold);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 8px #0000004d}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.animate-fade-in{animation:fadeIn var(--transition-normal) ease forwards}.animate-slide-up{animation:slideUp var(--transition-slow) ease forwards}.tooltip{animation:fadeIn .15s ease forwards}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.animate-slide-in-right{animation:slideInRight var(--transition-slow) ease forwards}.animate-slide-out-right{animation:slideOutRight var(--transition-slow) ease forwards}@keyframes playingPulse{0%,to{box-shadow:0 0 #d4af3766}50%{box-shadow:0 0 0 8px #d4af3700}}.playing-indicator{animation:playingPulse 1.5s ease infinite}.speed-btn{font-family:var(--font-mono);font-size:11px;padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-border);border-radius:3px;background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);min-width:32px}.speed-btn:hover{background:#d4af371a;border-color:var(--color-border-accent);color:var(--color-text-primary)}.speed-btn.active{background:#d4af3733;border-color:var(--color-accent-gold);color:var(--color-accent-gold)}