:root {
    /* 1970s Colors */
    --wood-panel: #502810;
    --wood-edge: #241105;
    --upper-metal: #e2dfd3; /* Cream / beige */
    --upper-dark: #c2bdab;
    --lower-metal: #b5b9bd; /* Brushed aluminum base */
    --lower-dark: #84888c;
    
    /* UI Elements */
    --module-bg: #cfcab9;
    --button-face: #f0ede1;
    --button-edge: #949084;
    --text-main: #2a2a2a;
    --text-light: #555;
    
    /* LCD Screens */
    --lcd-bg: #808a75; /* Classic greenish-grey LCD */
    --lcd-text: #20261c;
    
    /* Indicator Lights */
    --kick-color: #f24141;
    --snare-color: #418df2;
    --hat-color: #f2af41;
    --perc-color: #a441f2;
    --error: #cc3333;
}

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

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #1a1a1a;
    color: var(--text-main);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 0;
    overflow: hidden; /* Prevent scrolling as requested */
}

.hardware-chassis {
    width: 100vw;
    height: 100vh; /* Locked height */
    max-width: none;
    background: var(--upper-metal);
    border-radius: 0;
    padding: 0 21px; /* Space for wood side panels */
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Wood Side Panels */
.hardware-chassis::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0; width: 21px;
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4)), url('wood.png');
    background-size: cover;
    background-position: left center;
    box-shadow: inset -3px 0 5px rgba(0,0,0,0.5), inset 1px 0 2px rgba(255,255,255,0.2);
    z-index: 100;
    /* Screws */
    background-image: 
        radial-gradient(circle at 10px 10px, #222 2px, transparent 2.5px),
        radial-gradient(circle at 10px calc(100% - 10px), #222 2px, transparent 2.5px),
        linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4)), url('wood.png');
}
.hardware-chassis::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0; width: 21px;
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4)), url('wood.png');
    background-size: cover;
    background-position: right center;
    box-shadow: inset 3px 0 5px rgba(0,0,0,0.5), inset -1px 0 2px rgba(255,255,255,0.2);
    z-index: 100;
    /* Screws */
    background-image: 
        radial-gradient(circle at 11px 10px, #222 2px, transparent 2.5px),
        radial-gradient(circle at 11px calc(100% - 10px), #222 2px, transparent 2.5px),
        linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4)), url('wood.png');
}

.upper-panel {
    background: var(--upper-metal);
    padding: 1rem 2rem 1.5rem 2rem; /* Shrink padding significantly */
    box-shadow: inset 0 -4px 10px rgba(0,0,0,0.1);
    flex-grow: 1; /* Allow it to fit but not explode */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Top Section Layout */
.top-section {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem; /* Reduced from 3rem */
    padding: 0 2rem; /* Give a bit more padding inside chassis */
    gap: 3rem; /* Provide guaranteed gap between badge and grill */
}

/* Wood Badge */
.wood-badge {
    position: relative;
    background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.4)), url('wood.png');
    background-size: cover;
    background-position: center;
    border: 1px solid #2a1205; /* Darker border */
    border-bottom: 2px solid #1a0a03;
    padding: 0.6rem 2.2rem; /* Reduce oversized feeling */
    border-radius: 2px; /* Sharper corners for a machined look */
    box-shadow: 
        inset 0 1px 1px rgba(255,255,255,0.15),
        inset 0 -1px 3px rgba(0,0,0,0.7),
        2px 4px 10px rgba(0,0,0,0.3); /* Tighter drop shadow */
}

/* Screws/Rivets for Wood Badge */
.rivet {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 2px 2px, #888, #111);
    position: absolute;
    box-shadow: 0 1px 1px rgba(255,255,255,0.15), inset 0 1px 2px rgba(0,0,0,0.8);
}
.rivet.top-left { top: 6px; left: 6px; }
.rivet.top-right { top: 6px; right: 6px; }
.rivet.bottom-left { bottom: 6px; left: 6px; }
.rivet.bottom-right { bottom: 6px; right: 6px; }
.rivet::after {
    /* Screw slot */
    content: '';
    position: absolute;
    top: 50%; left: 10%; right: 10%;
    height: 1px;
    background: rgba(0,0,0,0.8);
    transform: translateY(-50%) rotate(45deg);
}

.wood-badge-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.wood-engraved-text {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 1.4rem; 
    white-space: nowrap; 
    font-weight: 900;
    margin: 0;
    color: #1a0b05; /* Very dark engraving */
    letter-spacing: 4px;
    text-shadow: -1px -1px 2px rgba(0,0,0,0.9), 1px 1px 1px rgba(255,255,255,0.15); /* Deep inset shadow */
}

.wood-sub-engraved {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 0.55rem; /* Smaller, understated */
    font-weight: 600;
    color: #a8813a; /* Muted brass/gold */
    letter-spacing: 3px;
    text-shadow: -1px -1px 1px rgba(0,0,0,0.8), 1px 1px 1px rgba(255,255,255,0.1);
    margin-top: 0.2rem;
    opacity: 0.85;
}

/* Grill & Output Section */
.grill-section {
    display: flex;
    align-items: center;
    gap: 4rem; /* More generous space between grill and knob */
    flex-grow: 1; /* Stretch across remaining space */
    justify-content: flex-end; /* Push knob to the right */
}

.speaker-grill {
    flex-grow: 1; /* Stretches dynamically to fill area */
    max-width: 400px; /* But don't let it get crazy wide */
    height: 70px; /* Perfectly balances the height of the badge */
    background-color: transparent; 
    border-radius: 0;
    box-shadow: none; 
    /* Tighter, more refined vintage hardware drilled effect */
    background-image: 
        radial-gradient(circle, rgba(0,0,0,0.85) 1.5px, transparent 2px),
        radial-gradient(circle, rgba(255,255,255,0.8) 1.5px, transparent 2.5px);
    background-size: 8px 8px; /* Tighter perforation grid */
    background-position: 0 0, 0 1px;
}

.output-module {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0; /* Keep knob from shrinking */
}

.knob-label {
    font-size: 0.6rem; /* A bit smaller for premium feel */
    font-weight: 800;
    color: #444; /* Darker to read easily */
    letter-spacing: 2.5px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    text-align: center; 
}

.main-knob {
    width: 52px; height: 52px; /* Slightly larger */
    border-radius: 50%;
    background: conic-gradient(from 180deg, #b8b4a5, #fff, #dcd7c9, #8e8a7e, #fff, #b8b4a5);
    border: 1px solid #666;
    box-shadow: 
        0 4px 10px rgba(0,0,0,0.3), /* Soft drop shadow */
        0 8px 20px rgba(0,0,0,0.15),
        inset 0 1px 1px rgba(255,255,255,0.9), /* Edge highlight */
        inset 0 -1px 2px rgba(0,0,0,0.2);
    position: relative;
}
.main-knob::before {
    content: '';
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dcd7c9, #b8b4a5); /* Inner face */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.main-knob::after {
    content: '';
    position: absolute;
    top: 10px; left: 50%; transform: translateX(-50%);
    width: 3px; height: 12px;
    background: #111;
    border-radius: 2px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.5);
    z-index: 2;
}

/* Function Row Elements */
.function-row {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0; /* Tighter padding */
    margin: 1.5rem auto; /* Tighter space between grid and row, and row and wood */
    background: transparent;
    border: none;
    /* Horizontal separating lines */
    border-top: 1px solid rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(0,0,0,0.2);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.6), /* Highlight below top seam */
        0 1px 0 rgba(255,255,255,0.6); /* Highlight below bottom seam */
}

.function-knob, .function-switch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 0 2.5rem; /* Space around each knob for the dividers */
    position: relative;
}

/* Vertical engraved dividers */
.function-knob:not(:last-child)::after,
.function-switch:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: rgba(0,0,0,0.15);
    box-shadow: 1px 0 0 rgba(255,255,255,0.5); /* Engraved highlight */
}

.small-knob {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, #b8b4a5, #fff, #dcd7c9, #8e8a7e, #fff, #b8b4a5);
    border: 1px solid #666;
    box-shadow: 
        0 2px 5px rgba(0,0,0,0.3), 
        inset 0 1px 1px rgba(255,255,255,0.9), 
        inset 0 -1px 1px rgba(0,0,0,0.2);
    position: relative;
}
.small-knob::before {
    content: '';
    position: absolute;
    top: 4px; left: 4px; right: 4px; bottom: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dcd7c9, #b8b4a5); 
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.small-knob::after {
    content: '';
    position: absolute;
    top: 6px; left: 50%; transform: translateX(-50%);
    width: 2px; height: 8px;
    background: #111;
    border-radius: 1px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.5);
    z-index: 2;
}

.toggle-switch {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.toggle-label {
    font-size: 0.55rem;
    font-weight: 800;
    color: #444;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
.switch-track {
    width: 44px; height: 20px;
    background: #1a1a1a;
    border-radius: 10px;
    border: 1px solid #444;
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.8), 
        0 1px 0 rgba(255,255,255,0.6);
    position: relative;
    display: flex;
    align-items: center;
}
/* Metal housing plate for the toggle */
.switch-track::before {
    content: '';
    position: absolute;
    top: -4px; bottom: -4px; left: -6px; right: -6px;
    border-radius: 14px;
    background: linear-gradient(to bottom, #dcd7c9, #b8b4a5);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 1px #fff;
    z-index: -1;
    border: 1px solid rgba(0,0,0,0.2);
}
.switch-bat {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 4px 4px, #fff, #888, #333);
    position: absolute;
    left: 2px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.light-red {
    background: #ff4b4b;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2), 0 0 8px #ff4b4b;
}

/* Modules Chassis Bay */
.cards-grid {
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px; /* Space between faceplates */
    background: #c7c3b4; /* Lighter tone, closer to chassis but still recessed */
    border: 1px solid rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.4); /* Lip highlight */
    border-radius: 6px; 
    padding: 6px; /* Let the bay show around the edge */
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.25); /* Lighter shadow to match the lighter background */
}

.module {
    background-color: var(--upper-metal); /* Match chassis perfectly */
    padding: 1.5rem 1.2rem;
    border-radius: 4px; /* Soft faceplate corners */
    border: 1px solid rgba(0,0,0,0.15);
    border-bottom: 2px solid rgba(0,0,0,0.3); /* Faceplate thickness */
    box-shadow: 
        inset 0 1px 1px rgba(255,255,255,0.7),
        0 4px 6px rgba(0,0,0,0.3); /* Drop shadow into the bay */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 0; /* CRITICAL: Prevents grid blowout from long text */
    /* Corner screws via multiple backgrounds */
    background-image: 
        radial-gradient(circle at 8px 8px, #333 1.5px, transparent 2px),
        radial-gradient(circle at calc(100% - 8px) 8px, #333 1.5px, transparent 2px),
        radial-gradient(circle at 8px calc(100% - 8px), #333 1.5px, transparent 2px),
        radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #333 1.5px, transparent 2px),
        radial-gradient(circle at 8px 9px, rgba(255,255,255,0.8) 1px, transparent 1.5px),
        radial-gradient(circle at calc(100% - 8px) 9px, rgba(255,255,255,0.8) 1px, transparent 1.5px),
        radial-gradient(circle at 8px calc(100% - 7px), rgba(255,255,255,0.8) 1px, transparent 1.5px),
        radial-gradient(circle at calc(100% - 8px) calc(100% - 7px), rgba(255,255,255,0.8) 1px, transparent 1.5px);
}

.module-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1.2rem;
}

.indicator-light {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #555;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5), 0 1px 0 #fff;
}
.light-kick { background: var(--kick-color); box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2), 0 0 5px var(--kick-color); }
.light-snare { background: var(--snare-color); box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2), 0 0 5px var(--snare-color); }
.light-hat { background: var(--hat-color); box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2), 0 0 5px var(--hat-color); }
.light-perc { background: var(--perc-color); box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2), 0 0 5px var(--perc-color); }

.module h2 {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
    color: #444;
    letter-spacing: 1px;
}

/* Mechanical Reel System */
.reel-container {
    width: 100%;
    min-width: 0; /* Prevents flex child blowout */
    background: #0a0a0a;
    border: 1px solid #555;
    border-bottom: 1px solid #888;
    border-top: 2px solid #000;
    border-radius: 2px;
    padding: 0.2rem;
    box-shadow: 
        inset 0 8px 15px rgba(0,0,0,0.9), 
        0 1px 0 rgba(255,255,255,0.6);
    margin-bottom: 1.2rem;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reel-viewport {
    height: 60px; /* Matched to JS animation parameter */
    width: 100%;
    min-width: 0; /* Prevents flex child blowout */
    background: #0a0a0a; /* Dark interior for mechanical drums */
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    box-shadow: 
        inset 0 15px 15px -10px rgba(0,0,0,0.9), 
        inset 0 -15px 15px -10px rgba(0,0,0,0.9);
}

/* Red tuner/alignment wire across the center */
.reel-viewport::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    background: rgba(220, 50, 40, 0.35); /* Transparent to read text */
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    z-index: 10;
    pointer-events: none;
}

/* Glass/Plastic reflection over the viewport */
.reel-viewport::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        to bottom, 
        rgba(255,255,255,0.15) 0%, 
        rgba(255,255,255,0.05) 30%, 
        transparent 35%, 
        transparent 100%
    );
    z-index: 11;
    pointer-events: none;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.8);
}

.reel-track {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.reel-item {
    height: 60px; /* Matched to JS animation parameter */
    display: block;
    line-height: 60px; /* Vertically centered */
    text-align: center; /* Horizontally centered */
    padding: 0 1rem;
    box-sizing: border-box;
    width: 100%;
    font-family: 'Courier New', Courier, monospace; /* Analog counter font */
    font-size: 0.8rem;
    font-weight: bold;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Physical split between numbers/drums */
    border-top: 1px solid #222;
    border-bottom: 1px solid #000;
    background: linear-gradient(to bottom, #1a1a1a 0%, #2a2a2a 50%, #151515 100%);
    text-transform: uppercase;
    text-shadow: 0 1px 2px #000;
}
.reel-item.empty { color: #d03030; } /* Make NO FOLDER red */
.reel-item.error { color: #ff3333; }

.dummy-knob {
    position: absolute;
    right: -10px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, #b0b4b8, #fff, #888, #fff, #b0b4b8);
    border: 1px solid #555;
    box-shadow: -2px 2px 4px rgba(0,0,0,0.4), inset 0 1px 1px #fff;
    z-index: 15; /* Make sure it overlaps */
}

/* Buttons and LCD */
.select-folder-btn {
    width: 100%;
    background: linear-gradient(to bottom, #eae6d8, #cfcab9);
    border: 1px solid #999;
    border-bottom: 3px solid #8e8a7e; /* Thick 3D edge */
    border-radius: 3px;
    padding: 0.6rem;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 800;
    color: #333;
    cursor: pointer;
    margin-bottom: 0.8rem;
    box-shadow: 
        inset 0 1px 1px rgba(255,255,255,0.8),
        0 4px 6px rgba(0,0,0,0.15); /* Raised shadow */
    transition: all 0.1s;
}
.select-folder-btn:active {
    transform: translateY(2px);
    border-bottom: 1px solid var(--button-edge);
    margin-bottom: 1rem; /* push down without affecting layout below */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 3px rgba(0,0,0,0.15);
}
.select-folder-btn .icon {
    margin-right: 4px;
    filter: sepia(1) hue-rotate(-50deg);
}

.status-container {
    width: 100%;
    min-width: 0; /* Prevents flex child blowout */
    background: #0a0a0a;
    border: 1px solid #555;
    border-bottom: 1px solid #888;
    border-top: 2px solid #000;
    border-radius: 2px;
    padding: 0.6rem;
    color: #fff;
    box-shadow: inset 0 8px 15px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.6);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.status-text, .sample-count {
    margin: 0;
    font-family: monospace;
    font-size: 0.75rem;
}
.status-text { color: #888; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sample-count { color: #ddd; font-weight: bold; text-align: center; background: #1a1a1a; border-radius: 2px; padding: 3px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.8); }

/* Lower Panel Wood Texture */
.lower-panel.wood-bottom {
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4)), url('wood.png');
    background-size: cover;
    background-position: center;
    padding: 2.5rem 2rem; /* Give it more vertical block feel */
    border-top: 3px solid #1a0a03; /* Physical seam line separating metal and wood */
    box-shadow: 
        inset 0 8px 15px rgba(0,0,0,0.8), /* shadow from the cream faceplate above */
        inset 0 1px 1px rgba(255,255,255,0.1);
    z-index: 10;
    display: flex;
    justify-content: center;
}

.text-cream { 
    color: var(--upper-metal); 
    text-shadow: 0 1px 2px rgba(0,0,0,0.8); 
}

/* Burnt wood text look for labels on the wood panel */
.burnt-text {
    color: #2b160b !important;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.1), 0px -1px 1px rgba(0,0,0,0.8) !important;
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: 800;
}

.spin-section {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

/* Left side controls & Slider */
.left-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.main-lcd {
    background: radial-gradient(circle at 50% 50%, #384231, #1b2317); /* Screen */
    border: 8px solid #151515; /* Outer black bezel */
    border-top: 10px solid #0a0a0a; /* Darker top bezel */
    border-bottom: 8px solid #222; /* Lighter bottom bezel */
    border-radius: 4px;
    padding: 1.2rem;
    box-shadow: 
        inset 0 8px 15px rgba(0,0,0,0.9), /* Screen depth */
        0 0 0 1px #050505, /* Wood cut */
        0 1px 1px rgba(255,255,255,0.2); /* Wood highlight */
    display: flex;
    gap: 2rem;
    align-items: center;
    min-width: 320px;
}
.lcd-text p {
    font-family: monospace;
    font-size: 0.9rem;
    color: #a1c08e;
    margin: 0 0 0.5rem 0;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(161, 192, 142, 0.4);
}
.lcd-meters {
    display: flex;
    gap: 4px;
}
.meter-bar {
    width: 6px; height: 35px;
    background: rgba(161, 192, 142, 0.15);
    border-radius: 1px;
}
.meter-bar:nth-child(-n+3) {
    background: #a1c08e;
    box-shadow: 0 0 4px rgba(161, 192, 142, 0.4);
}

.kit-length-control {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
}
.slider-label {
    font-size: 0.6rem;
    font-weight: bold;
    color: var(--upper-metal);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.slider-track {
    flex-grow: 1;
    height: 8px;
    background: #0a0a0a;
    border-radius: 4px;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.9), 0 1px 1px rgba(255,255,255,0.15);
    position: relative;
    display: flex;
    align-items: center;
}
.slider-fader {
    width: 14px; height: 28px;
    background: linear-gradient(180deg, #dcd7c9, #a8a495);
    border: 1px solid #555;
    border-radius: 2px;
    position: absolute;
    left: 30%; /* Mock position */
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.6), 
        inset 0 1px 1px rgba(255,255,255,0.8);
}
.slider-fader::after {
    content: '';
    position: absolute;
    top: 50%; left: 10%; right: 10%;
    height: 2px;
    background: #333;
    transform: translateY(-50%);
}

/* Large Turn Dial */
.dial-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.dial-arrow {
    display: none;
}
.dial-label {
    font-size: 0.85rem;
    font-weight: bold;
    position: absolute;
    top: -45px;
    letter-spacing: 2px;
}

.large-dial-btn {
    width: 160px; height: 160px; /* Big heavy dial */
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.large-dial-btn:active {
    transform: rotate(45deg); /* Spin dial animation */
}
.large-dial {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: repeating-conic-gradient(#cfcab9 0% 1%, #a8a495 1% 2%); /* Tighter ribbed texture */
    border: 1px solid #444;
    box-shadow: 
        0 15px 30px rgba(0,0,0,0.6), /* Heavy drop shadow on wood */
        inset 0 2px 4px rgba(255,255,255,0.6),
        inset 0 -2px 10px rgba(0,0,0,0.3);
    position: relative;
}
/* Inner smooth cap */
.large-dial::before {
    content: '';
    position: absolute;
    top: 15px; left: 15px; right: 15px; bottom: 15px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, #b8b4a5, #fff, #dcd7c9, #8e8a7e, #fff, #b8b4a5);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
}
.dial-indicator {
    position: absolute;
    top: 25px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 20px;
    background: #111;
    border-radius: 2px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.4);
    z-index: 10;
}

/* Transport Controls & Recess */
.transport-recess {
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.25)), url('wood.png');
    background-size: cover;
    background-position: bottom right;
    padding: 1.5rem 2rem;
    border-radius: 4px;
    border: 1px solid #1a0a03;
    border-top: 1px solid #4a2a15;
    box-shadow: 
        inset 0 1px 1px rgba(255,255,255,0.1),
        0 8px 15px rgba(0,0,0,0.6); /* Cast shadow onto the main wood panel */
}

.transport-controls {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}
.transport-label {
    font-size: 0.75rem;
    font-weight: bold;
    color: #444;
    letter-spacing: 1px;
}
.transport-buttons {
    display: flex;
    gap: 1rem;
}
.export-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.hardware-button, .preview-btn {
    width: 55px; height: 55px;
    background: linear-gradient(180deg, var(--button-face) 0%, #cfcab9 100%);
    border: 1px solid #8e8a7e;
    border-bottom: 5px solid var(--button-edge);
    border-radius: 4px;
    font-size: 1.5rem;
    color: #444;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.9);
    transition: all 0.1s;
}
.hardware-button:active, .preview-btn:active {
    transform: translateY(4px);
    border-bottom: 1px solid var(--button-edge);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 5px rgba(0,0,0,0.15);
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .spin-section {
        flex-direction: column;
        gap: 3rem;
    }
}
@media (max-width: 500px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
}