:root{--base-bg-dark: #0d1117;--base-bg-surface: #161b22;--base-bg-elevated: #21262d;--base-bg-hover: #30363d;--base-text-primary: #e6edf3;--base-text-secondary: #8b949e;--base-text-muted: #6e7681;--base-globe-ocean: #004d7a;--base-canvas-clear: #1a3a4a;--base-grid-color: rgba(255, 255, 255, .1);--bg-dark: var(--base-bg-dark);--bg-surface: var(--base-bg-surface);--bg-elevated: var(--base-bg-elevated);--bg-hover: var(--base-bg-hover);--text-primary: var(--base-text-primary);--text-secondary: var(--base-text-secondary);--text-muted: var(--base-text-muted);--bg-globe-ocean: var(--base-globe-ocean);--bg-canvas-clear: var(--base-canvas-clear);--grid-color: var(--base-grid-color);--accent-primary: #58a6ff;--accent-success: #3fb950;--accent-warning: #d29922;--accent-danger: #f85149;--border-default: #30363d;--border-muted: #21262d;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--font-family: "Segoe UI", system-ui, -apple-system, sans-serif;--font-size-sm: 12px;--font-size-md: 14px;--font-size-lg: 16px;--font-size-xl: 20px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--toolbar-width: 200px;--properties-width: 280px;--header-height: 56px;--timeline-height: 64px}[data-theme=light]{--bg-dark: #f6f8fa;--bg-surface: #ffffff;--bg-elevated: #eaeef2;--bg-hover: #d0d7de;--text-primary: #1f2328;--text-secondary: #656d76;--text-muted: #8c959f;--bg-globe-ocean: #29b6f6;--bg-canvas-clear: #e6f7ff;--grid-color: rgba(0, 0, 0, .3);--border-default: #d0d7de;--border-muted: #eaeef2;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .1);--shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .2)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font-family);font-size:var(--font-size-md);color:var(--text-primary);background:var(--bg-dark);line-height:1.5}.app-container{display:flex;flex-direction:column;height:100vh;background:var(--bg-dark)}.app-header{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 var(--space-lg);background:var(--bg-surface);border-bottom:1px solid var(--border-default)}.app-title{font-size:var(--font-size-xl);font-weight:700;background:linear-gradient(135deg,var(--accent-primary),var(--accent-success));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--text-secondary);margin-left:var(--space-xs);-webkit-text-fill-color:initial}.app-subtitle a{color:var(--accent-primary);text-decoration:none;transition:color .15s ease}.app-subtitle a:hover{text-decoration:underline;color:var(--accent-success)}.header-actions{display:flex;gap:var(--space-sm)}.main-content{display:flex;flex:1;overflow:hidden}.toolbar{width:var(--toolbar-width);background:var(--bg-surface);border-right:1px solid var(--border-default);padding:var(--space-md);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-lg)}.dropdown-section{display:flex;flex-direction:column}.dropdown-header{font-size:10px;text-transform:uppercase;color:var(--text-secondary);font-weight:700;padding:4px 8px;letter-spacing:.5px}.tool-group{display:flex;flex-direction:column;gap:var(--space-sm)}.tool-group-title{font-size:var(--font-size-sm);font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-xs)}.tool-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;transition:all .15s ease;font-size:var(--font-size-md)}.tool-btn:hover{background:var(--bg-hover)}.tool-btn.active{background:var(--bg-elevated);border-color:var(--accent-primary);color:var(--accent-primary)}.tool-icon{font-size:18px}.tool-label{font-weight:500}#feature-selector{display:none}.feature-btn{display:block;width:100%;padding:var(--space-sm) var(--space-md);background:transparent;border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;text-align:left;transition:all .15s ease;font-size:var(--font-size-md)}.feature-btn:hover{background:var(--bg-hover);border-color:var(--text-secondary)}.feature-btn.active{background:var(--bg-elevated);border-color:var(--accent-primary)}.plate-list{display:flex;flex-direction:column;gap:var(--space-xs)}.plate-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);background:var(--bg-elevated);border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease}.plate-item:hover{background:var(--bg-hover)}.plate-item.selected{border-color:var(--accent-primary)}.plate-color{width:16px;height:16px;border-radius:50%;flex-shrink:0}.plate-name{flex:1;font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plate-visibility{background:transparent;border:none;cursor:pointer;font-size:14px;padding:2px;opacity:.7}.plate-visibility:hover{opacity:1}.canvas-container{flex:1;position:relative;overflow:hidden;background:var(--bg-dark)}#main-canvas{width:100%;height:100%;display:block}.canvas-hint{position:absolute;bottom:var(--space-lg);left:50%;transform:translate(-50%);padding:var(--space-sm) var(--space-md);background:#000c;border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-size-sm);pointer-events:none;display:none}.properties-panel{width:var(--properties-width);background:var(--bg-surface);border-left:1px solid var(--border-default);padding:var(--space-md);overflow-y:auto}.panel-title{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--border-default)}.property-group{margin-bottom:var(--space-md)}.property-label{display:block;font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--space-xs)}.property-input{width:100%;padding:var(--space-sm);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--font-size-md)}.property-input:focus{outline:none;border-color:var(--accent-primary)}.property-color{width:100%;height:36px;padding:2px;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:pointer}.property-slider{width:100%;margin-bottom:var(--space-xs)}.property-value{font-size:var(--font-size-sm);color:var(--text-muted);font-family:monospace}.property-section-title{font-size:var(--font-size-md);font-weight:600;margin-bottom:var(--space-sm);color:var(--text-secondary)}.property-divider{border:none;border-top:1px solid var(--border-default);margin:var(--space-md) 0}.timeline-bar{display:flex;align-items:center;gap:var(--space-md);height:var(--timeline-height);padding:0 var(--space-lg);background:var(--bg-surface);border-top:1px solid var(--border-default)}.time-controls{display:flex;align-items:center;gap:var(--space-sm)}.timeline{flex:1;display:flex;align-items:center;gap:var(--space-md)}.time-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:var(--bg-elevated);border-radius:var(--radius-sm);cursor:pointer}.time-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent-primary);border-radius:50%;cursor:pointer;transition:transform .1s}.time-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.time-display{font-family:monospace;font-size:var(--font-size-md);color:var(--text-secondary);min-width:auto;text-align:right;display:flex;align-items:center;gap:var(--space-sm)}.time-controls-row{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-sm)}.current-time-display{padding:4px 8px;border-radius:var(--radius-sm);background:var(--bg-elevated);transition:background-color .2s;font-family:monospace;font-weight:600;color:var(--accent-primary);min-width:40px;text-align:center}.current-time-display:hover{background:var(--bg-hover);cursor:pointer}.speed-select{padding:var(--space-xs) var(--space-sm);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--font-size-sm);cursor:pointer}.btn{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);border:1px solid transparent;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:500;cursor:pointer;transition:all .15s ease}.btn-primary{background:var(--accent-primary);color:#fff}.btn-primary:hover{background:#4a94e6}.btn-secondary{background:var(--bg-elevated);border-color:var(--border-default);color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-hover)}.btn-danger{background:var(--accent-danger);color:#fff;width:100%;justify-content:center;margin-top:var(--space-md)}.btn-danger:hover{background:#e0413a}.btn-icon{width:40px;height:40px;padding:0;justify-content:center;background:var(--bg-elevated);border-color:var(--border-default);font-size:18px}.btn-icon:hover{background:var(--bg-hover)}.icon{font-size:16px}.empty-message{color:var(--text-muted);font-size:var(--font-size-sm);font-style:italic;text-align:center;padding:var(--space-md)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.right-sidebar{display:flex;flex-direction:column;width:var(--properties-width);background:var(--bg-surface);border-left:1px solid var(--border-default);height:100%}.properties-panel{width:100%;border-left:none}.timeline-panel{border-top:1px solid var(--border-default);background:var(--bg-surface);overflow-y:auto;display:flex;flex-direction:column}.timeline-title{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);font-weight:600;color:var(--text-secondary);text-transform:uppercase;background:var(--bg-elevated);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--border-default)}.timeline-list{padding:var(--space-sm);display:flex;flex-direction:column;gap:var(--space-xs)}.timeline-item{background:var(--bg-elevated);border:1px solid transparent;border-radius:var(--radius-sm);overflow:hidden;transition:all .15s ease}.timeline-item:hover{background:var(--bg-hover)}.timeline-header{display:flex;align-items:center;padding:var(--space-sm);cursor:pointer;gap:var(--space-sm)}.timeline-icon{width:20px;text-align:center;color:var(--text-muted)}.timeline-time{font-family:monospace;font-weight:600;color:var(--accent-primary);min-width:40px;text-align:right}.timeline-label{flex:1;font-size:var(--font-size-sm);font-weight:500}.type-birth .timeline-icon{color:var(--accent-success)}.type-motion .timeline-icon{color:var(--accent-primary)}.type-split .timeline-icon{color:var(--accent-warning)}.type-death .timeline-icon{color:var(--text-muted)}.btn-tiny-danger{background:transparent;color:var(--text-muted);border:none;font-weight:700;cursor:pointer;padding:0 4px;font-size:16px}.btn-tiny-danger:hover{color:var(--accent-danger)}.timeline-content{display:none;padding:var(--space-sm);background:var(--bg-dark);border-top:1px solid var(--border-default)}.timeline-item.expanded .timeline-content{display:block}.timeline-item.expanded{border-color:var(--border-default)}.timeline-row{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:4px}.timeline-row:last-child{margin-bottom:0}.timeline-row-label{width:50px;font-size:var(--font-size-xs);color:var(--text-secondary)}.timeline-input{flex:1;background:var(--bg-elevated);border:1px solid var(--border-default);color:var(--text-primary);padding:2px 4px;border-radius:var(--radius-sm);width:100%}.timeline-input-small{width:60px;background:var(--bg-elevated);border:1px solid var(--border-default);color:var(--text-primary);padding:2px 4px;border-radius:var(--radius-sm)}.info-icon{display:inline-block;margin-left:2px;cursor:help;font-style:normal;font-size:10px;vertical-align:super;opacity:.7;transition:opacity .2s;color:var(--accent-primary);font-weight:700}.info-icon:hover{opacity:1}#global-tooltip{position:fixed;background:#161b22f2;color:#e6edf3;padding:8px 12px;border-radius:6px;font-size:12px;border:1px solid var(--border-default);pointer-events:none;z-index:9999;box-shadow:0 4px 12px #00000080;max-width:250px;white-space:normal;display:none;line-height:1.4}.toolbar{transition:width .3s ease,padding .3s ease,opacity .3s ease;overflow-x:hidden}.toolbar.collapsed{width:0;padding:var(--space-md) 0;padding:0;opacity:0;border-right:none}.right-sidebar{transition:width .3s ease,padding .3s ease,opacity .3s ease;overflow-x:hidden}.right-sidebar.collapsed{width:0;padding:0;opacity:0;border-left:none}.plate-sidebar{width:220px;background:var(--bg-surface);border-right:1px solid var(--border-default);display:flex;flex-direction:column;transition:width .3s ease,opacity .3s ease;overflow:hidden;flex-shrink:0}.plate-sidebar.collapsed{width:0;opacity:0;border-right:none}.view-dropdown-container{position:relative;display:inline-block}.view-dropdown-menu{display:none;position:absolute;top:100%;left:0;background-color:var(--bg-elevated);min-width:160px;box-shadow:var(--shadow-lg);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-sm);z-index:1000;margin-top:4px}.view-dropdown-menu.show{display:block}.view-dropdown-item{display:flex;align-items:center;gap:8px;padding:4px 8px;font-size:var(--font-size-md);color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.view-dropdown-item:hover{background-color:var(--bg-hover);border-radius:var(--radius-sm)}.timeline-bar{transition:height .3s ease,padding .3s ease,opacity .3s ease}.timeline-bar.collapsed{height:0;padding:0;opacity:0;border-top:none;overflow:hidden}.oldschool-mode{font-family:Consolas,Monaco,Courier New,monospace;--radius-sm: 0;--radius-md: 0;--radius-lg: 0}.oldschool-text{display:none}.oldschool-mode .oldschool-text{display:inline;font-size:12px;font-weight:700;vertical-align:middle}#btn-ui-mode .oldschool-text{display:inline;font-size:12px;font-weight:700;vertical-align:middle;margin-left:4px}.oldschool-mode .icon:not(#btn-play .icon),.oldschool-mode .tool-icon,.oldschool-mode .info-icon,.oldschool-mode .coffee-icon{display:none!important}.oldschool-mode .btn,.oldschool-mode .tool-btn,.oldschool-mode .feature-btn,.oldschool-mode .property-input,.oldschool-mode .tool-select{border-radius:0;border:1px solid var(--border-default);text-transform:uppercase;font-weight:700}.oldschool-mode .tool-btn.active,.oldschool-mode .feature-btn.active{border:2px solid var(--accent-primary);background:var(--bg-hover)}.retro-status-box{display:none!important;align-items:center;justify-content:center;border:1px solid var(--border-default);padding:4px 12px;margin-right:12px;min-width:300px;height:32px;background:var(--bg-elevated);font-family:Consolas,Monaco,Courier New,monospace;font-size:11px;color:var(--text-primary);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.oldschool-mode .retro-status-box{display:flex!important}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;z-index:10000;display:flex;justify-content:center;align-items:center}.modal-content{background:var(--bg-secondary);border:2px solid var(--border-default);border-radius:4px;padding:16px;min-width:300px;box-shadow:0 4px 12px #0006}.modal-content h3{margin-top:0;color:var(--text-primary);margin-bottom:12px}.explorer-section{margin-bottom:4px}.explorer-header{background-color:var(--bg-hover);padding:6px 10px;cursor:pointer;font-size:11px;font-weight:600;display:flex;justify-content:space-between;align-items:center;border-radius:4px;-webkit-user-select:none;user-select:none;color:var(--text-primary)}.explorer-header:hover{filter:brightness(1.1)}.paint-group-header{padding:4px 8px;font-size:10px;background:#ffffff08;margin:1px 0;cursor:pointer;border-left:2px solid transparent;display:flex;justify-content:space-between;align-items:center}.paint-group-header.selected{border-left-color:var(--accent-primary);background:#3b82f61a}.paint-group-header:hover{background:#ffffff14}.paint-stroke-item{font-size:10px;padding:3px 4px 3px 16px;cursor:pointer;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.paint-stroke-item:hover{opacity:1;background:#ffffff0d}.paint-stroke-item.selected{color:var(--accent-primary);opacity:1;font-weight:700;background:#3b82f61a}#tutorial-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:transparent;z-index:10000;pointer-events:auto}.tutorial-general-manual{position:absolute;background-color:var(--bg-dark);color:var(--text-primary);overflow-y:auto;padding:var(--space-xl);z-index:1;border:1px solid var(--border-default);box-shadow:inset 0 0 20px #00000080;display:flex;flex-direction:column;gap:var(--space-md)}.tutorial-general-manual h1,.tutorial-general-manual h2{color:var(--accent-primary);border-bottom:1px solid var(--border-default);padding-bottom:var(--space-xs);margin-top:var(--space-md)}.tutorial-general-manual p{line-height:1.6}.tutorial-general-manual img{max-width:100%;border-radius:var(--radius-md);border:1px solid var(--border-default);margin:var(--space-sm) 0}.tutorial-highlight{border:2px solid var(--accent-danger);border-radius:4px;box-shadow:0 0 10px #f8514980,inset 0 0 10px #f851494d;background-color:#f851490d;pointer-events:auto;animation:pulse-border 2s infinite;cursor:help}@keyframes pulse-border{0%{border-color:#f85149cc;box-shadow:0 0 10px #f8514980}50%{border-color:#f85149;box-shadow:0 0 15px #f85149cc}to{border-color:#f85149cc;box-shadow:0 0 10px #f8514980}}.tutorial-tooltip{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-md);color:var(--text-primary);font-size:var(--font-size-sm);max-width:250px;box-shadow:var(--shadow-lg);pointer-events:auto}.help-link{color:var(--accent-primary);text-decoration:underline;text-decoration-style:dotted;cursor:help;font-weight:600;transition:color .15s ease}.help-link:hover{color:var(--accent-success)}.tutorial-nested-tooltip{background:var(--bg-elevated);border-color:var(--accent-primary);max-width:200px;font-size:11px;z-index:10001;padding:var(--space-sm);box-shadow:0 4px 12px #0009;pointer-events:none}