/* Pitch (light): chalk paper, pitch-green ink, line-drawn outlines, serif headlines.
   Loaded last: it restyles the shared components in one place. */

/* Type */
.hero-title, .chat-empty-title, .speed-value, .export-pct { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.hero-title { font-size: 40px; line-height: 1; }
.brand { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: 0; }
.brand-mark { background: none; color: var(--text); border: 1.5px solid var(--text); border-radius: 50%; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 17px; width: 28px; height: 28px; }
.sheet-title { font-family: var(--serif); font-weight: 400; font-size: 20px; }
.section-title { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--text); }
.time-label { font-family: var(--serif); font-style: italic; font-size: 15px; }
.field-label, .help h3 { font-weight: 600; letter-spacing: 0.08em; font-size: 11px; }
.export-pct { font-size: 56px; }
.speed-value { font-size: 40px; }
.lib-title, .card-name { font-weight: 600; }

/* Home: a faint centre circle and halfway line behind the content */
.home { position: relative; background: var(--bg); }
.home::before { content: ""; position: absolute; left: 50%; top: 150px; width: 520px; height: 520px; margin-left: -260px; border: 1.5px solid var(--divider); border-radius: 50%; pointer-events: none; }
.home::after { content: ""; position: absolute; left: 0; right: 0; top: 410px; border-top: 1.5px solid var(--divider); pointer-events: none; }
.home-top, .home-scroll { position: relative; z-index: 1; }
.new-project { background: var(--text); color: var(--bg); border: 0; }
.new-plus { background: var(--bg); color: var(--text); }

/* Surfaces: paper with outline, no fills fighting each other */
.composer, .composer.hero, .library-card, .install-tip { background: var(--panel); border: 1.5px solid var(--line); border-radius: 18px; }
.composer.hero { padding: 20px 16px 14px; }
.composer.hero .composer-input, .text-input, .composer-input { background: transparent; border: 0; border-radius: 0; }
.composer.hero .composer-input { padding: 4px 2px 8px; min-height: 84px; }
.sheet { background: var(--panel); border-top: 1.5px solid var(--line); box-shadow: 0 -12px 40px rgba(14, 42, 27, 0.14); }
.sheet-backdrop { background: rgba(14, 42, 27, 0.28); }
.sheet-grip { background: var(--line); }
.card-thumb { background-color: var(--panel-2); border: 1.5px solid var(--line); border-radius: 14px; }
.card-dur { background: var(--bg); color: var(--text); border: 1.5px solid var(--line); font-family: var(--serif); font-style: italic; font-size: 13px; font-weight: 400; }

/* Buttons: pills. Primary is solid pitch green, the rest are outlined. */
.btn { background: transparent; border: 1.5px solid var(--line); color: var(--text); font-weight: 600; }
.btn.ghost { border-color: var(--line); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.create-btn { height: 46px; font-family: var(--serif); font-weight: 400; font-size: 20px; }
.chip, .idea, .suggest, .chip-btn, .choice, .seg { background: transparent; border: 1.5px solid var(--divider); color: var(--text-2); }
.idea, .suggest { border-radius: 999px; }
.chip-btn.on, .choice.on, .seg.on, .footage-btn.has, .song-btn.has, .ref-btn.has { border-color: var(--accent); color: var(--accent); background: rgba(15, 107, 62, 0.08); }
.seg { border-radius: 12px; }
.captions-row .seg, .chat-options .seg, .mode-pick .seg { border-radius: 999px; }
.icon-btn:active:not(:disabled) { background: rgba(14, 42, 27, 0.08); }
.library-card .icon:last-child { color: var(--text-3); }
.menu-item { border-bottom: 1.5px solid var(--divider); }
.toast { background: rgba(251, 249, 241, 0.94); color: var(--text); border: 1.5px solid var(--line); box-shadow: 0 10px 30px rgba(14, 42, 27, 0.2); }
.toast-error { border-color: var(--danger); color: var(--danger); }
input[type="range"], .range { accent-color: var(--accent); }
.bar { background: var(--panel-3); }
.swatch { border-color: var(--line); }
.spinner { border-color: rgba(14, 42, 27, 0.18); border-top-color: var(--accent); }

/* Editor */
.editor { background: var(--bg); }
.ed-top { padding-bottom: 8px; }
.export-btn { height: 34px; padding: 0 18px; font-family: var(--serif); font-weight: 400; font-size: 19px; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.preview { margin: 2px 14px 0; flex-basis: 38%; border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; background: #000; }
.editor.is-fullscreen .preview { margin: 0; border: 0; border-radius: 0; }
.transport { border-bottom: 0; }
.play-btn { border: 1.5px solid var(--text); width: 42px; height: 42px; }
.timeline-host { margin: 0 14px; border: 1.5px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; overflow: hidden; background: var(--panel); }
.tl-playhead { background: var(--text); box-shadow: 0 0 0 1.5px var(--panel); }
.tl-playhead::before { background: var(--text); box-shadow: 0 0 0 1.5px var(--panel); }
.tl-tool { background: transparent; border: 1.5px solid var(--divider); color: var(--text-2); }
.tl-tool.on { color: var(--accent); border-color: var(--accent); }
.tl-add { background: var(--text); color: var(--bg); }
.import-pill { background: var(--panel); border: 1.5px solid var(--line); color: var(--text-2); }
.prompt-bar, .toolbar, .chat-footer { background: var(--bg); border-top: 0; }
.prompt-bar { padding: 10px 14px 4px; }
.prompt-input, .chat-input { background: transparent; border: 1.5px solid var(--line); color: var(--text); }
.prompt-input::placeholder, .chat-input::placeholder, .composer-input::placeholder { color: var(--text-3); }
.prompt-ai { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); }
.prompt-send { background: var(--accent); color: var(--accent-ink); }
.prompt-status { background: rgba(15, 107, 62, 0.1); border: 1.5px solid rgba(15, 107, 62, 0.4); }
.toolbar { padding-top: 6px; }
.tool { color: var(--text-2); }
.tool .icon { color: var(--text); }
.tool:active { background: rgba(14, 42, 27, 0.07); }
.tool.back { border-right: 1.5px solid var(--divider); }
.tl-lock { background: rgba(15, 107, 62, 0.12); border: 1.5px solid rgba(15, 107, 62, 0.4); }
.preview-banner { background: rgba(0, 0, 0, 0.7); }

/* Chat */
.chat-send { background: var(--accent); color: var(--accent-ink); }
.chat-attach { background: transparent; border: 1.5px solid var(--line); color: var(--text); }
.bubble-user { background: var(--accent); color: var(--accent-ink); }
.turn-card, .chat-notice { background: var(--panel-2); border: 1.5px solid var(--divider); }
.q-option { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); }
.q-option:active, .q-song { background: var(--accent); color: var(--accent-ink); }
.turn-foot { border-top-color: var(--divider); }
.attach-chip { background: transparent; border: 1.5px solid var(--divider); }

/* Lists, song rows, versions */
.song-opt, .version-icon, .song-play { background: var(--panel-2); border: 1.5px solid var(--divider); }
.song-play.on, .version.current .version-icon { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.song-fav.on, .fav-star { color: #B8860B; }
.song-row, .version, .help-row { border-bottom-width: 1.5px; }
.version.previewing { background: rgba(15, 107, 62, 0.08); }
.look-canvas { background: var(--panel-3); border-color: var(--divider); }
.word-input { background: transparent; border-color: var(--line); color: var(--text); }
.ref-card { background: var(--panel-2); border: 1.5px solid var(--divider); }
.mode-pick .credit-models .seg.on { border-color: #B8860B; color: #B8860B; }

/* The picture itself stays dark: result view and the player well */
.result-overlay { background: #000; color: #F4F1E6; }
.result-overlay .icon-btn, .result-overlay .btn:not(.primary) { color: #F4F1E6; border-color: rgba(244, 241, 230, 0.4); }
.result-info { color: rgba(244, 241, 230, 0.7); }
.fs-exit { color: #F4F1E6; }