/* =============================================================================
AmbiMix Studio — full stylesheet
============================================================================= */
/* =============================================================================
AURORA DESIGN TOKENS (oklch, dark default)
Single source of truth for all colours. Legacy aliases below preserve
compatibility with studio CSS written before the redesign.
============================================================================= */
:root {
/* — New Aurora tokens — */
--bg: oklch(0.16 0.02 250);
--bg-2: oklch(0.19 0.02 250);
--bg-3: oklch(0.23 0.025 250);
--line: oklch(0.30 0.02 250);
--line-2: oklch(0.40 0.02 250);
--fg: oklch(0.96 0.01 90);
--fg-dim: oklch(0.74 0.02 250);
--fg-mute: oklch(0.55 0.02 250);
--accent: oklch(0.80 0.13 75); /* amber — play, brand, primary CTA */
--accent-2: oklch(0.78 0.13 210); /* cyan — waveforms, spectrum */
--good: oklch(0.78 0.13 155);
/* — Legacy aliases (kept so existing studio CSS compiles unchanged) — */
--bg-deep: var(--bg);
--bg-soft: var(--bg-2);
--bg-elevated: var(--bg-3);
--bg-track: oklch(0.14 0.02 250);
--bg-track-alt: oklch(0.17 0.02 250);
--ink: var(--fg);
--ink-soft: var(--fg-dim);
--ink-faint: var(--fg-mute);
--ink-dim: oklch(0.40 0.02 250);
--amber: var(--accent);
--amber-bright: oklch(0.86 0.13 75);
--amber-deep: oklch(0.55 0.13 75);
--teal: var(--accent-2);
--line-strong: var(--line-2);
--red: oklch(0.65 0.18 25);
--green: var(--good);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--fg);
font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-feature-settings: 'ss01', 'cv11';
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-weight: 400;
font-size: 13px;
line-height: 1.4;
/* 100vh on iOS counts the URL bar height as VISIBLE viewport even though
it overlays the bottom — content gets hidden under the bar. 100dvh
reflects the actually-visible viewport. Keep 100vh as a fallback for
old Safari (< iOS 15.4). */
height: 100vh;
height: 100dvh;
overflow: hidden;
user-select: none;
}
/* Mono font helper — replaces Manrope/JetBrains-Mono callsites incrementally. */
.mono, body .mono {
font-family: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;
font-feature-settings: 'ss02', 'zero';
}
/* Aurora redesign provides a single grain layer via `.grain` (z-index −1,
below content). The old `body::before` overlay sat at z-index 999 ABOVE
content with a duplicate noise SVG — removed to avoid stacking two
slightly-different grain textures on top of each other. */
.app {
display: grid;
grid-template-rows: 60px 1fr 140px;
height: 100vh;
height: 100dvh;
}
.app.hidden { display: none; } /* hidden until "Open studio" reveals it */
/* =============================================================================
AURORA ATMOSPHERIC LAYERS — fixed behind everything, decorative only.
Disabled under prefers-reduced-motion to respect OS accessibility prefs.
============================================================================= */
.aurora {
position: fixed; inset: 0; z-index: -1; pointer-events: none;
overflow: hidden;
}
.aurora::before, .aurora::after {
content: ''; position: absolute; border-radius: 50%;
filter: blur(120px); opacity: 0.35;
}
.aurora::before {
width: 60vw; height: 60vw; top: -20vw; left: -10vw;
background: oklch(0.35 0.15 260);
}
.aurora::after {
width: 50vw; height: 50vw; top: 30vh; right: -15vw;
background: oklch(0.40 0.13 75);
}
.grain {
position: fixed; inset: 0; z-index: -1; pointer-events: none;
opacity: 0.05; mix-blend-mode: overlay;
background-image:
url("data:image/svg+xml;utf8,");
}
@media (prefers-reduced-motion: reduce) {
.aurora { display: none; }
}
/* =============================================================================
TOP BAR
============================================================================= */
.topbar {
display: flex;
align-items: center;
padding: 0 20px;
background: var(--bg-soft);
border-bottom: 1px solid var(--line);
gap: 24px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
padding-right: 20px;
border-right: 1px solid var(--line);
height: 60px;
}
/* Wordmark + URL stack vertically; the dot sits to their left, centred.
align-items:center horizontally centres the shorter URL under the wider
"AmbiMix Studio" wordmark. */
.brand-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2px;
}
.brand-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--amber-bright);
box-shadow: 0 0 12px var(--amber);
animation: pulse 3s ease-in-out infinite;
}
/* Wordmark — scaled-down twin of the video-intro hook title
(.render-hook-title): "AmbiMix" in fg, "Studio" with the vertical amber
gradient. Same font / weight / gradient so the studio brand reads as the
same logo viewers see in the YouTube intro. */
.brand-name {
font-family: 'Geist', sans-serif;
font-weight: 600;
font-size: 22px;
letter-spacing: -0.035em;
line-height: 1;
white-space: nowrap;
color: var(--fg);
}
.brand-name em {
font-style: normal;
margin-left: 3px;
background: linear-gradient(180deg, var(--accent) 0%, color-mix(in oklch, var(--accent) 60%, var(--fg)) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Site URL under the wordmark — mirrors the video-intro URL line
(.render-hook-url / .render-wm-url): mono, amber, wide tracking. */
.brand-url {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 10px;
letter-spacing: 0.08em;
color: var(--accent);
line-height: 1;
}
@keyframes pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
.mix-name {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.mix-name-label {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 9px;
letter-spacing: 0.2em;
color: var(--ink-faint);
text-transform: uppercase;
}
.mix-name-title {
font-family: 'Geist', sans-serif;
font-weight: 500;
font-size: 18px;
letter-spacing: -0.005em;
color: var(--ink);
}
.mix-name-title .seed {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 11px;
font-style: normal;
color: var(--amber);
margin-left: 8px;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
transition: background 0.15s;
}
.mix-name-title .seed:hover { background: rgba(212, 165, 116, 0.15); }
.mix-name-title .seed::after { content: ' ↵'; opacity: 0.4; font-size: 9px; }
.transport {
display: flex;
align-items: center;
gap: 8px;
padding: 0 16px;
border-left: 1px solid var(--line);
border-right: 1px solid var(--line);
height: 60px;
}
.t-btn {
width: 36px; height: 36px;
border-radius: 8px;
background: var(--bg-elevated);
border: 1px solid var(--line);
color: var(--ink);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
font-size: 13px;
font-family: inherit;
}
.t-btn:hover { background: var(--bg-track); border-color: var(--line-strong); }
.t-btn.primary {
background: var(--amber);
color: var(--bg-deep);
border-color: var(--amber);
width: 44px; height: 44px;
font-size: 16px;
}
.t-btn.primary:hover { background: var(--amber-bright); }
.t-btn.active {
background: var(--amber-deep);
color: var(--amber-bright);
border-color: var(--amber);
}
/* Disabled — used by undo/redo when the corresponding stack is empty. */
.t-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.t-btn:disabled:hover {
background: var(--bg-elevated);
border-color: var(--line);
color: var(--ink);
}
.time-display {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 22px;
font-weight: 500;
letter-spacing: 0.05em;
color: var(--ink);
padding: 0 16px;
border-right: 1px solid var(--line);
height: 60px;
display: flex;
align-items: center;
min-width: 130px;
}
.time-display .ms {
color: var(--ink-faint);
font-size: 16px;
margin-left: 4px;
}
.meta-stack {
display: flex;
gap: 24px;
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 11px;
color: var(--ink-soft);
}
.meta-item { display: flex; flex-direction: column; gap: 2px; }
.meta-label {
font-size: 9px;
letter-spacing: 0.2em;
color: var(--ink-faint);
text-transform: uppercase;
}
.meta-value { font-size: 13px; color: var(--ink); font-weight: 500; }
.meta-value.accent { color: var(--amber-bright); }
/* Click-to-edit duration button — used for the timeline length display in
the topbar. Looks like a .meta-value with a dashed underline hint that
it's interactive (set explicit length); the timeline ALSO auto-extends
when clips are dragged past the current end, so this is a power-user
override rather than a required step. */
.meta-value-btn {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: none;
padding: 0;
font-family: inherit;
font-size: 13px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
text-align: left;
border-bottom: 1px dashed var(--ink-faint);
transition: color 0.15s, border-color 0.15s;
}
.meta-value-btn:hover {
color: var(--amber-bright);
border-bottom-color: var(--amber);
}
.meta-value-btn:focus-visible {
outline: none;
color: var(--amber-bright);
border-bottom-color: var(--amber);
/* Subtle glow ring — matches the topbar dark aesthetic better than the
browser default (which is a light blue rectangle on dark UI). */
box-shadow: 0 0 0 2px rgba(245, 180, 80, 0.35);
border-radius: 2px;
}
.randomize-btn {
padding: 10px 18px;
background: linear-gradient(135deg, var(--amber-deep), var(--amber));
color: var(--bg-deep);
border: none;
border-radius: 8px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
text-transform: uppercase;
}
.randomize-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(212, 165, 116, 0.3);
}
.randomize-btn:active { transform: translateY(0); }
.randomize-btn .icon { font-size: 14px; }
.library-btn {
margin-left: auto;
padding: 10px 16px;
background: var(--bg-elevated);
color: var(--ink);
border: 1px solid var(--line-strong);
border-radius: 8px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
text-transform: uppercase;
}
/* Only the first library-btn pushes itself right; subsequent ones cluster via topbar gap. */
.library-btn + .library-btn { margin-left: 0; }
.library-btn:hover {
background: var(--bg-track);
border-color: var(--amber);
color: var(--amber-bright);
}
.library-btn .icon { font-size: 14px; }
.library-btn.compact {
padding: 10px 12px;
min-width: 38px;
justify-content: center;
}
.library-btn.compact .icon { font-size: 15px; font-weight: 700; }
/* Loading state — used by the Export button while OfflineAudioContext is
rendering. The icon spins; clicks are blocked. */
.library-btn.rendering {
pointer-events: none;
opacity: 0.65;
}
.library-btn.rendering .icon {
display: inline-block;
animation: btnSpin 1s linear infinite;
}
@keyframes btnSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* =============================================================================
EXPORT DROPDOWN — split button (main = last-used format, chev = format picker)
============================================================================= */
/* Wrapper sits where the original single Export button used to — no auto
margin override on the inner buttons so they hug each other.
The trailing rule cancels `margin-left: auto` on the next .library-btn
sibling (without it, `.library-btn + .library-btn { margin-left: 0 }`
in the base rule no longer matches because the dropdown div breaks
adjacency, and the next button would push itself right with auto). */
.export-dropdown { position: relative; display: inline-flex; gap: 1px; }
.export-dropdown .library-btn { margin-left: 0; }
.export-dropdown + .library-btn { margin-left: 0; }
.export-dropdown .export-main {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.export-dropdown .export-chev {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
min-width: 28px;
padding: 10px 8px;
font-size: 10px;
}
.export-dropdown.open .export-chev { background: var(--bg-elevated); }
.export-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: var(--bg-soft);
border: 1px solid var(--line-strong);
border-radius: 8px;
display: none;
z-index: 1100;
min-width: 200px;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
overflow: hidden;
}
.export-dropdown.open .export-menu { display: block; }
.export-option {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
width: 100%;
padding: 10px 14px;
background: transparent;
border: none;
color: var(--ink);
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background 0.12s;
}
.export-option:hover { background: var(--bg-elevated); }
.export-option-format {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 12px;
letter-spacing: 0.18em;
color: var(--amber);
}
.export-option-desc {
font-size: 11px;
color: var(--ink-faint);
letter-spacing: 0.02em;
}
/* =============================================================================
LANGUAGE DROPDOWN
============================================================================= */
.lang-dropdown { position: relative; }
.lang-current { min-width: 56px; }
.lang-current .chev {
font-size: 9px;
opacity: 0.65;
margin-left: 2px;
}
.lang-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: var(--bg-soft);
border: 1px solid var(--line-strong);
border-radius: 8px;
display: none;
z-index: 1100;
min-width: 130px;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
overflow: hidden;
}
.lang-dropdown.open .lang-menu { display: block; }
.lang-option {
display: block;
width: 100%;
padding: 9px 14px;
background: transparent;
border: none;
color: var(--ink);
cursor: pointer;
text-align: left;
font-family: inherit;
font-size: 12px;
letter-spacing: 0.04em;
text-decoration: none; /* anchor reset — server renders as */
box-sizing: border-box;
transition: background 0.12s;
}
.lang-option:hover { background: var(--bg-elevated); }
.lang-option.active { color: var(--amber-bright); }
.lang-option .lang-code {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 10px;
letter-spacing: 0.18em;
color: var(--ink-faint);
text-transform: uppercase;
margin-right: 8px;
}
.lang-option.active .lang-code { color: var(--amber); }
/* =============================================================================
MODAL OVERLAYS (preset library, sound library, help) — shared shell
============================================================================= */
.library-overlay {
position: fixed;
inset: 0;
background: rgba(10, 12, 18, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.library-overlay.open {
opacity: 1;
pointer-events: all;
}
.library-panel {
background: var(--bg-soft);
border: 1px solid var(--line-strong);
border-radius: 16px;
width: 880px;
max-width: 92vw;
max-height: 84vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
transform: translateY(20px);
transition: transform 0.25s ease;
}
.library-overlay.open .library-panel { transform: translateY(0); }
.library-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 28px;
border-bottom: 1px solid var(--line);
}
.library-header h3 {
font-family: 'Geist', sans-serif;
font-size: 24px;
font-weight: normal;
letter-spacing: -0.01em;
}
.library-header .lib-sub {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 10px;
letter-spacing: 0.2em;
color: var(--ink-faint);
text-transform: uppercase;
margin-top: 2px;
}
.library-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.library-close {
width: 34px; height: 34px;
background: transparent;
border: 1px solid var(--line);
color: var(--ink-soft);
border-radius: 8px;
cursor: pointer;
font-size: 18px;
font-family: inherit;
transition: all 0.15s;
}
.library-close:hover { color: var(--ink); border-color: var(--line-strong); }
/* =============================================================================
PRESET LIBRARY — grid of mix cards
============================================================================= */
.library-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding: 22px 28px 28px;
overflow-y: auto;
}
@media (max-width: 720px) {
.library-grid { grid-template-columns: repeat(2, 1fr); }
}
.preset-card {
background: var(--bg-deep);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px 16px 14px;
cursor: pointer;
transition: all 0.2s;
text-align: left;
font-family: inherit;
color: var(--ink);
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
overflow: hidden;
}
.preset-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--card-accent, var(--amber));
opacity: 0.6;
transition: opacity 0.2s;
}
.preset-card:hover {
border-color: var(--card-accent, var(--amber));
background: var(--bg-elevated);
transform: translateY(-2px);
}
.preset-card:hover::before { opacity: 1; box-shadow: 0 0 10px var(--card-accent, var(--amber)); }
.preset-name {
font-family: 'Geist', sans-serif;
font-size: 19px;
color: var(--ink);
line-height: 1.1;
}
.preset-sub {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 9px;
letter-spacing: 0.18em;
color: var(--ink-faint);
text-transform: uppercase;
}
.preset-dots {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 4px;
}
.preset-dot {
width: 9px; height: 9px;
border-radius: 50%;
box-shadow: 0 0 6px currentColor;
}
.preset-tags {
font-family: 'Geist', sans-serif;
font-size: 11px;
color: var(--ink-soft);
line-height: 1.4;
}
/* =============================================================================
HELP OVERLAY — keyboard shortcuts and tips
============================================================================= */
.help-panel { width: 760px; }
.help-body {
padding: 22px 28px 30px;
overflow-y: auto;
max-height: 70vh;
}
.help-intro {
font-family: 'Geist', sans-serif;
font-size: 16px;
color: var(--ink);
line-height: 1.55;
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.help-intro b { font-style: normal; color: var(--amber-bright); }
.help-section { margin-bottom: 22px; }
.help-section:last-child { margin-bottom: 0; }
.help-section-title {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--line);
}
.help-row {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 5px 0;
}
.help-keys {
flex-shrink: 0;
min-width: 200px;
display: flex;
gap: 4px;
flex-wrap: wrap;
align-items: center;
}
.help-key {
display: inline-block;
padding: 3px 8px;
background: var(--bg-deep);
border: 1px solid var(--line-strong);
border-bottom-width: 2px;
border-radius: 4px;
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 11px;
color: var(--ink);
white-space: nowrap;
line-height: 1.2;
}
.help-key.action {
background: rgba(212, 165, 116, 0.12);
border-color: var(--amber-deep);
color: var(--amber-bright);
}
.help-sep {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 11px;
color: var(--ink-faint);
padding: 0 2px;
}
.help-desc {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.4;
flex: 1;
padding-top: 3px;
}
.help-desc b { color: var(--ink); font-weight: 500; }
/* =============================================================================
SOUND LIBRARY — searchable list grouped by category
============================================================================= */
.sound-library-panel { width: 720px; }
.sound-search-bar {
padding: 14px 24px;
border-bottom: 1px solid var(--line);
}
.sound-search-input {
width: 100%;
background: var(--bg-deep);
border: 1px solid var(--line);
border-radius: 6px;
padding: 9px 12px;
color: var(--ink);
font-family: inherit;
font-size: 13px;
outline: none;
transition: border-color 0.15s;
}
.sound-search-input:focus { border-color: var(--amber); }
.sound-search-input::placeholder { color: var(--ink-faint); }
.sound-library-list {
overflow-y: auto;
max-height: 64vh;
padding-bottom: 12px;
}
.sound-cat-header {
padding: 14px 24px 6px;
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-faint);
background: var(--bg-soft);
position: sticky;
top: 0;
z-index: 2;
border-bottom: 1px solid var(--line);
}
.sound-row {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 24px;
cursor: pointer;
transition: background 0.12s;
border-left: 3px solid transparent;
}
.sound-row:hover {
background: var(--bg-elevated);
border-left-color: var(--row-color, var(--amber));
}
.sound-row.in-mix { opacity: 0.55; cursor: default; }
.sound-row.in-mix:hover { background: transparent; border-left-color: transparent; }
.sound-row-dot {
width: 10px; height: 10px;
border-radius: 50%;
box-shadow: 0 0 6px currentColor;
flex-shrink: 0;
}
.sound-row-name { font-size: 13px; color: var(--ink); flex: 1; min-width: 0; }
.sound-row-cat {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 10px;
color: var(--ink-faint);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-right: 12px;
}
.sound-row-status {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 10px;
color: var(--ink-faint);
text-transform: uppercase;
letter-spacing: 0.15em;
}
.sound-row.in-mix .sound-row-status { color: var(--green); }
/* =============================================================================
PROJECTS OVERLAY — list of user-saved mixes (localStorage) + import / export
============================================================================= */
.projects-panel { width: 760px; }
.projects-toolbar {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border-bottom: 1px solid var(--line);
background: var(--bg);
}
.project-action-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
background: var(--bg-elevated);
border: 1px solid var(--line-strong);
border-radius: 8px;
color: var(--ink);
font-family: inherit;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.18s;
}
.project-action-btn:hover {
background: var(--bg-track);
border-color: var(--amber);
color: var(--amber-bright);
}
.project-action-btn.primary { border-color: var(--amber); color: var(--amber-bright); }
.project-action-btn .icon { font-size: 14px; }
.projects-list {
flex: 1;
overflow-y: auto;
padding: 8px 0;
}
.projects-empty {
padding: 40px 28px;
text-align: center;
color: var(--ink-faint);
font-size: 13px;
letter-spacing: 0.02em;
}
.project-row {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 24px;
border-left: 3px solid transparent;
transition: background 0.12s, border-color 0.12s;
}
.project-row:hover {
background: var(--bg-elevated);
border-left-color: var(--amber);
}
.project-info { flex: 1; min-width: 0; cursor: pointer; }
.project-name {
font-size: 14px;
color: var(--ink);
font-weight: 500;
margin-bottom: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-meta {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 10px;
color: var(--ink-faint);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.project-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.project-row-btn {
width: 30px; height: 30px;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: var(--ink-faint);
cursor: pointer;
font-size: 14px;
transition: all 0.15s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.project-row-btn:hover {
border-color: var(--line-strong);
background: var(--bg-track);
color: var(--ink);
}
.project-row-btn.delete:hover {
border-color: var(--red, #d44);
color: var(--red, #d44);
}
/* =============================================================================
TRACK CONTROLS — header column, delete button
============================================================================= */
.delete-track-btn {
width: 22px; height: 22px;
border-radius: 4px;
background: var(--bg-track);
border: 1px solid var(--line);
color: var(--ink-faint);
font-family: inherit;
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: all 0.15s;
padding: 0;
}
.delete-track-btn:hover {
color: var(--red);
border-color: var(--red);
}
/* =============================================================================
CLIP EDITING — selection, drag, resize, drag-to-create ghost
============================================================================= */
.clip { cursor: grab; }
.clip.dragging { cursor: grabbing; opacity: 0.85; }
.clip.selected {
outline: 2px solid var(--amber-bright);
outline-offset: -2px;
z-index: 8;
box-shadow: 0 0 14px rgba(232, 184, 124, 0.45);
}
.clip-resize {
position: absolute;
top: 0; bottom: 0;
width: 7px;
cursor: ew-resize;
z-index: 5;
background: transparent;
transition: background 0.12s;
}
.clip-resize.left { left: 0; }
.clip-resize.right { right: 0; }
.clip-resize:hover,
.clip.selected .clip-resize {
background: linear-gradient(to right, transparent, var(--amber-bright));
}
.clip-resize.left:hover,
.clip.selected .clip-resize.left {
background: linear-gradient(to left, transparent, var(--amber-bright));
}
/* Ghost preview while drag-creating a clip on an empty lane */
.clip-ghost {
position: absolute;
top: 8px; bottom: 8px;
background: rgba(232, 184, 124, 0.22);
border: 1px dashed var(--amber-bright);
border-radius: 5px;
pointer-events: none;
z-index: 6;
}
/* Track header reordering via drag */
.track-row-top { cursor: grab; }
.track-row-top:active { cursor: grabbing; }
.track-header.dragging-track {
z-index: 20;
opacity: 0.85;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.track-drop-line {
position: absolute;
left: 0; right: 0;
height: 2px;
background: var(--amber-bright);
box-shadow: 0 0 8px var(--amber-bright);
pointer-events: none;
z-index: 19;
display: none;
}
.track-drop-line.show { display: block; }
/* =============================================================================
MAIN AREA — track headers + timeline
============================================================================= */
.main {
display: grid;
grid-template-columns: 240px 1fr;
overflow: hidden;
background: var(--bg-deep);
}
.track-headers {
background: var(--bg-soft);
border-right: 1px solid var(--line);
overflow-y: auto;
display: flex;
flex-direction: column;
}
.ruler-corner {
height: 36px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px;
background: var(--bg-elevated);
}
.ruler-corner-label {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 9px;
letter-spacing: 0.2em;
color: var(--ink-faint);
text-transform: uppercase;
}
.density-control {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 10px;
color: var(--ink-soft);
}
.density-control input {
width: 50px;
cursor: pointer;
accent-color: var(--amber);
}
.track-header {
height: 104px;
border-bottom: 1px solid var(--line);
padding: 10px 14px;
display: flex;
flex-direction: column;
gap: 4px;
background: var(--bg-soft);
position: relative;
transition: background 0.2s;
}
.track-header.playing { background: var(--bg-elevated); }
.track-header.playing::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--track-color);
box-shadow: 0 0 12px var(--track-color);
}
.track-row-top {
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
}
.track-name {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 13px;
}
.track-color-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--track-color);
box-shadow: 0 0 8px var(--track-color);
flex-shrink: 0;
}
.track-buttons { display: flex; gap: 4px; }
.ms-btn {
width: 22px; height: 22px;
border-radius: 4px;
background: var(--bg-track);
border: 1px solid var(--line);
color: var(--ink-soft);
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.ms-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.ms-btn.mute.active {
background: var(--red);
color: var(--bg-deep);
border-color: var(--red);
}
.ms-btn.solo.active {
background: var(--amber);
color: var(--bg-deep);
border-color: var(--amber);
}
.fader-row { display: flex; align-items: center; gap: 10px; }
.fader {
flex: 1;
height: 4px;
background: var(--bg-track);
border-radius: 2px;
position: relative;
cursor: pointer;
overflow: hidden;
}
.fader-fill {
height: 100%;
background: var(--track-color);
border-radius: 2px;
width: 75%;
transition: width 0.1s;
}
.fader-value {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 10px;
color: var(--ink-faint);
min-width: 32px;
text-align: right;
}
/* ============ PAN SLIDER (per-track L/R balance) ============ */
.pan-row {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 9px;
}
.pan-mini-label {
color: var(--ink-faint);
letter-spacing: 0.1em;
min-width: 22px;
}
.pan-slider {
flex: 1;
height: 4px;
background: var(--bg-track);
border-radius: 2px;
position: relative;
cursor: ew-resize;
}
/* Centre detent: a thin tick rising slightly above/below the slider */
.pan-slider::before {
content: '';
position: absolute;
left: 50%;
top: -3px;
bottom: -3px;
width: 1px;
background: var(--line-strong);
pointer-events: none;
}
.pan-indicator {
position: absolute;
top: 50%;
width: 10px;
height: 10px;
background: var(--track-color);
border-radius: 50%;
left: 50%;
margin-left: -5px;
margin-top: -5px;
box-shadow: 0 0 6px var(--track-color);
transition: left 0.06s ease-out;
pointer-events: none;
}
.pan-value {
color: var(--ink-faint);
min-width: 32px;
text-align: right;
}
/* Per-track auto-pan toggle — small button next to the slider. When active
the LFO sweeps the pan during playback and the slider visibly follows. */
.pan-auto-btn {
width: 20px; height: 14px;
border-radius: 3px;
background: var(--bg-track);
border: 1px solid var(--line);
color: var(--ink-faint);
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 11px;
line-height: 1;
cursor: pointer;
padding: 0;
transition: all 0.15s;
flex-shrink: 0;
}
.pan-auto-btn:hover {
color: var(--ink);
border-color: var(--line-strong);
}
.pan-auto-btn.active {
background: rgba(212, 165, 116, 0.18);
border-color: var(--amber);
color: var(--amber-bright);
box-shadow: 0 0 6px rgba(212, 165, 116, 0.35);
}
/* Subtle pulsing dot when active, to hint the slider is moving. */
.pan-auto-btn.active::after { content: ''; }
@keyframes panAutoPulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
.pan-auto-btn.active { animation: panAutoPulse 2s ease-in-out infinite; }
/* ============ REVERB SEND (per-track wet send into the shared reverb bus) ============ */
.reverb-row {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 9px;
}
.reverb-mini-label {
color: var(--ink-faint);
letter-spacing: 0.1em;
min-width: 22px;
}
.reverb-slider {
flex: 1;
height: 4px;
background: var(--bg-track);
border-radius: 2px;
position: relative;
cursor: pointer;
overflow: hidden;
}
.reverb-fill {
height: 100%;
/* teal — distinct from the track-coloured volume fader and the per-track pan dot */
background: var(--teal);
border-radius: 2px;
width: 0%;
transition: width 0.08s;
}
.reverb-value {
color: var(--ink-faint);
min-width: 32px;
text-align: right;
}
/* ============ MASTER ROOM SIZE (single global reverb decay) ============ */
.master-reverb-row {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 9px;
}
.master-reverb-label {
font-size: 9px;
letter-spacing: 0.15em;
color: var(--ink-faint);
text-transform: uppercase;
min-width: 72px;
}
.master-reverb-slider {
flex: 1;
height: 5px;
background: var(--bg-track);
border-radius: 3px;
position: relative;
cursor: pointer;
overflow: hidden;
}
.master-reverb-fill {
height: 100%;
background: linear-gradient(90deg, var(--teal), color-mix(in srgb, var(--teal) 70%, var(--amber)));
border-radius: 3px;
width: 50%;
transition: width 0.08s;
}
.master-reverb-value {
font-size: 11px;
color: var(--ink);
font-weight: 500;
min-width: 42px;
text-align: right;
}
/* ============ MASTER AUTO-PAN ALL (one-click toggle for every track) ============ */
.master-auto-pan-row {
display: flex;
align-items: center;
gap: 10px;
}
.master-auto-pan-btn {
width: 34px;
height: 18px;
border-radius: 3px;
background: var(--bg-track);
border: 1px solid var(--line);
color: var(--ink-faint);
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 13px;
line-height: 1;
cursor: pointer;
padding: 0;
transition: all 0.15s;
flex-shrink: 0;
}
.master-auto-pan-btn:hover {
color: var(--ink);
border-color: var(--line-strong);
}
.master-auto-pan-btn.active {
background: rgba(212, 165, 116, 0.18);
border-color: var(--amber);
color: var(--amber-bright);
box-shadow: 0 0 8px rgba(212, 165, 116, 0.40);
/* Re-use the same pulse animation as per-track auto-pan buttons */
animation: panAutoPulse 2s ease-in-out infinite;
}
.timeline-area {
overflow-x: auto;
overflow-y: auto;
position: relative;
background: var(--bg-track);
}
.timeline-content {
position: relative;
/* Width is set in JS (initRuler / applyTimelineDuration) to match the
timeline length — lanes + ruler share the same dynamic extent. No
min-width here: when the timeline is short enough to fit the viewport,
anything past the lane's right edge is the parent's bg-track color
(which is what the user expects — empty space beyond the timeline). */
min-height: 100%;
}
.ruler {
height: 36px;
background: var(--bg-elevated);
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: flex-end;
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 10px;
color: var(--ink-faint);
overflow: hidden;
/* Click/drag on the ruler seeks the playhead — the I-beam-ish cursor hints at this. */
cursor: text;
}
.ruler-mark, .ruler-label { pointer-events: none; }
.ruler-mark {
position: absolute;
bottom: 0;
width: 1px;
background: var(--line-strong);
}
.ruler-mark.major { height: 12px; }
.ruler-mark.minor { height: 6px; background: var(--line); }
.ruler-label {
position: absolute;
bottom: 14px;
transform: translateX(-50%);
font-size: 10px;
color: var(--ink-soft);
letter-spacing: 0.05em;
}
.track-lane {
height: 104px;
border-bottom: 1px solid var(--line);
position: relative;
background: var(--bg-track);
}
.track-lane:nth-child(odd) { background: var(--bg-track-alt); }
.track-lane.muted { opacity: 0.3; }
.grid-line {
position: absolute;
top: 0; bottom: 0;
width: 1px;
background: var(--line);
pointer-events: none;
}
.grid-line.major { background: var(--line-strong); }
.clip {
position: absolute;
top: 6px;
bottom: 6px;
border-radius: 4px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--track-color) 60%, transparent),
color-mix(in srgb, var(--track-color) 30%, transparent)
);
border: 1px solid var(--track-color);
overflow: hidden;
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
transform-origin: left center;
}
.clip::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
color-mix(in srgb, var(--track-color) 40%, transparent) 0%,
transparent 6px,
transparent calc(100% - 6px),
color-mix(in srgb, var(--track-color) 40%, transparent) 100%
);
pointer-events: none;
}
.clip-label {
position: absolute;
top: 4px;
left: 8px;
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 9px;
color: var(--ink);
opacity: 0.7;
letter-spacing: 0.05em;
pointer-events: none;
z-index: 2;
}
.clip-waveform {
position: absolute;
inset: 16px 4px 4px 4px;
pointer-events: none;
}
.clip-waveform path { fill: var(--track-color); opacity: 0.85; }
.clip.appearing { animation: clipAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
@keyframes clipAppear {
from { transform: scaleX(0) translateY(-4px); opacity: 0; }
to { transform: scaleX(1) translateY(0); opacity: 1; }
}
.playhead {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: var(--amber-bright);
pointer-events: none;
z-index: 20;
box-shadow: 0 0 12px var(--amber);
left: 0;
}
.playhead::before {
content: '';
position: absolute;
top: 0;
left: -7px;
width: 16px;
height: 16px;
background: var(--amber-bright);
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* =============================================================================
MASTER SECTION
============================================================================= */
.master {
background: var(--bg-soft);
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: 240px 1fr 240px;
height: 140px;
}
.master-left {
padding: 16px 14px;
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 12px;
}
.master-label {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 9px;
letter-spacing: 0.2em;
color: var(--ink-faint);
text-transform: uppercase;
}
.master-fader-row { display: flex; align-items: center; gap: 12px; }
.master-fader {
flex: 1;
height: 6px;
background: var(--bg-track);
border-radius: 3px;
position: relative;
cursor: pointer;
overflow: hidden;
}
.master-fader-fill {
height: 100%;
background: linear-gradient(90deg, var(--amber-deep), var(--amber-bright));
border-radius: 3px;
width: 70%;
}
.master-fader-value {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 12px;
color: var(--ink);
font-weight: 500;
min-width: 48px;
text-align: right;
}
.stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: auto;
}
.stat { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; }
.stat-label {
font-size: 9px;
letter-spacing: 0.15em;
color: var(--ink-faint);
text-transform: uppercase;
margin-bottom: 2px;
}
.stat-value { font-size: 14px; color: var(--ink); font-weight: 500; }
.stat-value.accent { color: var(--amber); }
#statSeed { cursor: pointer; transition: color 0.15s; }
#statSeed:hover { color: var(--amber-bright); }
.master-center {
padding: 14px 20px;
border-right: 1px solid var(--line);
position: relative;
overflow: hidden;
}
.visualizer-label {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 9px;
letter-spacing: 0.2em;
color: var(--ink-faint);
text-transform: uppercase;
position: absolute;
top: 14px;
left: 20px;
z-index: 2;
}
.visualizer {
position: absolute;
inset: 30px 20px 14px 20px;
display: flex;
align-items: flex-end;
gap: 2px;
}
.viz-bar {
flex: 1;
background: linear-gradient(180deg, var(--amber-bright), var(--amber-deep));
border-radius: 1px;
min-height: 2px;
transition: height 0.08s ease-out;
}
.master-right {
padding: 16px 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.vu-row {
display: flex;
gap: 8px;
flex: 1;
align-items: stretch;
}
.vu-channel {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.vu-channel-label {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 9px;
color: var(--ink-faint);
text-align: center;
letter-spacing: 0.1em;
}
.vu-meter {
flex: 1;
background: var(--bg-track);
border-radius: 4px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column-reverse;
}
.vu-fill {
width: 100%;
background: linear-gradient(0deg, var(--green) 0%, var(--green) 60%, var(--amber) 75%, var(--red) 90%);
transition: height 0.05s ease-out;
height: 0%;
}
/* =============================================================================
CLICK PROMPT OVERLAY
============================================================================= */
.click-prompt {
position: fixed;
inset: 0;
background: rgba(10, 12, 18, 0.94);
backdrop-filter: blur(20px);
z-index: 1000;
overflow-y: auto;
transition: opacity 0.4s;
}
.click-prompt.hidden {
opacity: 0;
pointer-events: none;
}
.click-prompt-scroll {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
/* Safe-area padding for iPhone notch / dynamic island, home-indicator,
AND landscape-orientation side notches (left/right) so hero copy
doesn't butt up against the camera cutout in landscape. */
padding:
max(28px, env(safe-area-inset-top))
max(24px, env(safe-area-inset-right))
max(80px, env(safe-area-inset-bottom))
max(24px, env(safe-area-inset-left));
gap: 40px;
}
/* Let users select/copy the SEO body — body has `user-select: none` for the
studio chrome, but landing-page copy should be selectable for accessibility. */
.click-prompt-seo, .click-prompt-seo * {
user-select: text;
-webkit-user-select: text;
}
/* Language switcher in the click-prompt — indexable chips for
crawlers, also a usable widget for visitors. Active language is amber. */
.click-prompt-langs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
padding: 6px;
background: rgba(0,0,0,0.25);
border: 1px solid var(--line);
border-radius: 100px;
cursor: default;
}
.click-prompt-lang {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ink-faint);
padding: 6px 12px;
border-radius: 100px;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.click-prompt-lang:hover {
background: var(--bg-elevated);
color: var(--ink);
}
.click-prompt-lang.active {
background: var(--amber);
color: var(--bg-deep);
}
.click-prompt-lang.active:hover {
background: var(--amber-bright);
color: var(--bg-deep);
}
.click-prompt-content {
text-align: center;
max-width: 520px;
cursor: pointer;
}
.click-prompt-title {
font-family: 'Geist', sans-serif;
font-size: 56px;
font-weight: 400;
line-height: 1.05;
margin: 0 0 18px;
letter-spacing: -0.02em;
}
.click-prompt-title .amber { color: var(--amber-bright); }
.click-prompt-tagline {
color: var(--ink);
font-size: 17px;
line-height: 1.5;
margin: 0 0 14px;
}
.click-prompt p {
color: var(--ink-soft);
font-size: 14px;
line-height: 1.6;
margin: 0 0 28px;
}
.click-prompt-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 32px;
background: var(--amber);
color: var(--bg-deep);
border: none;
border-radius: 100px;
font-family: inherit;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.05em;
cursor: pointer;
text-transform: uppercase;
transition: transform 0.15s, box-shadow 0.15s;
}
.click-prompt-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(245, 180, 80, 0.35);
}
/* SEO / GEO content — what crawlers and first-time visitors read before
the studio opens. Centred, wider than the hero, muted typography so it
doesn't fight the call-to-action visually. */
.click-prompt-seo {
max-width: 760px;
width: 100%;
color: var(--ink-soft);
font-size: 14px;
line-height: 1.65;
cursor: default;
}
.click-prompt-seo .seo-section + .seo-section { margin-top: 36px; }
.click-prompt-seo h2 {
font-family: 'Geist', sans-serif;
font-size: 26px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
margin: 0 0 14px;
}
.click-prompt-seo p { margin: 0 0 12px; }
.click-prompt-seo strong { color: var(--ink); font-weight: 600; }
.click-prompt-seo .seo-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
counter-reset: seo-list;
}
.click-prompt-seo ol.seo-list { counter-reset: seo-list; }
.click-prompt-seo ol.seo-list li {
counter-increment: seo-list;
padding-left: 32px;
position: relative;
}
.click-prompt-seo ol.seo-list li::before {
content: counter(seo-list);
position: absolute;
left: 0; top: 0;
width: 22px; height: 22px;
background: var(--bg-elevated);
color: var(--amber);
border-radius: 50%;
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.click-prompt-seo ul.seo-list li {
padding-left: 22px;
position: relative;
}
.click-prompt-seo ul.seo-list li::before {
content: '·';
position: absolute;
left: 6px;
color: var(--amber);
font-size: 22px;
line-height: 1.2;
}
.seo-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 44px;
}
.seo-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 18px 12px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 12px;
}
.seo-stat-num {
font-family: 'Geist', sans-serif;
font-size: 34px;
line-height: 1;
color: var(--amber-bright);
}
.seo-stat-label {
font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-faint);
text-align: center;
}
.seo-faq { margin: 0; }
.seo-faq dt {
font-weight: 600;
color: var(--ink);
margin-top: 14px;
}
.seo-faq dt:first-child { margin-top: 0; }
.seo-faq dd {
margin: 4px 0 0;
padding-left: 0;
}
@media (max-width: 600px) {
.click-prompt-title { font-size: 42px; }
.click-prompt-tagline { font-size: 15px; }
.seo-stats { grid-template-columns: repeat(2, 1fr); }
.click-prompt-seo h2 { font-size: 22px; }
}
/* =============================================================================
SCROLLBARS
============================================================================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
background: var(--bg-elevated);
border-radius: 5px;
border: 2px solid var(--bg-deep);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-dim); }
/* =============================================================================
MOBILE / TABLET LAYOUT (≤ 768px)
The DAW is designed desktop-first — three grid columns of ≥ 240 px don't
fit a phone viewport. Mobile strategy:
• topbar WRAPS to 2-3 rows (not horizontal scroll — that would clip
lang/export dropdowns which open downward via position:absolute,
since overflow-x:auto forces overflow-y to also become non-visible)
• .app grid switches to auto-sized rows so topbar can grow freely
• track-headers narrow from 240 → 160 px to give the timeline breathing
room; faders + pan controls remain functional
• master section becomes horizontally scrollable (no popups inside);
visualiser hides at phone sizes — it's decorative, not critical
• landing-page (click-prompt) blocks shrink and the language switcher
wraps; SEO copy gains comfortable line-height for thumb scrolling
============================================================================= */
@media (max-width: 768px) {
/* The .app grid was `60px 1fr 140px` — fixed topbar height. With the
topbar now wrapping, switch to auto so it can grow to whatever height
its rows demand without clipping the main area. */
.app { grid-template-rows: auto 1fr auto; }
/* Topbar wraps to multiple rows. flex-wrap:wrap keeps dropdown menus
(.lang-menu, .export-menu) visible — they're position:absolute below
their button, and a non-clipping topbar lets them render naturally. */
.topbar {
gap: 10px;
padding: 8px 12px;
flex-wrap: wrap;
row-gap: 8px;
}
/* Brand stays visible but is more compact. Drop the fixed 60px height —
wrapping rows derive height from the tallest child, brand at 60 px
would push the row taller than other items need. */
.brand {
padding-right: 12px;
height: auto;
}
.brand-name { font-size: 18px; }
/* Mix-name + time-display fit more tightly. */
.mix-name { font-size: 11px; }
.time-display { font-size: 14px; }
/* Drop the meta-stack labels on mobile to save horizontal real estate —
the underlying values stay clickable, just no "duration / clips / mode"
labels next to them. */
.meta-stack { gap: 12px; }
.meta-label { display: none; }
/* Library/export/randomize buttons collapse to icon-only. Labels live in
`title` attributes already, so they're still discoverable on hover. */
.library-btn span:not(.icon):not(.chev):not(.export-option-format):not(.export-option-desc),
.randomize-btn span:not(.icon) {
display: none;
}
.library-btn, .randomize-btn { padding: 10px 12px; min-width: 38px; }
/* Main area — narrower track-headers, timeline gets the breathing room. */
.main { grid-template-columns: 160px 1fr; }
.track-headers { font-size: 11px; }
/* Master — 3 columns shrink and section becomes horizontally scrollable.
Safe to clip on the Y axis here: master has no absolute-positioned
popups (just sliders and meters, all inline). */
.master {
grid-template-columns: 200px 1fr 160px;
height: 130px;
overflow-x: auto;
overflow-y: hidden;
}
.master-left, .master-right { padding: 12px 10px; }
.master-center { padding: 10px 12px; }
}
/* =============================================================================
PHONE LAYOUT (≤ 480px) — further compaction, hide the spectrum bars to
reclaim vertical room for the actual timeline editor.
============================================================================= */
@media (max-width: 480px) {
/* Spectrum analyser is decorative — hide it on phone-size screens to
give the timeline more vertical real estate. VU meters stay (they're
functional: they tell you the master is actually outputting audio). */
.master {
grid-template-columns: 1fr 130px;
height: 110px;
}
.master-center { display: none; }
/* .app keeps `auto 1fr auto` from the 768px rule — DO NOT override back
to fixed rows here, the wrapped topbar would get clipped. */
.topbar { gap: 8px; padding: 6px 10px; }
/* Track-headers narrower still on tiny screens. */
.main { grid-template-columns: 140px 1fr; }
/* Master fader / room slider / auto-pan — single-column layout works
better than the wide rows at this width. */
.master-fader-row { gap: 8px; }
.master-fader-value { font-size: 11px; min-width: 36px; }
/* Tighten brand padding even more on the narrowest layout. */
.brand { padding-right: 8px; }
.brand-name { font-size: 16px; }
}
/* =============================================================================
AURORA MARKETING LANDING (replaces the older click-prompt overlay)
Sticky nav · hero with live mock studio · sounds · palettes · mixes
· how-it-works · FAQ · CTA · footer
All classes prefixed `.m-` so they don't collide with the studio chrome
above.
============================================================================= */
.marketing {
/* Override the inherited body `overflow:hidden`/`user-select:none`. The
marketing landing is the page — it needs to scroll vertically and let
the user select / copy body copy and FAQ answers. */
position: fixed; inset: 0; z-index: 100;
overflow-y: auto;
background: transparent; /* body bg + .aurora behind */
user-select: text;
-webkit-user-select: text;
transition: opacity 0.35s ease;
}
.marketing.fading { opacity: 0; pointer-events: none; }
.m-page { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 760px) { .m-page { padding: 0 18px; } }
/* ── Top nav ──────────────────────────────────────────────────────────── */
.m-nav {
position: sticky; top: 0; z-index: 50;
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
background: color-mix(in oklch, var(--bg) 78%, transparent);
border-bottom: 1px solid var(--line);
}
.m-nav-inner {
display: flex; align-items: center; gap: 24px; height: 56px;
}
.m-brand {
display: flex; align-items: center; gap: 10px;
font-weight: 600; letter-spacing: -0.01em; color: var(--fg);
text-decoration: none;
}
.m-brand-sub { color: var(--fg-mute); font-weight: 400; }
.m-glyph {
width: 22px; height: 22px; border-radius: 6px;
background:
radial-gradient(120% 60% at 50% 110%, var(--accent) 0%, transparent 60%),
linear-gradient(180deg, oklch(0.30 0.04 250), oklch(0.20 0.04 250));
box-shadow: inset 0 0 0 1px var(--line-2), 0 0 24px -6px var(--accent);
position: relative; flex-shrink: 0;
}
.m-glyph::after {
content: ''; position: absolute; inset: 0; border-radius: 6px;
background:
linear-gradient(180deg, transparent 30%, oklch(0.96 0.01 90 / 0.35) 30%, oklch(0.96 0.01 90 / 0.35) 32%, transparent 32%),
linear-gradient(180deg, transparent 50%, oklch(0.96 0.01 90 / 0.55) 50%, oklch(0.96 0.01 90 / 0.55) 52%, transparent 52%),
linear-gradient(180deg, transparent 70%, oklch(0.96 0.01 90 / 0.35) 70%, oklch(0.96 0.01 90 / 0.35) 72%, transparent 72%);
}
.m-nav-links {
display: flex; gap: 22px; list-style: none;
color: var(--fg-dim); font-size: 13.5px;
}
.m-nav-links a { color: inherit; text-decoration: none; transition: color 0.15s; }
.m-nav-links a:hover { color: var(--fg); }
@media (max-width: 900px) { .m-nav-links { display: none; } }
.m-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.m-lang {
display: flex; gap: 2px; padding: 3px;
border: 1px solid var(--line); border-radius: 8px; font-size: 11px;
}
.m-lang-pill {
padding: 3px 8px; border-radius: 5px;
color: var(--fg-mute); font-family: 'Geist Mono', monospace;
text-decoration: none; transition: color 0.15s, background 0.15s;
}
.m-lang-pill:hover { color: var(--fg-dim); }
.m-lang-pill.on { background: var(--bg-3); color: var(--fg); }
/* Marketing button — separate from the studio's .library-btn etc. */
.m-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;
border: 1px solid var(--line); color: var(--fg);
background: transparent; cursor: pointer; font-family: inherit;
text-decoration: none;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.m-btn:hover { border-color: var(--line-2); background: var(--bg-2); }
.m-btn.primary {
background: var(--accent); color: #1a1408; border-color: transparent;
box-shadow: 0 0 32px -8px var(--accent);
}
.m-btn.primary:hover { background: color-mix(in oklch, var(--accent) 92%, white); }
.m-btn.ghost { border-color: transparent; color: var(--fg-dim); }
.m-btn.ghost:hover { color: var(--fg); background: var(--bg-2); }
@media (max-width: 600px) { .m-btn.ghost { display: none; } }
/* ── Hero ─────────────────────────────────────────────────────────────── */
.m-hero { position: relative; padding: 64px 0 24px; }
.m-hero-grid {
display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: end;
}
@media (max-width: 1080px) { .m-hero-grid { grid-template-columns: 1fr; gap: 36px; } }
.m-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Geist Mono', monospace; font-size: 11px;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--fg-mute);
}
.m-dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.m-dot-good { background: var(--good); box-shadow: 0 0 12px var(--good); }
.m-dot-accent { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.m-display {
font-weight: 600; letter-spacing: -0.035em; line-height: 0.92;
font-size: clamp(56px, 8.5vw, 132px);
margin: 18px 0 22px;
}
.m-display em {
font-style: normal; color: var(--accent);
background: linear-gradient(180deg, var(--accent) 0%, color-mix(in oklch, var(--accent) 60%, var(--fg)) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.m-lede { font-size: 18px; line-height: 1.55; color: var(--fg-dim); max-width: 560px; }
.m-hero-cta { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.m-hero-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
margin-top: 44px;
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.m-stat { padding: 18px 18px 18px 0; border-right: 1px solid var(--line); }
.m-stat:last-child { border-right: none; }
.m-stat-n { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.m-stat-l {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--fg-mute); margin-top: 4px;
}
/* ── Hero studio mock ─────────────────────────────────────────────────── */
.m-studio {
position: relative;
border: 1px solid var(--line); border-radius: 18px;
background:
radial-gradient(120% 80% at 50% 0%, oklch(0.26 0.06 260 / 0.55) 0%, transparent 60%),
var(--bg-2);
overflow: hidden;
box-shadow:
0 30px 80px -30px black,
0 0 0 1px color-mix(in oklch, var(--accent) 12%, transparent);
}
.m-studio-bar {
display: flex; align-items: center; gap: 12px;
height: 42px; padding: 0 14px;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
font-size: 11.5px; color: var(--fg-dim);
}
.m-studio-bar .m-dim { color: var(--fg-mute); }
.m-studio-bar b { color: var(--fg); font-weight: 500; }
.m-traffic { display: flex; gap: 6px; }
.m-traffic i { width: 10px; height: 10px; border-radius: 999px; display: block; }
.m-traffic i:nth-child(1) { background: oklch(0.65 0.18 25); }
.m-traffic i:nth-child(2) { background: oklch(0.78 0.16 80); }
.m-traffic i:nth-child(3) { background: oklch(0.72 0.16 150); }
.m-sep { flex: 1; }
.m-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px;
color: var(--fg-dim);
}
.m-transport {
display: grid; grid-template-columns: auto 1fr auto;
gap: 20px; padding: 18px 18px 14px; align-items: center;
border-bottom: 1px solid var(--line);
}
.m-play {
width: 54px; height: 54px; border-radius: 999px;
background: var(--accent); color: #1a1408;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 40px -6px var(--accent);
cursor: pointer; flex-shrink: 0; border: none;
transition: transform 0.15s;
}
.m-play:hover { transform: scale(1.03); }
.m-play svg { width: 18px; height: 18px; }
.m-now { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.m-now-title {
font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--fg);
}
.m-now-meta {
font-size: 11px; color: var(--fg-mute); letter-spacing: 0.05em;
display: flex; gap: 14px; flex-wrap: wrap;
}
.m-now-meta b { color: var(--fg-dim); font-weight: 500; }
.m-now-meta .m-dim { color: var(--fg-mute); }
.m-vu { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.m-vu-row {
display: flex; gap: 2px; align-items: center;
}
.m-vu-row > span:first-child {
font-size: 10px; color: var(--fg-mute);
margin-right: 6px; width: 8px;
}
.m-vu-cells { display: flex; gap: 2px; }
.m-vu-cell { width: 5px; height: 9px; background: var(--bg-3); border-radius: 1px; }
.m-timeline { padding: 14px 18px 6px; position: relative; }
.m-ruler {
height: 18px; position: relative;
border-bottom: 1px solid var(--line); margin-bottom: 8px;
font-size: 9.5px; color: var(--fg-mute);
}
.m-ruler > span:not(.m-tick) {
position: absolute; top: 2px; transform: translateX(-50%);
}
.m-tick {
position: absolute; bottom: 0; width: 1px; height: 4px;
background: var(--line-2);
}
.m-tick-minor { height: 2px; }
.m-tracks { display: flex; flex-direction: column; gap: 6px; position: relative; }
.m-track {
display: grid; grid-template-columns: 130px 1fr; gap: 10px;
align-items: center; height: 38px;
}
.m-track-head {
display: flex; align-items: center; gap: 8px;
font-size: 11.5px; color: var(--fg-dim);
padding: 0 10px; height: 100%;
border: 1px solid var(--line); border-radius: 8px;
background: var(--bg-3);
}
.m-swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.m-track-name {
flex: 1; min-width: 0; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
font-size: 11px;
}
.m-ctrl {
font-size: 10px; color: var(--fg-mute);
padding: 2px 4px; border-radius: 3px; border: 1px solid var(--line);
}
.m-lane {
height: 100%; position: relative;
background: repeating-linear-gradient(90deg,
transparent 0 calc(100% / 16 - 1px),
color-mix(in oklch, var(--line) 50%, transparent) calc(100% / 16 - 1px) calc(100% / 16));
border-radius: 8px; border: 1px solid var(--line);
}
.m-clip {
position: absolute; top: 3px; bottom: 3px; border-radius: 6px;
overflow: hidden;
box-shadow: inset 0 0 0 1px color-mix(in oklch, white 18%, transparent);
}
.m-playhead {
position: absolute; top: 0; bottom: 0; width: 1px;
background: var(--accent); box-shadow: 0 0 8px var(--accent);
pointer-events: none;
}
.m-playhead::before {
content: ''; position: absolute; top: -2px; left: -4px;
width: 9px; height: 9px; background: var(--accent);
transform: rotate(45deg); border-radius: 2px;
}
.m-studio-foot {
display: grid; grid-template-columns: 1fr auto; gap: 18px;
padding: 14px 18px 18px; border-top: 1px solid var(--line);
background: linear-gradient(180deg, transparent, var(--bg-3));
}
.m-spectrum {
height: 60px; display: flex; align-items: flex-end; gap: 2px;
padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px;
background: var(--bg); overflow: hidden;
}
.m-spectrum span {
flex: 1;
background: linear-gradient(180deg, var(--accent-2), color-mix(in oklch, var(--accent-2) 40%, transparent));
border-radius: 1px;
transition: height 0.12s ease-out;
min-width: 2px;
}
.m-master { display: flex; align-items: center; gap: 14px; }
.m-knob {
width: 54px; height: 54px; border-radius: 999px;
background: conic-gradient(from 220deg, var(--accent) 0deg, var(--accent) 240deg, var(--line) 240deg, var(--line) 360deg);
padding: 3px;
}
.m-knob-inner {
width: 100%; height: 100%; border-radius: 999px;
background: radial-gradient(circle at 30% 30%, var(--bg-3), var(--bg));
border: 1px solid var(--line-2); position: relative;
}
.m-knob-inner::after {
content: ''; position: absolute;
top: 6px; left: 50%; width: 2px; height: 14px;
background: var(--accent); border-radius: 1px;
transform: translateX(-50%);
}
.m-master-read {
font-size: 11px; color: var(--fg-dim); line-height: 1.55;
}
.m-master-read b {
display: block; color: var(--fg); font-size: 14px; font-weight: 500;
}
.m-master-read .m-dim { color: var(--fg-mute); margin-top: 2px; display: block; }
/* ── Section shared ──────────────────────────────────────────────────── */
.m-section { padding: 96px 0 32px; scroll-margin-top: 72px; }
.m-section-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; margin-bottom: 32px; flex-wrap: wrap;
}
.m-section-num {
font-size: 11px; color: var(--fg-mute); letter-spacing: 0.15em;
}
.m-section h2 {
font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.025em;
font-weight: 500; margin: 4px 0 0; line-height: 1; max-width: 14ch;
color: var(--fg);
}
.m-section-sub {
color: var(--fg-dim); font-size: 15px; max-width: 46ch; line-height: 1.55;
}
/* ── Sound catalogue grid (hairline-separated) ───────────────────────── */
.m-sounds {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
background: var(--line); border: 1px solid var(--line);
border-radius: 14px; overflow: hidden;
}
@media (max-width: 980px) { .m-sounds { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .m-sounds { grid-template-columns: repeat(2, 1fr); } }
.m-sound {
background: var(--bg-2); padding: 16px 14px;
display: flex; flex-direction: column; gap: 10px;
min-height: 108px; position: relative; cursor: pointer;
transition: background 0.15s;
}
.m-sound:hover { background: var(--bg-3); }
.m-sound-ico {
width: 26px; height: 26px; border-radius: 6px;
background: var(--bg-3);
display: flex; align-items: center; justify-content: center;
color: var(--fg-dim); /* defines the icon stroke colour */
}
/* Icons rendered via CSS mask-image (alpha-channel SVG) + background-color:
currentColor — so the stroke colour follows `color: var(--fg-dim)` and
stays correct after any future palette switch (Aurora ↔ Ember ↔ …).
Switching from background-image to mask also removes the hardcoded
`stroke='#a39a8b'` from the data URIs, which was an old non-Aurora hue. */
.m-sound-ico::before {
content: ''; display: block;
width: 14px; height: 14px;
background-color: currentColor;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
}
.m-sound-ico[data-icon="rain"]::before, .m-sound-ico[data-icon="weather"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.m-sound-ico[data-icon="water"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.m-sound-ico[data-icon="fire"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.m-sound-ico[data-icon="wind"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.m-sound-ico[data-icon="forest"]::before, .m-sound-ico[data-icon="birds"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.m-sound-ico[data-icon="urban"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.m-sound-ico[data-icon="spirit"]::before, .m-sound-ico[data-icon="bells"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.m-sound-ico[data-icon="drone"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.m-sound-ico[data-icon="noise"]::before, .m-sound-ico[data-icon="insects"]::before,
.m-sound-ico[data-icon="animals"]::before, .m-sound-ico[data-icon="percuss"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.m-sound-n {
font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--fg);
}
.m-sound-t {
font-size: 10px; color: var(--fg-mute);
letter-spacing: 0.08em; text-transform: uppercase;
}
.m-sound-num {
position: absolute; top: 14px; right: 14px;
font-size: 10px; color: var(--fg-mute);
}
.m-more {
text-align: center; margin-top: 24px;
color: var(--fg-mute); font-size: 11px; letter-spacing: 0.1em;
}
/* ── Palettes ────────────────────────────────────────────────────────── */
.m-palettes {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 900px) { .m-palettes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .m-palettes { grid-template-columns: 1fr; } }
.m-palette {
border: 1px solid var(--line); border-radius: 14px; padding: 18px;
background: var(--bg-2);
display: flex; flex-direction: column; gap: 14px; min-height: 200px;
transition: border-color 0.15s, transform 0.15s;
cursor: pointer;
}
.m-palette:hover { border-color: var(--line-2); transform: translateY(-2px); }
.m-palette-label {
display: flex; justify-content: space-between; align-items: center;
}
.m-palette-n {
font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--fg);
}
.m-palette-k { font-size: 10px; color: var(--fg-mute); }
.m-palette-desc { font-size: 12.5px; color: var(--fg-dim); line-height: 1.5; }
.m-palette-chips {
display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto;
}
.m-chip {
font-size: 10px; padding: 3px 7px; border-radius: 5px;
background: var(--bg-3); color: var(--fg-dim);
border: 1px solid var(--line);
}
.m-wave-strip {
height: 32px; display: flex; align-items: center; gap: 2px;
}
.m-wave-strip span {
flex: 1; background: var(--fg-mute); border-radius: 1px; min-width: 2px;
}
/* ── Mixes ───────────────────────────────────────────────────────────── */
.m-mixes {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
background: var(--line); border: 1px solid var(--line);
border-radius: 14px; overflow: hidden;
}
@media (max-width: 760px) { .m-mixes { grid-template-columns: 1fr; } }
.m-mix {
background: var(--bg-2); padding: 22px 24px;
display: flex; align-items: center; gap: 18px;
text-decoration: none; color: inherit;
transition: background 0.15s;
}
.m-mix:hover { background: var(--bg-3); }
.m-mix-play {
width: 44px; height: 44px; border-radius: 10px;
background: linear-gradient(180deg, var(--bg-3), var(--bg));
border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
color: var(--accent); flex-shrink: 0;
}
.m-mix-play svg { width: 16px; height: 16px; }
.m-mix-info { flex: 1; min-width: 0; }
.m-mix-n {
font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
color: var(--fg);
}
.m-mix-meta {
font-size: 11px; color: var(--fg-mute);
margin-top: 2px; letter-spacing: 0.05em;
}
.m-mix-load {
font-size: 10px; color: var(--fg-mute); letter-spacing: 0.12em;
}
/* ── How it works ────────────────────────────────────────────────────── */
.m-how {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: var(--line); border: 1px solid var(--line);
border-radius: 14px; overflow: hidden;
}
@media (max-width: 900px) { .m-how { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .m-how { grid-template-columns: 1fr; } }
.m-step {
background: var(--bg-2); padding: 24px; min-height: 200px;
display: flex; flex-direction: column; gap: 14px;
}
.m-step-n { font-size: 11px; color: var(--accent); }
.m-step h3 {
margin: 0; font-size: 18px; font-weight: 500;
letter-spacing: -0.01em; color: var(--fg);
}
.m-step p { margin: 0; font-size: 13.5px; color: var(--fg-dim); line-height: 1.55; }
.m-step-glyph { margin-top: auto; color: var(--fg-mute); opacity: 0.6; }
.m-step-glyph svg { width: 36px; height: 36px; }
/* ── FAQ ─────────────────────────────────────────────────────────────── */
.m-faq {
display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
background: var(--line); border: 1px solid var(--line);
border-radius: 14px; overflow: hidden;
}
@media (max-width: 760px) { .m-faq { grid-template-columns: 1fr; } }
.m-qa { background: var(--bg-2); padding: 22px 24px; }
.m-qa h4 {
margin: 0 0 8px; font-size: 15px; font-weight: 500;
letter-spacing: -0.005em;
display: flex; gap: 10px; align-items: flex-start;
color: var(--fg);
}
.m-qa h4::before {
content: '?'; color: var(--accent); font-weight: 600;
font-family: 'Geist Mono', monospace;
}
.m-qa p { margin: 0; font-size: 13.5px; color: var(--fg-dim); line-height: 1.6; }
/* ── CTA strip ───────────────────────────────────────────────────────── */
.m-cta {
margin-top: 64px;
border: 1px solid var(--line); border-radius: 18px;
padding: 48px;
background:
radial-gradient(60% 100% at 80% 50%, oklch(0.30 0.10 260 / 0.55), transparent 70%),
radial-gradient(40% 80% at 0% 50%, oklch(0.28 0.10 75 / 0.35), transparent 70%),
var(--bg-2);
display: flex; justify-content: space-between; align-items: center;
gap: 32px; flex-wrap: wrap;
}
.m-cta h3 {
margin: 0; font-size: clamp(28px, 3.4vw, 44px);
letter-spacing: -0.025em; font-weight: 500;
line-height: 1.04; max-width: 18ch; color: var(--fg);
}
.m-cta-side { display: flex; gap: 10px; flex-wrap: wrap; }
/* ── Footer ──────────────────────────────────────────────────────────── */
.m-foot {
margin-top: 96px; padding: 48px 0 36px;
border-top: 1px solid var(--line);
color: var(--fg-dim); font-size: 13px;
}
.m-foot-grid {
display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 36px;
}
@media (max-width: 780px) { .m-foot-grid { grid-template-columns: 1fr 1fr; } }
.m-foot-brand { margin-bottom: 14px; }
.m-foot-desc { margin: 0; max-width: 38ch; font-size: 13px; line-height: 1.55; }
.m-foot-grid h5 {
font-size: 10.5px; color: var(--fg-mute);
letter-spacing: 0.18em; text-transform: uppercase;
margin: 0 0 14px; font-weight: 500;
}
.m-foot-grid ul {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 8px;
}
.m-foot-grid a { color: inherit; text-decoration: none; }
.m-foot-grid a:hover { color: var(--fg); }
.m-foot-bottom {
margin-top: 48px; display: flex; justify-content: space-between;
font-size: 11px; color: var(--fg-mute);
flex-wrap: wrap; gap: 10px;
}
.m-kbd {
font-family: 'Geist Mono', monospace; font-size: 11px;
padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px;
color: var(--fg-dim); background: var(--bg-2);
}
/* Mobile tweaks for the marketing page. */
@media (max-width: 760px) {
.m-hero { padding: 32px 0 16px; }
.m-section { padding: 56px 0 16px; }
.m-cta { padding: 28px; }
.m-foot { margin-top: 48px; padding: 32px 0 24px; }
}
/* =============================================================================
RENDER MODE (?render=1) — automated YouTube content production.
The body gets `class="render-mode"` and one of `scene-hook/studio/viz/cursor`
from render-mode.js. The studio (.app) is always visible underneath; scene
classes overlay watermark / hook / fullscreen-viz / fake-cursor on top of it.
============================================================================= */
body.render-mode {
user-select: none;
cursor: none; /* hide real cursor — only the fake render cursor */
overflow: hidden;
}
body.render-mode .app { height: 100vh; height: 100dvh; }
/* Watermark — small persistent URL bottom-left. Always visible in render mode. */
#renderWatermark {
position: fixed;
bottom: 16px; left: 24px;
z-index: 250;
pointer-events: none;
font-family: 'Geist', sans-serif;
opacity: 0.55;
transition: opacity 0.3s;
}
body.render-mode #renderWatermark { opacity: 0.55; }
body.scene-viz #renderWatermark { opacity: 0.85; }
body.scene-hook #renderWatermark { opacity: 0; }
.render-wm-logo {
font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
color: var(--fg);
}
.render-wm-url {
font-family: 'Geist Mono', monospace;
font-size: 11px; letter-spacing: 0.08em;
color: var(--accent);
margin-top: 2px;
}
/* Hook overlay — fullscreen during the first 5 seconds of each cycle.
Big logo + URL with a slow pulse. Aurora background bleeds through. */
#renderHook {
position: fixed; inset: 0; z-index: 300;
display: flex; align-items: center; justify-content: center;
background: color-mix(in oklch, var(--bg) 92%, transparent);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0; pointer-events: none;
transition: opacity 0.6s ease;
}
body.scene-hook #renderHook { opacity: 1; }
.render-hook-inner { text-align: center; }
.render-hook-title {
font-family: 'Geist', sans-serif;
font-size: clamp(72px, 9vw, 140px);
font-weight: 600; letter-spacing: -0.035em; line-height: 1;
color: var(--fg);
}
.render-hook-title em {
font-style: normal;
background: linear-gradient(180deg, var(--accent) 0%, color-mix(in oklch, var(--accent) 60%, var(--fg)) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
margin-left: 12px;
}
.render-hook-url {
font-family: 'Geist Mono', monospace;
font-size: clamp(20px, 2vw, 28px); letter-spacing: 0.12em;
color: var(--accent); text-transform: lowercase;
margin-top: 18px;
}
.render-hook-tag {
font-family: 'Geist Mono', monospace;
font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--fg-mute); margin-top: 12px;
}
/* CTA banner — bottom strip during cursor scene. Slides up from below. */
#renderCta {
position: fixed;
left: 24px; right: 24px; bottom: 24px;
z-index: 260; pointer-events: none;
background: color-mix(in oklch, var(--bg-2) 92%, transparent);
border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
border-radius: 14px;
padding: 18px 28px;
display: flex; align-items: center; justify-content: space-between;
gap: 24px;
box-shadow: 0 20px 60px -20px color-mix(in oklch, var(--accent) 30%, black);
opacity: 0;
transform: translateY(40px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
body.scene-cursor #renderCta {
opacity: 1; transform: translateY(0);
}
.render-cta-text {
font-family: 'Geist', sans-serif; font-weight: 500;
font-size: 20px; color: var(--fg);
}
.render-cta-url {
font-family: 'Geist Mono', monospace;
font-size: 22px; font-weight: 600;
color: var(--accent); letter-spacing: 0.02em;
}
/* Fake cursor — moves along a scripted path during scene-cursor. */
#renderCursor {
position: fixed;
top: 50%; left: 50%;
z-index: 240;
pointer-events: none;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
opacity: 0;
/* Long transition for smooth lerping between waypoints. */
transition: opacity 0.4s, left 1.2s cubic-bezier(0.4, 0, 0.2, 1), top 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body.scene-cursor #renderCursor { opacity: 1; }
/* Interface stays static — no transform/scale on .app. Previous "cinematic
camera" approach (scale 2.2× on scene-viz, 1.15× on scene-cursor) caused
pixel-interpolation artifacts in the recorded video (every clip-edge,
waveform stroke, text glyph re-rasterised mid-animation). The recorded
output is much cleaner with the interface at its native resolution.
Overlays (hook, cta, cursor) still fade in/out on top — those are
composited separately and don't disturb the studio's pixel grid. */
body.render-mode .app {
transition: opacity 0.6s ease;
}
body.scene-studio .app,
body.scene-cursor .app { opacity: 1; }
/* Hook scene dims the interface so the big intro overlay reads cleanly. */
body.scene-hook .app { opacity: 0.4; }
/* Hide marketing-leftovers in render mode (defensive — PHP already skips
them, but if any are present they'd cover the studio). */
body.render-mode #marketing { display: none !important; }
/* ── About section — declarative SSR copy (crawler + LLM citable) ─────────── */
.m-about-body { max-width: 72ch; display: grid; gap: 14px; }
.m-about-lede { color: var(--fg-dim); font-size: 16px; line-height: 1.6; margin: 0; }
.m-about-lede:first-child { color: var(--fg); font-size: 18px; }
.m-about-h3 {
margin: 14px 0 2px; font-size: 12px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--fg-mute); font-weight: 600;
}
.m-about-uses { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.m-about-uses li { color: var(--fg-dim); font-size: 14.5px; line-height: 1.55; }
.m-about-uses li strong { color: var(--fg); font-weight: 600; }
/* ── Full sound library (collapsible, but always present in the HTML source) ─ */
.m-library { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.m-library > summary {
cursor: pointer; padding: 16px 20px; color: var(--fg);
font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
list-style: none; user-select: none;
}
.m-library > summary::-webkit-details-marker { display: none; }
.m-library > summary::before { content: '+ '; color: var(--accent); font-weight: 600; }
.m-library[open] > summary::before { content: '\2212 '; } /* minus */
.m-library-body {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 24px;
padding: 4px 20px 24px;
}
@media (max-width: 980px) { .m-library-body { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .m-library-body { grid-template-columns: 1fr; } }
.m-library-cat-h {
margin: 0 0 8px; font-size: 11px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--accent); font-weight: 600;
}
.m-library-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.m-library-list li { color: var(--fg-dim); font-size: 13px; line-height: 1.4; }