*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg-base: #1a1a1a;
    --bg-panel: #242424;
    --bg-surface: #2e2e2e;
    --bg-hover: #383838;
    --border: #3a3a3a;
    --text-primary: #e8e8e8;
    --text-secondary: #999;
    --text-muted: #666;
    --accent: #4a9eff;
    --accent-hover: #6ab0ff;
    --danger: #ff5555;
    --success: #50fa7b;
    --handle-color: #4a9eff;
    --timeline-track: #333;
    --timeline-selection: rgba(74, 158, 255, 0.25);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --controls-height: 76px;
}

html, body, #root {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
    background: var(--bg-base);
    color: var(--text-primary);
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
}

button {
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    border: none;
    outline: none;
}

input[type="range"] {
    cursor: pointer;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}