/* Brand fonts (DM Mono / DM Sans / Fraunces) loaded from index.html */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ==================================== CSS Custom Properties for Dark/Light Theme ==================================== */ :root { /* Dark theme defaults */ --bg-primary: #000; --bg-secondary: #171616; --bg-card: #121212; --bg-input: #000; --bg-toggle: #333; --bg-slider: #333; --text-primary: #ececec; --text-secondary: #b9b9b9; --text-muted: #888; --text-label: #888; --border-primary: #232323; --border-secondary: #333; --accent-primary: var(--accent-primary); --accent-hover: var(--accent-hover); --shadow-color: rgba(0, 0, 0, 0.5); } /* Light theme overrides */ [data-theme="light"] { --bg-primary: #f5f5f7; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-input: #f0f0f2; --bg-toggle: #d1d1d6; --bg-slider: #d1d1d6; --text-primary: #1d1d1f; --text-secondary: #424245; --text-muted: #6e6e73; --text-label: #6e6e73; --border-primary: #d2d2d7; --border-secondary: #e5e5ea; --accent-primary: var(--accent-primary); --accent-hover: #8b5cf6; --shadow-color: rgba(0, 0, 0, 0.1); } html, body { height: 100%; overflow: hidden; } body { font-family: var(--pi-font-body, "Inter", sans-serif); background-color: var(--bg-primary); color: var(--text-primary); transition: background-color 0.3s ease, color 0.3s ease; } /* Page Layout */ .page-layout { display: flex; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 2rem; } /* Three-column grid layout for simulator */ .page-layout.three-column { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(400px, 3fr) minmax(260px, 1fr); gap: 16px; width: 100%; max-width: 1600px; margin: 0 auto; padding: 1rem 2rem; height: 100vh; box-sizing: border-box; } .preset-sidebar { width: 280px; flex-shrink: 0; align-self: stretch; overflow-y: auto; overflow-x: hidden; padding-right: 8px; display: flex; flex-direction: column; gap: 12px; } /* Hide scrollbars while keeping scroll functionality */ .preset-sidebar, .simulator-sidebar, .main-content { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .preset-sidebar::-webkit-scrollbar, .simulator-sidebar::-webkit-scrollbar, .main-content::-webkit-scrollbar { display: none; /* Chrome/Safari/Opera */ } .main-content { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding-right: 8px; } .main-content #formdata { width: 100%; max-width: 800px; margin: 0 auto; } /* Form Styles */ #formdata > h1 { text-align: center; background-color: var(--accent-primary); padding: 20px 0; border-radius: 10px; margin-bottom: 2rem; } #tz-unique-id-container { background-color: var(--bg-secondary); padding: 2rem; border-radius: 20px; transition: background-color 0.3s ease; } .control-stack { display: flex; flex-direction: column; gap: 14px; } .param-card { background-color: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 16px; padding: 16px; transition: background-color 0.3s ease, border-color 0.3s ease; } .control-row { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } .control-label { font-weight: 600; } .control-help { font-size: 0.85rem; line-height: 1.4; color: var(--text-secondary); } .control-help-block { margin-top: 4px; } /* Slider Styles */ .slider-group { display: grid; grid-template-columns: 1fr 70px; gap: 10px; } .slider-group label { grid-column: span 2; font-weight: 600; } .slider-value-input { width: 70px; height: 38px; text-align: center; border: 1px solid var(--accent-primary); padding: 6px; border-radius: 5px; background-color: var(--bg-input); color: var(--text-primary); font-family: var(--pi-font-body, 'Inter', sans-serif); font-size: 14px; outline: none; -moz-appearance: textfield; transition: background-color 0.3s ease, color 0.3s ease; } .slider-value-input::-webkit-outer-spin-button, .slider-value-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .slider-value-input:focus { border-color: var(--accent-hover); box-shadow: 0 0 0 2px rgba(242, 239, 233, 0.3); } /* Range Input Styles */ input[type="range"] { -webkit-appearance: none; width: 100%; height: 8px; border-radius: 4px; background: var(--bg-slider); outline: none; transition: background 0.3s ease; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-primary); cursor: pointer; } input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-primary); cursor: pointer; border: none; } /* Checkbox Styles */ .checkbox-group { display: flex; align-items: center; gap: 10px; } .checkbox-group input { display: none; } .check-btn { height: 20px; width: 40px; display: block; background-color: var(--bg-toggle); border-radius: 99px; cursor: pointer; transition: background-color 0.3s ease; } .check-btn span { height: 17px; width: 17px; background-color: var(--accent-primary); border-radius: 50%; display: block; transition: 0.3s ease all; transform: translateX(2px) translateY(1.5px); } .checkbox-group input:checked + .check-btn { background-color: var(--accent-primary); } .checkbox-group input:checked + .check-btn span { background-color: #fff; transform: translateX(21px) translateY(1.5px); } /* Piano/Scale Buttons */ .scale-block { display: flex; flex-direction: column; gap: 10px; } #piano { width: auto; text-align: center; } .keys .key { display: inline-block; width: 60px; height: 60px; margin: 10px; border-radius: 50%; cursor: pointer; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); position: relative; } .keys .white { background-color: #fff; z-index: 1; } .keys .black { background-color: #000; z-index: 2; } #Z { visibility: hidden; } .key.active { box-shadow: 0 0 0 6px; } /* Inactive key: thin solid color ring using circle-of-fifths hue */ .keys .key:not(.active) { box-shadow: 0 0 0 2px hsl(var(--key-hue, 0), 100%, 50%); } /* Circle of fifths colors — bold ring + inner glow (matching chord-prog style) */ #C.active { box-shadow: 0 0 0 8px hsl(0, 100%, 50%), inset 0 0 15px hsla(0, 100%, 50%, 0.3); } #G.active { box-shadow: 0 0 0 8px hsl(30, 100%, 50%), inset 0 0 15px hsla(30, 100%, 50%, 0.3); } #D.active { box-shadow: 0 0 0 8px hsl(60, 100%, 50%), inset 0 0 15px hsla(60, 100%, 50%, 0.3); } #A.active { box-shadow: 0 0 0 8px hsl(90, 100%, 50%), inset 0 0 15px hsla(90, 100%, 50%, 0.3); } #E.active { box-shadow: 0 0 0 8px hsl(120, 100%, 50%), inset 0 0 15px hsla(120, 100%, 50%, 0.3); } #B.active { box-shadow: 0 0 0 8px hsl(150, 100%, 50%), inset 0 0 15px hsla(150, 100%, 50%, 0.3); } #Fsharp.active { box-shadow: 0 0 0 8px hsl(180, 100%, 50%), inset 0 0 15px hsla(180, 100%, 50%, 0.3); } #Csharp.active { box-shadow: 0 0 0 8px hsl(210, 100%, 50%), inset 0 0 15px hsla(210, 100%, 50%, 0.3); } #Gsharp.active { box-shadow: 0 0 0 8px hsl(240, 100%, 50%), inset 0 0 15px hsla(240, 100%, 50%, 0.3); } #Dsharp.active { box-shadow: 0 0 0 8px hsl(270, 100%, 50%), inset 0 0 15px hsla(270, 100%, 50%, 0.3); } #Asharp.active { box-shadow: 0 0 0 8px hsl(300, 100%, 50%), inset 0 0 15px hsla(300, 100%, 50%, 0.3); } #F.active { box-shadow: 0 0 0 8px hsl(330, 100%, 50%), inset 0 0 15px hsla(330, 100%, 50%, 0.3); } .note-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: 600; pointer-events: none; user-select: none; } .key.white .note-label { color: #333; } .key.black .note-label { color: #fff; } .black-keys { width: 85%; margin-left: auto; margin-right: auto; } .black-keys, .white-keys { display: flex; justify-content: space-between; } /* Scale/Chord Selector */ .scale-chord-selector { display: flex; flex-direction: column; gap: 12px; } .selector-row { display: flex; gap: 12px; flex-wrap: wrap; } .selector-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 120px; } .selector-group label { font-size: 0.8rem; color: var(--text-label); font-weight: 500; } .selector-dropdown { height: 44px; border-radius: 8px; background-color: var(--bg-input); border: 1px solid var(--border-secondary); padding: 0 12px; outline: none; color: var(--text-primary); font-family: var(--pi-font-body, 'Inter', sans-serif); font-size: 14px; cursor: pointer; transition: border-color 0.2s ease, background-color 0.3s ease, color 0.3s ease; } .selector-dropdown:hover { border-color: var(--text-muted); } .selector-dropdown:focus { border-color: var(--accent-primary); } /* Theme Card */ .theme-card { margin-bottom: 0; padding: 14px; } .theme-row { display: flex; align-items: center; gap: 10px; } .theme-row .control-label { white-space: nowrap; margin: 0; } .theme-dropdown { flex: 1; height: 36px; } /* Collapsible Card */ .collapsible-card { padding: 0; overflow: hidden; } .collapsible-header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 20px; background: transparent; border: none; cursor: pointer; color: inherit; text-align: left; } .collapsible-header:hover { background: rgba(255, 255, 255, 0.05); } .collapsible-header .control-label { margin: 0; pointer-events: none; } .collapse-icon { font-size: 12px; transition: transform 0.2s ease; color: #888; } .collapsible-card.expanded .collapse-icon { transform: rotate(180deg); } .collapsible-content { display: none; padding: 0 20px 20px; flex-direction: column; gap: 16px; } .collapsible-card.expanded .collapsible-content { display: flex; } /* Morph Toggle Section (inside Preset card) */ .morph-toggle-section { margin-top: 8px; padding-top: 12px; border-top: 1px solid #333; } .morph-content-section { display: none; flex-direction: column; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #333; } .morph-content-section.visible { display: flex; } /* Preset Card */ .preset-card { background: linear-gradient(135deg, #121212 0%, #1a1a2e 100%); border: 2px solid var(--accent-primary); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 16px; } .preset-card .control-label { font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; } .preset-field-group { display: flex; flex-direction: column; gap: 8px; } .preset-field-label { font-size: 0.8rem; color: #888; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } .preset-dropdown { height: 44px; border-radius: 8px; background-color: #222; border: 1px solid #333; padding: 0 12px; outline: none; color: #fff; font-family: var(--pi-font-body, 'Inter', sans-serif); font-size: 14px; cursor: pointer; transition: border-color 0.2s ease; width: 100%; } .preset-dropdown:hover { border-color: #555; } .preset-dropdown:focus { border-color: var(--accent-primary); } .preset-name-input { height: 44px; border-radius: 8px; background-color: #222; border: 1px solid #333; padding: 0 12px; outline: none; color: #fff; font-family: var(--pi-font-body, 'Inter', sans-serif); font-size: 14px; transition: border-color 0.2s ease; width: 100%; } .preset-name-input:hover { border-color: #555; } .preset-name-input:focus { border-color: var(--accent-primary); } .preset-name-input::placeholder { color: #666; } .preset-btn { height: 44px; padding: 0 16px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; width: 100%; } .preset-btn.load { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: #fff; } .preset-btn.load:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); } .preset-btn.save { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: #fff; } .preset-btn.save:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4); } .preset-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .preset-info { font-size: 0.85rem; color: #888; padding: 10px 12px; background: rgba(0, 0, 0, 0.3); border-radius: 6px; display: none; } .preset-info.visible { display: block; } .preset-info .preset-author { color: var(--accent-primary); } .preset-info .preset-description { color: #b9b9b9; margin-top: 4px; } .preset-help { font-size: 0.8rem; line-height: 1.4; color: #666; margin-top: 4px; } /* ==================================== Sidebar Utility Controls (Undo/Redo, Randomize) ==================================== */ .utility-card { padding: 14px; } .sidebar-utility-controls { display: flex; flex-direction: column; gap: 8px; } .sidebar-utility-row { display: flex; gap: 8px; } .sidebar-utility-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; background: #2a2a3e; color: #fff; } .sidebar-utility-btn:hover:not(:disabled) { transform: translateY(-1px); background: #3a3a4e; } .sidebar-utility-btn:disabled { opacity: 0.4; cursor: not-allowed; } .sidebar-utility-btn.undo:hover:not(:disabled) { box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); } .sidebar-utility-btn.redo:hover:not(:disabled) { box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3); } .sidebar-utility-status { font-size: 0.75rem; color: #666; text-align: center; } .sidebar-utility-status span { color: var(--accent-primary); font-weight: 600; } /* Sidebar Randomize Controls */ .sidebar-randomize-controls { display: flex; flex-direction: column; gap: 6px; } .sidebar-randomize-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; background: #2a2a3e; color: #fff; width: 100%; } .sidebar-randomize-btn:hover { transform: translateY(-1px); background: #3a3a4e; } .sidebar-randomize-btn.primary { background: linear-gradient(135deg, var(--accent-primary) 0%, #6b4fcf 100%); } .sidebar-randomize-btn.primary:hover { box-shadow: 0 3px 12px rgba(242, 239, 233, 0.4); } .randomize-icon { font-size: 14px; } /* ==================================== Info Mode System ==================================== */ .info-mode-section { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #333; } .info-mode-label { font-size: 0.8rem; color: #888; } .info-mode-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #444; border-radius: 6px; background: #2a2a3e; cursor: pointer; transition: all 0.2s ease; color: #888; } .info-mode-toggle:hover { background: #3a3a4e; border-color: #555; color: #fff; } .info-mode-toggle.active { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-color: #3b82f6; color: #fff; } .info-mode-toggle .info-icon svg { display: block; } /* Hide help text by default (info mode off) */ .control-help, .control-help-block, .preset-help, .simulator-help, .viz-explanation { display: none; } /* Show help text when info mode is active */ body.info-mode-active .control-help, body.info-mode-active .control-help-block, body.info-mode-active .preset-help, body.info-mode-active .simulator-help, body.info-mode-active .viz-explanation { display: block; } /* Mouse-following tooltip */ .info-tooltip { position: fixed; z-index: 10000; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; max-width: 280px; padding: 10px 14px; background: rgba(20, 20, 30, 0.95); border: 1px solid var(--accent-primary); border-radius: 8px; font-size: 0.85rem; line-height: 1.4; color: #e0e0e0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); } .info-tooltip.visible { opacity: 1; } /* Responsive */ @media screen and (max-width: 1000px) { .page-layout { flex-direction: column; padding: 1rem; } .preset-sidebar { width: 100%; position: static; order: -1; display: flex; flex-wrap: wrap; gap: 16px; } .theme-card { flex: 0 0 auto; margin-bottom: 0; min-width: 200px; } .preset-card { flex: 1; flex-direction: row; flex-wrap: wrap; gap: 16px; } .preset-card .control-label { width: 100%; } .preset-field-group { flex: 1; min-width: 200px; } .preset-help { width: 100%; } .main-content #formdata { width: 100%; } } @media screen and (max-width: 900px) { .keys .key { width: 30px; height: 30px; margin-left: 0; margin-right: 0; } .keys .key .note-label { font-size: 8px; } .control-row { grid-template-columns: 1fr; } } @media screen and (max-width: 600px) { .preset-card { flex-direction: column; } .preset-field-group { min-width: 100%; } .selector-row { flex-direction: column; } .selector-group { min-width: 100%; } } /* ==================================== ADSR Envelope Styles ==================================== */ .adsr-section { display: flex; flex-direction: column; gap: 20px; } /* Two-column layout for ADSR content */ .adsr-main-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } /* Left column: Chart */ .adsr-chart-column { display: flex; flex-direction: column; gap: 12px; } /* Right column: Controls */ .adsr-controls-column { display: flex; flex-direction: column; gap: 12px; } /* Envelope Visual Display */ .envelope-visual { background: #0a0a0a; border: 1px solid #333; border-radius: 12px; padding: 16px; display: flex; justify-content: center; align-items: center; } #adsr-canvas { background: linear-gradient(180deg, #1a1a2e 0%, #0d0d15 100%); border-radius: 8px; width: 100%; height: 180px; } /* ADSR Controls - stacked vertically on right */ .adsr-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .adsr-slider-group { display: flex; flex-direction: column; gap: 6px; background: #0a0a0a; border: 1px solid #232323; border-radius: 10px; padding: 10px; } .adsr-slider-group label { font-weight: 600; font-size: 0.85rem; color: #fff; text-align: center; } .adsr-slider-group input[type="range"] { width: 100%; } .adsr-slider-group .slider-value-input { width: 100%; text-align: center; padding: 4px; font-size: 0.85rem; } /* Parameter description displayed below */ .adsr-param-desc { font-size: 0.7rem; color: #666; text-align: center; line-height: 1.3; margin-top: 2px; } .adsr-unit, .rate-unit { font-size: 0.7rem; color: #888; text-align: center; } .rate-unit { margin-left: 4px; min-width: 20px; } /* ADSR Toggles */ .adsr-toggles { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #0a0a0a; border: 1px solid #232323; border-radius: 10px; } .adsr-toggles .checkbox-group { display: flex; align-items: center; gap: 8px; } .adsr-toggles .checkbox-group label:first-child { font-size: 0.8rem; } /* ADSR Responsive adjustments */ @media screen and (max-width: 900px) { .adsr-main-layout { grid-template-columns: 1fr; } .adsr-controls { grid-template-columns: repeat(4, 1fr); } } @media screen and (max-width: 600px) { .adsr-controls { grid-template-columns: repeat(2, 1fr); } .adsr-toggles { gap: 12px; } #adsr-canvas { height: 140px; } } /* ==================================== ADSR Inline (Under Life Length) ==================================== */ .adsr-toggle-row { margin-top: 16px; padding-top: 12px; border-top: 1px solid #333; } .adsr-collapsible { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid #333; } .adsr-collapsible.visible { display: block; } .adsr-inline-section { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; } .adsr-graph-side { background: #0a0a0a; border-radius: 8px; padding: 8px; } .adsr-graph-side canvas { display: block; border-radius: 4px; } .adsr-controls-side { display: flex; flex-direction: column; gap: 8px; } .adsr-inline-slider { display: grid; grid-template-columns: 20px 1fr 50px 24px; gap: 8px; align-items: center; } .adsr-inline-slider label { font-weight: 600; font-size: 0.85rem; color: var(--accent-primary); } .adsr-inline-slider input[type="range"] { width: 100%; } .adsr-inline-slider .slider-value-input { width: 50px; height: 30px; font-size: 0.8rem; } .adsr-inline-slider .adsr-unit { font-size: 0.75rem; color: #666; } .adsr-toggles-inline { display: flex; gap: 20px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #222; } .adsr-toggles-inline .checkbox-group label:first-child { font-size: 0.8rem; } @media screen and (max-width: 600px) { .adsr-inline-section { grid-template-columns: 1fr; } .adsr-graph-side { order: -1; } .adsr-inline-slider { grid-template-columns: 20px 1fr 45px 20px; } } /* ==================================== Single-Column Parameter Layout ==================================== */ /* Params stack - single column flow */ .params-stack { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; } /* Paired Sliders (side by side) */ .paired-sliders-card { padding: 16px; } .paired-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .paired-slider-item { display: flex; flex-direction: column; gap: 6px; } .paired-slider-item .control-help { font-size: 0.75rem; margin-top: 4px; } /* Loop Controls (combined toggle and slider) */ .loop-card { padding: 16px; } .loop-header { display: flex; flex-direction: column; gap: 6px; } /* Loop options - completely hidden when loop is off */ .loop-options { display: none; flex-direction: column; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #333; } .loop-options.visible { display: flex; } /* Manual/BPM toggle buttons */ .loop-mode-toggle { display: flex; gap: 8px; } .loop-mode-btn { flex: 1; padding: 8px 12px; border: 1px solid #444; background: #1a1a1a; color: #888; border-radius: 4px; cursor: pointer; font-size: 0.85em; transition: all 0.2s ease; } .loop-mode-btn:hover { background: #252525; color: #aaa; } .loop-mode-btn.active { background: #333; color: #fff; border-color: #555; } /* Loop mode sections */ .loop-manual-section, .loop-bpm-section { display: flex; flex-direction: column; gap: 6px; } .loop-manual-section.hidden, .loop-bpm-section.hidden { display: none; } /* Progression interval mode toggle */ .progression-interval-controls { display: flex; flex-direction: column; gap: 8px; } .interval-mode-toggle { display: flex; gap: 6px; } .interval-mode-btn { flex: 1; padding: 6px 10px; border: 1px solid #444; background: #1a1a1a; color: #888; border-radius: 4px; cursor: pointer; font-size: 0.8em; transition: all 0.2s ease; } .interval-mode-btn:hover { background: #252525; color: #aaa; } .interval-mode-btn.active { background: #333; color: #fff; border-color: #555; } .interval-manual-section, .interval-bpm-section { display: flex; flex-direction: column; gap: 4px; } .interval-manual-section.hidden, .interval-bpm-section.hidden { display: none; } .interval-duration-display { font-size: 0.85em; color: #888; padding: 4px 0; } .interval-duration-display .duration-label { color: #666; } .interval-duration-display .duration-value { color: #a0c0ff; font-family: monospace; } /* Beats selector dropdown */ .beats-selector { min-width: 100px; } /* ADSR card adjustments for single column */ .adsr-card { display: flex; flex-direction: column; } .adsr-card .adsr-section { display: flex; flex-direction: column; gap: 16px; } /* Full-width section for scale and chord */ .full-width-section { display: flex; flex-direction: column; gap: 14px; } /* Responsive: stack paired sliders on smaller screens */ @media screen and (max-width: 700px) { .paired-sliders { grid-template-columns: 1fr; } .adsr-card .adsr-controls { grid-template-columns: repeat(2, 1fr); } } /* ==================================== Chord Progressions Feature ==================================== */ /* Enable Toggle Section */ .progression-enable-section { display: flex; align-items: center; gap: 16px; padding: 16px 0; } .progression-enable-section .control-label { font-size: 1.1rem; } /* Hidden state - collapse the progression controls */ .progression-content { display: none; } .progression-content.enabled { display: block; } /* Progression Header */ .progression-header { margin-bottom: 20px; } .progression-header .control-label { font-size: 1.2rem; margin-bottom: 8px; display: block; } .progression-controls { display: flex; flex-direction: column; gap: 16px; } /* Two-column settings layout */ .settings-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .settings-column { display: flex; flex-direction: column; gap: 16px; } /* Ensure both columns' items align at same heights */ .settings-column .selector-group { width: 100%; min-height: 80px; display: flex; flex-direction: column; } /* Interval slider: label on top, slider + number input side by side below */ .settings-column .slider-group.progression-slider-group { width: 100%; min-height: 80px; display: grid; grid-template-columns: 1fr 80px; grid-template-rows: auto auto auto; gap: 8px; align-items: center; } .settings-column .slider-group.progression-slider-group label { grid-column: span 2; } .settings-column .slider-group.progression-slider-group input[type="range"] { width: 100%; } .settings-column .slider-group.progression-slider-group .slider-value-input { width: 80px; height: 38px; } .settings-column .selector-group label { margin-bottom: 8px; } .settings-column .control-help { font-size: 0.75rem; color: #888; margin-top: 4px; } .settings-column .slider-group.progression-slider-group .control-help { grid-column: span 2; margin-top: 0; } @media screen and (max-width: 600px) { .settings-two-column { grid-template-columns: 1fr; } } /* Playback Controls - full width grid spanning both columns */ .progression-row { margin-top: 8px; } .playback-controls { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 12px; width: 100%; } .playback-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; width: 100%; } .playback-btn.play { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: #fff; } .playback-btn.play:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4); } .playback-btn.stop { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #fff; } .playback-btn.stop:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4); } .playback-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .play-icon, .stop-icon { font-size: 12px; } .current-chord-display { background: #1a1a2e; border: 1px solid #333; border-radius: 8px; padding: 12px 20px; font-weight: 600; color: var(--accent-primary); text-align: center; width: 100%; display: flex; align-items: center; justify-content: center; } .current-chord-display.playing { border-color: #22c55e; animation: pulse 1s infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } } /* Chord Slots Container */ #chord-slots-container { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; } /* Individual Chord Slot */ .chord-slot { background-color: #121212; border: 2px solid #232323; border-radius: 16px; padding: 16px; transition: all 0.3s ease; } .chord-slot.active { border-color: #22c55e; box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); } .chord-slot-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .chord-number { font-weight: 700; font-size: 1.1rem; color: var(--accent-primary); min-width: 80px; } .chord-slot.active .chord-number { color: #22c55e; } .chord-name-display { font-size: 0.9rem; color: #888; background: #0a0a0a; padding: 6px 12px; border-radius: 6px; } /* Mini Piano Keys - matching main page style */ .chord-slot-keys { margin-bottom: 12px; } .mini-piano { width: auto; text-align: center; } /* Key base styles */ .mini-piano .keys .key { display: inline-block; width: 50px; height: 50px; margin: 8px; border-radius: 50%; cursor: pointer; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); position: relative; transition: box-shadow 0.2s ease, transform 0.1s ease; } .mini-piano .keys .white { background-color: #fff; z-index: 1; /* Thin solid color ring when inactive */ box-shadow: 0 0 0 2px hsl(var(--key-hue, 0), 100%, 50%); } .mini-piano .keys .black { background-color: #000; z-index: 2; /* Thin solid color ring when inactive */ box-shadow: 0 0 0 2px hsl(var(--key-hue, 0), 100%, 50%); } .mini-piano .keys .hidden-key { visibility: hidden; } /* Individual key hue assignments using CSS custom properties */ .mini-piano .note-C { --key-hue: 0; } /* Red */ .mini-piano .note-G { --key-hue: 30; } /* Orange */ .mini-piano .note-D { --key-hue: 59; } /* Yellow */ .mini-piano .note-A { --key-hue: 90; } /* Chartreuse */ .mini-piano .note-E { --key-hue: 120; } /* Green */ .mini-piano .note-B { --key-hue: 151; } /* Spring Green */ .mini-piano .note-Fsharp { --key-hue: 181; } /* Cyan */ .mini-piano .note-Csharp { --key-hue: 212; } /* Azure */ .mini-piano .note-Gsharp { --key-hue: 241; } /* Blue */ .mini-piano .note-Dsharp { --key-hue: 272; } /* Violet */ .mini-piano .note-Asharp { --key-hue: 302; } /* Magenta */ .mini-piano .note-F { --key-hue: 332; } /* Rose */ /* Active state - full color ring */ .mini-piano .key.active { transform: scale(1.05); } .mini-piano .note-C.active { box-shadow: 0 0 0 8px hsl(0, 100%, 50%), inset 0 0 15px hsla(0, 100%, 50%, 0.3); } .mini-piano .note-G.active { box-shadow: 0 0 0 8px hsl(30, 100%, 50%), inset 0 0 15px hsla(30, 100%, 50%, 0.3); } .mini-piano .note-D.active { box-shadow: 0 0 0 8px hsl(59, 100%, 50%), inset 0 0 15px hsla(59, 100%, 50%, 0.3); } .mini-piano .note-A.active { box-shadow: 0 0 0 8px hsl(90, 100%, 50%), inset 0 0 15px hsla(90, 100%, 50%, 0.3); } .mini-piano .note-E.active { box-shadow: 0 0 0 8px hsl(120, 100%, 50%), inset 0 0 15px hsla(120, 100%, 50%, 0.3); } .mini-piano .note-B.active { box-shadow: 0 0 0 8px hsl(151, 100%, 50%), inset 0 0 15px hsla(151, 100%, 50%, 0.3); } .mini-piano .note-Fsharp.active { box-shadow: 0 0 0 8px hsl(181, 100%, 50%), inset 0 0 15px hsla(181, 100%, 50%, 0.3); } .mini-piano .note-Csharp.active { box-shadow: 0 0 0 8px hsl(212, 100%, 50%), inset 0 0 15px hsla(212, 100%, 50%, 0.3); } .mini-piano .note-Gsharp.active { box-shadow: 0 0 0 8px hsl(241, 100%, 50%), inset 0 0 15px hsla(241, 100%, 50%, 0.3); } .mini-piano .note-Dsharp.active { box-shadow: 0 0 0 8px hsl(272, 100%, 50%), inset 0 0 15px hsla(272, 100%, 50%, 0.3); } .mini-piano .note-Asharp.active { box-shadow: 0 0 0 8px hsl(302, 100%, 50%), inset 0 0 15px hsla(302, 100%, 50%, 0.3); } .mini-piano .note-F.active { box-shadow: 0 0 0 8px hsl(332, 100%, 50%), inset 0 0 15px hsla(332, 100%, 50%, 0.3); } /* Hover state - slightly thicker ring */ .mini-piano .keys .key:hover:not(.active) { box-shadow: 0 0 0 3px hsl(var(--key-hue, 0), 100%, 50%); } /* Note labels */ .mini-piano .note-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; font-weight: 600; pointer-events: none; user-select: none; } .mini-piano .key.white .note-label { color: #333; } .mini-piano .key.black .note-label { color: #fff; } /* Black keys row - centered like main page */ .mini-piano .black-keys { width: 78%; margin-left: auto; margin-right: auto; } .mini-piano .black-keys, .mini-piano .white-keys { display: flex; justify-content: space-between; } /* Chord selector row within each slot */ .chord-slot-selector { display: flex; gap: 12px; flex-wrap: wrap; } .chord-slot-selector .selector-group { flex: 1; min-width: 100px; } .chord-slot-selector .selector-group label { font-size: 0.75rem; color: #666; } .chord-slot-selector .selector-dropdown { height: 38px; font-size: 13px; } /* Responsive adjustments */ @media screen and (max-width: 600px) { .playback-controls { grid-template-columns: 1fr 1fr; } .playback-controls .current-chord-display { grid-column: span 2; } .mini-piano .keys .key { width: 32px; height: 32px; margin: 4px; } .mini-piano .note-label { font-size: 8px; } .chord-slot-selector { flex-direction: column; } .chord-slot-selector .selector-group { min-width: 100%; } } /* ==================================== Transport Controls Styles ==================================== */ /* Transport section within param card */ .transport-section { display: flex; flex-direction: column; gap: 12px; } .transport-section .control-label { font-weight: 600; margin-bottom: 4px; } /* Main transport controls layout */ .main-transport-controls { display: flex; gap: 12px; flex-wrap: wrap; } /* Main transport status display */ .main-transport-status { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(0, 0, 0, 0.3); border-radius: 8px; border: 1px solid #333; width: fit-content; } /* Adjust control-row for transport section */ .param-card .control-row:has(.transport-section) { grid-template-columns: minmax(0, 1fr) 280px; } @media screen and (max-width: 900px) { .param-card .control-row:has(.transport-section) { grid-template-columns: 1fr; } .main-transport-controls { justify-content: center; } .main-transport-status { align-self: center; } } /* Transport Controls Container */ .transport-controls { display: flex; gap: 12px; flex-wrap: wrap; } /* Transport Button Base */ .transport-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; min-width: 110px; } .transport-icon { font-size: 14px; line-height: 1; } /* Play Button */ .transport-btn.play { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: #fff; } .transport-btn.play:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(34, 197, 94, 0.5); } .transport-btn.play:active:not(:disabled) { transform: translateY(0); } .transport-btn.play.active { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); box-shadow: 0 0 20px rgba(34, 197, 94, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.1); } /* Pause Button */ .transport-btn.pause { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; } .transport-btn.pause:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(245, 158, 11, 0.5); } .transport-btn.pause:active:not(:disabled) { transform: translateY(0); } .transport-btn.pause.active { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); box-shadow: 0 0 20px rgba(245, 158, 11, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.1); } /* Reset Button */ .transport-btn.reset { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #fff; } .transport-btn.reset:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(239, 68, 68, 0.5); } .transport-btn.reset:active:not(:disabled) { transform: translateY(0); } /* Disabled State */ .transport-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } /* Transport Status Display */ .transport-status { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(0, 0, 0, 0.3); border-radius: 8px; border: 1px solid #333; } .status-indicator { width: 12px; height: 12px; border-radius: 50%; background: #666; transition: all 0.3s ease; } /* Status Colors */ .status-indicator.playing { background: #22c55e; box-shadow: 0 0 12px rgba(34, 197, 94, 0.7); animation: pulse-playing 1.5s infinite; } .status-indicator.paused { background: #f59e0b; box-shadow: 0 0 12px rgba(245, 158, 11, 0.7); } .status-indicator.stopped { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); } .status-text { font-size: 14px; font-weight: 500; color: #b9b9b9; } /* Pulse animation for playing state */ @keyframes pulse-playing { 0%, 100% { box-shadow: 0 0 12px rgba(34, 197, 94, 0.7); } 50% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.9); } } /* Responsive Adjustments for Transport */ @media screen and (max-width: 600px) { .transport-controls { justify-content: center; } .transport-btn { flex: 1; min-width: 90px; padding: 12px 16px; font-size: 14px; } } /* ==================================== Simulator Sidebar Styles ==================================== */ /* Right sidebar for simulator */ .simulator-sidebar { align-self: stretch; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overflow-x: hidden; padding-left: 8px; } /* Sidebar Transport Card (above simulator) */ .sidebar-transport-card { background: linear-gradient(135deg, #121212 0%, #1a1a2e 100%); border: 2px solid var(--accent-primary); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .sidebar-transport-controls { display: flex; gap: 8px; justify-content: center; } .sidebar-transport-btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px 8px; border: none; border-radius: 10px; font-size: 18px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .sidebar-transport-btn.play { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: #fff; } .sidebar-transport-btn.play:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(34, 197, 94, 0.5); } .sidebar-transport-btn.play.active { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); box-shadow: 0 0 20px rgba(34, 197, 94, 0.5); } .sidebar-transport-btn.pause { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; } .sidebar-transport-btn.pause:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(245, 158, 11, 0.5); } .sidebar-transport-btn.pause.active { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); box-shadow: 0 0 20px rgba(245, 158, 11, 0.5); } .sidebar-transport-btn.reset { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #fff; } .sidebar-transport-btn.reset:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(239, 68, 68, 0.5); } .sidebar-transport-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .sidebar-transport-status { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px; background: rgba(0, 0, 0, 0.3); border-radius: 8px; border: 1px solid #333; } .sidebar-transport-status .status-text { font-size: 0.85rem; color: #888; } /* Simulator card styling */ .simulator-card { background: linear-gradient(135deg, #121212 0%, #1a1a2e 100%); border: 2px solid var(--accent-primary); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; } .simulator-header { display: flex; justify-content: space-between; align-items: center; } .simulator-card .control-label { font-weight: 600; font-size: 1.1rem; margin: 0; color: #fff; } .sim-popout-btn { background: transparent; border: 1px solid #444; border-radius: 6px; padding: 6px 8px; cursor: pointer; color: #888; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .sim-popout-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); background: rgba(242, 239, 233, 0.1); } /* Hex grid container */ .simulator-container { background: #0a0a0a; border-radius: 12px; padding: 8px; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; } #hex-grid { width: 100%; height: 100%; } /* Hex cell styling */ .hex-cell { cursor: pointer; transition: all 0.15s ease; } .hex-cell polygon { stroke: #333; stroke-width: 0.5; transition: fill 0.15s ease, stroke 0.15s ease; } .hex-cell:hover polygon { stroke: var(--accent-primary); stroke-width: 1; } .hex-cell.active polygon { stroke: #fff; stroke-width: 1; } .hex-cell .hex-label { font-size: 7px; font-weight: 600; fill: #fff; text-anchor: middle; dominant-baseline: middle; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; text-shadow: 0 0 3px #000, 0 0 6px #000; } .hex-cell:hover .hex-label { opacity: 1; } /* Simulator controls */ .simulator-controls { display: flex; justify-content: center; } .simulator-controls .midi-out-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; } .simulator-controls .midi-out-toggle label:first-of-type { color: #888; } /* Simulator status */ .simulator-status { font-size: 0.85rem; color: #888; text-align: center; padding: 6px 0; border-top: 1px solid #333; border-bottom: 1px solid #333; } .simulator-status #sim-count { color: var(--accent-primary); font-weight: 600; } /* Simulator help text */ .simulator-help { font-size: 0.8rem; line-height: 1.4; color: #666; } /* Hex cell pulse animation for active cells */ @keyframes hex-pulse { 0% { filter: brightness(1); } 50% { filter: brightness(1.3); } 100% { filter: brightness(1); } } .hex-cell.active { animation: hex-pulse 0.5s ease-out; } /* Responsive: adjust grid on smaller screens */ @media screen and (max-width: 1000px) { .page-layout.three-column { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .page-layout.three-column .preset-sidebar { position: static; grid-column: 1; grid-row: 1; } .simulator-sidebar { position: static; grid-column: 2; grid-row: 1; } .page-layout.three-column .main-content { grid-column: 1 / -1; grid-row: 2; } } @media screen and (max-width: 600px) { .page-layout.three-column { grid-template-columns: 1fr; padding: 1rem; gap: 16px; } .page-layout.three-column .preset-sidebar, .simulator-sidebar, .page-layout.three-column .main-content { grid-column: 1; position: static; } .simulator-sidebar { grid-row: 1; } .page-layout.three-column .preset-sidebar { grid-row: 2; } .page-layout.three-column .main-content { grid-row: 3; } } /* ==================================== Neighbour Visualization Feature ==================================== */ /* Main layout for the neighbour card */ .neighbour-card { padding: 20px; width: 100%; box-sizing: border-box; } .neighbour-layout { display: grid; grid-template-columns: 1fr 170px; gap: 24px; align-items: start; width: 100%; } .neighbour-controls { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; } .neighbour-controls .control-row { display: flex; flex-direction: column; gap: 6px; width: 100%; } .neighbour-slider { display: flex; flex-direction: column; gap: 6px; width: 100%; } .neighbour-slider label { font-weight: 600; } .neighbour-slider .slider-row { display: flex; gap: 10px; align-items: center; width: 100%; } .neighbour-slider input[type="range"] { flex: 1; min-width: 150px; } .neighbour-slider .slider-value-input { width: 55px; flex-shrink: 0; } /* Visualization container */ .neighbour-viz-container { display: flex; flex-direction: column; align-items: center; padding: 12px; background: rgba(0, 0, 0, 0.3); border-radius: 12px; width: 170px; flex-shrink: 0; } .viz-label { color: var(--accent-primary); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; } #neighbour-grid { width: 150px; height: 150px; } .viz-status { margin-top: 12px; color: #fff; font-size: 13px; font-weight: 500; } .viz-status #active-count { color: #4ade80; font-weight: 700; } .viz-status #total-neighbours { color: var(--accent-primary); } .viz-explanation { margin-top: 8px; color: #888; font-size: 11px; text-align: center; max-width: 160px; line-height: 1.4; } /* Neighbour visualization hex cell styles */ .neighbour-viz-container .hex-cell { fill: rgba(50, 50, 70, 0.6); stroke: rgba(242, 239, 233, 0.3); stroke-width: 1; transition: all 0.2s ease; } .neighbour-viz-container .hex-cell.center { fill: rgba(242, 239, 233, 0.4); stroke: var(--accent-primary); stroke-width: 2; } .neighbour-viz-container .hex-cell.inner { fill: rgba(50, 50, 70, 0.8); stroke: rgba(242, 239, 233, 0.4); } .neighbour-viz-container .hex-cell.outer { fill: rgba(40, 40, 55, 0.6); stroke: rgba(242, 239, 233, 0.2); } .neighbour-viz-container .hex-cell.active { fill: rgba(74, 222, 128, 0.7); stroke: #4ade80; stroke-width: 1.5; } .neighbour-viz-container .hex-cell.inner.active { fill: rgba(74, 222, 128, 0.8); } .neighbour-viz-container .hex-cell.outer.active { fill: rgba(74, 222, 128, 0.6); } /* Greyed out cells (beyond max neighbours) */ .neighbour-viz-container .hex-cell.greyed-out { fill: rgba(20, 20, 25, 0.9); stroke: rgba(40, 40, 50, 0.5); stroke-dasharray: 2 2; opacity: 0.4; } .neighbour-viz-container .hex-cell.inner.greyed-out { fill: rgba(20, 20, 25, 0.9); stroke: rgba(60, 60, 70, 0.4); } .neighbour-viz-container .hex-cell.outer.greyed-out { fill: rgba(15, 15, 20, 0.9); stroke: rgba(40, 40, 50, 0.3); } .neighbour-viz-container .center-indicator { fill: #fff; opacity: 0.9; } /* Responsive layout for neighbour visualization */ @media (max-width: 600px) { .neighbour-layout { grid-template-columns: 1fr; } .neighbour-viz-container { width: 100%; order: -1; } } /* ==================================== Mobile Layout Feature Collapsible Sections & Touch Optimizations ==================================== */ /* Collapsible Sections */ .collapsible-section { margin-bottom: 14px; } .section-toggle { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: linear-gradient(135deg, #1a1a2e 0%, #121212 100%); border: 1px solid #333; border-radius: 12px; color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; text-align: left; } .section-toggle:hover { border-color: var(--accent-primary); background: linear-gradient(135deg, #1f1f3a 0%, #171717 100%); } .section-toggle:active { transform: scale(0.98); } /* Toggle arrow (SVG chevron) */ .toggle-arrow { flex-shrink: 0; color: var(--accent-primary); transition: transform 0.3s ease; } /* Expanded state - arrow points down */ .section-toggle[aria-expanded="true"] .toggle-arrow { transform: rotate(90deg); } /* Collapsed state - arrow points right (default) */ .section-toggle[aria-expanded="false"] .toggle-arrow { transform: rotate(0deg); } .section-title { flex: 1; } /* Section content */ .section-content { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; overflow: hidden; max-height: 2000px; transition: max-height 0.4s ease, padding 0.3s ease, opacity 0.3s ease; opacity: 1; } .section-content.collapsed { max-height: 0; padding-top: 0; opacity: 0; pointer-events: none; } /* Touch-Friendly Slider Handles */ .touch-slider input[type="range"] { height: 12px; border-radius: 6px; } .touch-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary) 0%, #7c4dff 100%); cursor: pointer; box-shadow: 0 2px 8px rgba(242, 239, 233, 0.4); border: 2px solid #fff; transition: transform 0.15s ease, box-shadow 0.15s ease; } .touch-slider input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(242, 239, 233, 0.6); } .touch-slider input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.15); box-shadow: 0 4px 16px rgba(242, 239, 233, 0.8); } .touch-slider input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary) 0%, #7c4dff 100%); cursor: pointer; box-shadow: 0 2px 8px rgba(242, 239, 233, 0.4); border: 2px solid #fff; transition: transform 0.15s ease, box-shadow 0.15s ease; } .touch-slider input[type="range"]::-moz-range-thumb:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(242, 239, 233, 0.6); } /* Touch-Friendly Toggles */ .touch-toggle { height: 28px; width: 52px; min-width: 52px; } .touch-toggle span { height: 24px; width: 24px; transform: translateX(2px) translateY(2px); } .checkbox-group input:checked + .touch-toggle span { transform: translateX(26px) translateY(2px); } /* Touch-Friendly Piano Keys */ .touch-piano .keys .key { width: 44px; height: 44px; margin: 6px; min-width: 44px; min-height: 44px; } .touch-piano .note-label { font-size: 11px; } /* Touch-Friendly Dropdowns */ .touch-dropdown { height: 48px; font-size: 16px; padding: 0 16px; } /* Mobile Title Block */ .mobile-title-block { display: none; } .mobile-title-block h1 { font-size: 1.5rem; color: #fff; margin: 0; padding: 16px; text-align: center; background: linear-gradient(135deg, #1a1a2e 0%, #121212 100%); border: 1px solid #333; border-radius: 12px; } /* Desktop title in form */ .desktop-title { display: block; } /* Transport sidebar styling */ .transport-sidebar { display: none; } .transport-sidebar .transport-card { background: linear-gradient(135deg, #1a1a2e 0%, #121212 100%); border: 1px solid #333; border-radius: 12px; padding: 16px; } /* TZ4 Device Card */ .device-card { background: linear-gradient(135deg, #1a2e1a 0%, #121212 100%); border: 1px solid #333; border-radius: 12px; padding: 16px; margin-top: 12px; } .device-section { display: flex; flex-direction: column; gap: 8px; } .device-section .control-label { font-weight: 600; margin-bottom: 4px; color: #4ade80; } .device-status-row, .device-detail, .device-control-row { display: flex; align-items: center; gap: 8px; } .device-label { color: #888; font-size: 12px; min-width: 60px; } .status-connected { color: #4ade80; font-weight: 600; } .status-disconnected { color: #666; } .device-info { padding: 8px; background: rgba(0, 0, 0, 0.2); border-radius: 6px; font-size: 12px; } .device-help { font-size: 11px; color: #666; font-style: italic; margin-top: 4px; } #tz4-serial, #tz4-version { font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; color: #4ade80; font-size: 11px; } /* TZ4 Device Panel (in simulator sidebar) */ .tz4-device-panel { background: linear-gradient(135deg, #1a2e1a 0%, #0d1a0d 100%); border: 1px solid #2a5a2a; border-radius: 8px; padding: 12px; margin-bottom: 12px; } .tz4-device-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(74, 222, 128, 0.2); } .tz4-device-icon { color: #4ade80; font-size: 16px; } .tz4-device-title { color: #4ade80; font-weight: 600; font-size: 13px; } .tz4-device-details { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .tz4-detail-row { display: flex; justify-content: space-between; align-items: center; } .tz4-label { color: #888; font-size: 11px; } .tz4-value { font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; color: #4ade80; font-size: 11px; } .tz4-device-controls { padding-top: 8px; border-top: 1px solid rgba(74, 222, 128, 0.2); } .tz4-device-controls .checkbox-group { display: flex; align-items: center; gap: 8px; } .tz4-device-controls label[for="tz4-panel-midi-control"] { font-size: 12px; color: #ccc; } .tz4-brightness-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .tz4-update-row { margin-top: 10px; } .tz4-update-btn { width: 100%; padding: 6px 10px; font-size: 12px; color: #ffd27f; background: rgba(255, 165, 0, 0.08); border: 1px solid rgba(255, 165, 0, 0.4); border-radius: 4px; cursor: pointer; } .tz4-update-btn:hover { background: rgba(255, 165, 0, 0.18); } .tz4-update-btn:disabled { opacity: 0.6; cursor: default; } .tz4-brightness-row label { font-size: 12px; color: #ccc; white-space: nowrap; } .tz4-brightness-row input[type="range"] { flex: 1; min-width: 0; } .tz4-brightness-row .slider-value-input { width: 48px; } /* Theme sidebar styling */ .theme-sidebar { display: none; } /* Mobile Responsive Overrides (< 600px) */ @media screen and (max-width: 600px) { /* Force single column layout */ .page-layout.three-column.mobile-optimized { display: flex !important; flex-direction: column !important; padding: 12px; gap: 12px; } /* Show mobile-specific elements */ .mobile-title-block { display: block; order: 1; width: 100%; } .theme-sidebar { display: block; order: 2; width: 100%; } .mobile-optimized .preset-sidebar { order: 3; width: 100%; } .transport-sidebar { display: block; order: 4; width: 100%; } .mobile-optimized .main-content { order: 5; width: 100%; } .mobile-optimized .simulator-sidebar { order: 6; width: 100%; } /* Hide the desktop title in the form */ .desktop-title { display: none !important; } /* Compact header */ #formdata > h1 { font-size: 1.25rem; padding: 14px 0; margin-bottom: 1rem; } /* Tighter container padding */ #tz-unique-id-container { padding: 12px; border-radius: 16px; } /* Stack control rows vertically */ .control-row { grid-template-columns: 1fr !important; gap: 8px; } /* Full-width slider groups */ .slider-group { grid-template-columns: 1fr 80px; } /* Make number inputs larger for touch */ .slider-value-input { height: 44px; width: 80px; font-size: 16px; } /* Even larger touch targets for sliders on mobile */ .touch-slider input[type="range"]::-webkit-slider-thumb { width: 32px; height: 32px; } .touch-slider input[type="range"]::-moz-range-thumb { width: 32px; height: 32px; } /* Piano keys - slightly larger on mobile */ .touch-piano .keys .key { width: 40px; height: 40px; margin: 4px; } .touch-piano .black-keys { width: 72%; } .touch-piano .note-label { font-size: 10px; } /* Stack chord selectors vertically */ .selector-row { flex-direction: column; gap: 12px; } .selector-group { min-width: 100%; } /* Dropdowns full width and taller */ .selector-dropdown, .preset-dropdown { height: 48px; font-size: 16px; } /* Transport buttons wrap nicely */ .main-transport-controls { flex-wrap: wrap; gap: 8px; } .transport-btn { flex: 1; min-width: 90px; padding: 14px 12px; } /* ADSR controls 2-column on mobile */ .adsr-controls { grid-template-columns: 1fr 1fr; } /* Preset card stacked */ .preset-card { flex-direction: column; padding: 16px; } .preset-field-group { min-width: 100%; } /* Buttons taller for touch */ .preset-btn { height: 48px; } /* Collapsible section toggle larger tap target */ .section-toggle { padding: 18px 16px; min-height: 56px; } /* Simulator responsive */ .simulator-container { max-width: 280px; margin: 0 auto; } /* Make sure checkboxes/toggles have enough space */ .checkbox-group { gap: 12px; padding: 8px 0; } /* Help text slightly smaller to save space */ .control-help { font-size: 0.8rem; } } /* Tablet Responsive (600px - 900px) — desktop sidebars stay; only redundant copies hidden */ @media screen and (min-width: 601px) and (max-width: 900px) { /* Hide redundant mobile-only sidebars; desktop preset/simulator sidebars own these cards */ .theme-sidebar, .transport-sidebar { display: none !important; } /* Force a 3-row grid: title / sidebars / main */ .page-layout.three-column.mobile-optimized { grid-template-rows: auto auto auto !important; } /* Lockup at top, full-width */ .mobile-title-block { display: block !important; grid-column: 1 / -1 !important; grid-row: 1 !important; order: -1 !important; width: 100% !important; padding: 8px 0 16px !important; border-bottom: 1px solid var(--pi-border, #2a2a2a) !important; margin-bottom: 8px !important; } /* Sidebars in row 2 */ .page-layout.three-column.mobile-optimized .preset-sidebar { grid-column: 1 !important; grid-row: 2 !important; } .page-layout.three-column.mobile-optimized .simulator-sidebar { grid-column: 2 !important; grid-row: 2 !important; } /* Main content in row 3, full width */ .page-layout.three-column.mobile-optimized .main-content { grid-column: 1 / -1 !important; grid-row: 3 !important; } /* Piano keys medium size */ .touch-piano .keys .key { width: 50px; height: 50px; margin: 8px; } } /* Accessibility Improvements */ .section-toggle:focus { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .touch-slider input[type="range"]:focus { outline: none; } .touch-slider input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(242, 239, 233, 0.3), 0 2px 8px rgba(242, 239, 233, 0.4); } /* High contrast mode support */ @media (prefers-contrast: high) { .section-toggle { border-width: 2px; } .touch-slider input[type="range"]::-webkit-slider-thumb { border-width: 3px; } } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { .section-content { transition: none; } .toggle-arrow { transition: none; } .touch-slider input[type="range"]::-webkit-slider-thumb { transition: none; } } /* Safe Area Insets (for notched phones) */ @supports (padding: env(safe-area-inset-bottom)) { @media screen and (max-width: 600px) { body { padding-bottom: env(safe-area-inset-bottom); } } } /* ==================================== MIDI Learn Feature Styles ==================================== */ /* MIDI Learn Card */ .midi-learn-card { margin-top: 16px; } /* BPM Section */ .bpm-section { margin-bottom: 12px; padding: 10px 12px; background: #0a0a0a; border-radius: 8px; } .bpm-display-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; } .bpm-label { font-size: 12px; color: #888; font-weight: 500; } .bpm-value { font-size: 20px; font-weight: 700; color: #4ade80; font-variant-numeric: tabular-nums; min-width: 60px; } .bpm-source { font-size: 10px; color: #666; } .bpm-manual-control { margin-top: 8px; } .bpm-slider { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; background: #333; border-radius: 3px; outline: none; } .bpm-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #4ade80; cursor: pointer; transition: transform 0.1s ease; } .bpm-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .bpm-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #4ade80; cursor: pointer; border: none; } .bpm-clock-indicator { display: flex; align-items: center; gap: 6px; padding: 6px 0; color: #4ade80; font-size: 11px; } .bpm-clock-indicator .clock-icon { font-size: 14px; animation: clock-pulse 2s ease-in-out infinite; } @keyframes clock-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .bpm-clock-indicator.hidden, .bpm-manual-control.hidden { display: none; } /* Loop Duration Display */ .loop-duration-display { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; padding: 6px 10px; background: rgba(74, 222, 128, 0.1); border-radius: 6px; font-size: 12px; } .loop-duration-display .duration-label { color: #888; } .loop-duration-display .duration-value { color: #4ade80; font-weight: 600; font-variant-numeric: tabular-nums; } .loop-duration-display .duration-steps { color: #666; font-size: 11px; } .midi-learn-status { display: flex; align-items: center; gap: 8px; margin: 12px 0; padding: 8px 12px; background: #0a0a0a; border-radius: 8px; } .midi-learn-status .status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .midi-learn-status .status-dot.connected { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); } .midi-learn-status .status-dot.disconnected { background: #666; } .midi-learn-status .status-dot.learning { background: #f59e0b; animation: midi-pulse 1s ease-in-out infinite; } @keyframes midi-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .midi-learn-status .status-text { font-size: 12px; color: #999; } .midi-learn-controls { margin: 12px 0; } /* Mappings Section */ .midi-mappings { margin-top: 16px; padding-top: 12px; border-top: 1px solid #333; } .mappings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .mappings-header span { font-size: 12px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.5px; } .clear-mappings-btn { padding: 4px 8px; font-size: 10px; background: transparent; border: 1px solid #444; border-radius: 4px; color: #888; cursor: pointer; transition: all 0.2s ease; } .clear-mappings-btn:hover { background: #333; border-color: #666; color: #fff; } .mappings-list { max-height: 200px; overflow-y: auto; } .no-mappings { font-size: 12px; color: #666; text-align: center; padding: 12px; } .mapping-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; background: #1a1a1a; border-radius: 6px; margin-bottom: 4px; font-size: 11px; } .mapping-item .param-name { color: var(--accent-primary); font-weight: 500; } .mapping-item .cc-info { color: #888; } .mapping-item .remove-mapping { width: 18px; height: 18px; background: transparent; border: none; color: #666; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; } .mapping-item .remove-mapping:hover { background: #333; color: #ef4444; } /* Learning indicator on sliders */ .slider-group.midi-learning { position: relative; } .slider-group.midi-learning::after { content: "Move MIDI CC..."; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(242, 239, 233, 0.95); color: #fff; padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; z-index: 10; animation: midi-pulse 1s ease-in-out infinite; pointer-events: none; } .slider-group.midi-mapped { position: relative; } .slider-group.midi-mapped label::after { content: attr(data-midi-cc); margin-left: 8px; font-size: 10px; background: var(--accent-primary); color: #fff; padding: 2px 6px; border-radius: 4px; font-weight: 500; } /* ADSR slider group mapped state */ .adsr-slider-group.midi-mapped label::after { content: attr(data-midi-cc); margin-left: 8px; font-size: 10px; background: var(--accent-primary); color: #fff; padding: 2px 6px; border-radius: 4px; font-weight: 500; } .adsr-slider-group.midi-learning { position: relative; } .adsr-slider-group.midi-learning::after { content: "Move MIDI CC..."; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(242, 239, 233, 0.95); color: #fff; padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; z-index: 10; animation: midi-pulse 1s ease-in-out infinite; pointer-events: none; } /* Clickable state when learn mode is on */ body.midi-learn-mode .slider-group:not(.midi-learning) { cursor: pointer; } body.midi-learn-mode .slider-group:not(.midi-learning):hover { outline: 2px solid rgba(242, 239, 233, 0.5); outline-offset: 4px; border-radius: 8px; } body.midi-learn-mode .adsr-slider-group:not(.midi-learning) { cursor: pointer; } body.midi-learn-mode .adsr-slider-group:not(.midi-learning):hover { outline: 2px solid rgba(242, 239, 233, 0.5); outline-offset: 4px; border-radius: 8px; } /* MIDI activity indicator */ .midi-activity { position: fixed; bottom: 20px; right: 20px; background: rgba(242, 239, 233, 0.9); color: #fff; padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 500; z-index: 999; opacity: 0; transform: translateY(10px); transition: all 0.2s ease; pointer-events: none; } .midi-activity.show { opacity: 1; transform: translateY(0); } /* ==================================== Undo/Redo Feature Styles ==================================== */ /* Undo/Redo Card */ .undo-redo-card { margin-bottom: 20px; } .undo-redo-section { display: flex; flex-direction: column; gap: 12px; } .undo-redo-section .control-label { font-weight: 600; color: var(--accent-primary); margin-bottom: 4px; } /* Undo/Redo Buttons */ .undo-redo-controls { display: flex; gap: 12px; } .undo-redo-btn { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: #fff; } .undo-redo-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); } .undo-redo-btn:active:not(:disabled) { transform: translateY(0); } .undo-redo-btn:disabled { opacity: 0.4; cursor: not-allowed; background: #444; } .undo-redo-btn.undo { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .undo-redo-btn.undo:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); } .undo-redo-btn.redo { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .undo-redo-btn.redo:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); } .undo-redo-icon { font-size: 18px; line-height: 1; } /* Status Indicator */ .undo-redo-status { font-size: 12px; color: #888; } .undo-redo-status span { color: var(--accent-primary); font-weight: 600; } /* Keyboard shortcut styling */ kbd { display: inline-block; padding: 2px 6px; font-family: monospace; font-size: 12px; background: #333; border: 1px solid #555; border-radius: 4px; color: #fff; } /* Responsive adjustments */ @media (max-width: 600px) { .undo-redo-controls { flex-direction: column; } .undo-redo-btn { width: 100%; justify-content: center; } } /* ==================================== Parameter Randomize Feature ==================================== */ /* Single column layout for description */ .control-row.single-column { display: block; } /* Randomize section */ .randomize-section { display: flex; flex-direction: column; gap: 12px; } .randomize-controls { display: flex; gap: 10px; flex-wrap: wrap; } /* Randomize button styles */ .randomize-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; background: linear-gradient(135deg, var(--accent-primary) 0%, #7c4dff 100%); color: #fff; } .randomize-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(242, 239, 233, 0.4); } .randomize-btn:active { transform: translateY(0); } .randomize-btn.secondary { background: linear-gradient(135deg, #333 0%, #222 100%); border: 1px solid #444; } .randomize-btn.secondary:hover { background: linear-gradient(135deg, #444 0%, #333 100%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .randomize-icon { font-size: 18px; } /* Animation for randomize effect */ @keyframes randomize-flash { 0% { background-color: rgba(242, 239, 233, 0.3); } 100% { background-color: transparent; } } .slider-group.randomizing input[type="range"] { animation: randomize-flash 0.3s ease; } .key.randomizing { animation: randomize-flash 0.3s ease; } /* Randomize card highlighting */ .randomize-card { border-color: var(--accent-primary); border-width: 2px; } /* Responsive adjustments */ @media screen and (max-width: 600px) { .randomize-controls { flex-direction: column; } .randomize-btn { width: 100%; justify-content: center; } } /* ==================================== Update Mode Layout (New) ==================================== */ .update-mode-card { padding: 16px; } .update-mode-card > .control-label { margin-bottom: 12px; display: block; } .update-mode-layout { display: grid; grid-template-columns: 1fr 170px; gap: 24px; align-items: start; } .update-mode-controls { display: flex; flex-direction: column; gap: 12px; } .update-mode-controls .selector-group { display: flex; flex-direction: column; gap: 4px; } .update-mode-controls .selector-group label { font-size: 0.75rem; color: #888; font-weight: 500; } .update-mode-controls .selector-dropdown { height: 38px; font-size: 13px; } .update-mode-controls .selector-dropdown:disabled { opacity: 0.4; cursor: not-allowed; } .mode-preview-side { background: rgba(0, 0, 0, 0.3); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; align-items: center; width: 170px; flex-shrink: 0; } .mode-preview-side .preview-grid { width: 150px; height: 150px; } @media (max-width: 600px) { .update-mode-layout { grid-template-columns: 1fr; } .mode-preview-side { width: 100%; order: -1; } .mode-preview-side .preview-grid { width: 200px; height: 200px; } } /* ==================================== Arpeggiate Mode Selector Feature (Legacy) ==================================== */ /* Arpeggiate section layout */ .arpeggiate-section { display: flex; flex-direction: column; gap: 16px; } .arpeggiate-section .control-label { font-weight: 600; font-size: 1.1rem; } /* Make the dropdown full width */ .arpeggiate-section .selector-group { width: 100%; } .arpeggiate-dropdown { width: 100%; height: 48px; font-size: 15px; } /* Mode Preview Container */ .mode-preview { background: #050508; border: 1px solid #333; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .preview-label { font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } /* Full 91-cell hex grid for preview */ .preview-grid { width: 280px; height: 280px; position: relative; display: flex; align-items: center; justify-content: center; background: transparent; border-radius: 8px; } .preview-grid svg { width: 100%; height: 100%; overflow: visible; } .preview-cell { cursor: default; } /* Base cell style - empty/inactive cells */ .preview-cell polygon { stroke: #333; stroke-width: 1; fill: #1a1a22; transition: fill 0.1s ease, stroke 0.1s ease, filter 0.1s ease; } /* Active cell - bright purple with glow */ .preview-cell.highlight polygon { fill: var(--accent-hover) !important; stroke: #e0d4ff !important; stroke-width: 2 !important; filter: drop-shadow(0 0 8px rgba(167, 139, 250, 1)) drop-shadow(0 0 16px rgba(167, 139, 250, 0.8)) drop-shadow(0 0 24px rgba(242, 239, 233, 0.5)); } /* Trail effect - fading gradient for recently visited cells */ .preview-cell.trail polygon { stroke: rgba(242, 239, 233, 0.6); stroke-width: 1.5; } /* Trail gradient - most recent to oldest */ .preview-cell.trail-1 polygon { fill: rgba(242, 239, 233, 0.6); filter: drop-shadow(0 0 4px rgba(242, 239, 233, 0.5)); } .preview-cell.trail-2 polygon { fill: rgba(242, 239, 233, 0.45); filter: drop-shadow(0 0 3px rgba(242, 239, 233, 0.4)); } .preview-cell.trail-3 polygon { fill: rgba(242, 239, 233, 0.35); filter: drop-shadow(0 0 2px rgba(242, 239, 233, 0.3)); } .preview-cell.trail-4 polygon { fill: rgba(242, 239, 233, 0.25); } .preview-cell.trail-5 polygon { fill: rgba(242, 239, 233, 0.18); } .preview-cell.trail-6 polygon { fill: rgba(242, 239, 233, 0.12); } .preview-cell.trail-7 polygon { fill: rgba(242, 239, 233, 0.08); } /* Group trail styles for wave/raindrop modes (whole rows/rings at once) */ .preview-cell.group-trail-1 polygon { fill: rgba(242, 239, 233, 0.5); filter: drop-shadow(0 0 4px rgba(242, 239, 233, 0.4)); } .preview-cell.group-trail-2 polygon { fill: rgba(242, 239, 233, 0.3); filter: drop-shadow(0 0 2px rgba(242, 239, 233, 0.2)); } .preview-cell.group-trail-3 polygon { fill: rgba(242, 239, 233, 0.15); } /* Preview description */ .preview-description { font-size: 0.85rem; color: #b9b9b9; text-align: center; line-height: 1.4; max-width: 300px; } /* Responsive adjustments */ @media screen and (max-width: 600px) { .arpeggiate-dropdown { font-size: 14px; height: 44px; } .preview-grid { width: 240px; height: 240px; } .preview-description { font-size: 0.8rem; } } @media screen and (max-width: 400px) { .preview-grid { width: 220px; height: 220px; } } /* ==================================== Dark/Light Theme Toggle Feature ==================================== */ /* Quick Theme Toggle Button */ .quick-theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--bg-input); border: 1px solid var(--border-primary); border-radius: 8px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .quick-theme-toggle:hover { border-color: var(--accent-primary); transform: scale(1.05); box-shadow: 0 4px 12px var(--shadow-color); } .quick-theme-toggle:active { transform: scale(0.95); } .toggle-icon { position: absolute; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; color: var(--text-primary); } /* Dark mode: show sun icon (to switch to light) */ .sun-icon { opacity: 1; transform: rotate(0deg) scale(1); } .moon-icon { opacity: 0; transform: rotate(-90deg) scale(0.5); } /* Light mode: show moon icon (to switch to dark) */ [data-theme="light"] .sun-icon { opacity: 0; transform: rotate(90deg) scale(0.5); } [data-theme="light"] .moon-icon { opacity: 1; transform: rotate(0deg) scale(1); } /* Icon colors */ .sun-icon svg { stroke: #f59e0b; } .moon-icon svg { stroke: var(--accent-primary); } /* Light theme color scheme section */ .color-scheme-section { display: flex; align-items: center; gap: 10px; padding: 10px 0; } .color-scheme-label { font-size: 0.8rem; color: var(--text-label); font-weight: 500; } /* Light Theme Additional Overrides */ [data-theme="light"] #formdata > h1 { background-color: var(--accent-primary); } [data-theme="light"] .preset-card { background: linear-gradient(135deg, #f8f8fa 0%, #ffffff 100%); border-color: var(--border-primary); } [data-theme="light"] .simulator-card { background: linear-gradient(135deg, #f8f8fa 0%, #ffffff 100%); border-color: var(--accent-primary); } /* Transport buttons adapt smoothly */ [data-theme="light"] .transport-btn { box-shadow: 0 2px 8px var(--shadow-color); } /* Preset card field overrides for light mode */ [data-theme="light"] .preset-dropdown, [data-theme="light"] .preset-name-input { background-color: var(--bg-input); border-color: var(--border-secondary); color: var(--text-primary); } /* ADSR canvas background for light mode */ [data-theme="light"] #adsr-canvas { background: linear-gradient(180deg, #e8e8ec 0%, #f5f5f7 100%); } [data-theme="light"] .adsr-slider-group { background: #f0f0f2; border-color: var(--border-secondary); } /* Simulator container for light mode */ [data-theme="light"] .simulator-container { background: #e8e8ec; } /* Neighbour visualization for light mode */ [data-theme="light"] .neighbour-viz-container { background: rgba(0, 0, 0, 0.05); border-color: rgba(124, 58, 237, 0.2); } /* Smooth transitions for theme change */ .preset-card, .simulator-card, #adsr-canvas, .adsr-slider-group, .simulator-container, .neighbour-viz-container { transition: background 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { body, .param-card, .slider-value-input, input[type="range"], .check-btn, .selector-dropdown, .quick-theme-toggle, .toggle-icon, .sun-icon, .moon-icon, .preset-card, .simulator-card, #adsr-canvas, .adsr-slider-group, .simulator-container, .neighbour-viz-container { transition: none !important; } } /* ==================================== Preset Interpolation / Morph Feature ==================================== */ .interpolation-card { margin-top: 16px; } .interpolation-help { font-size: 0.8rem; line-height: 1.4; color: #666; margin-bottom: 12px; } /* Preset Selectors */ .interpolation-selectors { display: flex; flex-direction: column; gap: 12px; } .interpolation-endpoint { display: flex; flex-direction: column; gap: 6px; } .endpoint-label { font-weight: 600; color: var(--accent-primary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .interpolation-dropdown { height: 40px; font-size: 13px; } /* Morph Slider Section */ .morph-slider-section { margin-top: 16px; background: #0a0a0a; border: 1px solid #333; border-radius: 10px; padding: 12px; } .morph-labels { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .morph-label-a { color: #4ade80; } .morph-label-b { color: #f97316; } .morph-slider-group { display: flex; align-items: center; gap: 8px; } .morph-slider { flex: 1; height: 8px; -webkit-appearance: none; appearance: none; background: linear-gradient(to right, #4ade80, var(--accent-primary) 50%, #f97316); border-radius: 4px; outline: none; } .morph-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #fff; border: 3px solid var(--accent-primary); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: transform 0.2s; } .morph-slider::-webkit-slider-thumb:hover { transform: scale(1.1); } .morph-slider::-moz-range-thumb { width: 20px; height: 20px; background: #fff; border: 3px solid var(--accent-primary); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .morph-value { width: 50px; text-align: center; } .morph-unit { color: #888; font-size: 12px; } /* Morph Status */ .morph-status { text-align: center; padding: 10px; background: #0a0a0a; border-radius: 6px; color: #888; font-size: 12px; margin-top: 12px; } .morph-status.ready { color: #4ade80; } .morph-status.animating { color: var(--accent-primary); } /* Morph Actions */ .morph-actions { display: flex; justify-content: center; gap: 8px; margin-top: 12px; } .morph-action-btn { padding: 8px 14px; background: #1a1a2e; border: 1px solid #333; border-radius: 6px; color: #fff; font-weight: 500; font-size: 12px; cursor: pointer; transition: all 0.2s; } .morph-action-btn:hover { border-color: var(--accent-primary); background: #252547; } .morph-action-btn.animate { background: linear-gradient(135deg, var(--accent-primary) 0%, #6b4fcf 100%); border: none; } .morph-action-btn.animate:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(242, 239, 233, 0.3); } .morph-action-btn.animate.active { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); } /* Morph Rate Section */ .morph-rate-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-secondary); display: flex; flex-direction: column; gap: 8px; } .morph-rate-row { display: grid; grid-template-columns: auto 1fr 60px; gap: 8px; align-items: center; } .morph-rate-row label { font-size: 0.8rem; color: var(--text-label); white-space: nowrap; } .morph-rate-row .slider-value-input { width: 60px; height: 30px; font-size: 0.8rem; } .morph-bpm-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .morph-bpm-beats { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary); } .morph-bpm-beats .beats-selector { height: 30px; font-size: 0.8rem; padding: 0 6px; } /* Life Length BPM Sync */ .life-sync-row { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; } .life-sync-beats { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-secondary); } .life-sync-beats label { font-size: 0.8rem; color: var(--text-label); } .life-sync-beats .beats-selector { height: 34px; font-size: 0.85rem; } .life-sync-duration { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; } /* Preset Delete Button */ .preset-load-row { display: flex; gap: 6px; align-items: center; } .preset-load-row .preset-dropdown { flex: 1; } .preset-btn.delete { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border-secondary); border-radius: 6px; color: #ef4444; font-size: 14px; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .preset-btn.delete:hover { background: rgba(239, 68, 68, 0.15); border-color: #ef4444; } /* Responsive */ @media (max-width: 600px) { .morph-actions { flex-wrap: wrap; } .morph-action-btn { flex: 1; min-width: 60px; } }