:root {
    --bg: #e8f7f1;
    --muted: #5f7a72;
    --text: #163a35;
    --accent: #ff7f6f;
    --text-down-color: #2d4a44;
    --text-down-shadow: none;
    --surface-press-bg: rgba(255, 127, 111, 0.16);
    --text-up-color: #0f2d2a;
    --text-up-shadow: none;
    --control-text-color: #2f4f48;
    --control-text-shadow: var(--text-down-shadow);
    /* Shadow system (single light source: top-left). Sharper than classic neumorphism: less blur, more definition. */
    --shadow-raise: 0 10px 22px rgba(22, 58, 53, 0.14);
    --shadow-press: 0 4px 10px rgba(22, 58, 53, 0.2);
    --radius: 22px;
    --control-radius: 14px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-xs: 6px;

    --page-pad: 16px;
    --app-pad: 10px;
    --label-min: 120px;
    --label-adv-min: 76px;
    --mode-btn-w: 22px;
    --mode-btn-h: 18px;
    --w60: 60px;
    --numeric-input-w: var(--w60);
    --beat-col-min: 40px;
    --transport-w: 140px;
    --select-min-mobile: 68px;
    --select-compact-min: 72px;
    --select-compact-wide: 120px;
    --select-arrow-min: 22px;
    --transform-row-offset: -20px;
    --offset-tight: -10px;
    --bg-grid-size: 26px;
    --bg-grid-dot: 1px;
    --mini-label-min: 36px;
    --sans: 'Space Grotesk', 'Avenir Next', 'Futura', 'Trebuchet MS', sans-serif;
    --mono: var(--sans);
    /* Layout + control sizing (tuning knobs) */
    --gap-xs: 6px;
    --gap-sm: 10px;
    --gap-md: 12px;
    --gap-lg: 16px;

    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 6px;
    --space-md: 8px;
    --space-lg: 10px;
    --space-xl: 12px;
    --space-2xl: 16px;

    --font-xs: 10px;
    --font-sm: 12px;
    --font-md: 13px;
    --font-base: 14px;
    --font-lg: 18px;
    --font-xl: 24px;

    --btn-round: 999px;
    --btn-square-sm: 44px;
    --btn-round-md: 52px;
    --btn-round-lg: 56px;
    --transport-h: 56px;

    --control-pad-y: 9px;
    --control-pad-x: 12px;
    --control-pad-y-sm: 8px;
    --control-pad-x-sm: 10px;

    --slider-track-h: 8px;
    --slider-thumb: 18px;

    --beat-max: 52px;
    --lights-min-h: 60px;
}

/*
    Neumorphism base surface (raised by default)
    - Key rule: the control surface is slightly darker than the page background.
    - Highlights are NOT pure white; shadows have enough weight to read as form.
*/
.neu {
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--control-radius);
    box-shadow: var(--shadow-raise);
    border: 1px solid rgba(22, 58, 53, 0.12);
    backdrop-filter: blur(4px);
}

.neu:active {
    box-shadow: var(--shadow-press);
}

/* Interactive neumorphic surfaces (buttons / draggable pills) */
.neuInteract {
    cursor: pointer;
    transition:
        transform 0.05s ease,
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.2s ease;
    user-select: none;
}

.neuInteract:hover {
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 14px 28px rgba(22, 58, 53, 0.18);
}

.neuInteract:active {
    transform: translateY(0.5px);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--shadow-press);
}

* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Prevent flex children from forcing horizontal overflow */
.row,
.value,
.grid,
.panel {
    min-width: 0;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 20% -10%, #f8c6bf 0%, transparent 38%),
        radial-gradient(circle at 80% 0%, #c9f2e6 0%, transparent 42%),
        linear-gradient(180deg, #ecfaf4 0%, #e0f1ea 100%);
    color: var(--text);
    font-family: var(--sans);
    min-height: 100vh;
    display: grid;
    place-items: start center;
    padding: var(--page-pad);
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(
        rgba(255, 255, 255, 0.35) var(--bg-grid-dot),
        transparent var(--bg-grid-dot)
    );
    background-size: var(--bg-grid-size) var(--bg-grid-size);
    opacity: 0.07;
    pointer-events: none;
}

.app {
    width: min(720px, 100%);
    background: transparent;
    border-radius: var(--radius);
    padding: var(--app-pad);
    position: relative;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-lg);
    margin-bottom: var(--gap-sm);
}

.topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-xs);
}

header .hint {
    display: none;
    color: var(--muted);
    font-size: var(--font-sm);
    font-family: var(--mono);
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
}

.panel {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    animation: rise 0.6s ease both;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    padding: var(--space-sm) 0;
    border-bottom: 0;
}

.row:last-child {
    border-bottom: 0;
}

.label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: var(--label-min);
}

.label .name {
    font-size: var(--font-md);
    font-family: var(--sans);
    color: var(--control-text-color);
    text-shadow: var(--control-text-shadow);
}

.value {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
    width: 100%;
}

.value.compact-controls {
    display: grid;
    grid-template-columns:
        minmax(180px, 1.6fr)
        minmax(var(--select-compact-min), 1fr)
        minmax(var(--select-compact-min), 1fr)
        auto;
    gap: var(--gap-sm);
    justify-content: stretch;
    align-items: center;
}

.value.compact-controls > * {
    min-width: 0;
}

.value.compact-controls select {
    width: 100%;
    max-width: 100%;
}

.valueEnd {
    justify-content: flex-end;
}

.modeControl {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.selectControl select {
    min-width: var(--select-compact-min);
    width: 100%;
}

.selectControl.selectWide select {
    min-width: var(--select-compact-wide);
}

.selectControl {
    display: inline-flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
}

.selectControl.selectWide {
    max-width: 180px;
}

.selectControl:not(.selectWide) {
    max-width: 110px;
}

/* Small inline labels for the pulse/mode numeric controls (clarity without clutter) */
.miniLabel {
    font-family: var(--sans);
    font-size: var(--font-md);
    color: var(--control-text-color);
    text-shadow: var(--control-text-shadow);
    letter-spacing: 0.2px;
    margin-right: var(--space-xs);
    user-select: none;
    white-space: nowrap;
}

.modeButtons {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.modeBtn {
    width: var(--mode-btn-w);
    height: var(--mode-btn-h);
    padding: 0;
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    line-height: 1;
}

.numericInput::-webkit-outer-spin-button,
.numericInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.numericInput {
    appearance: textfield;
    width: var(--numeric-input-w);
    padding: var(--space-2xs) var(--space-xs);
    text-align: center;
    color: var(--control-text-color);
    text-shadow: var(--control-text-shadow);
}

input[type='range'] {
    width: 100%;
    height: var(--slider-track-h);
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--accent) 0%,
        var(--accent) var(--range-pct, 50%),
        rgba(22, 58, 53, 0.16) var(--range-pct, 50%),
        rgba(22, 58, 53, 0.16) 100%
    );
    box-shadow: inset 0 1px 3px rgba(22, 58, 53, 0.25);
    -webkit-appearance: none;
    appearance: none;
}

input[type='range']::-webkit-slider-runnable-track {
    height: var(--slider-track-h);
    background: transparent;
    border-radius: 999px;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--slider-thumb);
    height: var(--slider-thumb);
    border-radius: 999px;
    background: var(--accent);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    margin-top: calc((var(--slider-thumb) - var(--slider-track-h)) / -2);
}

input[type='range']::-moz-range-track {
    height: var(--slider-track-h);
    background: rgba(22, 58, 53, 0.16);
    border-radius: 999px;
    box-shadow: inset 0 1px 3px rgba(22, 58, 53, 0.25);
}

input[type='range']::-moz-range-progress {
    height: var(--slider-track-h);
    background: var(--accent);
    border-radius: 999px;
    box-shadow: none;
}

input[type='range']::-moz-range-thumb {
    width: var(--slider-thumb);
    height: var(--slider-thumb);
    border-radius: 999px;
    background: var(--accent);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

input[type='number'],
button,
select {
    font: inherit;
    color: var(--text);
    border: 0;
    border-radius: var(--control-radius);
    padding: var(--control-pad-y) var(--control-pad-x);
    outline: none;

    /* Visual surface comes from .neu */
    background: transparent;
    box-shadow: none;
}

button,
select,
details.adv summary {
    color: var(--control-text-color);
    text-shadow: var(--control-text-shadow);
}

.debossed {
    background: var(--surface-press-bg);
    box-shadow: var(--shadow-press);
}

.debossedText {
    color: var(--text-down-color);
    text-shadow: var(--text-down-shadow);
}

button {
    cursor: pointer;
    transition:
        transform 0.05s ease,
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.2s ease;
    user-select: none;
    touch-action: manipulation;
}

button:disabled,
.neuInteract:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: var(--shadow-press);
    transform: none;
}

button.small {
    padding: var(--control-pad-y-sm) var(--control-pad-x-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-md);
}

.bpmReadout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: var(--mono);
    font-size: clamp(90px, 17vw, 128px);
    letter-spacing: 0.6px;
    line-height: 1;
    gap: var(--space-2xs);
    margin-top: 0;
    margin-bottom: 0;
}

.bpmReadout input[type='number'] {
    width: clamp(200px, 60vw, 360px);
    height: clamp(126px, 23vw, 160px);
    font-size: clamp(96px, 19vw, 148px);
    border-radius: var(--radius-xl);
    padding: 0;
    text-align: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: rgba(22, 58, 53, 0.72);
    font-weight: 500;
    text-shadow: var(--text-up-shadow);
    appearance: textfield;
}

.bpmReadout input[type='number']::-webkit-outer-spin-button,
.bpmReadout input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bpmStep {
    width: var(--btn-square-sm);
    height: var(--btn-square-sm);
    border-radius: 999px;
    font-size: var(--font-xl);
    padding: 0;
    align-self: flex-end;
    margin-bottom: var(--gap-sm);
}

.transport {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

.transportActions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md);
    width: 100%;
}

#startStopBtn {
    width: var(--transport-w);
    height: var(--transport-h);
    min-width: 0;
    padding: 0;
    font-size: var(--font-lg);
    border-radius: var(--btn-round);
}

#tapBtn {
    order: 0;
}

#resetBtn {
    order: 2;
}

#tapBtn,
#resetBtn {
    width: var(--btn-square-sm);
    height: var(--btn-square-sm);
    min-width: 0;
    padding: 0;
    font-size: var(--font-sm);
    border-radius: var(--btn-round);
}

.lights {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(var(--beat-col-min), 1fr);
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs);
    padding: var(--space-xs);
    border-radius: var(--radius-lg);
    background: transparent;
    min-height: var(--lights-min-h);
    width: 100%;
}

.lightsOffset {
    margin-top: var(--space-lg);
}

.beat-light {
    width: 100%;
    max-width: var(--beat-max);
    aspect-ratio: 1 / 1;
    border-radius: var(--btn-round);
    justify-self: center;
    background: var(--bg);
    box-shadow: var(--shadow-raise);
    border: 1px solid rgba(22, 58, 53, 0.12);
    transition:
        box-shadow 0.2s ease,
        background 0.2s ease,
        transform 0.15s ease;
}

.beat-light.active {
    background: #ffc0b7;
    box-shadow: 0 6px 14px rgba(255, 127, 111, 0.26);
    transform: none;
}

.beat-light.accent.active {
    background: var(--accent);
    box-shadow: 0 10px 22px rgba(255, 127, 111, 0.46);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-2xl);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    font-family: var(--mono);
    font-size: var(--font-md);
    color: var(--muted);
}

.pillDraggable {
    cursor: ns-resize;
    user-select: none;
    touch-action: none;
}

.pillDraggable * {
    user-select: none;
}

.logWrap {
    display: none;
    margin-top: var(--space-xl);
}

.logWrap.isOpen {
    display: block;
}

.log {
    font-family: var(--sans);
    font-size: var(--font-sm);
    color: var(--muted);
    white-space: pre-wrap;
    line-height: 1.35;
}

.diagnosticsRow {
    display: none;
}

.rhythmPill {
    font-family: var(--mono);
    font-variant-ligatures: none;
    max-width: 100%;
    width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    font-size: var(--font-xl);
    justify-content: center;
    text-align: center;
    margin: 0 auto;
}

#rhythmStringDisplay {
    display: block;
    width: 100%;
    max-width: 100%;
}

.rhythmSteps {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    row-gap: var(--space-xs);
    max-width: 100%;
}

.rhythmLine {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rhythm-gap, var(--gap-md));
    letter-spacing: var(--rhythm-letter, 1px);
    width: 100%;
}

.rhythmStep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--rhythm-step-width, 1.35ch);
    color: rgba(45, 74, 68, 0.62);
    font-weight: 700;
    border-radius: var(--radius-xs);
    padding: var(--rhythm-step-pad-y, 4px) var(--rhythm-step-pad-x, 6px);
    text-shadow: var(--text-down-shadow);
}

.rhythmStep.isActive {
    color: rgba(22, 58, 53, 0.9);
    text-shadow: none;
    background: rgba(255, 127, 111, 0.2);
    animation: rhythm-step-focus 180ms ease-out;
}

@keyframes rhythm-step-focus {
    from {
        transform: translateY(1px) scale(0.98);
        background: rgba(255, 127, 111, 0.14);
    }
    to {
        transform: translateY(0) scale(1);
        background: rgba(255, 127, 111, 0.2);
    }
}

.patternActions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    width: 100%;
}

.transformRow {
    margin-bottom: var(--transform-row-offset);
}

.patternButtons {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(4px, 1.2vw, 8px);
}

.patternButtons .small {
    min-width: 0;
    padding: clamp(4px, 1.2vw, 6px) clamp(6px, 1.6vw, 10px);
    font-size: clamp(10px, 2.2vw, 12px);
}

.stressControls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xs) var(--gap-sm);
    justify-content: start;
    justify-items: start;
    align-items: start;
}

.value.stressControls {
    justify-content: flex-start;
}

.stressItem {
    display: grid;
    grid-template-rows: auto auto;
    align-items: start;
    gap: var(--space-xs);
    min-width: 0;
    justify-content: flex-start;
}

.stressItem .miniLabel {
    margin-right: 0;
    min-width: 0;
    text-align: left;
}

.modeControl:not(.selectControl) {
    gap: var(--space-xs);
    justify-content: flex-start;
    width: max-content;
}

.stressItem .modeControl {
    align-items: center;
}

@media (max-width: 480px) {
    .bpmReadout {
        margin-top: -6px;
    }

    .value.compact-controls {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1fr);
        gap: var(--space-sm);
    }

    .value.compact-controls select {
        font-size: var(--font-sm);
        padding: var(--space-sm) var(--space-md);
    }

    .selectControl select {
        min-width: 0;
    }

    .selectControl.selectWide select {
        min-width: 0;
    }

    .controlRow .selectControl {
        grid-template-columns: minmax(0, 1fr);
    }

    .controlRow .selectControl .modeButtons {
        display: none;
    }

    #swingPill {
        font-size: var(--font-sm);
        padding: var(--space-md) var(--space-lg);
    }

    .patternButtons {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .stressControls {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-sm) var(--space-sm);
    }

    .stressItem .miniLabel {
        font-size: var(--font-sm);
    }

    .stressItem .numericInput {
        width: var(--numeric-input-w);
        min-width: var(--numeric-input-w);
        text-align: center;
    }

    .stressItem .modeButtons {
        display: flex;
    }

    .stressItem .modeBtn {
        width: 20px;
        min-width: 20px;
        height: 16px;
    }

    .rhythmPill {
        font-size: var(--font-lg);
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .rhythmStep {
        padding-left: 2px;
        padding-right: 2px;
    }

    #exportMidiBtn {
        display: none;
    }
}

.hrDashed {
    border: 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    margin: var(--space-xl) 0;
}

/* Advanced section: less wordy by default, tighter spacing */
details.adv .advInner {
    padding: var(--space-xs) var(--space-xs) var(--space-md) var(--space-2xl);
}
details.adv .advInner .row {
    padding: var(--space-xs) 0;
}
details.adv .advInner .label {
    min-width: var(--label-adv-min);
}

details.adv summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    cursor: pointer;
    list-style: none;
    padding: var(--space-lg) var(--space-xl);
    position: relative;
    z-index: 1;
}

details.adv summary::-webkit-details-marker {
    display: none;
}

details.adv .chev {
    color: var(--control-text-color);
    font-size: var(--font-base);
    margin-left: auto;
    text-shadow: var(--control-text-shadow);
}

details.adv[open] summary {
    box-shadow: var(--shadow-press);
    background: var(--surface-press-bg);
    color: var(--text-up-color);
    text-shadow: var(--text-up-shadow);
}

details.adv[open] .chev {
    color: var(--text-up-color);
    text-shadow: var(--text-up-shadow);
}

details.adv + details.adv {
    margin-top: var(--space-md);
}

/* Swing pill should stretch within its column */
#swingPill {
    width: auto;
    justify-content: space-between;
    font-family: var(--sans);
    color: var(--control-text-color);
    text-shadow: var(--control-text-shadow);
}

/* Pattern + buttons row: allow wrap */
details.adv .advInner .value {
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Diagnostics row: allow wrap */
.row .value {
    flex-wrap: wrap;
}

.sliderRow {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--gap-sm);
}

.sliderRow .pill {
    justify-content: center;
    padding: var(--space-md) var(--space-xl);
    color: var(--control-text-color);
    text-shadow: var(--control-text-shadow);
}

input[type='range']:focus-visible,
input[type='number']:focus-visible,
select:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid rgba(165, 180, 252, 0.7);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(165, 180, 252, 0.25);
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(var(--space-md));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 761px) {
    body {
        padding: var(--space-2xl);
    }
    .app {
        padding: var(--space-2xl);
    }
    .row {
        padding: var(--space-lg) 0;
    }
}
.rhythmRow .label {
    display: none;
}

.rhythmRow .value {
    justify-content: center;
}

.controlRow .label {
    display: none;
}